/* Base Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Orbitron:wght@600;700&display=swap');

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #e5e7eb;
  background: radial-gradient(1000px 400px at 50% -60%, #0b1220, transparent), #0a0f1f;
}

/* Layout: sticky footer via flex column */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site main {
  flex: 1 0 auto;
}
.site footer {
  flex-shrink: 0;
}

/* Header */
header.site-header {
  background: linear-gradient(180deg, #0f172a, #0b1220);
  color: #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.brand-logo {
  width: 36px; height: 36px; border-radius: 6px; background:#06b6d4; color:#001018; font-weight:700; display:inline-flex; align-items:center; justify-content:center; letter-spacing:1px;
  box-shadow: 0 12px 24px -10px rgba(6,182,212,.45);
}
.brand span { font-size: 18px; letter-spacing: 0.6px; font-family: Orbitron, Inter, sans-serif; color:#e5e7eb; }
a.brand { color:#e5e7eb; text-decoration:none; }
a.brand:hover { color:#e5e7eb; }

nav.primary-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
nav.primary-nav a {
  color: #cbd5e1;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: #0b1220;
}
nav.primary-nav a:hover { border-color:#334155; color:#e2e8f0; }
nav.primary-nav a.active { background: #111827; color: #67e8f9; border-color: #164e63; }

/* Hero */
.hero {
  background: radial-gradient(1200px 400px at 50% -60%, #06b6d411, transparent), linear-gradient(180deg, #070b13, #0a0f1f);
  padding: 64px 0 32px;
  border-bottom: 1px solid #0f172a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.6);
}
.hero.hero-cart::before {
  content: "";
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1525609004556-c46c7d6cf023?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; /* sports car */
  opacity: .16;
}
.hero h1 { margin: 0 0 12px; font-size: 48px; font-family: Orbitron, Inter, sans-serif; letter-spacing: 1px; color:#e2e8f0; }
.hero p { margin: 0; color: #94a3b8; }

/* Cinematic hero: background image + overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  opacity: 0.18;
}
.hero, .hero * { position: relative; }

/* Buttons & reveals */
.btn { display:inline-block; background:#06b6d4; color:#001018; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; box-shadow:0 10px 22px -10px rgba(6,182,212,.5); }
.btn:hover { background:#0891b2; color:#e0f2fe; }
.btn.btn-outline { background:transparent; color:#e2e8f0; border:1px solid #1f2937; box-shadow:none; }
.btn.btn-outline:hover { border-color:#334155; color:#67e8f9; }
.cta-group { display:flex; gap:12px; margin-top:16px; }

.reveal { opacity:0; transform: translateY(16px); animation: revealUp .7s ease forwards; }
.reveal:nth-child(2) { animation-delay: .12s; }
.reveal:nth-child(3) { animation-delay: .24s; }
@keyframes revealUp { to { opacity:1; transform: translateY(0); } }

/* Brands marquee */
.brands { padding: 12px 0 28px; border-top:1px solid #0f172a; background:#080c14; }
.brands-row { display:flex; gap:28px; overflow:auto; white-space:nowrap; align-items:center; }
.brand-link { display:inline-flex; align-items:center; justify-content:center; width:120px; height:48px; border:1px solid #1f2937; border-radius:12px; background:#0b1220; }
.brand-link:hover { border-color:#334155; box-shadow: 0 10px 22px -12px rgba(0,0,0,.6); }
.brand-link img { max-width: 90px; max-height: 28px; filter: grayscale(1) brightness(1.2); opacity:.9; }
.brand-link:hover img { filter: grayscale(.1) brightness(1.1); opacity:1; }

/* Cards & grids */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.card {
  background: #0d1117;
  border-radius: 12px;
  border: 1px solid #1f2937;
  box-shadow: 0 10px 22px -18px rgba(0,0,0,0.6);
  padding: 16px;
}
.card h2, .card h3 { color:#e5e7eb; }
.card p { color:#94a3b8; }
.card:hover { border-color:#334155; box-shadow: 0 16px 32px -18px rgba(0,0,0,0.7); }

.product-card { display: flex; flex-direction: column; }
.product-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; background: #0b1220; }
.product-card h3 { margin: 12px 0 8px; font-size: 16px; }
.product-card .price { font-weight: 700; color: #67e8f9; margin-bottom: 10px; }
.product-card button { margin-top: auto; width: 100%; padding: 10px 12px; border-radius: 10px; border: 0; background: #06b6d4; color: #001018; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(6,182,212,.5); font-weight:700; }
.product-card button:hover { background: #0891b2; color:#e0f2fe; }

.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Sections */
section { padding: 28px 0; }
section h2 { margin: 0 0 12px; font-size: 26px; font-weight: 700; letter-spacing: 0.8px; color:#e5e7eb; }
section p { color: #94a3b8; }
section h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: 0.4px; color:#cbd5e1; }

/* Tables */
table { width: 100%; border-collapse: collapse; background:#0b1220; color:#e5e7eb; }
th, td { padding: 12px 10px; border-bottom: 1px solid #0f172a; text-align: left; }
thead th { background: #0f172a; font-weight: 600; }
.cart-table thead th:first-child { border-top-left-radius: 12px; }
.cart-table thead th:last-child { border-top-right-radius: 12px; }
.cart-table tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.cart-table tr:last-child td:last-child { border-bottom-right-radius: 12px; }

/* Footer */
footer.site-footer { background: #0b0f1a; color: #cbd5e1; border-top: 1px solid #0f172a; }
.footer-inner { padding: 18px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer-inner a { color:#cbd5e1; text-decoration:none; }
.footer-inner a:hover { color:#67e8f9; }

/* Utilities */
.muted { color:#64748b; }
.spacer { height: 16px; }
.badge { display:inline-block; padding:4px 8px; background:#e0f2fe; color:#0369a1; border-radius:999px; font-size:12px; }

/* Content links (not nav/buttons) */
.site main a:not(.btn):not(nav a) {
  color:#cbd5e1;
  text-decoration:none;
  border-bottom: 1px solid #334155;
}
.site main a:not(.btn):not(nav a):hover {
  color:#67e8f9;
  border-color:#164e63;
}

/* Forms */
input, textarea {
  width: 100%;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder, textarea::placeholder { color:#64748b; }
input:focus, textarea:focus {
  border-color: #164e63;
  box-shadow: 0 0 0 3px rgba(6,182,212,.25);
  background: #0c1424;
}
button[type="submit"] {
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: #06b6d4;
  color: #001018;
  font-weight: 700;
  box-shadow: 0 10px 22px -10px rgba(6,182,212,.5);
}
button[type="submit"]:hover { background:#0891b2; color:#e0f2fe; }

/* Modal */
.modal[aria-hidden="true"] { display:none; }
.modal.open { display:block; }
.modal { position: fixed; inset: 0; z-index: 2000; }
.modal-backdrop { position:absolute; inset:0; background: rgba(2,6,23,.6); backdrop-filter: blur(2px); }
.modal-dialog {
  position: relative;
  margin: 12vh auto 0;
  max-width: 460px;
  background: #0d1117;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 64px -24px rgba(0,0,0,.7);
}

/* Responsive */
@media (max-width: 720px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
}