:root {
            --ink: #14171A;
            --ink-soft: #2A2E33;
            --sand: #FFF8F0;
            --white: #FFFFFF;
            --orange: #F58220;
            --orange-dark: #D9690F;
            --teal: #00897B;
            --teal-dark: #00695C;
            --yellow: #FFC93C;
            --gray: #6B7280;
            --line: rgba(20,23,26,0.09);
            --shadow-soft: 0 20px 45px rgba(20,23,26,0.08);
        }

        * { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            color: var(--ink);
            background: var(--sand);
        }

        h1, h2, h3, h4, h5, .display-font {
            font-family: 'Space Grotesk', sans-serif;
            letter-spacing: -0.02em;
        }

        .mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.02em; }

        a { text-decoration: none; }

        ::selection { background: var(--yellow); color: var(--ink); }

        /* ---------- Nav ---------- */
        .navbar {
            background: rgba(255, 248, 240, 0.88);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line);
            padding: 14px 0;
        }

        .navbar-brand {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            color: var(--ink) !important;
            font-size: 1.35rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .brand-mark {
            width: 38px; height: 38px;
            display: flex; align-items: center; justify-content: center;
            background: var(--ink);
            border-radius: 10px;
        }

        .navbar-brand .tag {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 0.65rem;
            color: var(--gray);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            display: block;
            margin-top: -2px;
        }

        .nav-link {
            font-weight: 500;
            color: var(--ink) !important;
            position: relative;
            margin: 0 6px;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0; bottom: 2px;
            width: 0%; height: 2px;
            background: var(--orange);
            transition: width 0.25s ease;
        }
        .nav-link:hover::after { width: 100%; }

        .btn-orange {
            background-color: var(--orange);
            color: white;
            border-radius: 10px;
            padding: 11px 24px;
            font-weight: 600;
            transition: all 0.25s ease;
            border: none;
        }
        .btn-orange:hover { background-color: var(--orange-dark); color: white; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(245,130,32,0.35); }

        .btn-teal {
            background-color: var(--teal);
            color: white;
            border-radius: 10px;
            padding: 11px 24px;
            font-weight: 600;
            transition: all 0.25s ease;
            border: none;
        }
        .btn-teal:hover { background-color: var(--teal-dark); color: white; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,137,123,0.35); }

        .btn-ghost {
            border: 1.5px solid var(--ink);
            color: var(--ink);
            border-radius: 10px;
            padding: 10px 22px;
            font-weight: 600;
            background: transparent;
            transition: all 0.25s ease;
        }
        .btn-ghost:hover { background: var(--ink); color: var(--white); }

        /* ---------- Hero ---------- */
        .hero-section {
            padding: 150px 0 70px 0;
            position: relative;
        }

        .badge-board {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--ink);
            color: var(--yellow);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 7px 14px;
            border-radius: 6px;
            letter-spacing: 0.05em;
        }
        .badge-board .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: blink 1.4s infinite; }
        @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.25;} }

        .hero-section h1 { font-size: 3.2rem; font-weight: 700; line-height: 1.08; }
        .hero-section h1 .accent { color: var(--orange); }
        .hero-section h1 .accent2 { color: var(--teal); }

        /* Route illustration */
        .route-visual {
            position: relative;
            width: 100%;
            max-width: 520px;
            margin: 0 auto;
        }

        .float-card {
            position: absolute;
            background: var(--white);
            border-radius: 14px;
            box-shadow: var(--shadow-soft);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
            font-weight: 600;
            animation: floatCard 4s ease-in-out infinite;
        }
        .float-card .fc-icon {
            width: 34px; height: 34px; border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.95rem;
        }
        .fc-1 { top: 6%; left: -4%; animation-delay: 0s; }
        .fc-2 { bottom: 18%; right: -6%; animation-delay: 1.2s; }
        .fc-3 { bottom: -3%; left: 12%; animation-delay: 2.1s; }

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

        .route-path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawRoute 2.4s ease forwards 0.3s; }
        @keyframes drawRoute { to { stroke-dashoffset: 0; } }

        /* ---------- Destination ticker ---------- */
        .ticker-strip {
            background: var(--ink);
            padding: 14px 0;
            overflow: hidden;
            border-top: 1px solid rgba(255,255,255,0.08);
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .ticker-track {
            display: flex;
            width: max-content;
            animation: scrollTicker 28s linear infinite;
        }
        .ticker-item {
            font-family: 'IBM Plex Mono', monospace;
            color: rgba(255,255,255,0.6);
            font-size: 0.82rem;
            font-weight: 500;
            padding: 0 26px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 10px;
            border-right: 1px solid rgba(255,255,255,0.12);
        }
        .ticker-item i { color: var(--yellow); font-size: 0.7rem; }
        @keyframes scrollTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* ---------- Stats ---------- */
        .stats-section {
            background: var(--ink);
            color: white;
            padding: 64px 0;
        }
        .stat-number {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 2.6rem;
        }
        .stat-label { color: rgba(255,255,255,0.55); font-size: 0.9rem; letter-spacing: 0.02em; }

        /* ---------- How it works ---------- */
        .section-eyebrow {
            font-family: 'IBM Plex Mono', monospace;
            color: var(--orange);
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .feature-card {
            background: var(--white);
            border-radius: 18px;
            padding: 28px;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--line);
            transition: all 0.3s ease;
            height: 100%;
        }
        .feature-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(20,23,26,0.12); }

        .step-row { display: flex; gap: 16px; margin-bottom: 22px; }
        .step-num {
            flex: none;
            width: 40px; height: 40px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 600;
            font-size: 0.95rem;
        }
        .step-num.orange { background: rgba(245,130,32,0.12); color: var(--orange); }
        .step-num.teal { background: rgba(0,137,123,0.12); color: var(--teal); }

        /* ---------- Benefits ---------- */
        .benefit-icon {
            width: 52px; height: 52px;
            border-radius: 13px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem;
            margin-bottom: 16px;
        }

        /* ---------- Ticket / CTA ---------- */
        .ticket {
            position: relative;
            background: var(--white);
            border-radius: 20px;
            box-shadow: var(--shadow-soft);
            overflow: hidden;
        }
        .ticket-stub {
            background: var(--ink);
            color: white;
            position: relative;
        }
        .perforation {
            position: relative;
            background-image: radial-gradient(circle at 0 50%, var(--sand) 9px, transparent 10px),
                               radial-gradient(circle at 100% 50%, var(--sand) 9px, transparent 10px);
            background-size: 100% 100%;
        }
        .perforation::before {
            content: '';
            position: absolute;
            top: 0; bottom: 0; left: 0; right: 0;
            border-left: 2px dashed rgba(20,23,26,0.15);
            margin: 14px 0;
        }

        /* ---------- App showcase ---------- */
        .download-card {
            border-radius: 20px;
            padding: 34px;
            color: white;
            position: relative;
            overflow: hidden;
        }
        .download-card.driver { background: linear-gradient(135deg, var(--orange) 0%, #C6560B 100%); }
        .download-card.passenger { background: linear-gradient(135deg, var(--teal) 0%, #00524A 100%); }
        .download-card .pattern {
            position: absolute; inset: 0;
            background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
            background-size: 18px 18px;
            opacity: 0.5;
        }
        .download-card .content { position: relative; z-index: 1; }
        .download-card .app-btn {
            background: rgba(255,255,255,0.16);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            border-radius: 10px;
            padding: 12px 20px;
            font-weight: 600;
            width: 100%;
            text-align: left;
            display: flex; align-items: center; gap: 12px;
            transition: all 0.25s ease;
        }
        .download-card .app-btn:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }

        /* ---------- Footer ---------- */
        footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 60px 0 24px; }
        footer h6 { color: white; font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin-bottom: 16px; }
        footer a { color: rgba(255,255,255,0.55); }
        footer a:hover { color: var(--yellow); }
        .social-icon {
            width: 38px; height: 38px;
            border-radius: 9px;
            background: rgba(255,255,255,0.08);
            display: flex; align-items: center; justify-content: center;
            color: white;
            transition: all 0.25s ease;
        }
        .social-icon:hover { background: var(--orange); transform: translateY(-3px); }

        /* ---------- Modals ---------- */
        .modal-content {
            border-radius: 22px;
            border: none;
            overflow: hidden;
        }
        .modal-header-band {
            padding: 22px 26px 16px;
            position: relative;
        }
        .modal-header-band.orange-band { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color: white; }
        .modal-header-band.teal-band { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: white; }
        .modal-header-band .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; opacity: 0.85; letter-spacing: 0.08em; text-transform: uppercase; }
        .form-control {
            border-radius: 10px;
            padding: 11px 14px;
            border: 1px solid #E5E1DA;
            background: var(--sand);
        }
        .form-control:focus {
            box-shadow: 0 0 0 3px rgba(245,130,32,0.15);
            border-color: var(--orange);
            background: white;
        }
        .form-label { font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }

        [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
        [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 991px) {
            .hero-section { padding: 120px 0 50px; }
            .hero-section h1 { font-size: 2.3rem; }
            .float-card { display: none; }
        }