/* ===== Токены темы (default: Dark) ===== */
    :root{
      --bg:#0f0f13;
      --bg2:#17171f;
      --text:#c8c8cc;
      --muted:#9a9aa0;
      --silver:#c0c0c0;
      --silver-strong:#e4e4e7;
      --ring:rgba(255,255,255,.08);
      --card:#121219;
      --shadow: 0 10px 30px rgba(0,0,0,.45);
      --grad-a: radial-gradient(1200px 1200px at 80% -10%, #1f2431 0%, transparent 60%);
      --grad-b: radial-gradient(900px 900px at 10% 120%, #1b1f29 0%, transparent 60%);
      --theme-color:#0f0f13;
    }
    /* Светлая тема — созвучна тёмной */
    html[data-theme="light"]{
      --bg:#f6f8fc;
      --bg2:#eef2f9;
      --text:#1b1d22;
      --muted:#555a66;
      --silver:#8f96a3;
      --silver-strong:#14161a;
      --ring:rgba(0,0,0,.08);
      --card:#ffffffcc;
      --shadow: 0 10px 30px rgba(0,0,0,.12);
      --grad-a: radial-gradient(1200px 1200px at 80% -10%, #e9eefb 0%, transparent 60%);
      --grad-b: radial-gradient(900px 900px at 10% 120%, #f2f6ff 0%, transparent 60%);
      --theme-color:#f6f8fc;
    }

    *{box-sizing:border-box}
    html, body { height:auto; min-height:100%; overflow-x:hidden; }
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Helvetica Neue",Helvetica,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
      color:var(--text);
      background: var(--grad-a), var(--grad-b), linear-gradient(180deg, var(--bg), var(--bg2));
      transition: background-color .25s ease, color .25s ease;
    }

    /* Canvas + overlay */
    #bg{ position:fixed; inset:0; z-index:-2; }
    .overlay{
      position:fixed; inset:0; pointer-events:none; z-index:-1;
      background:
        radial-gradient(120% 120% at 50% 50%, transparent 0%, transparent 60%, rgba(0,0,0,.22) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 2px);
    }
    html[data-theme="light"] .overlay{
      background:
        radial-gradient(120% 120% at 50% 50%, transparent 0%, transparent 75%, rgba(0,0,0,.03) 100%),
        repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 2px);
    }

    .wrap{ position:relative; padding:40px 20px 60px; display:flex; justify-content:center; }
    .card{
      width:min(900px, 92vw);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
      border:1px solid var(--ring);
      border-radius:24px;
      box-shadow:var(--shadow);
      backdrop-filter: blur(6px) saturate(120%);
      -webkit-backdrop-filter: blur(6px) saturate(120%);
      padding:42px;
    }
    html[data-theme="light"] .card{
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.82));
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
    }

    /* Верхняя строка: логотип + переключатель */
    .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
    .logo{ display:flex; align-items:center; gap:14px; }
    .logo-mark{
      width:42px; height:42px; border-radius:12px;
      background: conic-gradient(from 210deg, #ffffff 0 10%, #c0c0c0 10% 30%, #7a7a7a 30% 55%, #f4f4f4 55% 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 20px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.35);
      position:relative; flex:0 0 42px;
    }
    .logo-mark::after{ content:""; position:absolute; inset:2px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
    html[data-theme="light"] .logo-mark{
      background: conic-gradient(from 210deg, #d9d9d9 0 10%, #ffffff 10% 30%, #bcbcbc 30% 55%, #f7f7f7 55% 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -10px 20px rgba(0,0,0,.08), 0 8px 22px rgba(0,0,0,.12);
    }
    .brand{ font-size:1.1rem; letter-spacing:.18em; color:var(--silver-strong); white-space:nowrap; }

    /* Маленькая кнопка-переключатель без текста */
    .theme-toggle{
      width:40px; height:40px; padding:0;
      display:flex; align-items:center; justify-content:center;
      border:1px solid var(--ring); background:transparent; border-radius:999px;
      cursor:pointer; color:var(--silver-strong);
      transition: background .2s ease, transform .06s ease;
    }
    .theme-toggle:hover{ background: rgba(255,255,255,.06); }
    html[data-theme="light"] .theme-toggle:hover{ background: rgba(0,0,0,.04); }
    .theme-toggle:active{ transform: translateY(0.5px); }
    .theme-toggle svg{ display:block; width:20px; height:20px; transition: transform .28s ease, opacity .18s ease; }

    h1{
      margin:12px 0 14px; font-size:clamp(32px, 6vw, 64px);
      line-height:1.05; letter-spacing:.04em; color:var(--silver-strong);
      text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.18);
    }
    html[data-theme="light"] h1{ text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(0,0,0,.06); }
    .shine{
      background: linear-gradient(90deg, #cccccc 0%, #ffffff 20%, #bdbdbd 40%, #e9e9e9 60%, #bfbfbf 80%);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      animation: shimmer 3.5s infinite; background-size:200% 100%;
    }
    /* В светлой теме — сплошной тёмный цвет для читабельности */
    html[data-theme="light"] .shine{
      background: none !important;
      -webkit-background-clip: initial; background-clip: initial;
      color: var(--silver-strong) !important;
      animation: none !important;
      text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 1px rgba(0,0,0,.04);
    }
    @keyframes shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }

    .tagline{ font-size:clamp(16px, 2.4vw, 20px); color:var(--muted); margin:0 0 22px; }
    .list{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px; padding:0; list-style:none; }
    .chip {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip a {
  color: var(--silver-strong);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--ring);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

html[data-theme="light"] .chip a {
  background: #ffffffcc;
  color: var(--text);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.chip a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

html[data-theme="light"] .chip a:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
    .cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
    .btn{
      appearance:none; border:none; cursor:pointer; padding:14px 18px; border-radius:14px; font-weight:600; letter-spacing:.02em;
      background: linear-gradient(180deg, #e7e7ea, #bfc0c4); color:#111;
      box-shadow: 0 6px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35);
      transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
      text-decoration:none; display:inline-flex; align-items:center; gap:10px;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45); }
    .btn:active{ transform: translateY(0); }
    .btn--ghost{ background:transparent; color:var(--silver-strong); border:1px solid var(--ring); }
    .btn--ghost:hover{ background: rgba(255,255,255,.06); }
    html[data-theme="light"] .btn--ghost:hover{ background: rgba(0,0,0,.04); }

    .split{ display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center; }
    .panel{ background:var(--card); border:1px solid var(--ring); border-radius:18px; padding:18px 18px 10px; box-shadow:var(--shadow); }
    .panel h3{ margin:0 0 6px; font-size:16px; letter-spacing:.06em; color:var(--silver); }
    .panel p{ margin:0 0 10px; color:var(--text); font-size:15px; line-height:1.6; }
    .hr{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); margin:12px 0; }
    html[data-theme="light"] .hr{ background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent); }
    .articles{ margin-top:26px; }
    .articles-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
    .article-card{ padding:22px 22px 18px; min-height:100%; }
    .article-card h3{ min-height:2.5em; }
    .article-card .btn{ margin-top:8px; justify-content:center; }
    .article-card--featured{
      transform: translateY(-4px);
      box-shadow: 0 16px 34px rgba(0,0,0,.28);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
    }
    html[data-theme="light"] .article-card--featured{
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
      box-shadow: 0 16px 34px rgba(0,0,0,.14);
    }
    .article-actions{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
    .article-actions .btn{ width:100%; margin-top:0; }

    .footer{ margin-top:26px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
    .dot{ width:8px; height:8px; border-radius:50%; background:#6ee7a3; box-shadow:0 0 12px #6ee7a3aa; display:inline-block; margin-right:8px; }

    /* Мобильная адаптация */
    @media (max-width: 768px){
      .wrap{ display:block; padding:20px 10px 36px; }
      .card{ padding:20px; border-radius:16px; }
      .split{ grid-template-columns:1fr; gap:18px; }
      .articles-grid{ grid-template-columns:1fr; gap:14px; }
      .article-card--featured{ transform:none; }
      .cta{ flex-direction:column; gap:10px; }
      .btn, .btn--ghost{ width:100%; justify-content:center; }
      .brand{ font-size:.98rem; }
      .theme-toggle{ width:36px; height:36px; }
      .theme-toggle svg{ width:18px; height:18px; }
    }