:root{--bg:#07070b;--panel:#111119;--panel2:#171722;--text:#f7f7fb;--muted:#9797aa;--line:#292938;--accent:#8b5cf6;--accent2:#22d3ee;--ok:#36d399;--warn:#f5b942;--bad:#fb7185;--radius:18px;--shadow:0 24px 80px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button,a{transition:.2s ease}a{color:inherit;text-decoration:none}button{cursor:pointer}.hidden{display:none!important}
.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(900px 520px at 16% 20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%),radial-gradient(700px 460px at 90% 12%,rgba(34,211,238,.11),transparent 65%),#07070b}.noise{position:fixed;inset:0;z-index:-1;opacity:.18;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:20px}.brand-mark{width:31px;height:31px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;box-shadow:0 0 30px color-mix(in srgb,var(--accent) 50%,transparent)}.brand-mark:after{content:'V';font-weight:900;color:white}.brand small{font-size:9px;letter-spacing:.14em;color:var(--accent2);display:block;margin-top:-3px}
.topbar{height:72px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20;background:rgba(7,7,11,.7)}.nav{display:flex;align-items:center;gap:28px;font-size:13px;color:#c5c5d1}.nav a:hover{color:white}.actions{display:flex;gap:10px;align-items:center}.btn{border:1px solid var(--line);background:#171721;color:white;padding:11px 17px;border-radius:11px;font-weight:700}.btn:hover{border-color:#505064;transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--accent),#6d4de0);border-color:transparent;box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 25%,transparent)}.btn.ghost{background:rgba(255,255,255,.045)}.btn.sm{padding:8px 12px;font-size:12px}.btn.danger{color:#fecdd3;border-color:rgba(251,113,133,.3)}
.hero{min-height:660px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4vw;padding:70px 5vw 56px;overflow:hidden}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(139,92,246,.35);border-radius:999px;color:#d8c6ff;background:rgba(139,92,246,.08);font-size:11px;font-weight:800;letter-spacing:.13em}.eyebrow i{width:6px;height:6px;background:var(--accent2);border-radius:50%;box-shadow:0 0 12px var(--accent2)}h1{font-size:clamp(46px,6vw,82px);line-height:.98;letter-spacing:-.065em;margin:24px 0}h1 span{background:linear-gradient(100deg,var(--accent),#f472b6 62%,var(--accent2));-webkit-background-clip:text;color:transparent}.hero p{max-width:610px;color:#b2b2c1;line-height:1.75;font-size:17px}.hero-buttons{display:flex;gap:12px;margin:30px 0 36px;flex-wrap:wrap}.mini-metrics{display:flex;gap:10px;flex-wrap:wrap}.metric{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:12px 15px;min-width:105px}.metric b{font-size:18px;color:#ddd0ff}.metric span{display:block;color:#77778b;font-size:9px;letter-spacing:.12em;margin-top:4px}
.showcase{position:relative;height:520px}.poster{position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#141420}.poster:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,5,9,.9));z-index:1}.poster strong{position:absolute;left:18px;bottom:18px;z-index:2;font-size:16px}.poster small{display:block;color:#bbb;font-weight:500}.p1{inset:35px 24% 90px 0;transform:rotate(-4deg);background:radial-gradient(circle at 70% 20%,#7042b9,transparent 34%),linear-gradient(145deg,#2b173b,#131729 50%,#091020)}.p1:after{content:'◢';font-size:190px;position:absolute;right:18%;top:16%;color:rgba(255,255,255,.14)}.p2{width:45%;height:250px;right:0;top:4px;transform:rotate(4deg);background:radial-gradient(circle at 40% 45%,#18a9b6,transparent 24%),linear-gradient(150deg,#102b38,#1c1232)}.p3{width:49%;height:228px;right:2%;bottom:28px;transform:rotate(2deg);background:radial-gradient(circle at 62% 44%,#c6406c,transparent 25%),linear-gradient(145deg,#401228,#171426)}.glass-card{position:absolute;z-index:5;left:11%;right:6%;bottom:0;background:rgba(17,17,25,.78);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.14);border-radius:17px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.glass-card .play{width:42px;height:42px;border:0;border-radius:50%;color:white;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.section{padding:90px 5vw}.section-head{max-width:720px;margin-bottom:34px}.section-head h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.045em;margin:12px 0}.section-head p{color:var(--muted);line-height:1.7}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature{padding:26px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);min-height:195px}.feature .icon{font-size:25px}.feature h3{margin:28px 0 9px}.feature p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.section.alt{background:linear-gradient(180deg,transparent,rgba(139,92,246,.05),transparent)}
.demo-shell{display:grid;grid-template-columns:220px 1fr;border:1px solid var(--line);border-radius:24px;min-height:620px;background:#0b0b11;overflow:hidden;box-shadow:var(--shadow)}.side{background:#09090f;border-right:1px solid var(--line);padding:20px 12px}.side .brand{padding:4px 10px 22px}.side-label{font-size:9px;color:#66667a;letter-spacing:.15em;font-weight:800;margin:20px 11px 9px}.side button{display:flex;width:100%;border:0;background:transparent;color:#9999ab;padding:11px 12px;border-radius:10px;gap:10px;text-align:left;font-size:12px}.side button:hover,.side button.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:white}.admin-main{padding:24px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.admin-top h2{font-size:23px;margin:0}.admin-tag{font-size:11px;background:#171721;padding:8px 11px;border-radius:999px;color:#c8c8d5}.admin-tag:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.stat b{font-size:24px;display:block}.stat span{color:var(--muted);font-size:9px;letter-spacing:.1em}.stat em{font-style:normal;font-size:12px;color:var(--ok)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:18px;margin-top:14px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel h3{font-size:14px;margin:0}.catalog-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.catalog-stats div{text-align:center;padding:13px;border:1px solid var(--line);border-radius:10px}.catalog-stats b{display:block}.catalog-stats small{font-size:8px;color:var(--muted)}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:#77778b;font-size:9px;letter-spacing:.09em;padding:11px;border-bottom:1px solid var(--line)}td{padding:12px 11px;border-bottom:1px solid rgba(255,255,255,.045)}.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:rgba(54,211,153,.1);color:var(--ok);font-size:9px}.badge.warn{background:rgba(245,185,66,.1);color:var(--warn)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field label{display:block;color:#8f8fa1;font-size:9px;font-weight:800;letter-spacing:.1em;margin:0 0 7px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#0d0d14;color:white;padding:12px;border-radius:10px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}.toggle{display:flex;justify-content:space-between;align-items:center;padding:14px;border:1px solid var(--line);border-radius:12px}.switch{width:42px;height:24px;border-radius:99px;background:#30303d;position:relative;border:0}.switch:after{content:'';position:absolute;width:18px;height:18px;top:3px;left:3px;background:white;border-radius:50%;transition:.2s}.switch.on{background:var(--accent)}.switch.on:after{left:21px}.color-dot{width:28px;height:28px;border-radius:50%;border:2px solid white;background:var(--accent)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.plan{padding:24px;border-radius:18px;border:1px solid var(--line);background:var(--panel)}.plan.pop{border-color:var(--accent);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 13%,transparent)}.plan h3{font-size:21px}.price{font-size:34px;font-weight:800;letter-spacing:-.05em}.price small{font-size:13px;color:var(--muted)}.plan ul{color:var(--muted);font-size:12px;line-height:2;padding-left:18px}.plan .btn{width:100%}.legal{color:#77778b;font-size:11px;line-height:1.65;margin-top:18px;max-width:780px}.footer{padding:32px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#77778b;font-size:11px}.footer-links{display:flex;gap:18px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);z-index:50;display:grid;place-items:center;padding:18px}.modal-card{width:min(430px,100%);background:#111119;border:1px solid #30303f;border-radius:22px;padding:26px;box-shadow:var(--shadow)}.modal-card h2{margin:0 0 8px}.modal-card>p{color:var(--muted);font-size:13px}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.profile{background:transparent;border:0;color:white}.avatar{aspect-ratio:1;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:28px;margin-bottom:8px}.profile:nth-child(2) .avatar{background:linear-gradient(135deg,#f97316,#fb7185)}.profile:nth-child(3) .avatar{background:linear-gradient(135deg,#22c55e,#0ea5e9)}.toast{position:fixed;right:20px;bottom:20px;z-index:90;transform:translateY(120px);opacity:0;background:#181824;border:1px solid #343445;color:white;padding:13px 17px;border-radius:12px;box-shadow:var(--shadow);font-size:12px}.toast.show{transform:none;opacity:1}
.mobile-menu{display:none}.mobile-admin-nav{display:none}
@media(max-width:900px){.nav{display:none}.mobile-menu{display:block}.hero{grid-template-columns:1fr;padding-top:50px}.showcase{height:430px}.features{grid-template-columns:1fr 1fr}.demo-shell{grid-template-columns:1fr}.side{display:none}.stats{grid-template-columns:1fr 1fr}.plans{grid-template-columns:1fr}.mobile-admin-nav{display:flex;gap:8px;overflow:auto;padding-bottom:10px}.mobile-admin-nav button{white-space:nowrap}.section{padding:65px 4vw}}
@media(max-width:560px){.topbar{padding:0 4vw}.actions .ghost{display:none}h1{font-size:47px}.hero{padding-left:4vw;padding-right:4vw}.showcase{height:360px}.p1{right:10%;bottom:50px}.p2,.p3{width:48%;height:180px}.features{grid-template-columns:1fr}.admin-main{padding:14px}.stats,.catalog-stats,.form-grid{grid-template-columns:1fr 1fr}.panel{overflow:auto}.footer{flex-direction:column;gap:15px}}