*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08080e;--fg:#f7f7fa;--muted:#9898aa;--card:#14141f;--border:#282840;
  --accent:#d9f24d;--accent2:#ff6a3d;--accent3:#7a5cff;--accent4:#00e5c7;
  --grad:linear-gradient(135deg,#d9f24d,#ff6a3d);
  --grad2:linear-gradient(135deg,#7a5cff,#00e5c7,#d9f24d);
  --shadow-soft:0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-glow:0 0 0 1px rgba(217,242,77,.15),0 20px 50px -15px rgba(217,242,77,.15);
}
*{cursor:none}
@media(max-width:900px),(hover:none){*{cursor:auto}#cursor-dot,#cursor-ring{display:none}}
#cursor-dot,#cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform}
#cursor-dot{width:8px;height:8px;background:var(--accent);box-shadow:0 0 12px 2px rgba(217,242,77,.8)}
#cursor-ring{width:38px;height:38px;border:1.5px solid rgba(217,242,77,.5);transition:width .25s,height .25s,border-color .25s,background .25s}
#cursor-ring.active{width:64px;height:64px;background:rgba(217,242,77,.08);border-color:var(--accent2)}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;position:relative}
#bg-canvas{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.55}
body::before{
  content:"";position:fixed;inset:-10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(600px circle at 15% 20%,rgba(217,242,77,.20),transparent 60%),
    radial-gradient(700px circle at 85% 15%,rgba(255,106,61,.18),transparent 60%),
    radial-gradient(800px circle at 50% 90%,rgba(122,92,255,.20),transparent 60%),
    radial-gradient(500px circle at 90% 75%,rgba(0,229,199,.16),transparent 60%),
    radial-gradient(650px circle at 30% 65%,rgba(217,242,77,.12),transparent 60%);
  animation:bgdrift 18s ease-in-out infinite alternate;
  filter:blur(10px);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 40%,transparent 100%);
  animation:gridmove 40s linear infinite;
}
@keyframes bgdrift{
  0%{transform:translate3d(0,0,0) scale(1);}
  33%{transform:translate3d(-4%,3%,0) scale(1.1);}
  66%{transform:translate3d(3%,-4%,0) scale(1.05);}
  100%{transform:translate3d(-3%,4%,0) scale(1.14);}
}
@keyframes gridmove{
  0%{background-position:0 0,0 0;}
  100%{background-position:56px 112px,56px 112px;}
}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}#bg-canvas{display:none}}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.05;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(24px) saturate(140%);background:rgba(10,10,16,.65);border-bottom:1px solid var(--border);transition:background .3s,border-color .3s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;font-family:'Space Grotesk',sans-serif}
.logo-dot{width:32px;height:32px;border-radius:8px;background:var(--grad);transition:transform .5s,box-shadow .5s;box-shadow:0 0 0 rgba(217,242,77,0)}
.logo:hover .logo-dot{transform:rotate(45deg);box-shadow:0 0 24px 4px rgba(217,242,77,.5)}
.nav-links{display:flex;gap:32px;font-size:.9rem}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:999px;font-weight:600;transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,box-shadow .25s,border-color .25s;cursor:none;border:none;font-size:.95rem;position:relative;overflow:hidden}
.btn-primary{background:var(--accent);color:#0a0a10;box-shadow:0 8px 24px -8px rgba(217,242,77,.5)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 14px 32px -8px rgba(217,242,77,.65)}
.btn-ghost{border:1px solid var(--border);color:var(--fg);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(217,242,77,.06);transform:translateY(-2px)}
.hero{padding:180px 24px 100px;position:relative;overflow:hidden}
.hero .container{position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:1px solid var(--border);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:32px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-size:clamp(3rem,9vw,8rem);margin-bottom:32px}
.hero h1 .word{display:inline-block;margin-right:.2em;opacity:0;transform:translateY(60px);animation:rise .8s cubic-bezier(.22,1,.36,1) forwards}
.hero h1 .word:nth-child(2){animation-delay:.1s}.hero h1 .word:nth-child(3){animation-delay:.2s}.hero h1 .word:nth-child(4){animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.gradient-text{background:var(--grad2);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;font-family:'Playfair Display',serif;font-style:italic;animation:gradflow 6s ease infinite}
@keyframes gradflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero p.lead{font-size:1.25rem;color:var(--muted);max-width:560px;margin-bottom:40px;opacity:0;animation:rise .8s .8s forwards}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:rise .8s 1s forwards}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none;animation:float 8s ease-in-out infinite}
.orb-1{width:400px;height:400px;background:var(--accent);top:80px;right:-100px}
.orb-2{width:500px;height:500px;background:var(--accent2);bottom:-200px;left:20%;animation-delay:3s}
.orb-3{width:340px;height:340px;background:var(--accent3);top:40%;left:-80px;animation:float2 11s ease-in-out infinite;opacity:.3}
.orb-4{width:280px;height:280px;background:var(--accent4);top:10%;left:45%;animation:float2 9s ease-in-out infinite;animation-delay:1.5s;opacity:.28}
@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-30px) translateX(10px)}}
@keyframes float2{0%,100%{transform:translateY(0) translateX(0) scale(1)}50%{transform:translateY(24px) translateX(-18px) scale(1.15)}}
.marquee{border-block:1px solid var(--border);padding:24px 0;overflow:hidden;white-space:nowrap;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.marquee-track{display:inline-flex;gap:48px;animation:marquee 24s linear infinite;font-family:'Space Grotesk',sans-serif;font-size:2.5rem;font-weight:700;text-transform:uppercase}
.marquee-track span:nth-child(4n+1){color:var(--accent);text-shadow:0 0 24px rgba(217,242,77,.5)}
.marquee-track span:nth-child(4n+2){color:var(--accent2);text-shadow:0 0 24px rgba(255,106,61,.4)}
.marquee-track span:nth-child(4n+3){color:var(--accent3);text-shadow:0 0 24px rgba(122,92,255,.4)}
.marquee-track span:nth-child(4n+4){color:#333}
@keyframes marquee{to{transform:translateX(-50%)}}
section.pad{padding:96px 24px}
.section-head{margin-bottom:64px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:12px}
h2.title{font-size:clamp(2.5rem,6vw,5rem)}
.projects{display:grid;gap:24px}
.project{display:block;padding:44px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--card);transition:border-color .35s,transform .1s linear,box-shadow .35s;position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.project::before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(217,242,77,.14),rgba(122,92,255,.08) 40%,transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.project:hover::before{opacity:1}
.project:hover{border-color:rgba(217,242,77,.45);box-shadow:var(--shadow-soft),0 0 40px -10px rgba(122,92,255,.25)}
.project-meta{display:flex;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:16px}
.project h3{font-size:clamp(2rem,4vw,3rem);margin-bottom:12px;transition:transform .3s}
.project:hover h3{transform:translateX(8px)}
.project p{color:var(--muted);max-width:600px}
.project-arrow{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s}
.project:hover .project-arrow{background:var(--accent);color:#111;border-color:var(--accent);transform:translateY(-50%) rotate(45deg)}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.service{padding:32px;border:1px solid var(--border);border-radius:16px;background:rgba(22,22,31,.4);transition:transform .3s,border-color .3s,box-shadow .3s}
.service:hover{transform:translateY(-4px);border-color:rgba(217,242,77,.35);box-shadow:var(--shadow-soft)}
.service-n{font-family:'JetBrains Mono',monospace;color:var(--accent);margin-bottom:16px;font-size:.9rem}
.service h3{font-size:1.5rem;margin-bottom:8px}
.service p{color:var(--muted);font-size:.95rem}
.cta{text-align:center;padding:80px 40px;border:1px solid var(--border);border-radius:32px;background:radial-gradient(circle at 20% 20%,rgba(217,242,77,.15),transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,106,61,.12),transparent 50%),var(--card);box-shadow:var(--shadow-soft)}
.cta h2{font-size:clamp(2rem,5vw,4rem);margin-bottom:16px}
.cta p{color:var(--muted);margin-bottom:32px}
.footer{border-top:1px solid var(--border);padding:48px 24px;color:var(--muted);font-size:.9rem}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.footer a:hover{color:var(--fg)}
.subsite-bar{position:fixed;top:0;left:0;right:0;z-index:60;background:#0d0d14;border-bottom:1px solid #222;padding:8px 24px;font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#f5f5f7}
.subsite-bar-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
.subsite-bar a{color:#d9f24d}
.form{display:grid;gap:16px;max-width:560px}
.form label{font-size:.85rem;color:var(--muted);display:block;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px;color:var(--fg);font:inherit}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media(max-width:768px){.grid-2{grid-template-columns:1fr;gap:32px}.nav-links{display:none}.project-arrow{display:none}}
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}