:root{
  --lime:#b7f000;
  --blue:#19b7ea;
  --red:#f23a2e;
  --yellow:#f6cf16;
  --purple:#8c32a8;
  --ink:#181818;
  --paper:#ffffff;
  --soft:#f6f9fc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 7% 6%, rgba(186,255,0,.10) 0 85px, transparent 87px),
    radial-gradient(circle at 95% 8%, rgba(66,185,236,.10) 0 110px, transparent 112px),
    var(--soft);
}
header{
  position:relative;
  overflow:hidden;
  background:#fff;
  text-align:center;
  padding:18px 16px 24px;
  border-bottom:1px solid #e5ebef;
}
header:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:8px;
  background:linear-gradient(90deg,var(--lime) 0 28%,var(--blue) 28% 50%,var(--red) 50% 68%,var(--yellow) 68% 84%,var(--purple) 84% 100%);
}
.brand-logo{
  display:block;
  width:min(370px,80vw);
  max-height:210px;
  object-fit:contain;
  margin:0 auto 6px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.08));
}
.tagline{
  margin:4px 0 15px;
  font-size:19px;
  line-height:1.4;
  font-weight:700;
  color:#3e3e3e;
}
nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
nav a{
  color:#111;
  text-decoration:none;
  font-weight:900;
  font-size:16px;
  padding:10px 15px;
  border-radius:999px;
  background:#fff;
  border:2px solid #111;
  box-shadow:0 4px 0 #111;
}
nav a:nth-child(1){background:var(--lime)}
nav a:nth-child(2){background:var(--blue)}
nav a:nth-child(3){background:var(--yellow)}
.wrap{max-width:1180px;margin:auto;padding:28px 16px}
.intro,.card,.detail{
  background:#fff;
  border:1px solid #e3e9ed;
  box-shadow:0 10px 28px rgba(28,46,64,.08);
}
.intro{
  padding:25px 28px;
  border-radius:24px;
  margin-bottom:22px;
}
.intro h2{
  margin:0 0 12px;
  font-size:31px;
  line-height:1.15;
}
.intro h2:after{
  content:"";
  display:block;
  margin-top:10px;
  width:125px;
  height:7px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--lime),var(--blue),var(--yellow),var(--red),var(--purple));
}
.intro p{
  margin:0;
  font-size:18px;
  line-height:1.6;
  color:#444;
}
.card{
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr;
  overflow:hidden;
  border-radius:28px;
  margin-bottom:20px;
  border-top:7px solid var(--blue);
}
.card:nth-of-type(5n+1){border-top-color:var(--lime)}
.card:nth-of-type(5n+2){border-top-color:var(--blue)}
.card:nth-of-type(5n+3){border-top-color:var(--red)}
.card:nth-of-type(5n+4){border-top-color:var(--yellow)}
.card:nth-of-type(5n){border-top-color:var(--purple)}
.card img{
  display:block;
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  background:#edf2f5;
}
.card .copy{
  padding:27px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.card h2{
  margin:0 0 13px;
  font-size:29px;
  line-height:1.15;
}
.card p{
  margin:0 0 13px;
  font-size:18px;
  line-height:1.62;
  color:#444;
}
.btn{
  display:inline-block;
  width:max-content;
  max-width:100%;
  color:#111!important;
  text-decoration:none;
  font-weight:900;
  padding:13px 19px;
  margin:7px 7px 0 0;
  border-radius:999px;
  border:2px solid #111;
  background:var(--lime);
  box-shadow:0 4px 0 #111;
}
.btn:nth-of-type(2){background:var(--yellow)}
.back{
  display:inline-block;
  color:#111;
  text-decoration:none;
  font-weight:900;
  background:#fff;
  padding:10px 15px;
  border:2px solid #111;
  border-radius:999px;
  margin-bottom:16px;
}
.detail{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  overflow:hidden;
  border-radius:28px;
}
.hero{
  width:100%;
  height:100%;
  min-height:570px;
  object-fit:cover;
  background:#eee;
}
.detail-copy{
  padding:36px;
  background:
    radial-gradient(circle at 87% 12%,rgba(255,255,255,.3) 0 68px,transparent 70px),
    linear-gradient(145deg,var(--blue),#6acdf4);
}
.detail-copy h1{
  margin:0 0 24px;
  font-family:Georgia,serif;
  font-size:42px;
  line-height:1.08;
  text-decoration:underline;
}
.detail-copy p{
  font-size:19px;
  line-height:1.7;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}
.gallery img{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:18px;
  background:#eee;
  border:4px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.09);
}
footer{
  margin-top:36px;
  padding:32px 16px;
  text-align:center;
  background:#111;
  color:#fff;
  border-top:8px solid var(--purple);
}
footer a{color:var(--lime)!important;font-weight:900}

/* Tablet */
@media(max-width:900px){
  .brand-logo{width:min(330px,78vw)}
  .card{grid-template-columns:300px 1fr}
  .detail{grid-template-columns:1fr}
  .hero{min-height:0;height:min(64vw,560px)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Phone */
@media(max-width:680px){
  header{padding:13px 12px 20px}
  .brand-logo{
    width:min(285px,88vw);
    max-height:170px;
  }
  .tagline{
    font-size:16px;
    margin-bottom:12px;
  }
  nav{
    gap:8px;
  }
  nav a{
    flex:1 1 140px;
    max-width:210px;
    font-size:14px;
    padding:10px 12px;
  }
  .wrap{
    padding:18px 10px;
  }
  .intro{
    border-radius:20px;
    padding:20px;
    margin-bottom:16px;
  }
  .intro h2{font-size:27px}
  .intro p{font-size:16px}
  .card{
    grid-template-columns:1fr;
    border-radius:22px;
    margin-bottom:16px;
  }
  .card img{
    height:auto;
    min-height:0;
    aspect-ratio:4/3;
  }
  .card .copy{
    padding:20px;
  }
  .card h2{
    font-size:24px;
  }
  .card p{
    font-size:16px;
  }
  .btn{
    width:100%;
    text-align:center;
    margin-right:0;
    padding:13px 16px;
  }
  .detail{
    border-radius:22px;
  }
  .hero{
    height:auto;
    min-height:0;
    aspect-ratio:4/3;
  }
  .detail-copy{
    padding:22px;
  }
  .detail-copy h1{
    font-size:32px;
  }
  .detail-copy p{
    font-size:17px;
  }
  .gallery{
    grid-template-columns:1fr;
  }
  .gallery img{
    height:auto;
    aspect-ratio:4/3;
  }
}

/* Small phone */
@media(max-width:390px){
  .brand-logo{
    width:min(255px,92vw);
  }
  nav a{
    flex:1 1 100%;
    max-width:none;
  }
  .intro h2{font-size:25px}
  .card h2{font-size:22px}
  .detail-copy h1{font-size:29px}
}

/* V7 genuine product photo galleries */
.gallery img[data-gallery]{cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease}
.gallery img[data-gallery]:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.photo-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:22px}
.photo-lightbox.open{display:flex}
.photo-lightbox img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:14px;background:#fff}
.photo-lightbox button{position:absolute;top:16px;right:18px;border:0;border-radius:999px;width:48px;height:48px;font-size:30px;line-height:1;background:#fff;color:#111;cursor:pointer}