/* ============================================================
   СЕВЕР ДЕРЖИТ — styles
   ============================================================ */
:root{
  --bg:#04070f;
  --ink:#eaf3ee;
  --muted:rgba(233,242,237,.82);
  --accent:#9bffe0;
  --teal:#5be2b0;
  --cat-nature:#5be2b0;
  --cat-mountains:#8fb7ff;
  --cat-culture:#ff9fb6;
  --cat-phenomenon:#c6a0ff;
  --oswald:'Oswald',sans-serif;
  --golos:'Golos Text',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
body{background:var(--bg);color:var(--ink);font-family:var(--golos);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ====================== CINEMATIC ====================== */
.cine{position:relative;height:600vh;}
.cine__stage{position:sticky;top:0;height:100vh;overflow:hidden;
  background:linear-gradient(180deg,#05080f 0%,#0a1320 60%,#0c1626 100%);}
.cine__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:opacity;}
.cine__scrim{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(135% 110% at 50% 32%,rgba(0,0,0,0) 34%,rgba(0,0,0,.6) 100%),
    linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 50%,rgba(0,0,0,.66) 100%);}

/* topbar */
.topbar{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:8px 14px;
  padding:18px clamp(16px,4vw,56px);font-family:var(--oswald);}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
.brand__mark{width:13px;height:13px;border:2px solid #eaf3ee;transform:rotate(45deg);
  box-shadow:0 0 14px rgba(150,255,220,.5);}
.brand__name{color:#eef6f0;font-weight:700;letter-spacing:.34em;font-size:14px;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.7);}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);}
.nav__link{cursor:pointer;color:rgba(238,246,240,.78);font-weight:500;letter-spacing:.2em;font-size:12px;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.7);transition:color .2s;}
.nav__link:hover{color:#fff;}

/* phase indicator */
.phase{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--oswald);pointer-events:none;}
.phase__name{writing-mode:vertical-rl;color:#eef6f0;font-weight:600;letter-spacing:.32em;font-size:12px;
  text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.7);}
.phase__bar{position:relative;width:3px;height:min(34vh,300px);background:rgba(255,255,255,.18);
  border-radius:3px;overflow:hidden;}
.phase__fill{position:absolute;left:0;right:0;top:0;height:0%;
  background:linear-gradient(180deg,#9bffe0,#ffd9a0);box-shadow:0 0 12px rgba(155,255,224,.7);}
.phase__tick{writing-mode:vertical-rl;color:rgba(238,246,240,.55);font-size:10px;letter-spacing:.3em;}

/* scenes */
.scenes{position:absolute;inset:0;z-index:30;pointer-events:none;}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:90px clamp(20px,5vw,40px);will-change:opacity,transform;}
.scene--manifest,.scene--kit{text-align:left;}
.scene__inner{max-width:880px;}

.kicker{color:rgba(155,255,224,.9);font-family:var(--oswald);font-weight:500;letter-spacing:.5em;
  font-size:clamp(11px,1.4vw,15px);text-transform:uppercase;text-shadow:0 0 18px rgba(0,0,0,.6);
  margin-bottom:clamp(14px,2.5vh,28px);}
.kicker--dark{color:#3a1d12;text-shadow:0 1px 2px rgba(255,246,234,.9),0 0 12px rgba(255,240,225,.7);}
.h2{font-family:var(--oswald);font-weight:700;text-transform:uppercase;color:#f3f9f4;line-height:1.04;
  font-size:clamp(34px,6vw,74px);text-shadow:0 4px 30px rgba(0,0,0,.7);margin:0;}
.h2--xl{font-size:clamp(40px,7vw,86px);line-height:1.06;}
.lead{max-width:560px;color:var(--muted);font-size:clamp(15px,1.7vw,19px);line-height:1.55;
  text-shadow:0 1px 14px rgba(0,0,0,.8);margin-top:clamp(18px,3vh,28px);}
.lead--wide{max-width:620px;font-size:clamp(16px,1.9vw,21px);line-height:1.6;}

/* hero */
.hero__title{font-family:var(--oswald);font-weight:700;text-transform:uppercase;color:#f3f9f4;
  line-height:.9;letter-spacing:.02em;font-size:clamp(58px,15vw,210px);margin:0 0 clamp(26px,6vh,60px);
  text-shadow:0 6px 40px rgba(0,0,0,.7),0 0 60px rgba(40,180,140,.3);}
.hero__title-out{-webkit-text-stroke:2px #f3f9f4;color:transparent;}
.scrollhint{margin-top:clamp(26px,5vh,52px);display:flex;flex-direction:column;align-items:center;gap:10px;}
.scrollhint__txt{color:rgba(238,246,240,.65);font-family:var(--oswald);letter-spacing:.32em;font-size:11px;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.chev{width:16px;height:16px;border-right:2px solid rgba(238,246,240,.75);
  border-bottom:2px solid rgba(238,246,240,.75);transform:rotate(45deg);animation:chev 1.8s ease-in-out infinite;}

/* kit */
.kit{display:flex;gap:clamp(30px,5vw,70px);align-items:center;flex-wrap:wrap;justify-content:center;max-width:1180px;}
.kit__text{flex:1 1 360px;max-width:520px;}
.kit__media{flex:0 0 auto;width:clamp(260px,38vw,440px);height:clamp(260px,38vw,440px);}

/* things */
.things__h{margin-bottom:clamp(18px,3.5vh,40px);font-size:clamp(26px,4.5vw,52px);letter-spacing:.04em;}
.things__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(12px,1.8vw,24px);width:100%;max-width:1180px;}
.thing{display:flex;flex-direction:column;background:rgba(8,16,22,.55);
  border:1px solid rgba(180,220,210,.18);border-radius:12px;padding:14px;}
.thing__media{width:100%;height:clamp(140px,16vw,200px);}
.thing__title{margin:14px 0 4px;font-family:var(--oswald);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:#f3f9f4;font-size:clamp(16px,1.5vw,20px);}
.thing__desc{color:rgba(220,232,226,.78);font-size:13px;line-height:1.45;}

/* image placeholders */
.ph{position:relative;border-radius:10px;background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 12px,rgba(255,255,255,0) 12px 24px),
    rgba(6,12,18,.6);
  border:1px dashed rgba(180,220,210,.28);display:flex;align-items:center;justify-content:center;
  overflow:hidden;}
.ph__label{font-family:var(--oswald);font-weight:500;letter-spacing:.3em;font-size:11px;text-transform:uppercase;
  color:rgba(200,222,214,.45);}
.ph img{width:100%;height:100%;object-fit:cover;}

/* cta */
.scene--cta .kicker--dark{color:#3a1d12;}
.scene--cta::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(85% 62% at 50% 54%,rgba(250,243,231,.26),rgba(250,243,231,0) 66%);}
.scene--cta .btn--ghost{background:rgba(252,242,230,.5);box-shadow:0 0 0 1px rgba(255,246,234,.5);}
.cta__title{font-family:var(--oswald);font-weight:700;text-transform:uppercase;color:#2a130c;line-height:1.08;
  font-size:clamp(40px,8vw,104px);text-shadow:0 2px 4px rgba(255,244,232,.9),0 0 22px rgba(255,240,225,.85);margin:clamp(10px,2vh,16px) 0 0;}
.cta__lead{margin:clamp(16px,2.5vh,24px) 0 0;max-width:480px;color:#2a130c;
  font-size:clamp(15px,1.8vw,20px);line-height:1.55;text-shadow:0 1px 3px rgba(255,244,232,.85),0 0 14px rgba(255,240,225,.7);}
.btn{margin-top:clamp(22px,3.5vh,34px);cursor:pointer;pointer-events:auto;display:inline-flex;align-items:center;
  gap:.7em;padding:clamp(15px,2.1vh,18px) clamp(34px,5vw,48px);background:#2a130c;color:#fdeede;
  font-family:var(--oswald);font-weight:600;letter-spacing:.18em;font-size:clamp(13px,1.4vw,15px);
  text-transform:uppercase;border-radius:2px;box-shadow:0 16px 40px rgba(42,19,12,.35);
  transition:transform .25s ease,box-shadow .25s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(42,19,12,.45);}
.btn__arrow{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);}
.contacts{margin-top:clamp(14px,2vh,18px);display:flex;align-items:center;gap:clamp(12px,2vw,22px);
  flex-wrap:wrap;justify-content:center;font-family:var(--oswald);letter-spacing:.16em;font-weight:600;
  font-size:clamp(12px,1.4vw,14px);text-transform:uppercase;color:#2a130c;text-shadow:0 1px 10px rgba(255,242,228,.85);
  pointer-events:auto;}
.contacts a{pointer-events:auto;transition:opacity .2s;}
.contacts a:hover{opacity:.66;}
.contacts__dot{width:5px;height:5px;border-radius:50%;background:rgba(42,19,12,.7);}

/* ====================== KEYFRAMES ====================== */
@keyframes chev{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.4;}50%{transform:rotate(45deg) translate(4px,4px);opacity:1;}}
@keyframes pulse{0%{transform:scale(.7);opacity:.5;}70%{opacity:0;}100%{transform:scale(2.3);opacity:0;}}
@keyframes cardin{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes tourpulse{0%,100%{transform:scale(.8);opacity:.6;}50%{transform:scale(1.3);opacity:1;}}
@keyframes twinkle{0%,100%{opacity:.18;}50%{opacity:.95;}}
@keyframes drift1{0%{transform:translate(0,0) scale(1);}50%{transform:translate(6%,4%) scale(1.12);}100%{transform:translate(0,0) scale(1);}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.05);}50%{transform:translate(-7%,-3%) scale(.95);}100%{transform:translate(0,0) scale(1.05);}}

/* ====================== RESPONSIVE ====================== */

@media (max-width:680px){
  .phase{display:none;}
  .scene{padding:72px 18px 28px;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .scene--manifest,.scene--kit{text-align:center;}
  .kit{justify-content:center;gap:22px;}
  .kit__text{flex-basis:auto;text-align:center;}
  .kit__media{width:min(72vw,300px);height:min(72vw,300px);}
  .thing__media{height:clamp(120px,40vw,170px);}
  .lead,.lead--wide{margin-left:auto;margin-right:auto;}
  .brand__name{font-size:12px;letter-spacing:.24em;}
  .nav{gap:16px;}
  .cta__btns{justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .cine__bg,.chev{animation:none !important;}
}

/* ====================== CTA BUTTONS / FOOTER / PREORDER ====================== */
.cta__btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:clamp(22px,3.5vh,34px);}
.cta__btns .btn{margin-top:0;}
.btn--ghost{background:transparent;color:#2a130c;border:2px solid #2a130c;box-shadow:none;}
.btn--ghost:hover{background:rgba(42,19,12,.08);box-shadow:none;}

.foot{position:relative;z-index:2;background:#04070f;border-top:1px solid rgba(180,220,210,.12);
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:clamp(28px,5vw,44px) clamp(18px,5vw,40px);}
.foot__brand{font-family:var(--oswald);font-weight:700;letter-spacing:.32em;text-transform:uppercase;font-size:14px;color:#eef6f0;}
.foot__links{display:flex;gap:clamp(14px,3vw,28px);flex-wrap:wrap;justify-content:center;}
.foot__links a{font-family:var(--oswald);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:rgba(225,238,232,.7);}
.foot__links a:hover{color:#9bffe0;}
.foot__meta{font-family:var(--oswald);letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:rgba(225,238,232,.45);}

.pre{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,12,.78);}
.pre[hidden]{display:none;}
.pre__box{position:relative;max-width:440px;width:100%;background:#0a1320;border:1px solid rgba(180,220,210,.2);padding:30px 26px 26px;max-height:92vh;overflow:auto;}
.pre__x{position:absolute;right:12px;top:8px;background:none;border:none;color:#cfe6dc;font-size:26px;line-height:1;cursor:pointer;}
.pre__kick{font-family:var(--oswald);letter-spacing:.3em;text-transform:uppercase;font-size:11px;color:#9bffe0;}
.pre__h{font-family:var(--oswald);font-weight:700;text-transform:uppercase;font-size:26px;margin:8px 0 0;color:#f3f9f4;}
.pre__p{margin:10px 0 18px;color:rgba(225,238,232,.74);font-size:14px;line-height:1.5;}
.pre__in{width:100%;margin:0 0 12px;padding:13px 15px;background:rgba(12,22,32,.7);border:1px solid rgba(180,220,210,.28);color:#eef4ef;font-family:var(--golos);font-size:15px;outline:none;}
.pre__in:focus{border-color:rgba(155,255,224,.7);}
.pre__ta{resize:vertical;min-height:64px;}
.pre__consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:rgba(225,238,232,.72);line-height:1.45;margin:2px 0 16px;}
.pre__consent input{margin-top:2px;flex:0 0 auto;}
.pre__go{width:100%;padding:15px;background:#e0552a;color:#fff;border:none;cursor:pointer;font-family:var(--oswald);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px;}
.pre__go:hover{background:#ef632f;}
.pre__note{margin-top:12px;min-height:18px;font-size:13px;color:rgba(225,238,232,.8);}