/* ─── BASE ─────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Space Grotesk',sans-serif;background:#06060b;color:#e2e8f0;overflow-x:hidden}

/* ─── NOISE OVERLAY ────────────────────────────────── */
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px}

/* ─── SCROLLBAR ────────────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#06060b}
::-webkit-scrollbar-thumb{background:#00e5a0;border-radius:3px}

/* ─── FONTS ────────────────────────────────────────── */
.font-mono{font-family:'JetBrains Mono',monospace}

/* ─── DOT GRID ─────────────────────────────────────── */
.dot-grid{background-image:radial-gradient(rgba(0,229,160,.1) 1px,transparent 1px);background-size:30px 30px}

/* ─── GRADIENT MESH ────────────────────────────────── */
.gradient-mesh{background:radial-gradient(circle at 50% 50%,rgba(0,230,164,.15) 0%,rgba(6,6,11,1) 70%)}
.grid-overlay{background:linear-gradient(rgba(0,230,164,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,164,.05) 1px,transparent 1px);background-size:50px 50px}

/* ─── GLOW EFFECTS ─────────────────────────────────── */
.text-glow{text-shadow:0 0 20px rgba(0,230,164,.5)}
.text-glow-subtle{text-shadow:0 0 10px rgba(0,230,164,.3)}
.box-glow{box-shadow:0 0 30px 5px rgba(0,229,160,.15)}
.box-glow-strong{box-shadow:0 0 50px 20px rgba(0,229,160,.3)}

/* ─── GLASSMORPHISM ────────────────────────────────── */
.glass{background:rgba(15,35,29,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,230,161,.2)}
.glass-dark{background:rgba(10,10,16,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.05)}

/* ─── NAV ──────────────────────────────────────────── */
.nav-blur{background:rgba(6,6,11,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,229,160,.08);padding-top:env(safe-area-inset-top,0px)}
.nav-link{position:relative;color:#94a3b8;transition:color .3s}
.nav-link:hover,.nav-link.active{color:#00e5a0}
.nav-link::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#00e5a0;transition:width .3s}
.nav-link:hover::after,.nav-link.active::after{width:100%}

/* ─── EDITORIAL STYLES ────────────────────────────── */
.text-outline{-webkit-text-stroke:2px white;color:transparent}
.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(30vh,60vh,80vh);font-weight:700;color:rgba(255,255,255,.02);z-index:0;pointer-events:none;line-height:1;font-family:'Space Grotesk',sans-serif;letter-spacing:-.05em;user-select:none}
.blinking-dot{animation:dotBlink 2s ease-in-out infinite}
@keyframes dotBlink{0%,100%{opacity:.4}50%{opacity:1}}

/* ─── SCREENSHOT BLUR ─────────────────────────────── */
.screenshot-sensitive{position:relative}
.screenshot-sensitive::before{content:'CLICK TO VIEW';position:absolute;inset:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1;transition:opacity .4s;pointer-events:none;display:grid;place-items:center;color:rgba(148,163,184,.5);font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em}
.screenshot-sensitive:hover::before{opacity:0}

/* ─── PULSE DOT ────────────────────────────────────── */
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#00e5a0;animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,229,160,.6)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(0,229,160,0)}}

/* ─── MARQUEE ──────────────────────────────────────── */
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── STAT CARDS ───────────────────────────────────── */
.stat-card{background:rgba(10,10,16,.7);border:1px solid rgba(0,229,160,.15);backdrop-filter:blur(10px);border-radius:12px;padding:12px 18px;position:absolute}

/* ─── 3D BROWSER ───────────────────────────────────── */
.browser-3d{transform:perspective(1200px) rotateX(20deg) rotateY(-25deg) rotateZ(5deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.browser-3d:hover{transform:perspective(1200px) rotateX(15deg) rotateY(-20deg) rotateZ(3deg)}
.ghost-layer{position:absolute;inset:0;border-radius:12px;overflow:hidden}
.ghost-layer-1{transform:translateZ(-30px) scale(.95);opacity:.6;filter:blur(2px)}
.ghost-layer-2{transform:translateZ(-60px) scale(.9);opacity:.3;filter:blur(4px)}
.browser-glow{position:relative}
.browser-glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(45deg,rgba(0,230,161,.5),transparent,rgba(0,230,161,.2));z-index:-1;filter:blur(4px)}

/* ─── CLIENT 3D MOCKUPS ────────────────────────────── */
.mockup-center{transform:perspective(1000px) rotateY(-5deg) rotateX(5deg) scale(1);transition:transform .5s}
.mockup-center:hover{transform:perspective(1000px) rotateY(-2deg) rotateX(2deg) scale(1.03)}
.mockup-left{transform:perspective(1000px) rotateY(15deg) rotateX(5deg) scale(.85);transition:transform .5s}
.mockup-left:hover{transform:perspective(1000px) rotateY(10deg) rotateX(3deg) scale(.9)}
.mockup-right{transform:perspective(1000px) rotateY(-20deg) rotateX(5deg) scale(.8);transition:transform .5s}
.mockup-right:hover{transform:perspective(1000px) rotateY(-15deg) rotateX(3deg) scale(.85)}
.mockup-far-left{transform:perspective(1000px) rotateY(25deg) rotateX(5deg) scale(.72);transition:transform .5s;opacity:.85}
.mockup-far-left:hover{transform:perspective(1000px) rotateY(20deg) rotateX(3deg) scale(.77);opacity:1}
.mockup-far-right{transform:perspective(1000px) rotateY(-28deg) rotateX(5deg) scale(.68);transition:transform .5s;opacity:.85}
.mockup-far-right:hover{transform:perspective(1000px) rotateY(-22deg) rotateX(3deg) scale(.73);opacity:1}
.floor-reflection{position:relative}
.floor-reflection::after{content:'';position:absolute;bottom:-50px;left:5%;width:90%;height:40px;background:radial-gradient(ellipse at center,rgba(0,229,160,.15) 0%,transparent 70%);filter:blur(10px);pointer-events:none}

/* ─── HEXAGON ──────────────────────────────────────── */
.hex{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:transform .3s,box-shadow .3s}
.hex:hover{transform:scale(1.1)}

/* ─── TERMINAL ─────────────────────────────────────── */
.terminal-dot{width:12px;height:12px;border-radius:50%}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor-blink{animation:blink 1s step-end infinite}

/* ─── SCROLL REVEAL ────────────────────────────────── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}

/* ─── LIGHTBOX ─────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lightbox.active{display:flex;opacity:1}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 0 60px rgba(0,229,160,.2)}
.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lightbox-nav:hover{background:rgba(0,229,160,.2);border-color:rgba(0,229,160,.4)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#94a3b8;font-family:'JetBrains Mono',monospace;font-size:.8rem}

/* ─── AUTOMATION CARD ──────────────────────────────── */
.auto-card{background:rgba(10,10,16,.5);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:2rem 1.5rem;text-align:center;transition:border-color .3s,transform .3s,box-shadow .3s}
.auto-card:hover{border-color:rgba(0,229,160,.3);transform:translateY(-4px);box-shadow:0 0 30px rgba(0,229,160,.1)}
.auto-card .material-symbols-outlined{font-size:48px;color:#00e5a0}

/* ─── CTA BUTTON ───────────────────────────────────── */
.cta-btn{position:relative;overflow:hidden;border:2px solid #00e5a0;color:#00e5a0;transition:color .3s}
.cta-btn::before{content:"";position:absolute;inset:0;background:#00e5a0;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.cta-btn:hover{color:#06060b}
.cta-btn:hover::before{transform:scaleX(1)}
.cta-btn span{position:relative;z-index:1}

/* ─── NETWORK TOPOLOGY ────────────────────────────── */
.net-line{stroke-dasharray:8 6;animation:dash-flow 3s linear infinite}
@keyframes dash-flow{to{stroke-dashoffset:-28}}
.pipeline-line{stroke-dasharray:6 4;animation:pipe-flow 2s linear infinite}
@keyframes pipe-flow{to{stroke-dashoffset:-20}}
.pipeline-glass{background:rgba(10,10,16,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05)}
.src-node{border-left:2px solid #fbbf24;background:rgba(251,191,36,.04)}
.proc-node{border-top:2px solid #22d3ee;background:rgba(34,211,238,.04)}
.proc-node-ai{border-top:2px solid #818cf8;background:rgba(129,140,248,.04)}
.out-node{border-right:2px solid #00e5a0;background:rgba(0,229,160,.04)}

/* ─── REDUCED MOTION ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .marquee-track{animation:none}
  .net-line,.pipeline-line{animation:none}
  .reveal{opacity:1;transform:none}
}

/* ─── MOBILE NAV ───────────────────────────────────── */
.mobile-menu{transform:translateX(100%);transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
.mobile-menu.open{transform:translateX(0)}

/* ─── EXPAND CARDS ────────────────────────────────── */
.expand-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.25,.46,.45,.94)}
.expand-wrap.expanded{grid-template-rows:1fr}
.expand-wrap>div{overflow:hidden}

/* ─── PROJECT EFFECTS ─────────────────────────────── */
.scan-line{position:relative;overflow:hidden}
.scan-line::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(129,140,248,.5),transparent);animation:scanAnim 4s ease-in-out infinite}
@keyframes scanAnim{0%{top:-10%}100%{top:110%}}
.glow-pulse-cyan{animation:glowCyan 3s ease-in-out infinite}
@keyframes glowCyan{0%,100%{box-shadow:0 0 20px rgba(34,211,238,.08),0 0 60px rgba(34,211,238,.04)}50%{box-shadow:0 0 30px rgba(34,211,238,.15),0 0 80px rgba(34,211,238,.08)}}
.shimmer-border{position:relative;z-index:0}
.shimmer-border::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(90deg,transparent 0%,rgba(251,191,36,.3) 50%,transparent 100%);background-size:200% 100%;animation:shimmerMove 3s ease-in-out infinite;pointer-events:none;z-index:-1;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes shimmerMove{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── DATA PLATFORM HOLOGRAM ─────────────────────── */
@property --dp-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.holo-float{transform-style:preserve-3d;animation:holoFloat 6s ease-in-out infinite}
@keyframes holoFloat{0%,100%{transform:rotateX(2deg) rotateY(-10deg) translateY(0)}50%{transform:rotateX(-1deg) rotateY(-14deg) translateY(-10px)}}
.holo-float:hover{animation-play-state:paused;transform:rotateX(0deg) rotateY(-4deg) translateY(-6px)}
.dp-ghost{position:absolute;inset:0;pointer-events:none}
.dp-ghost-1{transform:translateZ(-30px) scale(.97);opacity:.5;filter:blur(2px)}
.dp-ghost-2{transform:translateZ(-60px) scale(.94);opacity:.2;filter:blur(4px)}
.holo-glow{position:relative}
.holo-glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,rgba(129,140,248,.5),transparent 40%,transparent 60%,rgba(129,140,248,.3));z-index:-1;filter:blur(4px)}
.holo-base{position:absolute;bottom:-35px;left:5%;width:90%;height:50px;background:radial-gradient(ellipse,rgba(129,140,248,.25) 0%,transparent 70%);filter:blur(15px);pointer-events:none}
.orbit-border{position:relative}
.orbit-border::after{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--dp-angle),transparent 30%,rgba(129,140,248,.6) 50%,transparent 70%);animation:dpOrbit 4s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@keyframes dpOrbit{to{--dp-angle:360deg}}

/* ─── CRM 3D BROWSER STACK ───────────────────────── */
.browser-3d-cyan{transform:perspective(1200px) rotateX(18deg) rotateY(22deg) rotateZ(-4deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.browser-3d-cyan:hover{transform:perspective(1200px) rotateX(12deg) rotateY(16deg) rotateZ(-2deg)}
.crm-ghost{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:12px}
.crm-ghost-1{transform:translateZ(-30px) scale(.95);opacity:.6;filter:blur(2px)}
.crm-ghost-2{transform:translateZ(-60px) scale(.9);opacity:.3;filter:blur(4px)}
.browser-glow-cyan{position:relative}
.browser-glow-cyan::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(45deg,rgba(34,211,238,.5),transparent,rgba(34,211,238,.2));z-index:-1;filter:blur(4px)}
.crm-base{position:absolute;bottom:-35px;left:5%;width:90%;height:50px;background:radial-gradient(ellipse,rgba(34,211,238,.2) 0%,transparent 70%);filter:blur(15px);pointer-events:none}

/* ─── ML NEURAL PIPELINE ─────────────────────────── */
.neural-lift{transform:perspective(1400px) rotateX(4deg);transform-style:preserve-3d;transition:transform .5s}
.neural-lift:hover{transform:perspective(1400px) rotateX(1deg)}
.neural-glow{position:relative}
.neural-glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,rgba(251,191,36,.35),transparent 30%,transparent 70%,rgba(251,191,36,.25));z-index:-1;filter:blur(5px)}
.neural-grid{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.neural-grid::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(251,191,36,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(251,191,36,.02) 1px,transparent 1px);background-size:24px 24px}
.neural-grid::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(251,191,36,.06),transparent 50%),radial-gradient(ellipse at 70% 50%,rgba(251,191,36,.04),transparent 50%)}
.node-pulse{animation:nodePulse 3s ease-in-out infinite}
.node-d2{animation-delay:.6s}.node-d3{animation-delay:1.2s}.node-d4{animation-delay:1.8s}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 rgba(251,191,36,0);border-color:rgba(251,191,36,.3)}40%,60%{box-shadow:0 0 20px rgba(251,191,36,.35),0 0 50px rgba(251,191,36,.1);border-color:rgba(251,191,36,.7)}}
.arrow-flow{animation:arrowFlow 3s ease-in-out infinite}
.arrow-d2{animation-delay:.6s}.arrow-d3{animation-delay:1.2s}
@keyframes arrowFlow{0%,100%{color:rgba(71,85,105,1);text-shadow:none}40%,60%{color:rgba(251,191,36,.7);text-shadow:0 0 8px rgba(251,191,36,.3)}}
.neural-base{position:absolute;bottom:-25px;left:10%;width:80%;height:40px;background:radial-gradient(ellipse,rgba(251,191,36,.15) 0%,transparent 70%);filter:blur(12px);pointer-events:none}

/* ─── TECH GRID ───────────────────────────────────── */
.tech-chip{display:inline-flex;align-items:center;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid;border-radius:6px;transition:all .25s;cursor:default}
.tech-chip:hover{transform:translateY(-2px);filter:brightness(1.2)}