/* =============================================================================
   InvestProp — home page (2026 redesign)
   -----------------------------------------------------------------------------
   Loaded ONLY on the home page (site/index.blade.php pushes the <link>), and
   every rule is scoped under `body.home-x` so nothing here can leak into the
   shared header/footer or the other public pages.

   Conventions that this file must respect (see the site design system):
     • dark is the DEFAULT theme — `html.dark`; light is the opt-in override.
       Neither compiled stylesheet sets a global text colour, so every block
       below declares its own `color` explicitly.
     • RTL is the default direction; logical properties are used throughout so
       the LTR build mirrors without a second rule set.
     • `.container-fluid` here is a max-width container, not full-bleed.
   ========================================================================== */

body.home-x {
    /* --- palette ---------------------------------------------------------- */
    --hx-primary: #007BFF;
    --hx-primary-2: #1C8AFF;
    --hx-cyan: #5ED2EC;
    --hx-sky: #8DC4FF;
    --hx-mint: #3DD68C;

    /* Surfaces & type (dark = default) */
    --hx-bg: #020915;
    --hx-surface: rgba(6, 18, 34, .62);
    --hx-surface-2: rgba(9, 24, 44, .82);
    --hx-line: rgba(141, 196, 255, .14);
    --hx-line-strong: rgba(141, 196, 255, .28);
    --hx-text: #EAF2FF;
    --hx-text-2: #C3D4EA;
    --hx-muted: #8FA5C2;

    --hx-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --hx-glow: 0 10px 40px -12px rgba(0, 123, 255, .55);
    --hx-shadow: 0 24px 70px -30px rgba(0, 0, 0, .85);
    --hx-radius: 20px;
    --hx-radius-sm: 14px;
}

html:not(.dark) body.home-x {
    --hx-bg: #F4F8FF;
    --hx-surface: rgba(255, 255, 255, .78);
    --hx-surface-2: #FFFFFF;
    --hx-line: rgba(0, 72, 153, .12);
    --hx-line-strong: rgba(0, 72, 153, .22);
    --hx-text: #0A1A30;
    --hx-text-2: #2B4463;
    --hx-muted: #5D7492;
    --hx-shadow: 0 24px 60px -34px rgba(10, 40, 80, .45);
}

/* -----------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

body.home-x .hx-section {
    position: relative;
    margin-top: 96px;
}

@media (max-width: 767.98px) {
    body.home-x .hx-section { margin-top: 64px; }
}

/* Section header: eyebrow → title → subtitle, centred by default. */
body.home-x .hx-head {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 44px;
}

body.home-x .hx-head--start {
    text-align: start;
    margin-inline: 0;
}

body.home-x .hx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--hx-line-strong);
    background: color-mix(in srgb, var(--hx-primary) 10%, transparent);
    color: var(--hx-sky);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 16px;
}

html:not(.dark) body.home-x .hx-eyebrow { color: #0B62C4; }

body.home-x .hx-eyebrow i { font-size: 15px; }

body.home-x .hx-title {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 900;
    line-height: 1.35;
    color: var(--hx-text);
}

body.home-x .hx-title b,
body.home-x .hx-title .hx-grad-text {
    background: linear-gradient(96deg, var(--hx-primary-2) 0%, var(--hx-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

body.home-x .hx-sub {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 2;
    color: var(--hx-muted);
}

/* --- buttons ------------------------------------------------------------- */
body.home-x .hx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding-inline: 26px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease;
}

body.home-x .hx-btn:hover { transform: translateY(-2px); }
body.home-x .hx-btn:active { transform: translateY(0); }

body.home-x .hx-btn--primary {
    background: var(--hx-grad);
    color: #fff;
    box-shadow: var(--hx-glow);
}

body.home-x .hx-btn--primary:hover {
    color: #fff;
    box-shadow: 0 16px 46px -12px rgba(0, 123, 255, .75);
}

/* The 1px shine along the top-start edge is the house style for the CTA. */
body.home-x .hx-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(106.61deg, #FFFFFF 2.5%, rgba(255, 255, 255, 0) 18.15%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

body.home-x .hx-btn--ghost {
    background: var(--hx-surface);
    border-color: var(--hx-line-strong);
    color: var(--hx-text);
    backdrop-filter: blur(18px);
}

body.home-x .hx-btn--ghost:hover {
    color: var(--hx-text);
    border-color: var(--hx-primary-2);
    background: color-mix(in srgb, var(--hx-primary) 12%, var(--hx-surface));
}

body.home-x .hx-btn i { font-size: 18px; }

/* --- glass card ---------------------------------------------------------- */
body.home-x .hx-card {
    position: relative;
    border-radius: var(--hx-radius);
    border: 1px solid var(--hx-line);
    background: var(--hx-surface);
    backdrop-filter: blur(28px);
    box-shadow: var(--hx-shadow);
    overflow: hidden;
}

/* Hairline highlight along the top edge — reads as a lit bevel on dark. */
body.home-x .hx-card::before {
    content: "";
    position: absolute;
    inset-inline: 18%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(141, 196, 255, .55), transparent);
    pointer-events: none;
}

html:not(.dark) body.home-x .hx-card::before { opacity: .5; }

/* --- ambient background art ---------------------------------------------- */
body.home-x .hx-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
}

html:not(.dark) body.home-x .hx-orb { opacity: .28; }

body.home-x .hx-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(141, 196, 255, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(141, 196, 255, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
}

html:not(.dark) body.home-x .hx-grid {
    background-image:
        linear-gradient(to right, rgba(0, 90, 190, .08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 90, 190, .08) 1px, transparent 1px);
}

/* =============================================================================
   1. HERO
   ========================================================================== */

body.home-x .hx-hero {
    position: relative;
    padding-block: 40px 0;
    overflow: hidden;
}

body.home-x .hx-hero__bg {
    position: absolute;
    inset: -160px 0 0;
    z-index: 0;
    pointer-events: none;
}

body.home-x .hx-hero__bg .hx-orb--1 {
    inset-inline-end: -6%;
    top: 4%;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(0, 123, 255, .55), rgba(0, 123, 255, 0) 65%);
}

body.home-x .hx-hero__bg .hx-orb--2 {
    inset-inline-start: -12%;
    top: 32%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(94, 210, 236, .32), rgba(94, 210, 236, 0) 65%);
}

body.home-x .hx-hero__bg .hx-orb--3 {
    inset-inline-start: 38%;
    top: -8%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(141, 196, 255, .28), rgba(141, 196, 255, 0) 68%);
}

body.home-x .hx-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 40px;
    align-items: center;
    padding-block: 24px 8px;
}

@media (min-width: 992px) {
    body.home-x .hx-hero__inner {
        grid-template-columns: 1.05fr .95fr;
        gap: 32px;
        padding-block: 48px 24px;
    }
}

body.home-x .hx-hero__copy { text-align: center; }

@media (min-width: 992px) {
    body.home-x .hx-hero__copy { text-align: start; }
}

/* --- announcement pill --- */
body.home-x .hx-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 8px;
    border-radius: 999px;
    border: 1px solid var(--hx-line-strong);
    background: var(--hx-surface);
    backdrop-filter: blur(20px);
    color: var(--hx-text-2);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .25s ease, transform .2s ease;
}

html[dir="ltr"] body.home-x .hx-hero__badge { padding: 7px 8px 7px 16px; }

body.home-x .hx-hero__badge:hover {
    color: var(--hx-text);
    border-color: var(--hx-primary-2);
    transform: translateY(-1px);
}

body.home-x .hx-hero__badge .hx-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--hx-mint);
}

body.home-x .hx-hero__badge .hx-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--hx-mint);
    opacity: .6;
    animation: hx-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes hx-ping {
    0%        { transform: scale(.6); opacity: .8; }
    80%, 100% { transform: scale(1.5); opacity: 0; }
}

body.home-x .hx-hero__badge .hx-chev {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: var(--hx-grad);
    color: #fff;
    font-size: 12px;
}

/* --- headline --- */
body.home-x .hx-hero__title {
    margin: 22px 0 0;
    font-size: clamp(30px, 5.2vw, 58px);
    line-height: 1.28;
    font-weight: 900;
    color: var(--hx-text);
    letter-spacing: -.01em;
}

body.home-x .hx-hero__title b {
    display: block;
    background: linear-gradient(96deg, #4FA8FF 0%, #007BFF 45%, #5ED2EC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html:not(.dark) body.home-x .hx-hero__title b {
    background: linear-gradient(96deg, #0069DC 0%, #007BFF 45%, #17A9C7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.home-x .hx-hero__desc {
    margin: 20px auto 0;
    max-width: 580px;
    font-size: 15px;
    line-height: 2.1;
    font-weight: 500;
    color: var(--hx-muted);
}

@media (min-width: 992px) {
    body.home-x .hx-hero__desc { margin-inline: 0; }
}

body.home-x .hx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 30px;
}

@media (min-width: 992px) {
    body.home-x .hx-hero__actions { justify-content: flex-start; }
}

/* --- advantage chips ---
   Up to a dozen short advantages. They are bordered pills rather than bare
   text: nine plain items wrapped into three ragged lines, while pills of
   uneven length still read as one tidy block. */
body.home-x .hx-hero__chips {
    list-style: none;
    margin: 28px auto 0;
    padding: 0;
    max-width: 640px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

@media (min-width: 992px) {
    body.home-x .hx-hero__chips {
        justify-content: flex-start;
        margin-inline: 0;
    }
}

body.home-x .hx-hero__chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 6px;
    padding-inline: 10px 13px;
    border-radius: 999px;
    border: 1px solid var(--hx-line);
    background: color-mix(in srgb, var(--hx-primary) 7%, transparent);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--hx-text-2);
    white-space: nowrap;
}

html:not(.dark) body.home-x .hx-hero__chips li {
    background: rgba(255, 255, 255, .72);
}

body.home-x .hx-hero__chips i {
    flex: none;
    font-size: 15px;
    color: var(--hx-mint);
}

html:not(.dark) body.home-x .hx-hero__chips i { color: #16A365; }

@media (max-width: 575.98px) {
    body.home-x .hx-hero__chips { gap: 6px; margin-top: 24px; }

    body.home-x .hx-hero__chips li {
        padding-block: 5px;
        padding-inline: 8px 10px;
        font-size: 11.5px;
        white-space: normal;
    }

    body.home-x .hx-hero__chips i { font-size: 14px; }
}

/* --- visual side --- */
body.home-x .hx-hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
}

body.home-x .hx-hero__visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    height: auto;
    animation: hx-bob 7s ease-in-out infinite;
}

@keyframes hx-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    body.home-x .hx-hero__visual img,
    body.home-x .hx-float { animation: none !important; }
}

/* Floating stat cards layered over the illustration. Hidden below xl, where
   they would cover the artwork instead of framing it. */
body.home-x .hx-float {
    position: absolute;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid var(--hx-line-strong);
    background: var(--hx-surface-2);
    backdrop-filter: blur(24px);
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8);
    animation: hx-bob 7s ease-in-out infinite;
}

html:not(.dark) body.home-x .hx-float {
    box-shadow: 0 18px 44px -26px rgba(10, 40, 80, .5);
}

@media (min-width: 1200px) {
    body.home-x .hx-float { display: flex; }
}

/* Physical sides, NOT logical ones. The hero artwork is a 3D scene that is not
   mirrored between RTL and LTR — its mark sits low-left and its curve escapes
   high-right in both — so the two free corners it leaves are always the same
   two. `inset-inline-*` would swap them with the locale and drop a chip right
   on top of the escaping curve. */
body.home-x .hx-float--a {
    top: 1%;
    left: 0;
    animation-delay: .6s;
}

body.home-x .hx-float--b {
    bottom: 4%;
    right: 0;
    animation-delay: 1.4s;
}

body.home-x .hx-float__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--hx-primary) 18%, transparent);
    color: var(--hx-primary-2);
    font-size: 19px;
}

body.home-x .hx-float--b .hx-float__icon {
    background: color-mix(in srgb, var(--hx-mint) 18%, transparent);
    color: var(--hx-mint);
}

body.home-x .hx-float__value {
    display: block;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--hx-text);
}

body.home-x .hx-float__label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hx-muted);
}

/* --- KPI strip under the hero --- */
body.home-x .hx-kpis {
    position: relative;
    z-index: 1;
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-radius: var(--hx-radius);
    border: 1px solid var(--hx-line);
    background: var(--hx-line);
    overflow: hidden;
    box-shadow: var(--hx-shadow);
}

@media (min-width: 768px) {
    body.home-x .hx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.home-x .hx-kpi {
    padding: 26px 18px;
    text-align: center;
    background: var(--hx-surface-2);
    backdrop-filter: blur(24px);
}

body.home-x .hx-kpi__value {
    font-family: dana, yekanbakh, sans-serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.2;
    color: var(--hx-text);
    direction: ltr;
    unicode-bidi: isolate;
}

body.home-x .hx-kpi__value span { color: var(--hx-primary-2); }

body.home-x .hx-kpi__label {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hx-muted);
}

/* =============================================================================
   2. VIDEO + PODCAST ROW (`.hx-media`)
   -----------------------------------------------------------------------------
   The intro video and the podcast episode card sit right under the hero and
   share one row from 1200px up — the video leads and runs slightly wider (it
   is 16:9 and needs the width), the episode card rides beside it; below 1200px
   they simply stack inside the same wrapper. Both partials still guard
   themselves on their own CMS content, so the wrapper hides itself when both
   are missing and a lone child takes the whole row (the video then gets its
   940px cap back, the podcast keeps its native two-column desktop layout).

   The video heading lives INSIDE the glass frame so the two columns read as a
   matched pair of cards: text-first with the media below on one side, the
   record-first episode card on the other. The podcast card's own styles are
   podcast.css (scoped to `.pod`); the rules here only re-shape it for the
   narrow column.
   ========================================================================== */

body.home-x .hx-media:not(:has(.hx-video, .pod)) { display: none; }

body.home-x .hx-media__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* The row owns the vertical rhythm — kill the section's standalone margin. */
body.home-x .hx-media .pod { margin-top: 0; }

@media (min-width: 1200px) {
    body.home-x .hx-media__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    }

    body.home-x .hx-media__grid > :only-child { grid-column: 1 / -1; }
}

/* --- the video card ------------------------------------------------------- */

body.home-x .hx-video { display: flex; }

body.home-x .hx-video__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
    padding: 10px;
    border-radius: 26px;
    border: 1px solid var(--hx-line-strong);
    background: var(--hx-surface);
    backdrop-filter: blur(28px);
    box-shadow: var(--hx-shadow);
}

@media (min-width: 1200px) {
    /* Sharing the row: fill the column instead of centring under a cap. */
    body.home-x .hx-video:not(:only-child) .hx-video__frame {
        max-width: none;
        margin-inline: 0;
    }
}

body.home-x .hx-video__head {
    /* When the podcast column runs taller, the card's slack lands HERE — as
       air under the title — so the stage below stays a true 16:9 pinned to
       the card's bottom edge. Stretching the stage instead letterboxes the
       Aparat player with a black band. */
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 10px 12px 16px;
}

body.home-x .hx-video__title {
    margin: 0;
    font-size: clamp(19px, 1.9vw, 24px);
    font-weight: 900;
    line-height: 1.5;
    color: var(--hx-text);
}

body.home-x .hx-video__frame::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(141, 196, 255, .5), transparent 40%, rgba(0, 123, 255, .35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

body.home-x .hx-video__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #06101F;
}

html:not(.dark) body.home-x .hx-video__stage { background: #E7EFFB; }

/* Aparat injects its player with document.write into whatever wrapper it is
   given; force whatever lands in there to fill the stage. */
body.home-x .hx-video__stage > *,
body.home-x .hx-video__stage iframe,
body.home-x .hx-video__stage embed,
body.home-x .hx-video__stage video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border: 0;
}

body.home-x .hx-video__glow {
    position: absolute;
    inset-inline: 12%;
    bottom: -40px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 123, 255, .45), rgba(0, 123, 255, 0) 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

/* --- the podcast card in the narrow column -------------------------------- */

@media (min-width: 1200px) {
    /* podcast.css switches the card to two columns at 992px — right for a
       full-width section, cramped at ~40% of the container. Sharing the row,
       fall back to its stacked composition: record on top, copy below, the
       player pinned to the card's bottom edge (podcast.css's own
       `margin-top: auto` on .pod-player does the pinning). */
    body.home-x .hx-media .pod:not(:only-child) .pod-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        height: 100%;
        gap: 12px;
        padding: 20px 22px 22px;
    }

    body.home-x .hx-media .pod:not(:only-child) .pod-side {
        padding-block: 4px 0;
        gap: 12px;
    }

    body.home-x .hx-media .pod:not(:only-child) .pod-vinyl {
        width: min(160px, 44%);
    }

    /* Match the video card's title scale so the pair reads as one rank. */
    body.home-x .hx-media .pod:not(:only-child) .pod-title {
        font-size: clamp(19px, 1.9vw, 24px);
    }

    /* Compact copy: two lines of the description are the teaser — the full
       text still reads on stacked/mobile layouts and to assistive tech. */
    body.home-x .hx-media .pod:not(:only-child) .pod-desc {
        margin: 8px 0 14px;
        font-size: 14px;
        line-height: 1.9;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    body.home-x .hx-media .pod:not(:only-child) .pod-player { margin-top: auto; }
    body.home-x .hx-media .pod:not(:only-child) .pod-transport { margin-top: 14px; }
    body.home-x .hx-media .pod:not(:only-child) .pod-host__role { max-width: 44ch; }
}

/* =============================================================================
   3. FAQ ACCORDION
   ========================================================================== */

body.home-x .hx-faq {
    max-width: 900px;
    margin-inline: auto;
    display: grid;
    gap: 12px;
}

body.home-x .hx-faq__item {
    border-radius: var(--hx-radius-sm);
    border: 1px solid var(--hx-line);
    background: var(--hx-surface);
    backdrop-filter: blur(20px);
    overflow: hidden;
    transition: border-color .25s ease, background-color .25s ease;
}

body.home-x .hx-faq__item.is-open {
    border-color: var(--hx-primary-2);
    background: color-mix(in srgb, var(--hx-primary) 8%, var(--hx-surface));
}

body.home-x .hx-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: none;
    border: 0;
    text-align: start;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--hx-text);
    cursor: pointer;
}

body.home-x .hx-faq__q:focus-visible {
    outline: 2px solid var(--hx-primary-2);
    outline-offset: -2px;
}

body.home-x .hx-faq__q .hx-faq__icon {
    margin-inline-start: auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    border: 1px solid var(--hx-line-strong);
    color: var(--hx-primary-2);
    font-size: 14px;
    transition: transform .3s ease, background-color .25s ease, color .25s ease;
}

body.home-x .hx-faq__item.is-open .hx-faq__icon {
    transform: rotate(45deg);
    background: var(--hx-grad);
    border-color: transparent;
    color: #fff;
}

/* Height is animated from JS (scrollHeight), so the closed state must be a
   real 0 rather than display:none or the transition has nothing to run on. */
body.home-x .hx-faq__a {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}

body.home-x .hx-faq__a-inner {
    padding: 0 22px 20px;
    font-size: 14px;
    line-height: 2.1;
    color: var(--hx-muted);
}
/* =============================================================================
   4. CLOSING CTA BAND
   -----------------------------------------------------------------------------
   A quiet "pass": a pitch side and a stub separated by a perforated seam.
   `--hx-cta-stub` is the stub's width and also where the seam sits, so the
   notch mask and the dashed rule can never drift apart.

   The only ornament is the InvestProp mark itself, painted through a CSS mask
   from `images/main/logo-mark.svg` so it inherits the theme's colour instead
   of needing an inline copy or a filter hack. No orbs, no sweep, no glow — the
   card is a flat surface, a hairline and two cuts.
   ========================================================================== */

body.home-x .hx-cta {
    --hx-cta-stub: 40%;
    --hx-cta-notch: 20px;
    /* Physical X of the seam. RTL puts the stub on the left, LTR on the right;
       masks take no logical properties, so this is flipped explicitly. */
    --hx-cta-seam: var(--hx-cta-stub);
    --hx-cta-logo: url("../images/main/logo-mark.svg");

    position: relative;
    display: flex;
    align-items: stretch;
    margin-top: 96px;
    margin-bottom: 20px;
    border-radius: 26px;
    background:
        radial-gradient(ellipse 60% 120% at 82% 0%, rgba(0, 123, 255, .16), rgba(0, 123, 255, 0) 60%),
        linear-gradient(160deg, #0A1B30 0%, #050F1D 100%);
    overflow: hidden;

    /* Two half-height layers, each punching one circle out of the seam. Their
       union covers the card, so everything except the notches survives. */
    -webkit-mask:
        radial-gradient(circle var(--hx-cta-notch) at var(--hx-cta-seam) 0, transparent 98%, #000 100%) top / 100% 50.5% no-repeat,
        radial-gradient(circle var(--hx-cta-notch) at var(--hx-cta-seam) 100%, transparent 98%, #000 100%) bottom / 100% 50.5% no-repeat;
    mask:
        radial-gradient(circle var(--hx-cta-notch) at var(--hx-cta-seam) 0, transparent 98%, #000 100%) top / 100% 50.5% no-repeat,
        radial-gradient(circle var(--hx-cta-notch) at var(--hx-cta-seam) 100%, transparent 98%, #000 100%) bottom / 100% 50.5% no-repeat;
}

html[dir="ltr"] body.home-x .hx-cta {
    --hx-cta-seam: calc(100% - var(--hx-cta-stub));
}

html:not(.dark) body.home-x .hx-cta {
    background:
        radial-gradient(ellipse 60% 120% at 82% 0%, rgba(0, 123, 255, .1), rgba(0, 123, 255, 0) 60%),
        linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 100%);
}

/* The mask eats a real border, so the outline is drawn as an inset hairline. */
body.home-x .hx-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--hx-line);
    pointer-events: none;
    z-index: 3;
}

/* --- the mark ------------------------------------------------------------ */

/* Oversized and barely there, bleeding off the far edge. `background:
   currentColor` through the logo's own alpha keeps it theme-aware — an <img>
   would need a filter to change colour, and an inline <svg> would duplicate
   1.5KB of path data. */
body.home-x .hx-cta__mark {
    position: absolute;
    /* Cropped hard by the card's own edges so it reads as a brand element the
       card is sitting on, not as a shape floating in the middle. It sits on
       the pitch side; behind the stub it would compete with the point rows. */
    inset-block-start: 50%;
    inset-inline-start: -3%;
    translate: 0 -50%;
    width: 250px;
    aspect-ratio: 148.4 / 150.4;
    background: currentColor;
    color: var(--hx-sky);
    opacity: .07;
    -webkit-mask: var(--hx-cta-logo) no-repeat center / contain;
    mask: var(--hx-cta-logo) no-repeat center / contain;
    pointer-events: none;
}

html:not(.dark) body.home-x .hx-cta__mark {
    color: #0A4E9E;
    opacity: .06;
}

/* --- pitch side ---------------------------------------------------------- */

body.home-x .hx-cta__body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(32px, 4.4vw, 58px) clamp(22px, 4vw, 54px);
}

body.home-x .hx-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--hx-sky);
}

html:not(.dark) body.home-x .hx-cta__eyebrow { color: #0B62C4; }

/* The same mark again at 14px, standing in for a generic icon. */
body.home-x .hx-cta__eyebrow-mark {
    flex: 0 0 auto;
    width: 14px;
    aspect-ratio: 148.4 / 150.4;
    background: currentColor;
    -webkit-mask: var(--hx-cta-logo) no-repeat center / contain;
    mask: var(--hx-cta-logo) no-repeat center / contain;
}

body.home-x .hx-cta__title {
    margin: 0;
    max-width: 32ch;
    font-size: clamp(25px, 3.2vw, 40px);
    font-weight: 900;
    line-height: 1.4;
    color: var(--hx-text);
}

body.home-x .hx-cta__desc {
    margin: 14px 0 0;
    max-width: 72ch;
    font-size: 15px;
    line-height: 2;
    color: var(--hx-muted);
}

body.home-x .hx-cta__actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* The house glow is the loudest thing left on an otherwise flat card. Softened
   here only — dropping it entirely would make this the one primary button on
   the page that looks different. */
body.home-x .hx-cta .hx-btn--primary {
    box-shadow: 0 8px 22px -12px rgba(0, 123, 255, .55);
}

body.home-x .hx-cta .hx-btn--primary:hover {
    box-shadow: 0 12px 28px -14px rgba(0, 123, 255, .7);
}

/* --- stub ---------------------------------------------------------------- */

body.home-x .hx-cta__stub {
    position: relative;
    z-index: 2;
    flex: 0 0 var(--hx-cta-stub);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
}

/* The perforation: dashed rather than solid, so it reads as a tear-off line
   running between the two notches. */
body.home-x .hx-cta__stub::before {
    content: "";
    position: absolute;
    inset-block: var(--hx-cta-notch);
    inset-inline-start: 0;
    border-inline-start: 1px dashed var(--hx-line-strong);
}

body.home-x .hx-cta__points {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.home-x .hx-cta__points li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--hx-text-2);
}

/* Hairlines between the rows instead of a box around each one. */
body.home-x .hx-cta__points li + li {
    border-top: 1px solid var(--hx-line);
}

body.home-x .hx-cta__points i {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--hx-cyan);
}

html:not(.dark) body.home-x .hx-cta__points i { color: #0B62C4; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    body.home-x .hx-cta { --hx-cta-stub: 38%; }
    body.home-x .hx-cta__title { max-width: none; }
    body.home-x .hx-cta__mark { width: 260px; }
    body.home-x .hx-cta__points li { font-size: 13px; }
}

/* Below this the two halves cannot sit side by side, so the seam turns
   horizontal. The notches are dropped rather than moved: their Y would depend
   on the copy's rendered height, which CSS cannot know and is not worth a
   resize observer — the dashed rule alone still reads as a tear-off. */
@media (max-width: 767.98px) {
    body.home-x .hx-cta {
        --hx-cta-stub: auto;
        flex-direction: column;
        border-radius: 22px;
        -webkit-mask: none;
        mask: none;
    }

    body.home-x .hx-cta__mark {
        width: 170px;
        inset-block-start: 22%;
        inset-inline-start: -8%;
        translate: none;
        opacity: .06;
    }

    body.home-x .hx-cta__stub {
        flex: 0 0 auto;
        padding: 8px 22px 28px;
    }

    body.home-x .hx-cta__stub::before {
        inset-block: auto;
        inset-block-start: 0;
        inset-inline: 0;
        border-inline-start: 0;
        border-top: 1px dashed var(--hx-line-strong);
    }

    body.home-x .hx-cta__actions .hx-btn { flex: 1 1 auto; }
}

/* =============================================================================
   5. RETUNING THE SECTIONS THAT STAYED
   -----------------------------------------------------------------------------
   These sections keep their existing markup and their existing rules in
   mainPage.css; everything below only re-tunes them so they sit in the same
   visual language as the new ones. Each selector is one level deeper than the
   original (the `body.home-x` prefix) so it wins without `!important` except
   where Bootstrap or the compiled sheet already used it.
   ========================================================================== */

/* --- reveal on scroll ---------------------------------------------------- */
body.home-x .hx-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

body.home-x .hx-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* No-JS and reduced-motion visitors must still see the content. */
@media (prefers-reduced-motion: reduce) {
    body.home-x .hx-reveal { opacity: 1; transform: none; transition: none; }
}

body.home-x.no-js .hx-reveal { opacity: 1; transform: none; }

/* --- pricing -------------------------------------------------------------- */
/* The section is now self-contained (pricing.css); it only needs the page's
   vertical rhythm. Its decorative PNG from mainPage.css bled a hard-edged
   rectangle across the corner and is superseded by the section's own glow. */
body.home-x .pricing-section { margin-top: 96px; }
body.home-x .pricing-section::before { display: none; }

/* --- traders-love / world map -------------------------------------------- */
/* The map image is intrinsically much taller than its content, which left a
   ~400px void under the row. Cap it and centre the two columns instead. */
body.home-x .traders-love-section { margin-top: 96px; }

body.home-x .traders-love-section .world-map-container {
    max-width: 760px;
    margin-inline: auto;
}

body.home-x .traders-love-section .world-map {
    width: 100%;
    height: auto;
    display: block;
}

body.home-x .traders-love-section .statistics-grid { margin-bottom: 0; }

/* --- roadmap ---------------------------------------------------------------
   Rebuilt as the equity-track section: `site/index/roadmap.blade.php` +
   `public/site/assets/css/roadmap.css`, scoped to `.rm-road`. Nothing for it
   here any more. */

/* --- about carousel ------------------------------------------------------- */
body.home-x .about-us-section { margin-top: 96px; }

/* --- blog / comments ------------------------------------------------------ */
body.home-x .blog-section,
body.home-x .comments-section { margin-top: 96px; }


/* --- voice colour band ----------------------------------------------------- */
/* The band was flat, fully saturated blue that fought with the rest of the dark
   page. Deepening it to the same gradient family as the CTA keeps the full-bleed
   rhythm without the glare. */
body.home-x .voice-section::before {
    background: linear-gradient(100deg, #00519F 0%, #0071EC 48%, #003C82 100%);
}

/* The app section is now the platform shelf: `site/index/app.blade.php` +
   `public/site/assets/css/app.css`, scoped to `.ap-app`. Nothing for it here. */