:root{
  --bg:#05060a; --bg-soft:#0c0e16;
  --violet:#7B5BFF; --cyan:#00E0FF;
  --text:#F5F6FA; --muted:#AEB2C4;
  --line:rgba(255,255,255,.08);
  --grad:linear-gradient(90deg,#7B5BFF,#00E0FF);
  --maxw:1240px; --pad:8vw;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);line-height:1.05;font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(123,91,255,.4);color:#fff}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-family:var(--font-display);font-size:12px;letter-spacing:4px;font-weight:500;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.label .sec-no{color:var(--violet);font-weight:600}

/* ---- Film grain overlay ---- */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}20%{transform:translate(3%,-2%)}
  30%{transform:translate(-2%,4%)}40%{transform:translate(4%,2%)}50%{transform:translate(-3%,3%)}
  60%{transform:translate(2%,-4%)}70%{transform:translate(-4%,2%)}80%{transform:translate(3%,3%)}
  90%{transform:translate(-2%,-3%)}100%{transform:translate(0,0)}}

/* ---- Custom cursor ---- */
@media(hover:hover) and (pointer:fine){
  body{cursor:none}
  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:120;pointer-events:none;
    border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
  .cursor-dot{width:6px;height:6px;background:var(--cyan);
    box-shadow:0 0 12px rgba(0,224,255,.9)}
  .cursor-ring{width:38px;height:38px;border:1px solid rgba(123,91,255,.7);
    transition:width .25s ease,height .25s ease,background .25s ease,border-color .25s ease}
  .cursor-ring.hover{width:64px;height:64px;background:rgba(123,91,255,.12);border-color:var(--cyan)}
}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---- Nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--font-display);font-weight:700;letter-spacing:1px;font-size:21px}
.nav-links{display:flex;gap:32px;font-size:14px;color:var(--muted)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;
  background:var(--grad);transition:width .3s ease}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav.scrolled{background:rgba(5,6,10,.6);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line)}
@media(max-width:640px){.nav-links{display:none}}

/* ---- Live 3D background (fixed, behind everything) ---- */
#blob-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* global veil tones the 3D so all content stays legible over it */
.scene-veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,10,.12),rgba(5,6,10,.42))}
/* all page content floats above the 3D world */
.nav,main,.footer{position:relative;z-index:5}

/* ---- Hero ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 24%,rgba(5,6,10,.4) 52%,transparent 74%)}
.hero-inner{position:relative;z-index:2}
.hero h1{font-size:clamp(44px,7.4vw,86px);max-width:880px;margin:22px 0 22px;font-weight:700}
.hero h1 .accent{display:inline-block}
.hero-sub{color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:480px;margin-bottom:36px}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  z-index:2;font-size:11px;letter-spacing:4px;color:#6b7088;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.6}50%{transform:translate(-50%,8px);opacity:1}}

/* ---- Split text (kinetic reveal) ---- */
[data-split]{perspective:900px}
.split-line{display:block;transform-style:preserve-3d}
.split-word{display:inline-block;white-space:nowrap;transform-style:preserve-3d}
.char{display:inline-block;will-change:transform,opacity;backface-visibility:hidden}
.reveal-line{opacity:0}

/* ---- Buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:500;font-size:16px;padding:16px 30px;border-radius:40px;cursor:pointer;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.btn-primary{background:var(--grad);color:#05060a;font-weight:600;
  box-shadow:0 8px 30px rgba(123,91,255,.4)}
.btn-primary:hover{box-shadow:0 14px 50px rgba(123,91,255,.65)}
.btn-ghost{border:1px solid rgba(255,255,255,.18);color:var(--text)}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:0 0 30px rgba(0,224,255,.3)}
.magnetic{will-change:transform}

/* WebGL fallback */
.no-webgl #blob-canvas{display:none}
.no-webgl .hero{background:
  radial-gradient(60vw 60vw at 80% 30%,rgba(123,91,255,.45),transparent 60%),
  radial-gradient(50vw 50vw at 10% 80%,rgba(0,224,255,.35),transparent 60%),var(--bg)}

/* ---- Marquee ---- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;background:rgba(8,10,16,.45);backdrop-filter:blur(10px)}
.marquee-track{display:flex;width:max-content;white-space:nowrap;animation:marq 26s linear infinite}
.marquee-track span{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,38px);
  letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(245,246,250,.28);padding-right:8px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- Sections ---- */
.section{padding:140px 0;position:relative}
.section-title{font-size:clamp(32px,4.8vw,56px);max-width:780px;margin:18px 0 56px;
  text-shadow:0 2px 50px rgba(5,6,10,.7)}
.label{text-shadow:0 1px 20px rgba(5,6,10,.8)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

.card{position:relative;background:rgba(10,12,20,.55);backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--line);
  border-radius:20px;padding:30px 28px 56px;overflow:hidden;
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(var(--lift,0px));
  transform-style:preserve-3d;
  transition:transform .2s ease-out,border-color .4s,box-shadow .4s,background .4s}
.card > *{position:relative;z-index:2}
.card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;z-index:3;
  background:linear-gradient(140deg,rgba(123,91,255,.6),rgba(0,224,255,.3),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.card::after{content:"";position:absolute;inset:0;border-radius:20px;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .4s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(123,91,255,.22),transparent 55%)}
.card:hover{background:rgba(16,18,28,.7);box-shadow:0 26px 70px rgba(123,91,255,.30)}
.card:hover::before{opacity:1}
.card:hover::after{opacity:1}
.card-idx{position:absolute;top:22px;right:24px;font-family:var(--font-display);font-size:13px;
  color:#5a5f78;letter-spacing:1px}
.card-ico{font-size:30px;color:var(--cyan);margin-bottom:18px;line-height:1}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}
.card-arrow{position:absolute;left:28px;bottom:24px;font-size:20px;color:var(--violet);
  opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s}
.card:hover .card-arrow{opacity:1;transform:translateX(0)}

/* ---- Process steps ---- */
.steps .step{position:relative;background:transparent;border:none;border-top:1px solid var(--line);
  border-radius:0;padding:28px 0 0;transition:none}
.step-n{font-family:var(--font-display);font-size:30px;font-weight:700;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px}
.step h3{font-size:20px;margin-bottom:8px;text-shadow:0 2px 24px rgba(5,6,10,.8)}
.step p{color:var(--muted);font-size:15px;text-shadow:0 1px 18px rgba(5,6,10,.85)}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:14px}
.stat{display:flex;flex-direction:column;align-items:flex-start}
.stat-row{display:inline-flex;align-items:baseline}
.stat-num,.stat-plus{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5.6vw,64px);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat p{color:var(--muted);font-size:14px;margin-top:8px;letter-spacing:.5px;
  text-shadow:0 1px 18px rgba(5,6,10,.85)}

/* ---- Contact ---- */
.contact-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.contact-title{margin-bottom:40px}
.contact-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--line);padding:48px 0;
  background:rgba(5,6,10,.5);backdrop-filter:blur(10px)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-links{display:flex;gap:24px;color:var(--muted);font-size:14px}
.footer-links a:hover{color:var(--text)}
.copy{color:var(--muted);font-size:14px}

/* ---- Responsive ---- */
@media(max-width:860px){.grid-4,.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .hero{text-align:left}
  #blob-canvas{opacity:.6}
  /* protect left-aligned text: keep text side dark, let blob breathe upper-right */
  .hero::before{background:linear-gradient(108deg,var(--bg) 32%,rgba(5,6,10,.45) 62%,transparent 100%)}
  .hero h1{text-shadow:0 2px 40px rgba(5,6,10,.85)}
  .hero-sub{text-shadow:0 1px 20px rgba(5,6,10,.9)}
  .cursor-dot,.cursor-ring{display:none}
  .section{padding:90px 0}
  /* no hover on touch -> reclaim the arrow's reserved space */
  .card{padding:26px 24px 28px}
  .card-arrow{display:none}
}
@media(max-width:520px){
  .nav-inner{height:62px}
  .grid-4,.stats{grid-template-columns:1fr}
  .contact-btns{flex-direction:column;width:100%}
  .contact-btns .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .card:hover,.btn:hover{transform:none}
  .marquee-track,.grain,.scroll-cue{animation:none}
  .reveal-line{opacity:1}
}