/* ============================================================
   PARKSAATHI — Complete Design System
   Brand: #4361ee (Blue) → #7209b7 (Purple)
   Responsive: Mobile-first, works on all screen sizes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');

/* ============ CSS VARIABLES ============ */
:root {
    --primary:        #4361ee;
    --primary-dark:   #3a56d4;
    --primary-light:  #4895ef;
    --secondary:      #7209b7;
    --secondary-light:#9b2de0;
    --accent-cyan:    #4cc9f0;

    --gradient:       linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    --gradient-glow:  linear-gradient(135deg, #4895ef 0%, #9b2de0 100%);
    --gradient-hero:  linear-gradient(135deg, #0d1b6e 0%, #3a0878 100%);

    --success:  #06d6a0;
    --warning:  #ffb703;
    --danger:   #ef476f;

    --dark:       #0d1117;
    --dark-2:     #1b263b;
    --light:      #f8f9ff;
    --gray:       #6c757d;
    --gray-light: #e9ecef;
    --white:      #ffffff;
    --border:     rgba(67,97,238,0.12);

    --shadow-sm:    0 2px 8px rgba(67,97,238,0.08);
    --shadow-md:    0 4px 20px rgba(67,97,238,0.12);
    --shadow-lg:    0 10px 40px rgba(67,97,238,0.15);
    --shadow-glow:  0 0 40px rgba(67,97,238,0.3);
    --shadow-hover: 0 20px 60px rgba(67,97,238,0.2);
    --shadow-purple:0 10px 40px rgba(114,9,183,0.25);

    --radius-sm:  10px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-pill:50px;

    --sidebar-w:  260px;
    --transition: 0.25s ease;
}

/* ============ RESET ============ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    background: var(--light);
    color: var(--dark-2);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
ul { list-style:none; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f1f1f1; }
::-webkit-scrollbar-thumb { background:var(--gradient); border-radius:3px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
    background: var(--gradient);
    color: white;
    padding: 9px 0;
    font-size: 0.82rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}
.top-bar::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:1px;
    background:rgba(255,255,255,0.15);
}
.top-bar .container { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.top-bar-left, .top-bar-right { display:flex; align-items:center; gap:16px; }
.top-bar a { color:rgba(255,255,255,0.85); transition:color var(--transition); }
.top-bar a:hover { color:white; }
.top-bar .sep { opacity:0.3; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--transition);
}
.navbar.scrolled { box-shadow:var(--shadow-md); }
.navbar .container { display:flex; justify-content:space-between; align-items:center; gap:20px; }

/* Logo */
.logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.logo-image {
    height: 48px;
    width: auto;
    transition: transform var(--transition);
    filter: drop-shadow(0 2px 8px rgba(67,97,238,0.2));
}
.logo:hover .logo-image { transform:scale(1.05); }

/* Nav Links */
.nav-links { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.nav-link {
    color:var(--dark-2);
    font-weight:600;
    font-size:0.9rem;
    transition:all var(--transition);
    padding:8px 14px;
    border-radius:var(--radius-pill);
    white-space:nowrap;
}
.nav-link:hover { color:var(--primary); background:rgba(67,97,238,0.06); }
.nav-link.active { color:var(--primary); background:rgba(67,97,238,0.08); }

/* Nav Actions */
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-nav-login {
    color:var(--primary);
    font-weight:700;
    font-size:0.9rem;
    padding:8px 18px;
    border-radius:var(--radius-pill);
    border:2px solid rgba(67,97,238,0.2);
    transition:all var(--transition);
}
.btn-nav-login:hover { border-color:var(--primary); background:rgba(67,97,238,0.04); }
.btn-nav-cta {
    background:var(--gradient);
    color:white;
    font-weight:700;
    font-size:0.9rem;
    padding:10px 22px;
    border-radius:var(--radius-pill);
    transition:all 0.3s;
    box-shadow:0 4px 16px rgba(67,97,238,0.3);
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.btn-nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(67,97,238,0.4); }

/* Mobile Menu Toggle */
.mobile-menu-btn {
    display:none;
    background:none;
    border:none;
    padding:8px;
    color:var(--dark-2);
    font-size:1.4rem;
    line-height:1;
}

/* Mobile Drawer */
.mobile-nav-drawer {
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(290px, 85vw);
    background:white;
    z-index:2000;
    flex-direction:column;
    padding:24px;
    box-shadow:-10px 0 40px rgba(0,0,0,0.15);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform 0.3s ease;
    display:flex;
}
.mobile-nav-drawer.open { transform:translateX(0); }
.mobile-nav-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:1999;
    backdrop-filter:blur(2px);
}
.mobile-nav-overlay.open { display:block; }
.mobile-nav-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.mobile-nav-close { background:none; border:none; font-size:1.4rem; color:var(--dark-2); padding:4px; }
.mobile-nav-links { display:flex; flex-direction:column; gap:4px; }
.mobile-nav-links .nav-link { padding:12px 16px; border-radius:var(--radius-md); font-size:1rem; }
.mobile-nav-actions {
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid var(--gray-light);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.mobile-nav-actions .btn-nav-login,
.mobile-nav-actions .btn-nav-cta {
    text-align:center;
    justify-content:center;
    padding:13px;
    font-size:1rem;
    display:block;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
    background: var(--gradient-hero);
    position:relative;
    overflow:hidden;
    padding:90px 0 80px;
    color:white;
}
.hero::before {
    content:'';
    position:absolute;
    width:600px; height:600px;
    background:radial-gradient(circle, rgba(67,97,238,0.4) 0%, transparent 70%);
    top:-200px; left:-150px;
    border-radius:50%;
    animation:orbFloat 8s ease-in-out infinite;
}
.hero::after {
    content:'';
    position:absolute;
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(114,9,183,0.35) 0%, transparent 70%);
    bottom:-150px; right:-100px;
    border-radius:50%;
    animation:orbFloat 10s ease-in-out infinite reverse;
}
@keyframes orbFloat {
    0%,100% { transform:translate(0,0) scale(1); }
    33%      { transform:translate(30px,-20px) scale(1.05); }
    66%      { transform:translate(-20px,30px) scale(0.95); }
}
.hero-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:50px 50px;
    pointer-events:none;
}
.hero .container {
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    backdrop-filter:blur(10px);
    padding:8px 18px;
    border-radius:var(--radius-pill);
    font-size:0.82rem;
    font-weight:600;
    letter-spacing:0.5px;
    margin-bottom:24px;
    color:rgba(255,255,255,0.9);
}
.hero-badge .dot {
    width:7px; height:7px;
    background:#06d6a0;
    border-radius:50%;
    animation:blink 2s infinite;
    box-shadow:0 0 8px #06d6a0;
}
@keyframes blink {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.5; transform:scale(1.3); }
}
.hero h1 {
    font-family:'Rajdhani', sans-serif;
    font-size:clamp(2.2rem, 5vw, 4.2rem);
    font-weight:700;
    line-height:1.1;
    margin-bottom:20px;
    letter-spacing:-0.5px;
}
.hero h1 .highlight {
    background:linear-gradient(135deg, #4cc9f0, #7209b7);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-desc { font-size:1.05rem; line-height:1.7; color:rgba(255,255,255,0.75); margin-bottom:36px; max-width:480px; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px; }
.btn-hero-primary {
    background:white; color:var(--primary);
    font-weight:700; font-size:1rem;
    padding:14px 28px; border-radius:var(--radius-pill);
    display:inline-flex; align-items:center; gap:8px;
    transition:all 0.3s; box-shadow:0 8px 32px rgba(0,0,0,0.2);
}
.btn-hero-primary:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.3); }
.btn-hero-secondary {
    background:rgba(255,255,255,0.12); color:white;
    font-weight:600; font-size:1rem;
    padding:14px 28px; border-radius:var(--radius-pill);
    display:inline-flex; align-items:center; gap:8px;
    transition:all 0.3s; border:1px solid rgba(255,255,255,0.25);
    backdrop-filter:blur(10px);
}
.btn-hero-secondary:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }
.hero-stats { display:flex; gap:32px; flex-wrap:wrap; }
.hero-stat-num { font-family:'Rajdhani',sans-serif; font-size:1.8rem; font-weight:700; color:white; line-height:1; }
.hero-stat-label { font-size:0.78rem; color:rgba(255,255,255,0.55); margin-top:3px; text-transform:uppercase; letter-spacing:0.5px; }
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.hero-tag-wrap { position:relative; width:100%; max-width:500px; margin:0 auto; }
.hero-tag-img {
    width:100%; border-radius:20px;
    box-shadow:0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
    animation:tagFloat 4s ease-in-out infinite;
    position:relative; z-index:2;
}
@keyframes tagFloat {
    0%,100% { transform:translateY(0) rotate(-1deg); }
    50%      { transform:translateY(-16px) rotate(1deg); }
}
.hero-tag-glow {
    position:absolute; inset:10%;
    background:var(--gradient);
    filter:blur(60px); opacity:0.5;
    border-radius:50%; z-index:1;
    animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
    0%,100% { opacity:0.4; transform:scale(1); }
    50%      { opacity:0.6; transform:scale(1.1); }
}
.tag-badge {
    position:absolute; background:white;
    border-radius:14px; padding:10px 16px;
    display:flex; align-items:center; gap:8px;
    box-shadow:0 8px 32px rgba(0,0,0,0.15);
    font-size:0.82rem; font-weight:700; color:var(--dark-2);
    z-index:3; white-space:nowrap;
    animation:badgeFloat 3s ease-in-out infinite;
}
.tag-badge.badge-1 { top:10%; left:-14%; animation-delay:0s; }
.tag-badge.badge-2 { bottom:15%; right:-14%; animation-delay:1.5s; }
@keyframes badgeFloat {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-8px); }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar { background:white; border-bottom:1px solid rgba(67,97,238,0.08); padding:16px 0; }
.trust-bar .container { display:flex; justify-content:center; align-items:center; gap:48px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; font-size:0.88rem; font-weight:600; color:var(--gray); }
.trust-icon {
    width:36px; height:36px;
    background:linear-gradient(135deg,rgba(67,97,238,0.1),rgba(114,9,183,0.1));
    border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}

/* ============================================================
   SECTION COMMONS
   ============================================================ */
section { padding:90px 0; }
.section-label {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:2px;
    color:var(--primary); background:rgba(67,97,238,0.08);
    padding:6px 16px; border-radius:var(--radius-pill); margin-bottom:16px;
}
.section-title {
    font-family:'Rajdhani', sans-serif;
    font-size:clamp(1.8rem, 3.5vw, 3rem);
    font-weight:700; color:var(--dark); line-height:1.15;
    letter-spacing:-0.3px; margin-bottom:16px;
}
.section-title .grad { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-sub { font-size:1.05rem; color:var(--gray); max-width:560px; line-height:1.7; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section { background:var(--light); }
.steps-flow {
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:0; position:relative; margin-top:56px;
}
.steps-flow::before {
    content:''; position:absolute;
    top:36px; left:calc(12.5%); right:calc(12.5%);
    height:2px; background:linear-gradient(90deg, var(--primary), var(--secondary));
    z-index:0; opacity:0.3;
}
.step-card { text-align:center; padding:0 20px 40px; position:relative; z-index:1; }
.step-num-wrap {
    width:72px; height:72px; background:var(--gradient); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; position:relative; box-shadow:var(--shadow-glow); transition:all 0.3s;
}
.step-card:hover .step-num-wrap { transform:scale(1.1); box-shadow:0 0 30px rgba(67,97,238,0.5); }
.step-icon-inner { font-size:1.8rem; }
.step-num-badge {
    position:absolute; top:-6px; right:-6px;
    width:24px; height:24px; background:white;
    border:2px solid var(--primary); border-radius:50%;
    font-size:0.7rem; font-weight:800; color:var(--primary);
    display:flex; align-items:center; justify-content:center;
}
.step-card h3 { font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:700; color:var(--dark); margin-bottom:10px; }
.step-card p  { font-size:0.88rem; color:var(--gray); line-height:1.6; }

/* ============================================================
   FEATURES
   ============================================================ */
.features-section { background:white; }
.features-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:56px; }
.feature-card {
    background:var(--light); border-radius:var(--radius-lg);
    padding:32px 28px; border:1px solid rgba(67,97,238,0.07);
    transition:all 0.3s; position:relative; overflow:hidden;
}
.feature-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--gradient); transform:scaleX(0);
    transition:transform 0.3s; transform-origin:left;
}
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(67,97,238,0.15); background:white; }
.feature-card:hover::before { transform:scaleX(1); }
.feature-icon-wrap {
    width:60px; height:60px; background:var(--gradient);
    border-radius:var(--radius-md); display:flex; align-items:center;
    justify-content:center; font-size:1.6rem; margin-bottom:20px;
    transition:all 0.3s; box-shadow:var(--shadow-md);
}
.feature-card:hover .feature-icon-wrap { transform:rotate(-5deg) scale(1.1); }
.feature-card h3 { font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:700; color:var(--dark); margin-bottom:10px; }
.feature-card p  { font-size:0.9rem; color:var(--gray); line-height:1.65; }

/* ============================================================
   SCAN DEMO
   ============================================================ */
.scan-demo-section { background:var(--gradient-hero); color:white; position:relative; overflow:hidden; }
.scan-demo-section::before {
    content:''; position:absolute; inset:0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:40px 40px;
}
.scan-demo-section .container { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.scan-demo-content .section-label { color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.1); }
.scan-demo-content .section-title { color:white; }
.scan-demo-content .section-sub { color:rgba(255,255,255,0.65); max-width:420px; }
.phone-mockup-wrap { display:flex; justify-content:center; align-items:center; }
.phone-outer {
    width:280px; background:#111; border-radius:44px; padding:14px;
    box-shadow:0 50px 100px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.1);
}
.phone-screen { background:#f8f9ff; border-radius:32px; overflow:hidden; min-height:520px; }
.phone-notch { width:90px; height:26px; background:#111; border-radius:0 0 16px 16px; margin:0 auto; }
.phone-content { padding:16px 14px 20px; }
.phone-header { text-align:center; padding:8px 0 16px; border-bottom:1px solid rgba(0,0,0,0.06); margin-bottom:14px; }
.phone-logo-text { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.phone-sub { font-size:10px; color:#999; margin-top:2px; }
.phone-vehicle-card { background:var(--gradient); border-radius:14px; padding:14px; color:white; text-align:center; margin-bottom:14px; }
.phone-plate { font-family:'Rajdhani',sans-serif; font-size:20px; font-weight:700; letter-spacing:3px; background:rgba(255,255,255,0.2); border-radius:8px; padding:6px 12px; display:inline-block; margin-bottom:4px; }
.phone-model { font-size:11px; opacity:0.8; }
.phone-actions { display:flex; flex-direction:column; gap:9px; }
.phone-btn { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; font-size:12px; font-weight:600; color:var(--dark-2); }
.phone-btn.call { background:#e8f5e9; }
.phone-btn.sms  { background:#e3f2fd; }
.phone-btn.wa   { background:#e8f5e9; }
.phone-btn.emer { background:#fff3e0; }
.phone-btn-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.call .phone-btn-icon { background:#c8e6c9; }
.sms  .phone-btn-icon { background:#bbdefb; }
.wa   .phone-btn-icon { background:#c8e6c9; }
.emer .phone-btn-icon { background:#ffe0b2; }
.phone-btn-text { flex:1; }
.phone-btn-label  { font-size:12px; font-weight:700; }
.phone-btn-masked { font-size:10px; color:#999; margin-top:1px; letter-spacing:1px; }
.phone-btn-arrow  { color:#ccc; font-size:16px; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section { background:var(--light); }
.pricing-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:56px; align-items:start; }
.pricing-card {
    background:white; border-radius:var(--radius-xl); padding:36px 30px;
    border:2px solid transparent; transition:all 0.3s; position:relative; overflow:hidden;
}
.pricing-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); border-color:rgba(67,97,238,0.2); }
.pricing-card.popular { border-color:var(--primary); box-shadow:var(--shadow-lg); transform:scale(1.03); }
.pricing-card.popular:hover { transform:scale(1.03) translateY(-8px); }
.popular-ribbon {
    position:absolute; top:0; right:0;
    background:var(--gradient); color:white;
    font-size:0.72rem; font-weight:700; letter-spacing:0.5px;
    padding:6px 24px; border-radius:0 var(--radius-xl) 0 var(--radius-lg);
}
.pricing-badge { display:inline-block; font-size:0.78rem; font-weight:700; color:var(--primary); background:rgba(67,97,238,0.08); padding:5px 14px; border-radius:var(--radius-pill); margin-bottom:20px; }
.pricing-card.popular .pricing-badge { background:var(--gradient); color:white; }
.pricing-name  { font-family:'Rajdhani',sans-serif; font-size:1.6rem; font-weight:700; color:var(--dark); margin-bottom:6px; }
.pricing-price { font-family:'Rajdhani',sans-serif; font-size:3rem; font-weight:700; color:var(--dark); line-height:1; margin-bottom:6px; }
.pricing-price sup { font-size:1.4rem; vertical-align:super; margin-right:2px; color:var(--gray); }
.pricing-gst { font-size:0.8rem; color:var(--gray); margin-bottom:24px; }
.pricing-features { list-style:none; margin-bottom:28px; border-top:1px solid var(--gray-light); padding-top:20px; }
.pricing-features li { display:flex; align-items:center; gap:10px; padding:9px 0; font-size:0.9rem; color:var(--dark-2); border-bottom:1px solid rgba(0,0,0,0.04); }
.pricing-features li:last-child { border-bottom:none; }
.feat-check { color:var(--success); font-size:1rem; flex-shrink:0; }
.feat-x     { color:var(--gray-light); font-size:1rem; flex-shrink:0; }
.pricing-btn { display:block; width:100%; padding:14px; border:none; border-radius:var(--radius-pill); font-size:1rem; font-weight:700; text-align:center; transition:all 0.3s; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; }
.pricing-btn.outline { background:white; color:var(--primary); border:2px solid rgba(67,97,238,0.25); }
.pricing-btn.outline:hover { border-color:var(--primary); background:rgba(67,97,238,0.04); }
.pricing-btn.filled { background:var(--gradient); color:white; box-shadow:0 8px 24px rgba(67,97,238,0.35); }
.pricing-btn.filled:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(67,97,238,0.45); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background:white; }
.testimonials-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:56px; }
.testimonial-card { background:var(--light); border-radius:var(--radius-lg); padding:28px; border:1px solid rgba(67,97,238,0.07); transition:all 0.3s; }
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); background:white; }
.testi-quote { font-size:3rem; line-height:1; color:var(--primary); opacity:0.2; font-family:serif; margin-bottom:-10px; }
.testi-stars { color:var(--warning); font-size:0.9rem; margin-bottom:12px; }
.testi-text  { font-size:0.92rem; color:var(--dark-2); line-height:1.7; margin-bottom:20px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar { width:44px; height:44px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-weight:700; color:white; font-size:1.1rem; flex-shrink:0; }
.testi-name { font-weight:700; font-size:0.9rem; color:var(--dark); }
.testi-role { font-size:0.78rem; color:var(--gray); margin-top:2px; }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section { background:var(--gradient); color:white; text-align:center; padding:90px 0; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; width:500px; height:500px; background:rgba(255,255,255,0.05); border-radius:50%; top:-200px; left:-100px; }
.cta-section::after  { content:''; position:absolute; width:400px; height:400px; background:rgba(0,0,0,0.08); border-radius:50%; bottom:-150px; right:-80px; }
.cta-section .container { position:relative; z-index:2; }
.cta-section h2 { font-family:'Rajdhani',sans-serif; font-size:clamp(1.8rem, 4vw, 3rem); font-weight:700; margin-bottom:16px; }
.cta-section p  { font-size:1.05rem; opacity:0.85; max-width:500px; margin:0 auto 40px; line-height:1.6; }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-cta-white { background:white; color:var(--primary); font-weight:700; font-size:1rem; padding:15px 32px; border-radius:var(--radius-pill); transition:all 0.3s; box-shadow:0 8px 30px rgba(0,0,0,0.15); display:inline-flex; align-items:center; gap:8px; }
.btn-cta-white:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.2); }
.btn-cta-ghost { background:rgba(255,255,255,0.12); color:white; font-weight:600; font-size:1rem; padding:15px 32px; border-radius:var(--radius-pill); transition:all 0.3s; border:1px solid rgba(255,255,255,0.3); display:inline-flex; align-items:center; gap:8px; }
.btn-cta-ghost:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--dark); color:white; padding:70px 0 30px; position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; margin-bottom:50px; }
.footer-logo-img { height:44px; width:auto; margin-bottom:16px;  opacity:0.9; }
.footer-desc { font-size:0.88rem; color:rgba(255,255,255,0.45); line-height:1.8; margin-bottom:20px; max-width:280px; }
.footer-social { display:flex; gap:10px; }
.social-btn { width:38px; height:38px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); font-size:0.95rem; transition:all var(--transition); }
.social-btn:hover { background:var(--gradient); border-color:transparent; color:white; transform:translateY(-2px); }
.footer-col h4 { font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:700; color:white; margin-bottom:18px; text-transform:uppercase; letter-spacing:1px; }
.footer-links li { margin-bottom:10px; }
.footer-links a { color:rgba(255,255,255,0.45); font-size:0.88rem; transition:all var(--transition); display:inline-flex; align-items:center; gap:6px; }
.footer-links a:hover { color:white; transform:translateX(4px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.07); padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:rgba(255,255,255,0.3); }

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.dash-layout { display:flex; min-height:100vh; }

/* Sidebar */
.dash-sidebar {
    width:var(--sidebar-w);
    background:var(--dark);
    position:fixed; top:0; left:0; bottom:0;
    display:flex; flex-direction:column;
    padding:28px 0; z-index:100; overflow-y:auto;
    transition:transform var(--transition);
}
.dash-sidebar-logo { padding:0 24px 24px; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:20px; display:block; }
.dash-logo-img { height:40px; width:auto; filter:brightness(0) invert(1); opacity:0.9; }
.dash-nav { flex:1; padding:0 12px; }
.dash-nav-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,0.2); padding:0 12px; margin:20px 0 8px; }
.dash-nav-label:first-child { margin-top:0; }
.dash-nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); color:rgba(255,255,255,0.45); font-size:0.88rem; font-weight:500; transition:all var(--transition); margin-bottom:2px; }
.dash-nav-item:hover  { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.9); }
.dash-nav-item.active { background:var(--gradient); color:white; box-shadow:0 4px 16px rgba(67,97,238,0.35); }
.dash-nav-item .nav-icon { font-size:1.1rem; width:20px; text-align:center; }
.dash-user { padding:16px 20px; border-top:1px solid rgba(255,255,255,0.06); margin-top:auto; }
.dash-user-name  { font-size:0.9rem; font-weight:700; color:white; }
.dash-user-email,
.dash-user-phone { font-size:0.78rem; color:rgba(255,255,255,0.3); margin-top:2px; }
.dash-logout { display:block; margin-top:12px; padding:8px 12px; background:rgba(255,255,255,0.04); border-radius:var(--radius-sm); color:rgba(255,255,255,0.35); font-size:0.82rem; transition:all var(--transition); }
.dash-logout:hover { color:#fc8181; background:rgba(252,129,129,0.08); }

/* Mobile sidebar toggle button */
.dash-mobile-toggle {
    display:none;
    position:fixed; top:14px; left:14px; z-index:200;
    background:var(--gradient); color:white; border:none;
    width:44px; height:44px; border-radius:12px; font-size:1.2rem;
    align-items:center; justify-content:center;
    box-shadow:var(--shadow-md);
}

/* Sidebar overlay for mobile */
.dash-sidebar-overlay {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,0.5); z-index:99;
    backdrop-filter:blur(2px);
}
.dash-sidebar-overlay.open { display:block; }

/* Main content */
.dash-main { margin-left:var(--sidebar-w); flex:1; padding:36px 40px; background:#f0f2ff; min-height:100vh; }

/* ── Page header ── */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; flex-wrap:wrap; gap:14px; }
.page-title  { font-family:'Rajdhani',sans-serif; font-size:clamp(1.5rem, 2.5vw, 2rem); font-weight:700; color:var(--dark); line-height:1.1; }
.page-sub    { font-size:0.88rem; color:var(--gray); margin-top:5px; }

/* ── Stats grid — index feat-card style ── */
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:28px; }
.stat-card {
  background: #f8f9ff;
  border-radius: var(--radius-lg); padding: 22px 20px;
  border: 1.5px solid var(--border);
  position: relative; overflow: hidden;
  transition: all 0.3s; cursor: default;
  box-shadow: 0 2px 8px rgba(67,97,238,0.06);
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); background: white; border-color: rgba(67,97,238,0.18); }
.stat-card:hover::before { transform: scaleX(1); }
.stat-card-icon  { font-size: 1.6rem; margin-bottom: 10px; }
.stat-card-num   { font-family:'Rajdhani',sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--dark); line-height: 1; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card-label { font-size: 0.78rem; color: var(--gray); margin-top: 5px; font-weight: 600; letter-spacing: 0.3px; }

/* Legacy stat aliases */
.dash-stat-grid  { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:28px; }
.dash-stat-card  { background: #f8f9ff; border-radius: var(--radius-lg); padding: 22px 20px; border: 1.5px solid var(--border); position: relative; overflow: hidden; transition: all 0.3s; box-shadow: 0 2px 8px rgba(67,97,238,0.06); }
.dash-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.dash-stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); background: white; border-color: rgba(67,97,238,0.18); }
.dash-stat-card:hover::before { transform: scaleX(1); }
.dash-stat-icon  { font-size: 1.6rem; margin-bottom: 10px; }
.dash-stat-num   { font-family:'Rajdhani',sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dash-stat-label { font-size: 0.78rem; color: var(--gray); margin-top: 5px; font-weight: 600; }

/* Content grid */
.content-grid { display:grid; grid-template-columns:1.3fr 0.7fr; gap:24px; align-items:start; }

/* ── Section card — index feat-card style ── */
.section-card {
  background: #f8f9ff; border-radius: var(--radius-lg);
  padding: 24px; border: 1.5px solid var(--border);
  box-shadow: 0 2px 8px rgba(67,97,238,0.06);
  position: relative; overflow: hidden; transition: all 0.3s;
}
.section-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.section-card:hover { background: white; box-shadow: var(--shadow-lg); border-color: rgba(67,97,238,0.18); }
.section-card:hover::before { transform: scaleX(1); }
.section-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.section-card-title  { font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:700; color:var(--dark); }

/* ── Tag rows in dashboard ── */
.tag-card { display:flex; align-items:center; gap:12px; padding:14px 13px; border-radius:12px; background:#f8f9ff; border:1.5px solid var(--border); margin-bottom:8px; transition:all 0.2s; }
.tag-card:last-child { margin-bottom:0; }
.tag-card:hover { background:white; border-color:rgba(67,97,238,0.22); box-shadow:0 3px 12px rgba(67,97,238,0.09); }
.tag-qr     { font-size:1.8rem; flex-shrink:0; }
.tag-info   { flex:1; min-width:120px; }
.tag-number  { font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:700; color:var(--dark); }
.tag-vehicle { font-size:0.78rem; color:var(--gray); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
.tag-status  { font-size:0.71rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 11px; border-radius:var(--radius-pill); flex-shrink:0; }
.tag-status.activated { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.tag-status.paused    { background:#fef9c3; color:#854d0e; border:1px solid #fcd34d; }
.tag-status.available { background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe; }
.tag-status.sold      { background:#f0f9ff; color:#0369a1; border:1px solid #bae6fd; }
.tag-actions { flex-shrink:0; }

/* Tag grid (my-tags page) */
.tag-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:20px; }
.tag-card-header { background:var(--gradient); color:white; padding:20px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.tag-num         { font-family:'Rajdhani',sans-serif; font-size:1.3rem; font-weight:700; letter-spacing:1px; }
.tag-vehicle-num { font-size:0.85rem; opacity:0.8; margin-top:4px; }
.tag-card-status { display:inline-block; font-size:0.72rem; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-pill); margin-top:10px; letter-spacing:0.5px; }
.status-activated { background:rgba(255,255,255,0.2); color:white; }
.status-available { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); }
.tag-card-body { background:white; border-radius:0 0 var(--radius-lg) var(--radius-lg); border:1px solid var(--border); border-top:none; padding:20px; }
.tag-model  { font-size:0.9rem; color:var(--dark-2); font-weight:600; margin-bottom:10px; }
.tag-meta   { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.tag-meta span { font-size:0.78rem; color:var(--gray); }

/* ── Buttons — index pill style ── */
.btn, .btn-sm {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; border-radius: 50px;
    font-size: 0.85rem; font-weight: 700; border: none;
    transition: all var(--transition); cursor: pointer; font-family: inherit;
    text-decoration: none; white-space: nowrap;
}
.btn { padding: 11px 24px; font-size: 0.9rem; }
.btn-primary, .btn-sm { background: var(--gradient); color: white; box-shadow: 0 4px 14px rgba(67,97,238,0.3); }
.btn-primary:hover, .btn-sm:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(67,97,238,0.42); }
.btn-sm.outline { background: white; color: var(--primary); border: 1.5px solid rgba(67,97,238,0.25); box-shadow: none; }
.btn-sm.outline:hover { border-color: var(--primary); background: rgba(67,97,238,0.04); }
.btn-manage { background:var(--gradient); color:white; padding:8px 16px; border-radius:8px; font-size:0.82rem; font-weight:700; transition:all var(--transition); }
.btn-manage:hover { opacity:0.9; transform:translateY(-1px); }
.btn-scan { background:white; color:var(--primary); border:1.5px solid var(--border); padding:8px 16px; border-radius:8px; font-size:0.82rem; font-weight:700; transition:all var(--transition); }
.btn-scan:hover { border-color:var(--primary); }
.btn-submit {
    width:100%; background:var(--gradient); color:white; border:none;
    padding:14px; border-radius:var(--radius-md); font-size:1rem; font-weight:700;
    cursor:pointer; font-family:inherit; transition:all 0.3s; margin-top:8px;
    box-shadow:0 6px 20px rgba(67,97,238,0.3);
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(67,97,238,0.4); }
.btn-link { color:var(--primary); font-weight:700; font-size:0.9rem; }
.btn-link.primary { margin-right:12px; }
.success-actions { margin-top:14px; }

/* ── Orders ── */
.order-row { display:flex; justify-content:space-between; align-items:center; padding:12px 13px; border-radius:11px; background:#f8f9ff; border:1.5px solid var(--border); margin-bottom:7px; transition:all 0.2s; }
.order-row:last-child { margin-bottom:0; }
.order-row:hover { background:white; border-color:rgba(67,97,238,0.22); }
.order-num    { font-family:'Rajdhani',sans-serif; font-weight:700; color:var(--dark); font-size:0.95rem; }
.order-item   { font-size:0.78rem; color:var(--gray); margin-top:2px; }
.order-amount { font-weight:700; color:var(--dark); font-size:0.95rem; }
.order-status { font-size:0.71rem; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:var(--radius-pill); margin-top:4px; display:inline-block; }
.os-pending   { background:#fffbeb; color:#b45309; border:1px solid #fcd34d; }
.os-paid, .os-delivered { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.os-confirmed { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.os-shipped   { background:#f0f9ff; color:#0369a1; border:1px solid #bae6fd; }
.os-cancelled { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* ── Quick actions ── */
.quick-actions { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.qa-btn {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 12px; background:#f8f9ff; border-radius:14px;
  border:1.5px solid var(--border); transition:all 0.2s; text-decoration:none;
  position:relative; overflow:hidden;
}
.qa-btn::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform 0.25s; }
.qa-btn:hover { background:white; border-color:rgba(67,97,238,0.25); transform:translateY(-3px); box-shadow:0 6px 20px rgba(67,97,238,0.12); }
.qa-btn:hover::before { transform:scaleX(1); }
.qa-icon  { font-size:1.6rem; }
.qa-label { font-size:0.74rem; font-weight:700; color:var(--dark-2); text-align:center; line-height:1.3; }

/* ── Empty state ── */
.empty-state { text-align:center; padding:48px 20px; }
.empty-icon  { font-size:3rem; margin-bottom:14px; opacity:0.7; }
.empty-title { font-family:'Rajdhani',sans-serif; font-size:1.25rem; font-weight:700; color:var(--dark); margin-bottom:8px; }
.empty-desc  { font-size:0.87rem; color:var(--gray); max-width:280px; margin:0 auto 20px; line-height:1.65; }

/* ── Card base ── */
.card {
  background: #f8f9ff; border-radius: var(--radius-lg); padding: 26px;
  border: 1.5px solid var(--border); margin-top: 22px;
  position:relative; overflow:hidden; transition:all 0.3s;
  box-shadow: 0 2px 8px rgba(67,97,238,0.06);
}
.card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; }
.card:hover { background:white; box-shadow:var(--shadow-lg); border-color:rgba(67,97,238,0.18); }
.card:hover::before { transform:scaleX(1); }
.card-title { font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:700; color:var(--dark); margin-bottom:8px; }
.card-sub   { font-size:0.87rem; color:var(--gray); margin-bottom:20px; line-height:1.65; }

/* Product cards (shop) */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:24px; margin-top:28px; }
.product-card { background:white; border-radius:var(--radius-xl); padding:32px 28px; border:2px solid var(--border); position:relative; transition:all 0.3s; text-align:center; }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(67,97,238,0.25); }
.product-card.featured { border-color:var(--primary); box-shadow:var(--shadow-lg); }
.product-badge, .product-out-badge { position:absolute; top:16px; right:16px; font-size:0.7rem; font-weight:800; padding:4px 12px; border-radius:var(--radius-pill); letter-spacing:0.5px; }
.product-badge     { background:var(--gradient); color:white; }
.product-out-badge { background:#fee2e2; color:#dc2626; }
.product-icon  { font-size:3rem; margin-bottom:16px; display:block; }
.product-name  { font-family:'Rajdhani',sans-serif; font-size:1.5rem; font-weight:700; color:var(--dark); margin-bottom:8px; }
.product-desc  { font-size:0.88rem; color:var(--gray); line-height:1.6; margin-bottom:20px; }
.product-price { font-family:'Rajdhani',sans-serif; font-size:2.8rem; font-weight:700; color:var(--dark); line-height:1; margin-bottom:20px; }
.product-price .currency { font-size:1.2rem; color:var(--gray); vertical-align:super; font-family:'Plus Jakarta Sans',sans-serif; }
.product-price .gst { font-size:0.78rem; color:var(--gray); font-family:'Plus Jakarta Sans',sans-serif; margin-top:4px; }
.product-features { list-style:none; margin-bottom:24px; text-align:left; }
.product-features li { display:flex; align-items:center; gap:8px; padding:7px 0; font-size:0.88rem; color:var(--dark-2); border-bottom:1px solid rgba(0,0,0,0.04); }
.product-features li::before { content:'✓'; color:var(--success); font-weight:700; flex-shrink:0; }
.product-features li:last-child { border-bottom:none; }
.btn-buy { width:100%; background:var(--gradient); color:white; border:none; padding:14px; border-radius:var(--radius-pill); font-size:1rem; font-weight:700; transition:all 0.3s; cursor:pointer; font-family:inherit; box-shadow:0 6px 20px rgba(67,97,238,0.3); }
.btn-buy:hover    { transform:translateY(-2px); box-shadow:0 12px 30px rgba(67,97,238,0.4); }
.btn-buy:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* Activate Tag page */
.activate-wrap { max-width:600px; margin:0 auto; }
.how-guide { background:var(--light); border-radius:var(--radius-md); padding:20px; margin-bottom:24px; }
.guide-title { font-weight:700; font-size:0.88rem; color:var(--dark); margin-bottom:14px; }
.guide-step  { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; font-size:0.88rem; color:var(--dark-2); }
.guide-step-num { width:24px; height:24px; background:var(--gradient); color:white; border-radius:50%; font-size:0.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hint { font-size:0.78rem; color:var(--gray); font-weight:400; margin-left:4px; }

/* Alert boxes */
.alert, .alert-box { padding:13px 16px; border-radius:var(--radius-md); font-size:0.88rem; margin-bottom:18px; font-weight:500; }
.alert-error,   .alert-box.error   { background:#fef2f2; color:#dc2626; border:1px solid #fca5a5; }
.alert-success, .alert-box.success { background:#f0fdf4; color:#16a34a; border:1px solid #86efac; }

/* ── Form elements — index theme ── */
.form-group { margin-bottom: 16px; }
.form-label,
.form-group label { display:block; font-size:0.75rem; font-weight:700; color:var(--gray); margin-bottom:6px; letter-spacing:0.5px; text-transform:uppercase; }
.form-input,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: #f8f9ff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.9rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--dark);
    transition: all var(--transition);
    outline: none;
}
.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(67,97,238,0.1); }
.form-input-icon { position: relative; }
.form-input-icon .form-input { padding-left: 44px; }
.form-input-icon .input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray); font-size: 1rem; pointer-events: none; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.btn-form-submit {
    width: 100%; background: var(--gradient); color: white; border: none;
    padding: 13px; border-radius: 50px; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.25s; margin-top: 6px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 16px rgba(67,97,238,0.3);
}
.btn-form-submit:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(67,97,238,0.4); }

/* ============================================================
   SCAN PAGE
   ============================================================ */
.scan-page { background:var(--gradient-hero); min-height:100vh; display:flex; flex-direction:column; }
.scan-header-bar { background:rgba(255,255,255,0.05); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.08); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.scan-logo-img { height:36px; }
.scan-verified { display:flex; align-items:center; gap:6px; background:rgba(6,214,160,0.15); border:1px solid rgba(6,214,160,0.3); color:#4ADE80; font-size:0.78rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-pill); }
.scan-body { flex:1; padding:20px; max-width:420px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:14px; }
.scan-vehicle-card { background:white; border-radius:20px; overflow:hidden; }
.scan-vehicle-header { background:var(--gradient); padding:28px 20px; text-align:center; color:white; }
.scan-vehicle-icon { width:72px; height:72px; background:rgba(255,255,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 16px; border:2px solid rgba(255,255,255,0.2); }
.scan-plate { font-family:'Rajdhani',sans-serif; font-size:1.6rem; font-weight:700; letter-spacing:3px; background:rgba(255,255,255,0.2); border:2px solid rgba(255,255,255,0.3); padding:8px 20px; border-radius:10px; display:inline-block; margin-bottom:6px; }
.scan-model { font-size:0.85rem; opacity:0.8; }
.scan-vehicle-body { padding:18px 20px; }
.scan-info-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(0,0,0,0.05); font-size:0.88rem; }
.scan-info-row:last-child { border-bottom:none; }
.scan-info-label { color:var(--gray); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.5px; }
.scan-info-value { font-weight:700; color:var(--dark); }
.scan-contact-card { background:white; border-radius:20px; padding:22px 18px; }
.scan-card-title { font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:700; color:var(--dark); margin-bottom:6px; }
.scan-card-desc { font-size:0.8rem; color:var(--gray); margin-bottom:16px; line-height:1.5; }
.scan-action-btn { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px; margin-bottom:10px; transition:all var(--transition); cursor:pointer; border:none; width:100%; text-align:left; font-family:'Plus Jakarta Sans',sans-serif; background:none; }
.scan-action-btn:last-child { margin-bottom:0; }
.scan-action-btn:active { transform:scale(0.98); }
.scan-action-btn.call-btn { background:#f0fdf4; }
.scan-action-btn.sms-btn  { background:#eff6ff; }
.scan-action-btn.wa-btn   { background:#f0fdf4; }
.sab-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.call-btn .sab-icon { background:#dcfce7; }
.sms-btn  .sab-icon { background:#dbeafe; }
.wa-btn   .sab-icon { background:#dcfce7; }
.sab-info  { flex:1; }
.sab-label  { font-size:0.88rem; font-weight:700; color:var(--dark-2); }
.sab-masked { font-size:0.72rem; color:var(--gray); margin-top:2px; letter-spacing:1px; }
.sab-arrow  { color:#ccc; font-size:1.1rem; }
.scan-emergency-card { background:white; border-radius:20px; padding:20px 18px; }
.emer-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.emer-icon-badge { width:36px; height:36px; background:#fff3e0; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.emer-contact-row { display:flex; align-items:center; gap:10px; padding:12px; background:#fff8f0; border-radius:12px; border:1px solid #fed7aa; margin-bottom:8px; }
.emer-avatar { width:38px; height:38px; background:var(--gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.95rem; font-weight:700; color:white; flex-shrink:0; }
.emer-name { font-size:0.88rem; font-weight:700; color:var(--dark); }
.emer-rel  { font-size:0.72rem; color:var(--gray); margin-top:2px; }
.emer-call-btn { margin-left:auto; background:var(--gradient); color:white; padding:7px 14px; border-radius:8px; font-size:0.78rem; font-weight:700; transition:all var(--transition); flex-shrink:0; }
.emer-call-btn:hover { opacity:0.85; }
.scan-privacy-note { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:14px 16px; display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,0.5); font-size:0.78rem; line-height:1.5; }
.scan-privacy-note strong { color:rgba(255,255,255,0.8); }
.scan-footer { text-align:center; padding:18px; font-size:0.75rem; color:rgba(255,255,255,0.2); }
.scan-footer a { color:rgba(255,255,255,0.35); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-layout { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-left {
    background:var(--gradient-hero);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:60px; position:relative; overflow:hidden; color:white; text-align:center;
}
.auth-left::before { content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle, rgba(67,97,238,0.3) 0%, transparent 70%); top:-150px; left:-150px; border-radius:50%; }
.auth-left::after  { content:''; position:absolute; width:400px; height:400px; background:radial-gradient(circle, rgba(114,9,183,0.3) 0%, transparent 70%); bottom:-100px; right:-100px; border-radius:50%; }
.auth-left-content { position:relative; z-index:2; }
.auth-logo {
    height: 60px;
    width: auto;
    margin-bottom: 40px;
    opacity: 0.95;
}
.auth-left h2 { font-family:'Rajdhani',sans-serif; font-size:2.4rem; font-weight:700; line-height:1.2; margin-bottom:14px; }
.auth-left p  { color:rgba(255,255,255,0.6); font-size:1rem; line-height:1.7; max-width:340px; margin:0 auto; }
.auth-pills { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:36px; }
.auth-pill  { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); padding:8px 16px; border-radius:var(--radius-pill); font-size:0.82rem; font-weight:600; }
.auth-right { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:60px; background:white; overflow-y:auto; }
.auth-form-wrap  { width:100%; max-width:420px; }
.auth-form-title { font-family:'Rajdhani',sans-serif; font-size:2rem; font-weight:700; color:var(--dark); margin-bottom:6px; }
.auth-form-sub   { font-size:0.9rem; color:var(--gray); margin-bottom:32px; }
.auth-link-text  { text-align:center; margin-top:22px; font-size:0.88rem; color:var(--gray); }
.auth-link-text a { color:var(--primary); font-weight:700; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align:center; }
.text-grad   { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ============================================================
   RESPONSIVE — 1200px
   ============================================================ */
@media (max-width: 1200px) {
    .footer-grid { grid-template-columns:1fr 1fr 1fr; gap:32px; }
}

/* ============================================================
   RESPONSIVE — 1024px (Tablet Landscape)
   ============================================================ */
@media (max-width: 1024px) {
    .features-grid     { grid-template-columns:repeat(2, 1fr); }
    .pricing-grid      { grid-template-columns:repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns:repeat(2, 1fr); }
    .steps-flow        { grid-template-columns:repeat(2, 1fr); gap:40px; }
    .steps-flow::before { display:none; }
    .hero .container   { gap:40px; }
    .tag-badge         { display:none; }

    .stats-grid,
    .dash-stat-grid    { grid-template-columns:repeat(2, 1fr); }
    .content-grid      { grid-template-columns:1fr; }
    .quick-actions     { grid-template-columns:repeat(4, 1fr); }

    .scan-demo-section .container { gap:48px; }
}

/* ============================================================
   RESPONSIVE — 900px (Tablet Portrait)
   ============================================================ */
@media (max-width: 900px) {
    /* Navbar */
    .nav-links   { display:none; }
    .nav-actions { display:none; }
    .mobile-menu-btn { display:block; }

    /* Hero */
    .hero { padding:60px 0; }
    .hero .container { grid-template-columns:1fr; text-align:center; }
    .hero-desc  { margin:0 auto 36px; }
    .hero-ctas  { justify-content:center; }
    .hero-stats { justify-content:center; }
    .hero-visual { display:none; }

    /* Scan demo */
    .scan-demo-section .container { grid-template-columns:1fr; gap:48px; text-align:center; }
    .phone-mockup-wrap { order:-1; }
    .scan-demo-content .section-sub { margin:0 auto; }

    /* Pricing popular card reset */
    .pricing-card.popular { transform:none; }
    .pricing-card.popular:hover { transform:translateY(-8px); }

    /* Auth */
    .auth-left   { display:none; }
    .auth-layout { grid-template-columns:1fr; }
    .auth-right  { padding:48px 32px; }

    /* Dashboard sidebar → off-canvas */
    .dash-sidebar { transform:translateX(-100%); }
    .dash-sidebar.open { transform:translateX(0); box-shadow:8px 0 32px rgba(0,0,0,0.3); }
    .dash-mobile-toggle { display:flex; }
    .dash-main { margin-left:0; padding:72px 20px 32px; }

    .stats-grid,
    .dash-stat-grid { grid-template-columns:repeat(2, 1fr); }
    .quick-actions  { grid-template-columns:repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — 768px (Mobile Landscape)
   ============================================================ */
@media (max-width: 768px) {
    .container { padding:0 16px; }
    section    { padding:60px 0; }

    .top-bar-left { display:none; }
    .trust-bar .container { gap:20px; }

    .footer-grid   { grid-template-columns:1fr 1fr; gap:28px; }
    .footer-bottom { flex-direction:column; text-align:center; }

    .features-grid      { grid-template-columns:1fr; }
    .testimonials-grid  { grid-template-columns:1fr; }
    .pricing-grid       { grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; }

    .tag-grid      { grid-template-columns:1fr; }
    .products-grid { grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; }
}

/* ============================================================
   RESPONSIVE — 480px (Mobile Portrait)
   ============================================================ */
@media (max-width: 480px) {
    .hero h1   { font-size:2rem; }
    .logo-image { height:38px; }

    .hero-ctas { flex-direction:column; align-items:center; }
    .btn-hero-primary,
    .btn-hero-secondary { width:100%; justify-content:center; }

    .cta-btns { flex-direction:column; align-items:center; }
    .btn-cta-white,
    .btn-cta-ghost { width:100%; justify-content:center; }

    .stats-grid,
    .dash-stat-grid { grid-template-columns:1fr 1fr; gap:12px; }
    .dash-main      { padding:64px 14px 28px; }
    .page-header    { flex-direction:column; }

    .auth-right { padding:32px 20px; }
    .form-row-2 { grid-template-columns:1fr; }

    .steps-flow    { grid-template-columns:1fr; }
    .footer-grid   { grid-template-columns:1fr; }
    .quick-actions { grid-template-columns:repeat(2, 1fr); }

    .phone-outer { width:240px; }
    .scan-body   { padding:14px; }
}

/* ============================================================
   RESPONSIVE — 360px (Very small phones)
   ============================================================ */
@media (max-width: 360px) {
    .hero h1 { font-size:1.75rem; }
    .stats-grid,
    .dash-stat-grid { grid-template-columns:1fr; }
    .quick-actions  { grid-template-columns:1fr 1fr; }
    .dash-main      { padding:60px 12px 24px; }
}