/*
 * ON.EV — homepage clean concept
 * Camada experimental e reversivel. O CSS original permanece intacto.
 */

:root{
  --clean-ink:#16191b;
  --clean-muted:#60666a;
  --clean-paper:#fff;
  --clean-soft:#f4f5f2;
  --clean-line:rgba(22,25,27,.09);
  --clean-green:#6ccb28;
  --clean-green-dark:#438f18;
  --clean-radius:22px;
}

body{background:var(--clean-paper)}
#ambient-bg,.rail{display:none!important}

/* Navigation: quiet, precise and slightly translucent. */
.site-nav{
  min-height:72px;
  padding:12px 4.5vw;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(22,25,27,.065);
  box-shadow:none;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
.wordmark img{height:23px}
.nav-links{gap:clamp(20px,2.1vw,34px)}
.nav-links a{
  color:#4d5356;
  font-size:13px;
  font-weight:500;
  letter-spacing:.025em;
  text-transform:none;
}
.nav-links a:hover{color:var(--clean-ink)}
.nav-links a::after{display:none!important}
.nav-portal{padding:11px 18px;background:var(--clean-ink);font-size:12px}

/* Hero: full-bleed editorial image with a compact glass copy panel. */
.hero.hero-carousel{
  min-height:calc(100svh - 20px);
  height:max(720px,100svh);
  margin:0;
  padding:14px;
  background:#eef0ed;
}
.hero-slide{
  inset:14px;
  padding:clamp(110px,12vh,150px) 4.2vw 76px;
  align-items:center;
  border-radius:var(--clean-radius);
  overflow:hidden;
  background-position:center;
}
.hero-slide::before{
  background:linear-gradient(90deg,rgba(10,14,15,.64) 0%,rgba(10,14,15,.42) 31%,rgba(10,14,15,.08) 58%,transparent 74%);
}
.hero-slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,10,11,.2),transparent 25%,transparent 70%,rgba(7,10,11,.25));
  pointer-events:none;
}
.hero-slide .hero-content{
  width:min(540px,45vw);
  max-width:540px;
  padding:0;
  color:#fff;
}
.hero-slide.model-banner{background-image:none!important}
.hero-slide.model-banner .hero-slide-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover}
.hero-slide.model-banner.is-loop .hero-slide-bg{transform:scaleX(-1)}
.hero-slide.model-banner::before,.hero-slide.model-banner::after{z-index:1}
.hero-slide.model-banner .hero-content{z-index:2}
.hero-model-logo{display:block;width:auto;max-width:min(310px,30vw);height:auto;max-height:66px;margin:0 0 25px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.hero-slide .hero-logo{display:none}
.hero-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
  color:rgba(255,255,255,.82);
  font-size:10px;
  font-weight:600;
  letter-spacing:.17em;
}
.hero-eyebrow::before{width:24px;background:var(--clean-green)}
.hero-content h1,.hero-slide h2{
  max-width:520px;
  margin:0;
  color:#fff;
  font-size:clamp(48px,5vw,76px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.052em;
  text-wrap:balance;
}
.hero-content h1::after,.hero-slide h2::after{display:none}
.hero-slide .hero-desc{
  max-width:440px;
  margin-top:22px;
  color:rgba(255,255,255,.82);
  font-size:15px;
  font-weight:400;
  line-height:1.65;
}
.hero-slide .hero-cta{margin-top:29px;gap:10px}
.hero-slide .btn,.hero-slide .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:230px;
  min-width:230px;
  min-height:50px;
  padding:0 22px;
  border-radius:999px;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}
.hero-slide .btn{border-color:var(--clean-green);background:var(--clean-green);color:#10140e}
.hero-slide .btn:hover{border-color:#86dd48;background:#86dd48}
.hero-slide .btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.hero-slide .btn-ghost:hover{border-color:#fff;background:#fff;color:var(--clean-ink)}
.hero-controls{left:auto;right:4.2vw;bottom:47px;gap:10px}
.hero-arrow{width:40px;height:40px;border-color:rgba(255,255,255,.3);background:rgba(12,15,16,.25);color:#fff;backdrop-filter:blur(10px)}
.hero-arrow:hover{border-color:#fff;background:#fff;color:var(--clean-ink)}
.hero-dots{padding:9px 12px;border-radius:99px;background:rgba(12,15,16,.22);backdrop-filter:blur(10px)}
.hero-dot{background:rgba(255,255,255,.5)}
.hero-dot.active{background:var(--clean-green)}
.hero-carousel .scroll-cue{display:none}

/* Shared editorial rhythm. */
.section-code{font-size:9px;letter-spacing:.16em;color:var(--clean-green-dark)}
.section-code::before{width:14px;height:1px}
.brand-intro,.model-preview,.brand-technology,.brand-journey,.store-callout{border-color:var(--clean-line)}
.brand-intro h2,.model-showcase header h2,.technology-copy h2,.brand-journey h2,.store-callout h2{
  color:var(--clean-ink);
  font-weight:400;
  letter-spacing:-.047em;
}

.brand-intro{
  gap:clamp(50px,10vw,150px);
  padding:clamp(100px,11vw,160px) 8vw;
  background:#fff;
}
.brand-intro::before,.brand-intro::after{display:none}
.brand-intro h2{max-width:760px;font-size:clamp(44px,5.2vw,72px)}
.brand-intro h2 em{color:var(--clean-ink)}
.brand-intro>p{max-width:430px;color:var(--clean-muted);font-size:16px}

/* Values become a restrained horizontal editorial gallery. */
.brand-values{
  grid-template-columns:repeat(5,minmax(220px,1fr));
  gap:12px;
  padding:12px 4.5vw 110px;
  overflow-x:auto;
  background:#fff;
  border:0;
  scrollbar-width:thin;
}
.brand-values article,.brand-values article:last-child{
  min-height:430px;
  padding:0;
  border:1px solid var(--clean-line);
  border-radius:var(--clean-radius);
  background:#fff;
  box-shadow:none;
}
.brand-values article::after{display:none}
.brand-values article:hover{transform:translateY(-3px);border-color:rgba(67,143,24,.28);box-shadow:0 18px 46px rgba(22,25,27,.06)}
.brand-values .value-photo{height:235px;filter:saturate(.88)}
.brand-values .value-icon{display:none}
.brand-values article>span{margin:24px 24px 0}
.brand-values h3{margin:auto 24px 0;font-size:18px}
.brand-values p{margin:9px 24px 25px;min-height:38px;color:var(--clean-muted)}

/* Product carousel: generous image, simple white information column. */
.model-preview{padding:clamp(100px,10vw,145px) 4.5vw;background:var(--clean-soft)}
.model-preview header{grid-template-columns:1fr minmax(300px,.48fr);gap:70px}
.model-showcase header h2{max-width:720px;font-size:clamp(43px,4.7vw,68px)}
.model-preview header>p{font-size:15px;color:var(--clean-muted)}
.showcase-stage{min-height:620px;margin-top:55px;border:0;border-radius:var(--clean-radius);background:#fff;box-shadow:0 18px 60px rgba(22,25,27,.055)}
.showcase-slide{grid-template-columns:minmax(0,1.55fr) minmax(340px,.45fr)}
.showcase-image{background:#e8eae6}
.showcase-image img{filter:saturate(.92)}
.showcase-copy{padding:clamp(42px,4.5vw,68px);background:#fff}
.showcase-copy p{color:var(--clean-muted)}
.showcase-link{background:var(--clean-ink)}
.showcase-link:hover{background:var(--clean-green-dark)}
.showcase-controls{right:clamp(26px,3.5vw,54px)}
.showcase-arrow{width:43px;height:43px;background:var(--clean-ink);box-shadow:none}
.model-showcase>.all-models-link{border-color:var(--clean-green);color:var(--clean-ink)}

/* Technology: almost architectural, without decorative orbits. */
.brand-technology{min-height:700px;grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);background:#fff}
.technology-visual{margin:14px;border-radius:var(--clean-radius);background:#eef0ec}
.technology-visual .technology-photo{filter:saturate(.85)}
.orbit{display:none}
.technology-copy{padding:clamp(60px,7vw,105px)}
.technology-copy>p,.technology-copy li{color:var(--clean-muted)}
.technology-copy li span{border:0;width:22px;height:auto;display:block;margin:0;color:var(--clean-green-dark)}

/* Journey and store sections stay light and calm. */
.brand-journey{padding:clamp(100px,10vw,145px) 4.5vw;background:#fff}
.brand-journey .journey-steps{gap:12px;margin-top:58px}
.brand-journey .journey-steps::before{display:none}
.brand-journey .journey-steps li{
  min-height:440px;
  border-color:var(--clean-line);
  border-radius:var(--clean-radius);
  box-shadow:none;
}
.brand-journey .journey-steps li:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(22,25,27,.055)}
.journey-photo{height:195px}
.journey-icon{display:none}
.journey-card-copy{padding:0 24px 24px}
.journey-label{margin-top:25px}

.store-callout{gap:12px;min-height:680px;padding:12px;background:var(--clean-soft)}
.store-callout-image,.store-callout-copy{border-radius:var(--clean-radius)}
.store-callout-copy{padding:clamp(55px,6.5vw,95px)}
.store-callout h2 em{color:var(--clean-ink)}

.closing{min-height:86vh;border-radius:0;padding:0 8vw;color:#fff}
.closing-bg::after{background:linear-gradient(90deg,rgba(12,16,17,.76),rgba(12,16,17,.34) 48%,rgba(12,16,17,.05) 75%)}
.closing h2{color:#fff;font-size:clamp(44px,5.4vw,72px);font-weight:400;letter-spacing:-.05em}
.closing .tagline{color:rgba(255,255,255,.67)}
.closing-copy{color:rgba(255,255,255,.72)}
.closing-links a{color:#fff;border-color:rgba(255,255,255,.25)}
.closing-links img.closing-link-icon{filter:brightness(0) invert(1)}

@media(max-width:900px){
  .hero.hero-carousel{height:max(760px,100svh);padding:10px}
  .hero-slide{inset:10px;padding:120px 6vw 84px;align-items:flex-end;background-position:62% center}
  .hero-slide::before{background:linear-gradient(180deg,rgba(9,12,13,.12) 10%,rgba(9,12,13,.18) 42%,rgba(9,12,13,.78) 100%)}
  .hero-slide .hero-content{width:min(620px,100%);max-width:620px}
  .hero-model-logo{max-width:min(250px,58vw);max-height:54px;margin-bottom:20px}
  .hero-controls{right:6vw;bottom:30px}
  .brand-intro{grid-template-columns:1fr;gap:34px;padding-left:6vw;padding-right:6vw}
  .brand-values{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(245px,43vw);padding-left:6vw;padding-right:6vw;scroll-snap-type:x mandatory}
  .brand-values article{scroll-snap-align:start}
  .model-preview header{grid-template-columns:1fr;gap:28px}
  .showcase-stage{min-height:800px}
  .showcase-slide{grid-template-columns:1fr;grid-template-rows:1.15fr .85fr}
  .brand-technology{grid-template-columns:1fr}
  .technology-visual{min-height:520px}
  .journey-heading{grid-template-columns:1fr}
  .brand-journey .journey-steps{grid-template-columns:repeat(2,1fr)}
  .store-callout{grid-template-columns:1fr}
}

@media(max-width:640px){
  .site-nav{min-height:64px;padding:10px 6vw}
  .hero.hero-carousel{height:max(710px,100svh)}
  .hero-slide{padding:104px 6vw 94px;background-position:65% center}
  .hero-content h1,.hero-slide h2{font-size:clamp(39px,11.5vw,51px)}
  .hero-slide .hero-desc{font-size:14px;line-height:1.6}
  .hero-slide .hero-cta{max-width:none;flex-direction:row;align-items:center;flex-wrap:wrap}
  .hero-slide .btn,.hero-slide .btn-ghost{width:auto;min-width:0;min-height:46px;padding:0 17px}
  .hero-controls{left:6vw;right:auto;bottom:31px}
  .brand-intro{padding:86px 6vw 70px}
  .brand-intro h2{font-size:41px}
  .brand-values{grid-auto-columns:82vw;padding-bottom:80px}
  .brand-values article,.brand-values article:last-child{min-height:415px}
  .model-preview{padding:82px 6vw}
  .showcase-stage{min-height:690px;border-radius:18px}
  .showcase-slide{grid-template-rows:285px 1fr}
  .showcase-copy{padding:34px 24px 85px}
  .showcase-controls{right:22px}
  .technology-visual{min-height:390px;margin:8px}
  .technology-copy{padding:70px 6vw}
  .brand-journey{padding:82px 6vw}
  .brand-journey .journey-steps{grid-template-columns:1fr}
  .store-callout{padding:8px}
  .store-callout-image{min-height:390px}
  .store-callout-copy{padding:64px 7vw}
  .closing{min-height:760px;padding:0 7vw;align-items:flex-end;padding-bottom:95px}
  .closing-bg{background-position:62% center}
  .closing-bg::after{background:linear-gradient(180deg,rgba(12,16,17,.08),rgba(12,16,17,.25) 40%,rgba(12,16,17,.9) 100%)}
}