/* ====== BASE ====== */
:root{
  --bg:#0f1116; --panel:#141925; --panel2:#0f1422; --stroke:#232a3a;
  --ink:#e8eefc; --muted:#9aa6bf; --acc:#1b1414;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000; font-family:'Russo One',sans-serif; color:#111;overflow-x: hidden;
}





h1,h2,h3,h4,h5,h6{
  font-family:'Russo One',sans-serif;
  color:#ffffff; font-weight:500; line-height:1.2; margin:0 0 15px;
}
h1{font-size:42px; color:var(--acc); text-transform:uppercase; letter-spacing:1px}
h2{font-size:32px; color:#e8eefc; border-left:4px solid var(--acc); padding-left:10px}
h3{font-size:24px; font-weight:500; color:#c8d3ec}

p{font-size:16px; color:#9aa6bf; margin:0 0 15px}

a{color:var(--acc); text-decoration:none; transition:.3s}
a:hover{color:#1b1414}

/* ====== CONTAINER (ширина сайта) ====== */
.container{
  width:100%;
  max-width:1400px;   /* ← здесь ты задаёшь «ширину сайта» */
  margin:0 auto;
  padding:0 20px;
}

/* ====== HEADER ====== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#1b1414;
  border-bottom:1px solid var(--stroke);
height: 90px;
    display: flex;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 18px;
}
.logo{display:flex; align-items:center; gap:10px}
.logo img{
    width: 180px;
    margin-left: -20px;
    color: #d4a017;
    
}

/* Бургер */
.burger{
  width:44px; height:44px; border:1px solid var(--stroke); border-radius:12px;
  display:none; align-items:center; justify-content:center; cursor:pointer; user-select:none;
  background:#0b1219;position: absolute; right: 10px;
}
.burger span{display:block; width:20px; height:2px; background:var(--ink); margin:3px 0; transition:.2s}
.nav-toggle:checked + .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle:checked + .burger span:nth-child(2){opacity:0}
.nav-toggle:checked + .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* CTA */
.contact-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:12px;
  color:#1b1414; background:#d4a017; font-weight:500; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-cta:hover{transition:1s;background:#f2c94c;}
.contact-cta--desktop{margin-left:8px}
.cta-mobile{display:none}

/* NAV root */
.nav{max-width:100%}
.menu-root{
  display:flex; align-items:center; gap:8px;
  margin:0; padding:0; list-style:none;
}
.menu-link{
  position:relative; display:block; padding:12px 14px;
  color:var(--ink); font-weight:500; border-radius:12px; text-decoration:none;
}
.menu-link:hover{color:#fff}
/* underline accent on hover */
.menu-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px; height:2px;
  background:linear-gradient(90deg, transparent, #d4a017, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .18s ease;
  border-radius:2px;
}
.menu-link:hover::after{transform:scaleX(1)}

/* Caret (отдельный элемент внутри label) */
.caret{
  display:inline-block; margin-left:8px; vertical-align:middle;
  width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-1px); border-radius:1px;
}

/* Общая оболочка для выпадашек */
.has-sub, .has-mega{position:relative}

/* Simple dropdown (для "Страницы") */
.dropdown.simple{
    position: absolute;
    left: 0;
    top: calc(100% + 23px);
    min-width: 220px;
    background: #1b1414;
    border: 0px solid var(--stroke);
    border-radius: 0 0 10px 10px;
    padding: 8px;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s steps(1,end);
    z-index: 30;
}
.dropdown.simple li a{
  display:block; padding:10px 12px; border-radius:10px;
  color:var(--muted); white-space:nowrap; text-decoration:none;
}
.dropdown.simple li a:hover{color:var(--ink); background:#11182a}

/* МЕГАМЕНЮ */
.mega.dropdown{
  position:absolute; left:-463px; top:calc(100% + 22px);
  width:min(800px, calc(100vw - 40px));
  background:#eee;
  border:1px solid var(--stroke); border-radius:0 0 10px 10px;
  padding:16px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s steps(1,end);
  z-index:40;

  display:grid; gap:14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Появление на десктопе */
@media (hover:hover){
  .has-sub:hover>.dropdown.simple,
  .has-sub:focus-within>.dropdown.simple,
  .has-mega:hover>.mega,
  .has-mega:focus-within>.mega{
    opacity:1; visibility:visible; transform:translateY(0)
  }
}

.mega-col{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:12px; min-width:0;
}
.mega-title{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-size:14px; font-weight:800; letter-spacing:.2px; color:#0f1116;
  text-transform:uppercase;
}
.mega-title .icon{width:18px; height:18px; opacity:.8}
.mega-list{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.mega-list a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px; color:#0f1116; text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.mega-list a:hover{background:#11182a; color:var(--ink); transform:translateX(2px)}
.mega-list .i{width:16px; height:16px; opacity:.9}

/* ====== MOBILE NAV ====== */
@media (max-width: 1100px){
  .contact-cta--desktop{display:none}
  .cta-mobile{display:list-item; margin-top:6px}
}
@media (max-width: 992px){
  .burger{display:flex;
  flex-direction: column;}

  .menu-root{
    position:fixed;
    top:90px; bottom:auto;
    left:max(10px, calc((100vw - 1400px)/2 + 10px));
    right:max(10px, calc((100vw - 1400px)/2 + 10px));

    flex-direction:column; align-items:stretch; gap:6px;
    background:#1b1414; border:1px solid var(--stroke); border-radius:0 0 10px 10px;
    padding:10px; transform-origin:top; transform:scaleY(0); transition:.18s ease;
    max-height:calc(100dvh - 84px); overflow:auto;
  }

  .nav-toggle:checked + .burger{border-color:var(--acc)}
  .nav-toggle:checked + .burger + .nav .menu-root{transform:scaleY(1)}

  /* Простые выпадашки — как аккордеон */
  .dropdown.simple{
    position:static; transform:none; opacity:1; visibility:visible;
    background:transparent; border:none; box-shadow:none; padding:4px 0 8px 8px
  }
  .has-sub .dropdown.simple{display:none}
  #drop-pages:checked ~ .dropdown.simple{display:block}

  /* Мегаменю — превращаем в сетку на всю ширину панели */
  .mega.dropdown{
    position:static; width:auto; transform:none; opacity:1; visibility:visible;
    background:transparent; border:none; box-shadow:none; padding:0; gap:8px;
    grid-template-columns: 1fr; /* колонки друг под другом */
  }
  .has-mega .mega.dropdown{display:none}
  #drop-services:checked ~ .mega.dropdown{display:grid}

  .mega-col{background:#ccc;}
}

/* Focus-visible для клавиатуры */
.menu-link:focus-visible, .dropdown a:focus-visible, .burger:focus-visible, .contact-cta:focus-visible{
  outline:2px dashed var(--acc); outline-offset:3px
}


/* ===== tokens ===== */
:root{
  --bg:#0f1116;
  --panel:#141925;
  --panel2:#0f1422;
  --stroke:#232a3a;
  --text:#e8eefc;
  --muted:#9aa6bf;
  --accent:#1b1414;
}

/* ===== HERO ===== */
.hero--neo{
  position: relative;
  background: #2b201f;
  color: var(--text);
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) 0;
}
.hero__glow{
  position:absolute; inset:-20%;
  background: radial-gradient(40% 30% at 85% 20%, rgba(187,235,0,.18), transparent 60%);
  filter: blur(22px); opacity:.6; pointer-events:none;
}
.hero__grid{
  position:absolute; inset:0; background:
    linear-gradient(transparent 23px, rgba(255,255,255,.03) 24px),
    linear-gradient(90deg, transparent 23px, rgba(255,255,255,.03) 24px);
  background-size: 24px 24px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 100%);
  pointer-events:none;
}
.hero__inner{
  display:grid; align-items:center; gap:28px;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 960px){
  .hero__inner{ grid-template-columns: 1fr; }
}
.eyebrow{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font: 500 12px/1 "Russo One", system-ui, Arial;
  letter-spacing:.2px; color: var(--muted);
  margin-bottom:10px;
}
.hero__title{
  font: 800 clamp(28px, 5vw, 48px)/1.1 "Russo One", system-ui, Arial;
  margin: 0 0 10px;
}
.hero__title span{ color: #d4a017; text-shadow: 0 0 18px rgba(187,235,0,.18); }
.hero__subtitle{
  color: var(--muted);
  max-width: 640px; line-height: 1.7; margin: 0 0 18px;
}
.hero__cta{ display:flex; gap:12px; flex-wrap: wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 46px; padding: 0 18px; border-radius: 12px;
  font: 500 14px/1 "Russo One", system-ui, Arial; text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn--accent{
  background: linear-gradient(180deg, #d9ff57, var(--accent));
  color:#0b120e; box-shadow: 0 10px 26px rgba(187,235,0,.18);
}
.btn--accent:hover{ transform: translateY(-2px); box-shadow:0 16px 34px rgba(187,235,0,.28); }
.btn--ghost{
  background: rgba(255,255,255,.06);
  color: var(--text); border:1px solid rgba(255,255,255,.12);
}
.btn--ghost:hover{ border-color: #d4a017; color: #d4a017; }

.hero__badges{
  display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:14px 0 0; list-style:none;
}
.hero__badges li{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:8px 12px; border-radius: 999px; font:500 12px/1 "Russo One", system-ui;
  color: var(--muted);
}

.hero__right{ position: relative; }
.hero__mockup{
  width: 100%; max-width: 400px; display:block; margin-inline: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
  animation: float 1s ease-in-out infinite;
}
.hero__sparkle{
  position:absolute; inset:auto 0 -10% 0; height: 120px;
  background: radial-gradient(60% 80% at 50% 0%, rgba(187,235,0,.18), transparent 65%);
  filter: blur(20px); pointer-events:none;
}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-8px) }
}
@media (prefers-reduced-motion: reduce){
  .hero__mockup{ animation: none; }
}



:root{
  --bg:#0f1116; --panel:#141925; --panel2:#0f1422; --stroke:#232a3a;
  --ink:#e8eefc; --muted:#9aa6bf; --acc:#1ec6e6; /* голубой акцент */
  --lime:#1b1414;
}
.price-section{background:#2b201f; color:var(--ink); padding:48px 16px}
.price-head{max-width:1100px; margin:0 auto 28px; text-align:center}
.price-head h2{font:500 34px/1.2 "Russo One",system-ui; margin:0 0 8px}
.price-head p{color:var(--muted); margin:0}


.price-slider{max-width:1000px; margin:0 auto; position:relative}
.price-slider .viewport{
  overflow: clip;            /* режет и контент, и тени (новый стандарт) */
  /* для старых браузеров: */
  -webkit-mask-image: linear-gradient(#000,#000);
  padding:0;
  border-radius:18px;        /* чтобы края выглядели аккуратно */
  background: transparent;   /* без фона, чтобы не было «ступеньки» */
}
.price-slider .track{
  display:flex;
  gap:20px;                  /* важно: тот же GAP, что в JS */
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  will-change: transform, padding; /* т.к. будем задавать динамический padding */
}
.price-slider .card{box-sizing:border-box; margin:0}  /* никаких внешних отступов */

.price-slider .card{
  background:#1b1414;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px; padding:18px; display:flex; flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  min-height: 360px;
}
.price-slider .card-top{
  border:1px solid rgba(255,255,255,.06);
  background:#2b201f;
  border-radius:14px; padding:14px 14px 12px; margin-bottom:14px;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.price-slider .badge{
  font:500 15px/1 "Russo One",system-ui; letter-spacing:.2px;
  background:#2b201f; padding:8px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.08)
}
.price-slider .price{
  font:500 28px/1 "Russo One",system-ui; color:#d4a017;
}
.price-slider .price small{font-weight:500; font-size:14px; color:var(--ink); opacity:.8; margin-right:6px}

.price-slider .feat{list-style:none; padding:0; margin:0 0 16px}
.price-slider .feat li{
  position:relative; padding-left:26px; margin:10px 0; color:var(--ink);
}
.price-slider .feat li::before{
  content:""; position:absolute; left:0; top:2px; width:18px; height:18px;
  border-radius:50%; outline:1px solid rgba(255,255,255,.15);
  background:#bbeb00;
  box-shadow:0 0 12px rgba(30,198,230,.35);
}
.price-slider .btn{
  margin-top:auto; display:inline-block; text-align:center; text-decoration:none;
  background:#d4a017;
  color:#1b1414; font-weight:500; padding:16px; border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.price-slider .btn:hover{transform:translateY(-2px); filter:saturate(1.2)}

.price-slider .nav{
  position:absolute; top:50%; translate:0 -50%;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:20px; line-height:40px; text-align:center; cursor:pointer;
  backdrop-filter: blur(6px);
}
.price-slider .nav:hover{background:rgba(255,255,255,.14)}
.price-slider .prev{left:-10px;z-index: 1}
.price-slider .next{right:-10px;z-index: 1}

.price-slider .dots{
  display:flex; justify-content:center; gap:10px; margin-top:12px;
}
.price-slider .dots button{
  width:8px; height:8px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.3);
}
.price-slider .dots button[aria-current="true"]{
  background:var(--acc); box-shadow:0 0 8px rgba(30,198,230,.7);
}

/* RESPONSIVE: количество карточек в видимой зоне */
@media (max-width: 1023.98px){
  .price-head h2{font-size:28px}
}
@media (max-width: 767.98px){
  .price-head h2{font-size:24px}
  .price-slider .prev{left:2px} .price-slider .next{right:2px}
}


/* ================= ABOUT (modern) ================= */
.about{
  background: #2b201f;
  color: var(--ink);
  padding: clamp(48px, 7vw, 84px) 0;
  border-top: 1px solid var(--stroke);
  position: relative;
  isolation: isolate;
}

.about__inner{ display:flex; flex-direction:column; gap:28px; }
.about__head{ max-width: 100%; }
.about__head h2{
  font: 800 clamp(22px, 3.4vw, 34px)/1.15 "Russo One", system-ui;
  margin: 0 0 10px;
  letter-spacing:.2px;
  display: flex;
    justify-content: center;
}
.about__head p{ color: var(--muted); margin:0; line-height:1.8; }

/* ====== GRID ====== */
.about__content{
  display:grid; gap:20px; grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
@media (max-width: 1024px){
  .about__content{ grid-template-columns: 1fr; }
}

/* ====== LEFT ====== */
.about__card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 22px clamp(18px, 3vw, 28px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}
.about__card h3{ margin: 0 0 14px; font-weight:800; font-size: clamp(16px, 1.2vw, 18px); }

/* чек-лист */
.check{
  list-style:none; padding:0; margin:0; display:grid; gap:12px;
}
.check li{
  display:grid; grid-template-columns: 26px 1fr; align-items:center; gap:12px;
  color: var(--ink);
}
.check__icon{
  width:26px; height:26px; border-radius:10px; display:grid; place-items:center;
  background: radial-gradient(90% 90% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 2px rgba(187,235,0,.0), inset 0 1px 0 rgba(255,255,255,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.check__icon svg{ width:16px; height:16px; }
.check li:hover .check__icon{
  box-shadow: 0 0 0 2px #f2c94c;
  transform: translateY(-1px);
}

/* цифры */
.about__stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px;
  margin-top: 16px;
}
@media (max-width: 560px){
  .about__stats{ grid-template-columns: 1fr 1fr; }
}
.stat{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 16px 14px;
  text-align:center; position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; inset:auto -40% -40% -40%; height:130%;
  background: radial-gradient(40% 40% at 50% 0%, rgba(187,235,0,.12), transparent 60%);
  pointer-events:none; opacity:.4;
}
.stat__num{
  font: 800 clamp(18px, 2.2vw, 24px)/1 "Russo One", system-ui; color: var(--acc);
  text-shadow: 0 0 20px rgba(187,235,0,.18);
}
.stat__label{ color: var(--muted); margin-top:8px; font-size:.96rem; }

/* ====== RIGHT (мини-карточки) ====== */
.about__right{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
@media (max-width: 560px){
  .about__right{ grid-template-columns: 1fr; }
}
.mini{
  display:flex; gap:14px; padding:16px; border-radius:16px; text-decoration:none; color:var(--ink);
  background: #1b1414;
  border:1px solid rgba(255,255,255,.1);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.mini__icon{
  flex:0 0 48px; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; color:var(--ink);
  background:
    conic-gradient(from 140deg, rgba(187,235,0,.35), rgba(187,235,0,.0) 40%),
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  position: relative; overflow:hidden;
}
.mini__icon::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(50% 50% at 120% -20%, rgba(187,235,0,.25), transparent 60%);
  opacity:.0; transition: opacity .25s ease;
}
.mini__icon svg{ width:22px; height:22px; stroke: currentColor; }
.mini__body h4{ margin:2px 0 4px; font-size:1rem; font-weight:500; letter-spacing:.2px }
.mini__body p{ margin:0; color:var(--muted); line-height:1.55; font-size:.95rem; }

.mini:hover{
  transform: translateY(-3px);
  border-color: #f2c94c;
  box-shadow: 0 0 0 1px rgba(187,235,0,.25) inset, 0 16px 34px rgba(0,0,0,.28);
}
.mini:hover .mini__icon::after{ opacity:.6; }

/* лёгкая «дыхательная» анимация иконок — без навязчивости */
@media (prefers-reduced-motion: no-preference){
  .mini__icon{ animation: float 4.8s ease-in-out infinite; }
  @keyframes float{
    0%,100%{ transform: translateY(0) }
    50%{ transform: translateY(-2px) }
  }
}

/* ====== TABLE (если понадобится) ====== */
table{ width:100%; border-collapse:collapse; margin-bottom:20px }
td,th{ border:1px solid var(--stroke); padding:10px 15px; color:var(--ink); font-size:15px }
th{ background:var(--panel); font-weight:500 }
tr:nth-child(even){ background:var(--panel2) }




/* WHY (вид как на скрине) */
:root{
  --whyx-bg: var(--panel, #141925);
  --whyx-ink: var(--ink, #e8eefc);
  --whyx-muted: var(--muted, #9aa6bf);
  --whyx-stroke: var(--stroke, #232a3a);
  --whyx-accent: var(--acc, #1b1414);
}

.whyx{
  background: #2b201f;
  color: var(--whyx-ink);
  padding: clamp(36px, 6vw, 80px) 16px;
  position: relative;
}

.whyx__container{ max-width: 1180px; margin: 0 auto; }

.whyx__title{
  font: 800 clamp(26px, 4vw, 44px) 'Russo One', system-ui, sans-serif;
  text-align: center;
  margin: 0 0 14px;
  letter-spacing:.3px;
}

.whyx__lead{
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  color: var(--whyx-muted);
  line-height: 1.65;
  font-size: clamp(14px, 1.7vw, 18px);
}

.whyx__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 1024px){
  .whyx__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .whyx__grid{ grid-template-columns: 1fr; }
}

.whyx__item{
	display: flex;
    align-items: center;
    flex-direction: column;
  text-align: left;
}

.whyx__badge{
  width: 64px; height: 64px;
  display: inline-grid; place-items: center;
  border: 2px solid var(--whyx-stroke);
  border-radius: 8px;
  transform: rotate(-10deg);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  margin-bottom: 14px;
}

/* размеры больше */
.whyx__badge{
  width: 76px; height: 76px;           /* было 64x64 */
  border-width: 2px;
  margin-bottom: 16px;
  will-change: transform;
}
.whyx__badge svg{ width: 100%; height: 100%; }

/* анимация «дрейф» — не как обычный спин */
@keyframes whyx-drift {
  0%   { transform: rotate(-10deg) translateY(0) scale(1); }
  25%  { transform: rotate(4deg)   translateY(-3px) scale(1.02); }
  50%  { transform: rotate(8deg)   translateY(-1px) scale(1.015); }
  75%  { transform: rotate(-2deg)  translateY(-4px) scale(1.02); }
  100% { transform: rotate(-10deg) translateY(0) scale(1); }
}

/* лёгкая «контр-анимация» для пиктограммы — она чуть покачивается,
   но не крутится синхронно с плашкой */
@keyframes whyx-icon-breathe {
  0%,100% { transform: rotate(0deg) scale(1);   opacity: 1; }
  50%     { transform: rotate(-3deg) scale(1.04); opacity: .95; }
}

/* включаем только когда у секции есть whyx--motion */
.whyx--motion .whyx__badge{
  animation: whyx-drift 9s ease-in-out infinite;
}
.whyx--motion .whyx__badge svg{
  animation: whyx-icon-breathe 6.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* hover — чуть ускоряем и усиливаем */
.whyx--motion .whyx__item:hover .whyx__badge{
  animation-duration: 6.5s;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.25));
}

/* уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .whyx--motion .whyx__badge,
  .whyx--motion .whyx__badge svg{
    animation: none !important;
    transform: rotate(-8deg);
  }
}


/* цветные варианты как на скрине */
.whyx__badge--red   { background:#2a1920; color:#ff6b6b; border-color:#7a2e3b; }
.whyx__badge--yellow{ background:#2a2415; color:#ffd166; border-color:#7a5f1a; }
.whyx__badge--cyan  { background:#16242a; color:#4dd2ff; border-color:#1d5666; }
.whyx__badge--green { background:#13271a; color:#59ffa1; border-color:#1e5a35; }

.whyx__item-title{
  font: 500 20px 'Russo One', system-ui, sans-serif;
  margin: 6px 0 8px;
  color: var(--whyx-ink);
}
.whyx__item-text{
  color: var(--whyx-muted);
  line-height: 1.65;
  font-size: 15px;
  max-width: 420px;
}

/* нижняя ссылка с подчёркиванием */
.whyx__linkwrap{ text-align: center; margin-top: clamp(26px, 4vw, 40px); }
.whyx__link{
  display: inline-block;
  font: 500 16px 'Russo One', system-ui, sans-serif;
  color: var(--whyx-ink);
  text-decoration: none;
  position: relative;
}
.whyx__link u{
  text-underline-offset: 5px;
  text-decoration-thickness: 3px;
  text-decoration-color: color-mix(in oklab, var(--whyx-accent) 80%, transparent);
}

.whyx__link:hover{
    color:#d4a017;
}

/* лёгкая «панельная» окантовка секции */
.whyx{
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(0,0,0,.35);
}


/* TECH STACK */
:root{
  --techx-bg: var(--panel, #141925);
  --techx-ink: var(--ink, #e8eefc);
  --techx-muted: var(--muted, #9aa6bf);
  --techx-stroke: var(--stroke, #232a3a);
  --techx-accent: var(--acc, #1b1414);
}

.techx{
  background: #2b201f;
  color: var(--techx-ink);
  padding: clamp(36px, 6vw, 80px) 0px;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(0,0,0,.35);
}
.techx__container{ max-width:1180px; margin:0 auto; }

.techx__title{
  text-align:center;
  font:800 clamp(24px, 3.6vw, 36px) 'Russo One', system-ui, sans-serif;
  margin:0 0 10px;
}
.techx__lead{
  text-align:center;
  color:var(--techx-muted);
  max-width:820px; margin:0 auto;
  font-size:clamp(14px,1.7vw,16px);
  line-height:1.65;
}

.techx__grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: clamp(16px, 2.6vw, 28px);
  margin-top: clamp(26px, 4vw, 46px);
}
@media (max-width: 1024px){
  .techx__grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 780px){
  .techx__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .techx__grid{ grid-template-columns: repeat(2, 1fr); }
}

.techx__item{ text-align:center; }

.techx__badge{
  width:86px; height:86px;
  display:inline-grid; place-items:center;
  border:2px solid var(--techx-stroke);
  border-radius:12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  margin-bottom:10px;
  will-change: transform, filter;
  background: rgba(255,255,255,.02);
}
.techx__badge svg{
  width:100%; height:100%; color:currentColor;
}

/* Цветовые темы бейджей */
.techx__badge--orange{ color:#ff9150; background: #2b1f19; border-color:#7a4b2f; }
.techx__badge--blue  { color:#4da5ff; background: #182433; border-color:#254b75; }
.techx__badge--yellow{ color:#ffd166; background: #2b2617; border-color:#7a5f1a; }
.techx__badge--violet{ color:#b38cff; background: #241a33; border-color:#4f3c7a; }
.techx__badge--teal  { color:#42e6c8; background: #0f2624; border-color:#1d5f58; }
.techx__badge--wp    { color:#7cc7ff; background: #13222c; border-color:#2a5063; }
.techx__badge--el    { color:#ff4d7e; background: #2b1722; border-color:#7a2b47; }
.techx__badge--react { color:#69d9ff; background: #0f2330; border-color:#1e566b; }
.techx__badge--figma { color:#ff8570; background: #2b1a18; border-color:#7a3a33; }
.techx__badge--git   { color:#ff7b5c; background: #2a1a14; border-color:#774030; }

.techx__name{
  font:500 14px 'Russo One', system-ui, sans-serif;
  color:var(--techx-ink);
  opacity:.92;
}

/* Мягкая асинхронная анимация */
@keyframes techx-drift {
  0%   { transform: rotate(-8deg) translateY(0) scale(1); }
  25%  { transform: rotate(4deg)  translateY(-3px) scale(1.02); }
  50%  { transform: rotate(6deg)  translateY(-1px) scale(1.015); }
  75%  { transform: rotate(-2deg) translateY(-4px) scale(1.02); }
  100% { transform: rotate(-8deg) translateY(0) scale(1); }
}
@keyframes techx-icon {
  0%,100% { transform: rotate(0deg) scale(1); opacity:1; }
  50%     { transform: rotate(-3deg) scale(1.05); opacity:.95; }
}

/* Включаем движение только при модификаторе */
/*.techx--motion .techx__badge{
  animation: techx-drift 9s ease-in-out infinite;
  animation-delay: var(--d,0s);
}
.techx--motion .techx__badge svg{
  animation: techx-icon 6.6s ease-in-out infinite;
  transform-origin: 50% 50%;
  animation-delay: calc(var(--d,0s) + .3s);
}*/

/* Hover эффект */
.techx--motion .techx__item:hover .techx__badge{
  animation-duration: 6.4s;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.28));
}

/* Доступность */
@media (prefers-reduced-motion: reduce){
  .techx--motion .techx__badge, .techx--motion .techx__badge svg{ animation:none !important; }
}

/* ===== Marquee base ===== */
/* ====== Marquee / Лента услуг ====== */
.marquee {
  overflow: hidden;
  padding: 25px 0;
  background: linear-gradient(90deg, #111418, #0e1116, #111418);
  border-top: 1px solid #232a3a;
  border-bottom: 1px solid #232a3a;
  position: relative;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 18s linear infinite;
  gap: 60px;
}

.marquee:hover .marquee__track {
  animation-play-state: paused; /* Останавливаем при наведении */
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 60px;
}

.marquee span {
  font-family: 'Russo One', sans-serif;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #e8eefc;
  opacity: 0.75;
  position: relative;
  transition: 0.35s ease;
}

/* Эффект подсветки при наведении */
.marquee span:hover {
  opacity: 1;
  color: #d4a017;
  text-shadow:
    0 0 6px rgba(187,235,0,0.8),
    0 0 12px rgba(187,235,0,0.5);
  transform: scale(1.08);
}

/* Анимация прокрутки */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Mobile adjustments */
@media(max-width: 768px) {
  .marquee span {
    font-size: 16px;
  }
  .marquee__track, .marquee__group {
    gap: 30px;
  }
}


/* ========= KPI (stats) =========
   Требуются дизайн-токены:
   --bg, --panel, --panel2, --stroke, --ink, --muted, --acc
*/

.kpi{
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0;
  background:#1b1414;
  border-top: 1px solid var(--stroke);
  isolation: isolate;
}

.kpi__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
}
@media (max-width: 1024px){ .kpi__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .kpi__grid{ grid-template-columns: 1fr; } }

.kpi__card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  text-align: center;
  color: var(--ink);
  background:#2b201f;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 36px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.kpi__card::after{
  content: "";
  position: absolute;
  inset: auto -30% -35% -30%;
  height: 140%;
  background: radial-gradient(45% 45% at 50% 0%, color-mix(in oklab, var(--acc) 25%, transparent), transparent 65%);
  pointer-events: none;
  opacity: .35;
}
.kpi__card:hover{
  transform: translateY(-3px);
  border-color: #f2c94c;

}

.kpi__value{
  font-family: "Russo One", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1;
  letter-spacing: .2px;
  color: var(--acc);
  text-shadow: 0 0 18px color-mix(in oklab, var(--acc) 28%, transparent);
}
.kpi__label{
  margin-top: 10px;
  font-size: clamp(14px, 1.3vw, 15.5px);
  color: var(--muted);
}

/* Мягкая «дышащая» анимация (respect reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .kpi__card{ animation: kpiFloat 5.2s ease-in-out infinite; }
  .kpi__card:nth-child(2){ animation-delay: .15s }
  .kpi__card:nth-child(3){ animation-delay: .3s }
  .kpi__card:nth-child(4){ animation-delay: .45s }

  @keyframes kpiFloat{
    0%,100%{ transform: translateY(0) }
    50%{ transform: translateY(-2px) }
  }
}

/* ====== SERVICES STYLES ====== */
:root{
  --bg:#0f1116;
  --panel:#141925;
  --panel2:#0f1422;
  --stroke:#232a3a;
  --text:#e8eefc;
  --muted:#9aa6bf;
  --accent:#1b1414; /* твой цвет */
}

.services-section{
  background: #2b201f;
  padding: 64px 20px;
  color: var(--text);
  font-family: 'Russo One', system-ui, -apple-system, Arial, sans-serif;
}

.services-head{
  max-width: 900px; margin: 0 auto 28px; text-align: center;
}
.services-head h2{
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 8px; letter-spacing:.3px;
}
.services-head p{
  margin: 0 auto; color: var(--muted);
  max-width: 680px; line-height: 1.7;
}

.services-grid{
  max-width: 1200px; margin: 28px auto 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.service-card {
  --bg: #1b1414;
  --glow: rgba(187,235,0,0.38);

  position: relative;
  padding: 18px 16px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform .55s cubic-bezier(.25,.8,.45,1),
    box-shadow .55s ease,
    border-color .35s ease;
}

/* Эффект дыхания / живой материал */
.service-card:hover {
  transform: scale(1.05);
  border-color: rgba(187,235,0,0.15);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    0 0 45px rgba(187,235,0,0.25);
}

/* Световое дыхание */
.service-card::after {
  content: "";
  position: absolute; inset: -60px;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--glow) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1.3,.32,1);
}

/* Активация света при наведении */
.service-card.hovered::after {
  opacity: 1;
  transform: scale(1.6);
}


.svc-icon{
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-grid; place-items: center;
  color: var(--text);
  background: radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateZ(0);
  transition: transform .35s ease, color .2s ease, border-color .2s ease;
}
.service-card:hover .svc-icon{
  transform: translateY(-2px) scale(1.05);
  color: var(--accent);
  border-color: rgba(187,235,0,.35);
}

.service-card h3{
  position: relative; z-index: 1;
  margin: 12px 0 6px; font-size: 1.05rem; letter-spacing:.2px;
}
.service-card p{
  position: relative; z-index: 1;
  margin: 0 0 12px; color: var(--muted); line-height: 1.6; font-size: .95rem;
}
.svc-link{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: .95rem; color: #f2c94c;
}
.svc-link::after{
  content: "→";
  transform: translateX(0);
  transition: transform .25s ease;
}
.service-card:hover .svc-link::after{ transform: translateX(3px); }

/* курсорный «блик» — работает и без JS, но с JS будет точнее */
.service-card{ --mx: 50%; --my: 0%; }

/* Адаптив */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
}

.lb__open-project{
  display:block;
  margin:16px auto 0;
  background:linear-gradient(90deg, var(--acc), #6cd7f0);
  color:#04121a;
  font-weight:800;
  font-size:15px;
  padding:12px 24px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(30,198,230,.25);
  transition:transform .2s ease, filter .2s ease;
}
.lb__open-project:hover{
  transform:translateY(-2px);
  filter:saturate(1.2);
}
.work_b {
	display: flex;
  justify-content:center;
  margin-top:15px;
}

:root{
  --bg:#0f1116; --panel:#141925; --ink:#e8eefc; --muted:#9aa6bf; --acc:#1ec6e6;
}
.works{background:#1b1414; padding:48px 0px}
.works-title{font:500 34px/1.2 "Russo One",system-ui; text-align:center; margin:0 0 24px}
.works-grid{
  max-width:1400px; margin:0 auto; display:grid; gap:0px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:992px){
  .works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.project{background:#121827; border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden}
.project .thumb{display:block; overflow:hidden}
.project img{display:block; width:100%; object-fit: cover; height: 500px; transition:transform .35s}
.project:hover img{transform:scale(1.03)}
.project h3{font:500 16px/1.4 "Russo One",system-ui; margin:10px 12px 14px}

/* LIGHTBOX */
.lb{position:fixed; inset:0; display:none; z-index:1000}
.lb[aria-hidden="false"]{display:block}
.lb__overlay{position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(2px)}
.lb__window{
  position:relative; max-width:1200px; margin:40px auto; padding:0 54px;
}
.lb__close{
  position:absolute; right:8px; top:-36px; width:36px; height:36px;
  border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; font-size:22px; cursor:pointer;
}
.lb__viewport{
  overflow:clip; border-radius:16px; background:#0b0f1a; box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.lb__track{
  display:flex; gap:20px; padding:0 10px; /* небольшая защита от тени */
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.lb__slide{
  display:grid; gap:20px; align-items:stretch;
  grid-template-columns:1fr 1fr; /* показываем две фотки в слайде */
  min-width:100%;
  box-sizing:border-box; padding:20px;
}
.lb__slide img{
  width:100%; height:100%; object-fit:cover; border-radius:12px;
  background:#0d1220; border:1px solid rgba(255,255,255,.06)
}
/* На мобильных показываем по одной картинке */
@media (max-width: 767.98px){
  .lb__window{padding:0 44px}
  .lb__slide{grid-template-columns:1fr}
}

.lb__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; font-size:20px; cursor:pointer;
}
.lb__prev{left:0}
.lb__next{right:0}
.lb__nav:hover{background:rgba(0,0,0,.6)}

.lb__dots{display:flex; justify-content:center; gap:10px; margin:14px 0 0}
.lb__dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.35); cursor:pointer
}
.lb__dots button[aria-current="true"]{background:var(--acc); box-shadow:0 0 10px rgba(30,198,230,.65)}



/* ======= FOOTER STYLES ======= */
:root{
  --footer-bg:#081215;
  --footer-text:#e8eefc;
  --footer-muted:#9aa6bf;
  --footer-stroke:#1a2330;
  --footer-accent:#1b1414; /* из твоих дизайн-токенов */
}

.site-footer{
  background: #1b1414;
  color: var(--footer-text);
  position: relative;
  overflow: hidden;
  font-family: 'Russo One', system-ui, -apple-system, Arial, sans-serif;
}

.footer-topline{
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(187,235,0,.7), transparent);
  opacity:.7;
}

.footer-container{
  max-width: 1200px;
  margin-inline: auto;
  padding: 48px 20px 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 28px;
}

.footer-col{min-width: 0;}

.footer-logo img{
  width: 140px;
  display: block;
  transition: transform .25s ease;
}
.footer-logo:hover img{ transform: translateY(-2px); }

.footer-text{
  margin-top: 14px;
  line-height: 1.6;
  color: var(--footer-muted);
  font-size: .95rem;
}

.footer-title{
  font-size: 1rem;
  font-weight: 500;
  letter-spacing:.3px;
  margin: 6px 0 12px;
  color: var(--footer-text);
}

.footer-menu,
.footer-contacts{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-menu a{
  color: var(--footer-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease, transform .2s ease;
  position: relative;
}
.footer-menu a::after{
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:1px;
  background: var(--footer-accent);
  transition: width .25s ease;
}
.footer-menu a:hover{
  color: var(--footer-text);
  transform: translateX(2px);
}
.footer-menu a:hover::after{ width:100%; }

.footer-contacts .ico{
  width: 20px;
  display: inline-block;
  opacity:.9;
}
.footer-contacts a{
  color: var(--footer-text);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .2s ease, color .2s ease;
}
.footer-contacts a:hover{
  color: var(--footer-accent);
  border-color: var(--footer-accent);
}

.footer-social{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.social-link{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border:1px solid var(--footer-stroke);
  border-radius: 10px;
  color: var(--footer-text);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.social-link:hover{
  transform: translateY(-2px);
  border-color: var(--footer-accent);
  color: var(--footer-accent);
}

.footer-cta{
  margin-top: 10px;
  display: inline-flex;
  align-items:center; justify-content:center;
  height: 44px; padding: 0 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #cfff42, var(--footer-accent));
  color: #0b120e;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(187,235,0,.15);
  transition: transform .15s ease, box-shadow .2s ease;
}
.footer-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(187,235,0,.22);
}

.footer-bottom{
  border-top: 1px solid var(--footer-stroke);
  margin-top: 24px;
  padding: 14px 20px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  color: var(--footer-muted);
  font-size: .95rem;
}

.footer-mini-menu{
  display:flex; align-items:center; gap:10px;
}
.footer-mini-menu a{
  color: var(--footer-muted);
  text-decoration:none;
  transition: color .2s ease;
}
.footer-mini-menu a:hover{ color: var(--footer-text); }
.footer-mini-menu .dot{ opacity:.5; }


.footer-contacts{
  display:grid;
  gap:12px;
}

.footer-contacts li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:var(--footer-muted);
}

/* ICON WRAPPER */
.footer-contacts .ico{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;

  border-radius:12px;
  background:
    radial-gradient(80% 80% at 30% 20%,
      rgba(255,255,255,.18),
      rgba(255,255,255,.04)
    );

  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 6px 16px rgba(0,0,0,.35);

  color:var(--footer-text);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* SVG */
.footer-contacts .ico svg{
  width:25px;
  height:25px;
  display:block;
}

/* LINKS */
.footer-contacts a{
  color:var(--footer-text);
  text-decoration:none;
  transition:color .25s ease;
}

/* HOVER */
.footer-contacts li:hover .ico{
  transform:translateY(-2px);
  border-color:#f2c94c;
  box-shadow:
    0 0 0 2px rgba(242,201,76,.35),
    0 12px 26px rgba(0,0,0,.45);
  color:#f2c94c;
}

.footer-contacts li:hover a{
  color:#f2c94c;
}

/* TELEGRAM SPECIAL */
.footer-contacts .ico--tg{
  background:
    radial-gradient(80% 80% at 30% 20%,
      rgba(76,181,255,.35),
      rgba(76,181,255,.08)
    );
}

.footer-contacts li:hover .ico--tg{
  border-color:#4cb5ff;
  color:#4cb5ff;
  box-shadow:
    0 0 0 2px rgba(76,181,255,.35),
    0 12px 26px rgba(0,0,0,.45);
}

/* Адаптив */
@media (max-width: 1024px){
  .footer-container{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-container{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items:flex-start; }
}

    /* ===== PRICE PAGE (FIXED UNDER YOUR DESIGN) ===== */

.pricepage{
  background:#2b201f;
  padding:64px 0;
}

.pricepage__wrap {
    max-width:1180px;
}
.pricepage__title{
  text-align:center;
  font-size:34px;
  margin-bottom:36px;
  color:#fff;
}

/* GRID */
.pricepage__grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:40px;
}
@media(max-width:960px){
  .pricepage__grid{grid-template-columns:1fr}
}

/* CARD */
.pricepage__card{
  background:#1b1414;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
}

/* CARD HEAD */
.pricepage__card-head{
  background:#2b201f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.pricepage__label{
  font-size:16px;
  color:#e8eefc;
}

.pricepage__price{
  font-size:32px;
  color:#d4a017;
}
.pricepage__price small{
  font-size:14px;
  color:#9aa6bf;
  margin-right:6px;
}

/* LIST */
.pricepage__list{
  list-style:none;
  padding:0;
  margin:0 0 16px;
}
.pricepage__list li{
  position:relative;
  padding-left:28px;
  margin:10px 0;
  color:#e8eefc;
}
.pricepage__list li::before{
  content:"";
  position:absolute;
  left:0; top:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:#bbeb00;
  box-shadow:0 0 10px rgba(187,235,0,.6);
}

/* NOTE */
.pricepage__note{
  color:#9aa6bf;
  font-size:14px;
  line-height:1.6;
  margin-bottom:18px;
}

/* BUTTON */
.pricepage__btn{
  margin-top:auto;
  display:block;
  text-align:center;
  padding:14px;
  border-radius:12px;
  background:#d4a017;
  color:#1b1414;
  font-weight:500;
  transition:.25s;
}
.pricepage__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(212,160,23,.35);
}

/* RIGHT TEXT */
.pricepage__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pricepage__text p{
  color:#9aa6bf;
  font-size:20px;
  line-height:2;
}

.pricepage__link{
  display:inline-block;
  margin-top:12px;
  color:#d4a017;
  font-size:16px;
}
.pricepage__link:hover{
  text-decoration:underline;
}

.contacts {
  padding: 80px 0;
  background: #2b201f;
}



/* Заголовок */
.contacts__title {
  font-family: 'Russo One', sans-serif;
  font-size: 44px;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.contacts__subtitle {
  text-align: center;
  color: #9aa6bf;
  margin-bottom: 60px;
  font-size: 16px;
}

/* Сетка */
.contacts-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: flex-start;
  gap: 70px;
}

/* Инфо блок */
.contacts-info {
  color: #e8eefc;
  font-size: 17px;
  line-height: 1.7;
}

.contacts-info h3 {
  font-family: 'Russo One', sans-serif;
  font-size: 22px;
  margin-bottom: 15px;
  color: #d4a017;
}

.contacts-info a {
  color: #d4a017;
  text-decoration: none;
  transition: .25s;
}
.contacts-info a:hover {
  text-shadow: 0 0 8px rgba(212,160,23,0.6);
}

.contacts-info hr {
  border: none;
  border-top: 1px solid #232a3a;
  margin: 30px 0;
}

/* Форма */
.contacts-form {
  background: #0f1116;
  padding: 35px;
  border: 1px solid #232a3a;
}

.contacts-form input,
.contacts-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #232a3a;
  background: #0f1116;
  color: #e8eefc;
  border-radius: 10px;
  font-size: 16px;
  margin-bottom: 18px;
  outline: none;
}

.contacts-form input::placeholder,
.contacts-form textarea::placeholder {
  color: #59647d;
}

.contacts-form input:focus,
.contacts-form textarea:focus {
  border-color: #d4a017;
}

/* Кнопка */
.contacts-form button {
  width: 100%;
  padding: 16px;
  background: #d4a017;
  color: #000;
  font-family: 'Russo One', sans-serif;
  font-size: 18px;
  border: none;
  border-radius:10px;
  cursor: pointer;
  transition: .3s;
}
.contacts-form button:hover {
  background: #e3b41d;
  box-shadow: 0 0 18px rgba(212,160,23,0.55);
}

/* Карта */
.contacts-map {
  margin-top: 70px;
  border: 1px solid #232a3a;
}

/* Планшеты */
@media(max-width: 992px){
  .contacts-grid {
    grid-template-columns: 1fr;
  }
  .contacts-form {
    margin-top: 20px;
  }
}

/* Телефон */
@media(max-width: 576px){
  .contacts__title {
    font-size: 34px;
  }
  .contacts-form {
    padding: 25px;
  }
}