:root {
    --bg: #07020f;
    --bg-2: #100524;
    --purple-950: #800080;
    --purple-900: #800090;
    --purple-700: #6e22ff;
    --purple-500: #a855f7;
    --purple-300: #d8b4fe;
    --pink: #ff3dc8;
    --cyan: #4ee7ff;
    --green: #20e39b;
    --gold: #ffd166;
    --white: #ffffff;
    --ink: #131027;
    --muted: #746b8b;
    --glass: rgba(255, 255, 255, .08);
    --glass-strong: rgba(255, 255, 255, .14);
    --line: rgba(255, 255, 255, .16);
    --dark-line: rgba(31, 14, 65, .11);
    --shadow-purple: 0 28px 90px rgba(109, 34, 255, .28);
    --shadow-soft: 0 22px 70px rgba(21, 5, 48, .14);
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    padding: 0;
    color: var(--ink);
    background: #fbf8ff;
    font-family: "Inter", Arial, sans-serif;
    line-height: 1.6;
    overflow-x: clip;
}

body.menu-open {
    overflow: hidden;
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

.container {
    width: min(100% - 32px, 1280px);
    margin: 0 auto;
}

.section {
    position: relative;
    padding: 50px 0;
}

.page-glow {
    position: fixed;
    inset: auto -120px -180px auto;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, .22), transparent 68%);
    filter: blur(20px);
}

.site-header {
    position: fixed;
    top: 16px;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    transition: all .3s ease;
}

.nav-shell {
    width: min(100% - 32px, 1280px);
    min-height: 68px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 14px 6px 16px;
    border: 1px solid rgba(126, 42, 160, .16);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 38px rgba(105, 24, 120, .15), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(22px);
    transition: all .3s ease;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 198px;
    padding-right: 18px;
    border-right: 1px solid rgba(126, 42, 160, .16);
}

.brand img {
    width: 174px;
    height: 48px;
    object-fit: contain;
}

.nav-links {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.nav-item {
    position: relative;
}

.nav-item.has-mega::before {
    content: "";
    position: absolute;
    left: -18px;
    right: -18px;
    top: 100%;
    height: 26px;
    pointer-events: none;
}

.nav-item.has-mega:hover::before,
.nav-item.has-mega.mega-open::before {
    pointer-events: auto;
}

.nav-link,
.nav-links > a {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 18px;
    color: #472052;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}

.nav-link i,
.nav-links > a i {
    color: #78248d;
    font-size: 15px;
}

.nav-link:hover,
.nav-link.active,
.nav-links > a:hover {
    color: #5b126f;
    background: linear-gradient(180deg, rgba(126, 42, 160, .11), rgba(255,255,255,.72));
    box-shadow: inset 0 0 0 1px rgba(126, 42, 160, .08);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -8px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7a238f, #b645cf);
    box-shadow: 0 0 16px rgba(126, 42, 160, .36);
}

.mega-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 22px);
    width: min(760px, calc(100vw - 44px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(126, 42, 160, .14);
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 70px rgba(65, 18, 82, .18), inset 0 1px 0 rgba(255,255,255,.9);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px) scale(.98);
    transform-origin: top center;
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
    pointer-events: none;
    backdrop-filter: blur(22px);
}

.has-mega:hover .mega-menu,
.has-mega.mega-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
}

.mega-column {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(250,242,255,.92), rgba(255,255,255,.86));
}

.mega-column h3 {
    margin: 0 0 12px;
    color: #441050;
    font-size: 14px;
    font-weight: 950;
}

.mega-column a {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 12px;
    color: #5d3a65;
    font-size: 13px;
    font-weight: 800;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.mega-column a i {
    width: 18px;
    color: #8327a0;
    text-align: center;
}

.mega-column a:hover {
    color: #60116f;
    background: rgba(126, 42, 160, .1);
    transform: translateX(3px);
}

.menu-toggle {
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(126, 42, 160, .18);
    border-radius: 50%;
    background: rgba(126, 42, 160, .06);
}

.menu-toggle span {
    width: 19px;
    height: 2px;
    display: block;
    background: #6d1b7b;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 18px;
    border-left: 1px solid rgba(126, 42, 160, .16);
}

.btn,
.nav-cta {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.btn:hover,
.nav-cta:hover {
    transform: translateY(-3px);
}

.btn-primary,
.nav-cta {
    color: #fff;
    background: linear-gradient(135deg, #5e176b, #8d2a9d 52%, #5e176b);
    box-shadow: 0 16px 34px rgba(94, 23, 107, .32), inset 0 1px 0 rgba(255,255,255,.28);
}

.header-bell {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(126, 42, 160, .22);
    border-radius: 50%;
    color: #7a238f;
    background: #fff;
    box-shadow: 0 12px 30px rgba(94, 23, 107, .14);
    cursor: pointer;
}

.header-bell::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #7a238f;
}

.btn-secondary {
    color: #210b38;
    background: linear-gradient(135deg, #ffd166, #ffe7a2);
    box-shadow: 0 18px 44px rgba(255, 209, 102, .24);
}

.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
}

.shine::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -80%;
    width: 50%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), transparent);
    animation: shine 3.2s ease-in-out infinite;
}

@keyframes shine {
    0%, 45% { left: -80%; }
    70%, 100% { left: 130%; }
}

.hero {
    position: relative;
    min-height: calc(100vh + 54px);
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 94px 0 96px;
    margin-bottom: 0;
    color: #fff;
    background:
        radial-gradient(circle at 50% 20%, rgba(168,85,247,.18), transparent 32%),
        linear-gradient(135deg, #07020f 0%, #17042f 44%, #320a5d 100%);
}

.hero-bg,
.hero-bg span {
    position: absolute;
    pointer-events: none;
}

.hero-bg {
    inset: 0;
}

.grid-light {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
}

.blob {
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(42px);
    opacity: .72;
    animation: blobMove 12s ease-in-out infinite alternate;
}

.blob-one {
    left: -110px;
    top: 80px;
    background: #6e22ff;
}

.blob-two {
    right: -120px;
    top: 30px;
    background: #ff3dc8;
    animation-delay: -4s;
}

.blob-three {
    left: 45%;
    bottom: -220px;
    background: #4ee7ff;
    animation-delay: -7s;
}

@keyframes blobMove {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(54px, -38px, 0) scale(1.16); }
}

.orbit {
    width: 540px;
    height: 540px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    animation: spin 24s linear infinite;
}

.orbit::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    top: -6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 30px var(--cyan);
}

.orbit-one {
    right: 5%;
    top: 15%;
}

.orbit-two {
    width: 360px;
    height: 360px;
    left: 8%;
    bottom: 4%;
    animation-duration: 18s;
}

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

.hero-grid,
.opportunity-grid,
.distributor-grid,
.dashboard-grid,
.faq-grid,
.contact-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: clamp(32px, 4.5vw, 64px);
}

.hero-grid {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
}

.eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 12px;
    border: 1px solid rgba(168,85,247,.22);
    border-radius: 999px;
    color: #5d19d8;
    background: rgba(168,85,247,.1);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.hero .eyebrow,
.opportunity .eyebrow,
.distributor-section .eyebrow,
.contact .eyebrow {
    color: #fff;
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.11);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 760px;
    margin-bottom: 22px;
    font-size: clamp(40px, 5.6vw, 76px);
    line-height: .98;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 16px;
    color: #140626;
    font-size: clamp(30px, 3.8vw, 52px);
    line-height: 1.08;
    letter-spacing: 0;
}

h3 {
    margin-bottom: 10px;
    color: #16072b;
    font-size: 20px;
    line-height: 1.2;
}

.hero-text {
    max-width: 650px;
    margin-bottom: 28px;
    color: rgba(255,255,255,.76);
    font-size: 18px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: min(860px, calc(100vw - 32px));
    max-width: none;
    margin-top: 28px;
}

.glass-card {
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
    box-shadow: var(--shadow-purple), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
}

.hero-stat-card {
    position: relative;
    min-height: 84px;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 16px 22px;
    border: 1px solid rgba(190,133,255,.34);
    border-radius: 16px;
    background:
        linear-gradient(115deg, rgba(255,255,255,.09), transparent 38%),
        radial-gradient(circle at 18% 50%, rgba(110,34,255,.2), transparent 34%),
        linear-gradient(135deg, rgba(9,3,20,.94), rgba(28,7,50,.9));
    box-shadow:
        0 14px 34px rgba(0,0,0,.26),
        0 0 22px rgba(168,85,247,.16),
        inset 0 0 0 1px rgba(255,255,255,.06);
    clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
    backdrop-filter: blur(18px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hero-stat-card:nth-child(1) {
    border-color: rgba(139,92,246,.42);
    background:
        linear-gradient(115deg, rgba(255,255,255,.1), transparent 38%),
        radial-gradient(circle at 18% 50%, rgba(109,40,255,.22), transparent 34%),
        linear-gradient(135deg, rgba(109,40,255,.92), rgba(139,92,246,.78) 48%, rgba(76,29,149,.92));
    box-shadow:
        0 14px 34px rgba(0,0,0,.26),
        0 0 22px rgba(139,92,246,.2),
        inset 0 0 0 1px rgba(255,255,255,.07);
}

.hero-stat-card:nth-child(1) .hero-stat-icon {
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.36), transparent 28%),
        linear-gradient(135deg, #6d28ff, #8b5cf6 55%, #4c1d95);
    box-shadow: 0 0 20px rgba(139,92,246,.5);
}

.hero-stat-card:nth-child(1):hover {
    border-color: rgba(196,181,253,.68);
    box-shadow:
        0 18px 42px rgba(0,0,0,.3),
        0 0 30px rgba(139,92,246,.32),
        inset 0 0 0 1px rgba(255,255,255,.09);
}

.hero-stat-card:nth-child(2) {
    border-color: rgba(79,70,229,.42);
    background:
        linear-gradient(115deg, rgba(255,255,255,.1), transparent 38%),
        radial-gradient(circle at 18% 50%, rgba(37,99,235,.22), transparent 34%),
        linear-gradient(135deg, rgba(37,99,235,.92), rgba(79,70,229,.78) 48%, rgba(30,58,138,.92));
    box-shadow:
        0 14px 34px rgba(0,0,0,.26),
        0 0 22px rgba(79,70,229,.2),
        inset 0 0 0 1px rgba(255,255,255,.07);
}

.hero-stat-card:nth-child(2) .hero-stat-icon {
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.36), transparent 28%),
        linear-gradient(135deg, #2563eb, #4f46e5 55%, #1e3a8a);
    box-shadow: 0 0 20px rgba(79,70,229,.5);
}

.hero-stat-card:nth-child(2):hover {
    border-color: rgba(147,197,253,.68);
    box-shadow:
        0 18px 42px rgba(0,0,0,.3),
        0 0 30px rgba(79,70,229,.34),
        inset 0 0 0 1px rgba(255,255,255,.09);
}

.hero-stat-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(168,85,247,.24), transparent 45%, rgba(255,61,200,.16));
    clip-path: inherit;
}

.hero-stat-card::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 22px;
    bottom: 22px;
    width: 1px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(168,85,247,.95), rgba(255,61,200,.88), transparent);
    box-shadow: 0 0 12px rgba(168,85,247,.52);
}

.hero-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(216,180,254,.58);
    box-shadow:
        0 18px 42px rgba(0,0,0,.3),
        0 0 26px rgba(168,85,247,.22),
        inset 0 0 0 1px rgba(255,255,255,.08);
}

.hero-stat-card.highlight {
    border-color: rgba(255,176,57,.42);
    background:
        linear-gradient(115deg, rgba(255,255,255,.09), transparent 38%),
        radial-gradient(circle at 18% 50%, rgba(255,126,0,.18), transparent 36%),
        linear-gradient(135deg, rgba(9,3,20,.94), rgba(42,12,28,.9));
    box-shadow:
        0 14px 34px rgba(0,0,0,.26),
        0 0 22px rgba(255,126,0,.16),
        inset 0 0 0 1px rgba(255,255,255,.06);
}

.hero-stat-card.highlight::after {
    background: linear-gradient(180deg, transparent, rgba(255,176,57,.98), rgba(255,61,0,.9), transparent);
    box-shadow: 0 0 12px rgba(255,126,0,.54);
}

.hero-stat-card.highlight:hover {
    border-color: rgba(255,190,87,.68);
    box-shadow:
        0 18px 42px rgba(0,0,0,.3),
        0 0 26px rgba(255,126,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.08);
}

.hero-stat-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.34), transparent 28%),
        linear-gradient(135deg, #5426ff, #8f2cff);
    box-shadow: 0 0 20px rgba(142,44,255,.48);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    font-size: 23px;
}

.hero-stat-card.highlight .hero-stat-icon {
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.38), transparent 28%),
        linear-gradient(135deg, #ffb000, #ff5b00);
    box-shadow: 0 0 20px rgba(255,126,0,.5);
    border-radius: 50%;
    clip-path: none;
}

.hero-stat-copy {
    display: block;
    min-width: 0;
}

.hero-stat-copy strong,
.hero-stat-copy em {
    display: block;
    letter-spacing: 0;
}

.hero-stat-copy strong {
    color: #fff;
    font-size: clamp(25px, 2.35vw, 36px);
    font-weight: 950;
    line-height: .98;
    text-shadow: 0 0 18px rgba(255,255,255,.18);
}

.hero-stat-copy em {
    margin-top: 4px;
    color: rgba(255,255,255,.68);
    font-size: clamp(14px, 1.15vw, 18px);
    font-style: normal;
    font-weight: 750;
    line-height: 1.1;
}

.hero-stage {
    position: relative;
    min-height: 560px;
    perspective: 1200px;
}

.hero-image-visual {
    position: relative;
    min-height: 540px;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    transition: transform .25s ease;
}

.hero-image-visual::before,
.hero-image-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-image-visual::before {
    width: min(78vw, 560px);
    height: min(78vw, 560px);
    background:
        radial-gradient(circle at 32% 34%, rgba(168,85,247,.34), transparent 34%),
        radial-gradient(circle at 70% 62%, rgba(78,231,255,.24), transparent 34%);
    filter: blur(28px);
    animation: heroBlurFloat 8s ease-in-out infinite alternate;
}

.hero-image-visual::after {
    width: min(66vw, 470px);
    height: min(66vw, 470px);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 0 70px rgba(168,85,247,.24), inset 0 0 50px rgba(78,231,255,.08);
    animation: heroRingPulse 3.8s ease-in-out infinite;
}

.hero-image-frame {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
    min-height: 430px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
    box-shadow:
        0 30px 90px rgba(0,0,0,.28),
        0 0 58px rgba(168,85,247,.28),
        inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(18px);
    animation: heroImageFloat 5s ease-in-out infinite;
}

.hero-image-frame::before {
    content: "";
    position: absolute;
    inset: -45% auto -45% -70%;
    width: 52%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    animation: heroImageShine 4.2s ease-in-out infinite;
}

.hero-image-frame img {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    max-height: 420px;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(0,0,0,.26));
}

.hero-image-ring {
    position: absolute;
    z-index: 1;
    width: min(68vw, 500px);
    height: min(68vw, 500px);
    border-radius: 50%;
    border: 1px solid rgba(78,231,255,.18);
    box-shadow: 0 0 42px rgba(78,231,255,.16);
    animation: heroRingPulse 4.6s ease-in-out infinite .6s;
}

.hero-image-particle {
    position: absolute;
    z-index: 3;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ee7ff;
    box-shadow: 0 0 22px rgba(78,231,255,.9);
    animation: particleDrift 4.8s ease-in-out infinite;
}

.hero-image-particle.p1 { left: 12%; top: 20%; }
.hero-image-particle.p2 { right: 14%; top: 28%; width: 8px; height: 8px; background: #d8b4fe; animation-delay: -1s; }
.hero-image-particle.p3 { left: 18%; bottom: 18%; width: 7px; height: 7px; background: #ff3dc8; animation-delay: -2s; }
.hero-image-particle.p4 { right: 20%; bottom: 16%; width: 9px; height: 9px; animation-delay: -3s; }

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

@keyframes heroBlurFloat {
    from { transform: translate3d(-18px, 12px, 0) scale(.96); }
    to { transform: translate3d(22px, -16px, 0) scale(1.04); }
}

@keyframes heroRingPulse {
    0%, 100% { transform: scale(.96); opacity: .68; }
    50% { transform: scale(1.04); opacity: 1; }
}

@keyframes heroImageShine {
    0%, 50% { left: -70%; }
    78%, 100% { left: 130%; }
}

@keyframes particleDrift {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: .58; }
    50% { transform: translate3d(12px, -18px, 0); opacity: 1; }
}

/* Premium Royal Purple + Golden hero treatment */
.hero {
    background:
        radial-gradient(circle at 20% 20%, rgba(128,0,128,.34), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(244,196,48,.18), transparent 28%),
        radial-gradient(circle at 52% 78%, rgba(156,39,176,.22), transparent 34%),
        linear-gradient(135deg, #07020f 0%, #240024 42%, #5a005a 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 6%, rgba(255,255,255,.08) 18%, transparent 34%),
        radial-gradient(circle at 16% 64%, rgba(255,193,7,.12), transparent 24%);
    mix-blend-mode: screen;
    animation: meshShift 8s ease-in-out infinite alternate;
}

.hero .blob-one {
    background: #800080;
}

.hero .blob-two {
    background: #9c27b0;
}

.hero .blob-three {
    background: #f4c430;
    opacity: .42;
}

.hero .orbit {
    border-color: rgba(244,196,48,.18);
    box-shadow: 0 0 46px rgba(128,0,128,.18);
}

.hero .orbit::before {
    background: #ffc107;
    box-shadow: 0 0 28px rgba(255,193,7,.9);
}

.hero-beam {
    width: 48vw;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(244,196,48,.36), transparent);
    filter: blur(1px);
    animation: beamSweep 6s ease-in-out infinite;
}

.beam-one {
    left: 4%;
    top: 28%;
    --beam-rotate: -12deg;
    transform: rotate(-12deg);
}

.beam-two {
    right: -8%;
    bottom: 22%;
    --beam-rotate: 16deg;
    transform: rotate(16deg);
    animation-delay: -2.2s;
}

.sparkle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffc107;
    box-shadow: 0 0 22px rgba(255,193,7,.88);
    animation: sparkleFloat 4.8s ease-in-out infinite;
}

.s1 { left: 12%; top: 28%; }
.s2 { left: 34%; top: 18%; animation-delay: -1.1s; }
.s3 { right: 24%; top: 32%; animation-delay: -2.1s; }
.s4 { right: 38%; bottom: 18%; animation-delay: -3s; }

.hero-copy {
    position: relative;
}

.hero-left-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fin-icon {
    position: absolute;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244,196,48,.24);
    border-radius: 14px;
    color: #ffc107;
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(128,0,128,.18));
    box-shadow: 0 0 28px rgba(128,0,128,.28);
    backdrop-filter: blur(14px);
    animation: floatY 5.5s ease-in-out infinite;
}

.fi-one { right: 7%; top: -18px; }
.fi-two { right: 18%; bottom: 34%; animation-delay: -1.8s; }
.fi-three { left: -10px; bottom: 15%; animation-delay: -3s; }

.decor-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f4c430;
    box-shadow: 0 0 20px rgba(244,196,48,.8);
    animation: particleDrift 5s ease-in-out infinite;
}

.decor-dot.d1 { left: 8%; top: 20%; }
.decor-dot.d2 { right: 12%; top: 48%; animation-delay: -2s; }

.decor-line {
    position: absolute;
    left: -18px;
    bottom: 28%;
    width: 160px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244,196,48,.5), transparent);
    transform: rotate(-18deg);
    animation: beamSweep 5.8s ease-in-out infinite -1.4s;
}

.hero .eyebrow {
    position: relative;
    overflow: hidden;
    border-color: rgba(244,196,48,.26);
    color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(128,0,128,.2));
    box-shadow: 0 0 28px rgba(128,0,128,.22), inset 0 1px 0 rgba(255,255,255,.18);
    animation: badgeBreath 4s ease-in-out infinite;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffc107;
    box-shadow: 0 0 0 5px rgba(255,193,7,.14), 0 0 18px rgba(255,193,7,.9);
    animation: goldPulse 2.4s ease-in-out infinite;
}

.hero h1 {
    color: transparent;
    background: linear-gradient(105deg, #fff 0%, #ffe8a3 22%, #f4c430 38%, #fff 56%, #d8b4fe 76%, #fff 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 34px rgba(244,196,48,.12);
    animation: headingReveal .9s ease-out both, textShine 5.8s ease-in-out infinite 1s;
}

.hero-text {
    line-height: 1.72;
    color: rgba(255,255,255,.78);
    animation: fadeUpSoft .9s ease-out .16s both;
}

.hero .btn {
    will-change: transform;
}

.hero .btn-primary {
    background: linear-gradient(135deg, #800080, #9c27b0 52%, #5a005a);
    box-shadow: 0 18px 44px rgba(128,0,128,.32), inset 0 1px 0 rgba(255,255,255,.28);
}

.hero .btn-secondary {
    color: #2a1430;
    background: linear-gradient(135deg, #ffc107, #f4c430 58%, #ffb300);
    box-shadow: 0 18px 42px rgba(244,196,48,.28), inset 0 1px 0 rgba(255,255,255,.42);
}

.hero .btn-ghost {
    border-color: rgba(244,196,48,.28);
    background: rgba(128,0,128,.18);
}

.hero .btn:hover {
    box-shadow: 0 22px 54px rgba(128,0,128,.36), 0 0 26px rgba(244,196,48,.16);
}

.btn-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    animation: rippleOut .62s ease-out forwards;
}

.hero-stat-card:hover {
    transform: translateY(-6px) scale(1.02);
}

.hero-stat-card:nth-child(1) {
    border-color: rgba(244,196,48,.18);
    background:
        linear-gradient(115deg, rgba(255,255,255,.1), transparent 40%),
        radial-gradient(circle at 18% 50%, rgba(244,196,48,.13), transparent 34%),
        linear-gradient(135deg, rgba(128,0,128,.92), rgba(156,39,176,.78) 50%, rgba(90,0,90,.92));
    box-shadow: 0 14px 34px rgba(0,0,0,.26), 0 0 24px rgba(128,0,128,.26), inset 0 0 0 1px rgba(255,255,255,.07);
}

.hero-stat-card:nth-child(1) .hero-stat-icon {
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg, #800080, #9c27b0 58%, #5a005a);
    box-shadow: 0 0 22px rgba(128,0,128,.54);
}

.hero-stat-card:nth-child(1):hover {
    border-color: rgba(244,196,48,.34);
    box-shadow: 0 20px 48px rgba(0,0,0,.3), 0 0 34px rgba(128,0,128,.34), inset 0 0 0 1px rgba(255,255,255,.09);
}

.hero-stat-card:nth-child(2) {
    border-color: rgba(244,196,48,.38);
    background:
        linear-gradient(115deg, rgba(255,255,255,.1), transparent 40%),
        radial-gradient(circle at 18% 50%, rgba(244,196,48,.16), transparent 35%),
        linear-gradient(135deg, rgba(90,0,90,.96), rgba(128,0,128,.82) 48%, rgba(47,0,47,.94));
    box-shadow: 0 14px 34px rgba(0,0,0,.26), 0 0 24px rgba(244,196,48,.18), inset 0 0 0 1px rgba(255,255,255,.07);
}

.hero-stat-card:nth-child(2) .hero-stat-icon {
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg, #ffc107, #f4c430 56%, #ffb300);
    color: #3b113b;
    box-shadow: 0 0 22px rgba(244,196,48,.44);
}

.hero-stat-card:nth-child(2):hover {
    border-color: rgba(255,193,7,.62);
    box-shadow: 0 20px 48px rgba(0,0,0,.3), 0 0 34px rgba(244,196,48,.28), inset 0 0 0 1px rgba(255,255,255,.09);
}

.hero-stat-card.highlight {
    border-color: rgba(128,0,128,.52);
    background:
        linear-gradient(115deg, rgba(255,255,255,.14), transparent 38%),
        radial-gradient(circle at 18% 50%, rgba(128,0,128,.14), transparent 34%),
        linear-gradient(135deg, rgba(255,193,7,.94), rgba(244,196,48,.84) 52%, rgba(255,179,0,.92));
    box-shadow: 0 14px 34px rgba(0,0,0,.24), 0 0 24px rgba(244,196,48,.2), inset 0 0 0 1px rgba(255,255,255,.18);
}

.hero-stat-card.highlight .hero-stat-copy strong,
.hero-stat-card.highlight .hero-stat-copy em {
    color: #2a1430;
    text-shadow: none;
}

.hero-stat-card.highlight .hero-stat-icon {
    color: #fff;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg, #800080, #9c27b0 58%, #5a005a);
    box-shadow: 0 0 22px rgba(128,0,128,.42);
}

.hero-stat-card.highlight:hover {
    border-color: rgba(128,0,128,.72);
    box-shadow: 0 20px 48px rgba(0,0,0,.3), 0 0 34px rgba(244,196,48,.3), inset 0 0 0 1px rgba(255,255,255,.2);
}

.hero-image-visual::before {
    background:
        radial-gradient(circle at 32% 34%, rgba(128,0,128,.34), transparent 34%),
        radial-gradient(circle at 70% 62%, rgba(244,196,48,.24), transparent 34%);
}

.hero-image-visual::after,
.hero-image-ring {
    border-color: rgba(244,196,48,.2);
    box-shadow: 0 0 62px rgba(128,0,128,.22), inset 0 0 44px rgba(244,196,48,.1);
}

.hero-image-frame {
    border-color: rgba(244,196,48,.18);
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(128,0,128,.08));
    box-shadow:
        0 30px 90px rgba(0,0,0,.28),
        0 0 58px rgba(128,0,128,.28),
        0 0 26px rgba(244,196,48,.1),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.hero-image-particle {
    background: #ffc107;
    box-shadow: 0 0 20px rgba(255,193,7,.86);
}

.hero-image-particle.p2 {
    background: #9c27b0;
    box-shadow: 0 0 20px rgba(156,39,176,.76);
}

.hero-image-particle.p3 {
    background: #f4c430;
    box-shadow: 0 0 20px rgba(244,196,48,.82);
}

@keyframes meshShift {
    from { opacity: .56; transform: translate3d(-18px, 0, 0); }
    to { opacity: .9; transform: translate3d(22px, -10px, 0); }
}

@keyframes beamSweep {
    0%, 100% { opacity: .18; transform: translateX(-18px) rotate(var(--beam-rotate, 0deg)); }
    50% { opacity: .76; transform: translateX(24px) rotate(var(--beam-rotate, 0deg)); }
}

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) scale(.75); opacity: .4; }
    50% { transform: translateY(-18px) scale(1.18); opacity: 1; }
}

@keyframes badgeBreath {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 24px rgba(128,0,128,.2); }
    50% { transform: translateY(-4px); box-shadow: 0 0 34px rgba(244,196,48,.14), 0 0 30px rgba(128,0,128,.28); }
}

@keyframes goldPulse {
    0%, 100% { transform: scale(.9); opacity: .75; }
    50% { transform: scale(1.18); opacity: 1; }
}

@keyframes headingReveal {
    from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes textShine {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

@keyframes fadeUpSoft {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rippleOut {
    to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

.phone-panel {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--radius);
}

.phone-panel::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,61,200,.34), transparent 68%);
}

.panel-top,
.mock-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #fff;
}

.panel-top span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 8px rgba(32,227,155,.14), 0 0 24px rgba(32,227,155,.8);
}

.amount-card {
    margin-top: 28px;
    padding: 24px;
    border-radius: var(--radius);
    color: #210b38;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,225,255,.86));
}

.amount-card small,
.amount-card em {
    display: block;
    color: #6b5b82;
    font-style: normal;
    font-weight: 750;
}

.amount-card strong {
    display: block;
    margin: 8px 0;
    color: #3c0c78;
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1;
}

.mini-chart {
    height: 150px;
    display: flex;
    align-items: end;
    gap: 14px;
    margin-top: 26px;
    padding: 22px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.07);
}

.mini-chart span,
.mock-graph i {
    flex: 1;
    min-height: 28px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, var(--cyan), var(--purple-700));
    box-shadow: 0 0 26px rgba(78,231,255,.28);
    animation: barPulse 2.8s ease-in-out infinite;
}

.mini-chart span:nth-child(1) { height: 42%; }
.mini-chart span:nth-child(2) { height: 68%; animation-delay: -.6s; }
.mini-chart span:nth-child(3) { height: 54%; animation-delay: -1.1s; }
.mini-chart span:nth-child(4) { height: 82%; animation-delay: -1.6s; }
.mini-chart span:nth-child(5) { height: 62%; animation-delay: -2s; }

@keyframes barPulse {
    0%, 100% { transform: scaleY(.82); opacity: .72; }
    50% { transform: scaleY(1); opacity: 1; }
}

.quick-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.quick-services span {
    padding: 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.07);
    font-weight: 850;
}

.floating-card {
    position: absolute;
    min-height: 52px;
    min-width: 178px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: var(--radius);
    color: #fff;
    background: rgba(255,255,255,.11);
    box-shadow: 0 18px 48px rgba(0,0,0,.2);
    backdrop-filter: blur(16px);
    font-weight: 900;
    animation: floatY 4s ease-in-out infinite;
}

.floating-card i {
    color: var(--gold);
    flex: 0 0 auto;
}

.card-a { right: -165px; top: 92px; }
.card-b { left: -72px; top: 280px; animation-delay: -1s; }
.card-c { right: 22px; bottom: -18px; animation-delay: -2s; }

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

.trust-strip {
    position: relative;
    z-index: 5;
    margin-top: -80px;
    margin-bottom: -80px;
    padding: 0;
    overflow: visible;
}

.trust-strip::before,
.trust-strip::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.trust-strip::before {
    content: none;
    display: none;
}

.trust-strip::after {
    content: none;
    display: none;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 22px;
    position: relative;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.trust-grid::before {
    content: none;
    display: none;
}

.trust-grid::after {
    content: none;
    display: none;
}

.trust-badge,
.stat-card,
.service-card,
.timeline-step,
.testimonial-card,
.faq-list details,
.lead-form {
    border: 1px solid var(--dark-line);
    border-radius: var(--radius);
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.trust-badge {
    position: relative;
    width: 100%;
    min-height: 146px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 24px;
    color: #09062f;
    font-weight: 900;
    background:
        radial-gradient(circle at 20% 78%, rgba(244,196,48,.12), transparent 34%) padding-box,
        radial-gradient(circle at 86% 18%, rgba(156,39,176,.16), transparent 34%) padding-box,
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,250,255,.72) 52%, rgba(249,241,255,.84)) padding-box,
        linear-gradient(135deg, rgba(128,0,128,.62), rgba(156,39,176,.54), rgba(244,196,48,.44)) border-box;
    box-shadow:
        0 18px 44px rgba(128,0,128,.12),
        0 0 26px rgba(156,39,176,.1),
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -1px 0 rgba(244,196,48,.16);
    backdrop-filter: blur(22px);
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, filter .35s ease;
    animation:
        trustFlyLeft .95s cubic-bezier(.16, 1.08, .28, 1) .04s both,
        trustCardDrift 7.6s ease-in-out 1.05s infinite;
    isolation: isolate;
}

.trust-badge:nth-child(2) {
    animation:
        trustFlyLeft .95s cubic-bezier(.16, 1.08, .28, 1) .12s both,
        trustCardDrift 8s ease-in-out 1.18s infinite;
}

.trust-badge:nth-child(3) {
    animation:
        trustFlyLeft .95s cubic-bezier(.16, 1.08, .28, 1) .2s both,
        trustCardDrift 8.4s ease-in-out 1.32s infinite;
}

.trust-badge:nth-child(4) {
    animation:
        trustFlyRight .95s cubic-bezier(.16, 1.08, .28, 1) .08s both,
        trustCardDrift 7.6s ease-in-out 1.08s infinite;
}

.trust-badge:nth-child(5) {
    animation:
        trustFlyRight .95s cubic-bezier(.16, 1.08, .28, 1) .16s both,
        trustCardDrift 8s ease-in-out 1.22s infinite;
}

.trust-badge:nth-child(6) {
    animation:
        trustFlyRight .95s cubic-bezier(.16, 1.08, .28, 1) .24s both,
        trustCardDrift 8.4s ease-in-out 1.36s infinite;
}

.trust-badge::before,
.trust-badge::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.trust-badge::before {
    inset: -58% auto -58% -82%;
    width: 54%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.84), rgba(244,196,48,.14), transparent);
    animation: trustCardShine 6.2s ease-in-out infinite;
    z-index: 2;
}

.trust-badge::after {
    left: 16%;
    right: 16%;
    bottom: 10px;
    height: 14px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(128,0,128,.22), transparent 68%);
    filter: blur(8px);
    opacity: .55;
    animation: trustReflector 4.8s ease-in-out infinite;
    z-index: 0;
}

.trust-badge:hover {
    animation: none;
    transform: translateY(-6px) scale(1.02) rotateX(3deg);
    filter: brightness(1.04);
    box-shadow:
        0 28px 64px rgba(128,0,128,.2),
        0 0 34px rgba(156,39,176,.24),
        0 0 28px rgba(244,196,48,.16),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.trust-badge img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 178px;
    max-height: 112px;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 18px rgba(47,7,44,.16))
        drop-shadow(0 0 14px rgba(156,39,176,.1));
    transform: translateZ(18px);
    transition: transform .35s ease, filter .35s ease;
    animation: trustLogoBreathe 5.8s ease-in-out infinite;
}

.trust-badge:nth-child(1) img,
.trust-badge:nth-child(4) img,
.trust-badge:nth-child(5) img,
.trust-badge:nth-child(6) img {
    max-height: 126px;
}

.trust-badge:nth-child(2) img {
    max-width: 196px;
    max-height: 88px;
}

.trust-badge:hover img {
    animation: none;
    transform: translateZ(24px) scale(1.06);
    filter:
        drop-shadow(0 16px 24px rgba(47,7,44,.2))
        drop-shadow(0 0 18px rgba(244,196,48,.18));
}

.trust-badge span,
.trust-badge i,
.trust-icon,
.trust-copy {
    display: none;
}

@keyframes trustAmbient {
    0% { transform: translate3d(-12px, 0, 0); opacity: .68; }
    100% { transform: translate3d(18px, -12px, 0); opacity: 1; }
}

@keyframes trustParticleField {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 72px -72px, 150px 80px, 80px 150px; }
}

@keyframes trustFlyLeft {
    0% { opacity: 0; transform: translate3d(-120vw, 0, 0) scale(.9); filter: blur(12px) brightness(1.18); }
    64% { opacity: 1; transform: translate3d(14px, 0, 0) scale(1.025); filter: blur(0) brightness(1.12); }
    84% { transform: translate3d(-5px, 0, 0) scale(.995); filter: blur(0) brightness(1.04); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes trustFlyRight {
    0% { opacity: 0; transform: translate3d(120vw, 0, 0) scale(.9); filter: blur(12px) brightness(1.18); }
    64% { opacity: 1; transform: translate3d(-14px, 0, 0) scale(1.025); filter: blur(0) brightness(1.12); }
    84% { transform: translate3d(5px, 0, 0) scale(.995); filter: blur(0) brightness(1.04); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes trustLogoFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
}

@keyframes trustCardDrift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(8px, -4px, 0); }
    50% { transform: translate3d(0, -7px, 0); }
    75% { transform: translate3d(-8px, -4px, 0); }
}

@keyframes trustCardShine {
    0%, 16% { left: -76%; opacity: 0; }
    34% { opacity: 1; }
    72%, 100% { left: 132%; opacity: 0; }
}

@keyframes trustLineFlow {
    0%, 100% { opacity: .45; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.28); }
}

@keyframes trustDotsGlow {
    0%, 100% { opacity: .32; transform: translate3d(0, 0, 0); }
    50% { opacity: .58; transform: translate3d(-3px, 2px, 0); }
}

@keyframes trustLogoBreathe {
    0%, 100% { transform: translateZ(18px) scale(1); filter: drop-shadow(0 12px 18px rgba(47,7,44,.16)) drop-shadow(0 0 14px rgba(156,39,176,.1)); }
    50% { transform: translateZ(22px) scale(1.035); filter: drop-shadow(0 16px 24px rgba(47,7,44,.18)) drop-shadow(0 0 18px rgba(244,196,48,.14)); }
}

@keyframes trustReflector {
    0%, 100% { opacity: .34; transform: scaleX(.86); }
    50% { opacity: .72; transform: scaleX(1.08); }
}

@keyframes trustRailSweep {
    0%, 15% { left: -28%; opacity: 0; }
    35% { opacity: .82; }
    75%, 100% { left: 112%; opacity: 0; }
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.section-heading p:not(.eyebrow) {
    color: var(--muted);
    font-size: 17px;
}

.align-left {
    margin-left: 0;
    text-align: left;
}

.services {
    overflow: hidden;
    padding-top: 124px;
    background:
        radial-gradient(circle at 14% 12%, rgba(156,39,176,.14), transparent 26%),
        radial-gradient(circle at 86% 16%, rgba(244,196,48,.1), transparent 26%),
        radial-gradient(circle at 50% 94%, rgba(128,0,128,.09), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fbf7ff 50%, #fff8ff 100%);
}

.services::before,
.services::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.services::before {
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(128,0,128,.18) 0 1.4px, transparent 1.8px),
        radial-gradient(circle, rgba(244,196,48,.16) 0 1px, transparent 1.6px);
    background-size: 18px 18px, 30px 30px;
    background-position: 0 0, 10px 12px;
    mask-image: linear-gradient(90deg, #000 0 13%, transparent 28% 72%, #000 87% 100%);
    opacity: .52;
    animation: serviceDotsDrift 18s linear infinite;
}

.services::after {
    inset: 18px -8% auto;
    height: 340px;
    border-top: 2px solid rgba(156,39,176,.18);
    border-bottom: 2px solid rgba(244,196,48,.22);
    border-radius: 50%;
    transform: rotate(-7deg);
    opacity: .62;
    animation: serviceCurveFloat 16s ease-in-out infinite alternate;
}

.timeline-section,
.faq {
    background:
        radial-gradient(circle at 88% 12%, rgba(168,85,247,.1), transparent 24%),
        #fbf8ff;
}

.services > .container {
    position: relative;
    z-index: 1;
}

.services .section-heading {
    max-width: 940px;
    margin-bottom: 34px;
}

.services .eyebrow {
    width: fit-content;
    margin-inline: auto;
    padding: 13px 28px;
    border: 1px solid rgba(128,0,128,.1);
    border-radius: 999px;
    color: #5e0080;
    background: linear-gradient(135deg, rgba(128,0,128,.13), rgba(156,39,176,.08), rgba(255,255,255,.72));
    box-shadow: 0 16px 42px rgba(128,0,128,.12), inset 0 1px 0 rgba(255,255,255,.78);
    backdrop-filter: blur(16px);
}

.services .section-heading.reveal.is-visible .eyebrow {
    animation: servicePillIn .62s cubic-bezier(.2, .8, .2, 1) both;
}

.services .section-heading h2 {
    margin: 18px auto 18px;
    color: #140026;
    font-size: clamp(44px, 5.2vw, 82px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: 0;
}

.services .section-heading.reveal.is-visible h2 {
    animation: serviceFadeUp .72s ease .08s both;
}

.services .section-heading h2 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, #800080 0%, #9C27B0 38%, #F4C430 68%, #E99A00 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.services .section-heading p:not(.eyebrow) {
    max-width: 760px;
    margin-inline: auto;
    color: #625c70;
    font-size: clamp(18px, 1.65vw, 27px);
    line-height: 1.45;
}

.services .section-heading.reveal.is-visible p:not(.eyebrow) {
    animation: serviceFadeUp .72s ease .18s both;
}

.slider-shell,
.testimonial-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.service-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 42px) / 4);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 18px 2px 22px;
    counter-reset: service-card;
    scroll-behavior: smooth;
}

.service-track::-webkit-scrollbar,
.testimonial-window::-webkit-scrollbar {
    display: none;
}

.slider-btn {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(135deg, #800080, #9C27B0 62%, #5A005A);
    box-shadow: 0 18px 42px rgba(128,0,128,.24), 0 0 28px rgba(156,39,176,.18);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}

.services .slider-btn::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.slider-btn:hover {
    transform: translateY(-3px) scale(1.12);
    box-shadow: 0 24px 52px rgba(128,0,128,.3), 0 0 36px rgba(244,196,48,.2);
}

.services .slider-btn:hover i {
    animation: serviceArrowNudge .72s ease-in-out infinite;
}

.services .slider-btn:active::after {
    animation: serviceRipple .48s ease-out;
}

.service-card {
    position: relative;
    min-height: 480px;
    display: grid;
    grid-template-rows: 194px auto auto 1fr 74px;
    justify-items: center;
    align-items: start;
    overflow: hidden;
    scroll-snap-align: start;
    padding: 32px 24px 0;
    border: 1px solid transparent;
    border-radius: 24px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9)) padding-box,
        linear-gradient(135deg, rgba(156,39,176,.42), rgba(255,255,255,.72), rgba(244,196,48,.58)) border-box;
    box-shadow: 0 24px 62px rgba(128,0,128,.13), inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter: blur(18px);
    counter-increment: service-card;
    transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
    will-change: transform;
}

.service-card::before {
    content: counter(service-card, decimal-leading-zero);
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 0 24px 0 26px;
    color: #fff;
    background: linear-gradient(135deg, #800080, #9C27B0);
    box-shadow: 0 10px 28px rgba(128,0,128,.24);
    font-size: 25px;
    font-weight: 950;
    z-index: 3;
}

.service-card::after {
    content: "";
    position: absolute;
    left: -18%;
    right: -18%;
    bottom: -76px;
    height: 176px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(135deg, #8D00D4, #5F009D);
    box-shadow: 0 -18px 50px rgba(128,0,128,.18);
    z-index: 0;
    background-size: 180% 180%;
    animation: serviceWaveMove 7s ease-in-out infinite;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(168,85,247,.32);
    box-shadow: 0 34px 88px rgba(74, 15, 132, .2), 0 0 34px rgba(244,196,48,.14);
}

.service-card:hover::before {
    filter: brightness(1.08);
    box-shadow: 0 12px 32px rgba(128,0,128,.32), 0 0 18px rgba(244,196,48,.16);
}

.slider-shell.reveal.is-visible .service-card {
    animation: serviceCardReveal .72s ease both;
}

.slider-shell.reveal.is-visible .service-card:nth-child(1) { animation-delay: .08s; }
.slider-shell.reveal.is-visible .service-card:nth-child(2) { animation-delay: .18s; }
.slider-shell.reveal.is-visible .service-card:nth-child(3) { animation-delay: .28s; }
.slider-shell.reveal.is-visible .service-card:nth-child(4) { animation-delay: .38s; }
.slider-shell.reveal.is-visible .service-card:nth-child(5) { animation-delay: .48s; }
.slider-shell.reveal.is-visible .service-card:nth-child(6) { animation-delay: .58s; }
.slider-shell.reveal.is-visible .service-card:nth-child(7) { animation-delay: .68s; }
.slider-shell.reveal.is-visible .service-card:nth-child(8) { animation-delay: .78s; }

.service-card:nth-child(even)::before {
    background: linear-gradient(135deg, #F4C430, #E99A00);
}

.service-card:nth-child(even)::after {
    background: linear-gradient(135deg, #F4C430, #E99A00);
    background-size: 180% 180%;
}

.service-card::selection {
    background: rgba(244,196,48,.24);
}

.service-card .service-icon {
    position: relative;
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    align-self: center;
    margin-top: 6px;
    border-radius: 50%;
    color: #8500B5;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.96), rgba(255,255,255,.7) 62%, rgba(156,39,176,.08));
    box-shadow: 0 18px 36px rgba(128,0,128,.14), inset 0 1px 0 rgba(255,255,255,.9);
    animation: serviceIconFloat 4.8s ease-in-out infinite;
    z-index: 2;
}

.service-card .service-icon::before {
    content: "";
    position: absolute;
    inset: -18px;
    border: 1.5px solid rgba(156,39,176,.62);
    border-top-color: rgba(244,196,48,.72);
    border-radius: 50%;
    animation: serviceOrbit 9s linear infinite;
}

.service-card .service-icon::after {
    content: "\f00c";
    position: absolute;
    right: -6px;
    bottom: 8px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #F4C430, #E99A00);
    box-shadow: 0 12px 28px rgba(244,196,48,.32);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    animation: serviceBadgePulse 2.8s ease-in-out infinite;
}

.service-card:nth-child(even) .service-icon {
    color: #E99A00;
}

.service-card:nth-child(even) .service-icon::before {
    border-color: rgba(244,196,48,.72);
    border-top-color: rgba(156,39,176,.58);
}

.service-card:nth-child(even) .service-icon::after {
    content: "\f061";
}

.service-card .service-icon i {
    position: relative;
    z-index: 1;
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.28), transparent 32%),
        linear-gradient(135deg, #800080, #9C27B0);
    box-shadow: 0 18px 36px rgba(128,0,128,.24);
    font-size: 42px;
}

.service-card:nth-child(even) .service-icon i {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.28), transparent 32%),
        linear-gradient(135deg, #F4C430, #E99A00);
    box-shadow: 0 18px 36px rgba(244,196,48,.26);
}

.service-card h3 {
    position: relative;
    z-index: 2;
    margin: 6px 0 0;
    color: #3C005F;
    font-size: clamp(24px, 1.6vw, 30px);
    font-weight: 950;
    line-height: 1.12;
}

.service-card h3::after {
    content: "";
    display: block;
    width: 58px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #800080, #F4C430);
    box-shadow: 0 0 12px rgba(244,196,48,.3);
}

.service-card p,
.timeline-step p,
.testimonial-card p,
.faq-list p,
.opportunity-copy p,
.contact-copy p,
.footer p {
    color: var(--muted);
}

.service-card p {
    position: relative;
    z-index: 2;
    max-width: 245px;
    margin: 16px auto 0;
    color: #3c3744;
    font-size: 17px;
    line-height: 1.45;
}

.service-action {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    align-self: end;
    margin-bottom: 16px;
    border: 1px solid rgba(128,0,128,.22);
    border-radius: 50%;
    color: #800080;
    background: #fff;
    box-shadow: 0 12px 28px rgba(128,0,128,.18);
    animation: serviceArrowPulse 2.8s ease-in-out infinite;
}

.service-card:nth-child(even) .service-action {
    color: #E99A00;
    border-color: rgba(244,196,48,.36);
}

.services-feature-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 22px auto 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 10% 20%, rgba(244,196,48,.12), transparent 22%),
        linear-gradient(135deg, #800080, #4E0D46 58%, #2F072C);
    box-shadow: 0 24px 62px rgba(47,7,44,.2), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
}

.service-feature {
    position: relative;
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 18px;
    min-height: 132px;
    padding: 22px 26px;
    color: #fff;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.service-feature + .service-feature {
    border-left: 1px solid rgba(255,255,255,.18);
}

.service-feature i {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244,196,48,.72);
    border-radius: 50%;
    color: #F4C430;
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 24px rgba(244,196,48,.18);
    font-size: 28px;
    animation: serviceFeatureIconGlow 3.4s ease-in-out infinite;
}

.services-feature-strip.reveal.is-visible .service-feature {
    animation: serviceFeatureReveal .64s ease both;
}

.services-feature-strip.reveal.is-visible .service-feature:nth-child(1) { animation-delay: .06s; }
.services-feature-strip.reveal.is-visible .service-feature:nth-child(2) { animation-delay: .16s; }
.services-feature-strip.reveal.is-visible .service-feature:nth-child(3) { animation-delay: .26s; }
.services-feature-strip.reveal.is-visible .service-feature:nth-child(4) { animation-delay: .36s; }

.service-feature:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 34px rgba(244,196,48,.12);
}

.service-feature strong,
.service-feature em {
    display: block;
}

.service-feature strong {
    color: #F4C430;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.15;
}

.service-feature em {
    margin-top: 7px;
    color: rgba(255,255,255,.88);
    font-size: 16px;
    font-style: normal;
    line-height: 1.25;
}

@keyframes serviceDotsDrift {
    to { background-position: 36px -36px, -20px 40px; }
}

@keyframes serviceCurveFloat {
    from { transform: translate3d(-18px, 0, 0) rotate(-7deg); }
    to { transform: translate3d(22px, 12px, 0) rotate(-5deg); }
}

@keyframes servicePillIn {
    0% { opacity: 0; transform: translateY(12px) scale(.92); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes serviceFadeUp {
    0% { opacity: 0; transform: translateY(22px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes serviceCardReveal {
    0% { opacity: 0; transform: translateY(34px) scale(.96); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

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

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

@keyframes serviceBadgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 12px 28px rgba(244,196,48,.32); }
    50% { transform: scale(1.08); box-shadow: 0 16px 34px rgba(244,196,48,.44), 0 0 18px rgba(128,0,128,.12); }
}

@keyframes serviceWaveMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes serviceArrowPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 12px 28px rgba(128,0,128,.18); }
    50% { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(244,196,48,.2), 0 0 18px rgba(128,0,128,.16); }
}

@keyframes serviceArrowNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes serviceRipple {
    0% { width: 0; height: 0; opacity: .46; }
    100% { width: 140px; height: 140px; opacity: 0; }
}

@keyframes serviceFeatureReveal {
    0% { opacity: 0; transform: translateY(20px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes serviceFeatureIconGlow {
    0%, 100% { box-shadow: 0 0 24px rgba(244,196,48,.18); filter: brightness(1); }
    50% { box-shadow: 0 0 34px rgba(244,196,48,.32), 0 0 18px rgba(156,39,176,.18); filter: brightness(1.08); }
}

.distributor-section,
.contact {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,61,200,.2), transparent 26%),
        radial-gradient(circle at 16% 82%, rgba(78,231,255,.14), transparent 24%),
        linear-gradient(135deg, #090118, #220039 50%, #43106e);
}

.distributor-section h2,
.contact h2 {
    color: #fff;
}

.opportunity {
    position: relative;
    overflow: hidden;
    color: #15102e;
    background:
        radial-gradient(circle at 14% 12%, rgba(156,39,176,.14), transparent 26%),
        radial-gradient(circle at 86% 16%, rgba(244,196,48,.1), transparent 26%),
        radial-gradient(circle at 50% 94%, rgba(128,0,128,.09), transparent 30%),
        linear-gradient(180deg, #fff8ff 0%, #fbf7ff 50%, #fff8ff 100%);
}

.opportunity::before,
.opportunity::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.opportunity::before {
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(128,0,128,.18) 0 1.4px, transparent 1.8px),
        radial-gradient(circle, rgba(244,196,48,.16) 0 1px, transparent 1.6px);
    background-size: 18px 18px, 30px 30px;
    background-position: 0 0, 10px 12px;
    mask-image: linear-gradient(90deg, #000 0 13%, transparent 28% 72%, #000 87% 100%);
    opacity: .52;
    animation: serviceDotsDrift 18s linear infinite;
}

.opportunity::after {
    left: -8%;
    right: -8%;
    top: 18px;
    height: 340px;
    border-top: 2px solid rgba(156,39,176,.18);
    border-bottom: 2px solid rgba(244,196,48,.22);
    border-radius: 50%;
    transform: rotate(-7deg);
    opacity: .62;
    animation: serviceCurveFloat 16s ease-in-out infinite alternate;
}

.opportunity-shell {
    position: relative;
    z-index: 1;
}

.opportunity-shell::before,
.opportunity-shell::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff7cf, #F4C430 58%, #e19a00);
    box-shadow: 0 16px 34px rgba(244,196,48,.38);
    animation: retailerGoldDot 5.6s ease-in-out infinite;
    pointer-events: none;
}

.opportunity-shell::before {
    left: -72px;
    top: 44%;
}

.opportunity-shell::after {
    right: -64px;
    top: 58%;
    animation-delay: -2s;
}

.opportunity-top {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 58px;
    align-items: start;
    margin-bottom: 34px;
}

.opportunity .opportunity-copy {
    position: relative;
    padding-left: 28px;
}

.opportunity .opportunity-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 6px;
    width: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #800080, #9C27B0, #F4C430);
    box-shadow: 0 0 18px rgba(156,39,176,.28);
}

.opportunity .eyebrow {
    width: fit-content;
    margin: 0 0 18px;
    color: #6a00a8;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.opportunity .eyebrow::before,
.opportunity .eyebrow::after {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 10px;
    border-radius: 50%;
    background: #F4C430;
    box-shadow: 0 0 16px rgba(244,196,48,.52);
}

.opportunity h2 {
    max-width: 790px;
    margin: 0 0 22px;
    color: #15102e;
    font-size: clamp(25px, 3.8vw, 32px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: 0;
}

.opportunity h2 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, #6e22ff 0%, #800080 42%, #d02b89 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.opportunity .opportunity-copy p:not(.eyebrow) {
    max-width: 720px;
    color: #4d4862;
    font-size: 19px;
    line-height: 1.65;
}

.retailer-network {
    display: block;
}

.retailer-pill {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(156,39,176,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 20px 48px rgba(128,0,128,.14), inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    animation: retailerPillBounce 4.8s ease-in-out infinite;
}

.retailer-pill img {
    width: 100px;
    height: 42px;
    object-fit: contain;
}

.retailer-pill span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #800080, #9C27B0);
    box-shadow: 0 12px 28px rgba(128,0,128,.24);
    font-size: 18px;
}

.retailer-network-copy {
    max-width: 560px;
}

.retailer-copy-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}

.retailer-copy-stat {
    min-width: 0;
}

.retailer-network-copy strong {
    display: block;
    color: #6e22ff;
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
}

.retailer-network-copy h3 {
    margin: 3px 0 2px;
    color: #15102e;
    font-size: 18px;
    font-weight: 900;
}

.retailer-network-copy em {
    display: block;
    color: #6e22ff;
    font-size: 15px;
    font-style: normal;
    font-weight: 750;
}

.retailer-network-copy p {
    margin: 0;
    color: #171323;
    font-size: 18px;
    line-height: 1.38;
}

.opportunity-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, .7fr);
    gap: 28px;
    align-items: stretch;
}

.opportunity-main-column {
    display: grid;
    gap: 28px;
}

.retailer-video {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 3px solid rgba(128,0,128,.72);
    border-radius: 24px;
    background: #2F072C;
    box-shadow: 0 28px 76px rgba(128,0,128,.22), 0 0 34px rgba(156,39,176,.24);
}

.retailer-video::after,
.retailer-stat::after {
    content: "";
    position: absolute;
    inset: -48% auto -48% -70%;
    width: 44%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), rgba(244,196,48,.12), transparent);
    animation: retailerShine 6s ease-in-out infinite;
    pointer-events: none;
}

.founder-card::after {
    content: none;
    display: none;
}

.retailer-video video {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    transition: transform .55s ease, filter .55s ease;
}

.retailer-video:hover video {
    transform: scale(1.055);
    filter: brightness(1.05);
}

.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: #9C27B0;
    background: rgba(255,255,255,.92);
    box-shadow: 0 0 0 18px rgba(255,255,255,.2), 0 0 44px rgba(156,39,176,.42);
    font-size: 46px;
    animation: retailerPlayPulse 2.8s ease-in-out infinite;
}

.video-duration {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    color: #fff;
    background: rgba(0,0,0,.52);
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    font-weight: 850;
}

.video-mute-toggle {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.video-mute-toggle i {
    font-size: 18px;
    line-height: 1;
}

.founder-card {
    position: relative;
    overflow: hidden;
    height: 700px;
    min-height: 700px;
    align-self: start;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 28px;
    color: #fff;
    text-align: center;
    background: transparent;
    box-shadow: 0 30px 84px rgba(47,7,44,.24), 0 0 34px rgba(156,39,176,.24);
    animation: founderFloat 5.4s ease-in-out infinite;
}

.founder-card::before {
    content: none;
    display: none;
}

.experience-badge {
    position: absolute;
    top: 26px;
    right: 24px;
    z-index: 3;
    width: 112px;
    min-height: 110px;
    display: grid;
    place-items: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    background: rgba(128,0,128,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 34px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
}

.experience-badge i {
    color: #F4C430;
}

.experience-badge strong {
    color: #ffd6ff;
    font-size: 26px;
    line-height: 1;
}

.experience-badge em {
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-style: normal;
    line-height: 1.25;
}

.founder-portrait {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    transform: none;
}

.founder-portrait img {
    width: 100%;
    height: 100%;
    min-height: 176px;
    display: block;
    border-radius: 28px;
    object-fit: cover;
    object-position: top center;
    filter: none;
}

.founder-card blockquote {
    position: relative;
    z-index: 3;
    margin: 0 0 20px;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
}

.founder-card blockquote::before {
    content: "“";
    color: #9C27B0;
    font-size: 72px;
    line-height: 0;
    vertical-align: -26px;
}

.founder-card blockquote b {
    color: #F4C430;
}

.founder-card h3 {
    position: relative;
    z-index: 3;
    margin: 0 0 10px;
    color: #fff;
    font-size: 36px;
    font-weight: 950;
}

.founder-role {
    position: relative;
    z-index: 3;
    display: inline-flex;
    padding: 7px 18px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #800080, #9C27B0);
    font-size: 14px;
    font-weight: 850;
}

.founder-card p {
    position: relative;
    z-index: 3;
    margin: 18px 0 14px;
    color: #fff;
    font-size: 22px;
}

.founder-site {
    position: relative;
    z-index: 3;
    min-width: 230px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 11px 18px;
    border-radius: 999px;
    color: #170323;
    background: linear-gradient(135deg, #F4C430, #FFC107);
    box-shadow: 0 16px 34px rgba(244,196,48,.26);
    font-weight: 950;
}

.retailer-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 0;
}

.retailer-stat {
    position: relative;
    overflow: hidden;
    min-height: 176px;
    padding: 28px 18px 20px 94px;
    border: 1px solid rgba(156,39,176,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 20px 50px rgba(128,0,128,.1), inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.retailer-presence-panel,
.retailer-growth-panel {
    position: relative;
    overflow: hidden;
    min-height: 184px;
    border-radius: 20px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.retailer-presence-panel {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(205px, 1.05fr);
    gap: 12px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    background:
        radial-gradient(circle at 68% 36%, rgba(255,138,0,.26), transparent 22%),
        radial-gradient(circle at 44% 70%, rgba(156,39,176,.42), transparent 34%),
        linear-gradient(135deg, #2F072C 0%, #6C006D 55%, #800080 100%);
    box-shadow: 0 26px 72px rgba(47,7,44,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.retailer-presence-panel:hover,
.retailer-growth-panel:hover {
    transform: translateY(-6px);
}

.presence-copy {
    position: relative;
    z-index: 2;
}

.presence-copy h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(22px, 1.9vw, 30px);
    font-weight: 950;
    line-height: 1.16;
}

.presence-copy h3 b {
    color: #FF8A00;
}

.presence-metric {
    max-width: 310px;
}

.presence-metric strong {
    display: block;
    color: #FF8A00;
    font-size: clamp(32px, 2.75vw, 46px);
    font-weight: 950;
    line-height: .95;
    text-shadow: 0 0 22px rgba(255,138,0,.26);
}

.presence-metric span {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 900;
    line-height: 1.28;
}

.presence-glass {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    column-gap: 20px;
    max-width: 310px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 46px rgba(0,0,0,.16);
    backdrop-filter: blur(16px);
}

.presence-glass i {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #FF8A00;
    background: #fff;
    box-shadow: 0 14px 32px rgba(255,138,0,.28);
    font-size: 24px;
    animation: retailerPinPulse 2.9s ease-in-out infinite;
}

.presence-glass strong {
    color: #FF8A00;
    font-size: 36px;
    font-weight: 950;
    line-height: 1;
}

.presence-glass span {
    color: #fff;
    font-size: 15px;
    font-weight: 850;
}

.india-network {
    position: relative;
    z-index: 1;
    width: min(290px, 100%);
    min-height: 184px;
    display: grid;
    place-items: center;
    justify-self: center;
    background: radial-gradient(circle at 52% 52%, rgba(244,196,48,.12), transparent 60%);
    filter: drop-shadow(0 0 22px rgba(244,196,48,.18));
    animation: retailerMapGlow 5.5s ease-in-out infinite;
}

.india-network::before {
    content: none;
    display: none;
}

.india-network img {
    position: relative;
    z-index: 1;
    width: min(282px, 100%);
    max-height: 184px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(244,196,48,.28)) drop-shadow(0 14px 18px rgba(47,7,44,.22));
    animation: none;
}

.india-network .pin {
    position: absolute;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: #FF8A00;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 0 18px rgba(255,138,0,.9);
    animation: retailerPinFloat 3.5s ease-in-out infinite;
}

.india-network .pin::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

.india-network .p1 { left: 47%; top: 13%; }
.india-network .p2 { left: 58%; top: 25%; animation-delay: -.3s; }
.india-network .p3 { left: 42%; top: 32%; animation-delay: -.6s; }
.india-network .p4 { left: 52%; top: 42%; animation-delay: -.9s; }
.india-network .p5 { left: 38%; top: 51%; animation-delay: -1.2s; }
.india-network .p6 { left: 56%; top: 57%; animation-delay: -1.5s; }
.india-network .p7 { left: 45%; top: 70%; animation-delay: -1.8s; }
.india-network .p8 { left: 32%; top: 45%; animation-delay: -2.1s; }
.india-network .p9 { left: 69%; top: 37%; animation-delay: -2.4s; }
.india-network .p10 { left: 27%; top: 41%; animation-delay: -2.7s; }
.india-network .p11 { left: 74%; top: 31%; animation-delay: -3s; }
.india-network .p12 { left: 61%; top: 66%; animation-delay: -3.3s; }
.india-network .p13 { left: 50%; top: 50%; animation-delay: -3.6s; }

.retailer-growth-panel {
    min-height: 184px;
    padding: 22px;
    border: 1px solid rgba(244,196,48,.16);
    background:
        radial-gradient(circle at 92% 12%, rgba(255,138,0,.2), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,245,.94));
    box-shadow: 0 26px 72px rgba(47,7,44,.12), inset 0 1px 0 rgba(255,255,255,.92);
}

.retailer-growth-panel::after {
    content: "";
    position: absolute;
    inset: -45% auto -45% -68%;
    width: 42%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.54), rgba(244,196,48,.18), transparent);
    opacity: 0;
    pointer-events: none;
    animation: retailerGrowthShine 6s ease-in-out infinite;
}

.growth-heading h3 {
    max-width: 320px;
    margin: 0 0 16px;
    color: #090118;
    font-size: clamp(23px, 1.8vw, 31px);
    font-weight: 950;
    line-height: 1.16;
}

.growth-heading h3 b {
    color: #800080;
}

.growth-heading::after {
    content: "";
    width: 64px;
    height: 3px;
    display: block;
    margin-top: -8px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF8A00, #F4C430);
    box-shadow: 0 0 16px rgba(255,138,0,.28);
}

.growth-stat {
    position: relative;
    z-index: 2;
    min-height: auto;
    display: grid;
    grid-template-columns: 66px auto;
    align-items: center;
    gap: 18px;
    width: min(430px, 58%);
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.growth-metrics {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
    width: 54%;
}

.growth-metrics span {
    display: grid;
    grid-template-columns: 36px auto;
    align-items: center;
    column-gap: 10px;
    color: #161023;
}

.growth-metrics i {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #800080, #4E0D46);
    font-size: 15px;
    animation: retailerPinPulse 3s ease-in-out infinite;
}

.growth-metrics span:nth-child(2) i {
    background: linear-gradient(135deg, #FF8A00, #F4C430);
}

.growth-metrics strong {
    color: #5A005A;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.growth-metrics span:nth-child(2) strong {
    color: #FF8A00;
}

.growth-metrics em {
    color: #3d3746;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.2;
}

.growth-stat::before,
.growth-stat::after {
    display: none;
}

.growth-stat i {
    position: static;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #800080, #4E0D46);
    box-shadow: 0 14px 30px rgba(128,0,128,.22);
    font-size: 25px;
    animation: retailerPinPulse 3s ease-in-out infinite;
}

.growth-stat:nth-of-type(2) i {
    background: linear-gradient(135deg, #FF8A00, #F4C430);
}

.growth-stat strong {
    display: block;
    color: #5A005A;
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
}

.growth-stat:nth-of-type(2) strong {
    color: #FF8A00;
}

.growth-stat span,
.growth-stat p {
    grid-column: 2;
}

.growth-stat span {
    margin-top: 4px;
    color: #161023;
    font-weight: 850;
}

.growth-stat p {
    margin: 3px 0 0;
    color: #3d3746;
    font-size: 15px;
}

.growth-chart {
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 42%;
    height: 130px;
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 7px;
    padding-right: 10px;
}

.growth-chart span {
    position: relative;
    width: 18px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #F4C430, #FF8A00);
    box-shadow: 0 0 18px rgba(255,138,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
    transform-origin: bottom;
    animation: retailerBarPulse 2.5s ease-in-out infinite;
}

.growth-chart span:nth-child(1) { height: 32px; }
.growth-chart span:nth-child(2) { height: 46px; animation-delay: .12s; }
.growth-chart span:nth-child(3) { height: 62px; animation-delay: .24s; }
.growth-chart span:nth-child(4) { height: 82px; animation-delay: .36s; }
.growth-chart span:nth-child(5) { height: 104px; animation-delay: .48s; }
.growth-chart span:nth-child(6) { height: 126px; animation-delay: .6s; }

.growth-chart span::after {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    color: #800080;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 0 12px rgba(244,196,48,.34);
}

.growth-chart span:nth-child(1)::after { content: "10%"; }
.growth-chart span:nth-child(2)::after { content: "50%"; }
.growth-chart span:nth-child(3)::after { content: "100%"; }
.growth-chart span:nth-child(4)::after { content: "200%"; }
.growth-chart span:nth-child(5)::after { content: "250%"; }
.growth-chart span:nth-child(6)::after { content: "300%"; }

.growth-chart i {
    position: absolute;
    right: 12px;
    top: -20px;
    color: #800080;
    font-size: 58px;
    transform: rotate(10deg);
    filter: drop-shadow(0 16px 24px rgba(128,0,128,.24));
    animation: retailerArrowGrow 3.5s ease-in-out infinite;
}

.growth-chart i::after {
    content: "300%\A Growth";
    position: absolute;
    right: 10px;
    top: 28px;
    white-space: pre;
    color: #800080;
    font-family: inherit;
    font-size: 15px;
    font-weight: 950;
    line-height: .9;
    text-align: center;
    text-shadow: 0 0 18px rgba(244,196,48,.34);
    transform: rotate(-10deg);
    animation: retailerGrowthLabelFloat 3.5s ease-in-out infinite;
}


.retailer-stat:hover {
    transform: translateY(-6px);
    border-color: rgba(244,196,48,.38);
    box-shadow: 0 28px 68px rgba(128,0,128,.16), 0 0 24px rgba(244,196,48,.14);
}

.retailer-stat i {
    position: absolute;
    left: 24px;
    top: 30px;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(156,39,176,.16);
    border-radius: 50%;
    color: #800080;
    background: radial-gradient(circle, rgba(156,39,176,.16), rgba(255,255,255,.82));
    box-shadow: 0 12px 28px rgba(128,0,128,.12);
    font-size: 25px;
}

.retailer-stat:nth-child(even) i {
    color: #E99A00;
    background: radial-gradient(circle, rgba(244,196,48,.2), rgba(255,255,255,.82));
}

.retailer-stat strong {
    display: block;
    color: #6e22ff;
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
}

.retailer-stat:nth-child(even) strong {
    color: #E99A00;
}

.retailer-stat span {
    display: block;
    margin-top: 6px;
    color: #15102e;
    font-weight: 900;
}

.retailer-stat p {
    margin: 18px 0 0;
    color: #746b8b;
    font-size: 14px;
}

.retailer-stat::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 54px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #800080, #9C27B0);
}

.retailer-stat:nth-child(even)::before {
    background: linear-gradient(90deg, #F4C430, #E99A00);
}

.retailer-presence-panel::before,
.growth-stat::before,
.growth-stat::after {
    content: none;
    display: none;
}

.retailer-presence-panel .presence-glass i {
    position: static;
    grid-row: span 2;
    width: 52px;
    height: 52px;
    border: 0;
    color: #FF8A00;
    background: #fff;
    box-shadow: 0 14px 32px rgba(255,138,0,.28);
    font-size: 24px;
}

.retailer-presence-panel .presence-glass strong {
    color: #FF8A00;
    font-size: 36px;
}

.retailer-presence-panel .presence-glass span {
    color: #fff;
    margin-top: 0;
    font-size: 15px;
}

.retailer-presence-panel .presence-metric strong {
    display: block;
    color: #FF8A00;
    font-size: clamp(32px, 2.75vw, 46px);
    font-weight: 950;
    line-height: .95;
    text-shadow: 0 0 22px rgba(255,138,0,.26);
}

.retailer-presence-panel .presence-metric span {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 900;
    line-height: 1.28;
}

.retailer-presence-panel .presence-glass p {
    margin: 10px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

.retailer-growth-panel .growth-stat i {
    position: static;
    width: 62px;
    height: 62px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #800080, #4E0D46);
    box-shadow: 0 14px 30px rgba(128,0,128,.22);
}

.retailer-growth-panel .growth-stat:nth-of-type(3) i {
    background: linear-gradient(135deg, #FF8A00, #F4C430);
}

.retailer-growth-panel .growth-stat strong {
    color: #5A005A;
    font-size: 34px;
}

.retailer-growth-panel .growth-stat:nth-of-type(3) strong {
    color: #FF8A00;
}

.retailer-growth-panel .growth-stat span {
    margin-top: 4px;
    color: #161023;
}

.retailer-growth-panel .growth-stat p {
    margin: 3px 0 0;
    color: #3d3746;
    font-size: 15px;
}

.retailer-growth-panel .growth-stat:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.retailer-growth-panel .growth-metrics i {
    position: static;
    grid-row: span 2;
    width: 34px;
    height: 34px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #800080, #4E0D46);
    box-shadow: 0 10px 22px rgba(128,0,128,.18);
    font-size: 15px;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.retailer-growth-panel .growth-metrics span:hover i {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(128,0,128,.24), 0 0 18px rgba(244,196,48,.16);
    filter: brightness(1.08);
}

.retailer-growth-panel .growth-metrics span:nth-child(2) i {
    color: #fff;
    background: linear-gradient(135deg, #FF8A00, #F4C430);
}

.retailer-growth-panel .growth-metrics strong {
    color: #5A005A;
    font-size: 20px;
}

.retailer-growth-panel .growth-metrics span:nth-child(2) strong {
    color: #FF8A00;
}

.retailer-growth-panel .growth-metrics span {
    display: grid;
    grid-template-columns: 36px auto;
    align-items: center;
    column-gap: 10px;
    margin-top: 0;
    color: #161023;
}

.retailer-growth-panel .growth-metrics em {
    color: #3d3746;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.2;
}

.retailer-presence-panel .india-network .pin,
.retailer-growth-panel .growth-chart span {
    display: block;
    margin-top: 0;
    color: inherit;
    font-weight: inherit;
}

.retailer-growth-panel .growth-chart i {
    position: absolute;
    left: auto;
    right: 12px;
    top: -20px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: #800080;
    background: transparent;
    box-shadow: none;
    font-size: 58px;
    transform: rotate(10deg);
    filter: drop-shadow(0 16px 24px rgba(128,0,128,.24));
    display: none;
}

.opportunity .opportunity-copy.reveal.is-visible {
    animation: retailerFadeUp .76s ease both;
}

.retailer-network.reveal.is-visible {
    animation: retailerFadeUp .76s ease .12s both;
}

.retailer-video.reveal.is-visible {
    animation: retailerFromLeft .82s ease both;
}

.founder-card.reveal.is-visible {
    animation: retailerFromRight .82s ease both, founderFloat 5.4s ease-in-out 1s infinite;
}

.retailer-stats .retailer-stat.reveal.is-visible {
    animation: retailerFadeUp .68s ease both;
}

.retailer-stats .retailer-stat:nth-child(1).reveal.is-visible { animation-delay: .08s; }
.retailer-stats .retailer-stat:nth-child(2).reveal.is-visible { animation-delay: .18s; }
.retailer-stats .retailer-stat:nth-child(3).reveal.is-visible { animation-delay: .28s; }
.retailer-stats .retailer-stat:nth-child(4).reveal.is-visible { animation-delay: .38s; }

@keyframes retailerDotsMove {
    to { background-position: right 12% top 22%, 6% 64%; }
}

@keyframes retailerCurveMove {
    from { transform: translate3d(-16px, 0, 0) rotate(-8deg); }
    to { transform: translate3d(22px, 16px, 0) rotate(-5deg); }
}

@keyframes retailerGoldDot {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-18px) scale(1.08); }
}

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

@keyframes retailerPlayPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 18px rgba(255,255,255,.2), 0 0 44px rgba(156,39,176,.42); }
    50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 24px rgba(255,255,255,.16), 0 0 58px rgba(244,196,48,.24); }
}

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

@keyframes retailerShine {
    0%, 16% { left: -70%; opacity: 0; }
    34% { opacity: 1; }
    72%, 100% { left: 132%; opacity: 0; }
}

@keyframes retailerPinPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.16); }
}

@keyframes retailerMapGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18) saturate(1.08); }
}

@keyframes retailerNetworkDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .5; }
    50% { transform: translate3d(6px, -5px, 0) scale(1.04); opacity: .72; }
}

@keyframes retailerMapImageFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -5px, 0) scale(1.03); }
}

@keyframes retailerPinFloat {
    0%, 100% { translate: 0 0; filter: brightness(1); }
    50% { translate: 0 -8px; filter: brightness(1.18); }
}

@keyframes retailerBarPulse {
    0%, 100% {
        transform: scaleY(.18);
        filter: brightness(.95);
        box-shadow: 0 0 8px rgba(255,138,0,.12), inset 0 1px 0 rgba(255,255,255,.4);
    }
    52%, 76% {
        transform: scaleY(1);
        filter: brightness(1.18);
        box-shadow: 0 0 24px rgba(255,138,0,.42), 0 0 16px rgba(244,196,48,.22), inset 0 1px 0 rgba(255,255,255,.48);
    }
}

@keyframes retailerArrowGrow {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(10deg) scale(1); }
    50% { transform: translate3d(10px, -10px, 0) rotate(10deg) scale(1.04); }
}

@keyframes retailerGrowthLabelFloat {
    0%, 100% { opacity: .92; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.18); }
}

@keyframes retailerGrowthShine {
    0%, 12% { left: -68%; opacity: 0; }
    28% { opacity: .85; }
    58%, 100% { left: 128%; opacity: 0; }
}

@keyframes retailerFadeUp {
    0% { opacity: 0; transform: translateY(28px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes retailerFromLeft {
    0% { opacity: 0; transform: translateX(-44px); filter: blur(8px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes retailerFromRight {
    0% { opacity: 0; transform: translateX(44px); filter: blur(8px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

.feature-list {
    display: grid;
    gap: 12px;
    margin: 26px 0 30px;
}

.feature-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.08);
    font-weight: 850;
}

.feature-list i {
    color: var(--green);
}

.retailer-visual,
.network-map {
    min-height: 420px;
}

.shop-mock {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    padding: 34px;
    border-radius: var(--radius);
}

.shop-board {
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    color: #fff;
    background: linear-gradient(135deg, var(--purple-700), var(--pink));
    box-shadow: 0 0 40px rgba(255,61,200,.26);
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 950;
}

.shop-window {
    height: 150px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 26px;
}

.shop-window i {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    color: var(--cyan);
    background: rgba(255,255,255,.07);
    font-size: 34px;
}

.shop-counter {
    height: 62px;
    margin-top: 28px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
}

.network-map {
    position: relative;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    background: rgba(255,255,255,.07);
    box-shadow: var(--shadow-purple);
    backdrop-filter: blur(18px);
}

.map-core {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-700), var(--pink));
    box-shadow: 0 0 60px rgba(168,85,247,.42);
    font-weight: 900;
}

.map-core i {
    font-size: 38px;
}

.node {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 34px rgba(32,227,155,.9);
    animation: nodePulse 2.6s ease-in-out infinite;
}

.n1 { left: 18%; top: 20%; }
.n2 { right: 16%; top: 24%; animation-delay: -.6s; }
.n3 { left: 18%; bottom: 18%; animation-delay: -1.2s; }
.n4 { right: 20%; bottom: 18%; animation-delay: -1.8s; }

@keyframes nodePulse {
    0%, 100% { transform: scale(.86); opacity: .72; }
    50% { transform: scale(1.18); opacity: 1; }
}

.line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(78,231,255,.6), transparent);
    transform-origin: left center;
}

.l1 { left: 20%; top: 24%; width: 58%; transform: rotate(18deg); }
.l2 { left: 22%; bottom: 24%; width: 56%; transform: rotate(-18deg); }
.l3 { left: 25%; top: 50%; width: 50%; }

.distributor-section {
    position: relative;
    overflow: hidden;
    color: #0F172A;
    background:
        radial-gradient(circle at 12% 18%, rgba(160,32,240,.1), transparent 26%),
        radial-gradient(circle at 86% 82%, rgba(255,159,28,.12), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fff 56%, #fbf7ff 100%);
}

.distributor-section::before,
.distributor-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.distributor-section::before {
    inset: 0;
    background-image: radial-gradient(circle, rgba(128,0,128,.12) 0 1.5px, transparent 1.8px);
    background-size: 26px 26px;
    mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000);
    opacity: .38;
}

.distributor-section::after {
    right: -8%;
    top: 10%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(128,0,128,.12);
    border-radius: 50%;
    box-shadow: inset 0 0 0 36px rgba(160,32,240,.025);
}

.distributor-section .distributor-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(44px, 6vw, 86px);
    align-items: center;
}

.distributor-section .network-map {
    position: relative;
    min-height: 620px;
    overflow: visible;
    border: 0;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 54%, rgba(128,0,128,.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
    box-shadow: 0 34px 90px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px);
}

.distributor-section .network-map::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(128,0,128,.88);
    border-radius: 50%;
    box-shadow: 0 0 0 86px rgba(128,0,128,.045), 0 22px 80px rgba(128,0,128,.12);
}

.distributor-section .network-map::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    border: 2px dotted rgba(160,32,240,.34);
    border-radius: 50%;
    animation: distributorOrbitSpin 22s linear infinite;
}

.distributor-section .network-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 2px solid rgba(160,32,240,.28);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.distributor-section .orbit-a {
    width: 310px;
    height: 310px;
}

.distributor-section .orbit-b {
    width: 500px;
    height: 500px;
    border-style: dashed;
    animation: distributorOrbitSpin 18s linear infinite reverse;
}

.distributor-section .map-core {
    width: 230px;
    height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid rgba(128,0,128,.16);
    color: #0F172A;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)),
        radial-gradient(circle at 50% 0%, rgba(255,159,28,.18), transparent 56%);
    box-shadow: 0 28px 58px rgba(128,0,128,.18), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
}

.distributor-section .map-core i {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #800080, #A020F0);
    box-shadow: 0 18px 40px rgba(128,0,128,.28);
    font-size: 34px;
}

.distributor-section .map-core strong {
    font-size: 24px;
    line-height: 1;
}

.distributor-section .map-core em {
    color: #FF9F1C;
    font-style: normal;
    font-weight: 900;
}

.distributor-section .node {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(160,32,240,.74);
    color: #800080;
    background: #fff;
    box-shadow: 0 20px 46px rgba(128,0,128,.18), inset 0 1px 0 rgba(255,255,255,.96);
    font-size: 25px;
}

.distributor-section .n1 { left: 8%; top: 16%; }
.distributor-section .n2 { right: 9%; top: 18%; }
.distributor-section .n3 { left: 8%; bottom: 16%; }
.distributor-section .n4 { right: 9%; bottom: 16%; }

.distributor-section .line {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(128,0,128,.9), rgba(255,159,28,.72), transparent);
    box-shadow: 0 0 18px rgba(128,0,128,.2);
}

.distributor-section .l1 { left: 18%; top: 29%; width: 64%; transform: rotate(20deg); }
.distributor-section .l2 { left: 18%; bottom: 29%; width: 64%; transform: rotate(-20deg); }
.distributor-section .l3 { left: 19%; top: 50%; width: 62%; }

.distributor-section .network-label {
    position: absolute;
    padding: 8px 12px;
    border-radius: 999px;
    color: #0F172A;
    background: rgba(255,255,255,.9);
    box-shadow: 0 16px 36px rgba(15,23,42,.1);
    font-size: 14px;
    font-weight: 950;
}

.distributor-section .label-a { left: 4%; top: 32%; }
.distributor-section .label-b { right: 4%; top: 34%; }
.distributor-section .label-c { left: 4%; bottom: 32%; }
.distributor-section .label-d { right: 5%; bottom: 32%; }

.distributor-section .opportunity-copy {
    max-width: 620px;
}

.distributor-section .eyebrow {
    padding: 12px 22px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #800080, #A020F0);
    box-shadow: 0 14px 32px rgba(128,0,128,.22);
    font-size: 15px;
}

.distributor-section h2 {
    color: #0F172A;
    font-size: clamp(44px, 5vw, 74px);
    line-height: 1.06;
    letter-spacing: 0;
}

.distributor-section .opportunity-copy > p:not(.eyebrow) {
    max-width: 600px;
    color: #475569;
    font-size: 20px;
    line-height: 1.55;
}

.distributor-section .feature-list {
    gap: 16px;
    margin: 28px 0 30px;
}

.distributor-section .feature-list span {
    width: 100%;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    column-gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    color: #0F172A;
    background: rgba(255,255,255,.86);
    box-shadow: 0 16px 38px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.distributor-section .feature-list span:hover {
    transform: translateY(-5px);
    border-color: rgba(128,0,128,.18);
    box-shadow: 0 24px 54px rgba(128,0,128,.14);
}

.distributor-section .feature-list i {
    grid-row: span 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #800080;
    background: linear-gradient(135deg, rgba(128,0,128,.1), rgba(255,159,28,.16));
    font-size: 23px;
}

.distributor-section .feature-list b {
    display: block;
    color: #0F172A;
    font-size: 20px;
    line-height: 1.1;
}

.distributor-section .feature-list em {
    display: block;
    margin-top: 5px;
    color: #64748B;
    font-style: normal;
    font-weight: 650;
}

.distributor-section .distributor-cta {
    width: min(100%, 520px);
    min-height: 72px;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #800080, #A020F0);
    box-shadow: 0 18px 38px rgba(128,0,128,.28);
    font-size: 22px;
}

@keyframes distributorOrbitSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 1080px) {
    .distributor-section .distributor-grid {
        grid-template-columns: 1fr;
    }

    .distributor-section .network-map {
        min-height: 540px;
    }

    .distributor-section .opportunity-copy {
        max-width: none;
    }
}

@media (max-width: 680px) {
    .distributor-section {
        padding-block: 72px;
    }

    .distributor-section .network-map {
        min-height: 420px;
        border-radius: 24px;
    }

    .distributor-section .network-map::before {
        width: 280px;
        height: 280px;
        box-shadow: 0 0 0 54px rgba(128,0,128,.045), 0 18px 58px rgba(128,0,128,.12);
    }

    .distributor-section .network-map::after,
    .distributor-section .orbit-b {
        width: 340px;
        height: 340px;
    }

    .distributor-section .orbit-a {
        width: 220px;
        height: 220px;
    }

    .distributor-section .map-core {
        width: 170px;
        height: 170px;
    }

    .distributor-section .map-core i {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 26px;
    }

    .distributor-section .map-core strong {
        font-size: 19px;
    }

    .distributor-section .node {
        width: 58px;
        height: 58px;
        font-size: 20px;
    }

    .distributor-section .network-label {
        display: none;
    }

    .distributor-section h2 {
        font-size: clamp(34px, 11vw, 48px);
    }

    .distributor-section .opportunity-copy > p:not(.eyebrow) {
        font-size: 17px;
    }

    .distributor-section .feature-list span {
        grid-template-columns: 54px 1fr;
        padding: 14px;
        border-radius: 18px;
    }

    .distributor-section .feature-list i {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 19px;
    }

    .distributor-section .feature-list b {
        font-size: 17px;
    }

    .distributor-section .feature-list em {
        font-size: 13px;
    }

    .distributor-section .distributor-cta {
        min-height: 62px;
        font-size: 18px;
    }
}

.stats.trusted-stats {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 35px 0 39px;
    background: transparent;
    box-shadow: none;
    perspective: 900px;
}

.stats.trusted-stats::before,
.stats.trusted-stats::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.stats.trusted-stats::before {
    opacity: .32;
    background-image:
        radial-gradient(circle, rgba(128,0,128,.12) 0 1px, transparent 2px),
        linear-gradient(rgba(128,0,128,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.055) 1px, transparent 1px);
    background-size: 34px 34px, 36px 36px, 36px 36px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    animation: trustedGridMotion 15s linear infinite, trustedPrismWash 6.8s ease-in-out infinite;
}

.stats.trusted-stats::after {
    opacity: .42;
    background:
        radial-gradient(circle at 12% 18%, rgba(128,0,128,.11), transparent 18%),
        radial-gradient(circle at 86% 82%, rgba(244,196,48,.12), transparent 20%),
        conic-gradient(from 120deg at 50% 50%, transparent 0 64%, rgba(128,0,128,.08) 70%, transparent 78%),
        linear-gradient(105deg, transparent 0 32%, rgba(128,0,128,.05) 43%, rgba(244,196,48,.08) 48%, transparent 62%),
        linear-gradient(75deg, transparent 0 48%, rgba(156,39,176,.07) 54%, transparent 66%);
    background-size: 100% 100%, 100% 100%, 150% 150%, 220% 100%, 180% 100%;
    animation: trustedBeamSweep 7s ease-in-out infinite alternate, trustedAuraOrbit 12s linear infinite;
}

.trusted-heading {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 29px;
    text-align: center;
}

.trusted-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: min(180px, 24vw);
    height: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #800080, #F4C430, #800080, transparent);
    background-size: 220% 100%;
    filter: drop-shadow(0 0 10px rgba(128,0,128,.24));
    animation: trustedUnderlineFlow 3.8s ease-in-out infinite;
}

.trusted-heading p {
    margin: 0 0 5px;
    background: linear-gradient(100deg, #800080 0%, #9C27B0 36%, #F4C430 68%, #800080 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(21px, 2.5vw, 39px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 8px 18px rgba(128,0,128,.14);
    animation: trustedTextSheen 4.2s ease-in-out infinite, trustedHeadingLift 5.4s ease-in-out infinite, trustedFontGlow 3.6s ease-in-out infinite;
}

.trusted-heading h2 {
    margin: 0;
    color: transparent;
    background:
        linear-gradient(90deg, #151922 0%, #151922 42%, #800080 50%, #151922 58%, #151922 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(17px, 2.6vw, 37px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0;
    text-shadow: 0 8px 20px rgba(15,23,42,.08);
    animation: trustedHeadingLift 5.4s ease-in-out infinite reverse, trustedHeadlineScan 5.2s ease-in-out infinite;
}

.trusted-marquee {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    overflow: hidden;
    transform-style: preserve-3d;
}

.trusted-marquee + .trusted-marquee {
    margin-top: 23px;
}

.trusted-marquee::before,
.trusted-marquee::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: min(10vw, 150px);
    pointer-events: none;
}

.trusted-marquee::before {
    left: 0;
    background: linear-gradient(90deg, rgba(251,248,255,.98), rgba(251,248,255,.66), rgba(251,248,255,0));
}

.trusted-marquee::after {
    right: 0;
    background: linear-gradient(270deg, rgba(251,248,255,.98), rgba(251,248,255,.66), rgba(251,248,255,0));
}

.trusted-track {
    display: flex;
    width: max-content;
    gap: 32px;
    padding: 1px 16px;
    animation: trustedSlideLeft 26s linear infinite;
    will-change: transform;
}

.trusted-marquee-right .trusted-track {
    animation-name: trustedSlideRight;
}

.trusted-marquee.is-paused .trusted-track,
.trusted-marquee:hover .trusted-track {
    animation-play-state: paused;
}

.trusted-card {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: 0 0 146px;
    min-height: 67px;
    padding: 13px 12px;
    border-radius: 8px;
    border: 1px solid rgba(128,0,128,.08);
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.9)),
        linear-gradient(135deg, rgba(244,196,48,.08), rgba(156,39,176,.06));
    box-shadow:
        0 10px 24px rgba(15,23,42,.08),
        0 0 18px rgba(128,0,128,.07),
        inset 0 1px 0 rgba(255,255,255,.75);
    transform: translateZ(0);
    transform-style: preserve-3d;
    backdrop-filter: blur(10px);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease, filter .4s ease;
    animation: trustedCardFloat 4.8s ease-in-out infinite, trustedCardGlow 6s ease-in-out infinite, trustedCardDepth 7.2s ease-in-out infinite;
}

.trusted-card:nth-child(2n) {
    animation-delay: -1.4s;
}

.trusted-card:nth-child(3n) {
    animation-delay: -2.8s;
}

.trusted-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.72), transparent 24%),
        linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.68) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: trustedCardShine 4.8s ease-in-out infinite;
}

.trusted-card::after {
    content: "";
    position: absolute;
    inset: auto 16% 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, transparent, #F4C430, #9C27B0, transparent);
    opacity: .68;
    box-shadow: 0 0 12px rgba(128,0,128,.18);
    animation: trustedCardLineFlow 2.8s ease-in-out infinite;
}

.trusted-card:hover {
    border-color: rgba(128,0,128,.18);
    box-shadow:
        0 14px 32px rgba(15,23,42,.11),
        0 0 24px rgba(244,196,48,.14),
        inset 0 1px 0 rgba(255,255,255,.82);
    filter: saturate(1.08);
    transform: translateY(-4px) rotateX(4deg) scale(1.04);
}

.trusted-card img {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    object-fit: contain;
    margin-bottom: 11px;
    filter: drop-shadow(0 7px 12px rgba(128,0,128,.18));
    animation: trustedLogoPulse 3.4s ease-in-out infinite, trustedLogoOrbit 5.8s ease-in-out infinite, trustedLogoGlowSweep 4.6s ease-in-out infinite;
}

.trusted-card span {
    position: relative;
    z-index: 1;
    color: #1d222c;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.18;
    text-align: center;
    background: linear-gradient(90deg, #1d222c 0%, #800080 48%, #1d222c 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: trustedLabelSheen 4.4s ease-in-out infinite;
}

.trusted-card:hover img {
    animation-duration: 2.4s;
}

@keyframes trustedSlideLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 32px));
    }
}

@keyframes trustedSlideRight {
    from {
        transform: translateX(calc(-50% - 32px));
    }

    to {
        transform: translateX(0);
    }
}

@keyframes trustedGridMotion {
    from {
        background-position: -260px 0, 0 0, 0 0, 0 0;
    }

    to {
        background-position: 130% 0, 34px -34px, 36px 36px, 36px 36px;
    }
}

@keyframes trustedPrismWash {
    0%, 100% { filter: saturate(1) brightness(1); opacity: .26; }
    50% { filter: saturate(1.18) brightness(1.04); opacity: .4; }
}

@keyframes trustedBeamSweep {
    from {
        background-position: -40% 0, 120% 0;
    }

    to {
        background-position: 120% 0, -30% 0;
    }
}

@keyframes trustedTextSheen {
    0%, 100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@keyframes trustedFontGlow {
    0%, 100% { filter: drop-shadow(0 6px 14px rgba(128,0,128,.1)); }
    50% { filter: drop-shadow(0 10px 20px rgba(128,0,128,.22)) drop-shadow(0 0 10px rgba(244,196,48,.12)); }
}

@keyframes trustedHeadlineScan {
    0%, 100% { background-position: 0% center; filter: drop-shadow(0 8px 18px rgba(15,23,42,.06)); }
    50% { background-position: 100% center; filter: drop-shadow(0 10px 22px rgba(128,0,128,.12)); }
}

@keyframes trustedUnderlineFlow {
    0%, 100% { background-position: 0% center; width: min(130px, 18vw); opacity: .72; }
    50% { background-position: 100% center; width: min(210px, 28vw); opacity: 1; }
}

@keyframes trustedCardFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -5px;
    }
}

@keyframes trustedCardShine {
    0%, 42% {
        transform: translateX(-120%);
    }

    72%, 100% {
        transform: translateX(120%);
    }
}

@keyframes trustedCardDepth {
    0%, 100% { scale: 1; }
    50% { scale: 1.012; }
}

@keyframes trustedCardLineFlow {
    0%, 100% { background-position: 0% center; opacity: .5; }
    50% { background-position: 100% center; opacity: .95; }
}

@keyframes trustedLogoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 10px 18px rgba(128,0,128,.18));
    }

    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 14px 24px rgba(244,196,48,.28));
    }
}

@keyframes trustedAuraOrbit {
    0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); filter: hue-rotate(0deg); }
    50% { transform: translate3d(-10px,6px,0) scale(1.015) rotate(1.5deg); filter: hue-rotate(8deg); }
    100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); filter: hue-rotate(0deg); }
}

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

@keyframes trustedCardGlow {
    0%, 100% {
        border-color: rgba(128,0,128,.08);
        box-shadow: 0 10px 24px rgba(15,23,42,.08), 0 0 18px rgba(128,0,128,.07), inset 0 1px 0 rgba(255,255,255,.75);
    }
    50% {
        border-color: rgba(244,196,48,.22);
        box-shadow: 0 14px 30px rgba(15,23,42,.1), 0 0 24px rgba(128,0,128,.12), 0 0 16px rgba(244,196,48,.12), inset 0 1px 0 rgba(255,255,255,.9);
    }
}

@keyframes trustedLogoOrbit {
    0%, 100% { rotate: 0deg; }
    50% { rotate: 2deg; }
}

@keyframes trustedLogoGlowSweep {
    0%, 100% { opacity: .92; }
    50% { opacity: 1; filter: drop-shadow(0 9px 18px rgba(128,0,128,.26)) drop-shadow(0 0 10px rgba(244,196,48,.16)); }
}

@keyframes trustedLabelSheen {
    0%, 100% { background-position: 0% center; color: #1d222c; }
    50% { background-position: 100% center; color: #800080; }
}

@media (max-width: 991px) {
    .stats.trusted-stats {
        padding: 28px 0 32px;
    }

    .trusted-heading {
        margin-bottom: 22px;
    }

    .trusted-track {
        gap: 14px;
        animation-duration: 22s;
    }

    .trusted-card {
        flex-basis: 115px;
        min-height: 59px;
        padding: 11px 9px;
    }

    .trusted-card span {
        font-size: 9px;
    }
}

@media (max-width: 560px) {
    .stats.trusted-stats {
        padding: 22px 0 26px;
    }

    .trusted-heading {
        width: min(100% - 24px, 1180px);
        margin-bottom: 17px;
    }

    .trusted-marquee + .trusted-marquee {
        margin-top: 14px;
    }

    .trusted-track {
        gap: 9px;
        padding-inline: 8px;
    }

    .trusted-card {
        flex-basis: 95px;
        min-height: 54px;
        padding: 9px 7px;
    }

    .trusted-card img {
        width: 21px;
        height: 21px;
        margin-bottom: 8px;
    }

    .trusted-card span {
        font-size: 8px;
    }
}

.process-book-section {
    --process-steps: 10;
    min-height: calc((var(--process-steps) * 82vh) + 120vh);
    padding: 0;
    scroll-margin-top: 92px;
    background:
        linear-gradient(115deg, rgba(128,0,128,.06), transparent 34%),
        linear-gradient(245deg, rgba(244,196,48,.08), transparent 34%),
        #fff;
}

.process-book-pin {
    position: sticky;
    top: 50px;
    min-height: calc(100vh - 92px);
    display: grid;
    align-items: center;
    padding-block: 38px;
}

.process-book-grid {
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(360px, 1.05fr);
    align-items: center;
    gap: clamp(34px, 6vw, 82px);
}

.process-book-visual {
    position: relative;
    min-height: clamp(430px, 58vw, 650px);
    perspective: 1500px;
}

.process-book-visual::before {
    content: "";
    position: absolute;
    inset: 8% 6% 8% 18%;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(128,0,128,.14), rgba(244,196,48,.16));
    filter: blur(26px);
    opacity: .72;
}

.process-book-pages {
    position: relative;
    height: 100%;
    min-height: inherit;
}

.process-book-page {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    opacity: .16;
    transform: translate3d(-42px, 28px, 0) rotateY(-32deg) rotateZ(-4deg) scale(.82);
    transform-origin: left center;
    transition: opacity .7s ease, transform .7s ease, filter .7s ease;
    filter: saturate(.7) blur(1px);
}

.process-book-page:nth-child(2) {
    transform: translate3d(-22px, 10px, 0) rotateY(-24deg) rotateZ(-2deg) scale(.86);
}

.process-book-page:nth-child(3) {
    transform: translate3d(0, -8px, 0) rotateY(-16deg) rotateZ(1deg) scale(.9);
}

.process-book-page:nth-child(4) {
    transform: translate3d(22px, -24px, 0) rotateY(-8deg) rotateZ(3deg) scale(.94);
}

.process-book-page.active {
    z-index: 4;
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1);
    filter: saturate(1) blur(0);
}

.process-book-page.past {
    opacity: .34;
    transform: translate3d(-72px, 36px, 0) rotateY(-44deg) rotateZ(-7deg) scale(.78);
}

.process-book-page img {
    width: min(100%, 520px);
    max-height: 620px;
    object-fit: contain;
    border-radius: 26px;
    box-shadow:
        0 30px 80px rgba(15,23,42,.16),
        0 0 0 1px rgba(128,0,128,.08);
}

.process-book-copy {
    position: relative;
    max-width: 720px;
    min-height: 500px;
    display: grid;
    align-items: center;
    perspective: 900px;
}

.process-book-copy::before {
    content: "";
    position: absolute;
    inset: 10% -5% 10% 4%;
    z-index: -1;
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 22%, rgba(128,0,128,.14), transparent 26%),
        radial-gradient(circle at 84% 74%, rgba(244,196,48,.16), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));
    filter: blur(18px);
    opacity: .78;
    animation: processCopyAura 6.5s ease-in-out infinite;
}

.process-book-content {
    position: relative;
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(58px);
    filter: blur(10px);
    padding: clamp(18px, 2vw, 24px);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
        linear-gradient(135deg, rgba(128,0,128,.055), rgba(244,196,48,.05));
    box-shadow:
        0 18px 48px rgba(15,23,42,.08),
        0 0 36px rgba(128,0,128,.08),
        inset 0 1px 0 rgba(255,255,255,.88);
    transition: opacity .72s ease, transform .72s ease, filter .72s ease, box-shadow .72s ease;
    overflow: hidden;
}

.process-book-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.52) 48%, transparent 58%),
        radial-gradient(circle at 8% 14%, rgba(128,0,128,.1), transparent 22%);
    transform: translateX(-120%);
    opacity: .72;
    animation: processContentReflect 5.2s ease-in-out infinite;
}

.process-book-content.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
    animation: processContentFloat 5.8s ease-in-out infinite, processContentGlow 4.6s ease-in-out infinite;
}

.process-book-content.past {
    transform: translateY(-58px);
}

.process-book-content .eyebrow {
    width: fit-content;
    margin-bottom: 16px;
}

.process-book-content h2 {
    margin: 0;
    color: transparent;
    background: linear-gradient(100deg, #0f172a 0%, #800080 42%, #f4a51c 70%, #0f172a 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(25px, 3.36vw, 47px);
    line-height: 1.08;
    letter-spacing: 0;
    text-shadow: 0 14px 30px rgba(128,0,128,.08);
    animation: processHeadingSheen 4.8s ease-in-out infinite;
}

.process-book-content > p:not(.eyebrow) {
    max-width: 520px;
    margin: 17px 0 20px;
    color: #65739a;
    font-size: clamp(11px, .93vw, 14px);
    line-height: 1.6;
    font-weight: 600;
    text-shadow: 0 8px 18px rgba(15,23,42,.05);
    animation: processBodyLift 5.6s ease-in-out infinite;
}

.process-book-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.process-book-tags span {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 35px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(128,0,128,.1);
    color: #222b3d;
    background:
        linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.72)),
        radial-gradient(circle at 12% 18%, rgba(128,0,128,.12), transparent 24%);
    box-shadow: 0 8px 18px rgba(15,23,42,.08), 0 0 18px rgba(128,0,128,.06), inset 0 1px 0 rgba(255,255,255,.9);
    font-size: 11px;
    font-weight: 850;
    animation: processTagPulse 4.2s ease-in-out infinite;
}

.process-book-tags span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0 36%, rgba(255,255,255,.62) 50%, transparent 64%);
    transform: translateX(-120%);
    animation: processTagShine 4.8s ease-in-out infinite;
}

.process-book-tags i {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #800080;
    background: rgba(128,0,128,.08);
    font-size: 9px;
    box-shadow: 0 0 14px rgba(128,0,128,.08);
}

.process-book-progress {
    position: relative;
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    margin-top: 14px;
    display: flex;
    gap: 6px;
}

.process-book-progress span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15,36,105,.18);
    transition: width .35s ease, background .35s ease;
}

.process-book-progress span.active {
    width: 20px;
    background: #800080;
    box-shadow: 0 0 18px rgba(128,0,128,.22);
}

@keyframes processCopyAura {
    0%, 100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: .58;
    }
    50% {
        transform: translate3d(-10px,8px,0) scale(1.04);
        opacity: .9;
    }
}

@keyframes processContentReflect {
    0%, 56%, 100% {
        transform: translateX(-120%);
        opacity: 0;
    }
    70% {
        opacity: .72;
    }
    88% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes processContentFloat {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -4px;
    }
}

@keyframes processContentGlow {
    0%, 100% {
        box-shadow: 0 18px 48px rgba(15,23,42,.08), 0 0 36px rgba(128,0,128,.08), inset 0 1px 0 rgba(255,255,255,.88);
    }
    50% {
        box-shadow: 0 22px 58px rgba(15,23,42,.1), 0 0 44px rgba(128,0,128,.14), 0 0 22px rgba(244,196,48,.1), inset 0 1px 0 rgba(255,255,255,.95);
    }
}

@keyframes processHeadingSheen {
    0%, 100% {
        background-position: 0% center;
        filter: drop-shadow(0 8px 16px rgba(128,0,128,.08));
    }
    50% {
        background-position: 100% center;
        filter: drop-shadow(0 12px 22px rgba(128,0,128,.18));
    }
}

@keyframes processBodyLift {
    0%, 100% {
        transform: translateY(0);
        opacity: .88;
    }
    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

@keyframes processTagPulse {
    0%, 100% {
        transform: translateY(0);
        border-color: rgba(128,0,128,.1);
    }
    50% {
        transform: translateY(-2px);
        border-color: rgba(244,196,48,.22);
    }
}

@keyframes processTagShine {
    0%, 58%, 100% {
        transform: translateX(-120%);
    }
    78% {
        transform: translateX(120%);
    }
}

@media (max-width: 991px) {
    .process-book-section {
        min-height: calc((var(--process-steps) * 76vh) + 110vh);
        padding: 0;
        scroll-margin-top: 0;
    }

    .process-book-pin {
        position: sticky;
        top: 0;
        min-height: 100svh;
        padding-block: 28px;
    }

    .process-book-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .process-book-visual {
        min-height: clamp(310px, 48vh, 520px);
        overflow: hidden;
    }

    .process-book-copy {
        min-height: clamp(280px, 34vh, 430px);
    }
}

@media (max-width: 560px) {
    .process-book-section {
        min-height: calc((var(--process-steps) * 74vh) + 105vh);
        padding: 0;
    }

    .process-book-visual {
        min-height: clamp(260px, 44vh, 410px);
    }

    .process-book-page img {
        max-height: min(390px, 42vh);
        border-radius: 18px;
    }

    .process-book-copy {
        min-height: clamp(300px, 38vh, 420px);
    }

    .process-book-tags {
        gap: 10px;
    }

    .process-book-tags span {
        min-height: 30px;
        padding: 0 10px;
        font-size: 9px;
    }

    .process-book-progress {
        justify-self: start;
    }
}

.dashboard-preview {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(128,0,128,.1), transparent 24%),
        radial-gradient(circle at 84% 76%, rgba(244,196,48,.12), transparent 26%),
        linear-gradient(115deg, rgba(128,0,128,.06), transparent 34%),
        linear-gradient(245deg, rgba(244,196,48,.12), transparent 36%),
        #fff;
    isolation: isolate;
}

.dashboard-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    height: auto;
    z-index: -1;
    background:
        linear-gradient(rgba(128,0,128,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.045) 1px, transparent 1px),
        linear-gradient(90deg, transparent, rgba(128,0,128,.16), rgba(244,196,48,.18), transparent);
    background-size: 58px 58px, 58px 58px, 36% 100%;
    background-position: 0 0, 0 0, -44% 0;
    opacity: .72;
    animation: dashboardBgFlow 16s linear infinite, dashboardRailSweep 6.8s ease-in-out infinite;
}

.dashboard-preview .section-heading {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: clamp(17px, 2.5vw, 28px);
    border: 1px solid rgba(128,0,128,.08);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.68)),
        radial-gradient(circle at 12% 18%, rgba(128,0,128,.08), transparent 28%);
    box-shadow: 0 16px 44px rgba(15,23,42,.07), 0 0 28px rgba(128,0,128,.08), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    animation: dashboardCopyFloat 5.6s ease-in-out infinite, dashboardCopyGlow 4.8s ease-in-out infinite;
}

.dashboard-preview .section-heading h2 {
    max-width: 560px;
    color: transparent;
    background: linear-gradient(105deg, #120524 0%, #800080 46%, #f4a51c 72%, #120524 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(22px, 3vw, 41px);
    line-height: 1.08;
    text-shadow: 0 12px 28px rgba(128,0,128,.08);
    animation: dashboardTitleSheen 4.8s ease-in-out infinite;
}

.dashboard-preview .section-heading p {
    max-width: 520px;
    color: #5f6678;
    font-size: clamp(11px, .9vw, 13px);
    line-height: 1.62;
    font-weight: 650;
    text-shadow: 0 8px 18px rgba(15,23,42,.04);
}

.dashboard-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.dashboard-highlights span {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: #271134;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.78)),
        radial-gradient(circle at 16% 20%, rgba(128,0,128,.1), transparent 26%);
    box-shadow: 0 8px 18px rgba(15,23,42,.07), 0 0 18px rgba(128,0,128,.06);
    font-size: 11px;
    font-weight: 850;
    animation: dashboardPillLift 4.6s ease-in-out infinite;
}

.dashboard-highlights span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0 36%, rgba(255,255,255,.64) 50%, transparent 64%);
    transform: translateX(-120%);
    animation: dashboardPillShine 5s ease-in-out infinite;
}

.dashboard-highlights i {
    color: #800080;
    font-size: 10px;
    filter: drop-shadow(0 0 10px rgba(128,0,128,.18));
}

.dashboard-mock {
    min-height: 330px;
}

.dashboard-image-stage {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2vw, 24px);
    border: 1px solid rgba(128,0,128,.1);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.7)),
        linear-gradient(135deg, rgba(128,0,128,.08), rgba(244,196,48,.1));
    box-shadow:
        0 24px 70px rgba(15,23,42,.12),
        0 0 36px rgba(128,0,128,.09),
        0 0 0 1px rgba(255,255,255,.72) inset;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.dashboard-image-stage::before {
    content: "";
    position: absolute;
    inset: 9% 6%;
    z-index: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(128,0,128,.22), rgba(244,196,48,.18));
    filter: blur(22px);
    opacity: .72;
}

.dashboard-image-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.42) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: dashboardShine 5.8s ease-in-out infinite;
    pointer-events: none;
}

.dashboard-image-stage img {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    max-height: 420px;
    object-fit: contain;
    border-radius: 18px;
    transform: rotateY(-10deg) rotateX(6deg) translateZ(42px);
    transform-origin: center;
    filter: drop-shadow(0 24px 42px rgba(15,23,42,.2));
    animation: dashboardFloat3d 5.4s ease-in-out infinite, dashboardImageGlow 4.8s ease-in-out infinite;
}

@keyframes dashboardFloat3d {
    0%, 100% {
        transform: rotateY(-10deg) rotateX(6deg) translate3d(0, 0, 42px);
    }

    50% {
        transform: rotateY(-7deg) rotateX(4deg) translate3d(0, -14px, 58px);
    }
}

@keyframes dashboardShine {
    0%, 42% {
        transform: translateX(-120%);
    }

    72%, 100% {
        transform: translateX(120%);
    }
}

@keyframes dashboardBgFlow {
    0% {
        background-position: 0 0, 0 0, -44% 0;
    }
    100% {
        background-position: 58px 58px, 58px 58px, 144% 0;
    }
}

@keyframes dashboardRailSweep {
    0%, 60%, 100% {
        opacity: .42;
        filter: saturate(1);
    }
    76% {
        opacity: .78;
        filter: saturate(1.16);
    }
}

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

@keyframes dashboardCopyGlow {
    0%, 100% {
        box-shadow: 0 16px 44px rgba(15,23,42,.07), 0 0 28px rgba(128,0,128,.08), inset 0 1px 0 rgba(255,255,255,.9);
    }
    50% {
        box-shadow: 0 20px 54px rgba(15,23,42,.09), 0 0 36px rgba(128,0,128,.13), 0 0 18px rgba(244,196,48,.1), inset 0 1px 0 rgba(255,255,255,.94);
    }
}

@keyframes dashboardTitleSheen {
    0%, 100% {
        background-position: 0% center;
        filter: drop-shadow(0 8px 16px rgba(128,0,128,.08));
    }
    50% {
        background-position: 100% center;
        filter: drop-shadow(0 12px 22px rgba(128,0,128,.18));
    }
}

@keyframes dashboardPillLift {
    0%, 100% {
        transform: translateY(0);
        border-color: rgba(128,0,128,.08);
    }
    50% {
        transform: translateY(-2px);
        border-color: rgba(244,196,48,.2);
    }
}

@keyframes dashboardPillShine {
    0%, 58%, 100% {
        transform: translateX(-120%);
    }
    78% {
        transform: translateX(120%);
    }
}

@keyframes dashboardImageGlow {
    0%, 100% {
        filter: drop-shadow(0 24px 42px rgba(15,23,42,.2));
    }
    50% {
        filter: drop-shadow(0 30px 50px rgba(15,23,42,.22)) drop-shadow(0 0 22px rgba(128,0,128,.12));
    }
}

.testimonials {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #151922;
    background:
        radial-gradient(circle at 14% 18%, rgba(128,0,128,.1), transparent 24%),
        radial-gradient(circle at 86% 72%, rgba(244,196,48,.13), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,239,.92));
}

.testimonials::before,
.testimonials::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.testimonials::before {
    background:
        linear-gradient(rgba(128,0,128,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.045) 1px, transparent 1px),
        radial-gradient(circle, rgba(128,0,128,.1) 0 1.5px, transparent 2.5px);
    background-size: 58px 58px, 58px 58px, 96px 96px;
    opacity: .55;
    animation: testimonialGridFlow 18s linear infinite;
}

.testimonials::after {
    background:
        conic-gradient(from 140deg at 50% 45%, transparent 0 62%, rgba(128,0,128,.08) 70%, transparent 78%),
        linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.58) 48%, transparent 58%);
    background-size: 150% 150%, 34% 100%;
    background-position: center, -44% 0;
    opacity: .58;
    animation: testimonialAuraSpin 14s ease-in-out infinite, testimonialReflectSweep 7s ease-in-out infinite;
}

.testimonial-heading {
    position: relative;
    max-width: 1020px;
    margin-inline: auto;
    text-align: center;
}

.testimonial-heading h2 {
    margin-bottom: 8px;
    color: #151922;
    font-size: clamp(25px, 3vw, 47px);
    line-height: 1.03;
    text-shadow: 0 10px 24px rgba(15,23,42,.08);
    animation: testimonialTitleLift 5.4s ease-in-out infinite;
}

.testimonial-heading h2 span {
    background: linear-gradient(100deg, #800080, #9C27B0 42%, #F4C430 72%, #800080);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: testimonialTextSheen 4.6s ease-in-out infinite;
}

.testimonial-heading > p:not(.eyebrow) {
    color: #202532;
    font-size: clamp(11px, 1.08vw, 16px);
    font-weight: 650;
    text-shadow: 0 8px 18px rgba(15,23,42,.05);
}

.testimonial-heading .eyebrow {
    border-color: rgba(128,0,128,.16);
    color: #800080;
    background: linear-gradient(135deg, rgba(128,0,128,.08), rgba(244,196,48,.08));
    box-shadow: 0 10px 28px rgba(128,0,128,.08);
    animation: testimonialEyebrowPulse 4.2s ease-in-out infinite;
}

.testimonial-window {
    overflow: hidden;
    width: min(100vw, 100%);
    padding: 8px 0 16px;
}

.testimonial-track {
    display: flex;
    gap: 18px;
    transition: transform .65s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.testimonial-card {
    min-width: min(340px, 82vw);
}

.video-story-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #111827;
    box-shadow: 0 18px 44px rgba(15,23,42,.15), 0 0 28px rgba(128,0,128,.1);
    transform: translateZ(0);
    transition: transform .45s ease, box-shadow .45s ease, filter .45s ease;
    animation: testimonialCardFloat 5.8s ease-in-out infinite, testimonialCardGlow 4.8s ease-in-out infinite;
}

.video-story-card:hover {
    transform: translateY(-6px) scale(1.018);
    box-shadow: 0 26px 62px rgba(15,23,42,.2), 0 0 34px rgba(128,0,128,.16);
    filter: saturate(1.06);
}

.video-story-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform .6s ease, filter .6s ease;
}

.video-story-card:hover img {
    transform: scale(1.1);
    filter: saturate(1.12);
}

.video-story-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.78)),
        linear-gradient(90deg, rgba(128,0,128,.36), transparent 64%),
        radial-gradient(circle at 82% 12%, rgba(244,196,48,.24), transparent 32%);
}

.video-story-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.28) 48%, transparent 58%);
    transform: translateX(-120%);
    animation: testimonialCardShine 5.8s ease-in-out infinite;
}

.story-play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #800080;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(0,0,0,.24), 0 0 24px rgba(128,0,128,.18);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease;
    animation: testimonialPlayPulse 3.2s ease-in-out infinite;
}

.story-play i {
    margin-left: 4px;
    font-size: 17px;
}

.video-story-card:hover .story-play {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 22px 54px rgba(0,0,0,.34);
}

.story-copy {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 15px;
}

.story-copy span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,.72);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.story-copy h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    line-height: 1.08;
    text-shadow: 0 10px 22px rgba(0,0,0,.3);
}

.story-copy p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 650;
}

.testimonial-nav {
    flex: 0 0 auto;
}

@keyframes testimonialGridFlow {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 58px 58px, 58px 58px, 96px -96px; }
}

@keyframes testimonialAuraSpin {
    0%, 100% { transform: translate3d(0,0,0) scale(1); filter: hue-rotate(0deg); }
    50% { transform: translate3d(-12px,8px,0) scale(1.025); filter: hue-rotate(8deg); }
}

@keyframes testimonialReflectSweep {
    0%, 60%, 100% { background-position: center, -44% 0; opacity: .44; }
    78% { background-position: center, 144% 0; opacity: .72; }
}

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

@keyframes testimonialTextSheen {
    0%, 100% { background-position: 0% center; filter: drop-shadow(0 8px 16px rgba(128,0,128,.1)); }
    50% { background-position: 100% center; filter: drop-shadow(0 12px 22px rgba(128,0,128,.2)); }
}

@keyframes testimonialEyebrowPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 10px 28px rgba(128,0,128,.08); }
    50% { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(128,0,128,.14), 0 0 18px rgba(244,196,48,.1); }
}

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

@keyframes testimonialCardGlow {
    0%, 100% { box-shadow: 0 18px 44px rgba(15,23,42,.15), 0 0 28px rgba(128,0,128,.1); }
    50% { box-shadow: 0 22px 54px rgba(15,23,42,.18), 0 0 36px rgba(128,0,128,.16), 0 0 18px rgba(244,196,48,.1); }
}

@keyframes testimonialCardShine {
    0%, 58%, 100% { transform: translateX(-120%); opacity: 0; }
    74% { opacity: .8; }
    88% { transform: translateX(120%); opacity: 0; }
}

@keyframes testimonialPlayPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.06); }
}

.media-coverage {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(128,0,128,.055), transparent 32%),
        linear-gradient(245deg, rgba(244,196,48,.1), transparent 34%),
        #f8fafc;
}

.media-coverage-heading {
    margin-bottom: 42px;
    text-align: center;
}

.media-coverage-heading h2 {
    margin: 0;
    color: #151922;
    font-size: clamp(46px, 6vw, 92px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
}

.media-coverage-heading h2 span {
    background: linear-gradient(100deg, #263aa2 0%, #7d2e89 48%, #f0272d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.media-coverage-heading p {
    margin: 28px 0 0;
    color: #151922;
    font-size: clamp(20px, 2.2vw, 38px);
    line-height: 1.25;
    font-weight: 500;
}

.media-coverage-grid {
    display: grid;
    grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
    align-items: stretch;
    gap: 28px;
}

.media-feature-card,
.media-news-card {
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,23,42,.09);
}

.media-feature-card {
    min-height: 590px;
}

.media-image,
.media-thumb {
    display: block;
    overflow: hidden;
}

.media-image {
    height: 270px;
    border-radius: 14px 14px 0 0;
}

.media-image img,
.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.media-feature-card:hover img,
.media-news-card:hover img {
    transform: scale(1.06);
}

.media-feature-copy {
    padding: clamp(22px, 2.4vw, 30px);
}

.media-feature-copy > p:first-child,
.media-news-card > div > p:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    color: #4b5563;
    font-size: 17px;
    font-weight: 650;
}

.media-feature-copy em,
.media-news-card em {
    color: #3f454f;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.media-feature-copy h2 {
    margin: 0 0 18px;
    color: #151922;
    font-size: clamp(25px, 2.8vw, 36px);
    line-height: 1.16;
}

.media-feature-copy > p:not(:first-child),
.media-news-card > div > p:not(:first-child) {
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 600;
}

.media-learn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    min-height: 52px;
    padding: 0 0 0 20px;
    border: 1px solid rgba(7, 54, 28, .55);
    border-radius: 999px;
    color: #0b331a;
    background: #fff;
    font-size: 17px;
    font-weight: 950;
    box-shadow: 0 10px 26px rgba(15,23,42,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.media-learn i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background: #07361c;
    transform: rotate(45deg);
}

.media-learn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(15,23,42,.12);
}

.media-news-rail {
    position: relative;
    overflow: hidden;
    min-height: 590px;
    max-height: 590px;
    padding-right: 6px;
}

.media-news-rail::before,
.media-news-rail::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 86px;
    pointer-events: none;
}

.media-news-rail::before {
    top: 0;
    background: linear-gradient(180deg, #f8fafc, rgba(248,250,252,0));
}

.media-news-rail::after {
    bottom: 0;
    background: linear-gradient(0deg, #f8fafc, rgba(248,250,252,0));
}

.media-news-track {
    display: grid;
    gap: 18px;
    animation: mediaNewsUp 24s linear infinite;
}

.media-news-rail:hover .media-news-track {
    animation-play-state: paused;
}

.media-news-card {
    display: grid;
    grid-template-columns: minmax(240px, 40%) 1fr;
    min-height: 228px;
}

.media-thumb {
    min-height: 228px;
}

.media-news-card > div {
    padding: 24px 28px;
}

.media-news-card h3 {
    margin: 0 0 8px;
    color: #151922;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.12;
}

.media-news-card .media-learn {
    min-height: 46px;
    margin-top: 18px;
    font-size: 16px;
}

.media-news-card .media-learn i {
    width: 46px;
    height: 46px;
}

@keyframes mediaNewsUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-50% - 14px));
    }
}

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

    .media-news-rail {
        max-height: none;
        min-height: auto;
    }

    .media-news-track {
        animation: none;
    }

    .media-news-card {
        grid-template-columns: 1fr;
    }

    .media-thumb {
        min-height: 260px;
    }
}

@media (max-width: 640px) {
    .media-feature-card {
        min-height: auto;
    }

    .media-image {
        height: 230px;
    }

    .media-feature-copy,
    .media-news-card > div {
        padding: 22px;
    }

    .media-feature-copy > p:first-child,
    .media-news-card > div > p:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        font-size: 16px;
    }

    .media-learn {
        min-height: 54px;
        padding-left: 18px;
        font-size: 18px;
    }

    .media-learn i,
    .media-news-card .media-learn i {
        width: 54px;
        height: 54px;
    }

    .testimonial-shell {
        grid-template-columns: 1fr;
    }

    .testimonial-nav {
        display: none;
    }

    .testimonial-track {
        gap: 16px;
    }

    .story-play {
        width: 48px;
        height: 48px;
    }

    .story-copy h3 {
        font-size: 15px;
    }
}

.faq-grid {
    grid-template-columns: .86fr 1.14fr;
    align-items: start;
}

.faq-list {
    display: grid;
    gap: 14px;
}

.faq-list details {
    padding: 22px;
}

.faq-list summary {
    color: #15062a;
    cursor: pointer;
    font-size: 17px;
    font-weight: 900;
}

.faq-list p {
    margin: 12px 0 0;
}

.contact-links {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.contact-links a {
    width: fit-content;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-weight: 850;
}

.lead-form {
    display: grid;
    gap: 18px;
    padding: 28px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label {
    display: grid;
    gap: 8px;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    font-weight: 850;
}

input,
select,
textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius);
    color: #fff;
    background: rgba(255,255,255,.08);
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

select option {
    color: #17062d;
}

textarea {
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,.48);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(216,180,254,.8);
    background: rgba(255,255,255,.12);
    box-shadow: 0 0 0 4px rgba(168,85,247,.16);
}

.form-status {
    min-height: 24px;
    margin: 0;
    color: var(--green);
    font-weight: 850;
}

.contact {
    position: relative;
    overflow: hidden;
    min-height: 680px;
    color: #151624;
    background:
        radial-gradient(circle at 48% 18%, rgba(128,0,151,.09), transparent 18%),
        radial-gradient(circle at 82% 18%, rgba(118,19,151,.08), transparent 22%),
        linear-gradient(180deg, #fff 0%, #fbfbff 54%, #fff 100%);
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(128,0,151,.07) 48% 48.08%, transparent 48.08%),
        linear-gradient(180deg, rgba(128,0,151,.035), transparent 34%);
    animation: contactGridDrift 13s ease-in-out infinite alternate;
}

.contact::after {
    content: "";
    position: absolute;
    inset: 8% -12% auto auto;
    width: 360px;
    height: 360px;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(128,0,128,.12), transparent 64%),
        conic-gradient(from 120deg, transparent, rgba(255,145,0,.18), transparent, rgba(128,0,128,.16), transparent);
    filter: blur(10px);
    opacity: .72;
    animation: contactAuraSpin 18s linear infinite;
}

.contact-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(390px, 1fr) minmax(430px, .94fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.contact-copy {
    max-width: 760px;
}

.contact .eyebrow {
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #9b18c4, #78009f 58%, #5c007c);
    box-shadow: 0 14px 28px rgba(122,0,159,.25);
    font-size: 11px;
    letter-spacing: .02em;
}

.contact h2 {
    max-width: 560px;
    margin: 24px 0 14px;
    color: #151624;
    font-size: clamp(31px, 3.35vw, 48px);
    line-height: 1.07;
    letter-spacing: 0;
}

.contact h2 span {
    display: block;
    color: #79009e;
}

.contact-copy > p:not(.eyebrow) {
    max-width: 540px;
    color: #555a70;
    font-size: clamp(13px, .98vw, 16px);
    line-height: 1.5;
    font-weight: 650;
}

.contact-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.contact-benefits article {
    min-height: 108px;
    padding: 14px 12px 13px;
    border: 1px solid rgba(23,22,36,.08);
    border-radius: 12px;
    text-align: center;
    background: #fff;
    box-shadow: 0 12px 28px rgba(34,20,56,.08);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.contact-benefits article:hover {
    transform: translateY(-5px);
    border-color: rgba(128,0,128,.18);
    box-shadow: 0 18px 40px rgba(128,0,128,.13);
}

.contact-benefits i {
    display: block;
    color: #8400a8;
    font-size: 25px;
    margin-bottom: 9px;
    animation: contactIconFloat 3.2s ease-in-out infinite;
}

.contact-benefits strong {
    display: block;
    color: #171624;
    font-size: 11px;
    font-weight: 950;
}

.contact-benefits span {
    display: block;
    margin-top: 6px;
    color: #4f5265;
    font-size: 10px;
    line-height: 1.45;
    font-weight: 650;
}

.contact-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 18px;
    border: 1px solid rgba(23,22,36,.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(34,20,56,.08);
    overflow: hidden;
}

.contact-links a {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    color: #161624;
    font-size: 13px;
    font-weight: 800;
}

.contact-links a + a {
    border-left: 1px solid rgba(23,22,36,.1);
}

.contact-links > a > i {
    width: 43px;
    height: 43px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 43px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #9500bc, #650086);
    box-shadow: 0 10px 22px rgba(122,0,159,.2);
    font-size: 18px;
    animation: contactIconGlow 2.8s ease-in-out infinite;
}

.contact-links span,
.contact-links em,
.contact-links strong,
.contact-links small {
    display: block;
}

.contact-links em {
    color: #686b7d;
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
}

.contact-links strong {
    color: #78009f;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 950;
}

.contact-links small {
    margin-top: 3px;
    color: #565a70;
    font-size: 9px;
    font-weight: 700;
}

.contact .lead-form {
    position: relative;
    display: grid;
    gap: 16px;
    padding: clamp(22px, 2.5vw, 34px);
    border: 1px solid rgba(23,22,36,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 22px 58px rgba(36,19,57,.13);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.contact .lead-form-panel {
    display: grid;
    gap: 16px;
}

.contact .lead-form-loader,
.contact .lead-success-panel {
    display: none;
}

.contact .lead-form.is-loading .lead-form-panel,
.contact .lead-form.is-success .lead-form-panel {
    display: none;
}

.contact .lead-form.is-loading .lead-form-loader {
    min-height: 420px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 18px;
    text-align: center;
}

.contact .lead-form-loader img {
    width: clamp(92px, 9vw, 136px);
    height: clamp(92px, 9vw, 136px);
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(128,0,128,.18));
}

.contact .lead-form-loader p {
    margin: 0;
    color: #800080;
    font-size: 15px;
    font-weight: 900;
}

.contact .lead-form.is-success .lead-success-panel {
    position: relative;
    min-height: 500px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 16px;
    padding: clamp(18px, 2vw, 26px) 0;
    text-align: center;
    animation: leadSuccessRise .55s ease both;
}

.contact .lead-success-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 18%, rgba(176,0,212,.12), transparent 22%),
        radial-gradient(circle at 72% 12%, rgba(255,142,0,.1), transparent 21%),
        linear-gradient(135deg, rgba(128,0,128,.03), rgba(255,255,255,0) 42%);
}

.contact .success-confetti {
    position: relative;
    width: min(340px, 86%);
    height: 24px;
    pointer-events: none;
}

.contact .success-confetti span {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ba16df, #800080);
    box-shadow: 0 0 18px rgba(128,0,128,.22);
    animation: leadConfettiFloat 2.7s ease-in-out infinite;
}

.contact .success-confetti span:nth-child(1) { left: 10%; top: 8px; border-radius: 50%; animation-delay: -.2s; }
.contact .success-confetti span:nth-child(2) { left: 24%; top: 20px; transform: rotate(45deg); animation-delay: -.7s; }
.contact .success-confetti span:nth-child(3) { left: 42%; top: 0; width: 10px; height: 10px; animation-delay: -1.1s; }
.contact .success-confetti span:nth-child(4) { right: 29%; top: 12px; transform: rotate(72deg); animation-delay: -.4s; }
.contact .success-confetti span:nth-child(5) { right: 15%; top: 4px; border-radius: 50%; background: #c25be2; animation-delay: -1.4s; }
.contact .success-confetti span:nth-child(6) { right: 6%; top: 23px; transform: rotate(45deg); background: #dca5ee; animation-delay: -.9s; }

.contact .success-check {
    position: relative;
    z-index: 1;
    width: clamp(96px, 9vw, 132px);
    height: clamp(96px, 9vw, 132px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle at 28% 22%, #cf24f2, #9400bf 54%, #76008e);
    box-shadow:
        0 0 0 22px rgba(128,0,128,.08),
        0 18px 42px rgba(128,0,128,.24);
    animation: leadCheckPulse 2.8s ease-in-out infinite;
}

.contact .success-check i {
    font-size: clamp(40px, 4.2vw, 60px);
    transform: rotate(-4deg);
}

.contact .lead-success-panel h3 {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 12px 0 0;
    color: #171624;
    font-size: clamp(20px, 3vw, 35px);
    line-height: 1.12;
    letter-spacing: 0;
}

.contact .success-rule {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ad00d7, #e7b5f5);
    box-shadow: 0 12px 26px rgba(128,0,128,.18);
}

.contact .lead-success-panel > p {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0;
    color: #6b6f80;
    font-size: clamp(12px, 1.35vw, 17px);
    line-height: 1.45;
    font-weight: 650;
}

.contact .success-note {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    padding: clamp(15px, 1.8vw, 22px);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(128,0,128,.1), rgba(128,0,128,.04));
    text-align: left;
}

.contact .success-note i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #b900df, #800080);
    box-shadow: 0 16px 30px rgba(128,0,128,.24);
    font-size: 24px;
}

.contact .success-note strong {
    color: #171624;
    font-size: clamp(11px, 1.2vw, 16px);
    line-height: 1.32;
}

.contact .lead-form .success-back {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    min-height: 54px;
    margin-top: 8px;
    font-size: clamp(12px, 1.2vw, 18px);
}

@keyframes leadSuccessRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes leadCheckPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 22px rgba(128,0,128,.08), 0 18px 42px rgba(128,0,128,.24);
    }
    50% {
        transform: scale(1.035);
        box-shadow: 0 0 0 30px rgba(128,0,128,.05), 0 24px 52px rgba(128,0,128,.28);
    }
}

@keyframes leadConfettiFloat {
    0%, 100% {
        opacity: .75;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-12px) rotate(20deg);
    }
}

@keyframes contactGridDrift {
    from {
        background-position: 0 0, 0 0;
        opacity: .78;
    }
    to {
        background-position: 34px 18px, 0 32px;
        opacity: 1;
    }
}

@keyframes contactAuraSpin {
    from {
        transform: rotate(0deg) scale(.96);
    }
    to {
        transform: rotate(360deg) scale(1.04);
    }
}

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

@keyframes contactIconGlow {
    0%, 100% {
        box-shadow: 0 10px 22px rgba(122,0,159,.2);
    }
    50% {
        box-shadow: 0 14px 30px rgba(122,0,159,.3);
    }
}

.contact .form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}

.contact .form-heading h3 {
    margin: 0;
    color: #171624;
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.1;
}

.contact .form-heading span {
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8a00ae, transparent);
}

.contact .form-heading > i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #a100ca, #67008c);
    box-shadow: 0 12px 24px rgba(122,0,159,.22);
    font-size: 20px;
    animation: contactIconGlow 3s ease-in-out infinite;
}

.contact .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact label {
    gap: 7px;
    color: #161624;
    font-size: 11px;
    font-weight: 950;
}

.contact .field-control {
    position: relative;
    display: block;
}

.contact .field-control > i {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: #85889a;
    font-size: 13px;
}

.contact input,
.contact select,
.contact textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid rgba(22,22,36,.12);
    border-radius: 10px;
    color: #171624;
    background: #fff;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 8px 22px rgba(23,22,36,.03);
}

.contact .field-control input,
.contact .field-control select {
    padding-left: 38px;
}

.contact textarea {
    min-height: 96px;
    resize: vertical;
}

.contact input::placeholder,
.contact textarea::placeholder {
    color: #8a8d9c;
}

.contact select option {
    color: #171624;
}

.contact input:focus,
.contact select:focus,
.contact textarea:focus {
    border-color: rgba(128,0,151,.42);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(128,0,151,.08);
}

.contact .field-error {
    min-height: 14px;
    margin: 2px 0 0;
    color: #b42318;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 850;
}

.contact label.is-invalid input,
.contact label.is-invalid select,
.contact label.is-invalid textarea {
    border-color: rgba(180,35,24,.58);
    background: #fff8f7;
    box-shadow: 0 0 0 3px rgba(180,35,24,.08);
}

.contact .form-note {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #171624;
    background: linear-gradient(135deg, rgba(128,0,151,.1), rgba(128,0,151,.05));
    font-size: 11px;
    line-height: 1.45;
    font-weight: 850;
}

.contact .form-note i {
    color: #7e00a5;
    font-size: 20px;
}

.contact .lead-form .btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #9800c4, #78009f 62%, #5e007d);
    font-size: 13px;
    box-shadow: 0 13px 30px rgba(122,0,159,.23);
    transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.contact .lead-form .btn:hover {
    transform: translateY(-3px);
    filter: saturate(1.08);
    box-shadow: 0 18px 38px rgba(122,0,159,.28);
}

.contact .form-status {
    color: #0b672c;
    min-height: 0;
}

.contact .form-safe {
    margin: -4px 0 0;
    color: #6b6f80;
    text-align: center;
    font-size: 11px;
    font-weight: 750;
}

.contact .form-safe i {
    margin-right: 8px;
    color: #7a7f91;
}

@media (max-width: 991px) {
    .contact {
        min-height: auto;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact h2 {
        font-size: clamp(40px, 8vw, 62px);
    }

    .contact-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .contact .lead-form {
        padding: 24px;
    }

    .contact .form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact h2 {
        font-size: clamp(36px, 11vw, 48px);
    }

    .contact-benefits,
    .contact-links {
        grid-template-columns: 1fr;
    }

    .contact-links a + a {
        border-left: 0;
        border-top: 1px solid rgba(23,22,36,.1);
    }

    .contact-links a {
        min-height: 76px;
        padding: 14px 16px;
    }

    .contact label,
    .contact input,
    .contact select,
    .contact textarea {
        font-size: 16px;
    }

    .contact input,
    .contact select,
    .contact textarea {
        min-height: 58px;
        padding: 15px 16px;
    }

    .contact .field-control input,
    .contact .field-control select {
        padding-left: 44px;
    }

    .contact textarea {
        min-height: 132px;
    }
}

.footer {
    position: relative;
    overflow: hidden;
    padding: 96px 0 24px;
    color: rgba(255,255,255,.72);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,61,200,.24), transparent 32%),
        linear-gradient(180deg, #220039, #07020f);
}

.footer-wave {
    position: absolute;
    left: -5%;
    right: -5%;
    top: -54px;
    height: 120px;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(135deg, rgba(168,85,247,.8), rgba(255,61,200,.55));
    filter: blur(2px);
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 34px;
}

.footer h3 {
    margin-bottom: 18px;
    color: #fff;
}

.footer .brand {
    min-width: 182px;
    padding-right: 0;
    border-right: 0;
    gap: 12px;
}

.footer .brand-orb {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    box-shadow: 0 0 28px rgba(168, 85, 247, .34);
}

.footer .brand-orb img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.footer .brand-copy strong,
.footer .brand-copy small {
    display: block;
    line-height: 1.04;
}

.footer .brand-copy strong {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

.footer .brand-copy small {
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    font-weight: 800;
}

.footer a,
.footer span {
    display: block;
    margin-bottom: 10px;
}

.footer a:hover {
    color: var(--gold);
}

.footer p {
    max-width: 340px;
    color: rgba(255,255,255,.62);
}

.copyright {
    position: relative;
    margin-top: 42px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.5);
    font-size: 14px;
}

/* Premium BankU footer redesign: structure preserved, hero color language applied */
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 112px 0 28px;
    color: rgba(255,255,255,.82);
    background:
        radial-gradient(circle at 14% 18%, rgba(244,196,48,.16), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(156,39,176,.24), transparent 26%),
        radial-gradient(circle at 50% 90%, rgba(255,193,7,.1), transparent 28%),
        linear-gradient(135deg, #2F072C 0%, #4E0D46 35%, #800080 70%, #5A005A 100%);
    box-shadow: inset 0 1px 0 rgba(244,196,48,.22);
}

.footer::before,
.footer::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.footer::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        radial-gradient(circle, rgba(244,196,48,.2) 0 2px, transparent 3px);
    background-size: 86px 86px, 86px 86px, 42px 42px;
    mask-image: radial-gradient(circle at 50% 44%, #000, transparent 86%);
    animation: footerMesh 8s ease-in-out infinite alternate;
}

.footer::after {
    left: -10%;
    top: 12%;
    width: 120%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,193,7,.75), rgba(156,39,176,.55), transparent);
    box-shadow: 0 0 20px rgba(255,193,7,.45);
    animation: footerLine 5.5s ease-in-out infinite;
}

.footer-wave {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 18px;
    height: calc(100% - 38px);
    border: 1px solid rgba(244,196,48,.24);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        radial-gradient(circle at 26% 34%, rgba(255,193,7,.12), transparent 22%);
    box-shadow:
        0 28px 90px rgba(20,0,28,.36),
        0 0 42px rgba(128,0,128,.28),
        inset 0 1px 0 rgba(255,255,255,.16);
    filter: none;
    backdrop-filter: blur(18px);
}

.footer-wave::before,
.footer-wave::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #F4C430;
    box-shadow: 0 0 22px rgba(255,193,7,.86);
    animation: sparkleFloat 4.8s ease-in-out infinite;
}

.footer-wave::before {
    width: 8px;
    height: 8px;
    left: 8%;
    top: 9%;
}

.footer-wave::after {
    width: 6px;
    height: 6px;
    right: 9%;
    top: 12%;
    animation-delay: -2s;
}

.footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 34px;
    padding: 28px;
}

.footer-grid > div {
    position: relative;
}

.footer-grid > div + div {
    padding-left: 28px;
}

.footer-grid > div + div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(244,196,48,.72), rgba(156,39,176,.45), transparent);
    box-shadow: 0 0 16px rgba(244,196,48,.32);
    animation: dividerGlow 4s ease-in-out infinite;
}

.footer .brand {
    position: relative;
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 14px;
    padding-right: 0;
    border-right: 0;
}

.footer .brand-orb {
    width: min(300px, 100%);
    height: auto;
    min-height: 96px;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 1px solid rgba(244,196,48,.2);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
    box-shadow:
        0 0 44px rgba(128,0,128,.34),
        0 0 28px rgba(244,196,48,.12),
        inset 0 1px 0 rgba(255,255,255,.16);
    animation: heroImageFloat 5.4s ease-in-out infinite;
}

.footer .brand-orb::after {
    content: "";
    position: absolute;
    inset: -30% auto -30% -70%;
    width: 48%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,193,7,.3), transparent);
    animation: heroImageShine 5s ease-in-out infinite;
}

.footer .brand-orb img {
    width: min(250px, 86%);
    height: auto;
    max-height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255,255,255,.18)) drop-shadow(0 0 18px rgba(244,196,48,.12));
}

.footer .brand-copy {
    display: none;
}

.footer-about {
    display: grid;
    gap: 18px;
}

.footer-about::after {
    content: "";
    width: min(100%, 360px);
    min-height: 92px;
    display: block;
    border: 1px solid rgba(244,196,48,.34);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
        url("/static/images/icon/Trusted_BankU_Icon.png") center / contain no-repeat;
    box-shadow:
        0 18px 50px rgba(20,0,28,.24),
        0 0 34px rgba(128,0,128,.3),
        inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(20px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.footer-about:hover::after {
    transform: translateY(-3px);
    border-color: rgba(255,193,7,.58);
    box-shadow:
        0 22px 60px rgba(20,0,28,.3),
        0 0 44px rgba(244,196,48,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.footer p {
    max-width: 370px;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.68;
}

.footer h3 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    color: #fff;
    font-size: 20px;
    font-weight: 950;
}

.footer h3::before {
    content: "";
    width: 42px;
    height: 42px;
    display: inline-block;
    border: 1px solid rgba(244,196,48,.24);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(135deg, rgba(128,0,128,.9), rgba(156,39,176,.7));
    box-shadow: 0 0 28px rgba(244,196,48,.18), inset 0 1px 0 rgba(255,255,255,.16);
    animation: goldPulse 3.8s ease-in-out infinite;
}

.footer h3::after {
    content: "";
    position: absolute;
    left: 54px;
    bottom: -10px;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFC107, #F4C430, transparent);
    box-shadow: 0 0 18px rgba(255,193,7,.6);
}

.footer a,
.footer span {
    position: relative;
    display: block;
    margin-bottom: 14px;
    color: rgba(255,255,255,.82);
    transition: color .3s ease, transform .3s ease, text-shadow .3s ease, background .3s ease;
}

.footer-grid > div:not(.footer-about) a {
    padding-left: 22px;
}

.footer-grid > div:not(.footer-about) a::before {
    content: "›";
    position: absolute;
    left: 0;
    top: -2px;
    color: #FFC107;
    font-size: 24px;
    font-weight: 950;
    text-shadow: 0 0 16px rgba(255,193,7,.7);
}

.footer a:hover {
    color: #F4C430;
    transform: translateX(8px);
    text-shadow: 0 0 18px rgba(255,193,7,.42);
}

.copyright {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding: 28px 28px 0;
    border-top: 1px solid transparent;
    color: rgba(255,255,255,.82);
    font-size: 14px;
}

.copyright::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,193,7,.86), rgba(156,39,176,.45), transparent);
    box-shadow: 0 0 20px rgba(255,193,7,.38);
    animation: footerLine 5s ease-in-out infinite;
}

.copyright::after {
    content: "\f3ed";
    position: absolute;
    left: 50%;
    top: -28px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 1px solid rgba(244,196,48,.34);
    border-radius: 18px;
    color: #FFC107;
    background: linear-gradient(135deg, rgba(128,0,128,.78), rgba(47,7,44,.82));
    box-shadow: 0 0 34px rgba(255,193,7,.24), inset 0 1px 0 rgba(255,255,255,.14);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

@keyframes footerMesh {
    from { opacity: .58; transform: translate3d(-12px, 0, 0); }
    to { opacity: .88; transform: translate3d(16px, -10px, 0); }
}

@keyframes footerLine {
    0%, 100% { opacity: .48; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.28); }
}

@keyframes dividerGlow {
    0%, 100% { opacity: .58; }
    50% { opacity: 1; }
}

@media (max-width: 920px) {
    .footer-grid {
        padding: 24px;
    }

    .footer-grid > div + div {
        padding-left: 0;
        padding-top: 24px;
    }

    .footer-grid > div + div::before {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(244,196,48,.65), transparent);
    }
}

@media (max-width: 640px) {
    .footer {
        padding: 88px 0 24px;
    }

    .footer-wave {
        left: 10px;
        right: 10px;
        top: 12px;
        height: calc(100% - 24px);
        border-radius: 20px;
    }

    .footer-grid {
        padding: 18px;
        gap: 22px;
    }

    .footer .brand-orb,
    .footer-about::after {
        width: 100%;
    }

    .copyright {
        display: block;
        padding: 28px 18px 0;
        line-height: 1.7;
    }

    .copyright::before {
        left: 18px;
        right: 18px;
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1080px) {
    .container,
    .nav-shell,
    .hero-grid {
        width: min(100% - 28px, 1280px);
    }

    .nav-links {
        gap: 4px;
    }

    .nav-link,
    .nav-links > a {
        padding-inline: 10px;
        font-size: 12px;
    }

    .site-header .brand {
        min-width: 174px;
        padding-right: 14px;
    }

    .site-header .brand img {
        width: 154px;
    }

    .header-actions {
        padding-left: 14px;
    }

    .nav-cta {
        padding-inline: 14px;
    }

    .service-track {
        grid-auto-columns: calc((100% - 14px) / 2);
    }

    .services-feature-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-feature:nth-child(3) {
        border-left: 0;
    }

    .service-feature:nth-child(3),
    .service-feature:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,.18);
    }

    .opportunity-top,
    .opportunity-media-grid {
        grid-template-columns: 1fr;
    }

    .retailer-network {
        display: block;
    }

    .retailer-stats {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 920px) {
    .menu-toggle {
        display: grid;
        order: 3;
    }

    .nav-links {
        position: fixed;
        top: 92px;
        left: 16px;
        right: 16px;
        display: none;
        padding: 16px;
        border: 1px solid rgba(126, 42, 160, .14);
        border-radius: 22px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 24px 70px rgba(65, 18, 82, .2);
        backdrop-filter: blur(22px);
    }

    .nav-links.is-open {
        display: grid;
        justify-content: stretch;
        gap: 6px;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link,
    .nav-links > a {
        width: 100%;
        justify-content: flex-start;
        padding: 14px;
        border-radius: var(--radius);
        color: #472052;
    }

    .nav-link.active::after {
        left: 14px;
        right: auto;
        bottom: 5px;
        width: 42px;
    }

    .mega-menu {
        position: static;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 8px;
        max-height: 0;
        overflow: hidden;
        padding: 0 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        display: grid;
        box-shadow: inset 0 0 0 1px rgba(126, 42, 160, .08);
        transition: opacity .22s ease, visibility .22s ease, transform .22s ease, max-height .22s ease, padding .22s ease;
    }

    .has-mega:hover .mega-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
    }

    .has-mega.mega-open .mega-menu {
        max-height: 720px;
        padding: 10px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-cta {
        display: none;
    }

    .header-actions {
        margin-left: auto;
        padding-left: 0;
        border-left: 0;
    }

    .hero-grid,
    .opportunity-grid,
    .distributor-grid,
    .dashboard-grid,
    .faq-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .hero-stage {
        min-height: 500px;
    }

    .hero-trust {
        width: 100%;
    }

    .trust-grid,
    .stats-grid,
    .timeline,
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
        justify-content: center;
        justify-items: center;
    }

    .timeline::before {
        display: none;
    }

    .services .slider-shell {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
    }

    .services .slider-btn {
        width: 52px;
        height: 52px;
        display: grid;
    }
}

@media (max-width: 640px) {
    .container,
    .nav-shell,
    .hero-grid {
        width: min(100% - 22px, 1280px);
    }

    .section {
        padding: 76px 0;
    }

    .nav-shell {
        min-height: 64px;
        padding: 6px 10px 6px 12px;
        border-radius: 22px;
    }

    .site-header .brand {
        min-width: 0;
        max-width: 148px;
        padding-right: 8px;
    }

    .site-header .brand img {
        width: 136px;
        height: 42px;
    }

    .nav-links {
        top: 86px;
        left: 11px;
        right: 11px;
    }

    .header-bell {
        width: 40px;
        height: 40px;
    }

    .header-actions {
        gap: 8px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .hero {
        min-height: auto;
        padding: 66px 0 96px;
        margin-bottom: 0;
    }

    .trust-strip {
        margin-top: -62px;
        margin-bottom: -62px;
    }

    .services {
        padding-top: 104px;
    }

    .hero-actions,
    .hero-actions .btn {
        width: 100%;
    }

    .trust-grid,
    .stats-grid,
    .timeline,
    .footer-grid,
    .form-row,
    .mock-cards,
    .quick-services {
        grid-template-columns: 1fr;
    }

    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 0;
        border-radius: 0;
        justify-content: center;
        justify-items: center;
    }

    .trust-badge {
        min-height: 112px;
        padding: 10px;
        border-radius: 18px;
    }

    .trust-badge img {
        max-height: 86px;
    }

    .trust-badge:nth-child(2) img {
        max-height: 62px;
    }

    .opportunity {
        padding-top: 86px;
    }

    .opportunity .opportunity-copy {
        padding-left: 18px;
    }

    .opportunity h2 {
        font-size: clamp(20px, 6.5vw, 32px);
    }

    .opportunity-top {
        gap: 30px;
    }

    .retailer-network {
        display: block;
        gap: 18px;
    }

    .retailer-pill {
        width: auto;
    }

    .retailer-video {
        min-height: 300px;
        border-radius: 20px;
    }

    .retailer-video video {
        min-height: 300px;
    }

    .video-play {
        width: 82px;
        height: 82px;
        font-size: 32px;
    }

    .opportunity-media-grid {
        gap: 24px;
    }

    .founder-card {
        height: 176px;
        min-height: 176px;
        padding: 0;
        border-radius: 22px;
    }

    .founder-card::before {
        content: none;
        display: none;
    }

    .founder-portrait {
        width: 100%;
        height: 100%;
    }

    .founder-portrait img {
        min-height: 176px;
        border-radius: 22px;
    }

    .experience-badge {
        width: 92px;
        min-height: 92px;
        right: 16px;
        top: 18px;
    }

    .founder-card blockquote {
        font-size: 20px;
    }

    .founder-card h3 {
        font-size: 30px;
    }

    .retailer-stats {
        grid-template-columns: 1fr;
    }

    .retailer-stat {
        min-height: 150px;
    }

    .retailer-presence-panel {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .india-network {
        width: min(210px, 100%);
        min-height: 142px;
        justify-self: center;
    }

    .retailer-growth-panel {
        min-height: 230px;
        padding: 22px;
    }

    .growth-metrics {
        width: 100%;
    }

    .growth-chart {
        right: 10px;
        bottom: 14px;
        width: 54%;
        height: 120px;
        opacity: .25;
    }

    .growth-chart span {
        width: 14px;
    }

    .hero-trust {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-stat-card {
        min-height: 82px;
        grid-template-columns: 56px 1fr;
        padding: 14px 20px;
        clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
    }

    .hero-stat-icon {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .hero-stage,
    .phone-panel,
    .hero-image-visual {
        min-height: 430px;
    }

    .hero-image-frame {
        width: min(100%, 420px);
        min-height: 340px;
        padding: 16px;
    }

    .hero-image-frame img {
        max-height: 320px;
    }

    .floating-card {
        display: none;
    }

    .service-track {
        grid-auto-columns: 100%;
    }

    .services .section-heading h2 {
        font-size: clamp(34px, 12vw, 48px);
    }

    .services .section-heading p:not(.eyebrow) {
        font-size: 17px;
    }

    .services .slider-shell {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }

    .services .slider-btn {
        width: 42px;
        height: 42px;
        display: grid;
        font-size: 14px;
    }

    .service-card {
        min-height: 440px;
        padding: 28px 18px 0;
    }

    .service-card .service-icon {
        width: 124px;
        height: 124px;
    }

    .service-card .service-icon i {
        width: 76px;
        height: 76px;
        font-size: 34px;
    }

    .services-feature-strip {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .service-feature,
    .service-feature:nth-child(3),
    .service-feature:nth-child(4) {
        min-height: 112px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.18);
    }

    .service-feature:first-child {
        border-top: 0;
    }

    .slider-shell,
    .testimonial-shell {
        grid-template-columns: 1fr;
    }

    .slider-btn {
        display: none;
    }

    .dashboard-mock {
        grid-template-columns: 1fr;
    }

    .mock-sidebar {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-cta {
    position: relative;
    z-index: 2;
    margin: 0 auto -46px;
    padding: 0 5px;
}

.footer-cta::before,
.footer-cta::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.footer-cta::before {
    left: 7%;
    top: 18px;
    width: 9px;
    height: 9px;
    background: #F4C430;
    box-shadow: 0 0 22px rgba(255,193,7,.78), 260px 42px 0 rgba(244,196,48,.85), 82vw 20px 0 rgba(255,193,7,.76);
    animation: sparkleFloat 4.8s ease-in-out infinite;
}

.footer-cta::after {
    right: 8%;
    bottom: -14px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(244,196,48,.18);
    box-shadow: 0 0 70px rgba(156,39,176,.24), inset 0 0 44px rgba(244,196,48,.08);
    animation: footerOrbitDrift 12s linear infinite;
}

.footer-cta-card {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: min(90%, 1320px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin: 0 auto;
    padding: 34px 42px;
    border: 1px solid rgba(244,196,48,.28);
    border-radius: 26px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        radial-gradient(circle at 9% 18%, rgba(255,193,7,.22), transparent 18%),
        radial-gradient(circle at 84% 12%, rgba(156,39,176,.44), transparent 24%),
        linear-gradient(135deg, #2F072C 0%, #4E0D46 35%, #800080 70%, #9C27B0 100%);
    background-size: auto, auto, auto, 160% 160%;
    box-shadow:
        0 28px 90px rgba(47,7,44,.42),
        0 0 52px rgba(244,196,48,.2),
        0 0 72px rgba(156,39,176,.24),
        inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(18px);
    animation: heroImageFloat 5.2s ease-in-out infinite, footerGradientMove 9s ease-in-out infinite alternate;
}

.footer-cta-card::before,
.footer-cta-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.footer-cta-card::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 82px 82px;
    mask-image: radial-gradient(circle at 48% 44%, #000, transparent 88%);
    opacity: .58;
}

.footer-cta-card::after {
    inset: -30% auto -30% -42%;
    width: 34%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(255,193,7,.22), transparent);
    animation: footerSweep 5.8s ease-in-out infinite;
}

.footer-cta-copy,
.footer-app-download,
.footer-cta-actions {
    position: relative;
    z-index: 1;
}

.footer-app-download {
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: min(62vw, 760px);
    min-height: 153px;
    display: grid;
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    margin: 0 auto -19px;
    padding: 13px clamp(12px, 1.7vw, 22px) 26px;
    border: 2px solid rgba(77,19,93,.72);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: #101322;
    background:
        linear-gradient(rgba(128,0,128,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.055) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 42%, rgba(37,99,235,.08) 48%, transparent 54%),
        radial-gradient(circle at 82% 82%, rgba(37,99,235,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
    background-size: 58px 58px, 58px 58px, 220px 220px, 100% 100%, 100% 100%;
    box-shadow: 0 22px 64px rgba(20,11,38,.12), inset 0 1px 0 rgba(255,255,255,.98);
    animation: footerAppPanelFloat 7s ease-in-out infinite, footerAppLineFlow 18s linear infinite;
}

.footer-app-download::before,
.footer-app-download::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.footer-app-download::before {
    inset: 0;
    background:
        radial-gradient(circle at 28% 48%, rgba(128,0,128,.1), transparent 28%),
        radial-gradient(circle at 78% 58%, rgba(37,99,235,.12), transparent 28%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
    background-size: 100% 100%, 100% 100%, 34% 100%;
    background-position: center, center, -46% 0;
    opacity: .68;
    mix-blend-mode: multiply;
    animation: footerAppReflector 6.8s ease-in-out infinite;
}

.footer-app-download::after {
    inset: auto 8% 0 8%;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(128,0,128,.08));
    filter: blur(18px);
    opacity: .58;
}

.footer-app-qr {
    width: min(100%, 150px);
    aspect-ratio: 1 / 1.22;
    display: grid;
    place-items: center;
    justify-self: end;
    align-self: center;
    transform: translateY(28px);
    padding: 12px;
    border: 4px solid #383d69;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: #fff;
    overflow: hidden;
    animation: footerAppPhoneRise 5.8s ease-in-out infinite;
}

.footer-app-qr img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    filter: grayscale(1) contrast(1.2);
    animation: footerAppScreenPulse 4.8s ease-in-out infinite;
}

.footer-app-copy p {
    margin: 0 0 3px;
    color: #171924;
    font-size: clamp(13px, 1.05vw, 17px);
    line-height: 1.15;
    font-weight: 900;
}

.footer-app-copy h3 {
    margin: 0 0 8px;
    color: #800080;
    font-size: clamp(22px, 2.05vw, 30px);
    line-height: 1.02;
    letter-spacing: 0;
    font-weight: 950;
    text-shadow: 0 10px 28px rgba(37,99,235,.16);
    animation: footerAppTitleGlow 4.5s ease-in-out infinite;
}

.footer-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.footer-store-badges span {
    min-width: 96px;
    min-height: 31px;
    display: grid;
    grid-template-columns: 23px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 7px;
    padding: 6px 10px;
    border-radius: 5px;
    color: #fff;
    background: #050505;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    animation: footerAppBadgeLift 5.4s ease-in-out infinite;
}

.footer-store-badges span:nth-child(2) {
    animation-delay: .45s;
}

.footer-store-badges i {
    grid-row: 1 / 3;
    font-size: 20px;
}

.footer-store-badges em {
    font-size: 7px;
    line-height: 1;
    font-style: normal;
    font-weight: 800;
}

.footer-store-badges strong {
    font-size: 13px;
    line-height: 1.05;
    font-weight: 800;
}

.footer-cta-copy h2 {
    margin: 0 0 10px;
    color: #F4C430;
    text-shadow: 0 0 30px rgba(255,193,7,.24);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 950;
    line-height: 1.08;
}

.footer-cta-copy p {
    max-width: 660px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.55;
}

.footer-cta-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.footer-cta-primary,
.footer-cta-secondary {
    position: relative;
    overflow: hidden;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .3s ease, box-shadow .3s ease;
}

.footer-cta-primary {
    color: #2F072C;
    background: linear-gradient(135deg, #FFC107, #F4C430);
    box-shadow: 0 14px 34px rgba(255,193,7,.34), inset 0 1px 0 rgba(255,255,255,.34);
}

.footer-cta-secondary {
    color: #4E0D46;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(216,180,254,.86));
    box-shadow: 0 14px 34px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.5);
}

.footer-cta-primary::after,
.footer-cta-secondary::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -70%;
    width: 42%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transition: left .55s ease;
}

.footer-cta-primary:hover,
.footer-cta-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(244,196,48,.22), 0 0 28px rgba(156,39,176,.24);
}

.footer-cta-primary:hover::after,
.footer-cta-secondary:hover::after {
    left: 130%;
}

/* Reference-matched premium footer */
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: #fff;
    background-color: #800080;
    background-image: none;
    animation: none;
}

.footer::before,
.footer::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.footer::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.1) 48%, transparent 52%),
        linear-gradient(245deg, transparent 0 46%, rgba(244,196,48,.16) 48%, transparent 52%);
    background-size: 86px 86px, 86px 86px, 240px 240px, 280px 280px;
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    animation: footerGridDrift 18s linear infinite;
    will-change: transform, background-position, opacity;
}

.footer::after {
    content: "";
    display: block;
    left: -38%;
    top: -18%;
    width: 42%;
    height: 138%;
    transform: rotate(18deg);
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.12), rgba(244,196,48,.18), rgba(255,255,255,.08), transparent);
    filter: blur(.2px);
    opacity: .78;
    animation: footerReflectorSweep 8s ease-in-out infinite;
    will-change: transform, opacity, left;
}

.footer-wave {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(244,196,48,.38);
    border-radius: 24px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' viewBox='0 0 520 260'%3E%3Cg fill='none' stroke='%239C27B0' stroke-width='1' opacity='.12'%3E%3Cpath d='M24 48 C118 16 156 92 232 66 S372 38 496 92'/%3E%3Cpath d='M42 198 C128 136 184 214 274 156 S418 126 500 188'/%3E%3Cpath d='M118 16 184 214M232 66 274 156M372 38 418 126'/%3E%3C/g%3E%3Cg fill='%23F4C430' opacity='.2'%3E%3Ccircle cx='24' cy='48' r='2.5'/%3E%3Ccircle cx='118' cy='16' r='3'/%3E%3Ccircle cx='232' cy='66' r='2.5'/%3E%3Ccircle cx='372' cy='38' r='3'/%3E%3Ccircle cx='496' cy='92' r='2.5'/%3E%3Ccircle cx='42' cy='198' r='3'/%3E%3Ccircle cx='184' cy='214' r='2.5'/%3E%3Ccircle cx='274' cy='156' r='3'/%3E%3Ccircle cx='418' cy='126' r='2.5'/%3E%3Ccircle cx='500' cy='188' r='3'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 12% 20%, rgba(156,39,176,.16), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(128,0,128,.22), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
    background-size: 520px 260px, auto, auto, auto;
    background-position: center, 0 0, 0 0, 0 0;
    box-shadow:
        0 0 80px rgba(156,39,176,.22),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 0 90px rgba(128,0,128,.32);
    backdrop-filter: blur(16px);
    animation: footerNetworkFlow 20s linear infinite;
    will-change: background-position;
}

.footer-wave::before,
.footer-wave::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.footer-wave::before {
    right: -90px;
    top: 14%;
    width: 320px;
    height: 320px;
    display: block;
    background:
        radial-gradient(circle at 50% 50%, rgba(244,196,48,.22) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(156,39,176,.22), rgba(128,0,128,.08) 46%, transparent 70%);
    background-size: 42px 42px, auto;
    filter: blur(10px);
    opacity: .7;
    animation: footerBlobFloat 11s ease-in-out infinite alternate, footerNodePulse 6s ease-in-out infinite;
    will-change: transform, opacity;
}

.footer-wave::after {
    left: 7%;
    top: 13%;
    width: 8px;
    height: 8px;
    background: #F4C430;
    box-shadow:
        90px 120px 0 rgba(244,196,48,.82),
        28vw 54px 0 rgba(255,193,7,.72),
        50vw 190px 0 rgba(244,196,48,.7),
        76vw 92px 0 rgba(255,193,7,.74),
        16vw 260px 0 rgba(244,196,48,.62),
        66vw 310px 0 rgba(255,193,7,.58),
        84vw 250px 0 rgba(244,196,48,.5),
        0 0 20px rgba(255,193,7,.82);
    animation: sparkleFloat 5.2s ease-in-out infinite, footerParticleDrift 12s ease-in-out infinite alternate, footerParticleBlink 9s ease-in-out infinite;
    will-change: transform;
}

.footer-shell {
    position: relative;
    width: min(100% - 44px, 1440px);
    margin: 0 auto;
    padding: 74px 48px 28px;
}

.footer-shell::before,
.footer-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.footer-shell::before {
    inset: 18px 0 auto;
    height: 1px;
    background:
        linear-gradient(90deg, transparent, rgba(244,196,48,.42), rgba(255,255,255,.24), transparent),
        linear-gradient(90deg, transparent 0 42%, rgba(255,193,7,.95) 48%, transparent 54% 100%);
    background-size: 100% 100%, 240px 100%;
    box-shadow: 0 0 22px rgba(255,193,7,.18);
    animation: footerLine 4.6s ease-in-out infinite, footerDataPacket 8s ease-in-out infinite;
}

.footer-shell::after {
    left: 2%;
    bottom: 12%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(156,39,176,.18), transparent 70%);
    filter: blur(14px);
    opacity: .72;
    animation: footerBlobFloat 13s ease-in-out infinite alternate-reverse;
}

.footer-top-line,
.footer-grid,
.footer-bottom {
    position: relative;
    z-index: 1;
}

.footer-top-line {
    position: relative;
    height: 24px;
    margin-bottom: 38px;
}

.footer-top-line::before,
.footer-top-line::after {
    content: "";
    position: absolute;
    top: 11px;
    width: calc(50% - 42px);
    height: 1px;
    background:
        linear-gradient(90deg, transparent, #F4C430, rgba(255,193,7,.42), transparent),
        linear-gradient(90deg, transparent 0 32%, rgba(255,255,255,.7) 50%, transparent 68% 100%);
    background-size: 100% 100%, 180px 100%;
    box-shadow: 0 0 22px rgba(255,193,7,.52);
    animation: footerLine 5s ease-in-out infinite, footerDividerTravel 7.5s ease-in-out infinite;
}

.footer-top-line::before { left: 0; }
.footer-top-line::after {
    right: 0;
    transform: scaleX(-1);
}

.footer-top-line span {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F4C430;
    box-shadow: -20px 0 0 #F4C430, 20px 0 0 #F4C430, 0 0 18px rgba(255,193,7,.88);
    transform: translateX(-50%);
    animation: goldPulse 3s ease-in-out infinite;
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 25% 35% 20% 20%;
    gap: 0;
    padding: 0 0 34px;
}

.footer-contact,
.footer-brand-panel,
.footer-links {
    position: relative;
    min-width: 0;
}

.footer-contact {
    padding-right: 30px;
}

.footer-brand-panel {
    overflow: hidden;
    padding: 0 42px;
    text-align: center;
    border-left: 1px solid rgba(244,196,48,.74);
    border-right: 1px solid rgba(244,196,48,.74);
    background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.footer-brand-panel::before,
.footer-brand-panel::after {
    content: "";
    position: absolute;
    top: 48%;
    width: 28px;
    height: 28px;
    border: 2px solid #F4C430;
    border-radius: 50%;
    background: #800080;
    box-shadow: 0 0 24px rgba(255,193,7,.68), 0 0 38px rgba(156,39,176,.32), inset 0 0 0 7px #4E0D46;
    animation: goldPulse 3.6s ease-in-out infinite, footerNodeGlow 6.8s ease-in-out infinite;
}

.footer-brand-panel:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.024));
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,.12),
        inset -1px 0 0 rgba(255,255,255,.12),
        0 18px 54px rgba(47,7,44,.16),
        0 0 34px rgba(156,39,176,.16);
    transform: translateY(-2px);
}

.footer-brand-panel::before { left: -15px; }
.footer-brand-panel::after { right: -15px; }

.footer-company {
    padding-left: 36px;
    padding-right: 28px;
}

.footer-services {
    padding-left: 36px;
    border-left: 1px dashed rgba(244,196,48,.32);
}

.footer h3 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 34px;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.footer h3 i {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244,196,48,.28);
    border-radius: 50%;
    color: #F4C430;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(135deg, rgba(128,0,128,.86), rgba(47,7,44,.78));
    box-shadow: 0 0 30px rgba(255,193,7,.26), 0 0 42px rgba(156,39,176,.42), inset 0 1px 0 rgba(255,255,255,.16);
    font-size: 27px;
    animation: goldPulse 4s ease-in-out infinite, footerIconPulse 3.8s ease-in-out infinite, footerMicroFloat 7s ease-in-out infinite;
}

.footer h3::before {
    display: none;
}

.footer h3::after {
    content: "";
    position: absolute;
    left: 84px;
    bottom: -18px;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFC107, #F4C430);
    box-shadow: 0 0 16px rgba(255,193,7,.65);
}

.contact-row {
    position: relative;
    overflow: hidden;
    min-height: 76px;
    display: grid !important;
    grid-template-columns: 62px 1fr;
    align-items: center;
    column-gap: 18px;
    margin: 0;
    padding: 11px 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    color: rgba(255,255,255,.82);
    background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    transform-style: preserve-3d;
    transition: background .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    will-change: transform, box-shadow;
}

.contact-row::after {
    content: "";
    position: absolute;
    inset: -45% auto -45% -72%;
    width: 44%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(244,196,48,.12), transparent);
    pointer-events: none;
    transition: left .58s ease;
}

.contact-row::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.contact-row:hover {
    transform: translateX(6px) translateY(-2px) perspective(900px) rotateX(1.2deg);
    border-color: rgba(244,196,48,.42);
    background: linear-gradient(90deg, rgba(244,196,48,.11), rgba(255,255,255,.035));
    box-shadow: 0 14px 36px rgba(47,7,44,.22), 0 0 24px rgba(244,196,48,.12), inset 0 1px 0 rgba(255,255,255,.12);
}

.contact-row:hover::after {
    left: 132%;
}

.contact-row:hover::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.contact-row span {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    display: grid !important;
    place-items: center;
    margin: 0;
    border-radius: 50%;
    color: #800080;
    background: radial-gradient(circle at 34% 28%, #fff, rgba(255,255,255,.9));
    box-shadow: 0 0 26px rgba(255,255,255,.22), 0 0 22px rgba(244,196,48,.22);
    font-size: 22px;
    animation: footerIconPulse 4.2s ease-in-out infinite, footerMicroFloat 8s ease-in-out infinite;
    transition: transform .3s ease, box-shadow .3s ease;
}

.contact-row:hover span {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255,255,255,.28), 0 0 28px rgba(244,196,48,.26);
}

.contact-row strong,
.contact-row em {
    display: block;
    margin: 0;
    font-style: normal;
    line-height: 1.25;
}

.contact-row strong {
    align-self: end;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}

.contact-row em {
    align-self: start;
    color: rgba(255,255,255,.82);
    font-size: 16px;
}

.contact-row em i,
.contact-row[href*="maps"] em {
    color: #F4C430;
}
.footer-social {
    height: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 24px;
    border: 1px solid rgba(244,196,48,.24);
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
    box-shadow: 0 18px 48px rgba(47,7,44,.2), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
}

.footer-social a {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 50%;
    text-decoration: none;
    padding: 0;
    margin: 0;
    color: #2F072C;
    flex-shrink: 0;
    box-shadow: 0 0 22px rgba(255,255,255,.22), 0 0 16px rgba(244,196,48,.12);
    transition: transform .3s ease, color .3s ease, box-shadow .3s ease;
    will-change: transform;
}

.footer-social a:hover {
    color: #800080;
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 14px 28px rgba(47,7,44,.24), 0 0 26px rgba(244,196,48,.2), 0 0 24px rgba(255,255,255,.18);
}

.footer-social a i {
    display: block !important;
    font-size: 20px;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
}
.footer-logo-main {
    width: min(430px, 92%);
    max-height: 150px;
    object-fit: contain;
    margin: 56px auto 24px;
    filter: drop-shadow(0 0 28px rgba(255,255,255,.22)) drop-shadow(0 0 24px rgba(255,193,7,.18)) drop-shadow(0 0 42px rgba(156,39,176,.22));
    animation: heroImageFloat 5.5s ease-in-out infinite;
}

.footer-logo-rule {
    width: 64px;
    height: 3px;
    display: block !important;
    margin: 0 auto 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFC107, #F4C430);
    box-shadow: 0 0 16px rgba(255,193,7,.68);
}

.footer-brand-panel p {
    max-width: 520px;
    margin: 0 auto;
    color: rgba(255,255,255,.92);
    font-size: 20px;
    line-height: 1.55;
}

.footer-brand-panel p b {
    color: #F4C430;
}

.footer-brand-panel .footer-corporate,
.footer-brand-panel .footer-warning {
    font-size: xx-small;
    line-height: 1.5;
    text-align: center;
}

.footer-brand-panel .coming-soon {
    display: inline;
    margin: 0;
    color: var(--gold, #ffd166);
    font-size: xx-small;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.3px;
}

.footer-trust-card {
    position: relative;
    overflow: hidden;
    width: min(100%, 470px);
    min-height: 110px;
    display: grid;
    place-items: center;
    margin: 52px auto 0;
    padding: 20px 26px;
    border: 1px solid rgba(244,196,48,.28);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035)),
        radial-gradient(circle at 50% 0%, rgba(244,196,48,.12), transparent 52%);
    box-shadow: 0 20px 58px rgba(0,0,0,.2), 0 0 34px rgba(244,196,48,.16), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(20px);
    transition: transform .3s ease, box-shadow .3s ease;
}

.footer-trust-card::before {
    content: "";
    position: absolute;
    inset: -45% auto -45% -65%;
    width: 42%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(244,196,48,.18), transparent);
    animation: footerPanelShine 5.8s ease-in-out infinite;
    pointer-events: none;
    will-change: left, opacity;
}

.footer-trust-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 68px rgba(0,0,0,.24), 0 0 44px rgba(244,196,48,.24), 0 0 36px rgba(156,39,176,.2);
}

.footer-trust-card img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 76px;
    object-fit: contain;
}

.footer-links h3 {
    margin-top: 12px;
}

.footer-links a {
    position: relative;
    display: block !important;
    margin: 0 0 31px;
    padding-left: 28px;
    color: rgba(255,255,255,.9);
    font-size: 18px;
    line-height: 1.2;
    transition: transform .3s ease, color .3s ease, text-shadow .3s ease, filter .3s ease;
}

.footer-links a::before {
    content: "›";
    position: absolute;
    left: 0;
    top: -3px;
    color: #F4C430;
    font-size: 28px;
    font-weight: 950;
    text-shadow: 0 0 18px rgba(255,193,7,.72);
    transition: transform .3s ease, text-shadow .3s ease;
}

.footer-links a:hover {
    transform: translateX(8px) translateZ(0);
    color: #F4C430;
    filter: drop-shadow(0 0 10px rgba(255,193,7,.2));
    text-shadow: 0 0 22px rgba(255,193,7,.46);
}

.footer-links a:hover::before {
    transform: translateX(4px);
    text-shadow: 0 0 24px rgba(255,193,7,.88);
}

.footer-bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    margin-bottom: 20px;
    padding-left: 2px;
    padding-right: 2px;
}

.footer-bottom::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background:
        linear-gradient(90deg, transparent, #F4C430, rgba(255,193,7,.62), transparent),
        linear-gradient(90deg, transparent 0 38%, rgba(255,255,255,.62) 50%, transparent 62% 100%);
    background-size: 100% 100%, 220px 100%;
    box-shadow: 0 0 22px rgba(255,193,7,.56);
    animation: footerLine 5s ease-in-out infinite, footerDividerTravel 8.5s ease-in-out infinite reverse;
}

.footer-bottom p {
    margin: 0;
    max-width: none;
    border: 0;
    color: rgba(255,255,255,.92);
    font-size: 16px;
    text-decoration: none;
}

.footer-bottom p:nth-of-type(2) {
    text-align: right;
}

.footer-bottom p b {
    color: #F4C430;
}

.footer-shield {
    width: 58px;
    height: 58px;
    display: grid !important;
    place-items: center;
    margin: -64px 0 0;
    border: 1px solid rgba(244,196,48,.46);
    border-radius: 18px;
    color: #F4C430;
    background: linear-gradient(135deg, rgba(128,0,128,.82), rgba(47,7,44,.86));
    box-shadow: 0 0 34px rgba(255,193,7,.28), inset 0 1px 0 rgba(255,255,255,.16);
    font-size: 24px;
}
.footer-corporate{
    text-align: left;
    font-size: x-small;
    
}
.back-top {
    width: 56px;
    height: 56px;
    display: grid !important;
    place-items: center;
    margin: 0;
    border: 1px solid rgba(244,196,48,.46);
    border-radius: 50%;
    color: #F4C430;
    background: rgba(128,0,128,.48);
    box-shadow: 0 0 28px rgba(255,193,7,.2);
    animation: heroImageFloat 4s ease-in-out infinite, footerButtonPulse 3.6s ease-in-out infinite;
}

.back-top:hover {
    transform: translateY(-4px) rotate(8deg) scale(1.08);
    color: #fff;
    box-shadow: 0 0 34px rgba(255,193,7,.34), 0 0 30px rgba(156,39,176,.3);
}

@keyframes footerGradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes footerSweep {
    0% { transform: translateX(0) rotate(18deg); opacity: 0; }
    18% { opacity: 1; }
    70% { opacity: .72; }
    100% { transform: translateX(390%) rotate(18deg); opacity: 0; }
}

@keyframes footerOrbitDrift {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.04); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes footerGridDrift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 80px -36px, 86px 42px, 42px 86px, 38px 38px; }
}

@keyframes footerNetworkFlow {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 520px -260px, 0 0, 0 0, 0 0; }
}

@keyframes footerNetworkPulse {
    0%, 100% { opacity: .66; filter: brightness(1); }
    50% { opacity: .92; filter: brightness(1.18); }
}

@keyframes footerNodePulse {
    0%, 100% { background-position: 0 0, 0 0; }
    50% { background-position: 22px -18px, 0 0; }
}

@keyframes footerParticleBlink {
    0%, 100% { opacity: .74; filter: brightness(1); }
    35% { opacity: 1; filter: brightness(1.24); }
    70% { opacity: .58; filter: brightness(.92); }
}

@keyframes footerDataPacket {
    0% { background-position: 0 0, -260px 0; }
    50% { background-position: 0 0, 50% 0; }
    100% { background-position: 0 0, calc(100% + 260px) 0; }
}

@keyframes footerDividerTravel {
    0% { background-position: 0 0, -220px 0; }
    100% { background-position: 0 0, calc(100% + 220px) 0; }
}

@keyframes footerNodeGlow {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.22); }
}

@keyframes footerMicroFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -2px, 0); }
}

@keyframes footerBlobFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: .54; }
    100% { transform: translate3d(-28px, 18px, 0) scale(1.08); opacity: .82; }
}

@keyframes footerParticleDrift {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(18px, -16px, 0); }
}

@keyframes footerIconPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,193,7,0)); }
    50% { filter: drop-shadow(0 0 10px rgba(255,193,7,.34)); }
}

@keyframes footerPanelShine {
    0%, 12% { left: -65%; opacity: 0; }
    28% { opacity: 1; }
    62%, 100% { left: 132%; opacity: 0; }
}

@keyframes footerButtonPulse {
    0%, 100% { box-shadow: 0 0 28px rgba(255,193,7,.2); }
    50% { box-shadow: 0 0 34px rgba(255,193,7,.34), 0 0 26px rgba(156,39,176,.28); }
}

@media (max-width: 1180px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .footer-contact,
    .footer-company,
    .footer-services,
    .footer-brand-panel {
        padding: 0;
        border: 0;
    }

    .footer-services {
        border-left: 0;
    }

    .footer-brand-panel {
        padding: 36px 0;
        border-top: 1px solid rgba(244,196,48,.6);
        border-bottom: 1px solid rgba(244,196,48,.6);
    }

    .footer-brand-panel::before,
    .footer-brand-panel::after {
        display: none;
    }

    .footer-logo-main {
        margin-top: 0;
    }

    .footer-company,
    .footer-services {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }

    .footer-links h3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .footer-cta {
        margin-bottom: -34px;
        padding: 0 12px;
    }

    .footer-cta-card {
        width: 100%;
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 22px;
        padding: 26px 20px;
        border-radius: 22px;
    }

    .footer-app-download {
        width: 100%;
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 10px;
        margin-bottom: -10px;
        padding: 9px 10px 17px;
    }

    .footer-app-qr {
        justify-self: center;
        width: min(100%, 150px);
        transform: translateY(22px);
        padding: 12px;
        border-width: 4px;
        border-radius: 20px 20px 0 0;
    }

    .footer-app-copy {
        text-align: center;
    }

    .footer-store-badges {
        justify-content: center;
        gap: 8px;
    }

    .footer-store-badges span {
        min-width: 104px;
    }

    .footer-cta-copy h2 {
        font-size: 27px;
    }

    .footer-cta-copy p {
        font-size: 15px;
    }

    .footer-cta-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .footer-cta-primary,
    .footer-cta-secondary {
        width: 100%;
    }

    .footer-shell {
        width: min(100% - 20px, 1440px);
        padding: 52px 16px 26px;
    }

    .footer-wave {
        border-radius: 18px;
    }

    .footer-top-line {
        margin-bottom: 24px;
    }

    .footer h3 {
        font-size: 21px;
    }

    .footer h3 i {
        width: 56px;
        height: 56px;
        font-size: 23px;
    }

    .contact-row {
        grid-template-columns: 56px 1fr;
        column-gap: 14px;
    }

    .contact-row span {
        width: 50px;
        height: 50px;
    }

    .footer-brand-panel p {
        font-size: 17px;
    }

    .footer-company,
    .footer-services {
        grid-template-columns: 1fr;
    }

    .footer-links a {
        margin-bottom: 22px;
    }

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

    .footer-shield {
        order: -1;
        justify-self: center;
        grid-column: 1 / -1;
        margin: -58px 0 4px;
    }

    .footer-bottom p,
    .footer-bottom p:nth-of-type(2) {
        text-align: left;
    }

    .back-top {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
    }
}

/* Clean fintech showcase sections: Retailer, Distributor, BankU Seva Kendra */
.fintech-showcase {
    --showcase-primary: #800080;
    --showcase-secondary: #A020F0;
    --showcase-accent: #FF9F1C;
    --showcase-text: #0F172A;
    --showcase-muted: #475569;
    position: relative;
    overflow: hidden;
    padding: 112px 0;
    color: var(--showcase-text);
    background:
        radial-gradient(circle at 12% 18%, rgba(160,32,240,.08), transparent 25%),
        radial-gradient(circle at 88% 80%, rgba(255,159,28,.1), transparent 26%),
        linear-gradient(180deg, #fff 0%, #fff 58%, #fbf8ff 100%);
}

.fintech-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(128,0,128,.1) 0 1.5px, transparent 1.8px);
    background-size: 26px 26px;
    opacity: .38;
    pointer-events: none;
    mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
}

.fintech-showcase .opportunity-shell::before,
.fintech-showcase .opportunity-shell::after {
    content: none;
    display: none;
}

.fintech-showcase .showcase-grid,
.fintech-showcase .distributor-grid,
.fintech-showcase .dashboard-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 92px);
    align-items: center;
}

.fintech-showcase .showcase-visual {
    position: relative;
    min-height: 620px;
    overflow: visible;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 50%, rgba(128,0,128,.08), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,243,255,.8));
    box-shadow: 0 34px 90px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px);
}

.fintech-showcase .showcase-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 410px;
    height: 410px;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(128,0,128,.88);
    border-radius: 50%;
    box-shadow: 0 0 0 84px rgba(128,0,128,.045), 0 26px 90px rgba(128,0,128,.12);
}

.fintech-showcase .showcase-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    border: 2px dotted rgba(160,32,240,.34);
    border-radius: 50%;
    animation: distributorOrbitSpin 24s linear infinite;
}

.fintech-showcase .showcase-orbit,
.fintech-showcase .network-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 2px solid rgba(160,32,240,.24);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.fintech-showcase .orbit-one,
.fintech-showcase .orbit-a {
    width: 300px;
    height: 300px;
}

.fintech-showcase .orbit-two,
.fintech-showcase .orbit-b {
    width: 480px;
    height: 480px;
    border-style: dashed;
    animation: distributorOrbitSpin 18s linear infinite reverse;
}

.fintech-showcase .showcase-core,
.fintech-showcase .map-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230px;
    height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(128,0,128,.16);
    border-radius: 34px;
    color: var(--showcase-text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
        radial-gradient(circle at 50% 0%, rgba(255,159,28,.18), transparent 58%);
    box-shadow: 0 30px 64px rgba(128,0,128,.18), inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter: blur(18px);
    z-index: 3;
}

.fintech-showcase .shop-core {
    border-radius: 30px 30px 46px 46px;
}

.fintech-showcase .shop-core::before,
.fintech-showcase .outlet-core::before {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    top: 18px;
    height: 34px;
    border-radius: 18px 18px 8px 8px;
    background: repeating-linear-gradient(90deg, #800080 0 24px, #fff 24px 48px);
    box-shadow: 0 12px 26px rgba(128,0,128,.18);
}

.fintech-showcase .showcase-core i,
.fintech-showcase .map-core i {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin-top: 34px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--showcase-primary), var(--showcase-secondary));
    box-shadow: 0 18px 40px rgba(128,0,128,.28);
    font-size: 34px;
}

.fintech-showcase .showcase-core strong,
.fintech-showcase .map-core strong {
    color: var(--showcase-text);
    font-size: 25px;
    line-height: 1;
}

.fintech-showcase .showcase-core em,
.fintech-showcase .map-core em {
    color: var(--showcase-accent);
    font-style: normal;
    font-weight: 900;
}

.fintech-showcase .service-bubble,
.fintech-showcase .network-label {
    position: absolute;
    z-index: 4;
    min-width: 136px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 16px 14px;
    border: 2px solid rgba(160,32,240,.5);
    border-radius: 999px;
    color: var(--showcase-text);
    background: rgba(255,255,255,.92);
    box-shadow: 0 20px 48px rgba(15,23,42,.1);
    font-size: 15px;
    font-weight: 950;
    animation: showcaseFloat 5s ease-in-out infinite;
}

.fintech-showcase .service-bubble i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--showcase-primary), var(--showcase-secondary));
    box-shadow: 0 16px 34px rgba(128,0,128,.22);
    font-size: 24px;
}

.fintech-showcase .bubble-a { left: 4%; top: 9%; }
.fintech-showcase .bubble-b { right: 2%; top: 11%; animation-delay: -.8s; }
.fintech-showcase .bubble-c { left: 2%; bottom: 9%; animation-delay: -1.6s; }
.fintech-showcase .bubble-d { right: 4%; bottom: 10%; animation-delay: -2.4s; }

.fintech-showcase .node {
    z-index: 4;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(160,32,240,.74);
    color: var(--showcase-primary);
    background: #fff;
    box-shadow: 0 20px 46px rgba(128,0,128,.18), inset 0 1px 0 rgba(255,255,255,.96);
    font-size: 25px;
}

.fintech-showcase .line {
    z-index: 2;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(128,0,128,.9), rgba(255,159,28,.72), transparent);
    box-shadow: 0 0 18px rgba(128,0,128,.2);
}

.fintech-showcase .n1 { left: 8%; top: 16%; }
.fintech-showcase .n2 { right: 9%; top: 18%; }
.fintech-showcase .n3 { left: 8%; bottom: 16%; }
.fintech-showcase .n4 { right: 9%; bottom: 16%; }
.fintech-showcase .l1 { left: 18%; top: 29%; width: 64%; transform: rotate(20deg); }
.fintech-showcase .l2 { left: 18%; bottom: 29%; width: 64%; transform: rotate(-20deg); }
.fintech-showcase .l3 { left: 19%; top: 50%; width: 62%; }
.fintech-showcase .label-a { left: 4%; top: 32%; }
.fintech-showcase .label-b { right: 4%; top: 34%; }
.fintech-showcase .label-c { left: 4%; bottom: 32%; }
.fintech-showcase .label-d { right: 5%; bottom: 32%; }

.fintech-showcase .showcase-content {
    max-width: 640px;
    text-align: left;
}

.fintech-showcase .eyebrow {
    padding: 12px 22px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--showcase-primary), var(--showcase-secondary));
    box-shadow: 0 14px 32px rgba(128,0,128,.22);
    font-size: 15px;
}

.fintech-showcase h2 {
    color: var(--showcase-text);
    font-size: clamp(44px, 5vw, 76px);
    line-height: 1.06;
    letter-spacing: 0;
}

.fintech-showcase h2 span {
    color: transparent;
    background: linear-gradient(135deg, var(--showcase-primary), var(--showcase-secondary));
    -webkit-background-clip: text;
    background-clip: text;
}

.fintech-showcase .showcase-content > p:not(.eyebrow),
.fintech-showcase .section-heading > p:not(.eyebrow) {
    max-width: 620px;
    color: var(--showcase-muted);
    font-size: 20px;
    line-height: 1.6;
}

.fintech-showcase .showcase-features,
.fintech-showcase .feature-list {
    display: grid;
    gap: 16px;
    margin: 30px 0 32px;
}

.fintech-showcase .showcase-features span,
.fintech-showcase .feature-list span {
    width: 100%;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    column-gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    color: var(--showcase-text);
    background: rgba(255,255,255,.88);
    box-shadow: 0 16px 38px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.fintech-showcase .showcase-features span:hover,
.fintech-showcase .feature-list span:hover {
    transform: translateY(-5px);
    border-color: rgba(128,0,128,.18);
    box-shadow: 0 24px 54px rgba(128,0,128,.14);
}

.fintech-showcase .showcase-features i,
.fintech-showcase .feature-list i {
    grid-row: span 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--showcase-primary);
    background: linear-gradient(135deg, rgba(128,0,128,.1), rgba(255,159,28,.16));
    font-size: 23px;
}

.fintech-showcase .showcase-features b,
.fintech-showcase .feature-list b {
    display: block;
    color: var(--showcase-text);
    font-size: 20px;
    line-height: 1.1;
}

.fintech-showcase .showcase-features em,
.fintech-showcase .feature-list em {
    display: block;
    margin-top: 5px;
    color: #64748B;
    font-style: normal;
    font-weight: 650;
}

.fintech-showcase .showcase-cta,
.fintech-showcase .distributor-cta {
    width: min(100%, 520px);
    min-height: 72px;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--showcase-primary), var(--showcase-secondary));
    box-shadow: 0 18px 38px rgba(128,0,128,.28);
    font-size: 22px;
}

@keyframes showcaseFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}

@media (max-width: 1080px) {
    .fintech-showcase .showcase-grid,
    .fintech-showcase .distributor-grid,
    .fintech-showcase .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .fintech-showcase .showcase-content {
        max-width: none;
    }
}

@media (max-width: 680px) {
    .fintech-showcase {
        padding: 72px 0;
    }

    .fintech-showcase .showcase-visual {
        min-height: 420px;
        border-radius: 24px;
    }

    .fintech-showcase .showcase-visual::before {
        width: 280px;
        height: 280px;
        box-shadow: 0 0 0 54px rgba(128,0,128,.045), 0 18px 58px rgba(128,0,128,.12);
    }

    .fintech-showcase .showcase-visual::after,
    .fintech-showcase .orbit-two,
    .fintech-showcase .orbit-b {
        width: 340px;
        height: 340px;
    }

    .fintech-showcase .orbit-one,
    .fintech-showcase .orbit-a {
        width: 220px;
        height: 220px;
    }

    .fintech-showcase .showcase-core,
    .fintech-showcase .map-core {
        width: 170px;
        height: 170px;
        border-radius: 24px;
    }

    .fintech-showcase .showcase-core i,
    .fintech-showcase .map-core i {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 26px;
    }

    .fintech-showcase .showcase-core strong,
    .fintech-showcase .map-core strong {
        font-size: 19px;
    }

    .fintech-showcase .service-bubble {
        min-width: 108px;
        padding: 12px 10px;
        font-size: 12px;
    }

    .fintech-showcase .service-bubble i,
    .fintech-showcase .node {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 19px;
    }

    .fintech-showcase .network-label {
        display: none;
    }

    .fintech-showcase h2 {
        font-size: clamp(34px, 11vw, 48px);
    }

    .fintech-showcase .showcase-content > p:not(.eyebrow),
    .fintech-showcase .section-heading > p:not(.eyebrow) {
        font-size: 17px;
    }

    .fintech-showcase .showcase-features span,
    .fintech-showcase .feature-list span {
        grid-template-columns: 54px 1fr;
        padding: 14px;
        border-radius: 18px;
    }

    .fintech-showcase .showcase-features i,
    .fintech-showcase .feature-list i {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 19px;
    }

    .fintech-showcase .showcase-features b,
    .fintech-showcase .feature-list b {
        font-size: 17px;
    }

    .fintech-showcase .showcase-features em,
    .fintech-showcase .feature-list em {
        font-size: 13px;
    }

    .fintech-showcase .showcase-cta,
    .fintech-showcase .distributor-cta {
        min-height: 62px;
        font-size: 18px;
    }
}
/* Remove unwanted yellow arrow */
.footer-social a::before,
.footer-social a::after{
    content: none !important;
    display: none !important;
}

.footer .footer-social {
    height: 74px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px;
    padding: 0;
}

.footer .footer-social a {
    width: 46px;
    height: 46px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    line-height: 1;
    transform: none;
}

.footer .footer-social a:hover {
    transform: translateY(-6px) scale(1.1);
    color: #800080;
    box-shadow: 0 16px 30px rgba(47,7,44,.26), 0 0 30px rgba(244,196,48,.24), 0 0 28px rgba(255,255,255,.22);
}

.footer .footer-social a i {
    width: 1em;
    height: 1em;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    text-align: center;
}

.footer .footer-social a i::before {
    display: block;
    line-height: 1;
}

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

#distributor[data-distributor-scroll] {
    min-height: 300vh;
    padding-block: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(160,32,240,.1), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(244,196,48,.1), transparent 24%),
        radial-gradient(circle at 74% 82%, rgba(128,0,128,.08), transparent 28%),
        linear-gradient(180deg, #fff 0%, #fffafd 44%, #fbf7ff 100%);
    --story-progress: 0;
    --story-dot-y: 0px;
}

#distributor[data-distributor-scroll]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.62) 49%, transparent 56%),
        radial-gradient(circle, rgba(128,0,128,.11) 0 1.3px, transparent 1.7px);
    background-size: 100% 100%, 24px 24px;
    opacity: .42;
    pointer-events: none;
    animation: distributorBgDrift 18s ease-in-out infinite, distributorMeshFlow 14s linear infinite;
}

#distributor[data-distributor-scroll]::after {
    content: "";
    position: absolute;
    inset: 6% -10% auto auto;
    width: 44vw;
    height: 44vw;
    border: 1px solid rgba(160,32,240,.16);
    border-radius: 50%;
    box-shadow: inset 0 0 70px rgba(160,32,240,.05), 0 0 90px rgba(244,196,48,.08);
    opacity: .72;
    pointer-events: none;
    animation: distributorOrbitWash 20s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .distributor-grid::selection {
    background: rgba(244,196,48,.28);
}

#distributor[data-distributor-scroll] .distributor-grid {
    position: relative;
    top: auto;
    width: min(100% - 32px, 1280px);
    height: calc(100vh - 150px);
    min-height: 720px;
    align-items: center;
    isolation: isolate;
    overflow: visible;
    padding-block: 42px 42px;
}

#distributor[data-distributor-scroll] .distributor-grid > * {
    position: relative;
    z-index: 2;
}

#distributor[data-distributor-scroll].is-story-fixed .distributor-grid {
    position: fixed;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    z-index: 8;
}

#distributor[data-distributor-scroll].is-story-after .distributor-grid {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
}

#distributor[data-distributor-scroll] .distributor-grid::before {
    content: "";
    position: absolute;
    left: -74px;
    top: 42px;
    bottom: 42px;
    width: 13px;
    border-radius: 999px;
    background: linear-gradient(180deg, #800080 0%, #A020F0 48%, #F4C430 100%);
    box-shadow: 0 0 0 18px rgba(160,32,240,.09), 0 16px 42px rgba(128,0,128,.24), 0 0 28px rgba(244,196,48,.2);
    animation: distributorRailPulse 5.5s ease-in-out infinite;
    z-index: 4;
}

#distributor[data-distributor-scroll] .distributor-grid::after {
    content: "";
    position: absolute;
    left: -92px;
    top: calc(42px + var(--story-dot-y));
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff7c7 0 18%, #F4C430 42%, #FF9F1C 76%, #d98900 100%);
    box-shadow: 0 16px 32px rgba(255,159,28,.32), 0 0 0 10px rgba(244,196,48,.14), 0 0 34px rgba(244,196,48,.5);
    transform: translateY(-50%);
    transition: top .32s cubic-bezier(.22,1,.36,1);
    animation: distributorDotPulse 2.8s ease-in-out infinite;
    z-index: 5;
}

#distributor[data-distributor-scroll].is-story-fixed .distributor-grid::before {
    animation: distributorRailPulse 5.5s ease-in-out infinite, distributorRailFlow 2.8s linear infinite;
}

#distributor[data-distributor-scroll] .showcase-content,
#distributor[data-distributor-scroll] .network-map > * {
    will-change: transform, opacity, filter;
}

#distributor[data-distributor-scroll] .showcase-content.is-switching {
    animation: distributorContentSwap .84s cubic-bezier(.22,1,.36,1) both;
}

#distributor[data-distributor-scroll] .showcase-features span {
    animation: distributorFeatureSet .8s cubic-bezier(.22,1,.36,1) both;
}

#distributor[data-distributor-scroll] .showcase-features span:nth-child(2) { animation-delay: .08s; }
#distributor[data-distributor-scroll] .showcase-features span:nth-child(3) { animation-delay: .16s; }

#distributor .distributor-particle {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF9F1C;
    box-shadow: 0 0 22px rgba(255,159,28,.55), 0 0 40px rgba(160,32,240,.18);
    animation: distributorParticleFloat 7s ease-in-out infinite, distributorParticleBlink 3.8s ease-in-out infinite;
}

#distributor .dp1 { left: 16%; top: 18%; }
#distributor .dp2 { right: 17%; top: 24%; animation-delay: -1.5s; }
#distributor .dp3 { left: 22%; bottom: 20%; animation-delay: -3s; }
#distributor .dp4 { right: 20%; bottom: 22%; animation-delay: -4.5s; }

#distributor .dp1,
#distributor .dp3 {
    animation-duration: 6.2s, 3.2s;
}

#distributor .dp2,
#distributor .dp4 {
    animation-duration: 8s, 4.4s;
}

#distributor .distributor-state-img {
    position: absolute;
    inset: 6%;
    z-index: 8;
    width: 88%;
    height: 88%;
    object-fit: contain;
    padding: 10px;
    border: 3px solid rgba(128,0,128,.72);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.05)) padding-box,
        conic-gradient(from var(--reflect-angle, 0deg), #4E0D46 0deg, #A020F0 70deg, #ffffff 96deg, #F4C430 118deg, #800080 190deg, #A020F0 270deg, #4E0D46 360deg) border-box;
    background-size: 100% 100%, 100% 100%;
    box-shadow:
        0 22px 52px rgba(128,0,128,.18),
        0 0 0 1px rgba(255,255,255,.82) inset,
        0 0 34px rgba(244,196,48,.12);
    opacity: 0;
    transform: translateY(18px) scale(.985);
    filter: blur(5px);
    pointer-events: none;
    transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1), filter .72s cubic-bezier(.22,1,.36,1);
    filter: blur(5px) drop-shadow(0 22px 48px rgba(128,0,128,.08));
    --reflect-angle: 0deg;
}

#distributor[data-scroll-state="1"] .distributor-img,
#distributor[data-scroll-state="2"] .retailer-img,
#distributor[data-scroll-state="3"] .bsk-img {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 26px 54px rgba(128,0,128,.16));
    animation: distributorImageFloat 6.5s ease-in-out infinite, distributorImageAura 5.5s ease-in-out infinite, distributorReflectorBorder 3.6s linear infinite;
}

#distributor .network-orbit,
#distributor .node,
#distributor .line,
#distributor .map-core,
#distributor .network-label,
#distributor .distributor-scroll-visual {
    opacity: 0 !important;
    visibility: hidden;
}

#distributor .distributor-scroll-visual {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transform: translateY(30px) scale(.98);
    filter: blur(6px);
    transition: opacity .82s cubic-bezier(.22,1,.36,1), transform .82s cubic-bezier(.22,1,.36,1), filter .82s cubic-bezier(.22,1,.36,1);
}

#distributor[data-scroll-state="2"] .visual-growth {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

#distributor .visual-growth span {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(128,0,128,.4);
    background: rgba(255,255,255,.84);
    box-shadow: 0 0 28px rgba(128,0,128,.16);
    animation: distributorNodeGlow 3.8s ease-in-out infinite;
}

#distributor .visual-growth span:nth-child(1) { left: 32%; top: 30%; }
#distributor .visual-growth span:nth-child(2) { right: 29%; top: 36%; animation-delay: -.8s; }
#distributor .visual-growth span:nth-child(3) { left: 37%; bottom: 31%; animation-delay: -1.6s; }
#distributor .visual-growth span:nth-child(4) { right: 34%; bottom: 26%; animation-delay: -2.4s; }

#distributor .visual-analytics {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 14px;
    padding-bottom: 110px;
}

#distributor .visual-analytics i {
    width: 34px;
    border-radius: 16px 16px 6px 6px;
    background: linear-gradient(180deg, #FF9F1C, #800080);
    box-shadow: 0 0 24px rgba(255,159,28,.28);
    animation: distributorBarRise 2.8s ease-in-out infinite;
}

#distributor .visual-analytics i:nth-child(1) { height: 58px; }
#distributor .visual-analytics i:nth-child(2) { height: 86px; animation-delay: -.25s; }
#distributor .visual-analytics i:nth-child(3) { height: 118px; animation-delay: -.5s; }
#distributor .visual-analytics i:nth-child(4) { height: 154px; animation-delay: -.75s; }

#distributor .visual-analytics em {
    position: absolute;
    right: 16%;
    top: 22%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: url("../images/bharat.png") center/contain no-repeat;
    filter: drop-shadow(0 0 22px rgba(128,0,128,.22));
    opacity: .72;
}

#distributor[data-scroll-state="2"] .map-core strong { font-size: 22px; }
#distributor[data-scroll-state="3"] .map-core strong { font-size: 20px; }
#distributor[data-scroll-state="2"] .map-core i::before { content: "\f201"; }
#distributor[data-scroll-state="3"] .map-core i::before { content: "\e473"; }

#distributor[data-scroll-state="1"] .network-map {
    transform: translateY(0) scale(1);
}

#distributor[data-scroll-state="2"] .network-label.label-a { transform: translate(-22px, 10px); }
#distributor[data-scroll-state="2"] .network-label.label-b { transform: translate(20px, 8px); }
#distributor[data-scroll-state="2"] .network-label.label-c { transform: translate(12px, -16px); }
#distributor[data-scroll-state="2"] .network-label.label-d { transform: translate(-14px, -8px); }

#distributor[data-scroll-state="3"] .node,
#distributor[data-scroll-state="3"] .line,
#distributor[data-scroll-state="3"] .network-orbit {
    filter: drop-shadow(0 0 14px rgba(160,32,240,.24));
}

#distributor[data-distributor-scroll] .showcase-content {
    max-width: 560px;
}

#distributor[data-distributor-scroll] .showcase-visual {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(160,32,240,.1), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(251,245,255,.88));
    box-shadow: 0 34px 88px rgba(128,0,128,.12), 0 16px 46px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.95);
    animation: distributorPanelBreath 7s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-visual .distributor-state-img + .distributor-state-img {
    animation-delay: .18s;
}

#distributor[data-distributor-scroll] .showcase-visual::before {
    opacity: .45;
    animation: distributorVisualGlow 8s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-visual::after {
    opacity: .36;
    animation: distributorOrbitSpin 24s linear infinite, distributorRingPulse 6s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-content {
    animation: distributorContentFloat 7s ease-in-out infinite;
    filter: drop-shadow(0 18px 44px rgba(15,23,42,.04));
}

#distributor[data-distributor-scroll] .eyebrow {
    position: relative;
    overflow: hidden;
    animation: distributorPillGlow 4.8s ease-in-out infinite, distributorPillFloat 5.6s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .eyebrow::after,
#distributor[data-distributor-scroll] .distributor-cta::after,
#distributor[data-distributor-scroll] .showcase-features span::after,
#distributor[data-distributor-scroll] .feature-list span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.38) 48%, transparent 62%);
    transform: translateX(-120%);
    pointer-events: none;
    animation: distributorShine 6.2s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .eyebrow {
    padding: 9px 18px;
    font-size: clamp(11px, .86vw, 13px);
}

#distributor[data-distributor-scroll] h2 {
    font-size: clamp(34px, 3.8vw, 56px);
    line-height: 1.08;
    text-shadow: 0 18px 42px rgba(15,23,42,.08);
    background: linear-gradient(110deg, #0F172A 0%, #0F172A 36%, #800080 48%, #F4C430 52%, #0F172A 64%, #0F172A 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: distributorTextLift 6.4s ease-in-out infinite, distributorTextReflect 5.8s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-content > p:not(.eyebrow) {
    max-width: 540px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.52;
    animation: distributorTextFadePulse 6.4s ease-in-out infinite, distributorDescWave 7.2s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-features,
#distributor[data-distributor-scroll] .feature-list {
    gap: 13px;
    margin: 24px 0 26px;
}

#distributor[data-distributor-scroll] .showcase-features span,
#distributor[data-distributor-scroll] .feature-list span {
    position: relative;
    overflow: hidden;
    grid-template-columns: 58px 1fr;
    column-gap: 14px;
    padding: 13px 16px;
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(15,23,42,.07), 0 0 0 1px rgba(160,32,240,.04), inset 0 1px 0 rgba(255,255,255,.94);
    animation: distributorFeatureSet .8s cubic-bezier(.22,1,.36,1) both, distributorCardBreath 5.8s ease-in-out infinite, distributorCardFloat 6.6s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-features span:nth-child(1),
#distributor[data-distributor-scroll] .feature-list span:nth-child(1) {
    animation-delay: 0s, 0s;
}

#distributor[data-distributor-scroll] .showcase-features span:nth-child(2),
#distributor[data-distributor-scroll] .feature-list span:nth-child(2) {
    animation-delay: .08s, .45s;
}

#distributor[data-distributor-scroll] .showcase-features span:nth-child(3),
#distributor[data-distributor-scroll] .feature-list span:nth-child(3) {
    animation-delay: .16s, .9s;
}

#distributor[data-distributor-scroll] .showcase-features span:hover,
#distributor[data-distributor-scroll] .feature-list span:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(160,32,240,.24);
    box-shadow: 0 24px 58px rgba(128,0,128,.14), 0 0 36px rgba(244,196,48,.1);
}

#distributor[data-distributor-scroll] .showcase-features i,
#distributor[data-distributor-scroll] .feature-list i {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 19px;
    box-shadow: 0 12px 24px rgba(128,0,128,.12);
    animation: distributorIconPulse 4.4s ease-in-out infinite, distributorIconOrbit 5.4s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-features b,
#distributor[data-distributor-scroll] .feature-list b {
    font-size: clamp(16px, 1.2vw, 18px);
    text-shadow: 0 10px 24px rgba(15,23,42,.08);
    animation: distributorFeatureTextPulse 5.8s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .showcase-features em,
#distributor[data-distributor-scroll] .feature-list em {
    margin-top: 4px;
    font-size: clamp(12px, .95vw, 14px);
    line-height: 1.35;
    animation: distributorMutedTextPulse 6.4s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .distributor-cta {
    position: relative;
    overflow: hidden;
    width: min(100%, 300px);
    min-height: 60px;
    border-radius: 16px;
    font-size: clamp(17px, 1.35vw, 20px);
    box-shadow: 0 18px 42px rgba(128,0,128,.26), 0 0 32px rgba(160,32,240,.18);
    transition: transform .28s ease, box-shadow .28s ease;
    animation: distributorCtaPulse 4.6s ease-in-out infinite, distributorButtonFloat 5.2s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .distributor-cta i {
    animation: distributorArrowMove 1.8s ease-in-out infinite;
}

#distributor[data-distributor-scroll] .distributor-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 58px rgba(128,0,128,.32), 0 0 42px rgba(244,196,48,.16);
}

@keyframes distributorBgDrift {
    0%, 100% { transform: translate3d(0,0,0); opacity: .34; }
    50% { transform: translate3d(-18px, 12px, 0); opacity: .5; }
}

@keyframes distributorMeshFlow {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 48px 48px; }
}

@keyframes distributorOrbitWash {
    0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .42; }
    50% { transform: translate3d(-28px, 18px, 0) scale(1.06); opacity: .72; }
}

@keyframes distributorRailPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

@keyframes distributorRailFlow {
    0% { background-position: 0 0; }
    100% { background-position: 0 260px; }
}

@keyframes distributorDotPulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.08); }
}

@keyframes distributorImageFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes distributorImageAura {
    0%, 100% { filter: blur(0) drop-shadow(0 26px 54px rgba(128,0,128,.14)); }
    50% { filter: blur(0) drop-shadow(0 34px 70px rgba(160,32,240,.24)); }
}

@keyframes distributorReflectorBorder {
    0% {
        --reflect-angle: 0deg;
        box-shadow: 0 22px 52px rgba(128,0,128,.18), 0 0 0 1px rgba(255,255,255,.82) inset, 0 0 26px rgba(244,196,48,.1);
    }
    50% {
        --reflect-angle: 180deg;
        box-shadow: 0 30px 72px rgba(128,0,128,.28), 0 0 0 1px rgba(255,255,255,.96) inset, 0 0 54px rgba(244,196,48,.28), 0 0 34px rgba(160,32,240,.22);
    }
    100% {
        --reflect-angle: 360deg;
        box-shadow: 0 22px 52px rgba(128,0,128,.18), 0 0 0 1px rgba(255,255,255,.82) inset, 0 0 26px rgba(244,196,48,.1);
    }
}

@keyframes distributorPanelBreath {
    0%, 100% { transform: translate3d(0,0,0); box-shadow: 0 34px 88px rgba(128,0,128,.12), 0 16px 46px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.95); }
    50% { transform: translate3d(0,-4px,0); box-shadow: 0 42px 105px rgba(128,0,128,.16), 0 22px 58px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.98); }
}

@keyframes distributorContentFloat {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-5px,0); }
}

@keyframes distributorPillGlow {
    0%, 100% { box-shadow: 0 14px 32px rgba(128,0,128,.22); }
    50% { box-shadow: 0 18px 42px rgba(128,0,128,.3), 0 0 28px rgba(244,196,48,.14); }
}

@keyframes distributorPillFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-4px,0) scale(1.015); }
}

@keyframes distributorTextLift {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-3px,0); }
}

@keyframes distributorTextReflect {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes distributorTextFadePulse {
    0%, 100% { opacity: .92; }
    50% { opacity: 1; }
}

@keyframes distributorDescWave {
    0%, 100% { transform: translate3d(0,0,0); filter: drop-shadow(0 0 0 rgba(128,0,128,0)); }
    50% { transform: translate3d(0,-2px,0); filter: drop-shadow(0 8px 18px rgba(128,0,128,.08)); }
}

@keyframes distributorVisualGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .3; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: .55; }
}

@keyframes distributorRingPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(160,32,240,0)); }
    50% { filter: drop-shadow(0 0 18px rgba(160,32,240,.22)); }
}

@keyframes distributorShine {
    0%, 72%, 100% { transform: translateX(-120%); }
    86% { transform: translateX(120%); }
}

@keyframes distributorIconPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.04); filter: brightness(1.08); }
}

@keyframes distributorCardBreath {
    0%, 100% { box-shadow: 0 16px 38px rgba(15,23,42,.07), 0 0 0 1px rgba(160,32,240,.04), inset 0 1px 0 rgba(255,255,255,.94); }
    50% { box-shadow: 0 20px 48px rgba(128,0,128,.1), 0 0 34px rgba(244,196,48,.08), inset 0 1px 0 rgba(255,255,255,.98); }
}

@keyframes distributorCardFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}

@keyframes distributorIconOrbit {
    0%, 100% { rotate: 0deg; }
    50% { rotate: 3deg; }
}

@keyframes distributorFeatureTextPulse {
    0%, 100% { opacity: .96; }
    50% { opacity: 1; }
}

@keyframes distributorMutedTextPulse {
    0%, 100% { opacity: .82; }
    50% { opacity: 1; }
}

@keyframes distributorCtaPulse {
    0%, 100% { box-shadow: 0 18px 42px rgba(128,0,128,.26), 0 0 32px rgba(160,32,240,.18); }
    50% { box-shadow: 0 24px 58px rgba(128,0,128,.34), 0 0 42px rgba(244,196,48,.18); }
}

@keyframes distributorButtonFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes distributorArrowMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(7px); }
}

@keyframes distributorContentSwap {
    0% { opacity: .1; transform: translateY(30px) scale(.98); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes distributorFeatureSet {
    0% { opacity: 0; transform: translateY(24px); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes distributorParticleFloat {
    0%, 100% { transform: translate3d(0,0,0); opacity: .45; }
    50% { transform: translate3d(10px,-16px,0); opacity: .95; }
}

@keyframes distributorNodeGlow {
    0%, 100% { transform: scale(.92); opacity: .62; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes distributorBarRise {
    0%, 100% { transform: scaleY(.5); filter: brightness(.96); }
    50% { transform: scaleY(1); filter: brightness(1.16); }
}

@media (max-width: 1080px) {
    #distributor[data-distributor-scroll] .distributor-grid::before,
    #distributor[data-distributor-scroll] .distributor-grid::after {
        display: none;
    }

    #distributor[data-distributor-scroll] .showcase-content {
        max-width: 100%;
    }

    #distributor[data-distributor-scroll] h2 {
        font-size: clamp(31px, 7vw, 46px);
    }

    #distributor[data-distributor-scroll] .showcase-content > p:not(.eyebrow) {
        font-size: 16px;
    }
}

@media (max-width: 760px) {
    #distributor[data-distributor-scroll] {
        min-height: auto;
        padding-block: 70px;
    }

    #distributor[data-distributor-scroll] .distributor-grid,
    #distributor[data-distributor-scroll].is-story-fixed .distributor-grid,
    #distributor[data-distributor-scroll].is-story-after .distributor-grid {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        transform: none;
        width: min(100% - 32px, 1280px);
        height: auto;
        min-height: auto;
        padding-block: 0;
    }

    #distributor .distributor-scroll-visual {
        transition-duration: .7s;
    }

    #distributor[data-distributor-scroll] .eyebrow {
        padding: 8px 14px;
        font-size: 10px;
    }

    #distributor[data-distributor-scroll] h2 {
        font-size: clamp(28px, 10vw, 38px);
    }

    #distributor[data-distributor-scroll] .showcase-features span,
    #distributor[data-distributor-scroll] .feature-list span {
        grid-template-columns: 48px 1fr;
        padding: 12px 14px;
    }

    #distributor[data-distributor-scroll] .showcase-features i,
    #distributor[data-distributor-scroll] .feature-list i {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    #distributor[data-distributor-scroll] .showcase-features b,
    #distributor[data-distributor-scroll] .feature-list b {
        font-size: 15px;
    }

    #distributor[data-distributor-scroll] .showcase-features em,
    #distributor[data-distributor-scroll] .feature-list em {
        font-size: 12px;
    }

    #distributor[data-distributor-scroll] .distributor-cta {
        width: min(100%, 280px);
        min-height: 54px;
        font-size: 16px;
    }
}

/* Final seamless advanced background: one connected surface across all non-hero sections. */
main {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background:
        radial-gradient(circle at 16% 12%, rgba(128,0,128,.12), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(255,159,28,.12), transparent 26%),
        radial-gradient(circle at 48% 58%, rgba(128,0,128,.07), transparent 34%),
        linear-gradient(115deg, rgba(128,0,128,.05), transparent 30%, rgba(255,159,28,.055) 68%, transparent),
        linear-gradient(180deg, #fff 0%, #fff8ef 42%, #fbf7ff 72%, #fff 100%) !important;
    background-size: 130% 130%, 125% 125%, 140% 140%, 180% 180%, 100% 100%;
    background-position: 0% 0%, 100% 0%, 50% 50%, 0% 0%, center;
    animation: bankuSeamlessAura 18s ease-in-out infinite alternate;
}

main::before,
main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

main::before {
    background:
        linear-gradient(rgba(128,0,128,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.04) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 46%, rgba(255,159,28,.08) 48%, transparent 52%),
        radial-gradient(circle, rgba(128,0,128,.08) 0 1.5px, transparent 2.5px);
    background-size: 78px 78px, 78px 78px, 220px 220px, 92px 92px;
    opacity: .78;
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    animation: bankuSeamlessLines 26s linear infinite;
}

main::after {
    background:
        conic-gradient(from 110deg at 24% 28%, transparent 0 76%, rgba(128,0,128,.1) 82%, transparent 88%),
        conic-gradient(from 260deg at 82% 62%, transparent 0 72%, rgba(255,159,28,.12) 80%, transparent 88%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent);
    background-size: 760px 760px, 680px 680px, 36% 100%;
    background-position: -120px 0, calc(100% + 80px) 50%, -42% 0;
    mix-blend-mode: multiply;
    opacity: .72;
    animation: bankuSeamlessOrbit 20s ease-in-out infinite, bankuSeamlessShine 7.5s ease-in-out infinite;
}

main > section:not(.hero) {
    position: relative;
    z-index: 1;
    background: transparent !important;
    animation: none !important;
}

@keyframes bankuSeamlessAura {
    0% {
        background-position: 0% 0%, 100% 0%, 50% 50%, 0% 0%, center;
    }
    100% {
        background-position: 8% 4%, 92% 10%, 46% 62%, 100% 0%, center;
    }
}

@keyframes bankuSeamlessLines {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
        filter: hue-rotate(0deg);
    }
    100% {
        background-position: 78px 78px, 78px 78px, 220px 220px, 92px -92px;
        filter: hue-rotate(8deg);
    }
}

@keyframes bankuSeamlessOrbit {
    0%, 100% {
        transform: translate3d(0,0,0) scale(1);
    }
    50% {
        transform: translate3d(-18px,12px,0) scale(1.025);
    }
}

@keyframes bankuSeamlessShine {
    0%, 62%, 100% {
        background-position: -120px 0, calc(100% + 80px) 50%, -42% 0;
    }
    78% {
        background-position: -90px 0, calc(100% + 40px) 50%, 142% 0;
    }
}

@keyframes footerReflectorSweep {
    0%, 58%, 100% {
        left: -42%;
        opacity: 0;
        transform: rotate(18deg) translate3d(0,0,0);
    }
    70% {
        opacity: .84;
    }
    86% {
        left: 118%;
        opacity: 0;
        transform: rotate(18deg) translate3d(18px,-10px,0);
    }
}

@keyframes footerAppPanelFloat {
    0%, 100% { transform: translate3d(0,0,0); box-shadow: 0 22px 64px rgba(20,11,38,.12), inset 0 1px 0 rgba(255,255,255,.98); }
    50% { transform: translate3d(0,-4px,0); box-shadow: 0 30px 78px rgba(80,28,110,.16), inset 0 1px 0 rgba(255,255,255,1); }
}

@keyframes footerAppLineFlow {
    0% { background-position: 0 0, 0 0, 0 0, center, center; }
    100% { background-position: 58px 58px, 58px 58px, 220px 220px, center, center; }
}

@keyframes footerAppReflector {
    0%, 60%, 100% { background-position: center, center, -46% 0; opacity: .42; }
    76% { background-position: center, center, 138% 0; opacity: .78; }
}

@keyframes footerAppPhoneRise {
    0%, 100% { translate: 0 0; filter: drop-shadow(0 14px 22px rgba(25,31,72,.1)); }
    50% { translate: 0 -5px; filter: drop-shadow(0 22px 32px rgba(25,31,72,.16)); }
}

@keyframes footerAppScreenPulse {
    0%, 100% { filter: grayscale(1) contrast(1.2) brightness(1); }
    50% { filter: grayscale(1) contrast(1.28) brightness(1.08); }
}

@keyframes footerAppTitleGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(37,99,235,0)); }
    50% { filter: drop-shadow(0 10px 18px rgba(37,99,235,.18)); }
}

@keyframes footerAppBadgeLift {
    0%, 100% { transform: translateY(0); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
    50% { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0,0,0,.24); }
}

/* Reference redesign for media coverage only. */
main > section.media-coverage {
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 4vw, 54px) 0 clamp(28px, 3.2vw, 46px);
    background:
        radial-gradient(circle at 14% 14%, rgba(128,0,128,.1), transparent 24%),
        radial-gradient(circle at 86% 78%, rgba(244,196,48,.12), transparent 26%),
        conic-gradient(from 130deg at 50% 42%, transparent 0 62%, rgba(128,0,128,.055) 70%, transparent 78%),
        radial-gradient(circle at 50% 0%, rgba(128,0,128,.08), transparent 34%),
        linear-gradient(rgba(128,0,128,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.035) 1px, transparent 1px),
        linear-gradient(180deg, #fff 0%, #fbf8ff 100%) !important;
    background-size: 100% 100%, 100% 100%, 160% 160%, 100% 100%, 68px 68px, 68px 68px, 100% 100%;
    animation: mediaCoverageAura 12s ease-in-out infinite !important;
}

main > section.media-coverage::before,
main > section.media-coverage::after {
    content: "";
    position: absolute;
    top: 42px;
    width: 58px;
    height: 58px;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(128,0,128,.55) 0 2px, transparent 3px);
    background-size: 18px 18px;
    opacity: .66;
    animation: mediaDotsFloat 5.8s ease-in-out infinite;
}

main > section.media-coverage::before {
    left: 13%;
}

main > section.media-coverage::after {
    right: 13%;
}

.media-coverage-heading {
    max-width: 720px;
    margin: 0 auto 24px;
    text-align: center;
}

.media-coverage-heading h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #11131b;
    font-size: clamp(26px, 3.6vw, 47px);
    line-height: .95;
    font-weight: 950;
    letter-spacing: 0;
    text-shadow: 0 10px 24px rgba(15,23,42,.08);
    animation: mediaHeadingLift 5.2s ease-in-out infinite;
}

.media-coverage-heading h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 48px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #800080, #F4C430, #800080);
    background-size: 220% 100%;
    animation: mediaUnderlineFlow 3.8s ease-in-out infinite;
}

.media-coverage-heading h2 span {
    background: linear-gradient(100deg, #800080, #9C27B0 48%, #F4C430 76%, #800080);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mediaTextSheen 4.4s ease-in-out infinite;
}

.media-coverage-heading p {
    margin: 22px 0 0;
    color: #69708a;
    font-size: clamp(10px, .93vw, 13px);
    line-height: 1.35;
    font-weight: 800;
}

.media-coverage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
    align-items: stretch;
    gap: 18px;
}

.media-feature-card,
.media-news-card {
    border: 1px solid rgba(17,19,27,.08);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
        radial-gradient(circle at 12% 16%, rgba(128,0,128,.08), transparent 28%);
    box-shadow: 0 14px 40px rgba(31,22,58,.1), 0 0 30px rgba(128,0,128,.07);
    animation: mediaCardGlow 5.2s ease-in-out infinite;
}

.media-feature-card {
    min-height: 430px;
    overflow: hidden;
}

.media-image {
    height: 210px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.media-image img,
.media-thumb img {
    transition: transform .7s ease, filter .7s ease;
    animation: mediaImageBreath 6s ease-in-out infinite;
}

.media-feature-card:hover .media-image img,
.media-news-card:hover .media-thumb img {
    transform: scale(1.06);
    filter: saturate(1.08) brightness(1.04);
}

.media-feature-copy {
    position: relative;
    overflow: hidden;
    padding: 16px 20px 18px;
}

.media-feature-copy::before,
.media-news-card > div::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.55) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: mediaCardReflect 5.8s ease-in-out infinite;
}

.media-feature-copy > p:first-child,
.media-news-card > div > p:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    color: #800080;
    font-size: 8px;
    font-weight: 950;
    text-transform: none;
}

.media-feature-copy > p:first-child i,
.media-news-card > div > p:first-child i {
    color: #800080;
    font-size: 12px;
}

.media-feature-copy > p:first-child span,
.media-news-card > div > p:first-child span {
    color: #800080;
}

.media-feature-copy em,
.media-news-card em {
    color: #800080;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.media-feature-copy h2 {
    margin: 0 0 10px;
    color: #11131b;
    font-size: clamp(14px, 1.35vw, 20px);
    line-height: 1.18;
    font-weight: 950;
}

.media-feature-copy > p:not(:first-child) {
    max-width: 520px;
    margin: 0;
    color: #6b7288;
    font-size: 10px;
    line-height: 1.48;
    font-weight: 700;
}

.media-learn {
    min-height: 32px;
    margin-top: 18px;
    padding: 0 0 0 13px;
    border: 1px solid #800080;
    color: #800080;
    background: #fff;
    font-size: 10px;
    font-weight: 950;
    box-shadow: none;
}

.media-learn i {
    width: 32px;
    height: 32px;
    color: #fff;
    background: #800080;
}

.media-news-rail {
    min-height: 430px;
    max-height: 430px;
    padding: 8px 6px 8px 0;
}

.media-news-rail::before,
.media-news-rail::after {
    display: none;
}

.media-news-track {
    gap: 14px;
    animation: mediaNewsUp 20s linear infinite;
}

.media-news-card {
    display: grid;
    grid-template-columns: minmax(130px, 38%) 1fr;
    min-height: 116px;
    overflow: hidden;
    border-radius: 12px;
}

.media-thumb {
    min-height: 116px;
}

.media-news-card > div {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16px;
}

.media-news-card > div > p:first-child {
    margin-bottom: 10px;
    gap: 7px;
    font-size: 8px;
}

.media-news-card h3 {
    margin: 0;
    color: #11131b;
    font-size: clamp(11px, 1.05vw, 15px);
    line-height: 1.14;
    font-weight: 950;
}

.media-news-card > div > p:not(:first-child),
.media-news-card .media-learn {
    display: none;
}

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

    .media-news-rail {
        min-height: 430px;
        max-height: 430px;
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    main > section.media-coverage::before,
    main > section.media-coverage::after {
        display: none;
    }

    .media-coverage-heading h2 {
        font-size: clamp(26px, 9vw, 36px);
    }

    .media-image {
        height: 190px;
    }

    .media-feature-copy {
        padding: 16px;
    }

    .media-news-card {
        grid-template-columns: 1fr;
        min-height: 220px;
    }

    .media-thumb {
        min-height: 120px;
    }
}

@keyframes mediaCoverageAura {
    0%, 100% { background-position: center, center, center, center, 0 0, 0 0, center; }
    50% { background-position: center, center, 52% 48%, center, 34px 34px, 34px 34px, center; }
}

@keyframes mediaDotsFloat {
    0%, 100% { transform: translateY(0); opacity: .56; }
    50% { transform: translateY(-6px); opacity: .86; }
}

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

@keyframes mediaUnderlineFlow {
    0%, 100% { background-position: 0% center; width: 42px; }
    50% { background-position: 100% center; width: 74px; }
}

@keyframes mediaTextSheen {
    0%, 100% { background-position: 0% center; filter: drop-shadow(0 8px 16px rgba(128,0,128,.1)); }
    50% { background-position: 100% center; filter: drop-shadow(0 12px 22px rgba(128,0,128,.2)); }
}

@keyframes mediaCardGlow {
    0%, 100% { box-shadow: 0 14px 40px rgba(31,22,58,.1), 0 0 30px rgba(128,0,128,.07); }
    50% { box-shadow: 0 18px 48px rgba(31,22,58,.12), 0 0 38px rgba(128,0,128,.13), 0 0 18px rgba(244,196,48,.08); }
}

@keyframes mediaImageBreath {
    0%, 100% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(1.08) brightness(1.03); }
}

@keyframes mediaCardReflect {
    0%, 58%, 100% { transform: translateX(-120%); opacity: 0; }
    74% { opacity: .7; }
    88% { transform: translateX(120%); opacity: 0; }
}

/* Final BankU media coverage portal UI. */
main > section.media-coverage[data-media-coverage] {
    --media-x: 50%;
    --media-y: 50%;
    padding: clamp(54px, 6vw, 86px) 0 clamp(46px, 5vw, 76px);
    color: #091022;
    background:
        radial-gradient(circle at var(--media-x) var(--media-y), rgba(128,0,128,.1), transparent 24%),
        radial-gradient(circle at 84% 5%, rgba(128,0,255,.13), transparent 28%),
        radial-gradient(circle at 10% 84%, rgba(255,112,0,.1), transparent 26%),
        linear-gradient(rgba(128,0,128,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.035) 1px, transparent 1px),
        linear-gradient(180deg, #fff 0%, #fbf8ff 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px, 100% 100%;
    animation: mediaPortalBg 18s ease-in-out infinite !important;
}

main > section.media-coverage[data-media-coverage]::before,
main > section.media-coverage[data-media-coverage]::after {
    top: 42px;
    width: 74px;
    height: 74px;
    background-image: radial-gradient(circle, rgba(128,0,128,.62) 0 2px, transparent 3px);
    background-size: 17px 17px;
    opacity: .66;
    animation: mediaPortalDots 5.8s ease-in-out infinite;
}

main > section.media-coverage[data-media-coverage]::before {
    left: 3vw;
}

main > section.media-coverage[data-media-coverage]::after {
    right: 3vw;
}

.media-coverage[data-media-coverage] .media-coverage-heading {
    max-width: min(1120px, calc(100% - 42px));
    margin: 0 auto 28px;
    text-align: center;
}

.media-coverage[data-media-coverage] .media-coverage-heading h2 {
    font-size: clamp(23px, 3.48vw, 44px);
    line-height: .92;
    color: #071021;
    text-shadow: 0 16px 34px rgba(15,23,42,.1);
    animation: mediaPortalTitle 5.4s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-coverage-heading h2::after {
    left: 50%;
    bottom: -13px;
    width: 62px;
    height: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #6d28d9, #e11d8d, #ff7900);
    animation: mediaPortalUnderline 3.6s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-coverage-heading h2 span {
    background: linear-gradient(100deg, #5b21b6, #a21caf 40%, #ef4444 66%, #ff7900);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mediaPortalText 4.8s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-coverage-heading p {
    margin-top: 25px;
    color: #3f4961;
    font-size: clamp(9px, .78vw, 12px);
    font-weight: 650;
}

.media-coverage[data-media-coverage] .media-coverage-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
    gap: 28px;
    align-items: stretch;
}

.media-coverage[data-media-coverage] .media-feature-card {
    position: relative;
    min-height: 486px;
    display: grid;
    grid-template-columns: minmax(330px, .56fr) minmax(260px, .44fr);
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(128,0,128,.25), transparent 28%),
        linear-gradient(135deg, #06112f 0%, #08173c 54%, #800080 100%);
    box-shadow: 0 28px 80px rgba(17,24,39,.18), 0 0 44px rgba(128,0,128,.12);
    animation: mediaPortalCard 5.8s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 3% 6%, rgba(255,255,255,.08) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 95% 92%, rgba(255,121,0,.18), transparent 28%),
        linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.12) 48%, transparent 60%);
    background-size: 22px 22px, 100% 100%, 32% 100%;
    background-position: 0 0, center, -42% 0;
    animation: mediaPortalFeatureFx 7s ease-in-out infinite;
    pointer-events: none;
}

.media-coverage[data-media-coverage] .media-image {
    order: 2;
    height: 100%;
    min-height: 486px;
    border-radius: 0;
    clip-path: ellipse(78% 74% at 68% 50%);
}

.media-coverage[data-media-coverage] .media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
    animation: mediaPortalImage 7s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-feature-copy {
    order: 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 3vw, 34px);
    color: #fff;
    background: linear-gradient(90deg, rgba(4,11,35,.95), rgba(4,11,35,.78), rgba(4,11,35,0));
}

.media-feature-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(100deg, #6d28d9, #e11d8d, #ff7900);
    box-shadow: 0 16px 34px rgba(128,0,128,.25);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    animation: mediaPortalBadge 4.4s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-feature-copy > p:first-child,
.media-coverage[data-media-coverage] .media-news-card > div > p:first-child {
    gap: 10px;
    margin-bottom: 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.media-coverage[data-media-coverage] .media-feature-copy > p:first-child i,
.media-coverage[data-media-coverage] .media-news-card > div > p:first-child i {
    color: #a855f7;
    font-size: 18px;
}

.media-coverage[data-media-coverage] .media-feature-copy em,
.media-coverage[data-media-coverage] .media-news-card em {
    color: #d946ef;
}

.media-coverage[data-media-coverage] .media-feature-copy h2 {
    max-width: 420px;
    margin-bottom: 16px;
    color: #fff;
    font-size: clamp(20px, 1.78vw, 26px);
    line-height: 1.16;
    text-shadow: 0 14px 32px rgba(0,0,0,.25);
}

.media-coverage[data-media-coverage] .media-feature-copy > p:not(:first-child) {
    max-width: 430px;
    color: rgba(255,255,255,.86);
    font-size: clamp(12px, .92vw, 14px);
    line-height: 1.58;
    font-weight: 500;
}

.media-coverage[data-media-coverage] .media-learn {
    width: fit-content;
    min-height: 44px;
    margin-top: 20px;
    padding-left: 18px;
    border: 0;
    color: #fff;
    background: linear-gradient(100deg, #6d28d9, #a21caf, #800080);
    box-shadow: 0 16px 36px rgba(128,0,128,.26);
    font-size: 13px;
    animation: mediaPortalButton 4.6s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-learn i {
    width: 34px;
    height: 34px;
    margin-inline: 10px 5px;
    color: #800080;
    background: rgba(255,255,255,.78);
}

.media-coverage[data-media-coverage] .media-news-rail {
    min-height: 568px;
    max-height: 568px;
    padding: 0;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.media-coverage[data-media-coverage] .media-news-track {
    height: max-content;
    display: grid;
    gap: 9px;
    animation: mediaPortalNewsUp 42s linear infinite;
    will-change: transform;
}

.media-coverage[data-media-coverage] .media-news-rail:hover .media-news-track {
    animation-play-state: paused;
}

.media-coverage[data-media-coverage] .media-news-card {
    position: relative;
    height: 124px;
    min-height: 124px;
    display: grid;
    grid-template-columns: 158px 1fr;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.9);
    box-shadow: 0 20px 54px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    animation: mediaPortalSmallCard 5.2s ease-in-out infinite;
}

.media-coverage[data-media-coverage] .media-news-card.is-active {
    box-shadow: 0 24px 62px rgba(128,0,128,.14), inset 0 1px 0 rgba(255,255,255,1);
}

.media-coverage[data-media-coverage] .media-thumb {
    width: 148px;
    height: 104px;
    min-height: 104px;
    border-radius: 11px;
    margin: 10px 0 10px 10px;
    overflow: hidden;
}

.media-coverage[data-media-coverage] .media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-coverage[data-media-coverage] .media-news-card > div {
    position: relative;
    justify-content: center;
    min-width: 0;
    padding: 12px 58px 12px 18px;
}

.media-coverage[data-media-coverage] .media-news-card > div > p:first-child {
    margin-bottom: 7px;
    color: #283149;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-coverage[data-media-coverage] .media-news-card h3 {
    color: #081022;
    font-size: clamp(13px, .95vw, 16px);
    line-height: 1.22;
    font-weight: 950;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-coverage[data-media-coverage] .media-news-card > div > a {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #7e22ce;
    background: rgba(128,0,128,.09);
    text-decoration: none;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.media-coverage[data-media-coverage] .media-news-card:hover > div > a,
.media-coverage[data-media-coverage] .media-news-card.is-active > div > a {
    color: #fff;
    background: linear-gradient(135deg, #800080, #ff7900);
    transform: translateY(-50%) translateX(4px);
}

.media-insight-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 26px;
    padding: 22px 26px;
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 22px 60px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
    animation: mediaPortalStrip 5.8s ease-in-out infinite;
}

.media-insight-strip article {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
    align-items: center;
    padding: 0 22px;
    border-right: 1px solid rgba(15,23,42,.1);
}

.media-insight-strip article:last-child {
    border-right: 0;
}

.media-insight-strip i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #800080;
    background: radial-gradient(circle, rgba(128,0,128,.16), rgba(128,0,128,.06));
    font-size: 22px;
    animation: mediaPortalIcon 4.4s ease-in-out infinite;
}

.media-insight-strip article:nth-child(2) i {
    color: #d61f83;
    background: radial-gradient(circle, rgba(214,31,131,.15), rgba(214,31,131,.06));
}

.media-insight-strip article:nth-child(3) i {
    color: #ff7900;
    background: radial-gradient(circle, rgba(255,121,0,.16), rgba(255,121,0,.06));
}

.media-insight-strip article:nth-child(4) i {
    color: #4169e1;
    background: radial-gradient(circle, rgba(65,105,225,.15), rgba(65,105,225,.06));
}

.media-insight-strip h3 {
    margin: 0 0 6px;
    color: #071022;
    font-size: 16px;
    line-height: 1.15;
}

.media-insight-strip p {
    margin: 0;
    color: #4a556e;
    font-size: 14px;
    line-height: 1.45;
}

@keyframes mediaPortalBg {
    0%, 100% { background-position: 0 0, center, center, 0 0, 0 0, center; }
    50% { background-position: 0 0, 52% 8%, 48% 92%, 38px 38px, 38px 38px, center; }
}

@keyframes mediaPortalDots {
    0%, 100% { transform: translateY(0) scale(1); opacity: .54; }
    50% { transform: translateY(-8px) scale(1.04); opacity: .86; }
}

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

@keyframes mediaPortalText {
    0%, 100% { background-position: 0% center; filter: drop-shadow(0 8px 16px rgba(128,0,128,.1)); }
    50% { background-position: 100% center; filter: drop-shadow(0 12px 24px rgba(128,0,128,.22)); }
}

@keyframes mediaPortalUnderline {
    0%, 100% { width: 62px; background-position: 0% center; }
    50% { width: 92px; background-position: 100% center; }
}

@keyframes mediaPortalCard {
    0%, 100% { transform: translateY(0); box-shadow: 0 28px 80px rgba(17,24,39,.18), 0 0 44px rgba(128,0,128,.12); }
    50% { transform: translateY(-4px); box-shadow: 0 34px 92px rgba(17,24,39,.22), 0 0 54px rgba(128,0,128,.18), 0 0 28px rgba(255,121,0,.1); }
}

@keyframes mediaPortalFeatureFx {
    0%, 58%, 100% { background-position: 0 0, center, -42% 0; }
    78% { background-position: 18px 18px, center, 142% 0; }
}

@keyframes mediaPortalImage {
    0%, 100% { transform: scale(1.06) translateX(0); filter: saturate(1); }
    50% { transform: scale(1.1) translateX(-8px); filter: saturate(1.08); }
}

@keyframes mediaPortalBadge {
    0%, 100% { transform: translateY(0); box-shadow: 0 16px 34px rgba(128,0,128,.25); }
    50% { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(128,0,128,.34), 0 0 18px rgba(255,121,0,.18); }
}

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

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

@keyframes mediaPortalNewsUp {
    0%, 8% {
        transform: translateY(0);
    }
    92%, 100% {
        transform: translateY(calc(-100% + 568px));
    }
}

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

@keyframes mediaPortalIcon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@media (max-width: 1080px) {
    .media-coverage[data-media-coverage] .media-coverage-grid,
    .media-insight-strip {
        grid-template-columns: 1fr;
    }

    .media-coverage[data-media-coverage] .media-feature-card {
        grid-template-columns: 1fr;
    }

    .media-coverage[data-media-coverage] .media-image {
        order: 1;
        min-height: 320px;
        clip-path: none;
    }

    .media-coverage[data-media-coverage] .media-feature-copy {
        order: 2;
        background: #07112f;
    }

    .media-insight-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(15,23,42,.08);
        padding: 16px 0;
    }

    .media-insight-strip article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {
    .media-coverage[data-media-coverage] .media-coverage-heading {
        text-align: center;
    }

    .media-coverage[data-media-coverage] .media-coverage-heading h2::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .media-coverage[data-media-coverage] .media-news-card {
        grid-template-columns: 118px 1fr;
        height: 112px;
        min-height: 112px;
    }

    .media-coverage[data-media-coverage] .media-thumb {
        width: 108px;
        height: 92px;
        min-height: 92px;
        margin: 10px 0 10px 10px;
    }

    .media-coverage[data-media-coverage] .media-news-card > div {
        padding: 10px 44px 10px 12px;
    }

    .media-coverage[data-media-coverage] .media-news-card > div > p:first-child {
        font-size: 9px;
    }

    .media-coverage[data-media-coverage] .media-news-card h3 {
        font-size: 12px;
        -webkit-line-clamp: 3;
    }

    .media-coverage[data-media-coverage] .media-news-card > div > a {
        right: 10px;
        width: 28px;
        height: 28px;
    }
}

/* Unified inner-section surface. Header, hero, footer CTA and footer stay untouched. */
main > section:not(.hero) {
    --banku-section-bg:
        radial-gradient(circle at 16% 18%, rgba(128,0,128,.105), transparent 27%),
        radial-gradient(circle at 86% 12%, rgba(244,196,48,.13), transparent 25%),
        radial-gradient(circle at 72% 82%, rgba(156,39,176,.08), transparent 30%),
        linear-gradient(rgba(128,0,128,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.045) 1px, transparent 1px),
        url("../images/BankU_gif/coin_about1.gif"),
        linear-gradient(120deg, rgba(255,255,255,.92), rgba(255,248,239,.92) 42%, rgba(251,247,255,.94) 76%, rgba(255,255,255,.92));
    position: relative;
    isolation: isolate;
    background: var(--banku-section-bg) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px, 118px auto, 100% 100% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-blend-mode: normal, normal, normal, multiply, multiply, soft-light, normal !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(128,0,128,.055),
        0 18px 58px rgba(80,28,110,.075) !important;
    animation: bankuUnifiedSectionBg 16s ease-in-out infinite alternate !important;
}

main > section.media-coverage[data-media-coverage] {
    background: var(--banku-section-bg) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px, 118px auto, 100% 100% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-blend-mode: normal, normal, normal, multiply, multiply, soft-light, normal !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(128,0,128,.055),
        0 18px 58px rgba(80,28,110,.075) !important;
    animation: bankuUnifiedSectionBg 16s ease-in-out infinite alternate !important;
}

main > section:not(.hero)::before,
main > section:not(.hero)::after,
main > section.media-coverage[data-media-coverage]::before,
main > section.media-coverage[data-media-coverage]::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

main > section:not(.hero)::before {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background:
        linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,.55) 49%, rgba(244,196,48,.13) 53%, transparent 60%),
        repeating-linear-gradient(118deg, transparent 0 34px, rgba(128,0,128,.05) 35px, transparent 38px),
        radial-gradient(circle at 22% 24%, rgba(128,0,128,.12), transparent 24%),
        radial-gradient(circle at 80% 72%, rgba(244,196,48,.14), transparent 25%) !important;
    background-size: 160% 100%, 220px 220px, 100% 100%, 100% 100% !important;
    background-position: -42% 0, 0 0, center, center !important;
    opacity: .72 !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    animation: bankuUnifiedSectionShine 7.8s ease-in-out infinite !important;
}

main > section.media-coverage[data-media-coverage]::before {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background:
        linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,.55) 49%, rgba(244,196,48,.13) 53%, transparent 60%),
        repeating-linear-gradient(118deg, transparent 0 34px, rgba(128,0,128,.05) 35px, transparent 38px),
        radial-gradient(circle at 22% 24%, rgba(128,0,128,.12), transparent 24%),
        radial-gradient(circle at 80% 72%, rgba(244,196,48,.14), transparent 25%) !important;
    background-size: 160% 100%, 220px 220px, 100% 100%, 100% 100% !important;
    background-position: -42% 0, 0 0, center, center !important;
    opacity: .72 !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    animation: bankuUnifiedSectionShine 7.8s ease-in-out infinite !important;
}

main > section:not(.hero)::after {
    top: 34px !important;
    right: max(18px, 4vw) !important;
    bottom: auto !important;
    left: auto !important;
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    background-image: radial-gradient(circle, rgba(128,0,128,.34) 0 2px, transparent 3px) !important;
    background-size: 18px 18px !important;
    opacity: .42 !important;
    filter: drop-shadow(0 18px 34px rgba(128,0,128,.12)) !important;
    transform: none !important;
    box-shadow: none !important;
    animation: bankuUnifiedSectionDots 6.2s ease-in-out infinite !important;
}

main > section.media-coverage[data-media-coverage]::after {
    top: 34px !important;
    right: max(18px, 4vw) !important;
    bottom: auto !important;
    left: auto !important;
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    background-image: radial-gradient(circle, rgba(128,0,128,.34) 0 2px, transparent 3px) !important;
    background-size: 18px 18px !important;
    opacity: .42 !important;
    filter: drop-shadow(0 18px 34px rgba(128,0,128,.12)) !important;
    transform: none !important;
    box-shadow: none !important;
    animation: bankuUnifiedSectionDots 6.2s ease-in-out infinite !important;
}

/* Keep the certificate strip clean above the hero; the unified overlay was washing over the badges. */
main > section.trust-strip {
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    isolation: auto !important;
}

main > section.trust-strip::before,
main > section.trust-strip::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Keep certification logos between sections while starting the next background lower. */
main > section.services {
    background: transparent !important;
    box-shadow: none !important;
}

main > section.services::before {
    top: 92px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--banku-section-bg) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px, 118px auto, 100% 100% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-blend-mode: normal, normal, normal, multiply, multiply, soft-light, normal !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(128,0,128,.055),
        0 18px 58px rgba(80,28,110,.075) !important;
    opacity: 1 !important;
    animation: bankuUnifiedSectionBg 16s ease-in-out infinite alternate !important;
}

main > section.services::after {
    top: 126px !important;
}

/* Match the app-download/footer CTA area with the same unified section background. */
.footer-cta {
    --banku-section-bg:
        radial-gradient(circle at 16% 18%, rgba(128,0,128,.105), transparent 27%),
        radial-gradient(circle at 86% 12%, rgba(244,196,48,.13), transparent 25%),
        radial-gradient(circle at 72% 82%, rgba(156,39,176,.08), transparent 30%),
        linear-gradient(rgba(128,0,128,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.045) 1px, transparent 1px),
        url("../images/BankU_gif/coin_about1.gif"),
        linear-gradient(120deg, rgba(255,255,255,.92), rgba(255,248,239,.92) 42%, rgba(251,247,255,.94) 76%, rgba(255,255,255,.92));
    background: var(--banku-section-bg) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px, 118px auto, 100% 100% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-blend-mode: normal, normal, normal, multiply, multiply, soft-light, normal !important;
    animation: bankuUnifiedSectionBg 16s ease-in-out infinite alternate !important;
}

.footer-app-download {
    background: var(--banku-section-bg) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px, 118px auto, 100% 100% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-blend-mode: normal, normal, normal, multiply, multiply, soft-light, normal !important;
    animation: footerAppPanelFloat 7s ease-in-out infinite, bankuUnifiedSectionBg 16s ease-in-out infinite alternate !important;
}

/* Blend the contact-to-app area so there is no visible section seam. */
main > section.contact {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 18px 58px rgba(80,28,110,.075) !important;
}

.footer-cta {
    margin-top: -2px !important;
    padding-top: 2px !important;
    box-shadow: none !important;
    background-position: 0% -96px, 100% -96px, 70% calc(80% - 96px), 0 -38px, 0 -38px, 92% calc(68% - 96px), center !important;
}

.footer-app-download {
    background-position: 0% -96px, 100% -96px, 70% calc(80% - 96px), 0 -38px, 0 -38px, 92% calc(68% - 96px), center !important;
}

.footer-app-download::before {
    background:
        linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,.5) 49%, rgba(244,196,48,.1) 53%, transparent 60%),
        radial-gradient(circle at 22% 24%, rgba(128,0,128,.1), transparent 24%),
        radial-gradient(circle at 80% 72%, rgba(244,196,48,.12), transparent 25%) !important;
    background-size: 160% 100%, 100% 100%, 100% 100% !important;
    background-position: -42% 0, center, center !important;
    opacity: .5 !important;
    mix-blend-mode: normal !important;
    animation: bankuUnifiedSectionShine 7.8s ease-in-out infinite !important;
}

.footer-app-download::after {
    background: linear-gradient(180deg, transparent, rgba(244,196,48,.045)) !important;
    opacity: .32 !important;
}

@keyframes bankuUnifiedSectionBg {
    0% {
        background-position: 0% 0%, 100% 0%, 70% 80%, 0 0, 0 0, 92% 68%, center;
    }
    100% {
        background-position: 7% 5%, 92% 8%, 64% 72%, 76px 76px, -76px 76px, 88% 58%, center;
    }
}

@keyframes bankuUnifiedSectionShine {
    0%, 60%, 100% {
        background-position: -42% 0, 0 0, center, center;
        opacity: .42;
    }
    78% {
        background-position: 138% 0, 220px 220px, center, center;
        opacity: .78;
    }
}

@keyframes bankuUnifiedSectionDots {
    0%, 100% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(-8px,10px,0);
    }
}

/* Final continuous page background: one surface behind every non-hero section. */
:root {
    --banku-continuous-bg:
        radial-gradient(circle at 16% 18%, rgba(128,0,128,.105), transparent 27%),
        radial-gradient(circle at 86% 12%, rgba(244,196,48,.13), transparent 25%),
        radial-gradient(circle at 72% 82%, rgba(156,39,176,.08), transparent 30%),
        linear-gradient(rgba(128,0,128,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128,0,128,.045) 1px, transparent 1px),
        url("../images/BankU_gif/coin_about1.gif"),
        linear-gradient(120deg, rgba(255,255,255,.92), rgba(255,248,239,.92) 42%, rgba(251,247,255,.94) 76%, rgba(255,255,255,.92));
}

body {
    background: var(--banku-continuous-bg) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 76px 76px, 76px 76px, 118px auto, 100% 100% !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-blend-mode: normal, normal, normal, multiply, multiply, soft-light, normal !important;
    animation: bankuUnifiedPageBg 18s ease-in-out infinite alternate !important;
}

main {
    background: transparent !important;
}

main::before,
main::after,
main > section:not(.hero)::before,
main > section:not(.hero)::after,
.footer-cta::before,
.footer-cta::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

main > section:not(.hero),
main > section.media-coverage[data-media-coverage],
.footer-cta {
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

main > section.media-coverage[data-media-coverage]::before,
main > section.media-coverage[data-media-coverage]::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.footer-app-download {
    background: rgba(255,255,255,.62) !important;
    box-shadow: 0 22px 64px rgba(20,11,38,.12), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.footer-app-download::before,
.footer-app-download::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

@keyframes bankuUnifiedPageBg {
    0% {
        background-position: 0% 0%, 100% 0%, 70% 80%, 0 0, 0 0, 92% 68%, center;
    }
    100% {
        background-position: 7% 5%, 92% 8%, 64% 72%, 76px 76px, -76px 76px, 88% 58%, center;
    }
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    transition: opacity .45s ease, visibility .45s ease;
}

.page-loader img {
    display: block;
    width: min(150px, 32vw);
    height: auto;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .page-loader {
        transition: none;
    }
}

main > section:not(.process-book-section),
.site-footer,
.footer-cta {
    max-width: 100%;
    overflow-x: hidden;
}

.process-book-section {
    max-width: 100%;
    overflow: visible;
}

#process.process-book-section {
    --process-steps: 10;
    min-height: calc((var(--process-steps) * 82vh) + 120vh);
    padding: 0;
    overflow: visible;
}

#process .process-book-pin {
    position: sticky;
    top: 50px;
    min-height: calc(100vh - 92px);
}

@media (max-width: 991px) {
    #process.process-book-section {
        min-height: calc((var(--process-steps) * 76vh) + 110vh);
        padding: 0;
    }

    #process .process-book-pin {
        position: sticky;
        top: 0;
        min-height: 100svh;
    }
}

@media (max-width: 560px) {
    #process.process-book-section {
        min-height: calc((var(--process-steps) * 74vh) + 105vh);
    }
}

/* Retailer dashboard */
body.dash-page {
    min-height: 100vh;
    color: #151023;
    background:
        radial-gradient(circle at 8% 12%, rgba(128,0,128,.08), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(255,156,23,.1), transparent 26%),
        linear-gradient(120deg, #f8f7fb, #fff 52%, #fbf5ff) !important;
    background-size: 100% 100% !important;
    animation: none !important;
}

.dash-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    padding: 8px;
    gap: 0;
}

.dash-sidebar,
.dash-topbar,
.dash-panel,
.dash-kpi,
.dash-promo {
    border: 1px solid rgba(40, 16, 62, .1);
    background: rgba(255,255,255,.82);
    box-shadow: 0 14px 34px rgba(32, 16, 48, .12), inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px);
}

.dash-sidebar {
    position: sticky;
    top: 8px;
    height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 16px 20px;
    border-radius: 20px 0 0 20px;
    background:
        radial-gradient(circle at 18% 8%, rgba(255,156,23,.2), transparent 22%),
        linear-gradient(180deg, rgba(128,0,128,.98), rgba(78,0,92,.98));
}

.dash-sidebar-close {
    display: none;
}

.dash-logo img {
    width: 174px;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(255,255,255,.22));
}

.dash-nav {
    display: grid;
    gap: 7px;
    margin-top: 18px;
    overflow-y: auto;
    padding-right: 2px;
}

.dash-nav > a,
.dash-nav summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 16px;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.dash-nav summary {
    list-style: none;
    cursor: pointer;
}

.dash-nav summary::-webkit-details-marker {
    display: none;
}

.dash-nav > a i,
.dash-nav summary > i:first-child {
    width: 22px;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.dash-nav > a:hover,
.dash-nav summary:hover {
    transform: translateX(2px);
    background: rgba(255,255,255,.12);
}

.dash-nav > a.is-active {
    color: #800080;
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.dash-nav > a.is-active i {
    color: #a400c3;
}

.dash-nav details[open] > summary {
    color: #fff;
    background: rgba(255,255,255,.13);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.dash-nav details[open] > summary > i:first-child {
    color: #fff;
}

.dash-nav-group {
    border-radius: 12px;
}

.dash-nav-chevron {
    width: auto;
    margin-left: auto;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    transition: transform .18s ease, color .18s ease;
}

.dash-nav details[open] .dash-nav-chevron {
    color: #fff;
    transform: rotate(180deg);
}

.dash-subnav {
    display: grid;
    gap: 3px;
    margin: 6px 0 8px 35px;
    padding-left: 13px;
    border-left: 1px solid rgba(255,255,255,.18);
}

.dash-subnav a {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 9px;
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.dash-subnav a:hover {
    transform: translateX(2px);
    color: #fff;
    background: rgba(255,255,255,.1);
}

.dash-support-card {
    margin-top: auto;
    padding: 18px 14px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.18);
}

.dash-support-card i {
    font-size: 35px;
}

.dash-support-card span,
.dash-support-card small {
    display: block;
}

.dash-support-card span {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 800;
}

.dash-support-card strong {
    display: block;
    margin-top: 3px;
    font-size: 21px;
    line-height: 1.1;
}

.dash-support-card small {
    margin-top: 8px;
    opacity: .8;
    font-size: 11px;
}

.dash-content {
    min-width: 0;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    background: rgba(255,255,255,.38);
}

.dash-topbar {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 28px;
    border-radius: 0 20px 0 0;
}

.dash-menu-btn,
.dash-bell,
.dash-profile {
    border: 0;
    cursor: pointer;
}

.dash-menu-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #251338;
    background: transparent;
    font-size: 24px;
}

.dash-search {
    flex: 0 1 470px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 24px rgba(32,16,48,.12), inset 0 1px 0 rgba(255,255,255,.98);
}

.dash-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #22152f;
    background: transparent;
    font-weight: 700;
}

.dash-search button {
    border: 0;
    color: #21162d;
    background: transparent;
    cursor: pointer;
}

.dash-bell {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 50%;
    color: #22152f;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 22px rgba(32,16,48,.12);
    font-size: 23px;
}

.dash-bell span {
    position: absolute;
    right: 5px;
    top: 2px;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #a400c3;
    font-size: 11px;
    font-weight: 900;
}

.dash-retailer {
    padding: 0 22px;
    border-left: 1px solid rgba(40,16,62,.14);
    border-right: 1px solid rgba(40,16,62,.14);
}

.dash-retailer strong,
.dash-retailer span,
.dash-profile strong,
.dash-profile small {
    display: block;
}

.dash-retailer strong {
    font-size: 14px;
}

.dash-retailer span {
    margin-top: 5px;
    color: #5a5362;
    font-size: 13px;
    font-weight: 700;
}

.dash-retailer span i {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    background: #03a63c;
}

.dash-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #20142b;
    background: transparent;
}

.dash-profile > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #8a0095;
    background: radial-gradient(circle at 35% 24%, #f1b5ff, #fff 48%, #ead7f3);
    box-shadow: 0 10px 22px rgba(128,0,128,.22);
    font-size: 29px;
}

.dash-profile strong {
    text-align: left;
    font-size: 14px;
}

.dash-profile small {
    margin-top: 3px;
    color: #554d61;
    font-size: 12px;
    font-weight: 700;
}

.dash-main {
    padding: 20px 28px 14px;
}

.dash-welcome h1 {
    margin: 0;
    color: #11101c;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 900;
}

.dash-welcome p {
    margin: 8px 0 18px;
    color: #51495e;
    font-weight: 600;
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.dash-kpi {
    position: relative;
    min-height: 134px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 12px;
    padding: 20px;
    border-radius: 14px;
}

.dash-kpi-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 12px 22px rgba(0,0,0,.2);
}

.dash-kpi.purple .dash-kpi-icon {
    background: linear-gradient(135deg, #bd18d6, #800080 70%);
}

.dash-kpi.orange .dash-kpi-icon {
    background: linear-gradient(135deg, #ff9c17, #ff5f00 72%);
}

.dash-kpi p {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
}

.dash-kpi h2 {
    margin: 12px 0 10px;
    color: #11101c;
    font-size: 25px;
    line-height: 1;
}

.dash-kpi small {
    color: #03a63c;
    font-weight: 900;
}

.dash-kpi small em {
    color: #2f2938;
    font-style: normal;
    font-weight: 700;
}

.dash-kpi a {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 15px;
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(40,16,62,.08);
    color: #800080;
    font-weight: 900;
}

.dash-kpi.orange a {
    color: #ff5f00;
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.dash-left-stack {
    min-width: 0;
    display: grid;
    gap: 18px;
    align-content: start;
}

.dash-panel {
    border-radius: 14px;
    padding: 16px 18px;
}

.dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dash-panel-head h2 {
    margin: 0;
    color: #11101c;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 900;
}

.dash-panel-head a {
    color: #800080;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.dash-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.dash-service-grid button {
    min-height: 104px;
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 12px 8px;
    border: 1px solid rgba(40,16,62,.09);
    border-radius: 10px;
    color: #11101c;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 18px rgba(32,16,48,.09), inset 0 1px 0 rgba(255,255,255,.95);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dash-service-grid button:hover,
.dash-service-grid button.is-match {
    transform: translateY(-3px);
    box-shadow: 0 13px 24px rgba(128,0,128,.16);
}

.dash-service-grid i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #a400c3;
    background: linear-gradient(135deg, rgba(164,0,195,.1), rgba(255,156,23,.08));
    font-size: 28px;
    box-shadow: 0 8px 18px rgba(128,0,128,.13);
}

.dash-side-stack {
    display: grid;
    gap: 14px;
    align-content: start;
}

.dash-status-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 18px rgba(32,16,48,.08);
}

.dash-status-row > i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #0caf5b;
    font-size: 25px;
    box-shadow: 0 9px 20px rgba(12,175,91,.24);
}

.dash-status-row strong,
.dash-status-row small {
    display: block;
}

.dash-status-row strong {
    color: #0a9b46;
    font-size: 15px;
}

.dash-status-row small {
    margin-top: 4px;
    color: #3f3848;
    font-weight: 700;
}

.dash-transaction-list {
    display: grid;
    gap: 8px;
}

.dash-transaction-list div {
    display: grid;
    grid-template-columns: 42px 1fr auto auto;
    align-items: center;
    gap: 10px;
}

.dash-transaction-list i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #a400c3;
    background: rgba(164,0,195,.1);
    font-size: 18px;
}

.dash-transaction-list span strong,
.dash-transaction-list span small {
    display: block;
}

.dash-transaction-list strong {
    font-size: 13px;
}

.dash-transaction-list small {
    color: #4f465b;
    font-weight: 700;
}

.dash-transaction-list em {
    color: #0a9b46;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.dash-transaction-list b {
    font-size: 13px;
    white-space: nowrap;
}

.dash-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 0;
}

.dash-chart-wrap {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 14px;
}

.dash-chart-stats {
    display: grid;
    align-content: space-around;
    border-right: 1px solid rgba(40,16,62,.09);
    padding-right: 14px;
}

.dash-chart-stats span,
.dash-chart-stats strong {
    display: block;
}

.dash-chart-stats span {
    color: #51495e;
    font-size: 12px;
    font-weight: 700;
}

.dash-chart-stats strong {
    margin-top: 8px;
    color: #11101c;
    font-size: 19px;
    line-height: 1.15;
}

.dash-chart {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 22px;
    column-gap: 8px;
}

.dash-chart-y {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #3f3848;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.dash-chart-x {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    color: #3f3848;
    font-size: 10px;
    font-weight: 800;
}

.dash-chart svg {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-height: 230px;
    display: block;
}

.dash-chart-area {
    fill: url(#dashArea);
}

.dash-chart-line {
    fill: none;
    stroke: #9300ad;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgba(128,0,128,.22));
}

.dash-chart-dots circle {
    r: 6;
    fill: #a400c3;
    stroke: #fff;
    stroke-width: 2;
}

.dash-chart-panel select {
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
    font-weight: 800;
}

.dash-alert-list {
    position: relative;
    height: 172px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.dash-alert-track {
    display: grid;
    gap: 17px;
    animation: dashAlertSlide 13s linear infinite;
}

.dash-alert-list:hover .dash-alert-track {
    animation-play-state: paused;
}

.dash-alert-track a {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 13px;
    align-items: center;
    color: inherit;
    border-radius: 12px;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.dash-alert-track a:hover {
    transform: translateX(3px);
    background: rgba(164,0,195,.05);
    box-shadow: inset 3px 0 0 rgba(164,0,195,.18);
}

.dash-alert-list i {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #a400c3;
    background: rgba(164,0,195,.13);
    font-size: 21px;
    box-shadow: 0 8px 18px rgba(128,0,128,.13);
}

.dash-alert-list strong,
.dash-alert-list small {
    display: block;
}

.dash-alert-list strong {
    font-size: 13px;
}

.dash-alert-list small {
    margin-top: 5px;
    color: #504758;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

@keyframes dashAlertSlide {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-50% - 8.5px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-alert-track {
        animation: none;
    }
}

.dash-promo {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: 14px;
    color: #fff;
    background: #800080;
}

.dash-promo img {
    width: 100%;
    height: 100%;
    min-height: 176px;
    object-fit: cover;
    filter: none;
}

.dash-footer {
    margin-top: 14px;
    color: #51495e;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1080px) {
    .dash-shell {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .dash-sidebar {
        padding: 16px 10px;
    }

    .dash-logo img,
    .dash-nav span,
    .dash-support-card span,
    .dash-support-card strong,
    .dash-support-card small {
        display: none;
    }

    .dash-nav > a,
    .dash-nav summary {
        justify-content: center;
        padding: 0;
    }

    .dash-nav-chevron,
    .dash-subnav {
        display: none;
    }

    .dash-support-card {
        display: grid;
        place-items: center;
        padding: 14px 0;
    }
}

@media (max-width: 1080px) {
    .dash-kpis,
    .dash-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-promo {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    body.dash-menu-open {
        overflow: hidden;
    }

    .dash-shell {
        display: block;
        padding: 0;
    }

    .dash-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        width: 270px;
        height: 100vh;
        border-radius: 0 20px 20px 0;
        transform: translateX(-105%);
        transition: transform .25s ease;
    }

    .dash-sidebar-close {
        position: absolute;
        top: 16px;
        right: 14px;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 50%;
        color: #fff;
        background: rgba(255,255,255,.12);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px rgba(0,0,0,.18);
        cursor: pointer;
    }

    body.dash-menu-open .dash-sidebar {
        transform: translateX(0);
    }

    .dash-logo img,
    .dash-nav span,
    .dash-support-card span,
    .dash-support-card strong,
    .dash-support-card small {
        display: block;
    }

    .dash-nav > a,
    .dash-nav summary {
        justify-content: flex-start;
        padding: 0 16px;
    }

    .dash-nav-chevron {
        display: inline-block;
    }

    .dash-subnav {
        display: grid;
    }

    .dash-content {
        border-radius: 0;
        overflow: visible;
    }

    .dash-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        min-height: auto;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px;
        border-radius: 0;
    }

    .dash-search {
        order: 5;
        flex-basis: 100%;
    }

    .dash-retailer {
        display: none;
    }

    .dash-profile strong {
        display: none;
    }

    .dash-main {
        padding: 16px 12px;
    }

    .dash-kpis,
    .dash-bottom-grid {
        grid-template-columns: 1fr;
    }

    .dash-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-chart-wrap {
        grid-template-columns: 1fr;
    }

    .dash-chart-stats {
        grid-template-columns: 1fr;
        gap: 8px;
        border-right: 0;
        padding-right: 0;
    }

    .dash-chart-stats span {
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(164, 0, 195, .045);
        box-shadow: inset 0 0 0 1px rgba(40, 16, 62, .06);
    }

    .dash-chart-stats strong {
        margin-top: 4px;
        font-size: 18px;
        line-height: 1.1;
    }

    .dash-promo {
        min-height: 0;
    }

    .dash-promo img {
        width: 100%;
        min-height: 150px;
        margin-top: 0;
    }
}

@media (min-width: 1081px) {
    body.dash-page {
        overflow: hidden;
    }

    .dash-shell {
        height: 100vh;
        min-height: 0;
        grid-template-columns: 248px minmax(0, 1fr);
        padding: 6px;
    }

    .dash-sidebar {
        top: 6px;
        height: calc(100vh - 12px);
        padding: 15px 14px 14px;
        border-radius: 18px 0 0 18px;
    }

    .dash-logo img {
        width: 150px;
    }

    .dash-nav {
        gap: 4px;
        margin-top: 14px;
    }

    .dash-nav > a,
    .dash-nav summary {
        min-height: 34px;
        gap: 11px;
        padding: 0 13px;
        border-radius: 10px;
        font-size: 12px;
    }

    .dash-nav > a i,
    .dash-nav summary > i:first-child {
        width: 18px;
        font-size: 17px;
    }

    .dash-support-card {
        padding: 13px 12px;
        border-radius: 12px;
    }

    .dash-support-card i {
        font-size: 29px;
    }

    .dash-support-card span {
        margin-top: 5px;
        font-size: 11px;
    }

    .dash-support-card strong {
        font-size: 17px;
    }

    .dash-support-card small {
        margin-top: 5px;
        font-size: 9px;
    }

    .dash-content {
        height: calc(100vh - 12px);
        overflow: hidden;
        border-radius: 0 18px 18px 0;
    }

    .dash-topbar {
        min-height: 72px;
        gap: 17px;
        padding: 8px 26px;
    }

    .dash-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 21px;
    }

    .dash-search {
        flex-basis: 470px;
        min-height: 42px;
        gap: 10px;
        padding: 0 14px;
        border-radius: 13px;
        font-size: 13px;
    }

    .dash-bell {
        width: 43px;
        height: 43px;
        font-size: 20px;
    }

    .dash-bell span {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .dash-retailer {
        padding: 0 18px;
    }

    .dash-retailer strong,
    .dash-profile strong {
        font-size: 13px;
    }

    .dash-retailer span,
    .dash-profile small {
        font-size: 11px;
    }

    .dash-profile > span {
        width: 48px;
        height: 48px;
        font-size: 25px;
    }

    .dash-main {
        height: calc(100vh - 72px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px 26px 8px;
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 0, 128, .28) transparent;
    }

    .dash-welcome h1 {
        font-size: 22px;
    }

    .dash-welcome p {
        margin: 6px 0 15px;
        font-size: 13px;
    }

    .dash-kpis {
        gap: 16px;
        margin-bottom: 14px;
    }

    .dash-kpi {
        min-height: 112px;
        grid-template-columns: 60px 1fr;
        gap: 10px;
        padding: 17px;
        border-radius: 13px;
    }

    .dash-kpi-icon {
        width: 56px;
        height: 56px;
        font-size: 27px;
    }

    .dash-kpi p {
        font-size: 11px;
    }

    .dash-kpi h2 {
        margin: 10px 0 8px;
        font-size: 21px;
    }

    .dash-kpi small {
        font-size: 11px;
    }

    .dash-kpi a {
        left: 17px;
        right: 17px;
        bottom: 12px;
        padding-top: 11px;
        font-size: 13px;
    }

    .dash-grid {
        grid-template-columns: minmax(0, 1.85fr) minmax(318px, .82fr);
        gap: 14px;
        margin-bottom: 14px;
    }

    .dash-left-stack {
        gap: 14px;
    }

    .dash-panel {
        padding: 14px 16px;
        border-radius: 13px;
    }

    .dash-panel-head {
        margin-bottom: 11px;
    }

    .dash-panel-head h2 {
        font-size: 17px;
    }

    .dash-panel-head a {
        font-size: 12px;
    }

    .dash-service-grid {
        gap: 12px;
    }

    .dash-service-grid button {
        min-height: 86px;
        gap: 7px;
        padding: 9px 7px;
        font-size: 11px;
    }

    .dash-service-grid i {
        width: 43px;
        height: 43px;
        font-size: 23px;
    }

    .dash-side-stack {
        gap: 12px;
    }

    .dash-status-row {
        gap: 12px;
        padding: 8px;
    }

    .dash-status-row > i {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .dash-status-row strong {
        font-size: 13px;
    }

    .dash-status-row small {
        font-size: 11px;
    }

    .dash-transaction-list {
        gap: 7px;
    }

    .dash-transaction-list div {
        grid-template-columns: 37px 1fr auto auto;
        gap: 8px;
    }

    .dash-transaction-list i {
        width: 31px;
        height: 31px;
        font-size: 15px;
    }

    .dash-transaction-list strong,
    .dash-transaction-list b {
        font-size: 11px;
    }

    .dash-transaction-list small,
    .dash-transaction-list em {
        font-size: 10px;
    }

    .dash-bottom-grid {
        grid-template-columns: minmax(330px, 1.2fr) minmax(230px, .8fr);
        gap: 14px;
    }

    .dash-chart-wrap {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 12px;
    }

    .dash-chart-stats {
        padding-right: 12px;
    }

    .dash-chart-stats span {
        font-size: 10px;
    }

    .dash-chart-stats strong {
        margin-top: 6px;
        font-size: 16px;
    }

    .dash-chart svg {
        min-height: 200px;
        max-height: 210px;
    }

    .dash-chart-panel select {
        padding: 6px 10px;
        font-size: 11px;
    }

    .dash-alert-list {
        height: 154px;
    }

    .dash-alert-track {
        gap: 13px;
    }

    .dash-alert-track a {
        grid-template-columns: 40px 1fr;
        gap: 11px;
    }

    .dash-alert-list i {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .dash-alert-list strong {
        font-size: 11px;
    }

    .dash-alert-list small {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.35;
    }

    .dash-promo {
        min-height: 178px;
        padding: 0;
    }

    .dash-promo img {
        width: 100%;
        min-height: 178px;
    }

    .dash-footer {
        margin-top: 8px;
        font-size: 10px;
    }
}

@media (min-width: 1081px) {
    .dash-sidebar {
        padding: 13px 13px 12px;
    }

    .dash-logo img {
        width: 142px;
    }

    .dash-nav {
        gap: 3px;
        margin-top: 12px;
    }

    .dash-nav > a,
    .dash-nav summary {
        min-height: 32px;
        padding: 0 12px;
        font-size: 11px;
        font-weight: 750;
    }

    .dash-nav > a i,
    .dash-nav summary > i:first-child {
        font-size: 16px;
    }

    .dash-support-card {
        padding: 11px;
    }

    .dash-support-card i {
        font-size: 27px;
    }

    .dash-support-card span {
        font-size: 10px;
    }

    .dash-support-card strong {
        font-size: 16px;
    }

    .dash-topbar {
        min-height: 66px;
        gap: 15px;
        padding: 7px 24px;
    }

    .dash-search {
        min-height: 39px;
        font-size: 12px;
    }

    .dash-bell {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .dash-retailer strong,
    .dash-profile strong {
        font-size: 12px;
    }

    .dash-retailer span,
    .dash-profile small {
        font-size: 10px;
    }

    .dash-profile > span {
        width: 44px;
        height: 44px;
        font-size: 23px;
    }

    .dash-main {
        height: calc(100vh - 66px);
        padding: 13px 24px 7px;
    }

    .dash-welcome h1 {
        font-size: 19px;
        font-weight: 850;
    }

    .dash-welcome p {
        margin: 5px 0 12px;
        font-size: 11px;
    }

    .dash-kpis {
        gap: 14px;
        margin-bottom: 12px;
    }

    .dash-kpi {
        min-height: 106px;
        grid-template-columns: 54px 1fr;
        gap: 9px;
        padding: 15px;
    }

    .dash-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .dash-kpi p {
        font-size: 10px;
    }

    .dash-kpi h2 {
        margin: 8px 0 7px;
        font-size: 18px;
    }

    .dash-kpi small {
        font-size: 10px;
    }

    .dash-grid,
    .dash-left-stack,
    .dash-side-stack,
    .dash-bottom-grid {
        gap: 12px;
    }

    .dash-panel {
        padding: 12px 14px;
    }

    .dash-panel-head {
        margin-bottom: 9px;
    }

    .dash-panel-head h2 {
        font-size: 15px;
        font-weight: 850;
    }

    .dash-panel-head a {
        font-size: 11px;
    }

    .dash-service-grid {
        gap: 10px;
    }

    .dash-service-grid button {
        min-height: 80px;
        gap: 6px;
        font-size: 10px;
        font-weight: 800;
    }

    .dash-service-grid i {
        width: 39px;
        height: 39px;
        font-size: 21px;
    }

    .dash-status-row {
        gap: 10px;
        padding: 7px;
    }

    .dash-status-row > i {
        width: 39px;
        height: 39px;
        font-size: 20px;
    }

    .dash-status-row strong {
        font-size: 11px;
    }

    .dash-status-row small {
        font-size: 10px;
    }

    .dash-transaction-list {
        gap: 6px;
    }

    .dash-transaction-list div {
        grid-template-columns: 34px 1fr auto auto;
        gap: 7px;
    }

    .dash-transaction-list i {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .dash-transaction-list strong,
    .dash-transaction-list b {
        font-size: 10px;
    }

    .dash-transaction-list small,
    .dash-transaction-list em {
        font-size: 9px;
    }

    .dash-bottom-grid {
        grid-template-columns: minmax(330px, 1.2fr) minmax(230px, .8fr);
    }

    .dash-chart-wrap {
        grid-template-columns: 122px minmax(0, 1fr);
        gap: 10px;
    }

    .dash-chart-stats {
        padding-right: 10px;
    }

    .dash-chart-stats span {
        font-size: 9px;
    }

    .dash-chart-stats strong {
        margin-top: 5px;
        font-size: 14px;
    }

    .dash-chart-y {
        font-size: 9px;
    }

    .dash-chart-x {
        font-size: 8px;
    }

    .dash-chart svg {
        min-height: 184px;
        max-height: 190px;
    }

    .dash-chart-panel select {
        padding: 5px 9px;
        font-size: 10px;
    }

    .dash-alert-list {
        height: 138px;
    }

    .dash-alert-track {
        gap: 10px;
    }

    .dash-alert-track a {
        grid-template-columns: 36px 1fr;
        gap: 9px;
    }

    .dash-alert-list i {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .dash-alert-list strong {
        font-size: 10px;
    }

    .dash-alert-list small {
        margin-top: 3px;
        font-size: 9px;
        line-height: 1.35;
    }

    .dash-promo {
        height: 150px;
        min-height: 150px;
        background: transparent;
    }

    .dash-promo img {
        height: 150px;
        min-height: 0;
        object-fit: contain;
        background: #800080;
    }

    .dash-footer {
        margin-top: 6px;
        font-size: 9px;
    }
}

/* Dashboard polish: keeps layout stable when headings use p tags */
.dash-main p,
.dash-panel p {
    margin-block-start: 0;
}

.dash-welcome > * {
    margin: 0;
}

.dash-welcome > :first-child {
    color: #151022;
    font-size: 20px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: 0;
}

.dash-welcome > :last-child {
    margin-top: 6px;
    margin-bottom: 14px;
    color: #51495e;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.dash-panel-head {
    align-items: center;
}

.dash-panel-head > :first-child {
    margin: 0;
    color: #151022;
    font-size: 17px;
    line-height: 1.18;
    font-weight: 760;
    letter-spacing: 0;
}

.dash-panel-head a {
    margin-left: auto;
}

.dash-kpi p,
.dash-kpi h2 {
    margin-block-start: 0;
}

.dash-kpi p {
    line-height: 1.2;
    font-weight: 760;
}

.dash-kpi h2 {
    font-weight: 800;
    letter-spacing: 0;
}

.dash-panel,
.dash-kpi,
.dash-service-grid button,
.dash-status-row,
.dash-promo {
    box-shadow: 0 10px 26px rgba(32, 16, 48, .095), inset 0 1px 0 rgba(255,255,255,.96);
}

.dash-service-grid button,
.dash-transaction-list strong,
.dash-alert-list strong {
    font-weight: 760;
}

.dash-alert-list {
    mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.dash-promo {
    background: #800080;
}

.dash-promo img {
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 1081px) {
    .dash-welcome > :first-child {
        font-size: 19px;
        font-weight: 800;
    }

    .dash-welcome > :last-child {
        margin-top: 5px;
        margin-bottom: 11px;
        font-size: 11px;
    }

    .dash-panel {
        padding: 11px 13px;
    }

    .dash-panel-head {
        margin-bottom: 8px;
    }

    .dash-panel-head > :first-child {
        font-size: 14px;
        font-weight: 800;
    }

    .dash-panel-head a {
        font-size: 10px;
        font-weight: 760;
    }

    .dash-kpis {
        margin-bottom: 11px;
    }

    .dash-kpi {
        min-height: 101px;
        padding: 14px;
    }

    .dash-service-grid button {
        min-height: 76px;
        font-weight: 750;
    }

    .dash-status-row {
        padding: 6px;
    }

    .dash-alert-list {
        height: 132px;
    }

    .dash-promo {
        height: 136px;
        min-height: 136px;
        background: #800080;
    }

    .dash-promo img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: center;
        background: transparent;
    }
}

/* Our Services 3D finish */
.dash-services {
    border: 1px solid rgba(44, 32, 48, .1);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,244,243,.94));
    box-shadow:
        0 13px 0 rgba(88, 80, 86, .22),
        0 22px 28px rgba(36, 28, 40, .15),
        inset 2px 2px 0 rgba(255,255,255,.96),
        inset -5px -6px 14px rgba(60, 48, 64, .08);
}

.dash-service-grid button {
    min-height: 104px;
    border: 1px solid rgba(44, 32, 48, .12);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,245,245,.94));
    box-shadow:
        0 12px 0 rgba(90, 82, 88, .24),
        0 18px 24px rgba(36, 28, 40, .14),
        inset 2px 2px 0 rgba(255,255,255,.95),
        inset -5px -6px 12px rgba(60, 48, 64, .09);
    transform: translateY(0);
}

.dash-service-grid button:hover,
.dash-service-grid button.is-match {
    transform: translateY(-2px);
    box-shadow:
        0 14px 0 rgba(90, 82, 88, .22),
        0 24px 30px rgba(128, 0, 128, .15),
        inset 2px 2px 0 rgba(255,255,255,.96),
        inset -5px -6px 12px rgba(60, 48, 64, .09);
}

.dash-service-grid i {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #b300d4;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.95), rgba(255,255,255,.42) 28%, transparent 31%),
        linear-gradient(145deg, #f7d9ff 0%, #e8b7f0 55%, #d5a0df 100%);
    box-shadow:
        0 9px 0 #a581af,
        0 16px 18px rgba(88, 40, 96, .2),
        inset 2px 2px 0 rgba(255,255,255,.76),
        inset -5px -6px 11px rgba(96, 0, 112, .2);
    text-shadow: 0 2px 0 rgba(255,255,255,.42);
}

@media (min-width: 1081px) {
    .dash-service-grid button {
        min-height: 88px;
    }

    .dash-service-grid i {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 760px) {
    .dash-services {
        box-shadow:
            0 9px 0 rgba(88, 80, 86, .18),
            0 17px 22px rgba(36, 28, 40, .12),
            inset 2px 2px 0 rgba(255,255,255,.96),
            inset -5px -6px 14px rgba(60, 48, 64, .08);
    }

    .dash-service-grid button {
        min-height: 112px;
    }
}

/* Partner login page */
body.login-page {
    min-height: 100vh;
    color: #fff;
    background:
        radial-gradient(circle at 18% 26%, rgba(128, 0, 128, .78), transparent 31%),
        radial-gradient(circle at 83% 64%, rgba(244, 112, 55, .58), transparent 31%),
        radial-gradient(circle at 100% 0%, rgba(188, 45, 143, .72), transparent 30%),
        linear-gradient(135deg, #16041e 0%, #26002e 48%, #390650 100%) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    animation: none !important;
}

body.login-page main,
body.login-page .login-main {
    background: transparent !important;
}

body.login-page .login-main::before,
body.login-page .login-main::after,
body.login-page .login-hero::before,
body.login-page .login-hero::after {
    content: none !important;
    display: none !important;
}

.login-hero {
    min-height: 100vh;
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 18% 26%, rgba(128, 0, 128, .78), transparent 31%),
        radial-gradient(circle at 83% 64%, rgba(244, 112, 55, .58), transparent 31%),
        radial-gradient(circle at 100% 0%, rgba(188, 45, 143, .72), transparent 30%),
        linear-gradient(135deg, #16041e 0%, #26002e 48%, #390650 100%);
}

.login-hero .grid-light {
    opacity: .68;
    background-size: 86px 86px;
    mask-image: none;
}

.login-hero .blob {
    opacity: .42;
    filter: blur(56px);
}

.login-hero .blob-one {
    left: -130px;
    top: 120px;
    background: #800080;
}

.login-hero .blob-two {
    right: -150px;
    top: -70px;
    background: #ff3dc8;
}

.login-hero .blob-three {
    left: 59%;
    bottom: -190px;
    background: #f47037;
}

.login-hero .orbit {
    opacity: .32;
}

.login-shell {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 430px);
    gap: clamp(24px, 3.2vw, 50px);
    align-items: stretch;
    padding: clamp(18px, 2.1vw, 28px) clamp(24px, 3.5vw, 44px);
}

.login-left {
    position: relative;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 10px;
}

.login-brand {
    width: fit-content;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    line-height: 1;
}

.login-brand img {
    width: clamp(155px, 14vw, 230px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(255,255,255,.16));
    animation: loginFloat 4.8s ease-in-out infinite;
}

.login-gif-accent {
    position: absolute;
    left: min(38vw, 560px);
    top: 18%;
    width: clamp(72px, 8vw, 116px);
    height: auto;
    opacity: .32;
    mix-blend-mode: screen;
    pointer-events: none;
    filter: drop-shadow(0 0 26px rgba(255, 209, 102, .55));
    animation: loginDrift 8s ease-in-out infinite;
}

.login-brand-bank {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    color: rgba(255,255,255,.78);
    font-size: clamp(38px, 3.8vw, 58px);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 0 16px rgba(255,255,255,.14);
}

.login-brand-bank span {
    position: relative;
    color: #fff;
}

.login-brand-bank span::after {
    content: "";
    position: absolute;
    right: -.31em;
    top: -.05em;
    width: .33em;
    height: .72em;
    border-top: .1em solid #fff;
    border-right: .1em solid #fff;
    border-radius: 0 .12em 0 0;
    transform: rotate(-42deg);
}

.login-brand-seva {
    margin-top: 4px;
    color: #050006;
    font-size: clamp(36px, 3.7vw, 56px);
    font-weight: 900;
    letter-spacing: 0;
}

.login-left-center {
    margin: auto 0 6vh;
}

.login-left h1 {
    max-width: 760px;
    margin: 0 0 34px;
    color: rgba(255,255,255,.82);
    text-align: left;
    font-size: clamp(30px, 2.65vw, 43px);
    line-height: 1.32;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 18px 52px rgba(0,0,0,.34), 0 0 22px rgba(255,255,255,.08);
    animation: loginFadeUp .72s ease both;
}

.login-stats {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.login-stat {
    position: relative;
    min-width: 208px;
    padding: 0 24px;
    text-align: left;
    transition: transform .25s ease, filter .25s ease;
}

.login-stat:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 12px 22px rgba(255,255,255,.13));
}

.login-stat:first-child {
    padding-left: 0;
}

.login-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 0;
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,.3);
}

.login-stat strong,
.login-stat span {
    display: block;
}

.login-stat strong {
    color: #fff;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.25;
    font-weight: 900;
}

.login-stat span {
    margin-top: 2px;
    color: #fff;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.35;
    font-weight: 600;
}

.login-download {
    padding-left: 18px;
    animation: loginFadeUp .78s ease .08s both;
}

.login-download h2 {
    margin: 0 0 10px;
    color: rgba(255,255,255,.7);
    font-size: clamp(14px, 1vw, 18px);
    line-height: 1.2;
    font-weight: 900;
}

.login-store-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(12px, 2.1vw, 30px);
}

.login-store-badge {
    min-width: clamp(170px, 12vw, 198px);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 5px;
    color: #fff;
    background: #030303;
    box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.login-store-badge:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 18px 36px rgba(0,0,0,.32), 0 0 22px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2);
}

.login-store-badge i {
    font-size: 30px;
}

.login-store-badge img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.login-store-badge .fa-google-play {
    color: #26d58a;
}

.login-store-badge em,
.login-store-badge strong {
    display: block;
    line-height: 1;
}

.login-store-badge em {
    font-style: normal;
    font-size: 10px;
    letter-spacing: .02em;
}

.login-store-badge strong {
    margin-top: 3px;
    font-size: clamp(18px, 1.35vw, 23px);
    font-weight: 800;
}

.login-card {
    align-self: center;
    width: min(100%, 430px);
    min-height: min(680px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    padding: clamp(18px, 2vw, 28px) 14px 18px;
    border-radius: 34px;
    color: #210a3d;
    background: rgba(255,255,255,.98);
    box-shadow: 0 0 38px rgba(255,255,255,.26), 0 34px 98px rgba(38,5,55,.44), inset 0 1px 0 rgba(255,255,255,.9);
    animation: loginCardIn .64s cubic-bezier(.2,.8,.2,1) both;
}

.login-mobile-brand {
    display: none;
}

.login-mobile-brand img {
    width: clamp(145px, 44vw, 210px);
    height: auto;
    margin: 0 auto 16px;
    object-fit: contain;
}

.login-card-panel {
    position: relative;
    overflow: hidden;
    min-height: 545px;
    padding: clamp(22px, 2vw, 28px) clamp(22px, 2.2vw, 30px) 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.8), rgba(252,241,255,.86)),
        radial-gradient(circle at 28% 2%, rgba(255,255,255,.96), transparent 44%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.login-card-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 0 36%, rgba(255,255,255,.54) 46%, transparent 58%);
    transform: translateX(-115%);
    animation: loginPanelShine 5.4s ease-in-out infinite;
    pointer-events: none;
}

.login-card h2 {
    margin: 0;
    color: #220939;
    font-size: clamp(21px, 1.55vw, 26px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0;
}

.login-card-panel > p {
    margin: 7px 0 22px;
    color: #5d4b74;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.35;
    font-weight: 700;
}

.login-field {
    margin-bottom: 22px;
}

.login-field label,
.login-field-top label {
    display: block;
    color: #28113e;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
}

.login-field > label {
    margin-bottom: 8px;
}

.login-field-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.login-field-top a {
    color: #9d00bf;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    white-space: nowrap;
}

.login-input {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(59, 28, 85, .12);
    border-radius: 10px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 19px rgba(39, 14, 61, .1), inset 0 1px 0 rgba(255,255,255,.9);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.login-input:focus-within {
    border-color: rgba(154, 0, 190, .42);
    box-shadow: 0 12px 28px rgba(128,0,128,.16), 0 0 0 4px rgba(154,0,190,.08), inset 0 1px 0 rgba(255,255,255,.96);
    transform: translateY(-1px);
}

.login-input i {
    flex: 0 0 auto;
    width: 18px;
    color: #74518d;
    font-size: 14px;
    text-align: center;
}

.login-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #2e1649;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.login-input input::placeholder {
    color: #7f748c;
}

.login-password-toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    color: #74518d;
    background: transparent;
    cursor: pointer;
}

.login-password-toggle i {
    width: auto;
}

.login-error {
    min-height: 15px;
    display: block;
    margin-top: 5px;
    color: #d52424;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
}

.login-captcha {
    margin: -4px 0 20px;
}

.login-captcha-row {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(86px, .9fr) 44px;
    gap: 9px;
    align-items: stretch;
}

.login-captcha-box,
.login-captcha-refresh {
    min-height: 42px;
    border: 1px solid rgba(59, 28, 85, .12);
    border-radius: 10px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 19px rgba(39, 14, 61, .1), inset 0 1px 0 rgba(255,255,255,.9);
}

.login-captcha-question {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    color: #28113e;
}

.login-captcha-question i {
    color: #74518d;
    font-size: 16px;
}

.login-captcha-question strong {
    color: #9200ad;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.login-captcha-answer {
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.login-captcha-answer input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #2e1649;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.login-captcha-answer input::placeholder {
    color: #7f748c;
}

.login-captcha-refresh {
    display: grid;
    place-items: center;
    padding: 0;
    color: #8a00aa;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.login-captcha-refresh:hover {
    transform: translateY(-1px);
    border-color: rgba(154, 0, 190, .28);
    box-shadow: 0 12px 26px rgba(128,0,128,.14), inset 0 1px 0 rgba(255,255,255,.96);
}

.login-captcha-refresh i {
    width: auto;
    font-size: 15px;
}

.login-step {
    position: relative;
}

.login-step.is-loading .partner-login-form {
    opacity: .2;
    pointer-events: none;
}

.login-otp-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-content: center;
    justify-items: center;
    gap: 10px;
    color: #7d008f;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    background: rgba(255,255,255,.9);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 34px rgba(128,0,128,.12);
    backdrop-filter: blur(6px);
    z-index: 20;
}

.login-step.is-loading .login-otp-loader {
    display: grid;
}

.login-otp-loader img {
    width: 92px;
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(128,0,128,.22));
}

.login-otp-step {
    position: relative;
    display: none;
    padding-top: 34px;
}

.login-otp-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(128,0,128,.14);
    border-radius: 50%;
    color: #800080;
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 22px rgba(128,0,128,.1), inset 0 1px 0 rgba(255,255,255,.9);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.login-otp-back:hover {
    transform: translateX(-2px);
    background: #fff;
    box-shadow: 0 14px 28px rgba(128,0,128,.16), 0 0 16px rgba(255,156,23,.14);
}

.login-card-panel.is-otp > h2,
.login-card-panel.is-otp > p,
.login-card-panel.is-otp .login-step,
.login-card-panel.is-otp .login-divider,
.login-card-panel.is-otp .login-empty-panel,
.login-card-panel.is-otp .login-register {
    display: none;
}

.login-card-panel.is-otp .login-otp-step {
    display: block;
}

.login-card-panel.is-otp {
    background:
        radial-gradient(circle at 14% 12%, rgba(255,156,23,.08), transparent 28%),
        radial-gradient(circle at 86% 78%, rgba(128,0,128,.08), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(253,242,255,.9));
}

.login-otp-step h2 {
    margin: 0 0 18px;
    color: #290538;
    font-size: clamp(23px, 1.7vw, 28px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0;
}

.login-otp-step p {
    margin: 0 0 20px;
    color: #74518d;
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.35;
    font-weight: 800;
}

.login-otp-step p button {
    padding: 0;
    border: 0;
    color: #9200ad;
    background: transparent;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.login-otp-boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.login-otp-boxes input {
    width: 100%;
    aspect-ratio: 1 / .92;
    border: 0;
    border-bottom: 1px solid rgba(128,0,128,.35);
    outline: 0;
    color: #290538;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(252,241,255,.82));
    text-align: center;
    font-size: 18px;
    font-weight: 900;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.login-otp-boxes input:focus {
    border-bottom-color: #ff9c17;
    background: #fff;
    box-shadow: 0 10px 24px rgba(128,0,128,.12), 0 0 0 3px rgba(255,156,23,.12);
}

.login-resend {
    display: inline-flex;
    margin: 0 0 48px;
    padding: 0;
    border: 0;
    color: #9200ad;
    background: transparent;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
}

.login-otp-submit {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(90deg, #a400c3, #800080 72%, #6f006f);
    box-shadow: 0 14px 28px rgba(128,0,128,.24), 0 0 20px rgba(255,156,23,.12);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.login-otp-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(128,0,128,.32), 0 0 26px rgba(255,156,23,.18);
}

.login-submit {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(90deg, #a400c3, #7d008f);
    box-shadow: 0 10px 22px rgba(126,0,150,.28);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

.login-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.38) 48%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .5s ease;
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(126,0,150,.34), 0 0 24px rgba(184,0,212,.22);
}

.login-submit:hover::before {
    transform: translateX(120%);
}

.login-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    margin: 24px 0 18px;
    color: #6f637c;
    font-size: 11px;
    font-weight: 900;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    background: rgba(70, 36, 93, .14);
}

.login-empty-panel {
    min-height: 50px;
    display: grid;
    place-items: center;
    margin: 0 -18px 22px;
    background: rgba(251, 237, 255, .7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 24px rgba(128,0,128,.08);
}

.login-empty-panel a {
    display: block;
    color: #9400a5;
    font-size: clamp(28px, 2.55vw, 40px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .02em;
    white-space: nowrap;
    text-shadow: 0 8px 20px rgba(148,0,165,.18);
    animation: loginPulseText 2.8s ease-in-out infinite;
}

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

@keyframes loginDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(14px, -18px, 0) rotate(8deg);
    }
}

@keyframes loginFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateX(28px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes loginPanelShine {
    0%, 52%, 100% {
        transform: translateX(-115%);
        opacity: 0;
    }
    64% {
        opacity: .58;
    }
    82% {
        transform: translateX(115%);
        opacity: 0;
    }
}

@keyframes loginPulseText {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(148,0,165,0));
    }
    50% {
        transform: scale(1.025);
        filter: drop-shadow(0 0 14px rgba(148,0,165,.22));
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-brand img,
    .login-gif-accent,
    .login-left h1,
    .login-download,
    .login-card,
    .login-card-panel::before,
    .login-empty-panel a {
        animation: none !important;
    }

    .login-stat,
    .login-store-badge,
    .login-input,
    .login-submit {
        transition: none !important;
    }
}

.login-register {
    margin: 0;
    color: #443553;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 900;
}

.login-register a,
.login-legal a {
    color: #9900b8;
    font-weight: 900;
}

.login-legal {
    margin: 18px 12px 0;
    color: #9a939f;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
}

@media (max-width: 1180px) {
    .login-shell {
        grid-template-columns: minmax(0, 1fr);
        place-items: center;
        align-items: center;
        padding: 24px 18px;
    }

    .login-left {
        display: none;
    }

    .login-card {
        margin: 0 auto;
        width: min(100%, 430px);
    }

    .login-mobile-brand {
        display: block;
    }
}

@media (max-width: 760px) {
    .login-shell {
        min-height: 100svh;
        padding: 18px 12px;
    }

    .login-hero {
        min-height: 100svh;
        overflow-y: auto;
    }

    .login-card {
        width: min(100%, 390px);
        min-height: auto;
        margin: 0 auto;
        padding: 14px 10px 18px;
        border-radius: 26px;
    }

    .login-card-panel {
        min-height: auto;
        padding: 20px 14px 22px;
    }

    .login-card h2 {
        font-size: 21px;
    }

    .login-card-panel > p {
        margin-bottom: 18px;
        font-size: 14px;
    }

    .login-field {
        margin-bottom: 18px;
    }

    .login-input {
        min-height: 42px;
    }

    .login-captcha {
        margin-bottom: 18px;
    }

    .login-captcha-row {
        grid-template-columns: minmax(92px, 1fr) minmax(76px, .85fr) 42px;
        gap: 7px;
    }

    .login-captcha-question {
        gap: 7px;
        padding: 0 10px;
    }

    .login-captcha-question strong {
        font-size: 14px;
    }

    .login-otp-step h2 {
        font-size: 23px;
    }

    .login-otp-step p {
        font-size: 14px;
    }

    .login-otp-boxes {
        gap: 8px;
    }

    .login-resend {
        margin-bottom: 36px;
        font-size: 14px;
    }

    .login-divider {
        margin: 20px 0 16px;
    }

    .login-empty-panel {
        min-height: 42px;
        margin-bottom: 18px;
    }

    .login-empty-panel a {
        font-size: clamp(26px, 8vw, 34px);
    }

    .login-register {
        font-size: 12px;
    }

    .login-legal {
        margin-top: 18px;
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .login-shell {
        padding: 12px 10px;
    }

    .login-card {
        width: 100%;
        padding: 12px 8px 16px;
        border-radius: 22px;
    }

    .login-card-panel {
        padding: 18px 12px 20px;
    }

    .login-card h2 {
        font-size: 20px;
    }

    .login-input input {
        font-size: 12px;
    }
}