/* Space concept. The approved light direction is preserved on codex/nevrr-clean-homepage. */
:root {
  --paper: #050710;
  --white: #fff;
  --ink: #f4f5fc;
  --muted: #a1a7ba;
  --line: #ffffff16;
  --soft: #101522;
  --green: #a5baff;
  --dark: #080c17;
  --dark-muted: #a1a7ba;
  --blue: #a2b5ff;
  --primary-bright: #a2b5ff;
  color-scheme: dark;
}
::selection { background: #454f9a; color: #fff; }
.site-nav { background: #050710db; border-color: #ffffff0d; }
.brand { color: #f7f8ff; }
.nav-links a, .signin { color: #b3b8c8; }
.button { background: #f0f2ff; color: #101324; box-shadow: 0 0 24px #a3b1ff0b; }
.button:hover { background: #d9dfff; }
.eyebrow { color: #a8b9f4; letter-spacing: .18em; }
.muted-heading { color: #868fa7; }
.home-hero { padding: 0; isolation: isolate; background: transparent; }
/* Transparent phone artwork shares the page's continuous star field. */
.hero-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center; }
.hero-intro { min-height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: 70px 0 80px; }
.hero-intro .eyebrow { justify-content: flex-start; font-size: 10px; margin-bottom: 28px; }
.status-dot { width: 5px; height: 5px; background: #b5c5ff; box-shadow: 0 0 14px #91aaff; }
.home-hero h1 { max-width: 600px; font-size: clamp(65px, 6.2vw, 90px); letter-spacing: -.065em; line-height: 1.015; }
.home-hero h1 span { color: #bac9ff; }
.hero-description { margin: 25px 0 30px; max-width: 390px; font-size: 16px; color: #b0b7cd; line-height: 1.75; }
.hero-actions { justify-content: flex-start; gap: 24px; }
.hero-actions .text-link { color: #d7dded; font-size: 12px; }
.store-badge { background: #f4f5fc; color: #0b0e18; border-color: #fff; border-radius: 10px; box-shadow: 0 0 28px #9baaff12; }
.store-badge img { filter: brightness(0); }
.store-badge:hover { box-shadow: 0 0 35px #a0b0ff30; }
.download-note { color: #8b94ae; margin-top: 18px; }
.hero-principles { position: relative; padding: 27px 0 30px; color: #b3b9cc; border-top-color: #ffffff1a; }
.hero-principles svg, .principle-mark { color: #98afff; }
.phone-stage { background: transparent; margin-top: 65px; mask-image: linear-gradient(#000 calc(100% - 180px), transparent 100%); }
.phone-stage::after { display: none; }
.stage-ring { border-color: #6d85d21a; }
.stage-ring::after { border-color: #6d85d212; }
.stage-phone { filter: drop-shadow(0 15px 32px #0008); }
.stage-caption { color: #808ba6; }
.caption-line { background: #61749a66; }
.toolkit { border-top: 0; }
.feature-card { border: 1px solid #ffffff10; border-radius: 24px; }
.protection-card { background: radial-gradient(ellipse at 70% 90%, #1c3b3544, transparent 65%), #10161c; }
.progress-card { background: radial-gradient(ellipse at 50% 95%, #334d8655, transparent 70%), #111622; }
.feature-number { color: #93a4c5; }
.feature-copy p { color: #a4adbf; }
.card-phone { filter: drop-shadow(0 15px 20px #0007); }
.card-caption { background: linear-gradient(transparent, #10161c 72%); color: #c4cbd8; }
.progress-card .card-caption { background: linear-gradient(transparent, #111622 72%); }
.urge-section { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 80% 50%, #223b7829, transparent 60%), #080c17; }
.dark-section .eyebrow { color: #a8b9f4; }
.dark-section .muted-heading { color: #868fa7; }
.check-list { color: #b9c0d4; }
.check-list li::before { color: #9fb4fa; }
.orbit { border-color: #9dabff14; }
.visual-note { color: #8d99b5; }
.milestones { position: relative; background: radial-gradient(ellipse at 50% 65%, #1f245033, transparent 67%); }
.gem-display { background: radial-gradient(circle, #151d3a 0, #0a1021 48%, #080c16 70%); border: 1px solid #94a8ff15; box-shadow: inset 0 0 35px #7c92dc05; }
.cosmic-orb { width: 90%; max-width: 250px; filter: drop-shadow(0 0 18px #627aea16); }
.community-section { background: radial-gradient(ellipse at 20% 60%, #273e7930, transparent 60%), #0b101c; border-block: 1px solid var(--line); }
.community-values span { border-color: #8499c62e; color: #adb8d0; }
.guide-image { background: #111725; border: 1px solid #ffffff0c; }
.guide-image img { filter: grayscale(.6) brightness(.8); }
.final-cta { position: relative; background: radial-gradient(ellipse at 50% 100%, #24336b77, transparent 67%), #090d1a; border-block: 1px solid var(--line); overflow: hidden; }
.final-cta::before { content: ''; position: absolute; pointer-events: none; width: 800px; height: 800px; left: calc(50% - 400px); top: 160px; border: 1px solid #a6b8ff15; border-radius: 50%; box-shadow: 0 0 0 90px #a6b8ff04, 0 0 0 180px #a6b8ff03; }
.final-cta .container { position: relative; }
.footer { background: #050710; }
.skip-link { background: #f4f5fc; color: #050710; }
@media (min-width: 1700px) {
 .hero-intro { min-height: 760px; }
}
@media (max-width: 1100px) {
 .hero-intro { min-height: 640px; }
 .home-hero h1 { font-size: 74px; }
 .hero-description { max-width: 350px; }
}
@media (max-width: 800px) {
 .nav-links { background: #090e1c; }
 .hero-intro { min-height: 630px; padding-block: 60px 70px; }
 .home-hero h1 { font-size: 64px; }
 .hero-description { max-width: 300px; font-size: 14px; }
 .hero-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 580px) {
 .hero-intro { justify-content: flex-start; min-height: 865px; padding-top: 56px; padding-bottom: 0; }
 .hero-intro .eyebrow { font-size: 9px; margin-bottom: 24px; }
 .home-hero h1 { font-size: clamp(50px, 15vw, 76px); line-height: 1; max-width: 350px; }
 .hero-description { margin: 22px 0 23px; max-width: 335px; font-size: 14px; }
 .hero-actions { flex-direction: row; align-items: center; gap: 19px; }
 .hero-actions .text-link { font-size: 11px; max-width: 135px; gap: 7px; }
 .hero-actions .text-link svg { width: 16px; }
 .hero-actions .store-badge { padding: 10px 15px; }
 .hero-actions .store-badge strong { font-size: 20px; }
 .download-note { font-size: 10px; margin-top: 14px; }
 .hero-principles { flex-direction: row; width: calc(100% - 40px); border-top: 1px solid var(--line); padding: 24px 0; gap: 16px; align-items: flex-start; }
 .hero-principles > span { flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 10px; line-height: 1.5; }
 .phone-stage { margin-top: 45px; mask-image: linear-gradient(#000 calc(100% - 110px), transparent 100%); }
 .gem-display { width: 100%; }
 .cosmic-orb { width: 95%; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* A shared, distant star field keeps the lower page in one continuous space. */
body { isolation: isolate; }
.space-depth { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #050710; }
.space-depth::before { content: ''; position: absolute; inset: -130px -10%; background: radial-gradient(ellipse at 7% 35%, #203b794d, transparent 43%), radial-gradient(ellipse at 94% 74%, #45317740, transparent 39%), radial-gradient(ellipse at 55% 110%, #123f5626, transparent 48%); transform: translate3d(0, var(--nebula-offset, 0px), 0); }
.space-depth canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; mask-image: linear-gradient(90deg, #000, #0009 35%, #0009 65%, #000); }
.urge-section { background: radial-gradient(ellipse at 80% 50%, #223b7829, transparent 60%), #080c1780; }
.community-section { background: radial-gradient(ellipse at 20% 60%, #273e7930, transparent 60%), #0b101c80; }
.final-cta { background: radial-gradient(ellipse at 50% 100%, #24336b77, transparent 67%), #090d1a88; }
.footer { background: linear-gradient(#05071066, #050710ed); }
@media (max-width: 580px) {
 .space-depth canvas { opacity: .6; }
 .space-depth::before { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
 .space-depth::before { transform: none; }
}

/* The approved three-phone composition is the hero artwork. */
.hero-phones { width: 100%; height: auto; aspect-ratio: 1.07; margin: 0; mask-image: linear-gradient(#000 70%, transparent 100%); }
.hero-phones .stage-main { width: 40%; left: 30%; top: 4%; }
.hero-phones .stage-left, .hero-phones .stage-right { width: 32.2%; top: 20%; }
.hero-phones .stage-left { left: 4.7%; }
.hero-phones .stage-right { left: 63.1%; }
.hero-phones .stage-ring { width: 98%; height: 65%; left: 1%; bottom: -9%; }
@media (max-width: 1100px) {
 .hero-layout { grid-template-columns: 1fr 1.1fr; gap: 20px; }
 .hero-actions { gap: 15px; }
}
@media (max-width: 800px) {
 .hero-layout { grid-template-columns: 1fr; gap: 30px; }
 .hero-intro { min-height: 0; padding: 56px 0 0; }
 .hero-description { max-width: 420px; }
 .hero-actions { flex-direction: row; align-items: center; }
 .hero-phones { max-width: 620px; justify-self: center; margin: 0; }
}
@media (max-width: 580px) {
 .hero-layout { gap: 36px; }
 .hero-description { max-width: 335px; }
 .hero-phones { width: calc(100% + 28px); max-width: none; aspect-ratio: 1.02; }
}