/* Ajánlat Stúdió – a módszertani oldal (modszertan.php) kiegészítő stílusa; a keret és a tipográfia a landing.css-ből jön. */
.md-hero { max-width: 1100px; margin: 0 auto; padding: clamp(56px, 10vh, 120px) max(var(--gut-r), 4vw) 0 max(var(--gut), 4vw); }
.md-hero h1 { max-width: 16ch; }
.md-lead { margin: 22px 0 0; max-width: 62ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--color-text-muted); }
.md-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 5vh, 48px); }
.md-stat { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: var(--lp-shadow); }
.md-stat b { font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.03em; color: var(--brand-purple); font-variant-numeric: tabular-nums; }
.md-stat span { font-size: 15px; font-weight: 600; color: var(--color-text-muted); }

.md-sec { max-width: 1100px; }
.md-h { max-width: 780px; margin-bottom: clamp(22px, 4vh, 40px); }
.md-sub { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--color-text-muted); }
.md-sub b { color: var(--color-text); }
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.md-card { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 20px; background: #fff; box-shadow: var(--lp-shadow); }
.md-card h3 { font-size: 22px; letter-spacing: -.02em; }
.md-src { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--brand-purple); }
.md-src span { font-weight: 600; color: var(--color-text-muted); }
.md-src b { font-variant-numeric: tabular-nums; }
.md-med { display: flex; flex-direction: column; margin: 18px 0 0; }
.md-med-v b { font-family: var(--font-head); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.03em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.md-per { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.md-bar { position: relative; height: 12px; margin: 22px 0 12px; border-radius: 99px; background: #EFE9F5; }
.md-band { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #8E5FB4, var(--brand-purple)); transform-origin: left center; }
.md-mark { position: absolute; top: -5px; left: var(--m); width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--brand-orange); box-shadow: 0 0 0 3px #fff; }
.md-range { margin: 0; font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.md-note { max-width: 780px; margin-top: 20px; }
.md-note p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
.md-note b { color: var(--color-text); }

.md-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.md-steps li { position: relative; padding: 24px 24px 22px 24px; border-radius: 20px; background: #fff; box-shadow: var(--lp-shadow); }
.md-steps h3 { margin: 12px 0 10px; font-size: 22px; letter-spacing: -.02em; }
.md-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }
.md-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-purple); color: #fff; font-weight: 800; font-size: 15px; }

.md-end { padding-top: clamp(56px, 10vh, 110px); }
.md-firka { width: min(300px, 64vw); height: auto; }

/* mozgás: csak ha a böngésző engedi (a head-beli szkript teszi a html-re az md-anim osztályt); nélküle minden a végső állapotban látszik */
.md-anim [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.md-anim [data-reveal].in { opacity: 1; transform: none; }
.md-anim .md-card .md-band { transform: scaleX(0); transition: transform 1s cubic-bezier(.22, 1, .36, 1) .25s; }
.md-anim .md-card .md-mark { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease .95s, transform .5s cubic-bezier(.22, 1, .36, 1) .95s; }
.md-anim .md-card.in .md-band { transform: none; }
.md-anim .md-card.in .md-mark { opacity: 1; transform: none; }
.md-anim .md-grid .md-card:nth-child(2), .md-anim .md-steps li:nth-child(2), .md-anim .md-stats .md-stat:nth-child(2) { transition-delay: .08s; }
.md-anim .md-grid .md-card:nth-child(3), .md-anim .md-steps li:nth-child(3), .md-anim .md-stats .md-stat:nth-child(3) { transition-delay: .16s; }

@media (max-width: 900px) {
  .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .md-stats { grid-template-columns: minmax(0, 1fr); }
  .md-grid { grid-template-columns: minmax(0, 1fr); }
  .md-stat { flex-direction: row; align-items: baseline; gap: 14px; }
}