:root {
    --bg: #06142f;
    --bg2: #0b2152;
    --navy: #123a82;
    --blue: #2f7cf0;
    --sky: #9cc4ff;
    --red: #2f86ff;
    --pink: #7fb8ff;
    --ink: #16203d;
    --muted: #6b7591;
    --line: #e3e8f4;
    --fh: clamp(40px,5.6vh,48px);
    --gap: clamp(8px,1.4vh,12px);
}

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

html, body {
    height: 100%;
    overflow: hidden;
    overflow: clip
}

body {
    font-family: 'Inter',system-ui,sans-serif;
    color: #fff;
    background: var(--bg);
    height: 100vh;
    height: 100dvh
}

/* ================= BACKGROUND ================= */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(120% 90% at 0% 0%,#0f2c6b 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#0b2456 0%,transparent 60%),var(--bg)
}

.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
    opacity: .55;
    will-change: transform
}

.a1 {
    width: 48vw;
    height: 48vw;
    left: -12vw;
    top: -18vw;
    background: #1f5fd6;
    animation: float1 18s ease-in-out infinite alternate
}

.a2 {
    width: 36vw;
    height: 36vw;
    right: -10vw;
    top: 10vh;
    background: #1d4ed8;
    opacity: .4;
    animation: float2 22s ease-in-out infinite alternate
}

.a3 {
    width: 30vw;
    height: 30vw;
    left: 28vw;
    bottom: -16vw;
    background: #2f86ff;
    opacity: .28;
    animation: float3 20s ease-in-out infinite alternate
}

@keyframes float1 {
    to {
        transform: translate(14vw,10vh) scale(1.1)
    }
}

@keyframes float2 {
    to {
        transform: translate(-12vw,16vh) scale(.9)
    }
}

@keyframes float3 {
    to {
        transform: translate(-14vw,-10vh) scale(1.15)
    }
}

.noise {
    position: absolute;
    inset: 0;
    opacity: .18;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>")
}
/* perspective grid floor */
.floor {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 32vh;
    perspective: 340px;
    perspective-origin: 50% 0;
    -webkit-mask-image: linear-gradient(transparent,#000 35%);
    mask-image: linear-gradient(transparent,#000 35%)
}

    .floor::before {
        content: "";
        position: absolute;
        inset: 0 0 -60% 0;
        transform: rotateX(62deg);
        transform-origin: 50% 0;
        background-image: linear-gradient(rgba(159,184,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(159,184,255,.22) 1px,transparent 1px);
        background-size: 60px 60px;
        animation: grid 3s linear infinite
    }

@keyframes grid {
    to {
        background-position: 0 60px
    }
}

.horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32vh;
    height: 2px;
    background: linear-gradient(90deg,transparent,rgba(127,184,255,.8),rgba(159,184,255,.9),rgba(127,184,255,.8),transparent);
    box-shadow: 0 0 18px 2px rgba(159,184,255,.35);
    animation: hz 4s ease-in-out infinite
}

@keyframes hz {
    50% {
        opacity: .55
    }
}

.spot {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    left: 0;
    top: 0;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle,rgba(159,184,255,.16),transparent 65%);
    transition: opacity .4s;
    opacity: 0
}

body.pointer .spot {
    opacity: 1
}

.stars i {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    animation: tw 3s ease-in-out infinite
}

@keyframes tw {
    50% {
        opacity: .15
    }
}

/* ================= LAYOUT ================= */
main {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    align-items: center;
    padding: clamp(16px,4vh,48px) clamp(20px,5vw,80px) clamp(44px,8vh,72px);
    gap: clamp(20px,4vw,60px)
}

.left {
    min-width: 0
}

.right {
    min-width: 0;
    display: flex;
    justify-content: center;
    perspective: 1200px
}

/* ================= LEFT ================= */
.hero {
    max-width: 600px;
    transition: transform .5s cubic-bezier(.2,.8,.2,1)
}

.mp {
    display: flex;
    align-items: center;
    gap: clamp(14px,1.6vw,22px);
    margin-bottom: clamp(18px,4vh,40px)
}

.emblem {
    flex: none;
    width: clamp(78px,12vh,124px);
    height: auto;
    overflow: visible;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.3,1.5,.5,1)
}

    .emblem:hover {
        transform: scale(1.06) rotate(-4deg)
    }

.em-hex {
    fill: url(#emFill);
    stroke: url(#emStroke);
    stroke-width: 2.5;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: draw 1.4s cubic-bezier(.6,0,.2,1) .2s forwards
}

.em-ring {
    fill: none;
    stroke: rgba(159,184,255,.35);
    stroke-width: 1.2;
    stroke-dasharray: 3 7;
    transform-origin: 60px 60px;
    animation: spin 26s linear infinite
}

.emblem:hover .em-ring {
    animation-duration: 5s
}

.em-m {
    fill: none;
    stroke: #fff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
    animation: draw 1.1s cubic-bezier(.6,0,.2,1) .9s forwards
}

.em-bolt {
    fill: var(--red);
    opacity: 0;
    transform-origin: 84px 34px;
    animation: boltIn .5s cubic-bezier(.3,1.6,.5,1) 1.8s forwards,boltPulse 2.4s ease-in-out 2.4s infinite
}

.em-orb {
    fill: #fff;
    filter: drop-shadow(0 0 4px #fff)
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

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

@keyframes boltIn {
    from {
        opacity: 0;
        transform: scale(0) rotate(-60deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes boltPulse {
    50% {
        filter: drop-shadow(0 0 8px rgba(47,134,255,.9))
    }
}

.wm {
    line-height: 1
}

.wm-t {
    display: flex;
    align-items: baseline;
    gap: .22em;
    font-size: clamp(34px,6.2vh,62px);
    font-weight: 900;
    letter-spacing: -.035em;
    overflow: hidden;
    padding-bottom: .08em
}

    .wm-t span {
        display: inline-block;
        transform: translateY(110%);
        animation: up .9s cubic-bezier(.2,.85,.25,1) forwards
    }

    .wm-t .m {
        animation-delay: .55s;
        background: linear-gradient(180deg,#e2ecff 0%,#9fb8ff 55%,#5d8fe6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .wm-t .p {
        animation-delay: .68s;
        background: linear-gradient(180deg,#5aa2ff,var(--red) 60%,#1a5fd0);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

.wm-s {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    opacity: 0;
    animation: fadeUp .8s ease 1.1s forwards
}

    .wm-s .dp {
        font-size: clamp(15px,2.3vh,20px);
        font-weight: 800;
        letter-spacing: -.01em;
        color: #fff
    }

        .wm-s .dp b {
            color: var(--red);
            font-weight: 800
        }

    .wm-s .tag {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        padding: 4px 16px;
        border-radius: 999px;
        font-size: clamp(11px,1.5vh,13px);
        font-weight: 800;
        letter-spacing: .18em;
        color: #fff;
        background: linear-gradient(180deg,#5aa2ff,var(--red) 60%,#1757c4);
        border: 1.5px solid rgba(140,190,255,.8);
        box-shadow: 0 0 0 3px rgba(47,134,255,.18),0 6px 16px rgba(47,134,255,.35);
        transition: transform .3s,box-shadow .3s
    }

        .wm-s .tag::after {
            content: "";
            position: absolute;
            top: 0;
            left: -70%;
            width: 45%;
            height: 100%;
            transform: skewX(-20deg);
            background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
            animation: tagShine 3.5s ease-in-out 2s infinite
        }

        .wm-s .tag:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 0 0 4px rgba(47,134,255,.25),0 10px 22px rgba(47,134,255,.45)
        }

@keyframes tagShine {
    0% {
        left: -70%
    }

    35%,100% {
        left: 130%
    }
}

@keyframes up {
    to {
        transform: none
    }
}

@keyframes track {
    from {
        opacity: 0;
        letter-spacing: .8em
    }

    to {
        opacity: 1;
        letter-spacing: .34em
    }
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(10px,2vh,16px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #c9d2f5;
    opacity: 0;
    animation: fadeUp .7s ease 1.2s forwards
}

    .kicker::before {
        content: "";
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg,var(--red),var(--pink))
    }

h1 {
    font-size: clamp(30px,min(4.2vw,6.8vh),64px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -.035em;
    margin-bottom: clamp(12px,2.4vh,20px)
}

    h1 .row {
        display: block;
        overflow: hidden;
        padding-bottom: .1em;
        margin-bottom: -.1em
    }

        h1 .row > span {
            display: inline-block;
            transform: translateY(110%) skewY(6deg);
            animation: upSkew 1s cubic-bezier(.2,.85,.25,1) forwards
        }

        h1 .row:nth-child(1) > span {
            animation-delay: 1.3s
        }

        h1 .row:nth-child(2) > span {
            animation-delay: 1.45s
        }

@keyframes upSkew {
    to {
        transform: none
    }
}

h1 .plus {
    background: linear-gradient(100deg,var(--sky) 0%,#fff 30%,var(--pink) 55%,#fff 80%,var(--sky) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: upSkew 1s cubic-bezier(.2,.85,.25,1) 1.3s forwards,sheen 6s linear 2.4s infinite
}

@keyframes sheen {
    to {
        background-position: -220% 0
    }
}

.essp {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: .18em;
    padding: .06em .32em;
    border-radius: .22em;
    font-size: .62em;
    letter-spacing: .04em;
    color: var(--bg);
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.5);
    position: relative;
    top: -.08em;
    transition: transform .3s,box-shadow .3s
}

    .essp:hover {
        transform: translateY(-3px) rotate(-3deg);
        box-shadow: 0 10px 24px rgba(255,255,255,.25)
    }

.sub {
    font-size: clamp(14px,1.95vh,17px);
    line-height: 1.65;
    color: #c3cbec;
    max-width: 500px;
    opacity: 0;
    animation: blurIn 1s ease 1.75s forwards
}

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

@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        filter: none;
        transform: none
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(16px,3.4vh,30px)
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #e4e9ff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    cursor: default;
    opacity: 0;
    animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) forwards;
    transition: transform .3s,background .3s,border-color .3s,box-shadow .3s
}

    .pill:nth-child(1) {
        animation-delay: 2s
    }

    .pill:nth-child(2) {
        animation-delay: 2.1s
    }

    .pill:nth-child(3) {
        animation-delay: 2.2s
    }

    .pill svg {
        width: 16px;
        height: 16px;
        stroke: var(--sky);
        transition: stroke .3s,transform .3s
    }

    .pill:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,.12);
        border-color: rgba(127,184,255,.55);
        box-shadow: 0 10px 26px rgba(47,134,255,.18)
    }

        .pill:hover svg {
            stroke: var(--pink);
            transform: scale(1.15) rotate(-8deg)
        }

/* ================= CARD ================= */
.card-wrap {
    position: relative;
    width: 100%;
    max-width: 380px;
    border-radius: 26px;
    padding: 1.5px;
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
    animation: cardIn 1s cubic-bezier(.2,.85,.25,1) .3s both
}

    .card-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.5px;
        background: conic-gradient(from var(--ang,0deg),rgba(255,255,255,.12) 0 60%,var(--red) 72%,#fff 78%,var(--blue) 86%,rgba(255,255,255,.12) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: ang 5s linear infinite
    }

@property --ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg
}

@keyframes ang {
    to {
        --ang: 360deg
    }
}

.card-wrap::after {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: -1;
    border-radius: 40px;
    filter: blur(40px);
    opacity: .45;
    background: conic-gradient(from var(--ang,0deg),transparent 0 60%,rgba(47,134,255,.6) 75%,rgba(59,108,240,.6) 88%,transparent 100%);
    animation: ang 5s linear infinite
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(40px) rotateX(10deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.card {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    background: linear-gradient(160deg,rgba(255,255,255,.97),rgba(246,248,255,.97));
    color: var(--ink);
    padding: clamp(16px,3vh,28px) clamp(18px,2.2vw,28px) clamp(14px,2.4vh,22px);
    box-shadow: 0 40px 80px rgba(0,0,0,.45)
}

    .card .glare {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s;
        background: radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(159,184,255,.25),transparent 45%)
    }

.card-wrap:hover .glare {
    opacity: 1
}

.card > * {
    position: relative
}

.card .in {
    opacity: 0;
    animation: fadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(.6s + var(--d,0) * 70ms)
}

.logo {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(12px,2.4vh,20px)
}

    .logo img {
        height: clamp(24px,3.8vh,34px);
        width: auto;
        max-width: 100%;
        display: block;
        transition: transform .35s
    }

    .logo:hover img {
        transform: scale(1.05)
    }

.head {
    text-align: center;
    margin-bottom: clamp(12px,2.6vh,22px)
}

    .head h2 {
        font-size: clamp(20px,3vh,25px);
        font-weight: 800;
        letter-spacing: -.02em;
        color: #0b2556
    }

        .head h2 span {
            background: linear-gradient(90deg,var(--navy),var(--red));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

    .head p {
        font-size: 13.5px;
        color: var(--muted);
        margin-top: 3px
    }

.field {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--fh);
    margin-bottom: var(--gap);
    border-radius: 13px;
    background: #eef1f8;
    border: 1.5px solid #dfe4f1;
    transition: background .25s,border-color .25s,box-shadow .25s,transform .25s
}

    .field:hover {
        background: #e8ecf6;
        border-color: #c9d1e8
    }

    .field:focus-within {
        background: #fff;
        border-color: var(--navy);
        box-shadow: 0 8px 22px rgba(18,58,130,.12),0 0 0 4px rgba(18,58,130,.07);
        transform: translateY(-1px)
    }

    .field::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -1.5px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg,var(--red),var(--blue));
        transform: scaleX(0);
        transition: transform .35s cubic-bezier(.6,0,.2,1)
    }

    .field:focus-within::after {
        transform: scaleX(1)
    }

.ico {
    flex: none;
    width: 44px;
    display: grid;
    place-items: center
}

    .ico svg {
        width: 18px;
        height: 18px;
        stroke: #99a2bd;
        transition: stroke .25s,transform .3s cubic-bezier(.3,1.6,.5,1)
    }

.field:focus-within .ico svg {
    stroke: var(--red);
    transform: scale(1.15)
}

.field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: 500 15px Inter,sans-serif;
    color: var(--ink);
    padding-top: 12px
}

.lbl {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14.5px;
    color: #98a1ba;
    pointer-events: none;
    transition: .2s ease;
    white-space: nowrap
}

.field input:focus + .lbl, .field input:not(:placeholder-shown) + .lbl {
    top: 7px;
    transform: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--navy)
}

.field.noicon .lbl {
    left: 14px
}

.field.noicon input {
    padding-left: 14px
}

.eye {
    background: none;
    border: 0;
    cursor: pointer;
    width: 44px;
    height: 100%;
    display: grid;
    place-items: center
}

    .eye svg {
        width: 19px;
        height: 19px;
        stroke: #99a2bd;
        transition: stroke .2s,transform .2s
    }

    .eye:hover svg {
        stroke: var(--navy);
        transform: scale(1.1)
    }

.cap {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    margin-bottom: var(--gap)
}

    .cap .field {
        margin: 0
    }

.cap-box {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--fh);
    padding: 0 10px;
    border-radius: 13px;
    white-space: nowrap;
    user-select: none;
    background: repeating-linear-gradient(-45deg,#eef1fa 0 6px,#f8f9fd 6px 12px);
    border: 1.5px dashed #c5cde4;
    font: italic 800 16px Inter,sans-serif;
    color: var(--navy);
    letter-spacing: 1px
}

    .cap-box button {
        background: none;
        border: 0;
        cursor: pointer;
        display: grid;
        place-items: center
    }

        .cap-box button svg {
            width: 16px;
            height: 16px;
            stroke: var(--navy);
            transition: transform .6s
        }

        .cap-box button:hover svg {
            transform: rotate(-360deg)
        }

.proceed {
    height: var(--fh);
    padding: 0 14px;
    border-radius: 13px;
    border: 0;
    background: #0b2556;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    font: 700 14px Inter,sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .25s,transform .25s,box-shadow .25s
}

    .proceed svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        transition: transform .25s
    }

    .proceed:hover {
        background: var(--red);
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(47,134,255,.3)
    }

        .proceed:hover svg {
            transform: translateX(3px)
        }

    .proceed.ok {
        background: #16a34a
    }

    .proceed.err {
        animation: shake .4s;
        background: var(--red)
    }

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

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

.seg {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: var(--fh);
    padding: 4px;
    border-radius: 13px;
    background: #eef1f8;
    border: 1.5px solid #dfe4f1;
    margin-bottom: var(--gap)
}

    .seg input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

    .seg label {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-size: 14px;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        transition: color .25s
    }

        .seg label:hover {
            color: var(--navy)
        }

        .seg label svg {
            width: 16px;
            height: 16px;
            stroke: currentColor
        }

    .seg .knob {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        width: calc(50% - 4px);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 3px 10px rgba(18,58,130,.14);
        transition: transform .4s cubic-bezier(.4,1.5,.5,1)
    }

#dep2:checked ~ .knob {
    transform: translateX(100%)
}

#dep1:checked + label, #dep2:checked + label {
    color: var(--navy)
}

.btn {
    background: linear-gradient(110deg,#0b2556,var(--navy) 35%,var(--blue) 65%,var(--red));
    background-size: 220% 100%;
    background-position: 0 0;
    box-shadow: 0 14px 30px rgba(18,58,130,.35);
    transition: background-position .6s,box-shadow .3s,transform .2s
}

    .btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent);
        transform: skewX(-20deg)
    }

    .btn:hover:not(:disabled) {
        background-position: 100% 0;
        box-shadow: 0 18px 36px rgba(47,134,255,.32)
    }

        .btn:hover:not(:disabled)::before {
            animation: shine .8s
        }

@keyframes shine {
    to {
        left: 130%
    }
}

.btn .arr {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.18);
    transition: transform .3s,background .3s
}

    .btn .arr svg {
        width: 15px;
        height: 15px;
        stroke: #fff
    }

.btn:hover:not(:disabled) .arr {
    transform: translateX(4px);
    background: rgba(255,255,255,.3)
}

.btn:disabled {
    background: linear-gradient(110deg,#a7afcb,#bac1d9);
    cursor: not-allowed;
    box-shadow: none
}

.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    transform: scale(0);
    animation: ripple .6s ease-out forwards;
    pointer-events: none
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0
    }
}

.btn.busy {
    cursor: progress;
    background: linear-gradient(90deg,#0b2556,var(--blue),var(--red),#0b2556);
    background-size: 300% 100%;
    animation: bar 1.2s linear infinite
}

@keyframes bar {
    to {
        background-position: 300% 0
    }
}

.btn .spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite
}

.msg {
    min-height: 18px;
    margin-top: clamp(4px,1vh,10px);
    text-align: center;
    font-size: 13px;
    color: var(--red)
}

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(2px,.6vh,6px);
    font-size: 13px
}

    .foot a {
        color: var(--navy);
        font-weight: 600;
        text-decoration: none;
        position: relative
    }

        .foot a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 100%;
            height: 2px;
            background: var(--red);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .3s
        }

        .foot a:hover::after {
            transform: scaleX(1);
            transform-origin: left
        }

.secure {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted)
}

    .secure svg {
        width: 14px;
        height: 14px;
        stroke: #16a34a
    }

footer {
    position: fixed;
    left: clamp(20px,5vw,80px);
    bottom: clamp(10px,2vh,18px);
    z-index: 2;
    font-size: 12.5px;
    color: #9aa4cc;
    letter-spacing: .3px
}

    footer b {
        color: #fff
    }


/* ================= MODERN ANIMATION SET ================= */
/* morphing colour shapes */
.aurora, .floor, .horizon, .stars {
    display: none
}

.blob {
    position: absolute;
    filter: blur(70px);
    opacity: .55;
    mix-blend-mode: screen;
    will-change: transform,border-radius;
    animation: morph 16s ease-in-out infinite alternate,roam 24s ease-in-out infinite alternate
}

.b1 {
    width: 42vw;
    height: 42vw;
    left: -10vw;
    top: -14vw;
    background: #1f5fd6
}

.b2 {
    width: 34vw;
    height: 34vw;
    right: -8vw;
    top: 18vh;
    background: #1d4ed8;
    opacity: .42;
    animation-duration: 19s,28s;
    animation-direction: alternate-reverse
}

.b3 {
    width: 30vw;
    height: 30vw;
    left: 30vw;
    bottom: -14vw;
    background: #2f86ff;
    opacity: .3;
    animation-duration: 14s,22s
}

@keyframes morph {
    0% {
        border-radius: 42% 58% 63% 37%/41% 44% 56% 59%
    }

    33% {
        border-radius: 70% 30% 46% 54%/30% 62% 38% 70%
    }

    66% {
        border-radius: 35% 65% 30% 70%/62% 35% 65% 38%
    }

    100% {
        border-radius: 58% 42% 55% 45%/50% 58% 42% 50%
    }
}

@keyframes roam {
    0% {
        transform: translate(0,0) rotate(0deg)
    }

    50% {
        transform: translate(8vw,6vh) rotate(40deg)
    }

    100% {
        transform: translate(-4vw,10vh) rotate(-20deg)
    }
}

#net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(3,10,30,.65) 100%)
}

/* block reveal: colour bar sweeps in, text appears, bar sweeps out */
.rv {
    position: relative;
    display: inline-block;
    vertical-align: top
}

p.rv {
    display: block
}

.rv-in {
    display: inline-block;
    opacity: 0;
    animation: rvShow .01s linear calc(var(--rd,0s) + .45s) forwards
}

p.rv .rv-in {
    display: block
}

.rv::after {
    content: "";
    position: absolute;
    inset: -.04em -.06em;
    border-radius: 4px;
    background: var(--rc,var(--red));
    transform: scaleX(0);
    transform-origin: left;
    animation: rvBar .9s cubic-bezier(.77,0,.18,1) var(--rd,0s) forwards
}

@keyframes rvBar {
    0% {
        transform: scaleX(0);
        transform-origin: left
    }

    50% {
        transform: scaleX(1);
        transform-origin: left
    }

    50.01% {
        transform: scaleX(1);
        transform-origin: right
    }

    100% {
        transform: scaleX(0);
        transform-origin: right
    }
}

@keyframes rvShow {
    to {
        opacity: 1
    }
}

.wm-t span, .wm-t .m, .wm-t .p {
    transform: none;
    animation: none
}

.wm-t .rv-in {
    animation: rvShow .01s linear calc(var(--rd,0s) + .45s) forwards
}

.wm-t .rv {
    overflow: visible
}

.wm-t {
    overflow: visible
}

h1 .row {
    overflow: visible
}

    h1 .row > span {
        transform: none;
        animation: none
    }

h1 .rv-in.plus {
    animation: rvShow .01s linear calc(var(--rd,0s) + .45s) forwards,sheen 6s linear 2.6s infinite
}

.kicker {
    opacity: 1;
    animation: none
}

.sub {
    opacity: 1;
    animation: none
}

.wm-s {
    animation: fadeUp .7s cubic-bezier(.2,.8,.2,1) .95s forwards
}

/* pills pop with a springy scale */
.pill {
    animation: popIn .6s cubic-bezier(.3,1.6,.5,1) forwards
}

    .pill:nth-child(1) {
        animation-delay: 2.2s
    }

    .pill:nth-child(2) {
        animation-delay: 2.32s
    }

    .pill:nth-child(3) {
        animation-delay: 2.44s
    }

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.6) translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* card glides in from the right out of a blur */
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateX(60px) scale(.96);
        filter: blur(12px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

.card-wrap {
    animation: cardIn 1.1s cubic-bezier(.2,.85,.25,1) .4s both
}

.card .in {
    animation: slideIn .55s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(.8s + var(--d,0) * 70ms)
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}


/* ================= MODERN SET 3 : ribbons · decode · flip ================= */
.blob {
    display: none
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5
}

.g1 {
    width: 50vw;
    height: 50vw;
    left: -15vw;
    top: -20vw;
    background: #1d5ad0
}

.g2 {
    width: 40vw;
    height: 40vw;
    right: -12vw;
    bottom: -18vw;
    background: #0e3d8a;
    opacity: .45
}

.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 30% 28%,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 18%,rgba(159,184,255,.08) 45%,rgba(18,58,130,.05) 70%,transparent 72%);
    box-shadow: inset -10px -14px 30px rgba(59,108,240,.25),inset 6px 8px 18px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: bob ease-in-out infinite alternate
}

.o1 {
    width: 150px;
    height: 150px;
    left: 40%;
    top: 9%;
    animation-duration: 7s
}

.o2 {
    width: 70px;
    height: 70px;
    left: 6%;
    bottom: 16%;
    animation-duration: 9s;
    animation-delay: -3s
}

.o3 {
    width: 110px;
    height: 110px;
    right: 5%;
    top: 6%;
    animation-duration: 8s;
    animation-delay: -5s;
    box-shadow: inset -10px -14px 30px rgba(47,134,255,.28),inset 6px 8px 18px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.25)
}

.o4 {
    width: 46px;
    height: 46px;
    left: 52%;
    bottom: 12%;
    animation-duration: 6s;
    animation-delay: -2s
}

@keyframes bob {
    from {
        transform: translate(0,0)
    }

    to {
        transform: translate(14px,-26px)
    }
}

/* decode text: no colour bars, text visible (JS scrambles it in) */
.rv::after {
    display: none
}

.rv-in, .wm-t .rv-in {
    opacity: 1;
    animation: none
}

h1 .rv-in.plus {
    animation: sheen 6s linear 2.6s infinite
}

.dec {
    opacity: 0;
    transition: opacity .2s
}

    .dec.go {
        opacity: 1
    }

.scr {
    color: var(--pink);
    -webkit-text-fill-color: var(--pink);
    opacity: .85
}

.wm-s {
    animation: fadeUp .7s cubic-bezier(.2,.8,.2,1) 1.1s forwards
}

/* pills: rise with glow */
.pill {
    animation: glowUp .7s cubic-bezier(.2,.8,.2,1) forwards
}

    .pill:nth-child(1) {
        animation-delay: 2.3s
    }

    .pill:nth-child(2) {
        animation-delay: 2.42s
    }

    .pill:nth-child(3) {
        animation-delay: 2.54s
    }

@keyframes glowUp {
    0% {
        opacity: 0;
        transform: translateY(16px);
        box-shadow: 0 0 0 rgba(159,184,255,0)
    }

    60% {
        opacity: 1;
        box-shadow: 0 0 22px rgba(159,184,255,.45)
    }

    100% {
        opacity: 1;
        transform: none;
        box-shadow: 0 0 0 rgba(159,184,255,0)
    }
}

/* card: 3D flip in */
.right {
    perspective: 1400px
}

@keyframes cardIn {
    0% {
        opacity: 0;
        transform: rotateY(-70deg) translateX(40px)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: none
    }
}

.card-wrap {
    transform-origin: 100% 50%;
    animation: cardIn 1.2s cubic-bezier(.2,.85,.25,1) .35s both
}

.card .in {
    animation: fadeUp .5s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(.95s + var(--d,0) * 65ms)
}


/* ---------- left text : assemble ---------- */
.dec {
    opacity: 1
}

.ch {
    display: inline-block;
    opacity: 0;
    transform: translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));
    filter: blur(8px);
    animation: assemble .9s cubic-bezier(.2,.9,.25,1.15) forwards
}

@keyframes assemble {
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}
/* gradient words: colour each letter instead of clipping a background */
.wm-t.split .m, .wm-t.split .p, h1 .rv-in.plus.split {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none
}

.wm-t.split .m {
    color: #3d8bff
}

.wm-t.split .p {
    color: #fff
}

.wm-t.split .ch, h1 .plus.split .ch {
    -webkit-text-fill-color: currentColor
}

.wm-t span.ch {
    transform: translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));
    animation: assemble .9s cubic-bezier(.2,.9,.25,1.15) forwards
}

.aw {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
    animation: drift .7s cubic-bezier(.2,.8,.2,1) forwards
}

@keyframes drift {
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

.ch:hover {
    animation: none;
    opacity: 1;
    filter: none;
    transform: translateY(-6px) rotate(-6deg);
    transition: transform .25s cubic-bezier(.3,1.6,.5,1)
}


/* ---------- right card : smooth motion ---------- */
.right {
    perspective: 1400px
}

@keyframes cardRise {
    0% {
        opacity: 0;
        transform: translateY(46px) scale(.97);
        clip-path: inset(100% 0 0 0 round 26px)
    }

    55% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0 round 26px)
    }
}

.card-wrap {
    transform-origin: 50% 50%;
    animation: cardRise 1.3s cubic-bezier(.16,1,.3,1) .35s both;
    transition: transform .7s cubic-bezier(.16,1,.3,1)
}

    .card-wrap::before, .card-wrap::after {
        animation-duration: 9s
    }

    .card-wrap::after {
        opacity: .32
    }

.card {
    animation: floaty 6s ease-in-out 2.2s infinite
}

@keyframes floaty {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

.card-wrap:hover .card, .card:focus-within {
    animation-play-state: paused
}

.card .in {
    animation: softIn .8s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: calc(.9s + var(--d,0) * 85ms)
}

@keyframes softIn {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(5px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

.logo img {
    animation: logoIn 1s cubic-bezier(.16,1,.3,1) 1s both
}

@keyframes logoIn {
    from {
        transform: scale(.85);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

.field, .proceed, .seg .knob, .btn {
    transition-duration: .45s;
    transition-timing-function: cubic-bezier(.16,1,.3,1)
}


/* ---------- right card : no animation ---------- */
.card, .logo img {
    animation: none !important
}

.card-wrap {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
    animation: cardGlide 1.2s cubic-bezier(.16,1,.3,1) .5s forwards !important;
    transition: box-shadow .6s cubic-bezier(.16,1,.3,1)
}

@keyframes cardGlide {
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

.card .in {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
    animation-name: glideUp !important;
    animation-duration: .9s !important;
    animation-timing-function: cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode: forwards !important;
    animation-delay: calc(.85s + var(--d,0) * 80ms) !important
}

.card-wrap::before {
    animation: none;
    background: linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.08) 40%,rgba(47,134,255,.45) 100%)
}

.card-wrap::after {
    display: none
}

.card .glare {
    display: none
}


/* ---------- left text : smooth glide ---------- */
.ch, .wm-t span.ch {
    transform: translateY(.42em);
    filter: blur(6px);
    opacity: 0;
    animation-name: glideUp !important;
    animation-duration: 1.1s !important;
    animation-timing-function: cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode: forwards !important;
    animation-iteration-count: 1 !important
}

@keyframes glideUp {
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

.aw {
    transform: translateY(10px);
    filter: blur(4px);
    animation: glideUp 1s cubic-bezier(.16,1,.3,1) forwards
}

.ch:hover {
    transform: translateY(-3px);
    transition: transform .4s cubic-bezier(.16,1,.3,1)
}

.wm-s {
    animation: glideUp 1s cubic-bezier(.16,1,.3,1) 1s forwards;
    transform: translateY(10px);
    filter: blur(4px)
}

.pill {
    animation: glideUp .9s cubic-bezier(.16,1,.3,1) forwards;
    transform: translateY(12px);
    filter: blur(4px)
}

    .pill:nth-child(1) {
        animation-delay: 2.3s
    }

    .pill:nth-child(2) {
        animation-delay: 2.42s
    }

    .pill:nth-child(3) {
        animation-delay: 2.54s
    }

.kicker::before {
    transform: scaleX(0);
    transform-origin: left;
    animation: lineGrow .9s cubic-bezier(.16,1,.3,1) .85s forwards
}

@keyframes lineGrow {
    to {
        transform: scaleX(1)
    }
}

.hero {
    transition: transform 1.2s cubic-bezier(.16,1,.3,1)
}

/* ================= RESPONSIVE ================= */
@media (max-height:760px) {
    .pills {
        display: none
    }
}

@media (max-height:620px) {
    .sub {
        display: none
    }

    .head p {
        display: none
    }
}

@media (max-width:980px) {
    main {
        grid-template-columns: minmax(0,1fr);
        padding: clamp(12px,3vh,24px) 16px clamp(40px,7vh,56px);
        align-content: center;
        gap: clamp(10px,2vh,18px)
    }

    .left .sub, .left .pills, .left .kicker, .left h1 {
        display: none
    }

    .mp {
        margin: 0 auto;
        justify-content: center
    }

    .emblem {
        width: clamp(52px,8vh,72px)
    }

    .wm-t {
        font-size: clamp(28px,4.8vh,40px)
    }

    .wm-s {
        gap: 8px;
        margin-top: 6px
    }

    footer {
        left: 0;
        right: 0;
        text-align: center;
        font-size: 11.5px
    }

    .floor {
        height: 24vh
    }

    .horizon {
        bottom: 24vh
    }
}

@media (max-width:980px) and (max-height:700px) {
    .left {
        display: none
    }
}

@media (max-width:420px) {
    .cap {
        grid-template-columns: minmax(0,1fr) auto
    }

    .proceed {
        grid-column: span 2;
        justify-content: center
    }
}

@media (max-width:420px) and (max-height:700px) {
    :root {
        --fh: 40px;
        --gap: 8px
    }

    .cap {
        grid-template-columns: minmax(0,1fr) auto auto
    }

    .proceed {
        grid-column: auto;
        padding: 0 10px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    .card .in, .sub, .pill, .kicker, .wm-s, .rv-in {
        opacity: 1
    }

    .rv::after {
        display: none
    }

    .dec {
        opacity: 1
    }

    .wm-t span, h1 .row > span {
        transform: none
    }

    .em-hex, .em-m {
        stroke-dashoffset: 0
    }

    .em-bolt {
        opacity: 1
    }
}
/* ================= FIELD STYLE (reference) ================= */
:root {
    --fbg: #f4f6fe;
    --fbd: #dfe5f7;
    --fic: #2b3aa8
}

.card {
    background: #fff
}

.field {
    border-radius: 12px;
    background: var(--fbg);
    border: 1.5px solid var(--fbd)
}

    .field:hover {
        background: #eef2fd;
        border-color: #ccd5f2
    }

    .field:focus-within {
        background: #fff;
        border-color: #3d57d8;
        box-shadow: 0 0 0 4px rgba(61,87,216,.1);
        transform: none
    }

    .field::after {
        display: none
    }

.ico svg {
    stroke: var(--fic)
}

.field:focus-within .ico svg {
    stroke: #2346d8;
    transform: none
}

.lbl {
    color: #9aa3c0;
    font-size: 15px
}

.field input:focus + .lbl, .field input:not(:placeholder-shown) + .lbl {
    color: var(--fic)
}

.eye svg {
    stroke: #3b4466
}

.cap-box {
    border-radius: 12px;
    background: repeating-linear-gradient(-45deg,#e9edfb 0 6px,#f5f7fe 6px 12px);
    border: 1.5px dashed #b9c4ea;
    color: #2b3aa8;
    font: italic 800 17px Inter,sans-serif
}

    .cap-box button svg {
        stroke: #2b3aa8
    }

.proceed {
    background: #fff;
    color: #141a33;
    border: 1.5px solid var(--fbd);
    border-radius: 12px;
    font-weight: 700
}

    .proceed:hover {
        background: #f4f6fe;
        color: #141a33;
        border-color: #b9c4ea;
        box-shadow: 0 6px 16px rgba(43,58,168,.12)
    }

    .proceed.ok {
        background: #16a34a;
        color: #fff;
        border-color: #16a34a
    }

    .proceed.err {
        background: #fff;
        color: #d61f2c;
        border-color: #f3b3b8
    }

.dep {
    cursor: pointer
}

.dep-ico {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e4e9fb
}

    .dep-ico svg {
        width: 16px;
        height: 16px
    }

.field.dep:focus-within .ico svg {
    transform: none
}

.dep select {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    font: 600 15px Inter,sans-serif;
    color: #141a33;
    cursor: pointer;
    padding-right: 8px
}

.chev {
    flex: none;
    width: 40px;
    display: grid;
    place-items: center;
    pointer-events: none
}

    .chev svg {
        width: 16px;
        height: 16px;
        stroke: #3b4466;
        transition: transform .3s
    }

.dep:focus-within .chev svg {
    transform: rotate(90deg)
}

.btn {
    border-radius: 14px;
    background: linear-gradient(90deg,#2348d6 0%,#2b3db8 55%,#2e2a8c 100%);
    background-size: 100% 100%;
    box-shadow: 0 12px 28px rgba(35,72,214,.32);
    letter-spacing: .1em
}

    .btn:hover:not(:disabled) {
        background: linear-gradient(90deg,#2a52e8 0%,#3046c8 55%,#33309c 100%);
        box-shadow: 0 16px 34px rgba(35,72,214,.42)
    }

    .btn .arr {
        background: transparent
    }

    .btn:hover:not(:disabled) .arr {
        background: transparent
    }

    .btn:disabled {
        background: linear-gradient(90deg,#2348d6 0%,#2b3db8 55%,#2e2a8c 100%);
        opacity: .55;
        box-shadow: none
    }

.cap .field {
    overflow: hidden
}

    .cap .field .lbl {
        right: 10px;
        overflow: hidden;
        text-overflow: ellipsis
    }

.card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(10px,2vh,16px)
}

    .card-logo img {
        width: clamp(60px,9vh,76px);
        height: auto;
        border-radius: 22%;
        display: block;
        box-shadow: 0 0 0 4px #eef2fd,0 10px 24px rgba(35,72,214,.28);
        transition: transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s
    }

        .card-logo img:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 0 0 4px #e1e8fc,0 14px 30px rgba(35,72,214,.38)
        }

@media (max-height:620px) {
    .card-logo {
        display: none
    }
}

/* ================= BUTTONS & ACCENTS IN LOGO COLOURS ================= */
:root {
    --fic: #0e60c3
}

.btn, .btn:disabled {
    background: linear-gradient(90deg,#2c8ff5 0%,#1e75df 35%,#0e60c3 65%,#082755 100%) !important;
    box-shadow: 0 12px 28px rgba(14,96,195,.35)
}

    .btn:disabled {
        opacity: .6;
        box-shadow: none
    }

    .btn:hover:not(:disabled) {
        background: linear-gradient(90deg,#3f9dfd 0%,#2c8ff5 35%,#1e75df 65%,#0a2f66 100%) !important;
        box-shadow: 0 16px 34px rgba(30,117,223,.45)
    }

    .btn.busy {
        background: linear-gradient(90deg,#082755,#1e75df,#3f9dfd,#082755) !important;
        background-size: 300% 100% !important
    }

.proceed {
    color: #082755
}

    .proceed svg {
        stroke: #1e75df
    }

    .proceed:hover {
        background: #082755;
        color: #fff;
        border-color: #082755;
        box-shadow: 0 8px 18px rgba(8,39,85,.3)
    }

        .proceed:hover svg {
            stroke: #3f9dfd
        }

.cap-box {
    color: #082755;
    border-color: #9cc0ef;
    background: repeating-linear-gradient(-45deg,#e6effb 0 6px,#f5f9ff 6px 12px)
}

    .cap-box button svg {
        stroke: #1e75df
    }

.dep-ico {
    background: #e1edfc
}

.field:focus-within {
    border-color: #1e75df;
    box-shadow: 0 0 0 4px rgba(30,117,223,.12)
}

    .field:focus-within .ico svg {
        stroke: #1e75df
    }

.head h2 {
    color: #082755
}

    .head h2 span {
        background: linear-gradient(90deg,#1e75df,#3f9dfd);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

.foot a {
    color: #0e60c3
}

    .foot a::after {
        background: #2c8ff5
    }

/* ================= M-POWER APP LOGO ================= */
.mp-logo {
    flex: none;
    width: clamp(84px,13vh,132px);
    height: auto;
    border-radius: 22%;
    display: block;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(156,196,255,.25),0 18px 40px rgba(0,0,0,.45),0 0 40px rgba(47,134,255,.35);
    opacity: 0;
    transform: translateY(14px) scale(.92);
    filter: blur(6px);
    animation: logoPop 1.1s cubic-bezier(.16,1,.3,1) .2s forwards;
    transition: transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s
}

    .mp-logo:hover {
        transform: translateY(-4px) scale(1.04) rotate(-2deg);
        box-shadow: 0 0 0 1px rgba(156,196,255,.45),0 24px 50px rgba(0,0,0,.5),0 0 60px rgba(47,134,255,.55)
    }

@keyframes logoPop {
    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@media (max-width:980px) {
    .mp-logo {
        width: clamp(56px,9vh,78px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .mp-logo {
        opacity: 1;
        transform: none;
        filter: none
    }
}