/* ═══ TOKENS DARK ══════════════════════════════════════════════════ */
    :root,
    [data-theme=dark] {
        --blue: #111BD9;
        --blue-dim: rgba(17, 27, 217, 0.12);
        --blue-border: rgba(17, 27, 217, 0.35);
        --bg: #000000;
        --bg2: #080910;
        --surface: #0d0e18;
        --surface-glass: rgba(13, 14, 24, 0.92);
        --border: rgba(255, 255, 255, 0.08);
        --text-h: #ffffff;
        /* ratio 21:1 on dark bg ✓ WCAG AAA */
        --text-b: rgba(255, 255, 255, 0.80);
        /* ratio 14:1 ✓ WCAG AAA */
        --text-m: rgba(255, 255, 255, 0.48);
        /* ratio 6:1 ✓ WCAG AA for large text */
        --tag-color: #111BD9;
        /* blue tags on dark — only on non-small */
        --input-bg: rgba(255, 255, 255, 0.05);
        --nav-bg: rgba(0, 0, 0, 0.82);
        --foot-bg: #000000;
        --ca: 0.25;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    /* ═══ TOKENS LIGHT ═════════════════════════════════════════════════ */
    [data-theme=light] {
        --bg: #f5f6fa;
        --bg2: #eceef8;
        --surface: #ffffff;
        --surface-glass: rgba(255, 255, 255, 0.95);
        --border: rgba(0, 0, 0, 0.09);
        --text-h: #000000;
        /* ratio 21:1 on light bg ✓ WCAG AAA */
        --text-b: rgba(0, 0, 0, 0.72);
        /* ratio 9:1 ✓ WCAG AAA */
        --text-m: rgba(0, 0, 0, 0.45);
        /* ratio 4.8:1 ✓ WCAG AA */
        --tag-color: #111BD9;
        /* blue on white = 5.9:1 ✓ WCAG AA */
        --input-bg: rgba(0, 0, 0, 0.04);
        --nav-bg: rgba(245, 246, 250, 0.90);
        --foot-bg: #e4e6f2;
        --ca: 0.12;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    }

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

    html {
        scroll-behavior: smooth;
        cursor: none
    }

    body {
        font-family: 'Inter', -apple-system, sans-serif;
        background: var(--bg);
        color: var(--text-b);
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        transition: background .35s, color .35s
    }

    @media(pointer:coarse) {
        html {
            cursor: auto
        }

        #cur,
        #curdot {
            display: none
        }
    }

    ::selection {
        background: var(--blue-dim);
        color: var(--blue)
    }

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

    button,
    input,
    textarea,
    select {
        font-family: inherit;
        font-size: inherit
    }

    :focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px;
        border-radius: 24px
    }

    [data-theme=dark] body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
        opacity: .5
    }

    /* ═══ CURSOR ════════════════════════════════════════════════════════ */
    #cur {
        position: fixed;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(17, 27, 217, 0.6);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transition: transform .14s cubic-bezier(.22, .61, .36, 1), border-color .2s;
        transform: translate(-50%, -50%)
    }

    #curdot {
        position: fixed;
        width: 4px;
        height: 4px;
        background: var(--blue);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%)
    }

    #cur.hov {
        transform: translate(-50%, -50%) scale(1.55);
        border-color: var(--blue)
    }

    #cur.clk {
        transform: translate(-50%, -50%) scale(.78)
    }

    #trail {
        position: fixed;
        inset: 0;
        z-index: 9990;
        pointer-events: none
    }

    /* ═══ TOPO CANVAS ══════════════════════════════════════════════════ */
    #topo {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: var(--ca);
        transition: opacity .35s
    }

    /* ═══ LAYOUT ════════════════════════════════════════════════════════ */
    section {
        position: relative;
        z-index: 1
    }

    .wrap {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 clamp(1.25rem, 5vw, 3.5rem)
    }

    .wrap-n {
        max-width: 720px
    }

    .sp {
        padding: 120px 0
    }

    .divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border), transparent)
    }

    /* ═══ TYPOGRAPHY — Inter weights only ══════════════════════════════ */
    .t-tag {
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--tag-color);
        display: inline-block;
        margin-bottom: 1rem
    }

    .t-h1 {
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: 300;
        letter-spacing: -.025em;
        line-height: 1.08;
        color: var(--text-h)
    }

    .t-h1 strong,
    .t-h1 b {
        font-weight: 700
    }

    .t-h1 .ac {
        color: var(--blue)
    }

    .t-h2 {
        font-size: clamp(1.45rem, 3vw, 2.4rem);
        font-weight: 300;
        letter-spacing: -.02em;
        line-height: 1.15;
        color: var(--text-h)
    }

    .t-h2 strong,
    .t-h2 b {
        font-weight: 600
    }

    .t-h3 {
        font-size: clamp(1.05rem, 2vw, 1.5rem);
        font-weight: 500;
        color: var(--text-h);
        line-height: 1.3
    }

    .t-lead {
        font-size: clamp(.95rem, 1.5vw, 1.1rem);
        font-weight: 300;
        color: var(--text-b);
        line-height: 1.75
    }

    .t-body {
        font-size: .92rem;
        font-weight: 300;
        color: var(--text-b);
        line-height: 1.75
    }

    .t-small {
        font-size: .75rem;
        font-weight: 400;
        color: var(--text-m);
        line-height: 1.6
    }

    .t-mono {
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text-m)
    }

    /* ═══ BUTTONS — uniform size, border-radius 24px ════════════════════ */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        height: 48px;
        padding: 0 1.75rem;
        font-size: .84rem;
        font-weight: 600;
        letter-spacing: .03em;
        border-radius: 24px;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        transition: background .2s, box-shadow .2s, transform .15s, border-color .2s, color .2s;
        min-width: 160px;
    }

    .btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0
    }

    .btn-p {
        background: var(--blue);
        color: #ffffff
    }

    /* contrast 8.6:1 ✓ WCAG AAA */
    .btn-p:hover {
        background: #0e18c2;
        box-shadow: 0 0 22px rgba(17, 27, 217, 0.45);
        transform: translateY(-2px)
    }

    .btn-p:active {
        transform: translateY(0)
    }

    .btn-o {
        background: transparent;
        color: var(--text-h);
        border: 1.5px solid var(--border)
    }

    .btn-o:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: var(--blue-dim)
    }

    .btn-g {
        background: transparent;
        color: var(--blue);
        border: 1.5px solid var(--blue-border)
    }

    .btn-g:hover {
        background: var(--blue-dim)
    }

    /* ═══ INPUTS — border-radius 24px ══════════════════════════════════ */
    .flbl {
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-m);
        display: block;
        margin-bottom: .45rem
    }

    .finput {
        width: 100%;
        height: 48px;
        background: var(--input-bg);
        border: 1.5px solid var(--border);
        border-radius: 24px;
        padding: 0 1.25rem;
        color: var(--text-h);
        font-size: .92rem;
        font-weight: 400;
        outline: none;
        transition: border-color .2s, box-shadow .2s
    }

    .finput:focus {
        border-color: var(--blue-border);
        box-shadow: 0 0 0 3px var(--blue-dim)
    }

    .finput::placeholder {
        color: var(--text-m)
    }

    .ftarea {
        width: 100%;
        background: var(--input-bg);
        border: 1.5px solid var(--border);
        border-radius: 24px;
        padding: 1rem 1.25rem;
        color: var(--text-h);
        font-size: .92rem;
        font-weight: 400;
        line-height: 1.65;
        min-height: 130px;
        resize: vertical;
        outline: none;
        transition: border-color .2s, box-shadow .2s
    }

    .ftarea:focus {
        border-color: var(--blue-border);
        box-shadow: 0 0 0 3px var(--blue-dim)
    }

    .ftarea::placeholder {
        color: var(--text-m)
    }

    /* Option buttons — same height as .btn */
    .obtn {
        height: 48px;
        padding: 0 1.25rem;
        border-radius: 24px;
        border: 1.5px solid var(--border);
        background: transparent;
        color: var(--text-b);
        font-size: .84rem;
        font-weight: 500;
        cursor: pointer;
        transition: all .2s;
        white-space: nowrap
    }

    .obtn:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: var(--blue-dim)
    }

    .obtn.sel {
        background: var(--blue);
        border-color: var(--blue);
        color: #ffffff
    }

    .ogrid {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem
    }

    /* ═══ NAVBAR ════════════════════════════════════════════════════════ */
    #nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 500;
        height: 62px;
        display: flex;
        align-items: center;
        padding: 0 clamp(1.25rem, 4vw, 3.5rem);
        gap: .75rem;
        background: var(--nav-bg);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-bottom: 1px solid var(--border);
        transition: background .35s, border-color .35s
    }

    .nbrand {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin-right: auto;
        text-decoration: none;
        flex-shrink: 0
    }

    .nbname {
        font-size: .88rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--text-h)
    }

    .nbpar {
        font-size: .56rem;
        font-weight: 400;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: var(--text-m)
    }

    .nlinks {
        display: flex;
        align-items: center;
        list-style: none;
        gap: clamp(.6rem, 1.8vw, 1.6rem)
    }

    .nlinks a {
        font-size: .76rem;
        font-weight: 500;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-m);
        transition: color .2s;
        white-space: nowrap
    }

    .nlinks a:hover {
        color: var(--text-h)
    }

    /* theme toggle */
    .ntheme {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1.5px solid var(--border);
        border-radius: 24px;
        cursor: pointer;
        color: var(--text-m);
        transition: border-color .2s, color .2s, background .2s
    }

    .ntheme:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: var(--blue-dim)
    }

    .ntheme svg {
        width: 14px;
        height: 14px
    }

    .isun {
        display: none
    }

    .imoon {
        display: block
    }

    [data-theme=light] .isun {
        display: block
    }

    [data-theme=light] .imoon {
        display: none
    }

    /* hamburger */
    .nham {
        display: none;
        flex-direction: column;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        flex-shrink: 0
    }

    .nham span {
        display: block;
        width: 20px;
        height: 1.5px;
        background: var(--text-m);
        border-radius: 24px;
        transition: .3s
    }

    .nham.open span:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg)
    }

    .nham.open span:nth-child(2) {
        opacity: 0
    }

    .nham.open span:nth-child(3) {
        transform: translateY(-5.5px) rotate(-45deg)
    }

    .ndrawer {
        display: none;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        background: var(--nav-bg);
        backdrop-filter: blur(22px);
        border-bottom: 1px solid var(--border);
        z-index: 490;
        padding: 1rem clamp(1.25rem, 4vw, 3.5rem);
        flex-direction: column
    }

    .ndrawer.open {
        display: flex
    }

    .ndrawer a {
        font-size: .84rem;
        font-weight: 500;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-m);
        padding: .75rem 0;
        border-bottom: 1px solid var(--border);
        transition: color .2s
    }

    .ndrawer a:last-child {
        border-bottom: none
    }

    .ndrawer a:hover {
        color: var(--text-h)
    }

    @media(max-width:860px) {
        .nlinks {
            display: none
        }

        .nham {
            display: flex
        }
    }

    @media(min-width:861px) {
        .ndrawer {
            display: none !important
        }
    }

    /* ═══ LANGUAGE FLOAT BUTTON ═════════════════════════════════════════ */
    #lang-btn {
        position: fixed;
        bottom: calc(2rem + 52px + .75rem);
        right: 2rem;
        left: auto;
        z-index: 600;
        width: 52px;
        height: 52px;
        border-radius: 24px;
        background: var(--surface-glass);
        border: 1.5px solid var(--border);
        backdrop-filter: blur(12px);
        cursor: pointer;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform .2s, box-shadow .2s, border-color .2s;
    }

    #lang-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
        border-color: var(--blue)
    }

    #lang-btn .lbflag {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        line-height: 0;
        overflow: hidden;
        border-radius: 24px
    }

    #lang-btn .lbflag img,
    .lm-flag img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    #lang-btn .lbcode {
        display: none;
        position: absolute;
        bottom: 6px;
        right: 6px;
        font-size: .5rem;
        font-weight: 700;
        letter-spacing: .06em;
        color: #fff;
        background: rgba(8, 10, 22, .48);
        border-radius: 24px;
        padding: 1px 3px;
        line-height: 1.2;
        backdrop-filter: blur(8px)
    }

    /* Lang dropdown */
    #lang-menu {
        position: fixed;
        bottom: calc(2rem + 52px + .75rem + 52px + .75rem);
        right: 2rem;
        left: auto;
        z-index: 601;
        background: var(--surface-glass);
        border: 1.5px solid var(--border);
        backdrop-filter: blur(20px);
        border-radius: 24px;
        overflow: hidden;
        min-width: 160px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
    }

    #lang-menu.open {
        display: flex
    }

    .lm-item {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .75rem 1rem;
        cursor: pointer;
        transition: background .15s;
        border-bottom: 1px solid var(--border);
        font-size: .82rem;
        font-weight: 500;
        color: var(--text-b)
    }

    .lm-item:last-child {
        border-bottom: none
    }

    .lm-item:hover {
        background: var(--blue-dim);
        color: var(--blue)
    }

    .lm-item.active {
        color: var(--blue);
        font-weight: 700
    }

    .lm-item[hidden] {
        display: none !important
    }

    .lm-flag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 15px;
        overflow: hidden;
        border-radius: 24px;
        flex: 0 0 auto
    }

    /* ═══ WA BUTTON ═════════════════════════════════════════════════════ */
    #wabtn {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 600;
        width: 52px;
        height: 52px;
        background: var(--blue);
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border: none;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 0 4px 20px rgba(17, 27, 217, 0.45);
        transition: transform .2s, box-shadow .2s
    }

    #wabtn:hover {
        transform: translateY(-3px) scale(1.06);
        box-shadow: 0 8px 28px rgba(17, 27, 217, 0.55)
    }

    #wabtn svg {
        width: 22px;
        height: 22px
    }

    /* ═══ GATE ══════════════════════════════════════════════════════════ */
    #gate {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px clamp(1.25rem, 5vw, 3.5rem)
    }

    .g-pill {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .38rem 1rem;
        border-radius: 24px;
        border: 1px solid var(--border);
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--text-m);
        margin-bottom: 2.5rem
    }

    .gdot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--blue);
        box-shadow: 0 0 8px var(--blue);
        animation: blink 2.2s ease-in-out infinite
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .35;
            transform: scale(.55)
        }
    }

    .g-hl {
        font-size: clamp(1.75rem, 4.5vw, 3.6rem);
        font-weight: 300;
        letter-spacing: -.025em;
        line-height: 1.1;
        color: var(--text-h);
        max-width: 800px;
        margin-bottom: 1.25rem
    }

    .g-hl strong {
        font-weight: 700
    }

    .g-sub {
        font-size: clamp(.9rem, 1.5vw, 1.05rem);
        font-weight: 300;
        color: var(--text-m);
        max-width: 440px;
        line-height: 1.7;
        margin: 0 auto 3.5rem
    }

    .g-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center
    }

    /* ═══ VIEWS ═════════════════════════════════════════════════════════ */
    .view {
        display: none
    }

    .view.active {
        display: block
    }

    @keyframes vi {
        from {
            opacity: 0;
            transform: translateY(16px)
        }

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

    .vent {
        animation: vi .45s cubic-bezier(.22, .61, .36, 1) both
    }

    /* ═══ HERO ══════════════════════════════════════════════════════════ */
    #hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 100px clamp(1.25rem, 5vw, 3.5rem) 80px
    }

    .h-pill {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .38rem 1rem;
        border-radius: 24px;
        border: 1px solid var(--border);
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--text-m);
        margin-bottom: 2.25rem
    }

    .h-pdot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--blue);
        box-shadow: 0 0 8px var(--blue);
        animation: blink 2.2s ease-in-out infinite
    }

    /* ═══ PAIN GRID ═════════════════════════════════════════════════════ */
    .pgrid {
        display: grid;
        flex-wrap: nowrap;
        gap: .6rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: .25rem;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .ogrid::-webkit-scrollbar {
        display: none
    }

    .ogrid .obtn {
        flex: 0 0 auto
        margin-bottom: 3rem
    }

    .pgrid .pi {
        padding: 1.5rem 1.6rem;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        transition: background .2s
    }

    .pgrid .pi:hover {
        background: var(--blue-dim)
    }

    .pgrid .pi:nth-child(3n) {
        border-right: none
    }

    .pgrid .pi:nth-last-child(-n+3) {
        border-bottom: none
    }

    @media(max-width:760px) {
        .pgrid {
            grid-template-columns: repeat(2, 1fr)
        }

        .pgrid .pi:nth-child(3n) {
            border-right: 1px solid var(--border)
        }

        .pgrid .pi:nth-child(2n) {
            border-right: none
        }

        .pgrid .pi:nth-last-child(-n+3) {
            border-bottom: 1px solid var(--border)
        }

        .pgrid .pi:nth-last-child(-n+2) {
            border-bottom: none
        }
    }

    @media(max-width:480px) {
        .pgrid {
            grid-template-columns: 1fr
        }

        .pgrid .pi {
            border-right: none !important;
            border-bottom: 1px solid var(--border) !important
        }

        .pgrid .pi:last-child {
            border-bottom: none !important
        }
    }

    .pnum {
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .2em;
        color: var(--blue);
        min-width: 20px;
        padding-top: 2px
    }

    .ptxt strong {
        display: block;
        font-size: .88rem;
        font-weight: 600;
        color: var(--text-h);
        margin-bottom: .2rem
    }

    .ptxt span {
        font-size: .8rem;
        font-weight: 300;
        color: var(--text-m)
    }

    /* ═══ WHAT / VENTURE TREE ═══════════════════════════════════════════ */
    .wgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 5vw, 5rem);
        align-items: start
    }

    @media(max-width:720px) {
        .wgrid {
            grid-template-columns: 1fr
        }
    }

    .vtree {
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: 24px;
        padding: 1.75rem 2rem
    }

    .vtree .tr {
        font-size: .9rem;
        font-weight: 700;
        color: var(--text-h);
        letter-spacing: .04em;
        margin-bottom: .85rem
    }

    .vtree .ti {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .5rem 0;
        border-bottom: 1px solid var(--border);
        font-size: .84rem;
        font-weight: 400;
        color: var(--text-m);
        transition: color .2s
    }

    .vtree .ti:last-child {
        border-bottom: none
    }

    .vtree .ti:hover {
        color: var(--text-b)
    }

    .vtree .ti.act {
        color: var(--blue);
        font-weight: 600
    }

    .tarr {
        color: var(--blue);
        font-weight: 300
    }

    /* ═══ ACHIEVE LIST ══════════════════════════════════════════════════ */
    .agrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 4vw, 5rem);
        align-items: center
    }

    @media(max-width:680px) {
        .agrid {
            grid-template-columns: 1fr
        }
    }

    .alist {
        display: flex;
        flex-direction: column
    }

    .ai-row {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border);
        transition: padding-left .2s
    }

    .ai-row:first-child {
        border-top: 1px solid var(--border)
    }

    .ai-row:hover {
        padding-left: .5rem
    }

    .aico {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--blue-border);
        border-radius: 50%;
        color: var(--blue)
    }

    .aico svg {
        width: 12px;
        height: 12px
    }

    .atxt {
        font-size: .9rem;
        font-weight: 500;
        color: var(--text-b)
    }

    /* ═══ AI / KAI WIDGET ═══════════════════════════════════════════════ */
    .aigrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 4vw, 5rem);
        align-items: start
    }

    @media(max-width:720px) {
        .aigrid {
            grid-template-columns: 1fr
        }
    }

    .abuls {
        display: flex;
        flex-direction: column
    }

    .abul {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .9rem 0;
        border-bottom: 1px solid var(--border)
    }

    .abul:first-child {
        border-top: 1px solid var(--border)
    }

    .aidx {
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .2em;
        color: var(--blue);
        min-width: 22px
    }

    .albl {
        font-size: .9rem;
        font-weight: 400;
        color: var(--text-b)
    }

    .kwid {
        border: 1.5px solid var(--border);
        border-radius: 24px;
        overflow: hidden;
        background: var(--surface)
    }

    .ktbar {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .85rem 1.25rem;
        border-bottom: 1px solid var(--border);
        background: var(--bg2)
    }

    .ktdot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 0 6px var(--blue);
        animation: blink 2s infinite;
        flex-shrink: 0
    }

    .ktname {
        font-size: .63rem;
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--blue)
    }

    .ktstatus {
        margin-left: auto;
        font-size: .62rem;
        font-weight: 500;
        letter-spacing: .1em;
        color: var(--text-m)
    }

    .kbody {
        padding: 1.25rem;
        font-size: .76rem;
        line-height: 1.9
    }

    .kl {
        display: block;
        color: var(--text-m)
    }

    .kl .kp {
        color: var(--blue)
    }

    .kl .ko {
        color: var(--text-b)
    }

    .kl .khi {
        color: var(--blue);
        font-weight: 600
    }

    .kscan {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--blue), transparent);
        animation: scan 3.5s ease-in-out infinite
    }

    @keyframes scan {
        0% {
            transform: translateX(-100%);
            opacity: 0
        }

        15% {
            opacity: 1
        }

        85% {
            opacity: 1
        }

        100% {
            transform: translateX(100%);
            opacity: 0
        }
    }

    .kmeters {
        padding: 0 1.25rem 1.25rem;
        display: flex;
        flex-direction: column;
        gap: .75rem
    }

    .kmr {
        display: flex;
        flex-direction: column;
        gap: .3rem
    }

    .kml {
        display: flex;
        justify-content: space-between;
        font-size: .63rem;
        font-weight: 500;
        color: var(--text-m)
    }

    .kml span:last-child {
        color: var(--blue)
    }

    .kbar {
        height: 1.5px;
        background: var(--border);
        overflow: hidden
    }

    .kfill {
        height: 100%;
        background: var(--blue);
        box-shadow: 0 0 5px var(--blue);
        transform-origin: left;
        transform: scaleX(0);
        transition: transform 1.6s cubic-bezier(.22, .61, .36, 1)
    }

    .kfill.on {
        transform: scaleX(1)
    }

    /* ═══ LOGO CAROUSEL ═════════════════════════════════════════════════ */
    .lcar {
        overflow: hidden;
        position: relative;
        padding: 1.75rem 0
    }

    .lcar::before,
    .lcar::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none
    }

    .lcar::before {
        left: 0;
        background: linear-gradient(to right, var(--bg2), transparent)
    }

    .lcar::after {
        right: 0;
        background: linear-gradient(to left, var(--bg2), transparent)
    }

    .ltrack {
        display: flex;
        align-items: center;
        gap: clamp(2rem, 5vw, 4rem);
        width: max-content;
        animation: sl 28s linear infinite
    }

    .lcar:hover .ltrack {
        animation-play-state: paused
    }

    @keyframes sl {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(-50%)
        }
    }

    .lpill {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        flex-shrink: 0;
        opacity: .3;
        filter: grayscale(1);
        transition: opacity .3s
    }

    .lpill:hover {
        opacity: .6
    }

    .lpill img {
        height: 26px;
        width: auto;
        max-width: 110px;
        object-fit: contain
    }

    .lph {
        height: 22px;
        border-radius: 24px;
        background: var(--text-m)
    }

    /* ═══ TESTIMONIALS ══════════════════════════════════════════════════ */
    .tgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr)
    }

    @media(max-width:680px) {
        .tgrid {
            grid-template-columns: 1fr
        }
    }

    .tcard {
        padding: 2rem;
        border: 1px solid var(--border);
        border-right: none;
        position: relative;
        overflow: hidden;
        transition: background .2s
    }

    .tcard:last-child {
        border-right: 1px solid var(--border)
    }

    @media(max-width:680px) {
        .tcard {
            border-right: 1px solid var(--border) !important;
            border-bottom: none
        }

        .tcard:last-child {
            border-bottom: 1px solid var(--border)
        }
    }

    .tcard::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 0;
        background: var(--blue);
        transition: height .5s cubic-bezier(.22, .61, .36, 1)
    }

    .tcard:hover::before {
        height: 100%
    }

    .tcard:hover {
        background: var(--blue-dim)
    }

    .tq {
        font-size: .88rem;
        font-weight: 300;
        color: var(--text-b);
        line-height: 1.7;
        margin-bottom: 1.25rem
    }

    .tstat {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--blue);
        margin-bottom: .6rem;
        font-variant-numeric: tabular-nums
    }

    .tby {
        font-size: .7rem;
        font-weight: 500;
        letter-spacing: .1em;
        color: var(--text-m);
        text-transform: uppercase
    }

    /* ═══ KAI FORM ══════════════════════════════════════════════════════ */
    #kaiform {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100px clamp(1.25rem, 5vw, 3.5rem) 80px
    }

    .fshell {
        width: 100%;
        max-width: 680px;
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: 24px;
        overflow: hidden
    }

    .fhdr {
        padding: 1.5rem 2rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: .75rem
    }

    .fhdot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--blue);
        box-shadow: 0 0 8px var(--blue);
        animation: blink 2s infinite
    }

    .fhtit {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--blue)
    }

    .fhstep {
        margin-left: auto;
        font-size: .64rem;
        font-weight: 500;
        letter-spacing: .1em;
        color: var(--text-m)
    }

    .fprog {
        height: 2px;
        background: var(--border)
    }

    .fpfil {
        height: 100%;
        background: var(--blue);
        box-shadow: 0 0 6px var(--blue);
        transition: width .5s cubic-bezier(.22, .61, .36, 1)
    }

    .fstep {
        padding: 2rem;
        display: none
    }

    .fstep.active {
        display: block;
        animation: vi .4s both
    }

    .fq {
        font-size: clamp(.95rem, 2vw, 1.15rem);
        font-weight: 500;
        color: var(--text-h);
        line-height: 1.45;
        margin-bottom: 1.5rem
    }

    .fgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem
    }

    @media(max-width:540px) {
        .fgrid {
            grid-template-columns: 1fr
        }
    }

    .ffoot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 2rem;
        border-top: 1px solid var(--border);
        flex-wrap: wrap;
        gap: .75rem
    }

    .fnote {
        font-size: .72rem;
        font-weight: 400;
        color: var(--text-m)
    }

    .budget-note {
        padding: 1.25rem 1.5rem;
        border: 1.5px solid var(--blue-border);
        border-radius: 24px;
        background: var(--blue-dim);
        font-size: .88rem;
        font-weight: 300;
        color: var(--text-b);
        line-height: 1.65;
        margin-bottom: 1.5rem
    }

    .budget-note strong {
        color: var(--text-h);
        font-weight: 600
    }

    .fsuccess {
        padding: 2.5rem 2rem;
        text-align: center;
        display: none
    }

    .fsuccess.active {
        display: block;
        animation: vi .5s both
    }

    .sico {
        width: 56px;
        height: 56px;
        border-radius: 24px;
        background: var(--blue);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem
    }

    .sico svg {
        width: 22px;
        height: 22px;
        color: #fff
    }

    /* ═══ CTA FINAL ═════════════════════════════════════════════════════ */
    #ctafinal {
        text-align: center
    }

    /* ═══ LEGAL MODAL ═══════════════════════════════════════════════════ */
    .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 800;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s
    }

    .modal-overlay.open {
        opacity: 1;
        pointer-events: all
    }

    .modal-box {
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: 24px;
        max-width: 680px;
        width: 100%;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(12px);
        transition: transform .3s;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4)
    }

    .modal-overlay.open .modal-box {
        transform: translateY(0)
    }

    .modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0
    }

    .modal-head h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-h)
    }

    .modal-close {
        width: 34px;
        height: 34px;
        border-radius: 24px;
        border: 1.5px solid var(--border);
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-m);
        transition: all .2s;
        flex-shrink: 0
    }

    .modal-close:hover {
        border-color: var(--blue);
        color: var(--blue);
        background: var(--blue-dim)
    }

    .modal-close svg {
        width: 14px;
        height: 14px
    }

    .modal-body {
        overflow-y: auto;
        padding: 1.75rem;
        flex: 1;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent
    }

    .modal-body h4 {
        font-size: .88rem;
        font-weight: 700;
        color: var(--text-h);
        margin: 1.5rem 0 .5rem
    }

    .modal-body h4:first-child {
        margin-top: 0
    }

    .modal-body p,
    .modal-body li {
        font-size: .84rem;
        font-weight: 300;
        color: var(--text-b);
        line-height: 1.75;
        margin-bottom: .5rem
    }

    .modal-body ul {
        padding-left: 1.25rem;
        margin-bottom: .5rem
    }

    /* ═══ FOOTER ════════════════════════════════════════════════════════ */
    footer {
        background: var(--foot-bg);
        border-top: 1px solid var(--border);
        padding: 2.5rem clamp(1.25rem, 5vw, 3.5rem);
        position: relative;
        z-index: 1
    }

    .fti {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1.5rem
    }

    @media(max-width:580px) {
        .fti {
            grid-template-columns: 1fr;
            text-align: center
        }

        .flinks {
            align-items: center
        }

        .fright {
            text-align: center
        }
    }

    .fbn {
        display: block;
        font-size: .84rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--text-h);
        margin-bottom: 3px
    }

    .fbp {
        font-size: .6rem;
        font-weight: 400;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text-m)
    }

    .flinks {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .45rem
    }

    .flinks a {
        font-size: .72rem;
        font-weight: 400;
        color: var(--text-m);
        transition: color .2s
    }

    .flinks a:hover {
        color: var(--blue)
    }

    .fright {
        text-align: right;
        font-size: .66rem;
        font-weight: 400;
        color: var(--text-m);
        letter-spacing: .06em;
        line-height: 1.9
    }

    .fright a {
        color: var(--text-m);
        transition: color .2s
    }

    .fright a:hover {
        color: var(--blue)
    }

    /* ═══ FADE-UP ════════════════════════════════════════════════════════ */
    .fu {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1)
    }

    .fu.show {
        opacity: 1;
        transform: translateY(0)
    }

    .d1 {
        transition-delay: .1s
    }

    .d2 {
        transition-delay: .2s
    }

    .d3 {
        transition-delay: .3s
    }

    .d4 {
        transition-delay: .4s
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }

    @keyframes shake {

        0%,
        100% {
            transform: translateX(0)
        }

        25% {
            transform: translateX(-5px)
        }

        75% {
            transform: translateX(5px)
        }
    }

    .shake {
        animation: shake .35s ease
    }

    .fg {
        display: flex;
        flex-direction: column
    }