/* Kiss Ádám · Kutatás weboldal, editorial rendszer (a NEPTUN / Kredit+ weboldal mintájára).
   ELVEK: nincs kártya, nincs pill/ovális, nincs dobozolt elem. A szerkezetet
   HAJSZÁLVONALAK és a TÉR adja. Túlméretes Fraunces serif címsorok, mono számok.
   Paletta: neutrális near-black, porcelán akció, a zöld akcentus KIZÁRÓLAG a márkán
   és egy-egy igazi kiemelésen.
   Copy: gondolatjel sehol, az elválasztó a "·".
   MOZGÁS: belépés ease-out, mozgás ease-in-out, ease-in soha. UI mozgás 300 ms alatt.
   Minden hover capability query-ben van, minden nyomható elemnek van :active állapota. */
:root{
  color-scheme: dark;
  --bg:#0c0d0f;
  --panel:#141518;                  /* nav panel és lenyílók, nem kártyákhoz */
  --ink:#ecedee; --ink-2:#9a9ea6; --ink-3:#7d828b;   /* --ink-3: 5.1:1 a #0c0d0f alapon, WCAG AA */
  --line:#22242a; --line-2:#31343b;
  --brand-plus:#7fbf9e;             /* a kutatás zöldje, ritkán */
  --accent:#e9e7e1; --on-accent:#17181b;
  --ok:#43C68C; --err:#E1685C;
  --font-d:"Fraunces",Georgia,"Times New Roman",serif;
  --font-b:"Hanken Grotesk",system-ui,sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --press:120ms;
  --pop-in:170ms; --pop-out:120ms;
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-b);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
button, a.btn, .nav-toggle{touch-action:manipulation; user-select:none; -webkit-user-select:none;}
.wrap{max-width:1080px; margin:0 auto;
  padding-left:max(24px, env(safe-area-inset-left));
  padding-right:max(24px, env(safe-area-inset-right));}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink-2); outline-offset:3px; border-radius:3px;}
[id]{scroll-margin-top:84px}

/* ---------- tipográfia ---------- */
h1,h2,h3{font-family:var(--font-d); font-optical-sizing:auto; text-wrap:balance;
  margin:0; font-weight:600; letter-spacing:-.012em; line-height:1.06;}
.plus{color:var(--brand-plus)}
.kicker{font-family:var(--font-m); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0;}
.num{font-family:var(--font-m); font-size:12px; font-weight:500; color:var(--ink-3);
  letter-spacing:.1em; display:block;}

/* ---------- fejléc ---------- */
header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color 240ms ease;}
header.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:62px;}
.brand{font-family:var(--font-d); font-weight:600; font-size:23px; letter-spacing:-.022em;
  text-decoration:none; margin-right:auto;}
.brand .plus{font-style:italic; font-weight:500;}
.navlinks{display:flex; gap:26px; font-size:14.5px; color:var(--ink-2);}
.navlinks a{text-decoration:none; transition:color 140ms ease}
.navlinks a[aria-current="page"]{color:var(--ink)}

.nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px;
  margin-right:-10px; border:0; background:transparent; color:var(--ink); cursor:pointer;
  transition:transform var(--press) var(--ease-out);}
.nav-toggle:active{transform:scale(.92)}
.nav-toggle svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round;}
.nav-toggle .ic-close{display:none}
header.top.nav-open .nav-toggle .ic-open{display:none}
header.top.nav-open .nav-toggle .ic-close{display:block}
@media(max-width:860px){
  .nav-toggle{display:inline-flex}
  .navlinks{position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; align-items:stretch;
    background:var(--panel); border-bottom:1px solid var(--line);
    visibility:hidden; opacity:0; transform:translateY(-6px);
    transition:opacity var(--pop-out) ease, transform var(--pop-out) var(--ease-out), visibility 0s linear var(--pop-out);}
  header.top.nav-open .navlinks{visibility:visible; opacity:1; transform:none;
    transition-duration:var(--pop-in); transition-delay:0s;}
  .navlinks a{padding:15px max(24px, env(safe-area-inset-left)); font-size:16.5px; color:var(--ink);
    border-top:1px solid var(--line);}
  .navlinks a:first-child{border-top:0}
  .navlinks a:active{background:color-mix(in srgb,var(--ink) 6%,transparent)}
}

/* ---------- akciók: EGY tömör gomb + szöveglinkek. Nincs pill. ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--on-accent);
  font-family:var(--font-b); font-weight:600; font-size:16px; line-height:1;
  padding:16px 24px; border-radius:6px; text-decoration:none; border:0; cursor:pointer;
  transition:transform var(--press) var(--ease-out), background 160ms ease, opacity 160ms ease;}
.btn:active{transform:scale(.97)}
.tlink{display:inline-block; font-size:16px; font-weight:500; color:var(--ink-2);
  text-decoration:none; border:0; border-bottom:1px solid var(--line-2); padding:0 0 2px;
  background:none; font-family:inherit; cursor:pointer;
  transition:color 140ms ease, border-color 140ms ease;}
.actions{display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:38px;}

/* ---------- szekciók: a hajszálvonal a szerkezet ---------- */
section{border-top:1px solid var(--line); padding:84px 0;}
@media(max-width:700px){ section{padding:60px 0} }
.sec-head{max-width:46ch;}
.sec-head h2{font-size:clamp(28px,4vw,40px); margin-top:14px; letter-spacing:-.018em;}
.sec-lede{color:var(--ink-2); font-size:17.5px; margin:18px 0 0; max-width:54ch;}

/* ---------- oldal teteje (aloldalak): cím + bevezető ---------- */
.top-sec{border-top:0; padding:72px 0 8px;}
.top-sec h1{font-size:clamp(34px,6vw,58px); margin-top:20px; letter-spacing:-.024em;}
.top-sec .intro{color:var(--ink-2); font-size:17.5px; margin:20px 0 0; max-width:56ch;}
@media(max-width:700px){ .top-sec{padding:52px 0 4px} }

/* ---------- lábléc ---------- */
footer{border-top:1px solid var(--line); padding:64px 0 calc(72px + env(safe-area-inset-bottom));}
.foot-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start;}
.foot-brand{font-family:var(--font-d); font-weight:600; font-size:22px; letter-spacing:-.02em;}
.foot-brand .plus{font-style:italic; font-weight:500;}
.foot-mail{margin-top:14px; font-size:15.5px; color:var(--ink-2);}
.foot-mail a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2);
  transition:border-color 140ms ease;}
.foot-links{display:flex; flex-direction:column; gap:12px; font-size:15px; color:var(--ink-2);}
.foot-links a{text-decoration:none; transition:color 140ms ease}
.disclaimer{margin-top:52px; padding-top:26px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); line-height:1.7; max-width:80ch;}

/* ---------- jogi oldalak ---------- */
.legal{padding:72px 0 24px;}
.legal .back{font-family:var(--font-m); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; display:inline-block; margin-bottom:30px;
  transition:color 140ms ease;}
.legal h1{font-size:clamp(32px,6vw,52px); letter-spacing:-.022em;}
.legal .updated{font-family:var(--font-m); font-size:12.5px; color:var(--ink-3); margin:18px 0 0;}
.prose{max-width:68ch; margin-top:46px;}
.prose h2{font-size:24px; margin:46px 0 0; letter-spacing:-.01em;}
.prose p{color:var(--ink-2); margin:14px 0 0;}
.prose ul{color:var(--ink-2); margin:14px 0 0; padding-left:18px;}
.prose li{margin:8px 0;}
.prose strong{color:var(--ink); font-weight:600;}
.prose a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2);
  transition:border-color 140ms ease;}

/* ---------- hover CSAK ott, ahol tényleg van egérkurzor ---------- */
@media (hover:hover) and (pointer:fine){
  .navlinks a:hover{color:var(--ink)}
  .btn:hover{background:#fff}
  .tlink:hover{color:var(--ink); border-bottom-color:var(--ink)}
  .foot-links a:hover{color:var(--ink)}
  .foot-mail a:hover{border-bottom-color:var(--ink)}
  .legal .back:hover{color:var(--ink)}
  .prose a:hover{border-bottom-color:var(--ink)}
}

/* ---------- mozgás ----------
   JS nélkül minden azonnal látszik, csökkentett mozgás mellett csak áttűnés van. */
@keyframes kp-rise{from{opacity:0; transform:translateY(.42em)}}
@keyframes kp-fade{from{opacity:0}}
@keyframes kp-show{to{opacity:1}}

/* a cím a JS szóra bontásáig rejtve van; ha a JS elakad, 1,8 s múlva megjelenik */
html.kp-anim :is(.hero,.top-sec,.legal) h1:not(.split){opacity:0; animation:kp-show 0s 1.8s forwards}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  html.kp-anim :is(.hero,.top-sec,.legal) h1 .w{display:inline-block;
    animation:kp-rise .58s var(--ease-out) calc(.08s + var(--i) * 55ms) both;}
  html.kp-anim :is(.hero,.top-sec) .wrap > :is(.kicker,.lede,.intro,.actions,.meta){
    animation:kp-rise .6s var(--ease-out) var(--t,.3s) both;}
  html.kp-anim :is(.hero,.top-sec) .kicker{--t:0s}
  html.kp-anim :is(.hero,.top-sec) .lede{--t:.3s}
  html.kp-anim :is(.hero,.top-sec) .intro{--t:.38s}
  html.kp-anim :is(.hero,.top-sec) .actions{--t:.44s}
  html.kp-anim :is(.hero,.top-sec) .meta{--t:.5s}

  html.js-reveal .reveal{opacity:0; transform:translateY(14px);
    transition:opacity .5s ease, transform .55s var(--ease-out);}
  html.js-reveal .reveal.in{opacity:1; transform:none;}
  html.js-reveal .reveal h2 .w{display:inline-block; opacity:0; transform:translateY(.42em);
    transition:opacity .45s ease calc(.06s + var(--i) * 45ms), transform .5s var(--ease-out) calc(.06s + var(--i) * 45ms);}
  html.js-reveal .reveal.in h2 .w{opacity:1; transform:none;}
}
@media (prefers-reduced-motion: reduce){
  html.kp-anim :is(.hero,.top-sec,.legal) h1 .w{animation:kp-fade .4s ease both}
  html.kp-anim :is(.hero,.top-sec) .wrap > :is(.kicker,.lede,.intro,.actions,.meta){animation:kp-fade .4s ease both}
  html.js-reveal .reveal{opacity:0; transition:opacity .35s ease}
  html.js-reveal .reveal.in{opacity:1}
}
@media (prefers-reduced-transparency: reduce){
  header.top{background:var(--bg); backdrop-filter:none}
}