/* ============================================================
   SPTech24 — layout.css
   Шапка, Hero, marquee, ритм секций.
   ============================================================ */

/* ---------- HEADER ---------- */
.header{
  position:sticky;top:0;z-index:var(--z-header);
  height:68px;display:flex;align-items:center;
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-ui) var(--ease-out), background var(--t-ui) var(--ease-out);
}
.header.is-stuck{border-bottom-color:var(--line-2);background:color-mix(in oklab, var(--bg) 86%, transparent)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-0.03em;font-size:1.18rem}
.brand b{color:var(--ink)}
.brand span span{color:var(--accent)}
.brand__mark{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:
    radial-gradient(circle at 30% 28%, var(--accent-hi), var(--accent) 55%, var(--accent-dim));
  box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent),
             0 6px 18px -6px var(--glow);
  position:relative;
}
.brand__mark::after{
  content:"";position:absolute;inset:7px;border-radius:3px;
  border:1.6px solid var(--accent-ink);
  border-top-width:3px;
}

.nav{display:flex;align-items:center;gap:1.4rem}
.nav__links{display:flex;gap:1.4rem}
.nav__links a{color:var(--ink-soft);font-size:.94rem;font-weight:500;position:relative;padding:.3rem 0;transition:color var(--t-fast) var(--ease-out)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--accent);transition:width var(--t-ui) var(--ease-out)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__phone{font-family:var(--mono);font-weight:500;font-size:.94rem;color:var(--ink);white-space:nowrap}
.nav__phone:hover{color:var(--accent)}

.nav__toggle{display:none}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(560px, 92vh, 920px);
  display:flex;align-items:center;
  padding-block:clamp(3rem, 7vh, 6rem) clamp(3rem, 6vh, 5rem);
  overflow:hidden;
}
/* живая схема платы — занимает правые ~70% */
.hero__circuit{
  position:absolute;
  top:50%;right:-6%;
  width:72%;max-width:1000px;
  aspect-ratio:4/3;
  transform:translateY(-50%);
  z-index:-1;
  pointer-events:none;
}
.hero__circuit svg{width:100%;height:100%;overflow:visible}
/* вуаль: затемняет левую часть под текст, оставляет плату справа видимой */
.hero__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    var(--bg) 14%,
    color-mix(in oklab, var(--bg) 64%, transparent) 34%,
    transparent 66%);
}
.hero__inner{position:relative}
.hero__content{max-width:min(58rem, 100%)}

.hero__h1{
  font-weight:800;
  font-size:clamp(2.7rem, 1.3rem + 6.6vw, 6rem);  /* до 96px */
  line-height:0.98;
  letter-spacing:-0.035em;
  margin-top:1.4rem;
  text-wrap:balance;
}
.hero__h1 .line{display:block}
.hero__h1 .accent{
  color:var(--accent);
  white-space:nowrap;            /* «Челябинске» уходит за правый край */
  text-shadow:0 0 60px color-mix(in oklab, var(--accent) 30%, transparent);
}
.hero__sub{
  margin-top:1.6rem;
  max-width:46ch;
  font-size:clamp(1.02rem, 0.98rem + 0.4vw, 1.22rem);
  color:var(--ink-soft);
  line-height:1.55;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* ---------- MARQUEE ---------- */
.marquee{
  position:relative;
  border-block:1px solid var(--line-2);
  background:color-mix(in oklab, var(--accent) 4%, var(--bg));
  overflow:hidden;
  --marquee-gap:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
  display:flex;width:max-content;
  will-change:transform;
  animation:marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;flex:none;align-items:center}
.marquee__item{
  display:inline-flex;align-items:center;gap:1.4rem;
  padding:.9rem 0;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(.78rem, .72rem + .3vw, .95rem);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}
.marquee__item::after{content:"·";margin-inline:1.4rem;color:var(--accent);font-size:1.2em;line-height:0}
.marquee__item--hot{color:var(--accent)}

/* ---------- SECTION RHYTHM ---------- */
.section{padding-block:var(--sec);position:relative}
.section--alt{background:var(--bg-1)}

/* section header */
.sec-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head h2{
  font-size:clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  letter-spacing:-0.03em;line-height:1.02;
}
.sec-head p{margin-top:1rem;color:var(--ink-soft);font-size:clamp(1rem,.97rem+.2vw,1.12rem);max-width:54ch}

/* ---------- SERVICES (горизонтальная лента) ---------- */
.svc-section{padding-block:var(--sec);position:relative;overflow:hidden}
.svc-section .sec-head{padding-inline:var(--pad);margin-inline:auto;max-width:var(--maxw);width:100%}

.svc-rail{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.svc-rail::-webkit-scrollbar{display:none}
.svc-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.svc-rail.is-dragging *{pointer-events:none}

.svc-track{
  display:flex;gap:1.1rem;
  /* выравниваем первую карточку по контейнеру, хвост уходит за край */
  padding-inline:max(var(--pad), calc((100vw - var(--maxw))/2 + var(--pad)));
  padding-block:.4rem;
  width:max-content;
}

/* progress (функциональный индикатор позиции, не «scroll cue») */
.svc-progress{
  margin:1.6rem auto 0;max-width:var(--maxw);width:100%;padding-inline:var(--pad);
  display:flex;align-items:center;gap:1rem;
}
.svc-progress__track{position:relative;height:3px;border-radius:3px;background:var(--line);flex:1;overflow:hidden}
.svc-progress__bar{position:absolute;inset:0 auto 0 0;width:30%;border-radius:3px;background:var(--accent);transform-origin:left;transition:transform .12s linear}
.svc-progress__hint{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap}

@media (max-width:900px){
  .svc-rail{cursor:auto}
  .svc-track{padding-inline:var(--pad)}
}

/* ---------- PROCESS (sticky timeline) ---------- */
.proc__grid{
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:clamp(2rem,6vw,5.5rem);
  align-items:start;
}
.proc__aside{
  position:sticky;top:0;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:4rem;
}
.proc__aside .sec-head{margin-bottom:2.4rem}
.proc__counter{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.proc__big{
  font-weight:800;color:var(--accent);line-height:.85;letter-spacing:-0.04em;
  font-size:clamp(5rem, 4rem + 9vw, 11rem);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 70px color-mix(in oklab,var(--accent) 24%,transparent);
  transition:opacity .25s var(--ease-out);
}
.proc__total{font-family:var(--mono);font-size:1.4rem;color:var(--ink-faint);font-weight:500}
.proc__name{
  display:block;width:100%;margin-top:.8rem;
  font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;color:var(--ink);
  transition:opacity .25s var(--ease-out);
}

.proc__steps{position:relative;padding-left:2.6rem;list-style:none}
.proc__steps::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;background:var(--line);border-radius:2px}
.proc__progress{position:absolute;left:7px;top:14px;width:2px;height:var(--p,0%);background:linear-gradient(180deg,var(--accent-hi),var(--accent));border-radius:2px;box-shadow:0 0 10px var(--glow);transition:height .12s linear}

.proc__step{position:relative;padding-block:clamp(1.4rem,3.2vw,2.8rem)}
.proc__step:first-child{padding-top:0}
.proc__step:last-child{padding-bottom:0}
.proc__dot{
  position:absolute;left:-2.6rem;top:calc(clamp(1.4rem,3.2vw,2.8rem) + 2px);
  width:18px;height:18px;border-radius:50%;
  background:var(--bg-1);border:2px solid var(--line);
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-spring);
}
.proc__step:first-child .proc__dot{top:2px}
.proc__step.is-active .proc__dot{
  border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 16%,transparent),0 0 14px var(--glow);
  transform:scale(1.12);
}
.proc__num{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:.86rem;
  letter-spacing:.08em;color:var(--accent);margin-bottom:.5rem;
}
.proc__step-title{font-size:1.32rem;font-weight:700;letter-spacing:-0.02em;line-height:1.15}
.proc__step-text{margin-top:.55rem;color:var(--ink-soft);font-size:1rem;line-height:1.55;max-width:48ch}
.proc__step{opacity:.5;transition:opacity .4s var(--ease-out)}
.proc__step.is-active,.proc__step.is-past{opacity:1}

@media (max-width:900px){
  .proc__grid{grid-template-columns:1fr;gap:1.5rem}
  .proc__aside{position:static;min-height:0;padding-block:0;display:block}
  .proc__counter{display:none}            /* большой номер — только десктоп */
  .proc__aside .sec-head{margin-bottom:1rem}
  .proc__steps{padding-left:2.2rem}
  .proc__step{opacity:1}                  /* на мобайле все читаемы */
  .proc__dot{left:-2.2rem}
}
@media (prefers-reduced-motion: reduce){
  .proc__step{opacity:1}
}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line-2);background:var(--bg-1);padding-block:clamp(2.5rem,5vw,4rem) 2rem}
.footer__map{
  position:relative;height:clamp(220px,32vw,320px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);margin-bottom:clamp(2.5rem,5vw,4rem);
}
.footer__map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05) brightness(.92)}
.footer__map-tag{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .85rem;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(8px);
  font-size:.82rem;color:var(--ink)}
.footer__cols{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:clamp(1.5rem,4vw,3rem)}
.footer__slogan{margin-top:1rem;color:var(--ink-soft);font-size:.96rem;line-height:1.55;max-width:34ch}
.footer__social{display:flex;gap:.7rem;margin-top:1.3rem}
.footer__soc{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-soft);
  transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.footer__soc svg{width:20px;height:20px}
.footer__soc:hover{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,transparent);transform:translateY(-2px)}
.footer__h{font-size:.84rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem}
.footer__col ul{list-style:none}
.footer__col li{margin-bottom:.6rem}
.footer__col a{color:var(--ink-soft);font-size:.95rem;transition:color var(--t-fast) var(--ease-out)}
.footer__col a:hover{color:var(--accent)}
.footer__phone{font-family:var(--mono);font-weight:500;font-size:1.05rem;color:var(--ink) !important}
.footer__hours{display:flex;align-items:center;gap:.5rem;color:var(--ink-soft);font-size:.95rem}
.footer__area{color:var(--ink-faint);font-size:.9rem}
/* плитка разработчика */
.footer__dev{
  display:flex;align-items:center;gap:1rem;
  margin-top:clamp(2rem,4vw,3rem);
  padding:1.05rem 1.25rem;border-radius:var(--r);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in oklab,var(--accent) 7%,transparent), transparent 55%),
    var(--surface);
  transition:border-color var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.footer__dev:hover{border-color:color-mix(in oklab,var(--accent) 45%,transparent);transform:translateY(-2px)}
.footer__dev-mark{
  width:40px;height:40px;border-radius:11px;flex:none;position:relative;
  background:radial-gradient(circle at 30% 28%, var(--accent-hi), var(--accent) 55%, var(--accent-dim));
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 40%,transparent),0 6px 18px -6px var(--glow)}
.footer__dev-mark::after{content:"";position:absolute;inset:10px;border-radius:3px;border:2px solid var(--accent-ink);border-top-width:4px}
.footer__dev-txt{flex:1;line-height:1.3}
.footer__dev-txt b{display:block;font-size:.98rem;color:var(--ink);font-weight:700;letter-spacing:-0.01em}
.footer__dev-txt b i{color:var(--accent);font-style:normal}
.footer__dev-txt span{display:block;font-size:.82rem;color:var(--ink-faint);margin-top:.15rem}
.footer__dev-arrow{color:var(--ink-faint);transition:transform var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.footer__dev:hover .footer__dev-arrow{color:var(--accent);transform:translateX(3px)}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--line-2)}
.footer__legal{font-size:.8rem;color:var(--ink-faint)}
.footer__bottom-links{display:flex;gap:1.4rem;align-items:center;font-size:.85rem}
.footer__bottom-links a{color:var(--ink-soft)}
.footer__bottom-links a:hover{color:var(--accent)}
.footer__copy{color:var(--ink-faint)}
@media (max-width:760px){
  .footer__cols{grid-template-columns:1fr;gap:2rem}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .nav__links,.nav__phone{display:none}
  .nav .btn{display:none}
  .nav__toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  }
  .nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
    content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform var(--t-ui) var(--ease-out),opacity var(--t-fast)}
  .nav__toggle span::before{position:absolute;top:-6px}
  .nav__toggle span::after{position:absolute;top:6px}

  .hero__circuit{width:120%;right:-30%;opacity:.5}
  .hero__veil{background:linear-gradient(180deg, var(--bg) 30%, color-mix(in oklab,var(--bg) 60%,transparent) 70%, var(--bg))}
  .hero{min-height:auto;padding-block:2.5rem 3rem}
  .hero__sub{max-width:none}
}