/* ============================================================================
   Elyndor Storefront — Premium Glassy + Apple/Linear/Vercel-grade motion
   Elyndor.ai · marketplace for AI Command Centers
   ============================================================================ */

@import url('../assets/elyndor-tokens.css');

/* === Design tokens — local overrides where the storefront needs sharper color ===
   The tokens source of truth is ../assets/elyndor-tokens.css
*/
:root {
  /* Per-product family accents (used only on product cards).
     Kept as legacy names; values are now warm-gold / sky / amber / teal.
     The site never uses literal purple or violet anywhere anymore. */
  --glass-accent:       #ff7eb9;
  --glass-accent-glow:  rgba(255, 126, 185, 0.35);
  --gold-accent-2:      #f6c97a;   /* was --purple-accent #c084fc */
  --gold-glow-2:        rgba(246, 201, 122, 0.30);
  --sky-accent:         #38bdf8;   /* secondary cool accent (rare) */
  --amber-accent:       #f5a524;   /* used only for "deal/savings" badges */
  --amber-accent-glow:  rgba(245, 165, 36, 0.30);
  --teal:               #14b8a6;
  --teal-glow:          rgba(20, 184, 166, 0.25);
  /* Keep the legacy local names so existing styles still bind */
  --bg-0:               #08080c;     /* matches --bg from tokens */
  --bg-1:               #0d0d10;
  --bg-2:               #14141a;
  --bg-glass-legacy:    rgba(20, 20, 26, 0.5);
  --bg-glass-strong:    rgba(13, 13, 16, 0.82);
  --border-glass:       rgba(255, 255, 255, 0.07);
  --border-glass-strong:rgba(255, 255, 255, 0.14);
  --text-0:             #fafaf8;
  --text-1:             #e6e6e0;
  --text-2:             #9a9a90;
  --text-3:             #5e5e58;
  --accent:             #ff7eb9;     /* lock to elyndor-tokens --accent (signature pink) */
  --accent-glow:        rgba(255, 126, 185, 0.35);
  --accent-2:           #f6c97a;     /* was #c084fc AI-trope violet; now warm gold */
  --accent-2-glow:      rgba(246, 201, 122, 0.30);
  --cool:               var(--teal);
  --cool-glow:          var(--teal-glow);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* === Custom cursor (desktop only) === */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, .product-card, .nav-cart, .product-card-add, .cart-fab { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
  }
  .cursor-dot {
    width: 6px; height: 6px;
    background: var(--text-0);
    border-radius: 50%;
    transition: width var(--t-fast) var(--ease-out), height var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  }
  .cursor-ring {
      width: 32px; height: 32px;
      border: 1.5px solid rgba(245, 165, 36, 0.5);
      border-radius: 50%;
      transition: width var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
    }
  .cursor-ring.is-hovering {
    width: 56px; height: 56px;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.06);
  }
  .cursor-ring.is-clicking {
    width: 24px; height: 24px;
  }
}

/* === 3D layered background ===
   - Layer -3 (far): subtle blueprint grid, slow drift
   - Layer -2 (mid): two large geometric forms, slow rotation, low opacity
   - Layer -1 (near): warm amber aurora glow with mouse parallax
   - Layer  0 (vignette): radial mask to focus center, no harsh edges */

body::before {
  /* Layer -3: blueprint grid (Vercel-style) */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background-color: var(--bg-0);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 85%);
}

body::after {
  /* Layer -2: large geometric forms — depth via transform, not color */
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  background:
    /* Large soft circle, top-right, warm */
    radial-gradient(circle 600px at 80% 20%, rgba(245, 165, 36, 0.08), transparent 70%),
    /* Large soft circle, bottom-left, cool */
    radial-gradient(circle 700px at 15% 85%, rgba(20, 184, 166, 0.05), transparent 70%),
    /* Subtle horizon line */
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(245, 165, 36, 0.02) 80%, transparent 100%);
  animation: depthDrift 40s ease-in-out infinite;
  filter: blur(40px);
  will-change: transform;
}
@keyframes depthDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, -1%) rotate(0.5deg); }
  66% { transform: translate(-1%, 2%) rotate(-0.3deg); }
}

/* Layer -1: warm aurora glow — moves with the mouse for parallax depth */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle 500px at var(--mx, 50%) var(--my, 40%),
      rgba(245, 165, 36, 0.15),
      transparent 60%);
  transition: background-position 0.5s ease-out;
  will-change: background;
}

/* Layer 0: subtle film grain for texture — makes the dark feel rich, not flat */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; color: inherit; }

/* === Typography === */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-2);
  text-transform: uppercase;
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.eyebrow:hover {
  border-color: var(--border-glass-strong);
  background: var(--bg-glass-strong);
  transform: translateY(-1px);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

h1 { font-size: clamp(34px, 5.5vw, 62px); font-weight: 700; letter-spacing: -2.5px; line-height: 1.02; }
h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; }

/* === BUTTON SYSTEM — the premium interaction layer ===
   Each button has 6 states: default, hover, focus-visible, active (pressed), loading, disabled.
   All transitions use the same easings + durations. All buttons get:
   - A "press" effect on :active (scale down + tiny shadow collapse)
   - A focus-visible ring designed, not browser default
   - A shimmer overlay on primary variants
   - A magnetic subtle lift on hover */

.btn {
  --btn-bg: var(--bg-glass);
  --btn-fg: var(--text-0);
  --btn-border: var(--border-glass-strong);
  --btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --btn-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.4);
  --btn-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.2);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;

  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* All state transitions share the same timing — feels coherent */
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);

  /* Subtle continuous shimmer for primary buttons (set via ::before) */
  overflow: hidden;
  isolation: isolate;
}

/* The default resting state — primary has a faint inner highlight */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(120deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 60%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0s;
}
.btn-primary::before {
  /* Shimmer continuously on primary buttons */
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* Primary button (the amber CTA) */
.btn-primary {
  --btn-bg: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --btn-fg: #1a1a1a;
  --btn-border: rgba(255, 255, 255, 0.18);
  --btn-shadow: 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --btn-shadow-hover: 0 14px 36px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --btn-shadow-active: 0 4px 12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Glass button (the secondary) */
.btn-glass {
  --btn-bg: var(--bg-glass);
  --btn-fg: var(--text-0);
  --btn-border: var(--border-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* === The actual interaction states === */

/* Hover: lift + brighten + shadow expand */
.btn:hover {
  transform: translateY(-2px);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow-hover);
  border-color: var(--btn-border);
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-glass:hover {
  background: var(--bg-glass-strong);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Focus-visible: deliberate ring, not browser default */
.btn:focus-visible {
  outline: none;
  box-shadow:
    var(--btn-shadow),
    0 0 0 2px var(--bg-0),
    0 0 0 4px var(--accent);
}

/* Active (pressed): compress — the Linear/Vercel "press" feel */
.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--btn-shadow-active);
  transition-duration: 60ms; /* snap */
}

/* TK-HARDEN-A — generalized focus + active press for non-.btn interactive
   surfaces on the storefront / thanks. .btn above keeps its sharper rule. */
.product-card:focus-visible,
.cart-fab:focus-visible,
.cart-close:focus-visible,
.cart-item-remove:focus-visible,
.product-card-add:focus-visible,
.deal-cta:focus-visible,
.cart-cta:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
}
.cart-fab:active,
.cart-close:active,
.product-card-add:active,
.cart-item-remove:active,
a.button:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}
@media (hover: none) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
  }
}

/* Loading state */
.btn.is-loading {
  pointer-events: none;
  color: transparent !important;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #1a1a1a;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Disabled */
.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}

.btn-block { display: flex; width: 100%; justify-content: center; }

/* === Glassy nav with the new button system === */
.nav {
  position: sticky;
  top: 16px;
  z-index: 100;
  margin: 16px auto 0;
  max-width: 1200px;
  padding: 12px 20px;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.nav:hover {
  border-color: var(--border-glass-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.nav-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--t-base) var(--ease-spring);
}
.nav-logo:hover { transform: scale(1.04); }
.nav-logo .mark {
  height: 24px; width: auto;
  filter: drop-shadow(0 0 10px rgba(232, 183, 90, 0.35));
  transition: transform var(--t-base) var(--ease-spring), filter var(--t-base) var(--ease-out);
}
.nav-logo:hover .mark {
  transform: scale(1.08);
  filter: drop-shadow(0 0 16px rgba(232, 183, 90, 0.55));
}
.nav-links { display: flex; gap: 24px; }
.nav-links a {
  font-size: 13px;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease-out);
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav-links a:hover { color: var(--text-0); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cart {
  padding: 8px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
.nav-cart:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 165, 36, 0.06);
}
.nav-cart:active { transform: scale(0.97); }
.nav-cart-count {
  background: var(--accent);
  color: #1a1a1a;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  transition: transform var(--t-base) var(--ease-spring);
}
.nav-cart.has-items .nav-cart-count { animation: bounce 0.5s var(--ease-spring); }
@keyframes bounce { 50% { transform: scale(1.4); } }

/* === Hero === */
.hero {
  padding: 80px 32px 60px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.hero .eyebrow { margin-bottom: 28px; }
.hero h1 {
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
  animation: riseIn 0.8s var(--ease-out) 0.1s forwards;
}
.hero .lede,
.hero-actions,
.hero-stats {
  opacity: 0;
  transform: translateY(16px);
  animation: riseIn 0.7s var(--ease-out) forwards;
}
.hero .lede { animation-delay: 0.25s; }
.hero-actions { animation-delay: 0.35s; }
.hero-stats { animation-delay: 0.5s; }
@keyframes riseIn {
  to { opacity: 1; transform: translateY(0); }
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  background-size: 200% 200%;
  animation: gradientShift 8s ease-in-out infinite;
  filter: drop-shadow(0 0 24px var(--accent-glow));
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-lede {
  font-size: 20px;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.5;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }
.hero-tertiary {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--text-2, #b9b9c7);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  transition:
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.hero-tertiary-line {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.55);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.hero-tertiary-arrow {
  display: inline-block;
  font-size: 13px;
  transition: transform var(--t-base) var(--ease-spring);
}
.hero-tertiary:hover {
  color: var(--ink, #fafaf8);
  border-color: var(--accent, rgba(255, 126, 185, 0.45));
  transform: translateY(-1px);
}
.hero-tertiary:hover .hero-tertiary-arrow { transform: translateY(2px); }
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.hero-stat { text-align: center; transition: transform var(--t-base) var(--ease-out); }
.hero-stat:hover { transform: translateY(-3px); }
.hero-stat-num {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--text-0), var(--text-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter var(--t-base) var(--ease-out);
}
.hero-stat:hover .hero-stat-num { filter: brightness(1.3); }
.hero-stat-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* === Section === */
.section { padding: 80px 32px; max-width: 1400px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--text-2); font-size: 17px; max-width: 540px; margin: 0 auto; }
.grid-hint { text-align: center; color: var(--text-3); font-size: 12px; margin-top: 24px; font-style: italic; }

/* ===================================================================
   PREMIUM NETFLIX-GRADE PRODUCT GRID
   =================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.product-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-glass);
  transition:
    transform var(--t-slow) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-slow) var(--ease-out),
    opacity var(--t-base) var(--ease-out),
    filter var(--t-base) var(--ease-out);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 360px;

  opacity: 0;
  transform: translateY(20px);
  animation: cardIn 0.6s var(--ease-out) forwards;
}
.product-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2) { animation-delay: 0.10s; }
.product-card:nth-child(3) { animation-delay: 0.15s; }
.product-card:nth-child(4) { animation-delay: 0.20s; }
.product-card:nth-child(5) { animation-delay: 0.25s; }
.product-card:nth-child(6) { animation-delay: 0.30s; }
.product-card:nth-child(7) { animation-delay: 0.35s; }
.product-card:nth-child(8) { animation-delay: 0.40s; }
.product-card:nth-child(9) { animation-delay: 0.45s; }
.product-card:nth-child(10) { animation-delay: 0.50s; }
@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--card-color, var(--accent)) 0%, transparent 60%);
  opacity: 0.15;
  transition: opacity var(--t-base) var(--ease-out);
}

.product-card:hover,
.product-card.is-pinned {
  transform: translateY(-8px) scale(1.04);
  border-color: var(--card-color, var(--accent));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--card-color, var(--accent)),
    0 0 40px color-mix(in srgb, var(--card-color, var(--accent)) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10;
}
.product-card:hover::before,
.product-card.is-pinned::before { opacity: 0.35; }

/* TK-013 — Founder feedback: blur was too thick, blocked readability of siblings
   while user hovered. New rule: keep a hint that something is selected (gentle
   dim + tiny scale-down), but drop filter:blur to 1px max. Headlines, prices,
   and buy buttons on sibling cards all remain readable.
   Whole rule is gated to @media (hover: hover) so touch devices (where
   .is-pinned gets toggled by tap) never trigger this dim — touch users see
   all cards at full opacity regardless. */
@media (hover: hover) and (pointer: fine) {
  .product-grid:has(.product-card:hover) .product-card:not(:hover),
  .product-grid:has(.product-card.is-pinned) .product-card:not(.is-pinned) {
    opacity: 0.7;
    filter: blur(1px) saturate(0.9);
    transform: scale(0.99);
  }
}

.product-card-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-color, var(--accent)) 30%, var(--bg-2)), var(--bg-1));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter var(--t-base) var(--ease-out);
}
/* Snapshot image used for the Apple HQ card. Fills the preview area and
   crops the wider native dashboard capture to the preview frame.
   object-fit: contain keeps the full dashboard visible without cropping
   important details (chrome bar, ring, sessions chart, shortcuts).
   object-position: top keeps the chrome bar anchored at the top. */
.product-card-snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  border-radius: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #061025 0%, #0a1832 60%, #061025 100%);
}
/* Apple HQ card keeps the default 16:10 aspect ratio so all cards
   look the same size. The snapshot inside is sized via the
   .product-card-snapshot rule below. */
.product-card:hover .product-card-preview { filter: saturate(1.2) brightness(1.05); }
.product-card-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--card-color, var(--accent)) 50%, transparent), transparent 60%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--card-color, var(--accent)) 30%, transparent), transparent 50%);
  filter: blur(20px);
}
.product-card-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}
/* Apple HQ card hides the preview's decorative ::before (radial glow) and
   ::after (grid pattern) so the snapshot reads cleanly without overlays.
   Other 9 cards keep their defaults — these rules are scoped via the
   [data-slug="apple"] selector. */
.product-card[data-slug="apple"] .product-card-preview::before { display: none; }
.product-card[data-slug="apple"] .product-card-preview::after { display: none; }

.mock-dash {
  position: relative;
  width: 80%;
  height: 70%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform var(--t-slow) var(--ease-spring);
}
.product-card:hover .mock-dash { transform: scale(1.04) translateY(-2px); }
.mock-dash-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--card-color, var(--accent)), color-mix(in srgb, var(--card-color, var(--accent)) 50%, transparent));
  border-radius: 2px;
  width: 60%;
  opacity: 0.8;
  animation: barPulse 3s ease-in-out infinite;
}
@keyframes barPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.mock-dash-row { display: flex; gap: 4px; align-items: center; }
.mock-dash-pill {
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  flex: 1;
}
.mock-dash-pill.accent { background: var(--card-color, var(--accent)); flex: 0.4; opacity: 0.7; }
.mock-dash-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.mock-dash-block {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  transition: background var(--t-base) var(--ease-out);
}
.product-card:hover .mock-dash-block { background: rgba(255, 255, 255, 0.12); }
/* Apple HQ enriched visual mock — richer than the default 4-blocks layout.
   Scoped to .mock-dash-apple so it ONLY affects Apple HQ. Other variants
   untouched. */
.mock-dash-apple { gap: 8px; padding: 12px; }
.mock-dash-apple .mock-dash-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mock-dash-apple .mock-dash-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
  font-family: var(--font-display, system-ui); height: auto; flex: 0 0 auto;
}
.mock-dash-apple .mock-dash-blocks { min-height: 36px; }
.mock-dash-apple .mock-dash-title {
  font-size: 12px; font-weight: 700; color: #fff;
  font-family: var(--font-display, system-ui);
  letter-spacing: -0.01em; margin-top: 2px;
}
.mock-dash-apple .mock-dash-sub {
  font-size: 10px; color: rgba(255,255,255,0.75);
  font-family: var(--font-body, system-ui); margin-top: -4px;
}
.mock-dash-apple .mock-dash-rows { display: flex; flex-direction: column; gap: 4px; }
.mock-dash-apple .mock-dash-row { gap: 6px; }
.mock-dash-apple .mock-dash-pill {
  height: auto; padding: 3px 8px; border-radius: 999px;
  font-size: 9px; font-weight: 500; font-family: var(--font-body, system-ui);
  white-space: nowrap; flex: 1; text-align: center;
}
.mock-dash-apple .mock-dash-cta {
  font-size: 10px; font-weight: 600; color: #fff;
  font-family: var(--font-display, system-ui);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 2px;
}
.mock-dash-apple .mock-dash-foot {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: auto; padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.mock-dash-apple .mock-dash-price-now { font-size: 14px; font-weight: 700; color: #fff; font-family: var(--font-display, system-ui); }
.mock-dash-apple .mock-dash-price-once { font-size: 8px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; }
.mock-dash-apple .mock-dash-price-was { font-size: 9px; color: rgba(255,255,255,0.5); text-decoration: line-through; margin-left: auto; }
.mock-dash-apple .mock-dash-price-tag {
  font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 3px;
  background: linear-gradient(90deg, #ff5f9c, #c97bff); color: #fff;
  height: auto; flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.04em;
}

.product-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-1);
  transition: transform var(--t-base) var(--ease-spring);
}
.product-card:hover .product-card-tag { transform: translateX(2px) scale(1.05); }

.product-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.product-card-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--t-fast) var(--ease-out);
}
.product-card:hover .product-card-name { color: var(--text-0); }
.product-card-name .swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--card-color, var(--accent));
  box-shadow: 0 0 8px var(--card-color, var(--accent));
  transition: transform var(--t-base) var(--ease-spring);
}
.product-card:hover .product-card-name .swatch { transform: scale(1.3) rotate(45deg); }
.product-card-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 18px;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease-out);
}
.product-card:hover .product-card-desc { color: var(--text-1); }
..product-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border-glass);
  margin-top: auto;
  transition: border-color var(--t-fast) var(--ease-out);
}

/* TK-BUGFIX-storefront-addbtn-row — Stage 4 apple-hq buy-now button
   was being pushed off the right edge of the card because the price,
   actions pills (Pairs with, Compare), and the blue add button all sat
   in the same flex row with no wrap. The fix wraps the foot and gives
   the add button its own row below the price + actions row. */
.product-card-foot .product-card-add {
  flex-basis: 100%;
  width: 100%;
  margin-top: 4px;
}
.product-card:hover .product-card-foot { border-color: color-mix(in srgb, var(--card-color, var(--accent)) 30%, transparent); }
.product-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.product-card-price .num { font-size: 22px; font-weight: 700; color: var(--text-0); }
.product-card-price .label { font-size: 11px; color: var(--text-3); text-transform: uppercase; }
.product-card-price .reg {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent);
  margin-left: 4px;
}
.product-card-price .sale-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent-2, #f6c97a), var(--accent, #ff7eb9));
  color: #1a1a1a;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-2) 30%, transparent);
}

/* Card badges — AVAILABLE NOW / Coming Q3 2026 / Coming Q4 2026 */
.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
}
.card-badge-available {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #06281e;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
  animation: badge-pulse 2.4s ease-in-out infinite;
}
.card-badge-coming {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  border: 1px solid var(--border-glass-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45); }
  50%      { box-shadow: 0 4px 22px rgba(16, 185, 129, 0.7); }
}

/* Coming-soon state — Apple-style disabled look.
   Same shape as the buy button, but no fill, no glow, no hover. */
.product-card-add.is-coming-soon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-3);
  border: 1px solid var(--border-glass);
  box-shadow: none;
  filter: grayscale(0.7);
  cursor: not-allowed;
  pointer-events: none;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.product-card-add.is-coming-soon::after { display: none; }
.product-card-add.is-coming-soon:hover {
  transform: none;
  filter: grayscale(0.7);
  box-shadow: none;
}

/* Buy-now CTA — Apple HQ card. The accent is the card color itself,
   so the button reads as "the flagship action". */
.product-card-add.is-buy-now {
  background: linear-gradient(135deg, var(--card-color, var(--accent)), color-mix(in srgb, var(--card-color, var(--accent)) 70%, #000));
  color: #fff;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--card-color, var(--accent)) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 700;
  padding: 11px 18px;
}
.product-card-add.is-buy-now:hover {
  filter: brightness(1.12);
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--card-color, var(--accent)) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Card hover gently dims the coming-soon cards so the Apple HQ
   card reads as the live offering at a glance. */
.product-card[data-slug="apple"]:hover { z-index: 2; }

/* The "Add to cart" button gets the full premium treatment */
.product-card-add {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--card-color, var(--accent));
  color: #000;
  font-weight: 600;
  font-size: 12px;
  border-radius: 10px;
  letter-spacing: 0.2px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    filter var(--t-fast) var(--ease-out);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--card-color, var(--accent)) 30%, transparent);
}
/* Continuous gentle pulse on the add button */
.product-card-add::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.product-card-add:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.1);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--card-color, var(--accent)) 50%, transparent);
}
.product-card-add:hover::after { opacity: 1; }
.product-card-add:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 60ms;
}

/* === Detail expansion === */
.product-card-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
  margin-top: 0;
}
.product-card-detail-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--t-base) ease 0.1s;
}
.product-card:hover .product-card-detail,
.product-card.is-pinned .product-card-detail {
  grid-template-rows: 1fr;
  margin-top: 16px;
}
.product-card:hover .product-card-detail-inner,
.product-card.is-pinned .product-card-detail-inner {
  opacity: 1;
}
.detail-features {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 16px;
}
.detail-features li {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
  transition: color var(--t-fast) var(--ease-out);
}
.product-card:hover .detail-features li { color: var(--text-1); }
.detail-features li::before {
  content: "✓";
  color: var(--card-color, var(--accent));
  font-weight: 700;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-spring);
}
.product-card:hover .detail-features li::before { transform: scale(1.3); }
.detail-cta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.detail-cta .btn-primary {
  flex: 1;
  background: linear-gradient(135deg, var(--card-color, var(--accent)) 0%, color-mix(in srgb, var(--card-color, var(--accent)) 60%, #000) 100%);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--card-color, var(--accent)) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  justify-content: center;
  padding: 12px 20px;
}
.detail-cta .btn-glass { padding: 12px 16px; font-size: 12px; }

/* === Deal section (the bundle) === */
.deal {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 64px;
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 165, 36, 0.08), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.06), transparent 50%),
    var(--bg-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass-strong);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.deal:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.deal-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--cool), color-mix(in srgb, var(--cool) 70%, #000));
  color: #001a18;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 24px var(--cool-glow);
  animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.deal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.deal-left h2 { margin-bottom: 16px; font-size: 40px; }
.deal-left p { color: var(--text-2); font-size: 16px; margin-bottom: 24px; line-height: 1.5; }
.deal-list { list-style: none; margin-bottom: 32px; }
.deal-list li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-1);
  font-size: 14px;
}
.deal-list .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 60%, #000));
  color: #000;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--green) 40%, transparent);
}
.deal-cta {
  width: 100%;
  padding: 18px 32px;
  font-size: 16px;
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out),
              filter var(--t-fast) var(--ease-out);
}
/* TK-002 — Builder — bind the deal CTA to the same press animation the
   rest of .btn-primary already has. Made explicit because .deal-cta
   uses width:100% which can confuse :active inheritance. */
.deal-cta:hover { filter: brightness(1.08); }
.deal-cta:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 4px 12px var(--accent-glow, rgba(255, 126, 185, 0.35)),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition-duration: 60ms;
}
/* TK-002 — Builder — meta line under .deal-badge (post-launch removable) */
.deal-meta {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2, #b9b9c7);
}
.deal-meta .dot {
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent, #ff7eb9);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--accent, #ff7eb9);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .deal-meta .dot { animation: none; }
}
/* TK-002 — Builder — mobile stack polish at <720px.
   Deal grid already collapses 1col at <880px; tighten gap + center the
   price block so it reads as the bottom-of-card anchor. */
@media (max-width: 720px) {
  .deal { padding: 40px 24px; }
  .deal-grid { gap: 28px; }
  .deal-left h2 { font-size: 32px; }
  .deal-left p  { font-size: 15px; }
  .deal-list li { font-size: 13px; padding: 6px 0; }
  .deal-cta { padding: 16px 24px; font-size: 15px; }
  .deal-right { justify-content: stretch; }
  .deal-price { padding: 28px 24px; }
  .deal-price-now { font-size: 72px; letter-spacing: -2px; }
  .deal-badge { top: 16px; right: 16px; padding: 6px 12px; }
}
.deal-right { display: flex; justify-content: center; }
.deal-price {
  text-align: center;
  padding: 40px 48px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  position: relative;
}
.deal-price-was {
  font-size: 24px;
  color: var(--text-3);
  text-decoration: line-through;
  font-weight: 500;
  margin-bottom: 4px;
}
.deal-price-now {
  font-size: 96px;
  font-weight: 800;
  background: linear-gradient(180deg, #fbbf24 0%, var(--accent) 50%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -3px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 24px var(--accent-glow));
}
.deal-price-tag {
  font-size: 12px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* === Tier badge on cards === */
.product-card-tier {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
  border: 1px solid currentColor;
}
.product-card-tier[data-tier="starter"] { color: #6b6b7a; background: rgba(20, 20, 28, 0.6); }
.product-card-tier[data-tier="mid"] { color: #00e5ff; background: rgba(0, 50, 60, 0.5); }
.product-card-tier[data-tier="premium"] { color: #ffcc00; background: rgba(60, 40, 0, 0.5); }
.product-card-tier[data-tier="signature"] {
  color: #1a1a1a;
  background: linear-gradient(135deg, #fbbf24, var(--accent));
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* === How section === */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  position: relative;
}
/* TK-003 — Builder — thin progress rail connecting the four step numbers.
   Visible only at desktop (min-width:881px). On mobile, cards stack and
   the rail becomes visual noise; we hide it. */
.how-grid::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.16) 12%, rgba(255, 255, 255, 0.16) 88%, transparent);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 880px) {
  .how-grid::before { display: none; }
}
.how-card {
  position: relative;
  z-index: 1;
  padding: 32px 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
  overflow: hidden;
}
.how-card::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  transition: left var(--t-slower) var(--ease-out);
}
.how-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glass-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.how-card:hover::after { left: 100%; }
.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #000;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 20px;
  box-shadow: 0 6px 16px var(--accent-glow);
  transition: transform var(--t-base) var(--ease-spring);
}
.how-card:hover .how-num { transform: scale(1.1) rotate(-3deg); }
.how-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.3px; }
.how-card p { font-size: 14px; color: var(--text-2); line-height: 1.5; }

/* === Promise === */
.promise {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px;
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.promise:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.promise h2 { margin-bottom: 32px; text-align: center; }
.promise-list { list-style: none; }
.promise-list li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-glass);
  align-items: flex-start;
  transition: padding var(--t-base) var(--ease-out);
}
.promise-list li:hover { padding-left: 8px; }
.promise-list li:last-child { border-bottom: none; }
.promise-check {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 60%, #000));
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 12px color-mix(in srgb, var(--green) 50%, transparent);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
/* TK-004 — Brand + Builder — cycle 5 brand-palette accents through the
   5 promise rows. Palette order:
     1. signature pink  (--accent)        — One-time purchase
     2. warm gold       (--accent-2)      — Your AI installs it
     3. cool teal       (var(--teal))     — Runs on your machine
     4. cool sky        (var(--sky-accent)) — Real data
     5. amber accent    (var(--amber-accent)) — Ten visuals, one engine
   Each row's check uses its own gradient + shadow; the rest of the row's
   text/strong stays chrome-neutral. Hover retains the rotate(10deg) cue. */
.promise-list li:nth-child(1) .promise-check {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}
.promise-list li:nth-child(2) .promise-check {
  background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 60%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 50%, transparent);
}
.promise-list li:nth-child(3) .promise-check {
  background: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 60%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--teal) 50%, transparent);
}
.promise-list li:nth-child(4) .promise-check {
  background: linear-gradient(135deg, var(--sky-accent), color-mix(in srgb, var(--sky-accent) 60%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--sky-accent) 50%, transparent);
}
.promise-list li:nth-child(5) .promise-check {
  background: linear-gradient(135deg, var(--amber-accent), color-mix(in srgb, var(--amber-accent) 60%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--amber-accent) 50%, transparent);
}
.promise-list li:hover .promise-check { transform: scale(1.2) rotate(10deg); }
.promise-text strong { color: var(--text-0); display: block; margin-bottom: 2px; font-size: 15px; }
.promise-text span { color: var(--text-2); font-size: 14px; }

/* === Cart drawer === */
.cart {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-left: 1px solid var(--border-glass);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  box-shadow: -16px 0 60px rgba(0, 0, 0, 0.5);
}
.cart[hidden] { display: none; }
.cart.open { transform: translateX(0); }
.cart-head {
  padding: 24px;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.cart-close {
  font-size: 24px;
  color: var(--text-2);
  padding: 4px 8px;
  border-radius: 6px;
  transition:
    transform var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
.cart-close:hover { color: var(--text-0); background: var(--bg-glass); transform: rotate(90deg); }
.cart-close:active { transform: rotate(90deg) scale(0.9); }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; list-style: none; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-glass);
  opacity: 0;
  transform: translateX(20px);
  animation: slideIn 0.4s var(--ease-out) forwards;
}
.cart-item:nth-child(1) { animation-delay: 0.05s; }
.cart-item:nth-child(2) { animation-delay: 0.1s; }
.cart-item:nth-child(3) { animation-delay: 0.15s; }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
.cart-item-swatch {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--item-color, var(--accent));
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--item-color, var(--accent));
  transition: transform var(--t-base) var(--ease-spring);
}
.cart-item:hover .cart-item-swatch { transform: rotate(45deg) scale(1.1); }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 14px; font-weight: 600; }
.cart-item-price { font-size: 12px; color: var(--text-2); font-family: ui-monospace, monospace; }
.cart-item-remove {
  color: var(--text-3);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  transition: all var(--t-fast) var(--ease-out);
}
.cart-item-remove:hover { color: var(--red); background: rgba(255, 77, 109, 0.1); transform: scale(1.1) rotate(90deg); }
.cart-item-remove:active { transform: scale(0.9) rotate(90deg); }
.cart-foot {
  padding: 24px;
  border-top: 1px solid var(--border-glass);
  background: rgba(0, 0, 0, 0.3);
}
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cart-total-label { font-size: 13px; color: var(--text-2); }
.cart-total-num { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; transition: color var(--t-base) var(--ease-out); }
.cart:hover .cart-total-num { color: var(--accent); }
.cart-note { font-size: 11px; color: var(--text-3); margin-top: 12px; text-align: center; }

.cart-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 800;
  z-index: 999;
  box-shadow: 0 12px 32px var(--accent-glow);
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out);
  animation: fabFloat 3s ease-in-out infinite;
}
@keyframes fabFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.cart-fab[hidden] { display: none; }
.cart-fab:hover {
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 16px 48px var(--accent-glow);
}
.cart-fab:active { transform: scale(0.95); }

/* === Toast (TK-013) — tiny "Added to cart" confirmation === */
.elyndor-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(20, 20, 28, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 183, 90, 0.35);
  color: var(--text-0);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(232, 183, 90, 0.15);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.elyndor-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Footer === */
footer {
  border-top: 1px solid var(--border-glass);
  padding: 48px 32px;
  text-align: center;
  margin-top: 80px;
}
footer p { color: var(--text-2); font-size: 13px; margin-top: 8px; }
footer .meta { font-size: 11px; color: var(--text-3); margin-top: 4px; font-family: ui-monospace, monospace; }

/* === Thanks === */
.thanks { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; }
.thanks-card {
  max-width: 560px;
  padding: 56px 48px;
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  animation: riseIn 0.7s var(--ease-out);
}
.thanks-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 60%, #000));
  color: #000;
  border-radius: 50%;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 24px;
  box-shadow: 0 0 32px color-mix(in srgb, var(--green) 50%, transparent);
  animation: checkPop 0.6s var(--ease-spring);
}
@keyframes checkPop {
  0% { transform: scale(0) rotate(-45deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}
.thanks-card h1 { font-size: 40px; margin-bottom: 12px; }
.thanks-card p { color: var(--text-2); margin-bottom: 32px; }
.thanks-card h2 { font-size: 16px; margin: 32px 0 16px; text-align: left; text-transform: uppercase; letter-spacing: 1px; color: var(--text-2); }
.thanks-card ol { text-align: left; padding-left: 24px; color: var(--text-1); }
.thanks-card ol li { padding: 8px 0; }
.thanks-card em { color: var(--accent); font-style: normal; font-weight: 600; }
.thanks-card code { background: var(--bg-glass-strong); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; border: 1px solid var(--border-glass); }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Responsive === */
@media (max-width: 768px) {
  .nav { margin: 8px; padding: 10px 14px; }
  .nav-links { display: none; }
  .hero { padding: 48px 20px 40px; }
  .section { padding: 60px 20px; }
    .deal { padding: 32px 24px; border-radius: 20px; }
    .deal-grid { grid-template-columns: 1fr; gap: 24px; }
    .deal-left h2 { font-size: 28px; }
    .deal-badge { top: 16px; right: 16px; font-size: 10px; }
    .deal-price { padding: 24px 32px; }
    .deal-price-now { font-size: 64px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .product-card { min-height: 280px; }
  .product-card-body { padding: 16px 16px 18px; }
  .product-card-name { font-size: 17px; }
  .product-card-desc { font-size: 12px; min-height: 32px; }
  .hero-stats { gap: 28px; }
  .hero-stat-num { font-size: clamp(28px, 7vw, 40px); }
  .promise { padding: 32px 24px; }
  .product-card.is-pinned { transform: scale(1.02); }
  .detail-features { grid-template-columns: 1fr; }
  /* Disable custom cursor on touch */
  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
  a, button, .product-card { cursor: pointer; }
}

/* ============================================================================
   Featured Product (Glass launch)
   ============================================================================ */
.featured-section {
  padding: 40px 28px 64px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 126, 185, 0.10), transparent 60%);
}
.featured { max-width: var(--max); margin: 0 auto; }
.featured-card {
   position: relative;
   display: block;
   max-width: 980px; margin: 0 auto;
   padding: 36px 40px;
   border-radius: 24px;
   border: 1px solid var(--border-glass);
   background: var(--bg-glass);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   text-decoration: none; color: inherit;
   transition:
     transform var(--t-base) var(--ease-spring),
     border-color var(--t-base) var(--ease-out),
     box-shadow var(--t-base) var(--ease-out);
 }
 /* TK-001 — Builder + Brand — sharpen the launch-product card */
 .featured-card:hover {
   transform: translateY(-5px) scale(1.005);
   border-color: rgba(255, 126, 185, 0.55);
   box-shadow:
     0 28px 64px rgba(0, 0, 0, 0.55),
     inset 0 1px 0 rgba(255, 255, 255, 0.10),
     0 0 0 1px rgba(255, 126, 185, 0.18);
 }
 .featured-card:hover .featured-glow { opacity: 1; }
 .featured-card:hover .featured-cta {
   transform: translateX(4px);
   color: var(--accent);
 }
 .featured-cta {
   display: inline-block;
   transition: transform var(--t-base) var(--ease-spring), color var(--t-fast) var(--ease-out);
 }
 /* war-room variant — cyber-noir cyan + magenta */
 .featured-card.war-room {
   background:
     linear-gradient(135deg, rgba(0, 240, 255, 0.10), rgba(255, 43, 214, 0.08));
   border-color: rgba(0, 240, 255, 0.20);
 }
 .featured-card.war-room:hover {
   border-color: rgba(0, 240, 255, 0.55);
   box-shadow:
     0 28px 64px rgba(0, 0, 0, 0.55),
     inset 0 1px 0 rgba(255, 255, 255, 0.10),
     0 0 0 1px rgba(0, 240, 255, 0.20);
 }
 .featured-card.war-room .featured-flag {
   border-color: rgba(0, 240, 255, 0.40);
   color: #6ffaff;
   background: rgba(0, 240, 255, 0.08);
 }
 .featured-card.war-room .featured-glow {
   background:
     radial-gradient(circle at 75% 25%, rgba(0, 240, 255, 0.42), transparent 65%),
     radial-gradient(circle at 20% 80%, rgba(255, 43, 214, 0.18), transparent 60%);
   animation: featuredBreath 6s ease-in-out infinite;
 }
 @keyframes featuredBreath {
   0%, 100% { opacity: 0.55; transform: scale(1); }
   50%      { opacity: 0.95; transform: scale(1.04); }
 }
 @media (prefers-reduced-motion: reduce) {
   .featured-card.war-room .featured-glow { animation: none; opacity: 0.7; }
 }
.featured-price .price-now { color: var(--ink); font-weight: 700; font-size: 32px; }
.featured-price .price-was { color: var(--ink-3); font-size: 16px; text-decoration: line-through; margin-left: 6px; }
.featured-price .price-tag { color: #6ffaff; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-left: 8px; font-family: inherit; }
.featured-glow {
  position: absolute; inset: -1px;
  border-radius: 24px;
  background: radial-gradient(circle at 80% 30%, rgba(255, 126, 185, 0.30), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}
.featured-card > * { position: relative; z-index: 1; }
.featured-flag {
  display: inline-block;
  border: 1px solid rgba(255, 126, 185, 0.40);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px; letter-spacing: 0.18em;
  color: #ff7eb9;
  background: rgba(255, 126, 185, 0.08);
  margin-bottom: 18px;
}
.featured-eyebrow {
  color: var(--ink-2, #b9b9c7);
  font-size: 13px; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.featured-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 14px;
  line-height: 1.1;
}
.featured-desc {
  color: var(--ink-2, #b9b9c7);
  font-size: 16px;
  max-width: 60ch;
  margin-bottom: 28px;
}
.featured-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.featured-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px; color: var(--ink);
}
.featured-price span { color: var(--ink-3); font-size: 14px; font-family: inherit; }
.featured-cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #14091e;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 24px var(--accent-glow);
  transition: transform var(--t-fast) var(--ease-spring);
}
.featured-card:hover .featured-cta { transform: translateX(4px); }
@media (max-width: 720px) {
  .featured-card { padding: 36px 24px; }
}

/* TK-018 — Empty-cart state. Centered, muted message + pill CTA back to /command-centers/.
   Tokens used: var(--accent), var(--accent-2), var(--text-3) — matches existing brand. */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 56px 24px;
  text-align: center;
  list-style: none;
}
.cart-empty-msg {
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.cart-empty-cta {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #14091e;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 6px 24px var(--accent-glow);
  transition: transform var(--t-fast) var(--ease-spring);
}
.cart-empty-cta:hover { transform: translateX(2px); }


/* ============================================================================
   TK-061 — persona catalog styles (a–f)
   Additive block. Reuses --cyan / --magenta / --gold / --accent / --ink /
   --ink-2 / --rule / --bg-2 from ../assets/elyndor-tokens.css. NO new tokens.
   ============================================================================ */

/* TK-061b — Skills chip row under the tagline */
.product-card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.skill-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: lowercase;
  color: var(--ink-2, #b9b0a4);
  background: color-mix(in srgb, var(--ink-2, #b9b0a4) 12%, transparent);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.product-card:hover .skill-chip {
  border-color: color-mix(in srgb, var(--card-color, var(--accent)) 50%, var(--rule));
  color: var(--ink, #f4ede0);
}

/* TK-061a — Persona preview <details> block */
.product-card-persona {
  margin: 6px 0 14px;
  border-top: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  padding-top: 10px;
}
.product-card-persona > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent, #ff7eb9);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  outline: none;
}
.product-card-persona > summary::-webkit-details-marker { display: none; }
.product-card-persona > summary::before {
  content: "›";
  display: inline-block;
  transition: transform var(--t-fast) var(--ease-out);
  color: var(--gold, #e8b75a);
}
.product-card-persona[open] > summary::before { transform: rotate(90deg); }
.persona-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.persona-row {
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-2, #150c1a) 70%, transparent);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
}
.persona-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-right: 6px;
  vertical-align: middle;
}
.persona-tag.persona-helpful   { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent, #ff7eb9); }
.persona-tag.persona-concise   { background: color-mix(in srgb, var(--ink-2) 25%, transparent); color: var(--ink-2, #b9b0a4); }
.persona-tag.persona-technical { background: color-mix(in srgb, var(--cyan) 25%, transparent); color: var(--cyan, #00f0ff); }
.persona-tag.persona-creative  { background: color-mix(in srgb, var(--magenta) 25%, transparent); color: var(--magenta, #ff2bd6); }
.persona-prompt {
  font-size: 10px;
  font-style: italic;
  color: var(--ink-2, #b9b0a4);
}
.persona-reply {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink, #f4ede0);
  margin-top: 4px;
}

/* TK-061c — Pairs pill + comparison modal */
.product-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pairs-pill,
.compare-pill {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-2, #150c1a) 80%, transparent);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  color: var(--ink-2, #b9b0a4);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.pairs-pill:hover,
.compare-pill:hover {
  color: var(--ink, #f4ede0);
  border-color: var(--accent, #ff7eb9);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.compare-pill.is-active {
  color: var(--gold, #e8b75a);
  border-color: var(--gold, #e8b75a);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.elyndor-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.elyndor-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.elyndor-modal-card {
  width: min(520px, 100%);
  max-height: min(80vh, 600px);
  overflow: auto;
  background: var(--bg-2, #150c1a);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--rule);
}
.elyndor-modal-head { position: relative; margin-bottom: 16px; }
.elyndor-modal-head h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink, #f4ede0);
  margin-bottom: 4px;
}
.elyndor-modal-sub {
  font-size: 12px;
  color: var(--ink-2, #b9b0a4);
}
.elyndor-modal-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-2, #150c1a);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  color: var(--ink, #f4ede0);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out);
}
.elyndor-modal-close:hover { border-color: var(--accent, #ff7eb9); }
.elyndor-modal-empty {
  font-size: 13px;
  color: var(--ink-2, #b9b0a4);
  font-style: italic;
}
.elyndor-modal-list { display: flex; flex-direction: column; gap: 10px; }
.pairs-row {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--bg-2, #150c1a) 70%, transparent);
  transition: border-color var(--t-fast) var(--ease-out);
}
.pairs-row:hover { border-color: var(--pair-color, var(--accent)); }
.pairs-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #f4ede0);
  margin-bottom: 4px;
}
.pairs-row-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pair-color, var(--accent));
  box-shadow: 0 0 6px var(--pair-color, var(--accent));
}
.pairs-row-reason {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2, #b9b0a4);
}

/* TK-061d — Used-by quote footer */
.product-card-quote {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule, rgba(255, 255, 255, 0.08));
  font-size: 11px;
  font-style: italic;
  color: var(--ink-2, #b9b0a4);
  line-height: 1.45;
}
.product-card-quote .quote-text {
  color: var(--ink, #f4ede0);
}
.product-card-quote .quote-attribution {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--gold, #e8b75a);
}

/* TK-061e — Compare drawer (bottom-sticky) */
.compare-drawer {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--bg-2, #150c1a) 92%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  animation: drawerIn 0.32s var(--ease-out);
}
@keyframes drawerIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.compare-head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.compare-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent, #ff7eb9);
}
.compare-clear {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  color: var(--ink-2, #b9b0a4);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.compare-clear:hover { border-color: var(--magenta, #ff2bd6); color: var(--magenta, #ff2bd6); }
.compare-grid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 240px;
}
.compare-card {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-2, #150c1a) 60%, transparent);
  border: 1px solid var(--compare-color, var(--accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--compare-color, var(--accent)) 30%, transparent);
}
.compare-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #f4ede0);
}
.compare-card-tier {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--compare-color, var(--accent));
  text-transform: uppercase;
}
.compare-hint {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-2, #b9b0a4);
}
.compare-diff {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule, rgba(255, 255, 255, 0.08));
}
.compare-diff-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-2, #b9b0a4);
}
.compare-diff-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.compare-diff-row .diff-label {
  font-weight: 700;
  color: var(--gold, #e8b75a);
  white-space: nowrap;
  min-width: 88px;
}
.compare-diff-row .diff-value { color: var(--ink, #f4ede0); }
.compare-diff-row.shared .diff-label { color: var(--cyan, #00f0ff); }
.compare-diff-row.only-a   .diff-label { color: var(--accent, #ff7eb9); }
.compare-diff-row.only-b   .diff-label { color: var(--magenta, #ff2bd6); }
.compare-diff-row.price    .diff-label { color: var(--gold, #e8b75a); }

/* TK-061f — Cart persistence toast */
.elyndor-cart-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 18px;
  background: var(--bg-2, #150c1a);
  border: 1px solid var(--rule, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--rule);
  color: var(--ink, #f4ede0);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.elyndor-cart-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.elyndor-cart-toast .cart-toast-cta {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent, #ff7eb9);
  color: #14091e;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* When compare-drawer is visible, push the cart toast up so they don't collide */
body:has(.compare-drawer:not([hidden])) .elyndor-cart-toast.is-visible {
  bottom: 140px;
}

/* Mobile tweaks for the new chrome — keeps the storefront's mobile rules intact */
@media (max-width: 640px) {
  .elyndor-modal-overlay { padding: 16px; }
  .compare-drawer { flex-direction: column; align-items: stretch; }
  .compare-grid { width: 100%; }
  .elyndor-cart-toast { left: 12px; right: 12px; transform: translate(0, 20px); }
  .elyndor-cart-toast.is-visible { transform: translate(0, 0); }
}


/* ============================================================================
   MOBILE HAMBURGER NAV — pill button + slide-down drawer.
   Pure addition. Desktop nav untouched. Hidden on desktop, visible ≤768px.
   ============================================================================ */

/* Pill button — sits inside .nav on the right side */
.nav-hamburger {
  display: none;            /* default: hidden (desktop) */
  width: 40px;
  height: 32px;
  padding: 0;
  background: rgba(20, 184, 166, 0.10);
  border: 1px solid rgba(20, 184, 166, 0.40);
  border-radius: 999px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  margin-left: auto;
}
.nav-hamburger:hover {
  background: rgba(20, 184, 166, 0.20);
  border-color: rgba(20, 184, 166, 0.70);
  transform: scale(1.04);
}
.nav-hamburger:active { transform: scale(0.96); transition-duration: 60ms; }
.nav-hamburger-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #14b8a6;
  border-radius: 999px;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}
.nav-hamburger[aria-expanded="true"] { background: rgba(20, 184, 166, 0.32); }
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Drawer — slides down from the top of the screen, full-width on phone */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #0d0710 0%, #14081a 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-drawer-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14b8a6;
}
.nav-drawer-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #b9b0a4;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.nav-drawer-close:hover { color: #fafafa; border-color: rgba(255, 255, 255, 0.25); }

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  flex: 1;
}
.nav-drawer-links a {
  display: block;
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 600;
  color: #fafafa;
  text-decoration: none;
  border-radius: 8px;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms;
  border: 1px solid transparent;
}
.nav-drawer-links a:hover {
  background: rgba(20, 184, 166, 0.08);
  color: #14b8a6;
  border-color: rgba(20, 184, 166, 0.20);
}
.nav-drawer-links .nav-drawer-cta {
  margin-top: 16px;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fafafa;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}
.nav-drawer-links .nav-drawer-cta:hover {
  background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
  color: #fafafa !important;
  filter: brightness(1.1);
  border-color: transparent;
}

/* TK-HAMBURGER-STYLE: nav items as glass pills (matches 'See the Command Center' vibe) */
.nav-drawer-links { gap: 10px; padding: 24px; }
.nav-drawer-links a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 24px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em;
  color: #fafafa; text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.nav-drawer-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(20, 184, 166, 0.35);
  color: #14b8a6;
  transform: translateY(-1px);
}
.nav-drawer-links .nav-drawer-cta {
  margin-top: 14px;
  padding: 18px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fafafa;
}
.nav-drawer-links .nav-drawer-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(20, 184, 166, 0.40);
  color: #14b8a6;
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9998;
}
.nav-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Show hamburger only on mobile */
@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
  }
}


/* On mobile: hide desktop-only nav CTA + cart button (drawer takes over) */
@media (max-width: 768px) {
  .nav-cta, .nav-cart { display: none; }
}

/* TK-THANKS-FIX: prevent images from overflowing their container
   Especially the nav-mark img which has no rule of its own.
*/
.nav-mark, .mark {
  height: 24px !important;
  width: auto !important;
  max-width: 100%;
  flex-shrink: 0;
}
img {
  max-width: 100%;
  height: auto;
}

/* TK-THANKS-FIX: mobile thanks-card layout */
@media (max-width: 640px) {
  .thanks { padding: 16px; }
  .thanks-card {
    max-width: 100%;
    padding: 36px 24px;
    border-radius: 20px;
  }
  .thanks-card h1 { font-size: 28px; }
  .thanks-check {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
}

/* === TK-CONFETTI: floating particles for thanks page === */
/* Triggered automatically on page load via CSS animations - no JS */
.thanks-card .confetti-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.thanks-card .confetti-piece {
  position: absolute;
  top: -16px;
  width: 8px;
  height: 14px;
  border-radius: 1px;
  opacity: 0;
  transform-origin: center;
  animation: thanks-confetti 3.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes thanks-confetti {
  0%   { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg) scale(0.6); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--end-x, 0px), 110vh, 0) rotate(var(--rot, 720deg)) scale(1); }
}

/* Tiny CSS-only confetti: ~22 pieces spread across the width */
.thanks-card .confetti-piece:nth-child(1)  { left:  4%; background: #f5a524; animation-delay: 0.00s; --end-x:  -30px; --rot:  -540deg; }
.thanks-card .confetti-piece:nth-child(2)  { left: 10%; background: #14b8a6; animation-delay: 0.10s; --end-x:   40px; --rot:   720deg; }
.thanks-card .confetti-piece:nth-child(3)  { left: 16%; background: #fafaf8; animation-delay: 0.05s; --end-x:  -50px; --rot:  -360deg; }
.thanks-card .confetti-piece:nth-child(4)  { left: 22%; background: #f5a524; animation-delay: 0.20s; --end-x:   60px; --rot:   540deg; }
.thanks-card .confetti-piece:nth-child(5)  { left: 28%; background: #fb923c; animation-delay: 0.15s; --end-x:  -80px; --rot:  -720deg; }
.thanks-card .confetti-piece:nth-child(6)  { left: 34%; background: #14b8a6; animation-delay: 0.30s; --end-x:   30px; --rot:   360deg; }
.thanks-card .confetti-piece:nth-child(7)  { left: 40%; background: #fafaf8; animation-delay: 0.25s; --end-x:  -60px; --rot:  -540deg; }
.thanks-card .confetti-piece:nth-child(8)  { left: 46%; background: #f5a524; animation-delay: 0.10s; --end-x:   80px; --rot:   720deg; }
.thanks-card .confetti-piece:nth-child(9)  { left: 52%; background: #fb923c; animation-delay: 0.35s; --end-x:  -40px; --rot:  -360deg; }
.thanks-card .confetti-piece:nth-child(10) { left: 58%; background: #14b8a6; animation-delay: 0.20s; --end-x:   60px; --rot:   540deg; }
.thanks-card .confetti-piece:nth-child(11) { left: 64%; background: #fafaf8; animation-delay: 0.40s; --end-x:  -50px; --rot:  -720deg; }
.thanks-card .confetti-piece:nth-child(12) { left: 70%; background: #f5a524; animation-delay: 0.25s; --end-x:   70px; --rot:   360deg; }
.thanks-card .confetti-piece:nth-child(13) { left: 76%; background: #fb923c; animation-delay: 0.45s; --end-x:  -30px; --rot:  -540deg; }
.thanks-card .confetti-piece:nth-child(14) { left: 82%; background: #14b8a6; animation-delay: 0.30s; --end-x:   50px; --rot:   720deg; }
.thanks-card .confetti-piece:nth-child(15) { left: 88%; background: #fafaf8; animation-delay: 0.50s; --end-x:  -70px; --rot:  -360deg; }
.thanks-card .confetti-piece:nth-child(16) { left: 94%; background: #f5a524; animation-delay: 0.35s; --end-x:   40px; --rot:   540deg; }
.thanks-card .confetti-piece:nth-child(17) { left:  7%; background: #fb923c; animation-delay: 0.55s; --end-x:   50px; --rot:  -540deg; }
.thanks-card .confetti-piece:nth-child(18) { left: 36%; background: #14b8a6; animation-delay: 0.60s; --end-x:  -90px; --rot:   720deg; }
.thanks-card .confetti-piece:nth-child(19) { left: 60%; background: #f5a524; animation-delay: 0.65s; --end-x:   80px; --rot:  -720deg; }
.thanks-card .confetti-piece:nth-child(20) { left: 88%; background: #fb923c; animation-delay: 0.70s; --end-x:  -50px; --rot:   360deg; }
.thanks-card .confetti-piece:nth-child(21) { left: 20%; background: #fafaf8; animation-delay: 0.80s; --end-x:   90px; --rot:  -540deg; }
.thanks-card .confetti-piece:nth-child(22) { left: 75%; background: #14b8a6; animation-delay: 0.85s; --end-x:  -90px; --rot:   720deg; }

@media (prefers-reduced-motion: reduce) {
  .thanks-card .confetti-piece { animation: none; opacity: 0; }
}

.thanks-card { position: relative; overflow: hidden; }

/* === TK-AMBIENCE-MATCH: bring the homepage's pink+gold warmth to the storefront.
   The homepage bg-aurora has 3 radial gradients (pink, gold, warm-gold).
   We add the same to the storefront .bg-aurora so the transition feels seamless.
   The existing amber+teal layers are kept for brand identity, just augmented.
*/
.bg-aurora {
  background:
    /* Homepage signature: pink top-left */
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255, 126, 185, 0.16), transparent 60%),
    /* Homepage signature: gold top-right */
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(246, 201, 122, 0.14), transparent 60%),
    /* Homepage signature: warm gold bottom-center */
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232, 183, 90, 0.07), transparent 60%),
    /* Existing lab identity: amber + teal (preserved below) */
    radial-gradient(circle 500px at var(--mx, 50%) var(--my, 40%),
      rgba(245, 165, 36, 0.15),
      transparent 60%) !important;
  animation: drift 30s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(2%, -1%, 0); }
  100% { transform: translate3d(-1%, 1%, 0); }
}

body {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 126, 185, 0.04), transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(246, 201, 122, 0.04), transparent 50%),
    var(--bg-0) !important;
}

/* Strengthen the .bg-aurora base + body backdrop to feel more premium */
body::before {
  mask-image: radial-gradient(ellipse 95% 75% at 50% 40%, black 35%, transparent 90%) !important;
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 40%, black 35%, transparent 90%) !important;
  opacity: 1.2;
}

/* === TK-HERO-REFRESH: Fortune 500-style hero + promise === */
/* Big, minimal, visual. Less text more impact. */
.hero h1 {
  font-size: clamp(48px, 7vw, 88px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
  margin: 24px auto 18px !important;
  font-weight: 800 !important;
  max-width: 900px;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero .hero-lede {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  color: var(--text-2) !important;
  max-width: 540px !important;
  margin: 0 auto 40px !important;
  line-height: 1.45 !important;
}
.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin: 48px auto 36px !important;
  max-width: 720px !important;
}
.hero-stat {
  text-align: left !important;
  padding: 18px 20px !important;
  background: var(--bg-glass, rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.hero-stat-num {
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  color: var(--text-0, #fafafa) !important;
}
.hero-stat-num.accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}

/* === TK-PROMISE-REFRESH: 4-card grid replacing bullet list === */
.promise {
  text-align: center !important;
  padding: 0 0 32px !important;
}
.promise h2 {
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 36px !important;
  font-weight: 700 !important;
}
.promise-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}
.promise-card {
  text-align: left !important;
  padding: 24px 22px !important;
  background: var(--bg-glass, rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out) !important;
}
.promise-card:hover {
  border-color: rgba(245, 165, 36, 0.35) !important;
  transform: translateY(-2px) !important;
}
.promise-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(245, 165, 36, 0.15), rgba(20, 184, 166, 0.10)) !important;
  color: var(--accent, #f5a524) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(245, 165, 36, 0.20) !important;
}
.promise-card h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  color: var(--text-0, #fafafa) !important;
  letter-spacing: -0.01em !important;
}
.promise-card p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--text-2, #b9b0a4) !important;
  margin: 0 !important;
}

/* === Responsive: hero-stats + promise-grid stack on mobile === */
@media (max-width: 768px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .promise-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .hero h1 {
    font-size: 44px !important;
  }
}

/* === TK-GOLD-RAIN: vertical gold drops along the grid columns === */
.gold-rain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.gold-rain-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(245, 165, 36, 0.0) 0%,
    rgba(245, 165, 36, 0.30) 12%,
    rgba(246, 201, 122, 0.55) 18%,
    rgba(245, 165, 36, 0.6) 30%,
    rgba(245, 165, 36, 0.0) 40%,
    transparent 100%);
  animation: goldRainFall 4s linear infinite;
  will-change: transform;
}
@keyframes goldRainFall {
  0%   { transform: translateY(-200px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}
/* Stagger across 20 vertical tracks - aligned to roughly cover the grid columns */





















/* Mobile: lighter, fewer */


/* Reduce motion */

.gold-rain-track:nth-child(1) { left: 192px;  animation-delay: -0.2s; animation-duration: 5.2s; }
.gold-rain-track:nth-child(2) { left: 576px;  animation-delay: -1.6s; animation-duration: 4.8s; }
.gold-rain-track:nth-child(3) { left: 960px;  animation-delay: -3.0s; animation-duration: 5.5s; }
.gold-rain-track:nth-child(4) { left:1344px;  animation-delay: -0.8s; animation-duration: 4.4s; }
@media (prefers-reduced-motion: reduce) {
  .gold-rain-track { animation: none; opacity: 0.15; }
}


/* 20 drops, one per grid column at exactly 64px intervals, centered on column lines */
.gold-rain-track {
  width: 2px;
  height: 200px;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(245, 165, 36, 0.0) 0%,
    rgba(245, 165, 36, 0.5) 12%,
    rgba(246, 201, 122, 0.95) 18%,
    rgba(245, 165, 36, 0.6) 30%,
    rgba(245, 165, 36, 0.0) 40%,
    transparent 100%);
  animation: goldRainFall 4s linear infinite;
  will-change: transform;
}
@keyframes goldRainFall {
  0%   { transform: translateY(-200px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}
/* Each drop sits exactly on a 64px grid column - centered by transform */
.gold-rain-track { transform: translateX(-1px); }



/* Mobile: only show first 7 drops (centered grid at 64-512px) */
@media (max-width: 768px) {
  .gold-rain-track { width: 1px; }
  .gold-rain-track:nth-child(n+8) { display: none; }
}