/* =========================================================
   XHIRO — three views, one dark canvas, one accent.
   Colour lives only inside the art (facade, work pieces).
   ========================================================= */

:root{
  --bg:#0E0D0C; --s1:#171614; --s2:#1F1D1A; --s3:#2A2724;
  --line:rgba(243,238,228,.09);
  --tx:#F3EEE4; --tx2:rgba(243,238,228,.66); --tx3:rgba(243,238,228,.42);
  --or:#FF5A1F;

  /* paints (used inside artwork only) */
  --gelqere:#F3EEE4; --beton:#BDB6A9; --asfalt:#151413; --portokall:#FF5A1F;
  --verdhe:#FFC629; --kobalt:#2340FF; --roze:#FF9EC4; --gjelber:#1E8C5A;

  --f-d:"Anybody", "Arial Narrow", system-ui, sans-serif;
  --f-t:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --st:env(safe-area-inset-top, 0px);
  --sb:env(safe-area-inset-bottom, 0px);
  --dock-h:64px;
  --dock-b:calc(14px + var(--sb));
  --clear:calc(var(--dock-b) + var(--dock-h) + 22px);   /* room content leaves for the dock */

  --out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--tx); }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ font:16px/1.5 var(--f-t); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:12px; }
::selection{ background:var(--or); color:var(--asfalt); }

.glass{
  background:rgba(28,26,24,.58);
  -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.1), 0 14px 34px rgba(0,0,0,.38);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{ background:rgba(28,26,24,.96); } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:54px; padding:0 26px; border-radius:99px; white-space:nowrap;
  font-family:var(--f-t); font-weight:650; font-size:16.5px; letter-spacing:-.005em;
  transition:transform .25s var(--out), background .2s, color .2s;
}
.btn:active{ transform:scale(.96); }
.btn--hot{ background:var(--or); color:#140A05; }
.btn--hot:hover{ background:#ff6b33; }
.btn svg{ width:18px; height:18px; }
.btn .ic-wa{ width:21px; height:21px; margin:0 -2px 0 -4px; }

/* =========================================================
   CORNER CHROME (logo + language) — not a header
   ========================================================= */
.chrome{
  position:fixed; z-index:30; top:calc(12px + var(--st)); left:12px; right:12px;
  display:flex; justify-content:space-between; align-items:center; pointer-events:none;
}
.chrome > *{ pointer-events:auto; }
.chip-logo{ height:42px; padding:0 16px; border-radius:99px; display:flex; align-items:center; }
.chip-logo svg{ width:78px; height:auto; overflow:visible; color:var(--tx); }
.lang{ position:relative; display:inline-grid; grid-auto-flow:column; height:42px; padding:4px; border-radius:99px; font-size:12px; font-weight:650; letter-spacing:.04em; }
.lang span{ position:relative; z-index:1; display:grid; place-items:center; width:40px; border-radius:99px; color:var(--tx3); transition:color .3s; }
.lang::before{ content:""; position:absolute; top:4px; bottom:4px; left:4px; width:40px; border-radius:99px; background:rgba(255,255,255,.14); transition:transform .45s var(--spring); }
html[lang="en"] .lang::before{ transform:translateX(40px); }
html[lang="sq"] .lang [data-l="sq"], html[lang="en"] .lang [data-l="en"]{ color:var(--tx); }

/* =========================================================
   VIEWS — three full-screen scrollers, one visible
   ========================================================= */
.view{
  position:fixed; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
  opacity:0; visibility:hidden; transform:scale(.985);
  transition:opacity .34s var(--out), transform .5s var(--out), visibility 0s linear .34s;
  outline:none;
}
.view{ transition:opacity .16s ease-out, transform .3s var(--out), visibility 0s linear .16s; }
.view.is-active{ opacity:1; visibility:visible; transform:none; transition:opacity .38s var(--out) .08s, transform .55s var(--out) .08s, visibility 0s; }
.view--snap{ scrollbar-width:none; }
.view--snap::-webkit-scrollbar{ display:none; }
/* content fades out under the dock, like an iOS tab bar */
body::after{
  content:""; position:fixed; z-index:35; left:0; right:0; bottom:0; height:calc(var(--dock-b) + var(--dock-h) + 14px); pointer-events:none;
  background:linear-gradient(to top, rgba(14,13,12,.94) 35%, rgba(14,13,12,0));
}
.no-anim .view{ transition:none!important; }
.view:not(.is-active) *, .view:not(.is-active) *::before, .view:not(.is-active) *::after{ animation-play-state:paused!important; }

/* shared type */
.eyebrow{ margin:0 0 14px; font-size:12px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--or); }
.h2{
  margin:0; font-family:var(--f-d); font-weight:850; font-variation-settings:"wdth" 82;
  font-size:clamp(42px, 11.5vw, 92px); line-height:.98; letter-spacing:-.02em;
}
.h2 span{ color:var(--tx3); }
.h2 .or{ color:var(--or); }
.sub{ margin:16px auto 0; max-width:30ch; font-size:18px; line-height:1.45; color:var(--tx2); }

/* =========================================================
   VIEW 1 — XHIRO (home)
   ========================================================= */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate; overflow:hidden; background:#a9a296;
}
.facade{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; touch-action:pan-y; cursor:pointer; }
.hero::after{
  content:""; position:absolute; inset:auto 0 0; height:62%; z-index:-1; pointer-events:none;
  background:linear-gradient(to top, var(--bg) 0, rgba(14,13,12,.82) 26%, rgba(14,13,12,0) 100%);
}
.hint{
  position:absolute; z-index:2; top:calc(68px + var(--st)); left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px 0 11px; border-radius:99px;
  font-size:12.5px; font-weight:600; color:var(--tx); white-space:nowrap; transition:opacity .5s, transform .5s var(--out);
}
.hint i{ width:8px; height:8px; border-radius:50%; background:var(--or); animation:ping 1.8s infinite; }
.hint.is-gone{ opacity:0; transform:translate(-50%, -6px); pointer-events:none; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(255,90,31,.7); } 70%,100%{ box-shadow:0 0 0 10px rgba(255,90,31,0); } }

.sign{
  margin:0 12px var(--clear); padding:22px; border-radius:30px;
  background:rgba(14,13,12,.74); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -20px rgba(0,0,0,.6);
  opacity:0; transform:translateY(18px); transition:opacity .9s var(--out), transform .9s var(--out);
}
.is-ready .sign{ opacity:1; transform:none; }
.sign .eyebrow{ color:var(--tx3); margin-bottom:10px; }
.headline{ margin:0; font-family:var(--f-d); line-height:.86; text-transform:uppercase; cursor:pointer; }
.headline__small{ display:block; text-transform:lowercase; font-weight:400; font-size:21px; margin:0 0 6px 2px; color:var(--tx2); }
.headline__big{ display:block; white-space:nowrap; font-weight:900; font-size:var(--hs, 19vw); font-variation-settings:"wdth" var(--hw, 100); letter-spacing:-.02em; }
.headline__big + .headline__big{ color:var(--or); margin-top:.03em; }
.fl{ display:inline-grid; grid-template-columns:100%; justify-items:center; perspective:600px; transition:width .55s var(--out); }
.fl > span{ grid-area:1/1; white-space:pre; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .7s var(--spring); transform-origin:50% 55%; }
.fl > span + span{ transform:rotateX(180deg); }
.fl.is-flipped > span:first-child{ transform:rotateX(-180deg); }
.fl.is-flipped > span + span{ transform:rotateX(0); }
.sign__line{ margin:16px 0 20px; font-size:16.5px; line-height:1.45; color:var(--tx2); max-width:32ch; }
.sign__cta{ display:flex; gap:10px; }
.sign__cta .btn{ flex:1; }
.offer{ flex:none; height:54px; padding:0 18px 0 15px; border-radius:99px; display:inline-flex; align-items:center; gap:7px; background:rgba(255,90,31,.13); box-shadow:inset 0 0 0 1px rgba(255,90,31,.38); color:var(--or); font-family:var(--f-d); font-weight:900; font-size:19px; font-variation-settings:"wdth" 88; transition:transform .25s var(--out); }
.offer svg{ width:20px; height:20px; }
.offer:active{ transform:scale(.96); }

/* beats */
.beat{ padding:clamp(96px, 18vw, 170px) 24px; max-width:860px; margin:0 auto; text-align:center; }
.beat + .beat{ padding-top:0; }

.phone{
  --pw:min(64vw, 272px);
  position:relative; width:var(--pw); height:calc(var(--pw) * 1.72); margin:48px auto 0; border-radius:calc(var(--pw) * .15);
  background:#000; padding:9px; box-shadow:0 0 0 1.5px #34302c, 0 40px 80px -30px rgba(255,90,31,.25);
}
.phone::before{ content:""; position:absolute; top:17px; left:50%; width:30%; height:22px; margin-left:-15%; border-radius:99px; background:#000; z-index:3; }
.phone__screen{ position:relative; height:100%; border-radius:calc(var(--pw) * .12); overflow:hidden; background:#0d0c0b; }
.feed__col{ position:absolute; inset:0 0 auto; padding:50px 10px 0; animation:feedscroll 7s var(--ease) infinite; will-change:transform; }
.post{ border-radius:14px; background:#1c1a18; margin-bottom:10px; padding:10px; }
.post__top{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.post__top i{ width:22px; height:22px; border-radius:50%; background:#2c2926; }
.post__top b{ height:7px; width:40%; border-radius:4px; background:#2c2926; }
.post__img{ aspect-ratio:1; border-radius:8px; background:#262321; }
.post__lines{ height:7px; width:70%; border-radius:4px; background:#2c2926; margin-top:9px; }
.post--hero .post__img{ display:grid; place-items:center; background:repeating-linear-gradient(90deg, var(--portokall) 0 14%, var(--verdhe) 14% 24%, var(--roze) 24% 36%, var(--kobalt) 36% 46%); }
.post--hero .post__img span{ background:var(--asfalt); color:var(--portokall); padding:6px 10px 4px; border-radius:6px; font-family:var(--f-d); font-weight:900; font-variation-settings:"wdth" 120; font-size:clamp(22px, 8vw, 32px); letter-spacing:-.02em; animation:poststamp 7s var(--out) infinite; }
.post--hero .post__top i{ background:var(--portokall); }
.heart{ position:absolute; z-index:4; left:50%; top:46%; width:60px; margin-left:-30px; color:var(--or); opacity:0; animation:heart 7s var(--spring) infinite; filter:drop-shadow(0 6px 20px rgba(0,0,0,.4)); }
@keyframes feedscroll{ 0%{ transform:translateY(0); filter:blur(0); } 8%{ filter:blur(0); } 20%{ filter:blur(2.5px); } 44%,100%{ transform:translateY(var(--stop, -1100px)); filter:blur(0); } }
@keyframes poststamp{ 0%,42%{ transform:scale(.6); opacity:0; } 50%{ transform:scale(1.08); opacity:1; } 56%,88%{ transform:scale(1); opacity:1; } 100%{ opacity:0; } }
@keyframes heart{ 0%,58%{ transform:scale(0); opacity:0; } 64%{ transform:scale(1.15); opacity:1; } 72%{ transform:scale(.95); } 80%{ transform:scale(1); opacity:1; } 90%,100%{ transform:scale(1.2); opacity:0; } }

.word{ margin:0; font-family:var(--f-d); font-weight:900; font-variation-settings:"wdth" 128; font-size:clamp(64px, 19.5vw, 180px); line-height:.86; letter-spacing:-.03em; white-space:nowrap; }
.word span{ color:var(--or); }
.means{ list-style:none; margin:40px auto 0; padding:0; max-width:520px; text-align:left; }
.means li{ display:grid; grid-template-columns:30px 1fr auto; align-items:baseline; gap:10px; padding:17px 2px; border-top:1px solid var(--line); font-size:16.5px; }
.means li:last-child{ border-bottom:1px solid var(--line); }
.means small{ font-size:12px; color:var(--tx3); font-variant-numeric:tabular-nums; }
.means span{ color:var(--tx2); }
.means b{ font-weight:650; white-space:nowrap; }
.means b::before{ content:"→ "; color:var(--or); font-weight:400; }

.seal{ position:relative; width:min(54vw, 210px); aspect-ratio:1; margin:0 auto 34px; }
.seal svg{ width:100%; height:100%; }
.seal__ring{ transform-origin:center; animation:spin 26s linear infinite; }
.seal__ring text{ font-family:var(--f-t); font-weight:600; font-size:12.6px; letter-spacing:.3em; fill:var(--tx2); text-transform:uppercase; }
.seal__core{ position:absolute; inset:23%; border-radius:50%; background:var(--or); display:grid; place-items:center; color:#140A05; font-family:var(--f-d); font-weight:900; font-variation-settings:"wdth" 120; font-size:clamp(30px, 9vw, 40px); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.end .btn{ margin-top:34px; height:60px; padding:0 30px; font-size:18px; }
.end__alt{ display:block; margin-top:18px; color:var(--tx2); font-size:15px; }
.end__alt:hover{ color:var(--tx); }

.mini{ padding:28px 24px var(--clear); max-width:860px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px; font-size:13px; color:var(--tx3); border-top:1px solid var(--line); }
.mini nav{ display:flex; gap:18px; }
.mini a:hover{ color:var(--tx); }

.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--out), transform .9s var(--out); transition-delay:var(--d, 0s); }
.js .rv.in{ opacity:1; transform:none; }

@media (min-width:900px){
  .hero{ justify-content:center; }
  .hero::after{ inset:0 auto 0 0; width:62%; height:auto; background:linear-gradient(to right, rgba(14,13,12,.7), rgba(14,13,12,0)); }
  .sign{ margin:0 0 0 6vw; max-width:540px; padding:34px; }
  .headline__small{ font-size:26px; }
  .sign__cta .btn{ flex:none; }
}

/* =========================================================
   VIEW 2 — PUNA (work): one piece per screen, swipe like reels
   ========================================================= */
.view--snap{ scroll-snap-type:y mandatory; }
.rc{
  position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; gap:18px; padding:calc(68px + var(--st)) 12px var(--clear);
}
.rc__stage{ position:relative; flex:1; min-height:0; border-radius:30px; overflow:hidden; background:var(--s1); isolation:isolate; }
.rc__count{ position:absolute; z-index:6; top:12px; left:12px; height:28px; padding:0 11px; border-radius:99px; display:flex; align-items:center; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; color:var(--tx); }
.rc__meta{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:end; padding:0 8px; }
.rc__title{ margin:0; font-family:var(--f-d); font-weight:850; font-variation-settings:"wdth" 82; font-size:clamp(30px, 8.4vw, 64px); line-height:1; letter-spacing:-.02em; }
.rc__line{ margin:6px 0 0; font-size:15.5px; line-height:1.4; color:var(--tx2); max-width:30ch; }
.rc__buy{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.rc__price{ font-family:var(--f-d); font-weight:850; font-size:24px; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.rc__price small{ font-family:var(--f-t); font-weight:500; font-size:12.5px; color:var(--tx3); }
.add{ height:42px; padding:0 16px; border-radius:99px; background:rgba(255,255,255,.1); font-size:14.5px; font-weight:650; display:inline-flex; align-items:center; gap:6px; transition:background .25s, color .25s, transform .25s var(--out); white-space:nowrap; }
.add::before{ content:"+"; font-size:18px; line-height:1; font-weight:500; }
.add[aria-pressed="true"]{ background:var(--or); color:#140A05; }
.add[aria-pressed="true"]::before{ content:"✓"; font-size:14px; }
.add:active{ transform:scale(.94); }
.rc__link{ font-size:14.5px; font-weight:650; color:var(--tx2); white-space:nowrap; }
.rc__link:hover{ color:var(--tx); }
.swipe{ position:absolute; z-index:6; bottom:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:99px; font-size:12.5px; font-weight:600; white-space:nowrap; transition:opacity .4s; }
.swipe svg{ width:14px; animation:nudge 1.6s var(--ease) infinite; }
.swipe.is-gone{ opacity:0; pointer-events:none; }
@keyframes nudge{ 50%{ transform:translateY(-4px); } }
.rc:not(.is-live) *{ animation-play-state:paused!important; }

@media (min-width:900px){
  .rc{ flex-direction:row-reverse; align-items:stretch; gap:6vw; padding:calc(90px + var(--st)) 6vw calc(var(--dock-b) + var(--dock-h) + 40px); }
  .rc__stage{ flex:1.35; }
  .rc__meta{ flex:1; max-width:440px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:18px; padding:0; }
  .rc__line{ font-size:19px; }
  .rc__buy{ flex-direction:row; align-items:center; gap:18px; }
  .rc__price{ font-size:32px; }
}

/* --- demo: web --- */
.d-web{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(120% 80% at 50% 0%, #2b2724, #141312); }
.mini-ph{ height:78%; aspect-ratio:9/18; border-radius:22px; background:#000; padding:6px; box-shadow:0 0 0 1.5px #44403b, 0 30px 40px -14px rgba(0,0,0,.7); }
.mini-ph__screen{ height:100%; border-radius:17px; overflow:hidden; background:var(--gelqere); position:relative; }
.mini-ph__scroll{ animation:miniscroll 8s var(--ease) infinite; }
.mini-ph__hero{ height:150px; background:var(--portokall); padding:12px 10px; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; position:relative; overflow:hidden; }
.mini-ph__hero::before{ content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:50%; background:var(--verdhe); top:-18%; right:-22%; }
.mini-ph__hero b{ height:10px; width:80%; background:var(--asfalt); border-radius:2px; position:relative; }
.mini-ph__hero b + b{ width:55%; }
.mini-ph__hero span{ width:48%; height:16px; border-radius:99px; background:var(--asfalt); margin-top:5px; position:relative; }
.mini-ph__row{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:7px; }
.mini-ph__row i{ aspect-ratio:1; border-radius:6px; background:var(--kobalt); }
.mini-ph__row i + i{ background:var(--roze); }
.mini-ph__lines{ padding:4px 9px; }
.mini-ph__lines b{ display:block; height:6px; border-radius:3px; background:#cfc7b8; margin:6px 0; }
.mini-ph__lines b:last-child{ width:60%; }
.mini-ph__card{ margin:7px; height:70px; border-radius:8px; background:var(--asfalt); }
.mini-ph__wa{ position:absolute; right:8px; bottom:8px; width:26px; height:26px; border-radius:50%; background:#25D366; box-shadow:0 3px 8px rgba(0,0,0,.3); animation:wapulse 2s infinite; }
@keyframes wapulse{ 50%{ transform:scale(1.15); } }
@keyframes miniscroll{ 0%,12%{ transform:translateY(0); } 40%,52%{ transform:translateY(-34%); } 80%,92%{ transform:translateY(-52%); } 100%{ transform:translateY(0); } }

/* --- demo: animated logo --- */
.d-motion{ position:absolute; inset:0; background:var(--kobalt); overflow:hidden; display:grid; place-items:center; }
.d-motion__word{ position:relative; z-index:1; font-family:var(--f-d); color:var(--gelqere); font-size:clamp(64px, 22vw, 150px); line-height:1; animation:breathe 3.2s var(--ease) infinite alternate; }
@keyframes breathe{ from{ font-variation-settings:"wdth" 50, "wght" 200; letter-spacing:.04em; } to{ font-variation-settings:"wdth" 150, "wght" 900; letter-spacing:-.03em; } }
.d-motion__ball{ position:absolute; z-index:2; width:36px; height:36px; left:calc(50% - 18px); bottom:16%; border-radius:50%; background:var(--portokall); animation:bounce 1.1s infinite; transform-origin:50% 100%; }
.d-motion__floor{ position:absolute; left:22%; right:22%; bottom:16%; height:2px; background:rgba(243,238,228,.3); }
.d-motion__ring{ position:absolute; width:150%; aspect-ratio:1; border-radius:50%; border:1px dashed rgba(243,238,228,.2); animation:spin 30s linear infinite; }
@keyframes bounce{
  0%{ transform:translateY(0) scale(1.35,.65); animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  12%{ transform:translateY(-12px) scale(.85,1.2); }
  50%{ transform:translateY(-160px) scale(1); animation-timing-function:cubic-bezier(.7,0,.8,.3); }
  88%{ transform:translateY(-12px) scale(.85,1.2); }
  100%{ transform:translateY(0) scale(1.35,.65); }
}

/* --- demo: explainer --- */
.d-exp{ position:absolute; inset:0; overflow:hidden; }
.d-exp__bg{ position:absolute; inset:0; animation:expbg 12s steps(1) infinite; }
@keyframes expbg{ 0%{ background:var(--verdhe); } 25%{ background:var(--roze); } 50%{ background:#9fb2ff; } 75%{ background:var(--portokall); } }
.d-exp__scene{ position:absolute; inset:0 0 48px; }
.d-exp__shop{ position:absolute; right:12%; bottom:0; width:36%; height:52%; background:var(--gelqere); border-radius:8px 8px 0 0; }
.d-exp__shop::before{ content:""; position:absolute; left:-6%; right:-6%; top:0; height:16%; border-radius:5px; background:repeating-linear-gradient(90deg, var(--asfalt) 0 12px, var(--gelqere) 12px 24px); }
.d-exp__shop::after{ content:""; position:absolute; left:24%; right:24%; bottom:0; height:44%; background:var(--asfalt); border-radius:5px 5px 0 0; }
.d-exp__man{ position:absolute; left:16%; bottom:0; width:22%; height:56%; animation:walk 12s var(--ease) infinite; }
.d-exp__man i{ position:absolute; left:28%; top:0; width:44%; aspect-ratio:1; border-radius:50%; background:var(--asfalt); }
.d-exp__man b{ position:absolute; left:10%; right:10%; bottom:0; height:62%; border-radius:40% 40% 0 0; background:var(--asfalt); }
.d-exp__man b::after{ content:""; position:absolute; left:42%; top:12%; width:16%; height:42%; background:var(--portokall); border-radius:2px; }
@keyframes walk{ 0%,20%{ transform:translateX(0); } 30%,45%{ transform:translateX(30%) translateY(-3%); } 55%,70%{ transform:translateX(-10%) scale(.9); } 80%,100%{ transform:translateX(70%); } }
.d-exp__sub{ position:absolute; left:12px; right:12px; bottom:62px; height:60px; }
.d-exp__sub span{ position:absolute; inset:auto 0 0; text-align:center; opacity:0; animation:subs 12s steps(1) infinite; }
.d-exp__sub span b{ background:var(--asfalt); color:var(--gelqere); font-weight:500; font-size:15px; line-height:1.75; padding:4px 8px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.d-exp__sub span:nth-child(2){ animation-delay:3s; } .d-exp__sub span:nth-child(3){ animation-delay:6s; } .d-exp__sub span:nth-child(4){ animation-delay:9s; }
@keyframes subs{ 0%{ opacity:1; } 25%,100%{ opacity:0; } }
.d-exp__bar{ position:absolute; left:0; right:0; bottom:0; height:48px; background:var(--asfalt); display:flex; align-items:center; gap:10px; padding:0 16px; }
.d-exp__bar svg{ width:13px; flex:none; color:var(--gelqere); }
.d-exp__track{ flex:1; height:4px; border-radius:99px; background:rgba(243,238,228,.2); overflow:hidden; }
.d-exp__track i{ display:block; height:100%; background:var(--portokall); transform-origin:0 50%; animation:progress 12s linear infinite; }
.d-exp__time{ font-size:12px; color:var(--beton); font-variant-numeric:tabular-nums; }
@keyframes progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- demo: 3D --- */
.d-3d{ position:absolute; inset:0; display:grid; place-items:center; perspective:800px; background:radial-gradient(70% 60% at 50% 40%, #2c3a8f, #0f1438); overflow:hidden; }
.box3d{ --w:150px; --h:190px; --d:80px; width:var(--w); height:var(--h); position:relative; transform-style:preserve-3d; animation:turn 9s linear infinite; }
.box3d > i{ position:absolute; left:50%; top:50%; display:grid; place-items:center; text-align:center; backface-visibility:hidden; }
.box3d .fr, .box3d .bk{ width:var(--w); height:var(--h); margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.box3d .lf, .box3d .rt{ width:var(--d); height:var(--h); margin:calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.box3d .tp, .box3d .bt{ width:var(--w); height:var(--d); margin:calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.box3d .fr{ transform:translateZ(calc(var(--d) / 2)); }
.box3d .bk{ transform:rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.box3d .rt{ transform:rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.box3d .lf{ transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.box3d .tp{ transform:rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.box3d .bt{ transform:rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.box3d .fr, .box3d .bk{ background:linear-gradient(180deg, rgba(255,255,255,.2), transparent 40%, rgba(0,0,0,.18)), repeating-linear-gradient(45deg, transparent 0 10px, rgba(21,20,19,.1) 10px 11px), var(--verdhe); }
.box3d .fr span, .box3d .bk span{ background:var(--asfalt); color:var(--verdhe); padding:9px 8px 7px; border-radius:4px; font-family:var(--f-d); font-weight:900; font-variation-settings:"wdth" 70; font-size:27px; line-height:.9; text-transform:uppercase; }
.box3d .fr small, .box3d .bk small{ display:block; font-family:var(--f-t); font-size:8px; letter-spacing:.14em; color:var(--gelqere); margin-top:6px; font-weight:600; }
.box3d .lf{ background:linear-gradient(180deg, #e8ac12, #c98d00); }
.box3d .rt{ background:linear-gradient(180deg, var(--portokall), #c63c0c); }
.box3d .tp{ background:#ffe08a; }
.box3d .bt{ background:#8a6400; }
.d-3d__shadow{ position:absolute; left:50%; top:74%; width:190px; height:28px; margin-left:-95px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); animation:shadowpulse 4.5s ease-in-out infinite alternate; }
@keyframes turn{ from{ transform:rotateX(-16deg) rotateY(0) translateY(-6px); } 50%{ transform:rotateX(-16deg) rotateY(180deg) translateY(6px); } to{ transform:rotateX(-16deg) rotateY(360deg) translateY(-6px); } }
@keyframes shadowpulse{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(.8); opacity:.6; } }

/* --- demo: reel --- */
.d-reel{ position:absolute; inset:0; display:grid; place-items:center; background:#24211f; }
.reel{ position:relative; height:86%; aspect-ratio:9/16; border-radius:16px; overflow:hidden; background:var(--asfalt); box-shadow:0 24px 50px -14px rgba(0,0,0,.7); }
.reel__bars{ position:absolute; z-index:3; top:8px; left:8px; right:8px; display:flex; gap:3px; }
.reel__bars i{ flex:1; height:2.5px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden; }
.reel__bars i::after{ content:""; display:block; height:100%; background:#fff; transform-origin:0 50%; transform:scaleX(0); animation:reelbar 8s linear infinite; }
.reel__bars i:nth-child(2)::after{ animation-name:reelbar2; } .reel__bars i:nth-child(3)::after{ animation-name:reelbar3; } .reel__bars i:nth-child(4)::after{ animation-name:reelbar4; }
@keyframes reelbar{ 0%{ transform:scaleX(0); } 25%,100%{ transform:scaleX(1); } }
@keyframes reelbar2{ 0%,25%{ transform:scaleX(0); } 50%,100%{ transform:scaleX(1); } }
@keyframes reelbar3{ 0%,50%{ transform:scaleX(0); } 75%,100%{ transform:scaleX(1); } }
@keyframes reelbar4{ 0%,75%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
.reel__f{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; opacity:0; animation:reelf 8s steps(1) infinite; padding:12px; font-family:var(--f-d); font-weight:900; text-transform:uppercase; line-height:.86; letter-spacing:-.02em; }
.reel__f:nth-of-type(2){ animation-delay:2s; } .reel__f:nth-of-type(3){ animation-delay:4s; } .reel__f:nth-of-type(4){ animation-delay:6s; }
@keyframes reelf{ 0%{ opacity:1; } 25%,100%{ opacity:0; } }
.reel__f span{ display:block; animation:reelpop 2s var(--spring) infinite; }
@keyframes reelpop{ 0%{ transform:scale(.4) rotate(-6deg); } 18%,100%{ transform:scale(1) rotate(0); } }
.reel__f--1{ background:var(--portokall); color:var(--asfalt); font-size:50px; font-variation-settings:"wdth" 60; }
.reel__f--2{ background:var(--asfalt); color:var(--verdhe); font-size:58px; font-variation-settings:"wdth" 150; }
.reel__f--3{ background:var(--roze); color:var(--asfalt); font-size:30px; font-variation-settings:"wdth" 80; }
.reel__f--4{ background:var(--kobalt); color:var(--gelqere); font-size:26px; font-variation-settings:"wdth" 100; }

/* --- demo: identity --- */
.d-id{ position:absolute; inset:0; background:var(--gelqere); overflow:hidden; }
.d-id svg{ position:absolute; inset:0; width:100%; height:100%; }
.d-id .grid line{ stroke:#d7cfbf; stroke-width:1; }
.d-id .draw{ fill:none; stroke:var(--asfalt); stroke-width:2.5; stroke-dasharray:420; stroke-dashoffset:420; animation:draw 7s var(--ease) infinite; }
.d-id .draw--2{ animation-delay:.4s; }
.d-id .fill{ opacity:0; animation:idfill 7s var(--ease) infinite; transform-origin:center; transform-box:fill-box; }
.d-id .letter{ opacity:0; animation:idletter 7s var(--out) infinite; font-family:var(--f-d); font-weight:900; font-variation-settings:"wdth" 120; }
.d-id__sw{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; gap:6px; }
.d-id__sw i{ flex:1; height:30px; border-radius:8px; transform:translateY(60px); animation:swatch 7s var(--out) infinite; }
.d-id__sw i:nth-child(1){ background:var(--portokall); } .d-id__sw i:nth-child(2){ background:var(--asfalt); animation-delay:.1s; } .d-id__sw i:nth-child(3){ background:var(--verdhe); animation-delay:.2s; } .d-id__sw i:nth-child(4){ background:var(--kobalt); animation-delay:.3s; } .d-id__sw i:nth-child(5){ background:var(--roze); animation-delay:.4s; }
@keyframes draw{ 0%{ stroke-dashoffset:420; } 30%,80%{ stroke-dashoffset:0; opacity:1; } 92%,100%{ stroke-dashoffset:0; opacity:0; } }
@keyframes idfill{ 0%,32%{ opacity:0; transform:scale(.8); } 42%,82%{ opacity:1; transform:scale(1); } 92%,100%{ opacity:0; } }
@keyframes idletter{ 0%,42%{ opacity:0; transform:translateY(8px); } 52%,82%{ opacity:1; transform:translateY(0); } 92%,100%{ opacity:0; } }
@keyframes swatch{ 0%,50%{ transform:translateY(60px); } 60%,82%{ transform:translateY(0); } 94%,100%{ transform:translateY(60px); } }

/* --- before / after --- */
.rc--ba .rc__stage{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:52px 12px 14px; background:radial-gradient(90% 70% at 50% 30%, #24211e, var(--s1)); }
.seg{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); width:min(100%, 330px); padding:3px; border-radius:99px; background:rgba(255,255,255,.08); flex:none; }
.seg__thumb{ position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 3); border-radius:99px; background:rgba(255,255,255,.16); transform:translateX(calc(var(--i, 0) * 100%)); transition:transform .45s var(--spring); }
.seg button{ position:relative; height:34px; font-size:13.5px; font-weight:650; color:var(--tx3); transition:color .25s; }
.seg button[aria-selected="true"]{ color:var(--tx); }
.ba-fit{ position:relative; flex:1; min-height:0; width:100%; }
.ba{
  position:absolute; left:50%; top:50%; width:300px; height:620px; margin:-310px 0 0 -150px;
  transform:scale(var(--k, .7)); transform-origin:50% 50%;
  border-radius:44px; background:#0b0b0b; padding:9px; box-shadow:0 0 0 2px #35312d, 0 40px 60px -30px rgba(0,0,0,.8);
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:ew-resize; --p:.5;
}
.ba__screen{ position:relative; height:100%; border-radius:36px; overflow:hidden; background:#fff; isolation:isolate; }
.ba__layer{ position:absolute; inset:0; overflow:hidden; }
.ba__layer--after{ clip-path:inset(0 0 0 calc(var(--p) * 100%)); }
.ba__handle{ position:absolute; z-index:5; top:9px; bottom:9px; left:calc(9px + 282px * var(--p)); width:0; pointer-events:none; }
.ba__handle::before{ content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:var(--or); }
.ba__knob{ position:absolute; top:50%; left:-27px; width:54px; height:38px; margin-top:-19px; border-radius:99px; background:var(--or); color:var(--asfalt); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.ba__knob svg{ width:26px; }
.ba__lbl{ position:absolute; z-index:4; top:48px; padding:5px 10px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; pointer-events:none; }
.ba__lbl--b{ left:16px; background:rgba(0,0,0,.7); color:#fff; }
.ba__lbl--a{ right:16px; background:var(--or); color:var(--asfalt); }
.ba.is-easing .ba__handle, .ba.is-easing .ba__layer--after{ transition:all .9s var(--ease); }
.ba__panel{ display:none; }
.ba__panel.is-on{ display:contents; }

/* the internet of 2014 */
.old{ position:absolute; inset:0; background:#fff; color:#000; font-family:"Times New Roman", Times, serif; padding:46px 12px 12px; text-align:center; font-size:12px; line-height:1.3; }
.old h4{ margin:0 0 6px; color:#0000ee; text-decoration:underline; font-size:20px; }
.old .shout{ color:#d00; font-family:"Comic Sans MS", "Comic Sans", cursive; font-weight:bold; font-size:14px; margin:8px 0; }
.old .pic{ height:110px; margin:10px 6px; background:#ddd; border:1px solid #999; display:grid; place-items:center; color:#666; font-family:Arial, sans-serif; font-size:11px; }
.old .pic::before{ content:"foto1.jpg"; }
.old p{ margin:6px 0; }
.old a{ color:#0000ee; text-decoration:underline; }
.old .cnt{ display:inline-block; margin-top:8px; padding:2px 6px; background:#000; color:#0f0; font-family:monospace; }
.old .marq{ overflow:hidden; white-space:nowrap; background:#ff0; color:#d00; font-weight:bold; margin:8px -12px; padding:2px 0; }
.old .marq span{ display:inline-block; animation:marq 7s linear infinite; padding-left:100%; }
@keyframes marq{ to{ transform:translateX(-100%); } }
.old .old__foot{ position:absolute; left:0; right:0; bottom:14px; color:#777; font-size:10px; }
.old--dark{ background:#3b3b3b; color:#9a9a9a; font-family:Arial, sans-serif; }
.old--dark h4{ color:#aaa; text-decoration:none; font-family:Georgia, serif; }
.old--blue{ background:linear-gradient(#e8f0ff, #fff); }
.old--blue h4{ font-family:Impact, sans-serif; text-decoration:none; color:#1d4fd8; letter-spacing:1px; text-shadow:2px 2px 0 #9cb7ff; font-size:22px; }

/* after designs */
.new{ position:absolute; inset:0; overflow:hidden; font-family:var(--f-t); }
.new__nav{ display:flex; justify-content:space-between; align-items:center; padding:42px 16px 0; }
.new__logo{ font-family:var(--f-d); font-weight:900; font-size:19px; letter-spacing:-.02em; }
.new__burger{ width:22px; height:10px; border-top:2.5px solid currentColor; border-bottom:2.5px solid currentColor; }
.new--tava{ background:var(--verdhe); color:var(--asfalt); }
.tava__h{ margin:14px 16px 0; font-family:var(--f-d); font-weight:900; font-variation-settings:"wdth" 58; font-size:46px; line-height:.86; text-transform:uppercase; }
.tava__h span{ color:var(--portokall); }
.tava__pie{ position:absolute; right:-26%; top:30%; width:78%; aspect-ratio:1; border-radius:50%;
  background:repeating-conic-gradient(from 10deg, transparent 0 58deg, rgba(120,60,0,.45) 58deg 60deg), repeating-radial-gradient(circle, #f2b33d 0 7px, #d98a1c 7px 9px, #f7c55a 9px 15px), #e9a02f;
  box-shadow:inset 0 0 0 6px #c46f12, inset 0 0 0 9px #8c4a0b, 0 20px 30px -8px rgba(0,0,0,.35); animation:spin 26s linear infinite; }
.tava__timer{ position:absolute; left:16px; top:48%; background:var(--asfalt); color:var(--gelqere); border-radius:12px; padding:9px 12px; }
.tava__timer small{ display:block; font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--beton); }
.tava__timer b{ font-size:22px; font-weight:700; color:var(--verdhe); font-variant-numeric:tabular-nums; }
.tava__menu{ position:absolute; left:0; right:0; bottom:0; background:var(--gelqere); border-radius:18px 18px 0 0; padding:14px 16px 16px; }
.tava__row{ display:flex; align-items:baseline; gap:6px; font-size:12.5px; font-weight:600; padding:4px 0; }
.tava__row i{ flex:1; border-bottom:1.5px dotted rgba(21,20,19,.35); transform:translateY(-3px); }
.tava__row b{ font-size:12px; font-variant-numeric:tabular-nums; }
.tava__btn{ margin-top:10px; height:42px; border-radius:99px; background:var(--portokall); display:grid; place-items:center; font-weight:700; font-size:14.5px; }
.new--brisk{ background:#0f0f10; color:#f1f1f1; }
.new--brisk .new__logo{ font-variation-settings:"wdth" 150; letter-spacing:.06em; font-size:17px; }
.brisk__pole{ position:absolute; right:18px; top:88px; width:26px; height:120px; border-radius:99px; overflow:hidden; box-shadow:0 0 0 3px #c9c9c9, 0 0 0 5px #555;
  background:repeating-linear-gradient(-45deg, #e8361f 0 10px, #fff 10px 20px, #2340ff 20px 30px, #fff 30px 40px); background-size:100% 56.57px; animation:pole 1.2s linear infinite; }
@keyframes pole{ to{ background-position:0 56.57px; } }
.brisk__h{ margin:30px 16px 0; max-width:70%; font-family:var(--f-d); font-weight:900; font-variation-settings:"wdth" 50; font-size:52px; line-height:.84; text-transform:uppercase; }
.brisk__h span{ -webkit-text-stroke:1.5px #f1f1f1; color:transparent; }
.brisk__p{ margin:12px 16px 0; font-size:12.5px; color:#aaa; max-width:24ch; }
.brisk__slots{ position:absolute; left:12px; right:12px; bottom:70px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.brisk__slots i{ font-style:normal; height:34px; display:grid; place-items:center; border-radius:8px; border:1.5px solid #333; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.brisk__slots i.x{ color:#555; text-decoration:line-through; }
.brisk__slots i.on{ background:#f1f1f1; color:#0f0f10; border-color:#f1f1f1; }
.brisk__btn{ position:absolute; left:12px; right:12px; bottom:16px; height:44px; border-radius:10px; background:#e8361f; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; }
.new--smalt{ background:#E3F4EC; color:#0e3b2c; }
.new--smalt .new__logo{ font-variation-settings:"wdth" 80; font-weight:700; letter-spacing:.02em; }
.smalt__smile{ position:absolute; left:50%; top:20%; width:86%; margin-left:-43%; }
.smalt__smile path{ fill:none; stroke:#0e3b2c; stroke-width:9; stroke-linecap:round; stroke-dasharray:300; stroke-dashoffset:300; animation:smile 5s var(--ease) infinite; }
.smalt__smile circle{ fill:#ff9ec4; animation:blush 5s infinite; }
@keyframes smile{ 0%{ stroke-dashoffset:300; } 30%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-300; } }
@keyframes blush{ 0%,25%{ opacity:0; } 40%,85%{ opacity:1; } 100%{ opacity:0; } }
.smalt__chip{ position:absolute; left:16px; top:42%; background:#0e3b2c; color:#E3F4EC; font-size:10px; font-weight:700; padding:6px 10px; border-radius:99px; letter-spacing:.05em; }
.smalt__h{ position:absolute; left:16px; right:16px; top:50%; margin:0; font-family:var(--f-d); font-weight:800; font-variation-settings:"wdth" 75; font-size:34px; line-height:.95; }
.smalt__h em{ font-style:normal; color:#1E8C5A; }
.smalt__btn{ position:absolute; left:12px; right:12px; bottom:16px; height:46px; border-radius:99px; background:#0e3b2c; color:#E3F4EC; display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 18px; font-weight:700; font-size:14px; }
.smalt__btn i{ width:34px; height:34px; border-radius:50%; background:#7ee0b2; display:grid; place-items:center; color:#0e3b2c; font-style:normal; }

/* =========================================================
   VIEW 3 — ÇMIMET (prices)
   ========================================================= */
.pr{ max-width:640px; margin:0 auto; padding:calc(100px + var(--st)) 14px 0; }
.pr__head{ padding:0 8px; }
.pr__head .sub{ margin:14px 0 0; }
.plist{ list-style:none; margin:30px 0 0; padding:0; border-radius:26px; background:var(--s1); overflow:hidden; }
.plist + .plist{ margin-top:12px; }
.pi{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; padding:15px 14px 15px 20px; border-top:1px solid var(--line); transition:background .3s; }
.pi:first-child{ border-top:0; }
.pi.is-on{ background:rgba(255,90,31,.07); }
.pi__txt b{ display:block; font-size:16.5px; font-weight:650; letter-spacing:-.005em; }
.pi__txt span{ display:block; font-size:13.5px; color:var(--tx3); margin-top:1px; }
.pi__price{ font-family:var(--f-d); font-weight:800; font-size:20px; line-height:1.05; font-variant-numeric:tabular-nums; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.pi__price small{ font-family:var(--f-t); font-weight:500; font-size:12px; color:var(--tx3); }
.tog{ width:42px; height:42px; border-radius:50%; background:var(--s3); display:grid; place-items:center; transition:background .25s, color .25s, transform .25s var(--out); }
.tog svg{ width:18px; height:18px; transition:transform .35s var(--spring); }
.tog[aria-pressed="true"]{ background:var(--or); color:#140A05; }
.tog[aria-pressed="true"] svg{ transform:rotate(45deg); }
.tog:active{ transform:scale(.9); }
.qty{ display:flex; align-items:center; height:42px; padding:3px; border-radius:99px; background:var(--s3); transition:background .25s, color .25s; }
.qty button{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:20px; line-height:1; transition:background .2s; }
.qty button:active{ background:rgba(255,255,255,.14); }
.qty output{ min-width:22px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.pi.is-on .qty{ background:var(--or); color:#140A05; }

.sum{
  position:sticky; z-index:5; bottom:calc(var(--dock-b) + var(--dock-h) + 12px); margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 12px 22px; border-radius:26px;
}
.sum__k{ display:block; font-size:12px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); }
.sum__v{ display:block; font-family:var(--f-d); font-weight:900; font-size:30px; line-height:1.05; font-variant-numeric:tabular-nums; }
.sum__m{ display:block; font-size:13px; color:var(--tx2); min-height:1em; }
.sum .btn{ height:50px; padding:0 20px; }
.sum .btn.is-idle{ background:rgba(255,255,255,.1); color:var(--tx); }
.pr__note{ margin:14px 8px 0; font-size:13.5px; color:var(--tx3); }

/* launch offer: the base price sits struck above the offer price (html.no-launch hides it) */
.rc__price s, .pi__price s, .sum__k s{ font-family:var(--f-t); font-weight:500; font-size:13px; line-height:1; letter-spacing:0; text-transform:none; color:var(--tx3); text-decoration-thickness:1.5px; text-decoration-color:rgba(255,90,31,.85); }
.sum__k s{ margin-left:8px; }
.launch{ display:flex; align-items:center; gap:14px; margin:24px 0 0; padding:10px 18px 10px 10px; border-radius:24px; background:rgba(255,90,31,.09); box-shadow:inset 0 0 0 1px rgba(255,90,31,.22); }
.launch__off{ flex:none; height:50px; padding:0 15px; border-radius:99px; background:var(--or); color:#140A05; display:grid; place-items:center; font-family:var(--f-d); font-weight:900; font-size:21px; font-variation-settings:"wdth" 88; font-variant-numeric:tabular-nums; }
.launch div b{ display:block; font-size:16px; font-weight:700; }
.launch div span{ display:block; font-size:13.5px; color:var(--tx2); }
.no-launch [data-was], .no-launch .only-launch, .no-launch #sumw{ display:none; }

.steps{ margin:64px 0 0; padding:0 8px; }
.steps h2{ margin:0 0 18px; font-family:var(--f-d); font-weight:850; font-variation-settings:"wdth" 82; font-size:30px; letter-spacing:-.015em; }
.steps ol{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.steps li{ display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:center; padding:14px 16px 14px 14px; border-radius:20px; background:var(--s1); }
.steps li i{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--s3); font-style:normal; font-weight:700; font-size:14px; }
.steps li b{ display:block; font-weight:650; }
.steps li span{ display:block; color:var(--tx3); font-size:14px; }
.steps li.hot i{ background:var(--or); color:#140A05; }
.view--prices .mini{ margin-top:64px; padding-left:22px; padding-right:22px; }

/* =========================================================
   DOCK — floating glass tab bar + WhatsApp button
   ========================================================= */
.dock{ position:fixed; z-index:40; left:50%; bottom:var(--dock-b); transform:translateX(-50%); display:flex; align-items:center; gap:10px; }
.tabs{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); width:min(calc(100vw - 110px), 292px); height:var(--dock-h); padding:5px; border-radius:99px; }
.tabs__pill{ position:absolute; top:5px; bottom:5px; left:5px; width:calc((100% - 10px) / 3); border-radius:99px; background:rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transform:translateX(calc(var(--i, 0) * 100%)); transition:transform .55s var(--spring); }
.no-anim .tabs__pill{ transition:none; }
.tab{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:99px; font-size:11px; font-weight:650; letter-spacing:.01em; color:var(--tx3); transition:color .3s; }
.tab svg{ width:23px; height:23px; }
.tab[aria-current="page"]{ color:var(--tx); }
.ic-dot{ transition:fill .3s; }
.tab[aria-current="page"] .ic-dot{ fill:var(--or); }
.badge{ position:absolute; top:4px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 5px; border-radius:99px; background:var(--or); color:#140A05; font-size:10.5px; font-weight:800; display:grid; place-items:center; transform:scale(0); transition:transform .35s var(--spring); }
.badge.is-on{ transform:scale(1); }
.badge.pop{ animation:pop .45s var(--spring); }
@keyframes pop{ 40%{ transform:scale(1.35); } }
.chat{ width:var(--dock-h); height:var(--dock-h); border-radius:50%; background:var(--or); color:#140A05; display:grid; place-items:center; box-shadow:0 14px 34px rgba(255,90,31,.32), inset 0 1px 0 rgba(255,255,255,.3); transition:transform .25s var(--out); flex:none; }
.chat svg{ width:27px; height:27px; }
.chat:active{ transform:scale(.92); }

.toast{ position:fixed; z-index:45; left:50%; top:calc(66px + var(--st)); transform:translate(-50%, -10px); opacity:0; pointer-events:none;
  height:40px; padding:0 16px; border-radius:99px; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; white-space:nowrap; transition:opacity .3s, transform .4s var(--out); }
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }
.toast b{ color:var(--or); }

/* =========================================================
   REDUCED MOTION — loops rest on their best still frame
   (?motion=1 overrides, for reviewing)
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-ok) *, html:not(.motion-ok) *::before, html:not(.motion-ok) *::after{ animation:none!important; transition-duration:.001ms!important; }
  html:not(.motion-ok).js .rv{ opacity:1; transform:none; }
  html:not(.motion-ok) .d-exp__sub span:first-child, html:not(.motion-ok) .reel__f--1,
  html:not(.motion-ok) .d-id .fill, html:not(.motion-ok) .d-id .letter,
  html:not(.motion-ok) .post--hero .post__img span, html:not(.motion-ok) .smalt__smile circle{ opacity:1; }
  html:not(.motion-ok) .d-id .draw, html:not(.motion-ok) .smalt__smile path{ stroke-dashoffset:0; }
  html:not(.motion-ok) .d-id__sw i{ transform:none; }
  html:not(.motion-ok) .feed__col{ transform:translateY(var(--stop, -1100px)); }
  html:not(.motion-ok) .d-motion__word{ font-variation-settings:"wdth" 130, "wght" 850; }
  html:not(.motion-ok) .d-exp__track i{ transform:scaleX(.35); }
  html:not(.motion-ok) .reel__bars i:first-child::after{ transform:scaleX(.6); }
  html:not(.motion-ok) .d-exp__bg{ background:var(--verdhe); }
}