/* ============================================================
       SIGNAL & WIRE - design tokens
       LED semantics from the product itself:
       HIT = green · MISS/activity = amber · BLOCK = red
       ============================================================ */
    :root {
      --paper: #FAF9F5;
      --panel: #F2F0EA;
      --ink: #171A1F;
      --ink-soft: #5A6069;
      --ink-faint: #8B9099;
      --line: #E4E1D8;
      --line-strong: #CFCBBF;

      --amber: #ED9410;
      --amber-deep: #8F5A00;
      --amber-soft: #FBEED6;

      --hit: #2E9E44;
      --hit-deep: #1F7A33;
      --hit-soft: #E3F3E6;

      --block: #D64545;
      --block-soft: #FBE7E7;

      --term: #101318;
      --term-panel: #171B22;
      --term-line: #262C36;
      --term-text: #C9CFD8;
      --term-dim: #6B7280;

      --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
      --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

      --radius: 6px;
      --container: 1120px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.65;
      font-size: 16.5px;
      -webkit-font-smoothing: antialiased;
    }

    ::selection { background: var(--amber-soft); color: var(--amber-deep); }

    .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

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

    h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; }

    /* ---------- HTTP-header eyebrow motif (signature) ---------- */
    .hdr {
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.01em;
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      margin-bottom: 14px;
    }
    .hdr .k { color: var(--ink-faint); }
    .hdr .v { color: var(--amber-deep); font-weight: 500; }

    /* ---------- Status pills (HIT / MISS / BLOCK) ---------- */
    .pill {
      font-family: var(--mono);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 2px 9px;
      border-radius: 3px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .pill::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: currentColor;
    }
    .pill-hit   { color: var(--hit-deep);  background: var(--hit-soft); }
    .pill-miss  { color: var(--amber-deep); background: var(--amber-soft); }
    .pill-block { color: var(--block);      background: var(--block-soft); }
    .pill-off   { color: var(--ink-faint);  background: var(--panel); }


    /* ---------- Hero ---------- */
    .hero {
      padding: 88px 0 72px;
      border-bottom: 1px solid var(--line);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 56px;
      align-items: center;
    }
    @media (max-width: 940px) {
      .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    }
    .hero h1 {
      font-size: clamp(34px, 4.6vw, 52px);
      font-weight: 700;
      margin: 18px 0 20px;
    }
    .hero h1 .u {
      color: var(--amber-deep);
      position: relative;
      white-space: nowrap;
    }
    .hero h1 .u::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 3px;
      height: 8px;
      background: var(--amber-soft);
      z-index: -1;
    }
    .hero .lead {
      font-size: 18px;
      color: var(--ink-soft);
      max-width: 540px;
      margin-bottom: 30px;
    }
    .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
    .hero-note {
      font-family: var(--mono);
      font-size: 12.5px;
      color: var(--ink-faint);
    }

    /* ---------- Terminal (signature element) ---------- */
    .term {
      background: var(--term);
      border-radius: 10px;
      border: 1px solid var(--term-line);
      box-shadow: 0 24px 60px -24px rgba(23, 26, 31, 0.45);
      overflow: hidden;
    }
    .term-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 16px;
      border-bottom: 1px solid var(--term-line);
      background: var(--term-panel);
    }
    .term-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--term-line); }
    .term-title {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--term-dim);
    }
    .term-body {
      padding: 20px 22px 24px;
      font-family: var(--mono);
      font-size: 13.5px;
      line-height: 1.85;
      color: var(--term-text);
      min-height: 285px;
    }
    .t-dim   { color: var(--term-dim); }
    .t-amber { color: var(--amber); }
    .t-hit   { color: #4CC968; }
    .t-key   { color: #8FA3BF; }
    .t-cursor {
      display: inline-block;
      width: 8px; height: 15px;
      background: var(--amber);
      vertical-align: -2px;
      animation: blink 1.05s steps(1) infinite;
    }
    @keyframes blink { 50% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .t-cursor { animation: none; }
      html { scroll-behavior: auto; }
    }

    /* ---------- Sections ---------- */
    section { padding: 84px 0; }
    section.alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .section-head { max-width: 640px; margin-bottom: 48px; }
    .section-head h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 12px; }
    .section-head p { color: var(--ink-soft); font-size: 17px; }

    /* ---------- Flow strip ---------- */
    .flow {
      display: flex;
      align-items: stretch;
      gap: 0;
      margin-top: 46px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }
    .flow-node {
      flex: 1;
      padding: 18px 16px;
      text-align: center;
      font-family: var(--mono);
      font-size: 13px;
      color: var(--ink-soft);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .flow-node strong { font-family: var(--sans); font-size: 15px; color: var(--ink); font-weight: 600; }
    .flow-node.core {
      background: var(--ink);
      color: var(--term-dim);
      flex: 1.4;
    }
    .flow-node.core strong { color: var(--paper); }
    .flow-node.core .flow-tags { color: var(--amber); font-size: 11.5px; }
    .flow-sep {
      width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-faint);
      font-family: var(--mono);
      border-left: 1px dashed var(--line);
      border-right: 1px dashed var(--line);
      background: var(--paper);
    }
    @media (max-width: 640px) {
      .flow { flex-direction: column; }
      .flow-sep { width: 100%; height: 34px; border: none; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
      .flow-sep svg { transform: rotate(90deg); }
    }

    /* ---------- Feature groups ---------- */
    .feature-groups { display: flex; flex-direction: column; gap: 52px; }
    .feature-group-label {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--ink-faint);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .feature-group-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line);
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 18px;
    }
    .feature-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px 22px;
      transition: border-color .15s ease, transform .15s ease;
    }
    .feature-card:hover { border-color: var(--amber); transform: translateY(-2px); }
    .feature-card h3 { font-size: 16px; margin-bottom: 6px; }
    .feature-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

    /* ---------- Use cases ---------- */
    .usecase-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      gap: 18px;
    }
    .usecase {
      background: #fff;
      border: 1px solid var(--line);
      border-left: 3px solid var(--amber);
      border-radius: var(--radius);
      padding: 22px 24px;
    }
    .usecase h3 { font-size: 16.5px; margin-bottom: 8px; }
    .usecase p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

    /* ---------- Capability list (rule-file styling) ---------- */
    .cap-file {
      background: #fff;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      overflow: hidden;
      max-width: 880px;
    }
    .cap-file-head {
      font-family: var(--mono);
      font-size: 12.5px;
      color: var(--ink-faint);
      background: var(--panel);
      border-bottom: 1px solid var(--line);
      padding: 10px 20px;
    }
    .cap-row {
      display: flex;
      gap: 18px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
      align-items: baseline;
    }
    .cap-row:last-child { border-bottom: none; }
    .cap-row .ln {
      font-family: var(--mono);
      font-size: 12.5px;
      color: var(--ink-faint);
      min-width: 26px;
      text-align: right;
      user-select: none;
    }
    .cap-row p { font-size: 15px; color: var(--ink); line-height: 1.55; }

    /* ---------- Comparison table ---------- */
    .compare-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }
    table.compare { width: 100%; border-collapse: collapse; min-width: 680px; }
    .compare th, .compare td {
      padding: 14px 18px;
      text-align: left;
      font-size: 14.5px;
      border-bottom: 1px solid var(--line);
    }
    .compare thead th {
      font-family: var(--mono);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-faint);
      background: var(--panel);
      letter-spacing: 0.02em;
    }
    .compare thead th:first-child { width: 32%; }
    .compare tbody tr:last-child td { border-bottom: none; }
    .compare td:first-child { color: var(--ink-soft); }
    .compare-note {
      font-size: 14.5px;
      color: var(--ink-soft);
      max-width: 720px;
      margin-top: 22px;
    }

    /* ---------- Platform cards ---------- */
    .plat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
    .plat-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
    }
    .plat-card svg { width: 30px; height: 30px; color: var(--ink); margin-bottom: 14px; }
    .plat-card h3 { font-size: 17px; margin-bottom: 12px; }
    .plat-card ul { list-style: none; }
    .plat-card li {
      font-size: 14.5px;
      color: var(--ink-soft);
      padding: 5px 0 5px 20px;
      position: relative;
    }
    .plat-card li::before {
      content: '·';
      position: absolute;
      left: 4px;
      color: var(--amber);
      font-weight: 700;
    }

    /* ---------- Download ---------- */
    .download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 720px; }
    .download-card {
      display: flex;
      align-items: center;
      gap: 18px;
      background: #fff;
      border: 1.5px solid var(--line-strong);
      border-radius: 8px;
      padding: 22px 24px;
      text-decoration: none !important;
      color: var(--ink);
      transition: border-color .15s ease, transform .15s ease;
    }
    .download-card:hover { border-color: var(--ink); transform: translateY(-2px); }
    .download-card > svg:first-child { width: 34px; height: 34px; flex-shrink: 0; }
    .download-card h3 { font-size: 17px; }
    .download-card p { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
    .download-arrow { width: 20px; height: 20px; margin-left: auto; color: var(--amber-deep); }

    /* ---------- Steps ---------- */
    .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
    .step {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      position: relative;
    }
    .step-num {
      font-family: var(--mono);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--amber-deep);
      background: var(--amber-soft);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 10px;
      border-radius: 3px;
      margin-bottom: 14px;
    }
    .step h3 { font-size: 16.5px; margin-bottom: 8px; }
    .step p { font-size: 14.5px; color: var(--ink-soft); }

    /* ---------- Pricing ---------- */
    .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
    .price-card {
      background: #fff;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      padding: 30px 28px;
      display: flex;
      flex-direction: column;
    }
    .price-card.hi { border: 1.5px solid var(--amber); box-shadow: 0 12px 36px -18px rgba(237,148,16,0.35); }
    .price-plan {
      font-family: var(--mono);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--ink-faint);
      margin-bottom: 16px;
    }
    .price-card.hi .price-plan { color: var(--amber-deep); }
    .price-tag { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
    .price-tag span { font-size: 15px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
    .price-sub { font-size: 14px; color: var(--ink-soft); margin: 10px 0 20px; min-height: 44px; }
    .price-features { list-style: none; margin-bottom: 26px; flex: 1; }
    .price-features li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14.5px;
      padding: 6px 0;
      color: var(--ink);
    }
    .price-features li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--hit-deep); }
    .price-features li.off { color: var(--ink-faint); }
    .price-features li.off svg { color: var(--line-strong); }
    .pay-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 36px;
    }
    .pay-row svg { width: 28px; height: 28px; }
    .fine {
      font-family: var(--mono);
      font-size: 12.5px;
      color: var(--ink-faint);
      text-align: center;
      margin-top: 12px;
    }
    .fine a { color: var(--amber-deep); }

    /* ---------- FAQ ---------- */
    .faq-list { max-width: 780px; }
    .faq-item {
      border-bottom: 1px solid var(--line);
      padding: 24px 0;
    }
    .faq-item:first-child { border-top: 1px solid var(--line); }
    .faq-item h3 { font-size: 17px; margin-bottom: 10px; }
    .faq-item p { font-size: 15px; color: var(--ink-soft); }

    /* ---------- CTA banner ---------- */
    .cta-banner {
      background: var(--term);
      border-radius: 12px;
      padding: 60px 40px;
      text-align: center;
      color: var(--paper);
      position: relative;
      overflow: hidden;
    }
    .cta-banner::before {
      content: 'Sidien-Cache: HIT';
      position: absolute;
      top: 22px; left: 28px;
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--term-dim);
    }
    .cta-banner h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
    .cta-banner p { color: var(--term-dim); margin-bottom: 26px; font-size: 16.5px; }

    /* ---------- Footer ---------- */
    footer { padding: 44px 0 52px; border-top: 1px solid var(--line); }
    .footer-wrap { display: flex; flex-direction: column; gap: 12px; }
    .footer-wrap .logo { height: 22px; width: auto; color: var(--ink-faint); }
    .footer-wrap p { font-size: 13.5px; color: var(--ink-faint); font-family: var(--mono); }

    /* ---------- Modal ---------- */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(23, 26, 31, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 20px;
    }
    .modal-overlay.is-open { display: flex; }
    .modal-box {
      background: var(--paper);
      border-radius: 10px;
      max-width: 440px;
      width: 100%;
      padding: 32px;
      position: relative;
      border: 1px solid var(--line-strong);
    }
    .modal-close {
      position: absolute; top: 14px; right: 16px;
      background: none; border: none;
      font-size: 26px; line-height: 1;
      color: var(--ink-faint);
      cursor: pointer;
    }
    .modal-box h3 { font-size: 20px; margin-bottom: 10px; }
    .modal-box > p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px; }
    .modal-email-row {
      display: flex;
      gap: 10px;
      align-items: center;
      background: #fff;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      padding: 10px 14px;
    }
    .modal-email-row code { font-family: var(--mono); font-size: 14px; flex: 1; }

    /* ---------- Scroll reveal ---------- */
    /* JS yüklenemezse veya IntersectionObserver yoksa hepsini göster */
    .no-js
    @media (prefers-reduced-motion: reduce) {
    }