/* ==========================================================================
   Üzleti Pilóta brand tokens (Zoltán TG 67077: "arculati kézikönyv kell ... Azt kövessétek minden aloldalnál!").
   The manual itself: /arculat/. Every Pilóta subpage imports this file FIRST:
     <link rel="stylesheet" href="/arculat/arculat.css">
   Values taken 2026-11-02 from the live /vegleges/ CSS (eszkoz/v3-css-1.css :root, eszkoz/vegleges.css .hos),
   HEAD 70750efd98. If a value changes there, change it here in the same commit.
   Only tokens, fonts and four opt-in classes (.pl-mezo, .pl-gomb, .pl-gomb-szellem, .pl-kartya); nothing here
   styles a bare element, so importing it does not move an existing page.
   ========================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(/betuk/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(/betuk/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/betuk/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/betuk/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* base palette */
  --ink:#070C18;            /* header, dark surface */
  --ink-2:#0D1526;
  --ink-3:#141F36;
  --ink-4:#1D2B48;
  --on-ink:#E8EDF5;         /* text on dark */
  --on-ink-2:#AEB9CC;
  --signal:#FFB020;         /* Pilóta amber: primary button, accents */
  --signal-2:#FF8E24;
  --signal-soft:#FFF3DC;
  --signal-text:#7A4A00;    /* amber family dark enough for text on white */
  --radar:#2DC4DA;          /* Pilóta cyan */
  --mint:#2ECF92;           /* "running / OK" */
  --mint-dark:#13734F;
  --paper:#FFFFFF;
  --paper-2:#F1F4F9;
  --line:#DCE3ED;
  --muted:#4F5B72;
  /* colour field: seven colours as RGB triples, used as rgba(var(--szin-x),a) */
  --szin-kek:43,71,242;
  --szin-indigo:30,28,150;
  --szin-ibolya:124,44,214;
  --szin-magenta:226,54,140;
  --szin-korall:255,98,70;
  --szin-borostyan:255,176,32;
  --szin-cian:45,196,218;
  /* type */
  --fd:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;          /* headings, buttons: 800 */
  --fb:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;  /* body: 400-700 */
  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  /* the colour field itself, desktop and phone (<=860 px), same layers as the /vegleges/ hero */
  --pl-mezo:
    radial-gradient(34% 46% at 66% 0%,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.55) 42%,transparent 74%),
    radial-gradient(30% 56% at 100% 16%,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.5) 48%,transparent 76%),
    radial-gradient(36% 46% at 96% 70%,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 74%),
    radial-gradient(36% 42% at 62% 82%,rgba(var(--szin-ibolya),.9),transparent 72%),
    radial-gradient(30% 34% at 20% 100%,rgba(var(--szin-korall),.75),transparent 72%),
    radial-gradient(22% 30% at 80% 44%,rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(56% 74% at 0% 0%,rgba(var(--szin-kek),1),rgba(var(--szin-kek),.6) 40%,transparent 72%),
    linear-gradient(165deg,#2338D8 0%,#1B23A6 38%,#2A1C94 66%,#4A1F96 100%);
  --pl-mezo-mobil:
    radial-gradient(240px 190px at 82% 250px,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.5) 46%,transparent 76%),
    radial-gradient(220px 230px at 104% 400px,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.45) 50%,transparent 76%),
    radial-gradient(230px 210px at 0% 390px,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 76%),
    radial-gradient(150px 110px at 34% 270px,rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(300px 260px at 100% 30%,rgba(var(--szin-ibolya),.9),transparent 74%),
    radial-gradient(260px 260px at 0% 100%,rgba(var(--szin-korall),.7),transparent 72%),
    radial-gradient(320px 300px at 100% 100%,rgba(var(--szin-magenta),.7),transparent 72%),
    radial-gradient(360px 260px at 0% 0%,rgba(var(--szin-kek),1),transparent 72%),
    linear-gradient(170deg,#2338D8 0%,#1B23A6 40%,#2A1C94 70%,#4A1F96 100%);
  /* phone variant for text-only heroes (no figure or photo to hide the warm colours behind): the warm colours sit
     at the bottom of the block, so the block needs about 200 px of field under its last text line; the same layers
     as the live /rendeles and payment pages (kk-telepito static/rendeles.css, ec702c66fb) */
  --pl-mezo-mobil-alul:
    radial-gradient(240px 190px at 82% calc(100% - 170px),rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.5) 46%,transparent 76%),
    radial-gradient(220px 230px at 104% calc(100% - 160px),rgba(var(--szin-korall),1),rgba(var(--szin-korall),.45) 50%,transparent 76%),
    radial-gradient(230px 210px at 0% calc(100% - 170px),rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 76%),
    radial-gradient(150px 110px at 34% calc(100% - 200px),rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(300px 260px at 100% 30%,rgba(var(--szin-ibolya),.9),transparent 74%),
    radial-gradient(260px 260px at 0% 100%,rgba(var(--szin-korall),.7),transparent 72%),
    radial-gradient(320px 300px at 100% 100%,rgba(var(--szin-magenta),.7),transparent 72%),
    radial-gradient(360px 260px at 0% 0%,rgba(var(--szin-kek),1),transparent 72%),
    linear-gradient(170deg,#2338D8 0%,#1B23A6 40%,#2A1C94 70%,#4A1F96 100%);
  --pl-mezo-alap:#1B23A6;   /* flat fallback under the field */
  /* shape and rhythm */
  --pl-kerek-gomb:10px;
  --pl-kerek-kartya:14px;
  --pl-szakasz:48px;        /* section padding, 36px on phones */
}
@media (max-width:860px){:root{--pl-szakasz:36px}}

/* the colour field on any block; text on it is white (blue/indigo/violet side carries the text) */
.pl-mezo{background:var(--pl-mezo-alap);background-image:var(--pl-mezo);color:#fff}
@media (max-width:860px){.pl-mezo{background-image:var(--pl-mezo-mobil)}}
/* text-only hero on phones: add .pl-mezo-alul next to .pl-mezo */
@media (max-width:860px){.pl-mezo.pl-mezo-alul{background-image:var(--pl-mezo-mobil-alul)}}

/* primary button: amber with ink text, the only filled button colour */
.pl-gomb{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--pl-kerek-gomb);
  background:var(--signal);color:var(--ink);font-family:var(--fd);font-weight:800;font-size:1.05rem;text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(255,176,32,.55);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .2s}
.pl-gomb:hover{background:#FFC048;transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(255,176,32,.7)}
.pl-gomb:focus-visible{outline:3px solid var(--radar);outline-offset:3px}
/* secondary button, only on dark or on the field */
.pl-gomb-szellem{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:none}
.pl-gomb-szellem:hover{background:rgba(255,255,255,.08);box-shadow:none}
@media (max-width:760px){.pl-gomb{padding:0 16px;font-size:.98rem}}
@media (prefers-reduced-motion:reduce){.pl-gomb,.pl-gomb:hover{transition:none;transform:none}}

/* white card on paper or on the field */
.pl-kartya{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--pl-kerek-kartya);
  box-shadow:0 18px 50px -30px rgba(7,12,24,.35)}