/* ---------- Hero ---------- */

        .hero {
            position: relative;
            overflow: hidden;
            padding: 86px 0 110px;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1.02fr;
            gap: 58px;
            align-items: center;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 13px;
            border: 1px solid var(--tc-border);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--tc-muted);
            font-size: 0.88rem;
            font-weight: 700;
            margin-bottom: 24px;
        }

        .hero-badge::before {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--tc-green);
            box-shadow: 0 0 18px var(--tc-green);
        }

        .hero-title {
            font-size: clamp(3rem, 7vw, 6rem);
            line-height: 0.95;
            letter-spacing: -0.075em;
            margin-bottom: 24px;
        }

        .hero-title span {
            color: var(--tc-green);
        }

        .hero-text {
            color: var(--tc-muted);
            font-size: 1.18rem;
            max-width: 640px;
            margin-bottom: 32px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 34px;
        }

        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .hero-stat {
            padding: 16px;
            border-radius: var(--tc-radius-md);
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--tc-border);
        }

        .hero-stat strong {
            display: block;
            color: var(--tc-green);
            font-size: 1.45rem;
            line-height: 1;
            margin-bottom: 7px;
        }

        .hero-stat span {
            color: var(--tc-muted);
            font-size: 0.85rem;
        }

        /* ---------- Mock Dashboard / Map Card ---------- */

        .dashboard-card {
            position: relative;
            min-height: 530px;
            border-radius: var(--tc-radius-lg);
            background:
                linear-gradient(145deg, rgba(16, 42, 70, 0.96), rgba(8, 27, 51, 0.96));
            border: 1px solid var(--tc-border);
            box-shadow: var(--tc-shadow);
            overflow: hidden;
        }

        .dashboard-topbar {
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 22px;
            border-bottom: 1px solid var(--tc-border);
        }

        .window-dots {
            display: flex;
            gap: 7px;
        }

        .window-dots span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.28);
        }

        .dashboard-label {
            color: var(--tc-muted);
            font-size: 0.85rem;
            font-weight: 700;
        }

        .map-area {
            position: absolute;
            inset: 58px 0 0;
            background:
                linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
            background-size: 44px 44px;
        }

        .route-line {
            position: absolute;
            inset: 90px 70px 130px 80px;
            border: 5px solid var(--tc-green);
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-radius: 42% 52% 48% 38%;
            filter: drop-shadow(0 0 18px rgba(5, 217, 95, 0.65));
            transform: rotate(-8deg);
        }

        .map-pin {
            position: absolute;
            width: 34px;
            height: 34px;
            border-radius: 50% 50% 50% 8px;
            background: var(--tc-green);
            color: var(--tc-blue-950);
            transform: rotate(-45deg);
            display: grid;
            place-items: center;
            font-weight: 900;
            box-shadow: 0 0 24px rgba(5, 217, 95, 0.5);
        }

        .map-pin span {
            transform: rotate(45deg);
        }

        .pin-1 {
            top: 105px;
            left: 95px;
        }

        .pin-2 {
            top: 205px;
            right: 120px;
        }

        .pin-3 {
            bottom: 150px;
            left: 185px;
        }

        .pin-4 {
            bottom: 95px;
            right: 190px;
        }

        .vehicle-card {
            position: absolute;
            left: 28px;
            bottom: 28px;
            width: 245px;
            padding: 18px;
            border-radius: var(--tc-radius-md);
            background: rgba(6, 20, 38, 0.9);
            border: 1px solid var(--tc-border);
            box-shadow: var(--tc-shadow);
        }

        .vehicle-card h4 {
            margin-bottom: 8px;
        }

        .vehicle-card p {
            color: var(--tc-muted);
            font-size: 0.9rem;
        }

        .savings-card {
            position: absolute;
            right: 28px;
            top: 88px;
            width: 220px;
            padding: 18px;
            border-radius: var(--tc-radius-md);
            background: var(--tc-white);
            color: var(--tc-blue-950);
            box-shadow: var(--tc-shadow);
        }

        .savings-card strong {
            display: block;
            color: var(--tc-green);
            font-size: 2rem;
            line-height: 1;
            margin-bottom: 7px;
        }

        .savings-card span {
            color: #526173;
            font-weight: 700;
        }

        /* ---------- Device Section ---------- */

        .device-row {
            margin-top: 44px;
            display: grid;
            grid-template-columns: 1.25fr 0.8fr 0.8fr;
            gap: 22px;
            align-items: end;
        }

        .device {
            border-radius: var(--tc-radius-lg);
            background: linear-gradient(145deg, var(--tc-blue-800), var(--tc-blue-950));
            border: 1px solid var(--tc-border);
            padding: 18px;
            min-height: 250px;
            box-shadow: var(--tc-shadow);
        }

        .device-screen {
            height: 100%;
            min-height: 210px;
            border-radius: 18px;
            background:
                radial-gradient(circle at 70% 20%, rgba(5, 217, 95, 0.24), transparent 35%),
                rgba(255, 255, 255, 0.06);
            border: 1px solid var(--tc-border);
            display: flex;
            align-items: flex-end;
            padding: 18px;
        }

        .device-screen span {
            color: var(--tc-green);
            font-weight: 900;
        }

        .device.phone {
            min-height: 320px;
            border-radius: 32px;
        }

        .device.car {
            min-height: 230px;
        }

        /* ---------- Calculator Preview ---------- */

        .calculator-box {
            margin-top: 44px;
            display: grid;
            grid-template-columns: 0.95fr 1.05fr;
            gap: 24px;
            padding: 28px;
            border-radius: var(--tc-radius-lg);
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--tc-border);
        }

        .calc-inputs {
            display: grid;
            gap: 14px;
        }

        .calc-field {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 16px;
            border-radius: var(--tc-radius-md);
            background: rgba(255, 255, 255, 0.06);
            color: var(--tc-muted);
        }

        .calc-field strong {
            color: var(--tc-white);
        }

        .calc-results {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .calc-result {
            padding: 22px;
            border-radius: var(--tc-radius-md);
            background: var(--tc-white);
            color: var(--tc-blue-950);
        }

        .calc-result strong {
            display: block;
            color: var(--tc-green);
            font-size: 2rem;
            line-height: 1;
            margin-bottom: 8px;
        }

        /* ---------- Homepage Responsive ---------- */

        @media (max-width: 980px) {
            .hero-grid {
                grid-template-columns: 1fr;
            }

            .dashboard-card {
                min-height: 480px;
            }

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

            .calculator-box {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 620px) {
            .hero {
                padding: 58px 0 72px;
            }

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

            .savings-card,
            .vehicle-card {
                position: relative;
                left: auto;
                right: auto;
                top: auto;
                bottom: auto;
                width: auto;
                margin: 18px;
            }

            .map-area {
                position: relative;
                inset: auto;
                min-height: 320px;
            }

            .route-line {
                inset: 70px 40px 100px 40px;
            }

            .calc-results {
                grid-template-columns: 1fr;
            }
        }