/* ============ Базовые токены ============ */
:root {
  --bg: #000;
  --fg: #f5f5f7;
  --muted: #86868b;
  --accent: #ff7a00;
  --accent-2: #ffa24a;
  --line: rgba(255, 255, 255, .08);
  --card: #101012;
  --nav-h: 52px;
  --phone-em: 10px;          /* масштаб телефонов на главном экране, задаётся из JS */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }   /* скрытое скрыто всегда, даже если у блока свой display */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

.grad {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ Шапка ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: 1120px; height: 100%; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.logo span { color: var(--accent); }
.nav__links { display: flex; gap: 34px; font-size: 13px; color: rgba(245, 245, 247, .8); }
.nav__links a { transition: color .25s; }
.nav__links a:hover { color: #fff; }
.nav__icons { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; transition: background .25s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: rgba(245, 245, 247, .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.burger { display: none; }

/* ============ Главный экран ============ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(var(--nav-h) + 3vh) 0 3.5vh;
  overflow: hidden;
}
.hero__glow {
  position: absolute; left: 50%; top: 58%; width: 1200px; height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 122, 0, .17), rgba(255, 122, 0, .05) 55%, transparent 76%);
  pointer-events: none;
  animation: fadeIn 2.4s ease both .6s;
}
.nowrap { white-space: nowrap; }
@media (max-width: 760px) { .hero__head .grad { display: block; } }
.hero__head { position: relative; z-index: 2; text-align: center; padding: 0 16px; opacity: 0; }
/* заголовок и кнопка появляются, когда телефоны встали на свои места */
.hero.is-ready .hero__head { animation: fadeUp 1.1s var(--ease-out) both; }
.hero.is-ready .hero__cta { animation: fadeUp 1.1s var(--ease-out) both .25s; }
.hero:not(.is-ready) .hero__cta { pointer-events: none; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: clamp(14px, 1.35vw, 19px); margin-bottom: 10px; }
h1 {
  font-size: clamp(30px, min(3.6vw, 5.4vh), 56px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.04;
}

.stage {
  position: relative; width: 100%;
  height: calc(var(--phone-em) * 33 * 1.06);
  margin: 1vh 0;
  cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.stage.is-dragging { cursor: grabbing; }
/* холст 3D-телефонов: чуть выше и ниже сцены, чтобы ничего не обрезалось */
.stage__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }

.hero__cta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; opacity: 0; }
.hero__hint { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.hero__hint i { display: block; width: 18px; height: 1px; background: currentColor; opacity: .6; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 32px; border-radius: 980px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .3s var(--ease-out), background .3s, box-shadow .4s;
}
.btn--primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 34px -10px rgba(255, 122, 0, .7);
}
.btn--primary:hover { background: #ff8c1f; transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 40px -10px rgba(255, 122, 0, .85); }
.btn--primary:active { transform: scale(.98); }

/* ============ iPhone (всё в em: размер задаётся через font-size) ============ */
.phone {
  position: absolute; left: 50%; top: 50%;
  width: 16em; height: 33em; margin: -16.5em 0 0 -8em;
  font-size: var(--phone-em);
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.phone--static { position: relative; left: auto; top: auto; margin: 0; will-change: auto; }
.phone__float { position: absolute; inset: 0; }


/* корпус */
.phone__frame {
  position: absolute; inset: 0; border-radius: 2.6em;
  background: conic-gradient(from 220deg,
    var(--fl) 0deg, var(--fb) 40deg, var(--fd) 100deg, var(--fb) 150deg,
    var(--fl) 182deg, var(--fb) 225deg, var(--fd) 285deg, var(--fb) 330deg, var(--fl) 360deg);
  box-shadow:
    inset .045em .045em .03em rgba(255, 255, 255, .6),
    inset -.045em -.045em .04em rgba(0, 0, 0, .45),
    inset 0 0 0 .09em rgba(0, 0, 0, .12),
    0 0 0 .02em rgba(0, 0, 0, .7),
    0 2.5em 4.5em -1.6em rgba(0, 0, 0, .95);
}
.phone__frame::before { /* световые блики на скруглениях корпуса */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(2.2em 2.2em at 1.2em 1.2em, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(1.6em 3em at calc(100% - .4em) 30%, rgba(255, 255, 255, .25), transparent 70%),
    radial-gradient(2.4em 2.4em at calc(100% - 1.2em) calc(100% - 1.2em), rgba(0, 0, 0, .35), transparent 70%);
}
.phone--pro .phone__frame { /* у титана блики мягче, матовая фаска */
  box-shadow:
    inset .04em .04em .03em rgba(255, 255, 255, .42),
    inset -.04em -.04em .04em rgba(0, 0, 0, .5),
    inset 0 0 0 .1em rgba(0, 0, 0, .2),
    0 0 0 .02em rgba(0, 0, 0, .7),
    0 2.5em 4.5em -1.6em rgba(0, 0, 0, .95);
}

/* антенные вставки на рамке */
.phone__ant { position: absolute; background: var(--fa); opacity: .9; }
.phone__ant.t1, .phone__ant.t2 { top: 0; width: .12em; height: .24em; }
.phone__ant.t1 { left: 3.1em; } .phone__ant.t2 { right: 3.1em; }
.phone__ant.b1, .phone__ant.b2 { bottom: 0; width: .12em; height: .24em; }
.phone__ant.b1 { left: 4.2em; } .phone__ant.b2 { right: 4.2em; }
.phone__ant.s1, .phone__ant.s2 { top: 4.4em; width: .24em; height: .12em; }
.phone__ant.s1 { left: 0; } .phone__ant.s2 { right: 0; }

/* кнопки на торцах */
.phone__btn { position: absolute; width: .3em; border-radius: .3em 0 0 .3em; background: linear-gradient(90deg, var(--fd), var(--fl) 55%, var(--fb)); }
.phone__btn.l1 { left: -.22em; top: 6.4em;  height: 1.9em; }
.phone__btn.l2 { left: -.22em; top: 9.9em;  height: 3.3em; }
.phone__btn.l3 { left: -.22em; top: 14em;   height: 3.3em; }
.phone__btn.r1, .phone__btn.r2 { right: -.22em; border-radius: 0 .3em .3em 0; background: linear-gradient(270deg, var(--fd), var(--fl) 55%, var(--fb)); }
.phone__btn.r1 { top: 10.4em; height: 5.2em; }
.phone__btn.r2 { top: 19.6em; height: 3em; width: .2em; right: -.1em; background: linear-gradient(270deg, #1a1a1c, #4a4a4e); } /* Camera Control */

/* стекло и экран */
.phone__glass {
  position: absolute; inset: .23em; border-radius: 2.38em; background: #000; padding: var(--bz);
  box-shadow:
    0 0 0 .03em #000,
    inset 0 0 0 .03em rgba(255, 255, 255, .14),
    inset .05em .06em .05em rgba(255, 255, 255, .08);
}
.phone__screen {
  -webkit-font-smoothing: antialiased;
  position: relative; height: 100%; overflow: hidden; color: #fff;
  border-radius: calc(2.38em - var(--bz));
  background: #000 center / cover no-repeat;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
.phone__screen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 1.4em rgba(0, 0, 0, .38), inset 0 0 .25em rgba(0, 0, 0, .5);
}
.ps__island {
  position: absolute; top: .66em; left: 50%; width: 5.5em; height: 1.62em; margin-left: -2.75em;
  background: #000; border-radius: 1em; z-index: 3;
}
.ps__island i, .ps__notch i {
  position: absolute; width: .62em; height: .62em; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34405e 0%, #0c1220 45%, #020306 70%);
}
.ps__island i { right: .55em; top: .5em; }
.ps__notch {
  position: absolute; top: 0; left: 50%; width: 7.6em; height: 1.72em; margin-left: -3.8em;
  background: #000; border-radius: 0 0 1.05em 1.05em; z-index: 3;
}
.ps__notch::before, .ps__notch::after { content: ""; position: absolute; top: 0; width: .5em; height: .5em; }
.ps__notch::before { left: -.5em; background: radial-gradient(circle at 0 100%, transparent .5em, #000 .52em); }
.ps__notch::after { right: -.5em; background: radial-gradient(circle at 100% 100%, transparent .5em, #000 .52em); }
.ps__notch i { right: 2em; top: .52em; }

.ps__status {
  position: absolute; top: .98em; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 1.45em 0 2em; font-size: .9em;
}
.phone--notch .ps__status { top: .55em; padding: 0 1.15em 0 1.6em; font-size: .8em; }
.ps__icons { display: flex; align-items: center; gap: .32em; }
.ps__icons svg { width: .95em; height: .95em; fill: #fff; }
.ps__signal { display: flex; align-items: flex-end; gap: .1em; height: .68em; }
.ps__signal i { width: .16em; background: #fff; border-radius: .05em; }
.ps__signal i:nth-child(1) { height: 35%; } .ps__signal i:nth-child(2) { height: 55%; }
.ps__signal i:nth-child(3) { height: 78%; } .ps__signal i:nth-child(4) { height: 100%; }
.ps__bat { position: relative; width: 1.5em; height: .72em; border-radius: .22em; padding: .08em; border: .07em solid rgba(255, 255, 255, .5); }
.ps__bat::before { content: ""; display: block; height: 100%; width: 86%; background: #fff; border-radius: .1em; }
.ps__bat::after { content: ""; position: absolute; right: -.19em; top: .17em; width: .1em; height: .24em; border-radius: 0 .1em .1em 0; background: rgba(255, 255, 255, .5); }

.ps__lockicon { position: absolute; top: 2.75em; left: 50%; width: 1em; height: 1em; margin-left: -.5em; }
.phone--notch .ps__lockicon { top: 2.45em; }
.ps__lockicon svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

.ps__lock { position: absolute; top: 4.15em; left: 0; right: 0; text-align: center; text-shadow: 0 .05em .5em rgba(0, 0, 0, .12); }
.ps__date { font-size: 1.02em; font-weight: 600; opacity: .9; letter-spacing: .005em; }
.ps__date::first-letter { text-transform: uppercase; }
.ps__time { font-size: 5.5em; font-weight: 700; line-height: .98; letter-spacing: -.035em; opacity: .94; }
.ps__widgets { display: flex; justify-content: center; gap: .55em; margin-top: .7em; }
.ps__w {
  position: relative; width: 2.85em; height: 2.85em; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  display: grid; place-items: center;
}
.ps__w::before { /* кольцо-индикатор */
  content: ""; position: absolute; inset: .3em; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--v) * 1%), rgba(255, 255, 255, .25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .2em), #000 calc(100% - .19em));
  mask: radial-gradient(farthest-side, transparent calc(100% - .2em), #000 calc(100% - .19em));
}
.ps__w b { font-size: .78em; font-weight: 700; }
.ps__w--rings i { position: absolute; border-radius: 50%; border: .17em solid rgba(255, 255, 255, .9); border-right-color: rgba(255, 255, 255, .25); }
.ps__w--rings i:nth-child(1) { inset: .32em; transform: rotate(40deg); }
.ps__w--rings i:nth-child(2) { inset: .6em; transform: rotate(-20deg); }
.ps__w--rings i:nth-child(3) { inset: .88em; transform: rotate(80deg); }

.ps__dock { position: absolute; left: 1.75em; right: 1.75em; bottom: 1.9em; display: flex; justify-content: space-between; }
.ps__dock span {
  width: 2.75em; height: 2.75em; border-radius: 50%;
  background: rgba(20, 20, 24, .38); box-shadow: inset 0 0 0 .04em rgba(255, 255, 255, .12);
  display: grid; place-items: center;
}
.ps__dock svg { width: 1.2em; height: 1.2em; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ps__home { position: absolute; left: 50%; bottom: .5em; width: 5.4em; height: .26em; margin-left: -2.7em; border-radius: .2em; background: rgba(255, 255, 255, .9); }

/* отражение на стекле */
.phone__glare {
  position: absolute; inset: .23em; border-radius: 2.38em; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .045) 24%, rgba(255, 255, 255, .015) 40%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(120% 40% at 100% 100%, rgba(255, 255, 255, .05), transparent 60%);
  box-shadow: inset 0 .05em .03em rgba(255, 255, 255, .16);
}

/* настоящее фото телефона (если есть): прячем нарисованный корпус */
.phone--photo .phone__float > :not(.phone__photo):not(.phone__shade) { display: none; }
.phone__photo {
  position: absolute; left: -5%; top: -1.5%; width: 110%; height: 103%;
  object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 2.4em 2.6em rgba(0, 0, 0, .75));
}
.phone--photo .phone__shade {
  inset: -1.5% -5%; border-radius: 0;
  -webkit-mask: var(--photo) center / contain no-repeat;
  mask: var(--photo) center / contain no-repeat;
}

/* затемнение для телефонов сбоку */
.phone__shade {
  position: absolute; inset: -.4em; border-radius: 3em; background: #000;
  opacity: 0; pointer-events: none; will-change: opacity;
}

/* ============ Секции ============ */
.section { padding: 140px 0 0; }
.section__eyebrow { color: var(--accent); font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.section__title { font-size: clamp(32px, 4.4vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.section__lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); margin-top: 14px; max-width: 640px; }

/* История: слова «загораются» по мере прокрутки */
.story__text {
  font-size: clamp(28px, 3.7vw, 52px); font-weight: 700; letter-spacing: -.028em; line-height: 1.16;
  max-width: 980px;
}
.story__text .w { opacity: .18; transition: opacity .25s linear; }
.story__text .w.on { opacity: 1; }
.story__text .w.acc { color: var(--accent); }

/* Путь телефона */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }
.step {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 30px 26px 34px;
  transition: transform .5s var(--ease-out), border-color .4s;
}
.step:hover { transform: translateY(-4px); border-color: rgba(255, 122, 0, .35); }
.step__n { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.step h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin: 44px 0 10px; }
.step p { color: var(--muted); font-size: 15px; }
.step__icon { position: absolute; top: 26px; right: 24px; width: 26px; height: 26px; fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Сервис */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 52px; }
.feature__icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255, 122, 0, .12); margin-bottom: 20px;
}
.feature__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 15px; }

/* Trade-in */
.tradein {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px;
  background: radial-gradient(90% 120% at 100% 100%, rgba(255, 122, 0, .22), transparent 60%), var(--card);
  border: 1px solid var(--line); border-radius: 34px; padding: 64px 60px;
}
.tradein h2 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.tradein__lead { color: var(--muted); font-size: 17px; margin: 14px 0 28px; }
.tradein__phones { position: relative; height: 300px; }
.tradein__phones .phone { position: absolute; font-size: 7.4px; margin: 0; }

.footer { margin-top: 140px; border-top: 1px solid var(--line); padding: 56px 0 40px; background: #0a0a0b; }
.footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.footer__cols a:not(.logo) { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; transition: color .25s; }
.footer__cols a:not(.logo):hover { color: var(--fg); }
.footer__note { color: var(--muted); font-size: 13px; margin-top: 10px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: #6e6e73; font-size: 12px; }

/* Появление при прокрутке */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1.1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============ Адаптив ============ */
@media (max-width: 1020px) {
  .steps, .features { grid-template-columns: repeat(2, 1fr); }
  .tradein { grid-template-columns: 1fr; padding: 48px 32px; }
  .tradein__phones { height: 260px; }
}
@media (max-width: 760px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: rgba(0, 0, 0, .94); padding: 8px 22px 20px; font-size: 20px; font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .section { padding-top: 100px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .container, .nav__inner { padding: 0 16px; }
  .steps, .features { grid-template-columns: 1fr; }
  .btn { font-size: 16px; height: 48px; padding: 0 28px; }
  .tradein { padding: 40px 22px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__head, .hero__cta { opacity: 1; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .story__text .w { opacity: 1; }
}

/* значок с числом товаров на иконке корзины */
.cart-badge {
  position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  pointer-events: none;
}
.cart-badge.is-bump { animation: cartBump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cartBump { 0% { transform: scale(.4); } 100% { transform: scale(1); } }