@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/webfonts/space-grotesk-v22-latin_latin-ext-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/webfonts/space-grotesk-v22-latin_latin-ext-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/webfonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/webfonts/ibm-plex-sans-v23-latin_latin-ext-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/webfonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/webfonts/ibm-plex-sans-v23-latin_latin-ext-700.woff2') format('woff2');}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/webfonts/martian-mono-v6-latin_latin-ext-regular.woff2') format('woff2');}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/webfonts/martian-mono-v6-latin_latin-ext-500.woff2') format('woff2');}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/webfonts/martian-mono-v6-latin_latin-ext-600.woff2') format('woff2');}

:root{
  --ink:#101418;
  --gray:#5C6670;
  --bg:#F6F7F8;
  --panel:#FFFFFF;
  --rule:#D9DDE2;
  --rule-strong:#9AA1A9;
  --accent:#FF4B1F;
  --accent-deep:#D63A10;
  --accent-soft:#FFE9E2;
  --maxw:1160px;
  --bg-blur:rgba(246,247,248,.92);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:16.5px;line-height:1.65;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;line-height:1.08;letter-spacing:-0.02em;font-weight:700;}
a{color:var(--accent-deep);text-decoration:none;font-weight:600;}
a:hover{color:var(--ink);}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
code,pre,.mono{font-family:"Martian Mono",monospace;font-style:normal;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ── Illesztőjel (crop mark) ────────────── */
.marks{position:relative;}
.marks::before{
  content:"";position:absolute;inset:-11px;pointer-events:none;
  background-image:
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-size:14px 1.5px,1.5px 14px, 14px 1.5px,1.5px 14px, 14px 1.5px,1.5px 14px, 14px 1.5px,1.5px 14px;
  background-position:top left,top left, top right,top right, bottom left,bottom left, bottom right,bottom right;
}

/* ── Vonalzó ────────────────────────────── */
.ruler{
  height:10px;margin:18px 0 40px;
  background:
    repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 8px);
  background-size:auto 10px, auto 6px;
  background-repeat:repeat-x;
  background-position:left bottom, left bottom;
}

/* ── Fejléc ─────────────────────────────── */
header{
  position:sticky;top:0;z-index:60;
  background:var(--bg-blur);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;gap:26px;height:64px;}
.logo{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-0.02em;}
.logo:hover{color:var(--ink);}
.logo svg{display:block;}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center;}
.nav-links a{color:var(--gray);font-weight:600;font-size:14.5px;}
.nav-links a:hover{color:var(--ink);}
.lang{font-family:"Martian Mono",monospace;font-size:11px;color:var(--gray);border:1px solid var(--rule);background:var(--panel);padding:4px 9px;}
.btn{
  display:inline-block;
  font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:15.5px;
  padding:13px 26px;border-radius:3px;border:none;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-deep);color:#fff;}
.btn-line{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
.btn-line:hover{background:var(--ink);color:#fff;}
.nav .btn{padding:8px 16px;font-size:14px;}
@media(max-width:940px){.nav-links a:not(.btn):not(.lang){display:none;}}

/* ── Hero ───────────────────────────────── */
.hero{padding:76px 0 60px;}
.hero-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:56px;align-items:start;}
.doc-id{
  font-family:"Martian Mono",monospace;font-size:11px;color:var(--gray);
  letter-spacing:.06em;margin-bottom:26px;
}
.doc-id b{color:var(--accent);font-weight:600;}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.2rem);margin-bottom:22px;}
.tokens{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.token{
  font-family:"Martian Mono",monospace;font-size:12.5px;font-weight:500;
  color:var(--ink);background:var(--panel);
  border:1px solid var(--rule);padding:7px 13px;
}
.token b{color:var(--accent);font-weight:600;}
.hero p.lead{font-size:18px;color:var(--gray);max-width:54ch;margin-bottom:30px;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.spec-box{
  background:var(--panel);border:1.5px solid var(--ink);
  padding:22px 24px;
}
.spec-box h3{
  font-family:"Martian Mono",monospace;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray);
  margin-bottom:16px;
}
.spec-box table{width:100%;border-collapse:collapse;font-size:13.5px;}
.spec-box th{
  font-family:"Martian Mono",monospace;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--gray);
  text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--rule);
  white-space:nowrap;vertical-align:top;width:1%;
}
.spec-box td{
  padding:8px 0;border-bottom:1px solid var(--rule);
  font-weight:600;
}
.spec-box tr:last-child th,.spec-box tr:last-child td{border-bottom:none;}
.spec-box td b{color:var(--accent);}
@media(max-width:900px){
  .hero{padding:56px 0 48px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .spec-box{max-width:440px;}
}

/* ── HTTP-demó ──────────────────────────── */
.inspector-wrap{padding:26px 0 96px;}
.inspector{
  background:var(--panel);
  border:1.5px solid var(--ink);
  display:grid;grid-template-columns:1fr 1fr;
}
.insp-col{padding:22px 26px 26px;min-width:0;}
.insp-col + .insp-col{border-left:1.5px solid var(--ink);}
.insp-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:16px;
}
.insp-head h3{
  font-family:"Martian Mono",monospace;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray);
}
.replay-btn{
  font-family:"Martian Mono",monospace;font-size:11.5px;font-weight:600;
  background:var(--panel);border:1.5px solid var(--ink);
  padding:6px 14px;cursor:pointer;color:var(--ink);
}
.replay-btn:hover{background:var(--ink);color:#fff;}
.insp-code{font-family:"Martian Mono",monospace;font-size:12.5px;line-height:1.9;overflow-x:auto;}
.insp-code .c-cmd{color:var(--accent-deep);font-weight:600;}
.insp-code .c-url{color:var(--ink);word-break:break-all;}
.resp-line{display:block;opacity:0;white-space:nowrap;}
.resp-line.show{opacity:1;}
.resp-line .h{color:var(--gray);}
.resp-line .v{color:var(--ink);font-weight:500;}
.resp-line .ok{color:var(--accent);font-weight:600;}
.insp-notes{border-top:1.5px solid var(--ink);grid-column:1 / -1;padding:16px 26px;display:flex;flex-wrap:wrap;gap:10px 30px;}
.insp-notes span{
  position:relative;padding-left:20px;
  font-size:14px;font-weight:600;
}
.insp-notes span::before{
  content:"";position:absolute;left:0;top:7px;
  width:10px;height:10px;background:var(--accent);
}
@media(max-width:820px){
  .inspector{grid-template-columns:1fr;}
  .insp-col + .insp-col{border-left:none;border-top:1.5px solid var(--ink);}
  .resp-line{white-space:normal;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .resp-line{opacity:1 !important;}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ── Szekciók ───────────────────────────── */
section{padding:0 0 96px;}
.kicker{
  font-family:"Martian Mono",monospace;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.kicker b{color:var(--accent);font-weight:600;padding-right:12px;}
section h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:12px;}
.section-sub{color:var(--gray);font-size:17.5px;max-width:62ch;margin-top:10px;}

/* ── Funkciók (specifikáció-lista) ──────── */
.spec-list{background:var(--panel);border:1.5px solid var(--ink);}
.spec-row{
  display:grid;grid-template-columns:280px 1fr;gap:26px;
  padding:26px 28px;border-bottom:1px solid var(--rule);
}
.spec-row:last-child{border-bottom:none;}
.spec-row dt{
  font-family:"Martian Mono",monospace;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  position:relative;padding-left:22px;line-height:1.7;
}
.spec-row dt::before{
  content:"";position:absolute;left:0;top:6px;
  width:11px;height:11px;background:var(--accent);
}
.spec-row dd{font-size:15.5px;color:var(--gray);}
.spec-row dd strong{color:var(--ink);}
@media(max-width:760px){
  .spec-row{grid-template-columns:1fr;gap:8px;padding:20px 20px;}
}

/* ── Kód ────────────────────────────────── */
.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.code-card{background:var(--panel);border:1.5px solid var(--ink);}
.code-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1.5px solid var(--ink);
}
.code-card-head h3{font-size:16px;}
.code-card-head h3 span{font-family:"Martian Mono",monospace;font-size:11.5px;font-weight:500;color:var(--gray);}
.copy-btn{
  font-family:"Martian Mono",monospace;font-size:11.5px;font-weight:600;
  background:var(--panel);border:1.5px solid var(--ink);
  padding:6px 14px;cursor:pointer;color:var(--ink);
}
.copy-btn:hover{background:var(--ink);color:#fff;}
.copy-btn.done{background:var(--accent);border-color:var(--accent);color:#fff;}
pre.listing{
  padding:18px 0;overflow-x:auto;
  font-size:12.5px;line-height:1.9;
  counter-reset:ln;
}
pre.listing .row{display:block;padding:0 18px 0 0;}
pre.listing .row::before{
  counter-increment:ln;content:counter(ln, decimal-leading-zero);
  display:inline-block;width:44px;text-align:right;margin-right:16px;
  color:var(--rule-strong);
}
.tk-str{color:var(--accent-deep);}
.tk-key{color:var(--ink);font-weight:600;}
.tk-num{color:var(--accent);}
.tk-prop{color:var(--gray);}
@media(max-width:820px){.code-grid{grid-template-columns:1fr;}}

/* ── Árak (adatlap-táblázat) ────────────── */
.price-wrap{overflow-x:auto;background:var(--panel);border:1.5px solid var(--ink);}
table.price{border-collapse:collapse;width:100%;min-width:860px;font-size:14px;}
table.price th,table.price td{
  padding:13px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);
}
table.price thead th{
  border-bottom:1.5px solid var(--ink);
  font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:700;
}
table.price thead th small{
  display:block;font-family:"Martian Mono",monospace;font-size:10.5px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);
  margin-top:3px;
}
table.price tbody th{
  font-family:"Martian Mono",monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gray);
  min-width:180px;
}
table.price tbody tr:last-child th,table.price tbody tr:last-child td{border-bottom:none;}
table.price .free{background:var(--accent-soft);}
table.price thead th.free{border-top:4px solid var(--accent);}
table.price td .p{font-family:"Space Grotesk",sans-serif;font-size:24px;font-weight:700;display:block;line-height:1.2;}
table.price td .sub{display:block;font-size:12.5px;color:var(--gray);}
table.price td.na{color:var(--rule-strong);}
table.price .btn{padding:10px 18px;font-size:14px;}
table.price .soon{
  font-family:"Martian Mono",monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gray);
  border:1px solid var(--rule);padding:8px 14px;display:inline-block;
}
.plan-ent{
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  background:var(--panel);border:1.5px solid var(--ink);
  padding:22px 26px;margin-top:26px;
}
.plan-ent .name{font-family:"Space Grotesk",sans-serif;font-size:21px;font-weight:700;}
.plan-ent .name small{display:block;font-family:"Martian Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin-top:4px;}
.plan-ent ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;}
.plan-ent li{position:relative;padding-left:20px;font-size:14.5px;font-weight:500;}
.plan-ent li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--accent);}
@media(max-width:860px){.plan-ent{grid-template-columns:1fr;gap:16px;}}
.unit-note{
  border:1px solid var(--rule);background:var(--panel);
  border-left:4px solid var(--accent);
  padding:20px 26px;font-size:14.5px;color:var(--gray);margin-top:26px;
}
.unit-note strong{color:var(--ink);}

/* ── Összehasonlítás ────────────────────── */
.compare-wrap{overflow-x:auto;background:var(--panel);border:1.5px solid var(--ink);}
table.compare{border-collapse:collapse;width:100%;min-width:880px;font-size:13.5px;}
table.compare th,table.compare td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;}
table.compare thead th{
  font-family:"Space Grotesk",sans-serif;font-size:14.5px;font-weight:700;
  border-bottom:1.5px solid var(--ink);white-space:nowrap;
}
table.compare thead th.tz{background:var(--ink);color:#fff;}
table.compare tbody th{
  font-family:"Martian Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gray);min-width:200px;
}
table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{border-bottom:none;}
table.compare td.tz{background:var(--accent-soft);font-weight:700;}
.yes{color:var(--accent-deep);font-weight:700;}
.no{color:var(--gray);}
tr.verdict th,tr.verdict td{border-top:1.5px solid var(--ink);font-weight:700;color:var(--ink);}
tr.verdict td.tz{background:var(--accent);color:#fff;}
.footnote{font-size:13.5px;color:var(--gray);margin-top:16px;max-width:82ch;}

/* ── Adatvédelem ────────────────────────── */
.privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;background:var(--panel);border:1.5px solid var(--ink);padding:40px 42px;}
.privacy-big{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700;line-height:1.3;
}
.privacy-big .u{box-shadow:inset 0 -0.45em 0 var(--accent-soft);}
.privacy-text p{margin-bottom:16px;color:var(--gray);font-size:16px;}
.privacy-text p:last-child{margin-bottom:0;}
@media(max-width:800px){.privacy-grid{grid-template-columns:1fr;gap:22px;padding:26px 24px;}}

/* ── CTA sáv ────────────────────────────── */
.cta-band{background:var(--accent);padding:78px 24px;text-align:center;}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.8rem);margin-bottom:12px;}
.cta-band p{color:rgba(255,255,255,.9);font-size:17px;margin-bottom:30px;font-weight:500;}
.btn-white{background:#fff;color:var(--ink);}
.btn-white:hover{background:var(--ink);color:#fff;}

/* ── Lábléc ─────────────────────────────── */
footer{padding:40px 0 50px;font-size:14px;color:var(--gray);}
.foot-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;}
.foot-doc{font-family:"Martian Mono",monospace;font-size:11px;margin-top:16px;letter-spacing:.04em;}

/* ── Reveal ─────────────────────────────── */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease, transform .45s ease;}
html.js .reveal.in{opacity:1;transform:none;}


/* ── Élő térkép ─────────────────────────────── */
.mapband{padding:0 0 20px;}
.maprig{background:var(--panel);border:1.5px solid var(--ink);}
.maphead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--rule);}
.maphead h3{font-family:"Martian Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.04em;margin:0;}
.mapdot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex:none;}
.mapstilus{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.mapstilus button{
  font-family:"Martian Mono",monospace;font-size:10.5px;letter-spacing:.02em;
  padding:5px 9px;border:1px solid var(--rule);background:var(--panel);color:var(--gray);
  cursor:pointer;transition:border-color .12s,color .12s;
}
.mapstilus button:hover{border-color:var(--rule-strong);color:var(--ink);}
.mapstilus button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600;}
.mapkeret{position:relative;}
#lmap{height:440px;background:var(--bg);}
#lmap:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}
.mapfoot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:9px 16px;border-top:1px solid var(--rule);
  font-family:"Martian Mono",monospace;font-size:10.5px;color:var(--gray);
}
.mapfoot b{color:var(--ink);font-weight:600;}
.mapfoot a{color:var(--gray);text-decoration:underline;font-weight:400;}
.mapfoot a:hover{color:var(--accent-deep);}
.leaflet-container{font-family:"IBM Plex Sans",sans-serif;background:var(--bg);}
.leaflet-control-attribution{display:none;}
.leaflet-bar a{border-radius:0;color:var(--ink);background:var(--panel);}
.leaflet-bar a:hover{background:var(--accent-soft);}

/* Mobil: kétujjas mozgatás — súgó-fátyol, ha valaki egy ujjal húzná */
.maphint{
  position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  background:rgba(16,20,24,.58);color:#fff;
  font-family:"IBM Plex Sans",sans-serif;font-size:15px;font-weight:600;text-align:center;
  padding:0 28px;opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.maphint.lat{opacity:1;}
/* Mobilon a térkép kisebb, hogy a lap görgetése kényelmes maradjon */
@media(max-width:700px){
  #lmap{height:300px;}
  .mapstilus{margin-left:0;}
  .maphead{gap:10px;}
}
@media(prefers-reduced-motion:reduce){
  .leaflet-fade-anim .leaflet-tile{transition:none;}
  .maphint{transition:none;}
}


/* ── Színsémák ──────────────────────────────── */
html[data-tema="kek"]{--accent:#0B5FD0;--accent-deep:#084BA6;--accent-soft:#E1ECFB;}
html[data-tema="zold"]{--accent:#0E7C4A;--accent-deep:#0A5C37;--accent-soft:#DDF0E6;}
html[data-tema="ejszaka"]{
  --ink:#EEF2F5;--gray:#9AA7B2;--bg:#0E1216;--panel:#151B21;
  --rule:#273139;--rule-strong:#4B5966;
  --accent:#FF6B3D;--accent-deep:#FF8A63;--accent-soft:#3A1D12;
  --bg-blur:rgba(14,18,22,.92);color-scheme:dark;
}
html[data-tema="ejszaka"] .btn-line{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-strong);}
html[data-tema="ejszaka"] .btn-line:hover{background:var(--ink);color:var(--bg);}
html[data-tema="ejszaka"] .leaflet-bar a{background:var(--panel);color:var(--ink);}
html[data-tema="ejszaka"] .marks::before{filter:invert(1) brightness(1.6);}

/* ── Séma-kapcsoló ──────────────────────────── */
.temak{display:flex;gap:5px;align-items:center;}
/* border-radius:0 KELL: a régi lapok button{border-radius:8px} szabálya különben
   kerek pöttyökké teszi a séma-négyzeteket. */
.temak button{width:17px;height:17px;padding:0;cursor:pointer;border:1px solid var(--rule-strong);background:var(--tszin);border-radius:0;transition:transform .12s ease,box-shadow .12s ease;}
.nav-links a{white-space:nowrap;}
.temak button:hover{transform:translateY(-1px);}
.temak button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--accent);}
@media(max-width:940px){.temak{order:-1;}}


/* ── Kompatibilitás a korábbi oldalak tokenjeivel ─────────────────────────
   A régi lapok --brand/--soft/--line/--alt néven hivatkoztak a színekre.
   Ezeket a v4 tokenekre kötjük, hogy a séma-váltás rájuk is hasson.        */
:root{
  --brand:var(--accent);
  --brand2:var(--accent-deep);
  --soft:var(--gray);
  --line:var(--rule);
  --alt:var(--bg);
  --jo:#0E7C4A;
}
/* A .nav-links a{color:var(--gray)} specificitása (0,1,1) LEVERTE a .btn-accent{color:#fff}
   szabályt (0,1,0) -> a fejléc "Free API key" felirata szürke lett. Itt visszaállítjuk. */
.nav-links a.btn-accent,.nav-links .btn-accent{color:#fff;}
.nav-links a.btn-accent:hover{color:#fff;background:var(--accent-deep);}
.nav-links a.btn-line{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;}

/* A régi lapok gyakori építőelemei v4-es kabátban */
.w,.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.card,.box{background:var(--panel);border:1px solid var(--rule);border-radius:0;padding:22px 24px;}
.muted,.sub,.note{color:var(--gray);}
.codebox,pre{background:var(--panel);border:1px solid var(--rule);border-radius:0;}
code,pre,.mono{font-family:"Martian Mono",monospace;}
table{border-collapse:collapse;}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;letter-spacing:-.02em;}

/* ═══ Lábléc a lap alján ═══════════════════════════════════════════════════
   Eddig rövid oldalakon (pl. app.html) a lábléc közvetlenül a tartalom után
   jött, gyakran a képernyő közepén. A body oszlop-flexbox lesz, a lábléc
   pedig felfelé tolja magát az auto margóval — így mindig alul ül, akkor is,
   ha kevés a tartalom, de NEM ragad a képernyőre hosszú oldalon. */
body{ min-height:100vh; display:flex; flex-direction:column; padding-bottom:0; }
@supports (min-height:100dvh){ body{ min-height:100dvh; } }
/* A csík MINDEN lábléchez kell — az index.html-en a footer a <main>-en BELÜL
   van, oda a gyermek-kiválasztó nem ér el. */
footer{
  border-top:1px solid var(--line);      /* elválasztó csík a tartalomtól */
  padding-top:34px;
}
body > footer{ margin-top:auto; }        /* ez tolja a lap aljára */