:root{
    --bg: #14171b;
    --panel: #1b1f26;
    --panel-2: #20252d;
    --border: #2a2f38;
    --border-soft: #22262e;
    --text: #ece9e2;
    --text-muted: #8b909b;
    --text-faint: #575c66;
    --amber: #e8a33d;
    --amber-dim: #8a6224;
    --teal: #4fd1c5;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Helvetica, Arial, sans-serif;
  }
  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a{ color: inherit; text-decoration: none; }
  .wrap{ max-width: 1120px; margin: 0 auto; padding: 0 28px; }

  /* ---------- nav ---------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(20,23,27,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
  }
  nav{ display:flex; align-items:center; justify-content:space-between; height: 68px; }
  .brand{ display:flex; align-items:center; gap:10px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; }
  .brand-dot{ width:8px; height:8px; border-radius:50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(232,163,61,0.15); }
  .brand b{ font-weight:600; }
  .brand span{ color: var(--text-faint); font-weight:400; }
  .navlinks{ display:flex; gap: 32px; font-size: 14px; color: var(--text-muted); }
  .navlinks a:hover{ color: var(--text); }
  .nav-cta{
    font-family: var(--mono); font-size: 13px; padding: 8px 16px;
    border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  }
  .nav-cta:hover{ border-color: var(--amber); color: var(--amber); }
  @media (max-width: 720px){ .navlinks{ display:none; } }

  /* ---------- hero ---------- */
  .hero{ padding: 96px 0 72px; border-bottom: 1px solid var(--border-soft); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--mono); font-size: 12px; color: var(--teal);
    border:1px solid rgba(79,209,197,0.25); background: rgba(79,209,197,0.06);
    padding: 5px 12px; border-radius: 20px; margin-bottom: 28px;
  }
  .eyebrow .pulse{ width:6px; height:6px; border-radius:50%; background: var(--teal); animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
  .hero h1{
    font-family: var(--mono); font-weight: 600;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.22; letter-spacing: -0.01em;
    max-width: 780px; margin-bottom: 22px;
  }
  .hero h1 .accent{ color: var(--amber); }
  .hero p{ font-size: 17px; color: var(--text-muted); max-width: 560px; margin-bottom: 36px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    font-family: var(--mono); font-size: 14px; padding: 12px 22px; border-radius: 7px;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-primary{ background: var(--amber); color: #1a1305; font-weight: 600; }
  .btn-primary:hover{ background: #f0ae4d; }
  .btn-ghost{ border: 1px solid var(--border); color: var(--text); }
  .btn-ghost:hover{ border-color: var(--text-muted); }

  /* ---------- relay diagram (signature element) ---------- */
  .relay{ margin-top: 72px; }
  .relay-frame{
    border: 1px solid var(--border); background: var(--panel);
    border-radius: 12px; padding: 28px clamp(12px,4vw,40px);
    overflow: hidden;
  }
  .relay-label{ font-family: var(--mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.08em; margin-bottom: 18px; }
  svg.relay-svg{ width: 100%; height: auto; display:block; }
  .node-box{ fill: var(--panel-2); stroke: var(--border); stroke-width: 1; }
  .node-label{ font-family: var(--mono); font-size: 11px; fill: var(--text-muted); }
  .node-label-strong{ font-family: var(--mono); font-size: 11px; fill: var(--text); font-weight:600; }
  .line{ stroke: var(--border); stroke-width: 1.4; fill:none; }
  .dot{ fill: var(--amber); }
  .dot-teal{ fill: var(--teal); }

  /* ---------- section headers ---------- */
  .section{ padding: 88px 0; border-bottom: 1px solid var(--border-soft); }
  .section-head{ max-width: 620px; margin-bottom: 48px; }
  .section-eyebrow{ font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: 0.1em; margin-bottom: 12px; }
  .section h2{ font-family: var(--mono); font-size: clamp(22px,2.6vw,30px); font-weight:600; margin-bottom: 14px; letter-spacing:-0.01em; }
  .section-head p{ color: var(--text-muted); font-size: 15.5px; }

  /* ---------- features ---------- */
  .feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
  .feature{ background: var(--panel); padding: 30px 26px; }
  .feature-icon{ width: 34px; height:34px; border-radius:8px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom: 20px; color: var(--amber); }
  .feature h3{ font-family: var(--mono); font-size: 15.5px; font-weight:600; margin-bottom: 10px; }
  .feature p{ color: var(--text-muted); font-size: 14px; }
  @media (max-width: 860px){ .feature-grid{ grid-template-columns: 1fr; } }

  /* ---------- code block ---------- */
  .code-panel{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center; }
  .code-box{
    background: var(--panel); border:1px solid var(--border); border-radius: 10px;
    padding: 20px 22px; font-family: var(--mono); font-size: 13px; color: var(--text-muted);
    overflow-x:auto;
  }
  .code-box .dim{ color: var(--text-faint); }
  .code-box .str{ color: var(--teal); }
  .code-box .key{ color: var(--amber); }
  .code-copy p{ color: var(--text-muted); font-size: 15px; margin-bottom: 16px; }
  .code-copy li{ list-style:none; display:flex; gap:10px; align-items:flex-start; font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
  .code-copy li::before{ content:"—"; color: var(--amber); font-family: var(--mono); }
  @media (max-width: 860px){ .code-panel{ grid-template-columns: 1fr; } }

  /* ---------- pricing ---------- */
  .price-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .price-card{ border:1px solid var(--border); border-radius: 12px; padding: 28px 24px; background: var(--panel); }
  .price-card.featured{ border-color: var(--amber-dim); background: linear-gradient(180deg, rgba(232,163,61,0.06), transparent 40%), var(--panel); }
  .price-name{ font-family: var(--mono); font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
  .price-num{ font-family: var(--mono); font-size: 32px; font-weight: 600; margin-bottom: 4px; }
  .price-num span{ font-size:14px; color: var(--text-faint); font-weight: 400; }
  .price-sub{ font-size: 13px; color: var(--text-faint); margin-bottom: 22px; }
  .price-list{ list-style:none; }
  .price-list li{ font-size: 13.5px; color: var(--text-muted); padding: 7px 0; border-top: 1px solid var(--border-soft); }
  .price-list li:first-child{ border-top:none; }
  @media (max-width: 860px){ .price-grid{ grid-template-columns: 1fr; } }

  /* ---------- contact / footer ---------- */
  .contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 60px; }
  .contact-grid h2{ font-family: var(--mono); font-size: clamp(22px,2.6vw,28px); margin-bottom: 14px; }
  .contact-grid p{ color: var(--text-muted); font-size: 15px; margin-bottom: 28px; max-width: 460px; }
  .info-row{ display:flex; justify-content:space-between; padding: 14px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
  .info-row:last-child{ border-bottom: 1px solid var(--border-soft); }
  .info-row .k{ color: var(--text-faint); font-family: var(--mono); font-size: 12.5px; }
  .info-row .v{ color: var(--text); text-align:right; }
  @media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; gap: 36px; } }

  footer{ padding: 36px 0 48px; }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 14px; }
  .foot-brand{ font-family: var(--mono); font-size: 13px; color: var(--text-faint); }
  .foot-links{ display:flex; gap: 22px; font-size: 13px; color: var(--text-faint); }
  .foot-links a:hover{ color: var(--text-muted); }