:root{
  --bg1:#0b1020;
  --bg2:#101a33;
  --text:#eef2ff;
  --muted:rgba(238,242,255,0.72);

  --card:rgba(255,255,255,0.08);
  --card2:rgba(255,255,255,0.06);
  --line:rgba(255,255,255,0.14);

  --accent1:#6366f1;
  --accent2:#a78bfa;

  --r:18px;
  --shadow:0 18px 60px rgba(0,0,0,0.42);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: var(--bg1);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1000px 650px at 18% -10%, rgba(99,102,241,0.22), transparent 70%),
    radial-gradient(900px 600px at 85% 0%, rgba(167,139,250,0.20), transparent 72%),
    linear-gradient(180deg, var(--bg1) 0%, #0d1430 45%, var(--bg2) 100%);
  filter: brightness(1.15) saturate(1.12);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:0.92}
p{color:var(--muted); line-height:1.65}
h1,h2,h3{color:var(--text); margin:0 0 10px}
h1{font-size:44px; line-height:1.08; letter-spacing:-0.02em}
h2{font-size:28px}
h3{font-size:16px}

.container{max-width:1100px; margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}
.small{font-size:13px}

.skip{
  position:absolute;
  left:-9999px;
  top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--line);
}
.skip:focus{left:18px; z-index:999}

.topbar{
  padding:14px 0;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.mark{
  width:14px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow:0 0 0 6px rgba(99,102,241,0.14);
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{font-weight:900}
.brand-text .muted{font-size:12px}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav a{font-weight:800; font-size:14px; color:var(--muted)}
.nav a:hover{color:var(--text)}

.burger{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}
.burger span{display:block; width:18px; height:2px; background:var(--text); margin:4px 0; opacity:0.9}

.mobile-nav{
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  background:rgba(12,18,40,0.92);
  border:1px solid rgba(255,255,255,0.12);
  display:grid;
  gap:10px;
}
.mobile-nav a{font-weight:800; color:var(--text)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  color:#0b1020;
}
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--text);
}
.btn-small{padding:10px 12px; border-radius:11px; font-size:13px}

.hero{padding:26px 0 10px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:16px;
  align-items:start;
}
.lead{font-size:16px; margin:0 0 14px}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px}

.trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.trust-item{
  padding:12px;
  border-radius:var(--r);
  background:var(--card2);
  border:1px solid rgba(255,255,255,0.10);
}
.trust-item strong{display:block}
.trust-item .muted{font-size:13px}

.quick-contact{
  margin-top:14px;
  padding:12px;
  border-radius:var(--r);
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.10);
}
.qc-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.qc-email{font-weight:900; color:var(--text)}

.hero-card{
  border-radius:var(--r);
  background:var(--card);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow);
  padding:16px;
}
.hero-card h2{font-size:18px; margin:0 0 6px}

.form{display:grid; gap:10px; margin-top:10px}
label{display:grid; gap:6px; font-weight:800; color:var(--text); font-size:13px}
input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.22);
  color:var(--text);
  outline:none;
}
input:focus,textarea:focus{border-color:rgba(167,139,250,0.55)}
.form-msg{min-height:18px; margin:0}
.note{
  margin-top:6px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--muted);
}
.note strong{color:var(--text)}

.band{padding:34px 0}
.band-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}
.pill-grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.pill{
  padding:12px;
  border-radius:999px;
  background:var(--card2);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--text);
  font-weight:800;
  font-size:13px;
}

.section{padding:34px 0}

.steps{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top:14px}
.step{
  padding:14px;
  border-radius:var(--r);
  background:var(--card2);
  border:1px solid rgba(255,255,255,0.10);
}
.step-num{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(167,139,250,0.18);
  border:1px solid rgba(167,139,250,0.26);
  font-weight:1000;
  margin-bottom:10px;
}

.section-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-end}
.section-head p{margin:0}

.icon-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px}
.icon-item{
  display:grid;
  grid-template-columns: 46px 1fr;
  gap:12px;
  padding:14px;
  border-radius:var(--r);
  background:var(--card2);
  border:1px solid rgba(255,255,255,0.10);
}
.icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(99,102,241,0.16);
  border:1px solid rgba(99,102,241,0.22);
  font-size:18px;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}

.bullets{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.8;
}

.panel{
  padding:14px;
  border-radius:var(--r);
  background:var(--card);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow);
}
.meter{margin-top:12px}
.meter-top{display:flex; justify-content:space-between; gap:10px; color:var(--text); font-weight:900}
.bar{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  margin-top:8px;
}
.fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
}

/* demo widths without inline styles (CSP safe) */
.w44{width:44%}
.w23{width:23%}
.w61{width:61%}

.faq{
  margin-top:10px;
  border-radius:var(--r);
  background:var(--card2);
  border:1px solid rgba(255,255,255,0.10);
  padding:12px 14px;
}
.faq summary{
  cursor:pointer;
  font-weight:900;
  color:var(--text);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq-body{margin-top:10px; color:var(--muted); line-height:1.7}

.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.contact-card{
  padding:14px;
  border-radius:var(--r);
  background:var(--card2);
  border:1px solid rgba(255,255,255,0.10);
}
.contact-line{margin:8px 0 0}
.contact-link{font-weight:900; color:var(--text)}
.link-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.link{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.18);
  font-weight:800;
  color:var(--text);
  font-size:13px;
}

.footer{padding:26px 0 40px; border-top:1px solid rgba(255,255,255,0.10); margin-top:18px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center}

@media (max-width: 980px){
  h1{font-size:36px}
  .hero-grid{grid-template-columns:1fr}
  .band-inner{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width: 700px){
  .nav{display:none}
  .burger{display:inline-block}
  .steps{grid-template-columns:1fr}
  .icon-grid{grid-template-columns:1fr}
}

/* Language switch */
.lang{display:flex; align-items:center; gap:8px; font-weight:900}
.langLink{color:var(--muted); font-size:13px}
.langLink.active{color:var(--text)}
.langSep{color:rgba(255,255,255,0.22)}
@media (max-width: 700px){ .lang{display:none} }

/* About section */
.aboutGrid{display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:start}
.aboutImg{width:160px; height:160px; border-radius:22px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); overflow:hidden}
.aboutImg img{width:100%; height:100%; object-fit:cover; display:block}
.aboutCard{border-radius:var(--r); background:var(--card2); border:1px solid rgba(255,255,255,0.07); padding:14px}
@media (max-width: 700px){ .aboutGrid{grid-template-columns:1fr} .aboutImg{width:140px;height:140px} }

.brand-logo{
  width:56px;height:56px;border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  display:block;
}

/* Sticky top navigation */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(2,6,23,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.footer-meta a{ color: var(--text); font-weight: 900; }

/* Sticky topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(2,6,23,0.78);
  backdrop-filter:blur(10px);
}
.brand-text strong{font-size:16px}

/* HOME_REFRESH_V2 */
/* Sticky topbar + anchor offset */
html{scroll-padding-top:84px}
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(2,6,23,0.78);
  backdrop-filter:blur(10px);
}
/* Make logo bigger even if older CSS sets it small */
.brand-logo{
  width:56px !important;
  height:56px !important;
  border-radius:14px !important;
}

/* NAV_LANG_CONTACT_FIX_V1 */

/* Home quick contact: phone under email */
.qc-row{display:grid; gap:10px}
.qc-line{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* Always allow EN/NL switch to be visible */
@media (max-width: 700px){
  .lang{display:flex !important}
}

/* Never show the mobile menu container on desktop, avoids “double nav” */
@media (min-width: 701px){
  #mobileNav.mobile-nav{display:none !important}
}

/* NAV_CLEANUP_V3 */
/* Always honor the HTML [hidden] attribute */
[hidden]{display:none!important}

/* Desktop: show main nav only */
@media (min-width: 901px){
  .burger{display:none!important}
  .mobile-nav{display:none!important}
}

/* Mobile: burger opens the drawer, normal nav is hidden */
@media (max-width: 900px){
  .nav{display:none!important}
  .burger{display:inline-flex!important}
  .mobile-nav{
    display:block;
    margin-top:10px;
    padding:12px 14px;
    border-radius:18px;
  }
}

/* NAV_CLEANUP_V1 */
/* Hard-disable burger drawer nav everywhere */
.burger{display:none !important;}
.mobile-nav{display:none !important;}

/* Homepage quick contact: phone under email */
.qc-row{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.qc-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

/* Small screens: keep top nav visible, wrap nicely */
@media (max-width: 900px){
  .topbar-inner{flex-wrap:wrap;}
  .nav{display:flex !important; flex-wrap:wrap; gap:10px; width:100%; margin-top:10px;}
}

/* LUMYO_404_STYLES */
.error-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.error-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line, rgba(255,255,255,0.08));
}
.error-brand{
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--text, #e5e7eb);
}
.error-lang{
  display:flex;
  gap:10px;
}
.error-lang-link{
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--line, rgba(255,255,255,0.12));
  border-radius:10px;
  color:var(--text, #e5e7eb);
  opacity:0.9;
}
.error-lang-link:hover{ opacity:1; }

.error-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
}
.error-card{
  width:min(720px, 100%);
  padding:28px;
  border:1px solid var(--line, rgba(255,255,255,0.10));
  border-radius:18px;
  background:var(--card, rgba(255,255,255,0.03));
}
.error-code{
  margin:0 0 8px 0;
  font-size:14px;
  letter-spacing:2px;
  opacity:0.75;
}
.error-title{
  margin:0 0 10px 0;
  font-size:28px;
  line-height:1.2;
}
.error-text{
  margin:0 0 18px 0;
  opacity:0.9;
}
.error-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 14px 0;
}
.error-btn{
  display:inline-block;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line, rgba(255,255,255,0.14));
  color:var(--text, #e5e7eb);
}
.error-btn:hover{
  background:rgba(255,255,255,0.06);
}
.error-meta{
  margin:0;
  opacity:0.75;
  font-size:14px;
}

/* LUMYO_404_START */
body.lumyo-404 { min-height: 100vh; }

body.lumyo-404 .lumyo-404-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
}

body.lumyo-404 .lumyo-404-card{
  width: min(880px, 100%);
  background: rgba(17, 24, 52, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 44px 46px 36px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
}

body.lumyo-404 .lumyo-404-brand{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

body.lumyo-404 .lumyo-404-logo{ width: 92px; height: 92px;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
}

body.lumyo-404 .lumyo-404-brandtext{ text-align: left; }

body.lumyo-404 .lumyo-404-brandname{
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

body.lumyo-404 .lumyo-404-accent{ color: var(--accent, #9a7bff); }

body.lumyo-404 .lumyo-404-brandtag{
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}

body.lumyo-404 .lumyo-404-code{
  margin-top: 10px;
  font-weight: 800;
  letter-spacing: 0.35em;
  opacity: 0.55;
}

body.lumyo-404 .lumyo-404-title{
  margin: 10px 0 8px;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.05;
}

body.lumyo-404 .lumyo-404-text{
  margin: 0 auto 18px;
  max-width: 56ch;
  opacity: 0.85;
}

body.lumyo-404 .lumyo-404-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

body.lumyo-404 .lumyo-404-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  min-width: 120px;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

body.lumyo-404 .lumyo-404-btn.primary{
  background: linear-gradient(135deg, rgba(109,139,255,0.95), rgba(154,123,255,0.95));
  border-color: rgba(255,255,255,0);
  color: rgba(11,16,32,0.96);
}

body.lumyo-404 .lumyo-404-btn:hover{ transform: translateY(-1px); }
body.lumyo-404 .lumyo-404-btn:active{ transform: translateY(0px); opacity: 0.95; }

body.lumyo-404 .lumyo-404-lang{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

body.lumyo-404 .lumyo-404-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  color: inherit;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: transform 120ms ease, background 120ms ease;
}

body.lumyo-404 .lumyo-404-pill:hover{ transform: translateY(-1px); }

body.lumyo-404 .lumyo-404-meta{
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.75;
}

@media (max-width: 560px){ body.lumyo-404 .lumyo-404-card{ padding: 28px 22px 22px; } body.lumyo-404 .lumyo-404-logo{ width: 80px; height: 80px; }
  body.lumyo-404 .lumyo-404-brandname{ font-size: 20px; }
}
/* LUMYO_404_END */
/* 404_OVERRIDES (appended) */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 48px 20px; }
.error-wrap { width: 100%; display: grid; place-items: center; }

.error-card {
  width: min(820px, 100%);
  padding: 38px 44px;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  text-align: center;
  backdrop-filter: blur(14px);
}

.error-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 18px; }
.error-brand-text { text-align: left; }
.error-logo { width: 76px !important; height: 76px !important; } /* bigger logo here */

.error-brand-name { font-size: 22px; font-weight: 800; letter-spacing: 0.2px; }
.error-brand-name span { color: var(--accent, #7b7dff); }
.error-brand-sub { font-size: 12px; opacity: 0.75; margin-top: 2px; }

.error-code { margin: 10px 0 8px; letter-spacing: 0.35em; opacity: 0.8; font-weight: 700; }
.error-title { margin: 0 0 10px; font-size: clamp(32px, 4vw, 44px); }
.error-text { margin: 0 0 18px; opacity: 0.8; }

.error-actions { display: flex; gap: 12px; justify-content: center; margin: 16px 0 14px; flex-wrap: wrap; }
.error-actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none; font-weight: 700;
}
.error-actions .btn.primary { background: rgba(123,125,255,0.9); color: #0b0c18; border-color: rgba(123,125,255,0.9); }
.error-actions .btn:not(.primary) { background: rgba(0,0,0,0.06); }

.error-lang { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.error-lang .pill {
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  text-decoration: none; font-weight: 700; font-size: 12px; opacity: 0.9;
}
.error-meta { margin-top: 12px; opacity: 0.75; font-size: 13px; }

@media (max-width: 520px) {
  .error-card { padding: 28px 18px; }
  .error-logo { width: 64px !important; height: 64px !important; }
  .error-brand-name { font-size: 18px; }
  .error-brand-text { text-align: center; }
  .error-brand { flex-direction: column; }
}

/* LUMYO 404 START */
.lumyo-404-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 18px;
}

.lumyo-404-card{
  width: min(920px, 100%);
  padding: 54px 56px 40px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10, 16, 40, 0.42);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

.lumyo-404-brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  margin: 0 auto 26px;
}

.lumyo-404-logo{
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}

.lumyo-404-brandtext{
  text-align: left;
}

.lumyo-404-brandname{
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.lumyo-404-brandname-1{ color: rgba(255,255,255,0.92); }
.lumyo-404-brandname-2{ color: rgba(132, 120, 255, 0.95); margin-left: 6px; }

.lumyo-404-tagline{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.66);
}

.lumyo-404-code{
  font-weight: 700;
  letter-spacing: 6px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}

.lumyo-404-title{
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
}

.lumyo-404-text{
  margin: 14px 0 22px;
  color: rgba(255,255,255,0.70);
  font-size: 16px;
}

.lumyo-404-actions{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin: 0 0 16px;
}

.lumyo-404-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  min-width: 120px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.12);
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 700;
}

.lumyo-404-btn:hover{
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.06);
}

.lumyo-404-btn-primary{
  background: rgba(132, 120, 255, 0.92);
  color: rgba(10, 12, 22, 0.98);
  border-color: rgba(132, 120, 255, 0.10);
}

.lumyo-404-btn-primary:hover{
  background: rgba(132, 120, 255, 0.98);
}

.lumyo-404-lang{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.lumyo-404-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.10);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

.lumyo-404-chip:hover{
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.06);
}

.lumyo-404-meta{
  margin: 16px 0 0;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

@media (max-width: 640px){
  .lumyo-404-card{ padding: 38px 22px 28px; }
  .lumyo-404-brand{ flex-direction: column; gap: 10px; }
  .lumyo-404-brandtext{ text-align: center; }
  .lumyo-404-actions{ flex-direction: column; }
  .lumyo-404-btn{ width: 100%; max-width: 320px; }
}
/* LUMYO 404 END */

/* LUMYO_404_PAGE_START */
body.lumyo-404{
  margin:0 !important;
  padding:56px 24px;
  min-height:100vh;
  display:grid;
  place-items:center;
}

main.lumyo-404-shell{
  width:100%;
  max-width:none;
  display:grid;
  place-items:center;
}

.lumyo-404-modal{
  width:min(920px, 100%);
  padding:clamp(26px, 4vw, 48px);
  border-radius:26px;
  text-align:center;
  background:rgba(14,22,48,0.55);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 80px rgba(0,0,0,0.45);
  backdrop-filter:blur(14px);
}

.lumyo-404-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:0 auto 22px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
}

.lumyo-404-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:14px;
}

.lumyo-404-brandtext{
  text-align:left;
  line-height:1.1;
}

.lumyo-404-brandname{
  margin:0;
  font-size:22px;
  font-weight:800;
}

.lumyo-404-brandname span{
  color:var(--accent, #7d6eff);
}

.lumyo-404-tagline{
  margin:4px 0 0;
  font-size:14px;
  opacity:0.80;
}

.lumyo-404-code{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:0.45em;
  text-indent:0.45em;
  text-transform:uppercase;
  opacity:0.75;
}

.lumyo-404-title{
  margin:0;
  font-size:clamp(40px, 6vw, 66px);
  font-weight:800;
}

.lumyo-404-text{
  margin:12px auto 0;
  max-width:44ch;
  font-size:16px;
  opacity:0.86;
}

.lumyo-404-actions{
  margin-top:22px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.lumyo-404-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  text-decoration:none;
  font-weight:700;
  background:rgba(125,110,255,0.85);
  color:#0b0f1f;
}

.lumyo-404-btn.secondary{
  background:rgba(255,255,255,0.03);
  color:#eaf0ff;
}

.lumyo-404-lang{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:center;
}

.lumyo-404-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  text-decoration:none;
  font-weight:700;
  color:#eaf0ff;
}

.lumyo-404-meta{
  margin-top:14px;
  font-size:13px;
  opacity:0.70;
}

@media (max-width:520px){
  body.lumyo-404{ padding:34px 16px; }
  .lumyo-404-logo{ width:48px; height:48px; }
  .lumyo-404-brandname{ font-size:18px; }
  .lumyo-404-tagline{ font-size:12px; }
}
/* LUMYO_404_PAGE_END */


/* SEO internal links block */
.seo-links { margin-top: 12px; }
.seo-links p { margin: 0; }

@media (max-width: 720px) {
  /* Slightly smaller header even before scroll */
  .topbar .brand-text .muted { display: none; }
  .topbar .brand-logo { width: 44px; height: 44px; }
  .topbar-inner { padding-top: 12px; padding-bottom: 12px; }

  /* After scroll: show only navigation */
  .topbar.is-scrolled .brand { display: none; }
  .topbar.is-scrolled .lang { display: none; }
  .topbar.is-scrolled .topbar-inner { padding-top: 8px; padding-bottom: 8px; }
  .topbar.is-scrolled .nav a { padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 820px) {
  .topbar { position: sticky; top: 0; z-index: 1000; }
  .topbar-inner { flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }

  /* Make nav fit better on mobile */
  .nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 14px;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  /* When scrolled: hide logo + brand text so only nav remains */
  .topbar.is-scrolled .brand { display: none; }
  .topbar.is-scrolled .topbar-inner { flex-wrap: nowrap; padding-top: 10px; padding-bottom: 10px; }
  .topbar.is-scrolled .nav { width: auto; flex: 1 1 auto; }

  /* Reduce button bulk on scroll */
  .topbar.is-scrolled .nav .btn { padding: 8px 12px; }
  .topbar.is-scrolled .lang { margin-left: auto; }
}

/* MOBILE_HEADER_SMOOTH_V1
   Goal: make the mobile header shrink smooth (no snap/jump on iOS).
   Assumes JS already toggles: html.is-scrolled
*/
@media (max-width: 900px) {
  /* Smooth transitions on the header itself */
  .topbar {
    transition: padding 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
    will-change: padding;
  }

  /* Brand block (logo + title) collapses smoothly instead of display:none */
  .topbar .brand {
    display: flex !important;       /* override any display:none in old rules */
    overflow: hidden !important;
    max-height: 110px;              /* normal state height budget */
    opacity: 1;
    transform: translateY(0);
    transition: max-height 240ms ease, opacity 180ms ease, transform 240ms ease, margin 240ms ease, padding 240ms ease;
    will-change: max-height, transform, opacity;
  }

  /* Scrolled state: collapse brand so only nav remains */
  html.is-scrolled .topbar .brand {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-8px) scale(0.98) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* Reduce vertical space a bit when scrolled */
  html.is-scrolled .topbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Optional: if blur/backdrop-filter is used and still feels laggy on iOS, uncomment these.
     They trade some glass effect for smoother scrolling.
  */
  /*
  html.is-scrolled .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  */
}

/* MOBILE_NAV_ONE_LINE_V1_START */
/* Mobile: keep nav items on a single line (no wrap). If it doesn't fit, scroll sideways. */
@media (max-width: 820px) {
  .topbar .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
  }
  .topbar .nav::-webkit-scrollbar { display: none; }

  .topbar .nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 15px;
  }

  /* Contact button: smaller on mobile so it doesn't force wrapping */
  .topbar .nav .btn {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 14px;
  }

  /* Language stays on the right, does not wrap */
  .topbar .lang {
    white-space: nowrap;
  }
}
/* MOBILE_NAV_ONE_LINE_V1_END */

/* MOBILE_HEADER_SMOOTH_V5_START */
/* Mobile header: hide brand horizontally when scrolled, keep nav visible in one line */
@media (max-width: 820px) {
  /* Brand can shrink horizontally (this fixes the "missing menu items" effect) */
  .topbar .brand {
    flex: 0 1 auto;
    max-width: 320px;
    overflow: hidden;
    transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, max-width 220ms ease;
    will-change: opacity, transform, max-height, max-width;
  }

  /* When scrolled: brand fully collapses and frees space */
  .topbar.is-scrolled .brand {
    max-height: 0;
    max-width: 0;
    opacity: 0;
    transform: translateY(-6px);
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  /* Nav should take the freed space */
  .topbar .nav {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 10px;
  }

  /* Compact look only in scrolled state so everything fits */
  .topbar.is-scrolled .nav a {
    font-size: 14px;
    white-space: nowrap;
  }

  /* Contact button becomes a normal link when scrolled (saves width) */
  .topbar.is-scrolled .nav .btn {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Language stays small and does not wrap */
  .topbar .lang { white-space: nowrap; }
  .topbar .langLink { font-size: 14px; }
}
/* MOBILE_HEADER_SMOOTH_V5_END */


/* MOBILE_CONTACT_SPACING_V1_START */
/* Mobile: give Contact + language toggle a bit more space without re-adding a pill */
@media (max-width: 820px) {
  /* Push language toggle a bit away from the last nav item */
  .topbar .lang { margin-left: 12px; }

  /* Make Contact tap target a bit less tight */
  .topbar .nav a[href$="#contact"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 6px;
  }

  /* If Contact is just "#contact" (not "/xx/#contact"), this still matches */
  .topbar .nav a[href="#contact"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 6px;
  }
}
/* MOBILE_CONTACT_SPACING_V1_END */



/* FOOTER_MOBILE_LAYOUT_V3_START */
@media (max-width: 820px) {
  /* Stack footer lines */
  footer.footer .footer-bottom{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }

  footer.footer .footer-bottom > span{
    width:100% !important;
  }

  /* Email + phone as 2 full-width rows */
  footer.footer .footer-bottom > span:last-child{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }

  /* Hide the "|" separator */
  footer.footer .footer-bottom > span:last-child > span.muted{
    display:none !important;
  }

  /* Make links readable, not cramped */
  footer.footer .footer-bottom > span:last-child a.link{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
  }

  footer.footer .footer-bottom > span:last-child a.link[href^="tel:"]{
    white-space:nowrap !important;
  }
}
/* FOOTER_MOBILE_LAYOUT_V3_END */

/* NAV_CONTACT_RESET_V1_START (kills the old Contact pill styling if any) */
.topbar .nav a[href$="#contact"],
.topbar .nav a[href="#contact"]{
  background: transparent;
  border: none;
  box-shadow: none;
}
/* NAV_CONTACT_RESET_V1_END */




/* NAV_ACTIVE_ONE_FINAL_V2_START */
/* Header nav: prevent any stacked underline systems and keep all items aligned */
.topbar .nav a,
.topbar .brand,
.topbar .lang a{
  text-decoration: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kill any old pseudo underline bars */
.topbar .nav a::before,
.topbar .nav a::after{
  content: none !important;
  display: none !important;
}

/* Normalize ALL header nav links (including Contact) */
.topbar .nav a{
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 4px !important;
  line-height: 1 !important;
  font-weight: 700 !important; /* keep equal weight, no shifting */
  border-radius: 0 !important;

  /* single underline system using background only (cannot double-stack) */
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 0 2px !important;
  background-image: linear-gradient(rgba(167,139,250,0), rgba(167,139,250,0)) !important;
}

/* Make sure Contact cannot be a pill from older base rules */
.topbar .nav a[href$="#contact"],
.topbar .nav a[href="#contact"],
.topbar .nav a[href*="/#contact"]{
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hover + active underline */
.topbar .nav a:hover{
  background-size: 100% 2px !important;
  background-image: linear-gradient(rgba(167,139,250,0.35), rgba(167,139,250,0.35)) !important;
}
.topbar .nav a[aria-current="page"]{
  background-size: 100% 2px !important;
  background-image: linear-gradient(rgba(167,139,250,0.85), rgba(167,139,250,0.85)) !important;
}

/* Brand + language must never get nav underline even if aria-current exists somewhere */
.topbar .brand,
.topbar .brand * ,
.topbar .lang a{
  background-size: 0 0 !important;
  background-image: none !important;
}
/* NAV_ACTIVE_ONE_FINAL_V2_END */