/* De la reclamă la comandă · scroll-driven story (pinned). Stage drawn in fixed stage px and scaled to the container.
   Only transform / opacity / clip-path change while scrolling; the gate is js/gate.js, the light is SVG. */
.story{position:relative;height:270vh;background:var(--room);color:var(--ink)}
.story .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:calc(var(--hh) + clamp(16px,3vh,40px)) var(--side) clamp(20px,3.5vh,40px)}
.story-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex:none}
.story-head h2{font-size:clamp(32px,3.6vw,60px);max-width:14em}
.story .ex{font:400 14px/1.4 var(--mono);color:var(--ink3);white-space:nowrap}
.stagebox{position:relative;flex:1;min-height:0;margin:clamp(12px,2.4vh,32px) 0}
.stage{position:absolute;left:0;top:0;width:1360px;height:620px;transform-origin:0 0}
.stage .el{position:absolute;left:0;top:0;transform-origin:0 0}
.story.mv .stage .el{will-change:transform,opacity}
.stage .tag{display:none;position:absolute;left:2px;top:-26px;font:400 13px/1 var(--mono);color:var(--ink3);letter-spacing:0;white-space:nowrap}

/* acts rail */
.acts{flex:none;list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut)}
.acts li{opacity:.38;transition:opacity .4s}
.acts li.on{opacity:1}
.acts .n{font:400 14px/1 var(--mono);color:var(--ink3);margin-right:12px}
.acts b{font:500 clamp(18px,1.5vw,22px)/1.2 var(--sans);letter-spacing:-.01em}
.acts p{margin-top:8px;font-size:clamp(15px,1.1vw,17px);line-height:1.45;color:var(--ink2);max-width:26em}
.acts li{position:relative}
.acts li::before{content:"";position:absolute;left:0;right:0;top:-19px;height:1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--f,0))}

/* ---------------------------------------------------------------- surfaces: dark product UIs, no hue but the light */
.phone{width:250px;height:520px;border-radius:40px;padding:9px;background:#141518;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.phone .screen{position:relative;height:100%;border-radius:31px;overflow:hidden;background:#000}
.tik .vid{position:absolute;inset:0}
.tik .vid video,.ig .img video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
.tik .vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 62%,rgba(0,0,0,.78) 86%,rgba(0,0,0,.9) 100%)}
.tik .tabs{position:absolute;top:22px;left:0;right:0;display:flex;justify-content:center;gap:16px;font:500 13px/1 var(--sans);color:rgba(255,255,255,.6)}
.tik .tabs b{color:#fff;font-weight:600}
.tik .rail{position:absolute;right:10px;bottom:120px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));display:grid;gap:18px;justify-items:center}
.tik .rail .av{width:34px;height:34px;border-radius:50%;background:#3a3836;border:2px solid #fff}
.tik .rail svg{width:28px;height:28px;fill:rgba(255,255,255,.92);stroke:none}
.tik .meta{position:absolute;left:14px;right:56px;bottom:66px;display:grid;gap:4px;color:#fff;font:400 12.5px/1.35 var(--sans)}
.tik .meta b{font-weight:600;font-size:13.5px}
.tik .meta small{font-size:11px;color:rgba(255,255,255,.7)}
.tik .cta{position:absolute;left:12px;right:12px;bottom:18px;height:38px;border-radius:6px;background:rgba(255,255,255,.92);color:#0B0B0C;font:600 13px/38px var(--sans);text-align:center}
.tik .prog{position:absolute;left:0;right:0;bottom:6px;height:2px;background:rgba(255,255,255,.2);margin:0 12px}
.tik .prog i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}

.card{width:280px;border-radius:12px;background:#121315;border:1px solid rgba(255,255,255,.12);overflow:visible}
.ig .top{display:flex;align-items:center;gap:10px;padding:12px 12px 10px;font:12.5px/1.25 var(--sans);color:#fff}
.ig .top .av{width:30px;height:30px;border-radius:50%;background:#3a3836;box-shadow:0 0 0 2px #121315,0 0 0 3.5px rgba(255,255,255,.55)}
.ig .top b{display:block;font-weight:600}
.ig .top small{color:rgba(255,255,255,.62);font-size:11px}
.ig .top .dots{margin-left:auto;color:rgba(255,255,255,.6);font-size:10px;letter-spacing:1px}
.ig .img{height:350px;overflow:hidden}
.ig .cta{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 14px;height:42px;background:#1c1d20;font:600 13px/1 var(--sans);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.ig .icons{display:flex;gap:14px;padding:10px 12px 4px}
.ig .icons svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7}
.ig .icons .bm{margin-left:auto}
.ig .icons .heart path{transition:none}
.ig .cap{padding:2px 12px 14px;font:12.5px/1.4 var(--sans);color:rgba(255,255,255,.85)}
.ig .cap b{font-weight:600;color:#fff}

.panel{width:470px;border-radius:14px;background:#17181b;border:1px solid rgba(255,255,255,.12);padding:16px}
.goo .search{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:23px;background:#25262a;border:1px solid rgba(255,255,255,.1);font:15px/1 var(--sans);color:#fff}
.goo .search svg{width:18px;height:18px;fill:none;stroke:rgba(255,255,255,.7);stroke-width:2}
.goo .q{position:relative;display:inline-flex;align-items:center}
.goo .qt{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.goo .caret{width:1.5px;height:18px;background:#fff;margin-left:2px}
.goo .ad{position:relative;display:grid;gap:6px;padding:18px 4px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.goo .ad small{font:600 12px/1 var(--sans);color:#fff}
.goo .ad .url{font:12.5px/1.2 var(--sans);color:rgba(255,255,255,.66)}
.goo .ad .title{position:relative;font:500 19px/1.25 var(--sans);color:#fff;letter-spacing:-.01em;width:max-content}
.goo .sk{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.12)}
.goo .shop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:14px}
.goo .pc{display:grid;gap:6px;padding:8px;border-radius:10px;background:#1f2023;border:1px solid rgba(255,255,255,.08);font:12px/1.2 var(--sans);color:#fff}
.goo .pc img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;border-radius:6px;background:#fff}
.goo .pc b{font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;line-height:1.2}
.goo .pc .pr{font:500 12px/1 var(--mono);color:#fff;min-height:12px}
.goo .pc small{color:rgba(255,255,255,.6);font-size:11px}

/* the CTA being pressed: a ring of the light */
.ring{position:absolute;inset:-5px;border-radius:9px;border:1.5px solid #F5F8FF;box-shadow:0 0 18px rgba(157,187,255,.8),inset 0 0 12px rgba(157,187,255,.35);opacity:0;pointer-events:none}
.goo .ad .title .ring{inset:-6px -10px}

.gatebox{width:520px;height:520px}
.gatebox #storyGate{width:100%;height:100%}
.gatebox svg{width:100%;height:100%}

.ord .screen{background:#0E0F11;display:flex;flex-direction:column;padding:12px 10px 12px}
.ord .note{position:absolute;left:8px;right:8px;top:8px;z-index:2;display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:16px;background:rgba(44,45,50,.96);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.5);font:12px/1.3 var(--sans);color:#fff}
.ord .note>div{min-width:0;flex:1}
.ord .note b{display:block;font-weight:600;font-size:11.5px}
.ord .note b em{font-style:normal;font-weight:400;color:rgba(255,255,255,.6)}
.ord .note span{display:block;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord .ic{flex:none;width:28px;height:28px;border-radius:7px;background:#F2F2F0;color:#0B0B0C;font:700 15px/28px var(--sans);text-align:center;font-style:normal}
.ord .apphead{flex:none;padding:66px 4px 10px;display:flex;align-items:baseline;justify-content:space-between;color:#fff}
.ord .apphead b{font:600 21px/1 var(--sans);letter-spacing:-.02em}
.ord .apphead small{font:12px/1 var(--sans);color:rgba(255,255,255,.6)}
.ord .orders{flex:1;display:flex;flex-direction:column;gap:6px;min-height:0}
.ord .o{display:flex;align-items:center;gap:9px;padding:7px 8px 7px 7px;border-radius:12px;background:#1a1b1e;border:1px solid rgba(255,255,255,.08);color:#fff;min-width:0}
.ord .o img{flex:none;width:40px;height:40px;border-radius:8px;object-fit:contain;background:#fff}
.ord .o>div{flex:1;min-width:0}
.ord .o b{display:block;font:600 12px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord .o span{display:block;margin-top:2px;font:400 11px/1.2 var(--sans);color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord .o em{flex:none;font:500 10px/1 var(--mono);font-style:normal;color:#0B0B0C;background:#F2F2F0;border-radius:4px;padding:4px 5px}
.ord .done{flex:none;margin-top:8px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;gap:8px;font:600 13px/1 var(--sans);color:#fff}
.ord .done svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.rays{position:absolute;left:0;top:0;width:1360px;height:620px;overflow:visible;pointer-events:none}
.rays .trail{fill:none;stroke-linecap:round}
.rays .guide{display:none}

@media (max-width:899px){
  .story{height:330vh}
  .story .pin{padding-top:calc(var(--hh) + 12px);padding-bottom:16px}
  .story-head{display:block}
  .story-head h2{font-size:30px}
  .story .ex{margin-top:6px;font-size:13px}
  .acts{grid-template-columns:1fr;position:relative;min-height:112px;padding-top:14px}
  .acts li{position:absolute;left:0;right:0;top:14px;opacity:0}
  .acts li.on{opacity:1}
  .acts li::before{display:none}
  .acts p{font-size:15px}
}
/* reduced motion or no pinning: one composed, still frame */
.story.still{height:auto}
.story.still .pin{position:relative;height:auto;min-height:100svh}
.story.still .stagebox{min-height:60vh}
@media (max-width:899px){.story.still .acts li{position:relative;top:auto;opacity:1;margin-bottom:16px}}
.story.still .acts li{opacity:1}
.story + .contact{padding-top:clamp(56px,5vw,96px);border-top:1px solid var(--line)}

/* real ad frames: video, with a frame-strip fallback when the browser refuses to autoplay */
.tik .vid,.ig .img{position:relative}
.seq{position:absolute;inset:0;display:none;background-size:100% 800%;background-repeat:no-repeat;background-position:0 0}
.nomotion .seq{display:block}
/* Google frame: full brightness in act 1; the result gets the light when the query lands; a cursor clicks */
.goo{position:relative}
.goo .ad{transition:background-color .4s,box-shadow .4s;border-radius:10px;margin:0 -8px;padding-left:12px;padding-right:12px}
.goo .ad.hl{background:rgba(157,187,255,.07);box-shadow:inset 0 0 0 1px rgba(157,187,255,.35),0 0 30px rgba(157,187,255,.12)}
.goo .pc{overflow:hidden}
.goo .pc img{transform-origin:50% 60%;will-change:transform}
.story.live .goo .pc img{animation:kb 7s ease-in-out infinite alternate}
.story.live .goo .pc:nth-child(2) img{animation-duration:8s;animation-direction:alternate-reverse}
.story.live .goo .pc:nth-child(3) img{animation-duration:9s}
@keyframes kb{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.14) translate(-4%,-3%)}}
.goo .cur{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;opacity:0;will-change:transform,opacity;z-index:3}
.goo .cur svg{width:22px;height:22px;fill:#fff;stroke:#0B0B0C;stroke-width:1.2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.goo .cur .tap{position:absolute;left:-12px;top:-12px;width:28px;height:28px;border-radius:50%;border:2px solid #F5F8FF;box-shadow:0 0 16px rgba(157,187,255,.8);opacity:0;transform:scale(.4)}
@media (prefers-reduced-motion:reduce){.story.live .goo .pc img{animation:none}}
.tik .seq{left:50%;right:auto;top:0;bottom:0;height:100%;width:auto;aspect-ratio:9/16;transform:translateX(-50%)}
.ig .seq{aspect-ratio:4/5}
.goo .ad{grid-template-columns:minmax(0,1fr)}
.goo .ad .title{max-width:100%;min-width:0;width:auto!important}
.goo .ad .title [data-t]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}