/* ============ HERO ============ */
  .hero {
    position: relative;
    padding: 72px 0 88px;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: -10% 0 0 0;
    background:
      radial-gradient(1000px 600px at 90% 30%, rgba(42, 111, 168, 0.16), transparent 55%),
      radial-gradient(800px 500px at 10% 90%, rgba(184, 150, 104, 0.08), transparent 55%);
    pointer-events: none;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
  }
  .hero-copy { position: relative; z-index: 3; }
  .hero h1 {
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
  .hero h1 .accent {
    background: linear-gradient(110deg, #1F4E78 0%, #2A6FA8 50%, #1F4E78 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
  }
  .hero .lead { margin-top: 26px; max-width: 560px; font-size: 18px; }
  .hero-ctas {
    display: flex;
    gap: 14px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    max-width: 560px;
  }
  .hero-stat .num {
    font-family: var(--ff-num);
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .hero-stat .lbl {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 4px;
    line-height: 1.4;
  }

  /* HERO ART */
  .hero-art {
    position: relative;
    height: 600px;
  }
  .hero-art .img-slot {
    position: absolute;
    inset: 10px 24px;
    z-index: 1;
  }
  @keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  .chart-card {
    position: absolute;
    width: 380px;
    top: 80px;
    right: -20px;
    padding: 22px;
    z-index: 4;
    animation: float 7s ease-in-out infinite;
  }
  .chart-card .ch-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .chart-card .ch-title {
    font-size: 12px;
    color: var(--ink-4);
    font-weight: 500;
  }
  .chart-card .ch-symbol {
    font-family: var(--ff-num);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: 0.05em;
  }
  .chart-card .ch-trend {
    font-family: var(--ff-num);
    font-size: 11px;
    font-weight: 700;
    color: #1A8458;
    background: rgba(26, 132, 88, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
  }
  .chart-card svg { width: 100%; height: 110px; display: block; }
  .chart-card .ch-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-family: var(--ff-num);
    font-size: 10px;
    color: var(--ink-5);
  }

  .stat-pill {
    position: absolute;
    padding: 14px 18px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 16px;
    box-shadow: 0 18px 40px -20px rgba(22, 57, 88, 0.4), 0 4px 14px -6px rgba(22, 57, 88, 0.18);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
    animation: float 8s ease-in-out infinite;
  }
  .stat-pill .icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #245E92, #1F4E78);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 14px -6px rgba(31, 78, 120, 0.5);
  }
  .stat-pill .label { font-size: 11px; color: var(--ink-4); }
  .stat-pill .value { font-family: var(--ff-num); font-weight: 700; font-size: 15px; color: var(--ink); }

  .pill-1 { bottom: 100px; right: 60px; animation-delay: 0.4s; }
  .pill-2 { top: 380px; left: 40px; animation-delay: 1.4s; }

  /* Trader silhouette guide line */
  .grid-lines {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(31, 78, 120, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(31, 78, 120, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    z-index: 0;
  }

  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-art { height: 480px; }
    .hero-art .orb-blue { width: 280px; height: 280px; left: 30%; top: 60px; }
    .chart-card { width: 88%; right: 6%; top: 30px; }
    .hero-stats { grid-template-columns: 1fr 1fr; max-width: 100%; }
  }

  /* Marquee strip */
  .ticker {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,0.5);
    overflow: hidden;
    padding: 18px 0;
  }
  .ticker-track {
    display: flex;
    gap: 64px;
    animation: tick 40s linear infinite;
    white-space: nowrap;
    font-family: var(--ff-num);
    font-size: 13.5px;
    color: var(--ink-3);
    width: max-content;
  }
  @keyframes tick {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
  }
  .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .ticker-item .sym { font-weight: 700; color: var(--ink); letter-spacing: 0.05em; }
  .ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.5; }

  /* ============ ABOUT BRIEF ============ */
  .about-brief {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .about-art {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r-xl);
    background:
      linear-gradient(180deg, rgba(31,78,120,0.04), transparent),
      var(--brand-pale);
    overflow: hidden;
  }
  .about-art .orb-blue {
    width: 240px; height: 240px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .about-art .placeholder-tag {
    position: absolute;
    bottom: 20px; right: 20px;
    font-family: var(--ff-num);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(31, 78, 120, 0.4);
    font-weight: 600;
  }
  .about-art .ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(31, 78, 120, 0.18);
  }
  .about-art .ring-1 { width: 360px; height: 360px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
  .about-art .ring-2 { width: 480px; height: 480px; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.6; }
  .about-art .arc {
    position: absolute;
    top: 30px; right: 30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    border-color: var(--gold) transparent transparent transparent;
    transform: rotate(-30deg);
  }

  @media (max-width: 980px) {
    .about-brief { grid-template-columns: 1fr; gap: 50px; }
    .about-art { aspect-ratio: 16/12; }
  }

  /* ============ SERVICES ============ */
  .svc-card {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
  }
  .svc-card .svc-icon {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, #2A6FA8 0%, #1F4E78 50%, #163958 100%);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 12px 24px -10px rgba(31, 78, 120, 0.5);
  }
  .svc-card .svc-icon::after {
    content: "";
    position: absolute;
    inset: 4px 4px auto auto;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.7), transparent 70%);
  }
  .svc-card .svc-num {
    font-family: var(--ff-num);
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.2em;
  }
  .svc-card h3 { font-size: 22px; }
  .svc-card p { color: var(--ink-3); font-size: 15px; line-height: 1.8; }
  .svc-card .more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-weight: 600;
    font-size: 14px;
  }
  .svc-card .more svg { transition: transform .2s; }
  .svc-card:hover .more svg { transform: translateX(-4px); }
  .svc-cta { text-align: center; margin-top: 56px; }

  /* ============ WHY US ============ */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface);
  }
  .why-cell {
    padding: 40px 28px;
    border-left: 1px solid var(--line);
    position: relative;
    transition: background .3s;
  }
  .why-cell:first-child { border-left: 1px solid var(--line); }
  .why-cell:last-child { border-left: none; }
  .why-cell:hover { background: var(--bg-soft); }
  .why-cell .why-num {
    font-family: var(--ff-num);
    font-size: 11px;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.2em;
  }
  .why-cell h4 {
    margin-top: 18px;
    margin-bottom: 12px;
    font-size: 17px;
    color: var(--ink);
  }
  .why-cell p {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.7;
  }
  .why-cell .why-ico {
    color: var(--brand);
    margin-bottom: 20px;
    display: inline-flex;
  }
  @media (max-width: 1180px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .why-cell { border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line); }
    .why-cell:nth-child(2n) { border-left: none !important; }
    .why-cell:nth-child(-n+2) { border-top: none; }
  }
  @media (max-width: 600px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-cell { border-left: none !important; border-top: 1px solid var(--line); }
    .why-cell:first-child { border-top: none; }
  }

  /* ============ HOW WE WORK ============ */
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
  }
  .steps::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(31, 78, 120, 0.2), transparent);
  }
  .step {
    position: relative;
    text-align: center;
  }
  .step .step-num {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    font-family: var(--ff-num);
    font-weight: 700;
    font-size: 22px;
    color: var(--brand);
    position: relative;
    box-shadow: 0 6px 18px -8px rgba(22, 57, 88, 0.2);
  }
  .step .step-num::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-pale), transparent);
    z-index: -1;
    opacity: 0.6;
  }
  .step h4 { font-size: 17px; margin-bottom: 10px; }
  .step p { font-size: 14px; color: var(--ink-3); }
  @media (max-width: 980px) {
    .steps { grid-template-columns: 1fr 1fr; gap: 28px; }
    .steps::before { display: none; }
  }
  @media (max-width: 600px) {
    .steps { grid-template-columns: 1fr; }
  }

  /* ============ PROGRAMS / TRACKS ============ */
  .programs {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: center;
  }
  .programs-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .program-item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: transform .3s, border-color .3s, background .3s;
  }
  .program-item:hover {
    transform: translateX(-6px);
    border-color: rgba(31, 78, 120, 0.25);
    background: linear-gradient(180deg, #fff, #FBFCFD);
  }
  .program-item .pg-num {
    font-family: var(--ff-num);
    font-size: 28px;
    font-weight: 700;
    color: var(--brand-pale);
    -webkit-text-stroke: 1px var(--brand);
    flex-shrink: 0;
    width: 60px;
  }
  .program-item h4 { font-size: 17px; margin-bottom: 4px; }
  .program-item p { font-size: 13.5px; color: var(--ink-4); margin: 0; }
  .program-item svg { margin-right: auto; color: var(--brand); opacity: 0.5; transition: opacity .3s; }
  .program-item:hover svg { opacity: 1; }

  @media (max-width: 980px) {
    .programs { grid-template-columns: 1fr; }
  }

  /* ============ ANALYTICS PREVIEW ============ */
  .analytics-preview {
    background: linear-gradient(180deg, #0A1828 0%, #0A0F1A 100%);
    color: #fff;
    border-radius: var(--r-2xl);
    padding: 80px 64px;
    position: relative;
    overflow: hidden;
  }
  .analytics-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(800px 400px at 90% 0%, rgba(31, 78, 120, 0.5), transparent 60%),
      radial-gradient(600px 300px at 5% 100%, rgba(184, 150, 104, 0.12), transparent 60%);
    pointer-events: none;
  }
  .analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
    position: relative;
  }
  .analytics-grid h2 { color: #fff; }
  .analytics-grid .lead { color: #98A4B4; margin-top: 22px; }
  .analytics-grid .eyebrow { color: var(--gold-soft); }
  .analytics-list {
    margin: 36px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .analytics-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: #C6CFDB;
  }
  .analytics-list .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
    flex-shrink: 0;
  }
  .analytics-mockup {
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: 28px;
    backdrop-filter: blur(20px);
    position: relative;
  }
  .mockup-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mockup-head .mh-title { font-size: 13px; color: #8C97A6; }
  .mockup-head .mh-sym {
    font-family: var(--ff-num);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    margin-top: 4px;
  }
  .mockup-head .mh-state {
    font-family: var(--ff-num);
    font-size: 12px;
    font-weight: 700;
    color: #6EE7B7;
    background: rgba(110, 231, 183, 0.08);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(110, 231, 183, 0.18);
  }
  .mockup-chart {
    height: 220px;
    position: relative;
    margin-bottom: 24px;
  }
  .mockup-chart svg { width: 100%; height: 100%; }
  .mockup-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .mm-cell .lbl {
    font-size: 11px;
    color: #6E7886;
    letter-spacing: 0.04em;
  }
  .mm-cell .val {
    font-family: var(--ff-num);
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    margin-top: 4px;
  }
  @media (max-width: 980px) {
    .analytics-grid { grid-template-columns: 1fr; gap: 40px; }
    .analytics-preview { padding: 50px 26px; }
    .mockup-meta { grid-template-columns: 1fr 1fr; }
  }

  /* FAQ styles are shared in styles.css */

  /* ============ BOOKING CTA SECTION ============ */
  .booking-section {
    position: relative;
    overflow: hidden;
  }
  .booking-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    padding: 70px 64px;
    position: relative;
    overflow: hidden;
  }
  .booking-wrap::before {
    content: "";
    position: absolute;
    width: 400px; height: 400px;
    right: -120px; top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(42, 111, 168, 0.18), rgba(31, 78, 120, 0.04) 60%);
    filter: blur(20px);
  }
  .booking-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
  }
  .booking-form .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 980px) {
    .booking-wrap { grid-template-columns: 1fr; padding: 40px 26px; }
    .booking-form .row { grid-template-columns: 1fr; }
  }


  /* Requested homepage refinements */
  .hero {
    background:
      radial-gradient(760px 420px at 78% 34%, rgba(42,111,168,.12), transparent 62%),
      linear-gradient(135deg, #f8fafc 0%, #edf3f8 48%, #ffffff 100%);
  }
  .hero::before {
    background: none !important;
    animation: none !important;
    opacity: 0;
  }
  .hero::after {
    content: none !important;
  }
  .grid-lines {
    display: none !important;
  }
  .hero-copy,
  .hero-art { position: relative; z-index: 2; }
  .hero h1 {
    font-size: clamp(36px, 4.25vw, 58px);
    max-width: 720px;
  }

  .hero-art {
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-art .img-slot,
  .hero-art .stat-pill {
    display: none !important;
  }
  .trading-visual {
    width: min(100%, 520px);
    border-radius: 30px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,252,.92));
    border: 1px solid rgba(31,78,120,.12);
    box-shadow: 0 34px 90px -54px rgba(19,50,80,.55), 0 18px 44px -34px rgba(31,78,120,.38);
  }
  .trading-visual svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .trading-visual .panel-bg { fill: #ffffff; }
  .trading-visual .grid { stroke: rgba(31,78,120,.10); stroke-width: 1; }
  .trading-visual .axis { fill: #6c7887; font-family: var(--ff-num); font-size: 10px; }
  .trading-visual .up { fill: #1A8458; stroke: #1A8458; }
  .trading-visual .down { fill: #C54C4C; stroke: #C54C4C; }
  .trading-visual .wick { stroke-width: 2; stroke-linecap: round; }
  .trading-visual .ma-blue { fill: none; stroke: #1F4E78; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .trading-visual .ma-gold { fill: none; stroke: #B89668; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .trading-visual .rsi { fill: none; stroke: #6A58D3; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .trading-visual .volume { opacity: .38; }
  .trading-visual .label {
    fill: #152235;
    font-family: var(--ff-num);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
  }
  .trading-visual .muted {
    fill: #6c7887;
    font-family: var(--ff-num);
    font-size: 10px;
    font-weight: 600;
  }
  .trading-visual .tag-bg { fill: rgba(31,78,120,.08); }
  @media (max-width: 980px) {
    .hero-art { height: auto; min-height: 360px; }
    .trading-visual { width: min(100%, 440px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero *, .ticker-track { animation: none !important; }
  }

  .why-cell {
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .why-cell .why-ico,
  .why-cell .why-num,
  .why-cell h4,
  .why-cell p {
    transition: color .25s ease, opacity .25s ease, -webkit-text-stroke-color .25s ease;
  }
  .why-cell:hover {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -32px rgba(14, 42, 68, .65);
    z-index: 2;
  }
  .why-cell:hover .why-ico,
  .why-cell:hover h4,
  .why-cell:hover p { color: #fff; }
  .why-cell:hover .why-num { color: var(--gold-soft); }

  .step {
    padding: 24px 18px;
    border-radius: var(--r-lg);
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .step h4,
  .step p,
  .step .step-num {
    transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .step:hover {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: var(--sh-3);
  }
  .step:hover h4,
  .step:hover p { color: #fff; }
  .step:hover .step-num {
    background: #fff;
    color: var(--brand);
    border-color: #fff;
    transform: scale(1.04);
    box-shadow: 0 18px 34px -18px rgba(10, 15, 26, .45);
  }
  .step:hover .step-num::before { opacity: 0; }

  .program-item:hover {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
    border-color: var(--brand);
    color: #fff;
    box-shadow: var(--sh-3);
  }
  .program-item:hover h4,
  .program-item:hover p,
  .program-item:hover svg { color: #fff; }
  .program-item:hover .pg-num {
    color: rgba(255,255,255,.08);
    -webkit-text-stroke-color: var(--gold-soft);
  }
  .analytics-preview .btn-ghost:hover {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
    box-shadow: 0 18px 36px -18px rgba(42, 111, 168, .9);
  }

  @media (min-width: 981px) {
    .booking-wrap {
      direction: ltr;
      grid-template-columns: .92fr 1.08fr;
    }
    .booking-wrap > div:first-child {
      grid-column: 1;
      direction: rtl;
    }
    .booking-wrap .booking-form {
      grid-column: 2;
      direction: rtl;
    }
  }
  @media (max-width: 980px) {
    .booking-wrap { direction: rtl; }
    .booking-wrap > div:first-child,
    .booking-wrap .booking-form { grid-column: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after { animation: none !important; }
  }


  /* Lightweight real trading chart in the slider background */
  .hero-trading-bg {
    position: absolute;
    inset: 48px 0 auto 0;
    height: 520px;
    z-index: 0;
    pointer-events: none;
    opacity: .34;
  }
  .hero-trading-bg svg { width: 100%; height: 100%; display: block; }
  .hero-trading-bg .chart-grid-bg path {
    fill: none;
    stroke: rgba(31, 78, 120, .22);
    stroke-width: 1;
  }
  .hero-trading-bg .chart-volume-bg rect { fill: rgba(31, 78, 120, .16); }
  .hero-trading-bg .candles-bg line { stroke-width: 3; stroke-linecap: round; opacity: .78; }
  .hero-trading-bg .candles-bg rect { opacity: .82; }
  .hero-trading-bg .up { fill: #1A8458; stroke: #1A8458; }
  .hero-trading-bg .down { fill: #C54C4C; stroke: #C54C4C; }
  .hero-trading-bg .ma-one-bg,
  .hero-trading-bg .ma-two-bg {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-trading-bg .ma-one-bg { stroke: rgba(31, 78, 120, .82); stroke-width: 5; }
  .hero-trading-bg .ma-two-bg { stroke: rgba(184, 150, 104, .82); stroke-width: 4; }
  .hero-trading-bg .price-tags-bg text {
    fill: rgba(31, 78, 120, .72);
    font-family: var(--ff-num);
    font-size: 14px;
    font-weight: 700;
  }
  .hero-art { min-height: 520px; }
  .hero-png-slot {
    width: min(100%, 500px);
    min-height: 500px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
  }
  .hero-png-slot img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  @media (max-width: 980px) {
    .hero-trading-bg { inset: 90px -220px auto -120px; height: 520px; opacity: .22; }
    .hero-art { min-height: 220px; height: 220px; }
    .hero-png-slot { min-height: 220px; }
  }

  /* Slider motion disabled for speed */
  .hero .chart-card,
  .hero .stat-pill,
  .ticker-track { animation: none !important; }


  /* Final hero correction: chart only behind the PNG slot, no chart behind text */
  .hero {
    background:
      radial-gradient(760px 420px at 78% 34%, rgba(42,111,168,.08), transparent 62%),
      linear-gradient(135deg, #f8fafc 0%, #edf3f8 48%, #ffffff 100%);
  }
  .hero-trading-bg,
  .trading-visual,
  .hero-png-slot { display: none !important; }
  .hero-copy { position: relative; z-index: 3; }
  .hero-art {
    position: relative !important;
    height: 600px !important;
    min-height: 520px;
    display: block !important;
    isolation: isolate;
  }
  .hero-art .img-slot {
    display: grid !important;
    position: absolute !important;
    inset: 10px 24px !important;
    z-index: 2 !important;
    border-radius: var(--r-xl);
    background:
      linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.18)),
      repeating-linear-gradient(45deg, rgba(31, 78, 120, 0.025) 0 14px, transparent 14px 28px);
    border: 1.5px dashed rgba(31, 78, 120, 0.24);
    box-shadow: 0 30px 80px -58px rgba(31,78,120,.45);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }
  .hero-chart-back {
    position: absolute;
    inset: 38px 52px;
    z-index: 1;
    pointer-events: none;
    opacity: .54;
    overflow: hidden;
    border-radius: var(--r-xl);
    filter: saturate(.9);
  }
  .hero-chart-back svg { width: 100%; height: 100%; display: block; }
  .hero-chart-back .wick { stroke-width: 3; stroke-linecap: round; fill: none; }
  .hero-chart-back .body { stroke-width: 1.6; }
  .hero-chart-back .brand { fill: rgba(31,78,120,.18); stroke: rgba(31,78,120,.44); }
  .hero-chart-back .gold { fill: rgba(184,150,104,.19); stroke: rgba(184,150,104,.46); }
  .hero h1 { font-size: clamp(34px, 4.1vw, 56px); }
  @media (max-width: 980px) {
    .hero-art { height: 430px !important; min-height: 360px; }
    .hero-art .img-slot { inset: 0 0 !important; }
    .hero-chart-back { inset: 28px 28px; opacity: .46; }
  }

  /* Faster, crisp hover polish for homepage cards */
  .why-cell,
  .step,
  .program-item,
  .analytics-preview .btn-ghost {
    transition-duration: .14s !important;
    transition-delay: 0ms !important;
    transition-timing-function: cubic-bezier(.2,.7,.2,1) !important;
  }
  .why-cell:nth-child(odd):hover,
  .step:nth-child(even):hover,
  .program-item:nth-child(odd):hover {
    background: linear-gradient(180deg, #C9AD86 0%, #B89668 100%) !important;
    border-color: #B89668 !important;
    color: #fff !important;
  }
  .why-cell:nth-child(even):hover,
  .step:nth-child(odd):hover,
  .program-item:nth-child(even):hover {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
  }
  .analytics-preview .btn-ghost:hover {
    background: #B89668 !important;
    border-color: #B89668 !important;
    color: #fff !important;
  }



  /* Final user correction: PNG frame above a realistic identity-color chart. */
  .hero-art .img-slot {
    z-index: 3 !important;
    background: rgba(255,255,255,.10) !important;
    border: 1.5px dashed rgba(31, 78, 120, 0.28) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-chart-back {
    inset: 10px 24px !important;
    z-index: 1 !important;
    opacity: .36 !important;
    animation: argChartBehindPng 9s ease-in-out infinite !important;
  }
  .hero-chart-back .wick { stroke-width: 2.2; stroke-linecap: round; fill: none; }
  .hero-chart-back .body { stroke-width: 1.2; }
  .hero-chart-back .bull .wick,
  .hero-chart-back .bull .body { stroke: rgba(184,150,104,.64); }
  .hero-chart-back .bull .body { fill: rgba(184,150,104,.30); }
  .hero-chart-back .bear .wick,
  .hero-chart-back .bear .body { stroke: rgba(31,78,120,.58); }
  .hero-chart-back .bear .body { fill: rgba(31,78,120,.22); }
  @keyframes argChartBehindPng {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: .32; }
    50% { transform: translate3d(-10px, 0, 0); opacity: .42; }
  }

  /* Final user correction: section-level hover colors, no odd/even mixing. */
  .why-grid .why-cell:hover {
    background: #B89668 !important;
    border-color: #B89668 !important;
    color: #fff !important;
  }
  .steps .step:hover {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
    color: #fff !important;
  }
  .programs-list .program-item:hover {
    background: #B89668 !important;
    border-color: #B89668 !important;
    color: #fff !important;
  }
  .analytics-preview .btn-ghost:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
  }

  /* Final user correction: flat booking button. */
  a.btn[href$="/booking/"],
  .nav-cta a[href$="/booking/"],
  .booking-form .btn-primary {
    background: #B89668 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }



  /* ===== ARG repair: stable hero, fast reveal, section-level hover colors ===== */
  .hero-copy { position: relative; z-index: 3; }
  .hero-art {
    position: relative !important;
    display: block !important;
    min-height: 540px !important;
    height: 600px !important;
    isolation: isolate;
    overflow: hidden;
  }
  .hero-chart-back {
    position: absolute !important;
    inset: 20px 0 20px 0 !important;
    z-index: 1 !important;
    opacity: .34 !important;
    pointer-events: none;
    animation: none !important;
    overflow: hidden;
  }
  .hero-chart-back svg { width: 100%; height: 100%; display: block; }
  .hero-chart-back .wick {
    fill: none;
    stroke-width: 2.1;
    shape-rendering: geometricPrecision;
    stroke-linecap: square;
  }
  .hero-chart-back .body {
    stroke-width: 1.3;
    shape-rendering: crispEdges;
  }
  .hero-chart-back .gold .wick,
  .hero-chart-back .gold .body {
    stroke: rgba(184, 150, 104, .58);
  }
  .hero-chart-back .gold .body { fill: rgba(184, 150, 104, .20); }
  .hero-chart-back .brand .wick,
  .hero-chart-back .brand .body {
    stroke: rgba(31, 78, 120, .55);
  }
  .hero-chart-back .brand .body { fill: rgba(31, 78, 120, .18); }
  .hero-art .img-slot {
    position: absolute !important;
    inset: 28px 36px !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center;
    border-radius: var(--r-xl);
    border: 1.5px dashed rgba(31, 78, 120, .22) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.28)) !important;
    box-shadow: 0 28px 64px -44px rgba(22,57,88,.36) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-art .img-slot::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: calc(var(--r-xl) - 6px);
    border: 1px solid rgba(31, 78, 120, .08);
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  }
  .hero-art .img-slot-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 88px;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(31, 78, 120, .12);
    color: rgba(31,78,120,.45);
    font-family: var(--ff-num);
    font-weight: 700;
    letter-spacing: .18em;
    font-size: 13px;
  }
  @media (max-width: 980px) {
    .hero-art {
      min-height: 360px !important;
      height: 380px !important;
    }
    .hero-art .img-slot {
      inset: 12px !important;
    }
    .hero-chart-back {
      inset: 8px 0 8px 0 !important;
      opacity: .28 !important;
    }
  }

  /* Booking CTA flat 2D across the site */
  a.btn[href$="/booking/"],
  .nav-cta a[href$="/booking/"],
  .mobile-links .mobile-cta,
  .booking-form .btn-primary,
  .booking-form-card .btn-primary,
  .services-booking-form .btn-primary,
  form[aria-label*="احجز استشارة"] .btn-primary {
    background: #B89668 !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
  }
  a.btn[href$="/booking/"]:hover,
  .nav-cta a[href$="/booking/"]:hover,
  .mobile-links .mobile-cta:hover,
  .booking-form .btn-primary:hover,
  .booking-form-card .btn-primary:hover,
  .services-booking-form .btn-primary:hover,
  form[aria-label*="احجز استشارة"] .btn-primary:hover {
    background: #A98558 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Immediate professional hover timing */
  .why-cell, .step, .program-item, .analytics-preview .btn-ghost, .svc-mini, .track-card, .choose-card, .aud-card, .value-card, .find-card, .ana-card, .type-card, .channel {
    transition-duration: .14s !important;
    transition-delay: 0ms !important;
    transition-timing-function: cubic-bezier(.2,.7,.2,1) !important;
  }

  /* One hover color per section */
  .why-grid .why-cell:hover {
    background: #B89668 !important;
    border-color: #B89668 !important;
    color: #fff !important;
  }
  .why-grid .why-cell:hover .why-ico,
  .why-grid .why-cell:hover h4,
  .why-grid .why-cell:hover p,
  .why-grid .why-cell:hover .why-num { color: #fff !important; }

  .steps .step:hover {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
  }
  .steps .step:hover h4,
  .steps .step:hover p,
  .steps .step:hover .step-num { color: #fff !important; }

  .programs-list .program-item:hover {
    background: #B89668 !important;
    border-color: #B89668 !important;
    color: #fff !important;
  }
  .programs-list .program-item:hover h4,
  .programs-list .program-item:hover p,
  .programs-list .program-item:hover .pg-num,
  .programs-list .program-item:hover svg { color: #fff !important; }

  .analytics-preview .btn-ghost:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
  }


  /* ===== User requested homepage final adjustments ===== */
  .hero h1 .accent {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #1F4E78 !important;
  }

  /* chart distributed over the full left visual side, behind PNG frame only */
  .hero-art {
    overflow: visible !important;
    isolation: isolate;
  }
  .hero-chart-back {
    position: absolute !important;
    inset: -32px -84px -34px -100px !important;
    z-index: 1 !important;
    opacity: .38 !important;
    animation: none !important;
    filter: none !important;
    pointer-events: none !important;
  }
  .hero-chart-back svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .hero-chart-back .wick {
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: square !important;
    shape-rendering: crispEdges;
  }
  .hero-chart-back .body {
    stroke-width: 1.2 !important;
    rx: 0 !important;
    ry: 0 !important;
    shape-rendering: crispEdges;
  }
  .hero-chart-back .gold .wick,
  .hero-chart-back .gold .body {
    stroke: rgba(184,150,104,.58) !important;
  }
  .hero-chart-back .gold .body {
    fill: rgba(184,150,104,.20) !important;
  }
  .hero-chart-back .brand .wick,
  .hero-chart-back .brand .body {
    stroke: rgba(31,78,120,.50) !important;
  }
  .hero-chart-back .brand .body {
    fill: rgba(31,78,120,.15) !important;
  }
  .hero-chart-back .ghost {
    opacity: .38;
  }
  .hero-art .img-slot {
    z-index: 2 !important;
    background: rgba(255,255,255,.46) !important;
    border: 1.5px dashed rgba(31,78,120,.22) !important;
  }

  /* keep number visible on 'كيف نعمل معك' hover */
  .steps .step:hover .step-num {
    background: #fff !important;
    color: #1F4E78 !important;
    border-color: #fff !important;
    opacity: 1 !important;
  }

  /* second section CTA hover gold */
  .svc-cta .btn:hover {
    background: #B89668 !important;
    color: #fff !important;
    border-color: #B89668 !important;
    box-shadow: none !important;
  }

  /* analytics subscribe hover gold */
  .analytics-preview .btn-ghost:hover {
    background: #B89668 !important;
    border-color: #B89668 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  @media (max-width: 980px) {
    .hero-chart-back {
      inset: -10px -30px -18px -30px !important;
      opacity: .28 !important;
    }
  }


  /* User PNG assets: replace empty PNG frames with real visuals */
  .hero-art.has-png-image .hero-chart-back { display: none !important; }
  .hero-art .img-slot.image-filled { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .hero-art .img-slot.image-filled img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
  .market-png-placeholder.image-filled { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .market-png-placeholder.image-filled img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }