:root {
      --bg: #0b0f14;
      --panel: #111820;
      --text: #e7edf3;
      --muted: #92a0ad;
      --line: #25313d;
      --accent: #7ee787;
    }

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

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 75% 25%, rgba(126, 231, 135, 0.06), transparent 30%),
        var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .shell {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 28px;
    }

    header {
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .brand {
      font-weight: 800;
      letter-spacing: -0.03em;
      font-size: 1.05rem;
    }

    .brand span {
      color: var(--accent);
    }

    nav {
      display: flex;
      gap: 28px;
      font-size: .94rem;
      color: var(--muted);
    }

    nav a:hover {
      color: var(--text);
    }

    main {
      min-height: calc(100vh - 84px);
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 72px;
      align-items: center;
      padding: 64px 0 84px;
    }

    .eyebrow {
      color: var(--accent);
      font-family: Consolas, "Courier New", monospace;
      font-size: .95rem;
      margin-bottom: 18px;
    }

    h1 {
      font-size: clamp(2.8rem, 6vw, 5.8rem);
      line-height: .98;
      letter-spacing: -0.055em;
      max-width: 780px;
      margin-bottom: 26px;
    }

    .lead {
      max-width: 660px;
      font-size: 1.13rem;
      line-height: 1.7;
      color: var(--muted);
      margin-bottom: 24px;
    }

    .areas {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 22px;
    }

    .area {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.025);
      color: #c3cdd6;
      padding: 10px 13px;
      border-radius: 10px;
      font-size: .9rem;
    }

    .stack {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-bottom: 32px;
    }

    .tag {
      color: #81909d;
      font-size: .84rem;
      font-family: Consolas, "Courier New", monospace;
    }

    .tag:not(:last-child)::after {
      content: " ·";
      color: #46525d;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .btn {
      padding: 13px 18px;
      border-radius: 9px;
      font-weight: 700;
      font-size: .94rem;
      border: 1px solid var(--line);
      transition: .18s ease;
    }

    .btn-primary {
      background: var(--accent);
      color: #071008;
      border-color: var(--accent);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text);
    }

    .terminal {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #10171e 0%, #0d1319 100%);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 25px 70px rgba(0,0,0,.35);
    }

    .terminal-top {
      height: 44px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      border-bottom: 1px solid var(--line);
      gap: 8px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #42505d;
    }

    .terminal-title {
      margin-left: 8px;
      color: #73808c;
      font-size: .78rem;
      font-family: Consolas, "Courier New", monospace;
    }

    pre {
      padding: 26px;
      min-height: 350px;
      color: #b8c7d3;
      font-family: Consolas, "Courier New", monospace;
      font-size: .88rem;
      line-height: 1.75;
      white-space: pre-wrap;
    }

    .prompt { color: var(--accent); }
    .ok { color: #9fd7a4; }
    .dim { color: #6f7e8b; }

    @media (max-width: 850px) {
      nav {
        display: none;
      }

      main {
        grid-template-columns: 1fr;
        gap: 46px;
        padding-top: 48px;
      }

      h1 {
        font-size: clamp(2.8rem, 14vw, 5.2rem);
      }
    }