:root{
  --void:#03040A; --deep:#070B16; --panel:rgba(140,160,220,.055);
  --panel2:rgba(140,160,220,.10); --brd:rgba(170,190,255,.13); --brd2:rgba(170,190,255,.26);
  --txt:#DCE4FA; --head:#F2F5FF; --muted:#8590B4;
  --gold:#E3C08A; --aura:#6E8BFF; --jade:#4FBFA8;
  --sh:0 30px 80px -40px rgba(0,0,0,.95);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--txt);
  font-family:'Manrope',system-ui,sans-serif; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* ---------- космический фон ---------- */
#stars{position:fixed; inset:0; z-index:0; pointer-events:none}
.veil{position:absolute; left:0; right:0; bottom:0; height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--void))}
.nebula-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.hero .nebula-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(3,4,10,.82) 0%,rgba(3,4,10,.52) 38%,rgba(3,4,10,.12) 66%,transparent 84%)}
@media(max-width:960px){
  .hero .nebula-bg::after{background:linear-gradient(180deg,rgba(3,4,10,.62),rgba(3,4,10,.86))}
}
.nebula-bg img{width:100%; height:100%; object-fit:cover; opacity:.49;
  mask-image:radial-gradient(105% 92% at 60% 32%,#000 42%,transparent 92%);
  -webkit-mask-image:radial-gradient(105% 92% at 60% 32%,#000 42%,transparent 92%)}
/* ---------- планеты ---------- */
.planet{position:absolute; pointer-events:none; user-select:none; z-index:1; height:auto;
  will-change:transform; filter:brightness(.42) saturate(.6) contrast(.95);
  transition:filter 1.6s ease}
.planet.lit{filter:brightness(1) saturate(1.04)
  drop-shadow(0 0 44px rgba(227,192,138,.38)) drop-shadow(0 0 120px rgba(227,192,138,.16))}
.p-ice.lit{filter:brightness(1) saturate(1.08)
  drop-shadow(0 0 44px rgba(110,139,255,.5)) drop-shadow(0 0 120px rgba(110,139,255,.2))}
.planet-hit{position:absolute; z-index:2; padding:0; border:0; background:none; cursor:pointer;
  line-height:0; will-change:transform; -webkit-tap-highlight-color:transparent}
.planet-hit .planet{position:static; transition:filter 1.6s ease, transform .5s cubic-bezier(.22,.9,.3,1)}
.planet-hit:hover .planet,.planet-hit:focus-visible .planet{transform:scale(1.07)}
.planet-hit:hover .planet.lit{filter:brightness(1.18) saturate(1.12)
  drop-shadow(0 0 60px rgba(227,192,138,.6)) drop-shadow(0 0 150px rgba(227,192,138,.26))}
.planet-hit:hover .p-ice.lit{filter:brightness(1.18) saturate(1.15)
  drop-shadow(0 0 60px rgba(126,158,255,.66)) drop-shadow(0 0 150px rgba(126,158,255,.28))}
.planet-hit .hint{position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#8A95BA; white-space:nowrap; opacity:0; transition:opacity .35s ease; pointer-events:none}
.planet-hit:hover .hint,.planet-hit:focus-visible .hint{opacity:1}
/* ---------- страница планеты ---------- */
.pp{position:fixed; inset:0; z-index:90; background:#03040A; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s;
  padding:22px 22px 70px}
.pp.open{opacity:1; visibility:visible}
.pp-back{display:inline-flex; align-items:center; gap:10px; background:rgba(140,160,220,.08);
  border:1px solid var(--brd2); color:var(--txt); border-radius:999px; padding:11px 20px 11px 15px;
  font-family:'Manrope',sans-serif; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background .2s, transform .2s}
.pp-back:hover{background:rgba(140,160,220,.16); transform:translateX(-3px)}
.pp-inner{max-width:1080px; margin:26px auto 0; display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:52px; align-items:center}
.pp-visual{position:relative; display:grid; place-items:center; min-height:300px}
.pp-visual::after{content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(227,192,138,.2),transparent 68%); z-index:0}
.pp-visual.cool::after{background:radial-gradient(circle,rgba(126,158,255,.24),transparent 68%)}
.pp-visual img{position:relative; z-index:1; width:100%; height:auto;
  filter:drop-shadow(0 0 70px rgba(227,192,138,.32)); animation:float 9s ease-in-out infinite}
.pp-visual.cool img{filter:drop-shadow(0 0 70px rgba(126,158,255,.4))}
@keyframes float{50%{transform:translateY(-14px)}}
.pp h2{font-size:clamp(40px,6vw,68px); line-height:1.04; margin:12px 0 14px}
.pp .sub{color:var(--muted); font-size:17px; max-width:52ch; line-height:1.75}
.pp-specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px 26px;
  margin:30px 0; border-top:1px solid rgba(170,190,255,.14)}
.pp-specs div{padding:13px 0; border-bottom:1px solid rgba(170,190,255,.09)}
.pp-specs dt{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#6F7A9E; margin-bottom:5px}
.pp-specs dd{margin:0; font-family:'JetBrains Mono',monospace; font-size:16px; color:var(--head)}
.pp-mean{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.pp-mean article{background:rgba(140,160,220,.055); border:1px solid var(--brd); border-radius:16px; padding:20px 22px}
.pp-mean h3{font-size:21px; margin-bottom:9px}
.pp-mean p{font-size:14.5px; color:var(--muted); line-height:1.7}
.pp-mean .tagline{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px}
@media(max-width:900px){
  .pp-inner{grid-template-columns:1fr; gap:28px; margin-top:18px}
  .pp-visual{min-height:0; max-width:290px; margin:0 auto}
}
.p-jupiter{width:280px}
/* 139 820 км */
.p-ringed{width:360px}
/* 116 460 км + кольца */
.p-ice{width:158px}
/*  49 244 км */
.p-venus{width:104px}
/*  12 104 км */
.p-mars{width:82px}
/*   6 779 км */
.p-venus.lit{filter:brightness(1) saturate(1.04)
  drop-shadow(0 0 36px rgba(255,232,196,.42)) drop-shadow(0 0 96px rgba(255,232,196,.18))}
.p-mars.lit{filter:brightness(1) saturate(1.08)
  drop-shadow(0 0 32px rgba(232,140,96,.5)) drop-shadow(0 0 88px rgba(232,140,96,.2))}
.planet-hit:hover .p-venus.lit{filter:brightness(1.16) saturate(1.1)
  drop-shadow(0 0 52px rgba(255,232,196,.6)) drop-shadow(0 0 130px rgba(255,232,196,.26))}
.planet-hit:hover .p-mars.lit{filter:brightness(1.16) saturate(1.14)
  drop-shadow(0 0 46px rgba(232,140,96,.66)) drop-shadow(0 0 120px rgba(232,140,96,.28))}
@media(max-width:900px){
  .p-jupiter{width:170px} .p-ringed{width:220px} .p-ice{width:100px}
  .p-venus{width:66px} .p-mars{width:54px}
}
/* сияющая звезда */
.starburst{position:absolute; width:8px; height:8px; border-radius:50%; background:#fff;
  box-shadow:0 0 22px 7px rgba(227,192,138,.75), 0 0 60px 18px rgba(110,139,255,.4); z-index:1}
.starburst::before,.starburst::after{content:""; position:absolute; left:50%; top:50%;
  background:linear-gradient(to right,transparent,rgba(255,244,224,.85),transparent)}
.starburst::before{width:180px; height:1.5px; margin:-.75px 0 0 -90px}
.starburst::after{width:1.5px; height:180px; margin:-90px 0 0 -.75px;
  background:linear-gradient(to bottom,transparent,rgba(255,244,224,.85),transparent)}
@keyframes twinkle{0%,100%{opacity:.55; transform:scale(.94)} 50%{opacity:1; transform:scale(1.06)}}
.starburst{animation:twinkle 5s ease-in-out infinite}
/* ---------- типографика ---------- */
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; margin:0;
  color:var(--head); text-wrap:balance; letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums}
.gold{color:var(--gold)}
.wrap{max-width:1160px; margin:0 auto; padding:0 22px; position:relative; z-index:3}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.eyebrow i{width:14px; height:1px; background:var(--gold); font-style:normal}
.panel{background:var(--panel); border:1px solid var(--brd); border-radius:20px;
  backdrop-filter:blur(18px); box-shadow:var(--sh); position:relative; overflow:hidden}
.panel::before{content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(190,205,255,.30),transparent)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Manrope',sans-serif; font-size:15px; font-weight:600; letter-spacing:.01em;
  padding:15px 28px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.btn-gold{background:linear-gradient(180deg,#F0D3A4,#D9B076); color:#241A0C;
  box-shadow:0 14px 40px -14px rgba(227,192,138,.6)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 20px 54px -14px rgba(227,192,138,.8)}
.btn-ghost{background:rgba(140,160,220,.07); color:var(--txt); border-color:var(--brd2)}
.btn-ghost:hover{background:rgba(140,160,220,.14); transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
/* ---------- шапка ---------- */
.hdr{position:sticky; top:0; z-index:40; backdrop-filter:blur(16px);
  background:rgba(3,4,10,.72); border-bottom:1px solid rgba(170,190,255,.09)}
.hdr .wrap{display:flex; align-items:center; gap:26px; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-family:'Cormorant Garamond',serif;
  font-weight:500; font-size:22px; color:var(--head); letter-spacing:.01em}
.brand .glyph{width:34px; height:34px; border-radius:50%; border:1px solid rgba(227,192,138,.5);
  display:grid; place-items:center; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold);
  box-shadow:0 0 26px -6px rgba(227,192,138,.6)}
.nav{display:flex; gap:28px; margin-left:auto; font-size:14.5px; color:var(--muted); font-weight:500}
.nav a{text-decoration:none; transition:color .2s}
.nav a:hover{color:var(--head)}
.hdr .btn{padding:11px 22px; font-size:14px}
@media(max-width:900px){.nav{display:none}}
/* ---------- герой ---------- */
.hero{position:relative; padding:72px 0 78px; isolation:isolate}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,452px); gap:52px; align-items:start}
.hero h1{font-size:clamp(40px,5.6vw,72px); line-height:1.03; margin:18px 0 20px}
.hero h1 span{display:block; font-style:italic; color:var(--gold)}
.lede{font-size:18px; color:var(--muted); max-width:46ch; line-height:1.75}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap; margin-top:34px}
.facts{display:flex; gap:30px; flex-wrap:wrap; margin-top:34px; padding-top:24px;
  border-top:1px solid rgba(170,190,255,.11)}
.fact b{display:block; font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:500; color:var(--head)}
.fact span{font-size:12.5px; color:var(--muted)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr; gap:40px} .hero{padding:56px 0 48px}}
/* ---------- секции ---------- */
section{position:relative; padding:98px 0}
.sec-head{margin-bottom:44px; max-width:62ch}
.sec-head h2{font-size:clamp(30px,4.4vw,50px); line-height:1.1; margin:14px 0 14px}
.sec-head h2 em{font-style:italic; color:var(--gold)}
.sec-head p{color:var(--muted); font-size:16.5px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px}
.card{padding:28px; display:flex; flex-direction:column; gap:13px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-5px); border-color:var(--brd2);
  box-shadow:0 40px 90px -44px rgba(110,139,255,.5)}
.card h3{font-size:25px}
.card p{font-size:14.5px; color:var(--muted); flex:1; line-height:1.65}
.card .price{font-family:'JetBrains Mono',monospace; font-size:23px; color:var(--head)}
.card .price small{font-family:'Manrope',sans-serif; font-size:12.5px; color:var(--muted); font-weight:600}
.chip{align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid}
.chip.free{color:var(--jade); border-color:rgba(79,191,168,.4); background:rgba(79,191,168,.09)}
.chip.new{color:var(--gold); border-color:rgba(227,192,138,.42); background:rgba(227,192,138,.09)}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px}
.step .n{font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--gold); line-height:1}
.step h3{font-size:21px; margin-top:6px}
.step p{font-size:14.5px; color:var(--muted)}
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(208px,1fr)); gap:26px; font-size:14.5px}
.trust dt{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.trust dd{margin:0; line-height:1.65; color:var(--txt)}
.trust a{color:var(--txt); text-decoration:none; border-bottom:1px solid var(--brd2)}
details{padding:2px 24px; margin-bottom:11px}
summary{cursor:pointer; padding:19px 0; font-size:17px; font-weight:600; color:var(--head); list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:'JetBrains Mono',monospace; font-size:19px; color:var(--gold)}
details[open] summary::after{content:"−"}
details p{padding:0 0 20px; color:var(--muted); font-size:15px; max-width:72ch}
.cta{padding:60px 30px; text-align:center}
.cta h2{font-size:clamp(28px,4vw,44px); margin-bottom:16px}
.cta p{color:var(--muted); max-width:50ch; margin:0 auto 30px}
footer{position:relative; z-index:3; border-top:1px solid rgba(170,190,255,.10);
  padding:56px 0 38px; color:var(--muted); font-size:14px; background:rgba(3,4,10,.6)}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; margin-bottom:34px}
footer h4{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 13px; font-weight:500}
footer a{display:block; text-decoration:none; padding:4px 0; transition:color .2s}
footer a:hover{color:var(--gold)}
.foot-legal{border-top:1px solid rgba(170,190,255,.10); padding-top:24px; line-height:1.85; font-size:12.5px}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
  .planet{filter:brightness(1) !important}
}