:root{
      --bg:#0b0f14;
      --panel:#0f141b;
      --panel2:#111827;
      --border:#1f2937;

      --text:#e5e7eb;
      --muted:#9ca3af;
      --faint:#6b7280;

      --blue:#60a5fa;
      --cyan:#67e8f9;
      --green:#34d399;
      --yellow:#fbbf24;
      --red:#f87171;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
              "Liberation Mono", "Courier New", monospace;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--mono);
      background:var(--bg);
      color:var(--text);
    }

    a{color:var(--blue); text-decoration:none}
    a:hover{text-decoration:underline}

    /* Optional ASCII background layer */
    .ascii-bg{
      position:fixed;
      inset:0;
      margin:0;
      padding:16px;
      font-family:var(--mono);
      font-size:11px;
      line-height:1.05;
      color:var(--blue);
      opacity:0.03;
      white-space:pre;
      overflow:hidden;
      pointer-events:none;
      user-select:none;
      z-index:0;
    }
    @media (max-width: 768px){
      .ascii-bg{opacity:0.02; font-size:9px}
      .pillrow{display:none !important}
      .dots{display:none !important}
      .nav{display:none !important}
      .term-body{display:none !important}
    }

    .wrap{
      position:relative;
      z-index:1;
      max-width: 1080px; /* marketing layout width */
      margin:0 auto;
      padding: 20px;
    }

    /* ===== Flat “app chrome” top bar ===== */
    .topbar{
      display:flex;
      align-items:center;
      /* justify-content:space-between; */
      gap:14px;
      flex-wrap:wrap;

      background:var(--panel);
      border:1px solid var(--border);
      padding:10px 14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:260px;
      margin-right: auto;
    }

    .logo{
      width:18px;
      height:18px;
      background:var(--blue);
    }

    .brand-title{
      display:flex;
      flex-direction:row;
      align-items: center;
      gap:12px;
    }

    .brand-title strong{
      font-size:14px;
      font-weight:600;
    }

    .brand-title span{
      font-size:11px;
      color:var(--muted);
    }

    .nav{
      display:flex;
      gap:16px;
      align-items:center;
      flex-wrap:wrap;
    }

    .nav a{
      font-size:12px;
      color:var(--muted);
    }
    .nav a:hover{color:var(--text)}

    .dots{
      display:flex;
      gap:6px;
      align-items:center;
    }
    .dot{width:10px;height:10px;border-radius:50%}
    .dot.red{background:var(--red)}
    .dot.yellow{background:var(--yellow)}
    .dot.green{background:var(--green)}

    hr {
      margin: 5% 0;
      border-color:var(--yellow)
    }

    /* ===== Marketing hero layout ===== */
    .hero{
      margin-top:16px;
      display:grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap:16px;
      align-items:stretch;
    }
    @media (max-width: 980px){
      .hero{grid-template-columns:1fr}
    }

    .scrubby-panel img {
      max-width: 100%;
      border-radius: 10px;
    }

    .panel{
      background:var(--panel);
      border:1px solid var(--border);
    }

    .hero-copy{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .pillrow{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:var(--faint);
      font-size:11px;
    }
    .pill{
      border:1px solid var(--border);
      background:#000;
      padding:4px 8px;
    }

    h1{
      margin:0;
      font-size:22px;
      line-height:1.25;
      font-weight:700;
      letter-spacing:-0.2px;
    }
    .lead{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }

    .cta-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:4px;
    }

    .btn{
      display:inline-block;
      padding:10px 14px;
      border:1px solid var(--border);
      background:var(--panel2);
      color:var(--text);
      font-weight:600;
      font-size:12px;
      cursor:pointer;
      font-family:var(--mono);
    }
    .btn:hover{
      border-color:var(--blue);
      color:var(--blue);
    }

    .btn.secondary{
      background:#000;
      color:var(--muted);
    }
    .btn.secondary:hover{
      color:var(--text);
      border-color:var(--muted);
    }

    .fineprint{
      font-size:11px;
      color:var(--faint);
      line-height:1.55;
      margin:0;
    }

    /* ===== Terminal demo panel ===== */
    .term-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:8px 12px;
      border-bottom:1px solid var(--border);
      background:var(--panel2);
      font-size:12px;
      color:var(--muted);
    }
    .term-body, .success-term-body{
      padding:14px;
      font-size:13px;
      line-height:1.6;
      white-space:pre-wrap;
    }
    .prompt{color:var(--faint)}
    .cmd{color:var(--blue)}
    .ok{color:var(--green)}
    .warn{color:var(--yellow)}
    .bad{color:var(--red)}
    .note{color:var(--muted)}
    .cursor{
      display:inline-block;
      width:8px;height:14px;
      background:var(--cyan);
      vertical-align:middle;
      animation:blink 1.1s steps(2) infinite;
    }
    @keyframes blink{50%{opacity:0}}

    /* ===== Social proof row (marketing-y) ===== */
    .proof{
      margin-top:16px;
      background:var(--panel);
      border:1px solid var(--border);
      padding:12px 14px;
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:space-between;
    }
    .proof strong{font-size:12px}
    .logos{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }
    .logo-chip{
      border:1px solid var(--border);
      background:#000;
      padding:6px 10px;
      font-size:11px;
      color:var(--faint);
    }

    /* ===== Section scaffolding ===== */
    section{margin-top:24px}
    .section-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin: 50px 0 20px 0;
    }
    .section-head h2 {
      font-size: 20px;
    }
    h2{
      margin:0;
      font-size:14px;
      font-weight:700;
    }
    .subhead{
      margin:0;
      font-size:12px;
      color:var(--muted);
      line-height:1.55;
      max-width: 70ch;
    }

    /* ===== Feature grid ===== */
    .grid3{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:12px;
    }
    @media (max-width: 980px){
      .grid3{grid-template-columns:1fr}
    }

    .card{
      padding:12px;
      background:var(--panel);
      border:1px solid var(--border);
      border-left:3px solid var(--border);
    }
    .card h3{
      margin:0 0 6px;
      font-size:13px;
      font-weight:700;
    }
    .card p{
      margin:0;
      font-size:12px;
      color:var(--muted);
      line-height:1.6;
    }

    /* ===== Two-column sections ===== */
    .two{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 980px){
      .two{grid-template-columns:1fr}
    }
    .box{
      padding:12px;
      background:var(--panel);
      border:1px solid var(--border);
    }
    .box h3{
      margin:0 0 8px;
      font-size:13px;
      font-weight:700;
    }
    .box ul{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      font-size:12px;
      line-height:1.65;
    }
    .box li{margin:6px 0}
    .code{
      margin-top:10px;
      padding:10px;
      background:#000;
      border:1px solid var(--border);
      font-size:12px;
      white-space:pre-wrap;
      color:var(--text);
    }

    /* ===== Steps ===== */
    .steps{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    @media (max-width: 980px){
      .steps{grid-template-columns:1fr}
    }
    .step{
      padding:12px;
      background:var(--panel);
      border:1px solid var(--border);
    }
    .step strong{font-size:12px}
    .step p{
      margin:6px 0 0;
      font-size:12px;
      color:var(--muted);
      line-height:1.6;
    }

    /* ===== Testimonials ===== */
    .quotes{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:12px;
    }
    @media (max-width: 980px){
      .quotes{grid-template-columns:1fr}
    }
    blockquote{
      margin:0;
      padding:12px;
      background:var(--panel);
      border:1px solid var(--border);
      border-left:3px solid var(--blue);
      color:var(--muted);
      font-size:12px;
      line-height:1.65;
    }
    blockquote footer{
      margin-top:10px;
      color:var(--faint);
      font-size:11px;
    }

    /* ===== FAQ ===== */
    details{
      background:var(--panel);
      border:1px solid var(--border);
      padding:10px 12px;
    }
    details + details{margin-top:10px}
    summary{
      cursor:pointer;
      color:var(--text);
      font-size:12px;
      font-weight:700;
      list-style:none;
    }
    summary::-webkit-details-marker{display:none}
    details p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:12px;
      line-height:1.65;
    }

    /* ===== Signup panel ===== */
    .signup{
      padding:25px;
      background:rgb(195, 195, 195);
      /* border:1px solid var(--border); */
    }
    .signup-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .sign-up-badge {
      font-size:11px;
      color:blue;
      letter-spacing:0.4px;
    }
    .badge{
      font-size:11px;
      color:var(--cyan);
      letter-spacing:0.4px;
    }
    form{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    input{
      flex:1;
      min-width:240px;
      padding:10px;
      font-family:var(--mono);
      background:#000;
      border:1px solid var(--border);
      color:var(--text);
    }
    input:focus{outline:none;border-color:var(--blue)}
    button{
      padding:10px 14px;
      font-family:var(--mono);
      font-weight:700;
      background:var(--panel2);
      color:var(--text);
      border:1px solid var(--border);
      cursor:pointer;
    }
    button:hover{border-color:var(--blue);color:var(--blue)}

    /* ===== Footer ===== */
    .footer{
      margin-top:26px;
      padding-top:12px;
      border-top:1px solid var(--border);
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      color:var(--faint);
      font-size:11px;
    }