/* ═══════════════════════════════════════════════════════════════════
   FLYSKYMODS — theme.css
   The FlySkyMods visual identity layer.

   Loaded AFTER style.css and app.css on every page. It intentionally
   does not replace them: those files carry the layout and the JS-facing
   class contracts that every page and the admin console depend on.
   This file re-tokenises the palette, replaces the typography, and
   restyles the shared components on top of that structure.

   Editing rules:
   - Change colour ONLY through the tokens in :root. Nothing below
     hard-codes a brand colour.
   - Selectors here match the specificity of the rule they override, no
     more. If something refuses to apply, find the more specific rule in
     style.css / app.css rather than reaching for !important.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground: midnight navy through dark navy to charcoal blue ── */
  --ink:        #050912;
  --ink-2:      #09111F;
  --surface:    #0E1626;
  --surface-2:  #111827;
  --surface-3:  #182133;

  /* ── Atmosphere: the colours that only ever appear as light.
        The violet-* names are historical — style.css and app.css
        reference them by name, so repointing them at the wine/rose
        family re-skins every one of those rules without touching them.
        Nothing in this palette is violet any more. ── */
  --indigo:     #14203A;
  --violet-deep:#6F3048;   /* burgundy / wine  */
  --violet:     #A85C72;   /* muted rose       */
  --violet-dim: #8A4A5E;
  --rose:       #C07A8D;
  --violet-lt:  #D9A8B4;
  --violet-lt2: #E4BEC6;
  --violet-hi:  #C08496;

  /* Atmosphere blooms. Saturated on their own, but they are only ever
     used behind a 100px+ blur at low opacity. */
  --glow-indigo:#22314F;
  --glow-violet:#5A2A3E;
  --glow-gold:  #7A5A24;

  /* ── Champagne gold: the money accent. Used sparingly. ── */
  --gold:       #D6A85A;
  --gold-deep:  #B98A45;
  --champagne:  #E7C77A;
  /* Text that sits ON the champagne button. Near-black with a warm cast so
     it reads as ink on gold rather than black on yellow. */
  --on-gold:    #1A1206;

  /* ── Text: warm white over a cool ground, so the type reads as paper
        rather than as screen-blue ── */
  --text:       #F7F4EE;
  --text-2:     #A9AFBD;
  --text-3:     #707789;

  /* ── Lines: neutral, never pure ── */
  --line:       rgba(199,206,222,0.085);
  --line-2:     rgba(199,206,222,0.16);
  --line-gold:  rgba(214,168,90,0.32);

  /* ── Semantic (kept separate from the accent hues) ── */
  --ok:         #34D399;
  --warn:       #F0B44B;
  --danger:     #F2596B;
  /* Tints of the semantic colours, for text on their own tinted panels. */
  --ok-text:    #86EFC4;
  --danger-text:#FFA9B4;

  /* ── Legacy aliases: style.css and app.css reference these by name.
        Repointing them re-skins every existing rule at once. ── */
  --bg:         #050912;
  --bg-2:       #09111F;
  --card:       #0E1626;
  --card-navy:  #111827;
  --blue:       #A85C72;
  --blue-bright:#C07A8D;
  --blue-glow:  #D9A8B4;
  --blue-dark:  #6F3048;
  --white:      #F7F4EE;
  --grey:       #A9AFBD;
  --muted:      #707789;
  --green:      #34D399;
  --border:     rgba(199,206,222,0.085);

  /* ── Geometry: tighter radii read precise, not playful ── */
  --radius-sm:  9px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-pill:999px;

  /* ── Elevation: shadows sit in the ground colour, not pure black ── */
  --shadow-sm:  0 1px 2px rgba(2,4,10,.5), 0 4px 14px rgba(2,4,10,.35);
  --shadow:     0 2px 6px rgba(2,4,10,.45), 0 14px 40px rgba(2,4,10,.5);
  --shadow-lg:  0 4px 12px rgba(2,4,10,.5), 0 30px 80px rgba(2,4,10,.62);
  --shadow-gold:0 10px 30px rgba(182,140,60,.28);
  --shadow-violet:0 10px 34px rgba(168,92,114,.3);

  /* ── Type ── */
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-head:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display:'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  /* ── Motion: one easing, three durations ── */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --t-fast:     .15s var(--ease);
  --t:          .22s var(--ease);
  --t-slow:     .4s var(--ease);
  --transition: .22s cubic-bezier(.22,.61,.36,1);
}

/* ═══════════════════════════════════════════════════════════════════
   2. GROUND + ATMOSPHERE

   One fixed backdrop for the whole site: three radial light pools over
   near-black, plus a fine technical grid. Fixed rather than scrolling
   so the light stays put and the page moves through it — that is what
   makes it read as atmosphere instead of a painted gradient.

   Both layers are on the body's ::before/::after with position:fixed, so
   they cost one composited layer and never repaint on scroll.
   ═══════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background-color: var(--ink);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* violet pool, upper right — the dominant atmospheric light */
    radial-gradient(105ch 70ch at 82% -8%,  rgba(112, 78, 214, .30), transparent 62%),
    /* indigo pool, upper left */
    radial-gradient(95ch 62ch at 4% 2%,    rgba(38,  50, 140, .34), transparent 60%),
    /* warm runway glow, low centre — the gold never appears as paint */
    radial-gradient(80ch 46ch at 46% 104%, rgba(176,126, 58, .17), transparent 64%),
    /* deep rose bloom, mid right */
    radial-gradient(70ch 52ch at 96% 52%,  rgba(140, 66, 140, .13), transparent 62%),
    linear-gradient(180deg, #05080F 0%, #060B18 42%, #04070F 100%);
}

/* Fine technical grid — barely there, gives the ground a scale reference. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(199,206,222,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,206,222,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  /* Fades out toward the bottom so it never competes with content. */
  -webkit-mask-image: radial-gradient(120ch 90ch at 50% 12%, #000 0%, transparent 78%);
          mask-image: radial-gradient(120ch 90ch at 50% 12%, #000 0%, transparent 78%);
}

/* Sections that previously painted their own flat background must become
   transparent, or they punch a hole in the atmosphere. */
.section,
.products-catalogue-section,
.featured-section,
.categories-section,
.why-section,
.community-section,
.stats-section,
.pd-page,
.dash-page,
.auth-page,
.checkout-page,
.cart-page {
  background: transparent;
}

::selection { background: rgba(168,92,114,.34); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY

   Instrument Serif carries the brand voice at display sizes only.
   Inter does all the operational work. Nothing else is introduced.
   ═══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

.section { padding: 62px 0; }
.section-header { text-align: center; margin-bottom: 38px; }

.section-eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Hairline rules either side of the eyebrow — a quiet aviation-panel cue. */
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  height: 1px;
  width: 34px;
  background: linear-gradient(90deg, transparent, var(--line-gold));
}
.section-eyebrow::after { background: linear-gradient(90deg, var(--line-gold), transparent); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 18px;
}
.section-title .accent {
  background: linear-gradient(96deg, var(--champagne) 8%, var(--gold) 46%, var(--rose) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.section-desc {
  font-size: 1.03rem;
  color: var(--text-2);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.7;
}
.section-cta { text-align: center; margin-top: 36px; }

/* Anything numeric lines up in columns. */
.stat-num, .product-price, .product-price-old, .pd-price, .cart-total,
.co-total-value, .ao-stat-num, .pd-spec-value, .fsm-figure {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}

/* ═══════════════════════════════════════════════════════════════════
   4. NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */

.navbar {
  background: rgba(6, 10, 22, .55);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.navbar.scrolled {
  background: rgba(5, 8, 18, .86);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(199,206,222,.04), 0 18px 44px rgba(2,4,10,.5);
}
.nav-inner { height: 74px; }

.nav-brand-icon {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.nav-logo {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .13em;
  font-size: .96rem;
  color: var(--text);
}
.nav-logo span {
  background: linear-gradient(100deg, var(--champagne), var(--gold));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links { gap: 4px; }
.nav-links a {
  position: relative;
  font-size: .875rem;
  font-weight: 450;
  color: var(--text-2);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
}
.nav-links a:hover { color: var(--text); background: rgba(199,206,222,.05); }

/* Active page marker: a short champagne rule, not a glowing pill. */
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--champagne));
}

.nav-icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  border: 1px solid var(--line);
  background: rgba(199,206,222,.03);
  transition: color var(--t), background var(--t), border-color var(--t);
}
.nav-icon-btn:hover {
  color: var(--text);
  background: rgba(199,206,222,.075);
  border-color: var(--line-2);
}

.cart-count {
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  color: var(--on-gold);
  font-weight: 700;
  font-size: .66rem;
  box-shadow: 0 2px 8px rgba(182,140,60,.45);
}

.nav-hamburger span { background: var(--text-2); border-radius: 2px; }

.search-bar { background: rgba(5,8,18,.94); border-top: 1px solid transparent; }
.search-bar.open { border-top-color: var(--line); }
.search-inner input { color: var(--text); font-size: .95rem; }
.search-inner input::placeholder { color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════════
   5. BUTTONS

   Two weights only. Champagne = the action that makes money.
   Everything else is a bordered glass surface.
   ═══════════════════════════════════════════════════════════════════ */

.btn-primary,
.btn-cart,
.btn-buy,
.pd-btn-buy,
.btn-getstarted,
.co-submit-btn,
.cart-checkout-btn {
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: -.005em;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--champagne) 0%, var(--gold) 58%, var(--gold-deep) 100%);
  color: var(--on-gold);
  border: none;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn-primary:hover,
.btn-cart:hover,
.btn-buy:hover,
.pd-btn-buy:hover,
.btn-getstarted:hover,
.co-submit-btn:hover:not(:disabled),
.cart-checkout-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 40px rgba(182,140,60,.36), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:active,
.btn-cart:active,
.btn-buy:active,
.pd-btn-buy:active { transform: translateY(0); }

.btn-primary { padding: 14px 30px; font-size: .93rem; }

/* Secondary: glass with a hairline. Never competes with the gold. */
.btn-ghost,
.btn-details,
.pd-btn-cart,
.btn-insta,
.btn-action.secondary {
  font-family: var(--font);
  font-weight: 550;
  border-radius: var(--radius-sm);
  background: rgba(199,206,222,.045);
  border: 1px solid var(--line-2);
  color: var(--text);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.btn-ghost:hover,
.btn-details:hover,
.pd-btn-cart:hover,
.btn-insta:hover {
  background: rgba(199,206,222,.09);
  border-color: rgba(199,206,222,.26);
  transform: translateY(-2px);
}
.btn-ghost { padding: 13px 28px; font-size: .93rem; }

/* Discord keeps its own brand colour but loses the blue glow. */
/* Discord keeps its own blurple. It is a third-party brand colour, not
   part of the FlySkyMods palette, so it is deliberately NOT a token —
   changing the site's accent must not silently restyle someone's logo. */
.btn-discord {
  background: rgba(88,101,242,.16);
  border: 1px solid rgba(120,132,255,.35);
  color: #C7CEFF;
  box-shadow: none;
  border-radius: var(--radius-sm);
}
.btn-discord:hover { background: rgba(88,101,242,.26); transform: translateY(-2px); }

/* Focus: one visible ring everywhere, including keyboard-only. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   6. SURFACES + PRODUCT CARDS

   A card is a solid navy panel with a hairline edge and a single
   highlight along its top edge, as if lit from above. On hover it
   rises 3px and its edge warms — no glow, no scale.
   ═══════════════════════════════════════════════════════════════════ */

.product-card,
.stat-card,
.cat-card,
.why-card,
.dash-panel,
.dl-card,
.co-form-card,
.co-summary-card,
.cart-summary-card,
.newsletter-glass,
.auth-card,
.fsm-panel {
  background: linear-gradient(180deg, rgba(17,26,54,.72) 0%, rgba(11,18,38,.82) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
/* The lit top edge. 1px, and it stops before the corners. */
.product-card::before,
.dash-panel::before,

.cart-summary-card::before,
.co-form-card::before,
.co-summary-card::before,
.auth-card::before,
.fsm-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,206,222,.22), transparent);
  pointer-events: none;
  z-index: 2;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow), 0 0 0 1px rgba(214,172,99,.08);
}
.stat-card:hover,
.cat-card:hover,
.why-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}

/* Image well: darker than the card so the photo reads as inset. */
.product-img,
.product-img-card,
.product-img-large,
.product-img-row {
  background: var(--ink-2);
  overflow: hidden;
}
.product-art,
.product-art-photo,
.featured-photo {
  transition: transform .45s var(--ease);
  will-change: transform;
}
.product-card:hover .product-art,
.product-card:hover .product-art-photo { transform: scale(1.045); }
.card-large:hover .featured-photo { transform: scale(1.06); }

/* A gradient scrim under every product photo so overlaid type stays legible. */
.product-img-card::after,
.product-img-large::after,
.product-img-row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,7,15,.06) 0%, rgba(4,7,15,0) 42%, rgba(4,7,15,.72) 100%);
  pointer-events: none;
}

/* ── Badges: quiet, uppercase, hairline. Not stickers. ── */
.product-badge {
  top: 12px; left: 12px;
  padding: 5px 10px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: rgba(6,10,22,.82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--line-gold);
  color: var(--champagne);
  box-shadow: none;
  z-index: 3;
}
.product-badge.badge-new,
.product-badge.badge-violet {
  border-color: rgba(168,92,114,.42);
  color: var(--violet-lt2);
}
.product-badge.badge-muted {
  border-color: var(--line-2);
  color: var(--text-2);
}

.product-name {
  font-family: var(--font);
  font-weight: 620;
  letter-spacing: -.014em;
  color: var(--text);
  line-height: 1.28;
}
.product-desc { color: var(--text-2); line-height: 1.58; }

.product-price {
  font-family: var(--font);
  font-weight: 680;
  color: var(--text);
}
.product-price-old { color: var(--text-3); }

/* The card's own metadata row, replacing the invented star ratings. */
.product-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 11px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
}
.product-meta-row .pm-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.product-meta-row .pm-sim { color: var(--gold); }

.stars { color: var(--gold); }
.rating-n { color: var(--text-3); }

/* ── Filter bar ── */
.filter-bar { gap: 8px; }
.filter-btn {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(199,206,222,.03);
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 550;
  padding: 9px 20px;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.filter-btn:hover { color: var(--text); border-color: var(--line-2); background: rgba(199,206,222,.07); }
.filter-btn.active {
  background: rgba(214,172,99,.12);
  border-color: var(--line-gold);
  color: var(--champagne);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   7. HERO — cinematic split: copy left, photograph right

   Previous versions ran the photo full-bleed behind everything and then
   darkened it enough to read type over. That destroyed the photography,
   which was the whole point of having it.

   Now the photograph owns its own column. It bleeds off the top and right
   edges of the viewport and dissolves only along its LEFT edge, where the
   copy is. The right 40% of the panel is untouched photograph — the
   aircraft, the wet runway and the city lights arrive at full brightness.

   Source is 1200x750 shown in an ~835x470 panel, so it DOWNSCALES. Every
   earlier attempt upscaled a 1020x450 crop and looked soft.
   ═══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  padding-top: 72px;          /* clears the fixed navbar */
  min-height: 542px;
  display: flex;
  align-items: stretch;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
}
.hero::before { display: none; }

/* ── The photograph column ── */
.hero-photo-panel {
  position: absolute;
  top: 72px;
  right: 0;
  bottom: 0;
  width: 57%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('/assets/products/boeing-777-family-card.jpg');
  background-size: cover;
  background-position: 62% 42%;
  /* Lifted, not lowered. The brief was explicit that a heavy overlay
     destroying the photography is worse than no photo at all. */
  filter: brightness(1.08) contrast(1.06) saturate(1.06);
}

/* Feathers the LEFT edge into the page ground so the panel has no visible
   border, and only lightly weights the top and bottom. Nothing sits over
   the middle-right, which is where the airframe is. */
.hero-photo-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(4,7,15,.92) 10%,
      rgba(4,7,15,.62) 22%,
      rgba(4,7,15,.24) 38%,
      rgba(4,7,15,.04) 54%,
      transparent 66%),
    linear-gradient(180deg, rgba(4,7,15,.5) 0%, rgba(4,7,15,.06) 16%, transparent 30%),
    linear-gradient(0deg,  var(--ink) 0%, rgba(4,7,15,.42) 9%, transparent 26%);
}

/* A whisper of the site's atmosphere over the photo so it belongs to the
   palette. Screen, not multiply — it adds light instead of removing it. */
.hero-photo-tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: .16;
  background:
    radial-gradient(60% 70% at 78% 26%, rgba(168,92,114,.55), transparent 62%),
    radial-gradient(52% 60% at 46% 92%, rgba(255,186,110,.45), transparent 60%);
}

/* ── Copy column ── */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
}
.hero-content {
  max-width: 30.5rem;
  padding: 40px 0 44px;
  /* style.css centres the old hero (margin auto + text-align center);
     without these resets the copy renders centred over the aircraft's
     nose — caught by the run driver's first screenshot. */
  margin: 0;
  text-align: left;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 11px;
  border-radius: 6px;
  background: rgba(214,172,99,.09);
  border: 1px solid var(--line-gold);
  color: var(--champagne);
  font-size: .665rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-pill .hp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(214,172,99,.2);
}

/* 52px -> 74px. The aircraft has to stay the equal partner; at the sizes
   used earlier the type simply won and the composition collapsed back
   into a text hero. */
.hero-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 4.6vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -.022em;
  color: var(--text);
  margin-bottom: 18px;
  text-shadow: 0 2px 34px rgba(4,7,15,.85);
}
/* One restrained warm tint on the second line. The gold-to-pink-to-violet
   sweep used before read as cheap, and it was. */
.hero-heading .accent-gold {
  background: linear-gradient(96deg, var(--champagne) 10%, var(--gold) 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The violet stays two steps quieter than the gold: light tints only,
   never the saturated core hue, so the pair reads as stage lighting
   rather than a rainbow. */
.hero-heading .accent-violet {
  background: linear-gradient(96deg, var(--violet-lt2) 8%, var(--violet-hi) 92%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.62;
  margin-bottom: 28px;
  max-width: 30rem;
  text-shadow: 0 1px 18px rgba(4,7,15,.9);
}

.hero-btns { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-btns .btn-primary { padding: 14px 26px; font-size: .92rem; border-radius: var(--radius-sm); }
.hero-btns .btn-ghost {
  padding: 13px 24px;
  font-size: .92rem;
  border-radius: var(--radius-sm);
  background: rgba(10,17,36,.66);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.btn-arrow { display: inline-block; transition: transform var(--t); }
.btn-primary:hover .btn-arrow { transform: translateX(3px); }

.hero-trustline {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .8rem;
  color: var(--text-3);
}
.hero-avatars { display: flex; align-items: center; }
/* Overlapping gradient discs — deliberately abstract. Stock photographs
   of people presented as customers would be an invented claim. */
.hero-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  margin-right: -8px;
}
.hero-avatar:last-child { margin-right: 0; }
.hero-avatar.av1 { background: linear-gradient(140deg, var(--violet), var(--violet-deep)); }
.hero-avatar.av2 { background: linear-gradient(140deg, var(--gold), var(--gold-deep)); }
.hero-avatar.av3 { background: linear-gradient(140deg, var(--rose), var(--violet-dim)); }
.hero-avatar.av4 { background: linear-gradient(140deg, var(--violet-lt), var(--glow-indigo)); }
.dot-green {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52,211,153,.15);
  flex-shrink: 0;
}

/* ── Right-edge info panels ──
   Three compact stacked panels hugging the viewport's right edge, as in
   the reference composition. Their left edges stop well short of the
   airframe, which sits at the photo panel's centre. */
.hero-panels {
  position: absolute;
  right: 24px;
  top: 118px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 238px;
}
.hero-panel {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(8,15,30,.68);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), transform var(--t);
}
.hero-panel:hover { border-color: var(--line-gold); transform: translateX(-3px); }
.hero-panel-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(214,172,99,.12);
  border: 1px solid var(--line-gold);
  color: var(--gold);
}
.hero-panel-text { font-size: .68rem; color: var(--text-3); line-height: 1.35; }
.hero-panel-text strong {
  display: block;
  font-size: .8rem;
  font-weight: 620;
  color: var(--text);
  letter-spacing: -.006em;
  margin-bottom: 1px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hero-photo-panel { width: 62%; }
  .hero-content { max-width: 27rem; }
  .hero-heading { font-size: clamp(2.9rem, 5.2vw, 3.6rem); }
}

@media (max-width: 860px) {
  /* Tablet rearranges rather than shrinks: the photo becomes a band above
     the copy so the aircraft stays visible and nothing sits on top of it. */
  .hero {
    display: block;
    padding-top: 64px;
    min-height: 0;
  }
  .hero-photo-panel {
    position: relative;
    top: 0;
    width: 100%;
    height: 300px;
  }
  .hero-photo { background-position: 58% 40%; }
  .hero-photo-fade {
    background:
      linear-gradient(180deg, rgba(4,7,15,.42) 0%, transparent 22%),
      linear-gradient(0deg, var(--ink) 0%, rgba(4,7,15,.72) 22%, transparent 58%);
  }
  .hero-inner { padding: 0 24px; }
  .hero-content { max-width: 100%; padding: 4px 0 32px; }
  .hero-heading { font-size: clamp(2.5rem, 8vw, 3.2rem); }
  /* Panels drop out of the photo and become a horizontal row under the
     copy — the aircraft band above stays clean. */
  .hero-panels {
    position: static;
    flex-direction: row;
    width: auto;
    margin: 0 24px 26px;
  }
  .hero-panel { flex: 1; }
}

@media (max-width: 600px) {
  .hero-photo-panel { height: 224px; }
  .hero-heading { font-size: clamp(2.15rem, 10vw, 2.7rem); }
  .hero-sub { font-size: .94rem; }
  .hero-sub br { display: none; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn-primary, .hero-btns .btn-ghost { width: 100%; text-align: center; padding: 15px 22px; }
  .hero-panels { flex-direction: column; margin: 0 18px 24px; }
}


/* ═══════════════════════════════════════════════════════════════════
   8. TRUST BAR

   One horizontal bar with hairline separators, not four cards. Sits
   directly under the hero and overlaps its base slightly so the two read
   as a single composition.
   ═══════════════════════════════════════════════════════════════════ */

.trust-strip { position: relative; z-index: 2; padding: 0 0 26px; margin-top: -26px; }
.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10,17,36,.82);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.trust-cell {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}
.trust-cell:last-child { border-right: none; }
.trust-cell-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line-gold);
  background: rgba(214,172,99,.07);
  color: var(--gold);
}
.trust-cell-title {
  font-size: .855rem;
  font-weight: 620;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 1px;
}
.trust-cell-sub { font-size: .755rem; color: var(--text-3); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════
   9. FEATURED — product grid beside the global trust panel
   ═══════════════════════════════════════════════════════════════════ */

.featured-section { padding: 44px 0 34px; }

.featured-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: stretch;
}
.featured-main { display: flex; flex-direction: column; min-width: 0; }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
/* Section headings on the marketplace rows stay in the UI face and stay
   small. The display serif is reserved for the hero, or the whole page
   turns into an editorial spread and the products stop being the point. */
.section-title-sm {
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--text);
  line-height: 1.12;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* The short gold dash after the heading, as in the reference. */
.section-title-sm::after {
  content: '';
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-top: 4px;
}
.section-sub-sm { font-size: .875rem; color: var(--text-3); line-height: 1.5; }
.btn-sm { padding: 9px 17px; font-size: .8rem; white-space: nowrap; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  flex: 1;
}

/* ── Product card: image on top, information below ── */
.product-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(17,26,54,.72) 0%, rgba(11,18,38,.86) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow), 0 0 0 1px rgba(214,172,99,.08);
}

.pcard-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-2);
  flex-shrink: 0;
}
.pcard-media img,
.pcard-media svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--ease);
}
.product-card:hover .pcard-media img { transform: scale(1.03); }
/* Merges the photograph into the information block below it. */
.pcard-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,7,15,.05) 0%, rgba(4,7,15,0) 46%, rgba(11,18,38,.92) 100%);
  pointer-events: none;
}

.pcard-badge {
  position: absolute;
  top: 11px; left: 11px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: rgba(6,10,22,.84);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--line-gold);
  color: var(--champagne);
}
.pcard-badge.is-violet { border-color: rgba(168,92,114,.45); color: var(--violet-lt2); }
.pcard-badge.is-muted  { border-color: var(--line-2); color: var(--text-2); }

.pcard-body {
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard-name {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -.014em;
  color: var(--text);
  line-height: 1.28;
  margin-bottom: 3px;
}
.pcard-dev { font-size: .78rem; color: var(--text-3); margin-bottom: 10px; }
.pcard-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: .7rem;
  color: var(--text-3);
  margin-bottom: 14px;
}
.pcard-meta .pm-sim { color: var(--gold); font-weight: 550; }
.pcard-meta .pm-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }

.pcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.pcard-price {
  font-family: var(--font);
  font-size: 1.16rem;
  font-weight: 680;
  letter-spacing: -.028em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pcard-price-was {
  display: block;
  font-size: .75rem;
  font-weight: 450;
  color: var(--text-3);
  text-decoration: line-through;
}
.pcard-actions { display: flex; align-items: center; gap: 7px; }
.pcard-cart {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line-gold);
  background: rgba(214,168,90,.1);
  color: var(--gold);
  transition: background var(--t), color var(--t), transform var(--t);
}
.pcard-cart:hover {
  background: linear-gradient(140deg, var(--champagne), var(--gold));
  color: var(--on-gold);
  transform: translateY(-1px);
}
.pcard-details {
  padding: 8px 13px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 550;
  border: 1px solid var(--line-2);
  background: rgba(199,206,222,.045);
  color: var(--text);
  white-space: nowrap;
  transition: background var(--t), border-color var(--t);
}
.pcard-details:hover { background: rgba(199,206,222,.1); border-color: rgba(199,206,222,.26); }

/* ── Global trust panel ── */
.globe-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(20,32,58,.85) 0%, rgba(11,18,38,.92) 55%, rgba(6,10,22,.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 24px 24px;
  min-height: 340px;
}
.globe-art { position: absolute; inset: 0; pointer-events: none; }
/* Earth limb: a sphere lit from the upper right, cropped by the panel so
   only the top arc shows — the horizon, not a planet in a box. */
.globe-sphere {
  position: absolute;
  top: -46%; left: 50%;
  width: 132%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 24%, rgba(150,176,220,.3) 0%, rgba(38,58,96,.26) 34%, rgba(10,14,34,.9) 68%),
    radial-gradient(circle at 50% 50%, rgba(8,12,28,1) 62%, transparent 63%);
  box-shadow: inset 0 0 90px rgba(120,150,200,.2);
}
/* Warm terminator along the lit limb. */
.globe-terminator {
  position: absolute;
  top: -46%; left: 50%;
  width: 132%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: transparent;
  box-shadow: inset -14px 14px 46px rgba(242,223,176,.16);
}
.globe-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.globe-city {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 7px rgba(242,223,176,.85);
  opacity: .8;
}
.globe-content { position: relative; z-index: 1; }
.globe-title {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: 10px;
}
.globe-rule {
  display: block;
  width: 38px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--champagne), var(--gold));
  margin-bottom: 20px;
}
.globe-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
}
.globe-stat-num {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--champagne), var(--gold));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.globe-stat:nth-child(2) .globe-stat-num,
.globe-stat:nth-child(3) .globe-stat-num {
  background: linear-gradient(120deg, var(--violet-lt2), var(--violet-hi));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.globe-stat-label { font-size: .73rem; color: var(--text-3); margin-top: 2px; line-height: 1.35; }

/* ═══════════════════════════════════════════════════════════════════
   10. PARTNERS, TESTIMONIAL, BENEFITS
   ═══════════════════════════════════════════════════════════════════ */

.partner-band { padding: 12px 0 34px; }
.partner-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: stretch;
}
.partner-strip {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 17px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10,17,36,.55);
}
.partner-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.partner-list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
/* Set in type, muted, and only lifting to full white on hover. Wordmarks
   at low contrast read as a credential; at full contrast they compete
   with the FlySkyMods brand itself. */
.partner-name {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-3);
  opacity: .72;
  transition: color var(--t), opacity var(--t);
}
.partner-name:hover { color: var(--text-2); opacity: 1; }

.testimonial {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10,17,36,.55);
  margin: 0;
}
.testimonial-stars { color: var(--gold); font-size: .82rem; letter-spacing: 2px; margin-bottom: 8px; }
.testimonial blockquote {
  margin: 0 0 8px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text);
}
.testimonial figcaption { font-size: .72rem; color: var(--text-3); }

.benefits-band { padding: 0 0 46px; }
.benefits-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10,17,36,.5);
  overflow: hidden;
}
.benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 20px;
  border-right: 1px solid var(--line);
}
.benefit:last-child { border-right: none; }
.benefit-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(168,92,114,.1);
  border: 1px solid rgba(120,150,200,.2);
  color: var(--violet-lt);
}
.benefit strong {
  display: block;
  font-size: .82rem;
  font-weight: 620;
  color: var(--text);
  letter-spacing: -.008em;
  margin-bottom: 1px;
}
.benefit p { font-size: .72rem; color: var(--text-3); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════
   10b. RESPONSIVE for the composition above
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .featured-layout,
  .partner-band-inner { grid-template-columns: minmax(0, 1fr) 300px; }
  .hero-panels { width: 236px; }
}

@media (max-width: 1024px) {
  /* The trust panel drops below the grid before the cards get too narrow
     to show a product properly. */
  .featured-layout, .partner-band-inner { grid-template-columns: 1fr; }
  .globe-panel { min-height: 260px; }
  .globe-stats { grid-template-columns: repeat(4, 1fr); }
  .benefits-row { grid-template-columns: repeat(3, 1fr); }
  .benefit:nth-child(3) { border-right: none; }
  .benefit:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
  /* Tablet rearranges the hero rather than shrinking it: the aircraft
     moves behind the full width and the HUD panels go horizontal. */
  .hero { min-height: 0; padding: 104px 0 44px; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-content { max-width: 100%; }
  .hero-scrim {
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(4,7,15,.92) 40%, rgba(4,7,15,.62) 70%, rgba(4,7,15,.4) 100%),
      linear-gradient(180deg, rgba(4,7,15,.88) 0%, rgba(4,7,15,.3) 26%, transparent 46%),
      linear-gradient(0deg, var(--ink) 0%, rgba(4,7,15,.8) 16%, transparent 42%);
  }
  .hero-photo { background-position: 66% 58%; }
  .hero-panels { flex-direction: row; width: 100%; }
  .hero-panel { flex: 1; }
  .trust-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-cell:nth-child(2) { border-right: none; }
  .trust-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 620px) {
  .hero { padding: 96px 0 36px; }
  .hero-heading { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .hero-sub { font-size: .95rem; }
  .hero-sub br { display: none; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn-primary, .hero-btns .btn-ghost { width: 100%; text-align: center; padding: 15px 22px; }
  /* The aircraft stays visible on mobile — it is the reason the page
     looks like an aviation store — but moves to a band under the copy
     so it never sits behind the headline. */
  .hero-photo { background-position: 62% 52%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(4,7,15,.9) 0%, rgba(4,7,15,.72) 46%, rgba(4,7,15,.34) 72%, var(--ink) 100%);
  }
  .hero-panels { flex-direction: column; }
  .hero-panel { flex: none; }
  .trust-strip { margin-top: -18px; }
  .trust-strip-inner { grid-template-columns: 1fr; }
  .trust-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .trust-cell:last-child { border-bottom: none; }
  .featured-grid { grid-template-columns: 1fr; }
  .globe-stats { grid-template-columns: 1fr 1fr; }
  .benefits-row { grid-template-columns: 1fr; }
  .benefit { border-right: none; border-bottom: 1px solid var(--line); }
  .benefit:last-child { border-bottom: none; }
  .partner-strip { gap: 14px; padding: 16px 18px; }
  .partner-list { gap: 16px; }
  .partner-name { font-size: .85rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   11. CATEGORY + WHY CARDS
   ═══════════════════════════════════════════════════════════════════ */

.cat-card { padding: 30px 26px; }
.cat-icon {
  border-radius: 12px;
  background: rgba(168,92,114,.09);
  border: 1px solid rgba(168,92,114,.2);
  color: var(--violet-lt);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.cat-card:hover .cat-icon {
  background: rgba(214,172,99,.12);
  border-color: var(--line-gold);
  color: var(--gold);
}
.cat-card h3 {
  font-family: var(--font);
  font-weight: 620;
  letter-spacing: -.012em;
  color: var(--text);
}
.cat-card p { color: var(--text-3); }
.cat-arrow { color: var(--gold); }

.why-card { padding: 30px 26px; }
.why-icon {
  border-radius: 12px;
  background: rgba(168,92,114,.09);
  border: 1px solid rgba(168,92,114,.2);
  color: var(--violet-lt);
}
.why-card h4 {
  font-family: var(--font);
  font-weight: 620;
  letter-spacing: -.012em;
  color: var(--text);
}
.why-card p { color: var(--text-3); }
.why-card:hover { border-color: var(--line-2); }

/* ═══════════════════════════════════════════════════════════════════
   12. BANNERS, COMMUNITY, NEWSLETTER
   ═══════════════════════════════════════════════════════════════════ */

.airport-banner { background: transparent; border-block: 1px solid var(--line); }
.ab-glow1 { background: var(--glow-violet); opacity: .5; }
.ab-glow2 { background: var(--glow-gold); opacity: .22; }
.rl { background: linear-gradient(180deg, transparent, rgba(226,214,182,.5), transparent); }
.ab-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  letter-spacing: -.015em;
  line-height: 1.1;
}
.ab-text { color: var(--text-2); }

.globe-ring { border-color: rgba(168,92,114,.16); }
.globe-ring.r2 { border-color: rgba(168,92,114,.11); }
.globe-ring.r3 { border-color: rgba(214,168,90,.1); }
.gdot { background: var(--gold); box-shadow: 0 0 8px rgba(214,172,99,.6); }
.globe-label { font-family: var(--font); color: var(--text); }

.newsletter-glass {
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  padding: 56px 44px;
}
.nl-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  letter-spacing: -.015em;
  line-height: 1.12;
}
.nl-text { color: var(--text-2); }
.nl-footnote { color: var(--text-3); font-size: .78rem; }
.nl-input {
  background: rgba(4,7,15,.6);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--t), background var(--t);
}
.nl-input::placeholder { color: var(--text-3); }
.nl-input:focus { outline: none; border-color: var(--line-gold); background: rgba(4,7,15,.8); }
.nl-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0 18px;
}
@media (max-width: 520px) {
  .nl-actions { flex-direction: column; }
  .nl-actions .btn-primary, .nl-actions .btn-ghost { width: 100%; text-align: center; }
}

/* Category cards are built from live data, so they need a loading state. */
.cat-skeleton { pointer-events: none; }
.cat-skeleton:hover { transform: none; border-color: var(--line); }
.cat-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   13. FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.footer {
  background: linear-gradient(180deg, rgba(4,7,15,.2), rgba(3,5,12,.9));
  border-top: 1px solid var(--line);
  padding-top: 56px;
}
.footer-logo {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--text);
}
.footer-logo span {
  background: linear-gradient(100deg, var(--champagne), var(--gold));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--text-2);
  letter-spacing: 0;
}
.footer-blurb { color: var(--text-3); font-size: .87rem; line-height: 1.65; }
.footer-col h5 {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul li a {
  color: var(--text-3);
  font-size: .87rem;
  transition: color var(--t);
}
.footer-col ul li a:hover { color: var(--text); }
.social-icon {
  border: 1px solid var(--line);
  background: rgba(199,206,222,.03);
  color: var(--text-3);
  border-radius: 10px;
  transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}
.social-icon:hover {
  color: var(--champagne);
  border-color: var(--line-gold);
  background: rgba(214,172,99,.08);
  transform: translateY(-2px);
}
.footer-bottom { border-top: 1px solid var(--line); color: var(--text-3); }
.footer-disclaimer { color: var(--text-3); opacity: .75; font-size: .76rem; }
.pay-badge {
  border: 1px solid var(--line);
  background: rgba(199,206,222,.03);
  color: var(--text-3);
  border-radius: 7px;
  font-size: .72rem;
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════
   14. PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════ */

.pd-page { padding-top: 108px; padding-bottom: 100px; }

.pd-breadcrumb { font-size: .8rem; color: var(--text-3); margin-bottom: 30px; }
.pd-breadcrumb a { color: var(--text-3); transition: color var(--t); }
.pd-breadcrumb a:hover { color: var(--gold); }
.pd-bc-cur { color: var(--text-2); }

/* Two columns: gallery left, a sticky buy rail right. */
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.pd-info-col { position: sticky; top: 100px; }

.pd-image-frame {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
}
.pd-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Gallery thumbnails ── */
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pd-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t), transform var(--t), opacity var(--t);
  opacity: .68;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { opacity: 1; transform: translateY(-2px); border-color: var(--line-2); }
.pd-thumb.active { opacity: 1; border-color: var(--gold); }

.pd-badge-row { gap: 8px; margin-bottom: 18px; }
.pd-badge {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: .655rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: rgba(199,206,222,.04);
  color: var(--text-2);
}
.pd-badge-sim { border-color: var(--line-gold); color: var(--champagne); background: rgba(214,172,99,.07); }
.pd-badge-owned { border-color: rgba(52,211,153,.4); color: var(--ok); background: rgba(52,211,153,.08); }

.pd-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--text);
  margin-bottom: 6px;
}
.pd-short {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 22px;
}

.pd-price-row { align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pd-price {
  font-family: var(--font);
  font-size: 2.35rem;
  font-weight: 660;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
}
.pd-price-was {
  font-size: 1.05rem;
  color: var(--text-3);
  text-decoration: line-through;
}
.pd-save {
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.3);
  color: var(--ok);
}
.pd-price-note { font-size: .8rem; color: var(--text-3); }

.pd-divider { background: var(--line); height: 1px; border: none; margin: 26px 0; }
.pd-description { color: var(--text-2); line-height: 1.75; }

.pd-features li { color: var(--text-2); font-size: .9rem; }
.pd-feat-icon {
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.28);
  color: var(--ok);
  border-radius: 50%;
}

.pd-actions { gap: 12px; margin: 28px 0 20px; }
.pd-btn-buy  { padding: 15px 26px; font-size: .95rem; flex: 1; }
.pd-btn-cart { padding: 15px 26px; font-size: .95rem; flex: 1; }
.pd-btn-buy:disabled,
.pd-btn-cart:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

/* Ownership / availability messages under the buy buttons. */
.pd-status-note {
  font-size: .855rem;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.pd-status-note.is-owned {
  color: var(--ok);
  background: rgba(52,211,153,.07);
  border: 1px solid rgba(52,211,153,.24);
}
.pd-status-note.is-pending {
  color: var(--warn);
  background: rgba(240,180,75,.06);
  border: 1px solid rgba(240,180,75,.24);
}

.pd-trust {
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pd-trust-item { font-size: .8rem; color: var(--text-2); }

/* ── Spec block ── */
.pd-specs {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(11,18,38,.55);
}
.pd-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.pd-spec-row:last-child { border-bottom: none; }
.pd-spec-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.pd-spec-value {
  font-size: .88rem;
  font-weight: 550;
  color: var(--text);
  text-align: right;
}

/* ── Sections below the fold ── */
.pd-section { margin-top: 76px; }
.pd-section-title {
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -.008em;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pd-section-title .pdst-note {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pd-longtext { color: var(--text-2); line-height: 1.82; font-size: .96rem; max-width: 74ch; white-space: pre-line; }

/* ── Version history: a release log, newest first ── */
.pd-release { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pd-release:last-child { border-bottom: none; }
.pd-release-ver {
  flex-shrink: 0;
  width: 116px;
  font-size: .84rem;
  font-weight: 640;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pd-release-ver .pdr-current {
  display: block;
  margin-top: 5px;
  font-size: .6rem;
  font-weight: 650;
  letter-spacing: .14em;
  color: var(--gold);
}
.pd-release-date { font-size: .76rem; color: var(--text-3); font-weight: 450; margin-top: 3px; }
.pd-release-body { color: var(--text-2); font-size: .89rem; line-height: 1.68; white-space: pre-line; }

/* ── Lightbox ── */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 40px;
  background: rgba(3,5,12,.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.pd-lightbox.open { display: grid; }
.pd-lightbox img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
}
.pd-lightbox-close {
  position: absolute;
  top: 22px; right: 24px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(199,206,222,.06);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
}
.pd-lightbox-close:hover { background: rgba(199,206,222,.13); }

@media (max-width: 980px) {
  .pd-layout { grid-template-columns: 1fr; gap: 34px; }
  .pd-info-col { position: static; }
}

/* 404 state on the product page */
.pd-404-num { color: rgba(199,206,222,.07); font-family: var(--font-display); }
.pd-404-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; }
.pd-404-text { color: var(--text-2); }
.pd-404-icon { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   15. FORMS, AUTH, CHECKOUT, DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */

.form-input,
.form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"], textarea, select {
  background: rgba(4,7,15,.55);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.form-input::placeholder, textarea::placeholder { color: var(--text-3); }
.form-input:focus,
.form-select:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--line-gold);
  background: rgba(4,7,15,.78);
  box-shadow: 0 0 0 3px rgba(214,168,90,.1);
}
.form-label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.auth-card { padding: 40px 36px; }
.auth-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  letter-spacing: -.015em;
  line-height: 1.12;
  color: var(--text);
}
.auth-sub { color: var(--text-2); }
.auth-footer-text, .auth-alt { color: var(--text-3); }
.auth-footer-text a, .auth-alt a { color: var(--gold); }
.auth-footer-text a:hover, .auth-alt a:hover { color: var(--champagne); }

.dash-panel { padding: 26px; }
.dash-panel-title,
.panel-title {
  font-family: var(--font);
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--text);
}
.dash-nav-link, .dash-tab {
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
}
.dash-nav-link:hover, .dash-tab:hover { color: var(--text); background: rgba(199,206,222,.05); }
.dash-nav-link.active, .dash-tab.active {
  color: var(--champagne);
  background: rgba(214,168,90,.1);
  border-color: var(--line-gold);
}

table th {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
table td { border-bottom: 1px solid var(--line); color: var(--text-2); font-size: .88rem; }
tbody tr { transition: background var(--t); }
tbody tr:hover { background: rgba(199,206,222,.028); }

/* Status pills: semantic colour, kept separate from the brand accent. */
.badge, .status-badge {
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  border: 1px solid transparent;
}
.badge-paid, .badge-delivered, .badge-success, .status-paid {
  background: rgba(52,211,153,.1); color: var(--ok); border-color: rgba(52,211,153,.28);
}
.badge-pending, .badge-processing, .status-pending {
  background: rgba(240,180,75,.1); color: var(--warn); border-color: rgba(240,180,75,.28);
}
.badge-failed, .badge-cancelled, .badge-refunded, .status-failed {
  background: rgba(242,89,107,.1); color: var(--danger); border-color: rgba(242,89,107,.28);
}

.co-form-card,
.co-summary-card,
.cart-summary-card { padding: 28px; }
.co-section-title, .cart-summary-title {
  font-family: var(--font);
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--text);
}
.co-total-value, .cart-total-value {
  font-family: var(--font);
  font-weight: 680;
  letter-spacing: -.025em;
  color: var(--text);
}
.co-secure-note, .cart-secure-note { color: var(--text-3); font-size: .8rem; }

.cart-sidebar {
  background: linear-gradient(180deg, rgba(9,14,30,.97), rgba(5,8,18,.99));
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  border-left: 1px solid var(--line);
}
.cart-header h3 { font-family: var(--font); font-weight: 620; letter-spacing: -.01em; }
.cart-item { border-bottom: 1px solid var(--line); }
.cart-item-name { color: var(--text); font-weight: 550; }
.cart-item-price { color: var(--gold); font-weight: 620; }
.cart-item-remove { color: var(--text-3); transition: color var(--t); }
.cart-item-remove:hover { color: var(--danger); }
.cart-total { color: var(--text); font-weight: 620; }
.cart-empty p { color: var(--text-3); }

/* Downloads */
.dl-card { padding: 22px; }
.dl-title { font-family: var(--font); font-weight: 620; color: var(--text); letter-spacing: -.01em; }
.version-tag {
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  background: rgba(199,206,222,.04);
  border-radius: var(--radius-pill);
}

/* ═══════════════════════════════════════════════════════════════════
   16. STATES: skeleton, empty, toast, modal
   ═══════════════════════════════════════════════════════════════════ */

.skeleton, .skel {
  background: linear-gradient(90deg, rgba(199,206,222,.045) 25%, rgba(199,206,222,.1) 50%, rgba(199,206,222,.045) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
}
.skeleton-card { border-color: var(--line); }

.empty-state { color: var(--text-3); }
.empty-state svg { color: var(--text-3); opacity: .5; }
.empty-state h3 {
  font-family: var(--font);
  font-weight: 620;
  color: var(--text-2);
  letter-spacing: -.01em;
}

.toast {
  background: rgba(9,14,30,.96);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: .89rem;
}

.modal-box {
  background: linear-gradient(180deg, rgba(17,26,54,.98), rgba(9,14,30,.99));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.whatsapp-float { box-shadow: 0 8px 28px rgba(0,0,0,.5); }

/* ═══════════════════════════════════════════════════════════════════
   17. MOTION

   Fade-and-lift on scroll. One transform, one opacity, 0.55s.
   Fully disabled for anyone who asked for reduced motion — including
   the decorative hero particles, which are pure ornament.
   ═══════════════════════════════════════════════════════════════════ */

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-particles, .scroll-dot, .hero-scroll-hint { display: none; }
  .product-card:hover { transform: none; }
  .product-card:hover .product-art { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   18. RESPONSIVE

   Mobile is not a shrunken desktop: the hero loses its fixed viewport
   height so the CTA is visible without scrolling, the display serif
   scales on its own curve, and every tap target clears 44px.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .section { padding: 52px 0; }
}

@media (max-width: 860px) {
  .nav-inner { height: 66px; }
  .nav-links {
    background: rgba(5,8,18,.98);
    -webkit-backdrop-filter: blur(22px);
            backdrop-filter: blur(22px);
    border-top: 1px solid var(--line);
    padding: 12px 0 22px;
  }
  .nav-links a {
    display: block;
    padding: 14px 24px;
    font-size: 1rem;
    border-radius: 0;
  }
  .nav-links a.active::after { left: 24px; right: auto; width: 26px; bottom: 8px; }

  .hero { min-height: auto; padding: 132px 0 76px; }
  .hero-heading { font-size: clamp(2.7rem, 12vw, 4rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 32px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn-primary,
  .hero-btns .btn-ghost { width: 100%; text-align: center; padding: 16px 24px; }
  .hero-trust { flex-wrap: wrap; row-gap: 8px; }

  .section { padding: 46px 0; }
  .section-header { margin-bottom: 44px; }
  .pd-page { padding-top: 96px; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .section { padding: 40px 0; }
  .stat-card, .cat-card, .why-card { padding: 24px 20px; }
  .newsletter-glass { padding: 36px 22px; }
  .auth-card, .co-form-card,
.co-summary-card, .cart-summary-card, .dash-panel { padding: 24px 20px; }
  .pd-actions { flex-direction: column; }
  .pd-btn-buy, .pd-btn-cart { width: 100%; }
  .pd-release { flex-direction: column; gap: 6px; }
  .pd-release-ver { width: auto; display: flex; align-items: center; gap: 10px; }
  .pd-release-ver .pdr-current { margin-top: 0; }
  .pd-lightbox { padding: 18px; }
  .footer { padding-top: 60px; }
  /* Every interactive control clears the 44px tap target on touch. */
  .btn-primary, .btn-ghost, .btn-cart, .btn-buy, .btn-details,
  .filter-btn, .nav-icon-btn { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   19. PAGE-SPECIFIC SURFACES

   These class names come from the existing cart, checkout, dashboard,
   downloads and auth markup. They inherit the palette automatically
   because the older stylesheets read the tokens redefined above; what
   follows is the typography and edge treatment those pages need to
   match the storefront rather than merely share its colours.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page headers (cart / checkout / dashboard) ── */
.cart-pg-title,
.co-pg-title,
.dash-title,
.dl-page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -.016em;
  line-height: 1.1;
  color: var(--text);
}
.cart-pg-subtitle,
.co-pg-subtitle,
.dash-subtitle,
.dl-page-sub { color: var(--text-2); font-size: .98rem; }

/* ── Auth pages ── */
.auth-logo {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--text);
}
.auth-logo span {
  background: linear-gradient(100deg, var(--champagne), var(--gold));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.12;
}
.auth-subtitle { color: var(--text-2); }
.auth-link { color: var(--gold); transition: color var(--t); }
.auth-link:hover { color: var(--champagne); }

/* The auth submit button is the same weight as a buy button: it is the
   one thing on the page the visitor came to do. */
.auth-btn {
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: -.005em;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--champagne) 0%, var(--gold) 58%, var(--gold-deep) 100%);
  color: var(--on-gold);
  border: none;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.auth-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.auth-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.auth-alert {
  border-radius: var(--radius-sm);
  font-size: .87rem;
  border: 1px solid transparent;
}
.auth-alert.error   { background: rgba(242,89,107,.09);  border-color: rgba(242,89,107,.3);  color: var(--danger-text); }
.auth-alert.success { background: rgba(52,211,153,.09);  border-color: rgba(52,211,153,.3);  color: var(--ok-text); }

.pass-toggle { color: var(--text-3); transition: color var(--t); }
.pass-toggle:hover { color: var(--text-2); }
.pass-strength-bar { border-radius: var(--radius-pill); }
.pass-strength-label { color: var(--text-3); font-size: .76rem; }
.remember-label { color: var(--text-2); font-size: .87rem; }
.remember-custom { border: 1px solid var(--line-2); border-radius: 5px; }
.remember-check:checked + .remember-custom {
  background: linear-gradient(140deg, var(--champagne), var(--gold));
  border-color: var(--gold);
}
.form-error, .field-error { color: var(--danger); font-size: .8rem; }

/* ── Dashboard shell ── */
.dash-sidebar {
  background: linear-gradient(180deg, rgba(17,26,54,.6), rgba(11,18,38,.72));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dash-nav-label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dash-nav-link {
  font-size: .9rem;
  font-weight: 500;
  border-left: 2px solid transparent;
}
.dash-nav-link.active { border-left-color: var(--gold); }
.dash-panel-sub { color: var(--text-3); font-size: .84rem; }

/* Summary tiles: the number is the content, so it gets the weight. */
.stat-box {
  background: linear-gradient(180deg, rgba(17,26,54,.6), rgba(11,18,38,.75));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat-box-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.stat-box-value {
  font-family: var(--font);
  font-weight: 660;
  letter-spacing: -.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-box-value.blue { color: var(--champagne); }

.fsm-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}

/* ── Cart + checkout summary rows ── */
.cp-col-headers {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.cart-sum-row, .co-sum-row { color: var(--text-2); font-size: .9rem; }
.cart-sum-divider, .co-sum-divider { background: var(--line); }
.cart-sum-total, .co-sum-total {
  font-family: var(--font);
  font-weight: 620;
  color: var(--text);
}
.cart-sum-total-amount, .co-total-amount {
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 680;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cart-continue-link { color: var(--gold); font-size: .88rem; transition: color var(--t); }
.cart-continue-link:hover { color: var(--champagne); }
.qty-btn {
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--text-2);
  background: rgba(199,206,222,.03);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.qty-btn:hover:not(:disabled) { background: rgba(199,206,222,.09); color: var(--text); }

/* Checkout must read as calm and safe, so its one emphasised element is
   the pay button and nothing competes with it. */
.co-submit-btn { padding: 16px 28px; font-size: .98rem; width: 100%; }
.co-submit-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.co-spinner { border-color: rgba(26,18,6,.28); border-top-color: var(--on-gold); }
.co-payment-notice {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: rgba(199,206,222,.03);
  color: var(--text-2);
  font-size: .86rem;
}

/* ── Downloads ── */
.dl-card { border-radius: var(--radius); }
.dl-meta { color: var(--text-3); font-size: .8rem; }
.dl-btn {
  font-weight: 620;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--champagne), var(--gold) 60%, var(--gold-deep));
  color: var(--on-gold);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform var(--t), filter var(--t);
}
.dl-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.update-badge, .badge-update {
  border: 1px solid var(--line-gold);
  background: rgba(214,168,90,.1);
  color: var(--champagne);
  border-radius: var(--radius-pill);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Modals ── */
.modal-overlay {
  background: rgba(3,5,12,.78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.modal-title {
  font-family: var(--font);
  font-weight: 620;
  letter-spacing: -.012em;
  color: var(--text);
}
.modal-close { color: var(--text-3); transition: color var(--t); }
.modal-close:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   20. NAVBAR

   style.css lays this out as flex and takes .nav-links OUT OF FLOW:

       .nav-links { position: absolute; left: 50%; transform: translateX(-50%); }

   Any grid or flex layout added on top inherits that, so the links float
   over whatever occupies the centre — which is how Login and Register
   ended up underneath them. Every one of those properties is therefore
   reset explicitly below rather than assumed away.

   The mobile breakpoint is 768px to MATCH style.css, which swaps in the
   hamburger at exactly that width. An earlier 860px breakpoint here left
   769–860px with the desktop links hidden and no hamburger to open them:
   no navigation at all in a 90px band.
   ═══════════════════════════════════════════════════════════════════ */

.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'brand links actions';
  align-items: center;
  gap: 20px;
  height: 72px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Brand ── */
.nav-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;                 /* style.css sets margin-right:auto for flex */
  min-width: 0;
}
.nav-brand-mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(214,172,99,.16), rgba(214,172,99,.05));
  border: 1px solid var(--line-gold);
}
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.08; min-width: 0; }
.nav-logo {
  font-family: var(--font);
  font-size: 1.075rem;
  font-weight: 660;
  letter-spacing: -.02em;
  color: var(--text);
  text-transform: none;
  white-space: nowrap;
}
.nav-logo span { -webkit-text-fill-color: currentColor; background: none; }
.nav-logo-sub {
  font-size: .545rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 3px;
  white-space: nowrap;
}

/* ── Links: back into normal flow, centred by the grid track ── */
.nav-links {
  grid-area: links;
  position: static;          /* undoes style.css's absolute positioning */
  left: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.nav-links a {
  position: relative;
  padding: 8px 13px;
  font-size: .865rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--t), background var(--t);
}
.nav-links a:hover { color: var(--text); background: rgba(199,206,222,.05); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--champagne));
}

/* ── Actions ── */
.nav-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;                 /* style.css sets margin-left:auto for flex */
  flex-shrink: 0;
}
#navAuth { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-icon-btn {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  border: 1px solid var(--line);
  background: rgba(199,206,222,.03);
  transition: color var(--t), background var(--t), border-color var(--t);
}
.nav-icon-btn:hover { color: var(--text); background: rgba(199,206,222,.075); border-color: var(--line-2); }

.cart-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  color: var(--on-gold);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(182,140,60,.45);
}

.nav-login {
  padding: 9px 17px;
  border-radius: var(--radius-sm);
  font-size: .835rem;
  font-weight: 550;
  border: 1px solid var(--line-2);
  background: rgba(199,206,222,.04);
  color: var(--text);
  white-space: nowrap;
  transition: background var(--t), border-color var(--t);
}
.nav-login:hover { background: rgba(199,206,222,.09); border-color: rgba(199,206,222,.26); }

/* The only gold element in the bar, so it is unambiguously the action. */
.nav-register {
  padding: 9px 19px;
  border-radius: var(--radius-sm);
  font-size: .835rem;
  font-weight: 640;
  background: linear-gradient(140deg, var(--champagne) 0%, var(--gold) 58%, var(--gold-deep) 100%);
  color: var(--on-gold);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.4);
  white-space: nowrap;
  transition: transform var(--t), filter var(--t);
}
.nav-register:hover { transform: translateY(-1px); filter: brightness(1.06); }

.nav-hamburger { grid-area: actions; justify-self: end; }

/* Tightening steps so the three zones never collide before the menu
   collapses. Checked against 1280, 1440 and 1920. */
@media (max-width: 1180px) {
  .nav-inner { gap: 14px; }
  .nav-links a { padding: 8px 9px; font-size: .82rem; }
  .nav-logo-sub { display: none; }
}
@media (max-width: 980px) {
  .nav-links a { padding: 7px 7px; font-size: .78rem; }
  .nav-login { display: none; }
}

@media (max-width: 768px) {
  .nav-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'brand actions';
    height: 64px;
    gap: 12px;
  }
  .nav-hamburger {
    display: flex;
    order: 2;
    position: static;
    width: 22px;
    flex-direction: column;
    gap: 5px;
  }
  .nav-actions { justify-content: flex-end; }
  .nav-login { display: inline-block; padding: 8px 13px; font-size: .78rem; }
  .nav-register { padding: 8px 14px; font-size: .78rem; }

  /* Full-width panel under the bar, not a squeezed row. */
  .nav-links {
    position: absolute;
    top: 64px; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(5,8,18,.98);
    -webkit-backdrop-filter: blur(22px);
            backdrop-filter: blur(22px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 8px 0 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height var(--t-slow), opacity var(--t), padding var(--t);
  }
  .nav-links.open { max-height: 420px; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 24px; font-size: .98rem; border-radius: 0; }
  .nav-links a.active::after { left: 24px; right: auto; width: 24px; bottom: 8px; }
  .nav-logo { font-size: .98rem; }
}

@media (max-width: 440px) {
  .nav-login { display: none; }
  .nav-brand-mark { width: 34px; height: 34px; }
}


/* ═══════════════════════════════════════════════════════════════════
   21. DENSITY

   style.css sizes these sections for a text-led page. A marketplace wants
   the sections to read as one continuous surface, so the rhythm tightens
   and the interior headings stop announcing themselves.
   ═══════════════════════════════════════════════════════════════════ */

.products-catalogue-section { padding: 8px 0 54px; }
.products-catalogue-section .filter-bar { margin-bottom: 22px; }
.categories-section { padding: 12px 0 58px; }
.community-section  { padding: 58px 0; }
.newsletter-section { padding: 0 0 62px; }

/* Interior section headers align left and shrink: the hero already made
   the brand statement, and centred display type on every band afterwards
   is what turned the last version into a scroll of slides. */
.products-catalogue-section .section-header,
.categories-section .section-header {
  text-align: left;
  margin-bottom: 22px;
  max-width: none;
}
.products-catalogue-section .section-eyebrow,
.categories-section .section-eyebrow {
  justify-content: flex-start;
  margin-bottom: 10px;
}
.products-catalogue-section .section-eyebrow::before,
.categories-section .section-eyebrow::before { display: none; }

.products-catalogue-section .section-title,
.categories-section .section-title {
  font-family: var(--font);
  font-size: 1.42rem;
  font-weight: 660;
  letter-spacing: -.02em;
  margin-bottom: 5px;
}
.products-catalogue-section .section-title .accent,
.categories-section .section-title .accent { font-style: normal; }

.products-catalogue-section .section-desc,
.categories-section .section-desc {
  margin: 0;
  font-size: .875rem;
  max-width: 62ch;
}

/* The full catalogue uses the same card as the featured row, four across. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .products-grid { grid-template-columns: 1fr; } }

.categories-grid { gap: 16px; }
.cat-card { padding: 22px 20px; }

/* Community section: the old orbit visual carried a headline figure that
   no longer exists, so the column widths rebalance toward the copy. */
.community-inner { gap: 40px; }
.community-visual { opacity: .85; }