/* Real application screens over the existing realistic range artwork. */
.hero {
  grid-template-columns:1.04fr 1fr;
  gap:48px;
  min-height:780px;
  padding-top:66px;
  padding-bottom:74px;
}
.hero::before {
  background:
    linear-gradient(90deg,#08090bf2 0%,#08090bd4 38%,#08090b80 70%,#08090b59 100%),
    linear-gradient(0deg,#08090b 0%,#08090b00 26%,#08090b20 75%,#08090b99 100%),
    url("range-background.webp") center 54% / cover no-repeat;
}
.hero::after { display:none; }
.hero h1 { font-size:clamp(52px,5.1vw,77px); }
.hero-description { margin-top:26px; color:#c4c0ca; }
.hero .launch-label { color:#cfccd5; }
.hero .hero-commercial-note { color:#a6a0ad; }
.hero-product {
  position:relative;
  width:100%;
  min-width:0;
  height:560px;
  isolation:isolate;
}
.hero-product-label {
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:#d1c9d5;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:9px;
  letter-spacing:.08em;
  padding:10px 12px;
  background:#100d13a6;
  border:1px solid #ad788d42;
  border-radius:4px;
  backdrop-filter:blur(10px);
}
.hero-tablet {
  position:absolute;
  left:-2%;
  top:156px;
  width:66%;
  aspect-ratio:1.07;
  padding:7px;
  border:1px solid #72737b;
  border-radius:15px;
  background:#0a0b0e;
  box-shadow:0 25px 50px #0009;
  transform:perspective(1000px) rotateY(8deg) rotateZ(-4deg);
}
.hero-tablet img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:8px;
  background:#09090b;
}
.hero-phone {
  position:absolute;
  top:40px;
  right:3%;
  width:41%;
  max-width:237px;
  aspect-ratio:589 / 1280;
  padding:5px;
  background:#09090b;
  border:1px solid #9a8f9d;
  border-radius:34px;
  box-shadow:12px 28px 65px #000a,0 0 30px #da476312;
  transform:perspective(1200px) rotateY(-8deg) rotateZ(3deg);
  overflow:hidden;
  transition:transform .25s;
}
.hero-phone img { width:100%; height:100%; display:block; object-fit:contain; border-radius:27px; }
.hero-phone:hover { transform:perspective(1200px) rotateY(-5deg) rotateZ(2deg) translateY(-4px); }
.hero-explore {
  position:absolute;
  bottom:0;
  left:0;
  display:inline-flex;
  align-items:center;
  gap:28px;
  color:#ece0ed;
  border-bottom:1px solid #987a90;
  padding-bottom:10px;
  font-size:12px;
}
.hero-explore span { color:#ff879f; font-size:20px; }
.hero-explore:hover { color:#ffacbd; }
@media (max-width:1150px) {
  .hero { gap:34px; padding-block:65px; min-height:710px; }
  .hero h1 { font-size:clamp(46px,5.3vw,62px); }
  .hero-product { height:500px; }
  .hero-tablet { top:150px; width:69%; }
  .hero-phone { top:50px; width:44%; right:0; border-radius:29px; }
  .hero-phone img { border-radius:23px; }
}
@media (min-width:761px) and (max-width:900px) {
  .hero { gap:24px; min-height:645px; }
  .hero h1 { font-size:43px; }
  .hero-product { height:441px; }
  .hero-product-label { font-size:8px; padding:8px; letter-spacing:.04em; }
  .hero-phone { width:49%; top:44px; }
  .hero-tablet { top:165px; width:72%; }
}
@media (max-width:760px) {
  .hero { grid-template-columns:1fr; gap:37px; padding-top:46px; padding-bottom:43px; min-height:0; }
  .hero::before {
    background:
      linear-gradient(180deg,#08090bd9 0%,#08090bc2 35%,#08090b66 60%,#08090b99 90%,#08090b 100%),
      url("range-background.webp") 63% center / auto 100% no-repeat;
  }
  .hero h1 { font-size:clamp(44px,8.6vw,64px); }
  .hero-description { margin-top:23px; }
  .hero-product { width:100%; max-width:540px; height:542px; margin:auto; }
  .hero-product-label { font-size:9px; top:0; }
  .hero-phone { width:42%; max-width:220px; right:6%; top:42px; }
  .hero-tablet { width:65%; top:156px; left:0; }
  .hero-explore { bottom:0; left:0; }
}
@media (max-width:480px) {
  .hero { gap:33px; }
  .hero h1 { font-size:clamp(41px,10.35vw,49px); }
  .hero-product { height:447px; }
  .hero-product-label { font-size:8px; padding:9px; letter-spacing:.04em; }
  .hero-phone { width:49%; top:44px; right:2%; max-width:178px; border-radius:27px; padding:4px; }
  .hero-phone img { border-radius:21px; }
  .hero-tablet { top:150px; width:70%; left:-1%; border-radius:12px; padding:5px; }
  .hero-explore { font-size:11px; left:0; }
}
@media (max-width:360px) {
  .hero-product { height:410px; }
  .hero-tablet { top:143px; }
  .hero-product-label { font-size:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-phone { transition:none; }
  .hero-phone:hover { transform:perspective(1200px) rotateY(-8deg) rotateZ(3deg); }
}