/* ===================================================================
   CAREER THESIS — LANDING PAGE REDESIGN
   Premium immersive walkthrough. Glassmorphism + scroll storytelling.
   Built on top of the base design system in styles.css.
   =================================================================== */

:root {
  --ct-noir:     #06080d;
  --ct-noir-1:   #0a0e16;
  --ct-noir-2:   #0f1320;
  --ct-glass:    rgba(255, 255, 255, 0.03);
  --ct-glass-2:  rgba(255, 255, 255, 0.05);
  --ct-glass-edge: rgba(255, 255, 255, 0.08);
  --ct-glass-edge-2: rgba(255, 255, 255, 0.14);
  --ct-text:     #e8ecf3;
  --ct-text-dim: #8a93a8;
  --ct-text-mute: #525d75;
  --ct-gold:     #c9a961;
  --ct-gold-2:   #e6cf94;
  --ct-gold-dim: rgba(201, 169, 97, 0.5);
  --ct-gold-glow: rgba(201, 169, 97, 0.18);
  --ct-teal:     #4a9d8f;
  --ct-blue:     #5b8cff;
  --ct-crimson:  #c75450;

  /* ── Responsive layout system ──
     Sections span 100vw. Content has a generous max (1880px) so the layout
     actually fills modern displays — on a 1920px screen, padding is only
     ~32px on each side (was 240px). On wider screens, padding scales up to
     keep content from sprawling beyond ~1880px. The floor padding is 32px,
     so content never touches the viewport edge but feels noticeably wider. */
  --ct-content-max: 1880px;
  --ct-pad: max(32px, calc((100vw - 1880px) / 2));
}

/* Hide the OLD landing layout when new one is active */
.route--home .lp-hero,
.route--home .lp-showcase,
.route--home .lp-statement,
.route--home .lp-close,
.route--home .lp-spacer {
  display: none !important;
}

/* ───────────────────────────────────────────────────────────────────
   ROUTE CONTAINER UNBOX
   The .route base class in styles.css applies `padding: 56px 32px 100px`.
   .route--home only zeros out the vertical padding — the 32px horizontal
   padding is INHERITED, shoving the entire landing inward by 32px on
   each side and producing the visible vertical bands the user reported.
   Zero it out so the landing reaches the true viewport edges.
   ─────────────────────────────────────────────────────────────────── */
.route--home {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ───────────────────────────────────────────────────────────────────
   GLOBAL CHROME ALIGNMENT
   Override nav + footer so they share the landing's wider container.
   Other routes (simulator, tools, library, etc.) keep their original
   1200px content max — only the chrome that frames them widens to match
   the landing. This eliminates the boxed-in look the user reported.
   ─────────────────────────────────────────────────────────────────── */
.nav__inner {
  max-width: none;
  padding-left: var(--ct-pad);
  padding-right: var(--ct-pad);
}
.footer__body,
.footer__body--premium {
  max-width: none;
  padding-left: var(--ct-pad);
  padding-right: var(--ct-pad);
}
.footer__sub {
  max-width: none;
  padding-left: var(--ct-pad);
  padding-right: var(--ct-pad);
}

/* ───────────────────────────────────────────────────────────────────
   SHELL — the entire new landing
   ─────────────────────────────────────────────────────────────────── */
.ct-landing {
  position: relative;
  background: var(--ct-noir);
  color: var(--ct-text);
  overflow: hidden;
  isolation: isolate;
}

/* Global ambient atmosphere — four edge-anchored gradients that overlap to
   create seamless, uniform coverage across the entire viewport. Each gradient
   peaks AT an edge (or just past it) and fades inward, so the centre and
   edges receive equally graceful lighting. No dark bands. */
.ct-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 110% 100% at 0% 30%,   rgba(201,169,97,0.055) 0%, transparent 78%),
    radial-gradient(ellipse 110% 100% at 100% 70%, rgba(91,140,255,0.045) 0%, transparent 78%),
    radial-gradient(ellipse 130% 60%  at 50% 0%,   rgba(201,169,97,0.028) 0%, transparent 80%),
    radial-gradient(ellipse 130% 60%  at 50% 100%, rgba(74,157,143,0.030) 0%, transparent 80%);
}

.ct-section {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 120px var(--ct-pad);
}

.ct-section--full {
  padding-left: 0;
  padding-right: 0;
}

/* ───────────────────────────────────────────────────────────────────
   §0. SECTION HEADERS — used across sections
   ─────────────────────────────────────────────────────────────────── */
.ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ct-gold);
  padding: 6px 14px;
  border: 1px solid var(--ct-gold-dim);
  border-radius: 100px;
  background: rgba(201,169,97,0.05);
  backdrop-filter: blur(8px);
}
.ct-eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ct-gold);
  box-shadow: 0 0 12px var(--ct-gold);
  animation: ct-pulse 2.4s ease-in-out infinite;
}
@keyframes ct-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

.ct-h-display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ct-text);
  margin: 18px 0 22px;
}
.ct-h-display em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--ct-gold-2) 0%, var(--ct-gold) 60%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ct-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ct-text-dim);
  max-width: 640px;
}

/* ═══════════════════════════════════════════════════════════════════
   §1. HERO — Immersive cinema opening
   ═══════════════════════════════════════════════════════════════════ */
.ct-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 140px var(--ct-pad) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  z-index: 2;
}

/* Hero ambient backdrop — fills the entire hero section (= full viewport on wide screens) */
.ct-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.ct-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
/* Orbs scale with viewport — small enough to feel ambient, large enough to feel premium on wide displays */
.ct-orb--1 {
  width: clamp(480px, 38vw, 780px);
  height: clamp(480px, 38vw, 780px);
  top: -8%;
  right: -4%;
  background: radial-gradient(circle, rgba(201,169,97,0.45), transparent 60%);
  animation: ct-orb-drift-1 22s ease-in-out infinite alternate;
}
.ct-orb--2 {
  width: clamp(360px, 28vw, 580px);
  height: clamp(360px, 28vw, 580px);
  bottom: -6%;
  left: -5%;
  background: radial-gradient(circle, rgba(91,140,255,0.30), transparent 65%);
  animation: ct-orb-drift-2 28s ease-in-out infinite alternate;
}
.ct-orb--3 {
  width: clamp(280px, 22vw, 460px);
  height: clamp(280px, 22vw, 460px);
  top: 38%;
  left: 32%;
  background: radial-gradient(circle, rgba(74,157,143,0.22), transparent 65%);
  animation: ct-orb-drift-3 32s ease-in-out infinite alternate;
}
@keyframes ct-orb-drift-1 {
  0%   { transform: translate(0,0)      scale(1); }
  100% { transform: translate(-60px,80px) scale(1.1); }
}
@keyframes ct-orb-drift-2 {
  0%   { transform: translate(0,0)     scale(1); }
  100% { transform: translate(80px,-50px) scale(1.15); }
}
@keyframes ct-orb-drift-3 {
  0%   { transform: translate(0,0)      scale(1) rotate(0deg); }
  100% { transform: translate(-40px,-40px) scale(0.95) rotate(20deg); }
}

/* Grid pattern overlay */
.ct-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 75%);
  opacity: 0.6;
}

.ct-hero__copy { position: relative; z-index: 2; }

.ct-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  animation: ct-rise 1s var(--ease) 0.1s forwards;
}
.ct-hero__eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ct-gold));
}

.ct-hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: var(--ct-text);
}
.ct-hero__title .line {
  display: block;
  overflow: hidden;
  /* The line-mask clip zone must contain BOTH bleeds:
       · bottom — descenders (g, p, y, q) + italic period tails + the entrance
         animation's translateY(110%) start position
       · top    — Fraunces italic ascenders, swash tops, and the upward curl
         on italic 'r' / 'd' / 'h' / 'b' / 'k' / 'l'
     Symmetric 0.20em on top and bottom guarantees the entire visual em-box
     (~1.04em tall on Fraunces light italic at large sizes) fits inside the
     mask's clip area even with line-height 0.98. Negative margins on both
     sides cancel the padding so visual layout stays pixel-identical. */
  padding-top:    0.20em;
  padding-bottom: 0.20em;
  margin-top:    -0.20em;
  margin-bottom: -0.20em;
}
.ct-hero__title .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: ct-line-up 1.1s var(--ease) forwards;
}
.ct-hero__title .word.d1 { animation-delay: 0.2s; }
.ct-hero__title .word.d2 { animation-delay: 0.32s; }
.ct-hero__title .word.d3 { animation-delay: 0.44s; }
.ct-hero__title .word.d4 { animation-delay: 0.56s; }
.ct-hero__title .word.d5 { animation-delay: 0.68s; }
.ct-hero__title .word.d6 { animation-delay: 0.80s; }
.ct-hero__title .word--accent {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--ct-gold-2) 0%, var(--ct-gold) 60%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
@keyframes ct-line-up {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes ct-rise {
  to { transform: translateY(0); opacity: 1; }
}

.ct-hero__sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ct-text-dim);
  max-width: 560px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(12px);
  animation: ct-rise 1s var(--ease) 0.95s forwards;
}

.ct-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(12px);
  animation: ct-rise 1s var(--ease) 1.1s forwards;
}

/* Buttons — refined CTA system */
.ct-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: all 280ms var(--ease);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}
.ct-btn__arrow {
  display: inline-block;
  transition: transform 280ms var(--ease);
}
.ct-btn:hover .ct-btn__arrow { transform: translateX(4px); }

.ct-btn--primary {
  background: linear-gradient(135deg, var(--ct-gold-2) 0%, var(--ct-gold) 100%);
  color: #0a0e14;
  box-shadow:
    0 0 0 1px rgba(201,169,97,0.4),
    0 12px 32px -10px rgba(201,169,97,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.ct-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease);
}
.ct-btn--primary:hover::before { transform: translateX(100%); }
.ct-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(201,169,97,0.5),
    0 16px 40px -10px rgba(201,169,97,0.6),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.ct-btn--ghost {
  background: var(--ct-glass);
  color: var(--ct-text);
  border: 1px solid var(--ct-glass-edge);
  backdrop-filter: blur(12px);
}
.ct-btn--ghost:hover {
  background: var(--ct-glass-2);
  border-color: var(--ct-glass-edge-2);
  transform: translateY(-1px);
}

.ct-btn--lg {
  padding: 17px 32px;
  font-size: 15px;
}

/* Hero meta stats */
.ct-hero__meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 36px;
  border-top: 1px solid var(--ct-glass-edge);
  opacity: 0;
  transform: translateY(12px);
  animation: ct-rise 1s var(--ease) 1.3s forwards;
}
.ct-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 78px;
}
.ct-hero__meta-n {
  display: inline-block;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ct-text);
  line-height: 1.15;
  padding-right: 2px;
}
.ct-hero__meta-l {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ct-text-mute);
}

/* Hero preview — floating UI mockup */
.ct-hero__preview {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  animation: ct-rise-scale 1.6s var(--ease) 0.4s forwards;
}
@keyframes ct-rise-scale {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.ct-preview {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin-left: auto;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(20,25,40,0.65), rgba(10,14,22,0.85));
  border: 1px solid var(--ct-glass-edge);
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 60px 120px -30px rgba(0,0,0,0.8),
    0 30px 60px -20px rgba(201,169,97,0.15);
  overflow: hidden;
  isolation: isolate;
}
.ct-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(201,169,97,0.1), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.ct-preview__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(28,34,52,0.6), rgba(15,19,32,0.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  z-index: 1;
}
.ct-preview__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  box-shadow:
    inset 0 0 0 0.5px rgba(0,0,0,0.25),
    0 0 0 0.5px rgba(0,0,0,0.4);
}
.ct-preview__dot:nth-child(1) { background: #ff5f57; }
.ct-preview__dot:nth-child(2) { background: #febc2e; }
.ct-preview__dot:nth-child(3) { background: #28c840; }
.ct-preview__url {
  margin-left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ct-text-dim);
  letter-spacing: 0.04em;
}

.ct-preview__body {
  position: relative;
  z-index: 1;
  padding: 28px 26px 30px;
}

/* Career thesis report — premium preview */
.ct-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.ct-preview__heading {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ct-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ct-preview__pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ct-gold);
  background: var(--ct-gold-glow);
  border: 1px solid var(--ct-gold-dim);
  padding: 4px 10px;
  border-radius: 100px;
}

.ct-preview__archetype {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  background: linear-gradient(135deg, var(--ct-gold-2), var(--ct-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  padding-right: 3px;
}
.ct-preview__archetype-sub {
  font-size: 12px;
  color: var(--ct-text-mute);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.ct-preview__bars { display: flex; flex-direction: column; gap: 11px; }
.ct-preview__bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  gap: 14px;
  align-items: center;
}
.ct-preview__bar-label {
  font-size: 12px;
  color: var(--ct-text-dim);
  letter-spacing: -0.005em;
}
.ct-preview__bar-track {
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.ct-preview__bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ct-gold), var(--ct-gold-2));
  width: 0;
  box-shadow: 0 0 12px var(--ct-gold-glow);
  animation: ct-bar-fill 1.4s var(--ease) forwards;
  animation-delay: var(--d, 1.2s);
}
@keyframes ct-bar-fill { to { width: var(--w, 60%); } }
.ct-preview__bar-pct {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ct-text-dim);
  text-align: right;
}

/* Floating side cards */
.ct-preview-side {
  position: absolute;
  background: rgba(15,19,32,0.92);
  border: 1px solid var(--ct-glass-edge);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 28px 70px -20px rgba(0,0,0,0.75),
    0 12px 24px -8px rgba(201,169,97,0.18);
  z-index: 3;
}
/* Anchored ABOVE preview's top-left — does NOT overlap report content */
.ct-preview-side--tl {
  top: -88px;
  left: -16px;
  width: 188px;
  opacity: 0;
  animation: ct-side-in 1s var(--ease) 1.4s forwards, ct-float-1 6s ease-in-out 2s infinite;
}
/* Anchored BELOW preview's bottom-right — does NOT overlap report content */
.ct-preview-side--br {
  bottom: -88px;
  right: -16px;
  width: 208px;
  opacity: 0;
  animation: ct-side-in 1s var(--ease) 1.6s forwards, ct-float-2 7s ease-in-out 2.6s infinite;
}
@keyframes ct-side-in {
  from { opacity: 0; transform: translate(-12px, 0); }
  to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes ct-float-1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes ct-float-2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

.ct-preview-side__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin-bottom: 6px;
}
.ct-preview-side__val {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ct-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ct-preview-side__sub {
  font-size: 11px;
  color: var(--ct-text-mute);
  margin-top: 4px;
}

/* ── Sample-data indicators — elegant "this is an example" labels ── */
.ct-sample-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ct-text-mute);
  padding: 5px 11px 5px 9px;
  border-radius: 100px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}
.ct-sample-tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ct-gold);
  opacity: 0.7;
  box-shadow: 0 0 6px rgba(201,169,97,0.45);
}
.ct-sample-tag--inline {
  font-size: 9px;
  padding: 4px 9px 4px 8px;
  vertical-align: middle;
}

/* Hero scroll cue */
.ct-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ct-text-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: ct-rise 1.2s var(--ease) 1.8s forwards;
}
.ct-hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--ct-text-mute), transparent);
  position: relative;
  overflow: hidden;
}
.ct-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12px;
  background: linear-gradient(180deg, var(--ct-gold), transparent);
  animation: ct-scroll-trickle 2.2s ease-in-out infinite;
}
@keyframes ct-scroll-trickle {
  0%   { transform: translateY(-12px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   §2. PROBLEM — Why most CA students decide wrong
   ═══════════════════════════════════════════════════════════════════ */
.ct-problem {
  width: 100%;
  padding: 160px var(--ct-pad) 140px;
  position: relative;
  z-index: 2;
}

.ct-problem__intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 80px;
}
.ct-problem__intro .ct-h-display {
  font-size: clamp(36px, 4.8vw, 64px);
}

.ct-problem__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}

.ct-bias {
  position: relative;
  grid-column: span 2;
  padding: 28px 24px;
  background: var(--ct-glass);
  border: 1px solid var(--ct-glass-edge);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  transition: all 400ms var(--ease);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
}
.ct-bias.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--d, 0s);
}
.ct-bias:hover {
  background: var(--ct-glass-2);
  border-color: var(--ct-gold-dim);
  transform: translateY(-4px);
}
.ct-bias::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, var(--ct-gold-glow), transparent 50%);
  opacity: 0;
  transition: opacity 400ms var(--ease);
  pointer-events: none;
}
.ct-bias:hover::after { opacity: 1; }

.ct-bias__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,169,97,0.08);
  border: 1px solid var(--ct-gold-dim);
  border-radius: 10px;
  margin-bottom: 16px;
  color: var(--ct-gold);
}
.ct-bias__icon svg { width: 18px; height: 18px; }
.ct-bias__t {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.ct-bias__d {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ct-text-dim);
}

/* The consequence — full-width statement */
.ct-consequence {
  text-align: center;
  padding: 80px 40px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(199,84,80,0.04), rgba(199,84,80,0.01)),
    var(--ct-glass);
  border: 1px solid rgba(199,84,80,0.18);
  position: relative;
  overflow: hidden;
}
.ct-consequence::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(199,84,80,0.08), transparent 60%);
  pointer-events: none;
}
.ct-consequence__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ct-crimson);
  margin-bottom: 16px;
  position: relative;
}
.ct-consequence__q {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 880px;
  margin: 0 auto;
  color: var(--ct-text);
  position: relative;
}
.ct-consequence__q em {
  font-style: normal;
  color: var(--ct-crimson);
  background: linear-gradient(120deg, transparent 0%, rgba(199,84,80,0.18) 50%, transparent 100%);
  padding: 0 4px;
  border-radius: 3px;
}

/* The Answer transition */
.ct-answer {
  text-align: center;
  max-width: 720px;
  margin: 80px auto 0;
}
.ct-answer__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin-bottom: 18px;
}
.ct-answer__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ct-text-dim);
}
.ct-answer__text strong {
  font-weight: 400;
  color: var(--ct-text);
}

/* ═══════════════════════════════════════════════════════════════════
   §3. ASSESSMENT — Deep explainer
   ═══════════════════════════════════════════════════════════════════ */
.ct-assessment {
  width: 100%;
  padding: 140px var(--ct-pad) 160px;
  position: relative;
  z-index: 2;
}

.ct-assessment__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
}
.ct-assessment__head-r {
  padding-bottom: 12px;
}

/* Three-panel showcase */
.ct-assess-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.ct-assess-grid--lower {
  grid-template-columns: 1fr 1fr 1fr;
}

.ct-panel {
  position: relative;
  padding: 32px;
  background: var(--ct-glass);
  border: 1px solid var(--ct-glass-edge);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.ct-panel.in-view {
  opacity: 1;
  transform: translateY(0);
}
.ct-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 0% 0%, var(--ct-gold-glow), transparent 60%);
  pointer-events: none;
  opacity: 0.6;
  z-index: -1;
}

.ct-panel__label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin-bottom: 14px;
}
.ct-panel__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--ct-text);
}
.ct-panel__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ct-text-dim);
  max-width: 460px;
}

/* The animated assessment flow */
.ct-flow-viz {
  margin-top: 28px;
  position: relative;
  height: 220px;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--ct-glass-edge);
  padding: 24px;
  overflow: hidden;
}
.ct-flow-viz__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}
.ct-flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--ct-glass-edge);
  background: rgba(255,255,255,0.02);
  position: relative;
  transition: all 400ms var(--ease);
}
.ct-flow-step__n {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ct-gold);
  background: var(--ct-gold-glow);
  border: 1px solid var(--ct-gold-dim);
}
.ct-flow-step__l {
  font-size: 11px;
  color: var(--ct-text-dim);
  letter-spacing: -0.005em;
}
.ct-flow-arrow {
  width: 26px;
  flex-shrink: 0;
  position: relative;
}
.ct-flow-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ct-glass-edge-2);
}
.ct-flow-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ct-gold), var(--ct-gold-2));
  box-shadow: 0 0 8px var(--ct-gold-glow);
  animation: ct-flow-pulse 3.6s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ct-flow-pulse {
  0%   { width: 0; opacity: 0; }
  20%  { width: 100%; opacity: 1; }
  40%  { width: 100%; opacity: 1; }
  60%  { width: 100%; opacity: 0; }
  100% { width: 0; opacity: 0; }
}

/* Dimensions visualization — radar-style cluster */
.ct-dim-viz {
  margin-top: 28px;
  height: 220px;
  position: relative;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--ct-glass-edge);
  overflow: hidden;
}
.ct-dim-viz svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* Panels — lower trio */
.ct-mini-panel {
  padding: 28px;
  background: var(--ct-glass);
  border: 1px solid var(--ct-glass-edge);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(30px);
  transition: all 800ms var(--ease);
}
.ct-mini-panel.in-view { opacity: 1; transform: translateY(0); }
.ct-mini-panel__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  margin-bottom: 18px;
  background: var(--ct-gold-glow);
  border: 1px solid var(--ct-gold-dim);
  color: var(--ct-gold);
}
.ct-mini-panel__t {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ct-mini-panel__d {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ct-text-dim);
}

/* Assessment CTA banner */
.ct-assess-cta {
  margin-top: 56px;
  padding: 36px 40px;
  border-radius: 16px;
  border: 1px solid var(--ct-gold-dim);
  background:
    linear-gradient(135deg, rgba(201,169,97,0.10), rgba(201,169,97,0.02));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.ct-assess-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 100% at 100% 50%, rgba(201,169,97,0.08), transparent 60%);
  pointer-events: none;
}
.ct-assess-cta__t {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ct-text);
  position: relative;
}
.ct-assess-cta__s {
  font-size: 13px;
  color: var(--ct-text-dim);
  margin-top: 4px;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════
   §4. CAREER TOOLS — Each tool gets a moment
   ═══════════════════════════════════════════════════════════════════ */
.ct-tools {
  width: 100%;
  padding: 140px var(--ct-pad) 160px;
  position: relative;
  z-index: 2;
}

.ct-tools__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
}

.ct-tool-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 140px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.ct-tool-row.in-view { opacity: 1; transform: translateY(0); }
.ct-tool-row:nth-child(even) .ct-tool__copy { order: 2; }
.ct-tool-row:nth-child(even) .ct-tool__demo { order: 1; }
.ct-tool-row:last-child { margin-bottom: 0; }

.ct-tool__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ct-gold);
  margin-bottom: 14px;
}
.ct-tool__title {
  font-family: var(--serif);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.ct-tool__desc {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ct-text-dim);
  margin-bottom: 26px;
}
.ct-tool__list {
  list-style: none;
  margin-bottom: 30px;
}
.ct-tool__list li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 14px;
  color: var(--ct-text-dim);
  border-bottom: 1px solid var(--ct-glass-edge);
}
.ct-tool__list li:last-child { border-bottom: none; }
.ct-tool__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 14px; height: 1px;
  background: var(--ct-gold);
}
.ct-tool__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ct-gold);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: -0.005em;
}
.ct-tool__cta::after {
  content: "→";
  transition: transform 280ms var(--ease);
  display: inline-block;
}
.ct-tool__cta:hover::after { transform: translateX(5px); }

/* Tool demo windows */
.ct-tool__demo {
  position: relative;
}
.ct-demo {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(20,25,40,0.7), rgba(8,11,18,0.85));
  border: 1px solid var(--ct-glass-edge);
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 40px 80px -20px rgba(0,0,0,0.6);
  overflow: hidden;
  isolation: isolate;
  min-height: 340px;
}
.ct-demo__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(28,34,52,0.65), rgba(15,19,32,0.45));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
.ct-demo__bar > span:not(.ct-demo__bar-title) {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 0.5px rgba(0,0,0,0.25),
    0 0 0 0.5px rgba(0,0,0,0.4);
}
.ct-demo__bar > span:nth-child(1) { background: #ff5f57; }
.ct-demo__bar > span:nth-child(2) { background: #febc2e; }
.ct-demo__bar > span:nth-child(3) { background: #28c840; }
.ct-demo__bar-title {
  margin-left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ct-text-dim);
  letter-spacing: 0.05em;
  flex: 1;
}
.ct-demo__body { padding: 26px 24px 28px; }

/* — Resume Scorer demo — */
.ct-demo-scorer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.ct-score-ring {
  width: 120px; height: 120px;
  position: relative;
}
.ct-score-ring svg { transform: rotate(-90deg); }
.ct-score-ring circle { fill: none; stroke-width: 6; }
.ct-score-ring__bg { stroke: rgba(255,255,255,0.08); }
.ct-score-ring__fg {
  stroke: url(#scoreGrad);
  stroke-linecap: round;
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
  filter: drop-shadow(0 0 6px var(--ct-gold-glow));
}
.ct-score-ring.animate .ct-score-ring__fg {
  animation: ct-score-fill 1.6s var(--ease) forwards;
}
@keyframes ct-score-fill {
  to { stroke-dashoffset: calc(339.3 - 339.3 * var(--score, 0.74)); }
}
.ct-score-ring__val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  color: var(--ct-gold);
}
.ct-pillars { display: flex; flex-direction: column; gap: 10px; }
.ct-pillar {
  display: grid;
  grid-template-columns: 90px 1fr 30px;
  gap: 12px;
  align-items: center;
}
.ct-pillar__l {
  font-size: 11px;
  color: var(--ct-text-dim);
  letter-spacing: -0.005em;
}
.ct-pillar__t {
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.ct-pillar__f {
  height: 100%;
  background: linear-gradient(90deg, var(--ct-gold), var(--ct-gold-2));
  width: 0;
  border-radius: 3px;
  transition: width 1.4s var(--ease);
}
.ct-tool-row.in-view .ct-pillar__f { width: var(--w, 70%); }
.ct-pillar__n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ct-text-dim);
  text-align: right;
}

/* — Resume Builder demo — */
.ct-demo-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ct-builder-side {
  border: 1px solid var(--ct-glass-edge);
  border-radius: 10px;
  padding: 14px;
  background: rgba(0,0,0,0.2);
}
.ct-builder-side__head {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ct-text-mute);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.ct-build-field {
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  height: 28px;
  border-radius: 5px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.ct-build-field::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,169,97,0.18), transparent);
  animation: ct-shimmer 3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ct-shimmer {
  to { left: 100%; }
}
.ct-build-field--filled {
  background: linear-gradient(90deg, var(--ct-gold-glow), transparent);
  border-color: var(--ct-gold-dim);
}
.ct-build-line {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  margin-bottom: 6px;
}
.ct-build-line--gold { background: rgba(201,169,97,0.25); width: 60%; }
.ct-build-line--short { width: 70%; }
.ct-build-line--xshort { width: 45%; }

/* — Interview Simulator demo — */
.ct-demo-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 280px;
  overflow: hidden;
  padding-right: 4px;
}
.ct-chat-msg {
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 86%;
  opacity: 0;
  transform: translateY(8px);
  animation: ct-msg-in 0.6s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes ct-msg-in {
  to { opacity: 1; transform: translateY(0); }
}
.ct-chat-msg--q {
  align-self: flex-start;
  background: var(--ct-glass);
  border: 1px solid var(--ct-glass-edge);
  color: var(--ct-text);
  border-bottom-left-radius: 4px;
}
.ct-chat-msg--a {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(201,169,97,0.18), rgba(201,169,97,0.05));
  border: 1px solid var(--ct-gold-dim);
  color: var(--ct-text);
  border-bottom-right-radius: 4px;
}
.ct-chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 14px 18px;
  background: var(--ct-glass);
  border: 1px solid var(--ct-glass-edge);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}
.ct-chat-typing span {
  width: 5px; height: 5px;
  background: var(--ct-text-mute);
  border-radius: 50%;
  animation: ct-typing 1.4s ease-in-out infinite;
}
.ct-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.ct-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ct-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* — Roadmap demo — */
.ct-demo-roadmap {
  position: relative;
  padding-left: 24px;
}
.ct-rdm-step {
  position: relative;
  padding: 14px 0 14px 28px;
}
.ct-rdm-step::before {
  content: "";
  position: absolute;
  left: 0; top: 24px; bottom: -14px;
  width: 1px;
  background: var(--ct-glass-edge);
}
.ct-rdm-step:last-child::before { display: none; }
.ct-rdm-step::after {
  content: "";
  position: absolute;
  left: -5px; top: 18px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ct-noir-1);
  border: 2px solid var(--ct-glass-edge-2);
}
.ct-rdm-step--active::after {
  border-color: var(--ct-gold);
  box-shadow: 0 0 12px var(--ct-gold-glow);
  background: var(--ct-gold);
}
.ct-rdm-step__year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ct-text-mute);
  margin-bottom: 3px;
  text-transform: uppercase;
}
.ct-rdm-step--active .ct-rdm-step__year { color: var(--ct-gold); }
.ct-rdm-step__t {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ct-text);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.ct-rdm-step__d {
  font-size: 12px;
  color: var(--ct-text-mute);
}

/* — Domain Explorer demo — */
.ct-demo-domains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ct-dom-card {
  padding: 14px;
  border: 1px solid var(--ct-glass-edge);
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  transition: all 300ms var(--ease);
  cursor: pointer;
}
.ct-dom-card--featured {
  border-color: var(--ct-gold-dim);
  background: linear-gradient(135deg, rgba(201,169,97,0.10), rgba(201,169,97,0.02));
}
.ct-dom-card__t {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ct-text);
  margin-bottom: 8px;
}
.ct-dom-card__stat {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ct-text-mute);
  font-family: var(--mono);
  letter-spacing: 0.03em;
  padding: 3px 0;
  border-bottom: 1px dashed var(--ct-glass-edge);
}
.ct-dom-card__stat:last-child { border-bottom: none; }
.ct-dom-card__stat strong {
  color: var(--ct-text-dim);
  font-weight: 500;
}
.ct-dom-card--featured .ct-dom-card__stat strong { color: var(--ct-gold); }

/* ═══════════════════════════════════════════════════════════════════
   §5. KNOWLEDGE LIBRARY — Infinite vault
   ═══════════════════════════════════════════════════════════════════ */
.ct-library {
  padding: 160px 0 140px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.ct-library__head {
  max-width: 880px;
  margin: 0 auto 80px;
  text-align: center;
  padding: 0 var(--ct-pad);
}

.ct-library__marquee-wrap {
  position: relative;
  margin-bottom: 18px;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ct-library__marquee {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: ct-marquee 60s linear infinite;
  padding: 8px 0;
}
.ct-library__marquee--reverse {
  animation: ct-marquee-reverse 70s linear infinite;
}
@keyframes ct-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ct-marquee-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.ct-library__marquee-wrap:hover .ct-library__marquee {
  animation-play-state: paused;
}

.ct-domain {
  flex-shrink: 0;
  width: 320px;
  padding: 28px 26px;
  background: var(--ct-glass);
  border: 1px solid var(--ct-glass-edge);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  transition: all 350ms var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.ct-domain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ct-gold-glow), transparent 60%);
  opacity: 0;
  transition: opacity 350ms var(--ease);
}
.ct-domain:hover {
  background: var(--ct-glass-2);
  border-color: var(--ct-gold-dim);
  transform: translateY(-6px);
}
.ct-domain:hover::before { opacity: 1; }

.ct-domain__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ct-gold);
  margin-bottom: 10px;
  position: relative;
}
.ct-domain__t {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ct-text);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  position: relative;
}
.ct-domain__d {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ct-text-dim);
  position: relative;
  margin-bottom: 16px;
}
.ct-domain__tags {
  display: flex;
  gap: 6px;
  position: relative;
  flex-wrap: wrap;
}
.ct-domain__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ct-glass-edge);
  color: var(--ct-text-mute);
}

.ct-library__cta {
  text-align: center;
  margin-top: 60px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--ct-pad);
}
.ct-library__cta-t {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ct-text);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   §6. COMPANY INTELLIGENCE — Database explainer
   ═══════════════════════════════════════════════════════════════════ */
.ct-company {
  width: 100%;
  padding: 140px var(--ct-pad);
  position: relative;
  z-index: 2;
}

.ct-company__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.ct-company__copy { padding-right: 20px; }

.ct-company__filters {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--ct-glass-edge);
  border-radius: 12px;
  background: var(--ct-glass);
  backdrop-filter: blur(12px);
}
.ct-company__filters-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin-bottom: 14px;
}
.ct-company__filter-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ct-glass-edge);
}
.ct-company__filter-row:last-child { border-bottom: none; }
.ct-company__filter-l { color: var(--ct-text-dim); }
.ct-company__filter-v {
  color: var(--ct-text);
  font-family: var(--mono);
  font-size: 12px;
}

/* Company cards stack */
.ct-co-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ct-co-card {
  position: relative;
  padding: 20px 22px;
  background: linear-gradient(160deg, rgba(20,25,40,0.7), rgba(10,14,22,0.85));
  border: 1px solid var(--ct-glass-edge);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  transition: all 400ms var(--ease);
  opacity: 0;
  transform: translateY(20px) scale(0.98);
}
.ct-co-card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--d, 0s);
}
.ct-co-card:hover {
  border-color: var(--ct-gold-dim);
  transform: translateY(-2px);
}
.ct-co-card--featured {
  border-color: var(--ct-gold-dim);
  background: linear-gradient(160deg, rgba(201,169,97,0.10), rgba(201,169,97,0.02));
  box-shadow: 0 16px 40px -20px rgba(201,169,97,0.3);
}
.ct-co-card__logo {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--ct-gold-glow);
  border: 1px solid var(--ct-gold-dim);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ct-gold);
}
.ct-co-card__name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ct-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ct-co-card__meta {
  font-size: 11px;
  color: var(--ct-text-mute);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  display: flex;
  gap: 14px;
}
.ct-co-card__meta span { display: flex; align-items: center; gap: 6px; }
.ct-co-card__meta span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ct-text-mute);
}
.ct-co-card__fit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ct-co-card__fit-n {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ct-gold);
  font-weight: 500;
}
.ct-co-card__fit-l {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--ct-text-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ct-co-counter {
  margin-top: 22px;
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed var(--ct-glass-edge-2);
  text-align: center;
  background: rgba(0,0,0,0.15);
}
.ct-co-counter__n {
  display: inline-block;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  background: linear-gradient(135deg, var(--ct-gold-2), var(--ct-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding: 0 4px 2px;
}
.ct-co-counter__l {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ct-text-mute);
}

/* ═══════════════════════════════════════════════════════════════════
   §7. CAREER THESIS REPORT — The output
   ═══════════════════════════════════════════════════════════════════ */
.ct-thesis {
  width: 100%;
  padding: 140px var(--ct-pad) 160px;
  position: relative;
  z-index: 2;
}
.ct-thesis__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.ct-report {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,25,40,0.6), rgba(10,14,22,0.9));
  border: 1px solid var(--ct-glass-edge);
  backdrop-filter: blur(20px);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.7),
    0 30px 60px -20px rgba(201,169,97,0.1);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.ct-report.in-view { opacity: 1; transform: translateY(0); }
.ct-report::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 50% 0%, var(--ct-gold-glow), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.ct-report__header {
  position: relative;
  z-index: 1;
  padding: 36px 44px 28px;
  border-bottom: 1px solid var(--ct-glass-edge);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.ct-report__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ct-text-mute);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ct-report__arch {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--ct-gold-2), var(--ct-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 4px;
}
.ct-report__date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ct-text-mute);
  text-align: right;
  line-height: 1.5;
}

.ct-report__body {
  position: relative;
  z-index: 1;
  padding: 36px 44px 44px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
}

.ct-report__col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin-bottom: 18px;
}

.ct-report__bars { display: flex; flex-direction: column; gap: 14px; }
.ct-report__bar {
  display: grid;
  grid-template-columns: 1fr 50px;
  align-items: center;
  gap: 14px;
}
.ct-report__bar-l {
  font-size: 13px;
  color: var(--ct-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ct-report__bar-l-track {
  flex: 1;
  margin: 0 14px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ct-report__bar-l-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ct-gold), var(--ct-gold-2));
  border-radius: 4px;
  width: 0;
  box-shadow: 0 0 12px var(--ct-gold-glow);
}
.ct-report.in-view .ct-report__bar-l-fill {
  animation: ct-bar-grow 1.6s var(--ease) forwards;
  animation-delay: var(--d, 0.4s);
}
@keyframes ct-bar-grow { to { width: var(--w, 60%); } }
.ct-report__bar-pct {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ct-gold);
  text-align: right;
}

.ct-report__insights {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ct-report__insight {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--ct-glass-edge);
  background: var(--ct-glass);
  position: relative;
  padding-left: 38px;
}
.ct-report__insight-icon {
  position: absolute;
  left: 14px; top: 16px;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--ct-gold);
}
.ct-report__insight-t {
  font-size: 12px;
  font-weight: 500;
  color: var(--ct-text);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.ct-report__insight-d {
  font-size: 12px;
  color: var(--ct-text-dim);
  line-height: 1.5;
}

.ct-report__footer {
  position: relative;
  z-index: 1;
  padding: 22px 44px;
  border-top: 1px solid var(--ct-glass-edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.2);
  flex-wrap: wrap;
  gap: 16px;
}
.ct-report__footer-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ct-text-mute);
  text-transform: uppercase;
}
.ct-report__footer-l strong { color: var(--ct-gold); }

/* ═══════════════════════════════════════════════════════════════════
   §8. ECOSYSTEM — The flow visualization
   ═══════════════════════════════════════════════════════════════════ */
.ct-eco {
  width: 100%;
  padding: 160px var(--ct-pad);
  position: relative;
  z-index: 2;
}
.ct-eco__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}

.ct-eco__viz {
  position: relative;
  padding: 60px 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: stretch;
}
.ct-eco-node {
  position: relative;
  padding: 26px 18px;
  border-radius: 14px;
  background: var(--ct-glass);
  border: 1px solid var(--ct-glass-edge);
  backdrop-filter: blur(14px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  transition: all 400ms var(--ease);
  opacity: 0;
  transform: translateY(20px);
}
.ct-eco-node.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--d, 0s);
}
.ct-eco-node:hover {
  border-color: var(--ct-gold-dim);
  background: var(--ct-glass-2);
  transform: translateY(-4px);
}
.ct-eco-node__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ct-gold-glow);
  border: 1px solid var(--ct-gold-dim);
  display: grid; place-items: center;
  color: var(--ct-gold);
}
.ct-eco-node__t {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ct-text);
}
.ct-eco-node__d {
  font-size: 11px;
  color: var(--ct-text-mute);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Connecting lines */
.ct-eco__connect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* ═══════════════════════════════════════════════════════════════════
   §9. CLOSING — Final CTA
   ═══════════════════════════════════════════════════════════════════ */
.ct-close {
  width: 100%;
  padding: 180px var(--ct-pad) 200px;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.ct-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 75% at 50% 50%, var(--ct-gold-glow), transparent 80%);
  z-index: -1;
}
.ct-close__inner {
  max-width: 820px;
  margin: 0 auto;
}
.ct-close__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ct-gold);
  margin-bottom: 28px;
}
.ct-close__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 26px;
}
.ct-close__title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--ct-gold-2), var(--ct-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ct-close__sub {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--ct-text-dim);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto 48px;
}
.ct-close__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.ct-close__note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ct-text-mute);
  text-transform: uppercase;
}
.ct-close__note span { color: var(--ct-gold); }

/* ═══════════════════════════════════════════════════════════════════
   §10. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .ct-hero {
    grid-template-columns: 1fr;
    gap: 60px;
    padding-top: 120px;
  }
  .ct-preview { margin: 0 auto; }
  .ct-preview-side--tl { left: -8px; top: -50px; width: 170px; }
  .ct-preview-side--br { right: -8px; bottom: -50px; width: 188px; }
  .ct-problem__grid { grid-template-columns: repeat(2, 1fr); }
  .ct-bias { grid-column: span 1; }
  .ct-assessment__head { grid-template-columns: 1fr; gap: 28px; }
  .ct-assess-grid, .ct-assess-grid--lower { grid-template-columns: 1fr; }
  .ct-tool-row { grid-template-columns: 1fr; gap: 40px; }
  .ct-tool-row:nth-child(even) .ct-tool__copy { order: 0; }
  .ct-tool-row:nth-child(even) .ct-tool__demo { order: 0; }
  .ct-company__layout { grid-template-columns: 1fr; gap: 50px; }
  .ct-company__copy { padding-right: 0; }
  .ct-eco__viz { grid-template-columns: repeat(2, 1fr); }
  .ct-report__body { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 720px) {
  .ct-section, .ct-hero, .ct-problem, .ct-assessment, .ct-tools, .ct-company, .ct-thesis, .ct-eco, .ct-close { padding-left: 20px; padding-right: 20px; }
  .ct-hero { padding-top: 100px; }
  .ct-hero__meta { gap: 32px; }
  .ct-hero__meta-n { font-size: 26px; }
  .ct-problem__grid { grid-template-columns: 1fr; }
  .ct-preview-side { display: none; }
  .ct-report__header { padding: 24px; }
  .ct-report__body { padding: 24px; }
  .ct-report__footer { padding: 20px 24px; }
  .ct-assess-cta { padding: 24px; flex-direction: column; align-items: flex-start; }
  .ct-eco__viz { grid-template-columns: 1fr; }
  .ct-domain { width: 270px; }
}
/* ───────────────────────────────────────────────────────────────────
   Reduced motion
   ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ct-orb,
  .ct-library__marquee,
  .ct-preview-side--tl,
  .ct-preview-side--br,
  .ct-build-field::before,
  .ct-flow-arrow::after { animation: none !important; }
  .ct-orb { opacity: 0.3; }
  .ct-preview-side { opacity: 1 !important; transform: none !important; }
}