/* =========================================================
   LANDING PAGE — advanced visuals, 3D & motion effects
   Loaded in addition to style.css (does not override dashboard)
   ========================================================= */

body{overflow-x:hidden;position:relative;}

/* ---------- Floating gradient orbs (ambient background) ---------- */
.orb{
  position:fixed;border-radius:50%;filter:blur(60px);opacity:.35;
  z-index:0;pointer-events:none;animation:orbFloat 14s ease-in-out infinite;
}
.orb-1{width:420px;height:420px;top:-120px;left:-120px;background:radial-gradient(circle,var(--primary-light),transparent 70%);animation-delay:0s;}
.orb-2{width:360px;height:360px;top:30%;right:-140px;background:radial-gradient(circle,var(--accent),transparent 70%);animation-delay:-4s;}
.orb-3{width:300px;height:300px;bottom:-100px;left:20%;background:radial-gradient(circle,#a78bfa,transparent 70%);animation-delay:-8s;}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-40px) scale(1.08);}
  66%{transform:translate(-25px,25px) scale(.95);}
}
@media(max-width:700px){ .orb{opacity:.2;} }

/* ---------- Navbar extras ---------- */
.navbar{position:sticky;z-index:200;}
.navbar nav{display:flex;align-items:center;gap:8px;}
.navbar .nav-link{margin-left:0;padding:8px 14px;border-radius:8px;font-weight:500;color:var(--muted);transition:.2s;}
.navbar .nav-link:hover{color:var(--primary);background:rgba(79,70,229,.07);}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;border:none;background:none;cursor:pointer;z-index:210;}
.nav-toggle span{display:block;height:2.5px;width:100%;background:var(--primary-dark);border-radius:2px;transition:.3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;z-index:205;
  background:rgba(255,255,255,.98);backdrop-filter:blur(16px);
  box-shadow:-10px 0 40px rgba(30,41,59,.18);
  display:flex;flex-direction:column;gap:6px;padding:90px 26px 26px;
  transition:right .35s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open{right:0;}
.mobile-menu a{padding:14px 16px;border-radius:12px;font-weight:600;color:var(--text);}
.mobile-menu a:hover{background:rgba(79,70,229,.08);color:var(--primary);}
.mobile-menu a.btn{margin-top:10px;text-align:center;}

@media(max-width:780px){
  .navbar nav{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{position:relative;z-index:1;padding:100px 8vw 50px;}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:30px;
  background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(6,182,212,.12));
  color:var(--primary-dark);font-weight:600;font-size:.85rem;margin-bottom:22px;
  border:1px solid rgba(79,70,229,.18);
  animation:fadeInUp .6s ease both, badgePulse 3s ease-in-out infinite 1s;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.15);}50%{box-shadow:0 0 0 10px rgba(79,70,229,0);}}
.hero h1{font-size:3rem;letter-spacing:-.02em;}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}
.btn-lg{padding:15px 32px;font-size:1rem;border-radius:14px;}
.btn svg{transition:transform .25s ease;}
.btn-primary:hover svg{transform:translateX(4px);}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:820px;margin:0 auto;
}
.hero-stat{
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);
  border-radius:16px;padding:20px 10px;box-shadow:var(--shadow);transition:transform .3s ease;
}
.hero-stat:hover{transform:translateY(-5px) scale(1.03);}
.hero-stat .num{font-size:1.35rem;font-weight:800;background:linear-gradient(135deg,var(--primary-dark),var(--accent));-webkit-background-clip:text;color:transparent;}
.hero-stat .lbl{font-size:.78rem;color:var(--muted);margin-top:4px;font-weight:600;}
@media(max-width:640px){
  .hero h1{font-size:2rem;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Section headers ---------- */
.section-head{max-width:640px;margin:0 auto 46px;text-align:center;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.section-head.in-view{opacity:1;transform:translateY(0);}
.section-head .eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--primary);background:rgba(79,70,229,.08);padding:6px 14px;border-radius:20px;margin-bottom:14px;
}
.section-head h2{font-size:2rem;margin-bottom:12px;color:var(--text);letter-spacing:-.01em;}
.section-head p{color:var(--muted);font-size:1.02rem;}

/* ---------- Services (3D tilt cards) ---------- */
.services-section{position:relative;z-index:1;padding:70px 8vw;}
.tilt-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;
  perspective:1200px;
}
.tilt-card{
  opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;
  border-radius:20px;
}
.tilt-card.in-view{opacity:1;transform:translateY(0);}
.tilt-inner{
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;padding:30px 26px;height:100%;
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
  transform-style:preserve-3d;will-change:transform;
}
.tilt-card:hover .tilt-inner,
.tilt-card:active .tilt-inner{box-shadow:var(--shadow-lg);}
.tilt-icon{
  width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;margin-bottom:16px;box-shadow:0 10px 24px rgba(79,70,229,.25);
  transform:translateZ(30px);
}
.tilt-card h3{margin-bottom:8px;font-size:1.08rem;transform:translateZ(20px);}
.tilt-card p{color:var(--muted);font-size:.9rem;line-height:1.55;transform:translateZ(10px);}

/* ---------- Roles ---------- */
.roles-section{position:relative;z-index:1;padding:70px 8vw;}
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;}
.role-card{
  text-align:center;background:linear-gradient(160deg,#fff,#f8faff);
  border:1px solid #eef1fb;border-radius:20px;padding:32px 20px;
  opacity:0;transform:translateY(30px) scale(.96);transition:opacity .55s ease,transform .55s ease;
}
.role-card.in-view{opacity:1;transform:translateY(0) scale(1);}
.role-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:var(--shadow-lg);}
.role-icon{
  width:64px;height:64px;line-height:64px;margin:0 auto 16px;border-radius:50%;font-size:1.7rem;
  background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 12px 26px rgba(79,70,229,.25);
  animation:floatY 5s ease-in-out infinite;
}
.role-card h4{font-size:1.05rem;margin-bottom:8px;}
.role-card p{color:var(--muted);font-size:.87rem;line-height:1.5;}

/* ---------- Feature cards glass style ---------- */
.glass-card{
  background:rgba(255,255,255,.75);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);
  opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;
}
.glass-card.in-view{opacity:1;transform:translateY(0);}
.glass-card:hover{transform:translateY(-6px) rotateX(2deg);}

/* ---------- CTA ---------- */
.cta-section{padding:30px 8vw 90px;position:relative;z-index:1;}
.cta-box{
  max-width:760px;margin:0 auto;text-align:center;padding:56px 40px;border-radius:28px;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary) 55%,var(--accent));
  color:#fff;box-shadow:0 30px 60px rgba(55,48,163,.35);position:relative;overflow:hidden;
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s ease,transform .6s ease;
}
.cta-box.in-view{opacity:1;transform:translateY(0) scale(1);}
.cta-box::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 45%);
}
.cta-box h2{font-size:1.9rem;margin-bottom:10px;position:relative;}
.cta-box p{color:rgba(255,255,255,.88);margin-bottom:26px;position:relative;}
.cta-box .btn-primary{background:#fff;color:var(--primary-dark);position:relative;}
.cta-box .btn-primary:hover{background:#f4f6fb;}

/* ---------- Footer ---------- */
.site-footer{text-align:center;padding:34px 20px;color:var(--muted);font-size:.85rem;position:relative;z-index:1;}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion: reduce){
  .orb,.role-icon,.hero-badge{animation:none;}
  .tilt-inner{transition:none;}
}