@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito:wght@300;400;600;700&display=swap');

:root {
  --black:      #060608;
  --dark:       #0d0d12;
  --card:       #13131a;
  --border:     #1e1e2e;
  --mid:        #252535;
  --green:      #78b54e;
  --green2:     #9dd46e;
  --green-dim:  #4a7a2e;
  --purple:     #911be5;
  --purple2:    #ab1cff;
  --purple-dim: #5a0f8f;
  --purple-glow: rgba(145,27,229,0.15);
  --green-glow:  rgba(120,181,78,0.12);
  --white:      #f0f0f5;
  --muted:      #7a7a9a;
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Nunito', sans-serif;
  --radius:    6px;
  --radius-lg: 12px;
  --transition: 0.22s ease;
  --max:       1140px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--black);color:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* HEADER */
.header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,6,8,0.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{max-width:var(--max);margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo-img{height:52px;width:auto;object-fit:contain;border-radius:6px}
.nav{display:flex;align-items:center;gap:32px}
.nav-link{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);transition:color var(--transition)}
.nav-link:hover,.nav-link.active{color:var(--green)}
.nav-cta{background:var(--purple);color:#fff;font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:10px 22px;border-radius:var(--radius);border:1px solid var(--purple2);transition:background var(--transition),box-shadow var(--transition)}
.nav-cta:hover{background:var(--purple2);box-shadow:0 0 18px rgba(171,28,255,0.4)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 32px 80px}
.hero-bg{position:absolute;inset:0;background:url('images/hero-bg.jpg') center/cover no-repeat;filter:brightness(0.15) saturate(0.4)}
.hero-orb-green{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(120,181,78,0.12) 0%,transparent 70%);top:-100px;left:-100px;pointer-events:none}
.hero-orb-purple{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(145,27,229,0.15) 0%,transparent 70%);bottom:-80px;right:-80px;pointer-events:none}
.hero-line{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,transparent,var(--purple),var(--green),transparent)}
.hero-inner{max-width:var(--max);margin:0 auto;width:100%;position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--green);margin-bottom:24px}
.hero-eyebrow::before{content:'';display:block;width:32px;height:2px;background:linear-gradient(90deg,var(--purple),var(--green));border-radius:2px}
.hero h1{font-family:var(--font-display);font-size:clamp(48px,7vw,92px);font-weight:700;line-height:1.0;letter-spacing:-0.5px;color:var(--white);margin-bottom:28px;max-width:780px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--green),var(--purple2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:18px;color:var(--muted);max-width:520px;margin-bottom:48px;line-height:1.7}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn-primary{background:var(--purple);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:14px 32px;border-radius:var(--radius);border:1px solid var(--purple2);transition:background var(--transition),box-shadow var(--transition),transform var(--transition);display:inline-block;cursor:pointer}
.btn-primary:hover{background:var(--purple2);box-shadow:0 0 24px rgba(171,28,255,0.45);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--green-dim);color:var(--green);font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:14px 32px;border-radius:var(--radius);transition:border-color var(--transition),box-shadow var(--transition),color var(--transition);display:inline-block}
.btn-outline:hover{border-color:var(--green);color:var(--green2);box-shadow:0 0 16px var(--green-glow)}
.hero-badges{display:flex;gap:16px;margin-top:64px;align-items:center;flex-wrap:wrap}
.badge-wrap{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;display:flex;align-items:center;transition:border-color var(--transition)}
.badge-wrap:hover{border-color:var(--purple-dim)}
.badge-wrap img{height:44px;width:auto}

/* STATS */
.stats{background:var(--dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:64px 32px}
.stats-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:32px 40px;border-right:1px solid var(--border);text-align:center}
.stat:last-child{border-right:none}
.stat-number{font-family:var(--font-display);font-size:60px;font-weight:700;background:linear-gradient(135deg,var(--green),var(--purple2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px;letter-spacing:-1px}
.stat-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-family:var(--font-display)}

/* SECTION COMMONS */
.section{padding:100px 32px}
.section-inner{max-width:var(--max);margin:0 auto}
.section-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--purple2);margin-bottom:16px}
.section-label::before{content:'';width:20px;height:2px;background:linear-gradient(90deg,var(--purple),var(--green));border-radius:2px}
.section-title{font-family:var(--font-display);font-size:clamp(34px,4vw,54px);font-weight:700;letter-spacing:-0.5px;line-height:1.05;margin-bottom:20px;color:var(--white)}
.section-sub{font-size:17px;color:var(--muted);max-width:540px;line-height:1.7}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:64px}
.about-img-wrap{position:relative}
.about-img-wrap img{width:100%;height:420px;object-fit:cover;border-radius:var(--radius-lg);filter:brightness(0.8) saturate(0.6)}
.about-img-accent{position:absolute;bottom:-16px;right:-16px;width:120px;height:120px;border:2px solid var(--purple);border-radius:var(--radius-lg);pointer-events:none;box-shadow:0 0 20px var(--purple-glow)}
.about-content h2{margin-bottom:20px}
.about-content p{font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.about-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.tag{background:var(--card);border:1px solid var(--green-dim);color:var(--green);font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:100px}

/* WHY */
.why{background:var(--dark)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:64px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.why-card{padding:48px 36px;background:var(--card);border-right:1px solid var(--border);transition:background var(--transition)}
.why-card:last-child{border-right:none}
.why-card:hover{background:var(--mid)}
.why-icon{width:50px;height:50px;background:var(--purple-glow);border:1px solid rgba(145,27,229,0.25);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:24px;font-size:22px}
.why-card h3{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--white);margin-bottom:12px}
.why-card p{font-size:15px;color:var(--muted);line-height:1.7}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.service-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 32px;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--green));opacity:0;transition:opacity var(--transition)}
.service-card:hover{border-color:rgba(145,27,229,0.3);transform:translateY(-4px);box-shadow:0 8px 32px var(--purple-glow)}
.service-card:hover::before{opacity:1}
.service-num{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--purple2);margin-bottom:20px;opacity:0.7}
.service-card h3{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--white);margin-bottom:14px;line-height:1.2}
.service-card p{font-size:14px;color:var(--muted);line-height:1.75}
.service-list{list-style:none;margin-top:16px}
.service-list li{font-size:13px;color:var(--muted);padding:4px 0 4px 16px;position:relative}
.service-list li::before{content:'▸';position:absolute;left:0;color:var(--green);font-size:10px;top:5px}

/* PROMO */
.promo{background:linear-gradient(135deg,var(--purple-dim),#1a0a2e);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0 32px;position:relative;overflow:hidden}
.promo::before{content:'';position:absolute;right:-100px;top:-100px;width:400px;height:400px;background:radial-gradient(circle,var(--green-glow) 0%,transparent 70%);pointer-events:none}
.promo-inner{max-width:var(--max);margin:0 auto;padding:64px 0;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:1}
.promo-text h2{font-family:var(--font-display);font-size:clamp(28px,3.5vw,44px);font-weight:700;color:var(--white);letter-spacing:-0.5px;margin-bottom:8px}
.promo-text p{font-size:17px;color:rgba(240,240,245,0.6)}
.btn-dark{background:var(--green);color:var(--black);font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:16px 36px;border-radius:var(--radius);white-space:nowrap;display:inline-block;transition:background var(--transition),box-shadow var(--transition)}
.btn-dark:hover{background:var(--green2);box-shadow:0 0 20px var(--green-glow)}

/* CONTACT */
.contact{background:var(--dark)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:64px;align-items:start}
.contact-info p{font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:32px}
.contact-details{display:flex;flex-direction:column;gap:16px}
.contact-item{display:flex;gap:14px;align-items:flex-start}
.contact-icon{width:42px;height:42px;background:var(--purple-glow);border:1px solid rgba(145,27,229,0.2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.contact-item-text{font-size:14px;color:var(--muted);line-height:1.6}
.contact-item-text strong{display:block;color:var(--white);font-size:13px;margin-bottom:2px;font-family:var(--font-display);letter-spacing:0.5px}
.contact-form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.form-group input,.form-group textarea,.form-group select{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:14px;color:var(--white);font-family:var(--font-body);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-glow)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{cursor:pointer}
.form-group select option{background:var(--dark)}

/* FOOTER */
.footer{background:var(--dark);border-top:1px solid var(--border);padding:60px 32px 32px}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--border)}
.footer-brand img{height:52px;margin-bottom:16px;border-radius:6px}
.footer-brand p{font-size:14px;color:var(--muted);line-height:1.7;max-width:280px}
.footer-col-title{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:20px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:14px;color:var(--muted);transition:color var(--transition)}
.footer-links a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;gap:20px;flex-wrap:wrap}
.footer-bottom p{font-size:13px;color:var(--muted)}
.footer-bottom a{color:var(--purple2)}

/* PAGE HERO */
.page-hero{padding:140px 32px 80px;background:var(--dark);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;left:-100px;top:-100px;width:500px;height:500px;background:radial-gradient(circle,var(--purple-glow) 0%,transparent 65%);pointer-events:none}
.page-hero-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.page-hero h1{font-family:var(--font-display);font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-0.5px;color:var(--white);margin-bottom:16px}
.page-hero p{font-size:18px;color:var(--muted);max-width:560px}

/* ABOUT PAGE */
.goals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.goal-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 28px;transition:border-color var(--transition)}
.goal-card:hover{border-color:var(--green-dim)}
.goal-card h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--white);margin-bottom:12px}
.goal-card p{font-size:14px;color:var(--muted);line-height:1.7}

/* MOBILE */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:all 0.2s}
@media(max-width:900px){
  .nav{display:none}
  .nav-toggle{display:block}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:none;border-bottom:1px solid var(--border)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .why-grid{grid-template-columns:1fr}
  .why-card{border-right:none;border-bottom:1px solid var(--border)}
  .services-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .promo-inner{flex-direction:column;text-align:center}
  .footer-top{grid-template-columns:1fr 1fr}
  .goals-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* ── CLIENT SHOWCASE ───────────────────────────────────────────── */
.enterprise-logos {
  margin-top: 56px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ent-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 32px;
}
.ent-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.ent-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 32px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ent-item:hover {
  border-color: var(--purple-dim);
  box-shadow: 0 0 16px var(--purple-glow);
}
.ent-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  transition: color var(--transition);
}
.ent-item:hover .ent-name { color: var(--white); }

.clients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-bottom: 100px;
}
.client-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: block;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.client-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--green));
  opacity: 0;
  transition: opacity var(--transition);
}
.client-card:hover {
  border-color: rgba(145,27,229,0.35);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px var(--purple-glow);
}
.client-card:hover::before { opacity: 1; }
.client-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-glow);
  border: 1px solid var(--green-dim);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.client-icon {
  font-size: 36px;
  margin-bottom: 16px;
  display: block;
}
.client-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.2;
}
.client-url {
  font-size: 13px;
  color: var(--purple2);
  margin-bottom: 14px;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}
.client-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}
.client-link {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--green);
  text-transform: uppercase;
  transition: color var(--transition);
}
.client-card:hover .client-link { color: var(--green2); }

/* ── HEADER LOGO SIZE ──────────────────────────────────────────── */
.logo-img { height: 68px !important; }

@media(max-width:900px){
  .clients-grid { grid-template-columns: 1fr; }
  .ent-grid { gap: 8px; }
  .ent-item { padding: 10px 20px; }
}

/* ── CLIENT SECTION FIX ────────────────────────────────────────── */
.clients-section {
  background: var(--black);
  border-top: 1px solid var(--border);
}

/* ── APP CALLOUT ───────────────────────────────────────────────── */
.app-callout {
  background: linear-gradient(135deg, #0d0d12 60%, #1a0a2e);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 32px;
  position: relative;
  overflow: hidden;
}
.app-callout::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  background: radial-gradient(ellipse at right center, rgba(120,181,78,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.app-callout-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
.app-callout-text { flex: 1; }
.app-callout-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex-shrink: 0;
}
.app-badge {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-width: 110px;
}
.app-badge:hover {
  border-color: var(--green-dim);
  box-shadow: 0 0 16px var(--green-glow);
}
.app-badge-icon { display: block; font-size: 28px; margin-bottom: 8px; }
.app-badge-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
}

/* ── FEATURED SERVICE CARD ─────────────────────────────────────── */
.featured-service {
  border-color: rgba(120,181,78,0.2);
  position: relative;
}
.featured-service::after {
  content: 'FEATURED';
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--green);
  background: rgba(120,181,78,0.1);
  border: 1px solid var(--green-dim);
  padding: 3px 10px;
  border-radius: 100px;
}

@media(max-width:900px){
  .app-callout-inner { flex-direction: column; }
  .app-callout-badges { grid-template-columns: repeat(4,1fr); }
}

/* ── ABOUT PAGE TAGLINE & BADGES ───────────────────────────────── */
.about-tagline {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--green), var(--purple2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 16px 0 24px;
  line-height: 1.3;
}
.page-hero-body {
  font-size: 17px;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.8;
  margin-bottom: 40px;
}
.about-badges {
  margin-top: 8px;
}
.about-badges-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.about-badges-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.about-badge-link {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity var(--transition), transform var(--transition);
}
.about-badge-link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ── TEAM LOGO ─────────────────────────────────────────────────── */
.team-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 32px;
}
.team-logo {
  height: 180px;
  width: auto;
  object-fit: contain;
  border-radius: 12px;
  opacity: 0.92;
  filter: drop-shadow(0 4px 24px rgba(120,181,78,0.2));
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS — subtle, professional, classy
   ══════════════════════════════════════════════════════════════════ */

/* ── Page fade-in on load ───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(145,27,229,0); }
  50%       { box-shadow: 0 0 18px 4px rgba(145,27,229,0.18); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes borderGlow {
  0%, 100% { border-color: var(--border); }
  50%       { border-color: rgba(120,181,78,0.35); }
}

/* ── Hero entrance ─────────────────────────────────────────────── */
.hero-eyebrow  { animation: slideInLeft 0.7s ease both; animation-delay: 0.1s; }
.hero h1       { animation: fadeUp 0.8s ease both;      animation-delay: 0.25s; }
.hero-sub      { animation: fadeUp 0.8s ease both;      animation-delay: 0.4s; }
.hero-actions  { animation: fadeUp 0.8s ease both;      animation-delay: 0.55s; }
.hero-badges   { animation: fadeUp 0.7s ease both;      animation-delay: 0.7s; }

/* ── Page hero entrance ────────────────────────────────────────── */
.page-hero-inner { animation: fadeUp 0.7s ease both; animation-delay: 0.1s; }

/* ── Stat numbers count-feel pulse on load ─────────────────────── */
.stat { animation: fadeUp 0.6s ease both; }
.stat:nth-child(1) { animation-delay: 0.05s; }
.stat:nth-child(2) { animation-delay: 0.15s; }
.stat:nth-child(3) { animation-delay: 0.25s; }
.stat:nth-child(4) { animation-delay: 0.35s; }

/* ── Scroll-reveal via Intersection Observer (class toggled by JS) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grids */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.40s; }

/* ── Header logo subtle float ──────────────────────────────────── */
.logo-img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.logo-img:hover {
  transform: translateY(-2px) scale(1.03);
  opacity: 1;
}

/* ── Nav link underline slide ──────────────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--green);
  transition: width 0.28s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ── Button press feel ─────────────────────────────────────────── */
.btn-primary:active  { transform: translateY(1px) scale(0.98); }
.btn-outline:active  { transform: translateY(1px) scale(0.98); }
.btn-dark:active     { transform: translateY(1px) scale(0.98); }
.nav-cta:active      { transform: scale(0.97); }

/* ── Card hover lift (more refined) ───────────────────────────── */
.service-card {
  transition: border-color 0.25s ease, transform 0.3s cubic-bezier(.2,.8,.3,1), box-shadow 0.3s ease;
}
.why-card {
  transition: background 0.25s ease, transform 0.3s cubic-bezier(.2,.8,.3,1);
}
.why-card:hover { transform: translateY(-3px); }

.client-card {
  transition: border-color 0.25s ease, transform 0.35s cubic-bezier(.2,.8,.3,1), box-shadow 0.35s ease;
}

/* ── App badge float animation ─────────────────────────────────── */
.app-badge:nth-child(1) { animation: floatY 3.2s ease-in-out infinite; animation-delay: 0s;    }
.app-badge:nth-child(2) { animation: floatY 3.2s ease-in-out infinite; animation-delay: 0.4s;  }
.app-badge:nth-child(3) { animation: floatY 3.2s ease-in-out infinite; animation-delay: 0.8s;  }
.app-badge:nth-child(4) { animation: floatY 3.2s ease-in-out infinite; animation-delay: 1.2s;  }

/* ── Hero vertical accent line pulse ──────────────────────────── */
@keyframes linePulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
.hero-line { animation: linePulse 3s ease-in-out infinite; }

/* ── Section label shimmer on hover ───────────────────────────── */
.section-label { transition: letter-spacing 0.3s ease; cursor: default; }
.section-label:hover { letter-spacing: 3.5px; }

/* ── Badge links subtle pulse ──────────────────────────────────── */
.about-badge-link { animation: fadeIn 0.8s ease both; }
.about-badge-link:nth-child(1) { animation-delay: 0.2s; }
.about-badge-link:nth-child(2) { animation-delay: 0.4s; }

/* ── Respect prefers-reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   HERO TWO-COLUMN LAYOUT
   ══════════════════════════════════════════════════════════════════ */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}
.hero-left { display: flex; flex-direction: column; }

/* ── Right visual panel ────────────────────────────────────────── */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.3s;
}
.hero-visual {
  position: relative;
  width: 380px;
  height: 420px;
  flex-shrink: 0;
}

/* ── Main screen card ──────────────────────────────────────────── */
.hv-screen {
  position: absolute;
  top: 40px; left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(120,181,78,0.08);
  animation: floatY 5s ease-in-out infinite;
}
.hv-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.hv-bar::before, .hv-bar::after,
.hv-bar + .hv-lines::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
}
.hv-bar::before { background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,0.4); }
.hv-bar::after  { background: #febc2e; box-shadow: 0 0 6px rgba(254,188,46,0.3); margin-left: 0; }

/* Three dots via extra element */
.hv-screen::before {
  content: '';
  position: absolute;
  top: 20px; left: 20px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
.hv-lines { margin: 36px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.hv-line {
  height: 6px;
  border-radius: 100px;
  opacity: 0.5;
}
.hv-line.w80 { width: 80%; }
.hv-line.w70 { width: 70%; }
.hv-line.w65 { width: 65%; }
.hv-line.w55 { width: 55%; }
.hv-line.w40 { width: 40%; }
.hv-line.w30 { width: 30%; }
.hv-line.c-purple { background: var(--purple); }
.hv-line.c-green  { background: var(--green); }

.hv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.hv-card {
  background: var(--mid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.3s ease;
}
.hv-card:hover { border-color: var(--green-dim); }
.hv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hv-dot.g { background: var(--green); box-shadow: 0 0 6px var(--green); }
.hv-dot.p { background: var(--purple2); box-shadow: 0 0 6px var(--purple2); }
.hv-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ── Logo ring ─────────────────────────────────────────────────── */
.hv-logo-ring {
  position: absolute;
  bottom: 0; right: -20px;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px var(--purple-glow), 0 0 0 6px rgba(145,27,229,0.08);
  animation: pulseGlow 4s ease-in-out infinite;
  overflow: hidden;
}
.hv-logo {
  width: 90px; height: 90px;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Floating stat pills ───────────────────────────────────────── */
.hv-stat-pill {
  position: absolute;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: floatY 4s ease-in-out infinite;
}
.hv-stat-pill.top    { top: 0; right: 0; animation-delay: 0.5s; border-color: rgba(120,181,78,0.3); }
.hv-stat-pill.bottom { bottom: 28px; left: -24px; animation-delay: 1.2s; border-color: rgba(145,27,229,0.3); }
.hv-pill-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--green), var(--purple2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.hv-pill-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-right { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   TEAM ORBIT VISUAL
   ══════════════════════════════════════════════════════════════════ */

@keyframes orbitSpin1 { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes orbitSpin2 { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
@keyframes counterSpin { from { transform: rotate(0deg); }  to { transform: rotate(-360deg); } }
@keyframes counterSpin2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hubPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(145,27,229,0), 0 0 40px rgba(120,181,78,0.15); }
  50%      { box-shadow: 0 0 0 14px rgba(145,27,229,0.08), 0 0 60px rgba(120,181,78,0.25); }
}

.team-orbit-wrap {
  position: relative;
  width: 560px;
  height: 560px;
  margin: 48px auto 40px;
}

/* ── Center hub ────────────────────────────────────────────────── */
.orbit-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid rgba(145,27,229,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: hubPulse 3.5s ease-in-out infinite;
  overflow: hidden;
}
.orbit-logo {
  width: 110px; height: 110px;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Orbit rings ───────────────────────────────────────────────── */
.orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border-style: solid;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orbit-ring.r1 {
  width: 260px; height: 260px;
  border-width: 1px;
  border-color: rgba(120,181,78,0.2);
  animation: orbitSpin1 18s linear infinite;
  top: 50%; left: 50%;
  position: fixed;
}
.orbit-ring.r2 {
  width: 460px; height: 460px;
  border-width: 1px;
  border-color: rgba(145,27,229,0.15);
  animation: orbitSpin2 26s linear infinite;
  position: fixed;
  top: 50%; left: 50%;
}

/* Fix: rings relative to wrap not fixed */
.team-orbit-wrap .orbit-ring {
  position: absolute;
}

/* ── Orbit nodes (roles) ───────────────────────────────────────── */
/* Inner ring (r=130) — 6 nodes evenly spaced */
.orbit-node {
  position: absolute;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor: default;
  z-index: 5;
}
.orbit-node:hover {
  border-color: var(--green-dim);
  box-shadow: 0 0 20px var(--green-glow);
  transform: scale(1.12) !important;
}
.on-icon { font-size: 22px; line-height: 1; }
.on-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Inner orbit radius 130px from center (280-44=236 → left/top = 50% + r*cos/sin - 44px) */
/* Center of wrap = 280px, 280px. node center placed at 280 + r*cos - 44, 280 + r*sin - 44 */
/* r1 inner = 130px, 6 nodes at 0,60,120,180,240,300 deg */
.orbit-node.n1 { top: calc(280px - 130px - 44px); left: calc(280px + 0px   - 44px); animation: floatY 3.5s ease-in-out infinite; animation-delay: 0s; }
.orbit-node.n2 { top: calc(280px - 65px  - 44px); left: calc(280px + 113px - 44px); animation: floatY 3.5s ease-in-out infinite; animation-delay: 0.4s; }
.orbit-node.n3 { top: calc(280px + 65px  - 44px); left: calc(280px + 113px - 44px); animation: floatY 3.5s ease-in-out infinite; animation-delay: 0.8s; }
.orbit-node.n4 { top: calc(280px + 130px - 44px); left: calc(280px + 0px   - 44px); animation: floatY 3.5s ease-in-out infinite; animation-delay: 1.2s; }
.orbit-node.n5 { top: calc(280px + 65px  - 44px); left: calc(280px - 113px - 44px); animation: floatY 3.5s ease-in-out infinite; animation-delay: 1.6s; }
.orbit-node.n6 { top: calc(280px - 65px  - 44px); left: calc(280px - 113px - 44px); animation: floatY 3.5s ease-in-out infinite; animation-delay: 2.0s; }

/* ── Floating stat pills ───────────────────────────────────────── */
.orbit-pill {
  position: absolute;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 8;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.orbit-pill:hover {
  border-color: var(--purple-dim);
  box-shadow: 0 0 20px var(--purple-glow);
}
.op-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--green), var(--purple2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.op-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
}

/* Pill positions — corners of the wrap */
.orbit-pill.p1 { top: 18px;  left: 18px;  border-color: rgba(120,181,78,0.3);  animation: floatY 4s ease-in-out infinite; animation-delay: 0s; }
.orbit-pill.p2 { top: 18px;  right: 18px; border-color: rgba(145,27,229,0.3); animation: floatY 4s ease-in-out infinite; animation-delay: 0.6s; }
.orbit-pill.p3 { bottom: 18px; left: 18px;  border-color: rgba(120,181,78,0.3);  animation: floatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.orbit-pill.p4 { bottom: 18px; right: 18px; border-color: rgba(145,27,229,0.3); animation: floatY 4s ease-in-out infinite; animation-delay: 1.8s; }

/* Connector lines from hub to nodes — SVG overlay */
.team-orbit-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(145,27,229,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .team-orbit-wrap {
    width: 320px;
    height: 320px;
  }
  .orbit-hub { width: 80px; height: 80px; }
  .orbit-logo { width: 68px; height: 68px; }
  .orbit-ring.r1 { width: 150px; height: 150px; }
  .orbit-ring.r2 { width: 270px; height: 270px; }
  .orbit-node { width: 54px; height: 54px; }
  .on-icon { font-size: 16px; }
  .on-label { font-size: 8px; }
  .orbit-node.n1 { top: calc(160px - 75px  - 27px); left: calc(160px + 0px   - 27px); }
  .orbit-node.n2 { top: calc(160px - 38px  - 27px); left: calc(160px + 65px  - 27px); }
  .orbit-node.n3 { top: calc(160px + 38px  - 27px); left: calc(160px + 65px  - 27px); }
  .orbit-node.n4 { top: calc(160px + 75px  - 27px); left: calc(160px + 0px   - 27px); }
  .orbit-node.n5 { top: calc(160px + 38px  - 27px); left: calc(160px - 65px  - 27px); }
  .orbit-node.n6 { top: calc(160px - 38px  - 27px); left: calc(160px - 65px  - 27px); }
  .orbit-pill { padding: 6px 12px; }
  .op-num { font-size: 16px; }
  .op-label { font-size: 8px; }
  .orbit-pill.p1 { top: 8px; left: 8px; }
  .orbit-pill.p2 { top: 8px; right: 8px; }
  .orbit-pill.p3 { bottom: 8px; left: 8px; }
  .orbit-pill.p4 { bottom: 8px; right: 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   WELCOME SECTION — LIVE ACTIVITY VISUAL
   ══════════════════════════════════════════════════════════════════ */

@keyframes feedSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dotBlink {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(120,181,78,0); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 5px rgba(120,181,78,0.15); }
}
@keyframes barGrow {
  from { width: 0; }
}
@keyframes tickIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Outer wrap — matches about-img-wrap size ──────────────────── */
.welcome-visual {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Live feed card ────────────────────────────────────────────── */
.wv-feed-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.2s;
}
.wv-feed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--dark);
}
.wv-feed-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: dotBlink 2s ease-in-out infinite;
  flex-shrink: 0;
}
.wv-feed-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
  flex: 1;
}
.wv-feed-time {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.wv-feed-list { padding: 8px 0; }
.wv-feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.2s ease;
}
.wv-feed-item:last-child { border-bottom: none; }
.wv-feed-item:hover { background: var(--mid); }

/* Staggered entrance for feed items */
.wv-feed-item:nth-child(1) { animation: feedSlideIn 0.5s ease both; animation-delay: 0.4s; }
.wv-feed-item:nth-child(2) { animation: feedSlideIn 0.5s ease both; animation-delay: 0.6s; }
.wv-feed-item:nth-child(3) { animation: feedSlideIn 0.5s ease both; animation-delay: 0.8s; }
.wv-feed-item:nth-child(4) { animation: feedSlideIn 0.5s ease both; animation-delay: 1.0s; }
.wv-feed-item:nth-child(5) { animation: feedSlideIn 0.5s ease both; animation-delay: 1.2s; }

.wv-fi-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wv-fi-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wv-fi-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.2px;
}
.wv-fi-meta {
  font-size: 11px;
  color: var(--muted);
}
.wv-fi-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  flex-shrink: 0;
}
.wv-fi-badge.done {
  background: rgba(120,181,78,0.12);
  color: var(--green);
  border: 1px solid var(--green-dim);
}
.wv-fi-badge.active {
  background: rgba(145,27,229,0.15);
  color: var(--purple2);
  border: 1px solid var(--purple-dim);
  animation: dotBlink 1.8s ease-in-out infinite;
}

/* ── Floating stat pills ───────────────────────────────────────── */
.wv-pill {
  position: absolute;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wv-pill:hover {
  border-color: var(--purple-dim);
  box-shadow: 0 0 24px var(--purple-glow);
}
.wv-pill-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--green), var(--purple2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.wv-pill-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
}
.wv-pill.p-tl {
  top: -16px; right: -16px;
  border-color: rgba(120,181,78,0.3);
  animation: floatY 3.8s ease-in-out infinite;
  animation-delay: 0s;
}
.wv-pill.p-br {
  bottom: 60px; left: -16px;
  border-color: rgba(145,27,229,0.3);
  animation: floatY 3.8s ease-in-out infinite;
  animation-delay: 1s;
}

/* ── Progress card ─────────────────────────────────────────────── */
.wv-progress-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.5s;
}
.wv-pc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.wv-pc-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.3px;
}
.wv-pc-count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.wv-bars { display: flex; flex-direction: column; gap: 12px; }
.wv-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wv-bar-label {
  font-size: 12px;
  color: var(--muted);
  width: 80px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
}
.wv-bar-track {
  flex: 1;
  height: 6px;
  background: var(--mid);
  border-radius: 100px;
  overflow: hidden;
}
.wv-bar-fill {
  height: 100%;
  border-radius: 100px;
  animation: barGrow 1.2s cubic-bezier(.2,.8,.3,1) both;
}
.wv-bar-row:nth-child(1) .wv-bar-fill { animation-delay: 0.7s; }
.wv-bar-row:nth-child(2) .wv-bar-fill { animation-delay: 0.9s; }
.wv-bar-row:nth-child(3) .wv-bar-fill { animation-delay: 1.1s; }
.wv-bar-pct {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAV + OVERFLOW FIXES
   ══════════════════════════════════════════════════════════════════ */

/* ── Mobile nav open state ─────────────────────────────────────── */
@media (max-width: 900px) {

  /* Nav slides down from header when open */
  .nav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 76px;
    left: 0; right: 0;
    background: rgba(6,6,8,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 24px 32px 32px;
    gap: 4px;
    z-index: 99;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(.2,.8,.3,1), opacity 0.25s ease;
  }
  .nav.nav-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-link {
    font-size: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--white);
    width: 100%;
  }
  .nav-link:last-of-type { border-bottom: none; }
  .nav-cta {
    margin-top: 16px;
    text-align: center;
    padding: 14px 24px;
    font-size: 16px;
  }

  /* Hamburger → X animation */
  .nav-toggle span { transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── App callout — stack vertically, badges wrap ─────────────── */
  .app-callout { padding: 60px 20px; }
  .app-callout-inner {
    flex-direction: column;
    gap: 36px;
    text-align: center;
  }
  .app-callout-text { text-align: center; }
  .app-callout-text .btn-primary,
  .app-callout-text .btn-outline {
    width: 100%;
    text-align: center;
  }
  .app-callout-badges {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    gap: 12px;
  }
  .app-badge { min-width: unset; padding: 18px 12px; }

  /* ── Hero — single column, no overflow ───────────────────────── */
  .hero { padding: 100px 20px 60px; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .hero-sub { font-size: 16px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline { width: 100%; text-align: center; }
  .hero-badges { gap: 12px; }

  /* ── Sections padding ────────────────────────────────────────── */
  .section { padding: 60px 20px; }
  .page-hero { padding: 110px 20px 60px; }

  /* ── About grid ──────────────────────────────────────────────── */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .welcome-visual { min-height: unset; }
  .wv-pill { display: none; }

  /* ── Stats ───────────────────────────────────────────────────── */
  .stats { padding: 40px 20px; }
  .stats-inner { grid-template-columns: repeat(2,1fr); }
  .stat { padding: 20px 16px; border-right: none; border-bottom: 1px solid var(--border); }
  .stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat:nth-child(3), .stat:nth-child(4) { border-bottom: none; }
  .stat-number { font-size: 40px; }

  /* ── Footer ──────────────────────────────────────────────────── */
  .footer { padding: 40px 20px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

  /* ── Services grid ───────────────────────────────────────────── */
  .services-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }

  /* ── Why grid ────────────────────────────────────────────────── */
  .why-grid { grid-template-columns: 1fr; }
  .why-card { border-right: none; border-bottom: 1px solid var(--border); }
  .why-card:last-child { border-bottom: none; }

  /* ── Client cards ────────────────────────────────────────────── */
  .clients-grid { grid-template-columns: 1fr; gap: 16px; }
  .enterprise-logos { padding: 28px 0; }
  .ent-grid { gap: 8px; }
  .ent-item { padding: 10px 16px; }
  .ent-name { font-size: 15px; }

  /* ── Goals grid ──────────────────────────────────────────────── */
  .goals-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }

  /* ── Contact ─────────────────────────────────────────────────── */
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-row { grid-template-columns: 1fr; }

  /* ── Promo ───────────────────────────────────────────────────── */
  .promo-inner { flex-direction: column; text-align: center; padding: 48px 0; }
  .btn-dark { width: 100%; text-align: center; }

  /* ── Team orbit ──────────────────────────────────────────────── */
  .team-orbit-wrap { width: 300px; height: 300px; margin: 32px auto; }
  .orbit-hub { width: 72px; height: 72px; }
  .orbit-logo { width: 62px; height: 62px; }
  .orbit-node { width: 52px; height: 52px; }
  .on-icon { font-size: 15px; }
  .on-label { display: none; }
  .orbit-node.n1 { top: calc(150px - 70px - 26px); left: calc(150px + 0px - 26px); }
  .orbit-node.n2 { top: calc(150px - 35px - 26px); left: calc(150px + 61px - 26px); }
  .orbit-node.n3 { top: calc(150px + 35px - 26px); left: calc(150px + 61px - 26px); }
  .orbit-node.n4 { top: calc(150px + 70px - 26px); left: calc(150px + 0px - 26px); }
  .orbit-node.n5 { top: calc(150px + 35px - 26px); left: calc(150px - 61px - 26px); }
  .orbit-node.n6 { top: calc(150px - 35px - 26px); left: calc(150px - 61px - 26px); }
  .orbit-pill { padding: 6px 14px; }
  .op-num { font-size: 16px; }
  .op-label { font-size: 8px; }
  .orbit-pill.p1 { top: 4px; left: 4px; }
  .orbit-pill.p2 { top: 4px; right: 4px; }
  .orbit-pill.p3 { bottom: 4px; left: 4px; }
  .orbit-pill.p4 { bottom: 4px; right: 4px; }

  /* ── General overflow prevention ────────────────────────────── */
  body { overflow-x: hidden; }
  * { max-width: 100%; }
  img { max-width: 100%; height: auto; }
}

/* ── Extra small screens ───────────────────────────────────────── */
@media (max-width: 420px) {
  .hero h1 { font-size: 32px; letter-spacing: 0; }
  .section-title { font-size: 28px; }
  .stat-number { font-size: 34px; }
  .app-callout-badges { grid-template-columns: repeat(2,1fr); max-width: 220px; }
  .hero-badges { flex-direction: column; align-items: flex-start; }
  .team-orbit-wrap { width: 260px; height: 260px; }
  .orbit-node.n1 { top: calc(130px - 60px - 26px); left: calc(130px + 0px - 26px); }
  .orbit-node.n2 { top: calc(130px - 30px - 26px); left: calc(130px + 52px - 26px); }
  .orbit-node.n3 { top: calc(130px + 30px - 26px); left: calc(130px + 52px - 26px); }
  .orbit-node.n4 { top: calc(130px + 60px - 26px); left: calc(130px + 0px - 26px); }
  .orbit-node.n5 { top: calc(130px + 30px - 26px); left: calc(130px - 52px - 26px); }
  .orbit-node.n6 { top: calc(130px - 30px - 26px); left: calc(130px - 52px - 26px); }
}