/* ====== Alapok ====== */
:root{
  --bg:#ffffff;
  --bg-alt:#f6faf8;
  --ink:#1b2a2a;
  --muted:#6b7a7a;
  --line:#e6efec;
  --brand:#0ea47a;
  --brand-2:#0ea5e9;
  --shadow:0 8px 30px rgba(2,13,9,.08), 0 2px 10px rgba(2,13,9,.06);
  --radius:16px;
  --max:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.65;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.9rem}
.muted{color:var(--muted)}

.container{max-width:var(--max);margin:auto;padding:0 16px}
.section{padding:42px 0}
.alt{background:var(--bg-alt)}
.narrow{max-width:860px;margin:auto}

.divider{height:36px;background:transparent}
.divider--slant{background:linear-gradient(120deg, #ffffff 0%, #f6faf8 100%)}
.divider--wave{
  background:
    radial-gradient(1500px 200px at 50% -40px, #fff 0 60%, transparent 61%) top/100% 100% no-repeat,
    linear-gradient(180deg, #fff 0%, #f6faf8 100%);
}

/* ====== Header ====== */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(8px);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.brand{font-weight:900;letter-spacing:.3px}
.menu{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.menu a{padding:8px 10px;border-radius:10px;color:#1b2a2a}
.menu a:hover{background:#f0f7f4;text-decoration:none}

.hamburger{display:none;background:none;border:0;cursor:pointer;width:38px;height:32px}
.hamburger span{display:block;height:3px;background:#0f3d33;margin:6px 0;border-radius:2px;transition:.2s}

.mobile-nav{display:none;flex-direction:column;padding:8px 16px;border-top:1px solid var(--line);background:#fff}
.mobile-nav a{padding:10px 4px}

@media (max-width:860px){
  .menu{display:none}
  .hamburger{display:block}
  .mobile-nav{display:flex}
  .mobile-nav[hidden]{display:none}
}

/* ====== Buttons ====== */
.btn{
  display:inline-block;padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:700;border:1px solid rgba(0,0,0,.05);box-shadow:var(--shadow);
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{filter:saturate(1.05);text-decoration:none}
.btn:active{transform:translateY(1px);box-shadow:0 4px 16px rgba(2,13,9,.06)}

.btn--ghost{background:#fff;color:#08382f;border:1px solid var(--line);box-shadow:0 4px 14px rgba(2,13,9,.04)}
.btn--ghost:hover{background:#f4fbf8}

/* ====== Hero ====== */
.hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(1200px 400px at 50% -10%, #ffffff 0%, #f3f7f6 45%, #eef8fb 100%);
}
.hero__grid{display:grid;gap:16px;align-items:center}
.hero__copy .eyebrow{color:#0a7c60;font-weight:700;margin:0 0 6px}
.hero h1{font-size:clamp(28px,6vw,44px);line-height:1.1;margin:.2rem 0}
.hero__shape{
  min-height:220px;border-radius:24px;background:
    conic-gradient(from 210deg at 50% 50%, rgba(14,164,122,.15), rgba(14,165,233,.15));
  box-shadow:var(--shadow);
}

/* ====== Cards / Lists ====== */
.cards{display:grid;gap:14px}
@media (min-width:900px){ .cards{grid-template-columns:repeat(4,1fr)} }
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 6px 18px rgba(2,13,9,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#dce9e3}

.benefits{padding-left:18px;margin:12px 0}
.benefits li{margin:.3rem 0}

/* ====== Steps ====== */
.steps{margin:0;padding-left:20px}
.steps li{margin:.4rem 0}

/* ====== FAQ ====== */
.faq{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;box-shadow:0 4px 14px rgba(2,13,9,.05);
}
.faq summary{cursor:pointer;font-weight:700;color:#0b5a45}
.faq[open]{box-shadow:var(--shadow);border-color:#dce9e3}

/* ====== Slider ====== */
.slider{position:relative}
.slider__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  border-radius:var(--radius);outline:1px solid var(--line);
}
.slider__track::-webkit-scrollbar{display:none}
.slide{
  scroll-snap-align:start;background:#fff;border-right:1px solid var(--line);
  padding:18px;border-radius:var(--radius);min-height:360px;box-shadow:0 8px 20px rgba(2,13,9,.05);
  display:flex;flex-direction:column;gap:10px;
}
.slide h3{margin:.2rem 0}
.slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);
  display:grid;place-items:center;font-size:22px;cursor:pointer
}
.slider__nav--prev{left:-6px}
.slider__nav--next{right:-6px}
@media (max-width:540px){
  .slider__nav--prev{left:4px} .slider__nav--next{right:4px}
}

/* ====== Form ====== */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(2,13,9,.05);padding:16px}
.form__grid{display:grid;gap:12px}
.form__grid .full{grid-column:1/-1}
.form input, .form textarea{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff
}
.form__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ====== Footer ====== */
.site-footer{border-top:1px solid var(--line);background:#f3f9f7;padding:22px 0;text-align:center;color:var(--muted)}

/* ====== Animációk ====== */
.fade{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.fade.visible{opacity:1;transform:none}
.site-header.scrolled{box-shadow:0 8px 24px rgba(2,13,9,.06)}
@media (prefers-reduced-motion:reduce){
  .fade,.fade.visible{opacity:1;transform:none;transition:none}
}