/* ═══════════════════════════════════════
   DESIGN SYSTEM
═══════════════════════════════════════ */
:root {
  --black: #000000;
  --deep: #06020E;
  --purple: #7B2FFF;
  --purple2: #A855F7;
  --cyan: #00F5CC;
  --lime: #BFFF00;
  --white: #FFFFFF;
  --muted: rgba(255,255,255,.45);
  --border: rgba(255,255,255,.08);
  --glass: rgba(255,255,255,.05);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  cursor:none;
}
::-webkit-scrollbar { width:2px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--purple); }

/* ── CURSOR */
#cur {
  width:10px; height:10px; background:var(--cyan);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  will-change:transform;
}
#cur2 {
  width:36px; height:36px;
  border:1px solid rgba(0,245,204,.35);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  will-change:transform;
}

/* ── PROGRESS BAR */
#prog {
  position:fixed; top:0; left:0; height:2px; z-index:1000;
  background:linear-gradient(90deg, var(--purple), var(--cyan), var(--lime));
  width:0;
}

/* ═══════════════════════════════════════
   LOADER
═══════════════════════════════════════ */
#loader {
  position:fixed; inset:0; background:var(--black);
  z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; transition:opacity .7s, transform .7s;
}
.l-logo {
  font-family:'Outfit',sans-serif;
  font-size:2rem; font-weight:700; letter-spacing:-.02em;
}
.l-logo .dot { color:var(--cyan); }
.l-pct {
  font-family:'Outfit',sans-serif;
  font-size:4rem; font-weight:700; color:white;
  letter-spacing:-.03em; line-height:1;
}
.l-bar-wrap {
  width:180px; height:2px;
  background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden;
}
.l-bar {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:2px; box-shadow:0 0 10px var(--cyan);
  transition:width .08s linear;
}
.l-txt {
  font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  z-index:500; transition:all .4s;
}
#nav.solid {
  padding:12px 20px;
  background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
@media(min-width:768px){ #nav.solid { padding:14px 40px; } }
@media(min-width:1024px){ #nav.solid { padding:16px 60px; } }
.nav-logo {
  font-family:'Outfit',sans-serif; font-size:1.3rem;
  font-weight:700; letter-spacing:-.02em;
  color:white; text-decoration:none;
}
.nav-logo .dot { color:var(--cyan); }
.nav-links { gap:32px; list-style:none; }
.nav-links a {
  font-size:.82rem; font-weight:500;
  color:rgba(255,255,255,.5); text-decoration:none; transition:color .2s;
}
.nav-links a:hover { color:white; }
.nav-cta {
  padding:10px 24px; border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:white; font-size:.82rem; font-weight:500;
  text-decoration:none; transition:all .3s;
}
.nav-cta:hover {
  background:var(--purple); border-color:var(--purple);
  box-shadow:0 4px 20px rgba(123,47,255,.4);
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#hero {
  height:100vh; width:100%;
  position:relative; overflow:hidden;
}
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.15) 0%, transparent 25%,
    transparent 60%, rgba(0,0,0,.95) 100%);
  pointer-events:none; z-index:1;
}
.hero-content {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center; z-index:2;
  width:100%; padding:0 40px;
}
.h-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px; padding:8px 20px;
  font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:32px;
  opacity:0; animation:fadeUp .6s .6s forwards;
}
.pill-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.h1 {
  font-family:'Outfit',sans-serif;
  font-size:clamp(2.2rem,6vw,5.2rem);
  font-weight:700; line-height:1.08;
  letter-spacing:-.03em; color:white; margin-bottom:20px;
}
.h1 .line { display:block; overflow:hidden; }
.h1 .in { display:block; transform:translateY(110%); transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.h1 .in.show { transform:translateY(0); }
.h1 .gr {
  background:linear-gradient(135deg, var(--purple2), var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.h-sub {
  font-size:1.05rem; line-height:1.75;
  color:rgba(255,255,255,.5); max-width:520px;
  margin:0 auto 44px; font-weight:300;
  opacity:0; animation:fadeUp .7s 1.2s forwards;
}
.h-btns {
  display:flex; gap:14px; justify-content:center;
  opacity:0; animation:fadeUp .7s 1.5s forwards;
}
.btn-glow {
  padding:15px 36px; border-radius:100px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:white; font-size:.92rem; font-weight:600;
  text-decoration:none;
  box-shadow:0 4px 40px rgba(123,47,255,.5);
  transition:all .35s; position:relative; overflow:hidden;
}
.btn-glow:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 8px 56px rgba(123,47,255,.65); }
.btn-glass {
  padding:15px 32px; border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:white; font-size:.92rem; font-weight:500;
  text-decoration:none; transition:all .3s;
}
.btn-glass:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); }
.scroll-cue {
  position:absolute; bottom:40px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:.64rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.25);
  z-index:2; opacity:0; animation:fadeUpCenter .6s 2.2s forwards;
}
@keyframes fadeUpCenter { from{opacity:0;transform:translateX(-50%) translateY(18px);} to{opacity:1;transform:translateX(-50%);} }
.sc-icon {
  width:28px; height:28px; border:1px solid rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;} }

/* ═══════════════════════════════════════
   MARQUEE
═══════════════════════════════════════ */
.mq-strip {
  padding:18px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden; background:rgba(255,255,255,.02);
}
.mq-inner { display:flex; width:max-content; animation:mscroll 32s linear infinite; }
.mq-item {
  display:flex; align-items:center; gap:24px; padding:0 24px;
  font-size:.68rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(255,255,255,.2); white-space:nowrap;
}
.mq-sep { width:4px; height:4px; border-radius:50%; background:var(--purple2); }
@keyframes mscroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ═══════════════════════════════════════
   INTRO SECTION
═══════════════════════════════════════ */
#intro {
  background:linear-gradient(180deg,#000 0%,#08031A 60%,#000 100%);
  overflow:hidden;
}
.intro-grid {
  display:grid; align-items:center; max-width:1200px; margin:0 auto;
}
.kicker {
  font-size:.67rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.kicker::before { content:''; width:22px; height:1px; background:var(--cyan); }
.s-h {
  font-family:'Outfit',sans-serif;
  font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:700; letter-spacing:-.02em; line-height:1.1;
  color:white; margin-bottom:18px;
}
.s-h .gr { background:linear-gradient(135deg,var(--purple2),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-p { font-size:.98rem; line-height:1.8; color:var(--muted); margin-bottom:36px; font-weight:300; }
.stats-row { display:flex; gap:36px; }
.stat-i .sn {
  font-family:'Outfit',sans-serif;
  font-size:2rem; font-weight:700; letter-spacing:-.02em; color:white; line-height:1;
}
.stat-i .sn .unit { font-size:1.4rem; color:var(--cyan); }
.stat-i .sl { font-size:.72rem; color:var(--muted); margin-top:4px; font-weight:400; }

/* Intro visual */
.intro-vis {
  position:relative; height:480px; border-radius:28px; overflow:hidden;
  border:1px solid var(--border);
}
#intro-canvas { position:absolute; inset:0; width:100%; height:100%; }
.intro-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(123,47,255,.18), transparent 70%);
  pointer-events:none;
}
/* Floating glass cards */
.fcard {
  position:absolute; z-index:3;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:16px 20px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.fc1 { top:20px; right:20px; animation:fl 6s ease-in-out infinite; }
.fc2 { bottom:20px; left:20px; animation:fl 7.5s ease-in-out infinite .7s; }
@keyframes fl { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.fc-lbl { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:5px; }
.fc-val { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:700; color:white; line-height:1; }
.fc-tag { font-size:.7rem; font-weight:600; color:var(--cyan); margin-top:4px; }
.fc-row { display:flex; align-items:center; gap:10px; }
.fc-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; background:rgba(123,47,255,.2); }
.fc-txt h4 { font-size:.82rem; font-weight:600; color:white; }
.fc-txt p { font-size:.66rem; color:var(--muted); margin-top:1px; }

/* ═══════════════════════════════════════
   SERVICE PANELS
═══════════════════════════════════════ */
.srv {
  display:flex; align-items:center;
  position:relative; overflow:hidden;
}
.srv.s1 { background:linear-gradient(135deg,#000 60%,#0D0520 100%); }
.srv.s2 { background:linear-gradient(135deg,#000 60%,#001810 100%); }
.srv.s3 { background:linear-gradient(135deg,#000 60%,#0D0020 100%); }
.srv.s4 { background:linear-gradient(135deg,#000 60%,#180600 100%); }

.sg {
  position:absolute; border-radius:50%;
  filter:blur(60px); pointer-events:none;
}
.sg1 { width:600px; height:600px; background:rgba(123,47,255,.1); right:-150px; top:50%; transform:translateY(-50%); }
.sg2 { width:500px; height:500px; background:rgba(0,212,170,.08); left:-100px; top:50%; transform:translateY(-50%); }
.sg3 { width:550px; height:550px; background:rgba(168,85,247,.1); right:-100px; top:50%; transform:translateY(-50%); }
.sg4 { width:500px; height:500px; background:rgba(234,88,12,.08); left:-100px; top:50%; transform:translateY(-50%); }

.srv-g {
  display:grid; align-items:center;
  width:100%; max-width:1200px; margin:0 auto;
  position:relative; z-index:1;
}

/* Per-service accent colors */
.t1 { color:var(--purple2); } .t1::before { background:var(--purple2); }
.t2 { color:var(--cyan); } .t2::before { background:var(--cyan); }
.t3 { color:#C084FC; } .t3::before { background:#C084FC; }
.t4 { color:#FB923C; } .t4::before { background:#FB923C; }

.srv-num {
  font-size:.66rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.srv-num::before { content:''; width:18px; height:2px; border-radius:2px; }

.srv-h {
  font-family:'Outfit',sans-serif;
  font-size:clamp(1.6rem,3vw,2.6rem);
  font-weight:700; letter-spacing:-.02em;
  line-height:1.12; color:white; margin-bottom:16px;
}
.g1 { background:linear-gradient(135deg,var(--purple2),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.g2 { background:linear-gradient(135deg,var(--cyan),#34D399); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.g3 { background:linear-gradient(135deg,#C084FC,var(--purple2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.g4 { background:linear-gradient(135deg,#FB923C,#FBBF24); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.srv-p { font-size:.97rem; line-height:1.8; color:var(--muted); margin-bottom:28px; max-width:440px; font-weight:300; }
.srv-list { display:flex; flex-direction:column; gap:10px; margin-bottom:36px; list-style:none; padding:0; }
.srv-li { display:flex; align-items:center; gap:12px; font-size:.87rem; color:rgba(255,255,255,.65); }
.li-dot {
  width:20px; height:20px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:700; color:white;
}
.ld1{background:linear-gradient(135deg,var(--purple),var(--purple2));}
.ld2{background:linear-gradient(135deg,var(--cyan),#34D399);}
.ld3{background:linear-gradient(135deg,#7C3AED,#C084FC);}
.ld4{background:linear-gradient(135deg,#EA580C,#FB923C);}

.srv-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:100px;
  font-size:.85rem; font-weight:600;
  text-decoration:none; transition:all .3s; width:fit-content;
}
.sb1{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.25);color:var(--purple2);}
.sb1:hover{background:rgba(168,85,247,.25);}
.sb2{background:rgba(0,245,204,.1);border:1px solid rgba(0,245,204,.2);color:var(--cyan);}
.sb2:hover{background:rgba(0,245,204,.2);}
.sb3{background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.2);color:#C084FC;}
.sb3:hover{background:rgba(192,132,252,.2);}
.sb4{background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.2);color:#FB923C;}
.sb4:hover{background:rgba(251,146,60,.2);}
.btn-arr { transition:transform .2s; }
.srv-btn:hover .btn-arr { transform:translateX(5px); }

/* ── SERVICE VISUALS */
.svis {
  border-radius:24px; overflow:hidden; height:460px;
  border:1px solid var(--border); position:relative;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.svis:hover { transform:perspective(1200px) rotateY(-4deg) rotateX(2deg) scale(1.01); }

/* AI visual */
.v-ai {
  background:linear-gradient(135deg,#0A0514,#100820);
  height:100%; position:relative; overflow:hidden;
}
#cv-ai { position:absolute; inset:0; width:100%; height:100%; }
.v-ai-info {
  position:absolute; bottom:0; left:0; right:0; padding:24px; z-index:2;
  background:linear-gradient(to top,rgba(10,5,20,1) 0%,rgba(10,5,20,.7) 60%,transparent 100%);
}
.ai-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(168,85,247,.15); border:1px solid rgba(168,85,247,.25);
  border-radius:100px; padding:6px 14px;
  font-size:.7rem; font-weight:600; color:var(--purple2); margin-bottom:10px;
}
.ai-dot { width:6px; height:6px; border-radius:50%; background:var(--lime); animation:blink 2s infinite; }
.tasks { display:flex; flex-direction:column; gap:6px; list-style:none; padding:0; margin:0; }
.task {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:9px 12px; font-size:.73rem; color:rgba(255,255,255,.55);
}
.t-bar { flex:1; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.t-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--purple),var(--cyan)); }

/* SaaS visual */
.v-saas {
  background:linear-gradient(135deg,#030D14,#051018);
  height:100%; padding:24px; display:flex; flex-direction:column; gap:12px;
}
.dash-win {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; overflow:hidden; flex:1;
}
.dash-top {
  padding:14px 18px; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:space-between;
}
.dt-t { font-size:.8rem; font-weight:600; color:white; }
.dt-l {
  background:rgba(0,245,204,.1); border:1px solid rgba(0,245,204,.2);
  border-radius:100px; padding:3px 10px; font-size:.62rem; font-weight:700; color:var(--cyan);
}
.dash-body { padding:18px; }
.met-g { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.met-b {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:12px;
}
.mn { font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:700; color:white; line-height:1; }
.ml { font-size:.58rem; color:var(--muted); margin-top:2px; }
.mu { font-size:.65rem; font-weight:600; color:var(--cyan); margin-top:4px; }
.d-chart { height:64px; display:flex; align-items:flex-end; gap:4px; padding:4px 0; }
.dc { flex:1; border-radius:3px 3px 0 0; }
.dc.on { background:linear-gradient(to top,var(--purple),var(--purple2)); }
.dc.off { background:rgba(255,255,255,.07); }

/* Web visual */
.v-web {
  background:linear-gradient(135deg,#060414,#08051A);
  height:100%; display:flex; align-items:center; justify-content:center;
  padding:28px; position:relative;
}
.brow {
  width:100%; max-width:320px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  transform:perspective(800px) rotateX(3deg); transition:transform .5s;
}
.v-web:hover .brow { transform:perspective(800px) rotateX(0); }
.brow-bar {
  padding:10px 14px; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:6px;
}
.bd { width:8px; height:8px; border-radius:50%; }
.b-url {
  flex:1; background:rgba(255,255,255,.06); border-radius:6px;
  padding:4px 10px; font-size:.58rem; color:var(--muted);
}
.brow-body { padding:14px; }
.b-hero {
  height:80px; border-radius:10px; margin-bottom:10px;
  background:linear-gradient(135deg,rgba(123,47,255,.3),rgba(168,85,247,.15));
  display:flex; align-items:center; justify-content:center;
}
.b-l { height:5px; border-radius:3px; background:rgba(255,255,255,.07); margin-bottom:6px; }
.b-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.b-c { height:48px; background:rgba(255,255,255,.03); border-radius:8px; border:1px solid rgba(255,255,255,.06); }
.w-score {
  position:absolute; top:20px; right:20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:12px 16px; text-align:center;
  backdrop-filter:blur(10px); animation:fl 5s ease-in-out infinite;
}
.ws-n { font-family:'Outfit',sans-serif; font-size:1.8rem; font-weight:700; color:var(--cyan); line-height:1; }
.ws-l { font-size:.58rem; color:var(--muted); font-weight:600; margin-top:2px; }
.w-spd {
  position:absolute; bottom:20px; left:20px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:10px 14px; font-size:.72rem; font-weight:600; color:white;
  display:flex; align-items:center; gap:6px; backdrop-filter:blur(8px);
  animation:fl 6.5s ease-in-out infinite .5s;
}

/* SEO visual */
.v-seo {
  background:linear-gradient(135deg,#100500,#0C0300);
  height:100%; padding:22px; display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.seo-r {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:14px 16px; transition:all .25s;
}
.seo-r:hover { background:rgba(255,255,255,.07); transform:translateX(6px); }
.sr-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:7px; }
.sr-pos {
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.p1{background:linear-gradient(135deg,#FB923C,#FBBF24);color:#0C0300;}
.p2{background:rgba(255,255,255,.08);color:var(--muted);}
.p3{background:rgba(255,255,255,.04);color:rgba(255,255,255,.2);}
.sr-url { font-size:.68rem; font-weight:600; color:var(--cyan); margin-bottom:2px; }
.sr-ai-badge {
  display:inline-block;
  background:rgba(168,85,247,.15); border:1px solid rgba(168,85,247,.25);
  border-radius:5px; padding:2px 7px; font-size:.57rem; font-weight:700;
  color:var(--purple2); letter-spacing:.05em; text-transform:uppercase;
}
.sr-snip { font-size:.72rem; color:var(--muted); line-height:1.5; }
.seo-ai-box {
  background:linear-gradient(135deg,rgba(123,47,255,.08),rgba(0,245,204,.05));
  border:1px solid rgba(123,47,255,.15); border-radius:14px; padding:14px; margin-top:4px;
}
.sab-h {
  font-size:.6rem; font-weight:700; color:var(--purple2);
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:7px; display:flex; align-items:center; gap:6px;
}
.sab-t { font-size:.73rem; color:rgba(255,255,255,.5); line-height:1.6; }
.sab-t strong { color:white; font-weight:600; font-style:normal; }

/* ═══════════════════════════════════════
   SERVICES SHOWCASE
═══════════════════════════════════════ */
#srv-showcase {
  background:linear-gradient(180deg,#000 0%,#08031A 50%,#000 100%);
  position:relative;
  overflow:hidden;
}
.ssc-inner {
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.ssc-hdr {
  text-align:center;
  margin-bottom:64px;
}
.ssc-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.ssc-card {
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:36px;
  transition:all .5s cubic-bezier(.22,.61,.36,1);
}
.ssc-card:hover {
  transform:translateY(-8px);
  background:rgba(255,255,255,.07);
}
/* Gradient top-border on hover */
.ssc-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.ssc-card:hover::before { transform:scaleX(1); }
.ssc-1::before { background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent); }
.ssc-2::before { background:linear-gradient(90deg,transparent,var(--cyan),#34D399,transparent); }
.ssc-3::before { background:linear-gradient(90deg,transparent,#C084FC,var(--purple2),transparent); }
.ssc-4::before { background:linear-gradient(90deg,transparent,#FB923C,#FBBF24,transparent); }
/* Hover box-shadow per card */
.ssc-1:hover { box-shadow:0 0 0 1px rgba(123,47,255,.4), 0 24px 64px rgba(123,47,255,.15); }
.ssc-2:hover { box-shadow:0 0 0 1px rgba(0,245,204,.3), 0 24px 64px rgba(0,245,204,.12); }
.ssc-3:hover { box-shadow:0 0 0 1px rgba(192,132,252,.3), 0 24px 64px rgba(192,132,252,.12); }
.ssc-4:hover { box-shadow:0 0 0 1px rgba(251,146,60,.3), 0 24px 64px rgba(251,146,60,.12); }
/* Inner glow blob */
.ssc-glow {
  position:absolute;
  top:-40%;
  right:-20%;
  width:300px;
  height:300px;
  border-radius:50%;
  filter:blur(40px);
  pointer-events:none;
  opacity:0;
  transition:opacity .5s;
}
.ssc-card:hover .ssc-glow { opacity:1; }
.ssc-1 .ssc-glow { background:rgba(123,47,255,.1); }
.ssc-2 .ssc-glow { background:rgba(0,245,204,.08); }
.ssc-3 .ssc-glow { background:rgba(192,132,252,.09); }
.ssc-4 .ssc-glow { background:rgba(251,146,60,.08); }

.ssc-num {
  font-family:'Outfit',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.15em;
  color:rgba(255,255,255,.18);
  margin-bottom:16px;
}
.ssc-icon {
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.ssc-card:hover .ssc-icon { transform:scale(1.1) rotate(-5deg); }
.ssc-title {
  font-family:'Outfit',sans-serif;
  font-size:clamp(1.3rem,2.5vw,1.6rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:white;
  margin-bottom:16px;
  line-height:1.2;
}
.ssc-p {
  font-size:.88rem;
  line-height:1.8;
  color:var(--muted);
  font-weight:300;
  margin-bottom:14px;
}
.ssc-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  border-radius:100px;
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  transition:all .3s;
  margin-top:10px;
}
.ssc-arr { transition:transform .2s; }
.ssc-link:hover .ssc-arr { transform:translateX(5px); }
.sl-1 { background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.25); color:var(--purple2); }
.sl-1:hover { background:rgba(168,85,247,.25); }
.sl-2 { background:rgba(0,245,204,.1); border:1px solid rgba(0,245,204,.22); color:var(--cyan); }
.sl-2:hover { background:rgba(0,245,204,.22); }
.sl-3 { background:rgba(192,132,252,.12); border:1px solid rgba(192,132,252,.25); color:#C084FC; }
.sl-3:hover { background:rgba(192,132,252,.25); }
.sl-4 { background:rgba(251,146,60,.12); border:1px solid rgba(251,146,60,.25); color:#FB923C; }
.sl-4:hover { background:rgba(251,146,60,.25); }

/* ═══════════════════════════════════════
   ECOSYSTEM
═══════════════════════════════════════ */
#eco {
  background:linear-gradient(180deg,#000 0%,#07030F 50%,#000 100%);
  position:relative; overflow:hidden;
}
.eco-blob {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:500px; height:500px; border-radius:50%;
  background:rgba(123,47,255,.07); filter:blur(60px); pointer-events:none;
}
.eco-hdr { text-align:center; margin-bottom:64px; position:relative; z-index:1; }
.eco-hdr .kicker { justify-content:center; color:var(--purple2); }
.eco-hdr .kicker::before { background:var(--purple2); }
.eco-grid { display:grid; position:relative; z-index:1; }
.eco-c {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:36px; position:relative; overflow:hidden;
  transition:all .4s cubic-bezier(.22,.61,.36,1); cursor:pointer;
}
.eco-c:hover { transform:translateY(-12px); background:rgba(255,255,255,.05); }
.eco-c::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  transform:scaleX(0); transform-origin:center; transition:transform .4s;
}
.ec1::after { background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent); }
.ec2::after { background:linear-gradient(90deg,transparent,var(--cyan),#34D399,transparent); }
.ec3::after { background:linear-gradient(90deg,transparent,#7C3AED,#C084FC,transparent); }
.eco-c:hover::after { transform:scaleX(1); }
.ec1:hover { box-shadow:0 0 0 1px rgba(123,47,255,.4), 0 24px 64px rgba(123,47,255,.15); }
.ec2:hover { box-shadow:0 0 0 1px rgba(0,245,204,.3), 0 24px 64px rgba(0,245,204,.1); }
.ec3:hover { box-shadow:0 0 0 1px rgba(192,132,252,.3), 0 24px 64px rgba(192,132,252,.1); }
.eco-st {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border-radius:100px; padding:4px 12px; margin-bottom:26px;
}
.st-live { background:rgba(0,245,204,.1); border:1px solid rgba(0,245,204,.2); color:var(--cyan); }
.st-dev { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--muted); }
.eco-ic {
  width:56px; height:56px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  margin-bottom:20px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  transition:transform .3s;
}
.eco-c:hover .eco-ic { transform:scale(1.12) rotate(-5deg); }
.eco-name { font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:-.01em; color:white; margin-bottom:12px; }
.eco-desc { font-size:.85rem; color:var(--muted); line-height:1.7; margin-bottom:26px; font-weight:300; }
.eco-lnk { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; text-decoration:none; transition:gap .2s; }
.eco-c:hover .eco-lnk { gap:14px; }
.el1{color:var(--purple2);} .el2{color:var(--cyan);} .el3{color:#C084FC;}

/* ═══════════════════════════════════════
   STATS
═══════════════════════════════════════ */
#stats-s {
  background:linear-gradient(135deg,#0A0414,#04010E);
  position:relative; overflow:hidden;
}
#stats-s::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(168,85,247,.12) 1px, transparent 1px);
  background-size:36px 36px;
}
.stats-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:350px; pointer-events:none;
  background:radial-gradient(ellipse, rgba(123,47,255,.1), transparent 70%);
}
.stats-inner { position:relative; z-index:1; }
.stats-hdr { text-align:center; margin-bottom:60px; }
.stats-hdr .kicker { justify-content:center; color:var(--purple2); }
.stats-hdr .kicker::before { background:var(--purple2); }
.stats-grid {
  display:grid; gap:1px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07); border-radius:20px; overflow:hidden;
}
.stat-b {
  background:rgba(10,4,20,.95); padding:48px 32px;
  text-align:center; transition:background .3s;
}
.stat-b:hover { background:rgba(123,47,255,.1); }
.sn {
  font-family:'Outfit',sans-serif; font-size:clamp(2.4rem,5vw,3.2rem); font-weight:700;
  line-height:1; color:white; margin-bottom:10px; display:block; letter-spacing:-.02em;
}
.ss { font-size:1.6rem; color:var(--cyan); }
.sl { font-size:.76rem; color:var(--muted); font-weight:500; }

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
#faq {
  background:linear-gradient(180deg,#000 0%,#07030F 50%,#000 100%);
  position:relative; overflow:hidden;
}
.faq-inner { max-width:800px; margin:0 auto; position:relative; z-index:1; }
.faq-hdr { text-align:center; margin-bottom:56px; }
.faq-list { display:flex; flex-direction:column; gap:2px; }
.faq-item {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px; overflow:hidden;
  transition:background .3s;
}
.faq-item:hover { background:rgba(255,255,255,.05); }
.faq-q {
  width:100%; padding:22px 28px;
  background:none; border:none; color:white;
  font-family:'Inter',sans-serif; font-size:.95rem; font-weight:500;
  text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q::after {
  content:'+'; font-size:1.3rem; color:var(--purple2);
  transition:transform .3s; flex-shrink:0;
}
.faq-item[open] .faq-q::after { content:'−'; }
.faq-a {
  padding:0 28px 22px;
  font-size:.88rem; line-height:1.8; color:var(--muted); font-weight:300;
}

/* ═══════════════════════════════════════
   CTA
═══════════════════════════════════════ */
#cta-s {
  text-align:center;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#000 0%,#0A0514 50%,#000 100%);
}
.cta-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(123,47,255,.1);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:ringExpand 5s ease-out infinite;
}
@keyframes ringExpand { 0%{transform:translate(-50%,-50%) scale(0.1);opacity:.6;} 100%{transform:translate(-50%,-50%) scale(1);opacity:0;} }
.cta-ring { width:800px;height:800px; }
.cta-ring:nth-child(2){animation-delay:1.7s;}
.cta-ring:nth-child(3){animation-delay:3.4s;}
.cta-inner { position:relative; z-index:1; }
.cta-kicker { justify-content:center; color:var(--cyan); }
.cta-kicker::before { background:var(--cyan); }
.cta-h {
  font-family:'Outfit',sans-serif;
  font-size:clamp(2rem,5.5vw,4.2rem);
  font-weight:700; letter-spacing:-.02em; line-height:1.08;
  color:white; margin-bottom:20px;
}
.cta-h span {
  background:linear-gradient(135deg,var(--purple2),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.cta-p { font-size:1rem; color:var(--muted); max-width:440px; margin:0 auto 48px; line-height:1.8; font-weight:300; }
.cta-btns { display:flex; gap:14px; justify-content:center; margin-bottom:28px; }
.cta-note { font-size:.74rem; color:rgba(255,255,255,.3); }
.cta-note em { color:rgba(255,255,255,.55); font-style:normal; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
header { display:contents; }
address { font-style:normal; }
footer {
  border-top:1px solid var(--border);
  background:var(--black);
}
.f-grid { display:grid; margin-bottom:48px; }
.f-logo { font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:700; color:white; text-decoration:none; letter-spacing:-.02em; display:block; margin-bottom:14px; }
.f-logo .dot { color:var(--cyan); }
.f-desc { font-size:.83rem; color:var(--muted); line-height:1.7; max-width:230px; font-weight:300; }
.f-col h5 { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.25); margin-bottom:16px; }
.f-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.f-col a, .f-col .h-lnk { font-size:.82rem; color:var(--muted); text-decoration:none; transition:color .2s; font-weight:300; }
.f-col a:hover { color:white; }
.h-lnk { cursor:pointer; }
.h-lnk:hover { color:white; }
.f-logo.h-lnk { text-decoration:none; }
.f-si.h-lnk { text-decoration:none; }
.f-btm { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--border); }
.f-copy { font-size:.72rem; color:rgba(255,255,255,.2); }
.f-socs { display:flex; gap:8px; }
.f-si {
  width:34px; height:34px; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; color:var(--muted); text-decoration:none; transition:all .2s;
}
.f-si:hover { background:var(--purple); border-color:var(--purple); color:white; }

/* FLOAT NAV */
#fnav {
  position:fixed; bottom:26px; left:50%; top:auto; transform:translateX(-50%);
  background:rgba(0,0,0,.92); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1); border-radius:100px;
  padding:10px 22px; display:flex; gap:4px; z-index:400;
  opacity:0; transition:opacity .4s;
  box-shadow:0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(123,47,255,.15);
}
#fnav.show { opacity:1; }
.fn-a {
  padding:6px 14px; border-radius:100px; font-size:.74rem;
  font-weight:500; color:rgba(255,255,255,.4); text-decoration:none; transition:all .2s;
}
.fn-a.on, .fn-a:hover { color:white; background:rgba(255,255,255,.08); }

/* REVEAL */
.rv  { opacity:0; transform:translateY(32px); transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); }
.rl  { opacity:0; transform:translateX(-32px); transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); }
.rr  { opacity:0; transform:translateX(32px);  transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); }
.rv.on, .rl.on, .rr.on { opacity:1; transform:none; }
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;}

/* ═══════════════════════════════════════
   MOBILE-FIRST RESPONSIVE
═══════════════════════════════════════ */

/* Hide custom cursor on touch devices */
@media(hover:none),(pointer:coarse){
  body { cursor:auto; }
  #cur, #cur2 { display:none !important; }
}

/* ── Base mobile (< 480px) */
#nav { padding:14px 20px; }
.nav-links, .nav-cta { display:none; }
.hero-content { padding:0 20px; }
.h-sub { font-size:.92rem; margin-bottom:32px; }
.h-btns { flex-direction:column; align-items:center; gap:10px; }
.btn-glow, .btn-glass { width:100%; max-width:280px; text-align:center; padding:14px 28px; font-size:.85rem; }
.scroll-cue { bottom:24px; }

#intro { padding:60px 20px; }
.intro-grid { grid-template-columns:1fr; gap:40px; }
.intro-vis { height:280px; }
.stats-row { gap:20px; }
.stat-i .sn { font-size:1.6rem; }

.srv { min-height:auto; padding:60px 20px; }
.srv-g { grid-template-columns:1fr; gap:36px; }
.srv-g.rev { direction:ltr; }
.srv-g.rev > * { direction:ltr; }
.svis { height:300px; }
.srv-p { max-width:100%; }

#srv-showcase { padding:60px 20px; }
.ssc-card { padding:28px; }

#eco { padding:60px 20px; }
.eco-grid { grid-template-columns:1fr; gap:14px; }
.eco-c { padding:28px; }

#stats-s { padding:60px 20px; }
.stats-grid { grid-template-columns:1fr 1fr; }
.stat-b { padding:28px 16px; }

#cta-s { padding:80px 20px; }
.cta-btns { flex-direction:column; align-items:center; gap:10px; }
.cta-btns .btn-glow, .cta-btns .btn-glass { width:100%; max-width:300px; text-align:center; }

footer { padding:40px 20px; }
.f-grid { grid-template-columns:1fr; gap:32px; }
.f-desc { max-width:100%; }
.f-btm { flex-direction:column; gap:16px; text-align:center; }

#fnav { padding:8px 14px; gap:2px; bottom:16px; }
.fn-a { padding:5px 10px; font-size:.68rem; }

/* Floating cards mobile */
.fcard { padding:12px 14px; }
.fc-val { font-size:1.2rem; }

/* Service visuals adjustments */
.met-g { grid-template-columns:1fr 1fr 1fr; gap:6px; }
.mn { font-size:1rem; }
.brow { max-width:260px; }

/* Mobile FAQ */
@media(max-width:479px){
  #faq { padding:60px 20px; }
  .faq-q { padding:18px 20px; font-size:.88rem; }
  .faq-a { padding:0 20px 18px; font-size:.82rem; }
}

/* ── Small tablets (>= 480px) */
@media(min-width:480px){
  #nav { padding:16px 28px; }
  .hero-content { padding:0 28px; }
  .h-btns { flex-direction:row; }
  .btn-glow, .btn-glass { width:auto; max-width:none; }
  #intro, .srv, #eco, #stats-s, #srv-showcase { padding:80px 28px; }
  #cta-s { padding:100px 28px; }
  #faq { padding:80px 28px; }
  .cta-btns { flex-direction:row; }
  .cta-btns .btn-glow, .cta-btns .btn-glass { width:auto; max-width:none; }
  footer { padding:48px 28px; }
  .svis { height:340px; }
  .intro-vis { height:320px; }
  .eco-c { padding:32px; }
}

/* ── Tablets (>= 768px) */
@media(min-width:768px){
  #nav { padding:20px 40px; }
  .hero-content { padding:0 40px; }
  #intro, #eco, #stats-s, #srv-showcase { padding:100px 40px; }
  .ssc-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .ssc-card { padding:36px; }
  .srv { padding:80px 40px; }
  #cta-s { padding:120px 40px; }
  #faq { padding:100px 40px; }
  footer { padding:52px 40px; }
  .eco-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .stats-grid { grid-template-columns:repeat(4,1fr); }
  .stat-b { padding:36px 20px; }
  .f-grid { grid-template-columns:2fr 1fr 1fr; gap:40px; }
  .f-btm { flex-direction:row; }
  .intro-vis { height:380px; }
  .svis { height:400px; }
}

/* ── Desktop (>= 1024px) */
@media(min-width:1024px){
  #nav { padding:24px 60px; }
  .nav-links, .nav-cta { display:flex; }
  .hero-content { padding:0 40px; }
  #intro { padding:140px 60px; }
  .intro-grid { grid-template-columns:1fr 1fr; gap:80px; }
  .intro-vis { height:480px; }
  .srv { min-height:100vh; padding:100px 60px; }
  .srv-g { grid-template-columns:1fr 1fr; gap:80px; }
  .srv-g.rev { direction:rtl; }
  .srv-g.rev > * { direction:ltr; }
  .svis { height:460px; }
  #srv-showcase { padding:130px 60px; }
  .ssc-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .ssc-card { padding:40px; }
  #eco { padding:130px 60px; }
  .eco-grid { grid-template-columns:repeat(3,1fr); gap:18px; }
  #stats-s { padding:110px 60px; }
  .stat-b { padding:48px 32px; }
  #cta-s { padding:160px 60px; }
  #faq { padding:130px 60px; }
  footer { padding:60px; }
  .f-grid { grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; }
  #fnav { padding:10px 22px; gap:4px; bottom:26px; }
  .fn-a { padding:6px 14px; font-size:.74rem; }
}

/* ═══════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  html { scroll-behavior:auto; }
  .mq-inner { animation:none !important; }
  .cta-ring { animation:none !important; display:none; }
  #hero-canvas { display:none; }
}