/* ==========================================================================
   Forexalpha — Professional 3-Color Design System
   Sky Blue  | Pure White | Deep Navy
   ========================================================================== */

/* ── Open Sans Font Family ──────────────────────── */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-Semibold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-SemiboldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/open-sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
}

/* ── Reset & Global Typography ──────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, ul, ol,
div, section, article, nav, header, footer, main,
button, input, select, textarea, label,
table, th, td, blockquote, form {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ── Global Headings Typography (Softened Boldness ~30% Reduction) ── */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.elementor-heading-title,
.entry-title,
.site-title,
.widget-title,
.card-title,
.pricing-card-title,
.section-title {
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}

/* Utility font-weight softening for headings & text across Tailwind */
.font-extrabold,
.font-black {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 600 !important;
}

.font-semibold {
  font-weight: 500 !important;
}

b, strong {
  font-weight: 600 !important;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #f8fafc;
  color: #334155;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* Preserve Font Awesome & icon fonts */
.fa, .fas, .fab, .far, [class*="fa-"], [class*="eicon-"], .eicon {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'eicons', inherit !important;
}

/* ── WordPress / Astra / Elementor container strip ── */
#page, .site, #content, .site-content,
.ast-container, .ast-container-fluid, .ast-separate-container,
#primary, #secondary, .entry-content,
.elementor, .elementor-element, .e-con, .e-con-full,
.e-parent, .e-lazyloaded, .elementor-widget-container, main,
.elementor-widget, .site-header, #masthead,
.footer-width-fixer, #colophon, .ast-row, .ast-grid-common-col {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: #f1f5f9; }
::-webkit-scrollbar-thumb        { background: #93c5fd; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover  { background: #0284c7; }

/* ─────────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────────── */
.navbar {
  width: 100% !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #e0f2fe !important;
  box-shadow: 0 1px 10px rgba(2, 132, 199, 0.07) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.12) !important;
  border-bottom-color: #bae6fd !important;
}

.navbar-container {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── Nav links ── */
.nav-link {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  padding: 0 !important;
  line-height: 1 !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-link:hover { color: #0284c7 !important; }

/* Strip browser <button> defaults */
.navbar button.nav-link {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
}

/* ── CTA "Get Started" button ── */
.cta-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 10px 22px !important;
  border-radius: 9px !important;
  border: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.28) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
}
.cta-button:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────
   SERVICES DROPDOWN
───────────────────────────────────────────────── */
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 18rem;
  background: #ffffff !important;
  border: 1px solid #e0f2fe !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px -6px rgba(2, 132, 199, 0.16) !important;
  padding: 6px !important;
  z-index: 99999 !important;
}

.dropdown-container::after,
.relative.group::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.dropdown-container:hover .dropdown,
.dropdown-container:focus-within .dropdown,
.relative.group:hover .dropdown,
.dropdown.show-dropdown { display: block !important; }

.dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.dropdown-item:hover { background: #f0f9ff !important; }
.dropdown-item h3 {
  color: #0f172a !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin: 0 0 2px !important;
}
.dropdown-item p {
  color: #64748b !important;
  font-size: 0.75rem !important;
  margin: 0 !important;
}

/* ── Mobile menu ── */
#mobile-menu {
  display: none !important;
  background: #ffffff !important;
  border: 1px solid #e0f2fe !important;
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.12) !important;
}

#mobile-menu.open {
  display: block !important;
}

@media (min-width: 1024px) {
  #mobile-menu, #menu-toggle {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────
   HERO SECTIONS  (dark bg + white text)
───────────────────────────────────────────────── */
.gradient-bg,
section.gradient-bg,
section.relative.overflow-hidden,
section.text-white,
section:has(video),
section.bg-blue-600 {
  width: 100% !important;
  background: linear-gradient(160deg, #0c1221 0%, #0f172a 65%, #162033 100%) !important;
  color: #ffffff !important;
}

/* Hero headings */
.gradient-bg h1, .gradient-bg h2, .gradient-bg h3,
section.gradient-bg h1, section.gradient-bg h2,
section.relative.overflow-hidden h1, section.relative.overflow-hidden h2,
section.text-white h1, section.text-white h2,
section:has(video) h1, section:has(video) h2,
section.bg-blue-600 h1, section.bg-blue-600 h2,
#main-headline, #hero-title, #main-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Hero body text */
.gradient-bg p, section.gradient-bg p,
section.relative.overflow-hidden p, section.text-white p,
section:has(video) p, section.bg-blue-600 p,
#hero-description, #hero-subheadline, #subtitle {
  color: #cbd5e1 !important;
}

/* Stat numbers + counters */
.counter,
section:has(video) .text-white,
section.relative.overflow-hidden .text-white,
.gradient-bg .text-white { color: #ffffff !important; }

/* Stat labels */
.text-blue-200, .text-blue-100, .text-sky-200, .text-sky-100,
.text-slate-300, .text-slate-200, .text-emerald-200,
.text-green-200, .text-purple-200, .text-yellow-200 {
  color: #94a3b8 !important;
}

/* Hero badge pill */
.bg-blue-500\/20, .bg-emerald-500\/20, .bg-white\/10,
.bg-sky-500\/20, .bg-yellow-500\/20, .bg-purple-500\/20 {
  background: rgba(14, 165, 233, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #e0f2fe !important;
}

/* ─────────────────────────────────────────────────
   BODY / LIGHT SECTIONS
───────────────────────────────────────────────── */
section:not(.gradient-bg):not(.text-white):not(:has(video)):not(.bg-blue-600) {
  background: #f8fafc !important;
}

.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100,
.bg-green-50, .bg-yellow-50, .bg-purple-50, .bg-indigo-100,
.bg-emerald-50, .bg-blue-50 {
  background: #f0f9ff !important;
}

/* Section headings */
section:not(.gradient-bg):not(.text-white):not(:has(video)) h1,
section:not(.gradient-bg):not(.text-white):not(:has(video)) h2,
section:not(.gradient-bg):not(.text-white):not(:has(video)) h3,
section:not(.gradient-bg):not(.text-white):not(:has(video)) h4,
.text-gray-900, .text-slate-900, .text-black { color: #0f172a !important; }

p, .text-gray-600, .text-gray-700, .text-gray-500,
.text-slate-600, .text-slate-700, .text-slate-500 { color: #475569 !important; }

/* Brand accent color */
.text-blue-600, .text-blue-500, .text-sky-600, .text-sky-500,
.text-green-600, .text-emerald-600, .text-emerald-500,
.text-purple-600, .text-yellow-600, .text-indigo-600,
.text-teal-600, .text-orange-600, .text-red-500 { color: #0284c7 !important; }

/* ─────────────────────────────────────────────────
   CARDS — Minimal professional hover
───────────────────────────────────────────────── */
.bg-white {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.bg-white:hover,
.card-hover:hover {
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.1) !important;
  transform: translateY(-2px) !important;
  border-color: #bae6fd !important;
}

/* Explicit card-hover class */
.card-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

/* Icon containers — all → sky-50 */
.bg-blue-100, .bg-green-100, .bg-yellow-100, .bg-purple-100,
.bg-red-100, .bg-indigo-100, .bg-emerald-100, .bg-orange-100,
.bg-teal-100, .bg-sky-100, .bg-sky-50 {
  background: #f0f9ff !important;
  border-radius: 10px !important;
}

/* Icon color inside wrappers */
.text-blue-400, .text-blue-500,
.text-green-400, .text-green-500,
.text-yellow-400, .text-yellow-500,
.text-purple-400, .text-purple-500,
.text-red-400, .text-red-500,
.text-emerald-400, .text-emerald-500,
.text-teal-500, .text-orange-500 { color: #0284c7 !important; }

/* Badges */
.bg-blue-400, .bg-blue-500, .bg-blue-600,
.bg-green-400, .bg-green-500, .bg-green-600,
.bg-yellow-400, .bg-yellow-500, .bg-yellow-600,
.bg-purple-500, .bg-purple-600,
.bg-emerald-500, .bg-emerald-600,
.bg-teal-600, .bg-orange-600 {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}

/* Borders */
.border-blue-500, .border-sky-500, .border-emerald-500,
.border-green-400, .border-yellow-400,
.border-gray-200, .border-gray-100,
.border-slate-200, .border-gray-300 { border-color: #e2e8f0 !important; }

/* ─────────────────────────────────────────────────
   BUTTONS — One unified style
───────────────────────────────────────────────── */
a.glow-effect, button.glow-effect, .glow-effect,
a.bg-blue-600, button.bg-blue-600,
a.bg-emerald-600, button.bg-emerald-600,
a.bg-green-600, button.bg-green-600,
a#primary-cta-btn, button#primary-cta-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-decoration: none;
}

a.glow-effect:hover, button.glow-effect:hover, .glow-effect:hover,
a.bg-blue-600:hover, button.bg-blue-600:hover,
a.bg-emerald-600:hover, button.bg-emerald-600:hover,
a.bg-green-600:hover, button.bg-green-600:hover,
a#primary-cta-btn:hover, button#primary-cta-btn:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* From-gradient buttons (mobile get started) */
.bg-gradient-to-r.from-sky-500 {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
}

/* ─────────────────────────────────────────────────
   TRUST BADGE DOTS (hero)  — Sky blue only
───────────────────────────────────────────────── */
.bg-green-400.rounded-full,
.bg-yellow-400.rounded-full,
.bg-blue-400.rounded-full,
.bg-emerald-400.rounded-full {
  background: #0ea5e9 !important;
}

/* ─────────────────────────────────────────────────
   GRADIENT VIDEO CARD INSIDE PAGE (about, index)
───────────────────────────────────────────────── */
.bg-gradient-to-br.from-blue-600.to-purple-600,
.bg-gradient-to-br.from-blue-500.to-purple-500,
.bg-gradient-to-br.from-blue-600.to-indigo-700 {
  background: linear-gradient(135deg, #0f172a, #1e3a5f) !important;
}

/* ─────────────────────────────────────────────────
   FORMS
───────────────────────────────────────────────── */
input, select, textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: 0.9375rem !important;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
footer {
  width: 100% !important;
  max-width: 100% !important;
  background: #0a0d17 !important;
  border-top: 2px solid #0ea5e9 !important;
}

footer h4, footer h3 { color: #00E5FF !important; font-weight: 600 !important; }
footer p, footer li { color: rgba(255, 255, 255, 0.8) !important; }
footer a, footer ul li a { color: rgba(255, 255, 255, 0.8) !important; text-decoration: none !important; transition: color 0.2s ease !important; }
footer a:hover, footer ul li a:hover { color: #00E5FF !important; }

/* ─────────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────────── */
section { width: 100% !important; max-width: 100% !important; }

@media (max-width: 768px) {
  h1 { font-size: 2rem !important; line-height: 2.5rem !important; }
  h2 { font-size: 1.625rem !important; line-height: 2.125rem !important; }
}

/* ==========================================================
   RESPONSIVE UTILITIES — Restored (purge removed these)
   ========================================================== */

/* display utilities */
.hidden   { display: none !important; }
.block    { display: block !important; }
.flex     { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid     { display: grid !important; }
.inline-block { display: inline-block !important; }

/* sm breakpoint (640px+) */
@media (min-width: 640px) {
  .sm\:flex           { display: flex !important; }
  .sm\:hidden         { display: none !important; }
  .sm\:block          { display: block !important; }
  .sm\:px-6           { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .sm\:flex-row        { flex-direction: row !important; }
  .sm\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* md breakpoint (768px+) */
@media (min-width: 768px) {
  .md\:flex           { display: flex !important; }
  .md\:hidden         { display: none !important; }
  .md\:block          { display: block !important; }
  .md\:grid           { display: grid !important; }
  .md\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:text-4xl       { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .md\:text-5xl       { font-size: 3rem !important; line-height: 1 !important; }
  .md\:text-6xl       { font-size: 3.75rem !important; line-height: 1 !important; }
  .md\:col-span-2     { grid-column: span 2 / span 2 !important; }
  .md\:px-6           { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* lg breakpoint (1024px+) */
@media (min-width: 1024px) {
  .lg\:flex           { display: flex !important; }
  .lg\:hidden         { display: none !important; }
  .lg\:block          { display: block !important; }
  .lg\:grid           { display: grid !important; }
  .lg\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:px-8           { padding-left: 2rem !important; padding-right: 2rem !important; }
  .lg\:text-4xl       { font-size: 2.25rem !important; }
  .lg\:text-5xl       { font-size: 3rem !important; }
  .lg\:col-span-2     { grid-column: span 2 / span 2 !important; }
  .lg\:items-center   { align-items: center !important; }
}

/* xl breakpoint (1280px+) */
@media (min-width: 1280px) {
  .xl\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .xl\:px-0           { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ─────────────────────────────────────────────────
   DARK FEATURE CARDS (Trading Chart, Video Player)
───────────────────────────────────────────────── */
.bg-gradient-to-br.from-slate-800,
[class*="from-slate-800"],
.dark-feature-card {
  background: linear-gradient(145deg, #0b132b 0%, #111d38 50%, #1a2942 100%) !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px -10px rgba(2, 132, 199, 0.25), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  position: relative;
}

.bg-gradient-to-br.from-slate-800 .text-white,
[class*="from-slate-800"] .text-white,
.dark-feature-card .text-white {
  color: #ffffff !important;
}

.bg-gradient-to-br.from-slate-800 h4,
[class*="from-slate-800"] h4,
.dark-feature-card h4 {
  color: #ffffff !important;
}

/* SVG Trading Chart Glow & Animation */
.chart-animation {
  filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.8)) !important;
}

.chart-area {
  fill: url(#chartGradient) !important;
  opacity: 0.25;
}

/* ─────────────────────────────────────────────────
   DARK FEATURE CARDS — Force White Text on All Headings & Paragraphs
───────────────────────────────────────────────── */
.dark-feature-card,
.dark-feature-card h1,
.dark-feature-card h2,
.dark-feature-card h3,
.dark-feature-card h4,
.dark-feature-card .text-white {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.dark-feature-card p {
  color: #cbd5e1 !important;
}

/* Grid cols 3 fallback */
.grid-cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ─────────────────────────────────────────────────
   PRICING CARDS — Perfect Vertical Grid & Alignment
───────────────────────────────────────────────── */
.pricing-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 32px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  height: 100% !important;
}

.pricing-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(2, 132, 199, 0.12) !important;
}

.pricing-card.featured {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: linear-gradient(150deg, #0284c7 0%, #0369a1 50%, #075985 100%) !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 40px rgba(2, 132, 199, 0.3) !important;
  transform: scale(1.03) !important;
  position: relative !important;
  height: 100% !important;
}

.pricing-card.featured:hover {
  transform: scale(1.03) translateY(-4px) !important;
  box-shadow: 0 24px 48px rgba(2, 132, 199, 0.4) !important;
}

.pricing-card.featured h3,
.pricing-card.featured h4,
.pricing-card.featured .text-5xl,
.pricing-card.featured span,
.pricing-card.featured li {
  color: #ffffff !important;
}

.pricing-card.featured p,
.pricing-card.featured .text-blue-200,
.pricing-card.featured .text-blue-100 {
  color: #e0f2fe !important;
}

.pricing-card.featured .bg-yellow-400 {
  background: #f59e0b !important;
  color: #ffffff !important;
}

.pricing-card #primary-cta-btn,
.pricing-card .cta-button,
.pricing-card a.glow-effect {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 14px 24px !important;
  margin-top: 20px !important;
  border-radius: 10px !important;
}

.pricing-card.featured #primary-cta-btn,
.pricing-card.featured a.glow-effect {
  background: #ffffff !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.pricing-card.featured #primary-cta-btn:hover,
.pricing-card.featured a.glow-effect:hover {
  background: #f0f9ff !important;
  color: #0369a1 !important;
  transform: translateY(-2px) !important;
}

/* ─────────────────────────────────────────────────
   FEATURE ICON BOXES — Compact, Symmetrical (50% size reduction)
───────────────────────────────────────────────── */
.feature-icon-box {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
}

.feature-icon-box svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  color: #0284c7 !important;
}

/* ─────────────────────────────────────────────────
   FEATURE ICON BOX — Strict Compact Sizing (48px / 24px)
───────────────────────────────────────────────── */
.feature-icon-box,
.feature-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
}

.feature-icon-box svg,
.feature-icon svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  color: #0284c7 !important;
  display: block !important;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE SYSTEM — Full Site Coverage
   Breakpoints: 1024px (Laptop/Tablet Landscape), 768px (Tablet/Large Phone), 480px (Mobile Phone), 360px (Small Phone)
   ========================================================================== */

/* ── Global Fluid Media ── */
img, svg, video, iframe {
  max-width: 100%;
}

/* ── Breakpoint: ≤ 768px (Tablet & Mobile) ── */
@media (max-width: 768px) {

  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
  }

  /* ── Mobile Navbar ── */
  .navbar-container {
    height: 62px !important;
    padding: 0 16px !important;
  }
  .navbar-container img[alt="Forexalpha"],
  .navbar-container img {
    height: 40px !important;
    width: auto !important;
  }

  /* ── Hero Section ── */
  section.gradient-bg {
    min-height: auto !important;
    padding-top: 75px !important;
  }
  section.gradient-bg > div[style*="max-width:1200px"],
  section.gradient-bg > div[style*="max-width: 1200px"] {
    padding: 60px 18px 40px !important;
    display: block !important;
    width: 100% !important;
  }
  #main-headline {
    font-size: clamp(1.75rem, 6.5vw, 2.4rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
  }
  #hero-subheadline {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }

  /* Hero CTA buttons row → stacked & full width */
  section.gradient-bg div[style*="display:flex"][style*="gap:14px"],
  section.gradient-bg div[style*="display: flex"][style*="gap: 14px"] {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
  section.gradient-bg a[id="primary-cta-btn"],
  section.gradient-bg a[id="secondary-cta-btn"] {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
  }

  /* Asset badges row */
  section.gradient-bg div[style*="display:flex"][style*="gap:12px"],
  section.gradient-bg div[style*="display: flex"][style*="gap: 12px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  section.gradient-bg div[style*="display:flex"][style*="gap:12px"] > div,
  section.gradient-bg div[style*="display: flex"][style*="gap: 12px"] > div {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
  }

  /* ── Grids to Single Column ── */
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-3,
  .grid.md\:grid-cols-2,
  .grid.lg\:grid-cols-2,
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-4,
  div[class*="grid md:grid-cols-3"],
  div[class*="grid lg:grid-cols-3"],
  div[class*="grid md:grid-cols-2"],
  div[class*="grid lg:grid-cols-2"],
  div[class*="grid md:grid-cols-4"],
  div[class*="grid lg:grid-cols-4"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Impact Numbers: 2x2 Grid on Mobile */
  .grid.md\:grid-cols-4,
  div[class*="grid md:grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* ── Market Solutions & Top Brokers Cards ── */
  .solutions-card,
  .broker-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .solutions-card > div[style*="padding:32px"],
  .broker-card > div[style*="padding:28px"] {
    padding: 24px 20px 16px !important;
  }
  .solutions-card > div[style*="padding:0 28px 28px"],
  .broker-card > div[style*="padding:24px 28px 28px"] {
    padding: 0 20px 20px !important;
  }

  /* ── Final CTA Section ── */
  section.gradient-bg > div[style*="max-width: 1100px"],
  section.gradient-bg > div[style*="max-width:1100px"] {
    padding: 0 16px !important;
  }
  section.gradient-bg div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  section.gradient-bg div[style*="justify-content: center; align-items: center; gap: 16px"] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  section.gradient-bg div[style*="justify-content: center; align-items: center; gap: 16px"] a {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 14px 20px !important;
  }

  /* ── General Section Spacing ── */
  .py-20 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .py-16 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .mb-16 { margin-bottom: 28px !important; }
  .mb-12 { margin-bottom: 20px !important; }

  /* ── Section Headings Typography ── */
  .text-4xl, h2.text-4xl, h2 {
    font-size: clamp(1.5rem, 5vw, 1.85rem) !important;
    line-height: 1.3 !important;
  }
  .text-5xl, h2.text-5xl {
    font-size: clamp(1.7rem, 6vw, 2.1rem) !important;
    line-height: 1.25 !important;
  }
  .text-3xl { font-size: 1.35rem !important; }
  .text-2xl { font-size: 1.15rem !important; }
  .text-xl  { font-size: 1rem !important; }

  /* ── Card Inner Padding ── */
  .p-8 { padding: 20px !important; }
  .p-6 { padding: 16px !important; }

  /* ── Floating Stats on About Section ── */
  .absolute.-bottom-6.-left-6,
  div[class*="absolute -bottom-6"] {
    position: static !important;
    display: inline-flex !important;
    margin-top: 14px !important;
    margin-right: 10px !important;
  }
  .absolute.-top-6.-right-6,
  div[class*="absolute -top-6"] {
    position: static !important;
    display: inline-flex !important;
    margin-top: 14px !important;
  }

  /* ── Footer ── */
  footer div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  #newsletterForm {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #newsletterForm input,
  #newsletterForm button {
    width: 100% !important;
    min-width: unset !important;
  }
  footer div[style*="justify-content: space-between"][style*="padding-top: 2rem"] {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  footer div[style*="display: flex; gap: 2rem"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  /* ── Max Width Boundaries ── */
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Breakpoint: ≤ 480px (Mobile Phones) ── */
@media (max-width: 480px) {

  .navbar-container {
    height: 56px !important;
    padding: 0 12px !important;
  }
  .navbar-container img[alt="Forexalpha"],
  .navbar-container img {
    height: 36px !important;
  }

  #main-headline {
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
  }
  #hero-subheadline {
    font-size: 0.9rem !important;
  }

  .py-20 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .p-8 { padding: 16px !important; }
  .p-6 { padding: 14px !important; }

  /* Counter numbers */
  .text-5xl.counter,
  div[class*="text-5xl font-bold"][class*="counter"] {
    font-size: 2.2rem !important;
  }

  /* Footer social icons */
  footer div[style*="display: flex; gap: 1rem"] {
    gap: 12px !important;
  }
}

/* ── Breakpoint: 769px – 1024px (Tablets) ── */
@media (min-width: 769px) and (max-width: 1024px) {

  #main-headline {
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
  }

  /* 3-col & 4-col grids adapt to 2 columns */
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-3,
  .grid.md\:grid-cols-4,
  div[class*="grid md:grid-cols-3"],
  div[class*="grid lg:grid-cols-3"],
  div[class*="grid md:grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  .py-20 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .max-w-7xl, .max-w-6xl {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}