/* ════════════════════════════════════════
   TOKENS & RESET
════════════════════════════════════════ */
    :root {
      --ink: #0c0e14;
      --ink2: #141720;
      --ink3: #1c2030;
      --border: #252a3a;
      --border2: #2e3550;
      --fg: #d4daf0;
      --fg-dim: #6e7a9a;
      --fg-muted: #3a4260;
      --cream: #f5f0e8;
      --cream-dim: #c8c0b0;
      --green: #3de87a;
      --green-dim: #0e3020;
      --blue: #38b4f5;
      --blue-dim: #0a2540;
      --purple: #9d70f0;
      --purple-dim: #1e1040;
      --cyan: #38e8d8;
      --yellow: #f0c040;
      --red: #f05040;
      --orange: #f09040;
      --serif: 'DM Serif Display', Georgia, serif;
      --sans: 'DM Sans', system-ui, sans-serif;
      --mono: 'JetBrains Mono', monospace;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--ink);
      color: var(--fg);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ════════════════════════════════════════
   NOISE TEXTURE OVERLAY
════════════════════════════════════════ */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 200px 200px;
      pointer-events: none;
    }

    /* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      padding: 0 40px;
      height: 60px;
      background: rgba(12, 14, 20, .85);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .nav-logo,
    .brand-logo {
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .5px;
      color: var(--fg);
    }

    .nav-logo span,
    .brand-logo span {
      color: var(--green);
    }

    .nav-links {
      display: flex;
      gap: 32px;
      margin-left: 48px;
    }

    .nav-links a {
      font-size: 13px;
      color: var(--fg-dim);
      text-decoration: none;
      letter-spacing: .3px;
      transition: color .15s;
    }

    .nav-links a:hover {
      color: var(--fg);
    }

    .nav-right {
      margin-left: auto;
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .lang-selector {
      font-family: var(--mono);
      font-size: 10px;
      padding: 3px 10px;
      border-radius: 4px;
      background: var(--green-dim);
      color: var(--green);
      letter-spacing: 1px;
      border: 1px solid rgba(61, 232, 122, .2);
      cursor: pointer;
      transition: all .2s;
    }

    .lang-selector:hover {
      background: var(--green);
      color: var(--ink);
    }

    .lang-menu {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--ink2);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      z-index: 1000;
      min-width: 100px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    }

    .lang-item {
      padding: 8px 12px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--fg-dim);
      cursor: pointer;
      transition: all .15s;
      border-bottom: 1px solid var(--border);
    }

    .lang-item:last-child {
      border-bottom: none;
    }

    .lang-item:hover {
      background: var(--border);
      color: var(--fg);
    }

    .lang-item.active {
      background: var(--green-dim);
      color: var(--green);
    }

    .nav-cta {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
      padding: 7px 18px;
      border-radius: 5px;
      background: var(--green);
      color: var(--ink);
      text-decoration: none;
      letter-spacing: .3px;
      transition: opacity .15s;
    }

    .nav-cta:hover {
      opacity: .85;
    }

    /* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 120px 40px 80px;
      position: relative;
      text-align: center;
      overflow: hidden;
    }

    /* Radial glow background */
    .hero::after {
      content: '';
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 500px;
      background: radial-gradient(ellipse at center,
          rgba(61, 232, 122, .07) 0%,
          rgba(56, 180, 245, .05) 40%,
          transparent 70%);
      pointer-events: none;
    }

    /* Grid lines */
    .hero-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 1200px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 32px;
      animation: fade-up .8s ease both;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
      content: '';
      display: block;
      height: 1px;
      width: 40px;
      background: var(--green);
      opacity: .5;
    }

    .hero-title {
      font-family: var(--serif);
      font-size: clamp(52px, 7vw, 88px);
      line-height: 1.05;
      letter-spacing: -1px;
      color: var(--cream);
      margin-bottom: 28px;
      animation: fade-up .8s ease .1s both;
    }

    .hero-title em {
      font-style: italic;
      color: var(--green);
    }

    .hero-title .line2 {
      color: var(--fg-dim);
    }

    .hero-sub {
      font-size: 18px;
      line-height: 1.7;
      color: var(--fg-dim);
      max-width: 680px;
      margin: 0 auto 48px;
      animation: fade-up .8s ease .2s both;
    }


    .hero-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      animation: fade-up .8s ease .3s both;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      padding: 14px 28px;
      border-radius: 6px;
      background: var(--green);
      color: var(--ink);
      text-decoration: none;
      letter-spacing: .3px;
      transition: all .2s;
    }

    .btn-primary:hover {
      background: #5fffaa;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(61, 232, 122, .25);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 500;
      padding: 14px 28px;
      border-radius: 6px;
      background: transparent;
      color: var(--fg-dim);
      border: 1px solid var(--border2);
      text-decoration: none;
      transition: all .2s;
    }

    .btn-secondary:hover {
      border-color: var(--fg-dim);
      color: var(--fg);
    }

    /* Hero Terminal */
    .hero-terminal {
      max-width: 760px;
      width: 100%;
      margin: 72px auto 0;
      animation: fade-up .8s ease .4s both;
      position: relative;
      z-index: 1;
    }

    /* ════════════════════════════════════════
   TERMINAL COMPONENT (shared)
════════════════════════════════════════ */
    .terminal {
      background: var(--ink2);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
    }

    .terminal.glow-green {
      box-shadow: 0 32px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(61, 232, 122, .08), 0 0 0 1px rgba(61, 232, 122, .1);
    }

    .terminal.glow-blue {
      box-shadow: 0 32px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(56, 180, 245, .08), 0 0 0 1px rgba(56, 180, 245, .1);
    }

    .terminal.glow-purple {
      box-shadow: 0 32px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(157, 112, 240, .1), 0 0 0 1px rgba(157, 112, 240, .15);
    }

    .term-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: rgba(255, 255, 255, .03);
      border-bottom: 1px solid var(--border);
    }

    .tdots {
      display: flex;
      gap: 6px;
    }

    .tdot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .td-r {
      background: #ff5f57;
    }

    .td-y {
      background: #febc2e;
    }

    .td-g {
      background: #28c840;
    }

    .term-bar-title {
      flex: 1;
      text-align: center;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--fg-muted);
      letter-spacing: .5px;
    }

    .term-bar-badge {
      font-family: var(--mono);
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 4px;
      letter-spacing: 1px;
    }

    .badge-vc {
      background: var(--green-dim);
      color: var(--green);
      border: 1px solid rgba(61, 232, 122, .2);
    }

    .badge-vv {
      background: var(--blue-dim);
      color: var(--blue);
      border: 1px solid rgba(56, 180, 245, .2);
    }

    .badge-core {
      background: var(--purple-dim);
      color: var(--purple);
      border: 1px solid rgba(157, 112, 240, .2);
    }

    .badge-agent {
      background: #1a0e40;
      color: var(--purple);
      border: 1px solid rgba(157, 112, 240, .3);
    }

    .term-body {
      padding: 20px 22px 24px;
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.8;
    }

    /* CLI colors */
    .tl {
      display: flex;
      align-items: flex-start;
    }

    .pr {
      white-space: nowrap;
      margin-right: 10px;
      font-weight: 600;
      flex-shrink: 0;
      font-size: 12px;
    }

    .pr-vc {
      color: var(--green);
    }

    .pr-vv {
      color: var(--blue);
    }

    .kw {
      color: var(--yellow);
    }

    .fl {
      color: var(--purple);
    }

    .val {
      color: var(--cyan);
    }

    .str {
      color: var(--orange);
    }

    .gc {
      color: var(--green);
    }

    .bc {
      color: var(--blue);
    }

    .rc {
      color: var(--red);
    }

    .pc {
      color: var(--purple);
    }

    .cc {
      color: var(--cyan);
    }

    .dim {
      color: var(--fg-dim);
    }

    .mut {
      color: var(--fg-muted);
    }

    .sp {
      height: 6px;
    }

    .sp2 {
      height: 12px;
    }

    .ind {
      padding-left: 18px;
    }

    .cursor {
      display: inline-block;
      width: 8px;
      height: 14px;
      background: var(--fg);
      vertical-align: middle;
      margin-left: 2px;
      animation: blink .9s step-end infinite;
    }

    .cursor-green {
      background: var(--green);
    }

    .cursor-blue {
      background: var(--blue);
    }

    .cursor-pur {
      background: var(--purple);
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0
      }
    }

    .divl {
      height: 1px;
      background: var(--border);
      margin: 12px 0;
    }

    .note {
      color: var(--fg-muted);
      font-size: 11px;
    }

    .tag-inline {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 3px;
      vertical-align: middle;
      margin-left: 6px;
    }

    .ti-ok {
      background: var(--green-dim);
      color: var(--green);
    }

    .ti-pur {
      background: var(--purple-dim);
      color: var(--purple);
    }

    .ti-blue {
      background: var(--blue-dim);
      color: var(--blue);
    }

    /* Tool call */
    .tc {
      margin: 8px 0;
      border: 1px solid #2a2050;
      border-radius: 5px;
      overflow: hidden;
      font-size: 12px;
    }

    .tc-h {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      background: #12101e;
      border-bottom: 1px solid #1e1835;
    }

    .tc-n {
      color: var(--purple);
      font-weight: 600;
      flex: 1;
      font-size: 11px;
    }

    .tc-s {
      font-size: 9px;
      padding: 1px 6px;
      border-radius: 3px;
    }

    .tcs-ok {
      background: var(--green-dim);
      color: var(--green);
    }

    .tcs-run {
      background: var(--purple-dim);
      color: var(--purple);
    }

    .tc-b {
      padding: 7px 10px;
      background: #0d0b18;
      color: var(--fg-dim);
      font-size: 11px;
      line-height: 1.65;
    }

    /* Confirm */
    .confirm {
      margin: 8px 0;
      border: 1px solid var(--border2);
      border-radius: 6px;
      overflow: hidden;
    }

    .cf-hdr {
      padding: 7px 12px;
      background: rgba(255, 255, 255, .03);
      border-bottom: 1px solid var(--border);
      font-size: 11px;
      color: var(--fg-muted);
    }

    .cf-body {
      padding: 10px 12px;
    }

    .cf-q {
      font-size: 12px;
      color: var(--fg);
      margin-bottom: 8px;
    }

    .cf-opts {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .cbtn {
      padding: 4px 12px;
      border-radius: 4px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      border: 1px solid transparent;
    }

    .cbtn-lo {
      background: var(--green-dim);
      color: var(--green);
      border-color: rgba(61, 232, 122, .4);
    }

    .cbtn-no {
      background: rgba(255, 255, 255, .04);
      color: var(--fg-dim);
      border-color: var(--border2);
    }

    .rtag {
      font-size: 9px;
      padding: 1px 7px;
      border-radius: 3px;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-left: auto;
      background: var(--green-dim);
      color: var(--green);
    }

    /* Progress */
    .prog {
      margin: 8px 0;
      padding: 9px 12px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 5px;
    }

    .prog-lbl {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--fg-dim);
      margin-bottom: 6px;
    }

    .prog-track {
      height: 3px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
    }

    .prog-fill {
      height: 100%;
      border-radius: 99px;
    }

    .pf-vc {
      background: linear-gradient(90deg, var(--green-dim), var(--green));
    }

    .pf-vv {
      background: linear-gradient(90deg, var(--blue-dim), var(--blue));
    }

    .pf-ai {
      background: linear-gradient(90deg, var(--purple-dim), var(--purple));
    }

    .prog-s {
      font-size: 11px;
      color: var(--fg-dim);
      margin-top: 5px;
    }

    /* Panel */
    .panel-ok {
      background: var(--green-dim);
      border: 1px solid rgba(61, 232, 122, .3);
      border-radius: 6px;
      padding: 10px 14px;
      margin: 8px 0;
    }

    .panel-ok .pt {
      color: var(--green);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .panel-ok .pb {
      color: #80d8a8;
      font-size: 11.5px;
      line-height: 1.7;
    }

    .panel-warn {
      background: #2a1a08;
      border: 1px solid rgba(240, 192, 64, .3);
      border-radius: 6px;
      padding: 10px 14px;
      margin: 8px 0;
    }

    .panel-warn .pt {
      color: var(--yellow);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .panel-warn .pb {
      color: #c0a050;
      font-size: 11.5px;
      line-height: 1.7;
    }

    /* AI response */
    .ai-resp {
      margin: 8px 0;
      border: 1px solid #3a2a70;
      border-radius: 6px;
      overflow: hidden;
      background: #10142a;
      position: relative;
    }

    .ai-resp::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--purple), var(--blue));
    }

    .ai-r-head {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px 7px 14px;
      border-bottom: 1px solid #3a2a70;
      font-size: 11px;
    }

    .ai-l {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--purple);
      font-weight: 700;
    }

    .ai-m {
      color: var(--fg-muted);
      margin-left: auto;
      font-size: 10px;
    }

    .ai-r-body {
      padding: 10px 12px 10px 14px;
      font-size: 12px;
      line-height: 1.85;
    }

    .ai-actions {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      padding: 8px 12px 8px 14px;
      border-top: 1px solid #3a2a70;
    }

    .aab {
      font-family: var(--mono);
      font-size: 11px;
      padding: 3px 11px;
      border-radius: 4px;
      border: 1px solid var(--border2);
      background: rgba(255, 255, 255, .04);
      color: var(--fg-dim);
    }

    .aab-p {
      background: var(--green-dim);
      border-color: rgba(61, 232, 122, .4);
      color: var(--green);
    }

    .aab-s {
      background: var(--blue-dim);
      border-color: rgba(56, 180, 245, .4);
      color: var(--blue);
    }

    /* ════════════════════════════════════════
   SECTIONS
════════════════════════════════════════ */
    section {
      position: relative;
      z-index: 1;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 30px;
    }

    .container-narrow {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 30px;
    }

    .section-eyebrow {
      display: inline-block;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 16px;
    }

    .section-eyebrow.blue {
      color: var(--blue);
    }

    .section-eyebrow.pur {
      color: var(--purple);
    }

    .section-eyebrow.cream {
      color: var(--cream-dim);
    }

    h2 {
      font-family: var(--serif);
      font-size: clamp(36px, 4.5vw, 56px);
      line-height: 1.1;
      letter-spacing: -.5px;
      color: var(--cream);
      margin-bottom: 20px;
    }

    h2 em {
      font-style: italic;
      color: var(--green);
    }

    h2 .blue-em {
      font-style: italic;
      color: var(--blue);
    }

    h2 .pur-em {
      font-style: italic;
      color: var(--purple);
    }

    .section-lead {
      font-size: 18px;
      line-height: 1.7;
      color: var(--fg-dim);
      max-width: 600px;
      margin-bottom: 60px;
    }

    .section-lead strong {
      color: var(--fg);
      font-weight: 500;
    }

    /* Fade in on scroll */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ════════════════════════════════════════
   PROBLEM SECTION
════════════════════════════════════════ */
    .problem-section {
      padding: 140px 0 100px;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-top: 60px;
    }

    .problem-card {
      padding: 32px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--ink2);
    }

    .problem-card.highlight {
      border-color: rgba(61, 232, 122, .2);
      background: linear-gradient(135deg, rgba(61, 232, 122, .05) 0%, var(--ink2) 100%);
    }

    .pc-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 16px;
      display: inline-block;
      padding: 3px 10px;
      border-radius: 4px;
    }

    .pcl-bad {
      background: rgba(240, 80, 64, .1);
      color: var(--red);
      border: 1px solid rgba(240, 80, 64, .2);
    }

    .pcl-good {
      background: var(--green-dim);
      color: var(--green);
      border: 1px solid rgba(61, 232, 122, .2);
    }

    .pc-title {
      font-family: var(--serif);
      font-size: 24px;
      color: var(--cream);
      margin-bottom: 12px;
    }

    .pc-body {
      font-size: 14px;
      color: var(--fg-dim);
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .pc-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .pli {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      color: var(--fg-dim);
    }

    .pli-icon-bad {
      color: var(--red);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .pli-icon-good {
      color: var(--green);
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* ════════════════════════════════════════
   COMPARISON SECTION
════════════════════════════════════════ */
    .compare-section {
      padding: 80px 0 120px;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 48px 1fr;
      gap: 0;
      align-items: center;
      margin-top: 60px;
    }

    .compare-vs {
      text-align: center;
      font-family: var(--serif);
      font-size: 22px;
      font-style: italic;
      color: var(--fg-muted);
    }

    .compare-label {
      text-align: center;
      margin-bottom: 12px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--fg-muted);
    }

    .compare-label.bad {
      color: var(--red);
    }

    .compare-label.good {
      color: var(--green);
    }

    /* ════════════════════════════════════════
   TOOLS SECTION
════════════════════════════════════════ */
    .tools-section {
      padding: 80px 0 120px;
    }

    .tools-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 60px;
    }

    .tool-card {
      padding: 32px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--ink2);
      transition: border-color .2s, transform .2s;
    }

    .tool-card:hover {
      border-color: var(--border2);
      transform: translateY(-2px);
    }

    .tool-card.vc-card {
      border-color: rgba(61, 232, 122, .15);
      background: linear-gradient(150deg, rgba(61, 232, 122, .04) 0%, var(--ink2) 60%);
    }

    .tool-card.vv-card {
      border-color: rgba(56, 180, 245, .15);
      background: linear-gradient(150deg, rgba(56, 180, 245, .04) 0%, var(--ink2) 60%);
    }

    .tc-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 16px;
      font-weight: 700;
    }

    .tc-icon-vc {
      background: var(--green-dim);
      color: var(--green);
      border: 1px solid rgba(61, 232, 122, .3);
    }

    .tc-icon-vv {
      background: var(--blue-dim);
      color: var(--blue);
      border: 1px solid rgba(56, 180, 245, .3);
    }

    .tc-icon-core {
      background: var(--purple-dim);
      color: var(--purple);
      border: 1px solid rgba(157, 112, 240, .3);
      font-size: 18px;
    }

    .tool-name {
      font-family: var(--mono);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .tool-name.vc {
      color: var(--green);
    }

    .tool-name.vv {
      color: var(--blue);
    }

    .tool-subtitle {
      font-size: 13px;
      color: var(--fg-muted);
      margin-bottom: 16px;
      font-family: var(--mono);
      letter-spacing: .5px;
    }

    .tool-desc {
      font-size: 14px;
      color: var(--fg-dim);
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .tool-features {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tf {
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: var(--mono);
      font-size: 12px;
    }

    .tf-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .tf-dot-vc {
      background: var(--green);
    }

    .tf-dot-vv {
      background: var(--blue);
    }

    .tf-label {
      color: var(--fg-dim);
    }

    .tf-label strong {
      color: var(--fg);
      font-weight: 500;
    }

    /* ════════════════════════════════════════
   AGENT SECTION
════════════════════════════════════════ */
    .agent-section {
      padding: 80px 0 120px;
    }

    .agent-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-top: 60px;
    }

    .agent-copy .desc {
      font-size: 15px;
      color: var(--fg-dim);
      line-height: 1.75;
      margin-bottom: 28px;
    }

    .agent-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 32px;
    }

    .pill {
      font-family: var(--mono);
      font-size: 12px;
      padding: 6px 14px;
      border-radius: 99px;
      border: 1px solid var(--border2);
      color: var(--fg-dim);
    }

    .pill.active {
      background: var(--purple-dim);
      border-color: rgba(157, 112, 240, .4);
      color: var(--purple);
    }

    .agent-stat-row {
      display: flex;
      gap: 32px;
    }

    .agent-stat {}

    .agent-stat-num {
      font-family: var(--serif);
      font-size: 36px;
      color: var(--cream);
      line-height: 1;
    }

    .agent-stat-num span {
      color: var(--purple);
    }

    .agent-stat-label {
      font-size: 12px;
      color: var(--fg-muted);
      margin-top: 4px;
      font-family: var(--mono);
    }

    /* TUI preview */
    .tui-preview {
      background: #080a10;
      border: 2px solid var(--purple);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 60px rgba(157, 112, 240, .2), 0 0 0 1px #1a1040;
      position: relative;
    }

    .tui-preview::before {
      content: 'TUI MODE';
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 3px;
      color: var(--purple);
      background: #080a10;
      padding: 0 8px;
    }

    .tui-bar {
      display: flex;
      align-items: stretch;
      background: #0d0f1a;
      border-bottom: 1px solid #2a2050;
      height: 36px;
    }

    .tui-logo-mini {
      display: flex;
      align-items: center;
      padding: 0 14px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--purple);
      border-right: 1px solid #2a2050;
      gap: 6px;
    }

    .tui-tabs-mini {
      display: flex;
      align-items: stretch;
      flex: 1;
    }

    .tui-tab-mini {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      font-family: var(--mono);
      font-size: 10.5px;
      border-right: 1px solid #1a1535;
    }

    .tui-tab-mini.active {
      background: #1a1535;
      border-bottom: 2px solid var(--purple);
    }

    .tui-tab-mini.active .ttn {
      color: var(--fg);
    }

    .tui-tab-mini:not(.active) .ttn {
      color: var(--fg-muted);
    }

    .tt-n {
      font-size: 9px;
      padding: 1px 4px;
      border-radius: 2px;
      background: #2a1a50;
      color: var(--purple);
      flex-shrink: 0;
      font-family: var(--mono);
    }

    .ttn {
      font-size: 10.5px;
      white-space: nowrap;
    }

    .tui-content {
      display: grid;
      grid-template-columns: 1fr 1px 200px;
      height: 340px;
    }

    .tui-chat-area {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-family: var(--mono);
      font-size: 11px;
      overflow: hidden;
    }

    .chat-msg-u,
    .chat-msg-a {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .chat-av {
      width: 18px;
      height: 18px;
      border-radius: 3px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 700;
      font-family: var(--mono);
    }

    .cav-u {
      background: var(--green-dim);
      border: 1px solid rgba(61, 232, 122, .4);
      color: var(--green);
    }

    .cav-a {
      background: var(--purple-dim);
      border: 1px solid rgba(157, 112, 240, .4);
      color: var(--purple);
    }

    .chat-text-u {
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border2);
      padding: 6px 9px;
      border-radius: 4px;
      font-size: 11px;
      color: var(--fg);
      line-height: 1.6;
      flex: 1;
    }

    .chat-text-a {
      background: #10142a;
      border: 1px solid #3a2a70;
      padding: 6px 9px;
      border-radius: 4px;
      font-size: 11px;
      color: var(--fg);
      line-height: 1.6;
      flex: 1;
      position: relative;
    }

    .chat-text-a::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--purple), var(--blue));
      border-radius: 2px 0 0 2px;
    }

    .mini-tool {
      margin: 5px 0;
      border: 1px solid #2a2040;
      border-radius: 3px;
      overflow: hidden;
      font-size: 10px;
    }

    .mt-h {
      padding: 3px 8px;
      background: #141824;
      border-bottom: 1px solid #1e1835;
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .mt-n {
      color: var(--purple);
      font-weight: 600;
      flex: 1;
    }

    .mt-s {
      font-size: 8px;
      padding: 0 4px;
      border-radius: 2px;
    }

    .mts-ok {
      background: var(--green-dim);
      color: var(--green);
    }

    .mts-run {
      background: var(--purple-dim);
      color: var(--purple);
    }

    .mt-b {
      padding: 4px 8px;
      background: #0f1220;
      color: var(--fg-dim);
      font-size: 10px;
    }

    .tui-log-area {
      border-left: 1px solid #1a1535;
      background: #0a0c14;
      padding: 9px 10px;
      overflow: hidden;
      font-family: var(--mono);
    }

    .tui-log-title {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--fg-muted);
      margin-bottom: 8px;
    }

    .log-item {
      display: flex;
      align-items: flex-start;
      gap: 5px;
      padding: 2px 0;
      font-size: 10px;
      border-bottom: 1px solid #0d0f18;
    }

    .log-time {
      color: var(--fg-muted);
      flex-shrink: 0;
      width: 38px;
    }

    .log-ag {
      font-size: 8px;
      padding: 1px 3px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .la1 {
      background: #2a1050;
      color: var(--purple);
    }

    .la2 {
      background: var(--blue-dim);
      color: var(--blue);
    }

    .la3 {
      background: var(--green-dim);
      color: var(--green);
    }

    .log-msg {
      flex: 1;
      color: var(--fg-dim);
    }

    .tui-input-mini {
      border-top: 1px solid #2a2050;
      padding: 8px 12px;
      background: #0d0f1a;
      font-family: var(--mono);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .tip-sym {
      color: var(--purple);
      font-size: 11px;
    }

    .tip-txt {
      color: var(--fg-dim);
      font-size: 11px;
      flex: 1;
    }

    .tui-sb {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 5px 12px;
      background: var(--purple-dim);
      border-top: 1px solid #3a2a70;
      font-family: var(--mono);
      font-size: 9px;
    }

    .tsb-k {
      padding: 0 4px;
      background: #1e1535;
      border: 1px solid #3a2060;
      border-radius: 2px;
      color: var(--fg-dim);
      font-size: 8px;
    }

    .tsb-v {
      color: var(--fg-muted);
    }

    .tsb-sep {
      width: 1px;
      height: 9px;
      background: #3a2060;
    }

    .tsb-r {
      margin-left: auto;
      color: var(--purple);
      font-weight: 700;
    }

    /* ════════════════════════════════════════
   CORE SECTION
════════════════════════════════════════ */
    .core-section {
      padding: 80px 0 120px;
    }

    .core-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start;
      margin-top: 60px;
    }

    .core-modules {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .cm {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--ink2);
      transition: border-color .2s;
    }

    .cm:hover {
      border-color: var(--border2);
    }

    .cm-icon {
      width: 36px;
      height: 36px;
      border-radius: 7px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .cmi-ui {
      background: #0e2a1e;
      border: 1px solid rgba(61, 232, 122, .2);
    }

    .cmi-ignore {
      background: #1a1030;
      border: 1px solid rgba(157, 112, 240, .2);
    }

    .cmi-sec {
      background: #2a0e0e;
      border: 1px solid rgba(240, 80, 64, .2);
    }

    .cmi-cfg {
      background: #0a2040;
      border: 1px solid rgba(56, 180, 245, .2);
    }

    .cmi-i18n {
      background: #1a1830;
      border: 1px solid rgba(56, 180, 245, .2);
    }

    .cm-info .cm-title {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      color: var(--fg);
      margin-bottom: 4px;
    }

    .cm-info .cm-sub {
      font-size: 12px;
      color: var(--fg-muted);
      line-height: 1.5;
    }

    /* ════════════════════════════════════════
   PHILOSOPHY SECTION
════════════════════════════════════════ */
    .philosophy-section {
      padding: 100px 0;
      background: linear-gradient(180deg, transparent, rgba(61, 232, 122, .03) 50%, transparent);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .philosophy-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      margin-top: 60px;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }

    .phi-item {
      background: var(--ink2);
      padding: 36px 32px;
    }

    .phi-num {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 3px;
      color: var(--green);
      margin-bottom: 16px;
    }

    .phi-title {
      font-family: var(--serif);
      font-size: 22px;
      color: var(--cream);
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .phi-body {
      font-size: 14px;
      color: var(--fg-dim);
      line-height: 1.7;
    }

    .phi-body em {
      color: var(--fg);
      font-style: normal;
      font-weight: 500;
    }

    /* ════════════════════════════════════════
   QUICKSTART SECTION
════════════════════════════════════════ */
    .quickstart-section {
      padding: 100px 0 120px;
    }

    .qs-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 60px;
    }

    .qs-step {
      padding: 28px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--ink2);
    }

    .qs-num {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--green);
      margin-bottom: 16px;
    }

    .qs-title {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--cream);
      margin-bottom: 12px;
    }

    .qs-body {
      font-size: 13px;
      color: var(--fg-dim);
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .code-snippet {
      background: var(--ink);
      border: 1px solid var(--border2);
      border-radius: 6px;
      padding: 14px 16px;
      font-family: var(--mono);
      font-size: 12.5px;
      line-height: 1.7;
    }

    .cs-comment {
      color: var(--fg-muted);
    }

    .cs-cmd {
      color: var(--green);
    }

    .cs-arg {
      color: var(--fg-dim);
    }

    .cs-kw {
      color: var(--yellow);
    }

    .cs-str {
      color: var(--orange);
    }

    /* ════════════════════════════════════════
   CTA
════════════════════════════════════════ */
    .cta-section {
      padding: 120px 40px;
      text-align: center;
      background: linear-gradient(180deg, transparent, rgba(61, 232, 122, .04) 40%, transparent);
    }

    .cta-title {
      font-family: var(--serif);
      font-size: clamp(40px, 5vw, 64px);
      color: var(--cream);
      margin-bottom: 20px;
    }

    .cta-title em {
      color: var(--green);
    }

    .cta-sub {
      font-size: 18px;
      color: var(--fg-dim);
      max-width: 540px;
      margin: 0 auto 48px;
      line-height: 1.7;
    }

    .cta-cmd {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--ink2);
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 12px 14px 12px 28px;
      font-family: var(--mono);
      font-size: 15px;
      color: var(--fg);
      margin-bottom: 48px;
      max-width: min(100%, 960px);
    }

    .cta-cmd .prompt {
      color: var(--fg-muted);
      margin-right: 8px;
    }

    .cta-cmd .install {
      color: var(--green);
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
    }

    .cta-cmd .install::-webkit-scrollbar {
      display: none;
    }

    .copy-install {
      flex: 0 0 auto;
      border: 1px solid rgba(61, 232, 122, .25);
      border-radius: 6px;
      background: var(--green-dim);
      color: var(--green);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .2px;
      padding: 8px 12px;
      transition: all .15s ease;
    }

    .copy-install:hover {
      background: var(--green);
      color: var(--ink);
    }

    .copy-install.copied {
      border-color: rgba(56, 232, 216, .35);
      background: rgba(56, 232, 216, .12);
      color: var(--cyan);
    }

    /* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
    footer {
      border-top: 1px solid var(--border);
      padding: 48px 40px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 16px;
    }

    .footer-logo {
      justify-self: start;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--fg-dim);
    }

    .footer-logo span {
      color: var(--green);
    }

    .footer-links {
      justify-self: center;
      display: flex;
      gap: 28px;
    }

    .footer-links a {
      font-size: 13px;
      color: var(--fg-muted);
      text-decoration: none;
      transition: color .15s;
    }

    .footer-links a:hover {
      color: var(--fg-dim);
    }

    .footer-copy {
      justify-self: end;
      font-size: 12px;
      color: var(--fg-muted);
      font-family: var(--mono);
    }

    /* ════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════ */
    @keyframes fade-up {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-d1 {
      transition-delay: .1s;
    }

    .reveal-d2 {
      transition-delay: .2s;
    }

    .reveal-d3 {
      transition-delay: .3s;
    }

    .reveal-d4 {
      transition-delay: .4s;
    }

    /* Typewriter cursor blink in hero */
    .tw-cursor {
      display: inline-block;
      width: 2px;
      height: 1em;
      background: var(--green);
      vertical-align: middle;
      margin-left: 2px;
      animation: blink .8s step-end infinite;
    }

    /* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
    @media (max-width: 900px) {

      .problem-grid,
      .compare-grid,
      .tools-grid,
      .agent-layout,
      .core-layout,
      .philosophy-grid,
      .qs-steps {
        grid-template-columns: 1fr;
      }

      .compare-vs {
        display: none;
      }

      nav .nav-links {
        display: none;
      }

      .agent-stat-row {
        gap: 20px;
      }

      .container,
      .container-narrow {
        margin: 0 auto;
        padding: 0 20px;
      }

      .hero {
        padding: 100px 20px 60px;
      }

      nav {
        padding: 0 20px;
      }

      footer {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 40px 20px;
      }

      .footer-logo,
      .footer-links,
      .footer-copy {
        justify-self: center;
      }
    }