/* Decorative effects never cover controls or carry essential information. */
.skip-link { background: #7250d8; }
.hero { isolation: isolate; background: #090a13; }
.hero::before, .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero::before { inset: -30% -15%; background: radial-gradient(ellipse at 72% 34%, #864bdd3b, transparent 37%), radial-gradient(ellipse at 84% 80%, #25667b32, transparent 38%), radial-gradient(ellipse at 14% 42%, #41246b30, transparent 35%); animation: ambient-drift 22s ease-in-out infinite alternate; }
.hero::after { inset: -25% -10%; background: radial-gradient(ellipse 65% 14% at 64% 48%, #9260d737 0%, #764aca18 45%, transparent 76%), radial-gradient(ellipse 45% 10% at 85% 69%, #55c4de25 0%, #40b7d610 42%, transparent 76%); transform-origin: 70% 55%; animation: aurora-flow 17s ease-in-out infinite alternate; }
.hero-inner { position: relative; }
.hero-eyebrow { color: #c0a8ff; }
.hero-eyebrow .eyebrow-line { background: #b390ff; box-shadow: 0 0 12px #a57bf590; }
.hero h1 { color: #f5f2ff; }
.hero-market { color: #c8b8ff; background: linear-gradient(100deg, #e5d8ff, #b29aff 48%, #7edde9 90%, #e5d8ff); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: chroma-flow 14s ease-in-out infinite alternate; }
.hero-precision { color: #b8b2cc; }
.hero-precision em { color: #ded2ff; }
.hero-description { color: #afabc4; }
.hero-copy { animation: hero-enter .8s cubic-bezier(.2,.7,.3,1) both; }
.hero .metrics { animation: hero-enter .95s .12s cubic-bezier(.2,.7,.3,1) both; }
.metrics { isolation: isolate; background: linear-gradient(140deg, #1c172e, #10131e) padding-box, linear-gradient(135deg, #ae77dba8, #647bdc70, #53b6ce70, #3b2b50) border-box; border: 1px solid transparent; box-shadow: 0 0 52px -18px #a16be85c, 0 25px 65px -28px #000a, inset 0 1px 0 #e1bcff0d; }
.metrics::before { display: none; }
.metrics::after { content: ''; position: absolute; inset: -20px -18px; pointer-events: none; z-index: -1; border-radius: 35px; border: 1px solid #8e65d31a; transform: rotate(-3deg); }
.metrics strong { text-shadow: 0 0 28px #b098ff24; }
.metrics > div:first-child strong span { color: #a696ff; }
.metrics > div:last-child strong span { color: #79daee; }
.metrics > div + div { border-color: #393048; }
.button { position: relative; }
.button-primary { overflow: hidden; border-color: #ab83ff55; }
.button-primary::after { content: ''; position: absolute; inset: -60% auto -60% -70%; width: 35%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, #ffffff26, transparent); pointer-events: none; }
.button-primary:hover::after, .button-primary:focus-visible::after { animation: button-sheen .7s ease-out; }
.header-cta { background: linear-gradient(120deg, #332047, #21263e); color: #d9caff; border-color: #79629b70; box-shadow: 0 0 20px #7e52ce18; }
.header-cta:hover { background: #392850; border-color: #b49add; }
.hero-actions .button-primary { box-shadow: 0 0 35px -8px #8a5bec88, inset 0 1px 0 #e3caff24; }
.button svg { transition: transform .22s ease; }
.button:hover svg { transform: translateX(3px); }
.button-secondary { box-shadow: inset 0 1px 0 #e4cfff08; }
.header-inner nav a { position: relative; }
.header-inner nav a::after { content: ''; position: absolute; height: 1px; bottom: -7px; left: 0; right: 0; background: #b699ef; box-shadow: 0 0 8px #b483ff55; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.header-inner nav a:hover::after, .header-inner nav a:focus-visible::after { transform: scaleX(1); }
.features { background: radial-gradient(ellipse at 0 35%, #3120441c, transparent 50%), #0b0c14; }
.feature-card { --glow-rgb: 156, 112, 246; --card-accent: #bf9dff; --card-border: #b180ef40; isolation: isolate; background: radial-gradient(ellipse at 5% 0, rgba(var(--glow-rgb), .06), transparent 70%), #11121e; border-color: #312b43; border-radius: 17px; box-shadow: inset 0 1px 0 #f2deff08; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.feature-card:nth-child(3n+2) { --glow-rgb: 63, 190, 217; --card-accent: #84dcea; --card-border: #65c9db40; }
.feature-card:nth-child(3n) { --glow-rgb: 107, 131, 246; --card-accent: #a9b9ff; --card-border: #899ef440; }
.feature-card:hover { background: radial-gradient(ellipse at 5% 0, rgba(var(--glow-rgb), .08), transparent 70%), #141520; border-color: var(--card-border); box-shadow: 0 12px 45px -25px rgba(var(--glow-rgb), .4), inset 0 1px 0 #f2deff0c; transform: translateY(-4px); }
.feature-icon { color: var(--card-accent); border-color: var(--card-border); background: rgba(var(--glow-rgb), .1); box-shadow: 0 0 20px rgba(var(--glow-rgb), .06); transition: box-shadow .3s, transform .3s; }
.feature-card:hover .feature-icon { box-shadow: 0 0 28px rgba(var(--glow-rgb), .2); transform: translateY(-2px); }
.feature-note { color: var(--card-accent); border-color: rgba(var(--glow-rgb), .14); }
.feature-note svg { color: var(--card-accent); }
.feature-number { color: #92879f; }
.spotlight-card::before { z-index: -1; content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(300px circle at var(--pointer-x, 50%) var(--pointer-y, 35%), rgba(var(--glow-rgb, 156, 112, 246), .115), transparent 75%); transition: opacity .3s ease; }
.spotlight-card.pointer-lit::before { opacity: 1; }
.how { background: radial-gradient(ellipse at 80% 100%, #19465326, transparent 50%), radial-gradient(ellipse at 10% 0, #4c246727, transparent 45%), #0e0e19; border-block: 1px solid #2f253b; }
.step-track > span { text-shadow: 0 0 24px #b394ff2b; }
.step:nth-child(2) .step-track > span { color: #adbbff; }
.step:nth-child(3) .step-track > span { color: #80d7e3; }
.step-track > div { position: relative; background: linear-gradient(90deg, #a77ae460, #84bdcc13); }
.step-track > div::after { content: ''; position: absolute; height: 3px; width: 22%; top: -1px; left: 0; background: linear-gradient(90deg, transparent, #b59be8, transparent); box-shadow: 0 0 9px #a483c94a; opacity: .6; animation: trace-line 5s ease-in-out infinite; }
.step:nth-child(2) .step-track > div::after { animation-delay: -1.7s; }
.step:nth-child(3) .step-track > div::after { animation-delay: -3.4s; }
.pricing { background: radial-gradient(ellipse at 50% 75%, #53228f1b, transparent 54%), #080910; }
.plan { --glow-rgb: 148, 114, 207; isolation: isolate; background: linear-gradient(145deg, #171421, #10101a); box-shadow: inset 0 1px 0 #c7a5e00b; transition: border-color .3s, box-shadow .3s, transform .3s; }
.plan:hover { border-color: #76608d; box-shadow: 0 12px 40px -18px #5f39924a; transform: translateY(-4px); }
.plan.popular { border-color: #9d76da; background: radial-gradient(ellipse at 50% 0, #6a3e8645, transparent 60%), linear-gradient(160deg, #20162e, #13121f); box-shadow: 0 0 0 4px #9b6acd0b, 0 0 55px -20px #ba75ef66, inset 0 1px 0 #dfb7ff25; }
.plan.popular:hover { border-color: #c2a0f2; box-shadow: 0 0 0 4px #9b6acd13, 0 0 65px -18px #ba75ef80; }
.popular-label { box-shadow: 0 0 20px -5px #c49aff8c; z-index: 1; }
.popular .plan-cta { background: linear-gradient(110deg, #c9aeff, #aab9ff); border-color: #cfb5f6; box-shadow: 0 0 25px -10px #c9adff85; }
.popular .plan-cta:hover { background: linear-gradient(110deg, #dec9ff, #c0cbff); }
.plan:last-child .plan-badge { background: #1a2d34; color: #9bd4dc; }
.plan:last-child .plan-features svg { color: #7bcdd8; }
.faq { background: #0b0c14; }
.faq-trigger { transition: color .2s; }
.faq-plus { transition: box-shadow .25s, background .25s; }
.faq-trigger:hover .faq-plus, .faq-trigger[aria-expanded=true] .faq-plus { box-shadow: 0 0 18px #9f73dc27; }
.faq-answer:not([hidden]) { animation: answer-enter .3s ease-out; }
.site-footer { position: relative; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, #8d6bb14d, #43879042, transparent); }
dialog { background: radial-gradient(ellipse at top right, #39224745, transparent 45%), #11101c; box-shadow: 0 30px 120px #000a, 0 0 45px #80529b22; }
dialog[open] { animation: checkout-enter .25s ease-out; }
dialog::backdrop { background: #05040ccc; }
.network-tabs button[aria-pressed=true] { box-shadow: 0 0 0 1px #8067df, 0 0 16px #9765d922; }
.close-modal:hover { box-shadow: 0 0 14px #a172d32b; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
@keyframes ambient-drift { from { transform: translate3d(-2%, -3%, 0) scale(1); opacity: .7; } to { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; } }
@keyframes aurora-flow { 0% { transform: translate3d(-3%, 2%, 0) rotate(-17deg) scale(1); opacity: .48; } 50% { transform: translate3d(1%, -2%, 0) rotate(-9deg) scale(1.08); opacity: .9; } 100% { transform: translate3d(5%, -4%, 0) rotate(-3deg) scale(1.12); opacity: .65; } }
@keyframes chroma-flow { from { background-position: 0 50%; } to { background-position: 100% 50%; } }
@keyframes hero-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes button-sheen { from { left: -70%; } to { left: 135%; } }
@keyframes trace-line { 0%, 10% { translate: 0 0; opacity: 0; } 30% { opacity: .7; } 85% { translate: 350% 0; opacity: 0; } 100% { translate: 350% 0; opacity: 0; } }
@keyframes answer-enter { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes checkout-enter { from { opacity: 0; translate: 0 9px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 900px) {
  .metrics::after { inset: -12px -7px; border-radius: 28px; transform: rotate(-1.5deg); }
}
@media (hover: none), (pointer: coarse) {
  .hero::before, .hero::after, .hero-market, .step-track > div::after { animation: none; }
  .spotlight-card::before { display: none; }
  .feature-card:hover, .plan:hover { transform: none; }
  .metrics { box-shadow: 0 12px 32px -18px #8862cf55; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-copy, .hero .metrics, .faq-answer:not([hidden]), dialog[open] { opacity: 1; translate: none; scale: none; }
  .feature-card:hover, .plan:hover, .button:hover, .button:hover svg, .feature-card:hover .feature-icon { transform: none; }
  .spotlight-card::before { display: none; }
}