/* ==========================================================================
   AetherRise Skygen — Design System
   Single source of truth for the entire site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ---- Surfaces: black, then progressively lifted "light black" ---- */
  /* Four rungs, spaced far enough apart to actually read as different
     surfaces. Near-black bases compress perceptually, so the gaps have to be
     wider than they'd need to be on a lighter theme. */
  --black:         #0a0a0b;   /* page background          */
  --black-soft:    #141416;   /* raised block             */
  --black-light:   #26262c;   /* "light black" panels     */
  --black-lighter: #33333a;   /* hover / active surfaces  */

  --bg:            var(--black);
  --bg-elev:       var(--black-light);
  --surface:       rgba(255, 255, 255, 0.065);
  --surface-hover: rgba(255, 255, 255, 0.10);
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.19);

  /* ---- Brand: red primary, yellow accent ---- */
  --red:         #e01f31;   /* primary — passes AA with white text */
  --red-bright:  #ff3d4f;
  --red-deep:    #9e0f1e;
  --yellow:      #ffc73a;   /* accent — always pair with dark text */
  --yellow-deep: #c08a06;

  /* Legacy aliases so existing rules keep working */
  --aether: var(--red);
  --rise:   var(--yellow);
  --glow:   var(--yellow);
  --gold:   var(--yellow);

  /* ---- Semantic ---- */
  --success: #34d399;   /* stays green: "paid / online" is universal */
  --danger:  var(--red-bright);
  --warn:    var(--yellow);

  --grad-brand: linear-gradient(135deg, var(--red) 0%, #ff7a18 55%, var(--yellow) 100%);
  --grad-red:   linear-gradient(135deg, #f0293b 0%, #b81124 100%);
  --grad-text:  linear-gradient(135deg, #ff5f4d 0%, #ff9d2e 50%, #ffd24a 100%);

  /* ---- Type ---- */
  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Neutral warm greys — a blue-grey text ramp fights a red/yellow palette */
  --text:      #f2f0ee;
  --text-dim:  #a9a5a1;
  --text-mute: #706c68;

  /* Ink for use on top of yellow */
  --ink: #14100a;

  /* Tick glyph used by .product__perks, as a mask so it takes any colour */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");

  /* Space */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 68px;
  --wrap: 1140px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

/* The browser hides [hidden] with `display: none`, but that lives in the UA
   stylesheet — ANY author rule setting display (.callout is flex, .row is
   flex, .grid is grid) silently overrides it and the element stays visible.
   This must come with !important, and must apply to every element, or the
   hidden attribute becomes a no-op wherever we've set a display. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* Ambient aurora backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 12% -8%,   rgba(224, 31, 49, 0.22), transparent 60%),
    radial-gradient(760px 480px at 88% 4%,    rgba(255, 199, 58, 0.13), transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(158, 15, 30, 0.20), transparent 65%);
  pointer-events: none;
}

/* Fine grid texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

img, svg { display: block; max-width: 100%; }

/* --------------------------------------------------------------------------
   Icons — see the sprite in scripts/app.js
   Sized in em so they scale with whatever text they sit beside, and coloured
   by currentColor so they need no per-theme rules.
   -------------------------------------------------------------------------- */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
}
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 2.4em; height: 2.4em; }

/* Links use the brighter red, not --red. The primary red is tuned for white
   text sitting on top of it; as text on black it only reaches 4.16:1.
   --red-bright gets to 5.68:1, and yellow on hover is unmistakable. */
a { color: var(--red-bright); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--yellow); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.18rem; }

p { color: var(--text-dim); }

::selection { background: rgba(224, 31, 49, 0.42); color: #fff; }

:focus-visible {
  /* Yellow, not red — it stays visible against both the black background
     and the red buttons it will often sit on top of. */
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.page {
  flex: 1;
  padding-block: 56px 88px;
}

.page-narrow { max-width: 760px; margin-inline: auto; }

.stack   { display: flex; flex-direction: column; gap: 20px; }
.row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.center  { text-align: center; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-head {
  margin-bottom: 28px;
}
.section-head p { margin-top: 8px; max-width: 62ch; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.nav__brand:hover { color: #fff; }
.nav__brand img { width: 26px; height: 26px; border-radius: 6px; }
.nav__brand span {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  list-style: none;
}

.nav__links a {
  display: block;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: all .18s var(--ease);
}
.nav__links a:hover {
  color: #fff;
  background: var(--surface-hover);
}
.nav__links a[aria-current="page"] {
  color: #fff;
  background: var(--surface);
}

.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: 6px; }

.nav__cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all .18s var(--ease);
}
.nav__cart:hover { border-color: var(--border-strong); color: #fff; background: var(--surface-hover); }

.nav__cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  /* Solid yellow rather than the brand gradient: at 0.68rem the dark-on-red
     end of that gradient dropped below readable contrast. */
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}
/* (the global [hidden] rule in the reset covers this) */

.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav__burger span {
  display: block;
  width: 17px;
  height: 1.8px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__burger span + span { margin-top: 4px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__burger { display: grid; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 20px 22px;
    background: rgba(18, 18, 20, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: all .22s var(--ease);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__links.open { transform: none; opacity: 1; visibility: visible; }
  .nav__links a { padding: 12px 14px; font-size: 0.98rem; }
  .nav__actions { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* Red with white text (4.8:1). The red→yellow brand gradient is reserved for
   decorative fills — it can't carry button text at a readable contrast at
   both ends. */
.btn--primary {
  background: var(--grad-red);
  color: #fff;
  box-shadow: 0 6px 22px -6px rgba(224, 31, 49, 0.55);
}
.btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(224, 31, 49, 0.7);
}

/* Yellow call-to-action, for when you want maximum pop against the red. */
.btn--accent {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 6px 22px -6px rgba(255, 199, 58, 0.45);
}
.btn--accent:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(255, 199, 58, 0.6);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); color: #fff; }

.btn--cashapp {
  background: #00d54b;
  color: #00320f;
  box-shadow: 0 6px 22px -6px rgba(0, 213, 75, 0.5);
}
.btn--cashapp:hover { color: #00320f; transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(0, 213, 75, 0.6); }

.btn--danger { background: rgba(255, 61, 79, 0.14); border-color: rgba(255, 61, 79, 0.38); color: var(--red-bright); }
.btn--danger:hover { background: rgba(255, 61, 79, 0.24); color: var(--red-bright); }

.btn--success { background: rgba(52, 211, 153, 0.13); border-color: rgba(52, 211, 153, 0.35); color: var(--success); }
.btn--success:hover { background: rgba(52, 211, 153, 0.22); color: var(--success); }

.btn--sm { padding: 8px 14px; font-size: 0.84rem; border-radius: 9px; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.card--hover:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card--flush { padding: 0; overflow: hidden; }

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
}

.divider { height: 1px; background: var(--border); border: 0; margin-block: 20px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(60px, 10vw, 110px) clamp(48px, 8vw, 88px);
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

.hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  max-width: 60ch;
  margin: 0 auto 36px;
  color: var(--text-dim);
}

.hero__cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* Live status dot */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot--on  { background: var(--success); box-shadow: 0 0 0 0 rgba(52,211,153,.65); animation: pulse 2s infinite; }
.dot--off { background: var(--text-mute); }

@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* --------------------------------------------------------------------------
   8. Connect / copy field
   -------------------------------------------------------------------------- */
.copyfield {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .2s var(--ease);
}
.copyfield:hover { border-color: var(--border-strong); }

.copyfield__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-mute);
  font-weight: 700;
  flex-shrink: 0;
}

.copyfield__value {
  font-family: var(--font-mono);
  font-size: 0.94rem;
  color: #fff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Stat / feature tiles
   -------------------------------------------------------------------------- */
.stat {
  text-align: center;
  padding: 22px 16px;
}
.stat__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.stat__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-top: 8px;
  font-weight: 600;
}

.feature__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   10. Shop
   -------------------------------------------------------------------------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  overflow: hidden;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.product::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.product:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.product:hover::before { opacity: 1; }

.product--featured { border-color: rgba(255, 199, 58, 0.42); }
.product--featured::before { opacity: 1; }

.product__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--ink);
}

.product__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  margin-bottom: 16px;
}

.product__name { font-size: 1.2rem; margin-bottom: 7px; }
.product__desc { font-size: 0.9rem; flex: 1; margin-bottom: 18px; }

.product__price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1;
}
.product__price small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-mute);
  margin-left: 5px;
}

.product__perks {
  list-style: none;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.product__perks li {
  font-size: 0.85rem;
  color: var(--text-dim);
  padding-left: 21px;
  position: relative;
}
/* Tick rendered as a masked SVG rather than a text glyph, so it matches the
   rest of the icon set instead of depending on the font's checkmark. */
.product__perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 14px;
  background-color: var(--yellow);
  -webkit-mask: var(--tick) no-repeat center / contain;
  mask: var(--tick) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   11. Cart & line items
   -------------------------------------------------------------------------- */
.line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.line:last-child { border-bottom: 0; }

.line__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.line__body { flex: 1; min-width: 0; }
.line__name { font-weight: 600; color: #fff; font-size: 0.98rem; }
.line__meta { font-size: 0.82rem; color: var(--text-mute); }
.line__price { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem; }

.qty {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
}
.qty button {
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.qty button:hover { background: var(--surface-hover); color: #fff; }
.qty span {
  min-width: 28px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.totals { display: flex; flex-direction: column; gap: 11px; }
.totals__row { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--text-dim); }
.totals__row--grand {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}

/* --------------------------------------------------------------------------
   12. Checkout steps
   -------------------------------------------------------------------------- */
.steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--text-mute);
  font-weight: 600;
}
.step__num {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  font-size: 0.76rem;
  flex-shrink: 0;
}
.step[data-state="active"] { color: #fff; }
.step[data-state="active"] .step__num { background: var(--red); border-color: transparent; color: #fff; }
.step[data-state="done"] { color: var(--success); }
.step[data-state="done"] .step__num { border-color: var(--success); color: var(--success); }
.step__bar { width: 26px; height: 1px; background: var(--border); }

/* Cash App payment block */
.paybox {
  border: 1px solid rgba(0, 213, 75, 0.28);
  background: linear-gradient(160deg, rgba(0, 213, 75, 0.07), transparent 62%);
  border-radius: var(--r-lg);
  padding: 28px;
  text-align: center;
}

.paybox__amount {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}

.paybox__to {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: #00d54b;
  font-weight: 600;
  margin-bottom: 26px;
}

.ordercode {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed var(--border-strong);
  margin-block: 6px 22px;
}
.ordercode code {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.callout {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: rgba(255, 199, 58, 0.09);
  border: 1px solid rgba(255, 199, 58, 0.26);
  text-align: left;
  font-size: 0.88rem;
  color: #ffe6a6;
}
/* Info is deliberately neutral. With red already meaning "danger" and yellow
   meaning "warning", a third hue would dilute both — so notes read as plain
   raised surface instead. */
.callout--info    { background: rgba(255, 255, 255, 0.05); border-color: var(--border-strong);      color: #ddd9d5; }
.callout--danger  { background: rgba(255, 61, 79, 0.09);   border-color: rgba(255, 61, 79, 0.30);   color: #ffc9ce; }
.callout--success { background: rgba(52, 211, 153, 0.08);  border-color: rgba(52, 211, 153, 0.26);  color: #a7f3d0; }
.callout strong { color: #fff; }

/* Numbered how-to list */
.howto { list-style: none; counter-reset: howto; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.howto li {
  counter-increment: howto;
  position: relative;
  padding-left: 40px;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.howto li::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
}
.howto strong { color: #fff; }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
}

.input, input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%;
  padding: 12px 15px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--aether);
  background: rgba(0, 0, 0, 0.45);
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }

textarea { resize: vertical; min-height: 110px; }

.input-group { position: relative; }
.input-group .input { padding-right: 46px; }
.input-group__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .6;
  transition: opacity .15s var(--ease);
}
.input-group__btn:hover { opacity: 1; }
.input-group__btn img { width: 18px; }

.form-msg { font-size: 0.86rem; min-height: 1.3em; }
.form-msg--err { color: var(--danger); }
.form-msg--ok  { color: var(--success); }

/* --------------------------------------------------------------------------
   14. Badges, tables, empty states
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  text-transform: uppercase;
}
.badge--pending  { background: rgba(255,199,58,.14);  border-color: rgba(255,199,58,.34);  color: var(--yellow); }
.badge--review   { background: rgba(255,255,255,.07); border-color: var(--border-strong);  color: #e6e2de; }
.badge--done     { background: rgba(52,211,153,.13);  border-color: rgba(52,211,153,.32);  color: var(--success); }
.badge--rejected { background: rgba(255,61,79,.14);   border-color: rgba(255,61,79,.34);   color: var(--red-bright); }

.empty {
  text-align: center;
  padding: 64px 24px;
}
/* Sizing comes from .icon--xl on the SVG, so no font-size here — otherwise the
   em-based icon multiplies against it and renders enormous. */
.empty__icon {
  margin-bottom: 14px;
  color: var(--text-mute);
  display: flex;
  justify-content: center;
}
.empty h3 { margin-bottom: 8px; }
.empty p { margin-bottom: 22px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r);
  height: 84px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   15. Toast
   -------------------------------------------------------------------------- */
.toaster {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 19px;
  border-radius: 12px;
  background: rgba(28, 28, 32, 0.98);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.9rem;
  color: var(--text);
  animation: toast-in .3s var(--ease);
  max-width: min(360px, calc(100vw - 48px));
  pointer-events: auto;
}
.toast--ok  { border-color: rgba(52, 211, 153, 0.45); }
.toast--err { border-color: rgba(255, 61, 79, 0.5); }
.toast.out { animation: toast-out .25s var(--ease) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px) scale(.97); } }

@media (max-width: 560px) {
  .toaster { left: 16px; right: 16px; bottom: 16px; }
  .toast { max-width: none; }
}

/* --------------------------------------------------------------------------
   16. Team, events, socials
   -------------------------------------------------------------------------- */
.member { text-align: center; padding: 30px 24px; }
.member img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 2px solid var(--border-strong);
  image-rendering: pixelated;
}
.member h3 { margin-bottom: 4px; }
.member__role {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.member p { font-size: 0.88rem; }

.event {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
}
.event__date {
  flex-shrink: 0;
  width: 74px;
  text-align: center;
  padding: 11px 6px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.event__month {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}
.event__day {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.event__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.event__sub { font-size: 0.84rem; color: var(--text-mute); }

.social {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 20px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all .18s var(--ease);
}
.social:hover { border-color: var(--border-strong); background: var(--surface-hover); transform: translateX(3px); }
.social__icon { font-size: 1.4rem; width: 30px; text-align: center; flex-shrink: 0; }
.social__name { font-weight: 600; color: #fff; font-size: 0.96rem; }
.social__handle { font-size: 0.83rem; color: var(--text-mute); }
.social__arrow { margin-left: auto; color: var(--text-mute); }

/* Daily login reward tiles */
.rewards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
}
.reward {
  position: relative;
  padding: 22px 16px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  transition: all .2s var(--ease);
}
.reward__day {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.reward__prize { font-size: 0.92rem; font-weight: 600; color: #fff; margin-bottom: 14px; }
.reward--claimed { opacity: .5; border-color: rgba(52,211,153,.3); }
.reward--current { border-color: var(--red); box-shadow: 0 0 0 1px rgba(224,31,49,.28), 0 8px 30px -10px rgba(224,31,49,.5); }
.reward--locked  { opacity: .38; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 40px 32px;
  margin-top: auto;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__brand { font-family: var(--font-display); font-weight: 800; color: #fff; }
.footer p { font-size: 0.86rem; color: var(--text-mute); }
.footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__links a { font-size: 0.86rem; color: var(--text-mute); }
.footer__links a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.mono { font-family: var(--font-mono); }
.dim  { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.small { font-size: 0.86rem; }
.tiny  { font-size: 0.78rem; }
.hidden { display: none !important; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

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

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

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

@media (max-width: 640px) {
  .card, .panel, .product, .paybox { padding: 20px; }
  .page { padding-block: 36px 64px; }
}