/* Start:/local/templates/kids/styles.css?17606089377792*/
:root{
  --bg: #F8FAFC;          /* общий фон */
  --ink-head: #FF5A00;    /*текст заголвока f0f8ff*/
  --ink: #020505;         /* основной текст */
  --muted: #64748B;       /* вторичный текст */
  --surface: #ffffff;     /* карточки/шапка 6495ed */
  --brand: #60A5FA;       /* акцент (голубой) */
  --brand-weak: #DBEAFE;  /* светлый акцент */
  --shadow: 0 6px 20px rgba(15,23,42,.08);
  --text-hovered: #DB3600;
  --text-bg: #f7f9fb;
}

/* ====== Небольшой reset ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  display: flex;
  flex-direction: column;
  margin: 0;
  background:var(--bg);
  min-height: 100vh;
  color:var(--ink);
  font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
main {
  flex: 1;
}
/* ====== Контейнер ====== */
.container {
  /*max-width: 1180px;*/
  margin: 0 auto;
  padding: 24px 20px;
}

.headcontainer{
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px;
  display:flex;
  text-align:center;
  justify-content:space-between;
  align-items: center;
  gap:16px;
}

.leonid-wrap{
  max-width: 1180px;         /* как у контейнера */
  margin: 0 auto;
  padding: 0 24px 48px;      /* воздух слева/справа и снизу */
}

/* ====== Шапка ====== */
.my-header{
  position: sticky; /* «прилипает» к верху */
  top: 0;
  z-index: 1000;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.my-header .container{
  min-height: 64px;
}

/* Лого/заголовок */
.my-header h1{
  margin:0;
  font-size: 28px;       /* больше размер */
  font-weight: 800;
  line-height:1.1;
}

.my-header h1 a,
.my-header h1{
  color: var(--ink-head);
  text-decoration:none;
}

.headcontainer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 16px; /* ← расстояние между меню и кнопкой */
}

.exit_btn {
  background: #ff5a00;
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600;
  border: none;
  text-decoration: none !important;  /* убираем подчёркивание */
  box-shadow: none !important;
  transition: background 0.2s ease;
  display: inline-block;
}

.exit_btn:hover,
.exit_btn:focus,
.exit_btn:active {
  background: #e64a00;
  text-decoration: none !important; /* фикс от синей полоски */
  outline: none;
  box-shadow: none !important;
}

/* ====== Навигация ====== */
.my-header nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap; /* чтобы не ломалось на узких экранах */
}

.my-header nav a{
  --pad-x: 12px;
  --pad-y: 8px;
  display:inline-block;
  color: var(--ink-head);
  padding: var(--pad-y) var(--pad-x);
  border-radius: 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
}

.my-header nav a:hover{
  background: var(--text-bg); /* --brand-weak */
  color: var(--text-hovered) !important;   /* принудительно тёмный текст --ink */
}

.my-header nav a:focus-visible{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent);
}

.my-header nav a.is-active{
  background: var(--brand);
  color: var(--ink) !important;
}


/* ====== Основной контент ====== */
.main-content{
 /* padding: 32px 24px 56px; !* добавлены боковые поля *!*/
}

.main-content .container {
  display: block;         /* отключаем flex */
  text-align: center;     /* чтобы содержимое по центру */
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.main-nav a {
  color: #ff5a00;
  font-weight: 500;
  text-decoration: none;
}

/* Две колонки для кабинетов */
.leonid-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}
.lk-cards{
  display:grid;
  gap:20px;
}
.lk-cards .card{
  padding:20px;
}
.lk-cards .btn{
  width:100%;
  text-align:center;
}
@media(max-width:960px){
  .leonid-grid-2{
    grid-template-columns:1fr;
  }
}

/* ====== Адаптив ====== */
@media (max-width: 960px){
  .my-header .container{
    min-height: 60px;
  }
  .my-header h1{ font-size:18px; }
  .my-header nav a{ --pad-x:10px; --pad-y:7px; }
}

@media (max-width: 640px){
  .container{ gap:12px; }
  .my-header nav{
    gap:6px;
    overflow-x:auto;       /* горизонтальная прокрутка вместо «ломающегося» бургера */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .my-header nav::-webkit-scrollbar{ height:6px }
  .my-header nav::-webkit-scrollbar-thumb{
    background: var(--border);
    border-radius: 999px;
  }
}

/* ====== Доп: утилиты, если пригодятся ====== */
.hide{display:none !important}
.muted{color:var(--muted)}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  background:var(--brand);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

.my-footer {
  background: #FF5A00;
  color: #fff;
  padding: 32px 20px 16px;
}

/* верхняя часть футера */
.footcontainer {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;   /* ← выравниваем по центру */
  gap: 24px;
  flex-wrap: nowrap;     /* ← не переносим в новую строку */
}

/* меню в футере в одну строку */
.footer-nav {
  display: flex;
  align-items: center;
  gap: 32px;              /* равномерное расстояние */
  white-space: nowrap;    /* запрещаем перенос строк */
  flex-wrap: nowrap;      /* запрещаем перенос на мобилках */
}

.footer-nav a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;         /* убрал боковые отступы, чтобы текст не прыгал */
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: #ffaa00;         /* жёлтый при наведении */
}

/* кнопка обратной связи */
.footcontainer .exit_btn {
  background: transparent;
  color: #fff;
  padding: 10px 28px;
  border-radius: 999px;   /* как в header */
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #ffaa00; /* длинная жёлтая обводка */
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;    /* текст всегда в одну строку */
}

.footcontainer .exit_btn:hover {
  background: #ffaa00;
  color: #000;
}


/* нижняя часть футера */
.footer-copy {
  margin-top: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: #fff;
}

.footer-copy p {
  margin: 0;
}

.footer-copy a {
  color: #fff;
  text-decoration: none;
}

.footer-copy l {
  color: #fff;
  text-decoration: none;
}

.footer-copy a:hover {
  text-decoration: underline;
}

.footer-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* End */


/* Start:/local/templates/kids/css/styles.css?177434862468630*/
/* Общие стили */
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f4ff, #d9e6ff);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 32px 24px 56px;
  }
  
  .login-container {
    background: #fff;
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    animation: fadeIn 0.7s ease;
  }
  
  .login-title {
    text-align: center;
    font-weight: 600;
    color: #2d3e50;
  }
  
  .login-block {
    margin-bottom: 1.2rem;
  }
  
  .login-block label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #555;
  }
  
  .login-block__input {
    position: relative;
  }
  
  .login-block__input input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ccd5e0;
    border-radius: 0.8rem;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
  }
  
  .login-block__input input:focus {
    border-color: #5b7fff;
    box-shadow: 0 0 0 4px rgba(91, 127, 255, 0.15);
  }
  
  /* кнопка-глаз */
  .login-block__input-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
  .login-block__input-password svg {
    width: 20px;
    height: 20px;
    fill: #888;
    transition: 0.2s;
  }
  
  .login-block__input-password:hover svg {
    fill: #e64a00;
  }
  
  /* кнопка */
  .login-submit {
    width: 100%;
    padding: 0.9rem;
    background: #ff5a00;
    border: none;
    border-radius: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
    margin-top: 0.5rem;
  }
  
  .login-submit:hover {
    background: #e64a00;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px #e64a00;
  }
  
  /* чекбоксы и согласие */
  .login-checkbox,
  .agreement-b {
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.4;
  }
  
  .login-checkbox input,
  .agreement-b input {
    margin-right: 0.4rem;
  }
  
  .agreement-b div {
    display: inline;
  }
  
  .agreement-b a {
    color: #5b7fff;
    text-decoration: none;
  }
  
  .agreement-b a:hover {
    text-decoration: underline;
  }
  
  /* ссылки */
  .login-links {
    margin-top: 1.5rem;
    text-align: center;
  }
  
  .login-link {
    display: inline-block;
    margin: 0 0.5rem;
    font-size: 0.9rem;
    color: #ff5a00;
    text-decoration: none;
    transition: 0.2s ease;
  }
  
  .login-link:hover {
    text-decoration: underline;
    color: #e64a00;
  }
  
  /* Анимация */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Отличия для маленькой формы (вход) */
  .login-container.login--small {
    max-width: 380px;
  }
  
  .login--small .login-title {
    font-size: 1.5rem;
    margin-bottom: 1.8rem;
  }
  
  /* Отличия для большой формы (регистрация) */
  .login-container.login--large {
    max-width: 480px;
  }
  
  .login--large .login-title {
    font-size: 1.7rem;
    margin-bottom: 2rem;
  }
  
  .login-container.container{
    max-width: 380px;
  }
  /* ===========================
     TOKENS & GLOBALS
     =========================== */
  :root {
    /* Base palette */
    --ink: #020505;
    --border: #e5e7eb;
  
    /* BRAND COLORS */
    --orange: #FF5A00;
    --sun: #ffaa00;
    --blue: #b4c3e6;
    --beige: #faf0e1;
  
    /* HappyKids corporate */
    --orange-dark: #DB3600;
  
    /* Gradients */
    --bg-grad: linear-gradient(135deg, #5c86ff 0%, #6a5cff 45%, #8b5cff 100%);
  
    /* Shadows */
    --shadow-xs: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, .08);
    --shadow-md: 0 20px 60px rgba(0, 0, 0, .15);
  
    /* Radii */
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-16: 16px;
    --radius-18: 18px;
  
    /* Spacing scale */
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-36: 36px;
    --space-40: 40px;
  
    /* Typography */
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-28: 28px;
    --fs-32: 32px;
    --lh-1-2: 1.2;
    --lh-1-35: 1.35;
    --lh-1-45: 1.45;
  
    /* Buttons */
    --btn: #4f8ef7;
    --btn-h: #3573db;
  
    /* Hero (hkhero) */
    --hkhero-accent: #FF6F3D;
    --hkhero-ink: #ffffff;
    --hkhero-ink-weak: #FFE3C2;
    --hkhero-blue: #7DB7FF;
    --hkhero-dot: rgba(255, 255, 255, .95);
  
    /* Registration (hkreg) */
    --hkreg-orange-2: #FF8A00;
    --hkreg-blue: #BFCBEA;
    --hkreg-ink: #1f2937;
    --hkreg-muted: #6b7280;
    --hkreg-card: #fff;
    --hkreg-pill: #F8EBDC;
    --hkreg-month: #C65A00; /* current */
    --hkreg-month-dim: #B38A65; /* prev/next */
  
    /* Steps (hksteps) */
    --hksteps-red: #FF5A1F;
    --hksteps-ink: #ffffff;
  
    /* Format (hkformat) */
    --hkformat-ink: #1F2937;
  
    /* Need (hkneed) */
    --hkneed-ink: #1f2937;
    --hkneed-muted: #374151;
  }
  
  /* Motion respect */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
  
  /* Root layout helpers */
  .hk-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-24);
  }
  
  /* ===========================
     HERO v2 (.hkhero)
     =========================== */
  .hkhero-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px
  }
  
  .hkhero {
    background: var(--sun);
    color: var(--hkhero-ink);
    position: relative;
    overflow: visible;
    --kid-h: clamp(520px, 56vw, 680px);
    --kid-scale: 100%;
  }
  
  .hkhero__inner {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr;
    gap: var(--space-24);
    min-height: var(--kid-h);
    align-items: center;
    position: relative;
  }
  
  /* left */
  .hkhero__left {
    position: relative;
    z-index: 2;
    padding-top: var(--space-8);
  }
  
  .hkhero__badge {
    font-weight: 800;
    font-size: clamp(15px, 6vw, 36px);
    position: relative;
    display: inline-block;
    z-index: 0;
    isolation: isolate;
    line-height: .95;
    margin-top: -100px;
    margin-bottom: 75px;
  }
  
  .hkhero__badge::before {
    content: "";
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    width: 20em;
    height: 20em;
    transform: translate(-55%, -75%);
    border-radius: 50%;
    background: var(--orange);
    z-index: -1;
  }
  
  .hkhero__badge span {
    color: #FFB94F;
  }
  
  .hkhero__title {
    margin: 0 0 var(--space-8);
    font-size: clamp(18px, 2.2vw, 22px);
    z-index: 2;
    position: relative;
    font-weight: 700;
  }
  
  .hkhero__subtitle {
    margin: 0 0 var(--space-18);
    font-size: clamp(14px, 1.8vw, 16px);
    color: var(--hkhero-ink-weak);
    position: relative;
    max-width: 46ch;
  }
  
  /* Карточки месяца (сводка справа, стрелка снизу справа) */
  .hkreg__item {
    position: relative;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(17, 24, 39, .08);
    margin: 14px 0;
    overflow: hidden;
  }
  
  .hkreg__item summary {
    list-style: none;
    cursor: pointer
  }
  
  .hkreg__item summary::-webkit-details-marker {
    display: none
  }
  
  /* Цветовые варианты (ты можешь расширить) */
  .hkreg__card--blue {
    background: #B8C7E8;
    color: #0f172a;
  }
  
  .hkreg__card--orange {
    background: #FF9800;
    color: #fff;
  }
  
  .hkreg__card--red {
    background: #FF5A14;
    color: #fff;
  }
  
  .hkreg__sum {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 18px 18px 24px;
  }
  
  .hkreg__sum-left {
    min-width: 0
  }
  
  .hkreg__title {
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 8px
  }
  
  .hkreg__teacher {
    opacity: .95;
    font-weight: 600
  }
  
  /* Правый столбец: даты столбиком + большая кнопка */
  .hkreg__sum-right {
    display: flex;
    align-items: flex-start;
    gap: 16px
  }
  
  .hkreg__chips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px
  }
  
  .hkreg__datechip {
    font-weight: 800;
    opacity: .85;
    white-space: nowrap;
  }
  
  /* Кнопки записи */
  .hkreg__cta {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(17, 24, 39, .1);
  }
  
  .hkreg__cta--big {
    padding: 8px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06)
  }
  
  .hkreg__cta:hover {
    background: #f8fafc
  }
  
  /* Стрелка (chevron) в кружке снизу справа */
  .hkreg__chev {
    position: absolute;
    right: 16px;
    bottom: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
  }
  
  .hkreg__chev::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
  }
  
  .hkreg__item[open] .hkreg__chev::before {
    transform: rotate(-135deg);
  }
  
  /* Тело карточки */
  .hkreg__body {
    background: #fff;
    color: #111827;
    padding: 14px 16px 16px
  }
  
  .hkreg__desc {
    margin: 0 0 10px
  }
  
  .hkreg__dates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
  }
  
  .hkreg__date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
  }
  
  /* Мелкие правки для контраста на цветных карточках */
  .hkreg__card--orange .hkreg__cta,
  .hkreg__card--red .hkreg__cta {
    background: #fff;
    color: #111;
    border-color: transparent;
  }
  
  .hkreg__card--blue .hkreg__cta {
    background: rgba(255, 255, 255, .9);
  }
  
  /* Адаптив */
  @media (max-width: 760px) {
    .hkreg__sum {
      grid-template-columns: 1fr;
      padding-bottom: 56px
    }
  
    .hkreg__sum-right {
      flex-wrap: wrap
    }
  
    .hkreg__chips {
      grid-auto-flow: row
    }
  }
  
  
  /* buttons */
  .hkhero-btn {
    display: inline-block;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-12);
    text-decoration: none;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    border: 2px solid transparent;
  }
  
  .hkhero-btn:hover {
    transform: translateY(-1px);
  }
  
  .hkhero-btn--primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 10px 24px rgba(236, 81, 49, .35);
  }
  
  .hkhero-btn--primary:hover {
    background: #D84527;
  }
  
  .hkhero-btn--ghost {
    background: #fff;
    color: var(--sun);
    border-color: #F7B27A;
  }
  
  .hkhero-btn--ghost:hover {
    background: #EBEBEB;
  }
  
  .hkhero__actions {
    display: flex;
    gap: var(--space-12);
    flex-wrap: wrap;
  }
  
  /* right */
  .hkhero__right {
    position: relative;
    overflow: visible;
    min-height: var(--kid-h);
  }
  
  /* background dots + photo layer with fallback */
  .hkhero__photo {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 6px at 15% 20%, var(--hkhero-dot) 98%, transparent 100%) 0 0/80px 80px repeat,
    radial-gradient(circle 6px at 40% 40%, #F36C3F 98%, transparent 100%) 0 0/80px 80px repeat,
    radial-gradient(circle 6px at 70% 60%, var(--hkhero-blue) 98%, transparent 100%) 0 0/80px 80px repeat,
    radial-gradient(circle 6px at 90% 80%, var(--hkhero-dot) 98%, transparent 100%) 0 0/80px 80px repeat,
    var(--sun);
    overflow: visible;
    background-size: 100% var(--kid-scale);
  }
  
  /*
  @supports ((-webkit-mask-image: linear-gradient(black, white)) or (mask-image: linear-gradient(black, white))) {
    .hkhero__photo {
      -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
    }
  }
  */
  
  
  
  .hkhero__photo {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle 6px at 15% 20%, var(--hkhero-dot) 98%, transparent 100%) 0 0/80px 80px repeat,
      radial-gradient(circle 6px at 40% 40%, #F36C3F 98%, transparent 100%) 0 0/80px 80px repeat,
      radial-gradient(circle 6px at 70% 60%, var(--hkhero-blue) 98%, transparent 100%) 0 0/80px 80px repeat,
      radial-gradient(circle 6px at 90% 80%, var(--hkhero-dot) 98%, transparent 100%) 0 0/80px 80px repeat,
      var(--sun);
    overflow: visible;
  }
  
  .hkhero__kid {
    position: absolute;
    right: 0;
    bottom: 0;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;  /* полностью вписывается, без обрезки */
    z-index: 2;           /* поверх точек */
  }
  
  .hkhero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/img/kid1.png') no-repeat center;
    background-size: contain; /* не обрезается */
    z-index: 2; /* поверх */
  }
  
  .hkhero__photo {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 16px at 20% 20%, #F36C3F 95%, transparent 100%),
                radial-gradient(circle 16px at 60% 50%, #FFDF8F 95%, transparent 100%),
                radial-gradient(circle 16px at 80% 80%, #98B4FF 95%, transparent 100%),
                var(--sun);
    z-index: 1;
  }
  
  .hkhero__kid {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* вписать целиком */
    z-index: 2;            /* поверх точек */
  }
  
  /* hero responsive */
  @media (max-width: 900px) {
    .hkhero__photo {
      -webkit-mask-image: none;
      mask-image: none;
      border-radius: var(--radius-16);
      overflow: hidden;
      background-position: center right;
    }
  
    .hkhero__photo::after {
      background-size: contain;
      background-position: center right;
    }
  }
  .hkhero__photo {
    position: absolute;
    inset: 0;
    background: /* твои точки/градиенты */;
  }
  .hkhero__kid {
    position: absolute;
    right: 0;
    bottom: 0;
    max-height: none;
    max-width: none;
    width: auto;
    height: 100%; /* или auto, если хочешь по ширине */
    object-fit: contain;
    z-index: 5; /* поверх точек и всего фона */
  }
  
  
  /* ===========================
     AGE TABS / ACCORDION
     =========================== */
  .hk-age {
    margin: var(--space-48, 48px) 0;
    text-align: center;
  }
  
  .hk-age__label {
    text-transform: uppercase;
    color: #ffaa00;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-8);
    letter-spacing: 1px;
  }
  
  .hk-age__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: var(--space-20);
    color: var(--orange);
  }
  
  .hk-age__tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
    margin-bottom: var(--space-24);
  }
  
  .hk-age__tabs button {
    background: #faf0e1;
    border: none;
    border-radius: 24px;
    padding: 8px 50px;
    font-weight: 600;
    cursor: pointer;
    color: var(--orange);
    transition: background .2s;
  }
  
  .hk-age__tabs button.active {
    background: var(--orange);
    color: white;
  }
  
  .hk-age__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
  }
  
  .hk-age__item {
    position: relative;
    background: #FDF5EC;
    border: 2px solid transparent;
    border-radius: var(--radius-16);
    padding: var(--space-16) var(--space-18) var(--space-16) 22px;
    margin-left: 8px;
    transition: background .2s, border-color .2s, padding .2s;
  }
  
  .hk-age__item[open],
  .hk-age__item.open
  {
    background: var(--blue);
    border: none;
    padding: var(--space-12);
  }
  
  .hk-age__item summary,
  .hk-age__item .summary
  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    font-size: 24px;
    font-weight: 800;
    color: var(--orange);
  }
  
  .hk-age__item[open] summary {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  .hk-age__item summary::-webkit-details-marker {
    display: none;
  }
  
  .hk-toggle {
    display: inline-grid;
    place-items: center;
  }
  
  .hk-age__item[open] summary .hk-toggle {
    visibility: hidden;
  }
  
  .toggle-icon {
    font-weight: bold;
    color: var(--orange);
    transition: color .2s;
  }
  
  .hk-age__item[open] .toggle-icon {
    color: #1f3b8f;
  }
  
  .hidden {
    display: none;
  }
  
  /* Age expanded card */
  .hk-age__card {
    background: var(--blue);
    border-radius: var(--radius-14);
    padding: 26px 24px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--shadow-sm);
    text-align: left;
  }
  
  .hk-age__card-grid {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 340px);
    gap: var(--space-28);
  }
  
  .hk-age__card-left {
    padding-left: var(--space-28);
  }
  
  .hk-age__card-title {
    margin: 0 0 var(--space-12);
    color: var(--orange);
    font-size: var(--fs-28);
    font-weight: 800;
    text-align: left;
  }
  
  .hk-age__card-desc {
    margin: 0 0 var(--space-16);
    color: #fff;
    font-weight: 600;
    line-height: var(--lh-1-35);
    text-align: left;
  }
  
  .hk-age__duration {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    color: var(--orange);
    font-weight: 800;
    margin: var(--space-8) 0 var(--space-18);
    text-align: left;
  }
  
  .hk-age__infobig {
    color: #fff;
    text-align: left;
    font-size: var(--fs-14);
    margin: var(--space-8) 0;
  }
  
  .hk-age__infosmall {
    color: var(--orange);
    text-align: left;
    font-size: var(--fs-14);
    margin: var(--space-8) 0;
  }
  
  .hk-age__btn {
    display: inline-block;
    padding: var(--space-12) var(--space-24);
    border-radius: 28px;
    background: var(--orange);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    transition: background .15s ease;
  }
  
  .hk-age__btn:hover {
    background: var(--orange-dark);
  }
  
  .hk-age__card-illu {
    min-height: 230px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
  }
  
  .hk-age__minus {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .08));
  }
  
  @media (max-width: 760px) {
    .hk-age__card-grid {
      grid-template-columns:1fr;
    }
  
    .hk-age__card-illu {
      min-height: 180px;
    }
  }
  
  
  /* ===========================
     REGISTRATION (hkreg)
     =========================== */
  .hkreg__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--space-24) 20px
  }
  
  .hkreg__title {
    text-align: center;
    margin: 0 0 var(--space-16);
    color: var(--orange);
    font-weight: 900;
    font-size: clamp(26px, 4vw, 44px)
  }
  
  .hkreg__ages {
    display: flex;
    gap: var(--space-12);
    justify-content: center;
    margin: 10px 0 var(--space-18);
    flex-wrap: wrap
  }
  
  .hkreg__age {
    appearance: none;
    border: 2px solid var(--orange);
    background: #fff;
    color: var(--orange);
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    cursor: pointer
  }
  
  .hkreg__age.is-active {
    background: var(--orange);
    color: #fff
  }
  
  /* months */
  .hkreg__months {
    margin-bottom: var(--space-12);
  }
  
  .hkreg__monthwrap {
    display: grid;
    grid-template-columns:44px 1fr 44px;
    align-items: center;
    background: var(--hkreg-pill);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  
  .hkreg__month {
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--hkreg-month-dim);
  }
  
  .hkreg__month:focus-visible {
    outline: none;
  }
  
  .hkreg__month:hover {
    color: var(--hkreg-month);
  }
  
  .hkreg__monthbar {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    align-items: center;
    padding: var(--space-8) var(--space-6);
    font-weight: 800;
    color: var(--hkreg-month);
  }
  
  .hkreg__monthbar .prev {
    justify-self: start;
    color: var(--hkreg-month-dim);
    opacity: .85;
    cursor: pointer;
    user-select: none;
  }
  
  .hkreg__monthbar .current {
    justify-self: center;
    color: var(--hkreg-month);
    cursor: default;
    user-select: none;
  }
  
  .hkreg__monthbar .next {
    justify-self: end;
    color: var(--hkreg-month-dim);
    opacity: .85;
    cursor: pointer;
    user-select: none;
  }
  
  /* cards */
  .hkreg__list {
    display: grid;
    gap: var(--space-12);
  }
  
  .hkreg__card {
    border-radius: var(--radius-16);
    padding: var(--space-14) var(--space-14) var(--space-14) 18px;
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    color: #fff;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, .35)
  }
  
  .hkreg__card--blue {
    background: var(--hkreg-blue);
    color: #183153;
  }
  
  .hkreg__card--orange {
    background: linear-gradient(90deg, var(--hkreg-orange-2), var(--orange));
  }
  
  .hkreg__card--green {
    background: linear-gradient(90deg, #62c96b, #32b053);
    color: #083a14;
  }
  
  .hkreg__card--violet {
    background: linear-gradient(90deg, #b084ff, #8b62ff);
  }
  
  .hkreg__card--pink {
    background: linear-gradient(90deg, #ff8bb2, #ff5f9a);
  }
  
  .hkreg__head {
    font-weight: 900;
    margin-bottom: var(--space-6);
  }
  
  .hkreg__title2 {
    font-weight: 800;
  }
  
  .hkreg__btn {
    text-decoration: none;
  }
  
  .hkreg__empty {
    color: var(--hkreg-muted);
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: var(--radius-12);
    padding: var(--space-12);
    text-align: center;
  }
  
  @media (max-width: 680px) {
    .hkreg__card {
      grid-template-columns:1fr;
      gap: var(--space-10);
    }
  
    .hkreg__btn {
      justify-self: end;
    }
  }
  
  /* ===========================
     STEPS (hksteps)
     =========================== */
  .hksteps__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-24) 20px;
  }
  
  .hksteps__title {
    margin: 0 0 var(--space-18);
    text-align: center;
    font-size: clamp(22px, 3.2vw, 36px);
    color: #F15A00;
    font-weight: 800;
  }
  
  .hksteps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(16px, 4vw, 40px);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .hksteps__item {
    inline-size: clamp(160px, 24vw, 240px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--hksteps-ink);
    padding: var(--space-18);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
  }
  
  .hksteps__item--orange {
    background: var(--orange);
  }
  
  .hksteps__item--blue {
    background: var(--blue);
    color: #2B3A55;
  }
  
  .hksteps__item--red {
    background: var(--hksteps-red);
  }
  
  .hksteps__text {
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 700;
    line-height: 1.25;
  }
  
  .hksteps__text strong {
    font-weight: 900;
  }
  
  @media (max-width: 560px) {
    .hksteps__list {
      gap: var(--space-14);
    }
  
    .hksteps__item {
      inline-size: clamp(140px, 40vw, 200px);
    }
  }
  
  /* Универсальный стиль для кнопок возраста */
  .hk-btn-age {
    background: #faf0e1;
    border: none;
    border-radius: 24px;
    padding: 8px 50px;
    font-weight: 600;
    cursor: pointer;
    color: var(--orange);
    transition: background .2s, color .2s, transform .12s;
  }
  
  /* Активное состояние */
  .hk-btn-age.active,
  .hk-btn-age.is-active,
  .hk-btn-age[aria-selected="true"] {
    background: var(--orange);
    color: #fff;
  }
  
  /* Ховер/фокус */
  .hk-btn-age:hover {
    transform: translateY(-1px);
  }
  
  .hk-btn-age:focus-visible {
    outline: 2px solid rgba(255, 90, 0, .35);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(255, 90, 0, .15);
  }
  
  
  /* ===========================
     WEEKEND tagline
     =========================== */
  .hkweekend {
    text-align: center;
    margin: var(--space-24) auto;
    max-width: 900px;
    padding: 0 16px;
  }
  
  .hkweekend__line {
    margin: 0;
    font-size: clamp(16px, 2vw, 22px);
    line-height: 1.4;
    font-weight: 600;
    color: var(--hkneed-muted);
  }
  
  .hkweekend__line--accent {
    font-weight: 700;
    margin-top: var(--space-6);
  }
  
  .hkweekend--red {
    color: #FF3B00;
  }
  
  .hkweekend--orange {
    color: #FFA500;
  }
  
  
  /* ===========================
     TEACHERS (hkteachers)
     =========================== */
  .hkteachers__title {
    text-align: center;
    color: var(--orange);
    font-weight: 900;
    font-size: clamp(26px, 4vw, 44px);
    margin: 0 0 var(--space-24);
  }
  
  .hkteachers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-28);
    align-items: center;
  }
  
  .hkteachers__photo img {
    width: 80%;
  }
  
  .hkteachers__text {
    font-size: var(--fs-18);
    line-height: var(--lh-1-45);
    color: var(--ink);
  }
  
  .hkteachers__text .accent {
    color: var(--sun);
    font-weight: 700;
  }
  
  .hkteachers__text .accent-strong {
    color: var(--orange-dark);
    font-weight: 800;
  }
  
  .hkteachers__text .muted {
    color: var(--muted);
    font-style: italic;
  }
  
  .hkteachers__text ul {
    margin: var(--space-12) 0;
    padding-left: 20px;
  }
  
  .hkteachers__text li {
    margin-bottom: var(--space-6);
  }
  
  @media (max-width: 760px) {
    .hkteachers__grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
  
    .hkteachers__text {
      text-align: left;
    }
  }
  
  
  /* ===========================
     FORMAT (hkformat)
     =========================== */
  .hkformat {
    padding: var(--space-24) 0 var(--space-8);
  }
  
  .hkformat__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .hkformat__title {
    margin: 0;
    text-align: center;
    color: #F15A00;
    font-weight: 900;
    font-size: clamp(24px, 3.4vw, 40px);
  }
  
  .hkformat__subtitle {
    margin: var(--space-8) 0 var(--space-18);
    text-align: center;
    color: var(--hkneed-muted);
    font-weight: 800;
    font-size: clamp(18px, 2.6vw, 28px);
  }
  
  .hkformat__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 3vw, 24px);
  }
  
  .hkformat__card {
    background: var(--beige);
    border-radius: var(--radius-18);
    box-shadow: var(--shadow-sm);
    padding: clamp(16px, 2.4vw, 24px);
    color: var(--hkformat-ink);
    position: relative;
    overflow: hidden;
  }
  
  .hkformat__card--theory {
    background: var(--blue);
  }
  
  .hkformat__card--practice {
    background: var(--sun);
  }
  
  .hkformat__card-title {
    text-align: center;
    margin: 0 0 var(--space-8);
    color: #fff;
    font-weight: 900;
    font-size: clamp(18px, 2.4vw, 26px);
  }
  
  .hkformat__card p {
    margin: 0;
    color: #ffffff;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: var(--lh-1-45);
  }
  
  .hkformat__accent {
    font-weight: 900;
    text-decoration: none;
  }
  
  @media (max-width: 760px) {
    .hkformat__grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* ===========================
     NEED (hkneed)
     =========================== */
  .hkneed__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-24) 20px;
  }
  
  .hkneed__title {
    margin: 0 0 var(--space-16);
    text-align: center;
    color: var(--orange);
    font-weight: 900;
    font-size: clamp(22px, 3.2vw, 36px);
  }
  
  .hkneed__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 4vw, 40px);
    align-items: start;
  }
  
  .hkneed__item {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-10);
  }
  
  .hkneed__icon {
    inline-size: clamp(56px, 8vw, 92px);
    block-size: clamp(56px, 8vw, 92px);
    display: grid;
    place-items: center;
  }
  
  .hkneed__icon img, .hkneed__icon span {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    display: block;
  }
  
  .hkneed__text {
    color: var(--hkneed-muted);
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    line-height: 1.25;
  }
  
  @media (max-width: 720px) {
    .hkneed__list {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 640px) {
    .hk-wrap {
      padding: var(--space-16);
    }
  
    .hk-card {
      grid-column: span 12;
    }
  
    /* 1 в ряд */
  }
  
  
  .hk-age__summary-text
  {
    text-align: left;
  }
  .event-signed
  {
    font-size: var(--fs-14);
  }
  
  .modal-event {
    position: fixed;
    z-index: 11;
    top: 0px;
    left: 0px;
    background-color: #b1b1b1a8;
    width: 100%;
    height: 100%;
  }
  
  .event-container {
    position: relative;
  }
  
  .event-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    transition: .2s ease;
  }
  
  .event-close:hover {
    color: #333;
    transform: scale(1.2);
  }
  
  .event-container {
    background: #fff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 93px;
    max-height: calc(100vh - 120px);
    overflow: scroll;
  }
  
  .even-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #2d3e50;
  }
  
  .event-block {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e3e8f0;
    border-radius: 1rem;
    background: #fafbff;
  }
  
  .event-block > div:first-child {
    font-weight: 600;
    margin-bottom: .6rem;
    color: #2d3e50;
  }
  
  .event-date p {
    margin: .3rem 0;
    padding: .5rem .8rem;
    border-radius: .6rem;
    background: #eef2ff;
    font-size: .95rem;
    color: #333;
  }
  
  
  .child-row {
    /*display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-bottom: 1rem;*/
  }
  
  .even-submit {
    width: 100%;
    padding: .9rem;
    background: #ff5a00;
    border: none;
    border-radius: .8rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: .3s ease;
    margin-top: .8rem;
  }
  
  .even-submit:hover {
    background: #f46517;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255,91,91,.35);
  }
  
  @media (max-width: 600px) {
    .child-row {
      flex-direction: column;
    }
  }
  
  
  /* ===========================
     HERO v2 (.hkhero)
     =========================== */
  .hkhero-container{max-width:1180px;margin:0 auto;padding:0 20px}
  
  .hkhero{
    background: var(--sun);
    color: var(--hkhero-ink);
    position: relative;
    overflow: clip;
    --kid-h: clamp(520px, 56vw, 680px);
    --kid-scale: 100%;
  }
  .hkhero__inner{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-24);
    min-height: var(--kid-h);
    align-items: center;
    position: relative;
  }
  
  /* Общий каркас карточки-календаря */
  .hkreg__item.hkreg__item--calendar{
    border-radius: 16px;
    border: 1px solid #e8e8ee;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    overflow: hidden;
  }
  
  /* Закрытый вид */
  .hkreg__sum.hkreg__sum--calendar{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px 16px 18px;
    list-style: none;
    cursor: pointer;
  }
  .hkreg__sum::-webkit-details-marker{ display:none; }
  .hkreg__sum-left{
    display: grid;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .hkreg__sum-date{
    font-weight: 700;
    font-size: 14px;
    color: #374151;
  }
  .hkreg__sum-title{
    font-weight: 800;
    font-size: 18px;
    color: #111827;
  }
  .hkreg__sum-toggle{
    border: 0;
    background: transparent;
    padding: 8px;
    border-radius: 10px;
  }
  .hkreg__sum-toggle:hover{ background: rgba(0,0,0,.04); }
  .hkreg__chev{
    display: inline-block;
    width: 18px; height: 18px;
    border-right: 2px solid #111827;
    border-bottom: 2px solid #111827;
    transform: rotate(-45deg);
  }
  
  /* Раскрытый вид */
  .hkreg__body.hkreg__body--calendar{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    padding: 16px;
    border-top: 1px dashed #e9e9f1;
  }
  .hkreg__body-left .hkreg__title{
    font-weight: 900;
    font-size: 22px;
    margin-bottom: 6px;
  }
  /* Карточка календаря */
  .hkcal{
    --hk-border: rgba(0,0,0,.06);   /* дефолт (перекроется инлайном из JS) */
    --hk-fg: #111827;
    --hk-fg-muted: rgba(17,24,39,.7);
    --hk-chip: rgba(0,0,0,.18);
    background: var(--hk-bg, #fff);
    border-radius: 18px;
    padding: 16px 18px;
    margin: 12px 0;
    position: relative;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    border: 2px solid var(--hk-border);
    overflow: hidden;
  }
  
  
  
  .hkcal--blue{
    --hk-border:#B9C7E8;
    --hk-fg:#1f2a44;
    --hk-fg-muted:#1f2a44;
    --hk-chip:rgba(255,255,255,.35);
  }
  .hkcal--orange{
    --hk-border:#F5A100;
    --hk-fg:#fff;
    --hk-fg-muted:rgba(255,255,255,.8);
    --hk-chip:rgba(255,255,255,.35);
  }
  .hkcal--red{
    --hk-border:#FF5C00;
    --hk-fg:#fff;
    --hk-fg-muted:rgba(255,255,255,.85);
    --hk-chip:rgba(255,255,255,.35);
  }
  
  .hkcal__chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:6px 0 0;
    padding:0;
    list-style:none;
  }
  .hkcal__chips li{
    font-size:12px;
    font-weight:800;
    padding:4px 8px;
    border-radius:999px;
    background: var(--hk-chip-bg) /* var(--hk-chip-bg, rgb(50, 50, 50)) */;
    color: #FFFFFF; /* var(--hk-chip-fg, #FFFFFF); */
  }
  
  /* summary — закрытый вид */
  .hkcal__sum{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:12px;
    cursor:pointer;
    list-style:none;
  }
  .hkcal__sum::-webkit-details-marker{display:none;}
  .hkcal__sum-left{display:grid; gap:8px;}
  .hkcal__date{
    font-weight:800; font-size:16px; color: var(--orange);        /* яркая дата как на макете */
  }
  .hkcal__name{
    font-weight:700; font-size:26px; color: #FFFFFF; /* var(--hk-fg-muted) */
  }
  .hkcal__chev{
    width:44px; height:44px; border-radius:999px;
    background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.05) inset;
    position:relative;
  }
  .hkcal__chev::after{
    content:""; position:absolute; inset:0; margin:auto;
    width:14px; height:14px; border-right:3px solid var(--hk-fg);
    border-bottom:3px solid var(--hk-fg); transform:rotate(45deg);
  }
  
  /* тело — открытый вид */
  .hkcal[open] .hkcal__sum{display:none;}  /* в открытом виде summary скрыт полностью */
  
  .hkcal__body{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:24px;
    align-items:start;
  }
  .hkcal__title{
    font-size:28px; line-height:1.15; font-weight:900; color:#fff;
    /* для несветлых фонов лучше белый */
    color: #FFFFFF /* var(--hk-fg) перекрываем для синих/кастомных */;
  }
  .hkcal--orange .hkcal__title,
  .hkcal--red .hkcal__title{ color:#fff; }
  
  .hkcal__lessons{
    margin-top:10px; font-weight:800; color:rgba(0,0,0,.35);
  }
  .hkcal--orange .hkcal__lessons,
  .hkcal--red .hkcal__lessons{ color:rgba(255,255,255,.6); }
  
  .hkcal__teacher{
    margin-top:18px; font-size:15px; font-weight:600; color: var(--hk-fg-muted);
  }
  .hkcal--orange .hkcal__teacher,
  .hkcal--red .hkcal__teacher{ color:#fff; opacity:.95; }
  
  .hkcal__desc{ margin-top:10px; color: var(--hk-fg-muted); }
  
  /* правая колонка */
  .hkcal__right{ justify-self:end; text-align:right; }
  .hkcal__dates{
    margin:0 0 14px 0; padding:0; list-style:none;
    color: rgba(0,0,0,.35); font-weight:800;
  }
  .hkcal--orange .hkcal__dates,
  .hkcal--red .hkcal__dates{ color: rgba(255,255,255,.7); }
  .hkcal__dates li{ margin:4px 0; }
  
  /* кнопка "Записаться" — белая пилюля */
  .hkcal__cta{
    display:inline-block; text-decoration:none;
    background:var(--beige); color: var(--orange); font-weight:800;
    padding:10px 16px; border-radius:999px;
    box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
  }
  .hkcal__cta:hover{ filter:brightness(.96); }
  
  .signedUp__btn{
      display: inline-block; text-decoration:none;
      color: var(--orange); font-weight:800;
      padding:10px 16px; border-radius:999px;
  }
  
  
  /* ВЫКЛЮЧАЕМ старый псевдоэлемент на всякий случай */
  .hkcal__collapse::after{ content:none !important; }
  
  .hkcal__collapse .chev{
    width:12px; height:12px;
    border-right:3px solid #0B2239;
    border-bottom:3px solid #0B2239;
    transform:rotate(-135deg);  /* стрелка вверх */
    margin-top:2px;
  }
  
  .hkcal__right{ position:relative; z-index:1; }
  
  /* адаптив */
  @media (max-width: 900px){
    .hkcal__body{ grid-template-columns: 1fr; }
    .hkcal__right{ justify-self:start; text-align:left; }
  }
  
  /* обёртка кнопки — блок под правой колонкой, не перекрывает CTA */
  .hkcal__collapse-wrap{
    display:flex;
    justify-content:flex-end; 
    margin-top:16px;
  }
  /* чипсы дат в закрытом виде */
  .hkcal__chips{
    margin:6px 0 0; padding:0; list-style:none;
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .hkcal__chips li{
    font-size:12px; font-weight:800;
    padding:4px 8px; border-radius:999px;
  }
  .hkcal--orange .hkcal__chips li,
  .hkcal--red    .hkcal__chips li{
    background: rgba(255,255,255,.35); color:#fff;
  }
  
  /* сама кнопка-кружок */
  .hkcal__collapse{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    cursor:pointer;
    padding:0;
    line-height:1;
  }
  
  /* стрелка ↑ (без псевдоэлементов, чтобы не “прыгала”) */
  .hkcal__collapse .chev{
    width:12px;
    height:12px;
    border-right:3px solid #0B2239;  /* цвет стрелки */
    border-bottom:3px solid #0B2239;
    transform:rotate(-135deg);       /* направлена вверх */
    margin-top:2px;                  /* лёгкая подстройка по оптике */
  }
  
  .hkcal__collapse:hover{
    box-shadow:0 4px 14px rgba(0,0,0,.08);
  }
  
  /* на всякий — чтобы кнопка не перекрывала CTA,
     если где-то были абсолютные позиционирования */
  .hkcal__right{ position:relative; z-index:1; }
  .hkcal__collapse-wrap{ position:relative; z-index:0; }
  
  
  .hkreg__lessons{
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
  }
  .hkreg__teacher{
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
  }
  .hkreg__desc{
    font-size: 14px;
    color: #4b5563;
  }
  
  .hkreg__body-right{
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 12px;
    align-content: start;
  }
  .hkreg__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0; padding: 0; list-style: none;
  }
  .hkreg__datechip{
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
  }
  
  .hkreg__cta.hkreg__cta--big{
    display: inline-block;
    text-decoration: none;
    font-weight: 800;
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    background: #4f8ef7;
    text-align: center;
  }
  .hkreg__cta--big:hover{ background:#3573db; }
  
  .hkreg__collapse{
    appearance: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 700;
  }
  .hkreg__collapse:hover{ background:#f9fafb; }
  
  /* Цветовые модификаторы (если используешь именованные цвета) */
  .hkreg__item.hkreg__card--orange{ border-color:#ffd5a6; background: #fffaf4; }
  .hkreg__item.hkreg__card--blue  { border-color:#cfe0ff; background: #f6f9ff; }
  .hkreg__item.hkreg__card--green { border-color:#cfead0; background: #f5fff6; }
  
  /* Адаптив */
  @media (max-width: 900px){
    .hkreg__body.hkreg__body--calendar{ grid-template-columns: 1fr; }
  }
  
  /* left */
  .hkhero__left{ position: relative; z-index:2; padding-top: var(--space-8); }
  
  .hkhero__badge{
    font-weight: 800;
    font-size: clamp(15px, 6vw, 36px);
    position: relative;
    display: inline-block;
    z-index: 0;
    isolation: isolate;
    line-height: .95;
    margin-top: -100px;
    margin-bottom: 75px;
    color: #ffaa00;
  }
  .hkhero__badge::before{
    content:"";
    position:absolute; inset:auto;
    top: 50%; left: 50%;
    width: 20em; height: 20em;
    transform: translate(-55%, -75%);
    border-radius: 50%;
    background: var(--orange);
    z-index:-1;
  }
  .hkhero__badge span{ color: #FFB94F; }
  
  .hkhero__badge svg {
    margin: 0 auto;
    transform: translateX(-8%); /* подбери значение (например -5%..-12%) */
  }
  
  
  
  .hkhero__title{
    margin:0 0 var(--space-8);
    font-size: clamp(18px, 2.2vw, 22px);
    z-index:2; position:relative;
    font-weight:700;
  }
  .hkhero__subtitle{
    margin:0 0 var(--space-18);
    font-size: clamp(14px, 1.8vw, 16px);
    color: var(--hkhero-ink-weak);
    position: relative;
    max-width: 46ch;
  }
  
  /* Карточки месяца (сводка справа, стрелка снизу справа) */
  .hkreg__item{
    position: relative;
    border-radius: 16px;
    background:#fff;
    box-shadow: 0 3px 10px rgba(17,24,39,.08);
    margin: 14px 0;
    overflow: hidden;
  }
  .hkreg__item summary{list-style:none; cursor:pointer}
  .hkreg__item summary::-webkit-details-marker{display:none}
  
  /* Цветовые варианты (ты можешь расширить) */
  .hkreg__card--blue   { background:#B8C7E8; color:#0f172a; }
  .hkreg__card--orange { background:#FF9800; color:#fff;   }
  .hkreg__card--red    { background:#FF5A14; color:#fff;   }
  
  .hkreg__sum{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:16px;
    padding:18px 18px 24px;
  }
  .hkreg__sum-left{min-width:0}
  .hkreg__title{font-weight:800; font-size:22px; line-height:1.2; margin:0 0 8px}
  .hkreg__teacher{opacity:.95; font-weight:600}
  
  /* Правый столбец: даты столбиком + большая кнопка */
  .hkreg__sum-right{display:flex; align-items:flex-start; gap:16px}
  .hkreg__chips{margin:0; padding:0; list-style:none; display:grid; gap:6px}
  .hkreg__datechip{
    font-weight:800;
    opacity:.85;
    white-space:nowrap;
  }
  
  /* Кнопки записи */
  .hkreg__cta{
    display:inline-block; padding:8px 12px; border-radius:999px;
    background:#fff; color:#111; text-decoration:none; font-weight:700;
    border:1px solid rgba(17,24,39,.1);
  }
  .hkreg__cta--big{padding:8px 16px; box-shadow:0 2px 6px rgba(0,0,0,.06)}
  .hkreg__cta:hover{background:#f8fafc}
  
  /* Стрелка (chevron) в кружке снизу справа */
  .hkreg__chev{
    position:absolute; right:16px; bottom:12px;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.35);
  }
  .hkreg__chev::before{
    content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px;
    border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg);
  }
  .hkreg__item[open] .hkreg__chev::before{ transform: rotate(-135deg); }
  
  /* Тело карточки */
  .hkreg__body{background:#fff; color:#111827; padding:14px 16px 16px}
  .hkreg__desc{margin:0 0 10px}
  .hkreg__dates{list-style:none; margin:0; padding:0; display:grid; gap:10px}
  .hkreg__date{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px;
  }
  
  /* Мелкие правки для контраста на цветных карточках */
  .hkreg__card--orange .hkreg__cta,
  .hkreg__card--red    .hkreg__cta{
    background:#fff; color:#111; border-color:transparent;
  }
  .hkreg__card--blue .hkreg__cta{
    background:rgba(255,255,255,.9);
  }
  
  /* Адаптив */
  @media (max-width: 760px){
    .hkreg__sum{grid-template-columns: 1fr; padding-bottom:56px}
    .hkreg__sum-right{flex-wrap:wrap}
    .hkreg__chips{grid-auto-flow:row}
  }
  
  
  /* buttons */
  .hkhero-btn{
    display:inline-block;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-12);
    text-decoration:none;
    font-weight:700;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    border: 2px solid transparent;
  }
  .hkhero-btn:hover{ transform: translateY(-1px); }
  .hkhero-btn--primary{
    background: var(--orange);
    color:#fff;
    box-shadow: 0 10px 24px rgba(236,81,49,.35);
  }
  .hkhero-btn--primary:hover{ background:#D84527; }
  .hkhero-btn--ghost{
    background: #fff;
    color: var(--sun);
    border-color: #F7B27A;
  }
  .hkhero-btn--ghost:hover{background:#EBEBEB;}
  .hkhero__actions{ display:flex; gap:var(--space-12); flex-wrap:wrap; }
  
  /* right */
  .hkhero__right{ position:relative; min-height: var(--kid-h); overflow: visible !important;}
  
  .hkhero__photo{
    position: absolute !important;
    overflow: visible !important;
    inset: 0 !important;
    top: 0;
    right: -10vw;
    bottom: 0;
    left: 0;
    width: calc(100% + 10vw);
    z-index: 1;
    /* точки */
    background:
      radial-gradient(circle 16px at 20% 20%, #F36C3F 95%, transparent 100%) 0 0/120px 120px repeat,
      radial-gradient(circle 16px at 60% 50%, #FFDF8F 95%, transparent 100%) 0 0/120px 120px repeat,
      radial-gradient(circle 16px at 80% 80%, #98B4FF 95%, transparent 100%) 0 0/120px 120px repeat,
      var(--sun); /* важно перекрыть прежние фоны */
    background-position: center;
  }
  
  .hkhero__photo::after{
    content:"";
    position:absolute;
    inset:0;
    top: 0;
    right: 0; /* добавим пространство справа, чтобы не обрезало */
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events:none;
    background-image:url('/img/kid1.png');
    background-repeat:no-repeat;
    background-size: auto 100%;
    background-position: right bottom;
  }
  
  
  /* Адаптив: на мобилках — поплотнее точки и без маски */
  @media (max-width: 900px){
    .hkhero__photo{
      -webkit-mask-image: none; mask-image: none;
      background-size: 80px 80px;  /* плотнее паттерн */
    }
    .hkhero__photo::after{
      background-position: center right;
    }
  }
  
  .hkcal__signedUp{
  
    width: max-content;
    text-decoration:none;
    background:var(--beige); color: var(--orange); font-weight:800;
    padding:10px 16px; border-radius:999px;
    box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
  }
  .hkcal__signedUp:hover{ filter:brightness(.96); }
  
  .hkreg__inner .hk-age__label
  {
    text-align: center;
    color: var(--orange);
    font-weight: 900;
    font-size: clamp(26px, 4vw, 44px);
    margin: 0 0 var(--space-24);
  }
  
  .hkteachers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-28);
    align-items: center;
  }
  
  .hkteachers__photo img {
    width: 80%;
  }
  ::marker {
    color: #ffaa01;
  }
  
  .hkteachers__text {
    font-size: var(--fs-18);
    line-height: var(--lh-1-45);
    color: var(--hkneed-muted);
  }
  
  .hkteachers__text .accent {
    color: var(--sun);
    font-weight: 700;
  }
  
  .hkteachers__text .accent-strong {
    color: var(--orange-dark);
    font-weight: 800;
  }
  
  .hkteachers__text .muted {
    color: var(--muted);
    font-style: italic;
  }
  
  .hkteachers__text ul {
    margin: var(--space-12) 0;
    padding-left: 20px;
  }
  
  .hkteachers__text li {
    margin-bottom: var(--space-6);
  }
  
  @media (max-width: 760px) {
    .hkteachers__grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .hkteachers__text {
      text-align: left;
    }
  }
  /* ===========================
     📱 FOOTER MOBILE FIX
     =========================== */
  @media (max-width: 768px) {
    .my-footer {
      padding: 32px 16px;
      text-align: center;
    }
  
    /* ключевой блок */
    .footcontainer {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 24px !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 auto !important;
    }
  
    /* каждая колонка внутри — на всю ширину */
    .footcontainer > * {
      width: 100% !important;
      max-width: 100% !important;
      text-align: center !important;
    }
  
    .footer-col {
      flex: 1 1 100% !important;
      min-width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  
    .footer-col h4 {
      font-size: 16px;
      margin-bottom: 8px;
    }
  
    .footer-col ul {
      margin-bottom: 12px;
    }
  
    .footer-col li {
      margin-bottom: 4px;
    }
  
    /* нижняя часть (копирайт) */
    .footer-copy {
      display: flex;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px;
      width: 100%;
      padding-top: 20px;
      border-top: 1px solid rgba(0,0,0,0.1);
      text-align: center;
    }
  
    .footer-copy p {
      font-size: 13px;
      margin: 0;
    }
  
    /* ссылки не вылетают */
    .footer-copy a,
    .footer-col a {
      word-break: break-word;
    }
  }
  /* ===========================
     📱 ADAPTIVE: HK-AGE TABS + BUTTONS
     =========================== */
  @media (max-width: 640px) {
  
    /* контейнер с табами */
    .hk-age__tabs {
      display: flex;
      flex-wrap: wrap;                    /* разрешаем перенос строк */
      justify-content: center;            /* выравниваем по центру */
      gap: 8px;                           /* расстояние между кнопками */
      padding: 8px 12px;
    }
  
    /* базовые кнопки — структура остаётся */
    .hk-btn-age,
    .hk-age__tabs button {
      flex: 1 1 calc(50% - 8px);          /* по две кнопки в ряд */
      max-width: 100%;
      font-size: 15px;
      padding: 10px 0;
      border-radius: 999px;
      text-align: center;
    }
  
    /* активная кнопка */
    .hk-btn-age.is-active {
      transform: none;
    }
  
    /* последняя кнопка (длинная "Мероприятия для вас") — во всю ширину */
    .hk-age__tabs button:last-child {
      flex: 1 1 100%;
    }
  
    /* если кнопки очень короткие — центрируем текст */
    .hk-age__tabs button span,
    .hk-btn-age span {
      display: inline-block;
      text-align: center;
    }
  }
  /* ===========================
     📱 FIX: FOOTER BUTTON OVERFLOW
     =========================== */
  @media (max-width: 900px) {
    /* кнопка внизу страницы */
    .last-button,
    .hkhero-btn,
    .my-footer .hkhero-btn {
      display: inline-block;
      max-width: 90vw;          /* не шире окна */
      width: auto;
      padding: 12px 20px;
      font-size: 16px;
      text-align: center;
      box-sizing: border-box;
      white-space: normal;
    }
  
    /* центрируем безопасно */
    section center,
    .last-button,
    .hkhero-btn {
      margin: 0 auto;
    }
  
    /* убираем возможные отрицательные отступы или смещения */
    .last-button {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  
    /* если кнопка всё ещё внутри .footcontainer */
    .footcontainer .last-button {
      max-width: 100%;
    }
  
    /* для случаев, когда кнопка завернута в <center> */
    center {
      display: flex;
      justify-content: center;
    }
  }
  /* ===========================
     📱 FIX: FOOTER BUTTON ON MOBILE
     =========================== */
  @media (max-width: 640px) {
    /* ограничиваем ширину контейнера футера */
    .my-footer,
    .footcontainer,
    section,
    body {
      overflow-x: hidden !important;
    }
  
    /* сама кнопка — никогда не шире экрана */
    .hkhero-btn,
    .last-button {
      display: block;
      width: 100%;
      max-width: 92vw;             /* безопасное ограничение */
      margin: 0 auto 24px;
      padding: 14px 0;
      box-sizing: border-box;
      text-align: center;
      font-size: 16px;
      border-radius: 999px;
      word-break: keep-all;
    }
  
    /* если кнопка внутри футера — центрируем */
    .my-footer .hkhero-btn,
    .footcontainer .hkhero-btn,
    .my-footer .last-button {
      margin-left: auto;
      margin-right: auto;
    }
  
    /* убираем влияние center и фиксируем выравнивание */
    center {
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
  /* ===========================
     📱 FIX v2: FOOTER BUTTON SAFE ON MOBILE
     =========================== */
  @media (max-width: 680px) {
  
    /* Отключаем лишний overflow, но только по оси X */
    html, body {
      overflow-x: clip; /* безопаснее, чем hidden */
    }
  
    /* Футер снова виден */
    .my-footer {
      display: block;
      position: relative;
      overflow: visible !important;
      padding: 24px 16px 32px;
    }
  
    /* Контейнер внутри футера */
    .footcontainer {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
    }
  
    .footer-nav {
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }
  
    /* Кнопка расписания/уроков */
    .hkhero-btn,
    .last-button,
    .footcontainer .exit_btn {
      display: block;
      width: 100%;
      max-width: 300px;
      margin: 0 auto;
      padding: 14px 0;
      font-size: 16px;
      border-radius: 999px;
      text-align: center;
    }
  
    /* Низ футера */
    .footer-copy {
      flex-direction: column;
      text-align: center;
      gap: 8px;
    }
  }
  /* ===========================
     📱 FIX v2: FOOTER BUTTON SAFE ON MOBILE
     =========================== */
  @media (max-width: 680px) {
  
    /* Отключаем лишний overflow, но только по оси X */
    html, body {
      overflow-x: clip; /* безопаснее, чем hidden */
    }
  
    /* Футер снова виден */
    .my-footer {
      display: block;
      position: relative;
      overflow: visible !important;
      padding: 24px 16px 32px;
    }
  
    /* Контейнер внутри футера */
    .footcontainer {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
    }
  
    .footer-nav {
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }
  
    /* Кнопка расписания/уроков */
    .hkhero-btn,
    .last-button,
    .footcontainer .exit_btn {
      display: block;
      width: 100%;
      max-width: 300px;
      margin: 0 auto;
      padding: 14px 0;
      font-size: 16px;
      border-radius: 999px;
      text-align: center;
    }
  
    /* Низ футера */
    .footer-copy {
      flex-direction: column;
      text-align: center;
      gap: 8px;
    }
  }
  /* ===========================
     📱 FIX: MOBILE HEADER COMPACT
     =========================== */
  @media (max-width: 768px) {
  
    /* Общая шапка — делаем её компактнее */
    .my-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: var(--surface);
      box-shadow: 0 2px 10px rgba(0,0,0,.06);
      border-bottom: 1px solid var(--border);
      padding: 4px 0;
    }
  
    /* Контейнер внутри шапки */
    .headcontainer {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 14px;
    }
  
    /* Логотип или заголовок */
    .my-header h1 {
      font-size: 18px;
      font-weight: 800;
      margin: 0;
      line-height: 1.2;
      white-space: nowrap;
    }
  
    /* Навигация — делаем компактнее */
    .my-header nav {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 6px;
      scrollbar-width: none;
    }
  
    .my-header nav::-webkit-scrollbar {
      display: none;
    }
  
    .my-header nav a {
      font-size: 14px;
      padding: 6px 10px;
      border-radius: 8px;
    }
  
    /* Кнопка выхода — уменьшаем и выравниваем */
    .exit_btn {
      font-size: 14px;
      padding: 6px 14px;
      border-radius: 999px;
      line-height: 1.1;
      white-space: nowrap;
    }
  
    /* Убираем крупные отступы контейнера */
    .my-header .container {
      padding: 0 12px;
      min-height: auto;
    }
  
    /* Чтобы шапка не "съедала" высоту при прокрутке */
    body {
      padding-top: 0 !important;
    }
  }
  
  /* ещё компактнее на телефонах <480px */
  @media (max-width: 480px) {
    .my-header h1 {
      font-size: 16px;
    }
    .exit_btn {
      font-size: 13px;
      padding: 5px 12px;
    }
    .my-header nav a {
      font-size: 13px;
      padding: 5px 8px;
    }
  }
  /* ===========================
     📱 MOBILE BURGER MENU
     =========================== */
  @media (max-width: 768px) {
  
    /* Скрываем стандартную навигацию */
    .my-header nav {
      display: none !important;
    }
  
    /* Контейнер хедера */
    .headcontainer {
      justify-content: space-between;
      padding: 10px 16px;
    }
  
    /* Бургер-кнопка */
    .burger-btn {
      background: none;
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      padding: 8px;
    }
  
    .burger-btn span {
      display: block;
      width: 24px;
      height: 2.5px;
      background: var(--orange);
      border-radius: 2px;
      transition: transform .3s ease, opacity .3s ease;
    }
  
    /* состояние активного крестика */
    .burger-btn.is-active span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    .burger-btn.is-active span:nth-child(2) {
      opacity: 0;
    }
    .burger-btn.is-active span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }
  
    /* Панель меню */
    .mobile-menu {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      display: none;
      justify-content: flex-end;
      z-index: 2000;
    }
  
    .mobile-menu.is-open {
      display: flex;
    }
  
    .mobile-menu__panel {
      background: #fff;
      width: 80%;
      max-width: 320px;
      height: 100%;
      padding: 24px 20px;
      box-shadow: -4px 0 20px rgba(0,0,0,0.15);
      display: flex;
      flex-direction: column;
      gap: 16px;
      animation: slideIn .25s ease;
    }
  
    @keyframes slideIn {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }
  
    .mobile-menu__link {
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      font-size: 16px;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }
  
    .mobile-menu__link:hover {
      color: var(--orange);
    }
  
    .mobile-menu__exit {
      margin-top: auto;
      background: var(--orange);
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 700;
      cursor: pointer;
    }
    svg {
        margin-top: 8% !important;
        height: auto;
        width: 80%;
        transform: translateX(1%) !important;
    }
    .hkhero__badge::before {
        transform: translate(-50%, -65%);
    }
    .hkhero__badge img {
        margin-top: 20% !important;
        margin-left: 0px !important;
        height: auto;
        width: 90%;
        transform: translateX(1%) !important;
    }
    .lefter {
        display: none;
    }
  
  }
  /* ===========================
     📱 ADAPTIVE: HIDE HERO PHOTO ON SMALL SCREENS
     =========================== */
  @media (max-width: 900px) {
    .hkhero__photo {
      display: none !important;   /* полностью скрываем фото */
    }
  
    /* выравниваем контент по центру и даём воздуху */
    .hkhero__inner {
      grid-template-columns: 1fr !important; /* только текстовая колонка */
      text-align: center;
      padding: 40px 20px;
    }
  
    .hkhero__left {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  
    .hkhero__title {
      font-size: clamp(18px, 4vw, 22px);
      max-width: 100%;
      margin: 0 auto 16px;
    }
  
    .hkhero__subtitle {
      font-size: clamp(14px, 3.5vw, 16px);
      margin: 0 auto 24px;
      max-width: 90%;
    }
  
    .hkhero__actions {
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
    }
  
    .hkhero-btn {
      width: auto;
      min-width: 180px;
      font-size: 15px;
    }
  }
  
  /* ещё компактнее на телефонах <600px */
  @media (max-width: 600px) {
    .hkhero__inner {
      padding: 24px 16px 48px;
    }
  
    .hkhero-btn {
      width: 100%;
      max-width: 280px;
    }
  }
  
  .mobile-menu {
      display: none;
  }
  /* ===========================
     🖥️ SHOW BURGER ONLY ON SMALL SCREENS (SYNCED)
     =========================== */
  
  /* по умолчанию бургер скрыт */
  .burger-btn {
    display: none !important;
  }
  
  /* показываем бургер и скрываем меню при ширине ≤ 768px */
  @media (max-width: 768px) {
    .burger-btn {
      display: flex !important;
    }
    .my-header nav {
      display: none !important;
    }
      .hkhero__right {
      display: none;
  }
  }
  @media (max-width: 900px) {
    .hkhero__right {
      display: none !important; /* перекрываем инлайн/более специфичные селекторы */
    }
  }
  
  
  .hk-btn
  {
    cursor: pointer;
  }
  .hk-course-detail .files {
    text-align: right;
    margin-top: 11px;
  }
  .hk-course-detail .homeFile {
    margin-top: 12px;
  }
  
  .hk-course-detail .files {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* прижимает все элементы к правому краю */
  }
  .hk-course-detail  .homeFile {
    display: flex
  ;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #eee;
  }
  .hk-course-detail  .file-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    text-decoration: none;
  }
  .hk-course-detail  .file-icon {
    font-size: 1.4em;
  }
  .hk-course-detail  .file-name {
    font-weight: 500;
    width: 90px;
    white-space: pre;
    overflow: hidden;
  }
  .hk-course-detail .file-size {
    font-size: 0.85em;
    color: #777;
  }
  .hk-course-detail .delete-btn {
    margin-left: 10px;
    cursor: pointer;
  }
  .hk-course-detail .files-title
  {
    color: #FF5A00;
  }
  
  .headcontainer {
    max-width: 1440px;          /* шире контента */
    margin: 0 auto;
  
    padding: 16px 48px;            /* 🔥 отступ от краёв */
    
    display: flex;
    align-items: center;
    justify-content: space-between; /* 🔥 РАЗВОДИТ ПО КРАЯМ */
  }
  /* === HK HERO: кружки не обрезаются слева/справа (верх/низ НЕ трогаем) === */
  
  /* на всякий: если где-то включили clip/hidden на секции */
  .hkhero,
  .hkhero-container,
  .hkhero__inner,
  .hkhero__right {
    overflow: visible !important;
  }
  
  /* убираем маску (если включалась через @supports mask-image — она "режет" края) */
  .hkhero__photo{
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: visible !important;
    position: absolute;
  }
  
  /* переносим кружки на слой с запасом по X */
  .hkhero__photo{
    background: none !important; /* чтобы фон не рисовался строго внутри границ */
  }
  
  .hkhero__photo::before{
    content: "";
    position: absolute;
  
    /* НЕ трогаем верх/низ */
    top: 0;
    bottom: 0;
  
    /* добавляем запас только по бокам */
    left: -80px;
    right: -80px;
  
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle 16px at 20% 20%, #F36C3F 95%, transparent 100%) 0 0/120px 120px repeat,
      radial-gradient(circle 16px at 60% 50%, #FFDF8F 95%, transparent 100%) 0 0/120px 120px repeat,
      radial-gradient(circle 16px at 80% 80%, #98B4FF 95%, transparent 100%) 0 0/120px 120px repeat,
      var(--sun); /* важно перекрыть прежние фоны */
    background-position: center;
  }
  
  /* картинка ребёнка остаётся поверх кружков */
  .hkhero__photo::after{
    z-index: 2 !important;
  }
/* End */
/* /local/templates/kids/styles.css?17606089377792 */
/* /local/templates/kids/css/styles.css?177434862468630 */