/* ============================================================
   Слой новой стилистики поверх настоящего сайта.
   Подключается ПОСЛЕ style.css и ничего в нём не меняет —
   только перекрывает. Снять тему = убрать два файла.
   ============================================================ */

/* ---------- 1. Палитра: глубже и холоднее ---------- */
:root{
  --bg:#060A12;            --bg-rgb:6,10,18;
  --bg-subtle:#0A101B;     --bg-elev:#0D1522;
  --text:#E8EDF5;          --text-rgb:232,237,245;
  --scrim-rgb:4,7,13;
  --nav-bg:6,10,18;
  --footer-bg:#070B14;
  --accent:#4D8DF6;        --accent-rgb:77,141,246;  --accent-hi:#7AADFF;
  --gold:#C9A46A;          --gold-rgb:201,164,106;
  --border:rgba(255,255,255,.08);

  --line-2:rgba(255,255,255,.13);
  --muted:rgba(232,237,245,.54);
  --dim:rgba(232,237,245,.36);

  /* один ритм движения на весь сайт */
  --e-out:cubic-bezier(.22,.7,.26,1);
  --e-in:cubic-bezier(.5,0,.75,0);
  --d-fast:180ms; --d-mid:280ms; --d-rise:620ms;
}

/* ---------- 2. Заголовки строчными и лёгкими ----------
   Главное отличие от нынешнего сайта: не тяжёлый капс, а спокойная
   обычная строка. Отсюда ощущение «дороже и тише». */
.hero-title,
.about-title,
.services-title,
.contact-title,
.team-title,
.service-hero-title,
.service-section-title{
  font-weight:500 !important;
  text-transform:none !important;
  letter-spacing:-.025em;
}
.hero-title{line-height:1.02}
/* Заголовок первого экрана набран капсом прямо в тексте страницы —
   возвращаем обычный регистр средствами стиля, текст не трогаем. */
.hero-title{text-transform:lowercase !important}
.hero-title .hero-line:first-child::first-letter,
.hero-title .hero-line:first-child .tl::first-letter{text-transform:uppercase}
.services-title em,.hero-title em,.about-title em{font-style:normal;color:var(--accent)}

/* видео на первом экране: гасим светлый фон и зелень, иначе оно спорит
   с почти чёрной палитрой новой темы */
.hero-video{filter:grayscale(.72) saturate(.5) contrast(1.06) brightness(.54) !important}
.hero-overlay{
  background:linear-gradient(90deg,
    rgba(var(--scrim-rgb),.93) 0%,
    rgba(var(--scrim-rgb),.7)  52%,
    rgba(var(--scrim-rgb),.82) 100%) !important;
}

/* подписи-рубрики над заголовками */
.section-label{color:var(--accent);letter-spacing:.24em}

/* ---------- 3. Кнопки-таблетки ---------- */
.btn{
  border-radius:999px !important;
  padding:15px 28px;
  background-repeat:no-repeat;background-size:0% 100%;background-position:left center;
  transition:background-size 420ms var(--e-out),background-color var(--d-mid),
             border-color var(--d-mid),color var(--d-mid),transform var(--d-fast) var(--e-out);
}
.btn:active{transform:scale(.97);transition-duration:90ms}
.btn-ghost{
  border:1px solid rgba(var(--accent-rgb),.55);color:var(--accent);
  background-image:linear-gradient(90deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.18));
}
.btn-ghost:hover{background-size:100% 100%;border-color:var(--accent);color:var(--accent-hi)}
.btn-primary{color:#05080F}
.btn-primary:hover{color:#05080F}

/* ---------- 4. Шапка ---------- */
#navbar{
  border-bottom:1px solid transparent;
  background:rgba(var(--nav-bg),.72);backdrop-filter:blur(16px);
  transition:border-color .3s,background .3s;
}
body.scrolled #navbar{border-bottom-color:var(--border);background:rgba(var(--nav-bg),.93)}
.nav-logo img{transition:transform 420ms var(--e-out)}
body.scrolled .nav-logo img{transform:scale(.86)}
.nav-link{position:relative;transition:color var(--d-fast)}
.nav-link::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-mid) var(--e-out);
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.social-link{transition:color var(--d-mid),transform var(--d-mid) var(--e-out)}
.social-link:hover{color:var(--accent);transform:translateY(-2px)}

/* полоса прочитанного */
.tm-prog{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:400;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none;
}

/* ---------- 5. Появление блоков при прокрутке ----------
   Двигаем только прозрачность и положение — вёрстка не пересчитывается. */
.rv{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--d-rise) var(--e-out),transform var(--d-rise) var(--e-out);
  transition-delay:calc(var(--i,0) * 55ms);
}
.rv.in{opacity:1;transform:none}

/* заголовок первого экрана выезжает построчно из-под невидимой линии */
.hero-line{overflow:hidden;display:block}
.hero-line .tl{
  display:inline-block;transform:translateY(106%);
  transition:transform 780ms var(--e-out);
  transition-delay:calc(var(--i,0) * 90ms + 150ms);
}
body.tm-ready .hero-line .tl{transform:none}

/* мягкое пятно света за курсором на первом экране */
.tm-glow{
  position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;
  pointer-events:none;opacity:0;z-index:1;transition:opacity 500ms var(--e-out);will-change:transform;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 62%);
}
@media (hover:hover) and (pointer:fine){.section-hero:hover .tm-glow{opacity:1}}

/* ---------- 6. Цифры ---------- */
.hero-stat-number,.stat-number{color:var(--accent);font-variant-numeric:tabular-nums}

/* ---------- 7. Карточки: обводка и скругление ---------- */
/* У пунктов-гармошек своя внутренняя отбивка в кнопке, поэтому им нужны
   только боковые поля. У вопросов-ответов отбивки нет — задаём полностью. */
.acc-item,.svc-acc-item,.faq-item{
  border-radius:14px;border:1px solid var(--border);background:var(--bg-subtle);
  margin-bottom:10px;
  transition:border-color var(--d-mid),background var(--d-mid),transform var(--d-mid) var(--e-out);
}
.acc-item,.svc-acc-item{padding:0 20px}
.faq-item{padding:20px 22px}
.acc-item:hover,.svc-acc-item:hover,.faq-item:hover{
  border-color:var(--line-2);background:var(--bg-elev);transform:translateY(-2px);
}
.acc-num{color:var(--accent)}
.acc-icon,.svc-acc-icon{transition:transform .35s var(--e-out),color var(--d-mid)}
.acc-item:hover .acc-icon,.svc-acc-item:hover .svc-acc-icon{color:var(--accent)}

/* ---------- 8. Команда ---------- */
.team-card{
  border-radius:16px;border:1px solid var(--border);background:var(--bg-subtle);overflow:hidden;
  transition:border-color var(--d-mid),transform 380ms var(--e-out),box-shadow 380ms var(--e-out);
}
.team-card:hover{
  border-color:var(--line-2);transform:translateY(-6px);
  box-shadow:0 20px 46px -22px rgba(var(--accent-rgb),.5);
}
/* высоту задаёт пропорция, а не сам снимок — иначе карточки разной длины */
.team-photo{aspect-ratio:3/4;position:relative;overflow:hidden;background:#0A1220}
.team-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05) brightness(.9);
  transition:transform 760ms var(--e-out),filter 520ms var(--e-out);
}
.team-card:hover .team-photo img{transform:scale(1.05);filter:grayscale(0) contrast(1.05) brightness(1)}
.team-role{color:var(--dim)}

/* ---------- 9. Контакты и подвал ---------- */
.contact-btn{border-radius:999px !important;transition:transform var(--d-fast) var(--e-out),background .2s,border-color .2s}
.contact-btn:active{transform:scale(.97)}
/* заголовки в подвале были золотыми — в новой палитре золота нет */
.footer-heading{color:var(--muted) !important;letter-spacing:.2em}
.footer-social-btn{transition:color var(--d-mid),transform var(--d-mid) var(--e-out)}
.footer-social-btn:hover{color:var(--accent);transform:translateY(-3px)}

/* ---------- 10. Страницы услуг ---------- */
/* .service-why уже коробка в исходных стилях — ей только скругление.
   .service-detail-section коробкой не был, поэтому задаём и поля:
   без них текст упрётся в рамку. .service-cta — строка с кнопкой, не карточка. */
.service-why{border-radius:16px}
.service-detail-section{
  border-radius:16px;border:1px solid var(--border);background:var(--bg-subtle);
  padding:30px 32px;
}
.service-hero{border-bottom:1px solid var(--border)}
@media (max-width:768px){
  .service-detail-section{padding:22px 20px}
  .faq-item{padding:18px 18px}
  .acc-item,.svc-acc-item{padding:0 16px}
}

/* ---------- 11. Меню на весь экран ----------
   Слева картинка с девизом, справа пункты со значками.
   Старое меню отключено, но осталось в разметке. */
.mobile-menu{display:none !important}

.tm{
  position:fixed;inset:0;z-index:500;display:flex;align-items:stretch;background:var(--bg);
  opacity:0;pointer-events:none;transition:opacity 300ms var(--e-out);
}
.tm.open{opacity:1;pointer-events:all}
.tm:not(.open){transition-duration:200ms;transition-timing-function:var(--e-in)}

.tm-art{
  position:relative;flex:0 0 46%;max-width:620px;overflow:hidden;
  background:#060A12 url('/menu-art.jpg') center 42%/cover no-repeat;
  transform:translateX(-7%);transition:transform 520ms var(--e-out);
}
.tm-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,10,18,.18) 0%,rgba(6,10,18,.46) 62%,rgba(6,10,18,.88) 100%);
}
.tm-tag{position:absolute;left:34px;bottom:38px;z-index:1}
.tm-tag b{
  display:block;font-family:var(--f-display);font-weight:500;font-size:13px;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(232,237,245,.8);line-height:2.1;
  opacity:0;transform:translateY(10px);transition:opacity 420ms var(--e-out),transform 420ms var(--e-out);
}
.tm.open .tm-tag b{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 70ms + 260ms)}
.tm-tag i{
  display:block;width:92px;height:1px;background:rgba(255,255,255,.28);margin-top:20px;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 520ms var(--e-out) 480ms;
}
.tm.open .tm-tag i{transform:none}

.tm-panel{
  flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto;
  background:var(--bg-subtle);border-left:1px solid rgba(var(--accent-rgb),.28);
  padding:76px 38px 30px;
  transform:translateX(7%);transition:transform 520ms var(--e-out);
}
.tm.open .tm-art,.tm.open .tm-panel{transform:none}
/* Закрытие быстрее открытия — так интерфейс кажется отзывчивее. */
.tm:not(.open) .tm-art,.tm:not(.open) .tm-panel{transition-duration:260ms;transition-timing-function:var(--e-in)}

.tm-x{
  position:absolute;right:22px;top:18px;z-index:3;width:48px;height:48px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--muted);
  transition:color var(--d-fast),transform 360ms var(--e-out);
}
.tm-x:hover{color:var(--text)}
.tm-x:active{transform:rotate(90deg) scale(.92);transition-duration:120ms}
.tm-x svg{width:27px;height:27px}

.tm-nav{display:flex;flex-direction:column}
.tm-nav a{
  position:relative;display:flex;align-items:center;gap:22px;padding:19px 6px 19px 22px;
  font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.5vw,20px);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(232,237,245,.86);text-decoration:none;
  opacity:0;transform:translateX(-20px);
  transition:opacity 360ms var(--e-out),transform 360ms var(--e-out),color var(--d-fast);
}
.tm.open .tm-nav a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 50ms + 180ms)}
/* разделитель начинается у значка, а не от самого края */
.tm-nav a::after{content:'';position:absolute;left:22px;right:0;bottom:0;height:1px;background:var(--border)}
/* синяя засечка слева у текущего пункта */
.tm-nav a::before{
  content:'';position:absolute;left:0;top:16%;bottom:16%;width:2px;background:var(--accent);
  transform:scaleY(0);transition:transform 320ms var(--e-out);
}
.tm-nav a.on::before{transform:scaleY(1)}
.tm-nav a.on{color:var(--accent)}
.tm-nav a:hover{color:var(--text)}
.tm-nav a.on:hover{color:var(--accent-hi)}
.tm-nav svg{width:26px;height:26px;flex:none;transition:transform var(--d-mid) var(--e-out)}
.tm-nav a:hover svg{transform:translateX(3px)}

.tm-foot{
  margin-top:auto;padding-top:30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  opacity:0;transform:translateY(12px);transition:opacity 380ms var(--e-out),transform 380ms var(--e-out);
}
.tm.open .tm-foot{opacity:1;transform:none;transition-delay:460ms}
.tm-langs{display:flex;gap:22px}
.tm-langs a,.tm-langs span{
  font-family:var(--f-display);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--dim);
  padding-bottom:5px;border-bottom:1px solid transparent;text-decoration:none;
  transition:color var(--d-fast),border-color var(--d-fast);
}
.tm-langs a:hover{color:var(--text)}
.tm-langs .on{color:var(--accent);border-bottom-color:var(--accent)}
.tm-sep{width:1px;height:20px;background:var(--line-2)}
.tm-soc{display:flex;gap:22px}
.tm-soc svg{width:21px;height:21px;opacity:.5;transition:opacity var(--d-mid),transform var(--d-mid) var(--e-out),color var(--d-mid)}
.tm-soc a:hover svg{opacity:1;color:var(--accent);transform:translateY(-3px)}

/* на телефоне делить экран пополам нечем — картинка уходит полосой наверх */
@media (max-width:760px){
  .tm{flex-direction:column}
  .tm-art{flex:0 0 clamp(150px,21svh,210px);max-width:none;background-position:center 24%;transform:translateY(-10%)}
  .tm-art::after{background:linear-gradient(180deg,rgba(6,10,18,.15) 0%,rgba(6,10,18,.5) 55%,rgba(6,10,18,.92) 100%)}
  .tm-tag{left:22px;bottom:14px}
  .tm-tag b{font-size:10.5px;letter-spacing:.34em;line-height:1.9}
  .tm-tag i{display:none}
  .tm-panel{border-left:0;border-top:1px solid rgba(var(--accent-rgb),.28);padding:22px 22px 26px;transform:translateY(10%)}
  /* пункты по центру свободного места — иначе внизу пустая треть экрана */
  .tm-nav{margin-top:auto;margin-bottom:auto}
  .tm-foot{margin-top:0;padding-top:24px;gap:18px}
  .tm-nav a{padding:17px 4px 17px 20px;gap:18px}
  .tm-nav a::after{left:20px}
  .tm-nav svg{width:23px;height:23px}
  .tm-x{top:10px;right:10px}
}

/* ---------- 12. Если человек просил убрать движение ----------
   В системе есть переключатель «уменьшить движение». Уважаем его. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
  }
  .rv{opacity:1 !important;transform:none !important}
  .hero-line .tl{transform:none !important}
  .tm-glow{display:none}
}