/* ==========================================================================
   TruDealers - Slate & Axiom Deep Flair Shell (Run 2)
   Near-black low-chroma canvas (#030508) · Soft off-white text (#F4F7FB)
   Single Primary Brand Accent: Cyan #56E1E9 (OKLCH 15% & 35% tints)
   Section Supporting Hues: Violet, Wine, Blue, Green (~70% alpha, 300ms crossfade)
   Bento 2fr/1fr Grids · Reading-Cursor Keyword Chips · Hero Timeline & Pill
   ========================================================================== */

/* Base reset and canvas, shared by every page (also in site.css for the pages that load it).
   Blog, guides and /verify load subpages.css without site.css, so it lives here too. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; width: 100%; max-width: 100vw; overflow-x: clip; background-color: #030508; }
body { color: #CBD5E1; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 100%; max-width: 100vw; overflow-x: clip; }
body::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 100% 70% at 50% -10%, rgba(86, 225, 233, 0.10) 0%, rgba(139, 92, 246, 0.03) 45%, transparent 75%), linear-gradient(to right, rgba(86, 225, 233, 0.042) 1px, transparent 1px), linear-gradient(to bottom, rgba(86, 225, 233, 0.042) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; background-position: center top; pointer-events: none; z-index: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font-family: inherit; color: inherit; }
::selection { background: #56E1E9; color: #070B10; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } html { scroll-behavior: auto; } }

:root {
  --td-bg: #030508;
  --td-surface: #070C14;
  --td-surface-card: rgba(9, 15, 25, 0.86);
  --td-surface-hover: rgba(14, 23, 38, 0.94);
  --td-surface-glass: rgba(7, 12, 20, 0.88);
  --td-border: rgba(255, 255, 255, 0.08);
  --td-border-highlight: rgba(86, 225, 233, 0.35);
  --td-border-glow: rgba(86, 225, 233, 0.15);

  --td-cyan: #56E1E9;
  --td-teal: #56E1E9;
  --td-blue: #388BFD;
  --td-indigo: #7C5CFF;
  --td-purple: #A855F7;
  --td-emerald: #8B5CF6;
  --td-amber: #56E1E9;

  --td-text: #F4F7FB;
  --td-text-dim: #CBD5E1;
  --td-text-muted: #8E9EB3;

  --td-radius-sm: 10px;
  --td-radius-md: 14px;
  --td-radius-lg: 18px;
  --td-radius-xl: 24px;

  --paper: #030508;
  --surface: rgba(8, 13, 22, 0.84);
  --surface-solid: #09101B;
  --ink: #F4F7FB;
  --ink-soft: #CBD5E1;
  --muted: #8E9EB3;
  --accent: #56E1E9;
  --purple: #A855F7;
  --gold: #56E1E9;
  --amber: #56E1E9;

  /* OKLCH tints of #56E1E9 at ~15% and ~35% for fills and glows (with rgba fallback) */
  --cyan-fill-15: rgba(86, 225, 233, 0.15);
  --cyan-glow-35: rgba(86, 225, 233, 0.35);
  --cyan-oklch-15: oklch(0.84 0.12 202 / 0.15);
  --cyan-oklch-35: oklch(0.84 0.12 202 / 0.35);

  --border-subtle: rgba(148, 163, 184, 0.14);
  --border-accent: rgba(86, 225, 233, 0.35);

  /* Default Section Supporting Hue Tokens (Violet default, swapped per section) */
  --sec-support-marker: rgba(139, 92, 246, 0.70);
  --sec-support-card-bg: rgba(139, 92, 246, 0.09);
  --sec-support-card-border: rgba(167, 139, 250, 0.24);
  --sec-support-chip-bg: rgba(139, 92, 246, 0.16);
  --sec-support-chip-border: rgba(167, 139, 250, 0.42);
  --sec-support-chip-text: #EDE9FE;
  --sec-support-orb: rgba(139, 92, 246, 0.14);

  --td-shadow-card:
    0 32px 68px -12px rgba(0, 0, 0, 0.95),
    0 14px 30px -8px rgba(0, 0, 0, 0.84),
    0 0 0 1px rgba(0, 0, 0, 0.92),
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 32px 56px -26px rgba(86, 225, 233, 0.12),
    inset 0 -24px 46px -18px rgba(0, 0, 0, 0.92);
  --td-shadow-glow:
    0 36px 76px -12px rgba(0, 0, 0, 0.96),
    0 16px 36px -8px rgba(0, 0, 0, 0.86),
    0 0 42px -10px rgba(86, 225, 233, 0.24),
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(86, 225, 233, 0.16),
    inset 0 36px 64px -26px rgba(86, 225, 233, 0.18),
    inset 0 -24px 48px -18px rgba(0, 0, 0, 0.92);
}

@supports (color: oklch(from #56E1E9 l c h / 0.15)) {
  :root {
    --cyan-oklch-15: oklch(from #56E1E9 l c h / 0.15);
    --cyan-oklch-35: oklch(from #56E1E9 l c h / 0.35);
    --border-accent: oklch(from #56E1E9 l c h / 0.35);
  }
}

html {
  scroll-behavior: smooth;
  background-color: var(--paper);
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

.ambient-vignette, .grid-overlay { display: none; }

/* ==========================================================================
   1. SECTION SUPPORTING HUES (VIOLET, WINE, BLUE, GREEN AT ~70% ALPHA)
   Cyan #56E1E9 stays primary everywhere; section custom properties crossfade 300ms
   ========================================================================== */

.td-section[data-sec-theme="violet"],
body[data-active-theme="violet"] {
  --sec-support-marker: rgba(139, 92, 246, 0.70);
  --sec-support-card-bg: rgba(139, 92, 246, 0.09);
  --sec-support-card-border: rgba(167, 139, 250, 0.24);
  --sec-support-chip-bg: rgba(139, 92, 246, 0.16);
  --sec-support-chip-border: rgba(167, 139, 250, 0.42);
  --sec-support-chip-text: #EDE9FE;
  --sec-support-orb: rgba(139, 92, 246, 0.14);
}

.td-section[data-sec-theme="wine"],
body[data-active-theme="wine"] {
  --sec-support-marker: rgba(190, 24, 93, 0.70);
  --sec-support-card-bg: rgba(190, 24, 93, 0.09);
  --sec-support-card-border: rgba(244, 114, 182, 0.24);
  --sec-support-chip-bg: rgba(190, 24, 93, 0.16);
  --sec-support-chip-border: rgba(244, 114, 182, 0.42);
  --sec-support-chip-text: #FCE7F3;
  --sec-support-orb: rgba(190, 24, 93, 0.13);
}

.td-section[data-sec-theme="blue"],
body[data-active-theme="blue"] {
  --sec-support-marker: rgba(56, 139, 253, 0.70);
  --sec-support-card-bg: rgba(56, 139, 253, 0.09);
  --sec-support-card-border: rgba(96, 165, 250, 0.24);
  --sec-support-chip-bg: rgba(56, 139, 253, 0.16);
  --sec-support-chip-border: rgba(96, 165, 250, 0.42);
  --sec-support-chip-text: #DBEAFE;
  --sec-support-orb: rgba(56, 139, 253, 0.13);
}

.td-section[data-sec-theme="green"],
body[data-active-theme="green"] {
  --sec-support-marker: rgba(139, 92, 246, 0.70);
  --sec-support-card-bg: rgba(139, 92, 246, 0.09);
  --sec-support-card-border: rgba(167, 139, 250, 0.24);
  --sec-support-chip-bg: rgba(139, 92, 246, 0.16);
  --sec-support-chip-border: rgba(167, 139, 250, 0.42);
  --sec-support-chip-text: #EDE9FE;
  --sec-support-orb: rgba(139, 92, 246, 0.13);
}

/* ==========================================================================
   2. ANIMATED DEPTH STAGE (CONSTELLATION + PARALLAX CYAN ORBS)
   ========================================================================== */

.td-depth-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Keeps the blurred orbs and constellation canvas from invalidating layout
     or paint in the rest of the document while they animate during scroll. */
  contain: layout paint style;
}

.td-constellation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.td-glow-orb {
  position: absolute;
  border-radius: 50%;

  pointer-events: none;
  /* transform only: box-shadow/background-color are not compositor-animatable,
     and listing them here just keeps a layer pinned for no gain. */

  transition: background-color 300ms ease, opacity 300ms ease;
}

.td-glow-orb--cyan-1 {
  width: clamp(360px, 48vw, 680px);
  height: clamp(360px, 48vw, 680px);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, var(--cyan-oklch-15) 0%, transparent 70%);
  transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.12), 0);
}

.td-glow-orb--support {
  width: clamp(320px, 42vw, 600px);
  height: clamp(320px, 42vw, 600px);
  top: 38%;
  right: -10%;
  background: radial-gradient(circle, var(--sec-support-orb) 0%, transparent 70%);
  transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.07), 0);
}

.td-glow-orb--cyan-2 {
  width: clamp(280px, 36vw, 520px);
  height: clamp(280px, 36vw, 520px);
  bottom: -14%;
  left: 24%;
  background: radial-gradient(circle, var(--cyan-oklch-15) 0%, transparent 70%);
  opacity: 0.7;
  transform: translate3d(0, calc(var(--scroll-y, 0px) * 0.08), 0);
}

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

/* ==========================================================================
   3. NAVIGATION (MOBILE FIRST, GLASS BAR)
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(3, 5, 8, 0.84);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.nav.scrolled {
  border-bottom-color: var(--cyan-oklch-35);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65);
}

.nav__inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo {
  height: 32px;
  width: auto;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.nav__link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.nav__link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.04);
}

.nav__link.active {
  color: var(--accent);
  background: var(--cyan-oklch-15);
  border-color: var(--cyan-oklch-35);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .nav__inner {
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .nav__links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    gap: 4px;
    scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar {
    display: none;
  }
  .nav__link {
    font-size: 0.8rem;
    padding: 5px 10px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   4. TYPOGRAPHY & LAYOUT CONTAINERS (FLUID CLAMP, GENEROUS SPACING)
   ========================================================================== */

.td-wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .td-wrap {
    padding: 0 32px;
  }
}

.td-section {
  position: relative;
  padding: clamp(68px, 8.5vw, 116px) 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
  transition: background-color 300ms ease, border-color 300ms ease;
}

.td-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 42% at 18% 12%, var(--sec-support-card-bg), transparent 70%),
    radial-gradient(ellipse 48% 36% at 84% 88%, var(--cyan-oklch-15), transparent 75%);
  opacity: 0.65;
  transition: background 300ms ease, opacity 300ms ease;
}

.td-section > .td-wrap {
  position: relative;
  z-index: 1;
}

/* Mono uppercase eyebrow labels (clean architectural mono, no pill box) */
.td-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.72rem, 0.85vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.td-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(86, 225, 233, 0.55);
}

/* Heavy grotesk display face with deep spatial contrast */
.td-h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.35rem, 5.2vw, 4.15rem);
  font-weight: 800;
  line-height: 1.06;
  color: #F8FAFC;
  margin: 0 0 22px;
  letter-spacing: -0.035em;
  position: relative;
  text-shadow:
    0 14px 36px rgba(0, 0, 0, 0.92),
    0 2px 6px rgba(0, 0, 0, 0.8);
}

.td-h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.14;
  color: #F8FAFC;
  margin: 0 0 18px;
  letter-spacing: -0.028em;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.88);
}

.td-h3 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.28;
  color: #F8FAFC;
  margin: 0 0 10px;
  letter-spacing: -0.018em;
}

.td-lead {
  font-size: clamp(1.04rem, 1.35vw, 1.2rem);
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 780px;
  margin: 0 0 28px;
}

/* ==========================================================================
   5. HERO WORD-BY-WORD REVEAL & SELF-TYPING SUBHEADING (NO PILL BUBBLE)
   ========================================================================== */

.td-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 1024px) {
  .td-hero-grid--split {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 44px;
  }
}

.td-h1-stage {
  position: relative;
  display: block;
}

.td-word {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 0;
  transition: color 320ms ease, text-shadow 320ms ease;
}

.js .td-h1[data-hero-animated="true"] .td-word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition:
    opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--w-i, 0) * 0.04s);
}

.js .td-h1[data-hero-animated="true"].is-words-in .td-word-inner {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Rounded highlight pill that sits behind one key headline word & glides between key words */
.td-hero-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--cyan-oklch-35), var(--cyan-oklch-15));
  border: 1px solid var(--cyan-oklch-35);
  box-shadow:
    0 0 28px var(--cyan-oklch-15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

.td-hero-pill.is-active {
  opacity: 1;
}

.td-word.is-pill-target {
  color: #56E1E9;
  text-shadow:
    0 14px 36px rgba(0, 0, 0, 0.92),
    0 0 22px rgba(86, 225, 233, 0.45);
}

/* Self-typing subheading caret */
.td-lead.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: text-bottom;
  box-shadow: 0 0 8px var(--accent);
  animation: tdCaretBlink 0.65s steps(2, start) infinite;
}

@keyframes tdCaretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Timeline reveal for Hero CTAs, lists & visual */
.js .td-hero-timeline-after {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.68s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.68s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .td-hero-timeline-after.is-timeline-in {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   6. BENTO GRIDS (SHORTER CARDS SIDE-BY-SIDE, LONGER CARD DROPS DOWN FULL-WIDTH)
   ========================================================================== */

.td-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .td-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }
}

.td-grid-3,
.td-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 820px) {
  /* 2-column Bento stage: shorter cards sit 50/50 side-by-side, longer card drops down 100% full-width */
  main .td-grid-3,
  .td-bento-grid,
  .td-grid-3.td-bento-auto,
  .td-grid-2.td-bento-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  /* When JS marks the longer card in a trio/group with .td-bento-drop-wide, it drops down and spans full width */
  main .td-grid-3 > .td-card.td-bento-drop-wide,
  main .td-grid-2 > .td-card.td-bento-drop-wide,
  .td-bento-2fr {
    grid-column: 1 / -1;
  }

  /* Inside a full-width dropped card, flow bullet lists in 2 balanced columns so the card stays sleek and low */
  .td-card.td-bento-drop-wide .td-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
  }
  .td-card.td-bento-drop-wide .td-list li {
    margin-bottom: 4px;
  }

  /* Fallback CSS rule before JS runs: in a 3-card grid, drop the 1st card if it's a highlight card, or drop 3rd card full-width */
  main .td-grid-3:not(.td-bento-processed) > .td-card:nth-child(3n + 1):first-child:last-child,
  main .td-grid-3:not(.td-bento-processed) > .td-card:nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  /* Footer 3-column layout stays 3 equal columns */
  footer .td-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Universal Deep 3D Glassmorphic Bento Card & Multi-Bevel Chassis Shading */
.td-card {
  position: relative;
  overflow: hidden;


  background:
    radial-gradient(120% 90% at 50% -20%, var(--sec-support-card-bg), transparent 65%),
    radial-gradient(80% 60% at 12% 0%, rgba(86, 225, 233, 0.085), transparent 70%),
    linear-gradient(168deg, rgba(16, 23, 35, 0.88) 0%, rgba(7, 11, 18, 0.94) 56%, rgba(2, 4, 7, 0.98) 100%);
  border: 1px solid var(--sec-support-card-border);
  outline: 1px solid rgba(255, 255, 255, 0.04);
  outline-offset: -7px;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--td-shadow-card);
  transform: perspective(1100px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) translateZ(0);

  transition:
    background 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top-edge chrome + cyan specular catch-light beam on every bento card */
.td-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 28%,
    rgba(86, 225, 233, 0.58) 50%,
    rgba(255, 255, 255, 0.35) 72%,
    transparent 100%
  );
  opacity: 0.92;
  pointer-events: none;
  z-index: 2;
  transition: opacity 300ms ease;
}

/* Cursor-follow 3D specular glare & spotlight inside cards */
.td-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      460px circle at var(--spot-x, 50%) var(--spot-y, 15%),
      rgba(255, 255, 255, 0.08),
      rgba(86, 225, 233, 0.065) 38%,
      transparent 72%
    );
  opacity: 0.48;
  transition: opacity 300ms ease;
  z-index: 0;
}

.td-card:hover::before {
  opacity: 1;
}

.td-card > * {
  position: relative;
  z-index: 1;
}

.td-card:hover {
  border-color: rgba(86, 225, 233, 0.44);
  box-shadow:
    0 42px 84px -14px rgba(0, 0, 0, 0.98),
    0 18px 36px -8px rgba(0, 0, 0, 0.88),
    0 0 38px -8px rgba(86, 225, 233, 0.22),
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(86, 225, 233, 0.14),
    inset 0 36px 64px -26px rgba(86, 225, 233, 0.16),
    inset 0 -24px 48px -18px rgba(0, 0, 0, 0.94);
  transform: perspective(1100px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) translateY(-4px);
}

.td-card--highlight {
  background:
    radial-gradient(130% 95% at 50% -18%, rgba(86, 225, 233, 0.14), transparent 66%),
    radial-gradient(85% 65% at 88% 0%, rgba(255, 255, 255, 0.065), transparent 70%),
    linear-gradient(165deg, rgba(16, 26, 40, 0.90) 0%, rgba(6, 10, 18, 0.95) 58%, rgba(2, 4, 7, 0.99) 100%);
  border: 1px solid rgba(86, 225, 233, 0.36);
  box-shadow: var(--td-shadow-glow);
}

/* Interactive Store Subcards (/verify product selector items) */
.td-bento-subcard {
  position: relative;
  overflow: hidden;
  padding: 15px 18px;
  border-radius: 14px;
  cursor: pointer;


  background:
    radial-gradient(110% 90% at 50% -20%, rgba(255, 255, 255, 0.055), transparent 70%),
    linear-gradient(165deg, rgba(15, 22, 34, 0.86) 0%, rgba(5, 8, 14, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    0 18px 38px -10px rgba(0, 0, 0, 0.88),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 24px -12px rgba(0, 0, 0, 0.85);
  transition:
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.td-bento-subcard:hover {
  border-color: rgba(86, 225, 233, 0.40);
  box-shadow:
    0 22px 44px -10px rgba(0, 0, 0, 0.92),
    0 0 24px rgba(86, 225, 233, 0.14),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}

.td-bento-subcard.is-selected {
  border-color: var(--accent);
  background:
    radial-gradient(120% 95% at 25% -10%, rgba(86, 225, 233, 0.14), transparent 70%),
    linear-gradient(165deg, rgba(16, 28, 44, 0.92) 0%, rgba(6, 11, 18, 0.97) 100%);
  box-shadow:
    0 22px 46px -8px rgba(0, 0, 0, 0.94),
    0 0 28px rgba(86, 225, 233, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(86, 225, 233, 0.32);
}

/* ==========================================================================
   7. TINTED KEYWORD CHIPS (SEQUENTIAL READING-CURSOR LIGHT-UP)
   ========================================================================== */

.td-kw-chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84em;
  font-weight: 600;
  padding: 1px 8px;
  margin: 0 2px;
  border-radius: 6px;
  background: var(--sec-support-chip-bg);
  border: 1px solid var(--sec-support-chip-border);
  color: var(--sec-support-chip-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.td-kw-chip.is-lit {
  background: var(--cyan-oklch-15);
  border-color: var(--cyan-oklch-35);
  color: #56E1E9;
  box-shadow:
    0 0 16px var(--cyan-oklch-15),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

/* ==========================================================================
   8. BADGES, TABLES, CALLOUTS, LISTS & MAGNETIC BUTTONS
   ========================================================================== */

.td-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 8px;
  background: var(--cyan-oklch-15);
  color: var(--accent);
  border: 1px solid var(--cyan-oklch-35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

.td-badge--tbc {
  background: rgba(86, 225, 233, 0.14);
  color: var(--accent);
  border-color: rgba(86, 225, 233, 0.42);
}

.td-badge--purple {
  background: var(--sec-support-chip-bg);
  color: var(--sec-support-chip-text);
  border-color: var(--sec-support-chip-border);
}

.td-table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;


  background:
    radial-gradient(110% 80% at 50% -15%, var(--sec-support-card-bg), transparent 70%),
    linear-gradient(168deg, rgba(12, 20, 34, 0.82) 0%, rgba(5, 9, 16, 0.92) 100%);
  border: 1px solid var(--sec-support-card-border);
  border-radius: 18px;
  margin: 24px 0;
  box-shadow:
    0 24px 52px -12px rgba(0, 0, 0, 0.88),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 24px 44px -22px var(--sec-support-card-bg);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.td-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.td-table th,
.td-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.td-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: linear-gradient(90deg, rgba(86, 225, 233, 0.09), rgba(139, 92, 246, 0.05));
}

.td-table tbody tr {
  transition: background-color 220ms ease;
}

.td-table tbody tr:hover {
  background: rgba(86, 225, 233, 0.05);
}

.td-table tr:last-child td {
  border-bottom: none;
}

.td-credit-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 12px;
}

.td-callout {


  background:
    linear-gradient(135deg, var(--cyan-oklch-15) 0%, rgba(8, 15, 26, 0.86) 100%);
  border: 1px solid var(--cyan-oklch-35);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 24px 0;
  color: var(--ink-soft);
  box-shadow:
    0 16px 36px -10px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.td-callout--gold {
  background:
    linear-gradient(135deg, rgba(86, 225, 233, 0.12) 0%, rgba(12, 16, 26, 0.88) 100%);
  border-color: rgba(86, 225, 233, 0.32);
  border-left-color: var(--accent);
}

.td-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.td-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.td-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--sec-support-marker);
  transition: box-shadow 300ms ease, background-color 300ms ease;
}

.td-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
}

.td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.94rem;
  padding: 13px 24px;
  line-height: 1.25; /* same height for <button> (UA normal) and <a> (inherits 1.6) */
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;

}

.td-btn--primary {
  background: #080E1C;
  color: #56E1E9 !important;
  border: 1px solid rgba(86, 225, 233, 0.4);
  border-top: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 0 12px rgba(86, 225, 233, 0.15);
}

.td-btn--primary:hover {
  background: #0D162B;
  color: #FFFFFF !important;
  border-color: rgba(187, 99, 255, 0.7);
  border-top-color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 20px rgba(187, 99, 255, 0.35);
}

.td-btn--secondary {


  background: rgba(10, 16, 28, 0.84);
  color: var(--ink) !important;
  border-color: var(--cyan-oklch-35);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.td-btn--secondary:hover {
  background: var(--cyan-oklch-15);
  border-color: var(--accent);
}

.td-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 16px 22px;


  background:
    radial-gradient(90% 120% at 15% 0%, var(--cyan-oklch-15), transparent 70%),
    linear-gradient(165deg, rgba(12, 20, 34, 0.80) 0%, rgba(6, 10, 18, 0.90) 100%);
  border: 1px solid var(--sec-support-card-border);
  border-radius: 16px;
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: border-color 300ms ease;
}

.td-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.td-trust-strip span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.td-faq-item {
  position: relative;


  background:
    radial-gradient(110% 90% at 50% -20%, var(--sec-support-card-bg), transparent 70%),
    linear-gradient(168deg, rgba(13, 21, 35, 0.80) 0%, rgba(6, 10, 18, 0.92) 100%);
  border: 1px solid var(--sec-support-card-border);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow:
    0 18px 42px -12px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 18px 36px -20px var(--sec-support-card-bg);
  transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.td-faq-item[open] {
  border-color: var(--cyan-oklch-35);
  box-shadow:
    0 22px 48px -12px rgba(0, 0, 0, 0.88),
    0 0 24px var(--cyan-oklch-15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.td-faq-item summary {
  padding: 18px 22px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.td-faq-item summary::after {
  content: "+";
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem;
  color: var(--accent);
}

.td-faq-item[open] summary::after {
  content: "-";
}

.td-faq-body {
  padding: 0 22px 20px;
  color: var(--ink-soft);
  line-height: 1.7;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

/* ==========================================================================
   9. SCROLL STAGGER REVEAL & PREFERS-REDUCED-MOTION FALLBACK
   ========================================================================== */

.js .td-scroll-reveal {
  opacity: 0;
  transition: opacity 0.56s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--stagger-d, 0s);
}

.js .td-scroll-reveal.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .td-h1[data-hero-animated="true"] .td-word-inner,
  .js .td-hero-timeline-after,
  .js .td-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .td-lead.is-typing::after,
  .td-constellation-canvas {
    display: none !important;
  }
  .td-card,
  .td-btn,
  .td-kw-chip,
  .td-hero-pill {
    transition: none !important;
  }
}

/* Highlighted word in section headings: reuses the hero pill accent */
.td-hl-word {
  color: #56E1E9;
  padding: 0 0.18em;
  border-radius: 10px;
  background: radial-gradient(120% 100% at 50% 0%, var(--cyan-oklch-35), var(--cyan-oklch-15));
  box-shadow: 0 0 22px var(--cyan-oklch-15);
  text-shadow: 0 0 18px rgba(86, 225, 233, 0.35);
}

/* Gentle lift on price badges and table rows in the pricing tables */
.td-table .td-badge {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.td-table tbody tr:hover .td-badge {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -6px rgba(86, 225, 233, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .td-table .td-badge { transition: none !important; }
  .td-table tbody tr:hover .td-badge { transform: none; }
}

/* ==========================================================================
   10. SCROLL CHOREOGRAPHY (no blank gaps, scroll-linked reveals, progress rail)
   ========================================================================== */
/* Never fully invisible, so there is no empty gap while scrolling */
.js .td-scroll-reveal { opacity: 0.28; }

@keyframes tdRise {
  from { opacity: 0.28; }
  to   { opacity: 1; }
}
@keyframes tdHeadIn {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
@keyframes tdProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Scroll-linked: animation follows the scrollbar, so content is always in step with the hand */
@supports (animation-timeline: view()) {
  .js .td-scroll-reveal,
  .js .td-scroll-reveal.is-visible {
    opacity: 1; transform: none; transition: none;
    animation: tdRise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .js main .td-section .td-h2 {
    animation: tdHeadIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

/* Progress rail across the top, cyan into purple */
.td-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
  background: linear-gradient(90deg, #56E1E9 0%, #BB63FF 100%);
  box-shadow: 0 0 12px rgba(86, 225, 233, 0.55);
  transform-origin: 0 50%;
  transform: scaleX(var(--td-progress, 0));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .td-scroll-progress { animation: tdProgress linear both; animation-timeline: scroll(root); }
}

@media (prefers-reduced-motion: reduce) {
  .js .td-scroll-reveal, .js main .td-section .td-h2 { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .td-scroll-progress { display: none; }
}

/* ==========================================================================
   12. FORM CONTROL PRIMITIVES (.td-label / .td-input / .td-select)
   --------------------------------------------------------------------------
   These class names were used across /verify with no matching CSS, so every
   control rendered as a browser-default light input on the #030508 canvas.
   Mobile-first: 16px type (below this iOS Safari auto-zooms the page on
   focus), 48px touch targets, explicit select colours for Windows dark mode.
   ========================================================================== */

html { color-scheme: dark; }

.td-field { display: grid; gap: 6px; }

.td-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-text-muted);
  line-height: 1.4;
}

.td-req, .td-opt {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 700;
}
.td-req { color: #030508; background: var(--td-cyan); }
.td-opt { color: var(--td-text-muted); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--td-border); }

.td-input, .td-select, .td-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  /* 16px exactly: any smaller and iOS Safari zooms the viewport on focus. */
  font-size: 16px;
  line-height: 1.4;
  color: var(--td-text);
  background-color: var(--td-surface);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-sm);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.td-textarea { min-height: 96px; resize: vertical; }

.td-input::placeholder, .td-textarea::placeholder { color: #5C6B7F; }

.td-input:hover, .td-select:hover, .td-textarea:hover { border-color: rgba(255, 255, 255, 0.18); }

.td-input:focus-visible, .td-select:focus-visible, .td-textarea:focus-visible {
  outline: none;
  border-color: var(--td-cyan);
  background-color: #0A1120;
  box-shadow: 0 0 0 3px rgba(86, 225, 233, 0.22);
}

/* Native select: explicit colours, otherwise Windows renders a white popup. */
.td-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%2356E1E9' d='M7 9 0 1.5 1.4 0 7 6 12.6 0 14 1.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.td-select option { background-color: #0B0E14 !important; color: #F8FAFC !important; }
select, option, optgroup { color-scheme: dark; background-color: #0B0E14; color: #F8FAFC; }
.td-select:disabled { opacity: 0.48; cursor: not-allowed; background-color: #06090E !important; color: #64748B !important; }

.td-field-hint { font-size: 0.78rem; color: var(--td-text-muted); line-height: 1.5; }

/* File / camera upload. The native control is visually hidden but stays
   focusable and clickable, so the styled label is a real accessible target. */
.td-file { position: relative; display: grid; gap: 8px; }
.td-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.td-file-face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px dashed rgba(86, 225, 233, 0.38);
  border-radius: var(--td-radius-sm);
  background: rgba(86, 225, 233, 0.05);
  color: var(--td-text-dim);
  font-size: 0.88rem;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.td-file input[type="file"]:hover ~ .td-file-face,
.td-file input[type="file"]:focus-visible ~ .td-file-face {
  border-color: var(--td-cyan);
  background: rgba(86, 225, 233, 0.1);
}
.td-file input[type="file"]:focus-visible ~ .td-file-face { box-shadow: 0 0 0 3px rgba(86, 225, 233, 0.22); }
.td-file.is-attached .td-file-face { border-style: solid; border-color: var(--td-cyan); color: var(--td-text); }
.td-file-cta {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-cyan);
}

/* Checkbox / radio: 44px hit area with the visual box kept small. */
.td-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--td-text-dim);
  line-height: 1.5;
}
.td-choice input[type="checkbox"], .td-choice input[type="radio"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--td-cyan);
  cursor: pointer;
}

/* 2026-10-24 spacing pass: on phones, stacked CTAs share one width (no ragged edge) */
@media (max-width: 560px) {
  .td-btn-row > .td-btn { flex: 1 1 100%; }
}