:root{
  --bg:#fcfcfd; --ink:#0b0b12; --muted:#5d5d6b; --line:#e7e7ee; --tint:#f4f4f8;
  --dark:#0b0b12; --dark2:#14141f; --accent:#8b7cff; --accent2:#c4b5fd;
  --radius:20px; --maxw:1200px;
  --sans:"Switzer","Helvetica Neue",Arial,sans-serif; --mono:var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--sans);font-weight:400;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.04em;line-height:1.02;font-weight:700}
h1,h2{font-weight:700}
h1 b,h2 b,h1 em,h2 em{font-weight:700;font-style:normal}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:15px;padding:14px 24px;border-radius:999px;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn i{font-style:normal;font-size:18px;line-height:1;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(3px)}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1d1d2c}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:18px 32px;font-size:17px}

/* nav */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 32px));z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(14,14,22,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;transition:background .3s,color .3s,border-color .3s}
.brand{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:-.03em}
.brand span{color:var(--accent);margin:0 1px}
/* the YN signature from the live site: black artwork, shown white on dark and as drawn on light */
.brand{display:inline-flex;align-items:center}
.brand-mark{height:40px;width:auto;display:block;filter:invert(1);transition:filter .3s}
.nav.on-light .brand-mark{filter:none}
.footer .brand-mark{height:38px}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500}
.nav-links a{opacity:.8;transition:opacity .2s}
.nav-links a:hover{opacity:1}

/* hero */
.hero,.cta{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:140px}
.hero-inner{max-width:1100px;margin:0 auto;padding:40px 24px 60px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);margin-bottom:28px}
.dot{width:7px;height:7px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:rec 1.8s infinite}
@keyframes rec{70%{box-shadow:0 0 0 9px rgba(255,77,109,0)}100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}
.hero h1{font-size:clamp(42px,7vw,96px);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent2)}
.lead{max-width:600px;margin:26px auto 36px;font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.75)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* logos marquee */
.logos{padding:0 0 36px;text-align:center}
.logos p{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px}
.logo-track{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-track ul{--logo-gap:64px;display:flex;gap:var(--logo-gap);width:max-content;animation:marquee 32s linear infinite}
.logo-track li{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.02em;color:rgba(255,255,255,.55);white-space:nowrap}
/* the names are one set in the HTML, copied --sets times by script.js; each loop moves exactly one set (plus the gap after it), so it joins up seamlessly */
@keyframes marquee{to{transform:translateX(calc((-100% - var(--logo-gap)) / var(--sets,2)))}}

/* sections */
.section{padding:clamp(72px,10vw,130px) 0}
.section.tint{background:var(--tint)}
.section.dark{background:var(--dark);color:#fff}
.section-head{text-align:center;max-width:680px;margin:0 auto 56px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600}
h2{font-size:clamp(34px,5vw,60px)}
.sub{color:var(--muted);margin-top:16px;font-size:clamp(16px,1.5vw,18px)}
.dark .sub{color:rgba(255,255,255,.65)}

/* work */
.grid-wide{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start}
.card-span{grid-column:1/-1}
.grid-tall{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.card h3{font-size:17px;margin-top:14px;letter-spacing:-.02em;font-weight:600}
.frame{position:relative;border-radius:var(--radius);overflow:hidden;background:#111;border:1px solid var(--line)}
.frame.wide{aspect-ratio:16/9}
.frame.tall{aspect-ratio:9/16}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.card-span{justify-self:center;width:calc(50% - 12px)}
.shadow{box-shadow:0 30px 80px -20px rgba(40,20,120,.35)}
.sub-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:64px 0 20px}

/* facts */

/* founder */
.founder-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.founder h2{margin-bottom:6px}
.byline{margin-top:28px;font-size:14px;color:var(--muted);line-height:1.5}
.byline strong{color:var(--ink);font-size:16px}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service{padding:32px;border-radius:var(--radius);background:var(--dark2);border:1px solid rgba(255,255,255,.08);transition:transform .3s,border-color .3s}
.service:hover{transform:translateY(-6px);border-color:rgba(139,124,255,.5)}
.num{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--accent2);margin-bottom:60px}
.num i{font-style:normal;color:rgba(255,255,255,.35)}
.service h3{font-size:28px;margin-bottom:8px}
.for{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent2);margin-bottom:18px}
.service p:last-child{color:rgba(255,255,255,.68);font-size:15px}

/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.person{padding:36px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:22px;color:#fff;background:linear-gradient(135deg,#5b3df5,#b44bff);margin-bottom:22px}
.avatar.sm{width:52px;height:52px;font-size:14px;margin:0;flex:none;object-fit:cover}
.person h3{font-size:24px}
.role{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:6px 0 16px}
.person p:last-child{color:var(--muted)}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.quote blockquote{font-family:var(--sans);font-size:22px;line-height:1.35;letter-spacing:-.02em;font-weight:500}
.quote figcaption{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);line-height:1.35}
.quote figcaption b{display:block;color:var(--ink);font-size:15px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:34px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.plan.featured{background:var(--dark);color:#fff;border-color:transparent;box-shadow:0 30px 70px -20px rgba(91,61,245,.5);transform:translateY(-12px)}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.plan h3{font-size:30px}
.desc{color:var(--muted);margin:10px 0 24px;font-size:15px}
.featured .desc{color:rgba(255,255,255,.65)}
.plan ul{display:grid;gap:12px;margin-bottom:32px;flex:1}
.plan li{position:relative;padding-left:26px;font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) scale(.9)}
.plan .btn{align-self:flex-start}

/* faq */
.faq{display:grid;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 24px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:26px;font-weight:400;color:var(--accent);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--muted)}

/* cta */
.cta{padding:clamp(90px,12vw,160px) 0;text-align:center}
.cta h2{font-size:clamp(40px,6.8vw,92px);margin:8px 0 40px}

/* footer */
.footer{background:var(--dark);color:rgba(255,255,255,.6);padding:36px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer .brand{color:#fff}
.footer nav{display:flex;gap:24px}
.footer nav a:hover{color:#fff}

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

/* responsive */
@media (max-width:1000px){
  .grid-tall{grid-template-columns:repeat(3,1fr)}
  .services,.quotes,.plans{grid-template-columns:1fr}
  .plan.featured{transform:none}
  .founder-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav{padding-left:18px}
  .hero{padding-top:110px}
  .grid-wide,.team{grid-template-columns:1fr}
  .card-span{width:100%}
  .grid-tall{grid-template-columns:repeat(2,1fr);gap:14px}
  .logo-track ul{--logo-gap:40px}
  .person,.service,.quote,.plan{padding:26px}
  .foot{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
body{font-variant-numeric:tabular-nums}
/* type: headings bold, supporting copy medium */
h1,h2,h3{font-weight:700}
body,.lead,.sub,.desc,.for,.role,.byline,.service p,.person p,.plan li,details p,.logos p,.sub-label,.kicker,.eyebrow,.num,.footer{font-weight:500}
.btn,summary,.nav-links a{font-weight:600}

/* custom cursor (mouse devices only): one round blob of liquid glass. cursor.js moves, stretches and scales it;
   glass.js gives it the same refraction as the nav (a plain frosted blur is the fallback elsewhere) */
.cursor-blob{display:none}
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor summary{cursor:none}
  html.has-cursor .frame,html.has-cursor .frame iframe{cursor:auto}
  .cursor-blob{display:block;position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;transition:opacity .25s;will-change:transform;
    background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.4),rgba(255,255,255,.07) 46%,rgba(255,255,255,.02) 72%);
    -webkit-backdrop-filter:blur(2px) saturate(1.5) brightness(1.08);backdrop-filter:blur(2px) saturate(1.5) brightness(1.08);
    box-shadow:inset 0 7px 9px -6px rgba(255,255,255,.75),inset 0 -9px 12px -8px rgba(60,70,130,.2),inset 0 0 14px rgba(255,255,255,.12),0 8px 22px rgba(20,30,70,.2),0 1px 4px rgba(20,30,70,.14)}
  html.cursor-on .cursor-blob{opacity:1}
  html.cursor-native .cursor-blob{opacity:0}
}

/* social-post cards for horizontal videos */
.post{background:#f4f4f6;border:0;border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:14px}
.post .frame{border-radius:16px;border-color:transparent}
.post-head{display:flex;align-items:center;gap:12px}
.post-avatar{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;font-size:17px;object-fit:cover}
.post-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.post-who b{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.post-who span{color:var(--muted);font-size:14px}
.post-who .post-date{font-weight:500}
.post-x{margin-left:auto;display:inline-flex;align-items:center;gap:16px;color:#6b6b78}.post-x svg:last-child{color:var(--ink)}
.post-text{font-size:17px;line-height:1.45;color:#3b3b48;white-space:pre-line}
.post-text strong{color:var(--ink);font-weight:700}
.post-views{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:12px;background:rgba(255,255,255,.94);color:var(--ink);font-weight:700;font-size:15px;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.post-foot{display:flex;justify-content:space-between;gap:16px;padding:4px 6px 0;color:var(--muted);font-size:14px;font-weight:600}
.post-foot span{display:inline-flex;align-items:center;gap:7px}
.post-text:empty,.post-foot:empty{display:none}
/* neighbouring cards share rows (header / caption / video / counts), so their videos line up whatever the caption length */
@supports (grid-template-rows:subgrid){
  .grid-wide{align-items:stretch}
  .post{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px}
  .post-text:empty,.post-foot:empty{display:block}
}

/* hero background: the n8n launch film (streamed from Gumlet, see hero-video.js) */
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#04060f}
/* two stacked layers: the incoming clip fades in over the outgoing one (1.2s, keep in sync with FADE in hero-video.js) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity 1.2s cubic-bezier(.45,0,.55,1);will-change:opacity}
.hero-video.on{opacity:1}
.hero-video.instant{transition:none}
/* tiny reel indicator: which film is on, one segment per clip */
.reel{position:absolute;z-index:1;right:max(24px,calc((100vw - var(--maxw)) / 2 + 24px));bottom:138px;display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);pointer-events:none}
.reel-bars{display:flex;gap:6px}
.reel-bars i{display:block;width:30px;height:2px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.reel-bars b{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
@media (max-width:720px){.reel{display:none}}
/* still frame for visitors who can't / don't want the video (reduced motion, data saver, or stream failure) */
.hero-media.still{background:#04060f url(assets/hero-launch.jpg) 62% 0/cover no-repeat}
.hero-video::cue{opacity:0}
.hero-video::-webkit-media-text-track-container{display:none}
/* darkens the film so the headline stays readable, and fades into the page below */
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(4,6,18,.6) 0%,rgba(4,6,18,.28) 30%,rgba(4,6,18,.4) 62%,#04060f 100%)}

/* scale: calm, premium type sizes */
.hero h1{font-size:clamp(32px,4.4vw,60px);line-height:1.08;letter-spacing:-.03em}
.lead{font-size:clamp(15px,1.25vw,17px);max-width:520px;margin:20px auto 30px;color:rgba(255,255,255,.72)}
.hero-inner{max-width:880px}
.eyebrow{font-size:11px;padding:7px 14px;margin-bottom:22px}
h2{font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.03em}
.cta h2{font-size:clamp(32px,4.6vw,64px);line-height:1.08}
.section-head{margin-bottom:48px}
.sub{font-size:clamp(15px,1.2vw,17px)}
.btn{font-size:14px;padding:12px 22px}
.btn-lg{font-size:15px;padding:15px 28px}
.service h3,.plan h3{font-size:24px}
.person h3{font-size:22px}
.quote blockquote{font-size:20px}

/* phones: the film is centre-cropped behind centred text, so darken it more */
@media (max-width:720px){
  .hero-shade{background:linear-gradient(180deg,rgba(4,6,18,.84) 0%,rgba(4,6,18,.72) 38%,rgba(4,6,18,.3) 60%,rgba(4,6,18,.4) 82%,#04060f 100%)}
}

/* hero composition: text centred over the film */
@media (min-width:721px){
  .hero-inner{position:relative;z-index:0}
  .hero-shade{background:
    radial-gradient(62% 56% at 50% 42%,rgba(4,6,18,.6),rgba(4,6,18,0) 80%),
    linear-gradient(180deg,rgba(4,6,18,.58) 0%,rgba(4,6,18,.2) 30%,rgba(4,6,18,.34) 62%,#04060f 100%)}
}
.hero-inner h1,.hero-inner .lead{text-shadow:0 1px 3px rgba(2,3,10,.3),0 2px 30px rgba(2,3,10,.6)}

/* ================= LIQUID GLASS ================= */
.glass{
  position:relative;isolation:isolate;border:0;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.1);
  backdrop-filter:blur(14px) saturate(1.8) brightness(1.1);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(255,255,255,.18),
    inset 1px 0 1px rgba(255,255,255,.16),
    inset -1px 0 1px rgba(255,255,255,.12),
    inset 0 0 22px rgba(255,255,255,.07),
    0 10px 34px rgba(0,0,0,.34),
    0 2px 6px rgba(0,0,0,.2);
  color:#fff;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s;
}
/* bright rim, strongest top-left and bottom-right like a lit glass edge */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.14) 26%,rgba(255,255,255,0) 48%,rgba(255,255,255,.12) 74%,rgba(255,255,255,.7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* light that follows the cursor across the surface */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:.9;
  background:radial-gradient(120px circle at var(--mx,28%) var(--my,0%),rgba(255,255,255,.3),transparent 62%);
  transition:opacity .3s;
}
.glass:hover{transform:scale(1.035)}
.glass:active{transform:scale(.955);transition-duration:.15s}
.nav.glass:hover{transform:translateX(-50%)}
.nav.glass:active{transform:translateX(-50%)}

.nav.glass{background:linear-gradient(135deg,rgba(12,16,34,.5),rgba(12,16,34,.3) 50%,rgba(12,16,34,.45));border:0}
.btn-glass{background:linear-gradient(135deg,rgba(255,255,255,.36),rgba(255,255,255,.14) 50%,rgba(255,255,255,.3));color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.btn.glass{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1px 1px rgba(255,255,255,.2),inset 0 0 20px rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.3),0 2px 5px rgba(0,0,0,.2)}
.btn-ghost.glass{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 50%,rgba(255,255,255,.09));border:0}
.btn.glass:hover{transform:scale(1.045)}

/* Safari / Firefox: no refraction, keep the frosted look */
.glass-frost .glass{-webkit-backdrop-filter:blur(18px) saturate(1.9) brightness(1.12);backdrop-filter:blur(18px) saturate(1.9) brightness(1.12)}
/* accessibility: honour reduced transparency */
.no-glass .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,18,36,.92)}
@media (prefers-reduced-transparency:reduce){.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,18,36,.92)}}

/* clearer glass: less haze, more of the scene bending through */
.glass{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.015) 45%,rgba(255,255,255,.07))}
.nav.glass{background:linear-gradient(135deg,rgba(10,14,30,.34),rgba(10,14,30,.16) 50%,rgba(10,14,30,.3))}
.btn-glass{background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 50%,rgba(255,255,255,.2))}
.btn-ghost.glass{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 50%,rgba(255,255,255,.07))}

.nav.glass{position:fixed}

/* nav over light sections: dark text, lighter glass */
.nav.glass{transition:color .35s,background .35s,box-shadow .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.nav.glass.on-light{
  color:var(--ink);
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.22) 50%,rgba(255,255,255,.42));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(255,255,255,.4),inset 0 0 22px rgba(255,255,255,.25),0 0 0 1px rgba(10,14,30,.06),0 10px 34px rgba(20,30,60,.16),0 2px 6px rgba(20,30,60,.08);
}
.nav.glass.on-light::after{background:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.3) 26%,rgba(255,255,255,0) 48%,rgba(255,255,255,.25) 74%,rgba(255,255,255,.95) 100%)}
.nav.glass.on-light .btn-glass{color:var(--ink);text-shadow:none;background:linear-gradient(135deg,rgba(10,14,30,.14),rgba(10,14,30,.04) 50%,rgba(10,14,30,.1))}
.nav.glass.on-light .nav-links a{opacity:.85}

/* no hard outlines: glass is defined by refraction + soft light, not strokes */
.glass::after{display:none}
.glass,.btn.glass{box-shadow:
    inset 0 10px 14px -10px rgba(255,255,255,.22),
    inset 0 -10px 14px -10px rgba(255,255,255,.08),
    inset 0 0 26px rgba(255,255,255,.05),
    0 12px 36px rgba(0,0,0,.3),
    0 2px 8px rgba(0,0,0,.16)}
.nav.glass.on-light{box-shadow:
    inset 0 10px 14px -10px rgba(255,255,255,.6),
    inset 0 0 26px rgba(255,255,255,.18),
    0 10px 34px rgba(20,30,60,.16),
    0 2px 6px rgba(20,30,60,.08)}
/* the nav button over light sections: white glass, lifted by soft light and a cool shadow (no dark tint, no outline) */
.nav.glass.on-light .btn.btn-glass,.nav.glass.on-light .menu-btn,.fab.glass.on-light,.sound.glass.on-light{
  color:var(--ink);text-shadow:none;
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(255,255,255,.72) 55%,rgba(255,255,255,.92));
  box-shadow:
    inset 0 8px 10px -6px #fff,
    inset 0 -9px 14px -8px rgba(70,84,130,.2),
    0 8px 20px -6px rgba(40,52,100,.28),
    0 1px 3px rgba(40,52,100,.14)}

/* ================= PROCESS (pinned scroll) ================= */
.process{position:relative;background:#02030a;color:#fff;height:440vh}
.process-pin{position:sticky;top:0;height:100vh;max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(300px,430px) 1fr;gap:64px;align-items:center}
.p-left h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:44px;max-width:380px}
.p-steps{list-style:none;display:grid;gap:26px}
.p-step{cursor:pointer;outline:none;opacity:.32;transition:opacity .45s}
.p-step:hover,.p-step:focus-visible{opacity:.7}
.p-step.on{opacity:1}
.p-step h3{font-size:clamp(18px,1.7vw,23px);letter-spacing:-.02em;display:flex;gap:10px}
.p-step h3 span{font-weight:500;color:rgba(255,255,255,.55)}
.p-step p{max-height:0;overflow:hidden;opacity:0;margin-top:0;color:rgba(255,255,255,.62);font-size:15px;line-height:1.55;max-width:380px;transition:max-height .6s ease,opacity .5s,margin .5s}
.p-step.on p{max-height:140px;opacity:1;margin-top:10px}

.p-right{display:flex;flex-direction:column;align-items:center;gap:26px}
.stage{position:relative;width:100%;height:min(66vh,600px);-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 62%,transparent 100%)}
.scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .8s ease}
.scene.on{opacity:1}
.scene::before{content:"";position:absolute;inset:0;background:url(assets/hero-launch.jpg) var(--pos)/230% auto no-repeat;filter:brightness(.55) saturate(.85) contrast(1.1)}

.pc{width:min(340px,70%);padding:22px 22px 24px;border-radius:24px;color:#fff}
.pc.wide{width:min(480px,82%)}
.pc:hover{transform:none}
.pc-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.pc-title b{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.18)}
.pc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;font-size:13px;color:rgba(255,255,255,.7)}
.pc-row + .pc-row{border-top:1px solid rgba(255,255,255,.1)}
.sk{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.28)}
.sk.hot{background:linear-gradient(90deg,#ffb066,#ff7a3d)}
.pc-lines{display:grid;gap:11px;margin-bottom:18px}
.pc-chips{display:flex;gap:8px;flex-wrap:wrap}
.pc-chips em{font-style:normal;font-size:12px;font-weight:600;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.16);color:rgba(255,255,255,.9)}
.pc-track{position:relative;height:30px;margin-bottom:10px;border-radius:8px;background:rgba(255,255,255,.07)}
.pc-track i{position:absolute;top:3px;bottom:3px;border-radius:6px;background:rgba(255,255,255,.36)}
.pc-track i.b{background:rgba(150,170,255,.55)}
.pc-track i.c{background:rgba(255,160,100,.55)}
.pc-play{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:2px auto 20px;background:rgba(255,255,255,.2);color:#fff}
.pc-play svg{margin-left:3px}
.pc-chips{justify-content:center}

.p-bar{display:flex;gap:8px;width:min(340px,70%)}
.p-bar span{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.p-bar i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px rgba(255,255,255,.7)}

@media (max-width:900px){
  .process{height:460vh}
  .process-pin{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:18px;padding-top:70px}
  .p-left{order:2}
  .p-right{order:1}
  .p-left h2{font-size:26px;margin-bottom:20px;max-width:none}
  .p-steps{gap:12px}
  .p-step h3{font-size:17px}
  .p-step p{font-size:14px}
  .p-step.on p{max-height:120px}
  .stage{height:34vh}
  .pc{padding:16px 16px 18px}
  .p-bar{width:70%}
}
@media (prefers-reduced-motion:reduce){.scene,.p-step,.p-step p{transition:none}}

/* soft rectangular fade instead of a round spotlight */
.stage{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-composite:intersect}

/* reel indicator: proper-case client names; glass glint only appears on hover (no static smudge on the nav) */
.reel-name{text-transform:none;letter-spacing:.02em;font-size:12.5px}
.glass::before{opacity:0}
.glass:hover::before{opacity:.9}


/* client logos: Scouty mascot in the strip (muted to match the wordmarks) and as a post-card avatar */
.logo-track li.logo-mark{display:inline-flex;align-items:center;gap:10px}
.logo-track li img{height:30px;width:auto;filter:grayscale(1) brightness(1.55) contrast(1.05);opacity:.8}
img.post-avatar{background:#fff;object-fit:contain;padding:4px;box-shadow:inset 0 0 0 1px rgba(11,11,18,.08)}
img.post-avatar.full{padding:0;background:none;object-fit:cover;box-shadow:none}   /* a complete round profile picture */

/* ===== process pictures (provenance: assets/process/SOURCES.txt) ===== */
/* the pictures have their own feathered, transparent edges, so no extra fade or dimming is applied */
.stage{height:auto;aspect-ratio:1.36/1;max-height:62vh;-webkit-mask-image:none;mask-image:none}
.scene{display:block}
.scene::before{background:var(--img,none) var(--pos,50% 50%)/cover no-repeat;filter:none;-webkit-mask-image:none;mask-image:none}
/* the glass UI cards would cover these pictures, so they are hidden; delete this rule to bring them back */
.scene .pc{display:none}
@media (max-width:900px){.stage{aspect-ratio:auto;height:36vh;max-height:none}}

/* ===== closing section: galaxy photo behind "Got a launch date?" ===== */
.cta-galaxy{position:absolute;inset:0;z-index:-2;background:#02030a var(--gx-img,none) var(--gx,50% 50%)/cover no-repeat;transform-origin:50% 60%;animation:galaxy-drift 45s ease-in-out infinite alternate}
@keyframes galaxy-drift{from{transform:scale(1)}to{transform:scale(1.08)}}
/* keeps the headline readable and melts the picture into the page edges */
.cta-shade{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 70% at 50% 46%,rgba(2,3,10,.62),rgba(2,3,10,.12) 75%),
  linear-gradient(180deg,#02030a 0%,rgba(2,3,10,.15) 26%,rgba(2,3,10,.1) 68%,rgba(2,3,10,.72) 100%)}

/* ===== hero bottom edge: no hard line. The film's light leaks out of the hero onto the page, like YouTube's ambient mode =====
   One continuous gradient straddles the edge, with no mask and no seam: the shade eases down to the hero's own navy, then .hero-glow
   (a small canvas painted from the playing film by hero-video.js) starts on exactly that navy, brightens through the film's colours and
   melts into the page colour, with eased ends so there is no kink anywhere. The --glow-* numbers are read by hero-video.js. */
:root{--glow-in:70px;--glow-out:290px;--glow-y0:-50px;--glow-y1:230px;--glow-reach:18px;--glow-tint:.5}   /* --glow-tint: how much of the film's colour shows (0 = plain navy-to-white, 1 = full) */
@media (max-width:720px){:root{--glow-out:225px;--glow-y1:165px;--glow-reach:14px}}
.hero{overflow:visible;overflow-x:clip;background:#04060f}
.hero-glow{position:absolute;left:0;right:0;bottom:calc(var(--glow-out) * -1);height:calc(var(--glow-in) + var(--glow-out));z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#04060f 14%,#fcfcfd 84%)}   /* only seen if scripts don't run */
.hero-glow canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.hero-glow.lit canvas{opacity:1}
/* room for the glow to fade out before the first heading, and the heading sits above it */
#work{padding-top:calc(var(--glow-y1) * .83 + 20px)}
#work .wrap{position:relative}

/* the shade eases (no straight-line ending) into the hero's own navy just above the edge, where the glow takes over */
@media (min-width:721px){
  .hero-shade{background:
    radial-gradient(70% 62% at 50% 42%,rgba(4,6,18,.3),rgba(4,6,18,0) 82%),
    linear-gradient(180deg,rgba(4,6,18,.58) 0%,rgba(4,6,18,.24) 30%,
      rgba(4,6,18,.34) calc(100% - 420px),rgba(4,6,18,.52) calc(100% - 340px),rgba(4,6,18,.74) calc(100% - 260px),
      rgba(4,6,18,.9) calc(100% - 185px),rgba(4,6,18,.98) calc(100% - 125px),#04060f calc(100% - 78px))}
}
@media (max-width:720px){
  .hero-shade{background:
    radial-gradient(95% 42% at 50% 30%,rgba(4,6,18,.34),rgba(4,6,18,0) 100%),
    linear-gradient(180deg,rgba(4,6,18,.62) 0%,rgba(4,6,18,.46) 36%,
    rgba(4,6,18,.3) calc(100% - 360px),rgba(4,6,18,.5) calc(100% - 300px),rgba(4,6,18,.74) calc(100% - 240px),
    rgba(4,6,18,.9) calc(100% - 180px),rgba(4,6,18,.98) calc(100% - 125px),#04060f calc(100% - 78px))}
}

/* ===== more liquid glass: process captions, hero reel indicator, phone menu, floating pill ===== */
/* a small caption on each process picture: the artwork bends through it */
.scene .pcap.glass{position:absolute;left:9%;bottom:10%;z-index:2;margin:0;display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 11px;border-radius:999px;color:#fff;font-size:14px;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.35);pointer-events:none}
.pcap span{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.2)}
/* the reel indicator over the film */
.reel.glass{position:absolute;padding:9px 16px 9px 18px;border-radius:999px;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.3)}
/* phones: nav = logo + menu button; the glass sheet opens under it */
.nav-end{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 50%,rgba(255,255,255,.2))}
.menu-btn i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu.glass{position:fixed;left:16px;right:16px;top:var(--menu-top,84px);z-index:49;display:none;flex-direction:column;padding:10px;border-radius:30px;color:#fff;
  background:linear-gradient(135deg,rgba(10,14,30,.8),rgba(10,14,30,.64) 50%,rgba(10,14,30,.76));
  opacity:0;visibility:hidden;translate:0 -10px;transition:opacity .3s,translate .45s cubic-bezier(.34,1.56,.64,1),visibility 0s .3s}
.menu.glass.open{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.menu a{padding:16px 20px;border-radius:20px;font-size:22px;font-weight:700;letter-spacing:-.02em;transition:background .2s}
.menu a:active{background:rgba(255,255,255,.14)}
/* floating "Book a call" pill (phones, after the hero) */
.fab.glass{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:max(18px,env(safe-area-inset-bottom));z-index:48;display:none;font-size:15px;padding:14px 26px;
  opacity:0;visibility:hidden;translate:0 18px;transition:opacity .35s,translate .5s cubic-bezier(.34,1.56,.64,1),visibility 0s .35s,transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s}
.fab.glass.show{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
@media (max-width:720px){
  .menu-btn{display:flex}
  .menu.glass{display:flex}
  .fab.glass{display:inline-flex}
  .nav-end .btn{display:none}   /* the hero has its own button, and the pill below takes over after it */
}

/* closing section on phones: keep the rocket in frame (it sits right of centre in the picture) */
@media (max-width:720px){.cta-galaxy{background-position:68% 58% !important}}

/* ===== weak devices (perf.js adds html.lite, or html.minimal on the weakest) =====
   lite: no backdrop blur / refraction (the costly part of the glass), no big soft shadows, no looping background motion.
   Glass elements become plain translucent panels so the design still holds together. */
html.lite .glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lite .nav.glass{background:rgba(10,14,30,.82);box-shadow:0 4px 14px rgba(0,0,0,.25)}
html.lite .nav.glass.on-light{background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(20,30,60,.12)}
html.lite .btn-glass,html.lite .btn-ghost.glass,html.lite .menu-btn{background:rgba(255,255,255,.2);box-shadow:0 3px 10px rgba(0,0,0,.22)}
html.lite .nav.glass.on-light .btn.btn-glass,html.lite .nav.glass.on-light .menu-btn,html.lite .fab.glass.on-light,html.lite .sound.glass.on-light{background:#fff;box-shadow:0 3px 10px rgba(40,52,100,.2)}
html.lite .reel.glass,html.lite .scene .pcap.glass{background:rgba(10,14,30,.6);box-shadow:none}
html.lite .menu.glass{background:rgba(10,14,30,.96);box-shadow:0 8px 24px rgba(0,0,0,.35)}
html.lite .fab.glass{box-shadow:0 4px 14px rgba(0,0,0,.3)}
html.lite .glass::before{display:none}
html.lite .cursor-blob{display:none!important}
html.lite .cta-galaxy{animation:none}
html.lite .dot{animation:none}
html.lite .hero-video{transition-duration:.5s}               /* matches FADE in hero-video.js */
html.lite .hero-inner h1,html.lite .hero-inner .lead{text-shadow:0 1px 10px rgba(2,3,10,.6)}
html.lite .logo-track{-webkit-mask:none;mask:none}
html.lite .hero-glow canvas{transition:none}
/* minimal: also no entrance animations */
html.minimal .reveal{opacity:1;transform:none;transition:none}
html.minimal .hero-video{display:none}

/* video players that load on tap (lite devices): a light poster instead of 12 players at once */
.facade{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0b0b12 center/cover no-repeat}
.facade i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#6b5cff;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s}
.facade:hover i{transform:scale(1.08)}

/* ===== background music button (music.js) ===== */
.sound.glass{position:fixed;left:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:48;width:46px;height:46px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 50%,rgba(255,255,255,.2))}
.sound[hidden]{display:none}
.sound svg{grid-area:1/1;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.sound .i-on{opacity:0;transform:scale(.6)}
.sound[aria-pressed="true"] .i-on{opacity:1;transform:none}
.sound[aria-pressed="true"] .i-off{opacity:0;transform:scale(.6)}
.sound.on-light{color:var(--ink)}
.sound:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sound svg{transition:none}}