/* =========================================================
   UPIPOINT
   Main Website Styles
========================================================= */

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

:root {
    --bg: #f7faff;
    --card: #ffffff;
    --text: #0d1b3d;
    --muted: #60708f;

    --line: #e3eaf5;

    --blue: #1267f5;
    --blue2: #1688ff;

    --green: #16a86b;
    --orange: #ff8b22;
    --purple: #8758e8;
    --pink: #ff5269;
    --cyan: #09a3bd;

    --soft: #eef5ff;

    --shadow:
        0 18px 60px rgba(27, 58, 115, .09);

    --shadow-small:
        0 8px 30px rgba(29, 61, 111, .06);

    --radius: 18px;

    --container: 1320px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.5;
}

img {
    max-width: 100%;
}

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

button,
input {
    font: inherit;
}


/* =========================================================
   HEADER
========================================================= */

.topbar {
    position: sticky;
    top: 0;

    z-index: 100;

    background:
        rgba(255, 255, 255, .94);

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(218, 226, 240, .85);
}

.nav-shell {
    max-width: var(--container);

    height: 78px;

    margin: auto;

    padding:
        0 24px;

    display: flex;
    align-items: center;

    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
}

.brand img {
    width: 190px;
    height: auto;
    display: block;
}

.desktop-nav {
    display: flex;
    align-items: center;

    gap: 26px;

    margin-left: auto;
}

.desktop-nav a {
    position: relative;

    padding: 29px 0;

    font-size: 13px;
    font-weight: 700;

    color: #1c2947;

    white-space: nowrap;

    transition:
        color .2s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--blue);
}

.desktop-nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 16px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue2)
        );

    border-radius: 10px;
}

.desktop-nav span {
    color: #71809b;
    margin-left: 3px;
}

.nav-actions {
    display: flex;
    align-items: center;

    gap: 13px;
}

.icon-btn,
.mobile-menu {
    width: 38px;
    height: 38px;

    border:
        1px solid var(--line);

    background: #fff;

    border-radius: 11px;

    color: var(--text);

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.icon-btn:hover,
.mobile-menu:hover {
    transform: translateY(-1px);
    border-color: #b8cdf0;
}

.login-link {
    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;
}

.signup-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 43px;

    background:
        linear-gradient(
            135deg,
            #0866ee,
            #167ff8
        );

    color: #fff;

    border-radius: 11px;

    padding:
        11px 19px;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 10px 24px
        rgba(18, 103, 245, .18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.signup-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(18, 103, 245, .25);
}

.mobile-menu {
    display: none;
}

.mobile-nav {
    display: none;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 30%,
            #e4f1ff 0,
            rgba(228, 241, 255, .7) 20%,
            transparent 44%
        ),

        linear-gradient(
            180deg,
            #fff 0%,
            #f5f9ff 100%
        );

    border-bottom:
        1px solid #e8eef8;
}

.hero-shell {
    max-width: var(--container);

    margin: auto;

    padding:
        50px 24px 40px;

    display: grid;

    grid-template-columns:
        1.03fr
        .97fr;

    gap: 35px;

    align-items: center;
}

.hero-copy {
    position: relative;
    z-index: 5;
}

.eyebrow-pill {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    background:
        #eaf3ff;

    color:
        var(--blue);

    padding:
        8px 13px;

    border-radius:
        30px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .6px;
}

.eyebrow-pill span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 4px
        rgba(22, 168, 107, .12);

    animation:
        pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        box-shadow:
            0 0 0 4px
            rgba(22, 168, 107, .12);
    }

    50% {
        box-shadow:
            0 0 0 7px
            rgba(22, 168, 107, .03);
    }
}

.hero h1 {
    font-size: clamp(46px, 5vw, 60px);
    line-height: 0.99;
    letter-spacing: -3.5px;
    margin: 19px 0 20px;
    font-weight: 800;
}

.hero h1 strong {
    background:
        linear-gradient(
            90deg,
            #ff623c,
            #11a969,
            #1267f5
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.hero-lead {
    max-width: 650px;

    margin: 0;

    font-size: 17px;

    line-height: 1.7;

    color:
        var(--muted);
}

.hero-ctas {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 31px;

    max-width: 760px;
}

.hero-card {
    min-height: 86px;

    border:
        1px solid var(--line);

    background:
        #fff;

    border-radius:
        15px;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    box-shadow:
        0 8px 30px
        rgba(35, 75, 135, .06);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.hero-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 16px 38px
        rgba(35, 75, 135, .12);
}

.hero-card-primary {
    background:
        linear-gradient(
            135deg,
            #0e68f5,
            #147cf7
        );

    color: #fff;

    border-color:
        transparent;
}

.hero-card-icon {
    width: 38px;
    height: 38px;

    border-radius: 11px;

    display: grid;
    place-items: center;

    background:
        #eaf3ff;

    color:
        var(--blue);

    font-size: 22px;

    font-weight: 900;

    flex: 0 0 auto;
}

.hero-card-primary
.hero-card-icon {
    background:
        rgba(255,255,255,.16);

    color:
        #fff;
}

.hero-card-icon.green {
    color:
        var(--green);
}

.hero-card-icon.orange {
    color:
        var(--orange);
}

.hero-card b,
.hero-card small {
    display: block;
}

.hero-card b {
    font-size: 13px;
}

.hero-card small {
    font-size: 10px;

    margin-top: 4px;

    opacity: .72;
}

.hero-card i {
    margin-left: auto;

    font-style: normal;

    font-size: 18px;
}

.hero-trust {
    display: flex;

    gap: 28px;

    flex-wrap: wrap;

    margin-top: 24px;

    color:
        #20304f;

    font-size: 12px;
}

.hero-trust span:first-letter {
    color:
        var(--green);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.orb-a {
    width: 430px;
    height: 430px;

    background:
        #e8f3ff;

    left: 5%;
    top: 7%;

    filter:
        blur(.2px);
}

.orb-b {
    width: 220px;
    height: 220px;

    background:
        #edf9f2;

    right: 3%;
    bottom: 2%;
}


/* =========================================================
   QR SHOWCASE
========================================================= */

.qr-showcase {
    position: relative;

    z-index: 2;

    width: 330px;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid #e5ebf5;

    border-radius:
        26px;

    padding:
        20px 20px 18px;

    text-align: center;

    box-shadow:
        0 25px 70px
        rgba(35,73,135,.18);

    transform:
        rotate(-3deg);

    animation:
        showcase-float 5s ease-in-out infinite;
}

@keyframes showcase-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(-3deg);
    }
}

.showcase-brand img {
    width: 150px;

    height: auto;

    margin-bottom: 9px;
}

.scan-area {
    position: relative;
}


/* =========================================================
   FAKE QR
========================================================= */

.fake-qr {
    width: 245px;
    height: 245px;

    margin: auto;

    position: relative;

    background:
        repeating-conic-gradient(
            #111 0 8%,
            #fff 0 16%
        );

    border:
        11px solid #fff;

    box-shadow:
        0 0 0 1px #e2e7ef;

    border-radius:
        3px;

    overflow:
        hidden;
}

.fake-qr::before,
.fake-qr::after {
    content: "";

    position: absolute;

    background:
        repeating-linear-gradient(
            90deg,
            #111 0 7px,
            #fff 7px 14px
        );

    opacity:
        .9;
}

.fake-qr::before {
    inset:
        25px 0 80px 30px;

    transform:
        rotate(7deg);
}

.fake-qr::after {
    inset:
        80px 15px 15px 0;

    transform:
        rotate(-9deg);
}


/* QR FINDERS */

.finder {
    position: absolute;

    width: 55px;
    height: 55px;

    background: #fff;

    border:
        10px solid #111;

    z-index: 3;
}

.finder::after {
    content: "";

    position: absolute;

    inset: 8px;

    background:
        #111;
}

.f1 {
    left: 9px;
    top: 9px;
}

.f2 {
    right: 9px;
    top: 9px;
}

.f3 {
    left: 9px;
    bottom: 9px;
}


/* QR PATTERN */

.qr-pattern {
    position: absolute;

    inset: 35px;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 11px,
            #111 11px 18px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0 13px,
            #111 13px 20px
        );

    mix-blend-mode:
        multiply;

    z-index:
        2;
}


/* QR LOGO */

.qr-center {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 47px;
    height: 47px;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #0d6cf5,
            #10ae70
        );

    border:
        6px solid #fff;

    color:
        #fff;

    font-weight:
        950;

    font-size:
        25px;

    display:
        grid;

    place-items:
        center;
}


/* =========================================================
   SCANNER ANIMATION
========================================================= */

.scanner-line {
    position: absolute;

    left: 5px;
    right: 5px;

    top: 8px;

    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1267f5,
            #16a86b,
            #1267f5,
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(18,103,245,.8),

        0 0 25px
        rgba(18,103,245,.35);

    z-index:
        10;

    animation:
        qr-scan 2.5s ease-in-out infinite;
}

@keyframes qr-scan {

    0% {
        top: 8px;
        opacity: .2;
    }

    15% {
        opacity: 1;
    }

    50% {
        top: calc(100% - 12px);
        opacity: 1;
    }

    65% {
        opacity: .9;
    }

    100% {
        top: 8px;
        opacity: .2;
    }
}

.qr-showcase h3 {
    font-size:
        21px;

    margin:
        14px 0 2px;
}

.qr-showcase > p {
    font-size:
        12px;

    color:
        var(--muted);

    margin:
        0;
}

.app-chips {
    display:
        flex;

    justify-content:
        center;

    gap:
        6px;

    margin-top:
        13px;

    flex-wrap:
        wrap;
}

.app-chips span {
    font-size:
        9px;

    font-weight:
        800;

    border:
        1px solid #e4e9f2;

    border-radius:
        20px;

    padding:
        5px 8px;

    color:
        #52617c;

    background:
        #fafcff;
}


/* =========================================================
   PHONE
========================================================= */

.phone-card {
    position: absolute;

    z-index: 3;

    right: 0;
    bottom: 4px;

    width: 235px;
    height: 420px;

    border:
        8px solid #101827;

    border-radius:
        31px;

    background:
        #fff;

    box-shadow:
        0 25px 55px
        rgba(24,45,83,.25);

    transform:
        rotate(7deg);

    overflow:
        hidden;

    animation:
        phone-float 5.5s ease-in-out infinite;
}

@keyframes phone-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(7deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(7deg);
    }
}

.phone-camera {
    position: absolute;

    width: 65px;
    height: 14px;

    left: 50%;
    top: -2px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 12px 12px;

    background:
        #101827;

    z-index:
        10;
}

.phone-top {
    height:
        29px;

    padding:
        8px 14px 0;

    font-size:
        8px;

    font-weight:
        800;

    display:
        flex;

    justify-content:
        space-between;
}

.phone-url {
    margin:
        5px 10px;

    padding:
        7px;

    border-radius:
        8px;

    background:
        #f3f6fa;

    color:
        #74809a;

    font-size:
        7px;
}

.phone-content {
    text-align:
        center;

    padding:
        20px 17px;
}

.mini-logo {
    width:
        36px;

    height:
        36px;

    border-radius:
        11px;

    margin:
        auto;

    background:
        linear-gradient(
            135deg,
            #0d6cf5,
            #10ae70
        );

    color:
        #fff;

    display:
        grid;

    place-items:
        center;

    font-weight:
        900;
}

.phone-content h4 {
    margin:
        9px 0 2px;

    font-size:
        16px;
}

.phone-content small {
    font-size:
        8px;

    color:
        #75819a;
}

.phone-amount {
    font-size:
        22px;

    font-weight:
        900;

    margin:
        22px 0;
}

.phone-note {
    display:
        flex;

    justify-content:
        space-between;

    border-top:
        1px solid #edf0f5;

    padding:
        9px 0;

    font-size:
        8px;

    color:
        #7b879e;
}

.phone-note b {
    color:
        #17243f;
}

.phone-content button {
    border:
        0;

    background:
        #1267f5;

    color:
        #fff;

    width:
        100%;

    padding:
        11px;

    border-radius:
        9px;

    font-size:
        10px;

    font-weight:
        800;

    margin:
        14px 0 8px;
}


/* =========================================================
   FLOATING PAYMENT CARD
========================================================= */

.payment-float {
    position: absolute;

    z-index: 8;

    left: 5px;
    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px 13px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid #e2eaf5;

    border-radius:
        13px;

    box-shadow:
        0 15px 40px
        rgba(30,60,110,.14);

    animation:
        payment-float 4s ease-in-out infinite;
}

@keyframes payment-float {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }
}

.payment-float-icon {
    width: 29px;
    height: 29px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        #eaf9f2;

    color:
        var(--green);

    font-size:
        13px;

    font-weight:
        900;
}

.payment-float small,
.payment-float strong {
    display: block;
}

.payment-float small {
    font-size:
        8px;

    color:
        var(--muted);
}

.payment-float strong {
    font-size:
        12px;

    margin-top:
        1px;
}


/* =========================================================
   STATS
========================================================= */

.stats-shell {
    max-width:
        var(--container);

    margin:
        -1px auto 0;

    padding:
        0 24px;

    position:
        relative;

    z-index:
        10;
}

.stats-card {
    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    padding:
        21px 28px;
}

.stats-card > div {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        0 22px;

    border-right:
        1px solid #e9edf4;
}

.stats-card > div:last-child {
    border-right:
        0;
}

.stat-icon {
    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

    display:
        grid;

    place-items:
        center;

    font-weight:
        900;

    font-size:
        20px;

    flex:
        0 0 auto;
}

.stat-icon.blue {
    background:
        #eaf3ff;

    color:
        var(--blue);
}

.stat-icon.green {
    background:
        #eaf9f2;

    color:
        var(--green);
}

.stat-icon.orange {
    background:
        #fff1e6;

    color:
        var(--orange);
}

.stat-icon.purple {
    background:
        #f1ecff;

    color:
        var(--purple);
}

.stats-card b,
.stats-card small {
    display:
        block;
}

.stats-card b {
    font-size:
        13px;
}

.stats-card small {
    font-size:
        10px;

    color:
        var(--muted);

    margin-top:
        3px;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.section {
    max-width:
        var(--container);

    margin:
        auto;

    padding:
        60px 24px 40px;
}

.section-heading {
    text-align:
        center;

    max-width:
        780px;

    margin:
        0 auto 36px;
}

.section-heading > span,
.section-kicker {
    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

    color:
        var(--blue);
}

.section-heading h2 {
    font-size:
        40px;

    line-height:
        1.1;

    letter-spacing:
        -1.8px;

    margin:
        9px 0 8px;
}

.section-heading p {
    font-size:
        15px;

    color:
        var(--muted);

    margin:
        0;

    line-height:
        1.6;
}


/* =========================================================
   FEATURES
========================================================= */

.feature-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        16px;
}

.feature-card {
    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        18px;

    padding:
        25px;

    min-height:
        195px;

    box-shadow:
        0 8px 30px
        rgba(29,61,111,.045);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.feature-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow);
}

.feature-icon {
    width:
        44px;

    height:
        44px;

    border-radius:
        13px;

    display:
        grid;

    place-items:
        center;

    font-size:
        20px;

    font-weight:
        900;
}

.feature-icon.blue {
    background:
        #eaf3ff;

    color:
        var(--blue);
}

.feature-icon.green {
    background:
        #eaf9f2;

    color:
        var(--green);
}

.feature-icon.orange {
    background:
        #fff1e6;

    color:
        var(--orange);
}

.feature-icon.purple {
    background:
        #f1ecff;

    color:
        var(--purple);
}

.feature-icon.cyan {
    background:
        #e9fbff;

    color:
        var(--cyan);
}

.feature-icon.pink {
    background:
        #fff0f4;

    color:
        #ef5470;
}

.feature-card h3 {
    font-size:
        17px;

    margin:
        16px 0 7px;
}

.feature-card p {
    font-size:
        12px;

    color:
        var(--muted);

    line-height:
        1.55;

    min-height:
        38px;
}

.feature-card a {
    font-size:
        11px;

    color:
        var(--blue);

    font-weight:
        900;
}


/* =========================================================
   HOW
========================================================= */

.how-section {
    background:
        #fff;

    border-top:
        1px solid #edf1f7;

    border-bottom:
        1px solid #edf1f7;

    padding:
        50px 24px;
}

.steps {
    max-width:
        1100px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.step {
    flex:
        1;

    text-align:
        center;

    max-width:
        280px;
}

.step-number {
    width:
        52px;

    height:
        52px;

    margin:
        auto;

    border-radius:
        16px;

    background:
        #eaf3ff;

    color:
        var(--blue);

    display:
        grid;

    place-items:
        center;

    font-size:
        13px;

    font-weight:
        900;
}

.step h3 {
    font-size:
        16px;

    margin:
        16px 0 6px;
}

.step p {
    font-size:
        12px;

    line-height:
        1.55;

    color:
        var(--muted);
}

.step-line {
    width:
        100px;

    height:
        1px;

    background:
        #dce5f3;

    position:
        relative;
}

.step-line::after {
    content:
        "›";

    position:
        absolute;

    right:
        -5px;

    top:
        -11px;

    color:
        #a5b5ce;

    font-size:
        20px;
}


/* =========================================================
   AUDIENCE
========================================================= */

.audience {
    max-width:
        var(--container);

    margin:
        auto;

    padding:
        50px 24px;

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        70px;

    align-items:
        center;
}

.audience h2 {
    font-size:
        42px;

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin:
        10px 0;
}

.audience p {
    color:
        var(--muted);

    line-height:
        1.7;

    max-width:
        500px;
}

.audience-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}

.audience-grid span {
    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        14px;

    padding:
        17px 12px;

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 7px 25px
        rgba(31,65,120,.05);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.audience-grid span:hover {
    transform:
        translateY(-3px);

    border-color:
        #c8daf5;
}


/* =========================================================
   TOOLS
========================================================= */

.tools-section {
    background:
        #eef5ff;

    padding:
        45px 24px;
}

.tools-section > .section-heading {
    max-width:
        var(--container);
}

.section-heading.left {
    text-align:
        left;
}

.tool-row {
    max-width:
        var(--container);

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}

.tool-row a {
    background:
        #fff;

    border:
        1px solid #dce7f7;

    border-radius:
        14px;

    padding:
        19px;

    font-size:
        12px;

    font-weight:
        800;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.tool-row a:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 30px
        rgba(25,72,140,.08);
}

.tool-row b {
    float:
        right;

    color:
        var(--blue);
}


/* =========================================================
   GENERATOR
========================================================= */

.generator-wrap {
    max-width:
        var(--container);

    margin:
        auto;

    padding:
        40px 24px 25px;
}

.generator-intro {
    text-align:
        center;

    margin-bottom:
        35px;
}

.generator-intro h2 {
    font-size:
        40px;

    line-height:
        1.1;

    letter-spacing:
        -1.8px;

    margin:
        9px 0;
}

.generator-intro p {
    font-size:
        14px;

    color:
        var(--muted);
}

.workspace {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

    align-items:
        stretch;
}

.panel {
    background:
        var(--card);

    border:
        1px solid var(--line);

    border-radius:
        22px;

    padding:
        25px;

    box-shadow:
        var(--shadow);
}

.generator-panel {
    min-height:
        640px;
}

.panel-title,
.result-head {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;
}

.panel h2 {
    margin:
        0;
}

.panel-title p,
.history p {
    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        5px;
}

.live-dot,
.status {
    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1px;

    background:
        #e8f7ee;

    color:
        #18864b;

    padding:
        7px 9px;

    border-radius:
        20px;
}

.panel > label {
    display:
        block;

    font-size:
        12px;

    font-weight:
        800;

    margin:
        17px 0 7px;
}

.panel em {
    font-style:
        normal;

    color:
        #999;

    font-weight:
        normal;
}

.panel input:not([type="checkbox"]),
.link input {
    width:
        100%;

    height:
        46px;

    border:
        1px solid var(--line);

    border-radius:
        10px;

    padding:
        0 13px;

    background:
        var(--card);

    color:
        var(--text);

    outline:
        none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.panel input:focus {
    border-color:
        #8db7fb;

    box-shadow:
        0 0 0 3px #eaf3ff;
}

.panel small {
    display:
        block;

    color:
        #8b92a0;

    font-size:
        10px;

    margin-top:
        5px;
}

.amount {
    display:
        flex;

    border:
        1px solid var(--line);

    border-radius:
        10px;

    align-items:
        center;

    overflow:
        hidden;
}

.amount b {
    padding-left:
        13px;

    color:
        #888;
}

.amount input {
    border:
        0 !important;

    box-shadow:
        none !important;
}

.quick {
    display:
        flex;

    gap:
        7px;

    flex-wrap:
        wrap;

    margin:
        9px 0;
}

.quick button,
.actions button {
    border:
        1px solid var(--line);

    background:
        var(--card);

    color:
        var(--text);

    border-radius:
        9px;

    padding:
        8px 11px;

    cursor:
        pointer;

    font-size:
        11px;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}

.quick button:hover,
.actions button:hover {
    border-color:
        #a8c6f7;

    color:
        var(--blue);

    background:
        #f7faff;
}

.primary {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        47px;

    width:
        100%;

    border:
        0;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #1267f5,
            #1987ff
        );

    color:
        white;

    text-decoration:
        none;

    font-weight:
        900;

    cursor:
        pointer;

    margin-top:
        17px;

    box-shadow:
        0 10px 22px
        rgba(18,103,245,.15);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.primary:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(18,103,245,.23);
}

.check {
    display:
        flex !important;

    align-items:
        center;

    gap:
        7px;

    background:
        #f7f9fd;

    padding:
        10px;

    border-radius:
        10px;

    cursor:
        pointer;
}

.check input {
    accent-color:
        var(--blue);
}

.check span {
    font-size:
        11px;
}

.privacy,
.warning {
    margin-top:
        15px;

    padding:
        11px;

    background:
        #f1f7ff;

    border-radius:
        10px;

    font-size:
        10px;

    color:
        var(--muted);

    line-height:
        1.5;
}

.privacy b {
    color:
        var(--blue);

    margin-right:
        7px;
}

.error {
    margin-top:
        10px;

    padding:
        10px;

    background:
        #fff0f0;

    color:
        #b42318;

    border-radius:
        9px;

    font-size:
        11px;
}


/* =========================================================
   RESULT
========================================================= */

.result {
    min-height:
        640px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.result.has-result {
    display:
        block;
}

.empty {
    text-align:
        center;

    color:
        var(--muted);
}

.empty-icon {
    width:
        65px;

    height:
        65px;

    border:
        1px dashed #c8ceda;

    border-radius:
        18px;

    display:
        grid;

    place-items:
        center;

    margin:
        auto;

    font-size:
        30px;
}

.empty h2 {
    color:
        var(--text);
}

.empty p {
    font-size:
        12px;
}

.result-head h2 {
    font-size:
        38px;

    margin:
        10px 0;
}

.mini {
    font-size:
        11px;

    color:
        var(--muted);

    max-width:
        180px;

    word-break:
        break-all;

    text-align:
        right;
}

.qr-card {
    width:
        min(330px, 100%);

    aspect-ratio:
        1;

    margin:
        20px auto;

    padding:
        15px;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    display:
        grid;

    place-items:
        center;

    background:
        #fff;
}

.qr-card img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}

.details {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    margin-top:
        10px;
}

.details div {
    border:
        1px solid var(--line);

    border-radius:
        9px;

    padding:
        9px;
}

.details span {
    display:
        block;

    color:
        var(--muted);

    font-size:
        9px;
}

.details strong {
    display:
        block;

    font-size:
        10px;

    word-break:
        break-all;

    margin-top:
        3px;
}

.link {
    margin-top:
        14px;
}

.link label {
    font-size:
        10px;

    color:
        var(--muted);
}

.link > div {
    display:
        flex;

    gap:
        7px;

    margin-top:
        5px;
}

.link button {
    border:
        0;

    background:
        #10203e;

    color:
        #fff;

    border-radius:
        9px;

    padding:
        0 13px;

    cursor:
        pointer;
}

.actions {
    display:
        flex;

    gap:
        6px;

    flex-wrap:
        wrap;

    margin-top:
        8px;
}

.actions button {
    flex:
        1;

    min-width:
        70px;
}

.warning b {
    color:
        #a65a00;
}


/* =========================================================
   HISTORY
========================================================= */

.history {
    max-width:
        var(--container);

    margin:
        20px auto;

    padding:
        25px;
}

.history h2 {
    margin:
        0;
}

.history-list {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        8px;

    margin-top:
        15px;
}

.history-item {
    border:
        1px solid var(--line);

    padding:
        12px;

    border-radius:
        10px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}

.history-item b,
.history-item small,
.history-item span {
    display:
        block;
}

.history-item small {
    color:
        var(--blue);

    margin-top:
        3px;
}

.history-item span {
    font-size:
        10px;

    color:
        var(--muted);
}

.history-item button {
    border:
        1px solid var(--line);

    background:
        var(--card);

    color:
        var(--text);

    padding:
        7px;

    border-radius:
        8px;

    cursor:
        pointer;
}

.history-empty {
    text-align:
        center;

    color:
        var(--muted);

    font-size:
        11px;

    padding:
        15px;
}


/* =========================================================
   LEGACY / BENEFITS
========================================================= */

.legacy-features {
    max-width:
        var(--container);

    margin:
        20px auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        12px;

    padding:
        0 24px;
}

.legacy-features article {
    background:
        #fff;

    border:
        1px solid var(--line);

    padding:
        20px;

    border-radius:
        16px;
}

.legacy-features article b {
    color:
        var(--blue);
}

.legacy-features h3 {
    margin:
        8px 0 5px;
}

.legacy-features p {
    font-size:
        12px;

    color:
        var(--muted);

    line-height:
        1.5;

    margin:
        0;
}


/* =========================================================
   PRICING
========================================================= */

.pricing {
    max-width:
        var(--container);

    margin:
        auto;

    padding:
        40px 24px 30px;
}

.pricing-card {
    border-radius:
        24px;

    padding:
        42px 48px;

    background:
        linear-gradient(
            135deg,
            #09275e,
            #1267f5
        );

    color:
        #fff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    box-shadow:
        0 25px 60px
        rgba(18,103,245,.22);
}

.pricing-card .section-kicker {
    color:
        #9fc5ff;
}

.pricing-card h2 {
    font-size:
        34px;

    letter-spacing:
        -1.4px;

    margin:
        8px 0;
}

.pricing-card p {
    margin:
        0;

    color:
        #cbdcff;

    font-size:
        13px;
}

.price {
    font-size:
        50px;

    font-weight:
        900;

    white-space:
        nowrap;
}

.price small {
    font-size:
        25px;
}

.price span {
    font-size:
        11px;

    font-weight:
        600;

    color:
        #cbdcff;
}

.pricing-card .signup-btn {
    background:
        #fff;

    color:
        #0d57d6;

    box-shadow:
        none;

    white-space:
        nowrap;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    background:
        #08152e;

    color:
        #dbe6fa;

    padding:
        55px 24px 0;
}

.footer-shell {
    max-width:
        var(--container);

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1.5fr;

    gap:
        40px;
}

.footer-logo {
    width:
        155px;

    height:
        auto;

    filter:
        brightness(0) invert(1);

    margin-bottom:
        10px;
}

.footer-shell > div > p {
    font-size:
        11px;

    color:
        #93a7c9;

    line-height:
        1.6;

    max-width:
        310px;
}

.footer-shell b {
    font-size:
        12px;

    color:
        #fff;

    display:
        block;

    margin-bottom:
        13px;
}

.footer-shell a {
    display:
        block;

    font-size:
        11px;

    color:
        #9db0d0;

    margin:
        9px 0;

    transition:
        color .2s ease;
}

.footer-shell a:hover {
    color:
        #fff;
}

.footer-bottom {
    max-width:
        var(--container);

    margin:
        40px auto 0;

    padding:
        18px 0;

    border-top:
        1px solid rgba(255,255,255,.1);

    font-size:
        10px;

    color:
        #7f94b7;
}


/* =========================================================
   PAYMENT PAGE
========================================================= */

.pay-page {
    min-height:
        100vh;

    display:
        grid;

    place-items:
        center;
}

.pay-shell {
    width:
        min(440px, calc(100% - 30px));

    text-align:
        center;
}

.pay-brand {
    font-weight:
        900;

    margin-bottom:
        15px;
}

.pay-card {
    background:
        var(--card);

    border:
        1px solid var(--line);

    border-radius:
        22px;

    padding:
        28px;
}

.pay-amount {
    font-size:
        42px;

    font-weight:
        900;

    margin:
        13px 0;
}

.pay-card h1 {
    font-size:
        20px;

    margin:
        0 0 5px;
}

.pay-note {
    margin:
        10px 0;

    padding:
        9px;

    background:
        #f1f7ff;

    border-radius:
        9px;

    font-size:
        11px;
}

.page-qr {
    width:
        280px;

    max-width:
        100%;

    margin:
        18px auto;

    display:
        block;
}

.verify {
    font-size:
        10px;

    color:
        var(--muted);
}

.back {
    display:
        block;

    margin-top:
        15px;

    color:
        var(--blue);

    font-weight:
        bold;

    font-size:
        12px;
}


/* =========================================================
   DARK MODE
========================================================= */

.dark {
    --bg:
        #091225;

    --card:
        #111d34;

    --text:
        #f5f8ff;

    --muted:
        #a9b8d0;

    --line:
        #263754;
}

.dark body {
    background:
        var(--bg);
}

.dark .topbar {
    background:
        rgba(9,18,37,.94);
}

.dark .desktop-nav a,
.dark .login-link {
    color:
        #e5edfb;
}

.dark .hero {
    background:
        radial-gradient(
            circle at 80% 35%,
            #102b55 0,
            rgba(16,43,85,.6) 20%,
            transparent 42%
        ),

        linear-gradient(
            180deg,
            #091225,
            #0d1930
        );
}

.dark .hero-card,
.dark .stats-card,
.dark .feature-card,
.dark .audience-grid span,
.dark .tool-row a,
.dark .panel,
.dark .history,
.dark .legacy-features article {
    background:
        #111d34;
}

.dark .hero-card-primary {
    background:
        linear-gradient(
            135deg,
            #1267f5,
            #1987ff
        );
}

.dark .stats-card > div {
    border-color:
        #263754;
}

.dark .tools-section,
.dark .how-section {
    background:
        #0d1930;
}

.dark .qr-showcase {
    background:
        #111d34;

    border-color:
        #263754;
}

.dark .phone-card {
    background:
        #111d34;
}

.dark .phone-url {
    background:
        #18263e;
}

.dark .phone-note {
    border-color:
        #263754;
}

.dark .pricing-card {
    background:
        linear-gradient(
            135deg,
            #0d2551,
            #1267f5
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

    .desktop-nav {
        gap:
            15px;
    }

    .desktop-nav a {
        font-size:
            12px;
    }

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

    .hero-copy {
        text-align:
            center;
    }

    .hero-lead {
        margin:
            auto;
    }

    .hero-ctas {
        margin-left:
            auto;

        margin-right:
            auto;
    }

    .hero-trust {
        justify-content:
            center;
    }

    .hero-visual {
        min-height:
            485px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .desktop-nav {
        display:
            none;
    }

    .login-link {
        display:
            none;
    }

    .nav-shell {
        height:
            68px;

        padding:
            0 16px;
    }

    .brand img {
        width:
            150px;
    }

    .nav-actions {
        margin-left:
            auto;
    }

    .mobile-menu {
        display:
            block;
    }

    .mobile-nav {
        display:
            none;

        padding:
            10px 18px 18px;

        background:
            #fff;

        border-top:
            1px solid var(--line);
    }

    .mobile-nav.open {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            4px;
    }

    .mobile-nav a {
        padding:
            12px;

        border-radius:
            9px;

        font-size:
            12px;

        font-weight:
            800;
    }

    .mobile-nav a:hover {
        background:
            #eef5ff;

        color:
            var(--blue);
    }

    .mobile-nav-actions {
        grid-column:
            1 / -1;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            8px;

        margin-top:
            8px;

        padding-top:
            10px;

        border-top:
            1px solid var(--line);
    }

    .mobile-nav-actions a {
        text-align:
            center;

        background:
            #f5f8fd;
    }

    .hero-shell {
        padding:
            55px 18px 45px;
    }

    .hero h1 {
        font-size:
            50px;

        letter-spacing:
            -3px;
    }

    .hero-ctas {
        grid-template-columns:
            1fr;
    }

    .hero-trust {
        gap:
            12px;

        flex-direction:
            column;
    }

    .stats-shell {
        padding:
            0 14px;
    }

    .stats-card {
        grid-template-columns:
            1fr 1fr;

        padding:
            12px;
    }

    .stats-card > div {
        padding:
            12px;

        border-right:
            0;
    }

    .section,
    .generator-wrap,
    .audience,
    .pricing {
        padding-left:
            16px;

        padding-right:
            16px;
    }

    .section {
        padding-top:
            75px;
    }

    .section-heading h2,
    .generator-intro h2 {
        font-size:
            32px;
    }

    .feature-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .steps {
        flex-direction:
            column;

        gap:
            15px;
    }

    .step-line {
        width:
            1px;

        height:
            35px;
    }

    .step-line::after {
        content:
            "↓";

        top:
            9px;

        right:
            -5px;
    }

    .audience {
        grid-template-columns:
            1fr;

        gap:
            30px;
    }

    .audience h2 {
        font-size:
            34px;
    }

    .audience-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

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

    .workspace {
        grid-template-columns:
            1fr;
    }

    .result {
        min-height:
            520px;
    }

    .history-list {
        grid-template-columns:
            1fr;
    }

    .legacy-features {
        grid-template-columns:
            1fr 1fr;

        padding:
            0 16px;
    }

    .pricing-card {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            30px;
    }

    .price {
        font-size:
            42px;
    }

    .footer-shell {
        grid-template-columns:
            1fr 1fr;

        gap:
            28px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .hero h1 {
        font-size:
            43px;

        letter-spacing:
            -2.5px;
    }

    .hero-lead {
        font-size:
            15px;
    }

    .hero-visual {
        min-height:
            420px;

        transform:
            scale(.82);

        margin:
            -25px -45px;
    }

    .qr-showcase {
        width:
            300px;
    }

    .phone-card {
        right:
            -30px;
    }

    .payment-float {
        left:
            0;

        bottom:
            10px;

        transform:
            scale(.9);
    }

    .feature-grid {
        grid-template-columns:
            1fr;
    }

    .audience-grid {
        grid-template-columns:
            1fr 1fr;
    }

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

    .legacy-features {
        grid-template-columns:
            1fr;
    }

    .details {
        grid-template-columns:
            1fr;
    }

    .link > div {
        flex-direction:
            column;
    }

    .link button {
        min-height:
            42px;
    }

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

    .pricing-card .signup-btn {
        width:
            100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

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

    .stats-card > div {
        border-bottom:
            1px solid #e9edf4;
    }

    .stats-card > div:last-child {
        border-bottom:
            0;
    }

    .hero h1 {
        font-size:
            39px;
    }

    .hero-visual {
        transform:
            scale(.70);

        min-height:
            365px;

        margin:
            -40px -65px;
    }

    .qr-showcase {
        width:
            290px;
    }

    .phone-card {
        right:
            -35px;
    }

    .audience-grid {
        grid-template-columns:
            1fr;
    }

    .nav-shell {
        gap:
            8px;
    }

    .brand img {
        width:
            140px;
    }

    .icon-btn {
        width:
            35px;

        height:
            35px;
    }

    .mobile-menu {
        width:
            35px;

        height:
            35px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

.scanner-line {
    animation: qr-scan 2.5s ease-in-out infinite;
}

/* =========================================================
   UPIPOINT HERO - ANIMATED QR SCANNER
   ========================================================= */

.hero-visual {
    min-height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}


/* -----------------------------
   Background glow
----------------------------- */

.visual-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    z-index: -2;
}

.visual-glow-1 {
    width: 430px;
    height: 430px;
    left: 5%;
    top: 5%;
    background:
        radial-gradient(
            circle,
            rgba(39, 133, 255, .18) 0%,
            rgba(39, 133, 255, .08) 45%,
            transparent 72%
        );
}

.visual-glow-2 {
    width: 280px;
    height: 280px;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(
            circle,
            rgba(35, 205, 137, .16) 0%,
            rgba(35, 205, 137, .06) 45%,
            transparent 72%
        );
}


/* -----------------------------
   Decorative dots
----------------------------- */

.dot-pattern {
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: .55;
    background-image: radial-gradient(
        #9fc5ff 1.5px,
        transparent 1.5px
    );
    background-size: 10px 10px;
    z-index: -1;
}

.dots-left {
    left: -5px;
    top: 95px;
}

.dots-right {
    right: -5px;
    bottom: 65px;
    opacity: .35;
}


/* =========================================================
   QR CARD
   ========================================================= */

.scan-card {
    position: relative;
    z-index: 2;

    width: 360px;
    min-height: 410px;

    padding: 27px 25px 22px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #79a9ff 0%,
            #467fe7 35%,
            #1c5bc6 100%
        );

    border: 5px solid rgba(255,255,255,.85);

    box-shadow:
        0 30px 70px rgba(18,72,170,.25),
        inset 0 1px 0 rgba(255,255,255,.55);

    transform: translateX(-30px) rotate(-1deg);

    animation: scannerCardFloat 5s ease-in-out infinite;
}


.scan-card::before {
    content: "";
    position: absolute;
    inset: 8px;

    border-radius: 23px;

    border: 1px solid rgba(255,255,255,.18);

    pointer-events: none;
}


.scan-title {
    text-align: center;
    color: #fff;

    font-size: 21px;
    font-weight: 900;

    margin-top: 2px;
    letter-spacing: -.4px;
}


.scan-subtitle {
    text-align: center;

    color: rgba(255,255,255,.78);

    font-size: 10px;

    margin-top: 6px;
}


.qr-scanner {
    position: relative;

    width: 265px;
    height: 265px;

    margin: 24px auto 16px;

    display: grid;
    place-items: center;
}


/* =========================================================
   QR
   ========================================================= */

.animated-qr {
    width: 220px;
    height: 220px;

    position: relative;

    background: #fff;

    border-radius: 5px;

    overflow: hidden;

    box-shadow:
        0 0 0 5px rgba(255,255,255,.14),
        0 15px 35px rgba(0,0,0,.20);
}


/* QR pattern */

.qr-grid {
    position: absolute;
    inset: 8px;

    background:
        repeating-linear-gradient(
            90deg,
            #111 0 8px,
            transparent 8px 15px
        ),
        repeating-linear-gradient(
            0deg,
            #111 0 7px,
            transparent 7px 14px
        );

    opacity: .82;
}


/* Add irregular white blocks to make it look less synthetic */

.qr-grid::before {
    content: "";

    position: absolute;
    inset: 12px;

    background:
        linear-gradient(90deg,
            transparent 0 18%,
            #fff 18% 23%,
            transparent 23% 41%,
            #fff 41% 46%,
            transparent 46% 69%,
            #fff 69% 74%,
            transparent 74%
        ),
        linear-gradient(0deg,
            transparent 0 20%,
            #fff 20% 26%,
            transparent 26% 48%,
            #fff 48% 54%,
            transparent 54% 76%,
            #fff 76% 82%,
            transparent 82%
        );

    opacity: .9;
}


/* =========================================================
   QR FINDERS
   ========================================================= */

.finder {
    position: absolute;

    width: 54px;
    height: 54px;

    background: #fff;

    border: 9px solid #111;

    z-index: 4;
}


.finder span {
    position: absolute;

    inset: 8px;

    background: #111;
}


.finder-1 {
    top: 12px;
    left: 12px;
}


.finder-2 {
    top: 12px;
    right: 12px;
}


.finder-3 {
    bottom: 12px;
    left: 12px;
}


/* =========================================================
   UPI CENTER LOGO
   ========================================================= */

.qr-logo {
    position: absolute;

    z-index: 8;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 55px;
    height: 55px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #0b69f5,
            #10b978
        );

    border: 6px solid #fff;

    display: grid;
    place-items: center;

    box-shadow:
        0 7px 20px rgba(0,0,0,.18);
}


.qr-logo span {
    color: #fff;

    font-size: 26px;

    font-weight: 950;
}


/* =========================================================
   SCANNER CORNERS
   ========================================================= */

.corner {
    position: absolute;

    width: 43px;
    height: 43px;

    z-index: 10;

    border-color: #5fffe1;

    filter:
        drop-shadow(0 0 6px rgba(83,255,220,.8))
        drop-shadow(0 0 12px rgba(83,255,220,.5));
}


.corner-tl {
    top: 8px;
    left: 8px;

    border-top: 4px solid;
    border-left: 4px solid;

    border-radius: 8px 0 0 0;
}


.corner-tr {
    top: 8px;
    right: 8px;

    border-top: 4px solid;
    border-right: 4px solid;

    border-radius: 0 8px 0 0;
}


.corner-bl {
    bottom: 8px;
    left: 8px;

    border-bottom: 4px solid;
    border-left: 4px solid;

    border-radius: 0 0 0 8px;
}


.corner-br {
    bottom: 8px;
    right: 8px;

    border-bottom: 4px solid;
    border-right: 4px solid;

    border-radius: 0 0 8px 0;
}


/* =========================================================
   SCANNING BEAM
   ========================================================= */

.scan-beam {
    position: absolute;

    left: 5px;
    right: 5px;

    top: -20px;

    height: 4px;

    z-index: 12;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4dffe1 15%,
            #ffffff 50%,
            #4dffe1 85%,
            transparent
        );

    box-shadow:
        0 0 8px #45ffe0,
        0 0 18px #45ffe0,
        0 0 35px rgba(69,255,224,.8);

    animation: scanQR 2.7s ease-in-out infinite;
}


.scan-beam::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -30px;

    height: 65px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(53,255,219,.13),
            transparent
        );
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.scan-bottom {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.9);

    font-size: 10px;

    font-weight: 700;
}


.scan-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #5effc6;

    box-shadow:
        0 0 0 4px rgba(94,255,198,.12),
        0 0 10px #5effc6;

    animation: pulseDot 1.5s ease-in-out infinite;
}


/* =========================================================
   PHONE
   ========================================================= */

.payment-phone {
    position: absolute;

    z-index: 6;

    right: 15px;
    bottom: 18px;

    width: 225px;
    height: 410px;

    background: #111827;

    border: 7px solid #111827;

    border-radius: 34px;

    padding: 0;

    overflow: hidden;

    box-shadow:
        0 30px 60px rgba(18,35,70,.35),
        0 10px 20px rgba(0,0,0,.15);

    transform: rotate(8deg);

    animation: phoneFloat 4.5s ease-in-out infinite;
}


/* phone highlight */

.payment-phone::before {
    content: "";

    position: absolute;

    z-index: 20;

    top: 0;
    left: 10px;

    width: 55px;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.13),
            transparent
        );

    pointer-events: none;
}


.phone-speaker {
    position: absolute;

    z-index: 30;

    width: 62px;
    height: 17px;

    left: 50%;
    top: 7px;

    transform: translateX(-50%);

    background: #111827;

    border-radius: 0 0 12px 12px;
}


.phone-status {
    height: 31px;

    padding: 8px 14px 0;

    display: flex;
    justify-content: space-between;

    color: #1d2841;

    font-size: 8px;
    font-weight: 900;

    background: #fff;
}


.phone-screen {
    height: calc(100% - 31px);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f5f9ff
        );

    text-align: center;

    padding: 45px 18px 15px;
}


.success-circle {
    width: 55px;
    height: 55px;

    margin: 0 auto 13px;

    border-radius: 50%;

    background: #2dc875;

    display: grid;
    place-items: center;

    color: #fff;

    font-size: 29px;
    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(45,200,117,.28);

    animation: successPop 2.8s ease-in-out infinite;
}


.success-title {
    font-size: 9px;

    color: #66748e;

    font-weight: 700;
}


.success-amount {
    font-size: 24px;

    font-weight: 950;

    color: #0e1c3c;

    margin-top: 9px;

    letter-spacing: -.7px;
}


.success-payee {
    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-top: 9px;
}


.success-payee b {
    font-size: 11px;
    color: #17233e;
}


.success-payee span {
    font-size: 7px;
    color: #8190a9;
}


.success-divider {
    height: 1px;

    background: #e8edf5;

    margin: 18px 0 12px;
}


.payment-detail {
    display: flex;

    justify-content: space-between;

    text-align: left;

    padding: 7px 0;

    border-bottom: 1px solid #edf1f6;

    font-size: 7px;
}


.payment-detail span {
    color: #8794aa;
}


.payment-detail b {
    color: #23304a;

    max-width: 100px;

    overflow: hidden;
    text-overflow: ellipsis;
}


.view-details {
    width: 100%;

    border: 0;

    background:
        linear-gradient(
            135deg,
            #1267f5,
            #1987ff
        );

    color: #fff;

    padding: 10px 8px;

    border-radius: 9px;

    margin-top: 16px;

    font-size: 8px;

    font-weight: 900;

    box-shadow:
        0 8px 18px rgba(18,103,245,.22);
}


/* =========================================================
   PAYMENT RECEIVED BADGE
   ========================================================= */

.payment-badge {
    position: absolute;

    z-index: 9;

    left: 8px;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

    border-radius: 14px;

    background: rgba(255,255,255,.96);

    border: 1px solid #e5ebf5;

    box-shadow:
        0 15px 35px rgba(25,60,120,.15);

    animation: badgeFloat 4s ease-in-out infinite;
}


.badge-check {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e7f9ef;

    color: #16a86b;

    font-weight: 950;
}


.payment-badge b,
.payment-badge small {
    display: block;
}


.payment-badge b {
    font-size: 9px;
    color: #1a2947;
}


.payment-badge small {
    font-size: 8px;
    color: #71809a;

    margin-top: 2px;
}


/* =========================================================
   UPI FLOATING BADGE
   ========================================================= */

.upi-floating {
    position: absolute;

    z-index: 8;

    right: 6px;
    top: 52px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #e5ebf5;

    box-shadow:
        0 10px 30px rgba(30,70,130,.12);

    animation: badgeFloat2 3.8s ease-in-out infinite;
}


.upi-floating span {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #1267f5,
            #13b979
        );

    color: #fff;

    font-size: 10px;

    font-weight: 900;
}


.upi-floating b {
    font-size: 9px;
    color: #253452;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes scanQR {

    0% {
        top: 5px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: 215px;
        opacity: 0;
    }
}


@keyframes scannerCardFloat {

    0%,
    100% {
        transform:
            translateX(-30px)
            rotate(-1deg)
            translateY(0);
    }

    50% {
        transform:
            translateX(-30px)
            rotate(-1deg)
            translateY(-7px);
    }
}


@keyframes phoneFloat {

    0%,
    100% {
        transform:
            rotate(8deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(6deg)
            translateY(-9px);
    }
}


@keyframes successPop {

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

    78% {
        transform: scale(1.08);
    }

    85% {
        transform: scale(.97);
    }

    92% {
        transform: scale(1.03);
    }
}


@keyframes pulseDot {

    0%,
    100% {
        opacity: .5;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


@keyframes badgeFloat2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px) {

    .hero-visual {
        min-height: 470px;
        transform: scale(.9);
        margin: -15px -25px;
    }

    .scan-card {
        width: 325px;
        min-height: 375px;
        padding: 23px 20px 19px;
        transform: translateX(-20px) rotate(-1deg);
    }

    .qr-scanner {
        width: 235px;
        height: 235px;
        margin-top: 19px;
    }

    .animated-qr {
        width: 195px;
        height: 195px;
    }

    .payment-phone {
        width: 205px;
        height: 375px;
        right: 0;
        bottom: 8px;
    }

    .payment-badge {
        left: 0;
        bottom: 12px;
    }

    .upi-floating {
        right: 0;
        top: 35px;
    }
}


@media(max-width:480px) {

    .hero-visual {
        min-height: 405px;
        transform: scale(.75);
        margin: -50px -70px;
    }

    .payment-badge {
        left: -5px;
    }

    .upi-floating {
        right: -5px;
    }
}


/* Accessibility */

@media(prefers-reduced-motion: reduce) {

    .scan-card,
    .payment-phone,
    .scan-beam,
    .success-circle,
    .scan-dot,
    .payment-badge,
    .upi-floating {
        animation: none !important;
    }

}



/* =========================================================
   AUTHENTICATION PAGES
   Login / Signup / Forgot Password 
   Added on 01/09/2026
   ========================================================= */

.auth-page {
    min-height: calc(100vh - 78px);
    padding: 65px 20px 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(18,103,245,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(22,168,107,.07),
            transparent 30%
        ),
        var(--bg);
}


.auth-wrapper {
    width: 100%;
    max-width: 470px;
}


.auth-header {
    text-align: center;
    margin-bottom: 25px;
}


.auth-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 16px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background: linear-gradient(
        135deg,
        #1267f5,
        #1688ff
    );

    color: #fff;

    font-size: 25px;
    font-weight: 900;

    box-shadow:
        0 12px 30px rgba(18,103,245,.20);
}


.auth-header h1 {
    margin: 0 0 8px;

    font-size: 32px;
    line-height: 1.15;

    letter-spacing: -1.4px;
}


.auth-header p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.6;
}


.auth-card {
    background: var(--card);

    border: 1px solid var(--line);

    border-radius: 22px;

    padding: 30px;

    box-shadow:
        0 20px 60px rgba(27,58,115,.10);
}


.auth-card label {
    display: block;

    margin: 17px 0 7px;

    font-size: 12px;
    font-weight: 800;
}


.auth-card label:first-child {
    margin-top: 0;
}


.auth-card input:not([type="checkbox"]) {
    width: 100%;
    height: 48px;

    border: 1px solid var(--line);
    border-radius: 10px;

    padding: 0 13px;

    background: var(--card);
    color: var(--text);

    outline: none;

    transition: .2s;
}


.auth-card input:not([type="checkbox"]):focus {
    border-color: #8db7fb;

    box-shadow:
        0 0 0 3px #eaf3ff;
}


.auth-card input::placeholder {
    color: #9aa6ba;
}


.auth-password {
    position: relative;
}


.auth-password input {
    padding-right: 48px !important;
}


.password-toggle {
    position: absolute;

    right: 8px;
    top: 50%;

    transform: translateY(-50%);

    width: 35px;
    height: 35px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #71809b;

    cursor: pointer;
}


.password-toggle:hover {
    background: #eef5ff;
    color: var(--blue);
}


.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 14px;
}


.auth-remember {
    display: flex !important;

    align-items: center;

    gap: 7px;

    margin: 0 !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    color: var(--muted);
}


.auth-remember input {
    accent-color: var(--blue);
}


.auth-link {
    color: var(--blue);

    font-size: 11px;
    font-weight: 800;
}


.auth-link:hover {
    text-decoration: underline;
}


.auth-submit {
    width: 100%;

    min-height: 48px;

    border: 0;
    border-radius: 10px;

    margin-top: 21px;

    background:
        linear-gradient(
            135deg,
            #1267f5,
            #1987ff
        );

    color: #fff;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(18,103,245,.18);

    transition: .2s;
}


.auth-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 28px rgba(18,103,245,.24);
}


.auth-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}


.auth-footer {
    text-align: center;

    margin-top: 20px;

    color: var(--muted);

    font-size: 12px;
}


.auth-footer a {
    color: var(--blue);
    font-weight: 900;
}


.auth-message {
    padding: 11px 13px;

    border-radius: 10px;

    margin-bottom: 16px;

    font-size: 11px;

    line-height: 1.5;
}


.auth-message.error {
    background: #fff0f0;
    color: #b42318;
    border: 1px solid #ffd5d5;
}


.auth-message.success {
    background: #edf9f2;
    color: #16804b;
    border: 1px solid #ccefdc;
}


.auth-info {
    margin-top: 18px;

    padding: 12px;

    border-radius: 10px;

    background: #f1f7ff;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.55;
}


.auth-info b {
    color: var(--blue);
}


.auth-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 22px 0;

    color: #9aa6ba;

    font-size: 10px;
}


.auth-divider::before,
.auth-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--line);
}


.password-strength {
    margin-top: 7px;

    font-size: 10px;

    color: var(--muted);
}


.password-strength-bar {
    height: 4px;

    margin-top: 5px;

    border-radius: 10px;

    background: #edf0f5;

    overflow: hidden;
}


.password-strength-bar span {
    display: block;

    height: 100%;

    width: 0;

    border-radius: inherit;

    transition: .25s;
}


/* Dark mode */

.dark .auth-page {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(18,103,245,.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(22,168,107,.08),
            transparent 30%
        ),
        var(--bg);
}


.dark .auth-card {
    box-shadow:
        0 20px 60px rgba(0,0,0,.25);
}


.dark .auth-info {
    background: #102342;
}


.dark .password-toggle:hover {
    background: #172b4b;
}


@media(max-width:600px) {

    .auth-page {
        min-height: auto;

        padding:
            45px 16px
            65px;
    }

    .auth-header {
        margin-bottom: 20px;
    }

    .auth-header h1 {
        font-size: 28px;
    }

    .auth-card {
        padding: 22px 18px;

        border-radius: 18px;
    }

    .auth-options {
        align-items: flex-start;
    }

}


@media(max-width:380px) {

    .auth-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .auth-card {
        padding: 19px 15px;
    }

    .auth-header h1 {
        font-size: 26px;
    }

}