/* ── Nav ── */
    nav {
      position: sticky; top: 0; z-index: 100; width: 100%; height: 60px;
      background: rgba(255,255,255,0.88); border-bottom: 1px solid var(--page-border);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }
    .nav-inner { max-width: 1080px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
    .nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
    .nav-wordmark { font-weight: 700; font-size: 17px; color: var(--text-1); letter-spacing: -0.01em; }
    .nav-links { display: flex; align-items: center; gap: 32px; }
    .nav-link { font-size: 13px; color: var(--text-2); text-decoration: none; transition: color 150ms ease; }
    .nav-link:hover { color: var(--text-1); }
    .nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px; margin-right: 88px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 500; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background 150ms ease; }
    .nav-cta:hover { background: var(--teal-bright); }
    .nav-cta-mobile { display: none; align-items: center; justify-content: center; height: 30px; padding: 0 12px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 500; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background 150ms ease; }
    .nav-cta-mobile:hover { background: var(--teal-bright); }
    .btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; background: var(--teal); color: #fff; font-size: 14px; font-weight: 500; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; transition: background 150ms ease; position: relative; overflow: hidden; line-height: 1.2; }
    .btn-primary:hover { background: var(--teal-bright); }
    .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); transform: translateX(-100%); transition: transform 0s; }
    .btn-primary:hover::before { transform: translateX(100%); transition: transform 0.5s ease; }
    .btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; background: transparent; color: var(--text-2); font-size: 14px; font-weight: 500; border-radius: 8px; text-decoration: none; border: 1px solid var(--page-border); cursor: pointer; transition: border-color 150ms ease, color 150ms ease; line-height: 1.2; }
    .btn-ghost:hover { border-color: var(--page-border-active); color: var(--text-1); }
    .pill-btn { display: inline-flex; align-items: center; padding: 5px 12px; background: var(--surface); color: var(--comp-text-2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: var(--font-mono); cursor: pointer; white-space: nowrap; transition: border-color 150ms ease, color 150ms ease; }
    .pill-btn:hover { border-color: var(--border-active); color: var(--comp-text-1); }
    .pill-btn:active { transform: scale(0.97); }
    .schema-code-block { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--comp-text-1); overflow-x: auto; min-height: 300px; }
    .stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 32px; }
    .stat-cell { background: var(--bg-2); padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
    .stat-value { font-size: 28px; font-weight: 700; color: var(--comp-text-1); letter-spacing: -0.02em; line-height: 1; }
    .stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--comp-text-3); text-transform: uppercase; letter-spacing: 0.06em; }
    .flow-stat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .flow-stat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; font-family: var(--font-mono); font-size: 11px; color: var(--comp-text-3); }
    .pill-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }

    /* ── Pricing ── */
    .pricing-section { background: var(--page-bg); padding: 96px 24px; position: relative; }
    .pricing-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--page-border) 30%, var(--page-border) 70%, transparent); }
    .pricing-anchor {
      margin-top: 16px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--comp-text-3);
      line-height: 1.6;
    }
    .email-form { display: flex; gap: 8px; margin-top: 28px; }
    .email-input { flex: 1; height: 42px; padding: 0 16px; background: var(--page-bg); border: 1px solid var(--page-border); border-radius: 8px; font-family: var(--font-sans); font-size: 14px; color: var(--text-1); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; }
    .email-input::placeholder { color: var(--text-3); }
    .email-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }
    .email-submit { height: 42px; padding: 0 20px; background: var(--teal); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 150ms ease; }
    .email-submit:hover { background: var(--teal-bright); }

    /* ── Footer ── */
    footer { border-top: 1px solid var(--page-border); padding: 28px 24px; background: var(--page-bg); }
    .footer-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
    .footer-brand { display: flex; align-items: center; gap: 8px; }
    .footer-links {
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; flex: 1 1 auto; }
    .footer-link { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-decoration: none; transition: color 150ms ease; }
    .footer-link:hover { color: var(--text-2); }
    .footer-link[aria-current="page"] { color: var(--text-2); }
    .footer-copy { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
    .code-panel { background:var(--bg); border:1px solid var(--border); border-radius:10px; overflow:hidden; position: relative; }
    .code-panel::after { content: ''; position: absolute; top: -100%; left: 0; right: 0; height: 40%; background: linear-gradient(to bottom, transparent 0%, rgba(45, 212, 191, 0.03) 50%, transparent 100%); animation: scan-line 8s linear infinite; pointer-events: none; }
    .code-panel-bar { height:32px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
    .code-panel-dots { display:flex; gap:6px; }
    .code-panel-dot { width:10px; height:10px; border-radius:50%; }
    .code-panel-label { font-family:var(--font-mono); font-size:12px; color:var(--comp-text-3); }
    .code-panel-body { padding:20px; font-family:var(--font-mono); font-size:13px; line-height:1.8; color:var(--comp-text-1); overflow-x:auto; }
    .code-panel-footer { height:32px; background:var(--surface); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
    .code-panel-status { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--comp-text-3); }
    .method-badge { width:52px; flex-shrink:0; font-family:var(--font-mono); font-size:11px; font-weight:600; text-align:center; padding:3px 0; border-radius:4px; }
    .method-get { background:var(--surface-2); color:var(--comp-text-2); }
    .method-post { background:var(--teal-dim); color:var(--teal-bright); }
    .code-snippet { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:16px 20px; font-family:var(--font-mono); font-size:13px; line-height:1.7; margin-top:20px; overflow-x:auto; color:var(--comp-text-1); }
    .founder-widget-footer { height: 32px; background: var(--surface); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; color: var(--comp-text-3); }