/* ===== animations.css ===== */
/* ============================================================
   GENIE FX ACADEMY — ANIMATIONS STYLESHEET
   Keyframes, Scroll Reveals, Micro-interactions
   ============================================================ */

/* ========================
   KEYFRAME DEFINITIONS
   ======================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSparkle {
  0%,100% { opacity: 0.15; transform: scale(1); }
  50%     { opacity: 0.7;  transform: scale(1.3); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(1deg); }
  66%       { transform: translateY(-4px) rotate(-1deg); }
}
@keyframes floatBubbleLeft {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50%       { transform: translateY(-8px) translateX(-4px); }
}
@keyframes floatBubbleRight {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50%       { transform: translateY(-10px) translateX(4px); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes chartDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(1, 129, 250, 0.2); }
  50%       { border-color: rgba(1, 129, 250, 0.5); }
}
/* Translate-only drift: scale() on a filter:blur() orb forces a full
   re-rasterization (re-blur) of a large layer every frame — the dominant GPU
   cost on the landing (pins the GPU on Windows). translate stays on the
   compositor thread, so the blurred texture is rendered once and just moved. */
@keyframes orb1 {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(40px, -30px); }
  66%       { transform: translate(-20px, 20px); }
}
@keyframes orb2 {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(-30px, 20px); }
  66%       { transform: translate(25px, -15px); }
}
@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--target-width); }
}

/* ========================
   SCROLL REVEAL CLASSES
   (applied via JS IntersectionObserver)
   ======================== */
.mkt .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.mkt .reveal.visible {
  opacity: 1;
  transform: none;
}
.mkt .reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.mkt .reveal-left.visible {
  opacity: 1;
  transform: none;
}
.mkt .reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.mkt .reveal-right.visible {
  opacity: 1;
  transform: none;
}
.mkt .reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.mkt .reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.mkt .delay-1 { transition-delay: 0.1s; }
.mkt .delay-2 { transition-delay: 0.2s; }
.mkt .delay-3 { transition-delay: 0.3s; }
.mkt .delay-4 { transition-delay: 0.4s; }
.mkt .delay-5 { transition-delay: 0.5s; }
.mkt .delay-6 { transition-delay: 0.6s; }

/* ========================
   HERO ENTRANCE ANIMATIONS
   ======================== */
.mkt .hero-badge { animation: fadeInDown 0.6s ease 0.1s both; }
.mkt .hero-title  { animation: fadeInUp   0.7s ease 0.2s both; }
.mkt .hero-body   { animation: fadeInUp   0.7s ease 0.35s both; }
.mkt .hero-cta    { animation: fadeInUp   0.7s ease 0.5s both; }
.mkt .hero-trust  { animation: fadeInUp   0.7s ease 0.65s both; }
.mkt .hero-phone  { animation: scaleIn    0.9s ease 0.3s both; }

/* ========================
   FLOATING ANIMATIONS
   ======================== */
.mkt .float-phone {
  animation: floatSlow 6s ease-in-out infinite;
}
.mkt .float-bubble-1 {
  animation: floatBubbleLeft 4s ease-in-out infinite;
}
.mkt .float-bubble-2 {
  animation: floatBubbleRight 5s ease-in-out infinite 0.5s;
}
.mkt .float-bubble-3 {
  animation: floatBubbleLeft 5.5s ease-in-out infinite 1s;
}

/* ========================
   ORB ANIMATIONS
   ======================== */
.mkt .orb-1 { animation: orb1 12s ease-in-out infinite; }
.mkt .orb-2 { animation: orb2 15s ease-in-out infinite 2s; }
.mkt .orb-3 { animation: orb1 18s ease-in-out infinite 4s; }

/* ========================
   GRADIENT ANIMATED BORDER
   ======================== */
.mkt .animated-border {
  animation: borderGlow 3s ease-in-out infinite;
}

/* ========================
   SHIMMER LOADING EFFECT
   ======================== */
.mkt .shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(1, 129, 250, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2.5s ease-in-out infinite;
}

/* ========================
   CHART SVG ANIMATION
   ======================== */
.mkt .chart-line-animated {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: chartDraw 2s ease forwards 0.5s;
}

/* ========================
   GLOW PULSE ON KEY ELEMENTS
   ======================== */
.mkt .glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ========================
   COUNTER NUMBER ANIMATION
   ======================== */
.mkt .counter-animate {
  animation: countUp 0.5s ease both;
}

/* ========================
   NAV TRANSITIONS
   ======================== */
.mkt .nav-link-underline {
  position: relative;
}
.mkt .nav-link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--clr-primary);
  border-radius: var(--r-full);
  transition: width var(--t-base);
}
.mkt .nav-link-underline:hover::after,
.mkt .nav-link-underline.active::after,
.mkt .nav-link-underline.nav-link-active::after { width: 100%; }

/* ========================
   BUTTON RIPPLE
   ======================== */
.mkt .btn {
  position: relative;
  overflow: hidden;
}
.mkt .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.mkt .btn:active::after { opacity: 1; }

/* ========================
   CARD HOVER GLOW
   ======================== */
.mkt .card-glow-hover {
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.mkt .card-glow-hover:hover {
  box-shadow: var(--shadow-glow);
  border-color: var(--border-primary);
}

/* ========================
   PROGRESS BARS (Education section)
   ======================== */
.mkt .progress-bar-wrap {
  height: 6px;
  background: var(--bg-card);
  border-radius: var(--r-full);
  overflow: hidden;
}
.mkt .progress-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mkt .progress-bar-fill.animated {
  width: var(--target-width, 70%);
}

/* ========================
   REDUCED MOTION SUPPORT
   ======================== */
@media (prefers-reduced-motion: reduce) {
  .mkt *,
  .mkt *::before,
  .mkt *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mkt .reveal, .mkt .reveal-left, .mkt .reveal-right, .mkt .reveal-scale {
    opacity: 1;
    transform: none;
  }
}


/* ===== components.css ===== */
.mkt .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(10, 10, 15, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.065);
  box-shadow: 0 4px 28px rgba(0,0,0,0.28);
  transition:
    transform var(--t-base),
    background var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    backdrop-filter var(--t-base),
    -webkit-backdrop-filter var(--t-base);
  will-change: transform;
}
.mkt .nav.nav--hidden {
  transform: translateY(-100%);
}
.mkt .nav.scrolled {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.mkt .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.mkt .nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mkt .nav-logo img {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1);
}
.mkt .nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.mkt .nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast);
  white-space: nowrap;
}
.mkt .nav-links a:hover,
.mkt .nav-links a.active {
  color: var(--text-primary);
}
.mkt .nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.mkt .lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  padding: 3px;
  cursor: pointer;
}
.mkt .lang-btn {
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
  cursor: pointer;
  background: none;
}
.mkt .lang-btn.active {
  background: var(--clr-primary);
  color: white;
}
.mkt[lang="ar"] .lang-btn.active {
  background: none;
  color: var(--text-muted);
}
.mkt[lang="ar"] .lang-btn[data-lang="ar"] {
  background: var(--clr-primary);
  color: white;
}

/* Mobile menu */
.mkt .nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--sp-2);
}
.mkt .nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base), background var(--t-base);
}
.mkt .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkt .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mkt .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mkt .nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-base);
  flex-direction: column;
  padding: var(--sp-8) var(--sp-6);
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  gap: var(--sp-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 999;
}
.mkt .nav-mobile.open { display: flex; }
.mkt .nav-mobile a {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: color var(--t-fast);
}
.mkt .nav-mobile a:hover { color: var(--text-primary); }
.mkt .nav-mobile a.active,
.mkt .nav-mobile a.nav-link-active {
  color: var(--clr-primary);
}
.mkt .nav-mobile .btn-ghost-primary { margin-top: var(--sp-6); text-align: center; }
.mkt .nav-mobile .btn-primary { text-align: center; }

@media (max-width: 900px) {
  .mkt .nav-links { display: none; }
  .mkt .nav-hamburger { display: flex; }
  .mkt .nav-right .btn-primary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt .nav {
    transition: none;
    will-change: auto;
  }
}





/* Homepage nav: smooth glass materialisation */
.mkt .home-page .nav {
  transition:
    transform               var(--t-base),
    background              0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color            0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow              0.5s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter         0.5s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================
   BUTTONS
   ======================== */
.mkt .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: 14px 28px;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  cursor: pointer;
  border: none;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}
.mkt .btn-primary {
  background: var(--clr-primary);
  color: white;
  box-shadow: 0 4px 20px rgba(1, 129, 250, 0.35);
}
.mkt .btn-primary:hover {
  background: var(--clr-primary-dark);
  box-shadow: 0 6px 30px rgba(1, 129, 250, 0.5);
  transform: translateY(-1px);
}
.mkt .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(1, 129, 250, 0.3);
}
.mkt .btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
}
.mkt .btn-secondary:hover {
  background: var(--bg-card);
  border-color: var(--border-primary);
  transform: translateY(-1px);
}
.mkt .btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.mkt .btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-card);
}
.mkt .btn-ghost-primary {
  background: transparent;
  color: var(--clr-primary);
  border: 1px solid rgba(1,129,250,0.5);
}
.mkt .btn-ghost-primary:hover {
  background: rgba(1,129,250,0.10);
  color: var(--clr-primary);
  border-color: rgba(1,129,250,0.65);
  box-shadow: 0 0 18px rgba(1,129,250,0.30);
  transform: translateY(-2px);
}
.mkt .btn-accent {
  background: var(--clr-accent);
  color: #0A1A00;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(192, 240, 0, 0.3);
}
.mkt .btn-accent:hover {
  background: #d4ff00;
  box-shadow: 0 6px 30px rgba(192, 240, 0, 0.45);
  transform: translateY(-1px);
}
.mkt .btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
  border-radius: var(--r-lg);
}
.mkt .btn-sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}
.mkt .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Shared premium SVG icon language for small UI labels and pills */
.mkt .has-ui-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.48em;
}
.mkt .ui-icon-svg {
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0.9;
  transition: color var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
.mkt .has-ui-icon:hover .ui-icon-svg,
.mkt .has-ui-icon:focus-visible .ui-icon-svg {
  color: var(--clr-primary);
  opacity: 1;
}
.mkt .ui-icon-label {
  min-width: 0;
}
.mkt .ui-icon-only {
  line-height: 1;
}
.mkt .ui-icon-only .ui-icon-svg {
  width: 1em;
  height: 1em;
}
.mkt .features-nav-pills .btn .ui-icon-svg {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.70);
}
.mkt .features-nav-pills .btn:hover .ui-icon-svg,
.mkt .features-nav-pills .btn:focus-visible .ui-icon-svg {
  color: var(--clr-primary);
}
.mkt .blog-cat-icon .ui-icon-svg {
  width: 15.5px;
  height: 15.5px;
  color: rgba(255, 255, 255, 0.70);
}
.mkt .blog-cat-btn:hover .blog-cat-icon .ui-icon-svg {
  color: var(--clr-primary);
}
.mkt .blog-cat-btn[aria-selected="true"] .blog-cat-icon .ui-icon-svg {
  color: #fff;
  opacity: 1;
}
.mkt .news-bullet-icon .ui-icon-svg,
.mkt .about-story-icon .ui-icon-svg,
.mkt .contact-community-icon .ui-icon-svg {
  width: 58%;
  height: 58%;
  color: var(--clr-primary);
}
.mkt .reg-check .ui-icon-svg,
.mkt .reg-valid-indicator .ui-icon-svg {
  width: 1em;
  height: 1em;
  color: var(--clr-accent);
}
.mkt .contact-form-status .ui-icon-svg {
  color: var(--clr-accent);
}
.mkt .reg-privacy.has-ui-icon {
  justify-content: center;
}
.mkt .reg-privacy .ui-icon-svg {
  color: var(--clr-accent);
}
.mkt .btn:focus-visible,
.mkt .lang-btn:focus-visible,
.mkt .nav-links a:focus-visible,
.mkt .nav-mobile a:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
}

/* ── CTA SEMANTIC CLASS SYSTEM ──────────────────────────────────────────────
   Approved hierarchy mapping — use alongside existing .btn modifier classes.
   Visual tokens are intentionally identical to existing .btn-* rules so
   these classes can also be used standalone.
   ────────────────────────────────────────────────────────────────────────── */

/* Level 1 — Download App (dominant ecosystem CTA) */
.mkt .cta-primary {
  background: var(--clr-primary);
  color: white;
  box-shadow: 0 4px 20px rgba(1, 129, 250, 0.35);
}
.mkt .cta-primary:hover {
  background: var(--clr-primary-dark);
  box-shadow: 0 6px 30px rgba(1, 129, 250, 0.5);
  transform: translateY(-1px);
  color: white;
  text-decoration: none;
}
.mkt .cta-primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(1, 129, 250, 0.3); }

/* Level 2 — Join Free (onboarding CTA — blue-bordered ghost) */
.mkt .cta-secondary {
  background: transparent;
  color: var(--clr-primary);
  border: 1px solid rgba(1, 129, 250, 0.5);
}
.mkt .cta-secondary:hover {
  background: rgba(1, 129, 250, 0.10);
  box-shadow: 0 0 18px rgba(1, 129, 250, 0.25);
  transform: translateY(-2px);
  color: var(--clr-primary);
  text-decoration: none;
}
.mkt .cta-secondary:active { transform: translateY(0); }

/* Level 4 — Explore / Learn More / Read Article / Continue Learning */
.mkt .cta-explore {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
}
.mkt .cta-explore:hover {
  background: var(--bg-card);
  border-color: var(--border-primary);
  transform: translateY(-1px);
  color: var(--text-primary);
  text-decoration: none;
}
.mkt .cta-explore:active { transform: translateY(0); }

/* Level 3 — Pricing plan CTAs — DO NOT apply generic normalization here.
   Each plan CTA is a psychology anchor and is styled per-plan in pricing2.html. */
.mkt .cta-plan {}

/* Level 5 — Platform selection (App Store / Google Play) */
.mkt .cta-platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--text-primary, #fff);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.mkt .cta-platform:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}
.mkt .cta-platform:active { transform: translateY(0); }
.mkt .cta-platform:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

/* ========================
   CARDS
   ======================== */
.mkt .card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.mkt .card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.mkt .card-feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid var(--border-card);
}
.mkt .card-feature:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.4),
    0 20px 60px rgba(1,129,250,0.12),
    0 4px 20px rgba(0,0,0,0.4);
}
.mkt .card-featured {
  border-color: rgba(1,129,250,0.3);
  background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(1,129,250,0.06) 100%);
  box-shadow: 0 0 40px rgba(1,129,250,0.08);
  transform: scale(1.02);
}
.mkt .card-featured:hover {
  transform: scale(1.02) translateY(-4px);
}

/* Pricing comparison table — Pro column highlight */
.mkt .pro-cell {
  color: var(--clr-primary);
  font-weight: 600;
  background: rgba(1,129,250,0.04);
  position: relative;
}
.mkt:not(.pricing-page) thead th:nth-child(3) {
  border-top: 2px solid var(--clr-primary);
  background: rgba(1,129,250,0.06);
}
.mkt .card-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary-08);
  border: 1px solid var(--border-primary);
  flex-shrink: 0;
}
.mkt .card-icon-wrap svg {
  width: 28px;
  height: 28px;
  stroke: var(--clr-primary);
}
.mkt .card-icon-wrap.accent {
  background: var(--clr-primary-08);
  border-color: var(--border-primary);
}
.mkt .card-icon-wrap.secondary {
  background: var(--clr-primary-08);
  border-color: var(--border-primary);
}
.mkt .card-icon-wrap.purple {
  background: var(--clr-primary-08);
  border-color: var(--border-primary);
}

/* Stat card */
.mkt .stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  gap: var(--sp-2);
}
.mkt .stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--clr-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}
.mkt .stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Pricing card */
.mkt .pricing-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-2xl);
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  position: relative;
  transition: background var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow);
}
.mkt .pricing-card.featured {
  border-color: var(--clr-primary);
  background: linear-gradient(180deg, rgba(1,129,250,0.08) 0%, var(--bg-elevated) 100%);
  box-shadow: var(--shadow-glow);
}
.mkt .pricing-card.featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-2xl);
  padding: 1px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}
.mkt .pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--clr-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--r-full);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.mkt .pricing-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mkt .pricing-price {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}
.mkt .pricing-amount {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.mkt .pricing-currency {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-secondary);
}
.mkt .pricing-period {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mkt .pricing-desc {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.mkt .pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.mkt .pricing-feature-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.mkt .pricing-feature-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--clr-primary);
}
.mkt .pricing-feature-item.included { color: var(--text-primary); }
.mkt .pricing-feature-item.excluded { opacity: 0.4; }
.mkt .pricing-feature-item.excluded svg { color: var(--text-muted); }

/* ========================
   PHONE MOCKUP
   ======================== */
.mkt .phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mkt .phone-mockup {
  width: 270px;
  height: 560px;
  background: #0E0E14;
  border-radius: 44px;
  border: 2px solid rgba(1, 129, 250, 0.3);
  box-shadow:
    0 0 0 8px rgba(1, 129, 250, 0.04),
    0 0 60px rgba(1, 129, 250, 0.2),
    0 30px 80px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.mkt .phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: #07070A;
  border-radius: 0 0 18px 18px;
  z-index: 10;
}
.mkt .phone-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mkt .phone-home-bar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: var(--r-full);
}

/* App UI inside phone */
.mkt .app-topbar {
  padding: 38px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mkt .app-topbar-title {
  font-size: 16px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}
.mkt .app-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
}
.mkt .app-balance-section {
  padding: 8px 18px 14px;
  text-align: center;
}
.mkt .app-balance-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mkt .app-balance-value {
  font-size: 32px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.mkt .app-balance-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-accent);
  background: rgba(192, 240, 0, 0.12);
  padding: 2px 8px;
  border-radius: 20px;
}
.mkt .app-chart-area {
  padding: 6px 18px;
  height: 120px;
  position: relative;
}
.mkt .app-chart-svg {
  width: 100%;
  height: 100%;
}
.mkt .app-mini-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px 18px;
}
.mkt .app-mini-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 12px;
}
.mkt .app-mini-card-label {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.mkt .app-mini-card-value {
  font-size: 14px;
  font-weight: 700;
  color: white;
}
.mkt .app-mini-card-change {
  font-size: 10px;
  font-weight: 600;
  color: var(--clr-accent);
  margin-top: 2px;
}
.mkt .app-mini-card-change.neg { color: #FF5C5C; }
.mkt .app-bottom-nav {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #0E0E14;
}
.mkt .app-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.mkt .app-nav-item.active { opacity: 1; }
.mkt .app-nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt .app-nav-dot {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}
.mkt .app-nav-dot-home { background: var(--clr-primary); }
.mkt .app-nav-dot-learn { background: rgba(255,255,255,0.2); }
.mkt .app-nav-dot-ai { background: rgba(255,255,255,0.2); }
.mkt .app-nav-dot-comm { background: rgba(255,255,255,0.2); }
.mkt .app-nav-label {
  font-size: 9px;
  font-weight: 600;
  color: white;
}

/* Floating bubbles around phone */
.mkt .phone-bubble {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  backdrop-filter: blur(10px);
}
.mkt .phone-bubble-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--clr-primary-08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.mkt .phone-bubble-text-label {
  font-size: 11px;
  color: var(--text-muted);
}
.mkt .phone-bubble-text-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ========================
   STEP CARDS (How it Works)
   ======================== */
.mkt .step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  position: relative;
}
.mkt .step-number {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--clr-primary-08);
  border: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--clr-primary);
  flex-shrink: 0;
}
.mkt .step-connector {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--border-primary), transparent);
  display: flex;
  align-items: center;
}

/* ========================
   TESTIMONIAL CARD
   ======================== */
.mkt .testimonial-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.mkt .testimonial-stars {
  display: flex;
  gap: 4px;
}
.mkt .testimonial-star {
  color: #FFB800;
  font-size: 14px;
}
.mkt .testimonial-text {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
  font-style: italic;
}
.mkt .testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.mkt .testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  flex-shrink: 0;
}
.mkt .testimonial-name {
  font-weight: 600;
  font-size: 0.9375rem;
}
.mkt .testimonial-role {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ========================
   CTA BANNER
   ======================== */
.mkt .cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-2xl);
  padding: var(--sp-16) var(--sp-12);
  min-height: 280px;
  display: flex;
  align-items: center;
  text-align: left;
}
.mkt .cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 15% 100%, rgba(1,129,250,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 85% 10%,  rgba(70,100,255,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 75% 90%,  rgba(1,129,250,0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Left column: text content — capped so phone has room */
.mkt .cta-banner-content {
  position: relative;
  z-index: 2;
  max-width: 56%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

/* Phone mockup — absolutely placed inside banner, overflows bottom/right */
.mkt .cta-banner-mockup {
  position: absolute;
  right: -28px;
  bottom: -44px;
  width: 420px;
  z-index: 1;
  pointer-events: none;
}
.mkt .cta-banner-mockup img {
  width: 100%;
  height: auto;
  display: block;
  filter:
    drop-shadow(-14px 0 44px rgba(1, 129, 250, 0.28))
    drop-shadow(0 -8px 24px rgba(1, 129, 250, 0.14));
}

/* CTA buttons left-aligned */
.mkt .cta-banner-content .cta-buttons { justify-content: flex-start; }

/* RTL: phone stays on the RIGHT (same as LTR), content forced to physical LEFT */
.mkt [dir="rtl"] .cta-banner         { text-align: right; }
.mkt [dir="rtl"] .cta-banner-content {
  align-items: flex-end;   /* right-align text/buttons within the content box */
  margin-right: auto;      /* in RTL flex row, this pushes content to physical LEFT */
}
/* phone mockup: no position override — stays at right:-28px bottom:-44px like English */
.mkt [dir="rtl"] .cta-banner-content .cta-buttons { justify-content: flex-end !important; }

/* Mobile: hide phone, full-width centered text */
@media (max-width: 768px) {
  .mkt .cta-banner         { min-height: auto; justify-content: center; text-align: center; }
  .mkt .cta-banner-content { max-width: 100%; align-items: center; }
  .mkt .cta-banner-mockup  { display: none; }
  .mkt .cta-banner-content .cta-buttons { justify-content: center; }
  .mkt [dir="rtl"] .cta-banner-content  { margin-right: 0; align-items: center; }
}

.mkt .cta-buttons {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.mkt .home-page .hero-cta,
.mkt .home-page .cta-buttons {
  max-width: 100%;
}

.mkt [dir="rtl"] .home-page .hero-cta .btn,
.mkt [dir="rtl"] .home-page .cta-buttons .btn,
.mkt [dir="rtl"] .hero-cta .btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ========================
   FOOTER
   ======================== */
.mkt .footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-8);
}
.mkt .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
}
.mkt .footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-top: var(--sp-4);
  max-width: 280px;
}
.mkt .footer-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1);
}
.mkt .footer-col h4 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}
.mkt .footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.mkt .footer-col ul li a {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  transition: color var(--t-fast);
}
.mkt .footer-col ul li a:hover { color: var(--text-primary); }
.mkt .footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.mkt .footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  color: var(--text-secondary);
}
.mkt .footer-social-link:hover {
  border-color: var(--border-primary);
  color: var(--clr-primary);
  background: var(--clr-primary-08);
}
.mkt .footer-social-link svg { width: 18px; height: 18px; }
.mkt .footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.mkt .footer-bottom p {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.mkt .footer-bottom-links {
  display: flex;
  gap: var(--sp-6);
}
.mkt .footer-bottom-links a {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color var(--t-fast);
}
.mkt .footer-bottom-links a:hover { color: var(--text-secondary); }

@media (max-width: 900px) {
  .mkt .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
@media (max-width: 640px) {
  .mkt .footer-grid { grid-template-columns: 1fr; }
  .mkt .footer-bottom { flex-direction: column; align-items: flex-start; }
  .mkt .cta-banner { padding: var(--sp-10) var(--sp-6); }
}

/* ========================
   FORM
   ======================== */
.mkt .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.mkt .form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.mkt .form-input,
.mkt .form-textarea,
.mkt .form-select {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  -webkit-appearance: none;
}
.mkt .form-input::placeholder,
.mkt .form-textarea::placeholder {
  color: var(--text-muted);
}
.mkt .form-input:focus,
.mkt .form-textarea:focus,
.mkt .form-select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(1, 129, 250, 0.15);
}
.mkt .form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

/* ========================
   PAGE HERO (inner pages)
   ======================== */
.mkt .page-hero {
  padding-top: 80px;
  padding-bottom: 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mkt .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(1,129,250,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.mkt .page-hero > :not(.glow-orb) { position: relative; z-index: 1; }

/* ========================
   FEATURE DETAIL SECTION
   ======================== */
.mkt .feature-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.mkt .feature-detail.reverse { direction: rtl; }
.mkt .feature-detail.reverse > * { direction: ltr; }
.mkt [dir="rtl"] .feature-detail.reverse { direction: ltr; }
.mkt [dir="rtl"] .feature-detail.reverse > * { direction: rtl; }
.mkt .feature-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.mkt .feature-benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.mkt .feature-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.mkt .feature-benefit-item::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--clr-primary-08);
  border: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230181FA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}
.mkt .feature-visual {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mkt .feature-visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
}

@media (max-width: 900px) {
  .mkt .feature-detail, .mkt .feature-detail.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .mkt .feature-visual { aspect-ratio: 16/9; }
}

/* ========================
   PRICING TOGGLE
   ======================== */
.mkt .pricing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}
.mkt .pricing-toggle-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast);
}
.mkt .pricing-toggle-label.active { color: var(--text-primary); }
.mkt .toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}
.mkt .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.mkt .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--r-full);
  transition: background var(--t-base);
}
.mkt .toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-muted);
  border-radius: 50%;
  transition: background var(--t-base), transform var(--t-base);
}
.mkt .toggle-switch input:checked + .toggle-slider {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.mkt .toggle-switch input:checked + .toggle-slider::before {
  transform: translateY(-50%) translateX(24px);
  background: white;
}
.mkt .toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
}
.mkt .pricing-save-badge {
  background: var(--clr-accent-20);
  color: var(--clr-accent);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
}

/* ========================
   TRUST / LOGO STRIP
   ======================== */
.mkt .trust-strip {
  padding-block: var(--sp-10);
  border-block: 1px solid var(--border-subtle);
}
.mkt .trust-strip-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mkt .trust-strip-inner::-webkit-scrollbar { display: none; }
.mkt .trust-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================
   FAQ ACCORDION
   ======================== */
.mkt .faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.mkt .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: start;
  cursor: pointer;
  transition: color var(--t-fast);
  background: none;
  border: none;
  font-family: inherit;
}
.mkt .faq-question:hover { color: var(--clr-primary); }
.mkt .faq-question:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
}
.mkt [dir="rtl"] .faq-question,
.mkt [dir="rtl"] .faq-answer-inner {
  text-align: right;
}
.mkt .faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base);
  color: var(--text-secondary);
}
.mkt .faq-item.open .faq-icon {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: white;
  transform: rotate(45deg);
}
.mkt .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.mkt .faq-answer-inner {
  padding-bottom: var(--sp-5);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.mkt .faq-item.open .faq-answer {
  max-height: 300px;
}

/* ========================
   FOOTER POLISH
   ======================== */
.mkt .footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 72px;
}

/* Footer trust line */
.mkt .footer-trust-line {
  text-align: center;
  padding-bottom: var(--sp-8);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Explore All Platforms pill button */
.mkt .footer-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: 8px 16px;
  border: 1px solid var(--border-primary);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: var(--clr-primary-08);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}
.mkt .footer-explore-btn:hover {
  background: var(--clr-primary-15);
  border-color: var(--clr-primary);
  transform: translateY(-1px);
}

/* Footer download CTA bar */
.mkt .footer-download-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-8);
  margin-block: var(--sp-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-xl);
}
.mkt .footer-download-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mkt .footer-download-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}
.mkt .footer-download-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .mkt .footer-download-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-5);
  }
  .mkt .footer-download-bar .btn { width: 100%; justify-content: center; }
}
.mkt .footer-social-link {
  transition: color 0.2s ease, transform 0.2s ease;
}
.mkt .footer-social-link:hover {
  color: var(--clr-primary);
  transform: translateY(-2px);
}
.mkt .footer-col a {
  transition: color 0.2s ease;
}
.mkt .footer-col a:hover {
  color: var(--clr-primary);
}
.mkt .footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ============================================================
   GENIE CHART — TWO-COLUMN SPLIT SECTION (gc-*)
   ============================================================ */

.mkt .gc-section {
  position: relative;
  padding-block: var(--sp-16);
  background: var(--bg-base);
  overflow: hidden;
}

/* Full-section atmosphere glow — lives behind everything */
.mkt .gc-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 50%, rgba(1,129,250,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 20% 60%, rgba(0,212,255,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Two-column grid: copy left — device right */
.mkt .gc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: var(--sp-16);
}

/* ── Copy column ── */
.mkt .gc-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 620px;
}

.mkt .gc-copy .section-badge {
  width: fit-content;
}

.mkt .gc-copy .text-h2 {
  margin: 0;
  font-size: 3.35rem;
  line-height: 1.06;
  letter-spacing: 0;
}

.mkt .gc-subtitle {
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75;
}

/* Benefit list */
.mkt .gc-benefits {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 620px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 60px rgba(0, 0, 0, 0.32);
}

.mkt .gc-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  color: var(--text-secondary);
}

.mkt .gc-benefit-item + .gc-benefit-item {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mkt .gc-benefit-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(1,129,250,0.14);
  border: 1px solid rgba(1,129,250,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mkt .gc-benefit-icon svg {
  display: block;
}

.mkt .gc-benefit-copy {
  min-width: 0;
}

.mkt .gc-benefit-copy .text-h4 {
  margin: 0 0 var(--sp-2);
  color: var(--text-primary);
  font-size: 1.03rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.mkt .gc-benefit-copy .text-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.65;
}

/* ── Device column ── */
.mkt .gc-device {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Radial glow behind the device — fixed px so it spreads wide */
.mkt .gc-device-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(1,129,250,0.22) 0%,
    rgba(0,212,255,0.06) 45%,
    transparent 70%);
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 6s ease-in-out infinite;
}

.mkt .gc-device-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  border-radius: 20px;
  border: 1px solid rgba(1,129,250,0.20);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.08),
    0 8px 32px rgba(1,129,250,0.16),
    0 32px 80px rgba(0,0,0,0.72);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mkt .gc-device-img--chart-phone {
  max-width: 380px;
}

.mkt .gc-device-img:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.14),
    0 14px 42px rgba(1,129,250,0.22),
    0 42px 90px rgba(0,0,0,0.75);
}

/* ── RTL: flip columns so copy is on right, device on left ── */
.mkt [dir="rtl"] .gc-grid {
  direction: rtl;
}

.mkt [dir="rtl"] .gc-subtitle {
  margin-inline-start: 0;
}

@media (min-width: 961px) {
  .mkt [dir="rtl"] .gc-device {
    margin-left: -60px;
    margin-right: 60px;
  }
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .mkt .gc-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    text-align: center;
  }

  .mkt .gc-copy {
    align-items: center;
    max-width: none;
  }

  .mkt .gc-copy .text-h2 {
    font-size: 2.65rem;
  }

  .mkt .gc-subtitle {
    max-width: 520px;
    text-align: center;
    font-size: 1.0625rem;
  }

  .mkt .gc-benefits {
    align-items: stretch;
    max-width: 560px;
    margin-inline: auto;
    text-align: start;
  }

  .mkt .gc-device {
    order: -1; /* device appears above copy on mobile */
  }

  .mkt .gc-device-img {
    max-width: 280px;
  }

  .mkt .gc-device-img--chart-phone {
    max-width: 340px;
  }

  .mkt .gc-device-glow {
    width: 400px;
    height: 400px;
  }

  .mkt [dir="rtl"] .gc-benefits {
    text-align: right;
  }
}

@media (max-width: 480px) {
  .mkt .gc-section {
    padding-block: var(--sp-12);
  }

  .mkt .gc-copy .text-h2 {
    font-size: 2.2rem;
  }

  .mkt .gc-benefits {
    padding: var(--sp-4);
  }

  .mkt .gc-benefit-icon {
    width: 36px;
    height: 36px;
  }

  .mkt .gc-device-img {
    max-width: 240px;
  }

  .mkt .gc-device-img--chart-phone {
    max-width: min(310px, 86vw);
  }
}


/* ============================================================
   FEATURES CARD GRID — FLAGSHIP + SECONDARY ROW
   ============================================================ */

.mkt .features-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* Flagship card */
.mkt .card-flagship {
  padding: var(--sp-8) var(--sp-10);
  min-height: 430px;
  overflow: visible;
}

.mkt .card-flagship-inner {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
  height: 100%;
}

.mkt .card-flagship-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 350px;
  max-width: 460px;
  min-width: 0;
}

.mkt .card-flagship-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(1, 129, 250, 0.12);
  border: 1px solid rgba(1, 129, 250, 0.25);
  border-radius: 100px;
  padding: 4px 12px;
  width: fit-content;
}

.mkt .card-flagship-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-primary);
  text-decoration: none;
  margin-top: var(--sp-2);
  transition: gap 0.2s ease, opacity 0.2s ease;
}
.mkt .card-flagship-link:hover {
  gap: 12px;
  opacity: 0.85;
}

.mkt .card-flagship-visual {
  position: relative;
  flex: 0 1 clamp(500px, 50vw, 680px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: clamp(500px, 50vw, 680px);
  margin-block: -40px -30px;
  margin-inline-end: -34px;
  overflow: visible;
}

.mkt .card-flagship-glow {
  position: absolute;
  width: 108%;
  height: 118%;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center, rgba(1, 129, 250, 0.16) 0%, rgba(1, 129, 250, 0.07) 36%, transparent 70%);
  filter: blur(46px);
  pointer-events: none;
  z-index: 0;
}

/* Product screenshot wrapper — block context keeps width scaling predictable */
.mkt .card-flagship-visual picture {
  display: block;
  width: 100%;
  max-width: 680px;
  line-height: 0;
}

.mkt .card-flagship-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: 680px;
  object-fit: contain;
  object-position: center center;
  filter:
    drop-shadow(0 30px 54px rgba(0, 0, 0, 0.46))
    drop-shadow(0 12px 28px rgba(1, 129, 250, 0.16));
  /* Never mirror in RTL — trading charts always read left-to-right */
  transform: none !important;
  transform-origin: center center;
  direction: ltr;
  user-select: none;
  pointer-events: none;
}

/* Secondary row */
.mkt .cards-secondary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.mkt .cards-secondary-row .card-feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Responsive */
@media (max-width: 900px) {
  .mkt .card-flagship {
    min-height: auto;
    overflow: hidden;
  }
  .mkt .card-flagship-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
  }
  .mkt .card-flagship-visual {
    width: 100%;
    max-width: 500px;
    flex-basis: auto;
    margin-block: 0 -14px;
    margin-inline-end: 0;
    align-self: center;
  }
  .mkt .card-flagship-img {
    max-width: 500px;
    filter:
      drop-shadow(0 22px 38px rgba(0, 0, 0, 0.44))
      drop-shadow(0 8px 18px rgba(1, 129, 250, 0.14));
  }
  .mkt .cards-secondary-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mkt .card-flagship {
    padding: var(--sp-6);
  }
  .mkt .card-flagship-inner {
    gap: var(--sp-5);
  }
  .mkt .card-flagship-visual {
    max-width: min(360px, 100%);
    margin-bottom: -8px;
  }
  .mkt .card-flagship-img {
    max-width: min(360px, 100%);
  }
}


/* ============================================================
   STORY / VISION SECTION
   ============================================================ */

.mkt .story-section {
  position: relative;
  padding-block: 6rem;
  overflow: hidden;
}

.mkt .story-bg-glow {
  position: absolute;
  width: 70%;
  height: 80%;
  top: 10%;
  left: 15%;
  background: radial-gradient(ellipse at center, rgba(1, 129, 250, 0.07) 0%, rgba(0, 212, 255, 0.03) 45%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
  z-index: 0;
}

.mkt .story-headline-block {
  margin-bottom: 3.5rem;
}
.mkt .story-headline-block .section-badge {
  margin-inline: auto;
  margin-bottom: var(--sp-4);
}
.mkt .story-headline-block .text-h2 {
  margin-bottom: var(--sp-4);
}
.mkt .story-subline {
  margin-top: 0;
}

/* Video wrap */
.mkt .story-video-wrap {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}

.mkt .story-video-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 50% 60%, rgba(1, 129, 250, 0.22) 0%, transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* Frame: the cinematic inline video container */
.mkt .story-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(1, 129, 250, 0.2);
  box-shadow:
    0 0 0 1px rgba(1, 129, 250, 0.08),
    0 8px 32px rgba(1, 129, 250, 0.12),
    0 40px 100px rgba(0, 0, 0, 0.65);
  background: #000;
  z-index: 1;
}

/* Video fills frame — contain preserves full frame, no cropping */
.mkt .story-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Overlay: shown before play, hidden after.
   Genie mascot is the cinematic cover — layered under a dark gradient
   so the play button and label remain clearly readable.               */
.mkt .story-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background:
    linear-gradient(rgba(7,7,10,0.42) 0%, rgba(7,7,10,0.62) 100%),
    url('../images/story-poster.png') center / contain no-repeat,
    var(--bg-base);
  z-index: 2;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.mkt .story-video-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.mkt .story-play-btn {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(1, 129, 250, 0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
  flex-shrink: 0;
}
.mkt .story-play-btn:hover {
  transform: scale(1.1);
  background: var(--clr-primary);
}
.mkt .story-play-btn svg {
  margin-inline-start: 4px;
}

.mkt .story-play-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(1, 129, 250, 0.45);
  animation: playRingPulse 2.5s ease-in-out infinite;
}

@keyframes playRingPulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.18); opacity: 0.15; }
}

.mkt .story-video-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* Story points */
.mkt .story-points {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 860px;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}

.mkt .story-point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  flex: 1;
  padding-inline: var(--sp-6);
}
.mkt .story-point:first-child { padding-left: 0; }
.mkt .story-point:last-child  { padding-right: 0; }

.mkt .story-point-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-subtle);
  flex-shrink: 0;
  margin-block: var(--sp-2);
}

/* Video Modal */
.mkt .story-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mkt .story-modal.open {
  opacity: 1;
  pointer-events: all;
}

.mkt .story-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 10, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.mkt .story-modal-inner {
  position: relative;
  width: 100%;
  max-width: 860px;
  z-index: 1;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mkt .story-modal.open .story-modal-inner {
  transform: translateY(0) scale(1);
}

.mkt .story-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s ease, background 0.2s ease;
}
.mkt .story-modal-close:hover {
  color: white;
  background: var(--bg-elevated);
}

/* Responsive */
@media (max-width: 768px) {
  .mkt .story-section {
    padding-block: 4rem;
  }
  .mkt .story-points {
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-6);
  }
  .mkt .story-point {
    padding-inline: 0;
  }
  .mkt .story-point-divider {
    width: 100%;
    height: 1px;
    margin-block: 0;
    align-self: auto;
  }
  .mkt .story-modal-close {
    top: -12px;
    right: -8px;
  }
}

@media (max-width: 480px) {
  .mkt .story-play-btn {
    width: 58px;
    height: 58px;
  }
  .mkt .story-headline-block {
    margin-bottom: var(--sp-8);
  }
}

/* ============================================================
   TRACK YOUR GROWTH — DASHBOARD STATS SECTION
   ============================================================ */
.mkt .tg-section {
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}

/* Subtle atmospheric glow behind the cards */
.mkt .tg-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 80% 50%, rgba(1,129,250,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(70,100,255,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.mkt .tg-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Left: text content */
.mkt .tg-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Right: 2x2 stats card grid */
.mkt .tg-cards {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mkt .tg-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  width: 100%;
  max-width: 480px;
}

/* Each card image */
.mkt .tg-card {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-xl);
  transition: transform var(--t-base), filter var(--t-base);
  filter:
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.mkt .tg-card:hover {
  transform: translateY(-5px) scale(1.02);
  filter:
    drop-shadow(0 16px 36px rgba(1, 129, 250, 0.25))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* Stagger even-column cards down for a floating mosaic feel */
.mkt .tg-cards-grid .tg-card:nth-child(even) {
  margin-top: var(--sp-6);
}

/* Each card gets a subtle reveal delay */
.mkt .tg-card:nth-child(1) { animation-delay: 0s; }
.mkt .tg-card:nth-child(2) { animation-delay: 0.1s; }
.mkt .tg-card:nth-child(3) { animation-delay: 0.2s; }
.mkt .tg-card:nth-child(4) { animation-delay: 0.3s; }

/* RTL: grid and text direction stay consistent */
.mkt [dir="rtl"] .tg-layout   { direction: rtl; }
.mkt [dir="rtl"] .tg-content  { direction: rtl; align-items: flex-start; text-align: right; }
.mkt [dir="rtl"] .tg-content .feature-benefit-list { align-items: flex-start; }
.mkt [dir="rtl"] .tg-content .feature-benefit-item { text-align: right; }

/* Mobile */
@media (max-width: 900px) {
  .mkt .tg-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .mkt .tg-cards { order: -1; }          /* cards on top, text below on mobile */
  .mkt .tg-cards-grid { max-width: 360px; margin-inline: auto; }
  .mkt .tg-cards-grid .tg-card:nth-child(even) { margin-top: var(--sp-4); }
  .mkt [dir="rtl"] .tg-content { align-items: center; }
}
@media (max-width: 480px) {
  .mkt .tg-cards-grid { max-width: 300px; gap: var(--sp-3); }
}

/* ============================================================
   DOWNLOAD MODAL / BOTTOM SHEET
   Desktop: centered glass dialog  |  Mobile ≤640px: bottom sheet
   ============================================================ */
.mkt .download-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.mkt .download-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop */
.mkt .dm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Glass panel */
.mkt .dm-sheet {
  position: relative;
  z-index: 1;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  width: min(420px, calc(100vw - 2rem));
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.22s ease;
}
.mkt .download-modal.is-open .dm-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Close button */
.mkt .dm-close {
  position: absolute;
  top: 0.875rem;
  inset-inline-end: 0.875rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  transition: background var(--t-base, 0.2s), color var(--t-base, 0.2s);
}
.mkt .dm-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.mkt .dm-close:focus-visible { outline: 2px solid var(--clr-primary, #3b82f6); outline-offset: 2px; }

/* Content */
.mkt .dm-logo { margin-bottom: 1.25rem; }

.mkt .dm-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.mkt .dm-sub {
  font-size: 0.875rem;
  color: var(--text-secondary, #9ca3af);
  margin: 0 0 1.75rem;
  line-height: 1.5;
}

/* Platform buttons */
.mkt .dm-platforms {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.mkt .dm-platform-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--text-primary, #fff);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  min-width: 120px;
}
.mkt .dm-platform-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}
.mkt .dm-platform-btn:active { transform: translateY(0); }
.mkt .dm-platform-btn:focus-visible {
  outline: 2px solid var(--clr-primary, #3b82f6);
  outline-offset: 2px;
}

/* Prevent body scroll when modal is open */
.mkt.dm-open { overflow: hidden; }

/* ── Mobile: bottom sheet ─────────────────────────────────── */
@media (max-width: 640px) {
  .mkt .download-modal { align-items: flex-end; }

  .mkt .dm-sheet {
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 2rem 1.5rem 2.5rem;
    transform: translateY(100%);
    opacity: 1;
  }
  .mkt .download-modal.is-open .dm-sheet { transform: translateY(0); }

  .mkt .dm-platforms { flex-direction: column; gap: 0.625rem; }
  .mkt .dm-platform-btn { min-width: unset; }
}


/* ===== main.css ===== */
/* ============================================================
   GENIE FX ACADEMY — MAIN STYLESHEET
   Design Tokens, Typography, Reset, Utilities
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../english font/SF-Pro-Display-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../english font/SF-Pro-Display-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../english font/SF-Pro-Display-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../english font/SF-Pro-Display-Semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../english font/SF-Pro-Display-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../english font/SF-Pro-Display-Heavy.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../english font/SF-Pro-Display-Black.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Almarai';
  src: url('../arabic font/Almarai-Light.woff2') format('woff2'), url('../arabic font/Almarai-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Almarai';
  src: url('../arabic font/Almarai-Regular.woff2') format('woff2'), url('../arabic font/Almarai-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Almarai';
  src: url('../arabic font/Almarai-Bold.woff2') format('woff2'), url('../arabic font/Almarai-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Almarai';
  src: url('../arabic font/Almarai-ExtraBold.woff2') format('woff2'), url('../arabic font/Almarai-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- DESIGN TOKENS ---------- */
.mkt {
  /* Brand Colors */
  --clr-primary:       #0181FA;
  --clr-primary-dark:  #0166CC;
  --clr-secondary:     #4664FF;
  --clr-accent:        #C0F000;
  --clr-light-blue:    #B9E4FF;

  /* Opacity variants */
  --clr-primary-60:    rgba(1, 129, 250, 0.6);
  --clr-primary-30:    rgba(1, 129, 250, 0.3);
  --clr-primary-15:    rgba(1, 129, 250, 0.15);
  --clr-primary-08:    rgba(1, 129, 250, 0.08);
  --clr-accent-20:     rgba(192, 240, 0, 0.2);

  /* Backgrounds — dark theme */
  --bg-base:           #07070A;
  --bg-surface:        #0E0E12;
  --bg-elevated:       #141418;
  --bg-card:           #1A1A20;
  --bg-card-hover:     #1F1F26;

  /* Text */
  --text-primary:      #F7FAFF;
  --text-secondary:    #B8BED0;
  --text-muted:        #838AA0;
  --text-accent:       #0181FA;

  /* Borders */
  --border-subtle:     rgba(255, 255, 255, 0.06);
  --border-card:       rgba(255, 255, 255, 0.08);
  --border-primary:    rgba(1, 129, 250, 0.25);
  --border-accent:     rgba(192, 240, 0, 0.35);

  /* Typography */
  --font-en:           'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar:           'Almarai', 'Segoe UI', sans-serif;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Border Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Transitions */
  --t-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   0.4s  cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm:   0 2px 8px  rgba(0,0,0,0.3);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 40px   rgba(1, 129, 250, 0.25);
  --shadow-glow-lg: 0 0 80px rgba(1, 129, 250, 0.3);

  /* Layout */
  --max-width: 1200px;
  --nav-height: 72px;
}

/* ---------- RESET ---------- */
.mkt *, .mkt *::before, .mkt *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.mkt {
  scroll-behavior: smooth;
  font-size: 16px;
}
.mkt {
  font-family: var(--font-en);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Horizontal-overflow clipping: on <main>, NOT html/body ──
   Putting overflow-x on html/body turns the body into a scroll
   container, which detaches position:fixed descendants (the navbar)
   from the viewport — they scroll away with the page and only return
   at the very top. <main> is a sibling of <nav>, so clipping <main>
   contains the wide glow orbs / animated sections without ever
   affecting the fixed nav.

   Only `overflow: clip` is used (guarded by @supports). Unlike
   `overflow-x: hidden`, clip does NOT coerce overflow-y to `auto` and
   does NOT establish a scroll container — so the sticky pricing table
   and the fixed video overlay that live inside <main> keep working.
   Legacy browsers without clip support rely on the per-section
   overflow:hidden already set on hero / story / ai / chart sections. ── */
@supports (overflow: clip) {
  .mkt main {
    overflow-x: clip;
  }
}
.mkt a {
  text-decoration: none;
  color: inherit;
}
.mkt img {
  max-width: 100%;
  display: block;
}
.mkt ul, .mkt ol {
  list-style: none;
}
.mkt button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
.mkt input, .mkt textarea, .mkt select {
  font-family: inherit;
}
.mkt input[dir="auto"],
.mkt textarea[dir="auto"] {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---------- RTL SUPPORT ---------- */
.mkt [dir="rtl"] body {
  font-family: var(--font-ar);
}
.mkt [dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* ---------- TYPOGRAPHY ---------- */
.mkt .text-display {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.mkt .text-h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.mkt .text-h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.mkt .text-h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.mkt .text-h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}
.mkt .text-body-lg {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
}
.mkt .text-body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}
.mkt .text-sm {
  font-size: 0.875rem;
  line-height: 1.5;
}
.mkt .text-xs {
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Gradient text */
.mkt .text-gradient {
  background: linear-gradient(135deg, #0181FA 0%, #4664FF 50%, #B9E4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mkt .text-gradient-accent {
  background: linear-gradient(135deg, #C0F000 0%, #7EC800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- LAYOUT ---------- */
.mkt .container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.mkt .section {
  padding-block: var(--sp-16);
}
.mkt .section-sm {
  padding-block: var(--sp-12);
}

/* ---------- UTILITIES ---------- */
.mkt .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mkt .flex { display: flex; }
.mkt .flex-col { flex-direction: column; }
.mkt .items-center { align-items: center; }
.mkt .justify-center { justify-content: center; }
.mkt .justify-between { justify-content: space-between; }
.mkt .gap-2 { gap: var(--sp-2); }
.mkt .gap-4 { gap: var(--sp-4); }
.mkt .gap-6 { gap: var(--sp-6); }
.mkt .gap-8 { gap: var(--sp-8); }
.mkt .gap-12 { gap: var(--sp-12); }
.mkt .text-center { text-align: center; }
.mkt .text-start { text-align: start; }
.mkt .text-end { text-align: end; }
.mkt .w-full { width: 100%; }
.mkt .relative { position: relative; }
.mkt .overflow-hidden { overflow: hidden; }

/* Direction-safe text islands shared across pages.
   This mirrors the pricing-page approach: page direction inherits normally,
   while mixed product names, market symbols, and numeric strings stay stable. */
.mkt .bidi-isolate,
.mkt .ltr-island,
.mkt .numeric-island,
.mkt .market-token,
.mkt .brand-token,
.mkt .symbol-token,
.mkt .nav-logo,
.mkt .section-badge,
.mkt .stat-number,
.mkt .footer-download-card,
.mkt .footer-download-label,
.mkt .footer-download-sub,
.mkt .footer-col a[href^="mailto:"],
.mkt .contact-method-link,
.mkt .contact-response-value,
.mkt .news-feature-card-meta,
.mkt .feature-benefit-item,
.mkt .blog-card-meta,
.mkt .blog-card-time,
.mkt .article-meta-item {
  unicode-bidi: isolate;
}

.mkt .ltr-island,
.mkt .numeric-island,
.mkt .market-token,
.mkt .symbol-token,
.mkt a[href^="mailto:"],
.mkt a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.mkt [dir="rtl"] [data-i18n],
.mkt [dir="rtl"] [data-i18n-html] {
  unicode-bidi: isolate;
}

/* .features-page / .about-page / .contact-page no longer clip overflow at
   the body level — body-level overflow-x broke the fixed navbar (see the
   <main> clipping rule near the top of this file). Horizontal clipping is
   now handled globally by the `main` rule, so these page bodies stay
   overflow:visible and the fixed nav pins correctly to the viewport. */

/* Grid helpers */
.mkt .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.mkt .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.mkt .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

/* Named layout grids (used in page templates) */
.mkt .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.mkt .plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.mkt .values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.mkt .contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}
.mkt .two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.mkt .hero-grid > *,
.mkt .plans-grid > *,
.mkt .values-grid > *,
.mkt .contact-grid > *,
.mkt .two-col-grid > *,
.mkt .grid-2 > *,
.mkt .grid-3 > *,
.mkt .grid-4 > *,
.mkt .feature-detail > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .mkt .grid-3, .mkt .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mkt .hero-grid,
  .mkt .two-col-grid,
  .mkt .contact-grid,
  .mkt .values-grid { grid-template-columns: 1fr; }
  .mkt .plans-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .mkt .hero-grid .phone-wrap { display: none; } /* hide phone on small screens for clean layout */
}
@media (max-width: 640px) {
  .mkt .grid-2, .mkt .grid-3, .mkt .grid-4 { grid-template-columns: 1fr; }
  .mkt .container { padding-inline: var(--sp-4); }
  .mkt .section { padding-block: var(--sp-16); }
  .mkt .form-name-row { grid-template-columns: 1fr !important; }
}

/* Section badge label */
.mkt .section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid var(--border-primary);
  background: var(--clr-primary-08);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-primary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.mkt [dir="rtl"] .section-badge { direction: rtl; }

/* Divider */
.mkt .divider {
  height: 1px;
  background: var(--border-subtle);
  margin-block: var(--sp-8);
}

/* Glow orbs (decorative background) */
.mkt .glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.mkt .glow-orb-blue {
  background: radial-gradient(circle, rgba(1,129,250,0.35) 0%, transparent 70%);
}
.mkt .glow-orb-accent {
  background: radial-gradient(circle, rgba(192,240,0,0.2) 0%, transparent 70%);
}
.mkt .glow-orb-secondary {
  background: radial-gradient(circle, rgba(70,100,255,0.25) 0%, transparent 70%);
}

/* ========================
   NAVIGATION SCROLL STATE
   ======================== */
.mkt .nav.scrolled {
  background: rgba(8,10,15,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
.mkt .nav-link-underline.active,
.mkt .nav-link-underline.nav-link-active {
  color: var(--clr-primary) !important;
  font-weight: 600;
}

.mkt.lang-boot-ar-pending [data-i18n],
.mkt.lang-boot-ar-pending [data-i18n-html],
.mkt.lang-boot-ar-pending [data-i18n-placeholder],
.mkt.lang-boot-ar-pending .lang-toggle {
  visibility: hidden;
}

/* ============================================================
   HIGHLIGHT / COPY EMPHASIS CLASSES
   Used via data-i18n-html spans across all pages
   ============================================================ */

/* Blue highlight — primary brand colour, used for feature names & key terms */
.mkt .hl-blue {
  background: linear-gradient(135deg, #0181FA 0%, #4664FF 50%, #B9E4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;          /* keep inline so line-wrapping works naturally */
  padding-bottom: 0.08em;   /* prevent descender clipping on LTR */
}

/* Lime/accent highlight — used for positive / action words */
.mkt .hl-lime {
  background: linear-gradient(135deg, #C0F000 0%, #7EC800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
  padding-bottom: 0.08em;
}

/* Bold emphasis — no colour, just weight, used for strong statements */
.mkt .hl-bold {
  font-weight: 700;
  color: var(--text-primary);
}

/* ============================================================
   RTL / ARABIC TYPOGRAPHY FIXES
   Arabic script has tall ascenders, low descenders, and
   diacritical marks that need extra vertical room.
   Tight Latin line-heights clip Arabic characters badly.
   ============================================================ */

.mkt [dir="rtl"] .text-display {
  line-height: 1.55;
  letter-spacing: 0;
}
.mkt [dir="rtl"] .text-h1 {
  line-height: 1.6;
  letter-spacing: 0;
}
.mkt [dir="rtl"] .text-h2 {
  line-height: 1.55;
  letter-spacing: 0;
}
.mkt [dir="rtl"] .text-h3 {
  line-height: 1.5;
  letter-spacing: 0;
}
.mkt [dir="rtl"] .text-h4 {
  line-height: 1.55;
  letter-spacing: 0;
}

/* background-clip:text clips Arabic descenders — add bottom padding to make room */
.mkt [dir="rtl"] .text-gradient,
.mkt [dir="rtl"] .text-gradient-accent {
  padding-bottom: 0.18em;
  display: inline-block;
}

/* Same fix for highlight spans inside RTL headings */
.mkt [dir="rtl"] .hl-blue,
.mkt [dir="rtl"] .hl-lime {
  padding-bottom: 0.18em;
  display: inline-block;
}

/* ============================================================
   ARABIC CLIPPING — COMPREHENSIVE FIXES (all pages)
   Arabic characters have tall ascenders, deep descenders, and
   diacritical marks that get sliced by line-height:1 and
   negative letter-spacing. Fixed per-element below.
   ============================================================ */

/* --- Buttons ------------------------------------------------
   .btn uses line-height:1 → Arabic label text clips top/bottom */
.mkt [dir="rtl"] .btn {
  line-height: 1.5;
  letter-spacing: 0;
  white-space: normal;         /* allow wrapping for long Arabic labels */
}

/* --- Stat numbers ------------------------------------------
   line-height:1 + letter-spacing:-0.03em clips Arabic digits  */
.mkt [dir="rtl"] .stat-number {
  line-height: 1.3;
  letter-spacing: 0;
}

/* --- Pricing amounts ----------------------------------------
   line-height:1 + letter-spacing:-0.04em — fix for RTL context */
.mkt [dir="rtl"] .pricing-amount {
  line-height: 1.3;
  letter-spacing: 0;
}

/* --- App UI demo values -------------------------------------
   .app-balance-value uses line-height:1 + letter-spacing:-0.04em */
.mkt [dir="rtl"] .app-balance-value {
  line-height: 1.3;
  letter-spacing: 0;
}

/* --- Phone chip labels -------------------------------------
   line-height:1 clips Arabic micro-labels */
.mkt [dir="rtl"] .phone-chip-label {
  line-height: 1.4;
  letter-spacing: 0;
}

/* --- Negative letter-spacing — break Arabic joining ---------
   Any element still carrying negative tracking in RTL mode    */
.mkt [dir="rtl"] h1,
.mkt [dir="rtl"] h2,
.mkt [dir="rtl"] h3,
.mkt [dir="rtl"] h4,
.mkt [dir="rtl"] h5,
.mkt [dir="rtl"] h6,
.mkt [dir="rtl"] .section-badge,
.mkt [dir="rtl"] .testimonial-name,
.mkt [dir="rtl"] .testimonial-role,
.mkt [dir="rtl"] .news-feature-card-title,
.mkt [dir="rtl"] .pricing-plan-name,
.mkt [dir="rtl"] .feature-card-title,
.mkt [dir="rtl"] .value-title,
.mkt [dir="rtl"] .contact-community-card p,
.mkt [dir="rtl"] .stat-label {
  letter-spacing: 0;
}

/* --- Page hero overflow:hidden + Arabic headings ------------
   Inner page heroes clip when content grows due to RTL line-height.
   Add bottom breathing room so descenders clear the boundary.   */
.mkt [dir="rtl"] .page-hero {
  padding-bottom: 80px;        /* was 64px — extra 16px for Arabic descenders */
}

/* --- Gradient text inside headings -------------------------
   Any gradient span not already covered by earlier rules      */
.mkt [dir="rtl"] span.text-gradient,
.mkt [dir="rtl"] span.text-gradient-accent {
  padding-bottom: 0.18em;
  display: inline-block;
}


/* ===== screens.css ===== */
/* ============================================================
   GENIE FX ACADEMY — SCREENS & REAL UI STYLESHEET
   Screenshot displays, phone image layouts, news cards,
   app store badges, and product-driven visual components
   ============================================================ */

/* ========================
   GLOBAL POLISH UPGRADES
   ======================== */

/* Text selection */
.mkt ::selection {
  background: rgba(1, 129, 250, 0.25);
  color: #ffffff;
}

/* Scroll indicator */
.mkt {
  scroll-behavior: smooth;
}

/* Enhanced scrollbar */
.mkt ::-webkit-scrollbar { width: 6px; }
.mkt ::-webkit-scrollbar-track { background: var(--bg-base); }
.mkt ::-webkit-scrollbar-thumb { background: var(--clr-primary-30); border-radius: 3px; }
.mkt ::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* Subtle horizontal gradient line between sections */
.mkt .section-separator {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-primary) 30%,
    var(--clr-primary-30) 50%,
    var(--border-primary) 70%,
    transparent 100%
  );
  margin: 0;
}

/* ========================
   HERO PHONE IMAGE SYSTEM
   ======================== */
.mkt .hero-phones-wrap {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Ambient glow beneath mockup — tuned to portrait two-phone composition */
.mkt .hero-phones-wrap::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 110px;
  background: radial-gradient(ellipse, rgba(1,129,250,0.35) 0%, transparent 70%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
}

/*
  Composed two-phone hero mockup (portrait image: 1009×1216, ratio 0.83)
  Constrained by height — not width — to prevent overflow in the 600px hero container.
  At max-height:560px the rendered width is ~464px, which sits cleanly in the right column.
*/
.mkt .hero-mockup-composed {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 560px;
  height: auto;
  flex-shrink: 0;
  animation: floatSlow 7s ease-in-out infinite;
  filter:
    drop-shadow(0 24px 64px rgba(1,129,250,0.30))
    drop-shadow(0 52px 110px rgba(0,0,0,0.80));
  transform-origin: center bottom;
}

/* Mobile fallback — width-constrained since single column has no height limit */
.mkt .hero-mockup-mobile {
  width: 100%;
  max-width: 280px;
  height: auto;
  filter:
    drop-shadow(0 20px 56px rgba(1,129,250,0.30))
    drop-shadow(0 40px 80px rgba(0,0,0,0.72));
}

/* Legacy single-phone classes — no longer used in hero, kept for safety */
.mkt .hero-phone-main {
  position: relative;
  z-index: 1;
  width: 280px;
  flex-shrink: 0;
  animation: floatSlow 6s ease-in-out infinite;
  filter: drop-shadow(0 32px 80px rgba(1,129,250,0.25)) drop-shadow(0 60px 120px rgba(0,0,0,0.8));
  transform-origin: center bottom;
}

.mkt .hero-phone-secondary {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 0;
  width: 210px;
  transform: scale(0.75) translateX(-18%) translateY(8%);
  opacity: 0.45;
  filter: blur(2px);
  transform-origin: center bottom;
}

/* Floating feature chips around phones */
.mkt .phone-chip {
  position: absolute;
  background: rgba(14,14,18,0.92);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--shadow-glow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  white-space: nowrap;
  z-index: 4;
}
.mkt .phone-chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--clr-primary-08);
}
.mkt .phone-chip-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.mkt .phone-chip-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: 2px;
}

/* Home structural utilities: extracted from repeated inline layout values. */
.mkt .home-page .hero-copy-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.mkt .home-page .hero-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Fixed dimensions for both hero CTAs — Download App + Explore Features */
.mkt .hero-cta-btn {
  width: 163.5px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Stack only on very small screens where two 163.5px buttons + 16px gap won't fit */
@media (max-width: 379px) {
  .mkt .home-page .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .mkt .hero-cta-btn {
    width: 100%;
    max-width: 163.5px;
  }
}

.mkt .home-page .hero-proof-strip {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.mkt .home-page .hero-platform-note {
  color: rgba(201,207,224,0.76);
  margin: 0;
}

.mkt .home-page .hero-trust-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.mkt .home-page .hero-proof-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.mkt .home-page .hero-trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  flex-shrink: 0;
}

.mkt .home-page .hero-trust-stars {
  display: flex;
  gap: 2px;
  color: #FFB800;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255,184,0,0.22);
}

.mkt .home-page .hero-trust-label {
  color: rgba(201,207,224,0.82);
  margin: 0;
}

.mkt .home-page .feature-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: auto;
}

.mkt .home-page .feature-card-link-accent { color: var(--clr-accent); }
.mkt .home-page .feature-card-link-secondary { color: var(--clr-secondary); }
.mkt .home-page .feature-card-link-purple { color: #A050FF; }

/* ========================
   SCREENSHOT FRAME
   Used to show app screens with nice framing
   ======================== */
.mkt .screenshot-frame {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-md);
  transition: border-color var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow);
}
.mkt .screenshot-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.mkt .screenshot-frame:hover {
  border-color: var(--border-primary);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
  transform: translateY(-4px);
}

/* Flat screenshot (no frame, just the phone image) */
.mkt .screenshot-float {
  filter:
    drop-shadow(0 10px 40px rgba(1,129,250,0.2))
    drop-shadow(0 30px 60px rgba(0,0,0,0.5));
  transition: filter var(--t-slow), transform var(--t-slow);
}
.mkt .screenshot-float:hover {
  filter:
    drop-shadow(0 15px 50px rgba(1,129,250,0.35))
    drop-shadow(0 40px 80px rgba(0,0,0,0.6));
  transform: translateY(-6px);
}

/* ========================
   FEATURE VISUAL — REAL SCREENSHOT LAYOUTS
   ======================== */

/* Single phone screenshot (for feature sections) */
.mkt .feature-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
/* Subtle ambient glow behind a transparent-bg phone — replaces hard grey card */
.mkt .phone-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.18) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.mkt .feature-phone-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(1,129,250,0.14) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  border-radius: var(--r-2xl);
  z-index: 0;
}
.mkt .feature-phone-wrap img {
  position: relative;
  z-index: 1;
}
.mkt .feature-phone-wrap img {
  position: relative;
  z-index: 1;
  max-width: 280px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(1,129,250,0.2)) drop-shadow(0 30px 80px rgba(0,0,0,0.6));
}

/* Two stacked/overlapping phone screenshots */
.mkt .feature-phone-pair {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt .feature-phone-pair .phone-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  z-index: 1;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
  opacity: 0.8;
}
.mkt .feature-phone-pair .phone-front {
  position: relative;
  z-index: 2;
  right: -20px;
  width: 240px;
  filter: drop-shadow(0 15px 50px rgba(1,129,250,0.25)) drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}

/* AI pair: side-by-side screenshots for Ask Genie */
.mkt .ai-screenshot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: end;
}
.mkt .ai-screenshot-pair img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
  border-radius: var(--r-xl);
}
.mkt .ai-screenshot-pair img:first-child {
  transform: translateY(20px);
  filter: drop-shadow(0 8px 24px rgba(1,129,250,0.2)) drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
.mkt .ai-screenshot-pair img:last-child {
  filter: drop-shadow(0 8px 24px rgba(1,129,250,0.15)) drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

/* ========================
   NEWS & MARKET INSIGHTS SECTION
   ======================== */
.mkt .news-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
}
.mkt .news-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(1,129,250,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(192,240,0,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.mkt .news-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* News phone - the main visual */
.mkt .news-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}
.mkt .news-phone-glow {
  position: absolute;
  inset: 10%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.25) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.mkt .news-phone-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  height: auto;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.3))
    drop-shadow(0 25px 60px rgba(1,129,250,0.22))
    drop-shadow(0 45px 90px rgba(0,0,0,0.7));
  animation: floatSlow 7s ease-in-out infinite;
}

/* News content cards grid */
.mkt .news-cards-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Individual news feature card */
.mkt .news-feature-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  cursor: default;
}
.mkt .news-feature-card:hover {
  border-color: var(--border-primary);
  background: var(--bg-card-hover);
  transform: translateX(6px);
  box-shadow: var(--shadow-glow);
}
.mkt .news-feature-card-img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}
.mkt .news-feature-card-content {
  padding-block: var(--sp-4);
  padding-inline-start: 0;
  padding-inline-end: var(--sp-4);
  flex: 1;
}
.mkt .news-feature-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-accent);
  background: var(--clr-accent-20);
  border: 1px solid var(--border-accent);
  padding: 2px 8px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}
.mkt .news-feature-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.mkt .news-feature-card-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* News bullet points (right side list) */
.mkt .news-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.mkt .news-bullet {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.mkt .news-bullet-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--clr-primary-08);
  border: 1px solid var(--border-primary);
}
.mkt .news-bullet-text h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.mkt .news-bullet-text p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ========================
   ENHANCED HERO SECTION STYLES
   ======================== */
.mkt .hero-section {
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--sp-4));
  padding-bottom: var(--sp-10);
  position: relative;
  overflow: hidden;
}

/* Gradient divider at bottom of hero */
.mkt .hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
  pointer-events: none;
  z-index: 2;
}

/* Animated gradient border on hero CTA */
.mkt .btn-primary-glow {
  position: relative;
}
.mkt .btn-primary-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-md) + 1px);
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary), var(--clr-accent));
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
  filter: blur(8px);
}
.mkt .btn-primary-glow:hover::before { opacity: 0.6; }

/* ========================
   PRICING TRUST BAR
   ======================== */
.mkt .pricing-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding: var(--sp-6) var(--sp-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-10);
}
.mkt .pricing-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.mkt .pricing-trust-item svg {
  color: var(--clr-primary);
  flex-shrink: 0;
}
.mkt .pricing-trust-item strong { color: var(--text-primary); }

/* ========================
   ABOUT — HUMAN STORY SECTION
   ======================== */
.mkt .origin-story {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--r-2xl);
  padding: var(--sp-12) var(--sp-12);
  overflow: hidden;
}
.mkt .origin-story::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary), var(--clr-accent));
}
.mkt .origin-story-text {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--text-secondary);
}
.mkt .origin-story-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ========================
   CONTACT — PERSONALITY STYLES
   ======================== */
.mkt .contact-community-card {
  padding: var(--sp-6) var(--sp-7);
  background: linear-gradient(135deg, rgba(1,129,250,0.08) 0%, rgba(70,100,255,0.05) 100%);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-xl);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-top: var(--sp-4);
}
.mkt .contact-community-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
  border-radius: var(--r-md);
  background: rgba(70, 100, 255, 0.10);
  border: 1px solid rgba(70, 100, 255, 0.22);
}

/* ========================
   ENHANCED CARD SPOTLIGHT EFFECT
   (uses CSS custom properties set by JS)
   ======================== */
.mkt .card-spotlight {
  background: radial-gradient(
    320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(1, 129, 250, 0.04),
    transparent 60%
  ), var(--bg-elevated);
}

/* ========================
   SECTION TRANSITION HELPERS
   ======================== */
.mkt .section-top-fade {
  position: relative;
}
.mkt .section-top-fade::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--bg-base), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ========================
   SOCIAL PROOF — AVATAR STACK
   ======================== */
.mkt .avatar-stack {
  display: flex;
  align-items: center;
}
.mkt .avatar-stack-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
  margin-right: -8px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.mkt .avatar-stack-item:nth-child(2) { background: linear-gradient(135deg, #4664FF, #B9E4FF); }
.mkt .avatar-stack-item:nth-child(3) { background: linear-gradient(135deg, #C0F000, #7EC800); color: #0A1A00; }
.mkt .avatar-stack-item:nth-child(4) { background: linear-gradient(135deg, #A050FF, #4664FF); }
.mkt .avatar-stack-last {
  margin-left: 16px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.mkt .avatar-stack-last strong { color: var(--text-primary); }

.mkt .home-page .hero-proof-strip .avatar-stack-last {
  margin-left: 0;
  color: rgba(201,207,224,0.84);
}

.mkt .home-page .hero-proof-strip .avatar-stack-last strong {
  color: #ffffff;
}

/* ========================
   HIGHLIGHTED QUOTE / PULL-QUOTE
   ======================== */
.mkt .pull-quote {
  border-left: 3px solid var(--clr-primary);
  padding: var(--sp-4) var(--sp-6);
  background: var(--clr-primary-08);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block: var(--sp-6);
}
.mkt [dir="rtl"] .pull-quote {
  border-left: none;
  border-right: 3px solid var(--clr-primary);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.mkt .pull-quote p {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ========================
   EMOTIONAL HEADLINE TAG
   Used on pricing, pricing hero
   ======================== */
.mkt .emotional-headline {
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--sp-5);
}
.mkt .emotional-headline strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ========================
   HERO ATMOSPHERIC BACKGROUND DECORATIONS
   (arc rings + sparkle particles — never over text)
   ======================== */

/* Arc ring SVG — right side of hero, cinematic fintech feel */
.mkt .hero-arc-bg {
  position: absolute;
  top: 0;
  right: -5%;
  width: 58%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.mkt .hero-arc-bg svg {
  width: 100%;
  height: 100%;
}

/* Floating sparkle particles in hero */
.mkt .hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.mkt .hero-sparkle {
  position: absolute;
  line-height: 1;
  animation: heroSparkle 4s ease-in-out infinite;
}
.mkt .hero-sparkle.s-blue    { color: rgba(1,129,250,0.75);    animation-delay: 0s; }
.mkt .hero-sparkle.s-accent  { color: rgba(192,240,0,0.65);    animation-delay: 1.1s; }
.mkt .hero-sparkle.s-white   { color: rgba(255,255,255,0.4);   animation-delay: 2.0s; }
.mkt .hero-sparkle.s-violet  { color: rgba(70,100,255,0.7);    animation-delay: 2.8s; }
.mkt .hero-sparkle.s-orange  { color: rgba(255,110,60,0.55);   animation-delay: 1.6s; }

/* ========================
   PHONE BEZEL — polished phone screenshot wrapper
   (glass-look phone frame, used for premium screenshot display)
   ======================== */
.mkt .phone-bezel {
  position: relative;
  border-radius: 44px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.18),
    0 0 60px rgba(1,129,250,0.18),
    0 30px 90px rgba(0,0,0,0.75);
  background: #090910;
}
/* Notch bar at top */
.mkt .phone-bezel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #090910;
  border-radius: 0 0 14px 14px;
  z-index: 10;
}
.mkt .phone-bezel img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================
   AI SHOWCASE — Ask Genie tilted phones treatment
   (image already includes both phones with shadow/depth on black bg)
   ======================== */
.mkt .ai-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.mkt .ai-showcase-glow {
  position: absolute;
  inset: 5%;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(1,129,250,0.28) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.mkt .ai-showcase-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  /* Premium 3-layer drop-shadow follows phone silhouette for native integration */
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 20px 45px rgba(1,129,250,0.18))
    drop-shadow(0 40px 80px rgba(0,0,0,0.7));
  transition: transform var(--t-slow), filter var(--t-slow);
}
.mkt .ai-showcase-img:hover {
  transform: translateY(-6px);
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.35))
    drop-shadow(0 25px 55px rgba(1,129,250,0.25))
    drop-shadow(0 50px 100px rgba(0,0,0,0.75));
}

/* ========================
   CHART SHOWCASE — Genie Chart hero treatment
   (image already includes the phone mockup + dark blue bg)
   ======================== */
.mkt .chart-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  min-height: 460px;
}
.mkt .chart-showcase-glow {
  position: absolute;
  inset: 12%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.18) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.mkt .chart-showcase-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.3))
    drop-shadow(0 25px 60px rgba(1,129,250,0.18))
    drop-shadow(0 45px 90px rgba(0,0,0,0.65));
  transition: transform var(--t-slow);
}
.mkt .chart-showcase-img:hover {
  transform: translateY(-6px);
}

/* ========================
   PRODUCT CARD — clean screenshot card with depth
   (used for Genie Chart + feature images that are not phone shapes)
   ======================== */
.mkt .product-card {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(1,129,250,0.08);
  transition: border-color var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow);
}
.mkt .product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(1,129,250,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.mkt .product-card img {
  width: 100%;
  height: auto;
  display: block;
}
.mkt .product-card:hover {
  border-color: var(--border-primary);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), var(--shadow-glow);
  transform: translateY(-4px);
}

/* ========================
   RESPONSIVE OVERRIDES FOR SCREENS
   ======================== */
@media (max-width: 1024px) {
  .mkt .hero-phones-wrap { height: 480px; }
  /* Portrait image: constrain by height at tablet — ~381px wide at this height */
  .mkt .hero-mockup-composed { max-height: 460px; }
  /* legacy */
  .mkt .hero-phone-main { width: 220px; }
  .mkt .hero-phone-secondary { width: 170px; }
}

@media (max-width: 900px) {
  .mkt .hero-phones-wrap { display: none; }
  /* Show composed mockup below copy on mobile */
  .mkt .hero-phone-mobile-only {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-10);
  }
  .mkt .hero-phone-mobile-only img {
    max-width: 280px;
    filter: drop-shadow(0 20px 56px rgba(1,129,250,0.30)) drop-shadow(0 40px 80px rgba(0,0,0,0.72));
  }
  .mkt .news-layout { grid-template-columns: 1fr; }
  .mkt .news-phone-wrap { min-height: 380px; }
  .mkt .news-phone-wrap img { max-width: 320px; }
  .mkt .ai-showcase-img { max-width: 100%; }
  .mkt .ai-screenshot-pair { grid-template-columns: 1fr; }
  .mkt .ai-screenshot-pair img:first-child { transform: none; }
  .mkt .chart-showcase { min-height: 420px; }
  .mkt .chart-showcase-img { max-width: 280px; }
  .mkt .feature-phone-pair { height: auto; }
  .mkt .feature-phone-pair .phone-back { display: none; }
  .mkt .feature-phone-pair .phone-front { right: 0; width: 100%; max-width: 260px; }
  .mkt .origin-story { padding: var(--sp-8); }
}

@media (max-width: 640px) {
  .mkt .pricing-trust-bar { gap: var(--sp-5); padding: var(--sp-5); }
}

/* ========================
   MOCKUP BACKGROUND BLENDING
   ======================== */
.mkt .ai-showcase-img {
  border-radius: 16px;
}

/* legacy single-phone override — hero now uses .hero-mockup-composed */
.mkt .hero-phone-main {
  filter: drop-shadow(0 32px 80px rgba(1,129,250,0.25)) drop-shadow(0 60px 120px rgba(0,0,0,0.8));
}
.mkt .news-phone-wrap img,
.mkt .feature-phone-pair img {
  /* Note: mix-blend-mode kept off — drop-shadow + border-radius handle integration cleanly */
}
.mkt .chart-showcase-glow,
.mkt .ai-showcase-glow,
.mkt .news-phone-glow {
  opacity: 0.7 !important;
  width: 60% !important;
  height: 60% !important;
}

/* ========================
   LESSON CARDS — STAGGERED COMPOSITION
   Two real lesson cards arranged with overlap + depth
   (used in Education section, home + features)
   ======================== */
.mkt .lesson-cards {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 280px;
  margin-inline: auto;
}
.mkt .lesson-cards-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1,129,250,0.22) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.mkt .lesson-card-img {
  position: absolute;
  width: 75%;
  height: auto;
  display: block;
  border-radius: 14px;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 18px 40px rgba(1,129,250,0.18))
    drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.mkt .lesson-card-img.card-1 {
  top: 8%;
  left: 0;
  z-index: 1;
}
.mkt .lesson-card-img.card-2 {
  bottom: 8%;
  right: 0;
  z-index: 2;
}
.mkt .lesson-cards:hover .card-1 { transform: translate(-6px, -4px); }
.mkt .lesson-cards:hover .card-2 { transform: translate(6px, 4px); }

.mkt [dir="rtl"] .lesson-card-img.card-1 { left: auto; right: 0; }
.mkt [dir="rtl"] .lesson-card-img.card-2 { right: auto; left: 0; }

@media (max-width: 768px) {
  .mkt .lesson-cards {
    min-height: 240px;
    max-width: 420px;
  }
  .mkt .lesson-card-img { width: 78%; }
}

/* Genie Chart section CTA — fixed 243×48px, text centered (EN + AR) */
.mkt .gc-cta-btn {
  width: 243px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── index.html — gc-device container: add padding to match .ai-showcase ── */
.mkt .gc-device {
  padding: var(--sp-4) !important;
}

/* ── index.html — gc-device-glow: match .ai-showcase-glow exactly ── */
.mkt .gc-device-glow {
  /* Override fixed 560px values with percentage-based centred glow */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 70% !important;
  height: 70% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(
    ellipse 70% 50% at 50% 50%,
    rgba(1,129,250,0.28) 0%,
    transparent 70%
  ) !important;
  filter: blur(50px) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: glowPulse 6s ease-in-out infinite !important;
}

/* ── index.html — gc-device-img: match .ai-showcase-img quality exactly ── */
.mkt .gc-device-img {
  /* Kill the rectangular frame */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* drop-shadow follows PNG silhouette — same 3-layer values as ai-showcase-img */
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 20px 45px rgba(1,129,250,0.18))
    drop-shadow(0 40px 80px rgba(0,0,0,0.7)) !important;
  transition: transform var(--t-slow), filter var(--t-slow) !important;
}
.mkt .gc-device-img:hover {
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.35))
    drop-shadow(0 25px 55px rgba(1,129,250,0.25))
    drop-shadow(0 50px 100px rgba(0,0,0,0.75)) !important;
}

/* ── FEATURES PAGE SEAMLESS FIX ──
   Fixes hard cut lines between sections on features.html.
   All rules are scoped to .features-page or to the specific section IDs
   (which only exist in features.html) — no other page is affected.
   ──────────────────────────────────────────────────────────────────── */

/* ── Fix A: Stop glow clipping ──
   .page-hero and .news-section both have overflow:hidden in their CSS.
   This clips glow elements at section edges, creating hard cut lines.
   Override only for the features page — other pages are unaffected. */
.mkt .features-page .page-hero {
  overflow: visible;
}

/* #news has higher specificity than .news-section — overrides overflow:hidden */
.mkt #chart,
.mkt #education,
.mkt #ai,
.mkt #news,
.mkt #community {
  overflow: visible;
  position: relative; /* anchor for ::before / ::after pseudo-elements */
}

/* Ensure inner content always sits above gradient fade overlays (z-index: 0).
   Without this, the absolutely-positioned fades would paint over
   unpositioned content (text, buttons, lists) in the stacking order. */
.mkt .features-page .section > .container,
.mkt .features-page .news-section > .container {
  position: relative;
  z-index: 1;
}

/* ── Fix B: Soft gradient transitions between sections ──

   Background alternation (verified):
     page-hero → bg-base
     pills bar → bg-base
     #chart    → bg-base
     #education→ bg-surface  ← cut
     #ai       → bg-base     ← cut
     #news     → bg-surface  ← cut
     #community→ bg-base     ← cut
     CTA       → bg-base     (same as community — no cut)

   Technique:
     ::after  — outgoing bleed: bleeds TOWARD the next section's background color
     ::before — entry seal: fades FROM the current section's own color (acts as
                a clean cap; invisible against the section's own background but
                smooths out any colour bleed arriving from the ::after above)

   #community::after is intentionally OMITTED — the next section (CTA) is the
   same bg-base colour; adding a bg-surface tint there would look wrong.           */

/* Shared base for all section top-fades */
.mkt #chart::before,
.mkt #education::before,
.mkt #ai::before,
.mkt #news::before,
.mkt #community::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 0;
}

/* bg-base sections seal their tops with bg-base (invisible on bg-base, but
   smooths out any incoming bleed from the previous section's ::after) */
.mkt #chart::before,
.mkt #ai::before,
.mkt #community::before {
  background: linear-gradient(to bottom, var(--bg-base), transparent);
}

/* bg-surface sections seal their tops with bg-surface — same principle */
.mkt #education::before,
.mkt #news::before {
  background: linear-gradient(to bottom, var(--bg-surface), transparent);
}

/* Shared base for all section bottom-fades */
.mkt #chart::after,
.mkt #education::after,
.mkt #ai::after,
.mkt #news::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 0;
}

/* bg-base sections bleed bg-surface downward (toward the bg-surface section below) */
.mkt #chart::after,
.mkt #ai::after {
  background: linear-gradient(to top, var(--bg-surface), transparent);
}

/* bg-surface sections bleed bg-base downward (toward the bg-base section below) */
.mkt #education::after,
.mkt #news::after {
  background: linear-gradient(to top, var(--bg-base), transparent);
}

/* ── Special case: #news::before ──
   .news-section::before already defines atmospheric radial gradients.
   The #news ID selector has higher specificity (1,0,1 vs 0,1,1) so it
   overrides. We combine both effects here: top seal gradient layered
   above the preserved atmospheric background gradients.              */
.mkt #news::before {
  height: 100%; /* expand to full section so atmospheric gradients cover it */
  background:
    linear-gradient(to bottom, var(--bg-base) 0%, transparent 100px),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(1,129,250,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(192,240,0,0.05)  0%, transparent 70%);
}

/* ── Fix D: Glow container stacking ──
   Ensure glow divs stay behind their sibling image/content without
   creating stacking contexts that isolate them from their section. */
.mkt .chart-showcase,
.mkt .ai-showcase,
.mkt .news-phone-wrap,
.mkt .feature-phone-pair,
.mkt .feature-phone-wrap {
  position: relative;
  isolation: auto;
}

.mkt .chart-showcase-glow,
.mkt .ai-showcase-glow,
.mkt .news-phone-glow {
  z-index: 0;
  pointer-events: none;
}

/* ── Feature nav pills bar ──
   Soften the border-bottom so it doesn't create a harsh horizontal line.
   The inline style uses var(--border-subtle) = rgba(255,255,255,0.06);
   we override with a near-invisible value via the class added in HTML. */
.mkt .features-nav-pills {
  padding-bottom: var(--sp-6);
  padding-top: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  background: transparent;
}

.mkt .features-page .features-nav-pills-inner {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.mkt .features-page .feature-inline-media-card {
  margin-top: var(--sp-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-card);
}

.mkt .features-page .feature-inline-media-card-course {
  max-width: 400px;
}

.mkt .features-page .feature-inline-media-card-ai {
  max-width: 380px;
}

.mkt .features-page .feature-inline-media-img {
  width: 100%;
  display: block;
}

.mkt .features-page .feature-cta-offset {
  margin-top: var(--sp-2);
}

.mkt .features-page .feature-cta-self-start {
  align-self: flex-start;
}

.mkt .features-page .news-copy-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.mkt .features-page .feature-phone-wrap-tall {
  min-height: 420px;
}

.mkt .features-page .feature-phone-img-quiz {
  max-width: 300px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 48px rgba(1,129,250,0.22)) drop-shadow(0 40px 80px rgba(0,0,0,0.65));
}

.mkt .features-page .feature-phone-img-community {
  max-width: 260px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 25px 50px rgba(1,129,250,0.18)) drop-shadow(0 45px 90px rgba(0,0,0,0.65));
}

.mkt .features-page .features-nav-pills .btn,
.mkt .features-page .feature-benefit-item,
.mkt .features-page .news-feature-card-meta,
.mkt .features-page .footer-trust-line {
  unicode-bidi: isolate;
}

.mkt [dir="rtl"] .features-page .features-nav-pills .btn,
.mkt [dir="rtl"] .features-page .feature-detail-content .btn,
.mkt [dir="rtl"] .features-page .cta-buttons .btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.mkt [dir="rtl"] .features-page .feature-cta-self-start {
  align-self: flex-start;
}

/* ══════════════════════════════════════
   FEATURES PAGE — SEAMLESS SECTION FIX
══════════════════════════════════════ */

/* ── Problem 1 — Hard horizontal line between sections ──
   Root cause: #education has inline background:var(--bg-surface) which
   creates a hard color boundary against adjacent bg-base sections.
   Solution: strip all per-section backgrounds so there is a single
   unified background source on <main>. Ultra-subtle rgba tints on
   #education and #news give visual rhythm without any hard line. */

.mkt .features-page .section,
.mkt .features-page .page-hero,
.mkt .features-page .news-section,
.mkt .features-page .section-sm {
  background: transparent !important;
}

.mkt .features-page main {
  background: var(--bg-base);
}

/* Specificity: .features-page #education = (1,1,0) > .features-page .section = (0,2,0)
   Both use !important so the ID-scoped rule wins — overrides the inline style too */
.mkt .features-page #education,
.mkt .features-page #news {
  background: rgba(255, 255, 255, 0.013) !important;
}

/* ── Problem 2 (homepage) — Same glow containment for index.html chart ── */

.mkt .gc-device {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.mkt .gc-device-glow {
  position: absolute !important;
  width: 85% !important;
  height: 85% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(ellipse at center, rgba(1, 129, 250, 0.2) 0%, transparent 65%) !important;
  filter: blur(45px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.mkt .gc-device-img {
  position: relative !important;
  z-index: 1 !important;
}

/* ══ CHART MOCKUP — MATCH ASK GENIE QUALITY ══ */

.mkt .chart-showcase {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--sp-4) !important;
  isolation: auto !important;
  overflow: visible !important;
  min-height: unset !important;
}

.mkt .chart-showcase-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 70% !important;
  height: 70% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(
    ellipse 70% 50% at 50% 50%,
    rgba(1,129,250,0.28) 0%,
    transparent 70%
  ) !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.7 !important;
  animation: glowPulse 6s ease-in-out infinite !important;
}

.mkt .chart-showcase-img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.25))
    drop-shadow(0 20px 45px rgba(1,129,250,0.18))
    drop-shadow(0 40px 80px rgba(0,0,0,0.7)) !important;
  transition: transform var(--t-slow), filter var(--t-slow) !important;
}

.mkt .chart-showcase-img:hover {
  transform: translateY(-6px) !important;
  filter:
    drop-shadow(0 0 1px rgba(1,129,250,0.35))
    drop-shadow(0 25px 55px rgba(1,129,250,0.25))
    drop-shadow(0 50px 100px rgba(0,0,0,0.75)) !important;
}

/* ========================
   STORY SECTION — TWO-COLUMN GRID
   LTR: content left, phone right.
   RTL: CSS grid direction:rtl (inherited from <html dir="rtl">)
        automatically reverses column order — content right, phone left.
        No [dir="rtl"] template-area override needed.
   ======================== */
.mkt .story-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "headline phone"
    "points   phone";
  column-gap: var(--sp-16);
  row-gap: var(--sp-8);
  align-items: start;
}

/* --- Grid area placements --- */
.mkt .story-body .story-headline-block {
  grid-area: headline;
  margin-bottom: 0;
  text-align: start;
}
.mkt .story-body .story-headline-block .section-badge {
  margin-inline: 0;
}

.mkt .story-body .story-phone-scene {
  grid-area: phone;
  align-self: center;
  /* Reduce vertical breathing room — grid gap handles spacing */
  padding-block: var(--sp-6);
}

/* Points become a vertical list inside the content column */
.mkt .story-body .story-points {
  grid-area: points;
  margin-inline: 0;
  max-width: 100%;
  flex-direction: column;
  gap: var(--sp-5);
}
.mkt .story-body .story-point {
  padding-inline: 0;
}
/* Horizontal divider between stacked points */
.mkt .story-body .story-point-divider {
  width: 100%;
  height: 1px;
  align-self: auto;
  margin-block: 0;
}

/* ≤900px — single column: heading → points → phone */
@media (max-width: 900px) {
  .mkt .story-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "headline"
      "points"
      "phone";
    row-gap: var(--sp-10);
  }
  /* Centre heading text on small screens for both LTR and RTL */
  .mkt .story-body .story-headline-block {
    text-align: center;
  }
  .mkt .story-body .story-headline-block .section-badge {
    margin-inline: auto;
  }
  .mkt .story-body .story-phone-scene {
    justify-content: center;
  }
}


/* ===== visual-enhanced.css ===== */
/* ══════════════════════════════════════════
   GENIEFX VISUAL ENHANCED — v2.0
   Premium Fintech Atmosphere System
══════════════════════════════════════════ */

/* ── SECTION A — CSS VARIABLES EXTENSION ── */
.mkt {
  /* Extended color tokens */
  --glow-blue-strong:   rgba(1, 129, 250, 0.18);
  --glow-blue-mid:      rgba(1, 129, 250, 0.10);
  --glow-blue-soft:     rgba(1, 129, 250, 0.05);
  --glow-lime-accent:   rgba(192, 240, 0, 0.08);
  --glow-lime-soft:     rgba(192, 240, 0, 0.04);
  --grid-line-color:    rgba(255, 255, 255, 0.032);
  --card-border-top:    rgba(255, 255, 255, 0.10);
  --card-border-side:   rgba(255, 255, 255, 0.04);
  --card-inner-top:     rgba(255, 255, 255, 0.025);
  --shadow-blue-card:   0 20px 60px rgba(1, 129, 250, 0.10), 0 4px 20px rgba(0,0,0,0.5);
}

/* ── SECTION B — GLOBAL BACKGROUND DEPTH SYSTEM ── */
.mkt {
  background-color: #05070D;
  /* Stacking context so the fixed wash layer (::before, z-index:-1) sits above
     this element's own background-color but beneath all content. */
  position: relative;
  z-index: 0;
}
/* PERF: the ambient page wash used `background-attachment: fixed`, which forces
   a full-viewport background REPAINT on every scroll frame (the dominant scroll
   cost, brutal on Windows/ANGLE). Move the gradients to a position:fixed,
   GPU-composited layer — painted ONCE and held viewport-locked exactly like
   `fixed` did, with zero per-frame repaint. Pixel-identical to the old wash. */
.mkt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(1,129,250,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(70,100,255,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 90% 20%, rgba(192,240,0,0.03) 0%, transparent 50%);
}

/* ── SECTION C — TRADING GRID PATTERN ── */
.mkt .trading-grid-bg {
  position: relative;
  /* isolation: isolate removed — was blocking particles canvas from showing through */
}

.mkt .trading-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.mkt .trading-grid-bg > .container {
  position: relative;
  z-index: 1;
}

/* ── SECTION D — PREMIUM CARD SYSTEM ── */
.mkt .card,
.mkt .card-feature,
.mkt .stat-card,
.mkt .pricing-card,
.mkt .testimonial-card {
  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.025) 0%,
      rgba(255,255,255,0.008) 40%,
      transparent 100%
    ),
    var(--bg-card, #141825);
  border: 1px solid;
  border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.04) rgba(255,255,255,0.03) rgba(255,255,255,0.04);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mkt .card:hover,
.mkt .card-feature:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.25),
    0 20px 60px rgba(1,129,250,0.10),
    0 4px 20px rgba(0,0,0,0.5);
  border-color: rgba(1,129,250,0.25) rgba(1,129,250,0.10) rgba(1,129,250,0.08) rgba(1,129,250,0.10);
}

.mkt .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-blue-card);
}

/* Pricing Pro card premium treatment */
.mkt .pricing-card.featured,
.mkt .pricing-card[data-featured="true"],
.mkt .pricing-card:nth-child(2) {
  background:
    linear-gradient(
      150deg,
      rgba(1,129,250,0.10) 0%,
      rgba(1,129,250,0.04) 40%,
      transparent 100%
    ),
    var(--bg-card, #141825);
  border: 1px solid rgba(1,129,250,0.35);
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.15),
    0 0 80px rgba(1,129,250,0.12),
    0 40px 80px rgba(0,0,0,0.5);
}

/* ── SECTION E — MOCKUP GLOW ANIMATIONS ── */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* Pulse via opacity only — keep the centering transform constant. Animating
   scale() on these blur(80px) orbs re-blurs the whole layer every frame
   (huge GPU cost, worst on Windows); opacity is compositor-cheap. */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%); }
  50%       { opacity: 1;   transform: translate(-50%, -50%); }
}

/* Translate-only drift — no scale(), so the blurred texture is rasterized once
   and moved on the compositor instead of re-blurred each frame. */
@keyframes glowDrift {
  0%   { transform: translate(0px, 0px); }
  33%  { transform: translate(12px, -8px); }
  66%  { transform: translate(-8px, 10px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(1,129,250,0.15); }
  50%       { box-shadow: 0 0 40px rgba(1,129,250,0.30); }
}

@keyframes chartLineDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Apply float to mockup images */
.mkt .ai-showcase-img,
.mkt .chart-showcase-img,
.mkt .gc-device-img,
.mkt .news-phone-wrap img,
.mkt .feature-phone-pair img {
  animation: floatY 5s ease-in-out infinite;
}

/* Hero phones float as one composed unit — wrapper animates, individuals stay still */
.mkt .hero-phones-wrap {
  animation: floatY 5s ease-in-out infinite;
}

.mkt .hero-phone-main,
.mkt .hero-phone-secondary {
  animation: none !important;
}

/* ── Self-contained hero grid overlay (no layout impact) ── */
.mkt .hero-trading-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Apply drift to all glow orbs */
.mkt .chart-showcase-glow,
.mkt .gc-device-glow,
.mkt .ai-showcase-glow,
.mkt .news-phone-glow,
.mkt .glow-orb,
.mkt .gc-atmosphere,
.mkt .story-bg-glow {
  animation: glowDrift 10s ease-in-out infinite;
  /* Keep the blurred layer on the compositor so the translate-only drift is a
     texture move, not a per-frame re-blur. */
  will-change: transform;
}

/* Apply pulse to hero orbs */
.mkt .hero-glow-orb,
.mkt .orb-1,
.mkt .orb-2 {
  animation: glowDrift 12s ease-in-out infinite;
  will-change: transform;
}

/* NOTE: these marketing glow-orbs are absolute inside the hero (not fixed), so
   once the hero scrolls out of view they're off-screen and the compositor stops
   painting them — no explicit pause needed. The always-on FIXED background lives
   in LandingBackground, which parks its own orbs + the particle canvases when the
   hero leaves the viewport (see html[data-bg-paused] there). */

/* ── SECTION F — HERO CINEMATIC ATMOSPHERE ── */
.mkt .hero-section {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,   rgba(1,129,250,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 60%,   rgba(70,100,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 30% 25% at 15% 80%,   rgba(192,240,0,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #080D17 0%, #05070D 100%);
  position: relative;
  overflow: hidden;
}

/* Faint fade at hero bottom */
.mkt .hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, #05070D, transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── SECTION G — FEATURES PAGE SECTION MOODS ── */

/* Genie Chart — trading intelligence */
.mkt #chart {
  background:
    radial-gradient(ellipse 60% 70% at 70% 50%, rgba(1,129,250,0.07) 0%, transparent 65%),
    transparent;
  position: relative;
}

/* Education — soft learning warmth */
.mkt #education {
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(70,100,255,0.05) 0%, transparent 60%),
    rgba(255,255,255,0.008);
  position: relative;
}

/* Ask Genie — AI intelligence radial */
.mkt #ai {
  background:
    radial-gradient(ellipse 55% 65% at 65% 50%, rgba(1,129,250,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 65% 50%, rgba(192,240,0,0.03) 0%, transparent 50%),
    transparent;
  position: relative;
}

/* News — data density feeling */
.mkt #news {
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(1,129,250,0.05) 0%, transparent 60%),
    rgba(255,255,255,0.008);
  position: relative;
}

/* Community — human social warmth */
.mkt #community {
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(70,100,255,0.06) 0%, transparent 60%),
    transparent;
  position: relative;
}

/* ── SECTION H — PRICING PAGE SPOTLIGHT ── */
.mkt .pricing-section,
.mkt .section.pricing-hero,
.mkt [id*="pricing"] {
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(1,129,250,0.08) 0%, transparent 65%),
    transparent;
  position: relative;
}

/* Pro plan card animated border */
.mkt .pricing-card.featured,
.mkt .pricing-card:nth-child(2) {
  animation: borderGlow 4s ease-in-out infinite;
}

/* ── SECTION I — ABOUT PAGE ATMOSPHERE ── */
/* PERF: fixed-attachment wash → position:fixed composited layer (see body::before). */
.mkt.about-page::before {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(1,129,250,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(192,240,0,0.03) 0%, transparent 50%);
}

/* Stars/noise texture for about */
.mkt .about-page .page-hero,
.mkt .page-hero.about-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(1,129,250,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #080D17 0%, #05070D 100%);
}

/* ── SECTION J — CONTACT PAGE GLASS PANEL ── */
.mkt .contact-form-wrap,
.mkt .contact-card,
.mkt .contact-section .card {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.03) 0%,
      rgba(1,129,250,0.04) 50%,
      transparent 100%
    );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(1,129,250,0.15);
  box-shadow:
    0 0 60px rgba(1,129,250,0.06),
    0 20px 60px rgba(0,0,0,0.4);
}

.mkt .contact-page .page-hero,
.mkt .page-hero.contact-hero {
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(1,129,250,0.07) 0%, transparent 60%),
    linear-gradient(180deg, #080D17 0%, #05070D 100%);
}

/* ── SECTION K — BUTTON GLOW POLISH ── */
.mkt .btn-primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mkt .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 30px rgba(1,129,250,0.35),
    0 8px 25px rgba(1,129,250,0.20),
    0 2px 8px rgba(0,0,0,0.4);
}

.mkt .btn-primary:active {
  transform: translateY(0px);
}

/* ── SECTION L — SECTION REVEAL ANIMATION ── */
@keyframes revealFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mkt .reveal,
.mkt .reveal-left,
.mkt .reveal-right {
  animation-fill-mode: both;
}

.mkt .revealed {
  animation: revealFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── SECTION M — NAV SCROLLED STATE ENHANCEMENT ── */
/* Deepens opacity on scroll; blur stays the same as rest state per approved spec */
.mkt .nav.scrolled {
  background: rgba(10, 10, 15, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.5) !important;
}

/* ── SECTION N — RESPONSIVE SAFETY ── */
@media (max-width: 768px) {
  .mkt .hero-phone-main,
  .mkt .hero-phone-secondary,
  .mkt .ai-showcase-img,
  .mkt .chart-showcase-img,
  .mkt .gc-device-img,
  .mkt .news-phone-wrap img {
    animation: none;
  }

  .mkt {
    background-attachment: scroll;
  }
}

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

/* ── SECTION O — CANVAS ANIMATION CONTAINERS ── */

/* Sections that host canvas layers need position + overflow */
.mkt .hero-section,
.mkt #story-section,
.mkt #ai,
.mkt #chart {
  position: relative;
  overflow: hidden;
}

/* All direct children except canvas elements sit above the canvas layer */
/* NOTE: hero-section is intentionally excluded — its glow-orb children must
   remain position:absolute (set in main.css). Only .container is lifted. */
.mkt #story-section > *:not(canvas),
.mkt #ai > *:not(canvas),
.mkt #chart > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* Hero: only lift the container — glow orbs must stay position:absolute */
.mkt .hero-section > .container {
  position: relative;
  z-index: 2;
}

/* ── Particles canvas — scoped to .hero-section, clipped by overflow:hidden ── */
.mkt #particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* ── Ensure all page content sits above canvas layer ── */
.mkt main,
.mkt header,
.mkt footer,
.mkt .hero-section > .container,
.mkt .section > .container,
.mkt .gc-section > .container,
.mkt .story-section > .container,
.mkt .page-hero > .container {
  position: relative;
  z-index: 1;
}

.mkt .home-page .hero-section > .container {
  z-index: 2;
}

/* ══ INDEX2 SEAMLESS SECTION FLOW ══ */

/* ── Unified page background — index2 only ── */
.mkt .home-page main,
.mkt .home-page body {
  background: transparent;
}

/* Make all sections transparent so page bg shows through */
.mkt .home-page .section,
.mkt .home-page .gc-section,
.mkt .home-page .story-section,
.mkt .home-page .section-sm,
.mkt .home-page .news-section {
  background: transparent !important;
}

/* Stats strip — barely visible separation, no hard line */
.mkt .home-page .stats-strip,
.mkt .home-page section[style*="bg-surface"] {
  background: rgba(255,255,255,0.015) !important;
}

/* Subtle per-section atmospheric glow zones */
.mkt .home-page #features {
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(1,129,250,0.04) 0%, transparent 70%) !important;
}

.mkt .home-page #chart-section {
  background: radial-gradient(ellipse 60% 60% at 30% 50%, rgba(1,129,250,0.06) 0%, transparent 65%) !important;
}

.mkt .home-page #story-section {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(1,129,250,0.05) 0%, transparent 65%) !important;
}

/* ── Section separator — hidden on ALL pages ──
   The .section-separator is a 1px blue gradient line that sits between
   </main> and <footer> in every page's HTML. On the home page it has
   always been hidden so the footer's own border-top is the single clean
   separator. On the four inner pages it was still visible, creating a
   double-border effect (blue gradient line + footer border-top white line)
   that made the upper footer area look visually different from the home page.
   Fix: extend the hide rule to every page class so all five pages behave
   identically — only the footer's border-top defines the section boundary. */
.mkt .home-page .section-separator,
.mkt .features-page .section-separator,
.mkt .pricing-page .section-separator,
.mkt .about-page .section-separator,
.mkt .contact-page .section-separator {
  display: none !important;
}

/* ════════════════════════════════════════════
   GENIEFX COHERENCE SYSTEM — Professional Pass
════════════════════════════════════════════ */

/* ── 1A — Unified Page Background ── */
.mkt .home-page,
.mkt .features-page,
.mkt .pricing-page,
.mkt .about-page,
.mkt .contact-page {
  background: #05070D !important;
}

.mkt .home-page .section,
.mkt .home-page .gc-section,
.mkt .home-page .story-section,
.mkt .home-page .section-sm,
.mkt .home-page .page-hero,
.mkt .features-page .page-hero,
.mkt .features-page .section,
.mkt .features-page .section-sm,
.mkt .features-page .tg-section,
.mkt .features-page .news-section,
.mkt .features-page .trading-grid-bg,
.mkt .pricing-page .section,
.mkt .pricing-page .page-hero,
.mkt .about-page .section,
.mkt .about-page .page-hero,
.mkt .contact-page .section,
.mkt .contact-page .page-hero {
  background: transparent !important;
}

/* Keep very subtle surface hint on pricing plans and about alternate rows */
.mkt .pricing-page .trading-grid-bg,
.mkt .about-page .section[style*="bg-surface"] {
  background: rgba(255,255,255,0.012) !important;
}

/* ── 1B — Content-Position Glow Migration (per section, per page) ── */

/* Pricing page glows */
.mkt .pricing-page .page-hero {
  position: relative;
  overflow: hidden;
}
.mkt .pricing-page .page-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at 50% 40%, rgba(1,129,250,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.mkt .pricing-page #plans {
  position: relative;
}
.mkt .pricing-page #plans::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(1,129,250,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* About page glows */
.mkt .about-page .page-hero {
  position: relative;
  overflow: hidden;
}
.mkt .about-page .page-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 30%;
  width: 600px;
  height: 500px;
  background: radial-gradient(ellipse at 40% 40%, rgba(1,129,250,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

.mkt .about-page .section:nth-of-type(2) {
  position: relative;
}
.mkt .about-page .section:nth-of-type(2)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 70% 50% at 70% 50%, rgba(255,176,0,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Contact page glows */
.mkt .contact-page .page-hero {
  position: relative;
  overflow: hidden;
}
.mkt .contact-page .page-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: 20%;
  width: 550px;
  height: 450px;
  background: radial-gradient(ellipse at 60% 40%, rgba(1,129,250,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(16px);
}

.mkt .contact-page .section:first-of-type {
  position: relative;
}
.mkt .contact-page .section:first-of-type::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 60% 60% at 30% 60%, rgba(1,129,250,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Features page additional glows (safe — using ::before on sections not already claimed) */
.mkt .features-page .page-hero {
  position: relative;
  overflow: hidden;
}
.mkt .features-page .page-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  height: 480px;
  background: radial-gradient(ellipse at 50% 40%, rgba(1,129,250,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

/* ── 1C — Gold Gradient Stat Numbers ── */
.mkt .stat-number,
.mkt [class*="stat-number"],
.mkt .stats-strip .stat-number {
  background: linear-gradient(135deg, #FFB800 0%, #FFDA6B 50%, #FFB800 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
}

/* ── 1D — Unified Card Language ── */
.mkt .card,
.mkt .feature-card,
.mkt .testimonial-card,
.mkt .team-card,
.mkt .benefit-card,
.mkt .stat-card,
.mkt .info-card,
.mkt .step-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.03) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.mkt .card:hover,
.mkt .feature-card:hover,
.mkt .testimonial-card:hover,
.mkt .team-card:hover,
.mkt .benefit-card:hover,
.mkt .stat-card:hover,
.mkt .info-card:hover,
.mkt .step-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(1,129,250,0.25) !important;
  box-shadow: 0 12px 40px rgba(1,129,250,0.12) !important;
}

/* Preserve pricing card's larger radius */
.mkt .pricing-card {
  border-radius: var(--r-2xl) !important;
}

/* ── 1E — Remove All Section Separators ── */
.mkt .features-page .section-separator,
.mkt .pricing-page .section-separator,
.mkt .about-page .section-separator,
.mkt .contact-page .section-separator {
  display: none !important;
}

/* Remove border-top separators injected via pseudo-elements on sections */
.mkt .features-page .section + .section::before,
.mkt .pricing-page .section + .section::before,
.mkt .about-page .section + .section::before,
.mkt .contact-page .section + .section::before {
  display: none !important;
}

/* ── 1F — Soft Bottom Fades on Sections ── */
.mkt .features-page .section,
.mkt .features-page .section-sm,
.mkt .pricing-page .section,
.mkt .about-page .section,
.mkt .contact-page .section {
  position: relative;
}

.mkt .pricing-page .section::after,
.mkt .about-page .section::after,
.mkt .contact-page .section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, #05070D 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── 1G — DEAD SELECTORS — DO NOT DELETE WITHOUT SEPARATE CLEANUP PASS ──
   .nav-wrapper is not used in any current HTML. All pages use <nav class="nav">.
   These rules have no effect. Nav glass baseline is now handled by .nav in
   components.css (rest) and .nav.scrolled in Section M above (scrolled).
.features-page .nav-wrapper,
.pricing-page .nav-wrapper,
.about-page .nav-wrapper,
.contact-page .nav-wrapper {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  transition: background 0.4s ease,
              backdrop-filter 0.4s ease,
              border-color 0.4s ease !important;
}

.features-page .nav-wrapper.scrolled,
.pricing-page .nav-wrapper.scrolled,
.about-page .nav-wrapper.scrolled,
.contact-page .nav-wrapper.scrolled,
.home-page .nav-wrapper.scrolled {
  background: rgba(5,7,13,0.80) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
── END DEAD SELECTORS ── */

/* ── 1H — Contact Form Glass Panel ── */
.mkt .contact-page .contact-form-wrapper,
.mkt .contact-page .contact-form,
.mkt .contact-page form {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.40),
              inset 0 1px 0 rgba(255,255,255,0.08) !important;
  padding: 40px !important;
}

/* ── 1I — CTA Banner Celebration Styling ── */
.mkt .cta-banner {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg,
    rgba(1,129,250,0.12) 0%,
    rgba(0,80,180,0.08) 40%,
    rgba(255,176,0,0.06) 100%) !important;
  border: 1px solid rgba(1,129,250,0.20) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 80px rgba(1,129,250,0.10),
              inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.mkt .cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 200%;
  background: radial-gradient(ellipse at 50% 30%, rgba(1,129,250,0.14) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── 1J — Button System Coherence ── */
.mkt .btn-primary {
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

.mkt .btn-primary:hover {
  box-shadow: 0 0 32px rgba(1,129,250,0.55),
              0 8px 24px rgba(1,129,250,0.25) !important;
  transform: translateY(-2px) !important;
}

.mkt .btn-secondary {
  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease !important;
}

.mkt .btn-secondary:hover {
  border-color: rgba(1,129,250,0.50) !important;
  box-shadow: 0 0 20px rgba(1,129,250,0.20) !important;
  transform: translateY(-2px) !important;
}

/* ── 1K — Page Hero Consistent Padding & Text Alignment ── */
.mkt .features-page .page-hero,
.mkt .pricing-page .page-hero,
.mkt .about-page .page-hero,
.mkt .contact-page .page-hero {
  padding-top: clamp(100px, 14vh, 160px) !important;
  padding-bottom: clamp(60px, 8vh, 100px) !important;
  text-align: center !important;
}

.mkt .features-page .page-hero .container,
.mkt .pricing-page .page-hero .container,
.mkt .about-page .page-hero .container,
.mkt .contact-page .page-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ── PART 4 — Universal Z-Index Safety ── */
.mkt .home-page .section .container,
.mkt .features-page .section .container,
.mkt .features-page .page-hero .container,
.mkt .pricing-page .section .container,
.mkt .pricing-page .page-hero .container,
.mkt .about-page .section .container,
.mkt .about-page .page-hero .container,
.mkt .contact-page .section .container,
.mkt .contact-page .page-hero .container {
  position: relative;
  z-index: 1;
}

/* Nav always on top */
.mkt .nav-wrapper {
  z-index: 1000 !important;
}

/* Modals and overlays above everything */
.mkt .modal-overlay,
.mkt .modal,
.mkt [role="dialog"] {
  z-index: 2000 !important;
}

/* Glow orbs always below content */
.mkt .glow-orb {
  z-index: 0 !important;
}

/* ── Nav logo bulletproof rendering ── */
.mkt .nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.mkt .nav-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: 160px !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ── End Coherence System ── */

/* ════════════════════════════════
   GENIE CHARACTER SYSTEM
════════════════════════════════ */

/* ── Bridge: between testimonials and CTA on homepage ── */
.mkt .genie-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--sp-4) 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.mkt .genie-bridge-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(1,129,250,0.18) 0%,
    transparent 65%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.mkt .genie-bridge-img {
  height: 180px;
  width: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 20px rgba(1,129,250,0.5))
    drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  animation: floatY 4s ease-in-out infinite;
}

/* Arabic — mirror horizontally */
.mkt [dir="rtl"] .genie-bridge-img {
  transform: none;
}

@media (max-width: 768px) {
  .mkt .genie-bridge-img {
    height: 130px;
  }
}

/* ── Hero: centered above badge on features page ── */
.mkt .genie-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  direction: ltr;
  text-align: center;
  margin-bottom: var(--sp-5);
  pointer-events: none;
  overflow: visible;
}

.mkt .genie-hero-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(1,129,250,0.2) 0%,
    transparent 65%
  );
  filter: blur(35px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.mkt .genie-hero-img {
  height: 150px;
  width: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 20px rgba(1,129,250,0.5))
    drop-shadow(0 15px 30px rgba(0,0,0,0.5));
  animation: floatY 4s ease-in-out infinite;
  animation-delay: 0.3s;
  transform: none;
  transform-origin: center;
}

/* Arabic — mirror horizontally */
.mkt [dir="rtl"] .genie-hero-img {
  transform: none;
}

@media (max-width: 768px) {
  .mkt .genie-hero-img {
    height: 110px;
  }
  .mkt .genie-hero {
    margin-bottom: var(--sp-4);
  }
}

/* ── Contact: small centered character in page hero ── */
.mkt .genie-contact-character {
  display: block;
  height: 120px;
  width: auto;
  margin: var(--sp-8) auto 0;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(1,129,250,0.45))
    drop-shadow(0 12px 24px rgba(0,0,0,0.5));
  animation: floatY 4s ease-in-out infinite;
  animation-delay: 0.2s;
  pointer-events: none;
}

.mkt [dir="rtl"] .genie-contact-character {
  transform: none;
}

@media (max-width: 768px) {
  .mkt .genie-contact-character {
    height: 90px;
  }
}

/* ── End Genie Character System ── */

/* ════════════════════════════════════════
   FEATURES PAGE — PARTICLES CANVAS FIX
   screens.css adds: .features-page main { background: var(--bg-base); }
   That opaque floor covers the position:fixed z-index:0 canvas, making
   all floating currency symbols invisible on features2.html only.
   All other pages have a transparent <main>, so their canvas shows fine.
   Fix: force <main> transparent so the canvas is visible through it and
   through the already-transparent sections (covered by 1A rules above).
   Scoped strictly to .features-page — no other page is touched.
════════════════════════════════════════ */

.mkt .features-page main {
  background: transparent !important;
}

/* ════════════════════════════════════════
   JOIN FREE — GHOST BUTTON VARIANT
   Used in nav across all pages and in
   the pricing CTA row.
════════════════════════════════════════ */

.mkt .btn-ghost-primary {
  background: transparent !important;
  color: #0181FA !important;
  border: 1px solid rgba(1,129,250,0.5) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

.mkt .btn-ghost-primary:hover {
  background: rgba(1,129,250,0.10) !important;
  box-shadow: 0 0 18px rgba(1,129,250,0.30) !important;
  transform: translateY(-2px) !important;
}

/* Pricing CTA row */
.mkt .pricing-join-cta {
  text-align: center;
  margin-top: var(--sp-10);
  padding: var(--sp-10) var(--sp-4);
  position: relative;
}

.mkt .pricing-join-cta p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--sp-5);
}

/* ════════════════════════════════════════
   LOGO PERMANENT FIX — MUST BE LAST IN FILE
════════════════════════════════════════ */

.mkt .nav-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mkt .nav-logo img {
  height: 36px !important;
  width: auto !important;
  min-width: 80px !important;
  max-width: 180px !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* Nav inner — ensure logo container never clips */
.mkt .nav-inner {
  isolation: isolate;
}

/* ════════════════════════════════
   SECTION BADGE — GLOBAL LIME ACCENT STYLE
   Overrides the base .section-badge (blue, filled, from main.css) on
   every page that loads visual-enhanced.css. Applies to all hook/eyebrow
   labels: homepage sections, inner-page CTAs, blog hero, etc.
   Layout-only rules in components.css / screens.css are unaffected.
════════════════════════════════ */
.mkt .section-badge {
  color: #AFDA00;
  background: transparent;
  border: none;
}

/* ════════════════════════════════
   HERO BADGE — inherits lime treatment from .section-badge above.
   Restated explicitly so .hero-badge works consistently even when used
   without the .section-badge companion class.
════════════════════════════════ */
.mkt .hero-badge {
  color: #AFDA00;
  background: transparent;
  border: none;
}

/* ════════════════════════════════════════════
   HOMEPAGE — GLASS CARD MATERIAL SYSTEM  v2.0
   Premium neutral-glass surface. Reference: .reg-card (register.html).
   Scoped strictly to .home-page — zero impact on any other page.

   Design principles:
   · White-glass layers, not dark-opaque fills (rgba(255,255,255,…))
   · Blur only — no saturate boost (matches .reg-card: blur(20px))
   · Brand blue as border + accent, never as the card body fill
   · Deep dark shadow, no aggressive blue glow
   · Hierarchy: normal < feature (blue border) < flagship (deeper)
   · prefers-reduced-motion strips all transform / transition
════════════════════════════════════════════ */

/* ── Base glass surface — all card types, all browsers ──────── */
.mkt .home-page .stat-card,
.mkt .home-page .card,
.mkt .home-page .card-feature,
.mkt .home-page .testimonial-card,
.mkt .home-page .story-points {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 70px rgba(0, 0, 0, 0.38) !important;
  border-radius: 16px !important;
  transition:
    transform       0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color    0.28s ease,
    box-shadow      0.28s ease !important;
}

/* ── Progressive enhancement: pure blur, no saturation boost ── */
@supports (backdrop-filter: blur(1px)) {
  .mkt .home-page .stat-card,
  .mkt .home-page .card,
  .mkt .home-page .card-feature,
  .mkt .home-page .testimonial-card,
  .mkt .home-page .story-points {
    background: rgba(255, 255, 255, 0.030) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
}

/* ── Hover: refined lift, restrained blue accent, no large glow ── */
.mkt .home-page .stat-card:hover,
.mkt .home-page .card:hover,
.mkt .home-page .card-feature:hover,
.mkt .home-page .testimonial-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(1, 129, 250, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(1, 129, 250, 0.07),
    0 8px 28px rgba(0, 0, 0, 0.40),
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(1, 129, 250, 0.06) !important;
}

/* story-points: full-width panel — no lift, border accent only */
.mkt .home-page .story-points:hover {
  border-color: rgba(1, 129, 250, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 6px 24px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(1, 129, 250, 0.05) !important;
}

/* ── Feature cards — elevated glass + restrained blue border ──
   All four homepage feature cards share .card-feature.
   .card-featured is an alias kept for historical compatibility.
   Background stays white-glass; blue lives only in the border
   and the soft ambient shadow beneath the card. ── */

.mkt .home-page .card-feature,
.mkt .home-page .card.card-feature,
.mkt .home-page .card-featured,
.mkt .home-page .card.card-featured {
  background: rgba(255, 255, 255, 0.042) !important;
  border-color: rgba(1, 129, 250, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 70px rgba(0, 0, 0, 0.40),
    0 0 36px rgba(1, 129, 250, 0.07) !important;
}

@supports (backdrop-filter: blur(1px)) {
  .mkt .home-page .card-feature,
  .mkt .home-page .card.card-feature,
  .mkt .home-page .card-featured,
  .mkt .home-page .card.card-featured {
    background: rgba(255, 255, 255, 0.036) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
}

.mkt .home-page .card-feature:hover,
.mkt .home-page .card.card-feature:hover,
.mkt .home-page .card-featured:hover,
.mkt .home-page .card.card-featured:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.052) !important;
  border-color: rgba(1, 129, 250, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(1, 129, 250, 0.10),
    0 8px 28px rgba(0, 0, 0, 0.40),
    0 28px 80px rgba(0, 0, 0, 0.44),
    0 0 40px rgba(1, 129, 250, 0.10) !important;
}

/* ── Flagship — deepest glass, slightly stronger blue border ──
   Genie Chart flagship remains the most premium surface on the page,
   but stays in the same white-glass material family as all other cards.
   Difference is depth and border accent — not a blue body fill. ── */

.mkt .home-page .card-flagship {
  background: rgba(255, 255, 255, 0.050) !important;
  border-color: rgba(1, 129, 250, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 28px 90px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(1, 129, 250, 0.09) !important;
}

@supports (backdrop-filter: blur(1px)) {
  .mkt .home-page .card-flagship {
    background: rgba(255, 255, 255, 0.044) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }
}

.mkt .home-page .card-flagship:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.062) !important;
  border-color: rgba(1, 129, 250, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(1, 129, 250, 0.13),
    0 8px 28px rgba(0, 0, 0, 0.42),
    0 32px 90px rgba(0, 0, 0, 0.48),
    0 0 52px rgba(1, 129, 250, 0.12) !important;
}

/* ── Reduced motion: strip all transform and transition ── */
@media (prefers-reduced-motion: reduce) {
  .mkt .home-page .stat-card,
  .mkt .home-page .card,
  .mkt .home-page .card-feature,
  .mkt .home-page .card.card-feature,
  .mkt .home-page .testimonial-card,
  .mkt .home-page .story-points,
  .mkt .home-page .card-featured,
  .mkt .home-page .card.card-featured,
  .mkt .home-page .card-flagship {
    transition: none !important;
  }

  .mkt .home-page .stat-card:hover,
  .mkt .home-page .card:hover,
  .mkt .home-page .card-feature:hover,
  .mkt .home-page .card.card-feature:hover,
  .mkt .home-page .testimonial-card:hover,
  .mkt .home-page .story-points:hover,
  .mkt .home-page .card-featured:hover,
  .mkt .home-page .card.card-featured:hover,
  .mkt .home-page .card-flagship:hover {
    transform: none !important;
  }
}

/* ── End Homepage Glass Card Material System ── */

/* ════════════════════════════════════════════
   NAV — ALWAYS-VISIBLE BAR
   The navbar stays pinned to the top at all times via
   `position: fixed` (components.css). No hide/show transform here —
   only the background / shadow transition for the .scrolled state,
   which is already defined in components.css. Nothing to add.
════════════════════════════════════════════ */
/* ============================================================
   INDEX2 CONTINUOUS BACKGROUND PASS
   Keeps the existing lights and animations, but makes the page
   read as one long premium canvas instead of stacked section crops.
   ============================================================ */

.mkt.home-page {
  background-color: #05070D !important;
}
/* PERF: fixed-attachment wash → position:fixed composited layer (see body::before). */
.mkt.home-page::before {
  background-image:
    radial-gradient(ellipse 90% 52% at 16% 0%, rgba(1,129,250,0.075) 0%, transparent 64%),
    radial-gradient(ellipse 70% 48% at 88% 34%, rgba(70,100,255,0.055) 0%, transparent 62%),
    radial-gradient(ellipse 58% 42% at 18% 68%, rgba(192,240,0,0.030) 0%, transparent 60%),
    linear-gradient(180deg, #080D17 0%, #05070D 28%, #05070D 100%) !important;
}

.mkt .home-page main {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8,13,23,0.64) 0%, rgba(5,7,13,0.16) 16%, transparent 34%),
    radial-gradient(ellipse 88% 720px at 50% 6%, rgba(1,129,250,0.060) 0%, transparent 70%),
    radial-gradient(ellipse 72% 820px at 88% 42%, rgba(70,100,255,0.044) 0%, transparent 70%),
    radial-gradient(ellipse 68% 760px at 15% 72%, rgba(1,129,250,0.034) 0%, transparent 72%),
    transparent !important;
}

.mkt .home-page main::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.56), rgba(0,0,0,0.18) 520px, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.56), rgba(0,0,0,0.18) 520px, transparent 78%);
  opacity: 0.55;
}

.mkt .home-page .hero-section {
  background:
    radial-gradient(ellipse 96% 62% at 50% 0%, rgba(1,129,250,0.105) 0%, transparent 62%),
    radial-gradient(ellipse 48% 44% at 82% 56%, rgba(70,100,255,0.050) 0%, transparent 56%),
    linear-gradient(180deg, rgba(8,13,23,0.72) 0%, rgba(5,7,13,0.20) 78%, transparent 100%) !important;
}

.mkt .home-page .hero-section::after,
.mkt .home-page .hero-bottom-fade {
  height: 180px !important;
  background: linear-gradient(to bottom, transparent 0%, rgba(5,7,13,0.70) 78%, rgba(5,7,13,0) 100%) !important;
}

.mkt .home-page .section,
.mkt .home-page .section-sm,
.mkt .home-page .gc-section,
.mkt .home-page .story-section {
  position: relative;
  background: transparent !important;
}

.mkt .home-page #features,
.mkt .home-page #chart-section,
.mkt .home-page #story-section {
  background: transparent !important;
}

.mkt .home-page #features::before,
.mkt .home-page #chart-section::before,
.mkt .home-page #story-section::before {
  content: '';
  position: absolute;
  left: max(-6vw, -96px);
  right: max(-6vw, -96px);
  top: -120px;
  bottom: -120px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.mkt .home-page #features::before {
  background:
    radial-gradient(ellipse 70% 42% at 50% 46%, rgba(1,129,250,0.045) 0%, transparent 72%),
    radial-gradient(ellipse 36% 26% at 72% 18%, rgba(192,240,0,0.018) 0%, transparent 62%);
}

.mkt .home-page #chart-section::before {
  background:
    radial-gradient(ellipse 64% 54% at 30% 50%, rgba(1,129,250,0.060) 0%, transparent 70%),
    radial-gradient(ellipse 42% 46% at 76% 58%, rgba(0,212,255,0.026) 0%, transparent 66%);
}

.mkt .home-page #story-section::before {
  background:
    radial-gradient(ellipse 66% 54% at 52% 48%, rgba(1,129,250,0.050) 0%, transparent 70%),
    radial-gradient(ellipse 38% 30% at 30% 70%, rgba(70,100,255,0.024) 0%, transparent 64%);
}

.mkt .home-page .gc-atmosphere,
.mkt .home-page .story-bg-glow {
  opacity: 0.72;
  mask-image: radial-gradient(ellipse 78% 70% at 50% 50%, black 0%, rgba(0,0,0,0.78) 48%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 50%, black 0%, rgba(0,0,0,0.78) 48%, transparent 78%);
}

.mkt .home-page .gc-device {
  overflow: visible !important;
}

.mkt .home-page .gc-device-glow {
  width: min(560px, 110%) !important;
  height: min(560px, 110%) !important;
  opacity: 0.82;
}

.mkt .home-page .story-section {
  overflow: hidden;
}

@media (max-width: 768px) {
  .mkt.home-page {
    background-attachment: scroll;
  }

  .mkt .home-page main {
    background:
      linear-gradient(180deg, rgba(8,13,23,0.68) 0%, rgba(5,7,13,0.18) 20%, transparent 42%),
      radial-gradient(ellipse 120% 560px at 50% 4%, rgba(1,129,250,0.060) 0%, transparent 70%),
      radial-gradient(ellipse 120% 620px at 82% 48%, rgba(70,100,255,0.038) 0%, transparent 72%),
      transparent !important;
  }

  .mkt .home-page #features::before,
  .mkt .home-page #chart-section::before,
  .mkt .home-page #story-section::before {
    top: -72px;
    bottom: -72px;
  }
}

/* ============================================================
   FEATURES2 CONTINUOUS BACKGROUND PASS
   Final authority for features-page atmosphere. Preserves product
   glows/canvases while removing section-box background cuts.
   ============================================================ */

.mkt.features-page {
  background-color: #05070D !important;
}
/* PERF: fixed-attachment wash → position:fixed composited layer (see body::before). */
.mkt.features-page::before {
  background-image:
    radial-gradient(ellipse 84% 48% at 50% 0%, rgba(1,129,250,0.080) 0%, transparent 64%),
    radial-gradient(ellipse 70% 44% at 92% 30%, rgba(70,100,255,0.050) 0%, transparent 62%),
    radial-gradient(ellipse 62% 42% at 8% 62%, rgba(192,240,0,0.026) 0%, transparent 64%),
    linear-gradient(180deg, #080D17 0%, #05070D 24%, #05070D 100%) !important;
}

.mkt .features-page main {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8,13,23,0.70) 0%, rgba(5,7,13,0.18) 14%, transparent 34%),
    radial-gradient(ellipse 88% 720px at 50% 3%, rgba(1,129,250,0.062) 0%, transparent 70%),
    radial-gradient(ellipse 76% 880px at 88% 32%, rgba(70,100,255,0.040) 0%, transparent 72%),
    radial-gradient(ellipse 72% 860px at 10% 64%, rgba(1,129,250,0.032) 0%, transparent 72%),
    radial-gradient(ellipse 72% 760px at 82% 84%, rgba(192,240,0,0.018) 0%, transparent 72%),
    transparent !important;
}

.mkt .features-page main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: 0.45;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.58), rgba(0,0,0,0.16) 620px, transparent 86%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.58), rgba(0,0,0,0.16) 620px, transparent 86%);
}

.mkt .features-page main > section,
.mkt .features-page main > .features-nav-pills {
  position: relative;
  z-index: 1;
}

.mkt .features-page .page-hero,
.mkt .features-page .section,
.mkt .features-page .section-sm,
.mkt .features-page .news-section,
.mkt .features-page .tg-section,
.mkt .features-page .trading-grid-bg,
.mkt .features-page #chart,
.mkt .features-page #education,
.mkt .features-page #ai,
.mkt .features-page #news,
.mkt .features-page #growth,
.mkt .features-page #quiz,
.mkt .features-page #community {
  background: transparent !important;
}

.mkt .features-page #chart,
.mkt .features-page #education,
.mkt .features-page #ai,
.mkt .features-page #news,
.mkt .features-page #growth,
.mkt .features-page #quiz,
.mkt .features-page #community {
  overflow: visible;
}

.mkt .features-page .page-hero::before,
.mkt .features-page #chart::before,
.mkt .features-page #education::before,
.mkt .features-page #ai::before,
.mkt .features-page #news::before,
.mkt .features-page #growth::before,
.mkt .features-page #quiz::before,
.mkt .features-page #community::before {
  content: '';
  position: absolute;
  left: max(-6vw, -96px);
  right: max(-6vw, -96px);
  top: -120px;
  bottom: -120px;
  height: auto;
  display: block !important;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.mkt .features-page .page-hero::before {
  background:
    radial-gradient(ellipse 78% 54% at 50% 24%, rgba(1,129,250,0.090) 0%, transparent 70%),
    radial-gradient(ellipse 38% 28% at 50% 58%, rgba(192,240,0,0.020) 0%, transparent 62%);
}

.mkt .features-page #chart::before {
  background:
    radial-gradient(ellipse 66% 52% at 70% 48%, rgba(1,129,250,0.060) 0%, transparent 70%),
    radial-gradient(ellipse 42% 36% at 28% 64%, rgba(0,212,255,0.022) 0%, transparent 64%);
}

.mkt .features-page #education::before {
  background:
    radial-gradient(ellipse 62% 50% at 28% 50%, rgba(70,100,255,0.044) 0%, transparent 70%),
    radial-gradient(ellipse 72% 46% at 50% 50%, rgba(255,255,255,0.010) 0%, transparent 72%);
}

.mkt .features-page #ai::before {
  background:
    radial-gradient(ellipse 62% 54% at 66% 46%, rgba(1,129,250,0.070) 0%, transparent 70%),
    radial-gradient(ellipse 34% 30% at 66% 48%, rgba(192,240,0,0.020) 0%, transparent 62%);
}

.mkt .features-page #news::before {
  background:
    radial-gradient(ellipse 70% 52% at 78% 48%, rgba(1,129,250,0.056) 0%, transparent 72%),
    radial-gradient(ellipse 44% 38% at 20% 76%, rgba(192,240,0,0.026) 0%, transparent 66%),
    radial-gradient(ellipse 76% 48% at 50% 50%, rgba(255,255,255,0.010) 0%, transparent 72%);
}

.mkt .features-page #growth::before {
  background:
    radial-gradient(ellipse 66% 56% at 78% 50%, rgba(1,129,250,0.050) 0%, transparent 70%),
    radial-gradient(ellipse 44% 48% at 22% 78%, rgba(70,100,255,0.036) 0%, transparent 68%);
}

.mkt .features-page #quiz::before {
  background:
    radial-gradient(ellipse 58% 52% at 34% 54%, rgba(1,129,250,0.046) 0%, transparent 70%),
    radial-gradient(ellipse 64% 44% at 62% 50%, rgba(255,255,255,0.010) 0%, transparent 72%);
}

.mkt .features-page #community::before {
  background:
    radial-gradient(ellipse 62% 52% at 52% 48%, rgba(70,100,255,0.046) 0%, transparent 70%),
    radial-gradient(ellipse 38% 30% at 74% 30%, rgba(192,240,0,0.020) 0%, transparent 64%);
}

.mkt .features-page #chart::after,
.mkt .features-page #education::after,
.mkt .features-page #ai::after,
.mkt .features-page #news::after,
.mkt .features-page #growth::after,
.mkt .features-page #quiz::after,
.mkt .features-page #community::after {
  content: none !important;
}

.mkt .features-page .features-nav-pills {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.026) !important;
}

.mkt .features-page .news-section::before,
.mkt .features-page .tg-section::before {
  opacity: 0.74;
  mask-image: radial-gradient(ellipse 86% 74% at 50% 50%, black 0%, rgba(0,0,0,0.72) 48%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 86% 74% at 50% 50%, black 0%, rgba(0,0,0,0.72) 48%, transparent 82%);
}

.mkt .features-page .chart-showcase-glow,
.mkt .features-page .ai-showcase-glow,
.mkt .features-page .lesson-cards-glow,
.mkt .features-page .phone-ambient-glow,
.mkt .features-page .news-phone-glow {
  opacity: 0.86;
}

@media (max-width: 768px) {
  .mkt.features-page {
    background-attachment: scroll;
  }

  .mkt .features-page main {
    background:
      linear-gradient(180deg, rgba(8,13,23,0.72) 0%, rgba(5,7,13,0.20) 20%, transparent 44%),
      radial-gradient(ellipse 120% 560px at 50% 3%, rgba(1,129,250,0.060) 0%, transparent 72%),
      radial-gradient(ellipse 116% 680px at 88% 46%, rgba(70,100,255,0.036) 0%, transparent 74%),
      transparent !important;
  }

  .mkt .features-page .page-hero::before,
  .mkt .features-page #chart::before,
  .mkt .features-page #education::before,
  .mkt .features-page #ai::before,
  .mkt .features-page #news::before,
  .mkt .features-page #growth::before,
  .mkt .features-page #quiz::before,
  .mkt .features-page #community::before {
    top: -72px;
    bottom: -72px;
  }
}

/* ============================================================
   BLOG LISTING CONTINUOUS BACKGROUND PASS
   Final authority for the blog index atmosphere. Keeps the blog
   particles, badges, card hovers, and category accents, while
   making the ambient glows belong to the page instead of the
   viewport or isolated section boxes.
   ============================================================ */

.mkt.blog-listing-page {
  background-color: #05070D !important;
  background-image:
    radial-gradient(ellipse 88% 48% at 50% 0%, rgba(1,129,250,0.078) 0%, transparent 64%),
    radial-gradient(ellipse 76% 46% at 94% 34%, rgba(70,100,255,0.048) 0%, transparent 66%),
    radial-gradient(ellipse 58% 38% at 12% 68%, rgba(175,218,0,0.022) 0%, transparent 68%),
    linear-gradient(180deg, #080D17 0%, #05070D 28%, #05070D 100%) !important;
  background-attachment: scroll;
}

.mkt .blog-listing-page #blog-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,13,23,0.76) 0%, rgba(5,7,13,0.26) 16%, transparent 36%),
    radial-gradient(ellipse 92% 760px at 50% 3%, rgba(1,129,250,0.066) 0%, transparent 72%),
    radial-gradient(ellipse 78% 980px at 88% 42%, rgba(70,100,255,0.038) 0%, transparent 74%),
    radial-gradient(ellipse 70% 860px at 12% 70%, rgba(1,129,250,0.026) 0%, transparent 74%),
    transparent !important;
}

.mkt .blog-listing-page #blog-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.010) 1px, transparent 1px);
  background-size: 82px 82px;
  opacity: 0.42;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.54), rgba(0,0,0,0.18) 760px, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.54), rgba(0,0,0,0.18) 760px, transparent 90%);
}

.mkt .blog-listing-page #blog-page::after {
  content: '';
  position: absolute;
  top: 500px;
  right: max(-12vw, -170px);
  width: min(680px, 62vw);
  height: 980px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 36% at 62% 24%, rgba(251,191,36,0.018) 0%, transparent 68%),
    radial-gradient(ellipse 58% 42% at 56% 48%, rgba(175,218,0,0.022) 0%, transparent 72%),
    radial-gradient(ellipse 70% 58% at 52% 66%, rgba(1,129,250,0.030) 0%, transparent 76%);
  filter: blur(1px);
  opacity: 0.92;
  mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 80%, transparent 100%);
}

.mkt .blog-listing-page #blog-page > .blog-hero,
.mkt .blog-listing-page #blog-page > .container,
.mkt .blog-listing-page #blog-page > .section-sm {
  position: relative;
  z-index: 1;
}

.mkt .blog-listing-page .blog-hero {
  background:
    radial-gradient(ellipse 72% 54% at 50% 18%, rgba(1,129,250,0.060) 0%, transparent 70%),
    linear-gradient(180deg, rgba(8,13,23,0.18) 0%, transparent 100%) !important;
  overflow: hidden;
}

.mkt .blog-listing-page .blog-hero::after {
  background:
    radial-gradient(ellipse 52% 34% at 50% 12%, rgba(1,129,250,0.104) 0%, transparent 72%),
    radial-gradient(ellipse 32% 24% at 62% 58%, rgba(175,218,0,0.034) 0%, transparent 68%) !important;
  opacity: 0.86;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.mkt .blog-listing-page .blog-hero-inner::after {
  background: linear-gradient(90deg, transparent, rgba(1,129,250,0.16), rgba(175,218,0,0.13), transparent) !important;
  opacity: 0.80;
}

.mkt .blog-listing-page .blog-search-wrap,
.mkt .blog-listing-page .blog-featured-wrap,
.mkt .blog-listing-page .blog-start-here-section,
.mkt .blog-listing-page .blog-latest-section,
.mkt .blog-listing-page .section-sm {
  position: relative;
  isolation: isolate;
}

.mkt .blog-listing-page .blog-featured-wrap::before,
.mkt .blog-listing-page .blog-start-here-section::before,
.mkt .blog-listing-page .blog-latest-section::before,
.mkt .blog-listing-page .section-sm::before {
  content: '';
  position: absolute;
  left: max(-6vw, -96px);
  right: max(-6vw, -96px);
  top: -96px;
  bottom: -96px;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.mkt .blog-listing-page .blog-featured-wrap::before {
  background:
    radial-gradient(ellipse 68% 54% at 68% 38%, rgba(1,129,250,0.052) 0%, transparent 72%),
    radial-gradient(ellipse 36% 30% at 20% 74%, rgba(175,218,0,0.018) 0%, transparent 66%);
}

.mkt .blog-listing-page .blog-start-here-section::before {
  background:
    radial-gradient(ellipse 62% 52% at 28% 48%, rgba(70,100,255,0.040) 0%, transparent 72%),
    radial-gradient(ellipse 50% 40% at 82% 68%, rgba(1,129,250,0.028) 0%, transparent 70%);
}

.mkt .blog-listing-page .blog-latest-section::before {
  background:
    radial-gradient(ellipse 70% 56% at 76% 38%, rgba(1,129,250,0.038) 0%, transparent 74%),
    radial-gradient(ellipse 40% 32% at 86% 62%, rgba(251,191,36,0.010) 0%, transparent 70%);
}

.mkt .blog-listing-page .section-sm::before {
  background:
    radial-gradient(ellipse 64% 52% at 50% 48%, rgba(175,218,0,0.024) 0%, transparent 70%),
    radial-gradient(ellipse 76% 54% at 50% 60%, rgba(1,129,250,0.030) 0%, transparent 74%);
}

.mkt .blog-listing-page .blog-featured-wrap > *,
.mkt .blog-listing-page .blog-start-here-section > *,
.mkt .blog-listing-page .blog-latest-section > *,
.mkt .blog-listing-page .section-sm > * {
  position: relative;
  z-index: 1;
}

.mkt .blog-listing-page .start-here-timeline {
  --journey-rail-edge: calc((100% - 36px) / 8);
  position: relative;
  height: 24px;
  align-items: center;
  isolation: isolate;
  z-index: 2;
}

.mkt .blog-listing-page .start-here-timeline::before {
  content: '';
  position: absolute;
  left: var(--journey-rail-edge);
  right: var(--journey-rail-edge);
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(1,129,250,0.22) 14%, rgba(1,129,250,0.24) 50%, rgba(1,129,250,0.22) 86%, transparent);
  filter: blur(6px);
  opacity: 0.82;
}

.mkt .blog-listing-page .start-here-timeline::after {
  content: '';
  position: absolute;
  left: var(--journey-rail-edge);
  right: var(--journey-rail-edge);
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(1,129,250,0.10) 0%,
    rgba(1,129,250,0.44) 14%,
    rgba(1,129,250,0.66) 50%,
    rgba(1,129,250,0.44) 86%,
    rgba(1,129,250,0.10) 100%
  );
  box-shadow:
    0 0 0 1px rgba(1,129,250,0.07),
    0 0 14px rgba(1,129,250,0.18);
  opacity: 0.98;
}

.mkt .blog-listing-page .start-here-node {
  position: relative;
  z-index: 3;
}

.mkt .blog-listing-page .start-here-node::before {
  position: relative;
  z-index: 4;
  width: 9px;
  height: 9px;
  background: #0181FA;
  box-shadow:
    0 0 0 3px #07070A,
    0 0 0 6px rgba(1,129,250,0.14),
    0 0 16px rgba(1,129,250,0.48);
}

.mkt .blog-listing-page .blog-card--market-news:hover,
.mkt .blog-listing-page .blog-featured-main--market-news:hover,
.mkt .blog-listing-page .blog-featured-pick--market-news:hover {
  box-shadow:
    0 18px 46px rgba(0,0,0,0.30),
    0 0 24px rgba(251,191,36,0.070),
    inset 0 1px 0 rgba(255,255,255,0.11) !important;
}

@media (max-width: 768px) {
  .mkt.blog-listing-page {
    background-attachment: scroll;
  }

  .mkt .blog-listing-page #blog-page {
    background:
      linear-gradient(180deg, rgba(8,13,23,0.76) 0%, rgba(5,7,13,0.24) 22%, transparent 46%),
      radial-gradient(ellipse 120% 560px at 50% 3%, rgba(1,129,250,0.062) 0%, transparent 72%),
      radial-gradient(ellipse 112% 640px at 88% 46%, rgba(70,100,255,0.034) 0%, transparent 74%),
      transparent !important;
  }

  .mkt .blog-listing-page #blog-page::after {
    top: 420px;
    right: -46vw;
    width: 92vw;
    height: 760px;
    opacity: 0.64;
  }

  .mkt .blog-listing-page .blog-featured-wrap::before,
  .mkt .blog-listing-page .blog-start-here-section::before,
  .mkt .blog-listing-page .blog-latest-section::before,
  .mkt .blog-listing-page .section-sm::before {
    top: -72px;
    bottom: -72px;
  }
}