:root {
  --radius: 0.75rem;
  --background: oklch(0.16 0.04 265);
  --foreground: oklch(0.98 0.005 240);
  --surface: oklch(0.20 0.045 265);
  --surface-elevated: oklch(0.24 0.05 265);
  --card: oklch(0.20 0.045 265);
  --card-foreground: oklch(0.98 0.005 240);
  --primary: oklch(0.74 0.16 230);
  --primary-foreground: oklch(0.12 0.04 265);
  --secondary: oklch(0.26 0.05 265);
  --muted: oklch(0.24 0.04 265);
  --muted-foreground: oklch(0.70 0.025 250);
  --accent: oklch(0.74 0.16 230);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.74 0.16 230);

  --brand: #00b7f4;
  --gradient-bg: radial-gradient(ellipse at top, oklch(0.22 0.06 265) 0%, oklch(0.12 0.04 265) 60%, oklch(0.10 0.035 265) 100%);
  --gradient-primary: linear-gradient(135deg, #00b7f4 0%, #0090c8 100%);
  --gradient-card: linear-gradient(180deg, oklch(0.22 0.05 265) 0%, oklch(0.18 0.045 265) 100%);
  --shadow-glow: 0 0 40px rgb(0 183 244 / 0.35);
  --shadow-glow-sm: 0 0 18px rgb(0 183 244 / 0.45);
  --shadow-card: 0 12px 40px -12px oklch(0 0 0 / 0.6);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background: var(--gradient-bg);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.btn-glow { box-shadow: var(--shadow-glow-sm); transition: var(--transition-smooth); }
.btn-glow:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }

.text-gradient {
  background: linear-gradient(135deg, #00b7f4, #6fdcff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass-card {
  background: var(--gradient-card);
  border: 1px solid oklch(1 0 0 / 0.08);
  backdrop-filter: blur(12px);
}
.glass-card:hover { border-color: oklch(0.74 0.16 230 / 0.4); }

@keyframes float-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-float-in { animation: float-in 0.7s ease-out both; }

/* Carousel */
.carousel-slide { opacity: 0; transition: opacity 1s ease; }
.carousel-slide.active { opacity: 1; }

/* FAQ */
.faq-body { display: none; }
.faq-item.open .faq-body { display: block; }
.faq-item .icon-minus { display: none; }
.faq-item.open .icon-minus { display: inline-block; }
.faq-item.open .icon-plus { display: none; }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

/* Header scrolled */
.site-header.scrolled {
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

/* Lookup result */
.lookup-result { display: none; }
.lookup-result.show { display: grid; }

/* UK Reg Plate */
.reg-plate-link { display: block; text-decoration: none; }
.reg-plate {
  background: #FFD400;
  border: 3px solid #111;
  border-radius: 0.5rem;
  display: flex;
  align-items: stretch;
  height: 110px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255,255,255,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.reg-plate-link:hover .reg-plate {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 183, 244, 0.35), 0 12px 32px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.2);
}
.reg-badge {
  background: #012169;
  color: #fff;
  width: 80px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border-right: 1px solid rgba(0,0,0,0.2);
}
.reg-badge svg { width: 46px; height: auto; display: block; }
.reg-badge span {
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}
.reg-number {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  padding: 0 12px;
}

/* Contact sent */
.contact-form-wrap.sent .contact-form { display: none; }
.contact-form-wrap .contact-sent { display: none; }
.contact-form-wrap.sent .contact-sent { display: block; }