/* ============================================================
   googlehelyezes.hu - design rendszer
   Motívum: mérőműszer. A SERP egy függőleges skála, a helyezés
   egy pont ezen a skálán. Minden vizuális döntés ebből jön.
   Effektek: csak transform / opacity / box-shadow / SVG.
   Nincs backdrop-filter, :has(), @container, mix-blend-mode.
   ============================================================ */

:root{
  /* sötét felületek: mély tengerészkék, nem fekete */
  --navy:        #1B1F3B;
  --navy-2:      #262B4F;
  --navy-3:      #343A6B;
  --navy-line:   #3F4680;

  /* világos felületek */
  --paper:       #F6F7FB;
  --paper-2:     #FFFFFF;
  --paper-3:     #E9EBF3;
  --barack:      #FFF6E8;
  --menta:       #EDF8F2;
  --levendula:   #EEF0FF;

  --ink:         #1B1F3B;
  --ink-2:       #4B5170;
  --ink-3:       #8189A6;

  /* élénk színek */
  --kek:         #3A5BF0;
  --kek-dk:      #2A44C7;
  --nap:         #FFB300;
  --nap-lt:      #FFC541;
  --nap-dk:      #D69200;
  --korall:      #FF6B4A;

  --jo:          #1FA36B;
  --kozepes:     #F5A623;
  --gyenge:      #E5484D;

  --vonal:       #DFE2EE;

  --r-s: 3px;
  --r-m: 6px;
  --r-l: 10px;

  --arnyek-s: 0 1px 2px rgba(27,31,59,.10);
  --arnyek-m: 0 4px 14px rgba(27,31,59,.10), 0 1px 3px rgba(27,31,59,.08);
  --arnyek-l: 0 18px 46px rgba(27,31,59,.20), 0 4px 12px rgba(27,31,59,.12);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,
.cim-fo,.cim-alcim,.cim-kis,
.sans{font-family:var(--sans);font-variation-settings:"wdth" 100}

h1,h2,h3,
.cim-fo,.cim-alcim{margin:0 0 .5em;line-height:1.12;letter-spacing:-.015em;font-weight:600}

a{color:var(--navy-3);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--navy)}

img,svg{max-width:100%}

.num{font-family:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-keskeny{width:100%;max-width:760px;margin:0 auto;padding:0 24px}

/* fókusz - végig látható, minden böngészőben */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--nap);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--nap);color:#fff;padding:10px 16px;font-family:var(--sans);
}
.skip:focus{left:8px;top:8px}

/* ============================================================
   FEJLÉC
   ============================================================ */
.fejlec{
  background:var(--paper-2);
  border-bottom:1px solid var(--vonal);
  /* A fejlec a lap tetejen marad, hogy a menu gorgetes kozben is elerheto
     legyen; horgonyra kattintva nem tunik el. */
  position:sticky;top:0;z-index:50;
}
.fejlec-belso{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:64px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em;
}
.logo:hover{color:var(--kek)}
.logo-jel{flex:0 0 auto;display:block}
.logo span{color:var(--kek)}

.fonav{display:flex;align-items:center;gap:26px;font-family:var(--sans);font-size:14.5px}
.fonav a{color:var(--ink-2);text-decoration:none}
.fonav a:hover{color:var(--ink)}

.fej-jobb{display:flex;align-items:center;gap:18px}
.fej-belepes{font-family:var(--sans);font-size:14.5px;color:var(--ink-2);text-decoration:none;transition:color 140ms ease}
.fej-belepes:hover{color:var(--ink)}

.fej-cta{
  display:inline-block;
  font-family:var(--sans);font-size:14.5px;font-weight:500;
  color:#fff;background:var(--kek);
  padding:9px 16px;border-radius:var(--r-m);text-decoration:none;
  transition:background .15s ease;
}
.fej-cta:hover{background-color:var(--kek-dk);color:#fff}

@media (max-width:900px){
  .fonav{display:none}
}

/* ============================================================
   HERO - ITT A LÉNYEG. Az űrlap az első képernyőn, görgetés nélkül.
   ============================================================ */
.hero{
  background:linear-gradient(160deg,var(--levendula) 0%,#FFFFFF 48%,var(--barack) 100%);
  color:var(--ink-2);
  padding:52px 0 64px;
  position:relative;
  overflow:hidden;
}
/* lágy színfoltok - radial-gradient, nem filter:blur, így mindenhol egyformán rajzolódik */
.hero-hatter{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-hatter::before,.hero-hatter::after,.hero-hatter .folt{
  content:"";position:absolute;border-radius:50%;
}
.hero-hatter::before{
  width:720px;height:720px;left:-260px;top:-320px;
  background:radial-gradient(closest-side,rgba(58,91,240,.16),rgba(58,91,240,0));
}
.hero-hatter::after{
  width:640px;height:640px;right:-200px;bottom:-320px;
  background:radial-gradient(closest-side,rgba(255,179,0,.30),rgba(255,179,0,0));
}
.hero-hatter .folt{
  width:420px;height:420px;right:18%;top:-200px;
  background:radial-gradient(closest-side,rgba(255,107,74,.16),rgba(255,107,74,0));
}
.hero .wrap{position:relative;z-index:2}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:44px;
  align-items:start;
}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
}

.hero h1{
  font-size:clamp(2rem,4.4vw,3.1rem);
  color:var(--ink);margin:0 0 6px;
  font-variation-settings:"wdth" 92;
  font-weight:700;letter-spacing:-.025em;
  position:relative;display:inline-block;
}
/* játékos aláhúzás - csak CSS, a H1 szövege érintetlen */
.hero h1::after{
  content:"";display:block;height:10px;margin-top:2px;width:62%;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 2, 120 6 S 180 9, 198 4' fill='none' stroke='%23FFB300' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}
.hero-lead{
  font-size:1.08rem;color:var(--ink-2);margin:12px 0 26px;max-width:52ch;
}

/* --- az űrlap panel --- */
.kereso{
  scroll-margin-top:24px;
  background:var(--paper-2);
  border-radius:var(--r-l);
  box-shadow:var(--arnyek-l);
  padding:26px 26px 22px;
  color:var(--ink);
  position:relative;
}
.kereso::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:4px;
  border-radius:var(--r-l) var(--r-l) 0 0;
  background:linear-gradient(90deg,var(--jo) 0 30%,var(--nap) 30% 62%,var(--gyenge) 62% 100%);
}

.mezo{margin-bottom:16px}
.mezo:last-of-type{margin-bottom:0}

.mezo label{
  display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--ink-2);margin-bottom:6px;letter-spacing:.005em;
}
.mezo .sugo{font-weight:400;color:var(--ink-3)}

.beviteli{
  width:100%;
  font-family:var(--sans);font-size:16.5px;color:var(--ink);
  background:var(--paper-2);
  border:1.5px solid var(--vonal);
  border-radius:var(--r-m);
  padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.beviteli::placeholder{color:#A3A9C4}
select.beviteli{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%2346585F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;
}
select.beviteli::-ms-expand{display:none}
.beviteli:focus{
  border-color:var(--kek);
  box-shadow:0 0 0 3px rgba(58,91,240,.16);
  outline:none;
}

/* eszközválasztó - select helyett látható kapcsoló, egy kattintás */
.eszkozok{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.eszkoz-opcio{position:relative}
.eszkoz-opcio input{
  position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer;
}
.eszkoz-opcio span{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink-2);
  border:1.5px solid var(--vonal);border-radius:var(--r-m);
  padding:10px 6px;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.eszkoz-opcio input:checked + span{
  border-color:var(--kek);
  background:var(--kek);
  color:#fff;
}
.eszkoz-opcio input:focus-visible + span{outline:2px solid var(--nap);outline-offset:2px}
.eszkoz-opcio svg{flex:0 0 auto}

/* captcha sor */
.captcha-sor{
  display:grid;grid-template-columns:1fr 108px;gap:12px;align-items:end;
}
.captcha-kerdes{
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.captcha-kerdes b{
  font-size:17px;color:var(--ink);
  background:var(--paper-3);border-radius:var(--r-s);
  padding:1px 7px;margin:0 2px;
}

.gomb{
  display:block;width:100%;
  font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.005em;
  color:#fff;background:var(--kek);
  border:0;border-radius:var(--r-m);
  padding:15px 20px;margin-top:18px;
  cursor:pointer;
  transition:background .15s ease, transform .08s ease;
}
.gomb:hover{background-color:var(--kek-dk)}
.gomb:active:not([disabled]){transform:translateY(1px) !important}
.gomb[disabled]{background:var(--ink-3);cursor:progress}

.kereso-labjegyzet{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--paper-3);
  font-family:var(--sans);font-size:13px;color:var(--ink-3);
}
.kereso-labjegyzet i{
  font-style:normal;color:#fff;background:var(--jo);font-weight:700;
  width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;margin-right:6px;
}

/* --- töltés --- */
.toltes{display:none;margin-top:16px}
.toltes.lathato{display:block}
.toltes-sav{
  height:4px;background:var(--paper-3);border-radius:99px;overflow:hidden;
}
.toltes-sav i{
  display:block;height:100%;width:38%;border-radius:99px;
  background:var(--nap);
  animation:csusz 1.15s ease-in-out infinite;
}
@keyframes csusz{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(320%)}
}
.toltes-szoveg{
  font-family:var(--sans);font-size:13.5px;color:var(--ink-2);margin-top:9px;
}

/* ============================================================
   MÉRŐLÉC - a hero jobb oldali vizuálja + eredmény kijelző
   ============================================================ */
.merolec-burok{position:relative}
.lebego{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:999px;
  box-shadow:0 12px 32px rgba(27,31,59,.16),0 2px 6px rgba(27,31,59,.08);
  padding:10px 16px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);
  animation:lebeg 6s ease-in-out infinite;
}
.lebego-1{left:-58px;top:-20px}
.lebego-1 i{
  font-style:normal;color:#fff;background:var(--jo);border-radius:50%;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:13px;
}
.lebego-2{right:-44px;top:118px;background:var(--nap);color:var(--navy);animation-delay:-2s;padding:10px 18px}
.lebego-2 b{font-size:15px;letter-spacing:.04em;font-weight:700;background:var(--navy);color:var(--nap-lt);padding:3px 7px;border-radius:5px}
.lebego-3{left:-34px;bottom:44px;animation-delay:-4s;color:var(--ink-2);font-weight:500}
@keyframes lebeg{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* amint mérés indul vagy eredmény van, a díszek eltűnnek - a valós szám mellett nincs helyük */
.lebego{transition:opacity 260ms ease,visibility 260ms}
.merolec-burok.aktiv .lebego{opacity:0;visibility:hidden}
@media (max-width:1100px){.lebego{display:none}}
.merolec{
  background:var(--navy-2);
  border:1px solid var(--navy-line);
  border-radius:var(--r-l);
  padding:18px 18px 14px;
  box-shadow:var(--arnyek-l);
}
.merolec-fej{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--sans);font-size:12.5px;color:#8F97C2;
  padding-bottom:12px;margin-bottom:4px;
  border-bottom:1px solid var(--navy-line);
}
.merolec-fej b{color:#D6DAF0;font-weight:600}

.serp{list-style:none;margin:0;padding:0;position:relative}
.serp li{
  display:flex;align-items:center;gap:12px;
  height:34px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.serp li:last-child{border-bottom:0}
.serp .poz{
  flex:0 0 22px;text-align:right;
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:600;color:#6C74A3;
}
.serp .talalat{flex:1 1 auto}
.serp .talalat i{
  display:block;height:6px;border-radius:99px;
  background:rgba(255,255,255,.13);
  margin-bottom:5px;
}
.serp .talalat u{
  display:block;height:4px;border-radius:99px;
  background:rgba(255,255,255,.07);
  text-decoration:none;
}

/* a pásztázó vonal - az oldal EGYETLEN nem-felhasználó-indította mozgása */
.pasztazo{
  position:absolute;left:-6px;right:-6px;top:0;height:2px;
  background:linear-gradient(90deg,rgba(255,197,65,0),var(--nap-lt),rgba(255,197,65,0));
  opacity:0;
  pointer-events:none;
}
.merolec.mer .pasztazo{
  animation:pasztaz 1.5s cubic-bezier(.5,0,.35,1) infinite;
}
@keyframes pasztaz{
  0%{opacity:0;transform:translateY(0)}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:0;transform:translateY(336px)}
}

/* a talált sor kiemelése */
.serp li.talalt .poz{color:var(--navy);background:var(--nap-lt);border-radius:var(--r-s);padding:2px 0}
.serp li.talalt .talalat i{background:var(--nap-lt);width:76%}
.serp li.talalt .talalat u{background:rgba(255,197,65,.4);width:52%}
.serp li.talalt .cimke{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  color:var(--navy);background:var(--nap-lt);
  padding:2px 7px;border-radius:99px;white-space:nowrap;
}

/* --- eredmény kijelző --- */
.eredmeny{display:none}
.eredmeny.lathato{display:block}
.merolec.van-eredmeny .serp-nezet{display:none}

.eredmeny-szam{
  display:flex;align-items:flex-start;gap:16px;
  padding:6px 0 18px;
  border-bottom:1px solid var(--navy-line);
}
.eredmeny-szam .helyezes{
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:76px;line-height:.86;font-weight:700;
  font-variation-settings:"wdth" 88;
  color:#fff;
}
.eredmeny-szam .helyezes.nincs{font-size:38px;line-height:1.1;letter-spacing:-.02em}
.eredmeny-oldalso{padding-top:6px}
.eredmeny-cimke{
  display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:99px;margin-bottom:8px;
}
.cimke-jo{background:var(--jo);color:#fff}
.cimke-kozepes{background:var(--nap-lt);color:var(--navy)}
.cimke-gyenge{background:var(--gyenge);color:#fff}
.eredmeny-verdikt{font-size:14.5px;color:#B9BFDD;margin:0;line-height:1.5}

.eredmeny-adatok{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--navy-line);
  border-radius:var(--r-m);overflow:hidden;
  margin:18px 0 0;
}
.eredmeny-adatok div{background:var(--navy-2);padding:11px 12px}
.eredmeny-adatok dt{
  font-family:var(--sans);font-size:11.5px;color:#8F97C2;margin:0 0 3px;
}
.eredmeny-adatok dd{
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:#E4E7F5;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* zárolt előzmény - az upsell a saját eredmény mellett a legerősebb */
.zarolt{
  margin-top:16px;padding:14px 15px;
  border:1px dashed var(--navy-line);border-radius:var(--r-m);
  display:flex;gap:13px;align-items:flex-start;
}
.zarolt svg{flex:0 0 auto;margin-top:2px}
.zarolt p{margin:0;font-size:14px;color:#B9BFDD;line-height:1.45}
.zarolt b{color:#fff;font-family:var(--sans);font-weight:600;font-size:14px;display:block;margin-bottom:2px}
.zarolt a{color:var(--nap-lt);font-family:var(--sans);font-weight:600;font-size:13.5px;text-decoration:none;display:inline-block;margin-top:6px}
.zarolt a:hover{text-decoration:underline;color:var(--nap-lt)}

.ujra{
  display:block;width:100%;margin-top:14px;
  background:transparent;border:1px solid var(--navy-line);
  color:#B9BFDD;font-family:var(--sans);font-size:14px;
  padding:10px;border-radius:var(--r-m);cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.ujra:hover{border-color:#6C74A3;color:#fff}

/* hibaüzenet */
.hiba{
  margin-top:14px;padding:12px 14px;
  background:#FBEDEB;border-left:3px solid var(--gyenge);
  border-radius:0 var(--r-s) var(--r-s) 0;
  font-family:var(--sans);font-size:14.5px;color:#7A241A;
}

/* ============================================================
   BIZALMI SÁV
   ============================================================ */
.bizalom{
  background:var(--paper-2);
  border-top:1px solid var(--vonal);border-bottom:1px solid var(--vonal);
  padding:16px 0;
}
.bizalom-belso{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 44px;
  font-family:var(--sans);font-size:13.5px;color:var(--ink-2);
}
.bizalom-belso span{display:flex;align-items:center;gap:9px}
.bizalom-belso span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kek);flex:0 0 auto}
.bizalom-belso span:nth-child(2)::before{background:var(--nap)}
.bizalom-belso span:nth-child(3)::before{background:var(--jo)}
.bizalom-belso span:nth-child(4)::before{background:var(--korall)}
.bizalom-belso b{color:var(--ink);font-weight:600}

/* ============================================================
   ÁLTALÁNOS SZEKCIÓK
   ============================================================ */
.szekcio{padding:76px 0}
.szekcio-vilagos{background:var(--paper)}
.szekcio-feher{background:var(--paper-2)}
.szekcio-barack{background:var(--barack)}
.szekcio-menta{background:var(--menta)}
.szekcio-levendula{background:var(--levendula)}

.szekcio h2,
.szekcio .cim-fo{
  font-size:clamp(1.55rem,3.1vw,2.15rem);
  font-variation-settings:"wdth" 94;
  margin:0 0 12px;max-width:22ch;
}
.szekcio-bevezeto{
  font-size:1.04rem;color:var(--ink-2);max-width:62ch;margin:0 0 40px;
}

/* --- miért csalóka --- */
.csaloka{
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
}
@media (max-width:860px){.csaloka{grid-template-columns:1fr;gap:30px}}

.csaloka-elem .cim-alcim{
  font-size:1.1rem;margin:16px 0 7px;font-weight:600;
}
.csaloka-elem p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.csaloka{counter-reset:csaloka}
.csaloka-elem{counter-increment:csaloka;position:relative}
.csaloka-abra{
  border:1px solid var(--vonal);border-radius:var(--r-l);
  background:var(--paper-2);padding:14px;position:relative;
}
.csaloka-abra::before{
  content:counter(csaloka);
  position:absolute;left:-10px;top:-10px;
  width:30px;height:30px;border-radius:50%;
  background:var(--kek);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(58,91,240,.35);
}
.csaloka-elem:nth-child(2) .csaloka-abra::before{background:var(--nap);color:var(--navy);box-shadow:0 4px 10px rgba(255,179,0,.4)}
.csaloka-elem:nth-child(3) .csaloka-abra::before{background:var(--korall);box-shadow:0 4px 10px rgba(255,107,74,.4)}

/* --- csomagok --- */
.csomagok{display:grid;gap:0;border:1px solid var(--vonal);border-radius:var(--r-l);overflow:hidden;background:var(--paper-2)}
@media (min-width:900px){
  .csomagok{grid-template-columns:1fr 1.18fr 1fr;align-items:stretch}
}
.csomag{padding:32px 28px;border-bottom:1px solid var(--vonal);position:relative}
.csomag::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--kek)}
.csomag:nth-child(3)::before{background:var(--jo)}
.csomag-kiemelt::before{background:var(--nap)}
@media (min-width:900px){
  .csomag{border-bottom:0;border-right:1px solid var(--vonal)}
  .csomag:last-child{border-right:0}
}
.csomag:last-child{border-bottom:0}

/* a fizetős csomag nem "kiemelt kártya", hanem szerkezetileg más felület */
.csomag-kiemelt{
  background:var(--navy);color:#D6DAF0;
  border-color:var(--navy);
  padding:40px 30px;
  box-shadow:var(--arnyek-l);
}
.csomag-kiemelt .cim-alcim{color:#fff}
.csomag-kiemelt .ar{color:#fff}
.csomag-kiemelt .csomag-lista li{color:#D6DAF0;border-color:rgba(255,255,255,.09)}
.csomag-kiemelt .csomag-lista li::before{background:var(--nap-lt)}

.csomag .cim-alcim{
  font-size:1.02rem;font-weight:600;margin:0 0 4px;
  font-variation-settings:"wdth" 100;
}
.csomag-kinek{font-size:14px;color:var(--ink-3);margin:0 0 20px;min-height:2.6em}
.csomag-kiemelt .csomag-kinek{color:#8F97C2}

.ar{
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:40px;font-weight:700;line-height:1;letter-spacing:-.025em;
  font-variation-settings:"wdth" 90;
  display:block;margin-bottom:4px;
}
.ar-alatt{font-family:var(--sans);font-size:13px;color:var(--ink-3);margin:0 0 22px}
.csomag-kiemelt .ar-alatt{color:#8F97C2}

.csomag-lista{list-style:none;margin:0 0 26px;padding:0;font-size:15px}
.csomag-lista li{
  padding:9px 0 9px 26px;position:relative;
  border-bottom:1px solid var(--paper-3);color:var(--ink-2);line-height:1.45;
}
.csomag-lista li:last-child{border-bottom:0}
.csomag-lista li::before{
  content:"";position:absolute;left:2px;top:17px;
  width:7px;height:7px;border-radius:50%;background:var(--nap);
}

.csomag-gomb{
  display:block;text-align:center;text-decoration:none;
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  padding:13px 18px;border-radius:var(--r-m);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.gomb-elsodleges{background:var(--nap-lt);color:var(--navy)}
.gomb-elsodleges:hover{background-color:var(--nap);color:var(--navy)}
.gomb-masodlagos{border:1.5px solid var(--vonal);color:var(--navy)}
.gomb-masodlagos:hover{border-color:var(--navy);color:var(--navy)}

.csomag-bovites{
  font-family:var(--sans);font-size:13.5px;color:#B9BFDD;margin:-8px 0 18px;
  padding:10px 12px;border:1px dashed var(--navy-line);border-radius:var(--r-m);
}
.csomag-bovites b{color:#fff;font-weight:600}
.csomag-apro{font-family:var(--sans);font-size:12.5px;color:#8F97C2;margin:12px 0 0;text-align:center;line-height:1.45}
.ugynoksegi{
  margin:22px 0 0;padding:16px 20px;
  background:var(--paper-2);border:1px solid var(--vonal);border-radius:var(--r-m);
  font-size:15px;color:var(--ink-2);
}
.ugynoksegi b{color:var(--ink);font-weight:600}

/* --- riport előnézet --- */
.riport-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:56px;align-items:center;
}
@media (max-width:960px){.riport-grid{grid-template-columns:1fr;gap:36px}}

.riport-lista{list-style:none;margin:0;padding:0}
.riport-lista li{
  padding:0 0 20px 0;margin:0 0 20px 0;
  border-bottom:1px solid var(--vonal);
}
.riport-lista li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.riport-lista .cim-alcim{font-size:1.02rem;margin:0 0 4px;font-weight:600}
.riport-lista p{margin:0;font-size:15.5px;color:var(--ink-2)}

.riport-mock{
  background:var(--paper-2);
  border:1px solid var(--vonal);
  border-radius:var(--r-l);
  box-shadow:var(--arnyek-m);
  overflow:hidden;
}
.riport-fejlec{
  background:var(--paper);border-bottom:1px solid var(--vonal);
  padding:14px 18px;font-family:var(--sans);font-size:13px;color:var(--ink-3);
}
.riport-fejlec b{display:block;font-size:15px;color:var(--ink);font-weight:600;margin-bottom:2px}
.riport-tabla{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px}
.riport-tabla th{
  text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-3);
  padding:10px 18px;border-bottom:1px solid var(--vonal);
}
.riport-tabla th:last-child,.riport-tabla td:last-child{text-align:right}
.riport-tabla td{padding:11px 18px;border-bottom:1px solid var(--paper-3);color:var(--ink)}
.riport-tabla tr:last-child td{border-bottom:0}
.riport-tabla .poz-szam{font-variant-numeric:tabular-nums;font-weight:600}
.riport-tabla .poz-halvany{font-weight:400;color:var(--ink-3)}
.riport-tabla th:nth-child(n+2),.riport-tabla td:nth-child(n+2){text-align:right;white-space:nowrap}
.valt{font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px}
.valt-fel{color:var(--jo)}
.valt-le{color:var(--gyenge)}
.valt-nulla{color:var(--ink-3)}

/* --- SEO ajánlat --- */
.ajanlat{
  background:linear-gradient(135deg,var(--navy) 0%,#2A3A9E 100%);color:#D6DAF0;
  border-radius:var(--r-l);
  padding:52px 48px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:44px;align-items:center;
  box-shadow:var(--arnyek-l);
}
@media (max-width:860px){
  .ajanlat{grid-template-columns:1fr;padding:36px 26px;gap:28px}
}
.ajanlat .cim-fo{color:#fff;margin:0 0 12px;font-size:clamp(1.5rem,3vw,2rem)}
.ajanlat p{margin:0 0 6px;font-size:1.02rem;color:#B9BFDD;max-width:56ch}
.ajanlat-gombok{display:flex;flex-direction:column;gap:10px;min-width:230px}
.ajanlat-tel{
  font-family:var(--sans);font-size:13.5px;color:#8F97C2;text-align:center;margin:2px 0 0;
}
.ajanlat-tel a{color:#D6DAF0;text-decoration:none}

/* --- SEO szöveges rész --- */
.szoveg h2{margin-top:0}
.szoveg h3{font-size:1.16rem;margin:0 0 10px;font-weight:600}
.szoveg p{margin:0 0 16px;max-width:68ch}
.szoveg strong{font-weight:600;color:var(--ink)}

/* --- GYIK --- */
.gyik details{
  border-bottom:1px solid var(--vonal);
}
.gyik details:first-of-type{border-top:1px solid var(--vonal)}
.gyik summary{
  cursor:pointer;list-style:none;
  padding:20px 40px 20px 0;position:relative;
  font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--ink);
}
.gyik summary::-webkit-details-marker{display:none}
.gyik summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--nap);border-bottom:2px solid var(--nap);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.gyik details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.gyik .valasz{overflow:hidden}
.gyik .valasz-belso{padding:0 40px 22px 0;margin:0;color:var(--ink-2);max-width:70ch}
.gyik .valasz p{margin:0 0 12px}
.gyik .valasz p:last-child{margin:0}

/* ============================================================
   LÁBLÉC
   ============================================================ */
.lablec{
  background:var(--navy);color:#8F97C2;
  padding:56px 0 30px;font-size:14.5px;
}
.lablec-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;
  padding-bottom:34px;border-bottom:1px solid var(--navy-line);
}
@media (max-width:800px){.lablec-grid{grid-template-columns:1fr;gap:30px}}
.lablec .cim-kis{
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:#E4E7F5;
  margin:0 0 14px;
}
.lablec ul{list-style:none;margin:0;padding:0}
.lablec li{margin-bottom:8px}
.lablec a{color:#8F97C2;text-decoration:none}
.lablec a:hover{color:#fff}
.lablec-cegadat{margin:0;line-height:1.7;font-size:13.5px}
.lablec-cegadat b{color:#D6DAF0;font-family:var(--sans);font-weight:600}
.lablec-alja{padding-top:22px;font-size:13px;color:#6C74A3}



/* ============================================================
   A MEGLÉVŐ SZÖVEGBLOKK ELRENDEZÉSE
   A H2/H3 tagek és a <strong> kiemelések érintetlenek -
   itt csak burkoló elemek és CSS ad nekik szerkezetet.
   ============================================================ */
.szoveg-elrendezes{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:56px;align-items:start;
}
@media (max-width:920px){
  .szoveg-elrendezes{grid-template-columns:minmax(0,1fr);gap:34px}
  .szoveg-oldalso{order:2}
  .szoveg{order:1}
}

/* A ragadó fejléc alá csúszna, ezért annyival lejjebb tapad. */
.szoveg-oldalso{position:sticky;top:calc(var(--fejlec-magassag, 64px) + 24px)}
@media (max-width:920px){.szoveg-oldalso{position:static}}

.skala-legenda{
  border:1px solid var(--vonal);border-radius:var(--r-m);
  background:var(--paper);padding:20px 20px 18px;
}
.skala-legenda .cim-kis{font-size:12.5px;color:var(--ink-2);margin:0 0 12px;font-weight:600}
.skala-legenda ul{list-style:none;margin:0 0 16px;padding:0;font-family:var(--sans);font-size:13.5px}
.skala-legenda li{
  display:flex;align-items:baseline;gap:9px;padding:7px 0;
  border-bottom:1px solid var(--paper-3);color:var(--ink-2);line-height:1.35;
}
.skala-legenda li:last-child{border-bottom:0}
.skala-legenda b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pont{flex:0 0 auto;width:8px;height:8px;border-radius:50%;position:relative;top:-1px}
.pont-jo{background:var(--jo)}
.pont-kozepes{background:var(--nap)}
.pont-gyenge{background:var(--gyenge)}
.pont-semmi{background:var(--ink-3)}
.oldalso-link{
  display:inline-block;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--navy-3);text-decoration:none;
}


.szoveg-lead{
  font-size:1.14rem;line-height:1.58;color:var(--ink);
  padding-bottom:26px;margin-bottom:0;border-bottom:1px solid var(--vonal);
}

/* mérőléc a szövegblokkok mellett - a hero motívumának ismétlése */
.szoveg-blokkok{position:relative;padding-left:34px;margin-top:32px}
.szoveg-blokkok::before{
  content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--vonal);
}
.szoveg-blokk{position:relative;margin-bottom:32px}
.szoveg-blokk:last-child{margin-bottom:0}
.szoveg-blokk::before{
  content:"";position:absolute;left:-34px;top:8px;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper-2);border:2px solid var(--nap);
}
@media (max-width:560px){
  .szoveg-blokkok{padding-left:24px}
  .szoveg-blokkok::before{left:3px}
  .szoveg-blokk::before{left:-24px;width:9px;height:9px;top:9px}
}

/* a záró blokkból cselekvésre hívás lesz */
.szoveg-cta{
  margin-top:44px;background:var(--navy);color:#B9BFDD;
  border-radius:var(--r-l);padding:30px 32px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;
}
@media (max-width:700px){.szoveg-cta{grid-template-columns:1fr;gap:20px;padding:26px 22px}}
.szoveg-cta h3{color:#fff;margin:0 0 7px;font-size:1.16rem}
.szoveg-cta p{margin:0;max-width:58ch;font-size:15.5px;line-height:1.55}
.szoveg-cta strong{color:#fff}
.szoveg-cta .csomag-gomb{white-space:nowrap}

/* ============================================================
   ÁTMENETEK
   Csak olyan tulajdonságokat animálunk, amit minden motor
   (Blink, WebKit, Gecko) ugyanúgy kezel és a compositoron fut:
   color, background-color, border-color, box-shadow,
   transform, opacity. Nincs "transition:all", nincs filter,
   nincs backdrop-filter. Az aláhúzás-effekt scaleX transformmal
   készül, nem width-tel, így nem okoz újratördelést.
   ============================================================ */
:root{
  --atmenet-gyors:140ms cubic-bezier(.4,0,.2,1);
  --atmenet:220ms cubic-bezier(.4,0,.2,1);
}

a{transition:color var(--atmenet-gyors)}

/* logó */
.logo{transition:color var(--atmenet-gyors)}
.logo-jel{transition:transform var(--atmenet)}
.logo:hover .logo-jel{transform:translateY(2px)}

/* fő menü - aláhúzás balról nő ki, elhagyáskor jobbra fut ki */
.fonav a{position:relative;transition:color var(--atmenet-gyors)}
.fonav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--kek);
  transform:scaleX(0);transform-origin:right center;
  transition:transform var(--atmenet);
}
.fonav a:hover::after,
.fonav a:focus-visible::after{transform:scaleX(1);transform-origin:left center}

.fej-cta{transition:background-color var(--atmenet-gyors),color var(--atmenet-gyors),transform var(--atmenet-gyors),box-shadow var(--atmenet)}
.fej-cta:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.28)}

/* űrlapmezők */
.beviteli{transition:border-color var(--atmenet-gyors),box-shadow var(--atmenet-gyors),background-color var(--atmenet-gyors)}
.beviteli:hover{border-color:#C9CEE0}
.beviteli:focus:hover{border-color:var(--navy-3)}

.eszkoz-opcio span{transition:border-color var(--atmenet-gyors),background-color var(--atmenet-gyors),color var(--atmenet-gyors),transform var(--atmenet-gyors)}
.eszkoz-opcio:hover input:not(:checked) + span{border-color:var(--kek);color:var(--kek)}
.eszkoz-opcio:active span{transform:translateY(1px)}

.gomb{transition:background-color var(--atmenet-gyors),box-shadow var(--atmenet),transform 90ms cubic-bezier(.4,0,.2,1)}
.gomb:hover{box-shadow:0 8px 22px rgba(58,91,240,.35)}
.gomb[disabled]:hover{box-shadow:none}

.ujra{transition:border-color var(--atmenet-gyors),color var(--atmenet-gyors),background-color var(--atmenet-gyors)}

/* mérőléc sorai */
.serp li{transition:background-color var(--atmenet-gyors)}
.serp li:hover{background-color:rgba(255,255,255,.045)}

.zarolt{transition:border-color var(--atmenet)}
.zarolt:hover{border-color:#8189A6}

/* magyarázó ábrák */
.csaloka-abra{transition:border-color var(--atmenet),box-shadow var(--atmenet),transform var(--atmenet)}
.csaloka-elem:hover .csaloka-abra{border-color:#C9CEE0;box-shadow:var(--arnyek-m);transform:translateY(-3px)}

/* csomagok */
.csomag{transition:background-color var(--atmenet)}
.csomag:hover{background-color:var(--paper)}
.csomag-kiemelt{transition:box-shadow var(--atmenet)}
.csomag-kiemelt:hover{background-color:var(--navy);box-shadow:0 24px 58px rgba(27,31,59,.34)}

.csomag-gomb{transition:background-color var(--atmenet-gyors),border-color var(--atmenet-gyors),color var(--atmenet-gyors),transform var(--atmenet-gyors),box-shadow var(--atmenet)}
.csomag-gomb:hover{transform:translateY(-2px)}
.csomag-gomb:active{transform:translateY(0)}
.gomb-elsodleges:hover{box-shadow:0 9px 22px rgba(0,0,0,.24)}
.gomb-masodlagos:hover{box-shadow:var(--arnyek-s)}

/* riport tábla */
.riport-mock{transition:box-shadow var(--atmenet)}
.riport-mock:hover{box-shadow:var(--arnyek-l)}
.riport-tabla tbody tr{transition:background-color var(--atmenet-gyors)}
.riport-tabla tbody tr:hover{background-color:var(--paper)}

/* GYIK */
.gyik summary{transition:color var(--atmenet-gyors),background-color var(--atmenet-gyors)}
.gyik summary:hover{color:var(--navy-3)}
.gyik summary::after{transition:transform var(--atmenet),border-color var(--atmenet-gyors)}
.gyik summary:hover::after{border-right-color:var(--nap-dk);border-bottom-color:var(--nap-dk)}

/* lábléc linkek */
.lablec a{position:relative;transition:color var(--atmenet-gyors)}
.lablec a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right center;
  transition:transform var(--atmenet);
}
.lablec a:hover::after{transform:scaleX(1);transform-origin:left center}

.gyik .valasz{transition:height 260ms cubic-bezier(.4,0,.2,1)}

/* a szövegtörzs linkjei */
.szoveg a,.gyik .valasz a{transition:color var(--atmenet-gyors)}


/* ============================================================
   HOVER - minden kattintható elemre
   Három visszatérő gesztus, hogy egységes legyen a nyelv:
   1) LINK  - aláhúzás balról nő ki, elhagyáskor jobbra fut ki
   2) TÖLTŐ GOMB - a felület alulról telik fel színnel
   3) TÖMÖR GOMB - megemelkedik és árnyékot vet
   Mind a három scaleX/scaleY/translate/background-size -
   ezeket minden motor ugyanúgy rajzolja, és egyik sem
   okoz újratördelést.
   ============================================================ */

/* --- 1) LINK-ALÁHÚZÁS --- */
.zarolt a,
.oldalso-link,
.ajanlat-tel a,
.szoveg a,
.gyik .valasz a{
  position:relative;text-decoration:none;
  transition:color var(--atmenet-gyors);
}
.zarolt a::after,
.oldalso-link::after,
.ajanlat-tel a::after,
.szoveg a::after,
.gyik .valasz a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right center;
  transition:transform var(--atmenet);
}
.zarolt a:hover::after,      .zarolt a:focus-visible::after,
.oldalso-link:hover::after,  .oldalso-link:focus-visible::after,
.ajanlat-tel a:hover::after, .ajanlat-tel a:focus-visible::after,
.szoveg a:hover::after,      .szoveg a:focus-visible::after,
.gyik .valasz a:hover::after,.gyik .valasz a:focus-visible::after{
  transform:scaleX(1);transform-origin:left center;
}
.oldalso-link:hover{color:var(--navy)}
.ajanlat-tel a:hover{color:#fff}
.zarolt a:hover{color:#fff}

/* --- 2) TÖLTŐ GOMB - a szín alulról tölti fel --- */
.gomb-masodlagos,
.gomb-sotet,
.ujra{
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 0;
  transition:color var(--atmenet-gyors),
             border-color var(--atmenet-gyors),
             background-size var(--atmenet),
             transform var(--atmenet-gyors),
             box-shadow var(--atmenet);
}
.gomb-masodlagos{background-image:linear-gradient(var(--navy),var(--navy))}
.gomb-masodlagos:hover,.gomb-masodlagos:focus-visible{
  background-size:100% 100%;
  border-color:var(--navy);
  color:#fff;
}

/* sötét felületen álló változat: fehérrel telik fel */
.gomb-sotet{
  border:1.5px solid var(--navy-line);
  color:#D6DAF0;
  background-image:linear-gradient(#fff,#fff);
}
.gomb-sotet:hover,.gomb-sotet:focus-visible{
  background-size:100% 100%;
  border-color:#fff;
  color:var(--navy);
}

.ujra{background-image:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07))}
.ujra:hover{background-size:100% 100%;border-color:#6C74A3;color:#fff}

/* --- 3) TÖMÖR GOMB --- */
.gomb:hover:not([disabled]){transform:translateY(-1px)}
.gomb-elsodleges:hover,.gomb-elsodleges:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.26);
}

/* --- kiegészítő felületek --- */
.skip{transition:background-color var(--atmenet-gyors),transform var(--atmenet-gyors)}
.skip:hover{background-color:var(--nap-dk)}

.skala-legenda li{transition:color var(--atmenet-gyors)}
.skala-legenda li:hover{color:var(--ink)}
.pont{transition:transform var(--atmenet)}
.skala-legenda li:hover .pont{transform:scale(1.45)}

.szoveg-blokk::before{transition:background-color var(--atmenet),transform var(--atmenet)}
.szoveg-blokk:hover::before{background-color:var(--nap);transform:scale(1.25)}

.eszkoz-opcio input:checked + span{box-shadow:0 3px 10px rgba(27,31,59,.22)}

.gyik details:not([open]) summary:hover::after{transform:rotate(45deg) translate(1.5px,1.5px)}

/* a fókusz mindenhol ugyanazt a jelet kapja, mint az egér */
.csomag-gomb:focus-visible,.gomb:focus-visible,.fej-cta:focus-visible{transform:translateY(-2px)}

/* ============================================================
   MOZGÁSCSÖKKENTÉS
   Itt nincs mit visszavenni, és ez szándékos döntés:
   - a hover- és fókusz-átmenetek rövidek (140-260 ms), a
     felhasználó indítja őket, nem ismétlődnek, és a legnagyobb
     elmozdulás is 3 pixel;
   - az egyetlen ismétlődő animáció a mérés pásztázó vonala és a
     töltéssáv, azok viszont nem díszek: azt közlik, hogy fut a
     lekérdezés, ezért ezeknek mindig le kell futniuk.
   Ezért nem kapcsolunk ki semmit prefers-reduced-motion alatt.
   Ha később nagy elmozdulású vagy magától induló animáció kerül
   az oldalra, azt itt kell letiltani - de csak azt.
   ============================================================ */


/* ============================================================
   KIEGÉSZÍTÉS - valós mérési eredmény
   A design-rendszer meglévő tokenjeit használja, új színt nem vezet be.
   ============================================================ */

/* A mérőléc sorai valós URL-ekkel töltődnek fel a mérés után:
   a hoszt félkövéren, az útvonal halványan. */
.serp .talalat-valos{
  display:flex;align-items:baseline;gap:2px;
  min-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--sans);font-size:12.5px;line-height:1.2;
}
.serp .serp-hoszt{
  flex:0 0 auto;font-weight:600;color:#B9BFDD;
}
.serp .serp-utvonal{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  color:#6C74A3;
}
.serp li.talalt .serp-hoszt{color:var(--nap-lt)}
.serp li.talalt .serp-utvonal{color:rgba(255,197,65,.72)}

/* "Az ön oldala: 23. hely" - ha a domain a top 10-en túl van. */
.serp-kivul{
  margin:10px 0 0;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--sans);font-size:13px;color:#B9BFDD;
}

/* Az "Új lekérdezés" gomb link lett, hogy tiszta oldalra vigyen vissza. */
a.ujra{text-align:center;text-decoration:none}

/* A "Talált oldal" sor hivatkozása az eredmény-adatok között. */
.eredmeny-adatok a{color:#B9BFDD;text-decoration:underline;text-underline-offset:2px}
.eredmeny-adatok a:hover{color:#fff}

/* Az űrlap fölötti hibaüzenet a keresődobozban. */
.kereso .hiba{margin:0 0 16px}
.kereso .hiba + p .gomb{margin-bottom:16px}

/* ============================================================
   KIEGÉSZÍTÉS - belső tájékoztató oldalak
   (hogyan mérünk, jogi oldalak, hibaoldal)
   ============================================================ */

.szoveg h1{
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  color:var(--ink);margin:0 0 14px;
  font-variation-settings:"wdth" 94;
  font-weight:700;letter-spacing:-.022em;
}
.szoveg h2{
  font-size:1.42rem;margin:38px 0 12px;font-weight:600;
}
.szoveg h2:first-of-type{margin-top:32px}
.szoveg ul,.szoveg ol{margin:0 0 16px;padding-left:1.25em;max-width:68ch}
.szoveg li{margin:0 0 6px}
.szoveg b,.szoveg strong{font-weight:600}

/* Az országlista két hasábban, hogy ne nyúljon el. */
.orszag-lista{
  list-style:none;padding:0;
  columns:2;column-gap:28px;
  font-family:var(--sans);font-size:14.5px;
}
@media (max-width:560px){ .orszag-lista{columns:1} }

/* Hibaoldal */
.hiba-oldal{text-align:left}
.hiba-kod{
  font-size:clamp(3rem,9vw,5.5rem);line-height:1;
  color:var(--paper-3);font-weight:700;margin:0 0 4px;
  letter-spacing:-.04em;
}

/* ============================================================
   KIEGÉSZÍTÉS - ragadó fejléc
   A fejléc görgetés közben a lap tetején marad (lásd .fejlec).
   Ezért a horgonyra ugró szekciók fölött helyet kell hagyni,
   különben a fejléc eltakarná a szakaszcímet.
   ============================================================ */
:root{ --fejlec-magassag:64px; }

[id]{ scroll-margin-top:calc(var(--fejlec-magassag) + 12px); }

html{ scroll-behavior:smooth; }

/* Aki a kevesebb mozgást kéri, annak ugrás marad. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ============================================================
   KIEGÉSZÍTÉS - reszponzív javítások
   A design-fájl 900 px alatt egyszerűen elrejtette a menüt, és
   telefonon több elem kilógott a képernyőről (fejléc, riport-tábla).
   ============================================================ */

/* Biztonsági háló: díszítőelem ne okozhasson vízszintes görgetést.
   A "clip" nem hoz létre görgetőkonténert, így a ragadó fejléc működik. */
html,body{overflow-x:clip}

/* --- mobilmenü ------------------------------------------------ */
.menu-gomb{
  display:none;
  width:40px;height:40px;flex:0 0 40px;
  align-items:center;justify-content:center;
  background:transparent;color:var(--ink);
  border:1px solid var(--vonal);border-radius:var(--r-m);
  cursor:pointer;padding:0;
  transition:border-color .15s ease,background-color .15s ease;
}
.menu-gomb:hover{border-color:#C9CEE0;background:var(--paper)}
.menu-gomb path{transition:transform .2s ease,opacity .15s ease;transform-origin:10px 10px}
.fejlec.menu-nyitva .menu-vonal-1{transform:translateY(4.5px) rotate(45deg)}
.fejlec.menu-nyitva .menu-vonal-2{opacity:0}
.fejlec.menu-nyitva .menu-vonal-3{transform:translateY(-4.5px) rotate(-45deg)}

.fonav-belepes{display:none}

@media (max-width:900px){
  /* A gomb csak akkor látszik, ha a szkript betöltött és kezelni tudja. */
  .js .menu-gomb{display:inline-flex}

  .fejlec-belso{gap:12px}

  .fejlec.menu-nyitva .fonav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper-2);
    border-bottom:1px solid var(--vonal);
    box-shadow:0 14px 28px rgba(27,31,59,.12);
    padding:6px 24px 12px;
    font-size:16px;
    max-height:calc(100vh - var(--fejlec-magassag));overflow-y:auto;
  }
  .fejlec.menu-nyitva .fonav a{
    padding:14px 2px;color:var(--ink);
    border-bottom:1px solid var(--paper-3);
  }
  .fejlec.menu-nyitva .fonav a:last-child{border-bottom:0}
  /* A hover-aláhúzás a lenyíló listában zavaró lenne. */
  .fejlec.menu-nyitva .fonav a::after{display:none}
}

/* --- telefon -------------------------------------------------- */
@media (max-width:560px){
  .wrap,.wrap-keskeny{padding-left:18px;padding-right:18px}
  .szekcio{padding:54px 0}

  /* Fejléc: logó + Regisztráció + menügomb fér el; a Belépés a menübe megy. */
  .fej-jobb{gap:10px}
  .fej-belepes{display:none}
  .fonav-belepes{display:block}
  .fejlec.menu-nyitva .fonav{padding-left:18px;padding-right:18px}
  .logo{font-size:15.5px;gap:8px}
  .fej-cta{font-size:13.5px;padding:8px 12px;white-space:nowrap}

  /* Az ellenőrző kérdés és a válaszmező egymás alá kerül, így a kérdés
     nem törik ketté. */
  .captcha-sor{grid-template-columns:1fr;gap:8px}

  /* Riport-előnézet: szűkebb cellák, hogy mind az öt oszlop kiférjen. */
  .riport-tabla{font-size:12.5px}
  .riport-tabla th,.riport-tabla td{padding:9px 7px}
  .riport-tabla th:first-child,.riport-tabla td:first-child{padding-left:12px}
  .riport-tabla th:last-child,.riport-tabla td:last-child{padding-right:12px}

  .szoveg-cta{padding:24px 20px}
}

/* Ha a tábla mégsem férne ki (nagyon hosszú kulcsszó), a kártyán belül
   görögjön, ne az egész oldal. */
.riport-mock{overflow-x:auto}

/* --- nagyon keskeny telefon (320 px) --------------------------- */
@media (max-width:360px){
  .logo-jel{display:none}
  .logo{font-size:15px}
  .fej-cta{padding:8px 10px}

  .riport-tabla{font-size:12px}
  .riport-tabla th,.riport-tabla td{padding:8px 4px}
  .riport-tabla th:first-child,.riport-tabla td:first-child{padding-left:10px}
  .riport-tabla th:last-child,.riport-tabla td:last-child{padding-right:10px}
}

/* ============================================================
   KIEGÉSZÍTÉS - süti-sáv (Google Ads mérés hozzájárulással)
   Az "Elutasítom" ugyanolyan hangsúlyos, mint az "Elfogadom".
   ============================================================ */
.suti-sav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--navy);color:#D6DAF0;
  box-shadow:0 -10px 30px rgba(27,31,59,.25);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  padding:14px 0;
}
.suti-sav[hidden]{display:none}
.suti-sav-belso{display:flex;gap:18px;align-items:center;justify-content:space-between}
.suti-sav p{margin:0;max-width:78ch}
.suti-sav a{color:#fff}
.suti-sav-gombok{display:flex;gap:10px;flex:0 0 auto}
.suti-gomb{
  font-family:var(--sans);font-size:14px;font-weight:600;
  min-width:118px;padding:10px 16px;border-radius:var(--r-m);cursor:pointer;
  background:#fff;color:var(--navy);border:1px solid #fff;
  transition:background-color .15s ease,color .15s ease;
}
.suti-gomb:hover{background:var(--nap-lt);border-color:var(--nap-lt)}
@media (max-width:700px){
  .suti-sav-belso{flex-direction:column;align-items:stretch;gap:12px}
  .suti-sav-gombok .suti-gomb{flex:1 1 0}
}

/* ============================================================
   KIEGÉSZÍTÉS - landing oldal (/figyelo)
   ============================================================ */
@media (min-width:900px){
  .csomagok.csomagok-ketto{grid-template-columns:1.1fr 1fr;max-width:860px;margin:0 auto}
}
.csomagok-ketto .csomag:nth-child(2)::before{background:var(--kek)}

/* --- landing: "későn értesül" szekció --- */
.lp-gond{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:56px;align-items:center;
}
.lp-gond .szekcio-bevezeto{margin-bottom:26px}
@media (max-width:960px){.lp-gond{grid-template-columns:1fr;gap:34px}}
.lp-okok{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lp-okok li{
  position:relative;padding:14px 16px 14px 44px;
  background:var(--paper-2);border-radius:var(--r-m);box-shadow:var(--arnyek-s);
  color:var(--ink-2);line-height:1.5;
}
.lp-okok li::before{
  content:"!";position:absolute;left:14px;top:14px;
  width:20px;height:20px;border-radius:50%;
  background:var(--korall);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.lp-okok b{color:var(--ink);font-weight:600}

.lp-grafikon{
  margin:0;background:var(--paper-2);border-radius:var(--r-l);
  box-shadow:var(--arnyek-m);padding:20px 22px 18px;
}
.lp-grafikon figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.92rem;color:var(--ink-2);margin-bottom:8px;
}
.lp-grafikon-poz{font-weight:700;color:var(--gyenge);font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-grafikon svg{display:block;width:100%;height:auto}
.lp-racs line{stroke:var(--vonal);stroke-width:1}
.lp-tengely text{fill:var(--ink-3);font-size:12px;text-anchor:end;font-family:var(--sans)}
.lp-vonal{fill:none;stroke:var(--kek);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.lp-jel{stroke-width:2;stroke-dasharray:5 5}
.lp-jel-jo{stroke:var(--jo)}
.lp-jel-rossz{stroke:var(--gyenge)}
.lp-pont-jo{fill:var(--jo);stroke:#fff;stroke-width:2}
.lp-pont-rossz{fill:var(--gyenge);stroke:#fff;stroke-width:2}
.lp-jelmagyarazat{border-top:1px solid var(--vonal);margin-top:10px;padding-top:12px;display:grid;gap:6px}
.lp-jelmagyarazat p{margin:0;font-size:.92rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.lp-jelmagyarazat b{color:var(--ink);font-weight:600}
.lp-folt{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.lp-folt-jo{background:var(--jo)}
.lp-folt-rossz{background:var(--gyenge)}