/* ==========================================================
   «Арман - M school»: дизайн жүйесі
   Түстер ТЕК осы файлдағы айнымалылардан басқарылады.
   Бағыт: қою көк (navy) фон, ашық көк акцент, ақ фон, дөңгелектенген карточкалар
   ========================================================== */

/* Қаріп сайттың өзінде сақталған (Onest, SIL OFL 1.1): қазақ әріптері толық, сыртқы серверге тәуелсіз */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/onest-cyrillic-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/onest-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* --- Негізгі түстер --- */
  --navy-950: #060f2b;   /* footer */
  --navy-900: #0a1a44;   /* hero, қабылдау блогы */
  --navy-800: #102357;   /* қою мәтін фоны, белсенді элемент */
  --navy-700: #1a3375;
  --blue-600: #0e3be0;   /* батырма үстінен өткенде */
  --blue-500: #1a4dff;   /* негізгі акцент: батырмалар, сілтемелер */
  --blue-400: #4a74ff;
  --blue-200: #b9c9ff;   /* үлкен нөмірлер (01, 02...) */
  --blue-100: #e8eeff;   /* иконка фоны, белгілер */
  --cyan-400: #38c6f4;   /* қосымша акцент: сызықша, безендіру */
  --sky-50:   #f3f6fc;   /* бет фоны */
  --white:    #ffffff;
  --ink-900:  #0d1530;   /* негізгі мәтін */
  --ink-600:  #4d5877;   /* қосымша мәтін */
  --ink-400:  #626c8a;
  --line:     #e2e8f5;   /* жиектер */
  --amber-500:#ffb020;   /* фокус контуры, ерекше белгі */
  --ok-500:   #12a150;
  --err-500:  #d93a3a;

  /* --- Қараңғы фондағы мәтін --- */
  --on-dark:      #ffffff;
  --on-dark-soft: rgba(255,255,255,.78);
  --on-dark-line: rgba(255,255,255,.16);

  /* --- Қаріп --- */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.6rem;
  --fs-2xl: clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-hero: clamp(2.1rem, 5.2vw, 3.9rem);

  /* --- Аралықтар --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: clamp(48px, 7vw, 88px);

  /* --- Пішін --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-card: 0 6px 22px rgba(10, 26, 68, 0.07);
  --shadow-float: 0 18px 44px rgba(10, 26, 68, 0.16);

  /* --- Контейнер --- */
  --container: 1240px;
  --header-h: 76px;
}

/* ---------- Базалық стильдер ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--sky-50);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--space-3); font-weight: 800; letter-spacing: -0.01em; color: var(--ink-900); }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--space-3); color: var(--ink-600); max-width: 70ch; }
button, input, select, textarea { font: inherit; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-6); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Батырмалар ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: 11px 22px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 600 var(--fs-sm) var(--font); line-height: 1.2; text-align: center;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue-500); color: var(--white); }
.btn-primary:hover { background: var(--blue-600); }
.btn-dark { background: var(--navy-900); color: var(--white); }
.btn-dark:hover { background: var(--navy-800); }
.btn-light { background: var(--white); color: var(--navy-900); border-color: var(--line); }
.btn-light:hover { border-color: var(--blue-500); color: var(--blue-500); }
.btn-outline { background: transparent; color: var(--white); border-color: var(--on-dark-line); }
.btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.btn-lg { min-height: 54px; padding: 14px 28px; font-size: var(--fs-md); }

/* ---------- Карточка және белгі ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-card); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--blue-100); color: var(--blue-500); font-size: var(--fs-xs); font-weight: 700; }

/* ---------- Қолжетімділік ---------- */
:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--navy-900); color: var(--white); font-weight: 700; }
.skip:focus { top: 12px; }

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