@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Bebas+Neue&display=swap');

  :root{
    --bg:#111015;
    --bg2:#0b0a0e;
    --white:#f5f3ef;
    --accent:#ff4d2e;
    --accent2:#7c5cff;
    --grey:#8a8790;
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--white);
    font-family:'Space Grotesk', sans-serif;
    overflow-x:hidden;
    cursor:default;
  }

  ::selection{background:var(--accent);color:#111;}

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:200;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 48px;
    mix-blend-mode:difference;
  }
  .nav-logo{
    font-family:'Archivo Black', sans-serif;
    font-size:22px;
    letter-spacing:-0.5px;
  }
  .nav-links{
    display:flex;
    gap:6px;
    list-style:none;
  }
  .nav-dot{
    width:44px;height:44px;
    border-radius:50%;
    border:1px solid rgba(245,243,239,0.3);
    display:flex;align-items:center;justify-content:center;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:all .4s ease;
    background:transparent;
  }
  .nav-dot:hover{
    background:var(--white);
    color:#111;
    transform:scale(1.1) rotate(8deg);
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    position:relative;
    padding:140px 48px 40px;
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-title{
    font-family:'Archivo Black', sans-serif;
    font-size:clamp(52px, 9vw, 128px);
    line-height:0.88;
    letter-spacing:-3px;
    text-transform:uppercase;
  }
  .hero-title .row{
    display:flex;
    justify-content:space-between;
    overflow:hidden;
  }
  .hero-title .row span{
    display:inline-block;
    transform:translateY(110%);
    animation:riseUp 0.9s cubic-bezier(.2,.9,.25,1) forwards;
  }
  .hero-title .row:nth-child(1) span{animation-delay:.05s;}
  .hero-title .row:nth-child(2) span{animation-delay:.15s;}
  .hero-title .row:nth-child(3) span{animation-delay:.25s;}
  .hero-title .row:nth-child(4) span{animation-delay:.35s;}
  .hero-title .accent-italic{
    font-family:'Bebas Neue', cursive;
    font-style:italic;
    color:transparent;
    -webkit-text-stroke:1.5px var(--white);
    font-size:0.45em;
    align-self:center;
  }
  @keyframes riseUp{
    to{transform:translateY(0);}
  }

  .hero-sub{
    position:absolute;
    right:48px;
    top:150px;
    max-width:260px;
    text-align:right;
    font-size:13px;
    color:var(--grey);
    line-height:1.6;
    opacity:0;
    animation:fadeIn 1s ease forwards 1s;
  }
  @keyframes fadeIn{to{opacity:1;}}

  .hero-tagline{
    display:flex;
    gap:14px;
    align-items:center;
    margin-top:18px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--grey);
    opacity:0;
    animation:fadeIn 1s ease forwards 1.1s;
  }
  .hero-tagline em{
    font-style:normal;
    color:var(--accent);
    font-family:'Bebas Neue', cursive;
    font-size:20px;
    letter-spacing:1px;
  }

  /* stage where the low car sits */
  .hero-stage{
    position:relative;
    width:100%;
    height:340px;
    margin-top:20px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .ground-line{
    position:absolute;
    bottom:38px;
    left:0;right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(245,243,239,0.25), transparent);
  }
  .hero-spot{
    position:absolute;
    bottom:0;
    width:520px;
    height:80px;
    background:radial-gradient(ellipse at center, rgba(255,77,46,0.35), transparent 70%);
    filter:blur(8px);
  }

  /* ---------- CAR SVG STYLES ---------- */
  .car{
    position:relative;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,0.6));
  }
  .car svg{display:block;}
  .wheel{
    transform-origin:center;
    animation:spin 3s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  .float-car{
    animation:floatY 4.5s ease-in-out infinite;
  }
  @keyframes floatY{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }

  /* ---------- MARQUEE ---------- */
  .marquee-wrap{
    border-top:1px solid rgba(245,243,239,0.15);
    border-bottom:1px solid rgba(245,243,239,0.15);
    overflow:hidden;
    padding:22px 0;
    background:var(--bg2);
  }
  .marquee{
    display:flex;
    white-space:nowrap;
    width:max-content;
    animation:scrollLeft 22s linear infinite;
  }
  .marquee span{
    font-family:'Archivo Black', sans-serif;
    font-size:20px;
    text-transform:uppercase;
    padding:0 30px;
    color:var(--grey);
    letter-spacing:1px;
  }
  .marquee span.hi{color:var(--white);}
  .marquee span.dot{color:var(--accent);}
  @keyframes scrollLeft{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ---------- SECTION SHARED ---------- */
  .section{
    padding:120px 48px;
    position:relative;
  }
  .section-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--grey);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
  }
  .section-label::before{
    content:'';
    width:30px;height:1px;
    background:var(--accent);
  }

  /* ---------- CAR SHOWCASE GRID ---------- */
  .showcase{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .car-row{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    align-items:center;
    gap:40px;
    padding:70px 0;
    border-bottom:1px solid rgba(245,243,239,0.12);
    opacity:0;
    transform:translateY(60px);
    transition:opacity .8s ease, transform .8s ease;
  }
  .car-row.visible{
    opacity:1;
    transform:translateY(0);
  }
  .car-row:nth-child(even){
    grid-template-columns:1.3fr 1fr;
  }
  .car-row:nth-child(even) .car-info{order:2;}
  .car-row:nth-child(even) .car-stage{order:1;}

  .car-info .num{
    font-family:'Bebas Neue', cursive;
    font-size:14px;
    color:var(--accent);
    letter-spacing:2px;
  }
  .car-info h2{
    font-family:'Archivo Black', sans-serif;
    font-size:clamp(36px,5vw,68px);
    line-height:0.95;
    text-transform:uppercase;
    letter-spacing:-2px;
    margin:12px 0 18px;
  }
  .car-info p{
    color:var(--grey);
    font-size:15px;
    line-height:1.7;
    max-width:400px;
    margin-bottom:22px;
  }
  .car-tags{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .car-tags span{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:7px 14px;
    border:1px solid rgba(245,243,239,0.25);
    border-radius:30px;
    color:var(--grey);
  }

  .car-stage{
    position:relative;
    height:280px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    border-radius:24px;
    overflow:hidden;
  }
  .car-stage-bg{
    position:absolute;
    inset:0;
    opacity:.5;
  }
  .car-stage .ground{
    position:absolute;
    bottom:36px;
    left:5%;right:5%;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(245,243,239,.3), transparent);
  }
  .car-stage .shadow-blob{
    position:absolute;
    bottom:28px;
    width:70%;
    height:26px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 75%);
    border-radius:50%;
  }

  /* ---------- STATS ---------- */
  .stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2px;
    background:rgba(245,243,239,0.12);
    border-top:1px solid rgba(245,243,239,0.12);
    border-bottom:1px solid rgba(245,243,239,0.12);
  }
  .stat{
    background:var(--bg);
    padding:50px 30px;
    text-align:center;
  }
  .stat h3{
    font-family:'Archivo Black', sans-serif;
    font-size:52px;
    letter-spacing:-2px;
  }
  .stat p{
    color:var(--grey);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-top:8px;
  }

  /* ---------- FOOTER ---------- */
  .footer{
    padding:100px 48px 50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:30px;
  }
  .footer h2{
    font-family:'Archivo Black', sans-serif;
    font-size:clamp(40px,8vw,110px);
    text-transform:uppercase;
    letter-spacing:-3px;
    line-height:0.9;
  }
  .footer-btn{
    padding:18px 42px;
    border-radius:40px;
    border:1px solid var(--white);
    color:var(--white);
    background:transparent;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:13px;
    cursor:pointer;
    transition:all .35s ease;
  }
  .footer-btn:hover{
    background:var(--white);
    color:#111;
  }
  .footer-bottom{
    margin-top:60px;
    display:flex;
    justify-content:space-between;
    width:100%;
    max-width:900px;
    color:var(--grey);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
  }

  @media(max-width:900px){
    .car-row, .car-row:nth-child(even){
      grid-template-columns:1fr;
    }
    .car-row:nth-child(even) .car-info{order:1;}
    .car-row:nth-child(even) .car-stage{order:2;}
    .stats{grid-template-columns:repeat(2,1fr);}
    .hero-sub{position:static;max-width:none;text-align:left;margin-top:20px;}
    .nav{padding:20px;}
    .section{padding:80px 20px;}
  }