/* v9 shared: chroma-key studio */
:root{--g:#00B140;--g-dk:#008F33;--ink:#06140A;--paper:#FFFFFF;--red:#E5232E;--red-dk:#B9141E}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:18px/1.55 Onest,system-ui,sans-serif;overflow-x:hidden;
  background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 52v16M52 60h16' stroke='%2306140A' stroke-opacity='.16' stroke-width='2'/%3E%3C/svg%3E")}
a{color:inherit}
img,video{display:block}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
section{padding:clamp(64px,10vh,120px) 0}
.white{background:var(--paper)}
.ink{background:var(--ink);color:#fff}
h2{font:900 clamp(30px,5.4vw,88px)/.95 Unbounded,sans-serif;letter-spacing:-.04em;margin:0 0 22px;text-transform:uppercase;overflow-wrap:anywhere}
.lead{font-size:clamp(19px,1.6vw,23px);line-height:1.5;max-width:44ch;margin:0}
.red{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;text-decoration:none;font:800 clamp(20px,1.8vw,26px)/1 Onest,sans-serif;border-radius:999px;padding:24px 40px;box-shadow:0 14px 30px -12px rgba(140,0,10,.6);transition:transform .2s,background .2s}
.red:hover{background:var(--red-dk);transform:translateY(-2px)}
.red::after{content:"";width:12px;height:12px;border-radius:99px;background:#fff;animation:rec 1.2s infinite}
.red.xl{font-size:clamp(24px,2.6vw,40px);padding:30px 56px}
@keyframes rec{50%{opacity:.25}}
.bar{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px clamp(16px,3vw,40px);background:rgba(0,177,64,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar b{font:800 15px/1.1 Unbounded,sans-serif;flex:1;min-width:0}
.bar small{display:block;font:500 13px/1.3 Onest,sans-serif;opacity:.85;margin-top:3px}
.bar a{background:var(--red);color:#fff;text-decoration:none;font-weight:700;border-radius:99px;padding:11px 20px;font-size:15px;white-space:nowrap}
@media (max-width:520px){.bar b{font-size:12px}.bar small{display:none}.bar a{padding:9px 13px;font-size:13px}}
.phone{position:relative;width:var(--pw);aspect-ratio:9/19.4;background:#0c0d0f;border-radius:calc(var(--pw)*.16);padding:calc(var(--pw)*.034);box-shadow:0 0 0 1.5px #3c3f45 inset,0 30px 60px -24px rgba(0,30,10,.55)}
.phone::after{content:"";position:absolute;top:calc(var(--pw)*.058);left:50%;width:29%;height:calc(var(--pw)*.082);transform:translateX(-50%);background:#0c0d0f;border-radius:99px;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.128);overflow:hidden;background:#1a1d22}
.screen video,.screen img{width:100%;height:100%;object-fit:cover}

/* name + offer stack */
.name{font:900 10vw/.82 Unbounded,sans-serif;letter-spacing:-.055em;text-transform:uppercase;margin:0;white-space:nowrap}
.name span{display:table}
.deal{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.deal span{background:var(--ink);color:#fff;font-weight:700;border-radius:10px;padding:10px 14px;font-size:clamp(15px,1.2vw,18px)}
.deal span b{color:var(--g)}
.guar{font-size:15px;margin:14px 0 0;max-width:46ch;opacity:.85}
.foot{font-size:14px;opacity:.75;margin-top:6px}
sup{font-size:.45em;vertical-align:.9em;margin-left:.08em}
/* scroll cue: three chroma chevrons cascading */
.cue{display:flex;align-items:center;gap:14px;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.cue i{display:block;width:22px;height:22px;border-right:5px solid var(--ink);border-bottom:5px solid var(--ink);transform:rotate(45deg);animation:cue 1.4s infinite;opacity:.15}
.cue i:nth-child(2){animation-delay:.18s}.cue i:nth-child(3){animation-delay:.36s;border-color:var(--red)}
.cue .ch{display:flex;flex-direction:column;gap:0;margin-top:-10px}
.cue .ch i{margin-top:-8px}
@keyframes cue{0%,100%{opacity:.15;transform:rotate(45deg) translate(-3px,-3px)}50%{opacity:1;transform:rotate(45deg) translate(3px,3px)}}

/* tunnel */
.stage{height:460vh;position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0}
.tube{position:absolute;inset:0;perspective:900px;z-index:2;pointer-events:none;opacity:0}
.world{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.ring{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.ring .phone{position:absolute;left:0;top:0;--pw:var(--rp);pointer-events:auto;box-shadow:0 0 0 1.5px #3c3f45 inset,0 18px 30px -14px rgba(0,30,10,.6)}
.ring .phone .vw{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:var(--ink);color:var(--g);font:800 13px/1 Onest,sans-serif;padding:6px 9px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .2s;z-index:4}
.ring .phone:hover .vw,.ring .phone.show .vw{opacity:1}
.count{position:absolute;left:50%;top:50%;z-index:6;width:min(96vw,1400px);text-align:center;opacity:0;pointer-events:none}
.count b{display:block;font:900 clamp(24px,6.4vw,112px)/.9 Unbounded,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.count span{display:inline-block;margin-top:18px;background:var(--ink);color:#fff;font-weight:700;font-size:clamp(17px,1.7vw,24px);padding:8px 16px;border-radius:8px}

/* cases: chess layout */
.obj{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}
.obj a{background:#fff;text-decoration:none;font-weight:700;border-radius:99px;padding:10px 18px;font-size:16px}
.obj a:hover{background:var(--ink);color:var(--g)}
.case{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(36px,6vh,72px) 0;border-top:2px solid var(--ink)}
.case>div{min-width:0}
.case.flip{grid-template-columns:auto 1fr}.case.flip .device{order:-1}
.case.wide{grid-template-columns:1fr;justify-items:center;text-align:center}
.case.wide .who,.case.wide .roles{justify-content:center}
.case.wide .res{justify-content:center}
.case.wide>div:first-child{max-width:820px}
.case .q{font:800 clamp(26px,3.1vw,50px)/1.08 Unbounded,sans-serif;letter-spacing:-.02em;margin:0 0 6px}
.case .q::before{content:"«"}.case .q::after{content:"»"}
.case .ans{font-weight:700;font-size:clamp(17px,1.4vw,20px);margin:0 0 18px;opacity:.75}
.case h3{font:800 clamp(20px,1.8vw,28px)/1.15 Unbounded,sans-serif;margin:0 0 10px}
.case p{margin:0 0 14px;max-width:52ch;font-size:clamp(17px,1.35vw,20px)}
.case.wide p{margin-left:auto;margin-right:auto}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.roles li{border:2px solid var(--ink);border-radius:99px;padding:4px 14px;font-size:15px;font-weight:600}
.res{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:14px 0}
.res b{font:900 clamp(48px,6vw,104px)/.9 Unbounded,sans-serif;letter-spacing:-.05em}
.res span{font-weight:600;max-width:26ch}
.who{display:inline-flex;gap:12px;align-items:center;text-decoration:none;background:rgba(255,255,255,.55);padding:8px 14px 8px 8px;border-radius:99px;max-width:100%}
.who img{width:40px;height:40px;border-radius:99px;object-fit:cover;background:#ccc;flex:none}
.who b{font-size:15px}.who span{font-size:13px;opacity:.75;display:block}
.device .phone{--pw:clamp(250px,24vw,370px)}
.feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.feed::-webkit-scrollbar{display:none}
.feed>div{height:100%;scroll-snap-align:start;position:relative;background:#222}
.feed button{all:unset;cursor:pointer;position:absolute;inset:0;z-index:2}
.ov{position:absolute;left:12px;right:30px;bottom:14px;color:#fff;font-size:14px;line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.85);pointer-events:none;z-index:3}
.ov b{display:block;font:800 22px/1.2 Unbounded,sans-serif}
.snd{position:absolute;top:13%;right:10px;z-index:4;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:99px;padding:3px 10px;pointer-events:none}
.on .snd{background:var(--red)}
.dots{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;z-index:4}
.dots i{width:5px;height:5px;border-radius:99px;background:rgba(255,255,255,.5)}
.dots i.on{height:16px;background:#fff}
.swipe{font-size:14px;text-align:center;margin-top:10px;font-weight:600}
.land{--lw:clamp(320px,56vw,860px);width:var(--lw);aspect-ratio:19.4/9;background:#0c0d0f;border-radius:calc(var(--lw)*.075);padding:calc(var(--lw)*.016);position:relative;box-shadow:0 30px 60px -24px rgba(0,30,10,.55);transform:rotate(-90deg) scale(.5);transition:transform 1s cubic-bezier(.5,-.3,.3,1.3)}
.land.turned{transform:none}
.land .screen{border-radius:calc(var(--lw)*.06)}
.land .feed{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;display:flex}
.land .feed>div{flex:0 0 100%;height:100%}
.land .dots{flex-direction:row;top:auto;bottom:8px;right:auto;left:50%;transform:translateX(-50%)}
.land .dots i.on{height:5px;width:16px}
@media (max-width:900px){.case,.case.flip{grid-template-columns:1fr}.case.flip .device{order:0}.case .device{justify-self:center}}
.chans{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.chan{display:flex;gap:12px;align-items:center;background:var(--g);border-radius:18px;padding:12px 14px;text-decoration:none}
.chan img{width:52px;height:52px;border-radius:99px;flex:none;object-fit:cover;background:#ccc}
.chan b{display:block;font-size:16px}
.chan span{font-size:14px;opacity:.8}
.lang{display:inline-block;font-size:12px;font-weight:800;border-radius:6px;padding:1px 6px;margin-left:6px;background:var(--ink);color:var(--g)}

/* prices */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.price{border-radius:22px;padding:24px 22px 26px;background:#fff}
.price.main{background:var(--red);color:#fff}
.price h3{margin:0 0 6px;font-size:21px}
.price .sum{font:900 clamp(24px,2.3vw,34px)/1.12 Unbounded,sans-serif;margin:8px 0 12px}
.price span{font-size:16px}
@media (max-width:1000px){.prices{grid-template-columns:1fr 1fr}}@media (max-width:600px){.prices{grid-template-columns:1fr}}

/* stages of acceptance */
.path{display:grid;grid-template-columns:1.2fr auto;gap:clamp(24px,5vw,80px);align-items:center;margin-top:20px}
.path ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.path li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;padding:16px 20px;border-radius:18px;cursor:pointer;transition:background .2s,color .2s}
.path li em{font:900 13px/1 Onest,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.06em;opacity:.6;grid-column:2}
.path li::before{content:attr(data-n);font:900 30px/1 Unbounded,sans-serif;grid-row:span 3}
.path li b{font:800 clamp(20px,2vw,30px)/1.15 Unbounded,sans-serif}
.path li span{grid-column:2;font-size:17px;opacity:.8}
.path li.on{background:var(--ink);color:#fff}
.path li.on::before{color:var(--g)}
.path .phone{--pw:clamp(250px,24vw,360px)}
.path .caption{text-align:center;margin-top:12px;font-weight:700}
@media (max-width:900px){.path{grid-template-columns:1fr}.path .ph{justify-self:center}}
footer{padding:30px 0 50px;font-size:14px}
@media (prefers-reduced-motion:reduce){.stage{height:auto}.land{transition:none;transform:none}.red::after,.cue i{animation:none}}

.case .joke{font-weight:800;font-style:italic;margin:6px 0 0}