/* 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:#141414;-webkit-font-smoothing: antialiased;}

/* ---------- Hero ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.site-header { background: var(--volvo-ink); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.logo { font-weight: 600; letter-spacing: .15em; font-size: 20px; }
.nav { display: none; gap: 32px; }
.nav a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.nav a:hover { color: #fff;}
@media (min-width: 768px) { .nav { display: flex; } }

.slides { position: absolute; inset: 0}
.slide {position: absolute; inset: 0;background-size: cover; background-position: center;opacity: 0; transition: opacity 1s ease-in-out;display: flex; align-items: flex-end;}
.slide.is-active { opacity: 1; z-index: 1; }
.overlay {position: absolute; inset: 0;background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.2) 50%, transparent);}
.slide-content { position: relative; z-index: 2; color: #fff; padding-bottom: 64px; max-width: 640px; }
@media (min-width: 768px) {
  .slide { align-items: center; }
  .slide-content { padding-bottom: 0; }
}

.eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: 12px; font-weight: 500; opacity: .85; margin-bottom: 16px; }
.title { font-weight: 300; font-size: clamp(32px, 5vw, 60px); line-height: 1.05; }
.desc { margin-top: 18px; font-size: clamp(15px, 1.4vw, 18px); color: rgba(255,255,255,.9); max-width: 520px; }
.cta {display: inline-flex; align-items: center; gap: 8px;margin-top: 28px; padding: 14px 28px;background: transparent;border: 1px solid rgba(255,255,255,.7);color: white;}
.cta:hover { background: #fff; color: var(--volvo-ink); }
.nav-btn {position: absolute; top: 50%; transform: translateY(-50%);z-index: 5; width: 48px; height: 48px;border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25);color: #fff; font-size: 24px; cursor: pointer; backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
transition: background .2s, color .2s;
}

.popup-modal{background: transparent;color: white;;
}

.nav-btn:hover { background: #fff; color: var(--volvo-ink);}
.nav-btn.prev { left: 16px; }
.nav-btn.next { right: 16px; }
@media (min-width: 768px) { .nav-btn { display: inline-flex; } }

.dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 12px; }
.dot { width: 40px; height: 3px; background: rgba(255,255,255,.3); border: 0; padding: 0; cursor: pointer; overflow: hidden; position: relative; }
.dot span { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s ease-out; }
.dot.is-active span { transform: scaleX(1); }

.popup-close span{background: white;
}

.popup-header{margin: 0px 50px;
}

.table {text-align: center; }
th, td {padding: 17px;}