/* -------- Theme (single-file) -------- */
    :root{
      --bg:#0b1020;
      --card:#111735;
      --ink:#e9eefc;
      --muted:#a7b0d4;
      --accent:#66e0ff;
      --brand:#7a5cff;
      --glass: rgba(255,255,255,.04);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Calibri, "Segoe UI", Roboto, system-ui, -apple-system, Helvetica, Arial; color:var(--ink); background:
      radial-gradient(900px 400px at 80% -10%, rgba(102,224,255,.08), transparent 40%),
      radial-gradient(900px 400px at -10% 10%, rgba(122,92,255,.06), transparent 40%),
      linear-gradient(180deg,#050615,#0b1020); -webkit-font-smoothing:antialiased;}
    a{color:var(--accent); text-decoration:none}
    .wrap{ width:min(1200px,94vw); margin:0 auto; position:relative; z-index:2; }

    /* NAV */
    nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:12px; }
    .nav-left{ display:flex; align-items:center; gap:14px; }
    .logo{ display:flex; gap:12px; align-items:center; }
    .logo img{ width:56px; height:56px; object-fit:contain; border-radius:10px; filter: drop-shadow(0 10px 30px rgba(122,92,255,.12)); }
    .brand-title{ font-weight:800; font-size:18px; letter-spacing:.4px; }
    .nav-links{ display:flex; gap:10px; align-items:center; }
    .nav-links a{ padding:8px 12px; border-radius:999px; background:transparent; border:1px solid rgba(255,255,255,.03); color:var(--muted); font-size:14px; }
    .nav-links a.active{ background: linear-gradient(135deg,var(--brand),var(--accent)); color:#041018; font-weight:700; border:0; }

    /* HERO LAYOUT */
    .hero{ display:grid; grid-template-columns: 1fr 520px; gap:28px; align-items:center; min-height:80vh; padding:28px 0; position:relative; overflow:visible; }
    @media (max-width:1100px){ .hero{ grid-template-columns:1fr; } .right-3d{ order:-1; height:360px; margin-bottom:18px } }

    .hero-left{ padding-right:8px; z-index:6; }
    .kicker{ color:var(--muted); margin:8px 0 18px; max-width:780px; font-size:16px; }
    h1{ font-size: clamp(30px, 5vw, 56px); line-height:1.02; margin:0; background: linear-gradient(90deg,var(--accent),var(--brand)); -webkit-background-clip:text; color:transparent; font-weight:900; }
    .subline{ color:var(--muted); margin-top:12px; max-width:780px; }
    .hero-cta{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }
    .btn{ padding:12px 18px; border-radius:12px; font-weight:700; cursor:pointer; border:0; }
    .btn-primary{ background: linear-gradient(135deg,var(--brand),var(--accent)); color:#041018; box-shadow: 0 20px 40px rgba(0,0,0,.45); }
    .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.06); color:var(--ink); }

    /* Right 3D container */
    .right-3d{ position:relative; width:100%; height:460px; border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .ad-card{ position:absolute; right:18px; top:18px; background:var(--glass); padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.06); backdrop-filter: blur(6px); color:var(--muted); font-size:13px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
    .ad-card strong{ color:var(--ink); display:block; font-size:15px; margin-bottom:6px; }

    /* highlights & features */
    .highlights{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin:28px 0 12px; }
    .h-card{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
    .h-card .title{ font-weight:800; margin-bottom:6px; }
    @media (max-width:980px){ .highlights{ grid-template-columns: repeat(2,1fr); } }

    /* pricing table */
    .pricing{ margin-top:28px; overflow:auto; }
    table.pricing-table{ width:100%; border-collapse:collapse; min-width:980px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-radius:12px; overflow:hidden; }
    table.pricing-table th, table.pricing-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.04); color:var(--muted); }
    table.pricing-table th{ background:rgba(255,255,255,.02); color:var(--ink); font-weight:700; position:sticky; top:0; z-index:2; }
    .price-figure{ font-weight:900; color:var(--brand); font-size:16px; }
    .muted-small{ color:var(--muted); font-size:13px; }

    /* calculator */
    .calc{ display:grid; grid-template-columns: 1fr 360px; gap:18px; align-items:start; margin-top:22px; }
    @media (max-width:980px){ .calc{ grid-template-columns: 1fr; } }
    .card{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,.05); }
    .out{ background: rgba(255,255,255,.02); padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.04); }

    /* gallery preview */
    .gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:18px; }
    .gallery-grid img{ width:100%; height:150px; object-fit:cover; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.45) }
    @media (max-width:980px){ .gallery-grid{ grid-template-columns:repeat(2,1fr) } }

    /* testimonials & faq */
    .testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
    .testimonial{ background:var(--card); padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.03); }
    @media (max-width:980px){ .testimonials{ grid-template-columns:1fr } }

    /* footer */
    footer{ margin-top:40px; padding:28px 0; color:var(--muted); text-align:center; border-top:1px solid rgba(255,255,255,.02); }

    /* bus animation bg */
    .bus-anim{ position:absolute; bottom:6px; left:-360px; width:420px; height:auto; animation: drive 18s linear infinite; opacity:0.95; z-index:1; filter: drop-shadow(0 12px 30px rgba(0,0,0,.55)); pointer-events:none; }
    @keyframes drive { 0%{ left:-420px } 100%{ left:120% } }

    /* small helpers */
    .muted{ color:var(--muted) }
    .center{ text-align:center }
    .mb-8{ margin-bottom:8px }
    .mt-10{ margin-top:10px }