/* Home page: immersive, futuristic layer. Everything here is decoration on top of readable content;
   prefers-reduced-motion switches the motion off (see the end of this file and js/home.js). */
body.home{--accent2:#8fb4ff}
:root[data-mode="light"] body.home{--accent2:#3b5bd6}
body.home main,body.home .topbar{position:relative;z-index:2}
body.home .topbar{position:sticky;top:0;z-index:20;max-width:none;margin:0;padding:14px max(16px,calc((100% - 1100px)/2));backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);background:color-mix(in srgb,var(--ink) 86%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
body.home .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:.55;transform-origin:center;animation:pulse-line 5s ease-in-out infinite}
@keyframes pulse-line{50%{opacity:.15;transform:scaleX(.6)}}

/* Hero */
.hero2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center;min-height:calc(100svh - 70px);padding-top:4vh;padding-bottom:6vh;max-width:1160px}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 12px;border-radius:99px;background:var(--card-on)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero2 h1{font-size:clamp(38px,7.4vw,84px);line-height:.98;margin:18px 0 16px}
@keyframes sheen{to{background-position:-200% 0}}
.hero2 .lede{font-size:clamp(16px,2vw,19px);max-width:52ch}
.cta{margin-top:26px}
.btn.glow{position:relative;box-shadow:0 0 0 1px color-mix(in srgb,var(--signal) 60%,transparent),0 10px 40px -8px var(--glow)}
.btn.glow::before{content:"";position:absolute;inset:-2px;border-radius:18px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--signal),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:2px;animation:spin 3.2s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.pills{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:26px 0 0;padding:0}
.pills li{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:7px 12px;background:var(--card-on)}
.pills b{color:var(--fg);font-family:var(--mono);font-size:15px}

/* Stage: tilting phone + orbiting chips */
.stage{position:relative;display:grid;place-items:center;height:min(76vw,560px);perspective:1100px}
.orbit{position:absolute;border:1px dashed color-mix(in srgb,var(--signal) 40%,transparent);border-radius:50%;animation:rot 30s linear infinite}
.orbit.o1{width:min(92%,470px);aspect-ratio:1}
.orbit.o2{width:min(72%,370px);aspect-ratio:1;animation-duration:22s;animation-direction:reverse}
.orbit.o3{width:min(112%,560px);aspect-ratio:1;animation-duration:44s;opacity:.6}
.sat{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:99px;background:var(--ink);border:1px solid var(--signal);color:var(--fg);box-shadow:0 0 18px -2px var(--glow);animation:counter 30s linear infinite}
.o2 .sat{animation:counter-r 22s linear infinite}.o3 .sat{animation:counter 44s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes counter{to{transform:translateX(-50%) rotate(-360deg)}}
@keyframes counter-r{to{transform:translateX(-50%) rotate(360deg)}}
.phone{position:relative;width:min(58%,280px);aspect-ratio:9/17;border-radius:34px;padding:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--raise) 85%,#fff),var(--deep));border:1px solid var(--line);box-shadow:0 40px 90px -20px rgba(0,0,0,.55),0 0 60px -10px var(--glow),inset 0 0 0 1px rgba(255,255,255,.06);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out;animation:bob 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes bob{50%{translate:0 -10px}}
.phone-in{height:100%;border-radius:26px;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--plum) 55%,var(--ink)),var(--ink));padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.p-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.live{font:700 10px var(--mono);letter-spacing:.14em;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:ping 1.4s infinite}
.p-name{font:700 14px var(--display);text-align:center}
.qrwrap{position:relative;width:78%;aspect-ratio:1;border-radius:14px;background:#fff;padding:7px;overflow:hidden;box-shadow:0 0 30px -6px var(--glow)}
.qrwrap canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.beam{position:absolute;left:0;right:0;height:34%;top:-34%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ok) 55%,transparent),transparent);border-bottom:2px solid var(--ok);animation:scan 3.4s ease-in-out infinite}
@keyframes scan{0%{top:-34%}60%,100%{top:100%}}
.p-code{font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.p-status{margin-top:auto;width:100%;text-align:center;font:700 13px var(--display);padding:10px;border-radius:14px;background:var(--card-on);border:1px solid var(--line);transition:background .3s,color .3s,border-color .3s}
.p-status.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.glare{position:absolute;inset:0;border-radius:34px;pointer-events:none;background:radial-gradient(60% 40% at var(--gx,30%) var(--gy,10%),rgba(255,255,255,.18),transparent 70%)}

/* Ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(8px);margin:10px 0 0;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-in{display:flex;gap:46px;width:max-content;padding:14px 0;animation:marquee 38s linear infinite;font:700 13px var(--mono);letter-spacing:.3em;color:var(--muted)}
.ticker-in span:nth-child(3n+1){color:var(--signal)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections, reveal, spotlight */
.sec{padding-top:clamp(54px,9vw,110px)}
.big{font-size:clamp(26px,4.6vw,46px);line-height:1.05;margin-top:8px}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.in .card,.js .rv.in .steps li{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.js .rv.in .card:nth-child(2),.js .rv.in .steps li:nth-child(2){animation-delay:.1s}
.js .rv.in .card:nth-child(3),.js .rv.in .steps li:nth-child(3){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.spot{position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 60%)}
.spot:hover::before{opacity:1}
.spot:hover{border-color:var(--signal)}
.prod{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;padding:22px}
.prod:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px var(--glow)}
.prod h3{font-size:22px}
.more{margin-top:auto;padding-top:12px;font-weight:700;color:var(--signal)}
.viz{margin-top:10px;min-height:74px;display:grid;align-content:center;gap:8px}
/* offices: working hours bar with a moving "now" marker */
.hours .bar{position:relative;height:14px;border-radius:99px;background:var(--card-on);border:1px solid var(--line);overflow:hidden}
.hours .win{position:absolute;left:25%;width:50%;top:0;bottom:0;background:linear-gradient(90deg,var(--signal),var(--accent2));border-radius:99px;opacity:.8}
.hours .now{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ok);box-shadow:0 0 10px var(--ok);left:0;animation:now 9s linear infinite}
@keyframes now{to{left:100%}}
.hours .ticks{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--muted)}
/* events: capacity meter */
.meter{height:14px;border-radius:99px;background:var(--card-on);border:1px solid var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:6%;background:linear-gradient(90deg,var(--signal),var(--accent2));border-radius:99px;animation:fill 6s ease-in-out infinite}
@keyframes fill{0%{width:6%}55%,85%{width:96%}100%{width:6%}}
.cap-l{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.cap-l b{color:var(--fg)}.cap-l em{font-style:normal}
/* payments: amount and paid tick */
.pay{grid-auto-flow:column;justify-content:space-between;align-items:center}
.pay .amt{font:800 30px var(--display)}
.paid{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ok);padding:7px 12px;border-radius:99px;background:var(--ok-soft);animation:blink 4s ease-in-out infinite}
.paid i{width:14px;height:14px;border-radius:50%;background:var(--ok);display:inline-block;clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,84% 8%,38% 70%)}
@keyframes blink{0%,45%{opacity:.25;transform:scale(.94)}60%,100%{opacity:1;transform:none}}

/* How it works */
.steps{list-style:none;margin:30px 0 0;padding:0 0 0 28px;position:relative;display:grid;gap:26px;max-width:760px}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line)}
.steps::after{background:linear-gradient(var(--signal),var(--accent2));height:var(--p,0%);bottom:auto;box-shadow:0 0 14px var(--signal);transition:height .15s}
.steps li{display:flex;gap:18px;align-items:flex-start;position:relative;opacity:.45;transition:opacity .4s}
.steps li.on{opacity:1}
.steps li::before{content:"";position:absolute;left:-33px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--line);transition:.3s}
.steps li.on::before{border-color:var(--signal);background:var(--signal);box-shadow:0 0 14px var(--signal)}
.steps .n{font:700 34px var(--mono);color:var(--signal);line-height:1}
.steps h3{font-size:20px;margin-bottom:4px}

/* Simulated gate */
.gatebox{border:1px solid var(--line);border-radius:26px;padding:clamp(18px,3vw,30px);background:var(--card);backdrop-filter:blur(10px)}
.gate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gate-grid{display:grid;grid-template-columns:200px 1fr;gap:22px;margin-top:20px;align-items:start}
.counts{display:grid;gap:12px}
.counts div{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card-on)}
.counts b{display:block;font:800 40px var(--display);font-variant-numeric:tabular-nums}
.counts div:first-child b{color:var(--ok)}.counts div:last-child b{color:var(--bad)}
.counts span{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-height:268px;align-content:start}
.feed li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card-on);animation:slidein .45s cubic-bezier(.2,.7,.2,1)}
.feed li small{display:block;color:var(--muted);font:11px var(--mono)}
.feed li.no{border-color:var(--bad);background:var(--bad-soft)}
@keyframes slidein{from{opacity:0;transform:translateX(-24px) scale(.97)}}

@media(max-width:860px){
  .hero2{grid-template-columns:1fr;min-height:0}
  .stage{height:min(76vw,330px);order:-1;margin-top:-6px}
  .hero2{padding-top:0;gap:6px}
  .phone{width:min(50%,190px)}
  .hero2 h1{font-size:clamp(34px,10.4vw,52px);margin:12px 0 10px}
  .hero2 .lede{font-size:15px}
  .pills{display:none}
  .hero-copy{padding-top:30px}
  .gate-grid{grid-template-columns:1fr}
  .counts{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .orbit,.sat,.phone,.beam,.ticker-in,.btn.glow::before,.topbar::after,.hours .now,.meter i,.paid,.tag .dot,.live i{animation:none!important}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .rv.in .card,.js .rv.in .steps li{animation:none}
  .steps li{opacity:1}
  .ticker-in{flex-wrap:wrap;width:auto;justify-content:center}
}

/* ===== More immersive layer ===== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--signal),var(--accent2),var(--ok));box-shadow:0 0 14px var(--signal)}
.cursor-light{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s;background:radial-gradient(closest-side,color-mix(in srgb,var(--signal) 26%,transparent),transparent);mix-blend-mode:screen;will-change:transform}
.cursor-light.on{opacity:1}
:root[data-mode="light"] .cursor-light{mix-blend-mode:multiply;background:radial-gradient(closest-side,color-mix(in srgb,var(--signal) 18%,transparent),transparent)}
body.home .fx-aurora{filter:hue-rotate(var(--hue,0deg));transition:filter 1.2s}

/* cinematic entrance: the hero builds itself in, one piece at a time */
.js .hero-copy>*{animation:introin .95s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*.09s + .15s)}
.js .hero-copy>*:nth-child(1){--i:0}.js .hero-copy>*:nth-child(2){--i:1}.js .hero-copy>*:nth-child(3){--i:3}.js .hero-copy>*:nth-child(4){--i:4}.js .hero-copy>*:nth-child(5){--i:5}
.js .stage{animation:stagein 1.4s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes introin{from{opacity:0;transform:translateY(34px);filter:blur(10px)}}
@keyframes stagein{from{opacity:0;transform:scale(.72) rotateX(18deg);filter:blur(8px)}}

/* floating glass fragments at different depths around the phone */
.frag{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;font:600 12px var(--mono);letter-spacing:.04em;padding:10px 14px;border-radius:14px;color:var(--muted);background:color-mix(in srgb,var(--raise) 55%,transparent);border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6),0 0 24px -8px var(--glow);transform:translate3d(var(--tx,0px),var(--ty,0px),0);will-change:transform;white-space:nowrap}
.frag b{color:var(--fg);font-family:var(--display)}
.frag em{font-style:normal;color:var(--ok)}
.ok-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.f1{left:-2%;top:16%;animation:fbob 6s ease-in-out infinite}
.f2{right:-4%;top:30%;animation:fbob 7.5s ease-in-out -2s infinite}
.f3{left:2%;bottom:20%;animation:fbob 8s ease-in-out -4s infinite}
.f4{right:2%;bottom:12%;animation:fbob 6.5s ease-in-out -1s infinite}
@keyframes fbob{50%{translate:0 -12px}}

/* huge outlined type that slides sideways as you scroll */
.bigtext{overflow:hidden;margin-top:clamp(40px,8vw,90px);pointer-events:none;user-select:none}
.bigtext span{display:block;white-space:nowrap;font:800 clamp(64px,13vw,190px)/1 var(--display);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--signal) 55%,transparent);transform:translateX(var(--bx,0px));will-change:transform;opacity:.7}

/* pinned story: the phone stays, the world changes around it */
.story{margin-top:clamp(10px,3vw,40px)}
.story-track{height:340vh;position:relative}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;overflow:hidden}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,70px);align-items:center;width:100%;max-width:1100px}
.story-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.story-steps li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:18px;border:1px solid transparent;opacity:.62;transform:scale(.97);transform-origin:left;transition:opacity .5s,transform .5s,border-color .5s,background .5s}
.story-steps li.on{opacity:1;transform:none;border-color:var(--line);background:color-mix(in srgb,var(--card) 80%,transparent);box-shadow:0 0 40px -16px var(--glow)}
.story-steps h3{font-size:20px;margin-bottom:4px}
.clock{font:700 15px var(--mono);color:var(--signal);padding-top:3px;min-width:54px}
.story-prog{margin-top:18px;height:3px;border-radius:9px;background:var(--line);overflow:hidden;max-width:340px}
.story-prog i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--signal),var(--ok))}
.story-stage{position:relative;display:grid;place-items:center;perspective:1200px;min-height:min(70vh,560px)}
.story-phone{position:relative;width:min(70%,300px);aspect-ratio:9/17;border-radius:36px;padding:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--raise) 85%,#fff),var(--deep));border:1px solid var(--line);box-shadow:0 50px 100px -30px rgba(0,0,0,.65),0 0 80px -10px var(--glow);transform:rotateY(var(--sry,-10deg)) rotateX(var(--srx,4deg)) scale(var(--ss,1));transition:transform .2s linear;z-index:2}
.sp-in{position:relative;height:100%;border-radius:28px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--plum) 55%,var(--ink)),var(--ink))}
.screen{position:absolute;inset:0;padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(24px) scale(.96);filter:blur(6px);transition:opacity .55s,transform .55s,filter .55s}
.screen.on{opacity:1;transform:none;filter:none}
.sp-eyebrow{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.sp-ok{margin-top:auto;width:100%;text-align:center;font:700 13px var(--display);padding:11px;border-radius:14px;background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
.sp-hours{display:flex;justify-content:space-between;width:100%;font:12px var(--mono);color:var(--muted)}.sp-hours b{color:var(--fg)}
.sp-code{font-size:11px;letter-spacing:.08em;color:var(--muted)}
#storyQr{width:70%;aspect-ratio:1;border-radius:14px;background:#fff;padding:7px;image-rendering:pixelated;box-shadow:0 0 30px -6px var(--glow)}
.sp-amt{font:800 40px var(--display);margin-top:6px}
/* the door swings open when the screen is shown */
.door{position:relative;width:62%;aspect-ratio:3/4;display:flex;border-radius:14px 14px 0 0;overflow:hidden;background:linear-gradient(180deg,var(--ink),var(--deep));perspective:600px;margin-top:6px;box-shadow:0 0 0 2px var(--signal)}
.door .glow{position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 100%,color-mix(in srgb,var(--ok) 70%,#fff),transparent 70%);opacity:.9}
.door .leaf{position:relative;z-index:1;flex:1;background:linear-gradient(180deg,var(--deep),var(--raise));border:1px solid var(--line);transition:transform 1.1s cubic-bezier(.3,.8,.2,1) .35s}
.door .leaf.l{transform-origin:0 50%}.door .leaf.r{transform-origin:100% 50%}
.screen.s0:not(.on) .leaf.l{transform:none}.screen.s0.on .leaf.l{transform:rotateY(-78deg)}
.screen.s0.on .leaf.r{transform:rotateY(78deg)}
.tick{width:92px;height:92px;margin:8px 0}
.tick svg{width:100%;height:100%;fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke-dasharray:145;stroke-dashoffset:145}.tick path{stroke-dasharray:44;stroke-dashoffset:44}
.screen.s2.on .tick circle{animation:draw .8s ease .3s forwards}.screen.s2.on .tick path{animation:draw .5s ease 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.story-ring{position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--signal) 45%,transparent);animation:rot 28s linear infinite;pointer-events:none}
.story-ring.r1{width:min(96%,480px);aspect-ratio:1}.story-ring.r2{width:min(74%,380px);aspect-ratio:1;animation-direction:reverse;animation-duration:40s}

/* products: tilt toward the pointer */
.prod{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .15s ease-out,border-color .25s,box-shadow .25s}
.prod:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}

@media(max-width:860px){
  .story-grid{grid-template-columns:1fr;gap:10px}
  .story-pin{align-items:start;padding-top:70px}
  .story-stage{order:-1;min-height:300px}
  .story-phone{width:min(46%,200px)}
  .story-steps{gap:8px;margin-top:12px}.story-steps li{padding:10px 12px}.story-steps li:not(.on) p{display:none}
  .story-steps h3{font-size:17px}
  .frag.f1,.frag.f4{display:none}
}
@media(prefers-reduced-motion:reduce){
  .js .hero-copy>*,.js .stage,.frag,.story-ring,.screen.s2.on .tick circle,.screen.s2.on .tick path{animation:none!important}
  .tick circle,.tick path{stroke-dashoffset:0}
  .cursor-light,  .story-track{height:auto}.story-pin{position:static;height:auto;padding:30px 0}
  .story-steps li{opacity:1;transform:none}.screen{transition:none}
  .bigtext span{transform:none}
}

/* WebGL liquid background (js/liquid.js). The CSS aurora is only the fallback. */

/* ===== Intro: the logo, then tap to enter. The liquid background shows through the whole time. ===== */
.intro{display:none;position:fixed;inset:0;z-index:100;overflow:hidden}
html.intro-lock .intro,.intro.go{display:block}
html.intro-lock{overflow:hidden}
/* the page waits behind the intro: nothing of it shows, and its entrance animations start only when it opens */
html.intro-lock main,html.intro-lock .topbar,html.intro-lock .progress{opacity:0}
.topbar{transition:opacity .9s ease .2s}
html.intro-lock .hero-copy>*,html.intro-lock .stage{animation-play-state:paused!important}
/* a soft dark edge so the logo stays legible; it opens up like an iris when you tap */
.intro .veil{position:absolute;inset:0;background:radial-gradient(90% 75% at 50% 48%,transparent 30%,color-mix(in srgb,var(--ink) 62%,transparent) 100%);transition:transform 1.5s cubic-bezier(.6,0,.2,1) .15s,opacity 1.2s ease .3s}
.intro .spill{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#fff,color-mix(in srgb,var(--signal) 65%,transparent) 45%,transparent);opacity:0;pointer-events:none}
.intro-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:clamp(14px,3vh,28px);padding:24px;z-index:2;transition:opacity .9s ease .1s,transform 1.2s cubic-bezier(.5,0,.2,1),filter 1s ease}
.intro-logo{margin:0;width:min(88vw,900px);line-height:0;font-size:0;color:#fff;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--signal) 55%,transparent)) drop-shadow(0 6px 30px rgba(0,0,0,.35))}
.intro-logo .logo-big{width:100%;height:auto;display:block;overflow:visible}
.intro-logo .in{color:var(--signal)}
:root[data-mode="light"] .intro-logo{color:#2B1B2D;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--signal) 40%,transparent))}
:root[data-mode="light"] .intro-logo .in{color:var(--primary)}
.intro-tag{font:600 12px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:-6px}
.tapbtn{position:relative;margin-top:clamp(4px,2vh,18px);display:grid;justify-items:center;gap:20px;background:none;border:0;color:var(--fg);cursor:pointer;padding:10px 16px}
.tapbtn .tapdot{position:relative;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--signal) 55%,var(--primary));box-shadow:0 0 0 1px color-mix(in srgb,var(--signal) 60%,transparent),0 0 50px 6px var(--glow);transition:transform .2s}
.tapbtn:hover .tapdot{transform:scale(1.08)}
.tapbtn:active .tapdot{transform:scale(.94)}
.tapbtn .rings{position:absolute;left:50%;top:10px;width:84px;height:84px;margin-left:-42px;pointer-events:none}
.tapbtn .rings i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--signal);opacity:0;animation:tapring 2.8s ease-out infinite}
.tapbtn .rings i:nth-child(2){animation-delay:.9s}.tapbtn .rings i:nth-child(3){animation-delay:1.8s}
@keyframes tapring{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
/* "TAP TO ENTER" is drawn in the logo's own lettering */
.tapbtn .lbl{display:block;width:clamp(210px,34vw,300px);color:var(--fg);line-height:0}
.tapbtn .lbl .lw{width:100%;height:auto;display:block;overflow:visible}
.intro-skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:3;background:none;border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:8px 16px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.intro-skip:hover{color:var(--fg);border-color:var(--signal)}

/* opening: the logo flies through you, the edge opens like an iris, light spills, the page pushes in */
.intro.go .intro-center{opacity:0;transform:scale(2.4);filter:blur(14px);pointer-events:none}
.intro.go .intro-skip{opacity:0;pointer-events:none}
.intro.go .veil{transform:scale(2.6);opacity:0}
.intro.go .spill{animation:spill 1.4s ease-out .25s both}
@keyframes spill{0%{width:0;height:0;opacity:0}20%{opacity:.95}100%{width:230vmax;height:230vmax;opacity:0}}
.intro.out{opacity:0;transition:opacity .5s;pointer-events:none}
body.entered .hero2{animation:push 1.7s cubic-bezier(.2,.7,.2,1) both}
@keyframes push{from{transform:scale(1.12);filter:blur(7px)}}

/* film grain, very light, over the whole home page */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-size:160px 160px;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:50px -70px}60%{background-position:-80px -30px}80%{background-position:60px 60px}100%{background-position:0 0}}
:root[data-mode="light"] .grain{opacity:.1}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}.grain{animation:none}.tapbtn .rings i{animation:none}body.entered .hero2{animation:none}}

/* keyboard focus on the Tap button: a glow around the round button, not a rectangle */
.tapbtn:focus{outline:none}
.tapbtn:focus-visible .tapdot{box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 55%,transparent),0 0 60px 8px var(--glow);transform:scale(1.08)}
.intro-skip:focus-visible{outline:none;border-color:var(--signal);color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 40%,transparent)}


/* small phones: the floating chips and satellites crowd the mockup and fall off the edge */
@media(max-width:600px){.frag,.sat{display:none}}

/* ===== Organiser-first homepage ===== */
.hero2 h1 .hl{background:linear-gradient(100deg,var(--signal),var(--accent2) 45%,var(--signal));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.pains .card h3{margin-top:6px}
.pains .card .eyebrow{color:var(--bad,#e5484d);letter-spacing:.12em}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sp-cap{width:82%;margin:6px auto 0}
.screen.s0 .sp-amt{margin-top:18px}
.sitefoot{padding:32px 16px 60px;font-size:13px;display:grid;gap:14px}
.sitefoot nav{gap:18px}
.sitefoot nav a{color:var(--fg);font-weight:600;text-decoration:none}
.sitefoot nav a:hover{text-decoration:underline}
/* the organiser headline is two sentences: a smaller size keeps the buttons on the first screen */
@media(min-width:861px){.hero2 h1{font-size:clamp(40px,5vw,68px);line-height:1.02}}
.grid.three.pains{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.grid.three.pains{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid.three.pains{grid-template-columns:1fr}}