/* ═══════════════════════════════════════════════════════════════════════
   Website Audit — design system
   A Claude Design handoff (Website UI mockups) alapján, 1:1 tokenekkel.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* felületek */
  --navy:#0D2138;        /* sötét szekciók, fejléc-logó */
  --blue:#163A5F;        /* CTA sávok */
  --orange:#F58220;      /* akcentus */
  --orange-dark:#DE6F10; /* hover */
  --page:#F7F8FA;        /* oldal háttér */
  --tint:#EEF2F6;        /* halvány szekció */
  --tint-2:#E9EEF3;      /* rólunk szekció */

  /* szöveg */
  --ink:#17202D;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  /* sötét háttéren */
  --on-dark:#9FB2C4;
  --on-dark-2:#8AA0B5;
  --on-dark-3:#C6D2DE;
  --on-dark-4:#5E7590;

  /* vonalak */
  --line:#E2E7EC;
  --line-2:#DCE3EA;
  --line-3:#CDD6DF;
  --line-4:#F0F3F6;
  --track:#EDF0F3;

  /* állapotok */
  --red:#B42318;
  --amber:#B54708;
  --green:#067647;

  --wrap:1240px;
  --pad:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#DFE3E8;font-family:'IBM Plex Sans',system-ui,sans-serif;
     color:var(--ink);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--orange)}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* a teljes oldal egy "lapon" ül, ahogy a mockupban */
.sheet{max-width:1440px;margin:0 auto;background:var(--page);
       box-shadow:0 1px 2px rgba(13,33,56,.08),0 24px 60px rgba(13,33,56,.16)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ─── fejléc ─── */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
     backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{height:68px;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:26px;height:26px;background:var(--navy);display:grid;place-items:center;
            border-radius:5px;flex:none}
.brand-name{font:600 16px/1 'IBM Plex Sans';letter-spacing:-.01em;color:var(--ink)}
.brand-sub{font:400 11px/1 'IBM Plex Mono',monospace;color:var(--ink-4);letter-spacing:.06em;
           padding-left:8px;border-left:1px solid var(--line)}
.top nav{display:flex;align-items:center;gap:28px}
.top nav a{font:450 14.5px/1 'IBM Plex Sans';color:var(--ink-2)}
.top nav a:hover,.top nav a[aria-current=page]{color:var(--orange)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:20px}
.lang{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lang span,.lang a{font:600 11.5px/1 'IBM Plex Mono',monospace;padding:6px 9px}
.lang .on{background:var(--navy);color:#fff}
.lang a{font-weight:500;color:var(--ink-3)}
.lang a:hover{color:var(--orange)}

/* ─── gombok ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     font:600 15px/1 'IBM Plex Sans';padding:15px 22px;border-radius:8px;border:0;
     white-space:nowrap;text-align:center}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn-ghost:hover{border-color:var(--navy);color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line-3);font-weight:600;
          font-size:14.5px;padding:14px}
.btn-line:hover{border-color:var(--navy);color:var(--ink)}
.btn-sm{font-size:14px;padding:11px 18px}
.btn-block{display:block;width:100%}

/* ─── tipográfia ─── */
.kicker{font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;
        text-transform:uppercase;color:var(--orange)}
.kicker-line{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.kicker-line i{width:22px;height:2px;background:var(--orange);display:block}
h1{margin:16px 0 0;font:600 40px/1.15 'IBM Plex Sans';letter-spacing:-.025em;color:var(--ink)}
h2{margin:16px 0 0;font:600 32px/1.2 'IBM Plex Sans';letter-spacing:-.02em;color:var(--ink)}
h3{margin:0 0 10px;font:600 18px/1.35 'IBM Plex Sans';letter-spacing:-.01em;color:var(--ink)}
p{margin:0 0 12px}
.lead{font:400 16.5px/1.6 'IBM Plex Sans';color:var(--ink-3)}
.mono{font-family:'IBM Plex Mono',monospace}

/* ─── szekciók ─── */
section{padding:88px 0}
.s-white{background:#fff;border-bottom:1px solid var(--line)}
.s-tint{background:var(--tint);border-bottom:1px solid var(--line-2)}
.s-navy{background:var(--navy)}
.s-blue{background:var(--blue)}
.s-page{background:var(--page);border-bottom:1px solid var(--line)}
.s-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:44px}
.s-head p{margin:0;font:400 15.5px/1.65 'IBM Plex Sans';color:var(--ink-3)}
.page-head{background:#fff;border-bottom:1px solid var(--line);padding:64px 0 56px}
.page-head .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.page-head h1{max-width:20ch}
.page-head p{margin:0 0 4px}

/* ─── számsáv ─── */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats>div{padding:28px;border-left:1px solid rgba(255,255,255,.14)}
.stats>div:first-child{padding-left:0;border-left:0}
.stats>div:last-child{padding-right:0}
.stats b{display:block;font:600 24px/1 'IBM Plex Sans';color:#fff;letter-spacing:-.02em}
.stats b.accent{color:var(--orange)}
.stats span{display:block;font:450 12.5px/1.4 'IBM Plex Mono',monospace;color:var(--on-dark-2);
            margin-top:8px;letter-spacing:.06em}

/* ─── lépések ─── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
       border-top:2px solid var(--navy);border-left:1px solid var(--line-2);
       border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.steps>div{padding:28px 26px;border-left:1px solid var(--line)}
.steps>div:first-child{border-left:0}
.steps .num{font:600 13px/1 'IBM Plex Mono',monospace;color:var(--orange);letter-spacing:.1em}
.steps h3{margin:14px 0 10px;font-size:17.5px}
.steps p{margin:0;font:400 14px/1.65 'IBM Plex Sans';color:var(--ink-3)}
.steps-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.steps-2>div{background:#fff;border:1px solid var(--line-2);border-top:2px solid var(--navy);
             border-radius:0 0 10px 10px;padding:28px 26px}

/* ─── három oszlop vonallal ─── */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy)}
.cols3>div{padding:28px 32px 0;border-left:1px solid var(--line)}
.cols3>div:first-child{padding-left:0;border-left:0}
.cols3>div:last-child{padding-right:0}
.cols3 h3{font-size:19px;line-height:1.3;letter-spacing:-.015em}
.cols3 p{margin:0;font:400 15px/1.65 'IBM Plex Sans';color:var(--ink-3)}

/* ─── árkártyák ─── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 28px 28px;
      position:relative}
.plan.top{border:1.5px solid var(--navy);
          box-shadow:0 1px 2px rgba(13,33,56,.05),0 14px 34px rgba(13,33,56,.10)}
.plan .badge{position:absolute;top:-11px;left:28px;font:600 10.5px/1 'IBM Plex Mono',monospace;
             letter-spacing:.12em;color:#fff;background:var(--navy);padding:6px 10px;border-radius:5px}
.plan .name{font:600 16px/1 'IBM Plex Sans';color:var(--ink)}
.plan .desc{font:400 14px/1.55 'IBM Plex Sans';color:var(--ink-3);margin-top:10px;min-height:88px}
.plan .price{display:flex;align-items:baseline;gap:8px;margin:14px 0 22px;padding-bottom:22px;
             border-bottom:1px solid var(--line)}
.plan .price b{font:600 34px/1 'IBM Plex Sans';letter-spacing:-.03em;color:var(--ink)}
.plan .price span{font:450 13px/1 'IBM Plex Sans';color:var(--ink-4)}
.plan ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font:450 14px/1.5 'IBM Plex Sans';color:var(--ink-2)}
.plan li.strong{font-weight:500;color:var(--ink)}
.plan li svg{flex:none;margin-top:3px}
.plan .note{margin-bottom:22px;padding:12px 14px;background:var(--page);border:1px solid var(--line);
            border-radius:8px;font:400 12.5px/1.6 'IBM Plex Sans';color:var(--ink-3)}
.plan .not{margin-bottom:22px;padding-top:16px;border-top:1px solid var(--line)}
.plan .not-h{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--ink-4);
             margin-bottom:10px}
.plan .not div{font:450 13.5px/1.5 'IBM Plex Sans';color:var(--ink-4);margin-bottom:8px}

/* ─── összecsukható ─── */
.acc{display:flex;flex-direction:column;gap:10px}
.acc details{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.acc summary{padding:20px 24px;display:grid;grid-template-columns:1fr auto auto;gap:20px;
             align-items:center;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary b{display:block;font:600 16.5px/1.35 'IBM Plex Sans';color:var(--ink)}
.acc summary i{display:block;font:400 14px/1.5 'IBM Plex Sans';color:var(--ink-3);
               margin-top:5px;font-style:normal}
.acc .scope{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--ink-2);
            background:var(--page);border:1px solid var(--line);padding:6px 8px;border-radius:5px;
            white-space:nowrap}
.acc .scope.paid{color:var(--amber);background:#FFFAEB;border-color:#FEDF89}
.acc .sign{font:400 19px/1 'IBM Plex Sans';color:var(--ink-4);width:14px;text-align:center}
.acc details[open] .sign::after{content:'–'}
.acc details:not([open]) .sign::after{content:'+'}
.acc .body{padding:0 24px 20px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.acc .body div{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--line-4);
               font:450 14px/1.55 'IBM Plex Sans';color:var(--ink-2)}
.acc .body svg{flex:none;margin-top:4px}

/* ─── GYIK ─── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 0;display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;
             font:500 16.5px/1.4 'IBM Plex Sans';color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary i{font:400 20px/1 'IBM Plex Sans';color:var(--ink-4);font-style:normal}
.faq details[open] summary i::after{content:'–'}
.faq details:not([open]) summary i::after{content:'+'}
.faq .body{padding:0 60px 24px 0}
.faq .body p{margin:0 0 12px;font:400 15px/1.7 'IBM Plex Sans';color:var(--ink-3)}
.faq .body p:last-child{margin:0}

/* ─── űrlapok ─── */
.field{margin-bottom:20px}
.field label{display:block;font:500 13px/1 'IBM Plex Sans';color:#344054;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font:400 14.5px/1.4 'IBM Plex Sans';
  color:var(--ink);border:1px solid var(--line-3);border-radius:8px;padding:13px 14px;outline:none;
  background:#fff}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(245,130,32,.15)}
.url-in{display:flex;align-items:stretch;border:1px solid var(--line-3);border-radius:8px;
        overflow:hidden;background:#fff}
.url-in span{font:450 14px/1 'IBM Plex Mono',monospace;color:var(--ink-4);background:var(--page);
             border-right:1px solid var(--line-3);padding:13px 12px;display:flex;align-items:center}
.url-in input{flex:1;border:0;font:400 14.5px/1 'IBM Plex Sans';color:var(--ink);
              padding:13px 14px;outline:none}
.consent{display:flex;gap:10px;align-items:flex-start;font:400 13.5px/1.5 'IBM Plex Sans';
         color:var(--ink-3);cursor:pointer;margin-bottom:22px}
.consent input{width:auto;flex:none;margin-top:3px}

/* ─── egyéb ─── */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 'IBM Plex Sans';
      color:var(--navy);background:var(--tint);border:1px solid var(--line-2);
      padding:9px 12px;border-radius:6px}
.nots{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.nots>div{display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.nots p{margin:0;font:450 15px/1.6 'IBM Plex Sans';color:var(--ink)}
.nots svg{flex:none;margin-top:2px}
.cta-band .wrap{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center}
.cta-band h2{color:#fff;max-width:26ch;margin-bottom:12px}
.cta-band p{margin:0;font:400 15.5px/1.65 'IBM Plex Sans';color:var(--on-dark);max-width:52ch}
.cta-band .side{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cta-band .side span{font:400 12.5px/1 'IBM Plex Mono',monospace;color:var(--on-dark-2);
                     text-align:center}
.quote{padding:22px 24px;background:#fff;border:1px solid #D7DFE7;border-left:3px solid var(--orange);
       border-radius:0 10px 10px 0}
.quote p{margin:0;font:500 15.5px/1.65 'IBM Plex Sans';color:var(--ink)}
.years{margin-top:34px;padding-top:26px;border-top:2px solid var(--navy);display:flex;
       align-items:baseline;gap:16px}
.years b{font:600 30px/1 'IBM Plex Sans';letter-spacing:-.03em;color:var(--ink)}
.years span{font:450 14.5px/1.5 'IBM Plex Sans';color:var(--ink-3);max-width:34ch}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 26px}
.card-navy{background:var(--navy);border-radius:12px;padding:28px 26px}
.card-navy p{font:400 14.5px/1.6 'IBM Plex Sans';color:var(--on-dark);margin:14px 0 18px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.path{border-radius:12px;padding:36px 34px;display:flex;flex-direction:column}
.path.a{background:var(--page);border:1px solid var(--line)}
.path.b{background:#fff;border:1.5px solid var(--navy);
        box-shadow:0 1px 2px rgba(13,33,56,.05),0 14px 34px rgba(13,33,56,.08)}
.path .tag{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--ink-4)}
.path.b .tag{color:var(--orange)}
.path h2{margin:16px 0 14px;font-size:26px;line-height:1.25}
.path p{margin:0 0 24px;font:400 15.5px/1.7 'IBM Plex Sans';color:var(--ink-2)}
.path .foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.pill{font:500 11.5px/1 'IBM Plex Mono',monospace;color:var(--ink-2);background:#fff;
      border:1px solid var(--line);padding:8px 10px;border-radius:5px}
.flow{display:flex;gap:16px;align-items:stretch}
.flow>div{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
          border-radius:10px;padding:22px 20px}
.flow>div.dashed{background:none;border:1px dashed rgba(245,130,32,.7)}
.flow b{display:block;font:600 16px/1.35 'IBM Plex Sans';color:#fff}
.flow span{display:block;font:400 13px/1.55 'IBM Plex Sans';color:var(--on-dark);margin-top:8px}
.flow .accent{color:#F5A867}
.ticks div{display:flex;gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.ticks span{font:450 14px/1.55 'IBM Plex Sans';color:var(--on-dark-3)}
.ticks svg{flex:none;margin-top:3px}

/* ─── hírlevél ─── */
.news{background:#fff;border-top:1px solid var(--line);padding:56px 0}
.news .wrap{display:grid;grid-template-columns:1fr 460px;gap:80px;align-items:center}
.news h2{margin:14px 0 10px;font-size:24px;line-height:1.3}
.news p{margin:0;font:400 15px/1.65 'IBM Plex Sans';color:var(--ink-3);max-width:64ch}
.news form{display:flex;gap:10px}
.news input{flex:1;font:400 14.5px/1 'IBM Plex Sans';color:var(--ink);background:#fff;
            border:1px solid var(--line-3);border-radius:8px;padding:14px;outline:none}
.news input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,32,.15)}
.news button{font:600 14.5px/1 'IBM Plex Sans';color:#fff;background:var(--navy);border:0;
             padding:14px 20px;border-radius:8px}
.news button:hover{background:var(--blue)}
.news .small{margin:12px 0 0;font:400 12.5px/1.5 'IBM Plex Sans';color:var(--ink-4)}

/* ─── lábléc ─── */
footer{background:var(--navy);padding:56px 0 28px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;
        border-bottom:1px solid rgba(255,255,255,.12)}
.f-grid p{margin:0;font:400 13.5px/1.6 'IBM Plex Sans';color:var(--on-dark-2);max-width:36ch}
.f-h{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--on-dark-4);
     margin-bottom:16px}
.f-col{display:flex;flex-direction:column;gap:11px}
.f-col a{font:450 13.5px/1 'IBM Plex Sans';color:var(--on-dark-3)}
.f-col a:hover{color:var(--orange)}
.f-bot{padding-top:22px;display:flex;align-items:center;justify-content:space-between}
.f-bot>span{font:400 12.5px/1 'IBM Plex Mono',monospace;color:var(--on-dark-4)}
.f-lang{display:flex;align-items:center;gap:6px}
.f-lang span{font:600 11.5px/1 'IBM Plex Mono',monospace;color:#fff;
             background:rgba(255,255,255,.10);padding:6px 9px;border-radius:5px}
.f-lang a{font:500 11.5px/1 'IBM Plex Mono',monospace;color:var(--on-dark-2);padding:6px 9px}

/* ─── szöveges oldalak (blog, jogi) ─── */
.prose{max-width:720px}
.prose h2{margin:38px 0 12px;font-size:25px}
.prose p,.prose li{font:400 16.5px/1.72 'IBM Plex Sans';color:var(--ink-2)}
.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}
.prose blockquote{margin:26px 0;padding:18px 22px;background:var(--tint);
                  border-left:3px solid var(--orange);border-radius:0 10px 10px 0}
.prose blockquote p{margin:0;font-size:15.5px;color:var(--ink)}
.prose code{font:450 15px/1 'IBM Plex Mono',monospace;background:var(--tint);padding:2px 5px;
            border-radius:4px}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.post{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 28px;
      display:flex;flex-direction:column}
.post:hover{border-color:var(--navy);box-shadow:0 1px 2px rgba(13,33,56,.05),0 12px 28px rgba(13,33,56,.08)}
.post .date{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--ink-4);
            margin-bottom:12px}
.post h3{font-size:19px;line-height:1.32;margin-bottom:10px}
.post p{margin:0 0 16px;font:400 14.5px/1.6 'IBM Plex Sans';color:var(--ink-3);flex:1}
.post .more{font:600 14px/1 'IBM Plex Sans';color:var(--orange)}
.post.soon{border-style:dashed;opacity:.62}
.post.soon .date{color:var(--orange)}

@media(max-width:1100px){
  :root{--pad:24px}
  .s-head,.page-head .wrap,.news .wrap,.cta-band .wrap{grid-template-columns:1fr;gap:28px;
    align-items:start}
  .steps,.cols3,.plans,.stats,.paths,.f-grid,.nots,.acc .body,.steps-2{grid-template-columns:1fr}
  .steps>div,.cols3>div{border-left:0;border-top:1px solid var(--line);padding:24px 0}
  .steps>div:first-child,.cols3>div:first-child{border-top:0}
  .stats>div{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:20px 0}
  .stats>div:first-child{border-top:0}
  .flow{flex-direction:column}
  .top nav{display:none}
  section{padding:56px 0}
  h1{font-size:32px}h2{font-size:26px}
}

/* ─── csomagválasztó a megrendelésnél ─── */
.pick{display:flex;align-items:center;justify-content:space-between;gap:10px;
      font:500 14px/1 'IBM Plex Sans';color:var(--ink-2);border:1px solid var(--line-3);
      border-radius:8px;padding:14px;cursor:pointer}
.pick:hover{border-color:var(--navy);color:var(--ink)}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick b{font:400 13px/1 'IBM Plex Mono',monospace}
.pick:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.pick:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.seg{cursor:pointer}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:inline-block;font:500 12px/1 'IBM Plex Mono',monospace;color:var(--ink-3);
          border:1px solid var(--line-3);padding:9px 11px;border-radius:6px}
.seg:has(input:checked) span{font-weight:600;color:#fff;background:var(--navy);border-color:var(--navy)}
.seg:has(input:focus-visible) span{outline:2px solid var(--orange);outline-offset:2px}

/* ─── mobil fejléc: a fő gomb NEM tűnhet el ─── */
@media(max-width:1100px){
  .top .wrap{gap:12px}
  .brand-sub{display:none}
  .top .right{gap:10px}
  .top .right>a[href$="kapcsolat.html"],
  .top .right>a[href$="contact.html"]{display:none}
}
@media(max-width:560px){
  .top .wrap{height:60px}
  .brand-name{font-size:15px}
  .lang{display:none}
  .top .right .btn{font-size:13px;padding:10px 13px}
}

/* Céges számlázási mezők: csak akkor látszanak, ha a cég van kiválasztva.
   A :has() minden mai böngészőben megy; a required-et a lenti kis szkript
   kapcsolja, hogy egy rejtett mező soha ne blokkolja a beküldést. */
.ceges{display:none}
form:has(input[name="vevo_tipus"][value="ceg"]:checked) .ceges{display:block}

/* ── A hero riportlapja térben ──────────────────────────────────────────
   A lap enyhén elfordul, és két halvány lap kandikál ki mögüle. Így egy
   pillantásra látszik, hogy ez egy TÖBB OLDALAS dokumentum, nem egy doboz.

   A `perspective` a SZÜLŐN van, a `rotate` a gyereken — fordítva nem
   működne: perspektíva nélkül a forgatás csak torzít, nem mélyít.

   A döntés 4 fok. Nyolcnál már olvashatatlanná válik a jobb széle,
   kettőnél meg nem látszik semmi. */
.riport-terben {
  perspective: 1600px;
  perspective-origin: 30% 50%;
}
.riport-lap {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transform: rotateY(-4deg) rotateX(1.2deg);
  transform-origin: left center;
  /* Réteges árnyék: a közeli éles, a távoli lágy. Egyetlen nagy árnyék
     lebegő matricának látszana, nem tárgynak. */
  box-shadow:
      0 1px 2px rgba(13, 33, 56, .06),
      0 8px 20px rgba(13, 33, 56, .08),
      0 28px 56px rgba(13, 33, 56, .12),
      0 60px 120px rgba(13, 33, 56, .10);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1),
              box-shadow .5s cubic-bezier(.22, .61, .36, 1);
}
/* A mögötte lévő lapok. A BURKOLÓRA kerülnek, nem a lapra: a lapon
   `overflow:hidden` van (a lekerekített sarkok miatt), az pedig levágná
   őket. Ezt csak rendereléskor lehetett észrevenni. */
.riport-terben { position: relative; }
.riport-terben::before,
.riport-terben::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  transform-origin: left center;
  pointer-events: none;
}
.riport-terben::before {
  transform: rotateY(-4deg) rotateX(1.2deg) translate3d(16px, 16px, -30px);
  opacity: .6;
  box-shadow: 0 10px 24px rgba(13, 33, 56, .06);
}
.riport-terben::after {
  transform: rotateY(-4deg) rotateX(1.2deg) translate3d(32px, 32px, -60px);
  opacity: .32;
  box-shadow: 0 10px 24px rgba(13, 33, 56, .05);
}
.riport-lap { z-index: 1; }

/* Ráközelítéskor kiegyenesedik: a látogató így el is tudja olvasni. */
.riport-lap:hover {
  transform: rotateY(0deg) rotateX(0deg);
  box-shadow:
      0 2px 4px rgba(13, 33, 56, .07),
      0 16px 36px rgba(13, 33, 56, .11),
      0 44px 90px rgba(13, 33, 56, .14);
}

/* Mobilon nincs térhatás: ott a lap a képernyő teljes szélességét kitölti,
   és egy elforgatott széle levágódna. */
@media (max-width: 900px) {
  .riport-terben { perspective: none; }
  .riport-lap,
  .riport-lap:hover { transform: none; }
  .riport-terben::before,
  .riport-terben::after { display: none; }
}

/* Aki kéri, hogy ne mozogjon semmi, annál nincs átmenet. */
@media (prefers-reduced-motion: reduce) {
  .riport-lap { transition: none; }
}