/* ============================================
   Школа Альфа · main.css
   Базовые стили, переменные, типографика, сетка
   ============================================ */

:root{
  /* Палитра бренда */
  --bg:#5547B3;            /* основной фиолетовый фон */
  --bg-dark:#231B5C;       /* тёмно-фиолетовый */
  --bg-light:#FFF7E0;      /* светло-жёлтый фон секций */
  --bg-section:#FFFBE8;    /* очень светлый фон */
  --accent:#F5C518;        /* жёлтый акцент */
  --accent-dark:#D4A017;   /* тёмно-жёлтый */
  --accent-soft:#EEDC82;   /* пастельный жёлтый */
  --text:#231B5C;          /* основной текст */
  --text-muted:#52527A;    /* приглушённый */
  --text-white:#FFFFFF;
  --success:#43D97C;       /* зелёный */
  --danger:#E94B4B;        /* красный */
  --border:#E8E2C8;        /* нежная граница */
  --shadow:0 8px 24px rgba(35,27,92,.08);
  --shadow-lg:0 16px 48px rgba(35,27,92,.16);
  --radius:18px;
  --radius-sm:10px;
  --radius-lg:28px;
  --max-w:1200px;
  --gap:24px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Tilda Sans','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--text);
  background:#FFFFFF;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;display:block}
a{color:var(--bg);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.75}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* Типографика */
h1,h2,h3,h4{
  font-family:'Tilda Sans','Inter',Arial,sans-serif;
  font-weight:800;
  line-height:1.15;
  color:var(--text);
  margin:0 0 16px;
}
h1{font-size:clamp(28px,5vw,52px);letter-spacing:-.02em}
h2{font-size:clamp(24px,3.6vw,40px);letter-spacing:-.01em}
h3{font-size:clamp(18px,2.4vw,24px)}
h4{font-size:18px}
p{margin:0 0 14px}
.lead{font-size:clamp(16px,1.6vw,20px);color:var(--text-muted);max-width:780px}

/* Контейнер */
.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}
section{padding:72px 0}
section.tight{padding:48px 0}
@media (max-width:768px){section{padding:48px 0}}

/* Сетка */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* Утилиты */
.text-center{text-align:center}
.muted{color:var(--text-muted)}
.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-dark);
  background:var(--bg-light);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.badge{
  display:inline-block;
  background:var(--success);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.04em;
}
.badge-yellow{background:var(--accent);color:var(--bg-dark)}
.badge-purple{background:var(--bg);color:#fff}

/* Тёмные секции */
.dark-section{
  background:var(--bg);
  color:var(--text-white);
}
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4{color:#fff}
.dark-section .lead{color:rgba(255,255,255,.85)}
.dark-section .muted{color:rgba(255,255,255,.7)}

/* Светло-жёлтые секции */
.cream-section{
  background:var(--bg-light);
}