:root{
  /* Light base */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f8fafc;     /* very light */
  --text:#0f172a;          /* near-black */
  --muted:#475569;         /* readable grey */
  --muted-2:#64748b;
  --line:#e2e8f0;

  /* Accent (subtle) */
  --accent:#2563eb;
  --accent-soft:#eff6ff;

  --max:980px;
  --r:14px;
  --shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Header / nav */
header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.2px;
}
.brand img{height:36px; width:auto; display:block}

/* Menu */
.menu{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.menu a{
  padding:8px 12px;
  border-radius:10px;
  color: var(--muted);
  font-weight:600;
  text-decoration:none;
}

.menu a:hover{
  background: var(--surface-2);
  color: var(--text);
}

.menu a.active{
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid rgba(37,99,235,.18);
}

/* Language pills */
.lang{display:flex; gap:6px; align-items:center}

.pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

.pill:hover{background: var(--surface-2); color: var(--text)}
.pill.active{
  border-color: rgba(37,99,235,.35);
  background: #fff;
  color: var(--accent);
}

/* Main */
main{padding:28px 0 40px}

.kicker{
  color: var(--muted-2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}

h1{
  font-size:36px;
  line-height:1.15;
  margin:0 0 10px;
}

h2{
  font-size:20px;
  line-height:1.25;
  margin:18px 0 10px;
}

p{margin:10px 0; color: var(--muted)}
strong{color: var(--text)}

.hr{
  height:1px;
  background: var(--line);
  margin:22px 0;
}

/* Cards / layout */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}

@media (min-width: 900px){
  /* твоя текущая разметка использует .grid в разных местах;
     так безопаснее: на широких экранах карточки будут выглядеть “воздушнее” */
  .grid{gap:18px}
}

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--shadow);
}

.small{font-size:13px; color: var(--muted-2)}

/* Links */
a{color: var(--accent)}
a:hover{text-decoration: underline}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight:800;
  text-decoration:none;
}

.btn:hover{background: var(--surface-2)}

.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
.btn.primary:hover{
  filter: brightness(0.95);
}

/* Lists */
.list{
  margin:10px 0 0;
  padding-left:18px;
  color: var(--muted);
}
.list li{margin:6px 0}

/* Inline code */
.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:22px 0 34px;
  color: var(--muted-2);
  font-size:13px;
}

/* Optional: better reading width for long paragraphs */
.card p{
  max-width: 78ch; /* improves readability */
}