:root{
  --bg: #ffffff;
  --panel: rgba(255,255,255,0.78);
  --panel2: rgba(255,255,255,0.92);
  --text: rgba(13,14,18,0.92);
  --muted: rgba(13,14,18,0.72);
  --muted2: rgba(13,14,18,0.56);
  --line: rgba(20,24,40,0.12);
  --accent: #ff6a00;
  --accent2:#2563eb;
  --shadow: 0 18px 45px rgba(18,22,40,0.16);
  --radius: 18px;
  --radius2: 26px;
  --max: 1160px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.45;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width: min(var(--max), calc(100% - 40px)); margin:0 auto}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:16px; top:16px; width:auto; height:auto; background:#fff; color:#000; padding:10px 12px; border-radius:12px; z-index:9999}

/* Header */
.header{
  position: sticky; top:0; z-index:1000;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.88);
  border-bottom:1px solid var(--line);
  box-shadow: 0 10px 24px rgba(18,22,40,0.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 0;
  gap: 14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.logo{
  width: 32px; height:32px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,106,0,0.95), rgba(37,99,235,0.9));
  box-shadow: 0 12px 25px rgba(255,106,0,0.12);
  position:relative; overflow:hidden;
}
.logo::after{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45), transparent 50%);
  transform: rotate(20deg);
}
.brand strong{font-size: 16px; letter-spacing:0.2px}
.brand span{display:block; font-size:12px; color: var(--muted2)}

.navlinks{display:flex; align-items:center; gap: 10px;}
.navlinks a{
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: all .18s ease;
}
.navlinks a:hover{
  border-color: var(--line);
  color: var(--text);
  background: rgba(20,24,40,0.04);
}
.navlinks a.active{
  color: var(--text);
  border-color: rgba(255,106,0,0.35);
  background: linear-gradient(135deg, rgba(255,106,0,0.10), rgba(37,99,235,0.08));
}
.actions{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
  color: var(--text);
  font-weight: 600;
  letter-spacing:0.15px;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(20,24,40,0.04)}
.btn.primary{
  border-color: rgba(255,106,0,0.50);
  background: linear-gradient(135deg, rgba(255,106,0,0.92), rgba(37,99,235,0.70));
  box-shadow: 0 16px 40px rgba(255,106,0,0.12);
}
.btn.primary:hover{background: linear-gradient(135deg, rgba(255,106,0,0.98), rgba(37,99,235,0.78))}
.btn.ghost{background: transparent;}
.btn.outline{background: transparent; border-color: var(--line); color: var(--text)}
.btn.outline:hover{background: rgba(20,24,40,0.04)}
.btn.small{padding: 10px 12px; border-radius: 14px; font-size: 13px}
.icon{width:18px; height:18px; display:inline-block;}
.menuBtn{display:none}


/* Hero backgrounds (optional images with graceful fallback) */
/* Page-specific banner backgrounds removed in v10; using hero-global image instead. */
/* Hero */
.hero{padding: 64px 0 26px; position:relative;}
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: stretch;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight:600;
  font-size: 13px;
}
.dot{
  width:9px; height:9px; border-radius:99px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(255,106,0,0.10);
}
.h1{
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.03;
  letter-spacing:-0.6px;
}
.sub{margin: 0 0 18px; color: var(--muted); font-size: 16px; max-width: 58ch;}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 18px;}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight:600;
  font-size: 12px;
}
.pulse{position:relative;}
.pulse::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:999px;
  border:1px solid rgba(255,106,0,0.35);
  opacity:0.0;
  animation: pulse 2.6s ease infinite;
}
@keyframes pulse{
  0%{transform: scale(0.98); opacity:0.0}
  25%{opacity:0.9}
  100%{transform: scale(1.28); opacity:0.0}
}

/* Hero Card */
.heroCard{
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.heroCard::before{content:"";display:none;}
.heroCard::after{content:"";display:none;}
.heroCardInner{position:relative; z-index:1}
.heroCardTitle{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 12px;}
.heroCardTitle strong{font-size:14px}
.small{font-size:12px; color:var(--muted2)}
.heroStats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 14px 0 12px;
}
.stat{
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  border-radius: 16px;
  padding: 12px;
}
.stat .n{font-size: 22px; font-weight: 800; letter-spacing:-0.4px}
.stat .l{font-size: 12px; color: var(--muted); margin-top:2px}
.cardCta{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;}
.note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(20,24,40,0.18);
  color: var(--muted);
  font-size: 13px;
}

/* Sections */
.section{padding: 54px 0}
.section h2{font-size: 26px; margin: 0 0 10px; letter-spacing: -0.25px;}
.section p.lead{margin:0 0 18px; color: var(--muted); max-width: 70ch;}

.grid3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;}
.card{
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.card:hover{transform: translateY(-2px); background: rgba(255,255,255,0.07); border-color: rgba(255,106,0,0.25)}
.card h3{margin: 0 0 6px; font-size: 15px}
.card p{margin:0; color:var(--muted); font-size: 13px}

.split{display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:stretch;}
.tile{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.tile .inner{padding: 18px;}
.tile h3{margin:0 0 8px; font-size: 18px}
.tile p{margin:0 0 14px; color:var(--muted)}
.tile .art{
  height: 160px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(320px 220px at 30% 30%, rgba(255,106,0,0.12), transparent 70%),
    radial-gradient(320px 220px at 70% 70%, rgba(37,99,235,0.12), transparent 70%),
    rgba(255,255,255,0.96);
}
.tile .art svg{width:100%; height:100%; opacity:0.9}

/* Gallery */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin: 16px 0 18px;}
.pill{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  cursor:pointer;
}
.pill[aria-pressed="true"]{
  color: var(--text);
  border-color: rgba(255,106,0,0.45);
  background: linear-gradient(135deg, rgba(255,106,0,0.12), rgba(37,99,235,0.10));
}
.gallery{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;}
.product{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
  overflow:hidden;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.product:hover{transform: translateY(-2px); background: rgba(255,255,255,0.07); border-color: rgba(37,99,235,0.25)}
.product .img{
  background: rgba(20,24,40,0.04);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 10;
}
.product .img img{width:100%; height:100%; object-fit:cover}
.product .body{padding: 14px 14px 16px}
.row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.model{font-weight: 900; letter-spacing:0.25px}
.meta{color: var(--muted); font-size: 12px; margin-top: 3px}
.tag{
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,24,40,0.14);
  background: rgba(255,255,255,0.92);
  color: var(--text);
  white-space:nowrap;
}
.tag.new{border-color: rgba(34,197,94,0.45)}
.tag.best{border-color: rgba(245,158,11,0.45)}

/* Contact / Footer */
.contact{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.contactGrid{display:grid; grid-template-columns: 1.1fr 0.9fr;}
.contactInfo{padding: 18px}
.kv{display:grid; gap:10px; margin-top:12px}
.kv div{border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgba(255,255,255,0.92)}
.kv .k{font-size: 12px; color: var(--muted)}
.kv .v{font-weight: 800; margin-top: 4px}
.map{min-height: 360px; border-left: 1px solid var(--line);}
.map iframe{width:100%; height:100%; border:0; filter: grayscale(10%) contrast(110%)}

.footer{
  padding: 22px 0 34px;
  color: var(--muted2);
  border-top: 1px solid var(--line);
  margin-top: 46px;
}
.footerGrid{display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; flex-wrap:wrap;}
.footer a{color: var(--muted); text-decoration: underline; text-decoration-color: rgba(20,24,40,0.18)}
.footer a:hover{text-decoration-color: rgba(255,106,0,0.45)}
.fine{font-size:12px; max-width: 78ch}

/* Page header */
.pageHead{padding: 38px 0 10px}
.pageHead h1{margin:0 0 8px; font-size: 34px; letter-spacing:-0.4px}
.pageHead p{margin:0; color: var(--muted); max-width: 74ch}

/* Mobile */
@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .gallery{grid-template-columns: 1fr}
  .contactGrid{grid-template-columns: 1fr}
  .map{min-height: 280px; border-left:0; border-top: 1px solid var(--line)}
  .navlinks{display:none}
  .menuBtn{display:inline-flex}
  .navlinks.mobile{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; left: 0; right: 0; top: 64px;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid var(--line);
    padding: 10px 14px 14px;
    backdrop-filter: blur(14px);
  }
  .navlinks.mobile a{width: 100%}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .pulse::after{animation:none}
  .card:hover,.product:hover,.btn:hover{transform:none}
}


/* Google Translate widget (light, minimal) */
.translate{
  display:flex;
  align-items:center;
  padding-left: 8px;
}
#google_translate_element{
  display:flex;
  align-items:center;
}
.goog-te-gadget{ font-family: inherit !important; color: var(--muted) !important; }
.goog-te-gadget .goog-te-combo{
  border: 1px solid var(--line);
  background: var(--panel2);
  color: rgba(13,14,18,0.86);
  padding: 8px 10px;
  border-radius: 12px;
  outline: none;
}
.goog-logo-link, .goog-te-gadget span{ display:none !important; }
.goog-te-gadget{ font-size:0 !important; }
.goog-te-gadget .goog-te-combo{ font-size: 13px !important; }


/* Google translate banner hide */
.goog-te-banner-frame{display:none !important;}
body{top:0 !important;}

/* World animation card */
.worldCard{
  margin: 0 0 16px;
  padding: 14px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,106,0,0.10), rgba(37,99,235,0.08));
  overflow:hidden;
}
.worldTop{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 8px;}
.worldTop .small{color: var(--muted2);}
.worldSvg{width:100%; height:auto; display:block;}
.worldSvg .route{stroke: rgba(37,99,235,0.32); stroke-width: 2; fill:none; stroke-dasharray: 6 8;}
.worldSvg .route2{stroke: rgba(255,106,0,0.32);}
.worldSvg .land{fill: rgba(13,14,18,0.08);}
.worldSvg .grid{stroke: rgba(13,14,18,0.08); stroke-width:1; fill:none;}
.worldSvg .marker{fill: rgba(255,106,0,0.95);}
.worldSvg .marker2{fill: rgba(37,99,235,0.92);}
.worldSvg .pulse{fill:none; stroke: rgba(255,106,0,0.55); stroke-width:2; opacity:0.6;}
@media (prefers-reduced-motion: reduce){
  .worldCard{display:none;}
}

/* Simple list */
.list{margin: 10px 0 0; padding-left: 18px; color: var(--muted);}
.list li{margin: 6px 0;}

/* Floating quick actions (WhatsApp / Call / Catalog) */
.fabGroup{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1400;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fabGroup::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 28px;
  background: radial-gradient(circle at 70% 25%, rgba(37,99,235,0.14), transparent 60%),
              radial-gradient(circle at 25% 75%, rgba(255,106,0,0.14), transparent 60%);
  filter: blur(14px);
  opacity: 0.0;
  animation: fabGroupGlow 3.2s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes fabGroupGlow{
  0%{opacity: 0.0; transform: scale(0.98)}
  40%{opacity: 0.85}
  100%{opacity: 0.0; transform: scale(1.08)}
}

.fabBtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20,24,40,0.14);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 14px 32px rgba(18,22,40,0.14);
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fabBtn:hover{transform: translateY(-2px); border-color: rgba(255,106,0,0.35)}
.fabBtn .icon{width:18px; height:18px}
.fabWhats{
  border-color: rgba(255,106,0,0.45);
}
.fabGlow{
  position: relative;
}
.fabGlow::after{
  content:"";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,106,0,0.25), transparent 55%);
  filter: blur(10px);
  opacity: 0.0;
  animation: fabGlow 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fabGlow{
  0%{opacity: 0.0; transform: scale(0.98)}
  35%{opacity: 0.85}
  100%{opacity: 0.0; transform: scale(1.18)}
}

/* Reduce floating footprint on mobile */
@media (max-width: 520px){
  .fabBtn span{display:none}
  .fabBtn{padding: 12px; width: 48px; height: 48px; justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  .fabGlow::after{animation:none}
  .fabGroup::before{animation:none}
}
.fabIcon{
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 20px;
}
@media (max-width: 520px){
  .fabIcon{width: 22px; height: 22px;}
}


/* Image-only banners (text baked into the banner image) */
.hero--imageOnly{
  padding: 0;
  min-height: 280px;
  height: clamp(260px, 34vh, 430px);
  display: flex;
  align-items: flex-end;
}
.hero--imageOnly .container{
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.section--intro{padding-top: 26px;}
.section--intro .h1{font-size: clamp(30px, 4vw, 46px); line-height: 1.05;}
/* Screen-reader only */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}



/* Banner (image-only hero) */
.banner{
  margin-top: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  height: clamp(220px, 34vw, 420px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.banner::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 420px at 30% 30%, rgba(255,255,255,0.12), transparent 60%),
              linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  pointer-events:none;
}
.heroContent{padding: 26px 0 18px;}
.h1-sm{font-size: clamp(26px, 3.4vw, 42px); line-height: 1.06;}
.brandSub{display:block; font-size:12px; color: var(--muted); margin-top: 2px;}
.srOnly{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.strip{padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.55);}
.stripInner{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.stripLeft{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pill{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,0.6); font-size:12px; color: var(--muted);}
.stripActions{display:flex; gap:10px; flex-wrap:wrap;}
.coffeeBlock{display:grid; grid-template-columns: 1.25fr 0.75fr; gap:18px; align-items:start;}
.coffeeAside{border:1px solid var(--line); background: rgba(255,255,255,0.7); border-radius: var(--radius); padding: 16px;}
.coffeeBadge{display:inline-flex; padding:6px 10px; border-radius:999px; background: linear-gradient(135deg, rgba(255,106,0,0.18), rgba(75,101,255,0.18)); border:1px solid var(--line); font-weight:700; margin-bottom:10px;}
.coffeeList{display:grid; gap:8px; color: var(--muted); font-size:14px;}
.licenseMeta{display:grid; gap:8px; margin-top:12px; font-size:13px; color: var(--muted);}
.licenseMeta div{display:flex; justify-content:space-between; gap:12px; border-top:1px dashed rgba(0,0,0,0.08); padding-top:8px;}
@media(max-width: 920px){
  .coffeeBlock{grid-template-columns: 1fr;}
  .stripInner{flex-direction:column; align-items:flex-start;}
}


/* v9 additions: clearer brand architecture + contact lines + media areas */
.brandSub{display:block; font-weight:700; letter-spacing:0.2px; margin-top:2px}
.brandTag{display:block; font-size:12px; color:var(--muted2); margin-top:2px}

.contactLines{display:grid; gap:10px; margin-top:14px}
.contactLines .line{display:grid; grid-template-columns: 110px 1fr; gap:12px; align-items:start}
.contactLines .k{font-size:12px; color:var(--muted2); text-transform:uppercase; letter-spacing:.12em}
.contactLines .v{color:var(--text)}
@media (max-width: 640px){
  .contactLines .line{grid-template-columns: 1fr; gap:6px}
}

.coffeeSection .coffeeGrid{display:grid; grid-template-columns: 1.05fr .95fr; gap:20px; align-items:stretch}
.coffeeSection .coffeeHead{display:flex; gap:14px; align-items:flex-start}
.brandLogo{width:72px; height:72px; object-fit:contain; border-radius:16px; border:1px solid var(--line); background:#fff; padding:10px}
.coffeeBanner{width:100%; height:100%; object-fit:cover; border-radius: var(--radius); border:1px solid var(--line); min-height: 320px}
.coffeeMedia{height:100%}
@media (max-width: 900px){
  .coffeeSection .coffeeGrid{grid-template-columns: 1fr}
  .coffeeBanner{min-height:220px}
}

.mediaGrid3{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin-top:14px}
.mediaCard{border:1px solid var(--line); background: rgba(255,255,255,0.7); border-radius: var(--radius); overflow:hidden}
.mediaCard img{width:100%; height:220px; object-fit:cover; display:block}
.mediaCard figcaption{padding:12px 12px 14px}
.mediaCard figcaption strong{display:block; margin:0 0 4px}
.mediaCard figcaption span{display:block; color:var(--muted2); font-size:13px}
@media (max-width: 900px){
  .mediaGrid3{grid-template-columns: 1fr}
  .mediaCard img{height:200px}
}

/* Licenses: reduce visual clutter */
.licenseCard .muted{margin-top:6px}


/* --- v10 layout refinements --- */
.brand{gap:10px}
.brandLogo{height:34px;width:auto;display:block}
.brandName{font-weight:700;font-size:16px;line-height:1}
.brandMark{height:34px;width:34px;border-radius:10px;background:linear-gradient(135deg,#ff7a18,#2b6cb0)}
.header .actions{gap:10px}
.translate{display:none;position:absolute;top:52px;right:16px;z-index:50;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:var(--shadow)}
.langOpen .translate{display:block}
.langBtn{height:38px;width:38px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.85);font-weight:700;cursor:pointer}
.heroBanner{background:var(--bg);padding:10px 0 6px}
.heroBannerMedia{max-width:none;margin:0 auto;padding:0 16px}
.heroBannerImg{width:100%;display:block;border-radius:22px;background:#fff;object-position:center}
/* Avoid desktop cropping: contain on desktop, cover on mobile */
@media (min-width: 980px){
  .heroBannerImg{object-fit:contain;max-height:420px}
}
@media (max-width: 979px){
  .heroBannerImg{object-fit:cover;aspect-ratio: 16/10}
}
.heroMeta{padding:10px 0 0}
.heroMetaInner{display:flex;flex-direction:column;gap:4px}
.heroMetaLine1{font-weight:800;font-size:18px}
.heroMetaLine2{color:var(--muted);font-weight:600}
.heroShowcaseImg{width:100%;height:auto;border-radius:16px;margin:0 0 14px;display:block}
.sectionShowcase .showcaseMedia{max-width:var(--max);margin:0 auto}
.sectionShowcase .showcaseImg{width:100%;height:auto;border-radius:18px;display:block}

.sectionCats .catGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.catCard{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.85);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.catCard img{width:100%;height:170px;object-fit:cover;display:block;background:#f3f4f6}
.catName{padding:12px 12px 14px;font-weight:700}
@media (max-width: 980px){
  .sectionCats .catGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catCard img{height:150px}
}

.contactLines{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.contactLines .label{color:var(--muted);font-weight:600;margin-right:8px}
.footerSocial{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.socialLink{width:38px;height:38px;border-radius:12px;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--fg);background:rgba(255,255,255,.8);text-decoration:none}
.socialLink svg{width:18px;height:18px}
@media (max-width: 720px){
  .footerSocial{justify-content:flex-start;margin-top:8px}
}
/* Make header less congested */
.nav{grid-template-columns:1fr auto}
.nav .navlinks{justify-content:center}


/* --- Opulence tweaks (v12) --- */
.brandStrip{padding:10px 0 0}
.brandStripGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.brandPill{border:1px solid var(--border);background:#fff;border-radius:14px;padding:10px 12px;font-weight:600;text-align:center}
@media (max-width:720px){.brandStripGrid{grid-template-columns:1fr}}

.langBtn{min-width:56px;justify-content:center}
#translateWrap{position:relative}
#translateWrap .goog-te-gadget{font-size:0}
#translateWrap .goog-te-gadget select{font-size:14px}
#translateWrap{display:none}
#translateWrap.isOpen{display:block}
#translateWrap select{width:170px;max-width:60vw}

.pcat{border:1px solid var(--border);border-radius:18px;padding:14px;margin-top:16px;background:rgba(255,255,255,0.92)}
.pcatHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pcatHead h3{margin:0;font-size:18px}
@media (max-width:720px){.pcatHead{flex-direction:column;align-items:flex-start}}

.imgGrid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.imgGrid4 img{width:100%;height:140px;object-fit:cover;border-radius:14px;border:1px solid var(--border);background:#f3f4f6}
@media (max-width:900px){.imgGrid4{grid-template-columns:repeat(2,minmax(0,1fr))}.imgGrid4 img{height:150px}}

.licenseImgGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.licenseImgCard{border:1px solid var(--border);border-radius:18px;background:#fff;padding:10px;margin:0}
.licenseImgCard img{width:100%;height:220px;object-fit:contain;border-radius:14px;background:#f9fafb;border:1px solid var(--border)}
.licenseImgCard figcaption{margin-top:8px;font-weight:600;color:var(--muted);text-align:center}
@media (max-width:900px){.licenseImgGrid{grid-template-columns:1fr}.licenseImgCard img{height:240px}}

.footerConnect{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);text-align:center}
.connectTitle{font-weight:700;margin-bottom:8px}
.socialSmall{display:flex;gap:10px;justify-content:center}
.socialSmall a{width:26px;height:26px;border:1px solid var(--border);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg);text-decoration:none;background:#fff}
.socialSmall svg{width:18px;height:18px}


/* ===== Brand strip (boxed) ===== */
.brandStrip{padding:6px 0 0}
.brandBoxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.brandBox{border:1px solid var(--border);background:#fff;border-radius:16px;padding:12px 14px;display:flex;justify-content:space-between;align-items:baseline}
.brandBoxK{font-weight:700;color:var(--fg)}
.brandBoxV{color:var(--muted);font-weight:600}
@media (max-width: 720px){
  .brandBoxes{grid-template-columns:1fr}
  .brandBox{align-items:flex-start;gap:6px;flex-direction:column}
}

/* ===== Header logo ===== */
.brandLogo{width:34px;height:34px;display:block;object-fit:contain}
.logoFallback{display:none;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#fb923c,#4f46e5)}



/* Premium ticker (replaces <marquee>) */
.marqueeWrap{padding:10px 0 0}
.ticker{
  position:relative;
  overflow:hidden;
  border-radius:999px;
  background:rgba(17,24,39,.04);
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 10px 30px rgba(17,24,39,.06);
}
.ticker::before,.ticker::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:48px;
  z-index:2;
  pointer-events:none;
}
.ticker::before{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.ticker::after{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:oxTicker 22s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex; align-items:center}
.ticker__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  padding:10px 18px;
  font-weight:650;
  font-size:13px;
  letter-spacing:.2px;
  color:var(--fg);
  opacity:.92;
}
.ticker__dot{
  width:6px;height:6px;border-radius:999px;
  background:linear-gradient(135deg, #f97316, #60a5fa);
  box-shadow:0 0 0 4px rgba(249,115,22,.12);
}
@keyframes oxTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
  .ticker::before,.ticker::after{display:none}
}