:root{color-scheme:dark;--bg:#0c0a0f;--surface:#151119;--line:#30252e;--text:#f8eef2;--muted:#baaab6;--accent:#eda6be;--accent-hot:#ffccdb;font-family:"Geist","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.62}
:focus-visible{outline:2px solid var(--accent-hot);outline-offset:4px}
[hidden]{display:none!important}
.nav,footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px clamp(18px,6vw,94px);position:relative;z-index:3}
.nav{min-height:76px;border-bottom:1px solid #2b222b;background:#100c12}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:1.18rem;font-weight:800;letter-spacing:-.04em}
.brand img{object-fit:contain}
.nav nav{display:flex;align-items:center;gap:clamp(12px,3vw,34px);font-size:.9rem;color:var(--muted)}
.nav nav a:hover,.nav nav [aria-current]{color:var(--accent-hot)}
.nav-account{border:1px solid var(--line);border-radius:8px;padding:9px 14px;color:var(--text)}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;flex-wrap:wrap}
.hero{position:relative;isolation:isolate;min-height:clamp(550px,75vh,820px);overflow:hidden;display:grid;align-items:center;padding:70px clamp(22px,8vw,130px);background:radial-gradient(ellipse at 73% 45%,#281523 0,transparent 59%),linear-gradient(155deg,#0c0a0f 25%,#150d16)}
.starfield{position:absolute;inset:0;pointer-events:none;opacity:.46;background-image:radial-gradient(circle at 18px 24px,#ebc6db 1px,transparent 1.7px),radial-gradient(circle at 66px 53px,#916781 .8px,transparent 1.6px);background-size:127px 131px,171px 163px;mask-image:linear-gradient(90deg,transparent 5%,#000 55%)}
.hero-copy{position:relative;z-index:2;width:min(570px,100%);animation:rise .8s ease-out both}
.eyebrow{color:var(--accent);font-size:.78rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700}
.eyebrow span{display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;background:var(--accent);border-radius:50%;box-shadow:0 0 13px #ff99b9}
h1,h2,p{margin:0}
h1{font-weight:850;letter-spacing:-.075em;font-size:clamp(2.9rem,7.5vw,7.4rem);line-height:.94;margin-block:14px 20px}
.hero h1{font-size:clamp(5rem,13.5vw,12.5rem);background:linear-gradient(112deg,#fff8fa 12%,#edbed1 42%,#fdf0f6 60%,#a96585 90%);background-size:200% auto;background-clip:text;color:transparent;animation:word-light 7s ease-in-out infinite alternate}
.lede{font-size:clamp(1rem,2vw,1.26rem);line-height:1.55;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;border-radius:9px;border:1px solid transparent;font-weight:750;transition:background .2s,transform .2s,border-color .2s;text-align:center}
.primary{background:var(--accent);color:#211019}
.primary:hover{background:var(--accent-hot);transform:translateY(-2px)}
.secondary{background:#171019bd;border-color:#604350;color:var(--text)}
.secondary:hover{border-color:var(--accent);transform:translateY(-2px)}
.orbit-scene{position:absolute;right:clamp(26px,11vw,180px);top:50%;width:clamp(240px,39vw,610px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;display:grid;place-items:center}
.orbit-scene::before{content:"";position:absolute;inset:-15%;background:radial-gradient(ellipse,#d0528d28 0,transparent 65%);filter:blur(16px)}
.orbit{position:absolute;inset:12% -12%;border:1px solid #c986aa40;border-radius:50%;transform:rotate(-25deg) scaleY(.48)}
.orbit-inner{inset:19% -4%;border-color:#ffb9d665;transform:rotate(25deg) scaleY(.65)}
.planet-half{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 29% 24%,#e5a1c3 0,#b56187 7%,#703a5b 23%,#422342 44%,#241427 64%,#0f0a13 76%);box-shadow:inset 0 0 22px #e490b68a,inset -24px -22px 75px #050307;overflow:hidden}
.planet-half::after{content:"";position:absolute;inset:-16%;border-radius:50%;background:repeating-radial-gradient(ellipse at 17% 8%,#fbb8dc32 0 2%,transparent 3% 6%,#09060b43 7% 8%,transparent 10% 14%),radial-gradient(circle at 47% 32%,transparent 25%,#1d0b2388 71%);mix-blend-mode:overlay;transform:rotate(-21deg)}
.planet-left{clip-path:inset(-12% 50% -12% -12%);--split:-14%;--angle:-5deg;animation:split 1.65s cubic-bezier(.2,.77,.22,1) .2s both}
.planet-right{clip-path:inset(-12% -12% -12% 50%);--split:14%;--angle:5deg;animation:split 1.65s cubic-bezier(.2,.77,.22,1) .2s both}
.orbit-logo{position:relative;width:34%;height:auto;object-fit:contain;filter:drop-shadow(0 0 23px #ff95bb9c);animation:logo-float 5s ease-in-out 1.1s infinite both}
@keyframes split{from{transform:translateX(0) rotate(0)}to{transform:translateX(var(--split)) rotate(var(--angle))}}
@keyframes logo-float{0%{opacity:0;transform:translateY(10px) scale(.75)}18%,100%{opacity:1;transform:translateY(0) scale(1)}59%{opacity:1;transform:translateY(-10px) scale(1.045)}}
@keyframes word-light{from{background-position:0 center}to{background-position:100% center}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.section{width:min(1170px,calc(100% - 44px));margin-inline:auto}
.intro{padding-block:44px 62px;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:18px;color:var(--muted)}
.intro h2{color:var(--text);font-size:clamp(1.65rem,3vw,2.8rem);letter-spacing:-.05em}
.intro a,.auth-links a{color:var(--accent)}
.intro a:hover,.auth-links a:hover{text-decoration:underline}
.subpage{padding-block:clamp(46px,8vw,112px);animation:rise .55s ease-out both}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.plans article,.account{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:clamp(20px,3vw,34px)}
.plans article{transition:transform .2s,border-color .2s}
.plans article:hover{transform:translateY(-4px);border-color:#aa6b88}
.plans .lifetime{border-color:#9d5b7d;background:linear-gradient(140deg,#291726,#161018)}
.price{font-size:clamp(2.5rem,5vw,4.7rem);font-weight:800;letter-spacing:-.08em;margin:12px 0 24px}
.price small{font-size:.44em;color:var(--muted);letter-spacing:0}
.auth-shell{padding-block:clamp(36px,8vw,92px);display:grid;grid-template-columns:1fr minmax(310px,460px);align-items:center;gap:clamp(22px,5vw,70px);animation:rise .55s ease-out both}
.auth-art{min-height:350px;align-self:stretch;display:grid;place-items:center;border:1px solid var(--line);border-radius:16px;background:repeating-radial-gradient(ellipse at center,#f0a0c115 0 1px,transparent 2px 35px),radial-gradient(ellipse,#502039,#1b121d 51%,#110c13 75%);overflow:hidden}
.auth-art img{filter:drop-shadow(0 0 28px #f492bcaa);animation:logo-float 6s ease-in-out infinite}
.account h1{font-size:clamp(2.2rem,4vw,3.4rem);margin-top:0}
.account h2{font-size:1.2rem;margin-top:24px}
.account form,.account label{display:grid;gap:7px}
.account form{gap:15px}
.account input,.account select{padding:11px 12px;width:100%;background:#100d13;border:1px solid #55404e;border-radius:7px;color:var(--text)}
.account small,#subscription{color:var(--muted)}
.auth-links{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:18px;font-size:.91rem}
#message{color:var(--accent);min-height:1.5em;margin-bottom:6px}
.identity{font-weight:800;font-size:1.25rem;margin-bottom:7px}
#logout{margin-top:16px}
.showcase{margin:30px 0 0}
.preview-stage{display:grid;place-items:center;perspective:1050px;min-height:clamp(260px,42vw,560px);overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:30px 18px;background:radial-gradient(ellipse,#3a2033,#1a111c 50%,#100c13 75%)}
.preview-stage > :first-child{transform:rotateX(var(--turn-x,10deg)) rotateY(var(--turn-y,-15deg));transition:transform .16s ease-out;box-shadow:8px 25px 70px #070408c9}
.game-frame{display:block;width:min(760px,90%);height:auto;border:1px solid #9b617f;border-radius:12px}
figcaption{color:var(--muted);margin-top:10px;font-size:.9rem}
@media(max-width:760px){.hero{min-height:620px;align-items:end;padding-bottom:52px}.orbit-scene{top:32%;right:50%;transform:translate(50%,-50%);width:clamp(240px,59vw,400px)}.hero-copy{width:100%}.hero h1{font-size:clamp(5rem,17vw,8rem)}.intro{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr;max-width:540px}.auth-art{min-height:120px}.auth-art img{width:66px;height:66px}}
@media(max-width:360px){.nav{gap:8px;padding-inline:12px}.nav nav{gap:8px;font-size:.8rem}.nav-account{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.planet-half{transform:translateX(var(--split)) rotate(var(--angle))}.preview-stage > :first-child{transform:none}}

html{scroll-behavior:smooth}
.nav-account{background:var(--accent);color:#211019;border-color:transparent;font-size:clamp(.88rem,2vw,1.06rem);font-weight:800;padding:13px clamp(14px,3vw,27px);box-shadow:0 6px 26px #e381a52c}
.nav nav .nav-account:hover{background:var(--accent-hot);color:#211019}
.nav{padding-block:14px}
.hero{--orbit-scroll:0}
.orbit-scene{perspective:900px;transform:translateY(calc(-50% + var(--orbit-scroll) * 105px)) scale(calc(1 + var(--orbit-scroll) * .16))}
.planet-left{--split:-18%;--angle:-13deg;--scroll-shift:-20%}
.planet-right{--split:18%;--angle:13deg;--scroll-shift:20%}
@keyframes split{from{transform:translateX(0) rotateY(0)}to{transform:translateX(calc(var(--split) + var(--orbit-scroll) * var(--scroll-shift))) rotateY(calc(var(--angle) + var(--orbit-scroll) * var(--angle)))}}
.orbit-outer{animation:ring 13s ease-in-out infinite alternate}
@keyframes ring{to{transform:rotate(-40deg) scaleY(.58)}}
.pricing-section,.client-section{padding-block:clamp(58px,10vw,130px);scroll-margin-top:25px}
.pricing-section h2,.client-section h2{font-size:clamp(2.2rem,6vw,5.1rem);letter-spacing:-.07em;line-height:.98}
.plans{perspective:1100px}
.plans .price-card{isolation:isolate;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:290px;padding:clamp(21px,4vw,40px);background:radial-gradient(ellipse at top right,#44273e 0,transparent 62%),#18131c;transform:rotateX(var(--turn-x,0deg)) rotateY(var(--turn-y,0deg));box-shadow:0 17px 45px #06040785}
.plans .lifetime{background:radial-gradient(ellipse at top right,#633450 0,transparent 70%),#21151f;border-color:#b36b8f}
.price-card h3{margin:0;font-size:1rem;color:var(--accent-hot)}
.price-card .price{margin-block:20px 36px;font-size:clamp(3rem,6vw,5.5rem);white-space:nowrap}
.price-card a{margin-top:auto;align-self:flex-start}
.card-orbit{position:absolute;z-index:-1;right:-30%;top:-20%;width:85%;aspect-ratio:1;border-radius:50%;border:1px solid #d88eb85e;box-shadow:0 0 0 20px #dd98bd12,0 0 0 39px #dd98bd0b,0 0 0 61px #dd98bd08;transform:rotate(-34deg) scaleY(.56)}
.client-section{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.client-copy{grid-column:1/-1;margin-bottom:20px}
.client-copy p{max-width:640px;margin-top:19px}
.client-section .showcase{margin-top:0}
.client-section .preview-stage{min-height:clamp(215px,29vw,355px)}
.reveal-ready{opacity:0;translate:0 24px;transition:opacity .65s ease,translate .65s ease}
.reveal-ready.revealed{opacity:1;translate:0 0}
.plans .reveal-ready{transition:opacity .65s ease,translate .65s ease,transform .17s ease-out,border-color .2s}
.account details{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.account summary{cursor:pointer;color:var(--accent)}
.account details form{margin-top:16px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .20s ease both}
::view-transition-new(root){animation:page-in .32s ease both}
@keyframes page-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}}
@media(max-width:760px){.orbit-scene{transform:translate(50%,calc(-50% + var(--orbit-scroll) * 55px))}.client-section{grid-template-columns:1fr}.plans .price-card{min-height:210px}.price-card .price{margin-block:16px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}::view-transition-old(root),::view-transition-new(root){animation:none}}