/* ===== Новый первый экран (макет) ===== */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gx { syntax: "<percentage>"; initial-value: 0%; inherits: false; }

.hero { position: relative; padding: 70px 0 80px; isolation: isolate; overflow: hidden; }
/* сетка, гаснущая к краям */
.hero::before {
  content: ""; position: absolute; inset: -1px; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 170, 90, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 170, 90, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 75%);
  animation: h2-grid 18s linear infinite;
}
@keyframes h2-grid { to { background-position: center 55px; } }
/* плёночное зерно поверх первого экрана: убирает «пластиковость» градиентов */
.h2-grain {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .035;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* мягкий прожектор за курсором */
.h2-spot {
  position: absolute; left: 0; top: 0; width: 1040px; height: 1040px; margin: -520px 0 0 -520px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255, 122, 26, .13), transparent 60%);
  will-change: transform; transform: translate3d(50vw, 30%, 0);
}

/* плашка сверху */
.h2-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; margin-bottom: 6px;
  border-radius: 999px; font-size: 13px; color: #f3d9c2; position: relative; z-index: 3;
  background: linear-gradient(rgba(20, 14, 9, .75), rgba(20, 14, 9, .75)) padding-box,
              linear-gradient(90deg, rgba(255, 122, 26, .6), rgba(255, 179, 71, .15), rgba(255, 122, 26, .6)) border-box;
  border: 1px solid transparent; backdrop-filter: blur(8px);
}
.h2-badge i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: h2-ping 2s infinite; }
.h2-badge b { font-weight: 600; color: #fff; }
.h2-badge em { font-style: normal; color: var(--muted); }
@keyframes h2-ping { 70% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }

/* сцена: звезда + орбита моделей */
.h2-stage { position: relative; width: min(760px, 100%); height: 350px; margin: 4px auto 0; }
.h2-stage .hero__star { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: 0; transform: translate(-50%, -50%); z-index: 1; }
.h2-stage .hero__star::before { inset: 10%; }
/* кольцо из пыли: задний холст за звездой, передний перед ней (рисует hero2.js) */
.h2-dust { position: absolute; inset: 0; pointer-events: none; }
.h2-dust--back { z-index: 0; }
.h2-dust--front { z-index: 2; }
/* тёплое пятно света под звездой, «пол» */
.h2-floor {
  position: absolute; left: 50%; top: 50%; width: 520px; height: 120px; margin: 120px 0 0 -260px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 122, 26, .28), rgba(255, 122, 26, .08) 45%, transparent 70%);
  filter: blur(6px);
}
.h2-chip {
  position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: #fff7ef;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(40, 30, 22, .78), rgba(16, 12, 9, .86)) padding-box,
              linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .05) 45%, color-mix(in srgb, var(--c) 55%, transparent)) border-box;
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .7), 0 0 26px -6px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
  will-change: transform, opacity; transform: translate(-50%, -50%);
}
.h2-chip i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 14px color-mix(in srgb, var(--c) 45%, transparent);
}
.h2-chip svg { width: 17px; height: 17px; display: block; }

/* заголовок по словам */
.hero__title { position: relative; z-index: 2; }
.hero__title .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotateX(-40deg); filter: blur(10px); transform-origin: 50% 100%; }
.hero.h2-go .hero__title .w { animation: h2-word .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes h2-word { to { opacity: 1; transform: none; filter: blur(0); } }
.hero__title .accent {
  background: linear-gradient(90deg, #ff6a00, #ffb347 25%, #fff0d6 40%, #ffb347 55%, #ff6a00 80%, #ff9a2a) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: h2-shine 6s ease-in-out infinite; filter: drop-shadow(0 6px 30px rgba(255, 122, 26, .35));
}
.hero__title .accent .w { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes h2-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* остальное появляется по очереди */
.h2-in { opacity: 0; transform: translateY(18px); }
.hero.h2-go .h2-in { animation: h2-up .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes h2-up { to { opacity: 1; transform: none; } }

/* кнопки */
.hero__cta .btn { position: relative; overflow: hidden; padding: 15px 28px; font-size: 16px; }
.hero__cta .btn--primary { box-shadow: 0 10px 34px rgba(255, 122, 26, .4), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hero__cta .btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
  animation: h2-sweep 4.5s ease-in-out 2s infinite;
}
.hero__cta .btn--primary:hover::after { animation-duration: 1.1s; }
@keyframes h2-sweep { 0% { left: -80%; } 30%, 100% { left: 130%; } }
.hero__cta .btn--ghost {
  border: 1px solid transparent;
  position: relative;
  background: rgba(16, 12, 8, .85) padding-box;
}
.hero__cta .btn--ghost .h2-ring::before {
  background: conic-gradient(rgba(255, 122, 26, .15), rgba(255, 179, 71, .8), rgba(255, 122, 26, .15) 40%, rgba(255, 255, 255, .12) 70%, rgba(255, 122, 26, .15));
  animation-duration: 5s;
}
.hero__cta .btn--ghost:hover { border-color: transparent; transform: translateY(-2px); }

/* галочки-таблетки */
.hero__checks { gap: 10px; margin-top: 28px; }
.hero__checks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); color: #d8cabd; transition: border-color .25s, transform .25s; }
.hero__checks li:hover { border-color: rgba(255, 122, 26, .45); transform: translateY(-2px); }
.hero__checks li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--accent-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23ff9a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* терминал с бегущей рамкой */
.hero .terminal {
  position: relative; margin-top: 52px; border: 1px solid transparent; overflow: visible;
  background: rgba(12, 9, 6, .92) padding-box;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 122, 26, .08);
}
.hero .terminal::before { content: ""; position: absolute; inset: -30px -40px; z-index: -1; border-radius: 40px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 26, .16), transparent 65%); pointer-events: none; }
.hero .terminal pre { min-height: 98px; line-height: 1.75; white-space: pre-wrap; word-break: break-all; }
.h2-ok { display: block; color: #6fdc9a; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.h2-ok.on { opacity: 1; transform: none; }
.h2-ok span { color: var(--muted); }
.hero .terminal .h2-ring::before {
  background: conic-gradient(rgba(255, 255, 255, .06) 0 60%, rgba(255, 122, 26, .9) 78%, rgba(255, 220, 160, 1) 82%, rgba(255, 122, 26, .9) 86%, rgba(255, 255, 255, .06) 100%);
  animation-duration: 7s;
}
/* кольцо по рамке: маска оставляет только полоску 1px, внутри крутится квадрат с конусным градиентом */
.h2-ring {
  position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.h2-ring::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--d, 800px); height: var(--d, 800px);
  margin: calc(var(--d, 800px) / -2) 0 0 calc(var(--d, 800px) / -2);
  animation: h2-rot 7s linear infinite; will-change: transform;
}
@keyframes h2-rot { to { transform: rotate(360deg); } }

/* телефон */
@media (max-width: 760px) {
  .h2-stage { height: 250px; }
  .h2-stage .hero__star { width: 220px; height: 220px; }
  .h2-floor { width: 300px; height: 80px; margin: 70px 0 0 -150px; }
  .h2-chip { font-size: 11.5px; padding: 4px 10px 4px 4px; gap: 6px; }
  .h2-chip i { width: 19px; height: 19px; }
  .h2-chip svg { width: 12px; height: 12px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 40px; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero__checks li { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .h2-badge i, .hero__title .accent, .hero__cta .btn--primary::after, .hero__cta .btn--ghost, .hero .terminal, .h2-ring::before { animation: none !important; }
  .hero__title .w, .h2-in { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}

/* ===== шапка: парящий стеклянный остров ===== */
.header .logo__mark { position: relative; overflow: hidden; border-radius: 9px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
.header .logo__mark::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -70%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: h2-sweep 6s ease-in-out 1.5s infinite; }
.header .logo:hover .logo__mark { transform: rotate(-10deg) scale(1.08); box-shadow: 0 6px 22px -4px rgba(255, 122, 26, .75); }
.header .logo__text b { background: linear-gradient(100deg, var(--accent) 20%, #ffd9a0 50%, var(--accent) 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: h2-shine 7s ease-in-out infinite; }
.header .btn--primary { position: relative; overflow: hidden; box-shadow: 0 6px 22px -6px rgba(255, 122, 26, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
.header .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: h2-sweep 5s ease-in-out 3s infinite; }
.header .btn--primary:hover::after { animation-duration: 1.1s; }
.h2-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, rgba(255, 122, 26, 0), var(--accent) 30%, #ffd9a0); box-shadow: 0 0 10px rgba(255, 122, 26, .8); pointer-events: none; }

@media (min-width: 861px) {
  /* на всю ширину: стекло, по нижней кромке бегает огонёк */
  .header {
    background: linear-gradient(180deg, rgba(14, 11, 8, .95), rgba(11, 9, 7, .9));
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .8);
    animation: h2-drop .8s cubic-bezier(.22, 1, .36, 1) both;
    transition: box-shadow .45s, background .45s;
  }
  .header::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 26, .2) 20%, rgba(255, 210, 150, .95) 50%, rgba(255, 122, 26, .2) 80%, transparent) no-repeat;
    background-size: 40% 100%; animation: h2-edge 7s ease-in-out infinite;
  }
  .header__inner { position: static; height: 68px; transition: height .45s cubic-bezier(.22, 1, .36, 1); }
  .header.is-scrolled { background: linear-gradient(180deg, rgba(14, 11, 8, .97), rgba(11, 9, 7, .93)); box-shadow: 0 16px 50px -18px rgba(0, 0, 0, .9), 0 0 50px -24px rgba(255, 122, 26, .4); }
  .header.is-scrolled .header__inner { height: 58px; }
  .header .h2-progress { bottom: -1px; z-index: 1; }
  /* меню: светящаяся подложка ездит за курсором */
  .header .nav { position: relative; gap: 2px; padding: 4px; border-radius: 14px; }
  .header .nav a { padding: 8px 14px; border-radius: 10px; z-index: 1; }
  .header .nav a::after { display: none; }
  .header .nav a:hover { transform: none; text-shadow: none; color: var(--text); }
  .header .nav:hover a:not(:hover) { opacity: .6; }
  .header .nav a.active { color: var(--accent); }
  .h2-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; opacity: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 122, 26, .2), rgba(255, 122, 26, .07)); box-shadow: inset 0 0 0 1px rgba(255, 150, 60, .35), 0 6px 20px -8px rgba(255, 122, 26, .7);
    transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), width .45s cubic-bezier(.34, 1.3, .64, 1), opacity .3s; }
  .h2-pill::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffc27a, transparent); box-shadow: 0 0 10px rgba(255, 150, 60, .9); }
  .h2-pill.on { opacity: 1; }
  .header .nav a, .header .lang, .header__actions > * { animation: h2-up .7s cubic-bezier(.22, 1, .36, 1) backwards; }
  .header .nav a:nth-child(1) { animation-delay: .15s; } .header .nav a:nth-child(2) { animation-delay: .2s; } .header .nav a:nth-child(3) { animation-delay: .25s; }
  .header .nav a:nth-child(4) { animation-delay: .3s; } .header .nav a:nth-child(5) { animation-delay: .35s; }
  .header__actions > *:nth-child(1) { animation-delay: .4s; } .header__actions > *:nth-child(2) { animation-delay: .47s; } .header__actions > *:nth-child(3) { animation-delay: .54s; }
}
@keyframes h2-edge { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
@keyframes h2-drop { from { opacity: 0; transform: translateY(-18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .header { border-bottom-color: rgba(255, 122, 26, .14); }
}
@media (prefers-reduced-motion: reduce) {
  .header, .header::before, .header .logo__mark::after, .header .logo__text b, .header .btn--primary::after, .header .nav a, .header__actions > * { animation: none !important; }
  .h2-pill { transition: none; }
}