/* Volvo Trucks inspired hero section
   Palette & typography reference: https://www.volvotrucks.com/en-en/
   - Primary dark: #141414
   - Accent blue: #2A609D (Volvo Iron Mark blue)
   - Light text: #ffffff / #e5e5e5
   - Font: Volvo Novum (fallback Inter, system sans)
*/

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --vt-bg: #141414;
  --vt-fg: #ffffff;
  --vt-muted: #cfcfcf;
  --vt-accent: #2a609d;
  --vt-accent-hover: #1f4d80;
  --vt-font: "Volvo Novum", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
body {font-family: var(--vt-font);background: var(--vt-bg);color: var(--vt-fg);-webkit-font-smoothing: antialiased;}

/* ---------- Hero ---------- */
.vt-hero {position: relative;width: 100%;min-height: 100vh;overflow: hidden;display: flex;align-items: flex-end;color: var(--vt-fg);}
.vt-hero__media {position: absolute;inset: 0;z-index: 0;}
.vt-hero__video {width: 100%;height: 100%;object-fit: cover;display: block;}
.vt-hero__overlay {position: absolute;inset: 0;background:
linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.45) 100%);}

.vt-hero__content {position: relative;z-index: 2;width: 100%;padding: 0 6vw 7vh;}
.vt-hero__inner {max-width: 720px;}
.vt-hero__eyebrow {display: inline-block;font-size: 0.875rem;letter-spacing: 0.18em;text-transform: uppercase;color: var(--vt-muted);margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 2px solid var(--vt-accent);}
.vt-hero__title {font-size: clamp(2.75rem, 6vw, 5.5rem);font-weight: 500;line-height: 1.02;letter-spacing: -0.02em;margin-bottom: 1.25rem;}
.vt-hero__lead {font-size: clamp(1rem, 1.2vw, 1.25rem);line-height: 1.55;color: var(--vt-muted);max-width: 560px;margin-bottom: 2rem;}

/* ---------- Buttons (Volvo style: square, arrow icon) ---------- */
.vt-hero__actions {display: flex;flex-wrap: wrap;gap: 0.75rem;}
.vt-btn {display: inline-flex;align-items: center;gap: 0.75rem;padding: 0.95rem 1.5rem;font-family: inherit;font-size: 0.95rem;font-weight: 500;text-decoration: none;border: 1px solid transparent;border-radius: 0; /* Volvo uses squared corners */cursor: pointer;transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.vt-btn svg {width: 18px;height: 18px;transition: transform 0.2s ease;}
.vt-btn:hover svg { transform: translateX(4px); }
.vt-btn--primary {background: var(--vt-accent);color: #fff;}
.vt-btn--primary:hover { background: var(--vt-accent-hover); }
.vt-btn--ghost {background: transparent;color: #fff;border-color: rgba(255,255,255,0.6);}
.vt-btn--ghost:hover {background: #fff;color: var(--vt-bg);border-color: #fff;}

/* ---------- Mute toggle ---------- */
.vt-hero__mute {position: absolute;z-index: 3;bottom: 2rem;right: 2rem;width: 48px;height: 48px;border: 1px solid rgba(255,255,255,0.5);background: rgba(0,0,0,0.35);color: #fff;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;border-radius: 0;transition: background 0.2s ease;}
.vt-hero__mute:hover { background: rgba(0,0,0,0.6); }
.vt-hero__mute svg { width: 22px; height: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .vt-hero { min-height: 90vh; }
  .vt-hero__content { padding: 0 5vw 5vh; }
  .vt-hero__actions { flex-direction: column; align-items: stretch; }
  .vt-btn { justify-content: space-between; }
  .vt-hero__mute { bottom: 1rem; right: 1rem;}
}