/* ============================================================
   Ekaterina Rodicheva · Language Coaching · Vienna
   Palette: dark green / milk / olive · Type: Carlito
   ============================================================ */

:root{
  --green:      #44603C;   /* глубокий тёмно-зелёный (панели, футер) */
  --green-ink:  #2C3E27;   /* почти чёрный зелёный для заголовков */
  --cream:      #F5F3EE;   /* молоко */
  --paper:      #FBFAF7;   /* фон страницы */
  --olive:      #6E7B54;   /* оливковый акцент, eyebrow-подписи */
  --sage:       #9CBB8E;   /* светло-зелёный штрих (фирменный дэш) */
  --ink:        #26261F;   /* основной текст */
  --line:       #E4E0D5;   /* тонкие линии */
  --panel-green: rgba(52,72,46,.52);
  --panel-cream: rgba(245,243,238,.72);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:19px;
  line-height:1.6;
}

img{max-width:100%;display:block}
a{color:var(--olive)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sage);outline-offset:2px}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- типографика ---------- */
h1,h2,h3{font-weight:600;color:var(--green-ink);line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(34px,5vw,56px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:clamp(20px,2.2vw,24px)}

.eyebrow{
  display:inline-block;
  font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive);margin-bottom:14px;
}
.dash{display:block;width:56px;height:5px;background:var(--sage);margin-bottom:18px}
.lead{font-size:clamp(20px,2.2vw,23px);color:#3A3A31}
.muted{color:#6A6A5E}

/* ---------- шапка ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,247,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;max-width:1320px;gap:24px}
.brand{font-weight:700;color:var(--green-ink);text-decoration:none;letter-spacing:.02em;font-size:17px;white-space:nowrap;flex-shrink:0}
.brand span{color:var(--olive);font-weight:400}
.nav{display:flex;gap:16px;align-items:center}
.nav a{color:var(--green-ink);text-decoration:none;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.nav a:hover{color:var(--olive)}
.nav a[aria-current="page"]{border-bottom:3px solid var(--sage);padding-bottom:2px}
.nav-toggle{display:none;background:none;border:1.5px solid var(--green-ink);border-radius:6px;padding:8px 12px;font:inherit;color:var(--green-ink);cursor:pointer}

/* ---------- кнопки ---------- */
.btn{
  display:inline-block;background:var(--green);color:#F5F3EE;
  text-decoration:none;font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.09em;
  padding:16px 30px;border-radius:5px;border:2px solid var(--green);
  transition:background .15s ease;white-space:nowrap;
}
.btn:hover{background:#527247;border-color:#527247}
.nav a.btn,.nav a.btn:hover{color:#F5F3EE}
.btn.ghost{background:transparent;color:var(--green-ink)}
.btn.ghost:hover{background:var(--cream)}
.btn.light{background:var(--cream);color:var(--green-ink);border-color:var(--cream)}
.btn.light:hover{background:#fff}

/* ---------- hero (фирменная «панель-слайд») ---------- */
.hero{background:var(--cream);border-bottom:1px solid var(--line)}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  align-items:center;padding-top:64px;padding-bottom:64px;
}
.hero-text p{margin-top:18px}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

.figure{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 18px 44px rgba(30,45,30,.16)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure .panel{
  position:absolute;left:0;right:0;bottom:0;
  padding:20px 26px;color:var(--cream);
  background:var(--panel-green);backdrop-filter:blur(2px);
}
.figure .panel .dash{width:44px;height:4px;margin-bottom:10px}
.figure .panel strong{display:block;font-size:19px}
.figure .panel em{font-style:normal;font-size:16px;opacity:.9}

/* ---------- секции ---------- */
.section{padding:72px 0}
.section.tinted{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:40px}
.section-head p{margin-top:12px}

/* карточки направлений */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(30,45,30,.12)}
.card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.card .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .body h3{margin-bottom:2px}
.card .who{font-size:16px;color:var(--olive);font-weight:700}
.card .more{margin-top:auto;padding-top:12px;font-weight:700;color:var(--green-ink);text-decoration:none}
.card .more:hover{color:var(--olive)}

/* контентная колонка на страницах направлений */
.page-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.page-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:56px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}

/* модули / прайс-карты */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.tier{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 30px 34px}
.tier.dark{background:var(--green);color:var(--cream);border-color:var(--green)}
.tier.dark h3{color:var(--cream)}
.tier .price{font-size:34px;font-weight:700;color:var(--green-ink);margin:10px 0 4px}
.tier.dark .price{color:var(--cream)}
.tier .per{font-size:16px;color:#6A6A5E}
.tier.dark .per{color:rgba(245,243,238,.75)}
.tier ul{list-style:none;margin-top:16px}
.tier li{padding:9px 0 9px 28px;position:relative;border-top:1px solid var(--line);font-size:17.5px}
.tier.dark li{border-top-color:rgba(245,243,238,.18)}
.tier li::before{content:"";position:absolute;left:0;top:16px;width:14px;height:4px;background:var(--sage)}

/* таблицы цен */
.pricetable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pricetable caption{caption-side:top;text-align:left;font-weight:700;font-size:20px;color:var(--green-ink);padding:0 0 12px}
.pricetable th,.pricetable td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:17.5px}
.pricetable thead th{background:var(--green);color:var(--cream);font-size:16px;letter-spacing:.04em}
.pricetable tbody tr:last-child td{border-bottom:none}
.pricetable .num{font-weight:700;white-space:nowrap}

/* отзыв */
.quote{
  background:#fff;border:1px solid var(--line);border-left:6px solid var(--sage);
  border-radius:10px;padding:30px 34px;max-width:840px;
}
.quote p{margin-bottom:14px}
.quote p:last-of-type{margin-bottom:0}
.quote footer{margin-top:16px;font-weight:700;color:var(--olive)}
.quote.short{font-size:18px}

/* магнит / гайд */
.magnet{
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:var(--green);color:var(--cream);border-radius:10px;padding:30px 34px;
}
.magnet .dash{margin-bottom:10px}
.magnet h3{color:var(--cream)}
.magnet p{opacity:.92;font-size:17.5px;margin-top:6px}
.magnet .tag{font-size:15px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* FAQ / детали */
details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 22px;margin-bottom:12px}
details summary{font-weight:700;cursor:pointer;color:var(--green-ink);font-size:18px}
details[open]{border-left:5px solid var(--sage)}
details p{margin-top:10px}

/* CTA-полоса */
.cta-band{background:var(--green);color:var(--cream)}
.cta-band .wrap{padding:64px 24px;display:grid;grid-template-columns:1.2fr auto;gap:32px;align-items:center}
.cta-band h2{color:var(--cream)}
.cta-band p{margin-top:10px;opacity:.92}
.cta-band .note{font-size:16px;opacity:.75;margin-top:8px}

/* ---------- футер ---------- */
.site-footer{background:#38502F;color:rgba(245,243,238,.85);padding:44px 0}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.site-footer a{color:var(--cream);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .small{font-size:15px;opacity:.7}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}

/* списки-фичи */
.checks{list-style:none;margin-top:14px}
.checks li{padding:10px 0 10px 32px;position:relative;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:none}
.checks li::before{content:"";position:absolute;left:0;top:20px;width:16px;height:5px;background:var(--sage)}

.note-box{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:18px 22px;font-size:17px}

/* ---------- адаптив ---------- */
@media (max-width:920px){
  .hero .wrap,.page-hero .wrap,.split{grid-template-columns:1fr;gap:36px}
  .grid-2,.tiers{grid-template-columns:1fr}
  .cta-band .wrap{grid-template-columns:1fr}
  .magnet{grid-template-columns:1fr}
  .figure{max-width:520px}
}
@media (max-width:1279px){
  .nav{
    position:absolute;top:72px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;
    padding:18px 24px;gap:16px;display:none;
  }
  .nav.open{display:flex}
  .nav-toggle{display:block}
}
@media (max-width:560px){
  body{font-size:18px}
  .pricetable th,.pricetable td{padding:11px 12px;font-size:16px}
}