/* Cinema: the two set-pieces injected into the main page.
#scenes — a dark, full-bleed sticky sequence: one screen stays, the story scrolls past it.
#rail — a poster row you drag through, the way a streaming service shows its catalogue.
Both are self-contained; nothing above them is restyled. */
/* ── the dark act ───────────────────────────────────────────────────────── */
/* Backgrounds do the cinematography here: a deep base, two slow light sources moving
through it, a fine grain so the gradients never band, and a vignette on top. Cheap in
pixels, and it is what makes a flat green page feel like a room with lights in it. */
.cinema{position:relative;background:#050d09;color:#eaf5ee;overflow:clip;
padding:0;margin:0;border-block:1px solid rgba(255,255,255,.08)}
/* blur 46px, not 70: the blur radius is the cost here, and at this opacity the difference is
invisible while the compositing work is roughly halved. */
.reel .lights{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(46px)}
.reel .lights span{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.reel .lights .l1{width:56vw;height:56vw;left:-12vw;top:-14vw;background:rgba(52,209,122,.22);
animation:lightDrift1 34s ease-in-out infinite}
.reel .lights .l2{width:44vw;height:44vw;right:-10vw;top:32%;background:rgba(18,161,80,.18);
animation:lightDrift2 46s ease-in-out infinite}
.reel .lights .l3{width:38vw;height:38vw;left:26%;bottom:-16vw;background:rgba(245,166,35,.10);
animation:lightDrift3 56s ease-in-out infinite}
@keyframes lightDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.16)}}
@keyframes lightDrift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vw,-6vh,0) scale(1.1)}}
@keyframes lightDrift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,-8vh,0) scale(1.2)}}
/* Film grain — a static SVG noise tile, so it costs one small data URI and no requests. */
.reel .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px}
/* A faint horizon line where the dark act begins and ends, like a letterbox edge. */
.cinema::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
background:linear-gradient(90deg,transparent,rgba(92,228,155,.5),transparent)}
/* Anchored to the REEL, not the section: on a section four screens tall this gradient slid
past the sticky picture, so every beat looked like it added another layer of shadow. */
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(120% 70% at 50% 0%,transparent 45%,rgba(0,0,0,.45) 100%)}
.cinema .wrap{position:relative;z-index:3}
.cinema-intro{padding:88px 0 26px;text-align:center}
.cinema-intro .eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:2.4px;
text-transform:uppercase;color:#5ce49b;margin-bottom:14px}
.cinema-intro h2{font-size:clamp(30px,5vw,58px);line-height:1.04;letter-spacing:-1.6px;
font-weight:850;margin:0;color:#fff}
.cinema-intro p{max-width:58ch;margin:16px auto 0;color:#9db3a6;font-size:17px}
/* THE REEL — the room fills the screen and the story walks over it. A person at 1400px reads
as a person; the same face in a card reads as an icon, which is the whole difference between
a feature list and something you feel. */
.reel{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:#050d09}
.reel .frame{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;will-change:opacity}
.reel .frame.on{opacity:1}
.reel .frame img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center;transform:scale(1.04);filter:saturate(.95);will-change:opacity}
/* The slow push-in was removed: a 7s transform on a full-screen 2.5MB plate, restarted on every
frame swap, is what made the scroll stutter. The reel crossfades; it does not also zoom. */
.reel .frame img.screen{position:absolute;right:5vw;bottom:16vh;width:min(46vw,760px);
border-radius:12px;z-index:3;opacity:0;transform:translateY(28px) scale(.98);
transition:opacity .9s cubic-bezier(.16,.84,.44,1) .15s,transform 1.1s cubic-bezier(.16,.84,.44,1) .15s;
box-shadow:0 60px 120px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.16),
0 0 140px -30px rgba(52,209,122,.5);filter:saturate(1.05) brightness(1.05)}
.reel .frame.on img.screen{opacity:1;transform:none}
/* Legible text over any photograph: dark from the left and from the bottom, nowhere else. */
.reel .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(90deg,rgba(5,13,9,.92),rgba(5,13,9,.55) 42%,rgba(5,13,9,.1) 70%),
linear-gradient(0deg,rgba(5,13,9,.9),transparent 45%)}
.reel .vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
box-shadow:inset 0 0 220px 60px rgba(0,0,0,.6)}
@media(max-width:900px){
.reel .frame img.screen{right:auto;left:5vw;bottom:10vh;width:82vw}
.reel .scrim{background:linear-gradient(0deg,rgba(5,13,9,.94),rgba(5,13,9,.35) 55%,rgba(5,13,9,.5))}
}
.stage .plate{position:absolute;inset:0;opacity:0;transform:scale(1.04);
transition:opacity .85s cubic-bezier(.16,.84,.44,1),transform 1.2s cubic-bezier(.16,.84,.44,1)}
.stage .plate.on{opacity:1;transform:none}
.stage .plate img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* A person in the frame, when a photo is supplied — the screen sits over it. */
.stage .plate.has-person img.person{position:absolute;inset:0;object-position:center;filter:saturate(.92) contrast(1.02)}
/* The photo is the room; the screen sits in the quiet left side of it, so the person stays
visible on the right. The prompts are written to leave exactly that space. */
/* Order matters: the room is darkened UNDER the screen, never over it. With the veil on top
the product looked switched off — which is the one thing this section must not do. */
.stage .plate.has-person img.person{z-index:0}
.stage .plate.has-person::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background:linear-gradient(90deg,rgba(5,13,9,.62),rgba(5,13,9,.15) 58%,transparent 78%),
radial-gradient(85% 65% at 28% 42%,transparent,rgba(5,13,9,.45))}
.stage .plate.has-person img.screen{position:absolute;left:5%;top:15%;width:58%;height:auto;z-index:2;
border-radius:9px;object-fit:contain;filter:saturate(1.04) brightness(1.06);
box-shadow:0 40px 80px -18px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.16),
0 0 90px -20px rgba(52,209,122,.45)}
.stage .glow{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 50% at 50% -10%,rgba(52,209,122,.22),transparent 70%)}
.stage .time{position:absolute;left:16px;bottom:14px;z-index:4;font-size:12px;font-weight:800;
letter-spacing:1.4px;text-transform:uppercase;color:#eaf5ee;opacity:.9;
padding:5px 11px;border-radius:100px;background:rgba(5,13,9,.6);border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(8px)}
/* The beats scroll OVER the reel: each is a screen tall, the words sit low-left where the
scrim is darkest. Pulled up by one viewport so the first beat lands on the first frame. */
.beats{position:relative;z-index:4;margin-top:-100vh}
.beat{min-height:100vh;display:flex;align-items:flex-end;padding:0 0 16vh}
/* opacity 0, not .12: a ghost of the next paragraph sliding up behind the live one is exactly
the "smeared" feeling — two texts on screen at once, neither readable. */
.beat > .inner{width:min(560px,86vw);margin-left:max(6vw,calc((100vw - 1180px)/2));
opacity:0;transform:translateY(16px);will-change:opacity,transform;
transition:opacity .45s cubic-bezier(.16,.84,.44,1),transform .45s cubic-bezier(.16,.84,.44,1)}
/* In the goals reel the words share the screen with the ring, so they keep to their own column
and sit centred rather than at the bottom edge. */
#goals .beat{align-items:center;padding-bottom:0}
#goals .beat > .inner{width:min(40vw,520px)}
@media(max-width:900px){#goals .beat > .inner{width:min(560px,86vw)}}
.beat.on > .inner{opacity:1;transform:none}
@media(max-width:900px){
.beats{margin-top:-100vh}
.beat{padding-bottom:8vh}
.beat > .inner{margin-left:6vw;opacity:1;transform:none}
}
.beat .when{display:block;font-size:12.5px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
color:#5ce49b;margin-bottom:12px}
.beat h3{font-size:clamp(30px,4.4vw,54px);line-height:1.04;letter-spacing:-1.6px;font-weight:850;margin:0;
color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.beat p{margin:16px 0 0;color:rgba(234,245,238,.85);font-size:17px;max-width:42ch;
text-shadow:0 1px 20px rgba(0,0,0,.6)}
.beat .who{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:#7d9488}
.beat .who i{width:28px;height:28px;border-radius:50%;background:rgba(52,209,122,.16);
border:1px solid rgba(52,209,122,.3);display:grid;place-items:center;font-style:normal;
font-weight:800;color:#5ce49b;font-size:12px}
/* ── the goals reel ─────────────────────────────────────────────────────────
Same grammar as the week, one level up: the room changes per GOAL and the ring of tools
stays, turning slowly around whatever that goal is. The point of the section is that the
circle never changes — only its centre does. */
#goals .reel .frame img.bg{object-position:center 42%}
/* Directional, not radial. A radial scrim centred at 50% 50% put its darkest ring of shadow
straight over the circle — the tools looked like they were behind glass. The words are on the
left, so the darkness belongs on the left; the right half stays clear for the ring. */
#goals .reel .scrim{background:
linear-gradient(90deg,rgba(5,13,9,.93),rgba(5,13,9,.72) 34%,rgba(5,13,9,.34) 56%,rgba(5,13,9,.22) 78%,rgba(5,13,9,.4)),
linear-gradient(0deg,rgba(5,13,9,.82),transparent 46%)}
/* The corner vignette is enough on this section; the inner shadow closed in on the ring. */
#goals .reel .vignette{box-shadow:inset 0 0 180px 30px rgba(0,0,0,.45)}
/* The ring owns the RIGHT half of the stage, the words own the left. Centred on the whole
viewport it sat straight under the text — with labels on every satellite the two were
printing over each other, which is unreadable at any font size. */
/* The right inset is not decoration: a satellite label is wider than its icon, so without it
"Booking & appointments" ran off the edge of the screen. */
.ring-stage{position:absolute;inset:0 5vw 0 46%;z-index:4;display:grid;place-items:center;pointer-events:none}
@media(max-width:1100px){.ring-stage{inset:0 4vw 0 38%}}
/* --r is the orbit radius. Percentages cannot be used for it: a percentage in translateY
resolves against the SATELLITE's own height, not the circle, which is what put every icon
in a heap in the middle. */
/* Sized against the half it lives in, so the labels stay inside the frame. */
.ring-holder{position:relative;width:min(55vh,450px);aspect-ratio:1;--r:min(27.5vh,225px);
animation:ringSpin 120s linear infinite}
.ring-holder .orbit{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(92,228,155,.34)}
.ring-holder .orbit.inner{inset:24%;border-style:solid;border-color:rgba(92,228,155,.16)}
/* Placement lives on the satellite; the counter-rotation that keeps the icon upright lives on
the span INSIDE it — an animation on the same element would overwrite the placement. */
.ring-sat{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)))}
.ring-sat span{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;
background:rgba(5,13,9,.82);border:1px solid rgba(92,228,155,.38);
box-shadow:0 14px 34px -10px rgba(0,0,0,.85),0 0 30px -12px rgba(52,209,122,.5);
animation:ringSpin 120s linear infinite reverse}
.ring-sat svg{width:23px;height:23px;fill:none;stroke:#5ce49b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* A tool that matters for THIS goal steps forward and says what it is; the rest recede so the
circle still reads as one set rather than a menu. */
.ring-sat{transition:opacity .6s}
.ring-sat:not(.hot){opacity:.34}
.ring-sat.hot span{background:rgba(5,13,9,.8);border-color:rgba(92,228,155,.85);
box-shadow:0 16px 40px -10px rgba(0,0,0,.9),0 0 44px -8px rgba(52,209,122,.85)}
.ring-sat.hot svg{stroke:#7dffb9}
.sat-label{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
display:none;text-align:center;white-space:nowrap;font-style:normal;pointer-events:none}
.ring-sat.hot .sat-label{display:block}
.sat-label b{display:block;font-size:14.5px;font-weight:820;letter-spacing:-.2px;color:#fff;
text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.8)}
.sat-label i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:1.1px;
text-transform:uppercase;color:#5ce49b;text-shadow:0 1px 10px rgba(0,0,0,.9)}
@media(max-width:760px){
.sat-label b{font-size:12px}
.sat-label i{font-size:9px;letter-spacing:.8px}
}
@keyframes ringSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* The goal itself sits dead centre and does not turn. A soft disc behind it so the name is
readable over whatever is in the photograph. */
.goal-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
text-align:center;width:min(46vh,380px);min-height:min(30vh,240px)}
/* Just enough to carry the words. At 400px this disc reached out under the satellites, so the
icons sat on a dark blob instead of on the photograph. */
.goal-centre::before{content:"";position:absolute;left:50%;top:50%;width:min(30vh,250px);aspect-ratio:1;
transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle,rgba(5,13,9,.78) 22%,rgba(5,13,9,.42) 55%,transparent 72%)}
/* Only the active goal is in the middle; the others are stacked underneath it, invisible. */
.goal-centre-item{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
width:min(46vh,380px);opacity:0;transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
.goal-centre-item.on{opacity:1;transform:translate(-50%,-50%)}
.goal-centre .eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:2.4px;
text-transform:uppercase;color:#5ce49b;margin-bottom:10px}
.goal-centre h3{margin:0;font-size:clamp(22px,3vw,36px);line-height:1.06;letter-spacing:-1.2px;
font-weight:850;color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.85)}
.goal-centre p{margin:12px 0 0;font-size:14.5px;color:rgba(234,245,238,.82);text-shadow:0 1px 18px rgba(0,0,0,.8)}
/* Under ~1100px the ring and the words can no longer share a row — measured: at 1024 the
satellites printed straight over the paragraph. Below that they stack: ring in the upper
half, words underneath. The ring also has to shrink, because a LABEL is far wider than the
icon it belongs to and neighbours start colliding long before the icons do. */
@media(max-width:1100px){
/* The ring steps aside. Stacking it above the words does not work: the text TRAVELS the full
height as its beat scrolls (measured at 800px: text 260-486 crossing a ring at 51-453), and
it cannot be pinned out of the way either, because .cinema has overflow:clip and therefore
owns any sticky inside it. So on narrow screens the circle goes and the same five tools are
said as chips under the text — the content survives, the collision cannot happen. */
.ring-stage{display:none}
#goals .beat{align-items:flex-end;padding-bottom:9vh}
#goals .beat > .inner{width:min(560px,86vw)}
.goal-chips{display:flex}
}
/* The narrow-screen stand-in for the ring: the goal's tools, in the goal's own words. */
.goal-chips{display:none;flex-wrap:wrap;gap:7px;margin-top:18px}
.goal-chips span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;
background:rgba(5,13,9,.6);border:1px solid rgba(92,228,155,.4);backdrop-filter:blur(8px);
font-size:12.5px;font-weight:750;color:#eaf5ee}
.goal-chips span i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.8px;
text-transform:uppercase;color:#5ce49b}
/* ── the poster rail ────────────────────────────────────────────────────── */
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.rail-head h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.7px;font-weight:830;margin:0}
.rail-head a{font-size:13.5px;font-weight:700;color:var(--accent-text,#0f8f4c)}
.rail-wrap{position:relative}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;
scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.poster{position:relative;flex:0 0 268px;height:352px;border-radius:16px;overflow:hidden;
scroll-snap-align:start;background:#0b1610;border:1px solid var(--glass-line-2,rgba(16,48,32,.14));
box-shadow:var(--shadow-sm,0 16px 40px -20px rgba(15,50,33,.28));
transition:transform .35s cubic-bezier(.16,.84,.44,1),box-shadow .35s,border-color .35s}
.poster:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 40px 70px -24px rgba(0,0,0,.55);
border-color:var(--accent-line,rgba(18,161,80,.34));z-index:2}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;
transition:transform .7s cubic-bezier(.16,.84,.44,1);opacity:.92}
.poster:hover img{transform:scale(1.07)}
.poster .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,13,9,.05) 22%,rgba(5,13,9,.72) 62%,rgba(5,13,9,.95) 100%)}
.poster .txt{position:absolute;left:0;right:0;bottom:0;padding:18px 17px}
.poster .kicker{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
color:#5ce49b;margin-bottom:6px}
.poster h3{margin:0;font-size:19px;line-height:1.2;font-weight:830;color:#fff;letter-spacing:-.4px}
.poster p{margin:7px 0 0;font-size:13px;line-height:1.45;color:rgba(234,245,238,.78);
max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease}
.poster:hover p{max-height:80px;opacity:1}
.poster .no-shot{position:absolute;inset:0;background:
radial-gradient(90% 70% at 30% 10%,rgba(52,209,122,.28),transparent 60%),
linear-gradient(160deg,#0e2018,#050d09)}
.poster .ic-big{position:absolute;top:18px;left:17px;width:42px;height:42px;border-radius:13px;
display:grid;place-items:center;background:rgba(52,209,122,.14);border:1px solid rgba(52,209,122,.3)}
.poster .ic-big svg{width:21px;height:21px;fill:none;stroke:#5ce49b;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.rail-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;z-index:5;border:1px solid var(--glass-line-2,rgba(16,48,32,.14));
background:var(--glass-2,rgba(255,255,255,.78));backdrop-filter:blur(10px);
box-shadow:var(--shadow-sm,0 16px 40px -20px rgba(15,50,33,.28));transition:transform .2s,opacity .2s}
.rail-nav:hover{transform:translateY(-50%) scale(1.08)}
.rail-nav[hidden]{display:none}
.rail-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rail-nav.prev{left:-14px}
.rail-nav.next{right:-14px}
@media(max-width:760px){.rail-nav{display:none}.poster{flex-basis:220px;height:300px}}
/* ── a photograph behind the hero ───────────────────────────────────────── */
header.has-photo{position:relative;isolation:isolate;overflow:clip}
header.has-photo .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:60% 35%;z-index:-2;animation:heroPush 24s ease-out both}
@keyframes heroPush{from{transform:scale(1.14)}to{transform:scale(1)}}
/* Readability first: the photograph is a room, not a background image to fight the type. */
header.has-photo .hero-photo__scrim{position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,var(--bg) 6%,rgba(238,243,239,.82) 38%,rgba(238,243,239,.42) 62%,rgba(238,243,239,.55)),
linear-gradient(0deg,var(--bg),transparent 42%)}
:root[data-theme="dark"] header.has-photo .hero-photo__scrim{
background:linear-gradient(90deg,var(--bg) 6%,rgba(7,17,12,.86) 38%,rgba(7,17,12,.5) 62%,rgba(7,17,12,.6)),
linear-gradient(0deg,var(--bg),transparent 42%)}
header.has-photo .hero-grid{position:relative;z-index:1}
/* ── full-bleed photographic bands ──────────────────────────────────────── */
.bleed{position:relative;min-height:64vh;display:grid;align-items:center;overflow:clip;isolation:isolate;
padding:70px 0;color:#fff}
.bleed--tall{min-height:80vh}
.bleed-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;
transform:scale(1.14);will-change:transform}
.bleed-scrim{position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(5,13,9,.9),rgba(5,13,9,.55) 45%,rgba(5,13,9,.25)),
linear-gradient(0deg,rgba(5,13,9,.85),transparent 55%)}
.bleed-scrim--center{background:radial-gradient(90% 80% at 50% 50%,rgba(5,13,9,.55),rgba(5,13,9,.88))}
.bleed-body .big{font-size:clamp(26px,4.2vw,50px);line-height:1.12;letter-spacing:-1.4px;font-weight:850;
max-width:20ch;margin:0;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.bleed-body .attrib{display:block;margin-top:18px;font-size:13.5px;font-weight:700;letter-spacing:1.4px;
text-transform:uppercase;color:#5ce49b}
/* The immersive section carries more than a line, so it gets a readable measure and its own
three-column stand instead of the centred single sentence the other bleeds use. */
.bleed--split .bleed-body{max-width:none}
.bleed--split .eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:2.6px;
text-transform:uppercase;color:#5ce49b;margin-bottom:14px}
.bleed--split h2{font-size:clamp(28px,4.4vw,54px);line-height:1.05;letter-spacing:-1.6px;font-weight:850;
margin:0;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.imm-lead{max-width:56ch;margin:18px 0 0;font-size:17px;color:rgba(234,245,238,.88);
text-shadow:0 1px 22px rgba(0,0,0,.7)}
.imm-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0 28px;
max-width:1000px}
.imm-point{padding:17px 18px;border-radius:15px;background:rgba(5,13,9,.55);
border:1px solid rgba(92,228,155,.28);backdrop-filter:blur(9px)}
.imm-point h3{margin:0 0 7px;font-size:15.5px;font-weight:820;color:#fff;letter-spacing:-.2px}
.imm-point p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(234,245,238,.8)}
/* Three scales, numbered like chapters rather than bulleted like a spec sheet. */
.grow-scales{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:30px;max-width:1060px}
.grow-scale{position:relative;padding:22px 20px 20px;border-radius:16px;
background:rgba(5,13,9,.55);border:1px solid rgba(92,228,155,.26)}
.grow-scale .n{position:absolute;top:-14px;left:20px;width:30px;height:30px;border-radius:50%;
display:grid;place-items:center;font-size:13px;font-weight:850;color:#04140a;
background:linear-gradient(140deg,#34d17a,#12a150);box-shadow:0 10px 24px -8px rgba(18,161,80,.9)}
.grow-scale .k{display:block;margin-top:6px;font-size:10.5px;font-weight:800;letter-spacing:1.6px;
text-transform:uppercase;color:#5ce49b}
.grow-scale h3{margin:6px 0 8px;font-size:19px;font-weight:830;color:#fff;letter-spacing:-.3px}
.grow-scale p{margin:0;font-size:14px;line-height:1.55;color:rgba(234,245,238,.82)}
/* ── the product tour ───────────────────────────────────────────────────────
One browser window, the real screens moving through it. Cross-fade with a small drift, so a
screen ARRIVES rather than blinking into place. */
.tour{display:grid;gap:16px}
.tour-window{border-radius:18px;overflow:hidden;border:1px solid var(--glass-line-2,rgba(16,48,32,.14));
box-shadow:var(--shadow,0 30px 70px -26px rgba(15,50,33,.35));background:var(--surface-2,#fff)}
.tour-window .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
background:var(--glass-2,rgba(255,255,255,.78));border-bottom:1px solid var(--glass-line,rgba(255,255,255,.85))}
.tour-window .bar i{width:9px;height:9px;border-radius:50%;background:var(--track-bg,rgba(16,48,32,.09));display:block}
.tour-window .bar .u{margin-left:8px;font-size:11.5px;color:var(--muted-2,#8aa294)}
.tour-window .live-dot{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;
font-weight:750;color:var(--accent-text,#0f8f4c)}
.tour-window .live-dot span{width:7px;height:7px;border-radius:50%;background:var(--accent,#34d17a);
box-shadow:0 0 0 0 rgba(52,209,122,.7);animation:tourPulse 2.4s ease-out infinite}
@keyframes tourPulse{0%{box-shadow:0 0 0 0 rgba(52,209,122,.6)}70%{box-shadow:0 0 0 9px rgba(52,209,122,0)}100%{box-shadow:0 0 0 0 rgba(52,209,122,0)}}
.tour-stage{position:relative;aspect-ratio:16/10;background:var(--surface-2,#fff)}
.tour-slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.02) translateY(8px);
transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .9s cubic-bezier(.16,.84,.44,1)}
.tour-slide.on{opacity:1;transform:none}
.tour-slide img{width:100%;height:100%;object-fit:contain;object-position:top center;display:block}
.tour-tabs{display:flex;flex-wrap:wrap;gap:8px}
.tour-tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;
cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;overflow:hidden;
background:var(--glass,rgba(255,255,255,.55));color:var(--muted,#5b7365);
border:1px solid var(--glass-line-2,rgba(16,48,32,.14));transition:color .2s,border-color .2s}
.tour-tab:hover{color:var(--text,#0d1a12)}
.tour-tab.on{color:var(--text,#0d1a12);border-color:var(--accent-line,rgba(18,161,80,.34))}
.tour-tab .ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
background:var(--accent-soft,rgba(52,209,122,.14));border:1px solid var(--accent-line,rgba(18,161,80,.34))}
.tour-tab .ic svg{width:13px;height:13px;fill:none;stroke:var(--accent-text,#0f8f4c);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* The bar fills while this screen is on show — the page saying how long it will stay. */
.tour-tab .bar{position:absolute;left:0;bottom:0;height:2px;width:0;
background:linear-gradient(90deg,var(--accent-2,#12a150),var(--accent,#34d17a))}
.tour-tab.on .bar{animation:tourFill 5s linear forwards}
@keyframes tourFill{from{width:0}to{width:100%}}
.tour-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.tour-hint{font-size:13px;color:var(--muted-2,#8aa294)}
@media (prefers-reduced-motion:reduce){
.tour-slide{transition:none}
.tour-tab.on .bar{animation:none;width:100%}
.tour-window .live-dot span{animation:none}
}
/* ── title cards ────────────────────────────────────────────────────────────
A held black frame with one line on it, between acts. It costs a screen of scrolling and
buys the thing a feature list can never have: a pause before the next idea. */
.titlecard{position:relative;min-height:78vh;display:grid;place-items:center;text-align:center;
background:#050d09;color:#fff;overflow:clip;padding:60px 0}
.titlecard::before{content:"";position:absolute;inset:0;
background:radial-gradient(70% 60% at 50% 50%,rgba(52,209,122,.14),transparent 70%)}
.titlecard .wrap{position:relative;z-index:2}
.titlecard .rule{width:44px;height:2px;margin:0 auto 22px;border-radius:2px;
background:linear-gradient(90deg,#12a150,#34d17a)}
.titlecard h2{margin:0;font-size:clamp(28px,5.2vw,62px);line-height:1.05;letter-spacing:-2px;font-weight:850;
max-width:20ch;margin-inline:auto}
.titlecard p{margin:20px auto 0;max-width:52ch;font-size:17px;color:#9db3a6}
.titlecard .big-num{display:block;font-size:clamp(60px,12vw,150px);line-height:.92;font-weight:850;
letter-spacing:-4px;background:linear-gradient(120deg,#12a150,#34d17a 55%,#5ce49b);
-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.bleed-body--center{text-align:center}
.bleed-body--center h2{font-size:clamp(27px,4.4vw,52px);line-height:1.08;letter-spacing:-1.5px;font-weight:850;
margin:0;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.bleed-body--center p{margin:16px 0 26px;font-size:17px;color:rgba(234,245,238,.9)}
.bleed-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 32px;border-radius:100px;
background:linear-gradient(140deg,var(--accent,#34d17a),var(--accent-2,#12a150));color:#04140a;
font-weight:850;font-size:16px;box-shadow:0 20px 44px -12px rgba(18,161,80,.8);transition:transform .2s}
.bleed-btn:hover{transform:translateY(-2px)}
/* ── the light act ──────────────────────────────────────────────────────────
The rest of the page keeps its glass look, but the bands underneath it get the same
treatment at a whisper: a soft top light, a grain, and a hairline between sections so
the page reads as scenes rather than as a stack of boxes. */
body{background-attachment:fixed}
section{position:relative}
section + section::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--glass-line-2,rgba(16,48,32,.14)),transparent)}
#stack,#cocentric,#product,#compare{isolation:isolate}
#stack::after,#cocentric::after,#product::after,#compare::after{content:"";position:absolute;inset:0;
z-index:-1;pointer-events:none;
background:radial-gradient(75% 45% at 50% 0%,var(--accent-soft,rgba(52,209,122,.14)),transparent 70%)}
/* One grain for the whole light half — fixed, so it does not swim while scrolling. */
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;display:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px;mix-blend-mode:multiply}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.05}
@media (prefers-reduced-motion:reduce){
.stage .plate{transition:none}
.beat{opacity:1}
.poster,.poster img,.poster p{transition:none}
.reel .lights span{animation:none}
}
/* Every other satellite carries its label a little further out, so two lit neighbours cannot
print over each other. */
.ring-sat--far .sat-label{top:calc(100% + 26px)}
.ring-sat--far .sat-label::before{content:"";position:absolute;left:50%;top:-22px;width:1px;height:18px;
background:linear-gradient(180deg,transparent,rgba(92,228,155,.5))}