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

    :root {
      --bg:       #0a0e17;
      --surface:  #0f1420;
      --surface2: #161c2c;
      --border:   #1e2740;
      --text:     #d8dfe9;
      --text-hi:  #f0f4fa;
      --muted:    #5a6882;
      --dim:      #3a4560;
      --cyan:     #22d3ee;
      --violet:   #a78bfa;
      --green:    #34d399;
      --amber:    #fbbf24;
      --font-ui:  'DM Sans', system-ui, sans-serif;
      --font-mono:'JetBrains Mono', 'SF Mono', monospace;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-ui);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ── Ambient ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 700px 500px at 20% 15%, rgba(34, 211, 238, .04) 0%, transparent 70%),
        radial-gradient(ellipse 600px 600px at 80% 70%, rgba(167, 139, 250, .035) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    body > * { position: relative; z-index: 1; }

    ::selection { background: rgba(34, 211, 238, .2); color: var(--text-hi); }

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

    /* ── Layout ── */
    .wrap {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── Nav ── */
    nav {
      padding: 20px 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .logo {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .logo svg { width: 18px; height: 18px; }
    .wordmark {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-hi);
      letter-spacing: -.03em;
    }
    nav .sep { flex: 1; }
    nav a {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-hi);
      padding: 6px 12px;
      border-radius: 6px;
      transition: color .15s, background .15s;
    }
    nav a:hover { color: var(--cyan); background: var(--surface2); text-decoration: none; }

    /* ── Hero ── */
    .hero {
      padding: 80px 0 60px;
      text-align: center;
    }
    .hero h1 {
      font-size: clamp(32px, 5vw, 48px);
      font-weight: 700;
      color: var(--text-hi);
      letter-spacing: -.03em;
      line-height: 1.15;
      margin-bottom: 20px;
    }
    .hero h1 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--cyan), var(--violet));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero p {
      font-size: 17px;
      color: var(--muted);
      line-height: 1.7;
      max-width: 520px;
      margin: 0 auto 36px;
    }

    /* ── Code block ── */
    .cmd {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 22px;
      font-family: var(--font-mono);
      font-size: 15px;
      color: var(--cyan);
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
      position: relative;
    }
    .cmd:hover {
      border-color: rgba(34, 211, 238, .3);
      box-shadow: 0 0 20px rgba(34, 211, 238, .06);
    }
    .cmd .prompt { color: var(--dim); user-select: none; }
    .cmd .copy-hint {
      font-family: var(--font-ui);
      font-size: 11px;
      color: var(--dim);
      padding: 3px 8px;
      background: var(--surface2);
      border-radius: 4px;
      margin-left: 6px;
      transition: color .15s;
    }
    .cmd:hover .copy-hint { color: var(--muted); }
    .cmd.copied .copy-hint { color: var(--green); }

    /* ── Divider ── */
    .divider {
      height: 1px;
      background: var(--border);
      margin: 48px 0;
    }

    /* ── Flow section ── */
    .flow {
      padding: 0 0 48px;
    }
    .flow h2 {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 32px;
    }

    .steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }
    .steps::before {
      content: '';
      position: absolute;
      left: 15px;
      top: 32px;
      bottom: 32px;
      width: 1px;
      background: linear-gradient(to bottom, var(--cyan), var(--violet));
      opacity: .25;
    }
    .step {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 16px;
      align-items: start;
      padding: 12px 0;
    }
    .step-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
    }
    .step:nth-child(1) .step-dot { color: var(--cyan); border-color: rgba(34,211,238,.3); }
    .step:nth-child(2) .step-dot { color: var(--violet); border-color: rgba(167,139,250,.3); }
    .step:nth-child(3) .step-dot { color: var(--green); border-color: rgba(52,211,153,.3); }
    .step:nth-child(4) .step-dot { color: var(--amber); border-color: rgba(251,191,36,.3); }
    .step h3 {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-hi);
      margin-bottom: 6px;
    }
    .step p { font-size: 14px; color: var(--muted); line-height: 1.6; }
    .step code {
      font-family: var(--font-mono);
      font-size: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 7px;
      color: var(--cyan);
    }

    /* ── Capabilities ── */
    .caps {
      padding: 0 0 48px;
    }
    .caps h2 {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 24px;
    }
    .cap-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 540px) {
      .cap-grid { grid-template-columns: 1fr; }
      .hero { padding: 48px 0 36px; }
      .hero h1 { font-size: 28px; }
      .hero p { font-size: 15px; margin-bottom: 24px; }
      .cmd { padding: 12px 14px; font-size: 13px; flex-wrap: wrap; justify-content: center; }
      .cmd .copy-hint { margin-left: 0; margin-top: 6px; }
      nav { flex-wrap: wrap; gap: 8px; }
      nav a { font-size: 12px; padding: 5px 8px; }
      .code-block { font-size: 11px; padding: 14px 16px; }
    }
    .cap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 18px;
      transition: border-color .15s;
    }
    .cap:hover { border-color: var(--dim); }
    .cap-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--cyan);
      margin-bottom: 6px;
    }
    .cap p { font-size: 13px; color: var(--muted); line-height: 1.5; }

    /* ── Code example ── */
    .example {
      padding: 0 0 48px;
    }
    .example h2 {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 20px;
    }
    .code-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px 24px;
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1.7;
      overflow-x: auto;
      color: var(--text);
      white-space: pre;
    }
    .code-block .comment { color: var(--dim); }
    .code-block .str { color: var(--green); }
    .code-block .cmd-text { color: var(--cyan); }
    .code-block .output { color: var(--muted); }

    /* ── Footer ── */
    footer {
      border-top: 1px solid var(--border);
      padding: 24px 0;
      text-align: center;
      font-size: 12px;
      color: var(--dim);
      margin-top: 24px;
    }
    footer a { color: var(--muted); }

    /* ── Animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* ── Tools grid ── */
    .tools {
      padding: 0 0 48px;
    }
    .tools h2 {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 24px;
    }
    .tools-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 540px) { .tools-grid { grid-template-columns: 1fr; } }
    .tool-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      transition: border-color .15s;
    }
    .tool-item:hover { border-color: var(--dim); }
    .tool-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-hi);
      margin-bottom: 4px;
    }
    .tool-desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }
    .tool-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
      vertical-align: middle;
    }
    .badge-encrypted {
      background: rgba(167, 139, 250, .15);
      color: var(--violet);
    }
    .badge-http {
      background: rgba(34, 211, 238, .1);
      color: var(--cyan);
    }
    .tools-footer {
      margin-top: 16px;
      font-size: 13px;
      color: var(--muted);
    }

    /* ── Specialists ── */
    .specialists { text-align: center; }
    .specialists h2 { margin-bottom: 8px; }
    .specialists-sub {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 28px;
    }
    .agent-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      text-align: left;
    }
    @media (max-width: 760px) {
      .agent-cards { grid-template-columns: 1fr; }
    }
    .agent-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
    }
    .agent-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .agent-icon { font-size: 28px; line-height: 1; }
    .agent-card h3 {
      font-size: 16px;
      color: var(--text-hi);
      margin: 0;
    }
    .agent-model {
      font-size: 12px;
      color: var(--muted);
      font-family: var(--font-mono);
    }
    .agent-card p {
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      margin-bottom: 12px;
    }
    .agent-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .agent-tags .tag {
      background: var(--surface2);
      color: var(--muted);
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-family: var(--font-mono);
    }
    .specialists-hint {
      margin-top: 20px;
      font-size: 14px;
      color: var(--muted);
    }
    .specialists-hint code {
      background: var(--surface2);
      padding: 2px 8px;
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 13px;
    }
    .golden-prompt {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 18px;
      cursor: pointer;
      transition: border-color .2s;
      position: relative;
    }
    .golden-prompt:hover {
      border-color: var(--cyan);
    }
    .golden-prompt p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-hi);
      font-style: italic;
      margin: 0;
    }
    .golden-prompt .copy-hint {
      display: block;
      margin-top: 8px;
      font-size: 11px;
      color: var(--dim);
      font-style: normal;
    }
    .golden-prompt.copied { border-color: var(--green); }
    .golden-prompt.copied .copy-hint { color: var(--green); }

    /* ── CTA cards ── */
    .cta-row {
      display: flex;
      gap: 16px;
      margin-top: 24px;
    }
    .cta-card {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 22px;
      border-radius: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      text-decoration: none;
      transition: border-color .2s, background .2s, box-shadow .2s;
      position: relative;
      overflow: hidden;
    }
    .cta-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      padding: 1px;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      opacity: 0;
      transition: opacity .3s;
      pointer-events: none;
    }
    .cta-card--features::before {
      background: linear-gradient(135deg, var(--cyan), var(--violet));
    }
    .cta-card--guides::before {
      background: linear-gradient(135deg, var(--green), var(--cyan));
    }
    .cta-card:hover::before {
      opacity: 1;
    }
    .cta-card:hover {
      border-color: transparent;
      background: var(--surface2);
      text-decoration: none;
    }
    .cta-card--features:hover {
      box-shadow: 0 0 30px rgba(34, 211, 238, .15), 0 0 60px rgba(167, 139, 250, .08);
    }
    .cta-card--guides:hover {
      box-shadow: 0 0 30px rgba(52, 211, 153, .15), 0 0 60px rgba(34, 211, 238, .08);
    }
    .cta-icon {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .cta-card--features .cta-icon {
      background: linear-gradient(135deg, rgba(34, 211, 238, .15), rgba(167, 139, 250, .15));
    }
    .cta-card--guides .cta-icon {
      background: linear-gradient(135deg, rgba(52, 211, 153, .15), rgba(34, 211, 238, .15));
    }
    .cta-body {
      flex: 1;
      min-width: 0;
    }
    .cta-title {
      font-family: var(--font-ui);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-hi);
      margin-bottom: 3px;
    }
    .cta-card--features .cta-title { color: var(--cyan); }
    .cta-card--guides .cta-title { color: var(--green); }
    .cta-sub {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.4;
    }
    .cta-arrow {
      flex-shrink: 0;
      font-size: 22px;
      font-weight: 700;
      color: var(--dim);
      transition: transform .25s ease, color .25s;
    }
    .cta-card:hover .cta-arrow {
      transform: translateX(6px);
    }
    .cta-card--features:hover .cta-arrow { color: var(--cyan); }
    .cta-card--guides:hover .cta-arrow { color: var(--green); }
    .cta-hint {
      font-size: 11px;
      color: var(--dim);
      margin-top: 4px;
      transition: color .2s;
    }
    .cta-card:hover .cta-hint { color: var(--muted); }
    @media (max-width: 600px) {
      .cta-row {
        flex-direction: column;
      }
    }

    /* ── Encryption note ── */
    .enc-note {
      background: var(--surface);
      border: 1px solid rgba(167, 139, 250, .2);
      border-radius: 10px;
      padding: 14px 18px;
      margin-top: 20px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
    }
    .enc-note strong {
      color: var(--violet);
    }

    .hero, .flow, .caps, .example, .tools { animation: fadeUp .5s ease-out both; }
    .flow    { animation-delay: .1s; }
    .caps    { animation-delay: .2s; }
    .example { animation-delay: .3s; }
    .tools   { animation-delay: .35s; }