/* =========================================================
   XGLOBAL™ CAMPAIGN CENTER
   FULLY RESPONSIVE / MOBILE-FIRST
   ========================================================= */

:root {
    /* =========================================================
       XGLOBAL™ BLUE / CYAN THEME
       ========================================================= */

    --xg-green: #008cff;
    --xg-green-bright: #16d9ff;
    --xg-green-dark: #0066cc;

    --xg-green-soft: rgba(0,140,255,.12);
    --xg-green-glow: rgba(0,140,255,.30);


    /* =========================================================
       BACKGROUNDS
       ========================================================= */

    --xg-bg: #030507;
    --xg-bg-2: #060a10;

    --xg-panel: rgba(14,24,38,.88);
    --xg-panel-2: rgba(20,34,56,.94);


    /* =========================================================
       SURFACES
       ========================================================= */

    --xg-surface: #101b2a;
    --xg-surface-2: #142238;
    --xg-surface-3: #192b45;


    /* =========================================================
       BORDERS
       ========================================================= */

    --xg-border: rgba(255,255,255,.09);

    --xg-border-green:
        rgba(0,140,255,.28);


    /* =========================================================
       TEXT
       ========================================================= */

    --xg-text: #f5faff;

    --xg-muted: #9eafc2;

    --xg-muted-2: #748397;


    /* =========================================================
       GRADIENTS
       ========================================================= */

    --xg-gradient:
        linear-gradient(
            135deg,
            #008cff 0%,
            #0066d6 50%,
            #004a9e 100%
        );


    --xg-dark-gradient:
        linear-gradient(
            135deg,
            #030507 0%,
            #08111e 55%,
            #0c1727 100%
        );


    --xg-card-gradient:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );


    /* =========================================================
       CORNERS
       ========================================================= */

    --xg-radius: 22px;
    --xg-radius-sm: 14px;


    /* =========================================================
       SHADOW
       ========================================================= */

    --xg-shadow:
        0 25px 70px rgba(0,0,0,.40);


    /* =========================================================
       ANIMATION
       ========================================================= */

    --xg-transition:
        all .25s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   RESET
   ========================================================= */

.campaign-center,
.campaign-center * {
    box-sizing: border-box;
}

.campaign-center {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(14px, 3vw, 40px);

    color: var(--xg-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.5;

    overflow-x: hidden;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.campaign-center::before {
    content: "";
    position: fixed;
    width: 500px;
    height: 500px;
    top: -250px;
    right: -200px;

    background:
        radial-gradient(
            circle,
            rgba(99,255,56,.09),
            transparent 70%
        );

    pointer-events: none;
    z-index: -1;
}

.campaign-center::after {
    content: "";
    position: fixed;
    width: 450px;
    height: 450px;
    bottom: -250px;
    left: -220px;

    background:
        radial-gradient(
            circle,
            rgba(99,255,56,.06),
            transparent 70%
        );

    pointer-events: none;
    z-index: -1;
}


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

.campaign-header {
    position: relative;

    margin-bottom: clamp(22px, 4vw, 42px);

    padding:
        clamp(24px, 5vw, 58px);

    border:
        1px solid var(--xg-border);

    border-radius:
        clamp(20px, 3vw, 30px);

    background:
        linear-gradient(
            135deg,
            rgba(20,27,21,.96),
            rgba(7,11,8,.98)
        );

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

    overflow: hidden;
}

.campaign-header::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -120px;
    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99,255,56,.18),
            transparent 68%
        );

    pointer-events: none;
}

.campaign-header::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--xg-green),
            transparent
        );

    opacity: .55;
}

.header-content {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, .85fr);

    align-items: center;

    gap: clamp(28px, 6vw, 80px);
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 13px;

    border:
        1px solid var(--xg-border-green);

    border-radius: 999px;

    background:
        var(--xg-green-soft);

    color:
        var(--xg-green);

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

    letter-spacing: .12em;
    text-transform: uppercase;
}

.header-badge::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--xg-green);

    box-shadow:
        0 0 12px var(--xg-green);
}

.header-text h1 {
    margin:
        18px 0 14px;

    font-size:
        clamp(34px, 5vw, 68px);

    line-height: .98;

    letter-spacing: -.045em;
}

.header-text h1 span {
    background:
        linear-gradient(
            110deg,
            #fff 10%,
            var(--xg-green) 60%,
            #fff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.header-text p {
    max-width: 760px;

    margin: 0;

    color: var(--xg-muted);

    font-size:
        clamp(14px, 1.5vw, 17px);

    line-height: 1.75;
}

.header-image {
    position: relative;

    width: 100%;

    border:
        1px solid var(--xg-border-green);

    border-radius:
        clamp(16px, 2vw, 24px);

    overflow: hidden;

    background: #050805;

    box-shadow:
        0 0 0 1px rgba(99,255,56,.04),
        0 20px 60px rgba(0,0,0,.45);
}

.header-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(99,255,56,.12),
            transparent 45%
        );

    pointer-events: none;
}

.header-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 390px;

    object-fit: cover;

    transition:
        transform .7s ease;
}

.header-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   FORM
   ========================================================= */

#campaignForm {
    display: flex;
    flex-direction: column;

    gap: clamp(20px, 3vw, 30px);
}


/* =========================================================
   SECTION
   ========================================================= */

.campaign-section,
.campaign-type-section,
.cookies-section,
.linking-section,
.settings-panel,
.submit-section {

    position: relative;

    padding:
        clamp(22px, 4vw, 38px);

    border:
        1px solid var(--xg-border);

    border-radius:
        var(--xg-radius);

    background:
        linear-gradient(
            145deg,
            rgba(16,21,17,.94),
            rgba(9,13,10,.96)
        );

    box-shadow:
        0 18px 50px rgba(0,0,0,.25);

    overflow: hidden;
}

.campaign-section::before,
.campaign-type-section::before,
.cookies-section::before,
.linking-section::before,
.settings-panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--xg-green),
            transparent 55%
        );

    opacity: .5;
}

.campaign-section h2,
.campaign-type-section h2,
.cookies-section h2,
.linking-section h2,
.settings-panel h2 {

    margin:
        0 0 7px;

    font-size:
        clamp(21px, 2.5vw, 29px);

    line-height: 1.2;

    letter-spacing: -.025em;
}

.campaign-section > p,
.campaign-type-section > p,
.cookies-section > p,
.linking-section > p,
.settings-panel > p {

    margin:
        0 0 clamp(22px, 3vw, 30px);

    color: var(--xg-muted);

    font-size:
        clamp(13px, 1.4vw, 15px);

    line-height: 1.7;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid,
.cookies-grid,
.link-grid,
.settings-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        clamp(16px, 2vw, 22px);
}

.full {
    grid-column: 1 / -1;
}


/* =========================================================
   FIELD
   ========================================================= */

.field {
    min-width: 0;
}

.field > label:first-child,
.field > label:not(.upload-box) {

    display: block;

    margin-bottom: 8px;

    color: #e9eee9;

    font-size: 13px;

    font-weight: 750;

    letter-spacing: .01em;
}


/* =========================================================
   INPUTS
   ========================================================= */

.campaign-center input[type="text"],
.campaign-center input[type="url"],
.campaign-center input[type="number"],
.campaign-center input[type="file"],
.campaign-center select,
.campaign-center textarea {

    width: 100%;

    min-height: 50px;

    border:
        1px solid var(--xg-border);

    border-radius:
        var(--xg-radius-sm);

    background:
        rgba(3,7,4,.72);

    color:
        var(--xg-text);

    padding:
        13px 15px;

    font:
        inherit;

    font-size: 14px;

    outline: none;

    transition:
        var(--xg-transition);
}

.campaign-center textarea {
    min-height: 130px;

    resize:
        vertical;

    line-height: 1.65;
}

.campaign-center select {
    cursor: pointer;
}

.campaign-center input::placeholder,
.campaign-center textarea::placeholder {
    color: #68736b;
}

.campaign-center input:focus,
.campaign-center textarea:focus,
.campaign-center select:focus {

    border-color:
        rgba(99,255,56,.65);

    background:
        rgba(5,10,6,.95);

    box-shadow:
        0 0 0 3px rgba(99,255,56,.08),
        0 0 25px rgba(99,255,56,.05);
}


/* =========================================================
   UPLOAD
   ========================================================= */

.upload-box {

    position: relative;

    min-height: 150px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    text-align: center;

    border:
        1px dashed
        rgba(99,255,56,.35);

    border-radius:
        var(--xg-radius-sm);

    background:
        rgba(99,255,56,.025);

    cursor: pointer;

    overflow: hidden;

    transition:
        var(--xg-transition);
}

.upload-box:hover {

    border-color:
        var(--xg-green);

    background:
        rgba(99,255,56,.06);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 35px rgba(99,255,56,.06);
}

.upload-box svg {

    width: 34px;
    height: 34px;

    fill: var(--xg-green);

    margin-bottom: 4px;
}

.upload-box span {

    color: #eef3ed;

    font-size: 14px;

    font-weight: 750;
}

.upload-box small {

    color:
        var(--xg-muted-2);

    font-size: 11px;
}

.upload-box input[type="file"] {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* =========================================================
   CAMPAIGN TYPE
   ========================================================= */

.type-grid {

    display: grid;

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

    gap:
        clamp(12px, 2vw, 18px);
}

.type-option {
    position: relative;
}

.type-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.type-option label {

    min-height: 100%;

    display: grid;

    grid-template-columns: 52px 1fr;

    gap: 15px;

    align-items: start;

    padding: 20px;

    border:
        1px solid var(--xg-border);

    border-radius:
        18px;

    background:
        rgba(5,9,6,.65);

    cursor: pointer;

    transition:
        var(--xg-transition);
}

.type-option label:hover {

    border-color:
        rgba(99,255,56,.35);

    transform:
        translateY(-3px);

    background:
        rgba(99,255,56,.035);
}

.type-option input:checked + label {

    border-color:
        var(--xg-green);

    background:
        linear-gradient(
            145deg,
            rgba(99,255,56,.10),
            rgba(99,255,56,.025)
        );

    box-shadow:
        0 0 0 1px rgba(99,255,56,.08),
        0 15px 40px rgba(0,0,0,.25);
}

.type-icon {

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background:
        rgba(99,255,56,.09);

    border:
        1px solid rgba(99,255,56,.16);

    font-size: 24px;
}

.type-title {

    margin-bottom: 5px;

    font-size: 16px;

    font-weight: 800;
}

.type-description {

    color:
        var(--xg-muted);

    font-size: 12px;

    line-height: 1.65;
}

.type-badge {

    display: inline-flex;

    margin-top: 12px;

    padding: 5px 9px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.055);

    color:
        #bac3bc;

    font-size: 10px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .06em;
}


/* =========================================================
   SETTING / LINK CARDS
   ========================================================= */

.setting-card,
.link-card {

    min-width: 0;

    padding: clamp(17px, 2.5vw, 23px);

    border:
        1px solid var(--xg-border);

    border-radius:
        18px;

    background:
        rgba(5,9,6,.58);

    transition:
        var(--xg-transition);
}

.setting-card:hover,
.link-card:hover {

    border-color:
        rgba(99,255,56,.20);

    background:
        rgba(99,255,56,.025);
}

.setting-header,
.card-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 17px;
}

.setting-icon,
.card-icon {

    flex:
        0 0 43px;

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        rgba(99,255,56,.09);

    border:
        1px solid rgba(99,255,56,.14);

    font-size: 19px;
}

.setting-title,
.card-title {

    color:
        #edf2ed;

    font-size: 14px;

    font-weight: 800;
}

.setting-subtitle,
.card-subtitle {

    margin-top: 2px;

    color:
        var(--xg-muted-2);

    font-size: 11px;
}

.setting-note,
.note {

    margin-top: 12px;

    color:
        #737e76;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   SWITCH
   ========================================================= */

.switch {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.switch-text {
    min-width: 0;
}

.switch-text strong {

    display: block;

    margin-bottom: 5px;

    font-size: 14px;
}

.switch-text small {

    display: block;

    max-width: 600px;

    color:
        var(--xg-muted);

    font-size: 11px;

    line-height: 1.55;
}

.toggle {

    position: relative;

    flex:
        0 0 auto;

    width: 52px;
    height: 30px;

    cursor: pointer;
}

.toggle input {

    position: absolute;

    opacity: 0;
}

.slider {

    position: absolute;

    inset: 0;

    border-radius: 999px;

    background:
        #242a25;

    border:
        1px solid rgba(255,255,255,.10);

    transition:
        var(--xg-transition);
}

.slider::before {

    content: "";

    position: absolute;

    width: 22px;
    height: 22px;

    top: 3px;
    left: 3px;

    border-radius: 50%;

    background:
        #89918b;

    transition:
        var(--xg-transition);
}

.toggle input:checked + .slider {

    background:
        rgba(99,255,56,.18);

    border-color:
        rgba(99,255,56,.5);

    box-shadow:
        0 0 18px rgba(99,255,56,.12);
}

.toggle input:checked + .slider::before {

    transform:
        translateX(22px);

    background:
        var(--xg-green);

    box-shadow:
        0 0 14px rgba(99,255,56,.5);
}


/* =========================================================
   CODE PREVIEW
   ========================================================= */

.code-preview {

    margin-top: 15px;

    padding: 13px 15px;

    border-radius:
        12px;

    border:
        1px solid rgba(99,255,56,.13);

    background:
        #030503;

    color:
        var(--xg-green);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 11px;

    line-height: 1.65;

    overflow-x: auto;

    white-space: nowrap;
}


/* =========================================================
   SUBMIT SECTION
   ========================================================= */

.submit-section {

    text-align: center;

    padding:
        clamp(30px, 6vw, 65px)
        clamp(20px, 5vw, 55px);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(99,255,56,.12),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(13,20,14,.97),
            rgba(5,9,6,.98)
        );
}

.submit-icon {

    width: 66px;
    height: 66px;

    margin:
        0 auto 18px;

    display: grid;

    place-items: center;

    border-radius: 20px;

    background:
        rgba(99,255,56,.10);

    border:
        1px solid rgba(99,255,56,.25);

    font-size: 29px;

    box-shadow:
        0 0 35px rgba(99,255,56,.08);
}

.submit-section h2 {

    margin:
        0 0 10px;

    font-size:
        clamp(24px, 4vw, 38px);

    letter-spacing:
        -.03em;
}

.submit-section p {

    max-width: 760px;

    margin:
        0 auto 25px;

    color:
        var(--xg-muted);

    font-size:
        clamp(13px, 1.5vw, 15px);

    line-height: 1.7;
}

.submit-btn {

    min-height: 56px;

    padding:
        0 30px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #72ff4b,
            #48e82a
        );

    color:
        #031003;

    font:
        inherit;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 12px 35px rgba(99,255,56,.20);

    transition:
        var(--xg-transition);
}

.submit-btn:hover {

    transform:
        translateY(-3px)
        scale(1.015);

    box-shadow:
        0 18px 45px rgba(99,255,56,.30);
}

.submit-btn:active {

    transform:
        translateY(0)
        scale(.99);
}

.submit-note {

    margin-top: 17px;

    color:
        #69736c;

    font-size: 11px;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.campaign-center ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.campaign-center ::-webkit-scrollbar-track {
    background: #050705;
}

.campaign-center ::-webkit-scrollbar-thumb {

    background:
        rgba(99,255,56,.25);

    border-radius:
        999px;
}

.campaign-center ::-webkit-scrollbar-thumb:hover {

    background:
        rgba(99,255,56,.45);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .header-content {
        grid-template-columns: 1fr;
    }

    .header-image {
        max-width: 720px;
        margin: 0 auto;
    }

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

    .type-option label {
        grid-template-columns:
            52px 1fr;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

    .campaign-center {
        padding:
            12px;
    }

    .campaign-header {
        padding:
            25px 20px;
    }

    .form-grid,
    .cookies-grid,
    .link-grid,
    .settings-grid {

        grid-template-columns:
            1fr;
    }

    .full {
        grid-column:
            auto;
    }

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

    .campaign-section,
    .campaign-type-section,
    .cookies-section,
    .linking-section,
    .settings-panel,
    .submit-section {

        border-radius:
            18px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .campaign-center {
        padding:
            8px;
    }

    .campaign-header {
        padding:
            23px 17px;

        border-radius:
            17px;
    }

    .header-text h1 {
        font-size:
            clamp(32px, 11vw, 48px);
    }

    .header-text p {
        font-size:
            13px;

        line-height:
            1.65;
    }

    .header-image img {
        max-height:
            250px;
    }

    .campaign-section,
    .campaign-type-section,
    .cookies-section,
    .linking-section,
    .settings-panel,
    .submit-section {

        padding:
            21px 16px;

        border-radius:
            17px;
    }

    .campaign-section h2,
    .campaign-type-section h2,
    .cookies-section h2,
    .linking-section h2,
    .settings-panel h2 {

        font-size:
            21px;
    }

    .campaign-center input[type="text"],
    .campaign-center input[type="url"],
    .campaign-center input[type="number"],
    .campaign-center select,
    .campaign-center textarea {

        font-size:
            16px;

        min-height:
            52px;
    }

    .campaign-center textarea {
        min-height:
            145px;
    }

    .type-option label {

        grid-template-columns:
            45px 1fr;

        padding:
            16px;

        gap:
            12px;
    }

    .type-icon {

        width:
            45px;

        height:
            45px;

        font-size:
            20px;
    }

    .type-title {
        font-size:
            14px;
    }

    .type-description {
        font-size:
            11px;
    }

    .switch {

        align-items:
            flex-start;
    }

    .toggle {

        margin-top:
            2px;
    }

    .submit-btn {

        width:
            100%;

        min-height:
            55px;
    }

    .submit-note {

        font-size:
            10px;

        line-height:
            1.6;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .campaign-center {
        padding:
            5px;
    }

    .campaign-header {
        padding:
            20px 14px;
    }

    .campaign-section,
    .campaign-type-section,
    .cookies-section,
    .linking-section,
    .settings-panel,
    .submit-section {

        padding:
            18px 13px;
    }

    .header-badge {
        font-size:
            10px;
    }

    .header-text h1 {
        font-size:
            30px;
    }

    .type-option label {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}









/* =========================================================
   XGLOBAL™ ADVERTISING NETWORK
   MASTER RESPONSIVE STYLESHEET
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --xg-blue:
        #008cff;

    --xg-blue-bright:
        #16d9ff;

    --xg-blue-dark:
        #0066cc;

    --xg-blue-deep:
        #004a9e;


    --xg-black:
        #030507;

    --xg-dark:
        #060a10;

    --xg-dark-2:
        #09111d;

    --xg-dark-3:
        #0d1726;


    --xg-surface:
        #101b2a;

    --xg-surface-2:
        #142238;

    --xg-surface-3:
        #192b45;


    --xg-white:
        #ffffff;

    --xg-text:
        #f5faff;

    --xg-text-soft:
        #d7e4f2;

    --xg-muted:
        #9eafc2;

    --xg-muted-2:
        #748397;


    --xg-border:
        rgba(255,255,255,.09);

    --xg-border-blue:
        rgba(0,140,255,.28);


    --xg-gradient:

        linear-gradient(
            135deg,
            #16d9ff 0%,
            #008cff 50%,
            #0066d6 100%
        );


    --xg-dark-gradient:

        linear-gradient(
            135deg,
            #030507 0%,
            #08111e 55%,
            #0c1727 100%
        );


    --xg-card-gradient:

        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.015)
        );


    --xg-shadow:

        0 30px 80px
        rgba(0,0,0,.45);


    --xg-glow:

        0 0 50px
        rgba(0,140,255,.20);


    --xg-radius:
        18px;

    --xg-radius-small:
        12px;


    --xg-max:
        1200px;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

    scroll-padding-top:
        40px;

}


body {

    margin:
        0;

    padding:
        0;

    min-width:
        320px;

    background:
        var(--xg-black);

    color:
        var(--xg-text);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    line-height:
        1.65;

    overflow-x:
        hidden;

}


img,
svg,
video {

    max-width:
        100%;

    height:
        auto;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    cursor:
        pointer;

}


::selection {

    background:
        var(--xg-blue);

    color:
        #ffffff;

}


/* =========================================================
   PAGE
========================================================= */

.xglobal-page {

    min-height:
        100vh;

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(0,140,255,.10),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(22,217,255,.06),
            transparent 25%
        ),

        var(--xg-black);

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width:
        min(
            var(--xg-max),
            calc(100% - 40px)
        );

    margin-inline:
        auto;

}


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

.hero {

    position:
        relative;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    padding:
        110px 0 90px;

    overflow:
        hidden;

}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    top:
        -280px;

    left:
        -250px;

    background:
        radial-gradient(
            circle,
            rgba(0,140,255,.18),
            transparent 70%
        );

    pointer-events:
        none;

}


.hero::after {

    content:
        "";

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    right:
        -250px;

    bottom:
        -300px;

    background:
        radial-gradient(
            circle,
            rgba(22,217,255,.10),
            transparent 70%
        );

    pointer-events:
        none;

}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(380px,.92fr);

    gap:
        clamp(45px,7vw,100px);

    align-items:
        center;

    position:
        relative;

    z-index:
        2;

}


.hero-content {

    min-width:
        0;

}


.hero-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 14px;

    border:
        1px solid
        var(--xg-border-blue);

    border-radius:
        999px;

    background:
        rgba(0,140,255,.06);

    color:
        var(--xg-blue-bright);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .16em;

}


.live-dot {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        50%;

    background:
        var(--xg-blue-bright);

    box-shadow:
        0 0 14px
        var(--xg-blue-bright);

    animation:
        pulseDot 1.8s infinite;

}


.hero h1 {

    margin:
        28px 0 25px;

    font-size:
        clamp(
            48px,
            6.5vw,
            86px
        );

    line-height:
        .98;

    letter-spacing:
        -.055em;

    font-weight:
        900;

}


.hero h1 strong {

    color:
        var(--xg-white);

}


.gradient-text {

    background:
        var(--xg-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-description {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--xg-text-soft);

    font-size:
        clamp(
            16px,
            1.5vw,
            19px
        );

    line-height:
        1.75;

}


.hero-description strong {

    color:
        var(--xg-white);

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        34px;

}


.btn {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        13px 22px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .05em;

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

}


.btn:hover {

    transform:
        translateY(-3px);

}


.btn-primary {

    color:
        #ffffff;

    background:
        var(--xg-gradient);

    box-shadow:
        0 12px 35px
        rgba(0,140,255,.25);

}


.btn-primary:hover {

    box-shadow:
        0 18px 45px
        rgba(0,140,255,.40);

}


.btn-secondary {

    border-color:
        var(--xg-border-blue);

    background:
        rgba(255,255,255,.035);

    color:
        var(--xg-white);

}


.btn-secondary:hover {

    border-color:
        var(--xg-blue);

    background:
        rgba(0,140,255,.08);

}


.hero-proof {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        25px;

    margin-top:
        40px;

}


.hero-proof div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.hero-proof strong {

    font-size:
        25px;

    line-height:
        1;

    color:
        var(--xg-white);

}


.hero-proof span {

    color:
        var(--xg-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


/* =========================================================
   DASHBOARD
========================================================= */

.hero-dashboard {

    position:
        relative;

    min-width:
        0;

    border:
        1px solid
        rgba(0,140,255,.22);

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(15,30,48,.95),
            rgba(3,8,14,.97)
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.60),
        0 0 80px
        rgba(0,140,255,.09);

    overflow:
        hidden;

    transform:
        perspective(1200px)
        rotateY(-3deg);

    transition:
        transform .5s ease;

}


.hero-dashboard:hover {

    transform:
        perspective(1200px)
        rotateY(0deg)
        translateY(-5px);

}


.dashboard-top {

    min-height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        0 22px;

    border-bottom:
        1px solid
        var(--xg-border);

    background:
        rgba(255,255,255,.025);

}


.dashboard-title {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .08em;

}


.dashboard-title span {

    color:
        var(--xg-blue-bright);

}


.dashboard-status {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--xg-blue-bright);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .10em;

}


.dashboard-body {

    padding:
        30px;

}


.dashboard-main {

    min-width:
        0;

}


.reach-label {

    color:
        var(--xg-muted);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .15em;

}


.reach-number {

    margin-top:
        6px;

    font-size:
        clamp(
            58px,
            7vw,
            94px
        );

    font-weight:
        900;

    line-height:
        .95;

    letter-spacing:
        -.06em;

    background:
        var(--xg-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.reach-number span {

    font-size:
        .55em;

}


.dashboard-caption {

    margin:
        12px 0 0;

    color:
        var(--xg-muted);

    font-size:
        12px;

}


.chart {

    height:
        150px;

    display:
        grid;

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

    align-items:
        end;

    gap:
        8px;

    margin-top:
        30px;

    padding:
        15px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


.bar {

    width:
        100%;

    height:
        var(--bar-height);

    min-height:
        20px;

    border-radius:
        999px 999px 3px 3px;

    background:
        linear-gradient(
            to top,
            var(--xg-blue-dark),
            var(--xg-blue-bright)
        );

    box-shadow:
        0 0 18px
        rgba(0,140,255,.22);

    animation:
        barPulse 2.8s ease-in-out infinite alternate;

}


.bar:nth-child(1)  { --bar-height: 30%; }
.bar:nth-child(2)  { --bar-height: 45%; }
.bar:nth-child(3)  { --bar-height: 38%; }
.bar:nth-child(4)  { --bar-height: 57%; }
.bar:nth-child(5)  { --bar-height: 49%; }
.bar:nth-child(6)  { --bar-height: 67%; }
.bar:nth-child(7)  { --bar-height: 60%; }
.bar:nth-child(8)  { --bar-height: 77%; }
.bar:nth-child(9)  { --bar-height: 70%; }
.bar:nth-child(10) { --bar-height: 86%; }
.bar:nth-child(11) { --bar-height: 76%; }
.bar:nth-child(12) { --bar-height: 95%; }


.bar:nth-child(2)  { animation-delay: .1s; }
.bar:nth-child(3)  { animation-delay: .2s; }
.bar:nth-child(4)  { animation-delay: .3s; }
.bar:nth-child(5)  { animation-delay: .4s; }
.bar:nth-child(6)  { animation-delay: .5s; }
.bar:nth-child(7)  { animation-delay: .6s; }
.bar:nth-child(8)  { animation-delay: .7s; }
.bar:nth-child(9)  { animation-delay: .8s; }
.bar:nth-child(10) { animation-delay: .9s; }
.bar:nth-child(11) { animation-delay: 1s; }
.bar:nth-child(12) { animation-delay: 1.1s; }


.dashboard-stats {

    display:
        grid;

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

    gap:
        10px;

    margin-top:
        25px;

}


.mini-stat {

    padding:
        17px 12px;

    text-align:
        center;

    border:
        1px solid
        var(--xg-border);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.025);

}


.mini-stat strong {

    display:
        block;

    color:
        var(--xg-white);

    font-size:
        19px;

}


.mini-stat span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--xg-muted);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


/* =========================================================
   TRUST BAR
========================================================= */

.trust-bar {

    position:
        relative;

    border-top:
        1px solid
        var(--xg-border);

    border-bottom:
        1px solid
        var(--xg-border);

    background:
        rgba(255,255,255,.018);

}


.trust-grid {

    display:
        grid;

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

}


.trust-item {

    min-height:
        125px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        20px;

    border-right:
        1px solid
        var(--xg-border);

}


.trust-item:last-child {

    border-right:
        0;

}


.trust-item strong {

    color:
        var(--xg-white);

    font-size:
        clamp(27px,3vw,40px);

    line-height:
        1;

}


.trust-item span {

    margin-top:
        8px;

    color:
        var(--xg-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .09em;

}


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

.section {

    position:
        relative;

    padding:
        clamp(80px,9vw,135px) 0;

}


.section-label {

    display:
        inline-block;

    color:
        var(--xg-blue-bright);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;

}


.section-title {

    max-width:
        900px;

    margin:
        16px 0 20px;

    font-size:
        clamp(
            38px,
            5vw,
            66px
        );

    line-height:
        1.02;

    letter-spacing:
        -.045em;

    font-weight:
        900;

}


.section-description {

    max-width:
        850px;

    margin:
        0 0 50px;

    color:
        var(--xg-text-soft);

    font-size:
        16px;

    line-height:
        1.8;

}


.section-description strong {

    color:
        var(--xg-white);

}


/* =========================================================
   MODELS
========================================================= */

.models-grid {

    display:
        grid;

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

    gap:
        18px;

}


.model-card {

    position:
        relative;

    min-width:
        0;

    padding:
        30px;

    border:
        1px solid
        var(--xg-border);

    border-radius:
        var(--xg-radius);

    background:
        var(--xg-card-gradient);

    overflow:
        hidden;

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

}


.model-card::after {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -80px;

    bottom:
        -80px;

    border-radius:
        50%;

    background:
        rgba(0,140,255,.08);

    filter:
        blur(20px);

}


.model-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--xg-border-blue);

    box-shadow:
        var(--xg-glow);

}


.code {

    position:
        absolute;

    top:
        20px;

    right:
        22px;

    color:
        rgba(255,255,255,.20);

    font-size:
        10px;

    font-weight:
        900;

}


.model-icon {

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        25px;

    border:
        1px solid
        var(--xg-border-blue);

    border-radius:
        14px;

    color:
        var(--xg-blue-bright);

    background:
        rgba(0,140,255,.07);

    font-size:
        12px;

    font-weight:
        900;

}


.model-card h3 {

    margin:
        0 0 10px;

    font-size:
        20px;

}


.model-card p {

    margin:
        0;

    color:
        var(--xg-muted);

    font-size:
        14px;

    line-height:
        1.7;

}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem {

    overflow:
        hidden;

}


.ecosystem-visual {

    position:
        relative;

    width:
        min(
            820px,
            100%
        );

    aspect-ratio:
        1 / 1;

    margin:
        65px auto 0;

    display:
        grid;

    place-items:
        center;

}


.orbit {

    position:
        absolute;

    width:
        58%;

    aspect-ratio:
        1;

    border:
        1px solid
        rgba(0,140,255,.18);

    border-radius:
        50%;

    animation:
        orbitRotate 22s linear infinite;

}


.orbit::before,
.orbit::after {

    content:
        "";

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--xg-blue-bright);

    box-shadow:
        0 0 20px
        var(--xg-blue-bright);

}


.orbit::before {

    top:
        0;

    left:
        50%;

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

}


.orbit::after {

    right:
        0;

    top:
        50%;

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

}


.orbit.two {

    width:
        78%;

    border-color:
        rgba(22,217,255,.10);

    animation:
        orbitRotateReverse 32s linear infinite;

}


.ecosystem-core {

    position:
        relative;

    z-index:
        5;

    width:
        clamp(
            160px,
            23vw,
            230px
        );

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(22,217,255,.45);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,140,255,.25),
            rgba(3,8,14,.98) 68%
        );

    box-shadow:
        0 0 90px
        rgba(0,140,255,.25),
        inset 0 0 50px
        rgba(0,140,255,.10);

    text-align:
        center;

}


.ecosystem-core strong {

    display:
        block;

    color:
        var(--xg-white);

    font-size:
        clamp(18px,3vw,28px);

    font-weight:
        900;

}


.ecosystem-core span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--xg-blue-bright);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.ecosystem-core small {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--xg-muted);

    font-size:
        8px;

    font-weight:
        800;

}


.eco-node {

    position:
        absolute;

    z-index:
        6;

    width:
        180px;

    padding:
        17px;

    border:
        1px solid
        var(--xg-border-blue);

    border-radius:
        14px;

    background:
        rgba(8,17,30,.88);

    backdrop-filter:
        blur(12px);

    color:
        var(--xg-white);

    font-size:
        10px;

    font-weight:
        900;

    text-align:
        center;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.35);

}


.eco-node small {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--xg-muted);

    font-size:
        8px;

    font-weight:
        500;

}


.node-one {

    top:
        6%;

    left:
        50%;

    transform:
        translateX(-50%);

}


.node-two {

    right:
        3%;

    top:
        50%;

    transform:
        translateY(-50%);

}


.node-three {

    bottom:
        6%;

    left:
        50%;

    transform:
        translateX(-50%);

}


.node-four {

    left:
        3%;

    top:
        50%;

    transform:
        translateY(-50%);

}


/* =========================================================
   ADVANTAGE
========================================================= */

.xg-advantage {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,140,255,.025),
            transparent
        );

}


.advantage-grid {

    display:
        grid;

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

    gap:
        20px;

}


.advantage-card {

    position:
        relative;

    min-width:
        0;

    padding:
        35px;

    border:
        1px solid
        var(--xg-border);

    border-radius:
        20px;

    background:
        var(--xg-card-gradient);

    overflow:
        hidden;

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.advantage-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--xg-border-blue);

}


.advantage-card.featured {

    border-color:
        rgba(0,140,255,.35);

    background:
        linear-gradient(
            145deg,
            rgba(0,140,255,.10),
            rgba(255,255,255,.015)
        );

}


.advantage-number {

    position:
        absolute;

    top:
        20px;

    right:
        22px;

    color:
        rgba(255,255,255,.15);

    font-size:
        11px;

    font-weight:
        900;

}


.advantage-icon {

    font-size:
        35px;

    margin-bottom:
        25px;

}


.advantage-card h3 {

    margin:
        0 0 14px;

    font-size:
        23px;

    line-height:
        1.2;

}


.advantage-card p {

    color:
        var(--xg-muted);

    font-size:
        14px;

    line-height:
        1.8;

}


.advantage-card a {

    display:
        inline-block;

    margin-top:
        15px;

    color:
        var(--xg-blue-bright);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .07em;

}


.advantage-card a:hover {

    color:
        #ffffff;

}


/* =========================================================
   PRICING
========================================================= */

.pricing-grid {

    display:
        grid;

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

    gap:
        18px;

}


.price-card {

    position:
        relative;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        32px 26px;

    border:
        1px solid
        var(--xg-border);

    border-radius:
        var(--xg-radius);

    background:
        var(--xg-card-gradient);

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.price-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--xg-border-blue);

}


.price-card.featured {

    border-color:
        rgba(0,140,255,.42);

    background:
        linear-gradient(
            145deg,
            rgba(0,140,255,.11),
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 25px 70px
        rgba(0,140,255,.10);

}


.popular {

    position:
        absolute;

    top:
        0;

    right:
        20px;

    transform:
        translateY(-50%);

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        var(--xg-gradient);

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .08em;

}


.price-card h3 {

    margin:
        0;

    color:
        var(--xg-blue-bright);

    font-size:
        12px;

    letter-spacing:
        .12em;

}


.price {

    margin:
        20px 0 12px;

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

    font-weight:
        900;

    line-height:
        1;

}


.price small {

    color:
        var(--xg-muted);

    font-size:
        12px;

    font-weight:
        600;

}


.price-description {

    min-height:
        70px;

    color:
        var(--xg-muted);

    font-size:
        13px;

}


.features {

    list-style:
        none;

    padding:
        0;

    margin:
        20px 0 30px;

}


.features li {

    position:
        relative;

    padding:
        8px 0 8px 22px;

    color:
        var(--xg-text-soft);

    font-size:
        12px;

}


.features li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--xg-blue-bright);

    font-weight:
        900;

}


.price-card .btn {

    width:
        100%;

    margin-top:
        auto;

}


/* =========================================================
   FORM
========================================================= */

.form-section {

    position:
        relative;

    padding:
        110px 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,140,255,.025),
            transparent
        );

}


.form-wrapper {

    width:
        min(
            100%,
            1000px
        );

    margin:
        0 auto;

}


#advertiserForm {

    position:
        relative;

    padding:
        clamp(24px,5vw,55px);

    border:
        1px solid
        rgba(0,140,255,.20);

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(16,27,42,.95),
            rgba(5,10,17,.98)
        );

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

}


.honeypot {

    position:
        absolute;

    left:
        -9999px;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

}


.form-header {

    padding-bottom:
        30px;

    margin-bottom:
        35px;

    border-bottom:
        1px solid
        var(--xg-border);

}


.form-header-badge {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--xg-blue-bright);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .14em;

}


.form-header h3 {

    margin:
        0 0 8px;

    font-size:
        clamp(24px,4vw,34px);

    line-height:
        1.15;

}


.form-header p {

    margin:
        0;

    color:
        var(--xg-muted);

}


.form-section-title {

    margin:
        40px 0 20px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        var(--xg-border);

    color:
        var(--xg-blue-bright);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.form-grid {

    display:
        grid;

    gap:
        20px;

}


.form-grid.two {

    grid-template-columns:
        repeat(2,minmax(0,1fr));

}


.form-group {

    min-width:
        0;

}


.form-group label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--xg-text-soft);

    font-size:
        11px;

    font-weight:
        700;

}


.form-group input,
.form-group textarea,
.form-group select {

    width:
        100%;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        10px;

    outline:
        none;

    background:
        rgba(255,255,255,.035);

    color:
        var(--xg-white);

    padding:
        14px 15px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.form-group input,
.form-group select {

    min-height:
        50px;

}


.form-group textarea {

    resize:
        vertical;

    min-height:
        130px;

}


.form-group select {

    appearance:
        none;

    background-image:

        linear-gradient(
            45deg,
            transparent 50%,
            var(--xg-blue-bright) 50%
        ),

        linear-gradient(
            135deg,
            var(--xg-blue-bright) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 21px,
        calc(100% - 12px) 21px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:
        no-repeat;

}


.form-group select option {

    background:
        var(--xg-dark-2);

    color:
        #ffffff;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        var(--xg-muted-2);

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color:
        var(--xg-blue);

    background:
        rgba(0,140,255,.045);

    box-shadow:
        0 0 0 3px
        rgba(0,140,255,.08);

}


/* =========================================================
   MODEL SELECTOR
========================================================= */

.model-selector {

    display:
        grid;

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

    gap:
        12px;

}


.model-option {

    position:
        relative;

}


.model-option input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


.model-option label {

    min-height:
        85px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        15px;

    border:
        1px solid
        var(--xg-border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.025);

    cursor:
        pointer;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;

}


.model-option label:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--xg-border-blue);

}


.model-option input:checked + label {

    border-color:
        var(--xg-blue);

    background:
        rgba(0,140,255,.09);

    box-shadow:
        0 0 25px
        rgba(0,140,255,.08);

}


.model-option strong {

    color:
        var(--xg-blue-bright);

    font-size:
        14px;

}


.model-option span {

    margin-top:
        4px;

    color:
        var(--xg-muted);

    font-size:
        10px;

}


/* =========================================================
   UPLOAD
========================================================= */

.upload-box {

    position:
        relative;

    min-height:
        220px;

    display:
        grid;

    place-items:
        center;

    padding:
        30px;

    border:
        1px dashed
        rgba(0,140,255,.35);

    border-radius:
        16px;

    background:
        rgba(0,140,255,.025);

    text-align:
        center;

    overflow:
        hidden;

    transition:
        border-color .25s ease,
        background .25s ease;

}


.upload-box:hover,
.upload-box.dragging {

    border-color:
        var(--xg-blue-bright);

    background:
        rgba(0,140,255,.07);

}


.upload-box input[type="file"] {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    cursor:
        pointer;

}


.upload-icon {

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 15px;

    border:
        1px solid
        var(--xg-border-blue);

    border-radius:
        50%;

    color:
        var(--xg-blue-bright);

    font-size:
        25px;

}


.upload-content strong {

    display:
        block;

    font-size:
        15px;

}


.upload-content p {

    margin:
        6px 0;

    color:
        var(--xg-muted);

    font-size:
        12px;

}


.upload-content small {

    display:
        block;

    margin-top:
        14px;

    color:
        var(--xg-blue-bright);

    font-size:
        10px;

    font-weight:
        700;

    word-break:
        break-word;

}


/* =========================================================
   CONSENT
========================================================= */

.consent-box {

    margin-top:
        30px;

    padding:
        20px;

    border:
        1px solid
        var(--xg-border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.025);

}


.consent-label {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    cursor:
        pointer;

    color:
        var(--xg-text-soft);

    font-size:
        12px;

}


.consent-label input {

    width:
        20px;

    height:
        20px;

    min-width:
        20px;

    margin:
        2px 0 0;

    accent-color:
        var(--xg-blue);

}


.consent-error {

    display:
        none;

    margin-top:
        12px;

    padding:
        11px 13px;

    border:
        1px solid
        rgba(255,70,70,.35);

    border-radius:
        8px;

    background:
        rgba(255,70,70,.08);

    color:
        #ff7777;

    font-size:
        11px;

}


/* =========================================================
   FORM STATUS
========================================================= */

.form-status {

    display:
        none;

    margin-top:
        20px;

    padding:
        15px;

    border-radius:
        10px;

    font-size:
        12px;

}


.form-status.success {

    display:
        block;

    border:
        1px solid
        rgba(22,217,255,.25);

    background:
        rgba(0,140,255,.08);

    color:
        var(--xg-blue-bright);

}


.form-status.error {

    display:
        block;

    border:
        1px solid
        rgba(255,70,70,.30);

    background:
        rgba(255,70,70,.08);

    color:
        #ff7777;

}


/* =========================================================
   SUBMIT
========================================================= */

.form-submit {

    margin-top:
        25px;

}


.submit-button {

    width:
        100%;

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        15px 22px;

    border:
        0;

    border-radius:
        12px;

    background:
        var(--xg-gradient);

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .05em;

    box-shadow:
        0 15px 40px
        rgba(0,140,255,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.submit-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 50px
        rgba(0,140,255,.35);

}


.submit-button:disabled {

    opacity:
        .65;

    cursor:
        wait;

    transform:
        none;

}


/* =========================================================
   ASSISTANCE
========================================================= */

.network-assistance {

    padding:
        0 0 100px;

}


.assistance-grid {

    display:
        grid;

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

    gap:
        20px;

}


.assistance-card,
.form-panel {

    padding:
        35px;

    border:
        1px solid
        var(--xg-border);

    border-radius:
        var(--xg-radius);

    background:
        var(--xg-card-gradient);

}


.card-kicker {

    color:
        var(--xg-blue-bright);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .14em;

}


.assistance-card h3 {

    margin:
        12px 0 15px;

    font-size:
        25px;

}


.assistance-card p {

    color:
        var(--xg-muted);

    font-size:
        13px;

}


.assistance-list {

    display:
        grid;

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

    gap:
        8px 20px;

    list-style:
        none;

    padding:
        0;

    margin:
        25px 0 0;

}


.assistance-list li {

    color:
        var(--xg-text-soft);

    font-size:
        12px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    padding-top:
        80px;

}


.faq {

    max-width:
        950px;

}


.faq details {

    border-top:
        1px solid
        var(--xg-border);

}


.faq details:last-child {

    border-bottom:
        1px solid
        var(--xg-border);

}


.faq summary {

    position:
        relative;

    padding:
        23px 45px 23px 0;

    cursor:
        pointer;

    list-style:
        none;

    color:
        var(--xg-white);

    font-size:
        15px;

    font-weight:
        700;

}


.faq summary::-webkit-details-marker {

    display:
        none;

}


.faq summary::after {

    content:
        "+";

    position:
        absolute;

    right:
        0;

    top:
        19px;

    color:
        var(--xg-blue-bright);

    font-size:
        22px;

    font-weight:
        400;

}


.faq details[open] summary::after {

    content:
        "−";

}


.faq details p {

    max-width:
        850px;

    padding:
        0 0 25px;

    margin:
        0;

    color:
        var(--xg-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


.faq details a {

    color:
        var(--xg-blue-bright);

    font-weight:
        800;

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding:
        70px 0 110px;

}


.cta-box {

    position:
        relative;

    padding:
        clamp(40px,7vw,90px);

    border:
        1px solid
        rgba(0,140,255,.25);

    border-radius:
        28px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(0,140,255,.16),
            transparent 45%
        ),

        linear-gradient(
            145deg,
            #0b1727,
            #03070c
        );

    text-align:
        center;

    overflow:
        hidden;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.50);

}


.cta-box::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        50%;

    top:
        0;

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

    border-radius:
        50%;

    background:
        rgba(0,140,255,.20);

    filter:
        blur(60px);

}


.cta-box > * {

    position:
        relative;

    z-index:
        2;

}


.cta-box h2 {

    max-width:
        850px;

    margin:
        18px auto 25px;

    font-size:
        clamp(
            42px,
            6vw,
            78px
        );

    line-height:
        1;

    letter-spacing:
        -.05em;

}


.cta-box p {

    max-width:
        760px;

    margin:
        0 auto;

    color:
        var(--xg-text-soft);

    font-size:
        15px;

    line-height:
        1.8;

}


.cta-box .hero-actions {

    justify-content:
        center;

}


.cta-secondary {

    margin-top:
        28px;

    color:
        var(--xg-muted);

    font-size:
        12px;

}


.cta-secondary a {

    color:
        var(--xg-blue-bright);

    font-weight:
        800;

}


.cta-secondary a:hover {

    color:
        #ffffff;

}


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

.footer {

    padding:
        35px 0;

    border-top:
        1px solid
        var(--xg-border);

    background:
        rgba(0,0,0,.35);

}


.footer-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    flex-wrap:
        wrap;

}


.footer-brand {

    display:
        flex;

    flex-direction:
        column;

}


.footer-brand strong {

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        900;

}


.footer-brand span {

    color:
        var(--xg-blue-bright);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .10em;

}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

}


.footer-links a {

    color:
        var(--xg-muted);

    font-size:
        10px;

    font-weight:
        700;

}


.footer-links a:hover {

    color:
        var(--xg-blue-bright);

}


.footer-copy {

    width:
        100%;

    padding-top:
        20px;

    border-top:
        1px solid
        var(--xg-border);

    color:
        var(--xg-muted-2);

    font-size:
        10px;

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pulseDot {

    0%,
    100% {

        opacity:
            1;

        transform:
            scale(1);

    }

    50% {

        opacity:
            .45;

        transform:
            scale(.75);

    }

}


@keyframes barPulse {

    from {

        opacity:
            .65;

        transform:
            scaleY(.90);

        transform-origin:
            bottom;

    }

    to {

        opacity:
            1;

        transform:
            scaleY(1);

        transform-origin:
            bottom;

    }

}


@keyframes orbitRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes orbitRotateReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {


    .hero {

        min-height:
            auto;

        padding:
            90px 0 70px;

    }


    .hero-grid {

        grid-template-columns:
            1fr;

    }


    .hero-content {

        max-width:
            850px;

    }


    .hero-dashboard {

        width:
            min(
                700px,
                100%
            );

        margin:
            0 auto;

        transform:
            none;

    }


    .hero-dashboard:hover {

        transform:
            translateY(-5px);

    }


    .models-grid {

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

    }


    .advantage-grid {

        grid-template-columns:
            1fr;

    }


    .advantage-card {

        min-height:
            auto;

    }


    .pricing-grid {

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

    }


    .assistance-grid {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 800px) {


    .container {

        width:
            min(
                100% - 30px,
                var(--xg-max)
            );

    }


    .trust-grid {

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

    }


    .trust-item:nth-child(2) {

        border-right:
            0;

    }


    .trust-item:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--xg-border);

    }


    .ecosystem-visual {

        width:
            100%;

    }


    .model-selector {

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

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {


    .container {

        width:
            calc(100% - 28px);

    }


    .hero {

        padding:
            70px 0 55px;

    }


    .hero h1 {

        font-size:
            clamp(
                43px,
                13vw,
                65px
            );

    }


    .hero-description {

        font-size:
            15px;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    .hero-proof {

        justify-content:
            space-between;

        gap:
            10px;

    }


    .hero-proof strong {

        font-size:
            21px;

    }


    .dashboard-body {

        padding:
            22px;

    }


    .dashboard-top {

        padding:
            0 15px;

    }


    .dashboard-title {

        font-size:
            10px;

    }


    .dashboard-status {

        font-size:
            7px;

    }


    .chart {

        gap:
            5px;

        height:
            120px;

    }


    .dashboard-stats {

        grid-template-columns:
            1fr;

    }


    .mini-stat {

        padding:
            12px;

    }


    .trust-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .trust-item {

        min-height:
            105px;

        padding:
            12px 8px;

    }


    .trust-item strong {

        font-size:
            25px;

    }


    .trust-item span {

        font-size:
            7px;

    }


    .section {

        padding:
            75px 0;

    }


    .section-title {

        font-size:
            clamp(
                36px,
                10vw,
                55px
            );

    }


    .section-description {

        font-size:
            14px;

    }


    .models-grid {

        grid-template-columns:
            1fr;

    }


    .model-card {

        padding:
            25px;

    }


    /* ==============================================
       MOBILE ECOSYSTEM
    ============================================== */

    .ecosystem-visual {

        aspect-ratio:
            auto;

        display:
            grid;

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

        gap:
            12px;

        margin-top:
            40px;

        padding:
            15px 0;

    }


    .orbit {

        display:
            none;

    }


    .ecosystem-core {

        grid-column:
            1 / -1;

        width:
            180px;

        margin:
            0 auto 10px;

    }


    .eco-node {

        position:
            relative;

        inset:
            auto;

        width:
            100%;

        min-height:
            90px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        transform:
            none !important;

    }


    .node-one,
    .node-two,
    .node-three,
    .node-four {

        top:
            auto;

        right:
            auto;

        bottom:
            auto;

        left:
            auto;

    }


    /* ==============================================
       ADVANTAGE
    ============================================== */

    .advantage-card {

        padding:
            27px;

    }


    /* ==============================================
       PRICING
    ============================================== */

    .pricing-grid {

        grid-template-columns:
            1fr;

    }


    .price-card {

        padding:
            30px 25px;

    }


    /* ==============================================
       FORM
    ============================================== */

    #advertiserForm {

        padding:
            24px 17px;

        border-radius:
            18px;

    }


    .form-grid.two {

        grid-template-columns:
            1fr;

    }


    .model-selector {

        grid-template-columns:
            1fr;

    }


    .model-option label {

        min-height:
            72px;

    }


    .upload-box {

        min-height:
            200px;

        padding:
            25px 15px;

    }


    .consent-label {

        font-size:
            11px;

    }


    .submit-button {

        min-height:
            58px;

        padding:
            14px;

        font-size:
            10px;

    }


    /* ==============================================
       ASSISTANCE
    ============================================== */

    .assistance-card,
    .form-panel {

        padding:
            25px 20px;

    }


    .assistance-list {

        grid-template-columns:
            1fr;

    }


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

    .final-cta {

        padding:
            50px 0 80px;

    }


    .cta-box {

        padding:
            45px 20px;

        border-radius:
            20px;

    }


    .cta-box h2 {

        font-size:
            clamp(
                39px,
                11vw,
                60px
            );

    }


    .cta-box p {

        font-size:
            14px;

    }


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

    .footer-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .footer-links {

        flex-direction:
            column;

        gap:
            10px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {


    .hero h1 {

        font-size:
            40px;

    }


    .hero-proof {

        display:
            grid;

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

    }


    .hero-proof strong {

        font-size:
            18px;

    }


    .hero-proof span {

        font-size:
            7px;

    }


    .trust-grid {

        grid-template-columns:
            1fr;

    }


    .trust-item {

        border-right:
            0 !important;

        border-bottom:
            1px solid
            var(--xg-border);

    }


    .trust-item:last-child {

        border-bottom:
            0;

    }


    .ecosystem-visual {

        grid-template-columns:
            1fr;

    }


    .ecosystem-core {

        grid-column:
            auto;

    }


    .eco-node {

        min-height:
            75px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}