        :root{
            --black:#050608;
            --black-2:#090b0e;
            --panel:#101317;
            --panel-2:#15191e;
            --panel-3:#1b2026;
            --red:#8f1d2c;
            --red-2:#b52b40;
            --red-soft:rgba(143,29,44,.13);
            --white:#f7f7f7;
            --text:#e7e9eb;
            --muted:#9299a0;
            --muted-2:#687078;
            --line:rgba(255,255,255,.075);
            --container:1360px;
            --radius:16px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--black);
            color:var(--text);
            font-family:"DM Sans",system-ui,sans-serif;
            overflow-x:hidden;
        }
        a{text-decoration:none}
        button,input,select{font:inherit}
        .container-tcm{width:min(var(--container),calc(100% - 32px));margin:auto}
        .section{padding:72px 0}
        .section-tight{padding:58px 0}
        .section-dark{background:var(--black)}
        .section-panel{background:var(--black-2)}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#c8cdd1;
            font-size:10px;
            font-weight:800;
            letter-spacing:.18em;
            text-transform:uppercase;
        }
        .eyebrow:before{
            content:"";
            width:22px;
            height:2px;
            background:var(--red-2);
        }
        .section-title{
            margin:9px 0 10px;
            color:var(--white);
            font:800 clamp(30px,3.5vw,48px)/1.05 Manrope,sans-serif;
            letter-spacing:-.045em;
        }
        .section-text{
            max-width:690px;
            margin:0;
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
        }
        .section-heading{margin-bottom:30px}
        .btn-red,.btn-ghost{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:44px;
            padding:0 18px;
            border-radius:8px;
            font-size:12px;
            font-weight:800;
            transition:.2s ease;
        }
        .btn-red{background:var(--red);border:1px solid var(--red);color:#fff}
        .btn-red:hover{background:var(--red-2);border-color:var(--red-2);color:#fff;transform:translateY(-2px)}
        .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}
        .btn-ghost:hover{border-color:var(--red-2);background:var(--red-soft);color:#fff}

        /* Header */
        .site-header{
            position:fixed;
            inset:0 0 auto;
            z-index:1000;
            background:rgba(5,6,8,.76);
            backdrop-filter:blur(18px);
            border-bottom:1px solid transparent;
            transition:.2s ease;
        }
        .site-header.scrolled{background:rgba(5,6,8,.97);border-color:var(--line)}
        .topbar{height:36px;border-bottom:1px solid rgba(255,255,255,.04);font-size:10px;color:#9da3a8}
        .topbar-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
        .status{display:flex;align-items:center;gap:8px}
        .status-dot{width:7px;height:7px;border-radius:50%;background:var(--red-2);box-shadow:0 0 12px rgba(181,43,64,.7)}
        .toplinks{display:flex;align-items:center;gap:18px}
        .toplinks a{color:#c7ccd0}
        .lang{position:relative}
        .lang-toggle{border:0;background:none;color:#fff;font-size:10px}
        .lang-menu{
            position:absolute;right:0;top:26px;display:none;min-width:145px;padding:6px;
            background:#111419;border:1px solid var(--line);border-radius:9px;box-shadow:0 18px 50px rgba(0,0,0,.4)
        }
        .lang.open .lang-menu{display:block}
        .lang-menu a{display:block;padding:8px 10px;color:#d5d9dc;border-radius:6px;font-size:11px}
        .lang-menu a:hover{background:var(--red-soft);color:#fff}
        .nav-main{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .brand{display:flex;align-items:center;gap:9px;color:#fff;font:800 21px Manrope,sans-serif;white-space:nowrap}
        .brand-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--red-2);font-size:24px}
        .brand small{display:block;margin-top:-2px;color:#6d747a;font:900 9px DM Sans,sans-serif;letter-spacing:.27em}
        .main-nav{display:flex;align-items:center;gap:22px}
        .main-nav a{color:#c9ced2;font-size:11px;font-weight:700;white-space:nowrap}
        .main-nav a:hover{color:var(--red-2)}
        .nav-actions{display:flex;align-items:center;gap:8px}
        .mobile-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:transparent;color:#fff}
        .mobile-drawer{display:none}

        /* Hero */
        .hero{
            position:relative;
            min-height:720px;
            padding:142px 0 60px;
            background:
                radial-gradient(circle at 76% 36%,rgba(143,29,44,.16),transparent 28%),
                linear-gradient(180deg,#040608,#090c10);
            overflow:hidden;
        }
        .hero:before{
            content:"";
            position:absolute;inset:0;opacity:.45;
            background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
            background-size:64px 64px;
            mask-image:linear-gradient(to bottom,#000,transparent 85%);
        }
        .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center}
        .hero-kicker{margin-bottom:18px}
        .hero-title{max-width:700px;margin:0 0 20px;font:800 clamp(46px,5.8vw,78px)/.97 Manrope,sans-serif;letter-spacing:-.065em}
        .hero-title span{color:var(--red-2)}
        .hero-copy{max-width:620px;color:#9da4aa;font-size:15px;line-height:1.75;margin:0 0 26px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
        .hero-trust{display:flex;flex-wrap:wrap;gap:18px;color:#c0c5c9;font-size:10px}
        .hero-trust span{display:flex;align-items:center;gap:6px}
        .hero-trust i{color:var(--red-2)}
        .hero-note{margin-top:15px;color:#6f777e;font-size:9px;line-height:1.55}

        .market-terminal{
            min-height:470px;
            padding:18px;
            border:1px solid var(--line);
            border-radius:18px;
            background:linear-gradient(145deg,#161b20,#090c0f);
            box-shadow:0 28px 80px rgba(0,0,0,.34);
        }
        .terminal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
        .terminal-label{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#707880}
        .terminal-title{font-size:20px;font-weight:800;color:#fff;margin-top:4px}
        .terminal-state{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;color:#aeb5ba;font-size:9px}
        .terminal-state i{color:var(--red-2)}
        .market-empty{
            min-height:220px;
            display:grid;
            place-items:center;
            text-align:center;
            margin-top:5px;
            color:#777f86;
            font-size:11px;
            padding:1px;
        }
        .terminal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
        .terminal-stat{padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.018);border-radius:9px}
        .terminal-stat small{display:block;color:#687078;font-size:8px;text-transform:uppercase}
        .terminal-stat strong{display:block;color:#e9ebed;margin-top:4px;font-size:13px}
        .terminal-disclaimer{margin-top:12px;color:#5f686f;font-size:8px;line-height:1.5}

        /* Stats */
        .stats-strip{background:#0b0e11;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
        .stat{padding:23px 20px;border-right:1px solid var(--line)}
        .stat:last-child{border-right:0}
        .stat strong{display:block;color:#fff;font:800 26px Manrope,sans-serif}
        .stat span{display:block;margin-top:4px;color:#727a81;font-size:9px;text-transform:uppercase;letter-spacing:.08em}

 /* =========================================================
   GLOBAL MARKETS — TWO ROW SLIDER
   ========================================================= */

.markets-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(125, 18, 30, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0b0b0b 55%,
            #080808 100%
        );

    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.markets-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}

.markets-section .container-tcm {
    position: relative;
    z-index: 1;
}


/* =========================================================
   HEADER
   ========================================================= */

.markets-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 28px;
}

.markets-heading-content {
    max-width: 760px;
}

.markets-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 8px;

    color: #ae1e2c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.markets-heading .eyebrow::before {
    content: "";

    width: 23px;
    height: 1px;

    background: #a21c2a;
}

.markets-heading .section-title {
    margin: 0;

    color: #f3f3f3;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -.045em;
}

.markets-heading .section-text {
    max-width: 700px;

    margin: 11px 0 0;

    color: #777;

    font-size: 13px;
    line-height: 1.65;
}

.markets-heading-meta {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;

    padding-bottom: 5px;

    color: #505050;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .15em;

    white-space: nowrap;
}

.markets-heading-line {
    width: 30px;
    height: 1px;

    background: #801923;
}


/* =========================================================
   SLIDER
   ========================================================= */

.markets-slider {
    position: relative;
}

.markets-slider-viewport {
    position: relative;

    overflow: hidden;

    width: 100%;
}

.markets-slider-track {
    display: grid;

    grid-auto-flow: column;

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    grid-auto-columns:
        calc((100% - 30px) / 4);

    gap: 10px;

    width: max-content;

    transition:
        transform 500ms cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   MARKET SLIDE
   ========================================================= */

.market-slide {
    min-width: 0;

    width: 100%;
}


/* =========================================================
   MARKET CARD
   ========================================================= */

.market-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 265px;

    padding: 20px;

    color: inherit;
    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.052),
            rgba(255,255,255,.014)
        );

    border: 1px solid rgba(255,255,255,.065);

    overflow: hidden;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

.market-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: #a01c2a;

    transition: width 280ms ease;
}

.market-card::after {
    content: "";

    position: absolute;

    right: -55px;
    bottom: -65px;

    width: 165px;
    height: 165px;

    border-radius: 50%;

    background: rgba(143,20,32,.045);

    pointer-events: none;
}

.market-card:hover {
    transform: translateY(-4px);

    color: inherit;
    text-decoration: none;

    border-color: rgba(163,29,43,.48);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.02)
        );

    box-shadow:
        0 18px 42px rgba(0,0,0,.28);
}

.market-card:hover::before {
    width: 100%;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.market-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.market-card-identity {
    display: flex;
    align-items: center;

    gap: 10px;
}

.market-card-index {
    color: #4e4e4e;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;
}

.market-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    color: #b32130;

    background:
        linear-gradient(
            135deg,
            rgba(153,27,41,.18),
            rgba(153,27,41,.035)
        );

    border: 1px solid rgba(165,29,43,.20);

    font-size: 18px;
}

.market-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: #656565;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.06);

    font-size: 12px;

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.market-card:hover .market-arrow {
    color: #fff;

    background: #921b29;

    border-color: #a52231;

    transform: translate(2px,-2px);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.market-card-content {
    position: relative;
    z-index: 2;

    margin-top: 19px;
}

.market-card-label {
    display: block;

    margin-bottom: 6px;

    color: #777;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .16em;
}

.market-card h3 {
    margin: 0 0 8px;

    color: #ededed;

    font-size: 21px;
    font-weight: 650;

    line-height: 1.08;

    letter-spacing: -.025em;
}

.market-card p {
    display: -webkit-box;

    margin: 0;

    color: #707070;

    font-size: 11px;
    line-height: 1.58;

    overflow: hidden;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


/* =========================================================
   INSTRUMENTS
   ========================================================= */

.market-instruments {
    position: relative;
    z-index: 2;

    margin-top: 15px;
}

.market-instruments-label {
    display: block;

    margin-bottom: 7px;

    color: #4d4d4d;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .15em;
}

.market-examples {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.market-example {
    display: inline-flex;
    align-items: center;

    max-width: 100%;

    padding: 5px 7px;

    color: #707070;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.05);

    font-size: 8px;
    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.market-card-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: auto;
    padding-top: 14px;

    border-top: 1px solid rgba(255,255,255,.055);
}

.market-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #c2c2c2;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .02em;

    transition:
        color 180ms ease,
        gap 180ms ease;
}

.market-link i {
    color: #a21d2b;

    transition: transform 180ms ease;
}

.market-card:hover .market-link {
    color: #fff;

    gap: 11px;
}

.market-card:hover .market-link i {
    transform: translateX(2px);
}

.market-card-status {
    color: #474747;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .14em;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.markets-slider-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 14px;
}

.markets-slider-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    color: #999;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.08);

    cursor: pointer;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.markets-slider-button:hover:not(:disabled) {
    color: #fff;

    background: #941b29;

    border-color: #a52231;
}

.markets-slider-button:disabled {
    opacity: .28;

    cursor: not-allowed;
}

.markets-slider-progress {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 125px;
}

.markets-slider-progress-current,
.markets-slider-progress-total {
    color: #666;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .1em;
}

.markets-slider-progress-current {
    color: #b01f2d;
}

.markets-slider-progress-line {
    position: relative;

    display: block;

    width: 60px;
    height: 1px;

    background: rgba(255,255,255,.09);

    overflow: hidden;
}

.markets-slider-progress-fill {
    display: block;

    width: 0;
    height: 100%;

    background: #a31d2c;

    transition: width 400ms ease;
}


/* =========================================================
   FOOTER
   ========================================================= */

.markets-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 18px;
    padding-top: 17px;

    border-top: 1px solid rgba(255,255,255,.05);
}

.markets-footer-copy {
    max-width: 720px;
}

.markets-footer-label {
    display: block;

    margin-bottom: 5px;

    color: #921b28;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .16em;
}

.markets-footer p {
    margin: 0;

    color: #575757;

    font-size: 10px;
    line-height: 1.55;
}

.markets-all-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    color: #bcbcbc;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color 180ms ease,
        gap 180ms ease;
}

.markets-all-link:hover {
    color: #fff;

    gap: 11px;
}

.markets-all-link i {
    color: #a21d2c;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .markets-slider-track {
        grid-auto-columns:
            calc((100% - 20px) / 3);
    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 850px) {

    .markets-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .markets-heading-meta {
        display: none;
    }

    .markets-slider-track {
        grid-template-rows:
            repeat(2, minmax(0, 1fr));

        grid-auto-columns:
            calc((100% - 10px) / 2);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .markets-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .markets-heading {
        margin-bottom: 20px;
    }

    .markets-heading .section-title {
        font-size: 31px;
    }

    .markets-heading .section-text {
        font-size: 12px;
        line-height: 1.6;
    }

    /*
     * On mobile the slider becomes a single horizontal row.
     * This is much easier to swipe naturally.
     */
    .markets-slider-viewport {
        overflow-x: auto;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        overscroll-behavior-x: contain;
    }

    .markets-slider-viewport::-webkit-scrollbar {
        display: none;
    }

    .markets-slider-track {
        display: flex;

        width: max-content;

        gap: 7px;

        transform: none !important;

        transition: none;
    }

    .market-slide {
        width: min(
            calc(88vw),
            330px
        );

        flex: 0 0 min(
            calc(88vw),
            330px
        );

        scroll-snap-align: start;
    }

    .market-card {
        min-height: 285px;

        padding: 18px;
    }

    .market-card h3 {
        font-size: 20px;
    }

    .market-card p {
        font-size: 11px;
    }

    .markets-slider-controls {
        justify-content: space-between;
    }

    .markets-slider-progress {
        flex: 1;

        justify-content: center;
    }

    .markets-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .markets-all-link {
        align-self: flex-start;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .markets-slider-track,
    .market-card,
    .market-arrow,
    .market-link {
        transition: none;
    }

    .market-card:hover {
        transform: none;
    }

}

        /* Feature cards */
        .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .feature-card{padding:24px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#11151a,#0b0e11)}
        .feature-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;background:var(--red-soft);color:var(--red-2);font-size:18px}
        .feature-card h3{margin:17px 0 7px;font:800 19px Manrope,sans-serif;color:#fff}
        .feature-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}

        /* Investment */
        .invest-section{background:#0a0c0f}
        .package-slider{display:grid;grid-template-columns:38px 1fr 38px;gap:10px;align-items:center;margin-top:28px}
        .slider-arrow{
            width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#11151a;color:#fff;
        }
        .slider-arrow:hover{border-color:var(--red-2);color:var(--red-2)}
        .package-viewport{overflow:hidden;min-width:0}
        .package-track{display:flex;gap:12px;transition:transform .35s ease;will-change:transform}
        .package-card{
            flex:0 0 calc((100% - 24px)/3);
            min-width:0;
            padding:22px;
            border:1px solid var(--line);
            border-radius:15px;
            background:linear-gradient(150deg,#151a1f,#0e1115);
            transition:.2s ease;
        }
        .package-card.active{border-color:rgba(181,43,64,.48);box-shadow:0 12px 35px rgba(0,0,0,.18)}
        .package-top{display:flex;justify-content:space-between;gap:10px}
        .package-code{color:#777f86;font-size:8px;letter-spacing:.12em}
        .package-card h3{margin:6px 0 8px;color:#fff;font:800 23px Manrope,sans-serif}
        .package-description{min-height:48px;color:#899198;font-size:10px;line-height:1.55}
        .package-return{margin:18px 0;padding:13px;border-radius:9px;background:var(--red-soft);border:1px solid rgba(143,29,44,.2)}
        .package-return small{display:block;color:#858d94;font-size:8px;text-transform:uppercase}
        .package-return strong{display:block;margin-top:3px;color:#fff;font-size:26px}
        .package-details{display:grid;grid-template-columns:1fr 1fr;gap:7px}
        .package-detail{padding:9px;border:1px solid var(--line);border-radius:7px}
        .package-detail small{display:block;color:#6f777e;font-size:8px}
        .package-detail strong{display:block;color:#dce0e3;margin-top:3px;font-size:10px}
        .package-select{width:100%;margin-top:13px;min-height:40px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:transparent;color:#fff;font-size:10px;font-weight:800}
        .package-select:hover{border-color:var(--red-2);background:var(--red-soft)}
        .package-dots{display:flex;justify-content:center;gap:5px;margin:13px 0 34px}
        .package-dot{width:6px;height:6px;border:0;border-radius:50%;background:#4e555b;padding:0}
        .package-dot.active{width:18px;border-radius:5px;background:var(--red-2)}

        /* Calculator */
        .calculator{
            display:grid;
            grid-template-columns:1fr 1fr;
            border:1px solid var(--line);
            border-radius:16px;
            overflow:hidden;
            background:#0f1317;
        }
        .calc-panel{padding:28px}
        .calc-panel + .calc-panel{border-left:1px solid var(--line);background:#12171b}
        .calc-head{display:flex;gap:12px;margin-bottom:25px}
        .calc-number{color:var(--red-2);font:800 18px Manrope,sans-serif}
        .calc-head h3{margin:0;color:#fff;font-size:16px;font-weight:800}
        .calc-head p{margin:4px 0 0;color:#717980;font-size:9px;line-height:1.5}
        .calc-field{margin-bottom:21px}
        .calc-field label{display:block;margin-bottom:8px;color:#cdd2d5;font-size:10px;font-weight:700}
        .calc-select{
            width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#0a0d10;color:#fff;font-size:11px;outline:none;
        }
        .amount-readout{display:flex;align-items:center;gap:7px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#0a0d10}
        .amount-readout span{color:var(--red-2);font-weight:800}
        .amount-readout strong{font-size:22px;color:#fff}
        input[type=range]{
            width:100%;height:5px;margin:16px 0 5px;accent-color:var(--red-2);cursor:pointer;
        }
        .range-labels{display:flex;justify-content:space-between;color:#646c73;font-size:8px}
        .selected-plan{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02)}
        .selected-plan i{color:var(--red-2)}
        .selected-plan small{display:block;color:#666f76;font-size:8px}
        .selected-plan strong{display:block;color:#fff;margin-top:2px;font-size:10px}
        .calc-note{display:flex;gap:8px;margin-top:16px;color:#626a71;font-size:8px;line-height:1.5}
        .calc-note i{color:var(--red-2)}
        .result-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
        .result-box{padding:13px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.018)}
        .result-box small{display:block;color:#6c747b;font-size:8px}
        .result-box strong{display:block;margin-top:5px;color:#fff;font-size:15px}
        .result-box.emphasis{grid-column:1/-1;background:var(--red-soft);border-color:rgba(143,29,44,.25)}
        .result-box.emphasis strong{font-size:24px}
        .result-footer{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:13px;border-top:1px solid var(--line)}
        .result-footer small{display:block;color:#687078;font-size:8px}
        .result-footer strong{display:block;margin-top:3px;color:#e0e3e5;font-size:10px}

        /* Performance / workflows */
        .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
        .dark-card{padding:28px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,#12171b,#0b0e11)}
        .dark-card h3{margin:12px 0 8px;color:#fff;font:800 25px Manrope,sans-serif}
        .dark-card p{margin:0;color:#8c949b;font-size:11px;line-height:1.7}
        .workflow-list{display:grid;gap:8px;margin-top:18px}
        .workflow-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.018)}
        .workflow-item i{color:var(--red-2)}
        .workflow-item span{font-size:10px;color:#cdd2d5}
        .steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:28px}
        .step{padding:16px 10px;text-align:center;border:1px solid var(--line);border-radius:10px;background:#0d1114}
        .step b{display:block;color:var(--red-2);font-size:12px}
        .step span{display:block;margin-top:7px;color:#aab0b5;font-size:9px}

        /* Testimonials */
        .testimonial-section{background:#f1f2f3;color:#11171b}
        .testimonial-section .section-title{color:#11171b}
        .testimonial-section .section-text{color:#697177}
        .testimonial-viewport{overflow:hidden}
        .testimonial-track{display:flex;gap:12px;transition:transform .45s ease}
        .testimonial-slide{flex:0 0 calc((100% - 24px)/3);min-width:0}
        .testimonial-card{height:100%;padding:23px;border:1px solid #dfe2e4;border-radius:14px;background:#fff}
        .testimonial-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
        .testimonial-person{display:flex;align-items:center;gap:10px}
        .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#eceeef;display:grid;place-items:center;color:#7d858b;font-size:11px;font-weight:800}
        .testimonial-name{font-size:11px;font-weight:800;color:#1b2024}
        .testimonial-role{display:block;margin-top:2px;color:#7b8389;font-size:8px}
        .verified{display:inline-flex;align-items:center;gap:4px;color:#7a8389;font-size:8px}
        .rating{margin:16px 0 9px;color:var(--red-2);font-size:11px;letter-spacing:2px}
        .testimonial-text{min-height:90px;margin:0;color:#555f66;font-size:11px;line-height:1.7}
        .testimonial-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}
        .testimonial-meta span{padding:5px 7px;background:#f1f2f3;border-radius:5px;color:#737b82;font-size:8px}
        .testimonial-controls{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:18px}
        .testimonial-control{width:34px;height:34px;border:1px solid #d7dade;border-radius:7px;background:#fff;color:#333}
        .testimonial-dots{display:flex;gap:5px}
        .testimonial-dot{width:6px;height:6px;border:0;border-radius:50%;background:#c4c8cc;padding:0}
        .testimonial-dot.active{width:18px;border-radius:5px;background:var(--red-2)}

        /* Security / academy */
        .security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
        .security-card{padding:21px;border:1px solid var(--line);border-radius:13px;background:#0d1114}
        .security-card i{font-size:21px;color:var(--red-2)}
        .security-card h3{margin:14px 0 6px;color:#fff;font-size:13px;font-weight:800}
        .security-card p{margin:0;color:#737b82;font-size:9px;line-height:1.6}
        .academy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
        .academy-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:#101419}
        .academy-card i{color:var(--red-2);font-size:19px}
        .academy-card h3{margin:13px 0 5px;color:#fff;font-size:12px;font-weight:800}
        .academy-card p{margin:0;color:#737b82;font-size:9px;line-height:1.55}
/* =========================================================
   HOW IT WORKS
   ========================================================= */

.how-it-works-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(128, 18, 30, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0c0c0c 50%,
            #090909 100%
        );

    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.how-it-works-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.2;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 90%
    );
}

.how-it-works-section .container-xl {
    position: relative;
    z-index: 1;
}


/* =========================================================
   HEADER
   ========================================================= */

.how-it-works-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 35px;
}

.how-it-works-heading-main {
    max-width: 760px;
}

.how-it-works-heading .kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 9px;

    color: #b21d2c;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.how-it-works-heading .kicker::before {
    content: "";

    width: 23px;
    height: 1px;

    background: #a51c2a;
}

.how-it-works-heading .section-title {
    margin: 0;

    color: #f5f5f5;

    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.02;

    letter-spacing: -0.045em;
}

.how-it-works-heading .section-title span {
    display: block;

    color: #666;
}

.how-it-works-heading .section-text {
    max-width: 680px;

    margin: 13px 0 0;

    color: #7d7d7d;

    font-size: 14px;
    line-height: 1.65;
}

.how-it-works-heading-side {
    display: flex;
    align-items: center;
    gap: 10px;

    padding-bottom: 5px;

    color: #4e4e4e;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;

    white-space: nowrap;
}

.how-it-works-line {
    width: 32px;
    height: 1px;

    background: #821923;
}


/* =========================================================
   PROCESS
   ========================================================= */

.how-it-works-process {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}


/* =========================================================
   STEP CARD
   ========================================================= */

.how-step {
    position: relative;

    min-width: 0;

    min-height: 365px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );

    border: 1px solid rgba(255,255,255,0.065);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease;

    overflow: hidden;
}

.how-step:hover {
    transform: translateY(-3px);

    border-color: rgba(151,27,40,0.42);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.018)
        );
}

.how-step::after {
    content: "";

    position: absolute;

    right: -50px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: rgba(134,18,30,0.045);

    pointer-events: none;
}


/* =========================================================
   STEP NUMBER
   ========================================================= */

.how-step-number {
    position: absolute;

    top: 17px;
    right: 18px;

    color: rgba(255,255,255,0.075);

    font-size: 35px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.05em;
}

.how-step:hover .how-step-number {
    color: rgba(166,29,43,0.16);
}


/* =========================================================
   CONNECTOR
   ========================================================= */

.how-step-connector {
    display: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.how-step-content {
    position: relative;
    z-index: 2;
}

.how-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    margin-bottom: 20px;

    color: #ad1f2d;

    background:
        linear-gradient(
            135deg,
            rgba(153,27,41,0.17),
            rgba(153,27,41,0.035)
        );

    border: 1px solid rgba(169,30,44,0.20);
}

.how-step-icon svg {
    width: 21px;
    height: 21px;
}

.how-step-label {
    display: block;

    margin-bottom: 8px;

    color: #a21c2a;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.how-step h3 {
    margin: 0 0 10px;

    color: #ededed;

    font-size: 20px;
    font-weight: 650;

    line-height: 1.1;

    letter-spacing: -0.025em;
}

.how-step p {
    margin: 0;

    color: #707070;

    font-size: 12px;
    line-height: 1.65;
}


/* =========================================================
   LIST
   ========================================================= */

.how-step-list {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin: 20px 0 0;
    padding: 15px 0 0;

    list-style: none;

    border-top: 1px solid rgba(255,255,255,0.055);
}

.how-step-list li {
    position: relative;

    padding-left: 14px;

    color: #5f5f5f;

    font-size: 10px;
    line-height: 1.4;
}

.how-step-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 6px;

    width: 4px;
    height: 4px;

    background: #8e1926;
}


/* =========================================================
   CHOICE CARD
   ========================================================= */

.how-step-choice {
    grid-column: span 2;
}

.how-step-choice .how-step-content {
    max-width: 680px;
}

.how-choice-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 5px;

    margin-top: 20px;
}

.how-choice {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 11px;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.045);
}

.how-choice strong {
    color: #d2d2d2;

    font-size: 11px;
    font-weight: 700;
}

.how-choice span {
    margin-top: 4px;

    color: #555;

    font-size: 8px;
    line-height: 1.35;
}


/* =========================================================
   FINAL STEP
   ========================================================= */

.how-step-final {
    grid-column: span 2;
}

.how-step-final .how-step-icon {
    color: #d2d2d2;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.07),
            rgba(255,255,255,0.015)
        );

    border-color: rgba(255,255,255,0.09);
}


/* =========================================================
   FOOTER CTA
   ========================================================= */

.how-it-works-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin-top: 10px;
    padding: 23px 25px;

    background:
        linear-gradient(
            100deg,
            rgba(119,18,29,0.17),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(146,27,40,0.20);
}

.how-it-works-footer-copy {
    min-width: 0;
}

.how-footer-label {
    display: block;

    margin-bottom: 5px;

    color: #9e1c2a;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.17em;
}

.how-it-works-footer h3 {
    margin: 0;

    color: #eee;

    font-size: 20px;
    font-weight: 650;

    letter-spacing: -0.025em;
}

.how-it-works-footer p {
    margin: 6px 0 0;

    color: #686868;

    font-size: 11px;
    line-height: 1.5;
}

.how-it-works-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.how-primary-button,
.how-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 39px;

    padding: 0 16px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.04em;

    text-decoration: none;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.how-primary-button {
    gap: 12px;

    color: #fff;

    background: #941b29;

    border: 1px solid #a82231;
}

.how-primary-button:hover {
    color: #fff;

    background: #b02132;

    border-color: #bd293a;
}

.how-primary-button span {
    font-size: 15px;
}

.how-secondary-button {
    color: #aaa;

    background: rgba(255,255,255,0.025);

    border: 1px solid rgba(255,255,255,0.09);
}

.how-secondary-button:hover {
    color: #fff;

    background: rgba(255,255,255,0.06);

    border-color: rgba(255,255,255,0.16);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .how-it-works-process {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .how-step-choice,
    .how-step-final {
        grid-column: span 1;
    }

    .how-choice-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .how-it-works-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .how-it-works-heading {
        display: block;

        margin-bottom: 23px;
    }

    .how-it-works-heading .section-title {
        font-size: 32px;
    }

    .how-it-works-heading .section-text {
        font-size: 13px;
    }

    .how-it-works-heading-side {
        display: none;
    }

    .how-it-works-process {
        grid-template-columns: 1fr;

        gap: 7px;
    }

    .how-step,
    .how-step-choice,
    .how-step-final {
        grid-column: auto;

        min-height: auto;

        padding: 19px;
    }

    .how-step-content {
        padding-right: 20px;
    }

    .how-step-number {
        font-size: 28px;
    }

    .how-step-icon {
        width: 39px;
        height: 39px;

        margin-bottom: 16px;
    }

    .how-step h3 {
        font-size: 19px;
    }

    .how-step p {
        font-size: 12px;
    }

    .how-step-list {
        margin-top: 16px;
        padding-top: 13px;
    }

    .how-choice-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        margin-top: 16px;
    }

    .how-it-works-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;

        padding: 20px;
    }

    .how-it-works-actions {
        width: 100%;
    }

    .how-primary-button,
    .how-secondary-button {
        flex: 1;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .how-it-works-heading .section-title {
        font-size: 29px;
    }

    .how-choice-grid {
        grid-template-columns: 1fr;
    }

    .how-it-works-actions {
        flex-direction: column;
    }

    .how-primary-button,
    .how-secondary-button {
        width: 100%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .how-step,
    .how-primary-button,
    .how-secondary-button {
        transition: none;
    }

    .how-step:hover {
        transform: none;
    }

}
        /* CTA / footer */
        .cta{
            padding:70px 0;
            text-align:center;
            background:
                radial-gradient(circle at 50% 0,rgba(143,29,44,.19),transparent 48%),
                #080a0d;
            border-top:1px solid var(--line);
        }
        .cta h2{margin:0 auto 10px;color:#fff;font:800 clamp(31px,4vw,50px) Manrope,sans-serif;letter-spacing:-.045em}
        .cta p{max-width:600px;margin:0 auto 20px;color:#818990;font-size:12px;line-height:1.7}
        .footer{padding:50px 0 25px;background:#040506;border-top:1px solid var(--line)}
        .footer-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:28px}
        .footer-brand{color:#fff;font:800 20px Manrope,sans-serif}
        .footer-desc{max-width:310px;margin:10px 0 0;color:#656d74;font-size:10px;line-height:1.7}
        .footer-title{margin-bottom:12px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
        .footer-links{display:grid;gap:8px}
        .footer-links a{color:#777f86;font-size:10px}
        .footer-links a:hover{color:#fff}
        .footer-risk{display:flex;gap:10px;margin:28px 0 0;padding:15px;border:1px solid var(--line);border-radius:9px;color:#646d74;font-size:9px;line-height:1.6}
        .footer-risk i{color:var(--red-2);font-size:15px}
        .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:#555e65;font-size:9px}
        .footer-languages{display:flex;gap:5px}
        .footer-languages a{padding:4px 6px;color:#666f76}
        .footer-languages a.active{color:#fff;background:var(--red-soft);border-radius:4px}

        .back-top{
            position:fixed;right:18px;bottom:18px;z-index:800;width:38px;height:38px;border:1px solid var(--line);
            border-radius:8px;background:#12161a;color:#fff;display:none;
        }
        .back-top.show{display:grid;place-items:center}
/* =========================================================
   PLATFORM SECTION
   ========================================================= */

.platform-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(125, 18, 28, 0.14),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #0d0d0d 55%,
            #090909 100%
        );
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

/* subtle architectural grid */
.platform-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.24;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 85%
    );
}

.platform-section .container-xl {
    position: relative;
    z-index: 1;
}


/* =========================================================
   HEADING
   ========================================================= */

.platform-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 28px;
}

.platform-heading-content {
    max-width: 760px;
}

.platform-heading .kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 8px;

    color: #b21e2b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.platform-heading .kicker::before {
    content: "";
    width: 22px;
    height: 1px;

    background: #b21e2b;
}

.platform-heading .section-title {
    margin: 0;
    color: #ffffff;

    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 700;
}

.platform-heading .section-text {
    max-width: 680px;
    margin: 11px 0 0;

    color: #858585;
    font-size: 14px;
    line-height: 1.65;
}

.platform-heading-meta {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;

    color: #555;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

.meta-line {
    width: 30px;
    height: 1px;
    background: #7f1822;
}


/* =========================================================
   GRID
   ========================================================= */

.platform-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-rows: auto auto;

    gap: 10px;
}


/* =========================================================
   CARD
   ========================================================= */

.platform-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 285px;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    border: 1px solid rgba(255,255,255,0.075);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;

    overflow: hidden;
}

.platform-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 0;
    height: 2px;

    background: #9d1b27;

    transition: width 280ms ease;
}

.platform-card::after {
    content: "";

    position: absolute;

    right: -50px;
    bottom: -60px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background: rgba(137, 19, 31, 0.055);

    filter: blur(2px);

    pointer-events: none;
}

.platform-card:hover {
    transform: translateY(-3px);

    border-color: rgba(167, 29, 42, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,0.28);
}

.platform-card:hover::before {
    width: 100%;
}


/* =========================================================
   FEATURED CARD
   ========================================================= */

.platform-card-featured {
    grid-row: span 2;

    min-height: 580px;

    padding: 27px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(132, 20, 31, 0.18),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #171111 0%,
            #100d0e 55%,
            #0d0d0d 100%
        );

    border-color: rgba(157, 28, 42, 0.28);
}

.platform-card-featured::before {
    width: 42%;
}

.platform-card-featured:hover::before {
    width: 100%;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.platform-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    position: relative;
    z-index: 2;
}

.platform-index {
    color: #737373;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.platform-card-featured .platform-index {
    color: #b32634;
}

.platform-number {
    color: #3c3c3c;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   STATUS
   ========================================================= */

.platform-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 5px 8px;

    color: #888;
    background: rgba(255,255,255,0.035);

    border: 1px solid rgba(255,255,255,0.06);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.status-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #a21d2a;

    box-shadow:
        0 0 0 3px rgba(162,29,42,0.12);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.platform-card-content {
    position: relative;
    z-index: 2;

    margin-top: 25px;
}

.platform-card-featured .platform-card-content {
    margin-top: auto;
    margin-bottom: auto;
}


/* =========================================================
   ICON
   ========================================================= */

.platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    margin-bottom: 20px;

    color: #c32838;

    background:
        linear-gradient(
            135deg,
            rgba(156,26,40,0.20),
            rgba(156,26,40,0.055)
        );

    border: 1px solid rgba(174,30,45,0.22);
}

.platform-icon svg {
    width: 21px;
    height: 21px;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.platform-title {
    margin: 0 0 9px;

    color: #f4f4f4;

    font-size: clamp(22px, 2.1vw, 31px);
    font-weight: 650;

    line-height: 1.05;
    letter-spacing: -0.035em;
}

.platform-card:not(.platform-card-featured) .platform-title {
    font-size: 22px;
}

.platform-description {
    max-width: 500px;

    margin: 0;

    color: #777;

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.platform-card-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-top: 30px;
    padding-top: 16px;

    border-top: 1px solid rgba(255,255,255,0.06);
}

.platform-card-note {
    color: #4e4e4e;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.4;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    flex-shrink: 0;

    color: #d5d5d5;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;

    text-decoration: none;

    transition:
        color 180ms ease,
        gap 180ms ease;
}

.platform-link:hover {
    color: #c12635;
    gap: 13px;
}

.platform-arrow {
    color: #a91e2d;
    font-size: 16px;
    line-height: 1;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .platform-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .platform-heading-meta {
        display: none;
    }

    .platform-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: auto;
    }

    .platform-card-featured {
        grid-row: auto;
        grid-column: 1 / -1;

        min-height: 360px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .platform-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .platform-heading {
        margin-bottom: 20px;
    }

    .platform-heading .section-title {
        font-size: 31px;
    }

    .platform-heading .section-text {
        font-size: 13px;
        line-height: 1.6;
    }

    .platform-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .platform-card,
    .platform-card-featured {
        grid-column: auto;

        min-height: 265px;

        padding: 19px;
    }

    .platform-card-featured {
        min-height: 330px;
    }

    .platform-card-content {
        margin-top: 20px;
    }

    .platform-card-featured .platform-card-content {
        margin-top: auto;
        margin-bottom: auto;
    }

    .platform-icon {
        width: 39px;
        height: 39px;

        margin-bottom: 16px;
    }

    .platform-title,
    .platform-card:not(.platform-card-featured) .platform-title {
        font-size: 21px;
    }

    .platform-description {
        font-size: 12px;
        line-height: 1.6;
    }

    .platform-card-bottom {
        margin-top: 22px;
        padding-top: 13px;
    }

    .platform-card-note {
        max-width: 125px;
    }

    .platform-link {
        font-size: 10px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .platform-card,
    .platform-card::before,
    .platform-link {
        transition: none;
    }

    .platform-card:hover {
        transform: none;
    }

}
        @media (max-width:1180px){
            .main-nav{gap:13px}
            .main-nav a{font-size:10px}
            .hero-grid{grid-template-columns:1fr 1fr}
            .markets-grid{grid-template-columns:repeat(3,1fr)}
        }
        @media (max-width:980px){
            .main-nav,.nav-actions .btn-ghost{display:none}
            .mobile-toggle{display:block}
            .mobile-drawer{
                position:absolute;left:16px;right:16px;top:112px;padding:10px;
                background:#0e1216;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.45)
            }
            .mobile-drawer.open{display:block}
            .mobile-drawer a{display:block;padding:10px 11px;color:#d2d6d9;font-size:11px;border-radius:7px}
            .mobile-drawer a:hover{background:var(--red-soft);color:#fff}
            .mobile-drawer .mobile-cta{margin-top:7px}
            .hero-grid,.split-grid{grid-template-columns:1fr}
            .hero{padding-top:125px}
            .market-terminal{min-height:410px}
            .feature-grid{grid-template-columns:1fr 1fr}
            .security-grid{grid-template-columns:1fr 1fr}
            .academy-grid{grid-template-columns:1fr 1fr}
            .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
            .footer-grid > div:last-child{grid-column:2}
        }
        @media (max-width:760px){
            .container-tcm{width:min(var(--container),calc(100% - 22px))}
            .topbar{display:none}
            .nav-main{min-height:64px}
            .mobile-drawer{top:64px;left:10px;right:10px}
            .hero{min-height:auto;padding:98px 0 40px}
            .hero-title{font-size:clamp(42px,12vw,60px)}
            .hero-copy{font-size:13px}
            .hero-actions .btn-red,.hero-actions .btn-ghost{flex:1}
            .hero-trust{gap:9px 14px}
            .market-terminal{min-height:0;padding:14px}
            .terminal-grid{grid-template-columns:1fr 1fr}
            .stats-grid{grid-template-columns:1fr 1fr}
            .stat{padding:17px 13px;border-bottom:1px solid var(--line)}
            .stat:nth-child(2){border-right:0}
            .stat:nth-child(3),.stat:nth-child(4){border-bottom:0}
            .markets-grid,.feature-grid,.security-grid,.academy-grid{grid-template-columns:1fr}
            .section{padding:55px 0}
            .section-tight{padding:45px 0}
            .package-slider{grid-template-columns:34px 1fr 34px;gap:6px}
            .slider-arrow{width:34px;height:34px}
            .package-card{flex-basis:100%}
            .calculator{grid-template-columns:1fr}
            .calc-panel + .calc-panel{border-left:0;border-top:1px solid var(--line)}
            .calc-panel{padding:21px 17px}
            .result-box.emphasis{grid-column:auto}
            .steps{grid-template-columns:1fr 1fr 1fr}
            .testimonial-slide{flex-basis:100%}
            .footer-grid{grid-template-columns:1fr 1fr}
            .footer-grid > div:last-child{grid-column:auto}
            .footer-bottom{flex-direction:column;align-items:flex-start}
        }
        @media (prefers-reduced-motion:reduce){
            html{scroll-behavior:auto}
            *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
        }