:root { --bg:#1e0f36; --bg2:#2a1650; --card:rgba(255,255,255,.07); --border:rgba(255,255,255,.14); --text:#f1eaff; --muted:#b9a9d9; --accent:#7c3aed; --accent2:#a78bfa; --font: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font); color:var(--text); line-height:1.6; background: radial-gradient(1100px 650px at 12% -8%, #3a1d70, transparent 60%), radial-gradient(900px 600px at 95% 10%, #4c1d95 0%, transparent 55%), var(--bg); background-attachment: fixed; }
a { color: var(--accent2); }
h1,h2,h3 { line-height:1.15; margin:0 0 .6rem; }
h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); letter-spacing:-.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); text-align:center; margin-bottom: 1.6rem; }
h3 { font-size:1.1rem; }
p { margin:.4rem 0 1rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .center { text-align:center; }
.grad { background: linear-gradient(90deg,#c4b5fd,#7c3aed 55%,#e879f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.glass { background: var(--card); border:1px solid var(--border); border-radius:20px; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 40px rgba(0,0,0,.3); }

.ribbon { background: linear-gradient(90deg,#7c3aed,#c026d3); text-align:center; padding:.45rem 1rem; font-weight:700; font-size:.88rem; letter-spacing:.02em; }
.nav { position: sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem clamp(1rem,4vw,3rem); background: rgba(30,15,54,.8); backdrop-filter: blur(14px); border-bottom:1px solid var(--border); }
.nav nav { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:flex-end; }
.nav nav a { color:var(--text); text-decoration:none; font-size:.92rem; opacity:.85; } .nav nav a:hover { opacity:1; }
.logo { display:flex; align-items:center; gap:.55rem; font-weight:800; color:var(--text); text-decoration:none; }
.btn { display:inline-block; padding:.8rem 1.4rem; border-radius:14px; background: linear-gradient(135deg,var(--accent),#5b21b6); color:#fff !important; font-weight:700; text-decoration:none; border:0; box-shadow:0 8px 24px rgba(124,58,237,.45); transition:transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.small { padding:.45rem 1rem; font-size:.88rem; opacity:1 !important; }
.btn.big { padding:1rem 1.8rem; font-size:1.05rem; }
.btn.ghost { background:transparent; border:1px solid var(--border); box-shadow:none; }

.hero { max-width:1150px; margin:0 auto; padding: clamp(2.5rem,7vw,5.5rem) clamp(1rem,4vw,2rem) 3rem; display:grid; grid-template-columns: 1.1fr .9fr; gap:2.5rem; align-items:center; }
.chip { display:inline-block; padding:.3rem .8rem; border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:.8rem; color:var(--accent2); margin-bottom:1rem; }
.lead { font-size:1.15rem; color:#d8ccf5; max-width:34em; }
.cta { display:flex; gap:.8rem; flex-wrap:wrap; margin:1.4rem 0 .8rem; }
.hero-card { padding:1.4rem; transform: rotate(1.5deg); }
.mock-title { font-weight:800; font-size:1.15rem; } .mock-ch { color:var(--accent2); font-size:.85rem; margin:.1rem 0 .8rem; }
.mock-text { font-family: Georgia, serif; font-size:1.05rem; line-height:1.7; }
.mock-text mark { background: rgba(124,58,237,.45); color:#fff; border-radius:5px; padding:1px 3px; box-shadow:0 0 0 3px rgba(124,58,237,.35); }
.wave { display:flex; align-items:center; gap:3px; height:54px; margin:1rem 0; }
.wave i { flex:1; background: linear-gradient(var(--accent2),var(--accent)); border-radius:3px; height:30%; animation: bar 1.1s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay:.2s; } .wave i:nth-child(3n+1) { animation-delay:.45s; } .wave i:nth-child(5n) { animation-delay:.7s; }
@keyframes bar { 0%,100% { height:20%; } 50% { height:95%; } }
.mock-ctl { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.9rem; } .mock-ctl b { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff; }

.strip { max-width:1000px; margin:0 auto 2rem; padding:0 1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.strip b { display:block; font-size:2rem; color:#c4b5fd; } .strip span { color:var(--muted); font-size:.85rem; }

.section { max-width:1100px; margin:0 auto; padding: 3.5rem clamp(1rem,4vw,2rem); }
.section.alt { max-width:none; background: rgba(0,0,0,.18); } .section.alt > * { max-width:900px; margin-left:auto; margin-right:auto; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.feat { padding:1.3rem; } .feat p { color:#d0c3ee; margin:0; font-size:.95rem; }
.steps { list-style:none; padding:0; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.steps li { padding:1.4rem; text-align:center; } .steps span { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--accent); font-weight:800; margin-bottom:.6rem; } .steps p { margin:0; color:#d0c3ee; }
.privacy { max-width:820px; text-align:center; padding:2rem 1.5rem; margin:1rem auto; } .privacy h2 { margin-bottom:.8rem; }
.prices { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; max-width:720px; margin:0 auto; }
.price { padding:1.6rem; position:relative; text-align:center; } .price.hot { border-color: var(--accent2); box-shadow:0 0 0 2px rgba(167,139,250,.35), 0 10px 40px rgba(0,0,0,.35); }
.badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#c026d3,#7c3aed); padding:.2rem .8rem; border-radius:999px; font-size:.75rem; font-weight:800; white-space:nowrap; }
.tag { margin:.4rem 0 1rem; } .tag b { font-size:3rem; } .tag span { display:block; color:var(--accent2); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
.price ul { list-style:none; padding:0; margin:0 0 1.3rem; text-align:left; } .price li { padding:.3rem 0 .3rem 1.5rem; position:relative; color:#d8ccf5; } .price li::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:800; }
details { padding:1rem 1.2rem; margin-bottom:.7rem; } summary { cursor:pointer; font-weight:700; } details p { margin:.6rem 0 0; color:#d0c3ee; }
.final { text-align:center; padding:3.5rem 1rem; } .final h2 { margin-bottom:1.2rem; }
.foot { text-align:center; padding:2rem 1rem 3rem; border-top:1px solid var(--border); font-size:.88rem; } .foot a { margin:0 .2rem; }

/* legal pages */
body.legal .doc { max-width:820px; margin:2rem auto; padding:1.5rem clamp(1rem,4vw,2.2rem) 2rem; } body.legal h1 { font-size:2rem; } body.legal h2 { text-align:left; font-size:1.2rem; margin:1.6rem 0 .4rem; } body.legal li { margin:.3rem 0; } body.legal .nav nav a { opacity:1; }

@media (max-width:820px) { .hero { grid-template-columns:1fr; } .hero-card { transform:none; } .strip { grid-template-columns:repeat(2,1fr); } .nav nav a:not(.btn) { display:none; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }

/*pricing*/
.price-head{text-align:center;padding-top:3rem}
.price-head h1{font-size:clamp(2rem,5vw,3.2rem);margin:.6rem 0}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.2rem;max-width:1100px;margin:0 auto;padding:1rem 1rem 3rem}
.plan{padding:1.6rem;display:flex;flex-direction:column;position:relative}
.plan.featured{border:1px solid #a78bfa;box-shadow:0 0 40px #7c3aed55;transform:translateY(-6px)}
.plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#c026d3,#7c3aed);color:#fff;font-size:.75rem;font-weight:700;padding:.25rem .8rem;border-radius:999px}
.plan .price{margin:.8rem 0 .2rem}.plan .price b{font-size:2.4rem}.plan .price span{opacity:.7}
.plan .yearly{margin:0 0 1rem;opacity:.85}.plan .yearly em{color:#c4b5fd;font-style:normal}
.plan ul{list-style:none;padding:0;margin:0 0 1.4rem;flex:1}
.plan li{padding:.35rem 0 .35rem 1.4rem;position:relative;line-height:1.4}
.plan li:before{content:"\2713";position:absolute;left:0;color:#a78bfa;font-weight:700}
.plan .btn{text-align:center}

.owner-dot{position:fixed;left:14px;bottom:14px;z-index:9999;width:22px;height:22px;border-radius:50%;background:#7c3aed;opacity:.5;box-shadow:0 0 12px #7c3aed;transition:opacity .2s}.owner-dot:hover{opacity:1}

/*pricing2*/
.price-head .lead{margin-left:auto;margin-right:auto;text-align:center}
.plans{align-items:stretch}
.plan{text-align:left;padding:1.8rem 1.6rem}
.plan.featured{transform:none}
.plan h3{margin:0 0 .3rem;font-size:1.4rem}
.plan .muted{margin:0;min-height:3em}
.plan .amount{margin:1rem 0 .3rem;display:flex;align-items:baseline;gap:.3rem;white-space:nowrap}
.plan .amount b{font-size:2.6rem;line-height:1}
.plan .amount span{opacity:.7}
.plan .yearly{margin:0 0 1.2rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.12)}
.plan ul{margin:0 0 1.6rem;flex:1}
.plan .btn{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:auto}

/*pricing3*/
.plan .btnrow{display:flex;gap:.6rem;margin-top:auto}
.plan .btnrow .btn{flex:1;width:auto;padding-left:.5rem;padding-right:.5rem}