/* Qazaq Tili Online — shared styles */
:root{
  --bg: #FFF8EC;
  --bg-2: #FFE9B8;
  --ink: #1B1410;
  --ink-2: #5C4A3A;
  --paper: #FFFDF7;
  --primary: #E85D2F;       /* warm Kazakh red-orange */
  --primary-ink: #B73A12;
  --accent: #1E7A6E;        /* teal */
  --accent-2: #F5C24B;      /* sun yellow */
  --accent-3: #6B4FE0;      /* friendly purple */
  --line: #1B1410;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 22px;
  --radius-sm: 14px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Onest', 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
h1,h2,h3,h4{
  font-family: 'Unbounded', 'Onest', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1{font-size: clamp(40px, 6vw, 76px); line-height: 1.02}
h2{font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05}
h3{font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15}
p{margin: 0}
a{color: inherit; text-decoration: none}
img{max-width:100%; display:block}

/* ——— Layout ——— */
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.section{ padding: 88px 0; }
.section-tight{ padding: 56px 0; }

/* ——— Nav ——— */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,248,236,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1.5px solid var(--ink);
}
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; max-width: 1240px; margin: 0 auto; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Unbounded',sans-serif; font-weight:700; font-size: 19px; letter-spacing: -0.02em }
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  background: var(--primary);
  border: 1.5px solid var(--ink);
  display:grid;place-items:center;
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 2px 2px 0 var(--ink);
}
.nav-links{ display:flex; gap: 26px; align-items:center; font-size: 15px; font-weight: 500 }
.nav-links a{ position:relative; padding: 4px 0 }
.nav-links a:hover{ color: var(--primary-ink) }
.nav-cta{ display:flex; gap: 12px; align-items:center }

@media (max-width: 880px){
  .nav-links{ display:none }
}

/* ——— Buttons ——— */
.btn{
  display: inline-flex; align-items:center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Onest', sans-serif;
  font-weight: 600; font-size: 16px;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn:hover{ transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink) }
.btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink) }
.btn-primary{ background: var(--primary); color: #fff }
.btn-accent{ background: var(--accent); color: #fff }
.btn-yellow{ background: var(--accent-2); color: var(--ink) }
.btn-ghost{ background: transparent; box-shadow: none; border-color: transparent }
.btn-ghost:hover{ background: rgba(27,20,16,.06); box-shadow:none; transform:none }
.btn-sm{ padding: 9px 16px; font-size: 14px }
.btn-lg{ padding: 18px 28px; font-size: 18px; box-shadow: var(--shadow) }
.btn-lg:hover{ box-shadow: 8px 8px 0 var(--ink) }

/* ——— Cards ——— */
.card{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.card-flat{ box-shadow: none }
.card-tilt-l{ transform: rotate(-1.2deg) }
.card-tilt-r{ transform: rotate(1.2deg) }

/* ——— Pills / Tags ——— */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.pill-yellow{ background: var(--accent-2) }
.pill-teal{ background: var(--accent); color: #fff }
.pill-purple{ background: var(--accent-3); color: #fff }
.pill-primary{ background: var(--primary); color: #fff }
.pill-dot::before{
  content:''; width:8px; height:8px; border-radius:50%; background: var(--ink);
}

/* ——— Decorative ——— */
.dot-grid{
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}
.stripes{
  background: repeating-linear-gradient(45deg,
    var(--ink) 0 1.5px, transparent 1.5px 9px);
}
.divider-wave{
  height: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24' preserveAspectRatio='none'><path d='M0 12 Q20 0 40 12 T80 12' fill='none' stroke='%231B1410' stroke-width='2'/></svg>") repeat-x;
}

/* ——— Footer ——— */
.footer{
  background: var(--ink);
  color: #FFF8EC;
  padding: 64px 0 32px;
  border-top: 1.5px solid var(--ink);
}
.footer h4{ font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; opacity: .7 }
.footer a{ color: #FFF8EC; opacity: .85 }
.footer a:hover{ opacity: 1; color: var(--accent-2) }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px }
@media (max-width: 880px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px } }

/* ——— Image placeholder ——— */
.img-ph{
  background:
    repeating-linear-gradient(45deg, rgba(27,20,16,.08) 0 8px, transparent 8px 16px),
    var(--paper);
  border: 1.5px dashed var(--ink);
  border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  text-align: center;
  padding: 14px;
  min-height: 180px;
}

/* ——— Utility ——— */
.row{ display:flex; gap: 16px; flex-wrap: wrap; align-items: center }
.col{ display:flex; flex-direction: column; gap: 16px }
.center{ text-align:center }
.muted{ color: var(--ink-2) }
.eyebrow{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary-ink);
  font-weight: 500;
}
.kz-script{
  font-family: 'Unbounded', sans-serif;
  font-style: italic;
  color: var(--accent);
}

/* ——— Squiggle underline ——— */
.squiggle{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'><path d='M0 6 Q20 -2 40 6 T80 6' fill='none' stroke='%23E85D2F' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 80px 8px;
  padding-bottom: 8px;
}

/* ——— Animations ——— */
@keyframes float{ 0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)) } 50%{ transform: translateY(-8px) rotate(var(--rot,0deg)) } }
.float{ animation: float 5s ease-in-out infinite }
@keyframes spin-slow{ to { transform: rotate(360deg) } }
.spin-slow{ animation: spin-slow 22s linear infinite }

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 768px) {
  /* Отступы */
  .section { padding: 44px 0; }
  .wrap { padding: 0 16px; }
  .nav-inner { padding: 12px 16px; flex-wrap: wrap; }
  .card { padding: 20px; }
  .btn-lg { padding: 14px 20px; font-size: 16px; }
  .footer { padding: 40px 0 24px; }

  /* Все grid-колонки → одна колонка */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Скрыть декоративную колонку HeroA (иллюстрация справа) */
  [style*="min-height: 480px"] {
    display: none !important;
  }

  /* Высоты изображений под мобильный экран */
  [style*="height: 460px"] { height: 240px !important; }
  [style*="height: 380px"] { height: 220px !important; }
  [style*="height: 300px"] { height: 200px !important; }

  /* Убрать жёсткие min-height у карточек */
  [style*="min-height: 460px"] { min-height: unset !important; }
  [style*="min-height: 540px"] { min-height: unset !important; }

  /* Внутренние отступы Hero C */
  [style*="padding: 60px 56px"] { padding: 28px 20px !important; }
  [style*="padding: 60px 48px"] { padding: 28px 20px !important; }

  /* Кнопки в ряд → перенос */
  .row { flex-wrap: wrap; }
  .btn-lg { width: 100%; justify-content: center; }

  /* Шрифт заголовков */
  h1 { font-size: clamp(30px, 8vw, 44px) !important; }
  h2 { font-size: clamp(24px, 6vw, 36px) !important; }
}