@media (max-width: 980px) {
            #pricing .kkw-price-card {
                grid-template-columns: 1fr !important;
                padding: 20px !important;
            }
            #pricing .kkw-price-card > div:first-child > div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }
        }

/* ===== Extracted style block ===== */

/* ================================================================
           KLERKIT — WOW REDESIGN v3.0
           Font: Plus Jakarta Sans
           Palette: Deep blue #0f172a · Brand blue #1d4ed8 · Sky #0ea5e9
           Numbers: 1 (single column focus) · 6 (trust badges) · 7 (steps)
           ================================================================ */

    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --blue-deep: #0f172a;
        --blue-brand: #1d4ed8;
        --blue-mid: #2563eb;
        --blue-light: #3b82f6;
        --blue-sky: #0ea5e9;
        --blue-pale: #eff6ff;
        --blue-border: #bfdbfe;
        --green: #22c55e;
        --green-pale: #f0fdf4;
        --green-border: #bbf7d0;
        --green-text: #15803d;
        --slate-900: #0f172a;
        --slate-700: #334155;
        --slate-500: #64748b;
        --slate-300: #cbd5e1;
        --slate-100: #f1f5f9;
        --slate-50: #f8fafc;
        --white: #ffffff;
        --radius-sm: 8px;
        --radius-md: 14px;
        --radius-lg: 22px;
        --radius-xl: 28px;
        --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
        --shadow-md: 0 4px 6px rgba(15,23,42,.04), 0 16px 40px rgba(15,23,42,.08);
        --shadow-lg: 0 8px 12px rgba(15,23,42,.05), 0 28px 64px rgba(15,23,42,.12);
        --shadow-blue: 0 8px 24px rgba(29,78,216,.28);
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 68px;
        font-size: 16px;
        overflow-x: hidden;
        max-width: 100%;
    }

    body {
        font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        background: var(--white);
        color: var(--slate-900);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        max-width: 100%;
    }

    section[id] {
        scroll-margin-top: 68px;
    }
    /* Non-hero sections: tight top padding so heading appears just below nav */
    #how > .kkw-container, #why > .kkw-container, #pricing > .kkw-container, #faq > .kkw-container {
        padding-top: 40px;
        padding-bottom: 80px;
    }

    #how {
        min-height: unset;
        height: auto;
    }

    /* ── SHARED LAYOUT ─────────────────────────────────────────── */
    .kkw-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

    .kkw-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 48px;
        width: 100%;
        position: relative;
        z-index: 2;
    }

    /* Dot grid reusable */
    .kkw-dotgrid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(29,78,216,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(29,78,216,.05) 1px, transparent 1px);
        background-size: 48px 48px;
        pointer-events: none;
        z-index: 0;
    }

    /* ── SHARED TYPOGRAPHY ─────────────────────────────────────── */
    .kkw-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 999px;
        border: 1px solid rgba(29,78,216,.18);
        background: rgba(29,78,216,.05);
        color: var(--blue-brand);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .01em;
        margin-bottom: 22px;
    }

    .kkw-eyebrow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 4px rgba(34,197,94,.2);
        flex-shrink: 0;
    }

    .kkw-h1 {
        font-size: clamp(52px, 6vw, 80px);
        line-height: .94;
        letter-spacing: -.065em;
        font-weight: 900;
        color: var(--slate-900);
    }

        .kkw-h1 .accent {
            display: block;
            background: linear-gradient(120deg, var(--blue-brand) 0%, var(--blue-sky) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

    .kkw-h2 {
        font-size: clamp(36px, 4vw, 54px);
        line-height: 1.0;
        letter-spacing: -.055em;
        font-weight: 900;
        color: var(--slate-900);
        margin-bottom: 16px;
    }

    .kkw-subline {
        font-size: clamp(19px, 2.2vw, 24px);
        font-weight: 700;
        color: var(--slate-700);
        line-height: 1.28;
        letter-spacing: -.025em;
        margin-bottom: 16px;
    }

        .kkw-subline .hi {
            color: var(--blue-brand);
        }

    .kkw-copy {
        font-size: 16px;
        color: var(--slate-500);
        line-height: 1.75;
        max-width: 500px;
    }

    /* ── BUTTONS ───────────────────────────────────────────────── */
    .kkw-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 14px 28px;
        border-radius: var(--radius-md);
        background: var(--blue-brand);
        color: var(--white);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s ease;
        box-shadow: var(--shadow-blue);
        white-space: nowrap;
        border: none;
    }

        .kkw-btn-primary:hover {
            color: var(--white);
            background: #1e40af;
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(29,78,216,.42);
        }

    .kkw-btn-ghost {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 14px 26px;
        border-radius: var(--radius-md);
        background: var(--white);
        color: var(--slate-700);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s ease;
        border: 1.5px solid var(--slate-300);
        white-space: nowrap;
    }

        .kkw-btn-ghost:hover {
            color: var(--blue-brand);
            border-color: var(--blue-border);
            background: var(--blue-pale);
            transform: translateY(-1px);
        }

    /* ================================================================
           NAVBAR
           ================================================================ */
    .kkw-nav {
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 68px;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(15,23,42,.07);
        box-shadow: 0 1px 0 rgba(15,23,42,.04);
    }

    .kkw-nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 48px;
        height: 68px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .kkw-nav-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        flex-shrink: 0;
        margin-right: 16px;
    }

    .kkw-nav-logomark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--blue-brand), var(--blue-sky));
        display: grid;
        place-items: center;
        color: var(--white);
        font-size: 15px;
        font-weight: 900;
        letter-spacing: -.03em;
        box-shadow: 0 4px 12px rgba(29,78,216,.3);
        flex-shrink: 0;
    }

    .kkw-nav-brandname {
        font-size: 18px;
        font-weight: 800;
        color: var(--slate-900);
        letter-spacing: -.03em;
    }

    .kkw-nav-links {
        display: flex;
        gap: 2px;
        margin: 0 auto;
    }

    .kkw-nav-link {
        padding: 7px 14px;
        border-radius: 9px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--slate-500);
        text-decoration: none;
        transition: all .15s;
        cursor: pointer;
    }

        .kkw-nav-link:hover {
            color: var(--slate-900);
            background: var(--slate-100);
        }

    .kkw-nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .kkw-nav-pdpa {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 13px;
        border-radius: 999px;
        background: var(--green-pale);
        border: 1px solid var(--green-border);
        color: var(--green-text);
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
    }

    /* Clean text lang switcher */
    .kkw-lang-switcher {
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }

    .kkw-lang-btn {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 6px;
        border: none;
        background: transparent;
        color: var(--slate-400);
        font-size: 13px;
        font-weight: 600;
        font-family: 'Plus Jakarta Sans', sans-serif;
        cursor: pointer;
        transition: all .15s ease;
        letter-spacing: .01em;
    }

    .kkw-lang-btn:hover {
        color: var(--slate-700);
    }

    .kkw-lang-btn.active {
        color: var(--slate-900);
        font-weight: 800;
    }

    .kkw-lang-sep {
        color: var(--slate-300);
        font-size: 13px;
        font-weight: 400;
        user-select: none;
        padding: 0 1px;
    }

    .kkw-nav-cta {
        padding: 9px 22px;
        border-radius: 11px;
        background: var(--blue-brand);
        color: var(--white);
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
        transition: all .18s;
        box-shadow: 0 4px 14px rgba(29,78,216,.3);
        cursor: pointer;
        border: none;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

        .kkw-nav-cta:hover {
            color: var(--white);
            background: #1e40af;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(29,78,216,.4);
        }

    @media (max-width: 991px) {
        .kkw-nav-links {
            display: none;
        }

        .kkw-nav-inner {
            padding: 0 24px;
        }
    }

    @media (max-width: 400px) {
        .kkw-nav-inner {
            padding: 0 12px;
            gap: 4px;
        }

        .kkw-nav-brand {
            margin-right: 6px;
        }

        .kkw-nav-brandname {
            font-size: 15px !important;
        }

        .kkw-lang-switcher {
            transform: scale(.82);
            transform-origin: right center;
        }

        .kkw-nav-cta {
            padding: 8px 13px;
            font-size: 12.5px;
        }
    }

    /* ================================================================
           HERO
           ================================================================ */
    #intro {
        background: radial-gradient(ellipse 70% 55% at 95% 15%, rgba(14,165,233,.12) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 5% 80%, rgba(29,78,216,.09) 0%, transparent 50%), linear-gradient(170deg, #f0f6ff 0%, #ffffff 45%, #fafbff 100%);
    }

    .kkw-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
    }

    /* Number 1 — single powerful headline block */
    .kkw-hero-number {
        position: absolute;
        top: 48px;
        left: -20px;
        font-size: 280px;
        font-weight: 900;
        color: rgba(29,78,216,.04);
        line-height: 1;
        letter-spacing: -.08em;
        pointer-events: none;
        user-select: none;
        z-index: 0;
    }

    .kkw-hero-left {
        position: relative;
        z-index: 1;
    }

    .kkw-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 32px 0 28px;
    }

    /* Number 6 — six trust badges */
    .kkw-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .kkw-trust-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--white);
        border: 1px solid rgba(15,23,42,.09);
        color: var(--slate-500);
        font-size: 12.5px;
        font-weight: 600;
        box-shadow: var(--shadow-sm);
    }

    .kkw-trust-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
    }

    .kkw-hero-note {
        margin-top: 18px;
        color: #94a3b8;
        font-size: 12.5px;
        font-weight: 500;
    }

    /* Store badges — Google Play / App Store (coming soon)
       Best position: under the hero trust chips, not under the dashboard.
       Why: the left side is the action/story area; the dashboard stays clean. */
    .kkw-store-badges {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 14px;
        padding: 8px;
        border-radius: 18px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(226,232,240,.92);
        box-shadow: 0 14px 38px rgba(15,23,42,.08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .kkw-store-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 156px;
        padding: 10px 14px 12px 13px;
        border-radius: 13px;
        background: #ffffff;
        color: #0f172a;
        border: 1px solid rgba(203,213,225,.75);
        cursor: not-allowed;
        user-select: none;
        box-shadow: 0 8px 22px rgba(15,23,42,.06);
        opacity: .96;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

        .kkw-store-badge:hover {
            transform: translateY(-1px);
            border-color: rgba(37,99,235,.28);
            box-shadow: 0 12px 28px rgba(15,23,42,.09);
        }

    .kkw-store-badge-icon {
        font-size: 27px;
        line-height: 1;
        width: 28px;
        text-align: center;
        color: #020617;
    }

    .kkw-store-badge-icon-google {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        display: inline-grid;
        place-items: center;
        font-size: 19px;
        color: #16a34a;
        background: linear-gradient(135deg,#ecfdf5,#eff6ff);
        border: 1px solid rgba(34,197,94,.18);
    }

    .kkw-store-badge-text {
        display: flex;
        flex-direction: column;
        line-height: 1.12;
    }

        .kkw-store-badge-text small {
            font-size: 9.5px;
            font-weight: 800;
            color: #475569;
            letter-spacing: .055em;
            text-transform: uppercase;
        }

        .kkw-store-badge-text strong {
            font-size: 17px;
            font-weight: 900;
            letter-spacing: -.035em;
            color: #0f172a;
        }

    .kkw-soon-tag {
        position: absolute;
        left: 46px;
        bottom: 6px;
        background: transparent;
        color: var(--blue-brand);
        font-size: 10.5px;
        font-weight: 900;
        letter-spacing: -.01em;
        text-transform: none;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        white-space: nowrap;
    }

    /* Hero right — dashboard */
    .kkw-hero-right {
        position: relative;
        overflow: visible;
    }

    @media (max-width: 767px) {
        .kkw-hero-right {
            overflow: hidden;
        }
    }

    .kkw-dashboard {
        background: var(--white);
        border-radius: var(--radius-xl);
        border: 1px solid rgba(15,23,42,.08);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }

    .kkw-dash-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        background: #fafbff;
        border-bottom: 1px solid var(--slate-100);
    }

    .kkw-dash-dots {
        display: flex;
        gap: 6px;
    }

    .kkw-dash-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .kkw-dash-label {
        font-size: 11.5px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .kkw-dash-live {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        background: var(--green-pale);
        border: 1px solid var(--green-border);
        color: var(--green-text);
        font-size: 11.5px;
        font-weight: 700;
    }

    .kkw-live-pulse {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        animation: kkwPulse 2s infinite;
    }

    @keyframes kkwPulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(34,197,94,.5);
        }

        50% {
            box-shadow: 0 0 0 6px rgba(34,197,94,0);
        }
    }

    .kkw-dash-body {
        padding: 22px;
    }

    .kkw-dash-heading {
        font-size: 20px;
        font-weight: 800;
        color: var(--slate-900);
        letter-spacing: -.03em;
        margin-bottom: 18px;
    }

    .kkw-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 18px;
    }

    .kkw-metric {
        padding: 14px;
        border-radius: 16px;
        background: var(--slate-50);
        border: 1px solid var(--slate-100);
    }

    .kkw-metric-label {
        font-size: 10.5px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 6px;
    }

    .kkw-metric-val {
        font-size: 15px;
        font-weight: 800;
        color: var(--slate-900);
        letter-spacing: -.02em;
    }

    .kkw-metric.profit {
        background: var(--green-pale);
        border-color: var(--green-border);
    }

        .kkw-metric.profit .kkw-metric-val {
            color: var(--green-text);
        }

    .kkw-tx-list {
        margin-bottom: 16px;
    }

    .kkw-tx {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid var(--slate-50);
        font-size: 13px;
        color: var(--slate-500);
        font-weight: 600;
    }

        .kkw-tx:last-child {
            border-bottom: none;
        }

    .kkw-tx-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .kkw-tx-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .kkw-tx-val {
        font-weight: 800;
        color: var(--slate-900);
        font-size: 13.5px;
    }

    .kkw-insight {
        display: flex;
        gap: 12px;
        padding: 14px;
        border-radius: 16px;
        background: var(--blue-pale);
        border: 1px solid var(--blue-border);
    }

    .kkw-insight-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--white);
        display: grid;
        place-items: center;
        color: var(--blue-brand);
        font-size: 15px;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(29,78,216,.12);
    }

    .kkw-insight-title {
        font-size: 13px;
        font-weight: 800;
        color: #1e3a8a;
        margin-bottom: 3px;
    }

    .kkw-insight-desc {
        font-size: 12px;
        color: #3b82f6;
        line-height: 1.5;
    }

    .kkw-float {
        position: absolute;
        background: var(--white);
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 18px;
        padding: 14px 18px;
        box-shadow: 0 10px 32px rgba(15,23,42,.12);
    }

    .kkw-float-top {
        top: -18px;
        right: -16px;
    }

    .kkw-float-val {
        font-size: 24px;
        font-weight: 900;
        color: var(--blue-brand);
        line-height: 1;
        letter-spacing: -.04em;
    }

    .kkw-float-lbl {
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        margin-top: 3px;
    }

    .kkw-video-cta {
        position: absolute;
        bottom: -22px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 8;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 18px 8px 8px;
        border-radius: 999px;
        background: var(--white);
        border: 1px solid rgba(15,23,42,.09);
        box-shadow: 0 6px 22px rgba(15,23,42,.1);
        cursor: pointer;
        white-space: nowrap;
        transition: all .2s;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

        .kkw-video-cta:hover {
            box-shadow: 0 10px 30px rgba(15,23,42,.16);
            transform: translateX(-50%) translateY(-2px);
        }

        .kkw-video-cta:hover .kkw-video-play {
            background: #cc0000;
        }

    .kkw-video-play {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #ff0000;
        display: grid;
        place-items: center;
        color: var(--white);
        font-size: 10px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(255,0,0,.35);
    }

    .kkw-video-main {
        font-size: 13px;
        font-weight: 700;
        color: var(--slate-900);
    }

    .kkw-video-sub {
        font-size: 11px;
        color: #94a3b8;
    }

    @media (max-width: 991px) {
        .kkw-hero-grid {
            grid-template-columns: 1fr;
            gap: 56px;
        }

        .kkw-hero-number {
            display: none;
        }

        .kkw-float-top {
            position: relative;
            inset: auto;
            margin: 12px 0;
        }

        #intro .kkw-container {
            padding-top: 80px;
            padding-bottom: 72px;
        }
    }

    @media (max-width: 767px) {
        .kkw-float-top {
            display: none;
        }

        .kkw-hero-right {
            padding-top: 0;
        }
    }

    @media (max-width: 575px) {
        .kkw-h1 {
            font-size: 48px;
        }

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

        .kkw-btn-primary, .kkw-btn-ghost {
            width: 100%;
            justify-content: center;
        }

        .kkw-metrics {
            grid-template-columns: 1fr 1fr;
        }

        .kkw-metric:last-child {
            grid-column: span 2;
        }
    }

    /* ================================================================
           SOLVE
           ================================================================ */
    #solve {
        background: var(--white);
        min-height: unset;
        height: auto !important;
        overflow: visible !important;
    }

        #solve > .kkw-container {
            padding-top: 38px !important;
            padding-bottom: 38px !important;
            display: block !important;
            height: auto !important;
        }

    .kkw-solve-head {
        margin: 0 auto 18px !important;
    }

        .kkw-solve-head .kkw-copy {
            margin: 0 auto;
            font-size: 13.5px;
        }

        .kkw-solve-head .kkw-h2 {
            font-size: clamp(22px, 2.6vw, 34px);
            margin-bottom: 6px;
        }

    /* 2x2 grid */
    .kkw-solve-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .kkw-scard {
        padding: 16px;
        border-radius: var(--radius-xl);
        background: var(--white);
        border: 1px solid #e8edf5;
        transition: all .22s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .kkw-scard-feature {
        padding: 18px;
        box-shadow: 0 16px 48px rgba(29,78,216,.22);
    }

        .kkw-scard-feature .kkw-scard-title {
            font-size: 15.5px;
        }

        .kkw-scard-feature .kkw-scard-desc {
            font-size: 12.5px;
        }

        .kkw-scard::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--blue-brand), var(--blue-sky));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease;
        }

        .kkw-scard:hover::before {
            transform: scaleX(1);
        }

        .kkw-scard:hover {
            border-color: var(--blue-border);
            transform: translateY(-3px);
            box-shadow: 0 16px 48px rgba(15,23,42,.10);
        }

        .kkw-scard.dark {
            background: linear-gradient(145deg, #1d4ed8, #1e40af);
            border-color: transparent;
            color: var(--white);
        }

            .kkw-scard.dark::before {
                background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.1));
            }

            .kkw-scard.dark:hover {
                box-shadow: 0 16px 48px rgba(29,78,216,.35);
            }

    .kkw-scard-num {
        font-size: 26px;
        font-weight: 900;
        color: rgba(29,78,216,.08);
        line-height: 1;
        letter-spacing: -.06em;
        margin-bottom: -4px;
        font-variant-numeric: tabular-nums;
    }

    .kkw-scard.dark .kkw-scard-num {
        color: rgba(255,255,255,.12);
    }

    .kkw-scard-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: var(--blue-pale);
        color: var(--blue-brand);
        display: grid;
        place-items: center;
        font-size: 13px;
        margin-bottom: 6px;
        flex-shrink: 0;
    }

    .kkw-scard.dark .kkw-scard-icon {
        background: rgba(255,255,255,.15);
        color: var(--white);
    }

    .kkw-scard-title {
        font-size: 13.5px;
        font-weight: 800;
        color: var(--slate-900);
        letter-spacing: -.02em;
        line-height: 1.3;
        margin-bottom: 5px;
    }

    .kkw-scard.dark .kkw-scard-title {
        color: var(--white);
    }

    .kkw-scard-desc {
        font-size: 12px;
        color: var(--slate-500);
        line-height: 1.5;
        margin-bottom: 8px;
        flex: none;
    }

    .kkw-scard.dark .kkw-scard-desc {
        color: rgba(255,255,255,.72);
    }

    .kkw-scard-result {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 999px;
        background: var(--green-pale);
        border: 1px solid var(--green-border);
        color: var(--green-text);
        font-size: 11.5px;
        font-weight: 700;
        margin-top: auto;
    }

    .kkw-scard.dark .kkw-scard-result {
        background: rgba(255,255,255,.15);
        border-color: rgba(255,255,255,.2);
        color: var(--white);
    }

    .kkw-solve-cta {
        margin-top: 12px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    @media (max-width: 767px) {
        #solve {
            height: auto;
            min-height: auto;
            overflow: visible;
        }

            #solve > .kkw-container {
                display: block;
            }

        .kkw-solve-grid {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
    }

    /* ================================================================
           HOW IT WORKS
           ================================================================ */
    #how {
        background: #fafbff;
    }

    .kkw-how-head {
        text-align: center;
        max-width: 580px;
        margin: 0 auto 56px;
    }

    /* Number 7 — seven visual steps shown as two rows */
    .kkw-how-shell {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 36px;
        align-items: start;
    }

    .kkw-how-rail {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: sticky;
        top: 88px;
    }

    .kkw-how-step {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 18px;
        background: transparent;
        border: 1px solid transparent;
        cursor: pointer;
        text-align: left;
        transition: all .2s ease;
        width: 100%;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

        .kkw-how-step:hover {
            background: var(--slate-50);
            border-color: rgba(15,23,42,.06);
        }

        .kkw-how-step.active {
            background: var(--blue-pale);
            border-color: var(--blue-border);
        }

    .kkw-step-dot {
        flex-shrink: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--slate-300);
        margin-top: 5px;
        transition: all .2s;
    }

    .kkw-how-step.active .kkw-step-dot {
        background: var(--blue-brand);
        box-shadow: 0 0 0 4px rgba(29,78,216,.2);
    }

    .kkw-step-no {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 3px;
    }

    .kkw-how-step.active .kkw-step-no {
        color: var(--blue-brand);
    }

    .kkw-step-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--slate-500);
        line-height: 1.38;
    }

    .kkw-how-step.active .kkw-step-title {
        color: var(--slate-900);
    }

    .kkw-step-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 7px;
    }

    .kkw-step-tag {
        padding: 3px 9px;
        border-radius: 999px;
        background: var(--slate-100);
        border: 1px solid rgba(15,23,42,.06);
        color: var(--slate-500);
        font-size: 11px;
        font-weight: 600;
    }

    .kkw-how-step.active .kkw-step-tag {
        background: #dbeafe;
        border-color: var(--blue-border);
        color: #1d4ed8;
    }

    .kkw-how-side-cta {
        margin-top: 20px;
        padding: 0 4px;
    }

    .kkw-how-side-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 16px;
        border-radius: 12px;
        background: var(--slate-50);
        border: 1px solid rgba(15,23,42,.08);
        color: var(--slate-500);
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        transition: all .18s;
    }

        .kkw-how-side-btn:hover {
            background: var(--blue-pale);
            border-color: var(--blue-border);
            color: var(--blue-brand);
        }

    /* Stage right */
    .kkw-how-stage {
        border-radius: var(--radius-xl);
        background: var(--white);
        border: 1px solid #e8edf5;
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .kkw-stage-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 14px 20px;
        background: var(--slate-50);
        border-bottom: 1px solid var(--slate-100);
    }

    .kkw-stage-bardot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .kkw-stage-url {
        flex: 1;
        padding: 5px 14px;
        border-radius: 8px;
        background: var(--white);
        border: 1px solid var(--slate-200, #e2e8f0);
        font-size: 12px;
        color: #94a3b8;
        font-weight: 500;
        text-align: center;
    }

    .kkw-stage-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 22px 16px;
        border-bottom: 1px solid var(--slate-100);
        background: #fafbff;
    }

    .kkw-stage-kicker {
        font-size: 11px;
        font-weight: 800;
        color: var(--blue-brand);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 4px;
    }

    .kkw-stage-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--slate-900);
        letter-spacing: -.02em;
    }

    .kkw-stage-note {
        font-size: 13px;
        color: #94a3b8;
        margin-top: 3px;
    }

    .kkw-stage-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 13px;
        border-radius: 999px;
        background: var(--blue-pale);
        border: 1px solid var(--blue-border);
        color: #1d4ed8;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .kkw-stage-body {
        padding: 20px 22px;
    }

    .kkw-stage-panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 18px;
    }

    .kkw-stage-panel {
        padding: 16px;
        border-radius: 14px;
        background: var(--slate-50);
        border: 1px solid rgba(15,23,42,.05);
    }

    .kkw-panel-label {
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 9px;
    }

    .kkw-panel-copy {
        font-size: 13px;
        color: var(--slate-500);
        line-height: 1.58;
    }

    .kkw-mini-list {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .kkw-mini-item {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 13px;
        font-weight: 600;
        color: #334155;
        line-height: 1.4;
    }

    .kkw-mini-check {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background: var(--green-pale);
        border: 1px solid var(--green-border);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--green-text);
        font-size: 10px;
    }

    .kkw-screen-wrap {
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(15,23,42,.06);
        background: var(--slate-50);
    }

    .kkw-screen {
        display: block;
        width: 100%;
        height: auto;
    }

    .kkw-screen-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(248,250,252,.45) 0%, transparent 35%);
        pointer-events: none;
    }

    .kkw-highlight {
        position: absolute;
        border: 2px solid rgba(29,78,216,.6);
        border-radius: 8px;
        background: rgba(29,78,216,.06);
        box-shadow: 0 0 0 4px rgba(29,78,216,.07);
        pointer-events: none;
        transition: all .38s cubic-bezier(.4,0,.2,1);
    }

    .kkw-stage-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--slate-100);
    }

    .kkw-progress {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    .kkw-progress-bar {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        background: var(--slate-100);
        overflow: hidden;
    }

    .kkw-progress-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--blue-brand), var(--blue-sky));
        transition: width .4s ease;
    }

    #kkwProgressText {
        font-size: 12px;
        font-weight: 600;
        color: #94a3b8;
        white-space: nowrap;
    }

    .kkw-nav-btns {
        display: flex;
        gap: 6px;
    }

    .kkw-nav-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(15,23,42,.1);
        background: var(--white);
        color: var(--slate-500);
        font-size: 16px;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: all .18s;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

        .kkw-nav-btn:hover {
            background: var(--blue-pale);
            border-color: var(--blue-border);
            color: var(--blue-brand);
        }

    @media (max-width: 1024px) {
        .kkw-how-shell {
            grid-template-columns: 260px 1fr;
            gap: 24px;
        }

        .kkw-how-rail {
            position: static;
        }
    }

    @media (max-width: 767px) {
        .kkw-how-shell {
            grid-template-columns: 1fr;
        }

        .kkw-stage-panels {
            grid-template-columns: 1fr;
        }
    }

    /* ================================================================
           WHY KLERKIT
           ================================================================ */
    #why {
        background: var(--white);
    }

    .kkw-why-head {
        text-align: center;
        max-width: 580px;
        margin: 0 auto 40px;
    }

    .kkw-why-tabs-row {
        display: flex;
        justify-content: center;
        margin-bottom: 28px;
    }

    .kkw-why-tabs {
        display: inline-flex;
        gap: 4px;
        padding: 5px;
        border-radius: 16px;
        background: var(--slate-50);
        border: 1px solid rgba(15,23,42,.07);
        box-shadow: var(--shadow-sm);
    }

    .kkw-why-tab {
        padding: 9px 22px;
        border-radius: 11px;
        border: none;
        background: transparent;
        color: var(--slate-500);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all .18s;
        white-space: nowrap;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

        .kkw-why-tab:hover {
            color: var(--slate-900);
            background: rgba(15,23,42,.04);
        }

        .kkw-why-tab.active {
            background: var(--blue-brand);
            color: var(--white);
            box-shadow: 0 3px 10px rgba(29,78,216,.3);
        }

    .kkw-why-panel {
        background: var(--white);
        border-radius: var(--radius-xl);
        border: 1px solid #e8edf5;
        padding: 32px;
        box-shadow: var(--shadow-md);
        max-width: 900px;
        margin: 0 auto;
    }

    .kkw-why-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-bottom: 28px;
    }

    .kkw-why-card {
        padding: 22px;
        border-radius: 18px;
        background: var(--slate-50);
        border: 1px solid rgba(15,23,42,.06);
        transition: all .2s;
    }

        .kkw-why-card:hover {
            background: var(--blue-pale);
            border-color: var(--blue-border);
        }

    .kkw-why-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        background: var(--blue-pale);
        color: var(--blue-brand);
        display: grid;
        place-items: center;
        font-size: 18px;
        margin-bottom: 14px;
    }

    .kkw-why-card:hover .kkw-why-icon {
        background: #dbeafe;
    }

    .kkw-why-card-title {
        font-size: 14.5px;
        font-weight: 800;
        color: var(--slate-900);
        margin-bottom: 7px;
        letter-spacing: -.02em;
        line-height: 1.3;
    }

    .kkw-why-card-desc {
        font-size: 13.5px;
        color: var(--slate-500);
        line-height: 1.58;
    }

    .kkw-why-btns {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    @media (max-width: 767px) {
        .kkw-why-grid {
            grid-template-columns: 1fr;
        }

        .kkw-why-tabs {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 575px) {
        .kkw-why-panel {
            padding: 20px;
        }

        .kkw-why-btns {
            flex-direction: column;
        }

            .kkw-why-btns .kkw-btn-primary, .kkw-why-btns .kkw-btn-ghost {
                width: 100%;
                justify-content: center;
            }
    }

    /* ================================================================
           PRICING
           ================================================================ */
    #pricing {
        background: radial-gradient(ellipse 60% 50% at 5% 50%, rgba(29,78,216,.07) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 98% 10%, rgba(34,197,94,.06) 0%, transparent 45%), #fafbff;
    }

    .kkw-price-head {
        text-align: center;
        max-width: 620px;
        margin: 0 auto 44px;
    }

        .kkw-price-head .kkw-copy {
            margin: 0 auto;
        }

    .kkw-price-card {
        max-width: 1040px;
        margin: 0 auto;
        background: var(--white);
        border: 1px solid #e8edf5;
        border-radius: var(--radius-xl);
        padding: 40px;
        display: grid;
        grid-template-columns: 1fr 230px;
        gap: 48px;
        align-items: center;
        box-shadow: var(--shadow-lg);
        position: relative;
        overflow: hidden;
    }

        .kkw-price-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--blue-brand), var(--blue-sky), var(--green));
        }

    .kkw-price-eyebrow {
        font-size: 11px;
        font-weight: 800;
        color: var(--blue-brand);
        text-transform: uppercase;
        letter-spacing: .14em;
        margin-bottom: 12px;
    }

    .kkw-price-title {
        font-size: clamp(28px, 3vw, 40px);
        font-weight: 900;
        color: var(--slate-900);
        letter-spacing: -.045em;
        line-height: 1.06;
        margin-bottom: 14px;
    }

    .kkw-price-copy {
        font-size: 15.5px;
        color: var(--slate-500);
        line-height: 1.62;
        margin-bottom: 24px;
        max-width: 580px;
    }

    .kkw-price-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .kkw-price-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        background: var(--slate-50);
        border: 1px solid #e2e8f0;
        color: #334155;
        font-size: 13px;
        font-weight: 700;
    }

    .kkw-price-tag-check {
        color: var(--green-text);
        font-weight: 800;
    }

    .kkw-price-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 32px 20px;
        border-radius: 22px;
        background: linear-gradient(165deg, #f0fdf4, #f8fafc);
        border: 1.5px solid var(--green-border);
        min-height: 150px;
    }

    .kkw-price-rm {
        font-size: 64px;
        font-weight: 950;
        color: var(--green-text);
        line-height: 1;
        letter-spacing: -.06em;
    }

    .kkw-price-note {
        font-size: 13px;
        font-weight: 700;
        color: #16a34a;
        margin-top: 9px;
    }

    .kkw-price-bottom {
        max-width: 1040px;
        margin: 16px auto 0;
        padding: 22px 32px;
        border-radius: 20px;
        background: var(--white);
        border: 1px solid #e8edf5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        box-shadow: var(--shadow-sm);
    }

    .kkw-price-more-title {
        font-size: 15px;
        font-weight: 800;
        color: var(--slate-900);
        margin-bottom: 8px;
    }

    .kkw-price-more-item {
        font-size: 14px;
        color: var(--slate-500);
        font-weight: 600;
        line-height: 1.8;
    }

    @media (max-width: 900px) {
        .kkw-price-card {
            grid-template-columns: 1fr;
            gap: 28px;
            padding: 28px;
        }

        .kkw-price-box {
            max-width: 260px;
        }

        .kkw-price-bottom {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    @media (max-width: 575px) {
        .kkw-price-card {
            padding: 24px;
            border-radius: var(--radius-lg);
        }

        .kkw-price-rm {
            font-size: 52px;
        }

        .kkw-btn-primary {
            width: 100%;
            justify-content: center;
        }
    }

    /* ================================================================
           FAQ
           ================================================================ */
    #faq {
        background: var(--white);
    }

    .kkw-faq-head {
        text-align: center;
        margin-bottom: 48px;
    }

    .kkw-faq-wrap {
        max-width: 800px;
        margin: 0 auto;
    }

    .kkw-faq-item {
        background: var(--white);
        border-radius: 18px;
        border: 1px solid #e8edf5;
        margin-bottom: 8px;
        overflow: hidden;
        transition: border-color .2s;
    }

        .kkw-faq-item.open {
            border-color: var(--blue-border);
            box-shadow: 0 4px 16px rgba(29,78,216,.07);
        }

    .kkw-faq-q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 700;
        color: var(--slate-900);
        gap: 12px;
        user-select: none;
    }

    .kkw-faq-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: var(--slate-100);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        transition: all .2s;
        color: var(--slate-500);
        font-size: 13px;
    }

    .kkw-faq-item.open .kkw-faq-icon {
        background: var(--blue-pale);
        color: var(--blue-brand);
        transform: rotate(45deg);
    }

    .kkw-faq-a {
        padding: 0 24px 20px;
        font-size: 14.5px;
        color: var(--slate-500);
        line-height: 1.72;
        display: none;
    }

    .kkw-faq-item.open .kkw-faq-a {
        display: block;
    }

    /* ================================================================
           FOOTER
           ================================================================ */
    .kkw-footer {
        background: var(--slate-900);
        padding: 64px 48px 32px;
    }

    .kkw-footer-inner {
        max-width: 1200px;
        margin: 0 auto;
    }

    .kkw-footer-top {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 64px;
        margin-bottom: 48px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .kkw-footer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 800;
        color: var(--white);
        letter-spacing: -.03em;
        margin-bottom: 14px;
    }

    .kkw-footer-logomark {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: linear-gradient(135deg, var(--blue-brand), var(--blue-sky));
        display: grid;
        place-items: center;
        color: var(--white);
        font-size: 14px;
        font-weight: 900;
        box-shadow: 0 4px 12px rgba(29,78,216,.4);
    }

    .kkw-footer-mission {
        font-size: 14px;
        line-height: 1.72;
        color: #64748b;
        max-width: 380px;
    }

    .kkw-footer-contact-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--white);
        margin-bottom: 14px;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .kkw-footer-contact-item {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        color: #64748b;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .kkw-footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12.5px;
        color: #475569;
    }

    @media (max-width: 767px) {
        .kkw-footer-top {
            grid-template-columns: 1fr;
            gap: 32px;
        }

        .kkw-footer {
            padding: 48px 24px 28px;
        }

        .kkw-footer-bottom {
            flex-direction: column;
            gap: 8px;
            text-align: center;
        }
    }

    /* ================================================================
           BACK TO TOP
           ================================================================ */
    .back-to-top {
        position: fixed !important;
        right: 28px;
        bottom: 28px;
        width: 46px !important;
        height: 46px !important;
        border-radius: 13px !important;
        background: var(--blue-brand) !important;
        border: none !important;
        box-shadow: 0 6px 20px rgba(29,78,216,.36) !important;
        display: grid !important;
        place-items: center;
        z-index: 999;
        transition: all .2s;
        color: var(--white) !important;
        font-size: 16px !important;
    }

        .back-to-top:hover {
            background: #1e40af !important;
            transform: translateY(-3px);
            box-shadow: 0 10px 28px rgba(29,78,216,.44) !important;
        }

    /* ================================================================
           VIDEO MODAL
           ================================================================ */
    .kkw-modal {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

        .kkw-modal.open {
            display: flex;
        }

    .kkw-modal-bg {
        position: absolute;
        inset: 0;
        background: rgba(2,6,23,.84);
        backdrop-filter: blur(14px);
    }

    .kkw-modal-shell {
        position: relative;
        z-index: 2;
        width: min(1080px, 94vw);
        border-radius: 24px;
        overflow: hidden;
        background: #0f172a;
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 40px 100px rgba(0,0,0,.5);
        animation: kkwModalPop .22s ease-out;
    }

    @keyframes kkwModalPop {
        from {
            opacity: 0;
            transform: scale(.96) translateY(14px);
        }

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

    .kkw-modal-hdr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 16px 22px;
        background: rgba(29,78,216,.28);
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .kkw-modal-kicker {
        color: #93c5fd;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .12em;
        margin-bottom: 3px;
    }

    .kkw-modal-hdr h3 {
        margin: 0;
        color: var(--white);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.03em;
    }

    .kkw-modal-hdr span {
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        color: #bfdbfe;
        font-size: 12px;
        font-weight: 700;
    }

    .kkw-modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        color: var(--white);
        background: rgba(15,23,42,.6);
        cursor: pointer;
        display: grid;
        place-items: center;
    }

        .kkw-modal-close:hover {
            background: rgba(239,68,68,.85);
        }

    .kkw-yt-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        background: #000;
    }

        .kkw-yt-wrap iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

    body.kkw-video-open {
        overflow: hidden;
    }

    /* ================================================================
           PILOT MODAL
           ================================================================ */
    .pilotModalCard {
        border-radius: 24px !important;
        border: 1px solid rgba(15,23,42,.08) !important;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(15,23,42,.18) !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .pilotModalHeader {
        padding: 24px 28px 0 !important;
        border-bottom: none !important;
        background: var(--white);
    }

    .pilotModalTitle {
        color: var(--slate-900) !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -.03em !important;
        margin-top: 8px !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
    }

    .pilotBadge {
        display: inline-flex;
        padding: 5px 12px;
        border-radius: 999px;
        background: #fef3c7;
        border: 1px solid #fde68a;
        color: #92400e;
        font-size: 12px;
        font-weight: 700;
    }

    .pilotModalBody, .pilotModalBodyCompact {
        padding: 20px 28px 28px !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .pilotLead {
        color: var(--slate-500);
        font-size: 14.5px;
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .pilotIndustryGridCompact {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .pilotIndustryCardCompact {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
        background: var(--slate-50);
        border: 1px solid rgba(15,23,42,.07);
    }

    .pilotIndustryIconCompact {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: var(--blue-pale);
        color: var(--blue-brand);
        font-size: 16px;
    }

    .pilotIndustryTitleCompact {
        color: var(--slate-900);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
    }

    .pilotIndustryDescCompact {
        color: var(--slate-500);
        font-size: 12px;
        line-height: 1.5;
    }

    .pilotDividerCompact {
        height: 1px;
        background: var(--slate-100);
        margin: 16px 0;
    }

    .pilotSectionLabel {
        color: #94a3b8;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 12px;
    }

    .pilotValueListCompact {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 18px;
    }

    .pilotValueRowCompact {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 13.5px;
        color: #334155;
        line-height: 1.5;
    }

        .pilotValueRowCompact i {
            color: var(--blue-brand);
            font-size: 16px;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .pilotValueRowCompact strong {
            color: var(--slate-900);
            font-weight: 700;
        }

    .pilotCtaStack {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pilotBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 20px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: all .18s;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .pilotBtnPrimary {
        background: var(--blue-brand);
        color: var(--white);
        box-shadow: 0 4px 12px rgba(29,78,216,.28);
    }

        .pilotBtnPrimary:hover {
            background: #1e40af;
            color: var(--white);
            transform: translateY(-1px);
        }

    .pilotBtnGhost {
        background: var(--slate-50);
        color: var(--slate-500);
        border: 1px solid rgba(15,23,42,.1) !important;
    }

        .pilotBtnGhost:hover {
            background: var(--slate-100);
            color: var(--slate-900);
        }

    @media (max-width: 575px) {
        .pilotIndustryGridCompact {
            grid-template-columns: 1fr;
        }

        .pilotModalHeader {
            padding: 20px 20px 0 !important;
        }

        .pilotModalBody, .pilotModalBodyCompact {
            padding: 16px 20px 20px !important;
        }

        .pilotCtaStack {
            flex-direction: column;
        }

        .pilotBtn {
            width: 100%;
        }
    }

    /* ── RESPONSIVE CONTAINERS ─────────────────────────────────── */
    @media (max-width: 991px) {
        .kkw-container {
            padding: 52px 32px;
        }

        .kkw-section {
            min-height: auto;
        }
    }

    @media (max-width: 575px) {
        .kkw-container {
            padding: 56px 20px;
        }

        .kkw-h2 {
            font-size: 36px;
        }
    }




    /* ================================================================
           KLERKIT FINAL DROP-IN FIX
           Requirement:
           - Any nav/banner/title anchor click goes to the top of that section
           - Section heading stays just under the sticky navbar
           - No section vertical-centering gap
           - Remove duplicated "See how KlerkIt works" gap between sections
           ================================================================ */

    :root {
        --kkw-nav-height: 68px;
        --kkw-section-top-gap: 18px;
        --kkw-section-bottom-gap: 46px;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--kkw-nav-height) !important;
    }

    body {
        overflow-x: hidden;
    }

    #top,
    section[id],
    footer[id] {
        scroll-margin-top: var(--kkw-nav-height) !important;
    }

    /* Stop old .kkw-section from centering every page vertically */
    .kkw-section,
    #solve.kkw-section,
    #how.kkw-section,
    #why.kkw-section,
    #pricing.kkw-section,
    #faq.kkw-section {
        display: flex !important;
        align-items: flex-start !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hero fills exactly one full screen */
    #intro.kkw-section {
        display: flex !important;
        align-items: center !important;
        min-height: calc(100vh - 68px) !important;
        height: calc(100vh - 68px) !important;
        overflow: hidden !important;
    }

    /* All content starts near the top after clicking anchor */
    #intro > .kkw-container,
    #solve > .kkw-container,
    #how > .kkw-container,
    #why > .kkw-container,
    #pricing > .kkw-container,
    #faq > .kkw-container {
        padding-top: var(--kkw-section-top-gap) !important;
        padding-bottom: var(--kkw-section-bottom-gap) !important;
        height: auto !important;
        display: block !important;
    }

    /* Hero can breathe slightly more because it is the first section */
    #intro > .kkw-container {
        padding-top: 44px !important;
        padding-bottom: 56px !important;
    }

    /* Problems We Solve */
    #solve {
        min-height: auto !important;
        height: auto !important;
        padding-top: 0 !important;
        background: #fff !important;
    }

    .kkw-solve-head {
        margin: 0 auto 16px !important;
    }

        .kkw-solve-head .kkw-eyebrow {
            margin-bottom: 14px !important;
        }

        .kkw-solve-head .kkw-h2 {
            font-size: clamp(24px, 2.4vw, 34px) !important;
            line-height: 1.05 !important;
            margin-bottom: 8px !important;
        }

    .kkw-solve-grid {
        gap: 10px !important;
    }

    /* This CTA was creating the confusing gap before How It Works */
    .kkw-solve-cta {
        display: none !important;
    }

    /* How It Works */
    #how {
        min-height: auto !important;
        height: auto !important;
        padding-top: 0 !important;
        background: #fafbff !important;
    }

    .kkw-how-head {
        margin: 0 auto 22px !important;
    }

        .kkw-how-head .kkw-eyebrow {
            margin-bottom: 14px !important;
        }

    #how .kkw-h2 {
        font-size: clamp(26px, 3vw, 36px) !important;
        line-height: .96 !important;
        margin-bottom: 8px !important;
        white-space: nowrap !important;
    }

    .kkw-how-shell {
        gap: 24px !important;
    }

    .kkw-how-rail {
        top: calc(var(--kkw-nav-height) + 20px) !important;
    }

    /* Why KlerkIt */
    #why {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .kkw-why-head {
        margin: 0 auto 20px !important;
    }

        .kkw-why-head .kkw-eyebrow {
            margin-bottom: 14px !important;
        }

    #why .kkw-h2 {
        font-size: clamp(34px, 3.8vw, 46px) !important;
        line-height: 1.02 !important;
        margin-bottom: 8px !important;
    }

    .kkw-why-tabs-row {
        margin-bottom: 18px !important;
    }

    .kkw-why-panel {
        padding: 24px !important;
    }

    .kkw-why-grid {
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    /* Pricing / FAQ */
    .kkw-price-head,
    .kkw-faq-head {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    #pricing .kkw-h2,
    #faq .kkw-h2 {
        font-size: clamp(34px, 3.8vw, 46px) !important;
        line-height: 1.02 !important;
    }

    /* Active nav look */
    .kkw-nav-link:hover,
    .kkw-nav-link.active {
        color: var(--slate-900) !important;
        background: var(--slate-100) !important;
    }

    /* Mobile keeps readable spacing */
    @media (max-width: 767px) {
        : root

    {
        --kkw-section-top-gap: 22px;
        --kkw-section-bottom-gap: 42px;
    }

    #intro > .kkw-container,
    #solve > .kkw-container,
    #how > .kkw-container,
    #why > .kkw-container,
    #pricing > .kkw-container,
    #faq > .kkw-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .kkw-solve-grid,
    .kkw-how-shell,
    .kkw-why-grid {
        grid-template-columns: 1fr !important;
    }

    #how .kkw-h2,
    #why .kkw-h2,
    #pricing .kkw-h2,
    #faq .kkw-h2 {
        font-size: 28px !important;
        line-height: 1.02 !important;
    }

    #how .kkw-h2 {
        white-space: normal !important;
    }

    }

    /* SHOW Problems CTA again */
    #solve .kkw-solve-cta {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

        #solve .kkw-solve-cta .kkw-btn-primary {
            display: inline-flex !important;
        }

    /* =====================================================
       PRICING BOTTOM CTA WOW
       ===================================================== */

    .kkw-price-bottom-wow {
        max-width: 1040px !important;
        margin: 16px auto 0 !important;
        padding: 22px 28px !important;
        border-radius: 22px !important;
        background: radial-gradient(circle at 90% 20%, rgba(29,78,216,.08), transparent 34%), linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
        border: 1px solid rgba(191,219,254,.9) !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.08), 0 4px 12px rgba(29,78,216,.06) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
    }

    .kkw-freecase-left {
        min-width: 0;
    }

    .kkw-freecase-title {
        font-size: 18px;
        font-weight: 900;
        color: var(--slate-900);
        letter-spacing: -.035em;
        margin-bottom: 5px;
    }

    .kkw-freecase-sub {
        font-size: 14px;
        font-weight: 600;
        color: var(--slate-500);
        line-height: 1.55;
    }

    .kkw-freecase-action {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        flex-shrink: 0;
    }

    .kkw-start-free-btn {
        min-width: 178px;
        justify-content: center;
        padding: 15px 26px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        box-shadow: 0 14px 28px rgba(29,78,216,.26), 0 4px 10px rgba(29,78,216,.18) !important;
    }

        .kkw-start-free-btn i {
            font-size: 16px;
        }

    .kkw-more-cases-line {
        font-size: 13.5px;
        color: #64748b;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
    }

        .kkw-more-cases-line a {
            color: #2563eb;
            font-weight: 800;
            text-decoration: none;
        }

            .kkw-more-cases-line a:hover {
                text-decoration: underline;
            }

    /* Mobile */
    @media (max-width: 767px) {
        .kkw-price-bottom-wow {
            flex-direction: column !important;
            align-items: stretch !important;
            text-align: center !important;
            padding: 22px !important;
        }

        .kkw-freecase-action {
            align-items: stretch !important;
        }

        .kkw-start-free-btn {
            width: 100% !important;
        }

        .kkw-more-cases-line {
            text-align: center !important;
            white-space: normal !important;
            line-height: 1.5;
        }
    }

    /* =====================================================
       PILOT MODAL — FRIENDLY EMAIL VERSION
       ===================================================== */

    .pilotMiniHero {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 22px;
        padding: 20px;
        border-radius: 20px;
        background: radial-gradient(circle at 95% 10%, rgba(34,197,94,.12), transparent 34%), linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
        border: 1px solid rgba(191,219,254,.9);
        box-shadow: 0 10px 28px rgba(15,23,42,.05);
        margin-bottom: 18px;
    }

    .pilotMiniKicker {
        font-size: 11px;
        font-weight: 900;
        color: #1d4ed8;
        letter-spacing: .12em;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .pilotMiniTitle {
        font-size: 22px;
        font-weight: 900;
        color: #0f172a;
        letter-spacing: -.045em;
        margin-bottom: 6px;
    }

    .pilotMiniCopy {
        font-size: 14px;
        line-height: 1.6;
        color: #64748b;
        max-width: 520px;
    }

    .pilotMiniBadge {
        width: 138px;
        min-width: 138px;
        height: 118px;
        border-radius: 20px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .pilotMiniBadgeBig {
        font-size: 50px;
        line-height: 1;
        font-weight: 950;
        color: #15803d;
        letter-spacing: -.06em;
    }

    .pilotMiniBadgeSmall {
        margin-top: 6px;
        font-size: 12.5px;
        font-weight: 800;
        color: #15803d;
        text-align: center;
    }

    .pilotCtaStackWow {
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid #e8edf5;
    }

        .pilotCtaStackWow .pilotBtnPrimary {
            min-width: 240px;
            box-shadow: 0 14px 30px rgba(29,78,216,.25), 0 4px 10px rgba(29,78,216,.14) !important;
        }

        .pilotCtaStackWow .pilotBtnGhost {
            min-width: 130px;
        }

    @media (max-width: 767px) {
        .pilotMiniHero {
            flex-direction: column;
            align-items: flex-start;
        }

        .pilotMiniBadge {
            width: 100%;
            min-width: 0;
            height: auto;
            padding: 18px;
        }

        .pilotCtaStackWow {
            flex-direction: column;
        }

            .pilotCtaStackWow .pilotBtn {
                width: 100%;
            }
    }

    /* ================================================================
       
    CTA WOW PATCH
       ================================================================ */

    .kkw-hero-actions-wow {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin: 32px 0 12px !important;
    }

    .kkw-btn-primary-wow {
        min-height: 56px;
        padding: 0 30px !important;
        border-radius: 16px !important;
        font-size: 15.5px !important;
        box-shadow: 0 14px 34px rgba(29,78,216,.34) !important;
    }

        .kkw-btn-primary-wow i {
            font-size: 15px;
        }

    .kkw-btn-demo-wow {
        min-height: 56px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 8px 20px 8px 9px;
        border-radius: 999px;
        background: rgba(255,255,255,.86);
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 10px 28px rgba(15,23,42,.10);
        color: var(--slate-900);
        font-family: 'Plus Jakarta Sans', sans-serif;
        cursor: pointer;
        transition: all .2s ease;
        white-space: nowrap;
    }

        .kkw-btn-demo-wow:hover {
            transform: translateY(-2px);
            border-color: var(--blue-border);
            box-shadow: 0 16px 38px rgba(15,23,42,.16);
            background: #fff;
        }

    .kkw-demo-play {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--slate-900);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 11px;
        flex-shrink: 0;
    }

        .kkw-demo-play i {
            margin-left: 2px;
        }

    .kkw-demo-main {
        display: block;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.02em;
    }

    .kkw-demo-sub {
        display: block;
        margin-top: 3px;
        font-size: 11.5px;
        font-weight: 600;
        color: #94a3b8;
        line-height: 1.1;
    }

    .kkw-hero-microcopy {
        margin-bottom: 26px;
        font-size: 12.5px;
        font-weight: 600;
        color: #94a3b8;
    }

    @media (max-width: 575px) {
        .kkw-hero-actions-wow

    {
        flex-direction: column;
        align-items: stretch;
    }

    .kkw-btn-primary-wow,
    .kkw-btn-demo-wow {
        width: 100%;
        justify-content: center;
    }

    .kkw-btn-demo-wow {
        border-radius: 16px;
    }

    .kkw-hero-microcopy {
        text-align: center;
    }

    }

    /* ================================================================
       HOW IT WORKS V2 — Animated Timeline
    ================================================================ */
    .kkw-how-shell-v2 {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 28px;
        align-items: start;
    }

    .kkw-how-rail-v2 {
        position: sticky;
        top: 88px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .kkw-how-step-v2 {
        width: 100%;
        display: flex;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 18px;
        border: 1px solid transparent;
        background: transparent;
        text-align: left;
        cursor: pointer;
        font-family: 'Plus Jakarta Sans', sans-serif;
        transition: all .22s ease;
    }

        .kkw-how-step-v2:hover {
            background: #f8fafc;
            border-color: rgba(15,23,42,.08);
        }

        .kkw-how-step-v2.active {
            background: #eff6ff;
            border-color: #bfdbfe;
            box-shadow: 0 10px 26px rgba(29,78,216,.08);
        }

    .kkw-step-dot-v2 {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #cbd5e1;
        margin-top: 7px;
        flex-shrink: 0;
    }

    .kkw-how-step-v2.active .kkw-step-dot-v2 {
        background: #1d4ed8;
        box-shadow: 0 0 0 5px rgba(29,78,216,.16);
    }

    .kkw-how-step-v2 strong {
        display: block;
        color: #334155;
        font-size: 14px;
        line-height: 1.35;
    }

    .kkw-how-step-v2.active strong {
        color: #0f172a;
    }

    .kkw-how-step-v2 small {
        display: block;
        margin-top: 5px;
        color: #94a3b8;
        font-size: 12px;
        font-weight: 600;
    }

    .kkw-how-stage-v2 {
        overflow: hidden;
        border-radius: 28px;
        background: #fff;
        border: 1px solid #e8edf5;
        box-shadow: 0 18px 50px rgba(15,23,42,.08);
    }

    .kkw-stage-browser {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 14px 20px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

        .kkw-stage-browser > span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

            .kkw-stage-browser > span:nth-child(1) {
                background: #fb7185;
            }

            .kkw-stage-browser > span:nth-child(2) {
                background: #fbbf24;
            }

            .kkw-stage-browser > span:nth-child(3) {
                background: #22c55e;
            }

    #kkwStageUrl {
        flex: 1;
        padding: 6px 14px;
        border-radius: 9px;
        background: #fff;
        border: 1px solid #e2e8f0;
        text-align: center;
        color: #94a3b8;
        font-size: 12px;
        font-weight: 600;
    }

    .kkw-stage-content-v2 {
        padding: 24px;
    }

    .kkw-stage-main-v2 {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        align-items: flex-start;
        margin-bottom: 20px;
    }

        .kkw-stage-main-v2 h3 {
            margin: 0;
            font-size: 26px;
            font-weight: 900;
            letter-spacing: -.04em;
            color: #0f172a;
        }

        .kkw-stage-main-v2 p {
            margin: 7px 0 0;
            max-width: 560px;
            font-size: 14px;
            color: #64748b;
            line-height: 1.65;
        }

    .kkw-io-grid {
        display: grid;
        grid-template-columns: 1fr 180px 1fr;
        gap: 14px;
        align-items: stretch;
        margin-bottom: 18px;
    }

    .kkw-io-card {
        padding: 18px;
        border-radius: 20px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .kkw-io-label {
        font-size: 11px;
        font-weight: 900;
        color: #94a3b8;
        letter-spacing: .12em;
        margin-bottom: 12px;
    }

    .kkw-io-card ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kkw-io-card li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 10px;
        font-size: 13.5px;
        font-weight: 700;
        color: #334155;
        line-height: 1.45;
    }

        .kkw-io-card li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: #16a34a;
            font-weight: 900;
        }

    .kkw-ai-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 20px;
        background: linear-gradient(145deg, #1d4ed8, #0ea5e9);
        color: #fff;
        text-align: center;
        padding: 18px;
        box-shadow: 0 14px 32px rgba(29,78,216,.25);
    }

    .kkw-ai-orb {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.18);
        box-shadow: 0 0 0 8px rgba(255,255,255,.08);
        animation: kkwAiPulse 2.4s infinite;
    }

    @keyframes kkwAiPulse {
        0%, 100%

    {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    }

    .kkw-ai-card strong {
        font-size: 14px;
        font-weight: 900;
    }

    .kkw-ai-card span {
        font-size: 11.5px;
        opacity: .82;
        line-height: 1.4;
    }

    .kkw-thumb-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin-bottom: 22px;
    }

    .kkw-thumb {
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #fff;
        padding: 8px;
        cursor: pointer;
        transition: all .2s ease;
        font-family: 'Plus Jakarta Sans', sans-serif;
        position: relative;
    }

        .kkw-thumb:hover,
        .kkw-thumb.active {
            border-color: #60a5fa;
            background: #eff6ff;
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(29,78,216,.12);
        }

        .kkw-thumb img {
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
            border-radius: 10px;
            background: #f1f5f9;
            display: block;
        }

        .kkw-thumb span {
            display: block;
            margin-top: 7px;
            font-size: 11.5px;
            font-weight: 800;
            color: #64748b;
            text-align: center;
        }

        .kkw-thumb.active span {
            color: #1d4ed8;
        }

    .kkw-thumb-zoom {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: rgba(15,23,42,.55);
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        cursor: pointer;
        z-index: 2;
        border: none;
        transition: background .15s;
    }

    .kkw-thumb:hover .kkw-thumb-zoom {
        display: flex;
    }

    .kkw-thumb-zoom:hover {
        background: rgba(29,78,216,.85);
    }

    /* Lightbox modal */
    .kkw-lightbox {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    .kkw-lightbox.open {
        display: flex;
    }

    .kkw-lightbox-bg {
        position: absolute;
        inset: 0;
        background: rgba(2,6,23,.88);
        backdrop-filter: blur(12px);
        cursor: pointer;
    }

    .kkw-lightbox-shell {
        position: relative;
        z-index: 2;
        width: min(1000px, 92vw);
        border-radius: 20px;
        overflow: hidden;
        background: #0f172a;
        border: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 40px 100px rgba(0,0,0,.6);
        animation: kkwModalPop .2s ease-out;
    }

    .kkw-lightbox-hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        background: rgba(29,78,216,.2);
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .kkw-lightbox-hdr span {
        color: #93c5fd;
        font-size: 13px;
        font-weight: 700;
    }

    .kkw-lightbox-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255,255,255,.1);
        border: none;
        color: #fff;
        cursor: pointer;
        display: grid;
        place-items: center;
        font-size: 14px;
        transition: background .15s;
    }

    .kkw-lightbox-close:hover {
        background: rgba(239,68,68,.8);
    }

    .kkw-lightbox-img {
        width: 100%;
        display: block;
        object-fit: contain;
        max-height: 80vh;
        background: #1e293b;
    }

    .kkw-timeline {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 6px 4px;
    }

    .kkw-timeline-line,
    .kkw-timeline-fill {
        position: absolute;
        left: 18px;
        right: 18px;
        top: 50%;
        height: 3px;
        border-radius: 999px;
        transform: translateY(-50%);
    }

    .kkw-timeline-line {
        background: #e2e8f0;
    }

    .kkw-timeline-fill {
        right: auto;
        width: 0%;
        background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
        transition: width .38s cubic-bezier(.4,0,.2,1);
    }

    .kkw-time-dot {
        position: relative;
        z-index: 2;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: #fff;
        display: grid;
        place-items: center;
        cursor: pointer;
    }

        .kkw-time-dot span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #cbd5e1;
            transition: all .22s ease;
        }

        .kkw-time-dot.active span {
            background: #1d4ed8;
            box-shadow: 0 0 0 7px rgba(29,78,216,.16);
        }

    @media (max-width: 991px) {
        .kkw-how-shell-v2

    {
        grid-template-columns: 1fr;
    }

    .kkw-how-rail-v2 {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .kkw-io-grid {
        grid-template-columns: 1fr;
    }

    .kkw-thumb-row {
        grid-template-columns: repeat(2, 1fr);
    }

    }

    @media (max-width: 575px) {
        .kkw-how-rail-v2

    {
        grid-template-columns: 1fr;
    }

    .kkw-stage-main-v2 {
        flex-direction: column;
    }

    .kkw-thumb-row {
        grid-template-columns: 1fr;
    }

    }


    /* ================================================================
       MOBILE LANDING OVERRIDE — one page, desktop stays current.
       Mobile visitors can view only and see app coming soon.
       ================================================================ */
    .kkw-mobile-owner-preview,
    .kkw-mobile-app-only {
        display: none;
    }

    @media (max-width: 767px) {
        .kkw-nav {
            height: 62px !important;
        }

        .kkw-nav-inner {
            height: 62px !important;
            padding: 0 16px !important;
        }

        .kkw-nav-brandname {
            font-size: 17px !important;
        }

        .kkw-lang-switcher {
            transform: scale(.92);
            transform-origin: right center;
        }

        #intro {
            min-height: auto !important;
        }

        #intro .kkw-container {
            padding-top: 28px !important;
            padding-bottom: 40px !important;
        }

        #intro .kkw-hero-grid {
            display: block !important;
            grid-template-columns: 1fr !important;
            gap: 0 !important;
        }

        #intro .kkw-eyebrow {
            margin-bottom: 14px !important;
            font-size: 11.5px !important;
            padding: 6px 11px !important;
        }

        #intro .kkw-h1 {
            font-size: 42px !important;
            line-height: .98 !important;
            letter-spacing: -.055em !important;
        }

        #intro .kkw-subline {
            font-size: 18px !important;
            margin-top: 12px !important;
            margin-bottom: 8px !important;
        }

        #intro .kkw-copy {
            font-size: 14px !important;
            line-height: 1.55 !important;
            max-width: 100% !important;
            margin-top: 8px !important;
        }

        /* Mobile must not register from landing */
        #intro .kkw-hero-actions,
        #intro .kkw-hero-microcopy,
        #intro .kkw-trust,
        #intro .kkw-hero-note,
        #intro .kkw-hero-right {
            display: none !important;
        }

        /* Hide desktop app badges on mobile and show mobile-specific app CTA */
        #intro .kkw-store-badges {
            display: none !important;
        }

        .kkw-mobile-owner-preview,
        .kkw-mobile-app-only {
            display: block !important;
        }

        .kkw-mobile-owner-preview {
            margin: 22px 0 18px !important;
            border-radius: 30px;
            padding: 10px;
            background: linear-gradient(145deg, #0f172a, #1e3a8a);
            box-shadow: 0 22px 52px rgba(15,23,42,.22);
        }

        .kkw-mobile-phone-screen {
            border-radius: 24px;
            background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
            padding: 16px;
            overflow: hidden;
        }

        .kkw-mobile-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            color: #64748b;
            font-size: 11px;
            font-weight: 800;
        }

        .kkw-mobile-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
        }

        .kkw-mobile-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
        }

        .kkw-mobile-title {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: -.04em;
            color: #0f172a;
            margin-bottom: 12px;
        }

        .kkw-mobile-cash-card {
            padding: 16px;
            border-radius: 20px;
            background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
            color: #fff;
            box-shadow: 0 14px 30px rgba(29,78,216,.28);
            margin-bottom: 12px;
        }

        .kkw-mobile-cash-label {
            font-size: 11px;
            font-weight: 800;
            opacity: .78;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .kkw-mobile-cash-value {
            font-size: 30px;
            font-weight: 900;
            letter-spacing: -.05em;
            margin-top: 4px;
        }

        .kkw-mobile-cash-sub {
            font-size: 12px;
            opacity: .85;
            margin-top: 6px;
            font-weight: 700;
        }

        .kkw-mobile-mini-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 12px;
        }

        .kkw-mobile-mini {
            border: 1px solid rgba(15,23,42,.08);
            background: #fff;
            border-radius: 16px;
            padding: 12px;
        }

        .kkw-mobile-mini span {
            display: block;
            font-size: 10.5px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .kkw-mobile-mini strong {
            display: block;
            margin-top: 4px;
            font-size: 16px;
            font-weight: 900;
            color: #0f172a;
            letter-spacing: -.035em;
        }

        .kkw-mobile-alert {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            border-radius: 18px;
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            padding: 12px;
            color: #1e3a8a;
        }

        .kkw-mobile-alert i {
            width: 30px;
            height: 30px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #fff;
            color: #1d4ed8;
            box-shadow: 0 8px 16px rgba(29,78,216,.12);
            flex-shrink: 0;
        }

        .kkw-mobile-alert strong {
            display: block;
            font-size: 13px;
            font-weight: 900;
            color: #0f172a;
            margin-bottom: 2px;
        }

        .kkw-mobile-alert span {
            display: block;
            font-size: 12px;
            line-height: 1.45;
            color: #2563eb;
            font-weight: 600;
        }

        .kkw-mobile-app-only {
            margin-top: 18px !important;
            text-align: center;
        }

        .kkw-mobile-app-copy {
            font-size: 12.5px;
            line-height: 1.55;
            font-weight: 700;
            color: #64748b;
            margin: 0 auto 12px;
            max-width: 290px;
        }

        .kkw-mobile-app-only .kkw-store-badge {
            display: inline-flex !important;
            width: 100%;
            max-width: 260px;
            justify-content: center;
            padding: 12px 18px;
            cursor: not-allowed;
        }

        .kkw-mobile-no-register {
            margin-top: 10px;
            font-size: 11.5px;
            color: #94a3b8;
            font-weight: 700;
        }
    }

/* ===== Extracted style block ===== */

/* ================= KlerkIt Hero WOW — One Screen Version ================= */
.kkw-hero-wow {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 72px);
    padding: 28px 0 20px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse 70% 55% at 92% 8%,rgba(37,99,235,.16),transparent 58%),
        radial-gradient(ellipse 52% 42% at 6% 78%,rgba(14,165,233,.12),transparent 55%),
        linear-gradient(170deg,#f3f8ff 0%,#ffffff 48%,#f8fbff 100%);
}

.kkw-hero-wow:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(30,64,175,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(30,64,175,.055) 1px,transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 10%,#000,transparent);
    pointer-events: none;
}

.kkw-hero-wrap {
    width: min(1160px,calc(100% - 40px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .98fr 1.02fr;
    gap: 58px;
    align-items: center;
}

/* Right-side vertical section-progress rail -- same markup/class names and
   behaviour as Landing1.cshtml's ".rail" (fixed center-right, active dot
   grows/darkens on scroll), reused as-is for visual consistency between the
   two public landing pages. */
.rail {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: grid;
    gap: 10px;
}

.rail a {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(11,99,255,.22);
    transition: .2s;
}

.rail a.active {
    height: 30px;
    border-radius: 999px;
    background: #0b63ff;
}

@media (max-width: 991px) {
    .rail { display: none; }
}

.kkw-hero-number {
    position: absolute;
    top: -20px;
    left: -22px;
    font-size: 210px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.09em;
    color: rgba(37,99,235,.045);
    user-select: none;
    pointer-events: none;
}

.kkw-pill-wow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid rgba(37,99,235,.22);
    background: rgba(239,246,255,.82);
    color: #1d4ed8;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 850;
    box-shadow: 0 10px 30px rgba(37,99,235,.08);
    backdrop-filter: blur(10px);
}

.kkw-pill-wow span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34,197,94,.13);
}

.kkw-hero-title {
    margin: 10px 0 0;
    font-size: clamp(38px,4.6vw,64px);
    line-height: .88;
    letter-spacing: -.075em;
    font-weight: 950;
    color: #0f172a;
}

.kkw-hero-title .blue {
    display: block;
    color: #2563eb;
    text-shadow: 0 18px 45px rgba(37,99,235,.18);
}

.kkw-hero-sub {
    margin-top: 10px;
    font-size: clamp(17px,1.7vw,24px);
    line-height: 1.18;
    letter-spacing: -.04em;
    font-weight: 900;
    color: #111827;
}

.kkw-hero-copy {
    margin-top: 8px;
    max-width: 560px;
    font-size: 15.5px;
    line-height: 1.65;
    color: #64748b;
    font-weight: 520;
}

.kkw-hero-copy strong {
    color: #1e293b;
    font-weight: 850;
}

.kkw-actions-wow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.kkw-btn-main-wow,
.kkw-btn-sub-wow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 14.5px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.kkw-btn-main-wow {
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    box-shadow: 0 18px 38px rgba(37,99,235,.28);
}

.kkw-btn-sub-wow {
    color: #1e293b;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(148,163,184,.36);
    box-shadow: 0 12px 28px rgba(15,23,42,.07);
}

.kkw-btn-main-wow:hover,
.kkw-btn-sub-wow:hover {
    transform: translateY(-2px);
}

.kkw-micro-wow {
    margin-top: 7px;
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 800;
}

.kkw-flow-wow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.kkw-flow-wow span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 900;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
    box-shadow: 0 8px 20px rgba(15,23,42,.055);
}

.kkw-flow-wow span:first-child {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.kkw-flow-wow span:nth-child(2) {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.kkw-store-wow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.kkw-store-badge-wow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 145px;
    padding: 7px 11px;
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(203,213,225,.85);
    box-shadow: 0 14px 32px rgba(15,23,42,.08);
    opacity: .82;
}

.kkw-store-badge-wow i {
    font-size: 24px;
    color: #0f172a;
}

.kkw-store-badge-wow small {
    display: block;
    font-size: 8.5px;
    line-height: 1;
    color: #64748b;
    font-weight: 800;
}

.kkw-store-badge-wow strong {
    display: block;
    margin-top: 2px;
    font-size: 15.5px;
    line-height: 1;
    color: #0f172a;
    font-weight: 950;
}

.kkw-soon-wow {
    position: absolute;
    right: 9px;
    bottom: -8px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 950;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.kkw-store-badge-live {
    border: 1px solid rgba(37,99,235,.22);
    opacity: 1;
    cursor: pointer;
}

.kkw-store-badge-live:hover {
    transform: translateY(-2px);
    border-color: rgba(37,99,235,.45);
    box-shadow: 0 18px 38px rgba(29,78,216,.16);
}

.kkw-play-modal-card {
    border: 0;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 34px 90px rgba(15,23,42,.30);
}

.kkw-play-modal-head {
    position: relative;
    padding: 30px 32px 20px;
    background:
        radial-gradient(circle at 8% 0%, rgba(34,197,94,.20), transparent 36%),
        radial-gradient(circle at 92% 8%, rgba(37,99,235,.16), transparent 32%),
        linear-gradient(135deg,#eff6ff 0%,#ffffff 52%,#ecfdf5 100%);
    border-bottom: 1px solid rgba(226,232,240,.88);
}

.kkw-play-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #15803d;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kkw-play-title {
    margin: 14px 0 8px;
    color: #0f172a;
    font-size: clamp(30px,4vw,44px);
    line-height: .98;
    letter-spacing: -.058em;
    font-weight: 950;
}

.kkw-play-copy {
    max-width: 640px;
    color: #475569;
    font-size: 15px;
    line-height: 1.62;
    font-weight: 650;
}

.kkw-play-body {
    padding: 24px 32px 30px;
    background: #ffffff;
}

.kkw-play-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 13px 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.kkw-play-state-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kkw-play-state-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    flex-shrink: 0;
}

.kkw-play-state strong {
    display: block;
    font-size: 13px;
    font-weight: 950;
    color: #0f172a;
}

.kkw-play-state span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    color: #64748b;
}

.kkw-play-state-badge {
    flex-shrink: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    border: 1px solid #bbf7d0;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.kkw-play-steps {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.kkw-play-step {
    position: relative;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg,#ffffff,#f8fafc);
    box-shadow: 0 10px 28px rgba(15,23,42,.045);
}

.kkw-play-step b {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 11px;
    border-radius: 999px;
    color: #fff;
    background: #2563eb;
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 10px 20px rgba(37,99,235,.22);
}

.kkw-play-step strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -.02em;
}

.kkw-play-step span {
    display: block;
    color: #64748b;
    font-size: 12.8px;
    line-height: 1.45;
    font-weight: 650;
}

.kkw-play-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
}

.kkw-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 17px;
    font-weight: 950;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.kkw-play-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.kkw-play-btn-primary {
    color: #fff;
    background: linear-gradient(135deg,#1d4ed8,#2563eb);
    box-shadow: 0 16px 34px rgba(29,78,216,.28);
}

.kkw-play-btn-primary:hover { color: #fff; }

.kkw-play-btn-ghost {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.kkw-play-btn-ghost:hover {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #93c5fd;
}

.kkw-play-btn-muted {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.kkw-play-minirow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kkw-play-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #475569;
    font-size: 12.5px;
    font-weight: 750;
}

.kkw-play-note i {
    color: #16a34a;
    margin-right: 6px;
}

.kkw-play-toast {
    display: none;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
}

.kkw-play-toast.show { display: block; }

.kkw-play-route {
    display: grid;
    grid-template-columns: 1fr 42px 1fr;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
}

.kkw-play-route-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 96px;
    padding: 17px 18px;
    border-radius: 22px;
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg,#ffffff,#f8fbff);
    box-shadow: 0 14px 34px rgba(15,23,42,.055);
}

.kkw-play-route-num {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg,#1d4ed8,#2563eb);
    box-shadow: 0 12px 24px rgba(37,99,235,.24);
    font-size: 15px;
    font-weight: 950;
    flex-shrink: 0;
}

.kkw-play-route-card strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: -.025em;
}

.kkw-play-route-card span {
    display: block;
    color: #64748b;
    font-size: 12.8px;
    line-height: 1.42;
    font-weight: 700;
}

.kkw-play-route-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kkw-play-route-line:before {
    content: '';
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,#bfdbfe,#22c55e,#bfdbfe);
}

.kkw-play-route-line span {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 7px rgba(34,197,94,.12);
    animation: kkwPlayPing 1.9s ease-in-out infinite;
}

@keyframes kkwPlayPing {
    0%,100% { transform: translateX(-12px); opacity: .72; }
    50% { transform: translateX(12px); opacity: 1; }
}

.kkw-play-actions-two {
    grid-template-columns: 1fr 1fr;
}

.kkw-play-note-clean {
    margin-top: 12px;
    background: #f8fafc;
    border-style: solid;
}

.kkw-play-title,
.kkw-play-copy,
.kkw-play-state span,
.kkw-play-step span,
.kkw-play-toast {
    overflow-wrap: break-word;
    word-break: break-word;
}

#klerkitPlayAccessModal .modal-dialog {
    max-width: 700px;
}

@media (max-width: 720px) {
    .kkw-play-steps,
    .kkw-play-minirow,
    .kkw-play-route,
    .kkw-play-actions-two { grid-template-columns: 1fr; }
    .kkw-play-route-line { display: none; }
    .kkw-play-modal-head,
    .kkw-play-body { padding-left: 20px; padding-right: 20px; }
    .kkw-play-title { font-size: 30px; }
    .kkw-play-state { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 576px) {
    #klerkitPlayAccessModal .modal-dialog {
        margin: 8px auto;
        max-width: calc(100% - 16px);
        width: calc(100% - 16px);
    }
    .kkw-play-modal-head,
    .kkw-play-body { padding-left: 16px; padding-right: 16px; }
    .kkw-play-title { font-size: 24px; }
    .kkw-play-copy { font-size: 13.5px; }
    .kkw-play-btn { font-size: 13px; padding: 12px 12px; min-height: 46px; }
}

.kkw-trust-wow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-width: 560px;
}

.kkw-trust-wow span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(226,232,240,.95);
    color: #64748b;
    font-size: 11.5px;
    font-weight: 850;
    box-shadow: 0 8px 20px rgba(15,23,42,.045);
}

.kkw-trust-wow span:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
}

/* Dashboard */
.kkw-hero-visual-wow {
    position: relative;
}

.kkw-live-card-wow {
    position: absolute;
    top: -24px;
    right: -10px;
    z-index: 4;
    padding: 15px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 22px 55px rgba(15,23,42,.13);
    backdrop-filter: blur(12px);
}

.kkw-live-card-wow strong {
    display: block;
    font-size: 25px;
    line-height: 1;
    color: #2563eb;
    font-weight: 950;
}

.kkw-live-card-wow span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 800;
}

.kkw-dashboard-wow {
    position: relative;
    border-radius: 28px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.88);
    box-shadow: 0 32px 80px rgba(15,23,42,.16);
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.kkw-dash-top-wow {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: linear-gradient(180deg,#f8fafc,#ffffff);
    border-bottom: 1px solid #eef2f7;
}

.kkw-dots-wow {
    display: flex;
    gap: 8px;
}

.kkw-dots-wow span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.kkw-dots-wow span:nth-child(1) { background: #ff5f57; }
.kkw-dots-wow span:nth-child(2) { background: #febc2e; }
.kkw-dots-wow span:nth-child(3) { background: #28c840; }

.kkw-dash-title-wow {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 950;
}

.kkw-live-mini-wow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #16a34a;
    font-weight: 900;
}

.kkw-live-mini-wow:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34,197,94,.12);
}

.kkw-dash-body-wow {
    padding: 16px 20px 18px;
}

.kkw-dash-heading-wow {
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.035em;
    color: #0f172a;
    font-weight: 950;
}

.kkw-health-wow {
    margin-top: 10px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg,#ecfdf5,#ffffff);
    border: 1px solid #bbf7d0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.kkw-health-wow div:first-child strong {
    display: block;
    font-size: 13.5px;
    color: #15803d;
    font-weight: 950;
}

.kkw-health-wow div:first-child span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 750;
}

.kkw-health-score-wow {
    font-size: 25px;
    font-weight: 950;
    color: #16a34a;
}

.kkw-metrics-wow {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 10px;
}

.kkw-metric-wow {
    padding: 10px 12px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.kkw-metric-wow.hot {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.kkw-metric-wow.safe {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.kkw-metric-wow label {
    display: block;
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 950;
}

.kkw-metric-wow strong {
    display: block;
    margin-top: 7px;
    font-size: 16.5px;
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -.03em;
}

.kkw-metric-wow.safe strong {
    color: #15803d;
}

.kkw-pulse-list-wow {
    display: grid;
    gap: 0;
    margin-top: 10px;
}

.kkw-pulse-row-wow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid #eef2f7;
}

.kkw-pulse-left-wow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #475569;
    font-size: 13px;
    font-weight: 850;
}

.kkw-pulse-dot-wow {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.kkw-pulse-value-wow {
    font-size: 13px;
    color: #0f172a;
    font-weight: 950;
}

.kkw-risk-wow {
    margin-top: 9px;
    display: grid;
    gap: 7px;
}

.kkw-risk-item-wow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.kkw-risk-item-wow.blue {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.kkw-risk-icon-wow {
    width: 32px;
    height: 32px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #fff;
    color: #f59e0b;
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

.kkw-risk-item-wow.blue .kkw-risk-icon-wow {
    color: #2563eb;
}

.kkw-risk-text-wow strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    font-weight: 950;
}

.kkw-risk-text-wow span {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #64748b;
    font-weight: 700;
}

.kkw-phone-wow {
    display: none;
}


/* Business Pulse automation preview — mobile/web upload -> dashboard -> ledger-ready reports */
.kkw-automation-visual-wow {
    perspective: 1200px;
}

.kkw-automation-visual-wow:before {
    content: "";
    position: absolute;
    inset: -36px -40px -34px -36px;
    background:
        radial-gradient(circle at 18% 14%, rgba(37,99,235,.18), transparent 34%),
        radial-gradient(circle at 82% 70%, rgba(34,197,94,.16), transparent 38%),
        linear-gradient(135deg, rgba(239,246,255,.64), rgba(255,255,255,0));
    filter: blur(2px);
    pointer-events: none;
}

.kkw-automation-visual-wow .kkw-live-card-wow {
    top: -21px;
    right: -6px;
    animation: kkwFloatBadge 4.6s ease-in-out infinite;
}

.kkw-auto-dashboard-wow {
    min-height: 478px;
    transform: rotateY(-5deg) rotateX(2deg);
    transform-origin: center;
    overflow: visible;
}

.kkw-auto-dashboard-wow:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37,99,235,.54), rgba(34,197,94,.36), rgba(255,255,255,.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.kkw-auto-dashboard-wow:after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -22px;
    height: 36px;
    border-radius: 999px;
    background: rgba(37,99,235,.16);
    filter: blur(20px);
    z-index: -1;
}

.kkw-auto-ingest-wow {
    display: grid;
    grid-template-columns: 1fr 1fr .42fr 1fr;
    align-items: center;
    gap: 9px;
    padding: 14px 18px 0;
}

.kkw-source-pill-wow,
.kkw-ai-core-wow {
    position: relative;
    min-height: 62px;
    border-radius: 18px;
    background: rgba(255,255,255,.9);
    border: 1px solid #dbeafe;
    box-shadow: 0 14px 35px rgba(15,23,42,.08);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    overflow: hidden;
}

.kkw-source-pill-wow:after,
.kkw-ai-core-wow:after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
    animation: kkwScanLight 3.7s ease-in-out infinite;
}

.kkw-source-pill-wow.web:after { animation-delay: .6s; }
.kkw-ai-core-wow:after { animation-delay: 1.15s; }

.kkw-source-icon-wow,
.kkw-ai-icon-wow {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
}

.kkw-source-pill-wow.mobile .kkw-source-icon-wow {
    color: #16a34a;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.kkw-source-copy-wow strong,
.kkw-ai-copy-wow strong {
    display: block;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.1;
}

.kkw-source-copy-wow span,
.kkw-ai-copy-wow span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.kkw-auto-arrow-wow {
    position: relative;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,#93c5fd,#22c55e);
    box-shadow: 0 0 0 5px rgba(37,99,235,.06);
}

.kkw-auto-arrow-wow:before,
.kkw-auto-arrow-wow:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2563eb;
    transform: translateY(-50%);
    animation: kkwDataDot 2.4s linear infinite;
}

.kkw-auto-arrow-wow:after {
    animation-delay: 1.2s;
    background: #22c55e;
}

.kkw-ai-core-wow {
    background: linear-gradient(135deg,#eff6ff,#ffffff 58%,#ecfdf5);
    border-color: #bfdbfe;
}

.kkw-ai-icon-wow {
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#0ea5e9);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 10px 22px rgba(37,99,235,.25);
    animation: kkwPulseCore 2.2s ease-in-out infinite;
}

.kkw-auto-title-row-wow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.kkw-auto-title-row-wow .kkw-dash-heading-wow {
    max-width: 330px;
}

.kkw-ledger-ready-pill-wow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    color: #15803d;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 10px 20px rgba(34,197,94,.10);
}

.kkw-auto-progress-wow {
    display: grid;
    gap: 8px;
    margin-top: 11px;
    padding: 11px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.kkw-auto-progress-row-wow {
    display: grid;
    grid-template-columns: 118px 1fr 38px;
    align-items: center;
    gap: 9px;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

.kkw-auto-bar-wow {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.kkw-auto-bar-wow span {
    display: block;
    height: 100%;
    width: var(--w, 88%);
    border-radius: inherit;
    background: linear-gradient(90deg,#2563eb,#22c55e);
    animation: kkwBarGrow 2.8s ease-in-out infinite alternate;
}

.kkw-report-strip-wow {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-top: 11px;
}

.kkw-report-card-wow {
    position: relative;
    overflow: hidden;
    min-height: 70px;
    border-radius: 17px;
    padding: 11px 10px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    box-shadow: 0 10px 24px rgba(15,23,42,.055);
}

.kkw-report-card-wow:before {
    content: "";
    position: absolute;
    top: -24px;
    right: -20px;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: rgba(37,99,235,.10);
}

.kkw-report-card-wow:nth-child(2):before { background: rgba(14,165,233,.12); }
.kkw-report-card-wow:nth-child(3):before { background: rgba(34,197,94,.12); }
.kkw-report-card-wow:nth-child(4):before { background: rgba(245,158,11,.14); }

.kkw-report-card-wow b {
    display: block;
    color: #0f172a;
    font-size: 17px;
    letter-spacing: -.03em;
    font-weight: 950;
}

.kkw-report-card-wow span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: #15803d;
    font-size: 10px;
    font-weight: 950;
}

.kkw-report-card-wow span:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
}

.kkw-auto-pack-wow {
    margin-top: 9px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.kkw-auto-pack-wow .kkw-risk-item-wow {
    margin: 0;
    padding: 9px 10px;
    min-height: 70px;
}

.kkw-auto-pack-wow .kkw-risk-text-wow strong {
    font-size: 12.5px;
}

.kkw-auto-pack-wow .kkw-risk-text-wow span {
    font-size: 10.8px;
}

.kkw-auto-pack-wow .kkw-risk-icon-wow {
    width: 30px;
    height: 30px;
    border-radius: 12px;
}

.kkw-auto-pack-wow .green {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.kkw-auto-pack-wow .green .kkw-risk-icon-wow {
    color: #16a34a;
}

@keyframes kkwFloatBadge {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes kkwScanLight {
    0%, 45% { transform: translateX(-130%); }
    75%, 100% { transform: translateX(130%); }
}

@keyframes kkwDataDot {
    from { left: 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    to { left: calc(100% - 8px); opacity: 0; }
}

@keyframes kkwPulseCore {
    0%,100% { transform: scale(1); box-shadow: 0 10px 22px rgba(37,99,235,.25); }
    50% { transform: scale(1.06); box-shadow: 0 14px 30px rgba(37,99,235,.34), 0 0 0 8px rgba(37,99,235,.08); }
}

@keyframes kkwBarGrow {
    from { width: calc(var(--w, 88%) - 10%); }
    to { width: var(--w, 88%); }
}

@media(max-width:1100px) {
    .kkw-auto-dashboard-wow { transform: none; }
    .kkw-auto-ingest-wow { grid-template-columns: 1fr 1fr; }
    .kkw-auto-arrow-wow { display: none; }
    .kkw-ai-core-wow { grid-column: 1 / -1; }
}

/* Mobile */
@media(max-width:900px) {
    .kkw-automation-visual-wow { display: none; }

    .kkw-hero-wow {
        min-height: auto;
        max-height: none;
        overflow: hidden;
        align-items: flex-start;
        padding: 62px 0 46px;
    }

    .kkw-hero-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(100% - 28px,620px);
    }

    .kkw-hero-number {
        font-size: 150px;
        top: -15px;
    }

    .kkw-hero-title {
        font-size: 48px;
    }

    .kkw-hero-sub {
        font-size: 22px;
    }

    .kkw-hero-copy {
        font-size: 15px;
    }

    .kkw-hero-visual-wow {
        display: none;
    }

    .kkw-phone-wow {
        display: block;
        margin-top: 22px;
        border-radius: 28px;
        padding: 13px;
        background: #0f172a;
        box-shadow: 0 28px 70px rgba(15,23,42,.22);
    }

    .kkw-phone-screen-wow {
        border-radius: 21px;
        padding: 17px;
        background: linear-gradient(180deg,#f8fafc,#fff);
    }

    .kkw-phone-top-wow {
        display: flex;
        justify-content: space-between;
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
    }

    .kkw-phone-card-wow {
        margin-top: 13px;
        padding: 15px;
        border-radius: 19px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
    }

    .kkw-phone-card-wow label {
        font-size: 10.5px;
        color: #64748b;
        font-weight: 950;
        text-transform: uppercase;
    }

    .kkw-phone-card-wow strong {
        display: block;
        margin-top: 7px;
        font-size: 28px;
        color: #1d4ed8;
        font-weight: 950;
    }

    .kkw-phone-grid-wow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        margin-top: 9px;
    }

    .kkw-phone-mini-wow {
        padding: 11px;
        border-radius: 15px;
        background: #fff;
        border: 1px solid #e2e8f0;
    }

    .kkw-phone-mini-wow span {
        display: block;
        font-size: 10.5px;
        color: #94a3b8;
        font-weight: 900;
    }

    .kkw-phone-mini-wow strong {
        display: block;
        margin-top: 5px;
        font-size: 15px;
        color: #0f172a;
        font-weight: 950;
    }

    .kkw-actions-wow a {
        width: 100%;
    }

    .kkw-store-badge-wow {
        width: 100%;
    }
}

@media(max-width:520px) {
    .kkw-report-strip-wow,
    .kkw-auto-pack-wow,
    .kkw-metrics-wow { grid-template-columns: 1fr 1fr; }
    .kkw-auto-progress-row-wow { grid-template-columns: 92px 1fr 34px; }
    .kkw-auto-title-row-wow { flex-direction: column; }
}

/* ===== Extracted style block ===== */

.hiw-fold-section{
                min-height:auto;
                position:relative;
                overflow:hidden;
                background:
                    radial-gradient(circle at 18% 18%, rgba(37,99,235,.13), transparent 30%),
                    radial-gradient(circle at 82% 16%, rgba(14,165,233,.12), transparent 32%),
                    linear-gradient(180deg,#ffffff 0%,#f8fbff 56%,#ffffff 100%);
                border-top:1px solid rgba(219,234,254,.9);
                border-bottom:1px solid rgba(219,234,254,.9);
            }
            .hiw-fold-section:before{
                content:"";
                position:absolute;
                inset:0;
                background-image:
                    linear-gradient(rgba(29,78,216,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(29,78,216,.045) 1px, transparent 1px);
                background-size:48px 48px;
                mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
                pointer-events:none;
            }
            .hiw-fold-section:after{
                content:"";
                position:absolute;
                left:50%;top:120px;
                width:min(940px,78vw);height:280px;
                transform:translateX(-50%);
                background:linear-gradient(90deg,rgba(37,99,235,.16),rgba(14,165,233,.13),rgba(34,197,94,.10));
                filter:blur(78px);
                opacity:.8;
                pointer-events:none;
            }
            .hiw-fold-wrap{
                max-width:1180px;
                margin:0 auto;
                padding:34px 28px 44px;
                position:relative;
                z-index:2;
            }
            .hiw-fold-head{text-align:center;max-width:940px;margin:0 auto 20px}
            .hiw-fold-pill{
                display:inline-flex;align-items:center;gap:8px;
                padding:7px 14px;border-radius:999px;
                background:rgba(255,255,255,.86);border:1px solid #dbeafe;
                box-shadow:0 10px 26px rgba(37,99,235,.08);
                color:#1d4ed8;font-size:12px;font-weight:950;margin-bottom:16px;
            }
            .hiw-fold-pill span{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.16)}
            .hiw-fold-title{margin:0;color:#0f172a;font-weight:1000;letter-spacing:-.065em;line-height:.96;font-size:clamp(40px,5.15vw,74px)}
            .hiw-fold-title strong{display:block;background:linear-gradient(120deg,#1d4ed8 0%,#0ea5e9 75%);-webkit-background-clip:text;background-clip:text;color:transparent}
            .hiw-fold-sub{max-width:790px;margin:15px auto 0;color:#475569;font-size:clamp(15px,1.45vw,18px);line-height:1.52;font-weight:760}
            .hiw-fold-sub b{color:#1d4ed8;font-weight:950}

            .hiw-kpi-grid{margin:24px auto 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:980px}
            .hiw-kpi-card{position:relative;overflow:hidden;background:rgba(255,255,255,.9);border:1px solid #dbeafe;border-radius:24px;padding:18px 18px 16px;box-shadow:0 18px 46px rgba(15,23,42,.08);backdrop-filter:blur(14px);min-height:132px}
            .hiw-kpi-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 0%,rgba(37,99,235,.16),transparent 44%);pointer-events:none}
            .hiw-kpi-card.green:before{background:radial-gradient(circle at 84% 0%,rgba(34,197,94,.17),transparent 44%)}
            .hiw-kpi-card.purple:before{background:radial-gradient(circle at 84% 0%,rgba(124,58,237,.16),transparent 44%)}
            .hiw-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1;margin-bottom:14px}
            .hiw-kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:1000}
            .hiw-kpi-icon{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe;font-size:16px}
            .hiw-kpi-card.green .hiw-kpi-icon{background:#ecfdf5;color:#059669;border-color:#bbf7d0}
            .hiw-kpi-card.purple .hiw-kpi-icon{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}
            .hiw-kpi-value{position:relative;z-index:1;color:#0f172a;font-size:clamp(29px,3vw,40px);font-weight:1000;letter-spacing:-.055em;line-height:1}
            .hiw-kpi-note{position:relative;z-index:1;margin-top:9px;color:#64748b;font-size:12.5px;line-height:1.35;font-weight:850}
            .hiw-kpi-note.good{color:#059669}.hiw-kpi-note.warn{color:#7c3aed}

            .hiw-role-shell{max-width:1050px;margin:0 auto;background:rgba(255,255,255,.82);border:1px solid #dbeafe;border-radius:30px;box-shadow:0 26px 70px rgba(15,23,42,.11);overflow:hidden;backdrop-filter:blur(18px)}
            .hiw-role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;background:rgba(248,250,252,.76);border-bottom:1px solid #dbeafe}
            .hiw-role-tab{border:0;background:transparent;border-radius:21px;padding:13px 14px;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;transition:.2s ease;color:#334155;font-family:inherit}
            .hiw-role-tab:hover{background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.06)}
            .hiw-role-tab.active{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 14px 30px rgba(37,99,235,.28)}
            .hiw-role-tab i{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;font-size:16px;flex:0 0 auto}
            .hiw-role-tab.active i{background:rgba(255,255,255,.18);color:#fff}
            .hiw-role-tab strong{display:block;font-size:14.5px;font-weight:1000;line-height:1.1}.hiw-role-tab small{display:block;margin-top:3px;color:#64748b;font-size:11px;font-weight:850;line-height:1.25}.hiw-role-tab.active small{color:#dbeafe}
            .hiw-role-panel{display:none;padding:18px 22px 20px}.hiw-role-panel.active{display:block;animation:hiwFoldFade .2s ease both}
            @keyframes hiwFoldFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
            .hiw-panel-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:18px;align-items:center}
            .hiw-panel-copy h3{margin:0 0 8px;color:#0f172a;font-size:clamp(22px,2.2vw,32px);font-weight:1000;letter-spacing:-.045em;line-height:1.05}.hiw-panel-copy p{margin:0;color:#475569;font-size:14px;font-weight:760;line-height:1.52}.hiw-panel-copy b{color:#1d4ed8}
            .hiw-panel-points{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
            .hiw-point{background:#fff;border:1px solid #e0ecff;border-radius:18px;padding:12px;min-height:94px;box-shadow:0 10px 26px rgba(15,23,42,.05)}
            .hiw-point span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:1000;margin-bottom:8px}.hiw-point strong{display:block;color:#0f172a;font-size:13px;font-weight:1000;line-height:1.18;margin-bottom:5px}.hiw-point small{display:block;color:#64748b;font-size:11px;font-weight:750;line-height:1.32}
            .hiw-cta-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px auto 0;flex-wrap:wrap}.hiw-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:13px 20px;font-size:14px;font-weight:1000;text-decoration:none;transition:.2s ease}.hiw-cta.primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 16px 34px rgba(37,99,235,.28)}.hiw-cta.primary:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(37,99,235,.34);color:#fff;text-decoration:none}.hiw-cta.secondary{background:#fff;color:#1d4ed8;border:1px solid #dbeafe;box-shadow:0 12px 28px rgba(15,23,42,.06)}.hiw-cta.secondary:hover{transform:translateY(-2px);color:#1d4ed8;text-decoration:none}
            .hiw-trust-line{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:13px;color:#64748b;font-size:12px;font-weight:850}.hiw-trust-line span{display:inline-flex;align-items:center;gap:6px}.hiw-trust-line i{color:#16a34a}

            @media (max-width:900px){
                .hiw-fold-wrap{padding:26px 16px 36px}
                .hiw-fold-head{text-align:center}
                .hiw-kpi-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 2px 8px;margin-top:20px;-webkit-overflow-scrolling:touch}
                .hiw-kpi-card{min-width:82%;scroll-snap-align:start;flex-shrink:0}
                .hiw-role-tabs{grid-template-columns:1fr}
                .hiw-panel-grid{grid-template-columns:1fr}
                .hiw-panel-points{grid-template-columns:1fr}
                .hiw-role-panel{padding:18px}
                .hiw-fold-title{font-size:42px;word-break:keep-all;overflow-wrap:break-word}
                .hiw-fold-sub{text-align:center}
                .hiw-cta{width:100%;max-width:360px}
                .hiw-trust-line{gap:8px}
                .hiw-role-shell{border-radius:20px}
                .hiw-panel-copy h3{font-size:clamp(18px,5vw,26px)}
            }
            @media (max-width:480px){
                .hiw-fold-title{font-size:clamp(28px,8vw,38px);letter-spacing:-.04em;word-break:keep-all;overflow-wrap:break-word}
                .hiw-fold-title strong{font-size:clamp(26px,7.5vw,36px)}
                .hiw-fold-sub{font-size:14px}
                .hiw-kpi-card{min-width:88%;padding:14px 14px 12px;min-height:110px}
                .hiw-kpi-value{font-size:clamp(24px,7vw,34px)}
                .hiw-role-tab{padding:10px 12px;gap:10px}
                .hiw-role-tab i{width:30px;height:30px;font-size:14px;border-radius:10px}
                .hiw-role-tab strong{font-size:13px}
                .hiw-role-tab small{font-size:10px}
                .hiw-role-panel{padding:14px}
                .hiw-panel-copy h3{font-size:clamp(16px,5.5vw,22px);margin-bottom:10px}
                .hiw-panel-copy p{font-size:13px}
                .hiw-point{padding:10px;min-height:80px}
                .hiw-point strong{font-size:12px}
                .hiw-point small{font-size:10.5px}
                .hiw-cta-row{flex-direction:column;align-items:stretch}
                .hiw-fold-pill{font-size:12px}
            }