:root{
  --night:#030717;
  --night-2:#071025;
  --surface:rgba(10,19,45,.72);
  --surface-strong:rgba(14,25,58,.9);
  --surface-soft:rgba(17,28,62,.54);
  --gold:#e3b35d;
  --gold-bright:#f7d78f;
  --gold-pale:#fff0c5;
  --gold-dim:rgba(227,179,93,.42);
  --text:#f1e8d5;
  --text-soft:#c5baa3;
  --muted:#948b7b;
  --line:rgba(227,179,93,.2);
  --line-strong:rgba(244,208,131,.48);
  --danger:#d68072;
  --serif:'Cinzel', Georgia, serif;
  --body:'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --poetic:'Cormorant Garamond', Georgia, serif;
  --shadow:0 24px 70px rgba(0,0,0,.44);
  --shell:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--body);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,a{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nebula{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(55% 45% at 13% 58%,rgba(128,87,188,.12),transparent 67%),
  radial-gradient(52% 50% at 88% 42%,rgba(227,179,93,.08),transparent 70%),
  radial-gradient(70% 60% at 50% 100%,rgba(47,38,120,.18),transparent 70%)}
.sparks{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.spark{position:absolute;will-change:transform,opacity;animation:drift var(--d) ease-in-out infinite alternate,tw var(--t) ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(244,208,131,.48))}
.spark svg{display:block;width:100%;height:100%}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(var(--tx),var(--ty),0) rotate(var(--r))}}
@keyframes tw{0%,100%{opacity:.14}50%{opacity:.78}}

.hero{position:relative;z-index:2;width:100%;min-height:clamp(520px,74vw,940px);overflow:hidden;background:#020511}
.hero-art{width:100%;height:auto;min-height:520px;display:block;object-fit:cover;object-position:center top}
#hero-stars{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hero-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(180deg,rgba(3,7,23,.03) 0%,rgba(3,7,23,.04) 48%,rgba(3,7,23,.74) 80%,var(--night) 100%),
  linear-gradient(90deg,rgba(3,7,23,.2),transparent 26%,transparent 76%,rgba(3,7,23,.17))}
.hero-actions{position:absolute;z-index:4;left:50%;bottom:7%;transform:translateX(-50%);display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:min(94%,760px)}
.scroll-cue{position:absolute;z-index:4;left:50%;bottom:1.8%;transform:translateX(-50%);font-size:28px;color:var(--gold-bright);opacity:.82;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--line-strong);letter-spacing:.01em;font-weight:600;transition:.24s ease;cursor:pointer}
.pill-primary{background:linear-gradient(180deg,#26386d,#111f45);color:var(--gold-pale);box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06)}
.pill-primary:hover{transform:translateY(-2px);border-color:var(--gold-bright);box-shadow:0 18px 38px rgba(0,0,0,.44),0 0 28px rgba(227,179,93,.12)}
.pill-glass{background:rgba(5,10,27,.58);backdrop-filter:blur(12px);color:var(--gold-bright)}
.pill-glass:hover{transform:translateY(-2px);background:rgba(24,29,60,.72)}

main{position:relative;z-index:2}
.shell{width:min(var(--shell),calc(100% - 36px));margin:0 auto}
.section{padding:clamp(68px,8vw,112px) 0;position:relative}
.section-head{max-width:780px;margin:0 auto 54px;text-align:center}
.eyebrow{margin:0 0 12px;color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase}
.eyebrow.align-left{text-align:left}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--gold-bright);line-height:1.18}
h1{font-size:clamp(31px,5vw,52px);margin:0 0 18px}
h2{font-size:clamp(28px,4.2vw,43px);margin:0 0 16px}
h3{font-size:18px}
.section-head p:last-child,.story-copy>p,.premium-lead,.store-copy>p{color:var(--text-soft);font-weight:300}

.launcher-section{padding-top:86px}
.launcher{display:grid;grid-template-columns:repeat(5,1fr);gap:34px 18px;align-items:start;justify-items:center;max-width:1080px;margin:0 auto 52px}
.orbit-item{appearance:none;border:0;background:none;padding:0;width:100%;display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;color:var(--text);transition:transform .22s ease}
.orbit-item:hover,.orbit-item.active{transform:translateY(-4px)}
.medallion{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;position:relative;background:
  radial-gradient(circle at 50% 38%,rgba(44,60,114,.9),rgba(8,15,39,.97) 68%);border:1px solid rgba(244,208,131,.7);box-shadow:
  inset 0 0 0 5px rgba(227,179,93,.05),
  inset 0 0 28px rgba(86,99,190,.12),
  0 14px 34px rgba(0,0,0,.4),
  0 0 0 1px rgba(227,179,93,.08),
  0 0 28px rgba(227,179,93,.08);transition:.25s ease}
.medallion::before,.medallion::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.medallion::before{inset:8px;border:1px solid rgba(227,179,93,.18)}
.medallion::after{inset:-7px;border:1px solid transparent;background:conic-gradient(from 30deg,transparent 0 16%,rgba(244,208,131,.44) 18%,transparent 21% 48%,rgba(244,208,131,.26) 50%,transparent 53% 82%,rgba(244,208,131,.35) 84%,transparent 87%) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:.25s ease}
.orbit-item:hover .medallion,.orbit-item.active .medallion{border-color:var(--gold-bright);box-shadow:inset 0 0 0 5px rgba(227,179,93,.06),0 18px 38px rgba(0,0,0,.48),0 0 40px rgba(227,179,93,.18)}
.orbit-item:hover .medallion::after,.orbit-item.active .medallion::after{opacity:1;transform:rotate(8deg)}
.glyph{font-family:var(--serif);font-size:38px;color:var(--gold-bright);text-shadow:0 0 18px rgba(244,208,131,.48)}
.glyph-hand{font-family:var(--poetic);font-size:48px;transform:rotate(-14deg)}
.feature-name{font-family:var(--serif);font-size:13px;line-height:1.25;text-align:center;margin-top:14px;color:var(--text)}
.tier{margin-top:7px;border-radius:99px;padding:3px 8px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);color:var(--muted);background:rgba(5,10,28,.62)}
.tier-free{color:#d9cba7}
.tier-premium{color:var(--gold-bright);border-color:rgba(227,179,93,.4);background:rgba(61,45,19,.24)}
.tier-mixed{color:#d9bd7b}

.feature-stage{position:relative;max-width:980px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:28px 30px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(135deg,rgba(15,27,62,.88),rgba(5,11,30,.78));box-shadow:var(--shadow);overflow:hidden}
.feature-stage::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-220px;top:-300px;background:radial-gradient(circle,rgba(227,179,93,.12),transparent 70%);pointer-events:none}
.stage-orb{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(244,208,131,.55);background:radial-gradient(circle at 50% 35%,#273c77,#0a1231 70%);box-shadow:0 0 28px rgba(227,179,93,.12)}
.stage-orb span{font-family:var(--serif);font-size:29px;color:var(--gold-bright)}
.stage-topline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stage-kicker{font-family:var(--serif);font-size:12px;color:var(--gold);letter-spacing:.13em;text-transform:uppercase}
.stage-badge{font-size:10px;padding:3px 8px;border-radius:99px;border:1px solid rgba(227,179,93,.26);color:var(--text-soft)}
.stage-copy h2{font-size:clamp(23px,3vw,31px);margin:8px 0 7px}
.stage-copy p{margin:0;color:var(--text-soft);font-size:14px;max-width:680px}
.stage-points{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:13px;color:var(--muted);font-size:11px}
.stage-cta{position:relative;z-index:2;white-space:nowrap;border:1px solid var(--line-strong);background:rgba(8,16,38,.78);color:var(--gold-bright);border-radius:99px;padding:12px 18px;cursor:pointer;transition:.2s ease}
.stage-cta:hover{background:rgba(28,37,72,.95);transform:translateY(-1px)}

.story-grid{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:clamp(44px,7vw,92px);align-items:center}
.phone-frame{width:min(100%,390px);margin:0 auto;border-radius:50px;padding:12px;position:relative;background:linear-gradient(155deg,#2a2c43,#070a17 48%,#171a31);box-shadow:0 36px 90px rgba(0,0,0,.55),0 0 0 1px rgba(227,179,93,.2),0 0 70px rgba(88,78,170,.15)}
.phone-speaker{position:absolute;z-index:3;top:19px;left:50%;transform:translateX(-50%);width:78px;height:5px;border-radius:10px;background:rgba(255,255,255,.18)}
.phone-screen{min-height:590px;border-radius:40px;overflow:hidden;padding:44px 22px 28px;position:relative;background:radial-gradient(90% 62% at 50% 0%,#263968 0%,#101a3a 48%,#070b1d 100%)}
.phone-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.025),transparent 28%);pointer-events:none}
.phone-stars{position:absolute;inset:0;opacity:.32;background-image:radial-gradient(circle at 12% 10%,#fff 0 1px,transparent 1.2px),radial-gradient(circle at 73% 20%,#f7d78f 0 1px,transparent 1.4px),radial-gradient(circle at 35% 36%,#fff 0 1px,transparent 1.3px),radial-gradient(circle at 82% 52%,#fff 0 .8px,transparent 1.1px),radial-gradient(circle at 20% 72%,#f7d78f 0 .8px,transparent 1.1px);background-size:130px 130px,180px 180px,110px 110px,150px 150px,170px 170px}
.mini-logo,.mini-tag,.mini-orb,.mini-title,.big-three,.mini-panel{position:relative;z-index:1}
.mini-logo{text-align:center;font-family:var(--serif);font-size:20px;letter-spacing:.16em;color:var(--gold-bright)}
.mini-tag{text-align:center;font-size:8px;letter-spacing:.3em;color:var(--gold);margin-top:5px}
.mini-orb{width:102px;height:102px;margin:24px auto 15px;border-radius:50%;display:grid;place-items:center;font-size:32px;color:var(--gold-bright);border:1px solid rgba(244,208,131,.6);box-shadow:inset 0 0 34px rgba(94,112,210,.2),0 0 35px rgba(227,179,93,.12);background:radial-gradient(circle,#24376d,#09122e 70%)}
.mini-title{text-align:center;font-family:var(--poetic);font-size:25px;color:#f5ead0;margin-bottom:18px}
.big-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.big-three>div{padding:12px 7px;border:1px solid rgba(227,179,93,.18);border-radius:14px;background:rgba(8,15,35,.58);text-align:center}
.big-three span{display:block;font-size:21px;color:var(--gold-bright)}
.big-three small{display:block;color:var(--muted);font-size:9px;margin:3px 0}.big-three b{display:block;color:var(--text);font-size:9px;font-weight:500}
.mini-panel{margin-top:12px;border:1px solid rgba(227,179,93,.18);border-radius:15px;padding:12px 13px;background:rgba(8,15,35,.55)}
.mini-panel span{display:block;color:var(--gold);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.mini-panel b{display:block;color:var(--text-soft);font-size:10px;font-weight:500;margin-top:3px}.mini-panel.accent{border-color:rgba(227,179,93,.45);box-shadow:inset 0 0 22px rgba(227,179,93,.04)}
.story-copy h2{text-align:left;max-width:700px}.story-copy>p{font-size:15px;max-width:650px}
.story-list{margin-top:30px;display:grid;gap:14px}.story-list>div{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px 0;border-top:1px solid rgba(227,179,93,.13)}.story-list span{font-family:var(--serif);font-size:11px;color:var(--gold);padding-top:3px}.story-list p{margin:0;color:var(--text-soft);font-size:14px}.story-list b{color:var(--text);font-weight:600}

.premium-section{padding-top:72px}
.premium-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:42px;padding:clamp(30px,5vw,58px);border-radius:32px;border:1px solid rgba(227,179,93,.32);background:linear-gradient(135deg,rgba(18,29,66,.9),rgba(5,10,28,.93));box-shadow:var(--shadow);overflow:hidden}
.premium-glow{position:absolute;width:620px;height:620px;border-radius:50%;left:-250px;bottom:-480px;background:radial-gradient(circle,rgba(227,179,93,.14),transparent 68%);pointer-events:none}
.premium-copy,.checkout-card{position:relative;z-index:1}
.premium-copy h2{text-align:left;max-width:670px}
.premium-lead{max-width:720px;margin-bottom:28px}
.premium-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.premium-columns>div{padding:18px 20px;border:1px solid rgba(227,179,93,.13);border-radius:18px;background:rgba(4,10,28,.34)}
.premium-columns h3{font-size:14px;margin:0 0 12px;color:var(--text)}
.premium-columns ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}.premium-columns li{position:relative;padding-left:20px;color:var(--text-soft);font-size:12px}.premium-columns li::before{content:"✓";position:absolute;left:0;color:var(--gold)}.premium-unlocks li::before{content:"✦"}
.checkout-card{align-self:center;padding:28px 24px;border:1px solid rgba(244,208,131,.45);border-radius:24px;background:radial-gradient(120% 100% at 50% 0%,rgba(51,62,112,.45),rgba(8,14,34,.82));text-align:center;box-shadow:0 20px 48px rgba(0,0,0,.36)}
.lock-mark{width:68px;height:68px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;color:var(--gold-bright);font-size:24px;border:1px solid rgba(244,208,131,.58);box-shadow:0 0 28px rgba(227,179,93,.14)}
.checkout-label{font-size:9px;letter-spacing:.22em;color:var(--gold);font-weight:600}.checkout-card h3{font-size:21px;margin:8px 0}.checkout-card p{font-size:12px;color:var(--text-soft);margin:0 0 18px}.price-placeholder{font-family:var(--poetic);font-size:24px;color:var(--gold-pale);margin-bottom:15px}
.paypal-launch{width:100%;border:0;border-radius:999px;padding:13px 16px;background:#ffc439;color:#111;font-weight:700;cursor:pointer;transition:.2s ease;box-shadow:0 10px 25px rgba(0,0,0,.28)}.paypal-launch:hover{transform:translateY(-2px);filter:brightness(1.04)}
.restore-link{border:0;background:none;color:var(--text-soft);text-decoration:underline;text-underline-offset:3px;font-size:11px;margin:12px auto;cursor:pointer}.checkout-card small{display:block;color:var(--muted);font-size:9px;line-height:1.55}

.store-card{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:36px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 20px}.store-copy h2{text-align:left}.store-copy>p{max-width:700px}.store-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.store-actions button{background:rgba(5,10,28,.5)}
.qr-wrap{position:relative;justify-self:center;text-align:center;padding:18px}.qr-wrap img{width:150px;height:150px;display:block;border-radius:17px;padding:11px;background:#fff;position:relative;z-index:1;box-shadow:0 18px 50px rgba(0,0,0,.38)}.qr-wrap span{display:block;margin-top:12px;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.qr-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(227,179,93,.18),transparent 68%);filter:blur(12px)}
.trust-section{padding-top:34px}.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.trust-row>div{padding:24px 20px;border:1px solid rgba(227,179,93,.13);border-radius:18px;background:rgba(8,15,36,.48);text-align:center}.trust-row span{display:block;color:var(--gold-bright);font-size:22px}.trust-row b{display:block;font-family:var(--serif);font-size:12px;color:var(--text);margin:8px 0 4px}.trust-row small{color:var(--muted);font-size:10px}

.site-footer{position:relative;z-index:2;text-align:center;padding:54px 20px 42px;border-top:1px solid rgba(227,179,93,.13);background:linear-gradient(180deg,transparent,rgba(2,5,16,.52))}.footer-mark{font-family:var(--serif);letter-spacing:.18em;color:var(--gold-bright);font-size:15px}.footer-mark span{color:var(--gold)}.site-footer p{font-family:var(--poetic);font-size:17px;color:var(--muted);margin:5px 0 16px}.site-footer nav{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;color:var(--text-soft);font-size:11px}.site-footer a:hover{color:var(--gold-bright)}.site-footer small{display:block;color:#726b61;margin-top:18px;font-size:10px}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .72s ease,transform .72s ease}.reveal.in{opacity:1;transform:none}

.modal{width:min(560px,calc(100% - 30px));border:1px solid rgba(244,208,131,.42);border-radius:26px;padding:38px 34px;background:linear-gradient(145deg,#101b3e,#060b20 72%);color:var(--text);box-shadow:0 32px 100px rgba(0,0,0,.7);text-align:center}.modal::backdrop{background:rgba(1,3,12,.78);backdrop-filter:blur(8px)}.modal-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(227,179,93,.18);background:rgba(6,10,26,.55);color:var(--text-soft);font-size:22px;cursor:pointer}.modal-icon{width:76px;height:76px;border-radius:50%;margin:0 auto 15px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--gold-bright);font-family:var(--serif);font-size:27px;box-shadow:0 0 30px rgba(227,179,93,.1)}.modal h2{font-size:27px;margin:5px 0 12px}.modal>p:not(.eyebrow){color:var(--text-soft);font-size:13px}.modal-status{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:10px 14px;border-radius:99px;background:rgba(4,9,24,.55);color:var(--muted);font-size:10px}.modal-status span{width:7px;height:7px;border-radius:50%;background:#76c8a5;box-shadow:0 0 10px rgba(118,200,165,.5)}.paypal-icon{font-family:Arial,sans-serif;font-weight:800;color:#81a8ff}.paypal-container{min-height:44px;margin:18px 0}.checkout-note{border-top:1px solid rgba(227,179,93,.14);padding-top:14px;color:var(--muted);font-size:10px}.qr-large{display:block;width:230px;height:230px;padding:15px;border-radius:22px;background:white;margin:16px auto 24px}

@media (max-width:980px){
  .launcher{grid-template-columns:repeat(3,1fr);max-width:720px}
  .story-grid{grid-template-columns:1fr;gap:56px}.story-copy{max-width:760px;margin:0 auto}.story-copy h2,.story-copy>.eyebrow{text-align:center}.story-copy>p{text-align:center;margin-left:auto;margin-right:auto}
  .premium-card{grid-template-columns:1fr}.checkout-card{width:min(100%,420px);justify-self:center}.store-card{grid-template-columns:1fr;text-align:center}.store-copy h2,.store-copy>.eyebrow{text-align:center}.store-copy>p{margin-left:auto;margin-right:auto}.store-actions{justify-content:center}.trust-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .hero{min-height:500px}.hero-art{height:72vh;min-height:500px;object-fit:cover;object-position:center top}.hero-actions{bottom:7%}.scroll-cue{display:none}
  .section{padding:68px 0}.launcher{grid-template-columns:repeat(2,1fr);gap:30px 10px}.medallion{width:100px;height:100px}.feature-stage{grid-template-columns:auto 1fr;align-items:start;padding:23px 20px}.stage-cta{grid-column:1/-1;width:100%}.premium-columns{grid-template-columns:1fr}.trust-row{grid-template-columns:1fr 1fr}.store-card{padding-left:0;padding-right:0}
}
@media (max-width:440px){
  .shell{width:min(100% - 24px,var(--shell))}.hero-actions{gap:8px}.hero-actions .pill{min-height:43px;padding:0 16px;font-size:12px}.launcher{gap:27px 6px}.medallion{width:92px;height:92px}.glyph{font-size:32px}.feature-name{font-size:11px}.feature-stage{grid-template-columns:1fr;text-align:center}.stage-orb{margin:0 auto}.stage-topline,.stage-points{justify-content:center}.premium-card{padding:26px 18px}.trust-row{grid-template-columns:1fr}.modal{padding:34px 22px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spark,.scroll-cue{animation:none!important}.reveal{opacity:1;transform:none;transition:none}.orbit-item,.medallion,.pill,.paypal-launch{transition:none}}

.mobile-hero-copy{display:none}
@media (max-width:720px){
  .hero{min-height:0;background:linear-gradient(180deg,#030717,#04091d)}
  .hero-art{width:100%;height:auto;min-height:0;object-fit:contain;object-position:center top}
  .hero-shade{bottom:auto;height:100%;background:linear-gradient(180deg,rgba(3,7,23,0) 45%,rgba(3,7,23,.28) 76%,#030717 100%)}
  .hero-actions{display:none}
  .mobile-hero-copy{display:block;position:relative;z-index:5;margin-top:-2px;padding:24px 20px 36px;text-align:center;background:linear-gradient(180deg,rgba(3,7,23,.15),#030717 25%)}
  .mobile-hero-copy>p{margin:0 0 8px;color:var(--gold);font-size:9px;font-weight:700;letter-spacing:.2em}
  .mobile-hero-copy h1{max-width:340px;margin:0 auto 18px;font-size:27px;line-height:1.18}
  .mobile-hero-copy>div{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .mobile-hero-copy .pill{min-height:42px;padding:0 15px;font-size:11px}
}

/* ─────────────────────────────────────────────────────────────
   V4 first-screen composition
   Primary actions now rise into the hero so the site feels usable at first glance.
   ───────────────────────────────────────────────────────────── */
@media (min-width:721px){
  .hero{min-height:0;height:min(86vh,860px)}
  .hero-art{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 44%}
  .hero-shade{background:
    linear-gradient(180deg,rgba(3,7,23,.02) 0%,rgba(3,7,23,.03) 43%,rgba(3,7,23,.28) 63%,rgba(3,7,23,.82) 84%,var(--night) 100%),
    linear-gradient(90deg,rgba(3,7,23,.18),transparent 25%,transparent 76%,rgba(3,7,23,.15))}
  .hero-actions{top:22px;right:28px;left:auto;bottom:auto;transform:none;width:auto;justify-content:flex-end}
  .hero-actions .pill{min-height:42px;padding:0 18px;font-size:11px;backdrop-filter:blur(14px)}
  .scroll-cue{display:none}

  .launcher-section{padding-top:0;margin-top:0}
  .launch-dock{position:relative;z-index:8;margin:-112px auto 0;width:min(1060px,calc(100% - 20px));display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end;justify-items:center;padding:24px 22px 22px;border-radius:34px;border:1px solid rgba(244,208,131,.25);background:
    linear-gradient(180deg,rgba(12,21,50,.64),rgba(4,9,25,.88)),
    radial-gradient(circle at 50% -40%,rgba(227,179,93,.14),transparent 60%);
    backdrop-filter:blur(18px);box-shadow:0 34px 82px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.035)}
  .launch-dock::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 12%,rgba(247,215,143,.18) 46%,transparent 72%);opacity:.45;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:1px}
  .launch-dock .orbit-item{max-width:170px}
  .launch-dock .medallion{width:88px;height:88px}
  .launch-dock .orbit-signature .medallion{width:98px;height:98px}
  .launch-dock .orbit-signature .glyph{font-size:36px}
  .launch-dock .feature-name{font-size:12px;margin-top:11px}
  .launch-dock .tier{font-size:8px;margin-top:5px;padding:2px 7px}
  .launch-dock .orbit-signature::before{content:"SIGNATURE";position:absolute;top:-10px;padding:2px 7px;border-radius:99px;background:#0d1734;border:1px solid rgba(244,208,131,.28);color:var(--gold);font-size:7px;letter-spacing:.18em;opacity:.74}

  .launch-head{margin:46px auto 28px;max-width:720px}
  .launch-head h1{font-size:clamp(28px,3.6vw,43px)}
  .launch-head p:last-child{max-width:650px;margin-left:auto;margin-right:auto}
  .launcher-secondary{grid-template-columns:repeat(4,1fr);max-width:760px;gap:26px 16px;margin-bottom:38px}
  .launcher-secondary .medallion{width:86px;height:86px;border-color:rgba(244,208,131,.52);box-shadow:inset 0 0 0 4px rgba(227,179,93,.04),0 12px 28px rgba(0,0,0,.34),0 0 22px rgba(227,179,93,.055)}
  .launcher-secondary .glyph{font-size:31px}
  .launcher-secondary .feature-name{font-size:12px;margin-top:11px}
}

@media (min-width:1280px){
  .launch-dock{margin-top:-124px;padding-top:26px}
  .launch-dock .medallion{width:92px;height:92px}
  .launch-dock .orbit-signature .medallion{width:106px;height:106px}
}

@media (max-width:720px){
  .hero-shade{background:linear-gradient(180deg,rgba(3,7,23,0) 36%,rgba(3,7,23,.17) 63%,#030717 100%)}
  .mobile-hero-copy{padding-bottom:20px}
  .launcher-section{padding-top:24px}
  .launch-dock{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 8px;align-items:start;justify-items:center;margin:0 auto 34px;width:100%}
  .launch-dock .orbit-item:last-child{grid-column:1/-1;width:50%}
  .launch-dock .medallion{width:96px;height:96px}
  .launch-dock .orbit-signature .medallion{width:104px;height:104px}
  .launch-dock .orbit-signature{position:relative}
  .launch-dock .orbit-signature::before{content:"✦";position:absolute;top:-7px;right:calc(50% - 53px);z-index:2;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#101a3c;border:1px solid rgba(244,208,131,.4);color:var(--gold-bright);font-size:8px;box-shadow:0 0 16px rgba(227,179,93,.16)}
  .launch-head{margin:18px auto 30px}
  .launch-head h1{font-size:29px}
  .launch-head p:last-child{font-size:13px}
  .launcher-secondary{grid-template-columns:repeat(2,1fr);gap:25px 8px;margin-bottom:34px}
  .launcher-secondary .medallion{width:88px;height:88px}
  .feature-stage{margin-top:4px}
}

@media (max-width:440px){
  .launch-dock .orbit-item:last-child{width:58%}
  .launch-dock .medallion{width:90px;height:90px}
  .launch-dock .orbit-signature .medallion{width:98px;height:98px}
  .launch-head h1{font-size:26px}
}


/* ─────────────────────────────────────────────────────────────
   V5: first-view celestial launcher
   Ten paths live in one 5×2 dock that rises into the hero.
   ───────────────────────────────────────────────────────────── */
.tier-new{color:#fff0bf;border-color:rgba(247,215,143,.48);background:linear-gradient(180deg,rgba(105,75,25,.28),rgba(30,23,16,.28));box-shadow:0 0 16px rgba(227,179,93,.08)}
.orbit-new .medallion{border-color:rgba(247,215,143,.78);background:radial-gradient(circle at 50% 40%,rgba(54,73,141,.7),rgba(10,20,55,.96) 72%);box-shadow:inset 0 0 0 4px rgba(227,179,93,.05),0 14px 34px rgba(0,0,0,.38),0 0 28px rgba(227,179,93,.11)}
.orbit-new .medallion::after{content:"NEW";position:absolute;right:-11px;top:-8px;padding:3px 6px;border-radius:999px;border:1px solid rgba(247,215,143,.46);background:#101936;color:#f7d78f;font:700 7px/1 Manrope,sans-serif;letter-spacing:.14em;box-shadow:0 5px 18px rgba(0,0,0,.32)}

@media (min-width:721px){
  .hero{height:min(76vh,760px)}
  .hero-art{object-position:center 42%}
  .launcher-section{position:relative;z-index:7;padding-top:0}
  .launch-dock.launch-grid{margin:-232px auto 0;width:min(1120px,calc(100% - 22px));grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,auto);column-gap:18px;row-gap:22px;padding:30px 26px 28px;border-radius:36px;background:
    linear-gradient(180deg,rgba(13,23,54,.70),rgba(4,9,25,.93)),
    radial-gradient(circle at 50% -26%,rgba(227,179,93,.16),transparent 58%);
    box-shadow:0 38px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.045)}
  .launch-dock.launch-grid .orbit-item{max-width:176px;min-height:132px}
  .launch-dock.launch-grid .medallion{width:84px;height:84px}
  .launch-dock.launch-grid .orbit-signature .medallion{width:94px;height:94px}
  .launch-dock.launch-grid .glyph{font-size:31px}
  .launch-dock.launch-grid .orbit-signature .glyph{font-size:34px}
  .launch-dock.launch-grid .feature-name{font-size:11px;margin-top:9px;white-space:normal}
  .launch-dock.launch-grid .tier{font-size:7.5px;margin-top:5px}
  .launch-head{margin:34px auto 24px}
  .launch-head h1{font-size:clamp(27px,3vw,40px)}
  .feature-stage{margin-top:0}
}
@media (min-width:1280px){
  .hero{height:min(77vh,780px)}
  .launch-dock.launch-grid{margin-top:-248px;padding-top:31px;padding-bottom:30px;row-gap:23px}
  .launch-dock.launch-grid .medallion{width:88px;height:88px}
  .launch-dock.launch-grid .orbit-signature .medallion{width:98px;height:98px}
}
@media (max-width:720px){
  .launcher-section{padding-top:10px}
  .launch-dock.launch-grid{grid-template-columns:repeat(2,1fr);gap:22px 8px;margin:0 auto 24px;padding:20px 8px 24px;border-radius:26px;border:1px solid rgba(244,208,131,.18);background:linear-gradient(180deg,rgba(12,21,50,.48),rgba(4,9,25,.78))}
  .launch-dock.launch-grid .orbit-item:last-child{grid-column:auto;width:100%}
  .launch-dock.launch-grid .orbit-item{min-height:132px}
  .launch-head{margin:14px auto 26px}
}


/* ─────────────────────────────────────────────────────────────
   V6: jeweled celestial launcher
   More compact first-view placement + richer medallion ornamentation.
   ───────────────────────────────────────────────────────────── */
@keyframes v6OrbitTurn{to{transform:rotate(360deg)}}
@keyframes v6StarBreath{0%,100%{opacity:.45;transform:scale(.86) rotate(0deg)}50%{opacity:1;transform:scale(1.08) rotate(10deg)}}

@media (min-width:721px){
  .hero{height:min(74vh,748px)}
  .hero-art{object-position:center 40%}
  .launch-dock.launch-grid{
    margin:-268px auto 0;
    width:min(1160px,calc(100% - 28px));
    column-gap:22px;
    row-gap:14px;
    padding:25px 28px 23px;
    border-radius:38px;
    border:1px solid rgba(247,215,143,.31);
    background:
      radial-gradient(circle at 10% 12%,rgba(244,208,131,.07),transparent 24%),
      radial-gradient(circle at 90% 88%,rgba(87,104,186,.10),transparent 28%),
      linear-gradient(180deg,rgba(13,23,54,.76),rgba(4,9,25,.94));
    box-shadow:0 42px 100px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.018) inset,0 1px 0 rgba(255,244,207,.045) inset;
  }
  .launch-dock.launch-grid::before{
    opacity:.72;
    background:linear-gradient(104deg,transparent 7%,rgba(247,215,143,.20) 29%,transparent 48%,rgba(127,147,225,.09) 66%,transparent 88%);
  }
  .launch-dock.launch-grid .orbit-item{
    max-width:182px;
    min-height:126px;
    padding:2px 5px 0;
  }
  .launch-dock.launch-grid .medallion{
    width:92px;height:92px;
    border:1px solid rgba(247,215,143,.76);
    outline:1px solid rgba(227,179,93,.14);
    outline-offset:6px;
    background:
      radial-gradient(circle at 50% 38%,rgba(64,83,154,.88),rgba(15,28,70,.97) 48%,rgba(6,14,39,.99) 78%),
      linear-gradient(180deg,#152658,#071126);
    box-shadow:
      inset 0 0 0 5px rgba(227,179,93,.045),
      inset 0 0 30px rgba(74,101,194,.15),
      0 14px 32px rgba(0,0,0,.42),
      0 0 26px rgba(227,179,93,.09);
  }
  .launch-dock.launch-grid .orbit-signature .medallion{width:102px;height:102px}
  .launch-dock.launch-grid .medallion::before{
    inset:9px;
    border:1px solid rgba(247,215,143,.24);
    box-shadow:0 0 0 4px rgba(227,179,93,.025),inset 0 0 18px rgba(247,215,143,.025);
  }
  .launch-dock.launch-grid .medallion::after{
    inset:-9px;
    opacity:.62;
    background:conic-gradient(from 0deg,
      transparent 0 9%,rgba(247,215,143,.76) 10% 10.8%,transparent 12% 35%,
      rgba(147,166,231,.34) 36% 36.8%,transparent 38% 63%,
      rgba(247,215,143,.56) 64% 64.9%,transparent 66% 86%,
      rgba(247,215,143,.70) 87% 87.8%,transparent 89% 100%) border-box;
    animation:v6OrbitTurn 22s linear infinite;
  }
  .launch-dock.launch-grid .orbit-item::after{
    content:"✦";
    position:absolute;
    top:3px;
    right:calc(50% - 57px);
    z-index:3;
    color:#f8dea1;
    font-size:11px;
    line-height:1;
    text-shadow:0 0 9px rgba(247,215,143,.9),0 0 18px rgba(227,179,93,.42);
    animation:v6StarBreath 2.8s ease-in-out infinite;
    pointer-events:none;
  }
  .launch-dock.launch-grid .orbit-item:nth-child(even)::after{animation-delay:-1.1s}
  .launch-dock.launch-grid .orbit-item:nth-child(3n)::after{animation-delay:-2s}
  .launch-dock.launch-grid .orbit-signature::before{
    content:"✦";
    top:-9px;
    width:22px;height:22px;
    padding:0;
    display:grid;place-items:center;
    border-radius:50%;
    background:radial-gradient(circle,#283c78 0,#101a3c 68%);
    border:1px solid rgba(247,215,143,.48);
    color:#f7d78f;
    font-size:8px;
    letter-spacing:0;
    opacity:1;
    box-shadow:0 0 18px rgba(227,179,93,.18),inset 0 0 10px rgba(127,151,230,.16);
  }
  .launch-dock.launch-grid .orbit-signature::after{top:8px;right:calc(50% - 63px)}
  .launch-dock.launch-grid .glyph{
    font-size:33px;
    color:#f7d58f;
    text-shadow:0 0 10px rgba(247,215,143,.18),0 0 26px rgba(109,135,230,.10);
  }
  .launch-dock.launch-grid .orbit-signature .glyph{font-size:37px}
  .launch-dock.launch-grid .feature-name{
    position:relative;
    margin-top:12px;
    font-size:11.5px;
    letter-spacing:.015em;
    color:#f1e8d3;
    text-shadow:0 2px 10px rgba(0,0,0,.55);
  }
  .launch-dock.launch-grid .feature-name::after{
    content:"";
    display:block;
    width:22px;height:1px;
    margin:6px auto 0;
    background:linear-gradient(90deg,transparent,rgba(247,215,143,.62),transparent);
  }
  .launch-dock.launch-grid .tier{margin-top:3px;font-size:7.5px;padding:2px 7px;background:rgba(3,8,23,.66);backdrop-filter:blur(8px)}
  .launch-dock.launch-grid .orbit-item:hover{transform:translateY(-7px)}
  .launch-dock.launch-grid .orbit-item:hover .medallion{
    transform:scale(1.035);
    box-shadow:inset 0 0 0 5px rgba(227,179,93,.07),inset 0 0 34px rgba(91,118,215,.20),0 18px 38px rgba(0,0,0,.48),0 0 38px rgba(227,179,93,.20);
  }
  .launch-head{margin:29px auto 22px}
}

@media (min-width:1280px){
  .hero{height:min(75vh,760px)}
  .launch-dock.launch-grid{margin-top:-282px;padding-top:27px;padding-bottom:25px}
  .launch-dock.launch-grid .medallion{width:96px;height:96px}
  .launch-dock.launch-grid .orbit-signature .medallion{width:106px;height:106px}
}

@media (max-width:720px){
  .launch-dock.launch-grid{gap:20px 8px;padding:21px 10px 23px;background:linear-gradient(180deg,rgba(12,21,50,.58),rgba(4,9,25,.88))}
  .launch-dock.launch-grid .medallion{outline:1px solid rgba(227,179,93,.12);outline-offset:5px}
  .launch-dock.launch-grid .feature-name::after{content:"";display:block;width:18px;height:1px;margin:5px auto 0;background:linear-gradient(90deg,transparent,rgba(247,215,143,.5),transparent)}
}

@media (prefers-reduced-motion:reduce){
  .launch-dock.launch-grid .medallion::after,.launch-dock.launch-grid .orbit-item::after{animation:none!important}
}

/* Move the Dream NEW badge off the medallion so the orbit ring remains intact. */
.orbit-new .medallion::after{content:"";position:absolute}
.orbit-new::before{content:"NEW";position:absolute;top:-8px;right:calc(50% - 58px);z-index:5;padding:3px 6px;border-radius:999px;border:1px solid rgba(247,215,143,.46);background:#101936;color:#f7d78f;font:700 7px/1 Manrope,sans-serif;letter-spacing:.14em;box-shadow:0 5px 18px rgba(0,0,0,.32)}

/* ─────────────────────────────────────────────────────────────
   V7: hero-integrated launcher
   No large panel: the ten celestial paths float directly over the hero floor.
   ───────────────────────────────────────────────────────────── */
@keyframes v7HaloPulse{0%,100%{opacity:.22;transform:scale(.96)}50%{opacity:.5;transform:scale(1.06)}}

@media (min-width:721px){
  .hero{
    height:min(82vh,790px);
    min-height:650px;
    overflow:hidden;
  }
  .hero-art{
    width:100%;height:100%;min-height:0;
    object-fit:cover;
    object-position:center 43%;
  }
  .hero-shade{
    background:
      linear-gradient(180deg,rgba(3,7,23,.01) 0%,rgba(3,7,23,.015) 47%,rgba(3,7,23,.06) 64%,rgba(3,7,23,.48) 83%,rgba(3,7,23,.86) 100%),
      linear-gradient(90deg,rgba(3,7,23,.10),transparent 24%,transparent 78%,rgba(3,7,23,.10));
  }
  .hero-actions{top:22px;right:28px;left:auto;bottom:auto;transform:none;width:auto;justify-content:flex-end}
  .hero-launcher{
    position:absolute;
    z-index:7;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    margin:0;
    width:min(1340px,96vw);
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:8px;
    padding:22px 20px 10px;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
  }
  .hero-launcher::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-2%;right:-2%;top:-22px;bottom:-14px;
    border-radius:50% 50% 18% 18% / 44% 44% 18% 18%;
    background:
      radial-gradient(ellipse at center,rgba(3,7,23,.78) 0%,rgba(3,7,23,.54) 50%,rgba(3,7,23,.16) 74%,transparent 88%);
    filter:blur(7px);
    pointer-events:none;
  }
  .hero-launcher::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:8%;right:8%;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(247,215,143,.28),transparent);
  }
  .hero-launcher .orbit-item,
  .hero-launcher .orbit-signature{
    min-height:0;
    max-width:none;
    padding:0 2px 2px;
    transform:none;
  }
  .hero-launcher .medallion,
  .hero-launcher .orbit-signature .medallion{
    width:68px;height:68px;
    outline:1px solid rgba(247,215,143,.12);
    outline-offset:4px;
    border:1px solid rgba(247,215,143,.66);
    background:
      radial-gradient(circle at 50% 35%,rgba(65,84,157,.82),rgba(14,27,67,.95) 49%,rgba(5,12,34,.98) 78%);
    box-shadow:
      inset 0 0 0 4px rgba(227,179,93,.035),
      inset 0 0 22px rgba(83,106,201,.13),
      0 8px 24px rgba(0,0,0,.40),
      0 0 16px rgba(227,179,93,.08);
  }
  .hero-launcher .medallion::before{inset:7px;border-color:rgba(247,215,143,.18)}
  .hero-launcher .medallion::after{inset:-6px;opacity:.46;animation:v6OrbitTurn 26s linear infinite}
  .hero-launcher .glyph,
  .hero-launcher .orbit-signature .glyph{font-size:27px;color:#f8d990}
  .hero-launcher .orbit-item::after{
    content:"✦";
    position:absolute;top:-3px;right:calc(50% - 42px);
    color:#f8dea1;font-size:8px;opacity:.72;
    text-shadow:0 0 9px rgba(247,215,143,.9);
    animation:v7HaloPulse 3.4s ease-in-out infinite;
    pointer-events:none;
  }
  .hero-launcher .orbit-signature::before{display:none}
  .hero-launcher .feature-name{
    margin-top:9px;
    font-size:9.5px;
    line-height:1.15;
    color:#f3ead8;
    white-space:normal;
    min-height:23px;
    display:flex;align-items:flex-start;justify-content:center;
    text-shadow:0 2px 8px rgba(0,0,0,.85);
  }
  .hero-launcher .feature-name::after{display:none}
  .hero-launcher .tier{display:none}
  .hero-launcher .orbit-item:hover{transform:translateY(-5px)}
  .hero-launcher .orbit-item:hover .medallion,
  .hero-launcher .orbit-item.active .medallion{
    transform:scale(1.06);
    border-color:#f7d78f;
    box-shadow:
      inset 0 0 0 4px rgba(227,179,93,.055),
      inset 0 0 26px rgba(91,118,215,.18),
      0 12px 28px rgba(0,0,0,.48),
      0 0 26px rgba(227,179,93,.21);
  }
  .hero-launcher .orbit-new::before{
    content:"NEW";
    display:block;
    top:-6px;right:calc(50% - 43px);
    font-size:6px;padding:2px 5px;
  }
  .launcher-section{padding-top:48px;margin-top:0}
  .launch-head{margin:0 auto 26px;max-width:720px}
  .launch-head h1{font-size:clamp(27px,3vw,39px)}
}

@media (min-width:1280px){
  .hero{height:min(84vh,810px)}
  .hero-launcher{bottom:18px;width:min(1400px,95vw);gap:12px}
  .hero-launcher .medallion,.hero-launcher .orbit-signature .medallion{width:72px;height:72px}
  .hero-launcher .glyph,.hero-launcher .orbit-signature .glyph{font-size:29px}
  .hero-launcher .feature-name{font-size:10px}
}

@media (max-width:720px){
  .hero{min-height:760px;height:92vh;max-height:860px}
  .hero-art{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 42%}
  .hero-shade{background:linear-gradient(180deg,rgba(3,7,23,.01) 22%,rgba(3,7,23,.08) 52%,rgba(3,7,23,.72) 78%,#030717 100%)}
  .mobile-hero-copy{display:none}
  .hero-actions{top:12px;right:10px;left:10px;bottom:auto;transform:none;width:auto;gap:7px;justify-content:flex-end}
  .hero-actions .pill{font-size:9px;padding:0 11px;min-height:36px}
  .hero-launcher{
    position:absolute;z-index:7;left:50%;bottom:10px;transform:translateX(-50%);
    width:96%;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px 4px;
    padding:22px 2px 10px;border:0;background:none;box-shadow:none;border-radius:0;
  }
  .hero-launcher::before{content:"";position:absolute;z-index:-1;inset:-18px -2% -8px;border-radius:48%;background:radial-gradient(ellipse at center,rgba(3,7,23,.83),rgba(3,7,23,.52) 56%,transparent 84%);filter:blur(6px)}
  .hero-launcher .orbit-item,.hero-launcher .orbit-item:last-child{width:100%;min-height:0;grid-column:auto;padding:0}
  .hero-launcher .medallion,.hero-launcher .orbit-signature .medallion{width:54px;height:54px;outline-offset:3px}
  .hero-launcher .glyph,.hero-launcher .orbit-signature .glyph{font-size:21px}
  .hero-launcher .feature-name{font-size:7.5px;margin-top:7px;line-height:1.12;min-height:18px}
  .hero-launcher .tier{display:none}
  .hero-launcher .orbit-item::after{display:none}
  .hero-launcher .orbit-signature::before{display:none}
  .hero-launcher .orbit-new::before{top:-4px;right:calc(50% - 33px);font-size:5px;padding:2px 4px}
  .launcher-section{padding-top:34px}
  .launch-head{margin:0 auto 24px}
}

@media (max-width:440px){
  .hero{min-height:720px;height:90vh}
  .hero-launcher{grid-template-columns:repeat(5,1fr);gap:13px 2px;width:98%}
  .hero-launcher .medallion,.hero-launcher .orbit-signature .medallion{width:49px;height:49px}
  .hero-launcher .glyph,.hero-launcher .orbit-signature .glyph{font-size:19px}
  .hero-launcher .feature-name{font-size:6.8px}
}

/* ─────────────────────────────────────────────────────────────
   V8: centered hero paths — no panel, no launcher backdrop.
   Fixes .reveal.in overriding translateX(-50%) on the launcher.
   ───────────────────────────────────────────────────────────── */
@media (min-width:721px){
  .hero{
    height:min(86vh,830px);
    min-height:700px;
  }
  .hero-art{object-position:center 42%}
  .hero-shade{
    background:
      linear-gradient(180deg,rgba(3,7,23,.01) 0%,rgba(3,7,23,.015) 50%,rgba(3,7,23,.055) 66%,rgba(3,7,23,.28) 82%,rgba(3,7,23,.62) 100%),
      linear-gradient(90deg,rgba(3,7,23,.08),transparent 22%,transparent 80%,rgba(3,7,23,.08));
  }

  .hero-launcher,
  .hero-launcher.reveal,
  .hero-launcher.reveal.in{
    position:absolute;
    z-index:8;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
    width:min(980px,92vw);
    margin:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(2,auto);
    column-gap:24px;
    row-gap:7px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  .hero-launcher.reveal{opacity:0;transform:translate(-50%,14px)}
  .hero-launcher.reveal.in{opacity:1;transform:translate(-50%,0)}
  .hero-launcher::before,
  .hero-launcher::after{display:none!important;content:none!important}

  .hero-launcher .orbit-item,
  .hero-launcher .orbit-signature{
    width:100%;
    max-width:none;
    min-height:82px;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
  }
  .hero-launcher .medallion,
  .hero-launcher .orbit-signature .medallion{
    width:52px;
    height:52px;
    outline:1px solid rgba(247,215,143,.13);
    outline-offset:4px;
    border:1px solid rgba(247,215,143,.7);
    background:
      radial-gradient(circle at 50% 35%,rgba(69,88,166,.88),rgba(14,27,67,.97) 52%,rgba(4,10,29,.99) 80%);
    box-shadow:
      inset 0 0 0 3px rgba(227,179,93,.035),
      inset 0 0 18px rgba(91,118,215,.15),
      0 6px 18px rgba(0,0,0,.42),
      0 0 15px rgba(227,179,93,.09);
  }
  .hero-launcher .medallion::before{inset:6px;border-color:rgba(247,215,143,.18)}
  .hero-launcher .medallion::after{inset:-6px;opacity:.4;animation:v6OrbitTurn 28s linear infinite}
  .hero-launcher .glyph,
  .hero-launcher .orbit-signature .glyph{
    font-size:21px;
    color:#f9da91;
    text-shadow:0 0 13px rgba(247,215,143,.58);
  }
  .hero-launcher .feature-name{
    margin-top:7px;
    min-height:18px;
    font-size:8.5px;
    line-height:1.12;
    letter-spacing:.015em;
    color:#f5ead7;
    text-shadow:0 2px 8px rgba(0,0,0,.92);
  }
  .hero-launcher .tier{display:none!important}
  .hero-launcher .orbit-signature::before{display:none!important}
  .hero-launcher .orbit-item::after{
    content:"✦";
    display:block;
    position:absolute;
    top:-2px;
    right:calc(50% - 35px);
    color:#f7d78f;
    font-size:6px;
    opacity:.7;
    text-shadow:0 0 8px rgba(247,215,143,.9);
    animation:v7HaloPulse 3.6s ease-in-out infinite;
  }
  .hero-launcher .orbit-item:nth-child(even)::after{animation-delay:-1.4s}
  .hero-launcher .orbit-item:nth-child(3n)::after{animation-delay:-2.2s}
  .hero-launcher .orbit-new::before{
    content:"NEW";
    display:block;
    top:-5px;
    right:calc(50% - 37px);
    font-size:5px;
    padding:2px 4px;
    background:rgba(9,17,44,.88);
    border-color:rgba(247,215,143,.42);
  }
  .hero-launcher .orbit-new::after{display:none}
  .hero-launcher .orbit-item:hover{transform:translateY(-4px)}
  .hero-launcher .orbit-item:hover .medallion,
  .hero-launcher .orbit-item.active .medallion{
    transform:scale(1.07);
    border-color:#ffe2a0;
    box-shadow:
      inset 0 0 0 3px rgba(227,179,93,.055),
      inset 0 0 22px rgba(91,118,215,.2),
      0 9px 22px rgba(0,0,0,.48),
      0 0 24px rgba(227,179,93,.22);
  }
  .scroll-cue{display:none}
}

@media (min-width:1280px){
  .hero-launcher,
  .hero-launcher.reveal,
  .hero-launcher.reveal.in{width:min(1040px,90vw);column-gap:30px;bottom:10px}
  .hero-launcher .medallion,
  .hero-launcher .orbit-signature .medallion{width:56px;height:56px}
  .hero-launcher .glyph,
  .hero-launcher .orbit-signature .glyph{font-size:23px}
  .hero-launcher .feature-name{font-size:9px}
}

@media (max-width:720px){
  .hero{min-height:760px;height:92vh;max-height:880px}
  .hero-launcher,
  .hero-launcher.reveal,
  .hero-launcher.reveal.in{
    left:50%;bottom:8px;transform:translateX(-50%);
    width:96%;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,auto);
    gap:10px 2px;padding:0;background:transparent;border:0;box-shadow:none;
  }
  .hero-launcher.reveal{opacity:0;transform:translate(-50%,12px)}
  .hero-launcher.reveal.in{opacity:1;transform:translate(-50%,0)}
  .hero-launcher::before,.hero-launcher::after{display:none!important;content:none!important}
  .hero-launcher .orbit-item,.hero-launcher .orbit-item:last-child{width:100%;min-height:67px;grid-column:auto}
  .hero-launcher .medallion,.hero-launcher .orbit-signature .medallion{width:44px;height:44px}
  .hero-launcher .glyph,.hero-launcher .orbit-signature .glyph{font-size:17px}
  .hero-launcher .feature-name{font-size:6.5px;margin-top:6px;min-height:15px;line-height:1.05}
  .hero-launcher .orbit-item::after{display:none}
  .hero-launcher .tier{display:none!important}
  .hero-launcher .orbit-new::before{top:-4px;right:calc(50% - 29px);font-size:4px;padding:2px 3px}
}

/* ─────────────────────────────────────────────────────────────
   V9: clear the hero floor and move the baked legacy glyphs to the sides.
   The new 5+5 launcher stays centered, with the second row lower.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 721px){
  .hero{height:min(88vh,850px);min-height:740px}
  .hero-art{object-position:center 42%}

  /* Softly veil the original baked icon row without creating a hard panel. */
  .legacy-center-cleaner{
    position:absolute;z-index:5;left:18%;right:18%;bottom:-2px;height:196px;pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 100%,rgba(2,5,17,.98) 0%,rgba(2,5,17,.95) 45%,rgba(2,5,17,.76) 68%,rgba(2,5,17,.26) 84%,transparent 100%),
      linear-gradient(180deg,transparent 0%,rgba(2,5,17,.2) 30%,rgba(2,5,17,.9) 100%);
    filter:blur(.2px);
  }

  /* Re-use the original hero symbols as quiet side ornaments. */
  .legacy-side{
    position:absolute;z-index:6;bottom:20px;width:150px;height:158px;pointer-events:none;
    display:flex;align-items:flex-end;justify-content:center;gap:0;opacity:.72;
  }
  .legacy-side-left{left:18px}
  .legacy-side-right{right:18px}
  .legacy-side img{
    position:absolute;width:72px;height:auto;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.52));
    mix-blend-mode:screen;
  }
  .legacy-side img:nth-child(1){bottom:78px;left:0;transform:rotate(-7deg) scale(.88);opacity:.72}
  .legacy-side img:nth-child(2){bottom:30px;left:35px;transform:rotate(3deg) scale(.82);opacity:.62}
  .legacy-side img:nth-child(3){bottom:82px;right:0;transform:rotate(8deg) scale(.76);opacity:.56}
  .legacy-side-right img:nth-child(1){left:auto;right:0;transform:rotate(7deg) scale(.88)}
  .legacy-side-right img:nth-child(2){left:auto;right:35px;transform:rotate(-3deg) scale(.82)}
  .legacy-side-right img:nth-child(3){right:auto;left:0;transform:rotate(-8deg) scale(.76)}

  .hero-launcher,
  .hero-launcher.reveal,
  .hero-launcher.reveal.in{
    bottom:8px;
    width:min(930px,72vw);
    column-gap:26px;
    row-gap:18px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(2,auto);
  }
  .hero-launcher .orbit-item,
  .hero-launcher .orbit-signature{min-height:76px}
  .hero-launcher .medallion,
  .hero-launcher .orbit-signature .medallion{width:52px;height:52px}
  .hero-launcher .feature-name{font-size:8px;margin-top:7px;min-height:17px}
}

@media (min-width:1280px){
  .legacy-side{width:185px}
  .legacy-side-left{left:30px}.legacy-side-right{right:30px}
  .legacy-side img{width:78px}
  .hero-launcher,
  .hero-launcher.reveal,
  .hero-launcher.reveal.in{width:min(960px,68vw);bottom:8px;row-gap:20px;column-gap:32px}
  .hero-launcher .medallion,.hero-launcher .orbit-signature .medallion{width:56px;height:56px}
  .hero-launcher .feature-name{font-size:8.5px}
}

@media (max-width:720px){
  .legacy-center-cleaner,.legacy-side{display:none!important}
}


/* ─────────────────────────────────────────────────────────────
   V10: premium first-screen hierarchy.
   Keep only three signature actions inside the hero; move the
   remaining seven into the next section so the hero copy stays readable.
   ───────────────────────────────────────────────────────────── */
@media (min-width:721px){
  .hero{height:min(88vh,850px);min-height:740px}
  .legacy-center-cleaner{
    left:20%;right:20%;bottom:-2px;height:126px;
    background:
      radial-gradient(ellipse at 50% 100%,rgba(2,5,17,.98) 0%,rgba(2,5,17,.92) 52%,rgba(2,5,17,.44) 78%,transparent 100%),
      linear-gradient(180deg,transparent 0%,rgba(2,5,17,.28) 45%,rgba(2,5,17,.88) 100%);
  }
  .hero-launcher,
  .hero-launcher.reveal,
  .hero-launcher.reveal.in{
    left:50%;bottom:14px;transform:translateX(-50%);
    width:min(570px,48vw);
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:1fr;column-gap:44px;row-gap:0;
    padding:0;background:transparent;border:0;box-shadow:none;
  }
  .hero-launcher.reveal{opacity:0;transform:translate(-50%,12px)}
  .hero-launcher.reveal.in{opacity:1;transform:translate(-50%,0)}
  .hero-launcher .orbit-item,
  .hero-launcher .orbit-signature{min-height:104px}
  .hero-launcher .medallion,
  .hero-launcher .orbit-signature .medallion{width:66px;height:66px}
  .hero-launcher .glyph,
  .hero-launcher .orbit-signature .glyph{font-size:27px}
  .hero-launcher .feature-name{font-size:9.5px;margin-top:8px;min-height:auto}
  .hero-launcher .tier{font-size:6.4px;margin-top:6px}

  .launcher-section{padding-top:38px}
  .secondary-launch-wrap{margin:0 auto 54px;width:min(1040px,92vw);text-align:center}
  .secondary-kicker{margin:0 0 20px;color:var(--gold);font:600 10px/1.2 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase}
  .secondary-launch-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 28px;
    align-items:start;justify-content:center;
  }
  .secondary-launch-grid .orbit-item{max-width:190px;justify-self:center;min-height:132px}
  .secondary-launch-grid .medallion{width:82px;height:82px}
  .secondary-launch-grid .glyph{font-size:31px}
  .secondary-launch-grid .feature-name{font-size:10px;margin-top:10px}
  .secondary-launch-grid .tier{margin-top:7px}
  .secondary-launch-grid .orbit-item:nth-child(n+5){transform:translateX(50%)}
  .secondary-launch-grid .orbit-item:nth-child(n+5):hover{transform:translate(50%,-4px)}
}

@media (min-width:1280px){
  .hero-launcher,.hero-launcher.reveal,.hero-launcher.reveal.in{width:610px;bottom:16px;column-gap:52px}
  .secondary-launch-grid{gap:26px 34px}
}

@media (max-width:720px){
  .hero-launcher,
  .hero-launcher.reveal,
  .hero-launcher.reveal.in{
    width:92%;bottom:12px;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;gap:4px;
  }
  .hero-launcher .orbit-item,.hero-launcher .orbit-item:last-child{min-height:78px}
  .hero-launcher .medallion,.hero-launcher .orbit-signature .medallion{width:48px;height:48px}
  .hero-launcher .feature-name{font-size:6.8px}
  .secondary-launch-wrap{margin:0 auto 34px;width:100%;text-align:center}
  .secondary-kicker{margin:0 0 16px;color:var(--gold);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
  .secondary-launch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .secondary-launch-grid .orbit-item{width:100%;min-height:104px}
  .secondary-launch-grid .medallion{width:62px;height:62px}
  .secondary-launch-grid .glyph{font-size:24px}
  .secondary-launch-grid .feature-name{font-size:8px;margin-top:8px}
  .secondary-launch-grid .tier{display:inline-flex!important;font-size:6px}
  .secondary-launch-grid .orbit-item:last-child{grid-column:1/-1;width:50%;justify-self:center}
}


/* V10-STARS — larger four-point celestial sparkle layer */
.spark-large{
  opacity:.76;
  transform-origin:center;
  animation-delay:var(--delay),var(--delay);
  filter:drop-shadow(0 0 5px rgba(255,225,151,.72)) drop-shadow(0 0 15px rgba(227,179,93,.28));
}
.spark-large svg{overflow:visible}
@keyframes tw{
  0%,100%{opacity:.28;filter:brightness(.88);}
  48%{opacity:1;filter:brightness(1.25);}
  58%{opacity:.84;filter:brightness(1.08);}
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(.84);}
  50%{transform:translate3d(calc(var(--tx)*.55),calc(var(--ty)*.55),0) rotate(calc(var(--r)*.5)) scale(1.08);}
  100%{transform:translate3d(var(--tx),var(--ty),0) rotate(var(--r)) scale(.92);}
}

/* V11 — jeweled celestial medallions inspired by the AstroDivine moon/zodiac crest */
.medallion{
  overflow:visible;
  isolation:isolate;
  background:
    radial-gradient(circle at 68% 37%,rgba(106,63,181,.34) 0 8%,rgba(72,52,146,.18) 13%,transparent 28%),
    radial-gradient(circle at 36% 69%,rgba(255,224,150,.22) 0 1.2px,transparent 1.7px),
    radial-gradient(circle at 73% 66%,rgba(255,255,255,.26) 0 1px,transparent 1.5px),
    radial-gradient(circle at 61% 24%,rgba(247,215,143,.28) 0 .9px,transparent 1.5px),
    radial-gradient(circle at 50% 40%,rgba(55,76,150,.96),rgba(10,17,45,.98) 69%);
  box-shadow:
    inset 0 0 0 1px rgba(247,215,143,.12),
    inset 0 0 26px rgba(104,116,220,.22),
    inset 0 -18px 30px rgba(0,0,0,.22),
    0 0 0 4px rgba(4,9,27,.72),
    0 0 0 5px rgba(227,179,93,.28),
    0 15px 34px rgba(0,0,0,.42),
    0 0 34px rgba(227,179,93,.10);
}
.medallion::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:0;
  z-index:1;
  opacity:.88;
  background:
    repeating-conic-gradient(from -1deg,
      rgba(247,215,143,.72) 0deg 1.1deg,
      transparent 1.1deg 28.8deg,
      rgba(247,215,143,.34) 28.8deg 30deg),
    radial-gradient(circle,transparent 0 66%,rgba(227,179,93,.24) 66.7% 68%,transparent 68.7%);
  -webkit-mask:radial-gradient(circle,transparent 0 63%,#000 64% 72%,transparent 73%);
          mask:radial-gradient(circle,transparent 0 63%,#000 64% 72%,transparent 73%);
  filter:drop-shadow(0 0 3px rgba(247,215,143,.20));
}
.medallion::after{
  content:"";
  position:absolute;
  inset:15px;
  border-radius:50%;
  z-index:1;
  opacity:1;
  border:1px solid rgba(247,215,143,.14);
  background:
    radial-gradient(circle at 76% 28%,rgba(255,235,177,.72) 0 .8px,transparent 1.7px),
    radial-gradient(circle at 29% 32%,rgba(255,255,255,.52) 0 .7px,transparent 1.5px),
    radial-gradient(circle at 67% 72%,rgba(247,215,143,.50) 0 .9px,transparent 1.7px),
    radial-gradient(circle at 38% 77%,rgba(255,255,255,.30) 0 .6px,transparent 1.3px),
    radial-gradient(ellipse at 66% 43%,rgba(126,73,210,.25),transparent 31%);
  box-shadow:inset 0 0 20px rgba(115,93,211,.10);
  transform:none;
}
.glyph{
  position:relative;
  z-index:4;
  filter:drop-shadow(0 0 5px rgba(255,228,157,.38));
}
.glyph::before,
.glyph::after{
  content:"✦";
  position:absolute;
  font-family:Georgia,serif;
  color:#f7d78f;
  pointer-events:none;
  text-shadow:0 0 7px rgba(247,215,143,.82);
  opacity:.78;
}
.glyph::before{font-size:7px;right:-18px;top:-14px;animation:orbTwinkle 3.8s ease-in-out infinite}
.glyph::after{font-size:4px;left:-16px;bottom:-11px;opacity:.54;animation:orbTwinkle 4.6s ease-in-out -1.7s infinite}
@keyframes orbTwinkle{0%,100%{opacity:.30;transform:scale(.72) rotate(0deg)}50%{opacity:1;transform:scale(1.14) rotate(18deg)}}
.orbit-item:hover .medallion,
.orbit-item.active .medallion{
  border-color:#f7d78f;
  box-shadow:
    inset 0 0 0 1px rgba(247,215,143,.20),
    inset 0 0 30px rgba(113,126,232,.28),
    0 0 0 4px rgba(4,9,27,.72),
    0 0 0 5px rgba(247,215,143,.52),
    0 18px 42px rgba(0,0,0,.50),
    0 0 42px rgba(227,179,93,.23),
    0 0 72px rgba(90,67,189,.12);
}
.orbit-item:hover .medallion::before,
.orbit-item.active .medallion::before{filter:drop-shadow(0 0 5px rgba(247,215,143,.38));transform:rotate(3deg)}
.orbit-item:hover .medallion::after,
.orbit-item.active .medallion::after{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.glyph::before,.glyph::after{animation:none!important}}

/* ─────────────────────────────────────────────────────────────
   V12 — warmer lunar gold + readable labels + rotating hero planets.
   Inspired by the gold tone in the AstroDivine moon/zodiac crest.
   ───────────────────────────────────────────────────────────── */
:root{
  --moon-gold:#e0b462;
  --moon-gold-bright:#f5ca74;
  --moon-gold-soft:#d3a45b;
}

/* Warmer gold inside every celestial medallion. */
.medallion{
  border-color:rgba(224,180,98,.82);
  box-shadow:
    inset 0 0 0 1px rgba(224,180,98,.14),
    inset 0 0 26px rgba(104,116,220,.22),
    inset 0 -18px 30px rgba(0,0,0,.22),
    0 0 0 4px rgba(4,9,27,.72),
    0 0 0 5px rgba(224,180,98,.34),
    0 15px 34px rgba(0,0,0,.42),
    0 0 34px rgba(224,180,98,.12);
}
.medallion::before{
  background:
    repeating-conic-gradient(from -1deg,
      rgba(224,180,98,.90) 0deg 1.2deg,
      transparent 1.2deg 28.7deg,
      rgba(224,180,98,.48) 28.7deg 30deg),
    radial-gradient(circle,transparent 0 66%,rgba(224,180,98,.34) 66.7% 68%,transparent 68.7%);
  filter:drop-shadow(0 0 4px rgba(224,180,98,.28));
}
.medallion::after{
  border-color:rgba(224,180,98,.22);
  background:
    radial-gradient(circle at 76% 28%,rgba(245,202,116,.90) 0 .9px,transparent 1.9px),
    radial-gradient(circle at 29% 32%,rgba(255,242,198,.58) 0 .8px,transparent 1.7px),
    radial-gradient(circle at 67% 72%,rgba(224,180,98,.68) 0 1px,transparent 1.9px),
    radial-gradient(circle at 38% 77%,rgba(255,242,198,.38) 0 .7px,transparent 1.5px),
    radial-gradient(ellipse at 66% 43%,rgba(126,73,210,.26),transparent 31%);
}
.glyph,
.hero-launcher .glyph,
.hero-launcher .orbit-signature .glyph,
.secondary-launch-grid .glyph{
  color:var(--moon-gold-bright)!important;
  text-shadow:0 0 8px rgba(245,202,116,.72),0 0 18px rgba(224,180,98,.22)!important;
}
.glyph::before,.glyph::after{color:var(--moon-gold-bright)}

/* Button titles: same lunar gold, larger and easier to read. */
.feature-name,
.hero-launcher .feature-name,
.secondary-launch-grid .feature-name{
  color:var(--moon-gold-bright)!important;
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.025em;
  text-shadow:0 2px 8px rgba(0,0,0,.92),0 0 8px rgba(224,180,98,.13)!important;
}
@media (min-width:721px){
  .hero-launcher .feature-name{font-size:14px!important;line-height:1.22;margin-top:10px!important}
  .secondary-launch-grid .feature-name{font-size:14px!important;line-height:1.24;margin-top:11px!important}
  .secondary-kicker{font-size:11px;letter-spacing:.26em}
  .tier{font-size:8.5px!important;padding:3px 8px!important}
}
@media (min-width:1280px){
  .hero-launcher .feature-name{font-size:15px!important}
  .secondary-launch-grid .feature-name{font-size:15px!important}
}
@media (max-width:720px){
  .hero-launcher .feature-name{font-size:9.5px!important}
  .secondary-launch-grid .feature-name{font-size:10.5px!important}
}

/* V13 — axis-style planet motion without flipping or duplicate overlays.
   The planets remain upright in the baked hero artwork. We only move a
   soft light/shadow band horizontally across each sphere so the surface
   reads as rotating left-to-right around its vertical axis. Saturn's
   rings are untouched because the effect is clipped to the sphere only. */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  border-radius:50%;
  transform:none;
  background-repeat:no-repeat;
  background-size:280% 100%;
  background-position:-120% 50%;
  will-change:background-position,opacity;
  mix-blend-mode:soft-light;
  opacity:.78;
}
/* Large lower-left planet. */
.hero::before{
  left:2.333333vw;
  top:35vw;
  width:8vw;
  min-width:0;
  max-width:none;
  aspect-ratio:1;
  background-image:
    linear-gradient(90deg,
      rgba(1,4,15,.40) 0%,
      rgba(1,4,15,.16) 19%,
      rgba(255,219,139,.10) 33%,
      rgba(255,234,175,.42) 45%,
      rgba(255,216,124,.14) 55%,
      rgba(1,4,15,.12) 72%,
      rgba(1,4,15,.38) 100%);
  box-shadow:inset -9px 0 15px rgba(0,0,0,.22),inset 7px 0 12px rgba(247,207,126,.06);
  animation:heroSurfaceFlow 17s linear infinite;
}
/* Saturn: clip only to the planet sphere, leaving the rings static. */
.hero::after{
  left:13.666667vw;
  top:34.333333vw;
  width:4vw;
  min-width:0;
  max-width:none;
  aspect-ratio:1;
  background-image:
    linear-gradient(90deg,
      rgba(1,4,15,.34) 0%,
      rgba(255,218,137,.08) 27%,
      rgba(255,237,184,.36) 44%,
      rgba(255,218,137,.08) 60%,
      rgba(1,4,15,.32) 100%);
  box-shadow:inset -6px 0 11px rgba(0,0,0,.18),inset 5px 0 9px rgba(247,207,126,.05);
  animation:heroSurfaceFlow 12s linear infinite;
}
@keyframes heroSurfaceFlow{
  0%{background-position:-120% 50%;}
  100%{background-position:220% 50%;}
}
@media (max-width:720px){
  .hero::before,.hero::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none!important}
}

/* ─────────────────────────────────────────────────────────────
   V14 — REAL texture motion + lunar-zodiac medallions
   ───────────────────────────────────────────────────────────── */
:root{
  --lunar-gold:#edb85c;
  --lunar-gold-bright:#ffd27a;
}

/* Replace simple tick ring with a real zodiac-symbol ornament. */
.medallion::before{
  inset:2px!important;
  background:url('zodiac-ring.png') center/100% 100% no-repeat!important;
  -webkit-mask:none!important;
  mask:none!important;
  opacity:.96!important;
  filter:drop-shadow(0 0 4px rgba(237,184,92,.34))!important;
}
.medallion::after{
  inset:17px!important;
  border:1px solid rgba(255,210,122,.24)!important;
  background:
    radial-gradient(circle at 66% 42%,rgba(134,71,206,.42) 0 7%,rgba(89,53,164,.22) 13%,transparent 31%),
    radial-gradient(circle at 31% 28%,rgba(255,222,145,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 66%,rgba(255,246,207,.48) 0 .8px,transparent 1.7px),
    radial-gradient(circle at 42% 76%,rgba(237,184,92,.55) 0 .9px,transparent 1.8px),
    radial-gradient(circle at 50% 48%,rgba(43,63,137,.42),rgba(10,17,45,.08) 64%,transparent 70%)!important;
}
.medallion{
  border-color:rgba(237,184,92,.88)!important;
  background:
    radial-gradient(circle at 65% 38%,rgba(91,52,157,.24),transparent 25%),
    radial-gradient(circle at 50% 43%,#18234f 0%,#101936 42%,#080f27 72%,#040817 100%)!important;
  box-shadow:
    inset 0 0 22px rgba(58,72,139,.20),
    inset 0 -20px 34px rgba(0,0,0,.27),
    0 0 0 3px rgba(3,8,24,.86),
    0 0 0 5px rgba(237,184,92,.38),
    0 12px 30px rgba(0,0,0,.42),
    0 0 24px rgba(237,184,92,.12)!important;
}
.glyph,.hero-launcher .glyph,.secondary-launch-grid .glyph{
  color:var(--lunar-gold-bright)!important;
  text-shadow:0 0 8px rgba(255,210,122,.88),0 0 21px rgba(237,184,92,.38)!important;
}
.feature-name,.hero-launcher .feature-name,.secondary-launch-grid .feature-name{
  color:var(--lunar-gold-bright)!important;
  text-shadow:0 1px 7px rgba(0,0,0,.95),0 0 8px rgba(237,184,92,.18)!important;
}
@media (min-width:721px){
  .hero-launcher .feature-name{font-size:16px!important;line-height:1.25!important}
  .secondary-launch-grid .feature-name{font-size:16px!important;line-height:1.25!important}
  .tier{font-size:9.5px!important;padding:4px 9px!important}
}

/* Actual moving surface texture: animated WebP frames, no fake shadow sweep. */
.hero::before,.hero::after{
  content:"";
  position:absolute;
  z-index:5;
  pointer-events:none;
  border-radius:50%;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
  box-shadow:none!important;
  animation:none!important;
}
.hero::before{
  left:2.333333vw;
  top:35vw;
  width:8vw;
  min-width:0;
  max-width:none;
  aspect-ratio:1;
  background-image:url('planet-axis.webp')!important;
}
.hero::after{
  left:13.666667vw;
  top:34.333333vw;
  width:4vw;
  min-width:0;
  max-width:none;
  aspect-ratio:1;
  background-image:url('saturn-axis.webp')!important;
}
@media (max-width:720px){.hero::before,.hero::after{display:none}}

/* V16 — actual single-layer planet rotation; removes old pseudo overlays. */
.hero::before,.hero::after{content:none!important;display:none!important;background:none!important;animation:none!important}
.planet-rotor{
  position:absolute;
  z-index:1;
  pointer-events:none;
  object-fit:contain;
  border-radius:50%;
  transform:none!important;
  mix-blend-mode:normal;
  filter:none;
}
.planet-rotor-saturn{z-index:1}
@media (max-width:720px){.planet-rotor{display:none!important}}

/* V18 — natural planet overlays: one intact sphere, no split/mirror effect. */
.planet-rotor{
  position:absolute!important;
  z-index:2!important;
  pointer-events:none!important;
  object-fit:contain!important;
  transform:none!important;
  border-radius:0!important;
  opacity:1!important;
  filter:drop-shadow(0 0 5px rgba(218,164,82,.08))!important;
}
.planet-rotor-left{border-radius:50%!important}
.planet-rotor-saturn{border-radius:0!important}
@media (max-width:720px){.planet-rotor{display:none!important}}
@media (prefers-reduced-motion:reduce){.planet-rotor{display:none!important}}

/* V19 patch — animated assets include the exact original hero surroundings,
   so their edges align pixel-for-pixel with the baked artwork. */
.planet-rotor-left,.planet-rotor-saturn{border-radius:0!important;filter:none!important;mix-blend-mode:normal!important}

/* V22 — shared six-language switcher */
.language-switcher-host{position:relative;z-index:42}
.hero-language{position:absolute;top:24px;left:28px}
.language-switcher{display:flex;gap:5px;align-items:center;padding:6px;border:1px solid rgba(227,179,93,.25);border-radius:999px;background:rgba(3,7,23,.58);backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.lang-btn{border:0;background:transparent;color:#b9b5aa;border-radius:999px;min-width:43px;height:32px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font:600 10px/1 Manrope,sans-serif;letter-spacing:.5px;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.lang-btn span{font-size:14px;line-height:1}.lang-btn b{font:inherit}
.lang-btn:hover{color:#ffe19b;background:rgba(227,179,93,.09);transform:translateY(-1px)}
.lang-btn.active{color:#ffe19b;background:rgba(227,179,93,.14);box-shadow:inset 0 0 0 1px rgba(247,215,143,.38),0 0 18px rgba(227,179,93,.10)}
.module-language{margin-left:auto;margin-right:12px}
.module-language .language-switcher{background:rgba(4,9,27,.78)}
@media(max-width:900px){.hero-language{top:14px;left:14px}.language-switcher{gap:2px;padding:4px}.lang-btn{min-width:34px;padding:0 6px;height:30px}.lang-btn b{display:none}.module-language{order:3;width:100%;margin:8px 0 0}.module-language .language-switcher{width:max-content;margin:0 auto}}


/* V23 — localized hero description.
   IMPORTANT: the three hero buttons keep their existing V22 coordinates.
   This layer only replaces the baked English description in the artwork. */
.hero-description{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:154px;
  transform:translateX(-50%);
  width:min(920px,82vw);
  text-align:center;
  pointer-events:none;
  isolation:isolate;
}
.hero-description::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-54px -76px -28px;
  background:
    radial-gradient(ellipse at center,
      rgba(2,5,17,.99) 0%,
      rgba(2,5,17,.97) 42%,
      rgba(2,5,17,.86) 63%,
      rgba(2,5,17,.43) 78%,
      transparent 94%);
  filter:blur(.2px);
}
.hero-description p{
  margin:0 auto;
  max-width:900px;
  color:#e8e1d5;
  font:400 clamp(14px,1.45vw,19px)/1.42 Manrope,sans-serif;
  letter-spacing:.002em;
  text-wrap:balance;
  text-shadow:0 2px 12px rgba(0,0,0,.92);
}

/* Long translations get a little extra horizontal room, not lower buttons. */
html[lang="nl"] .hero-description,
html[lang="de"] .hero-description{
  width:min(980px,86vw);
}
html[lang="nl"] .hero-description p,
html[lang="de"] .hero-description p{
  font-size:clamp(13px,1.34vw,18px);
}

/* Large desktop: preserve the same gap above the existing launcher. */
@media (min-width:1280px){
  .hero-description{bottom:158px;width:min(980px,78vw)}
  .hero-description p{font-size:18px;line-height:1.42}
  html[lang="nl"] .hero-description,
  html[lang="de"] .hero-description{width:min(1040px,82vw)}
}

/* Tablet-sized desktop layout: squeeze the copy, never the buttons. */
@media (min-width:721px) and (max-width:980px){
  .hero-description{
    bottom:150px;
    width:84vw;
  }
  .hero-description::before{inset:-48px -42px -24px}
  .hero-description p{
    font-size:clamp(12.5px,1.55vw,15px);
    line-height:1.38;
  }
  html[lang="nl"] .hero-description,
  html[lang="de"] .hero-description{width:88vw}
}

/* On phones the hero image itself is short, so replace its baked line in-place.
   The bottom launcher remains exactly where V22 put it. */
@media (max-width:720px){
  .hero-description{
    top:34.2vw;
    bottom:auto;
    width:88vw;
  }
  .hero-description::before{
    inset:-19px -24px -16px;
    background:
      radial-gradient(ellipse at center,
        rgba(2,5,17,.99) 0%,
        rgba(2,5,17,.95) 55%,
        rgba(2,5,17,.48) 78%,
        transparent 96%);
  }
  .hero-description p{
    font-size:clamp(8.5px,2.35vw,11px);
    line-height:1.34;
    max-width:94%;
  }
  html[lang="nl"] .hero-description p,
  html[lang="de"] .hero-description p{
    font-size:clamp(8px,2.18vw,10.5px);
  }
}


/* ============================================================
   V24 — HERO DESCRIPTION POSITION / BAKED ENGLISH REMOVAL
   User requirement:
   - DO NOT move the three main buttons.
   - Localized text starts in the free gap immediately under the tagline.
   - The English sentence baked into hero.jpg must not remain visible.
   ============================================================ */

@media (min-width:721px){
  .hero-description{
    /* V23 was too low. This moves ONLY the text layer upward ~77px. */
    bottom:235px !important;
    width:min(980px,82vw) !important;
    z-index:9;
  }

  .hero-description::before{
    /* Extend the cover downward over the original English copy in hero.jpg. */
    inset:-30px -100px -104px !important;
    border-radius:50%;
    background:
      radial-gradient(
        ellipse at 50% 48%,
        rgba(2,5,17,.995) 0%,
        rgba(2,5,17,.985) 38%,
        rgba(2,5,17,.965) 59%,
        rgba(2,5,17,.84) 73%,
        rgba(2,5,17,.46) 86%,
        transparent 100%
      ) !important;
    -webkit-backdrop-filter:blur(11px) brightness(.24) saturate(.72);
    backdrop-filter:blur(11px) brightness(.24) saturate(.72);
  }

  .hero-description p{
    max-width:960px !important;
    font-size:17px !important;
    line-height:1.42 !important;
    color:#eee8dc !important;
    text-shadow:
      0 2px 10px rgba(0,0,0,.98),
      0 0 20px rgba(2,5,17,.94) !important;
  }

  /* Longer Dutch/German copy is fitted horizontally, never by moving buttons. */
  html[lang="nl"] .hero-description,
  html[lang="de"] .hero-description{
    width:min(1060px,88vw) !important;
  }
  html[lang="nl"] .hero-description p,
  html[lang="de"] .hero-description p{
    font-size:15.5px !important;
    max-width:1040px !important;
  }
}

/* At wide desktop sizes V23 had another bottom rule; V24 deliberately
   keeps the same new vertical position. */
@media (min-width:1280px){
  .hero-description{
    bottom:235px !important;
  }
}

/* Keep V23 phone behavior; only strengthen removal of baked English. */
@media (max-width:720px){
  .hero-description::before{
    background:
      radial-gradient(
        ellipse at center,
        rgba(2,5,17,.995) 0%,
        rgba(2,5,17,.98) 53%,
        rgba(2,5,17,.72) 76%,
        transparent 96%
      ) !important;
    -webkit-backdrop-filter:blur(8px) brightness(.30);
    backdrop-filter:blur(8px) brightness(.30);
  }
}


/* ============================================================
   V25 — CLEAN HERO ART + NO VISIBLE MASK
   - Original baked English paragraph has been removed from hero-clean.jpg.
   - Therefore the black/oval cover is no longer needed.
   - Three primary buttons remain at their exact existing coordinates.
   ============================================================ */
@media (min-width:721px){
  .hero-description{
    bottom:262px !important; /* ~27px higher than V24 */
    width:min(980px,82vw) !important;
    z-index:9;
  }
  .hero-description::before{
    content:none !important;
    display:none !important;
    background:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .hero-description p{
    max-width:960px !important;
    color:#eee8dc !important;
    font-size:17px !important;
    line-height:1.42 !important;
    text-shadow:0 2px 12px rgba(0,0,0,.92) !important;
  }
  html[lang="nl"] .hero-description,
  html[lang="de"] .hero-description{width:min(1060px,88vw) !important;}
  html[lang="nl"] .hero-description p,
  html[lang="de"] .hero-description p{font-size:15.5px !important;max-width:1040px !important;}
}
@media (min-width:1280px){
  .hero-description{bottom:262px !important;}
}
@media (max-width:720px){
  .hero-description::before{
    content:none !important;
    display:none !important;
    background:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}


/* ============================================================
   V26 — small visual polish
   1) Language switcher shifts right into the free desktop area.
   2) Hero description becomes much larger with a gilded gold effect.
   3) Primary hero buttons are NOT moved.
   ============================================================ */

@media (min-width:901px){
  .hero-language{
    /* At 1648px viewport this is ~363px from the left, matching the marked free area. */
    left:clamp(300px,22vw,365px) !important;
    top:24px !important;
  }
}

@media (min-width:721px){
  .hero-description{
    bottom:248px !important;
    width:min(1240px,82vw) !important;
  }

  .hero-description p{
    max-width:1240px !important;
    margin:0 auto !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:clamp(25px,2vw,34px) !important;
    line-height:1.24 !important;
    font-weight:600 !important;
    letter-spacing:.012em !important;

    /* Gilded AstroDivine gold */
    color:#f6cd69 !important;
    background:linear-gradient(
      180deg,
      #fff1a9 0%,
      #f8d36f 28%,
      #e8aa3d 57%,
      #ffd978 78%,
      #b97920 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
      0 1px 0 rgba(255,239,170,.20),
      0 2px 8px rgba(0,0,0,.88),
      0 0 14px rgba(235,174,65,.18) !important;
  }

  /* Dutch/German are longer; keep them large but give them more width. */
  html[lang="nl"] .hero-description,
  html[lang="de"] .hero-description{
    width:min(1340px,88vw) !important;
  }
  html[lang="nl"] .hero-description p,
  html[lang="de"] .hero-description p{
    max-width:1340px !important;
    font-size:clamp(23px,1.82vw,30px) !important;
    line-height:1.22 !important;
  }
}

@media (min-width:1280px){
  .hero-description{
    bottom:248px !important;
  }
}

/* Tablet/phone language control keeps the existing compact V25 position.
   Text stays readable without becoming oversized on a small screen. */
@media (max-width:720px){
  .hero-description p{
    color:#f6cd69 !important;
    background:linear-gradient(180deg,#fff1a9 0%,#f5c85b 48%,#c88628 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:600 !important;
    text-shadow:0 2px 8px rgba(0,0,0,.92) !important;
  }
}


/* ============================================================
   V29 — TRUE SEAMLESS CONTINUATION
   Fix the real cause instead of overlapping sections.
   - NO negative margin / NO overlap between hero and #cosmos.
   - Hero itself fades to exactly the same navy used by <main>.
   - Primary hero buttons remain fully inside the hero and cannot be covered.
   - Secondary content starts naturally after the hero with a compact gap.
   ============================================================ */

:root{ --page-night:#030717; }

main{
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 12% 5%,rgba(247,215,143,.035) 0 1px,transparent 1.7px),
    radial-gradient(circle at 78% 8%,rgba(255,255,255,.025) 0 1px,transparent 1.8px),
    linear-gradient(180deg,var(--page-night),var(--page-night));
}

@media (min-width:721px){
  .hero{
    overflow:hidden !important;
  }

  /* Fade the ART itself before its physical bottom edge. */
  .hero-shade{
    inset:0 !important;
    background:
      linear-gradient(180deg,
        rgba(3,7,23,0) 0%,
        rgba(3,7,23,.015) 56%,
        rgba(3,7,23,.10) 70%,
        rgba(3,7,23,.34) 82%,
        rgba(3,7,23,.72) 92%,
        var(--page-night) 100%),
      linear-gradient(90deg,rgba(3,7,23,.08),transparent 22%,transparent 80%,rgba(3,7,23,.08)) !important;
  }

  #cosmos.launcher-section{
    margin-top:0 !important;
    padding-top:34px !important;
    position:relative;
    z-index:2;
    background:transparent !important;
  }
  #cosmos.launcher-section::before,
  #cosmos.launcher-section::after{
    content:none !important;
    display:none !important;
  }
  .secondary-launch-wrap{
    margin-top:0 !important;
  }
}

@media (max-width:720px){
  .hero-shade{
    background:linear-gradient(180deg,
      rgba(3,7,23,0) 42%,
      rgba(3,7,23,.12) 65%,
      rgba(3,7,23,.55) 84%,
      var(--page-night) 100%) !important;
  }
  #cosmos.launcher-section{
    margin-top:0 !important;
    padding-top:24px !important;
    background:transparent !important;
  }
  #cosmos.launcher-section::before,
  #cosmos.launcher-section::after{content:none !important;display:none !important;}
}


/* ============================================================
   V30 — SECOND SECTION COSMIC DECOR
   Uses line-art extracted from the existing hero artwork so the continuation
   feels like the same scene, not a separate panel.
   ============================================================ */

#cosmos.launcher-section{
  overflow:hidden;
  isolation:isolate;
  min-height:clamp(640px,58vw,900px);
  background:
    radial-gradient(circle at 11% 18%,rgba(246,210,126,.28) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 62%,rgba(255,255,255,.20) 0 1px,transparent 1.7px),
    radial-gradient(circle at 39% 31%,rgba(246,210,126,.16) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 55% 73%,rgba(255,255,255,.18) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 71% 23%,rgba(246,210,126,.23) 0 1px,transparent 1.8px),
    radial-gradient(circle at 87% 58%,rgba(255,255,255,.18) 0 1px,transparent 1.7px),
    linear-gradient(180deg,rgba(3,7,23,.12),rgba(3,7,23,0) 18%,rgba(3,7,23,0));
}

#cosmos.launcher-section::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:0;
  right:clamp(-80px,-3vw,-25px);
  top:clamp(24px,4vw,68px);
  width:clamp(300px,31vw,500px);
  height:clamp(480px,46vw,720px);
  background:url('cosmos-woman-line.png') right top/contain no-repeat;
  opacity:.16;
  filter:drop-shadow(0 0 14px rgba(238,190,89,.05));
  pointer-events:none;
}

#cosmos.launcher-section::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:0;
  left:clamp(-90px,-4vw,-30px);
  bottom:clamp(-80px,-4vw,-30px);
  width:clamp(300px,30vw,480px);
  height:clamp(360px,36vw,560px);
  background:url('cosmos-left-line.png') left bottom/contain no-repeat;
  opacity:.15;
  filter:drop-shadow(0 0 12px rgba(238,190,89,.04));
  pointer-events:none;
}

.secondary-launch-wrap{
  position:relative;
  z-index:3;
}

.secondary-launch-wrap::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:-96px;
  width:clamp(240px,25vw,390px);
  height:clamp(240px,25vw,390px);
  transform:translateX(-50%) rotate(-10deg);
  background:url('cosmos-zodiac-line.png') center/contain no-repeat;
  opacity:.055;
  pointer-events:none;
}

/* very thin orbit lines around the empty areas, intentionally low contrast */
#cosmos .secondary-launch-grid::before,
#cosmos .secondary-launch-grid::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border:1px solid rgba(228,184,91,.075);
  border-radius:50%;
  transform:rotate(-17deg);
}
#cosmos .secondary-launch-grid::before{
  width:360px;height:118px;left:-150px;top:18%;
}
#cosmos .secondary-launch-grid::after{
  width:300px;height:96px;right:-120px;bottom:9%;
  transform:rotate(14deg);
}
#cosmos .secondary-launch-grid{position:relative;z-index:2}

/* keep the top transition visually continuous instead of creating a new panel */
#cosmos.launcher-section{
  border-top:0 !important;
  box-shadow:none !important;
}

@media (max-width:900px){
  #cosmos.launcher-section::before{opacity:.105;width:330px;right:-110px;top:90px}
  #cosmos.launcher-section::after{opacity:.10;width:310px;left:-105px;bottom:30px}
  .secondary-launch-wrap::before{opacity:.035}
}

@media (max-width:720px){
  #cosmos.launcher-section{min-height:auto}
  #cosmos.launcher-section::before{opacity:.07;width:260px;right:-125px;top:120px}
  #cosmos.launcher-section::after{opacity:.065;width:240px;left:-105px;bottom:20px}
  .secondary-launch-wrap::before{display:none}
  #cosmos .secondary-launch-grid::before,
  #cosmos .secondary-launch-grid::after{opacity:.55}
}


/* ============================================================
   V31 — clean gilded hero copy
   The previous offset text-shadow looked like a second copy of the text.
   Keep the gold gradient, remove the duplicate-looking shadow.
   ============================================================ */
.hero-description p{
  text-shadow:none !important;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.42))
    drop-shadow(0 0 4px rgba(237,184,92,.12));
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

@media (max-width:720px){
  .hero-description p{
    text-shadow:none !important;
    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.46))
      drop-shadow(0 0 3px rgba(237,184,92,.10));
  }
}


/* ============================================================
   V32 — TRUE SINGLE GOLD TEXT
   No shadow, no drop-shadow, no duplicate silhouette.
   Only the gold gradient text remains.
   ============================================================ */
.hero-description,
.hero-description p{
  text-shadow:none !important;
  filter:none !important;
  box-shadow:none !important;
}

.hero-description p{
  -webkit-font-smoothing:antialiased !important;
  text-rendering:optimizeLegibility !important;
}

@media (max-width:720px){
  .hero-description,
  .hero-description p{
    text-shadow:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
}


/* ============================================================
   V33 — LOGO CLEARANCE
   Keep the built-in AstroDivine logo/tagline visible.
   Only move the localized hero description slightly downward.
   No buttons or other elements move.
   ============================================================ */
@media (min-width:721px){
  .hero-description{
    bottom:220px !important; /* 28px lower than V32 */
  }
}
@media (min-width:1280px){
  .hero-description{
    bottom:220px !important;
  }
}


/* ============================================================
   V34 — HERO COPY FINE TUNE
   - ~20% smaller
   - starts about one line lower
   - no other layout changes
   ============================================================ */
@media (min-width:721px){
  .hero-description{
    bottom:186px !important; /* ~34px lower than V33 */
  }

  .hero-description p{
    font-size:clamp(20px,1.6vw,27px) !important; /* ~20% smaller */
    line-height:1.24 !important;
  }

  html[lang="nl"] .hero-description p,
  html[lang="de"] .hero-description p{
    font-size:clamp(18.5px,1.46vw,24px) !important;
  }
}

@media (min-width:1280px){
  .hero-description{
    bottom:186px !important;
  }
}


/* ============================================================
   V35 — WANDERING STAR FIELDS
   Second and third page sections now carry many slowly drifting
   four-point AstroDivine stars. They stay behind all content.
   ============================================================ */

#cosmos.launcher-section,
.visual-story{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

#cosmos.launcher-section > :not(.section-starfield),
.visual-story > :not(.section-starfield){
  position:relative;
  z-index:3;
}

.section-starfield{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}

.wandering-star{
  --size:12px;
  --alpha:.72;
  --duration:18s;
  --delay:0s;
  --dx:70px;
  --dy:-40px;
  --glow:9px;
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  opacity:var(--alpha);
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
  animation:
    astro-star-drift var(--duration) ease-in-out var(--delay) infinite alternate,
    astro-star-twinkle calc(var(--duration) * .37) ease-in-out var(--delay) infinite alternate;
}

.wandering-star::before,
.wandering-star::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(255,249,204,.98) 0%,
    rgba(255,220,118,.96) 38%,
    rgba(221,161,49,.88) 72%,
    rgba(131,84,16,.15) 100%
  );
  box-shadow:
    0 0 var(--glow) rgba(255,219,119,.72),
    0 0 calc(var(--glow) * 2.0) rgba(243,188,78,.22);
}

/* long vertical ray */
.wandering-star::before{
  width:22%;
  height:100%;
}

/* long horizontal ray */
.wandering-star::after{
  width:100%;
  height:22%;
}

.wandering-star .star-core{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:34%;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:20%;
  background:#fff1a7;
  box-shadow:
    0 0 6px rgba(255,246,190,.95),
    0 0 15px rgba(236,184,74,.72),
    0 0 28px rgba(236,184,74,.18);
}

.wandering-star.soft{
  filter:blur(.15px);
  opacity:calc(var(--alpha) * .72);
}

.wandering-star.big{
  --glow:15px;
}

.wandering-star.tiny::before{width:28%}
.wandering-star.tiny::after{height:28%}

@keyframes astro-star-drift{
  0%{
    transform:translate3d(0,0,0) rotate(0deg) scale(.92);
  }
  35%{
    transform:translate3d(calc(var(--dx) * .43),calc(var(--dy) * .36),0) rotate(3deg) scale(1.02);
  }
  68%{
    transform:translate3d(calc(var(--dx) * .76),calc(var(--dy) * .78),0) rotate(-2deg) scale(.97);
  }
  100%{
    transform:translate3d(var(--dx),var(--dy),0) rotate(2deg) scale(1.05);
  }
}

@keyframes astro-star-twinkle{
  0%,100%{opacity:calc(var(--alpha) * .48)}
  38%{opacity:var(--alpha)}
  62%{opacity:calc(var(--alpha) * .67)}
  82%{opacity:calc(var(--alpha) * 1.08)}
}

/* Section 2: slightly richer star density around the feature buttons. */
#cosmos .section-starfield{
  opacity:.93;
  mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 94%,transparent 100%);
}

/* Section 3: a softer cinematic field around the phone/story block. */
.visual-story .section-starfield{
  opacity:.80;
  mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}

/* Add subtle long-distance orbit haze so the stars feel embedded in space. */
#cosmos .section-starfield::before,
.visual-story .section-starfield::before{
  content:"";
  position:absolute;
  width:52vw;
  height:17vw;
  min-width:500px;
  min-height:155px;
  border:1px solid rgba(235,189,93,.055);
  border-radius:50%;
  left:-18vw;
  top:31%;
  transform:rotate(-13deg);
  box-shadow:0 0 50px rgba(73,67,142,.035) inset;
}
.visual-story .section-starfield::before{
  left:auto;
  right:-20vw;
  top:23%;
  transform:rotate(16deg);
}

@media (prefers-reduced-motion:reduce){
  .wandering-star{
    animation:astro-star-twinkle 5s ease-in-out infinite alternate !important;
  }
}

@media (max-width:720px){
  .section-starfield{
    opacity:.68 !important;
  }
  .wandering-star.big{
    transform:scale(.78);
  }
}


/* ============================================================
   V36 — TRUE FOUR-POINT STARS
   Replaces the "+"-looking cross rays with a tapered diamond star,
   matching the user's reference: sharp 4-point glow, warm golden core.
   ============================================================ */

.wandering-star::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%) scaleX(.68);
  border-radius:0;
  background:
    radial-gradient(circle at 50% 50%,
      #fffbd7 0%,
      #fff0a4 11%,
      #f8ce67 26%,
      #d89a32 52%,
      rgba(205,138,37,.18) 70%,
      transparent 100%);
  clip-path:polygon(
    50% 0%,
    56% 41%,
    100% 50%,
    56% 59%,
    50% 100%,
    44% 59%,
    0% 50%,
    44% 41%
  );
  box-shadow:none;
  filter:
    drop-shadow(0 0 3px rgba(255,246,186,.96))
    drop-shadow(0 0 var(--glow) rgba(255,211,105,.68))
    drop-shadow(0 0 calc(var(--glow) * 1.8) rgba(221,160,50,.22));
}

/* Soft halo only — no second cross/ray. */
.wandering-star::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:160%;
  height:160%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,237,151,.30) 0%,
    rgba(243,191,81,.16) 30%,
    rgba(190,122,30,.055) 52%,
    transparent 72%);
  box-shadow:none;
  filter:blur(2px);
}

/* Old central diamond is no longer needed; it was contributing to the '+' look. */
.wandering-star .star-core{
  display:none !important;
}

.wandering-star.big::before{
  transform:translate(-50%,-50%) scaleX(.64);
}

.wandering-star.tiny::before{
  transform:translate(-50%,-50%) scaleX(.72);
}

/* A little sparkle pulse without turning it back into a cross. */
@keyframes astro-star-twinkle{
  0%,100%{opacity:calc(var(--alpha) * .42)}
  35%{opacity:calc(var(--alpha) * .80)}
  54%{opacity:var(--alpha)}
  72%{opacity:calc(var(--alpha) * .62)}
  88%{opacity:calc(var(--alpha) * .96)}
}