:root {
  --bg: #070b12;
  --bg-soft: #0d1320;
  --panel: #101827;
  --panel-2: rgba(255,255,255,0.04);
  --text: #f3f6fb;
  --muted: #a5afc0;
  --line: rgba(255,255,255,0.09);
  --primary: #d9784a;
  --primary-dark: #ba633a;
  --shadow: 0 18px 50px rgba(0,0,0,0.35);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(103,130,181,.18), transparent 25%),
    radial-gradient(circle at 100% 0%, rgba(217,120,74,.16), transparent 20%),
    linear-gradient(180deg, #060910, #09111c 30%, #070b12 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(7,11,18,.72);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:20px; }
.logo { font-size: 1.55rem; font-weight: 800; letter-spacing: .14em; }
.logo { display:inline-flex; align-items:center; }
.brand-logo { height: 90px; width: auto; display:block; }
.hero-car.real-photo, .vehicle-photo { width: 100%; object-fit: cover; border-radius: 20px; display:block; }
.hero-car.real-photo { height: 360px; }
.vehicle-photo { height: 210px; background: #0a1018; }
.category-photo { height: 210px; }
.hero.hero-cybertruck { background: linear-gradient(180deg, rgba(7,11,18,.18), rgba(7,11,18,.6)), url("../assets/vehicles/cybertruck.jpg") center/cover no-repeat; }
.hero.hero-cybertruck .hero-overlay { background: linear-gradient(180deg, rgba(3,6,11,.32), rgba(4,9,15,.8)); }
.site-footer .brand-logo { height: 65px; }
@media (max-width: 760px) { .brand-logo { height: 65px; } }

.site-nav { display:flex; align-items:center; gap:24px; }
.site-nav a { color: var(--muted); font-size: .95rem; }
.site-nav a:hover, .site-nav a.active { color: var(--text); }
.menu-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.6rem; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 22px; border-radius: 999px; font-weight: 700;
  transition: .22s ease; border: 1px solid transparent; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.02); }
.btn-outline:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.btn-small { padding: 10px 16px; font-size: .92rem; }
.btn-block { width: 100%; }
.nav-cta { color: var(--text) !important; }
.hero { position: relative; overflow: hidden; padding: 84px 0 52px; }
.hero-cybertruck { padding-bottom: 72px; }
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(3,6,11,.18), rgba(4,9,15,.74));
  pointer-events:none;
}
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items:center; }
.hero-grid.single { grid-template-columns: 1fr; }
.hero-copy h1, .page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .96; margin: 12px 0 18px; letter-spacing: -.03em; }
.hero-copy.maxw { max-width: 760px; }
.eyebrow { color: #ffb48d; text-transform: uppercase; letter-spacing: .22em; font-size: .8rem; font-weight: 700; margin: 0; }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 650px; }
.hero-actions, .cta-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px; }
.hero-stats { margin-top: 34px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width: 560px; }
.hero-stats div { padding: 16px 18px; border:1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.03); }
.hero-stats strong { display:block; font-size:1.3rem; }
.hero-stats span { color: var(--muted); font-size:.9rem; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden;
}
.glass { backdrop-filter: blur(10px); }
.hero-visual { padding: 18px; }
.hero-car { height: 360px; border-radius: 20px; }
.hero-visual-caption { padding: 20px 8px 6px; }
.hero-visual-caption p, .section-text, .footer-text, .card-body p, .info-card p { color: var(--muted); }
.section { padding: 72px 0; }
.alt-bg { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom: 28px; }
.section-heading.center { text-align:center; display:block; }
.section-heading h2, .split-grid h2, .cta-panel h2, .info-card h2 { font-size: clamp(2rem,3vw,3rem); margin: 8px 0 0; line-height:1.05; letter-spacing:-.03em; }
.section-text { max-width: 560px; font-size: 1rem; }
.section-text.narrow, .narrow-left { max-width: 700px; }
.grid { display:grid; gap:24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.fleet-category .art, .vehicle-card .art { height: 210px; }
.card-body { padding: 22px; }
.tag { color: #ffb48d; text-transform: uppercase; letter-spacing: .16em; font-size:.76rem; font-weight:700; }
.text-link { display:inline-block; margin-top: 10px; color: #f8c7ab; }
.booking-box {
  display:grid; grid-template-columns: repeat(5, 1fr); gap:16px; padding:22px;
}
.field label { display:block; margin-bottom:8px; color: var(--muted); font-size:.92rem; }
.field input, .field select, .field textarea {
  width:100%; background: rgba(255,255,255,.04); color: var(--text);
  border:1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 14px; outline:none;
}
.field textarea { resize: vertical; }
.action-field { display:flex; flex-direction:column; justify-content:end; }
.split-grid { display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start; }
.feature-list { padding-left: 18px; color: var(--muted); }
.feature-list li { margin: 10px 0; }
.trust-panel { padding: 14px; }
.trust-item { display:flex; gap:16px; padding: 16px; border-bottom:1px solid var(--line); }
.trust-item:last-child { border-bottom:none; }
.trust-item span {
  min-width: 46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background: rgba(217,120,74,.14); color:#ffc3a4; font-weight:800;
}
.cta-panel { padding: 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.site-footer { padding: 28px 0 42px; }
.footer-grid { display:grid; grid-template-columns: 1.1fr .9fr 1fr; gap:24px; border-top:1px solid var(--line); padding-top: 28px; }
.page-main { min-height: calc(100vh - 160px); }
.page-hero.compact { padding: 72px 0 24px; }
.vehicle-card .card-body { display:flex; flex-direction:column; gap:14px; }
.cards-equal > * { height: 100%; }
.contact-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:start; }
.contact-form, .info-card { padding: 24px; }
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-note { color: var(--muted); font-size: .9rem; margin-top: 12px; }
.cybertruck-feature-panel { padding: 18px; }
.icon-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-bottom: 16px; }
.icon-card { padding: 16px; border-radius: 18px; text-align:center; background: rgba(255,255,255,.04); color: #d9e1ef; border:1px solid var(--line); }
.art {
  position:relative; overflow:hidden; border-radius: 20px;
  background: linear-gradient(145deg, #131d2a, #0c1320);
}
.art::before {
  content:""; position:absolute; inset:auto 8% 10% 8%; height: 18%;
  background: radial-gradient(circle, rgba(255,152,97,.22), transparent 65%);
  filter: blur(16px);
}
.art::after {
  content:""; position:absolute; left:10%; right:10%; bottom:14%; height: 110px;
  border-radius: 999px / 60px; background: rgba(0,0,0,.35); filter: blur(22px);
}
.art-cybertruck { background:
  linear-gradient(180deg, rgba(126,149,176,.25), rgba(18,25,38,.8)),
  radial-gradient(circle at 70% 0%, rgba(255,255,255,.3), transparent 28%),
  linear-gradient(145deg, #172130, #0a0f17); }
.art-cybertruck > *, .art-sport > *, .art-family > *, .art-business > * { display:none; }
.art-cybertruck::marker { content: none; }
.art-cybertruck, .art-modely, .art-lightning, .art-sienna, .art-odyssey, .art-pacifica, .art-metris, .art-vellfire, .art-z4, .art-boxster, .art-corvette, .art-sport, .art-family, .art-business {
  position:relative;
}
.art-cybertruck::before, .art-modely::before, .art-lightning::before, .art-sienna::before, .art-odyssey::before, .art-pacifica::before, .art-metris::before, .art-vellfire::before, .art-z4::before, .art-boxster::before, .art-corvette::before, .art-sport::before, .art-family::before, .art-business::before {
  content:""; position:absolute; left:12%; right:12%; bottom:22%; height: 70px; border-radius: 18px 34px 14px 14px; background: linear-gradient(90deg, #d7dce3, #848f9a);
  clip-path: polygon(12% 66%, 28% 34%, 65% 28%, 78% 44%, 88% 44%, 92% 68%, 85% 70%, 82% 83%, 18% 83%, 16% 71%);
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.22);
}
.art-cybertruck::after, .art-modely::after, .art-lightning::after, .art-sienna::after, .art-odyssey::after, .art-pacifica::after, .art-metris::after, .art-vellfire::after, .art-z4::after, .art-boxster::after, .art-corvette::after, .art-sport::after, .art-family::after, .art-business::after {
  content:""; position:absolute; width: 18px; height:18px; border-radius:50%; background:#111; bottom:16%; left:22%; box-shadow: 170px 0 0 #111; border:4px solid #2e3440;
}
.art-modely { background: linear-gradient(145deg, #101827, #0a1018); }
.art-lightning { background: linear-gradient(145deg, #13202e, #091018); }
.art-sienna, .art-odyssey, .art-pacifica, .art-family { background: linear-gradient(145deg, #141f2e, #0c1118); }
.art-metris, .art-vellfire, .art-business { background: linear-gradient(145deg, #0d1927, #0c1118); }
.art-z4, .art-boxster, .art-corvette, .art-sport { background: linear-gradient(145deg, #1a1110, #10131d); }
.art-sport::before { background: linear-gradient(90deg, #d14f3b, #d7dce3); }
.art-family::before { background: linear-gradient(90deg, #cfd5dd, #9ea8b3); clip-path: polygon(10% 68%, 18% 40%, 54% 38%, 72% 40%, 84% 52%, 90% 70%, 84% 72%, 82% 84%, 18% 84%, 16% 72%); }
.art-business::before { background: linear-gradient(90deg, #cfd5dd, #a5aebb); clip-path: polygon(8% 72%, 14% 40%, 48% 38%, 76% 38%, 90% 52%, 92% 70%, 88% 73%, 86% 84%, 14% 84%, 12% 72%); }
.wide { height: 300px; }
@media (max-width: 980px) {
  .hero-grid, .split-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .booking-box { grid-template-columns: 1fr 1fr; }
  .cta-panel { flex-direction: column; align-items:flex-start; }
}
@media (max-width: 760px) {
  .menu-toggle { display:block; }
  .site-nav {
    position:absolute; right:16px; top:76px; width:min(320px, calc(100% - 32px));
    flex-direction:column; align-items:stretch; padding:16px; border:1px solid var(--line);
    background: rgba(7,11,18,.98); border-radius: 20px; display:none;
  }
  .site-nav.open { display:flex; }
  .hero { padding-top: 52px; }
  .grid-3, .grid-2, .booking-box, .two-col, .icon-row { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-copy h1, .page-hero h1 { font-size: 2.4rem; }
}

.page-main { min-height: 60vh; }
.page-hero.compact { padding: 120px 0 40px; background: linear-gradient(180deg, rgba(20,26,36,.95), rgba(9,12,18,.95)); }
.hero-single { grid-template-columns: 1fr 1fr; }
.vehicle-card .vehicle-photo { width: 100%; height: 230px; object-fit: cover; display:block; }
.spec-row { display:flex; flex-wrap:wrap; gap:10px; font-size: 13px; color:#b8c0ce; margin: 14px 0 8px; }
.price-line { color: #fff; font-weight: 700; margin-bottom: 14px; }
.pill-list { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.pill-item { border:1px solid var(--line); background: rgba(255,255,255,.03); padding:16px 18px; border-radius: 18px; color:#d6deeb; }
.booking-layout { align-items: start; }
.form-card { padding: 24px; }
.booking-form { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.booking-form .full { grid-column: 1 / -1; }
.booking-form input, .booking-form textarea, .booking-form select, .admin-form input, .admin-form textarea, .admin-form select {
  width:100%; padding: 13px 14px; border-radius: 14px; border:1px solid var(--line); background:#0d121b; color:#fff;
}
.booking-form label, .admin-form label { display:block; margin-bottom: 8px; color:#c0c8d6; font-size: 14px; }
.alert { padding:14px 16px; border-radius: 14px; margin-bottom: 18px; }
.alert-success { background: rgba(47,168,79,.18); border:1px solid rgba(47,168,79,.4); color:#d4f9dc; }
.alert-error { background: rgba(217,72,72,.18); border:1px solid rgba(217,72,72,.4); color:#ffd4d4; }
.muted { color:#8b93a6; font-size: 14px; }

.admin-shell { display:grid; grid-template-columns: 260px 1fr; min-height: 100vh; background:#090d14; color:#fff; }
.admin-sidebar { border-right:1px solid var(--line); padding:24px; background:#0b1018; }
.admin-sidebar .brand-logo { max-width: 180px; }
.admin-sidebar nav { display:flex; flex-direction:column; gap:10px; margin-top: 28px; }
.admin-sidebar nav a { color:#d8e0ed; text-decoration:none; padding:12px 14px; border-radius: 12px; }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background: rgba(255,255,255,.06); }
.admin-content { padding:32px; }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; }
.admin-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-bottom: 24px; }
.admin-card { background:#0e1420; border:1px solid var(--line); border-radius: 20px; padding:20px; }
.admin-card h3 { margin-top:0; }
.admin-form { display:grid; gap:16px; }
.admin-form.two-col { grid-template-columns: 1fr 1fr; }
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align: top; }
.table img.thumb { width: 96px; height: 60px; object-fit: cover; border-radius: 10px; }
.login-screen { min-height:100vh; display:grid; place-items:center; background: radial-gradient(circle at top, rgba(56,70,95,.45), transparent 30%), #090d14; }
.login-card { width:min(460px, calc(100% - 32px)); background:#0d121b; border:1px solid var(--line); border-radius:24px; padding:28px; }
.small { font-size: 13px; color:#9ea7b5; }
.inline-actions { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 980px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-grid, .pill-list, .booking-form { grid-template-columns: 1fr; }
}
/* make date picker icon visible on dark theme */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 1;
    cursor: pointer;
}