:root {
    --ba-black: #01050b;
    --ba-bg: #020914;
    --ba-bg-soft: #061222;
    --ba-panel: #071526;
    --ba-panel-2: #0a1b31;
    --ba-line: #173756;

    --ba-blue: #168cff;
    --ba-blue-2: #35b9ff;
    --ba-blue-dark: #063e84;

    --ba-gold: #f3ad16;
    --ba-gold-2: #ffd863;

    --ba-white: #f7fbff;
    --ba-text: #dbe9f7;
    --ba-muted: #84a3c2;

    --max-width: 1480px;

    --shadow-blue:
        0 0 18px rgba(22,140,255,.22),
        0 0 50px rgba(22,140,255,.08);

    --shadow-gold:
        0 0 14px rgba(243,173,22,.42),
        0 0 42px rgba(243,173,22,.15);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    background:
        radial-gradient(circle at 30% 0%, rgba(15,83,170,.12), transparent 35%),
        #010711;
    color: var(--ba-text);
    font-family:
        "Segoe UI",
        Inter,
        Arial,
        Helvetica,
        sans-serif;
    line-height: 1.45;
}


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


button,
input,
textarea,
select {
    font: inherit;
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(1,7,16,.94);
    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(65,143,218,.24);
}


.nav-shell {
    width: min(var(--max-width), calc(100% - 48px));
    height: 88px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 36px;
}


.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}


.brand-mark {
    width: 52px;
    height: 52px;

    position: relative;

    border-radius: 12px;

    background:
        radial-gradient(circle at 40% 35%, #31c0ff 0%, #075ce7 30%, #001332 70%);

    border: 2px solid #e9ad27;

    box-shadow:
        inset 0 0 15px #001834,
        0 0 12px rgba(22,140,255,.35);
}


.brand-orbit {
    position: absolute;
    width: 36px;
    height: 36px;

    border: 3px solid #ffc936;
    border-radius: 50%;

    top: 6px;
    left: 6px;

    transform: rotate(-16deg);
}


.brand-arrow {
    position: absolute;

    width: 40px;
    height: 7px;

    background: linear-gradient(90deg,#d68b00,#fff4a1,#f3a911);

    left: 5px;
    top: 24px;

    transform: rotate(-27deg);

    border-radius: 100% 10px 10px 100%;
}


.brand-arrow::after {
    content: "";

    position: absolute;

    right: -6px;
    top: -7px;

    border-left: 13px solid #ffc329;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}


.brand-text {
    color: white;

    font-weight: 800;
    font-size: 24px;

    letter-spacing: -.7px;
}


.brand-text sup {
    color: var(--ba-gold);
    font-size: 9px;
}


.brand-blue {
    color: #278cff;
}


.brand-gold {
    color: #ffc536;
}


.main-nav {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 10px;
}


.main-nav > a,
.nav-dropdown > button {
    height: 100%;

    display: flex;
    align-items: center;

    padding: 0 17px;

    color: #eaf5ff;
    background: transparent;

    border: 0;

    cursor: pointer;

    font-weight: 600;
    font-size: 15px;

    position: relative;
}


.main-nav > a::after,
.nav-dropdown > button::after {
    content: "";

    position: absolute;

    left: 20%;
    right: 20%;
    bottom: 0;

    height: 3px;

    background: var(--ba-blue);

    opacity: 0;

    box-shadow: 0 0 12px var(--ba-blue);
}


.main-nav > a:hover::after,
.main-nav > a.active::after,
.nav-dropdown:hover > button::after {
    opacity: 1;
}


.main-nav > a:hover,
.nav-dropdown > button:hover {
    color: white;
}


.nav-dropdown {
    height: 100%;
    position: relative;
}


.dropdown-menu {
    position: absolute;

    top: 76px;
    left: 0;

    width: 225px;

    background: #06111f;

    border: 1px solid #17436f;
    border-radius: 8px;

    box-shadow: 0 20px 50px rgba(0,0,0,.45);

    padding: 8px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition: .18s ease;
}


.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.dropdown-menu a {
    display: block;

    padding: 12px 13px;

    border-radius: 5px;

    color: #cfe4f7;
}


.dropdown-menu a:hover {
    background: #0d2b4c;
    color: white;
}


.mobile-menu-button {
    display: none;

    background: #0a1c31;
    color: white;

    border: 1px solid #1d568d;
    border-radius: 6px;

    padding: 8px 12px;

    cursor: pointer;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero {
    position: relative;
    overflow: hidden;

    min-height: 660px;

    border-bottom: 1px solid rgba(52,151,238,.25);
}


.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(1,7,16,.99) 0%,
            rgba(1,7,16,.90) 30%,
            rgba(1,7,16,.36) 62%,
            rgba(1,7,16,.84) 100%);
}


.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


.hero-glow-one {
    width: 620px;
    height: 420px;

    background: rgba(0,98,255,.19);

    right: 20%;
    top: 8%;
}


.hero-glow-two {
    width: 420px;
    height: 260px;

    background: rgba(240,171,20,.07);

    right: 5%;
    bottom: 3%;
}


.hero-inner {
    width: min(var(--max-width), calc(100% - 48px));
    min-height: 660px;

    margin: auto;

    display: grid;
    grid-template-columns: .9fr 1.25fr;
    align-items: center;

    gap: 40px;

    position: relative;
    z-index: 2;
}


.hero-copy {
    padding: 70px 0;
}


.eyebrow,
.section-kicker {
    color: #b7d6f0;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3.2px;
}


.hero h1 {
    margin: 16px 0 20px;

    color: white;

    font-size: clamp(54px,6vw,92px);
    line-height: .94;

    letter-spacing: -4px;
}


.hero h1 span {
    display: block;

    color: #d8ebff;

    text-shadow: 0 0 30px rgba(43,155,255,.15);
}


.hero-lead {
    max-width: 680px;

    color: #c1d7e9;

    font-size: 19px;
}


.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;
}


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 50px;

    padding: 0 24px;

    border-radius: 999px;

    font-weight: 800;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


.button:hover {
    transform: translateY(-2px);
}


.button-gold {
    color: #0c0a03;

    background:
        linear-gradient(180deg,#ffe879,#f6b91f 55%,#d98a00);

    border: 1px solid #fff0a7;

    box-shadow: var(--shadow-gold);
}


.button-gold:hover {
    box-shadow:
        0 0 20px rgba(255,198,49,.58),
        0 0 55px rgba(255,175,0,.18);
}


.button-outline {
    color: white;

    border: 1px solid #9ac3e4;

    background: rgba(5,18,34,.55);
}


.button-outline:hover {
    background: rgba(17,61,99,.65);

    box-shadow: var(--shadow-blue);
}


.button.compact {
    min-height: 42px;

    padding: 0 19px;

    font-size: 14px;
}


.hero-proof {
    margin-top: 32px;

    color: #87a7c2;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


/* Hero fake broadcast room.
   This is intentionally CSS-built so the page works before
   we drop the real Traffic imagery into the assets folder. */

.hero-visual {
    height: 590px;

    position: relative;
}


.control-room {
    position: absolute;

    inset: 35px 0 0 0;

    overflow: hidden;

    border-radius: 13px;

    border: 1px solid rgba(33,132,222,.25);

    background:
        linear-gradient(180deg,rgba(2,8,18,.12),rgba(0,3,9,.75)),
        radial-gradient(circle at 30% 20%,rgba(27,114,238,.18),transparent 30%),
        linear-gradient(120deg,#061226,#02070e 60%,#06101d);

    box-shadow:
        inset 0 0 90px rgba(0,0,0,.8),
        0 40px 100px rgba(0,0,0,.55);
}


.control-room::before {
    content: "";

    position: absolute;

    left: 6%;
    right: 8%;
    bottom: 0;

    height: 42%;

    background:
        linear-gradient(170deg,
            transparent 0 22%,
            rgba(7,21,38,.92) 23% 43%,
            rgba(3,10,19,.98) 44%);

    clip-path: polygon(5% 22%,95% 0,100% 100%,0 100%);

    border-top: 1px solid rgba(40,132,215,.24);
}


.control-top-light {
    position: absolute;

    width: 310px;
    height: 5px;

    top: 34px;
    left: 50px;

    background: linear-gradient(90deg,#c8d9e5,#ffe7c8,#5c7892);

    transform: rotate(-4deg);

    box-shadow: 0 0 18px rgba(247,211,164,.55);
}


.hero-display {
    position: absolute;

    right: 9%;
    top: 55px;

    width: 330px;
    height: 215px;

    border: 1px solid #19538d;

    background:
        radial-gradient(circle at 30% 45%,#0c3472,#031127 60%);

    box-shadow:
        inset 0 0 35px #000,
        0 0 30px rgba(0,105,255,.18);
}


.hero-display-main {
    padding: 30px 25px 20px 140px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    color: #5eb7ff;

    font-size: 26px;
    line-height: 1.05;
}


.hero-logo-orb {
    position: absolute;

    left: 34px;
    top: 55px;

    width: 88px;
    height: 88px;

    border-radius: 21px;

    border: 3px solid #f2ab1b;

    background:
        radial-gradient(circle at 35% 35%,#37c6ff,#0567eb 35%,#001335 72%);
}


.hero-logo-orb::before {
    content: "";

    position: absolute;

    width: 67px;
    height: 67px;

    left: 8px;
    top: 7px;

    border: 4px solid #ffc32c;
    border-radius: 50%;
}


.hero-logo-orb::after {
    content: "";

    position: absolute;

    width: 76px;
    height: 9px;

    left: 7px;
    top: 40px;

    background: #ffc32c;

    transform: rotate(-30deg);

    clip-path: polygon(0 30%,80% 0,100% 50%,80% 100%,0 70%);
}


.hero-onair {
    position: absolute;

    left: 48%;
    top: 275px;

    padding: 8px 16px;

    color: white;

    font-size: 22px;
    font-weight: 900;

    background: #a50913;

    border: 2px solid #ff4d58;
    border-radius: 3px;

    box-shadow:
        0 0 9px #ff2633,
        0 0 24px rgba(255,30,42,.55);
}


.console {
    position: absolute;

    bottom: 55px;

    width: 225px;
    height: 150px;

    background:
        linear-gradient(180deg,#0b1c2e,#02060b);

    border: 1px solid #174d7c;

    transform: perspective(650px) rotateX(9deg);

    box-shadow:
        0 0 25px rgba(0,0,0,.7);
}


.console span {
    display: inline-block;

    width: 26%;
    height: 72px;

    margin: 14px 2%;

    border: 1px solid #1264ae;

    background:
        linear-gradient(180deg,#103e6c,#041326);
}


.console-one {
    left: 18%;
}


.console-two {
    left: 45%;
}


.console-three {
    right: -5%;
}


.hero-side-words {
    position: absolute;

    right: 18px;
    top: 315px;

    display: flex;
    flex-direction: column;

    gap: 11px;

    color: #90bedf;

    font-size: 10px;
    letter-spacing: 2.8px;
}


/* ==========================================================
   SECTIONS
   ========================================================== */

.section {
    width: min(var(--max-width), calc(100% - 48px));

    margin: auto;

    padding: 80px 0;
}


.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 30px;

    margin-bottom: 28px;
}


.section-heading h2,
.workflow-copy h2 {
    margin: 7px 0 0;

    color: white;

    font-size: clamp(32px,3vw,48px);

    letter-spacing: -1.8px;
}


.text-link {
    color: var(--ba-blue-2);
    font-weight: 700;
}


/* ==========================================================
   PRODUCTS
   ========================================================== */

.products-section {
    padding-top: 62px;
}


.product-grid {
    display: grid;
    grid-template-columns: 1.12fr 1fr 1fr;

    gap: 18px;
}


.product-card {
    min-height: 350px;

    position: relative;

    overflow: hidden;

    padding: 28px;

    border-radius: 12px;

    border: 1px solid #17436c;

    background:
        linear-gradient(145deg,#091a30,#04101e);

    box-shadow: 0 20px 50px rgba(0,0,0,.24);

    transition:
        transform .17s ease,
        border-color .17s ease,
        box-shadow .17s ease;
}


.product-card:hover {
    transform: translateY(-4px);

    border-color: #247ccd;

    box-shadow:
        0 22px 55px rgba(0,0,0,.36),
        var(--shadow-blue);
}


.traffic-card {
    border-color: #dca018;

    background:
        radial-gradient(circle at 90% 10%,rgba(255,183,20,.14),transparent 35%),
        linear-gradient(145deg,#121407,#06111e 62%);

    box-shadow:
        var(--shadow-gold),
        0 20px 50px rgba(0,0,0,.36);
}


.product-status {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 23px;

    color: #a9bfd3;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.9px;
}


.product-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #26dc70;

    box-shadow: 0 0 10px #26dc70;
}


.product-status.coming span {
    background: #f5b41d;

    box-shadow: 0 0 10px #f5b41d;
}


.traffic-identity {
    display: flex;
    align-items: center;

    gap: 15px;
}


.mini-logo {
    width: 65px;
    height: 65px;

    border-radius: 13px;

    border: 2px solid #f0aa16;

    background:
        radial-gradient(circle at 35% 35%,#37c9ff,#046cec 38%,#001333 72%);

    position: relative;
}


.mini-logo::before {
    content: "";

    position: absolute;

    width: 46px;
    height: 46px;

    left: 7px;
    top: 7px;

    border: 3px solid #ffc329;
    border-radius: 50%;
}


.mini-logo::after {
    content: "";

    position: absolute;

    width: 55px;
    height: 7px;

    left: 4px;
    top: 29px;

    background: #ffc329;

    transform: rotate(-29deg);

    clip-path: polygon(0 30%,80% 0,100% 50%,80% 100%,0 70%);
}


.traffic-name {
    color: #278aff;

    font-size: 27px;
    font-weight: 800;
}


.traffic-name strong {
    color: #ffc22c;
}


.traffic-name sup {
    color: #ffc22c;
    font-size: 8px;
}


.traffic-subname {
    text-align: right;

    color: #ffc22c;

    font-size: 22px;
    font-weight: 800;
}


.product-card p {
    color: #b9d0e3;

    font-size: 15px;
}


.product-card ul {
    margin: 22px 0 25px;

    padding-left: 19px;

    color: #8fb0ca;
}


.product-card li {
    margin: 6px 0;
}


.future-product-icon {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    border: 1px solid #4182bb;

    background:
        linear-gradient(145deg,#102a48,#071426);

    color: #45aeff;

    font-size: 24px;
    font-weight: 900;

    box-shadow: var(--shadow-blue);
}


.product-card h3 {
    margin: 16px 0 8px;

    color: #edf7ff;

    font-size: 28px;
}


.product-card h3 strong {
    color: #48b2ff;
}


.future-lines {
    position: absolute;

    right: -45px;
    bottom: 25px;

    width: 250px;

    opacity: .22;
}


.future-lines span {
    display: block;

    height: 1px;

    margin: 20px;

    background: linear-gradient(90deg,transparent,#198aff,transparent);

    transform: rotate(-15deg);
}


.future-card {
    background:
        radial-gradient(circle at 90% 30%,rgba(110,65,255,.16),transparent 38%),
        linear-gradient(145deg,#0b1730,#07101d);
}


.future-symbol {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border: 1px solid #6854d0;
    border-radius: 16px;

    background: rgba(72,47,147,.2);

    color: #a88cff;

    font-size: 38px;
    font-weight: 200;
}


/* ==========================================================
   WORKFLOW
   ========================================================== */

.workflow-section {
    border-top: 1px solid #113553;
    border-bottom: 1px solid #113553;

    display: grid;
    grid-template-columns: .8fr 1.15fr .8fr;

    gap: 42px;

    align-items: center;
}


.workflow-copy p {
    color: #9bb8d0;
}


.workflow-steps {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;
}


.workflow-step {
    width: 150px;

    text-align: center;
}


.workflow-icon {
    width: 62px;
    height: 62px;

    margin: auto;

    display: grid;
    place-items: center;

    position: relative;

    color: white;

    font-size: 24px;

    border: 1px solid var(--ba-blue);
    border-radius: 50%;

    background: #062449;

    box-shadow: var(--shadow-blue);
}


.workflow-icon span {
    position: absolute;

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    right: -4px;
    bottom: -4px;

    border-radius: 50%;

    background: #071525;

    border: 1px solid #158aff;

    color: white;

    font-size: 11px;
}


.workflow-step h3 {
    margin: 15px 0 5px;

    color: white;
}


.workflow-step p {
    margin: 0;

    color: #8ca9c1;

    font-size: 13px;
}


.workflow-arrow {
    color: #238fee;
    font-size: 27px;
}


.video-card {
    border: 1px solid #236ba8;
    border-radius: 9px;

    overflow: hidden;

    background: #04101d;

    transition: .2s ease;
}


.video-card:hover {
    border-color: #30a9ff;

    box-shadow: var(--shadow-blue);

    transform: translateY(-3px);
}


.video-preview {
    height: 185px;

    position: relative;

    padding: 14px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 5px;

    background: #020812;
}


.video-screen {
    border: 1px solid #0e416d;

    background:
        linear-gradient(145deg,#163555,#07101c);
}


.screen-b {
    background: linear-gradient(145deg,#1b2740,#102747);
}


.screen-c {
    background: linear-gradient(145deg,#123c54,#07121e);
}


.screen-d {
    background: linear-gradient(145deg,#26344b,#0c1524);
}


.play-button {
    position: absolute;

    width: 62px;
    height: 62px;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #0a78ef;

    border: 2px solid #79c8ff;

    box-shadow:
        0 0 20px #086dcc,
        0 0 50px rgba(0,130,255,.35);

    color: white;

    font-size: 23px;
}


.video-label {
    padding: 15px 18px;
}


.video-label strong {
    display: block;

    color: white;

    font-size: 20px;
}


.video-label span {
    color: var(--ba-blue-2);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


/* ==========================================================
   QUICK LINKS
   ========================================================== */

.quick-links {
    padding-top: 35px;
    padding-bottom: 55px;

    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 1px;
}


.quick-card {
    min-height: 115px;

    padding: 20px;

    display: grid;
    grid-template-columns: 56px 1fr auto;

    gap: 17px;

    align-items: center;

    border: 1px solid #103653;

    background: #04101c;

    transition: .18s ease;
}


.quick-card:hover {
    background: #071a2d;

    border-color: #1c6ca9;
}


.quick-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    color: #4cc0ff;

    font-size: 26px;

    border: 1px solid #168cff;
    border-radius: 8px;

    background: #06203c;
}


.quick-card strong {
    display: block;

    color: white;
}


.quick-card span {
    display: block;

    margin-top: 5px;

    color: #829fb8;

    font-size: 13px;
}


.quick-card b {
    color: #3ab8ff;

    font-size: 19px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    min-height: 90px;

    padding: 20px max(24px,calc((100% - var(--max-width))/2));

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    gap: 30px;

    align-items: center;

    border-top: 1px solid #18466c;

    background: #01060d;
}


.footer-brand strong {
    display: block;

    color: #ffc12b;

    font-size: 21px;
}


.footer-brand strong span {
    color: #278cff;
}


.footer-brand small {
    color: #6686a0;
}


.footer-links {
    display: flex;

    gap: 18px;
}


.footer-links a {
    color: #7593ab;

    font-size: 12px;
}


.footer-links a:hover {
    color: white;
}


.footer-copy {
    justify-self: end;

    color: #5d7d98;

    font-size: 11px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1150px) {

    .main-nav {
        gap: 0;
    }

    .main-nav > a,
    .nav-dropdown > button {
        padding: 0 10px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        padding-bottom: 0;
    }

    .hero-visual {
        height: 500px;
    }

    .product-grid {
        grid-template-columns: 1fr 1fr;
    }

    .future-card {
        grid-column: 1 / -1;
        min-height: 260px;
    }

    .workflow-section {
        grid-template-columns: 1fr;
    }

    .video-card {
        max-width: 650px;
    }
}


@media (max-width: 820px) {

    .nav-shell {
        height: 74px;
    }

    .mobile-menu-button {
        display: block;
    }

    .main-nav {
        position: absolute;

        top: 74px;
        left: 0;
        right: 0;

        height: auto;

        display: none;
        flex-direction: column;
        align-items: stretch;

        padding: 12px;

        background: #020914;

        border-bottom: 1px solid #17436c;
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav > a,
    .nav-dropdown > button {
        min-height: 48px;

        padding: 0 15px;
    }

    .dropdown-menu {
        position: static;

        width: 100%;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: none;

        border: 0;

        box-shadow: none;
    }

    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .future-card {
        grid-column: auto;
    }

    .workflow-steps {
        flex-direction: column;
    }

    .workflow-arrow {
        transform: rotate(90deg);
    }

    .quick-links {
        grid-template-columns: 1fr;
    }

    .site-footer {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .footer-copy {
        justify-self: center;
    }
}


@media (max-width: 560px) {

    .nav-shell,
    .hero-inner,
    .section {
        width: min(100% - 28px,var(--max-width));
    }

    .brand-text {
        font-size: 19px;
    }

    .brand-mark {
        width: 44px;
        height: 44px;
    }

    .hero {
        min-height: 0;
    }

    .hero-inner {
        min-height: 0;
    }

    .hero-copy {
        padding-top: 50px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero-lead {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero-visual {
        height: 390px;
    }

    .hero-display {
        width: 270px;
        height: 170px;
    }

    .hero-display-main {
        right: 4%;

        padding-left: 105px;

        font-size: 20px;
    }

    .hero-logo-orb {
        left: 22px;
        top: 40px;

        transform: scale(.75);
    }

    .hero-onair {
        left: 35%;
        top: 225px;
    }

    .console {
        width: 160px;
        height: 105px;
    }

    .console-three {
        display: none;
    }

    .section {
        padding: 55px 0;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }
}
/* ==========================================================
   BLUEAETHER HOMEPAGE R2
   REAL PRODUCT ASSET INTEGRATION
   ========================================================== */

.brand-logo {
    display: block;
    width: 255px;
    max-height: 66px;
    object-fit: contain;
    object-position: left center;
}


.hero-product {
    min-width: 0;
    position: relative;
}


.hero-dashboard-frame {
    position: relative;
    overflow: hidden;

    border-radius: 14px;

    border: 1px solid rgba(38,130,214,.5);

    background: #020914;

    box-shadow:
        0 35px 90px rgba(0,0,0,.62),
        0 0 45px rgba(0,113,255,.12);

    transform:
        perspective(1600px)
        rotateY(-4deg)
        rotateX(1deg);
}


.hero-dashboard-frame::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    box-shadow:
        inset 0 0 70px rgba(0,0,0,.54),
        inset 0 0 3px rgba(100,190,255,.75);
}


.hero-dashboard-frame img {
    display: block;

    width: 100%;
    min-height: 455px;

    object-fit: cover;
    object-position: center;
}


.hero-dashboard-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,8,18,.13),
            transparent 42%,
            rgba(2,8,18,.13)
        );

    pointer-events: none;
}


.hero-dashboard-badge {
    position: absolute;

    left: 24px;
    bottom: 22px;

    padding: 11px 15px;

    background: rgba(2,8,17,.90);

    border: 1px solid rgba(61,152,230,.55);

    border-radius: 7px;

    color: #91b7d8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.6px;

    backdrop-filter: blur(10px);
}


.hero-dashboard-badge strong {
    display: block;

    margin-top: 3px;

    color: #ffd452;

    font-size: 13px;

    letter-spacing: .8px;
}


.traffic-product-logo {
    display: block;

    max-width: 330px;
    width: 88%;
    height: 100px;

    object-fit: contain;
    object-position: left center;

    margin: 2px 0 15px;
}


.product-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;
}


.card-text-link {
    color: #49baff;

    font-size: 13px;
    font-weight: 750;
}


.card-text-link:hover {
    color: white;
}


.nx-card {
    position: relative;

    padding: 0;

    min-height: 350px;

    background: #020811;
}


.nx-card-art {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.015);

    transition:
        transform .4s ease,
        filter .4s ease;
}


.nx-card:hover .nx-card-art {
    transform: scale(1.045);
}


.nx-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(1,5,12,.12),
            rgba(1,7,16,.26) 40%,
            rgba(1,7,16,.97) 83%
        );
}


.nx-content {
    position: absolute;

    left: 26px;
    right: 26px;
    bottom: 25px;

    z-index: 3;
}


.nx-content .product-status {
    margin-bottom: 8px;
}


.nx-content p {
    max-width: 470px;

    margin: 0 0 17px;

    color: #d7e8f6;

    text-shadow: 0 2px 8px black;
}


.video-card {
    cursor: default;
}


.video-heading {
    padding: 15px 18px 13px;

    border-bottom: 1px solid #164269;

    background:
        linear-gradient(
            90deg,
            rgba(8,32,60,.9),
            rgba(4,13,25,.9)
        );
}


.video-heading span {
    display: block;

    margin-bottom: 3px;

    color: #35b9ff;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.video-heading strong {
    color: white;

    font-size: 18px;
}


.traffic-video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: black;
}


.footer-brand img {
    display: block;

    width: 175px;
    height: 48px;

    object-fit: contain;
    object-position: left center;

    margin-bottom: 3px;
}


@media (min-width: 1700px) {

    :root {
        --max-width: 1540px;
    }

    .hero-inner {
        grid-template-columns: .78fr 1.35fr;
    }

    .hero-dashboard-frame img {
        min-height: 500px;
    }

}


@media (max-width: 1150px) {

    .hero-dashboard-frame {
        transform: none;
    }

    .hero-dashboard-frame img {
        min-height: auto;
    }

}


@media (max-width: 820px) {

    .brand-logo {
        width: 205px;
        max-height: 55px;
    }

    .traffic-product-logo {
        height: 85px;
    }

}


@media (max-width: 560px) {

    .brand-logo {
        width: 170px;
    }

    .hero-dashboard-badge {
        left: 12px;
        bottom: 12px;
    }

}


/* === BEGIN BLUEAETHER PRODUCT PAGES R1 === */


/* ==========================================================
   SHARED PRODUCT HERO
   ========================================================== */

.product-hero {
    position: relative;

    overflow: hidden;

    border-bottom: 1px solid #153c5d;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(20,110,220,.18),
            transparent 36%
        ),
        #010812;
}


.product-hero-inner {
    width: min(var(--max-width),calc(100% - 48px));

    min-height: 650px;

    margin: auto;

    display: grid;

    grid-template-columns:
        .78fr
        1.35fr;

    gap: 55px;

    align-items: center;
}


.product-hero-copy {
    padding: 70px 0;
}


.availability-chip,
.coming-soon-chip {
    width: max-content;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    padding: 7px 12px;

    border-radius: 999px;

    border: 1px solid #24527c;

    background: rgba(4,17,31,.74);

    color: #a9c5dc;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.availability-chip span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #32d574;

    box-shadow:
        0 0 12px #32d574;
}


.coming-soon-chip span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #f5b21b;

    box-shadow:
        0 0 12px #f5b21b;
}


.traffic-detail-logo {
    width: min(420px,90%);

    height: 120px;

    object-fit: contain;

    object-position: left center;

    margin-bottom: 20px;
}


.product-hero h1 {
    margin: 0 0 20px;

    color: white;

    font-size: clamp(44px,4.3vw,72px);

    line-height: .98;

    letter-spacing: -2.8px;
}


.product-hero h1 span {
    display: block;

    color: #cde5f8;
}


.product-hero-lead {
    max-width: 620px;

    color: #a8c4da;

    font-size: 18px;
}


.product-meta-row {
    margin-top: 30px;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}


.product-meta-row span {
    padding: 7px 10px;

    border-radius: 5px;

    background: #07172a;

    border: 1px solid #173e61;

    color: #82a7c6;

    font-size: 11px;
}


/* ==========================================================
   TRAFFIC SCREEN
   ========================================================== */

.traffic-screen-frame {
    position: relative;

    overflow: hidden;

    border-radius: 13px;

    border: 1px solid #1b5d93;

    background: #01050b;

    box-shadow:
        0 40px 100px rgba(0,0,0,.62),
        0 0 55px rgba(7,126,255,.11);

    transform:
        perspective(1700px)
        rotateY(-3deg);
}


.traffic-screen-frame img {
    width: 100%;

    display: block;
}


.screen-glow {
    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 60px rgba(0,0,0,.22),
        inset 0 0 3px rgba(80,177,255,.65);
}


/* ==========================================================
   LARGE TRAFFIC WORKFLOW
   ========================================================== */

.large-workflow-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}


.large-workflow-card {
    min-height: 285px;

    position: relative;

    padding: 30px;

    overflow: hidden;

    border: 1px solid #164369;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #081a2e,
            #04101c
        );
}


.large-workflow-card.take-card {
    border-color: #9b7517;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(243,173,22,.11),
            transparent 40%
        ),
        #07111c;
}


.workflow-number {
    position: absolute;

    right: 20px;
    top: 13px;

    color: rgba(89,153,204,.14);

    font-size: 70px;

    font-weight: 900;
}


.workflow-big-icon {
    width: 66px;
    height: 66px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #072449;

    border: 1px solid #1489ff;

    color: white;

    font-size: 25px;

    box-shadow:
        0 0 25px rgba(22,140,255,.2);
}


.large-workflow-card h3 {
    margin: 24px 0 7px;

    color: white;

    font-size: 25px;
}


.large-workflow-card p {
    margin: 0;

    max-width: 350px;

    color: #91afc7;
}


/* ==========================================================
   FEATURE GRID
   ========================================================== */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 16px;
}


.feature-card {
    min-height: 220px;

    padding: 26px;

    border: 1px solid #143956;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #07182b,
            #030d18
        );

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.feature-card:hover {
    transform: translateY(-3px);

    border-color: #2179b9;
}


.feature-symbol {
    min-width: 50px;
    height: 50px;

    width: max-content;

    padding: 0 10px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #06203d;

    border: 1px solid #137de3;

    color: #4ebcff;

    font-size: 17px;

    font-weight: 900;
}


.feature-card h3 {
    margin: 20px 0 8px;

    color: white;

    font-size: 20px;
}


.feature-card p {
    color: #8daac1;

    margin: 0;
}


/* ==========================================================
   LARGE VIDEO
   ========================================================== */

.product-video-section {
    display: grid;

    grid-template-columns:
        .55fr
        1.45fr;

    gap: 55px;

    align-items: center;

    border-top: 1px solid #113451;

    border-bottom: 1px solid #113451;
}


.video-copy h2 {
    margin: 8px 0 15px;

    color: white;

    font-size: clamp(35px,3vw,52px);
}


.video-copy p {
    color: #8facbf;
}


.large-video-frame {
    overflow: hidden;

    border: 1px solid #226da6;

    border-radius: 11px;

    background: black;

    box-shadow:
        0 30px 80px rgba(0,0,0,.5);
}


.large-video-frame video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: black;
}


/* ==========================================================
   REQUIREMENTS
   ========================================================== */

.requirements-panel {
    padding: 40px;

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap: 55px;

    border: 1px solid #164368;

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(16,110,220,.10),
            transparent 30%
        ),
        #061322;
}


.requirements-panel h2 {
    margin: 8px 0 12px;

    color: white;

    font-size: clamp(32px,3vw,48px);
}


.requirements-panel p {
    color: #91aec5;
}


.requirements-list {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}


.requirement {
    padding: 18px;

    border-radius: 8px;

    background: #06101d;

    border: 1px solid #153754;
}


.requirement strong,
.requirement span {
    display: block;
}


.requirement strong {
    color: white;

    margin-bottom: 5px;
}


.requirement span {
    color: #82a2bc;

    font-size: 13px;
}


/* ==========================================================
   TRAFFIC CTA
   ========================================================== */

.product-cta {
    margin-bottom: 70px;

    padding: 45px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    border-radius: 12px;

    border: 1px solid #987419;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(245,175,20,.13),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0a1723,
            #070d12
        );
}


.product-cta h2 {
    margin: 8px 0;

    color: white;

    font-size: 40px;
}


.product-cta p {
    margin: 0;

    color: #91aec4;
}


.product-cta-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


/* ==========================================================
   NX HERO
   ========================================================== */

.nx-detail-hero {
    min-height: 700px;

    position: relative;

    display: flex;

    align-items: end;

    overflow: hidden;

    border-bottom: 1px solid #174263;

    background: black;
}


.nx-detail-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.nx-detail-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,4,11,.08) 0%,
            rgba(0,5,12,.12) 30%,
            rgba(0,6,14,.78) 78%,
            #010711 100%
        );
}


.nx-detail-content {
    width: min(var(--max-width),calc(100% - 48px));

    position: relative;

    z-index: 3;

    margin: 0 auto;

    padding-bottom: 60px;
}


.nx-detail-content h1 {
    margin: 8px 0;

    color: white;

    font-size: clamp(55px,6vw,90px);

    letter-spacing: -3px;
}


.nx-detail-content p {
    max-width: 620px;

    margin: 0;

    color: #c4d8e7;

    font-size: 19px;
}


.nx-hero-actions {
    margin-top: 25px;
}


/* ==========================================================
   NX OVERVIEW
   ========================================================== */

.nx-overview-section {
    display: grid;

    grid-template-columns:
        .6fr
        1.4fr;

    gap: 55px;

    align-items: center;
}


.nx-overview-copy h2 {
    margin: 8px 0 15px;

    color: white;

    font-size: clamp(36px,3vw,52px);
}


.nx-overview-copy p {
    color: #8eabc1;

    font-size: 17px;
}


.nx-overview-image {
    overflow: hidden;

    border: 1px solid #1d567f;

    border-radius: 11px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.48);
}


.nx-overview-image img {
    display: block;

    width: 100%;
}


/* ==========================================================
   NX SHOWCASE
   ========================================================== */

.nx-showcase-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 18px;
}


.nx-showcase-card {
    overflow: hidden;

    border: 1px solid #18496f;

    border-radius: 11px;

    background: #061321;
}


.nx-showcase-card img {
    width: 100%;

    aspect-ratio: 16 / 9;

    display: block;

    object-fit: cover;

    border-bottom: 1px solid #173c5c;
}


.nx-showcase-card div {
    padding: 24px;
}


.nx-showcase-card span {
    color: #38b4ff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.nx-showcase-card h3 {
    margin: 5px 0 7px;

    color: white;

    font-size: 24px;
}


.nx-showcase-card p {
    margin: 0;

    color: #88a7be;
}


/* ==========================================================
   NX COMING SOON
   ========================================================== */

.nx-coming-panel {
    padding: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-radius: 12px;

    border: 1px solid #245278;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0,126,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(238,158,19,.09),
            transparent 28%
        ),
        #06121f;
}


.nx-coming-panel h2 {
    margin: 8px 0;

    color: white;

    font-size: 40px;
}


.nx-coming-panel p {
    max-width: 720px;

    margin: 0;

    color: #8ba9c0;
}


/* ==========================================================
   PRODUCT RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .product-hero-inner,
    .product-video-section,
    .requirements-panel,
    .nx-overview-section {
        grid-template-columns: 1fr;
    }


    .traffic-screen-frame {
        transform: none;
    }


    .feature-grid {
        grid-template-columns:
            1fr
            1fr;
    }


    .product-cta,
    .nx-coming-panel {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 760px) {

    .large-workflow-grid,
    .feature-grid,
    .nx-showcase-grid,
    .requirements-list {
        grid-template-columns: 1fr;
    }


    .product-hero-inner {
        width: min(
            var(--max-width),
            calc(100% - 28px)
        );
    }


    .nx-detail-content {
        width: calc(100% - 28px);
    }


    .nx-detail-hero {
        min-height: 580px;
    }


    .product-cta,
    .requirements-panel,
    .nx-coming-panel {
        padding: 27px;
    }

}


/* === END BLUEAETHER PRODUCT PAGES R1 === */


/* === BEGIN BLUEAETHER R1.1 POLISH === */


/* ==========================================================
   NX SPLIT HERO
   ========================================================== */

.nx-split-hero {
    min-height: auto;

    display: block;

    padding: 72px 0;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(235,150,15,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 35%,
            rgba(0,110,255,.13),
            transparent 31%
        ),
        #010812;
}


.nx-split-inner {
    width: min(
        var(--max-width),
        calc(100% - 48px)
    );

    margin: auto;

    display: grid;

    grid-template-columns:
        .72fr
        1.28fr;

    gap: 58px;

    align-items: center;
}


.nx-split-copy h1 {
    margin: 12px 0 18px;

    color: white;

    font-size: clamp(
        48px,
        5vw,
        78px
    );

    line-height: .95;

    letter-spacing: -3px;
}


.nx-split-copy h1 span {
    display: block;

    color: #cfe6f8;
}


.nx-split-copy p {
    max-width: 570px;

    color: #9ab8ce;

    font-size: 18px;
}


.nx-capability-row {
    margin-top: 25px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.nx-capability-row span {
    padding: 7px 11px;

    border-radius: 5px;

    border: 1px solid #184669;

    background: #061525;

    color: #8eb3d0;

    font-size: 11px;
}


.nx-splash-frame {
    position: relative;

    overflow: hidden;

    border-radius: 13px;

    border: 1px solid #255c87;

    background: black;

    box-shadow:
        0 35px 90px rgba(0,0,0,.55),
        0 0 50px rgba(15,117,255,.10);
}


.nx-splash-frame img {
    display: block;

    width: 100%;
    height: auto;
}


.nx-splash-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 4px rgba(88,185,255,.55);
}



/* ==========================================================
   CONTACT
   ========================================================== */

.contact-hero {
    padding: 115px 0 90px;

    border-bottom: 1px solid #153d5e;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(15,119,235,.17),
            transparent 34%
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(237,163,21,.06),
            transparent 28%
        ),
        #010812;
}


.contact-hero-inner {
    width: min(
        900px,
        calc(100% - 48px)
    );

    margin: auto;

    text-align: center;
}


.contact-hero h1 {
    margin: 12px 0 18px;

    color: white;

    font-size: clamp(
        54px,
        6vw,
        84px
    );

    line-height: .95;

    letter-spacing: -3px;
}


.contact-hero p {
    max-width: 720px;

    margin: auto;

    color: #9db9cf;

    font-size: 19px;
}


.contact-options {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 20px;
}


.contact-card {
    min-height: 350px;

    padding: 38px;

    border-radius: 13px;

    border: 1px solid #17476e;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(16,118,235,.11),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #081a2d,
            #030d18
        );

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.contact-card:hover {
    transform: translateY(-4px);

    border-color: #248bda;

    box-shadow:
        0 25px 65px rgba(0,0,0,.35),
        0 0 35px rgba(17,130,240,.10);
}


.support-contact-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(242,170,20,.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #081827,
            #040d17
        );
}


.contact-icon {
    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    margin-bottom: 25px;

    border-radius: 11px;

    border: 1px solid #167cd0;

    background: #06203c;

    color: #46baff;

    font-size: 25px;
}


.contact-type {
    color: #46baff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.contact-card h2 {
    margin: 8px 0 10px;

    color: white;

    font-size: 31px;
}


.contact-card p {
    max-width: 520px;

    color: #8eacc3;
}


.contact-card strong {
    display: block;

    margin-top: 35px;

    color: #46baff;

    font-size: 17px;
}


.contact-product-strip {
    margin-bottom: 70px;

    padding: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-radius: 12px;

    border: 1px solid #936f17;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(242,172,20,.12),
            transparent 32%
        ),
        #07121e;
}


.contact-product-strip h2 {
    margin: 7px 0;

    color: white;

    font-size: 38px;
}


.contact-product-strip p {
    margin: 0;

    color: #8ca9bf;
}



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {

    .nx-split-inner {
        grid-template-columns: 1fr;
    }

    .nx-split-copy {
        max-width: 760px;
    }

}


@media (max-width: 760px) {

    .nx-split-inner {
        width: calc(100% - 28px);
    }


    .contact-options {
        grid-template-columns: 1fr;
    }


    .contact-product-strip {
        flex-direction: column;

        align-items: flex-start;
    }


    .contact-hero-inner {
        width: calc(100% - 28px);
    }

}


/* === END BLUEAETHER R1.1 POLISH === */


/* === BEGIN BLUEAETHER SUPPORT CLOSEOUT === */


/* ==========================================================
   SUPPORT HERO
   ========================================================== */

.support-hero {
    padding: 115px 0 90px;

    border-bottom: 1px solid #153d5e;

    background:
        radial-gradient(
            circle at 30% 15%,
            rgba(13,119,240,.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 75% 70%,
            rgba(241,169,20,.06),
            transparent 28%
        ),
        #010812;
}


.support-hero-inner {
    width: min(
        920px,
        calc(100% - 48px)
    );

    margin: auto;

    text-align: center;
}


.support-hero h1 {
    margin: 12px 0 18px;

    color: white;

    font-size: clamp(
        54px,
        6vw,
        84px
    );

    line-height: .95;

    letter-spacing: -3px;
}


.support-hero p {
    max-width: 700px;

    margin: auto;

    color: #9ebbd1;

    font-size: 19px;
}



/* ==========================================================
   SUPPORT PATHS
   ========================================================== */

.support-paths {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}


.support-path-card {
    min-height: 355px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    border-radius: 12px;

    border: 1px solid #17466d;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(17,126,239,.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #081a2e,
            #030d18
        );

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.support-path-card:hover {
    transform: translateY(-4px);

    border-color: #268ee0;

    box-shadow:
        0 25px 65px rgba(0,0,0,.34),
        0 0 35px rgba(18,132,246,.09);
}


.licensing-card {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(242,173,21,.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #091a2b,
            #040e18
        );
}


.info-card {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(70,91,210,.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #09182b,
            #040d18
        );
}


.support-path-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    border: 1px solid #167ed6;

    background: #06213e;

    color: #48bdff;

    font-size: 22px;

    font-weight: 900;
}


.support-path-type {
    color: #46baff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.7px;
}


.support-path-card h2 {
    margin: 8px 0 10px;

    color: white;

    font-size: 27px;
}


.support-path-card p {
    margin: 0;

    color: #8daac1;
}


.support-path-card strong {
    margin-top: auto;

    padding-top: 32px;

    color: #45baff;

    font-size: 15px;
}



/* ==========================================================
   SUPPORT PREP
   ========================================================== */

.support-prep-panel {
    padding: 42px;

    display: grid;

    grid-template-columns:
        .65fr
        1.35fr;

    gap: 55px;

    border-radius: 12px;

    border: 1px solid #164265;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(16,112,220,.09),
            transparent 30%
        ),
        #061321;
}


.support-prep-copy h2 {
    margin: 8px 0 12px;

    color: white;

    font-size: clamp(
        34px,
        3vw,
        48px
    );
}


.support-prep-copy p {
    color: #8eaac1;
}


.support-prep-list {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 11px;
}


.support-prep-item {
    padding: 18px;

    display: grid;

    grid-template-columns:
        40px
        1fr;

    gap: 15px;

    border-radius: 8px;

    border: 1px solid #153a59;

    background: #050f1c;
}


.support-prep-item > span {
    color: #258fde;

    font-size: 12px;

    font-weight: 900;
}


.support-prep-item strong {
    display: block;

    color: white;

    margin-bottom: 4px;
}


.support-prep-item p {
    margin: 0;

    color: #7f9eb7;

    font-size: 13px;
}



/* ==========================================================
   TRAFFIC SUPPORT PANEL
   ========================================================== */

.support-product-panel {
    margin-bottom: 70px;

    padding: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-radius: 12px;

    border: 1px solid #967216;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(242,173,21,.12),
            transparent 32%
        ),
        #07121e;
}


.support-product-panel h2 {
    margin: 7px 0;

    color: white;

    font-size: 38px;
}


.support-product-panel p {
    margin: 0;

    color: #8eaac0;
}


.support-product-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

    .support-paths {
        grid-template-columns:
            1fr
            1fr;
    }


    .support-path-card:last-child {
        grid-column:
            1 / -1;
    }


    .support-prep-panel {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 720px) {

    .support-paths,
    .support-prep-list {
        grid-template-columns: 1fr;
    }


    .support-path-card:last-child {
        grid-column: auto;
    }


    .support-product-panel {
        flex-direction: column;

        align-items: flex-start;
    }


    .support-prep-panel,
    .support-product-panel {
        padding: 27px;
    }


    .support-hero-inner {
        width: calc(100% - 28px);
    }

}


/* === END BLUEAETHER SUPPORT CLOSEOUT === */