/* ═══════════════════════════════════════
   RESET & TOKENS — GOOGLE WHITE THEME
═══════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    /* ── DotStark brand palette ── */
    --ds-navy: #0b0f2d;
    --ds-navy-mid: #111535;
    --ds-navy-soft: #1a2050;
    --ds-orange: #fc4906;
    --ds-orange-dark: #fc0d5e;
    --ds-orange-lite: #fff0e8;
    --ds-orange-mid: #ffd5bb;
    /* Neutral */
    --g-red: #fc0d5e;
    --g-green: #2db56a;
    --g-yellow: #f4b942;
    --g-gray-900: #0f1117;
    --g-gray-700: #374151;
    --g-gray-500: #6b7280;
    --g-gray-300: #d1d5db;
    --g-gray-100: #f3f4f6;
    --g-gray-50: #f9fafb;
    --white: #ffffff;
    /* Alias blue → DotStark orange for CTAs */
    --g-blue: var(--ds-orange);
    --g-blue-dark: var(--ds-orange-dark);
    --g-blue-lite: var(--ds-orange-lite);
    --g-blue-mid: var(--ds-orange-mid);
    --r4: 4px;
    --r8: 8px;
    --r12: 12px;
    --r16: 16px;
    --r24: 24px;
    --r100: 100px;
    --shadow-xs: 0 1px 2px rgba(11,15,45,.12),0 1px 3px rgba(11,15,45,.08);
    --shadow-sm: 0 1px 3px rgba(11,15,45,.1),0 2px 6px rgba(11,15,45,.07);
    --shadow-md: 0 2px 8px rgba(11,15,45,.12),0 4px 20px rgba(11,15,45,.08);
    --shadow-lg: 0 8px 28px rgba(11,15,45,.14),0 16px 52px rgba(11,15,45,.08);
    --shadow-form: 0 2px 8px rgba(11,15,45,.14),0 4px 20px rgba(11,15,45,.08);
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased
}

body {
    font-family: 'Instrument Sans',sans-serif;
    color: var(--g-gray-900);
    background: var(--white);
    overflow-x: hidden
}

img {
    max-width: 100%;
    display: block
}

button {
    cursor: pointer;
    font-family: inherit
}

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

/* ═══ SCROLL PROGRESS ═══ */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg,var(--ds-orange),#ffb347);
    z-index: 9999;
    transition: width .1s linear;
}

/* ═══ URGENCY TICKER ═══ */
.ticker {
    background: var(--g-red);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 9px 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.ticker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: blink 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes blink {
    0%, 100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.ticker strong {
    font-weight: 700
}

.ticker-cd {
    display: inline-flex;
    align-items: center;
    background: rgba(0,0,0,.18);
    border-radius: var(--r4);
    padding: 2px 10px;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* ═══ NAVBAR ═══ */
.nav {
    position: sticky;
    top: 0;
    z-index: 190;
    background: var(--white);
    border-bottom: 1px solid var(--g-gray-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    height: 75px;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .nav-logo span {
        color: var(--g-blue)
    }

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px
}

.nav-trust {
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    gap: 6px
}

    .nav-trust::before {
        content: '🏅';
        font-size: 13px
    }

.nav-btn {
    background: var(--ds-orange);
    color: #fff;
    border: none;
    border-radius: var(--r4);
    padding: 9px 24px;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s,box-shadow .15s,transform .12s;
    white-space: nowrap;
}

    .nav-btn:hover {
        background: var(--ds-orange-dark);
        box-shadow: 0 2px 12px rgba(249,106,34,.4);
        transform: translateY(-1px)
    }

/* ═══ HERO — ALL WHITE ═══ */
.hero {
    background: linear-gradient(135deg,var(--ds-navy) 0%,var(--ds-navy-mid) 60%,#0f1940 100%);
    padding: 80px 5% 88px;
    position: relative;
    overflow: hidden;
    border-bottom: none;
}

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse 65% 55% at 90% 10%,rgba(249,106,34,.12) 0%,transparent 65%), radial-gradient(ellipse 45% 45% at 5% 90%,rgba(249,106,34,.07) 0%,transparent 65%);
    }

.hero-grid-lines {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size: 56px 56px;
}

.hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 80px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249,106,34,.15);
    border: 1px solid rgba(249,106,34,.3);
    color: var(--ds-orange);
    border-radius: var(--r100);
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 20px;
    animation: fadeUp .5s both;
}

.hero-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-orange);
    animation: blink 1.4s ease-in-out infinite;
}

.hero h1 {
    font-family: "Poppins",sans-serif;
    font-size: clamp(34px,4.2vw,56px);
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -.03em;
    margin-bottom: 22px;
    animation: fadeUp .5s .1s both;
}

    .hero h1 .line-amber {
        color: var(--ds-orange)
    }

    .hero h1 .line-thin {
        font-weight: 400;
        font-style: italic;
        color: rgba(255,255,255,.6)
    }

.hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,.7);
    line-height: 1.7;
    max-width: 540px;
    margin-bottom: 32px;
    animation: fadeUp .5s .2s both;
}

    .hero-sub strong {
        color: #fff;
        font-weight: 600
    }

.proof-logos {
    margin-bottom: 32px;
    animation: fadeUp .5s .3s both;
}

.proof-label {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-bottom: 12px;
    font-weight: 600;
}

.logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.logo-pill {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r4);
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    transition: background .15s,border-color .15s;
}

    .logo-pill:hover {
        background: rgba(249,106,34,.15);
        border-color: rgba(249,106,34,.3);
        color: var(--ds-orange)
    }

.hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    animation: fadeUp .5s .4s both;
}

.h-stat-num {
    font-family: "Poppins",sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--ds-orange);
    line-height: 1;
}

.h-stat-lbl {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin-top: 3px;
    line-height: 1.4
}

/* ═══ FORM CARD ═══ */
.form-card {
    background: var(--white);
    border-radius: var(--r8);
    box-shadow: var(--shadow-form);
    border: 1px solid var(--g-gray-300);
    overflow: hidden;
    animation: fadeUp .6s .25s both;
}

.form-card-header {
    background: linear-gradient(135deg,var(--ds-orange),var(--ds-orange-dark));
    padding: 22px 24px 18px;
}

    .form-card-header h3 {
        font-family: "Poppins",sans-serif;
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
        margin-bottom: 5px;
    }

    .form-card-header p {
        font-size: 12.5px;
        color: rgba(255,255,255,.75);
        line-height: 1.5
    }

.form-steps-indicator {
    display: flex;
    gap: 4px;
    margin-top: 14px;
}

.fsi {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.2);
    transition: background .3s;
}

    .fsi.active {
        background: #fff
    }

.form-body {
    padding: 24px
}

.step {
    display: none
}

    .step.active {
        display: block
    }

.f-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-gray-700);
    margin-bottom: 5px;
    letter-spacing: .01em;
}

.f-input {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--g-gray-300);
    border-radius: var(--r4);
    font-family: "Poppins",sans-serif;
    font-size: 14px;
    color: var(--g-gray-900);
    background: var(--white);
    outline: none;
    transition: border-color .15s,box-shadow .15s;
}

    .f-input:focus {
        border-color: var(--ds-orange);
        box-shadow: 0 0 0 2px rgba(249,106,34,.18);
    }

    .f-input.error {
        border-color: var(--g-red);
        box-shadow: 0 0 0 2px rgba(234,67,53,.15)
    }

.f-group {
    margin-bottom: 14px
}

.phone-number-input .iti {
    width: 100% !important
}

.f-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

select.f-input {
    cursor: pointer
}

textarea.f-input {
    resize: vertical;
    min-height: 72px
}

.f-error {
    font-size: 11px;
    color: var(--g-red);
    margin-top: 4px;
    display: none
}

.step1-cta {
    width: 100%;
    padding: 12px;
    margin-top: 4px;
    background: var(--ds-orange);
    color: #fff;
    border: none;
    border-radius: var(--r4);
    font-size: 14.5px;
    font-weight: 700;
    transition: background .15s,box-shadow .15s,transform .12s;
}

    .step1-cta::after {
        content: '→';
        margin-left: 8px;
        display: inline-block;
        transition: transform .2s;
    }

    .step1-cta:hover {
        background: var(--ds-orange-dark);
        box-shadow: 0 4px 16px rgba(249,106,34,.35);
        transform: translateY(-1px)
    }

        .step1-cta:hover::after {
            transform: translateX(4px)
        }

.step2-cta {
    width: 100%;
    padding: 12px;
    margin-top: 4px;
    background: var(--ds-orange);
    color: #fff;
    border: none;
    border-radius: var(--r4);
    font-size: 14.5px;
    font-weight: 700;
    transition: background .15s,box-shadow .15s,transform .12s;
}

    .step2-cta:hover {
        background: var(--ds-orange-dark);
        box-shadow: 0 4px 16px rgba(249,106,34,.35);
        transform: translateY(-1px)
    }

.back-link {
    background: none;
    border: none;
    color: var(--g-gray-500);
    font-size: 12px;
    margin-top: 8px;
    display: block;
    text-align: center;
    transition: color .15s;
}

    .back-link:hover {
        color: var(--ds-orange)
    }

.form-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--g-gray-300);
}

    .form-trust-row span {
        font-size: 11px;
        color: var(--g-gray-500)
    }

.trust-icon {
    font-size: 12px
}

.form-success {
    display: none;
    text-align: center;
}

.success-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(52,168,83,.1);
    color: var(--g-green);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 2px solid rgba(52,168,83,.2);
}

.form-success h3 {
    font-family: "Poppins",sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--g-gray-900);
    margin-bottom: 8px;
}

.form-success p {
    font-size: 13px;
    color: var(--g-gray-500);
    line-height: 1.65
}

.next-steps-mini {
    background: var(--g-gray-50);
    border: 1px solid var(--g-gray-300);
    border-radius: var(--r8);
    padding: 14px 18px;
    margin-top: 18px;
    text-align: left;
}

.nsm-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--g-gray-700);
    margin-bottom: 8px;
    line-height: 1.5;
}

    .nsm-item:last-child {
        margin-bottom: 0
    }

.nsm-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ds-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ═══ WHAT HAPPENS NEXT — light blue tint ═══ */
.next-section {
    background: var(--ds-navy-mid);
    padding: 56px 5%;
    border-top: none;
    border-bottom: none;
}

.next-inner {
    max-width: 1140px;
    margin: 0 auto
}

.next-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ds-orange);
    font-weight: 700;
    margin-bottom: 10px;
}

.next-h {
    font-family: "Poppins",sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 36px;
    line-height: 1.2;
}

.next-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 32px;
    position: relative
}

.ns {
    padding: 0
}

.ns-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(249,106,34,.15);
    border: 2px solid rgba(249,106,34,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins",sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--ds-orange);
    margin-bottom: 16px;
}

.ns h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px
}

.ns p {
    font-size: 13.5px;
    color: rgba(255,255,255,.5);
    line-height: 1.65
}

.ns-time {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-orange);
    background: rgba(249,106,34,.12);
    border-radius: var(--r100);
    padding: 3px 10px;
}

/* ═══ SECTION SHARED ═══ */
.risk-sec, .compare-sec, .process-sec, .testi-sec, .faq-sec, .inline-form-sec {
    padding: 80px 5%
}

.risk-sec {
    background: var(--white);
    border-bottom: 1px solid var(--g-gray-300)
}

.compare-sec {
    background: var(--g-gray-50);
    border-bottom: 1px solid var(--g-gray-300)
}

.process-sec {
    background: var(--ds-navy);
    border-bottom: none
}

    .process-sec .sec-h {
        color: #fff
    }

    .process-sec .sec-sub {
        color: rgba(255,255,255,.5)
    }

    .process-sec .sec-eyebrow {
        color: var(--ds-orange)
    }

.testi-sec {
    background: var(--g-gray-50);
    border-bottom: 1px solid var(--g-gray-300)
}

.faq-sec {
    background: var(--white);
    border-bottom: 1px solid var(--g-gray-300)
}

.inline-form-sec {
    background: var(--g-gray-50)
}

.sec-inner {
    max-width: 1140px;
    margin: 0 auto
}

.sec-eyebrow {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ds-orange);
    font-weight: 700;
    margin-bottom: 12px;
}

.sec-h {
    font-family: "Poppins",sans-serif;
    font-size: clamp(26px,2.8vw,38px);
    font-weight: 900;
    color: var(--g-gray-900);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 14px;
}

    .sec-h em {
        color: var(--g-red);
        font-style: normal
    }

.sec-sub {
    font-size: 16px;
    color: var(--g-gray-500);
    line-height: 1.7;
    max-width: 580px;
    margin-bottom: 48px
}

/* ═══ RISK CARDS ═══ */
.risk-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.risk-card {
    background: var(--white);
    border-radius: var(--r8);
    padding: 24px;
    border: 1px solid var(--g-gray-300);
    transition: box-shadow .2s,border-color .2s;
    position: relative;
    overflow: hidden;
}

    .risk-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--g-gray-300)
    }

    .risk-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--g-red);
    }

    .risk-card.upside::after {
        background: var(--g-green)
    }

.risk-icon {
    font-size: 24px;
    margin-bottom: 12px
}

.risk-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--g-gray-900);
    margin-bottom: 8px
}

.risk-card p {
    font-size: 13.5px;
    color: var(--g-gray-500);
    line-height: 1.65
}

/* ═══ COMPARISON TABLE ═══ */
.compare-wrap {
    overflow: auto;
    margin-top: 40px;
    border-radius: var(--r8);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--g-gray-300)
}

table.ct {
    width: 100%;
    border-collapse: collapse;
    min-width: 580px
}

.ct th {
    padding: 14px 20px;
    font-size: 12.5px;
    font-weight: 700;
    text-align: left
}

    .ct th:first-child {
        background: var(--g-gray-50);
        color: var(--g-gray-900)
    }

    .ct th.col-old {
        background: #fef3c7;
        color: #92400e
    }

    .ct th.col-new {
        background: var(--ds-orange);
        color: #fff
    }

        .ct th.col-new span {
            background: rgba(255,255,255,.2);
            color: #fff;
            border-radius: var(--r100);
            padding: 2px 10px;
            font-size: 10.5px;
            margin-left: 6px;
        }

.ct td {
    padding: 12px 20px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--g-gray-300)
}

.ct tr:last-child td {
    border-bottom: none
}

.ct tr:hover td {
    background: var(--g-gray-50)
}

.ct td:first-child {
    background: var(--g-gray-50);
    font-weight: 600;
    color: var(--g-gray-900)
}

.ct td.old {
    color: var(--g-gray-500)
}

.ct td.new {
    background: #fff5f0;
    font-weight: 500;
    color: var(--g-gray-900)
}

.no {
    color: var(--g-red);
    font-weight: 600
}

.yes {
    color: var(--g-green);
    font-weight: 600
}

/* ═══ PROCESS — white with blue accents ═══ */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 48px
}

.pg {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r8);
    padding: 24px;
    transition: background .2s,border-color .2s;
}

    .pg:hover {
        background: rgba(249,106,34,.1);
        border-color: rgba(249,106,34,.25)
    }

.pg-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-orange);
    letter-spacing: .08em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.pg h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px
}

.pg p {
    font-size: 13px;
    color: rgba(255,255,255,.45);
    line-height: 1.7
}

.pg-tag {
    display: inline-block;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.06);
    border-radius: var(--r100);
    padding: 3px 10px;
}

/* ═══ TESTIMONIALS ═══ */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-top: 44px
}

.tc {
    background: var(--white);
    border-radius: var(--r8);
    padding: 24px;
    border: 1px solid var(--g-gray-300);
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s;
}

    .tc:hover {
        box-shadow: var(--shadow-md)
    }

.tc-stars {
    color: var(--g-yellow);
    font-size: 13px;
    margin-bottom: 12px;
    letter-spacing: 1px
}

.tc-text {
    font-size: 14px;
    color: var(--g-gray-700);
    line-height: 1.75;
    flex: 1;
    font-style: italic;
    margin-bottom: 18px
}

.tc-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--g-gray-300)
}

.tc-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg,var(--ds-orange),var(--ds-orange-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.tc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--g-gray-900)
}

.tc-role {
    font-size: 11.5px;
    color: var(--g-gray-500);
    margin-top: 2px
}

.tc-badge {
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(52,168,83,.1);
    color: var(--g-green);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--r100);
    padding: 3px 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ═══ FAQ ═══ */
.faq-cols {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 64px;
    align-items: start
}

.faq-sticky {
    position: sticky;
    top: 80px
}

    .faq-sticky h3 {
        font-family: "Poppins",sans-serif;
        font-size: 26px;
        font-weight: 900;
        color: var(--g-gray-900);
        line-height: 1.15;
        margin-bottom: 12px;
        letter-spacing: -.02em
    }

    .faq-sticky p {
        font-size: 14px;
        color: var(--g-gray-500);
        line-height: 1.7;
        margin-bottom: 22px
    }

.faq-cta-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ds-orange);
    color: #fff;
    border: none;
    border-radius: var(--r4);
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s,box-shadow .15s;
}

    .faq-cta-mini:hover {
        background: var(--ds-orange-dark);
        box-shadow: 0 4px 14px rgba(249,106,34,.3)
    }

.faq-list {
    padding-top: 0
}

.faq-item {
    border-bottom: 1px solid var(--g-gray-300)
}

.faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--g-gray-900);
    gap: 16px;
    transition: color .15s;
}

    .faq-q:hover {
        color: var(--ds-orange)
    }

.faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--g-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--g-gray-500);
    flex-shrink: 0;
    transition: transform .3s,border-color .2s,background .2s;
    font-weight: 300;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    border-color: var(--ds-orange);
    background: var(--ds-orange);
    color: #fff;
}

.faq-ans {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease
}

.faq-item.open .faq-ans {
    max-height: 400px
}

.faq-ans p {
    font-size: 14px;
    color: var(--g-gray-500);
    line-height: 1.75;
    padding: 0 0 18px
}

/* ═══ BOTTOM CTA — blue strip ═══ */
.btm-cta {
    background: linear-gradient(135deg,var(--ds-navy) 0%,var(--ds-navy-mid) 100%);
    padding: 80px 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--ds-orange);
}

    .btm-cta::before {
        content: '';
        position: absolute;
        top: -150px;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 600px;
        background: radial-gradient(circle,rgba(249,106,34,.12) 0%,transparent 65%);
    }

.btm-inner {
    position: relative;
    z-index: 1
}

.btm-cta h2 {
    font-family: "Poppins",sans-serif;
    font-size: clamp(28px,3.5vw,44px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 16px;
}

    .btm-cta h2 em {
        color: var(--ds-orange);
        font-style: italic;
    }

.btm-cta p {
    font-size: 16px;
    color: rgba(255,255,255,.8);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.65;
}

.btm-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.btn-primary-lg {
    background: var(--ds-orange);
    color: #fff;
    border: none;
    border-radius: var(--r4);
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    transition: background .15s,box-shadow .15s,transform .12s;
}

    .btn-primary-lg:hover {
        background: var(--ds-orange-dark);
        box-shadow: 0 4px 20px rgba(249,106,34,.4);
        transform: translateY(-2px)
    }

.btn-ghost-lg {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: var(--r4);
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    transition: border-color .15s,background .15s;
}

    .btn-ghost-lg:hover {
        border-color: #fff;
        background: rgba(255,255,255,.08)
    }

.btm-reassure {
    margin-top: 20px;
    font-size: 12.5px;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

    .btm-reassure span::before {
        content: '✓ ';
        font-weight: 700;
        color: var(--ds-orange)
    }

/* ═══ SECOND FORM ═══ */
.inline-form-inner {
    max-width: 620px;
    margin: 0 auto
}

.form-card2 {
    background: var(--white);
    border-radius: var(--r8);
    box-shadow: var(--shadow-form);
    border: 1px solid var(--g-gray-300);
    overflow: hidden;
}

.form-card2-head {
    background: linear-gradient(135deg,var(--ds-orange),var(--ds-orange-dark));
    padding: 24px 28px;
}

    .form-card2-head h3 {
        font-family: "Poppins",sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .form-card2-head p {
        font-size: 13px;
        color: rgba(255,255,255,.75)
    }

.form-card2-body {
    padding: 28px
}

    .form-card2-body .step2-cta {
        margin-top: 8px
    }

/* ═══ MOBILE STICKY ═══ */
.mobile-sticky {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--ds-navy);
    border-top: 1px solid rgba(249,106,34,.3);
    padding: 10px 16px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.3);
}

.mobile-sticky-inner {
    display: flex;
    align-items: center;
    gap: 12px
}

.ms-text {
    flex: 1
}

    .ms-text strong {
        display: block;
        font-size: 13px;
        color: #fff;
        font-weight: 700
    }

    .ms-text span {
        font-size: 11px;
        color: rgba(255,255,255,.45)
    }

.ms-btn {
    background: var(--ds-orange);
    color: #fff;
    border: none;
    border-radius: var(--r4);
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══ EXIT MODAL ═══ */
.modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(32,33,36,.6);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .modal-bg.show {
        display: flex
    }

.modal {
    background: #fff;
    border-radius: var(--r8);
    padding: 0;
    max-width: 460px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.93)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.modal-head {
    background: var(--g-red);
    padding: 24px 24px 20px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

    .modal-close:hover {
        background: rgba(255,255,255,.3)
    }

.modal-head h3 {
    font-family: "Poppins",sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 5px;
}

.modal-head p {
    font-size: 12.5px;
    color: rgba(255,255,255,.75)
}

.modal-body {
    padding: 24px
}

    .modal-body p {
        font-size: 14px;
        color: var(--g-gray-500);
        line-height: 1.65;
        margin-bottom: 18px;
    }

.modal-email-row {
    display: flex;
    gap: 8px
}

    .modal-email-row .f-input {
        flex: 1
    }

.modal-submit {
    background: var(--ds-orange);
    color: #fff;
    border: none;
    border-radius: var(--r4);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s;
}

    .modal-submit:hover {
        background: var(--ds-orange-dark)
    }

.modal-skip {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--g-gray-500);
    background: none;
    border: none;
    transition: color .15s;
}

    .modal-skip:hover {
        color: var(--ds-orange)
    }

/* ═══ FOOTER ═══ */
footer {
    background: var(--ds-navy);
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 36px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.foot-logo {
    display: flex;
    flex-direction: column;
    gap: 0
}

.foot-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

    .foot-links a {
        font-size: 12.5px;
        color: rgba(255,255,255,.35);
        transition: color .15s
    }

        .foot-links a:hover {
            color: var(--ds-orange)
        }

.foot-copy {
    font-size: 11px;
    color: rgba(255,255,255,.22);
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 2px
}

/* ═══ CERTIFICATION BADGES ═══ */
.cert-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    animation: fadeUp .5s .35s both;
}

.cert-strip-label {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    font-weight: 600;
    width: 100%;
    margin-bottom: 4px;
}

.cert-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r8);
    padding: 10px 14px;
    transition: background .2s,border-color .2s;
}

    .cert-badge:hover {
        background: rgba(249,106,34,.12);
        border-color: rgba(249,106,34,.3)
    }

    .cert-badge img {
        height: 44px;
        width: auto;
        object-fit: contain;
        display: block;
    }

.cert-badge-text {
    line-height: 1.3
}

    .cert-badge-text strong {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #fff
    }

    .cert-badge-text span {
        font-size: 11px;
        color: rgba(255,255,255,.45)
    }
/* Nav badge images */
.nav-cert-imgs {
    display: flex;
    align-items: center;
    gap: 10px
}

    .nav-cert-imgs img {
        height: 32px;
        width: auto;
        object-fit: contain;
    }
/* Footer badge images */
.foot-certs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px
}

    .foot-certs img {
        height: 36px;
        width: auto;
        object-fit: contain;
        opacity: .85;
        transition: opacity .15s
    }

        .foot-certs img:hover {
            opacity: 1
        }

@media(max-width:991px) {
    .nav-cert-imgs {
        display: none;
    }
}
/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease,transform .55s ease
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0)
    }

.reveal-delay-1 {
    transition-delay: .08s
}

.reveal-delay-2 {
    transition-delay: .16s
}

.reveal-delay-3 {
    transition-delay: .24s
}

/* ═══════════════════════════════════════
   RESPONSIVE — FULL AUDIT
═══════════════════════════════════════ */

/* ── Tablet landscape: 1024px ── */
@media(max-width:1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        max-width: 600px;
        gap: 48px
    }

    .form-card {
        max-width: 600px
    }

    .testi-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .process-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .next-steps {
        grid-template-columns: repeat(3,1fr)
    }

    .faq-cols {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .faq-sticky {
        position: static
    }

    .risk-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

/* ── Tablet portrait: 900px ── */
@media(max-width:900px) {
    .testi-grid {
        grid-template-columns: 1fr
    }

    .risk-grid {
        grid-template-columns: 1fr
    }

    .next-steps {
        grid-template-columns: 1fr;
        gap: 24px
    }

        .next-steps::before {
            display: none
        }

    .ns {
        padding: 0
    }

    section, .risk-sec, .compare-sec, .process-sec, .testi-sec, .faq-sec, .inline-form-sec {
        padding: 64px 5%
    }

    .next-section {
        padding: 48px 5%
    }
}

/* ── Mobile: 768px ── */
@media(max-width:768px) {
    /* Nav */
    .nav {
        padding: 0 4%;
        height: auto !important
    }

    .nav-logo {
        font-size: 17px
    }

    .nav-cert-imgs {
        display: none
    }

    .nav-trust {
        display: none
    }

    .nav-btn {
        padding: 8px 16px;
        font-size: 13px;
        display: none
    }
    /* Urgency ticker */
    .ticker {
        font-size: 11.5px;
        padding: 8px 4%;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .ticker-cd {
        font-size: 12px
    }
    /* Hero */
    .hero {
        padding: 40px 4% 48px;
        border-bottom: 1px solid var(--g-gray-300)
    }

    .hero-inner {
        max-width: 100%;
        gap: 36px
    }

    .hero h1 {
        font-size: clamp(30px,7vw,42px);
        margin-bottom: 16px
    }

    .hero-sub {
        font-size: 15px;
        margin-bottom: 24px
    }

    .hero-eyebrow {
        font-size: 10.5px;
        margin-bottom: 16px
    }
    /* Cert badges — stack vertically */
    .cert-strip {
        gap: 10px;
        margin-bottom: 24px
    }

    .cert-strip-label {
        margin-bottom: 4px
    }

    .cert-badge {
        padding: 8px 12px;
        flex: 1;
        min-width: 140px
    }

        .cert-badge img {
            height: 36px
        }

    .cert-badge-text strong {
        font-size: 11px
    }

    .cert-badge-text span {
        font-size: 10px
    }
    /* Hero stats — 2x2 grid */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding-top: 20px;
    }

        .hero-stats > div[style*="width:1px"], .stat-divider {
            display: none
        }

    .h-stat-num {
        font-size: 24px
    }

    .h-stat-lbl {
        font-size: 11px
    }
    /* Proof logos */
    .proof-logos {
        margin-bottom: 24px
    }

    .logo-pill {
        font-size: 11.5px;
        padding: 6px 10px
    }
    /* Form */
    .form-card {
        max-width: 100%
    }

    .form-card-header {
        padding: 18px 20px 14px
    }

        .form-card-header h3 {
            font-size: 17px
        }

    .form-body {
        padding: 20px
    }

    .f-row {
        grid-template-columns: 1fr
    }

    .step1-cta, .step2-cta {
        font-size: 14px;
        padding: 12px
    }
    /* What happens next */
    .next-section {
        padding: 40px 4%
    }

    .next-h {
        font-size: 22px;
        margin-bottom: 28px
    }

    .ns-num {
        width: 40px;
        height: 40px;
        font-size: 17px
    }

    .ns h4 {
        font-size: 14px
    }

    .ns p {
        font-size: 12.5px
    }
    /* Sections */
    .risk-sec, .compare-sec, .process-sec, .testi-sec, .faq-sec, .inline-form-sec {
        padding: 52px 4%
    }

    .sec-h {
        font-size: clamp(22px,5.5vw,32px);
        margin-bottom: 12px
    }

    .sec-sub {
        font-size: 14.5px;
        margin-bottom: 36px
    }
    /* Risk cards */
    .risk-grid {
        grid-template-columns: 1fr
    }

    .risk-card {
        padding: 20px
    }
    /* Process */
    .process-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 36px
    }

    .pg {
        padding: 20px
    }
    /* Comparison table */
    .compare-wrap {
        border-radius: var(--r4)
    }

    .ct th, .ct td {
        padding: 10px 14px;
        font-size: 12.5px
    }
    /* Testimonials */
    .testi-grid {
        grid-template-columns: 1fr;
        margin-top: 32px
    }
    /* FAQ */
    .faq-cols {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .faq-sticky h3 {
        font-size: 22px
    }

    .faq-q {
        font-size: 14px;
        padding: 16px 0
    }

    .faq-ans p {
        font-size: 13.5px
    }
    /* Bottom CTA */
    .btm-cta {
        padding: 60px 4%
    }

        .btm-cta h2 {
            font-size: clamp(24px,6vw,36px)
        }

        .btm-cta p {
            font-size: 15px
        }

    .btm-btns {
        flex-direction: column;
        align-items: center
    }

    .btn-primary-lg, .btn-ghost-lg {
        width: 100%;
        max-width: 320px;
        text-align: center;
        padding: 14px 20px
    }

    .btm-reassure {
        gap: 12px;
        font-size: 11.5px
    }
    /* Second form */
    .form-card2-head {
        padding: 20px 22px
    }

        .form-card2-head h3 {
            font-size: 18px
        }

    .form-card2-body {
        padding: 22px
    }
    /* Mobile sticky bar */
    .mobile-sticky {
        display: block
    }

    body {
        padding-bottom: 72px
    }
    /* Footer */
    footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 4%;
        gap: 18px
    }

    .foot-certs img {
        height: 30px
    }

    .foot-links {
        gap: 14px
    }
    /* Exit modal */
    .modal-body {
        padding: 20px
    }

    .modal-head {
        padding: 20px
    }

    .modal-email-row {
        flex-direction: column
    }
}

/* ── Mobile small: 480px ── */
@media(max-width:480px) {
    .nav-logo {
        font-size: 16px
    }

    .nav-btn {
        padding: 7px 14px;
        font-size: 12.5px
    }

    .hero h1 {
        font-size: clamp(26px,8.5vw,36px)
    }

    .hero-sub {
        font-size: 14.5px
    }
    /* Cert badges full width on tiny screens */
    .cert-strip {
        flex-direction: column
    }

    .cert-badge {
        width: 100%
    }
    /* Stats — side by side still but tighter */
    .h-stat-num {
        font-size: 22px
    }

    .logo-row {
        gap: 6px
    }

    .logo-pill {
        font-size: 11px;
        padding: 5px 9px
    }

    .form-card-header h3 {
        font-size: 15px
    }

    .f-input {
        font-size: 13.5px;
        padding: 10px 11px
    }

    .ticker {
        font-size: 11px;
        padding: 7px 3%
    }

    .process-grid {
        gap: 10px
    }

    .pg {
        padding: 18px
    }

    .next-h {
        font-size: 20px
    }

    .sec-h {
        font-size: clamp(20px,6.5vw,28px)
    }

    .btm-cta {
        padding: 48px 4%
    }

    .btn-primary-lg, .btn-ghost-lg {
        font-size: 14.5px
    }
}

.text-danger {
    color: #e63946;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.input-validation-error {
    border-color: #e63946;
    box-shadow: 0 0 0 2px rgba(230,57,70,.15);

    .iti {
        z-index: 0
    }

        .iti .iti__flag-container .iti__selected-flag {
            width: -moz-fit-content;
            width: fit-content
        }

        .iti .iti__flag-container .iti__country-list:before, .iti .iti__flag-container .iti__country:before {
            content: none !important;
            width: 4px;
            height: calc(100% - 4px);
            position: absolute;
            background: none;
            left: 12px;
            top: 4px
        }

        .iti .iti__flag-container .iti__divider:before {
            content: none !important;
            background-image: none;
            border: none
        }

        .iti .iti__flag-container .iti__country-list {
            white-space: normal !important;
            max-height: 183px !important
        }

            .iti .iti__flag-container .iti__country-list .iti__country, .iti .iti__flag-container .iti__country-list .iti__divider {
                padding-left: 5px;
                margin-bottom: 5px
            }

                .iti .iti__flag-container .iti__country-list .iti__country .iti__country-name, .iti .iti__flag-container .iti__country-list .iti__country .iti__dial-code, .iti .iti__flag-container .iti__country-list .iti__divider .iti__country-name, .iti .iti__flag-container .iti__country-list .iti__divider .iti__dial-code {
                    font-size: 16px;
                    color: #050505
                }

    .contact-modal .country-number {
        width: 100%
    }

    .iti .iti__flag-container .iti__selected-flag {
        width: -moz-fit-content;
        width: fit-content
    }

    .iti .iti__flag-container .iti__country-list:before, .iti .iti__flag-container .iti__country:before {
        content: none !important;
        width: 4px;
        height: calc(100% - 4px);
        position: absolute;
        background: none;
        left: 12px;
        top: 4px
    }

    .iti .iti__flag-container .iti__divider:before {
        content: none !important;
        background-image: none;
        border: none
    }

    .iti .iti__flag-container .iti__country-list {
        white-space: normal !important
    }

        .iti .iti__flag-container .iti__country-list .iti__country, .iti .iti__flag-container .iti__country-list .iti__divider {
            padding-left: 5px;
            margin-bottom: 5px
        }

            .iti .iti__flag-container .iti__country-list .iti__country .iti__country-name, .iti .iti__flag-container .iti__country-list .iti__country .iti__dial-code, .iti .iti__flag-container .iti__country-list .iti__divider .iti__country-name, .iti .iti__flag-container .iti__country-list .iti__divider .iti__dial-code {
                font-size: 16px;
                color: #050505 !important
            }

    .iti--separate-dial-code .iti__selected-dial-code {
        margin-left: 6px;
        color: #050505 !important
    }
}