/* ===== MIRZA X LABS bundle.css (auto-merged 2026-09-27) =====
   Order must match original layout load order. Sources:

/* ===== SOURCE: portal.css ===== */
/* QuickTap — Public Customer Portal theme */
:root {
  --qt-dark: #101828;
  --qt-body: #344054;
  --qt-brand: #7c3aed;
  --qt-brand-2: #4f46e5;
  --qt-accent: #f59e0b;
}
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--qt-body); background: #f8fafc; }

.portal-nav { background: var(--qt-dark); }
.portal-nav .navbar-brand small { display: block; font-size: .66rem; color: #98a2b3; line-height: 1; }
.portal-nav .nav-link { color: #d0d5dd; }
.portal-nav .nav-link:hover, .portal-nav .nav-link.active { color: #fff; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--qt-brand), var(--qt-brand-2)); color: #fff; font-size: 1.05rem; }
.wallet-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font-size: .875rem; border: 1px solid rgba(255,255,255,.15); }
.wallet-chip:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn-topup { background: var(--qt-accent); border: none; color: #1f2937; font-weight: 600; }
.user-chip { display: inline-flex; align-items: center; gap: .45rem; border: none; background: transparent; color: #fff; padding: .15rem .4rem; border-radius: 999px; }
.user-chip .avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--qt-brand), var(--qt-brand-2)); color: #fff; font-weight: 700; font-size: .8rem; }

.hero { background: radial-gradient(1000px 400px at 20% -10%, rgba(124,58,237,.35), transparent), linear-gradient(180deg, var(--qt-dark), #1d2939); color: #fff; padding: 4.5rem 0 5rem; }
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
.hero .lead { color: #b5bcc9; max-width: 34rem; }
.hero .btn-cta { background: var(--qt-accent); color: #1f2937; font-weight: 700; padding: .65rem 1.4rem; }
.hero .btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }

.section-pad { padding: 3.5rem 0; }
.feature-card { background: #fff; border: 1px solid #eaecf0; border-radius: 16px; padding: 1.5rem; height: 100%; }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #f4f3ff; color: var(--qt-brand); font-size: 1.2rem; margin-bottom: 1rem; }

.plan-card { background: #fff; border: 1px solid #eaecf0; border-radius: 18px; padding: 1.75rem; height: 100%; position: relative; }
.plan-card.featured { border-color: var(--qt-brand); box-shadow: 0 12px 40px -18px rgba(124,58,237,.45); }
.plan-price { font-size: 2.1rem; font-weight: 800; color: var(--qt-dark); }
.plan-price small { font-size: .9rem; font-weight: 500; color: #667085; }
.plan-features { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.plan-features li { padding: .3rem 0; }
.plan-features .bi { color: #b75412; margin-right: .5rem; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; background: radial-gradient(800px 400px at 80% -10%, rgba(79,70,229,.18), transparent), #f8fafc; padding: 2.5rem 1rem; }
.auth-card { width: 100%; max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid #eaecf0; border-radius: 20px; padding: 2.25rem; box-shadow: 0 20px 60px -30px rgba(16,24,40,.25); }

.dash-stat { background: #fff; border: 1px solid #eaecf0; border-radius: 16px; padding: 1.25rem 1.5rem; height: 100%; }
.dash-stat .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #667085; }
.dash-stat .value { font-size: 1.45rem; font-weight: 800; color: var(--qt-dark); }

.card { border-color: #eaecf0; }
.table > :not(caption) > * > * { padding: .8rem .75rem; }
.portal-footer { background: var(--qt-dark); color: #98a2b3; padding: 1.5rem 0; font-size: .875rem; margin-top: 3rem; }
.portal-footer a { color: #d0d5dd; text-decoration: none; }
.gateway-pick { cursor: pointer; }
.gateway-pick input { margin-right: .5rem; }
.empty { color: #98a2b3; text-align: center; padding: 2.5rem 1rem !important; }

/* ===== SOURCE: theme.css ===== */
/* ============================================================================
   MIRZA X LABS — Theme v7 (LIGHT DAY MODE • 2 colors: Green + Black on White)
   Sharp premium, tech 3D animations, fast (transform/opacity only).
   portal.css ke baad load — uske styles override karta hai.
   ============================================================================ */
:root {
  /* 2-color palette */
  --mx-green: #f85a00;
  --mx-green-2: #ff8a2b;
  --mx-green-deep: #d84a00;
  --mx-green-soft: rgba(248, 90, 0, .1);
  --mx-black: #170c06;
  --mx-ink: #111827;
  --mx-white: #FFFFFF;
  /* neutrals (black/white derivatives) */
  --mx-bg: #FFFFFF;
  --mx-bg-2: #f8f7f6;
  --mx-surface: #FFFFFF;
  --mx-surface-2: #faf0e8;
  --mx-border: rgba(10, 13, 16, .1);
  --mx-border-2: rgba(248, 90, 0, .35);
  --mx-muted: #5B6663;
  /* system */
  --mx-radius: 18px;
  --mx-radius-sm: 12px;
  --mx-shadow: 0 24px 60px -28px rgba(10, 13, 16, .22);
  --mx-shadow-sm: 0 8px 24px -12px rgba(10, 13, 16, .14);
  --mx-glow: 0 0 0 1px rgba(248, 90, 0, .28), 0 12px 40px -12px rgba(248, 90, 0, .35);
  --mx-font-head: "Sora", "Inter", system-ui, sans-serif;
  --mx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mx-ease: cubic-bezier(.2, .7, .3, 1);
  /* legacy aliases (pages in v6 classes) */
  --af-bg: var(--mx-bg); --af-bg-2: var(--mx-bg-2); --af-surface: var(--mx-surface);
  --af-surface-2: var(--mx-surface-2); --af-glass: rgba(255, 255, 255, .82); --af-glass-2: rgba(255, 255, 255, .6);
  --af-border: var(--mx-border); --af-border-2: var(--mx-border-2);
  --af-primary: var(--mx-green); --af-primary-2: var(--mx-green-2);
  --af-cyan: var(--mx-green); --af-amber: var(--mx-black);
  --af-text: var(--mx-ink); --af-muted: var(--mx-muted); --af-danger: #C64233;
  --af-radius: var(--mx-radius); --af-radius-sm: var(--mx-radius-sm);
  --af-shadow: var(--mx-shadow); --af-glow: var(--mx-glow);
  --af-font-head: var(--mx-font-head); --af-font-body: var(--mx-font-body); --af-ease: var(--mx-ease);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--mx-font-body);
  background: var(--mx-white);
  color: var(--mx-ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .display-6 { font-family: var(--mx-font-head); color: var(--mx-black); letter-spacing: -.015em; }
a { color: var(--mx-green-deep); }
a:hover { color: var(--mx-green); }
::selection { background: rgba(248, 90, 0, .22); color: var(--mx-black); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D3DAD8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--mx-green); }
::-webkit-scrollbar-track { background: var(--mx-bg-2); }

.text-secondary { color: var(--mx-muted) !important; }
.text-body { color: var(--mx-ink) !important; }
.text-muted { color: var(--mx-muted) !important; }
.text-white, .text-white * { color: var(--mx-black) !important; }
.text-white .bi, .text-white i { color: var(--mx-green) !important; }
/* dark surfaces ke andar text-white ko wapis white rakho */
.cta-band .text-white, .cta-band .text-white *,
.dark-surface .text-white, .dark-surface .text-white * { color: #fff !important; }
.cta-band .text-white .bi, .cta-band .text-white i,
.dark-surface .text-white .bi, .dark-surface .text-white i { color: var(--mx-green-2) !important; }

/* ============================ SPLASH (light — base overlay; v3 styles neeche) ============================ */
#splashScreen {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s var(--mx-ease), visibility .5s ease;
}
#splashScreen.done { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { text-align: center; }
.splash-cube .f4 { transform: rotateY(-90deg) translateZ(37px); }
.splash-cube .f5 { transform: rotateX(90deg) translateZ(37px); }
.splash-cube .f6 { transform: rotateX(-90deg) translateZ(37px); }
@keyframes cubeSpin { 0% { transform: rotateX(-18deg) rotateY(0); } 100% { transform: rotateX(-18deg) rotateY(360deg); } }
.splash-brand { font-family: var(--mx-font-head); font-weight: 800; font-size: 2.1rem; letter-spacing: -.02em; color: var(--mx-black); }
.splash-brand::after { content: ""; display: block; width: 46%; height: 4px; margin: .5rem auto 0; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--mx-green), var(--mx-green-2), transparent); animation: splashUnder 1.6s var(--mx-ease) infinite; }
@keyframes splashUnder { 0%, 100% { transform: scaleX(.55); } 50% { transform: scaleX(1); } }
.splash-tag { color: var(--mx-muted); font-size: .76rem; letter-spacing: .35em; text-transform: uppercase; margin-top: .55rem; }
.splash-bar { width: 180px; height: 3px; border-radius: 99px; background: var(--mx-surface-2); margin: 1.4rem auto 0; overflow: hidden; }
.splash-bar span { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--mx-green), var(--mx-green-2)); animation: barSlide 1.1s ease-in-out infinite; }
@keyframes barSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ============================ NAVBAR (light glass) ============================ */
.portal-nav {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--mx-border);
  transition: padding .3s var(--mx-ease), background .3s ease, box-shadow .3s ease;
}
.portal-nav.shrunk { background: rgba(255, 255, 255, .95); box-shadow: 0 12px 34px -20px rgba(10, 13, 16, .25); }
.portal-nav .navbar-brand small { display: block; font-size: .66rem; color: var(--mx-muted); line-height: 1; transition: .25s; }
.portal-nav .navbar-brand strong { color: var(--mx-black); }
.portal-nav .nav-link { color: var(--mx-muted); }
.portal-nav .nav-link:hover, .portal-nav .nav-link.active { color: var(--mx-green-deep); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--mx-green); color: #fff; font-size: 1rem;
  box-shadow: 0 6px 18px -6px rgba(248, 90, 0, .6);
  transition: transform .3s var(--mx-ease);
}
.navbar-brand:hover .brand-mark { transform: rotate(90deg) scale(1.06); }
.wallet-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: var(--mx-green-soft); color: var(--mx-green-deep); text-decoration: none; font-size: .875rem; font-weight: 600; border: 1px solid var(--mx-border-2); }
.wallet-chip:hover { background: rgba(248, 90, 0, .16); color: var(--mx-green-deep); }
.btn-topup { background: var(--mx-green); border: none; color: #fff; font-weight: 600; }
.btn-topup:hover { background: var(--mx-green-deep); color: #fff; box-shadow: var(--mx-glow); }
.user-chip { display: inline-flex; align-items: center; gap: .45rem; border: none; background: transparent; color: var(--mx-black); padding: .15rem .4rem; border-radius: 999px; }
.user-chip .avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mx-green); color: #fff; font-weight: 700; font-size: .8rem; }

/* ============================ BUTTONS (2-color) ============================ */
.btn { border-radius: 12px; font-weight: 600; transition: transform .2s var(--mx-ease), box-shadow .25s ease, background .2s ease; }
.btn-primary, .btn-premium {
  background: var(--mx-green); border: none; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 10px 26px -10px rgba(248, 90, 0, .55);
}
.btn-primary:hover, .btn-premium:hover { background: var(--mx-green-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--mx-glow); }
.btn-primary::after, .btn-premium::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.btn-primary:hover::after, .btn-premium:hover::after { left: 130%; }
.btn-outline-primary { color: var(--mx-green-deep); border-color: var(--mx-border-2); background: transparent; }
.btn-outline-primary:hover { background: var(--mx-green-soft); color: var(--mx-green-deep); border-color: var(--mx-green); }
.btn-outline-light { color: var(--mx-black); border-color: rgba(10, 13, 16, .35); background: transparent; }
.btn-outline-light:hover { background: var(--mx-black); color: #fff; border-color: var(--mx-black); }
.btn-outline-secondary { color: var(--mx-ink); border-color: var(--mx-border); }
.btn-outline-secondary:hover { background: var(--mx-surface-2); color: var(--mx-black); }
.btn-warning { background: var(--mx-black); border: none; color: #fff; font-weight: 700; }
.btn-warning:hover { background: #000; color: var(--mx-green-2); transform: translateY(-2px); }
.btn-light { background: var(--mx-surface-2); color: var(--mx-black); border: 1px solid var(--mx-border); }

/* ============================ SURFACES (light) ============================ */
.card { background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); box-shadow: var(--mx-shadow-sm); }
.card-header { background: transparent; border-bottom: 1px solid var(--mx-border); font-weight: 600; color: var(--mx-black); }
.glass-card, .glass {
  background: rgba(255, 255, 255, .86); border: 1px solid var(--mx-border); border-radius: var(--mx-radius);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--mx-shadow); color: var(--mx-ink);
}
.table { --bs-table-bg: transparent; --bs-table-color: var(--mx-ink); margin-bottom: 0; }
.table thead th { color: var(--mx-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; border-color: var(--mx-border); }
.table td, .table th { border-color: var(--mx-border); vertical-align: middle; color: var(--mx-ink); }
.table .link-light, .link-light { color: var(--mx-green-deep) !important; }
.table a { color: var(--mx-green-deep); }
.form-control, .form-select {
  background: var(--mx-white); border: 1px solid var(--mx-border); color: var(--mx-ink);
  border-radius: var(--mx-radius-sm); transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus { background: #fff; color: var(--mx-ink); border-color: var(--mx-green); box-shadow: 0 0 0 .22rem rgba(248, 90, 0, .15); }
.form-control::placeholder { color: #9AA5A1; }
.form-control:disabled { background: var(--mx-surface-2); color: var(--mx-muted); }
.form-label { color: var(--mx-ink); }
.form-check-input { border: 1px solid var(--mx-border); }
.form-check-input:checked { background-color: var(--mx-green); border-color: var(--mx-green); }
.form-text { color: var(--mx-muted); }
.bg-light { background: var(--mx-surface-2) !important; color: var(--mx-ink); }
.alert { border-radius: var(--mx-radius-sm); border: 1px solid var(--mx-border); }
.alert-success { background: var(--mx-green-soft); border-color: var(--mx-border-2); color: var(--mx-green-deep); }
.alert-danger { background: rgba(198, 66, 51, .07); border-color: rgba(198, 66, 51, .35); color: #8A2E22; }
.alert-warning { background: rgba(10, 13, 16, .05); border-color: var(--mx-border); color: var(--mx-ink); }
.alert-info { background: var(--mx-green-soft); border-color: var(--mx-border-2); color: var(--mx-green-deep); }
.alert .btn-close { filter: none; }
.badge.text-bg-light { background: var(--mx-surface-2) !important; color: var(--mx-black) !important; border: 1px solid var(--mx-border); }
.badge.text-bg-success { background: var(--mx-green) !important; }
.badge.text-bg-warning { background: var(--mx-black) !important; color: #fff !important; }
.badge.text-bg-secondary { background: var(--mx-ink) !important; }
.dropdown-menu { background: var(--mx-white); border: 1px solid var(--mx-border); box-shadow: var(--mx-shadow); }
.dropdown-item { color: var(--mx-ink); }
.dropdown-item:hover { background: var(--mx-green-soft); color: var(--mx-green-deep); }
.dropdown-divider { border-color: var(--mx-border); }
.empty { color: var(--mx-muted); text-align: center; padding: 2.5rem 1rem !important; }
.progress { background: var(--mx-surface-2); }
.hr-label { color: var(--mx-muted); }
.hr-label::before, .hr-label::after { background: var(--mx-border); }
.btn-google { background: #fff; color: #1f2937; border: 1px solid var(--mx-border); }
.btn-google:hover { background: var(--mx-surface-2); color: #1f2937; }
.gateway-pick input { accent-color: var(--mx-green); }
.font-monospace { color: var(--mx-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--mx-muted); }
.alert-success::before { content: "✓ "; font-weight: 800; animation: popIn .45s var(--mx-ease); display: inline-block; }
@keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ============================ SECTION SCAFFOLD ============================ */
.section-pad { padding: 3.5rem 0; }
.section-head { text-align: center; margin-bottom: 2.6rem; }
.section-head h1, .section-head h2 { font-weight: 800; letter-spacing: -.02em; }
.section-head p { color: var(--mx-muted); max-width: 620px; margin: .5rem auto 0; }
.eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mx-green-deep); background: var(--mx-green-soft); border: 1px solid var(--mx-border-2);
  padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.grad-text { background: linear-gradient(92deg, var(--mx-green-deep), var(--mx-green), var(--mx-green-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================ HERO v2 (light, live bg) ============================ */
.hero, .hero-v2 {
  position: relative; overflow: hidden; color: var(--mx-ink);
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(248, 90, 0, .13), transparent 60%),
    radial-gradient(760px 380px at 96% 12%, rgba(248, 90, 0, .08), transparent 58%),
    linear-gradient(180deg, #fdfcfb, #FFFFFF);
}
.hero { padding: 4.5rem 0 5rem; }
.hero .lead, .hero-v2 .lead { color: var(--mx-muted); max-width: 34rem; }
.hero .eyebrow { color: var(--mx-green-deep); }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .6; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; }
.hero-bg .b1 { width: 420px; height: 420px; background: rgba(248, 90, 0, .5); top: -140px; left: -100px; animation: blobDrift 14s ease-in-out infinite; }
.hero-bg .b2 { width: 380px; height: 380px; background: rgba(255, 138, 43, .45); bottom: -160px; right: -80px; animation: blobDrift 18s ease-in-out infinite reverse; }
.hero-bg .b3 { width: 260px; height: 260px; background: rgba(10, 13, 16, .18); top: 30%; right: 22%; opacity: .12; animation: blobDrift 22s ease-in-out infinite; }
@keyframes blobDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } }
.hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--mx-black); }
.hero-line { display: inline-block; }

.hero-v2 { min-height: 92vh; display: flex; align-items: center; padding: 5.5rem 0 4.5rem !important; }
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 13, 16, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 13, 16, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(720px 460px at 42% 42%, #000 30%, transparent 78%);
  mask-image: radial-gradient(720px 460px at 42% 42%, #000 30%, transparent 78%);
}
.hero-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(255, 255, 255, .9) 100%); }
.announce-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 600; color: var(--mx-green-deep);
  background: var(--mx-green-soft); border: 1px solid var(--mx-border-2);
  padding: .42rem 1rem; border-radius: 999px; margin-bottom: 1.35rem;
}
.pulse-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--mx-green); flex-shrink: 0; }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--mx-green); opacity: 0; animation: pulseRing 1.8s ease-out infinite; }
@keyframes pulseRing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.hero-v2 .hero-title { font-size: clamp(2.4rem, 5.4vw, 4rem); margin-bottom: 1.15rem; }
.hero-trust { color: var(--mx-muted); font-size: .875rem; }
.hero-trust .bi { color: var(--mx-green); }
.hero-ministats { display: inline-flex; align-items: center; gap: 1.35rem; }
.hero-ministats b { font-family: var(--mx-font-head); font-size: 1.5rem; font-weight: 800; color: var(--mx-black); display: block; line-height: 1; }
.hero-ministats small { color: var(--mx-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.hero-ministats .divider { width: 1px; height: 34px; background: var(--mx-border); }

/* 3D scene + mockup (light) */
.scene { position: relative; height: 430px; perspective: 1100px; }
.card3d { position: absolute; }
.c1 { width: 62%; top: 6%; left: 4%; z-index: 4; }
.c2 { width: 52%; top: 36%; right: 0; z-index: 5; }
.c3 { width: 46%; bottom: 4%; left: 12%; z-index: 6; }
.c4 { width: 44%; top: 2%; right: 6%; z-index: 3; }
.hero-v2 .c2 { top: 30%; right: -2%; }
.hero-v2 .c3 { bottom: 2%; left: 2%; }
[data-float] { animation: floaty 5.2s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(.6deg); } }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--mx-green); } .dot.warn { background: var(--mx-black); } .dot.bad { background: #C64233; }
.skl { background: linear-gradient(90deg, rgba(10,13,16,.06), rgba(10,13,16,.14), rgba(10,13,16,.06)); background-size: 200% 100%; border-radius: 6px; animation: sheen 2.4s linear infinite; }
.skl.line { height: 10px; margin-bottom: 10px; }
.skl.w-60 { width: 60%; } .skl.w-90 { width: 90%; } .skl.w-40 { width: 40%; }
.skl.chip { width: 54px; height: 22px; display: inline-block; }
.orbit {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  background: var(--mx-white); border: 1px solid var(--mx-border-2); color: var(--mx-green-deep); z-index: 2;
  box-shadow: var(--mx-shadow-sm);
}
.orbit-1 { top: 12%; right: 12%; animation: orbitPulse 4s ease-in-out infinite; }
.orbit-2 { bottom: 20%; right: 26%; animation: orbitPulse 5s ease-in-out infinite .8s; }
.orbit-3 { top: 46%; left: -2%; animation: orbitPulse 6s ease-in-out infinite 1.4s; }
@keyframes orbitPulse { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(248, 90, 0, .35); } 50% { transform: translateY(-10px); box-shadow: 0 0 0 14px rgba(248, 90, 0, 0); } }
@media (max-width: 991.98px) { .scene { height: 360px; transform: scale(.92); } }

.mockup {
  position: relative; width: 88%; margin: 4% auto 0; z-index: 4;
  background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: 16px;
  box-shadow: 0 40px 90px -34px rgba(10, 13, 16, .35), 0 0 0 1px rgba(248, 90, 0, .1);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
  transition: transform .45s var(--mx-ease);
}
.scene:hover .mockup { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.mockup[data-float] { animation: mockupFloat 6s ease-in-out infinite; }
@keyframes mockupFloat {
  0%, 100% { transform: perspective(1200px) rotateY(-7deg) rotateX(3deg) translateY(0); }
  50% { transform: perspective(1200px) rotateY(-7deg) rotateX(3deg) translateY(-10px); }
}
.scene:hover .mockup { animation-play-state: paused; }
.mock-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border-bottom: 1px solid var(--mx-border); background: var(--mx-bg-2); }
.mock-url { margin-left: .7rem; font-size: .68rem; color: var(--mx-muted); background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: 99px; padding: .12rem .7rem; }
.mock-body { display: flex; min-height: 240px; }
.mock-side { display: flex; flex-direction: column; gap: .55rem; padding: .9rem .65rem; border-right: 1px solid var(--mx-border); }
.mock-side .mi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--mx-muted); font-size: .85rem; }
.mock-side .mi.active { background: var(--mx-green-soft); color: var(--mx-green-deep); box-shadow: inset 0 0 0 1px var(--mx-border-2); }
.mock-main { flex: 1; padding: .9rem 1rem; min-width: 0; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.mock-cards .mc { background: var(--mx-bg-2); border: 1px solid var(--mx-border); border-radius: 10px; padding: .55rem .65rem; }
.mock-cards small { display: block; color: var(--mx-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }
.mock-cards b { display: block; color: var(--mx-black); font-size: .95rem; margin: .15rem 0; font-family: var(--mx-font-head); }
.mock-cards .up { color: var(--mx-green-deep); font-size: .62rem; font-weight: 700; }
.mock-cards .warn-t { color: var(--mx-black); font-size: .62rem; font-weight: 700; }
.mock-chart { display: flex; align-items: flex-end; gap: 7px; height: 74px; margin: .8rem 0; padding: 0 .2rem; }
.mock-chart span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--mx-green-2), rgba(248, 90, 0, .4)); height: var(--h); transform-origin: bottom; animation: barGrow 1.1s var(--mx-ease) backwards; }
.mock-chart span:nth-child(2) { animation-delay: .1s; } .mock-chart span:nth-child(3) { animation-delay: .2s; }
.mock-chart span:nth-child(4) { animation-delay: .3s; } .mock-chart span:nth-child(5) { animation-delay: .4s; }
.mock-chart span:nth-child(6) { animation-delay: .5s; } .mock-chart span:nth-child(7) { animation-delay: .6s; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mock-feed { display: flex; flex-direction: column; gap: .45rem; }
.mock-feed .mf { display: flex; align-items: center; gap: .6rem; font-size: .74rem; }
.mock-feed .mf i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--mx-green-soft); color: var(--mx-green-deep); font-size: .72rem; }
.mock-feed .mf b { color: var(--mx-black); display: block; font-size: .74rem; }
.mock-feed .mf small { color: var(--mx-muted); display: block; font-size: .64rem; }
.mock-feed .mf.run i { animation: spinIcon 1.4s linear infinite; }
@keyframes spinIcon { to { transform: rotate(360deg); } }

.scroll-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--mx-muted); font-size: 1.25rem; text-decoration: none; z-index: 5; animation: hintBounce 2s ease-in-out infinite; }
.scroll-hint:hover { color: var(--mx-green); }
@keyframes hintBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ============================ MARQUEE ============================ */
.marquee { overflow: hidden; position: relative; padding: 1.1rem 0; border-block: 1px solid var(--mx-border); background: var(--mx-bg-2); }
.marquee-track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: .55rem; color: var(--mx-muted); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.marquee-item i { color: var(--mx-green); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================ BANDS (light) ============================ */
.stats-band { background: linear-gradient(180deg, var(--mx-bg-2), #fff); padding: 3.2rem 0; border-block: 1px solid var(--mx-border); }
.stats-band .stat-num { font-family: var(--mx-font-head); font-size: 2.6rem; font-weight: 800; color: var(--mx-black); }
.how-band { background: var(--mx-bg-2); padding: 3.5rem 0; }
.cta-band {
  background: var(--mx-black); color: #fff; border-radius: 26px; padding: 3.2rem 1.5rem;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(500px 240px at 85% 10%, rgba(248, 90, 0, .4), transparent 60%),
    radial-gradient(400px 200px at 10% 90%, rgba(255, 138, 43, .22), transparent 60%);
}
.cta-band, .cta-band * { position: relative; }
.cta-band h3 { color: #fff; }
.cta-band .text-secondary { color: #B9C4C0 !important; }
.cta-band .btn-warning { background: var(--mx-green); color: #fff; }
.cta-band .btn-warning:hover { background: var(--mx-green-deep); color: #fff; }
.cta-band .btn-premium { background: var(--mx-green); }
.step-card { position: relative; background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: 1.75rem 1.5rem; height: 100%; box-shadow: var(--mx-shadow-sm); }
.step-n {
  position: absolute; top: -16px; right: 18px; width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
  background: var(--mx-green); box-shadow: 0 10px 24px -10px rgba(248, 90, 0, .7);
}

/* ============================ FEATURE / SOFTWARE / PLAN CARDS ============================ */
.feature-card { background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: 1.5rem; height: 100%; box-shadow: var(--mx-shadow-sm); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mx-green-soft); color: var(--mx-green-deep); font-size: 1.2rem; margin-bottom: 1rem; }
[data-tilt] { transform-style: preserve-3d; transition: transform .25s var(--mx-ease), box-shadow .25s ease; will-change: transform; }

.software-card {
  display: flex; flex-direction: column; position: relative;
  background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: var(--mx-radius);
  padding: 1.75rem; height: 100%; text-decoration: none; color: var(--mx-ink);
  box-shadow: var(--mx-shadow-sm);
  transition: box-shadow .3s ease, border-color .3s ease, transform .25s var(--mx-ease);
}
.software-card:hover { border-color: var(--accent, var(--mx-green)); box-shadow: 0 26px 50px -24px rgba(10, 13, 16, .28), var(--mx-glow); color: var(--mx-black); transform: translateY(-4px); }
.sw-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; font-size: 1.6rem; margin-bottom: 1rem; background: var(--mx-green-soft); }
.sw-icon-xl { width: 76px; height: 76px; font-size: 2.2rem; border-radius: 20px; }
.sw-go { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent, var(--mx-green)); color: #fff; transition: transform .25s var(--mx-ease); }
.software-card:hover .sw-go { transform: translateX(5px); }

.plan-card { background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: 1.75rem; height: 100%; position: relative; box-shadow: var(--mx-shadow-sm); transition: transform .25s var(--mx-ease), box-shadow .3s ease, border-color .3s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(10, 13, 16, .3); }
.plan-card.featured { border-color: var(--mx-green); box-shadow: var(--mx-glow); animation: popularPulse 2.6s ease-in-out infinite; }
@keyframes popularPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(248, 90, 0, .28), 0 10px 40px -12px rgba(248, 90, 0, .35); } 50% { box-shadow: 0 0 0 1px rgba(248, 90, 0, .5), 0 16px 52px -12px rgba(248, 90, 0, .6); } }
.plan-price { font-size: 2.1rem; font-weight: 800; color: var(--mx-black); }
.plan-price small { font-size: .9rem; font-weight: 500; color: var(--mx-muted); }
.plan-features { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.plan-features li { padding: .3rem 0; color: var(--mx-ink); }
.plan-features .bi { color: var(--mx-green); margin-right: .5rem; }

.cycle-toggle { display: inline-flex; background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: 999px; padding: 4px; gap: 2px; box-shadow: var(--mx-shadow-sm); }
.cycle-toggle button { border: none; background: transparent; color: var(--mx-muted); font-weight: 600; font-size: .88rem; padding: .45rem 1.2rem; border-radius: 999px; transition: .25s var(--mx-ease); }
.cycle-toggle button.active { background: var(--mx-green); color: #fff; box-shadow: 0 6px 18px -8px rgba(248, 90, 0, .8); }
.plan-card.hide-cycle { display: none !important; }

/* ============================ AUTH SPLIT (light) ============================ */
.auth-shell { min-height: 100vh; display: flex; align-items: stretch; padding: 0; background: var(--mx-white); }
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; min-height: 100vh; }
.auth-side {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 3rem 3.5rem;
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(248, 90, 0, .16), transparent 60%),
    radial-gradient(600px 400px at 90% 90%, rgba(255, 138, 43, .12), transparent 60%),
    linear-gradient(160deg, #fbf9f7, #FFFFFF);
  border-right: 1px solid var(--mx-border);
}
.auth-side .side-shapes { position: absolute; inset: 0; pointer-events: none; }
.auth-side .side-shapes span { position: absolute; border-radius: 50%; border: 1.5px solid rgba(248, 90, 0, .25); animation: floaty 7s ease-in-out infinite; }
.auth-side h2 { font-weight: 800; letter-spacing: -.02em; }
.auth-side .lead { color: var(--mx-muted); }
.auth-form-col { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.auth-card { width: 100%; max-width: 440px; background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: 22px; padding: 2.25rem; box-shadow: var(--mx-shadow); }
@media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; } .auth-side { display: none; } .auth-shell { padding: 2.5rem 1rem; align-items: center; } }
.pw-meter { height: 6px; border-radius: 99px; background: var(--mx-surface-2); margin-top: .5rem; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: 99px; background: #C64233; transition: width .35s var(--mx-ease), background .35s ease; }
.pw-hint { font-size: .74rem; color: var(--mx-muted); margin-top: .3rem; }
.auth-card .form-control:focus { transform: translateY(-1px); }

/* ============================ DASHBOARD ============================ */
.dash-stat { background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: 1.25rem 1.5rem; height: 100%; min-width: 0; box-shadow: var(--mx-shadow-sm); transition: box-shadow .3s ease, border-color .3s ease; }
.dash-stat:hover { box-shadow: 0 18px 40px -26px rgba(10, 13, 16, .3); border-color: var(--mx-border-2); }
.dash-stat .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mx-muted); }
.dash-stat .value { font-size: 1.45rem; font-weight: 800; color: var(--mx-black); }
.referral-card { border: 1px solid var(--mx-border-2); background: linear-gradient(120deg, var(--mx-green-soft), #fff); }
.ring { --p: 0; --size: 86px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: conic-gradient(var(--mx-green) calc(var(--p) * 1%), var(--mx-surface-2) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--mx-white); }
.ring .ring-label { position: relative; text-align: center; line-height: 1.1; }
.ring .ring-label b { font-size: 1.15rem; color: var(--mx-black); display: block; }
.ring .ring-label small { color: var(--mx-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }

/* ============================ CHECKOUT STEPS ============================ */
.steps { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.75rem; }
.step-dot { display: flex; align-items: center; gap: .5rem; color: var(--mx-muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.step-dot .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-surface-2); border: 1px solid var(--mx-border); font-size: .78rem; }
.step-dot.active { color: var(--mx-black); }
.step-dot.active .n { background: var(--mx-green); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px rgba(248, 90, 0, .8); }
.step-dot.done { color: var(--mx-green-deep); }
.step-dot.done .n { background: var(--mx-green-soft); border-color: var(--mx-border-2); color: var(--mx-green-deep); }
.step-line { flex: 1; height: 2px; background: var(--mx-border); border-radius: 99px; position: relative; overflow: hidden; min-width: 24px; }
.step-line.done::after { content: ""; position: absolute; inset: 0; background: var(--mx-green); animation: lineFill .6s var(--mx-ease) forwards; }
@keyframes lineFill { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
.gateway-pick { cursor: pointer; border-radius: var(--mx-radius-sm); transition: background .2s ease, box-shadow .2s ease; padding: .5rem; }
.gateway-pick:hover { background: var(--mx-surface-2); }
.gateway-pick:has(input:checked) { background: var(--mx-green-soft); box-shadow: inset 0 0 0 1px var(--mx-border-2); }

/* ============================ ORDERS TIMELINE ============================ */
.tl { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.tl .tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mx-surface-2); border: 1px solid var(--mx-border); flex-shrink: 0; }
.tl .tl-dot.on { background: var(--mx-green); border-color: var(--mx-green); box-shadow: 0 0 10px rgba(248, 90, 0, .5); }
.tl .tl-seg { width: 16px; height: 2px; background: var(--mx-border); border-radius: 99px; }
.tl .tl-seg.on { background: var(--mx-green); }
.tl-rejected .tl-dot { background: #C64233; border-color: #C64233; }

/* ============================ SOFTWARE PAGES (light) ============================ */
.sw-hero {
  background:
    radial-gradient(800px 400px at 15% -10%, rgba(248, 90, 0, .14), transparent 62%),
    linear-gradient(180deg, #fdfcfb, #FFFFFF);
  color: var(--mx-ink); padding: 4rem 0 4.5rem; border-bottom: 1px solid var(--mx-border);
}
.sw-hero .breadcrumb a { color: var(--mx-green-deep); text-decoration: none; }
.sw-hero .lead { color: var(--mx-muted); }
.sw-preview { perspective: 900px; }
.sw-preview-card { max-width: 380px; margin-left: auto; transform: rotateY(-8deg) rotateX(4deg); transition: transform .4s var(--mx-ease); }
.sw-preview:hover .sw-preview-card { transform: rotateY(0) rotateX(0); }
.sw-custom-wrap { padding: 3rem 0; }
.sw-custom-wrap:empty, .sw-custom:empty { display: none; }
.sw-custom .text-secondary { color: var(--mx-muted) !important; }

/* ============================ TABS ============================ */
.tab-bar { display: flex; gap: .25rem; border-bottom: 1px solid var(--mx-border); }
.tab-btn { border: none; background: transparent; color: var(--mx-muted); font-weight: 600; font-size: .95rem; padding: .7rem 1.1rem; position: relative; transition: color .2s ease; }
.tab-btn::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: var(--mx-green); transition: right .3s var(--mx-ease); }
.tab-btn:hover { color: var(--mx-black); }
.tab-btn.active { color: var(--mx-green-deep); }
.tab-btn.active::after { right: 0; }
.tab-pane { display: none; animation: paneIn .35s var(--mx-ease); }
.tab-pane.active { display: block; }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================ FOOTER (light) ============================ */
.portal-footer { background: var(--mx-bg-2); color: var(--mx-muted); padding: 1.5rem 0; font-size: .875rem; margin-top: 3rem; border-top: 1px solid var(--mx-border); }
.portal-footer a { color: var(--mx-ink); text-decoration: none; }
.portal-footer a:hover { color: var(--mx-green-deep); }

/* ============================ AI FLOAT BUTTON ============================ */
.ai-float-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 1500;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--mx-green); color: #fff; font-size: 1.45rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -10px rgba(248, 90, 0, .65);
  text-decoration: none;
  transition: transform .25s var(--mx-ease), box-shadow .25s ease;
}
.ai-float-btn:hover { transform: translateY(-4px) scale(1.05); color: #fff; box-shadow: 0 18px 44px -10px rgba(248, 90, 0, .8); }
.ai-float-ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mx-green); animation: aiPing 2.2s ease-out infinite; }
@keyframes aiPing { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* ============================ AI CHAT PAGE (support) ============================ */
.chat-shell { display: flex; flex-direction: column; height: calc(100vh - 62px); max-width: 860px; margin: 0 auto; background: var(--mx-white); }
.chat-head {
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--mx-border); background: var(--mx-white);
  position: sticky; top: 62px; z-index: 10; box-shadow: var(--mx-shadow-sm);
}
.chat-back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--mx-black); text-decoration: none; transition: background .2s; }
.chat-back:hover { background: var(--mx-green-soft); color: var(--mx-green-deep); }
.chat-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mx-green); color: #fff; font-size: 1.1rem; box-shadow: 0 8px 20px -8px rgba(248, 90, 0, .7); }
.chat-head b { color: var(--mx-black); display: block; font-size: .95rem; }
.chat-head small { color: var(--mx-muted); font-size: .72rem; display: flex; align-items: center; gap: .35rem; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mx-green); display: inline-block; animation: onlineBlink 2s ease-in-out infinite; }
@keyframes onlineBlink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.chat-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mx-border); background: var(--mx-white); color: var(--mx-ink); text-decoration: none; transition: .2s; }
.chat-icon-btn:hover { background: var(--mx-green-soft); color: var(--mx-green-deep); border-color: var(--mx-border-2); }
.chat-body { flex: 1; overflow-y: auto; padding: 1.5rem 1rem 2rem; position: relative; scroll-behavior: smooth; }
.chat-bg-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(10, 13, 16, .07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.chat-welcome { text-align: center; padding: 2.2rem 1rem; position: relative; }
.chat-welcome-icon { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 22px; background: var(--mx-green-soft); color: var(--mx-green-deep); font-size: 1.7rem; margin-bottom: 1rem; animation: floaty 4s ease-in-out infinite; }
.chat-welcome h5 { color: var(--mx-black); }
.chat-welcome h5 b { color: var(--mx-green-deep); }
.chat-chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; position: relative; }
.chat-chip {
  border: 1px solid var(--mx-border-2); background: var(--mx-white); color: var(--mx-ink);
  border-radius: 999px; padding: .5rem 1rem; font-size: .84rem; font-weight: 600;
  box-shadow: var(--mx-shadow-sm); transition: .2s var(--mx-ease);
}
.chat-chip:hover { background: var(--mx-green-soft); color: var(--mx-green-deep); transform: translateY(-2px); }
.chat-row { display: flex; margin-bottom: .9rem; position: relative; animation: msgIn .3s var(--mx-ease); }
.chat-row.me { justify-content: flex-end; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chat-bubble { max-width: 76%; padding: .7rem 1rem; border-radius: 16px; font-size: .92rem; line-height: 1.5; }
.chat-row.ai .chat-bubble { background: var(--mx-bg-2); border: 1px solid var(--mx-border); border-bottom-left-radius: 5px; color: var(--mx-ink); }
.chat-row.me .chat-bubble { background: var(--mx-green); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 10px 24px -12px rgba(248, 90, 0, .7); }
.chat-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chat-action-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mx-white); border: 1.5px solid var(--mx-green); color: var(--mx-green-deep);
  font-weight: 700; font-size: .82rem; border-radius: 999px; padding: .42rem .95rem;
  text-decoration: none; box-shadow: var(--mx-shadow-sm); transition: .2s var(--mx-ease);
}
.chat-action-btn:hover { background: var(--mx-green); color: #fff; transform: translateY(-2px); }
.chat-typing { display: inline-flex; gap: 5px; padding: .9rem 1.1rem; background: var(--mx-bg-2); border: 1px solid var(--mx-border); border-radius: 16px; border-bottom-left-radius: 5px; }
.chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--mx-green); animation: typingBounce 1.2s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }
.chat-input { display: flex; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--mx-border); background: var(--mx-white); position: sticky; bottom: 0; }
.chat-input .form-control { border-radius: 999px; padding: .65rem 1.2rem; }
.chat-send {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: none; background: var(--mx-green); color: #fff; font-size: 1.05rem; flex-shrink: 0;
  box-shadow: 0 10px 24px -8px rgba(248, 90, 0, .7); transition: .2s var(--mx-ease);
}
.chat-send:hover { background: var(--mx-green-deep); transform: scale(1.06); }
.chat-send:disabled { opacity: .6; transform: none; }

/* ============================ SCROLL REVEAL FALLBACK ============================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0ms), transform .7s var(--mx-ease) var(--d, 0ms); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 767.98px) {
  .section-pad { padding: 2.5rem 0; }
  .stats-band .stat-num { font-size: 2rem; }
  .cta-band { padding: 2.2rem 1.1rem; }
  .plan-card, .software-card { padding: 1.35rem; }
  .hero, .hero-v2 { padding: 3.2rem 0 3.6rem !important; }
  .chat-shell { height: calc(100vh - 56px); }
  .chat-head { top: 56px; }
}
@media (max-width: 991.98px) {
  .hero-v2 { min-height: auto; }
  .mockup { transform: none; width: 94%; }
  .scene:hover .mockup { transform: none; }
  .hero-v2 .c2 { right: 0; top: 24%; }
}
@media (max-width: 575.98px) {
  .dash-stat .value { font-size: 1.2rem; }
  .plan-price { font-size: 1.7rem; }
  .splash-brand { font-size: 1.6rem; }
  .ring { --size: 72px; }
  .hero-ministats { gap: .9rem; }
  .hero-ministats b { font-size: 1.15rem; }
  .mock-cards { gap: .4rem; }
  .ai-float-btn { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 1.25rem; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  #splashScreen { display: none !important; }
  .mock-chart span, .scroll-hint, .pulse-dot::after { animation: none; }
}

/* ============================================================================
   v8 — FULL SAAS UPGRADE (Premium • Sharp • 3D Animated)
   Naye components: announcement bar, bell, coupons, invoice, blog, comparison,
   testimonials, FAQ, reviews — + sharper 3D polish. 2-color rule maintained.
   ============================================================================ */

/* ---------- ANNOUNCEMENT BAR (admin se control) ---------- */
.ann-bar{position:relative;z-index:1030;padding:10px 46px 10px 14px;font-size:.86rem;border-bottom:1px solid var(--mx-border)}
.ann-bar .ann-emoji{font-size:1.1rem}
.ann-bar .ann-text{color:var(--mx-muted)}
.ann-info{background:linear-gradient(90deg,rgba(248, 90, 0,.12),rgba(248, 90, 0,.04));color:var(--mx-black)}
.ann-success{background:linear-gradient(90deg,rgba(248, 90, 0,.2),rgba(248, 90, 0,.06));color:var(--mx-black)}
.ann-warning{background:linear-gradient(90deg,rgba(198,67,51,.12),rgba(198,67,51,.04));color:var(--mx-black)}
.ann-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:1.25rem;line-height:1;color:var(--mx-muted);cursor:pointer;padding:2px 6px;border-radius:6px}
.ann-close:hover{background:rgba(10,13,16,.06);color:var(--mx-black)}

/* ---------- NOTIFICATION BELL + DROPDOWN ---------- */
.bell-btn{position:relative;width:42px;height:42px;border-radius:13px;border:1px solid var(--mx-border);background:#fff;color:var(--mx-black);display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.bell-btn:hover{transform:translateY(-2px) rotate(-8deg);box-shadow:0 10px 24px -12px rgba(248, 90, 0,.45);color:var(--mx-green-deep)}
.bell-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--mx-green);color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 3px 8px rgba(248, 90, 0,.5);animation:bellPulse 2.2s infinite}
@keyframes bellPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.bell-menu{min-width:320px;max-width:92vw;padding:.4rem;border-radius:16px;border:1px solid var(--mx-border)}
.notif-drop{display:flex;align-items:flex-start;gap:.4rem;border-radius:10px;padding:.5rem .6rem;white-space:normal;line-height:1.35}
.notif-drop.is-new{background:rgba(248, 90, 0,.08)}
.notif-drop.is-new .bi{color:var(--mx-green-deep)}

/* notifications page list */
.notif-list{display:flex;flex-direction:column;gap:.6rem}
.notif-item{display:flex;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--mx-border);border-radius:16px;padding:.9rem 1rem;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
.notif-item:hover{transform:translateX(6px);box-shadow:0 14px 30px -18px rgba(10,13,16,.25);border-color:rgba(248, 90, 0,.4)}
.notif-item.unread{border-left:4px solid var(--mx-green);background:linear-gradient(90deg,rgba(248, 90, 0,.06),#fff 55%)}
.notif-icon{width:42px;height:42px;flex-shrink:0;border-radius:13px;background:rgba(248, 90, 0,.12);color:var(--mx-green-deep);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.notif-item b{font-size:.92rem}
.notif-item .text-secondary{display:block}

/* ---------- COUPON BOX (checkout) ---------- */
.coupon-box{border:1.5px dashed rgba(248, 90, 0,.45);border-radius:16px;background:linear-gradient(135deg,rgba(248, 90, 0,.05),#fff 60%);overflow:hidden}
.coupon-box .form-control{text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ---------- INVOICE (print-ready) ---------- */
.invoice-card{background:#fff;border:1px solid var(--mx-border);border-radius:20px;padding:2.2rem;box-shadow:0 30px 70px -40px rgba(10,13,16,.35);position:relative;overflow:hidden}
.invoice-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--mx-green),var(--mx-green-2))}
.invoice-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1.2rem;border-bottom:1.5px solid var(--mx-border)}
.inv-brand{font-size:1.25rem;display:flex;align-items:center;gap:.6rem}
.inv-logo{width:40px;height:40px;border-radius:12px;background:var(--mx-green);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.inv-sub{color:var(--mx-muted)}
.inv-title{font-weight:800;letter-spacing:.18em;font-size:.85rem;color:var(--mx-green-deep)}
.inv-no{font-weight:700;font-size:1.05rem}
.inv-grid{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.3rem 0}
.inv-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mx-muted);font-weight:700;margin-bottom:.25rem}
.inv-table{width:100%;border-collapse:collapse;margin:.4rem 0 1.3rem}
.inv-table th{text-align:left;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-muted);padding:.6rem .3rem;border-bottom:1.5px solid var(--mx-border)}
.inv-table td{padding:.75rem .3rem;border-bottom:1px solid var(--mx-border);vertical-align:top}
.inv-table tfoot td{border-bottom:0;padding-top:.5rem}
.inv-total{font-size:1.3rem;font-weight:800;color:var(--mx-green-deep)}
.inv-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.2rem;border-top:1.5px solid var(--mx-border)}
.inv-thanks{margin-top:1.4rem;text-align:center;font-size:.8rem;color:var(--mx-muted)}
@media print{
  body{background:#fff!important}
  .portal-nav,.portal-footer,.ai-float-btn,.no-print,#splashScreen,.ann-bar{display:none!important}
  .invoice-card{box-shadow:none;border:0;padding:1rem}
  .container{max-width:100%!important}
}

/* ---------- BLOG ---------- */
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mx-border);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;height:100%;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.blog-card:hover{transform:translateY(-7px) rotate(-.5deg);box-shadow:0 26px 50px -24px rgba(10,13,16,.3);border-color:rgba(248, 90, 0,.45);color:inherit}
.blog-emoji{font-size:2rem;background:linear-gradient(135deg,rgba(248, 90, 0,.1),rgba(248, 90, 0,.03));padding:1.5rem 1.3rem 1.1rem}
.blog-body{padding:0 1.3rem 1.2rem;flex-grow:1}
.blog-body h5{font-weight:700;font-size:1.02rem}
.blog-read{padding:.7rem 1.3rem;border-top:1px solid var(--mx-border);color:var(--mx-green-deep);font-size:.84rem;font-weight:600}
.blog-card:hover .blog-read i{transform:translateX(4px)}
.blog-read i{transition:transform .25s;display:inline-block}
.post-body{font-size:1.02rem;line-height:1.85;color:#22282A}
.post-body h2,.post-body h3{font-weight:800;margin:1.6em 0 .5em}
.post-body p{margin-bottom:1em}
.post-body img{max-width:100%;border-radius:14px}
.post-body a{color:var(--mx-green-deep)}
.post-body ul,.post-body ol{padding-left:1.3rem}
.blog-date{letter-spacing:.06em}

/* ---------- COMPARISON TABLE ---------- */
.compare-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--mx-border);background:#fff;box-shadow:0 24px 60px -40px rgba(10,13,16,.3)}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;margin:0}
.compare-table th,.compare-table td{padding:.95rem 1.1rem;border-bottom:1px solid var(--mx-border);text-align:left}
.compare-table thead th{background:linear-gradient(180deg,rgba(248, 90, 0,.1),rgba(248, 90, 0,.03));font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mx-green-deep);position:sticky;top:0}
.compare-table tbody tr{transition:background .2s}
.compare-table tbody tr:hover{background:rgba(248, 90, 0,.05)}
.cmp-f{font-weight:600;font-size:.92rem}
.cmp-yes{color:var(--mx-green);font-size:1.05rem}
.cmp-no{color:#C7CFCB;font-size:1.05rem}
.compare-table tbody tr:last-child td{border-bottom:0}

/* ---------- TESTIMONIALS ---------- */
.tm-card{background:#fff;border:1px solid var(--mx-border);border-radius:18px;padding:1.5rem;height:100%;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.tm-card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(248, 90, 0,.14),transparent 70%);top:-40px;right:-40px;pointer-events:none}
.tm-stars{color:var(--mx-green);font-size:.85rem;letter-spacing:.08em}
.tm-who{display:flex;align-items:center;gap:.65rem}
.tm-who .avatar{width:38px;height:38px;font-size:.95rem}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.faq-item{background:#fff;border:1px solid var(--mx-border);border-radius:15px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq-item.open{border-color:rgba(248, 90, 0,.5);box-shadow:0 16px 36px -24px rgba(248, 90, 0,.35)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:none;border:0;padding:1rem 1.2rem;font-weight:700;color:var(--mx-black);text-align:left;font-size:.96rem}
.faq-ico{color:var(--mx-green);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.faq-item.open .faq-ico{transform:rotate(135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:320px}
.faq-a p{padding:0 1.2rem 1.1rem;margin:0}

/* ---------- REVIEWS ---------- */
.review-item{background:#fff;border:1px solid var(--mx-border);border-radius:16px;padding:1.15rem 1.3rem;margin-bottom:.8rem;transition:transform .25s,box-shadow .25s}
.review-item:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(10,13,16,.28)}
.review-form-card{position:sticky;top:90px;border-radius:18px}
.rating-pill{display:inline-flex;align-items:center;gap:.35rem;background:rgba(248, 90, 0,.1);border:1px solid rgba(248, 90, 0,.3);color:var(--mx-green-deep);font-weight:700;font-size:.85rem;padding:.35rem .8rem;border-radius:999px}
.rating-pill i{color:var(--mx-green)}
.rating-pill small{font-weight:600;color:var(--mx-muted)}
.star-pick{display:inline-flex;flex-direction:row-reverse;gap:.25rem}
.star-pick input{display:none}
.star-pick label{font-size:1.5rem;color:#C7CFCB;cursor:pointer;transition:transform .15s,color .15s}
.star-pick label:hover,.star-pick label:hover ~ label{color:var(--mx-green);transform:scale(1.15)}
.star-pick input:checked ~ label{color:var(--mx-green)}
.star-pick input:checked ~ label:hover{transform:scale(1.15)}

/* ---------- SHARPER 3D PREMIUM POLISH (v8) ---------- */
/* buttons: 3D press + shine sweep */
.btn-primary,.btn-premium,.btn-topup{position:relative;overflow:hidden;transform-style:preserve-3d;box-shadow:0 8px 20px -8px rgba(248, 90, 0,.55),inset 0 -3px 0 rgba(0,0,0,.18)}
.btn-primary::after,.btn-premium::after,.btn-topup::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .55s ease}
.btn-primary:hover::after,.btn-premium:hover::after,.btn-topup:hover::after{left:130%}
.btn-primary:active,.btn-premium:active,.btn-topup:active{transform:translateY(2px);box-shadow:0 4px 12px -6px rgba(248, 90, 0,.5)}
/* cards: deeper 3D hover */
.software-card,.feature-card,.step-card,.plan-card{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.software-card:hover,.feature-card:hover,.step-card:hover{box-shadow:0 30px 60px -28px rgba(10,13,16,.35),0 0 0 1px rgba(248, 90, 0,.25)}
/* hero floating chips: z-depth */
.card3d{transform-style:preserve-3d;backface-visibility:hidden}
.card3d:hover{transform:translateZ(24px)}
/* section grid pattern (tech feel) */
.stats-band,.how-band{position:relative}
.stats-band::before,.how-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,13,16,.05) 1px,transparent 1.4px);background-size:22px 22px;pointer-events:none}
/* sharper glass edges */
.glass{border:1px solid rgba(10,13,16,.08);box-shadow:0 24px 60px -32px rgba(10,13,16,.35)}
/* avatar统一 */
.avatar{width:38px;height:38px;border-radius:12px;background:var(--mx-green);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}

/* ===== SOURCE: theme-v9.css ===== */
/* ============================================================================
   MIRZA X LABS — Theme v9  (SHARP PREMIUM • DEEP 3D • DARK MODE)
   Additive layer: loads AFTER theme.css, overrides + extends. Nothing removed,
   so any page that misses a v9 rule still renders correctly.

   What's new in v9
   ---------------
   1. Real dark mode ([data-theme="dark"]) with proper token inversion
   2. Genuine 3D depth — cards rotate in 3D with inner layers on translateZ planes
   3. Cursor spotlight + aurora hero glow + film-grain (data-URI, no requests)
   4. Scroll progress bar + active-section nav highlighting
   5. Magnetic buttons with 3D press depth
   6. Accessible :focus-visible rings, skip-link, aria-friendly accordion states
   7. 4-column mega footer
   8. Narrative section rhythm (alternating bands, glow dividers)
   9. Everything guarded by prefers-reduced-motion
   ============================================================================ */

/* ============================== 1. TOKENS ============================== */
:root {
  /* brand — unchanged, 2-colour rule kept */
  --mx-green: #f85a00;
  --mx-green-2: #ff8a2b;
  --mx-green-deep: #d84a00;
  --mx-green-soft: rgba(248, 90, 0, .1);
  --mx-black: #170c06;

  /* v9 depth system */
  --mx-depth-1: translateZ(18px);
  --mx-depth-2: translateZ(38px);
  --mx-depth-3: translateZ(62px);
  --mx-persp: 900px;

  /* v9 motion */
  --mx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mx-smooth: cubic-bezier(.22, 1, .36, 1);
  --mx-dur: .45s;

  /* v9 grain (data-URI, zero requests) */
  --mx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---- DARK THEME ---- */
html[data-theme="dark"] {
  --mx-bg: #150a05;
  --mx-bg-2: #0C1014;
  --mx-surface: #1b0f07;
  --mx-surface-2: #161D24;
  --mx-border: rgba(255, 255, 255, .09);
  --mx-border-2: rgba(255, 138, 43, .32);
  --mx-ink: #f8ebe0;
  --mx-muted: #8B9B95;
  --mx-white: #150a05;

  --mx-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85);
  --mx-shadow-sm: 0 10px 28px -14px rgba(0, 0, 0, .7);
  --mx-glow: 0 0 0 1px rgba(255, 138, 43, .3), 0 14px 46px -14px rgba(248, 90, 0, .5);

  /* legacy aliases so v6/v8 classes inherit dark correctly */
  --af-bg: var(--mx-bg); --af-bg-2: var(--mx-bg-2);
  --af-surface: var(--mx-surface); --af-surface-2: var(--mx-surface-2);
  --af-glass: rgba(16, 22, 27, .82); --af-glass-2: rgba(12, 16, 20, .6);
  --af-border: var(--mx-border); --af-border-2: var(--mx-border-2);
  --af-primary: var(--mx-green); --af-primary-2: var(--mx-green-2);
  --af-text: var(--mx-ink); --af-muted: var(--mx-muted);

  color-scheme: dark;
}

/* dark theme surface corrections (theme.css forces light values) */
html[data-theme="dark"] body { background: var(--mx-bg); color: var(--mx-ink); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] .display-6 { color: #fdf3eb; }
html[data-theme="dark"] a { color: var(--mx-green-2); }
html[data-theme="dark"] a:hover { color: var(--mx-green); }
html[data-theme="dark"] .text-secondary { color: var(--mx-muted) !important; }
html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-muted { color: var(--mx-muted) !important; }
html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-dark { color: #fdf3eb !important; }
html[data-theme="dark"] .text-white, html[data-theme="dark"] .text-white * { color: #fdf3eb !important; }
html[data-theme="dark"] .text-white .bi, html[data-theme="dark"] .text-white i { color: var(--mx-green-2) !important; }
html[data-theme="dark"] .cta-band .text-white, html[data-theme="dark"] .cta-band .text-white *,
html[data-theme="dark"] .dark-surface .text-white, html[data-theme="dark"] .dark-surface .text-white * { color: #fff !important; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-card, html[data-theme="dark"] .glass,
html[data-theme="dark"] .feature-card, html[data-theme="dark"] .step-card,
html[data-theme="dark"] .plan-card, html[data-theme="dark"] .software-card,
html[data-theme="dark"] .dash-stat, html[data-theme="dark"] .tm-card,
html[data-theme="dark"] .blog-card, html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .review-item, html[data-theme="dark"] .invoice-card,
html[data-theme="dark"] .notif-item, html[data-theme="dark"] .coupon-box,
html[data-theme="dark"] .auth-card, html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .compare-wrap { background: var(--mx-surface); border-color: var(--mx-border); color: var(--mx-ink); }

html[data-theme="dark"] .portal-nav { background: rgba(7, 9, 11, .78); border-bottom-color: var(--mx-border); }
html[data-theme="dark"] .portal-nav.shrunk { background: rgba(7, 9, 11, .94); }
html[data-theme="dark"] .portal-nav .navbar-brand strong { color: #fdf3eb; }
html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.6); }

html[data-theme="dark"] .hero, html[data-theme="dark"] .hero-v2, html[data-theme="dark"] .sw-hero {
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(248, 90, 0, .22), transparent 60%),
    radial-gradient(760px 380px at 96% 12%, rgba(255, 138, 43, .12), transparent 58%),
    linear-gradient(180deg, #0A0E11, #150a05);
}
html[data-theme="dark"] .hero-title { color: #fdf3eb; }
html[data-theme="dark"] .hero .lead, html[data-theme="dark"] .hero-v2 .lead { color: var(--mx-muted); }
html[data-theme="dark"] .hero-vignette { background: radial-gradient(120% 90% at 50% 0%, transparent 52%, rgba(7, 9, 11, .92) 100%); }
html[data-theme="dark"] .hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
html[data-theme="dark"] .hero-bg .b3 { background: rgba(255, 255, 255, .1); }

html[data-theme="dark"] .stats-band { background: linear-gradient(180deg, var(--mx-bg-2), var(--mx-bg)); }
html[data-theme="dark"] .how-band, html[data-theme="dark"] .marquee { background: var(--mx-bg-2); }
html[data-theme="dark"] .marquee-item { color: var(--mx-muted); }
html[data-theme="dark"] .stats-band .stat-num { color: #fdf3eb; }

html[data-theme="dark"] .cta-band { background: #05070A; }
html[data-theme="dark"] .cta-band h3 { color: #fff; }
html[data-theme="dark"] .cta-band .text-secondary { color: #9FADA8 !important; }

html[data-theme="dark"] .portal-footer { background: var(--mx-bg-2); color: var(--mx-muted); border-top-color: var(--mx-border); }
html[data-theme="dark"] .portal-footer a { color: var(--mx-ink); }

html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background: var(--mx-surface-2); border-color: var(--mx-border); color: var(--mx-ink);
}
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background: var(--mx-surface-2); color: #fff; }
html[data-theme="dark"] .form-control::placeholder { color: #6C7A75; }
html[data-theme="dark"] .bg-light { background: var(--mx-surface-2) !important; color: var(--mx-ink) !important; }

html[data-theme="dark"] .table { --bs-table-color: var(--mx-ink); }
html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table td { color: var(--mx-ink); border-color: var(--mx-border); }

html[data-theme="dark"] .badge.text-bg-light { background: var(--mx-surface-2) !important; color: var(--mx-ink) !important; border-color: var(--mx-border); }
html[data-theme="dark"] .badge.text-bg-warning { background: var(--mx-green) !important; color: #1f0e05 !important; }

html[data-theme="dark"] .mockup { background: var(--mx-surface); }
html[data-theme="dark"] .mock-bar { background: var(--mx-surface-2); border-bottom-color: var(--mx-border); }
html[data-theme="dark"] .mock-url { background: var(--mx-surface); border-color: var(--mx-border); color: var(--mx-muted); }
html[data-theme="dark"] .mock-cards .mc { background: var(--mx-surface-2); border-color: var(--mx-border); }
html[data-theme="dark"] .mock-cards b { color: #fdf3eb; }
html[data-theme="dark"] .card3d.glass { background: rgba(16, 22, 27, .9); }
html[data-theme="dark"] .orbit { background: var(--mx-surface); }

html[data-theme="dark"] .ann-info, html[data-theme="dark"] .ann-success { color: var(--mx-ink); }
html[data-theme="dark"] .ann-bar { background: rgba(248, 90, 0, .14); }
html[data-theme="dark"] .btn-google { background: var(--mx-surface-2); color: var(--mx-ink); }
html[data-theme="dark"] .btn-light { background: var(--mx-surface-2); color: var(--mx-ink); border-color: var(--mx-border); }
html[data-theme="dark"] .btn-outline-light { color: var(--mx-ink); border-color: var(--mx-border); }
html[data-theme="dark"] .btn-outline-light:hover { background: var(--mx-green); color: #1f0e05; border-color: var(--mx-green); }
html[data-theme="dark"] .post-body { color: #C6D2CE; }
html[data-theme="dark"] .cmp-no { color: #4a3a2e; }
html[data-theme="dark"] .compare-table thead th { color: var(--mx-green-2); }
html[data-theme="dark"] .cycle-toggle { background: var(--mx-surface); border-color: var(--mx-border); }
html[data-theme="dark"] .ring::before { background: var(--mx-surface); }
html[data-theme="dark"] .skl { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; }
html[data-theme="dark"] .chat-bg-dots { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); }
html[data-theme="dark"] .chat-shell, html[data-theme="dark"] .chat-head, html[data-theme="dark"] .chat-input { background: var(--mx-bg); }
html[data-theme="dark"] .chat-row.ai .chat-bubble { background: var(--mx-surface-2); border-color: var(--mx-border); color: var(--mx-ink); }
html[data-theme="dark"] .chat-typing { background: var(--mx-surface-2); border-color: var(--mx-border); }
html[data-theme="dark"] .chat-icon-btn { background: var(--mx-surface-2); border-color: var(--mx-border); color: var(--mx-ink); }
html[data-theme="dark"] .chat-chip { background: var(--mx-surface-2); border-color: var(--mx-border); color: var(--mx-ink); }
html[data-theme="dark"] .star-pick label { color: #4a3a2e; }
html[data-theme="dark"] .review-form-card { background: var(--mx-surface); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--mx-bg-2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #26302C; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--mx-green); }
html[data-theme="dark"] ::selection { background: rgba(255, 138, 43, .28); color: #fff; }

/* ====================== 2. SCROLL PROGRESS BAR ====================== */
#scrollProgress {
  position: fixed; top: 0; left: 0; z-index: 2000;
  width: 100%; height: 3px; pointer-events: none;
  background: transparent;
}
#scrollProgress span {
  display: block; height: 100%; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--mx-green-deep), var(--mx-green), var(--mx-green-2));
  box-shadow: 0 0 14px rgba(248, 90, 0, .8);
  will-change: transform;
}

/* ====================== 3. CURSOR SPOTLIGHT ====================== */
#cursorGlow {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(340px 340px at var(--gx, 50%) var(--gy, 50%),
              rgba(248, 90, 0, .13), transparent 68%);
  mix-blend-mode: plus-lighter;
}
html[data-theme="dark"] #cursorGlow {
  background: radial-gradient(380px 380px at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 138, 43, .16), transparent 70%);
}
#cursorGlow.on { opacity: 1; }

/* ====================== 4. FILM GRAIN OVERLAY ====================== */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--mx-grain);
  opacity: .028; mix-blend-mode: overlay;
}
html[data-theme="dark"] body::after { opacity: .05; }

/* ====================== 5. A11Y — SKIP LINK + FOCUS ====================== */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 4000;
  background: var(--mx-green); color: #1f0e05; font-weight: 700;
  padding: .6rem 1.1rem; border-radius: 0 0 12px 12px; text-decoration: none;
  transition: top .22s var(--mx-smooth);
}
.skip-link:focus { top: 0; color: #1f0e05; }

:focus-visible {
  outline: 3px solid var(--mx-green-2);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible,
.software-card:focus-visible, .blog-card:focus-visible, .notif-item:focus-visible {
  outline: 3px solid var(--mx-green-2); outline-offset: 3px;
}

/* ====================== 6. THEME TOGGLE ====================== */
.theme-toggle {
  position: relative; width: 52px; height: 28px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--mx-border);
  background: var(--mx-surface-2); cursor: pointer; padding: 0;
  transition: background .3s var(--mx-smooth), border-color .3s ease;
}
.theme-toggle:hover { border-color: var(--mx-green); }
.theme-toggle .knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--mx-green); color: #1f0e05;
  display: grid; place-items: center; font-size: .68rem;
  box-shadow: 0 3px 10px -2px rgba(248, 90, 0, .8);
  transition: transform .38s var(--mx-spring), background .3s ease;
}
html[data-theme="dark"] .theme-toggle .knob { transform: translateX(24px); }
.theme-toggle .knob i { transition: opacity .25s ease, transform .35s var(--mx-spring); }
.theme-toggle .knob .i-moon { display: none; }
html[data-theme="dark"] .theme-toggle .knob .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .knob .i-moon { display: block; }

/* ====================== 7. MAGNETIC BUTTONS ====================== */
.btn-premium, .btn-primary, .btn-topup { will-change: transform; }
.btn-premium.magnet, .btn-primary.magnet, .btn-topup.magnet {
  transition: transform .18s var(--mx-smooth), box-shadow .25s ease, background .2s ease;
}
/* 3D press depth on all CTAs */
.btn:active { transform: translateY(2px) scale(.985); }
.btn-premium, .btn-primary { box-shadow: 0 10px 26px -10px rgba(248, 90, 0, .55), inset 0 -3px 0 rgba(0, 0, 0, .2); }

/* ====================== 8. REAL 3D DEPTH CARDS ====================== */
.depth {
  transform-style: preserve-3d;
  transition: transform .5s var(--mx-smooth), box-shadow .5s var(--mx-smooth);
  will-change: transform;
}
.depth > * { transform-style: preserve-3d; }
.depth-l1 { transform: var(--mx-depth-1); }
.depth-l2 { transform: var(--mx-depth-2); }
.depth-l3 { transform: var(--mx-depth-3); }
/* sheen that tracks the pointer */
.depth::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px 220px at var(--px, 50%) var(--py, 50%),
              rgba(255, 255, 255, .16), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.depth:hover::before { opacity: 1; }
html[data-theme="dark"] .depth::before {
  background: radial-gradient(240px 240px at var(--px, 50%) var(--py, 50%),
              rgba(255, 138, 43, .2), transparent 62%);
}
/* lift on hover */
.depth:hover { box-shadow: 0 40px 80px -34px rgba(10, 13, 16, .45), var(--mx-glow); }

/* software / feature / plan / step / testimonial / blog cards get depth layers */
.software-card .sw-icon,
.feature-card .feature-icon,
.plan-card .plan-price,
.step-card .step-n,
.tm-card .tm-stars,
.blog-card .blog-emoji { transform: var(--mx-depth-1); transition: transform .5s var(--mx-smooth); }
.software-card:hover .sw-icon,
.feature-card:hover .feature-icon,
.plan-card:hover .plan-price,
.step-card:hover .step-n { transform: var(--mx-depth-3) scale(1.06); }
.software-card h5, .feature-card h6, .plan-card h5, .step-card h6 { transform: var(--mx-depth-1); }
.software-card .sw-go, .plan-card .btn { transform: var(--mx-depth-2); }

/* ====================== 9. SECTION RHYTHM ====================== */
.section-pad { padding: 5rem 0; }
.section-head { margin-bottom: 3.2rem; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
/* alternating narrative bands */
.band-a { background: linear-gradient(180deg, transparent, var(--mx-bg-2) 45%, transparent); }
.band-b { background: var(--mx-bg-2); }
/* glow divider between major sections */
.glow-divider {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--mx-border-2), transparent);
  position: relative;
}
.glow-divider::after {
  content: ""; position: absolute; left: 50%; top: -2px; width: 160px; height: 5px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(248, 90, 0, .55), transparent 70%);
  filter: blur(3px);
}

/* eyebrow gets a live sheen */
.eyebrow { position: relative; overflow: hidden; }
.eyebrow::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35), transparent 65%);
  transform: translateX(-120%);
  animation: eyebrowSheen 4.5s var(--mx-smooth) infinite;
}
@keyframes eyebrowSheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ====================== 10. NAV — ACTIVE SECTION ====================== */
.portal-nav .nav-link { position: relative; }
.portal-nav .nav-link::before {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: 2px; height: 2px;
  border-radius: 99px; background: var(--mx-green);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .35s var(--mx-spring);
}
.portal-nav .nav-link:hover::before, .portal-nav .nav-link.active::before { transform: scaleX(1); }
.portal-nav .nav-link.active { color: var(--mx-green-deep); font-weight: 600; }
html[data-theme="dark"] .portal-nav .nav-link.active { color: var(--mx-green-2); }

/* ====================== 11. HERO — AURORA + DEPTH ====================== */
.hero-v2 { isolation: isolate; }
.hero-aurora {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    conic-gradient(from 210deg at 30% 40%, rgba(248, 90, 0, .28), transparent 40%),
    conic-gradient(from 20deg at 75% 60%, rgba(255, 138, 43, .22), transparent 45%);
  filter: blur(70px); opacity: .75;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
html[data-theme="dark"] .hero-aurora { opacity: .5; }
@keyframes auroraDrift {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(8deg) scale(1.12); }
  100% { transform: rotate(-6deg) scale(1.05); }
}
/* hero text sits above the scene, with subtle depth */
.hero-v2 .hero-title { transform: var(--mx-depth-2); }
.hero-v2 .announce-pill { transform: var(--mx-depth-1); }
.hero-ministats b { text-shadow: 0 0 26px rgba(248, 90, 0, .5); }

/* scene gets real perspective */
.scene { transform-style: preserve-3d; }
.scene .mockup { transform-style: preserve-3d; }
.scene .mock-bar { transform: var(--mx-depth-3); }
.scene .mock-main { transform: var(--mx-depth-1); }

/* ====================== 12. MARQUEE — EDGE FADE ====================== */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ====================== 13. PLANS — 3D + COUNT-UP ====================== */
.plan-card { transform-style: preserve-3d; }
.plan-card .plan-price { font-variant-numeric: tabular-nums; }
.plan-card.featured { position: relative; }
.plan-card.featured::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 138, 43, .5), transparent 40%, rgba(248, 90, 0, .4));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; opacity: .8;
}
/* yearly savings badge */
.plan-save {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #1f0e05;
  background: linear-gradient(92deg, var(--mx-green-2), var(--mx-green));
  padding: .22rem .6rem; border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(248, 90, 0, .8);
}

/* ====================== 14. STATS — 3D TILES ====================== */
.stat-tile {
  background: var(--mx-surface); border: 1px solid var(--mx-border);
  border-radius: 20px; padding: 1.6rem 1rem; height: 100%;
  box-shadow: var(--mx-shadow-sm); transform-style: preserve-3d;
  transition: transform .45s var(--mx-smooth), box-shadow .45s var(--mx-smooth);
}
.stat-tile:hover { transform: translateY(-6px) rotateX(6deg); box-shadow: var(--mx-shadow), var(--mx-glow); }
.stat-tile .stat-num { transform: var(--mx-depth-2); }

/* ====================== 15. FOOTER — MEGA ====================== */
.portal-footer { padding: 3.2rem 0 1.6rem; margin-top: 4rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.2rem; }
.foot-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--mx-font-head); font-weight: 800; font-size: 1.15rem; color: var(--mx-black); }
html[data-theme="dark"] .foot-brand { color: #fdf3eb; }
.foot-tag { color: var(--mx-muted); font-size: .86rem; margin-top: .7rem; max-width: 30ch; line-height: 1.65; }
.foot-social { display: flex; gap: .5rem; margin-top: 1.1rem; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mx-surface-2); border: 1px solid var(--mx-border); color: var(--mx-ink);
  text-decoration: none; transition: transform .3s var(--mx-spring), background .25s, color .25s, border-color .25s;
}
.foot-social a:hover { transform: translateY(-4px) rotate(-6deg); background: var(--mx-green); color: #1f0e05; border-color: var(--mx-green); }
.foot-col h6 { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mx-muted); margin-bottom: .9rem; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.foot-col a { color: var(--mx-ink); text-decoration: none; font-size: .88rem; transition: color .2s, transform .2s; display: inline-block; }
.foot-col a:hover { color: var(--mx-green-deep); transform: translateX(4px); }
html[data-theme="dark"] .foot-col a:hover { color: var(--mx-green-2); }
.foot-bottom {
  margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--mx-border);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between;
  align-items: center; font-size: .82rem; color: var(--mx-muted);
}
.foot-bottom .foot-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }
@media (max-width: 767.98px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .foot-brand-col { grid-column: 1 / -1; }
}

/* ====================== 16. AI FLOAT BUTTON — 3D ====================== */
.ai-float-btn { transform-style: preserve-3d; }
.ai-float-btn i { transform: var(--mx-depth-1); }
.ai-float-btn::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 90, 0, .35), transparent 70%);
  animation: aiHalo 2.6s ease-in-out infinite;
}
@keyframes aiHalo { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }

/* ====================== 17. SPLASH — v3 (v9 polish superseded; cube/bar CSS removed v29) ====================== */

/* ====================== 18. FAQ — ARIA STATE ====================== */
.faq-q[aria-expanded="true"] .faq-ico { transform: rotate(135deg); }
.faq-item.open .faq-q[aria-expanded="true"] { color: var(--mx-green-deep); }
html[data-theme="dark"] .faq-item.open .faq-q[aria-expanded="true"] { color: var(--mx-green-2); }

/* ====================== 19. REVEAL — v9 SPRING ====================== */
[data-reveal] { transition: opacity .8s var(--mx-smooth) var(--d, 0ms), transform .8s var(--mx-spring) var(--d, 0ms); }
[data-reveal].revealed { transform: none; }

/* ====================== 20. RESPONSIVE ====================== */
@media (max-width: 991.98px) {
  .section-pad { padding: 3.4rem 0; }
  .hero-v2 .hero-title { transform: none; }
  .scene .mock-bar { transform: none; }
}
@media (max-width: 575.98px) {
  .section-pad { padding: 2.6rem 0; }
  #cursorGlow { display: none; }
  body::after { display: none; }
  .theme-toggle { width: 46px; height: 26px; }
  .theme-toggle .knob { width: 20px; height: 20px; }
  html[data-theme="dark"] .theme-toggle .knob { transform: translateX(20px); }
}

/* ====================== 21. REDUCED MOTION ====================== */
@media (prefers-reduced-motion: reduce) {
  #cursorGlow, body::after { display: none !important; }
  .depth, .depth > *, .depth-l1, .depth-l2, .depth-l3 { transform: none !important; }
  .depth::before { display: none; }
  .hero-aurora { animation: none; }
  .eyebrow::after { animation: none; display: none; }
  .stat-tile:hover, .software-card:hover .sw-icon, .plan-card:hover .plan-price { transform: none; }
  .foot-col a:hover, .foot-social a:hover { transform: none; }
  [data-reveal] { transition: none; }
  #scrollProgress { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .plan-card.featured::after { display: none; }
}

/* ====================== 22. PRINT ====================== */
@media print {
  #scrollProgress, #cursorGlow, .theme-toggle, .skip-link, .ai-float-btn { display: none !important; }
  body::after { display: none; }
  .depth, .depth > * { transform: none !important; box-shadow: none !important; }
}

/* ===== SOURCE: theme-v10.css ===== */
/* ============================================================================
   MIRZA X LABS — Theme v10  (GLOSSY FINTECH • SHARP • EVERY PAGE)
   Loads AFTER theme-v9.css. Purely additive — every rule is an override or a
   new component, so nothing that worked before can break.

   Design language (volzix-style fintech gloss):
     · surfaces  = white→translucent gradient + inset top highlight + soft bloom
     · accents   = green→emerald gradients with a travelling sheen
     · type      = tighter tracking, heavier weights, tabular numerals
     · motion    = springy, transform/opacity only, all reduced-motion safe
   ============================================================================ */

/* ============================== 1. GLOSS PRIMITIVES ============================== */
:root {
  --gloss-hi: inset 0 1px 0 rgba(255, 255, 255, .95);
  --gloss-hi-d: inset 0 1px 0 rgba(255, 255, 255, .14);
  --gloss-lo: inset 0 -1px 0 rgba(10, 13, 16, .06);
  --gloss-bloom: 0 18px 40px -22px rgba(10, 13, 16, .35);
  --gloss-bloom-lg: 0 34px 70px -30px rgba(10, 13, 16, .45);
  --gloss-ring: 0 0 0 1px rgba(248, 90, 0, .18);
  --sheen: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7), transparent 62%);
}

/* the base glossy surface — apply to anything that should look "wet" */
.gloss {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72));
  border: 1px solid rgba(10, 13, 16, .08);
  border-radius: var(--mx-radius, 18px);
  box-shadow: var(--gloss-hi), var(--gloss-lo), var(--gloss-bloom);
  overflow: hidden;
}
.gloss-strong {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .86));
  box-shadow: var(--gloss-hi), var(--gloss-lo), var(--gloss-bloom-lg);
}
/* travelling sheen on hover */
.gloss-sheen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--sheen);
  transform: translateX(-130%);
  transition: transform .7s var(--mx-smooth, ease);
}
.gloss-sheen:hover::after { transform: translateX(130%); }

html[data-theme="dark"] .gloss,
html[data-theme="dark"] .gloss-strong {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: var(--gloss-hi-d), var(--gloss-bloom);
}
html[data-theme="dark"] .gloss-strong { box-shadow: var(--gloss-hi-d), var(--gloss-bloom-lg); }

/* lift utility */
.lift { transition: transform .4s var(--mx-smooth, ease), box-shadow .4s ease; }
.lift:hover { transform: translateY(-5px); box-shadow: var(--gloss-bloom-lg), var(--mx-glow); }

/* ============================== 2. TYPOGRAPHY ============================== */
h1, h2, h3, h4, h5, .display-6, .hero-title {
  letter-spacing: -.028em;
  font-weight: 800;
}
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.02em; }
.section-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.section-head p { font-size: 1.02rem; }
.grad-text {
  background: linear-gradient(96deg, var(--mx-green-deep), var(--mx-green), var(--mx-green-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
html[data-theme="dark"] .grad-text {
  background: linear-gradient(96deg, var(--mx-green-2), #ffa35c, var(--mx-green));
  -webkit-background-clip: text; background-clip: text;
}
.num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.eyebrow {
  background: linear-gradient(180deg, rgba(248, 90, 0, .16), rgba(248, 90, 0, .07));
  box-shadow: var(--gloss-hi), 0 6px 16px -10px rgba(248, 90, 0, .5);
  border-color: rgba(248, 90, 0, .3);
  font-weight: 800;
}
html[data-theme="dark"] .eyebrow {
  background: linear-gradient(180deg, rgba(255, 138, 43, .2), rgba(248, 90, 0, .1));
  color: var(--mx-green-2);
  box-shadow: var(--gloss-hi-d);
}

/* ============================== 3. BUTTONS (glossy) ============================== */
.btn {
  border-radius: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .18s var(--mx-smooth, ease), box-shadow .25s ease, background .25s ease, filter .25s ease;
}
.btn-lg { border-radius: 15px; padding: .7rem 1.5rem; }
.btn-sm { border-radius: 10px; }

.btn-primary, .btn-premium, .btn-topup, .btn-warning {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--mx-green) 0%, var(--mx-green-deep) 100%);
  color: #fff; border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 10px 24px -10px rgba(248, 90, 0, .7);
}
.btn-primary:hover, .btn-premium:hover, .btn-topup:hover, .btn-warning:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(0, 0, 0, .2),
    0 16px 32px -12px rgba(248, 90, 0, .85);
  filter: saturate(1.12) brightness(1.04);
}
.btn-primary:active, .btn-premium:active, .btn-topup:active, .btn-warning:active {
  transform: translateY(2px) scale(.985);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28), 0 4px 10px -6px rgba(248, 90, 0, .6);
}
/* the sheen sweep */
.btn-primary::after, .btn-premium::after, .btn-topup::after, .btn-warning::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  transition: left .55s var(--mx-smooth, ease);
  pointer-events: none;
}
.btn-primary:hover::after, .btn-premium:hover::after,
.btn-topup:hover::after, .btn-warning:hover::after { left: 135%; }

.btn-outline-primary, .btn-outline-light, .btn-outline-secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
  border: 1px solid rgba(248, 90, 0, .35);
  color: var(--mx-green-deep);
  box-shadow: var(--gloss-hi), 0 6px 16px -12px rgba(10, 13, 16, .3);
}
.btn-outline-primary:hover, .btn-outline-light:hover, .btn-outline-secondary:hover {
  background: linear-gradient(180deg, rgba(248, 90, 0, .14), rgba(248, 90, 0, .06));
  border-color: var(--mx-green);
  color: var(--mx-green-deep);
  transform: translateY(-2px);
  box-shadow: var(--gloss-hi), 0 12px 24px -14px rgba(248, 90, 0, .6);
}
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-outline-secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border-color: rgba(255, 138, 43, .32);
  color: var(--mx-green-2);
  box-shadow: var(--gloss-hi-d);
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
  background: linear-gradient(180deg, rgba(255, 138, 43, .22), rgba(248, 90, 0, .1));
  color: #fff;
}
.btn-light, .btn-google {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
  border: 1px solid rgba(10, 13, 16, .1);
  color: var(--mx-ink);
  box-shadow: var(--gloss-hi), 0 6px 16px -12px rgba(10, 13, 16, .35);
}
.btn-light:hover, .btn-google:hover { transform: translateY(-2px); box-shadow: var(--gloss-hi), 0 12px 24px -14px rgba(10, 13, 16, .45); }
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-google {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .12); color: var(--mx-ink);
  box-shadow: var(--gloss-hi-d);
}
.btn:disabled, .btn.disabled { opacity: .55; transform: none !important; box-shadow: none; }

/* ============================== 4. CARDS ============================== */
.card, .glass-card, .glass, .feature-card, .step-card, .plan-card,
.software-card, .dash-stat, .tm-card, .blog-card, .faq-item, .review-item,
.invoice-card, .notif-item, .coupon-box, .auth-card, .compare-wrap, .stat-tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .74));
  border: 1px solid rgba(10, 13, 16, .08);
  border-radius: var(--mx-radius, 18px);
  box-shadow: var(--gloss-hi), var(--gloss-lo), var(--gloss-bloom);
}
.card-header {
  background: linear-gradient(180deg, rgba(248, 90, 0, .07), transparent);
  border-bottom: 1px solid rgba(10, 13, 16, .07);
  font-weight: 700;
}
.card-body { border-radius: inherit; }
html[data-theme="dark"] .card, html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .glass, html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .step-card, html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .software-card, html[data-theme="dark"] .dash-stat,
html[data-theme="dark"] .tm-card, html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .faq-item, html[data-theme="dark"] .review-item,
html[data-theme="dark"] .invoice-card, html[data-theme="dark"] .notif-item,
html[data-theme="dark"] .coupon-box, html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .compare-wrap, html[data-theme="dark"] .stat-tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: var(--gloss-hi-d), var(--gloss-bloom);
}
html[data-theme="dark"] .card-header {
  background: linear-gradient(180deg, rgba(255, 138, 43, .1), transparent);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* glossy hover for every card type */
.feature-card, .step-card, .plan-card, .software-card, .tm-card, .blog-card,
.dash-stat, .stat-tile, .review-item {
  transition: transform .4s var(--mx-smooth, ease), box-shadow .4s ease, border-color .3s ease;
}
.feature-card:hover, .step-card:hover, .plan-card:hover, .software-card:hover,
.tm-card:hover, .blog-card:hover, .dash-stat:hover, .stat-tile:hover, .review-item:hover {
  transform: translateY(-6px);
  border-color: rgba(248, 90, 0, .4);
  box-shadow: var(--gloss-hi), var(--gloss-lo), var(--gloss-bloom-lg), var(--mx-glow);
}
html[data-theme="dark"] .feature-card:hover, html[data-theme="dark"] .step-card:hover,
html[data-theme="dark"] .plan-card:hover, html[data-theme="dark"] .software-card:hover,
html[data-theme="dark"] .tm-card:hover, html[data-theme="dark"] .blog-card:hover,
html[data-theme="dark"] .dash-stat:hover, html[data-theme="dark"] .stat-tile:hover,
html[data-theme="dark"] .review-item:hover {
  border-color: rgba(255, 138, 43, .45);
}

/* ============================== 5. TABLES ============================== */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(248, 90, 0, .05); }
.table thead th {
  background: linear-gradient(180deg, rgba(248, 90, 0, .12), rgba(248, 90, 0, .04));
  color: var(--mx-green-deep);
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid rgba(248, 90, 0, .22);
  padding: .8rem .9rem;
  white-space: nowrap;
}
html[data-theme="dark"] .table thead th {
  background: linear-gradient(180deg, rgba(255, 138, 43, .14), rgba(248, 90, 0, .04));
  color: var(--mx-green-2);
  border-bottom-color: rgba(255, 138, 43, .22);
}
.table td { padding: .8rem .9rem; vertical-align: middle; }
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover { background: rgba(248, 90, 0, .055); }
html[data-theme="dark"] .table tbody tr:hover { background: rgba(255, 138, 43, .07); }
.table-responsive { border-radius: var(--mx-radius, 18px); }
.card > .table-responsive { border-radius: inherit; }
/* round the outer corners of a table inside a card */
.card > .table-responsive > .table { margin-bottom: 0; }
.card > .table-responsive > .table > :first-child > :first-child { border-top-left-radius: var(--mx-radius, 18px); }
.card > .table-responsive > .table > :first-child > :last-child  { border-top-right-radius: var(--mx-radius, 18px); }

/* ============================== 6. FORMS ============================== */
.form-control, .form-select {
  border-radius: 12px;
  border: 1px solid rgba(10, 13, 16, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
  box-shadow: inset 0 1px 2px rgba(10, 13, 16, .05);
  padding: .62rem .9rem;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--mx-green);
  box-shadow: inset 0 1px 2px rgba(10, 13, 16, .04), 0 0 0 .24rem rgba(248, 90, 0, .16);
  transform: translateY(-1px);
}
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.form-text { font-size: .8rem; }
.input-group-text {
  background: linear-gradient(180deg, rgba(248, 90, 0, .1), rgba(248, 90, 0, .04));
  border: 1px solid rgba(10, 13, 16, .12);
  border-radius: 12px; font-weight: 600;
}
html[data-theme="dark"] .input-group-text {
  background: linear-gradient(180deg, rgba(255, 138, 43, .16), rgba(248, 90, 0, .06));
  border-color: rgba(255, 255, 255, .13);
}
.form-check-input { width: 1.15em; height: 1.15em; border-width: 1.5px; }
.form-check-input:checked {
  background-color: var(--mx-green); border-color: var(--mx-green);
  box-shadow: 0 3px 10px -3px rgba(248, 90, 0, .7);
}
.form-switch .form-check-input { width: 2.2em; height: 1.15em; }

/* ============================== 7. BADGES / PILLS ============================== */
.badge {
  border-radius: 999px; font-weight: 700; letter-spacing: .01em;
  padding: .38em .7em; font-size: .76em;
  box-shadow: var(--gloss-hi);
}
.badge.text-bg-success, .badge.bg-success {
  background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)) !important;
  color: #fff !important; border: none;
}
.badge.text-bg-warning, .badge.bg-warning {
  background: linear-gradient(165deg, #F5B301, #C98A00) !important;
  color: #241A00 !important; border: none;
}
.badge.text-bg-danger, .badge.bg-danger {
  background: linear-gradient(165deg, #E2594A, #B3342A) !important;
  color: #fff !important; border: none;
}
.badge.text-bg-info, .badge.bg-info {
  background: linear-gradient(165deg, #2FA8E0, #1B7FB0) !important;
  color: #fff !important; border: none;
}
.badge.text-bg-light, .badge.bg-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7)) !important;
  color: var(--mx-ink) !important;
  border: 1px solid rgba(10, 13, 16, .1) !important;
}
html[data-theme="dark"] .badge.text-bg-light, html[data-theme="dark"] .badge.bg-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)) !important;
  color: var(--mx-ink) !important; border-color: rgba(255, 255, 255, .13) !important;
}
.rating-pill { box-shadow: var(--gloss-hi), 0 6px 16px -10px rgba(248, 90, 0, .5); }
.plan-save { box-shadow: var(--gloss-hi), 0 6px 16px -8px rgba(248, 90, 0, .8); }

/* ============================== 8. ALERTS ============================== */
.alert {
  border-radius: 14px;
  border: 1px solid rgba(10, 13, 16, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .8));
  box-shadow: var(--gloss-hi), 0 10px 24px -18px rgba(10, 13, 16, .4);
  font-weight: 500;
}
.alert-success { border-color: rgba(248, 90, 0, .35); background: linear-gradient(180deg, rgba(248, 90, 0, .12), rgba(248, 90, 0, .04)); }
.alert-danger  { border-color: rgba(198, 66, 51, .35); background: linear-gradient(180deg, rgba(226, 89, 74, .12), rgba(226, 89, 74, .04)); }
.alert-warning { border-color: rgba(245, 179, 1, .4);  background: linear-gradient(180deg, rgba(245, 179, 1, .14), rgba(245, 179, 1, .04)); }
.alert-info    { border-color: rgba(47, 168, 224, .35); background: linear-gradient(180deg, rgba(47, 168, 224, .12), rgba(47, 168, 224, .04)); }
html[data-theme="dark"] .alert { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .11); }

/* ============================== 9. NAVBAR ============================== */
.portal-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72));
  border-bottom: 1px solid rgba(10, 13, 16, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 10px 30px -22px rgba(10, 13, 16, .5);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
.portal-nav.shrunk {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .9));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 14px 34px -20px rgba(10, 13, 16, .4);
}
html[data-theme="dark"] .portal-nav {
  background: linear-gradient(180deg, rgba(10, 14, 17, .92), rgba(7, 9, 11, .78));
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 12px 30px -20px rgba(0, 0, 0, .9);
}
.brand-mark {
  background: linear-gradient(160deg, var(--mx-green), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 18px -8px rgba(248, 90, 0, .8);
  border-radius: 12px;
}
.wallet-chip {
  background: linear-gradient(180deg, rgba(248, 90, 0, .16), rgba(248, 90, 0, .07));
  box-shadow: var(--gloss-hi), 0 6px 14px -10px rgba(248, 90, 0, .5);
}
.user-chip .avatar { background: linear-gradient(160deg, var(--mx-green), var(--mx-green-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.bell-btn { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75)); box-shadow: var(--gloss-hi), 0 6px 14px -12px rgba(10,13,16,.4); }
html[data-theme="dark"] .bell-btn { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); box-shadow: var(--gloss-hi-d); }

/* ============================== 10. HERO ============================== */
.hero, .hero-v2, .sw-hero {
  background:
    radial-gradient(1000px 460px at 10% -10%, rgba(248, 90, 0, .16), transparent 62%),
    radial-gradient(800px 400px at 96% 8%, rgba(255, 138, 43, .1), transparent 58%),
    linear-gradient(180deg, #fefdfc, #FFFFFF);
}
.hero-v2 { padding: 6rem 0 5.5rem !important; }
.hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.038em;
}
.hero-v2 .lead { font-size: 1.08rem; line-height: 1.7; }
.announce-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
  box-shadow: var(--gloss-hi), 0 8px 20px -14px rgba(10, 13, 16, .4);
  border-color: rgba(248, 90, 0, .3);
  font-weight: 700;
}
.hero-ministats b {
  font-size: 1.7rem;
  background: linear-gradient(180deg, var(--mx-black), #413933);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .hero-ministats b {
  background: linear-gradient(180deg, #fff, #A8B8B2);
  -webkit-background-clip: text; background-clip: text;
}
/* glossy mockup */
.mockup {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .9));
  box-shadow:
    var(--gloss-hi), var(--gloss-lo),
    0 44px 90px -36px rgba(10, 13, 16, .45),
    0 0 0 1px rgba(248, 90, 0, .12);
}
html[data-theme="dark"] .mockup {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
}
.card3d.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82));
  box-shadow: var(--gloss-hi), var(--gloss-lo), 0 22px 44px -24px rgba(10, 13, 16, .4);
}
.orbit { box-shadow: var(--gloss-hi), 0 10px 22px -12px rgba(10, 13, 16, .4); }

/* ============================== 11. MARQUEE / BANDS ============================== */
.marquee {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(248, 247, 246, .9));
  box-shadow: var(--gloss-hi);
}
html[data-theme="dark"] .marquee { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.stats-band, .how-band { background: linear-gradient(180deg, rgba(248, 247, 246, .9), rgba(255, 255, 255, .6)); }
html[data-theme="dark"] .stats-band, html[data-theme="dark"] .how-band {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}
.cta-band {
  background: linear-gradient(150deg, #170c06 0%, #3a1e0b 55%, #1c0f07 100%);
  box-shadow: var(--gloss-hi-d), 0 34px 70px -34px rgba(10, 13, 16, .6);
  border-radius: 26px;
}
.cta-band::before {
  background:
    radial-gradient(520px 260px at 84% 8%, rgba(255, 138, 43, .42), transparent 62%),
    radial-gradient(420px 220px at 8% 92%, rgba(248, 90, 0, .3), transparent 62%);
}
.cta-band .text-secondary { color: #A9B8B2 !important; }

/* ============================== 12. AUTH PAGES ============================== */
.auth-side {
  background:
    radial-gradient(760px 420px at 18% 18%, rgba(248, 90, 0, .2), transparent 62%),
    radial-gradient(620px 420px at 92% 88%, rgba(255, 138, 43, .14), transparent 62%),
    linear-gradient(160deg, #fbf9f7, #FFFFFF);
}
html[data-theme="dark"] .auth-side {
  background:
    radial-gradient(760px 420px at 18% 18%, rgba(248, 90, 0, .26), transparent 62%),
    radial-gradient(620px 420px at 92% 88%, rgba(255, 138, 43, .16), transparent 62%),
    linear-gradient(160deg, #0A1014, #150a05);
  border-right-color: rgba(255, 255, 255, .08);
}
.auth-card { border-radius: 24px; padding: 2.4rem; }
.auth-side .side-shapes span { border-color: rgba(248, 90, 0, .3); }
.pw-meter { box-shadow: inset 0 1px 2px rgba(10, 13, 16, .08); }

/* ============================== 13. DROPDOWNS / MODALS / TABS ============================== */
.dropdown-menu {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92));
  border: 1px solid rgba(10, 13, 16, .09);
  box-shadow: var(--gloss-hi), 0 26px 54px -26px rgba(10, 13, 16, .45);
  padding: .5rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] .dropdown-menu {
  background: linear-gradient(180deg, rgba(20, 27, 33, .97), rgba(12, 17, 21, .97));
  border-color: rgba(255, 255, 255, .11);
  box-shadow: var(--gloss-hi-d), 0 26px 54px -26px rgba(0, 0, 0, .9);
}
.dropdown-item { border-radius: 10px; padding: .5rem .7rem; font-weight: 500; }
.dropdown-header { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; color: var(--mx-muted); }
.modal-content {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .93));
  border: 1px solid rgba(10, 13, 16, .09);
  box-shadow: var(--gloss-hi), 0 40px 80px -30px rgba(10, 13, 16, .5);
}
html[data-theme="dark"] .modal-content {
  background: linear-gradient(180deg, rgba(20, 27, 33, .98), rgba(12, 17, 21, .98));
  border-color: rgba(255, 255, 255, .11);
}
.nav-tabs { border-bottom: 1px solid rgba(10, 13, 16, .09); gap: .2rem; }
.nav-tabs .nav-link {
  border: none; border-radius: 12px 12px 0 0; color: var(--mx-muted);
  font-weight: 700; padding: .65rem 1.1rem;
  transition: color .2s, background .2s;
}
.nav-tabs .nav-link:hover { color: var(--mx-green-deep); background: rgba(248, 90, 0, .07); }
.nav-tabs .nav-link.active {
  color: var(--mx-green-deep);
  background: linear-gradient(180deg, rgba(248, 90, 0, .14), rgba(248, 90, 0, .05));
  box-shadow: var(--gloss-hi);
  border-bottom: 2px solid var(--mx-green);
}
html[data-theme="dark"] .nav-tabs { border-bottom-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--mx-green-2);
  background: linear-gradient(180deg, rgba(255, 138, 43, .18), rgba(248, 90, 0, .06));
}
.nav-pills .nav-link { border-radius: 999px; font-weight: 700; padding: .45rem 1.1rem; color: var(--mx-muted); }
.nav-pills .nav-link.active {
  background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep));
  color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px rgba(248, 90, 0,.7);
}
.accordion-item { border-radius: 14px !important; border: 1px solid rgba(10,13,16,.08); margin-bottom: .5rem; overflow: hidden; }
.accordion-button { font-weight: 700; border-radius: 14px !important; }
.accordion-button:not(.collapsed) { background: linear-gradient(180deg, rgba(248, 90, 0,.12), rgba(248, 90, 0,.04)); color: var(--mx-green-deep); }
html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .accordion-button { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--mx-ink); }
.progress { border-radius: 999px; box-shadow: inset 0 1px 2px rgba(10, 13, 16, .1); height: .6rem; }
.progress-bar { background: linear-gradient(90deg, var(--mx-green-deep), var(--mx-green), var(--mx-green-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.breadcrumb { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); border-radius: 999px; padding: .5rem 1rem; box-shadow: var(--gloss-hi); border: 1px solid rgba(10,13,16,.07); }
.page-link { border-radius: 10px; margin: 0 2px; border-color: rgba(10,13,16,.1); font-weight: 600; }
.page-item.active .page-link { background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)); border-color: transparent; }

/* ============================== 14. CHECKOUT STEPS ============================== */
.step-dot .n { box-shadow: var(--gloss-hi); }
.step-dot.active .n {
  background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px rgba(248, 90, 0,.8);
}
.gateway-pick {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  border: 1px solid rgba(10,13,16,.08);
  box-shadow: var(--gloss-hi);
}
.gateway-pick:has(input:checked) {
  background: linear-gradient(180deg, rgba(248, 90, 0,.16), rgba(248, 90, 0,.06));
  border-color: var(--mx-green);
  box-shadow: var(--gloss-hi), 0 0 0 1px var(--mx-green), 0 12px 26px -16px rgba(248, 90, 0,.7);
}
html[data-theme="dark"] .gateway-pick { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.1); }

/* ============================== 15. SUPPORT CHAT ============================== */
.chat-row.me .chat-bubble {
  background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px -12px rgba(248, 90, 0,.8);
}
.chat-row.ai .chat-bubble {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  box-shadow: var(--gloss-hi), 0 8px 18px -14px rgba(10,13,16,.35);
}
html[data-theme="dark"] .chat-row.ai .chat-bubble {
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
}
.chat-chip { box-shadow: var(--gloss-hi), 0 6px 14px -12px rgba(10,13,16,.35); }
.chat-send {
  background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px rgba(248, 90, 0,.8);
}
.chat-avatar { background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -10px rgba(248, 90, 0,.8); }
.chat-input { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); }
html[data-theme="dark"] .chat-input { background: linear-gradient(180deg, rgba(16,22,27,.96), rgba(12,16,20,.92)); }

/* ============================== 16. FOOTER ============================== */
.portal-footer {
  background: linear-gradient(180deg, rgba(248, 247, 246, .95), rgba(255, 255, 255, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  border-top: 1px solid rgba(10, 13, 16, .07);
}
html[data-theme="dark"] .portal-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border-top-color: rgba(255, 255, 255, .08);
}
.foot-col h6 { color: var(--mx-green-deep); }
html[data-theme="dark"] .foot-col h6 { color: var(--mx-green-2); }
.foot-bottom { border-top-color: rgba(10, 13, 16, .07); }
html[data-theme="dark"] .foot-bottom { border-top-color: rgba(255, 255, 255, .08); }

/* ============================== 17. NEW: EMPTY STATES ============================== */
.mx-empty {
  text-align: center; padding: 3.2rem 1.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5));
  border: 1px dashed rgba(248, 90, 0, .35);
  border-radius: 20px;
  box-shadow: var(--gloss-hi);
}
html[data-theme="dark"] .mx-empty {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border-color: rgba(255, 138, 43, .3);
}
.mx-empty-icon {
  display: inline-grid; place-items: center;
  width: 74px; height: 74px; border-radius: 24px; font-size: 2rem;
  color: var(--mx-green-deep); margin-bottom: 1rem;
  background: linear-gradient(160deg, rgba(248, 90, 0, .18), rgba(255, 138, 43, .08));
  border: 1px solid rgba(248, 90, 0, .25);
  box-shadow: var(--gloss-hi), 0 12px 26px -14px rgba(248, 90, 0, .5);
}
html[data-theme="dark"] .mx-empty-icon { color: var(--mx-green-2); }
.mx-empty h5 { font-weight: 800; }
.mx-empty p { color: var(--mx-muted); max-width: 44ch; margin: .4rem auto 1.1rem; }

/* ============================== 18. NEW: SKELETONS ============================== */
.mx-sk {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(10, 13, 16, .05), rgba(10, 13, 16, .11), rgba(10, 13, 16, .05));
  background-size: 200% 100%;
  animation: mxSheen 1.5s linear infinite;
}
html[data-theme="dark"] .mx-sk {
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
  background-size: 200% 100%;
}
@keyframes mxSheen { to { background-position: -200% 0; } }

/* ============================== 19. NEW: TOASTS ============================== */
#mxToasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 5000;
  display: flex; flex-direction: column; gap: .6rem;
  max-width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}
.mx-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .9));
  border: 1px solid rgba(10, 13, 16, .09);
  box-shadow: var(--gloss-hi), 0 22px 44px -22px rgba(10, 13, 16, .45);
  font-size: .9rem; font-weight: 500;
  animation: mxToastIn .45s var(--mx-spring, cubic-bezier(.34,1.56,.64,1));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] .mx-toast {
  background: linear-gradient(180deg, rgba(20, 27, 33, .97), rgba(12, 17, 21, .97));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: var(--gloss-hi-d), 0 22px 44px -22px rgba(0, 0, 0, .9);
}
.mx-toast.out { animation: mxToastOut .3s ease forwards; }
.mx-toast-icon { flex-shrink: 0; font-size: 1.15rem; margin-top: .05rem; }
.mx-toast.ok    .mx-toast-icon { color: var(--mx-green); }
.mx-toast.err   .mx-toast-icon { color: #E2594A; }
.mx-toast.info  .mx-toast-icon { color: #2FA8E0; }
.mx-toast.warn  .mx-toast-icon { color: #F5B301; }
.mx-toast b { display: block; font-weight: 800; font-size: .9rem; }
.mx-toast span { color: var(--mx-muted); font-size: .84rem; }
.mx-toast-x {
  margin-left: auto; border: 0; background: transparent; color: var(--mx-muted);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; border-radius: 6px;
}
.mx-toast-x:hover { color: var(--mx-ink); background: rgba(10, 13, 16, .06); }
@keyframes mxToastIn  { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mxToastOut { to { opacity: 0; transform: translateX(24px) scale(.96); } }

/* ============================== 20. NEW: BACK TO TOP ============================== */
#mxTop {
  position: fixed; right: 22px; bottom: 92px; z-index: 1400;
  width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(10, 13, 16, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
  color: var(--mx-green-deep); font-size: 1.1rem;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--gloss-hi), 0 12px 26px -16px rgba(10, 13, 16, .45);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, visibility .3s, transform .35s var(--mx-spring, ease);
}
#mxTop.on { opacity: 1; visibility: visible; transform: none; }
#mxTop:hover { color: #fff; background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)); border-color: transparent; transform: translateY(-3px); }
html[data-theme="dark"] #mxTop {
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .13); color: var(--mx-green-2);
}
@media (max-width: 575.98px) { #mxTop { bottom: 84px; right: 14px; } }

/* ============================== 21. NEW: TABLE TOOLBAR ============================== */
.mx-toolbar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .7rem .85rem; margin-bottom: .9rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248, 90, 0, .09), rgba(248, 90, 0, .03));
  border: 1px solid rgba(248, 90, 0, .18);
  box-shadow: var(--gloss-hi);
}
.mx-toolbar .form-control { min-width: 190px; }
.mx-toolbar .mx-count { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--mx-muted); }
html[data-theme="dark"] .mx-toolbar { background: linear-gradient(180deg, rgba(255, 138, 43,.12), rgba(248, 90, 0,.04)); border-color: rgba(255, 138, 43,.2); }
tr.mx-hidden { display: none !important; }

/* ============================== 22. ADMIN PANEL ============================== */
.sidebar, .admin-side, .side-nav {
  background: linear-gradient(180deg, rgba(10, 13, 16, .97), rgba(7, 9, 11, .99));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), 8px 0 30px -18px rgba(0, 0, 0, .8);
}
.topbar, .admin-top {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .8));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 24px -20px rgba(10, 13, 16, .5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] .topbar, html[data-theme="dark"] .admin-top {
  background: linear-gradient(180deg, rgba(16, 22, 27, .95), rgba(10, 14, 17, .85));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 24px -18px rgba(0, 0, 0, .9);
}
.side-nav a, .sidebar a, .admin-side a {
  border-radius: 12px; font-weight: 600;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.side-nav a:hover, .sidebar a:hover, .admin-side a:hover { transform: translateX(3px); }
.side-nav a.active, .sidebar a.active, .admin-side a.active {
  background: linear-gradient(100deg, rgba(248, 90, 0, .28), rgba(248, 90, 0, .06));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 20px -12px rgba(248, 90, 0, .8);
}
.stat-card, .kpi-card, .admin-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
  border: 1px solid rgba(10, 13, 16, .08);
  border-radius: 18px;
  box-shadow: var(--gloss-hi), var(--gloss-lo), var(--gloss-bloom);
  transition: transform .35s var(--mx-smooth, ease), box-shadow .35s ease;
}
.stat-card:hover, .kpi-card:hover, .admin-card:hover { transform: translateY(-4px); box-shadow: var(--gloss-hi), var(--gloss-bloom-lg), var(--mx-glow); }
html[data-theme="dark"] .stat-card, html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .admin-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .1);
  box-shadow: var(--gloss-hi-d), var(--gloss-bloom);
}

/* ============================== 23. SCROLL PROGRESS / SPOTLIGHT ============================== */
#scrollProgress span { background: linear-gradient(90deg, var(--mx-green-deep), var(--mx-green), var(--mx-green-2)); }

/* ============================== 24. MISC POLISH ============================== */
.empty {
  background: linear-gradient(180deg, rgba(248, 90, 0, .06), transparent);
  border-radius: 14px; color: var(--mx-muted); font-weight: 500;
}
.hr-label { color: var(--mx-muted); }
.hr-label::before, .hr-label::after { background: linear-gradient(90deg, transparent, rgba(10, 13, 16, .14), transparent); }
.tl .tl-dot.on { box-shadow: 0 0 12px rgba(248, 90, 0, .8); }
.sw-go { background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px rgba(248, 90, 0,.7); }
.feature-icon, .step-n, .sw-icon {
  background: linear-gradient(160deg, rgba(248, 90, 0, .18), rgba(255, 138, 43, .07));
  border: 1px solid rgba(248, 90, 0, .2);
  box-shadow: var(--gloss-hi);
}
html[data-theme="dark"] .feature-icon, html[data-theme="dark"] .step-n, html[data-theme="dark"] .sw-icon {
  background: linear-gradient(160deg, rgba(255, 138, 43, .22), rgba(248, 90, 0, .08));
  border-color: rgba(255, 138, 43, .25);
}
.step-n { background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)); color: #fff; border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px rgba(248, 90, 0,.8); }
.ring::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.blog-emoji { background: linear-gradient(135deg, rgba(248, 90, 0, .14), rgba(255, 138, 43, .05)); }
.compare-table thead th {
  background: linear-gradient(180deg, rgba(248, 90, 0, .16), rgba(248, 90, 0, .05));
  box-shadow: var(--gloss-hi);
}
html[data-theme="dark"] .compare-table thead th { background: linear-gradient(180deg, rgba(255, 138, 43,.16), rgba(248, 90, 0,.05)); }
.cmp-yes { filter: drop-shadow(0 2px 6px rgba(248, 90, 0, .5)); }
.tm-stars { filter: drop-shadow(0 2px 5px rgba(248, 90, 0, .45)); }
.invoice-card { border-radius: 22px; }
.invoice-card::before { background: linear-gradient(90deg, var(--mx-green-deep), var(--mx-green), var(--mx-green-2)); }
.inv-logo { background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.inv-total { color: var(--mx-green-deep); }
.notif-item.unread { border-left: 4px solid var(--mx-green); background: linear-gradient(90deg, rgba(248, 90, 0, .1), transparent 60%); }
.notif-icon { background: linear-gradient(160deg, rgba(248, 90, 0,.18), rgba(255, 138, 43,.07)); border: 1px solid rgba(248, 90, 0,.2); box-shadow: var(--gloss-hi); }
.coupon-box { border: 1.5px dashed rgba(248, 90, 0, .45); background: linear-gradient(135deg, rgba(248, 90, 0, .08), rgba(255, 255, 255, .6) 60%); }
.cycle-toggle { box-shadow: var(--gloss-hi), 0 8px 20px -16px rgba(10,13,16,.4); }
.cycle-toggle button.active { background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -8px rgba(248, 90, 0,.8); }
.avatar { background: linear-gradient(160deg, var(--mx-green), var(--mx-green-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.star-pick input:checked ~ label { filter: drop-shadow(0 2px 6px rgba(248, 90, 0, .55)); }
.scroll-hint { color: var(--mx-green-deep); }

/* ============================== 25. RESPONSIVE ============================== */
@media (max-width: 991.98px) {
  .hero-v2 { padding: 4.2rem 0 4rem !important; }
  .hero-title { font-size: clamp(2rem, 7vw, 2.9rem); }
  .section-pad { padding: 3.6rem 0; }
  .table thead th { font-size: .68rem; letter-spacing: .06em; }
}
@media (max-width: 767.98px) {
  .card, .feature-card, .plan-card, .software-card, .auth-card, .compare-wrap { border-radius: 16px; }
  .mx-toolbar .form-control { min-width: 100%; }
  .mx-toolbar .mx-count { margin-left: 0; width: 100%; }
  .table td, .table th { padding: .65rem .7rem; }
}
@media (max-width: 575.98px) {
  .hero-v2 { padding: 3.2rem 0 3.4rem !important; }
  .btn-lg { padding: .6rem 1.2rem; font-size: .98rem; }
  .mx-empty { padding: 2.2rem 1rem; }
  .mx-empty-icon { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 20px; }
  #mxToasts { right: 10px; left: 10px; bottom: 10px; max-width: none; }
  .auth-card { padding: 1.6rem; border-radius: 18px; }
}

/* ============================== 26. REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  .gloss-sheen::after { display: none; }
  .btn::after { display: none; }
  .lift:hover, .feature-card:hover, .step-card:hover, .plan-card:hover,
  .software-card:hover, .tm-card:hover, .blog-card:hover, .dash-stat:hover,
  .stat-tile:hover, .review-item:hover, .stat-card:hover, .kpi-card:hover { transform: none; }
  .mx-sk { animation: none; }
  .mx-toast { animation: none; }
  .mx-toast.out { animation: none; opacity: 0; }
  .side-nav a:hover, .sidebar a:hover { transform: none; }
  .btn:active { transform: none; }
  #mxTop { transition: none; }
}

/* ============================== 27. PRINT ============================== */
@media print {
  .gloss, .gloss-strong, .card, .plan-card, .software-card, .feature-card,
  .dash-stat, .stat-tile, .tm-card, .blog-card, .notif-item, .review-item {
    box-shadow: none !important; background: #fff !important; border-color: #ddd !important;
  }
  #mxToasts, #mxTop, #scrollProgress, #cursorGlow { display: none !important; }
  .mx-sk { animation: none; }
}

/* ===== SOURCE: theme-v11.css ===== */
/* ============================================================================
   0. TOKENS — additive glass token (v9/v10 already define the rest)
   ============================================================================ */
:root { --mx-glass: rgba(255, 255, 255, .07); }
html[data-theme="dark"] { --mx-glass: rgba(255, 255, 255, .07); }

/* ============================================================================
   0. NAVBAR SEARCH TRIGGER  (.mx-kbd-btn)
   ============================================================================ */
.mx-kbd-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 38px; padding: 0 .5rem 0 .75rem;
  border: 1px solid var(--mx-border, rgba(255,255,255,.14));
  border-radius: 999px; cursor: pointer;
  background: var(--mx-glass, rgba(255,255,255,.06));
  color: var(--mx-muted, rgba(255,255,255,.62));
  font: 600 .82rem var(--mx-font-body, Inter, sans-serif);
  letter-spacing: .01em; white-space: nowrap;
  transition: color .22s var(--mx-smooth, ease), border-color .22s var(--mx-smooth, ease),
              background .22s var(--mx-smooth, ease), transform .22s var(--mx-smooth, ease);
}
.mx-kbd-btn:hover {
  color: var(--mx-text, #fff);
  border-color: rgba(255, 138, 43, .55);
  background: rgba(255, 138, 43, .1);
  transform: translateY(-1px);
}
.mx-kbd-btn kbd {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--mx-border, rgba(255,255,255,.16));
  border-radius: 6px; background: rgba(0,0,0,.22);
  font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--mx-muted, rgba(255,255,255,.6));
}
@media (max-width: 1199.98px) { .mx-kbd-btn { display: none !important; } }

/* ============================================================================
   0b. GLOSSY TILE VARIANTS  (.mx-tile-green / .mx-tile-dark / .mx-tile-glass)
   ============================================================================ */
.mx-tile-green {
  background: linear-gradient(150deg, #ff8a2b 0%, #f85a00 55%, #d84a00 100%);
  color: #fff;
  border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 16px 30px -14px rgba(248, 90, 0,.7);
}
.mx-tile-dark {
  background: linear-gradient(150deg, #1d1008 0%, #170c06 100%);
  color: #fff;
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 30px -14px rgba(0,0,0,.75);
}
.mx-tile-glass {
  background: var(--mx-glass, rgba(255,255,255,.07));
  color: var(--mx-text, #fff);
  border-color: var(--mx-border, rgba(255,255,255,.14));
  backdrop-filter: blur(12px) saturate(1.2);
}
.mx-tile b, .mx-tile small { display: block; }
.mx-tile b { font-size: .9rem; letter-spacing: -.01em; }
.mx-tile small { font-size: .72rem; opacity: .78; margin-top: 1px; }

/* ============================================================================
   MIRZA X LABS — Theme v11  (VOLZIX SIGNATURE COMPONENTS • DEEP STRUCTURE)
   Loads AFTER theme-v10.css. Additive only — overrides and new components.

   What's new in v11 (the "volzix" language)
   -----------------------------------------
    1. Social-proof avatar cluster        (.mx-avatars)
    2. Wave / curve section dividers      (.mx-wave, .mx-wave-flip)
    3. Mega stat blocks with glow         (.mx-mega)
    4. Service cards with image tops      (.mx-service)
    5. Uptime / trust badge               (.mx-trust)
    6. Inner-page hero system             (.mx-pagehero)
    7. "Discover more" pill               (.mx-more)
    8. Trust / logo strip                 (.mx-logos)
    9. Sticky mobile bottom nav           (.mx-mobilenav)
   10. Command palette (Ctrl+K)           (.mx-palette)
   11. Skeleton screens                   (.mx-skel)
   12. Scroll-spy side nav                (.mx-spy)
   13. Live pulse badge + countdown       (.mx-live)
   14. Glossy pricing highlight           (.mx-pricing)
   15. Split feature rows                 (.mx-split)
   ============================================================================ */

/* ============================== 1. AVATAR CLUSTER ============================== */
.mx-avatars { display: inline-flex; align-items: center; }
.mx-avatars .av {
  width: 40px; height: 40px; border-radius: 50%;
  margin-left: -12px; flex-shrink: 0;
  border: 2.5px solid var(--mx-surface, #fff);
  background-size: cover; background-position: center;
  box-shadow: 0 4px 12px -4px rgba(10, 13, 16, .4);
  transition: transform .35s var(--mx-spring, cubic-bezier(.34, 1.56, .64, 1));
  position: relative;
}
.mx-avatars .av:first-child { margin-left: 0; }
.mx-avatars .av:hover { transform: translateY(-5px) scale(1.1); z-index: 5; }
.mx-avatars .av.more {
  display: grid; place-items: center;
  background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep));
  color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: -.02em;
  border-color: var(--mx-surface, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -6px rgba(248, 90, 0, .8);
}
.mx-avatars.sm .av { width: 32px; height: 32px; margin-left: -9px; border-width: 2px; }
.mx-avatars.lg .av { width: 50px; height: 50px; margin-left: -15px; border-width: 3px; }
.mx-avatars .av::after {
  content: ""; position: absolute; right: 1px; bottom: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mx-green-2); border: 2px solid var(--mx-surface, #fff);
}

/* ============================== 2. WAVE DIVIDERS ============================== */
.mx-wave {
  display: block; width: 100%; height: 68px; line-height: 0;
  color: var(--mx-bg-2, #f8f7f6);
}
.mx-wave svg { display: block; width: 100%; height: 100%; }
.mx-wave-flip { transform: rotate(180deg); }
.mx-wave.green { color: rgba(248, 90, 0, .1); }
html[data-theme="dark"] .mx-wave { color: var(--mx-bg, #150a05); }
html[data-theme="dark"] .mx-wave.green { color: rgba(255, 138, 43, .12); }

/* soft blob divider (alternative) */
.mx-blobdiv {
  position: relative; height: 90px; overflow: hidden; pointer-events: none;
}
.mx-blobdiv::before, .mx-blobdiv::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5;
}
.mx-blobdiv::before { width: 320px; height: 200px; left: 8%; top: -60px; background: rgba(248, 90, 0, .5); }
.mx-blobdiv::after  { width: 280px; height: 200px; right: 6%; top: -50px; background: rgba(255, 138, 43, .45); }

/* ============================== 3. MEGA STAT BLOCKS ============================== */
.mx-mega {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mx-mega > * {
  position: relative; overflow: hidden; text-align: center; padding: 1.5rem .9rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .74));
  border: 1px solid rgba(10, 13, 16, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 44px -26px rgba(10, 13, 16, .35);
  transition: transform .45s var(--mx-smooth, ease), box-shadow .45s ease;
}
.mx-mega > *::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(280px 160px at 50% -20%, rgba(248, 90, 0, .18), transparent 70%);
}
.mx-mega > *:hover { transform: translateY(-7px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 32px 64px -28px rgba(10, 13, 16, .45), var(--mx-glow); }
.mx-mega .n {
  position: relative;
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, var(--mx-black), #3b332e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .mx-mega .n { background: linear-gradient(170deg, #fff, #93A69F); -webkit-background-clip: text; background-clip: text; }
.mx-mega .l {
  position: relative; display: block; margin-top: .45rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--mx-muted);
}
.mx-mega .s { position: relative; display: block; margin-top: .3rem; font-size: .8rem; color: var(--mx-green-deep); font-weight: 600; }
html[data-theme="dark"] .mx-mega > * { background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 44px -26px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .mx-mega .s { color: var(--mx-green-2); }

/* ============================== 4. SERVICE CARDS (image top) ============================== */
.mx-service {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .74));
  border: 1px solid rgba(10, 13, 16, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 44px -26px rgba(10, 13, 16, .32);
  transition: transform .45s var(--mx-smooth, ease), box-shadow .45s ease, border-color .3s;
}
.mx-service:hover {
  transform: translateY(-8px); color: inherit;
  border-color: rgba(248, 90, 0, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 36px 70px -30px rgba(10, 13, 16, .45), var(--mx-glow);
}
.mx-service .thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(150deg, rgba(248, 90, 0, .2), rgba(255, 138, 43, .08));
  display: grid; place-items: center; font-size: 3.2rem;
}
.mx-service .thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 13, 16, .16));
}
.mx-service .thumb .tag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; color: #1f0e05;
  background: linear-gradient(92deg, var(--mx-green-2), var(--mx-green));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px rgba(248, 90, 0, .8);
}
.mx-service .body { padding: 1.35rem 1.4rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.mx-service .body h5 { font-weight: 800; font-size: 1.06rem; margin-bottom: .4rem; }
.mx-service .body p { color: var(--mx-muted); font-size: .88rem; line-height: 1.6; margin-bottom: 1rem; }
.mx-service .go {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 800; color: var(--mx-green-deep);
}
.mx-service .go i { transition: transform .3s var(--mx-spring, ease); }
.mx-service:hover .go i { transform: translateX(5px); }
html[data-theme="dark"] .mx-service { background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .mx-service .go { color: var(--mx-green-2); }
html[data-theme="dark"] .mx-service .thumb { background: linear-gradient(150deg, rgba(255, 138, 43, .24), rgba(248, 90, 0, .08)); }

/* ============================== 5. TRUST / UPTIME BADGE ============================== */
.mx-trust {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .5rem .95rem .5rem .6rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
  border: 1px solid rgba(10, 13, 16, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 20px -14px rgba(10, 13, 16, .4);
  font-weight: 700; font-size: .85rem;
}
.mx-trust .ring {
  --p: 99; --sz: 30px;
  width: var(--sz); height: var(--sz); border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--mx-green) calc(var(--p) * 1%), rgba(10, 13, 16, .1) 0);
  display: grid; place-items: center; position: relative;
}
.mx-trust .ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
html[data-theme="dark"] .mx-trust .ring::before { background: #1b0f07; }
.mx-trust .ring b { position: relative; font-size: .58rem; font-weight: 800; color: var(--mx-green-deep); }
html[data-theme="dark"] .mx-trust .ring b { color: var(--mx-green-2); }
.mx-trust .ring i { position: relative; font-size: .8rem; color: var(--mx-green-deep); }
html[data-theme="dark"] .mx-trust .ring i { color: var(--mx-green-2); }
.mx-trust .ring i + small, .mx-trust .ring b + small { display: none; }
.mx-trust small { display: block; font-weight: 600; font-size: .68rem; color: var(--mx-muted); text-transform: uppercase; letter-spacing: .1em; }
html[data-theme="dark"] .mx-trust { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }

/* ============================== 6. INNER-PAGE HERO ============================== */
.mx-pagehero {
  position: relative; overflow: hidden;
  padding: 3.4rem 0 2.8rem;
  background:
    radial-gradient(760px 340px at 8% -20%, rgba(248, 90, 0, .16), transparent 62%),
    radial-gradient(620px 300px at 96% 10%, rgba(255, 138, 43, .1), transparent 58%),
    linear-gradient(180deg, #fefdfc, #FFFFFF);
  border-bottom: 1px solid rgba(10, 13, 16, .07);
}
.mx-pagehero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 13, 16, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 13, 16, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(700px 320px at 30% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(700px 320px at 30% 40%, #000 25%, transparent 78%);
}
html[data-theme="dark"] .mx-pagehero {
  background:
    radial-gradient(760px 340px at 8% -20%, rgba(248, 90, 0, .24), transparent 62%),
    radial-gradient(620px 300px at 96% 10%, rgba(255, 138, 43, .12), transparent 58%),
    linear-gradient(180deg, #0A0E11, #150a05);
  border-bottom-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .mx-pagehero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}
.mx-pagehero, .mx-pagehero .inner { position: relative; display: flex; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; }
.mx-pagehero .htile {
  width: 62px; height: 62px; border-radius: 19px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.7rem; color: #fff;
  background: linear-gradient(160deg, var(--mx-green), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -12px rgba(248, 90, 0, .8);
}
.mx-pagehero .htxt { flex: 1; min-width: 240px; }
.mx-pagehero h1 {
  font-size: clamp(1.65rem, 4vw, 2.5rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.12; margin: 0 0 .4rem;
}
.mx-pagehero .sub { color: var(--mx-muted); font-size: 1rem; line-height: 1.65; max-width: 62ch; margin: 0; }
.mx-pagehero .crumbs {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .8rem; font-weight: 600; color: var(--mx-muted); margin-bottom: .9rem;
}
.mx-pagehero .crumbs a { color: var(--mx-green-deep); text-decoration: none; }
.mx-pagehero .crumbs a:hover { text-decoration: underline; }
html[data-theme="dark"] .mx-pagehero .crumbs a { color: var(--mx-green-2); }
.mx-pagehero .crumbs .sep { opacity: .5; }
.mx-pagehero .hactions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }

/* ============================== 7. "DISCOVER MORE" PILL ============================== */
.mx-more {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem; border-radius: 999px;
  font-size: .85rem; font-weight: 800; text-decoration: none;
  color: var(--mx-green-deep);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
  border: 1px solid rgba(248, 90, 0, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 20px -14px rgba(248, 90, 0, .6);
  transition: transform .3s var(--mx-spring, ease), box-shadow .3s ease, color .25s;
}
.mx-more:hover { transform: translateY(-3px); color: var(--mx-green-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 14px 28px -14px rgba(248, 90, 0, .85); }
.mx-more i { transition: transform .3s var(--mx-spring, ease); }
.mx-more:hover i { transform: translateX(4px); }
html[data-theme="dark"] .mx-more { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border-color: rgba(255, 138, 43, .3); color: var(--mx-green-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }

/* ============================== 8. TRUST / LOGO STRIP ============================== */
.mx-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.6rem 2.4rem; padding: 1.4rem 1rem;
}
.mx-logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
  color: var(--mx-muted); opacity: .75;
  transition: opacity .25s ease, color .25s ease, transform .3s var(--mx-spring, ease);
  text-decoration: none;
}
.mx-logo:hover { opacity: 1; color: var(--mx-green-deep); transform: translateY(-2px); }
.mx-logo i { font-size: 1.2rem; }
html[data-theme="dark"] .mx-logo:hover { color: var(--mx-green-2); }

/* ============================== 9. STICKY MOBILE BOTTOM NAV ============================== */
.mx-mobilenav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600;
  display: none;
  padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .93));
  border-top: 1px solid rgba(10, 13, 16, .09);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .9) inset, 0 -14px 34px -22px rgba(10, 13, 16, .5);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] .mx-mobilenav {
  background: linear-gradient(180deg, rgba(12, 17, 21, .97), rgba(7, 9, 11, .96));
  border-top-color: rgba(255, 255, 255, .09);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .07) inset, 0 -14px 34px -20px rgba(0, 0, 0, .9);
}
.mx-mobilenav .row5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: .15rem; }
.mx-mobilenav a {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .4rem .2rem; border-radius: 12px;
  font-size: .62rem; font-weight: 700; color: var(--mx-muted); text-decoration: none;
  transition: color .2s, background .2s, transform .2s;
}
.mx-mobilenav a i { font-size: 1.15rem; }
.mx-mobilenav a.active { color: var(--mx-green-deep); background: rgba(248, 90, 0, .1); }
html[data-theme="dark"] .mx-mobilenav a.active { color: var(--mx-green-2); background: rgba(255, 138, 43, .14); }
.mx-mobilenav a.center {
  color: #fff;
  background: linear-gradient(165deg, var(--mx-green), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(248, 90, 0, .8);
  transform: translateY(-2px);
}
.mx-mobilenav a.center i { font-size: 1.3rem; }
@media (max-width: 767.98px) {
  .mx-mobilenav { display: block; }
  body { padding-bottom: 74px; }
  .portal-footer { margin-bottom: 0; }
  .ai-float-btn { bottom: 84px; }
  /* keep the v10 back-to-top clear of the AI float button + bottom nav */
  #mxTop { bottom: 146px; right: 14px; }
}

/* ============================== 10. COMMAND PALETTE ============================== */
.mx-palette {
  position: fixed; inset: 0; z-index: 6000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 1rem;
  background: rgba(7, 9, 11, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mx-palette.open { display: flex; animation: mxFade .2s ease; }
@keyframes mxFade { from { opacity: 0; } to { opacity: 1; } }
.mx-palette .box {
  width: 100%; max-width: 560px; overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(255, 255, 255, .95));
  border: 1px solid rgba(10, 13, 16, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 40px 90px -30px rgba(10, 13, 16, .6);
  animation: mxPop .32s var(--mx-spring, cubic-bezier(.34, 1.56, .64, 1));
}
@keyframes mxPop { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
html[data-theme="dark"] .mx-palette .box {
  background: linear-gradient(180deg, rgba(20, 27, 33, .99), rgba(12, 17, 21, .98));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 90px -30px rgba(0, 0, 0, .95);
}
.mx-palette .phead { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid rgba(10, 13, 16, .08); }
.mx-palette .phead i { color: var(--mx-green-deep); font-size: 1.1rem; }
html[data-theme="dark"] .mx-palette .phead i { color: var(--mx-green-2); }
.mx-palette .phead input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 1rem; font-weight: 600; color: var(--mx-ink);
}
.mx-palette .phead input::placeholder { color: var(--mx-muted); font-weight: 500; }
.mx-palette .phead kbd {
  font-size: .68rem; font-weight: 700; padding: .18rem .42rem; border-radius: 6px;
  background: var(--mx-surface-2, #faf0e8); border: 1px solid rgba(10, 13, 16, .12); color: var(--mx-muted);
}
.mx-palette .plist { max-height: 54vh; overflow-y: auto; padding: .5rem; }
.mx-palette .pgroup { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mx-muted); padding: .6rem .7rem .3rem; }
.mx-palette .pitem {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .6rem .7rem; border-radius: 12px; border: 0; background: transparent;
  font-size: .92rem; font-weight: 600; color: var(--mx-ink); text-align: left;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mx-palette .pitem i { font-size: 1.05rem; color: var(--mx-green-deep); flex-shrink: 0; }
.mx-palette .pitem .hint { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--mx-muted); }
.mx-palette .pitem:hover, .mx-palette .pitem.sel { background: rgba(248, 90, 0, .12); color: var(--mx-green-deep); }
html[data-theme="dark"] .mx-palette .pitem:hover, html[data-theme="dark"] .mx-palette .pitem.sel { background: rgba(255, 138, 43, .16); color: var(--mx-green-2); }
.mx-palette .pempty { padding: 1.6rem; text-align: center; color: var(--mx-muted); font-size: .9rem; }
.mx-palette .pfoot {
  display: flex; gap: 1rem; flex-wrap: wrap; padding: .6rem 1.1rem;
  border-top: 1px solid rgba(10, 13, 16, .08); font-size: .74rem; color: var(--mx-muted);
}
.mx-palette .pfoot kbd { font-size: .66rem; font-weight: 700; padding: .12rem .35rem; border-radius: 5px; background: var(--mx-surface-2, #faf0e8); border: 1px solid rgba(10, 13, 16, .12); }
html[data-theme="dark"] .mx-palette .pfoot { border-top-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .mx-palette .phead kbd, html[data-theme="dark"] .mx-palette .pfoot kbd { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); }

/* ============================== 11. SKELETON SCREENS ============================== */
/* both forms supported:
   <div class="mx-skel t w70"></div>            (standalone)
   <div class="mx-skel"><div class="t w70"></div>…</div>  (grouped)   */
.mx-skel, .mx-skel > * {
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(10, 13, 16, .05), rgba(10, 13, 16, .11), rgba(10, 13, 16, .05));
  background-size: 200% 100%;
  animation: mxSk 1.5s linear infinite;
}
html[data-theme="dark"] .mx-skel, html[data-theme="dark"] .mx-skel > * {
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
  background-size: 200% 100%;
}
.mx-skel > * { margin-bottom: 9px; }
.mx-skel > *:last-child { margin-bottom: 0; }
.mx-skel.t, .mx-skel > .t { height: 14px; }
.mx-skel.t.w70, .mx-skel > .t.w70, .mx-skel > .w70 { width: 70%; }
.mx-skel.t.w50, .mx-skel > .t.w50, .mx-skel > .w50 { width: 50%; }
.mx-skel.t.w90, .mx-skel > .t.w90, .mx-skel > .w90 { width: 90%; }
.mx-skel.t.w40, .mx-skel > .t.w40, .mx-skel > .w40 { width: 40%; }
.mx-skel.b, .mx-skel > .b { height: 120px; border-radius: 16px; }
.mx-skel.c, .mx-skel > .c { width: 46px; height: 46px; border-radius: 14px; }
@keyframes mxSk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes mxSk { to { background-position: -200% 0; } }
html[data-theme="dark"] .mx-skel { background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); background-size: 200% 100%; }
.mx-skel.t { height: 14px; margin-bottom: 9px; }
.mx-skel.t.w70 { width: 70%; } .mx-skel.t.w50 { width: 50%; } .mx-skel.t.w90 { width: 90%; } .mx-skel.t.w40 { width: 40%; }
.mx-skel.b { height: 120px; border-radius: 16px; }
.mx-skel.c { width: 46px; height: 46px; border-radius: 14px; }

/* ============================== 12. SCROLL-SPY SIDE NAV ============================== */
.mx-spy { position: sticky; top: 96px; display: flex; flex-direction: column; gap: .1rem; }
.mx-spy a {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .7rem; border-radius: 10px;
  font-size: .84rem; font-weight: 600; color: var(--mx-muted); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.mx-spy a:hover { color: var(--mx-green-deep); background: rgba(248, 90, 0, .07); }
.mx-spy a.active { color: var(--mx-green-deep); background: rgba(248, 90, 0, .1); border-left-color: var(--mx-green); font-weight: 700; }
html[data-theme="dark"] .mx-spy a:hover, html[data-theme="dark"] .mx-spy a.active { color: var(--mx-green-2); background: rgba(255, 138, 43, .12); }
@media (max-width: 991.98px) { .mx-spy { display: none; } }

/* ============================== 13. LIVE PULSE + COUNTDOWN ============================== */
.mx-live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mx-green-deep);
}
.mx-live .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-green); }
.mx-live.plain {
  font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--mx-muted);
}
.mx-live.plain b { color: var(--mx-text, inherit); font-weight: 800; }
html[data-theme="dark"] .mx-live.plain b { color: #fff; }
.mx-live .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--mx-green); animation: mxPing 1.7s ease-out infinite;
}
@keyframes mxPing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.mx-countdown { display: inline-flex; gap: .4rem; font-variant-numeric: tabular-nums; }
.mx-countdown .u {
  min-width: 46px; padding: .45rem .3rem; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .75));
  border: 1px solid rgba(10, 13, 16, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}
.mx-countdown .u b { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.mx-countdown .u span { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mx-muted); }
html[data-theme="dark"] .mx-countdown .u { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }

/* ============================== 14. GLOSSY PRICING HIGHLIGHT ============================== */
.mx-pricing {
  position: relative; border-radius: 26px; padding: 2.2rem;
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(255, 138, 43, .3), transparent 62%),
    linear-gradient(160deg, #170c06, #3a1e0b 60%, #1c0f07);
  color: #fff; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 34px 70px -32px rgba(10, 13, 16, .6);
}
.mx-pricing h3 { color: #fff; }
.mx-pricing .text-secondary { color: #A9B8B2 !important; }
.mx-pricing .btn-premium { background: linear-gradient(165deg, var(--mx-green-2), var(--mx-green)); }
.mx-pricing .mx-price {
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
}
.mx-pricing .mx-price small { font-size: .9rem; font-weight: 600; color: #A9B8B2; letter-spacing: 0; }

/* ============================== 15. SPLIT FEATURE ROWS ============================== */
.mx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
.mx-split + .mx-split { margin-top: 4.5rem; }
.mx-split:nth-child(even) .mx-split-media { order: -1; }
.mx-split h3 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: .8rem; }
.mx-split p { color: var(--mx-muted); line-height: 1.75; }
.mx-split-media {
  position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, rgba(248, 90, 0, .2), rgba(255, 138, 43, .07));
  border: 1px solid rgba(10, 13, 16, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 60px -30px rgba(10, 13, 16, .4);
  display: grid; place-items: center; font-size: 4.4rem;
  padding: 1rem;
}
.mx-split-media .row { width: 100%; }
.mx-split-media .row > [class*="col"] { display: flex; }
.mx-split-media .row .mx-tile { width: 100%; }
html[data-theme="dark"] .mx-split-media { background: linear-gradient(150deg, rgba(255, 138, 43, .22), rgba(248, 90, 0, .07)); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.mx-checklist { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.mx-checklist li { display: flex; align-items: flex-start; gap: .6rem; font-size: .93rem; }
.mx-checklist i { color: var(--mx-green); font-size: 1.05rem; margin-top: .12rem; flex-shrink: 0; }
@media (max-width: 991.98px) {
  .mx-split { grid-template-columns: 1fr; gap: 1.6rem; }
  .mx-split + .mx-split { margin-top: 3rem; }
  .mx-split:nth-child(even) .mx-split-media { order: 0; }
}

/* ============================== 16. RESPONSIVE ============================== */
@media (max-width: 767.98px) {
  .mx-pagehero { padding: 2.4rem 0 2rem; }
  .mx-pagehero .htile { width: 52px; height: 52px; border-radius: 16px; font-size: 1.4rem; }
  .mx-mega { gap: .7rem; }
  .mx-mega > * { padding: 1.1rem .6rem; border-radius: 18px; }
  .mx-wave { height: 46px; }
  .mx-service { border-radius: 18px; }
  .mx-palette { padding: 6vh .8rem .8rem; }
}

/* ============================== 17. REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  .mx-avatars .av:hover, .mx-mega > *:hover, .mx-service:hover, .mx-more:hover,
  .mx-logo:hover, .mx-split-media { transform: none; }
  .mx-skel .t, .mx-skel .b, .mx-skel .c { animation: none; }
  .mx-live .dot::after { animation: none; }
  .mx-palette.open, .mx-palette .box { animation: none; }
  .mx-service .go i, .mx-more i { transition: none; }
}

/* ============================== 18. PRINT ============================== */
@media print {
  .mx-mobilenav, .mx-palette, .mx-spy { display: none !important; }
  body { padding-bottom: 0 !important; }
  .mx-mega > *, .mx-service, .mx-pricing { box-shadow: none !important; }
}

/* ============================================================================
   19. ADMIN PANEL POLISH  (loads after admin.css → wins on equal specificity)
   Fixes the admin dark-mode tokens (previously --qt-* never redefined),
   gives stat cards / cards / tables a glossy premium treatment, and adds
   the v11 page-hero + tile system to the admin panel.
   ============================================================================ */
html[data-theme="dark"] {
  --qt-bg: #150a05;
  --qt-surface: #1b0f07;
  --qt-surface-2: #161D24;
  --qt-border: rgba(255, 255, 255, .12);
  --qt-text: #f8ebe0;
  --qt-muted: #93A69F;
  --qt-primary: #ff8a2b;
  --qt-primary-deep: #ffa35c;
  --qt-primary-soft: rgba(255, 138, 43, .14);
}
html[data-theme="dark"] body { background: var(--qt-bg); color: var(--qt-text); }
html[data-theme="dark"] .sidebar { background: var(--qt-surface); }
html[data-theme="dark"] .topbar { background: var(--qt-surface); }
html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--qt-text); color: var(--qt-text); }
html[data-theme="dark"] .table > thead th { color: var(--qt-muted); border-color: var(--qt-border); }
html[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--qt-border); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(255, 138, 43, .07); color: var(--qt-text); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background: var(--qt-surface-2); border-color: var(--qt-border); color: var(--qt-text); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background: var(--qt-surface-2); border-color: var(--qt-primary); color: var(--qt-text); box-shadow: 0 0 0 .2rem rgba(255, 138, 43, .18); }
html[data-theme="dark"] .form-control::placeholder { color: var(--qt-muted); }
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .text-secondary { color: var(--qt-muted) !important; }
html[data-theme="dark"] .dropdown-menu { background: var(--qt-surface); border-color: var(--qt-border); color: var(--qt-text); }
html[data-theme="dark"] .dropdown-item { color: var(--qt-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background: var(--qt-primary-soft); color: var(--qt-text); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--qt-border); }
html[data-theme="dark"] .modal-content { background: var(--qt-surface); border-color: var(--qt-border); color: var(--qt-text); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); }
html[data-theme="dark"] .list-group-item { background: var(--qt-surface); border-color: var(--qt-border); color: var(--qt-text); }
html[data-theme="dark"] .badge.text-bg-light { background: var(--qt-surface-2) !important; color: var(--qt-text) !important; border-color: var(--qt-border) !important; }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--qt-muted); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--qt-surface); border-color: var(--qt-border); color: var(--qt-text); }
html[data-theme="dark"] .accordion-item { background: var(--qt-surface); border-color: var(--qt-border); color: var(--qt-text); }
html[data-theme="dark"] .accordion-button { background: var(--qt-surface); color: var(--qt-text); }
html[data-theme="dark"] .page-link { background: var(--qt-surface); border-color: var(--qt-border); color: var(--qt-text); }
html[data-theme="dark"] .progress { background: var(--qt-surface-2); }

/* --- glossy cards (light + dark) --- */
.card {
  border-radius: 18px;
  background: linear-gradient(180deg, var(--qt-surface), color-mix(in srgb, var(--qt-surface) 92%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 28px -20px rgba(10, 13, 16, .28);
  transition: box-shadow .3s var(--mx-smooth, ease), transform .3s var(--mx-smooth, ease);
}
.card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 20px 44px -24px rgba(10, 13, 16, .38); }
html[data-theme="dark"] .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 40px -26px rgba(0, 0, 0, .9);
}
.card-header {
  font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qt-primary) 7%, transparent), transparent);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
}
html[data-theme="dark"] .card-header {
  background: linear-gradient(180deg, rgba(255, 138, 43, .08), transparent);
}

/* --- glossy stat cards --- */
.stat-card {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--qt-surface), color-mix(in srgb, var(--qt-surface) 88%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 30px -20px rgba(10, 13, 16, .3);
  transition: transform .35s var(--mx-smooth, ease), box-shadow .35s var(--mx-smooth, ease);
}
.stat-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px 120px at 100% 0%, var(--qt-primary-soft), transparent 70%);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 24px 50px -24px rgba(248, 90, 0, .45);
}
html[data-theme="dark"] .stat-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 18px 40px -26px rgba(0, 0, 0, .9);
}
.stat-icon {
  width: 52px; height: 52px; border-radius: 16px; font-size: 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.stat-value { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* --- glossy buttons --- */
.btn { border-radius: 12px; font-weight: 700; letter-spacing: -.005em; }
.btn-primary, .btn-success {
  background: linear-gradient(165deg, var(--qt-primary), var(--qt-primary-deep));
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 22px -12px rgba(248, 90, 0, .7);
}
.btn-primary:hover, .btn-success:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 14px 28px -12px rgba(248, 90, 0, .8);
}
.btn-outline-secondary, .btn-outline-dark { border-radius: 12px; }

/* --- table polish --- */
.table { --bs-table-bg: transparent; }
.table > thead th {
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--qt-muted);
  background: color-mix(in srgb, var(--qt-primary) 5%, transparent);
}
html[data-theme="dark"] .table > thead th { background: rgba(255, 138, 43, .07); }
.table > tbody > tr { transition: background .18s ease; }
.table > tbody > tr:hover > * { background: var(--qt-primary-soft); }

/* --- sidebar nav polish --- */
.sidebar .nav-link {
  border-radius: 12px; font-weight: 600;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sidebar .nav-link:hover { background: var(--qt-primary-soft); transform: translateX(2px); }
.sidebar .nav-link.active {
  background: linear-gradient(100deg, var(--qt-primary), var(--qt-primary-deep));
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -10px rgba(248, 90, 0, .7);
}

/* --- admin page hero (v11) --- */
.mx-pagehero { border-radius: 0 0 24px 24px; }

/* --- v11 tiles usable in admin --- */
.mx-tile {
  width: 46px; height: 46px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: var(--qt-primary-deep);
  background: linear-gradient(160deg, var(--qt-surface), var(--qt-surface-2));
  border: 1px solid var(--qt-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 18px -12px rgba(10, 13, 16, .3);
  transition: transform .3s var(--mx-spring, ease), box-shadow .3s ease;
}
.mx-tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 26px -12px rgba(248, 90, 0, .55); }
html[data-theme="dark"] .mx-tile { background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); color: var(--qt-primary); }
.mx-tile-lg { width: 60px; height: 60px; border-radius: 18px; font-size: 1.6rem; }
.mx-tile-sm { width: 38px; height: 38px; border-radius: 12px; font-size: 1rem; }
.mx-tile-green { background: linear-gradient(150deg, #ff8a2b, #f85a00 55%, #d84a00); color: #fff; border-color: rgba(255, 255, 255, .24); }
.mx-tile-dark { background: linear-gradient(150deg, #1d1008, #170c06); color: #fff; border-color: rgba(255, 255, 255, .14); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .stat-card:hover, .mx-tile:hover, .btn-primary:hover, .btn-success:hover,
  .sidebar .nav-link:hover { transform: none; }
}
@media print {
  .card, .stat-card, .mx-tile { box-shadow: none !important; }
}

/* ============================================================================
   20. HERO REBUILD — premium 3D depth stage  (.stage)
   Replaces the cluttered v2 composition: 4 redundant social-proof blocks
   consolidated into one, 5 competing background layers calmed down, and the
   flat mockup turned into a real perspective stage with translateZ layers.
   ============================================================================ */

/* ---- 20.1 calmer background (was: aurora + canvas + 3 blobs + grid + hard white vignette) ---- */
.hero-v2 .hero-bg .b1 { width: 460px; height: 460px; opacity: .26; filter: blur(110px); }
.hero-v2 .hero-bg .b2 { width: 400px; height: 400px; opacity: .22; filter: blur(120px); }
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 88%);
}
html[data-theme="dark"] .hero-fade { background: linear-gradient(180deg, transparent, #150a05 88%); }
#heroCanvas { opacity: .42; }

/* ---- 20.2 left column ---- */
.hero-copy { position: relative; z-index: 3; }
.hero-v2 .hero-title {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.042em; margin: 0 0 1.15rem;
}
.hero-line { display: inline-block; transform-style: preserve-3d; will-change: transform, opacity; }
.hero-v2 .lead { font-size: 1.06rem; line-height: 1.72; max-width: 33rem; }

/* consolidated social proof (replaces announce-pill + avatars + live + ministats) */
.hero-proof {
  display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .38rem .95rem .38rem .5rem; margin-bottom: 1.15rem;
  border-radius: 999px;
  background: var(--mx-glass, rgba(255, 255, 255, .72));
  border: 1px solid var(--mx-border, rgba(10, 13, 16, .09));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px -14px rgba(10, 13, 16, .35);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
}
.hero-proof-txt { font-size: .8rem; font-weight: 600; color: var(--mx-muted); white-space: nowrap; }
.hero-proof-txt b { color: var(--mx-black); font-weight: 800; font-variant-numeric: tabular-nums; }
.hero-proof-txt .sep { opacity: .45; margin: 0 .1rem; }
html[data-theme="dark"] .hero-proof {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
html[data-theme="dark"] .hero-proof-txt b { color: #fff; }

/* CTAs */
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }
.hero-cta .btn-premium {
  border-radius: 14px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -12px rgba(248, 90, 0, .75);
  transition: transform .3s var(--mx-spring, cubic-bezier(.34, 1.56, .64, 1)), box-shadow .3s ease;
}
.hero-cta .btn-premium:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 40px -12px rgba(248, 90, 0, .9); }
.btn-glass {
  border-radius: 14px; font-weight: 700; color: var(--mx-black);
  background: var(--mx-glass, rgba(255, 255, 255, .72));
  border: 1px solid var(--mx-border, rgba(10, 13, 16, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--mx-spring, ease), border-color .25s, box-shadow .3s;
}
.btn-glass:hover {
  transform: translateY(-3px); color: var(--mx-black);
  border-color: rgba(248, 90, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 32px -16px rgba(10, 13, 16, .4);
}
html[data-theme="dark"] .btn-glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
html[data-theme="dark"] .btn-glass:hover { color: #fff; border-color: rgba(255, 138, 43, .5); }

/* trust chips */
.hero-trust { display: flex; flex-wrap: wrap; gap: .55rem .5rem; }
.hero-trust span {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .8rem; font-weight: 700; color: var(--mx-muted);
  padding: .38rem .78rem; border-radius: 999px;
  background: var(--mx-glass, rgba(255, 255, 255, .6));
  border: 1px solid var(--mx-border, rgba(10, 13, 16, .08));
  transition: color .25s, border-color .25s, transform .3s var(--mx-spring, ease);
}
.hero-trust span i { color: var(--mx-green); font-size: .95rem; }
.hero-trust span:hover { color: var(--mx-green-deep); border-color: rgba(248, 90, 0, .4); transform: translateY(-2px); }
html[data-theme="dark"] .hero-trust span { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .hero-trust span:hover { color: var(--mx-green-2); }

/* ---- 20.3 the 3D stage ---- */
.stage {
  position: relative; height: 470px;
  perspective: 1250px;
  transform-style: preserve-3d;
  will-change: transform;
}
.stage-glow {
  position: absolute; left: 50%; top: 54%; width: 78%; height: 62%;
  transform: translate(-50%, -50%) translateZ(-160px);
  background: radial-gradient(closest-side, rgba(248, 90, 0, .34), transparent 72%);
  filter: blur(38px); pointer-events: none;
}
/* parallax depth panels behind the mockup */
.depth {
  position: absolute; left: 50%; top: 50%; border-radius: 22px;
  border: 1px solid rgba(248, 90, 0, .18);
  background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  pointer-events: none;
}
.depth.p1 { width: 62%; height: 66%; transform: translate(-50%, -50%) translateZ(-40px) rotate(-3deg); }
.depth.p2 { width: 54%; height: 58%; transform: translate(-50%, -50%) translateZ(-80px) rotate(3deg); opacity: .8; }
.depth.p3 { width: 46%; height: 50%; transform: translate(-50%, -50%) translateZ(-120px) rotate(-6deg); opacity: .55; }
html[data-theme="dark"] .depth { border-color: rgba(255, 138, 43, .2); background: linear-gradient(160deg, rgba(255, 138, 43, .12), rgba(255, 255, 255, .03)); }

/* rotating orbit rings */
.ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1.5px dashed rgba(248, 90, 0, .3);
  pointer-events: none;
}
.ring.r1 { width: 88%; height: 92%; transform: translate(-50%, -50%) translateZ(-30px) rotateX(72deg); animation: ringSpin 22s linear infinite; }
.ring.r2 { width: 70%; height: 74%; transform: translate(-50%, -50%) translateZ(-30px) rotateX(72deg); border-style: dotted; border-color: rgba(255, 138, 43, .38); animation: ringSpin 16s linear infinite reverse; }
@keyframes ringSpin { to { transform: translate(-50%, -50%) translateZ(-30px) rotateX(72deg) rotateZ(360deg); } }

/* the mockup — front layer, cursor-tracked specular sheen */
.mockup {
  position: relative; width: 86%; margin: 5% auto 0; z-index: 6;
  transform: translateZ(20px);
  transform-style: preserve-3d;
  animation: mockFloat 7s ease-in-out infinite;
  background: var(--mx-white); border: 1px solid var(--mx-border); border-radius: 18px;
  box-shadow: 0 48px 100px -38px rgba(10, 13, 16, .45), 0 0 0 1px rgba(248, 90, 0, .12);
  overflow: hidden;
  transition: transform .5s var(--mx-smooth, ease);
}
.mock-sheen {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(340px 220px at var(--sx, 50%) var(--sy, 0%), rgba(255, 255, 255, .85), transparent 68%);
  opacity: 0; transition: opacity .4s ease;
}
.stage:hover .mock-sheen { opacity: 1; }
html[data-theme="dark"] .mock-sheen { background: radial-gradient(340px 220px at var(--sx, 50%) var(--sy, 0%), rgba(255, 138, 43, .3), transparent 68%); }

/* floating glass chips — nearest layer */
.chip {
  position: absolute; z-index: 12; width: 172px; padding: .8rem .9rem;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .82));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 26px 50px -22px rgba(10, 13, 16, .5);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transform-style: preserve-3d;
}
.chip.c-wallet { top: 22%; right: -3%; transform: translateZ(90px); animation: chipFloatA 6.4s ease-in-out infinite; }
.chip.c-licence { bottom: 8%; left: -4%; transform: translateZ(110px); animation: chipFloatB 7.6s ease-in-out infinite .8s; }
@keyframes mockFloat {
  0%, 100% { transform: perspective(1250px) rotateY(-8deg) rotateX(3deg) translateZ(20px) translateY(0); }
  50%      { transform: perspective(1250px) rotateY(-8deg) rotateX(3deg) translateZ(20px) translateY(-12px); }
}
@keyframes chipFloatA {
  0%, 100% { transform: translateZ(90px) translateY(0) rotate(0deg); }
  50%      { transform: translateZ(90px) translateY(-15px) rotate(-1.2deg); }
}
@keyframes chipFloatB {
  0%, 100% { transform: translateZ(110px) translateY(0) rotate(0deg); }
  50%      { transform: translateZ(110px) translateY(-13px) rotate(1.2deg); }
}
.chip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.chip-top small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--mx-muted); }
.chip-top i { font-size: 1rem; color: var(--mx-green); }
.chip-val { font-family: var(--mx-font-head, "Sora", sans-serif); font-size: 1.22rem; font-weight: 800; letter-spacing: -.03em; color: var(--mx-black); }
.chip-val.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; letter-spacing: 0; }
.chip-badge {
  display: inline-flex; align-items: center; gap: .28rem; margin-top: .5rem;
  font-size: .66rem; font-weight: 800; padding: .22rem .55rem; border-radius: 999px;
  color: #1f0e05; background: linear-gradient(92deg, var(--mx-green-2, #ff8a2b), var(--mx-green));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.chip-badge.ok { background: linear-gradient(92deg, #ff8a2b, #d84a00); color: #fff; }
html[data-theme="dark"] .chip {
  background: linear-gradient(165deg, rgba(22, 29, 36, .96), rgba(12, 17, 21, .9));
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 26px 50px -22px rgba(0, 0, 0, .95);
}
html[data-theme="dark"] .chip-val { color: #fff; }

/* orbit icon badges */
.hero-v2 .orbit { width: 50px; height: 50px; font-size: 1.2rem; z-index: 14; }
.hero-v2 .orbit-1 { top: 8%; right: 10%; transform: translateZ(70px); }
.hero-v2 .orbit-2 { bottom: 26%; right: 4%; transform: translateZ(70px); }
.hero-v2 .orbit-3 { top: 44%; left: -3%; transform: translateZ(50px); }

/* ---- 20.4 CSS 3D product cube ---- */
.cube-wrap {
  position: absolute; right: 2%; top: 4%; z-index: 16;
  width: 58px; height: 58px; perspective: 420px;
  transform: translateZ(120px);
}
.cube {
  position: relative; width: 58px; height: 58px;
  transform-style: preserve-3d;
  animation: cubeSpin 16s linear infinite;
}
@keyframes cubeSpin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}
.cube .face {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: #fff;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px;
  backface-visibility: hidden;
}
.cube .f-pos { background: linear-gradient(150deg, #ff8a2b, #f85a00); transform: translateZ(29px); }
.cube .f-ret { background: linear-gradient(150deg, #f85a00, #d84a00); transform: rotateY(90deg) translateZ(29px); }
.cube .f-boo { background: linear-gradient(150deg, #d84a00, #4e2306); transform: rotateY(180deg) translateZ(29px); }
.cube .f-top { background: linear-gradient(150deg, #ffa35c, #ff8a2b); transform: rotateX(90deg) translateZ(29px); font-size: 1rem; }
.cube .f-bot { background: linear-gradient(150deg, #4e2306, #1f0e05); transform: rotateX(-90deg) translateZ(29px); }
.cube .f-lft { background: linear-gradient(150deg, #f85a00, #c2410c); transform: rotateY(-90deg) translateZ(29px); }

/* ---- 20.5 responsive ---- */
@media (max-width: 1199.98px) {
  .stage { height: 430px; transform: scale(.94); }
  .chip { width: 158px; }
}
@media (max-width: 991.98px) {
  .stage { height: 400px; transform: scale(.9); margin-top: 1rem; }
  .hero-v2 { min-height: auto; }
  .chip.c-wallet { right: 0; }
  .chip.c-licence { left: 0; }
  .cube-wrap { right: 0; }
}
@media (max-width: 575.98px) {
  .stage { height: 330px; transform: scale(.8); transform-origin: top center; }
  .hero-proof { width: 100%; }
  .hero-proof-txt { font-size: .74rem; }
  .hero-trust span { font-size: .74rem; padding: .32rem .66rem; }
  .hero-cta .btn { width: 100%; }
  .ring { display: none; }
}

/* ---- 20.6 reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .stage, .mockup, .depth, .chip, .ring, .cube, .orbit { transform: none !important; animation: none !important; }
  .cube { transform: rotateX(-18deg) rotateY(-32deg) !important; }
  .mockup { transform: none !important; }
  .chip.c-wallet { position: static; width: auto; margin: .6rem 0; }
  .chip.c-licence { display: none; }
  .mock-sheen { display: none; }
  .stage { height: auto; }
  .cube-wrap { display: none; }
}

/* ---- 20.7 print ---- */
@media print {
  .stage, .hero-fade, .hero-bg, .hero-grid, #heroCanvas, .hero-aurora { display: none !important; }
}

/* ===== SOURCE: theme-v12.css ===== */
/* ============================================================================
   MIRZA X LABS — Theme v12  (PREMIUM SaaS DESIGN SYSTEM — USER SIDE)
   Loads LAST. Refines every user-facing surface to one consistent,
   high-craft SaaS standard: nav, sections, cards, forms, auth, pricing,
   dashboard, tables, badges, micro-interactions, dark mode.

   Additive only — every rule is an override or a new class, so no existing
   page can break.
   ============================================================================ */

/* ============================== 1. REFINED TOKENS ============================== */
:root {
  /* elevation — softer, deeper, more layered than v7/v8 */
  --mx-el-0: 0 1px 2px rgba(10, 13, 16, .05);
  --mx-el-1: 0 1px 3px rgba(10, 13, 16, .06), 0 8px 20px -12px rgba(10, 13, 16, .14);
  --mx-el-2: 0 2px 6px rgba(10, 13, 16, .06), 0 18px 40px -20px rgba(10, 13, 16, .2);
  --mx-el-3: 0 4px 12px rgba(10, 13, 16, .07), 0 32px 64px -28px rgba(10, 13, 16, .28);
  --mx-el-4: 0 8px 24px rgba(10, 13, 16, .08), 0 48px 96px -36px rgba(10, 13, 16, .34);
  --mx-el-green: 0 18px 40px -18px rgba(248, 90, 0, .5);
  --mx-el-green-lg: 0 26px 56px -20px rgba(248, 90, 0, .62);

  /* radii */
  --mx-r-xs: 8px; --mx-r-sm: 10px; --mx-r-md: 14px;
  --mx-r-lg: 18px; --mx-r-xl: 24px; --mx-r-2xl: 30px;

  /* type scale (SaaS: tight tracking, strong contrast) */
  --mx-t-eyebrow: .72rem;
  --mx-t-body: .95rem;
  --mx-t-lead: 1.06rem;
  --mx-t-h2: clamp(1.65rem, 3.4vw, 2.5rem);
  --mx-t-h3: clamp(1.2rem, 2vw, 1.5rem);

  /* motion */
  --mx-ease-out: cubic-bezier(.22, 1, .36, 1);
  --mx-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mx-dur: .28s;

  /* glass */
  --mx-glass-lo: rgba(255, 255, 255, .62);
  --mx-glass-hi: rgba(255, 255, 255, .86);
  --mx-hairline: rgba(10, 13, 16, .08);
}
html[data-theme="dark"] {
  --mx-el-0: 0 1px 2px rgba(0, 0, 0, .5);
  --mx-el-1: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 20px -12px rgba(0, 0, 0, .8);
  --mx-el-2: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .9);
  --mx-el-3: 0 4px 12px rgba(0, 0, 0, .55), 0 32px 64px -28px rgba(0, 0, 0, .95);
  --mx-el-4: 0 8px 24px rgba(0, 0, 0, .6), 0 48px 96px -36px rgba(0, 0, 0, 1);
  --mx-glass-lo: rgba(255, 255, 255, .055);
  --mx-glass-hi: rgba(255, 255, 255, .1);
  --mx-hairline: rgba(255, 255, 255, .11);
}

/* ============================== 2. BASE TYPOGRAPHY ============================== */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .display-5, .display-6 {
  font-family: var(--mx-font-head, "Sora", sans-serif);
  letter-spacing: -.032em; line-height: 1.16;
}
p { line-height: 1.68; }
.text-secondary { color: var(--mx-muted) !important; }
::selection { background: rgba(255, 138, 43, .28); color: inherit; }

/* ============================== 3. PREMIUM NAVBAR ============================== */
.portal-nav {
  background: var(--mx-glass-lo);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border-bottom: 1px solid var(--mx-hairline);
  padding-top: .55rem; padding-bottom: .55rem;
  transition: background .3s ease, box-shadow .3s ease, padding .3s var(--mx-ease-out);
}
.portal-nav.shrunk {
  background: var(--mx-glass-hi);
  box-shadow: 0 10px 30px -18px rgba(10, 13, 16, .28);
  padding-top: .35rem; padding-bottom: .35rem;
}
html[data-theme="dark"] .portal-nav { background: rgba(7, 9, 11, .72); }
html[data-theme="dark"] .portal-nav.shrunk { background: rgba(7, 9, 11, .92); }
.portal-nav .navbar-brand { transition: transform .3s var(--mx-ease-spring); }
.portal-nav .navbar-brand:hover { transform: translateY(-1px); }
.portal-nav .navbar-brand strong { font-family: var(--mx-font-head, "Sora", sans-serif); font-weight: 800; letter-spacing: -.03em; font-size: 1.02rem; }
.portal-nav .navbar-brand small { font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(155deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px -8px rgba(248, 90, 0, .7);
}
.portal-nav .nav-link {
  position: relative; font-weight: 600; font-size: .92rem;
  padding: .45rem .8rem; border-radius: var(--mx-r-sm);
  transition: color var(--mx-dur) ease, background var(--mx-dur) ease;
}
.portal-nav .nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  transform: translateX(-50%);
  transition: width .3s var(--mx-ease-out);
}
.portal-nav .nav-link:hover { color: var(--mx-green-deep); background: rgba(248, 90, 0, .07); }
.portal-nav .nav-link:hover::after,
.portal-nav .nav-link.active::after { width: 22px; }
.portal-nav .nav-link.active { color: var(--mx-green-deep); font-weight: 700; }
html[data-theme="dark"] .portal-nav .nav-link:hover,
html[data-theme="dark"] .portal-nav .nav-link.active { color: var(--mx-green-2); background: rgba(255, 138, 43, .1); }
.navbar-toggler { border-radius: var(--mx-r-sm); border-color: var(--mx-hairline); padding: .3rem .55rem; }
.wallet-chip {
  border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--mx-green-soft); border: 1px solid var(--mx-border-2);
  transition: transform var(--mx-dur) var(--mx-ease-spring), box-shadow var(--mx-dur) ease;
}
.wallet-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(248, 90, 0, .6); }
.btn-topup {
  border-radius: var(--mx-r-sm); font-weight: 700;
  background: linear-gradient(160deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -10px rgba(248, 90, 0, .7);
  transition: transform var(--mx-dur) var(--mx-ease-spring), box-shadow var(--mx-dur) ease;
}
.btn-topup:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--mx-el-green); }
.bell-btn, .user-chip {
  border-radius: var(--mx-r-sm); border: 1px solid var(--mx-hairline);
  background: var(--mx-glass-lo);
  transition: transform var(--mx-dur) var(--mx-ease-spring), border-color var(--mx-dur), box-shadow var(--mx-dur);
}
.bell-btn:hover, .user-chip:hover { transform: translateY(-1px); border-color: rgba(248, 90, 0, .45); box-shadow: var(--mx-el-1); }
.user-chip .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(155deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  color: #fff; font-weight: 800; font-size: .78rem;
  display: inline-grid; place-items: center;
}
.dropdown-menu {
  border-radius: var(--mx-r-lg); border: 1px solid var(--mx-hairline);
  box-shadow: var(--mx-el-3); padding: .4rem;
  background: var(--mx-glass-hi);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
.dropdown-item { border-radius: var(--mx-r-sm); font-weight: 600; font-size: .88rem; padding: .45rem .6rem; }
.dropdown-item:hover { background: rgba(248, 90, 0, .1); color: var(--mx-green-deep); }
html[data-theme="dark"] .dropdown-menu { background: rgba(16, 22, 27, .96); }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(255, 138, 43, .14); color: var(--mx-green-2); }

/* ============================== 4. SECTION RHYTHM ============================== */
.section-pad { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-head { max-width: 44rem; margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.section-head h2, .section-head h1 {
  font-size: var(--mx-t-h2); font-weight: 800; letter-spacing: -.038em;
  line-height: 1.14; margin: .5rem 0 .7rem;
}
.section-head p { font-size: var(--mx-t-lead); color: var(--mx-muted); line-height: 1.7; margin: 0; }
.section-head.text-center { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--mx-t-eyebrow); font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--mx-green-deep);
}
.eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
}
.section-head.text-center .eyebrow::before { display: none; }
html[data-theme="dark"] .eyebrow { color: var(--mx-green-2); }
.grad-text {
  background: linear-gradient(104deg, var(--mx-green-2, #ff8a2b) 0%, var(--mx-green) 45%, var(--mx-green-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glow-divider {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(248, 90, 0, .35), transparent);
}

/* ============================== 5. PREMIUM CARDS ============================== */
.card {
  border-radius: var(--mx-r-xl);
  border: 1px solid var(--mx-hairline);
  background: linear-gradient(180deg, var(--mx-glass-hi), var(--mx-glass-lo));
  box-shadow: var(--mx-el-1);
  transition: transform .35s var(--mx-ease-out), box-shadow .35s ease, border-color .3s ease;
}
.card:hover { box-shadow: var(--mx-el-3); border-color: rgba(248, 90, 0, .28); }
.card-header {
  border-top-left-radius: var(--mx-r-xl); border-top-right-radius: var(--mx-r-xl);
  font-weight: 800; letter-spacing: -.01em; font-size: .94rem;
  background: linear-gradient(180deg, rgba(248, 90, 0, .07), transparent);
  border-bottom: 1px solid var(--mx-hairline);
  padding: 1rem 1.25rem;
}
.card-body { padding: 1.35rem 1.4rem; }
.card-footer { border-bottom-left-radius: var(--mx-r-xl); border-bottom-right-radius: var(--mx-r-xl); border-top: 1px solid var(--mx-hairline); }
html[data-theme="dark"] .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  box-shadow: var(--mx-el-2);
}
html[data-theme="dark"] .card:hover { box-shadow: var(--mx-el-3); }
html[data-theme="dark"] .card-header { background: linear-gradient(180deg, rgba(255, 138, 43, .09), transparent); }

/* glossy card — opt-in sheen sweep */
.gloss { position: relative; overflow: hidden; }
.gloss::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .8s var(--mx-ease-out);
}
.gloss:hover::after { transform: translateX(130%); }
html[data-theme="dark"] .gloss::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 138, 43, .16) 50%, transparent 65%);
}

/* ============================== 6. PREMIUM BUTTONS ============================== */
.btn { border-radius: var(--mx-r-md); font-weight: 700; letter-spacing: -.005em; transition: transform var(--mx-dur) var(--mx-ease-spring), box-shadow var(--mx-dur) ease, filter var(--mx-dur) ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { border-radius: var(--mx-r-lg); padding: .7rem 1.4rem; font-size: 1rem; }
.btn-sm { border-radius: var(--mx-r-sm); }
.btn-premium, .btn-primary, .btn-success {
  background: linear-gradient(160deg, var(--mx-green-2, #ff8a2b), var(--mx-green) 55%, var(--mx-green-deep));
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 24px -12px rgba(248, 90, 0, .75);
}
.btn-premium:hover, .btn-primary:hover, .btn-success:hover {
  color: #fff; filter: brightness(1.06); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), var(--mx-el-green);
}
.btn-outline-primary, .btn-outline-success {
  border-radius: var(--mx-r-md); font-weight: 700;
  border: 1.5px solid rgba(248, 90, 0, .5); color: var(--mx-green-deep);
  background: var(--mx-glass-lo);
}
.btn-outline-primary:hover, .btn-outline-success:hover {
  background: var(--mx-green-deep); border-color: var(--mx-green-deep); color: #fff;
  transform: translateY(-2px); box-shadow: var(--mx-el-green);
}
.btn-outline-light {
  border-radius: var(--mx-r-md); font-weight: 700;
  border: 1.5px solid var(--mx-hairline); color: var(--mx-black);
  background: var(--mx-glass-lo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-outline-light:hover {
  background: var(--mx-black); border-color: var(--mx-black); color: #fff; transform: translateY(-2px);
}
.btn-warning {
  border-radius: var(--mx-r-md); font-weight: 800; border: none; color: #1f0e05;
  background: linear-gradient(160deg, #FDE68A, #F59E0B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 22px -12px rgba(245, 158, 11, .8);
}
.btn-warning:hover { color: #1f0e05; filter: brightness(1.05); transform: translateY(-2px); }
.btn-danger { border-radius: var(--mx-r-md); font-weight: 700; }
.btn-link { font-weight: 700; }

/* ============================== 7. PREMIUM FORMS ============================== */
.form-control, .form-select {
  border-radius: var(--mx-r-md);
  border: 1.5px solid var(--mx-hairline);
  background: var(--mx-glass-lo);
  padding: .62rem .85rem; font-size: .94rem; font-weight: 500;
  transition: border-color var(--mx-dur), box-shadow var(--mx-dur), background var(--mx-dur), transform var(--mx-dur) var(--mx-ease-out);
}
.form-control:hover, .form-select:hover { border-color: rgba(248, 90, 0, .35); }
.form-control:focus, .form-select:focus {
  background: var(--mx-surface, #fff);
  border-color: var(--mx-green);
  box-shadow: 0 0 0 4px rgba(248, 90, 0, .14);
  transform: translateY(-1px);
}
.form-control::placeholder { color: var(--mx-muted); opacity: .75; font-weight: 500; }
.form-label { font-weight: 700; font-size: .84rem; letter-spacing: -.005em; margin-bottom: .35rem; }
.form-text { font-size: .78rem; color: var(--mx-muted); }
.input-group-text {
  border-radius: var(--mx-r-md); border: 1.5px solid var(--mx-hairline);
  background: var(--mx-glass-lo); font-weight: 700;
}
.form-check-input { border-radius: 6px; border: 1.5px solid var(--mx-hairline); }
.form-check-input:checked { background-color: var(--mx-green); border-color: var(--mx-green); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(248, 90, 0, .14); border-color: var(--mx-green); }
.form-check-label { font-size: .88rem; font-weight: 600; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .13); color: var(--mx-ink, #f8ebe0); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background: rgba(255, 255, 255, .08); border-color: var(--mx-green-2, #ff8a2b); box-shadow: 0 0 0 4px rgba(255, 138, 43, .18); }
html[data-theme="dark"] .form-control::placeholder { color: var(--mx-muted); }
html[data-theme="dark"] .input-group-text { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13); color: var(--mx-ink, #f8ebe0); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #C64233; }
.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--mx-green); }

/* ============================== 8. BADGES & PILLS ============================== */
.badge { border-radius: 999px; font-weight: 800; letter-spacing: .02em; padding: .34em .7em; font-size: .74rem; }
.badge.text-bg-success { background: linear-gradient(150deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep)) !important; }
.badge.text-bg-warning { background: linear-gradient(150deg, #FDE68A, #F59E0B) !important; color: #1f0e05 !important; }
.badge.text-bg-danger { background: linear-gradient(150deg, #F87171, #B91C1C) !important; }
.badge.text-bg-light { background: var(--mx-glass-lo) !important; border: 1px solid var(--mx-hairline); color: var(--mx-muted) !important; }
.badge.text-bg-secondary { background: var(--mx-glass-lo) !important; border: 1px solid var(--mx-hairline); color: var(--mx-muted) !important; }
html[data-theme="dark"] .badge.text-bg-light,
html[data-theme="dark"] .badge.text-bg-secondary { background: rgba(255, 255, 255, .08) !important; color: var(--mx-muted) !important; border-color: rgba(255, 255, 255, .13); }
.alert { border-radius: var(--mx-r-lg); border: 1px solid var(--mx-hairline); font-weight: 600; box-shadow: var(--mx-el-1); }
.alert-success { background: linear-gradient(120deg, rgba(255, 138, 43, .14), rgba(255, 138, 43, .05)); border-color: rgba(248, 90, 0, .3); color: var(--mx-green-deep); }
.alert-danger { background: linear-gradient(120deg, rgba(248, 113, 113, .14), rgba(248, 113, 113, .05)); border-color: rgba(198, 67, 51, .3); }
.alert-warning { background: linear-gradient(120deg, rgba(253, 230, 138, .2), rgba(253, 230, 138, .06)); border-color: rgba(245, 158, 11, .35); }
.alert-info { background: linear-gradient(120deg, rgba(248, 90, 0, .1), rgba(248, 90, 0, .04)); border-color: rgba(248, 90, 0, .28); color: var(--mx-green-deep); }
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert-info { color: var(--mx-green-2, #ffa35c); }

/* ============================== 9. PREMIUM AUTH ============================== */
.auth-shell { background: var(--mx-bg, #f8f7f6); }
.auth-split { grid-template-columns: 1.08fr 1fr; }
.auth-side {
  background:
    radial-gradient(760px 460px at 18% 16%, rgba(248, 90, 0, .18), transparent 62%),
    radial-gradient(640px 420px at 92% 88%, rgba(255, 138, 43, .14), transparent 58%),
    linear-gradient(158deg, #f9f7f5, #FFFFFF);
}
html[data-theme="dark"] .auth-side {
  background:
    radial-gradient(760px 460px at 18% 16%, rgba(248, 90, 0, .26), transparent 62%),
    radial-gradient(640px 420px at 92% 88%, rgba(255, 138, 43, .14), transparent 58%),
    linear-gradient(158deg, #0A0E11, #150a05);
}
.auth-card {
  border-radius: var(--mx-r-2xl); padding: 2.4rem;
  border: 1px solid var(--mx-hairline);
  background: linear-gradient(180deg, var(--mx-glass-hi), var(--mx-glass-lo));
  box-shadow: var(--mx-el-3);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
html[data-theme="dark"] .auth-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  box-shadow: var(--mx-el-4);
}
.auth-card h4, .auth-card .h4 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.036em; margin-bottom: .3rem;
}
.auth-card .form-control { padding: .72rem .95rem; }
.btn-google {
  border-radius: var(--mx-r-md); font-weight: 700;
  border: 1.5px solid var(--mx-hairline); background: var(--mx-surface, #fff);
  box-shadow: var(--mx-el-0);
  transition: transform var(--mx-dur) var(--mx-ease-spring), box-shadow var(--mx-dur), border-color var(--mx-dur);
}
.btn-google:hover { transform: translateY(-2px); box-shadow: var(--mx-el-2); border-color: rgba(248, 90, 0, .35); }
html[data-theme="dark"] .btn-google { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .13); color: var(--mx-ink, #f8ebe0); }
.hr-label {
  display: flex; align-items: center; gap: .8rem;
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--mx-muted);
}
.hr-label::before, .hr-label::after { content: ""; flex: 1; height: 1px; background: var(--mx-hairline); }
.side-shapes span { border-radius: 30%; opacity: .5; }

/* ============================== 10. PRICING ============================== */
.plan-card {
  position: relative; overflow: hidden;
  border-radius: var(--mx-r-2xl); padding: 1.9rem 1.75rem;
  border: 1px solid var(--mx-hairline);
  background: linear-gradient(180deg, var(--mx-glass-hi), var(--mx-glass-lo));
  box-shadow: var(--mx-el-2);
  transition: transform .4s var(--mx-ease-out), box-shadow .4s ease, border-color .3s ease;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--mx-el-4); border-color: rgba(248, 90, 0, .3); }
.plan-card.featured {
  border: 1.5px solid rgba(248, 90, 0, .45);
  background: linear-gradient(180deg, rgba(255, 138, 43, .1), var(--mx-glass-lo) 42%);
  box-shadow: var(--mx-el-3), 0 0 0 4px rgba(248, 90, 0, .1);
}
.plan-card.featured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 50% -12%, rgba(248, 90, 0, .2), transparent 70%);
}
.plan-card h5 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.028em; }
.plan-price {
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: clamp(2.1rem, 4.5vw, 2.9rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, var(--mx-black), #3B4A45);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .plan-price { background: linear-gradient(170deg, #fff, #93A69F); -webkit-background-clip: text; background-clip: text; }
.plan-feats { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.plan-feats li { display: flex; align-items: flex-start; gap: .55rem; font-size: .89rem; color: var(--mx-muted); }
.plan-feats li i { color: var(--mx-green); font-size: 1rem; margin-top: .12rem; flex-shrink: 0; }
.plan-save {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .26rem .6rem; border-radius: 999px; color: #1f0e05;
  background: linear-gradient(92deg, var(--mx-green-2, #ff8a2b), var(--mx-green));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.cycle-toggle {
  display: inline-flex; gap: .25rem; padding: .28rem;
  border-radius: 999px; background: var(--mx-glass-lo);
  border: 1px solid var(--mx-hairline); box-shadow: var(--mx-el-0);
}
.cycle-toggle button {
  border: 0; background: transparent; cursor: pointer;
  padding: .42rem 1.05rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; color: var(--mx-muted);
  transition: background var(--mx-dur), color var(--mx-dur), box-shadow var(--mx-dur);
}
.cycle-toggle button.active {
  color: #fff;
  background: linear-gradient(160deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px rgba(248, 90, 0, .8);
}
html[data-theme="dark"] .cycle-toggle { background: rgba(255, 255, 255, .06); }

/* ============================== 11. DASHBOARD ============================== */
.dash-stat {
  position: relative; overflow: hidden;
  border-radius: var(--mx-r-xl); padding: 1.3rem 1.4rem;
  border: 1px solid var(--mx-hairline);
  background: linear-gradient(180deg, var(--mx-glass-hi), var(--mx-glass-lo));
  box-shadow: var(--mx-el-1);
  transition: transform .35s var(--mx-ease-out), box-shadow .35s ease, border-color .3s;
}
.dash-stat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px 130px at 100% 0%, rgba(248, 90, 0, .12), transparent 70%);
}
.dash-stat:hover { transform: translateY(-4px); box-shadow: var(--mx-el-3); border-color: rgba(248, 90, 0, .28); }
.dash-stat .label {
  position: relative; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mx-muted);
}
.dash-stat .value {
  position: relative; font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.038em;
  font-variant-numeric: tabular-nums; color: var(--mx-black);
}
html[data-theme="dark"] .dash-stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  box-shadow: var(--mx-el-2);
}
html[data-theme="dark"] .dash-stat .value { color: #fff; }
.referral-card {
  border-radius: var(--mx-r-xl);
  border: 1px solid rgba(248, 90, 0, .28);
  background: linear-gradient(125deg, rgba(255, 138, 43, .14), var(--mx-glass-lo) 60%);
  box-shadow: var(--mx-el-2);
}
.ring {
  --size: 88px;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0; position: relative;
  background: conic-gradient(var(--mx-green) calc(var(--p) * 1%), var(--mx-surface-2, #faf0e8) 0);
  box-shadow: var(--mx-el-1);
}
.ring::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--mx-surface, #fff);
}
html[data-theme="dark"] .ring::before { background: #1b0f07; }
.ring b { position: relative; font-size: .82rem; font-weight: 800; color: var(--mx-green-deep); }
html[data-theme="dark"] .ring b { color: var(--mx-green-2, #ff8a2b); }

/* ============================== 12. PREMIUM TABLES ============================== */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  font-size: .71rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mx-muted);
  background: rgba(248, 90, 0, .06);
  border-bottom: 1px solid var(--mx-hairline);
  padding: .8rem 1rem; white-space: nowrap;
}
.table > tbody td { padding: .8rem 1rem; vertical-align: middle; font-size: .89rem; }
.table > tbody > tr { transition: background .18s ease; }
.table > tbody > tr:hover > * { background: rgba(248, 90, 0, .05); }
.table a { color: var(--mx-green-deep); font-weight: 700; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.font-monospace, .mono { font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .table { color: var(--mx-ink, #f8ebe0); }
html[data-theme="dark"] .table > thead th { background: rgba(255, 138, 43, .08); color: var(--mx-muted); border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .table > :not(caption) > * > * { border-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .table > tbody > tr:hover > * { background: rgba(255, 138, 43, .07); }

/* ============================== 13. TABS / NAV-PILLS ============================== */
.tab-bar {
  display: inline-flex; gap: .25rem; padding: .3rem;
  border-radius: 999px; background: var(--mx-glass-lo);
  border: 1px solid var(--mx-hairline); box-shadow: var(--mx-el-0);
  flex-wrap: wrap;
}
.tab-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: .45rem 1.05rem; border-radius: 999px;
  font-size: .86rem; font-weight: 700; color: var(--mx-muted);
  transition: background var(--mx-dur), color var(--mx-dur), box-shadow var(--mx-dur);
}
.tab-btn:hover { color: var(--mx-green-deep); }
.tab-btn.active {
  color: #fff;
  background: linear-gradient(160deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px rgba(248, 90, 0, .8);
}
.nav-pills .nav-link { border-radius: 999px; font-weight: 700; font-size: .87rem; padding: .42rem 1rem; }
.nav-pills .nav-link.active {
  background: linear-gradient(160deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -10px rgba(248, 90, 0, .8);
}
.nav-tabs { border-bottom: 1px solid var(--mx-hairline); gap: .3rem; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--mx-r-sm) var(--mx-r-sm) 0 0;
  font-weight: 700; font-size: .89rem; color: var(--mx-muted); padding: .55rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--mx-green-deep); border-bottom-color: rgba(248, 90, 0, .35); }
.nav-tabs .nav-link.active { color: var(--mx-green-deep); border-bottom-color: var(--mx-green); background: transparent; }
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--mx-green-2, #ff8a2b); }

/* ============================== 14. MISC COMPONENTS ============================== */
.notif-list { display: flex; flex-direction: column; gap: .55rem; }
.notif-item {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--mx-r-lg);
  border: 1px solid var(--mx-hairline);
  background: var(--mx-glass-lo);
  transition: transform var(--mx-dur) var(--mx-ease-out), border-color var(--mx-dur), box-shadow var(--mx-dur);
}
.notif-item:hover { transform: translateX(3px); border-color: rgba(248, 90, 0, .3); box-shadow: var(--mx-el-1); }
.notif-item.is-new { border-color: rgba(248, 90, 0, .35); background: linear-gradient(100deg, rgba(255, 138, 43, .12), var(--mx-glass-lo)); }
.notif-icon {
  width: 38px; height: 38px; border-radius: var(--mx-r-sm); flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--mx-green-soft); color: var(--mx-green-deep);
}
.notif-time { font-size: .74rem; color: var(--mx-muted); font-weight: 600; }
.empty {
  border-radius: var(--mx-r-xl); padding: 3rem 1.5rem; text-align: center;
  border: 1.5px dashed var(--mx-hairline); color: var(--mx-muted);
  background: var(--mx-glass-lo);
}
.progress { border-radius: 999px; background: var(--mx-surface-2, #faf0e8); }
.progress-bar { background: linear-gradient(90deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep)); border-radius: 999px; }
.list-group-item { border-color: var(--mx-hairline); background: transparent; font-weight: 600; }
.list-group-item.active { background: linear-gradient(160deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep)); border-color: transparent; }
.accordion-item { border-color: var(--mx-hairline); background: transparent; border-radius: var(--mx-r-lg) !important; margin-bottom: .5rem; overflow: hidden; }
.accordion-button { font-weight: 700; border-radius: var(--mx-r-lg) !important; }
.accordion-button:not(.collapsed) { background: rgba(248, 90, 0, .1); color: var(--mx-green-deep); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(248, 90, 0, .12); }
html[data-theme="dark"] .accordion-item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .accordion-button { color: var(--mx-ink, #f8ebe0); background: transparent; }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(255, 138, 43, .14); color: var(--mx-green-2, #ff8a2b); }
.modal-content { border-radius: var(--mx-r-xl); border: 1px solid var(--mx-hairline); box-shadow: var(--mx-el-4); }
.modal-header, .modal-footer { border-color: var(--mx-hairline); }
html[data-theme="dark"] .modal-content { background: #1b0f07; color: var(--mx-ink, #f8ebe0); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); }

/* ============================== 15. FOOTER ============================== */
.portal-footer {
  position: relative;
  background: linear-gradient(180deg, var(--mx-bg, #f8f7f6), #FFFFFF);
  border-top: 1px solid var(--mx-hairline);
}
html[data-theme="dark"] .portal-footer { background: linear-gradient(180deg, #150a05, #0A0E11); }
.portal-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 90, 0, .4), transparent);
}
.foot-brand { font-family: var(--mx-font-head, "Sora", sans-serif); font-weight: 800; letter-spacing: -.03em; }
.foot-col h6 {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--mx-muted); margin-bottom: .9rem;
}
.foot-col a {
  display: inline-block; padding: .22rem 0;
  font-size: .88rem; font-weight: 600; color: var(--mx-muted); text-decoration: none;
  transition: color var(--mx-dur), transform var(--mx-dur) var(--mx-ease-out);
}
.foot-col a:hover { color: var(--mx-green-deep); transform: translateX(3px); }
html[data-theme="dark"] .foot-col a:hover { color: var(--mx-green-2, #ff8a2b); }
.foot-tag { font-size: .87rem; color: var(--mx-muted); line-height: 1.7; }
.foot-social a {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--mx-r-sm); border: 1px solid var(--mx-hairline);
  background: var(--mx-glass-lo); color: var(--mx-muted);
  transition: transform var(--mx-dur) var(--mx-ease-spring), color var(--mx-dur), border-color var(--mx-dur), box-shadow var(--mx-dur);
}
.foot-social a:hover {
  transform: translateY(-3px); color: var(--mx-green-deep);
  border-color: rgba(248, 90, 0, .4); box-shadow: var(--mx-el-1);
}
html[data-theme="dark"] .foot-social a:hover { color: var(--mx-green-2, #ff8a2b); }

/* ============================== 16. AI FLOAT + MOBILE NAV ============================== */
.ai-float-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(160deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 36px -12px rgba(248, 90, 0, .8);
  transition: transform .3s var(--mx-ease-spring), box-shadow .3s ease;
}
.ai-float-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--mx-el-green-lg); }
.ai-float-ping {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--mx-green-2, #ff8a2b); animation: mxPing 2s ease-out infinite;
}
@keyframes mxPing { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

/* ============================== 17. FOCUS / A11Y ============================== */
:focus-visible {
  outline: 2px solid var(--mx-green);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline-offset: 3px; }
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 9999; padding: .6rem 1.2rem; border-radius: 0 0 var(--mx-r-md) var(--mx-r-md);
  background: var(--mx-green-deep); color: #fff; font-weight: 700; text-decoration: none;
  transition: top .25s var(--mx-ease-out);
}
.skip-link:focus { top: 0; color: #fff; }

/* ============================== 18. RESPONSIVE ============================== */
@media (max-width: 991.98px) {
  .portal-nav .navbar-collapse {
    margin-top: .8rem; padding-top: .8rem;
    border-top: 1px solid var(--mx-hairline);
  }
  .portal-nav .nav-link { padding: .6rem .8rem; }
  .portal-nav .nav-link::after { display: none; }
  .section-pad { padding: 3rem 0; }
  .section-head { margin-bottom: 1.6rem; }
  .card-body { padding: 1.15rem 1.2rem; }
  .auth-card { padding: 1.8rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .section-head h2, .section-head h1 { font-size: 1.55rem; }
  .plan-card { padding: 1.5rem 1.35rem; }
  .table > tbody td, .table > thead th { padding: .65rem .7rem; font-size: .84rem; }
  .dash-stat { padding: 1.05rem 1.15rem; }
  .dash-stat .value { font-size: 1.45rem; }
}

/* ============================== 19. REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .plan-card:hover, .dash-stat:hover, .notif-item:hover,
  .btn:hover, .btn-premium:hover, .btn-primary:hover, .btn-success:hover,
  .btn-outline-light:hover, .btn-outline-primary:hover, .btn-outline-success:hover,
  .btn-topup:hover, .wallet-chip:hover, .bell-btn:hover, .user-chip:hover,
  .foot-social a:hover, .foot-col a:hover, .ai-float-btn:hover,
  .navbar-brand:hover, .tab-btn, .cycle-toggle button {
    transform: none !important;
  }
  .gloss::after { display: none; }
  .portal-nav .nav-link::after { transition: none; }
  .ai-float-ping { animation: none; }
}

/* ============================== 20. PRINT ============================== */
@media print {
  .portal-nav, .portal-footer, .ai-float-btn, .mx-mobilenav, .mx-palette,
  .mx-kbd-btn, .theme-toggle, .mx-top, #mxTop, .scroll-hint { display: none !important; }
  .card, .plan-card, .dash-stat, .auth-card { box-shadow: none !important; border: 1px solid #ccc !important; }
  body { background: #fff !important; color: #000 !important; }
  .section-pad { padding: 1rem 0 !important; }
}

/* ============================== 21. CURSOR SPOTLIGHT (JS-driven) ============================== */
/* animations-v12.js writes --mx-x / --mx-y / --mx-spot on these elements. */
.card, .plan-card, .dash-stat, .mx-service, .feature-card, .step-card, .notif-item, .auth-card {
  position: relative;
  isolation: isolate;
}
.card::before, .plan-card::before, .dash-stat::before, .mx-service::before,
.feature-card::before, .step-card::before, .notif-item::before, .auth-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(280px 200px at var(--mx-x, 50%) var(--mx-y, 0%), rgba(255, 138, 43, .16), transparent 70%);
  opacity: var(--mx-spot, 0);
  transition: opacity .35s ease;
}
/* keep real content above the glow layer */
.card > *, .plan-card > *, .dash-stat > *, .mx-service > *,
.feature-card > *, .step-card > *, .notif-item > *, .auth-card > * { position: relative; z-index: 1; }
/* the v11 mega/stat cards already use ::before for their own glow */
.mx-mega > *::before { background: radial-gradient(280px 160px at 50% -20%, rgba(248, 90, 0, .18), transparent 70%); opacity: 1; }
html[data-theme="dark"] .card::before, html[data-theme="dark"] .plan-card::before,
html[data-theme="dark"] .dash-stat::before, html[data-theme="dark"] .mx-service::before,
html[data-theme="dark"] .feature-card::before, html[data-theme="dark"] .step-card::before,
html[data-theme="dark"] .notif-item::before, html[data-theme="dark"] .auth-card::before {
  background: radial-gradient(280px 200px at var(--mx-x, 50%) var(--mx-y, 0%), rgba(255, 138, 43, .26), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .card::before, .plan-card::before, .dash-stat::before, .mx-service::before,
  .feature-card::before, .step-card::before, .notif-item::before, .auth-card::before { display: none; }
}

/* ============================== 22. BENTO FEATURE GRID (SaaS signature) ============================== */
.mx-bento { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
.mx-bento .cell { grid-column: span 2; }
.mx-bento .cell.w3 { grid-column: span 3; }
.mx-bento .cell.w4 { grid-column: span 4; }
.mx-bento .cell.w6 { grid-column: span 6; }
.mx-bento .cell.tall { grid-row: span 2; }
.bento-card {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.6rem 1.5rem;
  border-radius: var(--mx-r-xl);
  border: 1px solid var(--mx-hairline);
  background: linear-gradient(180deg, var(--mx-glass-hi), var(--mx-glass-lo));
  box-shadow: var(--mx-el-1);
  transition: transform .4s var(--mx-ease-out), box-shadow .4s ease, border-color .3s ease;
}
.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--mx-el-3);
  border-color: rgba(248, 90, 0, .32);
}
.bento-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px 220px at 100% 0%, rgba(248, 90, 0, .13), transparent 70%);
}
.bento-card .b-ico {
  width: 46px; height: 46px; border-radius: var(--mx-r-md);
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
  background: linear-gradient(155deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -10px rgba(248, 90, 0, .7);
  transition: transform .35s var(--mx-ease-spring);
}
.bento-card:hover .b-ico { transform: rotate(-8deg) scale(1.08); }
.bento-card h3, .bento-card .b-title {
  position: relative;
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.026em; margin: 0;
}
.bento-card p, .bento-card .b-desc {
  position: relative; font-size: .89rem; line-height: 1.65;
  color: var(--mx-muted); margin: 0;
}
.bento-card .b-tag {
  position: relative; align-self: flex-start;
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: 999px; color: var(--mx-green-deep);
  background: var(--mx-green-soft); border: 1px solid var(--mx-border-2, rgba(248, 90, 0, .35));
}
.bento-card.feature {
  border: 1.5px solid rgba(248, 90, 0, .4);
  background: linear-gradient(155deg, rgba(255, 138, 43, .14), var(--mx-glass-lo) 55%);
}
.bento-card.feature::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(460px 240px at 20% -10%, rgba(248, 90, 0, .22), transparent 70%);
}
.bento-card .b-metric {
  position: relative; font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--mx-black);
}
html[data-theme="dark"] .bento-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  box-shadow: var(--mx-el-2);
}
html[data-theme="dark"] .bento-card:hover { box-shadow: var(--mx-el-3); }
html[data-theme="dark"] .bento-card .b-metric { color: #fff; }
html[data-theme="dark"] .bento-card.feature { background: linear-gradient(155deg, rgba(255, 138, 43, .18), rgba(255, 255, 255, .03) 55%); }
html[data-theme="dark"] .bento-card .b-tag { color: var(--mx-green-2, #ff8a2b); background: rgba(255, 138, 43, .14); }
@media (max-width: 991.98px) {
  .mx-bento { grid-template-columns: repeat(4, 1fr); }
  .mx-bento .cell, .mx-bento .cell.w3, .mx-bento .cell.w4 { grid-column: span 2; }
  .mx-bento .cell.w6 { grid-column: span 4; }
}
@media (max-width: 575.98px) {
  .mx-bento { grid-template-columns: 1fr; }
  .mx-bento .cell, .mx-bento .cell.w3, .mx-bento .cell.w4, .mx-bento .cell.w6 { grid-column: span 1; }
  .bento-card { padding: 1.3rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-card:hover, .bento-card:hover .b-ico { transform: none; }
}

/* ===== SOURCE: theme-v13.css ===== */
/* ============================================================================
   MIRZA X LABS — Theme v13
   PART 1  GLOBAL HARDENING — kill browser zoom, kill text selection,
                             contain horizontal overflow
   PART 2  HERO REBUILD v13  — sharp, restrained, premium
   Loads LAST, additive only.
   ============================================================================ */

/* ============================================================================
   PART 1 — GLOBAL HARDENING
   ============================================================================ */

/* --- 1.1 NO HORIZONTAL OVERFLOW ------------------------------------------- */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
/* any full-bleed decoration is clipped, never scrollable */
.hero, .hero-v2, .hero-v3, .cta-band, .portal-footer, .mx-pagehero,
.mx-split, .ann-bar, .hero-aurora, .hero-bg, .hero-grid, .hero-fade,
.stage, .mockup, .chip, .cube-wrap, .orbit, .depth, .ring { max-width: 100%; }
/* keep the hero stage from pushing past the viewport */
.hero-v3 .stage { overflow: hidden; }
/* images / iframes can never exceed their column */
img, video, iframe, embed, object, svg { max-width: 100%; }
/* honour notches on phones without touching Bootstrap's desktop grid */
@media (max-width: 575.98px) {
  .container, .container-fluid {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* --- 1.2 NO ZOOM ---------------------------------------------------------- */
html {
  touch-action: pan-x pan-y;          /* no pinch-zoom on the document */
  -ms-touch-action: pan-x pan-y;
  text-size-adjust: 100%;             /* stop iOS inflating text in landscape */
  -webkit-text-size-adjust: 100%;
}
body {
  touch-action: manipulation;         /* kill double-tap-to-zoom delay */
  overscroll-behavior-y: none;        /* no pull-to-refresh / rubber-band */
}
/* interactive surfaces: block pinch-zoom explicitly */
input, textarea, select, button, a, .btn, .form-control, .form-select,
.card, .plan-card, .mockup, .stage, .table, .mx-palette, .modal-content {
  touch-action: manipulation;
}

/* --- 1.3 NO TEXT SELECTION ------------------------------------------------ */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;        /* no iOS long-press menu */
}
/* …but users must still be able to type, edit and paste */
input, textarea, select, [contenteditable="true"],
[contenteditable=""] , .mx-palette input, .form-control, .form-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* code / key values stay selectable so users can copy them */
.mono, .font-monospace, pre, code, kbd, [data-mx-copy-text],
[data-mx-copy], .chip-val, .licence-key, .ref-code {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* hide the native caret drag handle on touch */
* { -webkit-tap-highlight-color: transparent; }

/* --- 1.4 NO IMAGE / LINK DRAGGING ---------------------------------------- */
img, a { -webkit-user-drag: none; user-drag: none; }
a { -webkit-touch-callout: none; }

/* ============================================================================
   PART 2 — HERO REBUILD v13
   One confident composition. 21 decorative elements → 3.
   Background: one aurora + one grid + one fade. No canvas, no blobs,
   no orbit rings, no cube, no parallax panels.
   ============================================================================ */
.hero-v3 {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  background: var(--mx-white, #fff);
  isolation: isolate;
}
html[data-theme="dark"] .hero-v3 { background: #150a05; }

/* 2.1 aurora — a single calm wash, not five competing effects */
.hero-v3 .hero-aurora {
  position: absolute; inset: -10% -5% auto -5%; height: 120%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(248, 90, 0, .17), transparent 62%),
    radial-gradient(760px 480px at 84% 22%, rgba(255, 138, 43, .13), transparent 58%),
    radial-gradient(700px 420px at 50% 96%, rgba(248, 90, 0, .07), transparent 60%);
}
html[data-theme="dark"] .hero-v3 .hero-aurora {
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(248, 90, 0, .26), transparent 62%),
    radial-gradient(760px 480px at 84% 22%, rgba(255, 138, 43, .16), transparent 58%),
    radial-gradient(700px 420px at 50% 96%, rgba(255, 138, 43, .08), transparent 60%);
}

/* 2.2 grid — very faint, one layer only */
.hero-v3 .hero-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(10, 13, 16, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 13, 16, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 30%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 30%, transparent 76%);
}
html[data-theme="dark"] .hero-v3 .hero-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px);
}

/* 2.3 fade into the next section */
.hero-v3 .hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 92%);
}
html[data-theme="dark"] .hero-v3 .hero-fade {
  background: linear-gradient(180deg, rgba(7, 9, 11, 0), #150a05 92%);
}

/* 2.4 left column */
.hero-v3 .hero-copy { position: relative; z-index: 3; }
.hero-v3 .hero-title {
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: clamp(2.05rem, 4.6vw, 3.35rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.044em;
  margin: 1.1rem 0 1.15rem; color: var(--mx-black);
}
html[data-theme="dark"] .hero-v3 .hero-title { color: #fff; }
.hero-v3 .lead {
  font-size: clamp(1rem, 1.4vw, 1.09rem); line-height: 1.72;
  max-width: 34rem; color: var(--mx-muted); margin-bottom: 1.6rem;
}
.hero-v3 .hero-cta {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem;
}
.hero-v3 .hero-cta .btn-premium:hover,
.hero-v3 .hero-cta .btn-glass:hover { transform: translateY(-3px); }
.hero-v3 .hero-cta .btn-glass:hover { color: var(--mx-black); }

/* 2.5 one consolidated proof bar */
.hero-v3 .hero-proof {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .7rem .95rem;
  padding: .5rem 1rem .5rem .55rem; border-radius: 999px;
  border: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: var(--mx-glass-lo, rgba(255, 255, 255, .62));
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 1px 2px rgba(10, 13, 16, .05), 0 10px 26px -18px rgba(10, 13, 16, .3);
}
.hero-v3 .hero-proof-txt {
  font-size: .83rem; font-weight: 600; color: var(--mx-muted);
  white-space: nowrap; line-height: 1.3;
}
.hero-v3 .hero-proof-txt b {
  color: var(--mx-black); font-weight: 800; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .hero-v3 .hero-proof-txt b { color: #fff; }
.hero-v3 .hero-proof-txt .sep { opacity: .4; margin: 0 .12rem; }
.hero-v3 .hero-proof-sep {
  width: 1px; align-self: stretch; min-height: 22px;
  background: var(--mx-hairline, rgba(10, 13, 16, .08));
}
.hero-v3 .hero-proof-tags { display: inline-flex; align-items: center; gap: .75rem; }
.hero-v3 .hero-proof-tags span {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; color: var(--mx-muted); white-space: nowrap;
}
.hero-v3 .hero-proof-tags i { color: var(--mx-green); font-size: .95rem; }

/* 2.6 the stage — a real 3D context, but calm */
.hero-v3 .stage {
  position: relative; height: clamp(360px, 42vw, 470px);
  perspective: 1250px; transform-style: preserve-3d;
  z-index: 2;
}
.hero-v3 .stage-glow {
  position: absolute; left: 50%; bottom: 2%; width: 84%; height: 46%;
  transform: translateX(-50%); pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(248, 90, 0, .3), transparent 68%);
  filter: blur(46px);
}
html[data-theme="dark"] .hero-v3 .stage-glow {
  background: radial-gradient(ellipse at center, rgba(255, 138, 43, .34), transparent 68%);
}

/* 2.7 the product mockup — the hero of the hero */
.hero-v3 .mockup {
  position: relative; z-index: 6;
  width: 90%; max-width: 560px; margin: 4% auto 0;
  border-radius: 18px; overflow: hidden;
  transform: translateZ(20px);
  transform-style: preserve-3d;
  background: linear-gradient(168deg, rgba(255, 255, 255, .98), rgba(249, 247, 246, .95));
  border: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px rgba(10, 13, 16, .06),
    0 24px 48px -22px rgba(10, 13, 16, .3),
    0 48px 90px -40px rgba(248, 90, 0, .28);
  animation: mockFloat13 8s ease-in-out infinite;
}
html[data-theme="dark"] .hero-v3 .mockup {
  background: linear-gradient(168deg, rgba(24, 32, 39, .98), rgba(13, 18, 23, .97));
  border-color: rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 24px 48px -22px rgba(0, 0, 0, .8),
    0 48px 90px -40px rgba(255, 138, 43, .3);
}
.hero-v3 .mock-sheen {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sheenSweep13 7.5s ease-in-out infinite;
}
@keyframes sheenSweep13 { 0%, 62% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } }

.hero-v3 .mock-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: rgba(248, 90, 0, .05);
}
html[data-theme="dark"] .hero-v3 .mock-bar { background: rgba(255, 138, 43, .07); }
.hero-v3 .mock-bar .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hero-v3 .mock-bar .dot.ok { background: #ff8a2b; }
.hero-v3 .mock-bar .dot.warn { background: #F59E0B; }
.hero-v3 .mock-bar .dot.bad { background: #F87171; }
.hero-v3 .mock-url {
  margin-left: .5rem; font-size: .68rem; font-weight: 700;
  color: var(--mx-muted); letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-v3 .mock-body { display: grid; grid-template-columns: 46px 1fr; min-height: 236px; }
.hero-v3 .mock-side {
  display: flex; flex-direction: column; gap: .3rem; padding: .6rem .4rem;
  border-right: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: rgba(248, 90, 0, .035);
}
html[data-theme="dark"] .hero-v3 .mock-side { background: rgba(255, 138, 43, .045); }
.hero-v3 .mock-side .mi {
  display: grid; place-items: center; height: 30px; border-radius: 8px;
  color: var(--mx-muted); font-size: .92rem; opacity: .75;
}
.hero-v3 .mock-side .mi.active {
  background: linear-gradient(155deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep));
  color: #fff; opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px -4px rgba(248, 90, 0, .7);
}
.hero-v3 .mock-main { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.hero-v3 .mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.hero-v3 .mc {
  padding: .5rem .55rem; border-radius: 10px; min-width: 0;
  border: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: rgba(255, 255, 255, .7);
}
html[data-theme="dark"] .hero-v3 .mc { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
.hero-v3 .mc small { display: block; font-size: .6rem; color: var(--mx-muted); font-weight: 600; margin-bottom: .1rem; }
.hero-v3 .mc b {
  display: block; font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: .88rem; font-weight: 800; letter-spacing: -.02em; color: var(--mx-black);
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .hero-v3 .mc b { color: #fff; }
.hero-v3 .mc .up, .hero-v3 .mc .warn-t {
  display: inline-flex; align-items: center; gap: .16rem;
  font-size: .58rem; font-weight: 800; margin-top: .15rem;
}
.hero-v3 .mc .up { color: var(--mx-green); }
.hero-v3 .mc .warn-t { color: #D97706; }
.hero-v3 .mock-chart {
  display: flex; align-items: flex-end; gap: .28rem; height: 62px;
  padding: .45rem .55rem; border-radius: 10px;
  border: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: rgba(248, 90, 0, .04);
}
html[data-theme="dark"] .hero-v3 .mock-chart { background: rgba(255, 138, 43, .05); border-color: rgba(255, 255, 255, .09); }
.hero-v3 .mock-chart span {
  flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--mx-green-2, #ff8a2b), rgba(248, 90, 0, .45));
  transform-origin: bottom;
  animation: barGrow13 1.1s var(--mx-ease-out, cubic-bezier(.22,1,.36,1)) backwards;
}
.hero-v3 .mock-chart span:nth-child(1) { animation-delay: .15s; }
.hero-v3 .mock-chart span:nth-child(2) { animation-delay: .24s; }
.hero-v3 .mock-chart span:nth-child(3) { animation-delay: .33s; }
.hero-v3 .mock-chart span:nth-child(4) { animation-delay: .42s; }
.hero-v3 .mock-chart span:nth-child(5) { animation-delay: .51s; }
.hero-v3 .mock-chart span:nth-child(6) { animation-delay: .6s; }
.hero-v3 .mock-chart span:nth-child(7) { animation-delay: .69s; }
@keyframes barGrow13 { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hero-v3 .mock-feed { display: flex; flex-direction: column; gap: .3rem; }
.hero-v3 .mf {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-radius: 9px;
  border: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: rgba(255, 255, 255, .6);
}
html[data-theme="dark"] .hero-v3 .mf { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09); }
.hero-v3 .mf > i {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--mx-green-soft, rgba(248, 90, 0, .12)); color: var(--mx-green-deep);
  font-size: .82rem; flex-shrink: 0;
}
.hero-v3 .mf > div { min-width: 0; }
.hero-v3 .mf b { display: block; font-size: .71rem; font-weight: 800; color: var(--mx-black); }
html[data-theme="dark"] .hero-v3 .mf b { color: #fff; }
.hero-v3 .mf small { display: block; font-size: .6rem; color: var(--mx-muted); }
.hero-v3 .mf.run > i { animation: pulseRun13 1.6s ease-in-out infinite; }
@keyframes pulseRun13 { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes mockFloat13 {
  0%, 100% { transform: translateZ(20px) translateY(0) rotateY(-7deg) rotateX(2.5deg); }
  50%      { transform: translateZ(20px) translateY(-11px) rotateY(-7deg) rotateX(2.5deg); }
}

/* 2.8 exactly two floating chips, both INSIDE the safe area (no overflow) */
.hero-v3 .chip {
  position: absolute; z-index: 12; width: 168px;
  padding: .72rem .82rem; border-radius: 15px;
  border: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(249, 247, 246, .94));
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 4px 10px rgba(10, 13, 16, .05),
    0 18px 38px -16px rgba(10, 13, 16, .3);
}
html[data-theme="dark"] .hero-v3 .chip {
  background: linear-gradient(165deg, rgba(24, 32, 39, .96), rgba(13, 18, 23, .95));
  border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 38px -16px rgba(0, 0, 0, .8);
}
.hero-v3 .chip.c-wallet  { top: 16%; right: 0;  transform: translateZ(90px);  animation: chipFloatA13 6.4s ease-in-out infinite; }
.hero-v3 .chip.c-licence { bottom: 12%; left: 0; transform: translateZ(110px); animation: chipFloatB13 7.6s ease-in-out infinite .8s; }
@keyframes chipFloatA13 {
  0%, 100% { transform: translateZ(90px) translateY(0) rotate(0deg); }
  50%      { transform: translateZ(90px) translateY(-15px) rotate(-1.2deg); }
}
@keyframes chipFloatB13 {
  0%, 100% { transform: translateZ(110px) translateY(0) rotate(0deg); }
  50%      { transform: translateZ(110px) translateY(-13px) rotate(1.2deg); }
}
.hero-v3 .chip-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; margin-bottom: .28rem;
}
.hero-v3 .chip-top small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--mx-muted); }
.hero-v3 .chip-top i { font-size: .95rem; color: var(--mx-green); }
.hero-v3 .chip-val {
  font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--mx-black); font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .hero-v3 .chip-val { color: #fff; }
.hero-v3 .chip-badge {
  display: inline-flex; align-items: center; gap: .26rem; margin-top: .45rem;
  font-size: .62rem; font-weight: 800; padding: .22rem .5rem; border-radius: 999px;
  color: var(--mx-green-deep);
  background: var(--mx-green-soft, rgba(248, 90, 0, .12));
  border: 1px solid rgba(248, 90, 0, .28);
}
.hero-v3 .chip-badge.ok { color: #fff; background: linear-gradient(150deg, var(--mx-green-2, #ff8a2b), var(--mx-green-deep)); border-color: transparent; }

/* 2.9 scroll hint */
.hero-v3 .scroll-hint {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--mx-muted); border: 1px solid var(--mx-hairline, rgba(10, 13, 16, .08));
  background: var(--mx-glass-lo, rgba(255, 255, 255, .62));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: hintBob13 2.2s ease-in-out infinite; z-index: 5;
}
@keyframes hintBob13 { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* 2.10 responsive */
@media (max-width: 991.98px) {
  .hero-v3 { padding-top: 2.5rem; }
  .hero-v3 .stage { height: 400px; margin-top: 1rem; }
  .hero-v3 .mockup { width: 100%; max-width: 520px; }
  .hero-v3 .lead { margin-bottom: 1.3rem; }
  .hero-v3 .hero-proof { width: 100%; justify-content: center; }
}
@media (max-width: 575.98px) {
  .hero-v3 { padding-top: 2rem; }
  .hero-v3 .hero-title { font-size: 1.85rem; line-height: 1.08; }
  .hero-v3 .hero-cta { gap: .55rem; }
  .hero-v3 .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero-v3 .stage { height: 320px; }
  .hero-v3 .mock-body { min-height: 200px; }
  .hero-v3 .mock-cards { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
  .hero-v3 .mc b { font-size: .78rem; }
  .hero-v3 .chip { width: 138px; padding: .55rem .65rem; }
  .hero-v3 .chip-val { font-size: .98rem; }
  .hero-v3 .chip.c-wallet { top: 10%; right: 0; }
  .hero-v3 .chip.c-licence { bottom: 8%; left: 0; }
  .hero-v3 .hero-proof { gap: .5rem .7rem; padding: .45rem .8rem .45rem .5rem; }
  .hero-v3 .hero-proof-sep { display: none; }
  .hero-v3 .hero-proof-tags { gap: .55rem; }
  .hero-v3 .hero-proof-tags span { font-size: .72rem; }
  .hero-v3 .mock-chart { height: 48px; }
}

/* 2.11 reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-v3 .mockup, .hero-v3 .chip.c-wallet, .hero-v3 .chip.c-licence,
  .hero-v3 .mock-sheen, .hero-v3 .mf.run > i, .hero-v3 .scroll-hint,
  .hero-v3 .mock-chart span { animation: none !important; }
  .hero-v3 .mock-chart span { transform: none !important; }
  .hero-v3 .mock-sheen { opacity: 0; }
}

/* 2.12 print */
@media print {
  .hero-v3 { padding: 1.5rem 0 !important; }
  .hero-v3 .hero-aurora, .hero-v3 .hero-grid, .hero-v3 .hero-fade,
  .hero-v3 .stage-glow, .hero-v3 .mock-sheen, .hero-v3 .scroll-hint { display: none !important; }
  .hero-v3 .mockup { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ===== SOURCE: theme-v14.css ===== */
/* ============================================================================
   MIRZA X LABS — Theme v14
   1. LEGIBILITY — grid moved off the text, pill fixed, scrim behind copy
   2. HEIGHT — mobile hero tightened (~150px shorter)
   3. LIVE BACKGROUND — drifting glow orbs + sweeping beam + ambient particles
   4. DEEPER 3D — real translateZ depth inside the mockup, 3D chip motion
   Loads LAST, additive only.
   ============================================================================ */

/* ============================================================================
   1. LEGIBILITY
   ============================================================================ */

/* 1.1 the grid no longer runs through the headline. It now sits low and to the
       right, behind the product visual, and is far fainter. */
.hero-v3 .hero-grid {
  background-image:
    linear-gradient(to right, rgba(10, 13, 16, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 13, 16, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 62% 48% at 78% 68%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 48% at 78% 68%, #000 20%, transparent 72%);
}
html[data-theme="dark"] .hero-v3 .hero-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .038) 1px, transparent 1px);
}

/* 1.2 a soft scrim behind the left column so text always reads clean */
.hero-v3 .hero-copy::before {
  content: ""; position: absolute; z-index: -1;
  left: -8%; right: -12%; top: -12%; bottom: -14%;
  pointer-events: none;
  background: radial-gradient(ellipse 74% 66% at 42% 46%,
    rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .68) 42%, rgba(255, 255, 255, 0) 76%);
}
html[data-theme="dark"] .hero-v3 .hero-copy::before {
  background: radial-gradient(ellipse 74% 66% at 42% 46%,
    rgba(7, 9, 11, .93) 0%, rgba(7, 9, 11, .7) 42%, rgba(7, 9, 11, 0) 76%);
}
@media (max-width: 991.98px) {
  .hero-v3 .hero-copy::before {
    left: -4%; right: -4%; top: -6%; bottom: -8%;
    background: radial-gradient(ellipse 88% 74% at 50% 44%,
      rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .62) 46%, rgba(255, 255, 255, 0) 78%);
  }
  html[data-theme="dark"] .hero-v3 .hero-copy::before {
    background: radial-gradient(ellipse 88% 74% at 50% 44%,
      rgba(7, 9, 11, .92) 0%, rgba(7, 9, 11, .66) 46%, rgba(7, 9, 11, 0) 78%);
  }
}

/* 1.3 announce pill — single line, higher contrast, no awkward wrap */
.hero-v3 .announce-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  max-width: 100%;
  font-size: .79rem; font-weight: 700; letter-spacing: -.005em;
  color: var(--mx-green-deep);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(248, 90, 0, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(248, 90, 0, .5);
  padding: .4rem .95rem .4rem .7rem; border-radius: 999px;
  margin-bottom: .95rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html[data-theme="dark"] .hero-v3 .announce-pill {
  background: rgba(16, 22, 27, .88); color: var(--mx-green-2, #ffa35c);
  border-color: rgba(255, 138, 43, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px -10px rgba(255, 138, 43, .5);
}
.hero-v3 .announce-pill .pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--mx-green); box-shadow: 0 0 0 3px rgba(248, 90, 0, .18);
  animation: dotPulse14 2s ease-in-out infinite;
}
@keyframes dotPulse14 {
  0%, 100% { box-shadow: 0 0 0 3px rgba(248, 90, 0, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(248, 90, 0, .06); }
}

/* 1.4 headline gets a touch more presence and tighter rhythm */
.hero-v3 .hero-title { margin: .8rem 0 .9rem; }
.hero-v3 .lead { margin-bottom: 1.15rem; }

/* ============================================================================
   2. HEIGHT — mobile hero is ~150px shorter
   ============================================================================ */
@media (max-width: 991.98px) {
  .hero-v3 .row { --bs-gutter-y: 1.25rem; }
  .hero-v3 { padding-top: 1.75rem; padding-bottom: 2.25rem; }
  .hero-v3 .hero-title { margin: .7rem 0 .8rem; }
  .hero-v3 .lead { margin-bottom: 1rem; font-size: .98rem; line-height: 1.62; }
  .hero-v3 .hero-cta { margin-bottom: 1.15rem; }
  .hero-v3 .stage { height: 330px; margin-top: .4rem; }
}
@media (max-width: 575.98px) {
  .hero-v3 .row { --bs-gutter-y: 1rem; }
  .hero-v3 { padding-top: 1.15rem; padding-bottom: 1.75rem; }
  .hero-v3 .announce-pill {
    font-size: .72rem; padding: .34rem .8rem .34rem .6rem; margin-bottom: .8rem;
  }
  .hero-v3 .hero-title { font-size: 1.72rem; line-height: 1.07; margin: .6rem 0 .7rem; }
  .hero-v3 .lead { font-size: .92rem; line-height: 1.58; margin-bottom: .9rem; }
  .hero-v3 .hero-cta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center; margin-bottom: .8rem; gap: .4rem;
  }
  .hero-v3 .hero-cta .btn {
    width: 100%; min-width: 0; flex: initial; justify-content: center;
    padding: .56rem .42rem; font-size: .82rem; white-space: nowrap;
  }
  .hero-v3 .stage { height: 204px; margin-top: .1rem; }
  .hero-v3 .mock-body { min-height: 158px; }
  .hero-v3 .mock-chart { height: 38px; }
  .hero-v3 .mock-feed .mf:nth-child(3) { display: none; }
  .hero-v3 .mock-side .mi:nth-child(n+4) { display: none; }
  .hero-v3 .hero-proof { margin-top: .1rem; }
  .hero-v3 .scroll-hint { display: none; }
}
@media (max-width: 380px) {
  .hero-v3 .hero-title { font-size: 1.55rem; }
  .hero-v3 .hero-cta { gap: .3rem; }
  .hero-v3 .hero-cta .btn { padding: .5rem .22rem; font-size: .74rem; }
  .hero-v3 .stage { height: 194px; }
  .hero-v3 .chip { width: 122px; }
  .hero-v3 .chip-val { font-size: .88rem; }
}

/* ============================================================================
   3. LIVE BACKGROUND
   Two drifting glow orbs + one sweeping beam. transform/opacity only, so it
   stays on the compositor and never triggers layout.
   ============================================================================ */
.hero-v3 .hero-aurora { overflow: hidden; }
.hero-v3 .hero-aurora::before,
.hero-v3 .hero-aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  pointer-events: none; will-change: transform;
}
.hero-v3 .hero-aurora::before {
  width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
  left: -10vw; top: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(248, 90, 0, .3), transparent 66%);
  filter: blur(38px);
  animation: orbDriftA14 19s ease-in-out infinite;
}
.hero-v3 .hero-aurora::after {
  width: 40vw; height: 40vw; min-width: 280px; min-height: 280px;
  right: -8vw; top: 2vw;
  background: radial-gradient(circle at 50% 50%, rgba(255, 138, 43, .26), transparent 66%);
  filter: blur(42px);
  animation: orbDriftB14 24s ease-in-out infinite;
}
html[data-theme="dark"] .hero-v3 .hero-aurora::before {
  background: radial-gradient(circle at 50% 50%, rgba(248, 90, 0, .42), transparent 66%);
}
html[data-theme="dark"] .hero-v3 .hero-aurora::after {
  background: radial-gradient(circle at 50% 50%, rgba(255, 138, 43, .34), transparent 66%);
}
@keyframes orbDriftA14 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(7vw, 5vw, 0) scale(1.13); }
  66%      { transform: translate3d(-3vw, 9vw, 0) scale(.94); }
}
@keyframes orbDriftB14 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-8vw, 6vw, 0) scale(1.16); }
  70%      { transform: translate3d(4vw, -4vw, 0) scale(.92); }
}

/* the sweeping light beam */
.hero-v3 .hero-beam {
  position: absolute; top: -25%; left: -35%;
  width: 34%; height: 150%;
  pointer-events: none; z-index: 0;
  background: linear-gradient(102deg, transparent, rgba(255, 255, 255, .13) 46%, transparent);
  transform: rotate(15deg);
  animation: beamSweep14 11s ease-in-out infinite;
  will-change: transform;
}
html[data-theme="dark"] .hero-v3 .hero-beam {
  background: linear-gradient(102deg, transparent, rgba(231, 164, 110, .1) 46%, transparent);
}
@keyframes beamSweep14 {
  0%, 100% { transform: rotate(15deg) translateX(0); opacity: 0; }
  12%      { opacity: 1; }
  88%      { opacity: 1; }
  100%      { transform: rotate(15deg) translateX(420%); opacity: 0; }
}

/* rising particles (CSS-only, works without JS) */
.hero-v3 .hero-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-v3 .hero-dots i {
  position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(248, 90, 0, .5);
  animation: dotRise14 linear infinite;
  will-change: transform, opacity;
}
.hero-v3 .hero-dots i:nth-child(1)  { left: 8%;  animation-duration: 13s; animation-delay: 0s;   }
.hero-v3 .hero-dots i:nth-child(2)  { left: 19%; animation-duration: 17s; animation-delay: -3s;  width: 4px; height: 4px; }
.hero-v3 .hero-dots i:nth-child(3)  { left: 31%; animation-duration: 15s; animation-delay: -7s;  }
.hero-v3 .hero-dots i:nth-child(4)  { left: 44%; animation-duration: 19s; animation-delay: -11s; width: 3px; height: 3px; }
.hero-v3 .hero-dots i:nth-child(5)  { left: 57%; animation-duration: 14s; animation-delay: -5s;  }
.hero-v3 .hero-dots i:nth-child(6)  { left: 69%; animation-duration: 18s; animation-delay: -9s;  width: 4px; height: 4px; }
.hero-v3 .hero-dots i:nth-child(7)  { left: 81%; animation-duration: 16s; animation-delay: -13s; }
.hero-v3 .hero-dots i:nth-child(8)  { left: 92%; animation-duration: 20s; animation-delay: -2s;  width: 3px; height: 3px; }
@keyframes dotRise14 {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translateY(-46vh) translateX(14px); }
  90%  { opacity: .5; }
  100% { transform: translateY(-92vh) translateX(-10px); opacity: 0; }
}
html[data-theme="dark"] .hero-v3 .hero-dots i { background: rgba(231, 164, 110, .55); }

/* ============================================================================
   4. DEEPER 3D — real translateZ layers inside the mockup
   ============================================================================ */
.hero-v3 .stage { overflow: visible; }
.hero-v3 .mockup { overflow: hidden; overflow: clip; transform-style: preserve-3d; }
.hero-v3 .mock-body, .hero-v3 .mock-main { transform-style: preserve-3d; }
.hero-v3 .mock-bar  { transform: translateZ(14px); }
.hero-v3 .mock-side { transform: translateZ(7px); }
.hero-v3 .mock-main { transform: translateZ(3px); }
.hero-v3 .mock-cards .mc { transform: translateZ(9px); transition: transform .4s var(--mx-ease-out, ease); }
.hero-v3 .mock-cards .mc:hover { transform: translateZ(20px) scale(1.03); }
.hero-v3 .mock-chart { transform: translateZ(5px); }
.hero-v3 .mock-feed .mf { transform: translateZ(6px); }

/* chips get a genuine 3D wobble, not just a float */
.hero-v3 .chip { transform-style: preserve-3d; }
@keyframes chipTiltA14 {
  0%, 100% { transform: translateZ(90px)  translateY(0)     rotateY(-9deg) rotateX(3deg); }
  50%      { transform: translateZ(90px)  translateY(-15px) rotateY(6deg)  rotateX(-2deg); }
}
@keyframes chipTiltB14 {
  0%, 100% { transform: translateZ(110px) translateY(0)     rotateY(9deg)  rotateX(-3deg); }
  50%      { transform: translateZ(110px) translateY(-13px) rotateY(-6deg) rotateX(2deg); }
}
.hero-v3 .chip.c-wallet  { animation: chipTiltA14 7.2s ease-in-out infinite; }
.hero-v3 .chip.c-licence { animation: chipTiltB14 8.6s ease-in-out infinite .9s; }

/* Float with the independent translate property so the JS cursor/touch
   parallax can still own `transform` without the two animations fighting. */
@keyframes mockFloat14 {
  0%, 100% { translate: 0 0 0; }
  50%      { translate: 0 -10px 0; }
}
.hero-v3 .mockup { animation: mockFloat14 9s ease-in-out infinite; }

/* ============================================================================
   5. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-v3 .hero-aurora::before, .hero-v3 .hero-aurora::after,
  .hero-v3 .hero-beam, .hero-v3 .hero-dots i,
  .hero-v3 .mockup, .hero-v3 .chip.c-wallet, .hero-v3 .chip.c-licence,
  .hero-v3 .announce-pill .pulse-dot { animation: none !important; }
  .hero-v3 .hero-dots { display: none; }
  .hero-v3 .mock-cards .mc:hover { transform: none; }
}

/* ============================================================================
   6. PRINT
   ============================================================================ */
@media print {
  .hero-v3 .hero-beam, .hero-v3 .hero-dots, .hero-v3 .hero-aurora::before,
  .hero-v3 .hero-aurora::after { display: none !important; }
}
/* ==========================================================================
   QuickTap Premium UI polish — user-facing portal only
   Appended as the final visual layer; no markup, routes, API or admin changes.
   ========================================================================== */
:root {
  --mx-ink: #211712;
  --mx-muted: #64748b;
  --mx-line: rgba(15, 23, 42, .10);
  --mx-surface: rgba(255,255,255,.86);
  --mx-surface-solid: #ffffff;
  --mx-green: #f85a00;
  --mx-green-deep: #e04e00;
  --mx-green-soft: rgba(248, 90, 0,.10);
  --mx-radius: 18px;
  --mx-shadow: 0 18px 50px rgba(15, 23, 42, .08);
  --mx-shadow-hover: 0 24px 60px rgba(15, 23, 42, .14);
}

html { scroll-behavior: smooth; }
body {
  color: var(--mx-ink);
  background: #f6f8fb;
  letter-spacing: -.012em;
  text-rendering: optimizeLegibility;
}
body::selection { background: rgba(248, 90, 0,.22); }

/* Header: compact, quiet, premium */
.portal-nav {
  min-height: 68px;
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 28px rgba(15,23,42,.055);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.portal-nav .container { min-height: 68px; }
.portal-nav .navbar-brand { gap: .65rem !important; color: var(--mx-ink); }
.portal-nav .navbar-brand strong { font-size: .94rem; letter-spacing: -.025em; }
.portal-nav .navbar-brand small { color: var(--mx-muted); font-size: .64rem; letter-spacing: .02em; }
.portal-nav .brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  display: inline-grid; place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #b95715, #e04e00);
  box-shadow: 0 7px 18px rgba(248, 90, 0,.27), inset 0 1px 0 rgba(255,255,255,.32);
}
.portal-nav .nav-link { padding: .48rem .65rem !important; border-radius: 9px; color: #526171; font-size: .79rem; font-weight: 700; }
.portal-nav .nav-link:hover, .portal-nav .nav-link.active { color: var(--mx-green-deep); background: var(--mx-green-soft); }
.portal-nav .btn { border-radius: 9px; font-size: .77rem; padding: .48rem .8rem; }
.portal-nav .btn-warning { color: #201915; background: #d9f99d; border-color: #d9f99d; box-shadow: 0 7px 18px rgba(132,204,22,.18); }
.portal-nav .btn-warning:hover { background: #bef264; border-color: #bef264; transform: translateY(-1px); }
.wallet-chip, .user-chip, .bell-btn { border-radius: 10px !important; }

/* Reduce ornamental whitespace while preserving breathing room */
.section-pad { padding-top: 3.8rem; padding-bottom: 3.8rem; }
.section-head { max-width: 720px; margin: 0 auto 1.65rem; }
.section-head h2 { letter-spacing: -.045em; margin: .35rem 0 .45rem; }
.section-head p { margin-bottom: 0; font-size: .92rem; }
.eyebrow { color: var(--mx-green-deep); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* Global surface treatment */
.card, .feature-card, .software-card, .plan-card, .auth-card, .gateway-pick, .dash-stat, .empty {
  border: 1px solid var(--mx-line) !important;
  border-radius: var(--mx-radius) !important;
  background: var(--mx-surface) !important;
  box-shadow: var(--mx-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.software-card, .feature-card, .plan-card, .gateway-pick { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.software-card:hover, .feature-card:hover, .plan-card:hover, .gateway-pick:hover {
  transform: translateY(-5px);
  border-color: rgba(248, 90, 0,.32) !important;
  box-shadow: var(--mx-shadow-hover);
}
.software-card { overflow: hidden; min-height: 178px; }
.software-card .thumb { min-height: 112px; padding: 1rem 1.1rem; }
.software-card .thumb .mx-i { font-size: 2rem; }
.software-card .body { padding: 1rem 1.1rem 1.15rem; }
.software-card .body p { line-height: 1.45; }
.software-card .go { right: 1.05rem; bottom: 1.05rem; }
.feature-card { padding: 1.2rem !important; }
.feature-card .feature-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--mx-green-soft); color: var(--mx-green-deep); }

/* Hero: tighter copy, cleaner visual hierarchy */
.hero-v3 { padding-top: 4.4rem; padding-bottom: 3.5rem; }
.hero-v3 .hero-title { max-width: 640px; font-size: clamp(2.35rem, 4.4vw, 4.4rem); line-height: .99; letter-spacing: -.065em; }
.hero-v3 .lead { max-width: 570px; color: #526171; font-size: 1rem; line-height: 1.65; }
.hero-v3 .hero-cta { gap: .65rem; }
.btn-premium, .btn-cta {
  border: 0 !important; border-radius: 11px !important; color: #fff !important;
  background: linear-gradient(135deg, #f85a00, #e04e00) !important;
  box-shadow: 0 12px 25px rgba(248, 90, 0,.24), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-premium:hover, .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(248, 90, 0,.30), inset 0 1px 0 rgba(255,255,255,.24); }
.btn-glass, .btn-ghost { border-radius: 11px !important; border-color: rgba(15,23,42,.14) !important; background: rgba(255,255,255,.64) !important; }
.hero-proof { margin-top: 1.1rem; padding: .65rem .8rem; border-radius: 13px; background: rgba(255,255,255,.58); border: 1px solid rgba(15,23,42,.08); }

/* Plans, auth and dashboard surfaces */
.plan-card { padding: 1.35rem !important; }
.plan-card.featured { border: 2px solid rgba(248, 90, 0,.55) !important; box-shadow: 0 22px 55px rgba(248, 90, 0,.15); }
.plan-price { letter-spacing: -.06em; }
.plan-features { margin-top: .85rem !important; gap: .5rem !important; }
.auth-shell { min-height: calc(100vh - 180px); padding: 2.5rem 0 !important; }
.auth-card { max-width: 450px; margin: 0 auto; padding: 1.65rem !important; }
.form-control, .form-select, .input-group-text {
  min-height: 45px; border-radius: 10px !important; border-color: rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.82) !important;
}
.form-control:focus, .form-select:focus { border-color: rgba(248, 90, 0,.62) !important; box-shadow: 0 0 0 4px rgba(248, 90, 0,.12) !important; }
.dash-stat { padding: 1.1rem !important; }
.dash-stat .value { letter-spacing: -.055em; }
.table { --bs-table-bg: transparent; border-color: rgba(15,23,42,.08); }
.table thead th { color: #64748b; font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; border-bottom-width: 1px; }
.table td { padding-top: .82rem; padding-bottom: .82rem; vertical-align: middle; }

.portal-footer { margin-top: 2rem; padding-top: 3rem !important; padding-bottom: 1.5rem !important; background: #211712 !important; }
.portal-footer .foot-tag, .portal-footer p, .portal-footer a { color: rgba(226,232,240,.68); }
.portal-footer a:hover { color: #ffd9bd; }
.ai-float-btn { right: 1.25rem !important; bottom: 1.25rem !important; width: 48px !important; height: 48px !important; box-shadow: 0 12px 28px rgba(248, 90, 0,.28); }

/* Dark mode keeps the same hierarchy */
html[data-theme="dark"] body { color: #e8f0f2; background: #080d11; }
html[data-theme="dark"] .portal-nav { background: rgba(8,13,17,.84) !important; border-bottom-color: rgba(148,163,184,.14); }
html[data-theme="dark"] .portal-nav .navbar-brand, html[data-theme="dark"] .portal-nav .nav-link { color: #e7e1dc; }
html[data-theme="dark"] .portal-nav .nav-link:hover, html[data-theme="dark"] .portal-nav .nav-link.active { color: #ffc9a3; background: rgba(255, 138, 43,.12); }
html[data-theme="dark"] .hero-v3 .lead, html[data-theme="dark"] .section-head p { color: #a5b5bd !important; }
html[data-theme="dark"] .card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .software-card, html[data-theme="dark"] .plan-card, html[data-theme="dark"] .auth-card, html[data-theme="dark"] .gateway-pick, html[data-theme="dark"] .dash-stat, html[data-theme="dark"] .empty { background: rgba(17,26,32,.84) !important; border-color: rgba(148,163,184,.15) !important; box-shadow: 0 20px 52px rgba(0,0,0,.24); }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text { color: #e8f0f2; background: rgba(15,23,30,.9) !important; border-color: rgba(148,163,184,.2) !important; }
html[data-theme="dark"] .btn-glass, html[data-theme="dark"] .btn-ghost { color: #e7e1dc !important; border-color: rgba(148,163,184,.25) !important; background: rgba(17,26,32,.7) !important; }
html[data-theme="dark"] .hero-proof { background: rgba(17,26,32,.58); border-color: rgba(148,163,184,.16); }

/* Mobile: no oversized gaps, no horizontal overflow */
@media (max-width: 991.98px) {
  .portal-nav { min-height: 62px; }
  .portal-nav .container { min-height: 62px; }
  .portal-nav .navbar-collapse { padding: .65rem 0 .8rem; }
  .portal-nav .nav-link { padding: .62rem .75rem !important; }
  .hero-v3 { padding-top: 2.7rem; padding-bottom: 2.4rem; }
  .section-pad { padding-top: 2.8rem; padding-bottom: 2.8rem; }
  .hero-v3 .hero-title { font-size: clamp(2.2rem, 8vw, 3.4rem); }
}
@media (max-width: 575.98px) {
  .section-pad { padding-top: 2.35rem; padding-bottom: 2.35rem; }
  .section-head { margin-bottom: 1.15rem; }
  .section-head h2 { font-size: 1.55rem; }
  .hero-v3 { padding-top: 1.7rem; padding-bottom: 1.8rem; }
  .hero-v3 .hero-title { font-size: 2.08rem; }
  .hero-v3 .lead { font-size: .91rem; }
  .hero-v3 .hero-proof { padding: .55rem .65rem; font-size: .72rem; }
  .software-card { min-height: 0; }
  .auth-shell { min-height: auto; padding: 1.35rem 0 !important; }
  .auth-card { padding: 1.15rem !important; }
  .portal-footer { margin-top: 1rem; padding-top: 2.25rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .software-card, .feature-card, .plan-card, .gateway-pick, .btn-premium, .btn-cta { transition: none; }
}
/* ==========================================================================
   Focused mobile heading + day mode refinement
   User-facing CSS only; no markup, script, route or backend changes.
   ========================================================================== */

/* Day mode: keep the portal light even when an old dark preference is stored. */
html[data-theme="dark"] body,
html[data-theme="dark"] main { color: var(--mx-ink); background: #f6f8fb; }
html[data-theme="dark"] .portal-nav { background: rgba(255,255,255,.88) !important; border-bottom-color: rgba(15,23,42,.08); }
html[data-theme="dark"] .portal-nav .navbar-brand,
html[data-theme="dark"] .portal-nav .nav-link { color: var(--mx-ink); }
html[data-theme="dark"] .portal-nav .nav-link:hover,
html[data-theme="dark"] .portal-nav .nav-link.active { color: var(--mx-green-deep); background: var(--mx-green-soft); }
html[data-theme="dark"] .hero-v3,
html[data-theme="dark"] .hero-v3 .hero-fade { color: var(--mx-ink); }
html[data-theme="dark"] .hero-v3 .hero-fade { background: linear-gradient(180deg, rgba(255,255,255,0), #f6f8fb 92%); }
html[data-theme="dark"] .hero-v3 .hero-copy::before { background: radial-gradient(ellipse 74% 66% at 42% 46%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.68) 42%, rgba(255,255,255,0) 76%); }
html[data-theme="dark"] .hero-v3 .hero-title { color: var(--mx-ink) !important; }
html[data-theme="dark"] .hero-v3 .lead,
html[data-theme="dark"] .section-head p { color: #526171 !important; }
html[data-theme="dark"] .hero-v3 .announce-pill { color: var(--mx-green-deep); background: rgba(255,255,255,.9); border-color: rgba(248, 90, 0,.32); }
html[data-theme="dark"] .hero-proof { color: var(--mx-ink); background: rgba(255,255,255,.68); border-color: rgba(15,23,42,.08); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .software-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .gateway-pick,
html[data-theme="dark"] .dash-stat,
html[data-theme="dark"] .empty { color: var(--mx-ink); background: rgba(255,255,255,.88) !important; border-color: rgba(15,23,42,.10) !important; box-shadow: var(--mx-shadow); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text { color: var(--mx-ink); background: rgba(255,255,255,.92) !important; border-color: rgba(15,23,42,.14) !important; }
html[data-theme="dark"] .btn-glass,
html[data-theme="dark"] .btn-ghost { color: var(--mx-ink) !important; background: rgba(255,255,255,.72) !important; border-color: rgba(15,23,42,.14) !important; }

/* Every section title: use the available width and a shorter vertical rhythm. */
.section-head { width: 100%; max-width: 860px; }
.section-head h2,
.section-head h3 { width: 100%; max-width: 100%; line-height: 1.08; letter-spacing: -.052em; text-wrap: balance; }
.section-head p { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Mobile hero: natural word flow prevents the orphaned “ke” line. */
.hero-v3 .hero-title { width: 100%; max-width: 100%; text-wrap: balance; }
.hero-v3 .hero-title .hero-line { white-space: normal; }
@media (max-width: 991.98px) {
  .hero-v3 .hero-title { width: 100%; max-width: 100%; line-height: 1.01; }
  .hero-v3 .hero-title .hero-line { display: inline; white-space: normal; }
  .hero-v3 .hero-copy { width: 100%; }
  .section-head h2 { line-height: 1.06; }
}
@media (max-width: 575.98px) {
  .hero-v3 .hero-title { font-size: clamp(2rem, 9.4vw, 2.4rem); line-height: .99; letter-spacing: -.058em; margin-top: .55rem; margin-bottom: .62rem; }
  .section-head { margin-bottom: 1rem; }
  .section-head h2 { font-size: clamp(1.52rem, 7.4vw, 1.9rem); line-height: 1.04; }
  .section-head p { font-size: .86rem; line-height: 1.48; }
}
/* ==========================================================================
   QuickTap hero redesign — hero section only
   ========================================================================== */

.hero-v3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  padding: 4.8rem 0 4rem;
  background:
    radial-gradient(820px 420px at 4% 2%, rgba(248, 90, 0,.14), transparent 68%),
    radial-gradient(650px 390px at 96% 34%, rgba(255, 138, 43,.11), transparent 67%),
    linear-gradient(180deg, #fffaf5 0%, #f9f7f5 100%);
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.hero-v3::after {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  width: 560px; height: 560px; right: -180px; bottom: -280px;
  border: 1px solid rgba(248, 90, 0,.11); border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(248, 90, 0,.035), 0 0 0 76px rgba(248, 90, 0,.018);
}
.hero-v3 .container { position: relative; z-index: 2; }
.hero-v3 .row { --bs-gutter-x: 3.5rem; --bs-gutter-y: 1.5rem; }
.hero-v3 .hero-copy { padding-left: 1.25rem; }
.hero-v3 .hero-copy::after {
  content: ""; position: absolute; left: 0; top: .55rem; bottom: .65rem;
  width: 3px; border-radius: 4px;
  background: linear-gradient(180deg, #f85a00, rgba(248, 90, 0,0));
  opacity: .8;
}
.hero-v3 .hero-title {
  max-width: 680px; margin: .9rem 0 1rem;
  color: #211712 !important;
  font-size: clamp(2.55rem, 4.8vw, 4.65rem);
  line-height: .97; letter-spacing: -.072em;
  text-wrap: balance;
}
.hero-v3 .hero-title .hero-line { display: inline; white-space: normal; }
.hero-v3 .hero-title .grad-text {
  background: linear-gradient(110deg, #e04e00 4%, #f85a00 48%, #6d320b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-v3 .lead { max-width: 540px; margin-bottom: 1.25rem; color: #526171 !important; font-size: 1rem; line-height: 1.58; }
.hero-v3 .hero-cta { margin-bottom: .95rem; }
.hero-v3 .hero-cta .btn { min-height: 46px; }
.hero-v3 .hero-proof { max-width: 100%; margin-top: .15rem; }
.hero-v3 .stage { min-height: 440px; }
.hero-v3 .stage-glow { opacity: .82; }
.hero-v3 .mockup {
  border: 1px solid rgba(248, 90, 0,.23);
  box-shadow: 0 30px 80px rgba(248, 90, 0,.18), 0 18px 35px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.24);
}
.hero-v3 .chip { border: 1px solid rgba(255,255,255,.42); box-shadow: 0 18px 38px rgba(15,23,42,.18); }
.hero-v3 .scroll-hint { bottom: 1.2rem; }

@media (max-width: 991.98px) {
  .hero-v3 { min-height: auto; padding: 3rem 0 2.8rem; }
  .hero-v3 .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.35rem; }
  .hero-v3 .hero-copy { padding-left: .95rem; }
  .hero-v3 .hero-title { max-width: 100%; font-size: clamp(2.35rem, 7.4vw, 3.55rem); line-height: .98; }
  .hero-v3 .stage { min-height: 365px; height: 365px; margin-top: .25rem; }
}

@media (max-width: 575.98px) {
  .hero-v3 { padding: 1.45rem 0 1.9rem; }
  .hero-v3::after { width: 360px; height: 360px; right: -180px; bottom: -220px; }
  .hero-v3 .hero-copy { padding-left: .78rem; }
  .hero-v3 .hero-copy::after { top: .3rem; bottom: .2rem; width: 2px; }
  .hero-v3 .announce-pill { font-size: .69rem; padding: .36rem .7rem .36rem .55rem; }
  .hero-v3 .hero-title {
    display: block; width: 100%; max-width: 100%;
    margin: .62rem 0 .68rem;
    font-size: clamp(2.02rem, 10vw, 2.55rem);
    line-height: .98; letter-spacing: -.062em;
    text-wrap: balance;
  }
  .hero-v3 .hero-title .hero-line { display: inline; white-space: normal; }
  .hero-v3 .lead { max-width: none; font-size: .9rem; line-height: 1.5; margin-bottom: .9rem; }
  .hero-v3 .hero-cta { gap: .42rem; margin-bottom: .7rem; }
  .hero-v3 .hero-cta .btn { min-height: 43px; padding: .52rem .45rem; font-size: .78rem; }
  .hero-v3 .hero-proof { width: 100%; justify-content: center; gap: .45rem .62rem; padding: .62rem .5rem; border-radius: 16px; }
  .hero-v3 .hero-proof-tags { width: 100%; justify-content: center; }
  .hero-v3 .stage { min-height: 235px; height: 235px; margin-top: .45rem; }
  .hero-v3 .mockup { transform-origin: 50% 50%; }
  .hero-v3 .chip { transform: scale(.82); }
  .hero-v3 .chip.c-wallet { right: -1.2rem; top: 5%; }
  .hero-v3 .chip.c-licence { left: -1.2rem; bottom: 4%; }
  .hero-v3 .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v3 .mockup, .hero-v3 .chip.c-wallet, .hero-v3 .chip.c-licence { animation: none !important; }
}
/* ==========================================================================
   QuickTap unified sections — same premium visual language as redesigned hero
   User-facing sections only.
   ========================================================================== */

/* Shared section rhythm and visual anchors */
main > section:not(.hero-v3) { position: relative; }
main > section:not(.hero-v3)::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(88%, 940px); height: 1px;
  transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(248, 90, 0,.16), transparent);
}
.section-head { position: relative; z-index: 1; }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: .42rem; padding: .38rem .72rem;
  border: 1px solid rgba(248, 90, 0,.23); border-radius: 999px;
  background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(248, 90, 0,.07);
}
.section-head .eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #f85a00; box-shadow: 0 0 0 3px rgba(185, 84, 16,.13); }
.section-head h2 { color: #211712; font-size: clamp(1.8rem, 3.4vw, 2.8rem); }

/* Feature/benefit cards */
.feature-card, .step-card, .tm-card, .faq-item, .review-item, .stat-tile {
  position: relative; overflow: hidden; border: 1px solid rgba(15,23,42,.09) !important;
  border-radius: 18px !important; background: rgba(255,255,255,.82) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.065); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card::after, .step-card::after, .tm-card::after, .faq-item::after {
  content: ""; position: absolute; width: 130px; height: 130px; right: -76px; top: -76px;
  border-radius: 50%; background: radial-gradient(circle, rgba(185, 84, 16,.17), transparent 70%); pointer-events: none;
}
.feature-card:hover, .step-card:hover, .tm-card:hover, .faq-item:hover, .stat-tile:hover { transform: translateY(-4px); border-color: rgba(248, 90, 0,.28) !important; box-shadow: 0 24px 52px rgba(248, 90, 0,.11); }
.feature-card h6, .step-card h6, .tm-card h5 { color: #211712; letter-spacing: -.035em; }
.feature-card p, .step-card p, .tm-card p { color: #64748b; line-height: 1.52; }
.feature-card .feature-icon, .step-card .step-n { position: relative; z-index: 1; background: linear-gradient(145deg, #f6e4d5, #ffd9bd); color: #e04e00; border: 1px solid rgba(248, 90, 0,.2); box-shadow: 0 9px 20px rgba(248, 90, 0,.12); }
.step-card { padding: 1.25rem !important; }
.step-card .step-n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; }

/* Marquee / trust rail */
.marquee { margin: 0; padding: .75rem 0; border-top: 1px solid rgba(248, 90, 0,.10); border-bottom: 1px solid rgba(248, 90, 0,.10); background: linear-gradient(90deg, rgba(248, 90, 0,.06), rgba(255,255,255,.78), rgba(248, 90, 0,.06)); }
.marquee-item { color: #526171; font-size: .78rem; font-weight: 800; letter-spacing: .025em; }
.marquee-item::before { color: #f85a00; }

/* Stats band: crisp numbers with less empty height */
.stats-band, .how-band { position: relative; overflow: hidden; padding: 3rem 0 !important; background: linear-gradient(180deg, #f9f5f1, #fffaf5) !important; border-top: 1px solid rgba(248, 90, 0,.08); border-bottom: 1px solid rgba(248, 90, 0,.08); }
.stats-band::after, .how-band::after { content: ""; position: absolute; width: 360px; height: 360px; right: -190px; top: -160px; border-radius: 50%; border: 1px solid rgba(248, 90, 0,.13); box-shadow: 0 0 0 26px rgba(248, 90, 0,.03), 0 0 0 52px rgba(248, 90, 0,.018); }
.stats-band .stat-num { color: #e04e00; font-size: clamp(1.8rem, 3.8vw, 2.65rem); letter-spacing: -.065em; }
.stats-band .stat-label { color: #64748b; font-size: .76rem; font-weight: 700; }

/* Comparison */
.compare-wrap { overflow: hidden; border: 1px solid rgba(15,23,42,.09) !important; border-radius: 20px !important; background: rgba(255,255,255,.86) !important; box-shadow: 0 18px 45px rgba(15,23,42,.07); }
.compare-table { margin-bottom: 0 !important; }
.compare-table thead th { padding: 1rem .9rem; color: #e04e00; background: linear-gradient(180deg, #fdf4ec, #fefaf6); border-bottom: 1px solid rgba(248, 90, 0,.18); font-size: .78rem; }
.compare-table tbody td { padding: .78rem .9rem; border-color: rgba(15,23,42,.07); color: #526171; }
.compare-table tbody tr:hover { background: rgba(248, 90, 0,.045); }
.compare-table tbody td:first-child { color: #211712; font-weight: 700; }

/* Testimonials */
.tm-card { padding: 1.35rem !important; }
.tm-stars { color: #f85a00; letter-spacing: .08em; }
.tm-card blockquote, .tm-card .quote { color: #334155; font-size: 1rem; line-height: 1.58; }
.tm-who { color: #64748b; font-size: .78rem; }

/* FAQ */
.faq-list { display: grid; gap: .7rem; }
.faq-item { padding: 0 !important; }
.faq-q { width: 100%; padding: 1rem 1.15rem !important; color: #211712; font-weight: 800; text-align: left; background: transparent; border: 0; }
.faq-q:hover, .faq-item.open .faq-q[aria-expanded="true"] { color: #e04e00; }
.faq-a { padding: 0 1.15rem 1rem !important; color: #64748b; line-height: 1.55; }
.faq-ico { color: #f85a00; }

/* Closing CTA */
.cta-band { position: relative; overflow: hidden; margin: 1rem auto 0; padding: 3.2rem 1.5rem !important; border: 1px solid rgba(248, 90, 0,.2); border-radius: 24px; background: linear-gradient(120deg, #251409, #4d250b 56%, #f85a00); color: #fff; box-shadow: 0 24px 58px rgba(248, 90, 0,.18); }
.cta-band::after { content: ""; position: absolute; width: 280px; height: 280px; right: -80px; top: -120px; border-radius: 50%; border: 1px solid rgba(255,255,255,.19); box-shadow: 0 0 0 22px rgba(255,255,255,.05), 0 0 0 44px rgba(255,255,255,.035); }
.cta-band h2, .cta-band h3 { position: relative; z-index: 1; color: #fff; letter-spacing: -.05em; }
.cta-band p { position: relative; z-index: 1; color: rgba(251, 244, 238,.78); }
.cta-band .btn { position: relative; z-index: 1; background: #d9f99d !important; border-color: #d9f99d !important; color: #201915 !important; }

/* Keep the same light palette if an older dark preference is present. */
html[data-theme="dark"] .section-head h2, html[data-theme="dark"] .feature-card h6, html[data-theme="dark"] .step-card h6, html[data-theme="dark"] .tm-card h5, html[data-theme="dark"] .faq-q { color: #211712; }
html[data-theme="dark"] .section-head .eyebrow { color: #e04e00; background: rgba(255,255,255,.72); }
html[data-theme="dark"] .feature-card, html[data-theme="dark"] .step-card, html[data-theme="dark"] .tm-card, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .review-item, html[data-theme="dark"] .stat-tile, html[data-theme="dark"] .compare-wrap { background: rgba(255,255,255,.86) !important; border-color: rgba(15,23,42,.09) !important; color: #211712; }
html[data-theme="dark"] .stats-band, html[data-theme="dark"] .how-band { background: linear-gradient(180deg, #f9f5f1, #fffaf5) !important; }
html[data-theme="dark"] .marquee { background: linear-gradient(90deg, rgba(248, 90, 0,.06), rgba(255,255,255,.78), rgba(248, 90, 0,.06)); }

@media (max-width: 767.98px) {
  main > section:not(.hero-v3)::before { width: 82%; }
  .stats-band, .how-band { padding: 2.2rem 0 !important; }
  .stats-band .row { --bs-gutter-y: 1rem; }
  .compare-wrap { border-radius: 16px !important; }
  .compare-table { min-width: 620px; }
  .cta-band { margin-left: .75rem; margin-right: .75rem; padding: 2.25rem 1.1rem !important; border-radius: 20px; }
  .feature-card, .step-card, .tm-card { border-radius: 16px !important; }
}
/* Mobile polish: compact split feature and guaranteed visible native menu. */
.navbar-toggler { position: relative; z-index: 20; display: inline-flex !important; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; cursor: pointer; }
.navbar-toggler:focus { outline: 3px solid rgba(248, 90, 0,.22); outline-offset: 2px; }
@media (max-width: 991.98px) {
  .portal-nav .navbar-collapse { display: none !important; width: 100%; padding: .7rem 0 .85rem; }
  .portal-nav .navbar-collapse.show { display: block !important; }
  .portal-nav .navbar-collapse .navbar-nav { margin-bottom: .55rem !important; }
  .portal-nav .navbar-collapse .d-flex { align-items: stretch; flex-wrap: wrap; }
  .portal-nav .navbar-collapse .nav-link { padding: .67rem .78rem !important; }
  .mx-split { display: flex !important; flex-direction: column; gap: 1.05rem !important; margin-left: 0 !important; margin-right: 0 !important; }
  .mx-split > [class*="col-"] { width: 100% !important; max-width: 100%; padding-left: 0 !important; padding-right: 0 !important; }
  .mx-split .mx-split-media { margin-top: 0 !important; padding: 1rem !important; }
  .mx-split .mx-checklist { gap: .42rem; margin-bottom: 1.05rem !important; }
  .mx-split .mx-checklist li { font-size: .84rem; line-height: 1.35; }
  .mx-split .d-flex.gap-3 { gap: .55rem !important; }
}
@media (max-width: 575.98px) {
  .mx-split { gap: .85rem !important; }
  .mx-split-media .row { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; }
  .mx-split-media .mx-tile { min-height: 76px; padding: .75rem .8rem; }
  .mx-split-media .mx-tile b { font-size: .84rem; }
  .mx-split-media .mx-tile small { font-size: .68rem; }
  .how-band { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .how-band .section-head { margin-bottom: .95rem; }
  .how-band .row { --bs-gutter-y: .8rem; }
}
/* ==========================================================================
   Software rail + FAQ polish — public homepage only
   ========================================================================== */

/* Products: horizontal snap rail instead of a loose grid. */
#softwares-section > .row {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible;
  gap: 1rem; margin-left: -.25rem; margin-right: -.25rem; padding: .45rem .25rem 1rem;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
  scrollbar-color: rgba(248, 90, 0,.35) transparent;
}
#softwares-section > .row::-webkit-scrollbar { height: 6px; }
#softwares-section > .row::-webkit-scrollbar-track { background: transparent; }
#softwares-section > .row::-webkit-scrollbar-thumb { background: rgba(248, 90, 0,.3); border-radius: 99px; }
#softwares-section > .row > [class*="col-"] {
  flex: 0 0 calc(33.333% - .67rem); width: calc(33.333% - .67rem); max-width: none;
  padding-left: 0; padding-right: 0; scroll-snap-align: start;
}
#softwares-section .software-card { height: 100%; min-height: 192px; }
#softwares-section .software-card .thumb { min-height: 106px; }
#softwares-section .software-card:hover { transform: translateY(-5px); }

/* FAQ: tidy two-column desktop accordion, single-column mobile. */
#faq .faq-list {
  width: 100%; max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem;
  align-items: start;
}
#faq .faq-item {
  width: 100%; border: 1px solid rgba(248, 90, 0,.14) !important;
  border-radius: 16px !important; background: rgba(255,255,255,.86) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.055);
}
#faq .faq-item.open { border-color: rgba(248, 90, 0,.38) !important; box-shadow: 0 18px 38px rgba(248, 90, 0,.11); }
#faq .faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  min-height: 58px; cursor: pointer; font-size: .88rem; line-height: 1.35;
}
#faq .faq-q .faq-ico { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(248, 90, 0,.1); transition: transform .25s ease, background .25s ease; }
#faq .faq-item.open .faq-q .faq-ico { background: rgba(248, 90, 0,.18); transform: rotate(135deg); }
#faq .faq-a { max-height: 0; overflow: hidden; padding: 0 !important; transition: max-height .35s ease; }
#faq .faq-item.open .faq-a { max-height: 360px; padding: 0 1.15rem 1rem !important; }
#faq .faq-a p { padding: 0 !important; font-size: .82rem; line-height: 1.55; }

@media (max-width: 767.98px) {
  #softwares-section > .row { gap: .75rem; padding-bottom: .8rem; }
  #softwares-section > .row > [class*="col-"] { flex-basis: 82%; width: 82%; }
  #softwares-section .software-card { min-height: 184px; }
  #faq .faq-list { grid-template-columns: 1fr; gap: .65rem; }
  #faq .faq-q { min-height: 54px; padding: .85rem .95rem !important; font-size: .82rem; }
  #faq .faq-item.open .faq-a { padding: 0 .95rem .85rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  #faq .faq-q .faq-ico, #faq .faq-a { transition: none; }
}
/* ==========================================================================
   QuickTap splash upgrade — sharp premium launch screen
   Visual-only override; existing loading/timing behavior remains unchanged.
   ========================================================================== */
#splashScreen {
  isolation: isolate; overflow: hidden;
  background:
    radial-gradient(520px 320px at 50% 34%, rgba(185, 84, 16,.17), transparent 68%),
    linear-gradient(145deg, #fefbf9 0%, #f9f4ef 48%, #f8fbff 100%) !important;
}
#splashScreen::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .42;
  background-image: linear-gradient(rgba(248, 90, 0,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(248, 90, 0,.065) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 76%, transparent);
}
#splashScreen::after {
  content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(248, 90, 0,.15); box-shadow: 0 0 0 24px rgba(248, 90, 0,.035), 0 0 0 48px rgba(248, 90, 0,.022);
  animation: splashOrbit 5s ease-in-out infinite;
}
.splash-inner {
  position: relative; width: min(330px, calc(100vw - 42px)); padding: 2.2rem 1.65rem 1.75rem;
  border: 1px solid rgba(255,255,255,.92); border-radius: 26px;
  background: rgba(255,255,255,.66); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(118, 56, 15,.13), inset 0 1px 0 rgba(255,255,255,.95);
}
.splash-inner::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 3px; border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, transparent, #f85a00, #ffd9bd, transparent); box-shadow: 0 0 18px rgba(185, 84, 16,.6);
}
.splash-cube {
  width: 82px; height: 82px; margin: 0 auto 1.25rem; filter: drop-shadow(0 16px 22px rgba(248, 90, 0,.2));
  animation: cubeSpin 2.8s infinite cubic-bezier(.6,.05,.4,.95);
}
.splash-cube::before {
  content: ""; position: absolute; inset: -14px; border: 1px solid rgba(248, 90, 0,.2); border-radius: 24px;
  box-shadow: 0 0 0 8px rgba(248, 90, 0,.035); transform: rotate(45deg); animation: splashHalo 2.8s ease-in-out infinite;
}
.splash-cube .face {
  border: 1px solid rgba(255,255,255,.7); border-radius: 20px;
  background: linear-gradient(145deg, #c96726 0%, #f85a00 58%, #e04e00 100%);
  color: #fff; font-size: 1.7rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 12px 28px rgba(248, 90, 0,.32);
}
.splash-cube .face::after { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 13px; }
.splash-brand {
  font-size: clamp(1.75rem, 7vw, 2.25rem); letter-spacing: -.055em; line-height: 1.05;
  background: linear-gradient(100deg, #211712 12%, #e04e00 52%, #211712 88%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash-brand::after { width: 62%; height: 3px; margin-top: .65rem; background: linear-gradient(90deg, transparent, #f85a00, #ffd9bd, transparent); }
.splash-tag { margin-top: .7rem; color: #64748b; font-size: .68rem; font-weight: 800; letter-spacing: .27em; }
.splash-bar { position: relative; width: 100%; height: 5px; margin-top: 1.55rem; border: 1px solid rgba(248, 90, 0,.12); background: rgba(248, 90, 0,.08); box-shadow: inset 0 1px 2px rgba(15,23,42,.06); }
.splash-bar span { width: 34%; background: linear-gradient(90deg, #e04e00, #f85a00, #ffd9bd); box-shadow: 0 0 12px rgba(185, 84, 16,.7); }
@keyframes splashOrbit { 0%,100% { transform: scale(.92) rotate(0deg); opacity: .55; } 50% { transform: scale(1.05) rotate(12deg); opacity: 1; } }
@keyframes splashHalo { 0%,100% { transform: rotate(45deg) scale(.9); opacity: .55; } 50% { transform: rotate(135deg) scale(1.06); opacity: 1; } }
@media (max-width: 575.98px) {
  .splash-inner { width: min(308px, calc(100vw - 34px)); padding: 1.85rem 1.25rem 1.45rem; border-radius: 22px; }
  .splash-cube { width: 72px; height: 72px; margin-bottom: 1.05rem; }
  .splash-cube .f1 { transform: translateZ(36px); }
  .splash-cube .f2 { transform: rotateY(180deg) translateZ(36px); }
  .splash-cube .f3 { transform: rotateY(90deg) translateZ(36px); }
  .splash-cube .f4 { transform: rotateY(-90deg) translateZ(36px); }
  .splash-cube .f5 { transform: rotateX(90deg) translateZ(36px); }
  .splash-cube .f6 { transform: rotateX(-90deg) translateZ(36px); }
  #splashScreen::after { width: 360px; height: 360px; }
}
/* ==========================================================================
   Final sharpness pass + FAQ tap cue — public user-side UI
   ========================================================================== */

/* Page-wide premium crispness */
body {
  background:
    radial-gradient(900px 440px at 92% 8%, rgba(185, 84, 16,.075), transparent 64%),
    radial-gradient(760px 420px at -10% 48%, rgba(248, 90, 0,.045), transparent 68%),
    #fff7f0;
}
main { overflow: clip; }
.section-pad { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.section-head h2, main h2 { letter-spacing: -.06em; line-height: 1.04; }
.section-head p { max-width: 620px; }
.eyebrow { box-shadow: 0 8px 18px rgba(248, 90, 0,.07); }
.glow-divider { opacity: .6; border-color: rgba(248, 90, 0,.13); }
.portal-nav { box-shadow: 0 10px 28px rgba(15,23,42,.045); }
.portal-nav .navbar-brand strong { letter-spacing: -.045em; }
.nav-link { transition: color .2s ease, background .2s ease, transform .2s ease; }
.nav-link:hover { transform: translateY(-1px); }
.btn, .mx-more { letter-spacing: -.015em; }
.btn-premium, .btn-cta { box-shadow: 0 14px 28px rgba(248, 90, 0,.2); }
.card, .software-card, .feature-card, .step-card, .plan-card, .compare-wrap, .tm-card, .faq-item { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.software-card { border-color: rgba(248, 90, 0,.14) !important; box-shadow: 0 18px 40px rgba(15,23,42,.065); }
.software-card .thumb { position: relative; }
.software-card .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 48%); pointer-events: none; }
.software-card .go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(248, 90, 0,.1); color: #e04e00; }
.mx-more { font-weight: 800; }
.mx-more:hover { letter-spacing: .005em; }
.portal-footer { border-top: 1px solid rgba(248, 90, 0,.14); }

/* Restore a visible, understandable FAQ interaction cue. */
#faq .faq-q { position: relative; padding-right: 7rem !important; }
#faq .faq-q::after {
  content: "Tap to open"; position: absolute; right: 2.55rem; top: 50%; transform: translateY(-50%);
  color: #f85a00; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .72; white-space: nowrap;
}
#faq .faq-item.open .faq-q::after { content: "Tap to close"; opacity: .55; }
#faq .faq-q .faq-ico { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
#faq .faq-item.open .faq-q .faq-ico { transform: translateY(-50%) rotate(135deg); }
#faq .faq-a { display: block; visibility: hidden; }
#faq .faq-item.open .faq-a { visibility: visible; }

/* Mobile stays compact and keeps the hint readable. */
@media (max-width: 575.98px) {
  .section-pad { padding-top: 2.45rem; padding-bottom: 2.45rem; }
  .section-head h2, main h2 { font-size: clamp(1.7rem, 8vw, 2.15rem); }
  #faq .faq-q { padding-right: 6.25rem !important; }
  #faq .faq-q::after { right: 2.35rem; font-size: .54rem; }
  #faq .faq-q .faq-ico { right: .78rem; }
}
/* ==========================================================================
   Solid-color-only public theme + deterministic mobile menu
   No gradients. Fixed colors only.
   ========================================================================== */

/* Remove every CSS gradient/image layer from the public UI. */
body * { background-image: none !important; }
body { background: #fff7f0 !important; color: #211712; }
body::before, body::after, main::before, main::after { background-image: none !important; }

/* Fixed single-color surfaces */
.portal-nav, .portal-nav.shrunk { background: #ffffff !important; border-bottom-color: #f3e2d4 !important; }
.hero, .hero-v2, .hero-v3, .hero-bg, .hero-fade, .hero-aurora { background: #fff7f0 !important; background-color: #fff7f0 !important; }
.section-pad, .band-a, .how-band, .stats-band { background: #fff7f0 !important; background-color: #fff7f0 !important; }
.marquee { background: #f7f3ef !important; }
.card, .software-card, .feature-card, .step-card, .plan-card, .tm-card, .faq-item, .compare-wrap, .review-item, .stat-tile, .auth-card { background: #ffffff !important; }
.portal-footer { background: #211712 !important; }
.cta-band { background: #d84a00 !important; }

/* Solid replacements for previously gradient-rendered accents. */
.grad-text, .splash-brand { background: none !important; color: #e04e00 !important; -webkit-text-fill-color: #e04e00 !important; }
.btn-premium, .btn-cta, .btn-primary { background: #f85a00 !important; border-color: #f85a00 !important; color: #ffffff !important; }
.btn-premium:hover, .btn-cta:hover, .btn-primary:hover { background: #e04e00 !important; border-color: #e04e00 !important; }
.mx-tile-green { background: #f85a00 !important; }
.mx-tile-dark { background: #1d1008 !important; }
.mx-tile-glass { background: #fdf0e5 !important; }
.software-card .thumb { background: #fdf0e5 !important; }
.feature-card .feature-icon, .step-card .step-n { background: #f6e4d5 !important; }
.compare-table thead th { background: #fdf0e5 !important; }

/* Make the nav panel explicit and let the button control it directly. */
.navbar-toggler { position: relative; z-index: 1051; pointer-events: auto !important; cursor: pointer !important; }
@media (max-width: 991.98px) {
  .portal-nav .navbar-collapse { display: none !important; background: #ffffff !important; }
  .portal-nav .navbar-collapse.show { display: block !important; }
}

/* ===== SOURCE: theme-v15.css ===== */
/* ============================================================================
   MIRZA X LABS — v15 final polish
   • Accessible, visible, dependable mobile header menu
   • Bootstrap Icons font (no locally drawn mask icons)
   • Crisp section rhythm, sharper product cards and consistent buttons
   • Restore the live hero glow/beam suppressed by the prior flat-theme pass
   Loads last; public client UI only.
   ============================================================================ */

/* Official Bootstrap Icons: small sizing utilities, glyphs come from CDN. */
.bi { line-height: 1; vertical-align: -.125em; }
.bi-xs { font-size: .75em; }
.bi-sm { font-size: .875em; }
.bi-lg { font-size: 1.25em; }
.ann-bar .ann-emoji { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.25rem; color: #f85a00; }
.ann-bar.ann-warning .ann-emoji { color: #b94d3c; }
.ann-bar .ann-emoji .bi { font-size: 1.05rem; }

/* Keep icon foreground tied to its contrast-safe button text color. */
.btn .bi, .chat-send .bi { color: inherit !important; }

/* v14's flat-image reset removed gradients that were the only fill on these
   icon controls. Give them solid surfaces so their white icons stay visible. */
.ai-float-btn { background: #f85a00 !important; color: #fff !important; }
.mx-mobilenav { background: #fff !important; }
html[data-theme="dark"] .mx-mobilenav { background: #1d1008 !important; border-top-color: rgba(255,255,255,.12); }
.mx-mobilenav a.center { background: #f85a00 !important; color: #fff !important; }
.portal-nav .btn-topup, .chat-send { background: #f85a00 !important; color: #fff !important; }
#mxTop { background: #fff !important; color: #e04e00 !important; }
html[data-theme="dark"] #mxTop { background: #1d1008 !important; color: #ff8a2b !important; }

/* Site-wide baseline: clean contrast, deliberate section spacing. */
body {
  color: #201610;
  background:
    radial-gradient(900px 420px at 96% 2%, rgba(185, 84, 16,.055), transparent 68%),
    #fff7f0 !important;
}
main { overflow: clip; }
.section-pad { padding-top: clamp(3rem, 5vw, 4.35rem); padding-bottom: clamp(3rem, 5vw, 4.35rem); }
.section-head { max-width: 860px; margin-left: auto; margin-right: auto; }
.section-head h2, main h2 {
  color: #211712; letter-spacing: -.052em; line-height: 1.08;
  text-wrap: balance;
}
.section-head p { max-width: 640px; line-height: 1.58; }

/* Restore restrained gradients to the signature green elements. The earlier
   flat-theme rule is deliberately overridden only on these visual anchors. */
.grad-text {
  background: linear-gradient(105deg, #e04e00 0%, #f85a00 56%, #e04e00 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
}
.btn-premium, .btn-primary, .btn-cta {
  background: linear-gradient(160deg, #b95919 0%, #f85a00 54%, #e04e00 100%) !important;
  background-color: #f85a00 !important; border-color: #f85a00 !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(0,0,0,.12), 0 12px 26px -10px rgba(248, 90, 0,.52) !important;
}
.btn-premium:hover, .btn-primary:hover, .btn-cta:hover {
  background: linear-gradient(160deg, #a95116 0%, #8b3e0b 58%, #672d07 100%) !important;
  background-color: #8b3e0b !important; border-color: #8b3e0b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 16px 30px -11px rgba(248, 90, 0,.62) !important;
}
.btn:focus-visible, .navbar-toggler:focus-visible, .nav-link:focus-visible {
  outline: 3px solid rgba(185, 84, 16,.34); outline-offset: 3px;
}
.btn, .mx-more { font-weight: 700; letter-spacing: -.012em; }

/* Header: compact wordmark, clear active state and an unmistakable menu button. */
.portal-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.94) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.055) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}
.portal-nav > .container { min-height: 66px; position: relative; }
.portal-nav .navbar-brand { gap: .68rem !important; text-decoration: none; }
.portal-nav .brand-mark {
  width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; background: #f85a00 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 18px rgba(248, 90, 0,.2);
}
.portal-nav .brand-mark .bi { font-size: 1.08rem; }
.portal-nav .navbar-brand strong { color: #211712; font-size: .98rem; font-weight: 800; letter-spacing: -.04em; }
.portal-nav .navbar-brand small { color: #687782 !important; font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-nav .nav-link {
  display: inline-flex; align-items: center; gap: .34rem;
  min-height: 40px; padding: .48rem .75rem !important; border-radius: 11px;
  color: #42535e !important; font-size: .86rem; font-weight: 700;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.portal-nav .nav-link:hover, .portal-nav .nav-link.active {
  color: #e04e00 !important; background: #fdf0e5 !important; transform: translateY(-1px);
}
.portal-nav .nav-link::before, .portal-nav .nav-link::after { display: none !important; }
.portal-nav .nav-link .bi { font-size: .94rem; color: #f85a00; }
.portal-nav .navbar-toggler {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 48px; height: 46px; padding: 0; border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 15px; color: #263840 !important; background: #fff !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.04); cursor: pointer; z-index: 1052;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.portal-nav .navbar-toggler:hover { border-color: rgba(248, 90, 0,.4) !important; background: #faf7f5 !important; box-shadow: 0 7px 18px rgba(248, 90, 0,.1); }
.portal-nav .navbar-toggler:active { transform: scale(.97); }
.portal-nav .navbar-toggler .bi { font-size: 1.52rem; line-height: 1; }
.portal-nav .wallet-chip { color: #e04e00; }
.portal-nav .btn-topup { color: #fff !important; }
.portal-nav .user-chip { min-height: 40px; }

/* Dependable mobile disclosure: stays hidden visually until the controller
   adds .show; unlike Bootstrap's data API, it also works if that JS is delayed. */
@media (max-width: 991.98px) {
  .portal-nav .navbar-collapse {
    display: block !important; position: absolute; z-index: 1051;
    top: calc(100% + .42rem); left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right)); width: auto;
    max-height: 0; margin: 0 !important; padding: 0 .8rem;
    overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(.99); transform-origin: top center;
    border: 1px solid transparent; border-radius: 20px;
    background: #fff !important; background-image: none !important;
    box-shadow: none; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    transition: max-height .28s ease, opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1),
      padding .2s ease, border-color .2s ease, box-shadow .2s ease, visibility .2s;
  }
  .portal-nav .navbar-collapse.show {
    display: block !important; max-height: calc(100vh - 145px); max-height: calc(100dvh - 145px);
    padding: .72rem .8rem .8rem; overflow-x: hidden; overflow-y: auto;
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
    border-color: rgba(15,23,42,.09); box-shadow: 0 22px 54px rgba(15,23,42,.15), 0 3px 10px rgba(15,23,42,.05);
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .portal-nav .navbar-collapse .navbar-nav { width: 100%; gap: .14rem; margin: 0 0 .7rem !important; }
  .portal-nav .navbar-collapse .nav-link { display: flex; width: 100%; min-height: 46px; padding: .65rem .75rem !important; }
  .portal-nav .navbar-collapse > .d-flex { width: 100%; margin-top: .55rem; gap: .55rem !important; }
  .portal-nav .navbar-collapse > .d-flex > .btn { flex: 1 1 0; min-height: 42px; border-radius: 12px; }
  .portal-nav .navbar-collapse .flex-column.flex-lg-row { flex-direction: row !important; align-items: center; flex-wrap: wrap; }
  .portal-nav .navbar-collapse .wallet-chip { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .portal-nav .navbar-collapse .dropdown { flex: 0 0 auto; }
  .portal-nav .navbar-collapse .dropdown-menu { position: absolute; }
  .portal-nav .theme-toggle { margin-left: 0 !important; margin-top: .55rem; }
}
@media (min-width: 992px) {
  .portal-nav .navbar-toggler { display: none !important; }
  .portal-nav .navbar-collapse { max-height: none; }
}

/* Cleaner, consistent surfaces across the public page. */
.card, .software-card, .feature-card, .step-card, .plan-card, .tm-card,
.faq-item, .compare-wrap, .review-item, .stat-tile, .auth-card, .dash-stat {
  border-color: rgba(15,23,42,.09) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.055);
}
.software-card, .feature-card, .step-card, .plan-card, .tm-card, .faq-item, .review-item, .stat-tile {
  border-radius: 18px !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.software-card:hover, .feature-card:hover, .step-card:hover, .plan-card:hover, .tm-card:hover, .stat-tile:hover {
  transform: translateY(-3px); border-color: rgba(248, 90, 0,.25) !important;
  box-shadow: 0 20px 42px rgba(248, 90, 0,.1);
}
.software-card .thumb {
  background-image: linear-gradient(145deg, rgba(185, 84, 16,.15), rgba(255,255,255,.45)) !important;
  background-color: #fdf0e5 !important;
}
.section-head .eyebrow { color: #e04e00; border-color: rgba(248, 90, 0,.2); }
.stats-band, .how-band {
  background: linear-gradient(180deg, #f9f4f0, #f8fbfc) !important;
  background-color: #f9f7f5 !important;
}
.marquee { background: linear-gradient(90deg, #f7f2ee, #fff, #f7f2ee) !important; }
.cta-band {
  background: linear-gradient(125deg, #d84a00 0%, #f85a00 58%, #672d07 100%) !important;
  background-color: #d84a00 !important;
}
.portal-footer { background: #211712 !important; }

/* Hero CTA: the main action has a consistent footprint and a clear affordance. */
#hero .hero-cta { display: flex; align-items: stretch; gap: .65rem; max-width: 560px; margin-bottom: .85rem; }
#hero .hero-cta .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 52px; padding: .72rem 1.1rem; border-radius: 15px;
  font-size: .9rem; font-weight: 800; line-height: 1.1; text-align: center; white-space: nowrap;
}
#hero .hero-cta .btn-premium { flex: 1 1 auto; }
#hero .hero-cta .btn-glass {
  flex: 0 0 auto; color: #211712 !important; background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.12) !important; box-shadow: 0 5px 14px rgba(15,23,42,.045) !important;
}
#hero .hero-cta .btn-glass:hover { background: #fff !important; border-color: rgba(248, 90, 0,.3) !important; }
#hero .hero-cta .bi { font-size: 1rem; }

/* Restore and focus the live hero backdrop; retain 3D motion and safe chip bounds. */
.hero-v3 {
  min-height: 0 !important; overflow: hidden;
  background:
    radial-gradient(900px 520px at 14% 12%, rgba(248, 90, 0,.12), transparent 62%),
    radial-gradient(760px 480px at 88% 24%, rgba(255, 138, 43,.1), transparent 60%),
    linear-gradient(180deg, #fffaf5, #f9f7f5) !important;
  background-color: #fbf9f7 !important;
}
.hero-v3 .hero-aurora {
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(248, 90, 0,.12), transparent 62%),
    radial-gradient(760px 480px at 84% 22%, rgba(255, 138, 43,.1), transparent 58%),
    radial-gradient(700px 420px at 50% 96%, rgba(248, 90, 0,.05), transparent 60%) !important;
}
.hero-v3 .hero-grid {
  background-image:
    linear-gradient(to right, rgba(10,13,16,.023) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,13,16,.023) 1px, transparent 1px) !important;
}
.hero-v3 .hero-beam {
  background: linear-gradient(102deg, transparent, rgba(255,255,255,.18) 46%, transparent) !important;
}
.hero-v3 .hero-fade { background: linear-gradient(180deg, rgba(255,255,255,0), #fff7f0 96%) !important; }
.hero-v3 .stage { min-height: 0; overflow: visible; }
.hero-v3 .hero-title { text-wrap: balance; }
.hero-v3 .hero-copy::before { pointer-events: none; }
.hero-v3 .chip.c-wallet { right: 0 !important; }
.hero-v3 .chip.c-licence { left: 0 !important; }
.hero-v3 .mockup { overflow: hidden; overflow: clip; }

@media (max-width: 991.98px) {
  .section-pad { padding-top: 2.85rem; padding-bottom: 2.85rem; }
  .hero-v3 { padding: 2.2rem 0 2rem !important; }
  .hero-v3 .row { --bs-gutter-y: 1rem !important; }
  .hero-v3 .stage { height: 300px; min-height: 0; margin-top: .1rem; }
  #hero .hero-cta { max-width: 520px; }
}
@media (max-width: 575.98px) {
  .section-pad { padding: 2.25rem 0; }
  .section-head { margin-bottom: 1.05rem; }
  .section-head h2 { font-size: clamp(1.5rem, 7.2vw, 1.85rem); }
  .hero-v3 { min-height: 0 !important; padding: 1.05rem 0 1.45rem !important; }
  .hero-v3 .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: .72rem !important; }
  .hero-v3 .hero-copy { padding-left: .6rem; }
  .hero-v3 .announce-pill { margin-bottom: .55rem; font-size: .68rem; }
  .hero-v3 .hero-title { margin: .4rem 0 .58rem; font-size: clamp(1.95rem, 9.1vw, 2.35rem); line-height: 1.02; }
  .hero-v3 .lead { margin-bottom: .72rem; font-size: .88rem; line-height: 1.48; }
  #hero .hero-cta {
    display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
    gap: .42rem; margin-bottom: .55rem;
  }
  #hero .hero-cta .btn { width: 100%; min-width: 0; min-height: 44px; padding: .55rem .42rem; font-size: .78rem; }
  #hero .hero-cta .btn-glass { flex: initial; }
  .hero-v3 .hero-proof { margin-top: .1rem; padding: .5rem .48rem; gap: .35rem .48rem; }
  .hero-v3 .hero-proof-tags { gap: .45rem; }
  .hero-v3 .hero-proof-tags span { font-size: .68rem; }
  .hero-v3 .stage { height: 212px; min-height: 0; margin-top: .05rem; }
  .hero-v3 .mock-body { min-height: 150px; }
  .hero-v3 .mock-chart { height: 34px; }
  .hero-v3 .chip { width: 128px; }
  .hero-v3 .chip.c-wallet { right: 0 !important; top: 4%; }
  .hero-v3 .chip.c-licence { left: 0 !important; bottom: 3%; }
  .hero-v3 .scroll-hint { display: none; }
}
@media (max-width: 380px) {
  #hero .hero-cta { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: .3rem; }
  #hero .hero-cta .btn { padding: .5rem .24rem; font-size: .72rem; }
  .hero-v3 .hero-title { font-size: 1.85rem; }
  .hero-v3 .stage { height: 198px; }
  .hero-v3 .chip { width: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-nav .navbar-toggler, .portal-nav .nav-link,
  .software-card, .feature-card, .step-card, .plan-card, .tm-card, .stat-tile,
  #hero .hero-cta .btn { transition: none !important; }
  .software-card:hover, .feature-card:hover, .step-card:hover, .plan-card:hover,
  .tm-card:hover, .stat-tile:hover { transform: none; }
}

/* ===== SOURCE: theme-v16.css ===== */
/* ============================================================================
   MIRZA X LABS — v16 hero proof + stats visibility pass
   Additive only: retain the existing glass cards, palette, geometry and reveals.
   ============================================================================ */

/* Hero proof bar: slightly denser glass, clearer edge and stronger copy. */
.hero-v3 .hero-proof {
  background-color: rgba(255,255,255,.90) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.96), rgba(252, 250, 248,.90)) !important;
  border-color: rgba(15,23,42,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 20px rgba(15,23,42,.09) !important;
}
.hero-v3 .hero-proof-txt { color: #475569 !important; }
.hero-v3 .hero-proof-txt b { color: #211712 !important; font-weight: 800; }
.hero-v3 .hero-proof-tags span { color: #334155 !important; }
.hero-v3 .hero-proof-tags i { color: #e04e00 !important; }

/* Restore the original avatar palette that the earlier flat layer suppressed;
   a fine outline and a light status dot keep the small circles distinct on mobile. */
.hero-v3 .hero-proof .mx-avatars .av {
  background-color: #f85a00 !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(15,23,42,.16), 0 4px 10px rgba(15,23,42,.20) !important;
}
.hero-v3 .hero-proof .mx-avatars .av:nth-child(1) { background-image: linear-gradient(160deg,#f85a00,#d84a00) !important; }
.hero-v3 .hero-proof .mx-avatars .av:nth-child(2) { background-image: linear-gradient(160deg,#ff8a2b,#f85a00) !important; }
.hero-v3 .hero-proof .mx-avatars .av:nth-child(3) { background-image: linear-gradient(160deg,#d84a00,#4e2306) !important; }
.hero-v3 .hero-proof .mx-avatars .av:nth-child(4) { background-image: linear-gradient(160deg,#f85a00,#c2410c) !important; }
.hero-v3 .hero-proof .mx-avatars .av::after {
  background: #ffd9bd !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(11,23,32,.24);
}
.hero-v3 .hero-proof .mx-avatars .av.more {
  background-color: #e04e00 !important;
  background-image: linear-gradient(165deg,#f85a00,#e04e00) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px rgba(15,23,42,.14), 0 5px 12px rgba(15,23,42,.20) !important;
}

/* Four stat tiles: keep the same glass treatment, but give the surface and
   edge enough opacity to separate from the pale stats band. */
.stats-band .mx-mega > .mx-service {
  background-color: rgba(255,255,255,.92) !important;
  background-image: linear-gradient(180deg,rgba(255,255,255,.97),rgba(252, 250, 248,.91)) !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 12px 26px -18px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.055) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
}
.stats-band .mx-mega > .mx-service:hover {
  border-color: rgba(248, 90, 0,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 15px 30px -18px rgba(248, 90, 0,.25), 0 3px 8px rgba(15,23,42,.07) !important;
}
.stats-band .mx-mega .n {
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #211712 !important;
  -webkit-text-fill-color: #211712 !important;
}
.stats-band .mx-mega .l { color: #334155 !important; }
.stats-band .mx-mega .s { color: #e04e00 !important; font-weight: 700; }

/* Same treatment in the site's dark-toggle state: light glass stays readable. */
html[data-theme="dark"] .hero-v3 .hero-proof {
  background-color: rgba(255,255,255,.90) !important;
  background-image: linear-gradient(180deg,rgba(255,255,255,.96),rgba(252, 250, 248,.90)) !important;
  border-color: rgba(15,23,42,.15) !important;
}
html[data-theme="dark"] .hero-v3 .hero-proof-txt { color: #475569 !important; }
html[data-theme="dark"] .hero-v3 .hero-proof-txt b { color: #211712 !important; }
html[data-theme="dark"] .hero-v3 .hero-proof-tags span { color: #334155 !important; }
html[data-theme="dark"] .stats-band .mx-mega > .mx-service {
  background-color: rgba(255,255,255,.92) !important;
  background-image: linear-gradient(180deg,rgba(255,255,255,.97),rgba(252, 250, 248,.91)) !important;
  border-color: rgba(15,23,42,.14) !important;
}
html[data-theme="dark"] .stats-band .mx-mega .n { color: #211712 !important; -webkit-text-fill-color: #211712 !important; }
html[data-theme="dark"] .stats-band .mx-mega .l { color: #334155 !important; }
html[data-theme="dark"] .stats-band .mx-mega .s { color: #e04e00 !important; }

/* ===== SOURCE: theme-v17.css ===== */
/* ============================================================================
   MIRZA X LABS — v17 icon visibility audit fixes
   Solid-color fallbacks only where v14's global image reset removed the
   original icon backing. No layout or motion changes.
   ============================================================================ */

/* Green icon tiles whose white glyphs were left on transparent surfaces. */
.bento-card .b-ico,
.mx-pagehero .htile,
.software-card .sw-go,
.inv-logo,
.user-chip .avatar,
.avatar,
.hero-v3 .mock-side .mi.active,
.hero-v3 .chip-badge.ok {
  background-color: #e04e00 !important;
  color: #fff !important;
}
.bento-card .b-ico { border: 1px solid rgba(255,255,255,.3); }

/* Restore pale, legible surfaces for green-line icon tiles. */
.feature-icon {
  background-color: #f6e4d5 !important;
  color: #e04e00 !important;
  border-color: rgba(248, 90, 0,.22) !important;
}
.notif-icon,
.mx-empty-icon {
  background-color: #fdf0e5 !important;
  color: #e04e00 !important;
  border-color: rgba(248, 90, 0,.22) !important;
}

/* Keep the small hero controls legible and bring back the uptime progress arc. */
.mx-trust .ring {
  background: conic-gradient(var(--mx-green, #f85a00) calc(var(--p, 99) * 1%), rgba(10,13,16,.12) 0) !important;
}
.cycle-toggle button.active,
.tab-btn.active,
.nav-pills .nav-link.active {
  background-color: #e04e00 !important;
  color: #fff !important;
}

/* Solid equivalents for status badges; their original green/red/blue fills were
   gradients and the flattened CSS left white text/icons with no surface. */
.badge.text-bg-success, .badge.bg-success {
  background-color: #d84a00 !important;
  color: #fff !important;
}
.badge.text-bg-danger, .badge.bg-danger {
  background-color: #b3342a !important;
  color: #fff !important;
}
.badge.text-bg-info, .badge.bg-info {
  background-color: #1b7fb0 !important;
  color: #fff !important;
}
.badge.text-bg-warning, .badge.bg-warning {
  background-color: #f5b301 !important;
  color: #1f0e05 !important;
}

/* Muted icons that were technically present but too pale at small sizes. */
#faq .faq-q .faq-ico { color: #e04e00 !important; }
.cmp-no { color: #64748b !important; }
#mxTop:hover { background-color: #e04e00 !important; color: #fff !important; }

/* Preserve readable pricing when the old gradient-text fill is unavailable. */
.plan-price {
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #211712 !important;
  -webkit-text-fill-color: #211712 !important;
}
.plan-price small { color: #64748b !important; -webkit-text-fill-color: #64748b !important; }
.plan-save { background-color: #ffd9bd !important; color: #4e2306 !important; }

/* The first-visit cube uses emoji glyphs; restore their green face surface. */
.splash-cube .face { background-color: #e04e00 !important; }

/* ===== SOURCE: theme-v18.css ===== */
/* ============================================================================
   MIRZA X LABS — v18 comparison table horizontal-scroll fix
   v14 set the comparison wrapper to overflow:hidden, clipping the wide table.
   Restore an inner horizontal scroller without changing the table/layout.
   ============================================================================ */
#compare .compare-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 78, 0,.42) rgba(248, 90, 0,.07);
}
#compare .compare-wrap::-webkit-scrollbar { height: 6px; }
#compare .compare-wrap::-webkit-scrollbar-track { background: rgba(248, 90, 0,.07); border-radius: 999px; }
#compare .compare-wrap::-webkit-scrollbar-thumb { background: rgba(224, 78, 0,.42); border-radius: 999px; }
#compare .compare-wrap::-webkit-scrollbar-thumb:hover { background: #e04e00; }
@media (max-width: 767.98px) {
  #compare .compare-table { min-width: 620px; }
}

/* Header menu repair - responsive portal navigation. */
.portal-nav {
  min-height: 74px !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(248, 90, 0,.12) !important;
  box-shadow: 0 5px 20px rgba(65, 35, 15,.06) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.portal-nav > .container {
  min-height: 74px !important;
  display: flex;
  align-items: center;
}
.portal-nav .navbar-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px !important;
  min-width: 0;
  color: #231810 !important;
  text-decoration: none;
}
.portal-nav .navbar-brand .brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 15px;
  background: linear-gradient(145deg,#b45719,#e04e00);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(224, 78, 0,.20), inset 0 1px 0 rgba(255,255,255,.35);
}
.portal-nav .navbar-brand strong { display:block; color:#231810 !important; font-size:17px; line-height:1.05; font-weight:850; letter-spacing:-.025em; }
.portal-nav .navbar-brand small { display:block; margin-top:4px; color:#71827a !important; font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.portal-nav .navbar-toggler {
  display: grid !important;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0 !important;
  border: 1px solid rgba(248, 90, 0,.22) !important;
  border-radius: 15px;
  background: rgba(255,255,255,.92) !important;
  color: #372417 !important;
  font-size: 25px;
  box-shadow: 0 6px 16px rgba(65, 35, 15,.07);
}
.portal-nav .navbar-toggler:focus { box-shadow: 0 0 0 4px rgba(255, 138, 43,.15) !important; }
.portal-nav .navbar-collapse { align-items:center; }
.portal-nav .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .55rem .72rem !important;
  border-radius: 11px;
  color: #584b43 !important;
  font-size: 12px;
  font-weight: 700;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.portal-nav .nav-link:hover, .portal-nav .nav-link.active { background: #f7f0eb !important; color:#e04e00 !important; transform: translateY(-1px); }
html[data-theme="dark"] .portal-nav { background: rgba(23, 16, 11,.94) !important; border-bottom-color: rgba(255, 138, 43,.18) !important; }
html[data-theme="dark"] .portal-nav .navbar-brand, html[data-theme="dark"] .portal-nav .navbar-brand strong { color:#fef9f5 !important; }
html[data-theme="dark"] .portal-nav .navbar-brand small { color:#b3a59a !important; }
html[data-theme="dark"] .portal-nav .navbar-toggler { background: rgba(42, 31, 23,.96) !important; border-color: rgba(255, 138, 43,.28) !important; color:#f7e8db !important; }
html[data-theme="dark"] .portal-nav .nav-link { color:#d3c9c1 !important; }
html[data-theme="dark"] .portal-nav .nav-link:hover, html[data-theme="dark"] .portal-nav .nav-link.active { background:rgba(255, 138, 43,.13) !important; color:#e69f65 !important; }
@media (max-width: 991.98px) {
  .portal-nav { min-height: 68px !important; }
  .portal-nav > .container { min-height: 68px !important; }
  .portal-nav .navbar-collapse {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    z-index: 1050;
    padding: 12px;
    border: 1px solid rgba(248, 90, 0,.16);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 36px rgba(65, 35, 15,.14);
  }
  .portal-nav .navbar-collapse:not(.show) { display:none !important; }
  .portal-nav .navbar-collapse.show { display:block !important; }
  .portal-nav .navbar-nav { width:100%; gap:3px; margin:0 !important; }
  .portal-nav .navbar-nav .nav-link { width:100%; min-height:44px; padding:.65rem .8rem !important; }
  .portal-nav .navbar-collapse > .d-flex { width:100%; margin-top:10px; padding-top:10px; border-top:1px solid #f0ece8; gap:8px !important; }
  html[data-theme="dark"] .portal-nav .navbar-collapse { background:rgba(33, 23, 16,.98); border-color:rgba(255, 138, 43,.22); box-shadow:0 18px 36px rgba(0,0,0,.3); }
  html[data-theme="dark"] .portal-nav .navbar-collapse > .d-flex { border-top-color:rgba(255, 138, 43,.14); }
}
@media (max-width: 575.98px) {
  .portal-nav .navbar-brand .brand-mark { width:42px; height:42px; flex-basis:42px; border-radius:14px; font-size:20px; }
  .portal-nav .navbar-brand strong { font-size:16px; }
  .portal-nav .navbar-brand small { font-size:8px; }
  .portal-nav .navbar-toggler { width:44px; height:44px; border-radius:14px; font-size:23px; }
}

/* Header + footer final polish: dashboard card language. */
.portal-nav .dropdown-menu {
  min-width: 218px;
  max-width: calc(100vw - 24px);
  margin-top: 9px !important;
  padding: 8px;
  border: 1px solid rgba(248, 90, 0,.16) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 36px rgba(65, 35, 15,.16), inset 0 1px 0 #fff !important;
}
.portal-nav .dropdown-menu.show { animation: mx-dd-in .18s ease both; }
@keyframes mx-dd-in { from { opacity: 0; } }

/* v28.1 fix — profile/bell dropdown mobile mein nav panel ke andar full-width khulega
   (position static + !important Popper ke inline absolute/transform ko override karta hai
   — kabhi bhi screen se bahar nahi ja sakta). */
@media (max-width: 991.98px) {
  .portal-nav .navbar-collapse .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: calc(100vw - 48px);
    max-width: 360px;
    min-width: 0;
    margin: 8px 0 2px !important;
    box-shadow: none !important;
  }
}

.portal-nav .dropdown-menu .dropdown-header { padding: 8px 10px 6px; color:#e04e00; font-size:10px; font-weight:800; letter-spacing:.06em; }
.portal-nav .dropdown-menu .dropdown-item {
  display:flex;
  align-items:center;
  min-height:44px;
  margin:2px 0;
  padding:9px 10px;
  border-radius:11px;
  color:#524238;
  font-size:11px;
  font-weight:650;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.portal-nav .dropdown-menu .dropdown-item:hover,
.portal-nav .dropdown-menu .dropdown-item:focus,
.portal-nav .dropdown-menu .dropdown-item.is-new { background:#f7f0eb !important; color:#e04e00 !important; transform:translateX(2px); }
.portal-nav .dropdown-menu .dropdown-divider { margin:6px 4px; border-color:#efe9e4; }
html[data-theme="dark"] .portal-nav .dropdown-menu { background:#251b14 !important; border-color:rgba(255, 138, 43,.2) !important; box-shadow:0 18px 36px rgba(0,0,0,.32) !important; }
html[data-theme="dark"] .portal-nav .dropdown-menu .dropdown-item { color:#d9cec5; }
html[data-theme="dark"] .portal-nav .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .portal-nav .dropdown-menu .dropdown-item:focus,
html[data-theme="dark"] .portal-nav .dropdown-menu .dropdown-item.is-new { background:rgba(255, 138, 43,.13) !important; color:#e69f65 !important; }
html[data-theme="dark"] .portal-nav .dropdown-menu .dropdown-divider { border-color:rgba(255, 138, 43,.14); }
@media (max-width:991.98px) {
  .portal-nav .navbar-collapse {
    display:block !important;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-7px) scale(.985);
    transition:max-height .28s ease, opacity .2s ease, transform .28s ease, visibility .28s ease;
  }
  .portal-nav .navbar-collapse.show {
    max-height:900px;
    overflow:visible;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
}
.mx-mobilenav {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(248, 90, 0,.14) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 -10px 28px rgba(65, 35, 15,.11) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mx-mobilenav .row5 { display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:4px; max-width:620px; margin:0 auto; }
.mx-mobilenav a {
  position:relative;
  display:flex !important;
  min-width:44px;
  min-height:52px;
  padding:6px 3px !important;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  border-radius:14px;
  color:#71847b !important;
  text-decoration:none;
  font-size:9px;
  font-weight:750;
  line-height:1;
  transition:color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mx-mobilenav a i { display:block; width:22px; height:22px; font-size:20px !important; line-height:22px; text-align:center; }
.mx-mobilenav a:hover, .mx-mobilenav a:focus-visible { color:#e04e00 !important; background:#f7f0eb !important; transform:translateY(-2px); }
.mx-mobilenav a.center {
  min-height:58px;
  margin-top:-17px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:17px;
  background:linear-gradient(145deg,#b45719,#e04e00) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(224, 78, 0,.26), 0 0 0 5px rgba(255, 138, 43,.10), inset 0 1px 0 rgba(255,255,255,.32);
}
.mx-mobilenav a.center i { font-size:22px !important; }
.mx-mobilenav a.center:hover, .mx-mobilenav a.center:focus-visible { color:#fff !important; background:linear-gradient(145deg,#c96420,#e04e00) !important; transform:translateY(-3px); box-shadow:0 13px 25px rgba(224, 78, 0,.33), 0 0 0 6px rgba(255, 138, 43,.13); }
html[data-theme="dark"] .mx-mobilenav { background:rgba(25, 17, 12,.96) !important; border-top-color:rgba(255, 138, 43,.18) !important; box-shadow:0 -10px 28px rgba(0,0,0,.28) !important; }
html[data-theme="dark"] .mx-mobilenav a { color:#b1a59b !important; }
html[data-theme="dark"] .mx-mobilenav a:hover, html[data-theme="dark"] .mx-mobilenav a:focus-visible { color:#e69f65 !important; background:rgba(255, 138, 43,.12) !important; }
@media (max-width:380px) {
  .mx-mobilenav { padding-left:4px !important; padding-right:4px !important; }
  .mx-mobilenav .row5 { gap:1px; }
  .mx-mobilenav a { font-size:8px; }
  .mx-mobilenav a i { font-size:19px !important; }
}

/* Header compact controls + inline Mira AI support button. */
.ai-float-btn { display:none !important; }
.portal-nav .header-support-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:44px;
  min-height:40px;
  margin-left:auto;
  margin-right:8px;
  padding:7px 12px;
  border:1px solid rgba(248, 90, 0,.2);
  border-radius:11px;
  background:#f7f0eb;
  color:#e04e00 !important;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.portal-nav .header-support-btn i { font-size:16px; line-height:1; }
.portal-nav .header-support-btn:hover, .portal-nav .header-support-btn:focus-visible { background:#f85a00; color:#fff !important; transform:translateY(-1px); box-shadow:0 7px 14px rgba(248, 90, 0,.2); }
.portal-nav .navbar-toggler { margin-left:0 !important; width:42px !important; height:42px !important; border-radius:11px !important; font-size:22px !important; }
.portal-nav .nav-link { min-height:40px !important; padding:.45rem .62rem !important; border-radius:10px !important; font-size:11px !important; }
.portal-nav .dropdown-menu { border-radius:15px !important; padding:7px !important; }
.portal-nav .btn-topup {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:86px;
  min-height:40px !important;
  padding:8px 12px !important;
  border:1px solid #f85a00 !important;
  border-radius:10px !important;
  background:#f85a00 !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:0 6px 14px rgba(248, 90, 0,.18) !important;
  opacity:1 !important;
}
.portal-nav .btn-topup:hover, .portal-nav .btn-topup:focus-visible { background:#e04e00 !important; color:#fff !important; transform:translateY(-1px); box-shadow:0 9px 18px rgba(224, 78, 0,.25) !important; }
.portal-nav .wallet-chip { min-height:40px !important; padding:8px 11px !important; border-radius:10px !important; font-size:10px !important; }
@media (min-width:992px) {
  .portal-nav .navbar-toggler { display:none !important; }
  .portal-nav .header-support-btn { margin-left:12px; }
}
@media (max-width:991.98px) {
  .portal-nav .header-support-btn { margin-left:auto; margin-right:7px; }
  .portal-nav .header-support-btn span { display:none; }
  .portal-nav .header-support-btn { width:42px; padding:0; }
  .portal-nav .navbar-toggler { display:grid !important; }
}
html[data-theme="dark"] .portal-nav .header-support-btn { background:rgba(255, 138, 43,.13); border-color:rgba(255, 138, 43,.24); color:#e69f65 !important; }
html[data-theme="dark"] .portal-nav .btn-topup { background:#b45719 !important; border-color:#b45719 !important; color:#2b1506 !important; }

/* ===== SOURCE: auth-pages-v2.css ===== */
/* ==========================================================================
   Public auth pages v2 — compact, smart, website-matched
   Solid colors only; loaded after the public theme stack.
   ========================================================================== */
.auth-shell {
  min-height: 100vh !important; padding: 1.25rem !important; display: flex; align-items: stretch !important;
  background: #f8f6f4 !important; color: #211712;
}
.auth-split { width: min(1180px, 100%); min-height: calc(100vh - 2.5rem); margin: auto; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; border: 1px solid #e8e1dc; border-radius: 26px; background: #ffffff !important; box-shadow: 0 24px 70px rgba(11,23,32,.1); }
.auth-side {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 3.25rem; overflow: hidden;
  background: #f5efea !important; border-right: 1px solid #e5dad1;
}
.auth-side::before, .auth-side::after { content: ""; position: absolute; border: 1px solid rgba(248, 90, 0,.18); border-radius: 50%; pointer-events: none; }
.auth-side::before { width: 420px; height: 420px; right: -190px; top: -120px; }
.auth-side::after { width: 250px; height: 250px; left: -120px; bottom: -100px; }
.auth-side .side-shapes { display: none; }
.auth-side > div:last-child { position: relative !important; z-index: 1; max-width: 390px !important; }
.auth-side .eyebrow { display: inline-flex; padding: .4rem .65rem; border: 1px solid #e1cab8; border-radius: 999px; color: #e04e00; background: #ffffff !important; font-size: .63rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.auth-side h2 { margin-top: 1.15rem; color: #211712; font-size: clamp(2rem, 4vw, 3.35rem); line-height: .98; letter-spacing: -.075em; }
.auth-side .grad-text { background: none !important; color: #e04e00 !important; -webkit-text-fill-color: #e04e00 !important; }
.auth-side .lead { color: #5e7475 !important; font-size: .91rem; line-height: 1.55; }
.auth-side .small span { color: #625349 !important; }
.auth-side .small i { color: #f85a00 !important; }
.auth-form-col { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 2.4rem clamp(1.2rem, 4vw, 4.2rem); background: #ffffff !important; }
.auth-card { width: 100%; max-width: 430px; margin: 0 !important; padding: 1.75rem !important; border: 1px solid #e7e2dd !important; border-radius: 20px !important; background: #ffffff !important; box-shadow: 0 14px 36px rgba(11,23,32,.07) !important; }
.auth-card h1 { margin-bottom: .35rem !important; color: #211712; font-size: 1.65rem; letter-spacing: -.065em; }
.auth-card > p.text-secondary { color: #74848b !important; line-height: 1.45; }
.auth-card .form-label { color: #4f636b; font-size: .72rem; letter-spacing: .025em; }
.auth-card .form-control { min-height: 44px; padding: .62rem .75rem; border: 1px solid #e3ded9 !important; border-radius: 11px !important; background: #fbfaf9 !important; color: #211712; }
.auth-card .form-control:focus { background: #ffffff !important; border-color: #f85a00 !important; box-shadow: 0 0 0 3px rgba(248, 90, 0,.12) !important; }
.auth-card .btn-primary { min-height: 44px; border: 0 !important; border-radius: 11px !important; background: #f85a00 !important; color: #ffffff !important; font-weight: 800; }
.auth-card .btn-primary:hover { background: #e04e00 !important; }
.auth-card .btn-google { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 11px !important; background: #ffffff !important; border: 1px solid #e3ded9 !important; color: #26343b !important; font-weight: 700; }
.auth-card .btn-google:hover { background: #f9f5f2 !important; border-color: #d8bea9 !important; }
.auth-card a { color: #e04e00; font-weight: 700; }
.auth-card .alert { border: 1px solid #e1cab8; border-radius: 11px; background: #f5efea !important; color: #613c24; }
.hr-label { color: #8a989e; }
.hr-label::before, .hr-label::after { background: #f3e2d4 !important; }

@media (max-width: 900px) {
  .auth-shell { min-height: 100vh !important; padding: .85rem !important; }
  .auth-split { min-height: calc(100vh - 1.7rem); grid-template-columns: 1fr; border-radius: 20px; }
  .auth-side { display: none !important; }
  .auth-form-col { padding: 1rem; align-items: center; }
}
@media (max-width: 575.98px) {
  .auth-shell { padding: .55rem !important; align-items: stretch !important; }
  .auth-split { min-height: calc(100vh - 1.1rem); border-radius: 16px; }
  .auth-form-col { padding: .8rem .6rem; }
  .auth-card { max-width: 100%; padding: 1.15rem !important; border-radius: 16px !important; box-shadow: none !important; }
  .auth-card h1 { font-size: 1.45rem; }
  .auth-card .row.g-3 { --bs-gutter-y: .75rem; }
}

/* ===== SOURCE: splash-v3.css ===== */
/* v29 — clean single-phase brand flash: warm dark bg, logo mark + wordmark.
   Lightweight: sirf transform/opacity animations (GPU), koi loader/% nahi. */
#splashScreen {
  background:
    radial-gradient(640px 440px at 50% 36%, rgba(248, 90, 0,.17), transparent 68%),
    linear-gradient(180deg, #1d110a 0%, #150b06 100%);
  transition: opacity .45s ease, visibility .45s ease;
}
#splashScreen .splash-inner { display: grid; place-items: center; }
.sp3-mark { position: relative; width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: 22px; }
.sp3-logo {
  position: relative; z-index: 2; width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 19px; font-size: 30px; color: #fff;
  background: linear-gradient(140deg, #ff8a2b 0%, #f85a00 55%, #d84a00 100%);
  box-shadow: 0 18px 42px rgba(248, 90, 0,.42), inset 0 1.5px 0 rgba(255,255,255,.35);
  animation: sp3In .5s cubic-bezier(.2,.8,.3,1.08) both;
}
.sp3-ring {
  position: absolute; inset: 0; border-radius: 27px;
  border: 1.5px solid rgba(248, 90, 0,.55);
  animation: sp3Ring 1.6s cubic-bezier(.2,.6,.3,1) .25s infinite;
}
.sp3-brand {
  color: #fff7f0; font-family: var(--mx-font-head, "Sora", sans-serif);
  font-size: clamp(26px, 6.4vw, 38px); font-weight: 800; letter-spacing: -.045em;
  animation: sp3Up .55s ease .12s both;
}
.sp3-tag {
  margin-top: 8px; color: #c2a58f; font-size: 12px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  animation: sp3Up .55s ease .26s both;
}
@keyframes sp3In { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes sp3Up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sp3Ring { 0% { opacity: .85; transform: scale(.82); } 70%, 100% { opacity: 0; transform: scale(1.24); } }
@media (prefers-reduced-motion: reduce) {
  .sp3-logo, .sp3-brand, .sp3-tag { animation: none; }
  .sp3-ring { display: none; }
}

/* ============================================================
   v10.1 — Dashboard mobile overlap fix (Mirza X Labs)
   Fixed bottom-nav (mx-mobilenav, d-lg-none) dashboard ke
   aakhri card ko dhak leta tha — clearance padding.
   ============================================================ */
@media (max-width: 991.98px) {
  .mx-dashboard { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
}


/* ============================================================
   v24 — OUR SOFTWARES: sharp premium upgrade
   ============================================================ */
#softwares-section{position:relative}
#softwares-section::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 50% -60px,rgba(248,90,0,.08),transparent 70%),
             radial-gradient(rgba(33,23,18,.05) 1px,transparent 1.3px);
  background-size:auto,24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
#softwares-section>*{position:relative}

/* eyebrow chip + gradient headline */
#softwares-section .sw-eyebrow{display:inline-flex;align-items:center;gap:.5rem;border-radius:9px;
  border:1.5px solid rgba(248,90,0,.3)!important;background:#fff7f0!important;color:#e04e00!important;
  padding:.38rem .85rem;box-shadow:0 4px 14px -6px rgba(248,90,0,.35)}
#softwares-section .sw-eyebrow .dot{width:7px;height:7px;border-radius:2px;background:#f85a00;
  box-shadow:0 0 0 3px rgba(248,90,0,.18);animation:swxDot 1.8s ease-in-out infinite}
@keyframes swxDot{0%,100%{box-shadow:0 0 0 3px rgba(248,90,0,.18)}50%{box-shadow:0 0 0 6px rgba(248,90,0,.07)}}
#softwares-section .sw-headline .grad{background:linear-gradient(92deg,#f85a00,#ff8a2b 55%,#d84a00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f85a00}

/* card shell — sharp edges, full-bleed thumb */
#softwares-section .software-card{border:1.5px solid rgba(33,23,18,.1)!important;border-radius:18px!important;
  overflow:hidden;padding:0!important;background:#fff}
#softwares-section .software-card:hover{transform:translateY(-7px)!important;border-color:var(--accent)!important;
  box-shadow:0 34px 64px -28px rgba(248,90,0,.45),0 0 0 1px rgba(248,90,0,.2)!important}
#softwares-section .swx-bar{position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--accent),transparent 82%)}
#softwares-section .swx-own{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#f85a00,#d84a00);padding:.34rem .62rem;border-radius:7px 2px 7px 2px;
  box-shadow:0 6px 14px -6px rgba(248,90,0,.65)}

/* thumb — cut corner + big glowing icon */
#softwares-section .software-card .thumb{min-height:128px!important;position:relative;
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
#softwares-section .software-card .thumb .bi{font-size:2.5rem;color:var(--accent);
  filter:drop-shadow(0 12px 20px rgba(248,90,0,.35));transition:transform .35s cubic-bezier(.2,.7,.3,1)}
#softwares-section .software-card:hover .thumb .bi{transform:scale(1.14) rotate(-6deg)}
#softwares-section .software-card .thumb .tag{position:absolute;right:10px;bottom:10px;
  font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8a4a12;
  background:rgba(255,255,255,.94);border:1px solid rgba(248,90,0,.25);padding:.3rem .58rem;
  border-radius:7px 2px 7px 2px}

/* body + price foot */
#softwares-section .software-card .body{padding:1.05rem 1.15rem 1.2rem}
#softwares-section .software-card .body h5{font-size:1.06rem;letter-spacing:-.01em}
#softwares-section .swx-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:.8rem;flex-wrap:wrap}
#softwares-section .price-chip{display:inline-flex;align-items:center;gap:5px;padding:.34rem .72rem;
  border-radius:8px 3px 8px 3px;font-size:.68rem;font-weight:800;color:#9c4d0d;background:#fff2e6;
  border:1.5px solid rgba(248,90,0,.32)}
#softwares-section .detail-link{font-size:.72rem;font-weight:800;color:#e04e00;white-space:nowrap}
#softwares-section .detail-link i{font-size:.62rem;transition:transform .18s ease}
#softwares-section .software-card:hover .detail-link i{transform:translateX(4px)}

@media (max-width:575.98px){
  #softwares-section .software-card .thumb{min-height:112px!important}
  #softwares-section .software-card .thumb .bi{font-size:2.1rem}
}

/* ============================================================
   v26 — SOFTWARE PAGE sharp upgrade + CONTACT page + footer removed
   ============================================================ */

/* ---- software page: sharp hero tile (emoji → proper icon) ---- */
.swx-tile{width:78px;height:78px;border-radius:20px;display:grid;place-items:center;position:relative;
  background:linear-gradient(150deg,var(--accent,#f85a00),#d84a00);color:#fff;font-size:2.15rem;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  box-shadow:0 18px 36px -14px rgba(248,90,0,.5)}
.swx-tile .bi{filter:drop-shadow(0 6px 10px rgba(46,23,8,.35))}
.sw-hero{background:
  radial-gradient(800px 420px at 12% -12%,rgba(248,90,0,.16),transparent 60%),
  radial-gradient(rgba(33,23,18,.05) 1px,transparent 1.3px),
  linear-gradient(180deg,#fffaf5,#fff);
  background-size:auto,22px 22px,auto;
  border-bottom:2px solid rgba(248,90,0,.18)}
.sw-hero h1{letter-spacing:-.02em}
.sw-preview-card{border-radius:18px;border:1.5px solid rgba(248,90,0,.22);overflow:hidden;position:relative}
.sw-preview-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent,#f85a00),transparent 82%);z-index:1}

/* ---- software page: plans sharp ---- */
#plans .plan-card{border:1.5px solid rgba(33,23,18,.1);border-radius:18px;overflow:hidden;position:relative;padding-top:1.9rem;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
#plans .plan-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent,#f85a00),transparent 80%)}
#plans .plan-card.featured{border-color:rgba(248,90,0,.45)}
#plans .plan-card:hover{transform:translateY(-6px);border-color:rgba(248,90,0,.4);
  box-shadow:0 30px 56px -26px rgba(248,90,0,.4)}
#plans .plan-price{font-weight:800;letter-spacing:-.02em}

/* ---- software page: reviews polish ---- */
#reviews .review-item{border:1.5px solid rgba(33,23,18,.1);border-radius:16px;padding:1rem 1.1rem;background:#fff;transition:border-color .25s,box-shadow .25s}
#reviews .review-item:hover{border-color:rgba(248,90,0,.3);box-shadow:0 18px 40px -24px rgba(248,90,0,.35)}

/* ---- contact page ---- */
.ct-hero{padding:3.4rem 0 4.2rem;background:
  radial-gradient(700px 380px at 50% -80px,rgba(248,90,0,.09),transparent 65%),
  radial-gradient(rgba(33,23,18,.045) 1px,transparent 1.3px) 0 0/22px 22px}
.ct-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;
  background:#fff;border:1.5px solid rgba(33,23,18,.1);border-radius:18px;padding:1.6rem 1rem;
  text-decoration:none;color:var(--mx-ink,#211712);position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.ct-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#f85a00,transparent 85%)}
.ct-card:hover{transform:translateY(-6px);border-color:rgba(248,90,0,.4);
  box-shadow:0 28px 54px -26px rgba(248,90,0,.4);color:var(--mx-ink,#211712)}
.ct-card small{color:var(--mx-muted,#6f7a76)}
.ct-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.4rem;color:#fff;
  background:linear-gradient(150deg,#f85a00,#d84a00);margin-bottom:.4rem;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);
  box-shadow:0 14px 26px -10px rgba(248,90,0,.5)}
.ct-card.ct-wa .ct-ic{background:linear-gradient(150deg,#2bb742,#1a8f2f)}
.ct-chip{margin-top:.5rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#9c4d0d;background:#fff2e6;border:1.5px solid rgba(248,90,0,.3);padding:.28rem .6rem;border-radius:8px 3px 8px 3px}
.ct-form-card{background:#fff;border:1.5px solid rgba(33,23,18,.1);border-radius:18px;padding:1.5rem 1.4rem;
  position:relative;overflow:hidden;box-shadow:0 14px 34px -22px rgba(46,23,8,.25)}
.ct-form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#f85a00,transparent 85%)}
.ct-info-card{background:#fff;border:1.5px solid rgba(33,23,18,.1);border-radius:18px;padding:1.4rem 1.3rem;height:100%}
.ct-qa{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 0;border-bottom:1px dashed rgba(33,23,18,.12)}
.ct-qa:last-child{border-bottom:0}
.ct-qa b{font-size:.85rem}
.ct-qa small{color:var(--mx-muted,#6f7a76);font-size:.78rem}
/* v26 — softwares catalog: emoji → sharp bi-icon tiles */
.swx-cat{width:56px;height:56px;font-size:1.7rem;border-radius:16px;display:grid;place-items:center;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}

/* ============================================================
   v27 — REVIEWS page + scroll perf (content-visibility)
   ============================================================ */
.rv-hero{padding:3.2rem 0 4.2rem;background:
  radial-gradient(700px 380px at 50% -80px,rgba(248,90,0,.09),transparent 65%),
  radial-gradient(rgba(33,23,18,.045) 1px,transparent 1.3px) 0 0/22px 22px}
.rv-form-card{background:#fff;border:1.5px solid rgba(33,23,18,.1);border-radius:18px;padding:1.5rem 1.4rem;
  position:relative;overflow:hidden;box-shadow:0 14px 34px -22px rgba(46,23,8,.25)}
.rv-form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#f85a00,transparent 85%)}
.rv-hero .review-item{border:1.5px solid rgba(33,23,18,.1);border-radius:16px;padding:1rem 1.1rem;background:#fff;
  margin-bottom:.9rem;transition:border-color .25s,box-shadow .25s}
.rv-hero .review-item:hover{border-color:rgba(248,90,0,.3);box-shadow:0 18px 40px -24px rgba(248,90,0,.35)}

/* scroll perf — below-fold sections browser khud lazy-render karta hai (jank fix) */
.stats-band,.how-band,.cta-band,.faq-section,#faq,.blog-section,.compare-wrap,.marquee{
  content-visibility:auto;contain-intrinsic-size:auto 640px}