/* ============================================================
   TRADETON — OBSIDIAN final
   Общие стили: токены, типографика, кнопки, нав, виджеты
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root{
  /* COLOR */
  --jet:#000;
  --void:#070708;
  --obs:#0D0D0F;
  --obs-2:#16161A;
  --carbon:#1F1F24;
  --carbon-2:#2A2A30;
  --bone:#FAFAF7;
  --bone-d:#E5E5E0;
  --smoke:#9A9A9F;
  --smoke-d:#5C5C61;
  --smoke-x:#36363A;
  --hi:#FFD300;
  --hi-d:#E5BD00;
  --hi-2:#FFA800;
  --hi-glow:rgba(255,211,0,.45);
  --hi-glow-soft:rgba(255,211,0,.15);
  --line:rgba(250,250,247,.08);
  --line-2:rgba(250,250,247,.04);

  /* TYPE */
  --font-sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono","Consolas",monospace;

  /* SPACING (fluid) */
  --space-1:clamp(4px,.5vw,6px);
  --space-2:clamp(8px,1vw,12px);
  --space-3:clamp(12px,1.5vw,18px);
  --space-4:clamp(16px,2vw,24px);
  --space-6:clamp(24px,3vw,36px);
  --space-8:clamp(32px,4vw,48px);
  --space-10:clamp(40px,5vw,64px);
  --space-12:clamp(48px,6vw,80px);
  --space-16:clamp(64px,8vw,120px);
  --space-20:clamp(80px,10vw,160px);

  /* TYPE SCALE (fluid clamp) — tamed: умеренные размеры, не «на весь экран».
     Наклоны vw уменьшены, потолки снижены — чтобы на ноутбуках <FullHD
     заголовки не переполняли экран и ничего не срезалось. */
  --t-12:clamp(11px,.72vw,12px);
  --t-13:clamp(12px,.8vw,13px);
  --t-14:clamp(12.5px,.85vw,14px);
  --t-15:clamp(13px,.9vw,15px);
  --t-16:clamp(14px,.95vw,16px);
  --t-18:clamp(15px,1.05vw,17px);
  --t-22:clamp(16px,1.2vw,19px);
  --t-26:clamp(17px,1.35vw,21px);
  --t-32:clamp(20px,1.7vw,26px);
  --t-40:clamp(23px,2.1vw,31px);
  --t-56:clamp(27px,3vw,42px);
  --t-72:clamp(31px,3.8vw,52px);
  --t-96:clamp(34px,4.6vw,62px);
  --t-hero:clamp(38px,6vw,84px);

  /* RADIUS */
  --r-0:0;
  --r-2:2px;
  --r-4:4px;
}

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--jet);
  color:var(--bone);
  font-family:var(--font-sans);
  font-size:var(--t-16);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,picture,video,svg{display:block;max-width:100%}
button{border:0;background:none;cursor:pointer;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--hi);color:var(--jet)}

/* UTILITIES */
.mono{font-family:var(--font-mono)}
.hide-mobile{display:initial}
.hide-desktop{display:none}
@media(max-width:880px){
  .hide-mobile{display:none!important}
  .hide-desktop{display:initial}
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(7,7,8,.65);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:padding .35s cubic-bezier(.2,.8,.2,1),background .35s;
}
.site-header.scrolled{
  background:rgba(7,7,8,.9);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  padding:var(--space-3) var(--space-6);
  max-width:1680px;
  margin:0 auto;
}
.site-header.scrolled .nav-wrap{padding-top:var(--space-2);padding-bottom:var(--space-2)}

.logo{
  display:flex;align-items:center;gap:12px;
  font-weight:700;
  font-size:var(--t-22);
  letter-spacing:.04em;
  flex-shrink:0;
}
.logo .mark{
  display:block;
  width:14px;height:14px;
  background:var(--hi);
  transform:rotate(45deg);
  box-shadow:0 0 18px var(--hi-glow);
  position:relative;
}
.logo:hover .mark{animation:pulseMark 1.2s infinite}
@keyframes pulseMark{50%{box-shadow:0 0 28px var(--hi-glow);transform:rotate(45deg) scale(1.15)}}

.nav-menu{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,28px);
}
.nav-menu a{
  position:relative;
  padding:8px 0;
  font-size:var(--t-13);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--smoke);
  transition:color .25s;
}
.nav-menu a::after{
  content:"";
  position:absolute;
  left:50%;right:50%;
  bottom:-2px;
  height:2px;
  background:var(--hi);
  transition:left .3s cubic-bezier(.2,.8,.2,1),right .3s cubic-bezier(.2,.8,.2,1);
}
.nav-menu a:hover{color:var(--bone)}
.nav-menu a:hover::after,.nav-menu a.active::after{left:0;right:0}
.nav-menu a.active{color:var(--hi)}

.nav-right{display:flex;align-items:center;gap:var(--space-3)}

/* LANG SWITCHER */
.lang{
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--r-2);
  overflow:hidden;
  font-family:var(--font-mono);
}
.lang button{
  padding:7px 10px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--smoke);
  transition:.2s;
  background:transparent;
}
.lang button:hover{color:var(--bone)}
.lang button.active{background:var(--hi);color:var(--jet);font-weight:700}

/* BURGER */
.burger{
  display:none;
  width:32px;height:32px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  cursor:pointer;
  position:relative;
}
.burger span{
  display:block;
  width:22px;height:2px;
  background:var(--bone);
  transition:.3s cubic-bezier(.4,0,.2,1);
  transform-origin:center;
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* MOBILE MENU */
.mobile-menu{
  position:fixed;
  top:0;right:0;
  width:min(380px,90vw);
  height:100vh;
  height:100svh;
  background:var(--obs);
  z-index:90;
  transform:translateX(100%);
  will-change:transform;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  padding:var(--space-12) var(--space-6) var(--space-6);
  overflow-y:auto;
  border-left:1px solid var(--line);
}
.mobile-menu.open{transform:translateX(0);box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.mobile-menu a{
  padding:14px 0;
  font-size:var(--t-22);
  font-weight:500;
  letter-spacing:.04em;
  border-bottom:1px solid var(--line);
  color:var(--bone);
  transition:color .2s,padding .2s;
}
.mobile-menu a:hover{color:var(--hi);padding-left:8px}
.mobile-menu .mob-lang{margin-top:var(--space-6);display:flex;gap:8px}
.mobile-menu .mob-lang button{
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--smoke);
  border:1px solid var(--line);
  border-radius:var(--r-2);
  transition:.2s;
}
.mobile-menu .mob-lang button.active{background:var(--hi);color:var(--jet);border-color:var(--hi);font-weight:700}
.mobile-menu .mob-cta{
  margin-top:auto;
  padding-top:var(--space-6);
}
.mob-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  z-index:85;
  opacity:0;pointer-events:none;
  transition:opacity .35s;
}
.mob-backdrop.open{opacity:1;pointer-events:auto}

@media(max-width:980px){
  .nav-menu{display:none}
  .burger{display:flex}
  .lang.desktop-lang{display:none}
}

/* ============================================================
   BUTTONS — PREMIUM
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:var(--t-14);
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:var(--r-0);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,color .35s,border-color .35s,background .35s;
  text-align:center;
  user-select:none;
}
.btn .arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow{transform:translateX(6px)}

/* primary — yellow filled */
.btn-primary{
  padding:18px 36px;
  background:var(--hi);
  color:var(--jet);
  box-shadow:0 10px 28px var(--hi-glow-soft),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  transform:translateX(-150%) skewX(-20deg);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px var(--hi-glow),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover::before{transform:translateX(150%) skewX(-20deg)}
.btn-primary:active{transform:translateY(-1px);transition:transform .1s}

/* secondary — outline */
.btn-secondary{
  padding:17px 36px;
  background:transparent;
  color:var(--bone);
  border:1.5px solid rgba(255,255,255,.25);
}
.btn-secondary::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hi);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s cubic-bezier(.7,0,.3,1);
}
.btn-secondary:hover{
  color:var(--jet);
  border-color:var(--hi);
  box-shadow:0 10px 30px var(--hi-glow-soft);
}
.btn-secondary:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* small variant */
.btn-sm{padding:12px 22px;font-size:var(--t-12);gap:10px}

/* mobile fullwidth on small — но НЕ для hero (переопределяется выше) */
@media(max-width:420px){
  .btn-group:not(.hero-cta){display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .btn-group:not(.hero-cta) .btn{width:100%}
}

/* ============================================================
   COMMON LAYOUT
   ============================================================ */
.container{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:0 var(--space-6);
}
.section{
  padding:var(--space-20) 0;
}
.section-tight{padding:var(--space-12) 0}

/* SECTION HEAD */
.s-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-6);
  align-items:flex-end;
  margin-bottom:var(--space-12);
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--line);
}
.s-head .s-num{
  font-family:var(--font-mono);
  font-size:var(--t-13);
  color:var(--hi);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
}
.s-head .s-num .s-slug{color:var(--smoke-d)}
.s-head h2{
  font-weight:500;
  font-size:var(--t-72);
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.s-head h2 .accent{color:var(--hi);font-style:italic;font-weight:600}
.s-head .s-link{
  font-family:var(--font-mono);
  font-size:var(--t-13);
  color:var(--bone);
  letter-spacing:.16em;
  text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:2px solid var(--hi);
  transition:color .2s;
}
.s-head .s-link:hover{color:var(--hi)}
@media(max-width:760px){
  .s-head{grid-template-columns:minmax(0,1fr);gap:14px;align-items:flex-start}
  .s-head .s-link{justify-self:flex-start}
}

/* ============================================================
   SCROLL TO TOP — bottom-left
   ============================================================ */
.scroll-top{
  position:fixed;
  bottom:24px;left:24px;
  z-index:60;
  width:52px;height:52px;
  background:var(--hi);
  color:var(--jet);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(20px) scale(.8);
  transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
  box-shadow:0 10px 30px var(--hi-glow-soft);
  border-radius:var(--r-2);
}
.scroll-top.visible{opacity:1;transform:translateY(0) scale(1)}
.scroll-top:hover{box-shadow:0 16px 40px var(--hi-glow);transform:translateY(-3px) scale(1)}
.scroll-top svg{width:20px;height:20px;stroke-width:2.5}

/* AI helper (placeholder bottom-right) */
.ai-helper{
  position:fixed;
  bottom:24px;right:24px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 20px 13px 16px;
  background:var(--obs-2);
  border:1px solid var(--line);
  color:var(--bone);
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  transition:.3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  border-radius:30px;
}
.ai-helper:hover{
  border-color:var(--hi);
  box-shadow:0 14px 40px var(--hi-glow-soft);
  transform:translateY(-2px);
}
.ai-helper .ai-pulse{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  background:var(--hi);
  border-radius:50%;
  color:var(--jet);
  font-weight:700;
  font-size:14px;
  position:relative;
}
.ai-helper .ai-pulse::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--hi);
  animation:aiPulse 2s infinite;
}
@keyframes aiPulse{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.6);opacity:0}
}
@media(max-width:600px){
  .ai-helper{padding:11px 16px 11px 14px;font-size:12px}
  .ai-helper .ai-text{display:none}
  .scroll-top{width:46px;height:46px;bottom:18px;left:18px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--void);
  padding:var(--space-16) 0 var(--space-6);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-10);
  margin-bottom:var(--space-12);
}
.footer-c h4{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--hi);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:var(--space-4);
}
.footer-c a{
  display:block;
  margin-bottom:10px;
  color:var(--smoke);
  font-size:var(--t-14);
  transition:color .2s,padding-left .2s;
}
.footer-c a:hover{color:var(--bone);padding-left:4px}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:var(--t-22);
  letter-spacing:.04em;
  margin-bottom:14px;
}
.footer-brand .mark{
  width:14px;height:14px;
  background:var(--hi);
  transform:rotate(45deg);
}
.footer-desc{
  color:var(--smoke);
  font-size:var(--t-14);
  max-width:340px;
  line-height:1.6;
  margin-bottom:18px;
}
.footer-bottom{
  padding-top:var(--space-6);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--smoke-d);
  letter-spacing:.12em;
  text-transform:uppercase;
}
@media(max-width:880px){
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6)}
  .footer-grid .footer-c:first-child{grid-column:1/-1}
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   MOBILE FINE-TUNING (≤760 / ≤480 / ≤360)
   ============================================================ */
@media(max-width:760px){
  /* hero — снижаем минимум, чтобы длинные слова не переполняли */
  :root{
    --t-hero: clamp(42px, 11vw, 110px);
    --t-96:   clamp(38px, 9vw, 64px);
    --t-72:   clamp(32px, 7.5vw, 56px);
    --t-56:   clamp(28px, 6.5vw, 44px);
    --t-40:   clamp(24px, 5vw, 36px);
    --t-32:   clamp(22px, 4.5vw, 30px);
  }
  .nav-wrap{padding:12px 16px}
  .logo{font-size:18px;letter-spacing:.32em;gap:10px}
  .logo .mark{width:11px;height:11px}
}
@media(max-width:480px){
  :root{
    --t-hero: clamp(38px, 12vw, 80px);
    --t-96:   clamp(34px, 10vw, 52px);
    --t-72:   clamp(28px, 8.5vw, 44px);
  }
  .nav-wrap{padding:10px 14px}
  .logo{font-size:16px;letter-spacing:.28em}
  .logo .mark{width:10px;height:10px}
  .nav-r{gap:8px}
  /* CTA "Запрос КП" уже скрыт через .hide-mobile (≤860) */
  /* Контент-padding минимум */
  .container{padding:0 14px}
  .footer-grid{gap:24px}
  /* AI helper + scroll-top кнопки — компакт */
  .ai-helper{padding:10px 14px;font-size:11px;bottom:14px;right:14px}
  .ai-helper .ai-text{display:none}
  .scroll-top{width:42px;height:42px;bottom:14px;left:14px}
  /* Hero-meta на телефоне в столбик */
  .hero-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-meta .left{flex-direction:column;align-items:flex-start;gap:6px}
}
@media(max-width:360px){
  :root{ --t-hero: clamp(34px, 13vw, 68px); }
  .logo{font-size:14px;letter-spacing:.22em}
  .nav-wrap{padding:10px 12px}
  .container{padding:0 12px}
}