/*
Theme Name:   Empower 2CU Supremium
Theme URI:    https://2cu.online
Description:  Layman's Supremium Edition — mobile-first community dignity platform
Author:       Jaundrè Steenkamp
Author URI:   https://2cu.online
Version:      5.3.0
Tags:         mobile-first, community, dark, gold, empowerment
Text Domain:  empower-2cu
*/

/* ═══════════════════════════════════════════════════
   § 1  DESIGN TOKENS — v5.3.0 Elevated
═══════════════════════════════════════════════════ */
:root {
  /* ── Gold System ── */
  --gold:           #d4af37;
  --gold-hi:        #f5e070;
  --gold-lo:        #9a7420;
  --gold-warm:      #e8a020;           /* NEW: richer amber-gold */
  --gold-pale:      #fdf3c0;           /* NEW: near-white gold */
  --gold-grad:      linear-gradient(135deg,#5c3a00 0%,#c9991a 28%,#f0d060 52%,#fefac2 68%,#d4af37 84%,#8a6610 100%);
  --gold-grad-h:    linear-gradient(90deg,#5c3a00,#c9991a,#f0d060,#fefac2,#d4af37,#8a6610);
  --gold-shimmer:   linear-gradient(90deg,#5c3a00,#c9991a,#f0d060,#fefac2,#d4af37,#9a7420,#5c3a00);
  --gold-radial:    radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.22) 0%,transparent 60%);
  --gold-glow:      0 0 20px rgba(212,175,55,.3),0 0 48px rgba(212,175,55,.12);
  --gold-glow-lg:   0 0 40px rgba(212,175,55,.45),0 0 80px rgba(212,175,55,.2);

  /* ── Amber (SA Earth Warmth) ── */
  --amber:          #c8741a;           /* NEW: burnt sienna-amber */
  --amber-hi:       #e89840;
  --amber-glow:     0 0 20px rgba(200,116,26,.3);

  /* ── Rose Earth (Drakensberg / Karoo) ── */
  --rose-earth:     #b85c42;           /* NEW: terracotta */
  --rose-hi:        #d4876b;
  --rose-glow:      0 0 20px rgba(184,92,66,.25);

  /* ── Sand (Warm Parchment) ── */
  --sand:           #c8b690;           /* NEW: Karoo sand */
  --sand-lo:        #9a8c70;

  /* ── Green System ── */
  --green-deep:     #020e08;
  --green-dark:     #0c2618;
  --green-mid:      #1B4332;
  --green-sage:     #3d7060;           /* NEW: sage variant */
  --green-bright:   #52B788;
  --green-mint:     #a8e6c5;           /* NEW: light mint */
  --green-glow:     0 0 20px rgba(82,183,136,.22);

  /* ── Backgrounds — Layered Void ── */
  --bg-void:        #020208;
  --bg-deep:        #040410;           /* NEW: richer depth */
  --bg-base:        #06060e;
  --bg-raised:      rgba(12,12,24,.96);/* NEW */
  --bg-card:        rgba(10,10,22,.93);
  --bg-card-hi:     rgba(16,16,32,.96);/* NEW: elevated card */
  --bg-glass:       rgba(255,255,255,.028);
  --bg-glass-warm:  rgba(212,175,55,.028); /* NEW */
  --bg-hover:       rgba(212,175,55,.055);
  --bg-surface:     rgba(7,7,18,.97);
  --bg-onyx:        rgba(4,4,12,.99);  /* NEW: near-black premium */

  /* ── Text ── */
  --text-ultra:     #ffffff;           /* NEW: pure for maximum contrast */
  --text-hi:        #f4f1eb;
  --text-warm:      #e8e0d0;           /* NEW: warmer primary text */
  --text-mid:       #b8bdc8;           /* REFINED: slightly cooler-brighter */
  --text-lo:        #5e6472;
  --text-ghost:     rgba(244,241,235,.35); /* NEW: subtle ghost text */
  --text-gold:      var(--gold);
  --text-sand:      var(--sand);

  /* ── Borders ── */
  --border:         rgba(240,235,220,.07);
  --border-warm:    rgba(240,235,220,.10);  /* NEW: warmer subtle border */
  --border-gold:    rgba(212,175,55,.16);
  --border-gold-hi: rgba(212,175,55,.40);
  --border-glass:   rgba(255,255,255,.06); /* NEW: glass edge */

  /* ── Typography ── */
  --font-display:   'Cormorant Garamond',Georgia,serif;
  --font-body:      'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-label:     'Space Grotesk','DM Sans',sans-serif; /* NEW: premium for eyebrows/labels */
  --font-mono:      'DM Mono','Fira Code',monospace;

  /* ── Spacing (8pt grid) ── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 48px;  --s10:64px;  --s11:80px;  --s12:96px;
  --s13:120px;                             /* NEW: hero spacing */

  /* ── Radius ── */
  --r-xs: 4px;  --r-sm: 7px;  --r-md: 12px; --r-lg: 18px;
  --r-xl: 26px; --r-2xl: 36px; --r-pill: 9999px;

  /* ── Shadows — Multi-layer ── */
  --sh-xs:  0 1px 4px rgba(0,0,0,.18);
  --sh-sm:  0 2px 8px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.14);
  --sh-md:  0 6px 20px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18);
  --sh-lg:  0 14px 44px rgba(0,0,0,.38),0 4px 16px rgba(0,0,0,.22);
  --sh-xl:  0 24px 72px rgba(0,0,0,.48),0 8px 24px rgba(0,0,0,.28);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.05); /* NEW: premium inset */
  --sh-gold-card: 0 8px 32px rgba(212,175,55,.08),0 2px 8px rgba(0,0,0,.3); /* NEW */

  /* ── Icon Sizes ── */
  --icon-xs: 14px;  --icon-sm: 16px;  --icon-md: 20px;
  --icon-lg: 24px;  --icon-xl: 32px;  --icon-2xl: 48px;

  /* ── Motion ── */
  --ease-out:      cubic-bezier(.23,1,.32,1);
  --ease-spring:   cubic-bezier(.175,.885,.32,1.275);
  --ease-smooth:   cubic-bezier(.4,0,.2,1);
  --ease-bounce:   cubic-bezier(.34,1.56,.64,1);  /* NEW: premium bounce */
  --ease-expo:     cubic-bezier(.87,0,.13,1);     /* NEW: dramatic ease */
  --fast: 140ms;  --normal: 280ms;  --slow: 480ms;  --xslow: 720ms;

  /* ── Nav ── */
  --nav-h: 72px;

  /* ── Gradients — Named ── */
  --grad-mzansi:    linear-gradient(135deg,#1B4332 0%,#2d6a4f 40%,#52B788 100%);
  --grad-ubuntu:    linear-gradient(135deg,#b85c42 0%,#d4af37 50%,#52B788 100%);
  --grad-earth:     linear-gradient(135deg,#5c3a00 0%,#b85c42 50%,#c9991a 100%);
}

/* ── Light Mode ── */
html.light-mode {
  --bg-void:     #fefdf8;
  --bg-deep:     #f8f6f0;
  --bg-base:     #f5f3ec;
  --bg-raised:   rgba(255,252,244,.98);
  --bg-card:     rgba(255,252,244,.97);
  --bg-card-hi:  rgba(255,255,248,.99);
  --bg-glass:    rgba(0,0,0,.018);
  --bg-glass-warm: rgba(212,175,55,.03);
  --bg-hover:    rgba(212,175,55,.055);
  --bg-surface:  rgba(255,253,246,.99);
  --bg-onyx:     rgba(255,252,244,.99);
  --text-ultra:  #0a0804;
  --text-hi:     #1a1610;
  --text-warm:   #2a2218;
  --text-mid:    #4a4840;
  --text-lo:     #8a857c;
  --text-ghost:  rgba(26,22,16,.35);
  --border:      rgba(20,15,5,.07);
  --border-warm: rgba(20,15,5,.10);
  --border-gold: rgba(212,175,55,.20);
  --border-glass:rgba(20,15,5,.05);
  --gold-glow:   0 0 20px rgba(212,175,55,.18),0 0 48px rgba(212,175,55,.08);
  --sh-inset:    inset 0 1px 0 rgba(255,255,255,.8);
}

/* ═══════════════════════════════════════════════════
   § 2  RESET & BASE
═══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body {
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.68;
  color:var(--text-hi);
  background:var(--bg-void);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

img,video,canvas { max-width:100%; display:block; }
svg { overflow:visible; }
button { cursor:pointer; font-family:inherit; }
a { color:var(--gold-hi); text-decoration:none; transition:color var(--fast) var(--ease-out); }
a:hover { color:var(--gold); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
::selection { background:rgba(212,175,55,.22); color:var(--text-hi); }

/* Premium Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,var(--gold-warm) 0%,var(--gold-lo) 100%);
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover { background:var(--gold-hi); }

/* ═══════════════════════════════════════════════════
   § 3  KEYFRAMES
═══════════════════════════════════════════════════ */
@keyframes goldFlow {
  0%   { background-position:0% 50%; }
  100% { background-position:400% 50%; }
}
@keyframes fadeIn     { from{opacity:0}           to{opacity:1} }
@keyframes slideUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown  { from{opacity:0;transform:translateY(-28px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideLeft  { from{opacity:0;transform:translateX(28px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
@keyframes scaleUp    { from{opacity:0;transform:scale(.8) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:.42} }
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes floatSlow  { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(1.5deg)} }
@keyframes glowPulse  {
  0%,100% { text-shadow:0 0 8px rgba(212,175,55,.35); }
  50%      { text-shadow:0 0 24px rgba(212,175,55,.85),0 0 48px rgba(212,175,55,.35); }
}
@keyframes glowPulseBorder {
  0%,100% { box-shadow:var(--sh-md),0 0 0 1px rgba(212,175,55,.15); }
  50%      { box-shadow:var(--sh-lg),0 0 0 2px rgba(212,175,55,.4),var(--gold-glow); }
}
@keyframes drawerIn   { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes loaderSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes counterUp  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes ripple     { from{transform:scale(0);opacity:.55} to{transform:scale(2.8);opacity:0} }
@keyframes shimmerSlide {
  0%   { transform:translateX(-100%) skewX(-15deg); }
  100% { transform:translateX(200%) skewX(-15deg); }
}
@keyframes borderRotate {
  from { --border-angle:0turn; }
  to   { --border-angle:1turn; }
}
@keyframes aurora1 {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(4%,2.5%) scale(1.04); }
  66%      { transform:translate(-2.5%,4%) scale(.97); }
}
@keyframes aurora2 {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(-3.5%,-2.5%) scale(1.07); }
  66%      { transform:translate(3.5%,-5%) scale(.96); }
}
@keyframes aurora3 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%      { transform:translate(2.5%,3.5%) scale(1.03); }
}
@keyframes enterpriseShimmer {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
@keyframes progressFill { from{stroke-dashoffset:100} to{stroke-dashoffset:var(--dash-end,0)} }
@keyframes dotBounce {
  0%,80%,100% { transform:scale(0) }
  40%         { transform:scale(1) }
}

/* ═══════════════════════════════════════════════════
   § 4  BACKGROUND SYSTEM
═══════════════════════════════════════════════════ */
#cu-particle-canvas {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6;
  contain:layout paint size;
}

.bg-aurora-gold {
  position:fixed; top:-25%; right:-15%; width:85vmax; height:85vmax;
  background:radial-gradient(ellipse,rgba(212,175,55,.10) 0%,rgba(200,116,26,.04) 35%,transparent 65%);
  z-index:0; pointer-events:none;
  animation:aurora1 20s ease-in-out infinite; will-change:transform;
  contain:layout paint size;
}
.bg-aurora-green {
  position:fixed; bottom:-18%; left:-12%; width:72vmax; height:72vmax;
  background:radial-gradient(ellipse,rgba(27,67,50,.22) 0%,rgba(82,183,136,.04) 40%,transparent 65%);
  z-index:0; pointer-events:none;
  animation:aurora2 24s ease-in-out infinite; will-change:transform;
  contain:layout paint size;
}
.bg-aurora-ember {
  position:fixed; top:38%; left:38%; width:62vmax; height:62vmax;
  background:radial-gradient(ellipse,rgba(184,92,42,.06) 0%,rgba(212,175,55,.02) 40%,transparent 65%);
  z-index:0; pointer-events:none;
  animation:aurora3 28s ease-in-out infinite; will-change:transform;
  contain:layout paint size;
}

/* Premium grid overlay — refined dot matrix */
.bg-grid-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(212,175,55,.06) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at 50% 50%,black 40%,transparent 80%);
}

/* Film grain texture */
.bg-noise-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:192px 192px;
}

/* Z-stack — content above all backgrounds */
.site-main,.supremium-header,.supremium-footer,.community-thread {
  position:relative; z-index:10;
}

/* ═══════════════════════════════════════════════════
   § 5  LOADER — Premium
═══════════════════════════════════════════════════ */
#supremium-loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg-void);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s5);
  transition:opacity var(--slow) var(--ease-smooth), visibility var(--slow);
}
body.loaded #supremium-loader { opacity:0; visibility:hidden; pointer-events:none; }

.loader-monogram {
  font-family:var(--font-display);
  font-size:clamp(1.75rem,5vw,2.75rem);
  font-weight:700;
  background:var(--gold-shimmer); background-size:400% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:goldFlow 2.8s linear infinite;
  letter-spacing:.18em;
}

/* Premium triple-ring loader */
.loader-ring {
  position:relative; width:52px; height:52px; margin-top:var(--s3);
}
.loader-ring::before,
.loader-ring::after,
.loader-ring span {
  content:''; position:absolute; border-radius:50%;
  border:1.5px solid transparent;
}
.loader-ring::before {
  inset:0; border-top-color:var(--gold);
  animation:loaderSpin .9s linear infinite;
}
.loader-ring::after {
  inset:7px; border-right-color:var(--gold-warm);
  animation:loaderSpin 1.3s linear infinite reverse;
}
.loader-ring span {
  display:block; inset:15px;
  border:1.5px solid transparent;
  border-bottom-color:var(--green-bright);
  animation:loaderSpin 1.8s linear infinite;
}

.loader-sub {
  font-family:var(--font-label);
  font-size:.7rem; color:var(--text-lo);
  letter-spacing:.22em; text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════
   § 6  DIGNITY STRIP (Community Thread)
═══════════════════════════════════════════════════ */
.community-thread {
  background:rgba(4,4,14,.92);
  border-bottom:1px solid var(--border-gold);
  backdrop-filter:blur(16px) saturate(160%);
  overflow:hidden;
}
.ct-inner {
  display:flex; align-items:center; gap:var(--s4);
  padding:0 var(--s6); height:38px;
  max-width:1400px; margin:0 auto;
  overflow-x:auto; scrollbar-width:none;
}
.ct-inner::-webkit-scrollbar { display:none; }
.ct-pulse {
  width:7px; height:7px; background:var(--green-bright); border-radius:50%; flex-shrink:0;
  animation:pulse 1.6s ease-in-out infinite;
  box-shadow:0 0 0 2px rgba(82,183,136,.2),0 0 8px rgba(82,183,136,.5);
}
.ct-node {
  display:flex; align-items:center; gap:var(--s2);
  font-family:var(--font-label); font-size:.72rem; font-weight:500; color:var(--text-mid);
  white-space:nowrap; padding:3px var(--s3); border-radius:var(--r-pill);
  transition:all var(--fast) var(--ease-out); text-decoration:none;
}
.ct-node:hover   { color:var(--gold-hi); background:rgba(212,175,55,.07); }
.ct-node.ct-active { color:var(--gold); }
.ct-sep { width:1px; height:14px; background:var(--border); flex-shrink:0; }
.ct-founder-note {
  margin-left:auto; font-size:.7rem; color:var(--text-lo);
  white-space:nowrap; letter-spacing:.04em;
  padding-left:var(--s6); border-left:1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   § 7  HEADER — Premium Glassmorphism
═══════════════════════════════════════════════════ */
.supremium-header {
  position:sticky; top:0; z-index:500; height:var(--nav-h);
  background:rgba(4,4,14,.82);
  backdrop-filter:blur(28px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(28px) saturate(200%) brightness(1.05);
  border-bottom:1px solid var(--border);
  transition:border-color var(--normal) var(--ease-smooth),
             box-shadow var(--normal) var(--ease-smooth),
             background var(--normal) var(--ease-smooth);
}
.supremium-header.scrolled {
  background:rgba(4,4,14,.92);
  border-bottom-color:var(--border-gold);
  box-shadow:var(--sh-md),0 1px 0 rgba(212,175,55,.08);
}
html.light-mode .supremium-header {
  background:rgba(255,252,244,.84);
}
html.light-mode .supremium-header.scrolled {
  background:rgba(255,252,244,.95);
}

.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 var(--s6);
  max-width:1400px; margin:0 auto; gap:var(--s7);
}

/* Logo */
.header-logo {
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  color:var(--text-hi); text-decoration:none; white-space:nowrap;
  transition:color var(--fast) var(--ease-out);
}
.header-logo:hover { color:var(--gold-hi); }

.logo-crown {
  flex-shrink:0; transition:transform var(--normal) var(--ease-bounce);
}
.header-logo:hover .logo-crown { transform:translateY(-2px) rotate(-6deg) scale(1.12); }

/* Desktop nav */
.header-nav ul { list-style:none; display:flex; gap:2px; }
.header-nav a {
  display:block; padding:var(--s2) var(--s4);
  font-size:.875rem; font-weight:500;
  color:var(--text-mid); border-radius:var(--r-sm);
  text-decoration:none; transition:all var(--fast) var(--ease-out);
  position:relative; letter-spacing:.005em;
}
.header-nav a::after {
  content:''; position:absolute;
  bottom:4px; left:var(--s4); right:var(--s4);
  height:1.5px; background:linear-gradient(90deg,var(--gold-warm),var(--gold-hi));
  border-radius:1px; transform:scaleX(0); transform-origin:left;
  transition:transform var(--normal) var(--ease-expo);
}
.header-nav a:hover { color:var(--text-hi); background:rgba(255,255,255,.038); }
.header-nav a:hover::after,
.header-nav a.active::after { transform:scaleX(1); }
.header-nav a.active { color:var(--gold-hi); }

/* Nav CTA pill */
.nav-cta {
  background:var(--gold-grad) !important; background-size:220% auto !important;
  color:#000 !important; border-radius:var(--r-md) !important;
  padding:7px var(--s5) !important; font-weight:700 !important; font-size:.875rem !important;
  box-shadow:var(--sh-sm),0 0 0 1px rgba(212,175,55,.15) !important;
  transition:background-position var(--normal) var(--ease-out),
             box-shadow var(--normal) var(--ease-out),
             transform var(--fast) var(--ease-out) !important;
}
.nav-cta:hover {
  background-position:right center !important;
  box-shadow:var(--sh-md),var(--gold-glow) !important;
  transform:translateY(-2px) !important;
}
.nav-cta::after { display:none !important; }

/* Header actions */
.header-actions { display:flex; align-items:center; gap:var(--s3); }

/* Theme toggle */
.header-theme-toggle {
  width:36px; height:36px; background:transparent;
  border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-mid);
  transition:all var(--fast) var(--ease-out);
}
.header-theme-toggle:hover { border-color:var(--border-gold); color:var(--gold); background:var(--bg-hover); }

/* User pill */
.nav-user-widget {
  display:flex; align-items:center; gap:var(--s3);
  padding:5px 14px 5px 5px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:.875rem; font-weight:500; color:var(--text-mid);
  text-decoration:none; transition:all var(--fast) var(--ease-out);
  background:var(--bg-glass);
}
.nav-user-widget:hover { border-color:var(--border-gold); color:var(--gold-hi); background:var(--bg-hover); }

.nav-avatar {
  width:28px; height:28px;
  background:var(--gold-grad); background-size:200% auto;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#000;
  flex-shrink:0;
}

/* Btn-header */
.btn-header {
  padding:7px var(--s5); background:var(--gold-grad); background-size:220% auto;
  color:#000; font-size:.875rem; font-weight:700; border-radius:var(--r-md);
  text-decoration:none; box-shadow:var(--sh-sm);
  transition:background-position var(--normal),box-shadow var(--normal),transform var(--fast);
}
.btn-header:hover { background-position:right center; box-shadow:var(--sh-md),var(--gold-glow); transform:translateY(-2px); }

/* Mobile hamburger */
.mobile-menu-btn {
  display:none; width:40px; height:40px; background:transparent;
  border:1px solid var(--border); border-radius:var(--r-sm);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0; transition:border-color var(--fast);
}
.mobile-menu-btn:hover { border-color:var(--border-gold); }
.mobile-menu-btn span {
  display:block; width:18px; height:1.5px; background:var(--text-mid); border-radius:1px;
  transition:all var(--normal) var(--ease-spring);
}
.drawer-open .mobile-menu-btn span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px); }
.drawer-open .mobile-menu-btn span:nth-child(2) { opacity:0; transform:scaleX(0); }
.drawer-open .mobile-menu-btn span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px); }

/* ═══════════════════════════════════════════════════
   § 8  MOBILE DRAWER
═══════════════════════════════════════════════════ */
.mobile-drawer-overlay {
  position:fixed; inset:0; z-index:490;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity var(--normal) var(--ease-smooth),visibility var(--normal);
}
.drawer-open .mobile-drawer-overlay { opacity:1; visibility:visible; }

.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:495;
  width:min(320px,92vw);
  background:var(--bg-surface);
  border-left:1px solid var(--border-gold);
  box-shadow:-8px 0 48px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform var(--normal) var(--ease-expo);
  overflow-y:auto; display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + var(--s6)) var(--s5) var(--s6);
  -webkit-overflow-scrolling:touch;
}
.drawer-open .mobile-drawer { transform:translateX(0); }

.drawer-close {
  position:absolute; top:var(--s5); right:var(--s5);
  width:36px; height:36px; background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; color:var(--text-mid);
  transition:all var(--fast);
}
.drawer-close:hover { border-color:var(--border-gold); color:var(--gold); background:var(--bg-hover); }

.drawer-label {
  font-family:var(--font-label); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-lo);
  padding-bottom:var(--s4); border-bottom:1px solid var(--border);
  margin-bottom:var(--s4); display:block;
}
.drawer-nav { list-style:none; display:flex; flex-direction:column; gap:2px; margin-bottom:auto; }
.drawer-nav a {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5);
  font-size:.9375rem; font-weight:500; color:var(--text-mid);
  border-radius:var(--r-md); text-decoration:none;
  border-left:2px solid transparent;
  transition:all var(--fast) var(--ease-out);
}
.drawer-nav a:hover {
  color:var(--gold-hi); background:rgba(212,175,55,.07);
  border-left-color:var(--gold); padding-left:calc(var(--s5) + 4px);
}
.drawer-actions {
  display:flex; flex-direction:column; gap:var(--s3);
  margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   § 9  TYPOGRAPHY SYSTEM
═══════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display); font-weight:700;
  line-height:1.12; letter-spacing:-.022em;
}

h1,.cu-h1 {
  font-size:clamp(2.25rem,7vw,5.25rem);
  background:var(--gold-shimmer); background-size:400% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:goldFlow 10s linear infinite; margin-bottom:var(--s7);
  text-shadow:none;
}
h2,.cu-h2 { font-size:clamp(1.75rem,4.5vw,3rem); color:var(--text-hi); margin-bottom:var(--s6); }
h3 { font-size:clamp(1.25rem,3vw,1.875rem); color:var(--text-hi); margin-bottom:var(--s4); }
h4 { font-size:1.125rem; color:var(--text-hi); margin-bottom:var(--s4); }
h5 { font-size:.9375rem; color:var(--text-mid); margin-bottom:var(--s3); }
h6 { font-size:.875rem; color:var(--text-lo); margin-bottom:var(--s3); font-family:var(--font-label); letter-spacing:.04em; }
p  { color:var(--text-mid); font-size:1rem; line-height:1.78; margin-bottom:var(--s5); }

/* Premium eyebrows — Space Grotesk */
.cu-eyebrow,.section-eyebrow,.module-label {
  display:inline-flex; align-items:center; gap:var(--s3);
  font-family:var(--font-label); font-size:.72rem; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:var(--gold);
  margin-bottom:var(--s5);
}
/* Eyebrow accent line */
.cu-eyebrow::before,.section-eyebrow::before {
  content:''; width:20px; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold));
  flex-shrink:0;
}

.cu-lead { font-size:clamp(1.0625rem,2.5vw,1.25rem); color:var(--text-mid); line-height:1.75; }
.cu-caption { font-size:.8125rem; color:var(--text-lo); line-height:1.6; }

/* Text gradient utility */
.text-gold-grad {
  background:var(--gold-shimmer); background-size:400% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:goldFlow 10s linear infinite;
}
.text-green-grad {
  background:linear-gradient(135deg,var(--green-bright),var(--green-mint));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Inline code */
code {
  font-family:var(--font-mono); font-size:.875em;
  background:rgba(212,175,55,.08); color:var(--gold-hi);
  padding:1px 6px; border-radius:4px;
  border:1px solid var(--border-gold);
}
pre { font-family:var(--font-mono); }

/* ═══════════════════════════════════════════════════
   § 10  BUTTONS — Premium System
═══════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  padding:13px 28px; font-family:var(--font-body); font-size:.9375rem; font-weight:700;
  border-radius:var(--r-md); border:none; cursor:pointer; text-decoration:none;
  white-space:nowrap; position:relative; overflow:hidden;
  transition:transform var(--fast) var(--ease-out),
             box-shadow var(--fast) var(--ease-out),
             background-position var(--normal) var(--ease-out);
  -webkit-tap-highlight-color:transparent; user-select:none;
  letter-spacing:.008em;
}

/* Ripple effect */
.btn::after {
  content:''; position:absolute; inset:50%;
  background:rgba(255,255,255,.22); border-radius:50%;
  transform:scale(0); opacity:0; transition:none;
}
.btn:active::after { animation:ripple var(--normal) var(--ease-out) forwards; }

/* Shimmer on hover */
.btn::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-15deg);
  transition:none; pointer-events:none;
}
.btn:hover::before { animation:shimmerSlide .55s var(--ease-out) forwards; }

/* Primary — Gold */
.btn-primary,.btn {
  background:var(--gold-grad); background-size:260% auto;
  color:#000; box-shadow:var(--sh-sm),var(--sh-inset);
}
.btn:hover {
  background-position:right center;
  transform:translateY(-3px);
  box-shadow:var(--sh-lg),var(--gold-glow);
  color:#000;
}
.btn:active { transform:translateY(-1px); }

/* Secondary — Gold outline */
.btn-secondary {
  background:transparent; border:1.5px solid var(--border-gold-hi);
  color:var(--gold-hi); padding:11px 26px;
}
.btn-secondary::before { background:linear-gradient(90deg,transparent,rgba(212,175,55,.08),transparent); }
.btn-secondary:hover {
  background:rgba(212,175,55,.08); border-color:var(--gold-hi);
  color:var(--gold-hi); box-shadow:var(--gold-glow);
}

/* Ghost */
.btn-ghost {
  background:rgba(255,255,255,.038); border:1px solid var(--border-warm); color:var(--text-mid);
}
.btn-ghost::before { background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); }
.btn-ghost:hover { border-color:var(--border-gold); color:var(--text-hi); background:rgba(255,255,255,.06); }

/* Green / Emerald variant */
.btn-emerald {
  background:linear-gradient(135deg,var(--green-mid) 0%,var(--green-sage) 50%,var(--green-bright) 100%);
  background-size:240% auto; color:#fff;
  box-shadow:var(--sh-sm),var(--green-glow);
}
.btn-emerald:hover {
  background-position:right center; color:#fff;
  box-shadow:var(--sh-lg),var(--green-glow);
}

/* Danger */
.btn-danger {
  background:linear-gradient(135deg,#8a1a0a,#c23a20,#e05030);
  background-size:240% auto; color:#fff;
}
.btn-danger:hover { background-position:right center; color:#fff; box-shadow:var(--sh-lg),0 0 20px rgba(194,58,32,.4); }

/* Sizes */
.btn-xs  { padding:7px 14px; font-size:.8rem; border-radius:var(--r-sm); }
.btn-sm  { padding:9px 18px; font-size:.8125rem; border-radius:var(--r-sm); }
.btn-lg  { padding:16px 36px; font-size:1.0625rem; }
.btn-xl  { padding:18px 44px; font-size:1.125rem; border-radius:var(--r-lg); }
.btn-full { width:100%; }
.btn-pill { border-radius:var(--r-pill) !important; }
.btn-square { padding:0; width:40px; height:40px; }

/* Icon in button */
.cu2-icon { display:inline-flex; align-items:center; }
.cu2-icon svg { width:var(--icon-sm); height:var(--icon-sm); }
.cu2-icon-md svg { width:var(--icon-md); height:var(--icon-md); }
.cu2-icon-lg svg { width:var(--icon-lg); height:var(--icon-lg); }
.cu2-icon-xl svg { width:var(--icon-xl); height:var(--icon-xl); }
.cu2-icon-2xl svg { width:var(--icon-2xl); height:var(--icon-2xl); }

/* Loading state */
.btn.loading { pointer-events:none; opacity:.7; }
.btn.loading::after { animation:none !important; }

/* ═══════════════════════════════════════════════════
   § 11  CARDS & SURFACES
═══════════════════════════════════════════════════ */

/* Base card */
.supremium-card,.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s7);
  backdrop-filter:blur(16px) saturate(140%);
  transition:border-color var(--normal) var(--ease-out),
             box-shadow var(--normal) var(--ease-out),
             transform var(--normal) var(--ease-out);
  position:relative; overflow:hidden;
  box-shadow:var(--sh-sm),var(--sh-inset);
}

/* Premium top edge accent */
.supremium-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gold-grad); background-size:300% auto; opacity:0;
  transition:opacity var(--normal);
}
/* Hover shimmer surface */
.supremium-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(212,175,55,.04) 0%,transparent 60%);
  opacity:0; transition:opacity var(--normal); pointer-events:none;
}
.supremium-card:hover {
  border-color:var(--border-gold);
  box-shadow:var(--sh-xl),var(--gold-glow),var(--sh-inset);
  transform:translateY(-6px);
}
.supremium-card:hover::before,.supremium-card:hover::after { opacity:1; }

/* Glass card variant */
.glass-card {
  background:var(--bg-glass-warm);
  border:1px solid var(--border-glass);
  border-radius:var(--r-lg); padding:var(--s7);
  backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--sh-md),var(--sh-inset);
}

/* Module cards */
.module-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s7); text-decoration:none; display:flex; flex-direction:column; gap:var(--s4);
  transition:all var(--normal) var(--ease-out); position:relative; overflow:hidden;
  box-shadow:var(--sh-sm),var(--sh-inset);
}
.module-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold-grad); background-size:300% auto;
  animation:goldFlow 6s linear infinite; opacity:0; transition:opacity var(--normal);
}
.module-card:hover {
  border-color:var(--border-gold-hi); box-shadow:var(--sh-xl),var(--gold-glow);
  transform:translateY(-8px); text-decoration:none;
}
.module-card:hover::before { opacity:1; }

.module-icon {
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--r-md);
  background:rgba(212,175,55,.08); border:1px solid var(--border-gold);
  color:var(--gold); transition:all var(--normal) var(--ease-spring);
  flex-shrink:0;
}
.module-icon svg { width:var(--icon-lg); height:var(--icon-lg); }
.module-card:hover .module-icon {
  background:rgba(212,175,55,.16); border-color:var(--border-gold-hi);
  transform:scale(1.1) rotate(-4deg); color:var(--gold-hi);
}

.module-num { font-family:var(--font-display); font-size:2.5rem; font-weight:700; color:var(--gold); opacity:.15; line-height:1; }
.module-title {
  font-family:var(--font-display); font-size:1.375rem; font-weight:700;
  background:var(--gold-shimmer); background-size:400% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:goldFlow 8s linear infinite; margin:0;
}
.module-desc { font-size:.9375rem; color:var(--text-mid); line-height:1.68; flex-grow:1; }
.module-cta {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font-label); font-size:.75rem; font-weight:600;
  color:var(--gold); text-transform:uppercase; letter-spacing:.08em;
  transition:gap var(--fast) var(--ease-out),color var(--fast);
}
.module-card:hover .module-cta { gap:var(--s4); color:var(--gold-hi); }

/* Feature card */
.feature-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s7); display:flex; flex-direction:column; gap:var(--s4);
  transition:all var(--normal) var(--ease-out);
  box-shadow:var(--sh-sm),var(--sh-inset);
}
.feature-card:hover { border-color:var(--border-gold); transform:translateY(-4px); box-shadow:var(--sh-lg),var(--gold-glow); }

.feature-icon {
  width:48px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,175,55,.07); border:1px solid var(--border-gold);
  color:var(--gold); flex-shrink:0; transition:all var(--normal) var(--ease-spring);
}
.feature-icon svg { width:var(--icon-md); height:var(--icon-md); }
.feature-card:hover .feature-icon { background:rgba(212,175,55,.15); transform:scale(1.08); }

.feature-tag {
  display:inline-block; padding:2px var(--s4);
  background:rgba(212,175,55,.08); border:1px solid var(--border-gold);
  border-radius:var(--r-pill); font-family:var(--font-label); font-size:.65rem;
  font-weight:600; color:var(--gold); letter-spacing:.1em; text-transform:uppercase;
}

/* Dashboard card */
.dashboard-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s6); transition:all var(--normal) var(--ease-out);
  box-shadow:var(--sh-sm),var(--sh-inset);
}
.dashboard-card:hover { border-color:var(--border-gold); box-shadow:var(--sh-md),var(--gold-glow); }

/* ═══════════════════════════════════════════════════
   § 12  FORMS — Premium
═══════════════════════════════════════════════════ */
.cu-field { margin-bottom:var(--s6); position:relative; }
.cu-label {
  display:block; font-size:.875rem; font-weight:600; color:var(--text-hi);
  margin-bottom:var(--s3); letter-spacing:.01em;
}
.cu-label .required { color:var(--rose-earth); margin-left:2px; }

.cu-input,.cu-select,.cu-textarea {
  width:100%; padding:13px 16px;
  font-family:var(--font-body); font-size:1rem; color:var(--text-hi);
  background:rgba(255,255,255,.028);
  border:1.5px solid var(--border-warm);
  border-radius:var(--r-md);
  transition:border-color var(--fast) var(--ease-out),
             box-shadow var(--fast) var(--ease-out),
             background var(--fast) var(--ease-out);
  -webkit-appearance:none; appearance:none;
}
.cu-input::placeholder { color:var(--text-lo); }
.cu-input:hover,.cu-select:hover,.cu-textarea:hover { border-color:var(--border-gold); }
.cu-input:focus,.cu-select:focus,.cu-textarea:focus {
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.10);
  background:rgba(212,175,55,.025);
}
.cu-textarea { resize:vertical; min-height:120px; line-height:1.65; }
.cu-select option { background:var(--bg-base); color:var(--text-hi); }

/* Validation states */
.cu-input.is-error,.cu-select.is-error { border-color:#e05030; }
.cu-input.is-success,.cu-select.is-success { border-color:var(--green-bright); }
.cu-field-error { font-size:.8rem; color:#e07050; margin-top:var(--s2); display:flex; align-items:center; gap:4px; }
.cu-field-hint  { font-size:.8rem; color:var(--text-lo); margin-top:var(--s2); }

/* Password wrapper */
.cu-password-wrap { position:relative; display:flex; align-items:center; }
.cu-password-wrap .cu-input { padding-right:48px; }
.cu-eye {
  position:absolute; right:12px; background:transparent; border:none;
  color:var(--text-lo); padding:4px; display:flex; align-items:center;
  transition:color var(--fast); border-radius:var(--r-xs);
}
.cu-eye:hover { color:var(--gold); }

/* Checkbox / Radio — premium */
.cu-check,.cu-radio {
  display:flex; align-items:flex-start; gap:var(--s3); cursor:pointer; user-select:none;
  padding:var(--s3) 0; font-size:.9375rem; color:var(--text-mid);
}
.cu-check input[type="checkbox"],
.cu-radio  input[type="radio"] {
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex-shrink:0; margin-top:2px;
  background:rgba(255,255,255,.04); border:1.5px solid var(--border-warm);
  border-radius:4px; cursor:pointer; position:relative;
  transition:all var(--fast) var(--ease-out);
}
.cu-radio input[type="radio"] { border-radius:50%; }
.cu-check input[type="checkbox"]:checked,
.cu-radio  input[type="radio"]:checked {
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(212,175,55,.2);
}
.cu-check input[type="checkbox"]:checked::after {
  content:''; position:absolute; left:5px; top:2px;
  width:5px; height:9px;
  border:2px solid #000; border-top:none; border-left:none;
  transform:rotate(45deg);
}

/* ═══════════════════════════════════════════════════
   § 13  HERO — Full Viewport
═══════════════════════════════════════════════════ */
.hero {
  min-height:calc(100vh - var(--nav-h) - 38px);
  display:grid; grid-template-columns:1fr 460px; gap:var(--s10);
  align-items:center; padding:var(--s10) var(--s6);
  max-width:1400px; margin:0 auto; position:relative;
}
.hero-content { animation:slideUp .75s var(--ease-out) .1s both; }

.hero-title {
  font-size:clamp(2.5rem,7vw,5.5rem); line-height:1.03; margin-bottom:var(--s6);
}
.hero-title em {
  font-style:italic;
  background:linear-gradient(135deg,var(--green-bright) 0%,var(--green-mint) 60%,var(--gold-pale) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-founder-strip {
  display:flex; gap:var(--s4); align-items:flex-start;
  padding:var(--s4) var(--s5);
  background:rgba(82,183,136,.05);
  border-left:2.5px solid var(--green-bright);
  border-radius:0 var(--r-md) var(--r-md) 0;
  margin:var(--s7) 0;
  animation:slideUp .85s var(--ease-out) .2s both;
}
.hero-founder-strip strong { color:var(--green-bright); }
.hero-founder-strip p { color:var(--text-mid); font-size:.9375rem; margin:0; line-height:1.6; }

.hero-ctas {
  display:flex; flex-wrap:wrap; gap:var(--s4); margin:var(--s7) 0;
  animation:slideUp .9s var(--ease-out) .3s both;
}
.hero-anchor-nav {
  display:flex; flex-wrap:wrap; gap:var(--s5); margin:var(--s5) 0;
  animation:slideUp .9s var(--ease-out) .35s both;
}
.hero-anchor-nav a {
  font-family:var(--font-label); font-size:.72rem; font-weight:600; color:var(--text-lo);
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:all var(--fast) var(--ease-out);
}
.hero-anchor-nav a:hover { color:var(--gold); border-bottom-color:var(--gold); }

/* Hero stats */
.hero-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  margin-top:var(--s8); animation:slideUp 1s var(--ease-out) .4s both;
}
.hero-stat {
  padding:var(--s5) var(--s4); background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--r-md);
  text-align:center; transition:all var(--normal) var(--ease-out);
  box-shadow:var(--sh-sm),var(--sh-inset); position:relative; overflow:hidden;
}
.hero-stat::after {
  content:''; position:absolute; bottom:0; left:25%; right:25%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0; transition:opacity var(--normal);
}
.hero-stat:hover { border-color:var(--border-gold); box-shadow:var(--sh-md),var(--gold-glow); transform:translateY(-3px); }
.hero-stat:hover::after { opacity:1; }
.hero-stat-num {
  display:block; font-family:var(--font-display);
  font-size:clamp(1.25rem,3vw,1.875rem); font-weight:700;
  color:var(--gold-hi); line-height:1.1; margin-bottom:4px;
}
.hero-stat-label {
  display:block; font-family:var(--font-label);
  font-size:.65rem; font-weight:600; color:var(--text-lo);
  text-transform:uppercase; letter-spacing:.1em;
}

/* Hero visual (right column terminal) */
.hero-visual {
  background:var(--bg-card); border:1px solid var(--border-gold);
  border-radius:var(--r-xl); padding:var(--s6);
  animation:slideLeft .8s var(--ease-out) .2s both;
  position:relative; overflow:hidden;
  box-shadow:var(--sh-xl),var(--sh-inset),0 0 0 1px rgba(212,175,55,.04);
}
.hero-visual::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold-grad); background-size:300% auto; animation:goldFlow 4s linear infinite;
}
/* Subtle inner glow top */
.hero-visual::after {
  content:''; position:absolute; top:0; left:0; right:0; height:120px;
  background:linear-gradient(180deg,rgba(212,175,55,.05) 0%,transparent 100%);
  pointer-events:none;
}
.hero-visual-header {
  display:flex; align-items:center; gap:var(--s3);
  margin-bottom:var(--s5); padding-bottom:var(--s4); border-bottom:1px solid var(--border);
}
.hv-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.hv-dot-1 { background:#ff5f56; box-shadow:0 0 6px rgba(255,95,86,.5); }
.hv-dot-2 { background:#ffbd2e; box-shadow:0 0 6px rgba(255,189,46,.4); }
.hv-dot-3 { background:#27c93f; animation:pulse 2s ease-in-out infinite; box-shadow:0 0 6px rgba(39,201,63,.5); }
.hv-title { flex:1; font-family:var(--font-mono); font-size:.72rem; color:var(--text-lo); text-align:center; letter-spacing:.06em; }
.hv-stat-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(212,175,55,.04);
  font-family:var(--font-mono); font-size:.8125rem;
}
.hv-stat-label { color:var(--text-lo); }
.hv-stat-value { font-weight:600; color:var(--text-hi); }
.hv-stat-value.green { color:var(--green-bright); }
.hv-activity {
  margin-top:var(--s5); font-family:var(--font-mono); font-size:.75rem; color:var(--text-mid);
  max-height:130px; overflow-y:auto; scrollbar-width:none; line-height:1.6;
}
.hv-activity::-webkit-scrollbar { display:none; }
.hv-activity div { padding:3px 0; }
.hv-activity .gold { color:var(--gold-hi); font-weight:600; }
.hv-activity .dim  { color:var(--text-lo); }
.hv-cursor { display:inline-block; width:1.5px; height:.9em; background:var(--gold); margin-left:2px; vertical-align:middle; animation:blink 1s step-end infinite; }

/* ═══════════════════════════════════════════════════
   § 14  SECTIONS
═══════════════════════════════════════════════════ */
.module,.section { padding:var(--s12) var(--s6); position:relative; }
.section-inner,.wrap-wide { max-width:1200px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:var(--s10); }
.section-divider {
  width:48px; height:2px; margin:var(--s6) auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  border-radius:1px;
}

/* ═══════════════════════════════════════════════════
   § 15  MODULES STRIP
═══════════════════════════════════════════════════ */
.modules-strip { padding:var(--s12) var(--s6); }
.modules-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s6); margin-top:var(--s8); }

/* ═══════════════════════════════════════════════════
   § 16  MANIFESTO
═══════════════════════════════════════════════════ */
.manifesto-section {
  padding:var(--s12) var(--s6); text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.04) 0%,transparent 60%),
             radial-gradient(ellipse at 50% 100%,rgba(27,67,50,.06) 0%,transparent 60%);
}
.manifesto-inner { max-width:960px; margin:0 auto; }
.manifesto-quote {
  font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.25rem);
  font-style:italic; font-weight:300; color:var(--text-hi); line-height:1.42; margin-bottom:var(--s5); quotes:none;
}
.manifesto-quote strong { color:var(--gold-hi); font-weight:700; font-style:normal; }
.manifesto-cite { font-family:var(--font-label); font-size:.75rem; color:var(--text-lo); letter-spacing:.12em; display:block; margin-bottom:var(--s10); text-transform:uppercase; }
.manifesto-pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s6); margin-top:var(--s8); }
.manifesto-pillar {
  padding:var(--s7); background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); text-align:left;
  transition:all var(--normal) var(--ease-out); position:relative; overflow:hidden;
  box-shadow:var(--sh-sm),var(--sh-inset);
}
.manifesto-pillar:hover { border-color:var(--border-gold); transform:translateY(-4px); box-shadow:var(--sh-lg),var(--gold-glow); }
.manifesto-pillar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--gold-grad); background-size:300% auto;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--normal) var(--ease-expo);
  animation:goldFlow 6s linear infinite;
}
.manifesto-pillar:hover::after { transform:scaleX(1); }
.manifesto-num {
  font-family:var(--font-display); font-size:2.25rem; font-weight:700;
  color:var(--gold); opacity:.18; line-height:1; margin-bottom:var(--s4);
}
.manifesto-icon {
  width:44px; height:44px; border-radius:var(--r-sm);
  background:rgba(212,175,55,.07); border:1px solid var(--border-gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); margin-bottom:var(--s4);
  transition:all var(--normal) var(--ease-spring);
}
.manifesto-pillar:hover .manifesto-icon { background:rgba(212,175,55,.14); transform:scale(1.06) rotate(-3deg); }

/* ═══════════════════════════════════════════════════
   § 17  IMPACT STRIP
═══════════════════════════════════════════════════ */
.impact-strip {
  padding:var(--s10) var(--s6);
  background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-dark) 50%,var(--green-mid) 100%);
  position:relative; overflow:hidden;
}
.impact-strip::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 15% 50%,rgba(255,255,255,.05) 0%,transparent 50%),
             radial-gradient(ellipse at 85% 50%,rgba(212,175,55,.04) 0%,transparent 50%),
             url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") center/60px;
  pointer-events:none;
}
.impact-inner {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s5);
  max-width:1200px; margin:0 auto; position:relative; z-index:2;
}
.impact-item {
  text-align:center; padding:var(--s6) var(--s5);
  background:rgba(255,255,255,.05); border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  transition:all var(--normal) var(--ease-out);
}
.impact-item:hover { background:rgba(255,255,255,.10); transform:translateY(-4px); border-color:rgba(255,255,255,.15); }
.impact-num {
  display:block; font-family:var(--font-display); font-size:clamp(1.75rem,4vw,2.25rem);
  font-weight:700; color:#fff; margin-bottom:var(--s2); animation:counterUp .6s var(--ease-out) both;
}
.impact-label { display:block; font-family:var(--font-label); font-size:.7rem; font-weight:600; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.12em; }

/* ═══════════════════════════════════════════════════
   § 18  TESTIMONIALS
═══════════════════════════════════════════════════ */
.testimonials-section { padding:var(--s12) var(--s6); }
.testimonials-inner { max-width:1200px; margin:0 auto; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--s6); margin-top:var(--s8); }

.testimonial {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s7); position:relative; overflow:hidden;
  transition:all var(--normal) var(--ease-out);
  box-shadow:var(--sh-sm),var(--sh-inset);
}
/* Premium large quote mark */
.testimonial::before {
  content:'"'; position:absolute; top:var(--s3); left:var(--s5);
  font-family:var(--font-display); font-size:5rem;
  background:var(--gold-shimmer); background-size:400% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:.10; line-height:1; pointer-events:none;
  animation:goldFlow 12s linear infinite;
}
.testimonial:hover { border-color:var(--border-gold); box-shadow:var(--sh-lg),var(--gold-glow); transform:translateY(-5px); }
.testimonial-text { font-size:.9375rem; line-height:1.78; color:var(--text-hi); margin-bottom:var(--s5); position:relative; z-index:1; }
.testimonial-cite { display:block; font-weight:700; color:var(--gold-hi); font-size:.9rem; font-style:normal; }
.testimonial-role { display:block; font-family:var(--font-label); font-size:.7rem; color:var(--text-lo); margin-top:var(--s1); letter-spacing:.06em; }

/* Stars in testimonial */
.testimonial-stars { display:flex; gap:3px; margin-bottom:var(--s4); color:var(--gold); }
.testimonial-stars svg { width:14px; height:14px; }

/* ═══════════════════════════════════════════════════
   § 19  FEATURE GRID
═══════════════════════════════════════════════════ */
.feature-grid { padding:var(--s12) var(--s6); }
.feature-grid-inner { max-width:1200px; margin:0 auto; }
.feature-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s6); margin-top:var(--s8); }

/* ═══════════════════════════════════════════════════
   § 20  CU BUDDY FLOAT WIDGET
═══════════════════════════════════════════════════ */
#cu-buddy-float {
  position:fixed; bottom:var(--s6); right:var(--s6); z-index:450;
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--s4);
}
.cu2-buddy-toggle {
  display:flex; align-items:center; gap:var(--s3);
  padding:12px 20px; background:var(--gold-grad); background-size:280% auto;
  border:none; border-radius:var(--r-pill); color:#000;
  font-family:var(--font-body); font-size:.875rem; font-weight:700; cursor:pointer;
  box-shadow:var(--sh-xl),var(--gold-glow-lg);
  transition:all var(--normal) var(--ease-spring);
  animation:float 4.5s ease-in-out infinite;
}
.cu2-buddy-toggle:hover { background-position:right center; transform:translateY(-4px) scale(1.04); box-shadow:var(--sh-xl),var(--gold-glow-lg); }
.cu2-buddy-toggle:active { transform:scale(.97); animation:none; }
[aria-expanded="true"].cu2-buddy-toggle { animation:none; }

.buddy-pulse-dot {
  width:9px; height:9px; background:var(--green-bright);
  border-radius:50%; border:2px solid #000; flex-shrink:0;
  animation:pulse 1.4s ease-in-out infinite;
  box-shadow:0 0 8px rgba(82,183,136,.8);
}
.buddy-toggle-chevron { transition:transform var(--normal) var(--ease-spring); display:flex; align-items:center; }
[aria-expanded="true"] .buddy-toggle-chevron { transform:rotate(180deg); }

/* Buddy panel */
.cu2-buddy-panel {
  width:min(380px,calc(100vw - var(--s9)));
  max-height:min(600px,80vh);
  background:var(--bg-surface); border:1px solid var(--border-gold);
  border-radius:var(--r-xl); box-shadow:var(--sh-xl),var(--gold-glow);
  display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right; transform:scale(.85) translateY(10px); opacity:0; pointer-events:none;
  transition:all var(--normal) var(--ease-bounce);
}
.cu2-buddy-panel.is-open { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

.buddy-panel-head {
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s5) var(--s6);
  background:linear-gradient(90deg,rgba(212,175,55,.06),rgba(82,183,136,.03));
  border-bottom:1px solid var(--border-gold); flex-shrink:0;
}
.buddy-orb {
  width:42px; height:42px; background:var(--gold-grad); background-size:300% auto;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; animation:goldFlow 4s linear infinite; flex-shrink:0;
  box-shadow:0 0 12px rgba(212,175,55,.35);
}
.buddy-name { font-weight:700; font-size:.875rem; color:var(--text-hi); letter-spacing:.03em; }
.buddy-online { font-family:var(--font-label); font-size:.65rem; color:var(--green-bright); margin-top:1px; letter-spacing:.06em; }
.buddy-mode-tag {
  margin-left:auto; font-family:var(--font-label); font-size:.6rem; font-weight:700;
  letter-spacing:.12em; color:var(--gold); border:1px solid var(--border-gold);
  border-radius:var(--r-pill); padding:2px 8px; white-space:nowrap;
}
.buddy-intro-msg { padding:var(--s6); font-size:.9375rem; color:var(--text-mid); border-bottom:1px solid var(--border); line-height:1.65; }
.buddy-chips { display:flex; flex-wrap:wrap; gap:var(--s2); padding:var(--s4) var(--s5); border-bottom:1px solid var(--border); }
.cu-chip {
  padding:5px 12px; background:rgba(212,175,55,.07); border:1px solid var(--border-gold);
  border-radius:var(--r-pill); font-family:var(--font-label); font-size:.7rem; font-weight:600;
  color:var(--gold); cursor:pointer; transition:all var(--fast) var(--ease-out); white-space:nowrap;
}
.cu-chip:hover { background:rgba(212,175,55,.18); color:var(--gold-hi); transform:translateY(-1px); }
.buddy-msgs { flex:1; overflow-y:auto; padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.buddy-msg { max-width:85%; padding:10px 14px; border-radius:var(--r-lg); font-size:.9rem; line-height:1.62; }
.buddy-msg-user { align-self:flex-end; background:var(--gold-grad); background-size:280% auto; color:#000; border-radius:var(--r-lg) var(--r-lg) 4px var(--r-lg); }
.buddy-msg-ai { align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--border-warm); color:var(--text-hi); border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px; }
.buddy-msg-thinking { opacity:.55; }
.buddy-msg-thinking::after { content:''; display:inline-block; width:4px; height:4px; background:currentColor; border-radius:50%; margin-left:6px; animation:pulse .9s ease-in-out infinite; }
.buddy-input-row { display:flex; gap:var(--s2); padding:var(--s4) var(--s5); border-top:1px solid var(--border); flex-shrink:0; }
.buddy-input {
  flex:1; padding:10px 14px; background:rgba(255,255,255,.03);
  border:1.5px solid var(--border-warm); border-radius:var(--r-md);
  color:var(--text-hi); font-family:var(--font-body); font-size:.875rem;
  transition:border-color var(--fast);
}
.buddy-input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,175,55,.08); }
.buddy-send {
  width:40px; height:40px; background:var(--gold-grad); background-size:280% auto;
  border:none; border-radius:var(--r-md); color:#000;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all var(--fast) var(--ease-out);
}
.buddy-send:hover { background-position:right center; transform:scale(1.06); box-shadow:var(--gold-glow); }
.buddy-foot { font-size:.65rem; color:var(--text-lo); text-align:center; padding:var(--s2) var(--s5) var(--s4); flex-shrink:0; }
.buddy-auth-wall {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s5); padding:var(--s7) var(--s6); text-align:center;
}
.buddy-auth-wall h3 { margin:0; color:var(--text-hi); }
.buddy-auth-wall p { color:var(--text-mid); font-size:.9rem; margin:0; line-height:1.6; }

/* ═══════════════════════════════════════════════════
   § 21  POPIA BANNER
═══════════════════════════════════════════════════ */
#cu2-popia {
  position:fixed; bottom:-100%; left:var(--s6); right:var(--s6); z-index:460;
  background:var(--bg-surface); border:1px solid var(--border-gold);
  border-radius:var(--r-lg); padding:var(--s6) var(--s7); box-shadow:var(--sh-xl),var(--gold-glow);
  display:flex; align-items:center; gap:var(--s6); flex-wrap:wrap;
  max-width:900px; margin:0 auto; transition:bottom var(--slow) var(--ease-bounce);
}
#cu2-popia.show { bottom:var(--s6); }
.popia-shield { display:flex; flex-direction:column; align-items:center; gap:var(--s2); font-family:var(--font-label); font-size:.65rem; font-weight:700; color:var(--gold); letter-spacing:.1em; flex-shrink:0; text-transform:uppercase; }
.popia-text { flex:1; font-size:.875rem; color:var(--text-mid); line-height:1.65; margin:0; }
.popia-text a { color:var(--gold); }
.popia-actions { display:flex; gap:var(--s3); flex-shrink:0; }

/* ═══════════════════════════════════════════════════
   § 22  FOOTER — Premium Layout
═══════════════════════════════════════════════════ */
.supremium-footer {
  background:var(--bg-base); border-top:1px solid var(--border);
  padding:var(--s12) var(--s6) var(--s7); position:relative; z-index:10; overflow:hidden;
}
/* Subtle footer glow */
.supremium-footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.25) 30%,rgba(212,175,55,.25) 70%,transparent);
  pointer-events:none;
}
.footer-grid { display:grid; grid-template-columns:340px 1fr; gap:var(--s10); max-width:1200px; margin:0 auto var(--s10); }
.footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s7); }
.footer-brand-title {
  font-family:var(--font-display); font-size:1.75rem; font-weight:700;
  background:var(--gold-shimmer); background-size:400% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:goldFlow 10s linear infinite; margin-bottom:var(--s5);
}
.footer-brand-bio { font-size:.875rem; line-height:1.75; color:var(--text-mid); }
.footer-wa {
  display:inline-flex; align-items:center; gap:var(--s3); margin-top:var(--s5);
  padding:10px 18px; background:rgba(82,183,136,.06);
  border:1px solid rgba(82,183,136,.35); border-radius:var(--r-md);
  color:var(--green-bright); font-size:.875rem; font-weight:600; text-decoration:none;
  transition:all var(--fast) var(--ease-out);
}
.footer-wa:hover { background:var(--green-bright); color:#000; box-shadow:var(--green-glow); transform:translateY(-2px); }
.footer-col h4 {
  font-family:var(--font-label); font-size:.7rem; font-weight:600; color:var(--text-lo);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s5);
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:var(--s3); }
.footer-links a {
  font-size:.875rem; color:var(--text-mid); transition:all var(--fast);
  text-decoration:none; display:flex; align-items:center; gap:var(--s2);
}
.footer-links a::before { content:''; width:0; height:1px; background:var(--gold); transition:width var(--fast) var(--ease-out); flex-shrink:0; }
.footer-links a:hover { color:var(--gold-hi); }
.footer-links a:hover::before { width:12px; }
.footer-bottom {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s5);
  padding-top:var(--s6); border-top:1px solid var(--border);
  font-size:.8125rem; color:var(--text-lo); max-width:1200px; margin:0 auto;
}
.footer-badges { display:flex; flex-wrap:wrap; gap:var(--s3); }
.footer-badge {
  padding:3px 10px; background:rgba(212,175,55,.06); border:1px solid var(--border-gold);
  border-radius:var(--r-pill); font-family:var(--font-label); font-size:.65rem; font-weight:600;
  color:var(--gold); letter-spacing:.08em; text-transform:uppercase;
  transition:all var(--fast);
}
.footer-badge:hover { background:rgba(212,175,55,.14); border-color:var(--border-gold-hi); }
.supremium-slogan {
  text-align:center; font-family:var(--font-display); font-size:1.25rem; font-style:italic;
  color:var(--gold-hi); margin-top:var(--s7); animation:glowPulse 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   § 23  SCROLL REVEAL
═══════════════════════════════════════════════════ */
.supremium-reveal,.cu-reveal { opacity:0; transform:translateY(24px); transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out); }
.supremium-reveal-active,.visible { opacity:1; transform:translateY(0); }
.cu-stagger > .supremium-reveal:nth-child(1) { transition-delay:0ms; }
.cu-stagger > .supremium-reveal:nth-child(2) { transition-delay:55ms; }
.cu-stagger > .supremium-reveal:nth-child(3) { transition-delay:110ms; }
.cu-stagger > .supremium-reveal:nth-child(4) { transition-delay:165ms; }
.cu-stagger > .supremium-reveal:nth-child(5) { transition-delay:220ms; }
.cu-stagger > .supremium-reveal:nth-child(n+6) { transition-delay:265ms; }

/* ═══════════════════════════════════════════════════
   § 24  AUTH PAGES
═══════════════════════════════════════════════════ */
.auth-layout { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.auth-left {
  background:linear-gradient(145deg,var(--green-deep) 0%,var(--green-dark) 40%,var(--green-mid) 100%);
  padding:var(--s10); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.auth-left::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 60%,rgba(212,175,55,.10) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 20%,rgba(82,183,136,.08) 0%,transparent 50%);
  pointer-events:none;
}
/* Dot pattern overlay */
.auth-left::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;
}
.auth-tagline { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem); font-weight:700; color:#fff; line-height:1.12; position:relative; z-index:1; margin-bottom:var(--s6); }
.auth-tagline em { color:var(--gold-hi); font-style:italic; }
.auth-right { padding:var(--s10); display:flex; flex-direction:column; justify-content:center; max-width:480px; margin:0 auto; width:100%; }
.auth-title { margin-bottom:var(--s3); }
.auth-subtitle { color:var(--text-mid); margin-bottom:var(--s8); }
.auth-msg { padding:var(--s4) var(--s5); border-radius:var(--r-md); font-size:.875rem; margin-bottom:var(--s5); display:none; }
.auth-msg.error   { background:rgba(224,80,48,.08); border:1px solid rgba(224,80,48,.25); color:#e07060; }
.auth-msg.success { background:rgba(82,183,136,.08); border:1px solid rgba(82,183,136,.25); color:var(--green-bright); }
.auth-msg.loading { background:rgba(212,175,55,.06); color:var(--gold); border:1px solid var(--border-gold); }
.auth-divider { display:flex; align-items:center; gap:var(--s4); color:var(--text-lo); font-size:.8125rem; margin:var(--s5) 0; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ═══════════════════════════════════════════════════
   § 25  DASHBOARD
═══════════════════════════════════════════════════ */
.dashboard-layout { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.dashboard-sidebar {
  background:var(--bg-base); border-right:1px solid var(--border);
  padding:var(--s7) var(--s5); position:sticky; top:var(--nav-h);
  height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.sidebar-nav { list-style:none; display:flex; flex-direction:column; gap:2px; }
.sidebar-nav a {
  display:flex; align-items:center; gap:var(--s4);
  padding:10px var(--s5); border-radius:var(--r-md);
  font-size:.875rem; font-weight:500; color:var(--text-mid);
  text-decoration:none; transition:all var(--fast) var(--ease-out);
  border-left:2px solid transparent;
}
.sidebar-nav a svg { width:var(--icon-sm); height:var(--icon-sm); flex-shrink:0; opacity:.7; transition:opacity var(--fast); }
.sidebar-nav a:hover { color:var(--gold-hi); background:rgba(212,175,55,.06); border-left-color:var(--gold); padding-left:calc(var(--s5) + 3px); }
.sidebar-nav a:hover svg { opacity:1; }
.sidebar-nav a.active { color:var(--gold-hi); background:rgba(212,175,55,.08); border-left-color:var(--gold); }
.sidebar-nav a.active svg { opacity:1; }
.sidebar-section-label {
  font-family:var(--font-label); font-size:.65rem; font-weight:600;
  color:var(--text-lo); letter-spacing:.14em; text-transform:uppercase;
  padding:var(--s5) var(--s5) var(--s2); display:block;
}

.dashboard-main { padding:var(--s8) var(--s7); }
.dashboard-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s8); flex-wrap:wrap; gap:var(--s4); }
.dashboard-welcome { font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.25rem); font-weight:700; color:var(--text-hi); }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s5); margin-bottom:var(--s8); }

.stat-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s6); text-align:center; transition:all var(--normal) var(--ease-out);
  box-shadow:var(--sh-sm),var(--sh-inset); position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gold-grad); background-size:300% auto; opacity:0; transition:opacity var(--normal);
}
.stat-card:hover { border-color:var(--border-gold); transform:translateY(-3px); box-shadow:var(--sh-md),var(--gold-glow); }
.stat-card:hover::after { opacity:1; }
.stat-number { font-family:var(--font-display); font-size:2.125rem; font-weight:700; color:var(--gold-hi); display:block; margin-bottom:var(--s2); }
.stat-label  { font-family:var(--font-label); font-size:.7rem; color:var(--text-lo); font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.stat-change {
  display:inline-flex; align-items:center; gap:3px; margin-top:var(--s3);
  font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:var(--r-pill);
}
.stat-change.up   { color:var(--green-bright); background:rgba(82,183,136,.1); }
.stat-change.down { color:#e07060; background:rgba(224,112,96,.08); }

/* ═══════════════════════════════════════════════════
   § 26  BADGES (Dignity Points)
═══════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:var(--s2); padding:3px 10px;
  border-radius:var(--r-pill); font-family:var(--font-label); font-size:.65rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.badge svg { width:10px; height:10px; flex-shrink:0; }
.badge-gold    { background:rgba(212,175,55,.12); color:var(--gold); border:1px solid var(--border-gold); }
.badge-green   { background:rgba(82,183,136,.12); color:var(--green-bright); border:1px solid rgba(82,183,136,.28); }
.badge-active  { background:rgba(82,183,136,.12); color:var(--green-bright); border:1px solid rgba(82,183,136,.28); }
.badge-pending { background:rgba(255,182,18,.08); color:#FFB612; border:1px solid rgba(255,182,18,.28); }
.badge-amber   { background:rgba(200,116,26,.10); color:var(--amber-hi); border:1px solid rgba(200,116,26,.28); }
.badge-earth   { background:rgba(184,92,66,.10); color:var(--rose-hi); border:1px solid rgba(184,92,66,.25); }
.badge-muted   { background:rgba(255,255,255,.05); color:var(--text-lo); border:1px solid var(--border); }
.badge-lg      { font-size:.72rem; padding:4px 12px; }

/* Dignity tier badges */
.dignity-seed      { background:rgba(82,183,136,.1); color:#6ecfaa; border:1px solid rgba(82,183,136,.22); }
.dignity-sprout    { background:rgba(212,175,55,.1); color:var(--gold); border:1px solid var(--border-gold); }
.dignity-roots     { background:rgba(200,116,26,.12); color:var(--amber-hi); border:1px solid rgba(200,116,26,.28); }
.dignity-ubuntu    { background:rgba(184,92,66,.12); color:var(--rose-hi); border:1px solid rgba(184,92,66,.28); }
.dignity-sovereign { background:linear-gradient(90deg,rgba(212,175,55,.15),rgba(200,116,26,.15)); color:var(--gold-hi); border:1px solid var(--border-gold-hi); }

/* ═══════════════════════════════════════════════════
   § 27  PAGE SECTIONS
═══════════════════════════════════════════════════ */
.cu-section { padding:var(--s12) var(--s6); }
.cu-wrap { max-width:1100px; margin:0 auto; }
.text-center { text-align:center; }
.module-body { font-size:1.0625rem; color:var(--text-mid); line-height:1.78; }
.module-inner { max-width:640px; margin:0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
.desktop-only { display:flex; }
.mobile-only  { display:none; }

/* ═══════════════════════════════════════════════════
   § 28  NEW — PREMIUM UTILITIES
═══════════════════════════════════════════════════ */

/* ── Gradient border utility ── */
.cu-border-gradient {
  border:1px solid transparent !important;
  background-clip:padding-box;
  position:relative;
}
.cu-border-gradient::after {
  content:''; position:absolute; inset:-1px;
  background:linear-gradient(135deg,var(--gold-lo),var(--gold),var(--gold-hi),var(--gold));
  border-radius:inherit; z-index:-1;
  animation:borderRotate 3s linear infinite;
}

/* ── Section ornament dividers ── */
.cu-ornament {
  display:flex; align-items:center; justify-content:center; gap:var(--s4);
  margin:var(--s10) auto; max-width:320px;
}
.cu-ornament::before,.cu-ornament::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--border-gold));
}
.cu-ornament::after { background:linear-gradient(90deg,var(--border-gold),transparent); }
.cu-ornament-icon { color:var(--gold); opacity:.7; flex-shrink:0; }
.cu-ornament-icon svg { width:18px; height:18px; }

/* ── Progress ring ── */
.cu-progress-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.cu-progress-ring svg { transform:rotate(-90deg); }
.cu-progress-ring .ring-bg { fill:none; stroke:var(--border); stroke-width:3; }
.cu-progress-ring .ring-fill { fill:none; stroke:url(#ringGrad); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .8s var(--ease-out); }
.cu-progress-ring .ring-label { position:absolute; font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--gold-hi); }

/* ── Avatar stack ── */
.cu-avatar-stack { display:flex; align-items:center; }
.cu-avatar-stack .cu-avatar { width:32px; height:32px; border-radius:50%; border:2px solid var(--bg-card); overflow:hidden; flex-shrink:0; margin-left:-10px; background:var(--gold-grad); background-size:200% auto; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#000; transition:transform var(--fast) var(--ease-out); }
.cu-avatar-stack .cu-avatar:first-child { margin-left:0; }
.cu-avatar-stack .cu-avatar:hover { transform:translateY(-3px) scale(1.08); z-index:2; }
.cu-avatar-stack .cu-avatar-count { background:var(--bg-card); border:2px solid var(--border); color:var(--text-lo); font-size:.65rem; font-weight:700; margin-left:-10px; }

/* ── Tooltip ── */
.cu-tooltip-wrap { position:relative; display:inline-flex; }
.cu-tooltip {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--bg-onyx); border:1px solid var(--border-warm);
  color:var(--text-hi); font-size:.75rem; font-weight:500; padding:5px 10px;
  border-radius:var(--r-sm); white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity var(--fast) var(--ease-out); z-index:100;
  box-shadow:var(--sh-md);
}
.cu-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--bg-onyx); }
.cu-tooltip-wrap:hover .cu-tooltip { opacity:1; }

/* ── Notification dot ── */
.cu-notif-dot { position:relative; display:inline-flex; }
.cu-notif-dot::after { content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px; background:var(--rose-earth); border-radius:50%; border:1.5px solid var(--bg-base); animation:pulse 2s ease-in-out infinite; }

/* ── Pricing cards ── */
.pricing-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--s8) var(--s7); display:flex; flex-direction:column; gap:var(--s5);
  position:relative; overflow:hidden; transition:all var(--normal) var(--ease-out);
  box-shadow:var(--sh-md),var(--sh-inset);
}
.pricing-card:hover { border-color:var(--border-gold); box-shadow:var(--sh-xl),var(--gold-glow); transform:translateY(-6px); }
.pricing-card.pricing-featured {
  border-color:var(--border-gold-hi);
  background:linear-gradient(145deg,var(--bg-card) 0%,rgba(212,175,55,.04) 100%);
  box-shadow:var(--sh-xl),var(--gold-glow);
}
.pricing-featured-badge {
  position:absolute; top:0; right:var(--s7);
  background:var(--gold-grad); background-size:200% auto;
  color:#000; font-family:var(--font-label); font-size:.62rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:4px 12px; border-radius:0 0 var(--r-sm) var(--r-sm);
}
.pricing-plan  { font-family:var(--font-label); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-lo); }
.pricing-price { font-family:var(--font-display); font-size:3rem; font-weight:700; color:var(--gold-hi); line-height:1; }
.pricing-price sup { font-size:1.5rem; vertical-align:super; }
.pricing-price sub { font-size:1rem; color:var(--text-lo); font-weight:400; }
.pricing-desc  { font-size:.9rem; color:var(--text-mid); line-height:1.65; }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:var(--s4); flex-grow:1; }
.pricing-features li { display:flex; align-items:flex-start; gap:var(--s3); font-size:.9rem; color:var(--text-mid); }
.pricing-features li .cu2-icon { color:var(--green-bright); flex-shrink:0; margin-top:2px; }
.pricing-features li .cu2-icon svg { width:15px; height:15px; }

/* ── Timeline component ── */
.cu-timeline { position:relative; padding-left:var(--s8); }
.cu-timeline::before {
  content:''; position:absolute; left:11px; top:0; bottom:0; width:1.5px;
  background:linear-gradient(180deg,var(--gold),var(--border-gold),transparent);
}
.cu-timeline-item { position:relative; padding-bottom:var(--s8); }
.cu-timeline-dot {
  position:absolute; left:calc(-1 * var(--s8) + 5px); top:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg-base); border:2.5px solid var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.15);
  transition:all var(--normal) var(--ease-spring);
}
.cu-timeline-item:hover .cu-timeline-dot { background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.25),var(--gold-glow); }
.cu-timeline-date { font-family:var(--font-label); font-size:.7rem; font-weight:600; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s2); }
.cu-timeline-title { font-family:var(--font-display); font-size:1.125rem; font-weight:700; color:var(--text-hi); margin-bottom:var(--s2); }
.cu-timeline-body  { font-size:.9rem; color:var(--text-mid); line-height:1.68; }

/* ── Step / wizard indicators ── */
.cu-steps { display:flex; align-items:center; gap:0; margin-bottom:var(--s8); }
.cu-step { display:flex; align-items:center; gap:var(--s3); flex:1; }
.cu-step-num {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-label); font-size:.8rem; font-weight:700;
  background:var(--bg-card); border:1.5px solid var(--border-warm); color:var(--text-lo);
  transition:all var(--normal) var(--ease-out);
}
.cu-step.active .cu-step-num { background:var(--gold-grad); background-size:200% auto; color:#000; border-color:var(--gold); box-shadow:var(--gold-glow); }
.cu-step.done   .cu-step-num { background:var(--green-mid); border-color:var(--green-bright); color:var(--green-bright); }
.cu-step-label  { font-size:.8125rem; font-weight:500; color:var(--text-lo); white-space:nowrap; }
.cu-step.active .cu-step-label { color:var(--gold-hi); font-weight:700; }
.cu-step.done   .cu-step-label { color:var(--green-bright); }
.cu-step-connector { flex:1; height:1.5px; background:var(--border); min-width:16px; margin:0 var(--s3); }
.cu-step.done + .cu-step .cu-step-connector { background:linear-gradient(90deg,var(--green-bright),var(--border)); }

/* ── Alert / notification cards ── */
.cu-alert {
  display:flex; align-items:flex-start; gap:var(--s4);
  padding:var(--s4) var(--s5); border-radius:var(--r-md);
  font-size:.9rem; line-height:1.6;
}
.cu-alert-icon { flex-shrink:0; margin-top:2px; }
.cu-alert-icon svg { width:18px; height:18px; }
.cu-alert-info    { background:rgba(82,183,136,.06); border:1px solid rgba(82,183,136,.22); color:var(--text-hi); }
.cu-alert-info    .cu-alert-icon { color:var(--green-bright); }
.cu-alert-warning { background:rgba(255,182,18,.06); border:1px solid rgba(255,182,18,.22); color:var(--text-hi); }
.cu-alert-warning .cu-alert-icon { color:#FFB612; }
.cu-alert-error   { background:rgba(220,80,48,.06); border:1px solid rgba(220,80,48,.20); color:var(--text-hi); }
.cu-alert-error   .cu-alert-icon { color:#e07060; }
.cu-alert-gold    { background:rgba(212,175,55,.06); border:1px solid var(--border-gold); color:var(--text-hi); }
.cu-alert-gold    .cu-alert-icon { color:var(--gold); }

/* ── Skeleton loaders — enterprise ── */
.enterprise-skeleton {
  position:relative; overflow:hidden;
  background:var(--bg-raised); border-radius:var(--r-md); min-height:24px;
}
.enterprise-skeleton::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.07) 20%,rgba(245,224,112,.13) 60%,transparent 100%);
  transform:translateX(-100%); animation:enterpriseShimmer 1.8s infinite ease-in-out;
}

/* ── Tag / chip list ── */
.cu-tags { display:flex; flex-wrap:wrap; gap:var(--s2); }
.cu-tag {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; background:rgba(255,255,255,.04);
  border:1px solid var(--border-warm); border-radius:var(--r-pill);
  font-size:.8rem; font-weight:500; color:var(--text-mid);
  transition:all var(--fast) var(--ease-out); cursor:default;
}
.cu-tag:hover { border-color:var(--border-gold); color:var(--gold-hi); background:var(--bg-hover); }
.cu-tag-gold { background:rgba(212,175,55,.08); border-color:var(--border-gold); color:var(--gold); }
.cu-tag-green { background:rgba(82,183,136,.08); border-color:rgba(82,183,136,.28); color:var(--green-bright); }

/* ── Loading dots ── */
.cu-loading-dots { display:inline-flex; gap:4px; align-items:center; }
.cu-loading-dots span {
  width:6px; height:6px; background:var(--gold); border-radius:50%;
  animation:dotBounce 1.4s ease-in-out infinite;
}
.cu-loading-dots span:nth-child(2) { animation-delay:.16s; }
.cu-loading-dots span:nth-child(3) { animation-delay:.32s; }

/* ── Divider ── */
.cu-divider {
  border:none; height:1px; margin:var(--s8) 0;
  background:linear-gradient(90deg,transparent,var(--border-warm),transparent);
}
.cu-divider-gold {
  background:linear-gradient(90deg,transparent,var(--border-gold),transparent);
}

/* ── Premium table ── */
.cu-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.cu-table th {
  font-family:var(--font-label); font-size:.7rem; font-weight:600;
  color:var(--text-lo); text-transform:uppercase; letter-spacing:.1em;
  padding:var(--s3) var(--s5); border-bottom:1px solid var(--border);
  text-align:left; white-space:nowrap;
}
.cu-table td {
  padding:var(--s4) var(--s5); border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--text-mid); transition:background var(--fast);
}
.cu-table tr:hover td { background:rgba(212,175,55,.03); color:var(--text-hi); }
.cu-table tr:last-child td { border-bottom:none; }

/* ── Magnetic button (enhanced) ── */
.btn-magnetic { transform-style:preserve-3d; }

/* ── Glassmorphism panel ── */
.cu-panel {
  background:var(--bg-glass-warm);
  border:1px solid var(--border-glass);
  border-radius:var(--r-xl); padding:var(--s8);
  backdrop-filter:blur(32px) saturate(200%);
  box-shadow:var(--sh-xl),var(--sh-inset),var(--gold-glow);
}

/* ── Gradient text utility classes ── */
.text-green   { color:var(--green-bright) !important; }
.text-gold    { color:var(--gold) !important; }
.text-gold-hi { color:var(--gold-hi) !important; }
.text-amber   { color:var(--amber-hi) !important; }
.text-earth   { color:var(--rose-hi) !important; }
.text-mid     { color:var(--text-mid) !important; }
.text-lo      { color:var(--text-lo) !important; }

/* ── Spacing utilities ── */
.mt-0 { margin-top:0 !important; } .mb-0 { margin-bottom:0 !important; }
.mt-4 { margin-top:var(--s4) !important; } .mb-4 { margin-bottom:var(--s4) !important; }
.mt-6 { margin-top:var(--s6) !important; } .mb-6 { margin-bottom:var(--s6) !important; }
.mt-8 { margin-top:var(--s8) !important; } .mb-8 { margin-bottom:var(--s8) !important; }
.gap-3 { gap:var(--s3) !important; } .gap-4 { gap:var(--s4) !important; }
.flex  { display:flex !important; } .flex-col { flex-direction:column !important; }
.items-center { align-items:center !important; }
.justify-between { justify-content:space-between !important; }
.w-full { width:100% !important; }

/* ═══════════════════════════════════════════════════
   § 29  MOBILE-FIRST BREAKPOINTS
═══════════════════════════════════════════════════ */

/* Tablet ≤1100px */
@media (max-width:1100px) {
  .hero { grid-template-columns:1fr; gap:var(--s8); }
  .hero-visual { order:-1; max-height:300px; overflow:hidden; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:repeat(3,1fr); }
  .auth-layout { grid-template-columns:1fr; }
  .auth-left { display:none; }
  .auth-right { max-width:100%; }
  .dashboard-layout { grid-template-columns:1fr; }
  .dashboard-sidebar { position:static; height:auto; }
  .cu-steps .cu-step-label { display:none; }
}

/* Mobile ≤768px */
@media (max-width:768px) {
  :root { --nav-h:62px; }
  .header-inner { padding:0 var(--s4); gap:var(--s4); }
  .header-nav,.desktop-only { display:none !important; }
  .mobile-menu-btn,.mobile-only { display:flex !important; }

  .hero { padding:var(--s8) var(--s4); min-height:auto; }
  .hero-title { font-size:clamp(1.875rem,8vw,2.75rem); }
  .hero-ctas { flex-direction:column; gap:var(--s3); }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .hero-stats { grid-template-columns:repeat(2,1fr); gap:var(--s3); }
  .hero-stat-num { font-size:1.375rem; }

  .modules-strip,.manifesto-section,.feature-grid,
  .testimonials-section,.module,.cu-section { padding:var(--s9) var(--s4); }

  .modules-grid,.feature-cards,.testimonials-grid,.manifesto-pillars { grid-template-columns:1fr; }
  .impact-inner { grid-template-columns:repeat(2,1fr); }

  .footer-cols { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .supremium-footer { padding:var(--s9) var(--s4) var(--s6); }

  #cu-buddy-float { right:var(--s4); bottom:var(--s4); }
  .cu2-buddy-panel { width:calc(100vw - var(--s5) * 2); max-height:80vh; }

  #cu2-popia { left:var(--s3); right:var(--s3); flex-direction:column; gap:var(--s4); }
  .popia-shield { flex-direction:row; }

  .dashboard-sidebar { padding:var(--s5); }
  .sidebar-nav { flex-direction:row; flex-wrap:wrap; }
  .sidebar-nav a { border-left:none; border-bottom:2px solid transparent; padding:var(--s3) var(--s4); font-size:.8125rem; }
  .sidebar-nav a:hover { padding-left:var(--s4); border-bottom-color:var(--gold); border-left:none; }
  .dashboard-main { padding:var(--s5) var(--s4); }

  .cu-panel { padding:var(--s6); }
  .pricing-card { padding:var(--s6) var(--s5); }
}

/* Small mobile ≤480px */
@media (max-width:480px) {
  html { font-size:15px; }
  .hero-stats { grid-template-columns:1fr 1fr; gap:var(--s2); }
  .impact-inner { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:1fr; }
  .ct-founder-note { display:none; }
  .hero-anchor-nav { display:none; }
  .sidebar-nav { overflow-x:auto; flex-wrap:nowrap; }
  .dashboard-grid { grid-template-columns:repeat(2,1fr); }
  .cu-steps { display:none; }
}

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

/* Print */
@media print {
  #cu-particle-canvas,.bg-aurora-gold,.bg-aurora-green,.bg-aurora-ember,
  .bg-grid-overlay,.bg-noise-overlay,#supremium-loader,
  .community-thread,.mobile-menu-btn,#cu-buddy-float,#cu2-popia { display:none !important; }
  body { background:#fff; color:#000; }
  a { text-decoration:underline; color:#000; }
  .supremium-card,.card,.module-card,.feature-card { box-shadow:none !important; border:1px solid #ddd !important; }
}

/* ═══════════════════════════════════════════════════
   § 30  ENTERPRISE PERFORMANCE & CONTAINMENT
═══════════════════════════════════════════════════ */
#cu-particle-canvas,.bg-aurora-gold,.bg-aurora-green,.bg-aurora-ember {
  contain:layout paint size;
  will-change:transform;
}

/* SVG gradient definitions (embedded once for ring components) */
.cu-svg-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }