:root{
    --space-1:6px;--space-2:10px;--space-3:14px;--space-4:18px;--space-5:24px;--space-6:32px;--space-7:44px;
    --radius:20px;--radius-lg:26px;--radius-xl:34px;
    --bg:#0b1220;--band:#0f172a;--surface:#121a2a;--text:#e8eef8;--text-strong:#fff;--muted:#9aa7bb;--border:#1c2a43;
    --shadow:0 12px 28px rgba(2,6,23,.22);--shadow-soft:0 6px 18px rgba(2,6,23,.18);
    --brand:#ffdd2d;--brand-ink:#111827;--accent:#1fb6ff;--ring:rgba(255,221,45,.35);
    --table-sticky:rgba(18,26,42,.9);--table-row:rgba(255,255,255,.02);--row-hover:rgba(255,221,45,.06)
  }
  .theme-light{
    --bg:#faf7f0;--band:#f4efe5;--surface:#fff;--text:#0f172a;--text-strong:#0b1324;--muted:#6b7280;--border:#e6e7ea;
    --shadow:0 16px 40px rgba(31,41,55,.08);--shadow-soft:0 8px 24px rgba(31,41,55,.06);
    --brand:#ffdd2d;--brand-ink:#111827;--accent:#2563eb;--ring:rgba(255,221,45,.35);
    --table-sticky:#ffffffee;--table-row:#fff;--row-hover:#ffdd2d10
  }

  .visually-hidden:not(:focus):not(:active){position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  a.visually-hidden:focus,a.visually-hidden:active{position:fixed!important;left:16px;top:16px;margin:0;padding:10px 14px;clip:auto;clip-path:none;background:var(--brand);color:var(--brand-ink);border-radius:12px;box-shadow:var(--shadow);z-index:1000;text-decoration:none}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--text);background:var(--bg);line-height:1.65;letter-spacing:.1px}
  a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
  .container{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-5)}
  .band{background:var(--band)}

  header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
  .nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}
  .brand{display:flex;align-items:center;gap:var(--space-3)}
  .brand__logo{width:36px;height:36px;border-radius:12px;background:var(--brand);box-shadow:0 10px 26px rgba(255,221,45,.38),inset 0 0 0 1px #00000012}
  .brand__name{font-weight:800;color:var(--text-strong)}
  .nav__links{display:flex;justify-self:center;gap:var(--space-2)}
  .nav__links a{color:var(--muted);padding:8px 12px;border-radius:999px;border:1px solid transparent}
  .nav__links a:hover{color:var(--text);background:#00000007;border-color:var(--border)}
  .theme-switch{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:transparent;color:var(--text);border:1px solid var(--border);cursor:pointer}
  .theme-switch:focus-visible{outline:none;box-shadow:0 0 0 6px var(--ring)}
  .theme-dark .icon-sun{display:none}.theme-light .icon-moon{display:none}

  .hero{display:grid;grid-template-columns:1fr .9fr;gap:var(--space-6);align-items:center;padding:var(--space-7) 0}
  .eyebrow{color:var(--muted);font-weight:600;margin-bottom:var(--space-2)}
  h1{margin:0 0 var(--space-3);font-weight:800;font-size:clamp(32px,4.6vw,58px);line-height:1.08;color:var(--text-strong)}
  .subtitle{color:var(--muted);max-width:64ch}
  .cta{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;border:1px solid #00000012;font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow-soft);transition:transform .15s ease,filter .2s ease}
  .btn:active{transform:translateY(0) scale(.99)}
  .btn-primary{background:var(--brand);color:var(--brand-ink)}.btn-primary:hover{filter:brightness(1.03)}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}.btn-ghost:hover{background:#00000008}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);backdrop-filter:blur(6px)}
  .section{margin:var(--space-7) 0}

  .rates{padding:var(--space-4)}
  .rates__head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
  .rates__meta{color:var(--muted);font-size:14px}
  .table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--border)}
  table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;background:var(--table-row)}
  thead th{position:sticky;top:0;background:var(--table-sticky);text-align:left;padding:12px 14px;font-size:13px;color:#1f2937;border-bottom:1px solid var(--border)}
  .theme-dark thead th{color:#e6eef8}
  tbody td{padding:12px 14px;border-bottom:1px dashed var(--border)}
  tbody tr:hover{background:var(--row-hover)}

  .converter{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);padding:var(--space-4)}
  .field{display:flex;flex-direction:column;gap:6px}
  .field input,.field select{padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:#ffffff10;color:var(--text);outline:none}
  .theme-light .field input,.theme-light .field select{background:#fff}
  .field input:focus,.field select:focus{box-shadow:0 0 0 6px var(--ring);border-color:transparent}

  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);padding:var(--space-4)}
  .step-card{padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
  .step-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-weight:800;margin-bottom:var(--space-2);box-shadow:0 6px 16px rgba(255,221,45,.35)}

  details{border:1px solid var(--border);border-radius:16px;padding:12px 14px;background:var(--surface)}
  details+details{margin-top:10px}
  summary{cursor:pointer;font-weight:700}

  footer{border-top:1px solid var(--border)}
  .foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);padding:var(--space-5) var(--space-3)}
  .muted{color:var(--muted)}

  /* адаптив */
  @media (max-width:1024px){.hero{grid-template-columns:1fr}}
  @media (max-width:960px){
    .grid-3{grid-template-columns:1fr}
    .converter{grid-template-columns:1fr}
    /* скрываем горизонтальное меню на узких экранах */
    .nav__links{display:none}
  }
  @media (max-width:720px){
    thead{display:none}
    .table-wrap{border:0}
    table{min-width:0;background:transparent}
    tbody{display:grid;gap:10px}
    tbody tr{display:block;background:var(--table-row);border:1px solid var(--border);border-radius:16px;overflow:hidden}
    tbody td{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:10px 12px;border-bottom:1px dashed var(--border);font-size:15px}
    tbody td:last-child{border-bottom:0}
    tbody td:nth-child(1)::before{content:'Валюта';color:var(--muted);font-size:12px}
    tbody td:nth-child(2)::before{content:'Покупка';color:var(--muted);font-size:12px}
    tbody td:nth-child(3)::before{content:'Продажа';color:var(--muted);font-size:12px}
    tbody td:nth-child(4)::before{content:'Мин. сумма';color:var(--muted);font-size:12px}
    tbody td:nth-child(5)::before{content:'Макс. сумма';color:var(--muted);font-size:12px}
    tbody td:nth-child(6)::before{content:'Примечание';color:var(--muted);font-size:12px}
    .foot{grid-template-columns:1fr}
  }