:root{
  color-scheme: light;
  --bg:#f7f6f3; --panel:#ffffff; --panel-hover:#fcfcfa;
  --ink:#17171a; --ink-2:#65646a; --ink-3:#9b9aa1;
  --border:rgba(23,23,26,.10);
  --accent:#2f5bff;

  --r-instr:#2f5bff; --r-dash:#7a3ff2; --r-doc:#e0631a; --r-wip:#c98a06; --r-partner:#0f9a63; --r-home:#e23577;

  --font: -apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;

  /* glossy chrome tokens (nav + silver buttons) — swapped for dark below */
  --nav-grad-top:#ffffff; --nav-grad-bottom:#f1f0ec; --nav-shadow-hi:rgba(255,255,255,.8);
  --btn-grad-top:#fdfdfc; --btn-grad-mid:#ece9e3; --btn-grad-bottom:#d7d4cc;
  --btn-border:rgba(0,0,0,.15); --btn-text-shadow:0 1px 0 rgba(255,255,255,.7);
  --btn-shadow-hi:rgba(255,255,255,.9); --btn-shadow-lo:rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#141416; --panel:#1e1e21; --panel-hover:#25252a;
    --ink:#f2f2f4; --ink-2:#9d9da3; --ink-3:#6f6f75;
    --border:rgba(255,255,255,.10);
    --nav-grad-top:#1c1c1f; --nav-grad-bottom:#0f0f11; --nav-shadow-hi:rgba(255,255,255,.06);
    --btn-grad-top:#4a4a4f; --btn-grad-mid:#333338; --btn-grad-bottom:#1d1d20;
    --btn-border:rgba(255,255,255,.18); --btn-text-shadow:0 -1px 0 rgba(0,0,0,.5);
    --btn-shadow-hi:rgba(255,255,255,.14); --btn-shadow-lo:rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#141416; --panel:#1e1e21; --panel-hover:#25252a;
  --ink:#f2f2f4; --ink-2:#9d9da3; --ink-3:#6f6f75;
  --border:rgba(255,255,255,.10);
  --nav-grad-top:#1c1c1f; --nav-grad-bottom:#0f0f11; --nav-shadow-hi:rgba(255,255,255,.06);
  --btn-grad-top:#4a4a4f; --btn-grad-mid:#333338; --btn-grad-bottom:#1d1d20;
  --btn-border:rgba(255,255,255,.18); --btn-text-shadow:0 -1px 0 rgba(0,0,0,.5);
  --btn-shadow-hi:rgba(255,255,255,.14); --btn-shadow-lo:rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;text-decoration:none;}

/* ---- Nav: chrome-like gradient, nod to old tab-strip. Works standalone, no wrapper needed. ---- */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  max-width:1120px;margin:0 auto;
  background:linear-gradient(180deg,var(--nav-grad-top) 0%,var(--nav-grad-bottom) 100%);
  box-shadow:inset 0 1px 0 var(--nav-shadow-hi), 0 1px 0 rgba(0,0,0,.05);
  padding:16px calc(24px + env(safe-area-inset-right)) 16px calc(24px + env(safe-area-inset-left));
  padding-top:calc(16px + env(safe-area-inset-top));
}
.brand{font-weight:800;font-size:15px;letter-spacing:-.01em;}
.nav .links{display:flex;gap:22px;font-size:13px;color:var(--ink-2);font-weight:600;}
.nav .links a:hover{color:var(--ink);}
.nav .back{font-size:13px;font-weight:600;color:var(--ink-2);}
.nav .back:hover{color:var(--ink);}

/* ---- Hero: light editorial, replaces old dark hero everywhere ---- */
.hero{
  max-width:1120px;margin:0 auto;border-bottom:1px solid var(--border);
  padding:36px calc(24px + env(safe-area-inset-right)) 46px calc(24px + env(safe-area-inset-left));
}
.hero .eyebrow, .hero .kicker{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;}
.hero h1{font-size:clamp(34px,6vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 16px;max-width:780px;text-wrap:balance;}
.hero p{font-size:clamp(15px,1.6vw,18px);color:var(--ink-2);max-width:520px;margin:0;line-height:1.5;text-wrap:balance;}

/* ---- Buttons: glossy pill, nod to "tech specs / take a spin" bar ---- */
.cta-row, .hero-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;}
.btn, .pill-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,var(--btn-grad-top) 0%,var(--btn-grad-mid) 45%,var(--btn-grad-bottom) 100%);
  border:1px solid var(--btn-border);
  box-shadow:inset 0 1px 0 var(--btn-shadow-hi), inset 0 -1px 1px var(--btn-shadow-lo), 0 1px 2px rgba(0,0,0,.12);
  text-shadow:var(--btn-text-shadow);
  transition:transform .1s ease, box-shadow .1s ease;
  cursor:pointer;
}
.btn:hover, .pill-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--btn-shadow-hi), inset 0 -1px 1px var(--btn-shadow-lo), 0 3px 8px rgba(0,0,0,.2);}
.btn-primary, .pill-btn.primary{
  color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);
  background:linear-gradient(180deg,#4c8dff 0%,#2f5bff 50%,#1c3fd1 100%);
  border-color:#1c3fd1;
}
.btn-secondary{color:var(--ink);}

/* ---- Generic content section wrapper (replaces old .section) ---- */
.section, .wrap{max-width:1120px;margin:0 auto;padding:40px calc(24px + env(safe-area-inset-right)) 60px calc(24px + env(safe-area-inset-left));}
.section-tight{padding-top:24px;padding-bottom:24px;}
.section h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px;}
.section .lede{font-size:14.5px;color:var(--ink-2);max-width:620px;margin:0 0 20px;line-height:1.5;}

/* ---- Simple card grid (standalone sub-page sections, e.g. idoc "Что умеет") ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px 22px;transition:background .15s ease;}
.card:hover{background:var(--panel-hover);}
.card h3{font-size:16px;font-weight:700;margin:8px 0 6px;letter-spacing:-.005em;}
.card p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5;}

/* ---- Glossy category tag: gradient + inner highlight, nod to old glassy Apple buttons ---- */
.tag{
  display:inline-block;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 10px;border-radius:99px;color:#fff;
  --c: var(--ink-3);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 75%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 1px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
  border:1px solid color-mix(in srgb, var(--c) 55%, #000);
  text-shadow:0 -1px 0 rgba(0,0,0,.25);
}

footer{
  max-width:1120px;margin:0 auto;font-size:12px;color:var(--ink-3);border-top:1px solid var(--border);
  padding:28px calc(24px + env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}
footer a{color:var(--accent);}

/* =====================================================================
   Hub-specific patterns (root index.html + hub.js-driven partner/family/bgh)
   ===================================================================== */

/* ---- Desktop: editorial index grid ---- */
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);}
.cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 24px;display:flex;flex-direction:column;gap:10px;min-height:186px;position:relative;background:var(--panel);transition:background .15s ease;}
.cell:hover{background:var(--panel-hover);}
.cell-top{display:flex;align-items:flex-start;justify-content:space-between;}
.num{font-size:12px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.cell h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:2px 0 0;}
.cell p{font-size:13px;color:var(--ink-2);margin:0;flex:1;}
.cell-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.lockmark{font-size:11px;color:var(--ink-3);font-weight:600;}

/* ---- Arrow becomes a glossy round button, nod to old Apple UI buttons ---- */
.arrow-btn{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink);
  background:linear-gradient(180deg,var(--btn-grad-top) 0%,var(--btn-grad-mid) 45%,var(--btn-grad-bottom) 100%);
  box-shadow:inset 0 1px 0 var(--btn-shadow-hi), inset 0 -1px 1px var(--btn-shadow-lo), 0 1px 2px rgba(0,0,0,.18);
  border:1px solid var(--btn-border);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cell:hover .arrow-btn{transform:translateX(3px) scale(1.05);box-shadow:inset 0 1px 0 var(--btn-shadow-hi), inset 0 -1px 1px var(--btn-shadow-lo), 0 2px 6px rgba(0,0,0,.25);}

/* ---- Mobile: native grouped-list app style ---- */
.mobile-list{display:none;}
.list-group{margin-bottom:22px;}
.list-label{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;padding:0 4px;}
.list{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);}
.list .row:last-child{border-bottom:none;}

/* ---- Glossy swatch icon: rounded square, gradient + top highlight, like an old dock icon ---- */
.swatch{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;
  --c: var(--ink-3);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 78%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.15);
  border:1px solid color-mix(in srgb, var(--c) 55%, #000);
  text-shadow:0 -1px 0 rgba(0,0,0,.3);
}
.row-body{flex:1;min-width:0;}
.row-body h3{font-size:14.5px;font-weight:600;margin:0 0 1px;letter-spacing:-.005em;}
.row-body p{font-size:12px;color:var(--ink-2);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-foot{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);font-weight:600;}
.chev{color:var(--ink-3);font-size:17px;}

@media (max-width:760px){
  .nav{padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));}
  .hero{padding:22px 18px 30px;}
  .hero h1{font-size:clamp(28px,9vw,40px);}
  .section, .wrap{padding:16px 18px 40px;}
  .index-grid{display:none;}
  .mobile-list{display:block;}
}

@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto;transition:none !important;} }