/* Global Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Fonts and Colors */
:root{
  --bg:#f4f7fb;
  --text:#222222;
  --muted:#475569;
  --primary:#1d4ed8;      /* синій акцент */
  --primary-600:#1e40af;
  --accent:#f59e0b;       /* теплий акцент */
  --card:#ffffff;
  --line:#e2e8f0;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Containers */
.header__container, .footer__container, .hero__container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--line);
    padding: 15px 0;
    position: sticky; top: 0; z-index: 1000;
}
.header__logo {
    font-family: 'Roboto Slab', serif;
    font-size: 1.4rem; font-weight: 700; color: var(--primary);
}
.header__container { display: flex; align-items: center; justify-content: space-between; }
.header__menu { list-style: none; display: flex; gap: 20px; }
.header__menu a {
    text-decoration: none; color: var(--text); font-weight: 500; transition: color .25s;
}
.header__menu a:hover { color: var(--primary); }

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 14px; border: 1px solid transparent;
  font-weight: 600; text-decoration: none; transition: transform .12s ease, box-shadow .25s, background-color .25s, color .25s;
  will-change: transform;
}
.btn:active{ transform: translateY(1px) scale(0.99); }
.btn--primary{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  color: #fff; box-shadow: 0 10px 24px rgba(29,78,216,.25);
}
.btn--primary:hover{ box-shadow: 0 14px 28px rgba(29,78,216,.35); }
.btn--ghost{
  background: rgba(255,255,255,.6); border-color: var(--line); color: var(--primary);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ background:#fff; }

/* Hero */
.hero{
  position: relative; overflow: hidden;
  padding: 72px 0 48px;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(29,78,216,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(245,158,11,.12), transparent 55%);
}
.hero__container{
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
.hero__content{ order: 2; }
.hero__media{ order: 1; position: relative; }

.hero__title{
  font-family: 'Roboto Slab', serif; font-size: 2rem; line-height: 1.2; margin-bottom: 12px;
}
.hero__typing{
  display: inline-block; min-width: 7ch; border-right: 2px solid var(--primary);
  padding-right: 4px; margin-left: 4px;
}
.hero__subtitle{
  color: var(--muted); margin-bottom: 18px; max-width: 58ch;
}

.hero__features{ list-style: none; display: grid; gap: 10px; margin: 18px 0 22px; }
.hero__feature{ display:flex; align-items: center; gap: 10px; color:#0f172a; }
.hero__icon{ width:20px; height:20px; color: var(--primary); }

.hero__actions{ display:flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 18px; }

.hero__stats{ display:flex; gap: 12px; flex-wrap: wrap; }
.stat-card{
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 120px;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
.stat-card__num{ font-weight: 700; font-size: 1.25rem; }
.stat-card__label{ display:block; color: var(--muted); font-size: .9rem; }

.stat-card--a{ border-color: rgba(29,78,216,.25); }
.stat-card--b{ border-color: rgba(245,158,11,.35); }
.stat-card--c{ border-color: rgba(16,185,129,.35); }

.hero__media{
  display:flex; align-items:center; justify-content:center;
}
.hero__image{
  width: 100%; max-width: 520px; height: auto; border-radius: 20px; border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(2,6,23,.12);
}
.hero__badge{
  position:absolute; top:-10px; left: -4px;
  background:#fff; border:1px solid var(--line); border-radius: 999px; padding:8px 12px;
  display:flex; align-items:center; gap:8px; font-weight:600; box-shadow: 0 10px 24px rgba(2,6,23,.08);
}
.hero__shape{
  position:absolute; border-radius: 24px; pointer-events:none; opacity:.6;
}
.hero__shape--1{ width: 140px; height: 140px; bottom: -18px; right: -18px; background: rgba(29,78,216,.12); filter: blur(2px); }
.hero__shape--2{ width: 90px; height: 90px; bottom: 20%; left: -26px; background: rgba(245,158,11,.18); transform: rotate(12deg); }
.hero__shape--3{ width: 60px; height: 60px; top: -14px; right: 34%; background: rgba(16,185,129,.18); }

/* Footer */
.footer {
    background-color: #1e293b; color: #f1f5f9; padding: 40px 20px;
}
.footer__container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
}
.footer__logo { font-family: 'Roboto Slab', serif; font-size: 1.5rem; }
.footer__col h4 { font-size: 1.1rem; margin-bottom: 10px; color: #93c5fd; }
.footer__col ul { list-style: none; }
.footer__col ul li { margin-bottom: 8px; }
.footer__col ul li a { color: #f1f5f9; text-decoration: none; transition: color .25s; }
.footer__col ul li a:hover { color: #60a5fa; }
.footer__col p, .footer__col a { font-size: 0.95rem; }

/* Responsive */
@media (min-width: 860px){
  .hero__container{ grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; }
  .hero__content{ order: 1; }
  .hero__media{ order: 2; }
  .hero{ padding: 92px 0 72px; }
}
@media (max-width: 768px) {
    .header__menu { flex-direction: column; gap: 10px; }
}

/* Courses */
.courses{ padding: 64px 0; }
.courses__container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.courses__header{ margin-bottom: 18px; }
.courses__title{
  font-family: 'Roboto Slab', serif; font-size: 1.7rem; margin-bottom: 6px;
}
.courses__subtitle{ color: var(--muted); }

/* Filters */
.courses__filters{
  display:flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px;
}
.courses__filter{
  border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius: 999px;
  font-weight:600; cursor:pointer; transition: transform .12s, box-shadow .25s, background-color .25s, color .25s;
}
.courses__filter:hover{ transform: translateY(-1px); }
.courses__filter.is-active{ background: var(--primary); color:#fff; box-shadow: 0 8px 18px rgba(29,78,216,.25); }

/* Grid */
.courses__grid{
  display:grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 700px){
  .courses__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .courses__grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Card */
.course-card{
  display:flex; flex-direction: column; background: var(--card); border:1px solid var(--line);
  border-radius: 18px; overflow:hidden; box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .3s ease, border-color .3s ease;
}
.course-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(2,6,23,.12);
  border-color: rgba(29,78,216,.3);
}
.course-card__media{ position: relative; }
.course-card__img{ display:block; width:100%; height:auto; }
.course-card__badge{
  position:absolute; left:12px; top:12px; background:#fff; border:1px solid var(--line); border-radius: 999px;
  padding:6px 10px; font-weight:600; box-shadow: 0 10px 20px rgba(2,6,23,.08);
}
.course-card__body{ padding: 14px; display:flex; flex-direction: column; gap: 10px; }
.course-card__title{ font-weight:700; }
.course-card__meta{ list-style:none; display:flex; gap: 14px; color: var(--muted); font-size: .95rem; }
.course-card__meta i{ width:18px; height:18px; color: var(--primary); vertical-align:-3px; margin-right:4px; }
.course-card__desc{ color:#0f172a; }
.course-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.course-card__tags span{
  background: #f8fafc; border:1px solid var(--line); border-radius: 999px; padding:4px 8px; font-size: .85rem;
}
.course-card__cta{ margin-top: 6px; }

/* Hide helper for filtering */
.course-card.is-hidden{ display:none; }

/* Teachers */
.teachers{ padding: 64px 0; }
.teachers__container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.teachers__header{ margin-bottom: 18px; }
.teachers__title{ font-family:'Roboto Slab', serif; font-size:1.7rem; margin-bottom:6px; }
.teachers__subtitle{ color: var(--muted); }

.teachers__grid{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width: 700px){
  .teachers__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .teachers__grid{ grid-template-columns: repeat(4, 1fr); }
}

.teacher-card{
  display:flex; flex-direction:column; background: var(--card);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition: transform .18s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.teacher-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(2,6,23,.12);
  border-color: rgba(245,158,11,.35);
}
.teacher-card__media{ position:relative; }
.teacher-card__img{
  display:block; width:100%; height:auto; aspect-ratio: 4/3; object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}
.teacher-card__badge{
  position:absolute; left:12px; top:12px; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; font-weight:600; box-shadow:0 10px 20px rgba(2,6,23,.08);
}
.teacher-card__body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.teacher-card__name{ font-weight:700; }
.teacher-card__meta{ list-style:none; display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:.95rem; }
.teacher-card__meta i{ width:18px; height:18px; color:var(--primary); vertical-align:-3px; margin-right:4px; }
.teacher-card__bio{ color:#0f172a; }
.teacher-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.teacher-card__tags span{
  background:#f8fafc; border:1px solid var(--line); border-radius:999px; padding:4px 8px; font-size:.85rem;
}
.teacher-card__cta{ margin-top:6px; }

/* Reveal animation (IntersectionObserver toggles .is-visible) */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* Reviews */
.reviews{ padding: 64px 0; background:
  radial-gradient(900px 420px at 0% 0%, rgba(29,78,216,.06), transparent 55%),
  radial-gradient(800px 380px at 100% 20%, rgba(245,158,11,.08), transparent 60%);
}
.reviews__container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.reviews__header{ margin-bottom:18px; }
.reviews__title{ font-family:'Roboto Slab', serif; font-size:1.7rem; margin-bottom:6px; }
.reviews__subtitle{ color: var(--muted); }

/* Carousel layout */
.reviews__carousel{ position: relative; }
.reviews__viewport{
  overflow: hidden; border-radius: 18px; border:1px solid var(--line); background:#fff;
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
}
.reviews__track{
  display:flex; will-change: transform; transition: transform .45s ease;
}
.review-card{
  flex: 0 0 100%;
  padding: 16px; display:flex; flex-direction: column; gap: 12px;
}
.review-card__head{ display:flex; align-items:center; gap: 12px; }
.review-card__avatar{
  width: 54px; height: 54px; border-radius: 50%; border:1px solid var(--line); object-fit: cover;
}
.review-card__meta{ display:flex; flex-direction:column; }
.review-card__name{ font-weight:700; }
.review-card__tag{
  display:inline-flex; align-items:center; gap:6px;
  background:#f8fafc; border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:.85rem;
}
.review-card__rate i{ width:16px; height:16px; color: var(--accent); }
.review-card__text{ color:#0f172a; }
.review-card__cta{ align-self:flex-start; }

/* Controls */
.reviews__controls{
  display:flex; justify-content: center; gap: 8px; margin-top: 12px;
}
.reviews__btn{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .12s, box-shadow .25s, background-color .25s;
}
.reviews__btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.12); }
.reviews__btn i{ width:20px; height:20px; color: var(--primary); }

/* Dots */
.reviews__dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
.reviews__dot{
  width:8px; height:8px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer;
  transition: transform .12s, background-color .25s, border-color .25s;
}
.reviews__dot:hover{ transform: scale(1.05); }
.reviews__dot.is-active{ background: var(--primary); border-color: var(--primary); }

/* Optional larger viewport on desktop */
@media (min-width: 900px){
  .review-card{ padding: 20px 24px; }
}

/* FAQ */
.faq{ padding: 64px 0; }
.faq__container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.faq__header{ margin-bottom: 18px; }
.faq__title{ font-family:'Roboto Slab', serif; font-size:1.7rem; margin-bottom:6px; }
.faq__subtitle{ color: var(--muted); }

.faq__list{ display:grid; gap:10px; }
.faq-item{
  border:1px solid var(--line); border-radius: 14px; background:#fff;
  box-shadow: 0 8px 22px rgba(2,6,23,.06);
  overflow: hidden;
}
.faq-item__title{ font-size: 1rem; }
.faq-item__toggle{
  width:100%; text-align:left; background:#fff; border:0; cursor:pointer;
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-weight:700; transition: background-color .25s;
}
.faq-item__toggle:hover{ background:#f8fafc; }
.faq-item__icon{ width:20px; height:20px; color: var(--primary); transition: transform .25s; }

.faq-item__panel{ padding:0 16px 14px; border-top:1px solid var(--line); }
.faq-item__text{ color:#0f172a; }

.faq-item.is-open .faq-item__icon{ transform: rotate(180deg); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faq-item__icon{ transition: none; }
}

/* Contact */
.contact{ padding: 64px 0; background:
  radial-gradient(900px 420px at 100% 0%, rgba(29,78,216,.06), transparent 55%),
  radial-gradient(800px 380px at 0% 20%, rgba(16,185,129,.08), transparent 60%);
}
.contact__container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.contact__header{ margin-bottom:18px; }
.contact__title{ font-family:'Roboto Slab', serif; font-size:1.7rem; margin-bottom:6px; }
.contact__subtitle{ color: var(--muted); max-width: 60ch; }

.contact-form{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px;
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
}
.contact-form__grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 780px){
  .contact-form__grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-form__field--captcha{ grid-column: span 2; }
}

.contact-form__label{ font-weight:700; display:block; margin-bottom:6px; }
.contact-form__input{
  width:100%; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; outline:none; transition: border-color .2s, box-shadow .25s;
}
.contact-form__input:focus{
  border-color: rgba(29,78,216,.5);
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}

.contact-form__error{
  color:#b91c1c; min-height: 1.1em; display:block; margin-top:4px; font-size:.9rem;
}

/* Captcha */
.captcha{
  display:flex; align-items:center; gap:8px;
}
.captcha__expr{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 86px; padding: 8px 12px; border-radius:10px;
  background:#f8fafc; border:1px solid var(--line); font-weight:700;
}
.captcha__input{ flex: 1 1 auto; }
.captcha__refresh{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer;
  transition: transform .12s, box-shadow .25s, background-color .25s;
}
.captcha__refresh:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.12); }
.captcha__refresh i{ width:20px; height:20px; color: var(--primary); }

/* Consent */
.contact-form__consent{
  display:flex; align-items:flex-start; gap:10px; margin-top:10px;
}
.contact-form__consent input{ transform: translateY(3px); }

/* Actions & Status */
.contact-form__actions{
  display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap;
}
.contact-form__status{ color: var(--muted); min-height: 1.2em; }

/* Toast */
.contact-form__toast{
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background:#10b981; color:#fff; padding:12px 16px; border-radius: 12px; box-shadow: 0 12px 24px rgba(2,6,23,.2);
  z-index: 2000;
}

/* Disabled submit state */
.contact-form__submit[disabled]{ opacity:.7; cursor:not-allowed; }

/* Cookie Pop-up */
.cookie{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
  padding: 12px 14px; /* невеликий відступ по краях екрана */
}
.cookie__container{
  max-width: 1200px; margin: 0 auto;
  background: #0f172a; color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 14px; padding: 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  box-shadow: 0 16px 40px rgba(2,6,23,.32);
}
.cookie__text{ font-size: .95rem; line-height: 1.45; }
.cookie__link{ color: #93c5fd; text-decoration: underline; }
.cookie__link:hover{ color: #bfdbfe; }
.cookie__accept{ justify-self: end; }

/* Pages (policy templates) */
.pages{ padding: 56px 0; }
.pages .container{ max-width: 900px; margin: 0 auto; padding: 0 20px; }

.pages h1{
  font-family: 'Roboto Slab', serif;
  font-size: 2rem; line-height: 1.2; margin-bottom: 12px; color: #0f172a;
}
.pages p{
  margin: 10px 0; color: #0f172a;
}
.pages h2{
  font-family: 'Roboto Slab', serif;
  font-size: 1.25rem; margin: 18px 0 8px; color: #0f172a;
}
.pages ul{ padding-left: 18px; margin: 8px 0; }
.pages li{ margin: 6px 0; }
.pages strong{ font-weight: 700; }
.pages a{ color: var(--primary); text-decoration: underline; }
.pages a:hover{ color: var(--primary-600); }