:root{
  --bg-light: #ffffff;
  --text-dark: #1a1a1a;
  --muted: #555555;
  --accent: #FF0000;
  --container: 1200px;
}

*{box-sizing:border-box;}
html, body{height:100%;}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg-light);
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100; /* higher than other elements */
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(16,24,40,0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo{
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:0.4px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 12px;       /* match homepage spacing */
  flex-wrap: nowrap; /* prevent wrapping */
}


.logo .accent{color:var(--accent);}
.header-nav a {
  white-space: nowrap; /* prevent links from breaking */
}

.btn-primary{
  background: linear-gradient(90deg, var(--accent), #ff9f57);
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  cursor:pointer;
  font-weight:700;
}
.btn-link{
  color: var(--muted);
  text-decoration: none;
  font-weight:600;
}

/* Car Sections */
.car-section{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 2.5rem 0;
}
.car-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.2);
  z-index:0;
  pointer-events:none;
}
.car-section[style]{
  background-size: cover;
  background-position: center;
}
.section-inner{
  position: relative;
  z-index:10;
  display:flex;
  align-items:center;
  gap:3rem;
  width:100%;
  max-width:1400px;
}
.stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height: 50vh;
}
.car-image{
  max-width:100%;
  width: 90%;
  height:auto;
  object-fit:contain;
  transform: translateY(1.25rem) scale(1);
  transition: transform 0.8s cubic-bezier(.2,.9,.3,1), opacity 0.8s;
  opacity:0;
}
.content{
  flex-basis:22rem;
  display:flex;
  flex-direction: column;
  gap:0.75rem;
  align-items:flex-start;
  transform: translateY(1rem);
  opacity:0;
  transition: transform .6s ease, opacity .6s ease;
}
.car-title{
  font-size:2.25rem;
  margin:0;
  color:var(--accent);
  font-weight:800;
}
.car-sub{
  margin:0;
  color:var(--muted);
  font-size:0.9rem;
}
.car-price{
  margin:0.25rem 0 0 0;
  color: var(--accent);
}
.cta-row{
  display:flex;
  gap:0.75rem;
  margin-top:0.75rem;
}

/* Light Sweep */
.light-sweep{
  position:absolute;
  top:0;
  left: -120%;
  width:100%;
  height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,0,0,0.5), transparent);
  transform: skewX(-20deg);
  pointer-events:none;
  opacity:0;
  z-index:3;
}

/* Animate swoosh when in view */
.car-section.in-view .light-sweep{
  opacity:1;
  animation: sweep 1.5s ease-in-out 0.15s forwards;
}

/* Fade in car and text */
.car-section.in-view .car-image{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.car-section.in-view .content{
  opacity:1;
  transform: translateY(0);
  transition: opacity 0.8s ease 1s, transform 0.8s ease 1s;
}

/* Sweep keyframes */
@keyframes sweep{
  0%{ left: -120%; }
  100%{ left: 130%; }
}

/* Navigation Dots */
.dots{
  position: fixed;
  right:1.25rem;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction: column;
  gap:0.625rem;
  z-index:80;
}
.dots button{
  width:0.75rem;
  height:0.75rem;
  border-radius:50%;
  background: rgba(0,0,0,0.16);
  border:none;
  cursor:pointer;
}
.dots button.active{
  background: linear-gradient(90deg, var(--accent), #ff9f57);
  box-shadow: 0 0.25rem 0.875rem rgba(255,127,42,0.14);
}

/* Footer */
.site-footer{
  padding:4rem 0;
  background: var(--bg-light);
  color: var(--text-dark);
}
.footer-inner{
  display:flex;
  gap:2.5rem;
  justify-content:space-between;
}

/* Mobile first: <600px */
@media (max-width:599px){

  body {
    overflow-x: hidden; /* prevent horizontal scroll */
  }

  .header-inner {
    flex-direction: row;   /* keep in a row */
    gap: 0.5rem;           /* slightly smaller gap */
  }
  .header-nav {
    display: flex;
    gap: 0.5rem;       /* spacing between links */
  }
  .header-nav a {
    font-size: 0.85rem; /* smaller text */
    margin-left: 0;      /* remove extra margin */
    white-space: nowrap; /* prevent line break */
  }

  .section-inner {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;      /* prevent shrink */
    padding: 0 16px;      /* side padding */
  }

  .stage {
    min-height: 45vh;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .car-image {
    width: 90%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .content {
    flex-basis: auto;
    width: 100%;
    text-align: center;
    transform: translateY(1rem);
    gap: 0.5rem;
  }
  

  .car-title { font-size: 1.6rem; }
  .car-sub { font-size: 0.85rem; }
  .car-price { font-size: 1rem; }

  /* Mobile swoosh - absolute, wide enough for full animation */
  .light-sweep {
    position: absolute;        /* relative to stage */
    top: 0; left: -120%;       /* start off left */
    width: 340%;               /* extra wide so it travels fully off right */
    height: 100%;
    z-index: 5;
    pointer-events: none;
    transform: skewX(-20deg);
    opacity: 0;                /* will fade in with JS */
  }

  @keyframes sweep {
    0% { left: -120%; }
    100% { left: 120%; }
  }
}


/* Tablets 600px–899px */
@media (min-width:600px) and (max-width:899px){
  .section-inner{
    gap:2rem;
  }
  .car-title{ font-size:1.75rem; }
  .car-sub{ font-size:0.85rem; }
  .car-price{ font-size:1rem; }
}

/* Desktops 900px+ */
@media (min-width:900px){
  .car-title{ font-size:2.25rem; }
  .car-sub{ font-size:0.9rem; }
  .car-price{ font-size:1rem; }
}