:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-offset: #eef1f6;
  --color-divider: #e3e7ee;
  --color-border: #d3dae4;

  --color-text: #16233b;
  --color-text-muted: #57657e;
  --color-text-faint: #8d99ac;
  --color-text-inverse: #ffffff;

  --color-primary: #234a99;
  --color-primary-hover: #1b3a7a;
  --color-primary-active: #142c5c;
  --color-primary-soft: #e3ecf9;

  --color-success: #166b36;
  --color-success-soft: #dcefe2;
  --color-warning: #8a5200;
  --color-warning-soft: #fbeeda;
  --color-blue: #1d4f8f;
  --color-blue-soft: #e1ebfa;

  --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(.16,1,.3,1);
  --shadow-sm: 0 1px 2px rgba(40,32,20,.07);
  --shadow-md: 0 6px 18px rgba(40,32,20,.09);
  --shadow-lg: 0 18px 44px rgba(40,32,20,.13);

  --content-narrow: 640px; --content-default: 960px; --content-wide: 1180px;

  --font-display: 'Zodiak', Georgia, serif;
  --font-ui: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #0f141c;
  --color-surface: #161d29;
  --color-surface-2: #1c2433;
  --color-surface-offset: #1a2230;
  --color-divider: #253044;
  --color-border: #2f3c52;
  --color-text: #e4e9f2;
  --color-text-muted: #99a6bb;
  --color-text-faint: #6c7a91;
  --color-text-inverse: #0f141c;
  --color-primary: #8fb4ef;
  --color-primary-hover: #a9c6f5;
  --color-primary-active: #c2d7f8;
  --color-primary-soft: #1e2c45;
  --color-success: #62c184;
  --color-success-soft: #172a1f;
  --color-warning: #f2b45c;
  --color-warning-soft: #2c2314;
  --color-blue: #8fb4ef;
  --color-blue-soft: #1a2740;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
}

[hidden] { display: none !important; }

/* ---------- layout primitives ---------- */
.skip { position:absolute; left:-9999px; }
.skip:focus { left:var(--space-4); top:var(--space-4); background:var(--color-surface); padding:var(--space-2) var(--space-4); z-index:99; border-radius:var(--radius-sm); }

.site-head {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--space-6);
  padding:var(--space-3) clamp(var(--space-4), 4vw, var(--space-12));
  background:color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-divider);
}
.brand { display:flex; align-items:center; gap:var(--space-2); text-decoration:none; color:var(--color-text); }
.brand .mark { color:var(--color-primary); flex:none; }
.wordmark { font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; letter-spacing:-.01em; }
.nav { display:flex; gap:var(--space-5); margin-inline-start:auto; font-size:var(--text-sm); }
.nav a { color:var(--color-text-muted); text-decoration:none; }
.nav a:hover { color:var(--color-primary); }
.head-actions { display:flex; align-items:center; gap:var(--space-3); }
.icon-btn { display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-full); color:var(--color-text-muted); border:1px solid var(--color-divider); }
.icon-btn:hover { color:var(--color-primary); border-color:var(--color-primary); }
@media (max-width:820px){
  .nav { display:none; }
  .head-actions { margin-inline-start:auto; }
  .site-head { gap:var(--space-3); }
}

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:500; text-decoration:none; line-height:1;
  border:1px solid transparent;
}
.btn-sm { padding:var(--space-2) var(--space-4); }
.btn-primary { background:var(--color-primary); color:#fff; }
[data-theme="dark"] .btn-primary { color:#1a1409; }
.btn-primary:hover { background:var(--color-primary-hover); }
.btn-ghost { border-color:var(--color-border); color:var(--color-text); }
.btn-ghost:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* ---------- hero ---------- */
.hero { padding:clamp(var(--space-16), 9vw, var(--space-24)) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-16); }
.hero-inner { max-width:var(--content-wide); margin:0 auto; }
.eyebrow { font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-5); }
.hero h1 { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:700; letter-spacing:-.03em; max-width:18ch; }
.hero h1 em { font-style:italic; color:var(--color-primary); }
.lead { margin-top:var(--space-6); font-size:var(--text-lg); color:var(--color-text-muted); max-width:56ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }
.hero-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:var(--space-6); margin-top:var(--space-16); padding-top:var(--space-8); border-top:1px solid var(--color-divider); }
.hero-facts li { display:flex; flex-direction:column; gap:var(--space-1); max-width:none; }
.hero-facts strong { font-family:var(--font-ui); font-weight:700; font-size:var(--text-lg); }
.hero-facts span { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- sections ---------- */
.section { padding:clamp(var(--space-16), 8vw, var(--space-24)) clamp(var(--space-4), 4vw, var(--space-12)); }
.section-alt { background:var(--color-surface-offset); border-block:1px solid var(--color-divider); }
.section-head { max-width:var(--content-wide); margin:0 auto var(--space-12); }
.kicker { font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-4); }
.section-head h2 { font-family:var(--font-ui); font-size:var(--text-2xl); font-weight:700; letter-spacing:-.02em; max-width:26ch; }
.sub { margin-top:var(--space-4); color:var(--color-text-muted); max-width:62ch; }

/* ---------- demo ---------- */
.demo-grid { max-width:var(--content-wide); margin:0 auto; display:grid; gap:var(--space-6); grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:900px){ .demo-grid { grid-template-columns:1fr; } }
.panel { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-sm); }
.panel-label { font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-3); }
textarea { width:100%; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); font-size:var(--text-base); resize:vertical; }
textarea:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-soft); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.chip { text-align:left; font-size:var(--text-xs); color:var(--color-text-muted); background:var(--color-surface-offset); border:1px solid var(--color-divider); border-radius:var(--radius-full); padding:var(--space-2) var(--space-3); }
.chip:hover { border-color:var(--color-primary); color:var(--color-primary); }
.panel-actions { display:flex; gap:var(--space-3); margin-top:var(--space-5); }

.panel-out { min-height:340px; }
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); min-height:300px; color:var(--color-text-faint); text-align:center; }
.empty p { font-size:var(--text-sm); max-width:34ch; }

.fields { display:grid; gap:var(--space-2); }
.fields li { display:flex; gap:var(--space-3); align-items:baseline; padding:var(--space-3); background:var(--color-surface-offset); border-radius:var(--radius-md); font-size:var(--text-sm); max-width:none; }
.fields .k { min-width:9.5rem; color:var(--color-text-muted); font-size:var(--text-xs); letter-spacing:.04em; text-transform:uppercase; flex:none; }
.fields .v { font-weight:500; }
.soft, .ask { margin-top:var(--space-6); }
.soft-list { display:grid; gap:var(--space-2); }
.soft-list li { font-size:var(--text-sm); max-width:none; padding-left:var(--space-4); border-left:2px solid var(--color-primary); }
.soft-list b { font-weight:500; }
.soft-list span { color:var(--color-text-muted); }
.ask-list { display:grid; gap:var(--space-2); }
.ask-list li { font-size:var(--text-sm); max-width:none; color:var(--color-text-muted); padding:var(--space-2) var(--space-3); border:1px dashed var(--color-border); border-radius:var(--radius-md); }
.json { margin-top:var(--space-6); font-size:var(--text-sm); }
.json summary { cursor:pointer; color:var(--color-text-muted); }
.json pre { margin-top:var(--space-3); background:var(--color-surface-offset); border-radius:var(--radius-md); padding:var(--space-4); overflow:auto; font-size:var(--text-xs); line-height:1.5; }

/* ---------- motor jel + összefoglaló ---------- */
.result-head { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; justify-content:space-between; }
.result-head .panel-label { margin-bottom:var(--space-3); }
.motor-jel { font-size:var(--text-xs); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); margin-bottom:var(--space-3); }
.motor-jel.is-llm { background:var(--color-primary-soft); color:var(--color-primary); }
.motor-jel.is-fallback { background:var(--color-warning-soft); color:var(--color-warning); }
.result-sum { font-size:var(--text-sm); color:var(--color-text); margin-bottom:var(--space-4); padding-left:var(--space-4); border-left:2px solid var(--color-primary); }
#makeReport { margin-top:var(--space-6); width:100%; }

/* ---------- források ---------- */
.src-actions { display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; margin-top:var(--space-6); }
.src-time { font-size:var(--text-xs); color:var(--color-text-faint); }
.srcs { max-width:var(--content-wide); margin:0 auto; display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.src { max-width:none; padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.src-top { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.pol { font-size:var(--text-xs); font-weight:500; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); }
.pol-ok { background:var(--color-success-soft); color:var(--color-success); }
.pol-lic { background:var(--color-warning-soft); color:var(--color-warning); }
.pol-user { background:var(--color-blue-soft); color:var(--color-blue); }
.pol-no { background:var(--color-surface-offset); color:var(--color-text-muted); }
.src-st { font-size:var(--text-xs); color:var(--color-text-faint); }
.src-st.st-ok { color:var(--color-success); }
.src-st.st-no { color:var(--color-text-muted); }
.src-st.st-wait { color:var(--color-warning); }
.src h4 { font-size:var(--text-base); font-weight:500; margin-bottom:var(--space-2); }
.src-what { font-size:var(--text-sm); color:var(--color-text-muted); }
.src-meta { margin-top:var(--space-3); font-size:var(--text-xs); color:var(--color-text-faint); }
.src-msg { margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-text-muted); font-style:italic; }

/* ---------- report ---------- */
.report { max-width:var(--content-default); margin:0 auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); overflow:hidden; }
.report-head { display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:flex-end; padding:var(--space-6); border-bottom:1px solid var(--color-divider); }
.report-date { font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-2); }
.report-head h3 { font-family:var(--font-ui); font-weight:700; letter-spacing:-.01em; font-size:var(--text-lg); }
.report-sum { font-size:var(--text-sm); color:var(--color-text-muted); }
.cards { display:grid; gap:0; }
.card { padding:var(--space-6); border-bottom:1px solid var(--color-divider); max-width:none; }
.card-top { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; margin-bottom:var(--space-3); }
.tag { font-size:var(--text-xs); font-weight:500; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); }
.tag-new { background:var(--color-primary-soft); color:var(--color-primary); }
.tag-drop { background:var(--color-success-soft); color:var(--color-success); }
.tag-gone { background:var(--color-surface-offset); color:var(--color-text-muted); }
.tag-auction { background:var(--color-blue-soft); color:var(--color-blue); }
.card-auction { border-left:3px solid var(--color-blue); }
.card-auction .meta a { color:var(--color-primary); }
.tag-tender { background:var(--color-warning-soft); color:var(--color-warning); }
.card-tender { border-left:3px solid var(--color-warning); }
.card-tender .meta a { color:var(--color-primary); }
.verdict { font-size:var(--text-xs); color:var(--color-text-muted); }
.verdict-good { color:var(--color-success); }
.verdict-warn { color:var(--color-warning); }
.verdict-ok { color:var(--color-blue); }
.card h4 { font-size:var(--text-base); font-weight:500; }
.price { margin-top:var(--space-2); font-family:var(--font-ui); font-weight:700; font-size:var(--text-lg); font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em; }
.price .ppsm { font-family:var(--font-body); font-size:var(--text-xs); color:var(--color-text-muted); margin-left:var(--space-2); }
.price .strike { font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-text-faint); text-decoration:line-through; margin-left:var(--space-2); }
.why { margin-top:var(--space-3); font-size:var(--text-sm); }
.meta { margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-text-faint); }
.card-gone { opacity:.7; }
.report-foot { padding:var(--space-6); background:var(--color-surface-offset); }
.report-foot p { font-size:var(--text-sm); }
.report-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }

/* ---------- steps + note ---------- */
.steps { max-width:var(--content-wide); margin:0 auto; display:grid; gap:var(--space-6); grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.steps li { max-width:none; padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); }
.num { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; font-size:var(--text-sm); margin-bottom:var(--space-4); }
[data-theme="dark"] .num { color:#1a1409; }
.steps h3 { font-family:var(--font-ui); font-weight:700; font-size:var(--text-lg); margin-bottom:var(--space-2); }
.steps p { font-size:var(--text-sm); color:var(--color-text-muted); }
.note { max-width:var(--content-default); margin:var(--space-12) auto 0; padding:var(--space-6); border:1px solid var(--color-border); border-left:3px solid var(--color-primary); border-radius:var(--radius-lg); background:var(--color-surface); }
.note h3 { font-family:var(--font-ui); font-weight:700; font-size:var(--text-lg); margin-bottom:var(--space-3); }
.note p { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- vs blokk ---------- */
.vs { max-width:var(--content-default); margin:var(--space-12) auto 0; }
.vs h3 { font-family:var(--font-ui); font-weight:700; font-size:var(--text-lg); margin-bottom:var(--space-5); }
.vs-grid { display:grid; gap:var(--space-4); grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .vs-grid { grid-template-columns:1fr; } }
.vs-col { padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.vs-new { border-color:var(--color-primary); }
.vs-title { font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-4); }
.vs-new .vs-title { color:var(--color-primary); }
.vs-col ul { display:grid; gap:var(--space-3); }
.vs-col li { font-size:var(--text-sm); color:var(--color-text-muted); max-width:none; padding-left:var(--space-6); position:relative; }
.vs-old li::before { content:"✕"; position:absolute; left:0; color:var(--color-text-faint); font-size:var(--text-xs); }
.vs-new li::before { content:"✓"; position:absolute; left:0; color:var(--color-primary); font-size:var(--text-sm); }

/* ---------- billing cycle ---------- */
.cycle { display:inline-flex; gap:var(--space-1); margin-top:var(--space-6); padding:var(--space-1); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-full); }
.cycle-btn { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-5); border-radius:var(--radius-full); font-size:var(--text-sm); color:var(--color-text-muted); }
.cycle-btn span { font-size:var(--text-xs); color:var(--color-primary); }
.cycle-btn.is-on { background:var(--color-primary); color:#fff; }
[data-theme="dark"] .cycle-btn.is-on { color:#1a1409; }
.cycle-btn.is-on span { color:inherit; opacity:.85; }

/* ---------- plans ---------- */
.plans { max-width:var(--content-wide); margin:0 auto; display:grid; gap:var(--space-6); grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); align-items:start; }
.plan { max-width:none; display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); }
.plan-hi { border-color:var(--color-primary); box-shadow:var(--shadow-md); }
.plan-badge { font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary); }
.plan h3 { font-family:var(--font-ui); font-weight:700; font-size:var(--text-lg); }
.plan-price { font-family:var(--font-ui); font-weight:700; font-variant-numeric:tabular-nums; font-size:var(--text-xl); }
.plan-price span { font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-text-muted); }
.plan-note { font-size:var(--text-xs); color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.08em; }
.plan ul { display:grid; gap:var(--space-2); margin:var(--space-3) 0 var(--space-5); }
.plan ul li { font-size:var(--text-sm); color:var(--color-text-muted); max-width:none; padding-left:var(--space-5); position:relative; }
.plan ul li::before { content:"—"; position:absolute; left:0; color:var(--color-primary); }
.plan .btn { margin-top:auto; }
.plan-who { font-size:var(--text-sm); color:var(--color-text); }
.plan-fine { font-size:var(--text-xs); color:var(--color-text-faint); text-align:center; }
.plans-base { max-width:var(--content-default); margin:var(--space-8) auto 0; text-align:center; font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- faq ---------- */
.faq { max-width:var(--content-wide); margin:0 auto; }
.faq details { max-width:720px; border-bottom:1px solid var(--color-divider); }
.faq details:first-of-type { border-top:1px solid var(--color-divider); }
.faq summary { cursor:pointer; padding:var(--space-5) var(--space-8) var(--space-5) 0; font-size:var(--text-base); font-weight:500; position:relative; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--color-primary); font-size:var(--text-lg); }
.faq details[open] summary::after { content:"–"; }
.faq summary:hover { color:var(--color-primary); }
.faq details p { padding:0 var(--space-8) var(--space-5) 0; font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- closing + footer ---------- */
.closing { padding:clamp(var(--space-16), 8vw, var(--space-24)) var(--space-4); text-align:center; }
.closing h2 { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:700; letter-spacing:-.02em; }
.closing > p { margin:var(--space-4) auto 0; color:var(--color-text-muted); }
.signup { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-8); }
.signup input { min-width:260px; padding:var(--space-3) var(--space-5); border-radius:var(--radius-full); border:1px solid var(--color-border); background:var(--color-surface); }
.signup input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-soft); }
.signup-msg { margin:var(--space-4) auto 0; font-size:var(--text-sm); color:var(--color-success); min-height:1.4em; }

.site-foot { padding:var(--space-10) clamp(var(--space-4), 4vw, var(--space-12)); border-top:1px solid var(--color-divider); display:grid; gap:var(--space-3); }
.foot-brand { display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); color:var(--color-primary); }
.site-foot p { font-size:var(--text-sm); color:var(--color-text-muted); }
.foot-small { font-size:var(--text-xs); color:var(--color-text-faint); }

.price-na { margin-top:var(--space-2); font-size:var(--text-sm); color:var(--color-text-muted); font-style:italic; }

/* ---------- mentési form + figyelések ---------- */
.result-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.result-actions .btn { flex:1 1 160px; }
.save-form { margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--color-divider); display:grid; gap:var(--space-4); }
.fld { display:grid; gap:var(--space-2); }
.fld > span { font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); }
.fld input, .fld select { padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-surface-2); font-size:var(--text-sm); }
.fld input:focus, .fld select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-soft); }
.fld-row { display:grid; gap:var(--space-4); grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .fld-row { grid-template-columns:1fr; } }
.save-msg { font-size:var(--text-sm); color:var(--color-success); min-height:1.2em; }

.watches { max-width:var(--content-wide); margin:0 auto; display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); }
.watch { max-width:none; padding:var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:var(--space-2); }
.watch-head { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:baseline; justify-content:space-between; }
.watch-head h3 { font-family:var(--font-ui); font-weight:700; font-size:var(--text-lg); }
.watch-rhythm { font-size:var(--text-xs); color:var(--color-primary); }
.watch-sentence { font-size:var(--text-sm); font-style:italic; color:var(--color-text); }
.watch-profile { font-size:var(--text-sm); color:var(--color-text-muted); }
.watch-meta { font-size:var(--text-xs); color:var(--color-text-faint); }
.watch-actions { display:flex; gap:var(--space-3); margin-top:var(--space-3); }


/* ---------- 2026 redesign: adat-első kártya, kockázat-szótár ---------- */
.card { background:var(--color-surface); transition: background var(--transition-interactive); }
.card:hover { background:var(--color-surface-offset); }
.card-top { justify-content:flex-start; }
.tag { display:inline-flex; align-items:center; gap:var(--space-2); }
.tag svg { flex:none; }
.verdict { margin-left:auto; font-weight:500; }
.verdict-good { color:var(--color-success); }
.meta, .ppsm, .strike, .why { font-variant-numeric:tabular-nums; }
.card h4 { font-size:var(--text-base); font-weight:600; letter-spacing:-.005em; }

/* közeli (lazított) találat jelölése */
.card-near { background:var(--color-surface-offset); }
.near-flag { font-size:var(--text-xs); color:var(--color-text-faint); border:1px dashed var(--color-border);
  border-radius:var(--radius-full); padding:2px var(--space-3); }

/* lazítási megjegyzés a riport fejlécében */
.report-relax { margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-warning); }

/* kockázat-lépcső: bal élcsík */
.card-auction { border-left:3px solid var(--color-warning); }
.tag-auction { background:var(--color-warning-soft); color:var(--color-warning); }
.card-tender { border-left:3px solid var(--color-blue); }
.tag-tender { background:var(--color-blue-soft); color:var(--color-blue); }
.tag-new { background:var(--color-primary-soft); color:var(--color-primary); }
.tag-drop { background:var(--color-success-soft); color:var(--color-success); }

/* enyhébb hero, kevesebb magazin */
.hero h1 { font-size:var(--text-2xl); }
.hero { padding-top:clamp(var(--space-12), 7vw, var(--space-20)); }
.lead { font-size:var(--text-base); max-width:60ch; }
.section-head h2 { font-size:var(--text-xl); letter-spacing:-.015em; }
.closing h2 { font-size:var(--text-2xl); }

/* fókusz és érintőcélok */
.btn, .chip, .cycle-btn, .icon-btn { min-height:44px; }
.btn-sm { min-height:38px; }

/* ================================================================
   KARAKTER-RÉTEG — textúra, matricák, illusztrációk, mikro-mozgás
   A bizalmi elemek (ár, verdikt, jogi jelzés) érintetlenek maradnak.
   ================================================================ */

:root {
  --color-play: #C2410C;          /* meleg terrakotta: csak dekoráció */
  --color-play-soft: #FDECE0;
  --shadow-sticker: 3px 3px 0 var(--color-text);
}
[data-theme="dark"] {
  --color-play: #F39B6B;
  --color-play-soft: #33221A;
  --shadow-sticker: 3px 3px 0 rgba(0,0,0,.55);
}

/* --- finom papír-textúra a hero és a zárás alatt --- */
.hero, .closing {
  position: relative;
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-text) 12%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}
.hero::after, .closing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Korábban sugárirányú átfedés volt (ellipszis a felső él közepéből), ami a
     két ALSÓ SAROK felé a háttér színébe olvasztotta a pontos textúrát — ez
     adta a „ködös sarok” hatást. Helyette egyenletes, alulról felfelé
     halványuló átmenet: a textúra a lap alján finoman elfogy, sarokfoltok
     nélkül. */
  background: linear-gradient(to bottom, transparent 72%, var(--color-bg) 100%);
}
.hero-inner, .hero-visual, .closing > * { position: relative; z-index: 1; }

/* --- hero: kétkolumnás, illusztrációval --- */
.hero { overflow: hidden; }
.hero-inner { max-width: 40rem; }
.hero-visual { margin-top: var(--space-10); color: var(--color-primary); }
.hero-art { width: 100%; max-width: 34rem; height: auto; display: block; }
.hero-art-note {
  margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint);
  font-style: italic; max-width: 34rem;
}
@media (min-width: 1000px) {
  .hero-inner { max-width: 34rem; }
  .hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--space-10); align-items: center; }
  .hero-visual { margin-top: 0; }
}

/* világító ablakok és pislogó nap */
.art-window-lit { animation: abl 6s ease-in-out infinite; transform-origin: center; }
.art-window-lit:nth-of-type(2) { animation-delay: 2.4s; }
.art-sun { animation: nap 40s linear infinite; transform-origin: 446px 58px; }
.art-pigeon { animation: galamb 5.5s ease-in-out infinite; transform-origin: 430px 292px; }
.art-tag { animation: leng 7s ease-in-out infinite; transform-origin: 116px 60px; color: var(--color-play); }
.art-awning { fill: var(--color-play); fill-opacity: .18; }
@keyframes abl { 0%,100% { opacity: .25 } 45% { opacity: 1 } }
@keyframes nap { to { transform: rotate(360deg) } }
@keyframes galamb { 0%,100% { transform: translateY(0) rotate(0) } 40% { transform: translateY(-3px) rotate(-3deg) } }
@keyframes leng { 0%,100% { transform: rotate(-3deg) } 50% { transform: rotate(2.5deg) } }
@media (prefers-reduced-motion: reduce) {
  .art-window-lit, .art-sun, .art-pigeon, .art-tag, .dot-live, .thinking span { animation: none !important; }
}

/* --- kézírásos aláhúzás a hero kiemelt szaván --- */
.hero h1 em { position: relative; display: inline-block; }
.scribble {
  position: absolute; left: 0; right: -2%; bottom: -.14em; width: 102%; height: .34em;
  color: var(--color-play); opacity: .85;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: huz 1.1s .35s cubic-bezier(.6,.05,.3,1) forwards;
}
@keyframes huz { to { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) { .scribble { animation: none; stroke-dashoffset: 0 } }

/* --- matrica: kicsit ferde, kemény árnyék --- */
.sticker {
  display: inline-block; margin-top: var(--space-6);
  padding: var(--space-2) var(--space-4);
  background: var(--color-play-soft); color: var(--color-play);
  border: 2px solid currentColor; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  transform: rotate(-1.6deg); box-shadow: var(--shadow-sticker);
}
.sticker b { font-weight: 700; }
.sticker-hero { transform: rotate(-1.6deg) translateY(2px); }

/* --- élő pont az eyebrow-ban --- */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent);
  animation: puls 2.4s ease-out infinite;
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent) }
  70% { box-shadow: 0 0 0 8px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}

/* --- szekció-alcím --- */
.section-sub {
  margin-top: var(--space-2); color: var(--color-text-muted);
  font-size: var(--text-sm); max-width: 56ch;
}

/* --- példa-ticker a beírás fölött --- */
.ticker {
  margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint);
}
.ticker span {
  color: var(--color-play); font-style: italic;
  animation: bevill .5s ease both;
}
@keyframes bevill { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* --- lépések: spot illusztráció --- */
.steps .spot { width: 66px; height: 50px; color: var(--color-play); margin-bottom: var(--space-3); display: block; }
.steps li { position: relative; transition: transform var(--transition-interactive); }
.steps li:hover { transform: translateY(-3px); }
.steps .num {
  position: absolute; top: var(--space-5); right: var(--space-5);
  font-family: var(--font-display); font-size: var(--text-2xl);
  color: var(--color-text-faint); opacity: .35;
}

/* --- kártyák: enyhe emelés, hogy éljen --- */
.card { transition: transform var(--transition-interactive), background var(--transition-interactive); }
.card:hover { transform: translateY(-2px); }

/* --- „gondolkodik” pontok --- */
.thinking { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.thinking span {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: ugral 1.1s ease-in-out infinite;
}
.thinking span:nth-child(2) { animation-delay: .15s }
.thinking span:nth-child(3) { animation-delay: .3s }
@keyframes ugral { 0%,100% { transform: translateY(0); opacity: .4 } 50% { transform: translateY(-4px); opacity: 1 } }

/* --- üres állapot barátságosabban --- */
.empty { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); }
.empty p b { color: var(--color-text); }

/* --- GYIK: kérdés kap egy kis lendületet --- */
.faq summary { transition: color var(--transition-interactive); }
.faq summary:hover { color: var(--color-play); }

/* --- footer galamb-sor --- */
.site-foot .foot-small:last-child { font-style: italic; }

/* --- javítások: hero-tények egy hasábban, tiszta lépésszám --- */
.hero-facts { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-10); }
.hero-facts li { flex-direction: row; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.hero-facts strong { font-size: var(--text-base); min-width: 12.5rem; }
.hero-facts span { flex: 1 1 12rem; }

.steps .num {
  position: absolute; top: var(--space-4); right: var(--space-5);
  width: auto; height: auto; background: none !important; border: 0 !important;
  border-radius: 0; box-shadow: none; display: block;
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--color-text); opacity: .12;
}
.steps .spot { width: 78px; height: 58px; }
.steps li { padding-top: var(--space-6); }

/* --- csomagok: a kiemelt tarifa matricát kap --- */
.plan-hi { position: relative; }
.plan-hi .plan-badge {
  display: inline-block; align-self: flex-start; width: fit-content; padding: var(--space-1) var(--space-3); margin-bottom: var(--space-2);
  background: var(--color-play-soft); color: var(--color-play);
  border: 2px solid currentColor; border-radius: var(--radius-md);
  transform: rotate(-1.4deg); box-shadow: 2px 2px 0 var(--color-play);
  font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--text-xs);
}
.plan { transition: transform var(--transition-interactive); }
.plan:hover { transform: translateY(-3px); }

/* --- összehasonlítás: a régi mód szomorú, az új nem --- */
.vs-old { opacity: .82; }
.vs-old li::before { color: var(--color-error, #B42323); opacity: .6; }
.vs-new li::before { color: var(--color-success); font-weight: 700; }

/* --- szekció-kicker: kis marker-vonal --- */
.kicker { display: inline-flex; align-items: center; gap: var(--space-3); }
.kicker::after {
  content: ""; width: 2.2rem; height: 2px; background: var(--color-play); opacity: .6;
}

/* ================================================================
   VAD RÉTEG — nagy illusztrációk, hatszínű dekor-paletta
   Szabály: ezek a színek SOHA nem jelentenek árat, verdiktet vagy
   jogi állapotot. Az adatszótár (kék / borostyán / zöld) érintetlen.
   ================================================================ */

:root {
  --c-terra: #C2410C;
  --c-mustard: #B07A00;
  --c-teal: #0E7C86;
  --c-sky: #3B7DD8;
  --c-plum: #7C3F86;
  --c-mint: #1F8A5B;
}
[data-theme="dark"] {
  --c-terra: #F39B6B;
  --c-mustard: #E4B457;
  --c-teal: #5CC7CE;
  --c-sky: #8FB4EF;
  --c-plum: #C79BD0;
  --c-mint: #6ECB98;
}

/* --- hero: nagyobb illusztráció, kifutó a jobb szélre --- */
.hero-art { max-width: none; width: 100%; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 30rem) minmax(0, 1.35fr); gap: var(--space-8); }
  .hero-visual { margin-right: calc(-1 * var(--page-gutter, 2rem)); }
}
@media (min-width: 1400px) {
  .hero { grid-template-columns: minmax(0, 32rem) minmax(0, 1.5fr); }
}
.art-cloud { animation: uszik 34s linear infinite; }
.art-cloud2 { animation: uszik2 46s linear infinite; }
.art-tram { animation: villamos 18s ease-in-out infinite; }
.art-pigeon2 { animation: repul 9s ease-in-out infinite; }
.art-tag-1 { animation: leng 7s ease-in-out infinite; }
.art-tag-2 { animation: leng2 8.5s ease-in-out infinite; transform-origin: 439px 102px; }
.art-tag-3 { animation: leng 9.5s ease-in-out infinite .6s; transform-origin: 587px 176px; }
.art-steam { animation: gozol 3.6s ease-in-out infinite; }
@keyframes uszik { 0% { transform: translateX(-12px) } 50% { transform: translateX(34px) } 100% { transform: translateX(-12px) } }
@keyframes uszik2 { 0% { transform: translateX(20px) } 50% { transform: translateX(-30px) } 100% { transform: translateX(20px) } }
@keyframes villamos { 0%, 12% { transform: translateX(0) } 55%, 100% { transform: translateX(58px) } }
@keyframes repul { 0%, 100% { transform: translate(0,0) } 50% { transform: translate(-26px,-14px) } }
@keyframes leng2 { 0%,100% { transform: rotate(2deg) } 50% { transform: rotate(-2.5deg) } }
@keyframes gozol { 0%,100% { opacity: .25 } 50% { opacity: .85 } }
@media (prefers-reduced-motion: reduce) {
  .art-cloud, .art-cloud2, .art-tram, .art-pigeon2, .art-tag-1, .art-tag-2, .art-tag-3, .art-steam { animation: none !important; }
}

/* --- illusztráció-keretek a szekciókban --- */
.art-wrap { margin: var(--space-10) 0 var(--space-4); }
.art-funnel { width: 100%; max-width: 52rem; height: auto; display: block; }
.art-morning { width: 100%; max-width: 42rem; height: auto; display: block; margin: 0 auto var(--space-6); }
.art-wrap-morning { margin-top: 0; }

/* --- látkép-választók a szekciók között --- */
.divider-art { line-height: 0; overflow: hidden; }
.divider-art svg { width: 100%; height: clamp(56px, 7vw, 96px); display: block; }
.divider-flip svg { transform: scaleY(-1); }

/* --- szekció-tintek: minden szakasznak saját színhangulata --- */
#demo { background:
  linear-gradient(180deg, color-mix(in srgb, var(--c-sky) 7%, transparent), transparent 62%); }
#hogyan { background:
  linear-gradient(180deg, color-mix(in srgb, var(--c-mustard) 9%, transparent), transparent 58%); }
#forrasok { background:
  linear-gradient(180deg, color-mix(in srgb, var(--c-teal) 8%, transparent), transparent 60%); }
#csomagok { background:
  linear-gradient(180deg, color-mix(in srgb, var(--c-plum) 9%, transparent), var(--color-surface-offset) 70%); }
#gyik { background:
  linear-gradient(180deg, color-mix(in srgb, var(--c-mint) 8%, transparent), transparent 55%); }
.closing { background-color: color-mix(in srgb, var(--c-terra) 8%, var(--color-bg)); }
#riport { background: var(--color-surface-offset); } /* az adat marad semleges */

/* --- színes kicker minden szekcióban --- */
#demo .kicker, #demo .kicker::after { color: var(--c-sky); background-color: currentColor; }
#demo .kicker { background: none; color: var(--c-sky); }
#hogyan .kicker { color: var(--c-mustard); }
#hogyan .kicker::after { background: var(--c-mustard); }
#forrasok .kicker { color: var(--c-teal); }
#forrasok .kicker::after { background: var(--c-teal); }
#csomagok .kicker { color: var(--c-plum); }
#csomagok .kicker::after { background: var(--c-plum); }
#gyik .kicker { color: var(--c-mint); }
#gyik .kicker::after { background: var(--c-mint); }

/* --- nagy dekor-blob a szekciócímek mögé --- */
.section-head { position: relative; }
.section-head::before {
  content: ""; position: absolute; left: -1.6rem; top: -1.4rem;
  width: 7.5rem; height: 7.5rem; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: currentColor; opacity: .1; z-index: 0; pointer-events: none;
}
#demo .section-head::before { color: var(--c-sky); }
#hogyan .section-head::before { color: var(--c-mustard); }
#forrasok .section-head::before { color: var(--c-teal); }
#csomagok .section-head::before { color: var(--c-plum); }
#gyik .section-head::before { color: var(--c-mint); }
#riport .section-head::before { display: none; }
.section-head > * { position: relative; z-index: 1; }

/* --- lépés-illusztrációk nagyobbak és színesek --- */
.steps .spot { width: 104px; height: 76px; }
.steps li:nth-child(1) .spot { color: var(--c-terra); }
.steps li:nth-child(2) .spot { color: var(--c-teal); }
.steps li:nth-child(3) .spot { color: var(--c-mustard); }
.steps li:nth-child(1) { border-top: 4px solid var(--c-terra); }
.steps li:nth-child(2) { border-top: 4px solid var(--c-teal); }
.steps li:nth-child(3) { border-top: 4px solid var(--c-mustard); }

/* --- csomagkártyák színes tetővel --- */
.plans .plan:nth-child(1) { border-top: 4px solid var(--c-mint); }
.plans .plan:nth-child(2) { border-top: 4px solid var(--c-plum); }
.plans .plan:nth-child(3) { border-top: 4px solid var(--c-mustard); }

/* --- forrás-kártyák: kategória szerinti színcsík --- */
.source-card { border-left: 4px solid var(--color-border); }

/* --- nagyobb, vadabb matrica --- */
.sticker {
  font-size: var(--text-base); padding: var(--space-3) var(--space-5);
  transform: rotate(-2.4deg);
}
.sticker-hero { transform: rotate(-2.4deg) translateY(2px); }

/* --- hero cím nagyobb, ha van hely --- */
@media (min-width: 1000px) { .hero h1 { font-size: clamp(2.6rem, 4vw, 3.6rem); } }

/* --- mobil: az illusztrációk ne nyomják szét --- */
@media (max-width: 820px) {
  .section-head::before { width: 5.5rem; height: 5.5rem; left: -1rem; }
  .art-wrap { margin-top: var(--space-8); }
  .steps .spot { width: 84px; height: 62px; }
}

/* ================================================================
   ÉLŐ RÉTEG — vonalrajzolás görgetésre + kurzorra reagáló elemek
   Minden elrejtés a html.js-anim osztályhoz kötött: ha a JS nem fut,
   az illusztrációk azonnal, teljesen látszanak.
   ================================================================ */

/* --- 1. vonalrajzolás --- */
.js-anim [data-draw] path[pathLength] {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.js-anim [data-draw] :is(rect, circle, ellipse)[stroke],
.js-anim [data-draw] [fill-opacity],
.js-anim [data-draw] text {
  opacity: 0;
}
.js-anim [data-draw].in-view path[pathLength] {
  animation: rajzol 1.5s cubic-bezier(.55,.06,.28,1) forwards;
}
.js-anim [data-draw].in-view :is(rect, circle, ellipse)[stroke] {
  animation: bejon .7s .55s ease forwards;
}
.js-anim [data-draw].in-view [fill-opacity] { animation: bejon .9s .35s ease forwards; }
.js-anim [data-draw].in-view text { animation: bejon .6s .95s ease forwards; }
@keyframes rajzol { to { stroke-dashoffset: 0 } }
@keyframes bejon { from { opacity: 0 } to { opacity: 1 } }

/* rétegzett késleltetés, hogy a kép „felépüljön”, ne egyszerre villanjon */
.js-anim [data-draw].in-view > svg > g:nth-of-type(2) path[pathLength] { animation-delay: .1s }
.js-anim [data-draw].in-view > svg > g:nth-of-type(3) path[pathLength] { animation-delay: .2s }
.js-anim [data-draw].in-view > svg > g:nth-of-type(4) path[pathLength] { animation-delay: .3s }
.js-anim [data-draw].in-view > svg > g:nth-of-type(5) path[pathLength] { animation-delay: .4s }
.js-anim [data-draw].in-view > svg > g:nth-of-type(6) path[pathLength] { animation-delay: .5s }

/* a lépés-ikonok egymás után rajzolódnak */
.js-anim .steps.in-view li:nth-child(2) .spot path { animation-delay: .18s }
.js-anim .steps.in-view li:nth-child(3) .spot path { animation-delay: .36s }

/* --- 2. a tölcsér áramlása: menetelő szaggatás --- */
.art-funnel .flow { stroke-dasharray: .04 .05; animation: aramlik 3.4s linear infinite; }
@keyframes aramlik { to { stroke-dashoffset: -.9 } }
.js-anim [data-draw].in-view .art-funnel .flow,
.js-anim .art-wrap-funnel.in-view .flow {
  animation: rajzol 1.2s ease forwards, aramlik 3.4s linear 1.2s infinite;
}

/* --- 3. kurzor-parallaxis --- */
.plx { transition: translate .28s cubic-bezier(.2,.7,.3,1); }
.hero-visual { --mx: 0; --my: 0; }
@media (hover: hover) and (pointer: fine) {
  .plx { translate: calc(var(--mx) * var(--d, 10) * 1px) calc(var(--my) * var(--d, 10) * .6px); }
}

/* --- 4. kártya-reflektor a kurzor alatt --- */
.card, .plan, .steps li, .src { position: relative; overflow: hidden; }
.card::after, .plan::after, .steps li::after, .src::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(20rem 20rem at var(--px, 50%) var(--py, 50%),
    color-mix(in srgb, var(--c-sky) 16%, transparent), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::after, .plan:hover::after, .steps li:hover::after, .src:hover::after { opacity: 1; }
}
.steps li:nth-child(1)::after { background: radial-gradient(20rem 20rem at var(--px,50%) var(--py,50%), color-mix(in srgb, var(--c-terra) 16%, transparent), transparent 70%); }
.steps li:nth-child(2)::after { background: radial-gradient(20rem 20rem at var(--px,50%) var(--py,50%), color-mix(in srgb, var(--c-teal) 18%, transparent), transparent 70%); }
.steps li:nth-child(3)::after { background: radial-gradient(20rem 20rem at var(--px,50%) var(--py,50%), color-mix(in srgb, var(--c-mustard) 18%, transparent), transparent 70%); }
.plan-hi::after { background: radial-gradient(22rem 22rem at var(--px,50%) var(--py,50%), color-mix(in srgb, var(--c-plum) 18%, transparent), transparent 70%); }
/* a kártya tartalma a reflektor fölött marad */
.card > *, .plan > *, .steps li > *, .src > * { position: relative; z-index: 1; }

/* --- 5. mágneses gombok --- */
.btn { --bx: 0; --by: 0; translate: calc(var(--bx) * 1px) calc(var(--by) * 1px); transition: translate .18s ease, background var(--transition-interactive); }
.btn-primary:hover { box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--color-primary) 70%, transparent); }

/* --- 6. matrica és cimke kurzorra pördül --- */
@media (hover: hover) and (pointer: fine) {
  .sticker { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
  .sticker:hover { transform: rotate(1.8deg) scale(1.04); }
}

/* --- 7. „ceruzahegy”: a hero aláhúzás újrarajzol hoverre --- */
.hero h1 em:hover .scribble { animation: huz .8s cubic-bezier(.6,.05,.3,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-draw] path[pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js-anim [data-draw] :is(rect, circle, ellipse)[stroke],
  .js-anim [data-draw] [fill-opacity],
  .js-anim [data-draw] text { opacity: 1; }
  .art-funnel .flow { animation: none; }
  .plx { translate: none !important; }
  .btn { translate: none !important; }
}


/* sötét témában a csempe maradjon mély kék, hogy a tömbök kontrasztosak legyenek */

/* ================================================================
   HERO CÍM — kézzel rajzolt szövegbuborék, erős méretkontraszt,
   villogó szövegkurzor („most írod be”)
   ================================================================ */
.hero-title { position: relative; display: inline-block; padding: var(--space-6) var(--space-7) var(--space-8); margin-left: calc(-1 * var(--space-5)); }
.bubble {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.hero-title h1 { position: relative; z-index: 1; margin: 0; line-height: .96; }

.h1-a {
  display: block; font-size: clamp(1.9rem, 3.1vw, 2.6rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--color-text);
}
.h1-b {
  position: relative; display: inline-block; margin-top: .06em;
  font-size: clamp(2.9rem, 5.6vw, 4.6rem); font-weight: 700; font-style: italic;
  letter-spacing: -.035em; color: var(--color-primary);
}
.hero h1 { font-size: inherit; }

/* villogó kurzor a felkiáltójel után */
.caret {
  display: inline-block; width: .07em; height: .78em;
  margin-left: .1em; vertical-align: -.06em;
  background: var(--c-terra); animation: pislog 1.1s steps(1) infinite;
}
@keyframes pislog { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none } }

/* a buborék vonala görgetésre rajzolódik, utána marad */
.js-anim .hero-title .bubble path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-anim .hero-title.in-view .bubble path { animation: rajzol 1.4s .25s cubic-bezier(.55,.06,.28,1) forwards; }

/* mobilon a buborék ne szorítsa a szöveget */
@media (max-width: 620px) {
  .hero-title { padding: var(--space-5) var(--space-5) var(--space-7); margin-left: calc(-1 * var(--space-3)); }
  .h1-b { font-size: clamp(2.4rem, 12vw, 3.2rem); }
}

/* hero cím: marker-kiemelés az első sor alatt, nem tördelő második sor */
.hero-title { padding: 0; margin-left: 0; }
.h1-a .hl {
  position: relative; display: inline-block; padding: 0 .12em;
}
.h1-a .hl::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .42em;
  background: color-mix(in srgb, var(--c-mustard) 42%, transparent);
  border-radius: .1em; transform: rotate(-.6deg); z-index: -1;
}
.h1-b { white-space: nowrap; }
@media (max-width: 620px) { .h1-b { white-space: normal; } }


/* ================================================================
   LOGÓ — „Középpont”: a tér felülről, három gyűrűben.
   Külső: háztömbök. Középső terrakotta: az utcák. Mag: maga a tér.
   ================================================================ */
.brand { gap: var(--space-3); }
.mark { flex: none; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.mark rect, .mark circle { transform-box: fill-box; transform-origin: center; transition: all .38s cubic-bezier(.2,.7,.3,1); }
.brand:hover .mark { transform: rotate(-4deg); }
.brand:hover .lg-mid { transform: scale(1.14) rotate(8deg); }
.brand:hover .lg-core { transform: scale(1.4); }
.lg-core { animation: mag 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mag { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.18); opacity: .88 } }
@media (prefers-reduced-motion: reduce) { .lg-core { animation: none } .mark, .mark rect, .mark circle { transition: none } }

.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1; }
.wm-o { color: var(--c-terra); }
.site-head { padding-block: var(--space-3); }

/* partneri forrás linkje a kártyán */
.card-src { margin-top: var(--space-2); font-size: var(--text-xs); }
.card-src a { color: var(--color-primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); }
.card-src a:hover { border-bottom-color: currentColor; }

/* ================================================================
   PARTNERI BELÉPŐ
   ================================================================ */
#partner { background: linear-gradient(180deg, color-mix(in srgb, var(--c-teal) 8%, transparent), transparent 55%); }
#partner .kicker { color: var(--c-teal); }
#partner .kicker::after { background: var(--c-teal); }
#partner .section-head::before { color: var(--c-teal); }

.partner-grid { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 1000px) { .partner-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; } }

.partner-why h3 {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-base);
  margin: var(--space-7) 0 var(--space-3);
}
.partner-why h3:first-child { margin-top: 0; }
.partner-why ul { display: grid; gap: var(--space-3); }
.partner-why ul li { padding-left: var(--space-5); position: relative; color: var(--color-text-muted); }
.partner-why ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--c-teal);
}
.partner-why p { color: var(--color-text-muted); }
.partner-why code, .partner-compat code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--color-surface-offset); padding: .1em .35em; border-radius: var(--radius-sm);
}

.partner-steps { display: grid; gap: var(--space-3); }
.partner-steps li {
  display: flex; gap: var(--space-4); align-items: baseline;
  color: var(--color-text-muted);
}
.partner-steps span {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700;
  background: var(--c-teal); color: #fff;
}

.feedbox {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--c-mint); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.fs-row { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.fs-row strong { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.fs-row span { font-size: var(--text-sm); color: var(--color-text-muted); }
.fs-sema { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }
.fs-sema code { font-family: ui-monospace, Menlo, monospace; }
.feed-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; }

.codebox {
  margin-top: var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
}
.codehead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface-offset);
}
.codehead .panel-label { margin: 0; }
.codebox pre {
  margin: 0; padding: var(--space-4) var(--space-5); overflow-x: auto;
  max-height: 26rem; font-size: var(--text-xs); line-height: 1.6;
}
.codebox code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-text); white-space: pre;
}
.partner-compat { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }

.partner-form {
  margin-top: var(--space-6); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6);
  display: grid; gap: var(--space-4);
}
.fld-row { display: grid; gap: var(--space-4); }
@media (min-width: 620px) { .fld-row { grid-template-columns: 1fr 1fr; } }
.partner-msg { font-size: var(--text-sm); color: var(--c-mint); min-height: 1.4em; }
.partner-why h3 { margin-top: 2.4rem; margin-bottom: .8rem; }
.partner-why h3:first-child { margin-top: 0; }
.partner-why > p { margin-bottom: .4rem; }

/* a kódblokkok ne tolják szét a mobilt */
.partner-grid > * { min-width: 0; }
.codebox, .codebox pre, .feedbox, .partner-form { min-width: 0; max-width: 100%; }
.fs-row { flex-wrap: wrap; }
@media (max-width: 700px) {
  .codebox code { white-space: pre-wrap; word-break: break-word; }
  .codebox pre { max-height: 20rem; }
}

/* nyilvános előnézet jelzése, ha a backend nem érhető el */
.offline-bar {
  background: var(--color-warning-soft); color: var(--color-warning);
  border-bottom: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
  padding: var(--space-3) var(--space-6); font-size: var(--text-xs); line-height: 1.55;
  text-align: center;
}
.offline-bar[hidden] { display: none !important; }

/* ================================================================
   MINDIG VILÁGOS — a sötét téma ki van kapcsolva.
   A dark tokenek a fájlban maradnak (ha később mégis kellene),
   de semmi nem aktiválja őket: nincs váltógomb és nincs
   prefers-color-scheme szabály sem.
   ================================================================ */
:root { color-scheme: light; }
html, body { background: var(--color-bg); color: var(--color-text); }

/* összecsukható technikai blokk a partneri szekcióban */
.tech-fold { margin-top: var(--space-5); }
.tech-fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--c-teal); border-radius: var(--radius-lg);
  font-weight: 600; color: var(--color-text); font-size: var(--text-sm);
  transition: background var(--transition-interactive);
}
.tech-fold > summary::-webkit-details-marker { display: none; }
.tech-fold > summary:hover { background: var(--color-surface-offset); }
.tech-hint { font-weight: 400; font-size: var(--text-xs); color: var(--color-text-faint); }
.tech-close { display: none; }
.tech-fold[open] > summary .tech-open { display: none; }
.tech-fold[open] > summary .tech-close { display: inline; }
.tech-fold[open] > summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-bottom: 0; }
.tech-fold .codebox:first-of-type { margin-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.site-foot a { color: var(--color-primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); }
.site-foot a:hover { border-bottom-color: currentColor; }

/* nyelvváltó a fejlécben */
.lang-switch {
  flex: none; display: inline-grid; place-items: center;
  min-width: 40px; height: 34px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--color-text-muted); text-decoration: none;
  transition: color var(--transition-interactive), border-color var(--transition-interactive), background var(--transition-interactive);
}
.lang-switch:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft); }
@media (max-width: 820px) { .lang-switch { margin-left: auto; } }

/* stílusjelölés a riportkártyán */
.style-flag {
  flex: none; padding: 2px var(--space-2); border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.style-flag.is-on {
  background: color-mix(in srgb, var(--c-mint) 12%, #fff);
  color: color-mix(in srgb, var(--c-mint) 78%, #0B2B1C);
  border: 1px solid color-mix(in srgb, var(--c-mint) 32%, #fff);
}
.style-flag.is-off {
  background: color-mix(in srgb, var(--c-mustard) 14%, #fff);
  color: color-mix(in srgb, var(--c-mustard) 72%, #2A1D00);
  border: 1px solid color-mix(in srgb, var(--c-mustard) 34%, #fff);
}

/* ================================================================
   ÉLŐ BELÉPŐ — a beíró a hero-ban, a felismert szavak átrepülnek
   a jobb oldali kártyára. A felismerés helyben fut, szerver nélkül,
   így azonnali; a nagy gomb adja át a szöveget a valódi motornak.
   ================================================================ */

.hero-live { margin: var(--space-6) 0 var(--space-4); }

.live-label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* a beíró és a mögötte lévő tükör pontosan egymáson fekszik */
.live-box { position: relative; }

.live-mirror,
.live-input {
  width: 100%;
  min-height: 7.2rem;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--text-lg);
  line-height: 1.55;
  letter-spacing: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  border: 2px solid var(--color-border);
}

.live-mirror {
  position: absolute; inset: 0;
  color: transparent;
  background: #fff;
  border-color: transparent;
  pointer-events: none;
  overflow: hidden;
}

.live-input {
  position: relative;
  display: block;
  background: transparent;
  color: var(--color-text);
  resize: vertical;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.live-input::placeholder { color: var(--color-text-subtle); }
.live-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

/* a felismert szórészek kiemelése a tükörben */
.live-mirror mark {
  color: transparent;
  background: color-mix(in srgb, var(--c-mustard) 22%, #fff);
  border-radius: 4px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-mustard) 55%, #fff) inset,
              0 -2px 0 color-mix(in srgb, var(--c-mustard) 45%, #fff) inset;
  animation: live-glow .5s ease-out;
}
.live-mirror mark.m-hely  { background: color-mix(in srgb, var(--c-sky) 20%, #fff); }
.live-mirror mark.m-ar    { background: color-mix(in srgb, var(--c-mint) 20%, #fff); }
.live-mirror mark.m-stilus{ background: color-mix(in srgb, var(--c-plum) 20%, #fff); }
.live-mirror mark.m-puha  { background: color-mix(in srgb, var(--c-teal) 18%, #fff); }

@keyframes live-glow {
  from { background-color: color-mix(in srgb, var(--c-mustard) 60%, #fff); }
}

.chips-live { margin-top: var(--space-3); }
.chips-live .chip { font-size: var(--text-xs); padding: 6px var(--space-3); }

.live-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-subtle);
}

/* --- jobb oldali értelmező kártya --- */
.hero-side { display: grid; gap: var(--space-5); align-content: start; }

.live-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: 0 1px 2px rgba(22, 35, 59, .04), 0 12px 32px -18px rgba(22, 35, 59, .18);
  min-height: 12rem;
}
.live-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.live-card-title {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.live-count {
  font-size: var(--text-xs); font-weight: 700; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.live-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }

.live-tag {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-primary) 26%, #fff);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong, var(--color-primary));
  font-size: var(--text-sm); font-weight: 600;
  animation: tag-pop .32s cubic-bezier(.34, 1.56, .64, 1);
}
.live-tag b { font-weight: 700; }
.live-tag .t-kulcs {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: .62;
}
.live-tag.t-hely   { border-color: color-mix(in srgb, var(--c-sky) 34%, #fff);      background: color-mix(in srgb, var(--c-sky) 11%, #fff);      color: color-mix(in srgb, var(--c-sky) 74%, #0B1B33); }
.live-tag.t-ar     { border-color: color-mix(in srgb, var(--c-mint) 34%, #fff);     background: color-mix(in srgb, var(--c-mint) 11%, #fff);     color: color-mix(in srgb, var(--c-mint) 76%, #06231A); }
.live-tag.t-stilus { border-color: color-mix(in srgb, var(--c-plum) 34%, #fff);     background: color-mix(in srgb, var(--c-plum) 11%, #fff);     color: color-mix(in srgb, var(--c-plum) 74%, #200A26); }
.live-tag.t-puha   { border-color: color-mix(in srgb, var(--c-teal) 34%, #fff);     background: color-mix(in srgb, var(--c-teal) 11%, #fff);     color: color-mix(in srgb, var(--c-teal) 76%, #042224); }
.live-tag.t-meret  { border-color: color-mix(in srgb, var(--c-mustard) 36%, #fff);  background: color-mix(in srgb, var(--c-mustard) 12%, #fff);  color: color-mix(in srgb, var(--c-mustard) 74%, #241800); }

@keyframes tag-pop {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}

.live-empty { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }

/* --- az átrepülő cetli --- */
.fly-chip {
  position: fixed; z-index: 60;
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--c-mustard) 20%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-mustard) 46%, #fff);
  color: var(--color-text);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px -10px rgba(22, 35, 59, .35);
}

/* a hero illusztráció halkabb és kisebb, hogy a beíró vezessen */
.hero-side .hero-visual { opacity: .9; }

@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .hero-side .hero-art { max-width: 100%; }
}

@media (max-width: 999px) {
  .hero-side { gap: var(--space-4); }
  .live-card { min-height: 0; }
  .live-mirror, .live-input { font-size: var(--text-base); min-height: 6rem; }
}

/* négy tény két hasábban, kisebb betűvel — nem nyomja le a beírót */
.hero-facts-tight { margin-top: var(--space-5); }
@media (min-width: 720px) {
  .hero-facts-tight { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-5); }
  .hero-facts-tight li { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .live-mirror mark, .live-tag { animation: none; }
}

/* ----------------------------------------------------------------
   Mobil sorrend: a beíró után azonnal az értelmező kártya jöjjön,
   ne a tények és az illusztráció. A két burkolót átlátszóvá tesszük
   a rácsban, így a gyerekeik egy sorrendbe rendezhetők.
   ---------------------------------------------------------------- */
@media (max-width: 999px) {
  .hero { display: flex; flex-direction: column; }
  .hero > .hero-inner,
  .hero > .hero-side { display: contents; }

  .hero .eyebrow    { order: 1; }
  .hero .hero-title { order: 2; }
  .hero .lead       { order: 3; }
  .hero .hero-live  { order: 4; }
  .hero .live-card  { order: 5; margin-top: var(--space-5); }
  .hero .hero-facts { order: 6; margin-top: var(--space-10); }
  .hero .sticker-hero { order: 7; }
  .hero .hero-visual { order: 8; margin-top: var(--space-6); }

  /* a display:contents miatt a szélességet a gyerekeknek adjuk */
  .hero .hero-title, .hero .lead, .hero .hero-live, .hero .live-card,
  .hero .hero-facts, .hero .hero-visual { max-width: 100%; width: 100%; }
}

/* a nyelvi modell által felismert címke: halvány pont jelzi */
.live-tag.is-ai { position: relative; }
.live-tag.is-ai::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .45; align-self: center;
}

/* ============================================================
   MOBIL MENÜ ÉS ALOLDALAK
   Mobilon eddig nem volt navigáció: a .nav display:none volt,
   nyitógomb nélkül. Innentől van gomb, és a menü lenyíló panel.
   ============================================================ */

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 44px; height: 44px;              /* ujjal is eltalálható méret */
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
}
.nav-toggle-vonal,
.nav-toggle-vonal::before,
.nav-toggle-vonal::after {
  position: absolute; left: 50%; width: 18px; height: 2px;
  background: var(--color-text); border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle-vonal { top: 50%; margin-top: -1px; }
.nav-toggle-vonal::before { content: ""; top: -6px; }
.nav-toggle-vonal::after  { content: ""; top: 6px; }

/* Nyitott állapotban a középső vonal eltűnik, a másik kettő X-be fordul.
   Fontos: itt NEM opacity-t használunk, hanem átlátszó hátteret — az
   opacity a gyerek elemekre is vonatkozik, ezért az X vonalai is
   láthatatlanok lettek, és a gomb üres fehér négyzetnek tűnt. */
.nav-toggle[aria-expanded="true"] .nav-toggle-vonal { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-vonal::before {
  opacity: 1; top: 0; transform: translateX(-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-vonal::after {
  opacity: 1; top: 0; transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    top: 100%; right: var(--space-4); left: var(--space-4);
    flex-direction: column;
    gap: 0;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -18px rgb(28 28 26 / .28);
    z-index: 40;
  }
  .nav.nyitva { display: flex; }
  .nav a {
    padding: var(--space-3) var(--space-3);
    border-radius: 10px;
    font-size: var(--text-base);
    color: var(--color-text);
  }
  .nav a + a { border-top: 1px solid var(--color-border); border-radius: 0; }
  .nav a:hover, .nav a:focus-visible { background: var(--color-bg); }
  .nav a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }

  .site-head { position: relative; }
  /* a nyelvváltó és a próba gomb a gomb mellett is elférjen */
  .head-actions .btn { padding-inline: var(--space-3); }
}

/* --- aloldalak: visszalépés a főoldalra --- */

.aloldal main { padding-top: var(--space-5); }

.vissza-felul, .vissza-alul {
  /* ugyanaz a belső margó és tartalomszélesség, mint a szakaszoknál,
     hogy a gomb a tartalom bal szélével egy vonalban álljon */
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}
.vissza-alul {
  padding-block: var(--space-7) var(--space-8);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-7);
}

.vissza-link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem .55rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.vissza-link:hover, .vissza-link:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateX(-2px);
}
.vissza-link span { font-size: 1.05em; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .vissza-link, .nav-toggle-vonal,
  .nav-toggle-vonal::before, .nav-toggle-vonal::after { transition: none; }
}

/* apró visszaút a pontosító mező mellett: a beíró a lap tetején van */
.panel-fine { margin: var(--space-3) 0 0; font-size: var(--text-xs); }
.panel-fine a { color: var(--color-text-muted); text-decoration: none; }
.panel-fine a:hover, .panel-fine a:focus-visible {
  color: var(--color-primary); text-decoration: underline;
}

/* ============================================================
   NYITÓKÉPERNYŐ ÚJRARENDEZÉS
   Három baj volt: a gomb a hajtás alá esett (1222 px magas hero
   900 px-es ablakban), az üres értelmező kártya nagyobb volt,
   mint maga a beíró (640×192 px egyetlen sor szöveggel), és a
   két hasáb szélessége nem illett egymáshoz.
   ============================================================ */

/* 1) Az értelmező most a beíró alatt ül, és amíg nincs mit mutatni,
      nem foglal helyet — csak egy halk sor jelzi, mi fog történni. */
.hero .live-card {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
  min-height: 0;
}
.hero .live-card:not(.van-cimke) {
  padding: 0;
  border: 0;
  background: none;
  margin-top: var(--space-3);
}
.hero .live-card:not(.van-cimke) .live-card-head { display: none; }
.hero .live-card:not(.van-cimke) .live-empty {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.hero .live-card.van-cimke .live-empty { display: none; }
.hero .live-card-head { margin-bottom: var(--space-3); }
.hero .live-tags { margin: 0; }

/* 2) Kevesebb üresjárat, hogy a gomb a hajtás fölé kerüljön. */
.hero { padding-top: clamp(var(--space-8), 4.5vw, var(--space-14)); }
.hero .eyebrow { margin-bottom: var(--space-3); }
.hero .lead { margin-top: var(--space-4); }
.hero-live { margin: var(--space-5) 0 var(--space-3); }
.hero .hero-cta { margin-top: var(--space-5); }
.hero .live-note { margin-top: var(--space-3); }

/* a példák tömörebbek: mind a négy megmarad, teljes mondattal */
.hero .chips-live { gap: var(--space-2); margin-top: var(--space-4); }
.hero .chips-live .chip {
  min-height: 34px;
  padding: var(--space-2) var(--space-4);
  line-height: 1.35;
}

/* a tények és a matrica lentebb: nem az első benyomás része */
.hero .hero-facts { margin-top: var(--space-10); padding-top: var(--space-6); }

/* 3) A jobb oldalon már csak az illusztráció van, és kitölti a helyet. */
.hero-side { align-content: stretch; }
.hero-side .hero-visual { margin-top: 0; display: grid; align-content: center; }
.hero-side .hero-art { max-width: 100%; }

@media (max-width: 900px) {
  /* mobilon a kártya a beíró alatt marad, külön sorrend nem kell */
  .hero .live-card { order: unset; margin-top: var(--space-4); }
}

/* Amint van szöveg a beíróban, a példák félreállnak: onnantól ők tolnák
   a gombot a hajtás alá. Üres mezőnél viszont mind a négy ott van. */
.hero-live.van-szoveg .chips-live { display: none; }

/* ============================================================
   NYITÓKÉPERNYŐ: RENDEZÉS
   Mert amit mértem: az illusztráció 672 px széles volt egy 640 px-es
   sávban (negatív margóval kifutott a jobb szélre), a bal sáv 672 px
   volt, benne 544 px tartalommal — tehát 128 px kihasználatlanul —,
   a négy példa szélessége pedig 526 / 467 / 347 / 357 px, vagyis
   csipkézett jobb szél. Egyik sem szándékosnak látszott.
   ============================================================ */

@media (min-width: 1000px) {
  /* A bal sáv pont annyi, amennyit a tartalom használ; a jobb sáv a maradék.
     Így nincs többé néma üres szalag a beíró és az illusztráció között. */
  .hero {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    gap: clamp(var(--space-8), 4vw, var(--space-12));
    align-items: start;
  }
  .hero-inner { max-width: 100%; }

  /* Az illusztráció a saját sávjában marad, és ugyanolyan lekerekítéssel,
     mint a beíró — így a két oldal egy rendszer része, nem két külön ötlet. */
  .hero-side .hero-visual { margin-right: 0; }
  .hero-side .art-wrap,
  .hero-side .hero-art {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .hero-art-note { max-width: 100%; }
}

@media (min-width: 1400px) {
  .hero { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
}

/* A négy példa egyforma szélességű, egymás alatt: nincs csipkézett jobb szél,
   és mind a négy mondat teljes egészében olvasható. */
.hero .chips-live {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.hero .chips-live .chip {
  width: 100%;
  text-align: left;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

/* A címke és a lábjegyzet ugyanarra a bal vonalra, mint a beíró. */
.hero .live-label,
.hero .live-note,
.hero .live-empty { padding-inline: 0; }

/* A felvezető sor és a főcím is soron belüli elem volt (inline-flex, illetve
   inline-block), tehát egy sorba kerülhettek. Eddig csak azért nem kerültek,
   mert nem fértek el egymás mellett — a hasáb szélesítésével elfértek, és a
   cím felugrott a felvezető mellé, rá az illusztrációra. Mindkettő kapjon
   saját sort; a cím szélessége maradjon a szöveghez szabott, hogy a
   kiemelő háttér ne nyúljon túl a betűkön. */
.hero .eyebrow { display: flex; width: fit-content; }
.hero .hero-title { display: block; width: fit-content; max-width: 100%; }

@media (min-width: 1000px) {
  /* Asztali gépen nem kell 44 px-es érintőcél a példáknál, ott egérrel
     kattint az ember. Mobilon marad a nagyobb méret. */
  .hero .chips-live .chip { min-height: 38px; padding: var(--space-2) var(--space-4); }
}

@media (max-width: 999px) {
  /* Telefonon a négy teljes mondat két sorba tördelődik, és együtt lenyomják
     a nagy gombot a hajtás alá. Ezért itt a példák a gomb UTÁN jönnek:
     mind a négy megmarad, de először a gomb látszik. */
  .hero-live { display: flex; flex-direction: column; }
  /* A gomb közvetlenül a mező alá kerül, az értelmező kártya ELÉ. Ha ugyanis
     a kártya jön előbb, hét címke esetén már négy sorba tördelődik, és a
     gombot 948 px-re nyomja egy 844 px-es kijelzőn. Így viszont bármennyi
     címke jöhet: a gomb ott van, ahol az ujj is. */
  .hero-live > .live-label { order: 1; }
  .hero-live > .live-box   { order: 2; }
  .hero-live > .hero-cta   { order: 3; margin-top: var(--space-4); }
  .hero-live > .live-card  { order: 4; margin-top: var(--space-4); }
  .hero-live > .live-note  { order: 5; }
  .hero-live > .chips-live { order: 6; margin-top: var(--space-6); }

  /* a kártya feje egy sorban maradjon, ne vigyen el két sort */
  .hero .live-card-head { display: flex; align-items: baseline; gap: var(--space-3); }
  .hero .live-card-title { font-size: 10px; letter-spacing: .08em; }
  .hero .live-count { font-size: 10px; margin-left: auto; white-space: nowrap; }
  .hero .live-tags { gap: var(--space-2); }
  .hero .live-tag { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
}

/* ============================================================
   SZŰK TELEFONOK (320 px)
   Öt rács fix képpontos alsó határral dolgozott — a figyeléslista
   320 px-es kártyája egy 320 px-es kijelzőn a belső margóval együtt
   nem fér el, ezért vízszintes csúszka jelent meg. A min() azt
   mondja: legyen 320 px, de soha ne több, mint a rendelkezésre álló
   szélesség. Nagyobb kijelzőn semmi nem változik.
   ============================================================ */
.hero-facts { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.srcs       { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.steps      { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.plans      { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.watches    { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* a hosszú, tördelhetetlen szövegek se feszítsék szét a lapot */
.watch-sentence, .live-input, .live-mirror, .chip, .card h4, .src h4 {
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  /* A legkisebb kijelzőkön (320×568, régi iPhone SE) a főcím három sorba
     tördelődik, és emiatt a gomb pár képponttal a hajtás alá esik.
     Kisebb címmel két sor lesz, és minden befér. */
  .hero h1 { font-size: var(--text-xl); }
  .hero .lead { font-size: var(--text-sm); }
  .hero-live { margin-top: var(--space-4); }
  .hero .live-input, .hero .live-mirror { font-size: var(--text-sm); }
}

@media (max-width: 400px) {
  /* Szűk kijelzőn a márkajel, a menügomb, a nyelvváltó és a próba gomb
     együtt nem fér el: a menügomb összenyomódott. A próba gomb itt
     elhagyható, mert a nyitóképernyőn közvetlenül alatta ott van ugyanaz. */
  .site-head .head-actions { display: none; }
  .site-head { gap: var(--space-2); }
  .nav-toggle { flex: none; }
  .lang-switch { flex: none; }
}

@media (max-width: 360px) {
  /* 320×568-as kijelzőn a fejléc, a felvezető sor, a cím, a bevezető, a
     mezőcímke, a mező és a gomb együtt 649 képpont — 81-cel több, mint
     amennyi van. Angolul a szövegek hosszabbak, ezért ott a legszűkebb.
     Ilyen kis kijelzőn a mező és a gomb az elsődleges; a díszítő felvezető
     sor és a mezőcímke elhagyható, a helyőrző szöveg elmondja ugyanazt. */
  .hero .eyebrow { display: none; }
  .hero .live-label { position: absolute; width: 1px; height: 1px;
                      overflow: hidden; clip-path: inset(50%); }
  .hero .lead { margin-top: var(--space-2); }
  .hero .live-input, .hero .live-mirror { min-height: 5.2rem; }
  .hero-live { margin-top: var(--space-3); }
}

/* ============================================================
   JELENTÉS-BEPILLANTÓ a jobb hasáb alján
   A jobb oldal alsó fele üresen állt, míg a bal tele volt: ez
   billegtette a képet. Ide a termék lényege kerül — hogy hogyan
   néz ki maga a reggeli jelentés. Példa, nem élő adat, és ezt
   ki is írjuk, hogy senki ne keresse rá ezeket a tételeket.
   ============================================================ */

.hero-peek {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.peek-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.peek-title {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.peek-note {
  margin-left: auto; font-size: var(--text-xs); color: var(--color-text-faint);
  border: 1px dashed var(--color-border); border-radius: var(--radius-full);
  padding: 1px var(--space-3);
}

.peek-list { display: grid; gap: var(--space-2); }
.peek-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  max-width: none;
}
.peek-tag {
  flex: none; font-size: var(--text-xs); font-weight: 500;
  padding: 2px var(--space-3); border-radius: var(--radius-full);
}
.peek-drop    { background: var(--color-success-soft); color: var(--color-success); }
.peek-new     { background: var(--color-primary-soft); color: var(--color-primary); }
.peek-auction { background: var(--color-warning-soft); color: var(--color-warning); }

.peek-where {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text);
}
.peek-num {
  flex: none; font-family: var(--font-ui); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

.peek-foot {
  margin-top: var(--space-4); font-size: var(--text-xs);
  color: var(--color-text-muted); line-height: 1.5;
}

@media (max-width: 999px) {
  /* mobilon az illusztráció után jön, a lap végén — ott már nem szorít */
  .hero .hero-peek { order: 9; margin-top: var(--space-6); width: 100%; }
}

/* Nagyon széles kijelzőn a jobb hasáb 1200 képpont fölé nőtt, és a kártya
   három rövid sora ezen elnyúlt. A kártya szélessége korlátos, és balra
   igazodik — az illusztráció bal élével egy vonalban. */
@media (min-width: 1600px) {
  .hero-peek { max-width: 40rem; }
}

@media (max-width: 360px) {
  /* 320 képpontos kijelzőn a címke, a helynév és a szám együtt kilógott a
     sorból. Szorosabb belső margó és tördelhető helynév a megoldás. */
  .peek-row { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .peek-tag { padding: 1px var(--space-2); font-size: 10px; }
  .peek-where { font-size: var(--text-xs); }
  .peek-num { font-size: var(--text-xs); }
  .hero-peek { padding: var(--space-4); }
}

/* ==========================================================================
   BELÉPÉS
   Szöveggomb a fejlécben, és egy párbeszédpanel két lépéssel: cím, majd kód.
   Külön lapot szándékosan nem kap: a belépés nem cél, csak egy kapu, és aki
   épp a mondatát írja, azt nem akarjuk elvinni az oldalról.
   ========================================================================== */
.btn-link {
  background: none;
  border: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: .95rem;
  color: var(--color-ink-soft, #55534c);
  cursor: pointer;
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
.btn-link:hover { color: var(--color-primary, #1f5f5b); }
.btn-link:focus-visible { outline: 2px solid var(--color-primary, #1f5f5b); outline-offset: 2px; }

.fiok { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.fiok-email {
  font-size: .85rem;
  color: var(--color-ink-soft, #55534c);
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.belep {
  /* A párbeszédpanel középre: margin auto nélkül a böngésző a bal felső
     sarokba teszi, mert a szélességet mi adjuk meg. */
  margin: auto;
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border: 1px solid var(--color-line, #e6e4de);
  border-radius: 18px;
  padding: 30px 30px 26px;
  background: #fff;
  color: var(--color-ink, #1c1c1a);
  box-shadow: 0 24px 60px -20px rgb(28 28 26 / .28);
}
.belep::backdrop { background: rgb(28 28 26 / .42); }
.belep h2 { margin: 0 0 8px; font-size: 1.28rem; line-height: 1.25; }
.belep-alcim { margin: 0 0 20px; font-size: .95rem; color: var(--color-ink-soft, #55534c); }
.belep-x { display: flex; justify-content: flex-end; margin: -12px -10px 0 0; }
.belep-zar {
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--color-ink-soft, #55534c); cursor: pointer; padding: 2px 8px; border-radius: 8px;
}
.belep-zar:hover { color: var(--color-ink, #1c1c1a); }
.belep-cimke {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--color-ink-soft, #55534c); margin-bottom: 6px;
}
.belep-mezo {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font: inherit;
  border: 1px solid var(--color-line, #e6e4de);
  border-radius: 11px;
  background: var(--color-surface, #faf9f6);
  color: inherit;
}
.belep-mezo:focus-visible {
  outline: 2px solid var(--color-primary, #1f5f5b);
  outline-offset: 1px;
  background: #fff;
}
/* A kód olvasható legyen telefonon is: nagy, ritkított, egyenletes szélességű. */
.belep-kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  letter-spacing: .22em;
  text-align: center;
}
.belep-fo { width: 100%; margin-top: 16px; justify-content: center; }
.belep-uzenet { margin: 12px 0 0; font-size: .9rem; min-height: 1.2em; }
.belep-uzenet[data-hiba="1"] { color: #9c3121; }
.belep-apro { margin: 16px 0 0; font-size: .82rem; color: var(--color-ink-soft, #55534c); }
.belep-vissza { display: block; margin: 14px auto 0; }

@media (max-width: 420px) {
  .belep { padding: 24px 20px 20px; border-radius: 14px; }
  .belep h2 { font-size: 1.15rem; }
  .fiok-email { max-width: 7rem; }
}

/* A szűk kijelzőn a fejléc gombsora el van rejtve (max-width: 400px), ezért a
   belépés ott a burger menüből érhető el. Enélkül telefonon egyáltalán nem
   lehetett volna belépni — ugyanaz a hiba, mint korábban a hiányzó mobilmenü. */
.nav-fiok { display: none; }
@media (max-width: 400px) {
  .nav-fiok {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid var(--color-line, #e6e4de);
    margin-top: 6px;
    padding: 12px 0 4px;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary, #1f5f5b);
    cursor: pointer;
  }
}

/* ==========================================================================
   EGY MEZŐ, EGY GOMB, FOLYTONOS EREDMÉNY
   A második beíró mező megszűnt, ezért az értelmezés egy hasábon fut, de nem
   ér el a szélekig: a hosszú sor olvashatatlan. A javítás a lap tetején lévő
   mezőben történik, oda mutat a lábjegyzet.
   ========================================================================== */
.demo-grid.demo-egy { grid-template-columns: 1fr; max-width: 56rem; }
.demo-grid.demo-egy .panel-out { padding: var(--space-6) var(--space-6) var(--space-5); }
.result-fine {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.result-fine a { color: var(--color-primary); }

/* ==========================================================================
   A NAPI JELENTÉS KÉRÉSE — a jelentés alatt, egyetlen mezővel
   Csak akkor jelenik meg, ha már van jelentés: előtte nincs miért kérni.
   ========================================================================== */
.napi {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .napi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: var(--space-6); }
}
.napi-szoveg h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: 1.25; }
.napi-szoveg p { margin: 0; color: var(--color-text-soft); font-size: var(--text-sm); }
.napi-cimke {
  display: block; font-size: var(--text-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2);
}
.napi-sor { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.napi-sor input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: inherit;
}
.napi-sor input:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 1px; background: #fff;
}
.napi-sor .btn { flex: 0 0 auto; }
.napi-uzenet { margin: var(--space-3) 0 0; font-size: var(--text-sm); min-height: 1.2em; }
.napi-uzenet[data-hiba="1"] { color: #9c3121; }
.napi-tobb { margin-top: var(--space-3); font-size: var(--text-sm); }
.napi-tobb summary { cursor: pointer; color: var(--color-primary); }
.napi-tobb-belso { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.napi-tobb-belso .fld { flex: 1 1 12rem; min-width: 0; }
.napi-apro { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-text-faint); }

@media (max-width: 420px) {
  .napi { padding: var(--space-5) var(--space-4); }
  .napi-sor .btn { width: 100%; justify-content: center; }
}

/* Az ár/m² egy egység: szűk kijelzőn eddig „1,14” és „M Ft/m²” két sorba szakadt. */
.ppsm, .strike { white-space: nowrap; }

/* A magyarázó mondat helye, amíg a modell írja. Halkan lélegzik, hogy látszódjon:
   dolgozik, nem elakadt. Csökkentett mozgásnál csak halvány, nem animált. */
.why-keszul { color: var(--color-text-faint); font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .why-keszul { animation: whyLeleg 1.6s ease-in-out infinite; }
  @keyframes whyLeleg { 0%,100% { opacity: .55 } 50% { opacity: .95 } }
}

/* ==========================================================================
   EGY TÉTELES FELTÖLTŐ ŰRLAP (partneri felület)
   Munkaeszköz, nem marketinglap: sűrűbb, mint a többi szakasz, és az eredmény
   mindig látszik a beküldés mellett.
   ========================================================================== */
.ft-grid {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .ft-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .ft-oldal { position: sticky; top: var(--space-6); }
}

.ft-blokk { border: 0; padding: 0; margin: 0 0 var(--space-6); }
.ft-blokk legend { padding: 0; margin-bottom: var(--space-3); }
.ft-urlap .fld { margin-bottom: var(--space-4); }
.ft-kell {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-terra, #c2410c);
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--space-2);
}
.ft-sugo {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.5;
}
.ft-jelolok { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.ft-jelolo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  /* Az érintési felület ne legyen apróbb, mint amit ujjal el lehet találni. */
  min-height: 44px;
  align-items: center;
  cursor: pointer;
}
.ft-jelolo input { width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); }
.ft-tovabbi { margin-bottom: var(--space-5); }
.ft-tovabbi summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  padding: var(--space-2) 0;
}
.ft-uzenet { margin: var(--space-4) 0 0; font-size: var(--text-sm); min-height: 1.3em; }
.ft-uzenet[data-hiba="1"] { color: #9c3121; }

.ft-eredmeny { margin-bottom: var(--space-6); }
.ft-eredmeny code {
  background: var(--color-surface-offset);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: .92em;
}
.ft-ok, .ft-nem { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.55; }
.ft-ok { color: var(--color-success, #166b36); }
.ft-nem { color: #9c3121; }
.ft-lista { margin: 0 0 var(--space-3); padding-left: var(--space-5); font-size: var(--text-sm); }
.ft-lista li { margin-bottom: var(--space-2); }
.ft-tudni { border-top: 1px solid var(--color-divider); padding-top: var(--space-5); }
.ft-tudni ul { margin: 0; padding-left: var(--space-5); }
.ft-tudni li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #c0533c; }

/* --- Érdeklődés a kártyán ---------------------------------------------------
   Link nélküli tételnél a kártya alján nyílik. Szándékosan visszafogott: a
   jelentés a főszereplő, ez csak a kijárat. */
.card-src button.erdeklodes-nyit {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.card-src button.erdeklodes-nyit:hover { text-decoration-thickness: 2px; }

.erdeklodes-urlap {
  margin-top: 0.65rem;
  padding: 0.8rem 0.9rem;
  background: #f4f6fa;
  border: 1px solid #dde3ee;
  border-radius: 10px;
}
.erdeklodes-urlap .erd-sugo {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #4a5568;
}
.erdeklodes-urlap .erd-cimke {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.erdeklodes-urlap .erd-mail {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1px solid #c9d2e3;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
}
.erdeklodes-urlap .erd-mail:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.erdeklodes-urlap .erd-gombok {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.erdeklodes-urlap .erd-kuld,
.erdeklodes-urlap .erd-megse {
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.erdeklodes-urlap .erd-kuld {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.erdeklodes-urlap .erd-kuld[disabled] { opacity: 0.6; cursor: default; }
.erdeklodes-urlap .erd-megse {
  background: #fff;
  color: #4a5568;
  border-color: #c9d2e3;
}
.erdeklodes-urlap .erd-uzenet {
  margin: 0.55rem 0 0;
  font-size: 0.87rem;
  line-height: 1.45;
}
.erdeklodes-urlap .erd-uzenet:empty { margin: 0; }
.erdeklodes-urlap .erd-uzenet.is-hiba { color: #b3261e; }
.erdeklodes-urlap .erd-uzenet.is-kesz { color: #1c6b3a; margin: 0; }