html, body {
            font-family: 'Comfortaa', cursive !important;
        }
        body {
            background: #f8fafc;
            color: #222;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        html {
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        @media (min-width: 576px) {
            ::-webkit-scrollbar {
                width: 10px;
                background: #e5e7eb;
            }
            ::-webkit-scrollbar-thumb {
                background: #60a5fa;
                border-radius: 8px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #2563eb;
            }
            ::-webkit-scrollbar-corner {
                background: #e5e7eb;
            }
        }
        @media (min-width: 576px) {
            html {
                scrollbar-color: #60a5fa #e5e7eb;
                scrollbar-width: thin;
            }
        }
        .hero {
            position: relative;
            overflow: hidden;
            padding: 80px 0 40px 0;
            text-align: center;
            background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
            margin-top: 72px;
        }
        #vanta-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0; left: 0;
            z-index: 0;
        }
        @media (max-width: 575px) {
            .hero {
                position: relative;
                z-index: 1;
                margin-top: 56px;
            }
            .hero::before {
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                z-index: 1;
                backdrop-filter: blur(3px);
                background: rgba(255,255,255,0.3);
                pointer-events: none;
            }
            .hero > .container {
                position: relative;
                z-index: 2;
            }
            #vanta-bg {
                z-index: 0;
            }
        }
        .hero > .container {
            position: relative;
            z-index: 1;
        }
        .navbar {
            background: #fff !important;
            box-shadow: 0 3px 0px #c5c5c5;
            position: fixed;
            /* border-radius: 15px; */ /* Remove old border-radius */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1050;
        }
        @media (min-width: 992px) {
            .navbar {
                border-radius: 99px !important; /* Fully circular border radius */
                top: 15px !important; /* Move navbar a bit lower */
                width: calc(90% - 48px) !important; /* Both sides reduced by 24px */
                margin-left:  30px !important;
                margin-right: 2px !important;
                left: 60px;
                right: 24px;
            }
        }
        @media (max-width: 991.98px) {
            .navbar {
                border-radius: 15px !important; /* Keep original for mobile */
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
            }
        }
        .navbar-brand {
            font-weight: bold;
            letter-spacing: 1px;
            color: #222 !important;
        }
        .navbar-nav .nav-link,
        .navbar-nav .btn {
            color: #222 !important;
            background: transparent;
        }
        .navbar-nav .btn.btn-primary {
            background: #3b82f6;
            border: none;
            color: #fff !important;
            border-radius: 50px !important;
        }
        .navbar-toggler {
            border-color: #bbb;
        }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%2834,34,34,0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
        .hero-title {
            font-size: 2.7rem;
            font-weight: 700;
            color: #222;
        }
        .hero-desc {
            font-size: 1.25rem;
            margin-top: 20px;
            color: #444;
        }
        .btn-success {
            background: #22c55e;
            border: none;
            color: #fff;
        }
        .btn-success:hover {
            background: #16a34a;
        }
        .carousel-inner {
            border-radius: 18px;
            overflow: hidden;
            max-width: 1200px;
            margin: 0 auto;
            background: #f1f5f9;
        }
        .carousel-item img {
            width: 100%;
            height: 340px;
            object-fit: cover;
            object-position: center;
            background: #f1f5f9;
            filter: brightness(0.97) contrast(1.03);
        }
        @media (max-width: 991px) {
            .carousel-item img {
                height: 220px;
            }
        }
        @media (max-width: 575px) {
            .carousel-inner {
                border-radius: 10px;
            }
            .carousel-item img {
                height: 220px;
            }
            .carousel-caption {
                font-size: 1rem;
                padding: 0.7rem 1rem;
            }
        }
        .carousel-caption {
            background: rgba(255,255,255,0.85);
            border-radius: 81px;
            left: 10%;
            right: 10%;
            bottom: 18px;
            padding: 0.8rem 1.2rem;
            color: #222;
        }
        .carousel-caption h5 {
            color: #222;
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            filter: invert(0.2);
        }
        footer {
            background: #f1f5f9;
            color: #333;
            text-align: center;
            padding: 18px 0 10px 0;
            font-size: 1rem;
            letter-spacing: 1px;
            margin-top: 40px;
            position: relative;
            overflow: hidden;
        }
        #vanta-footer-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0;
            pointer-events: none;
        }
        footer > .container,
        footer > div[style*="border-top"] {
            position: relative;
            z-index: 1;
        }
        .card.bg-dark,
        .card.bg-dark.text-light,
        .card.bg-dark.text-light.shadow,
        .card.bg-dark.text-light.shadow.border-0,
        .card.bg-dark.text-light.shadow.border-0.h-100,
        .card.bg-dark.text-light.shadow.border-0.p-4,
        .card.bg-dark.text-light.shadow.border-0.p-4.mb-4 {
            background: #fff !important;
            color: #222 !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
        }
        .card.bg-dark .card-body {
            padding-left: 4vw;
            padding-right: 4vw;
        }
        @media (max-width: 991px) {
            .card.bg-dark .card-body {
                padding-left: 2vw;
                padding-right: 2vw;
            }
        }
        @media (max-width: 575px) {
            .card.bg-dark .card-body {
                padding-left: 2vw;
                padding-right: 2vw;
            }
            .container-fluid, .container {
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                width: 100vw !important;
                max-width: 100vw !important;
            }
            .row {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            .col-6, .col-sm-4, .col-md-2 {
                padding-left: 4px !important;
                padding-right: 4px !important;
            }
            .carousel-inner {
                border-radius: 10px;
            }
            .carousel-item img {
                height: 220px;
            }
            .carousel-caption {
                font-size: 1rem;
                padding: 0.7rem 1rem;
            }
        }
        .btn-animate-pulse {
            box-shadow: 0 0 0 0 rgba(59,130,246,0.7);
            transition: box-shadow 0.2s;
        }
        @media (max-width: 991px) {
            .navbar-toggler {
                animation: pulse-btn 1.2s infinite;
                box-shadow: 0 0 0 0 rgba(59,130,246,0.7);
                transition: box-shadow 0.2s;
            }
        }
        @keyframes pulse-btn {
            0% {
                box-shadow: 0 0 0 0 rgba(59,130,246,0.7);
                transform: scale(1);
            }
            70% {
                box-shadow: 0 0 0 12px rgba(59,130,246,0.0);
                transform: scale(1.08);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(59,130,246,0.0);
                transform: scale(1);
            }
        }
        .brand-animate-pulse {
            display: inline-block;
            animation: brand-pulse 1.4s infinite;
        }
        @keyframes brand-pulse {
            0% { transform: scale(1); }
            60% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }
        .brand-typing {
            display: inline-block;
            white-space: pre;
            font-weight: bold;
            letter-spacing: 1px;
            color: #222;
        }
        .brand-typing .typed-cursor {
            display: inline-block;
            width: 1ch;
            animation: blink-cursor 0.8s steps(1) infinite;
        }
        @keyframes blink-cursor {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        @media (max-width: 475px) {
            .navbar-nav .btn.btn-primary {
                display: block;
                width: 100%;
                margin-top: 8px;
                margin-bottom: 8px;
                text-align: center;
                font-size: 1.15rem;
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
            }
        }
        .fadeInUp {
            opacity: 0;
            transform: translateY(40px);
            animation: fadeInUpAnim 0.8s ease-out forwards;
        }
        @keyframes fadeInUpAnim {
            to {
                opacity: 1;
                transform: none;
            }
        }
        .iphone-mockup {
            width:4360px;
            height: 640px;
            background: url('https://static.vecteezy.com/system/resources/thumbnails/042/538/623/small/white-smartphone-mockup-blank-screen-isolated-on-transparent-background-smartphone-mockup-frame-free-png.png') no-repeat center center;
            background-size: contain;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
        .iphone-mockup-img {
            width: 203px;
            height: 440px;
            object-fit: cover;
            border-radius: 24px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
        }
        @media (max-width: 991px) {
            .iphone-mockup {
                width: 220px;
                height: 440px;
            }
            .iphone-mockup-img {
                width: 170px;
                height: 340px;
                top: 40px;
            }
        }
        @media (max-width: 575px) {
            .iphone-mockup {
                width: 360px;
                height: 320px;
            }
            .iphone-mockup-img {
                width: 130px;
                height: 270px;
                top: 24px;
            }
        }
        .fadeInLeft, .fadeInRight {
            opacity: 0;
            transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
            will-change: opacity, transform;
        }
        .fadeInLeft {
            transform: translateX(-60px);
        }
        .fadeInRight {
            transform: translateX(60px);
        }
        .fadeInLeft.visible, .fadeInRight.visible {
            opacity: 1;
            transform: none;
        }
        @media (max-width: 991.98px) {
            .fadeInLeft, .fadeInRight {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
            }
        }
        .tap-effect {
            position: fixed;
            pointer-events: none;
            border-radius: 50%;
            width: 6px;
            height: 6px;
            background: rgba(59,130,246,0.15);
            box-shadow: 0 0 16px 8px rgba(59,130,246,0.10);
            filter: blur(2.5px);
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            z-index: 9999;
            animation: tap-effect-anim 0.3s cubic-bezier(.4,0,.2,1) forwards;
        }
        @keyframes tap-effect-anim {
            0% {
                opacity: 0.85;
                transform: translate(-50%, -50%) scale(0.7);
            }
            80% {
                opacity: 0.7;
                transform: translate(-50%, -50%) scale(1.1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.25);
            }
        }
        ::selection {
            background: #bae6fd;
            color: #222;
        }
        ::-moz-selection {
            background: #bae6fd;
            color: #222;
        }
        @media (max-width: 991.98px) {
            .navbar-toggler,
            .navbar-collapse {
                display: none !important;
            }
            .mobile-login-btn {
                display: inline-block !important;
            }
        }
        @media (min-width: 992px) {
            .mobile-login-btn {
                display: none !important;
            }
        }
        .mobile-login-btn {
            display: none;
            box-shadow: 0 2px 2px rgba(0, 51, 237, 0.88);
            border-radius: 30px;
            margin-right: 10px;
            margin-left: auto;
        }
        .info-card {
            border-radius: 28px;
            border: 2.5px solid #eee;
            box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07);
            margin-bottom: 12px;
            padding: 1.7rem 2.2rem;
            font-family: 'Comfortaa', cursive;
            transition: box-shadow 0.2s, transform 0.2s;
        }
        .info-card .card-title {
            font-size: 1.45rem;
            font-weight: 700;
            margin-bottom: 0.7rem;
        }
        .info-card .card-text {
            font-size: 1.08rem;
            font-weight: 500;
        }
        .info-card-yellow {
            background: #ffe29a;
            border-color: #ffd36b;
            color: #3d2c00;
        }
        .info-card-yellow .card-title,
        .info-card-yellow .card-text {
            color: #3d2c00;
        }
        .info-card-purple {
            background: #e3d7ff;
            border-color: #b7a6f7;
            color: #3d2c5a;
        }
        .info-card-purple .card-title,
        .info-card-purple .card-text {
            color: #3d2c5a;
        }
        .info-card-green {
            background: #caffd7;
            border-color: #7be7a3;
            color: #1d3d2c;
        }
        .info-card-green .card-title,
        .info-card-green .card-text {
            color: #1d3d2c;
        }
        .info-card-blue {
            background: #e3f0ff;
            border-color: #90c6fd;
            color: #1a3557;
        }
        .info-card-blue .card-title,
        .info-card-blue .card-text {
            color: #1a3557;
        }
        .info-card-orange {
            background: #ffe5d0;
            border-color: #ffcba4;
            color: #7a3a00;
        }
        .info-card-orange .card-title,
        .info-card-orange .card-text {
            color: #7a3a00;
        }
        @media (max-width: 575px) {
            .info-card {
                padding: 1.1rem 0.7rem;
                font-size: 1rem;
            }
            .info-card .card-title {
                font-size: 1.15rem;
            }
            .info-card .card-text {
                font-size: 0.98rem;
            }
        }