/* ========== RESET / BASE ========== */
:root{
  --accent:#2a7a8d;
  --muted:#6b6b6b;
  --bg:#fbfdfd;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:var(--bg);color:#111}
img{max-width:100%;display:block}

/* ========== LAYOUT ========== */
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:64px;margin-left:20px;height:auto}
.brand-text .title{font-weight:700}
.brand-text .subtitle{font-size:13px;color:var(--muted)}
.services {background:#e1e19b;padding-block:20px;}

/* ========== NAV ========== */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;border:0;cursor:pointer}
.primary{background:var(--accent);color:#fff}
.btn.primary{padding-inline: 10px;margin-inline: 20px;}
.ghost{background:transparent;border:2px solid rgba(42,166,169,0.82);color:var(--accent);padding-inline:40px;font-weight:bold;align-content: center;}
#scrollTopBtn {position: fixed;bottom: 30px;right: 30px;z-index: 999;background: rgba(255, 255, 255, 0.25);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);color: var(--accent, #2a7a8d);border: 1px solid rgba(255,255,255,0.3);border-radius: 50%;width: 52px;height: 52px;font-size: 24px;cursor: pointer;box-shadow: 0 4px 12px rgba(0,0,0,0.2);opacity: 0;pointer-events: none;transition: opacity 0.3s ease, transform 0.3s ease;}
/* при появлении */
#scrollTopBtn.show {opacity: 1;pointer-events: auto;}
/* лёгкая анимация при наведении */
#scrollTopBtn:hover {transform: scale(1.1);background: rgba(255, 255, 255, 0.35);}

/* ========== MENU ========== */
.main-nav{display:flex;gap:15px;align-items:center;transition: max-height 0.3s ease, opacity 0.3s ease;}
.main-nav a{color:#0f1724;text-decoration:none;font-weight:600;padding:8px 6px}
/* Кнопка-гамбургер */
.menu-toggle {display:none;flex-direction:column;justify-content:space-between;width:30px;height:22px;background:none;border:none;cursor:pointer;padding:0;margin-inline: 20px;}
.menu-toggle span {display:block;height:3px;background:#333;border-radius:2px;transition:all 0.3s ease;}
/* ========== HERO ========== */
.hero{padding:120px 0 30px 0;background: linear-gradient(180deg, #aabb95 0%, #61ddc3 100%);}
.hero-inner{display:flex;gap:32px;align-items:center}
.hero-left{flex:1}
.hero-left h1 {font-size: 3em; margin-bottom: 15px; text-shadow: 0 2px 5px rgba(0,0,0,0.3);}
.hero-right{flex:1;display:flex;justify-content:center}
.device-mock img{display: block;max-width: 100%;height: auto;object-fit: cover;border-radius: 16px;border: 1px solid rgba(255,255,255,0.3);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);}
.hero h1{font-size:36px;margin:0 0 10px;text-align: center;}
.lead{color:var(--muted);margin:0 0 16px}
.hero-list{list-style:disc;color:var(--muted)}
.hero-actions{margin-top:18px;display:flex;gap:12px;justify-content:flex-start;margin-inline: 1rem;}

/* ========== SECTIONS ========== */
.section{padding: 26px 0 56px 0;background: #e1e19b;}
.section.alt{background:#a4decf}
.section-title{text-align:center;color:var(--accent);font-size:2rem;}

/* ========== CARDS / GRID ========== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border-radius:16px;padding:18px;transition: transform 0.2s ease;backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);}
.card:hover{transform: translateY(-5px);}
.card h3 {margin-bottom:15px; color:#2ca4b0;}
.card-icon{margin-bottom:15px;}
.card-icon img{display:block;margin:0 auto;width:64px;height:64px;}
.card-title{font-size:1.2rem;font-weight:bold;margin-bottom:10px;text-transform:uppercase;text-align:center;}
.card-text{font-size:0.9rem;color:#555;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tutor-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.small-card{background:#fff;padding:12px;border-radius:10px;box-shadow:0 3px 8px rgba(0,0,0,0.04)}

/* ========== TEAM ========== */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.team-card{text-align:center;background:#fff;max-width: 1200px;padding:14px;border-radius:16px;backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);}
.team-card img{display: inline}
/* ========== REVIEWS ========== */
/* Контейнер-«вьюпорт» скрывает лишнее */
.reviews-viewport {overflow:hidden;position:relative;}
/* Лента отзывов */
.reviews-track {display: flex;gap: 20px;will-change: transform;}
/* Карточка отзыва */ /* фиксированная ширина */
.review-card {flex: 0 0 280px;background: #fff;padding: 20px;border-radius: 12px;box-shadow: 0 6px 20px rgba(20,20,40,0.06);display: flex;flex-direction: column;justify-content: space-between;}
/* Текст отзыва */
.review-text {font-size: 1rem;color: #333;margin-bottom: 20px;line-height: 1.4;}
/* Нижняя часть карточки */
.review-footer {display: flex;justify-content: flex-start;align-items: center;}
/* Блок клиента */
.review-client {display: flex;align-items: center;gap: 12px;}
.review-client img {width: 48px;height: 48px;border-radius: 50%;object-fit: cover;}
.client-name {font-weight: 600;color: var(--accent);}
.client-role {font-size: 0.85rem;color: var(--muted);}
/* Анимация автопрокрутки */
.reviews-track.animate {animation: reviews-scroll var(--reviews-duration, 1s) linear infinite;}
/* половина ширины, т.к. контент продублирован */
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } 
}
/* Пауза при наведении */
.reviews-viewport:hover .reviews-track {animation-play-state: paused;}
/* Уважение настроек пользователя */
@media (prefers-reduced-motion: reduce) {
  .reviews-track.animate {animation: none;}
}
/* ========== FAQ ========== */
.faq details{background:#fff;padding:12px;border-radius:8px;margin-bottom:10px;box-shadow:0 4px 12px rgba(0,0,0,0.03)}
.faq summary{cursor:pointer;font-weight:600}

/* ========== CONTACTS ========== */
.contacts-inner{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.contact-left {background: rgba(42, 122, 141, 0.1);border-radius: 16px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);padding: 10px;height: 400px;}
.contact-right{overflow:hidden;height: 400px;background: rgba(42, 122, 141, 0.1);border-radius: 16px;backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);}
.contacts-grid {display: flex;flex-direction: column;gap: 16px;}
.contact-item {display: flex;align-items: center;gap: 12px;font-size: 16px;}
.contact-item i {background: rgba(42, 122, 141, 0.45);color: #fff;padding: 8px;border-radius: 50%;font-size: 14px;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);border: 1px solid rgba(255, 255, 255, 0.3);box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);}
.contact-item a {color: #05148a;text-decoration: none;}
.contact-item a:hover {text-decoration: underline;}
.contact-booking {width: 100%;}

/* ========== HEADER ========== */
.site-header{background: rgba(202, 202, 143,1);position: fixed;top: 0;left: 0;right: 0;z-index: 1000;transition: background 0.3s ease, backdrop-filter 0.3s ease;box-shadow: 0 2px 6px rgba(0,0,0,0.05);}
.site-header.scrolled {background: rgba(202, 202, 143,0.7);backdrop-filter: blur(8px);}

/* ========== FOOTER ========== */
.site-footer{background:#0b3b3c;color:#fff;padding:28px 0;margin-top:3px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* ========== BOOKING ========== */
.booking-container {display: none;position: fixed;inset: 0;background: rgba(0, 0, 0, .5);justify-content: center;align-items: center;z-index: 1000;overflow: hidden;padding: 1rem;}
.booking-widget {margin-right: 30px;}
.modal-content {position: relative;width: 600px;max-width: 100%;max-height: 90vh;overflow: hidden;background: #fff;border-radius: .75rem;box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.close-btn {position: absolute;right: 1rem;top: 1rem;background: none;border: none;color: #000;font-size: 24px;cursor: pointer;z-index: 1001;}
.open-btn {display:block;padding: 15px 20px;width: 100%;background: var(--accent);color: #fff;border: none;border-radius: .375rem;cursor: pointer;font-size: 1rem;}
.modal-content ::-webkit-scrollbar {display: none;}

/* ========== RESPONSIVE ========== */
@media (max-width:980px){
  .hero-inner{gap:0px;flex-direction:column-reverse}
  .hero-left{padding-block:20px;}
  .grid-2{grid-template-columns:1fr}
  .contacts-inner{grid-template-columns:1fr}
  .contact-left {height: max-content;}
  .main-nav{display:flex;flex-direction:column;align-items:center;gap:12px;max-height:0;overflow:hidden;opacity:0;background:#fff;position:absolute;top:60px;left:0;right:0;padding:0 20px;box-shadow:0 4px 10px rgba(0,0,0,0.1);transition:max-height 0.3s ease, opacity 0.3s ease;}
  .main-nav a{display:block;padding:10px 0;border-bottom:1px solid #eee;}
  .main-nav.active{max-height:500px;opacity:1;padding:20px;}
  .menu-toggle{display:flex;}
  /* Анимация превращения в крестик */
  .menu-toggle.active span:nth-child(1){transform:rotate(45deg) translateY(8px);}
  .menu-toggle.active span:nth-child(2){opacity:0;}
  .menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translateY(-8px);}
}

@media (max-width:640px){
  .logo{width:56px}
  .hero{padding:110px 0 20px 0}
  .hero h1{font-size:24px}
  .section-title{font-size:22px}
  .review-card{min-width:90%}
  .modal-content {width: 92vw;max-width: 95vw;height: 75vh;max-height: 75vh;border-radius: 0.75rem;margin: auto;}
  .close-btn {right: 0.5rem;top: 0.5rem;font-size: 28px;padding: 0.5rem;border-radius: 50%;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;}
}