:root {
    --ink: #0b1c33;
    --ink-soft: #3a4f6a;
    --sky: #1a6fb5;
    --sky-deep: #0a3d73;
    --green: #1eb53a;
    --uz-blue: #0099b5;
    --red: #ce1126;
    font-family: SF Pro Display,Segoe UI,system-ui,-apple-system,sans-serif;
    color: var(--ink)
}

* {
    box-sizing: border-box
}

html,body,#root {
    min-height: 100%;
    margin: 0
}

body {
    background: #eef3f8;
    overflow-x: hidden
}

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

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

@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pulseSoft {
    0%,to {
        opacity: .55;
        transform: scale(1)
    }

    50% {
        opacity: .85;
        transform: scale(1.04)
    }
}

.flag {
    position: relative;
    width: min(200px,64%);
    margin: 0 auto 14px;
    height: 12px;
    border-radius: 4px;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    box-shadow: 0 2px 10px #0a2d5a24
}

.f-blue {
    background: var(--uz-blue)
}

.f-white {
    background: #fff
}

.f-green {
    background: var(--green)
}

.f-red {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--red);
    top: calc(33.333% - .75px)
}

.f-red.f2 {
    top: calc(66.666% - .75px)
}

.v1 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: linear-gradient(165deg,#e7f0fa,#f8fbfd 42%,#eaf4ef)
}

.v1-bg {
    position: absolute;
    inset: -20% -10% auto;
    height: 55%;
    background: radial-gradient(ellipse at 20% 30%,rgba(13,148,136,.18),transparent 55%),radial-gradient(ellipse at 85% 10%,rgba(37,99,235,.14),transparent 50%);
    pointer-events: none;
    animation: pulseSoft 8s ease-in-out infinite
}

.v1-wrap {
    position: relative;
    z-index: 1;
    width: min(480px,100%);
    margin: 0 auto;
    padding: 18px 20px 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 100dvh
}

.v1-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: rise .55s ease both
}

.v1-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.v1-brand img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 8px 20px #0a3d7324
}

.v1-brand strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em
}

.v1-brand em {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 1px
}

.v1-year {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--sky-deep);
    background: #ffffffd9;
    border: 1px solid rgba(10,61,115,.1);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.v1-mid {
    text-align: center;
    animation: rise .65s .06s ease both
}

.v1 .flag {
    margin-bottom: 16px;
    width: min(220px,70%);
    height: 14px
}

.v1-title {
    margin: 0 0 16px;
    font-size: clamp(1.9rem,7vw,2.5rem);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: #0f172a
}

.v1-hl {
    display: block;
    background: linear-gradient(90deg,#0d9488,#0891b2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.v1-sum {
    margin: 0 auto 14px;
    width: fit-content;
    padding: 14px 28px;
    border-radius: 18px;
    background: #ffffffc7;
    border: 1px solid rgba(22,163,74,.15);
    box-shadow: 0 16px 40px #0f503214;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.v1-num {
    margin: 0;
    font-size: clamp(2.6rem,10vw,3.4rem);
    font-weight: 900;
    letter-spacing: -.04em;
    color: #16a34a;
    line-height: 1;
    font-variant-numeric: tabular-nums
}

.v1-lab {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #64748b
}

.v1-sub {
    margin: 0 auto 16px;
    max-width: 28ch;
    color: #64748b;
    font-size: 15px;
    line-height: 1.5
}

.v1-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px
}

.v1-pills li {
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 12px;
    background: #ffffffe6;
    border: 1px solid rgba(10,61,115,.08);
    color: #475569;
    box-shadow: 0 4px 12px #0f172a0a
}

.v1-cta {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: auto;
    animation: rise .7s .1s ease both
}

.v1-deadline {
    margin: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #64748b
}

.v1-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.v1-timer div {
    background: #fff;
    border: 1px solid rgba(10,61,115,.1);
    border-radius: 14px;
    padding: 10px 4px;
    text-align: center;
    box-shadow: 0 6px 16px #0f172a0a
}

.v1-timer b {
    display: block;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0d9488;
    font-variant-numeric: tabular-nums
}

.v1-timer span {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: .04em
}

.v1-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 16px;
    transition: transform .15s ease
}

.v1-btn:active {
    transform: scale(.98)
}

.v1-primary {
    color: #fff;
    background: linear-gradient(135deg,#0f766e,#0d9488 50%,#14b8a6);
    box-shadow: 0 14px 28px #0d948852
}

.v1-ghost {
    color: #16a34a;
    background: #fff;
    border: 2px solid #22c55e
}

.v1-note {
    text-align: center;
    margin: 4px 0 0;
    font-size: 13px;
    color: #64748b;
    font-weight: 600
}

.v2 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #050505;
    color: #fff
}

.v2-glow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(ellipse 80% 45% at 50% 0%,rgba(96,165,250,.22),transparent 60%),radial-gradient(ellipse 60% 40% at 80% 70%,rgba(225,29,72,.18),transparent 55%),radial-gradient(ellipse 50% 35% at 10% 80%,rgba(139,92,246,.16),transparent 50%),linear-gradient(180deg,#121212,#050505);
    pointer-events: none
}

.v2-wrap {
    position: relative;
    z-index: 1;
    width: min(430px,100%);
    margin: 0 auto;
    padding: 18px 18px 32px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    text-align: center
}

.v2-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: rise .5s ease both
}

.v2-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left
}

.v2-brand img {
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 0 0 1px #ffffff14
}

.v2-brand strong {
    display: block;
    font-size: 15px;
    font-weight: 800
}

.v2-brand em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600
}

.v2-badge {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 6px 10px;
    border-radius: 999px;
    color: #93c5fd;
    background: #3b82f626;
    border: 1px solid rgba(96,165,250,.35)
}

.v2 .flag {
    margin: 16px auto 12px;
    width: min(200px,64%);
    box-shadow: 0 4px 16px #00000059;
    animation: rise .55s .04s ease both
}

.v2-hero {
    margin: 4px 0 14px;
    filter: drop-shadow(0 18px 36px rgba(96,165,250,.22));
    animation: rise .6s .06s ease both
}

.v2-hero img {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08)
}

.v2-title {
    margin: 4px 0 10px;
    font-size: clamp(1.75rem,6.5vw,2.2rem);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.22;
    animation: rise .65s .08s ease both
}

.v2-title em {
    font-style: normal;
    background: linear-gradient(90deg,#93c5fd,#60a5fa,#a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.v2-sub {
    margin: 0 auto 18px;
    max-width: 32ch;
    color: #94a3b8;
    font-size: 14.5px;
    line-height: 1.5
}

.v2-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-bottom: 14px;
    animation: rise .7s .1s ease both
}

.v2-timer div {
    background: #ffffff0f;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 10px 4px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.v2-timer b {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    color: #93c5fd;
    font-variant-numeric: tabular-nums
}

.v2-timer span {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: .04em
}

.v2-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border-radius: 16px;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    background: linear-gradient(135deg,#be123c,#e11d48 45%,#f43f5e);
    box-shadow: 0 14px 32px #e11d486b,inset 0 1px #fff3;
    transition: transform .15s ease
}

.v2-btn:active {
    transform: scale(.98)
}

.v2-btn span {
    opacity: .9
}

.v2-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #64748b
}

.v3 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #f4f7fb;
    color: #0f172a
}

.v3-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(ellipse 70% 40% at 50% -5%,rgba(37,99,235,.16),transparent 55%),linear-gradient(180deg,#f8fafc,#eef2f7);
    pointer-events: none
}

.v3-wrap {
    position: relative;
    z-index: 1;
    width: min(430px,100%);
    margin: 0 auto;
    padding: 16px 18px 28px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column
}

.v3-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: rise .5s ease both
}

.v3-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.v3-brand img {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px #0f172a14
}

.v3-brand strong {
    font-size: 15px;
    font-weight: 800
}

.v3-safe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 6px 10px;
    border-radius: 999px
}

.v3 .flag {
    margin: 14px auto 12px;
    width: min(200px,64%)
}

.v3-title {
    margin: 0 0 8px;
    text-align: center;
    font-size: clamp(1.55rem,6vw,1.95rem);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.25;
    animation: rise .55s .04s ease both
}

.v3-title em {
    font-style: normal;
    background: linear-gradient(90deg,#1d4ed8,#2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.v3-sub {
    margin: 0 auto 16px;
    text-align: center;
    max-width: 32ch;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45
}

.v3-chat {
    border-radius: 20px;
    padding: 14px 12px 12px;
    color: #e2e8f0;
    box-shadow: 0 20px 48px #0f172a38;
    margin-bottom: 14px;
    background: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(160deg,#111827,#0b1220);
    background-size: 18px 18px,18px 18px,auto;
    animation: rise .6s .06s ease both
}

.v3-day {
    width: fit-content;
    margin: 0 auto 12px;
    background: #94a3b838;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px
}

.v3-msg {
    max-width: 82%;
    margin-bottom: 10px;
    padding: 10px 12px 6px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.35
}

.v3-msg p {
    margin: 0
}

.v3-msg time {
    display: block;
    text-align: right;
    font-size: 10px;
    opacity: .7;
    margin-top: 4px
}

.v3-msg.out {
    margin-left: auto;
    background: linear-gradient(135deg,#1d4ed8,#3b82f6);
    color: #fff;
    border-bottom-right-radius: 4px
}

.v3-msg.in {
    margin-right: auto;
    background: #1e293b;
    border-bottom-left-radius: 4px
}

.v3-pay {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    background: #111827e6;
    border: 1px solid rgba(34,197,94,.3);
    border-radius: 14px;
    padding: 10px 12px;
    margin-top: 4px
}

.v3-ok {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,#16a34a,#22c55e);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 14px
}

.v3-pay strong {
    display: block;
    font-size: 13px;
    color: #f8fafc
}

.v3-pay em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px
}

.v3-pay b {
    color: #22c55e;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap
}

.v3-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-bottom: 12px
}

.v3-timer div {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 4px;
    text-align: center;
    box-shadow: 0 6px 16px #0f172a0d
}

.v3-timer b {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    color: #2563eb;
    font-variant-numeric: tabular-nums
}

.v3-timer span {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8
}

.v3-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 10px;
    transition: transform .15s ease
}

.v3-btn:active {
    transform: scale(.98)
}

.v3-primary {
    color: #fff;
    background: linear-gradient(135deg,#1d4ed8,#2563eb 55%,#3b82f6);
    box-shadow: 0 14px 28px #2563eb4d
}

.v3-ghost {
    color: #0f172a;
    background: #fff;
    border: 1.5px solid #e2e8f0
}

.v3-note {
    text-align: center;
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 600
}

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

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

@keyframes spinSlow {
    0% {
        transform: translate(-50%,-50%) rotate(0)
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

.v4 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #ecfaf3;
    color: #0b2e22
}

.v4-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(165deg,#dff7ea,#f3fcf7 45%,#e8f6ff)
}

.v4-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    animation: pulseSoft 7s ease-in-out infinite
}

.v4-orb-a {
    width: 280px;
    height: 280px;
    top: -60px;
    right: -40px;
    background: radial-gradient(circle,rgba(16,185,129,.35),transparent 70%)
}

.v4-orb-b {
    width: 220px;
    height: 220px;
    bottom: 10%;
    left: -50px;
    background: radial-gradient(circle,rgba(14,165,233,.22),transparent 70%);
    animation-delay: 1.2s
}

.v4-ring {
    position: absolute;
    top: 38%;
    left: 50%;
    width: min(420px,92vw);
    height: min(420px,92vw);
    border: 1.5px solid rgba(16,185,129,.18);
    border-radius: 50%;
    animation: spinSlow 48s linear infinite
}

.v4-ring:after {
    content: "";
    position: absolute;
    top: 18%;
    right: 18%;
    bottom: 18%;
    left: 18%;
    border: 1px dashed rgba(14,165,233,.2);
    border-radius: 50%
}

.v4-wrap {
    position: relative;
    z-index: 1;
    width: min(430px,100%);
    margin: 0 auto;
    padding: 18px 18px 32px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    text-align: center
}

.v4-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: rise .5s ease both
}

.v4-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left
}

.v4-brand img {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px #0b2e221a
}

.v4-brand strong {
    display: block;
    font-size: 15px;
    font-weight: 800
}

.v4-brand em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #5b7c6e;
    font-weight: 600
}

.v4-chip {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #047857;
    background: #10b98126;
    border: 1px solid rgba(16,185,129,.35);
    padding: 6px 10px;
    border-radius: 999px
}

.v4 .flag {
    margin: 16px auto 14px;
    width: min(200px,64%);
    animation: rise .55s .04s ease both
}

.v4-kicker {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #3d6b58;
    letter-spacing: -.01em;
    animation: rise .6s .06s ease both
}

.v4-title {
    margin: 0 0 14px;
    animation: rise .65s .08s ease both
}

.v4-sum {
    display: block;
    font-size: clamp(3.2rem,14vw,4.4rem);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: .95;
    background: linear-gradient(135deg,#047857,#059669 40%,#0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums
}

.v4-unit {
    display: block;
    margin-top: 6px;
    font-size: clamp(1.35rem,5.5vw,1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0b2e22
}

.v4-note-img {
    margin: 0 auto 14px;
    width: min(320px,88%);
    animation: floaty 5.5s ease-in-out infinite;
    filter: drop-shadow(0 18px 28px rgba(4,120,87,.22))
}

.v4-note-img img {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.7);
    transform: rotate(-2.5deg)
}

.v4-sub {
    margin: 0 auto 16px;
    max-width: 30ch;
    color: #5b7c6e;
    font-size: 14.5px;
    line-height: 1.5
}

.v4-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-bottom: 14px;
    animation: rise .7s .1s ease both
}

.v4-timer div {
    background: #ffffffd1;
    border: 1px solid rgba(4,120,87,.12);
    border-radius: 14px;
    padding: 10px 4px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 16px #0b2e220d
}

.v4-timer b {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    color: #047857;
    font-variant-numeric: tabular-nums
}

.v4-timer span {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: .04em
}

.v4-cta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.v4-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border-radius: 16px;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    background: linear-gradient(135deg,#047857,#059669 48%,#0d9488);
    box-shadow: 0 14px 32px #04785759,inset 0 1px #ffffff38;
    transition: transform .15s ease
}

.v4-btn:active {
    transform: scale(.98)
}

.v4-btn span {
    opacity: .9
}

.v4-btn-ovoz {
    color: #0b2e22;
    background: #fff;
    border: 1.5px solid rgba(4,120,87,.28);
    box-shadow: 0 8px 20px #0b2e220f
}

.v4-btn-ovoz svg {
    color: #229ed9
}

.v4-foot {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: #5b7c6e;
    font-weight: 600
}

@keyframes shineSweep {
    0% {
        transform: translate(-120%) skew(-18deg);
        opacity: 0
    }

    38% {
        opacity: .85
    }

    to {
        transform: translate(220%) skew(-18deg);
        opacity: 0
    }
}

@keyframes beamDrift {
    0%,to {
        transform: translateY(0) rotate(-8deg);
        opacity: .5
    }

    50% {
        transform: translateY(-24px) rotate(-6deg);
        opacity: .75
    }
}

@keyframes dotBlink {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .25
    }
}

.v5 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #07080c;
    color: #f5f1e6
}

.v5-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% -10%,#1c1a12 0%,transparent 62%),linear-gradient(180deg,#0b0c11,#07080c 55%,#0a0906)
}

.v5-beam {
    position: absolute;
    top: -18%;
    left: 50%;
    width: 150%;
    height: 46%;
    transform: translate(-50%);
    background: linear-gradient(100deg,transparent 20%,rgba(214,178,94,.16) 50%,transparent 78%);
    filter: blur(24px);
    animation: beamDrift 11s ease-in-out infinite
}

.v5-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(6px);
    animation: pulseSoft 8s ease-in-out infinite
}

.v5-glow-a {
    width: 300px;
    height: 300px;
    top: 4%;
    right: -90px;
    background: radial-gradient(circle,rgba(212,175,55,.24),transparent 68%)
}

.v5-glow-b {
    width: 260px;
    height: 260px;
    bottom: 6%;
    left: -80px;
    background: radial-gradient(circle,rgba(120,90,20,.28),transparent 70%);
    animation-delay: 1.6s
}

.v5-wrap {
    position: relative;
    z-index: 1;
    width: min(430px,100%);
    margin: 0 auto;
    padding: 18px 18px 30px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    text-align: center
}

.v5-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: rise .5s ease both
}

.v5-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left
}

.v5-brand img {
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 22px #0000008c;
    border: 1px solid rgba(212,175,55,.28)
}

.v5-brand strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em
}

.v5-brand em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9c8f6d;
    margin-top: 2px
}

.v5-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #e6cf94;
    background: #d4af371a;
    border: 1px solid rgba(212,175,55,.3);
    padding: 6px 11px;
    border-radius: 999px
}

.v5-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80e6;
    animation: dotBlink 1.8s ease-in-out infinite
}

.v5-kicker {
    margin: 34px 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #b7a67c;
    animation: rise .6s .06s ease both
}

.v5-title {
    margin: 0 0 16px;
    animation: rise .65s .08s ease both
}

.v5-sum {
    display: block;
    font-size: clamp(3.3rem,15vw,4.6rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.055em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg,#fff6d8,#e8c86a 38%,#b8912f 68%,#f3e2a8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(212,175,55,.28))
}

.v5-unit {
    display: block;
    margin-top: 8px;
    font-size: clamp(1.3rem,5.4vw,1.65rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f5f1e6
}

.v5-note {
    position: relative;
    margin: 0 auto 16px;
    width: min(330px,90%);
    border-radius: 16px;
    overflow: hidden;
    animation: floaty 6s ease-in-out infinite;
    box-shadow: 0 22px 44px #0009,0 0 0 1px #d4af3759
}

.v5-note img {
    width: 100%;
    display: block;
    transform: rotate(-1.5deg) scale(1.04)
}

.v5-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    animation: shineSweep 4.5s ease-in-out infinite
}

.v5-sub {
    margin: 0 auto 18px;
    max-width: 30ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: #a99e83
}

.v5-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-bottom: 16px;
    animation: rise .7s .1s ease both
}

.v5-timer div {
    background: #ffffff0b;
    border: 1px solid rgba(212,175,55,.2);
    border-radius: 14px;
    padding: 10px 4px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.v5-timer b {
    display: block;
    font-size: 1.3rem;
    font-weight: 900;
    color: #e8c86a;
    font-variant-numeric: tabular-nums
}

.v5-timer span {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #7d7360
}

.v5-cta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.v5-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 16.5px;
    color: #1b1403;
    background: linear-gradient(135deg,#f7e3a4,#dcb75c 45%,#c69a2e);
    box-shadow: 0 16px 34px #c69a2e57,inset 0 1px #ffffff80;
    transition: transform .15s ease
}

.v5-btn:active {
    transform: scale(.98)
}

.v5-btn span {
    opacity: .75
}

.v5-btn-ghost {
    color: #f0e6c8;
    background: #ffffff0d;
    border: 1.5px solid rgba(212,175,55,.35);
    box-shadow: none
}

.v5-btn-ghost svg {
    color: #e8c86a
}

.v5-foot {
    margin: 13px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #8b8168
}

@keyframes blobFloat {
    0%,to {
        transform: translate(0) scale(1)
    }

    50% {
        transform: translate(14px,-18px) scale(1.06)
    }
}

.v6 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #fbfbfe;
    color: #14142b
}

.v6-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.v6-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    animation: blobFloat 13s ease-in-out infinite
}

.v6-blob-a {
    width: 340px;
    height: 340px;
    top: -110px;
    right: -110px;
    background: radial-gradient(circle,rgba(99,102,241,.28),transparent 68%)
}

.v6-blob-b {
    width: 300px;
    height: 300px;
    bottom: -80px;
    left: -100px;
    background: radial-gradient(circle,rgba(236,72,153,.18),transparent 70%);
    animation-delay: 2.4s
}

.v6-grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(20,20,43,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,43,.045) 1px,transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse at 50% 32%,#000 12%,transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 32%,#000 12%,transparent 72%)
}

.v6-wrap {
    position: relative;
    z-index: 1;
    width: min(440px,100%);
    margin: 0 auto;
    padding: 18px 20px 30px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    text-align: center
}

.v6-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: rise .5s ease both
}

.v6-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left
}

.v6-brand img {
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 20px #14142b1f
}

.v6-brand strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em
}

.v6-brand em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8b8ba7;
    margin-top: 2px
}

.v6-chip {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #4f46e5;
    background: #6366f11a;
    border: 1px solid rgba(99,102,241,.24);
    padding: 6px 11px;
    border-radius: 999px
}

.v6-main {
    margin-top: 36px;
    animation: rise .65s .08s ease both
}

.v6-kicker {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: #6c6c8f
}

.v6-title {
    margin: 0 0 14px
}

.v6-sum {
    display: block;
    font-size: clamp(3.4rem,16vw,4.8rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg,#4f46e5,#7c3aed 42%,#db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.v6-unit {
    display: block;
    margin-top: 8px;
    font-size: clamp(1.3rem,5.4vw,1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #14142b
}

.v6-sub {
    margin: 0 auto 20px;
    max-width: 30ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: #6c6c8f
}

.v6-chat {
    position: relative;
    margin: 0 0 18px;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    font-family: -apple-system,SF Pro Text,Segoe UI,Roboto,system-ui,sans-serif;
    box-shadow: 0 18px 40px #14142b1f;
    animation: rise .6s .12s ease both
}

.v6-chat-top {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    background: #fff;
    border-bottom: 1px solid #e4e9ec
}

.v6-ava {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover
}

.v6-chat-who strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    letter-spacing: -.01em
}

.v6-chat-who em {
    display: block;
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: #3390ec;
    margin-top: 1px
}

.v6-chat-dots {
    display: grid;
    gap: 3px;
    padding: 0 4px
}

.v6-chat-dots i {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #8b9398
}

.v6-chat-body {
    padding: 10px 10px 12px;
    background: radial-gradient(circle at 18% 22%,rgba(255,255,255,.55) 0 2px,transparent 3px),radial-gradient(circle at 68% 62%,rgba(255,255,255,.45) 0 2px,transparent 3px),linear-gradient(160deg,#dbe7f0,#cfe0ec,#d9e8f2);
    background-size: 46px 46px,46px 46px,auto
}

.v6-day {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    color: #fff;
    background: #00000038;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.v6-msg {
    position: relative;
    max-width: 82%;
    margin-bottom: 7px;
    padding: 6px 9px 5px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.32;
    color: #000;
    box-shadow: 0 1px 1px #10232f24
}

.v6-msg p {
    margin: 0;
    padding-right: 48px
}

.v6-msg time {
    position: absolute;
    right: 9px;
    bottom: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    line-height: 1
}

.v6-msg.out {
    margin-left: auto;
    background: #effdde;
    border-bottom-right-radius: 4px
}

.v6-msg.out time {
    color: #62a34a
}

.v6-tick {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -2px;
    color: #4fae4e
}

.v6-msg.in {
    margin-right: auto;
    background: #fff;
    border-bottom-left-radius: 4px
}

.v6-msg.in time {
    color: #a1aab0
}

.v6-pay-msg {
    max-width: 90%;
    padding: 7px 7px 5px
}

.v6-pay-msg time {
    right: 11px;
    bottom: 6px
}

.v6-pay {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 9px 10px 9px 9px;
    border-radius: 9px;
    background: #f2fbf3;
    border-left: 3px solid #4fae4e;
    margin-bottom: 14px
}

.v6-ok {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #4fae4e
}

.v6-pay strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #000
}

.v6-pay em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: #7d8b93;
    margin-top: 1px
}

.v6-pay b {
    font-size: 15px;
    font-weight: 700;
    color: #4fae4e;
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

.v6-timer {
    border-radius: 16px;
    padding: 12px;
    background: #ffffffb8;
    border: 1px solid rgba(99,102,241,.16);
    box-shadow: 0 8px 22px #14142b0d
}

.v6-timer-lab {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8b8ba7;
    margin-bottom: 8px
}

.v6-timer-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.v6-timer-row div {
    border-radius: 12px;
    padding: 8px 4px;
    background: #6366f112
}

.v6-timer-row b {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: #4f46e5;
    font-variant-numeric: tabular-nums
}

.v6-timer-row span {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    color: #9c9cba
}

.v6-cta {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.v6-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 16.5px;
    color: #fff;
    background: linear-gradient(135deg,#4f46e5,#7c3aed,#c026d3);
    box-shadow: 0 16px 34px #4f46e552,inset 0 1px #ffffff40;
    transition: transform .15s ease
}

.v6-btn:active {
    transform: scale(.98)
}

.v6-btn span {
    opacity: .8
}

.v6-btn-ghost {
    color: #4338ca;
    background: #fff;
    border: 1.5px solid rgba(99,102,241,.3);
    box-shadow: 0 6px 16px #14142b0d
}

.v6-foot {
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #8b8ba7
}

.v6.v6-acc-nazir {
    background: #07070d;
    color: #ececf5
}

.v6.v6-acc-nazir .v6-brand strong {
    color: #f4f4fb
}

.v6.v6-acc-nazir .v6-brand em {
    color: #9a9ac0
}

.v6.v6-acc-nazir .v6-kicker {
    color: #a9a9cc
}

.v6.v6-acc-nazir .v6-unit {
    color: #f4f4fb
}

.v6.v6-acc-nazir .v6-sub {
    color: #a9a9cc
}

.v6.v6-acc-nazir .v6-foot {
    color: #9a9ac0
}

.v6.v6-acc-nazir .v6-grid {
    background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)
}

.v9 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: radial-gradient(140% 100% at 50% -10%,#123,#0a1730 45%,#050b1c);
    color: #eaf2ff
}

.v9-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden
}

.v9-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    animation: pulseSoft 9s ease-in-out infinite
}

.v9-aurora-a {
    width: 60vw;
    height: 60vw;
    top: -12%;
    left: -18%;
    background: #1eb5a6
}

.v9-aurora-b {
    width: 55vw;
    height: 55vw;
    top: 8%;
    right: -22%;
    background: #2f6bff;
    animation-delay: 1.5s
}

.v9-aurora-c {
    width: 50vw;
    height: 50vw;
    bottom: -18%;
    left: 10%;
    background: #7a3cff;
    opacity: .4;
    animation-delay: 3s
}

.v9-stars {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 70% 20%,rgba(255,255,255,.55),transparent),radial-gradient(1.5px 1.5px at 40% 70%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 85% 60%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 55% 90%,rgba(255,255,255,.45),transparent)
}

.v9-wrap {
    position: relative;
    z-index: 1;
    width: min(480px,100%);
    margin: 0 auto;
    padding: 18px 18px 32px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.v9-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: rise .5s ease both
}

.v9-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.v9-brand img {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    object-fit: cover;
    box-shadow: 0 8px 22px #0006
}

.v9-brand strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em
}

.v9-brand em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #93b4e6;
    margin-top: 2px
}

.v9-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ffffff14;
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.v9-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ee6a6;
    box-shadow: 0 0 #2ee6a6b3;
    animation: pulseSoft 1.6s ease-in-out infinite
}

.v9-card {
    position: relative;
    border-radius: 26px;
    padding: 26px 22px 22px;
    background: linear-gradient(180deg,#ffffff1c,#ffffff0a);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 30px 70px #00000073,inset 0 1px #ffffff2e;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: hidden;
    animation: rise .6s ease both .08s
}

.v9-card-glow {
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translate(-50%);
    width: 120%;
    height: 60%;
    background: radial-gradient(ellipse,rgba(120,200,255,.28),transparent 70%);
    pointer-events: none
}

.v9-kicker {
    position: relative;
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #9fc0f0
}

.v9-title {
    position: relative;
    margin: 6px 0 16px;
    text-align: center;
    line-height: .98
}

.v9-sum {
    display: block;
    font-size: clamp(52px,17vw,74px);
    font-weight: 900;
    letter-spacing: -.03em;
    background: linear-gradient(180deg,#fff,#b8e0ff 60%,#6fb3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums
}

.v9-unit {
    display: block;
    margin-top: 2px;
    font-size: clamp(18px,6vw,24px);
    font-weight: 800;
    color: #dbe9ff
}

.v9-note {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto 16px;
    width: min(320px,100%);
    box-shadow: 0 16px 34px #0006
}

.v9-note img {
    width: 100%;
    height: auto
}

.v9-note-shine {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
    animation: v9shine 3.6s ease-in-out infinite
}

@keyframes v9shine {
    0% {
        transform: translate(-120%)
    }

    55%,to {
        transform: translate(120%)
    }
}

.v9-sub {
    margin: 0 0 16px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.5;
    color: #cfdcf2
}

.v9-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px
}

.v9-avatars {
    display: flex
}

.v9-avatars span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #0a1730;
    margin-left: -8px;
    background-size: cover
}

.v9-avatars span:first-child {
    margin-left: 0
}

.v9-avatars span:nth-child(1) {
    background: linear-gradient(135deg,#ffb37a,#ff7a7a)
}

.v9-avatars span:nth-child(2) {
    background: linear-gradient(135deg,#7ad1ff,#4a8bff)
}

.v9-avatars span:nth-child(3) {
    background: linear-gradient(135deg,#9be89b,#37c98a)
}

.v9-avatars span:nth-child(4) {
    background: linear-gradient(135deg,#d3a7ff,#8a5bff)
}

.v9-proof p {
    margin: 0;
    font-size: 13px;
    color: #cfdcf2
}

.v9-proof b {
    color: #fff;
    font-weight: 800
}

.v9-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-bottom: 18px
}

.v9-timer>div {
    text-align: center;
    padding: 10px 4px;
    border-radius: 14px;
    background: #ffffff12;
    border: 1px solid rgba(255,255,255,.12)
}

.v9-timer b {
    display: block;
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff
}

.v9-timer span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #8fb0e2
}

.v9-cta {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.v9-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 56px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 800;
    color: #05122b;
    background: linear-gradient(180deg,#46e0ff,#2f8bff);
    box-shadow: 0 14px 30px #2f8bff66;
    transition: transform .15s ease,box-shadow .15s ease
}

.v9-btn span {
    font-size: 20px
}

.v9-btn:active {
    transform: translateY(1px)
}

.v9-btn-ghost {
    color: #eaf2ff;
    background: #ffffff14;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: none
}

.v9-trust {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px
}

.v9-trust li {
    font-size: 12px;
    font-weight: 600;
    color: #b8cbea
}

.v10 {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: linear-gradient(165deg,#fff5e9,#ffeaf0 45%,#eafaf1);
    color: var(--ink)
}

.v10-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden
}

.v10-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    animation: pulseSoft 8s ease-in-out infinite
}

.v10-blob-a {
    width: 55vw;
    height: 55vw;
    top: -10%;
    left: -15%;
    background: #ffcf87
}

.v10-blob-b {
    width: 55vw;
    height: 55vw;
    bottom: -14%;
    right: -18%;
    background: #8ce0b6;
    animation-delay: 2s
}

.v10-confetti {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(4px 4px at 12% 18%,#ff6b6b,transparent),radial-gradient(4px 4px at 82% 12%,#4a8bff,transparent),radial-gradient(4px 4px at 25% 82%,#1eb53a,transparent),radial-gradient(4px 4px at 70% 78%,#ffb020,transparent),radial-gradient(4px 4px at 90% 45%,#a05bff,transparent),radial-gradient(4px 4px at 8% 55%,#ff8fbf,transparent);
    opacity: .7
}

.v10-wrap {
    position: relative;
    z-index: 1;
    width: min(480px,100%);
    margin: 0 auto;
    padding: 20px 18px 34px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.v10-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: rise .5s ease both
}

.v10-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.v10-brand img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 8px 20px #b4782833
}

.v10-brand strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em
}

.v10-brand em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a06a2a;
    margin-top: 1px
}

.v10-chip {
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff2d6;
    color: #b5730a;
    border: 1px solid #ffd98a
}

.v10-ticket {
    position: relative;
    margin-top: 4px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 60px #5a3c1429;
    overflow: hidden;
    animation: rise .6s ease both .08s
}

.v10-notch {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(165deg,#fff5e9,#eafaf1);
    transform: translateY(-50%);
    box-shadow: inset 0 0 0 1px #0000000a
}

.v10-notch-l {
    left: -15px
}

.v10-notch-r {
    right: -15px
}

.v10-ticket-top {
    padding: 22px 22px 8px;
    text-align: center
}

.v10-ticket-top .flag {
    margin-bottom: 14px
}

.v10-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #c07a17;
    letter-spacing: .03em
}

.v10-title {
    margin: 6px 0 12px;
    line-height: .98
}

.v10-sum {
    display: block;
    font-size: clamp(50px,16vw,70px);
    font-weight: 900;
    letter-spacing: -.03em;
    background: linear-gradient(180deg,#ff8a3c,#e5322c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums
}

.v10-unit {
    display: block;
    font-size: clamp(18px,6vw,24px);
    font-weight: 800;
    color: #2b2118
}

.v10-sub {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #5a5148
}

.v10-perf {
    position: relative;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center
}

.v10-perf:before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    border-top: 2px dashed #e6d3b6
}

.v10-scissors {
    position: relative;
    background: #fff;
    padding: 0 8px;
    font-size: 15px;
    color: #c9a86a
}

.v10-ticket-bot {
    padding: 6px 22px 24px;
    background: linear-gradient(180deg,#fff,#fff9ef)
}

.v10-timer {
    text-align: center;
    margin-bottom: 16px
}

.v10-timer-lab {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #b98a3d;
    margin-bottom: 8px
}

.v10-timer-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.v10-timer-row>div {
    padding: 9px 4px;
    border-radius: 13px;
    background: #fff4dd;
    border: 1px solid #ffe1a8
}

.v10-timer-row b {
    display: block;
    font-size: 23px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #a4560c
}

.v10-timer-row span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #c69a52
}

.v10-cta {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.v10-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 56px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg,#ff9a3d,#f2542d);
    box-shadow: 0 14px 30px #f2542d59;
    transition: transform .15s ease
}

.v10-btn span {
    font-size: 20px
}

.v10-btn:active {
    transform: translateY(1px)
}

.v10-btn-ghost {
    color: #b5480f;
    background: #fff;
    border: 1.5px solid #ffcf9a;
    box-shadow: none
}

.v10-foot {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: #7a6f60
}

.v10-foot b {
    color: #b5480f;
    font-weight: 800
}

.v11 {
    position: relative;
    min-height: 100dvh;
    background: #eceff3
}

.v11-phone {
    width: min(480px,100%);
    margin: 0 auto;
    padding: 10px 16px 130px
}

.v11-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #1c2430;
    padding: 6px 6px 14px
}

.v11-status-r {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.v11-status-r i {
    font-style: normal;
    font-size: 12px
}

.v11-batt {
    width: 22px;
    height: 11px;
    border: 1.5px solid #1c2430;
    border-radius: 3px;
    position: relative
}

.v11-batt:after {
    content: "";
    position: absolute;
    top: 1.5px;
    bottom: 1.5px;
    left: 1.5px;
    right: 6px;
    background: #1c2430;
    border-radius: 1px
}

.v11-lead {
    text-align: center;
    padding: 8px 6px 20px
}

.v11-lead img {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin: 0 auto 12px;
    object-fit: cover;
    box-shadow: 0 6px 16px #14284624
}

.v11-lead h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #12203a
}

.v11-lead h1 b {
    color: #0a7d33
}

.v11-lead p {
    margin: 0;
    font-size: 14px;
    color: #56637a
}

.v11-notifs {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.v11-notif {
    display: flex;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 13px 14px;
    box-shadow: 0 4px 14px #14284614;
    animation: v11in .5s ease both
}

@keyframes v11in {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.v11-notif-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #eaf7ee;
    display: grid;
    place-items: center;
    font-size: 20px;
    flex: none
}

.v11-notif-body {
    flex: 1;
    min-width: 0
}

.v11-notif-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.v11-notif-top strong {
    font-size: 14px;
    font-weight: 800;
    color: #12203a
}

.v11-notif-top span {
    font-size: 11.5px;
    color: #95a0b3
}

.v11-notif-body p {
    margin: 3px 0 1px;
    font-size: 14px;
    color: #2a3547
}

.v11-plus {
    color: #0a7d33;
    font-weight: 800
}

.v11-notif-body em {
    font-style: normal;
    font-size: 12.5px;
    color: #7a8598
}

.v11-count {
    text-align: center;
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7688
}

.v11-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: min(480px,100%);
    margin: 0 auto;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg,#eceff300,#eceff3 32%)
}

.v11-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 56px;
    border-radius: 15px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    background: #0a7d33;
    box-shadow: 0 12px 26px #0a7d3352;
    transition: transform .15s ease
}

.v11-btn span {
    font-size: 20px
}

.v11-btn:active {
    transform: translateY(1px)
}

.v11-dock-note {
    display: block;
    text-align: center;
    margin-top: 9px;
    font-size: 12px;
    color: #7a8598
}

.v12 {
    min-height: 100dvh;
    background: #fff
}

.v12-top {
    width: min(560px,100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f4
}

.v12-brand {
    display: flex;
    align-items: center;
    gap: 8px
}

.v12-brand img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover
}

.v12-brand strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #12203a
}

.v12-date {
    font-size: 12.5px;
    color: #8a94a6
}

.v12-art {
    width: min(560px,100%);
    margin: 0 auto;
    padding: 22px 18px 40px
}

.v12-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ce1126;
    margin-bottom: 12px
}

.v12-title {
    margin: 0 0 16px;
    font-size: clamp(26px,7.5vw,34px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #12203a
}

.v12-title mark {
    background: linear-gradient(transparent 62%,#ffe08a 62%);
    color: inherit;
    padding: 0 2px
}

.v12-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 18px;
    border-bottom: 1px solid #edf0f4;
    margin-bottom: 18px
}

.v12-ava {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #12203a;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800
}

.v12-byline b {
    display: block;
    font-size: 14px;
    color: #12203a
}

.v12-byline em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: #8a94a6;
    margin-top: 1px
}

.v12-fig {
    margin: 0 0 18px
}

.v12-fig img {
    width: 100%;
    border-radius: 14px
}

.v12-fig figcaption {
    font-size: 12.5px;
    color: #8a94a6;
    margin-top: 8px
}

.v12-lead {
    font-size: 17px;
    line-height: 1.6;
    color: #2a3547;
    margin: 0 0 18px
}

.v12-facts {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.v12-facts li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 15px;
    color: #2a3547;
    padding-left: 14px;
    border-left: 3px solid #0a7d33
}

.v12-facts b {
    font-size: 19px;
    font-weight: 800;
    color: #0a7d33;
    min-width: 84px
}

.v12-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 56px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    background: #0a7d33;
    box-shadow: 0 12px 26px #0a7d3347;
    transition: transform .15s ease
}

.v12-btn span {
    font-size: 20px
}

.v12-btn:active {
    transform: translateY(1px)
}

.v12-note {
    text-align: center;
    font-size: 12.5px;
    color: #8a94a6;
    margin: 10px 0 0
}

.v13 {
    position: relative;
    min-height: 100dvh;
    background: #0f1420;
    color: #e7ecf5
}

.v13-wrap {
    width: min(480px,100%);
    margin: 0 auto;
    padding: 16px 16px 150px
}

.v13-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.v13-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.v13-brand img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    object-fit: cover
}

.v13-brand strong {
    display: block;
    font-size: 15px;
    font-weight: 800
}

.v13-brand em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #7d8aa3;
    margin-top: 2px
}

.v13-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    color: #34e08a;
    background: #34e08a1f;
    border: 1px solid rgba(52,224,138,.3);
    padding: 6px 12px;
    border-radius: 999px
}

.v13-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34e08a;
    animation: pulseSoft 1.4s ease-in-out infinite
}

.v13-hero {
    text-align: center;
    padding: 26px 6px 20px
}

.v13-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #8ea2c4
}

.v13-hero h1 {
    margin: 6px 0 8px;
    font-size: clamp(30px,9vw,40px);
    font-weight: 800;
    letter-spacing: -.02em
}

.v13-hero h1 b {
    color: #34e08a
}

.v13-sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #b3bfd6
}

.v13-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 16px;
    border-radius: 16px;
    background: #161d2d;
    border: 1px solid #232c40;
    margin-bottom: 18px
}

.v13-total span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7d8aa3
}

.v13-total b {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff
}

.v13-list-lab {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7d8aa3;
    margin-bottom: 10px
}

.v13-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.v13-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #161d2d;
    border: 1px solid #232c40;
    border-radius: 13px;
    padding: 11px 14px;
    animation: v11in .5s ease both
}

.v13-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #34e08a;
    flex: none;
    box-shadow: 0 0 0 4px #34e08a24
}

.v13-who {
    flex: 1;
    min-width: 0
}

.v13-who b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #eef2fa
}

.v13-who em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: #8794ad;
    margin-top: 1px
}

.v13-amt {
    font-size: 15px;
    font-weight: 800;
    color: #34e08a;
    font-variant-numeric: tabular-nums
}

.v13-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: min(480px,100%);
    margin: 0 auto;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg,#0f142000,#0f1420 34%)
}

.v13-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 56px;
    border-radius: 15px;
    font-size: 17px;
    font-weight: 800;
    color: #06301b;
    background: #34e08a;
    box-shadow: 0 12px 28px #34e08a47;
    transition: transform .15s ease
}

.v13-btn span {
    font-size: 20px
}

.v13-btn:active {
    transform: translateY(1px)
}

.v13-dock-note {
    display: block;
    text-align: center;
    margin-top: 9px;
    font-size: 12px;
    color: #8794ad
}

.v14 {
    min-height: 100dvh;
    background: #0a3d73;
    color: #fff
}

.v14-wrap {
    width: min(480px,100%);
    margin: 0 auto;
    min-height: 100dvh;
    padding: 22px 22px calc(26px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column
}

.v14-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.v14-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.v14-brand img {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover
}

.v14-brand strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em
}

.v14-head .flag {
    margin: 0;
    width: 84px
}

.v14-mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 24px 0
}

.v14-kicker {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #a9cdf2
}

.v14-title {
    margin: 0;
    line-height: .92
}

.v14-sum {
    display: block;
    white-space: nowrap;
    font-size: clamp(52px,17vw,92px);
    font-weight: 900;
    letter-spacing: -.04em;
    color: #ffd23f;
    font-variant-numeric: tabular-nums
}

.v14-unit {
    display: block;
    font-size: clamp(24px,8vw,34px);
    font-weight: 800;
    margin-top: 2px
}

.v14-rule {
    display: block;
    width: 64px;
    height: 5px;
    border-radius: 3px;
    background: #ffd23f;
    margin: 18px auto
}

.v14-sub {
    margin: 0 auto;
    max-width: 22ch;
    font-size: 16px;
    line-height: 1.5;
    color: #d7e6f7
}

.v14-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-top: 26px
}

.v14-timer>div {
    padding: 10px 4px;
    border-radius: 13px;
    background: #ffffff1a;
    border: 1px solid rgba(255,255,255,.16)
}

.v14-timer b {
    display: block;
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.v14-timer span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #a9cdf2
}

.v14-foot {
    margin-top: 8px
}

.v14-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 60px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 900;
    color: #0a3d73;
    background: #ffd23f;
    box-shadow: 0 14px 30px #00000047;
    transition: transform .15s ease
}

.v14-btn span {
    font-size: 21px
}

.v14-btn:active {
    transform: translateY(1px)
}

.v14-note {
    text-align: center;
    margin: 12px 0 0;
    font-size: 12.5px;
    color: #a9cdf2
}

.v15 {
    min-height: 100dvh;
    background: #f5f7fa
}

.v15-wrap {
    width: min(480px,100%);
    margin: 0 auto;
    padding: 18px 18px calc(28px + env(safe-area-inset-bottom))
}

.v15-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.v15-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.v15-brand img {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover;
    box-shadow: 0 6px 16px #1428461f
}

.v15-brand strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #12203a
}

.v15-brand em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a94a6;
    margin-top: 2px
}

.v15-chip {
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 999px;
    background: #e7f7ee;
    color: #0a7d33;
    border: 1px solid #b6e6c8
}

.v15-hero {
    text-align: center;
    padding: 26px 6px 22px
}

.v15-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0a7d33
}

.v15-hero h1 {
    margin: 6px 0 8px;
    font-size: clamp(30px,9vw,40px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #12203a
}

.v15-hero h1 b {
    color: #0a7d33
}

.v15-sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #56637a
}

.v15-steps {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: st
}

.v15-steps li {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 14px #1428460d
}

.v15-num {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: #0a7d33;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800
}

.v15-steps strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #12203a;
    margin-bottom: 3px
}

.v15-steps p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6b7688
}

.v15-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 58px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    background: #0a7d33;
    box-shadow: 0 14px 30px #0a7d334d;
    transition: transform .15s ease
}

.v15-btn span {
    font-size: 20px
}

.v15-btn:active {
    transform: translateY(1px)
}

.v15-note {
    text-align: center;
    margin: 12px 0 0;
    font-size: 12.5px;
    color: #8a94a6
}