/**
 * TT — Transform Tomorrow
 * Design Tokens v1.0 · May 2026
 * ─────────────────────────────────────────────────────────────────
 * Three verticals, one system:
 *   TTO · Turn Tomorrow On      → B2C    → --tt-tto: #FFB800
 *   TPB · Take Power Back       → B2B    → --tt-tpb: #00C2FF
 *   TTT · Transform Tomorrow Today → B2B2G → --tt-ttt: #00E5A0
 *
 * All global tokens use --tt- prefix.
 * Per-vertical accent is set via --tt-accent on the screen root.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   ROOT TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {

  /* ── VERTICAL COLORS ─────────────────────────────────────
     TTO · B2C  "Turn Tomorrow On"  warm solar amber / orange
     TPB · B2B  "Take Power Back"   electric blue
     TTT · B2B2G "Transform Tomorrow Today"  circuit green     */

  --tt-tto:     #7C3AED;
  --tt-tto-2:   #6D28D9;
  --tt-tto-dim: rgba(124,58,237,0.12);
  --tt-tto-glow: 0 0 24px rgba(124,58,237,0.35), 0 0 8px rgba(124,58,237,0.2);

  --tt-tpb:     #00C2FF;
  --tt-tpb-2:   #0066FF;
  --tt-tpb-dim: rgba(0,194,255,0.12);
  --tt-tpb-glow: 0 0 24px rgba(0,194,255,0.35), 0 0 8px rgba(0,194,255,0.2);

  --tt-ttt:     #00E5A0;
  --tt-ttt-2:   #00915C;
  --tt-ttt-dim: rgba(0,229,160,0.12);
  --tt-ttt-glow: 0 0 24px rgba(0,229,160,0.35), 0 0 8px rgba(0,229,160,0.2);

  /* ── GRADIENT ────────────────────────────────────────────
     Signature TT gradient used in logo, CTAs, borders       */
  --tt-grad: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #6D28D9 100%);
  --tt-grad-h: linear-gradient(90deg, #5B21B6 0%, #7C3AED 100%);
  --tt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(109,40,217,0.12));

  /* ── ACCENT (per-screen override) ───────────────────────
     Set --tt-accent on a wrapper to theme a whole section.
     Default: TTO amber (B2C public-facing)                  */
  --tt-accent:      var(--tt-tto);
  --tt-accent-2:    var(--tt-tto-2);
  --tt-accent-dim:  var(--tt-tto-dim);
  --tt-accent-glow: var(--tt-tto-glow);

  /* ── BACKGROUND PALETTE ─────────────────────────────────
     Ultra-dark blue-black, NOT pure black                   */
  --tt-bg:      #0A0A0F;
  --tt-bg-2:    #0D0F1A;
  --tt-bg-3:    #141622;
  --tt-bg-4:    #1A1D2E;
  --tt-bg-5:    #21253A;

  /* ── BORDER ─────────────────────────────────────────────  */
  --tt-border:        rgba(255,255,255,0.08);
  --tt-border-subtle: rgba(255,255,255,0.04);
  --tt-border-strong: rgba(255,255,255,0.16);

  /* ── TEXT ───────────────────────────────────────────────  */
  --tt-text:        #F0F2FF;
  --tt-text-2:      #94A3C4;
  --tt-text-3:      #5A6480;
  --tt-text-4:      #323750;

  /* ── STATUS ─────────────────────────────────────────────  */
  --tt-success:  #00E5A0;
  --tt-warning:  #FFB800;
  --tt-error:    #FF4D6D;
  --tt-info:     #00C2FF;

  /* ── TYPOGRAPHY ─────────────────────────────────────────  */
  --tt-font-display: 'Space Grotesk', system-ui, sans-serif;
  --tt-font-body:    'DM Sans', system-ui, sans-serif;
  --tt-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --tt-text-xs:    0.6875rem;  /* 11px */
  --tt-text-sm:    0.8125rem;  /* 13px */
  --tt-text-base:  0.9375rem;  /* 15px */
  --tt-text-md:    1.0625rem;  /* 17px */
  --tt-text-lg:    1.25rem;    /* 20px */
  --tt-text-xl:    1.5rem;     /* 24px */
  --tt-text-2xl:   1.875rem;   /* 30px */
  --tt-text-3xl:   2.25rem;    /* 36px */
  --tt-text-4xl:   2.875rem;   /* 46px */
  --tt-text-5xl:   3.5rem;     /* 56px */
  --tt-text-display: clamp(2.75rem, 5.5vw, 4.5rem);

  --tt-weight-regular:  400;
  --tt-weight-medium:   500;
  --tt-weight-semibold: 600;
  --tt-weight-bold:     700;

  --tt-leading-tight:   1.08;
  --tt-leading-snug:    1.25;
  --tt-leading-normal:  1.5;
  --tt-leading-relaxed: 1.65;

  --tt-tracking-tight:  -0.035em;
  --tt-tracking-snug:   -0.02em;
  --tt-tracking-normal:  0;
  --tt-tracking-wide:    0.05em;
  --tt-tracking-caps:    0.1em;

  /* ── SPACING ────────────────────────────────────────────  */
  --tt-1:  0.25rem;
  --tt-2:  0.5rem;
  --tt-3:  0.75rem;
  --tt-4:  1rem;
  --tt-5:  1.25rem;
  --tt-6:  1.5rem;
  --tt-8:  2rem;
  --tt-10: 2.5rem;
  --tt-12: 3rem;
  --tt-16: 4rem;
  --tt-20: 5rem;
  --tt-24: 6rem;

  /* ── RADIUS ─────────────────────────────────────────────  */
  --tt-r-sm:   0px;
  --tt-r-md:   0px;
  --tt-r-lg:   0px;
  --tt-r-xl:   0px;
  --tt-r-2xl:  0px;
  --tt-r-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────  */
  --tt-shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.25);
  --tt-shadow-md:  0 4px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --tt-shadow-lg:  0 12px 48px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.35);
  --tt-shadow-xl:  0 24px 72px rgba(0,0,0,0.7), 0 8px 28px rgba(0,0,0,0.4);

  /* ── TRANSITIONS ─────────────────────────────────────────  */
  --tt-ease-fast:   cubic-bezier(0.2, 0.7, 0.3, 1);
  --tt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tt-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --tt-dur-fast:   150ms;
  --tt-dur-base:   250ms;
  --tt-dur-slow:   400ms;

  /* ── LAYOUT ──────────────────────────────────────────────  */
  --tt-w-sm:   640px;
  --tt-w-md:   768px;
  --tt-w-lg:   1024px;
  --tt-w-xl:   1280px;
  --tt-w-2xl:  1440px;

  /* ── Z-INDEX ─────────────────────────────────────────────  */
  --tt-z-base:    0;
  --tt-z-raised:  10;
  --tt-z-nav:     50;
  --tt-z-overlay: 100;
  --tt-z-modal:   200;
  --tt-z-toast:   300;

  /* ── BACKWARD COMPAT: --sm- aliases ─────────────────────
     So partner.html and existing pages continue to work     */
  --sm-font-display:    var(--tt-font-display);
  --sm-font-body:       var(--tt-font-body);
  --sm-bg:              var(--tt-bg);
  --sm-bg-section:      var(--tt-bg-2);
  --sm-bg-card:         var(--tt-bg-3);
  --sm-bg-elevated:     var(--tt-bg-4);
  --sm-border:          var(--tt-border);
  --sm-border-subtle:   var(--tt-border-subtle);
  --sm-text-primary:    var(--tt-text);
  --sm-text-secondary:  var(--tt-text-2);
  --sm-text-muted:      var(--tt-text-3);
  --sm-text-faint:      var(--tt-text-4);
  --sm-amber-500:       var(--tt-tto);
  --sm-amber-600:       var(--tt-tto-2);
  --sm-amber-300:       #A78BFA;
  --sm-amber-400:       var(--tt-tto);
  --sm-ai-400:          var(--tt-tpb);
  --sm-ai-500:          var(--tt-tpb);
  --sm-eco-400:         var(--tt-ttt);
  --sm-eco-500:         var(--tt-ttt);
  --sm-eco-600:         var(--tt-ttt-2);
  --sm-navy-950:        var(--tt-bg);
  --sm-navy-900:        var(--tt-bg-2);
  --sm-navy-800:        var(--tt-bg-3);
  --sm-navy-700:        var(--tt-bg-4);
  --sm-navy-600:        var(--tt-border);
  --sm-navy-500:        var(--tt-border-subtle);
  --sm-navy-200:        var(--tt-text-2);
  --sm-navy-100:        var(--tt-text);
  --sm-primary:         var(--tt-tto);
  --sm-primary-hover:   var(--tt-tto-2);
  --sm-space-1:  var(--tt-1);
  --sm-space-2:  var(--tt-2);
  --sm-space-3:  var(--tt-3);
  --sm-space-4:  var(--tt-4);
  --sm-space-5:  var(--tt-5);
  --sm-space-6:  var(--tt-6);
  --sm-space-8:  var(--tt-8);
  --sm-space-10: var(--tt-10);
  --sm-space-12: var(--tt-12);
  --sm-space-16: var(--tt-16);
  --sm-space-20: var(--tt-20);
  --sm-space-24: var(--tt-24);
  --sm-radius-sm:   var(--tt-r-sm);
  --sm-radius-md:   var(--tt-r-md);
  --sm-radius-lg:   var(--tt-r-lg);
  --sm-radius-xl:   var(--tt-r-xl);
  --sm-radius-2xl:  var(--tt-r-2xl);
  --sm-radius-full: var(--tt-r-full);
  --sm-shadow-sm:   var(--tt-shadow-sm);
  --sm-shadow-md:   var(--tt-shadow-md);
  --sm-shadow-lg:   var(--tt-shadow-lg);
  --sm-shadow-xl:   var(--tt-shadow-xl);
  --sm-shadow-glow-amber: var(--tt-tto-glow);
  --sm-shadow-glow-blue:  var(--tt-tpb-glow);
  --sm-shadow-glow-green: var(--tt-ttt-glow);
  --sm-ease-fast:   var(--tt-ease-fast);
  --sm-ease-spring: var(--tt-ease-spring);
  --sm-ease-smooth: var(--tt-ease-smooth);
  --sm-duration-fast:  var(--tt-dur-fast);
  --sm-duration-base:  var(--tt-dur-base);
  --sm-duration-slow:  var(--tt-dur-slow);
  --sm-text-xs:    var(--tt-text-xs);
  --sm-text-sm:    var(--tt-text-sm);
  --sm-text-base:  var(--tt-text-base);
  --sm-text-md:    var(--tt-text-md);
  --sm-text-lg:    var(--tt-text-lg);
  --sm-text-xl:    var(--tt-text-xl);
  --sm-text-2xl:   var(--tt-text-2xl);
  --sm-text-3xl:   var(--tt-text-3xl);
  --sm-text-4xl:   var(--tt-text-4xl);
  --sm-text-5xl:   var(--tt-text-5xl);
  --sm-text-display: var(--tt-text-display);
  --sm-weight-regular:   var(--tt-weight-regular);
  --sm-weight-medium:    var(--tt-weight-medium);
  --sm-weight-semibold:  var(--tt-weight-semibold);
  --sm-weight-bold:      var(--tt-weight-bold);
  --sm-weight-extrabold: var(--tt-weight-bold);
  --sm-leading-tight:    var(--tt-leading-tight);
  --sm-leading-snug:     var(--tt-leading-snug);
  --sm-leading-normal:   var(--tt-leading-normal);
  --sm-leading-relaxed:  var(--tt-leading-relaxed);
  --sm-tracking-tight:   var(--tt-tracking-tight);
  --sm-tracking-snug:    var(--tt-tracking-snug);
  --sm-tracking-normal:  var(--tt-tracking-normal);
  --sm-tracking-wide:    var(--tt-tracking-wide);
  --sm-tracking-wider:   var(--tt-tracking-caps);
  --sm-tracking-widest:  var(--tt-tracking-caps);
  --sm-z-nav:     var(--tt-z-nav);
  --sm-z-overlay: var(--tt-z-overlay);
  --sm-z-modal:   var(--tt-z-modal);
  --sm-z-toast:   var(--tt-z-toast);
  --sm-container-xl: var(--tt-w-xl);
  --sm-container-lg: var(--tt-w-lg);
  --sm-err-400:    var(--tt-error);
  --sm-err-500:    var(--tt-error);
}

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

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

body {
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-base);
  font-weight: var(--tt-weight-regular);
  line-height: var(--tt-leading-normal);
  color: var(--tt-text);
  background-color: var(--tt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--tt-font-body); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--tt-font-body); font-size: inherit; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--tt-bg); }
::-webkit-scrollbar-thumb { background: var(--tt-border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--tt-accent); }

/* ═══════════════════════════════════════════════════════════
   TT LOGO MARK — Transmission Tower SVG utility
   ═══════════════════════════════════════════════════════════ */
.tt-logo-mark { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════ */
.tt-display {
  font-family: var(--tt-font-display);
  font-size: var(--tt-text-display);
  font-weight: var(--tt-weight-bold);
  line-height: var(--tt-leading-tight);
  letter-spacing: var(--tt-tracking-tight);
}

.tt-h1 {
  font-family: var(--tt-font-display);
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: var(--tt-weight-bold);
  line-height: var(--tt-leading-snug);
  letter-spacing: var(--tt-tracking-tight);
}

.tt-h2 {
  font-family: var(--tt-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--tt-weight-bold);
  letter-spacing: var(--tt-tracking-snug);
}

.tt-h3 {
  font-family: var(--tt-font-display);
  font-size: var(--tt-text-xl);
  font-weight: var(--tt-weight-semibold);
}

.tt-mono {
  font-family: var(--tt-font-mono);
  font-size: var(--tt-text-sm);
}

/* Gradient text — spans all 3 vertical colors */
.tt-grad-text {
  background: var(--tt-grad-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accent text uses current vertical color */
.tt-accent-text { color: var(--tt-accent); }

/* ═══════════════════════════════════════════════════════════
   COMPONENT PRIMITIVES
   ═══════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-semibold);
  border-radius: var(--tt-r-lg);
  border: none;
  outline: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--tt-dur-fast) var(--tt-ease-smooth);
}

.tt-btn:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}

/* Primary — filled with current accent */
.tt-btn-primary {
  background: var(--tt-accent);
  color: #07080F;
}
.tt-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--tt-accent-glow);
}
.tt-btn-primary:active { transform: none; filter: brightness(0.95); }

/* Gradient — signature TT gradient */
.tt-btn-grad {
  background: var(--tt-grad-h);
  color: #07080F;
  font-weight: var(--tt-weight-bold);
}
.tt-btn-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139,92,246,0.4);
  filter: brightness(1.05);
}

/* Outline — accent border */
.tt-btn-outline {
  background: transparent;
  color: var(--tt-accent);
  border: 1.5px solid var(--tt-accent);
}
.tt-btn-outline:hover {
  background: var(--tt-accent-dim);
  transform: translateY(-1px);
}

/* Ghost — subtle */
.tt-btn-ghost {
  background: transparent;
  color: var(--tt-text-2);
  border: 1px solid var(--tt-border);
}
.tt-btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--tt-text);
  border-color: var(--tt-border-strong);
}

/* Sizes */
.tt-btn-sm  { padding: 0.375rem 0.875rem; font-size: var(--tt-text-xs); border-radius: var(--tt-r-md); }
.tt-btn-lg  { padding: 0.875rem 1.875rem; font-size: var(--tt-text-base); border-radius: var(--tt-r-xl); }
.tt-btn-xl  { padding: 1rem 2.25rem; font-size: var(--tt-text-md); border-radius: var(--tt-r-xl); letter-spacing: -0.01em; }
.tt-btn-icon{ width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--tt-r-md); flex-shrink: 0; }

/* ── Cards ───────────────────────────────────────────────── */
.tt-card {
  background: var(--tt-bg-3);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-xl);
  padding: var(--tt-6);
}

.tt-card-2 {
  background: var(--tt-bg-2);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-xl);
}

.tt-card-hover {
  transition: all var(--tt-dur-base) var(--tt-ease-smooth);
}
.tt-card-hover:hover {
  border-color: color-mix(in srgb, var(--tt-accent) 40%, transparent);
  box-shadow: var(--tt-accent-glow);
  transform: translateY(-2px);
}

/* Glass card */
.tt-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-xl);
}

/* ── Badges ──────────────────────────────────────────────── */
.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-1);
  padding: 0.25rem 0.75rem;
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  border-radius: var(--tt-r-full);
  letter-spacing: var(--tt-tracking-wide);
}

.tt-badge-tto {
  color: var(--tt-tto);
  background: rgba(255,184,0,0.1);
  border: 1px solid rgba(255,184,0,0.25);
}
.tt-badge-tpb {
  color: var(--tt-tpb);
  background: rgba(0,194,255,0.1);
  border: 1px solid rgba(0,194,255,0.25);
}
.tt-badge-ttt {
  color: var(--tt-ttt);
  background: rgba(0,229,160,0.1);
  border: 1px solid rgba(0,229,160,0.25);
}
.tt-badge-muted {
  color: var(--tt-text-2);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--tt-border);
}

/* ── Inputs ──────────────────────────────────────────────── */
.tt-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--tt-text-sm);
  font-family: var(--tt-font-body);
  color: var(--tt-text);
  background: var(--tt-bg-3);
  border: 1.5px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  outline: none;
  transition: border-color var(--tt-dur-fast), box-shadow var(--tt-dur-fast);
}
.tt-input::placeholder { color: var(--tt-text-3); }
.tt-input:focus {
  border-color: var(--tt-accent);
  box-shadow: 0 0 0 3px var(--tt-accent-dim);
}

/* ── Divider ─────────────────────────────────────────────── */
.tt-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tt-border-strong), transparent);
}

/* ── Container ───────────────────────────────────────────── */
.tt-container {
  width: 100%;
  max-width: var(--tt-w-xl);
  margin: 0 auto;
  padding: 0 var(--tt-6);
}

@media (max-width: 640px) {
  .tt-container { padding: 0 var(--tt-4); }
}

/* ── Status indicator ────────────────────────────────────── */
.tt-dot-live {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tt-ttt);
  box-shadow: 0 0 8px var(--tt-ttt);
  animation: tt-pulse 2s ease-in-out infinite;
}

@keyframes tt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ── Gradient border ring ────────────────────────────────── */
.tt-ring {
  position: relative;
}
.tt-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--tt-grad);
  opacity: 0.5;
  z-index: -1;
  border-radius: calc(var(--tt-r-xl) + 1px);
}

/* ── Section tag / eyebrow ───────────────────────────────── */
.tt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-2);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  letter-spacing: var(--tt-tracking-caps);
  text-transform: uppercase;
  color: var(--tt-accent);
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes tt-fade-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tt-slide-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tt-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes tt-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes tt-spin {
  to { transform: rotate(360deg); }
}

@keyframes tt-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes tt-grid-move {
  0%   { transform: translateY(0); }
  100% { transform: translateY(40px); }
}

.tt-animate-in          { animation: tt-fade-in var(--tt-dur-slow) var(--tt-ease-fast) both; }
.tt-animate-in-d1       { animation-delay: 100ms; }
.tt-animate-in-d2       { animation-delay: 200ms; }
.tt-animate-in-d3       { animation-delay: 300ms; }
.tt-animate-in-d4       { animation-delay: 400ms; }
.tt-animate-in-d5       { animation-delay: 500ms; }

.tt-skeleton {
  background: linear-gradient(90deg,
    var(--tt-bg-3) 25%,
    var(--tt-bg-4) 50%,
    var(--tt-bg-3) 75%
  );
  background-size: 200% 100%;
  animation: tt-shimmer 1.5s infinite;
  border-radius: var(--tt-r-md);
}

/* ── Reveal on scroll ────────────────────────────────────── */
.tt-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--tt-ease-smooth), transform 0.55s var(--tt-ease-smooth);
}
.tt-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */
.tt-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.tt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Text */
.tt-text         { color: var(--tt-text); }
.tt-text-2       { color: var(--tt-text-2); }
.tt-text-3       { color: var(--tt-text-3); }
.tt-text-tto     { color: var(--tt-tto); }
.tt-text-tpb     { color: var(--tt-tpb); }
.tt-text-ttt     { color: var(--tt-ttt); }
.tt-text-success { color: var(--tt-success); }
.tt-text-error   { color: var(--tt-error); }

/* Backgrounds */
.tt-bg     { background: var(--tt-bg); }
.tt-bg-2   { background: var(--tt-bg-2); }
.tt-bg-3   { background: var(--tt-bg-3); }

/* Flex helpers */
.tt-flex    { display: flex; }
.tt-flex-col{ display: flex; flex-direction: column; }
.tt-items-c { align-items: center; }
.tt-items-s { align-items: flex-start; }
.tt-just-b  { justify-content: space-between; }
.tt-just-c  { justify-content: center; }
.tt-gap-2   { gap: var(--tt-2); }
.tt-gap-3   { gap: var(--tt-3); }
.tt-gap-4   { gap: var(--tt-4); }
.tt-gap-6   { gap: var(--tt-6); }
.tt-gap-8   { gap: var(--tt-8); }
.tt-w-full  { width: 100%; }
.tt-h-full  { height: 100%; }

/* Grid */
.tt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tt-6); }
.tt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tt-6); }
.tt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tt-6); }

/* Responsive */
@media (max-width: 768px) {
  .tt-hide-mobile { display: none !important; }
  .tt-grid-2, .tt-grid-3, .tt-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .tt-hide-desktop { display: none !important; }
}

/* ── Per-vertical accent overrides ──────────────────────── */
.tt-screen-tto {
  --tt-accent:      var(--tt-tto);
  --tt-accent-2:    var(--tt-tto-2);
  --tt-accent-dim:  var(--tt-tto-dim);
  --tt-accent-glow: var(--tt-tto-glow);
  /* legacy sm aliases */
  --sm-amber-500:   var(--tt-tto);
  --sm-amber-600:   var(--tt-tto-2);
  --sm-primary:     var(--tt-tto);
}

.tt-screen-tpb {
  --tt-accent:      var(--tt-tpb);
  --tt-accent-2:    var(--tt-tpb-2);
  --tt-accent-dim:  var(--tt-tpb-dim);
  --tt-accent-glow: var(--tt-tpb-glow);
}

.tt-screen-ttt {
  --tt-accent:      var(--tt-ttt);
  --tt-accent-2:    var(--tt-ttt-2);
  --tt-accent-dim:  var(--tt-ttt-dim);
  --tt-accent-glow: var(--tt-ttt-glow);
}