*{box-sizing:border-box}
:root{
  --bg:#030611;
  --panel:#0a1020;
  --line:rgba(255,255,255,.12);
  --text:#ffffff;
  --muted:#b9c1d4;
  --cyan:#00f5d4;
  --teal:#00d4ff;
  --blue:#2f7dff;
  --violet:#8a4cff;
  --green:#24ff8a;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.aurora{
  position:fixed;inset:-20%;z-index:-3;
  background:
    radial-gradient(circle at 18% 16%,rgba(0,245,212,.18),transparent 26%),
    radial-gradient(circle at 82% 10%,rgba(138,76,255,.18),transparent 30%),
    radial-gradient(circle at 50% 90%,rgba(47,125,255,.15),transparent 34%),
    linear-gradient(180deg,#030611,#050817 55%,#02040c);
}
.grain{
  position:fixed;inset:0;z-index:-1;opacity:.06;pointer-events:none;
  background-image:linear-gradient(45deg,#fff 1px,transparent 1px);
  background-size:9px 9px;
}
.cursor-light{
  position:fixed;z-index:0;width:420px;height:420px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,245,212,.18),rgba(138,76,255,.08),transparent 68%);
  filter:blur(18px);
}
.header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:18px 7%;
  background:rgba(3,6,17,.72);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;gap:13px}
.brand strong{font-size:28px;letter-spacing:-.04em}
.brand small{display:block;color:var(--muted);font-size:12px}
.brand-mark{
  position:relative;width:52px;height:52px;border-radius:16px;
  background:linear-gradient(145deg,rgba(0,245,212,.16),rgba(138,76,255,.12));
  border:1px solid rgba(0,245,212,.35);
  box-shadow:0 0 30px rgba(0,245,212,.18);
}
.brand-mark span{
  position:absolute;width:10px;height:10px;border-radius:3px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  box-shadow:0 0 14px rgba(0,245,212,.6);
  animation:mark 2s ease-in-out infinite;
}
.brand-mark span:nth-child(1){left:12px;top:13px}
.brand-mark span:nth-child(2){left:26px;top:17px;animation-delay:.2s}
.brand-mark span:nth-child(3){left:18px;top:30px;animation-delay:.4s}
.brand-mark span:nth-child(4){left:32px;top:33px;animation-delay:.6s}
nav{display:flex;gap:28px}
nav a{color:#e2e6f3;font-size:15px;transition:.25s}
nav a:hover{color:var(--cyan)}
.top-btn{
  padding:12px 20px;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  font-weight:900;
  box-shadow:0 15px 42px rgba(0,245,212,.22);
}
.hero{
  min-height:92vh;
  display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:38px;
  padding:90px 7% 60px;
  position:relative;
}
.hero-copy{position:relative;z-index:2}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border:1px solid rgba(0,245,212,.35);
  border-radius:999px;background:rgba(0,245,212,.06);
  color:#dffefa;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
}
.badge i{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px var(--cyan)}
h1{
  margin:22px 0 20px;
  font-size:clamp(58px,8vw,112px);
  line-height:.86;letter-spacing:-.085em;
}
h1 span{
  display:block;
  background:linear-gradient(90deg,var(--cyan),var(--teal),var(--blue),var(--violet));
  -webkit-background-clip:text;color:transparent;
}
.hero-copy p{
  color:var(--muted);font-size:20px;line-height:1.65;max-width:720px;
}
.price-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:30px 0 32px;max-width:760px;
}
.price-row div{
  padding:16px;border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
}
.price-row b{display:block;font-size:25px;color:#fff}
.price-row small{color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:16px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 24px;border-radius:999px;
  font-weight:950;transition:.25s;
}
.btn.primary{
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));
  box-shadow:0 18px 60px rgba(0,245,212,.24);
}
.btn.ghost{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.15);
}
.hero-art{
  position:relative;z-index:2;min-height:590px;border-radius:44px;
  background:
    radial-gradient(circle at 50% 75%,rgba(0,245,212,.16),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 45px 120px rgba(0,0,0,.55);
  overflow:hidden;transform-style:preserve-3d;
}
.hero-art:before{
  content:"";position:absolute;inset:-45%;
  background:conic-gradient(from 180deg,transparent,rgba(0,245,212,.45),transparent,rgba(138,76,255,.5),transparent);
  opacity:.14;animation:spin 15s linear infinite;
}
.pixel-snake{
  position:absolute;left:50%;top:46%;width:660px;height:430px;
  transform:translate(-50%,-50%);
  animation:snakeFloat 5s ease-in-out infinite;
}
.head{
  position:absolute;left:90px;top:92px;width:185px;height:145px;
}
.head:before,.head:after,.jaw,.snout{
  content:"";position:absolute;border-radius:10px;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  box-shadow:0 0 18px rgba(0,245,212,.6);
}
.head:before{left:26px;top:28px;width:122px;height:74px}
.head:after{left:72px;top:0;width:82px;height:38px;background:linear-gradient(135deg,var(--cyan),var(--blue))}
.jaw{left:58px;top:94px;width:96px;height:32px;background:linear-gradient(135deg,var(--blue),var(--violet))}
.snout{left:0;top:54px;width:62px;height:44px}
.eye{position:absolute;left:92px;top:43px;width:17px;height:17px;background:#fff;border-radius:50%;z-index:4;box-shadow:0 0 20px var(--cyan)}
.crest i{
  position:absolute;width:28px;height:78px;border-radius:16px 16px 5px 5px;
  box-shadow:0 0 18px rgba(0,245,212,.45);
  transform-origin:bottom center;
}
.crest i:nth-child(1){left:185px;top:28px;background:linear-gradient(var(--green),var(--cyan));transform:rotate(-38deg)}
.crest i:nth-child(2){left:225px;top:22px;background:linear-gradient(var(--cyan),var(--teal));transform:rotate(-20deg)}
.crest i:nth-child(3){left:268px;top:28px;background:linear-gradient(var(--teal),var(--blue));transform:rotate(0deg)}
.crest i:nth-child(4){left:308px;top:45px;background:linear-gradient(var(--blue),var(--violet));transform:rotate(18deg)}
.crest i:nth-child(5){left:346px;top:72px;background:linear-gradient(var(--violet),var(--cyan));transform:rotate(34deg)}
.body i{
  position:absolute;width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 0 20px rgba(0,245,212,.45);
  animation:pixelBreathe 2.4s ease-in-out infinite;
}
.body i:nth-child(3n){background:linear-gradient(135deg,var(--green),var(--cyan))}
.body i:nth-child(4n){background:linear-gradient(135deg,var(--blue),var(--violet))}
.s1{left:248px;top:184px}.s2{left:292px;top:202px}.s3{left:336px;top:232px}.s4{left:372px;top:274px}.s5{left:410px;top:318px}.s6{left:456px;top:342px}
.s7{left:510px;top:330px}.s8{left:546px;top:286px}.s9{left:528px;top:238px}.s10{left:480px;top:214px}.s11{left:428px;top:224px}.s12{left:390px;top:262px}
.s13{left:344px;top:306px}.s14{left:292px;top:330px}.s15{left:238px;top:316px}.s16{left:204px;top:276px}.s17{left:214px;top:232px}.s18{left:252px;top:196px}
.particles i{
  position:absolute;width:8px;height:8px;border-radius:2px;
  background:var(--cyan);box-shadow:0 0 14px var(--cyan);
  animation:particle 4s linear infinite;
}
.particles i:nth-child(1){left:70px;top:70px}.particles i:nth-child(2){left:560px;top:95px;animation-delay:.5s}.particles i:nth-child(3){left:585px;top:260px;animation-delay:.9s}.particles i:nth-child(4){left:160px;top:360px;animation-delay:1.3s}.particles i:nth-child(5){left:430px;top:86px;animation-delay:1.7s}.particles i:nth-child(6){left:620px;top:360px;animation-delay:2s}.particles i:nth-child(7){left:42px;top:260px;animation-delay:2.4s}.particles i:nth-child(8){left:355px;top:390px;animation-delay:2.8s}
.glow-platform{
  position:absolute;left:50%;bottom:58px;transform:translateX(-50%);
  width:430px;height:72px;border-radius:50%;
  border:2px solid rgba(0,245,212,.42);
  box-shadow:0 0 55px rgba(0,245,212,.32),inset 0 0 50px rgba(0,245,212,.16);
}
.art-note{position:absolute;left:34px;bottom:28px;color:var(--muted);font-weight:800}
.ticker{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.ticker div{display:flex;gap:46px;white-space:nowrap;padding:18px 0;animation:ticker 24s linear infinite}
.ticker span{font-weight:950;color:#eafcff}.ticker span:nth-child(even){color:var(--cyan)}
.section{padding:95px 7%;position:relative;z-index:2}.section.dark{background:rgba(0,0,0,.25)}
.section-title{text-align:center;max-width:850px;margin:0 auto 46px}
.section-title small,.cta-box small{color:var(--cyan);text-transform:uppercase;letter-spacing:.16em;font-weight:950}
.section-title h2,.cta-box h2{font-size:clamp(36px,5vw,66px);line-height:.98;letter-spacing:-.06em;margin:10px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card,.plan,.steps div,.cta-box{
  position:relative;overflow:hidden;border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  transform-style:preserve-3d;
}
.card,.plan{padding:28px;transition:.25s}
.card:before,.plan:before{
  content:"";position:absolute;inset:0;opacity:0;transition:.25s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,245,212,.2),transparent 32%);
}
.card:hover:before,.plan:hover:before{opacity:1}
.card:hover,.plan:hover{border-color:rgba(0,245,212,.5);box-shadow:0 25px 80px rgba(0,245,212,.12)}
.icon{font-size:38px;width:74px;height:74px;display:grid;place-items:center;border-radius:24px;background:rgba(0,245,212,.08);border:1px solid rgba(0,245,212,.25);margin-bottom:20px}
.card h3,.plan h3,.steps h3{font-size:25px;margin:0 0 12px}.card p,.plan p,.steps p,.disclaimer,.cta-box p{color:var(--muted);line-height:1.65}.card b{color:var(--cyan)}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.plan.featured{border-color:rgba(0,245,212,.55);box-shadow:0 35px 90px rgba(0,245,212,.13)}.plan span{display:inline-block;color:var(--cyan);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:950}.plan strong{display:block;font-size:29px;margin:12px 0;color:#fff}
ul{padding-left:20px;color:#e2e9f5;line-height:1.85;margin:20px 0 26px}.disclaimer{text-align:center;margin-top:24px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.steps div{padding:26px}.steps span{color:var(--cyan);font-weight:950}
.cta{padding:80px 7% 100px}.cta-box{text-align:center;padding:64px}.cta-box p{max-width:650px;margin:16px auto 28px}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:30;background:var(--cyan);color:#03100e;padding:14px 18px;border-radius:999px;font-weight:950;box-shadow:0 15px 45px rgba(0,245,212,.28)}
footer{text-align:center;padding:32px 7%;color:#929bad;background:#02040c;border-top:1px solid rgba(255,255,255,.08)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes mark{50%{transform:translateY(-5px);filter:brightness(1.35)}}@keyframes snakeFloat{50%{transform:translate(-50%,-50%) translateY(-16px)}}@keyframes pixelBreathe{50%{filter:brightness(1.35);transform:translateY(-3px)}}@keyframes particle{50%{transform:translate(12px,-20px);opacity:.45}}@keyframes ticker{to{transform:translateX(-50%)}}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.cards,.pricing,.steps,.price-row{grid-template-columns:1fr 1fr}nav{display:none}.pixel-snake{transform:translate(-50%,-50%) scale(.82)}}
@media(max-width:650px){.header{padding:14px 5%}.top-btn{display:none}.hero,.section,.cta{padding-left:5%;padding-right:5%}h1{font-size:56px}.hero-copy p{font-size:17px}.cards,.pricing,.steps,.price-row{grid-template-columns:1fr}.hero-art{min-height:430px}.pixel-snake{transform:translate(-50%,-50%) scale(.55)}.wa-float{left:18px;right:18px;text-align:center}.cursor-light{display:none}}