/* mi-terkep.com — Light Terra design system (MEGAPLAN B)
   Layout lineage: finlytic structure re-skinned light + APEX trust strip
   (frontend-design-references), cartographic brand layer per brand portfolio. */

/* ---------- fonts (self-hosted, latin + latin-ext for ő/ű) ---------- */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin.woff2') format('woff2');
 font-weight:100 900;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
 font-weight:100 900;font-style:normal;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');
 font-weight:100 900;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
 font-weight:100 900;font-style:normal;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jbmono-latin.woff2') format('woff2');
 font-weight:100 800;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jbmono-latin-ext.woff2') format('woff2');
 font-weight:100 800;font-style:normal;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- tokens ---------- */
:root{
 --bg:#ffffff; --bg-alt:#f8f9fb; --bg-wash:#eef2f7;
 --ink:#1a1a2e; --ink-2:#5a6178; --ink-3:#9ca3af;
 --accent:#2563eb; --accent-deep:#1e40af; --terra:#0ea5e9; --terra-soft:#e0f2fe;
 --ok:#16a34a; --warn:#ca8a04; --crit:#dc2626;
 --bd:#e5e7eb; --card:#ffffff; --header-glass:rgba(255,255,255,.86);
 --font-display:'Fraunces',Georgia,serif;
 --font-body:'Inter',-apple-system,'Segoe UI',sans-serif;
 --font-mono:'JetBrains Mono',ui-monospace,monospace;
 --radius:14px; --radius-s:9px;
 --shadow:0 1px 2px rgba(37,99,235,.06),0 8px 24px rgba(37,99,235,.07);
 --shadow-lift:0 2px 4px rgba(37,99,235,.08),0 14px 38px rgba(37,99,235,.12);
 --wrap:1140px;
}
/* dark theme — same lerp idea as the globe's built-in LIGHT->DARK engine */
html[data-theme="dark"]{
 --bg:#0b0e14; --bg-alt:#10141d; --bg-wash:#151a26;
 --ink:#e8eaf2; --ink-2:#a9aebc; --ink-3:#717a8c;
 --accent:#60a5fa; --accent-deep:#93c5fd; --terra:#38bdf8; --terra-soft:#0c1d33;
 --bd:#222838; --card:#121620; --header-glass:rgba(11,14,20,.82);
 --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.45);
 --shadow-lift:0 2px 4px rgba(0,0,0,.55),0 14px 38px rgba(0,0,0,.6);
}
/* page-wide theme transition: applied only while switching (html.theming, ~1.4s),
   tuned to the globe's lerp (s=0.025 @60fps ≈ the same arrival curve) */
html.theming body,html.theming .page *,html.theming .site-header,html.theming .site-footer{
 transition:background-color 1.2s ease,color 1.2s ease,border-color 1.2s ease,
  box-shadow 1.2s ease,fill 1.2s ease!important}

/* ---------- reset-lite + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;height:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
 font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}

/* the page is the scroller; the globe band is a FULL-VIEWPORT fixed layer BEHIND
   it (Dave 2026-06-05: full globe in the background). The page content paints on
   top (z-index 1 vs 0); solid section backgrounds occlude the planet naturally.
   Dave 2026-06-06: the scroll-linked exit/return was REMOVED — the globe stays
   fixed in place; content simply scrolls over it. */
.page{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;overscroll-behavior:contain;
 display:flex;flex-direction:column;position:relative;z-index:1}
.page>main{flex:1}
.globe-band{position:fixed;inset:0;z-index:0;
 pointer-events:none;overflow:hidden;background:transparent}
/* dark mode: the compass logo's black half disappears on dark — invert lightness,
   keep the hue family (black->white, brand blue stays blue-ish) */
html[data-theme="dark"] .brand img{filter:invert(1) hue-rotate(180deg) saturate(1.35) brightness(1.05)}

/* Light mode washes the planet (~30%) so the text stays primary; dark mode keeps
   it full — the night side reads naturally as background. */
#globe-mount{position:absolute;inset:0;opacity:.3;transition:opacity 1.2s ease}
html[data-theme="dark"] #globe-mount{opacity:1}
#globe-mount canvas{display:block;width:100%!important;height:100%!important}
.globe-media{opacity:.3;transition:opacity 1.1s ease} /* fallback matches the washed light-mode look */
.globe-band.live .globe-media{opacity:0}
.globe-media{position:absolute;left:50%;top:auto;bottom:0;transform:translateX(-50%);
 width:min(2000px,140vw);min-width:860px;height:auto;display:block;
 /* fallback only (loading/no-WebGL): the old bottom-arc image, white-bg, dissolves
    into the light page via multiply; the live full-globe canvas replaces it. */
 mix-blend-mode:multiply;
 filter:contrast(1.03) brightness(1.005)}
html[data-theme="dark"] .globe-media{opacity:0} /* multiply breaks on dark; canvas covers it */
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--font-display);font-weight:560;line-height:1.18;color:var(--ink);
 letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.3rem);margin:0 0 .6em}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:2.2em 0 .55em}
h3{font-size:1.18rem;margin:1.6em 0 .4em;font-family:var(--font-body);font-weight:650}
p{margin:0 0 1.05em}
ul,ol{padding-left:1.3em}
.mono,time,.tag{font-family:var(--font-mono)}
.lede{font-size:1.18rem;color:var(--ink-2);max-width:62ch}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
main{display:block}
main>*{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
main>section{padding-block:3.2rem}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6em 1em;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:3px}

/* cartographic contour wash for alt sections */
.section-alt{background:var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%232563eb' stroke-opacity='.05' stroke-width='1.2'%3E%3Cpath d='M80 540c90-130 60-210 160-260s90-150 200-170 180 60 160 160-130 90-150 200-120 130-220 110S30 610 80 540z'/%3E%3Cpath d='M120 520c80-110 50-180 140-225s80-130 175-148 158 52 140 140-114 78-131 174-105 114-193 96S76 581 120 520z'/%3E%3Cpath d='M165 498c68-92 42-150 118-188s67-109 146-124 132 44 117 117-95 65-110 146-88 95-161 80-152 20-110-31z'/%3E%3C/g%3E%3C/svg%3E");
 background-size:640px;max-width:none;border-block:1px solid var(--bd)}
.section-alt>.inner{max-width:var(--wrap);margin-inline:auto}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-glass);
 backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-name{font-family:var(--font-display);font-size:1.28rem;letter-spacing:-.01em}
.brand-name strong{color:var(--accent);font-weight:640}
.site-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.5em .8em;border-radius:8px;color:var(--ink-2);font-weight:520;font-size:.96rem}
.site-nav a:hover{color:var(--ink);background:var(--bg-alt);text-decoration:none}
.site-nav a.active{color:var(--accent);font-weight:620}
.nav-toggle,.nav-burger{display:none}

/* language toggle (HU <-> EN) */
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 13px;
 border-radius:999px;border:1.5px solid var(--bd);background:var(--card);color:var(--ink-2);
 font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.08em;flex:none}
.lang-toggle:hover{color:var(--ink);border-color:var(--ink-3);text-decoration:none}

/* day/night toggle — flips the page theme AND the globe (themechange event) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
 border-radius:50%;border:1.5px solid var(--bd);background:var(--card);color:var(--ink-2);
 cursor:pointer;padding:0;flex:none;transition:border-color .25s,color .25s,transform .25s}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-3);transform:rotate(15deg)}
.theme-toggle svg{display:block}
.theme-toggle .tt-moon{display:none}
html[data-theme="dark"] .theme-toggle .tt-moon{display:block}
html[data-theme="dark"] .theme-toggle .tt-sun{display:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,500px);gap:54px;
 align-items:center;padding-block:clamp(2.2rem,6vh,3.6rem) 2.2rem}
.hero>div:first-child{max-width:70ch}
@media (max-width:1020px){.hero{grid-template-columns:1fr}}

/* élő mérés-visszajátszás — dark data island, mindkét témában sötét (design-nyelv).
   FIXED geometry (Dave 2026-06-05 ×2): the card is sized for the TALLEST case so
   nothing ever compresses — head/q/foot are flex:none, the foot is pinned to the
   bottom with margin-top:auto, rows fill the fixed middle. Zero movement. */
.hero-live{background:#101016;border:1px solid #1f2330;border-radius:18px;padding:22px 24px 18px;
 box-shadow:var(--shadow-lift);height:512px;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.hero-live .hl-head{flex:none}
.hero-live .hl-q{flex:none;min-height:58px}
.hero-live .hl-rows{flex:1 1 auto;min-height:0;justify-content:flex-start}
.hero-live .hl-row{flex:none}
.hero-live .hl-foot{flex:none;margin-top:auto}
@media (max-width:1020px){.hero-live{height:auto;min-height:480px}}
.hl-head{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.66rem;
 letter-spacing:.14em;color:#717a8c;text-transform:uppercase}
.hl-head::before{content:"";width:7px;height:7px;border-radius:50%;background:#16a34a;
 box-shadow:0 0 0 0 rgba(22,163,74,.55);animation:hl-live 2s infinite}
@keyframes hl-live{70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.hl-q{font-family:var(--font-mono);font-size:.92rem;line-height:1.5;color:#cfe0ff;min-height:52px;margin:0}
.hl-q::after{content:"▌";color:#60a5fa;animation:hl-blink 1s steps(1) infinite}
@keyframes hl-blink{50%{opacity:0}}
.hl-rows{flex:1;display:flex;flex-direction:column;gap:8px}
.hl-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
 background:rgba(255,255,255,.04);font-size:.84rem;color:#dfe3ec;
 opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.hl-row.in{opacity:1;transform:none}
.hl-row .m{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.04em;width:102px;color:#a9aebc;flex:none}
.hl-row .v{flex:1;line-height:1.4}
.hl-row .b{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;border-radius:6px;
 padding:2.5px 8px;flex:none}
.hl-row .b.no{background:rgba(220,38,38,.18);color:#fda4a4}
.hl-row .b.ok{background:rgba(22,163,74,.2);color:#86efac}
.hl-row .b.gray{background:rgba(255,255,255,.09);color:#a9aebc}
.hl-row .b.warn{background:rgba(202,138,4,.22);color:#fcd680}
.hl-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
 font-family:var(--font-mono);font-size:.64rem;color:#5a6178;border-top:1px solid #1f2330;padding-top:11px}
.hl-foot a{color:#93c5fd}
@media (prefers-reduced-motion:reduce){.hl-row{transition:none}.hl-q::after{animation:none}}
.hero .eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
 text-transform:uppercase;color:var(--accent);margin-bottom:1.1em;display:flex;align-items:center;gap:.6em}
.hero .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent);display:inline-block}
.hero h1{margin-bottom:.45em}
.hero .lede{margin-bottom:1.6em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-img{position:relative}
.hero-img img{border-radius:var(--radius);width:100%}
.trust-strip{display:flex;gap:1.6em;flex-wrap:wrap;font-family:var(--font-mono);
 font-size:.82rem;color:var(--ink-2);margin-top:2.2em;padding-top:1.4em;border-top:1px solid var(--bd)}
.trust-strip b{color:var(--ink)}

/* ---------- proof strip ---------- */
.proof-strip{background:var(--bg-alt);padding:2.8em 1.4em;max-width:none;border-block:1px solid var(--bd)}
.proof-strip>.inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6em;max-width:var(--wrap);margin-inline:auto}
.proof-counters{display:flex;gap:2.4em;flex-wrap:wrap}
.proof-item{display:flex;flex-direction:column;align-items:center;gap:.25em}
.proof-num{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;color:var(--accent);line-height:1}
.proof-label{font-size:.78rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.proof-cta{display:flex;flex-direction:column;align-items:flex-end;gap:.6em}
.gbp-badge{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.2em;border-radius:999px;
 border:1.5px solid var(--accent);color:var(--accent);font-weight:580;font-size:.88rem;transition:background .15s,color .15s}
.gbp-badge:hover{background:var(--accent);color:#fff;text-decoration:none}
.gbp-badge svg{flex-shrink:0}
.proof-partner{font-size:.78rem;color:var(--ink-2)}
.proof-partner a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
@media(max-width:680px){
 .proof-strip>.inner{flex-direction:column;align-items:center;text-align:center}
 .proof-cta{align-items:center}
 .proof-counters{justify-content:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;background:var(--accent);color:#fff;
 padding:.78em 1.5em;border-radius:999px;font-weight:620;font-size:1rem;border:1.5px solid var(--accent);
 box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,background .15s}
.btn::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-1px);
 box-shadow:var(--shadow-lift);text-decoration:none}
.btn-ghost{display:inline-flex;align-items:center;padding:.78em 1.4em;border-radius:999px;
 border:1.5px solid var(--bd);color:var(--ink);font-weight:560;background:var(--card)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ---------- generic cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);
 padding:22px 24px;box-shadow:var(--shadow)}
.card h3{margin-top:.2em}
.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:16px}
.steps li{counter-increment:step;position:relative;padding-left:62px;min-height:48px}
.steps li::before{content:counter(step);font-family:var(--font-mono);font-weight:700;
 position:absolute;left:0;top:0;
 width:46px;height:46px;border-radius:50%;background:var(--terra-soft);color:var(--accent-deep);
 display:flex;align-items:center;justify-content:center;font-size:1.1rem;border:1.5px solid var(--accent)}

/* ---------- callouts ---------- */
.callout{border:1.5px solid var(--bd);border-left:4px solid var(--accent);background:var(--bg-alt);
 border-radius:var(--radius-s);padding:16px 20px;margin:1.4em 0}
.callout.honest{border-left-color:var(--ink);background:var(--card);box-shadow:var(--shadow)}
.callout.honest strong:first-child{font-family:var(--font-display);font-size:1.05em}
.callout.warn{border-left-color:var(--warn)}
.callout.ok{border-left-color:var(--ok)}
.callout.cta{border-left-color:var(--accent);background:linear-gradient(135deg,#eef4ff,#f8faff)}

/* ---------- speculation flags ---------- */
.spec-flag{display:inline-block;font-size:.72em;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
 padding:1px 6px;border-radius:3px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;
 vertical-align:middle;margin-left:3px}
.spec-flag.estimate{background:#fefce8;color:#ca8a04;border-color:#fde68a}

/* ---------- sector outlook posts ---------- */
.sector-kicker{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2);text-transform:uppercase;
 letter-spacing:.06em;margin-bottom:.5em}
.sector-context p{margin-bottom:1.2em}
.sector-outlook h3{margin-top:2em;margin-bottom:.6em;padding-bottom:.4em;border-bottom:1px solid var(--bd)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:1.4em 0;border:1px solid var(--bd);border-radius:var(--radius-s);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--card)}
th{background:var(--bg-alt);text-align:left;font-weight:650;font-size:.88rem}
th,td{padding:11px 14px;border-bottom:1px solid var(--bd);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{font-family:var(--font-mono);text-align:right;white-space:nowrap}

/* ---------- pricing ---------- */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:1.6em 0;align-items:stretch}
.price-card{position:relative;background:var(--card);border:1.5px solid var(--bd);border-radius:var(--radius);
 padding:26px 24px;display:flex;flex-direction:column;gap:.5em;box-shadow:var(--shadow)}
.price-card.featured{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.price-card.featured::before{content:"Legtöbben ezt választják";position:absolute;top:-12px;left:50%;
 transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.72rem;font-weight:650;
 padding:.3em 1em;border-radius:999px;white-space:nowrap;letter-spacing:.04em}
.price-card .tier{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.price-card .price{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:var(--ink)}
.price-card .price small{font-size:.85rem;color:var(--ink-2);font-weight:400}
.price-card ul{list-style:none;padding:0;margin:.6em 0;display:grid;gap:.45em;font-size:.95rem}
.price-card ul li{padding-left:1.5em;position:relative}
.price-card ul li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.price-card ul li.no::before{content:"—";color:var(--ink-3)}
.price-card .btn,.price-card .btn-ghost{margin-top:auto;justify-content:center;text-align:center}

/* ---------- FAQ ---------- */
.faq{margin:2.4em auto}
.faq details{border:1px solid var(--bd);border-radius:var(--radius-s);background:var(--card);
 margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:620;list-style:none;display:flex;
 justify-content:space-between;align-items:center;gap:1em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.25rem;color:var(--accent);
 transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 18px 16px;color:var(--ink-2)}

/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1.8em}
.post-card{display:flex;flex-direction:column;gap:.45em;background:var(--card);border:1px solid var(--bd);
 border-radius:var(--radius);padding:22px;color:var(--ink);box-shadow:var(--shadow);
 transition:transform .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);text-decoration:none}
.post-card time{font-size:.78rem;color:var(--ink-3)}
.post-card h2{font-size:1.18rem;margin:0;font-family:var(--font-body);font-weight:660;line-height:1.32}
.post-card p{color:var(--ink-2);font-size:.94rem;margin:0}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:.6em}
.tag{font-size:.72rem;background:var(--terra-soft);color:var(--accent-deep);
 padding:.2em .7em;border-radius:999px}

/* ---------- article (posts + long pages) ---------- */
article{max-width:74ch;margin-inline:auto}
article h2{margin-top:1.9em}
article img{border-radius:var(--radius-s);margin:1.4em 0}
blockquote{border-left:3px solid var(--accent);margin:1.4em 0;padding:.3em 0 .3em 1.2em;
 color:var(--ink-2);font-style:italic}
.byline{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-3);
 border-top:1px solid var(--bd);margin-top:2.2em;padding-top:1em}
.breadcrumb{font-size:.84rem;color:var(--ink-3);margin:1.2rem auto .4rem;max-width:74ch}
.breadcrumb a{color:var(--ink-2)}
.sources{margin-top:2em;font-size:.92rem}
.sources h2{font-size:1.1rem}
.sources ul{color:var(--ink-2)}

/* ---------- score rings (self-scorecard) ---------- */
.scoreboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:18px;margin:1.8em 0}
.ring{--val:0;--col:var(--accent);width:108px;height:108px;border-radius:50%;margin-inline:auto;
 background:conic-gradient(var(--col) calc(var(--val)*1%),var(--bg-wash) 0);
 display:flex;align-items:center;justify-content:center;position:relative}
.ring::before{content:"";position:absolute;inset:9px;background:var(--card);border-radius:50%}
.ring b{position:relative;font-family:var(--font-mono);font-size:1.45rem;font-weight:700}
.ring-label{text-align:center;font-size:.82rem;color:var(--ink-2);margin-top:.5em;line-height:1.3}
.ring.green{--col:var(--ok)} .ring.blue{--col:var(--accent)}
.ring.amber{--col:var(--warn)} .ring.red{--col:var(--crit)}
.ring.building{--col:var(--ink-3)}
.ring.building::after{content:"építés alatt";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
 background:var(--ink);color:#fff;font-size:.6rem;font-family:var(--font-mono);padding:.15em .6em;border-radius:999px;white-space:nowrap}

/* ---------- footer ---------- */
.site-footer{margin-top:4rem;border-top:1px solid var(--bd);background:var(--bg-alt);
 padding-block:2.6rem 1.2rem;font-size:.94rem;color:var(--ink-2)}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:36px}
.site-footer h2{font-size:.82rem;font-family:var(--font-mono);text-transform:uppercase;
 letter-spacing:.1em;color:var(--ink-3);margin:0 0 .8em}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.45em}
.site-footer a{color:var(--ink-2)}
.site-footer a:hover{color:var(--accent)}
.f-dogfood{font-size:.86rem;border-left:3px solid var(--accent);padding-left:.9em;margin-top:1em}
.f-bottom{border-top:1px solid var(--bd);margin-top:2rem;padding-top:1.1rem;padding-bottom:5.4rem;
 font-size:.82rem;color:var(--ink-3)}
.f-bottom p{margin:0}

/* ---------- responsive ---------- */
@media (max-width:960px){
 .hero{grid-template-columns:1fr;min-height:0;padding-block:2.4rem 1.6rem}
 .hero-img{order:-1;max-width:520px}
 .grid-3,.post-grid,.price-cards{grid-template-columns:1fr 1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
 .grid-3,.grid-2,.post-grid,.price-cards{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr}
 .nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:60}
 .nav-burger span{width:24px;height:2px;background:var(--ink);transition:.2s;display:block}
 .site-nav{position:fixed;inset:64px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--bd);
  box-shadow:var(--shadow-lift);transform:translateY(-130%);transition:transform .25s;padding:10px 16px 18px}
 .site-nav ul{flex-direction:column;gap:2px}
 .site-nav a{padding:.8em 1em;font-size:1.05rem}
 .nav-toggle:checked~.site-nav{transform:translateY(0)}
 .nav-toggle:checked~.nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .nav-toggle:checked~.nav-burger span:nth-child(2){opacity:0}
 .nav-toggle:checked~.nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 body{font-size:1rem}
}
@media print{
 .site-header,.site-footer,.skip,.hero-cta,.globe-band{display:none}
 body{font-size:11pt;display:block;height:auto;overflow:visible}
 body::after{content:none}
 .page{overflow:visible;height:auto;display:block}
 a{color:inherit}
}
@media (prefers-reduced-motion:reduce){
 *{transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================================
   === LANDING ILLUSTRATED MODE (now PERMANENT) ===
   The owner chose the illustrated landing, so this is no longer an A/B toggle —
   the page ALWAYS renders illustrated below the hero (body.mode-illustrated is
   added unconditionally by a tiny inline script in content/pages/index.html).
   These rules still activate only on the landing because they are scoped to the
   .il-* markup, which only that page injects.

   CRAWLABILITY (load-bearing): this site sells AI-readability, so the original
   prose must stay in the DOM and the accessibility tree for AI crawlers. The
   prose is therefore hidden with a VISUALLY-HIDDEN / off-screen technique
   (absolute + clip), NOT display:none — humans don't see it, but crawlers and
   assistive tech still read every word. The illustrated scenes are shown.
   Revert: restore the text/illustrated toggle + visibility swap and unhide .il-prose.
   ============================================================================ */

/* ---- prose: kept in the DOM + crawlable, hidden from sighted users ----
   sr-only / clip pattern: zero painted area, removed from layout flow, but the
   text remains in the HTML source + the accessibility tree (so AI crawlers and
   screen readers still read it). NEVER swap this for display:none — that would
   strip the very text this product promises is machine-readable. */
.il-prose{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- illustrated scenes: always shown ---- */
.il-scene{display:block;position:relative}
/* the honest callout is load-bearing copy and stays fully visible */
.il-keep{display:block!important}

/* ---- shared illustrated scene scaffolding ---- */
.il-scene{position:relative}
.il-cap{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;color:var(--ink-2);
 margin:.2em 0 0;display:flex;align-items:center;gap:.5em}
.il-cap::before{content:"";width:18px;height:1.5px;background:var(--accent);flex:none}
.il-kicker{font-family:var(--font-mono);font-weight:700;font-size:.68rem;letter-spacing:.14em;
 text-transform:uppercase;color:var(--accent);margin:0 0 .7em}

/* hand-drawn title underline (marker-band clip reveal, ported from demo .hl/.ul) */
.il-hl{position:relative;display:inline-block}
.il-hl .il-ul{position:absolute;left:-1.5%;top:calc(100% - 4px);width:103%;height:.42em;
 object-fit:fill;pointer-events:none;display:block;
 clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.6,.05,.3,1) .15s}
.il-hl.in .il-ul{clip-path:inset(0 0 0 0)}

/* ring around a phrase (ported from demo .ringwrap) */
.il-ringwrap{position:relative;display:inline-block;white-space:nowrap}
.il-ringwrap .il-ringimg{position:absolute;inset:-46% -14%;width:128%;height:auto;pointer-events:none;
 opacity:0;scale:.7;transition:opacity .45s ease .45s,scale .5s cubic-bezier(.3,1.4,.5,1) .45s}
.il-ringwrap.in .il-ringimg{opacity:1;scale:1}

/* ------------------ DIVERGENCE scene (phones-duo + two-mode copy) ------------------ */
/* The big decorative speech-bubble „blobs" were removed; the right column now
   carries the consumer-legible two-mode explanation (keresés nélkül / élő keresés). */
.il-diverge{display:grid;grid-template-columns:.92fr 1.08fr;gap:3vw;align-items:center;margin-top:1.2em}
.il-diverge .il-phones{position:relative;text-align:center}
.il-diverge .il-phones img{width:min(380px,84%);margin-inline:auto;filter:drop-shadow(0 14px 30px rgba(37,99,235,.12))}
.il-twomode{display:grid;gap:12px}
.il-twomode>p{margin:0;color:var(--ink-2)}
.il-twomode>p:first-child{font-family:var(--font-display);font-size:1.12rem;color:var(--ink);line-height:1.3}
.il-mode{position:relative;padding:12px 15px 12px 16px;border-radius:12px;border:1px solid var(--bd);
 background:var(--card);box-shadow:var(--shadow);border-left:4px solid var(--bd)}
.il-mode p{margin:.35em 0 0;font-size:.96rem;line-height:1.5;color:var(--ink-2)}
.il-mode .il-mode-tag{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.07em;
 text-transform:uppercase;display:inline-block}
.il-mode.off{border-left-color:var(--ink-3)}
.il-mode.off .il-mode-tag{color:var(--ink-2)}
.il-mode.live{border-left-color:var(--accent)}
.il-mode.live .il-mode-tag{color:var(--accent)}
.il-twomode-foot{font-size:.9rem;line-height:1.5;color:var(--ink-3)!important;
 border-top:1px dashed var(--bd);padding-top:11px;margin-top:2px!important}

/* ------------------ STEPS traverse (the floating-steps port) ------------------ */
.il-flow{position:relative;max-width:var(--wrap);margin:1.4em auto 0;padding:1vh 0 2vh}
.il-routesvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.il-routesvg .ghost{fill:none;stroke:#cdd9f5;stroke-width:2;stroke-dasharray:2 12;stroke-linecap:round}
.il-routesvg .live{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-dasharray:2 12;stroke-linecap:round;
 filter:drop-shadow(0 0 4px rgba(37,99,235,.35))}
.il-routesvg .head{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;opacity:0;transition:opacity .4s}
.il-routesvg .head.in{opacity:1}
html[data-theme="dark"] .il-routesvg .ghost{stroke:#26324a}

.il-step{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3vw;align-items:center;
 padding:3.4vh 0;min-height:38vh;z-index:1}
.il-step.rev{grid-template-columns:.95fr 1.05fr}
.il-step.rev .il-txt{order:2}
.il-step.rev .il-art{order:1}
.il-txt{opacity:0;transform:translateY(18px);transition:opacity .5s ease-out,transform .5s ease-out}
.il-txt.in{opacity:1;transform:none}
.il-txt h3{font-family:var(--font-display);font-size:clamp(1.3rem,2.3vw,1.7rem);font-weight:560;
 margin:0;letter-spacing:-.01em;line-height:1.2}
.il-txt p{color:var(--ink-2);margin:.7em 0 0;max-width:46ch}
.il-art{position:relative;min-height:280px}
.il-float{position:absolute;opacity:0;transform:translateY(26px) scale(.93);
 transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.7,.3,1.06);will-change:transform}
.il-float.in{opacity:1;transform:none;animation:il-bob 6.5s ease-in-out infinite}
@keyframes il-bob{0%,100%{translate:0 0;rotate:var(--rot,0deg)}
 50%{translate:0 -8px;rotate:calc(var(--rot,0deg) + .6deg)}}
.il-step-art{width:var(--w,320px);left:calc(50% - var(--w,320px)/2);top:calc(50% - var(--w,320px)/2)}
.il-art.a1 .il-step-art{--w:320px;--rot:-2deg;margin-left:6%}
.il-art.a2 .il-step-art{--w:336px;--rot:1.6deg;margin-left:-5%}
.il-art.a3 .il-step-art{--w:312px;--rot:-1.2deg;margin-left:4%}

/* ------------------ METHODOLOGY scene (dense 7-dimension list + kept callout) ------
   Replaces the radar-7 web image with a compact, weighted text list. Wording is
   pulled verbatim from the already-gated het-dimenzio + modszertan sources. */
.il-dims{list-style:none;counter-reset:none;padding:0;margin:1.1em 0 0;display:grid;gap:7px}
.il-dim{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline;
 padding:10px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--card);box-shadow:var(--shadow)}
.il-dim .il-dim-w{font-family:var(--font-mono);font-size:1.02rem;font-weight:700;color:var(--accent);
 line-height:1.1;min-width:3ch;text-align:right}
.il-dim .il-dim-body{font-size:.95rem;line-height:1.45;color:var(--ink-2)}
.il-dim .il-dim-body b{color:var(--ink);font-weight:660}
.il-dim .il-dim-body em{font-style:normal;font-weight:600;color:var(--accent-deep)}
.il-dim.lead{border-left:4px solid var(--accent);background:linear-gradient(135deg,#eef4ff,var(--card))}
html[data-theme="dark"] .il-dim.lead{background:linear-gradient(135deg,var(--terra-soft),var(--card))}

/* ------------------ PARTNERS scene (plan-handoff, light) ------------------ */
.il-partners{display:grid;grid-template-columns:.85fr 1.15fr;gap:3vw;align-items:center;margin-top:1.2em}
.il-partners .il-handoff{text-align:center}
.il-partners .il-handoff img{width:min(340px,80%);margin-inline:auto;filter:drop-shadow(0 12px 26px rgba(37,99,235,.1))}
.il-partners .il-plist{display:grid;gap:14px}
.il-partner-row{display:flex;gap:12px;align-items:baseline;padding-left:1em;border-left:2px solid var(--bd)}
.il-partner-row b{font-family:var(--font-display);font-weight:560}

/* ------------------ DENSITY: tighten illustrated mode a touch ------------------
   Scoped to illustrated mode only (text mode spacing untouched). Trims the big
   vertical gaps between scenes + inside the steps traverse — not drastically. */
body.mode-illustrated main>section{padding-block:2.3rem}
body.mode-illustrated .il-flow{padding:.4vh 0 1vh;margin-top:1em}
body.mode-illustrated .il-step,
body.mode-illustrated .il-step.rev{padding:2.4vh 0;min-height:30vh}
body.mode-illustrated .il-art{min-height:248px}
body.mode-illustrated .il-method-scene,
body.mode-illustrated #il-method-scene{margin-top:.4em}
@media (max-width:880px){
 body.mode-illustrated .il-step,body.mode-illustrated .il-step.rev{padding:2.6vh 0}
 body.mode-illustrated .il-art{min-height:220px}
}

/* float bob also drives the standalone scene illustrations (phones/radar/handoff) */
body.mode-illustrated .il-bobgentle{animation:il-bob 7.2s ease-in-out infinite}

/* ---- DARK MODE: invert the hand-drawn ink so it reads on the dark bg ----
   The PNGs are black ink + cobalt (#2563eb) on transparency; on dark they
   nearly vanish. invert(1) flips lightness (black ink -> light); hue-rotate(180deg)
   undoes the hue flip that invert() also causes, so the cobalt accent STAYS a clean
   blue (matches the .brand img pattern above). The old saturate(1.4)+brightness(1.08)
   OVERSHOT the cobalt thread/highlight bars into a garish cyan/red splatter, so they
   are dropped — plain invert+hue-rotate keeps the accent clean. Scoped to dark +
   illustrated only. */
html[data-theme="dark"] body.mode-illustrated .il-scene img,
html[data-theme="dark"] body.mode-illustrated .il-diverge .il-phones img,
html[data-theme="dark"] body.mode-illustrated .il-step-art,
html[data-theme="dark"] body.mode-illustrated .il-hl .il-ul,
html[data-theme="dark"] body.mode-illustrated .il-ringwrap .il-ringimg{
 filter:invert(1) hue-rotate(180deg)}

@media (max-width:880px){
 .il-diverge,.il-method,.il-partners{grid-template-columns:1fr;gap:2vh}
 .il-step,.il-step.rev{grid-template-columns:1fr;min-height:0;padding:3.6vh 0}
 .il-txt{order:1!important}.il-art{order:2!important;min-height:240px}
 .il-art.a1 .il-step-art,.il-art.a2 .il-step-art,.il-art.a3 .il-step-art{--w:230px;margin-left:0}
 .il-method .il-radar,.il-partners .il-handoff{order:-1}
}
@media (prefers-reduced-motion:reduce){
 .il-float,.il-txt,.il-hl .il-ul,.il-ringwrap .il-ringimg{transition:none!important}
 .il-float.in{animation:none!important}
 body.mode-illustrated .il-bobgentle{animation:none!important}
}
/* === /LANDING ILLUSTRATED MODE (internal A/B) === */