/* Hunger Flow landing v4. Layout: copy left, devices right; open black canvas; red light that dissolves; real app screens as images. */
@font-face{font-family:Manrope;src:url(assets/display.ttf);font-weight:800;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/body.ttf);font-weight:600;font-display:swap}
:root{--black:#050406;--red:#ff174c;--red-deep:#b0002b;--ring-red:#ff5267;--ring-purple:#c59aff;--ring-yellow:#ffe477;--panel:#0e0a0d;--panel-2:#171016;--glass:#ffffff0d;--edge:#ffffff1c;--ease:cubic-bezier(.2,.8,.2,1);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:#fff;font:600 17px/1.6 Manrope,system-ui,Arial,sans-serif;overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:8px}
h1,h2,h3,p,ul,ol{margin:0}h1,h2,h3{font-weight:800;line-height:1.04;letter-spacing:-.05em;text-wrap:balance}
img{display:block;max-width:100%;height:auto}
em{font-style:normal;color:var(--red)}
.skip{position:fixed;left:16px;top:-100px;background:#fff;color:#000;z-index:100;padding:12px;border-radius:8px}.skip:focus{top:10px}
.c-red{color:var(--ring-red)}.c-purple{color:var(--ring-purple)}.c-yellow{color:var(--ring-yellow)}
.eyebrow{color:#ff6b8e;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:20px}
.center{text-align:center}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:36px;height:76px;padding:0 max(20px,calc((100vw - 1240px)/2));background:linear-gradient(#050406f2,#050406b8 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand img{width:108px;height:54px;object-fit:contain}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:800}
.nav a:hover,.link:hover,.foot a:hover{color:#ff7a99}
.top-actions{display:flex;align-items:center;gap:20px}
.link{font-size:15px;font-weight:800}
.burger{display:none;background:var(--glass);border:0;border-radius:50%;width:46px;height:46px;place-items:center}
.burger svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:58px;padding:16px 30px;border:0;border-radius:100px;background:linear-gradient(145deg,#ff668a,#ff174c 50%,#dc0031);font-size:16px;font-weight:800;box-shadow:0 10px 34px #ff174c40,inset 0 1px 1px #ffb3c7;transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 44px #ff174c66,inset 0 1px 1px #ffb3c7}
.btn.small{min-height:44px;padding:10px 22px;font-size:14px}
.btn.ghost{background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px #ffffff55}

/* light */
.light{position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(30px)}
.light-hero{width:1100px;height:900px;left:10%;top:-420px;background:radial-gradient(ellipse,#e0003f66 0,#7a062b26 40%,transparent 68%);transform:rotate(-18deg);animation:breathe 9s ease-in-out infinite}
.light-screens{width:1100px;height:700px;left:50%;top:260px;margin-left:-550px;background:radial-gradient(ellipse,#d0003a4d 0,#7a062b1f 42%,transparent 68%)}
.light-day1{width:1000px;height:760px;left:50%;top:-240px;margin-left:-500px;background:radial-gradient(ellipse,#e0003f5c 0,#7a062b24 40%,transparent 68%);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{opacity:.72;transform:scale(1.06) rotate(-18deg)}}

/* phone and laptop frames */
.ph{display:block;position:relative;border-radius:13.5% / 6.3%;padding:2.6%;background:linear-gradient(140deg,#c9c3b9,#3a3632 22%,#7a736a 60%,#262322);box-shadow:0 40px 90px #000d,inset 0 0 0 1px #9a948b}
.ph img,.ph .stack{display:block;width:100%;aspect-ratio:440/956;border-radius:11.5% / 5.3%;background:#050406;object-fit:cover}
.ph:after{content:'';position:absolute;top:3.4%;left:50%;width:27%;height:3.2%;margin-left:-13.5%;border-radius:20px;background:#000}
.laptop{display:block;border-radius:16px;overflow:hidden;background:#0a080a;box-shadow:0 50px 110px #000e,0 0 0 1px #ffffff22}
.laptop img,.laptop .stack{display:block;width:100%;aspect-ratio:1600/1000;object-fit:cover}
.bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;background:#221d22;font-size:12px;font-weight:800}
.bar i{width:9px;height:9px;border-radius:50%;background:#ffffff38}.bar b{margin-left:14px;padding:3px 14px;border-radius:8px;background:#ffffff12}
.stack{position:relative;overflow:hidden}
.stack img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;opacity:0;transform:scale(1.03);transition:opacity .6s,transform .9s var(--ease)}
.stack img.on{opacity:1;transform:none}

/* hero */
.hero{position:relative;max-width:1280px;margin:auto;padding:50px 20px 90px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(50px,6.2vw,92px);letter-spacing:-.06em}
.lead{max-width:470px;margin-top:26px;font-size:18px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}.cta.center{justify-content:center}
.platforms{list-style:none;padding:0;display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;font-size:14px;font-weight:800}
.platforms li{padding:8px 14px;border-radius:100px;background:var(--glass)}
.stage{display:block;position:relative;padding:0 0 9% 13%;isolation:isolate;animation:rise 1.1s var(--ease) backwards}
.stage:before{content:'';position:absolute;inset:-12% -6% 0;z-index:-1;background:radial-gradient(ellipse,#d6003552,transparent 66%)}
.stage .laptop{transform:perspective(1400px) rotateY(-7deg) rotateX(2deg) translateY(var(--py,0));transform-origin:right center}
.ph-hero{position:absolute;left:0;bottom:0;width:31%;transform:translateY(var(--py,0));animation:rise 1.1s .15s var(--ease) backwards}
@keyframes rise{from{transform:translateY(60px);opacity:0}}

/* strip */
.strip{padding:20px 0 60px;position:relative}
.belt{overflow:hidden;padding:7px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.belt-track{display:flex;gap:14px;width:max-content;animation:belt 46s linear infinite}
.belt.reverse .belt-track{animation-direction:reverse;animation-duration:54s}
.belt:hover .belt-track{animation-play-state:paused}
@keyframes belt{to{transform:translateX(calc(-50% - 7px))}}
.pill{flex:none;display:flex;align-items:center;gap:14px;padding:12px 26px 12px 12px;border-radius:100px;background:linear-gradient(120deg,#ffffff12,#ffffff06);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 #ffffff26}
.pill img,.glyph{width:52px;height:52px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 30%,#3a0d1c,#12070b);object-fit:contain;padding:8px}
.pill b{display:block;font-size:17px;line-height:1.25;letter-spacing:-.02em}
.pill small{display:block;font-size:14px;font-weight:800;line-height:1.3;white-space:nowrap}
.glyph{position:relative;padding:0}
.glyph:before,.glyph:after{content:'';position:absolute}
.g-ring:before{inset:13px;border-radius:50%;border:5px solid var(--ring-red);border-left-color:#ffffff22}
.g-ring:after{inset:21px;border-radius:50%;background:var(--ring-purple)}
.g-flow:before{inset:15px;border-radius:50%;background:var(--red);box-shadow:0 0 18px var(--red)}
.g-bars:before{left:14px;right:14px;bottom:15px;height:22px;background:linear-gradient(90deg,var(--ring-red) 0 5px,transparent 5px 9px,var(--ring-red) 9px 14px,transparent 14px 18px,var(--ring-red) 18px 24px);-webkit-mask:linear-gradient(#000,#000) 0 100%/5px 12px no-repeat,linear-gradient(#000,#000) 9px 100%/5px 22px no-repeat,linear-gradient(#000,#000) 18px 100%/6px 17px no-repeat;mask:linear-gradient(#000,#000) 0 100%/5px 12px no-repeat,linear-gradient(#000,#000) 9px 100%/5px 22px no-repeat,linear-gradient(#000,#000) 18px 100%/6px 17px no-repeat}
.g-quote:before{left:14px;right:14px;top:18px;height:4px;border-radius:4px;background:#fff;box-shadow:0 8px 0 #fff,0 16px 0 -0.5px var(--ring-yellow)}
.g-chat:before{inset:14px 12px 18px;border-radius:12px 12px 12px 3px;background:var(--red)}
.g-screen:before{inset:15px 11px 19px;border-radius:5px;border:3px solid #fff}
.g-screen:after{right:9px;bottom:12px;width:13px;height:22px;border-radius:4px;background:var(--red);box-shadow:0 0 0 3px #12070b}

/* sections */
.sec{position:relative;max-width:1240px;margin:auto;padding:120px 20px}
.head{max-width:680px;margin-bottom:64px}
.head.center{margin-left:auto;margin-right:auto}
.head h2{font-size:clamp(40px,5.2vw,72px)}
.head>p:not(.eyebrow){margin-top:22px;font-size:18px;max-width:540px}
.head.center>p:not(.eyebrow){margin-left:auto;margin-right:auto}

/* method board */
.board{display:grid;grid-template-columns:330px 1fr;gap:26px 70px;align-items:center;padding:54px;border-radius:36px;background:radial-gradient(ellipse at 12% 40%,#b0002b40,transparent 62%),var(--panel);box-shadow:inset 0 0 0 1px #ffffff12}
.dial{position:relative;width:280px;height:280px;display:grid;place-items:center;text-align:center;justify-self:center}
.dial-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,#ff174c 0,transparent 62%);opacity:calc(var(--s,0)*.5);filter:blur(26px);transition:opacity .6s}
.board.full .dial-glow{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12);opacity:.62}}
.dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dt{fill:none;stroke:#ffffff14;stroke-width:9}
.df{fill:none;stroke:var(--red);stroke-width:9;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;filter:drop-shadow(0 0 9px #ff174c);transition:stroke-dashoffset .9s var(--ease)}
.dial-num{position:relative;display:flex;align-items:flex-start;font-weight:800;letter-spacing:-.06em}
.dial-num strong{font-size:92px;line-height:1;font-variant-numeric:tabular-nums}.dial-num span{font-size:34px;margin-top:8px}
.dial>p{position:absolute;bottom:64px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.moves{list-style:none;padding:0;display:grid;gap:14px}
.moves li{display:grid;grid-template-columns:84px 1fr 36px;gap:22px;align-items:center;padding:24px 26px;border-radius:24px;background:#ffffff08;transform:translateX(26px);transition:transform .7s var(--ease),background .5s,box-shadow .5s}
.moves li.on{transform:none;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1c}
.moves b{font-size:56px;line-height:1;letter-spacing:-.06em;font-weight:800}.moves b:after{content:'%';font-size:22px;margin-left:2px}
.moves h3{font-size:25px;letter-spacing:-.03em}.moves p{font-size:16px;margin-top:6px}
.tick{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff40;position:relative;transition:background .3s,box-shadow .3s,transform .5s var(--ease)}
.on .tick{background:var(--red);box-shadow:0 0 20px #ff174c99;transform:scale(1.08)}
.on .tick:after{content:'';position:absolute;left:13px;top:8px;width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.board-foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;font-size:17px;font-weight:800}
.board-foot span{width:64px;height:3px;border-radius:3px;background:var(--red);box-shadow:0 0 12px var(--red)}

/* scenes */
.scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;padding:40px 0 110px}
.scene.flip .scene-copy{order:2}
.scene-copy h3{font-size:clamp(38px,4.2vw,60px);margin-bottom:22px}
.scene-copy>p:not(.eyebrow){font-size:18px;max-width:480px}
.checks{list-style:none;padding:0;margin-top:30px;display:grid;gap:14px}
.checks li{position:relative;padding-left:40px;font-size:17px;line-height:1.45}
.checks li:before{content:'';position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--red);box-shadow:0 0 14px #ff174c66}
.checks li:after{content:'';position:absolute;left:9px;top:6px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.scene-visual{display:block;position:relative;height:680px;isolation:isolate}
.orbit{position:absolute;left:50%;top:50%;width:min(600px,112%);aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--g,.8));border-radius:50%;z-index:-1;background:radial-gradient(circle,#ff174c4d 0,#9b002838 36%,transparent 67%);transition:transform 1.2s var(--ease)}
.orbit:before,.orbit:after{content:'';position:absolute;inset:11%;border-radius:50%;box-shadow:0 0 0 1.5px #ff174c7a,inset 0 0 50px #ff174c33;animation:spin 26s linear infinite;border-top:2px solid #ff5a80}
.orbit:after{inset:25%;box-shadow:0 0 0 1.5px #ff174c4d;animation-duration:38s;animation-direction:reverse;border-top-color:transparent;border-left:2px solid #ff5a8099}
@keyframes spin{to{transform:rotate(360deg)}}
.ph-front{position:absolute;left:50%;top:50%;width:300px;margin:-326px 0 0 -120px;transform:translateY(var(--py,0));z-index:2}
.ph-back{position:absolute;left:50%;top:50%;width:250px;margin:-250px 0 0 -260px;transform:translateY(var(--py,0));filter:blur(3px) brightness(.5);z-index:1}
.in .ph-front{animation:slidein 1s var(--ease)}.in .ph-back{animation:slidein 1.2s var(--ease)}
@keyframes slidein{from{transform:translateY(90px) scale(.94)}}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;border-radius:22px;background:#1b1218eb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 22px 50px #000b,inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff26;animation:float 5.5s ease-in-out infinite}
.chip b{display:block;font-size:15px;line-height:1.3}.chip small{display:block;font-size:13px;font-weight:800;line-height:1.3}
.chip img{width:42px;height:42px;object-fit:contain}
.chip-a{left:calc(50% - 300px);top:90px}
.chip-b{right:calc(50% - 300px);bottom:110px;animation-delay:-2.7s}
@keyframes float{50%{transform:translateY(-12px)}}
.chip-check,.chip-ring,.chip-timer,.chip-hold{width:40px;height:40px;flex:none;border-radius:13px;position:relative;display:grid;place-items:center;font-size:12px;font-weight:800}
.chip-check{background:var(--red)}
.chip-check:after{content:'';width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-2px,-2px)}
.chip-ring{border-radius:50%;background:conic-gradient(var(--red) 75%,#ffffff22 0);-webkit-mask:radial-gradient(circle,transparent 52%,#000 54%);mask:radial-gradient(circle,transparent 52%,#000 54%)}
.chip-timer{border-radius:50%;box-shadow:inset 0 0 0 3px var(--ring-purple)}
.chip-hold{border-radius:50%;background:#ff174c33;overflow:hidden}
.chip-hold:after{content:'';position:absolute;inset:0;background:var(--red);transform-origin:left;animation:holdfill 4.5s ease-in-out infinite}
@keyframes holdfill{0%,20%{transform:scaleX(0)}55%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bento article{position:relative;overflow:hidden;border-radius:30px;background:linear-gradient(160deg,#171016,#0c090c);box-shadow:inset 0 0 0 1px #ffffff14,inset 0 1px 0 #ffffff1f;padding:26px;min-height:300px;display:flex;flex-direction:column;gap:18px;transition:transform .4s var(--ease),box-shadow .4s}
.bento article:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px #ff174c66,0 30px 70px #ff174c1f}
.b-hero{grid-column:span 2;grid-row:span 2;padding:0!important;justify-content:flex-end;min-height:620px!important}
.b-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.b-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#070406f5 82%)}
.b-hero .b-text{position:relative;z-index:1;padding:30px}
.b-hero h3{font-size:clamp(30px,3.2vw,44px)!important}
.b-wide{grid-column:span 2}
.b-text h3{font-size:22px;letter-spacing:-.03em;margin-bottom:8px}
.b-text p{font-size:16px;line-height:1.5}
.soon{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:5px 11px;border-radius:100px;background:#ffffff1a;margin-bottom:12px}
.viz{flex:1;display:grid;place-items:center;min-height:120px}
.viz.chat{display:flex;flex-direction:column;justify-content:center;gap:10px;place-items:initial}
.bubble{align-self:flex-start;max-width:84%;padding:12px 16px;border-radius:20px 20px 20px 6px;background:#ffffff14;font-size:15px;line-height:1.4}
.bubble.me{align-self:flex-end;border-radius:20px 20px 6px 20px;background:var(--red)}
.in .bubble{animation:pop .6s var(--ease) backwards}.in .bubble:nth-child(2){animation-delay:.5s}
@keyframes pop{from{transform:translateY(16px) scale(.9);opacity:0}}
.hold-rings{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#0c090c 0 20%,var(--ring-yellow) 21% 33%,#0c090c 34% 42%,var(--ring-purple) 43% 56%,#0c090c 57% 64%,var(--ring-red) 65% 78%,transparent 79%);filter:drop-shadow(0 0 16px #ff526766);animation:squash 3.2s ease-in-out infinite}
@keyframes squash{0%,30%,100%{transform:scale(1)}55%,72%{transform:scale(1.09,.88)}}
.scan{width:120px;height:120px;border-radius:26px;position:relative;background:radial-gradient(circle at 50% 55%,#3a0d1c,#12070b);box-shadow:inset 0 0 0 2px #ffffff30;overflow:hidden}
.scan:before{content:'';position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd9a0,#c97a2a 60%,#6e3a10)}
.scan span{position:absolute;left:10px;right:10px;height:3px;border-radius:3px;background:var(--red);box-shadow:0 0 16px 3px var(--red);animation:scanline 2.6s ease-in-out infinite}
@keyframes scanline{0%,100%{top:14px}50%{top:103px}}
.hold-btn{position:relative;overflow:hidden;width:100%;border-radius:100px;padding:17px 12px;text-align:center;background:#ff174c33;font-size:15px}
.hold-btn b{position:relative}
.hold-btn span{position:absolute;inset:0;background:linear-gradient(145deg,#ff174c,#b0002b);transform-origin:left;animation:holdfill 4.5s ease-in-out infinite}
.grid90{width:100%;max-width:190px;aspect-ratio:10/5;background:radial-gradient(circle,#ffffff24 0 40%,transparent 42%) 0 0/10% 20%;position:relative}
.grid90:after{content:'';position:absolute;inset:0;background:radial-gradient(circle,var(--red) 0 40%,transparent 42%) 0 0/10% 20%;-webkit-mask:linear-gradient(#000,#000) 0 0/100% 20% no-repeat,linear-gradient(#000,#000) 0 20%/40% 20% no-repeat;mask:linear-gradient(#000,#000) 0 0/100% 20% no-repeat,linear-gradient(#000,#000) 0 20%/40% 20% no-repeat;filter:drop-shadow(0 0 5px var(--red))}
.swipe{display:flex;gap:18px;width:100%;overflow:hidden;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.25}
.swipe p{flex:0 0 82%;animation:swipe 7s ease-in-out infinite}
@keyframes swipe{0%,35%{transform:translateX(0)}50%,85%{transform:translateX(calc(-100% - 18px))}100%{transform:translateX(0)}}
.mini-desk{width:150px;height:96px;border-radius:12px;box-shadow:inset 0 0 0 2px #ffffff38;padding:14px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-desk i{border-radius:6px;background:#ffffff1c}.mini-desk i:first-child{grid-row:span 2;border-radius:50%;aspect-ratio:1;align-self:center;background:conic-gradient(var(--red) 75%,#ffffff22 0);-webkit-mask:radial-gradient(circle,transparent 48%,#000 50%);mask:radial-gradient(circle,transparent 48%,#000 50%);animation:spin 6s linear infinite}

/* screens showcase */
#screens{padding-bottom:150px}
.tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:-24px auto 44px;padding:6px;border-radius:100px;background:#ffffff0f;width:max-content;max-width:100%;box-shadow:inset 0 0 0 1px #ffffff14}
.tabs button{position:relative;border:0;background:transparent;border-radius:100px;padding:12px 22px;font-weight:800;font-size:15px;overflow:hidden}
.tabs button[aria-selected=true]{background:#fff;color:#0b0709}
.tabs i{position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:3px;background:var(--red);transform:scaleX(0);transform-origin:left}
.tabs button[aria-selected=true] i{animation:prog 5.5s linear forwards}
.tabs.paused button[aria-selected=true] i{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}
.show{display:block;position:relative;max-width:1040px;margin:auto;padding:0 7% 7% 0}
.ph-show{position:absolute;right:0;bottom:0;width:23%;z-index:2}
.floor{display:block;max-width:900px;height:70px;margin:-20px auto 0;background:radial-gradient(ellipse at 50% 0,#ff174c59,transparent 68%);filter:blur(14px)}

/* how it works story */
.story{display:grid;grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr);gap:70px;align-items:start}
.story-phone{position:sticky;top:14vh;height:72vh;min-height:560px;display:grid;place-items:center;isolation:isolate}
.story-phone .ph{width:min(280px,34vh)}
.story-line{align-self:stretch;background:#ffffff1c;border-radius:3px;position:relative}
.story-line span{position:absolute;inset:0;border-radius:3px;background:linear-gradient(var(--ring-purple),var(--red));box-shadow:0 0 14px var(--red);transform-origin:top;transform:scaleY(var(--line,0))}
.story-steps{list-style:none;padding:0}
.story-steps li{min-height:72vh;display:flex;flex-direction:column;justify-content:center;transition:transform .7s var(--ease);transform:translateX(20px)}
.story-steps li.on{transform:none}
.num{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:20px;font-weight:800;box-shadow:inset 0 0 0 2px #ffffff40;margin-bottom:24px;transition:background .5s,box-shadow .5s}
.on .num{background:var(--red);box-shadow:0 0 30px #ff174c8c}
.story-steps h3{font-size:clamp(34px,4vw,54px);margin-bottom:16px}
.story-steps p{font-size:18px;max-width:440px}
.ph-inline{display:none}

/* coach */
.coach{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);border-radius:36px;overflow:hidden;background:radial-gradient(ellipse at 100% 0,#b0002b47,transparent 60%),var(--panel);box-shadow:inset 0 0 0 1px #ffffff14}
.coach-photo{min-height:460px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#ffffff0a 0 14px,#ffffff03 14px 28px),#120a0f;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.coach-body{padding:54px}
.coach-body h3{font-size:clamp(28px,3vw,40px)}
.coach-body .btn{margin-top:26px}

/* pricing */
.toggle{display:flex;gap:6px;padding:6px;border-radius:100px;background:#ffffff0f;width:max-content;margin:-24px auto 44px;box-shadow:inset 0 0 0 1px #ffffff14}
.toggle button{border:0;background:transparent;border-radius:100px;padding:12px 24px;font-weight:800;font-size:15px}
.toggle button[aria-pressed=true]{background:#fff;color:#0b0709}
.toggle em{margin-left:6px}.toggle button[aria-pressed=true] em{color:#d4002f}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:36px 30px;border-radius:32px;background:linear-gradient(160deg,#ffffff12,#ffffff05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 1px 0 #ffffff2e;transition:transform .4s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.best{background:radial-gradient(ellipse at 50% 0,#ff174c66,transparent 62%),linear-gradient(160deg,#241018,#12090d);box-shadow:inset 0 0 0 1.5px #ff174c99,0 40px 100px #ff174c2e}
.plan-name{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.badge{font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:100px;background:var(--red)}
.price{display:flex;align-items:baseline;gap:6px;margin:22px 0 6px}
.price strong{font-size:56px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.price span{font-size:17px;font-weight:800}
.plan-note{font-size:15px;min-height:24px}
.plan .checks{margin:26px 0 30px;gap:12px}.plan .checks li{font-size:16px}
.plan .btn{margin-top:auto;width:100%}
.fine,.notify{text-align:center;margin-top:28px;font-size:15px}.fine.left{text-align:left;margin-top:22px}

/* faq */
.sec.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:70px;align-items:start}
.faq .head{position:sticky;top:110px;margin-bottom:0}
.faq-list details{border-radius:24px;background:linear-gradient(160deg,#171016,#0c090c);box-shadow:inset 0 0 0 1px #ffffff14;padding:6px 26px;margin-bottom:12px;transition:box-shadow .3s}
.faq-list details[open]{box-shadow:inset 0 0 0 1px #ff174c80}
.faq-list summary{cursor:pointer;list-style:none;position:relative;padding:16px 44px 16px 0;font-size:19px;font-weight:800;line-height:1.4}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:before,.faq-list summary:after{content:'';position:absolute;right:4px;top:50%;width:18px;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--red);transition:transform .3s var(--ease)}
.faq-list summary:after{transform:rotate(90deg)}
.faq-list details[open] summary:after{transform:rotate(0)}
.faq-list details p{font-size:16px;line-height:1.7;padding-bottom:18px;max-width:600px}

/* day 1 and footer */
.day1{position:relative;text-align:center;padding:150px 20px 170px;overflow:clip}
.day1 h2{font-size:clamp(52px,8vw,112px);letter-spacing:-.06em;margin-bottom:24px}
.day1>p:not(.eyebrow){font-size:19px}
.foot{max-width:1240px;margin:auto;padding:70px 20px 50px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;font-size:15px;box-shadow:0 -1px 0 #ffffff14}
.foot img{width:130px;height:60px;object-fit:contain;object-position:left}
.foot-brand p{margin-top:12px}
.foot nav{display:flex;flex-direction:column;gap:12px}
.foot nav b{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.copy{grid-column:1/-1;margin-top:20px;font-size:14px}

/* reveal keeps content visible at rest: transform only */
.js [data-reveal]{transition:transform 1s var(--ease)}
.js [data-reveal]:not(.in){transform:translateY(46px) scale(.985)}
.js .plan[data-reveal]:nth-child(2){transition-delay:.1s}.js .plan[data-reveal]:nth-child(3){transition-delay:.2s}

@media(max-width:1000px){
.nav{display:none}.burger{display:grid}.link{display:none}.top-actions{margin-left:auto;gap:12px}
.top.open .nav{display:flex;position:absolute;top:76px;left:16px;right:16px;flex-direction:column;gap:0;padding:14px;border-radius:24px;background:#1c0a12;box-shadow:0 30px 70px #000d,inset 0 0 0 1px #ffffff1a}
.top.open .nav a{padding:13px 14px;font-size:17px}
.hero{grid-template-columns:1fr;padding-top:30px;gap:50px}
.stage{max-width:640px;margin:auto;width:100%}
.sec{padding:90px 20px}
.board{grid-template-columns:1fr;padding:34px 22px}
.scene,.scene.flip{grid-template-columns:1fr;gap:20px;padding:30px 0 80px}
.scene.flip .scene-copy{order:0}
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.story{grid-template-columns:3px minmax(0,1fr);gap:28px}
.story-phone{display:none}
.story-steps li{min-height:0;padding:10px 0 70px;transform:none}
.ph-inline{display:block;width:230px;margin-top:34px}
.coach{grid-template-columns:1fr}.coach-photo{min-height:260px}.coach-body{padding:34px 24px}
.plans{grid-template-columns:1fr;max-width:480px;margin:auto}
.sec.faq{grid-template-columns:1fr;gap:34px}.faq .head{position:static}
.foot{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
}
@media(max-width:640px){
body{font-size:16px}
.top{height:68px}.top.open .nav{top:68px}.brand img{width:96px}
.hero h1{font-size:clamp(46px,13vw,64px)}
.lead{font-size:17px}
.cta .btn{flex:1 1 100%}
.sec{padding:76px 16px}
.head{margin-bottom:42px}.head>p:not(.eyebrow){font-size:16px}
.pill{padding:10px 20px 10px 10px;gap:12px}.pill img,.glyph{width:44px;height:44px}.pill b{font-size:16px}
.g-ring:before{inset:10px}.g-ring:after{inset:17px}.g-flow:before{inset:12px}.g-bars:before{left:11px;bottom:12px}.g-quote:before{left:11px;right:11px;top:14px}.g-chat:before{inset:11px 9px 15px}.g-screen:before{inset:12px 8px 16px}.g-screen:after{right:6px;bottom:9px}
.board{border-radius:28px;padding:30px 14px}
.dial{width:230px;height:230px}.dial-num strong{font-size:74px}.dial>p{bottom:50px}
.moves li{grid-template-columns:62px 1fr 30px;gap:12px;padding:18px 14px;transform:translateX(14px)}
.moves b{font-size:42px}.moves b:after{font-size:17px}.moves h3{font-size:20px}.moves p{font-size:15px}
.tick{width:30px;height:30px}.on .tick:after{left:10px;top:6px}
.scene-visual{height:600px}
.ph-front{width:264px;margin:-287px 0 0 -110px}
.ph-back{width:214px;margin:-220px 0 0 -190px}
.chip{padding:10px 16px 10px 10px}
.chip-a{left:0;top:26px}.chip-b{right:0;bottom:34px}
.bento{grid-template-columns:1fr 1fr;gap:12px}
.bento article{padding:20px;min-height:250px;border-radius:24px}
.b-hero,.b-wide{grid-column:span 2}.b-hero{min-height:520px!important}
.b-text h3{font-size:19px}.b-text p{font-size:15px}
.tabs button{padding:11px 15px;font-size:14px}
.show{padding:0 0 22% 0}.ph-show{width:30%;right:4%}
#screens{padding-bottom:110px}
.story-steps h3{font-size:32px}
.price strong{font-size:48px}
.faq-list summary{font-size:17px}
.day1{padding:110px 16px 120px}
.foot{padding:50px 16px 40px;gap:30px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.js [data-reveal]:not(.in){transform:none}
.moves li,.story-steps li{transform:none}
}