/* BioBoost Research case study, styled after the live library (Poppins 800, Space Grotesk numerals, Open Sans body, deep navy with network blue). */
:root {
  --bg: #050d20; --bg-2: #0a1c40; --bg-3: #122a58; --text: #eaf1ff; --muted: rgba(234,241,255,.68); --accent: #6db3ff; --blue: #39a0ff; --blue-2: #0b54d6;
  --line: rgba(140,175,255,.14); --card: rgba(255,255,255,.043); --ink: #0b1733; --paper: #f4f7fd;
  --head: 'Poppins', Arial, sans-serif; --num: 'Space Grotesk', Arial, sans-serif; --sans: 'Open Sans', Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1); --gut: clamp(18px, 4.5vw, 64px); --max: 1220px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font: 400 16px/1.65 var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* pills, as on the live site */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(109,179,255,.35); background: rgba(57,160,255,.1); color: #bcd8ff; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.pill--sm { padding: 6px 12px; font-size: 10.5px; letter-spacing: .14em; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-2); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.b-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 14px; border: 0; background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 14px 34px -14px rgba(57,160,255,.8); transition: transform .4s var(--ease), box-shadow .4s; }
.b-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(57,160,255,.9); }
.b-ghost { display: inline-flex; align-items: center; min-height: 54px; padding: 0 26px; border-radius: 14px; border: 1px solid rgba(11,23,51,.2); color: var(--ink); font: 600 16px/1 var(--sans); text-decoration: none; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* header */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(5,13,32,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 82px; max-width: 1380px; }
.hdr__logo { display: block; background: #fff; border-radius: 12px; padding: 7px 12px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.6); }
.hdr__logo img { width: 150px; }
.hdr__nav { display: flex; gap: 26px; }
.hdr__nav a { color: #dfe9ff; font: 600 14.5px/1 var(--sans); text-decoration: none; opacity: .9; }
.hdr__nav a:hover { color: var(--accent); opacity: 1; }
.hdr__case { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--accent); font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1100px) { .hdr__nav { display: none; } }
@media (max-width: 560px) { .hdr .wrap { height: 68px; } .hdr__logo img { width: 118px; } .hdr__case { font-size: 9.5px; padding: 6px 9px; } }

/* hero: the DNA film behind navy glass */
.hero { position: relative; overflow: hidden; min-height: calc(100svh - 82px); display: flex; align-items: center; padding: clamp(60px, 9vh, 110px) 0; background: radial-gradient(130% 90% at 50% -8%, var(--bg-3) 0%, var(--bg-2) 42%, var(--bg) 100%); }
.hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(5,13,32,.94) 0%, rgba(7,17,40,.78) 45%, rgba(7,17,40,.25) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
.hero__in { position: relative; z-index: 1; width: 100%; }
.hero h1 { margin: 26px 0 22px; font: 800 clamp(40px, 5vw, 66px)/1.05 var(--head); letter-spacing: -1px; max-width: 12em; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .ln > span { display: inline-block; }
.hero h1 .bl { color: transparent; background: linear-gradient(90deg, #4aa8ff, #2f6cf0); -webkit-background-clip: text; background-clip: text; }
.hero__sub { max-width: 34em; margin: 0 0 32px; color: var(--muted); font: 300 clamp(17px, 1.5vw, 20px)/1.55 var(--sans); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: 600 13px/1 var(--sans); color: #dfe9ff; }
.chips svg { width: 14px; height: 14px; color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 14px; margin-top: 40px; }
.stats div { padding: 18px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); text-align: center; }
.stats b { display: block; font: 700 32px/1 var(--num); color: var(--accent); letter-spacing: -.1px; }
.stats span { display: block; margin-top: 8px; font: 400 12.5px/1.35 var(--sans); color: var(--muted); }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; } .stats div { padding: 14px 8px; } .stats b { font-size: 24px; } .stats span { font-size: 11px; } }

/* section heads */
.sec__head { max-width: 780px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.sec__head h2 { margin: 20px 0 14px; font: 800 clamp(30px, 3.4vw, 46px)/1.12 var(--head); letter-spacing: -.6px; color: #fff; }
.sec__head p { margin: 0; color: var(--muted); font: 300 18px/1.6 var(--sans); }

/* Bio-Scan */
.scan { padding: clamp(80px, 11vw, 140px) 0; background: radial-gradient(800px 500px at 15% 10%, rgba(109,179,255,.12), transparent 60%), var(--bg); }
.scan__box { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(20px, 3vw, 40px); padding: clamp(18px, 2.6vw, 34px); border-radius: 34px; background: radial-gradient(120% 100% at 50% -6%, #12285a 0, #0a1c40 44%, #050e22 100%); box-shadow: 0 50px 90px -50px rgba(0,0,0,.9), inset 0 0 0 1px var(--line); }
.scan__fig { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #000; }
.scan__fig img { width: 100%; height: 100%; object-fit: cover; }
.scan__fig figcaption { position: absolute; top: 16px; left: 0; right: 0; z-index: 1; text-align: center; font: 600 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #8fb4e6; }
.scan__ring { position: absolute; left: 50%; top: 11%; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(109,179,255,.9); box-shadow: 0 0 24px rgba(109,179,255,.8); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { 0%, 100% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .4; transform: translate(-50%, -50%) scale(1.18); } }
.scan__panel { padding: clamp(18px, 2vw, 26px); border-radius: 22px; border: 1px solid var(--line); background: rgba(5,13,32,.45); }
.scan__tag { display: flex; align-items: center; gap: 12px; }
.scan__tag small { font: 600 12px/1 var(--num); color: #7f9bc4; letter-spacing: .1em; }
.scan__panel h3 { margin: 16px 0 8px; font: 800 26px/1.15 var(--head); color: #fff; }
.scan__desc { margin: 0 0 18px; color: var(--muted); font-size: 15.5px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cards article { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.cards header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cards b { font: 700 17px/1.2 var(--head); color: #fff; }
.cards em { font: 600 9.5px/1.3 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #9cc5ff; padding: 4px 8px; border-radius: 6px; background: rgba(57,160,255,.14); white-space: nowrap; }
.cards p { margin: 10px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.specs { display: flex; flex-wrap: wrap; gap: 6px; }
.specs span { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); font: 600 11px/1.2 var(--num); color: #cfe0ff; }
.more { display: inline-block; margin-top: 12px; font: 600 12.5px/1 var(--sans); color: var(--accent); }
.regions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.regions span { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font: 600 12.5px/1 var(--sans); color: #c9d8f3; }
.regions .on { background: linear-gradient(135deg, var(--blue), var(--blue-2)); border-color: transparent; color: #fff; }
@media (max-width: 900px) { .scan__box { grid-template-columns: 1fr; } .scan__fig { max-width: 420px; margin: 0 auto; width: 100%; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .scan__box { border-radius: 24px; } }

/* trust + how */
.trust, .how { padding: clamp(70px, 9vw, 120px) 0; }
.how { padding-top: 0; }
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tcards article { padding: 30px 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(57,160,255,.16); color: var(--accent); }
.ic svg { width: 21px; height: 21px; }
.tcards h3 { margin: 20px 0 10px; font: 700 19px/1.3 var(--head); color: #fff; }
.tcards p { margin: 0; color: var(--muted); font-size: 15px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.steps li { position: relative; padding: 30px 28px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(57,160,255,.08), rgba(255,255,255,.02)); }
.steps .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-2)); font: 700 18px/1 var(--num); color: #fff; }
.steps h3 { margin: 20px 0 10px; font: 700 19px/1.3 var(--head); color: #fff; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .tcards, .steps { grid-template-columns: 1fr; } }

/* COA band */
.coas { padding: 0 0 clamp(70px, 9vw, 110px); }
.coas__in { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(600px 300px at 0% 0%, rgba(57,160,255,.2), transparent 60%), var(--bg-2); }
.coas h2 { font: 800 clamp(26px, 3vw, 38px)/1.15 var(--head); color: #fff; }
.coas p { margin: 10px 0 0; color: var(--muted); max-width: 36em; }
@media (max-width: 760px) { .coas__in { flex-direction: column; align-items: flex-start; } }

/* case study (light, like the live register page body) */
.case { padding: clamp(80px, 10vw, 130px) 0; background: var(--paper); color: var(--ink); }
.case--gate { background: #fff; }
.case__head { max-width: 820px; margin-bottom: clamp(36px, 5vw, 56px); }
.case__head h2 { margin: 18px 0 16px; font: 800 clamp(30px, 3.6vw, 50px)/1.12 var(--head); letter-spacing: -.6px; color: var(--ink); }
.case__head h2 span { color: var(--blue-2); }
.case__head p { margin: 0; font: 400 18px/1.65 var(--sans); color: #4a5672; }
.walls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wall { padding: 28px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(11,23,51,.08), 0 24px 40px -30px rgba(11,23,51,.35); }
.wall .n, .rule .n { font: 700 12px/1 var(--num); letter-spacing: .14em; color: var(--blue-2); text-transform: uppercase; }
.wall h3 { margin: 14px 0 10px; font: 700 20px/1.3 var(--head); }
.wall p, .built p, .rule p { margin: 0; color: #4a5672; font-size: 15.5px; }
.built { list-style: none; margin: clamp(40px, 7vh, 70px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; counter-reset: b; }
.built li { counter-increment: b; position: relative; padding: 26px 0 26px 64px; border-top: 1px solid rgba(11,23,51,.12); }
.built li::before { content: counter(b, decimal-leading-zero); position: absolute; left: 0; top: 26px; font: 700 26px/1 var(--num); color: var(--blue); }
.built h3 { margin-bottom: 8px; font: 700 19px/1.3 var(--head); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags span { padding: 5px 10px; border-radius: 999px; background: #e6eefc; color: #1a4fb8; font: 600 12px/1.2 var(--sans); }
.gate { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.gate h2 { margin: 18px 0 20px; font: 800 clamp(32px, 3.6vw, 50px)/1.1 var(--head); color: var(--ink); }
.gate ul { margin: 0; padding: 0; list-style: none; }
.gate li { position: relative; padding: 12px 0 12px 30px; color: #4a5672; font-size: 17px; border-bottom: 1px solid rgba(11,23,51,.08); }
.gate li::before { content: ''; position: absolute; left: 0; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-2)); }
.gate__card { padding: 30px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(11,23,51,.08), 0 40px 70px -40px rgba(11,23,51,.45); }
.gate__card img { width: 170px; margin-bottom: 18px; }
.gate__card .lab { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-2); }
.gate__card h3 { margin: 10px 0 6px; font: 800 26px/1.2 'Source Serif 4', Georgia, serif; color: #111; }
.gate__card p { margin: 0 0 18px; color: #5a6478; font-size: 14.5px; }
.gate__card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.gate__card label { display: block; margin-bottom: 6px; font: 600 12.5px/1 var(--sans); color: #222; }
.gate__card .f { height: 42px; border-radius: 10px; border: 1px solid #d5dbe7; background: #fbfcfe; padding: 0 12px; font: 400 13px/40px var(--sans); color: #8a93a6; }
.gate__card .go { display: block; margin-top: 8px; padding: 14px; border-radius: 12px; text-align: center; background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; font: 700 15px/1 var(--sans); }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rule { padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(11,23,51,.08); }
.rule h3 { margin: 14px 0 8px; font: 700 18px/1.3 var(--head); }
@media (max-width: 960px) { .walls, .rules { grid-template-columns: 1fr 1fr; } .built, .gate { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .walls, .rules { grid-template-columns: 1fr; } .gate__card .row { grid-template-columns: 1fr; } .built li { padding-left: 52px; } }

/* results + close (back to the library's navy) */
.res { padding: clamp(80px, 10vw, 130px) 0; background: radial-gradient(130% 90% at 50% -8%, var(--bg-3), var(--bg-2) 42%, var(--bg)); }
.res .case__head h2 { color: #fff; }
.res .case__head h2 span { color: var(--accent); }
.res .eyebrow { color: var(--accent); }
.res__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.res__grid div { padding: 30px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.res__grid b { display: block; font: 700 clamp(40px, 4.4vw, 58px)/1 var(--num); color: var(--accent); }
.res__grid span { display: block; margin-top: 12px; color: var(--muted); }
@media (max-width: 860px) { .res__grid { grid-template-columns: 1fr; } }
.close { padding: clamp(90px, 12vw, 150px) var(--gut); text-align: center; background: #fff; color: var(--ink); }
.close h2 { margin: 18px auto 16px; max-width: 16em; font: 800 clamp(32px, 4vw, 56px)/1.1 var(--head); letter-spacing: -.8px; }
.close h2 span { color: var(--blue-2); }
.close p { max-width: 34em; margin: 0 auto 30px; color: #4a5672; font-size: 18px; }
.close .btns { justify-content: center; }
.foot { padding: 28px var(--gut) 110px; text-align: center; background: #fff; color: #6a7489; font-size: 13px; border-top: 1px solid rgba(11,23,51,.08); }

/* entrance */
.rs-intro { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: radial-gradient(130% 90% at 50% -8%, var(--bg-3), var(--bg-2) 42%, var(--bg)); }
.rs-intro__plate { background: #fff; border-radius: 18px; padding: 16px 24px; opacity: 0; }
.rs-intro__plate img { width: min(300px, 60vw); }
.rs-intro__label { position: absolute; bottom: 14%; left: 0; right: 0; text-align: center; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); opacity: 0; }

@media (prefers-reduced-motion: reduce) { .scan__ring { animation: none; } .hero__vid { display: none; } }
.case__head h2 span, .close h2 span { display: block; }
.hero { padding-top: clamp(80px, 11vh, 130px); }