/* ════════════════════════════════════════════════════════════════════════
   MOQBridge · ULTRA-PREMIUM 2026 — Dual-tone reskin
   Loaded LAST. Overrides tokens + core components only.
   NO markup, JS, AJAX, calculators, or integrations are touched.
   Direction: Linear × Stripe hybrid — luminous light content + deep
   aurora hero/feature bands, gradient (double-colour) type, glass depth,
   floating 3D objects & animated mesh (CSS + GSAP, no new libraries).
═══════════════════════════════════════════════════════════════════════ */

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

/* ── 1. GLOBAL TOKENS — loaded on EVERY page (fonts + accent palette) ────── */
:root {
  /* Accent ramp — used in buttons, icons, gradients site-wide */
  --cyan:           #1FB6D6;
  --cyan-bright:    #22D3EE;
  --purple:         #7C5CFF;
  --violet:         #7C3AED;
  --pink:           #EC4899;
  --magenta:        #D6409F;
  --gold:           #E8A93C;
  --green:          #10B981;

  /* ── Premium type system — replaces Orbitron/Rajdhani on ALL pages ── */
  --font-display:   'Sora', system-ui, sans-serif;
  --font-heading:   'Sora', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-text:      'Inter', system-ui, sans-serif;

  /* Signature gradients (double colour) — global utility */
  --grad-brand:     linear-gradient(100deg,#22D3EE 0%,#7C5CFF 52%,#EC4899 100%);
  --grad-brand-2:   linear-gradient(120deg,#7C5CFF 0%,#EC4899 100%);
  --grad-aurora:    radial-gradient(60% 80% at 12% 18%, rgba(34,211,238,.30), transparent 60%),
                    radial-gradient(55% 70% at 88% 12%, rgba(124,92,255,.34), transparent 60%),
                    radial-gradient(60% 80% at 70% 95%, rgba(236,72,153,.22), transparent 62%);

  --border-glow:    rgba(34,211,238,0.45);
  --border-cyan:    rgba(34,211,238,0.30);
}

/* ── 1b. HOMEPAGE-ONLY color tokens (light dual-tone) ─────────────────────
   Scoped to body.home so EVERY other dark page keeps its original colours.
   On all other pages: --text-primary stays #f6f7ff (white), --bg-body stays
   dark — only the font stack changes (Sora/Inter replaces Orbitron/Rajdhani). */
body.home {
  --bg-body:        #F4F6FC;
  --bg-deep:        #0B1026;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #FFFFFF;
  --bg-glass:       rgba(255,255,255,0.72);
  --bg-input:       #FFFFFF;
  --card-bg:        #FFFFFF;

  /* Dark-ink text for light content areas (re-scoped white inside .hero/.band-dark below) */
  --text-primary:   #0C1230;
  --text-secondary: #3A4366;
  --text-muted:     #6B7494;
  --text-white:     #0C1230;
  --text:           #0C1230;

  --border-subtle:  rgba(18,28,64,0.10);
  --border:         rgba(18,28,64,0.10);

  --shadow-card:    0 1px 2px rgba(16,24,64,.05), 0 12px 32px rgba(16,24,64,.08);
  --shadow-deep:    0 30px 70px rgba(16,24,64,.16);
  --shadow-glow:    0 14px 40px rgba(124,92,255,.22);
}

/* ── 2. BASE — applies to ALL pages ──────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 1.02rem;
  line-height: 1.7;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings → Sora on ALL pages (replaces Orbitron/Rajdhani sitewide) */
h1,h2,h3,h4,h5,h6,
.font-display,.hero-title,.section-title,.logo-text {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--text-primary);
}

/* ── Navbar — always dark background; force white links on every page ── */
.navbar .nav-link {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.84) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #FFFFFF !important; }
/* Dropdown items — always white text on dark menu */
.dropdown-menu a {
  font-family: var(--font-body) !important;
  font-weight: 500;
  color: rgba(255,255,255,.85) !important;
}
.dropdown-menu a:hover { color: #FFFFFF !important; }

/* Manufacturer tier CTA buttons — make non-featured ones visible */
.tier-cta:not(.primary) {
  background: rgba(0,212,255,.07) !important;
  border: 1.5px solid rgba(0,212,255,.35) !important;
  color: var(--cyan) !important;
}
.tier-cta:not(.primary):hover {
  background: rgba(0,212,255,.15) !important;
  border-color: var(--cyan) !important;
  color: #fff !important;
}

/* ── Global heading gradient helper for dark-page heroes ───────────────
   Any heading on a dark page that gets class="page-title-gradient" gets
   the double-colour look without touching existing template markup. */
.page-title-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Double-colour gradient text utilities */
.gradient-text,
.gradient-text-green {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gradient-text-green { background: linear-gradient(100deg,#10B981,#22D3EE); -webkit-background-clip:text; background-clip:text; }

.section-title {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* ── 3. SECTION RHYTHM — dual tone bands ──────────────────────────────── */
/* default sections sit on the light body; add .band-dark to any <section>
   to drop a deep aurora band (used by hero + selected feature bands). */
.band-dark, .hero {
  background: var(--bg-deep);
  position: relative;
  /* re-scope the emphasis/text vars to light-on-dark inside dark bands */
  --text-white:     #FFFFFF;
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,.84);
  --text-muted:     rgba(255,255,255,.62);
  --border-subtle:  rgba(255,255,255,.12);
  --bg-card:        rgba(255,255,255,.05);
  color: rgba(255,255,255,.84);
}
.band-dark h1,.band-dark h2,.band-dark h3,.hero h1 { color:#fff; }

/* ── 4. HERO — deep aurora + animated mesh + floating glass ───────────── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: calc(var(--navbar-h) + 56px) 0 90px;
  background:
    var(--grad-aurora),
    linear-gradient(165deg,#0E1430 0%,#0A0E22 60%,#070A1A 100%);
}
.hero-bg { display:none; }   /* replaced by the richer aurora above */

/* animated mesh layer */
.hero::before {
  content:''; position:absolute; inset:-20%;
  background:
    radial-gradient(38% 50% at 20% 30%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(40% 52% at 82% 24%, rgba(124,92,255,.26), transparent 60%),
    radial-gradient(42% 55% at 60% 92%, rgba(236,72,153,.18), transparent 62%);
  filter: blur(28px);
  animation: meshDrift 18s ease-in-out infinite alternate;
  z-index:0; pointer-events:none;
}
/* fine grid + grain for premium texture */
.hero-grid-overlay {
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
}
.hero .container { position:relative; z-index:2; }

/* floating glass orbs (premium depth, motion) */
.orb {
  position:absolute; border-radius:50%; z-index:1; pointer-events:none;
  filter: blur(14px); mix-blend-mode: screen;
  animation: orbFloat 14s ease-in-out infinite;
}
.orb-cyan   { background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.55), transparent 68%); }
.orb-purple { background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.55), transparent 68%); animation-delay:-4s; }
.orb-pink   { background: radial-gradient(circle at 30% 30%, rgba(236,72,153,.45), transparent 68%); animation-delay:-8s; }

.hero-title { font-weight: 800; line-height: 1.07; }
.hero-subtitle { color: rgba(255,255,255,.80); }

/* hero stats on dark */
.hero-stat-number { font-family: var(--font-display); font-weight: 800; color:#fff; }
.hero-stat-label  { color: rgba(255,255,255,.62); }

/* ── 5. BUTTONS — premium ─────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing:-0.01em;
  border-radius: 14px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
}
.btn-primary {
  background: var(--grad-brand-2);
  color:#fff !important; border:none;
  box-shadow: 0 10px 30px rgba(124,92,255,.40), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 40px rgba(124,92,255,.52); }
.btn-secondary {
  background: rgba(255,255,255,.06);
  color:#fff; border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
/* secondary on LIGHT sections — homepage only */
body.home .band-light .btn-secondary,
body.home section:not(.hero):not(.band-dark) .btn-secondary {
  color: var(--violet); border-color: rgba(124,92,255,.35); background: rgba(124,92,255,.05);
}

/* ── 6. CARDS / SURFACES ───────────────────────────────────────────────── */
/* Global: smooth hover lift + rounded corners on ALL pages */
.card,.stat-card,.blog-card,.accordion-item.card {
  border-radius: 20px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.card:hover,.stat-card:hover,.blog-card:hover { transform: translateY(-4px); }

/* Homepage light surfaces — white cards */
body.home .card,
body.home .stat-card,
body.home .blog-card,
body.home .accordion-item.card {
  background: var(--bg-card);
  backdrop-filter: none;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}
body.home .card:hover,
body.home .stat-card:hover,
body.home .blog-card:hover {
  box-shadow: var(--shadow-deep);
  border-color: rgba(124,92,255,.28);
}
/* dark bands on homepage: restore glass cards */
.band-dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color:#fff; backdrop-filter: blur(14px); }

.badge { font-family: var(--font-body); font-weight:600; }
.feature-link { color: var(--violet); font-weight:600; }

/* ── 7. KEYFRAMES ─────────────────────────────────────────────────────── */
@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%,2%,0) scale(1.08); }
}
@keyframes orbFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-26px,0); }
}

/* ── 6b. HERO LOGO + 3D MOVING OBJECTS / FRAMES ───────────────────────── */
.hero-logo { display:inline-flex; align-items:center; gap:13px; margin-bottom:22px; position:relative; z-index:3; }
.hero-mark {
  width:72px; height:72px; border-radius:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-brand-2);
  box-shadow:0 14px 36px rgba(124,92,255,.65), inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1.5px rgba(255,255,255,.18);
  color:#fff; font-size:1.9rem;
  animation: logoFloat 5s ease-in-out infinite;
}
.hero-logo .wm {
  font-family:var(--font-display); font-weight:800; font-size:2.5rem; letter-spacing:-.03em; line-height:1;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* perspective stage that holds floating 3D frames behind/around the hero copy */
.fx-stage { position:absolute; inset:0; z-index:1; pointer-events:none; perspective:1400px; transform-style:preserve-3d; overflow:hidden; }
.fx-frame {
  position:absolute; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(7px);
  transform-style:preserve-3d;
}
.fx-frame::before {            /* gradient hairline border = the "frame" */
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:var(--grad-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7;
}
.fx-frame i { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:rgba(255,255,255,.92); }
/* ── All frames pinned to the RIGHT EDGE — never overlap headline or body text ── */
.fx-1 { width:120px; height:88px;  top:7%;     right:1%; left:auto;
         background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(255,255,255,.03));
         animation: float3dA 13s ease-in-out infinite; }
.fx-2 { width:96px;  height:96px;  top:36%;    right:1%; left:auto; border-radius:50%;
         background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(255,255,255,.03));
         animation: float3dB 16s ease-in-out infinite; }
.fx-3 { width:84px;  height:84px;  bottom:27%; right:1%; left:auto;
         background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(255,255,255,.03));
         animation: float3dC 12s ease-in-out infinite; }
.fx-4 { width:110px; height:80px;  bottom:5%;  right:1%; left:auto;
         background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(255,255,255,.03));
         animation: float3dA 17s ease-in-out infinite reverse; }
/* hide ALL frames on mobile — no risk of text overlap */
@media (max-width:900px){ .fx-1,.fx-2,.fx-3,.fx-4{ display:none; } }

@keyframes float3dA { 0%,100%{ transform:translate3d(0,0,0) rotateX(9deg) rotateY(-14deg);} 50%{ transform:translate3d(12px,-34px,50px) rotateX(-7deg) rotateY(12deg);} }
@keyframes float3dB { 0%,100%{ transform:translate3d(0,0,0) rotateZ(0deg) scale(1);} 50%{ transform:translate3d(-16px,-26px,30px) rotateZ(10deg) scale(1.06);} }
@keyframes float3dC { 0%,100%{ transform:translate3d(0,0,0) rotateX(-12deg) rotateY(16deg);} 50%{ transform:translate3d(0,30px,40px) rotateX(10deg) rotateY(-12deg);} }
@keyframes logoFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

/* the hero card now FLOATS continuously (wrapper), tilt JS still works on the card */
.hero-card-float { animation: cardFloat 8s ease-in-out infinite; transform-style:preserve-3d; }
@keyframes cardFloat { 0%,100%{ transform:translateY(0) rotateZ(0);} 50%{ transform:translateY(-18px) rotateZ(.6deg);} }

/* stronger, clearly-moving aurora orbs */
.orb { opacity:.85 !important; }
.orb-cyan   { width:520px !important; height:520px !important; animation: orbDrift1 16s ease-in-out infinite; }
.orb-purple { width:440px !important; height:440px !important; animation: orbDrift2 19s ease-in-out infinite; }
.orb-pink   { width:360px !important; height:360px !important; animation: orbDrift3 22s ease-in-out infinite; }
@keyframes orbDrift1 { 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(70px,40px,0) scale(1.18);} }
@keyframes orbDrift2 { 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(-60px,50px,0) scale(1.22);} }
@keyframes orbDrift3 { 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(40px,-50px,0) scale(1.15);} }

@media (prefers-reduced-motion: reduce){
  .orb,.fx-frame,.hero-card-float,.hero-logo img,.hero::before{ animation:none !important; }
}

/* ── 7b. Neutralise hand-coded dark section backgrounds → light bands ──── */
/* Homepage content sections were authored with inline background:rgba(0,0,0,.x).
   Repaint them as luminous light bands; their inline var(--text-*) emphasis
   colours are already re-scoped to dark ink by the light :root above. */
/* homepage only — repaint hand-coded black-rgba sections as light bands */
body.home section[style*="rgba(0,0,0"] {
  background: linear-gradient(180deg,#FBFCFF 0%,#F2F5FC 100%) !important;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
/* Pink/accent tint bands stay as soft light tints (premium, readable) */
div[style*="rgba(255,0,110,.04"], section[style*="rgba(0,0,0,.4"] {
  /* handled by the rule above where applicable */
}
/* Section eyebrow label */
.section-label {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size:.8rem;
  color: var(--violet);
  background: rgba(124,92,255,.08);
  border:1px solid rgba(124,92,255,.20);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.section-subtitle { color: var(--text-secondary); }

/* ── 8. RESPONSIVE — 360px safe ───────────────────────────────────────── */
@media (max-width: 900px){
  .hero > .container > div { grid-template-columns: 1fr !important; gap:34px !important; }
}
@media (max-width: 400px){
  .hero { padding-top: calc(var(--navbar-h) + 28px); }
  .btn-lg { width:100%; justify-content:center; }
}