/* DC-Lab Redesign — Block 1: HERO «Линия → Пространство» (full-bleed cinematic showreel) */

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:10000;background:#0a0e16;
  display:grid;place-items:center;will-change:clip-path}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.preloader__logo{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:-.02em;color:#fff;opacity:0}
.preloader__logo b{color:var(--teal)}
.preloader__bar{width:min(38vw,260px);height:2px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px}
.preloader__bar i{display:block;height:100%;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left}
.preloader__pct{font-family:var(--ff-text);font-weight:700;font-size:.8rem;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.preloaded .preloader{pointer-events:none}

/* ---------- site header (over dark hero) ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2vw,22px) clamp(20px,4vw,48px);
  background:linear-gradient(rgba(8,12,20,.55),rgba(8,12,20,0));
  transition:background .4s ease,backdrop-filter .4s ease,padding .4s ease,box-shadow .4s ease}
.site-head.is-stuck{
  background:rgba(8,11,18,.82);backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  padding-top:clamp(10px,1.4vw,14px);padding-bottom:clamp(10px,1.4vw,14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07),0 14px 40px -22px rgba(0,0,0,.7)}
.brand{font-family:var(--ff-display);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;color:#fff}
.brand b{color:var(--teal)}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links{display:inline-flex;align-items:center;gap:clamp(14px,2vw,30px)}
.site-nav a{font-family:var(--ff-text);font-weight:600;font-size:.92rem;color:rgba(255,255,255,.78);
  transition:color .25s}
.site-nav a:hover{color:#fff}
.site-nav .btn{padding:.7em 1.25em;font-size:.9rem;box-shadow:none;white-space:nowrap}
@media (max-width:860px){.nav-links{display:none!important}}
@media (max-width:520px){.site-head{padding:12px 18px}.brand{font-size:1.02rem}
  .site-nav .btn{padding:.6em .95em;font-size:.8rem}}

/* ---------- hero shell ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;background:#0a0e16;isolation:isolate}

/* slider layer */
.hero__slider{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);will-change:opacity,transform}
.slide.is-active{opacity:1}
/* Ken Burns runs via JS on the active slide */

/* dark scrim for legibility (bottom + left weighted) */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(8,12,20,.80) 0%,rgba(8,12,20,.48) 38%,rgba(8,12,20,.14) 72%,rgba(8,12,20,.02) 100%),
    linear-gradient(0deg,rgba(8,12,20,.74) 0%,rgba(8,12,20,.12) 30%,transparent 52%)}

/* blueprint grid flash (drawn briefly on slide change) */
.hero__bp{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(0deg,rgba(47,224,208,.20) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(90deg,rgba(47,224,208,.20) 0 1px,transparent 1px 52px);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 60%,#000 0,#000 40%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 30% 60%,#000 0,#000 40%,transparent 75%)}

/* subtle film grain */
.hero__grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- content ---------- */
.hero__content{position:relative;z-index:5;padding-top:clamp(96px,12vh,150px)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.55em;margin-bottom:1.3rem;
  padding:.5em .95em;border:1px solid rgba(255,255,255,.20);border-radius:999px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  font-family:var(--ff-text);font-weight:600;font-size:.84rem;color:rgba(255,255,255,.88)}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(63,185,106,.6);animation:pulseDot 2.4s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(63,185,106,.55)}70%{box-shadow:0 0 0 9px rgba(63,185,106,0)}100%{box-shadow:0 0 0 0 rgba(63,185,106,0)}}

.hero h1{font-family:var(--ff-display);font-weight:800;color:#fff;
  font-size:clamp(2.5rem,6vw,5.4rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:1.35rem;perspective:1000px}
.hero h1 .ln{display:block;overflow:hidden;transform-style:preserve-3d}
.hero h1 .tx{display:inline-block;transform-style:preserve-3d}
/* floating 3D words — lifted off the background, not flat-on-glass */
.hero h1 .word{display:inline-block;transform-style:preserve-3d;
  text-shadow:0 14px 34px rgba(0,0,0,.6),0 5px 12px rgba(0,0,0,.45)}
.hero h1 .char{display:inline-block;will-change:transform}
.hero h1 .accent{color:var(--magenta);position:relative}
.hero h1 .accent .char,.hero h1 .accent>*,.hero h1 .accent .word{color:var(--magenta)}
.hero h1 .accent .word{text-shadow:0 14px 38px rgba(226,59,138,.5),0 5px 14px rgba(0,0,0,.45)}

/* ===== per-slide themed typography фишки ===== */
/* THEME 1 · CAD — cyan accent + dimension-line draw under the accent line */
.hero h1.theme-cad .accent .word,.hero h1.theme-cad .accent .char{color:#2fe0d0}
.hero h1.theme-cad .accent .word{
  text-shadow:0 0 22px rgba(47,224,208,.35),0 14px 34px rgba(0,0,0,.55)}
.hero h1.theme-cad .accent::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:-.16em;
  height:3px;background:linear-gradient(90deg,transparent,#2fe0d0 12%,#2fe0d0 88%,transparent);
  box-shadow:0 0 12px rgba(47,224,208,.6);transform:scaleX(0);transform-origin:left center;
  animation:cadRule 1.05s .55s cubic-bezier(.22,1,.36,1) forwards}
.hero h1.theme-cad .accent::before{content:"";position:absolute;left:-.06em;right:-.06em;bottom:-.28em;
  height:11px;border-left:2px solid #2fe0d0;border-right:2px solid #2fe0d0;opacity:0;
  animation:cadTicks .4s 1.5s ease forwards}
@keyframes cadRule{to{transform:scaleX(1)}}
@keyframes cadTicks{to{opacity:.85}}

/* THEME 2 · RENDER — warm amber accent + chars resolve from blur (V-Ray render pass) */
.hero h1.theme-render .char{filter:blur(var(--blr,0px))}
.hero h1.theme-render .accent .word,.hero h1.theme-render .accent .char{color:#f3a96a}
.hero h1.theme-render .accent .word{
  text-shadow:0 0 26px rgba(243,169,106,.4),0 14px 34px rgba(0,0,0,.55)}
.hero h1.theme-render .accent::after{content:"";position:absolute;left:0;right:0;bottom:-.18em;height:2px;
  background:linear-gradient(90deg,#f3a96a,rgba(243,169,106,.15));transform:scaleX(0);transform-origin:left;
  animation:cadRule 1.5s .35s linear forwards;opacity:.7}

/* THEME 3 · CERT — gold accent + foil-shine sweep (embossed certificate) */
.hero h1.theme-cert .accent .word,.hero h1.theme-cert .accent .char{color:var(--gold)}
.hero h1.theme-cert .accent .word{
  text-shadow:0 0 24px rgba(224,164,49,.5),0 14px 38px rgba(0,0,0,.5)}
.hero h1.theme-cert .accent::after{content:"";position:absolute;inset:-2px -.08em;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.65) 50%,transparent 58%);
  background-size:260% 100%;mix-blend-mode:overlay;
  animation:certShine 1.5s .5s ease forwards}
@keyframes certShine{from{background-position:135% 0}to{background-position:-35% 0}}

.hero__sub{max-width:46ch;font-size:clamp(1.02rem,1.3vw,1.22rem);color:rgba(255,255,255,.82);
  line-height:1.55;margin-bottom:2rem;text-shadow:0 1px 20px rgba(0,0,0,.4)}

.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}
.btn--lg{padding:.95em 1.6em;font-size:1rem}
/* light ghost on dark hero */
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.hero .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- stat bar (bottom, glass) ---------- */
.hero__stats{position:relative;z-index:5;margin-top:auto;
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
  gap:clamp(20px,3vw,52px);padding-top:clamp(28px,5vh,56px);padding-bottom:clamp(20px,3vh,30px)}
.stat{position:relative}
/* divider lines draw in vertically (blueprint feel) */
.stat:not(:last-child)::after{content:"";position:absolute;right:calc(-1*clamp(10px,1.5vw,26px));
  top:.1em;bottom:.1em;width:1px;background:rgba(255,255,255,.18);
  transform:scaleY(0);transform-origin:top center;animation:statDiv .7s 1.15s cubic-bezier(.22,1,.36,1) forwards}
@keyframes statDiv{to{transform:scaleY(1)}}
/* gold underline tick that draws when the number lands */
.stat::before{content:"";position:absolute;left:.02em;bottom:-7px;width:0;height:2px;border-radius:2px;
  background:var(--gold);box-shadow:0 0 10px rgba(224,164,49,.6);transition:width .55s .05s cubic-bezier(.22,1,.36,1)}
.stat.landed::before{width:28px}
.stat__n{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.7rem,2.9vw,2.6rem);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffffff 0%,#cfe9e5 100%);-webkit-background-clip:text;
  background-clip:text;color:#fff;-webkit-text-fill-color:transparent;
  display:inline-block;will-change:transform,filter}
/* odometer motion-blur while rolling, gold pop on land */
.stat.counting .stat__n{filter:blur(.6px);text-shadow:0 0 18px rgba(18,181,168,.5)}
.stat.landed .stat__n{animation:statPop .6s cubic-bezier(.22,1,.36,1)}
@keyframes statPop{0%{transform:translateY(5px) scale(1.07);filter:drop-shadow(0 0 22px rgba(224,164,49,.75))}
  100%{transform:none;filter:none}}
.stat__l{margin-top:.55em;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.66);letter-spacing:.01em}
@media (max-width:560px){.hero__stats{grid-template-columns:repeat(2,1fr);gap:18px 26px}
  .stat:nth-child(2)::after{display:none}}

/* ---------- slider dots ---------- */
.hero__dots{position:absolute;right:clamp(18px,3vw,42px);top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;gap:14px}
.dot-btn{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:transparent;cursor:pointer;padding:0;transition:all .35s}
.dot-btn.is-active{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px rgba(18,181,168,.22)}
@media (max-width:860px){.hero__dots{flex-direction:row;right:auto;left:50%;top:auto;bottom:84px;transform:translateX(-50%)}}

/* trust line */
.hero__trust{position:relative;z-index:5;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.6);
  padding-bottom:clamp(40px,7vh,72px)}
.hero__trust .adsk{font-family:var(--ff-display);font-weight:700;color:#fff}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.5em;color:rgba(255,255,255,.7);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.scroll-cue .rail{width:1px;height:36px;background:linear-gradient(var(--teal),transparent);position:relative;overflow:hidden}
.scroll-cue .rail::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--teal);animation:cueRun 1.8s infinite}
@keyframes cueRun{0%{top:-50%}100%{top:100%}}
@media (max-width:860px){.scroll-cue{display:none}}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .hero h1{font-size:clamp(2.1rem,9vw,3.2rem)}
  .hero__sub{max-width:34ch}
  .hero__trust{padding-bottom:96px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .preloader{display:none}
  .slide{transform:none!important}
  .hero h1 .ln>*,.hero__eyebrow,.hero__sub,.hero__cta,.hero__stats,.stat{opacity:1!important;transform:none!important}
}