@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* Közös arculat és alapkomponensek */

:root {
  --bg-2: #ffffff; --section-alt: rgba(17,24,39,.03); --ring: rgba(193,59,30,.22); --bg: #f8f9fb;
  --card: #ffffff; --text: #111827; --muted: #566174; --border: #e1e5eb;
  --shadow: 0 8px 28px rgba(17,24,39,.055); --radius: 18px; --radius-sm: 12px; --max: 1120px;
  --pad: 18px; --accent: #c13b1e; --accent-hover: #a93219; --space-1: 8px; --space-2: 12px;
  --space-3: 18px; --space-4: 24px; --space-section: clamp(44px, 6vw, 72px);
  --font-heading: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%; margin: 0px; font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  -webkit-text-size-adjust: 100%; color: var(--text); background: var(--bg);
}

a {
  color: inherit; text-decoration: none;
}

img {
  max-width: 100%; display: block;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px;
  min-height: 44px; line-height: 1.35; text-align: center; border-radius: 12px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.btn-primary {
  background: var(--accent); color: rgb(255, 255, 255);
  box-shadow: rgba(193, 59, 30, 0.18) 0px 12px 20px;
}

.btn-secondary {
  background: rgb(255, 255, 255); border-color: var(--border); color: var(--text);
}

.label {
  display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px;
}

.input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit;
  line-height: inherit; font-family: inherit; font-optical-sizing: inherit;
  font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit;
  font-variation-settings: inherit; font-language-override: inherit; font-size: 16px;
  min-height: 44px; background: rgb(255, 255, 255);
}

textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit;
  line-height: inherit; font-optical-sizing: inherit; font-size-adjust: inherit;
  font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit;
  font-language-override: inherit; font-size: 16px; background: rgb(255, 255, 255);
  min-height: 120px; resize: vertical; font-family: var(--font-body);
}

.input:focus,
textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}

.form {
  display: grid; gap: 12px;
}

.alert {
  padding: 10px 12px; border-radius: 12px; font-size: 14px;
}

.alert--error {
  background: rgb(255, 242, 242); border: 1px solid rgb(255, 214, 214); color: rgb(176, 0, 32);
}

.alert--ok {
  background: rgb(240, 255, 244); border: 1px solid rgb(183, 247, 198); color: rgb(6, 95, 70);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1 {
  font-family: var(--font-heading); font-weight: 800; line-height: 1.22; letter-spacing: -0.025em;
}

button {
  font-family: var(--font-body); font-size: inherit;
}

input,
select {
  font-family: var(--font-body);
}

.muted {
  color: var(--muted); font-size: 0.9375rem;
}

.grid {
  display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: var(--space-3);
}

.grid > *,
.grid-2 > * {
  min-width: 0px;
}

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--space-3);
}

.card h3 {
  margin: 0px 0px 8px; font-size: 18px;
}

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

.cards-3 > * {
  grid-column: span 4;
}

.cards-4 > * {
  grid-column: span 3;
}

.hr {
  height: 1px; background: var(--border); margin: 18px 0px;
}

.ico {
  display: inline-block; vertical-align: middle; flex-shrink: 0;
}

.btn .ico {
  margin: 0px;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary:hover {
  background: rgb(243, 245, 248); border-color: rgb(201, 208, 218);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

.btn:disabled,
button:disabled {
  opacity: 0.6; cursor: not-allowed;
}

/* (max-width: 920px) */
@media (max-width: 920px) {
  .cards-3 > *,
  .cards-4 > * {
    grid-column: span 6;
  }

}

/* (max-width: 620px) */
@media (max-width: 620px) {
  .cards-3 > *,
  .cards-4 > * {
    grid-column: span 12;
  }

}

/* (prefers-reduced-motion: reduce) */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
  }

}