/* ============================================================
   iPhone 18 Pro — редакторский кинематографичный стиль
   ============================================================ */

:root{
  --bg:        #060605;
  --ink:       #f4f1ea;
  --ink-dim:   #bdb9b0;
  --ink-mute:  #928e86;
  --line:      rgba(244,241,234,.18);
  --line-soft: rgba(244,241,234,.10);

  --iri-a: #7bf0c6;
  --iri-b: #74c6ff;
  --iri-c: #d19bff;
  --iri: linear-gradient(120deg, var(--iri-a), var(--iri-b) 45%, var(--iri-c));

  --err: #ff8f8f;

  --font-display: "Unbounded", "Manrope", sans-serif;
  --font-ui: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --gut: clamp(18px, 4vw, 64px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.lenis{ scroll-behavior:auto; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-weight:500; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--iri-b); color:#04120f; }

/* ---------- Зерно ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
}

/* ---------- Прелоадер ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:var(--gut); transition:transform 1s var(--ease);
}
.preloader.done{ transform:translateY(-100%); pointer-events:none; }
.preloader__count{
  font-family:var(--font-display); font-size:clamp(48px,12vw,140px);
  font-weight:800; letter-spacing:-.04em; line-height:.8;
}
.preloader__word{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(14px,3vw,24px); letter-spacing:-.01em; color:var(--ink-dim);
}

/* ---------- Общие подписи ---------- */
.section-label{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim);
  margin-bottom:clamp(26px,5vh,58px);
}
.section-label i{ width:8px; height:8px; border-radius:50%; background:var(--iri); flex:none; }

/* ---------- Навигация ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
  padding:clamp(16px,2.4vw,26px) var(--gut);
}
.nav__scrim{
  position:absolute; inset:-10px 0 auto 0; height:108px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,6,5,.78), rgba(6,6,5,.32) 55%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.nav__col{ display:flex; }
.nav__col--left{ flex-direction:column; gap:3px; }
.nav__col--center{ gap:clamp(16px,2vw,32px); justify-self:center; align-items:center; padding-top:3px; }
.nav__col--right{ justify-content:flex-end; align-items:center; }
.nav__brand{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.02em; }
.nav__micro{ font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-dim); }
.nav__col--center a{
  position:relative; font-size:13px; font-weight:600; color:var(--ink-dim); transition:color .3s;
}
.nav__col--center a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0;
  background:var(--ink); transition:width .35s var(--ease);
}
.nav__col--center a:hover{ color:var(--ink); }
.nav__col--center a:hover::after{ width:100%; }
.nav__cart{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
.nav__cart em{
  font-style:normal; display:grid; place-items:center; width:22px; height:22px;
  border:1.5px solid var(--line); border-radius:50%; font-size:13px;
  transition:background .3s, color .3s, border-color .3s;
}
.nav__cart:hover em{ background:var(--ink); color:#060605; border-color:var(--ink); }
@media (max-width:760px){
  .nav{ grid-template-columns:1fr auto; }
  .nav__col--center{ display:none; }
  .nav__micro{ font-size:11px; }
}

/* ============================================================
   ГЛАВЫ — у каждой характеристики своя анимация по скроллу
   Кадры показываем не крупнее нативного размера → нет мыла
   ============================================================ */
.chap{ position:relative; height:200vh; background:#000; }
.chap--first{ height:270vh; }
.chap__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
.chap__glow{
  position:absolute; inset:0; z-index:0; filter:blur(20px);
  background:
    radial-gradient(44% 38% at 56% 46%, rgba(116,198,255,.13), transparent 70%),
    radial-gradient(36% 32% at 78% 64%, rgba(209,155,255,.10), transparent 72%);
}
.chap__glow--display{ background:radial-gradient(46% 40% at 56% 48%, rgba(180,150,255,.16), transparent 70%); }
.chap__glow--camera{  background:radial-gradient(46% 40% at 56% 48%, rgba(255,110,140,.15), transparent 70%); }
.chap__glow--chip{    background:radial-gradient(46% 40% at 56% 48%, rgba(123,240,198,.13), transparent 70%); }
.chap__glow--battery{ background:radial-gradient(42% 44% at 54% 50%, rgba(160,200,255,.14), transparent 70%); }

/* нативная ширина кадров — 736px, контейнер меньше → резко */
.chap__media{ position:relative; z-index:1; width:min(88vw, 720px); }
.chap__media--tall{ width:min(56vw, 400px); }
.chap__img{
  width:100%; height:auto;
  mix-blend-mode:screen;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite:intersect;
}
.chap__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,6,5,.68) 0%, transparent 24%, transparent 58%, rgba(6,6,5,.86) 100%),
    radial-gradient(64% 58% at 14% 50%, rgba(6,6,5,.82), transparent 72%);
}

.chap__intro{
  position:absolute; z-index:4; left:var(--gut); top:50%; transform:translateY(-50%);
  will-change:opacity, transform;
}
.chap__h1{ font-family:var(--font-display); line-height:.84; letter-spacing:-.035em; }
.chap__h1-sm{
  display:block; font-size:clamp(20px,3.2vw,42px); font-weight:600;
  letter-spacing:-.02em; color:var(--ink-dim);
}
.chap__h1-lg{
  display:block; font-size:clamp(60px,13vw,170px); font-weight:900; letter-spacing:-.045em;
  background:linear-gradient(180deg,#fffdf8 30%,#b5afa3);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.7));
}
.chap__h1-and{
  display:block; margin-top:.3em; font-size:clamp(15px,2.1vw,28px); font-weight:700;
  letter-spacing:-.01em; color:var(--ink);
}
.chap__lead{
  margin-top:18px; font-size:clamp(15px,1.4vw,18px); font-weight:600; line-height:1.4;
  max-width:26ch; color:rgba(244,241,234,.86); text-shadow:0 2px 16px rgba(0,0,0,.7);
}

.chap__info{
  position:absolute; z-index:3; left:var(--gut); top:50%; transform:translateY(-50%);
  max-width:min(42vw, 430px);
  opacity:0; transition:opacity .6s var(--ease);
}
.chap__info.on{ opacity:1; }
.chap__eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:10px;
}
.chap__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px,4.4vw,62px); line-height:1.02; letter-spacing:-.04em;
  margin-bottom:clamp(20px,3vh,34px); text-shadow:0 6px 34px rgba(0,0,0,.75);
}
.chap__facts{ list-style:none; display:flex; flex-direction:column; gap:clamp(12px,2vh,22px); }
.chap__facts li{
  opacity:0; transform:translateY(14px) translateX(-10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), border-color .55s;
  border-left:2px solid rgba(244,241,234,.14); padding-left:16px;
}
.chap__facts li.on{ opacity:1; transform:none; border-left-color:var(--iri-b); }
.chap__facts b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px,2.3vw,32px); letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.chap__facts span{
  display:block; margin-top:5px; font-size:clamp(12.5px,1.05vw,14.5px);
  font-weight:600; color:var(--ink-dim);
}

.chap__hint{
  position:absolute; z-index:3; right:var(--gut); bottom:clamp(48px,8vh,84px);
  display:flex; flex-direction:column; align-items:flex-end; gap:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,241,234,.6); transition:opacity .5s;
}
.chap__hint-line{ width:1.5px; height:38px; background:var(--line-soft); overflow:hidden; }
.chap__hint-line i{ display:block; width:100%; height:40%; background:var(--ink); animation:scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(250%)} }

.chap__bar{ position:absolute; z-index:4; left:0; right:0; bottom:0; height:2px; background:rgba(244,241,234,.09); }
.chap__bar i{ display:block; height:100%; width:0; background:var(--iri); }

@media (max-width:900px){
  .chap{ height:180vh; }
  .chap--first{ height:240vh; }
  .chap__media{ width:96vw; }
  .chap__media--tall{ width:min(72vw, 320px); }
  .chap__intro{ top:clamp(92px,13vh,130px); transform:none; }
  .chap__info{
    top:auto; bottom:clamp(40px,7vh,72px); transform:none;
    left:var(--gut); right:var(--gut); max-width:none;
  }
  .chap__facts{ gap:9px; }
  .chap__facts b{ font-size:18px; }
  .chap__facts li{ padding-left:12px; }
  .chap__title{ font-size:clamp(24px,7vw,34px); margin-bottom:14px; }
  .chap__hint{ display:none; }
  .chap__scrim{
    background:linear-gradient(180deg, rgba(6,6,5,.7) 0%, transparent 26%, transparent 46%, rgba(6,6,5,.94) 100%);
  }
}

/* ---------- Бегущая строка ---------- */
.marquee{ border-block:1px solid var(--line-soft); overflow:hidden; padding:18px 0; background:var(--bg); }
.marquee__track{
  display:inline-flex; align-items:center; gap:28px; white-space:nowrap;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(18px,3vw,34px); letter-spacing:-.015em;
  animation:marq 28s linear infinite;
}
.marquee__track .dot{ color:var(--iri-b); font-size:.45em; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================
   МАНИФЕСТ
   ============================================================ */
.manifesto{ padding:clamp(90px,16vh,190px) var(--gut); max-width:1500px; margin:0 auto; }
.manifesto__text{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,5.2vw,76px); line-height:1.08; letter-spacing:-.03em;
}
.manifesto__text span{ display:inline-block; }
.manifesto__text .muted{ color:var(--ink-mute); }
[data-word]{ opacity:.16; transition:opacity .5s var(--ease); }

/* ============================================================
   ТЕХНОЛОГИИ
   ============================================================ */
.tech{ padding:clamp(70px,12vh,140px) var(--gut); max-width:1500px; margin:0 auto; }
.tech__head{ margin-bottom:clamp(40px,7vh,80px); }
.tech__title,.lineup__title,.config__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,6vw,86px); line-height:1; letter-spacing:-.035em;
}
.tech__title span,.outro__title span:last-child{
  background:var(--iri); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tech__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,24px); }
.feat{
  position:relative; border:1px solid var(--line-soft); border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  display:flex; flex-direction:column;
  transition:border-color .4s, transform .5s var(--ease);
}
.feat:hover{ border-color:var(--line); transform:translateY(-5px); }
.feat{ padding:clamp(20px,2.4vw,32px); }
.feat__media{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:#000;
  width:100%; max-width:520px;           /* источники 833-1168px → запас есть */
  border-radius:16px; border:1px solid var(--line-soft);
}
.feat__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.feat:hover .feat__media img{ transform:scale(1.04); }
.feat__body{ padding:clamp(20px,2.4vw,30px) 0 0; display:flex; flex-direction:column; flex:1; }
.feat__spec{ display:inline-flex; align-items:baseline; gap:10px; }
.feat__spec span{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.feat__spec b{ font-family:var(--font-mono); font-size:16px; font-weight:600; }
.feat h3{ font-weight:800; font-size:clamp(20px,2.1vw,27px); letter-spacing:-.022em; line-height:1.15; margin:16px 0 10px; }
.feat p{ color:var(--ink-dim); font-size:15px; line-height:1.55; max-width:46ch; }
.feat__bignum{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(48px,7vw,96px); line-height:1; margin-top:auto; padding-top:24px;
  background:linear-gradient(180deg,#fffdf8,#8f897d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.feat__cap{ font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--ink-mute); text-transform:uppercase; }
@media (max-width:820px){ .tech__grid{ grid-template-columns:1fr; } }

.reveal-up{ opacity:0; transform:translateY(38px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.in{ opacity:1; transform:none; }

/* ============================================================
   ХАРАКТЕРИСТИКИ
   ============================================================ */
.specs{ border-block:1px solid var(--line-soft); }
.specs__inner{
  max-width:1500px; margin:0 auto; padding:clamp(40px,6vh,70px) var(--gut);
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px,6vw,100px);
}
.spec{ display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.spec__k{ font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); }
.spec__v{ font-family:var(--font-mono); font-size:14.5px; font-weight:600; text-align:right; }
@media (max-width:720px){ .specs__inner{ grid-template-columns:1fr; } }

/* ============================================================
   МОДЕЛИ
   ============================================================ */
.lineup{ padding:clamp(80px,13vh,160px) var(--gut); max-width:1500px; margin:0 auto; }
.lineup__head{ text-align:center; margin-bottom:clamp(40px,7vh,80px); }
.lineup__head .section-label{ justify-content:center; }
.lineup__sub{ color:var(--ink-dim); margin-top:14px; font-size:16.5px; }
.lineup__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px);
  max-width:900px; margin-inline:auto;
}
.card{
  position:relative; border:1px solid var(--line-soft); border-radius:24px; overflow:hidden;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  transition:border-color .4s, transform .5s var(--ease);
}
.card:hover{ border-color:var(--line); transform:translateY(-6px); }
.card__media{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; padding:clamp(20px,2.6vw,36px); }
.card__media::before{
  content:""; position:absolute; inset:10% 16%; border-radius:50%; filter:blur(40px);
  background:var(--c-glow,rgba(116,198,255,.3));
}
/* устройство заметно меньше, чтобы не подходило к тексту вплотную */
.card__media img{
  position:relative; width:auto; height:auto;
  max-width:70%; max-height:86%; object-fit:contain;
  transition:transform .9s var(--ease);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.75));
}
.card:hover .card__media img{ transform:scale(1.04); }
.card__badge{
  position:absolute; z-index:2; top:14px; left:14px;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#04120f; background:var(--iri); padding:5px 10px; border-radius:100px;
}
.card__body{ padding:0 clamp(18px,1.8vw,24px) clamp(22px,2.2vw,28px); display:flex; flex-direction:column; gap:8px; flex:1; }
.card__name{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.6vw,23px); letter-spacing:-.025em; }
.card__tag{ color:var(--ink-dim); font-size:13.5px; line-height:1.45; }
.card__spec{ display:flex; flex-direction:column; gap:4px; }
.card__spec span{ font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--ink-mute); }
.card__price-row{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); }
.card__from{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }
.card__price{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2vw,27px); letter-spacing:-.03em; margin-top:3px; }
.card__month{ font-size:12.5px; color:var(--ink-dim); margin-top:3px; }
.card__btn{
  margin-top:16px; display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border:1.5px solid var(--line); border-radius:100px;
  font-family:var(--font-ui); font-size:13.5px; font-weight:700; cursor:pointer;
  background:transparent; color:var(--ink);
  transition:background .35s, color .35s, border-color .35s;
}
.card__btn em{ font-style:normal; transition:transform .35s var(--ease); }
.card__btn:hover{ background:var(--ink); color:#060605; border-color:var(--ink); }
.card__btn:hover em{ transform:translateX(4px); }
.lineup__note{ margin-top:clamp(28px,4vh,44px); text-align:center; font-size:13px; line-height:1.7; color:var(--ink-mute); max-width:68ch; margin-inline:auto; }
@media (max-width:560px){ .lineup__grid{ grid-template-columns:1fr; max-width:420px; } }

/* ---------- Палитра цветов ---------- */
.palette{ margin-top:clamp(44px,7vh,80px); }
.palette__label{
  text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:clamp(20px,3vh,34px);
}
.palette__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,22px);
  max-width:1000px; margin-inline:auto;
}
.swatch{
  appearance:none; -webkit-appearance:none; font-family:inherit; color:inherit;
  border:1px solid var(--line-soft); border-radius:20px; overflow:hidden;
  padding:clamp(12px,1.6vw,22px) clamp(10px,1.2vw,16px) clamp(14px,1.8vw,20px);
  text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  transition:border-color .4s, transform .5s var(--ease);
  cursor:pointer;
}
.swatch:hover{ border-color:var(--line); transform:translateY(-4px); }
.swatch__img{ position:relative; aspect-ratio:1/1.05; display:grid; place-items:center; }
.swatch__img::before{
  content:""; position:absolute; inset:10% 14%; border-radius:50%; filter:blur(26px);
  background:var(--s-glow,rgba(116,198,255,.26));
}
.swatch__img img{
  position:relative; width:auto; height:auto; max-width:76%; max-height:90%;
  object-fit:contain; margin:auto;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.7));
}
.swatch__name{ margin-top:10px; font-size:13px; font-weight:700; letter-spacing:-.01em; }
@media (max-width:640px){ .palette__grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   КОНФИГУРАТОР
   ============================================================ */
.config{ padding:clamp(60px,10vh,120px) var(--gut) clamp(80px,13vh,160px); max-width:1500px; margin:0 auto; }
.config__head{ margin-bottom:clamp(40px,6vh,70px); }
.config__body{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:start; }
.config__preview{
  position:sticky; top:12vh;
  border:1px solid var(--line-soft); border-radius:28px; overflow:hidden;
  padding:clamp(24px,3vw,48px);
  display:flex; flex-direction:column; align-items:center; gap:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)), #000;
}
.config__stage{ position:relative; width:100%; aspect-ratio:1/1; }
.config__glow{
  position:absolute; inset:10%; border-radius:50%; filter:blur(52px);
  background:var(--glow,rgba(116,198,255,.4)); opacity:.55;
  transition:background .6s var(--ease);
}
.config__device{
  position:absolute; inset:7%; width:86%; height:86%;
  object-fit:contain; object-position:center;
  transition:opacity .4s var(--ease), transform .6s var(--ease);
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.8));
}
.config__device.swap{ opacity:0; transform:scale(.96); }
.config__pricetag{ text-align:center; }
.config__price-label{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); display:block; }
.config__price{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,50px); letter-spacing:-.035em; display:block; margin-top:7px; }
.config__price-month{ font-size:13.5px; color:var(--ink-dim); margin-top:5px; display:block; }

.config__group{ margin-bottom:clamp(26px,4vh,40px); }
.config__glabel{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px; }
.config__options{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{
  appearance:none; -webkit-appearance:none;
  position:relative; border:1.5px solid var(--line); border-radius:15px; padding:12px 18px;
  font-family:var(--font-ui); font-size:14.5px; font-weight:700; cursor:pointer;
  background:transparent; color:var(--ink);
  display:flex; flex-direction:column; gap:3px;
  transition:border-color .3s, background .3s;
}
.opt small{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--ink-mute); }
.opt:hover{ border-color:var(--ink-dim); }
.opt.sel{ border-color:var(--ink); background:rgba(244,241,234,.07); }
.opt.sel::after{ content:"✓"; position:absolute; top:7px; right:10px; font-size:11px; color:var(--iri-a); }
.config__options--color .opt{ flex-direction:row; align-items:center; gap:10px; padding:11px 18px 11px 13px; }
.opt__swatch{ width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 1.5px var(--line) inset; flex:none; }

.config__buy{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:19px 26px; border:none; border-radius:100px; cursor:pointer;
  font-family:var(--font-ui); font-size:16.5px; font-weight:800; color:#060605;
  background:var(--iri); background-size:200% 200%;
  transition:background-position .6s, transform .3s, opacity .3s;
}
.config__buy em{ font-style:normal; font-size:20px; }
.config__buy:hover{ background-position:100% 0; transform:translateY(-2px); }
.config__buy:disabled{ opacity:.55; cursor:progress; transform:none; }
.config__disclaimer{ margin-top:16px; font-size:13px; color:var(--ink-mute); line-height:1.6; }
@media (max-width:900px){
  .config__body{ grid-template-columns:1fr; }
  .config__preview{ position:relative; top:0; order:-1; }
}

/* ============================================================
   ФОРМА ЗАЯВКИ
   ============================================================ */
.order{ display:flex; flex-direction:column; gap:16px; }
.order__summary{
  border:1px solid var(--line-soft); border-radius:16px; padding:14px 18px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500; line-height:1.8;
  color:var(--ink-dim); background:rgba(255,255,255,.03);
}
.order__summary b{ color:var(--ink); font-weight:600; }
.order__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .order__row{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{ font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); }
.field__label i{ color:var(--iri-b); font-style:normal; }
.field input, .field textarea{
  width:100%; font-family:var(--font-ui); font-size:15px; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.04); border:1.5px solid var(--line-soft); border-radius:14px;
  padding:13px 16px; transition:border-color .3s, background .3s;
}
.field textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-mute); font-weight:500; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--iri-b); background:rgba(255,255,255,.07); }
.field.bad input, .field.bad textarea{ border-color:var(--err); }
.field__err{
  font-style:normal; font-size:12px; font-weight:600; color:var(--err);
  min-height:0; opacity:0; transition:opacity .25s;
}
.field.bad .field__err, .order__agree.bad .field__err{ opacity:1; }

.order__ways{
  border:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:14px; row-gap:10px;
}
.order__ways legend{ width:100%; margin-bottom:2px; }
.order__ways .way{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-size:14.5px; font-weight:600;
}
.way input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--line); background:transparent; position:relative; cursor:pointer; flex:none; }
.way input:checked{ border-color:var(--iri-b); }
.way input:checked::after{
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--iri-b);
}

.order__agree{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink-dim); cursor:pointer; }
.order__agree input{
  appearance:none; -webkit-appearance:none; width:19px; height:19px; border-radius:6px;
  border:1.5px solid var(--line); background:transparent; position:relative; cursor:pointer; flex:none; margin-top:1px;
}
.order__agree input:checked{ background:var(--iri-b); border-color:var(--iri-b); }
.order__agree input:checked::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:#04120f;
}
.order__agree span{ flex:1; min-width:180px; }
.order__agree i{ color:var(--iri-b); font-style:normal; }
.order__agree .field__err{ width:100%; }
.order__agree.bad input{ border-color:var(--err); }

.order__status{ font-size:13.5px; font-weight:600; line-height:1.6; min-height:1px; }
.order__status.ok{ color:var(--iri-a); }
.order__status.err{ color:var(--err); }

/* ============================================================
   OUTRO
   ============================================================ */
.outro{
  position:relative; min-height:92svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(26px,4vh,44px);
  text-align:center; padding:clamp(80px,12vh,140px) var(--gut); overflow:hidden; background:#000;
}
.outro__aurora{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(46% 42% at 30% 40%, rgba(123,240,198,.20), transparent 62%),
    radial-gradient(46% 42% at 72% 58%, rgba(209,155,255,.20), transparent 62%),
    radial-gradient(58% 46% at 50% 100%, rgba(116,198,255,.22), transparent 64%);
  filter:blur(26px);
}
.outro__device{
  position:relative; z-index:1; width:min(42vw,250px); height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.8));
}
.outro__title{
  position:relative; z-index:1; font-family:var(--font-display); font-weight:800;
  font-size:clamp(38px,8.6vw,126px); line-height:.92; letter-spacing:-.045em;
}
.outro__title span{ display:block; }
.outro__btn{
  position:relative; z-index:1; padding:18px 42px; border-radius:100px;
  border:1.5px solid var(--ink); font-weight:800; font-size:16.5px;
  background:transparent; color:var(--ink); transition:background .35s, color .35s;
}
.outro__btn:hover{ background:var(--ink); color:#060605; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line-soft); padding:clamp(40px,7vh,70px) var(--gut); }
.footer__top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; margin-bottom:36px; }
.footer__brand{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,5.4vw,58px); letter-spacing:-.03em; }
.footer__links{ display:flex; gap:26px; }
.footer__links a{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-dim); transition:color .3s; }
.footer__links a:hover{ color:var(--ink); }
.footer__legal{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-mute); line-height:1.7; }
.footer__legal p{ max-width:56ch; }

/* ---------- Тост ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%);
  z-index:9999; background:var(--ink); color:#060605;
  font-weight:700; font-size:14.5px; padding:15px 26px; border-radius:100px;
  box-shadow:0 20px 50px -15px rgba(0,0,0,.8);
  transition:transform .5s var(--ease); max-width:90vw; text-align:center;
}
.toast.show{ transform:translate(-50%,0); }


/* ============================================================
   СВЕЧЕНИЕ ТЕКСТА ПРИ ОТКРЫТИИ СТРАНИЦЫ
   Анимируем только свечение (не opacity) — иначе конфликт
   со scroll-затуханием, которым управляет JS
   ============================================================ */
@keyframes glowInText{
  0%   { text-shadow:0 0 0 rgba(116,198,255,0); }
  40%  { text-shadow:0 0 24px rgba(116,198,255,.7), 0 0 58px rgba(209,155,255,.42); }
  100% { text-shadow:0 2px 16px rgba(0,0,0,.7); }
}
@keyframes glowInFill{
  0%   { filter:drop-shadow(0 10px 40px rgba(0,0,0,.7)); }
  40%  { filter:drop-shadow(0 10px 40px rgba(0,0,0,.7))
                drop-shadow(0 0 28px rgba(116,198,255,.85))
                drop-shadow(0 0 66px rgba(209,155,255,.5)); }
  100% { filter:drop-shadow(0 10px 40px rgba(0,0,0,.7)); }
}
body.loaded .chap--first .chap__h1-sm { animation:glowInText 2.0s var(--ease) .05s both; }
body.loaded .chap--first .chap__h1-lg { animation:glowInFill 2.6s var(--ease) .18s both; }
body.loaded .chap--first .chap__h1-and{ animation:glowInText 2.1s var(--ease) .42s both; }
body.loaded .chap--first .chap__lead  { animation:glowInText 2.2s var(--ease) .58s both; }
body.loaded .nav__brand               { animation:glowInText 2.0s var(--ease) .3s both; }
body.loaded .marquee__track           { animation:marq 28s linear infinite, glowInText 2.4s var(--ease) .7s both; }

/* ============================================================
   СВЕЧЕНИЕ ПРИ НАЖАТИИ — все интерактивные элементы
   ============================================================ */
@keyframes pressGlow{
  0%   { box-shadow:0 0 0 0 rgba(116,198,255,.55), 0 0 0 0 rgba(209,155,255,.4); }
  55%  { box-shadow:0 0 0 9px rgba(116,198,255,.06), 0 0 34px 8px rgba(209,155,255,.3); }
  100% { box-shadow:0 0 0 20px rgba(116,198,255,0), 0 0 48px 16px rgba(209,155,255,0); }
}
@keyframes pressPulse{
  0%{ transform:scale(1); } 32%{ transform:scale(.972); } 100%{ transform:scale(1); }
}
.is-pressed{
  animation:pressGlow .64s var(--ease), pressPulse .34s var(--ease);
}
/* рябь из точки нажатия */
.ink{
  position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; pointer-events:none; z-index:5;
  background:radial-gradient(circle, rgba(255,255,255,.75), rgba(116,198,255,.45) 40%, transparent 72%);
  animation:inkOut .6s var(--ease) forwards;
}
@keyframes inkOut{
  0%   { transform:scale(0); opacity:.9; }
  100% { transform:scale(13); opacity:0; }
}
/* элементы, внутри которых появляется рябь, должны быть позиционированы */
.config__buy, .card__btn, .opt, .swatch, .outro__btn, .nav__cart{ position:relative; }

/* усиленное свечение при наведении на главные кнопки */
.config__buy{ box-shadow:0 0 0 0 rgba(116,198,255,0); }
.config__buy:hover{ box-shadow:0 0 32px 2px rgba(116,198,255,.34), 0 0 68px 8px rgba(209,155,255,.2); }
.card__btn:hover, .outro__btn:hover{ box-shadow:0 0 26px 0 rgba(116,198,255,.3); }
.opt:hover, .swatch:hover{ box-shadow:0 0 22px -4px rgba(116,198,255,.28); }

/* ============================================================
   УСЛОВИЯ ОПЛАТЫ И ДОСТАВКИ
   ============================================================ */
.terms{ display:flex; flex-direction:column; gap:10px; }
.terms__item{
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:baseline;
  border:1px solid var(--line-soft); border-radius:16px;
  padding:14px 18px; background:rgba(255,255,255,.03);
  transition:border-color .35s, background .35s;
}
.terms__item:hover{ border-color:var(--line); background:rgba(255,255,255,.05); }
.terms__item b{
  font-family:var(--font-display); font-weight:700; font-size:clamp(15px,1.4vw,19px);
  letter-spacing:-.02em; white-space:nowrap;
  background:var(--iri); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.terms__item span{ font-size:13.5px; font-weight:500; line-height:1.5; color:var(--ink-dim); }
@media (max-width:520px){
  .terms__item{ grid-template-columns:1fr; gap:6px; }
}

.config__prepay{
  display:block; margin-top:10px; font-family:var(--font-mono);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--iri-a);
}

/* ============================================================
   ФУТЕР: КОНТАКТЫ И РЕКВИЗИТЫ
   ============================================================ */
.footer__contacts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px);
  padding-bottom:clamp(30px,5vh,48px); margin-bottom:clamp(26px,4vh,40px);
  border-bottom:1px solid var(--line-soft);
}
.footer__ctitle{
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:10px;
}
.footer__ctext{ font-size:14px; font-weight:600; line-height:1.6; color:var(--ink); }
.footer__ctext--mono{ font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--ink-dim); }
.footer__mail{ position:relative; transition:color .3s; }
.footer__mail::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; opacity:.4; transition:opacity .3s;
}
.footer__mail:hover{ color:var(--iri-b); }
.footer__mail:hover::after{ opacity:1; }
@media (max-width:900px){ .footer__contacts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .footer__contacts{ grid-template-columns:1fr; gap:24px; } }

/* ---------- Доступность ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-word]{ opacity:1; }
  .reveal-up{ opacity:1; transform:none; }
  .chap, .chap--first{ height:auto; }
  .chap__sticky{ position:relative; height:auto; padding:120px 0 50px; }
  .chap__intro, .chap__info{
    position:relative; inset:auto; transform:none; left:auto; right:auto;
    max-width:none; margin:24px var(--gut) 0; opacity:1;
  }
  .chap__facts li{ opacity:1; transform:none; border-left-color:var(--iri-b); }
  .chap__scrim{ display:none; }
  .chap__img{ mix-blend-mode:normal; -webkit-mask-image:none; mask-image:none; }
  .is-pressed{ animation:none; }
  .ink{ display:none; }
  body.loaded .chap--first .chap__h1-sm,
  body.loaded .chap--first .chap__h1-lg,
  body.loaded .chap--first .chap__h1-and,
  body.loaded .chap--first .chap__lead,
  body.loaded .nav__brand{ animation:none; }
}