:root{--g1:#ffd36b;--g2:#ff7ad9;--g3:#7af0ff;--bg:#05060f}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:#e8eaf6;background:radial-gradient(ellipse at top,#141a3c 0%,var(--bg) 60%);min-height:100vh;line-height:1.65;overflow-x:hidden}
#sky{position:fixed;inset:0;z-index:-1;width:100%;height:100%}
.aurora{position:fixed;inset:-20% -10% auto;height:60vh;z-index:-1;filter:blur(60px);opacity:.45;background:linear-gradient(100deg,transparent 10%,#2bffc6 30%,#7a5cff 50%,#ff7ad9 70%,transparent 90%);animation:aur 16s ease-in-out infinite alternate}
@keyframes aur{from{transform:translateX(-8%) skewY(-4deg)}to{transform:translateX(8%) skewY(4deg)}}
header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:14px 28px;background:rgba(5,6,15,.55);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{font-family:"Cormorant Garamond",serif;font-size:1.45rem;font-weight:700;text-decoration:none}
nav a{color:#cfd3ff;text-decoration:none;margin-left:18px;font-size:.95rem;transition:color .2s}nav a:hover,nav a:focus{color:var(--g1)}
.glow{background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g1));background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:300%}}
main{max-width:1080px;margin:auto;padding:48px 24px}
h1{font-family:"Cormorant Garamond",serif;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.1;margin:.2em 0}
h2{font-family:"Cormorant Garamond",serif;font-size:1.8rem;margin:.4em 0}
a{color:var(--g3)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;min-height:70vh}
.lead{font-size:1.3rem;color:#d6d9ff}
.btn{display:inline-block;margin:10px 10px 0 0;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:600;color:#05060f;background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:0 0 24px rgba(255,122,217,.45);transition:transform .2s}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none}.btn:hover{transform:translateY(-2px)}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px;backdrop-filter:blur(12px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:24px 0}
.tag{display:inline-block;font-size:.75rem;padding:3px 10px;border-radius:999px;background:rgba(122,240,255,.15);color:var(--g3);letter-spacing:.05em}
.tag.live{background:rgba(255,211,107,.18);color:var(--g1)}
.icon{font-size:2rem}
.phone{width:260px;height:520px;margin:auto;border-radius:40px;padding:14px;background:linear-gradient(145deg,#2a2f55,#0c0e20);box-shadow:0 0 0 2px #3b4170,0 0 60px rgba(122,92,255,.5);position:relative}
.phone:before{content:"";position:absolute;top:22px;left:50%;width:80px;height:20px;margin-left:-40px;border-radius:12px;background:#05060f;z-index:2}
.screen{height:100%;border-radius:28px;background:#000;overflow:hidden;position:relative}
.screen:after{content:"";position:absolute;left:0;right:0;top:46%;height:34px;border-top:1px solid rgba(255,211,107,.6);border-bottom:1px solid rgba(255,211,107,.6);background:rgba(255,211,107,.06)}
.scroll{padding:200px 18px 60px;font-size:1.3rem;font-weight:600;color:#fff;text-align:center;animation:prompt 22s linear infinite}
@keyframes prompt{from{transform:translateY(0)}to{transform:translateY(-80%)}}
.rec{position:absolute;top:52px;right:20px;z-index:3;font-size:.7rem;color:#ff5a7a;font-weight:700}.rec:before{content:"\25CF ";animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:0}}
.reveal{opacity:0;transform:translateY(24px);transition:all .8s ease}.reveal.in{opacity:1;transform:none}
.prose{max-width:780px}.prose h2{margin-top:1.4em;color:var(--g1)}
footer{text-align:center;font-size:.9rem;color:#9aa0c8;padding:32px 20px;border-top:1px solid rgba(255,255,255,.08)}
footer a{color:#cfd3ff}
:focus-visible{outline:2px solid var(--g1);outline-offset:3px}
@media(max-width:760px){.hero{grid-template-columns:1fr;text-align:center}header{justify-content:center}nav a{margin:0 8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}