/* Public title page (/). Moved from the designer's single-file page. */
:root{
  --bg:#15110B; --night:#0A0704; --surface:#211B12; --line:#3A2F20; --line-2:#4A3D2A;
  --text:#FFF4E2; --text-2:#D9CBB4; --muted:#B8A88E;
  --accent:#FF8F1F; --yellow:#FFD23F; --amber:#FFB020; --coral:#FF5E3A;
  --display:'Unbounded', system-ui, sans-serif; --body:'Manrope', system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:1360px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0}
p{margin:0}
.display{font-family:var(--display)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .2s var(--ease),background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:#FFA03F}
.btn-ghost{border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-lg{height:62px;padding:0 36px;font-size:18px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.header.scrolled{background:rgba(21,17,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px}
.logo b{color:var(--accent);font-weight:700}
.nav{display:flex;gap:32px;font-weight:600;font-size:17px}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;gap:12px}
@media (max-width:980px){.nav{display:none}}
@media (max-width:560px){.header .btn-ghost{display:none}}

/* HERO — закреплённая сцена, солнце встаёт при прокрутке */
.hero{position:relative;height:190vh}
.hero-stage{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:120px 24px 0;background:var(--night);overflow:hidden}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:26px;will-change:transform,opacity}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.25}}
.hero h1{max-width:1100px;font-family:var(--display);font-weight:600;font-size:clamp(40px,6.4vw,92px);line-height:1.02;letter-spacing:-1.5px}
.hero h1 span{color:var(--accent)}
.hero .lead{max-width:720px;font-size:clamp(17px,1.6vw,22px);line-height:1.55;color:var(--text-2)}
.hero .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.hero .meta{font-size:15px;color:var(--muted)}
.sunrise{width:100%;max-width:1280px;height:auto;margin-top:24px}
.gap{transform-box:fill-box;transform-origin:center}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:12px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s}
.scroll-hint::after{content:"";width:1.5px;height:34px;background:linear-gradient(var(--muted),transparent);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

section.block{padding:120px 0}
.h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,46px);line-height:1.15}

/* Manifest */
.manifest-top{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-end;margin-bottom:56px}
.manifest-top h2{flex:1 1 560px;font-family:var(--display);font-weight:500;font-size:clamp(28px,3.4vw,48px);line-height:1.2}
.manifest-top h2 em{font-style:normal;color:var(--yellow)}
.manifest-top p{flex:1 1 340px;font-size:18px;line-height:1.6;color:var(--text-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.ray{position:relative;background:var(--surface);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.ray::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c);transform-origin:left}
.ray .tag{font-family:var(--display);font-size:14px;letter-spacing:2px;color:var(--c)}
.ray h3{font-family:var(--display);font-size:28px;font-weight:600}
.ray p{font-size:17px;line-height:1.55;color:var(--text-2)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-top:1px solid var(--line);margin-top:40px}
.step{padding:32px 32px 32px 0;display:flex;flex-direction:column;gap:14px}
.clock{font-family:var(--display);font-size:clamp(44px,5vw,60px);font-weight:600;color:var(--line);font-variant-numeric:tabular-nums;transition:color 1s var(--ease)}
.step.lit .clock{color:var(--sc)}
.step h3{font-size:22px;font-weight:700}
.step p{font-size:17px;line-height:1.55;color:var(--muted)}

/* Pricing */
.pricing-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px}
.pricing-head span{font-size:17px;color:var(--muted)}
.tier{background:var(--surface);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:8px;transition:transform .3s var(--ease)}
.tier:hover{transform:translateY(-6px)}
.tier .name{font-family:var(--display);font-size:14px;letter-spacing:2px;color:var(--muted)}
.tier .term{font-size:20px;font-weight:600;color:var(--text-2)}
.tier .price{font-family:var(--display);font-size:42px;font-weight:600}
.tier .per{font-size:16px;color:var(--muted)}
.tier .btn{margin-top:36px;height:56px;border:1.5px solid var(--accent);color:var(--accent)}
.tier .btn:hover{background:var(--accent);color:var(--bg)}
.tier.zenith{background:var(--accent);color:var(--bg)}
.tier.zenith .name,.tier.zenith .term,.tier.zenith .per{color:var(--bg)}
.tier.zenith .btn{background:var(--bg);border-color:var(--bg);color:var(--text)}
.pill{padding:5px 12px;border-radius:999px;background:var(--bg);color:var(--yellow);font-size:13px;font-weight:700;letter-spacing:0;font-family:var(--body)}
.includes{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:28px;font-size:16px;color:var(--text-2)}
.includes span::before{content:"✓ ";color:var(--yellow)}

/* Download */
.dl{background:var(--surface);border-radius:36px;padding:clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.dl > div{flex:1 1 420px;min-width:0}
.dl p{margin-top:16px;font-size:18px;line-height:1.55;color:var(--muted)}
.dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dl-grid .btn{height:64px;font-size:17px}

/* Final */
.final{padding:120px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;overflow:hidden}
.final h2{max-width:960px;font-family:var(--display);font-weight:600;font-size:clamp(32px,4.6vw,64px);line-height:1.1}
.final h2 span{color:var(--accent)}
.final p{max-width:560px;font-size:19px;line-height:1.55;color:var(--text-2)}
.final svg{width:100%;max-width:1200px;height:auto;margin-top:40px}

footer{border-top:1px solid var(--line)}
footer .wrap{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;font-size:15px;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:12px 28px}
footer nav a:hover{color:var(--text)}

/* ===== Появление при прокрутке (только если включены анимации) ===== */
.anim [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.anim [data-reveal].in{opacity:1;transform:none}
.anim .ray::before{transform:scaleX(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--d,0ms) + 250ms)}
.anim .ray.in::before{transform:scaleX(1)}
.anim .tier[data-reveal]{filter:brightness(.6)}
.anim .tier[data-reveal].in{filter:none;transition:opacity .9s var(--ease),transform .9s var(--ease),filter 1.4s var(--ease);transition-delay:var(--d,0ms)}
.anim .tier.zenith.in{animation:zenith 1.6s var(--ease) calc(var(--d,0ms) + 500ms) 1}
@keyframes zenith{0%{box-shadow:0 0 0 0 rgba(255,143,31,.55)}100%{box-shadow:0 0 0 28px rgba(255,143,31,0)}}
.anim .split-word{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.anim .loaded .split-word{opacity:1;transform:none}

/* ---------- product additions (inline styles of the original moved here: CSP) ---------- */
#rays { transform-origin: 600px 400px; }
.hero h1 .plain { color: inherit; }
.w2 { transition-delay: 120ms; }
.w3 { transition-delay: 240ms; }
.d100 { --d: 100ms; } .d120 { --d: 120ms; } .d150 { --d: 150ms; } .d200 { --d: 200ms; }
.d240 { --d: 240ms; } .d300 { --d: 300ms; } .d360 { --d: 360ms; }
.c-yellow { --c: #FFD23F; } .c-amber { --c: #FFB020; } .c-accent { --c: #FF8F1F; }
.sc-1 { --sc: #6B5230; } .sc-2 { --sc: #FFB020; } .sc-3 { --sc: #FF8F1F; }
section.pt40 { padding-top: 40px; }
.tiers-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tier .name-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier.zenith .term { font-weight: 700; }
.tier.zenith .per { font-weight: 600; }
.tier .old { font-size: 18px; color: var(--muted); text-decoration: line-through; margin-left: 8px; font-family: var(--body); }
.tier.zenith .old { color: var(--bg); opacity: .7; }
.tiers-empty { font-size: 17px; color: var(--text-2); }
.tiers-empty a { color: var(--accent); }
.logo-sm { font-size: 18px; }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .tier { transition: none; } }
html:not(.anim) .step .clock { color: var(--sc); }