@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

    :root {
        --primary: #2563EB;
        --secondary: #06D6A0;
        --gradient: linear-gradient(90deg, #2563EB 0%, #2F9BF6 45%, #06D6A0 100%);
    }

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

    body {
        font-family: 'Inter', system-ui, sans-serif;
        background: #ffffff;
    }

    .logo-font {
        font-family: 'Space Grotesk', sans-serif;
    }

    ::selection {
        background: #06D6A0;
        color: #052e23;
    }

    :focus-visible {
        outline: 2px solid #2563EB;
        outline-offset: 3px;
        border-radius: 4px;
    }

    .hero-bg {
        background:
            radial-gradient(circle at 15% 20%, rgba(37, 99, 235, .10), transparent 40%),
            radial-gradient(circle at 85% 15%, rgba(6, 214, 160, .14), transparent 40%),
            linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    }

    .text-gradient {
        background-image: var(--gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ---------- floating nav ---------- */
    #siteNav {
        transition: top .45s cubic-bezier(.16, 1, .3, 1), max-width .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
    }

    #siteNav.nav-shrunk {
        top: 12px;
        box-shadow: 0 12px 34px -14px rgba(15, 23, 42, .18);
    }

    .glass-nav {
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        border: 1px solid rgba(15, 23, 42, .07);
    }

    .nav-link {
        position: relative;
        color: rgba(15, 23, 42, .68);
        transition: color .3s;
    }

    .nav-link:hover {
        color: #2563EB;
    }

    .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 2px;
        background: var(--gradient);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .35s ease;
    }

    .nav-link:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .btn-primary {
        padding: .8rem 1.6rem;
        border-radius: 999px;
        color: #fff;
        font-weight: 600;
        background: var(--gradient);
        transition: .3s;
        box-shadow: 0 10px 25px -8px rgba(37, 99, 235, .45);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
        box-shadow: 0 16px 34px -10px rgba(37, 99, 235, .55);
    }

    .btn-primary:disabled {
        opacity: .75;
        cursor: default;
        transform: none;
    }

    .btn-ghost {
        border: 1px solid rgba(15, 23, 42, .14);
        background: rgba(255, 255, 255, .7);
        color: #0f172a;
        transition: .3s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    .btn-ghost:hover {
        background: #fff;
        border-color: rgba(15, 23, 42, .22);
        transform: translateY(-2px);
    }

    /* ---------- hamburger ---------- */
    .hamburger {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: rgba(15, 23, 42, .05);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        transition: .3s;
    }

    .hamburger:hover {
        background: rgba(15, 23, 42, .09);
    }

    .burger-bar {
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #0f172a;
        transition: transform .35s, opacity .3s;
    }

    #hamburgerBtn[aria-expanded="true"] .burger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    #hamburgerBtn[aria-expanded="true"] .burger-bar:nth-child(2) {
        opacity: 0;
    }

    #hamburgerBtn[aria-expanded="true"] .burger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ---------- mobile sidebar ---------- */
    #mobileSidebar {
        transform: translateX(100%);
        transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    #mobileSidebar.open {
        transform: translateX(0);
    }

    #sidebarOverlay {
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s ease;
    }

    #sidebarOverlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .text-brand-blue {
        --tw-text-opacity: 1;
        color: rgb(0 123 255 / var(--tw-text-opacity, 1));
    }

    .brand-gradient-bg {
        background-image: linear-gradient(120deg, #007bff, #0e8fe8 45%, #00d4c5);
    }

    .font-display {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: -.025em;
    }

    .glass-panel {
        background: #ffffffb8;
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, .6);
        box-shadow: 0 1px #ffffffb3 inset, 0 30px 80px -30px #141e5038;
    }

    .animate-float-slower {
        animation: float-slower 10s ease-in-out infinite;
    }

    @keyframes breathe {

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

        50% {
            transform: translateY(-4px) scale(1.015);
        }
    }

    .floating-card {
        animation: breathe 5s ease-in-out infinite;
    }

    .transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .15s;
    }

    /* ---------- misc ---------- */
    .card-hover {
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
    }

    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .06);
    }

    .stat-number {
        font-variant-numeric: tabular-nums;
    }

    .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .chart-line {
        stroke-dasharray: 480;
        stroke-dashoffset: 480;
        transition: stroke-dashoffset 1.6s cubic-bezier(.16, 1, .3, 1);
    }

    .chart-line.drawn {
        stroke-dashoffset: 0;
    }

    .chart-area {
        opacity: 0;
        transition: opacity 1.2s ease .4s;
    }

    .chart-area.drawn {
        opacity: 1;
    }

    .qr-dot {
        background: #0f172a;
        border-radius: 1px;
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: .001ms !important;
            transition-duration: .2s !important;
            scroll-behavior: auto !important;
        }
    }

    .cta-footer-bg {
        --tw-bg-opacity: 1;
        background-color: rgb(26 26 30 / var(--tw-bg-opacity, 1));
    }

    /* ---------- LOGIN/REGISTER ---------- */

    .field-input {
        width: 100%;
        border-radius: 12px;
        border: 1px solid #E2E8F0;
        padding: .85rem 1rem;
        font-size: 15px;
        color: #0f172a;
        transition: border-color .2s, box-shadow .2s;
        outline: none;
    }

    .field-input::placeholder {
        color: #94a3b8;
    }

    .field-input:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
    }

    .field-input.field-error {
        border-color: #f87171;
        box-shadow: 0 0 0 4px rgba(248, 113, 113, .1);
    }

    .social-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        padding: .8rem;
        font-size: 14px;
        font-weight: 500;
        color: #334155;
        transition: .2s;
        background: #fff;
    }

    .social-btn:hover {
        background: #F8FAFC;
        border-color: #CBD5E1;
    }

    .auth-panel-bg {
        background:
            radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .16), transparent 45%),
            radial-gradient(circle at 82% 78%, rgba(255, 255, 255, .14), transparent 42%),
            linear-gradient(160deg, #2563EB 0%, #1798C1 55%, #06D6A0 100%);
    }

    .auth-view {
        animation: fadeUp .6s cubic-bezier(.16, 1, .3, 1) both;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .stagger-1 {
        animation-delay: .05s;
    }

    .stagger-2 {
        animation-delay: .1s;
    }

    .stagger-3 {
        animation-delay: .15s;
    }

    .stagger-4 {
        animation-delay: .2s;
    }

    #toast {
        transition: opacity .3s ease, transform .3s ease;
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: .001ms !important;
            transition-duration: .1s !important;
        }
    }

    .strength-bar {
        height: 4px;
        border-radius: 999px;
        background: #E2E8F0;
        overflow: hidden;
    }

    .strength-fill {
        height: 100%;
        width: 0%;
        border-radius: 999px;
        transition: width .35s ease, background-color .35s ease;
    }