/* Enaybil. Design Tokens & Base */

:root {
  --bg-base: #08090B;
  --bg-elevated: #0E1014;
  --bg-surface: #16181D;
  --bg-deep: #050507;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary: #F4F5F7;
  --text-secondary: #A8ADB8;
  --text-tertiary: #6B7180;
  --text-muted: #4A4F5A;

  --accent: #C4F542;
  --accent-soft: rgba(196, 245, 66, 0.12);
  --accent-glow: rgba(196, 245, 66, 0.40);

  --glow-cool: #5B7FFF;
  --glow-warm: #FF8A4C;
  --glow-violet: #A476FF;

  --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);

  --error: #FF6B6B;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Geist', 'Söhne', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
}

::selection {
  background: var(--accent);
  color: var(--bg-base);
}

/* ---------- Type ---------- */

.font-display {
  font-family: 'Geist', 'Söhne', -apple-system, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.0;
}

.font-mono {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-feature-settings: "ss01", "tnum";
}

.eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow-muted {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.hero-title {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(3.25rem, 8vw, 7.5rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.section-title {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.body-large {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* ---------- Buttons ---------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent);
  color: #0a0a0c;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: box-shadow 250ms var(--ease-premium), transform 250ms var(--ease-premium);
  box-shadow: 0 0 0 0 rgba(196, 245, 66, 0);
  white-space: nowrap;
}
.btn-primary:hover {
  box-shadow: 0 0 60px 4px var(--accent-glow), 0 0 0 1px var(--accent);
}
.btn-primary .arrow {
  transition: transform 250ms var(--ease-premium);
  display: inline-block;
}
.btn-primary:hover .arrow {
  transform: translateX(4px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: all 250ms var(--ease-premium);
}
.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-surface);
}

.btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Card ---------- */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 2rem;
  transition: border-color 350ms var(--ease-premium), background 350ms var(--ease-premium);
}
.card:hover {
  border-color: var(--border-default);
  background: #11141A;
}

/* ---------- Nav ---------- */

.glass-nav {
  background: rgba(8, 9, 11, 0.65);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- Layered hero background ---------- */

.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  will-change: transform, opacity;
}
/* Hero signal columns */
.signal-columns {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.signal-bar {
  position: absolute;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%);
  filter: blur(1px);
  will-change: opacity;
  opacity: 0;
}
.signal-bar.signal { filter: blur(0.5px); }
@keyframes signalPulse {
  0%   { opacity: 0; }
  50%  { opacity: var(--bar-opacity, 0.15); }
  100% { opacity: 0; }
}
.hero-radial {
  position: absolute;
  width: 1100px; height: 1100px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(196,245,66,0.08) 0%,
    rgba(91,127,255,0.04) 30%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
  animation: heroRadialPulse 14s ease-in-out infinite alternate;
}
@keyframes heroRadialPulse {
  from { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
[data-signal-columns="off"] .signal-columns { display: none; }
[data-signal-columns="subtle"] .signal-bar { animation-duration: 12s !important; opacity: calc(var(--bar-opacity, 0.15) * 0.5) !important; }
@media (prefers-reduced-motion: reduce) {
  .signal-bar { animation: none !important; opacity: var(--bar-opacity, 0.12) !important; }
  .hero-radial { animation: none !important; }
}

/* Light beam */
.beam {
  position: absolute;
  width: 220px;
  height: 140vh;
  top: -20vh;
  left: 60%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(196, 245, 66, 0.0) 20%,
    rgba(196, 245, 66, 0.06) 50%,
    rgba(196, 245, 66, 0.0) 80%,
    transparent 100%);
  transform: rotate(15deg);
  filter: blur(20px);
  animation: beamPulse 9s ease-in-out infinite;
}
@keyframes beamPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.4; }
}

/* Grain */
.grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 700ms var(--ease-premium), transform 700ms var(--ease-premium);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Slider ---------- */

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border-default);
  border-radius: 999px;
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(196, 245, 66, 0.12);
  transition: box-shadow 200ms var(--ease-premium);
}
.range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(196, 245, 66, 0.18), 0 0 30px var(--accent-glow);
}
.range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(196, 245, 66, 0.12);
}

/* ---------- Inputs ---------- */

.input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.95rem 1.1rem;
  border-radius: 10px;
  outline: none;
  transition: border-color 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium);
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder { color: var(--text-muted); }

/* ---------- Option / choice tile ---------- */

.choice {
  position: relative;
  width: 100%;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 1rem 1.15rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9875rem;
  cursor: pointer;
  transition: all 250ms var(--ease-premium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.choice:hover {
  border-color: var(--border-default);
  background: #11141A;
  box-shadow: 0 0 30px -8px var(--accent-glow);
}
.choice.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice .check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.choice.selected .check {
  background: var(--accent);
  border-color: var(--accent);
}

/* Step transition */
.step-enter {
  animation: stepIn 350ms var(--ease-premium) 100ms both;
}
.step-exit {
  animation: stepOut 250ms var(--ease-premium) both;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes stepOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* Focus rings */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .glow-1, .glow-2, .glow-3, .beam { animation: none !important; }
}

/* Tabular nums for numerics */
.tnum { font-variant-numeric: tabular-nums; }

/* Container helper */
.container-x {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

/* Enaybil Lockup. Hex + verb word */
.enaybil-lockup {
  /* Inline (not inline-flex) so the verb word participates in the parent's
     text baseline directly. The hex mark is positioned via inline-block
     with an explicit vertical-align value to match the word's cap height. */
  display: inline;
  position: relative;
  color: var(--accent);
  white-space: nowrap;
}
.enaybil-lockup .hex-mark {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  /* vertical-align value tunes the hex's vertical position relative to the
     baseline of surrounding text. Negative pushes down, positive pushes up.
     Tested value for Geist at hero size with a flat-top hex. */
  vertical-align: -0.08em;
  margin: 0 0.12em;
  color: #C4F542;
}
.enaybil-lockup .word-enaybil-verb {
  /* Verb word now an inline span so its baseline aligns naturally with "We".
     The text-shadow doesn't shift the baseline at this level (was an issue
     with display: inline-block in the previous rule). */
  display: inline;
}
[data-lockup-animated="false"] .enaybil-lockup .hex-mark circle,
[data-lockup-animated="false"] .enaybil-lockup .hex-mark line {
  animation: none !important;
  opacity: 0.6 !important;
}

/* Inline word highlight for section headlines. Subtle accent treatment. */
.hl {
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}

/* Hero verb treatment for "Enaybil". Default = glow */
.word-enaybil-verb {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--accent);
  text-shadow: 0 0 32px var(--accent-glow), 0 0 64px var(--accent-soft);
}
.word-enaybil-verb::after { content: none; }

/* Pill / fill variant */
[data-enaybil-style="fill"] .enaybil-lockup { color: #0a0a0c; background: var(--accent); padding: 0 0.18em 0.04em; border-radius: 0.18em; box-shadow: 0 0 60px var(--accent-glow); }
[data-enaybil-style="fill"] .word-enaybil-verb {
  color: #0a0a0c;
  font-style: normal;
  text-shadow: none;
  background: transparent;
}

/* Underline variant. Underline spans full lockup */
[data-enaybil-style="underline"] .enaybil-lockup { color: var(--text-primary); }
[data-enaybil-style="underline"] .word-enaybil-verb {
  color: var(--text-primary);
  font-style: normal;
  text-shadow: none;
}
[data-enaybil-style="underline"] .enaybil-lockup::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.05em;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 16px var(--accent-glow);
}
[data-enaybil-style="underline"] .word-enaybil-verb::after { content: none; }

/* Plain variant */
[data-enaybil-style="plain"] .enaybil-lockup { color: var(--text-primary); }
[data-enaybil-style="plain"] .word-enaybil-verb {
  color: var(--text-primary);
  font-style: normal;
  text-shadow: none;
}

/* Beam toggle */
[data-hero-beam="false"] .beam { display: none !important; }

/* ---------- Per-section ambient backgrounds ---------- */

.sec { position: relative; isolation: isolate; }

/* Direct children of a .sec get z-index: 1 so they paint above any ::after
   seam-fade or ::before ambient effect. They use position: relative as the
   default, but elements that explicitly set their own absolute position
   (like .hero-bg or .three-beams backdrop layers) must not be overridden,
   so we exclude those here. */
.sec > *:not(.hero-bg):not(.three-beams):not(.seam-top) {
  position: relative;
  z-index: 1;
}

/* Backdrop layers stay absolute (they need inset: 0 to fill the section)
   and sit at z-index: 0 so foreground content paints over them. */
.sec > .hero-bg,
.sec > .three-beams {
  z-index: 0;
}

/* Section seam blending. Each section fades to bg-base at its bottom edge
/* Universal section seam blending. Every section fades to bg-base at both
   its top and bottom edges so adjacent sections blend into a continuous
   canvas with no visible horizontal lines. Hero gets only a bottom fade
   (it's the first section, no top neighbor). */
.sec::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(0deg, var(--bg-base) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Top seam fade. Lives on a dedicated child div (.seam-top) instead of
   ::before because most sections already use ::before for their ambient
   backdrop effects (radial bloom, grid pattern, blue ellipse). Sections
   that need a top fade should render <div className="seam-top" /> as
   their first child. */
.sec .seam-top {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, var(--bg-base) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.sec-graphic::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(196,245,66,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.sec-who { overflow: hidden; }
.sec-who::before {
  content: "";
  position: absolute;
  top: 20%; left: 0;
  width: 200%; height: 60%;
  background: radial-gradient(
    ellipse 80% 50% at 50% 50%,
    rgba(91,127,255,0.025) 0%,
    transparent 70%
  );
  animation: whoStripe 50s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes whoStripe {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}

.sec-three { overflow: hidden; }
.three-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.three-beams .beam-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 480px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(196,245,66,0.10) 50%,
    transparent 100%);
  filter: blur(2px);
  opacity: 0.4;
  animation: beamBreathe 24s ease-in-out infinite;
}
@keyframes beamBreathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .three-beams .beam-bar {
    animation: none;
    opacity: 0.6;
  }
}

.sec-moat::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 80%);
  pointer-events: none; z-index: 0;
}

.sec-finalcta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(196,245,66,0.12) 0%, transparent 65%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
  pointer-events: none; z-index: 0;
}

/* Final CTA needs a taller bottom fade than other sections because its
   ambient bloom is the brightest accent on the page. The standard 160px
   fade isn't enough to fully erase the bloom before the section edge. */
.sec-finalcta::after {
  height: 280px !important;
}

/* Footer top fade. Mirrors the section bottom fade so the canvas remains
   continuous from the Final CTA into the Footer with no visible color line. */
.footer-fade {
  position: absolute;
  top: -120px;
  left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg, var(--bg-base) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Global grain overlay */
.grain-fixed {
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.015;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sec-who::before { animation: none !important; }
}

/* ---------- Progress bar (stronger) ---------- */
.progress-track {
  height: 2px;
  background: var(--border-default);
  position: relative;
  overflow: visible;
}
.progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 600ms var(--ease-premium);
}

/* ---------- Radio card polish ---------- */
.choice {
  padding-right: 3rem;
}
.choice .check {
  position: absolute;
  top: 14px; right: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.choice.selected {
  border: 1px solid var(--accent);
  background: rgba(196,245,66,0.06);
  box-shadow: 0 0 24px rgba(196,245,66,0.12);
}
.choice.selected .check {
  background: var(--accent);
  border: none;
}
.choice:hover:not(.selected) {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.02);
  box-shadow: none;
}

/* Other text input slide-in */
.other-input-wrap {
  overflow: hidden;
  transition: max-height 200ms var(--ease-premium), opacity 200ms var(--ease-premium), margin-top 200ms var(--ease-premium);
}
.other-input-wrap.closed { max-height: 0; opacity: 0; margin-top: 0; }
.other-input-wrap.open   { max-height: 120px; opacity: 1; margin-top: 12px; }

.char-counter {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
  margin-top: 6px;
}
.char-counter.warn { color: rgba(255, 159, 67, 0.7); }

/* Text-wrap balance for assessment headlines */
.assessment-q-title { text-wrap: balance; }

/* Analyzing overlay */
.analyzing-overlay {
  position: fixed; inset: 0;
  background: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  z-index: 200;
  animation: fadeIn 200ms ease-out;
}
.analyzing-overlay.exit { animation: fadeOut 200ms ease-out forwards; }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.analyzing-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(80px);
  opacity: 0.35;
  animation: glowPulse 1.2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.5;  }
}
.dots::after {
  content: '.';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #1a1d24; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #232730; }

/* ===========================================================
   Responsive. Mobile (<= 720px)
   - Hero/section headlines scale down so they don't blow out viewport
   - Card grids collapse to a single column with comfortable rhythm
=========================================================== */
@media (max-width: 720px) {
  .hero-title {
    font-size: clamp(38px, 11vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
  .section-title {
    font-size: clamp(30px, 8vw, 48px) !important;
    line-height: 1.08 !important;
  }
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .eyebrow,
  .eyebrow-muted {
    font-size: 10px !important;
  }
}

@media (max-width: 560px) {
  .sec-moat .section-title {
    font-size: clamp(1.6rem, 7vw, 2.25rem);
    line-height: 1.1;
    text-wrap: balance;
  }
  .three-beams .beam-bar {
    width: 280px;
  }
}


/* ============================================================
   Tim. Chat shell.
   ============================================================ */

.tim-root {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 100;
  font-family: 'Geist', sans-serif;
}

.tim-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  background: var(--bg-elevated, #11141A);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  color: var(--text-primary, #fff);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 32px rgba(196, 245, 66, 0.06);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.tim-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(196, 245, 66, 0.4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(196, 245, 66, 0.15);
}

.tim-toggle.open {
  padding: 10px;
  border-color: rgba(196, 245, 66, 0.4);
}

.tim-toggle-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tim-toggle-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(196, 245, 66, 0.08);
  border: 1px solid rgba(196, 245, 66, 0.3);
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.tim-toggle-label {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.tim-panel {
  position: absolute;
  bottom: 56px;
  right: 0;
  width: min(360px, calc(100vw - 48px));
  background: var(--bg-elevated, #11141A);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 60px rgba(196, 245, 66, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: timSlideUp 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes timSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tim-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.tim-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(196, 245, 66, 0.08);
  border: 1px solid rgba(196, 245, 66, 0.3);
  font-family: 'Geist Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tim-header-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.tim-header-status {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
  letter-spacing: 0.08em;
}

.tim-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tim-message {
  display: flex;
}

.tim-message-bubble {
  background: var(--bg-surface, #0E1014);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary, #fff);
  max-width: 92%;
}

.tim-message-bubble strong {
  font-family: 'Geist Mono', monospace;
  color: var(--accent, #C4F542);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tim-input-wrap {
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  padding: 12px 14px;
}

.tim-input {
  width: 100%;
  background: var(--bg-base, #08090B);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-primary, #fff);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 200ms ease;
}

.tim-input:disabled {
  cursor: not-allowed;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

.tim-input::placeholder {
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
  font-style: italic;
}

@media (max-width: 560px) {
  .tim-root {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: 16px;
  }
  .tim-panel {
    bottom: 56px;
    width: calc(100vw - 32px);
    max-height: 65vh;
  }
}