:root{
      --bg:#0a0c0e; --bg2:#0e1114; --card:rgba(18,21,25,.66); --card2:rgba(22,26,31,.92);
      --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
      --text:#dfe9f3; --dim:#8ea0b2; --faint:#5c6a78;
      --accent:#55f4a8; --accent-dim:rgba(85,244,168,.14); --blue:#6ba8ff;
      --maxw:1180px; --radius:16px;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;scroll-padding-top:80px}
    body{font-family:Inter,system-ui,-apple-system,sans-serif;background:
      radial-gradient(1200px 760px at 80% -10%,rgba(85,244,168,.08),transparent 60%),
      radial-gradient(1000px 680px at 5% 8%,rgba(107,168,255,.06),transparent 55%),var(--bg);
      color:var(--text);-webkit-font-smoothing:antialiased;letter-spacing:-.011em;line-height:1.6;overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

    /* nav */
    .nav{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;
      background:rgba(10,12,14,.7);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line-soft)}
    .nav .wrap{display:flex;align-items:center;gap:18px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:#f1f7ff;letter-spacing:-.02em}
    .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
    .brand small{font-weight:500;font-size:10px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase;margin-left:2px}
    .nav-links{margin-left:auto;display:flex;gap:6px}
    .nav-links a{font-size:13.5px;color:var(--dim);padding:8px 13px;border-radius:9px;transition:.15s}
    .nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
    .btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:11px 20px;
      border-radius:12px;border:1px solid var(--line);color:var(--text);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
    .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}
    .btn.primary{position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(85,244,168,.2),rgba(107,168,255,.16));
      border-color:rgba(85,244,168,.45);color:#eafff5}
    .btn.primary:hover{border-color:var(--accent)}
    .btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
      background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-130%);
      animation:sheen 5.5s ease-in-out infinite;pointer-events:none}
    @keyframes sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(280%)}}
    .nav .btn{padding:9px 16px}

    /* hero */
    .hero{padding:80px 0 40px;text-align:center}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.14em;
      text-transform:uppercase;color:var(--accent);margin-bottom:22px}
    .eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:var(--accent);opacity:.5}
    h1.title{font-size:clamp(40px,6.4vw,76px);line-height:1.02;font-weight:800;letter-spacing:-.035em;color:#f4f9ff;margin-bottom:22px}
    .grad{background:linear-gradient(100deg,var(--accent),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    p.lead{font-size:clamp(17px,2.1vw,21px);color:var(--dim);max-width:640px;margin:0 auto 30px}
    .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
    .hero-shot{margin:54px auto 0;max-width:1000px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
      box-shadow:0 40px 120px -50px rgba(85,244,168,.4),0 0 0 1px rgba(255,255,255,.03);position:relative}
    .hero-shot img{display:block;width:100%;height:auto}
    .hero-shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -80px 80px -40px var(--bg);pointer-events:none}

    /* stat strip */
    .stats{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;margin-top:44px;padding-top:30px;border-top:1px solid var(--line-soft)}
    .stat .n{font-size:27px;font-weight:800;color:#f1f7ff;letter-spacing:-.02em}
    .stat .n .u{font-size:14px;color:var(--accent);font-weight:600}
    .stat .l{font-size:12.5px;color:var(--faint);margin-top:2px}

    section{padding:64px 0}
    .sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
    .sec-head .eyebrow{margin-bottom:14px}
    h2{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.025em;color:#eef5ff;line-height:1.1}
    .sec-head p{color:var(--dim);font-size:17px;margin-top:14px}

    /* workflow trio */
    .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;counter-reset:t;
      padding:26px;border-radius:22px;border:1px solid rgba(85,244,168,.2);
      background:linear-gradient(120deg,rgba(85,244,168,.12),rgba(107,168,255,.09) 45%,rgba(85,244,168,.12));
      background-size:220% 220%;animation:drift 11s ease-in-out infinite;
      box-shadow:0 24px 70px -40px rgba(85,244,168,.5)}
    @keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    .step{position:relative;background:rgba(11,14,17,.72);border:1px solid var(--line);border-radius:14px;
      padding:24px;backdrop-filter:blur(12px);counter-increment:t}
    .step::before{content:counter(t);position:absolute;top:16px;right:18px;font-size:13px;font-weight:800;color:var(--accent);opacity:.5}
    .step .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;
      background:linear-gradient(135deg,rgba(85,244,168,.2),rgba(107,168,255,.16));border:1px solid rgba(85,244,168,.3);margin-bottom:14px}
    .step h3{font-size:18px;font-weight:600;color:#f3f8ff;margin-bottom:6px}
    .step p{font-size:14px;color:var(--dim)}

    /* feature: split rows */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:0 0 8px}
    .split.rev .txt{order:2}
    .split .txt .eyebrow{margin-bottom:12px}
    .split .txt h3{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.02em;color:#eef5ff;line-height:1.12;margin-bottom:14px}
    .split .txt p{color:var(--dim);font-size:16px;margin-bottom:10px}
    .split .shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card2);
      box-shadow:0 30px 80px -50px rgba(0,0,0,.9)}
    .split .shot img{display:block;width:100%;height:auto}
    .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
      color:var(--accent);background:var(--accent-dim);border:1px solid rgba(85,244,168,.28);border-radius:20px;padding:4px 12px;margin-bottom:8px}

    /* feature grid */
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
      backdrop-filter:blur(8px);transition:transform .16s,border-color .16s}
    .card:hover{transform:translateY(-3px);border-color:rgba(85,244,168,.3)}
    .card .ic{font-size:22px;margin-bottom:12px;display:block}
    .card h4{font-size:16px;font-weight:600;color:#eef5ff;margin-bottom:6px}
    .card p{font-size:14px;color:var(--dim)}

    /* big science image */
    .feature-big{border-radius:20px;overflow:hidden;border:1px solid var(--line);position:relative;margin-top:8px}
    .feature-big img{display:block;width:100%;height:auto}
    .feature-big .cap{position:absolute;left:0;right:0;bottom:0;padding:26px;
      background:linear-gradient(transparent,rgba(8,10,12,.92));}
    .feature-big .cap h3{font-size:clamp(22px,3vw,30px);font-weight:700;color:#fff;letter-spacing:-.02em}
    .feature-big .cap p{color:#cdd9e6;font-size:15px;margin-top:6px;max-width:560px}

    /* formats */
    .formats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px;margin:0 auto}
    .fmt{font-size:13px;font-weight:500;color:var(--text);padding:8px 16px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
    .fmt b{color:var(--accent)}

    /* CTA band */
    .cta-band{text-align:center;border-radius:24px;padding:64px 24px;position:relative;overflow:hidden;
      border:1px solid rgba(85,244,168,.25);
      background:radial-gradient(80% 140% at 50% 0%,rgba(85,244,168,.14),transparent 60%),var(--bg2)}
    .cta-band h2{margin-bottom:14px}
    .cta-band p{color:var(--dim);font-size:18px;margin-bottom:28px}

    footer{border-top:1px solid var(--line-soft);padding:40px 0;margin-top:40px}
    footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
    footer .badge{font-size:11px;color:var(--faint);letter-spacing:.08em}
    footer a{font-size:13px;color:var(--blue)}

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

    @media (max-width:860px){
      .trio{grid-template-columns:1fr}
      .split{grid-template-columns:1fr;gap:24px}
      .split.rev .txt{order:0}
      .nav-links{display:none}
    }
    @media (prefers-reduced-motion:reduce){.trio,.btn.primary::after{animation:none}.reveal{opacity:1;transform:none}}

    /* ---- animated nav word (Videos) ---- */
    .nav-videos{position:relative;color:#eafff5 !important;font-weight:600;overflow:hidden;isolation:isolate}
    .nav-videos::before{content:"";position:absolute;inset:0;border-radius:9px;z-index:-1;
      background:linear-gradient(100deg,rgba(85,244,168,.30),rgba(107,168,255,.26) 50%,rgba(85,244,168,.30));
      background-size:220% 100%;animation:navglow 4.5s ease-in-out infinite;
      border:1px solid rgba(85,244,168,.35)}
    @keyframes navglow{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:0% 0}}
    .nav-videos:hover::before{filter:brightness(1.25)}

    /* ---- videos page ---- */
    .vid-hero{padding:72px 0 24px;text-align:center}
    .vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:8px}
    .vid-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
      background:var(--card2);transition:transform .16s,border-color .16s;cursor:pointer}
    .vid-card:hover{transform:translateY(-3px);border-color:rgba(85,244,168,.4)}
    .vid-card.feat{grid-column:1/-1}
    .vid-poster{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0c0f12}
    .vid-poster img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .2s,transform .3s}
    .vid-card:hover .vid-poster img{opacity:.8;transform:scale(1.03)}
    .vid-card.feat .vid-poster{aspect-ratio:21/9}
    .vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
    .vid-play span{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      background:rgba(85,244,168,.16);border:1.5px solid var(--accent);backdrop-filter:blur(6px);
      color:var(--accent);font-size:24px;padding-left:5px;transition:transform .18s,background .18s}
    .vid-card:hover .vid-play span{transform:scale(1.12);background:rgba(85,244,168,.28)}
    .vid-badge{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:600;letter-spacing:.08em;
      text-transform:uppercase;color:#0a0c0e;background:var(--accent);border-radius:20px;padding:4px 11px}
    .vid-dur{position:absolute;bottom:12px;right:12px;font-size:12px;font-weight:600;color:#fff;
      background:rgba(8,10,12,.7);border-radius:6px;padding:3px 8px}
    .vid-meta{padding:18px 20px}
    .vid-meta .eyebrow{margin-bottom:8px;font-size:11px}
    .vid-meta h3{font-size:18px;font-weight:600;color:#eef5ff;letter-spacing:-.01em;margin-bottom:6px}
    .vid-card.feat .vid-meta h3{font-size:clamp(22px,3vw,30px);font-weight:700}
    .vid-meta p{font-size:14px;color:var(--dim)}
    .vid-note{text-align:center;color:var(--faint);font-size:13px;margin-top:30px}

    /* hero logo */
    .hero-logo{display:block;width:78%;max-width:480px;margin:0 auto 24px;border-radius:16px;
      box-shadow:0 24px 80px -34px rgba(85,244,168,.45),0 0 0 1px rgba(255,255,255,.04)}
    @media (max-width:600px){.hero-logo{width:90%}}