/* ==========================================================================
   SUMMIT CITY RP — STORE THEME
   --------------------------------------------------------------------------
   Standalone theme in the style of premium FiveM Tebex templates: near-black
   neutrals, one vivid accent, contour-line texture, pill navigation, heavy
   geometric type.

   The accent is swappable: set `theme` in config.js to one of the presets
   below (ember, violet, ice, gold, lime). Each preset is three variables,
   so adding your own is a copy-paste of one block.
   ========================================================================== */

:root{
  --bg:      #0a0a0d;
  --bg-2:    #0f0f13;
  --card:    #141419;
  --card-2:  #1b1b22;
  --line:    rgba(255,255,255,.07);
  --line-2:  rgba(255,255,255,.13);
  --text:    #f4f4f6;
  --muted:   #a1a1ad;
  --dim:     #6c6c78;
  --ok:      #34d399;
  --bad:     #f87171;

  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 40px);
  --r: 16px;
  --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Default accent (ember) — overridden by [data-accent] below */
  --a1: #ff6a3d;
  --a2: #ff2d6f;
  --a-rgb: 255, 77, 90;
}

/* ── Accent presets ─────────────────────────────────────────────────────── */
[data-accent="ember"]  { --a1:#ff6a3d; --a2:#ff2d6f; --a-rgb:255,77,90; }
[data-accent="violet"] { --a1:#8b5cf6; --a2:#e04dff; --a-rgb:170,90,250; }
[data-accent="ice"]    { --a1:#22d3ee; --a2:#3b82f6; --a-rgb:45,170,240; }
[data-accent="gold"]   { --a1:#fcd34d; --a2:#f97316; --a-rgb:250,170,60; }
[data-accent="lime"]   { --a1:#bef264; --a2:#10b981; --a-rgb:120,220,110; }

:root{
  --accent: linear-gradient(120deg, var(--a1), var(--a2));
  --a-soft: rgba(var(--a-rgb), .14);
  --a-line: rgba(var(--a-rgb), .45);
}


/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--a1); outline-offset:3px; border-radius:6px; }

svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
svg.fill{ fill:currentColor; stroke:none; }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip{ position:fixed; top:-60px; left:16px; z-index:300; padding:10px 16px; border-radius:0 0 10px 10px; background:var(--a2); color:#fff; font-weight:700; }
.skip:focus{ top:0; }

.grad{
  background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px rgba(52,211,153,.18), 0 0 12px var(--ok);
}
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}


/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px; border-radius:12px;
  font-weight:700; font-size:14.5px; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .2s;
}
.btn--lg{ padding:14px 24px; font-size:15.5px; border-radius:14px; }
.btn--wide{ width:100%; }
.btn--accent{
  background:var(--accent); color:#fff;
  box-shadow:0 10px 30px -10px rgba(var(--a-rgb),.9), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--accent:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(var(--a-rgb),1), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--light{ background:#f4f4f6; color:#0a0a0d; }
.btn--light:hover{ background:#fff; transform:translateY(-1px); }
.btn--dark{ background:var(--card-2); border:1px solid var(--line-2); color:var(--text); }
.btn--dark:hover{ border-color:var(--a-line); background:#202029; transform:translateY(-2px); }
.btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; }

.iconbtn{
  position:relative; display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:var(--card); border:1px solid var(--line);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.iconbtn:hover{ border-color:var(--line-2); background:var(--card-2); }
.iconbtn svg{ width:19px; height:19px; }
.iconbtn__count{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 5px; border-radius:99px;
  display:grid; place-items:center; font-size:11px; font-weight:800;
  background:var(--accent); color:#fff; box-shadow:0 0 0 3px var(--bg), 0 0 14px rgba(var(--a-rgb),.8);
}
.iconbtn.is-bump{ animation:bump .45s var(--ease-out); }
@keyframes bump{ 40%{ transform:scale(1.15); } }

.xbtn{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:rgba(10,10,13,.7); border:1px solid var(--line-2);
  transition:border-color .2s;
}
.xbtn:hover{ border-color:var(--a-line); }


/* ── Ticker ─────────────────────────────────────────────────────────────── */
.ticker{
  overflow:hidden; background:var(--accent); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.ticker__track{ display:flex; width:max-content; animation:ticker 38s linear infinite; }
.ticker__track span{ padding:8px 28px; white-space:nowrap; display:inline-flex; align-items:center; gap:28px; }
.ticker__track span::after{ content:'✦'; opacity:.7; }
@keyframes ticker{ to{ transform:translateX(-50%); } }


/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,13,.72);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.hdr__inner{ display:flex; align-items:center; gap:20px; height:72px; }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ width:40px; height:40px; object-fit:contain; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.brand__text small{ font-size:12px; font-weight:600; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; }

.pillnav{
  display:flex; gap:4px; margin-inline:auto; padding:5px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:14px;
}
.pillnav a{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--muted);
  transition:color .2s, background .2s;
}
.pillnav a svg{ width:16px; height:16px; }
.pillnav a:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.pillnav a.is-active{ color:var(--text); background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line-2); }
.pillnav a.is-active svg{ color:var(--a1); }

.hdr__actions{ display:flex; align-items:center; gap:10px; flex:none; }


/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px); }

.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  opacity:.22; filter:saturate(.7);
  mask-image:linear-gradient(180deg, #000 20%, transparent 95%);
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 95%);
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--bg) 8%, rgba(10,10,13,.6) 55%, rgba(10,10,13,.3)),
             linear-gradient(0deg, var(--bg), transparent 40%);
}
/* Topographic contour lines — two offset ring fields, masked to fade out */
.hero__contours{
  position:absolute; inset:-10%; z-index:1; opacity:.55;
  background:
    repeating-radial-gradient(ellipse 60% 48% at 78% 38%, transparent 0 26px, rgba(var(--a-rgb),.16) 26px 27.5px),
    repeating-radial-gradient(ellipse 40% 55% at 10% 90%, transparent 0 30px, rgba(255,255,255,.05) 30px 31px);
  mask-image:radial-gradient(60% 60% at 70% 40%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(60% 60% at 70% 40%, #000, transparent 75%);
}
.hero__glow{
  position:absolute; z-index:1; width:720px; height:720px; right:-120px; top:-220px;
  background:radial-gradient(closest-side, rgba(var(--a-rgb),.30), transparent);
}

.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center;
}

.chip-lead{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 12px; border-radius:99px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-2);
  font-size:13px; font-weight:600; color:var(--muted);
}

.hero__title{
  margin-top:22px;
  font-size:clamp(44px, 7vw, 84px); font-weight:800; line-height:1; letter-spacing:-.04em;
}
.hero__title span{ display:block; width:fit-content; }
/* Background-clipped text only paints inside the element's own box, so at a
   tight line-height the descenders (the g in "running") get sliced off.
   Padding grows the paint box; the matching negative margin keeps the layout
   exactly where it was. The right padding does the same for the last glyph,
   which negative letter-spacing pushes outside the box. */
.hero__title span:first-child{
  padding:0 .06em .1em 0; margin-bottom:-.1em;
  background:linear-gradient(180deg, #fff 30%, #c4c4cf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title .grad{
  position:relative;
  padding:0 .08em .16em 0; margin-bottom:-.16em;
}
/* Soft accent glow behind the gradient word — a separate layer, since a
   text-shadow would draw through the transparent glyphs and muddy them. */
.hero__title .grad::after{
  content:''; position:absolute; z-index:-1; left:-4%; right:-4%; top:20%; bottom:10%;
  background:radial-gradient(closest-side, rgba(var(--a-rgb),.28), transparent);
  filter:blur(18px);
  pointer-events:none;
}
.hero__copy{ position:relative; z-index:0; }
.hero__sub{ margin-top:22px; max-width:520px; font-size:clamp(16px,1.6vw,18px); color:var(--muted); }

.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,44px); margin-top:40px; }
.stats div{ position:relative; }
.stats div + div::before{
  content:''; position:absolute; left:calc(clamp(20px,4vw,44px) / -2); top:6px; bottom:6px; width:1px; background:var(--line-2);
}
.stats dt{ font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.stats dd{ margin-top:4px; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }

/* Collage */
.collage{ position:relative; aspect-ratio:1.05; max-width:600px; justify-self:end; width:100%; }
.shot{
  position:absolute; overflow:hidden; border-radius:18px;
  border:1px solid var(--line-2); background:var(--card);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 6px rgba(255,255,255,.02);
  transition:transform .8s var(--ease-out);
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); }
.shot--a{ width:78%; aspect-ratio:16/10; left:0; top:4%; transform:rotate(-4deg); z-index:2; }
.shot--b{ width:58%; aspect-ratio:16/11; right:0; top:34%; transform:rotate(5deg); z-index:3; box-shadow:0 40px 80px -30px rgba(0,0,0,.95), 0 0 60px -20px rgba(var(--a-rgb),.55); border-color:var(--a-line); }
.shot--c{ width:50%; aspect-ratio:16/10; left:8%; bottom:0; transform:rotate(-2deg); z-index:1; }
.collage:hover .shot--a{ transform:rotate(-5deg) translateY(-6px); }
.collage:hover .shot--b{ transform:rotate(6deg) translateY(-10px); }
.collage:hover .shot--c{ transform:rotate(-3deg) translateY(-4px); }
.collage__tag{
  position:absolute; z-index:4; right:6%; top:6%;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:12px;
  background:rgba(15,15,19,.85); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); font-size:13px; font-weight:700;
}

/* Perks row */
.perks{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:14px;
  margin-top:clamp(48px,6vw,80px); position:relative; z-index:2;
}
.perks li{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px; border-radius:var(--r);
  background:rgba(20,20,25,.88); border:1px solid var(--line);
}
.perks__ico{
  flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--a-soft); color:var(--a1); border:1px solid rgba(var(--a-rgb),.28);
}
.perks strong{ display:block; font-size:15px; font-weight:700; }
.perks p{ margin-top:2px; font-size:13.5px; line-height:1.5; color:var(--muted); }


/* ── Banner ─────────────────────────────────────────────────────────────── */
.banner{ font-size:14px; line-height:1.55; border-block:1px solid var(--line); }
.banner .wrap{ padding-block:13px; }
.banner code{ font-size:.9em; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.08); }
.banner--demo{ background:repeating-linear-gradient(135deg, rgba(250,204,21,.07) 0 14px, rgba(250,204,21,.03) 14px 28px); color:#fde68a; border-color:rgba(250,204,21,.25); }
.banner--ok{ background:rgba(52,211,153,.08); color:#bbf7d0; border-color:rgba(52,211,153,.3); }
.banner--info{ background:var(--a-soft); }


/* ── Shop ───────────────────────────────────────────────────────────────── */
.shop{
  position:relative; padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px);
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.012) 22px 23px),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.shop__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.shop__title, .how__title{
  margin-top:10px; font-size:clamp(32px,4.6vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.05;
}

.goal{
  width:min(100%, 340px); padding:14px 16px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--line);
}
.goal__head{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:700; }
.goal__head strong{ color:var(--a1); }
.goal__bar{ height:8px; margin:10px 0 8px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.goal__bar span{ display:block; height:100%; width:0; border-radius:inherit; background:var(--accent); box-shadow:0 0 14px rgba(var(--a-rgb),.8); transition:width 1.4s var(--ease-out); }
.goal small{ font-size:12.5px; color:var(--dim); font-variant-numeric:tabular-nums; }

.toolbar{
  position:sticky; top:72px; z-index:40;
  display:flex; align-items:center; gap:14px;
  margin-top:28px; padding:10px 0;
  background:linear-gradient(180deg, var(--bg) 70%, rgba(10,10,13,0));
}
.cats{ display:flex; gap:8px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; padding:2px; }
.cats::-webkit-scrollbar{ display:none; }
.cat{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px 9px 16px; border-radius:99px;
  background:var(--card); border:1px solid var(--line);
  font-size:14px; font-weight:600; color:var(--muted);
  transition:color .2s, border-color .2s, background .2s;
}
.cat:hover{ color:var(--text); border-color:var(--line-2); }
.cat__n{
  min-width:24px; padding:1px 7px; border-radius:99px; text-align:center;
  font-size:12px; font-weight:700; background:rgba(255,255,255,.07); color:var(--muted);
}
.cat[aria-selected="true"]{ color:#fff; background:var(--accent); border-color:transparent; box-shadow:0 8px 24px -10px rgba(var(--a-rgb),.9); }
.cat[aria-selected="true"] .cat__n{ background:rgba(0,0,0,.22); color:#fff; }

.search{ position:relative; flex:0 1 280px; display:flex; align-items:center; }
.search svg{ position:absolute; left:14px; width:17px; height:17px; color:var(--dim); pointer-events:none; }
.search input{
  width:100%; padding:11px 14px 11px 42px; border-radius:12px;
  font:inherit; font-size:14.5px; color:var(--text);
  background:var(--card); border:1px solid var(--line);
  transition:border-color .2s, box-shadow .2s;
}
.search input::placeholder{ color:var(--dim); }
.search input:focus{ outline:none; border-color:var(--a-line); box-shadow:0 0 0 4px var(--a-soft); }

.catdesc{ margin-top:10px; max-width:700px; color:var(--muted); }

.grid{
  display:grid; gap:clamp(14px,1.8vw,22px); margin-top:22px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}


/* ── Package card ───────────────────────────────────────────────────────── */
.card{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line);
  transition:transform .35s var(--ease-out), border-color .3s, box-shadow .35s;
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }
.card--featured{
  border-color:var(--a-line);
  box-shadow:0 0 0 1px rgba(var(--a-rgb),.25), 0 24px 60px -30px rgba(var(--a-rgb),.7);
}
.card--featured:hover{ border-color:rgba(var(--a-rgb),.7); }
.card__ribbon{
  position:absolute; z-index:3; top:-11px; left:18px;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:8px;
  background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 8px 20px -8px rgba(var(--a-rgb),.9);
}
.card__ribbon svg{ width:12px; height:12px; fill:currentColor; stroke:none; }

.card--skel{ min-height:420px; background:linear-gradient(100deg, var(--card) 30%, var(--card-2) 50%, var(--card) 70%); background-size:300% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ to{ background-position:-150% 0; } }

.card__media{
  position:relative; display:block; width:100%; margin:0;
  padding:10px 10px 0;
}
.card__media .ph, .card__media img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px;
  transition:transform .6s var(--ease-out);
}
.card__media img{ display:block; }
.card__media > .card__frame{ display:block; overflow:hidden; border-radius:14px; }
.card:hover .card__media img, .card:hover .card__media .ph{ transform:scale(1.04); }
.card__sale{
  position:absolute; z-index:2; top:20px; right:20px;
  padding:4px 9px; border-radius:8px; font-size:12px; font-weight:800;
  background:var(--bad); color:#fff; box-shadow:0 6px 16px -6px rgba(248,113,113,.9);
}

.card__body{ display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
.card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.card__name{ font-size:19px; font-weight:800; letter-spacing:-.015em; line-height:1.25; }
.card__name button{ text-align:left; }
.card__name button:hover{ color:var(--a1); }
.card__price{ text-align:right; flex:none; line-height:1.15; }
.card__price strong{ display:block; font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--a1); font-variant-numeric:tabular-nums; }
.card__price s{ font-size:13px; color:var(--dim); }
.card__price small{ display:block; font-size:11.5px; font-weight:600; color:var(--dim); }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag{
  padding:3px 9px; border-radius:7px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted);
}
.tag--a{ background:var(--a-soft); border-color:rgba(var(--a-rgb),.3); color:var(--a1); }

.card__text{ margin-top:12px; font-size:14px; line-height:1.55; color:var(--muted); }
.card__perks{ margin-top:12px; display:grid; gap:7px; font-size:13.5px; }
.card__perks li{ display:flex; gap:9px; align-items:flex-start; }
.card__perks svg{ width:16px; height:16px; margin-top:2px; color:var(--a1); stroke-width:2.4; }

.card__foot{ display:flex; gap:8px; margin-top:auto; padding-top:18px; }
.card__add{ flex:1; }
.card__add.is-in{ background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.4); color:#a7f3d0; }
.card__info{ width:46px; flex:none; padding:0; }

/* Placeholder art when a package has no image in Tebex */
.ph{
  position:relative; display:grid; place-items:center; overflow:hidden;
  background:
    repeating-radial-gradient(ellipse 70% 60% at 80% 20%, transparent 0 14px, rgba(255,255,255,.06) 14px 15px),
    radial-gradient(90% 90% at 80% 10%, rgba(var(--a-rgb),.55), transparent 60%),
    linear-gradient(160deg, #1d1d25, #101014);
}
.ph span{
  position:relative; font-size:clamp(34px,4vw,46px); font-weight:800; letter-spacing:-.03em; color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.6);
}
.ph img.ph__logo{ position:absolute; left:14px; bottom:12px; width:30px; height:30px; aspect-ratio:auto; border-radius:0; opacity:.9; object-fit:contain; }

.empty{ grid-column:1/-1; padding:64px 0; text-align:center; color:var(--muted); }
.empty a{ color:var(--a1); text-decoration:underline; }


/* ── How it works ───────────────────────────────────────────────────────── */
.how{ padding:clamp(64px,8vw,110px) 0; border-top:1px solid var(--line); }
.steps{
  display:grid; gap:14px; margin-top:32px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.steps li{
  position:relative; overflow:hidden; padding:24px 22px;
  border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line);
}
.steps li::after{
  content:''; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--a-rgb),.18), transparent);
}
.steps__n{ font-size:13px; font-weight:800; letter-spacing:.14em; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.steps strong{ display:block; margin-top:14px; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.steps p{ margin-top:6px; font-size:14px; line-height:1.55; color:var(--muted); }


/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding:40px 0 calc(40px + env(safe-area-inset-bottom)); }
.foot__inner{ display:grid; grid-template-columns:auto 1fr; gap:20px 40px; align-items:center; }
.foot__brand{ display:flex; align-items:center; gap:12px; }
.foot__brand img{ width:44px; height:44px; object-fit:contain; }
.foot__brand strong{ display:block; font-weight:800; }
.foot__brand small{ color:var(--dim); font-size:13px; }
.foot__links{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 22px; font-size:14px; color:var(--muted); }
.foot__links a:hover{ color:var(--text); }
.foot__legal{ grid-column:1/-1; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.7; color:var(--dim); }


/* ── Product dialog ─────────────────────────────────────────────────────── */
.dlg{
  width:min(820px, calc(100% - 32px)); max-height:calc(100dvh - 40px);
  padding:0; border:1px solid var(--line-2); border-radius:24px;
  background:var(--card); color:var(--text); overflow:auto;
  box-shadow:0 50px 100px -30px rgba(0,0,0,1), 0 0 80px -40px rgba(var(--a-rgb),.8);
}
.dlg::backdrop{ background:rgba(5,5,7,.78); backdrop-filter:blur(6px); }
.dlg[open]{ animation:pop .35s var(--ease-out); }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.dlg .xbtn{ position:absolute; top:14px; right:14px; z-index:2; }
.dlg__media{ padding:12px 12px 0; }
.dlg__media img, .dlg__media .ph{ width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:16px; }
.dlg__body{ padding:22px clamp(20px,3.5vw,32px) clamp(22px,3.5vw,30px); }
.dlg__name{ margin-top:8px; font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.dlg__price{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.dlg__price strong{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--a1); }
.dlg__price s{ color:var(--dim); }
.dlg__price small{ color:var(--dim); font-weight:600; }
.dlg__actions{
  display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
}

.rich{ margin-top:18px; color:var(--muted); font-size:15.5px; }
.rich > * + *{ margin-top:12px; }
.rich h2, .rich h3, .rich h4{ color:var(--text); letter-spacing:-.01em; }
.rich ul{ display:grid; gap:8px; }
.rich ul li{ position:relative; padding-left:26px; color:var(--text); }
.rich ul li::before{
  content:''; position:absolute; left:3px; top:.45em; width:11px; height:6px;
  border-left:2.4px solid var(--a1); border-bottom:2.4px solid var(--a1); transform:rotate(-45deg);
}
.rich ol{ padding-left:20px; list-style:decimal; }
.rich strong, .rich b{ color:var(--text); }
.rich a{ color:var(--a1); text-decoration:underline; }
.rich img{ border-radius:12px; }

.qty{ display:inline-flex; align-items:center; border-radius:12px; overflow:hidden; background:var(--bg); border:1px solid var(--line-2); }
.qty button{ width:42px; height:48px; font-size:20px; color:var(--muted); }
.qty button:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.qty input, .qty span{ width:42px; text-align:center; font:inherit; font-weight:700; color:var(--text); background:none; border:0; -moz-appearance:textfield; appearance:textfield; font-variant-numeric:tabular-nums; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.qty--sm button{ width:32px; height:32px; font-size:16px; }
.qty--sm span{ width:28px; font-size:14px; }


/* ── Basket drawer ──────────────────────────────────────────────────────── */
.scrim{ position:fixed; inset:0; z-index:150; background:rgba(5,5,7,.65); backdrop-filter:blur(4px); }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:160; width:min(440px, 100%);
  display:flex; flex-direction:column;
  background:var(--bg-2); border-left:1px solid var(--line-2);
  box-shadow:-40px 0 90px -30px rgba(0,0,0,1);
  transform:translateX(102%); visibility:hidden;
  transition:transform .45s var(--ease-out), visibility 0s .45s;
}
.drawer.is-open{ transform:none; visibility:visible; transition:transform .45s var(--ease-out); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.drawer__head h2{ font-size:21px; font-weight:800; letter-spacing:-.02em; }
.drawer__head small{ font-size:13px; color:var(--dim); }
.drawer__items{ flex:1; overflow:auto; padding:6px 22px; }
.drawer__empty{ padding:70px 0; text-align:center; color:var(--muted); }
.drawer__empty .btn{ margin-top:18px; }

.line{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.line__media{ flex:none; width:78px; }
.line__media img, .line__media .ph{ width:78px; height:56px; aspect-ratio:auto; border-radius:10px; object-fit:cover; }
.line__media .ph span{ font-size:17px; }
.line__media .ph__logo{ display:none; }
.line__body{ flex:1; min-width:0; }
.line__row{ display:flex; justify-content:space-between; gap:10px; }
.line__name{ font-weight:700; line-height:1.3; }
.line__price{ font-weight:800; color:var(--a1); font-variant-numeric:tabular-nums; }
.line__sub{ font-size:12.5px; color:var(--dim); }
.line__ctrl{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.line__remove{ font-size:13px; color:var(--dim); }
.line__remove:hover{ color:var(--bad); }

.drawer__foot{ padding:18px 22px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg); }
.codes summary{ cursor:pointer; font-size:14px; font-weight:600; color:var(--muted); }
.codes summary:hover{ color:var(--text); }
.codes label{ display:block; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--muted); }
.codes input{
  display:block; width:100%; margin-top:5px; padding:11px 12px; border-radius:11px;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--text); text-transform:uppercase; letter-spacing:.05em;
  background:var(--card); border:1px solid var(--line);
}
.codes input::placeholder{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--dim); }
.codes input:focus{ outline:none; border-color:var(--a-line); box-shadow:0 0 0 4px var(--a-soft); }
.codes input[aria-invalid="true"]{ border-color:var(--bad); box-shadow:0 0 0 4px rgba(248,113,113,.15); }
.codes__note{ margin-top:8px; font-size:12px; color:var(--dim); }

.total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; }
.total span{ color:var(--muted); font-weight:600; }
.total strong{ font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.note{ margin:2px 0 14px; font-size:12.5px; color:var(--dim); }
.note--c{ display:flex; justify-content:center; align-items:center; gap:6px; margin:12px 0 0; }
.note--c svg{ width:14px; height:14px; }
.error{ margin-bottom:12px; padding:10px 12px; border-radius:11px; font-size:13.5px; background:rgba(248,113,113,.09); border:1px solid rgba(248,113,113,.35); color:#fecaca; }
#checkoutBtn.is-busy svg{ animation:nudge .8s var(--ease) infinite alternate; }
@keyframes nudge{ to{ transform:translateX(4px); } }


/* ── Accent previewer ───────────────────────────────────────────────────── */
.themer{
  position:fixed; left:16px; bottom:16px; z-index:120;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px 8px 14px; border-radius:14px;
  background:rgba(20,20,25,.92); border:1px solid var(--line-2); backdrop-filter:blur(10px);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  box-shadow:0 20px 40px -20px rgba(0,0,0,1);
}
.themer__swatches{ display:flex; gap:6px; }
.themer button{
  width:24px; height:24px; border-radius:8px; border:2px solid transparent;
  background:linear-gradient(120deg, var(--s1), var(--s2));
  transition:transform .2s;
}
.themer button:hover{ transform:scale(1.12); }
.themer button[aria-pressed="true"]{ border-color:#fff; }


/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:200; transform:translate(-50%, 80px);
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px;
  background:var(--card-2); border:1px solid var(--line-2); font-size:14px; font-weight:600;
  box-shadow:0 24px 50px -20px rgba(0,0,0,1);
  opacity:0; pointer-events:none;
  transition:transform .4s var(--ease-out), opacity .4s var(--ease-out);
}
.toast::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(var(--a-rgb),.9); }
.toast.is-shown{ transform:translate(-50%,0); opacity:1; }


/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px){
  .pillnav{ display:none; }
  .hdr__actions{ margin-left:auto; }
  .hero__inner{ grid-template-columns:1fr; }
  .collage{ justify-self:center; max-width:560px; aspect-ratio:1.35; }
}
@media (max-width: 640px){
  .hdr__inner{ height:64px; gap:12px; }
  .hdr__cta{ display:none; }
  .brand__text small{ display:none; }
  .toolbar{ top:64px; flex-direction:column; align-items:stretch; gap:10px; }
  .search{ flex:none; }
  .hero__ctas .btn{ flex:1; }
  .collage{ aspect-ratio:1.2; }
  .collage__tag{ top:auto; bottom:4%; right:4%; }
  .foot__inner{ grid-template-columns:1fr; }
  .foot__links{ justify-content:flex-start; }
  .themer span{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .ticker__track{ animation:none; }
}


/* ==========================================================================
   PREMIUM LAYER
   --------------------------------------------------------------------------
   Finish on top of the base theme: grain, hairline gradient borders, cursor
   spotlights, motion. Everything that moves is gated behind html.motion,
   which store.js only adds when the visitor has NOT asked for reduced
   motion — without it the page is complete and static.
   ========================================================================== */

/* Film grain over everything. Fixed + pointer-events:none, so it costs one
   composited layer, not a repaint per scroll. */
.grain{
  position:fixed; inset:0; z-index:400; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:rgba(var(--a-rgb),.35); color:#fff; }

/* Kicker gets a short accent rule in front */
.kicker{ display:inline-flex; align-items:center; gap:10px; }
.kicker::before{ content:''; width:22px; height:2px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px rgba(var(--a-rgb),.8); }

/* ── Header condenses once you scroll ───────────────────────────────────── */
.hdr{ transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.hdr__inner{ transition:height .3s var(--ease); }
.hdr.is-stuck{ background:rgba(10,10,13,.9); box-shadow:0 10px 40px -20px rgba(0,0,0,.9); }
.hdr.is-stuck .hdr__inner{ height:62px; }
.hdr::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--a-rgb),.5), transparent);
  opacity:0; transition:opacity .3s;
}
.hdr.is-stuck::after{ opacity:1; }

/* ── Buttons: shine sweep ───────────────────────────────────────────────── */
.btn--accent{ position:relative; overflow:hidden; isolation:isolate; }
.btn--accent::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform:translateX(-120%);
}
.btn--accent:hover::after{ transform:translateX(120%); transition:transform .8s var(--ease-out); }
.btn--dark{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }

/* ── Hairline gradient borders ──────────────────────────────────────────────
   Two backgrounds: the fill clipped to the padding box, and a gradient
   clipped to the border box that shows through a transparent border. */
.card, .steps li, .goal, .faq details{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 38%, rgba(255,255,255,.03) 70%, rgba(var(--a-rgb),.28)) border-box;
}
.perks li{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(20,20,25,.92), rgba(20,20,25,.92)) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 60%, rgba(var(--a-rgb),.22)) border-box;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card{ isolation:isolate; }
.card::before{
  /* cursor spotlight — store.js feeds --mx/--my */
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(var(--a-rgb),.12), transparent 45%);
  opacity:0; transition:opacity .35s;
}
.card:hover::before{ opacity:1; }
.card > *{ position:relative; z-index:1; }
.card > .card__ribbon{ position:absolute; z-index:3; }
.card:hover{ box-shadow:0 34px 70px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
.card__media > .card__frame{ position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.card__media > .card__frame::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%, transparent 70%, rgba(0,0,0,.35));
}
.card__price strong{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.05em; }

/* Featured card: slow rotating gradient ring */
@property --spin{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.card--featured{
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--spin), rgba(var(--a-rgb),.15), var(--a1), var(--a2), rgba(var(--a-rgb),.15) 40%, rgba(255,255,255,.08) 60%, rgba(var(--a-rgb),.15)) border-box;
  box-shadow:0 30px 80px -40px rgba(var(--a-rgb),.8);
}
@keyframes spin{ to{ --spin:360deg; } }

/* Cards rise in as the grid renders */
.motion .card:not(.card--skel){ animation:rise .7s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 70ms); }
.motion .card--featured:not(.card--skel){
  animation:rise .7s var(--ease-out) both, spin 6s linear infinite;
  animation-delay:calc(var(--i, 0) * 70ms), 0s;
}

.cat, .search input{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }

/* ── Hero motion ────────────────────────────────────────────────────────── */
.motion .hero__copy > *{ animation:rise .9s var(--ease-out) both; }
.motion .hero__copy > :nth-child(1){ animation-delay:.05s; }
.motion .hero__copy > :nth-child(2){ animation-delay:.12s; }
.motion .hero__copy > :nth-child(3){ animation-delay:.24s; }
.motion .hero__copy > :nth-child(4){ animation-delay:.32s; }
.motion .hero__copy > :nth-child(5){ animation-delay:.40s; }
.motion .collage{ animation:fadein 1.2s var(--ease-out) .2s both; }
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } }
@keyframes fadein{ from{ opacity:0; transform:translateY(16px) scale(.98); } }

/* Collage tilts toward the cursor (store.js sets --rx/--ry) */
.collage{ perspective:1400px; }
.collage__stage{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .6s var(--ease-out);
}
.shot--b{ transform:rotate(5deg) translateZ(40px); }
.collage:hover .shot--b{ transform:rotate(6deg) translateZ(60px) translateY(-10px); }
.collage__tag{ transform:translateZ(70px); }
.collage__chip{
  position:absolute; z-index:5; left:-2%; bottom:26%;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px 12px 12px; border-radius:16px;
  background:rgba(18,18,23,.82); border:1px solid var(--line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,1);
  transform:translateZ(90px);
}
.collage__chipIco{
  display:grid; place-items:center; width:36px; height:36px; border-radius:11px;
  background:var(--accent); color:#fff; box-shadow:0 8px 20px -8px rgba(var(--a-rgb),.9);
}
.collage__chipIco svg{ stroke-width:2.6; }
.collage__chip strong{ display:block; font-size:14px; font-weight:800; line-height:1.2; }
.collage__chip small{ display:block; font-size:12px; color:var(--muted); }
.motion .collage__chip{ animation:float 6s ease-in-out infinite; }
@keyframes float{ 50%{ translate:0 -8px; } }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.motion [data-reveal], .motion [data-reveal-group] > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.motion [data-reveal-group] > *{ transition-delay:calc(var(--i, 0) * 80ms); }
.motion [data-reveal].is-in, .motion [data-reveal-group].is-in > *{ opacity:1; transform:none; }

/* ── Section seams ──────────────────────────────────────────────────────── */
.how, .faq{ position:relative; }
.shop::before, .how::before, .faq::before{
  content:''; position:absolute; top:0; left:50%; translate:-50% 0; width:min(900px, 90%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--a-rgb),.45), transparent);
}
.how{ border-top:0; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{ padding:clamp(64px,8vw,110px) 0; background:var(--bg-2); }
.faq__inner{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,72px); align-items:start; }
.faq__intro{ position:sticky; top:110px; }
.faq__lead{ margin:14px 0 24px; color:var(--muted); max-width:380px; }
.faq__list{ display:grid; gap:10px; }
.faq details{ border-radius:var(--r); overflow:hidden; transition:box-shadow .3s; }
.faq details[open]{ box-shadow:0 20px 50px -30px rgba(var(--a-rgb),.6); }
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 20px; cursor:pointer; list-style:none;
  font-size:16px; font-weight:700;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; flex:none; width:28px; height:28px; border-radius:9px;
  background:
    linear-gradient(currentColor, currentColor) center/11px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 11px no-repeat,
    rgba(255,255,255,.05);
  color:var(--muted); transition:transform .3s var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--a1); }
.faq details p{ padding:0 20px 20px; color:var(--muted); font-size:15px; }

/* ── Closing band ───────────────────────────────────────────────────────── */
.cta{ padding:0 0 clamp(64px,8vw,110px); background:var(--bg-2); }
.cta__panel{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px);
  border-radius:28px; border:1px solid var(--line-2);
  box-shadow:0 50px 100px -50px rgba(var(--a-rgb),.6);
}
.cta__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.cta__panel::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(var(--a-rgb),.35), transparent 60%),
    linear-gradient(90deg, rgba(10,10,13,.94) 25%, rgba(10,10,13,.6) 65%, rgba(10,10,13,.35));
}
.cta__title{
  margin-top:14px; max-width:640px;
  font-size:clamp(34px,5vw,60px); font-weight:800; letter-spacing:-.035em; line-height:1.05;
}
.cta__title .grad{ padding-bottom:.1em; }
.cta .hero__ctas{ margin-top:28px; }

@media (max-width: 900px){
  .faq__inner{ grid-template-columns:1fr; }
  .faq__intro{ position:static; }
}
@media (max-width: 640px){
  .collage__chip{ left:0; bottom:auto; top:2%; padding:9px 12px 9px 9px; }
  .collage__chipIco{ width:30px; height:30px; }
  .collage__chip small{ display:none; }
}
@media (hover: none){
  .card::before{ display:none; }
}
.motion .grid--still .card:not(.card--skel){ animation:none; }
.motion .grid--still .card--featured:not(.card--skel){ animation:spin 6s linear infinite; }
.motion .grid:not(.is-in) .card:not(.card--skel){ animation-play-state:paused; }
@media (max-width: 640px){
  .stats{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:22px; }
  .stats dt{ font-size:22px; }
  .stats dd{ font-size:10.5px; letter-spacing:.12em; }
  .stats div + div::before{ left:-11px; }
}


/* ==========================================================================
   SCRP BRAND + EMBLEM (round 3)
   ========================================================================== */

/* House blue, per the SCRP design system: #135CA6 is a FILL colour only
   (2.4:1 on dark), #4C9AE5 is the brand colour AS TEXT. So buttons and bars
   run #4C9AE5 → #135CA6, and any accent-coloured text uses --accent-text,
   which never goes darker than #4C9AE5. */
[data-accent="scrp"]{ --a1:#4C9AE5; --a2:#135CA6; --a-rgb:76,154,229; }
:root{ --accent-text: linear-gradient(120deg, color-mix(in srgb, var(--a1) 70%, #fff), var(--a1)); }
.grad, .card__price strong, .brand__text small, .steps__n{ background:var(--accent-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── Official checkout notice (replaces the stats row) ──────────────────── */
.official{
  display:flex; align-items:center; gap:14px;
  margin-top:28px; max-width:520px; padding:14px 18px 14px 14px; border-radius:16px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(20,20,25,.85), rgba(20,20,25,.85)) padding-box,
    linear-gradient(120deg, rgba(var(--a-rgb),.55), rgba(255,255,255,.06) 55%, rgba(var(--a-rgb),.2)) border-box;
  font-size:14.5px; line-height:1.5; color:var(--muted);
}
.official strong{ color:var(--text); }
.official__ico{
  flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--accent); color:#fff; box-shadow:0 8px 22px -8px rgba(var(--a-rgb),.9);
}
.official__ico svg{ stroke-width:2.2; }

/* ── Brand emblem (replaces the photo collage) ──────────────────────────── */
.emblem{
  position:relative; width:100%; max-width:560px; aspect-ratio:1; justify-self:end;
  perspective:1400px;
}
.emblem__stage{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .6s var(--ease-out);
}
.emblem__ring{
  position:absolute; left:50%; top:50%; border-radius:50%;
  translate:-50% -50%;
  border:1px solid rgba(var(--a-rgb),.22);
}
.emblem__ring--1{ width:96%; height:96%; border-color:rgba(255,255,255,.06); }
.emblem__ring--2{ width:76%; height:76%; border:1px dashed rgba(var(--a-rgb),.35); }
.emblem__ring--3{ width:56%; height:56%; border-color:rgba(var(--a-rgb),.28); box-shadow:inset 0 0 60px rgba(var(--a-rgb),.12); }
.emblem__orbiter{
  position:absolute; left:50%; top:-5px; width:10px; height:10px; margin-left:-5px; border-radius:50%;
  background:var(--a1); box-shadow:0 0 14px 3px rgba(var(--a-rgb),.9);
}
.emblem__halo{
  position:absolute; left:50%; top:50%; width:70%; height:70%; translate:-50% -50%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--a-rgb),.34), rgba(var(--a-rgb),.08) 60%, transparent);
}
.emblem__logo{
  position:absolute; left:50%; top:50%; width:58%; translate:-50% -50%;
  transform:translateZ(50px);
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.7));
}
.motion .emblem__ring--2{ animation:orbit 28s linear infinite; }
.motion .emblem__ring--1{ animation:orbit 80s linear infinite reverse; }
.motion .emblem__logo{ animation:bob 7s ease-in-out infinite; }
.motion .emblem{ animation:fadein 1.2s var(--ease-out) .2s both; }
@keyframes orbit{ to{ rotate:360deg; } }
@keyframes bob{ 50%{ translate:-50% calc(-50% - 8px); } }

.chip{
  position:absolute; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:11px 16px 11px 11px; border-radius:16px;
  background:rgba(18,18,23,.82); border:1px solid var(--line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,1);
  white-space:nowrap;
}
.chip__ico{
  flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:11px;
  background:var(--accent); color:#fff; box-shadow:0 8px 20px -8px rgba(var(--a-rgb),.9);
}
.chip__ico svg{ stroke-width:2.2; }
.chip strong{ display:block; font-size:14px; font-weight:800; line-height:1.2; }
.chip small{ display:block; font-size:12px; color:var(--muted); }
.chip--a{ right:-2%; top:12%; transform:translateZ(90px); }
.chip--b{ left:-10%; top:66%; transform:translateZ(120px); }
.chip--c{ right:4%; bottom:9%; transform:translateZ(80px); }
.motion .chip{ animation:float 6s ease-in-out infinite; }
.motion .chip--b{ animation-delay:-2s; }
.motion .chip--c{ animation-delay:-4s; }

/* ── Closing band, abstract version ─────────────────────────────────────── */
.cta__panel{
  background:
    radial-gradient(60% 120% at 100% 50%, rgba(var(--a-rgb),.30), transparent 60%),
    repeating-radial-gradient(ellipse 60% 80% at 90% 50%, transparent 0 24px, rgba(var(--a-rgb),.10) 24px 25px),
    linear-gradient(120deg, #111117, #0c0c10);
}
.cta__panel::before{ display:none; }
.cta__mark{
  position:absolute; z-index:-1; right:-2%; top:50%; width:min(46%, 440px); translate:0 -50%;
  opacity:.16; filter:saturate(.6) drop-shadow(0 0 60px rgba(var(--a-rgb),.5));
  pointer-events:none;
}
.cta__sub{ margin-top:14px; max-width:520px; color:var(--muted); font-size:16.5px; }

@media (max-width: 1020px){
  .emblem{ justify-self:center; max-width:460px; }
}
@media (max-width: 640px){
  .emblem{ max-width:360px; }
  .chip{ padding:8px 12px 8px 8px; gap:9px; }
  .chip__ico{ width:30px; height:30px; }
  .chip small{ display:none; }
  .chip--a{ right:0; top:4%; }
  .chip--b{ left:0; top:auto; bottom:5%; }
  .chip--c{ display:none; }
  .cta__mark{ width:70%; right:-18%; opacity:.1; }
  .official{ font-size:13.5px; }
}