:root { --bg:#f4f7fb; --ink:#102038; --text:#4f6076; --muted:#7a899c; --line:#dce4ee; --blue:#246fe5; --blue-bright:#246fe5; --font-body:'Inter',sans-serif; --font-display:'Manrope',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); background:var(--bg); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
ul { margin:0; padding:0; list-style:none; }
img { display:block; max-width:100%; }
.icon { flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.scene { position:relative; min-height:100vh; display:flex; flex-direction:column; overflow:hidden; background:radial-gradient(circle at 76% 5%,rgba(65,134,236,.12),transparent 32%),var(--bg); }
.scene::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:linear-gradient(rgba(20,48,83,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,48,83,.035) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.brand-strip,.picker,.bottom-bar { position:relative; z-index:1; width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.brand-strip { display:flex; align-items:center; justify-content:space-between; padding-top:32px; }
.brand-strip > a { width:215px; height:82px; overflow:hidden; }
.header-logo { width:355px; max-width:none; height:auto; transform:translate(-71px,-73px); }
.brand-note { color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.picker { flex:1; display:grid; grid-template-columns:minmax(280px,.78fr) minmax(600px,1.45fr); align-items:center; gap:clamp(56px,7vw,108px); padding:48px 0; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; color:var(--blue-bright); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before { content:''; width:24px; height:1px; background:currentColor; }
.picker h1 { margin:0; color:var(--ink); font:700 clamp(40px,4.2vw,64px)/1.04 var(--font-display); letter-spacing:-.055em; }
.picker h1 .accent { color:var(--blue-bright); }
.hero-copy p { max-width:440px; margin:24px 0 0; color:var(--text); font-size:15px; line-height:1.75; }
.cards { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.card { position:relative; min-height:500px; display:flex; flex-direction:column; padding:28px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 55px rgba(35,61,91,.06); transition:transform .28s ease,border-color .28s ease,background-color .28s ease,box-shadow .28s ease; }
.card::before { content:''; position:absolute; width:260px; height:260px; top:-160px; right:-140px; border-radius:50%; background:var(--blue); filter:blur(70px); opacity:.12; transition:opacity .28s ease,transform .28s ease; }
.card-lab::before { background:#b8c9df; opacity:.12; }
.card:hover { transform:translateY(-5px); border-color:rgba(36,111,229,.28); background:#fff; box-shadow:0 24px 65px rgba(35,61,91,.11); }
.card:hover::before { opacity:.22; transform:scale(1.12); }
.card:focus-visible { outline:2px solid var(--blue-bright); outline-offset:4px; }
.card-top { position:relative; display:flex; align-items:center; justify-content:space-between; margin-bottom:44px; }
.card-icon { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(36,111,229,.18); border-radius:50%; color:var(--blue-bright); background:rgba(36,111,229,.08); }
.card-lab .card-icon { border-color:#d7e0ea; color:#60738b; background:#f0f4f8; }
.card-number { color:var(--muted); font:600 11px/1 var(--font-display); letter-spacing:.12em; }
.card-tag { margin-bottom:13px; color:var(--blue-bright); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.card-lab .card-tag { color:#60738b; }
.card h2 { margin:0 0 13px; font:700 27px/1.15 var(--font-display); letter-spacing:-.035em; }
.card h3 { margin:0 0 14px; color:var(--text); font:600 14px/1.5 var(--font-body); }
.card > p { margin:0 0 22px; color:var(--muted); font-size:12.5px; line-height:1.65; }
.card-points { display:flex; flex-wrap:wrap; gap:7px; }
.card-points li { padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:#607187; background:#f8fafc; font-size:9.5px; font-weight:600; }
.card-cta { margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--ink); font-size:12px; font-weight:700; }
.card-cta .icon { color:var(--blue-bright); transition:transform .22s ease; }
.card:hover .card-cta .icon { transform:translateX(4px); }
.cards-divider { display:none; }
.bottom-bar { display:flex; justify-content:space-between; padding:19px 0 22px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; letter-spacing:.04em; }
@media (min-width:1051px) and (min-height:700px) { body,.scene { height:100vh; height:100svh; } body { overflow:hidden; } .scene { min-height:0; } }
@media (min-width:1051px) and (max-height:760px) { .brand-strip { padding-top:22px; } .picker { padding:25px 0; } .card { min-height:430px; padding:24px; } .card-top { margin-bottom:28px; } .picker h1 { font-size:42px; } .bottom-bar { padding-block:13px; } }
@media (max-width:1050px) { .brand-strip,.picker,.bottom-bar { width:min(920px,calc(100% - 48px)); } .picker { display:flex; flex-direction:column; align-items:stretch; gap:30px; padding:44px 0 36px; } .hero-copy { text-align:center; } .hero-copy p { margin-inline:auto; } .eyebrow { justify-content:center; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .card { min-height:450px; } }
@media (min-width:900px) and (max-width:1050px) and (min-height:650px) and (max-height:850px) {
  body,.scene { height:100vh; height:100svh; min-height:0; }
  body { overflow:hidden; }
  .brand-strip { padding-top:20px; }
  .brand-strip > a { width:192px; height:74px; }
  .header-logo { width:318px; transform:translate(-64px,-65px); }
  .picker { flex:1; gap:18px; padding:18px 0 14px; }
  .eyebrow { margin-bottom:10px; font-size:9px; }
  .picker h1 { font-size:36px; line-height:1.02; }
  .hero-copy p { margin-top:10px; font-size:13px; line-height:1.5; }
  .card { min-height:0; height:390px; padding:22px 24px; border-radius:20px; }
  .card-top { margin-bottom:18px; }
  .card-icon { width:40px; height:40px; }
  .card-icon .icon { width:22px; height:22px; }
  .card-tag { margin-bottom:8px; font-size:8.5px; }
  .card h2 { margin-bottom:7px; font-size:23px; }
  .card h3 { margin-bottom:8px; font-size:12.5px; line-height:1.4; }
  .card > p { margin-bottom:12px; font-size:11px; line-height:1.5; }
  .card-points { gap:5px; }
  .card-points li { padding:5px 8px; font-size:8.5px; }
  .card-cta { padding-top:13px; font-size:11px; }
  .bottom-bar { padding:11px 0 12px; }
}
@media (max-width:680px) { .brand-strip,.picker,.bottom-bar { width:calc(100% - 28px); } .brand-strip { padding-top:24px; } .brand-strip > a { width:164px; height:64px; } .header-logo { width:271px; transform:translate(-54px,-55px); } .brand-note { display:none; } .picker { padding:56px 0 38px; gap:30px; } .picker h1 { font-size:clamp(37px,12vw,52px); } .hero-copy p { max-width:360px; margin-top:18px; font-size:14px; } .eyebrow { margin-bottom:17px; } .cards { grid-template-columns:1fr; } .card { min-height:0; padding:24px; border-radius:20px; } .card:hover { transform:none; } .card-top { margin-bottom:30px; } .card-cta { margin-top:32px; } .bottom-bar span:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }