:root{
  --bg:#0a0a0a; --surface:#111111;
  --text:#ECE9E2; --muted:#B9B3A7;
  --gold:#C6A664; --gold-ink:#9E844C;
  --stroke:rgba(255,255,255,.08);
  /* увеличенный логотип */
  --header-h:116px;
  /* центр лого по умолчанию (ПК/планшет) */
  --logo-nudge-x: 0px;
  --logo-nudge-y: 0px;
}

*{box-sizing:border-box}
html{
  height:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  height:100%;
  margin: 0;
  scroll-behavior: smooth;
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
  
}

#home,
#services,
#approach,
#education,
#contacts {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Кастомный скроллбар */
::-webkit-scrollbar{
  width:12px;
}

::-webkit-scrollbar-track{
  background:var(--bg);
  border-left:1px solid rgba(198,166,100,.1);
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-ink) 100%);
  border-radius:6px;
  border:2px solid var(--bg);
  transition:background .3s ease;
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #D4B876 0%, #B39A5E 100%);
}

/* Для Firefox */
*{
  scrollbar-width:thin;
  scrollbar-color:var(--gold) var(--bg);
}

/* Глобальный фон с искрами */
.global-sparks{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.35;
  z-index:0;
}

/* ---------- header ---------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:12px;
  min-height:var(--header-h);
  z-index:40;
  display:grid;
  /* было: grid-template-columns:auto 1fr auto auto; */
  grid-template-columns: 1fr auto 1fr;   /* центр гарантирован */
  align-items:center; gap:24px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(10,10,10,.35);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease, box-shadow .35s ease, transform .2s ease;
  will-change:transform; backface-visibility:hidden;
}

.site-header.is-scrolled{
  background:#0c0c0c;
  border-bottom:1px solid rgba(198,166,100,.22);
  box-shadow:0 4px 30px rgba(0,0,0,.35);
}

/* Brand */
.brand{justify-self:start; display:flex; align-items:center; gap:18px; text-decoration:none; color:var(--text) }
.logo-wrap{
  width:clamp(72px, 9vw, 88px);
  height:clamp(72px, 9vw, 88px);
  border-radius:16px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  display:grid; place-items:center; overflow:hidden;
}
.logo-img{
  width:90%; height:90%; display:block;
  object-fit:contain; object-position:center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  transform: translate3d(var(--logo-nudge-x), var(--logo-nudge-y), 0);
}

.brand__text{
  display:flex; flex-direction:column; line-height:1;
  border-left:1px solid var(--gold-ink); padding-left:16px;
  will-change:transform, opacity;
}
.brand__name{
  font-family:"Cormorant Garamond","Noto Serif",Georgia,serif;
  font-weight:600;
  font-size:clamp(18px,2.2vw,22px); letter-spacing:.2px;
}
.brand__name-line2{
  display:block;
}
.brand__role{
  font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:#C6A664;
  margin-top:4px;
}

/* символы после сплита */
.char{ display:inline-block; will-change:transform, opacity; backface-visibility:hidden; }

/* Nav */
.nav{ grid-column:2; justify-self:center; }
.nav__list{display:flex; gap:28px; list-style:none; padding:0; margin:0}
.nav__list a{
  position:relative; text-decoration:none; color:var(--text);
  font-size:13px; text-transform:uppercase; letter-spacing:.16em;
  padding:10px 0; display:inline-block; opacity:.92;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:1px;
  background:linear-gradient(90deg,transparent, var(--gold), transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .3s ease;
}
.nav__list a:hover::after{transform:scaleX(1)}

/* CTA */
.header-cta{grid-column:3; justify-self:end; display:flex; align-items:center; gap:56px; padding-right:40px}
.phone{ text-decoration:none; color:var(--text); font-feature-settings:"tnum"; opacity:.9 }
.phone:hover{opacity:1}

.btn{
  appearance:none; border:0; cursor:pointer; padding:12px 20px; border-radius:14px;
  font-weight:600; font-size:15px; line-height:1;
  transition:transform .05s ease, box-shadow .25s ease, background .3s ease, color .3s ease;
}
.btn:active{transform:translateY(1px)}
.btn--gold{
  color:#181818; background:linear-gradient(180deg, var(--gold), var(--gold-ink));
  box-shadow:0 6px 18px rgba(198,166,100,.35), inset 0 1px 0 rgba(255,255,255,.25);
  position:relative;
  animation:pulse 2.5s ease-in-out infinite;
}
.btn--gold:hover{
  box-shadow:0 8px 24px rgba(198,166,100,.45), inset 0 1px 0 rgba(255,255,255,.3);
  animation:none;
}

/* Пульсирующая анимация для кнопки */
@keyframes pulse{
  0%, 100%{
    box-shadow:0 6px 18px rgba(198,166,100,.35), inset 0 1px 0 rgba(255,255,255,.25);
    transform:scale(1);
  }
  50%{
    box-shadow:0 8px 28px rgba(198,166,100,.6), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 8px rgba(198,166,100,.15);
    transform:scale(1.03);
  }
}
.btn--ghost{ color:var(--text); background:transparent; border:1px solid var(--stroke) }
.btn--ghost:hover{border-color:rgba(255,255,255,.18)}

/* Burger (mobile) */
.burger{
  display:none; width:46px; height:42px; border-radius:12px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.02); position:relative; z-index:41; /* поверх */
}
.burger__bar{
  position:absolute; left:10px; right:10px; height:1.5px; background:#ddd;
  transform-origin:center; transition:transform .25s ease, opacity .2s ease;
}
.burger__bar:nth-child(1){top:13px}
.burger__bar:nth-child(2){top:20px}
.burger__bar:nth-child(3){top:27px}
.site-header.is-open .burger__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.is-open .burger__bar:nth-child(2){opacity:0}
.site-header.is-open .burger__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  position:fixed; top:var(--header-h); left:0; right:0; z-index:30;
  background:#0c0c0c; border-top:1px solid var(--stroke);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:18px clamp(16px,5vw,40px) 26px;
  animation:menuIn .18s ease;
}
@keyframes menuIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)}}
.mobile-menu ul{list-style:none; padding:0; margin:0}
.mobile-menu li{border-bottom:1px solid var(--stroke)}
.mobile-menu a{ display:block; padding:16px 0; text-decoration:none; color:var(--text); font-size:16px; letter-spacing:.06em }
.mobile-cta{display:flex; align-items:center; gap:14px; margin-top:14px}

/* Адрес в мобильном меню */
.mobile-address{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--stroke);
}
.mobile-address__title{
  margin:0 0 16px;
  font-family:"Cormorant Garamond","Noto Serif",Georgia,serif;
  font-size:18px;
  font-weight:600;
  color:#C6A664;
  letter-spacing:.05em;
}
.mobile-address__item{
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(198,166,100,.2);
}
.mobile-address__item p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  opacity:.9;
}

/* ---------- hero (фон + сетка) ---------- */
.hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:calc(var(--header-h) + 24px) 24px 24px;
  background:
    linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.86)),
    url("img/hero.webp") center/cover no-repeat;
  position:relative;
}
/* Канвас с искрами под контентом, над фоном */
.hero-sparks{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;     /* золотой свет красиво «ложится» */
  opacity:.55;               /* можно подрегулировать (0.35–0.7) */
  z-index:0;
}
.hero__grid{
  width:100%; max-width:1200px;
  display:grid; grid-template-columns:384px 1fr;  /* фикс ширина = чёткие пиксели */
  gap:40px; align-items:center;
  position:relative; z-index:1;
}
.hero__content{ text-align:left; }
.hero__content h1{
  font-family:"Cormorant Garamond","Noto Serif",Georgia,serif; font-weight:600;
  font-size:clamp(36px,6.4vw,64px); line-height:1.07; margin:0 0 16px;
}
.hero__content p{ color:var(--muted); margin:0 0 26px }

/* портрет в рамке */
.portrait-card{ margin:0; position:relative; z-index:2; }
.portrait-frame{
  position:relative; width:384px;   /* совпадает с колонкой */
  border-radius:24px; padding:3px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, rgba(198,166,100,.95), rgba(158,132,76,.75)) border-box;
  border:1px solid transparent;
  box-shadow:0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  backface-visibility:hidden;
  will-change:clip-path;
  isolation:isolate;
}
.portrait-img{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
  border-radius:22px;
  image-rendering:auto; /* ок */
}




/* ======= SERVICES + CERT COLLAGE ======= */
.section{ padding:72px 0; position:relative; z-index:1; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

/* CTA в секциях */
.section-cta{
  margin-top:32px;
  display:flex;
  justify-content:center;
}

.section-cta .btn{
  min-width:240px;
}

.section--services-extended{ position:relative; }
.services-grid{
  display:grid;
  grid-template-columns:minmax(320px, 0.9fr) 1.1fr;
  gap:38px;
  align-items:stretch;  /* изменено с start на stretch для равной высоты */
}

/* левая колонка */
.section-kicker{
  margin:0 0 10px; color:var(--muted);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.9;
}
.section-title{
  margin:0 0 16px;
  font-family:"Cormorant Garamond","Noto Serif",Georgia,serif;
  font-size:clamp(28px,3.8vw,40px); font-weight:600;
}
.services-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
}
.services-list li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:14px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, rgba(198,166,100,.85), rgba(158,132,76,.55)) border-box;
  border:1px solid transparent;
  box-shadow:0 14px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  line-height:1.35; font-size:15px;
}
.service-dot{
  width:10px; height:10px; margin-top:6px; flex:0 0 auto; border-radius:999px;
  background: radial-gradient(circle at 40% 40%, #E9D6A7 0%, #C6A664 45%, #9E844C 70%, rgba(198,166,100,0) 72%);
  filter: drop-shadow(0 0 8px rgba(198,166,100,.55));
}

/* --- Баннер сертификатов --- */
.cert-collage{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;  /* займёт всю высоту левого блока */
  min-height:600px;
}

/* Стеклянный контейнер с горизонтальной прокруткой */
.cert-stack{
  list-style:none;
  margin:0;
  padding:20px;
  flex:1;
  display:grid;
  grid-template-rows:repeat(4, 1fr);  /* 4 ряда по вертикали */
  grid-auto-flow:column;              /* заполняем по колонкам */
  grid-auto-columns:calc(50% - 8px);  /* 2 колонки по 50% */
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;

  /* Стеклянный эффект */
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(198,166,100,.25), rgba(158,132,76,.15)) border-box;
  border:1px solid transparent;
  border-radius:20px;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 80px rgba(198,166,100,.03);

  /* Стильный скроллбар */
  scrollbar-width:thin;
  scrollbar-color:rgba(198,166,100,.5) rgba(255,255,255,.05);
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

.cert-stack::-webkit-scrollbar{ height:8px; }
.cert-stack::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:10px;
  margin:0 20px;
}
.cert-stack::-webkit-scrollbar-thumb{
  background:rgba(198,166,100,.5);
  border-radius:10px;
  transition:background .3s ease;
}
.cert-stack::-webkit-scrollbar-thumb:hover{
  background:rgba(198,166,100,.75);
}

.cert{
  position:relative;
  aspect-ratio:4/3;
  min-width:0;  /* для корректной работы grid */
}

.cert-frame{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:4px;
  border-radius:12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(198,166,100,.85), rgba(158,132,76,.65)) border-box;
  border:1px solid transparent;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s ease;
  overflow:hidden;
}

.cert-frame:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
}

.cert img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  image-rendering:-webkit-optimize-contrast;
}

/* адаптив */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns:1fr; gap:32px; }
  .cert-collage{ min-height:400px; }
  .cert-stack{
    gap:12px;
    padding:16px;
    grid-template-rows:repeat(3, 1fr);     /* 3 ряда на планшете */
    grid-auto-columns:calc(50% - 6px);     /* 2 колонки */
  }
}
@media (max-width: 480px){
  .cert-stack{
    gap:10px;
    padding:12px;
    grid-template-rows:repeat(2, 1fr);     /* 2 ряда на мобилке */
    grid-auto-columns:calc(50% - 5px);     /* 2 колонки */
  }
  .cert-stack::-webkit-scrollbar{ height:6px; }
}
/* --- Заголовок над коллажем --- */
.cert-head{ margin-bottom:20px; }
.cert-kicker{
  display:inline-block; padding:6px 10px; border-radius:10px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:#E9D6A7; background:rgba(255,255,255,.04);
  border:1px solid rgba(198,166,100,.35);
}
/* --- Лайтбокс --- */
.lightbox{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; }
.lightbox[hidden]{ display:none; }
.lightbox__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(2px);
}
.lightbox__stage{
  position:relative; width:min(92vw, 1100px);
  display:grid; place-items:center; gap:10px;
}
.lightbox__frame{
  width:100%; border-radius:18px; padding:6px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, rgba(198,166,100,.95), rgba(158,132,76,.75)) border-box;
  border:1px solid transparent;
  box-shadow:0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.lightbox__img{
  display:block; width:100%; height:auto; border-radius:12px;
  image-rendering:auto; /* четко без «мыла» */
}
.lightbox__counter{
  position:absolute; bottom:-26px; right:6px; font-size:12px; color:var(--muted);
}

/* кнопки */
.lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.06);
  color:var(--text); font-size:28px; line-height:1; display:grid; place-items:center;
  cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .1s ease;
  user-select:none;
}
.lightbox__btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18) }
.lightbox__btn:active{ transform:translateY(-50%) scale(.98) }
.lightbox__prev{ left:-54px; }
.lightbox__next{ right:-54px; }
.lightbox__close{
  top:-54px; right:0; transform:none; font-size:26px; width:38px; height:38px;
}

/* мобилка */
@media (max-width: 768px){
  .lightbox__prev{ left:6px; } .lightbox__next{ right:6px; }
  .lightbox__close{ top:6px; right:6px; }
  .lightbox__counter{ bottom:-22px; right:0; }
}
/* ===== GOLD STRIP (textured, no animations) ===== */
.gold-strip{
  position:relative; isolation:isolate;
  padding:26px 0;           /* высота ленты — под себя */
  overflow:visible;  /* изменено с hidden на visible чтобы не обрезать на мобилке */
}
.gold-strip::before{
  /* золотая текстура */
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 100% at 10% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 45%),
    radial-gradient(160% 120% at 85% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 50%),
    radial-gradient(140% 120% at 15% 80%, rgba(0,0,0,.07), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,.02) 2px 4px),
    linear-gradient(180deg, #C8AB6A 0%, #B59659 45%, #A78953 70%, #9E844C 100%);
  background-blend-mode:soft-light, soft-light, multiply, overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25);
}

/* контейнер поверх золота */
.gold-strip__glass{
  position:relative; z-index:2;
  border-radius:16px; padding:10px;
}

/* сетка метрик */
.gold-strip__inner{
  display:grid; grid-template-columns:repeat(4,1fr); align-items:center;
  gap:28px;
}
.metric{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px;
  color:#fff;
}
.metric + .metric{ border-left:1px solid rgba(255,255,255,.28); padding-left:28px; }
.metric__num{
  font-family:"Cormorant Garamond","Noto Serif",Georgia,serif;
  font-weight:600; line-height:1;
  font-size:clamp(28px,4vw,40px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.metric__text{
  font-size:14px; line-height:1.2; opacity:.95;
}

/* адаптив */
@media (max-width:1024px){
  .gold-strip{ padding:20px 0; }
  .gold-strip__glass{
    border-radius:14px;
    padding:12px;
    margin:0 16px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gold-strip__glass::-webkit-scrollbar{ display:none; }

  .gold-strip__inner{
    grid-template-columns:repeat(4, minmax(140px, 1fr));
    gap:16px;
    width:max-content;
    min-width:100%;
  }
  .metric{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    text-align:center;
    gap:6px;
  }
  .metric + .metric{
    border-left:1px solid rgba(255,255,255,.28);
    padding-left:16px;
  }
  .metric__num{ font-size:clamp(32px,5vw,40px); }
  .metric__text{ font-size:12px; line-height:1.3; }
}

@media (max-width:600px){
  .gold-strip{ padding:16px 0; }
  .gold-strip__glass{
    margin:0 12px;
    padding:10px;
  }
  .gold-strip__glass.auto-scroll .gold-strip__inner{
    animation:goldStripScroll 12s linear infinite;
  }
  .gold-strip__inner{
    grid-template-columns:repeat(4, minmax(120px, 160px));
    gap:12px;
  }
  .metric + .metric{
    border-left:1px solid rgba(255,255,255,.28);
    padding-left:12px;
  }
  .metric__num{ font-size:28px; }
  .metric__text{ font-size:11px; }
}

@keyframes goldStripScroll{
  0%   { transform:translateX(0); }
  25%  { transform:translateX(0); }
  50%  { transform:translateX(-35%); }
  75%  { transform:translateX(-35%); }
  100% { transform:translateX(0); }
}



/* ---------- АДАПТИВ ---------- */
/* <=1024px: включаем бургер, прячем десктоп-навигацию и сужаем сетку hero */
@media (max-width: 1024px){
  .nav, .header-cta{ display:none; }
  .burger{ display:block; justify-self:end; }
  .site-header{ grid-template-columns:auto 1fr auto; right:12px; }

  .hero__grid{ grid-template-columns:1fr; gap:24px; max-width:760px; }
  .portrait-frame{ width:100%; max-width:384px; margin:0 auto; }
  .hero{ padding:calc(var(--header-h) + 24px) 24px 24px; }
}

/* <=480px: компактная шапка и логотип, сдвиг лого для визуального центра */
@media (max-width: 480px){
  :root{ --header-h:96px; }
  .site-header{ --logo-nudge-x:0; --logo-nudge-y:0; right:12px; }

  .logo-wrap{ width:64px; height:64px; border-radius:12px; }
  .brand__text{ padding-left:12px; }
  .brand__name{ font-size:14px; line-height:1.2; }
  .brand__role{ font-size:10px; margin-top:3px; }
}

/* ===== APPROACH SECTION ===== */
.section--approach{
  position:relative;
}

.approach-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:start;
}

/* Левая колонка: фото + места работы */
.approach-collage{
  display:flex;
  flex-direction:column;
  gap:20px;
  position:sticky;
  top:calc(var(--header-h) + 24px);
}

.approach-photo--main{
  position:relative;
  aspect-ratio:3/5;
  border-radius:16px;
  padding:4px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(198,166,100,.85), rgba(158,132,76,.65)) border-box;
  border:1px solid transparent;
  box-shadow:0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  transition:transform .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s ease;
}

.approach-photo--main:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 18px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}

.approach-photo--main img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  image-rendering:auto;
  transition:opacity 0.8s ease-in-out;
}

.approach-photo--main img.fading{
  opacity:0;
}

/* Места работы */
.approach-locations{
  padding:20px;
  border-radius:16px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(198,166,100,.25), rgba(158,132,76,.15)) border-box;
  border:1px solid transparent;
  box-shadow:0 12px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}

.approach-locations__title{
  margin:0 0 16px;
  font-family:"Cormorant Garamond","Noto Serif",Georgia,serif;
  font-size:20px;
  font-weight:600;
  color:var(--gold);
  letter-spacing:.05em;
}

.approach-locations__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.approach-locations__list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(198,166,100,.15);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.approach-locations__list li:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.04);
  border-color:rgba(198,166,100,.3);
}

.location-marker{
  width:8px;
  height:8px;
  margin-top:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #E9D6A7 0%, #C6A664 45%, #9E844C 70%, rgba(198,166,100,0) 72%);
  filter:drop-shadow(0 0 8px rgba(198,166,100,.55));
}

.location-text{
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  opacity:.9;
}

/* Правая колонка: текст */
.approach-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.approach-intro{
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}

.approach-subtitle{
  margin:8px 0 0;
  font-family:"Cormorant Garamond","Noto Serif",Georgia,serif;
  font-size:clamp(20px,2.8vw,28px);
  font-weight:600;
  color:var(--text);
}

.approach-principles,
.approach-process{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.approach-principles li,
.approach-process li{
  padding:14px 16px;
  border-radius:12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(198,166,100,.25), rgba(158,132,76,.15)) border-box;
  border:1px solid transparent;
  box-shadow:0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  line-height:1.5;
  font-size:15px;
  color:var(--text);
  transition:transform .2s ease, box-shadow .2s ease;
}

.approach-principles li:hover,
.approach-process li:hover{
  transform:translateX(4px);
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

.approach-principles strong,
.approach-process strong{
  color:var(--gold);
  font-weight:600;
}

.approach-process{
  counter-reset:process;
}

.approach-process li{
  counter-increment:process;
  position:relative;
  padding-left:48px;
}

.approach-process li::before{
  content:counter(process);
  position:absolute;
  left:16px;
  top:14px;
  width:24px;
  height:24px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--gold), var(--gold-ink));
  color:#181818;
  font-weight:700;
  font-size:12px;
  display:grid;
  place-items:center;
  box-shadow:0 4px 12px rgba(198,166,100,.35);
}

.approach-footer{
  margin:8px 0 0;
  padding:16px 18px;
  border-radius:14px;
  background:rgba(198,166,100,.08);
  border:1px solid rgba(198,166,100,.25);
  font-size:15px;
  line-height:1.5;
  color:var(--text);
  font-style:italic;
  text-align:center;
}

/* Адаптив */
@media (max-width: 1024px){
  .approach-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .approach-collage{
    position:relative;
    top:0;
    max-width:600px;
    margin:0 auto;
  }
}

@media (max-width: 640px){
  .approach-collage{
    gap:16px;
  }
}

/* ============================
   WAVE DIVIDERS
============================ */
.wave-divider{
  position:relative;
  width:100vw;
  max-width:100vw;
  left:50%;
  transform:translateX(-50%);
  overflow:visible;
  margin-top:60px;
  margin-bottom:60px;
  opacity:0.8;
}

.wave-divider svg{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}

.wave-divider--1 svg{
  height:60px;
}

.wave-divider--2 svg{
  height:80px;
}

.wave-divider--3 svg{
  height:100px;
}

@media (max-width: 768px){
  .wave-divider{
    margin:40px 0;
    opacity:0.6;
  }

  .wave-divider--1 svg{
    height:40px;
  }

  .wave-divider--2 svg{
    height:50px;
  }

  .wave-divider--3 svg{
    height:60px;
  }
}

/* ============================
   EDUCATION SECTION
============================ */
.section--education{
  position:relative;
  padding:100px 0;
}

.education-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
  margin-top:48px;
}

.education-content{
  position:relative;
}

/* Timeline */
.education-timeline{
  position:relative;
  padding-left:40px;
  margin-bottom:56px;
}

.education-timeline::before{
  content:'';
  position:absolute;
  left:8px;
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg, var(--gold) 0%, rgba(198,166,100,.2) 100%);
}

.timeline-item{
  position:relative;
  margin-bottom:32px;
}

.timeline-item:last-child{
  margin-bottom:0;
}

.timeline-marker{
  position:absolute;
  left:-36px;
  top:6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(198,166,100,.2), 0 4px 12px rgba(198,166,100,.3);
}

.timeline-year{
  font-family:var(--font-serif);
  font-size:14px;
  font-weight:600;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:8px;
}

.timeline-content h3{
  font-size:18px;
  font-weight:600;
  color:var(--text);
  margin:0 0 6px;
  line-height:1.4;
}

.timeline-content p{
  font-size:14px;
  line-height:1.6;
  color:var(--text-dim);
  margin:0;
}

/* Stats Cards */
.education-stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

.stat-card{
  position:relative;
  padding:24px 20px;
  border-radius:14px;
  background:rgba(198,166,100,.06);
  border:1px solid rgba(198,166,100,.2);
  text-align:center;
  transition:all 0.3s ease;
}

.stat-card:hover{
  background:rgba(198,166,100,.1);
  border-color:rgba(198,166,100,.35);
  transform:translateY(-2px);
}

.stat-number{
  font-family:var(--font-serif);
  font-size:36px;
  font-weight:700;
  color:var(--gold);
  line-height:1;
  margin-bottom:8px;
}

.stat-label{
  font-size:13px;
  font-weight:500;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

/* Правая колонка - книги */
.education-books{
  position:sticky;
  top:120px;
}

.books-showcase{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  margin-bottom:20px;
}

.book-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

.book-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 40px rgba(198,166,100,.25), 0 0 0 2px rgba(198,166,100,.3);
}

.book-cover{
  position:relative;
}

.book-cover::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 100%);
  opacity:0;
  transition:opacity 0.4s ease;
}

.book-card:hover .book-cover::after{
  opacity:1;
}

.book-cover img{
  display:block;
  width:100%;
  height:auto;
  transition:transform 0.4s ease;
}

.book-card:hover .book-cover img{
  transform:scale(1.05);
}

.books-caption{
  font-size:14px;
  line-height:1.6;
  color:var(--text-dim);
  text-align:center;
  margin:0;
  font-style:italic;
}

/* Адаптив для Education */
@media (max-width: 1024px){
  .education-grid{
    grid-template-columns:1fr;
    gap:60px;
  }

  .education-books{
    position:relative;
    top:0;
    max-width:500px;
    margin:0 auto;
  }
}

@media (max-width: 768px){
  .education-stats{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }

  .stat-card{
    padding:20px 16px;
  }

  .stat-number{
    font-size:30px;
  }

  .stat-label{
    font-size:12px;
  }
}

@media (max-width: 640px){
  .section--education{
    padding:60px 0;
  }

  .education-grid{
    gap:48px;
    margin-top:32px;
  }

  .education-timeline{
    padding-left:32px;
    margin-bottom:40px;
  }

  .timeline-marker{
    left:-30px;
  }

  .timeline-content h3{
    font-size:16px;
  }

  .timeline-content p{
    font-size:13px;
  }

  .education-stats{
    gap:10px;
  }

  .stat-card{
    padding:18px 12px;
  }

  .stat-number{
    font-size:26px;
  }

  .books-showcase{
    grid-template-columns:1fr;
    gap:16px;
  }
}



  .approach-locations{
    padding:16px;
  }

  .approach-locations__title{
    font-size:18px;
    margin-bottom:12px;
  }

  .approach-locations__list{
    gap:10px;
  }

  .approach-locations__list li{
    padding:8px 10px;
  }

  .location-text{
    font-size:13px;
  }

  .approach-content{
    gap:20px;
  }

  .approach-principles li,
  .approach-process li{
    padding:12px 14px;
    font-size:14px;
  }

  .approach-process li{
    padding-left:44px;
  }

  .approach-process li::before{
    left:14px;
    top:12px;
    width:22px;
    height:22px;
    font-size:11px;
  }


/* ============================
   CONTACTS SECTION
============================ */
.section--contacts{
  position:relative;
  padding:100px 0;
  background:var(--bg);
}

.contacts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:48px;
}

.contacts-map{
  position:relative;
  width:100%;
  height:550px;
  padding:8px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(198,166,100,.15) 0%, rgba(198,166,100,.05) 100%);
  border:2px solid var(--gold);
  box-shadow:0 8px 32px rgba(198,166,100,.3), 0 0 0 1px rgba(198,166,100,.2);
}

.contacts-map iframe,
.contacts-map ymaps{
  width:100%;
  height:100%;
  border:none;
  border-radius:10px;
}

.contacts-info{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-block{
  padding:18px 20px;
  background:rgba(198,166,100,.05);
  border:1px solid rgba(198,166,100,.15);
  border-radius:12px;
  transition:all .3s ease;
}

.contact-block:hover{
  background:rgba(198,166,100,.08);
  border-color:rgba(198,166,100,.25);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(198,166,100,.15);
}

.contact-title{
  font-family:var(--font-serif);
  font-size:18px;
  font-weight:600;
  color:var(--gold);
  margin:0 0 10px 0;
}

.contact-text{
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  margin:0;
}

.contact-text + .contact-text{
  margin-top:6px;
}

.contact-link{
  color:var(--gold);
  text-decoration:none;
  transition:color .3s ease;
  font-weight:500;
  font-size:15px;
}

.contact-link:hover{
  color:#D4B876;
  text-decoration:underline;
}

.contacts-cta{
  margin-top:12px;
  padding-top:12px;
}

.btn--large{
  width:100%;
  padding:16px 32px;
  font-size:16px;
  font-weight:600;
}

@media (max-width: 1024px){
  .contacts-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .contacts-map{
    height:400px;
  }
}

@media (max-width: 640px){
  .section--contacts{
    padding:60px 0;
  }

  .contacts-map{
    height:300px;
  }

  .contacts-info{
    gap:20px;
  }

  .contact-block{
    padding:18px;
  }

  .contact-title{
    font-size:18px;
  }

  .contact-text{
    font-size:14px;
  }
}

/* ============================
   FOOTER
============================ */
site-footer{
  background:
    radial-gradient(circle at top left, rgba(198,166,100,.12) 0, transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
  border-top:1px solid rgba(198,166,100,.22);
  padding:56px 0 28px;
  position:relative;
}

.footer-content{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  column-gap:56px;
  row-gap:32px;
  margin-bottom:32px;
  align-items:flex-start;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:320px;
}

.footer-logo{
  width:76px;
  height:76px;
  border-radius:16px;
  border:1px solid rgba(198,166,100,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  display:grid;
  place-items:center;
  overflow:hidden;
}

.footer-logo img{
  width:90%;
  height:90%;
  object-fit:contain;
}

.footer-tagline{
  font-family:var(--font-serif);
  font-size:18px;
  font-weight:600;
  color:var(--gold);
  margin:0;
}

.footer-description{
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}

.footer-title{
  font-family:var(--font-serif);
  font-size:16px;
  font-weight:600;
  color:var(--gold);
  margin:0 0 16px 0;
}

.footer-text{
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  margin:0 0 12px 0;
}

.footer-link{
  color:var(--gold);
  text-decoration:none;
  transition:color .3s ease;
  font-weight:500;
  display:block;
  margin-bottom:8px;
}

.footer-link:hover{
  color:#D4B876;
  text-decoration:underline;
}

.footer-policy{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  background:rgba(198,166,100,.08);
  border:1px solid rgba(198,166,100,.2);
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  transition:all .3s ease;
  margin-bottom:12px;
}

.social-link:hover{
  background:rgba(198,166,100,.15);
  border-color:rgba(198,166,100,.35);
  transform:translateY(-2px);
}

.social-icon{
  width:24px;
  height:24px;
  object-fit:contain;
}

.footer-bottom{
  width:100%;
  margin-top:32px;
  padding:16px 24px 0;
  border-top:1px solid rgba(198,166,100,.15);
  text-align:center;
}
.footer-copy{
  font-size:13px;
  color:var(--muted);
  margin:0;
}


/* Плавающая кнопка "наверх" */
/* Плавающая кнопка "наверх" */
.scroll-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(198,166,100,.65);
  background:
    radial-gradient(circle at 30% 0, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, var(--gold), var(--gold-ink));
  box-shadow:0 10px 28px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:60;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);

  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    background .3s ease,
    visibility .25s;
}

.scroll-top__icon{
  font-size:20px;
  line-height:1;
  color:#181818;
}

.scroll-top:hover{
  box-shadow:0 14px 36px rgba(0,0,0,.8), 0 0 0 1px rgba(198,166,100,.85);
}

/* класс, который включает видимость кнопки */
.scroll-top--visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Чуть компактнее на мобилке */
@media (max-width: 640px){
  .scroll-top{
    right:16px;
    bottom:16px;
    width:44px;
    height:44px;
  }
}


/* Чуть компактнее на мобилке */
@media (max-width: 640px){
  .scroll-top{
    right:16px;
    bottom:16px;
    width:44px;
    height:44px;
  }
}


@media (max-width: 1024px){
  .footer-content{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
}

@media (max-width: 640px){
  .site-footer{
    padding:32px 0 18px;
  }

  .footer-content{
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:16px;
  }

  /* Бренд — аккуратный столбик */
  .footer-brand{
    align-items:flex-start;
  }

  .footer-logo{
    width:64px;
    height:64px;
  }

  .footer-title{
    font-size:15px;
    margin-bottom:10px;
  }

  .footer-text,
  .footer-link{
    font-size:13px;
  }

  .footer-bottom{
    padding-top:16px;
  }

  .footer-copy{
    font-size:11px;
    line-height:1.5;
  }
}

/* ==========================================
   SEO CONTENT BLOCK (Hidden from users, visible for search bots)
   ========================================== */
.seo-content {
  /* Полностью скрываем от пользователей, но оставляем доступным для поисковых ботов */
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Альтернативный метод - для полной уверенности */
.seo-content {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Контейнер SEO - на случай если бот рендерит стили */
.seo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.seo-container h1 {
  font-size: 32px;
  margin: 20px 0;
  color: var(--text);
}

.seo-container h2 {
  font-size: 24px;
  margin: 20px 0 10px;
  color: var(--text);
}

.seo-container h3 {
  font-size: 18px;
  margin: 15px 0 10px;
  color: var(--text);
}

.seo-container p {
  font-size: 16px;
  line-height: 1.6;
  margin: 10px 0;
  color: var(--muted);
}

.seo-keywords {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
}

.seo-keywords p {
  font-size: 14px;
  color: var(--muted);
}