/* Video treatment scoped to the existing homepage controls. */
html, body { max-width: 100vw; overflow-x: hidden; }
.home-nav, .home-hero { font-family: 'Archivo', 'Public Sans', system-ui, sans-serif; }
.home-nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  color: #fff;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-nav .topbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: 88px;
  margin: 0;
  padding: 20px 32px;
}
.home-nav .logo {
  position: static;
  flex: 0 0 auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,255,.96);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.home-nav .logo svg { width: 225px; height: auto; max-width: 100%; }
.home-nav .main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0 0 0 auto;
}
.home-nav .main-nav a {
  padding: 8px 7px;
  color: rgba(255,255,255,.88);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.home-nav .main-nav a:hover,
.home-nav .main-nav a.active { color: #fff; background: rgba(0,0,0,.28); }
.home-nav .main-nav a.active::after { background: #fff; left: 7px; right: 7px; bottom: 2px; }
.home-nav .top-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.home-nav .top-actions .btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 13px;
  white-space: nowrap;
}
.home-nav .top-actions .btn-ghost,
.home-nav .top-actions .btn-outline {
  color: #fff;
  background: rgba(8,10,14,.48);
  border-color: rgba(255,255,255,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-nav .top-actions .btn-ghost:hover,
.home-nav .top-actions .btn-outline:hover { color: #101316; background: #fff; border-color: #fff; }
.home-nav .top-actions .btn-primary {
  color: #101316;
  background: #f5f1e9;
  border-color: #f5f1e9;
}
.home-nav .top-actions .btn-primary:hover { background: #fff; border-color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.home-nav #amSearch, .home-nav #amLang {
  min-width: 44px;
  min-height: 44px;
  color: #fff;
  background: rgba(8,10,14,.48);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 11px;
}
.home-nav #amSearch:hover, .home-nav #amLang:hover { background: rgba(255,255,255,.2); }
.home-nav .burger { display: none; flex: 0 0 44px; width: 44px; height: 44px; }
.home-nav .burger span,
.home-nav .burger span::before,
.home-nav .burger span::after { background: #fff; }
.home-nav .burger.is-open span { background: transparent; }
.home-nav .burger:hover { background: rgba(255,255,255,.18); }
.home-cinema .mobile-drawer { top: 88px; }
.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 740px;
  overflow: hidden;
  color: #fff;
  background: #0a0a0b;
}
.home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  pointer-events: none;
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(7,10,18,.3),transparent 72%),linear-gradient(180deg,rgba(7,10,18,.66) 0%,rgba(7,10,18,.25) 32%,rgba(7,10,18,.18) 55%,rgba(7,10,18,.94) 100%);
}
.home-hero-display {
  position: absolute;
  z-index: 2;
  top: 104px;
  left: 0;
  width: 100%;
  overflow: hidden;
  text-align: center;
  font-size: 13.3vw;
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg,#fff 55%,#b8b8bd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
.home-hero-copy {
  position: absolute;
  z-index: 3;
  left: 56px;
  bottom: 52px;
  max-width: 780px;
}
.home-hero-copy .kicker { color: #f5f1e9; margin-bottom: 18px; }
.home-hero-copy .kicker::before { background: #f5f1e9; }
.home-hero-copy h1 {
  margin: 0;
  max-width: 760px;
  color: #fff;
  font-family: inherit;
  font-size: clamp(38px,4.8vw,64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}
.home-hero-copy h1 .accent { color: #f5f1e9; font-style: normal; font-weight: inherit; }
.home-hero-copy .lead {
  max-width: 620px;
  margin: 17px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 16px;
  line-height: 1.5;
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}
.home-hero-actions .btn {
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 14px;
  white-space: normal;
}
.home-hero-actions .btn-primary,
.home-hero-actions .btn-light {
  color: #101316;
  background: #f5f1e9;
  border-color: #f5f1e9;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.home-hero-actions .btn-primary:hover,
.home-hero-actions .btn-light:hover { color: #101316; background: #fff; border-color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.home-hero-actions .btn-outline {
  color: #fff;
  background: rgba(8,10,14,.38);
  border-color: rgba(255,255,255,.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-hero-actions .btn-outline:hover { color: #101316; background: #fff; border-color: #fff; }
.home-hero-copy .hero-meta {
  max-width: 700px;
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.78);
  gap: 8px 22px;
  font-size: 12px;
}
.home-nav a:focus-visible,
.home-nav button:focus-visible,
.home-hero .btn:focus-visible,
.home-cinema .quick-tools .tool-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.home-cinema .quick-tools .tool-card {
  min-height: 160px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  transition: background .2s ease,border-color .2s ease,transform .2s ease;
}
.home-cinema .quick-tools .tool-card:hover,
.home-cinema .quick-tools .tool-card:focus-visible { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.48); transform: translateY(-2px); }
@media (max-width: 1800px) {
  .home-nav .main-nav { display: none; }
  .home-nav .burger { display: flex; }
}
@media (max-width: 900px) {
  .home-nav .topbar-inner { padding: 16px 24px; min-height: 80px; }
  .home-nav .logo svg { width: 200px; }
  .home-cinema .mobile-drawer { top: 80px; }
  .home-hero { min-height: 800px; }
  .home-hero-copy { left: 32px; right: 32px; bottom: 44px; }
  .home-hero-copy h1 { font-size: clamp(38px,5.8vw,58px); }
}
@media (max-width: 760px) {
  .home-nav .topbar-inner { min-height: 72px; padding: 12px 20px; gap: 6px; }
  .home-nav .logo { padding: 5px 7px; margin-right: auto; }
  .home-nav .logo svg { width: 170px; }
  .home-nav .top-actions { display: flex; margin-left: 0; }
  .home-nav .top-actions > .btn { display: none; }
  .home-nav #amSearch kbd { display: none; }
  .home-nav .topbar-inner > div:has(> #amSearch),
  .home-nav .topbar-inner > div:has(> #amLang) { margin-right: 0 !important; }
  .home-cinema .mobile-drawer { top: 72px; }
  .home-hero { height: auto; min-height: 100svh; }
  .home-hero-display { top: 105px; }
  .home-hero-video { object-position: 58% center; }
  .home-hero-copy {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    padding: clamp(270px,38svh,330px) 20px 86px;
  }
  .home-hero-copy h1 { font-size: clamp(36px,9.2vw,48px); }
  .home-hero-copy .lead { font-size: 15px; }
  .home-hero-actions { flex-direction: column; margin-top: 24px; }
  .home-hero-actions .btn { width: 100%; min-height: 52px; justify-content: center; }
  .home-hero-copy .hero-meta { margin-top: 18px; padding-right: 60px; }
  .home-cinema .quick-tools .tool-card { min-height: 0; }
  .home-cinema [data-whatsapp-floating="true"] { width: 48px !important; height: 48px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 380px) {
  .home-nav .logo svg { width: 150px; }
  .home-hero-copy { padding-top: 160px; }
  .home-hero-actions { padding-right: 60px; }
  .home-nav .topbar-inner > div:has(> #amLang) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-nav .btn,.home-hero-actions .btn,.home-cinema .quick-tools .tool-card { transition: none; }
}

/* Homepage image-led category cards and balanced mobile layouts. */
#catStrip{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.category-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;color:#13171b;background:#fff;border:1px solid #e4e5e7;border-radius:16px;box-shadow:0 2px 12px rgba(8,12,18,.04);transition:transform .22s ease,box-shadow .22s ease}
.category-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,12,18,.1)}
.category-photo{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#ecebe8}
.category-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.category-copy{display:flex;flex-direction:column;gap:4px;padding:14px 16px 17px;flex:1}
.category-copy strong{font-size:16px;line-height:1.2}
.category-desc{color:#666b73;font-size:12px;line-height:1.4}
.category-count{color:#8b9097;font-size:11px;font-weight:700;margin-top:auto}
.category-arrow{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#111;background:rgba(255,255,255,.9);font-size:16px}
#modelGrid .model>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#eeece8}
@media(max-width:900px){#catStrip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
.home-nav .topbar-inner{min-height:66px;padding:9px 16px;gap:7px}
.home-nav .logo{padding:4px 6px}
.home-nav .logo svg{width:clamp(132px,37vw,158px)}
.home-nav #amSearch,.home-nav #amLang,.home-nav .burger{min-width:40px;min-height:40px;width:40px;height:40px}
.home-cinema .mobile-drawer{top:66px}
.home-hero-video{object-position:68% center}
.home-hero-overlay{background:linear-gradient(180deg,rgba(6,8,12,.65) 0%,rgba(6,8,12,.08) 25%,rgba(6,8,12,.42) 52%,rgba(6,8,12,.96) 100%)}
.home-hero-display{top:108px;font-size:11.2vw;letter-spacing:-.025em}
.home-hero-copy{padding:clamp(245px,35svh,305px) 18px 70px}
.home-hero-copy h1{font-size:clamp(32px,8.8vw,43px);line-height:1.03}
.home-hero-copy .lead{max-width:38ch;font-size:14.5px;line-height:1.5}
.home-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:20px}
.home-hero-actions .btn{width:100%;min-width:0;min-height:53px;padding:10px 8px;font-size:12px;line-height:1.2;white-space:normal}
.home-hero-actions .btn:first-child{grid-column:1/-1;font-size:13.5px}
.home-hero-copy .hero-meta{margin-top:17px;padding-top:12px;padding-right:45px;gap:5px 12px;font-size:10.5px}
.home-cinema .section{padding:42px 0}
.home-cinema .section-head{margin-bottom:22px;gap:10px}
.home-cinema .section-head h2{font-size:clamp(27px,7.4vw,34px);line-height:1.08}
.home-cinema .section-head .see-all{padding:3px 0;border:0;border-radius:0;text-decoration:underline;text-underline-offset:4px}
}
@media(max-width:600px){
#catStrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.category-card{border-radius:12px}
.category-copy{padding:10px 11px 12px;min-height:68px;gap:5px}
.category-copy strong{font-size:14px}
.category-desc{display:none}
.category-count{font-size:10.5px}
.category-arrow{width:25px;height:25px;top:6px;right:6px;font-size:13px}
#cardsGrid{display:flex;flex-direction:column;gap:0}
#cardsGrid .card-feature{margin-bottom:21px}
#cardsGrid .card-feature .card-body{padding-top:12px}
#cardsGrid .card-feature .card-meta{margin-top:0}
#cardsGrid .card:not(.card-feature){display:grid;grid-template-columns:minmax(105px,37%) minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid #e4e4e7}
#cardsGrid .card:not(.card-feature)>a:first-child{align-self:start}
#cardsGrid .card:not(.card-feature) img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
#cardsGrid .card:not(.card-feature) .card-body{min-width:0;padding:0}
#cardsGrid .card:not(.card-feature) .card-meta{margin:0;gap:5px;font-size:10px;flex-wrap:wrap}
#cardsGrid .card:not(.card-feature) .tag{padding:2px 6px;font-size:10px}
#cardsGrid .card:not(.card-feature) h3{margin:5px 0;font-size:15px;line-height:1.24}
#cardsGrid .card:not(.card-feature) p{font-size:11px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#modelGrid{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,310px);grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 16px 12px 0;margin-right:-16px;scrollbar-width:thin}
#modelGrid .model{scroll-snap-align:start}
#modelGrid .model-body{padding:14px}
#modelGrid .model-name{font-size:15px}
#modelGrid .model-price{font-size:14px}
#modelGrid .model-actions{gap:7px}
#modelGrid .model-actions .btn{flex:1;justify-content:center;padding:9px 7px;font-size:11px}
.home-cinema [data-seo="cocon-2026"] .tool-card{padding:16px;min-height:0}
.home-cinema [data-seo="cocon-2026"] .tool-card h3{font-size:14px}
.home-cinema [data-seo="cocon-2026"] .tool-card p{font-size:12px}
}
@media(max-width:380px){
.home-hero-copy{padding-top:220px}
.home-hero-actions{padding-right:0}
#cardsGrid .card:not(.card-feature){grid-template-columns:104px minmax(0,1fr);gap:10px}
#cardsGrid .card:not(.card-feature) h3{font-size:14px}
}


/* Mobile video composition keeps the complete car visible. */
@media(max-width:760px){
  .home-hero{min-height:0;background:#090b0e}
  .home-hero-video{top:66px;bottom:auto;height:min(62vw,245px);object-fit:contain;object-position:center;background:#090b0e}
  .home-hero-overlay{top:66px;bottom:auto;height:min(62vw,245px);background:linear-gradient(180deg,rgba(6,8,12,.45),transparent 45%,#090b0e 100%)}
  .home-hero-display{top:91px;font-size:10.5vw}
  .home-hero-copy{padding:calc(66px + min(62vw,245px)) 18px 54px}
  .home-cinema [data-stagger].is-visible>*,
  .home-cinema [data-reveal].is-visible{animation:none!important;opacity:1!important;transform:none!important}
}
@media(max-width:380px){.home-hero-copy{padding-top:calc(66px + min(62vw,245px))}}