:root{
 --bg:#050509;--panel:#0b0b12;--panel2:#10101a;--text:#f7f7fb;--muted:#9696a8;
 --line:rgba(255,255,255,.10);--cyan:#44efff;--pink:#ff35bd;--violet:#8e63ff;
 --green:#42f5b5;--max:1240px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:var(--bg);color:var(--text);
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 overflow-x:hidden
}
body:before{
 content:"";position:fixed;z-index:-3;inset:0;
 background:
 radial-gradient(circle at 15% 8%,rgba(255,31,178,.12),transparent 28%),
 radial-gradient(circle at 84% 16%,rgba(34,231,255,.10),transparent 30%),
 radial-gradient(circle at 50% 80%,rgba(118,67,255,.07),transparent 35%)
}
body:after{
 content:"";position:fixed;z-index:-2;inset:0;opacity:.035;
 background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
 background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 80%)
}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}

.nav{
 position:fixed;top:15px;left:50%;transform:translateX(-50%);z-index:50;
 width:min(1180px,calc(100% - 28px));height:64px;padding:7px 9px 7px 12px;
 border:1px solid var(--line);border-radius:18px;background:rgba(5,5,9,.72);
 backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:space-between;
 box-shadow:0 20px 70px rgba(0,0,0,.35)
}
.brand{display:flex;align-items:center;gap:10px;font-weight:850;letter-spacing:-.04em}
.brand img{width:45px;height:45px;border-radius:12px;object-fit:cover}
.brand .p{color:#fff}.brand .c{color:var(--cyan)}
.links{display:flex;gap:27px;font-size:13px;color:#aaaabd}
.links a{transition:.2s}.links a:hover{color:#fff}
.navbtn{
 padding:11px 15px;border:1px solid rgba(255,255,255,.13);border-radius:12px;
 background:rgba(255,255,255,.05);font-weight:750;font-size:13px
}
.navbtn:hover{background:rgba(255,255,255,.10)}

.premium-menu-toggle{display:none;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:12px;width:44px;height:44px;cursor:pointer}
.premium-menu-toggle span{display:block;width:19px;height:2px;background:#fff;margin:4px auto;border-radius:5px;transition:.25s}
.premium-menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.premium-menu-toggle.open span:nth-child(2){opacity:0}
.premium-menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.premium-mobile-menu{
 display:none;position:absolute;top:68px;left:0;right:0;padding:10px;
 border:1px solid var(--line);border-radius:18px;background:rgba(8,8,13,.96);
 backdrop-filter:blur(24px);box-shadow:0 25px 70px rgba(0,0,0,.45)
}
.premium-mobile-menu a{display:block;padding:14px;border-radius:11px;color:#ccc}
.premium-mobile-menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.premium-mobile-menu.open{display:block}

.hero{min-height:100vh;padding:150px 0 90px;display:grid;align-items:center}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.badge{
 display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);
 background:rgba(255,255,255,.035);border-radius:999px;color:#c8c8d4;font-size:12px
}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}
h1{font-size:clamp(50px,7vw,88px);line-height:.92;letter-spacing:-.075em;margin:25px 0}
.gradient{
 background:linear-gradient(105deg,#fff 0%,#9ffbff 30%,#4deaff 45%,#ff5bc9 75%,#fff 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent
}
.lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:640px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:31px}
.btn{
 display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:13px;
 border:1px solid rgba(255,255,255,.13);font-weight:800;font-size:14px;transition:.25s
}
.btn.primary{background:linear-gradient(100deg,#fff,#bafcff);color:#07070b;border-color:transparent;box-shadow:0 0 40px rgba(68,239,255,.12)}
.btn.secondary{background:rgba(255,255,255,.035);color:#ddd}
.btn:hover{transform:translateY(-3px)}

.product-visual{
 min-height:560px;position:relative;display:grid;place-items:center;overflow:hidden;
 border:1px solid var(--line);border-radius:38px;
 background:radial-gradient(circle at 50% 45%,rgba(99,51,255,.15),transparent 42%),rgba(255,255,255,.025);
 box-shadow:inset 0 0 100px rgba(255,255,255,.025),0 35px 100px rgba(0,0,0,.4)
}
.product-visual:before{
 content:"";position:absolute;width:430px;height:430px;border-radius:50%;
 background:conic-gradient(from 0deg,transparent,#ff2fb7,#4cf6ff,#7d5cff,transparent);
 filter:blur(80px);opacity:.20;animation:spin 12s linear infinite
}
.product-visual img{
 position:relative;width:min(88%,570px);max-height:520px;object-fit:contain;border-radius:30px;
 filter:drop-shadow(0 0 35px rgba(54,235,255,.18));animation:float 6s ease-in-out infinite
}
@keyframes float{50%{transform:translateY(-12px) rotate(.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

.marquee{
 border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 overflow:hidden;padding:18px 0;white-space:nowrap
}
.track{display:flex;width:max-content;animation:move 26s linear infinite;color:#777783;font-weight:750;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.marquee-group{display:flex;align-items:center;flex-shrink:0}
.track span{margin:0 28px;color:#3e3e49}
@keyframes move{from{transform:translateX(0)}to{transform:translateX(-50%)}}

section{padding:115px 0}
.topline{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#58efff;font-weight:850}
.topline h2{font-size:clamp(38px,5vw,65px);line-height:.98;letter-spacing:-.06em;margin:10px 0 0}
.topline p{max-width:470px;color:var(--muted);line-height:1.7;margin:0}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
 padding:30px;min-height:250px;border:1px solid var(--line);border-radius:27px;
 background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
 position:relative;overflow:hidden;transition:.3s
}
.card:hover{transform:translateY(-7px);border-color:rgba(69,239,255,.3);box-shadow:0 25px 70px rgba(0,0,0,.25)}
.card:after{
 content:"";position:absolute;width:180px;height:180px;right:-80px;bottom:-100px;border-radius:50%;
 background:radial-gradient(circle,rgba(255,50,188,.18),transparent 65%);transition:.3s
}
.card:hover:after{transform:scale(1.6)}
.num{font-size:12px;color:#777789}
.card .icon{font-size:28px;margin:28px 0 20px}
.card h3{font-size:23px;letter-spacing:-.035em;margin:0 0 10px}
.card p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}

.showcase{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.showcase-card{
 border:1px solid var(--line);border-radius:30px;overflow:hidden;background:#09090f;
 position:relative;min-height:470px
}
.showcase-card img{width:100%;height:100%;min-height:470px;display:block;object-fit:cover;transition:.6s}
.showcase-card:hover img{transform:scale(1.025)}
.showcase-card:after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(to top,rgba(5,5,9,.72),transparent 50%)
}
.caption{position:absolute;z-index:2;left:26px;right:26px;bottom:24px}
.caption .tag{
 display:inline-block;padding:6px 9px;border:1px solid rgba(255,255,255,.15);
 border-radius:999px;background:rgba(5,5,9,.38);backdrop-filter:blur(8px);
 color:#ddd;font-size:10px;margin-bottom:10px
}
.caption h3{margin:0;font-size:25px;letter-spacing:-.04em}
.caption p{margin:5px 0 0;color:#c2c2ce;font-size:13px}

.pricing{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.price{
 border:1px solid var(--line);border-radius:30px;padding:34px;background:rgba(255,255,255,.025);
 position:relative;overflow:hidden
}
.price.featured{
 background:linear-gradient(145deg,rgba(68,239,255,.10),rgba(255,53,189,.07));
 border-color:rgba(68,239,255,.27);box-shadow:0 25px 80px rgba(68,239,255,.06)
}
.price .label{
 display:inline-flex;padding:7px 10px;border-radius:999px;border:1px solid var(--line);
 color:#bdbdca;font-size:10px;letter-spacing:.12em;text-transform:uppercase
}
.price h3{margin:20px 0 8px;font-size:27px;letter-spacing:-.04em}
.price .desc{color:var(--muted);font-size:14px;line-height:1.65;min-height:48px}
.amount{font-size:54px;font-weight:850;letter-spacing:-.06em;margin:24px 0 5px}
.amount small{font-size:14px;color:#888}
.price .subnote{color:#8d8d9c;font-size:12px;margin-bottom:24px}
.checks{display:grid;gap:10px;color:#c9c9d2;font-size:13px}
.checks div:before{content:"✓";color:var(--green);margin-right:10px}
.price .buy{margin-top:28px;width:100%;justify-content:center}

.specs{
 display:grid;grid-template-columns:.9fr 1.1fr;gap:14px
}
.spec-box{
 border:1px solid var(--line);border-radius:27px;padding:30px;background:rgba(255,255,255,.025)
}
.spec-box h3{margin:0 0 22px;font-size:23px}
.spec-row{
 display:flex;justify-content:space-between;gap:20px;padding:15px 0;
 border-bottom:1px solid var(--line);font-size:13px
}
.spec-row:last-child{border-bottom:0}
.spec-row span:first-child{color:#777789}.spec-row span:last-child{color:#ddd;text-align:right}

.cta{
 padding:80px 40px;text-align:center;border:1px solid rgba(70,239,255,.18);
 border-radius:36px;
 background:radial-gradient(circle at 50% 0,rgba(68,239,255,.12),transparent 42%),
 radial-gradient(circle at 20% 100%,rgba(255,53,189,.11),transparent 32%),rgba(255,255,255,.025)
}
.cta h2{font-size:clamp(43px,6vw,78px);line-height:.95;letter-spacing:-.065em;margin:12px 0}
.cta p{max-width:650px;color:var(--muted);margin:18px auto 27px;line-height:1.7}

footer{border-top:1px solid var(--line);padding:30px 0 45px;color:#777784;font-size:12px}
.foot{display:flex;justify-content:space-between;gap:20px}

.reveal{opacity:0;transform:translateY(20px)}
.reveal.show{opacity:1;transform:none;transition:.75s cubic-bezier(.2,.75,.2,1)}

@media(max-width:900px){
 .links{display:none}.navbtn{display:none}.premium-menu-toggle{display:block}
 .hero-grid,.showcase,.pricing,.specs{grid-template-columns:1fr}
 .hero{padding-top:125px}.product-visual{min-height:430px}
 .features{grid-template-columns:1fr}
 .topline{display:block}.topline p{margin-top:17px}
}
@media(max-width:560px){
 .wrap{width:calc(100% - 26px)}
 .nav{height:58px}.brand img{width:40px;height:40px}.brand{font-size:15px}
 section{padding:82px 0}
 .hero{padding-top:112px;padding-bottom:60px}
 h1{font-size:clamp(47px,15vw,70px)}
 .lead{font-size:16px}
 .product-visual{min-height:340px;border-radius:27px}
 .product-visual img{width:94%}
 .showcase-card,.showcase-card img{min-height:360px}
 .price{padding:27px}.amount{font-size:47px}
 .cta{padding:55px 20px;border-radius:27px}
 .foot{display:block}.foot div+div{margin-top:8px}
}