:root{
  --byd-red:#D0021B;
  --byd-red-dark:#a4010f;
  --byd-black:#101114;
  --byd-gray:#f4f4f6;
  --byd-border:#e2e2e6;
  --byd-text:#1c1d21;
  --byd-muted:#6b6d76;
  --radius:10px;
}

*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--byd-text);background:#fff;line-height:1.5;}
.container{max-width:1160px;margin:0 auto;padding:0 20px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* Header */
.site-header{
  background:var(--byd-black);
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
}

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

.logo{
  font-weight:800;
  font-size:20px;
  letter-spacing:.5px;
  color:#fff;
}

.logo span{
  color:var(--byd-red);
}

/* Navigation Toggle (Hamburger) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 100;
  width: 44px;
  height: 44px;
}

.hamburger {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Hamburger Animation */
.nav-toggle.active .hamburger:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active .hamburger:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.active .hamburger:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-menu a {
  margin-left: 24px;
  color: #d7d8db;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-menu a:hover {
  color: #fff;
}

/* Navigation Overlay */
.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 49;
}

.nav-overlay.active {
  display: block;
}

/* Hero */
.hero{background:linear-gradient(135deg,var(--byd-black) 0%,#26282e 100%);color:#fff;padding:70px 0;}
.hero h1{font-size:38px;margin:0 0 12px;font-weight:800;}
.hero p{font-size:17px;color:#c9cad0;max-width:560px;margin:0 0 26px;}
.btn{display:inline-block;background:var(--byd-red);color:#fff;padding:13px 26px;border-radius:var(--radius);font-weight:700;font-size:15px;border:none;cursor:pointer;transition:.15s;}
.btn:hover{background:var(--byd-red-dark);}
.btn-outline{background:transparent;border:1.5px solid #fff;color:#fff;}
.btn-outline:hover{background:#fff;color:var(--byd-black);}
.btn-block{display:block;width:100%;text-align:center;}

/* Sections */
section{padding:56px 0;}
.section-title{font-size:26px;font-weight:800;margin:0 0 8px;}
.section-sub{color:var(--byd-muted);margin:0 0 32px;font-size:15px;}

/* Car grid */
.car-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.car-card{border:1px solid var(--byd-border);border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s;}
.car-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px);}
.car-card .img-wrap{aspect-ratio:16/10;background:var(--byd-gray);display:flex;align-items:center;justify-content:center;color:var(--byd-muted);font-size:13px;overflow:hidden;}
.car-card .img-wrap img{width:100%;height:100%;object-fit:cover;}
.car-body{padding:18px;}
.car-body h3{margin:0 0 6px;font-size:19px;}
.car-body p.desc{color:var(--byd-muted);font-size:14px;margin:0 0 14px;}
.badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:4px 10px;border-radius:20px;margin-bottom:10px;}
.badge-win{background:#fff2e0;color:#b25b00;}
.badge-discount{background:#e6f6ec;color:#137a3d;}
.badge-both{background:#eee6ff;color:#5b21b6;}
.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;}
.price-old{text-decoration:line-through;color:var(--byd-muted);font-size:14px;}
.price-new{font-size:20px;font-weight:800;color:var(--byd-red);}

/* Car detail */
.car-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
@media(max-width:820px){.car-detail{grid-template-columns:1fr;}}
.car-detail .img-wrap{border-radius:var(--radius);overflow:hidden;background:var(--byd-gray);aspect-ratio:16/10;}
.car-detail .img-wrap img{width:100%;height:100%;object-fit:cover;}
.task-box{background:var(--byd-gray);border-radius:var(--radius);padding:18px 20px;margin:20px 0;}
.task-box h4{margin:0 0 8px;font-size:15px;}
.task-box p{margin:0;font-size:14px;color:var(--byd-text);}
.ref-note{font-size:13px;color:var(--byd-muted);margin-top:6px;}

/* Form */
.form-card{border:1px solid var(--byd-border);border-radius:var(--radius);padding:24px;background:#fff;}
.form-card h3{margin-top:0;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.form-group input,.form-group textarea{width:100%;padding:11px 12px;border:1px solid var(--byd-border);border-radius:8px;font-size:14px;font-family:inherit;}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--byd-red);}
.alert{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:18px;}
.alert-error{background:#fdeaea;color:#b3111c;}
.alert-success{background:#e6f6ec;color:#137a3d;}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
.step{padding:20px;border:1px solid var(--byd-border);border-radius:var(--radius);}
.step .num{width:32px;height:32px;border-radius:50%;background:var(--byd-red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px;font-size:14px;}

/* Footer */
.site-footer{background:var(--byd-black);color:#aeb0b8;padding:30px 0;margin-top:40px;font-size:13px;}
.site-footer .fine-print{color:#7a7c85;margin-top:6px;}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}

/* Mobile Responsive */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--byd-black);
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 30px 30px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    gap: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-menu a {
    margin: 0;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #d7d8db;
    transition: all 0.2s ease;
  }

  .nav-menu a:last-child {
    border-bottom: none;
  }

  .nav-menu a:hover {
    color: #fff;
    padding-left: 10px;
    background: rgba(255, 255, 255, 0.03);
  }

  .hero h1 {
    font-size: 28px;
  }
  
  .hero p {
    font-size: 15px;
  }

  .section-title {
    font-size: 22px;
  }

  .car-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .nav-menu {
    width: 85%;
    max-width: 280px;
    padding: 70px 20px 20px;
  }

  .nav-menu a {
    font-size: 16px;
    padding: 12px 0;
  }

  .hero h1 {
    font-size: 24px;
  }
  
  .hero p {
    font-size: 14px;
  }

  .hero {
    padding: 50px 0;
  }

  section {
    padding: 40px 0;
  }

  .steps {
    grid-template-columns: 1fr;
  }
}