/* V7 — refined cinematic hero
   Goals: readable copy zone, material G30 cutout, restrained parking-light environment,
   explicit headlight spill and separate responsive crops. */

.topbar{
  width:min(calc(100% - 32px),1480px);
  background:rgba(4,7,11,.68);
  border-color:rgba(180,204,232,.16);
  box-shadow:0 16px 44px rgba(0,0,0,.22);
}

.hero.hero-cinematic{
  min-height:max(800px,100svh);
  padding:
    clamp(128px,14vh,176px)
    max(28px,calc((100vw - 1480px)/2 + 28px))
    76px;
}

.hero-scene{
  background:
    radial-gradient(ellipse at 72% 48%,rgba(39,69,96,.22),transparent 38%),
    linear-gradient(118deg,#020406 0%,#04080d 46%,#08101a 74%,#020406 100%);
}

/* Parking structure: fewer, wider light sources, less "CSS grid". */
.garage-ceiling{
  right:-8%;
  top:-10%;
  width:67%;
  height:39%;
  opacity:.64;
  clip-path:polygon(16% 0,100% 0,100% 100%,0 76%);
  background:
    linear-gradient(100deg,
      transparent 0 15%,
      rgba(199,225,246,.55) 15.35% 15.8%,
      transparent 16.2% 39%,
      rgba(199,225,246,.42) 39.35% 39.75%,
      transparent 40.1% 65%,
      rgba(199,225,246,.34) 65.3% 65.65%,
      transparent 66% 100%),
    linear-gradient(180deg,#0b1016 0%,#05080c 72%,#030507 100%);
  filter:blur(.2px) drop-shadow(0 10px 22px rgba(114,178,226,.04));
}

.garage-column{
  top:17%;
  bottom:13%;
  opacity:.56;
  background:linear-gradient(90deg,#050708,#15191d 45%,#080b0e 77%,#020304);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.035),
    14px 0 42px rgba(0,0,0,.28);
}
.column-a{right:27%;width:5.5%}
.column-b{right:5%;width:4.5%;opacity:.38}

.garage-floor{
  height:42%;
  background:
    linear-gradient(104deg,transparent 0 56%,rgba(122,181,218,.055) 60%,transparent 67%),
    linear-gradient(180deg,rgba(17,23,28,.1) 0%,#080c10 42%,#020304 100%);
  border-top:1px solid rgba(178,210,231,.025);
}
.garage-floor:before{
  content:"";
  position:absolute;
  left:45%;
  right:2%;
  top:10%;
  height:32%;
  background:radial-gradient(ellipse at 50% 0%,rgba(151,206,238,.13),rgba(65,109,139,.035) 44%,transparent 70%);
  filter:blur(7px);
}
.garage-floor:after{
  inset:36% 3% 0 39%;
  background:
    linear-gradient(176deg,transparent 0 48%,rgba(178,215,237,.045) 49%,transparent 50%),
    radial-gradient(ellipse at 62% 12%,rgba(130,190,229,.10),transparent 38%);
  filter:blur(5px);
  opacity:.72;
}

/* Material car: transparent foreground segmentation, no screen blend. */
.hero-g30{
  z-index:4;
  width:min(58vw,1120px);
  right:1.8vw;
  bottom:5.2%;
  mix-blend-mode:normal;
  filter:
    brightness(.91)
    contrast(1.055)
    saturate(.86)
    drop-shadow(0 30px 48px rgba(0,0,0,.58));
  transform:
    translate3d(calc(var(--hero-scroll)*8px),calc(var(--hero-scroll)*13px),0)
    scale(calc(1 + var(--hero-scroll)*.012));
  transform-origin:72% 72%;
}

/* Soft, distorted floor reflection — separate from the car itself. */
.hero-g30-reflection{
  position:absolute;
  z-index:1;
  width:min(58vw,1120px);
  max-width:none;
  right:1.8vw;
  bottom:-22.5%;
  opacity:.13;
  filter:blur(4px) brightness(.65) saturate(.55);
  transform:scaleY(-.34) skewX(-3deg);
  transform-origin:50% 0%;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.66),rgba(0,0,0,.18) 44%,transparent 78%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.66),rgba(0,0,0,.18) 44%,transparent 78%);
}

/* Headlights illuminate the asphalt, not the headline. */
.headlight-beam{
  z-index:3;
  left:34%;
  width:31%;
  height:10%;
  clip-path:polygon(0 38%,100% 3%,100% 95%,0 63%);
  background:linear-gradient(90deg,transparent 0%,rgba(97,171,220,.08) 26%,rgba(173,221,251,.48) 100%);
  filter:blur(10px);
  transform-origin:right center;
}
.beam-a{top:59%;opacity:.26;transform:rotate(1.6deg)}
.beam-b{top:62.5%;left:31%;opacity:.17;transform:rotate(-1.8deg) scaleY(.66)}

/* Vignette protects the copy zone but no longer makes the car translucent. */
.hero-vignette{
  z-index:5;
  background:
    linear-gradient(90deg,
      rgba(2,4,7,1) 0%,
      rgba(2,4,7,.97) 20%,
      rgba(2,4,7,.86) 31%,
      rgba(2,4,7,.44) 42%,
      rgba(2,4,7,.11) 52%,
      transparent 64%),
    linear-gradient(180deg,rgba(0,0,0,.38) 0%,transparent 22%,transparent 73%,rgba(0,0,0,.58) 100%);
}

.hero.hero-cinematic .hero-copy{
  width:min(600px,42vw);
  max-width:600px;
}

.hero.hero-cinematic .hero-copy h1{
  font-size:clamp(56px,5.15vw,88px);
  line-height:.94;
  letter-spacing:-.058em;
  max-width:600px;
  margin:17px 0 24px;
}
.hero.hero-cinematic .hero-copy h1 span{
  background:linear-gradient(90deg,#a8cdff 0%,#6ca4ff 42%,#3477f8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero.hero-cinematic .hero-copy>p{
  max-width:570px;
  font-size:clamp(15px,1.04vw,18px);
  color:#c1cad5;
  line-height:1.62;
}

.hero.hero-cinematic .hero-footnote{
  color:#7f8b98;
  font-size:10px;
}

.hero-pill{
  background:rgba(17,38,62,.38);
  border-color:rgba(108,159,231,.28);
}

/* Ultra-wide: grow the scene, but preserve the protected copy column. */
@media(min-width:1900px){
  .topbar{width:min(calc(100% - 48px),1760px)}
  .hero.hero-cinematic{
    padding-left:max(34px,calc((100vw - 1760px)/2 + 34px));
    padding-right:max(34px,calc((100vw - 1760px)/2 + 34px));
  }
  .hero.hero-cinematic .hero-copy{width:650px;max-width:650px}
  .hero.hero-cinematic .hero-copy h1{font-size:96px;max-width:650px}
  .hero-g30,
  .hero-g30-reflection{width:min(57vw,1380px);right:2.2vw}
  .hero-g30{bottom:4.5%}
  .hero-g30-reflection{bottom:-23%}
  .hero-vignette{
    background:
      linear-gradient(90deg,rgba(2,4,7,1) 0%,rgba(2,4,7,.96) 20%,rgba(2,4,7,.82) 30%,rgba(2,4,7,.38) 40%,rgba(2,4,7,.08) 50%,transparent 61%),
      linear-gradient(180deg,rgba(0,0,0,.36),transparent 22%,transparent 73%,rgba(0,0,0,.58));
  }
}

/* Notebook / landscape tablet. */
@media(max-width:1180px){
  .hero.hero-cinematic .hero-copy{width:min(560px,50vw);max-width:560px}
  .hero.hero-cinematic .hero-copy h1{font-size:clamp(52px,6vw,72px)}
  .hero-g30,
  .hero-g30-reflection{width:67vw;right:-10vw}
  .hero-g30{bottom:5%}
  .hero-g30-reflection{bottom:-21%}
  .hero-vignette{
    background:
      linear-gradient(90deg,rgba(2,4,7,1) 0%,rgba(2,4,7,.96) 31%,rgba(2,4,7,.72) 43%,rgba(2,4,7,.24) 58%,transparent 73%),
      linear-gradient(180deg,rgba(0,0,0,.34),transparent 28%,transparent 70%,rgba(0,0,0,.65));
  }
}

/* Portrait tablets: text becomes the first act, car becomes the second. */
@media(max-width:900px){
  .hero.hero-cinematic{
    min-height:max(900px,100svh);
    padding:118px 28px 54px;
    align-items:flex-start;
  }
  .hero.hero-cinematic .hero-copy{
    width:min(650px,84vw);
    max-width:650px;
  }
  .hero.hero-cinematic .hero-copy h1{
    font-size:clamp(50px,8.6vw,72px);
    max-width:650px;
  }
  .hero-g30,
  .hero-g30-reflection{
    width:116vw;
    right:-39vw;
  }
  .hero-g30{bottom:1.5%}
  .hero-g30-reflection{bottom:-25%}
  .garage-ceiling{width:79%;right:-22%;opacity:.45}
  .headlight-beam{opacity:.12}
  .hero-vignette{
    background:
      linear-gradient(180deg,rgba(2,4,7,.99) 0%,rgba(2,4,7,.92) 42%,rgba(2,4,7,.40) 63%,rgba(2,4,7,.27) 76%,rgba(2,4,7,.55) 100%),
      linear-gradient(90deg,rgba(2,4,7,.62),transparent 88%);
  }
}

/* Phones: safe typography zone, close crop of front quarter. */
@media(max-width:600px){
  .hero.hero-cinematic{
    min-height:max(820px,100svh);
    padding:102px 18px 38px;
  }
  .hero.hero-cinematic .hero-copy{
    width:calc(100vw - 44px)!important;
    max-width:calc(100vw - 44px)!important;
  }
  .hero.hero-cinematic .hero-copy h1{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(36px,10.7vw,46px);
    line-height:.98;
    letter-spacing:-.048em;
    margin:14px 0 18px;
    white-space:normal!important;
    overflow-wrap:normal!important;
  }
  .hero.hero-cinematic .hero-copy>p{
    width:100%!important;
    max-width:100%!important;
    font-size:12.5px;
    line-height:1.55;
  }
  .hero.hero-cinematic .hero-footnote{max-width:78%;font-size:9px}
  .hero.hero-cinematic .platforms{max-width:72%}
  .hero-g30,
  .hero-g30-reflection{
    width:150vw;
    right:-72vw;
  }
  .hero-g30{bottom:.5%}
  .hero-g30-reflection{bottom:-25%}
  .garage-ceiling{width:92%;right:-42%;height:33%;opacity:.34}
  .garage-column{display:none}
  .headlight-beam{left:18%;width:54%;top:72%;opacity:.08}
  .beam-b{top:75%;left:16%}
  .hero-vignette{
    background:
      linear-gradient(180deg,rgba(2,4,7,.995) 0%,rgba(2,4,7,.94) 48%,rgba(2,4,7,.38) 67%,rgba(2,4,7,.30) 78%,rgba(2,4,7,.58) 100%),
      linear-gradient(90deg,rgba(2,4,7,.70),transparent 94%);
  }
}

/* V7.1 typography refinement */
.hero.hero-cinematic .hero-copy h1 span{
  display:inline-block;
  font-size:.82em;
  letter-spacing:-.048em;
  white-space:nowrap;
}
@media(max-width:900px){
  .hero.hero-cinematic .hero-copy h1 span{font-size:.84em}
}
@media(max-width:600px){
  .hero.hero-cinematic .hero-copy h1{
    font-size:31px;
    line-height:1.02;
    letter-spacing:-.04em;
  }
  .hero.hero-cinematic .hero-copy h1 span{
    font-size:.88em;
    white-space:normal;
  }
  .hero.hero-cinematic .hero-copy{
    width:calc(100vw - 40px)!important;
    max-width:calc(100vw - 40px)!important;
  }
  .hero.hero-cinematic .hero-copy>p{
    width:100%!important;
    max-width:100%!important;
  }
}

/* V7.2 — headlight contact with the floor */
.garage-floor:before{
  left:39%;
  right:13%;
  top:6%;
  height:38%;
  background:
    radial-gradient(ellipse at 54% 10%,rgba(177,221,248,.18),rgba(91,153,191,.07) 35%,transparent 67%);
  filter:blur(9px);
}