/* ═══════════════════════════════════════════════════════════
   RETRIX — BRIGHT ROYAL-PURPLE LIGHT THEME
   Applies a single visual system across every page.
   Loaded AFTER retrix-refined.css to win the cascade.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── ROOT TOKENS ─────────────────────────────────────────── */
:root, html, body{
  --c-bg:#ffffff !important;
  --c-bg2:#faf6ff !important;
  --c-purple:#5b21b6 !important;
  --c-purple-lt:#7c3aed !important;
  --c-purple-glow:rgba(91,33,182,0.35) !important;
  --c-plum:#ede9fe !important;
  --c-accent:#4c1d95 !important;
  --c-white:#0a0414 !important;
  --c-muted:rgba(20,10,40,0.62) !important;
  --c-faint:rgba(20,10,40,0.45) !important;
  --c-line:rgba(91,33,182,0.16) !important;
  --f-head:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif !important;
  --f-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
  /* retrix-refined tokens */
  --r-bg-0:#ffffff !important;
  --r-bg-1:#faf6ff !important;
  --r-ink:#0a0414 !important;
  --r-ink-soft:rgba(20,10,40,0.62) !important;
  --r-violet:#5b21b6 !important;
  --r-violet-lt:#a78bfa !important;
  --r-violet-dp:#3b0764 !important;
  --r-rose:#6d28d9 !important;
  --r-cyan:#7c3aed !important;
  --r-line:rgba(91,33,182,0.18) !important;
  --r-line-hi:rgba(91,33,182,0.32) !important;
  --r-glow:rgba(91,33,182,0.4) !important;
  --r-glass-bg:rgba(255,255,255,0.65) !important;
  --r-glass-bg-hi:rgba(255,255,255,0.92) !important;
  --r-glass-brd:rgba(91,33,182,0.18) !important;
  --r-glass-shadow:0 10px 36px -12px rgba(91,33,182,0.18), 0 0 0 1px rgba(91,33,182,0.06) !important;
}

/* ── BASE + GRAIN ────────────────────────────────────────── */
html{background:#ffffff !important}
body{
  background:#ffffff !important;
  color:#0a0414 !important;
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
  background-attachment:initial !important;
  animation:none !important;
}

/* Page gradient + soft dot lattice — brighter, more vibrant */
body::before{
  content:'' !important;
  position:fixed !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;
  background:
    radial-gradient(rgba(91,33,182,0.035) 1px, transparent 1.4px),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(167,139,250,0.22) 0%, rgba(124,58,237,0.08) 40%, transparent 65%),
    radial-gradient(ellipse 60% 55% at 0% 100%, rgba(124,58,237,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(91,33,182,0.06) 0%, transparent 50%),
    linear-gradient(170deg, #ffffff 0%, #f7f2ff 35%, #f0eaff 65%, #ece4ff 100%) !important;
  background-size:28px 28px, auto, auto, auto, auto !important;
  background-position:0 0, 0 0, 0 0, 0 0, 0 0 !important;
  background-attachment:fixed !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  opacity:1 !important;
}

/* Film grain — site-wide */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
  opacity: 0.052 !important;
  mix-blend-mode: overlay !important;
  filter: none !important;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1, h2, h3, h4, h5,
.h-hero-head, .h-sec-head, .r-h2, .r-display{
  font-family:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif !important;
  color:#0a0414 !important;
  letter-spacing:-0.035em !important;
  font-weight:800 !important;
}
.h-hero-head{
  text-transform:uppercase !important;
  font-size:clamp(2.4rem, 6.6vw, 6rem) !important;
  line-height:0.95 !important;
}
.h-sec-head, .r-h2{
  text-transform:uppercase !important;
  font-size:clamp(1.7rem, 4.2vw, 3.6rem) !important;
  line-height:1.02 !important;
}
.h-hero-head em, .h-sec-head em, .r-h2 em, .r-display em{
  font-style:normal !important;
  background:none !important;
  -webkit-text-fill-color:initial !important;
  color:#5b21b6 !important;
  display:inline !important;
}
.h-label, .r-eyebrow{
  color:#5b21b6 !important;
  font-weight:700 !important;
  letter-spacing:0.18em !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:0.72rem !important;
}
.h-label::before, .r-eyebrow::before{
  background:#5b21b6 !important;
  width:8px !important;height:8px !important;border-radius:50% !important;
}
.hero-lead, .h-sub, p{color:rgba(20,10,40,0.66)}
.hero-lead{font-size:clamp(1rem,1.2vw,1.15rem) !important;line-height:1.7 !important}

/* ── FIX ITALIC TEXT CLIPPING on large headings ─────────────
   The p-h1 at 7.2rem with italic <em> overflows the viewport's
   overflow-x:clip boundary. We fix this by:
   1. Capping the max size slightly
   2. Adding padding-right on the heading to let italic breathe
   3. Ensuring .p-center wrapper is overflow:visible
   ──────────────────────────────────────────────────────────── */
h1.p-h1 {
  font-size: clamp(2.4rem, 5.5vw, 6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  overflow: visible !important;
  padding-right: 0.08em !important; /* breathing room for italic slant */
}
h2.p-h2 {
  font-size: clamp(2rem, 4.2vw, 4.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  overflow: visible !important;
  padding-right: 0.06em !important;
}
/* Italic em in p-h1 / p-h2 — dark readable purple */
h1.p-h1 em,
h2.p-h2 em {
  color: #5b21b6 !important;
  font-style: italic !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}
/* Gradient variant — preserve gradient on em but still allow overflow */
h1.p-h1.gradient em {
  background: linear-gradient(130deg, #7c3aed 10%, #4c1d95 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  padding-right: 0.1em !important;
  display: inline-block !important;
}
/* Ensure the hero wrapper (p-center) doesn't clip its children */
.p-center,
.p-wrap.p-center {
  overflow: visible !important;
}
/* The hero section itself */
.p-sec.hero,
.h-sec.hero {
  overflow: visible !important;
}


/* ── BUTTONS ─────────────────────────────────────────────── */
.h-btn-primary, .r-btn-primary{
  background:#0a0414 !important;
  color:#fff !important;
  border:none !important;
  border-radius:50px !important;
  padding:16px 32px !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:600 !important;
  font-size:0.88rem !important;
  letter-spacing:0.02em !important;
  box-shadow:0 12px 28px -8px rgba(10,4,20,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1) !important;
}
.h-btn-primary::before{display:none !important}
.h-btn-primary:hover, .r-btn-primary:hover{
  background:linear-gradient(135deg,#3b0764,#7c3aed) !important;
  background-position:0 !important;
  transform:translateY(-3px) !important;
  box-shadow:0 18px 42px -8px rgba(91,33,182,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}
.h-btn-outline, .r-btn-ghost{
  background:rgba(255,255,255,0.7) !important;
  backdrop-filter:blur(10px) !important;
  color:#0a0414 !important;
  border:1px solid rgba(91,33,182,0.22) !important;
  border-radius:50px !important;
  padding:16px 30px !important;
  font-weight:600 !important;
}
.h-btn-outline:hover, .r-btn-ghost:hover{
  background:#fff !important;
  border-color:#5b21b6 !important;
  color:#5b21b6 !important;
  transform:translateY(-2px) !important;
}

/* ── HEADER ──────────────────────────────────────────────── */
#site-header{
  background:rgba(255,255,255,0.72) !important;
  backdrop-filter:blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
  border-bottom:1px solid rgba(91,33,182,0.12) !important;
  box-shadow:0 1px 20px rgba(91,33,182,0.06) !important;
}
#site-header.is-scrolled{
  background:rgba(255,255,255,0.94) !important;
  border-bottom-color:rgba(91,33,182,0.2) !important;
  box-shadow:0 4px 30px rgba(91,33,182,0.08) !important;
}
.hd-logo-text{color:#0a0414 !important;font-family:'Bricolage Grotesque',sans-serif !important;font-weight:800 !important}
.hd-logo-sub{color:rgba(20,10,40,0.48) !important}
.hd-logo-dot{
  background:linear-gradient(135deg,#5b21b6,#a78bfa) !important;
  box-shadow:0 0 12px rgba(91,33,182,0.6) !important;
}
.hd-link{color:rgba(20,10,40,0.7) !important;font-weight:600 !important}
.hd-link:hover, .hd-link.active{color:#5b21b6 !important;background:rgba(91,33,182,0.07) !important}
.hd-link::after{background:linear-gradient(90deg,#5b21b6,#7c3aed) !important}
.hd-cta{
  background:#0a0414 !important;
  color:#fff !important;
  box-shadow:0 8px 24px -6px rgba(10,4,20,0.4) !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:600 !important;
}
.hd-cta:hover{
  background:linear-gradient(135deg,#3b0764,#7c3aed) !important;
  background-position:0 !important;
  box-shadow:0 14px 36px -8px rgba(91,33,182,0.55) !important;
}
.hd-drop-panel{
  background:rgba(255,255,255,0.97) !important;
  border:1px solid rgba(91,33,182,0.18) !important;
  box-shadow:0 24px 70px rgba(91,33,182,0.18) !important;
}
.hd-drop-item:hover{background:rgba(91,33,182,0.07) !important;border-color:rgba(91,33,182,0.18) !important}
.hdi-text strong{color:#0a0414 !important}
.hdi-text em{color:rgba(20,10,40,0.5) !important}
.hdi-icon{background:linear-gradient(135deg,rgba(91,33,182,0.14),rgba(124,58,237,0.08)) !important}
.hdi-icon svg{stroke:#5b21b6 !important}
.hd-menu-btn{background:rgba(91,33,182,0.06) !important;border-color:rgba(91,33,182,0.18) !important}
.hd-menu-btn svg{stroke:#0a0414 !important}
@media (max-width: 960px){
  .hd-nav{background:rgba(255,255,255,0.98) !important;border-top-color:rgba(91,33,182,0.14) !important}
}

/* ── HERO SIGNATURE BACKGROUND ──────────────────────────── */
.h-sec.hero{
  position:relative !important;
  overflow:visible !important;
  padding-top:clamp(5.5rem,10vh,7.5rem) !important;
  padding-bottom:clamp(2.5rem,5vh,4.5rem) !important;
  isolation:isolate;
  background:transparent !important;
}
.h-sec.hero::before{
  content:'';
  position:absolute;inset:-2% -4% -8%;
  z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle 520px at 14% 32%, rgba(76,29,149,0.26) 0%, rgba(76,29,149,0.04) 45%, transparent 65%),
    radial-gradient(circle 420px at 86% 72%, rgba(124,58,237,0.24) 0%, transparent 60%),
    radial-gradient(circle 280px at 68% 18%, rgba(167,139,250,0.18) 0%, transparent 65%),
    radial-gradient(circle 600px at 50% 110%, rgba(91,33,182,0.14) 0%, transparent 60%);
  filter:blur(6px);
}
.h-sec.hero::after{
  content:'';
  position:absolute;top:-5%;right:-10%;
  width:62%;height:115%;
  z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(
    -28deg,
    transparent 0,transparent 48px,
    rgba(91,33,182,0.08) 48px,rgba(91,33,182,0.08) 49px,
    transparent 49px,transparent 96px,
    rgba(124,58,237,0.04) 96px,rgba(124,58,237,0.04) 97px
  );
  mask-image:radial-gradient(ellipse at center, #000 25%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 25%, transparent 70%);
}
.hero-comp::before{
  content:'';
  position:absolute;
  width:140%;height:140%;top:-20%;left:-20%;
  border:1px solid rgba(91,33,182,0.18);
  border-radius:50%;
  pointer-events:none;z-index:0;
  mask-image:conic-gradient(from 200deg, #000 0%, #000 35%, transparent 60%, transparent 100%);
  -webkit-mask-image:conic-gradient(from 200deg, #000 0%, #000 35%, transparent 60%, transparent 100%);
  animation:rtxRingSpin 80s linear infinite;
}
@keyframes rtxRingSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero-comp::after{
  content:'';
  position:absolute;width:14px;height:14px;border-radius:50%;
  top:14%;right:8%;
  background:linear-gradient(135deg,#5b21b6,#a78bfa);
  box-shadow:0 0 24px rgba(91,33,182,0.7), 0 0 0 5px rgba(91,33,182,0.12);
  pointer-events:none;z-index:0;
  animation:rtxDotPulse 3s ease-in-out infinite;
}
@keyframes rtxDotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:0.7}}

.hero-copy .h-label{
  display:inline-flex !important;
  padding:7px 14px 7px 12px !important;
  border-radius:50px !important;
  background:rgba(91,33,182,0.08) !important;
  border:1px solid rgba(91,33,182,0.18) !important;
  backdrop-filter:blur(8px);
  margin-bottom:1.5rem !important;
}

.hero-browser{
  background:#ffffff !important;
  border:1px solid rgba(91,33,182,0.18) !important;
  box-shadow:0 40px 90px -20px rgba(91,33,182,0.35), 0 0 0 1px rgba(91,33,182,0.06) !important;
}
.hero-browser-bar{background:#f6effa !important;border-bottom-color:rgba(91,33,182,0.12) !important}
.hero-comp-glow{
  background:radial-gradient(ellipse 80% 80% at 50% 50%, rgba(91,33,182,0.22), rgba(124,58,237,0.14) 30%, transparent 70%) !important;
}
.hero-orbit{border-color:rgba(91,33,182,0.18) !important}
.hero-orbit::after{
  background:linear-gradient(135deg,#5b21b6,#a78bfa) !important;
  box-shadow:0 0 20px rgba(91,33,182,0.6) !important;
}
.hero-float{
  background:#ffffff !important;
  border:1px solid rgba(91,33,182,0.22) !important;
  box-shadow:0 14px 40px -8px rgba(91,33,182,0.28) !important;
  backdrop-filter:none !important;
}
.hf-label{color:#5b21b6 !important}
.hf-val{color:#0a0414 !important;font-family:'Bricolage Grotesque',sans-serif !important;font-weight:800 !important}
.hf-sub{color:rgba(20,10,40,0.5) !important}
.hf-bar{background:linear-gradient(180deg,#7c3aed,#5b21b6) !important}

/* ── TRUST STRIP ────────────────────────────────────────── */
.trust-strip{
  background:rgba(255,255,255,0.5) !important;
  border-top:1px solid rgba(91,33,182,0.14) !important;
  border-bottom:1px solid rgba(91,33,182,0.14) !important;
  backdrop-filter:blur(8px) !important;
}
.trust-item{
  color:rgba(20,10,40,0.55) !important;
  border-right-color:rgba(91,33,182,0.1) !important;
  font-weight:600 !important;
}
.trust-item:hover{color:#5b21b6 !important}
.trust-dot{background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;box-shadow:0 0 8px rgba(91,33,182,0.5) !important}

/* ── CAPABILITIES BENTO — SS-style dark stroke cards ─────── */
/* Kill spotlight overlay on .bc cards */
.bc[data-spotlight]::after,
.bc[data-spotlight]:hover::after{
  display:none !important;
  opacity:0 !important;
  background:none !important;
}

.bento{
  grid-template-columns:repeat(3,1fr) !important;
  grid-template-rows:auto !important;
  gap:0.75rem !important;
}
.bc, .bc.wide, .bc.full{
  min-height:220px !important;
  max-height:none !important;
  border-radius:18px !important;
  padding:1.5rem 1.5rem 1.2rem !important;
  background-image:none !important;
  background-color:#12101a !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  position:relative !important;
  box-shadow:0 2px 20px rgba(0,0,0,0.3) !important;
  transform:translateZ(0);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.bc {
  grid-column:span 1 !important;
}
.bc.wide {
  grid-column:span 2 !important;
}
.bc.full {
  grid-column:span 3 !important;
}
.bc:hover, .bc.wide:hover, .bc.full:hover {
  background-color:#1a1628 !important;
  background-image:none !important;
  border-color:rgba(123,47,247,0.45) !important;
  transform:translateY(-6px) !important;
  box-shadow:0 16px 48px rgba(91,33,182,0.18), 0 0 0 1px rgba(123,47,247,0.1) inset !important;
}
/* Remove old gloss ::before */
.bc::before{ display:none !important; }

/* ── Icon box — top-left purple rounded square ─── */
.bc .bc-icon-box{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:44px !important;
  border-radius:12px !important;
  background:rgba(123,47,247,0.18) !important;
  border:1px solid rgba(123,47,247,0.3) !important;
  flex-shrink:0 !important;
  position:relative;z-index:2;
}
.bc .bc-icon-box svg{
  width:20px !important;
  height:20px !important;
  stroke:#a78bfa !important;
  fill:none !important;
  stroke-width:2px !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* ── Ghost decorative shape — top-right ─── */
.bc .bc-ghost{
  position:absolute !important;
  top:16px !important;
  right:18px !important;
  width:46px !important;
  height:46px !important;
  opacity:0.1 !important;
  pointer-events:none;
  z-index:1;
  transition:opacity 0.35s ease !important;
}
.bc:hover .bc-ghost{ opacity:0.2 !important; }
.bc .bc-ghost svg{
  width:100% !important;
  height:100% !important;
  stroke:#ffffff !important;
  fill:none !important;
  stroke-width:2px !important;
}

/* ── Text block ─── */
.bc .bc-text{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  margin-top:1rem !important;
  position:relative;z-index:2;
}
.bc .bc-title{
  color:#ffffff !important;
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-weight:700 !important;
  font-size:1.08rem !important;
  letter-spacing:-0.01em !important;
  line-height:1.25 !important;
  margin-bottom:0.42rem !important;
  text-shadow:none !important;
}
.bc .bc-desc{
  color:rgba(255,255,255,0.52) !important;
  font-size:0.82rem !important;
  line-height:1.55 !important;
  flex:1;
}
/* ── Tags footer — purple dash + small tags ─── */
.bc .bc-meta{
  display:flex !important;
  align-items:center !important;
  gap:0.5rem !important;
  color:rgba(255,255,255,0.42) !important;
  border-top:1px solid rgba(255,255,255,0.07) !important;
  margin-top:1rem !important;
  padding-top:0.85rem !important;
  font-size:0.68rem !important;
  letter-spacing:0.01em !important;
  position:relative;z-index:2;
}
.bc .bc-meta::before{
  content:'' !important;
  display:inline-block !important;
  width:20px !important;
  height:2px !important;
  background:#7b2ff7 !important;
  border-radius:2px !important;
  flex-shrink:0 !important;
}

/* Hide old art / shape / illo elements */
.bc .bc-art  { display:none !important; }
.bc .bc-icon { display:none !important; }
.bc .bc-shape{ display:none !important; }
.bc .bc-illo { display:none !important; }

/* ── WHY RETRIX TILES ────────────────────────────────────── */
.why-tile{
  background:rgba(255,255,255,0.85) !important;
  border:1px solid rgba(91,33,182,0.16) !important;
  backdrop-filter:blur(8px) !important;
  box-shadow:0 10px 30px -10px rgba(91,33,182,0.16) !important;
}
.why-tile:hover{
  background:rgba(255,255,255,0.98) !important;
  border-color:rgba(91,33,182,0.32) !important;
  box-shadow:0 24px 60px -16px rgba(91,33,182,0.35) !important;
  transform:translateY(-6px) !important;
}
/* Disable spotlight overlay on why-tiles too */
.why-tile[data-spotlight]::after,
.why-tile[data-spotlight]:hover::after{display:none !important;opacity:0 !important}
.why-num{color:rgba(91,33,182,0.14) !important;font-family:'Bricolage Grotesque',sans-serif !important}
.why-ring{
  background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;
  border:none !important;
  box-shadow:0 10px 24px -6px rgba(91,33,182,0.5) !important;
}
.why-ring svg{stroke:#fff !important}
.why-title{color:#0a0414 !important;font-family:'Bricolage Grotesque',sans-serif !important;font-weight:800 !important}
.why-text{color:rgba(20,10,40,0.66) !important}
.why-detail{color:rgba(20,10,40,0.5) !important;border-top-color:rgba(91,33,182,0.12) !important}

/* ── PROCESS NODES ───────────────────────────────────────── */
.process-wrap::before{
  background:linear-gradient(90deg,transparent,#5b21b6,#7c3aed,#5b21b6,transparent) !important;
  opacity:0.45 !important;
}
.p-ring{
  background:#ffffff !important;
  border:1px solid rgba(91,33,182,0.25) !important;
  box-shadow:0 8px 20px -6px rgba(91,33,182,0.18) !important;
}
.pnode.on .p-ring, .pnode:hover .p-ring{
  background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;
  border-color:transparent !important;
  box-shadow:0 12px 28px -6px rgba(91,33,182,0.55) !important;
}
.p-ring svg{stroke:rgba(91,33,182,0.7) !important}
.pnode.on .p-ring svg, .pnode:hover .p-ring svg{stroke:#fff !important}
.p-num{color:#5b21b6 !important;font-family:'Bricolage Grotesque',sans-serif !important;font-weight:700 !important}
.p-label{color:#0a0414 !important;font-family:'Bricolage Grotesque',sans-serif !important;font-weight:700 !important}
.p-desc{color:rgba(20,10,40,0.5) !important}

/* ── FEATURED WORK ───────────────────────────────────────── */
.wc{
  background:#fff !important;
  border:1px solid rgba(91,33,182,0.14) !important;
  box-shadow:0 16px 40px -16px rgba(91,33,182,0.25) !important;
}
.wc:hover{
  border-color:rgba(91,33,182,0.3) !important;
  box-shadow:0 28px 70px -16px rgba(91,33,182,0.42) !important;
}
.wc-overlay{
  display:none !important;
  background:none !important;
  opacity:0 !important;
}
.wc-tag{
  background:rgba(255,255,255,0.18) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  backdrop-filter:blur(6px);
}
.wc-arrow{background:#fff !important;border:1px solid rgba(91,33,182,0.3) !important}
.wc-arrow svg{stroke:#5b21b6 !important}

/* ── TESTIMONIALS ───────────────────────────────────────── */
.test-card{
  background:rgba(255,255,255,0.85) !important;
  border:1px solid rgba(91,33,182,0.16) !important;
  backdrop-filter:blur(10px) !important;
  box-shadow:0 14px 36px -16px rgba(91,33,182,0.2) !important;
}
.test-card[data-spotlight]::after,
.test-card[data-spotlight]:hover::after{display:none !important;opacity:0 !important}
.test-card::before{color:rgba(91,33,182,0.12) !important}
.test-q{color:#0a0414 !important;font-family:'Bricolage Grotesque',sans-serif !important;font-style:normal !important;font-weight:500 !important}
.test-name{color:#0a0414 !important}
.test-role{color:rgba(20,10,40,0.5) !important}
.test-avatar{border-color:rgba(91,33,182,0.3) !important}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-card{
  background:rgba(255,255,255,0.78) !important;
  border:1px solid rgba(91,33,182,0.14) !important;
  backdrop-filter:blur(8px);
}
.faq-card.open, .faq-card:hover{border-color:rgba(91,33,182,0.32) !important;background:#fff !important}
.faq-btn{color:#0a0414 !important;font-weight:700 !important}
.faq-btn:hover{color:#5b21b6 !important}
.faq-chev{stroke:rgba(91,33,182,0.6) !important}
.faq-card.open .faq-chev{stroke:#5b21b6 !important}
.faq-body-inner{color:rgba(20,10,40,0.62) !important}

/* ── LOGO LOOP ──────────────────────────────────────────── */
#logoLoopContainer{
  background:rgba(255,255,255,0.65) !important;
  border:1px solid rgba(91,33,182,0.14) !important;
  backdrop-filter:blur(10px) !important;
  box-shadow:0 12px 36px -16px rgba(91,33,182,0.2) !important;
}
.logo-group{display:flex;gap:clamp(1.5rem,3vw,2.8rem);flex-shrink:0;padding-right:clamp(1.5rem,3vw,2.8rem)}
.logo-item{filter:grayscale(40%) brightness(0.9) contrast(1.1) !important;opacity:0.7 !important}
.logo-item:hover{filter:grayscale(0%) brightness(1) !important;opacity:1 !important}

/* ── WHAT WE FIX & WORKING STYLE TILES ──────────────────── */
.solve-item {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(239, 68, 68, 0.16) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 6px 20px -10px rgba(239, 68, 68, 0.14), 0 0 0 1px rgba(239, 68, 68, 0.03) !important;
}
.solve-item:hover {
  background: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 12px 28px -8px rgba(239, 68, 68, 0.28) !important;
  transform: translateY(-2px) !important;
}
.solve-text {
  color: #0a0414 !important;
}

.style-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 32px -12px rgba(91, 33, 182, 0.15), 0 0 0 1px rgba(91, 33, 182, 0.04) !important;
}
.style-card:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.35) !important;
  box-shadow: 0 20px 48px -12px rgba(91, 33, 182, 0.28) !important;
  transform: translateY(-5px) !important;
}
.style-num {
  color: rgba(91, 33, 182, 0.28) !important;
}
.style-title {
  color: #0a0414 !important;
}
.style-text {
  color: rgba(20, 10, 40, 0.68) !important;
}

/* ── CTA BAND ───────────────────────────────────────────── */
.cta-band{
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(76,29,149,0.36) 0%, transparent 60%),
    linear-gradient(170deg, #fff 0%, #f5f0ff 50%, #e9defc 100%) !important;
  border-top:1px solid rgba(91,33,182,0.18) !important;
}
.cta-band::before{
  background:radial-gradient(ellipse, rgba(91,33,182,0.3) 0%, rgba(124,58,237,0.16) 40%, transparent 70%) !important;
}
.cta-band::after{
  background:radial-gradient(ellipse, rgba(124,58,237,0.18) 0%, transparent 70%) !important;
}
.cta-ring{border-color:rgba(91,33,182,0.18) !important}
.cta-ring-b{border-color:rgba(124,58,237,0.14) !important}
.cta-stat-val{
  background:linear-gradient(135deg,#3b0764,#7c3aed) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-weight:800 !important;
}
.cta-stat-label{color:rgba(20,10,40,0.55) !important;font-weight:600 !important}
.cta-stat-sep{background:rgba(91,33,182,0.22) !important}
.cta-band p{color:rgba(20,10,40,0.65) !important}
.cta-pill{
  background:rgba(255,255,255,0.6) !important;
  border:1px solid rgba(91,33,182,0.22) !important;
  color:rgba(20,10,40,0.65) !important;
  backdrop-filter:blur(8px);
}
.cta-pill:hover{border-color:#5b21b6 !important;color:#5b21b6 !important;background:#fff !important}
.cta-pill::before{background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;box-shadow:0 0 8px rgba(91,33,182,0.5) !important}

/* ── GENERIC GLASS / SECTION FALLBACKS for other pages ──── */
.r-glass, .h-glass, .svc-cat-card, .pricing-card, .pricing-faq-card,
.legal-card, .legal-article, .eng-grid > *, .pricing-grid > *{
  background:rgba(255,255,255,0.90) !important;
  border:1px solid rgba(91,33,182,0.14) !important;
  backdrop-filter:blur(14px) !important;
  box-shadow:0 8px 32px -12px rgba(91,33,182,0.14), 0 0 0 1px rgba(255,255,255,0.6) inset !important;
  color:#0a0414 !important;
}
.r-glass:hover, .h-glass:hover, .svc-cat-card:hover, .pricing-card:hover{
  background:rgba(255,255,255,1) !important;
  border-color:rgba(91,33,182,0.32) !important;
  box-shadow:0 20px 56px -12px rgba(91,33,182,0.28), 0 0 0 1px rgba(255,255,255,0.8) inset !important;
  transform:translateY(-4px) !important;
}
[data-spotlight]::after,
[data-spotlight]:hover::after{
  background:radial-gradient(360px circle at var(--spx, 50%) var(--spy, 50%), rgba(91,33,182,0.08), transparent 60%) !important;
}

/* Form inputs */
input, textarea, select{
  background:rgba(255,255,255,0.7) !important;
  border:1px solid rgba(91,33,182,0.2) !important;
  color:#0a0414 !important;
}
input:focus, textarea:focus, select:focus{
  border-color:#5b21b6 !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(91,33,182,0.14) !important;
}

/* Modal overlays — keep dark for contrast but switch frame to purple light */
#homeModal, #whyModal{
  background:rgba(20,10,40,0.55) !important;
}
#homeModalBox, #whyModalBox{
  background:linear-gradient(160deg, #ffffff 0%, #faf6ff 100%) !important;
  border:1px solid rgba(91,33,182,0.22) !important;
  box-shadow:0 40px 100px rgba(20,10,40,0.4), 0 0 0 1px rgba(91,33,182,0.08) !important;
  color:#0a0414 !important;
}
#homeModalBox h2, #whyModalBox h2,
#hm-title, #why-title{color:#0a0414 !important;font-family:'Bricolage Grotesque',sans-serif !important}
#homeModalBox p, #whyModalBox p,
#hm-overview, #hm-who, #hm-problems, #why-overview, #why-practice, #why-who, #why-what{color:rgba(20,10,40,0.68) !important}
#hm-label{color:#5b21b6 !important}
#hm-impact, #why-impact{color:#5b21b6 !important;font-family:'Bricolage Grotesque',sans-serif !important}
#homeModalBox [style*="background:rgba(0,0,0,0.25)"],
#whyModalBox [style*="background:rgba(0,0,0,0.25)"]{
  background:rgba(91,33,182,0.05) !important;
  border-color:rgba(91,33,182,0.12) !important;
}
#homeModalBox [style*="background:rgba(155,93,229,0.06)"],
#whyModalBox [style*="background:rgba(155,93,229,0.06)"]{
  background:rgba(91,33,182,0.07) !important;
  border-color:rgba(91,33,182,0.18) !important;
}
#homeModalBox [style*="linear-gradient(130deg,rgba(45,20,88"],
#whyModalBox [style*="linear-gradient(130deg,rgba(45,20,88"]{
  background:linear-gradient(135deg, rgba(91,33,182,0.08), rgba(124,58,237,0.05)) !important;
  border-color:rgba(91,33,182,0.18) !important;
}

/* Force dark text inside bright modals globally */
#homeModalBox *, #whyModalBox * {
  color: #0a0414 !important;
}
#homeModalBox [style*="color:rgba(196"],
#homeModalBox [style*="color:rgba(240"],
#whyModalBox [style*="color:rgba(196"],
#whyModalBox [style*="color:rgba(240"] {
  color: #5b21b6 !important; /* Headings in purple */
}
#hm-overview, #hm-who, #hm-problems, #why-overview, #why-practice, #why-who, #why-what,
#homeModalBox p, #whyModalBox p {
  color: rgba(20,10,40,0.68) !important; /* Body text in dark grey */
}
#hm-impact, #why-impact, #hm-label {
  color: #5b21b6 !important;
}
#homeModalBox a[href^="start-project"], #whyModalBox a[href^="start-project"] {
  color: #fff !important; /* Main CTA stays white text */
}
#homeModalBox a[href^="portfolio"], #whyModalBox a[href^="portfolio"] {
  color: #5b21b6 !important; /* Secondary CTA */
}
#homeModalBox span[style*="background:rgba(155"],
#whyModalBox span[style*="background:rgba(155"] {
  background: rgba(91,33,182,0.08) !important;
  border-color: rgba(91,33,182,0.2) !important;
  color: #5b21b6 !important; /* Tags dark purple text */
}
#homeModalBox button[onclick^="close"],
#whyModalBox button[onclick^="close"] {
  color: #0a0414 !important;
  border-color: rgba(91,33,182,0.2) !important;
}


/* ══════════════════════════════════════════════════════════
   BENTO CARD — NEW LAYOUT (bc-art + bc-text)
   ══════════════════════════════════════════════════════════ */
/* Hide old elements that may still be in DOM */
.bc .bc-illo { display:none !important; }
.bc .bc-icon { display:none !important; }
.bc .bc-shape { display:none !important; }

/* Art illustration: fills card top area */
.bc .bc-art {
  display:block !important;
  width:100% !important;
  flex:0 0 auto !important;
  margin-bottom:0.6rem !important;
  opacity:0.85 !important;
  transition:opacity 0.4s ease !important;
  position:relative !important;
  z-index:1 !important;
}
.bc:hover .bc-art { opacity:1 !important; }
.bc .bc-art svg {
  width:100% !important;
  height:auto !important;
  max-height:90px !important;
  display:block !important;
}

/* Text block: stacked at bottom */
.bc .bc-text {
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  gap:0.35rem !important;
  position:relative !important;
  z-index:2 !important;
  margin-top:auto !important;
}

/* Typography inside cards (purple gradient bg → white text) */
.bc .bc-title {
  color:#fff !important;
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(0.88rem,1.1vw,1rem) !important;
  letter-spacing:-0.02em !important;
  line-height:1.2 !important;
  text-shadow:0 2px 8px rgba(0,0,0,0.25) !important;
}
.bc .bc-desc {
  color:rgba(255,255,255,0.88) !important;
  font-size:0.75rem !important;
  line-height:1.45 !important;
}
.bc .bc-meta {
  color:rgba(255,255,255,0.65) !important;
  border-top:1px solid rgba(255,255,255,0.14) !important;
  padding-top:0.55rem !important;
  margin-top:0.5rem !important;
  font-size:0.62rem !important;
  letter-spacing:0.01em !important;
}

/* ══════════════════════════════════════════════════════════
   WHY-TILES (light card on light bg — dark text)
   ══════════════════════════════════════════════════════════ */
.why-grid {
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1rem !important;
  margin-top: 1.6rem !important;
}
.why-tile {
  min-height: auto !important;
  padding: clamp(1.2rem,1.8vw,1.6rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: relative !important;
}
.why-num {
  position: absolute !important;
  top: 1.2rem !important;
  right: 1.4rem !important;
  left: auto !important;
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: rgba(91, 33, 182, 0.08) !important;
  line-height: 1 !important;
  z-index: 1 !important;
}
.why-ring {
  margin-bottom: 1.1rem !important;
  position: relative !important;
  z-index: 2 !important;
}
.why-title {
  font-size: clamp(1.05rem,1.4vw,1.25rem) !important;
  color: #0a0414 !important;
  position: relative !important;
  z-index: 2 !important;
}
.why-text {
  font-size: 0.88rem !important;
  color: rgba(20,10,40,0.66) !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 1.2rem !important;
}
.why-detail {
  font-size: 0.78rem !important;
  color: rgba(20,10,40,0.5) !important;
  border-top: 1px solid rgba(91,33,182,0.12) !important;
  margin-top: auto !important; /* Pushes to bottom */
  padding-top: 0.85rem !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ══════════════════════════════════════════════════════════
   HOME PAGE — LIGHT-SECTION TEXT (white bg sections)
   Only targets sections that have a white/light bg
   ══════════════════════════════════════════════════════════ */

/* Section headings on home light bg */
.h-sec:not(.hero) .h-sec-head { color:#0a0414 !important; }
.h-sec:not(.hero) .h-sub { color:rgba(20,10,40,0.62) !important; }
.h-sec:not(.hero) .h-label { color:#5b21b6 !important; }

/* Home page text elements that sit on light background */
.h-sec-head em { color:#5b21b6 !important; }
.h-sub { color:rgba(20,10,40,0.62); }

/* FAQ */
.faq-btn { color:#0a0414 !important; }
.faq-btn:hover { color:#5b21b6 !important; }
.faq-body-inner { color:rgba(20,10,40,0.62) !important; }

/* Testimonials (light bg cards) */
.test-q { color:#0a0414 !important; }
.test-name { color:#0a0414 !important; }
.test-role { color:rgba(20,10,40,0.5) !important; }

/* Process nodes on light bg */
.p-num { color:#5b21b6 !important; font-size:0.72rem !important; }
.p-label { color:#0a0414 !important; font-size:1rem !important; }
.p-desc { color:rgba(20,10,40,0.55) !important; font-size:0.73rem !important; }
.p-ring { background:#ffffff !important; border:1.5px solid rgba(91,33,182,0.28) !important; }
.process-wrap { margin-top:1.5rem !important; }

/* Why-retrix section heading (light bg) */
.h-sec .h-sec-head { color:#0a0414 !important; }

/* Trust strip */
.trust-item { color:rgba(20,10,40,0.6) !important; }
.trust-item:hover { color:#5b21b6 !important; }

/* Work cards — text on top of DARK overlay, keep white */
.wc-title { color:#fff !important; }
.wc-result { color:rgba(255,255,255,0.82) !important; }
.wc-tag { color:rgba(255,255,255,0.9) !important; }

/* Home CTA band — LIGHT gradient bg → DARK text */
.cta-band h2, .cta-band .h-sec-head { color:#0a0414 !important; }
.cta-band .h-label { color:#5b21b6 !important; }
/* cta-stat-val uses gradient clip, cta-stat-label already set at line 544 */
/* cta-band p and cta-pill already correctly set with dark colors above */

/* Pagination dots */
#cw-dots button, #faq-dots button { background:rgba(91,33,182,0.2) !important; }

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE — dark-bg sections keep white text
   ══════════════════════════════════════════════════════════ */

/* Principle cards (dark gradient bg) */
.principle-card .principle-title { color:#fff !important; }
.principle-card .principle-text { color:rgba(240,234,248,0.68) !important; }
.principle-card .principle-num { color:rgba(155,93,229,0.08) !important; }

/* Value cards (semi-transparent dark bg) */
.val-card .val-title { color:#fff !important; }
.val-card .val-text { color:rgba(240,234,248,0.62) !important; }
.val-card .val-icon svg { stroke:#c49bff !important; }

/* Team cards — names/roles over dark photo overlay */
.team-name { color:#fff !important; }
.team-role { color:#c49bff !important; }
.team-intro { color:rgba(240,234,248,0.72) !important; }
.team-detail-item { color:rgba(240,234,248,0.55) !important; }

/* Page CTA band — bright, light purple/lavender gradient */
.p-cta-band {
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(76,29,149,0.36) 0%, transparent 60%),
    linear-gradient(170deg, #fff 0%, #f5f0ff 50%, #e9defc 100%) !important;
  border-top:1px solid rgba(91,33,182,0.18) !important;
}
.p-cta-band::before {
  background: radial-gradient(ellipse, rgba(91,33,182,0.3) 0%, rgba(124,58,237,0.16) 40%, transparent 70%) !important;
}
.p-cta-band, .p-cta-inner {
  color: #0a0414 !important;
}
.p-cta-band h2, .p-cta-inner h2,
.p-cta-band .p-h2, .p-cta-inner .p-h2 {
  color: #0a0414 !important;
}
.p-cta-band p, .p-cta-inner p,
.p-cta-band .p-sub, .p-cta-inner .p-sub {
  color: rgba(20, 10, 40, 0.68) !important;
}
.p-cta-band .p-label, .p-cta-inner .p-label {
  color: #5b21b6 !important;
  font-weight: 700 !important;
}

/* About/inner hero section (light bg) */
.p-sec.hero h1, .p-sec.hero .p-h1 { color:#0a0414 !important; }
.p-sec.hero p, .p-sec.hero .p-sub { color:rgba(20,10,40,0.62) !important; }

/* Story section (light bg) */
.story-text p { color:rgba(20,10,40,0.62) !important; }
.team-stat-val { color:#0a0414 !important; }
.team-stat-label { color:#5b21b6 !important; }

/* Principle/values section headings — on light bg */
.p-sec .p-h2 { color:#0a0414 !important; }
.p-sec .p-h3 { color:#0a0414 !important; }
.p-sec .p-sub { color:rgba(20,10,40,0.62) !important; }
.p-sec .p-label { color:#5b21b6 !important; }
.p-sec .p-text { color:rgba(20,10,40,0.62) !important; }
.p-badge { color:#5b21b6 !important; background:rgba(91,33,182,0.06) !important; border:1px solid rgba(91,33,182,0.15) !important; }

/* ══════════════════════════════════════════════════════════
   SERVICES PAGE — cards on light bg
   ══════════════════════════════════════════════════════════ */

/* Benefit/feature cards on services page (white card) */
.sb-card-title, [class*="benefit"] h3,
[class*="feature"] h3 { color:#0a0414 !important; }
[class*="benefit"] p, [class*="feature"] p { color:rgba(20,10,40,0.62) !important; }

/* Process steps on services page — white cards */
[class*="process"] .p-title,
[class*="step"] h3 { color:#0a0414 !important; }
[class*="process"] .p-desc,
[class*="step"] p { color:rgba(20,10,40,0.60) !important; }

/* ══════════════════════════════════════════════════════════
   HEADER DROPDOWN PANEL — dark panel → bright text
   NOTE: .hd-link is the top navbar link (light header bg = dark text)
         Only dropdown ITEM text (.hdi-text) gets bright colours.
   ══════════════════════════════════════════════════════════ */
.hd-drop-panel { background:rgba(10,6,22,0.96) !important; }
.hdi-text strong { color:#ffffff !important; }
.hdi-text em { color:rgba(240,234,248,0.8) !important; }
/* Nav bar links: header has translucent light bg → dark text */
.hd-link { color:rgba(20,10,40,0.75) !important; font-weight:600 !important; }
.hd-link:hover, .hd-link.active { color:#5b21b6 !important; }
.hd-drop-btn { color:rgba(20,10,40,0.75) !important; font-weight:600 !important; }
.hd-drop-btn:hover { color:#5b21b6 !important; }

/* ══════════════════════════════════════════════════════════
   FOOTER — always dark bg → bright text
   ══════════════════════════════════════════════════════════ */
footer, .ft-wrap, .ft-inner { color:rgba(240,234,248,0.75); }
footer h2, footer h3, footer h4, .ft-wrap h2 { color:#fff !important; }
footer a, .ft-wrap a { color:rgba(240,234,248,0.65) !important; }
footer a:hover, .ft-wrap a:hover { color:#fff !important; }

/* ══════════════════════════════════════════════════════════
   AI CHAT WIDGET — always dark panel, bright text
   ══════════════════════════════════════════════════════════ */
.retrix-ai-panel, .retrix-ai-panel * { color:#fff; }
.retrix-ai-bubble { color:#fff !important; }
.retrix-ai-message--user .retrix-ai-bubble { color:#fff !important; }
.retrix-ai-brand-copy strong { color:#fff !important; }
.retrix-ai-brand-copy span { color:rgba(255,255,255,0.65) !important; }
.retrix-ai-input { color:#fff !important; }
.retrix-ai-input::placeholder { color:rgba(255,255,255,0.35) !important; }
.retrix-ai-prompt { color:#fff !important; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media(max-width:1400px){
  .bento{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr) !important}
  .bc.wide, .bc.full{grid-column:span 2 !important}
  .why-grid{grid-template-columns:1fr !important}
}
@media(max-width:600px){
  .bento{grid-template-columns:1fr !important}
  .bc.wide, .bc.full{grid-column:span 1 !important}
  .h-hero-head{font-size:clamp(2.2rem,9vw,3.6rem) !important}
  .bc, .bc.wide, .bc.full{min-height:200px !important}
  .bc .bc-art svg{max-height:70px !important}
}
@media (min-width: 1025px) {
  .bento {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .bc, .bc.wide, .bc.full {
    grid-column: span 1 !important;
    min-height: 190px !important;
    padding: 0.95rem 0.8rem !important;
  }
  .bc .bc-art svg {
    max-height: 48px !important;
    margin-inline: auto !important;
  }
  .bc .bc-title {
    font-size: 0.85rem !important;
    margin-top: 0.25rem !important;
    text-align: center !important;
  }
  .bc .bc-desc {
    font-size: 0.7rem !important;
    text-align: center !important;
    opacity: 0.8 !important;
  }
  .bc .bc-meta {
    font-size: 0.58rem !important;
    padding-top: 0.45rem !important;
    margin-top: auto !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════
   DEFINITIVE GLOBAL CONTRAST RULES
   Rule: LIGHT BG → dark text | DARK BG → keep its own white text
   This block is LAST so it wins over earlier rules.
   ══════════════════════════════════════════════════════════ */

:root {
  --text-main: #0a0414 !important;
  --text-muted: rgba(20, 10, 40, 0.72) !important;
  --text-soft: rgba(20, 10, 40, 0.55) !important;
}

#caseModal, #svcPanel, footer, .ft-wrap, .ft-inner, .retrix-ai-panel, .bc, .principle-card {
  --text-main: #ffffff !important;
  --text-muted: rgba(240, 234, 248, 0.75) !important;
  --text-soft: rgba(240, 234, 248, 0.55) !important;
  --c-white: #ffffff !important;
  --c-muted: rgba(240, 234, 248, 0.75) !important;
  --c-faint: rgba(240, 234, 248, 0.50) !important;
}


/* ── WHITE/LIGHT GLASS CARDS (any page) ─────────────────── */
/* These card types have light/white/frosted backgrounds */
.why-tile h3, .why-tile p, .why-tile span,
.faq-item, .faq-btn, .faq-body-inner,
.test-card, .test-q, .test-name, .test-role,
.pricing-card:not(.pricing-card--dark) h2,
.pricing-card:not(.pricing-card--dark) h3,
.pricing-card:not(.pricing-card--dark) p,
.pricing-card:not(.pricing-card--dark) li,
.legal-card, .legal-card h2, .legal-card h3, .legal-card p,
.r-glass h2, .r-glass h3, .r-glass p,
.svc-cat-card h3, .svc-cat-card p {
  color: #0a0414 !important;
}

/* ── CTA BAND (light lavender bg) ───────────────────────── */
.cta-band { color: #0a0414; }
.cta-band .h-sec-head,
.cta-band h1, .cta-band h2, .cta-band h3 { color: #0a0414 !important; }
.cta-band p { color: rgba(20,10,40,0.68) !important; }
.cta-band .h-label { color: #5b21b6 !important; }
.cta-band .cta-stat-label { color: rgba(20,10,40,0.55) !important; }
/* cta-stat-val uses bg-clip gradient — do NOT override */
.cta-pill { color: rgba(20,10,40,0.7) !important; }

/* ── HOME LIGHT SECTIONS (why, testimonials, faq, process) ─ */
.h-sec:not(.hero) h2,
.h-sec:not(.hero) h3,
.h-sec:not(.hero) .h-sec-head { color: #0a0414 !important; }
.h-sec:not(.hero) p,
.h-sec:not(.hero) .h-sub { color: rgba(20,10,40,0.64) !important; }
.h-sec:not(.hero) .h-label { color: #5b21b6 !important; }

/* ── PROCESS SECTION (light bg) ─────────────────────────── */
.process-node .p-label,
.process-step h3 { color: #0a0414 !important; }
.process-node .p-desc,
.process-step p { color: rgba(20,10,40,0.58) !important; }
.p-ring { background: #fff !important; border-color: rgba(91,33,182,0.25) !important; }

/* ── SERVICES PAGE BENEFIT/FEATURE CARDS ────────────────── */
.svc-benefit h3, .svc-feature h3, .sb-card-title { color: #0a0414 !important; }
.svc-benefit p, .svc-feature p, .sb-card-text { color: rgba(20,10,40,0.62) !important; }

/* ── ABOUT PAGE LIGHT SECTIONS ──────────────────────────── */
/* story section — sits on light bg */
.story-text p { color: rgba(20,10,40,0.62) !important; }

/* principle cards (dark gradient bg) → keep bright text */
.principle-card * { color: inherit; }
.principle-title { color: #fff !important; }
.principle-text { color: rgba(240,234,248,0.68) !important; }

/* value cards are frosted light lavender in light theme */
.val-card {
  background: rgba(91, 33, 182, 0.04) !important;
  border: 1px solid rgba(91, 33, 182, 0.12) !important;
}
.val-card:hover {
  background: rgba(91, 33, 182, 0.08) !important;
  border-color: rgba(91, 33, 182, 0.28) !important;
}
.val-card .val-title { color: #0a0414 !important; }
.val-card .val-text { color: rgba(20,10,40,0.62) !important; }
.val-card .val-icon svg { stroke: #5b21b6 !important; }

/* ── HEADER DROPDOWN (dark panel) ───────────────────────── */
.hd-drop-panel {
  background: rgba(10, 6, 22, 0.98) !important;
  border: 1px solid rgba(200, 170, 255, 0.15) !important;
}
.hd-drop-item {
  color: rgba(240, 234, 248, 0.85) !important;
}
.hd-drop-item:hover {
  background: rgba(155, 93, 229, 0.12) !important;
  border-color: rgba(155, 93, 229, 0.22) !important;
}
.hdi-text strong {
  color: #ffffff !important;
}
.hdi-text em {
  color: rgba(240, 234, 248, 0.8) !important;
}
.hdi-icon {
  background: rgba(155, 93, 229, 0.15) !important;
}
.hdi-icon svg {
  stroke: #c49bff !important;
}

/* ── MODALS (usually dark bg) ───────────────────────────── */
#homeModal, #whyModal, #homeModal *, #whyModal * { color: inherit; }
.modal-title { color: #fff !important; }
.modal-overview, .modal-sub { color: rgba(240,234,248,0.75) !important; }

/* ── TRUST STRIP ─────────────────────────────────────────── */
.trust-item { color: rgba(20,10,40,0.55) !important; }

/* ── WORK CARDS (dark photo overlay) ────────────────────── */
.wc-title { color: #fff !important; }
.wc-result { color: rgba(255,255,255,0.82) !important; }
.wc-tag { color: rgba(255,255,255,0.88) !important; }

/* ── FAQ CARDS (light bg) ───────────────────────────────── */
.faq-btn { color: #0a0414 !important; }
.faq-btn:hover { color: #5b21b6 !important; }
.faq-body-inner { color: rgba(20,10,40,0.62) !important; }

/* ── TESTIMONIALS (white card) ──────────────────────────── */
.test-q { color: #0a0414 !important; }
.test-name { color: #0a0414 !important; }
.test-role { color: rgba(20,10,40,0.5) !important; }

/* ── FOOTER (dark bg) ───────────────────────────────────── */
footer *, .ft-inner * { color: inherit; }
footer p, .ft-inner p { color: rgba(240,234,248,0.6) !important; }
footer a, .ft-inner a { color: rgba(240,234,248,0.65) !important; }
footer h3, footer h4, .ft-inner h3 { color: #fff !important; }

/* ── AI CHAT PANEL (always dark) ────────────────────────── */
.retrix-ai-shell * { color: inherit; }

/* ── SERVICES MODAL DETAIL PANEL (#svcPanel overrides REMOVED FOR BRIGHT THEME) ──── */

/* ── PORTFOLIO V2 CASE STUDY MODAL OVERRIDES (REMOVED FOR BRIGHT THEME) ── */

/* ── PRICING CARD OVERRIDES (pricing.html) ────────────────── */
.pr-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 10px 30px rgba(91, 33, 182, 0.05) !important;
  color: #0a0414 !important;
}
.pr-card:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.32) !important;
  box-shadow: 0 14px 44px rgba(91, 33, 182, 0.12) !important;
}
.pr-card .pr-name,
.pr-card .pr-amount {
  color: #0a0414 !important;
}
.pr-card .pr-desc,
.pr-card .pr-features li {
  color: rgba(20, 10, 40, 0.68) !important;
}
.pr-card .pr-features li svg {
  stroke: #5b21b6 !important;
}
.pr-card .pr-features li.dim {
  color: rgba(20, 10, 40, 0.42) !important;
}
.pr-card .pr-features li.dim svg {
  stroke: rgba(91, 33, 182, 0.28) !important;
}
.pr-card .pr-cta-outline {
  background: transparent !important;
  color: #5b21b6 !important;
  border-color: rgba(91, 33, 182, 0.28) !important;
}
.pr-card .pr-cta-outline:hover {
  background: rgba(91, 33, 182, 0.08) !important;
  border-color: #5b21b6 !important;
}

/* Featured card: keep it dark purple gradient with FULLY bright white text */
.pr-card.featured {
  background: linear-gradient(155deg, #4c1d95, #2e1065) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  box-shadow: 0 0 0 1px rgba(167,139,250,0.2), 0 18px 56px rgba(45, 20, 88, 0.45) !important;
  color: #ffffff !important;
  --c-white: #ffffff !important;
  --c-muted: rgba(240, 234, 248, 0.85) !important;
  --c-faint: rgba(240, 234, 248, 0.6) !important;
  --c-purple-lt: #c49bff !important;
  --c-purple: #c49bff !important;
}
/* Ensure ALL children in featured card are white — override dark rules from above */
.pr-card.featured .pr-eyebrow { color: #c49bff !important; }
.pr-card.featured .pr-name { color: #ffffff !important; }
.pr-card.featured .pr-desc { color: rgba(240, 234, 248, 0.85) !important; }
.pr-card.featured .pr-amount { color: #ffffff !important; }
.pr-card.featured .pr-period { color: rgba(240, 234, 248, 0.65) !important; }
.pr-card.featured .pr-note { color: rgba(240, 234, 248, 0.6) !important; }
.pr-card.featured .pr-divider { background: rgba(255,255,255,0.14) !important; }
.pr-card.featured .pr-features li { color: rgba(240, 234, 248, 0.9) !important; }
.pr-card.featured .pr-features li svg { stroke: #c49bff !important; }
.pr-card.featured .pr-badge-featured { color: #ffffff !important; }
.pr-card.featured svg { stroke: #c49bff !important; }
.pr-card.featured .pr-cta-primary {
  background: #ffffff !important;
  color: #4c1d95 !important;
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.2) !important;
}
.pr-card.featured .pr-cta-primary:hover {
  background: #f5f3ff !important;
  color: #3b0764 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3) !important;
}
/* Remove the generic inherit override as explicit rules handle it */


/* Engagement Cards (pricing.html) */
.eng-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 10px 30px rgba(91, 33, 182, 0.05) !important;
}
.eng-card:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.32) !important;
  box-shadow: 0 14px 44px rgba(91, 33, 182, 0.12) !important;
}
.eng-card .eng-title {
  color: #0a0414 !important;
}
.eng-card .eng-desc {
  color: rgba(20, 10, 40, 0.68) !important;
}
.eng-card .eng-meta span {
  color: rgba(20, 10, 40, 0.55) !important;
}

/* ── PRICING FAQ ACCORDION (pricing.html) ─────────────────── */
.pfaq-list {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 10px 30px rgba(91, 33, 182, 0.05) !important;
}
.pfaq-item {
  border-bottom-color: rgba(91, 33, 182, 0.1) !important;
}
.pfaq-btn {
  color: #0a0414 !important;
}
.pfaq-btn:hover {
  color: #5b21b6 !important;
}
.pfaq-chev {
  stroke: rgba(91, 33, 182, 0.6) !important;
}
.pfaq-item.open .pfaq-chev {
  stroke: #5b21b6 !important;
}
.pfaq-body-inner {
  color: rgba(20, 10, 40, 0.62) !important;
}

/* ── FAQ PAGE ACCORDION & NAV (faq.html) ──────────────────── */
.faq-nav {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 10px 30px rgba(91, 33, 182, 0.05) !important;
}
.faq-nav-btn {
  color: rgba(20, 10, 40, 0.62) !important;
}
.faq-nav-btn:hover {
  background: rgba(91, 33, 182, 0.06) !important;
  color: #5b21b6 !important;
}
.faq-nav-btn.active {
  background: rgba(91, 33, 182, 0.08) !important;
  color: #5b21b6 !important;
  box-shadow: 0 0 0 1px rgba(91, 33, 182, 0.16) !important;
}
.faq-group-title {
  color: #0a0414 !important;
  border-bottom-color: rgba(91, 33, 182, 0.14) !important;
}
.faq-item {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 6px 20px rgba(91, 33, 182, 0.03) !important;
}
.faq-item:hover, .faq-item.open {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.32) !important;
  box-shadow: 0 10px 30px rgba(91, 33, 182, 0.08) !important;
}
.faq-q {
  color: #0a0414 !important;
}
.faq-q:hover {
  color: #5b21b6 !important;
}
.faq-sym {
  background: rgba(91, 33, 182, 0.06) !important;
  border-color: rgba(91, 33, 182, 0.16) !important;
}
.faq-sym svg {
  stroke: #5b21b6 !important;
}
.faq-item.open .faq-sym {
  background: #5b21b6 !important;
  border-color: #5b21b6 !important;
}
.faq-item.open .faq-sym svg {
  stroke: #ffffff !important;
}

/* ── START PROJECT PAGE OVERRIDES (start-project.html) ───── */
.sp-form-card,
.sp-proof-item {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 10px 30px rgba(91, 33, 182, 0.05) !important;
}
.sp-proof-item:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.32) !important;
  box-shadow: 0 14px 44px rgba(91, 33, 182, 0.12) !important;
}
.sp-form-head,
.sp-proof-title {
  color: #0a0414 !important;
}
.sp-form-sub,
.sp-proof-text {
  color: rgba(20, 10, 40, 0.68) !important;
}
.form-label {
  color: #5b21b6 !important;
}
.sp-proof-icon svg {
  stroke: #5b21b6 !important;
  fill: none !important;
}
.sp-stat-val {
  background: linear-gradient(135deg, #0a0414, #5b21b6) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.sp-stat-label {
  color: rgba(20, 10, 40, 0.55) !important;
}
.form-note {
  color: rgba(20, 10, 40, 0.55) !important;
}
.form-select option {
  background: #ffffff !important;
  color: #0a0414 !important;
}

/* ── PORTFOLIO PAGES OVERRIDES (portfolio-v2.html, portfolio.html) ── */
.filter-btn {
  color: rgba(20, 10, 40, 0.65) !important;
}
.filter-btn:hover {
  background: rgba(91, 33, 182, 0.06) !important;
  color: #5b21b6 !important;
}
.filter-btn.active {
  background: rgba(91, 33, 182, 0.08) !important;
  color: #5b21b6 !important;
  border-color: rgba(91, 33, 182, 0.16) !important;
}

/* Portfolio cards in portfolio-v2.html */
.port-card {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.12) !important;
  box-shadow: 0 10px 40px -10px rgba(91, 33, 182, 0.04) !important;
}
.port-card:hover {
  background: #ffffff !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  box-shadow: 0 20px 45px -12px rgba(124, 58, 237, 0.08) !important;
}

/* Legacy portfolio page cards in portfolio.html */
.pf-overlap-card,
.pf-track-card,
.pf-feature-card,
.pf-archive-card,
.pf-mini-card {
  --c-white: #ffffff !important;
  --c-muted: rgba(240, 234, 248, 0.85) !important;
  --c-faint: rgba(240, 234, 248, 0.6) !important;
  --c-purple-lt: #c49bff !important;
  color: #ffffff !important;
}
.pf-overlap-card *,
.pf-track-card *,
.pf-feature-card *,
.pf-archive-card *,
.pf-mini-card * {
  color: inherit !important;
}
.pf-card-title,
.pf-card-summary,
.pf-result-val,
.pf-result-label {
  color: #ffffff !important;
}
.pf-card-topline span:first-child {
  color: #c49bff !important;
}

/* Legacy portfolio page variables override to align with light theme */
:root {
  --pf-bg: #ffffff !important;
  --pf-bg-2: #f5f0ff !important;
  --pf-bg-3: #e9defc !important;
  --pf-surface: rgba(255, 255, 255, 0.90) !important;
  --pf-surface-2: rgba(255, 255, 255, 0.95) !important;
  --pf-surface-3: rgba(245, 240, 255, 0.90) !important;
  --pf-line: rgba(91, 33, 182, 0.14) !important;
  --pf-line-strong: rgba(91, 33, 182, 0.28) !important;
  --pf-text: #0a0414 !important;
  --pf-muted: rgba(20, 10, 40, 0.68) !important;
  --pf-soft: rgba(20, 10, 40, 0.55) !important;
  --pf-lilac: #5b21b6 !important;
  --pf-rose: #7c3aed !important;
  --pf-blue: #3b0764 !important;
}

/* Portfolio page CTA bright theme override */
.pf-cta {
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(76,29,149,0.36) 0%, transparent 60%),
    linear-gradient(170deg, #fff 0%, #f5f0ff 50%, #e9defc 100%) !important;
  border: 1px solid rgba(91,33,182,0.18) !important;
}
.pf-cta::after {
  background: radial-gradient(circle, rgba(91,33,182,0.16) 0%, transparent 70%) !important;
}
.pf-cta .eyebrow {
  color: #5b21b6 !important;
  font-weight: 700 !important;
}
.pf-cta .pf-section-title {
  color: #0a0414 !important;
}
.pf-cta .pf-body-lg {
  color: rgba(20, 10, 40, 0.68) !important;
}
/* Ensure the primary button has white text on portfolio.html */
.pf-btn-primary {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   SERVICES PAGE — COMPREHENSIVE BRIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════ */

/* Fix embedded dark header override on services/pricing/portfolio pages */
#site-header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 2px 24px rgba(91, 33, 182, 0.07) !important;
}
#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom-color: rgba(91, 33, 182, 0.22) !important;
  box-shadow: 0 4px 32px rgba(91, 33, 182, 0.10) !important;
}

/* Override embedded dark logo text in per-page style blocks */
.hd-logo-dot {
  background: linear-gradient(135deg, #5b21b6, #a78bfa) !important;
  box-shadow: 0 0 14px rgba(91, 33, 182, 0.65) !important;
}
.hd-logo-text { color: #0a0414 !important; }
.hd-logo-sub { color: rgba(20, 10, 40, 0.45) !important; }

/* Fix embedded hd-link dark colors */
.hd-link,
.hd-drop-btn {
  color: rgba(20, 10, 40, 0.75) !important;
  font-weight: 600 !important;
}
.hd-link:hover,
.hd-link.active,
.hd-drop-btn:hover { color: #5b21b6 !important; background: rgba(91, 33, 182, 0.07) !important; }
.hd-cta {
  background: linear-gradient(135deg, #3b0764, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -6px rgba(91, 33, 182, 0.45) !important;
}
.hd-cta:hover {
  background: linear-gradient(135deg, #4c1d95, #a78bfa) !important;
  box-shadow: 0 14px 36px -8px rgba(91, 33, 182, 0.6) !important;
}
.hd-menu-btn {
  background: rgba(91, 33, 182, 0.06) !important;
  border-color: rgba(91, 33, 182, 0.16) !important;
}
.hd-menu-btn svg { stroke: #0a0414 !important; }
@media (max-width: 960px) {
  .hd-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top-color: rgba(91, 33, 182, 0.12) !important;
  }
}

/* ── SERVICES CATEGORY CARDS (bright, white glass) ────────── */
.svc-cat-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 8px 32px -10px rgba(91, 33, 182, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
  color: #0a0414 !important;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.svc-cat-card:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.3) !important;
  box-shadow: 0 24px 60px -12px rgba(91, 33, 182, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
  transform: translateY(-6px) !important;
}
.svc-cat-title { color: #0a0414 !important; }
.svc-cat-desc { color: rgba(20, 10, 40, 0.66) !important; }
.svc-cat-problem { color: rgba(20, 10, 40, 0.5) !important; }
.svc-cat-problem span { color: #5b21b6 !important; }
.svc-cat-icon {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.1), rgba(124, 58, 237, 0.06)) !important;
  border-color: rgba(91, 33, 182, 0.18) !important;
}
.svc-cat-icon svg { stroke: #5b21b6 !important; }
.explore-btn {
  background: rgba(91, 33, 182, 0.06) !important;
  border-color: rgba(91, 33, 182, 0.2) !important;
  color: #5b21b6 !important;
}
.svc-cat-card:hover .explore-btn {
  background: #5b21b6 !important;
  color: #fff !important;
  border-color: #5b21b6 !important;
}

/* ── IMPACT CARDS (bright, white glass) ───────────────────── */
.impact-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 8px 32px -10px rgba(91, 33, 182, 0.12) !important;
  color: #0a0414 !important;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.impact-card:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.28) !important;
  box-shadow: 0 20px 56px -12px rgba(91, 33, 182, 0.22) !important;
  transform: translateY(-4px) !important;
}
.impact-title { color: #0a0414 !important; }
.impact-txt { color: rgba(20, 10, 40, 0.68) !important; }
.impact-icon svg { stroke: #5b21b6 !important; }
.impact-icon { color: #5b21b6 !important; }

/* ── PROCESS STEPS (bright, white glass) ──────────────────── */
.proc-step {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 8px 24px -8px rgba(91, 33, 182, 0.10) !important;
  color: #0a0414 !important;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.proc-step:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.28) !important;
  box-shadow: 0 16px 48px -12px rgba(91, 33, 182, 0.20) !important;
  transform: translateY(-4px) !important;
}
.proc-label { color: #0a0414 !important; }
.proc-desc { color: rgba(20, 10, 40, 0.66) !important; }
.proc-num { color: rgba(91, 33, 182, 0.12) !important; }

/* ── SERVICES FAQ LITE (faq-lite-item) ────────────────────── */
.faq-lite-item { border-bottom-color: rgba(91, 33, 182, 0.12) !important; }
.faq-lite-item h4 { color: #0a0414 !important; }
.faq-lite-item p { color: rgba(20, 10, 40, 0.66) !important; }

/* ── SECTION HEADINGS on bright bg (p-h1, p-h2, p-sub) ────── */
.p-h1, .p-h2, .p-h3, .p-h4 { color: #0a0414 !important; }
.p-h1 em, .p-h2 em, .p-h3 em { color: #5b21b6 !important; font-style: italic !important; }
.p-sub { color: rgba(20, 10, 40, 0.66) !important; }
.p-label {
  color: #5b21b6 !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
}

/* ── ABOUT + INNER PAGES section headings ─────────────────── */
.p-sec .p-h1,
.p-sec .p-h2,
.p-sec .p-h3 { color: #0a0414 !important; }
.p-sec .p-sub { color: rgba(20, 10, 40, 0.66) !important; }

/* ══════════════════════════════════════════════════════════
   SERVICES HERO REDESIGN — via CSS overrides
   ══════════════════════════════════════════════════════════ */

/* Make hero section taller and more impactful */
.svc-hero {
  padding-top: clamp(5rem, 10vh, 8rem) !important;
  padding-bottom: clamp(4rem, 8vh, 6rem) !important;
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Hero background accent glows */
.svc-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -10% !important; left: -5% !important;
  width: 55% !important; height: 80% !important;
  background: radial-gradient(ellipse, rgba(167, 139, 250, 0.18) 0%, rgba(91, 33, 182, 0.06) 40%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(40px) !important;
}
.svc-hero::after {
  content: '' !important;
  position: absolute !important;
  top: 20% !important; right: -5% !important;
  width: 45% !important; height: 70% !important;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.12) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(50px) !important;
}

/* Ensure hero content is above ::before/::after */
.svc-hero .p-wrap { position: relative !important; z-index: 1 !important; }

/* Hero text — dark on light */
.svc-hero-text .p-h1 {
  font-size: clamp(2.8rem, 5.2vw, 5rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: #0a0414 !important;
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
}
.svc-hero-text .p-h1 em {
  color: #5b21b6 !important;
  font-style: italic !important;
}
.svc-hero-text .p-sub {
  color: rgba(20, 10, 40, 0.66) !important;
  font-size: clamp(1rem, 1.3vw, 1.18rem) !important;
  line-height: 1.7 !important;
  max-width: 52ch !important;
}
.svc-hero-text .p-label {
  color: #5b21b6 !important;
  background: rgba(91, 33, 182, 0.08) !important;
  border: 1px solid rgba(91, 33, 182, 0.18) !important;
  padding: 6px 14px 6px 12px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 1.5rem !important;
}

/* ── SERVICES ARCH VISUAL — bright redesign ───────────────── */
.svc-arch-visual {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(91, 33, 182, 0.16) !important;
  box-shadow: 0 20px 60px -16px rgba(91, 33, 182, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 28px !important;
  padding: 2.5rem 2rem !important;
  position: relative !important;
  overflow: visible !important;
}
/* Decorative glow inside arch visual */
.svc-arch-visual::before {
  content: '' !important;
  position: absolute !important;
  top: -30% !important; right: -20% !important;
  width: 70% !important; height: 70% !important;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.2), transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Redesigned interactive visual network */
.svc-arch-canvas {
  position: relative !important;
  width: 100% !important;
  height: 450px !important;
  overflow: visible !important;
}
.svc-arch-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.track-line {
  stroke: rgba(91, 33, 182, 0.05) !important;
  stroke-width: 1.5 !important;
  transition: stroke 0.3s ease, stroke-width 0.3s ease !important;
}
.pulse-line {
  stroke: rgba(124, 58, 237, 0.6) !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 8 28 !important;
  animation: pulseFlow 4s linear infinite !important;
  transition: stroke 0.3s ease, stroke-width 0.3s ease !important;
}
@keyframes pulseFlow {
  to {
    stroke-dashoffset: -72;
  }
}
/* Stagger the animations slightly */
.pulse-1 { animation-duration: 2.8s !important; }
.pulse-2 { animation-duration: 3.2s !important; }
.pulse-3 { animation-duration: 3s !important; }
.pulse-4 { animation-duration: 3.6s !important; }
.pulse-5 { animation-duration: 3.4s !important; }

/* Orbital Rings Styling */
.orbital-ring {
  stroke: rgba(91, 33, 182, 0.035) !important;
  stroke-width: 1 !important;
  stroke-dasharray: 4 8 !important;
  fill: none !important;
  transform-origin: 50px 50px !important;
  animation: rotateOrbit 25s linear infinite !important;
}
.orbital-ring.o-2 {
  animation-duration: 40s !important;
  animation-direction: reverse !important;
  stroke-dasharray: 6 12 !important;
}
.orbital-ring.o-3 {
  animation-duration: 55s !important;
  stroke-dasharray: 3 6 !important;
}
@keyframes rotateOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Core Center Node Styling */
.node-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2e0854, #7c3aed) !important;
  border: 2px solid rgba(167, 139, 250, 0.5) !important;
  box-shadow: 0 0 35px rgba(124, 58, 237, 0.4), 0 0 0 8px rgba(91, 33, 182, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  cursor: default !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.node-center:hover {
  transform: translate(-50%, -50%) scale(1.06) !important;
  box-shadow: 0 0 55px rgba(124, 58, 237, 0.6), 0 0 0 12px rgba(91, 33, 182, 0.08) !important;
}
.nc-glow {
  position: absolute !important;
  inset: -15px !important;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 70%) !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  animation: ncGlow 4s ease-in-out infinite alternate !important;
}
@keyframes ncGlow {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 1; }
}
.nc-mini {
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  opacity: 0.85 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}
.nc-main {
  font-family: 'Bricolage Grotesque', 'Playfair Display', serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}
.nc-pulse {
  position: absolute !important;
  inset: -6px !important;
  border: 1px solid rgba(167, 139, 250, 0.25) !important;
  border-radius: 50% !important;
  animation: ncRadar 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite !important;
  pointer-events: none !important;
}
.nc-pulse-2 {
  position: absolute !important;
  inset: -6px !important;
  border: 1px solid rgba(167, 139, 250, 0.15) !important;
  border-radius: 50% !important;
  animation: ncRadar 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite !important;
  animation-delay: 1.25s !important;
  pointer-events: none !important;
}
@keyframes ncRadar {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Outer Nodes Styling */
.node-outer {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(91, 33, 182, 0.12) !important;
  box-shadow: 0 10px 30px rgba(91, 33, 182, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 5 !important;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  cursor: pointer !important;
}
.node-outer:hover {
  transform: translate(-50%, -50%) translateY(-5px) scale(1.04) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 36px -8px rgba(91, 33, 182, 0.15), 0 0 0 1px rgba(255, 255, 255, 1) inset !important;
}
.no-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}
.no-icon svg {
  transition: all 0.3s ease !important;
}
.no-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #0a0414 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* Custom interactive triggers using :has() */
.svc-arch-canvas:has(.n-brand:hover) .track-1 { stroke: rgba(124, 58, 237, 0.22) !important; stroke-width: 2px !important; }
.svc-arch-canvas:has(.n-brand:hover) .pulse-1 { stroke: #7c3aed !important; stroke-width: 2.2px !important; filter: url(#glow-filter) !important; animation-duration: 1.4s !important; }
.node-outer.n-brand .no-icon { background: rgba(124, 58, 237, 0.08) !important; }
.node-outer.n-brand .no-icon svg { color: #7c3aed !important; }
.node-outer.n-brand:hover { border-color: #7c3aed !important; }
.node-outer.n-brand:hover .no-icon { background: #7c3aed !important; }
.node-outer.n-brand:hover .no-icon svg { color: #ffffff !important; }

.svc-arch-canvas:has(.n-web:hover) .track-2 { stroke: rgba(2, 132, 199, 0.22) !important; stroke-width: 2px !important; }
.svc-arch-canvas:has(.n-web:hover) .pulse-2 { stroke: #0284c7 !important; stroke-width: 2.2px !important; filter: url(#glow-filter) !important; animation-duration: 1.6s !important; }
.node-outer.n-web .no-icon { background: rgba(2, 132, 199, 0.08) !important; }
.node-outer.n-web .no-icon svg { color: #0284c7 !important; }
.node-outer.n-web:hover { border-color: #0284c7 !important; }
.node-outer.n-web:hover .no-icon { background: #0284c7 !important; }
.node-outer.n-web:hover .no-icon svg { color: #ffffff !important; }

.svc-arch-canvas:has(.n-ads:hover) .track-3 { stroke: rgba(225, 29, 72, 0.22) !important; stroke-width: 2px !important; }
.svc-arch-canvas:has(.n-ads:hover) .pulse-3 { stroke: #e11d48 !important; stroke-width: 2.2px !important; filter: url(#glow-filter) !important; animation-duration: 1.5s !important; }
.node-outer.n-ads .no-icon { background: rgba(225, 29, 72, 0.08) !important; }
.node-outer.n-ads .no-icon svg { color: #e11d48 !important; }
.node-outer.n-ads:hover { border-color: #e11d48 !important; }
.node-outer.n-ads:hover .no-icon { background: #e11d48 !important; }
.node-outer.n-ads:hover .no-icon svg { color: #ffffff !important; }

.svc-arch-canvas:has(.n-seo:hover) .track-4 { stroke: rgba(79, 70, 229, 0.22) !important; stroke-width: 2px !important; }
.svc-arch-canvas:has(.n-seo:hover) .pulse-4 { stroke: #4f46e5 !important; stroke-width: 2.2px !important; filter: url(#glow-filter) !important; animation-duration: 1.8s !important; }
.node-outer.n-seo .no-icon { background: rgba(79, 70, 229, 0.08) !important; }
.node-outer.n-seo .no-icon svg { color: #4f46e5 !important; }
.node-outer.n-seo:hover { border-color: #4f46e5 !important; }
.node-outer.n-seo:hover .no-icon { background: #4f46e5 !important; }
.node-outer.n-seo:hover .no-icon svg { color: #ffffff !important; }

.svc-arch-canvas:has(.n-social:hover) .track-5 { stroke: rgba(249, 115, 22, 0.22) !important; stroke-width: 2px !important; }
.svc-arch-canvas:has(.n-social:hover) .pulse-5 { stroke: #f97316 !important; stroke-width: 2.2px !important; filter: url(#glow-filter) !important; animation-duration: 1.7s !important; }
.node-outer.n-social .no-icon { background: rgba(249, 115, 22, 0.08) !important; }
.node-outer.n-social .no-icon svg { color: #f97316 !important; }
.node-outer.n-social:hover { border-color: #f97316 !important; }
.node-outer.n-social:hover .no-icon { background: #f97316 !important; }
.node-outer.n-social:hover .no-icon svg { color: #ffffff !important; }

/* Hover center core rippling all lines */
.svc-arch-canvas:has(.node-center:hover) .pulse-line {
  stroke-width: 2px !important;
  animation-duration: 1.3s !important;
  filter: url(#glow-filter) !important;
}

/* Responsive adjustment for canvas */
@media (max-width: 600px) {
  .svc-arch-canvas {
    height: 380px !important;
  }
  .node-center {
    width: 90px !important;
    height: 90px !important;
  }
  .nc-main {
    font-size: 1.05rem !important;
  }
  .node-outer {
    padding: 0.5rem 0.9rem !important;
    gap: 8px !important;
  }
  .no-icon {
    width: 22px !important;
    height: 22px !important;
  }
  .no-icon svg {
    width: 11px !important;
    height: 11px !important;
  }
  .no-title {
    font-size: 0.76rem !important;
  }
  .node-outer.n-web { left: 18% !important; }
  .node-outer.n-ads { left: 82% !important; }
  .node-outer.n-seo { left: 24% !important; }
  .node-outer.n-social { left: 76% !important; }

  /* Shift Bezier curves on mobile to match the shifted node positions */
  .track-2, .pulse-2 { d: path("M 50,50 C 38,45 30,42 18,40") !important; }
  .track-3, .pulse-3 { d: path("M 50,50 C 62,45 70,42 82,40") !important; }
  .track-4, .pulse-4 { d: path("M 50,50 C 35,55 30,70 24,80") !important; }
  .track-5, .pulse-5 { d: path("M 50,50 C 65,55 70,70 76,80") !important; }
}

/* ── HERO BUTTON STYLES ───────────────────────────────────── */
.p-btn-primary,
.p-btn.p-btn-primary {
  background: linear-gradient(135deg, #3b0764, #7c3aed) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 30px -8px rgba(91, 33, 182, 0.45) !important;
  border-radius: 50px !important;
  padding: 15px 32px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.p-btn-primary:hover,
.p-btn.p-btn-primary:hover {
  background: linear-gradient(135deg, #4c1d95, #a78bfa) !important;
  box-shadow: 0 16px 44px -8px rgba(91, 33, 182, 0.6) !important;
  transform: translateY(-3px) !important;
  color: #ffffff !important;
}
.p-btn-outline,
.p-btn.p-btn-outline {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0a0414 !important;
  border: 1px solid rgba(91, 33, 182, 0.22) !important;
  border-radius: 50px !important;
  padding: 15px 30px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.p-btn-outline:hover,
.p-btn.p-btn-outline:hover {
  background: #ffffff !important;
  border-color: #5b21b6 !important;
  color: #5b21b6 !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL — Fix any remaining dark card/section backgrounds
   that use rgba with very low opacity on bright pages.
   ══════════════════════════════════════════════════════════ */

/* Fix about page principle cards which should stay dark */
.principle-card {
  background: linear-gradient(155deg, rgba(45, 20, 88, 0.92), rgba(14, 6, 32, 0.96)) !important;
  border: 1px solid rgba(167, 139, 250, 0.14) !important;
  box-shadow: 0 20px 60px -16px rgba(20, 10, 40, 0.4) !important;
}

/* val-card — frosted light lavender */
.val-card {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 8px 28px -8px rgba(91, 33, 182, 0.12) !important;
}
.val-card:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.28) !important;
  box-shadow: 0 18px 50px -12px rgba(91, 33, 182, 0.22) !important;
  transform: translateY(-4px) !important;
}

/* why-tile — already frosted but reinforce */
.why-tile {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 8px 28px -8px rgba(91, 33, 182, 0.12) !important;
}
.why-tile:hover {
  background: #ffffff !important;
  border-color: rgba(91, 33, 182, 0.30) !important;
  box-shadow: 0 24px 60px -16px rgba(91, 33, 182, 0.30) !important;
}

/* test-card — testimonial cards */
.test-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
  box-shadow: 0 8px 28px -8px rgba(91, 33, 182, 0.12) !important;
}

/* faq-card — light bg */
.faq-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(91, 33, 182, 0.14) !important;
}

/* Ensure p-ring (process nodes) look bright */
.p-ring {
  background: #ffffff !important;
  border: 2px solid rgba(91, 33, 182, 0.24) !important;
  box-shadow: 0 6px 18px -6px rgba(91, 33, 182, 0.16) !important;
}

/* Fix trust strip */
.trust-strip {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(91, 33, 182, 0.12) !important;
  backdrop-filter: blur(12px) !important;
}

/* Logo loop container */
#logoLoopContainer {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(91, 33, 182, 0.12) !important;
}

/* work cards — keep dark overlay (photo cards) */
.wc {
  background: #ffffff !important;
  border: 1px solid rgba(91, 33, 182, 0.12) !important;
}
.wc-overlay {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* ── GLOBAL ITALIC CLIPPING FIX ── */
em,
i,
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.p-h1 em,
.p-h2 em,
.p-h3 em,
.p-h4 em,
.sec-title em {
  display: inline-block !important;
  padding-right: 0.12em !important;
  overflow: visible !important;
}