/* ==========================================================================
   REASON ANTICHEAT — Tebex storefront theme
   Visual language ported from the DARK NET UI: notched panels, glass over a
   live digit-rain canvas, tracked-out uppercase display type, staggered
   reveals. Typeface is Inter throughout — display, body and readouts.
   Palette stays Reason violet (#a685ff), taken from reasonanticheat.net.

   Two things from DARK NET are deliberately NOT carried over: the fixed
   100vh shell (a store has to scroll) and `user-select: none` (customers
   need to copy prices and licence keys).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Ground */
  --ac-bg-0:        #05060c;
  --ac-bg-1:        #090a11;   /* --color-dark from the brand site */

  /* Glass surfaces */
  --ac-panel:       rgba(17, 18, 28, 0.68);   /* #11121c at 68% */
  --ac-panel-solid: #11121c;                  /* --color-dark-third */
  --ac-panel-hi:    rgba(26, 28, 42, 0.85);   /* #1a1c2a */
  --ac-panel-deep:  rgba(6, 7, 13, 0.7);

  /* Violet-tinted hairlines */
  --ac-line:        rgba(166, 133, 255, 0.14);
  --ac-line-hi:     rgba(166, 133, 255, 0.32);

  /* Brand violet */
  --ac-accent:      #a685ff;   /* --color-violet-400 */
  --ac-accent-2:    #8d54ff;   /* --color-violet-500 */
  --ac-accent-soft: #c4b4ff;   /* --color-violet-300 */
  --ac-accent-dim:  rgba(166, 133, 255, 0.14);
  --ac-accent-glow: rgba(166, 133, 255, 0.4);
  --ac-on-accent:   #0b0518;

  /* Status */
  --ac-gold:        #ffc861;
  --ac-danger:      #ff4f63;
  --ac-warn:        #ffa53d;
  --ac-info:        #54a2ff;   /* --color-blue-400 */
  --ac-ok:          #35d3a0;

  /* Ink */
  --ac-text:        #f2f3fa;
  --ac-muted:       #969db8;   /* --color-gray */
  /* The quiet grey: labels, small print, currency codes, buybox notes. #6b7291
     measured 4.3:1 on the page and 3.8:1 on the lighter panels — under the
     4.5:1 floor in both. This clears 4.9:1 everywhere it is used. */
  --ac-muted-2:     #7d84a3;

  /* Type — one family everywhere */
  --ac-font:      "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ac-font-body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ac-mono:      "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  /* Notched corners — the DARK NET signature. Top-left and bottom-right. */
  /* Square corners. Every panel, button, card and tag clips through these four
     variables, so this is the only place the shape is decided. To bring the
     cut corners back, restore the polygons:
       --notch-xs: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
       --notch-sm: polygon(9px 0, ...9px...);
       --notch:    polygon(14px 0, ...14px...);
       --notch-lg: polygon(22px 0, ...22px...); */
  --notch-xs: none;
  --notch-sm: none;
  --notch:    none;
  --notch-lg: none;

  /* Rhythm */
  --ac-gap:       14px;
  --ac-pad:       18px;
  --ac-section:   clamp(3.5rem, 2rem + 5vw, 6rem);
  --ac-container: 1280px;

  --ease: cubic-bezier(.22, .9, .28, 1);
}

/* Tebex's mandatory legal footer, tuned to the theme */
:root {
  --tebex-legal-footer-background-color: #05060c;
  /* #6b7291 sat at 4.05:1 on this background — under the 4.5:1 floor, and the
     legal footer is the one block that must stay readable. */
  --tebex-legal-footer-text-color: #a3aac4;
  --tebex-legal-footer-border-color: rgba(166, 133, 255, 0.14);
  --tebex-legal-footer-logo-color: #a3aac4;
  --tebex-legal-footer-max-width: 1280px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--ac-bg-0);
  color: var(--ac-text);
  font-family: var(--ac-font-body);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--ac-font);
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--ac-line); margin: 0; }

:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 3px;
}

::selection { background: rgba(141, 84, 255, .45); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(166, 133, 255, .24); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(166, 133, 255, .48); }
* { scrollbar-width: thin; scrollbar-color: rgba(166,133,255,.28) transparent; }

/* --------------------------------------------------------------------------
   3. Background stack — five fixed layers, exactly the DARK NET recipe
   -------------------------------------------------------------------------- */

.ac-bg-rain,
.ac-bg-glow,
.ac-bg-grid,
.ac-bg-vignette,
.ac-bg-scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* 1 — canvas: digits falling from the top */
.ac-bg-rain { z-index: 0; opacity: .42; }

/* 2 — coloured bloom */
.ac-bg-glow {
  z-index: 1;
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(141, 84, 255, .16), transparent 70%),
    radial-gradient(45% 45% at 10% 88%, rgba(166, 133, 255, .07), transparent 70%),
    radial-gradient(45% 45% at 90% 86%, rgba(84, 162, 255, .06), transparent 70%),
    linear-gradient(180deg, #05060c 0%, #090a11 45%, #04050a 100%);
  background-color: var(--ac-bg-0);
  mix-blend-mode: screen;
}

/* 3 — engineering grid, masked so it fades at the edges */
.ac-bg-grid {
  z-index: 1;
  background-image:
    linear-gradient(rgba(166, 133, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 133, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(75% 60% at 50% 35%, #000 20%, transparent 88%);
}

/* 4 — vignette */
.ac-bg-vignette {
  z-index: 2;
  box-shadow: inset 0 0 240px 60px rgba(0, 0, 0, .9);
  background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0, 0, 0, .7) 100%);
}

/* 5 — CRT scanlines */
.ac-bg-scan {
  z-index: 3;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px);
  opacity: .6;
}

/* Everything real sits above the stack */
.ac-nav,
main,
.ac-footer { position: relative; z-index: 5; }

/* --------------------------------------------------------------------------
   4. Type roles
   -------------------------------------------------------------------------- */

.ac-label {
  font-family: var(--ac-font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-mono {
  font-family: var(--ac-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
}

.ac-num { font-variant-numeric: tabular-nums; }
.ac-muted { color: var(--ac-muted); }
.ac-dim { color: var(--ac-muted-2); }
.ac-accent-text { color: var(--ac-accent); }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.ac-container {
  width: 100%;
  max-width: var(--ac-container);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}

.ac-section { padding-block: var(--ac-section); }
.ac-section--tight { padding-block: calc(var(--ac-section) * .6); }

/* Section head — accent block, rule underneath, optional tools on the right */
.ac-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ac-line);
}

.ac-sechead__main { min-width: 0; }

.ac-sechead__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(20px, 1rem + 1.4vw, 30px);
  font-weight: 600;
  letter-spacing: 1.7px;
}

.ac-sechead__title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 22px;
  background: var(--ac-accent);
  box-shadow: 0 0 14px var(--ac-accent-glow);
}

.ac-sechead__title em {
  font-style: normal;
  color: var(--ac-accent);
}

.ac-sechead__sub {
  margin: 6px 0 0;
  padding-left: 18px;
  max-width: 70ch;
  font-size: 13px;
  letter-spacing: .6px;
  color: var(--ac-muted);
}

.ac-sechead__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex: none;
}

.ac-grid { display: grid; gap: var(--ac-gap); }
.ac-grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.ac-grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.ac-grid--4 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (max-width: 980px) {
  .ac-grid--4, .ac-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ac-grid--4, .ac-grid--3, .ac-grid--2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6. Panels
   -------------------------------------------------------------------------- */

.ac-panel {
  position: relative;
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: var(--notch);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}

.ac-panel--hover:hover {
  border-color: var(--ac-line-hi);
  background: var(--ac-panel-hi);
  transform: translateY(-3px);
}

.ac-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px var(--ac-pad);
  border-bottom: 1px solid var(--ac-line);
}

.ac-panel__title {
  font-family: var(--ac-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ac-panel__body { padding: var(--ac-pad); }

/* --------------------------------------------------------------------------
   7. Buttons — notched, uppercase, with the diagonal shine on hover
   -------------------------------------------------------------------------- */

.ac-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  font-family: var(--ac-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ac-text);
  background: rgba(17, 18, 28, .72);
  border: 1px solid var(--ac-line-hi);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  clip-path: var(--notch-sm);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), transform .12s var(--ease),
              filter .2s var(--ease);
}

.ac-btn svg { flex: none; }

.ac-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, .16) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
}

.ac-btn:hover::before { transform: translateX(120%); }
.ac-btn:active { transform: scale(.975); }

/* drop-shadow, not box-shadow: it follows the notched silhouette instead of
   being clipped away by clip-path */
.ac-btn--primary {
  background: linear-gradient(180deg, var(--ac-accent), var(--ac-accent-2));
  border-color: transparent;
  color: var(--ac-on-accent);
  filter: drop-shadow(0 0 16px rgba(166, 133, 255, .38));
}

.ac-btn--primary:hover { filter: drop-shadow(0 0 26px rgba(166, 133, 255, .65)); }

.ac-btn--outline { color: var(--ac-accent); background: rgba(166, 133, 255, .07); }
.ac-btn--outline:hover { background: rgba(166, 133, 255, .16); border-color: var(--ac-accent); }

.ac-btn--ghost { border-color: var(--ac-line); color: var(--ac-muted); background: rgba(9, 10, 17, .55); }
.ac-btn--ghost:hover { color: var(--ac-text); border-color: var(--ac-line-hi); }

.ac-btn--danger { color: var(--ac-danger); border-color: rgba(255, 79, 99, .35); background: rgba(255, 79, 99, .08); }
.ac-btn--danger:hover { background: rgba(255, 79, 99, .18); border-color: var(--ac-danger); }

.ac-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ac-muted);
  padding-inline: 12px;
}
.ac-btn--quiet:hover { color: var(--ac-text); background: rgba(255, 255, 255, .05); }

.ac-btn--lg { padding: 16px 36px; font-size: 15px; letter-spacing: 1.7px; }
.ac-btn--sm { padding: 8px 14px; font-size: 11px; letter-spacing: 0.8px; clip-path: var(--notch-xs); }
.ac-btn--block { width: 100%; }
.ac-btn--icon { padding: 11px; aspect-ratio: 1; }
.ac-btn--sm.ac-btn--icon { padding: 8px; }

.ac-btn[disabled], .ac-btn[aria-disabled="true"] { opacity: .38; pointer-events: none; }

/* --------------------------------------------------------------------------
   8. Tags, chips, status
   -------------------------------------------------------------------------- */

.ac-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: var(--ac-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  color: var(--ac-muted);
  background: rgba(255, 255, 255, .03);
  white-space: nowrap;
}

.ac-tag svg { width: 10px; height: 10px; flex: none; }

.ac-tag--accent { color: var(--ac-accent); background: rgba(166, 133, 255, .1); }
.ac-tag--gold   { color: var(--ac-gold);   background: rgba(255, 200, 97, .09); }
.ac-tag--red    { color: var(--ac-danger); background: rgba(255, 79, 99, .09); }
.ac-tag--orange { color: var(--ac-warn);   background: rgba(255, 165, 61, .09); }
.ac-tag--blue   { color: var(--ac-info);   background: rgba(84, 162, 255, .09); }
.ac-tag--green  { color: var(--ac-ok);     background: rgba(53, 211, 160, .09); }

/* Chip — the topbar readout block */
.ac-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  clip-path: var(--notch-sm);
  white-space: nowrap;
}

.ac-chip--ghost { background: rgba(6, 7, 13, .5); }
.ac-chip--hi { border-color: var(--ac-line-hi); }

.ac-chip__label {
  font-family: var(--ac-font);
  font-size: 10px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-chip__value { font-family: var(--ac-font); font-size: 14px; font-weight: 600; letter-spacing: .8px; }
.ac-chip__value--accent { color: var(--ac-accent); text-shadow: 0 0 14px var(--ac-accent-glow); }
.ac-chip__value--gold { color: var(--ac-gold); text-shadow: 0 0 14px rgba(255, 200, 97, .35); }

.ac-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--ac-ok);
  box-shadow: 0 0 10px currentColor;
  color: var(--ac-ok);
  animation: ac-pulse 2s var(--ease) infinite;
}

.ac-dot--accent { background: var(--ac-accent); color: var(--ac-accent); }
.ac-dot--danger { background: var(--ac-danger); color: var(--ac-danger); }
.ac-dot--warn   { background: var(--ac-warn);   color: var(--ac-warn); }

@keyframes ac-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}

/* --------------------------------------------------------------------------
   9. Navbar
   -------------------------------------------------------------------------- */

.ac-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--ac-line);
  background: rgba(5, 6, 12, .78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* The bar carries Home and Shop on top of the categories now, so it gets more
   room than the 1280px content column. */
.ac-nav > .ac-container { max-width: 1600px; }

.ac-nav__inner { display: flex; align-items: center; gap: 10px; min-height: 72px; }

/* Brand — wordmark flanked by a glowing rule that ends in an arrowhead */
.ac-brand { display: flex; align-items: center; gap: 12px; flex: 1 1 0; }

.ac-brand__mark {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ac-on-accent);
  background: linear-gradient(160deg, var(--ac-accent-soft), var(--ac-accent-2));
  clip-path: var(--notch-sm);
  filter: drop-shadow(0 0 12px rgba(166, 133, 255, .5));
}

.ac-brand__mark svg { width: 19px; height: 19px; }
.ac-brand__logo { max-height: 40px; width: auto; }

/* Store logo (or favicon) in place of the built-in crest: the artwork brings
   its own shape, so the gradient tile and the notch step out of the way. */
.ac-brand__mark--img {
  background: none;
  clip-path: none;
  filter: drop-shadow(0 0 14px rgba(166, 133, 255, .45));
}

.ac-brand__mark--img img { width: 100%; height: 100%; object-fit: contain; }

.ac-brand__title {
  font-family: var(--ac-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.9px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(166, 133, 255, .3);
}

.ac-brand__title em {
  font-style: normal;
  background: linear-gradient(180deg, #fff, var(--ac-accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ac-brand__sub {
  display: block;
  font-family: var(--ac-mono);
  font-size: 9px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
  margin-top: 3px;
}

/* No overflow scrolling here on purpose: `overflow-x` also clips the Y axis,
   which would cut off the category dropdowns. Extra categories wrap onto a
   second row instead, and below 1100px the whole list becomes a stacked menu. */
/* Three-column bar: brand and actions are equal-weight flex columns, so the
   tab group between them lands on the true centre of the page. */
.ac-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex: 0 1 auto;
  gap: 6px 2px;
  min-width: 0;
}

.ac-nav__spacer { display: none; }  /* superseded by the flex columns above */

/* Nav item borrows the DARK NET bottom-nav treatment: underline that scales
   in, plus a radial bloom from the lower-left corner. */
.ac-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 9px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--ac-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ac-muted);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  clip-path: var(--notch-xs);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.ac-nav__link::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--ac-accent);
  box-shadow: 0 0 12px var(--ac-accent-glow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.ac-nav__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 130% at 20% 100%, rgba(166, 133, 255, .2), transparent 70%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}

.ac-nav__link > * { position: relative; z-index: 2; }

.ac-nav__link:hover { color: var(--ac-text); border-color: var(--ac-line); }
.ac-nav__link:hover::after { opacity: .6; }

.ac-nav__link.is-active {
  color: var(--ac-text);
  border-color: var(--ac-line-hi);
  background: linear-gradient(180deg, rgba(51, 34, 92, .8), rgba(26, 20, 48, .9));
}
.ac-nav__link.is-active::before { transform: scaleX(1); }
.ac-nav__link.is-active::after { opacity: 1; }

.ac-nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 1 1 0; }

/* Dropdown */
.ac-drop { position: relative; }

.ac-drop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 70;
  min-width: 13rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--ac-line-hi);
  background: rgba(11, 12, 20, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  clip-path: var(--notch-sm);
  display: none;
}

.ac-drop__menu--right { left: auto; right: 0; }
.ac-drop.is-open .ac-drop__menu { display: block; animation: ac-rise .22s var(--ease); }

.ac-drop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  font-family: var(--ac-font);
  font-size: 12px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ac-muted);
  border-left: 2px solid transparent;
  transition: all .18s var(--ease);
}

.ac-drop__item:hover { background: rgba(166, 133, 255, .1); color: var(--ac-text); border-left-color: var(--ac-accent); }
.ac-drop__item.is-active { color: var(--ac-accent); border-left-color: var(--ac-accent); }

.ac-cartbtn { position: relative; }

.ac-cartbtn__count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--ac-accent);
  color: var(--ac-on-accent);
  font-family: var(--ac-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  clip-path: var(--notch-xs);
  box-shadow: 0 0 12px var(--ac-accent-glow);
}

.ac-nav__toggle { display: none; }

@media (max-width: 1100px) {
  .ac-nav__links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 10px;
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    border-bottom: 1px solid var(--ac-line-hi);
    background: rgba(9, 10, 17, .98);
    backdrop-filter: blur(16px);
    display: none;
  }

  /* Inside the stacked menu the dropdown can't float — inline it.
     Scoped to the links list so the currency and account menus in
     .ac-nav__actions keep their normal open/close behaviour. */
  .ac-nav__links .ac-drop__menu {
    position: static;
    display: block;
    min-width: 0;
    max-height: none;
    margin-top: 4px;
    border: 0;
    border-left: 1px solid var(--ac-line);
    background: transparent;
    backdrop-filter: none;
    clip-path: none;
  }
  .ac-nav.is-open .ac-nav__links { display: flex; }
  .ac-nav__link { padding: 12px 14px; }
  .ac-nav__toggle { display: inline-flex; order: -1; }
  .ac-brand__sub { display: none; }
}

/* The wordmark set in Inter is wider than the condensed face it replaced —
   below phone width it has to give room back to the cart button. */
@media (max-width: 640px) {
  .ac-nav__inner { gap: 8px; }
  .ac-brand { gap: 8px; min-width: 0; }
  .ac-brand__mark { width: 30px; height: 30px; }
  .ac-brand__mark svg { width: 16px; height: 16px; }
  .ac-brand__title { font-size: 15px; letter-spacing: 1px; }
}

/* --------------------------------------------------------------------------
   10. Cart drawer
   -------------------------------------------------------------------------- */

.ac-drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.ac-drawer.is-open { display: block; }

.ac-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 7, .84);
  backdrop-filter: blur(8px);
  animation: ac-fade .22s var(--ease);
}

.ac-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(27rem, 100%);
  display: flex;
  flex-direction: column;
  background: rgba(9, 10, 17, .97);
  border-left: 1px solid var(--ac-line-hi);
  animation: ac-slide-in .28s var(--ease);
}

@keyframes ac-fade { from { opacity: 0; } }
@keyframes ac-slide-in { from { transform: translateX(100%); } }

.ac-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px var(--ac-pad);
  border-bottom: 1px solid var(--ac-line);
}

.ac-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ac-pad);
  display: grid;
  gap: 10px;
  align-content: start;
}

.ac-drawer__foot {
  padding: var(--ac-pad);
  border-top: 1px solid var(--ac-line);
  display: grid;
  gap: 14px;
  background: var(--ac-panel-deep);
}

.ac-drawer__total { display: flex; align-items: baseline; justify-content: space-between; }

.ac-drawer__total strong {
  font-family: var(--ac-font);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
  color: var(--ac-accent);
  text-shadow: 0 0 18px var(--ac-accent-glow);
}

.ac-lineitem {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: rgba(6, 7, 13, .6);
  border: 1px solid var(--ac-line);
  clip-path: var(--notch-sm);
  transition: border-color .2s var(--ease);
}

.ac-lineitem:hover { border-color: var(--ac-line-hi); }

.ac-lineitem__thumb {
  width: 46px; height: 46px;
  object-fit: cover;
  border: 1px solid var(--ac-line);
  background: var(--ac-panel-solid);
  clip-path: var(--notch-xs);
  overflow: hidden;
}

.ac-lineitem__thumb img { width: 100%; height: 100%; object-fit: cover; }

.ac-lineitem__name {
  font-family: var(--ac-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.3;
}

.ac-lineitem__meta { font-family: var(--ac-mono); font-size: 11px; color: var(--ac-muted-2); }

.ac-empty {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--ac-muted-2);
}

.ac-empty svg { width: 40px; height: 40px; opacity: .3; }

/* --------------------------------------------------------------------------
   11. Hero
   -------------------------------------------------------------------------- */

.ac-hero { padding-block: clamp(40px, 5vw, 72px) var(--ac-section); }

.ac-hero__grid { display: grid; gap: clamp(32px, 4vw, 52px); justify-items: center; text-align: center; }

.ac-hero__copy { display: grid; gap: 22px; justify-items: center; max-width: 60rem; }

.ac-hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid var(--ac-line-hi);
  background: rgba(166, 133, 255, .07);
  clip-path: var(--notch-sm);
  font-family: var(--ac-font);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ac-accent-soft);
}

.ac-hero__title {
  font-size: clamp(38px, 5.5vw, 82px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: clamp(1px, .3vw, 4px);
  text-shadow: 0 0 40px rgba(166, 133, 255, .25), 0 2px 0 rgba(0, 0, 0, .6);
}

.ac-hero__title em {
  font-style: normal;
  background: linear-gradient(180deg, #fff 0%, var(--ac-accent-soft) 55%, var(--ac-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ac-hero__text {
  font-family: var(--ac-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ac-muted);
  max-width: 58ch;
  text-transform: none;
  letter-spacing: .2px;
}

.ac-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --------------------------------------------------------------------------
   12. Steps — numbered because it is a genuine order
   -------------------------------------------------------------------------- */

.ac-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--ac-line);
  border: 1px solid var(--ac-line);
  clip-path: var(--notch);
  counter-reset: ac-step;
}

.ac-step {
  position: relative;
  padding: 22px var(--ac-pad);
  display: grid;
  gap: 8px;
  align-content: start;
  background: rgba(11, 12, 20, .8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s var(--ease);
}

.ac-step:hover { background: var(--ac-panel-hi); }

.ac-step::before {
  counter-increment: ac-step;
  content: counter(ac-step, decimal-leading-zero);
  font-family: var(--ac-mono);
  font-size: 11px;
  letter-spacing: 1.1px;
  color: var(--ac-accent);
}

.ac-step__title { font-family: var(--ac-font); font-size: 15px; font-weight: 600; letter-spacing: 0.9px; }
.ac-step p { font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-muted); }

/* --------------------------------------------------------------------------
   13. Detection matrix
   -------------------------------------------------------------------------- */

/* Transparent behind the cells on purpose: a group whose last row is short
   would otherwise show a pale block where the missing cells are. */
.ac-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
  background: transparent;
  border: 1px solid var(--ac-line);
  clip-path: var(--notch);
}

.ac-matrix__cell {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: rgba(11, 12, 20, .8);
  font-family: var(--ac-font);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ac-muted);
  transition: background .18s var(--ease), color .18s var(--ease);
}

.ac-matrix__cell:hover { background: rgba(166, 133, 255, .1); color: var(--ac-text); }
.ac-matrix__cell svg { width: 15px; height: 15px; flex: none; color: var(--ac-accent); }

.ac-matrix__cell code {
  font-family: var(--ac-mono);
  font-size: 10px;
  letter-spacing: .6px;
  color: var(--ac-muted-2);
  margin-left: auto;
}

/* The full check list is long, so it is broken into labelled blocks. */
.ac-features { display: grid; gap: 30px; }

.ac-featgroup__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--ac-accent-soft);
}

.ac-featgroup__title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 14px;
  background: var(--ac-accent);
  box-shadow: 0 0 10px var(--ac-accent-glow);
}

/* --------------------------------------------------------------------------
   14. Package cards
   -------------------------------------------------------------------------- */

.ac-packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--ac-gap);
}

.ac-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  clip-path: var(--notch);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}

.ac-pkg::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  z-index: 3;
  background: var(--ac-accent);
  box-shadow: 0 0 12px var(--ac-accent-glow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease);
}

.ac-pkg:hover { border-color: var(--ac-line-hi); background: var(--ac-panel-hi); transform: translateY(-3px); }
.ac-pkg:hover::after { transform: scaleY(1); }

.ac-pkg--featured { border-color: var(--ac-line-hi); }
.ac-pkg--featured::after { transform: scaleY(1); }

.ac-pkg__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(65% 85% at 50% 15%, rgba(166, 133, 255, .18), transparent 70%),
    rgba(6, 7, 13, .6);
  border-bottom: 1px solid var(--ac-line);
  overflow: hidden;
}

.ac-pkg__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s var(--ease); }
.ac-pkg:hover .ac-pkg__media img { scale: 1.05; }

.ac-pkg__crest { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(166, 133, 255, .3); }
.ac-pkg__crest svg { width: 54px; height: 54px; }

.ac-pkg__flags {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  z-index: 2;
}

.ac-pkg__body { display: grid; gap: 8px; align-content: start; padding: 14px 16px; flex: 1; }

.ac-pkg__name {
  font-family: var(--ac-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Merchant HTML flattened to two lines so a stray <img> can't wreck the card */
.ac-pkg__desc {
  font-family: var(--ac-font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ac-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.ac-pkg__desc * { display: inline; margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; }
.ac-pkg__desc :is(img, iframe, video, br, hr, table) { display: none; }

.ac-pkg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--ac-line);
  background: rgba(4, 5, 10, .45);
}

.ac-price { display: flex; align-items: baseline; gap: 6px; font-family: var(--ac-font); font-variant-numeric: tabular-nums; }

.ac-price__now {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1;
  color: var(--ac-accent);
  text-shadow: 0 0 18px var(--ac-accent-glow);
}

.ac-price__cur { font-family: var(--ac-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--ac-muted-2); }
.ac-price__was { font-family: var(--ac-mono); font-size: 12px; color: var(--ac-muted-2); text-decoration: line-through; }
.ac-price__free { font-size: 24px; font-weight: 600; color: var(--ac-ok); line-height: 1; text-shadow: 0 0 18px rgba(53,211,160,.4); }

.ac-pkg__actions { display: flex; gap: 6px; }

/* List display type */
.ac-packages--list { grid-template-columns: 1fr; gap: 10px; }
.ac-packages--list .ac-pkg { flex-direction: row; align-items: center; gap: 16px; padding: 12px; }
.ac-packages--list .ac-pkg__media { width: 90px; flex: none; aspect-ratio: 1; border: 1px solid var(--ac-line); clip-path: var(--notch-xs); }
.ac-packages--list .ac-pkg__body { padding: 0; }
.ac-packages--list .ac-pkg__foot { border-top: 0; background: transparent; padding: 0; flex: none; gap: 20px; }

@media (max-width: 640px) {
  .ac-packages--list .ac-pkg { flex-wrap: wrap; }
  .ac-packages--list .ac-pkg__foot { width: 100%; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   15. Avatar chip — payments and top-donator sidebar modules
   -------------------------------------------------------------------------- */

.ac-review__avatar {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--ac-accent-dim);
  border: 1px solid var(--ac-line-hi);
  clip-path: var(--notch-xs);
  font-family: var(--ac-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--ac-accent);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.ac-faq {
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: var(--notch);
}

.ac-faq__item + .ac-faq__item { border-top: 1px solid var(--ac-line); }

.ac-faq__q {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px var(--ac-pad);
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ac-text);
  font-family: var(--ac-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}

.ac-faq__q:hover { background: rgba(255, 255, 255, .03); border-left-color: var(--ac-line-hi); }

.ac-faq__q[aria-expanded="true"] {
  border-left-color: var(--ac-accent);
  background: rgba(166, 133, 255, .06);
}

.ac-faq__sign {
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ac-line-hi);
  color: var(--ac-muted);
  clip-path: var(--notch-xs);
  transition: rotate .24s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.ac-faq__sign svg { width: 11px; height: 11px; }

.ac-faq__q[aria-expanded="true"] .ac-faq__sign {
  rotate: 45deg;
  color: var(--ac-on-accent);
  background: var(--ac-accent);
}

.ac-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.ac-faq__q[aria-expanded="true"] + .ac-faq__a { grid-template-rows: 1fr; }
.ac-faq__a > div { overflow: hidden; }
.ac-faq__a p {
  padding: 0 var(--ac-pad) 18px 20px;
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: 13.5px;
  color: var(--ac-muted);
}

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */

.ac-cta {
  position: relative;
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: clamp(32px, 4vw, 60px) clamp(20px, 3vw, 48px);
  background:
    radial-gradient(46rem 22rem at 50% 0%, rgba(141, 84, 255, .26), transparent 70%),
    var(--ac-panel);
  border: 1px solid var(--ac-line-hi);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  clip-path: var(--notch-lg);
  overflow: hidden;
}

/* corner brackets — cheap, and they sell the "terminal" read */
.ac-cta::before,
.ac-cta::after {
  content: "";
  position: absolute;
  width: 40px; height: 40px;
  border: 2px solid var(--ac-accent);
  opacity: .5;
  pointer-events: none;
}
.ac-cta::before { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.ac-cta::after { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }

.ac-cta__title { font-size: clamp(24px, 2.4vw, 38px); letter-spacing: 1.7px; max-width: 22ch; }
.ac-cta p { font-family: var(--ac-font-body); color: var(--ac-muted); max-width: 54ch; }
.ac-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --------------------------------------------------------------------------
   18. Shop shell
   -------------------------------------------------------------------------- */

.ac-shell {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: var(--ac-gap);
  align-items: start;
  padding-block: 32px var(--ac-section);
}

@media (max-width: 980px) { .ac-shell { grid-template-columns: 1fr; } }

.ac-side { display: grid; gap: var(--ac-gap); position: sticky; top: 92px; }
@media (max-width: 980px) { .ac-side { position: static; } }

.ac-sidenav { display: grid; gap: 3px; padding: 8px; }

.ac-sidenav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  border-left: 2px solid transparent;
  font-family: var(--ac-font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ac-muted);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.ac-sidenav__link:hover { background: rgba(255, 255, 255, .04); color: var(--ac-text); border-left-color: var(--ac-line-hi); }

.ac-sidenav__link.is-active {
  background: rgba(166, 133, 255, .12);
  color: var(--ac-text);
  border-left-color: var(--ac-accent);
}

.ac-sidenav__count { font-family: var(--ac-mono); font-size: 10px; color: var(--ac-muted-2); }
.ac-sidenav__sub { display: grid; gap: 2px; padding-left: 14px; }
.ac-sidenav__sub a {
  padding: 7px 13px;
  font-family: var(--ac-font);
  font-size: 11.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}
.ac-sidenav__sub a:hover { color: var(--ac-text); background: rgba(255, 255, 255, .04); }

.ac-main { display: grid; gap: var(--ac-gap); min-width: 0; }

.ac-pagehead {
  display: grid;
  gap: 10px;
  padding: 20px var(--ac-pad);
  background:
    radial-gradient(30rem 14rem at 0% 0%, rgba(141, 84, 255, .16), transparent 70%),
    var(--ac-panel);
  border: 1px solid var(--ac-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: var(--notch);
}

.ac-pagehead__title { font-size: 26px; letter-spacing: 1.7px; }

.ac-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-family: var(--ac-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-breadcrumb a:hover { color: var(--ac-accent); }
.ac-breadcrumb__sep { opacity: .45; }

/* --------------------------------------------------------------------------
   19. Prose (merchant rich text)
   -------------------------------------------------------------------------- */

.ac-prose { font-family: var(--ac-font-body); color: var(--ac-muted); line-height: 1.75; font-size: 14px; }
.ac-prose > *:first-child { margin-top: 0; }
.ac-prose > *:last-child { margin-bottom: 0; }
.ac-prose h1, .ac-prose h2, .ac-prose h3, .ac-prose h4 {
  font-family: var(--ac-font);
  color: var(--ac-text);
  letter-spacing: 1.1px;
  margin: 1.75em 0 .6em;
}
.ac-prose h1 { font-size: 24px; }
.ac-prose h2 { font-size: 20px; }
.ac-prose h3 { font-size: 16px; }
.ac-prose a { color: var(--ac-accent); text-decoration: underline; text-underline-offset: 3px; }
.ac-prose ul, .ac-prose ol { margin: 0 0 1em; padding-left: 1.35rem; }
.ac-prose ul { list-style: none; }
.ac-prose ul li { position: relative; margin-bottom: .45em; }
.ac-prose ul li::before {
  content: "";
  position: absolute;
  left: -1rem; top: .62em;
  width: 5px; height: 5px;
  background: var(--ac-accent);
  box-shadow: 0 0 8px var(--ac-accent-glow);
}
.ac-prose ol { list-style: decimal; }
.ac-prose ol li { margin-bottom: .45em; }
.ac-prose img { border: 1px solid var(--ac-line); margin: 1em 0; clip-path: var(--notch-sm); }
.ac-prose code {
  font-family: var(--ac-mono);
  font-size: .85em;
  padding: .15em .45em;
  background: rgba(166, 133, 255, .1);
  border: 1px solid var(--ac-line);
  color: var(--ac-accent-soft);
}
.ac-prose pre {
  overflow-x: auto;
  padding: 16px;
  background: rgba(4, 5, 10, .7);
  border: 1px solid var(--ac-line);
  clip-path: var(--notch-sm);
}
.ac-prose pre code { background: none; border: 0; padding: 0; }
.ac-prose blockquote { margin: 1.25em 0; padding: .25em 0 .25em 16px; border-left: 2px solid var(--ac-accent); color: var(--ac-text); }
.ac-prose hr { margin: 2em 0; }
.ac-prose table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-prose th, .ac-prose td { padding: 10px 12px; border: 1px solid var(--ac-line); text-align: left; }
.ac-prose th { background: rgba(166, 133, 255, .08); color: var(--ac-text); font-family: var(--ac-font); letter-spacing: 0.7px; text-transform: uppercase; }

.ac-table-wrap { overflow-x: auto; }

/* --------------------------------------------------------------------------
   20. Package detail
   -------------------------------------------------------------------------- */

.ac-detail { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--ac-gap); align-items: start; }
@media (max-width: 880px) { .ac-detail { grid-template-columns: 1fr; } }

.ac-detail__media {
  border: 1px solid var(--ac-line);
  background: rgba(6, 7, 13, .6);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: var(--notch);
}

.ac-detail__media img { width: 100%; height: 100%; object-fit: cover; }

.ac-buybox {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
  padding: 20px;
  background: var(--ac-panel);
  border: 1px solid var(--ac-line-hi);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  clip-path: var(--notch);
}

@media (max-width: 880px) { .ac-buybox { position: static; } }

.ac-buybox__price { display: flex; align-items: baseline; gap: 8px; font-family: var(--ac-font); font-variant-numeric: tabular-nums; }

.ac-buybox__price b {
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: var(--ac-accent);
  text-shadow: 0 0 26px var(--ac-accent-glow);
}

.ac-buybox__note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ac-font);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-buybox__note svg { width: 13px; height: 13px; flex: none; color: var(--ac-accent); }

/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */

.ac-field { display: grid; gap: 7px; }

.ac-field > label {
  font-family: var(--ac-font);
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-input, .ac-select, .ac-textarea,
input[type="text"].form-control, input[type="email"].form-control,
input[type="number"].form-control, select.form-control, textarea.form-control {
  width: 100%;
  padding: 11px 14px;
  background: rgba(4, 5, 10, .7);
  border: 1px solid var(--ac-line);
  color: var(--ac-text);
  font-family: var(--ac-font-body);
  font-size: 14px;
  clip-path: var(--notch-sm);
  transition: border-color .2s var(--ease);
}

.ac-input::placeholder, .ac-textarea::placeholder {
  color: var(--ac-muted-2);
  text-transform: uppercase;
  font-family: var(--ac-font);
  font-size: 12px;
  letter-spacing: 0.7px;
}

.ac-input:focus, .ac-select:focus, .ac-textarea:focus, .form-control:focus {
  outline: none;
  border-color: var(--ac-accent);
}

.ac-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ac-muted-2) 50%),
                    linear-gradient(135deg, var(--ac-muted-2) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.ac-inputgroup { display: flex; gap: 8px; }
.ac-inputgroup .ac-input { flex: 1; min-width: 0; }

.ac-qty {
  display: inline-flex;
  align-items: center;
  background: rgba(4, 5, 10, .7);
  border: 1px solid var(--ac-line);
  clip-path: var(--notch-xs);
}

.ac-qty button {
  width: 32px; height: 36px;
  border: 0;
  background: transparent;
  color: var(--ac-muted);
  font-family: var(--ac-mono);
  font-size: 15px;
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}

.ac-qty button:hover { background: rgba(166, 133, 255, .12); color: var(--ac-accent); }

.ac-qty input {
  width: 46px; height: 36px;
  border: 0;
  border-inline: 1px solid var(--ac-line);
  background: transparent;
  color: var(--ac-text);
  font-family: var(--ac-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ac-qty input:focus { outline: none; background: rgba(166, 133, 255, .08); }
.ac-qty input::-webkit-outer-spin-button, .ac-qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.ac-loginform form { display: grid; gap: 12px; }
.ac-loginform label { font-family: var(--ac-font); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ac-muted-2); }
.ac-loginform .btn, .ac-loginform button[type="submit"], .ac-loginform input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 0;
  background: linear-gradient(180deg, var(--ac-accent), var(--ac-accent-2));
  color: var(--ac-on-accent);
  font-family: var(--ac-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--notch-sm);
}

/* --------------------------------------------------------------------------
   22. Checkout
   -------------------------------------------------------------------------- */

.ac-summary { display: grid; gap: 9px; }

.ac-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--ac-font-body);
  font-size: 13px;
  color: var(--ac-muted);
}

.ac-summary__row--total { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--ac-line); color: var(--ac-text); }

.ac-summary__row--total b {
  font-family: var(--ac-font);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ac-accent);
  text-shadow: 0 0 18px var(--ac-accent-glow);
}

.ac-payrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ac-paychip {
  padding: 4px 8px;
  border: 1px solid var(--ac-line);
  background: rgba(255, 255, 255, .03);
  font-family: var(--ac-mono);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-coupon-list { display: grid; gap: 8px; }

.ac-coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border: 1px dashed var(--ac-line-hi);
  background: rgba(4, 5, 10, .5);
  font-family: var(--ac-mono);
  font-size: 12px;
  clip-path: var(--notch-xs);
}

.ac-coupon__code { color: var(--ac-accent); letter-spacing: 0.7px; }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */

.ac-footer {
  border-top: 1px solid var(--ac-line);
  background: linear-gradient(180deg, transparent, rgba(141, 84, 255, .06));
  margin-top: var(--ac-section);
}

.ac-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 36px var(--ac-gap);
  padding-block: 48px 32px;
}

@media (max-width: 880px) { .ac-footer__grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }

.ac-footer__about { display: grid; gap: 18px; align-content: start; max-width: 36ch; }
.ac-footer__about p { font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-muted-2); }

.ac-footer__col { display: grid; gap: 10px; align-content: start; }

.ac-footer__heading {
  font-family: var(--ac-font);
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ac-accent);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ac-line);
  margin-bottom: 2px;
}

.ac-footer__col a {
  font-family: var(--ac-font);
  font-size: 12px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ac-muted);
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}

.ac-footer__col a:hover { color: var(--ac-accent); padding-left: 5px; }

.ac-social { display: flex; gap: 8px; }

.ac-social a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ac-line);
  background: rgba(255, 255, 255, .03);
  color: var(--ac-muted);
  clip-path: var(--notch-xs);
  transition: all .2s var(--ease);
}

.ac-social a:hover { color: var(--ac-accent); border-color: var(--ac-line-hi); background: rgba(166, 133, 255, .12); }
.ac-social svg { width: 17px; height: 17px; }

.ac-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 18px;
  border-top: 1px solid var(--ac-line);
  font-family: var(--ac-mono);
  font-size: 11px;
  color: var(--ac-muted-2);
}

.ac-footer__bar a:hover { color: var(--ac-muted); }

/* --------------------------------------------------------------------------
   24. Sidebar modules
   -------------------------------------------------------------------------- */

.ac-module {
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: var(--notch);
}

.ac-module__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px var(--ac-pad);
  border-bottom: 1px solid var(--ac-line);
  font-family: var(--ac-font);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-module__head svg { color: var(--ac-accent); flex: none; }
.ac-module__body { padding: var(--ac-pad); font-family: var(--ac-font-body); font-size: 13px; color: var(--ac-muted); }
.ac-module__body > p:last-child { margin-bottom: 0; }

.ac-rank {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
}

.ac-rank + .ac-rank { border-top: 1px solid var(--ac-line); }
.ac-rank__pos { font-family: var(--ac-mono); font-size: 11px; color: var(--ac-muted-2); }
.ac-rank:first-child .ac-rank__pos { color: var(--ac-accent); }
.ac-rank__amount { font-family: var(--ac-mono); font-variant-numeric: tabular-nums; color: var(--ac-text); }

.ac-meter { height: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }

.ac-meter__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ac-accent-2), var(--ac-accent));
  box-shadow: 0 0 12px var(--ac-accent-glow);
  transform-origin: left;
  animation: ac-bar-fill .8s var(--ease) forwards;
}

@keyframes ac-bar-fill { from { transform: scaleX(0); } }

/* --------------------------------------------------------------------------
   25. Toast + modal
   -------------------------------------------------------------------------- */

.ac-toast {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(30rem, calc(100vw - 32px));
  padding: 13px 18px;
  background: rgba(11, 12, 20, .97);
  border: 1px solid var(--ac-line-hi);
  border-left: 2px solid var(--ac-accent);
  backdrop-filter: blur(12px);
  font-family: var(--ac-font);
  font-size: 12px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  clip-path: var(--notch-sm);
  animation: ac-toast-in .3s var(--ease);
}

@keyframes ac-toast-in { from { opacity: 0; transform: translateY(16px); } }

.ac-toast--success { border-left-color: var(--ac-ok); }
.ac-toast--error   { border-left-color: var(--ac-danger); }
.ac-toast--warning { border-left-color: var(--ac-warn); }

.ac-toast__close { margin-left: auto; border: 0; background: transparent; color: var(--ac-muted-2); cursor: pointer; padding: 4px; line-height: 0; }
.ac-toast__close:hover { color: var(--ac-text); }

.ac-modal { position: fixed; inset: 0; z-index: 250; display: none; padding: 16px; overflow-y: auto; }
.ac-modal.is-open { display: grid; place-items: center; }
.ac-modal__scrim { position: fixed; inset: 0; background: rgba(2, 3, 7, .84); backdrop-filter: blur(8px); }

.ac-modal__panel {
  position: relative;
  width: min(42rem, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: rgba(11, 12, 20, .98);
  border: 1px solid var(--ac-line-hi);
  clip-path: var(--notch);
  animation: ac-modal-in .26s var(--ease);
}

@keyframes ac-modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } }

.ac-modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px var(--ac-pad);
  border-bottom: 1px solid var(--ac-line);
  background: rgba(11, 12, 20, .98);
}

.ac-modal__body { padding: var(--ac-pad); }

/* --------------------------------------------------------------------------
   26. Daily spin — bottom-right widget
   -------------------------------------------------------------------------- */

/* Sits under the drawer and modal (200) so it can never trap a checkout. */
.ac-spin {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 150;
  width: min(310px, calc(100vw - 24px));
}

.ac-spin[hidden] { display: none; }

.ac-spin__card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px 16px 16px;
  background: var(--ac-panel-solid);
  border: 1px solid var(--ac-line-hi);
  clip-path: var(--notch);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: ac-spin-in .45s var(--ease) both;
}

@keyframes ac-spin-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.ac-spin__close { position: absolute; top: 8px; right: 8px; }

.ac-spin__head { display: grid; gap: 2px; justify-items: center; text-align: center; }

.ac-spin__title {
  font-family: var(--ac-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

/* --- wheel ---------------------------------------------------------------- */

.ac-spin__stage {
  position: relative;
  width: min(220px, 62vw);
  aspect-ratio: 1;
  margin-inline: auto;
}

.ac-spin__wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ac-line-hi);
  /* Six 60deg slices, alternating miss / win, starting at 12 o'clock. */
  background: conic-gradient(
    rgba(17, 18, 28, .96)   0deg  60deg,
    var(--ac-accent-2)     60deg 120deg,
    rgba(17, 18, 28, .96) 120deg 180deg,
    var(--ac-accent-2)    180deg 240deg,
    rgba(17, 18, 28, .96) 240deg 300deg,
    var(--ac-accent-2)    300deg 360deg);
  box-shadow: 0 0 30px rgba(166, 133, 255, .25), inset 0 0 40px rgba(0, 0, 0, .5);
}

.ac-spin__seg {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* hug the rim, do not stretch down the radius */
  padding-top: 14px;
  transform: rotate(var(--a));
  font-family: var(--ac-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--ac-muted-2);
  pointer-events: none;
}

/* The slice is rotated into place; the label spins back so it reads level. */
.ac-spin__seg b {
  display: inline-block;   /* shrink-to-fit, so it turns about the glyph */
  transform: rotate(calc(var(--a) * -1));
  font-weight: 600;
}

.ac-spin__seg--win { color: #fff; }

.ac-spin__pointer {
  position: absolute;
  top: -8px; left: 50%;
  translate: -50% 0;
  z-index: 2;
  border: 8px solid transparent;
  border-top: 13px solid var(--ac-accent-soft);
  filter: drop-shadow(0 0 8px var(--ac-accent-glow));
}

.ac-spin__hub {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: var(--ac-on-accent);
  background: linear-gradient(160deg, var(--ac-accent-soft), var(--ac-accent-2));
  border-radius: 50%;
  box-shadow: 0 0 18px var(--ac-accent-glow);
}

/* --- result + cooldown ---------------------------------------------------- */

.ac-spin__result { display: grid; gap: 8px; justify-items: center; text-align: center; }
.ac-spin__result[hidden] { display: none; }

.ac-spin__verdict {
  font-family: var(--ac-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.ac-spin__verdict--win  { color: var(--ac-ok); }
.ac-spin__verdict--miss { color: var(--ac-muted); }

.ac-spin__coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  background: rgba(166, 133, 255, .1);
  border: 1px dashed var(--ac-line-hi);
  clip-path: var(--notch-xs);
}

.ac-spin__coupon[hidden] { display: none; }
.ac-spin__coupon .ac-mono { font-size: 13px; color: var(--ac-accent-soft); letter-spacing: .8px; }
.ac-spin__result p { margin: 0; font-size: 12px; }

.ac-spin__cooldown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--ac-font);
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ac-muted-2);
}

.ac-spin__cooldown[hidden] { display: none; }
.ac-spin__cooldown b { color: var(--ac-text); }
.ac-spin__cooldown svg { color: var(--ac-accent); }

/* --- launcher ------------------------------------------------------------- */

.ac-spin__fab {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 149;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  color: var(--ac-on-accent);
  background: linear-gradient(160deg, var(--ac-accent-soft), var(--ac-accent-2));
  border: 0;
  cursor: pointer;
  clip-path: var(--notch-sm);
  filter: drop-shadow(0 0 14px var(--ac-accent-glow));
  transition: scale .2s var(--ease);
}

.ac-spin__fab[hidden] { display: none; }
.ac-spin__fab:hover { scale: 1.06; }

.ac-spin__fab-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ac-ok);
  box-shadow: 0 0 8px var(--ac-ok);
}

.ac-spin__fab-dot[hidden] { display: none; }

@media (max-width: 420px) {
  .ac-spin { width: calc(100vw - 20px); }
}

/* --------------------------------------------------------------------------
   27. Motion — stagger, reveal, sweep
   -------------------------------------------------------------------------- */

@keyframes ac-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Both hidden states are gated behind `.ac-js`, which store.js sets on <html>
   once it has actually booted. Without that gate a failed or truncated script
   leaves every revealed element stuck at opacity 0 — an invisible page. */

/* Children of .ac-stagger rise in sequence; JS sets --i on each child. */
.ac-js .ac-stagger > * {
  opacity: 0;
  animation: ac-rise .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}

/* Scroll reveal — same rise, triggered by IntersectionObserver */
.ac-js .ac-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.ac-js .ac-reveal.is-in { opacity: 1; transform: none; }

/* Sweep line fired on section entry */
.ac-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: linear-gradient(180deg, transparent 0%, rgba(166, 133, 255, .14) 48%, rgba(166, 133, 255, .45) 50%, rgba(166, 133, 255, .14) 52%, transparent 100%);
  animation: ac-sweep .55s var(--ease) forwards;
}

@keyframes ac-sweep {
  from { transform: translateY(-100%); opacity: .9; }
  to   { transform: translateY(100%); opacity: 0; }
}

/* --------------------------------------------------------------------------
   28. Utilities
   -------------------------------------------------------------------------- */

.ac-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ac-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 400;
  padding: 12px 20px;
  background: var(--ac-accent);
  color: var(--ac-on-accent);
  font-family: var(--ac-font);
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  clip-path: var(--notch-sm);
}
.ac-skip:focus { top: 16px; }

.ac-row { display: flex; align-items: center; gap: 8px; }
.ac-row--wrap { flex-wrap: wrap; }
.ac-stack { display: grid; gap: 12px; }
.ac-stack--lg { display: grid; gap: 18px; }
.ac-hide-sm { display: initial; }

@media (max-width: 760px) { .ac-hide-sm { display: none; } }

/* --------------------------------------------------------------------------
   29. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .ac-reveal { opacity: 1; transform: none; }
  .ac-stagger > *, .ac-feed__row { opacity: 1; }
  .ac-bg-rain { display: none; }   /* JS also skips starting it */
  .ac-bg-scan { display: none; }
}