/* ==========================================================================
   CK Network — 3D Visual & UI Design System
   Inspired by Cryptox: Deep obsidian canvas, fiery ambient ring flares,
   floating 3D perspective layers, glassmorphism, and vibrant emerald green accents.
   ========================================================================== */

:root {
  --ground: #06080D;
  --ground-dark: #040508;
  --surface: rgba(14, 18, 26, 0.72);
  --surface-solid: #0E121A;
  --raised: rgba(22, 29, 42, 0.82);
  --raised-solid: #161D2A;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-glow: rgba(16, 185, 129, 0.28);
  
  --ink: #F3EFF5;
  --muted: #9AA0AF;
  --faint: #5C6272;

  /* Central Green Palette Tokens (TASK 2) */
  --brand-50: #ECFDF5;
  --brand-100: #D1FAE5;
  --brand-200: #A7F3D0;
  --brand-300: #6EE7B7;
  --brand-400: #34D399;
  --brand-500: #10B981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065F46;
  --brand-900: #064E3B;

  --brand: #10B981;
  --brand-hi: #34D399;
  --brand-lo: #059669;
  --on-brand: #022C22;
  
  --orange: var(--brand);
  --orange-hi: var(--brand-hi);
  --orange-lo: var(--brand-lo);
  --on-orange: var(--on-brand);
  
  --gold: #10B981;
  --gold-hi: #34D399;
  --gold-lo: #059669;
  --on-gold: #022C22;
  
  --bull: #10B981;
  --bear: #E25C51;
  
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Cascadia Code', Consolas, 'SF Mono', monospace;
  
  --wrap: 1180px;
  --r: 16px;
  --r-sm: 10px;
  --r-pill: 9999px;
  
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 16px 40px -15px rgba(0, 0, 0, 0.8);
  --shadow-3d: 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 30px rgba(16, 185, 129, 0.14);
  --glow: 0 0 0 1px rgba(16, 185, 129, 0.35), 0 12px 40px -10px rgba(16, 185, 129, 0.45);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}

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

/* 3D Background Canvas & Fiery Halo */
#bg3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.fiery-halo {
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, 
    rgba(16, 185, 129, 0.28) 0%, 
    rgba(52, 211, 153, 0.14) 30%, 
    rgba(5, 150, 105, 0.05) 55%, 
    transparent 75%);
  filter: blur(40px);
  animation: haloPulse 8s ease-in-out infinite alternate;
}

.fiery-ring {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  width: 720px;
  height: 380px;
  border-radius: 50%;
  border: 2px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 60px rgba(16, 185, 129, 0.4), inset 0 0 40px rgba(52, 211, 153, 0.25);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  filter: blur(2px);
}

@keyframes haloPulse {
  0% { transform: translateX(-50%) scale(0.95); opacity: 0.7; }
  100% { transform: translateX(-50%) scale(1.08); opacity: 0.95; }
}

a {
  color: var(--orange-hi);
  text-decoration: none;
  transition: color .2s var(--ease), text-shadow .2s var(--ease);
}
a:hover {
  color: #34D399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

:focus-visible {
  outline: 2px solid var(--orange-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

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

::selection {
  background: rgba(16, 185, 129, 0.35);
  color: #FFF;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--orange);
  color: var(--on-orange);
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
  font-size: .88rem;
}
.skip:focus {
  left: 0;
}

nav, header, section, footer {
  position: relative;
  z-index: 2;
}

/* ---------------- 3D Pill Navigation ---------------- */
nav {
  position: sticky;
  top: 16px;
  z-index: 100;
  padding: 0 20px;
  margin-bottom: 20px;
}

.nav-container-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 12px 0 22px;
  background: rgba(14, 18, 26, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 0 15px rgba(16, 185, 129, 0.08);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

nav.scrolled .nav-in {
  background: rgba(10, 13, 20, 0.92);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.85), 0 0 25px rgba(16, 185, 129, 0.15);
}

.logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  display: grid;
  place-items: center;
  color: #000;
  font-size: 0.85rem;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}
.logo b {
  color: var(--orange-hi);
  font-weight: 600;
}

.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: .88rem;
}

.nav-links a:not(.btn) {
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  font-weight: 500;
}
.nav-links a:not(.btn):hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  width: 42px;
  height: 42px;
  cursor: pointer;
  font-size: 1.1rem;
}

/* ---------------- 3D Buttons & CTAs ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .88rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  transform-style: preserve-3d;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  opacity: 0.4;
  pointer-events: none;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-gold, .btn-orange {
  background: linear-gradient(135deg, #10B981 0%, #059669 50%, #CC2200 100%);
  color: #FFF;
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn-gold:hover, .btn-orange:hover {
  background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #DD2200 100%);
  color: #FFF;
  transform: translateY(-2px) translateZ(4px);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.65), 0 0 15px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  border-color: rgba(16, 185, 129, 0.5);
  color: #FFF;
  background: rgba(16, 185, 129, 0.1);
  transform: translateY(-2px) translateZ(4px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2);
}

.btn-lg {
  padding: 14px 30px;
  font-size: .95rem;
}

/* ---------------- Typography ---------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-hi);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--r-pill);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.sec-eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-hi);
  margin-bottom: 12px;
}

h1 {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: #FFF;
}

h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #FFF 20%, #34D399 60%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(16, 185, 129, 0.3));
}

h2 {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: 14px;
  color: #FFF;
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  color: #FFF;
}

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 38rem;
  text-wrap: pretty;
}

.sec-lede {
  color: var(--muted);
  max-width: 42rem;
  margin-bottom: 44px;
  text-wrap: pretty;
  font-size: 1rem;
}

.mono {
  font-family: var(--mono);
}

/* ==========================================================================
   UNIFIED 3D CRYPTOX CARD DESIGN (Applied across ALL cards)
   Featuring: Deep obsidian warm canvas, fiery amber bottom rim glow,
   smooth rounded squircle corners, specular top highlights & 3D tilt.
   ========================================================================== */
section {
  padding: 96px 0;
  border-top: none;
  position: relative;
}

.card, .tg-card, .feat, .step, .price, .tile, .stage-card, details, .chartbox, .note {
  background: radial-gradient(140% 120% at 20% 0%, rgba(5, 150, 105, 0.08) 0%, rgba(18, 22, 32, 0.92) 50%, rgba(8, 10, 15, 0.98) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1.5px solid rgba(16, 185, 129, 0.7);
  border-radius: 28px;
  padding: 30px;
  box-shadow: inset 0 -38px 50px -15px rgba(16, 185, 129, 0.5), 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(16, 185, 129, 0.2);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* Specular Top Edge Highlight & Fiery Underglow Bar */
.card::before, .tg-card::before, .feat::before, .step::before, .price::before, .tile::before, .stage-card::before, details::before, .chartbox::before, .note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.5), rgba(255, 255, 255, 0.25) 30%, transparent 80%);
  pointer-events: none;
  z-index: 2;
}

.card::after, .tg-card::after, .feat::after, .step::after, .price::after, .tile::after, .stage-card::after, details::after, .chartbox::after, .note::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.85), rgba(255, 68, 0, 0.95), transparent);
  filter: blur(1px);
  pointer-events: none;
  z-index: 2;
}

/* 3D Hover & Fiery Bottom Rim Glow Enhancement */
.card:hover, .tg-card:hover, .feat:hover, .step:hover, .price:hover, .tile:hover, .stage-card:hover, details:hover, .chartbox:hover, .note:hover {
  border-color: rgba(255, 130, 0, 0.65);
  border-bottom-color: rgba(52, 211, 153, 0.95);
  box-shadow: inset 0 -48px 65px -10px rgba(5, 150, 105, 0.72), 0 30px 65px -12px rgba(0, 0, 0, 0.95), 0 0 40px rgba(5, 150, 105, 0.45);
  transform: translateY(-8px) translateZ(16px) rotateX(3deg) rotateY(-1.5deg);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; width: 100%; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; width: 100%; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: 100%; }

/* ---------------- Hero Section ---------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 60px 0 70px;
  text-align: center;
}

.hero-content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* Floating 3D Pills around hero */
.floating-pills {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.pill-3d {
  position: absolute;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(22, 28, 40, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 10px rgba(16, 185, 129, 0.15);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
  animation: floatPill 6s ease-in-out infinite alternate;
}

.pill-3d:hover {
  transform: scale(1.1) translateZ(20px);
  border-color: var(--orange-hi);
  color: #FFF;
}

.pill-3d .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}

.p1 { top: -10px; left: -35px; animation-delay: 0s; }
.p2 { top: 18%; right: -45px; animation-delay: 1.5s; }
.p3 { bottom: 12%; left: -45px; animation-delay: 3s; }
.p4 { bottom: 8%; right: -45px; animation-delay: 4.5s; }

@keyframes floatPill {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(2deg); }
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero-note {
  margin-top: 22px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: normal;
}

/* Hero 3D Perspective Stage / Deck */
.hero-deck {
  perspective: 1200px;
  margin-top: 20px;
  width: 100%;
}

.hero-stage {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 0.9fr;
  gap: 20px;
  align-items: center;
  transform: rotateX(8deg) rotateY(0deg) translateZ(0);
  transition: transform 0.4s var(--ease);
  transform-style: preserve-3d;
}

.hero-deck:hover .hero-stage {
  transform: rotateX(2deg) rotateY(0deg) translateZ(10px);
}

.stage-card {
  background: rgba(14, 18, 26, 0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-3d);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
  text-align: left;
}

.stage-card:hover {
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateZ(30px) scale(1.03);
}

.chartbox {
  background: rgba(14, 18, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px 14px 12px;
  position: relative;
  box-shadow: var(--shadow-3d);
  transform-style: preserve-3d;
}

.chartbox .tag {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.chartbox .tag b {
  color: var(--orange-hi);
}

canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* only the hero candlestick canvas is fixed height — the track-record curve
   sizes itself from its own CSS box so it stays crisp on retina screens */
.chartbox canvas {
  height: 290px;
}

/* ---------------- Telegram Cards (Reference UI/UX Design) ---------------- */
.signal-cards-grid {
  margin-top: 36px;
  align-items: stretch;
}

.ref-card {
  position: relative;
  border-radius: 28px;
  padding: 32px 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  margin-top: 18px;
  overflow: visible;
}

.ref-card:hover {
  transform: translateY(-8px);
}

.ref-card-dark {
  background: radial-gradient(ellipse at 85% 15%, rgba(16, 185, 129, 0.12) 0%, rgba(18, 22, 30, 0.96) 65%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.ref-card-dark:hover {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.85), 0 0 25px rgba(16, 185, 129, 0.2);
}

.ref-card-vibrant {
  background: linear-gradient(145deg, #10B981 0%, #059669 55%, #B83B00 100%);
  border: 1px solid rgba(52, 211, 153, 0.6);
  box-shadow: 0 20px 50px -10px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(209, 250, 229, 0.6);
  color: #0A0C10;
}

.ref-card-vibrant:hover {
  box-shadow: 0 28px 60px -10px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(209, 250, 229, 0.8);
  border-color: rgba(209, 250, 229, 0.8);
}

.card-float-badge {
  position: absolute;
  top: -18px;
  left: 26px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  color: #000;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
  border: 2px solid #0E1017;
  z-index: 5;
}

.card-float-badge.badge-dark {
  background: #0A0C10;
  color: #10B981;
  border: 2px solid #10B981;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.card-top-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.brand-logo-mini {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.18);
  color: #34D399;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.brand-logo-mini.logo-dark {
  background: rgba(10, 12, 16, 0.15);
  color: #0A0C10;
  border: 1px solid rgba(10, 12, 16, 0.25);
}

.brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

.brand-dark .brand-name {
  color: #0A0C10;
}

.card-headline {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.025em;
  text-align: left;
}

.highlight-text {
  color: #34D399;
}

.headline-dark {
  color: #0A0C10 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.card-subtext {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: left;
}

.subtext-dark {
  color: rgba(10, 12, 16, 0.8) !important;
}

.card-preview-box {
  background: rgba(10, 12, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 0.8rem;
  margin-bottom: 24px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: left;
}

.card-preview-box.preview-dark {
  background: rgba(10, 12, 16, 0.12);
  border: 1px solid rgba(10, 12, 16, 0.18);
  color: #0A0C10;
}

.preview-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.preview-badge.badge-pro {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
}

.preview-badge.badge-dark-pill {
  background: #0A0C10;
  color: #34D399;
}

.preview-line {
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.preview-sub {
  font-size: 0.74rem;
  opacity: 0.75;
}

.card-footer-action {
  margin-bottom: 20px;
  text-align: left;
}

.card-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #FFF;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.card-btn-outline:hover {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.2);
}

.card-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(10, 12, 16, 0.4);
  background: #0A0C10;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.card-btn-dark:hover {
  background: #1A1D26;
  color: #34D399;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.card-social-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-social-bar.social-dark {
  border-top-color: rgba(10, 12, 16, 0.15);
}

.social-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-icon-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.social-icon-btn:hover {
  color: #34D399;
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.1);
}

.social-icon-btn.btn-dark {
  color: rgba(10, 12, 16, 0.6);
}

.social-icon-btn.btn-dark:hover {
  color: #0A0C10;
  background: rgba(10, 12, 16, 0.12);
  transform: scale(1.1);
}

.tg-card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tg-card:hover {
  transform: translateY(-6px) translateZ(10px);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(16, 185, 129, 0.2);
}

.tg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.tg-ava {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 800;
}

.tg-free .tg-ava {
  background: var(--raised-solid);
  color: var(--muted);
  border: 1px solid var(--line);
}

.tg-paid .tg-ava {
  background: linear-gradient(135deg, var(--orange), var(--gold));
  color: #000;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.tg-name {
  font-weight: 600;
  font-size: .95rem;
  color: #FFF;
}

.tg-sub {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--faint);
}

.tg-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 250px;
}

.bubble {
  background: rgba(22, 29, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px 14px 14px 14px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.75;
  max-width: 98%;
  color: var(--ink);
  transition: border-color 0.2s var(--ease);
}

.tg-paid .bubble {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.04);
}

.bubble .k {
  color: var(--muted);
}

/* ---------------- Features Grid (Reference Top-Tabbed Card Design) ---------------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  margin-top: 42px;
}

.feat-card {
  position: relative;
  background: radial-gradient(130% 130% at 50% 0%, rgba(16, 185, 129, 0.08) 0%, rgba(18, 22, 32, 0.9) 60%, rgba(10, 12, 16, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 26px 24px 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  display: flex;
  flex-direction: column;
}

.feat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.88), 0 0 25px rgba(16, 185, 129, 0.2);
}

/* Top Overhanging Tab/Clip */
.feat-tab {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  z-index: 2;
}

.feat-card:hover .feat-tab {
  transform: translateX(-50%) scaleX(1.15);
}

.tab-orange  { background: linear-gradient(90deg, #10B981, #34D399); box-shadow: 0 0 12px rgba(16, 185, 129, 0.75); }
.tab-amber   { background: linear-gradient(90deg, #10B981, #6EE7B7); box-shadow: 0 0 12px rgba(16, 185, 129, 0.75); }
.tab-coral   { background: linear-gradient(90deg, #10B981, #34D399); box-shadow: 0 0 12px rgba(5, 150, 105, 0.75); }
.tab-emerald { background: linear-gradient(90deg, #10B981, #34D399); box-shadow: 0 0 12px rgba(16, 185, 129, 0.75); }
.tab-teal    { background: linear-gradient(90deg, #059669, #34D399); box-shadow: 0 0 12px rgba(16, 185, 129, 0.75); }
.tab-purple  { background: linear-gradient(90deg, #10B981, #A7F3D0); box-shadow: 0 0 12px rgba(16, 185, 129, 0.75); }

/* Header row: Headline & Icon */
.feat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.feat-headline {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.headline-orange  { color: #34D399; }
.headline-amber   { color: #34D399; }
.headline-coral   { color: #34D399; }
.headline-emerald { color: #34D399; }
.headline-teal    { color: #34D399; }
.headline-purple  { color: #6EE7B7; }

.feat-header-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease, transform 0.3s ease;
}

.feat-card:hover .feat-header-icon {
  color: #FFFFFF;
  transform: scale(1.12);
}

.feat-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 14px 0 18px;
}

.feat-body {
  text-align: left;
  flex: 1;
}

.feat-body h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.feat-body p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

/* ---------------- Section Standard Layout & Engine Pill Styling ---------------- */
section .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.engine-eyebrow-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.engine-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.18), inset 0 0 12px rgba(16, 185, 129, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  color: #34D399;
  transition: all 0.3s ease;
  cursor: default;
}

.engine-pill:hover {
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.32), inset 0 0 16px rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: #D1FAE5;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  flex-shrink: 0;
}

.engine-title {
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 20px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.engine-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 64px;
}

#engine .feat-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

#engine .feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#engine .feat .icon-badge {
  margin-inline: auto;
  margin-bottom: 16px;
}

#engine .feat h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  text-align: center;
  margin-bottom: 10px;
  color: #FFF;
}

#engine .feat p {
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

@media (max-width: 900px) {
  #engine .feat-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Flow Steps (Reference Dashed Node Arc Design) ---------------- */
.flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 48px;
  position: relative;
  gap: 8px;
}

.step-flow-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: transform 0.35s var(--ease);
}

.step-flow-item:hover {
  transform: translateY(-6px);
}

.step-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}

.step-node-wrap {
  position: relative;
  margin-bottom: 24px;
}

.step-node {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(18, 22, 32, 0.8);
  border: 2px dashed rgba(16, 185, 129, 0.4);
  color: #34D399;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(16, 185, 129, 0.05);
  transition: all 0.35s var(--ease);
  position: relative;
}

.step-node svg {
  display: block;
  transition: transform 0.35s var(--ease);
}

/* Node 1 / Active Step highlight */
.active-step .step-node {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 2px solid #34D399;
  color: #0A0C10;
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.5), 0 12px 30px rgba(0, 0, 0, 0.6);
}

.active-step .step-num {
  color: #34D399;
}

.step-flow-item:hover .step-node {
  border-color: #10B981;
  border-style: solid;
  color: #34D399;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.4), 0 12px 30px rgba(0, 0, 0, 0.7);
  transform: scale(1.06);
}

.active-step:hover .step-node {
  color: #000;
  box-shadow: 0 0 50px rgba(16, 185, 129, 0.7), 0 14px 35px rgba(0, 0, 0, 0.8);
}

.step-flow-item:hover .step-node svg {
  transform: scale(1.1);
}

.step-arc-connector {
  flex: 0 0 70px;
  height: 40px;
  margin-top: 52px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.step-arc-connector svg path {
  transition: stroke 0.35s ease;
}

.flow:hover .step-arc-connector svg path {
  stroke: rgba(16, 185, 129, 0.65);
}

.step-content {
  text-align: center;
  max-width: 220px;
}

.step-content h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}

.step-content p {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 820px) {
  .flow {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .step-arc-connector {
    transform: rotate(90deg);
    flex: 0 0 30px;
    margin-top: 0;
  }

  .step-content {
    max-width: 320px;
  }
}

/* ---------------- Brand Leadership Section (Reference Profile Card Design) ---------------- */
.leadership-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.leadership-card {
  background: rgba(18, 22, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}

.leadership-card.large-card {
  max-width: 480px;
  width: 100%;
  padding: 18px;
  border-radius: 32px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.leadership-card:hover {
  transform: translateY(-8px);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 185, 129, 0.18);
}

.leadership-img-box {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #0D1017;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.large-card .leadership-img-box {
  aspect-ratio: 1 / 1.1;
  border-radius: 24px;
}

.leadership-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s var(--ease);
}

.leadership-card:hover .leadership-img {
  transform: scale(1.05);
}

.leadership-body {
  padding: 18px 12px 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.large-card .leadership-body {
  padding: 22px 14px 12px;
}

.leadership-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.leadership-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: #34D399;
  margin-bottom: 4px;
  line-height: 1.4;
}

.leadership-subtag {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 14px;
}

.leadership-name {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.large-card .leadership-name {
  font-size: 1.55rem;
  font-weight: 800;
}

.verified-badge {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.leadership-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 20px;
  min-height: 42px;
}

.large-card .leadership-desc {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  min-height: auto;
  margin-bottom: 22px;
}

.leadership-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
  border-top: none;
  gap: 10px;
}

.large-card .leadership-footer {
  padding-top: 4px;
  border-top: none;
}

.leadership-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}

.large-card .leadership-meta {
  font-size: 0.95rem;
  gap: 18px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-item svg {
  color: rgba(255, 255, 255, 0.5);
}

.leadership-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #FFFFFF;
  color: #0A0C10;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.leadership-btn:hover {
  background: #10B981;
  border-color: #34D399;
  color: #0A0C10;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
}

@media (max-width: 960px) {
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .leadership-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Stats Band (Reference Underline Metric Design) ---------------- */
#live-numbers .engine-desc {
  margin-bottom: 38px;
}

.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 48px;
}

.band-cta-wrap {
  text-align: center;
  margin-top: 8px;
}

.stat-card {
  background: rgba(18, 22, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 35px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.stat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 22px 45px -8px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 185, 129, 0.18);
}

.stat-val, .band .n {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  color: #34D399;
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.stat-line {
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.35);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
  margin-bottom: 16px;
  transition: width 0.35s var(--ease), background-color 0.35s var(--ease);
}

.stat-card:hover .stat-line {
  width: 100%;
  background: #34D399;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.6);
}

.stat-label, .band .l {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 4px;
}

.stat-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 900px) {
  .band {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .band {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Pricing Grid (Reference Card Design) ---------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.price {
  background: rgba(18, 22, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
}

.price:hover {
  transform: translateY(-8px);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 185, 129, 0.15);
}

.price.featured {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(16, 185, 129, 0.22);
}

/* Header Box inside Card */
.price-header-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.price-header-box.featured-header {
  background: radial-gradient(circle at 85% 15%, rgba(52, 211, 153, 0.4) 0%, rgba(16, 185, 129, 0.22) 45%, rgba(22, 16, 14, 0.95) 100%);
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: inset 0 1px 0 rgba(209, 250, 229, 0.2);
}

.price-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 6px;
}

.price-plan-name {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
}

.price-pop-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(52, 211, 153, 0.5);
  color: #A7F3D0;
}

.price-amount-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 8px 0 6px;
}

.price-amount {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.03em;
}

.price-period {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 2px;
}

.price-plan-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  margin: 8px 0 20px;
  min-height: 40px;
}

.price-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  background: #0D1017;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.price-btn:hover {
  background: #181E2C;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.price-btn.featured-btn {
  background: #0A0C10;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.price-btn.featured-btn:hover {
  background: #10B981;
  color: #0A0C10;
  border-color: #34D399;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.5);
}

/* Feature List Body */
.price-body {
  padding: 22px 18px 14px;
  text-align: left;
}

.price-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}

.price-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.4;
}

.price-feature.yes {
  color: rgba(255, 255, 255, 0.92);
}

.price-feature.yes .check-icon {
  color: #34D399;
  flex-shrink: 0;
}

.price-feature.no {
  color: rgba(255, 255, 255, 0.38);
}

.price-feature.no .check-icon {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- FAQ Section (Reference Design) ---------------- */
.faq-container {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 52px;
  align-items: start;
  width: 100%;
}

.faq-left {
  text-align: left;
  position: sticky;
  top: 100px;
}

.faq-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 16px 0 16px;
}

.faq-highlight {
  color: #34D399;
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.faq-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 420px;
}

.faq-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-card {
  background: rgba(18, 22, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 22px 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.3s var(--ease);
  overflow: hidden;
}

.faq-card:hover {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 14px 35px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.1);
}

.faq-card[open] {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(22, 27, 38, 0.85);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7), 0 0 25px rgba(16, 185, 129, 0.15);
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-summary::-webkit-details-marker,
.faq-summary::marker {
  display: none;
}

.faq-question {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.faq-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}

.faq-card:hover .faq-icon-btn {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(52, 211, 153, 0.5);
  color: #A7F3D0;
}

.faq-card[open] .faq-icon-btn {
  background: #10B981;
  border-color: #34D399;
  color: #0A0C10;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.faq-chevron {
  transition: transform 0.3s var(--ease);
  display: block;
}

.faq-card[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-answer p {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

@media (max-width: 900px) {
  .faq-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .faq-left {
    position: static;
  }

  .faq-title {
    font-size: 2.2rem;
  }
}

/* ---------------- Tables & Chips ---------------- */
.tblwrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
}

/* ---------------- Track Record / Performance Cards Design ---------------- */
.perf-section {
  padding-top: 26px !important;
  padding-bottom: 56px !important;
  border: 0 !important;
}

.perf-section .band {
  margin-top: 0;
  margin-bottom: 36px;
}

.perf-card {
  margin-bottom: 36px;
}

.perf-section .risk-card-wrap {
  margin-top: 0;
  margin-bottom: 0;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.perf-card-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.perf-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.perf-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}

.perf-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

.perf-card-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 18px 0 22px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}

th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: rgba(14, 18, 26, 0.9);
  position: sticky;
  top: 0;
  z-index: 2;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

tbody tr {
  transition: background .14s var(--ease);
}

tbody tr:hover td {
  background: rgba(16, 185, 129, 0.05);
}

.up { color: var(--bull); }
.dn { color: var(--bear); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.chip-buy, .chip-win { background: rgba(62, 189, 130, 0.15); color: var(--bull); }
.chip-sell, .chip-loss { background: rgba(226, 92, 81, 0.15); color: var(--bear); }

/* ---------------- Risk Disclosure Section (Reference System Card Design) ---------------- */
.risk-card-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.risk-card {
  max-width: 520px;
  width: 100%;
  background: radial-gradient(130% 130% at 10% 10%, rgba(16, 185, 129, 0.14) 0%, rgba(18, 22, 32, 0.92) 50%, rgba(10, 12, 16, 0.98) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 32px;
  padding: 36px 32px 32px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.85), 0 0 35px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.risk-card:hover {
  transform: translateY(-6px);
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.9), 0 0 45px rgba(16, 185, 129, 0.3);
}

.risk-card-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.risk-card-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.risk-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 28px;
  text-wrap: pretty;
}

.risk-card-progress-box {
  margin-bottom: 28px;
  width: 100%;
}

.risk-card-progress-track {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  padding: 2px;
  position: relative;
  margin-bottom: 10px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.risk-card-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.7);
  transition: width 1s ease;
}

.risk-card-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  padding: 0 2px;
}

.risk-meta-val {
  color: #34D399;
  font-weight: 700;
}

.risk-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #0A0C10;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.risk-card-btn:hover {
  background: #10B981;
  border-color: #34D399;
  color: #FFFFFF;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.6);
  transform: translateY(-2px);
}

.risk-card-btn.acknowledged {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10B981;
  color: #10B981;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* ---------------- Misc & Footer ---------------- */
.note {
  background: var(--surface);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--orange-hi);
  border-radius: var(--r-sm);
  padding: 22px 26px;
  font-size: .88rem;
  color: var(--muted);
  text-wrap: pretty;
}

.note b {
  color: #FFF;
}

.note.risk {
  border-left-color: var(--bear);
}

footer {
  border-top: 1px solid var(--line-soft);
  padding: 44px 0;
  font-size: .85rem;
  color: var(--faint);
}

.foot-in {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Skeleton loader */
.skel {
  display: inline-block;
  min-width: 3ch;
  border-radius: 5px;
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(16, 185, 129, 0.15) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: sh 1.3s infinite linear;
}

@keyframes sh {
  to { background-position: -200% 0; }
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .hero-stage {
    grid-template-columns: 1fr;
    transform: none !important;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
  .band {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .feat-grid, .flow, .price-grid {
    grid-template-columns: 1fr;
  }
  section {
    padding: 60px 0;
  }
  .nav-toggle {
    display: block;
  }
  .nav-links {
    position: fixed;
    inset: 70px 20px auto 20px;
    background: rgba(10, 13, 20, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 20px;
    display: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a:not(.btn) {
    padding: 12px 16px;
  }
  .nav-links .btn {
    margin-top: 8px;
    width: 100%;
  }
  .pill-3d {
    display: none;
  }
}

/* ---------------- Crypto King Profile Card Design ---------------- */
.ck-card-wrap {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.ck-card {
  position: relative;
  background: radial-gradient(130% 130% at 50% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(38, 26, 20, 0.94) 55%, rgba(18, 14, 12, 0.98) 100%);
  border: 1px solid rgba(52, 211, 153, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(16, 185, 129, 0.14);
  border-radius: 24px;
  padding: 42px 32px 36px;
  text-align: center;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}

.ck-card:hover {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 28px 60px rgba(0, 0, 0, 0.85), 0 0 48px rgba(16, 185, 129, 0.25);
}

.ck-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #34D399;
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.ck-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
}

.ck-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  line-height: 1.15;
}

.ck-title span {
  background: linear-gradient(135deg, #FFFFFF 30%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ck-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 6px;
  line-height: 1.5;
}

.ck-meta {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Facebook Follower Live Badge */
.ck-fb-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(24, 119, 242, 0.14);
  border: 1px solid rgba(24, 119, 242, 0.38);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 4px auto 18px;
  box-shadow: 0 0 18px rgba(24, 119, 242, 0.18);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.ck-fb-count-badge:hover {
  background: rgba(24, 119, 242, 0.26);
  border-color: rgba(24, 119, 242, 0.65);
  box-shadow: 0 0 28px rgba(24, 119, 242, 0.38);
  transform: translateY(-2px);
}

.fb-badge-icon {
  width: 19px;
  height: 19px;
  fill: #1877F2;
  flex-shrink: 0;
}

.fb-count-num {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 800;
  color: #3892FF;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.fb-count-label {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.fb-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 10px #00E676;
  animation: fbPulse 2s infinite ease-in-out;
}

@keyframes fbPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.75; }
  50% { transform: scale(1.3); opacity: 1; }
}

.ck-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 24px;
  border-top: none;
}

/* Styled Container Box for Social Accounts */
.social-box-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  padding: 12px 18px;
  margin: 16px 0 20px 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.social-box-row .ck-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.social-box-row .ck-social-icon:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(52, 211, 153, 0.65);
  color: #34D399;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.social-box-row .ck-social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ck-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.ck-social-icon:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(16, 185, 129, 0.65);
  color: #34D399;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35);
}

.ck-social-icon svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 600px) {
  .ck-card {
    padding: 32px 20px 28px;
  }
  .ck-title {
    font-size: 2rem;
  }
  .ck-subtitle {
    font-size: 1rem;
  }
  .ck-social-icon {
    width: 42px;
    height: 42px;
  }
  .ck-social-icon svg {
    width: 19px;
    height: 19px;
  }
}

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


/* ==========================================================================
   RESPONSIVE LAYER — Android phones, iPhone/iPad, MacBook
   Breakpoints below stack on top of the per-component queries further up.
     980px  nav collapses, every grid drops to one column (defined above)
     820px  tablets and large phones in portrait
     560px  phones
     400px  small Android handsets and iPhone SE
   ========================================================================== */

/* ---- safe areas (notched iPhones with viewport-fit=cover) ----------------
   No top padding on <body>: the page is meant to scroll under the status bar
   and the sticky nav carries the inset itself. Padding the body as well would
   leave a permanent blank strip above the header. */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.18);
}

nav {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}

/* iOS Safari counts the collapsing URL bar in 100vh, which leaves the fixed
   backdrop taller than the visible page. dvh tracks the real viewport. */
#bg3d {
  height: 100vh;
  height: 100dvh;
}

button, a.btn, .nav-toggle, input, select, summary {
  min-height: 44px;
}

.tblwrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ---- touch devices --------------------------------------------------------
   A tap on a touch screen leaves :hover latched until the next tap elsewhere,
   so every lift/tilt would stick. Neutralise the movement, keep the colour. */
@media (hover: none), (pointer: coarse) {
  .card:hover, .tg-card:hover, .feat:hover, .step:hover, .price:hover,
  .tile:hover, .stage-card:hover, details:hover, .chartbox:hover, .note:hover,
  .ref-card:hover, .feat-card:hover, .stat-card:hover, .leadership-card:hover,
  .step-flow-item:hover, .pill-3d:hover, .ck-social-icon:hover,
  .btn:hover, .btn-gold:hover, .btn-orange:hover, .btn-ghost:hover,
  .nav-links a:not(.btn):hover, .risk-card:hover {
    transform: none;
  }
  .leadership-card:hover .leadership-img { transform: none; }
  .hero-deck:hover .hero-stage { transform: rotateX(8deg); }
  a:hover { text-shadow: none; }

  /* comfortable tap targets (Apple HIG / Material both ask for ~44px) */
  .ck-social-icon { min-width: 44px; min-height: 44px; }
  .social-icon-btn { min-width: 44px; }
  .nav-links a:not(.btn) { min-height: 44px; display: flex; align-items: center; }
}

/* ---- 820px: tablets, large phones ---------------------------------------- */
@media (max-width: 820px) {
  section { padding: 56px 0; }

  .card, .tg-card, .feat, .step, .price, .tile, .stage-card, details,
  .chartbox, .note {
    padding: 24px;
    border-radius: 22px;
  }

  .hero { padding: 34px 0 48px; }
  .hero-deck { perspective: none; }

  /* min-height was sized for a 3-across desktop row; stacked it just adds
     empty space to every card */
  .ref-card { min-height: 0; padding: 28px 22px 18px; }

  .leadership-card.large-card { max-width: 100%; }
  .faq-container { gap: 28px; }
  .chartbox canvas { height: 240px; }
}

/* ---- mobile nav dropdown (wherever the hamburger is shown) ---------------- */
@media (max-width: 980px) {
  /* the panel has to clear the pill nav (16px offset + 58px tall) plus any
     notch inset, and stay scrollable if the links outgrow a short screen */
  .nav-links {
    inset: calc(88px + env(safe-area-inset-top, 0px)) 16px auto 16px;
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- 560px: phones -------------------------------------------------------- */
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  section { padding: 44px 0; }

  h1 { font-size: clamp(1.95rem, 8.4vw, 2.6rem); }
  .engine-title { font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .lede, .engine-desc, .sec-lede { font-size: .97rem; }
  .hero-note { font-size: .92rem; }

  /* full-width CTAs are easier to hit one-handed */
  .hero-cta { gap: 12px; }
  .hero-cta .btn { width: 100%; }

  .card, .tg-card, .feat, .step, .price, .tile, .stage-card, details,
  .chartbox, .note { padding: 20px; border-radius: 20px; }

  /* heavy backdrop blur on a dozen stacked cards is the main source of jank
     on mid-range Android — halve the radius rather than drop the effect */
  .card, .tg-card, .feat, .step, .price, .tile, .stage-card, details,
  .chartbox, .note, .stat-card, .risk-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .band { gap: 12px; margin-bottom: 32px; }
  .stat-card { padding: 20px 18px; border-radius: 18px; }

  .risk-card { padding: 28px 20px 24px; border-radius: 24px; }
  .social-box-row { gap: 8px; padding: 10px 12px; }

  .leadership-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .leadership-btn { width: 100%; text-align: center; }

  .foot-in { flex-direction: column; align-items: center; text-align: center; gap: 10px; }

  .chartbox canvas { height: 200px; }
  table { font-size: .82rem; }

  /* the ambient flares are full-screen blurs; shrink them so phones are not
     compositing a 900px blurred layer every frame */
  .fiery-halo { width: 560px; height: 560px; top: -180px; filter: blur(30px); }
  .fiery-ring { width: 380px; height: 220px; top: -120px; }
}

/* ---- 400px: small Android handsets, iPhone SE ----------------------------- */
@media (max-width: 400px) {
  .wrap { padding: 0 14px; }
  nav { padding-left: 12px; padding-right: 12px; }
  .nav-in { padding: 0 8px 0 14px; }
  .logo { font-size: 1.1rem; }

  .card-headline { font-size: 1.26rem; }
  .ck-social-icon { width: 40px; height: 40px; }
  .ck-social-icon svg { width: 18px; height: 18px; }
  .step-node { width: 72px; height: 72px; }
  .price-amount { font-size: 2.4rem; }
  .eyebrow { font-size: .66rem; letter-spacing: .12em; }
}

/* ---- phones held sideways -------------------------------------------------
   A landscape phone has ~380px of height; the desktop rhythm would push the
   first CTA below the fold. */
@media (max-height: 500px) and (orientation: landscape) {
  section { padding: 34px 0; }
  .hero { padding: 20px 0 30px; }
  .nav-in { height: 48px; }
  .chartbox canvas { height: 180px; }
  .fiery-halo, .fiery-ring { display: none; }
}

/* ---- retina / high-DPI (MacBook, iPhone, most Android) --------------------
   Hairline borders round up to a full device pixel and read as heavy lines. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .feat-divider, .perf-card-divider { transform: scaleY(.5); }
}