:root{
  --bg:#ffffff;
  --soft:#f6f7f8;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  /* Credisol zöld */
  --accent:#6aa635;
}


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

a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:16px;
}
.brand{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.nav a{font-size:14px;text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--text)}
.nav__cta{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text)}

.hero{padding:64px 0 40px}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.lead{font-size:18px;color:var(--muted);max-width:720px;margin:0 0 18px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.section{padding:56px 0}
.section--soft{background:var(--soft)}
h2{
  color:var(--accent);
  letter-spacing:0.2px;
  font-weight:700;
}

.subhead{color:var(--muted);margin:0 0 18px}

.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 840px){ .grid--2{grid-template-columns:1fr} .hero h1{font-size:34px} }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width: 840px){ .stats{grid-template-columns:1fr} }
.stat{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
}
.stat__value{font-size:28px;font-weight:800}
.stat__label{color:var(--muted);margin-top:6px}

.contactbox{
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  background:#fff;
  color:var(--muted);
}
.contactbox strong{color:var(--text)}

.form{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  display:flex;flex-direction:column;gap:12px;
}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
input, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font:inherit;
  color:var(--text);
}
.checkbox{flex-direction:row;align-items:center;gap:10px}
.checkbox input{width:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;
  border:1px solid var(--accent);
  background:var(--accent);color:#fff;
  text-decoration:none;font-weight:600;
}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn:hover{filter:brightness(.97)}

.footer{
  border-top:1px solid var(--border);
  padding:22px 0;
}
.footer__inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14px}

.bullets{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}
.bullets li{margin:6px 0}

/* FAQ accordion */
.faq{margin-top:14px}
.faq-item{
  border:1px solid var(--border);
  border-radius:0;
  background:#fff;
  margin:10px 0;
}
.faq-item > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  color:var(--text);
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-q{font-size:16px;color:var(--text)}
.faq-a{
  padding:0 16px 14px 16px;
  color:var(--muted);
}
.faq-a p{margin:10px 0}

.faq-icon{
  width:22px;height:22px;flex:0 0 22px;
  position:relative;
  opacity:.85;
}
.faq-icon::before, .faq-icon::after{
  content:"";
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--muted);
  border-radius:2px;
}
.faq-icon::before{width:14px;height:2px}
.faq-icon::after{width:2px;height:14px}
.faq-item[open] .faq-icon::after{height:0} /* + -> - */

.faq-footer{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
}
.contact-divider{
  height:1px;
  background:var(--border);
  margin:12px 0;
}

.small-muted{
  color:var(--muted);
  font-size:14px;
}

/* Zöld tagoló sávok */
.section--band{
  background: #f4f7f2; /* nagyon világos, zöldes-szürke */
  border-top: 1px solid #e3eadb;
  border-bottom: 1px solid #e3eadb;
}

.section--band-strong{
  background: var(--accent);
  color: #fff;
}

.section--band-strong h2,
.section--band-strong .subhead,
.section--band-strong .lead{
  color:#fff;
}

.section--band-strong a{color:#fff}

/* Ikonos szolgáltatás blokk */
.services{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:22px;
  margin-top: 18px;
}
@media (max-width:840px){ .services{grid-template-columns:1fr} }

.service{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.service .icon{
  width:48px;height:48px;
  border:1px solid rgba(106,166,53,.35);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  background: rgba(106,166,53,.08);
}

.service svg{
  width:26px;height:26px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service h3{
  margin:0 0 6px;
  font-size:18px;
  color: var(--accent);
}

.service p{
  margin:0;
  color: var(--muted);
  line-height: 1.6;
}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:18px}
@media (max-width:840px){.services{grid-template-columns:1fr}}
.service{display:flex;gap:14px;align-items:flex-start}
.service .icon{width:48px;height:48px;border:1px solid rgba(106,166,53,.35);border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 48px;background:rgba(106,166,53,.08)}
.service svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service h3{margin:0 0 6px;font-size:18px;color:var(--accent)}
.service p{margin:0;color:var(--muted);line-height:1.6}

.section--band{
  background: #f4f7f2; /* nagyon világos, zöldes-szürke */
  border-top: 1px solid #e3eadb;
  border-bottom: 1px solid #e3eadb;
}

.services{
  margin-top: 28px;
}
.service{
  margin-bottom: 6px;
}

/* Szolgáltatás kis címek */
.service h3{
  color: #111827;   /* fekete */
  font-weight: 700; /* félkövér */
}

/* Rólunk – 2 nagy blokk kép + szöveg */
.about-split{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:28px;
  align-items:center;
  margin-top: 18px;
}
.about-split--reverse{
  grid-template-columns: 1fr 1.05fr;
}
@media (max-width: 920px){
  .about-split,
  .about-split--reverse{
    grid-template-columns: 1fr;
  }
}

.about-media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background:#fff;
}

.about-media img{
  width:100%;
  height:auto;
  display:block;
}

.about-copy h3{
  margin:0 0 10px;
  font-size: 28px;
  line-height: 1.15;
  color: #111827;   /* fekete */
  font-weight: 700; /* félkövér */
}

.about-copy p{
  margin: 10px 0;
  color: var(--muted);
  line-height: 1.7;
}

.about-copy .lead{
  margin-top: 0;
  font-size: 16px;
}

.about-copy ul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.about-copy li{ margin: 6px 0; }

.about-cta{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Képek méretezése a Rólunk blokkokban */
.about-media{
  max-height: 360px;          /* itt állítható: 320–420 jó tartomány */
}

.about-media img{
  width: 100%;
  height: 360px;              /* legyen fix magasság, hogy szép legyen */
  object-fit: cover;          /* kitölti a dobozt, nem torzul */
  object-position: center;    /* középre igazít */
}

/* Mobilon legyen kisebb */
@media (max-width: 920px){
  .about-media{ max-height: 260px; }
  .about-media img{ height: 260px; }
}
.about-media img{
  object-position: top;  /* vagy 50% 30% */
}

.about-split{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:28px;
  align-items:center;
}

.about-split--reverse{
  grid-template-columns: 1fr 1.05fr;
}

.about-media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background:#fff;
}

.about-media img{
  width:100%;
  height: 340px;
  object-fit: cover;
  display:block;
}

@media (max-width: 920px){
  .about-split,
  .about-split--reverse{
    grid-template-columns: 1fr;
  }
  .about-media img{
    height: 240px;
  }
  .about-cta{
    justify-content:flex-start;
  }
}
/* === TYPO: egységesítés a Rólunk szekcióban === */
#rolunk h2{
  font-size: 30px;       /* „Rólunk” legyen erősebb */
  line-height: 1.15;
}

#rolunk .subhead{
  font-size: 17px;       /* ne legyen túl kicsi */
  line-height: 1.7;
  max-width: 900px;
}

#rolunk .about-copy h3{
  font-size: 30px;       /* egységes, de nem túl óriási */
  line-height: 1.2;
  font-weight: 800;
  color: #111827;        /* fekete */
  margin: 0 0 12px;
}

#rolunk .about-copy p,
#rolunk .about-copy li{
  font-size: 16px;       /* törzsszöveg egységes */
  line-height: 1.75;
  color: var(--muted);
}

#rolunk .about-copy .lead{
  font-size: 16px;       /* ne ugorjon el a lead */
  line-height: 1.75;
}
/* 2. kép: ne vágja le, inkább férjen bele */
.about-img--contain{
  object-fit: contain !important;
  background: #fff;      /* a maradék terület fehér */
}
.about-media img{
  height: 320px;         /* kicsit kisebb */
}
@media (max-width: 920px){
  .about-media img{ height: 240px; }
}
.about-media img{
  height: 320px;         /* kicsit kisebb */
}
@media (max-width: 920px){
  .about-media img{ height: 240px; }
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}

.brand__logo{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
}
/* === GLOBAL FONT EGYSÉGESÍTÉS === */
html, body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

*{
  font-family: inherit;
}
/* 1. blokk címe (nagyobb) */
#rolunk .about-split:first-of-type .about-copy h3{
  font-size: 30px;
}

/* 2. blokk címe (kisebb) */
#rolunk .about-split--reverse .about-copy h3{
  font-size: 26px;
}
#rolunk .about-copy h3{
  font-weight: 700;
}
#rolunk .about-copy p,
#rolunk .about-copy li{
  line-height: 1.8;
}
/* 2. kép: TÖLTSE KI a dobozt */
.about-img--fill{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* kitölti */
  object-position: center; /* fókusz közép */
  display: block;
}
.about-media{
  height: 340px;     /* desktop */
}

@media (max-width: 920px){
  .about-media{
    height: 240px;   /* mobil */
  }
}
::placeholder{
  color: #9ca3af;
}
.form-success{
  display:none;
  margin-top:24px;
  padding:20px 24px;
  border-radius:16px;
  background:#f0f7ec;
  border:1px solid #cfe5bf;
}

.form-success h3{
  margin:0 0 6px;
  font-size:18px;
  color:#111827;
}

.form-success p{
  margin:0;
  color:#374151;
}

/* ha a #form-success az URL-ben van */
:target.form-success{
  display:block;
}
.hero-title{
  font-size:44px;
  line-height:1.15;
  font-weight:800;
}

.hero-brand{
  display:block;
  font-size:56px;     /* EZ A NAGY */
  color:var(--accent);
  letter-spacing:-0.5px;
}

/* Mobil */
@media (max-width: 768px){
  .hero-title{
    font-size:32px;
  }
  .hero-brand{
    font-size:40px;
  }
}
/* NAVBAR BRAND – Credisol felirat */
.brand{
  font-size:20px;          /* nagyobb */
  font-weight:800;
  letter-spacing:1.2px;    /* CAPS-hez kell */
  text-transform:uppercase;
  color:#111827;
}
/* FOOTER RENDEZÉS */
.footer{
  margin-top:40px;
  border-top:1px solid #e5e7eb;
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  font-size:14px;
  color:#6b7280;
}

.footer__links{
  display:flex;
  align-items:center;
  gap:8px;
}
    text-align:center;
  }
}


.footer__links a{
  color:#6b7280;
  text-decoration:none;
}

.footer__links a:hover{
  text-decoration:underline;
}

/* Mobilon egymás alá */
@media (max-width: 640px){
  .footer__inner{
    flex-direction:column;
    gap:8px;
/* ===== NAVBAR BRAND FIX (VÉGÉRE TEDD) ===== */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand__logo{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
}

.brand__text{
  font-size:20px;
  font-weight:500;        /* nem túl vastag */
  letter-spacing:2px;     /* CAPS-hez szép */
  text-transform:uppercase;
  color:#111827;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;

  text-decoration:none;   /* EZ A LÉNYEG */
  font-size:20px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#111827;
}
.brand{
  text-decoration: none;
}