/* ═══════════════════════════════════════════════
   VOLANTIX — SHARED STYLESHEET v6
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --bg:         #03050f;
  --bg-card:    #080c28;
  --bg-card2:   #0c1035;
  --violet:     #7c3aed;
  --indigo-mid: #4f46e5;
  --blue-hi:    #6366f1;
  --blue-light: #a5b4fc;
  --cyan:       #06b6d4;
  --lime:       #c8f135;
  --white:      #ffffff;
  --g-100:      #f1f5f9;
  --g-200:      #e2e8f0;
  --g-300:      #cbd5e1;
  --g-400:      #94a3b8;
  --g-500:      #64748b;
  --g-600:      #475569;
  --g-700:      #334155;
  --r: 400ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

/* ── CURSOR ── */
#cur-dot,#cur-ring { position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%) }
#cur-dot { width:8px;height:8px;background:var(--violet);border-radius:50%;transition:width .2s,height .2s;mix-blend-mode:screen }
#cur-ring { width:36px;height:36px;border:1px solid rgba(124,58,237,.5);border-radius:50%;transition:width .35s,height .35s }
.cur-grow #cur-dot { width:16px;height:16px }
.cur-grow #cur-ring { width:56px;height:56px }

/* ── CANVAS PARTICLES ── */
#cvs { position:fixed;inset:0;z-index:0;pointer-events:none }

/* ══════════════════════════════════════════
   CINEMATIC COLOUR MESH — HERO BACKGROUND
   Used on EVERY page hero
══════════════════════════════════════════ */
.hero-mesh {
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 65% at 92% 8%,   rgba(37,99,235,.62)  0%, transparent 58%),
    radial-gradient(ellipse 65% 58% at 4%  92%,   rgba(219,39,119,.56) 0%, transparent 58%),
    radial-gradient(ellipse 55% 48% at 50% 110%,  rgba(234,88,12,.48)  0%, transparent 54%),
    radial-gradient(ellipse 42% 38% at 48% 50%,   rgba(109,40,217,.18) 0%, transparent 60%),
    linear-gradient(180deg, #030614 0%, #060a1c 40%, #08091e 70%, #050610 100%);
}
.hero-grid {
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(124,58,237,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.06) 1px,transparent 1px);
  background-size:72px 72px;
}

/* ── ORB LAYERS ── */
.orb { position:absolute;border-radius:50%;pointer-events:none }
.orb-1 { width:780px;height:780px;top:-200px;right:-160px;background:radial-gradient(circle,rgba(37,99,235,.55) 0%,rgba(99,102,241,.28) 35%,transparent 68%);filter:blur(80px) }
.orb-2 { width:650px;height:650px;bottom:-60px;left:-100px;background:radial-gradient(circle,rgba(219,39,119,.5) 0%,rgba(168,85,247,.26) 40%,transparent 68%);filter:blur(90px) }
.orb-3 { width:500px;height:500px;bottom:-50px;left:38%;background:radial-gradient(circle,rgba(234,88,12,.44) 0%,rgba(202,138,4,.18) 45%,transparent 68%);filter:blur(100px) }
.orb-4 { width:400px;height:400px;top:35%;left:42%;background:radial-gradient(circle,rgba(109,40,217,.2) 0%,transparent 64%);filter:blur(70px) }
.layer { position:absolute;inset:0;z-index:0;will-change:transform }

/* ══════════════════════════════════════════
   SECTION COLOUR BLEEDS — INNER PAGES
   Every section on every page gets ambient
   colour so the multi-colour theme continues
══════════════════════════════════════════ */
.section-blue-right {
  background:
    radial-gradient(ellipse 55% 50% at 95% 50%, rgba(37,99,235,.13)   0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 5%  50%, rgba(219,39,119,.09)  0%, transparent 60%),
    transparent;
}
.section-magenta-left {
  background:
    radial-gradient(ellipse 55% 50% at 5%  50%, rgba(219,39,119,.13)  0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 95% 50%, rgba(234,88,12,.09)   0%, transparent 60%),
    transparent;
}
.section-amber-bottom {
  background:
    radial-gradient(ellipse 60% 55% at 50% 95%, rgba(234,88,12,.13)   0%, transparent 58%),
    radial-gradient(ellipse 40% 35% at 50% 10%, rgba(37,99,235,.08)   0%, transparent 58%),
    transparent;
}
.section-violet-center {
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(124,58,237,.1)   0%, transparent 60%),
    transparent;
}
.section-cyan-left {
  background:
    radial-gradient(ellipse 50% 45% at 8%  50%, rgba(6,182,212,.12)   0%, transparent 58%),
    radial-gradient(ellipse 40% 35% at 92% 50%, rgba(124,58,237,.08)  0%, transparent 58%),
    transparent;
}

/* ── NAV ── */
nav {
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:28px 52px;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .4s,background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled {
  padding:16px 52px;
  background:rgba(3,5,15,.92);
  backdrop-filter:blur(24px) saturate(1.6);
  border-color:rgba(124,58,237,.22);
}
.logo { display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0 }
.logo-text { font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;letter-spacing:.06em;color:var(--white);line-height:1 }
.logo-text small { display:block;font-size:9px;font-weight:400;letter-spacing:.2em;color:var(--g-500);text-transform:uppercase;margin-top:3px }
.nav-links { display:flex;align-items:center;gap:36px;list-style:none }
.nav-links a { font-size:14px;color:var(--g-300);text-decoration:none;letter-spacing:.02em;transition:color .2s;position:relative }
.nav-links a::after { content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--lime);transform:scaleX(0);transition:transform .25s }
.nav-links a:hover,.nav-links a.active { color:var(--white) }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1) }
.nav-cta {
  background:var(--lime)!important;color:#0a0a0a!important;
  padding:10px 22px;border-radius:7px;
  font-size:13px!important;font-weight:700!important;
  box-shadow:0 0 24px rgba(200,241,53,.2);
  transition:transform .2s,box-shadow .2s!important;
}
.nav-cta:hover { transform:translateY(-1px);box-shadow:0 4px 28px rgba(200,241,53,.4)!important }
.nav-cta::after { display:none!important }
.nav-hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px }
.nav-hamburger span { width:22px;height:1.5px;background:var(--g-400);border-radius:2px;transition:transform .3s,opacity .3s }

/* ── BUTTONS ── */
.btn-p {
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--indigo-mid),var(--violet));
  color:white;padding:16px 34px;border-radius:8px;font-size:15px;font-weight:500;
  text-decoration:none;transition:transform .25s,box-shadow .25s;
  box-shadow:0 0 48px rgba(124,58,237,.4);position:relative;overflow:hidden;
}
.btn-p::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);opacity:0;transition:opacity .25s }
.btn-p:hover { transform:translateY(-2px);box-shadow:0 8px 56px rgba(124,58,237,.65) }
.btn-p:hover::before { opacity:1 }
.btn-s {
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;color:var(--g-200);
  padding:15px 32px;border-radius:8px;
  border:1px solid rgba(124,58,237,.38);
  font-size:15px;text-decoration:none;
  transition:border-color .25s,color .25s,transform .25s,background .25s;
}
.btn-s:hover { border-color:var(--violet);color:white;transform:translateY(-2px);background:rgba(124,58,237,.12) }

/* ── LAYOUT ── */
.wrap { max-width:1180px;margin:0 auto;padding:0 52px }
section { position:relative;z-index:1 }

/* ══════════════════════════════════════════
   TYPOGRAPHY — all clearly visible
══════════════════════════════════════════ */
.eyebrow {
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-light);font-weight:600;margin-bottom:18px;
}
.eyebrow::before { content:'';width:28px;height:1px;background:var(--violet);flex-shrink:0 }
.sh2 {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(32px,4vw,52px);font-weight:800;
  line-height:1.08;letter-spacing:-.025em;margin-bottom:20px;
  color:var(--white);
}
.sp { font-size:16px;color:var(--g-300);line-height:1.75;max-width:540px;font-weight:300 }

/* ── TAGS ── */
.tags { display:flex;flex-wrap:wrap;gap:6px }
.tag {
  font-size:11px;padding:4px 12px;border-radius:100px;
  background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.28);
  color:var(--blue-light);font-weight:400;
}

/* ── 3D TILT CARDS ── */
.card-3d { transition:transform .5s var(--r);will-change:transform }

/* ══════════════════════════════════════════
   STATS — CLEARLY VISIBLE NUMBERS
══════════════════════════════════════════ */
#stats { position:relative;z-index:1 }
.stats-row {
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(124,58,237,.06) 0%, transparent 70%),
    rgba(4,6,20,.96);
  border-top:1px solid rgba(124,58,237,.14);
  border-bottom:1px solid rgba(124,58,237,.14);
}
.si {
  padding:52px 36px;
  border-right:1px solid rgba(124,58,237,.12);
  text-align:center;
  background:rgba(5,7,22,.85);
  transition:background .3s;
  position:relative;overflow:hidden;
}
.si:last-child { border-right:none }
.si::after { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--violet),transparent);transform:scaleX(0);transition:transform .4s }
.si:hover { background:rgba(124,58,237,.08) }
.si:hover::after { transform:scaleX(1) }
/* STAT NUMBERS — WHITE GRADIENT, ALWAYS VISIBLE */
.si-n {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:52px;font-weight:800;line-height:1;
  color:#ffffff;
  background:linear-gradient(135deg,#ffffff 0%,#dde8ff 40%,#a5b4fc 80%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(165,180,252,.6));
  margin-bottom:10px;
}
.si-l { font-size:13px;color:var(--g-300);font-weight:400;letter-spacing:.02em }

/* ══════════════════════════════════════════
   WHY SECTION — NUMBERS CLEARLY VISIBLE
══════════════════════════════════════════ */
.wc {
  background:rgba(6,9,28,.88);
  border:1px solid rgba(124,58,237,.16);
  border-radius:16px;padding:36px 28px;
  transition:transform .35s var(--r),border-color .35s,background .35s;
}
.wc:hover { transform:translateY(-5px);border-color:rgba(124,58,237,.38);background:rgba(10,14,42,.95) }
/* BIG NUMBERS — BRIGHT, GLOWING */
.wc-n {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:64px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,#ffffff 0%,#c4d4ff 35%,#a5b4fc 60%,#7c3aed 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 24px rgba(124,58,237,.7));
  margin-bottom:16px;letter-spacing:-.04em;
}
.wc-t { font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;margin-bottom:10px;color:var(--g-100) }
.wc-p { font-size:14px;color:var(--g-400);line-height:1.75;font-weight:300 }

/* ── HERO FLOAT CARDS ── */
.hfc {
  background:rgba(8,12,36,.82);border:1px solid rgba(124,58,237,.22);
  border-radius:12px;padding:18px 20px;backdrop-filter:blur(10px);
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;
}
.hfc::before { content:'';position:absolute;top:-1px;left:16px;right:16px;height:1px;background:linear-gradient(to right,transparent,var(--violet),transparent) }
.hfc:hover { transform:translateY(-4px);box-shadow:0 16px 48px rgba(124,58,237,.22) }
.hfc-n {
  font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,#ffffff 0%,#dde8ff 50%,#a5b4fc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 14px rgba(165,180,252,.5));
  margin-bottom:4px;
}
.hfc-l { font-size:12px;color:var(--g-400);font-weight:400 }

/* ── REVEAL ── */
.rv { opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s ease }
.rv.in { opacity:1;transform:none }
.rv.d1 { transition-delay:.08s } .rv.d2 { transition-delay:.16s } .rv.d3 { transition-delay:.24s } .rv.d4 { transition-delay:.32s }

/* ── KEYFRAMES ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }
@keyframes slideIn { from{transform:scaleX(0);transform-origin:left} to{transform:scaleX(1);transform-origin:left} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }

/* ── FOOTER ── */
footer {
  padding:52px 52px 36px;
  border-top:1px solid rgba(124,58,237,.14);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:32px;
  position:relative;z-index:1;
  background:rgba(3,5,15,.95);
}
.f-brand { font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--g-400);margin-bottom:4px }
.f-tag { font-size:11px;color:var(--g-600);letter-spacing:.12em;text-transform:uppercase }
/* Footer brand mark — actual logo, filtered so the navy-on-white source becomes a brand-aligned light-blue silhouette on the dark theme. No card. */
.f-brand-mark {
  display:inline-block;
  text-decoration:none;
  transition:transform .25s var(--r),opacity .25s;
  opacity:.85;
}
.f-brand-mark:hover { transform:translateY(-2px);opacity:1 }
.f-logo {
  width:160px;height:auto;display:block;
  filter:invert(1) hue-rotate(180deg) brightness(1.05);
  mix-blend-mode:screen;
}
@media(max-width:768px){ .f-logo { width:130px } }

/* Nav brand mark — same full lockup image as the footer.
   The source PNG is square with the actual logo content centred in the
   middle horizontal band, so a wide-and-short viewport with
   object-fit:cover crops away the empty whitespace top/bottom and shows
   the complete logo (icon + VOLANTIX CONSULTING + tagline) at readable
   proportions without making the nav too tall. Same filter as footer
   so navy-on-white reads as a brand-aligned light blue on the dark nav. */
.logo-mark {
  display:block;flex-shrink:0;
  width:210px;height:64px;
  object-fit:cover;
  object-position:center center;
  filter:invert(1) hue-rotate(180deg) brightness(1.05);
  mix-blend-mode:screen;
  transition:transform .3s var(--r);
}
.logo:hover .logo-mark { transform:scale(1.03) }
nav.scrolled .logo-mark { width:178px;height:54px }
.f-links { display:flex;gap:28px;justify-content:center }
.f-links a { font-size:13px;color:var(--g-500);text-decoration:none;letter-spacing:.03em;transition:color .2s }
.f-links a:hover { color:var(--blue-light) }
.f-copy { font-size:12px;color:var(--g-600);text-align:right }

/* ── SERVICE CARDS ── */
.svc { background:var(--bg-card);padding:52px 40px;position:relative;overflow:hidden;transition:background .35s }
.svc:hover { background:var(--bg-card2) }
.svc-glow { position:absolute;top:0;right:0;width:220px;height:220px;background:radial-gradient(circle at top right,rgba(124,58,237,.16),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none }
.svc:hover .svc-glow { opacity:1 }
.svc-icon { width:52px;height:52px;background:linear-gradient(135deg,rgba(79,70,229,.3),rgba(124,58,237,.2));border:1px solid rgba(124,58,237,.3);border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:28px;transition:transform .3s,box-shadow .3s }
.svc:hover .svc-icon { transform:scale(1.08);box-shadow:0 0 28px rgba(124,58,237,.4) }
.svc-name { font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;margin-bottom:14px;line-height:1.3;color:var(--g-100) }
.svc-desc { font-size:14px;color:var(--g-300);line-height:1.8;font-weight:300;margin-bottom:24px }

/* ── MOBILE ── */
@media(max-width:768px) {
  nav { padding:18px 24px }
  nav.scrolled { padding:14px 24px }
  .nav-links { display:none;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(3,5,15,.97);align-items:center;justify-content:center;gap:32px;z-index:199 }
  .nav-links.open { display:flex }
  .nav-hamburger { display:flex }
  .wrap { padding:0 24px }
  .stats-row { grid-template-columns:1fr 1fr }
  .si { border-bottom:1px solid rgba(124,58,237,.1) }
  footer { grid-template-columns:1fr;text-align:center;padding:40px 24px 32px }
  .f-links { flex-wrap:wrap;gap:20px }
  .f-copy { text-align:center }
}


/* ══════════════════════════════════════════
   GLOBAL TEXT VISIBILITY OVERRIDES
══════════════════════════════════════════ */

/* Team member bio */
.tm-bio { font-size:14px;color:#94a3b8;line-height:1.75;font-weight:300;margin-bottom:24px }
.tm-name { font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;margin-bottom:6px;color:#f1f5f9 }
.tm-role { font-size:14px;color:#a5b4fc;font-weight:500;margin-bottom:4px;line-height:1.4 }
.tm-tag { font-size:12px;color:#64748b;margin-bottom:18px }

/* Vision/capability cards */
.vis-desc { font-size:14px;color:#94a3b8;line-height:1.8;font-weight:300 }
.vis-title { font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;margin-bottom:12px;color:#f1f5f9 }
.vis-phase { font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7c3aed;font-weight:600;margin-bottom:10px }
.vis-items li { font-size:13px;color:#94a3b8;font-weight:300 }

/* Capability cards on Volax page */
.cap-card-desc { font-size:14px;color:#94a3b8;line-height:1.75;font-weight:300 }
.cap-card-name { font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;margin-bottom:10px;color:#f1f5f9 }

/* Roadmap */
.rm-ver { font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;color:#f1f5f9 }
.rm-name { font-size:14px;color:#64748b;margin-bottom:24px }
.rm-features-list li { font-size:13px;color:#94a3b8;font-weight:300 }

/* Integration badges */
.int-badge { font-size:13px;font-weight:500;color:#cbd5e1 }

/* How-it-works steps */
.hs-title { font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;margin-bottom:8px;color:#e2e8f0 }
.hs-desc { font-size:12px;color:#94a3b8;line-height:1.6;font-weight:300 }

/* Security section */
.sec-h { font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;margin-bottom:14px;color:#f1f5f9 }
.sec-p { font-size:15px;color:#94a3b8;line-height:1.8;font-weight:300 }
.sec-features li { font-size:14px;color:#cbd5e1;font-weight:300 }

/* Bio page text */
.bio-lead { color:#f1f5f9 }
.bio-p { font-size:16px;color:#94a3b8;line-height:1.85;margin-bottom:20px;font-weight:300 }
.bio-callout p { font-size:15px;color:#cbd5e1;line-height:1.75;font-style:italic;font-weight:300 }
.exp-list li { color:#94a3b8 }
.exp-block-title { color:#94a3b8 }

/* Cert cards */
.cert-name { font-size:12px;color:#64748b;line-height:1.4 }
.cert-badge-big { font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800 }

/* General paragraph */
p, li { color:#94a3b8 }

/* Overrides for important content text */
.fh-quote { color:#cbd5e1 }
.vs-text { color:#f1f5f9 }
.vs-sub { color:#94a3b8 }
.th-m-text { color:#e2e8f0 }
.th-m-sub { color:#94a3b8 }
.rm-feat { font-size:12px;color:#64748b;line-height:1.6;font-weight:300 }
.rm-ver-small { font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:700;margin-bottom:3px;color:#e2e8f0 }
.pd-title { font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:#94a3b8;margin-bottom:16px }
.cap-sub { font-size:12px;color:#64748b;line-height:1.5;font-weight:300 }
.cap-name { font-size:13px;font-weight:600;color:#e2e8f0;margin-bottom:3px }

/* Section labels */
.tl-desc { font-size:14px;color:#64748b;line-height:1.7;font-weight:300 }
.tl-company { font-size:13px;color:#a5b4fc;margin-bottom:10px }
.tl-role { font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;margin-bottom:4px;color:#f1f5f9 }

/* Why card improvements */
#why .wrap p.sp { color:#94a3b8 }