/* ==========================================================================
   Codenzo — Hero v2: WebGL node-lattice + glass terminal + orb ambience
   Sleek/premium direction. One flagship 3D moment; everything around it
   stays quiet and precise.
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--sp-10) 0 var(--sp-9);
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
.hero .orb-a { width: 480px; height: 480px; top: -180px; left: -160px; background: radial-gradient(circle, rgba(124,92,255,0.22), transparent 70%); }
.hero .orb-b { width: 420px; height: 420px; bottom: -200px; right: -120px; background: radial-gradient(circle, rgba(61,219,217,0.16), transparent 70%); animation-delay: -6s; }

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); align-items: center;
  width: 100%;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--cyan); font-weight: 500;
  padding: 6px 14px; border: 1px solid var(--cyan-dim); border-radius: var(--r-pill);
  background: rgba(61,219,217,0.06); margin-bottom: var(--sp-5);
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-ok); animation: pulse-dot 2s ease infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero h1 {
  font-size: clamp(2.75rem, 5.4vw, 5.75rem);
  letter-spacing: -0.035em; max-width: 13ch; line-height: 1.04;
}

.hero p.lede {
  font-size: var(--fs-md); color: var(--text-secondary); max-width: 46ch;
  margin: var(--sp-5) 0 var(--sp-6);
}
.hero-cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-7); }

.hero-stats { display: flex; gap: var(--sp-7); }
.hero-stat .num { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--text-primary); }
.hero-stat .label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ---- WebGL mount ----------------------------------------------------------- */
.hero-scene-wrap {
  position: relative;
  height: 560px;
}
#webgl-hero {
  width: 100%; height: 100%;
  cursor: grab;
}
#webgl-hero canvas { display: block; }

/* ---- Glass terminal ticker, floating over the scene ------------------------ */
.hero-terminal {
  position: absolute; bottom: 12px; right: 4px; width: 290px;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  box-shadow: var(--shadow-pop);
  z-index: 3;
}
.hero-terminal .term-dots { display: flex; gap: 5px; margin-bottom: var(--sp-2); }
.hero-terminal .term-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.hero-terminal .term-line { white-space: nowrap; overflow: hidden; opacity: 0; animation: term-line-in 500ms var(--ease-out) forwards; }
.hero-terminal .term-line:nth-child(2) { animation-delay: 200ms; }
.hero-terminal .term-line:nth-child(3) { animation-delay: 500ms; }
.hero-terminal .term-line:nth-child(4) { animation-delay: 900ms; }
@keyframes term-line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.hero-terminal .term-line .ok { color: var(--green-ok); }
.hero-terminal .term-line .path { color: var(--cyan); }
.hero-terminal .term-cursor { display: inline-block; width: 6px; height: 12px; background: var(--violet-bright); vertical-align: middle; animation: term-blink 1s step-end infinite; }
@keyframes term-blink { 50% { opacity: 0; } }

@media (max-width: 980px) {
  .hero { min-height: auto; padding-top: var(--sp-8); }
  .hero-scene-wrap { height: 360px; }
  .hero-terminal { position: static; width: 100%; margin-top: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-terminal .term-line { opacity: 1; animation: none; }
}