/* ============================================================
   АРГАМАК — дизайн-токены
   ============================================================ */
:root{
  /* палитра */
  --bg:        #161515;   /* фирменный тёплый чёрный */
  --surface:   #302f2f;   /* графит */
  --card:      #302f2f;
  --card-hover:#341d16;
  --line:      #6a6868;   /* границы на тёмной поверхности */
  --text:      #fff9f9;   /* фирменный белый */
  --muted:     #a3a1a1;   /* второстепенный текст */
  --accent:    #fc4500;   /* Primary Orange из гайда */
  --accent-soft:rgba(252,69,0,.12);
  --on-accent: #000000;   /* текст на оранжевом — чёрный */

  /* шкала отступов (4/8) */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px;

  /* радиусы */
  --r-sm:8px; --r:14px; --r-lg:20px;

  /* шрифты */
  --font-main:"Onest",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* типографическая шкала */
  --fs-h1:clamp(34px,5.2vw,68px);
  --fs-h2:clamp(27px,3.6vw,46px);
  --fs-lead:clamp(16px,1.6vw,19px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-mono:13px;

  --header-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   База
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s3));
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-main);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{max-width:100%;display:block}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,48px);
}

.accent{color:var(--accent)}

/* ============================================================
   Кнопки
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  min-height:44px;
  padding:10px 22px;
  border-radius:2px;
  border:1px solid transparent;
  font:600 15px/1 var(--font-main);
  cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease);
  white-space:nowrap;
}
.btn--lg{min-height:52px;padding:14px 30px;font-size:16px}
.btn--primary{
  background:var(--accent);
  color:var(--on-accent);
}
.btn--primary:hover{background:#ff6533}
.btn--primary:active{background:#eb4000}
.btn--ghost{
  border-color:var(--line);
  color:var(--text);
}
.btn--ghost:hover{border-color:var(--muted);background:rgba(217,213,208,.04)}

/* ============================================================
   Шапка
   ============================================================ */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.header.is-scrolled{border-bottom-color:var(--line)}

.header__inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:var(--s5);
}

/* Свитчер логотипа: активный вариант выбирается атрибутом data-logo на <body> */
[data-logo="v1"] .logo-v2,[data-logo="v1"] .logo-v3{display:none}
[data-logo="v2"] .logo-v1,[data-logo="v2"] .logo-v3{display:none}
[data-logo="v3"] .logo-v1,[data-logo="v3"] .logo-v2{display:none}

.logo-svg{
  width:auto;
  fill:var(--text);
  transition:fill .25s var(--ease);
}
.logo-official{
  display:block;
  width:auto;
  height:clamp(26px,2.8vw,34px);
  max-width:none;
  transition:opacity .25s var(--ease);
}
.header__logo:hover .logo-official{opacity:.82}
.logo-svg.logo-v1{height:clamp(38px,3.6vw,48px);aspect-ratio:713/121}
.logo-svg.logo-v2{height:clamp(26px,2.6vw,33px);aspect-ratio:662/68}
.logo-svg.logo-v3{height:clamp(26px,2.6vw,33px);aspect-ratio:599/73}
.header__logo:hover .logo-svg{fill:#fff}

.header__nav{
  display:flex;
  align-items:center;
  gap:clamp(var(--s3),3vw,var(--s5));
  margin-left:auto;
}
.header__link{
  font:500 14px/1 var(--font-main);
  color:var(--muted);
  padding:var(--s2) 0;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.header__link:hover{color:var(--text)}

.header__cta{margin-left:var(--s4)}
.header__cta-mobile{display:none}

/* Переключатель языка RU/EN */
.lang{
  display:inline-flex;
  margin-left:var(--s4);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  flex-shrink:0;
}
.lang__btn{
  min-width:40px;
  min-height:30px;
  padding:0 10px;
  border:none;
  background:none;
  border-radius:999px;
  font:600 12px/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--muted);
  cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.lang__btn:hover{color:var(--text)}
.lang__btn.is-active{
  background:var(--accent);
  color:var(--on-accent);
}

.header__burger{
  display:none;
  width:44px;height:44px;
  margin-left:auto;
  background:none;border:none;cursor:pointer;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:6px;
}
.header__burger span{
  width:22px;height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.header__burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.header__burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  display:flex;
  min-height:100vh;
  min-height:100dvh;
  padding-top:var(--header-h);
  overflow:hidden;
}

/* живой фон: медленно плывущие оранжевые сполохи */
.hero__glow{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}
.hero__blob--1{
  width:58vw;
  height:58vw;
  left:-16vw;
  top:-18vw;
  background:radial-gradient(circle at 35% 35%, rgba(220,108,38,.50), transparent 65%);
  animation:blob-drift-a 19s ease-in-out infinite;
}
.hero__blob--2{
  width:52vw;
  height:52vw;
  right:-14vw;
  bottom:-26vw;
  background:radial-gradient(circle at 60% 40%, rgba(146,64,16,.55), transparent 62%);
  animation:blob-drift-b 24s ease-in-out infinite;
}
.hero__blob--3{
  width:30vw;
  height:30vw;
  right:6vw;
  top:12vh;
  background:radial-gradient(circle at 50% 50%, rgba(240,149,90,.22), transparent 60%);
  animation:blob-drift-c 16s ease-in-out infinite;
}
@keyframes blob-drift-a{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(10vw,7vh) scale(1.14)}
}
@keyframes blob-drift-b{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-9vw,-9vh) scale(1.10)}
}
@keyframes blob-drift-c{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-6vw,10vh) scale(.88)}
}

/* фоновое видео: перекрашено в оранжевый CSS-фильтром */
.hero__video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  filter:grayscale(1) sepia(1) hue-rotate(-12deg) saturate(2.4) brightness(.58) contrast(1.06);
}
.hero__video.is-hidden{display:none}

/* виньетка поверх видео: читаемость текста + переход в следующую секцию */
.hero__shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,20,19,.55) 0%, rgba(18,20,19,.25) 38%, rgba(18,20,19,.35) 70%, var(--bg) 98%),
    radial-gradient(ellipse 70% 60% at 22% 55%, rgba(18,20,19,.42), transparent 70%);
}

/* переливающийся градиент на ключевом слове заголовка */
.shine{color:var(--accent)}

/* плёночное зерно поверх сполохов */
.hero__grain{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* тонкая инженерная сетка на фоне */
.hero__grid{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.20;
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 60% 10%, #000 20%, transparent 72%);
  mask-image:radial-gradient(ellipse 90% 75% at 60% 10%, #000 20%, transparent 72%);
  pointer-events:none;
}

.hero__inner{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  width:100%;
}

/* glass-пилюля с бейджем */
.hero__pill{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  align-self:flex-start;
  margin-top:auto;
  margin-bottom:var(--s4);
  padding:6px 16px 6px 6px;
  border-radius:999px;
  border:1px solid rgba(220,108,38,.30);
  background:rgba(220,108,38,.10);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12); /* liquid-glass кромка */
  font:500 13px/1.4 var(--font-mono);
  letter-spacing:.03em;
  color:var(--text);
}
.hero__pill-badge{
  flex-shrink:0;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:999px;
  padding:6px 11px;
  font:700 11px/1 var(--font-main);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero__title{
  font-size:var(--fs-h1);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  max-width:17ch;
  margin-bottom:var(--s4);
}

.hero__sub{
  font-size:var(--fs-lead);
  color:var(--muted);
  max-width:52ch;
  margin-bottom:var(--s5);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-bottom:var(--s5);
}

.hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s4);
  border-top:1px solid var(--line);
  padding-top:var(--s4);
  margin-top:auto;
  padding-bottom:clamp(var(--s4),4vh,var(--s5));
}
.stat__value{
  font:700 clamp(26px,3vw,38px)/1.1 var(--font-main);
  letter-spacing:-.01em;
  color:var(--text);
}
.stat__name{
  font-size:var(--fs-small);
  color:var(--muted);
  margin-top:var(--s1);
}

/* ============================================================
   Бегущая строка клиентов
   ============================================================ */
.marquee{
  border-block:1px solid var(--line);
  padding-block:var(--s3);
  overflow:hidden;
  position:relative;
}
.marquee::before,.marquee::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:clamp(40px,10vw,160px);
  z-index:1;
  pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}

.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 46s linear infinite;
}
.marquee__group{
  display:flex;
  align-items:center;
  gap:var(--s4);
  padding-right:var(--s4);
  font:500 var(--fs-small)/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--muted);
  white-space:nowrap;
}
.dot{
  width:4px;height:4px;
  border-radius:50%;
  background:var(--accent);
  opacity:.7;
  flex-shrink:0;
}
@keyframes marquee{
  to{transform:translateX(-50%)}
}

/* ============================================================
   Секции — общее
   ============================================================ */
.section{padding-block:clamp(var(--s6),12vh,var(--s7))}
.section--surface{background:var(--surface)}

.section__head{margin-bottom:clamp(var(--s5),7vh,var(--s6))}

.section__label{
  font:500 var(--fs-mono)/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s3);
}
.section__title{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
}

/* ============================================================
   Услуги
   ============================================================ */
.services{border-top:1px solid var(--line)}

.service{
  display:grid;
  grid-template-columns:64px 1fr auto;
  align-items:center;
  gap:var(--s4);
  padding-block:clamp(var(--s3),3.5vh,28px);
  border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),background .3s var(--ease);
}
.service:hover{
  background:linear-gradient(90deg,var(--accent-soft),transparent 60%);
  padding-left:var(--s3);
}

.service__num{
  font:500 var(--fs-mono)/1 var(--font-mono);
  color:var(--muted);
  transition:color .3s var(--ease);
}
.service:hover .service__num{color:var(--accent)}

.service__name{
  display:block;
  font-size:clamp(17px,2vw,21px);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:var(--s1);
}
.service__desc{
  display:block;
  font-size:var(--fs-small);
  color:var(--muted);
  max-width:64ch;
}

.service__arrow{
  font-size:20px;
  color:var(--muted);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .3s var(--ease);
}
.service:hover .service__arrow{
  opacity:1;
  transform:none;
  color:var(--accent);
}

/* ============================================================
   Орбита услуг (десктоп): текст вращается вокруг сферы
   ============================================================ */
.services--orbit > .container{display:none}

.orbit{
  --orbit-r:clamp(460px,50vw,760px);   /* радиус, на котором висит текст */
  --orbit-cx:-64px;                    /* центр колеса за левым краем */
  --sphere-d:clamp(380px,42vw,600px);
  position:relative;
  height:560vh;
}
.orbit__sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
.orbit__head{
  position:absolute;
  z-index:3;
  top:calc(var(--header-h) + var(--s4));
  left:0;
  right:0;
  pointer-events:none;
}
.orbit__scene{position:absolute;inset:0}

.orbit__sphere{
  position:absolute;
  left:var(--orbit-cx);
  top:50%;
  width:var(--sphere-d);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 31% 28%,
    #f49c55 0%, var(--accent) 30%, #83400f 60%, #1d0e04 100%);
  box-shadow:
    0 0 120px rgba(220,108,38,.25),
    0 0 420px rgba(220,108,38,.10);
}
.orbit__ring{
  position:absolute;
  left:var(--orbit-cx);
  top:50%;
  transform:translate(-50%,-50%);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
}
.orbit__ring--inner{
  width:calc(var(--sphere-d) + 140px);
  border:1px dotted var(--muted);
  opacity:.35;
}
.orbit__ring--mid{
  width:calc((var(--orbit-r) - 56px) * 2);
  border:1px dashed var(--line);
}
.orbit__ring--outer{
  width:calc(var(--orbit-r) * 2 + 460px);
  border:1px dotted var(--line);
  opacity:.6;
}

.orbit__wheel{
  position:absolute;
  left:var(--orbit-cx);
  top:50%;
  width:0;
  height:0;
  will-change:transform;
}
.orbit__item{
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  width:min(560px,46vw);
  display:block;
}
.orbit__num{
  display:block;
  font:500 var(--fs-mono)/1 var(--font-mono);
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:var(--s2);
  transition:color .3s var(--ease);
}
.orbit__name{
  display:block;
  font-size:clamp(19px,1.9vw,26px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  transition:color .3s var(--ease);
}
.orbit__desc{
  display:block;
  margin-top:var(--s2);
  font-size:15px;
  color:var(--muted);
  max-width:52ch;
}
.orbit__item.is-active .orbit__num{color:var(--accent)}
.orbit__item.is-active .orbit__name{color:#fff}

.orbit__marker{
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  width:7px;
  height:7px;
  margin:-4px 0 0 -4px;
  border:1px solid var(--muted);
  opacity:.45;
}

/* ============================================================
   О компании: sticky-заголовок слева, ценности справа
   ============================================================ */
.why{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(var(--s5),8vw,120px);
  align-items:start;
}
.why__left{
  position:sticky;
  top:calc(var(--header-h) + var(--s5));
}
.why__lead{
  margin-top:var(--s4);
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:38ch;
}

.why__item{
  padding-block:clamp(var(--s5),9vh,88px);
  border-bottom:1px solid var(--line);
}
.why__item:first-child{padding-top:var(--s2)}
.why__item:last-child{border-bottom:0}

.why__icon{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--accent);
  margin-bottom:var(--s4);
}
.why__icon svg{width:22px;height:22px}

.why__name{
  font-size:clamp(19px,1.8vw,24px);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:var(--s2);
}
.why__text{
  font-size:15px;
  color:var(--muted);
  max-width:54ch;
}

.ranks-row{
  margin-top:clamp(var(--s6),10vh,var(--s7));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
}
.rank{
  display:grid;
  gap:var(--s2);
  align-content:start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--s4);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.rank:hover{border-color:var(--accent);transform:translateY(-2px)}
.rank__place{
  font:800 clamp(24px,2.6vw,32px)/1 var(--font-main);
  letter-spacing:-.01em;
  color:var(--accent);
}
.rank__name{font-size:var(--fs-small);color:var(--text)}
.rank__year{
  font:500 var(--fs-mono)/1 var(--font-mono);
  color:var(--muted);
}
.rank--awards .rank__place{color:var(--text)}

/* ============================================================
   Проекты: колода карточек, тасуются как на joinspread.app
   ============================================================ */
.proj{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(var(--s5),7vw,110px);
  align-items:center;
}
.proj .section__title{font-size:clamp(26px,2.7vw,38px)}
.proj__lead{
  margin-top:var(--s4);
  margin-bottom:var(--s5);
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:40ch;
}

.deck{
  position:relative;
  height:clamp(420px,54vh,500px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.deck-card{
  position:absolute;
  inset:auto 0 0 0;
  height:calc(100% - 66px); /* сверху место для «хвостов» колоды */
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(var(--s4),3vw,var(--s5));
  transition:transform .65s var(--ease),opacity .65s var(--ease);
  will-change:transform,opacity;
}
.deck-card.is-leaving{
  transition:transform .45s cubic-bezier(.5,0,.75,.4),opacity .45s cubic-bezier(.5,0,.75,.4);
}

.deck-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:auto;
}
.deck-card__tag{
  font:500 var(--fs-mono)/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.deck-card__brand{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  font:600 12px/1 var(--font-mono);
  letter-spacing:.14em;
  color:var(--muted);
}
.deck-card__mono{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  font:700 12px/1 var(--font-main);
  letter-spacing:0;
  color:var(--text);
}
.deck-card__logo{ /* место под официальный SVG-логотип: заменит .deck-card__brand */
  height:26px;
  width:auto;
  opacity:.85;
  filter:brightness(0) invert(.87);
}

.deck-card__name{
  font-size:clamp(22px,2.4vw,30px);
  font-weight:800;
  letter-spacing:-.01em;
  margin-top:var(--s5);
  margin-bottom:var(--s2);
}
.deck-card__desc{
  font-size:15px;
  color:var(--muted);
  max-width:44ch;
}

.deck-card__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4);
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--line);
}
.mstat__v{
  display:block;
  font:700 clamp(22px,2.2vw,30px)/1.1 var(--font-main);
  letter-spacing:-.01em;
  color:var(--accent);
}
.mstat__l{
  display:block;
  margin-top:var(--s1);
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

/* деградация: без анимаций показываем все карточки списком */
.deck--static{height:auto;cursor:default;display:grid;gap:var(--s3)}
.deck--static .deck-card{position:static;height:auto;transform:none !important;opacity:1 !important}

.industries__label{
  font-size:var(--fs-small);
  color:var(--muted);
  margin-bottom:var(--s3);
}
.industries__list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
}
.industries__list li{
  font:500 13px/1 var(--font-mono);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 16px;
  transition:border-color .25s var(--ease);
}
.industries__list li:hover{border-color:var(--muted)}
.industries__more{color:var(--muted) !important;border-style:dashed !important}

/* ============================================================
   Партнёры: карусель карточек, листается как на zerohash.com
   ============================================================ */
.phead{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--s4) clamp(var(--s5),6vw,var(--s7));
  align-items:end;
  margin-bottom:clamp(var(--s5),7vh,var(--s6));
}
.section__head--flat{margin-bottom:0}
.phead__note{
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:36ch;
  padding-bottom:var(--s1);
}

.pcar__viewport{overflow:hidden}
.pcar__track{
  display:flex;
  gap:var(--s3);
  transition:transform .6s var(--ease);
  will-change:transform;
}

.pcard{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:minmax(240px,340px) 1fr;
  gap:clamp(var(--s4),3.5vw,var(--s6));
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(var(--s4),3vw,var(--s5));
}
.pcard__logo{
  display:grid;
  place-items:center;
  min-height:250px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--s4);
}
.pcard__logo span{
  font:800 clamp(20px,2.2vw,28px)/1.2 var(--font-main);
  letter-spacing:-.01em;
  text-align:center;
}

.pcard__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s4);
  padding-block:var(--s2);
}
.pcard__chip{
  font:500 12px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
}
.pcard__text{
  font-size:clamp(16px,1.7vw,20px);
  line-height:1.6;
  color:var(--text);
  max-width:52ch;
}
.pcard__cta{margin-top:auto}

.pcar__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  margin-top:var(--s4);
}
.pcar__arrow{
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line);
  background:none;
  color:var(--muted);
  font-size:17px;
  cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.pcar__arrow:hover{border-color:var(--accent);color:var(--accent)}

.pcar__dots{display:flex;gap:var(--s1)}
.pcar__dot{
  position:relative;
  width:26px;
  height:20px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.pcar__dot::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:50%;
  height:3px;
  margin-top:-1.5px;
  border-radius:2px;
  background:var(--line);
  transition:background .3s var(--ease);
}
.pcar__dot:hover::after{background:var(--muted)}
.pcar__dot.is-active::after{background:var(--accent)}

.partners__docs{
  margin-top:var(--s5);
  font:400 var(--fs-mono)/1.7 var(--font-mono);
  color:var(--muted);
}

/* ============================================================
   Контакты
   ============================================================ */
#contacts{position:relative;overflow:hidden}

/* тёплое амбиентное свечение за формой */
.contacts__glow{
  position:absolute;
  right:-18vw;
  top:-6vh;
  width:60vw;
  height:60vw;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(220,108,38,.13), transparent 62%);
  pointer-events:none;
  animation:glow-breathe 12s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.09);opacity:1}
}

.contacts{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(var(--s5),6vw,var(--s7));
  align-items:start;
}

/* живой статус: московское время и «на связи» */
.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--s5);
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  font:500 13px/1 var(--font-mono);
  letter-spacing:.03em;
  color:var(--muted);
}
.status__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.status--on .status__dot{animation:dot-pulse 2.2s ease-in-out infinite}
.status--on{color:var(--text)}
.status--off .status__dot{background:var(--muted)}
@keyframes dot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,108,38,.45)}
  50%{box-shadow:0 0 0 6px rgba(220,108,38,0)}
}

/* гигантская вотермарка-логотип, растворяется к футеру */
.contacts__mark{
  position:relative;
  margin-top:clamp(var(--s6),12vh,var(--s7));
}
.contacts__mark-svg{
  display:block;
  width:100%;
  height:auto;
  fill:var(--text);
  opacity:.14;
}
.contacts__mark-svg.logo-v1{aspect-ratio:713/121}
.contacts__mark-svg.logo-v2{aspect-ratio:662/68}
.contacts__mark-svg.logo-v3{aspect-ratio:599/73}
.logo-official--watermark{
  width:100%;
  height:auto;
  opacity:.14;
}

.contacts__lead{
  font-size:var(--fs-lead);
  color:var(--muted);
  margin-block:var(--s4) var(--s5);
  max-width:40ch;
}

.offices{display:grid;gap:var(--s4)}
.office__country{
  font:500 var(--fs-mono)/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s2);
}
.office__line{font-size:15px;color:var(--muted)}
.office__line a{
  color:var(--text);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.office__line a:hover{border-bottom-color:var(--accent)}

.form{
  position:relative;
  overflow:hidden;
  background:rgba(31,35,34,.72); /* --card с прозрачностью: сквозь стекло видно свечение */
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  padding:clamp(var(--s4),3.5vw,var(--s5));
  display:grid;
  gap:var(--s4);
}
/* liquid-glass: световая кромка сверху и снизу */
.form::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,0) 62%,
    rgba(220,108,38,.10) 85%, rgba(220,108,38,.28) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.form__label{
  display:block;
  font:500 12px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s2);
}
.form__input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--text);
  font:400 16px/1.5 var(--font-main);
  padding:13px var(--s3);
  transition:border-color .25s var(--ease);
}
.form__input::placeholder{color:#5b5e5c}
.form__input:hover{border-color:var(--muted)}
.form__input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(220,108,38,.16);
}
.form__input--area{resize:vertical;min-height:110px}
.form__input.is-invalid{border-color:#c0492f}

.form__submit{width:100%}
.btn__arrow{
  display:inline-block;
  margin-left:var(--s2);
  transition:transform .25s var(--ease);
}
.form__submit:hover .btn__arrow{transform:translateX(4px)}
.form__note{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
}
.form__note.is-success{color:var(--accent)}
.form__policy{
  border-bottom:1px solid var(--line);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.form__policy:hover{color:var(--text);border-bottom-color:var(--accent)}

/* ============================================================
   Футер
   ============================================================ */
.footer{
  border-top:1px solid var(--line);
  padding-block:var(--s5);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--s4);
  flex-wrap:wrap;
}
.logo-svg--footer{fill:var(--muted)}
.logo-svg--footer.logo-v1{height:42px}
.logo-svg--footer.logo-v2{height:28px}
.logo-svg--footer.logo-v3{height:28px}
.logo-official--footer{height:28px}
.footer__tagline{
  margin-top:var(--s3);
  font-size:var(--fs-small);
  color:var(--muted);
}
.footer__meta{
  text-align:right;
  font-size:var(--fs-small);
  display:grid;
  gap:var(--s1);
}
.footer__muted{color:var(--muted);font-size:13px}
.footer__link{
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.footer__link:hover{color:var(--text);border-bottom-color:var(--accent)}

/* ============================================================
   Появление при скролле
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   Адаптив
   ============================================================ */
/* крупному лого тесно рядом с меню на планшетной ширине */
@media (max-width:940px){
  .logo-svg.logo-v1{height:36px}
  .logo-svg.logo-v2{height:24px}
  .logo-svg.logo-v3{height:24px}
  .logo-official{height:24px}
  .header__cta{display:none}
}

@media (max-width:1100px){
  .phead{grid-template-columns:1fr}
  .phead__note{max-width:52ch}
  .why{grid-template-columns:1fr;gap:var(--s5)}
  .why__left{position:static}
  .why__item{padding-block:var(--s5)}
  .ranks-row{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .header__cta{display:none}
  .header__burger{display:flex;margin-left:0}
  .lang{margin-left:auto;margin-right:var(--s2)}

  .header__nav{
    position:fixed;
    top:var(--header-h);
    left:0;right:0;
    bottom:0;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    background:var(--bg);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    padding:var(--s4) clamp(20px,4vw,48px) calc(var(--s5) + env(safe-area-inset-bottom));
    transform:translateX(100%);
    transition:transform .35s var(--ease);
    overflow-y:auto;
  }
  .header__nav.is-open{transform:none}
  .header__link{
    font-size:22px;
    font-weight:700;
    color:var(--text);
    padding:var(--s3) 0;
    width:100%;
    border-bottom:1px solid var(--line);
  }
  .header__cta-mobile{
    display:inline-flex;
    margin-top:var(--s4);
    width:100%;
    min-height:52px;
  }

  .hero__stats{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
  .hero__blob{filter:blur(56px)}
  .hero__pill{font-size:12px}

  .service{grid-template-columns:44px 1fr;gap:var(--s3)}
  .service__arrow{display:none}
  .service:hover{padding-left:0;background:none}

  .proj{grid-template-columns:1fr;gap:var(--s5)}
  .deck{height:480px}
  .deck-card__stats{gap:var(--s3)}

  .pcard{grid-template-columns:1fr;gap:var(--s4)}
  .pcard__logo{min-height:130px}
  .pcard__cta{width:100%}

  .contacts{grid-template-columns:1fr;gap:var(--s5)}

  .footer__inner{flex-direction:column;align-items:flex-start}
  .footer__meta{text-align:left}
}

@media (max-width:560px){
  .ranks-row{grid-template-columns:1fr}
}

@media (max-width:420px){
  .hero__actions .btn{width:100%}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
}