:root{--c1:#ffb020;--c2:#00e5ff;--c3:#8a5cff;--bg:#05030f}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:#fff;font-family:'Segoe UI','Malgun Gothic',system-ui,sans-serif;overflow-x:hidden;cursor:none}
a,button{cursor:none}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(5,3,15,.85) 100%)}
main,nav{position:relative;z-index:2}

.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:100;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen}
.cursor{width:10px;height:10px;background:#fff;box-shadow:0 0 20px 6px var(--c2)}

#loader{position:fixed;inset:0;background:var(--bg);z-index:200;display:grid;place-content:center;justify-items:center;gap:20px;letter-spacing:.4em;font-size:12px;transition:opacity .8s,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.ld-ring{width:60px;height:60px;border-radius:50%;border:3px solid transparent;border-top-color:var(--c1);border-bottom-color:var(--c2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

nav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;z-index:50;backdrop-filter:blur(8px);background:linear-gradient(#05030fcc,transparent)}
.logo{color:#fff;text-decoration:none;font-weight:900;letter-spacing:.2em;font-size:20px}
.logo span{background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav ul{display:flex;gap:30px;list-style:none}
nav a{color:#fff;text-decoration:none;font-size:13px;letter-spacing:.2em;opacity:.75;transition:.3s}
nav ul a:hover{opacity:1;text-shadow:0 0 12px var(--c2)}

section{min-height:100vh;padding:130px 7vw 80px;display:flex;flex-direction:column;justify-content:center}
section.right{align-items:flex-end}
section.left{align-items:flex-start}
#contact{align-items:center;text-align:center}

.eyebrow{font-family:Consolas,monospace;color:var(--c2);letter-spacing:.3em;font-size:13px;margin-bottom:18px;text-shadow:0 0 10px var(--c2)}
h1{font-size:clamp(48px,9vw,138px);line-height:.95;font-weight:900;letter-spacing:-.02em}
h1 .line{display:block;opacity:0;transform:translateY(60px) skewY(4deg);animation:rise 1s cubic-bezier(.2,.9,.2,1) forwards}
h1 .line:nth-child(2){animation-delay:.15s}h1 .line:nth-child(3){animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}
h1 em{font-style:normal;-webkit-text-stroke:2px #fff;color:transparent;filter:drop-shadow(0 0 14px var(--c2))}
h2{font-size:clamp(34px,5vw,72px);font-weight:900;line-height:1.1;margin-bottom:22px}
.grad{background:linear-gradient(90deg,var(--c1),var(--c3),var(--c2),var(--c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 5s linear infinite}
@keyframes flow{to{background-position:300% 0}}
.sub{margin-top:26px;font-size:clamp(15px,1.6vw,20px);color:#d8d4ff;max-width:560px;line-height:1.7}

.cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.btn{display:inline-block;padding:16px 38px;border:0;border-radius:60px;font-weight:800;letter-spacing:.2em;font-size:13px;color:#fff;text-decoration:none;background:linear-gradient(90deg,var(--c1),var(--c3),var(--c2));background-size:200% 100%;box-shadow:0 0 30px #ffb02066,0 0 60px #00e5ff33;transition:.4s;position:relative}
.btn:hover{background-position:100% 0;transform:translateY(-3px) scale(1.05);box-shadow:0 0 40px var(--c1),0 0 80px var(--c2)}
.btn.ghost{background:transparent;border:2px solid var(--c2);box-shadow:0 0 20px #00e5ff55,inset 0 0 20px #00e5ff33}
.btn.small{padding:10px 24px}
.btn.big{margin-top:40px;padding:22px 60px;font-size:16px}

.glass{background:linear-gradient(135deg,#ffffff1a,#ffffff05);border:1px solid #ffffff2e;border-radius:28px;padding:36px;backdrop-filter:blur(18px) saturate(160%);box-shadow:0 20px 60px #0008,inset 0 0 40px #ffffff0a;transition:transform .2s,border-color .3s}
.glass:hover{border-color:var(--c2)}
#about .glass{max-width:520px;line-height:1.8;color:#e6e3ff}
.stats{display:flex;gap:30px;margin-top:30px}
.stats b{display:block;font-size:40px;background:linear-gradient(var(--c2),var(--c1));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats small{font-size:10px;letter-spacing:.3em;opacity:.7}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:20px;max-width:min(900px,58vw);width:100%}
.cards i{font-style:normal;font-size:36px;display:block;margin-bottom:14px;filter:drop-shadow(0 0 12px var(--c1));font-family:Consolas,monospace;color:var(--c1)}
.cards h3{margin-bottom:8px;letter-spacing:.08em}
.cards p{font-size:14px;line-height:1.6;color:#cfcaf5}
footer{position:relative;padding:28px 7vw 40px;font-size:12px;line-height:1.8;opacity:.5;letter-spacing:.2em}

.reveal{opacity:0;transform:translateY(50px);transition:1s cubic-bezier(.2,.9,.2,1)}
.reveal.in{opacity:1;transform:none}

.menu-btn{display:none}
@media(max-width:800px){
  nav{padding:14px 16px}
  .logo{font-size:17px}
  .menu-btn{display:grid;gap:5px;place-content:center;width:44px;height:44px;border:1px solid #ffffff33;border-radius:12px;background:#ffffff12;cursor:pointer}
  .menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s}
  nav.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.open .menu-btn span:nth-child(2){opacity:0}
  nav.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav ul{position:absolute;top:calc(100% + 4px);right:16px;left:16px;display:none;flex-direction:column;gap:0;padding:8px;border-radius:16px;background:#0b0920f2;border:1px solid #ffffff22;box-shadow:0 20px 50px #000a;backdrop-filter:blur(16px)}
  nav.open ul{display:flex}
  nav ul a{display:block;padding:15px 14px;font-size:15px;opacity:1;border-radius:10px}
  nav ul li+li a{border-top:1px solid #ffffff14}
  nav ul a:active{background:#ffffff14}
  section.right,section.left{align-items:stretch}body,a,button{cursor:auto}.cursor{display:none}
  section{padding:110px 18px 70px}
  h1{font-size:clamp(40px,13vw,64px)}
  footer{padding:24px 18px 36px;letter-spacing:.08em}
}

@media(max-width:800px){.stats{flex-wrap:wrap}}

.cardlink{display:block;color:inherit;text-decoration:none}
.cardlink .glass{height:100%;border-color:#ffffff44}
.more{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--c1)}
.cardlink:hover .more{text-shadow:0 0 12px var(--c1)}