/* ============================================================
   CTAI HOMEPAGE HERO — option-2 rebuild (ported to live)
   Single source of truth for the hero. Scoped under .hero-v4.
   Nav styles (.nav.nav-ds) preserved from previous hero.css.
   ============================================================ */

:root {
  --ds-yellow: var(--ctai-yellow);
  --ds-red: var(--ctai-red);
  --ds-bg: var(--ctai-black);
  --ds-bg-deep: var(--ctai-black);
  --ds-surface: var(--ctai-charcoal-2);
  --ds-text: var(--ctai-white);
  --ds-text-2: #E3E3E3;
  --ds-muted: var(--ctai-grey-light);
  --ds-black: var(--ctai-black);
  --font-micro: var(--font-mono);
  --font-script: 'Segoe Script', 'Snell Roundhand', 'Bradley Hand', cursive;
  --hero-max: 1600px;
  --hero-gutter: 40px;
  --nav-h: 64px;
  --hero-strip-h: 158px;
  --hero-hair: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   NAV (preserved)
   ============================================================ */
.nav.nav-ds { background: rgba(10, 10, 10, 0.92); border-bottom: none; backdrop-filter: blur(16px); }
.nav.nav-ds .nav-inner { max-width: var(--hero-max); padding: 0 var(--hero-gutter); }
.nav.nav-ds .nav-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ds-text); }
.nav.nav-ds .nav-logo-mark { position: relative; display: inline-block; padding: 6px 10px; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; letter-spacing: -0.03em; line-height: 1; color: var(--ds-text); background: transparent; border-radius: 0; }
.nav.nav-ds .nav-logo-mark::before,
.nav.nav-ds .nav-logo-mark::after { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; }
.nav.nav-ds .nav-logo-mark::before { top: 0; left: 0; border-top: 2px solid var(--ds-yellow); border-left: 2px solid var(--ds-yellow); }
.nav.nav-ds .nav-logo-mark::after { right: 0; bottom: 0; border-right: 2px solid var(--ds-yellow); border-bottom: 2px solid var(--ds-yellow); }
.nav.nav-ds .nav-logo-tag { display: none; font-family: var(--font-micro); font-weight: 700; font-size: 9px; letter-spacing: 0.45px; text-transform: uppercase; color: var(--ds-muted); }
@media (min-width: 900px) { .nav.nav-ds .nav-logo-tag { display: inline; } }
.nav.nav-ds .nav-links a { font-family: var(--font-micro); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 244, 244, 0.72); }
.nav.nav-ds .nav-links a:hover,
.nav.nav-ds .nav-links a.nav-link--active { color: var(--ds-yellow); }
.nav.nav-ds .nav-ds-cta,
.nav.nav-ds .btn-primary { font-family: var(--font-micro); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-yellow) !important; background: transparent !important; border: 2px solid var(--ds-yellow) !important; border-radius: 0 !important; padding: 10px 14px; box-shadow: none !important; }
.nav.nav-ds .nav-ds-cta:hover,
.nav.nav-ds .btn-primary:hover { background: var(--ds-yellow) !important; color: var(--ds-black) !important; }
.nav.nav-ds .nav-logo-icon { display: none; }

/* ============================================================
   HERO CONTAINER
   ============================================================ */
.hero-v4.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: var(--nav-h);
  padding: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  border-bottom: none;
  display: block;
  height: calc(100vh - var(--nav-h));
  min-height: 820px;
}
.hero-v4.hero::before,
.hero-v4.hero::after { content: none !important; display: none !important; }

/* texture layers */
.hero-v4 .hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 32% 44%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 60% 60% at 32% 44%, #000 18%, transparent 76%);
}
.hero-v4 .hero-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.hero-v4 .hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 68% at 30% 44%, transparent 26%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 12%, transparent 74%, rgba(0,0,0,.5) 100%);
}
.hero-v4 .hero-ghost {
  position: absolute; right: 1.5%; top: 38%; transform: translateY(-50%); z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(9rem, 20vw, 17rem); line-height: .75; letter-spacing: -.07em; text-transform: uppercase; color: rgba(255,255,255,.02); white-space: nowrap; user-select: none;
}

/* outer frame brackets */
.hero-v4 .hero-frame { position: absolute; z-index: 6; width: 24px; height: 24px; pointer-events: none; }
.hero-v4 .hero-frame-tl { top: 20px; left: 22px; border-top: 2px solid rgba(var(--ctai-yellow-rgb),.26); border-left: 2px solid rgba(var(--ctai-yellow-rgb),.26); }
.hero-v4 .hero-frame-tr { top: 20px; right: 22px; border-top: 2px solid rgba(var(--ctai-yellow-rgb),.26); border-right: 2px solid rgba(var(--ctai-yellow-rgb),.26); }
.hero-v4 .hero-frame-br { bottom: calc(var(--hero-strip-h) + 20px); right: 22px; border-bottom: 2px solid rgba(var(--ctai-yellow-rgb),.26); border-right: 2px solid rgba(var(--ctai-yellow-rgb),.26); }

/* left rail: hazard + serial */
.hero-v4 .hero-hazard { position: absolute; z-index: 5; left: 3.4%; top: 13%; width: 8px; height: 96px; background: repeating-linear-gradient(45deg, var(--ds-yellow) 0 8px, var(--ctai-black) 8px 16px); opacity: .9; }
.hero-v4 .hero-serial { position: absolute; z-index: 5; left: 3%; top: 28%; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-micro); font-weight: 500; font-size: 9px; letter-spacing: .32em; color: rgba(244,244,244,.16); }

/* status labels down the left */
.hero-v4 .hero-labels { position: absolute; z-index: 5; left: 8.5%; top: 29%; display: flex; flex-direction: column; gap: 52px; }
.hero-v4 .hero-lab-k { display: block; font-family: var(--font-micro); font-weight: 700; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(138,138,138,.85); }
.hero-v4 .hero-lab-v { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-family: var(--font-micro); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-text-2); }
.hero-v4 .hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-yellow); box-shadow: 0 0 8px var(--ds-yellow); animation: heroPulse 1.6s infinite; }
@keyframes heroPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* operator block bottom-left */
.hero-v4 .hero-operator { position: absolute; z-index: 5; left: 8.5%; bottom: calc(var(--hero-strip-h) + 40px); padding-left: 14px; }
.hero-v4 .hero-operator::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: var(--ds-yellow); }
.hero-v4 .hero-op-role { display: block; font-family: var(--font-micro); font-weight: 700; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ds-muted); }
.hero-v4 .hero-op-name { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: -.03em; text-transform: uppercase; color: var(--ds-yellow); line-height: 1.15; margin: 3px 0; }
.hero-v4 .hero-op-founder { display: block; font-family: var(--font-micro); font-weight: 500; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ds-muted); }

/* woody + hud */
.hero-v4 .hero-woody-zone { position: absolute; z-index: 2; left: 30%; bottom: var(--hero-strip-h); transform: translateX(-50%); height: calc(100% - var(--hero-strip-h) - 24px); width: 52%; }
.hero-v4 .hero-hud { position: absolute; left: 52%; top: 38%; transform: translate(-50%, -50%); width: min(60vh, 640px); height: min(60vh, 640px); z-index: 1; pointer-events: none; }
.hero-v4 .hero-hud svg { width: 100%; height: 100%; display: block; }
.hero-v4 .hero-crosshair { display: none; }
.hero-v4 .hero-woody-glow { position: absolute; left: 52%; top: 44%; transform: translate(-50%, -50%); width: 74%; height: 80%; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(var(--ctai-yellow-rgb),.09) 0%, rgba(255,255,255,.035) 34%, transparent 66%); filter: blur(8px); }
.hero-v4 .hero-woody-link { position: absolute; inset: 0; z-index: 2; display: block; }
.hero-v4 .hero-woody-img {
  position: absolute; left: 52%; bottom: 0; transform: translateX(-50%);
  height: 100%; width: auto; max-width: 130%; z-index: 2;
  object-fit: contain; object-position: center bottom;
  filter: grayscale(1) contrast(1.05) brightness(.98);
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

/* copy */
.hero-v4 .hero-copy { position: absolute; z-index: 4; left: 52%; top: calc((100% - var(--hero-strip-h)) / 2 + 8px); transform: translateY(-50%); width: 42%; }
.hero-v4 .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-family: var(--font-micro); font-weight: 700; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ds-yellow); }
.hero-v4 .hero-eyebrow-mark { position: relative; width: 18px; height: 10px; flex-shrink: 0; }
.hero-v4 .hero-eyebrow-mark::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 2px solid var(--ds-yellow); border-left: 2px solid var(--ds-yellow); }
.hero-v4 .hero-title { margin: 0 0 26px; font-family: var(--font-display); font-weight: 900; font-size: clamp(4.4rem, 6.2vw, 6.4rem); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; color: var(--ds-text); }
.hero-v4 .hero-title-line { display: block; }
.hero-v4 .hero-title-accent { color: var(--ds-yellow); }
.hero-v4 .hero-lede { margin: 0 0 32px; max-width: 33rem; font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.65; color: var(--ds-text-2); }
.hero-v4 .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-v4 .hero-btn { display: inline-flex; align-items: center; gap: .55em; padding: 16px 24px; font-family: var(--font-display); font-weight: 900; font-size: .85rem; letter-spacing: -.02em; text-transform: uppercase; text-decoration: none; border-radius: 0; transition: background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; }
.hero-v4 .hero-btn-primary { background: var(--ds-yellow); color: var(--ds-black); border: 2px solid var(--ds-yellow); }
.hero-v4 .hero-btn-primary:hover { background: transparent; color: var(--ds-yellow); }
.hero-v4 .hero-btn-secondary { background: transparent; color: var(--ds-text); border: 2px solid rgba(244,244,244,.4); }
.hero-v4 .hero-btn-secondary:hover { border-color: var(--ds-text); background: rgba(255,255,255,.04); }

/* right edge */
.hero-v4 .hero-redge { position: absolute; z-index: 5; right: 1.6%; top: 16%; bottom: calc(var(--hero-strip-h) + 66px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; pointer-events: none; }
.hero-v4 .hero-redge span { writing-mode: vertical-rl; font-family: var(--font-micro); font-weight: 500; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: rgba(244,244,244,.2); }

/* bottom strip */
.hero-v4 .hero-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: var(--hero-strip-h); max-width: var(--hero-max); margin: 0 auto; padding: 0 var(--hero-gutter); }
.hero-v4 .hero-strip-inner { position: relative; height: 100%; display: flex; align-items: center; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.hero-v4 .hero-strip-inner::before { content: ''; position: absolute; top: -1px; left: 0; width: 22px; height: 22px; border-top: 2px solid var(--ds-yellow); border-left: 2px solid var(--ds-yellow); }
.hero-v4 .hero-sig { flex: 0 0 auto; width: 210px; padding-right: 26px; border-right: 1px solid var(--hero-hair); text-align: left; }
.hero-v4 .hero-sig-name { font-family: var(--font-script); font-size: 2.6rem; color: rgba(244,244,244,.72); line-height: .8; }
.hero-v4 .hero-sig-cap { font-family: var(--font-micro); font-weight: 700; font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ds-muted); margin-top: 10px; }
.hero-v4 .hero-phaserow { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-v4 .hero-phase { display: flex; align-items: flex-start; gap: 14px; padding: 0 26px; border-right: 1px solid var(--hero-hair); }
.hero-v4 .hero-phase:last-child { border-right: 0; }
.hero-v4 .hero-phase-num { font-family: var(--font-stencil); font-size: 2rem; line-height: .9; color: var(--ds-yellow); flex-shrink: 0; }
.hero-v4 .hero-phase-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; font-size: .95rem; line-height: 1.15; letter-spacing: -.02em; text-transform: uppercase; color: var(--ds-text); }
.hero-v4 .hero-phase-desc { margin: 0; font-family: var(--font-body); font-size: .78rem; line-height: 1.4; color: var(--ds-muted); }
.hero-v4 .hero-hatch { position: absolute; right: 0; bottom: 14px; width: 54px; height: 22px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 3px, transparent 3px 7px); }
.hero-v4 .hero-hatch::after { content: ''; position: absolute; right: -2px; bottom: -6px; width: 18px; height: 18px; border-right: 2px solid var(--ds-yellow); border-bottom: 2px solid var(--ds-yellow); }

/* ============================================================
   RESPONSIVE — stack under 1000px
   ============================================================ */
@media (max-width: 1000px) {
  .hero-v4.hero { height: auto; min-height: 0; padding-bottom: 20px; }
  .hero-v4 .hero-frame,
  .hero-v4 .hero-redge,
  .hero-v4 .hero-hazard,
  .hero-v4 .hero-serial,
  .hero-v4 .hero-crosshair { display: none; }
  .hero-v4 .hero-woody-zone { position: relative; left: auto; transform: none; width: 100%; height: 380px; bottom: auto; margin-top: 16px; }
  .hero-v4 .hero-woody-img { left: 50%; height: 100%; }
  .hero-v4 .hero-hud { left: 50%; }
  .hero-v4 .hero-labels { position: static; flex-direction: row; flex-wrap: wrap; gap: 20px; padding: 16px var(--hero-gutter) 0; }
  .hero-v4 .hero-operator { position: static; margin: 12px var(--hero-gutter); }
  .hero-v4 .hero-copy { position: static; transform: none; width: auto; padding: 20px var(--hero-gutter) 30px; }
  .hero-v4 .hero-strip { position: relative; height: auto; }
  .hero-v4 .hero-strip-inner { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 0; }
  .hero-v4 .hero-sig { display: none; }
  .hero-v4 .hero-phaserow { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .hero-v4 .hero-phase:nth-child(2) { border-right: 0; }
  .hero-v4 .hero-title { font-size: clamp(3rem, 12vw, 4.4rem); }
}