:root{
  --bg0:#f6f8fc;
  --bg1:#ffffff;
  --panel:rgba(255,255,255,.92);
  --panel2:rgba(255,255,255,.82);
  --border:rgba(15,25,45,.12);
  --text:rgba(235,245,255,.92);
  --ink:#0b1224;
  --muted:rgba(190,205,225,.86);
  --silver:rgba(160,178,205,.78);
  --accent: #3fa9ef;
  --accent2:#8fd3ff;
  --shadow:0 14px 34px rgba(6,12,24,.16);
  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-strong:rgba(255,255,255,.74);
  --glass-border:rgba(15,25,45,.14);
  --glass-shadow:0 14px 34px rgba(6,12,24,.12);
  --glass-blur:10px;
  --radius:18px;
  --radius2:26px;
  --max:1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
/* Base background: keep transparent so the global (site-wide) background can show through */
html,body{height:100%;background:transparent}

/* V127 FORCE TRANSPARENT WRAPPERS */
main, .page, .layout, .app, .wrapper, .section, section, footer {
  background: transparent !important;
}
body{
  margin:0;
  padding-bottom:120px;
  font-family:var(--font);
  color:var(--ink);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}



/* --------------------------------------------------------------------------
   SITE-WIDE BACKGROUND (Tier-1 clean)
   - No pseudo-element stacking / negative z-index issues
   - No repeating line overlays (prevents banding/"strokes")
   - Uses high-res sources by default to avoid blur
---------------------------------------------------------------------------- */

html{
  /* Fallback color; the real site-wide background is rendered by #site-bg */
  background-color:#070b12;
  background-image:none;
}

/*
  Site-wide background layer (top -> footer)
  - Fixed behind all content (no scroll-attachment rendering bugs)
  - Single source of truth for the premium background
*/
#site-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:image-set(
    url("assets/hero/bg-hero-1920-v128.webp") 1x,
    url("assets/hero/bg-hero-2560-v128.webp") 2x,
    url("assets/hero/bg-hero-5120-v128.webp") 3x
  );
  background-size:cover;
  background-position:center 14%;
  background-repeat:no-repeat;
  transform:translateZ(0);
}
#site-bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* Translucent readability overlay (NOT opaque; keeps background visible) */
  background:
    radial-gradient(1200px 700px at 50% 10%, rgba(7,11,18,.28), rgba(7,11,18,.64)),
    linear-gradient(180deg, rgba(7,11,18,.38) 0%, rgba(7,11,18,.18) 35%, rgba(7,11,18,.58) 100%);
}





a{color:inherit; text-decoration:none}
a:visited{color:inherit}
a:hover{text-decoration:none}
.muted{color:var(--muted)}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:60px 0}
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,16,24,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.14);
}

/* v121: HARD anti-click-block fix
   If the sticky header box ever extends beyond its visible area, it must not block clicks
   on the hero CTAs. We make the header background click-through, but keep interactive
   elements inside the header clickable. */
header{pointer-events:none;}
header .topbar-inner, header a, header button, header .btn, header nav{pointer-events:auto;}


/* v120: ensure sticky header never creates an invisible overlay that blocks hero clicks */
header{height:auto;}
.topbar-inner{flex-wrap:wrap;}
.topbar-inner .nav{flex-wrap:wrap; gap:14px;}
.topbar-inner .lang-toggle{flex-wrap:wrap;}


.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  /* Allow the header to grow if language chips wrap; prevents invisible overlay over hero */
  min-height:74px;
  height:auto;
  padding:10px 0;
  gap:18px;
}
.container.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  /* Allow the header to grow if language chips wrap; prevents invisible overlay over hero */
  min-height:74px;
  height:auto;
  padding:10px 0;
  gap:18px;
}

/* Header: cool glass + readable links (all states) */
header a{color:var(--text)}
header a:visited{color:var(--text)}
header a:hover{color:rgba(235,245,255,.98)}
header .brand-tag{color:rgba(190,205,225,.78)}
header .brand-sub{color:rgba(190,205,225,.86)}
header nav a{
  font-weight:700;
  font-size:14px;
  padding:10px 12px;
  border-radius:12px;
  color: var(--text);
}
header nav a:hover{background:rgba(255,255,255,.08)}
header nav a.btn{
  background:rgba(255,255,255,.10); border:0; color: var(--text); text-decoration:none}
/* Do not force button text to white globally (breaks light panels). */
button.btn{font:inherit;}
/* Header quote button keeps readable text on dark glass */
header nav a.btn:hover, header nav a.btn:focus, header nav a.btn:active, header nav a.btn:visited{color: var(--text);}

.btn-primary{background:linear-gradient(135deg, rgba(120,255,220,.92), rgba(120,200,255,.92)); border-color: rgba(255,255,255,.25); color:#0b1220}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary:visited{color:#0b1220}

header nav a.btn:hover{background:rgba(255,255,255,.14)}
.brand{display:flex; align-items:center; gap:12px; min-width:220px}
.brand-mark{width:40px; height:40px; object-fit:contain}
.brand-name{font-weight:800; letter-spacing:.4px}
.brand-tag{font-size:12px; color:#475569; margin-top:2px}
.brand-text{display:flex; flex-direction:column; line-height:1.05}

nav{display:flex; align-items:center; gap:18px}
.nav-link{
  color:#0f172a;
  font-weight:600;
  font-size:14px;
  padding:10px 10px;
  border-radius:12px;
}
.nav-link:hover{background:rgba(15,23,42,.06)}
.header-actions{display:flex; align-items:center; gap:10px}
.lang-toggle{
  display:flex; gap:6px; align-items:center;
  border:0;
background:rgba(255,255,255,.05);
  border-radius:999px;
  padding:6px;
  flex-wrap:wrap;
  gap:10px;
}
.lang-toggle button{
  border:0; background:transparent; color:#0f172a;
  font-weight:800; font-size:12px;
  padding:7px 10px; border-radius:999px; cursor:pointer;
}
.lang-toggle button.active{
  background:linear-gradient(135deg, rgba(35,211,255,.25), rgba(53,255,182,.18));
  color:var(--ink);
}


/* Header contrast lock (v130): keep nav + language buttons readable on dark glass */
header .brand-tag{color:rgba(210,225,245,.72)!important}
header .nav-link{color:var(--text)!important}
header .nav-link:hover{background:rgba(255,255,255,.08)!important}
header .lang-toggle button{color:rgba(244,248,255,.92)!important}
header .lang-toggle button.active{color:var(--text)!important}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:0;
  background:rgba(255,255,255,.05);
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.08)}

/* Tier-1 consistency: legacy markup uses <a class="btn small">...
   Mirror .btn-small so View / Quote buttons look identical everywhere. */
.btn.small{
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1;
}
.btn-primary{
  border-color:rgba(35,211,255,.35);
  background:linear-gradient(135deg, rgba(35,211,255,.20), rgba(53,255,182,.10));
  box-shadow:0 12px 30px rgba(35,211,255,.14);
}
.btn-primary:hover{box-shadow:0 16px 40px rgba(35,211,255,.18)}
.btn-ghost{border:0}
.btn-small{padding:10px 12px; border-radius:12px; font-size:13px}

.hero{
  padding:60px 0 24px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:26px;
  align-items:stretch;
}
.hero-card{
  color:#0b1220;
  border-radius:var(--radius2);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:var(--glass-shadow);
  overflow:hidden;
  position:relative;
}

/* v120: lock hero text for readability on light glass */
.hero-card, .hero-card *{ color: var(--ink); }
.hero-card .btn.primary{ color:#0b1220; }
.hero-card .btn{ color:#0b1220; }

.hero-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 320px at 18% 10%, rgba(35,211,255,.20), transparent 55%),
    radial-gradient(700px 320px at 78% 20%, rgba(53,255,182,.12), transparent 55%);
  pointer-events:none;
}
.hero-left{padding:34px 32px; position:relative}
.hero-left h1{
  margin:0 0 12px;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-.6px;
  color:#0b1220;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.hero-left p{margin:0; max-width:62ch; color:#0f172a; font-size:16px; line-height:1.6}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.hero-right{padding:26px; position:relative}
.hero-visual{display:flex; flex-direction:column; gap:14px}
.hero-logo{width:100%; max-width:360px; height:auto; object-fit:contain; filter:none}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.80);
  color:#0b1220;
  font-weight:800;
  font-size:12px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.badge:hover{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.14);
}
.hero-mini{margin:0; font-size:13px}

.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:18px;
}
.stat{
  border-radius:16px;
  border:0;
  background:rgba(0,0,0,.16);
  padding:14px 14px;
}
.stat .big{font-weight:900; font-size:20px}
.stat .small{font-size:12px; color:#475569; margin-top:4px}

.section-title{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.section-title h2{margin:0; font-size:28px; letter-spacing:-.2px}
.section-title p{margin:0; color:#475569; max-width:65ch}

.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:12px;
}
.pill{
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  color:#0b1220;
  padding:10px 12px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pill:hover{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.14);
}
.pill.active{
  border-color:rgba(35,211,255,.35);
  background:linear-gradient(135deg, rgba(35,211,255,.18), rgba(53,255,182,.08));
  color:var(--ink);
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:18px;
}
.product{
  border-radius:var(--radius2);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  overflow:hidden;
  box-shadow:0 14px 38px rgba(10,20,40,.16);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product:hover{
  transform: translateY(-2px);
  border-color:rgba(35,211,255,.28);
  box-shadow:0 18px 38px rgba(0,0,0,.45);
}
.product .thumb{
  height:170px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  overflow:hidden;
  padding:10px;
}
.product .thumb img{width:100%; height:100%; object-fit:contain}
.product .body{padding:14px}
.product h3{margin:0 0 6px; font-size:17px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px}
.product p{margin:0; color:#475569; line-height:1.45; font-size:13px}
.product .meta{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.chip{
  font-size:12px;
  color:#0b1220;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.80);
  border-radius:999px;
  padding:8px 10px;
  font-weight:800;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.14);
}
.product .actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}

.panel{
  border-radius:var(--radius2);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  padding:22px;
  box-shadow:var(--glass-shadow);
}

/* v154: About image — full-width, no crop, no grey side-bands (single layer) */
#about .panel img{
  width:100%;
  height:auto !important;
  max-width:none;
  display:block;
  object-fit:contain;
  aspect-ratio: 16 / 9;
  transform:none !important;
}

/* Light-glass surfaces keep dark ink for legibility */
.panel, .hero-card, .contact-card, .quote-card, .modal, .footer-card, .glass{
  color: var(--ink);
}
.panel a, .hero-card a, .cap-card a, .contact-card a, .quote-card a, .modal a{color:var(--ink)}
.panel a:visited, .hero-card a:visited, .cap-card a:visited, .contact-card a:visited, .quote-card a:visited, .modal a:visited{color:var(--ink)}

.trust-block{
  border-radius:var(--radius2);
  border:1px solid rgba(0,0,0,.06);
  background:var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  padding:18px 20px;
  box-shadow:var(--glass-shadow);
 color:#0b1220; }

.trust-block h3{margin:0 0 8px 0; font-size:18px}
.trust-block .list{margin:10px 0 0 18px}

/* About / value proposition banner (between hero and catalog) */
.info-banner{
  margin-top: 18px;
  background: var(--glass-bg-strong);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px);
}
.info-banner h2{margin:0 0 8px 0; font-size:20px; letter-spacing:-0.2px}
.info-banner .muted{color: rgba(0,0,0,0.70)}
.info-banner .small{font-size:13px; line-height:1.35}
.info-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.info-card{
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 18px;
  padding: 12px 12px 10px;
  backdrop-filter: blur(12px);
}
.info-card strong{display:block; margin-bottom:6px}
.info-card ul{margin: 0 0 0 18px; padding:0}
.info-banner .row{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(245,250,255,0.70);
  font-weight: 600;
  font-size: 13px;
}

@media (max-width: 900px){
  .info-grid{grid-template-columns: 1fr}
}

.workflow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px;
}
.step{
  border-radius:18px;
  border:0;
  background:rgba(0,0,0,.16);
  padding:16px;
}
.step .kicker{font-size:12px; color:#475569; font-weight:900; letter-spacing:.6px; text-transform:uppercase}
.step .title{margin-top:8px; font-weight:900; font-size:16px}
.step .desc{margin-top:6px; color:#475569; font-size:13px; line-height:1.5}

.legal-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.legal-card{border-radius:18px; border:0; background:rgba(0,0,0,.16); padding:16px}
.legal-card h3{margin:0 0 6px; font-size:16px}
.legal-card p{margin:0; color:#475569; font-size:13px; line-height:1.5}

.quote-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:18px}
input, textarea, select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(15,25,45,.14);
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  color:var(--ink);
  padding:12px 12px;
  font-family:var(--font);
  font-size:14px;
  outline:none;
}
input:focus, textarea:focus{border-color:rgba(35,211,255,.45)}
label{display:block; font-weight:900; margin-bottom:8px; color:#0f172a; font-size:13px}
.form-row{display:flex; flex-direction:column; gap:8px}
.form-actions{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
.check-inline{display:flex; gap:10px; align-items:flex-start; flex:1; min-width:260px}
.check-inline input{margin-top:3px}
.quote-disclaimer-details{margin-top:12px; border-radius:18px; border:1px solid rgba(15,25,45,.10); background:rgba(255,255,255,.52); backdrop-filter: blur(14px); padding:12px 14px}
.quote-disclaimer-details summary{cursor:pointer; font-weight:900; color:#0f172a; list-style:none}
.quote-disclaimer-details summary::-webkit-details-marker{display:none}
.quote-disclaimer-details ul{margin:10px 0 0 18px}
@media (max-width: 640px){.form-actions{flex-direction:column; align-items:stretch}.form-actions .btn{width:100%}}
textarea{min-height:120px; resize:vertical}

.section-contact .contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.contact-card{
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.68);
  backdrop-filter: blur(14px);
  padding:18px;
  transition: transform .18s ease, border-color .18s ease;
  box-shadow: 0 14px 36px rgba(10,20,40,.10);
}
.contact-card:hover{transform: translateY(-2px); border-color:rgba(35,211,255,.28)}
.contact-kicker{font-size:12px; color:#475569; font-weight:900; letter-spacing:.6px; text-transform:uppercase}
.contact-value{margin-top:8px; font-weight:900; font-size:18px}
.contact-meta{margin-top:6px; color:#475569; font-size:13px}

footer{
  border-top:1px solid rgba(255,255,255,.14);
  background:rgba(10,16,24,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding:26px 0;
}

.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-links{display:flex; gap:12px; flex-wrap:wrap}
.footer-links a{color:#475569; font-weight:800; font-size:13px}
.footer-links a:hover{color:var(--silver)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-left h1{font-size:40px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .catalog-grid{grid-template-columns:repeat(2,1fr)}
  .workflow{grid-template-columns:repeat(2,1fr)}
  .legal-cards{grid-template-columns:1fr}
  .quote-grid{grid-template-columns:1fr}
  .section-contact .contact-cards{grid-template-columns:1fr}
  nav{display:none}
}
@media (max-width: 520px){
  .hero-left{padding:26px 20px}
  .hero-right{padding:20px}
  .hero-left h1{font-size:34px}
  .catalog-grid{grid-template-columns:1fr}
}



/* How it works media (v132 extension) */
.how-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:26px;
  align-items:stretch;
}
.how-media{display:flex}
.how-img{
  width:100%;
  height:100%;
  border-radius: var(--radius2);
  /* Remove the last visible white rim on this media image */
  border:0;
  object-fit: cover;
  object-position: 75% 50%;
  box-shadow: var(--glass-shadow);
}

/* About section: keep the CTA readable on busy background imagery */
#about .btn{
  color:rgba(15,23,42,.92);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.18);
  backdrop-filter: blur(8px);
}
#about .btn:hover{background:rgba(255,255,255,.9); border-color:rgba(15,23,42,.24)}

@media (max-width: 640px){
}
@media (max-width: 980px){
  .how-grid{grid-template-columns:1fr}
  .how-img{height:260px}
}
/* Gallery / Lightbox */
.thumbbtn{border:0;padding:0;background:transparent;cursor:pointer;width:100%;display:block;}
.thumbbtn:focus{outline:2px solid rgba(0,212,255,.7);outline-offset:3px;border-radius:14px;}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;}
.lightbox.open{display:flex;}
.lightbox .panel{
  border-radius:var(--radius2);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  padding:22px;
  box-shadow:var(--glass-shadow);
}
.lightbox .hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);gap:12px;}
.lightbox .hdr .title{font-weight:700;letter-spacing:.2px;}
.lightbox .close{background:rgba(15,23,42,.06);border:0;color:#fff;border-radius:12px;padding:8px 12px;cursor:pointer;}
.lightbox .body{padding:18px;display:grid;gap:14px;}
.lightbox .mainimg{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;overflow:hidden;padding:12px;}
.lightbox .mainimg img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.lightbox .thumbs{display:flex;gap:10px;overflow:auto;padding-bottom:4px;}
.lightbox .thumbs img{width:110px;height:74px;object-fit:cover;border-radius:12px;border:0;cursor:pointer;opacity:.75;transition:opacity .2s, transform .2s;}
.lightbox .thumbs img.active{opacity:1;transform:scale(1.02);}
.lightbox .ftr{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid rgba(255,255,255,.06);gap:10px;}
.lightbox .navbtn{background:rgba(15,23,42,.06);border:0;color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;}

/* CNC model pages */
.page-hero{padding:28px 0 10px}
.page-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.model-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px;margin:18px 0 28px}
.model-card{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:stretch;border:0;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.18)}
.model-thumb{background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.model-thumb img{width:100%;height:100%;object-fit:cover}
.model-body{padding:14px}
.model-body h2{margin:0 0 6px;font-size:18px}
.bullets{margin:10px 0 0 18px}
.specs-block{padding:14px 0 30px}
.specs-table{display:grid;grid-template-columns:1fr;gap:10px;border:0;border-radius:14px;padding:14px;background:rgba(0,0,0,.18)}
.specs-table>div{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.small{font-size:13px}
@media (min-width: 860px){
  .model-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .specs-table{grid-template-columns:1fr}
}

/* Models modal (variants) */
.modal.hidden{display:none;}
.modal{position:fixed;inset:0;z-index:9999;}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);}
.modal__panel{position:relative;max-width:980px;width:calc(100% - 32px);max-height:calc(100% - 32px);margin:16px auto;background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.12);border-radius:24px;box-shadow:0 20px 60px rgba(2,6,23,.25);overflow:hidden;}
.modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(15,23,42,.08);}
.modal__title{font-weight:800;font-size:18px;letter-spacing:-.02em;color:#0b1220;}
.modal__close{width:38px;height:38px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.7);cursor:pointer;font-size:20px;line-height:1;color:#0b1220;}
.modal__close:hover{background:rgba(15,23,42,.06);}
.modal__body{padding:16px 18px;overflow:auto;max-height:calc(100vh - 120px);}

.modal__intro{display:grid;gap:8px;margin-bottom:14px;}
.modal__hint{font-weight:700;color:rgba(11,18,32,.92);}
.modal__disclaimer{font-size:13px;line-height:1.45;color:rgba(11,18,32,.72);}
.modal__footer{
  border-top:1px solid rgba(15,25,45,.10);
  background:rgba(255,255,255,.40);
  backdrop-filter: blur(14px);
  padding:26px 0;
}

.models-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px;}
@media (max-width: 980px){.models-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width: 640px){.models-grid{grid-template-columns:1fr;}}

.modelpick-card{border-radius:18px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.75);box-shadow:0 10px 30px rgba(2,6,23,.10);overflow:hidden;display:flex;flex-direction:column;}
.modelpick-card__img{background:rgba(255,255,255,.9);}
.modelpick-card__img img{width:100%;height:200px;object-fit:cover;object-position:center 55%;display:block;}
.modelpick-card__img{background:rgba(8,18,32,.10);}
.modelpick-card__content{padding:12px 12px 14px;display:flex;flex-direction:column;gap:10px;}
.modelpick-card__title{font-weight:900;color:#0b1220;letter-spacing:-.02em;}
.modelpick-card__bullets{margin:0;padding-left:18px;color:rgba(15,23,42,.82);font-size:14px;line-height:1.45;}
.modelpick-card__actions{margin-top:auto;display:flex;justify-content:flex-end;}

/* BESS thumb alignment */
/* BESS hero image: keep photoreal container fully visible and centered like DC cards */
.product[data-product-id^="bess-"] .thumb{
  background: rgba(255,255,255,.92);
  /* slightly tighter padding so the container can appear larger */
  padding: 8px;
}
.product[data-product-id^="bess-"] .thumb img{
  object-fit: contain;
  object-position: center center;
  /* slight downward nudge so the container sits visually centered */
  /* scale up a bit so it visually matches the DC charger card */
  transform: translateY(8px) scale(1.20);
}


.disclaimer{font-size:12px;color:rgba(230,240,255,.75);line-height:1.35;max-width:100%;}


.lang-toggle{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lang-pill{display:flex;gap:4px;align-items:center;padding:6px 8px;border:0;border-radius:999px;font-size:12px;color:#fff;text-decoration:none;opacity:.9}
.lang-pill img{width:18px;height:12px;border-radius:2px}
body.rtl{direction:rtl;text-align:right}


/* Language switcher */
.lang-toggle{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
.lang-btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  min-height:40px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  border:0;
  background:rgba(255,255,255,0.10);
  color:inherit;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.2px;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.lang-btn[aria-current="page"]{
  background:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.35);
}
.lang-btn .flag{
  width:18px;
  height:12px;
  border-radius:2px;
  display:block;
}
body.rtl .lang-toggle{justify-content:flex-start;}

/* --- Trust + conversion UI pack (v52) --- */
.section-proof{padding:18px 0 0;}
.proof-strip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:10px 12px;border:0;border-radius:16px;background:rgba(255,255,255,0.06);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.proof{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.10);}
.proof-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.20);opacity:.95;}

.sticky-quote{position:fixed;left:0;right:0;bottom:14px;z-index:60;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .18s ease, transform .18s ease;}
.sticky-quote.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.sticky-inner{width:min(980px, calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:18px;border:1px solid rgba(15,23,42,0.12);background:rgba(255,255,255,0.72);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);}
.sticky-text{display:flex;flex-direction:column;line-height:1.15;}

@media (max-width:520px){
  .sticky-inner{flex-direction:column;align-items:stretch;}
  .sticky-text{align-items:center;text-align:center;}
}
.official-box{margin-top:12px;padding:10px 12px;}
.official-box strong{display:block;margin-bottom:4px;}

/* Datasheet-style model cards */
.modelpick-card{background:rgba(255,255,255,.86);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
.modelpick-card__img{background:linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));border-bottom:1px solid rgba(15,23,42,.08);}
.modelpick-card__img img{height:220px;object-fit:cover;}
.modelpick-card__content{padding:14px 14px 16px;}
.modelpick-card__title{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:rgba(15,23,42,.82);}
.modelpick-card__bullets{list-style:none;padding-left:0;display:grid;gap:8px;}
.modelpick-card__bullets li{padding:10px 10px;border:1px solid rgba(15,23,42,.10);border-radius:12px;background:rgba(255,255,255,.72);font-weight:700;font-size:13px;line-height:1.35;color:rgba(15,23,42,.88);}

/* v58 footer polish */
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  justify-content:center;
  align-items:center;
  font-weight:500;
  line-height:1.2;
  max-width:1100px;
  margin:10px auto 0;
}
.footer-links a{
  font-weight:600;
  text-decoration:none;
  padding:2px 0;
  white-space:nowrap;
}
.footer-links a:not(:last-child)::after{
  content:"•";
  display:inline-block;
  margin-left:12px;
  opacity:.45;
}
.footer-links a:hover{ text-decoration:underline; }

.official-comm{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width:520px;
}
.official-comm strong{ display:block; margin-bottom:6px; }
.official-comm .small{ opacity:.85; }
@media (max-width:640px){
  .footer-links{ gap:8px 10px; }
  .footer-links a:not(:last-child)::after{ margin-left:8px; }
  .official-comm{ max-width:100%; }
}
/* === Fasunion v72: submit button style upgrade (no logic changes) === */
form button[type="submit"],
form input[type="submit"] {
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid rgba(120, 200, 255, 0.6);
  background: linear-gradient(180deg, #eaf7ff, #d9f0ff);
  color: #0b2a3f;
  box-shadow: 0 4px 14px rgba(80, 160, 220, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(80, 160, 220, 0.35);
}

form button[type="submit"]:active,
form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(80, 160, 220, 0.25);
}


/* === Fasunion v76: Typography presence upgrade (Variant 2) === */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: more authority, same layout */
h1{ font-weight: 800; text-shadow: 0 10px 26px rgba(0,0,0,.45); }
h2{ font-weight: 750; text-shadow: 0 10px 24px rgba(0,0,0,.40); }
h3{ font-weight: 700; text-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* Top navigation: slightly stronger + crisp */
.nav-link{
  font-weight: 650;
  letter-spacing: .15px;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Brand */
.brand-name{
  text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(10,20,40,.06);
}

/* Buttons: keep look, add subtle clarity */
.btn, .btn-primary, .btn-ghost{
  text-shadow: 0 1px 0 rgba(255,255,255,.40);
}

/* Form submit buttons: match premium feel */
form button[type="submit"],
form input[type="submit"]{
  font-weight: 700;
  letter-spacing: .15px;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}




/* --- Scenario / fill section (keeps the site from feeling empty) --- */
.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.00), rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.00));
}
.section-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}
.scenario-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.scenario-card{
  border:0;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}
.scenario-card h3{
  margin: 0 0 6px 0;
  font-size: 14px;
  letter-spacing: .2px;
}
.scenario-card p{
  margin:0;
  font-size: 12.5px;
  line-height: 1.45;
}
.scenario-cta{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width: 980px){
  .scenario-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .scenario-grid{ grid-template-columns: 1fr; }
  .scenario-card{ padding: 13px; }
}


.lang-btn:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.32);
  box-shadow:0 10px 22px rgba(0,0,0,0.12);
  transform:translateY(-1px);
}
.lang-btn:active{
  transform:translateY(0px);
  box-shadow:none;
}
.lang-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,0.35), 0 10px 22px rgba(0,0,0,0.12);
  border-color:rgba(56,189,248,0.55);
}
.lang-btn[aria-current="page"]{
  background:rgba(56,189,248,0.18);
  border-color:rgba(56,189,248,0.45);
  box-shadow:0 0 0 3px rgba(56,189,248,0.14);
}


/* === V90 HERO LOGO OVERRIDE (DO NOT EDIT ABOVE) === */
/* Force hero-logo to render 1:1 (no wash/filters) */
.hero-logo{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* Prevent any parent opacity/filter from affecting the image */
.hero-visual, .hero-right, .hero-card, .hero-card *{
  filter: none;
}

/* Keep the image crisp when scaled */
.hero-logo{
  image-rendering: auto;
}


/* Enterprise homepage hero */
.hero.hero--enterprise{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden;}
.hero.hero--enterprise .hero-bg{position:absolute;inset:0;pointer-events:none;
  /* Hero overlay only; the actual background image is rendered by #site-bg */
  background: linear-gradient(180deg, rgba(8,14,20,.32) 0%, rgba(8,14,20,.22) 40%, rgba(8,14,20,.40) 100%);
  filter: saturate(0.98) contrast(1.02) brightness(1.00);
}

.hero.hero--enterprise .hero-container{position:relative;z-index:1;}
.hero.hero--enterprise .hero-card{max-width:860px;padding:28px 28px 22px;border-radius:18px;}

/* Enterprise hero: light glass needs dark ink for readability */
.hero.hero--enterprise .hero-card{color:var(--ink);} 
.hero.hero--enterprise .hero-card h1{color:var(--ink);text-shadow:none;}
.hero.hero--enterprise .hero-card p{color:rgba(15,23,42,.78);} 
.hero.hero--enterprise .hero-card .chip{color:rgba(15,23,42,.82);background:rgba(255,255,255,.78);border:1px solid rgba(15,23,42,.14);} 
.hero.hero--enterprise .hero-card .btn{color:rgba(15,23,42,.92)!important;background:rgba(255,255,255,.78)!important;border:1px solid rgba(15,23,42,.18)!important;}
.hero.hero--enterprise .hero-card .btn:hover{background:rgba(255,255,255,.9)!important;border-color:rgba(15,23,42,.24)!important;}
.hero.hero--enterprise .hero-card .btn:focus,.hero.hero--enterprise .hero-card .btn:focus-visible{outline:2px solid rgba(37,99,235,.55)!important;outline-offset:2px;}
.hero.hero--enterprise .hero-card.hero-glass{background:rgba(255,255,255,.62);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 40px rgba(0,0,0,.18);} 
.hero.hero--enterprise .hero-sub{max-width:52ch;}
.hero.hero--enterprise .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.hero.hero--enterprise .hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.hero.hero--enterprise .hero-chip{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);font-size:.85rem;color:#2b2b2b;}

/* Capabilities preview (enterprise tiles) */
.cap-preview{position:relative;padding:34px 0 6px;}

/* Dark-background section headings */
.cap-preview h2, .section h2, .section-tight h2{
  color:rgba(235,245,255,.92);
}
.cap-preview .muted, .section .muted, .section-tight .muted{color:rgba(190,205,225,.86)}
.cap-preview .cap-title{font-size:1.6rem;margin:0 0 14px;color:rgba(235,245,255,.92);} 
.cap-preview .cap-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  align-items:stretch;
}
@media(min-width:740px){
  .cap-preview .cap-grid{grid-template-columns:1.25fr 1fr;}
}
@media(min-width:980px){
  .cap-preview .cap-grid{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1200px){
  .cap-preview .cap-grid{grid-template-columns:repeat(3,1fr);}
}
.cap-preview .cap-card--two{grid-column:auto;}

.cap-preview .cap-card{border-radius:18px;overflow:hidden;background:rgba(10,16,24,.46);border:0;box-shadow:0 12px 30px rgba(0,0,0,.22);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}
.cap-preview .cap-card--text{padding:18px 18px 16px;}
.cap-preview .cap-list{margin:0 0 14px;padding-left:18px;color:var(--muted);}
.cap-preview .cap-card--media{position:relative;display:block;min-height:244px;background:linear-gradient(135deg, rgba(10,18,26,.35), rgba(10,18,26,.08));}
.cap-preview .cap-card--media::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.72) 100%);}
.cap-preview .cap-label{position:absolute;left:12px;right:12px;bottom:12px;padding:11px 12px;border-radius:14px;background:rgba(0,0,0,.34);border:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(255,255,255,.96);text-shadow:0 1px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.65);}
.cap-preview .cap-label span{font-weight:700;}
.cap-preview .cap-label svg{width:18px;height:18px;opacity:.95;filter:drop-shadow(0 1px 6px rgba(0,0,0,.55));}

.cap-preview .cap-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;}
.cap-preview .cap-mini{position:relative;display:block;min-height:92px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.65);border:1px solid rgba(0,0,0,.06);}
.cap-preview .cap-mini::before{content:'';position:absolute;inset:0;background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.06) 60%);}
.cap-preview .cap-mini .cap-label{left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:12px;font-size:.92rem;}

@media (max-width: 980px){
  .cap-preview .cap-mini-grid{grid-template-columns:1fr 1fr;}
  .hero.hero--enterprise{min-height:64vh;}
}
@media (max-width: 560px){
  .cap-preview .cap-mini-grid{grid-template-columns:1fr;}
  .hero.hero--enterprise .hero-card{padding:20px 18px;}
}



/* === Enterprise polish: language switcher (compact, aligned) === */
.lang-fab, .lang-bubble, .lang-orb { display:none !important; } /* safety if older bubble elements exist */
.lang-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border:0;
  box-shadow: 0 10px 30px rgba(10, 40, 70, .10);
  backdrop-filter: blur(10px);
}
.lang-btn{
  height: 28px;
  min-width: 42px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  background: transparent;
  border: 1px solid rgba(10, 40, 70, .08);
  color: rgba(12, 28, 44, .85);
}
.lang-btn:hover{ background: rgba(200, 235, 255, .35); }
.lang-btn.is-active{
  background: rgba(120, 210, 255, .35);
  border-color: rgba(70, 160, 220, .30);
  color: rgba(8, 20, 36, .95);
}
@media (max-width: 720px){
  .lang-toggle{ gap: 5px; padding: 6px; }
  .lang-btn{ height: 26px; min-width: 40px; font-size: 10.5px; padding: 0 9px; }
}

/* === Enterprise polish: Capabilities preview media cards (fix long beige bars) === */
.cap-preview .cap-card--img{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10, 18, 28, .12);
  border:0;
  box-shadow: 0 16px 44px rgba(10, 40, 70, .14);
  min-height: 220px;
}
.cap-preview .cap-img{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.01);
}

/* Tier-1: fine-tune hero framing for first capacity card (Direct inzetbare BESS-systemen) */
.cap-grid .cap-card:nth-child(1) .cap-img{
  /* push framing down so the container sits lower in view (more professional crop) */
  background-position: 18% 78%;
}

@media (max-width: 720px){
  /* mobile needs an even lower crop due to reduced height */
  .cap-grid .cap-card:nth-child(1) .cap-img{ background-position: 18% 90%; }
}

.cap-preview .cap-img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.45) 100%);
}
.cap-preview .cap-label span{ display:inline-flex; align-items:center; }
.cap-preview .cap-arrow{
  font-size: 20px;
  opacity: .70;
  transform: translateY(-1px);
}
/* assign real images per tile */
.cap-img--epc{ background-image: url("assets/capabilities/cap_epc.webp"); }
.cap-img--dc{ background-image: url("assets/capabilities/cap_datacenter.webp"); }
.cap-img--util{ background-image: url("assets/bg/industrial.webp"); }
.cap-img--ind{ background-image: url("assets/capabilities/cap_industrial.webp"); }
.cap-img--remote{ background-image: url("assets/capabilities/cap_remote.webp"); }
.cap-img--cold{ background-image: url("assets/products/cold-storage-container_B.webp"); }

.heroEnterprise::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.25));pointer-events:none;}
.heroEnterprise{position:relative;}


/* (Removed) v108 hard-lock styles.
   They forced all text to light + removed blur everywhere, which broke
   light-glass legibility and disabled your original hover/color behavior. */

/* v110: force dark-glass CTA readability */
.cap-cta, .cap-cta:visited, .cap-cta:hover, .cap-cta:active, .cap-cta:focus{
  color: #EAF1F6 !important;
  border-color: rgba(255,255,255,0.40) !important;
  background: rgba(255,255,255,0.06) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55) !important;
}
.cap-cta:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.55) !important;
}

.footer, footer{
  color: rgba(235,245,255,0.92);
}
.footer a, footer a{
  color: rgba(235,245,255,0.92) !important;
}
.footer a:hover, footer a:hover{
  color: rgba(255,255,255,0.98) !important;
}

/* Footer + contact readability on visible background */
footer, .footer{color:rgba(245,248,255,.9);text-shadow:0 1px 1px rgba(0,0,0,.35);}
footer a, .footer a{color:rgba(245,248,255,.92)!important;}


/* FOOTER: readability on visible background */
footer, .footer{ color: rgba(245,248,255,0.90); }
footer a, .footer a{ color: rgba(245,248,255,0.92); }
footer, .footer, footer a, .footer a{
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}


/* STICKY BAR CLEARANCE */
:root{ --sticky-clear: 120px; }
main{ padding-bottom: var(--sticky-clear); }


/* FOOTER READABILITY */
footer, .footer{
  color: rgba(245,248,255,.90);
}
footer a, .footer a{
  color: rgba(245,248,255,.90) !important;
}
footer, .footer, footer a, .footer a{
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* Sticky quote bar should not cover content */
.sticky-quotebar{ height: auto; }


/* Prevent sticky quote bar from covering footer content */
footer, .footer{ padding-bottom:140px; }


/* === v114.1 QA patch: readability on light glass + nav states + sharper background === */
.info-banner, .info-card, .trust-block, .official-comm{
  color: rgba(0,0,0,.86);
}
.info-banner h1, .info-banner h2, .info-banner h3,
.info-card h1, .info-card h2, .info-card h3,
.trust-block h1, .trust-block h2, .trust-block h3,
.official-comm h1, .official-comm h2, .official-comm h3,
.info-banner .muted, .info-card .muted, .trust-block .muted, .official-comm .small{
  color: rgba(0,0,0,.74);
}
.info-banner a, .info-card a, .trust-block a, .official-comm a{
  color: rgba(0,0,0,.86);
}
.info-banner a:hover, .info-card a:hover, .trust-block a:hover, .official-comm a:hover{
  color: rgba(0,0,0,1);
}

/* ensure buttons/links on dark glass remain readable in all states */
.btn, .chip, .pill, .card a, .site-header a{
  -webkit-tap-highlight-color: transparent;
}
.btn:visited, .btn:active, .btn:focus,
.chip:visited, .chip:active, .chip:focus,
.pill:visited, .pill:active, .pill:focus{
  color: inherit;
}

/* prevent footer overlap with sticky quote bar */
.site-footer{ padding-bottom: 210px; }


/* Ensure dark enterprise capability cards keep light text */
.cap-preview .cap-card{color: rgba(235,245,255,.92);}


/* --------------------------------------------------------------------------
   V133: Tier-1 readability + border cleanup (no redesign)
   - Improves text contrast on dark site-wide background
   - Removes thin white CSS borders that can read as "white frame"
---------------------------------------------------------------------------- */
.section > .container > h2,
.section > .container > .section-title h2{ color: var(--text); }

.section > .container > p,
.section-title p{ color: rgba(235,245,255,.84); }

.section > .container > h2,
.section-title h2{ text-shadow: 0 10px 24px rgba(0,0,0,.28); }

/* Keep panel typography dark (readable on light glass panels) */
.panel h2, .panel h3, .panel p, .panel .section-title p{ color: var(--ink); text-shadow:none; }

/* Workflow cards: improve contrast without changing layout */
.step{
  border: none !important;
  background: rgba(0,0,0,.20);
}
.step .kicker{ color: rgba(235,245,255,.78) !important; }
.step .desc{ color: rgba(235,245,255,.86) !important; }

/* Remove remaining thin white borders (can look like a page frame on dark BG) */
header nav a.btn,
.btn, a.btn,
.btn-primary, .btn-secondary, .btn-ghost, .btn-small,
.tag, .chip, .pill,
.modal__panel{
  border: none !important;
}


/* --------------------------------------------------------------------------
   V136: Cards (Our capacity / Where needed)
   - Make images more visible (taller media area) without making cards huge
   - Keep overlay, but tune typography to feel smoother/enterprise
   - Hide any remaining 1px "white rim" artifacts on rounded images
---------------------------------------------------------------------------- */

/* Taller media area (more image visible) */
.cap-preview  .cap-card--media{
  min-height:268px;
  overflow: hidden;
}
@media (max-width: 980px){
  .cap-preview .cap-card--media{ min-height: 200px; }
}
@media (max-width: 560px){
  .cap-preview .cap-card--media{ min-height: 188px; }
}

/* Ensure background images fully cover and never show a thin edge */
.cap-preview .cap-img{
  transform: scale(1.01);
  will-change: transform;
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   V140: Cards — cover + focus (Our capacity / Where needed)
   - Keep full-bleed "cover" look
   - Shift focal point per tile so the subject is visible (less awkward crops)
   - Slightly reduce overscale so more of the image is visible
---------------------------------------------------------------------------- */

/* Default for just these 6 tiles */
#capacity .cap-img,
#where .cap-img{
  transform: scale(1.02);
  background-position: center 45%;
}

/* Per-tile focus */
#capacity .cap-card:nth-child(1) .cap-img{ background-position: 12% 55%; } /* container corner/door */
#capacity .cap-card:nth-child(2) .cap-img{ background-position: 50% 48%; } /* construction site */
#capacity .cap-card:nth-child(3) .cap-img{ background-position: 72% 52%; } /* pen/hand docs */

#where .cap-card:nth-child(1) .cap-img{ background-position: 62% 40%; }    /* ship + pin */
#where .cap-card:nth-child(2) .cap-img{ background-position: 52% 55%; }    /* screens */
#where .cap-card:nth-child(3) .cap-img{ background-position: 36% 52%; }    /* clipboard + laptop */

/* More refined, stable label (professional typography + balanced overlay) */
.cap-preview .cap-label{
  background: rgba(0,0,0,.30);
  padding: 12px 13px;
  border-radius: 14px;
}
.cap-preview .cap-label span{
  font-weight: 650;
  letter-spacing: .1px;
  line-height: 1.18;
}
.cap-preview .cap-arrow{
  opacity: .75;
}

/* Body text: a touch more breathable */
.cap-preview .cap-card--text p{
  line-height: 1.5;
  font-size: .98rem;
}




/* === Micro-fix: card images show more + better subject centering (capacity/where) === */
#capacity .cap-card--media, #where .cap-card--media{ min-height: 244px; }
@media (max-width: 980px){
  #capacity .cap-card--media, #where .cap-card--media{ min-height: 232px; }
}
@media (max-width: 560px){
  #capacity .cap-card--media, #where .cap-card--media{ min-height: 220px; }
}
/* Keep cover, reduce aggressive crop, and bias subject slightly to the right */
#capacity .cap-card .cap-img, #where .cap-card .cap-img{
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.008);
}
/* Per-tile focus (x/y) */
#capacity .cap-card:nth-child(1) .cap-img{ background-position: 28% 44%; }
#capacity .cap-card:nth-child(2) .cap-img{ background-position: 56% 44%; }
#capacity .cap-card:nth-child(3) .cap-img{ background-position: 78% 44%; }

#where .cap-card:nth-child(1) .cap-img{ background-position: 70% 44%; }
#where .cap-card:nth-child(2) .cap-img{ background-position: 58% 44%; }
#where .cap-card:nth-child(3) .cap-img{ background-position: 46% 44%; }


/* --------------------------------------------------------------------------
   V144: Cap/Where cards — grid centering + larger image window + better focal X
   - Fixes "too far left" feel caused by wide-screen 5-column grid
   - Keeps grid width intact; centers the 3-card layout
   - Increases media height only (no width change)
   - Keeps cover look; shifts focal point slightly to the right per tile
---------------------------------------------------------------------------- */

/* Center the 3-card layout (prevents empty "phantom" columns on wide screens) */
.cap-preview .cap-grid{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}

/* Ensure 3 columns on wide screens (not 5) */
@media(min-width:1200px){
  .cap-preview .cap-grid{
    grid-template-columns: 1.25fr 1fr 1fr;
  }
}

/* Make the image window taller (height only) */
.cap-preview .cap-card--media{ min-height: 276px; }
@media(max-width:980px){ .cap-preview .cap-card--media{ min-height: 260px; } }
@media(max-width:560px){ .cap-preview .cap-card--media{ min-height: 244px; } }

/* Slightly less overscale so more is visible, plus a gentler vertical focus */
#capacity .cap-img,
#where .cap-img{
  transform: scale(1.018);
  background-position: center 42%;
}

/* Per-tile focal X (nudge right so subject sits more centered) */
#capacity .cap-card:nth-child(1) .cap-img{ background-position: 24% 55%; }
#capacity .cap-card:nth-child(2) .cap-img{ background-position: 58% 48%; }
#capacity .cap-card:nth-child(3) .cap-img{ background-position: 80% 52%; }

#where .cap-card:nth-child(1) .cap-img{ background-position: 70% 40%; }
#where .cap-card:nth-child(2) .cap-img{ background-position: 60% 48%; }
#where .cap-card:nth-child(3) .cap-img{ background-position: 52% 52%; }




/* v145 master polish: spacing/typography/buttons (safe CSS-only) */
html{scroll-behavior:smooth;}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.1px;
}

/* Responsive section rhythm */
.section{padding:clamp(52px,6vw,78px) 0;}
/* Headings + paragraph measure */
h1,h2,h3{letter-spacing:-0.01em;}
.cap-title{margin:0 0 10px;}
.cap-preview .muted{max-width:74ch;}

/* Center the 3-card grids cleanly on wide screens */
.cap-preview .cap-grid{
  width:100%;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
}

/* Cards: image window higher (height-only) + keep grid widths intact */
.cap-preview .cap-card--media{
  min-height:clamp(248px,20vw,292px);
  overflow:hidden;
}
.cap-preview .cap-img{
  background-size:cover;
  background-repeat:no-repeat;
}

/* Subtle per-tile focus nudges (more centered / slightly right) */
#capacity .cap-card:nth-child(1) .cap-img{background-position:65% 45%;}
#capacity .cap-card:nth-child(2) .cap-img{background-position:55% 45%;}
#capacity .cap-card:nth-child(3) .cap-img{background-position:62% 45%;}
#where .cap-card:nth-child(1) .cap-img{background-position:55% 45%;}
#where .cap-card:nth-child(2) .cap-img{background-position:58% 45%;}
#where .cap-card:nth-child(3) .cap-img{background-position:62% 45%;}

/* Buttons/CTAs: consistent focus + hover (no redesign) */
a:focus-visible, button:focus-visible{
  outline:2px solid rgba(143,211,255,.85);
  outline-offset:3px;
  border-radius:12px;
}
.btn, .btn-primary, .btn-secondary, .btn-ghost{
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover{
  transform:translateY(-1px);
}
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active{
  transform:translateY(0);
}

/* Prevent rare horizontal overflow */
body{overflow-x:hidden;}
img, svg{max-width:100%; height:auto;}

/* =======================
   v146: card alignment refinements (requested)
   - Keep existing blueprint
   - No asset changes
   - Only #capacity and #where
   ======================= */

/* 1) Move the whole 3-card groups slightly to the right on desktop for better visual centering
      against the site-wide background. (Does NOT change column count or card widths.) */
#capacity .cap-grid,
#where .cap-grid{
  transform: translateX(18px);
}
@media (max-width: 980px){
  #capacity .cap-grid,
  #where .cap-grid{ transform: translateX(10px); }
}
@media (max-width: 640px){
  #capacity .cap-grid,
  #where .cap-grid{ transform: none; }
}

/* 2) Slightly wider content window on large screens so cards feel less "small" without touching layout/structure */
@media (min-width: 1200px){
  #capacity .container,
  #where .container{ max-width: 1220px; }
}

/* 3) Increase ONLY the image window height (not width) so more of each image is visible */
#capacity .cap-card--media,
#where .cap-card--media{
  min-height: clamp(270px, 22vw, 320px);
}
@media (max-width: 980px){
  #capacity .cap-card--media,
  #where .cap-card--media{ min-height: clamp(250px, 28vw, 300px); }
}
@media (max-width: 640px){
  #capacity .cap-card--media,
  #where .cap-card--media{ min-height: 220px; }
}

/* 4) Nudge focus a bit more to the right so subjects read larger/clearer (still cover, no stretching) */
#capacity .cap-card:nth-child(1) .cap-img{background-position:72% 46%;}
#capacity .cap-card:nth-child(2) .cap-img{background-position:60% 46%;}
#capacity .cap-card:nth-child(3) .cap-img{background-position:70% 46%;}
#where .cap-card:nth-child(1) .cap-img{background-position:62% 48%;}
#where .cap-card:nth-child(2) .cap-img{background-position:64% 48%;}
#where .cap-card:nth-child(3) .cap-img{background-position:68% 50%;}

/* =========================================================
   v146-final polish (no content/structure changes)
   ========================================================= */
:root{
  --focus-ring: rgba(255,255,255,.65);
  --focus-ring-dark: rgba(0,0,0,.55);
}

/* Crisper type rendering on supported browsers */
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Consistent interactive affordance + enterprise-grade focus states */
.btn,
.nav a,
.lang-switch button,
.lang-switch a,
a.cta,
input,
textarea,
select{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease;
}

.btn:focus-visible,
.nav a:focus-visible,
.lang-switch button:focus-visible,
.lang-switch a:focus-visible,
a.cta:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0,0,0,.18);
}

/* Slightly more stable hover/active (no layout shift) */
.btn:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.26); }
.btn:active{ transform: translateY(1px); }

/* Prevent accidental horizontal scroll from tiny overflows */
body{ overflow-x: clip; }

/* =========================================================
   v146-final polish (no content/structure changes)
   ========================================================= */
:root{
  --focus-ring: rgba(255,255,255,.65);
  --focus-ring-dark: rgba(0,0,0,.55);
}

html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Consistent micro-interactions */
.btn,
.header .cta,
.lang-switch button,
.nav-links a{
  transition: background-color .18s ease, box-shadow .18s ease, transform .08s ease, color .18s ease, border-color .18s ease;
}

.btn:active,
.header .cta:active,
.lang-switch button:active{
  transform: translateY(1px);
}

/* Accessible focus styles (enterprise polish) */
.btn:focus-visible,
.header .cta:focus-visible,
.lang-switch button:focus-visible,
.nav-links a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Keep focus visible on light panels too */
.section .btn:focus-visible,
.card .btn:focus-visible,
.panel .btn:focus-visible{
  outline-color: var(--focus-ring-dark);
}

/* Subtle list readability without changing layout */
ul, ol{
  line-height: 1.55;
}

/* --- v147 patch: Capabilities (Critical Procurement) desktop grid fill --- */
@media (min-width: 980px){
  #cap-critical .cap-grid{
    grid-template-columns: repeat(6, 1fr);
  }
  #cap-critical .cap-card--text{ grid-column: span 2; }
  #cap-critical .cap-card--media{ grid-column: span 2; }
  #cap-critical .cap-card--two{ grid-column: span 3; }
}

/* Scoped: Fabrieken & uitbreidingsplannen image right */
.card.fabrieken-right{grid-auto-flow:column;}

/* QA FIX: cap1 (BESS) needs slightly lower crop */
#capacity .cap-card:nth-child(1) .cap-img{background-position: 12% 62% !important;}



/* --- Trust strip (How we work) --- */
.section-trust{padding-top:22px; padding-bottom:22px}
.trust-panel{
  border-radius: var(--radius2);
  border:1px solid rgba(15,25,45,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.54));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 14px 36px rgba(10,20,40,.10);
  padding:16px 16px;
}
.trust-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.trust-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
  color: rgba(11,18,36,.68);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.trust-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(15,25,45,.08);
  background: rgba(255,255,255,.56);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.trust-item:hover{
  transform: translateY(-1px);
  border-color: rgba(63,169,239,.28);
  background: rgba(255,255,255,.66);
}
.trust-dot{
  width:12px; height:12px; flex:0 0 12px;
  border-radius:999px;
  margin-top:4px;
  background: radial-gradient(circle at 35% 35%, rgba(143,211,255,1), rgba(63,169,239,1));
  box-shadow: 0 8px 18px rgba(63,169,239,.22);
}
.trust-title{font-size:13px; font-weight:900; color: rgba(11,18,36,.92); line-height:1.2}
.trust-desc{margin-top:4px; font-size:12.5px; color: rgba(11,18,36,.70); line-height:1.35}

@media (max-width: 980px){
  .trust-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 560px){
  .trust-panel{padding:14px 14px}
  .trust-grid{grid-template-columns:1fr}
  .trust-item{padding:10px 10px}
}


/* Master polish: prevent long words/URLs from breaking layout (esp. DE/FR) */
.trust-title, .trust-desc{ overflow-wrap:anywhere; }


/* Stronger muted text inside light glass/panels for enterprise readability */
.panel .muted,
.glass-card .muted,
.hero-card .muted,
.catalog-card .muted,
.pdp-card .muted,
.card .muted{
  color: rgba(15,23,42,0.78);
}

.panel p,
.glass-card p,
.hero-card p,
.catalog-card p{
  color: rgba(15,23,42,0.90);
}

/* Ensure small labels remain readable */
.catalog-card .meta,
.catalog-card .note,
.catalog-card .subtle,
.pdp-card .meta,
.pdp-card .note{
  color: rgba(15,23,42,0.72);
}


/* Subtle text shadow for text directly on photo backgrounds */
.on-photo,
.hero-overlay,
.section-on-photo{
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.section-tight{
  max-width: 1180px;
  margin: 28px auto;
  padding: 22px 26px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
  color: var(--ink);
}
.section-tight h1,
.section-tight h2,
.section-tight h3{
  color: var(--ink);
}
.section-tight p,
.section-tight li{
  color: rgba(14,30,44,.88);
}
.section-tight .muted{
  color: rgba(14,30,44,.78);
}

/* Muted readability override */
.glass-card .muted,
.panel .muted,
.card .muted,
.glass .muted{
  color: rgba(14,30,44,.78);
}


/* v173: readability text blocks */
.text-block{
  max-width: 1100px;
  margin: 0 auto 18px auto;
  padding: 26px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.text-block h1, .text-block h2, .text-block h3{
  color: #0b1a2b !important;
  text-shadow: none !important;
}
.text-block p, .text-block li, .text-block a, .text-block span, .text-block small{
  color: #10243a !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.text-block{
  opacity: 1 !important;
}
.text-block .muted{
  color: #24384f !important;
  opacity: 0.92 !important;
}
.text-block a:not(.btn){
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-block .btn, .text-block .chip, .text-block .pill{
  color: inherit;
}

/* Fix cases where earlier styles set text to white within blocks */
.text-block .text-white, .text-block .white, .text-block [style*="color:#fff"], .text-block [style*="color: #fff"]{
  color: #0b1a2b !important;
}

@media (max-width: 720px){
  .text-block{
    padding: 18px 16px;
    border-radius: 18px;
  }
}


/* v175 readability hard-fix: ensure text in light panels is always readable */
.text-block{color:#0b1220 !important;}
.text-block h1,.text-block h2,.text-block h3,.text-block h4,.text-block p,.text-block li,.text-block strong,.text-block em{color:#0b1220 !important;opacity:1 !important;}
.text-block a{color:#0b3a7a !important;}
.text-block *{text-shadow:none !important;}

/* === Fasunion RTL support (Arabic) === */
html[dir="rtl"] body{direction:rtl;}
html[dir="rtl"] .topbar-inner{flex-direction:row-reverse;}
html[dir="rtl"] .brand{margin-left:0;margin-right:0;}
html[dir="rtl"] .nav{flex-direction:row-reverse;}
html[dir="rtl"] .lang-toggle{flex-direction:row-reverse;}
html[dir="rtl"] .footer-inner{direction:rtl;}
html[dir="rtl"] .footer-links-grid{direction:rtl;}
html[dir="rtl"] .hero-grid{direction:rtl;}
html[dir="rtl"] .grid, html[dir="rtl"] .cards, html[dir="rtl"] .steps{direction:rtl;}
html[dir="rtl"] .btn .icon, html[dir="rtl"] .btn svg{transform:scaleX(-1);}
html[dir="rtl"] .sticky-inner{flex-direction:row-reverse;}
/* Ensure text alignment follows RTL */
html[dir="rtl"] .container, html[dir="rtl"] .section{ text-align:right; }
/* Brand KvK small */
.brand-kvk{font-size:12px;opacity:0.8;margin-top:2px;}