:root{
  --teal:#26B4BB; --tealD:#1C9097; --tealSoft:rgba(38,180,187,.10);
  --grey:#58595B; --ink:#2A2F34; --mut:#8A9199; --line:#E7EBED;
  --bg:#FFFFFF; --paper:#F6F9FA; --dark:#23282D; --darker:#1C2126;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:all .3s;padding:14px 0}
.nav-row{display:flex;align-items:center;justify-content:space-between}
.logo-link img{height:34px;width:auto}
.logo-link .lgt{display:none}
nav.scrolled{background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-color:var(--line)}
nav.scrolled .lgd{display:none}
nav.scrolled .lgt{display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:rgba(255,255,255,.78);font-size:13.5px;font-weight:600;transition:color .2s}
.nav-links a:hover{color:var(--teal)}
.nav-links a.on{color:var(--teal)}
nav.scrolled .nav-links a{color:var(--grey)}
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.on{color:var(--teal)}
.btn{display:inline-block;padding:11px 24px;border-radius:999px;font-weight:700;font-size:13.5px;transition:all .25s;cursor:pointer;border:none;font-family:inherit}
.btn-line{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-line:hover{border-color:var(--teal);color:var(--teal)}
nav.scrolled .btn-line{background:#fff;color:var(--ink);border-color:var(--line)}
nav.scrolled .btn-line:hover{border-color:var(--teal);color:var(--tealD)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--tealD);transform:translateY(-1px)}
@media(max-width:960px){.nav-links a:not(.btn){display:none}}

/* ── Dark hero (home) & page heroes ── */
.hero{padding:150px 0 90px;color:#fff;background:
  radial-gradient(1000px 560px at 80% 0%, rgba(38,180,187,.14), transparent 60%),
  linear-gradient(180deg,var(--dark), var(--darker))}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.page-hero{padding:150px 0 70px;color:#fff;background:
  radial-gradient(900px 460px at 80% 0%, rgba(38,180,187,.13), transparent 60%),
  linear-gradient(180deg,var(--dark), var(--darker))}
.page-hero h1{font-size:clamp(30px,4.4vw,50px)}
.page-hero .lede{margin-top:16px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);margin-bottom:20px}
.eyebrow::before{content:'';width:30px;height:2px;background:var(--teal);border-radius:2px}
h1{font-weight:800;font-size:clamp(34px,4.6vw,54px);line-height:1.12;letter-spacing:-.015em;color:#fff}
h1 em{font-style:normal;color:var(--teal)}
.lede{margin-top:22px;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.68);max-width:560px}
.hero-ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-metrics{margin-top:52px;display:flex;gap:44px;flex-wrap:wrap}
.hm .n{font-size:28px;font-weight:800;color:#fff}
.hm .n b{color:var(--teal)}
.hm .l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:2px;font-weight:600}
.ecg{display:block;width:100%;height:44px;margin-top:52px;opacity:.4}

/* ── Animated dashboard mockup ── */
.dash{background:#fff;border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(38,180,187,.15);overflow:hidden}
.dash-top{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:50%;background:#E4E9EB}
.dash-title{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dash-body{padding:20px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--paper);border-radius:12px;padding:12px 14px;border-top:3px solid var(--teal)}
.kpi .l{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.kpi .v{font-size:22px;font-weight:800;color:var(--ink);margin-top:3px}
.chart-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:6px 2px 8px}
.dash svg .grid-line{stroke:#EEF2F3}
.trendpath{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 3.4s ease forwards infinite}
.trendfill{fill:url(#tg);opacity:0;animation:fillin 3.4s ease forwards infinite}
@keyframes draw{0%{stroke-dashoffset:600}55%,86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fillin{0%,25%{opacity:0}60%,86%{opacity:1}100%{opacity:0}}
.tickdot{fill:var(--tealD);opacity:0;animation:pop 3.4s ease forwards infinite}
@keyframes pop{0%,50%{opacity:0;r:0}62%,86%{opacity:1}100%{opacity:0}}

/* ── Sections ── */
section{padding:96px 0}
.paper{background:var(--paper)}
.sec-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--tealD);margin-bottom:16px}
h2{font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.18;letter-spacing:-.01em;max-width:700px;color:var(--ink)}
.sec-sub{margin-top:16px;font-size:15.5px;color:var(--grey);max-width:640px;line-height:1.75}

/* ── Pillars ── */
.pillars{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 30px;transition:transform .3s, box-shadow .3s;display:block}
.pillar:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(42,47,52,.08)}
.pill-ic{width:46px;height:46px;border-radius:13px;background:var(--tealSoft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pill-ic svg{width:26px;height:26px}
.pillar h3{font-weight:800;font-size:20px;margin-bottom:10px;color:var(--ink)}
.pillar p{font-size:14px;color:var(--grey);line-height:1.7}
.pillar .more{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;color:var(--tealD)}

/* ── Partners ── */
.partners{padding:76px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partners .pt-label{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);margin-bottom:38px}
.pt-grid{display:flex;gap:56px;align-items:center;justify-content:center;flex-wrap:wrap}
.pt-card{display:flex;align-items:center;justify-content:center;filter:grayscale(1);opacity:.72;transition:filter .25s, opacity .25s, transform .25s}
.pt-card:hover{filter:grayscale(0);opacity:1;transform:translateY(-2px)}
.pt-card img{max-height:44px;width:auto;object-fit:contain}
.pt-card.tall img{max-height:76px}

/* machine feature */
.machine{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:920px){.machine{grid-template-columns:1fr}}
.machine-img{display:flex;justify-content:center}
.machine-img img{max-height:520px;width:auto;border-radius:20px}
.mfacts{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.mfacts{grid-template-columns:1fr}}
.mf{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.mf .h{font-weight:800;font-size:14.5px;color:var(--ink)}
.mf .d{font-size:12.5px;color:var(--grey);margin-top:4px;line-height:1.6}

/* ── InBody / scanner ── */
.inbody-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;margin-top:10px}
@media(max-width:920px){.inbody-grid{grid-template-columns:1fr}}
.scanner-stage{display:flex;justify-content:center;padding:16px 0;position:relative}
.scanner-stage img{max-height:460px;width:auto;border-radius:18px}
.scan-sweep{animation:sweep 3s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateY(0);opacity:0}12%{opacity:1}50%{transform:translateY(206px);opacity:1}88%{opacity:1}96%{opacity:0}}
.ib-outs{margin-top:8px}
.ib-out{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.ib-out .b{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.ib-out .t{font-size:14px;font-weight:600;color:var(--ink)}
.ib-out .s{font-size:12.5px;color:var(--mut);margin-left:auto;text-align:right}
.timeline{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:860px){.timeline{grid-template-columns:1fr 1fr}}
.tl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px}
.tl .n{width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tl h4{font-size:15px;font-weight:800;margin-bottom:6px}
.tl p{font-size:13px;color:var(--grey);line-height:1.65}

/* ── Dark band ── */
.band{background:var(--dark);color:#fff}
.band .sec-eyebrow{color:var(--teal)}
.band h2{color:#fff}
.band .sec-sub{color:rgba(255,255,255,.65)}
.rx-grid{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.rx-grid{grid-template-columns:1fr}}
.rx{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:30px 26px;background:rgba(255,255,255,.03)}
.rx h4{font-weight:800;font-size:17px;margin-bottom:10px;color:var(--teal)}
.rx p{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.7}
.rx .tag{display:inline-block;margin-top:16px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(38,180,187,.22);border-radius:99px;padding:5px 12px}
.fine{margin-top:40px;font-size:11px;color:rgba(255,255,255,.35);max-width:760px;line-height:1.6}

/* ── Board ── */
.game{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:14px}
@media(max-width:900px){.game{grid-template-columns:1fr}}
.board{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 26px 56px rgba(42,47,52,.09)}
.board .bt{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tealD);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.live{display:inline-flex;align-items:center;gap:6px;color:#D64545;font-size:10px;font-weight:700}
.live::before{content:'';width:7px;height:7px;border-radius:50%;background:#D64545;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.brow{display:flex;align-items:center;padding:12px 6px;border-top:1px solid var(--line);font-size:14px;background:#fff}
.brow .rk{width:28px;height:28px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--grey);margin-right:13px;flex:none}
.brow.first .rk{background:var(--teal);color:#fff}
.brow .nm{flex:1;font-weight:700;color:var(--ink)}
.brow .pt{font-weight:800;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.brow .pt .up{color:var(--tealD);font-size:11px;font-weight:800;margin-right:6px;opacity:0;transition:opacity .3s}
.brow.gain .pt .up{opacity:1}
.game-copy h3{font-weight:800;font-size:19px;margin:22px 0 6px;color:var(--ink)}
.game-copy h3:first-child{margin-top:0}
.game-copy p{font-size:14px;color:var(--grey);line-height:1.75}
.ch-cards{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.ch-cards{grid-template-columns:1fr}}
.chc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.chc .cm{display:flex;gap:8px;margin-top:12px}
.chc h4{font-weight:800;font-size:16px}
.chc p{font-size:13px;color:var(--grey);margin-top:5px;line-height:1.6}
.chip{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:var(--tealSoft);color:var(--tealD)}
.chip.elite{background:rgba(214,69,69,.1);color:#C0392B}

/* ── Strip / stats ── */
.strip{background:var(--teal);color:#fff;padding:60px 0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
@media(max-width:820px){.strip-grid{grid-template-columns:repeat(2,1fr)}}
.strip .n{font-size:36px;font-weight:800}
.strip .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:4px;font-weight:600}

/* ── Employers ── */
.emp{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.emp{grid-template-columns:1fr}}
.emp-item{padding:22px 0;border-bottom:1px solid var(--line)}
.emp-item h4{font-weight:800;font-size:16.5px;margin-bottom:5px;color:var(--ink)}
.emp-item p{font-size:13.5px;color:var(--grey);line-height:1.7}

/* ── Demo ── */
.demo{background:var(--paper)}
.demo .card{max-width:620px;margin:48px auto 0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:42px;box-shadow:0 24px 50px rgba(42,47,52,.07)}
.demo label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:20px 0 7px}
.demo input,.demo textarea{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;color:var(--ink);font-size:14.5px;font-family:inherit}
.demo input:focus,.demo textarea:focus{outline:none;border-color:var(--teal)}
.demo textarea{min-height:100px;resize:vertical}
.demo .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.demo .row2{grid-template-columns:1fr}}
.demo .send{width:100%;margin-top:30px;padding:15px}
.demo .ok{margin-top:16px;color:var(--tealD);font-size:13.5px;min-height:20px;text-align:center;font-weight:600}

/* ── CTA banner ── */
.cta{background:var(--dark);color:#fff;text-align:center}
.cta h2{color:#fff;margin:0 auto}
.cta .sec-sub{margin-left:auto;margin-right:auto}

/* ── Footer ── */
footer{background:#14181C;color:rgba(255,255,255,.55);padding:56px 0 40px;font-size:13px}
.foot-row{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center}
footer .flogo{height:40px;width:auto}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;font-weight:600}
.foot-links a:hover{color:#fff}
.foot-fine{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;line-height:1.7;color:rgba(255,255,255,.35)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}