/* ============================================================
   FIPIndex Market — marketing site design system
   Palette matches the live app's ThemeColor defaults so this
   static site and the real dashboard feel like one product.
   ============================================================ */

:root {
    --primary: #059669;
    --primary-light: #34D399;
    --primary-dark: #047857;
    --gain: #22C55E;
    --loss: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;

    --surface-base: #0F1115;
    --surface-raised: #161A1E;
    --surface-overlay: #1C2127;
    --surface-border: #2A2F36;
    --surface-border-light: #363C44;

    --content-primary: #E8EAED;
    --content-secondary: #9AA0AB;
    --content-tertiary: #6B7280;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--surface-base);
    color: var(--content-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Buttons ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid var(--primary);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.button:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.button:active { transform: translateY(1px); }
.button--ghost {
    background: transparent;
    color: var(--content-primary);
    border: 1px solid var(--surface-border-light);
}
.button--ghost:hover { border-color: var(--primary); color: var(--primary-light); background: transparent; }
.button--sm { padding: 10px 18px; font-size: 14px; }
.button--block { width: 100%; }

/* ---------- Navbar ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 17, 21, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--surface-border);
}
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    max-width: var(--max-width);
    margin: 0 auto;
}
.navbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: #fff; transition: opacity .15s ease; }
.navbar__brand:hover { opacity: 0.85; }
.navbar__brand .badge-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 4px rgba(34,197,94,0.15); }

/* Logo wordmark has dark text designed for a light background — wrap it in
   a white pill so it stays legible on the dark navbar/footer. */
.navbar__logo-wrap { display: inline-flex; align-items: center; background: #fff; padding: 7px 14px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.navbar__logo { height: 26px; width: auto; display: block; }
.footer__logo-wrap { display: inline-flex; align-items: center; background: #fff; padding: 9px 16px; border-radius: 10px; }
.footer__logo { height: 26px; width: auto; display: block; }

.navbar__links { display: flex; align-items: center; gap: 6px; }
.navbar__mobile-cta { display: none; }
.navbar__links > a {
    position: relative;
    display: inline-block;
    color: var(--content-secondary);
    font-size: 14.5px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: color .15s ease, background .15s ease;
}
.navbar__links > a:hover { color: var(--content-primary); background: rgba(255,255,255,0.05); }
.navbar__links > a.active { color: #fff; }
.navbar__links > a.active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}
.gtranslate_wrapper { display: flex; align-items: center; }
.navbar__actions { display: flex; align-items: center; gap: 12px; }
.navbar__toggle {
    display: none;
    background: none;
    border: none;
    color: var(--content-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background .15s ease;
}
.navbar__toggle:hover { background: var(--surface-overlay); }

/* ---- Products dropdown: opens on hover (desktop) OR a click/tap toggle
   (".open" class, set by JS) so it also works on touch devices, where
   :hover never fires persistently. ---- */
.navbar__dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.navbar__dropdown-trigger i { transition: transform .2s ease; }
.navbar__dropdown.open .navbar__dropdown-trigger i,
.navbar__dropdown:hover .navbar__dropdown-trigger i { transform: rotate(180deg); }

.navbar__dropdown { position: relative; }
.navbar__dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 620px;
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.navbar__dropdown:hover .navbar__dropdown-menu,
.navbar__dropdown.open .navbar__dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.navbar__dropdown-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: var(--radius-sm);
    transition: background .12s ease;
}
.navbar__dropdown-item:hover { background: var(--surface-overlay); }
.navbar__dropdown-item.active { background: rgba(5,150,105,0.1); }
.navbar__dropdown-item i { width: 20px; height: 20px; color: var(--primary-light); flex-shrink: 0; margin-top: 2px; }
/* The text block is a bare <div> (icon + title + description) — without an
   explicit min-width, a flex child's default min-width:auto can keep it
   from shrinking to fit narrow containers, forcing the description text to
   overflow/get clipped sideways instead of wrapping. */
.navbar__dropdown-item > div { min-width: 0; flex: 1 1 auto; }
.navbar__dropdown-item strong { display: block; font-size: 14px; color: var(--content-primary); white-space: normal; overflow-wrap: break-word; }
.navbar__dropdown-item span { display: block; font-size: 12.5px; color: var(--content-tertiary); margin-top: 2px; white-space: normal; overflow-wrap: break-word; }

/* ---------- Hero ---------- */
.hero {
    padding: 88px 0 60px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -160px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(5,150,105,0.25), transparent 70%);
    pointer-events: none;
}
.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    position: relative;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(5,150,105,0.12);
    border: 1px solid rgba(5,150,105,0.35);
    color: var(--primary-light);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}
.hero h1 {
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.12;
    margin: 0 0 18px;
    color: #fff;
    letter-spacing: -0.02em;
}
.hero p.lead {
    font-size: 17px;
    color: var(--content-secondary);
    max-width: 520px;
    margin: 0 0 32px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.hero__stats div strong { display: block; font-size: 24px; color: #fff; }
.hero__stats div span { font-size: 13px; color: var(--content-tertiary); }

.hero__visual {
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.hero__visual-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 4px;
    border-bottom: 1px solid var(--surface-border);
    font-size: 14px;
}
.hero__visual-row:last-child { border-bottom: none; }
.hero__visual-sym { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.hero__visual-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-overlay); font-size: 13px; font-weight: 700; color: var(--primary-light);
}
.hero__visual-price { text-align: right; }
.hero__visual-price strong { display: block; color: #fff; }
.up { color: var(--gain); font-size: 12.5px; }
.down { color: var(--loss); font-size: 12.5px; }

/* ---------- Market widget (stock / crypto price list with sparkline) ---------- */
.market-widget {
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 8px 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.market-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--surface-border);
}
.market-widget__head h3 { font-size: 14.5px; color: #fff; margin: 0; }
.market-widget__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gain); font-weight: 600; }
.market-widget__live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.market-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--surface-border);
}
.market-row:last-child { border-bottom: none; }
.market-row__icon {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-overlay);
    font-size: 12.5px; font-weight: 700; color: var(--primary-light);
    flex-shrink: 0;
}
.market-row__name { min-width: 0; }
.market-row__name strong { display: block; color: #fff; font-size: 14px; }
.market-row__name span { display: block; color: var(--content-tertiary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-row__spark { width: 64px; height: 28px; flex-shrink: 0; }
.market-row__spark.up polyline { stroke: var(--gain); }
.market-row__spark.down polyline { stroke: var(--loss); }
.market-row__spark polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.market-row__price { text-align: right; flex-shrink: 0; }
.market-row__price strong { display: block; color: #fff; font-size: 14px; }

.market-widget__foot { padding: 16px 0; text-align: center; }
.market-widget__foot a { font-size: 13.5px; font-weight: 600; color: var(--primary-light); }
.market-widget--narrow { max-width: 640px; margin: 0 auto; }

/* ---------- Ticker ---------- */
.ticker {
    border-top: 1px solid var(--surface-border);
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-raised);
    overflow: hidden;
    white-space: nowrap;
}
.ticker__track {
    display: inline-flex;
    animation: ticker-scroll 32s linear infinite;
    padding: 14px 0;
}
.ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; font-size: 14px; border-right: 1px solid var(--surface-border); }
.ticker__item strong { color: #fff; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Section shell ---------- */
section { padding: 88px 0; }
.section__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section__eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-light);
    margin-bottom: 14px;
}
.section__head h2 { font-size: clamp(26px, 3vw, 38px); color: #fff; margin: 0 0 14px; letter-spacing: -0.01em; }
.section__head p { color: var(--content-secondary); font-size: 16px; margin: 0; }

.section--alt { background: var(--surface-raised); }

/* ---------- Split feature block (image/text alternating) ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__eyebrow { color: var(--primary-light); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; display: block; }
.split__body h2 { font-size: clamp(24px, 2.8vw, 34px); color: #fff; margin: 0 0 16px; letter-spacing: -0.01em; }
.split__body p { color: var(--content-secondary); font-size: 15.5px; margin: 0 0 24px; }
.split__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.split__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--content-secondary); font-size: 14.5px; }
.split__list li i { color: var(--gain); flex-shrink: 0; margin-top: 2px; }
.split__media {
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.split__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(5,150,105,0.18), transparent 60%);
}
.split__media i { position: relative; z-index: 1; color: var(--primary-light); }

/* ---------- Property card (real estate photo placeholder) ---------- */
.property-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.property-card {
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.property-card__photo {
    height: 170px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 14px;
}
.property-card__photo i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); color: rgba(255,255,255,0.35); width: 64px; height: 64px; }
.property-card__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.property-card__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%);
    z-index: 1;
}
.property-card__badge {
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
}
.property-card__body { padding: 20px; }
.property-card__body h3 { font-size: 15.5px; color: #fff; margin: 0 0 4px; }
.property-card__body .location { display: flex; align-items: center; gap: 5px; color: var(--content-tertiary); font-size: 12.5px; margin-bottom: 14px; }
.property-card__body .location i { width: 13px; height: 13px; }
.property-card__stats { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--surface-border); }
.property-card__stats div strong { display: block; color: var(--gain); font-size: 15px; }
.property-card__stats div span { display: block; color: var(--content-tertiary); font-size: 11.5px; margin-top: 2px; }

/* Distinct gradient per property, standing in for real photography */
.photo-1 { background: linear-gradient(135deg, #0f3d3e, #146356 60%, #1a8f6f); }
.photo-2 { background: linear-gradient(135deg, #1e2a4a, #2c4270 60%, #4361ad); }
.photo-3 { background: linear-gradient(135deg, #3a2a1e, #6b4423 60%, #b5762f); }
.photo-4 { background: linear-gradient(135deg, #2a1e3a, #52296b 60%, #8b46b5); }
.photo-5 { background: linear-gradient(135deg, #1e3a2e, #285c40 60%, #3d9463); }
.photo-6 { background: linear-gradient(135deg, #3a1e26, #6b2836 60%, #b53d54); }

/* ---------- Card grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card {
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--surface-border-light); transform: translateY(-3px); }
.card__icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(5,150,105,0.14);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-light);
    margin-bottom: 18px;
}
.card h3 { font-size: 17px; color: #fff; margin: 0 0 10px; }
.card p { font-size: 14.5px; color: var(--content-secondary); margin: 0; }
.card a.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--primary-light); }

.stat-card { text-align: center; padding: 26px 16px; background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md); }
.stat-card strong { display: block; font-size: 28px; color: #fff; margin-bottom: 6px; }
.stat-card span { font-size: 13px; color: var(--content-tertiary); }

/* ---------- CTA banner ---------- */
.cta-banner {
    background: linear-gradient(135deg, rgba(5,150,105,0.16), rgba(52,211,153,0.05));
    border: 1px solid rgba(5,150,105,0.3);
    border-radius: var(--radius-lg);
    padding: 56px;
    text-align: center;
}
.cta-banner h2 { font-size: clamp(24px, 3vw, 32px); color: #fff; margin: 0 0 14px; }
.cta-banner p { color: var(--content-secondary); margin: 0 0 28px; }
.cta-banner .hero__cta { justify-content: center; }

/* ---------- Feature page hero (smaller, page-level) ---------- */
.page-hero {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--surface-border);
}
.page-hero__eyebrow { color: var(--primary-light); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; }
.page-hero h1 { font-size: clamp(28px, 4vw, 42px); color: #fff; margin: 0 0 16px; letter-spacing: -0.02em; }
.page-hero p.lead { color: var(--content-secondary); font-size: 16.5px; max-width: 620px; margin: 0 0 28px; }
.breadcrumb { font-size: 13.5px; color: var(--content-tertiary); margin-bottom: 20px; }
.breadcrumb a { color: var(--content-tertiary); }
.breadcrumb a:hover { color: var(--primary-light); }

/* ---------- How it works steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; padding: 30px 24px 24px; background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md); }
.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -16px; left: 24px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
.step h3 { font-size: 16px; color: #fff; margin: 14px 0 8px; }
.step p { font-size: 14px; color: var(--content-secondary); margin: 0; }

/* ---------- Trader cards (copy trading leaderboard) ---------- */
.trader-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trader-card {
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 26px 22px;
    text-align: center;
}
.trader-card__avatar {
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(5,150,105,0.16);
    color: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px;
    margin: 0 auto 14px;
}
.trader-card h3 { color: #fff; font-size: 15px; margin: 0 0 8px; }
.trader-card__badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; margin-bottom: 16px; }
.trader-card__badge--stocks { background: rgba(59,130,246,0.15); color: var(--info); }
.trader-card__badge--crypto { background: rgba(245,158,11,0.15); color: var(--warning); }
.trader-card__badge--forex { background: rgba(34,197,94,0.15); color: var(--gain); }
.trader-card__badge--multi { background: rgba(167,139,250,0.15); color: #a78bfa; }
.trader-card__spark { width: 100%; height: 34px; margin-bottom: 16px; }
.trader-card__spark polyline { fill: none; stroke: var(--gain); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trader-card__stats { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--surface-border); text-align: left; }
.trader-card__stats div strong { display: block; font-size: 14.5px; color: #fff; }
.trader-card__stats div span { display: block; font-size: 11px; color: var(--content-tertiary); margin-top: 2px; }

/* ---------- Testimonials ---------- */
.testimonial {
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.testimonial__stars { color: var(--warning); display: flex; gap: 3px; }
.testimonial__stars i { width: 15px; height: 15px; fill: var(--warning); }
.testimonial p.quote { color: var(--content-secondary); font-size: 14.5px; margin: 0; flex: 1; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(5,150,105,0.16);
    color: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.testimonial__author strong { display: block; color: #fff; font-size: 13.5px; }
.testimonial__author span { display: block; color: var(--content-tertiary); font-size: 12.5px; }

/* ---------- Simple content page (legal/about/support) ---------- */
.content-page { padding: 56px 0 88px; }
.content-page .container { max-width: 800px; }
.content-page h1 { font-size: clamp(28px, 4vw, 38px); color: #fff; margin: 0 0 8px; }
.content-page .updated { color: var(--content-tertiary); font-size: 13.5px; margin-bottom: 40px; }
.content-page h2 { font-size: 20px; color: #fff; margin: 40px 0 14px; }
.content-page p { color: var(--content-secondary); font-size: 15px; margin: 0 0 16px; }
.content-page ul { color: var(--content-secondary); font-size: 15px; padding-left: 20px; margin: 0 0 16px; display: grid; gap: 8px; }
.content-page a.inline-link { color: var(--primary-light); font-weight: 600; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.contact-card { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 24px; }
.contact-card i { color: var(--primary-light); margin-bottom: 12px; }
.contact-card h3 { color: #fff; font-size: 15px; margin: 0 0 6px; }
.contact-card p { color: var(--content-secondary); font-size: 14px; margin: 0; }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13.5px; color: var(--content-secondary); margin-bottom: 8px; font-weight: 500; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    background: var(--surface-overlay);
    border: 1px solid var(--surface-border-light);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: var(--content-primary);
    font-size: 14.5px;
    font-family: inherit;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--primary); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--surface-border); padding: 22px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; color: #fff; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--content-tertiary); transition: transform .15s ease; }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p { color: var(--content-secondary); font-size: 14.5px; margin: 14px 0 0; }

/* ---------- Table (fees/specs) ---------- */
.spec-table { width: 100%; border-collapse: collapse; background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md); overflow: hidden; }
.spec-table th, .spec-table td { text-align: left; padding: 14px 20px; font-size: 14.5px; border-bottom: 1px solid var(--surface-border); }
.spec-table th { color: var(--content-tertiary); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; background: var(--surface-overlay); }
.spec-table td { color: var(--content-secondary); }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td strong { color: #fff; }

/* ---------- Footer ---------- */
footer { background: var(--surface-raised); border-top: 1px solid var(--surface-border); padding: 64px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom: 48px; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: #fff; margin-bottom: 14px; }
.footer__brand .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); }
.footer p.blurb { color: var(--content-tertiary); font-size: 13.5px; max-width: 280px; }
.footer__col h4 { color: #fff; font-size: 13.5px; margin: 0 0 16px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__col a { color: var(--content-tertiary); font-size: 13.5px; }
.footer__col a:hover { color: var(--primary-light); }
.footer__bottom { border-top: 1px solid var(--surface-border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer__bottom span { color: var(--content-tertiary); font-size: 13px; }
.footer__risk { color: var(--content-tertiary); font-size: 12px; max-width: var(--max-width); margin: 24px auto 0; padding: 0 24px; line-height: 1.7; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .navbar__toggle { display: block; flex-shrink: 0; }

    /* The language widget renders via third-party JS into a fixed-size
       globe icon — it and the Log In/Get Started buttons used to sit in
       the same flex row as the hamburger with no room to breathe, so on
       narrow screens they'd overlap it. Shrink the globe and move the
       auth buttons into the slide-down menu instead (below) to free up
       the top bar down to just logo, translator, and hamburger. */
    .navbar__inner { gap: 8px; }
    .gtranslate_wrapper { flex-shrink: 0; transform: scale(0.85); transform-origin: center; }
    .navbar__actions { display: none; }

    /* Mobile menu: a slide-down panel toggled by JS via ".mobile-open"
       (not inline styles), so it animates cleanly and has one source of truth. */
    .navbar__links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface-raised);
        border-bottom: 1px solid var(--surface-border);
        box-shadow: 0 20px 40px rgba(0,0,0,0.35);
        padding: 10px 16px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .25s ease, opacity .2s ease;
    }
    .navbar__links.mobile-open {
        max-height: 80vh;
        opacity: 1;
        overflow-y: auto;
    }
    .navbar__links > a { padding: 13px 10px; font-size: 15px; }
    .navbar__links > a.active::after { display: none; }
    .navbar__links > a.active { background: rgba(5,150,105,0.12); border-radius: var(--radius-sm); }

    /* Log In / Get Started move here from the top bar on mobile (see
       .navbar__actions { display:none } above) so they're still reachable. */
    .navbar__mobile-cta {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid var(--surface-border);
    }

    /* The "Products" trigger + its menu becomes a simple accordion inline
       with the rest of the mobile menu — no more floating/hover-only panel. */
    .navbar__dropdown { width: 100%; }
    .navbar__dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 13px 10px;
        font-size: 15px;
        color: var(--content-secondary);
        border-radius: var(--radius-sm);
    }
    .navbar__dropdown.open .navbar__dropdown-trigger { color: #fff; background: rgba(255,255,255,0.04); }
    .navbar__dropdown-menu {
        position: static;
        transform: none;
        width: 100%;
        display: block;
        grid-template-columns: 1fr;
        max-height: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        overflow: hidden;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        transition: max-height .25s ease, padding .25s ease;
    }
    .navbar__dropdown.open .navbar__dropdown-menu {
        /* The base (desktop) rule for this same compound selector sets
           transform: translateX(-50%) translateY(0) to center the floating
           menu under the trigger. That rule has higher specificity than the
           plain ".navbar__dropdown-menu { transform: none }" above, so on
           mobile it was winning anyway and shifting the menu 50% of its own
           width off-screen to the left — which is why titles/icons were
           invisible and only the tail end of description text peeked out
           on the right. Overriding it here, at matching specificity, wins. */
        transform: none;
        left: 0;
        max-height: 900px;
        padding: 6px 0 10px 12px;
    }
    .navbar__dropdown-item { padding: 10px; }

    .hero__grid, .split, .split--reverse .split__media { grid-template-columns: 1fr; }
    .split__media { order: -1 !important; }
    .grid-3, .grid-4, .steps { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .cta-banner { padding: 36px 24px; }
}
@media (max-width: 560px) {
    .grid-3, .grid-4, .steps { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    section { padding: 64px 0; }
}