:root{--bk:#000;--wh:#f2efe9;--g:#86868b;--line:#1d1d1f}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bk);color:var(--wh);font-family:"Manrope",Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.w{width:min(1080px,calc(100% - 48px));margin:0 auto}
header{position:absolute;top:0;left:0;right:0;z-index:5}
header .w{display:flex;justify-content:space-between;align-items:center;height:64px;font-size:14px}
header b{font-weight:600;font-size:16px;letter-spacing:-.01em}
header nav{display:flex;gap:28px;color:#d2d2d7}
header nav a:hover,header nav a[aria-current]{color:#fff}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px 24px 72px}
.hero img{width:min(440px,78vw);height:auto;animation:in 1.6s ease-out both}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(36px,5vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.08;margin-top:8px}
.hero p{color:var(--g);font-size:clamp(18px,2vw,21px);margin-top:14px;max-width:36ch}
.links{display:flex;gap:28px;justify-content:center;margin-top:26px;font-size:17px;color:#F7A928;font-weight:600}
.links a{border-bottom:1px solid rgba(247,169,40,.35);padding-bottom:2px}.links a:hover{border-color:#F7A928}
.prod{padding:120px 0 0;text-align:center}
.prod .e{color:var(--g);font-size:17px;font-weight:500}
.prod h2{font-size:clamp(48px,8vw,96px);font-weight:600;letter-spacing:-.045em;line-height:1;margin:6px 0 16px}
.prod p{font-size:clamp(19px,2.2vw,24px);color:#d2d2d7;max-width:30ch;margin:0 auto;line-height:1.35}
.shot{display:block;margin:56px auto 0;width:min(1080px,calc(100% - 48px));border-radius:14px 14px 0 0;overflow:hidden;border:1px solid #2a2a2c;border-bottom:0}
.shot img{display:block;width:100%;height:auto}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:36px 0;text-align:center}
.facts div+div{border-left:1px solid var(--line)}
.facts b{display:block;font-size:28px;font-weight:600;letter-spacing:-.02em}
.facts span{color:var(--g);font-size:15px}
.txt{padding:140px 0;text-align:center}
.txt p{font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.2;max-width:24ch;margin:0 auto}
.txt p span{color:var(--g)}
.txt .links{margin-top:30px}
.ph{padding:150px 0 40px;text-align:center}
.ph h1{font-size:clamp(44px,7vw,80px);font-weight:600;letter-spacing:-.045em;line-height:1.02}
footer{border-top:1px solid var(--line);font-size:12px;color:var(--g)}
footer .w{display:flex;justify-content:space-between;padding:22px 0;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:20px}
footer a:hover{color:var(--wh)}
@media(max-width:700px){header nav{gap:16px}.facts{grid-template-columns:1fr}.facts div+div{border-left:0;border-top:1px solid var(--line)}.txt{padding:96px 0}.prod{padding-top:80px}}
@media(prefers-reduced-motion:reduce){.hero img{animation:none}}
.shot{position:relative;max-width:900px;border-color:#1d1d1f}
.shot img{filter:brightness(.42) saturate(.8);transition:filter .5s}
.shot:hover img{filter:brightness(.6) saturate(.9)}
.shot:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#000 100%);pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-14%) scale(.96,1.04)}55%{transform:translateY(-16%)}90%{transform:translateY(0) scale(1.08,.92)}}
@media(prefers-reduced-motion:reduce){.prod h2 .mini{animation:none}}

h1,h2,.txt p,header b,.facts b{font-family:"Syne",Arial,sans-serif}
.hero h1,.prod h2,.ph h1{font-weight:700;letter-spacing:-.04em}
.txt p{font-weight:600}
.yum{position:fixed;left:0;top:0;z-index:50;cursor:pointer;transform-origin:50% 100%;will-change:transform;user-select:none}
.yum svg{display:block}
.mini-yum{display:inline-block;width:.8em;height:.8em;vertical-align:-.05em;margin-left:.12em;cursor:pointer}
.mini-yum svg{width:100%;height:100%}

/* --- content pages --- */
.kick{color:#F7A928;font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:14px}
.sec{padding:120px 0;border-top:1px solid var(--line)}
.sec h2{font-family:"Syne",Arial,sans-serif;font-size:clamp(32px,4.4vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.05;max-width:18ch}
.sec .intro{font-size:clamp(18px,2vw,21px);color:#bdbab3;max-width:56ch;margin-top:20px;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.cell{border:1px solid #232325;border-radius:18px;padding:30px 28px 32px;background:#0a0a0a;transition:border-color .2s,transform .2s}
.cell:hover{border-color:#3a3a3d;transform:translateY(-2px)}
.cell .n{font-family:"Syne",sans-serif;color:#F7A928;font-weight:700;font-size:14px}
.cell h3{font-family:"Syne",Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;margin:12px 0 10px}
.cell p{color:var(--g);font-size:16px;line-height:1.55}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.lead{font-family:"Syne",Arial,sans-serif;font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.body p{color:#bdbab3;font-size:18px;line-height:1.65;margin-bottom:18px;max-width:58ch}
.body p strong{color:var(--wh);font-weight:600}
.steps{counter-reset:s;margin-top:56px;display:grid;gap:0;border-top:1px solid #232325}
.steps li{list-style:none;counter-increment:s;display:grid;grid-template-columns:80px 1fr 1.3fr;gap:32px;padding:30px 0;border-bottom:1px solid #232325;align-items:baseline}
.steps li:before{content:"0" counter(s);font-family:"Syne",sans-serif;color:#F7A928;font-weight:700}
.steps b{font-family:"Syne",sans-serif;font-size:24px;letter-spacing:-.02em}
.steps span{color:var(--g);font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chips span{border:1px solid #2a2a2c;border-radius:999px;padding:8px 16px;font-size:15px;color:#d8d5ce}
.stagebox{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:56px;border:1px solid #232325;border-radius:24px;padding:48px;background:radial-gradient(600px 300px at 30% 30%,rgba(247,169,40,.08),transparent 70%),#0a0a0a}
#yum-stage{width:min(300px,70vw);aspect-ratio:1;margin:0 auto;cursor:pointer}
#yum-stage svg{width:100%;height:100%}
.opts h4{font-size:13px;color:var(--g);font-weight:600;margin:0 0 10px}
.opts .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.opts button{font:inherit;font-size:14px;color:var(--wh);background:#141414;border:1px solid #2a2a2c;border-radius:999px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.opts button i{width:14px;height:14px;border-radius:50%;display:inline-block}
.opts button[aria-pressed=true]{border-color:#F7A928;color:#F7A928}
.opts .surprise{background:#F7A928;color:#000;border-color:#F7A928;font-weight:700}
.cta{text-align:center;padding:140px 0}
.cta h2{margin:0 auto}
.cta .links{margin-top:28px}
.contactgrid .cell a{color:#F7A928;font-weight:600;display:inline-block;margin-top:16px;border-bottom:1px solid rgba(247,169,40,.35)}
.yum-say{position:fixed;left:0;top:0;z-index:51;max-width:220px;background:#f2efe9;color:#111;font:600 14px/1.3 Manrope,sans-serif;padding:9px 13px;border-radius:14px 14px 14px 4px;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.yum-say.on{opacity:1}
.yum{touch-action:none;cursor:grab}.yum.grab{cursor:grabbing}
.yum-fx{position:fixed;z-index:52;pointer-events:none;font-size:20px;animation:fx 1.4s ease-out forwards}
.yum-fx.heart{color:#F43F5E}.yum-fx.zz{font:700 18px Syne,sans-serif;color:#cfd5ff}.yum-fx.star{color:#FFD27A;font-size:16px;animation-duration:.8s}
@keyframes fx{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-60px) scale(1.2)}}
.mini-yum{cursor:pointer}
@media(max-width:860px){.grid,.grid.two,.split,.stagebox{grid-template-columns:1fr;gap:28px}.steps li{grid-template-columns:50px 1fr;gap:12px}.steps li span{grid-column:2}.sec{padding:80px 0}.stagebox{padding:28px}}
