:root { --navy:#092c5c; --blue:#0a4d9d; --sky:#eef7ff; --ink:#11233d; --muted:#5d6d82; --white:#fff; --line:#dce7f3; --accent:#edb935; --font:'DM Sans', Arial, sans-serif; --display:'Manrope', Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fff; font-family:var(--font); line-height:1.55; } img { max-width:100%; } .container { width:min(1120px, calc(100% - 48px)); margin:auto; }
.hero { position:relative; min-height:720px; overflow:hidden; color:var(--white); background:linear-gradient(119deg, #08264f 0%, #0a3b78 58%, #0e579b 100%); isolation:isolate; } .hero::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 66% 35%, rgba(95,190,255,.38), transparent 25%), linear-gradient(90deg,rgba(2,21,49,.55),transparent 72%); } .site-header { display:flex; align-items:center; justify-content:space-between; padding:28px 0; } .identity { display:flex; align-items:center; gap:15px; color:#fff; text-decoration:none; font-size:11px; line-height:1.25; letter-spacing:.11em; font-weight:700; } .recruitment-status { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; } .recruitment-status i { width:9px; height:9px; border-radius:50%; background:#77e099; box-shadow:0 0 0 5px rgba(119,224,153,.14); }
.hero-content { position:relative; z-index:2; width:min(620px, 100%); padding:92px 0 100px; } .eyebrow { margin:0 0 13px; font-size:12px; font-weight:700; letter-spacing:.14em; color:#bfd9f8; } .eyebrow.blue { color:var(--blue); } .eyebrow.light { color:#bbdcff; } h1,h2,h3 { font-family:var(--display); line-height:1.11; } h1 { margin:0; font-size:clamp(41px, 5.4vw, 70px); letter-spacing:-.045em; } h1 em { color:#bce4ff; font-style:normal; } .hero-lead { max-width:555px; margin:26px 0 31px; font-size:20px; line-height:1.55; color:#e6f2ff; } .button { display:inline-flex; align-items:center; justify-content:center; gap:20px; border-radius:5px; padding:17px 23px; font-weight:700; font-size:14px; text-decoration:none; text-transform:uppercase; letter-spacing:.035em; transition:transform .2s, box-shadow .2s; } .button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(1,21,50,.28); } .button-main { color:#1b3655; background:var(--accent); } .button span { font-size:21px; line-height:10px; } .privacy-note { margin:15px 0 0; color:#bad3ef; font-size:13px; }
.hero-visual { position:absolute; z-index:1; left:calc(50% + 120px); bottom:-65px; width:550px; height:550px; border:1px solid rgba(205,238,255,.2); border-radius:50%; transform:rotate(-16deg); } .hero-visual::before { content:""; position:absolute; inset:48px; border:1px solid rgba(205,238,255,.14); border-radius:50%; } .ball { position:absolute; inset:132px; border-radius:50%; background:linear-gradient(145deg,#fff 0%,#c8e7f8 100%); box-shadow:0 35px 65px rgba(0,17,50,.35); overflow:hidden; } .ball span,.ball b,.ball i { position:absolute; display:block; width:55px; height:55px; background:#0c467a; clip-path:polygon(50% 0,100% 37%,81% 100%,19% 100%,0 37%); } .ball span { top:54px; left:72px; } .ball b { right:5px; bottom:38px; } .ball i { bottom:-23px; left:47px; } .field-line { position:absolute; width:190px; height:1px; background:rgba(224,245,255,.35); } .field-line-one { left:-72px; top:67px; } .field-line-two { right:-85px; bottom:72px; } .visual-label { position:absolute; padding:9px 12px; border:1px solid rgba(255,255,255,.32); color:#e8f5ff; background:rgba(5,39,80,.46); font-size:10px; font-weight:700; letter-spacing:.11em; backdrop-filter:blur(5px); } .label-top { top:83px; right:-32px; } .label-bottom { bottom:97px; left:-54px; }
.section { padding:103px 0; } h2 { max-width:720px; margin:0; font-size:clamp(32px,4vw,49px); letter-spacing:-.04em; } .section-intro { max-width:600px; margin:17px 0 43px; color:var(--muted); font-size:18px; } .benefits { background:var(--sky); } .benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .benefit-card { min-height:224px; padding:29px; background:#fff; border:1px solid #dfeaf5; border-radius:7px; } .benefit-card h3 { margin:24px 0 9px; font-size:19px; letter-spacing:-.025em; } .benefit-card p { margin:0; color:var(--muted); font-size:15px; } .icon { position:relative; display:block; width:38px; height:38px; color:#0a4d9d; border:2px solid currentColor; border-radius:50%; } .icon::before,.icon::after { content:""; position:absolute; background:currentColor; } .icon-growth::before { height:18px; width:2px; left:17px; bottom:7px; } .icon-growth::after { width:12px; height:2px; left:16px; top:9px; transform:rotate(-45deg); transform-origin:left; } .icon-body::before { width:12px; height:20px; left:11px; top:7px; border:2px solid currentColor; border-radius:8px; background:transparent; } .icon-strength::before { height:2px; width:25px; top:17px; left:5px; } .icon-strength::after { width:5px; height:14px; top:11px; left:7px; box-shadow:18px 0 currentColor; } .icon-mobility::before { width:20px; height:2px; top:18px; left:7px; transform:rotate(-40deg); } .icon-mobility::after { width:7px; height:7px; border-radius:50%; top:7px; left:8px; } .icon-food::before { width:2px; height:23px; top:6px; left:12px; } .icon-food::after { width:2px; height:23px; top:6px; right:11px; transform:rotate(-11deg); } .icon-lab::before { width:15px; height:17px; bottom:5px; left:10px; border:2px solid currentColor; border-top:0; border-radius:0 0 8px 8px; background:transparent; } .icon-lab::after { width:2px; height:15px; top:5px; left:18px; }
.report { color:#fff; background:#0a3872; } .report-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:78px; align-items:center; } .report h2 { margin-bottom:22px; } .report p:not(.eyebrow) { max-width:540px; margin:0; color:#d9ecff; font-size:18px; } .report .report-small { margin-top:23px; font-size:13px; color:#a7c9eb; } .report-preview { overflow:hidden; background:#fff; color:#17365e; border-radius:5px; box-shadow:14px 18px 0 rgba(4,24,58,.22); transform:rotate(2.4deg); } .preview-top { padding:18px 20px; color:#fff; background:#133f76; } .preview-top span,.preview-top strong { display:block; } .preview-top span { font-size:8px; letter-spacing:.13em; opacity:.8; } .preview-top strong { font-family:var(--display); font-size:14px; } .preview-content { padding:23px 21px 18px; } .preview-chip { padding:5px 7px; font-size:8px; font-weight:700; letter-spacing:.09em; color:#176095; background:#e6f3fb; } .preview-lines { margin:23px 0 17px; } .preview-lines i { display:block; height:7px; margin:8px 0; background:#deebf3; } .preview-lines i:nth-child(1) { width:82%; } .preview-lines i:nth-child(2) { width:62%; } .preview-lines i:nth-child(3) { width:74%; } .preview-chart { display:flex; align-items:end; gap:9px; height:70px; padding:11px; background:#eff7fc; } .preview-chart span { width:15%; background:#438bba; } .preview-chart span:nth-child(1){height:25%;}.preview-chart span:nth-child(2){height:58%;}.preview-chart span:nth-child(3){height:44%;}.preview-chart span:nth-child(4){height:80%;}.preview-chart span:nth-child(5){height:67%;}.report-preview>p { margin:0; padding:0 20px 16px; color:#65809a!important; font-size:11px!important; }
.eligibility { background:#fff; } .eligibility-wrap { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:70px; } .eligibility-box { overflow:hidden; border:1px solid var(--line); border-radius:7px; } .eligibility-box div { padding:21px 25px; border-bottom:1px solid var(--line); } .eligibility-box div:last-child { border-bottom:0; } .eligibility-box b,.eligibility-box span { display:block; } .eligibility-box b { color:#093871; font-family:var(--display); font-size:22px; letter-spacing:-.025em; } .eligibility-box span { margin-top:2px; color:var(--muted); font-size:14px; }
.steps { background:#f5f8fc; } .steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:43px; } .steps-grid article { padding:6px 42px 6px 0; } .steps-grid article+article { padding-left:42px; border-left:1px solid #cbdbea; } .steps-grid span { display:grid; width:37px; height:37px; place-items:center; border-radius:50%; color:#fff; background:var(--blue); font-family:var(--display); font-weight:800; } .steps-grid h3 { margin:22px 0 9px; font-size:22px; letter-spacing:-.03em; } .steps-grid p { margin:0; color:var(--muted); font-size:15px; }
.location { background:#fff; } .location-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; } .location-card { padding:30px 32px; border-left:4px solid var(--blue); background:#f2f8fd; } .location-card p { margin:0 0 13px; color:var(--muted); } .location-card .location-name { color:#0d4279; font-family:var(--display); font-size:20px; font-weight:700; } .location-card address { margin-bottom:16px; color:var(--ink); font-style:normal; font-size:17px; } .location-card b { color:#123e70; } .location-card .parking { margin:18px 0 0; padding-top:15px; border-top:1px solid #d3e4f2; color:#23517e; font-size:14px; }
.final-cta { padding:99px 0; text-align:center; color:#fff; background:linear-gradient(120deg,#092c5c,#0d5598); } .final-cta h2 { max-width:720px; margin:0 auto 31px; } footer { padding:22px 0; color:#6d7a8a; background:#fff; font-size:13px; } footer .container { display:flex; justify-content:space-between; gap:20px; }
@media (max-width:850px) { .hero { min-height:690px; } .hero-content { padding-top:77px; } .hero-visual { left:55%; opacity:.64; } .benefit-grid { grid-template-columns:repeat(2,1fr); } .report-grid,.eligibility-wrap { grid-template-columns:1fr; gap:42px; } .report-preview { max-width:460px; width:88%; margin:auto; } }
@media (max-width:560px) { .container { width:min(100% - 36px,1120px); } .hero { min-height:690px; } .site-header { align-items:flex-start; } .identity img { width:71px; } .identity { font-size:8px; gap:8px; } .recruitment-status { font-size:12px; white-space:nowrap; } .hero-content { padding:72px 0; } .hero-lead { font-size:18px; } .button { width:100%; padding:17px 16px; font-size:12px; } .hero-visual { left:38%; bottom:-10px; width:360px; height:360px; } .ball { inset:85px; } .visual-label { display:none; } .section { padding:70px 0; } .benefit-grid,.steps-grid { grid-template-columns:1fr; } .benefit-card { min-height:0; } .steps-grid { gap:28px; } .steps-grid article,.steps-grid article+article { padding:0; border:0; } .report-preview { width:96%; } footer .container { flex-direction:column; gap:3px; } }

/* Campaign additions */
.laboratory { background:#fff; } .lab-grid { display:grid; grid-template-columns:170px 1fr; gap:53px; align-items:start; } .lab-icon { position:relative; width:128px; height:150px; margin:16px auto 0; border:3px solid var(--blue); border-top:0; border-radius:0 0 55px 55px; background:linear-gradient(180deg,transparent 47%,#d9efff 47%); } .lab-icon::before { content:""; position:absolute; top:-31px; left:43px; width:36px; height:42px; border:3px solid var(--blue); border-bottom:0; border-radius:6px 6px 0 0; } .lab-icon span { position:absolute; top:29px; left:24px; width:77px; height:3px; background:var(--blue); transform:rotate(-26deg); } .lab-icon i { position:absolute; width:10px; height:10px; top:63px; left:64px; border-radius:50%; background:var(--accent); } .lab-grid .section-intro { margin-bottom:19px; } .lab-details { display:flex; flex-wrap:wrap; gap:8px; } .lab-details span { padding:7px 10px; color:#174878; background:#edf7ff; border:1px solid #d4eafa; border-radius:3px; font-size:13px; font-weight:600; } .lab-note { margin:20px 0 0; color:var(--muted); font-size:14px; } .lab-note b { color:#164b80; }
.time-value { padding:89px 0; color:#fff; background:linear-gradient(120deg,#082a58,#0c4c8f); } .time-value h2 { max-width:980px; font-size:clamp(31px,4.4vw,54px); } .time-value h2 span { color:#97d3ff; } .time-value p { max-width:725px; margin:23px 0 9px; color:#d7edff; font-size:18px; } .time-value small { color:#a8cfee; }
.report-showcase { transform:rotate(1.5deg); } .report-previews { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .report-previews img { width:100%; aspect-ratio:1.58; object-fit:cover; object-position:top; border:1px solid rgba(205,234,255,.35); box-shadow:9px 11px 0 rgba(4,24,58,.2); } .report-link { display:flex; justify-content:space-between; gap:10px; margin:19px 2px 0; color:#d7edff; font-size:13px; text-decoration:none; } .report-link span { color:#fff; font-weight:700; } .report-link:hover { color:#fff; text-decoration:underline; }
@media (max-width:850px) { .lab-grid { grid-template-columns:110px 1fr; gap:28px; } .lab-icon { transform:scale(.78); transform-origin:top; } .report-showcase { max-width:560px; width:100%; margin:auto; } }
@media (max-width:560px) { .lab-grid { grid-template-columns:1fr; gap:0; } .lab-icon { display:none; } .time-value { padding:70px 0; } .time-value h2 span { display:none; } .time-value h2 { line-height:1.18; } .report-previews { gap:6px; } .report-link { align-items:flex-start; flex-direction:column; } }
@media (max-width:700px) { .location-grid { grid-template-columns:1fr; gap:30px; } .location-card { padding:24px; } }