﻿@charset "UTF-8";
:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --text: #101522;
  --muted: #5f687b;
  --line: #dfe5ef;
  --dark: #0b1020;
  --dark-2: #131b32;
  --accent: #4f7cff;
  --accent-2: #63d4ff;
  --max: 1180px;
  --radius: 24px;
  --shadow: 0 18px 60px rgba(20,32,60,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; }
.container { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; }
.section { padding: 72px 0; }
.section-muted { background: #eef3fb; }
.section-dark { background: var(--dark); color: #fff; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 9999; background:#fff; padding:.7rem 1rem; border-radius:10px; }

.site-header { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(14px); background: rgba(246,248,252,.88); border-bottom: 1px solid rgba(223,229,239,.85); }
.header-inner { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand { display:inline-flex; align-items:center; gap: 10px; text-decoration:none; font-weight:800; letter-spacing:-.03em; font-size:1.25rem; }
.brand img { display:block; }
.main-nav { display:flex; align-items:center; gap: 28px; }
.main-nav a { text-decoration:none; font-size:.95rem; font-weight:650; color:#273049; }
.main-nav a:hover { color: var(--accent); }
.nav-cta { padding:.7rem 1rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
.menu-toggle { display:none; width:44px; height:44px; border:0; background:transparent; padding:10px; }
.menu-toggle span { display:block; height:2px; background:var(--text); margin:5px 0; transition:.2s ease; }

.hero { padding-top: 58px; overflow:hidden; background: radial-gradient(circle at 80% 15%, rgba(79,124,255,.14), transparent 28%), linear-gradient(180deg, #f9fbff 0%, var(--bg) 100%); }
.hero-grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr); gap: 56px; align-items:center; }
.eyebrow { margin:0 0 14px; text-transform:uppercase; letter-spacing:.13em; font-size:.78rem; font-weight:800; color:var(--accent); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.7rem,3.7vw,3.8rem); line-height:1.05; letter-spacing:-.045em; margin-bottom:24px; }
h1 span { color:var(--accent); }
h2 { font-size:clamp(1.9rem,2.8vw,2.7rem); line-height:1.1; letter-spacing:-.035em; margin-bottom:18px; }
h3 { font-size:1.35rem; line-height:1.2; margin-bottom:12px; letter-spacing:-.02em; }
.hero-lead { max-width:700px; color:var(--muted); font-size:clamp(1.02rem,1.35vw,1.18rem); margin-bottom:26px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 20px; border-radius:14px; text-decoration:none; font-weight:800; transition:.2s ease; }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--accent),#315ce7); box-shadow:0 10px 25px rgba(79,124,255,.25); }
.btn-primary:hover { transform:translateY(-2px); }
.btn-secondary { background:#fff; border:1px solid var(--line); color:#1e2942; }
.hero-notes { display:flex; gap:10px; flex-wrap:wrap; }
.hero-notes span { font-size:.86rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.55rem .75rem; color:#39445f; }
.hero-panel { position:relative; min-height:430px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.hero-panel::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:linear-gradient(135deg,rgba(79,124,255,.18),rgba(99,212,255,.05)); filter:blur(4px); }
.flow-card { position:relative; z-index:1; width:min(100%,390px); background:rgba(255,255,255,.9); border:1px solid rgba(223,229,239,.9); border-radius:20px; padding:20px 22px; box-shadow:var(--shadow); }
.flow-card strong { display:block; font-size:1.05rem; margin-bottom:3px; }
.flow-card span { color:var(--muted); font-size:.92rem; }
.flow-main { transform:scale(1.08); border-color:rgba(79,124,255,.32); }
.flow-line { width:2px; height:44px; background:linear-gradient(var(--line),var(--accent),var(--line)); position:relative; z-index:1; }

.section-head { max-width:780px; margin-bottom:30px; }
.section-head p:last-child, .lead-small { color:var(--muted); font-size:1.06rem; }
.section-head.narrow { max-width:730px; }
.cards { display:grid; gap:20px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:0 10px 35px rgba(20,32,60,.05); }
.card p { margin-bottom:0; color:var(--muted); }
.icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#edf2ff; color:var(--accent); font-weight:900; margin-bottom:16px; }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:start; }
.steps { list-style:none; padding:0; margin:0; display:grid; gap:18px; }
.steps li { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.steps li>span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#edf2ff; color:var(--accent); font-weight:900; }
.steps strong { display:block; margin-bottom:5px; }
.steps p { margin:0; color:var(--muted); }
.problem-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.problem { display:flex; gap:14px; align-items:flex-start; background:var(--dark-2); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:20px 22px; }
.problem span { color:var(--accent-2); font-weight:900; }
.problem p { margin:0; color:#dce4f7; }
.feature-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.feature-strip div { padding:26px; border-right:1px solid var(--line); }
.feature-strip div:last-child { border-right:0; }
.feature-strip strong { display:block; margin-bottom:5px; }
.feature-strip span { color:var(--muted); font-size:.93rem; }
.contact { padding-top:38px; }
.contact-box { background:linear-gradient(135deg,#0d1427,#182444); color:#fff; border-radius:32px; padding:38px; display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center; box-shadow:var(--shadow); }
.contact-box p { color:#c9d4eb; }
.contact-cta { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.contact-hint { font-size:.9rem; margin:0; }
.disabled { opacity:.55; cursor:not-allowed; }
.site-footer { padding:30px 0 44px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:28px; }
.footer-inner p { margin:0; color:var(--muted); font-size:.9rem; }
.footer-brand { font-size:1rem; }

@media (max-width: 900px) {
  .section { padding:54px 0; }
  .hero-grid, .split, .contact-box { grid-template-columns:1fr; gap:30px; }
  .hero-panel { min-height:300px; }
  .cards.three { grid-template-columns:1fr; }
  .feature-strip { grid-template-columns:repeat(2,1fr); }
  .feature-strip div:nth-child(2) { border-right:0; }
  .feature-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .problem-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  body { line-height:1.48; font-size:15px; }
  .container { width:min(100% - 28px,var(--max)); }
  .section { padding:38px 0; }
  .header-inner { min-height:58px; }
  .brand { font-size:1.08rem; gap:8px; }
  .brand img { width:36px; height:36px; }
  .menu-toggle { display:block; width:40px; height:40px; padding:8px; }
  .main-nav { position:absolute; left:10px; right:10px; top:64px; display:none; flex-direction:column; align-items:stretch; gap:3px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:8px; }
  .main-nav.open { display:flex; }
  .main-nav a { padding:.68rem .8rem; border-radius:9px; font-size:.92rem; }
  .nav-cta { background:#edf2ff; border:0; }

  .hero { padding-top:28px; padding-bottom:34px; }
  .hero-grid { display:block; }
  .eyebrow { margin-bottom:8px; font-size:.68rem; letter-spacing:.11em; }
  h1 { font-size:clamp(2rem,9vw,2.55rem); line-height:1.03; letter-spacing:-.038em; margin-bottom:14px; }
  h2 { font-size:clamp(1.55rem,7vw,2rem); line-height:1.08; margin-bottom:12px; }
  h3 { font-size:1.08rem; margin-bottom:7px; }
  .hero-lead { font-size:.98rem; line-height:1.5; margin-bottom:16px; max-width:none; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
  .btn { width:100%; min-height:42px; padding:0 12px; border-radius:11px; font-size:.88rem; }
  .hero-notes { gap:6px; }
  .hero-notes span { font-size:.76rem; padding:.36rem .55rem; }
  .hero-panel { display:none; }

  .section-head { margin-bottom:20px; }
  .section-head p:last-child, .lead-small { font-size:.96rem; }
  .cards { gap:10px; }
  .card { display:grid; grid-template-columns:42px 1fr; column-gap:12px; row-gap:2px; padding:16px; border-radius:16px; box-shadow:none; }
  .card .icon { grid-row:1 / span 2; width:40px; height:40px; border-radius:11px; margin:0; font-size:.82rem; }
  .card h3 { margin:1px 0 5px; }
  .card p { font-size:.9rem; line-height:1.43; }

  .split { gap:18px; }
  .steps { gap:8px; }
  .steps li { grid-template-columns:34px 1fr; gap:10px; padding:13px 14px; border-radius:14px; }
  .steps li>span { width:32px; height:32px; border-radius:9px; font-size:.82rem; }
  .steps strong { margin-bottom:2px; font-size:.94rem; }
  .steps p { font-size:.88rem; line-height:1.4; }

  .problem-grid { gap:7px; }
  .problem { gap:9px; padding:11px 13px; border-radius:12px; }
  .problem p { font-size:.89rem; line-height:1.38; }

  .feature-strip { grid-template-columns:repeat(2,1fr); border-radius:16px; }
  .feature-strip div { padding:14px 13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .feature-strip div:nth-child(2n) { border-right:0; }
  .feature-strip div:nth-last-child(-n+2) { border-bottom:0; }
  .feature-strip strong { font-size:.9rem; margin-bottom:2px; }
  .feature-strip span { font-size:.8rem; line-height:1.35; }

  .contact { padding-top:26px; }
  .contact-box { gap:18px; padding:22px 18px; border-radius:18px; }
  .contact-box p { font-size:.92rem; }
  .contact-cta { gap:8px; }
  .contact-hint { font-size:.82rem !important; }

  .site-footer { padding:20px 0 28px; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:10px; padding-top:18px; }
  .footer-inner p { font-size:.78rem; }
}
@media (max-width: 390px) {
  .hero-actions { grid-template-columns:1fr; }
  h1 { font-size:1.95rem; }
  .feature-strip { grid-template-columns:1fr; }
  .feature-strip div { border-right:0; }
  .feature-strip div:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
  .feature-strip div:last-child { border-bottom:0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}

/* Kapcsolatfelvételi űrlap */
.contact-box { align-items:start; }
.contact-copy a { color:#fff; font-weight:800; text-decoration-thickness:1px; text-underline-offset:3px; }
.contact-email { margin:22px 0 6px; }
.contact-note { font-size:.9rem; margin-bottom:0; }
.contact-form-wrap { background:#fff; color:var(--text); border-radius:22px; padding:24px; box-shadow:0 18px 45px rgba(0,0,0,.16); }
.contact-form { display:grid; gap:14px; }
.contact-form label { display:grid; gap:6px; font-weight:800; font-size:.88rem; }
.contact-form label span small { font-weight:500; color:var(--muted); }
.contact-form input,
.contact-form textarea { width:100%; border:1px solid #cfd7e6; border-radius:11px; background:#fff; color:var(--text); font:inherit; padding:11px 12px; outline:none; transition:border-color .16s ease, box-shadow .16s ease; }
.contact-form textarea { resize:vertical; min-height:120px; }
.contact-form input:focus,
.contact-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,124,255,.14); }
.form-row { display:grid; gap:12px; }
.form-row.two { grid-template-columns:1fr 1fr; }
.captcha-row { grid-template-columns:minmax(160px,1fr) auto; align-items:end; }
.captcha-row .btn { white-space:nowrap; }
.form-privacy { margin:0; color:var(--muted) !important; font-size:.76rem !important; line-height:1.4; }
.form-message { margin-bottom:14px; border-radius:11px; padding:11px 13px; font-size:.88rem; font-weight:700; }
.form-message.success { background:#eaf8ef; color:#176536; border:1px solid #bde5ca; }
.form-message.error { background:#fff0f0; color:#9b1c1c; border:1px solid #f0c0c0; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

@media (max-width: 720px) {
  .contact-form-wrap { padding:16px; border-radius:15px; }
  .form-row.two, .captcha-row { grid-template-columns:1fr; }
  .contact-form { gap:11px; }
  .contact-form input, .contact-form textarea { padding:9px 10px; border-radius:9px; }
  .contact-form textarea { min-height:105px; }
  .contact-email { margin-top:14px; }
  .captcha-row .btn { width:100%; }
}

