:root{
  --green:#a9df38; --green-dark:#73b800; --ink:#111820; --muted:#5c6468;
  --line:#e7ebe3; --soft:#f5f8f1; --white:#fff; --dark:#10181b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand img{width:155px;height:auto;object-fit:contain}
nav{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:700}
nav a{padding:31px 0;position:relative}
nav a.active,nav a:hover{color:var(--green-dark)}
nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:20px;height:3px;border-radius:3px;background:var(--green)}
.menu-toggle{display:none;border:0;background:none;font-size:28px}
.hero{min-height:680px;position:relative;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,17,.86) 0%,rgba(8,14,17,.56) 45%,rgba(8,14,17,.08) 85%)}
.hero-content{position:relative;z-index:2;padding:90px 0}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;margin:0 0 12px;color:#dfe9df}
.eyebrow.green{color:var(--green-dark)}
h1{font-size:clamp(52px,7vw,94px);line-height:.94;letter-spacing:-.055em;margin:0 0 26px;font-weight:900}
h1 span,h2 span{color:var(--green)}
.lead{font-size:20px;line-height:1.4;font-weight:600;max-width:520px}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:18px;padding:15px 24px;border-radius:999px;font-weight:800;font-size:14px;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.btn-primary{background:var(--green);color:#101810}
.btn-light{border:2px solid #fff;color:#fff}
.btn-outline{border:2px solid var(--green-dark);color:#3f7000}
.hero-tag{position:absolute;right:7%;bottom:14%;font-size:24px;font-weight:900;font-style:italic;line-height:1.1;transform:rotate(-4deg);text-align:center}
.section{padding:92px 0}
.section-head{margin-bottom:42px}
.section-head.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.section-head h2,.contact h2,.mission h2{font-size:clamp(34px,4vw,52px);line-height:1.03;letter-spacing:-.045em;margin:0 0 14px}
.section-head p{color:var(--muted);max-width:760px}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.service-card{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 16px 50px rgba(23,39,30,.06)}
.service-copy{padding:34px}
.service-icon{font-size:48px;color:var(--green-dark);font-weight:900;line-height:1;margin-bottom:15px}
.service-card h3{font-size:29px;margin:0 0 0;letter-spacing:-.035em}
.service-card strong{font-size:15px}
.service-card p{color:var(--muted);font-size:14px}
.service-media{min-height:300px}
.service-media img{width:100%;height:100%;object-fit:cover}
.text-link{display:inline-block;margin-top:12px;color:var(--green-dark);font-weight:800;font-size:13px}
.references{background:var(--soft)}
.split{display:flex;align-items:end;justify-content:space-between;gap:30px}
.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px}
.ref-card{margin:0}
.ref-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;box-shadow:0 7px 20px rgba(0,0,0,.08)}
.ref-card h3{font-size:16px;margin:12px 0 2px}
.ref-card span{font-size:13px;color:var(--muted)}
.mission{position:relative;min-height:560px;display:flex;align-items:center;color:#fff;overflow:hidden}
.mission-image{position:absolute;inset:0}
.mission-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.mission-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,14,.9),rgba(6,12,14,.56) 48%,rgba(6,12,14,.15))}
.mission-content{position:relative;z-index:2;max-width:650px;padding:90px 0}
.mission-content p:not(.eyebrow){max-width:570px;color:#eef2ef}
.strengths{padding:55px 0;background:#fff}
.strength-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.strength{display:flex;gap:16px;align-items:flex-start}
.round-icon{flex:0 0 58px;height:58px;border:2px solid var(--green-dark);border-radius:50%;display:grid;place-items:center;color:var(--green-dark);font-size:20px;font-weight:900}
.strength h3{font-size:15px;margin:4px 0}
.strength p{font-size:12px;color:var(--muted);margin:0}
.contact{background:#f4f7f1}
.contact-box{background:#fff;border-radius:28px;padding:58px;display:grid;grid-template-columns:1.25fr .75fr;gap:60px;box-shadow:0 20px 70px rgba(20,40,25,.08)}
.contact h2{font-size:48px}
.contact-details{display:grid;gap:15px;align-content:center}
.contact-row{display:flex;gap:15px;align-items:center;padding:17px;border-radius:14px;background:#f7f9f5}
.contact-row>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--green);font-weight:900}
.contact-row small{display:block;color:var(--muted);font-size:11px}
.contact-row b{font-size:13px}
.footer{background:var(--dark);color:#fff;border-top:4px solid var(--green)}
.footer-main{padding:45px 0;display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:30px;align-items:center;font-size:13px;color:#d7dfdc}
.footer-logo{width:170px;max-height:70px;object-fit:contain}
.footer-main b{color:#fff}
.footer-bottom{text-align:center;padding:18px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#aeb9b4}
@media(max-width:900px){
  nav{display:none;position:absolute;left:20px;right:20px;top:82px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.12);flex-direction:column;gap:0}
  /* A lenyíló mobilmenü karakterei mindig feketék, témától függetlenül. */
  nav.open a, nav.open a:hover, nav.open a.active{color:#000 !important;}
  nav.open a.active:after{background:#000 !important;}
  .menu-toggle{color:#000 !important;}
  nav.open{display:flex} nav a{padding:14px 16px;width:100%} nav a.active:after{display:none}
  .menu-toggle{display:block}
  .hero{min-height:610px}.hero-tag{display:none}
  .service-grid,.contact-box{grid-template-columns:1fr}
  .reference-grid{grid-template-columns:repeat(2,1fr)}
  .strength-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,1180px)}
  .nav{height:72px}.brand img{width:135px}
  .hero{min-height:610px}.hero-content{padding:70px 0}.hero-overlay{background:linear-gradient(90deg,rgba(8,14,17,.84),rgba(8,14,17,.32))}
  h1{font-size:55px}.lead{font-size:17px}
  .section{padding:65px 0}.section-head h2,.contact h2,.mission h2{font-size:38px}
  .service-card{grid-template-columns:1fr}.service-media{height:220px;min-height:0}.service-copy{padding:28px}
  .split{display:block}.split .btn{margin-top:20px}
  .reference-grid{grid-template-columns:1fr}.strength-grid{grid-template-columns:1fr}
  .contact-box{padding:30px 24px;gap:30px}.contact h2{font-size:38px}
  .footer-main{grid-template-columns:1fr;gap:20px}
}

/* --- Logók --- */
.brand-duo{display:flex;align-items:center;gap:12px;min-width:290px}
.brand-duo img{object-fit:contain}
.brand-duo .logo-main{width:150px;height:68px}
.brand-duo .logo-secondary{width:118px;height:62px}
.footer-logos{display:flex;align-items:center;gap:14px}
.footer-logo{object-fit:contain}
.footer-logo-new{width:125px;height:70px}
.footer-logo-old{width:115px;height:62px}

/* --- Kattintható referencia-galéria --- */
.gallery-trigger{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;overflow:hidden;border-radius:16px}
.gallery-trigger img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .28s ease}
.gallery-trigger:hover img{transform:scale(1.035)}
.zoom-badge{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:#222;font-size:23px;font-weight:900;box-shadow:0 5px 18px rgba(0,0,0,.18)}
.ref-card:focus-within .gallery-trigger{outline:3px solid var(--green);outline-offset:3px}

/* --- Lightbox --- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,9,11,.94);display:none;align-items:center;justify-content:center;padding:34px 76px}
.lightbox.open{display:flex}
.lightbox-figure{margin:0;max-width:calc(100vw - 150px);max-height:calc(100vh - 70px);display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox-figure img{display:block;max-width:calc(100vw - 150px);max-height:calc(100vh - 120px);width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.4)}
.lightbox-figure figcaption{color:#fff;font-size:14px;font-weight:700;text-align:center}
.lightbox-close,.lightbox-prev,.lightbox-next{position:fixed;border:0;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:34px;line-height:1;display:grid;place-items:center}
.lightbox-close{right:24px;top:20px;font-size:38px}.lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}.lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:var(--green);color:#111}
@media(max-width:900px){
  .brand-duo{min-width:0;gap:7px}.brand-duo .logo-main{width:105px;height:58px}.brand-duo .logo-secondary{width:82px;height:52px}
  .footer-logos{align-items:flex-start}.lightbox{padding:70px 14px 30px}.lightbox-figure{max-width:100%;max-height:100%}
  .lightbox-figure img{max-width:100%;max-height:calc(100vh - 150px)}.lightbox-prev{left:8px}.lightbox-next{right:8px}.lightbox-close{right:10px;top:10px}
}

/* Új, kettébontott fejléc-logók */
.brand-duo{display:flex;align-items:center;gap:14px;min-width:330px}
.brand-duo .logo-bicycle{width:112px;height:70px;object-fit:contain}
.brand-duo .logo-wordmark{width:145px;height:68px;object-fit:contain}
.footer-logos{display:flex;align-items:center;gap:16px}
.footer-logo-bicycle{width:100px;height:62px;object-fit:contain}
.footer-logo-wordmark{width:135px;height:62px;object-fit:contain}
@media(max-width:900px){
  .brand-duo{min-width:0;gap:7px}
  .brand-duo .logo-bicycle{width:72px;height:54px}
  .brand-duo .logo-wordmark{width:100px;height:52px}
}

/* --- Sötét, egységes oldalháttér --- */
:root{
  --page:#191e21;
  --page-2:#20262a;
  --card:#252c30;
  --card-2:#2b3337;
  --line:#3a4348;
  --ink:#f2f5f3;
  --muted:#b8c0bd;
}
body{background:var(--page);color:var(--ink)}
.site-header{background:rgba(25,30,33,.96);border-bottom-color:rgba(255,255,255,.09)}
nav a{color:#e9eeeb}
nav a.active,nav a:hover{color:var(--green)}
nav a.active:after{background:var(--green)}
.menu-toggle{color:#fff}
.services,.strengths{background:var(--page)}
.service-card{background:var(--card);border-color:var(--line);box-shadow:0 16px 50px rgba(0,0,0,.22)}
.service-card p,.section-head p,.ref-card span,.strength p{color:var(--muted)}
.references{background:var(--page-2)}
.references .section-head h2,.references .section-head p{color:var(--ink)}
.mission{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.strength{color:var(--ink)}
.contact{background:var(--page-2)}
.contact-box{background:var(--card);box-shadow:0 20px 70px rgba(0,0,0,.25)}
.contact-row{background:var(--card-2)}
.contact-row small{color:#aeb8b4}
.footer{background:#0d1113}
.footer-logo-white{width:260px;height:auto;object-fit:contain}
.footer-main{color:#cbd3d0}
.footer-bottom{color:#89938f;border-top-color:rgba(255,255,255,.08)}
.text-link{color:var(--green)}
.btn-outline{color:var(--green);border-color:var(--green)}
@media(max-width:900px){.footer-logo-white{width:220px}}

/* --- Világosszürke, szakrajz-jellegű háttér --- */
:root{
  --page:#e4e7e8;
  --page-2:#dfe3e4;
  --card:#eef0f0;
  --card-2:#e8ebeb;
  --line:#b9c1c4;
  --ink:#172024;
  --muted:#59656a;
}
body{
  background-color:var(--page);
  color:var(--ink);
  background-image:
    linear-gradient(rgba(75,88,94,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,88,94,.075) 1px, transparent 1px),
    linear-gradient(rgba(75,88,94,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,88,94,.035) 1px, transparent 1px);
  background-size:80px 80px,80px 80px,20px 20px,20px 20px;
  background-attachment:fixed;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  background:
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(54,67,73,.08) 120px),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(54,67,73,.08) 120px);
}
.site-header{
  background:rgba(228,231,232,.94);
  border-bottom:1px solid #aeb7ba;
}
nav a{color:#253136}
nav a.active,nav a:hover{color:#6ea900}
.services,.strengths{background:rgba(228,231,232,.86)}
.references{background:rgba(218,222,223,.88)}
.service-card{
  background:rgba(241,243,243,.95);
  border-color:#bcc5c8;
  box-shadow:0 14px 45px rgba(40,53,58,.10);
}
.service-card p,.section-head p,.ref-card span,.strength p{color:var(--muted)}
.contact{background:rgba(215,220,221,.9)}
.contact-box{
  background:rgba(239,242,242,.97);
  box-shadow:0 20px 65px rgba(35,49,55,.12);
}
.contact-row{background:#e5e9e9}
.footer{background:#171d20}
.footer-main{color:#d9dfdd}
.footer-logo-white{width:260px;height:auto;object-fit:contain}
.footer-bottom{color:#aeb8b5}
.round-icon{background:rgba(255,255,255,.25)}
/* Finom műszaki jelölések a szekciókban */
.section-head,.service-card,.reference-grid,.strength-grid,.contact-box{position:relative}
.section-head:before,.contact-box:before{
  content:"";
  position:absolute;
  top:-18px;
  left:0;
  width:90px;
  height:1px;
  background:#8f9a9e;
}
.section-head:after,.contact-box:after{
  content:"";
  position:absolute;
  top:-22px;
  left:0;
  width:7px;
  height:7px;
  border:1px solid #8f9a9e;
  background:var(--page);
}
.ref-card img,.service-media img{
  border:1px solid rgba(75,88,94,.28);
}

/* --- Interaktív színcsúszka --- */
.theme-control{
  background:rgba(20,25,28,.96);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:12px 0;
}
.theme-control-inner{
  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
}
.theme-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  color:#d7ddda;
}
#theme-slider{
  flex:1;
  height:4px;
  accent-color:var(--green);
  cursor:pointer;
}
.theme-current{
  min-width:115px;
  text-align:right;
  color:var(--green);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

/* --- Szolgáltatási ikon + generált mini illusztráció --- */
.service-icon-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:86px;
  margin-bottom:12px;
}
.service-icon-row .service-icon{
  flex:0 0 72px;
  width:72px;
  height:72px;
  margin:0;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(169,223,56,.10);
  color:var(--green);
  font-size:43px;
}
.service-mini-visual{
  width:145px;
  height:78px;
  object-fit:cover;
  object-position:center top;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 7px 20px rgba(0,0,0,.14);
}
@media(max-width:620px){
  .theme-control-inner{gap:8px}
  .theme-current{display:none}
  .service-mini-visual{width:120px;height:70px}
}

/* A szolgáltatás-illusztrációk teljes képként, vágás nélkül jelenjenek meg. */
.service-icon-row{
  justify-content:flex-start;
  min-height:105px;
}
.service-mini-visual{
  width:230px;
  height:105px;
  object-fit:contain;
  object-position:center;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
}
@media(max-width:620px){
  .service-mini-visual{width:190px;height:95px}
}

/* A csúszka 100%-nál valóban teljesen fekete hátteret adjon. */
.black-mode,
.black-mode body{background:#000 !important}
body.black-mode{background-image:none !important}
body.black-mode:before{display:none !important}
body.black-mode .site-header,
body.black-mode .theme-control,
body.black-mode .services,
body.black-mode .strengths,
body.black-mode .references,
body.black-mode .contact,
body.black-mode .contact-box{
  background:#000 !important;
}
body.black-mode .service-card{
  background:#111 !important;
  border-color:#292929 !important;
}
body.black-mode .contact-row{
  background:#111 !important;
}
body.black-mode .footer{
  background:#000 !important;
}

/* Legújabb feltöltött SY-METRIC logó az oldal alján */
.footer-logo-white{
  width:260px;
  height:auto;
  object-fit:contain;
  display:block;
}

/* --- Világos / sötét nézet + hang vezérlők --- */
.site-controls{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  order:2;
}
.header-control{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(70,80,84,.32);
  border-radius:50%;
  background:rgba(255,255,255,.22);
  color:currentColor;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}
.header-control:hover{
  border-color:var(--green);
  color:var(--green);
  transform:translateY(-1px);
}
.header-control .icon{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-moon{display:none}
body.dark-mode .icon-sun{display:none}
body.dark-mode .icon-moon{display:block}
.sound-off-mark{
  position:absolute;
  width:23px;
  height:2px;
  background:currentColor;
  transform:rotate(-45deg);
  opacity:0;
}
.header-control{position:relative}
body.music-off .sound-off-mark{opacity:1}
body.music-off .sound-wave{display:none}

/* LIGHT: dark gray background + black typography */
body.light-mode{
  background-color:#3d4245;
  color:#111619;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:80px 80px;
}
body.light-mode .site-header{
  background:rgba(61,66,69,.96);
  border-bottom-color:rgba(255,255,255,.16);
}
body.light-mode nav a{color:#0b0f11}
body.light-mode .hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.08))}
body.light-mode .service-card,
body.light-mode .contact-box{
  background:#d9ddde;
  color:#111619;
}
body.light-mode .references{background:#34393c}
body.light-mode .services,
body.light-mode .strengths{background:#3d4245}
body.light-mode .contact{background:#34393c}
body.light-mode .service-card p,
body.light-mode .section-head p,
body.light-mode .ref-card span,
body.light-mode .strength p{color:#222a2e}
body.light-mode .contact-row{background:#cdd2d3}
body.light-mode .header-control{border-color:rgba(255,255,255,.35);color:#111}

/* DARK: black background + gray typography */
body.dark-mode{
  background:#000;
  color:#bfc5c7;
  background-image:none !important;
}
body.dark-mode:before{display:none}
body.dark-mode .site-header,
body.dark-mode .services,
body.dark-mode .strengths,
body.dark-mode .references,
body.dark-mode .contact,
body.dark-mode .contact-box{background:#000 !important}
body.dark-mode .site-header{border-bottom-color:#262a2c}
body.dark-mode nav a,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .hero .lead,
body.dark-mode .service-card strong{color:#bfc5c7}
body.dark-mode .service-card{background:#111;border-color:#2a2d2f}
body.dark-mode .service-card p,
body.dark-mode .section-head p,
body.dark-mode .ref-card span,
body.dark-mode .strength p{color:#8e9699}
body.dark-mode .contact-row{background:#111}
body.dark-mode .header-control{border-color:#3b4042;color:#c7ccce}
body.dark-mode .footer{background:#000}
body.dark-mode .logo-wordmark,
body.dark-mode .footer-logo-white{content:url("assets/logo-symetric-footer.png")}
body.light-mode .logo-wordmark,
body.light-mode .footer-logo-white{content:url("assets/logo-symetric.png")}

@media(max-width:900px){
  .site-controls{margin-left:auto;margin-right:8px}
  .header-control{width:38px;height:38px}
}
@media(max-width:620px){
  .site-controls{gap:5px}
  .header-control{width:35px;height:35px}
  .header-control .icon{width:18px;height:18px}
}

/* --- V12 végleges nézetek és nagyobb fejléc-logók --- */
/* A fejléc két logójának mérete 50%-kal nagyobb az előző verziónál. */
.brand-duo .logo-bicycle{
  width:168px;
  height:105px;
}
.brand-duo .logo-wordmark{
  width:218px;
  height:102px;
}
.brand-duo{
  gap:18px;
  min-width:440px;
}

/* Világos nézet: világosszürke háttér + fekete betűk. */
body.light-mode{
  background:#dfe2e3;
  color:#000;
  background-image:
    linear-gradient(rgba(70,80,84,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,80,84,.055) 1px, transparent 1px);
  background-size:80px 80px;
}
body.light-mode .site-header,
body.light-mode .services,
body.light-mode .strengths{
  background:#dfe2e3;
}
body.light-mode .references,
body.light-mode .contact{
  background:#d9ddde;
}
body.light-mode .contact-box,
body.light-mode .service-card{
  background:#eef0f0;
  color:#000;
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode p,
body.light-mode li,
body.light-mode .section-head p,
body.light-mode .service-card p,
body.light-mode .strength p,
body.light-mode .ref-card span,
body.light-mode .contact-row,
body.light-mode .contact-row strong,
body.light-mode nav a{
  color:#000;
}

/* Sötét nézet: valódi fekete háttér + fehér betűk. */
body.dark-mode{
  background:#000 !important;
  color:#fff;
  background-image:none !important;
}
body.dark-mode .site-header,
body.dark-mode .services,
body.dark-mode .strengths,
body.dark-mode .references,
body.dark-mode .contact,
body.dark-mode .contact-box{
  background:#000 !important;
}
body.dark-mode .service-card,
body.dark-mode .contact-row{
  background:#111;
  border-color:#292929;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode li,
body.dark-mode .section-head p,
body.dark-mode .service-card p,
body.dark-mode .strength p,
body.dark-mode .ref-card span,
body.dark-mode .contact-row,
body.dark-mode .contact-row strong,
body.dark-mode nav a{
  color:#fff;
}
body.dark-mode .footer{
  background:#000;
}

/* Mobilon a nagyítás után is maradjon használható a fejléc. */
@media(max-width:900px){
  .brand-duo{
    min-width:0;
    gap:10px;
  }
  .brand-duo .logo-bicycle{
    width:108px;
    height:72px;
  }
  .brand-duo .logo-wordmark{
    width:145px;
    height:70px;
  }
}
@media(max-width:620px){
  .brand-duo .logo-bicycle{
    width:80px;
    height:58px;
  }
  .brand-duo .logo-wordmark{
    width:108px;
    height:56px;
  }
}

/* --- Finomított sötét nézet --- */
body.dark-mode{
  background:#25292b !important;
  color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size:80px 80px !important;
}
body.dark-mode .site-header,
body.dark-mode .services,
body.dark-mode .strengths,
body.dark-mode .references,
body.dark-mode .contact{
  background:#25292b !important;
}
body.dark-mode .site-header{
  border-bottom-color:rgba(255,255,255,.12);
}

/* A képek előtt lévő szolgáltatási szövegek maradjanak azonos színűek
   mindkét nézetben: fekete szöveg világos kártyán. */
body.dark-mode .service-card{
  background:#e7e9e9 !important;
  color:#000 !important;
  border-color:#555b5e;
}
body.dark-mode .service-card h3,
body.dark-mode .service-card p,
body.dark-mode .service-card .service-link,
body.dark-mode .service-card strong{
  color:#000 !important;
}
body.dark-mode .service-card .service-link{
  color:#79b800 !important;
}

/* --- Hero videó: lejátszás után finoman előtűnik az eredeti bannerkép --- */
.hero-video{
  position:relative;
  overflow:hidden;
}
.hero-fallback{
  opacity:0;
  transition:opacity 2.2s ease-in-out;
}
.hero-video-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:1;
  transition:opacity 2.2s ease-in-out;
  background:#111;
}
.hero-video .hero-overlay{
  z-index:1;
}
.hero-video .hero-content,
.hero-video .hero-tag{
  z-index:2;
}
.hero-video.video-finished .hero-fallback{
  opacity:1;
}
.hero-video.video-finished .hero-video-media{
  opacity:0;
  pointer-events:none;
}

/* =========================================================
   V16 finomhangolás
   ========================================================= */

/* Több levegő a fejlécben: a nagyobb logók felett és alatt is maradjon tér. */
.site-header .nav{
  min-height:118px;
  height:auto;
  padding-top:18px;
  padding-bottom:18px;
}
.brand-duo{
  align-items:center;
}
.brand-duo .logo-bicycle{
  width:168px;
  height:105px;
}
.brand-duo .logo-wordmark{
  width:218px;
  height:102px;
}

/* A két feltöltött, átlátszó hátterű illusztráció teljes egészében látszódjon.
   Nincs crop, nincs object-fit: cover. */
.service-icon-row{
  min-height:0;
  margin:0 0 14px;
  display:flex;
  align-items:center;
}
.service-mini-visual{
  display:block;
  width:285px;
  height:215px;
  max-width:100%;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.service-copy{
  display:flex;
  flex-direction:column;
}
.service-copy .service-icon-row{
  flex:0 0 auto;
}
@media(max-width:900px){
  .site-header .nav{
    min-height:92px;
    padding-top:10px;
    padding-bottom:10px;
  }
  .service-mini-visual{
    width:240px;
    height:190px;
  }
}
@media(max-width:620px){
  .site-header .nav{
    min-height:78px;
  }
  .service-mini-visual{
    width:210px;
    height:175px;
  }
}

/* A régi csúszka/slider minden maradványának eltüntetése. */
.theme-control,
#theme-slider,
.theme-label,
.theme-current{
  display:none !important;
}

/* A képre ráhelyezett szövegek színe világos nézetben se változzon.
   A banner és a "Nem csak pályát építünk / Élményt teremtünk" rész
   eredeti, képre helyezett világos tipográfiája maradjon. */
body.light-mode .hero,
body.light-mode .hero-content,
body.light-mode .hero-content h1,
body.light-mode .hero-content .lead,
body.light-mode .hero-content .eyebrow,
body.light-mode .hero-tag,
body.light-mode .mission,
body.light-mode .mission-content,
body.light-mode .mission-content h2,
body.light-mode .mission-content p,
body.light-mode .mission-content .eyebrow{
  color:#fff !important;
}
body.light-mode .hero-content h1 span,
body.light-mode .mission-content h2 span{
  color:var(--green) !important;
}
body.light-mode .mission-content p:not(.eyebrow){
  color:#eef2ef !important;
}

/* A képre helyezett CTA-k is az eredeti világos megjelenést őrizzék. */
body.light-mode .hero .btn-light{
  color:#111 !important;
}

/* --- Referenciák / Munkáink tipográfia --- */
body.light-mode .references .section-head h2,
body.light-mode .references .section-head p,
body.light-mode .references .ref-card h3,
body.light-mode .references .ref-card span{
  color:#000 !important;
}
body.dark-mode .references .section-head h2,
body.dark-mode .references .section-head p,
body.dark-mode .references .ref-card h3,
body.dark-mode .references .ref-card span{
  color:#fff !important;
}
body.light-mode .references .section-head .eyebrow{
  color:var(--green-dark) !important;
}
body.dark-mode .references .section-head .eyebrow{
  color:var(--green) !important;
}

/* --- V18: banner cím + fix Referenciák gomb + állandó fehér footer logó --- */

/* Banner főcím: csupa nagybetű, a SY-METRIC logó karakteres, tömör stílusához igazítva. */
.hero-content h1{
  font-family:"Arial Black", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.025em;
  line-height:.9;
}

/* A banner előtti / képre helyezett szövegek színe maradjon fix. */
body.light-mode .hero-content h1,
body.light-mode .hero-content .lead,
body.light-mode .hero-content .eyebrow,
body.light-mode .hero-tag,
body.light-mode .hero-actions .btn-light{
  color:#fff !important;
}
body.dark-mode .hero-content h1,
body.dark-mode .hero-content .lead,
body.dark-mode .hero-content .eyebrow,
body.dark-mode .hero-tag,
body.dark-mode .hero-actions .btn-light{
  color:#fff !important;
}

/* A "Referenciák" buborék a bannerben mindig fehér marad világos nézetben is. */
body.light-mode .hero-actions .btn-light{
  color:#fff !important;
  border-color:rgba(255,255,255,.8) !important;
  background:rgba(255,255,255,.08) !important;
}

/* Az oldal alján lévő logó szövege mindig fehér marad, nézetváltástól függetlenül. */
body.light-mode .footer-logo-white,
body.dark-mode .footer-logo-white{
  content:url("assets/logo-symetric-footer.png") !important;
}

/* V19 – "Kerékpáros Játszóterek" Comic Sans */
.hero-content h1{
  font-family:"Comic Sans MS","Comic Sans",cursive !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  line-height:1 !important;
}

/* V20 – Berlin Sans FB Demi a "Kerékpáros Játszóterek" bannercímhez */
.hero-content h1{
  font-family:"Berlin Sans FB Demi","Berlin Sans FB","Arial",sans-serif !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  line-height:1 !important;
}

/* V21 – Kapcsolat címkék világos nézetben fekete színnel */
body.light-mode .contact .contact-row strong,
body.light-mode .contact .contact-row .label,
body.light-mode .contact .contact-row dt,
body.light-mode .contact .contact-row .contact-label{
  color:#000 !important;
}

/* V22 – Kapcsolat blokk teljes szövegszíne */
body.light-mode .contact .contact-row,
body.light-mode .contact .contact-row small,
body.light-mode .contact .contact-row b,
body.light-mode .contact .contact-row div{
  color:#000 !important;
}
body.dark-mode .contact .contact-row,
body.dark-mode .contact .contact-row small,
body.dark-mode .contact .contact-row b,
body.dark-mode .contact .contact-row div{
  color:#fff !important;
}
/* A kis címkék se maradjanak halványszürkék világos nézetben. */
body.light-mode .contact-details small{
  color:#000 !important;
  opacity:1 !important;
}
body.dark-mode .contact-details small{
  color:#fff !important;
  opacity:1 !important;
}

/* V23 – nagyobb, nézetfüggetlen nagyító ikon a referenciaképeken */
.gallery-trigger .zoom-badge{
  width:64px !important;
  height:64px !important;
  right:14px !important;
  bottom:14px !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#111 !important;
  opacity:1 !important;
  font-size:32px !important;
  font-weight:900 !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 6px 20px rgba(0,0,0,.22) !important;
}
body.light-mode .gallery-trigger .zoom-badge,
body.dark-mode .gallery-trigger .zoom-badge{
  background:#fff !important;
  color:#111 !important;
}
@media(max-width:620px){
  .gallery-trigger .zoom-badge{
    width:56px !important;
    height:56px !important;
    right:10px !important;
    bottom:10px !important;
    font-size:28px !important;
  }
}

/* V24 – kisebb, fix fekete nagyító ikon */
.gallery-trigger .zoom-badge{
  width:46px !important;
  height:46px !important;
  right:12px !important;
  bottom:12px !important;
  background:#fff !important;
  color:#000 !important;
  font-size:23px !important;
  font-weight:900 !important;
  opacity:1 !important;
}
body.light-mode .gallery-trigger .zoom-badge,
body.dark-mode .gallery-trigger .zoom-badge{
  background:#fff !important;
  color:#000 !important;
}
@media(max-width:620px){
  .gallery-trigger .zoom-badge{
    width:42px !important;
    height:42px !important;
    right:10px !important;
    bottom:10px !important;
    font-size:21px !important;
  }
}

/* V25 – sötétzöld akcentus minden zöld szövegnél */
:root{
  --green:#3f7000 !important;
  --green-dark:#315800 !important;
  --lime:#3f7000 !important;
}
body.light-mode .green,
body.light-mode .accent,
body.dark-mode .green,
body.dark-mode .accent{
  color:#3f7000 !important;
}

/* Galéria nagyító: a karakter mindig fekete, nézettől függetlenül. */
.gallery-trigger .zoom-badge,
body.light-mode .gallery-trigger .zoom-badge,
body.dark-mode .gallery-trigger .zoom-badge{
  color:#000 !important;
  background:#fff !important;
  text-shadow:none !important;
  filter:none !important;
}

/* A zöld linkek és kiemelések is sötétzöldek maradjanak. */
body.light-mode a:not(.btn),
body.dark-mode a:not(.btn){
  --link-green:#3f7000;
}
body.light-mode .service-link,
body.dark-mode .service-link,
body.light-mode .eyebrow,
body.dark-mode .eyebrow{
  color:#3f7000 !important;
}

/* V26 – kiemelt világoszöld feliratok + fix fehér CTA-k */

/* Ezek a két kiemelt szöveg mindig világoszöld. */
.hero-content h1 span,
body.light-mode .hero-content h1 span,
body.dark-mode .hero-content h1 span,
.mission-content h2 span,
body.light-mode .mission-content h2 span,
body.dark-mode .mission-content h2 span{
  color:#9BE21A !important;
}

/* A kért gombfeliratok mindig fehérek. */
.hero-actions .btn-primary,
.hero-actions .btn-primary span,
body.light-mode .hero-actions .btn-primary,
body.dark-mode .hero-actions .btn-primary,
body.light-mode .hero-actions .btn-primary span,
body.dark-mode .hero-actions .btn-primary span,
#rolunk .btn-primary,
body.light-mode #rolunk .btn-primary,
body.dark-mode #rolunk .btn-primary{
  color:#fff !important;
}

/* V27 – a felhasználó által feltöltött nagyító ikon */
.gallery-trigger .zoom-badge{
  width:46px !important;
  height:46px !important;
  padding:0 !important;
  background:#fff !important;
  color:#000 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.gallery-trigger .zoom-badge img{
  display:block !important;
  width:34px !important;
  height:36px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  filter:none !important;
}
body.light-mode .gallery-trigger .zoom-badge,
body.dark-mode .gallery-trigger .zoom-badge{
  background:#fff !important;
  color:#000 !important;
}
body.light-mode .gallery-trigger .zoom-badge img,
body.dark-mode .gallery-trigger .zoom-badge img{
  filter:none !important;
}
@media(max-width:620px){
  .gallery-trigger .zoom-badge{
    width:42px !important;
    height:42px !important;
  }
  .gallery-trigger .zoom-badge img{
    width:31px !important;
    height:33px !important;
  }
}

/* V28 – a fejlécben a SY-METRIC logó marad, a kerékpáros logó a bannerbe kerül. */
.brand-duo{
  min-width:240px !important;
  width:auto !important;
  gap:0 !important;
  justify-content:flex-start !important;
}
.brand-duo .logo-wordmark{
  width:218px !important;
  height:102px !important;
  object-fit:contain !important;
}
.hero-bicycle-logo{
  display:block;
  width:min(430px, 58vw);
  height:auto;
  max-height:175px;
  object-fit:contain;
  object-position:center;
  margin:0 0 22px 0;
}
.hero-content .eyebrow{
  margin-top:0;
}
@media(max-width:900px){
  .brand-duo{
    min-width:0 !important;
  }
  .brand-duo .logo-wordmark{
    width:145px !important;
    height:70px !important;
  }
  .hero-bicycle-logo{
    width:min(330px,78vw);
    max-height:140px;
    margin-bottom:18px;
  }
}
@media(max-width:620px){
  .brand-duo .logo-wordmark{
    width:108px !important;
    height:56px !important;
  }
  .hero-bicycle-logo{
    width:min(280px,82vw);
    max-height:115px;
    margin-bottom:16px;
  }
}


/* Mobil menü: az ikon és a lenyíló menü karakterei mindig feketék. */
.menu-toggle{color:#000 !important;}
@media(max-width:900px){
  nav.open a, nav.open a:hover, nav.open a.active{color:#000 !important;}
  nav.open a.active:after{background:#000 !important;}
}

/* V32 – a misszió címsora mindig fehér, a Projektet tervez? gomb pedig a Szolgáltatásaink gomb stílusát követi. */
.mission-content > .eyebrow,
body.light-mode .mission-content > .eyebrow,
body.dark-mode .mission-content > .eyebrow{
  color:#fff !important;
}
#referenciak .btn-primary,
#referenciak .btn-primary span,
body.light-mode #referenciak .btn-primary,
body.dark-mode #referenciak .btn-primary,
body.light-mode #referenciak .btn-primary span,
body.dark-mode #referenciak .btn-primary span{
  color:#fff !important;
}