/* ==========================================================================
   Тема «Фердаус» — сырмақ.

   Логика войлочного ковра: плоские поля насыщенного цвета, вырезанные
   и подложенные друг под друга. Знак — қошқар мүйіз. Углы капсульные,
   типографика геометрическая.
   ========================================================================== */

:root {
  /* Краски сырмака */
  --kok:     #0E5C6B;   /* көк — бирюза */
  --kok-d:   #094451;
  --qyzyl:   #B03A2E;   /* қызыл — марена */
  --sary:    #E0A126;   /* сары — шафран */
  --sary-l:  #F3D69A;
  --jun:     #FAF6EE;   /* жүн — шерсть */
  --jun-2:   #F1E7D6;
  --jun-3:   #E4D6BE;
  --qara:    #241C17;

  --c-bg:        var(--jun);
  --c-fg:        var(--qara);
  --c-muted:     #6B5E52;
  --c-surface:   var(--jun);
  --c-line:      var(--jun-3);
  --c-lead:      var(--kok);
  --c-lead-fg:   var(--jun);
  --c-accent:    var(--sary);
  --c-accent-fg: var(--qara);
  --c-deep:      var(--qara);
  --c-deep-fg:   var(--jun);

  --f-display: "Unbounded", "Onest", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-card: 18px;
  --r-lg:   28px;
  --r-btn:  999px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; }
.brand__name { font-weight: 700; letter-spacing: -0.02em; }
.brand__mark { border-radius: 13px; }

.btn--primary:hover { background: var(--sary-l); }
.btn--call:hover    { background: var(--kok-d); }
.btn--dark:hover    { background: var(--kok-d); }

/* --- Полосы --------------------------------------------------------------- */

.band--jun  { background: var(--jun); }
.band--jun2 { background: var(--jun-2); }
.band--sary { background: var(--sary); color: var(--qara); }
.band--lead { background: var(--kok);  color: var(--jun); }

/* Край войлока красится в цвет своей полосы. */
.band--jun  > .cut { color: var(--jun); }
.band--jun2 > .cut { color: var(--jun-2); }
.band--sary > .cut { color: var(--sary); }
.band--lead > .cut { color: var(--kok); }

.band--lead .lead-txt,
.band--lead .dl__k { color: rgb(250 246 238 / .82); }
.band--lead .dl__v a { border-bottom-color: var(--sary); }

/* --- Герой ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--kok);
  color: var(--jun);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem);
}
.hero__in { position: relative; z-index: 2; max-width: 40ch; }
.hero h1 { font-size: var(--fs-hero); margin-bottom: 1.1rem; }
.hero .lead-txt { color: rgb(250 246 238 / .9); margin-bottom: 2rem; }
.hero .eyebrow { color: var(--sary-l); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Водяной знак: рог крупно и по краю кадра. */
.hero__mark {
  position: absolute;
  z-index: 1;
  right: -6vw;
  top: 50%;
  translate: 0 -50%;
  width: min(46vw, 560px);
  color: var(--jun);
  opacity: .13;
  pointer-events: none;
}

/* --- Факты: лента с разделителями, не коробки ---------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 2px solid var(--jun-3);
}
.fact { padding: 1.6rem 1.75rem; }
.fact + .fact { border-left: 2px solid var(--jun-3); }
.fact__v {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  letter-spacing: -0.03em;
  color: var(--kok);
  line-height: 1.15;
  white-space: nowrap;
}
.fact__l { display: block; margin-top: .45rem; font-size: var(--fs-sm); line-height: 1.4; color: var(--c-muted); }

/* --- Карточки ------------------------------------------------------------- */

.prose { max-width: 62ch; font-size: var(--fs-lead); line-height: 1.6; margin-bottom: clamp(2rem, 4vw, 3rem); }
.prose p { margin-bottom: 1.1em; }

.cards { display: grid; gap: var(--gap); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--jun);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.card p { font-size: .97rem; color: var(--c-muted); }
.card__mark { width: 34px; color: var(--kok); margin-bottom: .9rem; }

/* Группы идут по возрасту слева направо, поэтому ряд, а не сетка вразнобой. */
.grps { grid-template-columns: repeat(5, 1fr); }
.grp { display: flex; flex-direction: column; gap: .35rem; }
.grp__age {
  align-self: flex-start;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--kok);
  color: var(--jun);
  font-size: .78rem;
  font-weight: 600;
}
.grp h3 { font-size: 1.3rem; margin-top: .4rem; }
.grp__note { font-size: .9rem; color: var(--c-muted); }

/* --- Режим дня ------------------------------------------------------------ */

.day { display: grid; gap: 0; max-width: 640px; }
.day__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: .85rem 0;
  border-top: 1.5px solid var(--jun-3);
}
.day__row:last-child { border-bottom: 1.5px solid var(--jun-3); }
.day__t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--kok);
}

/* --- Список с рогом вместо маркера ---------------------------------------- */

:root {
  --tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 64"><g fill="none" stroke="black" stroke-width="9" stroke-linecap="round"><path d="M50 56V30C50 19 42 11 32 11C21 11 15 18 15 27C15 34 20 39 27 39C33 39 37 35 37 29"/><path d="M50 30C50 19 58 11 68 11C79 11 85 18 85 27C85 34 80 39 73 39C67 39 63 35 63 29"/></g></svg>');
}
.ticks li { position: relative; padding-left: 2.3rem; margin-bottom: .85rem; }
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 1.3rem; height: 1.3rem;
  background: currentColor;
  opacity: .55;
  -webkit-mask: var(--tick) center / contain no-repeat;
          mask: var(--tick) center / contain no-repeat;
}

/* --- Педагоги ------------------------------------------------------------- */

.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.person { text-align: center; }
.person__ph {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  background: var(--jun-3) var(--ph-img, none) center / cover no-repeat;
  display: grid;
  place-items: center;
  color: var(--jun-2);
  margin-bottom: .8rem;
  overflow: hidden;
}
.person__ph svg { width: 46px; }
.person__n { font-weight: 600; }
.person__r { font-size: var(--fs-sm); color: var(--c-muted); }

/* --- Документы ------------------------------------------------------------ */

.docs { display: grid; gap: .7rem; max-width: 720px; }
.doc {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  background: var(--jun);
  border: 1.5px solid var(--jun-3);
  border-radius: var(--r-card);
  text-decoration: none;
}
a.doc:hover { border-color: var(--kok); }
.doc__n { flex: 1; font-weight: 500; }
.doc__a { font-size: var(--fs-sm); font-weight: 600; color: var(--kok); white-space: nowrap; }
.doc__a--off { color: var(--c-muted); font-weight: 400; }

.dl--legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1.5px solid var(--jun-3);
  max-width: 720px;
}

/* --- Контакты ------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.band--lead .form { color: var(--qara); }
.band--lead .map--empty { background: rgb(250 246 238 / .12); color: rgb(250 246 238 / .75); }

/* --- Подвал --------------------------------------------------------------- */

.ftr {
  position: relative;
  background: var(--qara);
  color: var(--jun);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.cut--ftr { color: var(--qara); }
.ftr__band { color: var(--sary); opacity: .55; margin-bottom: 2.5rem; }

.ftr__in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
}
.brand__mark--ftr { background: var(--jun); color: var(--qara); }
.ftr__legal { font-weight: 600; margin: 1rem 0 .5rem; }
.ftr__muted { color: rgb(250 246 238 / .6); font-size: var(--fs-sm); margin: 0 0 .3rem; }
.ftr__h {
  font-family: var(--f-body);
  font-size: var(--fs-eye);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(250 246 238 / .55);
  margin-bottom: 1rem;
}
.ftr__list { display: grid; gap: .55rem; font-size: .95rem; }
.ftr__list a { text-decoration: none; color: rgb(250 246 238 / .85); }
.ftr__list a:hover { color: var(--sary); }
.ftr__list--plain li { color: rgb(250 246 238 / .85); }

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid rgb(250 246 238 / .14);
  font-size: var(--fs-sm);
  color: rgb(250 246 238 / .6);
}

/* --- Адаптив -------------------------------------------------------------- */

@media (max-width: 1240px) {
  .grps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1150px) {
  .facts, .cards--4, .cards--3, .people, .grps { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 2px solid var(--jun-3); }
  .contact-grid { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
  .ftr__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .facts, .cards--2, .cards--3, .cards--4, .people, .grps { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 2px solid var(--jun-3); }
  .hero__mark { width: 74vw; right: -22vw; opacity: .1; }
  .day__row { grid-template-columns: 4.5rem 1fr; gap: .9rem; }
  .ftr__in { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
}

/* Размер файла рядом с названием: видно, что качаешь. */
.doc__s {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}