:root{
  --text:#111;
  --muted:#6a6a6a;
  --rule:#d9d9d9;

  --g0:#ffffff;
  --g1:#f6f6f6;
  --g2:#e6e6e6;
  --g3:#cfcfcf;

  --light-text:#efefef;
  --light-muted:#d9d9d9;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

* {
  font-family: "Source Sans 3", sans-serif;
}

body {
  margin: 0;
  font-family: "Source Sans 3", sans-serif !important;
  color: var(--text);
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f1f1f1 25%,
    #d9d9d9 60%,
    #bfbfbf 85%,
    #a6a6a6 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}


.site-header{ padding:18px 24px 8px; }
.nav{
  display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap;
  font-size:15px; color:var(--muted);
}
.nav__link{ color:inherit; text-decoration:none; position:relative; padding:2px 6px; }
.nav__link::after{
  content:""; position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  width:1px; height:14px; background:#cfcfcf;
}
.nav__link:last-child::after{ display:none; }
.nav__link:hover{ color:#000; }
.nav__link--active{ color:#000; font-weight:600; }


.wrapper{ max-width:1100px; margin:0 auto; padding:0 24px; }


.hero{ text-align:center; padding:80px 0; }
.kicker{
  margin:8px 0 6px; font-size:20px; font-weight:600; color:#333; letter-spacing:0.2px;
}
.rule{
  width:260px; height:1px; border:0; background:var(--rule);
  margin:6px auto 18px;
}
.title{ font-size:72px; line-height:1.02; margin:0 0 6px; font-weight:800; }
.jp{ margin:0 0 20px; color:#808080; font-size:18px; letter-spacing:0.12em; }
.hero__image img{
  width:820px; max-width:100%; height:auto; display:block; margin:0 auto;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.15));
}
.subtitle{ max-width:680px; margin:32px auto 0; color:#6e6e6e; font-size:16px; }


.below-fold{ padding-top:80px; padding-bottom:80px; }

.about{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:center;
  padding:48px 0 40px;
}
.about__media img{
  width:100%; height:auto; display:block;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.18));
}
.about__copy h2{ margin:0 0 8px; font-size:32px; }
.about .lede{ color:#333; margin:0 0 14px; }
.about__copy p{ margin:10px 0; line-height:1.6; }


.gallery{ padding:24px 0 40px; }
.gallery h2{ text-align:center; margin:0 0 18px; font-size:28px; }

.scroller{
  display:flex; gap:24px; overflow-x:auto; padding:6px 2px 22px;
  scroll-snap-type:x mandatory;
}
.scroller::-webkit-scrollbar{ height:10px; }
.scroller::-webkit-scrollbar-thumb{ background:#bdbdbd; border-radius:999px; }
.scroller::-webkit-scrollbar-track{ background:#ececec; }

.card{ min-width:360px; scroll-snap-align:center; }
.card img{
  width:360px; height:220px; object-fit:cover; border-radius:16px; display:block;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.card figcaption{ text-align:center; margin-top:10px; color:#444; font-size:14px; }


.global{ padding:56px 0 40px; }
.global h2{
  text-align:center;
  margin:0 0 6px;
  font-size:28px;
  color:var(--text);
}
.global__lede{
  text-align:center;
  margin:0 0 28px;
  color:var(--muted);
}

.gp-row{
  display:grid; grid-template-columns: 160px 1fr; gap:28px;
  align-items:center; margin:22px 0 28px;
}
.gp-img{
  width:160px; height:120px; object-fit:contain;
  background: rgba(255,255,255,0.06); border-radius:12px; padding:12px;
}
.gp-text{
  color: var(--text);
  line-height:1.7;
  font-size:16px;
  text-shadow:none;
}

main.wrapper,
section.wrapper,
.racing,
.safety,
.sales,
.below-fold {
  padding-top: 40px;
  padding-bottom: 5px;
}


@media (max-width: 960px){
  .about{ grid-template-columns: 1fr; }
  .about__media{ order:-1; }
  .title{ font-size:56px; }
}
@media (max-width: 720px){
  .title{ font-size:42px; }
  .gallery h2{ font-size:24px; }
  .card, .card img{ min-width:300px; width:300px; height:190px; }
  .gp-row{ grid-template-columns: 1fr; }
  .gp-img{ width:220px; height:140px; margin-inline:auto; }
}



.gens__title{
  margin: 12px 0 20px;
  font-size: 32px;
  font-weight: 800;
}

.gen-row{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.gen-row:first-of-type{ border-top: 0; }

.gen-img{
  width: 360px;
}
.gen-img img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.gen-copy h2{
  margin: 0 0 6px;
  font-size: 24px;
}
.gen-copy p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 780px){
  .gen-row{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gen-img, .gen-img img{
    width: 100%;
    height: 220px;
  }
}



.safety__title{
  margin: 8px 0 14px;
  font-size: 32px;
  font-weight: 800;
}

.safety {
  padding-bottom: 60px;
}

.country{ margin: 28px 0 44px; }
.country h2{ font-size: 24px; margin: 0 0 8px; }
.country h3{ font-size: 18px; margin: 18px 0 10px; color: #333; }

.safety__table{
  margin: 14px 0 18px;
}
.safety__table img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.safety__table figcaption{
  font-size: 12px; color: var(--muted); margin-top: 6px;
}

.plain-list{ margin: 8px 0 18px 18px; }
.plain-list li{ margin: 4px 0; }


.ratings{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 10px;
  max-width: 780px;
}
.rating-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  font-size: 16px;
}

.stars{
  --rating: 5;
  --star-size: 22px;
  --star-empty: #bfbfbf;
  --star-fill:  #f4a024; 
  width: calc(var(--star-size) * 5);
  height: var(--star-size);


  background:
    linear-gradient(90deg,
      var(--star-fill) calc((var(--rating) / 5) * 100%),
      var(--star-empty) 0);


  -webkit-mask-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\">\
<path d=\"M12 1.8l3.05 6.19 6.83.99-4.94 4.81 1.17 6.9L12 17.9 5.89 20.7l1.17-6.9L2.12 8.98l6.83-.99L12 1.8z\"/>\
</svg>');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: var(--star-size) var(--star-size);
  mask-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\">\
<path d=\"M12 1.8l3.05 6.19 6.83.99-4.94 4.81 1.17 6.9L12 17.9 5.89 20.7l1.17-6.9L2.12 8.98l6.83-.99L12 1.8z\"/>\
</svg>');
  mask-repeat: repeat-x;
  mask-size: var(--star-size) var(--star-size);
  display: inline-block;
}


.racing__title {
  font-size: 32px;
  font-weight: 800;
  margin: 8px 0 24px;
  margin-bottom: 36px;
}

.racing__section {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
  margin: 48px 0;
}

.racing__section--noimg {
  display: block;
}

.racing__text h2 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}

.racing__text ul {
  padding-left: 20px;
  line-height: 1.7;
}

.racing__text li {
  margin-bottom: 8px;
  color: #333;
}

.racing__image img {
  width: 100%;
  max-width: 480px;
  border-radius: 14px;
  display: block;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  margin-inline: auto;
}

.racing {
  padding-bottom: 60px;
}

@media (max-width: 900px) {
  .racing__section {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .racing__text ul { text-align: left; }
}


.page-title{
  font-size:32px;
  font-weight:800;
  margin:8px auto 10px;
  max-width:980px;
}

.sales .lede{
  color:#444;
  max-width:980px;
  line-height:1.7;
  margin:12px auto 0;
}

.sales-figure{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 26px auto 80px;
}

.sales-figure img{
  width:100%;
  max-width:980px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.sales-figure {
  text-align: center;   
  margin: 26px 0 80px; 
  width: 100%;
}

.content-width {
  max-width: 980px;  
  margin: 0 auto;  
}

.site-footer {
  background: linear-gradient(to bottom, #e9e9e9, #d6d6d6, #c5c5c5);
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  color: #444;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  margin-top: 120px;
  box-shadow: 0 -8px 18px rgba(0,0,0,0.08);
}

.site-footer p {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.4px;
}

.about,
.gallery,
.global {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}