<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BlackSplit</title>
    <meta name="description" content="Split subscription bills effortlessly and save every month.">
    <link rel="icon" type="image/png" href="http://127.0.0.1:8000/assets/img/blacklg.jpeg">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --page-bg: #fdf6ee;
            --page-bg-deep: #f6ebdc;
            --paper: rgba(255, 255, 255, 0.88);
            --paper-solid: #fffaf5;
            --ink: #2b221d;
            --muted: #56493f;
            --gold: #cf914a;
            --gold-deep: #b8732c;
            --gold-soft: #f3dfbf;
            --line: rgba(182, 132, 77, 0.18);
            --shadow: 0 24px 50px rgba(185, 142, 89, 0.16);
        }

        * {
            box-sizing: border-box;
        }

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

        body {
            font-family: "Plus Jakarta Sans", Arial, sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at 10% 16%, rgba(230, 193, 144, 0.28), transparent 19%),
                radial-gradient(circle at 88% 14%, rgba(246, 221, 186, 0.75), transparent 20%),
                radial-gradient(circle at 82% 68%, rgba(234, 204, 161, 0.22), transparent 18%),
                linear-gradient(180deg, #fffdfa 0%, var(--page-bg) 48%, var(--page-bg-deep) 100%);
            overflow-x: hidden;
        }

        a {
            color: inherit;
        }

        .landing-page {
            position: relative;
            min-height: 100vh;
            padding: 20px 0 42px;
        }

        .landing-page::before,
        .landing-page::after {
            content: "";
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
        }

        .landing-page::before {
            width: 340px;
            height: 340px;
            left: -160px;
            top: 120px;
            background: radial-gradient(circle, rgba(232, 197, 149, 0.2) 0%, rgba(232, 197, 149, 0) 72%);
        }

        .landing-page::after {
            width: 380px;
            height: 380px;
            right: -170px;
            top: 110px;
            background: radial-gradient(circle, rgba(245, 216, 177, 0.34) 0%, rgba(245, 216, 177, 0) 72%);
        }

        .page-shell {
            width: min(1210px, calc(100% - 52px));
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 4px 2px 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            position: relative;
            flex: 0 0 42px;
        }

        .brand-mark::before,
        .brand-mark::after,
        .brand-mark span {
            content: "";
            position: absolute;
            background: linear-gradient(180deg, #e7bd83 0%, #c7853c 52%, #a6601d 100%);
        }

        .brand-mark::before {
            inset: 0 auto 0 0;
            width: 14px;
            border-radius: 14px;
            box-shadow: 0 10px 18px rgba(184, 121, 53, 0.18);
        }

        .brand-mark::after {
            width: 24px;
            height: 16px;
            right: 1px;
            top: 2px;
            border-radius: 0 12px 12px 0;
        }

        .brand-mark span {
            width: 24px;
            height: 16px;
            right: 1px;
            bottom: 2px;
            border-radius: 0 12px 12px 0;
        }

        .brand-name {
            font-size: 2.05rem;
            font-weight: 800;
            letter-spacing: -0.05em;
            color: #2f2924;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 22px;
        }

        .login-link {
            text-decoration: none;
            color: #2b251f;
            font-size: 1.02rem;
            font-weight: 600;
        }

        .signup-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            padding: 0 22px;
            border-radius: 16px;
            text-decoration: none;
            background: linear-gradient(180deg, #d9a566 0%, #bd7b33 100%);
            color: #fffaf6;
            font-weight: 700;
            box-shadow: 0 18px 24px rgba(189, 123, 51, 0.18);
        }

        .hero {
            display: grid;
            grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
            align-items: center;
            gap: 28px 42px;
        }

        .hero-copy {
            padding: 48px 0 18px;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 46px;
            padding: 0 18px;
            border: 1px solid rgba(190, 143, 88, 0.22);
            border-radius: 999px;
            background: rgba(255, 250, 244, 0.9);
            color: #aa7a42;
            font-size: 0.95rem;
            font-weight: 500;
            box-shadow: 0 10px 22px rgba(205, 171, 125, 0.12);
        }

        .icon-svg {
            display: block;
            width: 1em;
            height: 1em;
            flex: 0 0 auto;
        }

        .hero-pill .icon-svg {
            width: 0.86rem;
            height: 0.86rem;
        }

        .hero-title {
            margin: 30px 0 18px;
            font-family: "DM Serif Display", Georgia, serif;
            font-size: clamp(4rem, 5.7vw, 4.95rem);
            line-height: 0.96;
            letter-spacing: -0.04em;
            color: #2f2722;
        }

        .hero-title span {
            display: block;
            white-space: nowrap;
        }

        .hero-description {
            max-width: 20ch;
            margin: 0;
            color: #372d27;
            font-size: clamp(1.04rem, 1.25vw, 1.28rem);
            line-height: 1.62;
            font-weight: 500;
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 34px;
        }

        .primary-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-height: 58px;
            padding: 0 15px 0 20px;
            border-radius: 999px;
            text-decoration: none;
            color: #fffdf8;
            font-weight: 700;
            background: linear-gradient(180deg, #d49a55 0%, #b56f2a 100%);
            box-shadow: 0 18px 30px rgba(181, 111, 42, 0.24);
        }

        .primary-cta span:last-child {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.16);
        }

        .primary-cta .icon-svg {
            width: 0.9rem;
            height: 0.9rem;
        }

        .hero-visual {
            position: relative;
            min-height: 620px;
        }

        .hero-visual::before {
            content: "";
            position: absolute;
            inset: 56px 38px 62px 48px;
            border-radius: 50%;
            background:
                radial-gradient(circle at center, rgba(255, 255, 255, 0.94) 0%, rgba(255, 250, 244, 0.84) 44%, rgba(255, 250, 244, 0.12) 72%, rgba(255, 250, 244, 0) 84%);
            filter: blur(4px);
        }

        .network-lines {
            position: absolute;
            inset: 24px 0 110px;
            width: 100%;
            height: calc(100% - 134px);
            pointer-events: none;
        }

        .service-card {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 82px;
            height: 82px;
            border: 1px solid rgba(204, 173, 136, 0.34);
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 18px 32px rgba(180, 150, 110, 0.16);
            backdrop-filter: blur(12px);
            animation: float-card 5.5s ease-in-out infinite;
            z-index: 3;
        }

        .service-card strong,
        .service-card span,
        .service-card svg {
            position: relative;
            z-index: 1;
        }

        .service-card.netflix {
            left: 122px;
            top: 128px;
            transform: rotate(-10deg);
            color: #e03d36;
            font-size: 3rem;
            font-weight: 800;
            animation-delay: -0.6s;
        }

        .service-card.youtube {
            left: 214px;
            top: 176px;
            transform: rotate(4deg);
            animation-delay: -2.1s;
        }

        .service-card.youtube svg {
            width: 50px;
            height: 36px;
            filter: drop-shadow(0 10px 14px rgba(246, 35, 35, 0.16));
        }

        .service-card.vpn {
            left: 230px;
            top: 38px;
            flex-direction: column;
            width: 96px;
            height: 96px;
            color: #c89b53;
            transform: rotate(-8deg);
            animation-delay: -1.4s;
        }

        .service-card.vpn span {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .service-card.spotify {
            right: 146px;
            top: 98px;
            transform: rotate(7deg);
            animation-delay: -0.9s;
        }

        .service-card.spotify svg {
            width: 44px;
            height: 44px;
        }

        .service-card.tv {
            right: 56px;
            top: 40px;
            transform: rotate(-8deg);
            color: #bb9458;
            animation-delay: -1.8s;
        }

        .service-card.apple-tv {
            right: 0;
            top: 124px;
            transform: rotate(10deg);
            color: #c5af88;
            animation-delay: -2.6s;
        }

        .service-card.apple-tv span,
        .service-card.tv span {
            font-size: 1.4rem;
            font-weight: 800;
        }

        .service-card.disney {
            right: 98px;
            top: 188px;
            background: #21396f;
            color: #ffffff;
            border-color: rgba(33, 57, 111, 0.08);
            font-size: 1.18rem;
            font-weight: 700;
            animation-delay: -1.1s;
        }

        .service-card.prime {
            right: 28px;
            top: 292px;
            color: #2185c8;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.05;
            text-align: center;
            animation-delay: -2.3s;
        }

        .service-card.user-mini {
            left: 164px;
            top: 260px;
            width: 72px;
            height: 72px;
            color: #ead5af;
            animation-delay: -1.7s;
        }

        .service-card.user-mini svg {
            width: 30px;
            height: 30px;
        }

        .service-card.central-users {
            left: 336px;
            top: 286px;
            width: 72px;
            height: 72px;
            border-radius: 18px;
            background: linear-gradient(180deg, #e3bf7f 0%, #c99142 100%);
            color: #fff6ea;
            border-color: rgba(201, 145, 66, 0.18);
            box-shadow: 0 18px 28px rgba(201, 145, 66, 0.24);
            animation-delay: -0.4s;
        }

        .service-card.central-users svg {
            width: 36px;
            height: 36px;
        }

        .scene {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: auto;
            z-index: 2;
        }

        .stats-board {
            margin-top: 18px;
            padding: 14px;
            border: 1px solid rgba(204, 171, 130, 0.22);
            border-radius: 30px;
            background: rgba(255, 250, 244, 0.92);
            box-shadow: var(--shadow);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 14px;
            min-height: 78px;
            padding: 12px 14px;
            border-radius: 22px;
        }

        .stat-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border-radius: 16px;
            background: linear-gradient(180deg, #f7ecd9 0%, #f1dcc0 100%);
            color: #ba8442;
        }

        .stat-icon .icon-svg {
            width: 1.16rem;
            height: 1.16rem;
        }

        .stat-value {
            display: block;
            margin-bottom: 3px;
            color: #241d19;
            font-size: 1.46rem;
            font-weight: 800;
            letter-spacing: -0.03em;
        }

        .stat-label {
            color: #584b41;
            font-size: 0.96rem;
            font-weight: 500;
        }

        .sparkle {
            position: absolute;
            right: 8px;
            bottom: -18px;
            width: 34px;
            height: 34px;
            opacity: 0.78;
        }

        @keyframes float-card {
            0%,
            100% {
                transform: translateY(0) rotate(var(--rotate, 0deg));
            }

            50% {
                transform: translateY(-10px) rotate(var(--rotate, 0deg));
            }
        }

        .service-card.netflix { --rotate: -10deg; }
        .service-card.youtube { --rotate: 4deg; }
        .service-card.vpn { --rotate: -8deg; }
        .service-card.spotify { --rotate: 7deg; }
        .service-card.tv { --rotate: -8deg; }
        .service-card.apple-tv { --rotate: 10deg; }

        @media (prefers-reduced-motion: reduce) {
            .service-card {
                animation: none;
            }
        }

        @media (max-width: 1120px) {
            .page-shell {
                width: min(1210px, calc(100% - 38px));
            }

            .hero {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .hero-copy {
                max-width: 680px;
                padding-top: 22px;
            }

            .hero-description {
                max-width: 32ch;
            }

            .hero-visual {
                max-width: 760px;
                width: 100%;
                margin: 0 auto;
            }
        }

        @media (max-width: 880px) {
            .topbar {
                padding-bottom: 18px;
            }

            .brand-name {
                font-size: 1.75rem;
            }

            .hero-copy {
                padding-top: 8px;
            }

            .hero-title {
                font-size: clamp(2.7rem, 8vw, 4.35rem);
            }

            .hero-title span {
                white-space: normal;
            }

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

            .stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 680px) {
            .landing-page {
                padding-top: 14px;
                padding-bottom: 28px;
            }

            .page-shell {
                width: calc(100% - 22px);
            }

            .topbar {
                flex-wrap: wrap;
                gap: 12px 18px;
            }

            .topbar-actions {
                width: 100%;
                justify-content: flex-end;
                gap: 14px;
            }

            .signup-link {
                min-height: 46px;
                padding: 0 18px;
                border-radius: 14px;
            }

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

            .hero-pill {
                min-height: 40px;
                padding: 0 14px;
                font-size: 0.88rem;
            }

            .hero-description {
                max-width: 25ch;
                font-size: 1rem;
            }

            .hero-actions {
                margin-top: 28px;
            }

            .primary-cta {
                min-height: 54px;
                padding: 0 14px 0 18px;
            }

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

            .service-card {
                width: 56px;
                height: 56px;
                border-radius: 18px;
            }

            .service-card.netflix {
                left: 54px;
                top: 86px;
                font-size: 2rem;
            }

            .service-card.youtube {
                left: 126px;
                top: 126px;
            }

            .service-card.vpn {
                left: 142px;
                top: 18px;
                width: 70px;
                height: 70px;
            }

            .service-card.vpn span {
                font-size: 1rem;
            }

            .service-card.spotify {
                right: 84px;
                top: 72px;
            }

            .service-card.tv {
                right: 28px;
                top: 26px;
            }

            .service-card.tv span,
            .service-card.apple-tv span {
                font-size: 1rem;
            }

            .service-card.apple-tv {
                right: 0;
                top: 92px;
            }

            .service-card.disney {
                right: 52px;
                top: 146px;
                font-size: 0.8rem;
            }

            .service-card.prime {
                right: 10px;
                top: 216px;
                font-size: 0.76rem;
            }

            .service-card.user-mini {
                left: 84px;
                top: 206px;
                width: 48px;
                height: 48px;
            }

            .service-card.central-users {
                left: 204px;
                top: 222px;
                width: 50px;
                height: 50px;
                border-radius: 14px;
            }

            .stats-board {
                margin-top: 8px;
                padding: 12px;
                border-radius: 24px;
            }

            .stat-item {
                min-height: 72px;
                padding: 10px 12px;
                gap: 12px;
            }

            .stat-icon {
                width: 40px;
                height: 40px;
                border-radius: 14px;
            }

            .stat-value {
                font-size: 1.24rem;
            }

            .stat-label {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .brand {
                gap: 10px;
            }

            .brand-mark {
                width: 36px;
                height: 36px;
                flex-basis: 36px;
            }

            .brand-name {
                font-size: 1.5rem;
            }

            .topbar-actions {
                justify-content: space-between;
            }

            .login-link {
                font-size: 0.94rem;
            }

            .signup-link {
                min-height: 42px;
                padding: 0 15px;
                font-size: 0.92rem;
            }

            .hero-title {
                margin-top: 24px;
                font-size: clamp(2.35rem, 12vw, 3.15rem);
            }

            .hero-description {
                max-width: 100%;
                font-size: 0.95rem;
            }

            .hero-actions {
                width: 100%;
            }

            .primary-cta {
                width: 100%;
                justify-content: center;
            }

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

            .network-lines {
                inset: 36px 0 82px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    
    <div class="landing-page">
        <div class="page-shell">
            <header class="topbar">
                <a href="http://127.0.0.1:8000" class="brand" aria-label="BlackSplit home">
                    <span class="brand-mark" aria-hidden="true"><span></span></span>
                    <span class="brand-name">BlackSplit</span>
                </a>

                <div class="topbar-actions">
                    <a href="http://127.0.0.1:8000/login" class="login-link">Log in</a>

                                            <a href="http://127.0.0.1:8000/register" class="signup-link">Sign up</a>
                                    </div>
            </header>

            <main>
                <section class="hero">
                    <div class="hero-copy">
                        <div class="hero-pill">
                            <svg class="icon-svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 20C11.7 20 11.4 19.9 11.2 19.7L4.3 13.4C2.8 12 2 10.7 2 9.1C2 6.5 4 4.5 6.6 4.5C8.2 4.5 9.7 5.3 10.7 6.6L12 8.1L13.3 6.6C14.3 5.3 15.8 4.5 17.4 4.5C20 4.5 22 6.5 22 9.1C22 10.7 21.2 12 19.7 13.4L12.8 19.7C12.6 19.9 12.3 20 12 20Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                            </svg>
                            <span>More Together, Less Cost</span>
                        </div>

                        <h1 class="hero-title">
                            <span>Better Together,</span>
                            <span>Lower Cost.</span>
                        </h1>

                        <p class="hero-description">
                            Split subscription bills effortlessly and save every month.
                        </p>

                        <div class="hero-actions">
                            <a href="http://127.0.0.1:8000/subscriptions" class="primary-cta">
                                <span>Get Started</span>
                                <span>
                                    <svg class="icon-svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 17L17 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
                                        <path d="M9 7H17V15" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>

                    <div class="hero-visual" aria-hidden="true">
                        <svg class="network-lines" viewBox="0 0 640 500" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M248 78C264 118 270 150 266 184" stroke="#E9CFA7" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="5 8"/>
                            <path d="M164 166C208 178 230 184 266 184" stroke="#E9CFA7" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="5 8"/>
                            <path d="M308 202C344 180 376 154 416 142" stroke="#E9CFA7" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="5 8"/>
                            <path d="M304 212C366 234 408 248 452 264" stroke="#E9CFA7" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="5 8"/>
                            <path d="M302 212C332 266 344 282 372 316" stroke="#E9CFA7" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="5 8"/>
                            <path d="M266 202C226 232 198 250 170 276" stroke="#E9CFA7" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="5 8"/>
                            <circle cx="267" cy="184" r="6" fill="#D9AC68"/>
                            <circle cx="308" cy="203" r="5" fill="#D9AC68"/>
                            <circle cx="342" cy="223" r="5" fill="#D9AC68"/>
                            <circle cx="168" cy="275" r="5" fill="#D9AC68"/>
                            <circle cx="449" cy="264" r="5" fill="#D9AC68"/>
                            <circle cx="417" cy="143" r="5" fill="#D9AC68"/>
                        </svg>

                        <div class="service-card vpn">
                            <span>VPN</span>
                        </div>

                        <div class="service-card netflix">
                            <strong>N</strong>
                        </div>

                        <div class="service-card youtube">
                            <svg viewBox="0 0 62 44" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                <rect x="1" y="5" width="60" height="34" rx="12" fill="#F62323"/>
                                <path d="M26 15L40 22L26 29V15Z" fill="#fff"/>
                            </svg>
                        </div>

                        <div class="service-card spotify">
                            <svg viewBox="0 0 48 48" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="24" cy="24" r="24" fill="#1ED760"/>
                                <path d="M14 19.2C21.2 16.9 28.2 17.3 35 20" stroke="#1D1D1D" stroke-width="3" stroke-linecap="round"/>
                                <path d="M15.5 25.4C21.3 23.6 27 23.9 32.4 26" stroke="#1D1D1D" stroke-width="2.7" stroke-linecap="round"/>
                                <path d="M17.4 31.2C21.5 29.9 25.3 30.1 29 31.7" stroke="#1D1D1D" stroke-width="2.5" stroke-linecap="round"/>
                            </svg>
                        </div>

                        <div class="service-card tv">
                            <span>tv+</span>
                        </div>

                        <div class="service-card apple-tv">
                            <span>tv+</span>
                        </div>

                        <div class="service-card disney">
                            <strong>Disney+</strong>
                        </div>

                        <div class="service-card prime">
                            <strong>prime</strong><br>video
                        </div>

                        <div class="service-card user-mini">
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
                                <path d="M5 19C6.3 15.9 8.8 14.5 12 14.5C15.2 14.5 17.7 15.9 19 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>

                        <div class="service-card central-users">
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="8" cy="9" r="3" fill="currentColor"/>
                                <circle cx="16" cy="8" r="3" fill="currentColor"/>
                                <path d="M3.5 18C4.5 15.3 6.7 14 9.2 14C11.8 14 13.8 15.1 15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M12.8 18C13.7 16.1 15.4 15 17.5 15C19.3 15 20.8 15.8 21.6 17.7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>

                        <svg class="scene" viewBox="0 0 680 360" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <filter id="softShadow" x="-20%" y="-20%" width="140%" height="150%">
                                    <feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#C7A173" flood-opacity="0.20"/>
                                </filter>
                            </defs>

                            <ellipse cx="352" cy="330" rx="224" ry="18" fill="#E9D7C2" opacity="0.75"/>

                            <g filter="url(#softShadow)">
                                <path d="M130 210C130 184 150 164 176 164H501C530 164 553 186 553 215V272H130V210Z" fill="#E9D9C9"/>
                                <rect x="174" y="184" width="330" height="72" rx="28" fill="#F7EBDD"/>
                                <path d="M116 198C116 177 132 160 153 160H188V272H116V198Z" fill="#EFDCC9"/>
                                <path d="M567 198C567 177 551 160 530 160H495V272H567V198Z" fill="#EFDCC9"/>
                                <path d="M164 273H207L190 321H154L164 273Z" fill="#A77845"/>
                                <path d="M474 273H514L530 321H496L474 273Z" fill="#A77845"/>
                            </g>

                            <g>
                                <ellipse cx="352" cy="273" rx="90" ry="14" fill="#B57C48"/>
                                <rect x="280" y="248" width="144" height="22" rx="11" fill="#BD8350"/>
                                <path d="M306 270H320L312 320H300L306 270Z" fill="#9B6837"/>
                                <path d="M384 270H398L406 320H394L384 270Z" fill="#9B6837"/>
                                <rect x="330" y="238" width="48" height="34" rx="6" fill="#D6D7DB"/>
                                <rect x="336" y="241" width="36" height="24" rx="4" fill="#AEB2BB"/>
                                <path d="M276 242C280 228 290 220 304 220C320 220 328 231 331 242H276Z" fill="#F5F0E9"/>
                                <path d="M399 242C402 228 411 220 425 220C440 220 449 231 452 242H399Z" fill="#F5F0E9"/>
                                <rect x="287" y="214" width="6" height="28" rx="3" fill="#7B5A3B"/>
                                <rect x="415" y="214" width="6" height="28" rx="3" fill="#7B5A3B"/>
                                <path d="M286 212C286 204 292 198 300 198C309 198 315 204 315 212C315 220 309 226 300 226C292 226 286 220 286 212Z" fill="#77BA6E"/>
                                <path d="M414 212C414 204 420 198 428 198C437 198 443 204 443 212C443 220 437 226 428 226C420 226 414 220 414 212Z" fill="#77BA6E"/>
                            </g>

                            <g>
                                <circle cx="202" cy="164" r="25" fill="#F1C8A3"/>
                                <path d="M178 160C181 136 193 124 213 124C228 124 239 133 243 151L245 166H178V160Z" fill="#3A2A33"/>
                                <path d="M170 232C170 195 186 176 214 176C240 176 258 194 261 232H170Z" fill="#D48567"/>
                                <path d="M178 230L201 300H174L152 246L178 230Z" fill="#2F4C7D"/>
                                <path d="M228 232L250 300H222L207 250L228 232Z" fill="#35598D"/>
                                <rect x="220" y="200" width="21" height="38" rx="6" transform="rotate(-14 220 200)" fill="#2E323A"/>
                            </g>

                            <g>
                                <circle cx="296" cy="158" r="25" fill="#F0BF98"/>
                                <path d="M272 155C274 133 289 120 309 120C324 120 336 129 339 149L341 166H272V155Z" fill="#4C3429"/>
                                <path d="M262 228C264 192 281 173 308 173C335 173 353 191 355 228H262Z" fill="#F0BC58"/>
                                <path d="M272 228L292 302H265L245 250L272 228Z" fill="#243A63"/>
                                <path d="M327 228L346 302H318L302 248L327 228Z" fill="#2C4678"/>
                                <rect x="305" y="198" width="21" height="40" rx="6" transform="rotate(-12 305 198)" fill="#2D3138"/>
                            </g>

                            <g>
                                <circle cx="395" cy="164" r="24" fill="#F0BF98"/>
                                <path d="M371 158C373 136 387 123 406 123C422 123 434 134 437 152L439 168H371V158Z" fill="#2A2834"/>
                                <path d="M360 230C362 196 379 177 405 177C432 177 450 196 452 230H360Z" fill="#66B075"/>
                                <path d="M373 230L388 300H360L345 254L373 230Z" fill="#2E446B"/>
                                <path d="M421 230L438 300H410L398 252L421 230Z" fill="#29426A"/>
                                <rect x="409" y="202" width="21" height="39" rx="6" transform="rotate(-10 409 202)" fill="#2F343C"/>
                            </g>

                            <g>
                                <circle cx="494" cy="162" r="24" fill="#F0BF98"/>
                                <path d="M470 155C472 135 486 123 506 123C522 123 534 132 537 150L540 168H470V155Z" fill="#273348"/>
                                <path d="M454 230C459 195 477 177 505 177C532 177 551 196 554 230H454Z" fill="#5C83C2"/>
                                <path d="M466 230L482 304H454L440 256L466 230Z" fill="#314B7A"/>
                                <path d="M520 230L540 304H511L498 252L520 230Z" fill="#314B7A"/>
                                <rect x="498" y="202" width="21" height="39" rx="6" transform="rotate(-12 498 202)" fill="#2D323A"/>
                                <circle cx="479" cy="164" r="3.5" fill="#273348"/>
                                <circle cx="498" cy="164" r="3.5" fill="#273348"/>
                            </g>
                        </svg>

                        <svg class="sparkle" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17 0L19.8 14.2L34 17L19.8 19.8L17 34L14.2 19.8L0 17L14.2 14.2L17 0Z" fill="#F4E5C9"/>
                        </svg>
                    </div>
                </section>

                <section class="stats-board" aria-label="Platform highlights">
                    <div class="stats-grid">
                        <div class="stat-item">
                            <span class="stat-icon">
                                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="8" cy="9" r="3" stroke="currentColor" stroke-width="2"/>
                                    <circle cx="16.5" cy="8" r="2.5" stroke="currentColor" stroke-width="2"/>
                                    <path d="M3 19C4.1 15.8 6.7 14.4 9.7 14.4C12.8 14.4 15.2 15.9 16.2 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                    <path d="M14.5 18.7C15.2 16.8 16.7 15.8 18.7 15.8C20 15.8 21.1 16.3 21.8 17.4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </span>
                            <div>
                                <span class="stat-value">20K+</span>
                                <span class="stat-label">Happy Users</span>
                            </div>
                        </div>

                        <div class="stat-item">
                            <span class="stat-icon">
                                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 3L21 8L12 13L3 8L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                                    <path d="M5 11.5L12 15.5L19 11.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M5 15.5L12 19.5L19 15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <div>
                                <span class="stat-value">500K+</span>
                                <span class="stat-label">Groups Created</span>
                            </div>
                        </div>

                        <div class="stat-item">
                            <span class="stat-icon">
                                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="3" y="6" width="18" height="12" rx="3" stroke="currentColor" stroke-width="2"/>
                                    <circle cx="12" cy="12" r="2.2" stroke="currentColor" stroke-width="2"/>
                                    <path d="M7 9.3C6.1 9.3 5.3 10.1 5.3 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                    <path d="M17 14.7C17.9 14.7 18.7 13.9 18.7 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </span>
                            <div>
                                <span class="stat-value">1M+</span>
                                <span class="stat-label">Payments Made</span>
                            </div>
                        </div>

                        <div class="stat-item">
                            <span class="stat-icon">
                                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 3L19 6V11.2C19 15.8 16.1 19.8 12 21C7.9 19.8 5 15.8 5 11.2V6L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                                    <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <div>
                                <span class="stat-value">99.9%</span>
                                <span class="stat-label">Secure Payments</span>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>
    </div>
</body>
</html>
