/* Képek, ikonok, illusztrációk. A style.css után töltődik be. */
:root {
  --accent: #d97706; --accent-soft: #fde9c8;
  --wall: #dfe9e6; --wall2: #c9dbd6; --floor: #b8c9c4; --water: #4aa3df;
  --ink: #1c2321; --ph: #2b3532;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #fbbf24; --accent-soft: #3a2c10;
    --wall: #22302d; --wall2: #1c2825; --floor: #182220; --water: #60b6f0;
    --ink: #e9efed; --ph: #0b100f;
  }
}

.hero { position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: 0; pointer-events: none; }
.hero::before { width: 420px; height: 420px; background: var(--brand-soft); top: -140px; right: -80px; }
.hero::after { width: 320px; height: 320px; background: var(--accent-soft); bottom: -160px; left: -100px; }
.hero .wrap { position: relative; z-index: 1; }

.icon { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); display: grid; place-items: center; margin-bottom: 14px; }
.icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card.role { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.card.role .icon { margin: 0; flex: none; }
.card.role h3 { margin: 0; font-size: 1rem; }
.card.role p { font-size: .88rem; }
.grid.roles-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
.checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: var(--muted); }
.checks li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }

.phone { width: min(280px, 100%); margin-inline: auto; filter: drop-shadow(0 18px 30px rgba(15, 30, 28, .22)); }
.phone svg { width: 100%; height: auto; display: block; }
.s-body { fill: var(--ph); } .s-screen { fill: var(--surface); } .s-line { fill: var(--line); } .s-ink { fill: var(--ink); }
.s-brand { fill: var(--brand); } .s-brand-soft { fill: var(--brand-soft); } .s-wall { fill: var(--wall); } .s-wall2 { fill: var(--wall2); }
.s-floor { fill: var(--floor); } .s-water { fill: var(--water); } .s-accent { fill: var(--accent); } .s-accent-soft { fill: var(--accent-soft); }
.s-stroke { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.s-txt { fill: var(--muted); font: 600 11px system-ui, sans-serif; }
.s-txt-on { fill: var(--on-brand); font: 700 12px system-ui, sans-serif; }