/* ECOMAX STUDIO V15 | Carefully layered, responsive, and photo-first.
   Changes only presentation: commerce / authentication / checkout code untouched. */
:root{--e15-bg:#030b13;--e15-blue:#42cfff;--e15-orange:#ff791d;--e15-line:rgba(93,191,220,.23)}
html{scroll-behavior:smooth}
body{background-color:var(--e15-bg)}
.hero{
  position:relative !important;isolation:isolate !important;
  max-width:1680px !important;
  min-height:568px !important;height:clamp(568px,39vw,648px) !important;
  margin:0 auto !important;padding:0 !important;
  border:1px solid rgba(55,161,201,.28) !important;border-top:0 !important;
  overflow:hidden !important;background:#020a12 !important;
}
.hero>.hero-visual{
  display:block !important;position:absolute !important;z-index:0 !important;
  inset:0 !important;width:100% !important;height:100% !important;
  min-height:0 !important;box-shadow:none !important;overflow:hidden !important;
  border:0 !important;border-radius:0 !important;background:#020a12 !important;
}
.hero>.hero-visual>.neon-hero-stage{
  display:block !important;position:absolute !important;inset:0 !important;
  transform:none !important;
  background:url('assets/ecomax-foam-hero.webp') center 50%/cover no-repeat #020a12 !important;
  filter:none !important;transition:none !important;
}
.hero>.hero-visual>.neon-hero-stage::before,
.hero>.hero-visual>.neon-hero-stage::after,
.hero>.hero-visual::after{display:none !important;content:none !important}
.hero>.hero-visual::before{
  display:block !important;content:"" !important;inset:0 !important;
  position:absolute !important;z-index:3 !important;pointer-events:none !important;
  background:
    linear-gradient(90deg,#020914 0%,rgba(2,9,20,.99) 15%,rgba(2,9,20,.93) 26%,rgba(2,9,20,.61) 39%,rgba(2,9,20,.14) 56%,transparent 71%),
    linear-gradient(0deg,rgba(1,9,16,.3),transparent 22%) !important;
}
.hero>.hero-copy{
  position:relative !important;z-index:9 !important;
  width:52% !important;max-width:760px !important;height:100% !important;
  margin:0 !important;
  padding:42px 12px 42px clamp(22px,4.5vw,78px) !important;
  justify-content:center !important;align-items:flex-start !important;
  background:none !important;
}
.hero .eyebrow{
  color:#82dcf5 !important;letter-spacing:2.1px !important;
  font-size:10px !important;line-height:1.5 !important;
}
.hero h1{
  color:#f5fbff !important;max-width:720px !important;
  margin:21px 0 17px !important;
  font-size:clamp(42px,4vw,67px) !important;line-height:1.085 !important;
  font-style:italic !important;letter-spacing:-1.5px !important;
  text-wrap:balance !important;
  text-shadow:0 4px 23px rgba(0,0,0,.51) !important;
}
.hero h1::before{
  content:"ECOMAX" !important;display:block !important;
  margin-bottom:15px !important;
  color:#f2fbff !important;-webkit-text-fill-color:#f2fbff !important;
  font:italic 900 clamp(49px,4.9vw,82px)/.91 Arial,sans-serif !important;
  letter-spacing:-3px !important;
  text-shadow:0 4px #6a8ba0,0 0 23px rgba(20,185,240,.27) !important;
}
.hero h1 span{
  color:#ff791d !important;-webkit-text-fill-color:#ff791d !important;
  text-shadow:0 4px 18px rgba(255,106,25,.25) !important;
}
.hero .hero-description{
  width:100% !important;max-width:430px !important;
  font-size:clamp(12px,1.07vw,14px) !important;line-height:1.7 !important;
  color:#c0d1da !important;font-weight:450 !important;
  text-wrap:pretty !important;
}
.hero .hero-actions{
  margin-top:24px !important;gap:12px !important;
  display:flex !important;flex-wrap:wrap !important;
}
.hero .hero-actions .primary{
  min-height:50px !important;padding:13px 27px !important;
  border:1px solid #ffac58 !important;border-radius:13px !important;
  background:linear-gradient(120deg,#ff992e,#ef570f) !important;
  color:white !important;font-weight:800 !important;
  box-shadow:0 10px 32px rgba(255,108,21,.24),inset 0 1px rgba(255,255,255,.2) !important;
  transition:transform .2s ease,box-shadow .2s ease !important;
}
.hero .hero-actions .primary:hover,
.hero .hero-actions .primary:focus-visible{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 34px rgba(255,116,25,.4) !important;
}
.hero .hero-actions .secondary{display:none !important}
.hero .metrics{display:none !important}
.hero .hero-halo,.hero .energy-ring,.hero .float-card,
.hero .neon-car-ground,.hero .neon-car-rig,.hero .neon-car-svg,
.hero .neon-product-rack,.hero .neon-hero-note,
.hero .hero-photo-motion,.hero .hero-wheel-control,
.hero .ecmx14-effects,.hero .neon-foam-stream,
.hero .neon-foam-cannon,.hero .neon-foam-particles{
  display:none !important;
}
.hero .ecmx15-light-layer{
  position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  isolation:isolate;
}
.hero .ecmx15-lamp{
  position:absolute;opacity:.16;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 49% 48%,rgba(235,255,255,.72),rgba(78,219,255,.46) 28%,rgba(0,142,240,.14) 62%,transparent 78%);
  filter:blur(1.6px) drop-shadow(0 0 8px rgba(55,224,255,.7));
  animation:e15LampPulse 4.7s ease-in-out infinite;
}
.hero .ecmx15-lamp.front{
  clip-path:polygon(0 15%,33% 8%,67% 22%,96% 41%,100% 56%,70% 82%,25% 75%,5% 50%);
}
.hero .ecmx15-lamp.far{
  clip-path:polygon(1% 29%,67% 3%,100% 33%,90% 75%,20% 98%,0 70%);
  animation-delay:-1.1s;
}
.hero .ecmx15-floor-glow{
  position:absolute;border-radius:50%;opacity:.18;
  background:linear-gradient(90deg,transparent,rgba(57,190,233,.42) 24%,rgba(249,124,44,.1) 58%,rgba(61,190,240,.25),transparent);
  filter:blur(22px);mix-blend-mode:screen;
  animation:e15Reflect 7s ease-in-out infinite;
}
.hero .ecmx15-foam-sheen{
  position:absolute;opacity:.09;border-radius:35%;
  background:linear-gradient(102deg,transparent 20%,rgba(242,254,255,.07) 35%,rgba(247,254,255,.18) 49%,transparent 63%);
  background-size:220% 100%;
  mix-blend-mode:screen;filter:blur(6px);
  clip-path:polygon(4% 23%,40% 0,98% 43%,90% 83%,32% 100%,0 69%);
  animation:e15FoamShimmer 8s ease-in-out infinite;
}
@keyframes e15LampPulse{
  0%,100%{opacity:.15;filter:blur(1.8px) drop-shadow(0 0 5px rgba(39,178,255,.5))}
  50%{opacity:.56;filter:blur(1px) drop-shadow(0 0 14px rgba(80,236,255,.8))}
}
@keyframes e15Reflect{
  0%,100%{opacity:.14;transform:scaleX(.95)}
  50%{opacity:.34;transform:scaleX(1.035)}
}
@keyframes e15FoamShimmer{
  0%,100%{opacity:.06;background-position:175% center}
  50%{opacity:.18;background-position:0 center}
}
/* Store identity: reduced visual noise, clear hierarchy, consistent focus */
.header{background:#020a12 !important}
.header .nav{border-bottom-color:rgba(57,171,216,.23) !important}
.neon-service-strip{
  max-width:1680px !important;
  border-bottom:1px solid rgba(52,163,206,.25) !important;
  background:linear-gradient(180deg,#05131e,#030d17) !important;
}
.neon-service{
  transition:background .2s ease !important;
  background:rgba(3,12,20,.2) !important;
}
.neon-service:hover{background:rgba(19,52,71,.38) !important}
.neon-category-section{max-width:1450px !important;padding-top:34px !important}
.neon-category-head h2{letter-spacing:-.5px !important}
.neon-category-card{
  border:1px solid rgba(69,187,219,.22) !important;border-radius:16px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.17) !important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}
.neon-category-card:hover,.neon-category-card:focus-visible{
  transform:translateY(-4px) !important;
  border-color:rgba(69,205,244,.6) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.26) !important;
}
.header a:focus-visible,.hero a:focus-visible,.neon-category-card:focus-visible{
  outline:2px solid #78e1ff !important;outline-offset:3px !important;
}
.site-foam-rails,.section-foam-atmosphere{
  display:none !important;
}
@media(max-width:1180px){
  .hero>.hero-copy{width:59% !important}
  .hero h1{font-size:clamp(38px,4.5vw,59px) !important}
  .hero .hero-description{max-width:390px !important}
}
@media(max-width:760px){
  .hero{
    height:650px !important;min-height:650px !important;
    border-radius:0 !important;
  }
  .hero>.hero-copy{
    width:100% !important;max-width:none !important;
    padding:32px 19px 24px !important;
    justify-content:flex-start !important;
    background:linear-gradient(180deg,rgba(2,9,20,.94),rgba(2,9,20,.81) 43%,transparent 68%) !important;
  }
  .hero h1{
    max-width:430px !important;font-size:clamp(34px,9.2vw,47px) !important;
    margin:16px 0 12px !important;
  }
  .hero h1::before{font-size:clamp(43px,12vw,61px) !important}
  .hero .hero-description{font-size:12px !important;line-height:1.48 !important;max-width:360px !important}
  .hero .hero-actions{margin-top:17px !important}
  .hero>.hero-visual>.neon-hero-stage{
    background-size:auto 64% !important;
    background-position:79% 100% !important;
  }
  .hero>.hero-visual::before{
    background:linear-gradient(180deg,rgba(2,9,20,.92) 0%,rgba(2,9,20,.75) 38%,transparent 70%,rgba(2,9,20,.14) 100%) !important;
  }
  .neon-service-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:430px){
  .hero{height:610px !important;min-height:610px !important}
  .hero h1{font-size:clamp(31px,8.8vw,38px) !important}
  .hero .hero-description{font-size:11px !important}
  .neon-service-strip{grid-template-columns:1fr !important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .ecmx15-light-layer *{animation:none !important;transition:none !important}
  .neon-category-card,.hero .hero-actions .primary{transition:none !important}
}