/* ─── site.css ─────────────────────────────────────────────────────────────
   TrackerFx marketing-site shell: tokens, reset, header, hero, sections,
   brokers, final CTA, footer.

   Pairs with app-ui.css (the app-look design system). Load site.css FIRST
   so the :root tokens cascade into app-ui.css.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Tokens (from the real app design system) ───
   Brand purple stays in accents only. Everything neutral is pure dark
   grey with no blue/purple cast - the bg sits at #050505 so the page
   reads as deep dark instead of "almost black with a slight bluish
   tint". Text/muted likewise stripped of their blue subpixel weight. */
:root {
    --accent: #6c63ff;
    --accent-2: #a89fff;
    --accent-g: rgba(108, 99, 255, .35);
    --green: #10b981;
    --green-2: #34d399;
    --red: #ef4444;
    --bg: #121212;
    --panel: rgba(255, 255, 255, .025);
    --panel-2: rgba(255, 255, 255, .045);
    --border: rgba(255, 255, 255, .08);
    --border-soft: rgba(255, 255, 255, .055);
    --text: #e6e6e6;
    --head: #fafafa;
    --muted: #8c8c8c;
    --muted-2: #595959;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    /* Darker take on the app's 206deg gradient so the cards (#0c -> #03)
       still read as dark wells against the page. Halfway between pure
       black and the app's lighter canvas. */
    background: linear-gradient(206deg, #121212 50%, #1a1a1a 93%, #1f1f1f 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(255, 255, 255, .22); }
::-moz-selection { background: rgba(255, 255, 255, .22); }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(140, 148, 158, .22); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(140, 148, 158, .45); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── Header ─── */
.hd-header {
    position: sticky; top: 0; z-index: 100;
    padding: 16px 40px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(18, 18, 18, 0.82);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hd-logo img { height: 32px; display: block; }
.hd-nav {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 100px; padding: 6px 8px;
}
.hd-nav-link {
    font-size: 13px; color: rgba(255, 255, 255, 0.55); text-decoration: none;
    letter-spacing: 0.05em; cursor: pointer; padding: 6px 16px; border-radius: 100px;
    transition: color 0.2s, background 0.2s;
}
.hd-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.hd-actions { display: flex; align-items: center; gap: 12px; }
.hd-signin {
    font-size: 13px; color: rgba(255, 255, 255, 0.55); text-decoration: none;
    letter-spacing: 0.05em; padding: 8px 18px; border-radius: 10px; transition: color 0.2s; cursor: pointer;
}
.hd-signin:hover { color: #fff; }
.hd-cta-btn {
    display: inline-flex; align-items: center; padding: 9px 22px;
    background: linear-gradient(135deg, rgba(166, 128, 255, 0.9), rgba(98, 1, 255, 0.85));
    border: 1px solid rgba(166, 128, 255, 0.45); border-radius: 12px;
    font-size: 13px; color: #fff; font-weight: 500; letter-spacing: 0.05em; text-decoration: none; cursor: pointer;
    transition: opacity 0.2s, transform 0.2s; box-shadow: 0 4px 20px rgba(98, 1, 255, 0.3); white-space: nowrap;
}
.hd-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; }
.hd-mob-hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 6px; margin-left: 8px;
}
.hd-mob-hamburger span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, 0.65); border-radius: 2px; transition: all 0.3s; }
/* Mobile menu */
.mob-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 1100; opacity: 0; transition: opacity 0.3s; }
.mob-overlay.open { display: block; opacity: 1; }
.mob-menu {
    position: fixed; top: 0; right: 0; width: 260px; height: 100%; background: #121212;
    border-left: 1px solid rgba(255, 255, 255, 0.07); z-index: 1200; visibility: hidden;
    transform: translateX(260px); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; padding: 24px; overflow-y: auto;
}
.mob-menu.open { visibility: visible; transform: translateX(0); }
.mob-menu-header { margin-bottom: 28px; display: flex; justify-content: flex-end; }
.mob-close { display: flex; background: none; border: none; cursor: pointer; width: 28px; height: 28px; position: relative; padding: 0; }
.mob-close span { display: block; width: 20px; height: 2px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; position: absolute; top: 50%; left: 4px; }
.mob-close span:first-child { transform: rotate(45deg); }
.mob-close span:last-child { transform: rotate(-45deg); }
.mob-ctas { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
.mob-signin { text-align: center; padding: 10px 12px; font-size: 14px; color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.mob-signin:hover { border-color: #a680ff; color: #a680ff; }
.mob-trial { text-align: center; padding: 10px 12px; font-size: 14px; color: #fff; border-radius: 10px; text-decoration: none; background: linear-gradient(135deg, #a680ff, #6201ff); border: 1px solid rgba(166, 128, 255, 0.4); box-shadow: 0 4px 16px rgba(98, 1, 255, 0.3); }
.mob-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mob-link { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.05em; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; text-decoration: none; transition: color 0.2s; }
.mob-link:hover { color: #a680ff; }

/* ─── Hero ─── */
.hero {
    position: relative; z-index: 1;
    max-width: 860px; margin: 0 auto; padding: 84px 24px 40px;
    text-align: center;
}
.whatsnew {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
    background: linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 100px; padding: 5px 16px 5px 5px; font-size: 13px; color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .18s, color .18s;
}
.whatsnew:hover { border-color: rgba(255, 255, 255, .18); }
.whatsnew-orb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #a680ff 0%, #6201ff 100%);
    box-shadow: 0 0 14px rgba(124, 90, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
    color: #fff;
    flex-shrink: 0;
}
.whatsnew-orb svg { width: 14px; height: 14px; }
.whatsnew .chev { opacity: .55; margin-left: 2px; }

.hero h1 {
    font-size: clamp(38px, 6.4vw, 70px); line-height: 1.04; font-weight: 800;
    letter-spacing: -2.2px; color: var(--head); margin-bottom: 22px;
}
.grad {
    background: linear-gradient(135deg, #a680ff 0%, #60a5fa 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.sub {
    font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 620px; margin: 0 auto 34px; line-height: 1.65;
}
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-cta {
    display: inline-flex; align-items: center; gap: 9px;
    background: linear-gradient(135deg, #a680ff, #6201ff); color: #fff;
    border: 1px solid rgba(166, 128, 255, .45); border-radius: 12px; padding: 13px 26px; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: 0 6px 22px rgba(98, 1, 255, .28); transition: transform .2s, box-shadow .2s, opacity .2s;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(98, 1, 255, .4); opacity: .95; }
.btn-cta-lg-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 12px; padding: 13px 22px;
    font-size: 15px; font-weight: 500; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .2s, background .2s, color .2s;
}
.btn-cta-lg-ghost:hover {
    border-color: rgba(255, 255, 255, .15);
    color: #fff;
    background: linear-gradient(180deg, #222222 0%, #161616 100%);
}
.trial-note { font-size: 13px; color: var(--muted-2); margin-top: 18px; }

/* ─── Features ─── */
.section { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 96px 24px 0; }
.sec-label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.sec-title { text-align: center; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -1px; color: var(--head); margin-bottom: 14px; }
.sec-sub { text-align: center; font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 auto 46px; line-height: 1.6; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat {
    background: var(--panel); border: 1px solid var(--border-soft); border-radius: 18px; padding: 28px 26px;
    transition: transform .25s, border-color .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.feat:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 50px var(--accent-g); }
.feat-ico { width: 46px; height: 46px; border-radius: 13px; background: rgba(108, 99, 255, .12); border: 1px solid rgba(108, 99, 255, .25); display: flex; align-items: center; justify-content: center; color: var(--accent-2); margin-bottom: 18px; }
.feat-ico svg { width: 22px; height: 22px; }
.feat h3 { font-size: 18px; font-weight: 700; color: var(--head); margin-bottom: 8px; }
.feat p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ─── How it works (3 steps, each with a custom visual mockup) ─── */
.howit { position: relative; z-index: 1; max-width: 1180px; margin: 96px auto 0; padding: 0 24px; }
.howit-head { text-align: center; margin-bottom: 48px; }
.howit-head .sec-label { margin-bottom: 14px; }
.howit-head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -1.1px; color: var(--head); margin-bottom: 16px; }
.howit-head p { font-size: 16px; color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.6; }

.howit-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.howit-step {
    position: relative;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .25s, transform .25s;
}
.howit-step:hover {
    border-color: rgba(166, 128, 255, .32);
    transform: translateY(-3px);
}
.howit-visual {
    height: 240px; padding: 22px;
    background: linear-gradient(206deg, #262626 50%, #333 93%, #3d3d3d 100%);
    border-bottom: 1px solid var(--border-soft);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
}
/* Inner mockups appear cropped by the bottom of the visual — same
   Resend "window into the app" trick as the features grid. */
.howit-visual > .hvis-connect-card,
.howit-visual > .hvis-sync,
.howit-visual > .hvis-edge {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    flex: 0 0 auto;
}
.howit-meta { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.howit-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(108, 99, 255, .12); border: 1px solid rgba(108, 99, 255, .22);
    color: var(--accent-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.howit-step h3 { font-size: 18px; font-weight: 700; color: var(--head); letter-spacing: -.2px; }
.howit-step p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* ── Visual 1: Connect a broker (modal-style picker) ── */
.hvis-connect-card {
    background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%);
    border: 1px solid #4f4f4f; border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.hvis-connect-title {
    font-size: 12px; color: #fff; font-weight: 600;
    letter-spacing: .04em; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.hvis-connect-title::after {
    content: '\D7'; color: #6b7280; font-size: 16px; font-weight: 300; line-height: 1;
}
.hvis-connect-list { display: flex; flex-direction: column; gap: 6px; }
.hvis-connect-broker {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    transition: border-color .15s, background .15s;
}
.hvis-connect-broker:hover { border-color: rgba(166, 128, 255, .35); background: rgba(166, 128, 255, .06); }
.hvis-connect-broker img { height: 18px; width: auto; flex-shrink: 0; }
.hvis-connect-broker span { font-size: 12.5px; color: #e5e7eb; font-weight: 500; flex: 1; }
.hvis-connect-broker::after {
    content: 'Connect'; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--accent-2); flex-shrink: 0;
}

/* ── Visual 2: Sync status + recent trades ── */
.hvis-sync {
    background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%);
    border: 1px solid #4f4f4f; border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.hvis-sync-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 14px;
    background: rgba(0, 0, 0, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 11.5px; font-weight: 600; color: #fff;
}
.hvis-sync-bar .howit-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
    animation: howitPulse 1.9s ease-out infinite;
    flex-shrink: 0;
}
@keyframes howitPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.hvis-sync-ago { margin-left: auto; color: rgba(255, 255, 255, .42); font-weight: 500; }
.hvis-sync-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-size: 12.5px;
}
.hvis-sync-row:last-child { border-bottom: none; }
.hvis-sym { color: #fff; font-weight: 600; }
.hvis-just {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(16, 185, 129, .14);
    color: var(--green-2);
    padding: 1px 7px; border-radius: 100px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.hvis-just::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--green-2);
}
.hvis-pnl { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.hvis-pnl.pos { color: #208757; }
.hvis-pnl.neg { color: #ff2727; }

/* ── Visual 3: edge KPIs + chart ── */
.hvis-edge {
    background: linear-gradient(180deg, #2C2C2E 0%, #1c1c1e 100%);
    border: 1px solid #4f4f4f; border-radius: 12px; padding: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    display: flex; flex-direction: column; gap: 12px;
    height: 260px;
}
.hvis-edge-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hvis-edge-kpi {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 9px;
    padding: 9px 12px;
}
.hvis-edge-kpi-lbl { font-size: 10.5px; color: #a1a1a6; margin-bottom: 3px; font-weight: 500; }
.hvis-edge-kpi-val { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.hvis-edge-kpi-val.pos { color: #208757; }
.hvis-edge-chart {
    flex: 1; min-height: 0;
    background: rgba(0, 0, 0, .15); border-radius: 9px; padding: 8px;
    display: flex; align-items: stretch;
}
.hvis-edge-chart svg { width: 100%; height: 100%; display: block; }

@media (max-width: 760px) {
    .howit-steps { grid-template-columns: 1fr; }
    .howit-visual { height: 220px; }
}

/* ─── Features grid (Resend-style cards with compact app-block visuals) ─── */
.features {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 96px auto 0; padding: 0 24px;
}
.features-head { text-align: center; margin-bottom: 48px; }
.features-head .sec-label { margin-bottom: 14px; }
.features-head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -1.1px; color: var(--head); margin-bottom: 16px; }
.features-head p { font-size: 16px; color: var(--muted); max-width: 580px; margin: 0 auto; line-height: 1.6; }
.features-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.fg-card {
    position: relative;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .25s, transform .25s;
}
.fg-card:hover {
    border-color: rgba(166, 128, 255, .32);
    transform: translateY(-3px);
}
.fg-visual {
    height: 268px; padding: 20px 20px 0;
    background: linear-gradient(206deg, #262626 50%, #333 93%, #3d3d3d 100%);
    border-bottom: 1px solid var(--border-soft);
    overflow: hidden;
    display: flex; flex-direction: column;
}
/* Inner UI elements appear cropped by the bottom of the visual — Resend-style
   "window into the app" effect. Flat bottom corners + content taller than the
   visible area so the crop looks intentional. */
.fg-visual > .jtable-wrap,
.fg-visual > .dk-cal,
.fg-visual > .chart-card,
.fg-visual > .dk-card,
.fg-visual > .pb-card,
.fg-visual > .ec-wrap {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* The journal and economic-calendar wraps inherit flex:1/min-height:0 from
   app-ui.css and end up sized exactly to the visual height, so their bottom
   border lands flush at the visual edge instead of being clipped. Force them
   to their natural content height so the bottom genuinely extends past. */
.fg-visual > .jtable-wrap,
.fg-visual > .ec-wrap {
    flex: 0 0 auto;
    height: auto;
}
.fg-body { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.fg-ico {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(108, 99, 255, .12);
    border: 1px solid rgba(108, 99, 255, .22);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-2);
    margin-bottom: 8px;
}
.fg-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fg-card h3 { font-size: 18px; font-weight: 700; color: var(--head); letter-spacing: -.2px; }
.fg-card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.fg-more {
    margin-top: 6px; font-size: 13px; font-weight: 500;
    color: var(--muted);
    display: inline-flex; align-items: center; gap: 5px;
    transition: color .15s, gap .2s; align-self: flex-start;
}
.fg-more:hover { color: var(--accent-2); gap: 9px; }
@media (max-width: 760px) {
    .features-grid { grid-template-columns: 1fr; }
    .fg-visual { height: 240px; padding: 16px 16px 0; }
}

/* ─── Pricing teaser (single line + button to /pricing) ─── */
.pricing-teaser {
    position: relative; z-index: 1;
    max-width: 760px; margin: 96px auto 0; padding: 0 24px;
    text-align: center;
}
.pricing-teaser .sec-label { margin-bottom: 14px; }
.pricing-teaser h2 {
    font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -1.1px;
    color: var(--head); margin-bottom: 14px;
}
.pricing-teaser p { font-size: 16px; color: var(--muted); margin-bottom: 26px; line-height: 1.6; }

/* ─── FAQ (native accordion via <details>) ─── */
.faq { position: relative; z-index: 1; max-width: 760px; margin: 96px auto 0; padding: 0 24px; }
.faq-head { text-align: center; margin-bottom: 40px; }
.faq-head .sec-label { margin-bottom: 14px; }
.faq-head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -1.1px; color: var(--head); margin-bottom: 16px; }
.faq-head p { font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s;
}
.faq-item[open] { border-color: rgba(166, 128, 255, .32); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 16px; font-weight: 600; color: var(--head);
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 22px; font-weight: 300;
    color: var(--muted);
    transition: color .2s;
    flex-shrink: 0; line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; color: var(--accent-2); }
.faq-answer {
    padding: 0 24px 22px;
    font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
.faq-answer p + p { margin-top: 10px; }
.faq-answer a { color: var(--accent-2); border-bottom: 1px solid currentColor; }
.faq-answer a:hover { color: #c4bdff; }

/* ─── Broker integrations (4 cards, premium dark glass) ─── */
.brokers-deep { position: relative; z-index: 1; max-width: 1180px; margin: 96px auto 0; padding: 0 24px; }
.brokers-deep-head { text-align: center; margin-bottom: 48px; }
.brokers-deep-head .sec-label { margin-bottom: 14px; }
.brokers-deep-head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -1.1px; color: var(--head); margin-bottom: 16px; }
.brokers-deep-head p { font-size: 16px; color: var(--muted); max-width: 600px; margin: 0 auto; line-height: 1.6; }
.brokers-deep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.bd-card {
    position: relative;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 18px;
    padding: 32px 32px 28px;
    display: flex; flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .25s, transform .25s;
}
.bd-card:hover {
    border-color: rgba(166, 128, 255, .32);
    transform: translateY(-3px);
}
.bd-logo {
    height: 44px; margin-bottom: 22px;
    display: flex; align-items: center;
}
.bd-logo img { height: 100%; width: auto; display: block; }
.bd-card h3 {
    font-size: 20px; font-weight: 700; color: var(--head); letter-spacing: -.3px;
    margin-bottom: 10px;
}
.bd-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; flex: 1; }
.bd-more {
    font-size: 13px; font-weight: 500; color: var(--muted);
    display: inline-flex; align-items: center; gap: 5px;
    transition: color .15s, gap .2s; align-self: flex-start;
}
.bd-more:hover { color: var(--accent-2); gap: 9px; }
@media (max-width: 760px) {
    .brokers-deep-grid { grid-template-columns: 1fr; }
    .bd-card { padding: 26px 24px 24px; }
}

/* ─── Versus section (spreadsheet vs Tracker Fx comparison) ─── */
.versus {
    position: relative; z-index: 1;
    max-width: 980px; margin: 96px auto 0; padding: 0 24px;
}
.versus-head { text-align: center; margin-bottom: 40px; }
.versus-head .sec-label { margin-bottom: 14px; }
.versus-head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -1.1px; color: var(--head); margin-bottom: 16px; }
.versus-head p { font-size: 16px; color: var(--muted); max-width: 580px; margin: 0 auto; line-height: 1.6; }
.versus-table {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-soft);
    border-radius: 18px; overflow: hidden;
    background: rgba(255, 255, 255, .015);
}
.versus-col { padding: 22px 28px 28px; }
.versus-col + .versus-col {
    border-left: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(108, 99, 255, .06), rgba(108, 99, 255, .015));
}
.versus-col h3 {
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-2);
    padding-bottom: 16px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
}
.versus-col + .versus-col h3 { color: var(--accent-2); }
.versus-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14.5px; color: var(--text); line-height: 1.5;
}
.versus-row:last-child { border-bottom: none; padding-bottom: 0; }
.versus-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.versus-icon--x { background: rgba(239, 68, 68, .12); color: #f87171; }
.versus-icon--check { background: rgba(16, 185, 129, .15); color: var(--green-2); }
.versus-icon svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
    .versus-table { grid-template-columns: 1fr; }
    .versus-col + .versus-col { border-left: none; border-top: 1px solid var(--border-soft); }
}

/* ─── Platforms strip (same as production index.php — under the app demo) ─── */
.hd-platforms {
    position: relative; z-index: 1;
    width: 100%;
    padding: 26px 40px;
    margin-top: 48px;
    display: flex; align-items: center; justify-content: center;
    gap: 32px; flex-wrap: wrap;
}
.hd-platforms-label {
    font-size: 11px; font-weight: 600;
    color: rgba(255, 255, 255, 0.28);
    text-transform: uppercase; letter-spacing: 0.14em;
    white-space: nowrap;
}
.hd-platforms-divider {
    width: 1px; height: 28px;
    background: rgba(255, 255, 255, 0.09);
    flex-shrink: 0;
}
.hd-platforms img {
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
}
.hd-platforms img:hover {
    opacity: 1;
    transform: scale(1.05);
}
@media (max-width: 720px) {
    .hd-platforms { gap: 22px; padding: 20px 16px; }
    .hd-platforms-divider { display: none; }
}

/* ─── Final CTA (premium dark card) ─── */
.final-cta {
    position: relative; z-index: 1;
    max-width: 900px; margin: 120px auto 0; padding: 0 24px;
}
.final-cta-inner {
    position: relative; overflow: hidden;
    /* Deep dark surface with a baked-in radial highlight from the top so
       the card reads as "lit from above" without any colour cast.
       No outer drop shadow - on a pure-black page it would just stack
       a slightly-less-black halo around the card. The border + inset
       top highlight + surface gradient handle separation from the page. */
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 255, 255, .06), transparent 65%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 32px;
    padding: 72px 40px 60px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Subtle vignette on the bottom corners to anchor the card */
.final-cta-inner::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 120% 80% at 50% 110%, rgba(0, 0, 0, .55), transparent 60%);
}
.final-cta-inner > * { position: relative; z-index: 1; }
.final-cta h2 {
    font-size: clamp(32px, 4.4vw, 48px); font-weight: 800;
    letter-spacing: -1.4px; color: var(--head);
    line-height: 1.06;
    margin-bottom: 16px;
}
.final-cta-sub {
    font-size: clamp(15px, 1.7vw, 17px);
    color: var(--muted);
    max-width: 520px; margin: 0 auto 30px;
    line-height: 1.55;
}
.final-cta-ctas {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 22px;
}
.final-cta .trial-note { margin-top: 0; }

/* ─── Footer (Resend-style: brand left, 5 columns right) ─── */
footer { position: relative; z-index: 1; border-top: 1px solid var(--border-soft); margin-top: 110px; padding: 64px 24px 32px; }
.foot-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.foot-brand { display: flex; flex-direction: column; }
.foot-logo img { height: 26px; display: block; margin-bottom: 20px; }
.foot-disclaimer { font-size: 12px; color: var(--muted-2); line-height: 1.65; max-width: 300px; margin-bottom: 22px; }
.foot-status {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-soft);
    padding: 6px 14px; border-radius: 100px;
    font-size: 12px; color: var(--muted);
    align-self: flex-start;
}
.foot-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, .55);
}
.foot-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 24px; }
.foot-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--head); margin-bottom: 18px; }
.foot-col a { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 11px; transition: color .15s; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { max-width: 1200px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--muted-2); text-align: center; }

@media (max-width: 980px) {
    .foot-inner { grid-template-columns: 1fr; gap: 40px; }
    .foot-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    footer { margin-top: 64px; padding: 40px 20px 24px; }
    .foot-disclaimer { display: none; }
    .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
    .foot-col:nth-of-type(3),
    .foot-col:nth-of-type(4) { display: none; }
    .foot-col h4 { margin-bottom: 12px; }
    .foot-col a { margin-bottom: 9px; }
    .foot-bottom { margin-top: 32px; padding-top: 18px; font-size: 11px; }
}

/* ─── Responsive (site-shell rules only — app-ui.css has its own) ─── */
@media (max-width: 900px) {
    .hd-nav { display: none; }
    .hd-actions .hd-signin, .hd-actions .hd-cta-btn { display: none; }
    .hd-mob-hamburger { display: flex; }
    .hd-header { padding: 14px 20px; }
    .feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .hero { padding-top: 56px; }
    .hero h1 { font-size: clamp(34px, 9vw, 44px); }
    .btn-cta, .btn-cta-lg-ghost { width: 100%; justify-content: center; }
}