/* ===== DIGITAL ORBIT AI — SHARED STYLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#06060e;--bg-2:#0c0c18;--bg-card:#0f0f1e;--bg-card-hover:#151530;
  --border:rgba(255,255,255,0.06);--border-hover:rgba(139,92,246,0.3);
  --purple:#8b5cf6;--purple-light:#a78bfa;--purple-glow:rgba(139,92,246,0.15);
  --teal:#06d6a0;--teal-glow:rgba(6,214,160,0.12);
  --blue:#3b82f6;--pink:#ec4899;--orange:#f59e0b;
  --text:#d4d4e8;--text-dim:#6b6b8d;--text-bright:#f0f0ff;--white:#ffffff;
  --gradient:linear-gradient(135deg,#8b5cf6,#06d6a0);
  --gradient-2:linear-gradient(135deg,#ec4899,#8b5cf6);
  --gradient-3:linear-gradient(135deg,#3b82f6,#8b5cf6);
  --radius:16px;--radius-lg:24px;--radius-xl:32px;
  --max-w:1200px;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== SITE INTRO OVERLAY ===== */
.site-intro{position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease}
.site-intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-logo{display:flex;align-items:center;gap:.8rem;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:2rem;color:var(--white);opacity:0;transform:scale(0.6);animation:introIn .8s cubic-bezier(.16,1,.3,1) .1s forwards}
.intro-logo .logo-icon{width:56px;height:56px;border-radius:16px;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--bg);animation:introSpin .8s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes introIn{to{opacity:1;transform:scale(1)}}
@keyframes introSpin{from{transform:rotate(-180deg) scale(0.5)}to{transform:rotate(0) scale(1)}}

/* ===== ANIMATED BG (enhanced) ===== */
.page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.page-bg .glow{position:absolute;border-radius:50%;filter:blur(120px);animation:driftGlow 20s ease-in-out infinite}
.glow-1{width:700px;height:700px;background:rgba(139,92,246,0.09);top:-200px;left:-100px}
.glow-2{width:600px;height:600px;background:rgba(6,214,160,0.06);bottom:-100px;right:-100px;animation-delay:-8s;animation-duration:18s}
.glow-3{width:500px;height:500px;background:rgba(236,72,153,0.05);top:40%;left:50%;animation-delay:-14s;animation-duration:22s}
@keyframes driftGlow{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(60px,-80px) scale(1.15)}
  50%{transform:translate(-40px,60px) scale(0.85)}
  75%{transform:translate(30px,30px) scale(1.1)}
}
.grid-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(139,92,246,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,0.025) 1px,transparent 1px);
  background-size:80px 80px;animation:gridPulse 8s ease-in-out infinite}
@keyframes gridPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:1rem 2rem;
  background:rgba(6,6,14,0.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);transition:all .4s cubic-bezier(.16,1,.3,1)}
nav.scrolled{background:rgba(6,6,14,0.92);padding:.7rem 2rem}
nav.nav-hidden{transform:translateY(-100%)}
.nav-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.nav-logo{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.3rem;display:flex;align-items:center;gap:.5rem}
.nav-logo .logo-icon{width:32px;height:32px;border-radius:10px;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:var(--bg);transition:transform .3s;animation:logoPulse 3s ease-in-out infinite}
.nav-logo:hover .logo-icon{transform:rotate(10deg) scale(1.1)}
@keyframes logoPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0.3)}50%{box-shadow:0 0 0 6px rgba(139,92,246,0)}}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-size:.88rem;font-weight:500;color:var(--text-dim);transition:color .3s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:not(.btn-nav)::after{content:'';position:absolute;bottom:-4px;left:50%;width:0;height:2px;background:var(--gradient);border-radius:2px;transition:all .3s cubic-bezier(.16,1,.3,1);transform:translateX(-50%)}
.nav-links a:not(.btn-nav):hover::after,.nav-links a.active::after{width:100%}
.btn-nav{padding:.55rem 1.4rem!important;border-radius:50px!important;background:var(--purple)!important;color:var(--white)!important;font-weight:600!important;font-size:.85rem!important;transition:all .3s!important;border:none;animation:btnNavGlow 3s ease-in-out infinite}
.btn-nav:hover{background:#7c3aed!important;box-shadow:0 8px 32px var(--purple-glow)!important;transform:translateY(-2px) scale(1.03)}
.btn-nav::after{display:none!important}
@keyframes btnNavGlow{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0.2)}50%{box-shadow:0 0 20px 2px rgba(139,92,246,0.15)}}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.mobile-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}

/* ===== BUTTONS ===== */
.btn-primary{padding:.85rem 2rem;border-radius:50px;background:var(--gradient);color:var(--white);font-weight:600;font-size:.95rem;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s;position:relative;overflow:hidden;background-size:200% 200%;animation:btnGradientFlow 3s ease infinite}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 48px rgba(139,92,246,0.25),0 0 0 1px rgba(139,92,246,0.2)}
.btn-primary::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.15);transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}
.btn-primary:hover::before{width:300px;height:300px}
.btn-primary::after{content:'';position:absolute;inset:-3px;border-radius:inherit;background:var(--gradient);z-index:-1;opacity:0;filter:blur(18px);transition:opacity .4s;animation:btnPulse 2.5s ease-in-out infinite}
.btn-primary:hover::after{opacity:.6}
@keyframes btnGradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes btnPulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.4;transform:scale(1.08)}}
.btn-ghost{padding:.85rem 2rem;border-radius:50px;background:transparent;color:var(--text);font-weight:600;font-size:.95rem;border:1px solid var(--border);cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.btn-ghost:hover{border-color:var(--purple);background:rgba(139,92,246,0.05);transform:translateY(-2px);color:var(--white)}
.btn-ghost::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(139,92,246,0.08),transparent);transition:left .5s}
.btn-ghost:hover::before{left:100%}

/* ===== SECTION COMMON ===== */
section{position:relative;z-index:1;padding:6rem 2rem}
.section-header{text-align:center;max-width:620px;margin:0 auto 3.5rem}
.section-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--purple-light);margin-bottom:.8rem;animation:labelGlow 3s ease-in-out infinite}
@keyframes labelGlow{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 12px rgba(167,139,250,0.3)}}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--white);margin-bottom:.8rem;line-height:1.15}
.section-desc{color:var(--text-dim);font-size:1rem}

/* ===== PAGE HERO (shared for inner pages) ===== */
.page-hero{position:relative;z-index:1;padding:10rem 2rem 4rem;text-align:center;overflow:hidden}
.page-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;color:var(--white);margin-bottom:1rem;line-height:1.1}
.page-hero p{font-size:1.1rem;color:var(--text-dim);max-width:560px;margin:0 auto}

/* ===== CARDS ===== */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;transition:all .4s;position:relative;overflow:hidden}
.card:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateY(-6px)}
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient);transform:scaleX(0);transition:transform .4s cubic-bezier(.16,1,.3,1);transform-origin:left}
.card:hover::after{transform:scaleX(1)}
.card-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.2rem;transition:transform .3s}
.card:hover .card-icon{transform:scale(1.15) rotate(5deg)}
.card-icon.purple{background:var(--purple-glow)}.card-icon.teal{background:var(--teal-glow)}.card-icon.blue{background:rgba(59,130,246,.12)}.card-icon.pink{background:rgba(236,72,153,.1)}.card-icon.orange{background:rgba(245,158,11,.1)}
.card h3{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.card>p{font-size:.88rem;color:var(--text-dim);line-height:1.6}

/* Tags */
.tag-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.tag{padding:.2rem .6rem;border-radius:50px;font-size:.65rem;font-weight:500;background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.12);color:var(--purple-light);transition:all .3s}
.tag:hover{background:rgba(139,92,246,.12);transform:translateY(-2px)}

/* ===== ANIMATED GRADIENT BORDER ===== */
.glow-border{position:relative}
.glow-border::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--border-angle,0deg),transparent 40%,var(--purple) 50%,var(--teal) 55%,transparent 60%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rotateBorder 4s linear infinite;pointer-events:none}
@keyframes rotateBorder{to{--border-angle:360deg}}
/* Fallback for browsers without @property */
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ===== FOOTER ===== */
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:4rem 2rem 2rem}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:3rem;margin-bottom:2.5rem}
.footer-brand .nav-logo{margin-bottom:.8rem}
.footer-brand>p{font-size:.82rem;color:var(--text-dim);max-width:240px;line-height:1.6}
.footer-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:1rem;font-weight:600}
.footer-col a{display:block;font-size:.85rem;color:var(--text-dim);padding:.3rem 0;transition:all .3s}
.footer-col a:hover{color:var(--purple-light);transform:translateX(4px)}

.footer-bottom{max-width:var(--max-w);margin:0 auto;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.75rem;color:var(--text-dim)}

/* ===== CTA BANNER ===== */
.cta-banner{position:relative;z-index:1;padding:5rem 2rem;text-align:center;overflow:hidden}
.cta-banner::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(139,92,246,.08),transparent 70%);pointer-events:none;animation:ctaPulse 4s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
.cta-banner h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800;color:var(--white);margin-bottom:.8rem}
.cta-banner>p{color:var(--text-dim);max-width:480px;margin:0 auto 2rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--gradient);z-index:9999;width:0;pointer-events:none;box-shadow:0 0 10px rgba(139,92,246,0.5),0 0 30px rgba(139,92,246,0.2)}

/* ===== PAGE TRANSITIONS ===== */
body.page-enter{opacity:0;transform:translateY(12px)}
body.page-visible{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
body.page-exit{opacity:0;transform:translateY(-12px);transition:opacity .3s ease,transform .3s ease}

/* ===== CURSOR GLOW ===== */
.cursor-glow{position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,0.06),transparent 60%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);will-change:left,top;mix-blend-mode:screen}

/* ===== SCROLL REVEAL (multiple directions) ===== */
.reveal{opacity:0;transform:translateY(50px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-80px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal-left.vis{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(80px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal-right.vis{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.7);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal-scale.vis{opacity:1;transform:scale(1)}
.reveal-blur{opacity:0;filter:blur(16px);transform:translateY(30px);transition:all .9s cubic-bezier(.16,1,.3,1)}
.reveal-blur.vis{opacity:1;filter:blur(0);transform:translateY(0)}
.reveal-rotate{opacity:0;transform:perspective(800px) rotateY(15deg) translateX(40px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal-rotate.vis{opacity:1;transform:perspective(800px) rotateY(0) translateX(0)}

.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}
.reveal-d4{transition-delay:.4s}.reveal-d5{transition-delay:.5s}.reveal-d6{transition-delay:.6s}
.reveal-d7{transition-delay:.7s}.reveal-d8{transition-delay:.8s}

/* ===== GRADIENT TEXT SHIMMER ===== */
.grad{background:linear-gradient(135deg,#8b5cf6,#06d6a0,#3b82f6,#ec4899,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:300% 300%;animation:gradientShift 5s ease-in-out infinite}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===== 3D CARD TILT ===== */
.card-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .1s}
.card-tilt .card-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;transition:background .1s}

/* ===== TEXT SPLIT ANIMATION ===== */
.split-char{display:inline-block;opacity:0;transform:translateY(30px) rotate(5deg);animation:splitIn .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes splitIn{to{opacity:1;transform:translateY(0) rotate(0)}}

/* ===== FLOATING PARTICLES (enhanced) ===== */
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.particle{position:absolute;border-radius:50%;animation:particleFloat linear infinite}
.particle:nth-child(odd){background:var(--purple)}
.particle:nth-child(even){background:var(--teal)}
@keyframes particleFloat{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%{opacity:var(--p-opacity,0.3)}
  50%{transform:translateY(-60px) translateX(20px) scale(1.5)}
  90%{opacity:var(--p-opacity,0.3)}
  100%{transform:translateY(-120px) translateX(-10px) scale(0.5);opacity:0}
}

/* ===== FLOWING DATA DOTS (on workflow connectors) ===== */
.wf-connector{position:relative;overflow:visible}
.data-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--teal);top:50%;transform:translateY(-50%);animation:flowDot 1.5s ease-in-out infinite;box-shadow:0 0 8px rgba(6,214,160,0.6)}
.data-dot:nth-child(2){animation-delay:.5s;background:var(--purple);box-shadow:0 0 8px rgba(139,92,246,0.6)}
.data-dot:nth-child(3){animation-delay:1s;background:var(--blue);box-shadow:0 0 8px rgba(59,130,246,0.6)}
@keyframes flowDot{0%{left:-2px;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}

/* ===== EMOJI FLOAT ANIMATION ===== */
.float-emoji{animation:emojiFloat 3s ease-in-out infinite}
.float-emoji-d2{animation:emojiFloat 3s ease-in-out infinite;animation-delay:-.7s}
.float-emoji-d3{animation:emojiFloat 3s ease-in-out infinite;animation-delay:-1.4s}
@keyframes emojiFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(5deg)}}

/* ===== CARD HOVER GLOW ===== */
.card:hover,.bento-card:hover,.ind-card:hover,.step-card:hover,.value-card:hover,.stack-item:hover,.expect-card:hover,.price-card:hover,.contact-method:hover{
  box-shadow:0 12px 40px rgba(139,92,246,0.12),0 0 0 1px rgba(139,92,246,0.15)}

/* ===== TYPEWRITER CURSOR ===== */
.typewriter-cursor{display:inline-block;width:3px;height:1em;background:var(--purple);margin-left:2px;animation:cursorBlink .8s step-end infinite;vertical-align:text-bottom}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ===== SECTION DIVIDER LINE ===== */
.section-divider{width:60px;height:3px;background:var(--gradient);border-radius:3px;margin:0 auto 2rem;animation:dividerExpand .8s ease forwards}
@keyframes dividerExpand{from{width:0}to{width:60px}}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:100%;left:0;width:100%;background:rgba(6,6,14,.98);flex-direction:column;padding:1.5rem;gap:1rem;border-bottom:1px solid var(--border)}
  .nav-links.open{display:flex}
  .mobile-toggle{display:flex}
  .footer-inner{grid-template-columns:1fr}
  .cursor-glow{display:none}
  .site-intro{display:none}
}
@media(max-width:480px){
  section{padding:4rem 1rem}
  .page-hero{padding:8rem 1rem 3rem}
}