@charset "utf-8";
/* ============================================================
   Storepass, landing oldal
   Sora display + Inter body, #FF4A1F akcens, #0F0F11 sötét panel,
   #F8F4EF papír alap, nagy lekerekítés.

   Tartalom:
   01 Betűtípusok      06 Fejléc és hero        11 Csomag, ár, folyamat
   02 Design tokenek   07 Integrációs sáv       12 Vissza a tetejére
   03 Alap és reset    08 Blokk szerkesztő      13 GYIK
   04 Tipográfia       09 Admin és rendelés     14 Ajánlatkérő és lábléc
   05 Komponensek      10 Referenciák, esettan. 15 Segédoldalak
                                                16 Süti értesítő
   ============================================================ */

/* ============================================================
   01 BETŰTÍPUSOK
   Saját kiszolgálású, változó tengelyű woff2, a szükséges
   karakterekre szűkítve. Nincs harmadik fél felé kérés, ezért
   a szöveg a lehető leghamarabb megjelenik.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2248, U+2260, U+25CF,
    U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+2C60-2C7F;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2248, U+2260, U+25CF,
    U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+2C60-2C7F;
}

/* ============================================================
   02 DESIGN TOKENEK
   ============================================================ */
:root{
  --bg:#F8F4EF;
  --ink:#111111;
  --ink-70:#3F4147;
  --ink-50:#6B7280;
  --ink-30:#9CA3AF;
  --white:#FFFFFF;
  --line:#E5E7EB;
  --line-2:#EFEAE2;
  --sand:#E9E0CF;
  --sand-soft:#F3EDE3;
  --cool:#F9FAFB;

  --dark:#0F0F11;
  --dark-2:#17171B;
  --dark-3:#1F1F26;
  --dline:rgba(255,255,255,.12);
  --dline-2:rgba(255,255,255,.07);
  --dtext:rgba(255,255,255,.62);
  --dtext-2:rgba(255,255,255,.40);

  --accent:#FF4A1F;
  --accent-deep:#E03A12;
  --accent-soft:#FFF1EC;
  --blue:#2B5CFF;
  --yellow:#FFD500;
  --green:#00C853;
  --red:#B91C1C;

  --r-panel:32px;
  --r-card:20px;
  --r-inner:14px;
  --r-pill:999px;

  --sh-card:0 20px 60px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --sh-float:0 40px 120px rgba(0,0,0,.55), 0 16px 48px rgba(0,0,0,.35);
  --sh-cta:0 12px 32px rgba(255,74,31,.35);

  --gut:16px;
  /* a ragadó fejléc magassága a hero tetején és lebegve (görgetéskor) */
  --hdr-h:85px;
  --hdr-s:69px;
  --pad-y:clamp(52px,5.6vw,86px);
  --pad-x:clamp(20px,4vw,64px);

  color-scheme:light;
}

/* ============================================================
   03 ALAP ÉS RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* a horgonyra ugrásnál a lebegő fejléc ne takarja ki a szekció tetejét */
[id]{scroll-margin-top:calc(var(--hdr-s) + 18px)}
body{
  margin:0;padding:var(--gut);
  background:var(--bg);color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:rgba(255,74,31,.22)}
img{max-width:100%;display:block}
/* a hidden attribútum mindig nyerjen, akkor is, ha egy osztály display értéket ad */
[hidden]{display:none!important}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
/* a szín is öröklődjön: iOS Safari különben a saját kékjét adja a gomb szövegének */
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Fókuszkeret csak billentyűzetes navigációnál (.kbd, main.js 1b). Érintésnél
   és egérnél soha, akkor sem, ha a fókuszt a kód teszi át (ablak nyitása és
   zárása, vissza a tetejére). JS nélkül (.no-js) a keret marad. */
html:not(.no-js):not(.kbd) :focus,
html:not(.no-js):not(.kbd) :focus-visible,
html:not(.no-js):not(.kbd) .sw input:focus-visible+.sw-v,
html:not(.no-js):not(.kbd) .segc input:focus-visible+span,
html:not(.no-js):not(.kbd) .refc:has(.refc-more:focus-visible){outline:none}

/* ugrás a tartalomra, csak billentyűzetes fókusznál látszik */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--dark);color:#fff;
  padding:12px 18px;border-radius:0 0 12px 0;font-size:14px;font-weight:600}
.skip:focus{left:0;color:#fff}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   04 TIPOGRÁFIA
   ============================================================ */
.d1,.d2,.d3,.d4{font-family:'Sora','Inter',sans-serif;font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
.d1{font-size:clamp(38px,6.4vw,74px);line-height:1.02}
.d2{font-size:clamp(30px,4.1vw,50px);line-height:1.06;letter-spacing:-.028em}
.d3{font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.022em;font-weight:700}
.d4{font-size:clamp(17px,1.5vw,20px);line-height:1.25;letter-spacing:-.015em;font-weight:700}
.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:var(--ink-50);margin:0;max-width:56ch;text-wrap:pretty}
.p{font-size:15.5px;line-height:1.65;color:var(--ink-50);margin:0;text-wrap:pretty}
.sm{font-size:13.5px;line-height:1.55;color:var(--ink-50);margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);margin:0}
.num{font-family:'Sora','Inter',sans-serif;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.035em;margin:0;line-height:1}
.ph{color:var(--ink-30);font-weight:600}
.on-dark .p,.on-dark .lead{color:var(--dtext)}
.on-dark .sm{color:var(--dtext-2)}
.on-dark .mono{color:var(--dtext-2)}
/* világos felületek sötét szekción belül: ne örököljék a fehér szövegszínt */
.on-dark .form,.on-dark .ui{color:var(--ink)}
.on-dark .form .p,.on-dark .form .lead{color:var(--ink-50)}
.on-dark .form .sm{color:var(--ink-50)}
.on-dark .form .mono{color:var(--ink-30)}

/* ============================================================
   05 LAYOUT ÉS KOMPONENSEK
   ============================================================ */
.stack{display:flex;flex-direction:column;gap:var(--gut)}
.panel{border-radius:var(--r-panel);overflow:hidden;position:relative}
.panel-dark{background:var(--dark);color:#fff}
.panel-white{background:var(--white);border:1px solid var(--line)}
.panel-cool{background:var(--cool);border:1px solid var(--line)}
.inner{padding:var(--pad-y) var(--pad-x)}
.wrap{max-width:1280px;margin:0 auto;width:100%}
.grid{display:grid;gap:clamp(20px,2.4vw,32px)}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1.02fr 1.18fr;gap:clamp(28px,4vw,64px);align-items:center}
/* rácsgyerekek nem feszíthetik szét az oldalt mobilon */
.grid>*,.split>*,.sync>*,.cta>*,.ftr>*,.rail-grid>*{min-width:0}
.split-rev{grid-template-columns:1.18fr 1.02fr}
/* szekció fejléc két hasábban, hogy ne maradjon üres a jobb oldal */
.shead{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(24px,2.6vw,36px)}
.shead>*{min-width:0}
.shead .lead{padding-bottom:4px}
.shead-r{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media (max-width:1100px){.shead{grid-template-columns:1fr;gap:16px;align-items:start}}

.eyebrow{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--dark);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow.light{background:var(--sand-soft);color:var(--ink);border:1px solid var(--sand)}
.eyebrow.on{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--dline)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;
  border-radius:var(--r-pill);font-weight:700;font-size:16px;letter-spacing:-.01em;border:1.5px solid transparent;transition:.18s}
.btn-p{background:var(--accent);color:#fff;box-shadow:var(--sh-cta)}
.btn-p:hover{background:var(--accent);color:#fff}
.btn-p:active{transform:scale(.985)}
.btn-o{border-color:var(--accent);color:var(--accent);background:transparent}
.btn-o:hover{background:var(--accent);color:#fff}
.btn-w{background:#fff;color:var(--ink);border-color:#fff}
.btn-w:hover{background:#fff;color:var(--ink);filter:brightness(.95)}
.btn-g{border-color:rgba(17,17,17,.14);color:var(--ink);background:#fff}
.btn-g:hover{border-color:rgba(17,17,17,.3);color:var(--ink)}
.btn-sm{height:44px;padding:0 20px;font-size:14px}
.btn[disabled]{opacity:.62;pointer-events:none}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:.25s}
.card-d{background:var(--dark-2);border:1px solid var(--dline);border-radius:var(--r-card)}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink-70);white-space:nowrap}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.chip.dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.chip.ghost{background:transparent;border-style:dashed;color:var(--ink-30)}
.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none;letter-spacing:0}
/* Márkajelzés a betűs jelvény helyén. Lekerekített négyzet, mert a GLS és az
   MPL feliratos logó, azt a kör levágná. A logók saját, teljes felületű háttérrel
   jönnek, a vékony keret csak a fehér alapúakat választja el a chip hátterétől. */
.av.lg{width:24px;height:24px;border-radius:7px;object-fit:cover;display:block;
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.1);background:#fff}
.tick{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;margin-top:1px}
.tick.g{background:var(--green)}
.tick.x{background:rgba(17,17,17,.07);color:var(--ink-30)}
/* zöld pipa sötét alapon, ugyanaz, mint az árkártya listájában */
.tick.v{background:rgba(0,200,83,.16);color:#2FD67A;font-size:11px;font-weight:800}
.li{display:flex;gap:12px;align-items:flex-start}

.stat{border:1px solid var(--line);border-radius:var(--r-inner);padding:18px 20px;background:var(--sand-soft)}
.stat .num{font-size:clamp(26px,2.6vw,34px)}
.stat .k{font-size:12.5px;color:var(--ink-50);margin:6px 0 0}
.on-dark .stat{background:var(--dark-3);border-color:var(--dline)}
.on-dark .stat .k{color:var(--dtext-2)}

/* mini UI mockup elemek */
.ui{background:#fff;border:1px solid rgba(17,17,17,.10);border-radius:var(--r-inner);overflow:hidden}
.ui-bar{height:34px;background:#F3F4F6;border-bottom:1px solid rgba(17,17,17,.08);display:flex;align-items:center;gap:6px;padding:0 12px}
.ui-dot{width:8px;height:8px;border-radius:50%;background:#D9D9D9}
.ui-url{margin-left:10px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--ink-30)}
.sk{background:#EDEAE4;border-radius:3px}
.sk.d{background:rgba(255,255,255,.12)}

.wavy{position:relative;display:inline-block}
.wavy::after{content:'';position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.18em;
  background:url("data:image/svg+xml,%3Csvg width='200' height='14' viewBox='0 0 200 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10 Q 20 2 40 10 T 80 10 T 120 10 T 160 10 T 200 10' stroke='%23FF4A1F' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;pointer-events:none}

.gridlines{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 30%,#000 0%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 30%,#000 0%,transparent 75%)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5}

/* egérrel vezérelt állapotok: érintőn ne ragadjanak be */
@media (hover:hover){
  .card-hov:hover{box-shadow:var(--sh-card);transform:translateY(-4px)}
  .btn-p:hover{filter:brightness(1.08);transform:translateY(-1px)}
}

/* ---------- reveal animáció ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}
.rv-d4{transition-delay:.24s}.rv-d5{transition-delay:.30s}.rv-d6{transition-delay:.36s}
/* ha nincs JS, a tartalom akkor is látszik */
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ---------- reszponzív alapok ---------- */
@media (max-width:1100px){
  .split,.split-rev{grid-template-columns:1fr;gap:32px}
  .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--gut:10px;--r-panel:22px;--r-card:16px;--pad-y:40px;--pad-x:18px}
  body{padding:var(--gut)}
  .btn{width:100%;height:54px}
  .btn.auto{width:auto}
}

/* ============================================================
   06 FEJLÉC ÉS HERO
   ============================================================ */
/* A fejléc és a hero tartalma ugyanarra az 1280 px-es sávra igazodik, mint a
   többi szekció (.inner + .wrap) és az integrációs sáv, így a cím, a gomb és a
   lenti blokkok egy vonalban kezdődnek. A % a panel szélessége, mert a
   .hero-body közvetlenül a panelben ül. A fejléc helyét a hero felső
   térköze tartja fenn, mert a fejléc a hero fölött lebeg. */
.hero{padding:var(--hdr-h) 0 0;--hx:max(var(--pad-x),calc((100% - 1280px) / 2))}
/* a segédoldalak (adatkezelés, 404) panelbe tett fejléce is ezt használja */
.hdr{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--hx,clamp(20px,3vw,36px));border-bottom:1px solid var(--dline)}
.hdr-r{display:flex;align-items:center;gap:12px}

/* Ragadó fejléc. A sáv a hero tetején átlátszó, görgetéskor (.stuck) a
   lap tetejére tapadó, elmosott hátterű, alul lekerekített panellé válik.
   A külső elem magassága végig fix (--hdr-h), a negatív margó miatt nem
   foglal helyet, így semmi nem ugrik; ami a sávon kívül esik belőle, az
   átengedi a kattintást. */
.topbar{position:sticky;top:0;z-index:100;height:var(--hdr-h);margin-bottom:calc(-1 * var(--hdr-h));pointer-events:none}
.topbar-bar{pointer-events:auto;border:solid transparent;border-width:0 1px 1px;border-bottom-color:var(--dline);
  border-radius:var(--r-panel) var(--r-panel) 0 0;
  transition:background-color .35s,border-color .35s,border-radius .35s,box-shadow .35s}
.topbar .hdr{max-width:calc(1280px + 2 * var(--pad-x));margin:0 auto;padding:20px var(--pad-x);border:0;transition:padding .35s}
.topbar.stuck .topbar-bar,.topbar.open .topbar-bar{background:rgba(15,15,17,.9);border-color:rgba(255,255,255,.09);
  border-radius:0 0 26px 26px;box-shadow:0 18px 44px rgba(0,0,0,.26);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.topbar.stuck .hdr{padding-top:12px;padding-bottom:12px}
/* a hero tetején lenyitott menü: a teteje kövesse a panel lekerekítését */
.topbar.open:not(.stuck) .topbar-bar{border-radius:var(--r-panel) var(--r-panel) 26px 26px;background:rgba(15,15,17,.96)}
/* ha a böngésző nem tud elmosni, legyen tömörebb a háttér */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar.stuck .topbar-bar,.topbar.open .topbar-bar{background:rgba(15,15,17,.96)}
}
.mark{display:inline-flex;align-items:center;gap:2px;font-family:'Sora',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.03em;color:#fff}
.mark:hover{color:#fff}
.mark .br{opacity:.45}
.mark .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin:6px 0 0 4px}
.nav{display:flex;gap:28px}
.nav a{position:relative;font-size:14px;font-weight:500;color:rgba(255,255,255,.6);transition:color .2s}
.nav a:hover{color:#fff}
/* az éppen látható szekció menüpontja */
.nav a[aria-current]{color:var(--accent)}
.nav a::after{content:'';position:absolute;left:50%;bottom:-9px;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--accent);opacity:0;transform:scale(.4);transition:opacity .25s,transform .25s}
.nav a[aria-current]::after{opacity:1;transform:none}
.hdr .btn[aria-current]{background:var(--accent);color:#fff}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--dline);background:transparent;
  align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:16px;height:1.5px;background:#fff;display:block;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;gap:2px;max-width:calc(1280px + 2 * var(--pad-x));margin:0 auto;padding:4px var(--pad-x) 20px;
  max-height:calc(100vh - var(--hdr-h) - 20px);max-height:calc(100dvh - var(--hdr-h) - 20px);overflow-y:auto}
.mnav a{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:#fff;padding:11px 0;border-bottom:1px solid var(--dline-2)}
.mnav a[aria-current]{color:var(--accent)}
.mnav a.go{color:var(--accent);border:0}
.mnav.open{display:flex}

/* Az alsó térköz az integrációs sávnak kell, ami a hero aljára lóg rá. */
.hero-body{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,2.4vw,36px);align-items:center;
  padding:clamp(30px,3.2vw,48px) var(--hx) clamp(124px,9vw,136px)}
.hero-copy{position:relative;z-index:10;container-type:inline-size}
/* A cím mérete a hasáb szélességéből jön: a leghosszabb sor („most
   290 000Ft-tól”, a kicsi toldalékkal kb. 8,9 em) mindig kiférjen egy
   sorba. A vw a tartalék, ha a böngésző nem ismeri a konténer egységet. */
.hero-copy .d1{font-size:clamp(30px,4.2vw,62px);font-size:min(70px,10.8cqi)}
.hero-line{display:block;color:#fff;white-space:nowrap}
.hero-line.accent{color:var(--accent);margin-top:.08em}
/* a "-tól" toldalék: jóval kisebb, az alapvonalon, kicsit halványabb */
/* az összeg és az Ft között nincs szóköz, csak egy hajszálnyi rés */
.hero-line .ft{margin-left:.05em}
.hero-line .tol{font-size:.4em;font-weight:700;letter-spacing:-.01em;margin-left:.1em;color:#FF8A65}
.hero-sub{margin:24px 0 0;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:rgba(255,255,255,.68);max-width:520px;text-wrap:pretty}
.star{position:absolute;right:-42px;top:58%;width:86px;height:86px;pointer-events:none;z-index:5}
/* a második csillag a hero jobb felső sarkánál, kisebb, hogy ne versengjen */
.star-2{top:clamp(10px,1.4vw,22px);right:calc(var(--hx) - 26px);width:54px;height:54px;z-index:12}
/* keskenyebb asztali nézetben a bekezdés kitölti a hasábot, ott a gomb mellé kerül */
@media (max-width:1240px){.star:not(.star-2){top:84%}}

/* 3D makett: a valódi admin Áttekintés nézete, a landing stílusában.
   Minden méret em-ben van. A .mockwrap betűmérete a .persp hasáb
   szélességéből jön (a makett 72 em széles), így keskenyebb képernyőn az
   egész arányosan kisebb lesz, nem tördelődik szét. */
.persp{perspective:1500px;position:relative;min-width:0;container-type:inline-size;margin-right:calc(-1 * clamp(0px,2vw - 12px,24px));
  display:flex;align-items:center;justify-content:flex-start}
.mockwrap{position:relative;font-size:10px;font-size:min(10.5px,calc(100cqi / 72));width:72em}
.tilt{transform:rotateY(-17deg) rotateX(9deg) rotateZ(-1deg);transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mock{position:relative;height:44em;border-radius:2em;overflow:hidden;background:#fff;
  border:1px solid rgba(255,255,255,.1);box-shadow:var(--sh-float),0 0 0 1px rgba(255,255,255,.07);display:flex}

/* oldalsáv: a CMS mostani moduljai, a valódi sorrendben */
.mock-side{width:17.5em;flex:none;background:#131317;padding:1.3em 1.1em;display:flex;flex-direction:column;gap:.1em}
.mock-side .top{padding:.2em .6em 1em}
.mock-side .mark{font-size:1.3em}
.mock-side .mark .dot{width:.36em;height:.36em;margin:.36em 0 0 .3em}
.ms-store{display:flex;align-items:center;gap:.8em;padding:.7em .8em;margin-bottom:.9em;border-radius:.9em;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.ms-av{width:2.4em;height:2.4em;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent);color:#fff;
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.05em}
.ms-nm{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ms-nm b{font-size:1.15em;font-weight:700;color:#fff;letter-spacing:-.01em}
.ms-nm small{font-size:.9em;color:rgba(255,255,255,.42)}
.mi{display:flex;align-items:center;gap:.8em;padding:.56em .75em;border-radius:.75em;font-size:1.07em;line-height:1.25;
  color:rgba(255,255,255,.58);font-weight:500;white-space:nowrap}
.mi .ic{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mi.act{background:#fff;color:#111;font-weight:600}

/* fő rész: fejléc időszak választóval, négy mutató, két oszlopdiagram */
.mock-main{flex:1;min-width:0;background:#fff;padding:1.4em 1.6em 1.6em;display:flex;flex-direction:column}
.mock-h{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-bottom:1.1em;border-bottom:1px solid #EFEFEF}
.mock-t{font-family:'Sora',sans-serif;font-weight:700;font-size:1.5em;letter-spacing:-.02em;color:#111}
.seg{display:flex;background:#F1F1F1;border-radius:999px;padding:.2em}
.seg span{font-size:.95em;font-weight:700;padding:.4em 1em;border-radius:999px;color:#8A8A8A;white-space:nowrap}
.seg span.on{background:#111;color:#fff}
.dk-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8em;margin-top:1.3em}
.dk{min-width:0;border:1px solid #ECEAE5;border-radius:1em;padding:.95em 1em 1em}
.dk-l{margin:0;font-size:.66em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9CA3AF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-v{margin:.45em 0 0;font-family:'Sora',sans-serif;font-weight:800;font-size:1.6em;line-height:1.1;letter-spacing:-.03em;color:#111;white-space:nowrap}
.dk-v small{font-size:.6em;letter-spacing:0;margin-left:.15em}
.dk-d{margin:.6em 0 0;font-size:.74em;font-weight:700;color:#0A8F4E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-d span{font-weight:500;color:#9CA3AF;margin-left:.4em}
.dk-d.n{color:#6B7280;font-weight:600}
.dch-row{flex:1;min-height:0;display:flex;gap:.8em;margin-top:1em}
.dch{flex:1.55;min-width:0;display:flex;flex-direction:column;border:1px solid #ECEAE5;border-radius:1em;padding:1em 1.1em .9em}
.dch-o{flex:1}
.dch-o .dch-bars>div{gap:.14em}
.dch-t{margin:0;font-family:'Sora',sans-serif;font-weight:700;font-size:1.1em;line-height:1.2;letter-spacing:-.02em;color:#111}
.dch-s{margin:.3em 0 0;font-size:.74em;line-height:1.3;color:#9CA3AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Az oszlopok egy abszolút belső dobozban állnak, hogy a százalékos magasság
   minden böngészőben a diagram tényleges magasságához mérődjön. A sötét rész
   a nettó (bruttó / 1,27 = 78,7%), az utolsó nap akcens. */
.dch-bars{position:relative;flex:1;min-height:4em;margin-top:.9em;border-bottom:1px solid #E6E2DA;
  background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),#F2EFEA calc(25% - 1px) 25%)}
.dch-bars>div{position:absolute;inset:0;display:flex;align-items:flex-end;gap:.22em}
.dch-bars i{flex:1;height:var(--h);border-radius:.18em .18em 0 0;background:linear-gradient(to top,#1A1A1F 0 78.7%,#E4E0D8 78.7%);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(.45s + var(--i) * 20ms)}
.dch-bars i:last-child{background:linear-gradient(to top,var(--accent) 0 78.7%,#FFC2AE 78.7%)}
.dch-o .dch-bars i{background:#D9D5CD}
.dch-o .dch-bars i:last-child{background:var(--accent)}
.persp.in .dch-bars i,.no-js .dch-bars i{transform:none}
@media (prefers-reduced-motion:reduce){.dch-bars i{transform:none}}

.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,200,83,.6);animation:pl 2.2s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(0,200,83,.55)}70%{box-shadow:0 0 0 10px rgba(0,200,83,0)}100%{box-shadow:0 0 0 0 rgba(0,200,83,0)}}

@media (hover:hover){
  .persp:hover .tilt{transform:rotateY(-11deg) rotateX(5deg) rotateZ(-.5deg)}
}

/* ============================================================
   07 INTEGRÁCIÓS SÁV ÉS HÁROM KÁRTYA
   ============================================================ */
/* A sáv alja a hero aljához képest fix (22 px-re felette), a magasságától
   függetlenül. Ezért a nulla magas slot: a sáv abszolút, a slot alján ül,
   a kártyák pedig mindig a hero alatt kezdődnek. 1100 px alatt a sáv
   visszakerül a folyásba, ott a hero alól lóg ki. */
.intbar-slot{position:relative;z-index:40;max-width:1280px;margin:0 auto;height:0}
.intbar{position:absolute;left:0;right:0;bottom:22px;
  background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-card);
  --ibp:clamp(16px,2vw,26px);padding:16px var(--ibp);display:flex;align-items:center;gap:20px}
.intbar .ttl{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1.4;flex:none;white-space:nowrap}
.intwrap{position:relative;flex:1;min-width:0}
.intlist{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
/* a sávban logó és betűs jelvény keveredik, ezért itt a betűsek is négyzetesek */
.intbar .av{border-radius:7px}
/* a sor végén álló jelzés: az integrációk listája nyitott */
.chip.more{border-style:dashed;color:var(--ink-50)}
.chip.more .av.plus{background:transparent;border:1.5px dashed var(--line);color:var(--ink-30);
  font-size:15px;font-weight:600;line-height:1}
.intlist::-webkit-scrollbar{display:none}
/* A sor lapozható. A szélén kifutó chip a kártya fehérjébe halványul, és
   csak arra az oldalra kerül halványítás, amerre van még mit görgetni
   (main.js, 3e: .more-l, .more-r). A halványítás a burkoló két szélén ülő
   fehér átmenet, így magához a görgethető sorhoz nem kell nyúlni. */
.intwrap::before,.intwrap::after{content:'';position:absolute;top:0;bottom:0;width:44px;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .2s}
.intwrap::before{left:0;background:linear-gradient(90deg,#fff 12%,rgba(255,255,255,0))}
.intwrap::after{right:0;background:linear-gradient(270deg,#fff 12%,rgba(255,255,255,0))}
.intwrap.more-l::before,.intwrap.more-r::after{opacity:1}
.intbar .native{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-30);flex:none;padding-left:16px;border-left:1px solid var(--line)}

.cards3{max-width:1280px;margin:var(--gut) auto}
.c3-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.c3-track>*{min-width:0}
.c3-card{display:flex;flex-direction:column}
.c3-fig{height:230px;background:var(--cool);border-bottom:1px solid var(--line);position:relative;overflow:hidden;padding:18px}
.c3-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.c3-body .d4{font-size:20px}
.c3-shadow{box-shadow:0 8px 24px rgba(0,0,0,.06)}
/* lapozó pöttyök, csak a lapozható nézetben */
.c3-dots{display:none;justify-content:center;margin-top:4px}
.c3-dots button{width:30px;height:26px;border:0;padding:0;background:none;display:grid;place-items:center}
.c3-dots button::before{content:'';width:8px;height:8px;border-radius:999px;background:rgba(17,17,17,.2);
  transition:width .3s cubic-bezier(.22,1,.36,1),background .3s}
.c3-dots button[aria-current="true"]::before{width:24px;background:var(--ink)}

.orbit{position:absolute;inset:0;display:grid;place-items:center}
.orbit .ring{width:172px;height:172px;border:1px dashed rgba(17,17,17,.16);border-radius:50%;position:relative;animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* egységes ikon csomópontok: fehér kör, vékony keret, az ikon ellenforog,
   így mindig egyenesen áll */
.orbit .node{position:absolute;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px rgba(17,17,17,.10);animation:spinb 34s linear infinite}
.orbit .node svg{display:block}
.orbit .n-t{top:-20px;left:calc(50% - 20px)}
.orbit .n-r{right:-20px;top:calc(50% - 20px)}
.orbit .n-b{bottom:-20px;left:calc(50% - 20px)}
.orbit .n-l{left:-20px;top:calc(50% - 20px)}
@keyframes spinb{to{transform:rotate(-360deg)}}
.orbit .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;
  background:var(--dark);color:#fff;display:grid;place-items:center;font-family:'Sora',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:-.02em;box-shadow:0 10px 28px rgba(0,0,0,.22)}

/* a három kártya belső mockupjai */
.mk-head{padding:9px 11px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #F0F0F0}
.mk-head .ok{font-size:9px;color:#00C853;font-weight:800}
.mk-body{padding:10px 11px}
.mk-bar{background:#111;color:#fff;border-radius:8px;padding:8px 10px;font-size:9.5px;display:flex;align-items:center;gap:7px}
.mk-lbl{display:flex;align-items:center;justify-content:space-between;margin-top:11px}
.mk-lbl b{font-size:9px;font-weight:800;letter-spacing:.1em;color:#111}
.mk-lbl span{font-size:9px;font-weight:800;color:var(--accent)}
.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.mk-grid div{aspect-ratio:1/1;background:#F4F2EE;border-radius:6px}
.mk-grid div.add{border:1.5px dashed var(--accent)}
/* mérés: a mi boltunk és egy másik bolt, a sávok láthatóvá váláskor töltődnek */
.c3-card:has(.sp2) .c3-fig{display:grid;align-content:center}
.sp2{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp2>*{min-width:0;display:flex;flex-direction:column}
/* ha az egyik címke két sorba törik, a számok és a sávok akkor is egy vonalban maradnak */
.sp2 .l{margin-bottom:auto}
.sp2 .l{font-size:8.5px;font-weight:700;line-height:1.35;letter-spacing:.1em;text-transform:uppercase}
.sp2 .v{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(20px,1.9vw,24px);letter-spacing:-.02em;margin-top:5px}
.sp2 .t{height:5px;border-radius:3px;margin-top:12px;overflow:hidden}
.sp2 .t i{display:block;width:0;height:100%;border-radius:3px;transition:width 1.3s cubic-bezier(.22,1,.36,1) .35s}
.sp2 .now{background:#0F0F11;border-radius:10px;padding:13px 13px 15px}
.sp2 .now .l{color:rgba(255,255,255,.5)}
.sp2 .now .v{color:#fff}
.sp2 .now .t{background:rgba(255,255,255,.12)}
.sp2 .now .t i{background:var(--accent)}
.sp2 .was{background:#F4F2EE;border-radius:10px;padding:13px 13px 15px}
.sp2 .was .l{color:var(--ink-30)}
.sp2 .was .v{color:var(--ink-30)}
.sp2 .was .t{background:#E4E0D8}
.sp2 .was .t i{background:#C9C3B8}
.c3-card.in .sp2 .now .t i,.no-js .sp2 .now .t i{width:16%}
.c3-card.in .sp2 .was .t i,.no-js .sp2 .was .t i{width:86%}

@media (max-width:1100px){
  .hero-body{grid-template-columns:1fr;padding-bottom:clamp(96px,12vw,112px)}
  .persp{perspective:none;margin:8px 0 0;display:block}
  .tilt{width:100%;transform:none!important}
  /* egymás alatt nincs döntés, a makett kitölti a sort */
  .mockwrap{width:100%;font-size:min(11px,calc(100cqi / 72))}
  .star{display:none}
  /* a hét menüpont itt már nem fér ki, jön a hamburger */
  .nav{display:none}
  .burger{display:flex}
  .intbar-slot{height:auto}
  .intbar{position:relative;bottom:auto;flex-direction:column;align-items:stretch;gap:14px;margin-top:-72px}
  .intbar .ttl{max-width:none}
  /* egymás alatt a cím egy sor; a szolgáltatók sora a kártya belső széléig
     ér (pontosan a padding mértékéig), így lapozáskor sem lóg ki belőle */
  .intbar .ttl br{display:none}
  .intwrap{margin:0 calc(-1 * var(--ibp))}
  .intlist{padding:2px var(--ibp);scroll-padding:0 var(--ibp)}
  .intbar .native{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:12px}
  .c3-fig{height:200px}
  /* a három kártya lapozható sáv: a képernyő széléig fut, a következő
     kártya kilóg, hogy látszódjon, van még */
  .c3-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(var(--gut) * -1);padding:6px var(--gut) 12px;scroll-padding:0 var(--gut);
    scrollbar-width:none}
  .c3-track::-webkit-scrollbar{display:none}
  .c3-card{flex:0 0 min(46%,420px);scroll-snap-align:start}
  /* a sávban a kártyák nem úsznak be egyenként: a kilógó szomszéd üres lenne */
  .c3-card.rv{opacity:1;transform:none}
  .c3-dots{display:flex}
}
@media (max-width:720px){
  .hdr .btn{display:none}
  /* telefonon ikonos oldalsáv, a mutatók két oszlopban, egy diagram */
  .mockwrap{font-size:min(10px,calc(100cqi / 34))}
  .mock{height:auto}
  .mock-side{width:auto;padding:1.1em .7em;align-items:center}
  .mock-side .top,.ms-nm,.mi-t,.dch-o{display:none}
  .ms-store{padding:0;margin-bottom:.8em;background:none;border:0}
  .mi{padding:.6em}
  .dk-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dch-row{flex:none;height:16em}
  .intbar{border-radius:18px}
  .c3-fig{height:200px;padding:14px}
  .mk-grid div{aspect-ratio:1/.72}
  .c3-body{padding:20px 20px 24px}
  .c3-card{flex-basis:86%}
  /* telefonon a cím a szélességhez igazodva egy sor */
  .intbar .ttl{font-size:clamp(9.5px,3vw,11.5px);letter-spacing:.1em}
}

/* ============================================================
   08 BLOKK SZERKESZTŐ (interaktív demó)
   Bal oldalt accordion szerkesztő, jobbra a bolt élő előnézete.
   A logika az assets/js/editor-demo.js-ben van, szerver nélkül.
   ============================================================ */
.sync{display:grid;grid-template-columns:.94fr 1.14fr;gap:clamp(22px,2.8vw,44px);align-items:start;
  /* A kép helyét jelölő felületek egyetlen semleges tónust kapnak. Ezek nem
     választható beállítások, csak a kép helyét mutatják, ezért ne versenyezzenek
     színnel azzal, ami tényleg szerkeszthető (hero és hasáb stílus). */
  --ph-dark:linear-gradient(140deg,#332F2A,#524B42);   /* sötét wireframe előnézet */
  --ph-light:linear-gradient(140deg,#453F38,#6B6358)}  /* világos CMS panel */
@media (min-width:1101px){.sync>div:last-child{position:sticky;top:calc(var(--hdr-s) + 20px)}}
.cmsp{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);margin-top:clamp(22px,2.4vw,32px)}
.cmsp-h{background:var(--dark);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.cmsp-h .t{font-family:'Sora',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.02em}
.cmsp-h .s{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.cmsp-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:#FBFAF8;
  border-top:1px solid #F1EFEA;font-size:11.5px;line-height:1.45;color:var(--ink-50)}
.cmsp-f-t{display:flex;flex-direction:column;gap:4px;min-width:0}
/* a demó és az éles admin közti eltérés jelzése, halvány piros, nem riasztó vörös */
.cmsp-f .warn{color:#B4472C;font-weight:600}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--accent);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.linkbtn:hover{color:var(--accent-deep)}

/* accordion */
.acc+.acc{border-top:1px solid #F1EFEA}
.acc-hd{margin:0;font:inherit}
.acc-h{display:flex;align-items:center;gap:11px;width:100%;padding:13px 16px;background:#fff;border:0;text-align:left;
  font:inherit;color:inherit;cursor:pointer;transition:background .18s}
.acc-h .nm{font-size:14px;font-weight:600;min-width:0}
.acc-h .sum{margin-left:auto;font-size:11.5px;color:var(--ink-30);white-space:nowrap}
.acc-h .chev{width:18px;height:18px;flex:none;position:relative;transition:transform .25s}
.acc-h .chev::before{content:'';position:absolute;left:5.5px;top:3.5px;width:6px;height:6px;
  border-right:1.6px solid var(--ink-30);border-bottom:1.6px solid var(--ink-30);transform:rotate(45deg)}
.acc.open .chev{transform:rotate(180deg)}
.acc.open .acc-h,.acc.hot .acc-h{background:var(--accent-soft)}
.acc.open .bnum,.acc.hot .bnum{background:var(--accent);color:#fff;border-color:var(--accent)}
.bnum{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;
  font-family:ui-monospace,monospace;font-size:10px;font-weight:700;color:var(--ink-50);flex:none;transition:.18s}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.acc.open .acc-p{grid-template-rows:1fr}
.acc-in{overflow:hidden;min-height:0}

/* űrlap elemek */
.bform{padding:16px;background:#FBFAF8;border-top:1px solid #F1EFEA}
.bform fieldset{border:0;margin:0;padding:0;min-width:0}
.bform legend{padding:0}
.fl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);margin:0 0 7px;display:block}
.fld{margin-top:14px;min-width:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f2 .fld{margin-top:14px}
.inp{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;
  font:inherit;font-size:13px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,31,.12)}
.inp::placeholder{color:var(--ink-30)}
.inp[aria-invalid="true"]{border-color:var(--red);background:#FEF4F4}
.ta{height:auto;min-height:74px;padding:10px 12px;line-height:1.5;resize:vertical;display:block}
.sel{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center}
.ferr{font-size:11.5px;color:var(--red);font-weight:600;margin:6px 0 0;line-height:1.45}
.ferr:empty{display:none}
.hint{font-size:11.5px;color:var(--ink-50);margin:0 0 10px;line-height:1.5}
.hint b{color:var(--ink)}
.ccount{font-size:10.5px;color:var(--ink-30);text-align:right;margin:4px 0 0;font-variant-numeric:tabular-nums}

/* stílus választó */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw{position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-width:0}
.sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sw-v{display:block;height:46px;border-radius:9px;border:1.5px solid var(--line);position:relative;overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.sw-v i{position:absolute;left:10px;top:12px;width:48%;height:6px;border-radius:3px}
.sw-v::after{content:'';position:absolute;left:10px;bottom:10px;width:28%;height:9px;border-radius:999px;background:var(--btn)}
.sw-n{font-size:11.5px;font-weight:600;color:var(--ink-70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw input:checked+.sw-v{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,31,.14)}
.sw input:checked+.sw-v+.sw-n{color:var(--accent-deep)}
.sw input:focus-visible+.sw-v{outline:2px solid var(--accent);outline-offset:3px}
.sw-warm{background:linear-gradient(100deg,#241D14,#3A2C1A);--btn:var(--accent)}
.sw-warm i{background:#E8C48A}
.sw-light{background:linear-gradient(100deg,#F6F0E6,#E8DDCB);--btn:#2A2118}
.sw-light i{background:#2A2118}
.sw-dark{background:linear-gradient(120deg,#0B0B0D,#1D1D24);--btn:#D9B878}
.sw-dark i{background:#fff}

/* darabszám kapcsoló */
.segc{display:inline-flex;background:#EFEDE8;border-radius:999px;padding:3px;gap:2px}
.segc label{position:relative;cursor:pointer}
.segc input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.segc span{display:grid;place-items:center;min-width:54px;height:32px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--ink-50);transition:background .15s,color .15s}
.segc input:checked+span{background:#111;color:#fff}
.segc input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* kategória sorrend */
.order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.order li{display:flex;align-items:center;gap:10px;height:40px;padding:0 5px 0 10px;border:1px solid var(--line);border-radius:9px;
  background:#fff;font-size:13px;font-weight:600;transition:opacity .2s,background .2s}
.order li .pos{font-family:ui-monospace,monospace;font-size:10px;color:var(--ink-30);width:14px;flex:none}
.order li .th{width:22px;height:16px;border-radius:4px;flex:none;background:var(--ph-light)}
.order li .tag{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0A7C43}
.order li.off{opacity:.55;background:#FBFAF8}
.order li.off .tag{color:var(--ink-30)}
.order li.moved{animation:rowflash .7s ease-out}
@keyframes rowflash{0%{background:var(--accent-soft)}100%{background:#fff}}
.order .mv{display:flex;gap:3px;flex:none}
.order .ar{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;
  color:var(--ink-50);cursor:pointer;padding:0;transition:border-color .15s,color .15s}
.order .ar:disabled{opacity:.35;cursor:default}
.order .ar svg{display:block}

/* termékválasztó */
.pick-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cnt{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:#0A7C43}
.cnt.bad{color:var(--red)}
.picked{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.picked li{position:relative;border:1px solid var(--line);border-radius:9px;background:#fff;padding:6px;min-width:0}
.picked li .im{aspect-ratio:1/.5;border-radius:6px;background:var(--ph-light)}
.picked li .n{font-size:11px;font-weight:600;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picked li .x{position:absolute;right:3px;top:3px;width:22px;height:22px;border-radius:50%;background:rgba(17,17,17,.72);color:#fff;
  border:0;padding:0;display:grid;place-items:center;cursor:pointer}
.picked li.empty{border-style:dashed;display:grid;place-items:center;align-content:center;gap:2px;min-height:58px;color:var(--ink-30);
  font-size:10.5px;font-weight:600;text-align:center;background:transparent}
.picked li.empty b{font-size:16px;line-height:1;color:var(--ink-30)}
.pick-tools{display:grid;grid-template-columns:1fr 158px;gap:8px}
.srch{position:relative;min-width:0}
.srch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.srch .inp{padding-left:32px}
.srch .inp::-webkit-search-cancel-button{cursor:pointer}
.plist-f{margin-top:8px!important}
.plist{max-height:236px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:#fff;overscroll-behavior:contain}
.pr-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid #F3F1EC;cursor:pointer;font-size:12.5px;transition:background .12s}
.pr-row:last-child{border-bottom:0}
.pr-row input{accent-color:var(--accent);width:16px;height:16px;flex:none;margin:0;cursor:pointer}
.pr-row .th{width:30px;height:22px;border-radius:5px;flex:none;background:var(--ph-light)}
.pr-row .n{font-weight:600;white-space:nowrap}
.pr-row .c{color:var(--ink-30);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pr-row .price{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-row.on{background:var(--accent-soft)}
.pr-row.dis{opacity:.42;cursor:not-allowed}
.pr-row.dis input{cursor:not-allowed}
.plist .none{padding:20px;text-align:center;color:var(--ink-30);font-size:12.5px;margin:0}



/* ---------- a bolt élő előnézete ---------- */
.shopprev{border-radius:var(--r-card);overflow:hidden;border:1px solid rgba(17,17,17,.1);box-shadow:0 30px 80px rgba(0,0,0,.12);background:#fff}
.shopprev .live{margin-left:auto;font-size:9.5px;font-weight:800;color:var(--green);border-radius:999px;padding:2px 0}
.shopprev .live.ping{animation:liveping 1s ease-out}
@keyframes liveping{0%{color:#fff;background:var(--green);padding:2px 8px}100%{color:var(--green);background:transparent;padding:2px 0}}
.sp-body{background:#15120E;padding:14px;display:flex;flex-direction:column;gap:10px}
.spb{position:relative;border-radius:10px;overflow:hidden;transition:outline-color .22s;outline:2px solid transparent;outline-offset:2px}
.spb.hot{outline-color:var(--accent)}
.spb .badge{position:absolute;left:8px;top:8px;z-index:3;width:20px;height:20px;border-radius:6px;background:rgba(21,18,14,.55);
  color:#fff;font-family:ui-monospace,monospace;font-size:9.5px;font-weight:700;display:grid;place-items:center;backdrop-filter:blur(4px);transition:.2s}
.spb.hot .badge{background:var(--accent)}
.spb .upd{position:absolute;right:8px;top:8px;z-index:3;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--green);color:#0B2E19;border-radius:999px;padding:3px 8px;opacity:0;transform:translateY(-4px);
  transition:opacity .25s,transform .25s;pointer-events:none}
.spb.fresh .upd{opacity:1;transform:none}
.spb.fresh{animation:freshring .9s ease-out}
@keyframes freshring{0%{box-shadow:0 0 0 0 rgba(0,200,83,.55)}100%{box-shadow:0 0 0 12px rgba(0,200,83,0)}}
.sp-nav{height:38px;background:#100E0B;border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.sp-nav .lg{font-family:'Sora',sans-serif;font-weight:800;font-size:12px;color:#E8C48A;letter-spacing:-.01em}
.sp-nav .lk{display:flex;gap:12px;font-size:9.5px;color:#9C8F7C}

/* hero, három stílussal */
.sp-hero{min-height:126px;display:flex;align-items:center;padding:18px 20px 18px 38px;transition:background .35s}
.sp-hero .eyeb{height:6px;width:96px;transition:background .35s}
.sp-h-t{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(15px,1.45vw,19px);line-height:1.15;letter-spacing:-.02em;
  margin:9px 0 0;max-width:16em;overflow-wrap:anywhere;transition:color .35s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-h-t.empty{opacity:.45;font-style:italic;font-weight:600}
.sp-h-b{display:inline-flex;align-items:center;height:26px;padding:0 13px;border-radius:999px;font-size:10px;font-weight:700;
  margin-top:11px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .35s,color .35s}
.sp-h-b[hidden]{display:none}
.sp-hero[data-style="warm"]{background:linear-gradient(100deg,#241D14,#3A2C1A)}
.sp-hero[data-style="warm"] .eyeb{background:rgba(255,255,255,.12)}
.sp-hero[data-style="warm"] .sp-h-t{color:#E8C48A}
.sp-hero[data-style="warm"] .sp-h-b{background:var(--accent);color:#fff}
.sp-hero[data-style="light"]{background:linear-gradient(100deg,#F6F0E6,#E8DDCB)}
.sp-hero[data-style="light"] .eyeb{background:rgba(42,33,24,.14)}
.sp-hero[data-style="light"] .sp-h-t{color:#2A2118}
.sp-hero[data-style="light"] .sp-h-b{background:#2A2118;color:#F6F0E6}
.sp-hero[data-style="dark"]{background:radial-gradient(120% 140% at 85% 0%,#26262E 0%,#0B0B0D 60%)}
.sp-hero[data-style="dark"] .eyeb{background:linear-gradient(90deg,#D9B878,rgba(217,184,120,0));height:2px;width:72px}
.sp-hero[data-style="dark"] .sp-h-t{color:#fff}
.sp-hero[data-style="dark"] .sp-h-b{background:#D9B878;color:#15120E}

/* kategóriák, 2-4 oszlop */
.sp-cats{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:8px;padding:2px}
.sp-cats .cc{height:clamp(58px,6vw,86px);border-radius:8px;position:relative;display:flex;align-items:flex-end;padding:8px 9px;
  background:var(--ph-dark);animation:popin .35s ease-out}
.sp-cats .cc span{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes popin{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:none}}

/* kiemelt termékek, fix 4 */
.sp-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px}
.sp-prod .it{background:#1B1712;border:1px solid #2A241C;border-radius:8px;overflow:hidden;min-width:0;animation:popin .35s ease-out}
.sp-prod .it .im{aspect-ratio:1/.9;background:var(--ph-dark)}
.sp-prod .it .tx{padding:7px 8px 8px}
.sp-prod .it .n{font-size:9.5px;font-weight:600;color:#E6DED2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-prod .it .price{font-size:9.5px;font-weight:800;color:#E8C48A;margin:3px 0 0;font-variant-numeric:tabular-nums}
.sp-prod .it.empty{border-style:dashed;border-color:#3A3228;background:transparent;display:grid;place-items:center;align-content:center;
  gap:3px;color:#6E6152;font-size:9px;font-weight:700;text-align:center;aspect-ratio:1/1.25}
.sp-prod .it.empty b{font-size:16px;line-height:1}

/* kép és szöveg, ugyanazzal a három stílussal, mint a hero. A kép helyén
   helyőrző, a színe a stílushoz igazodik. */
.sp-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-radius:10px;padding:10px;transition:background .35s}
.sp-split .im{aspect-ratio:16/10;border-radius:7px;transition:background .35s,box-shadow .35s}
.sp-split .tx{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding-right:6px}
.sp-split .h{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(12px,1.05vw,14px);line-height:1.2;letter-spacing:-.015em;margin:0;
  overflow-wrap:anywhere;transition:color .35s}
.sp-split .h.empty{opacity:.45;font-style:italic;font-weight:600}
.sp-split .b{font-size:10px;line-height:1.5;margin:0;overflow-wrap:anywhere;transition:color .35s;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sp-split[data-style="warm"]{background:linear-gradient(100deg,#241D14,#3A2C1A)}
.sp-split[data-style="warm"] .h{color:#E8C48A}
.sp-split[data-style="warm"] .b{color:rgba(246,240,230,.66)}
.sp-split[data-style="warm"] .im{background:linear-gradient(135deg,#55432B,#3F311F)}
.sp-split[data-style="light"]{background:linear-gradient(100deg,#F6F0E6,#E8DDCB)}
.sp-split[data-style="light"] .h{color:#2A2118}
.sp-split[data-style="light"] .b{color:#6E6152}
.sp-split[data-style="light"] .im{background:linear-gradient(135deg,#E3D6C1,#D3C2A7)}
.sp-split[data-style="dark"]{background:radial-gradient(120% 140% at 85% 0%,#26262E 0%,#0B0B0D 60%)}
.sp-split[data-style="dark"] .h{color:#fff}
.sp-split[data-style="dark"] .b{color:rgba(255,255,255,.58)}
.sp-split[data-style="dark"] .im{background:linear-gradient(135deg,#2A2A33,#17171C);box-shadow:inset 0 0 0 1px rgba(217,184,120,.28)}

.blktypes{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:clamp(24px,2.6vw,34px)}
.bt{border:1px solid var(--line);border-radius:var(--r-inner);padding:16px 14px;background:#fff;transition:.2s}
.bt .nm{font-size:13.5px;font-weight:700;margin:10px 0 4px;letter-spacing:-.01em}
.bt .ds{font-size:12px;color:var(--ink-50);line-height:1.5;margin:0}

@media (hover:hover){
  .acc-h:hover{background:var(--accent-soft)}
  .order .ar:not(:disabled):hover{border-color:var(--ink-30);color:var(--ink)}
  .pr-row:not(.dis):not(.on):hover{background:#FBFAF8}
  .spb{cursor:pointer}
  .bt:hover{border-color:rgba(17,17,17,.25);transform:translateY(-3px);box-shadow:var(--sh-card)}
}
@media (max-width:1100px){
  .sync{grid-template-columns:1fr;gap:24px}
  .blktypes{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .blktypes{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}
  .bt{padding:13px 12px}
  .bt svg{width:22px;height:22px}
  .bt .nm{margin:8px 0 3px;font-size:13px}
  .bt .ds{font-size:11.5px;line-height:1.45}
  .acc-h{padding:13px 14px;gap:10px}
  .acc-h .nm{font-size:13.5px}
  .bform{padding:14px}
  .cmsp{margin-top:18px}
  .cmsp-f{flex-direction:column;align-items:flex-start;gap:6px}
  .f2{grid-template-columns:1fr;gap:0}
  .sw-v{height:40px}
  .picked{grid-template-columns:repeat(2,1fr)}
  .pick-tools{grid-template-columns:1fr}
  .pr-row .c{display:none}
  .sp-body{gap:8px;padding:10px}
  .sp-hero{min-height:98px;padding:14px 14px 14px 36px}
  .sp-prod{grid-template-columns:repeat(2,1fr)}
  .sp-prod .it .im{aspect-ratio:1/.62}
  .sp-cats .cc{height:54px;padding:7px}
  .sp-split{grid-template-columns:1fr;gap:10px}
  .sp-split .im{aspect-ratio:16/8}
  .sp-split .tx{padding:0 4px 4px}
}

/* ============================================================
   09 ADMIN ÉS RENDELÉS
   ============================================================ */
/* Asztali nézetben két hasáb: bal oldalt a cím és alatta a lista, jobbra a
   videó a két sor mellett függőlegesen középen. A két szélső 1fr sor veszi
   fel a magasságkülönbséget, így mindig a rövidebb oldal kerül középre.
   Egy hasábban a sorrend: cím, videó, lista. */
.admx{display:grid;grid-template-columns:1.02fr 1.18fr;grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:". media" "head media" "list media" ". media";column-gap:clamp(28px,4vw,64px)}
/* a videó és a kiemelések egy hasábban közvetlen rácselemek (display:contents),
   ezért rájuk is kell, hogy a lapozható sáv ne feszítse szét az oszlopot */
.admx>*,.admx-media>*{min-width:0}
.admx-head{grid-area:head}
.admx-media{grid-area:media;align-self:center}
.admx-list{grid-area:list}

/* A videó kerete pontosan 16:10, mint maga a felvétel, így semmi nem vágódik
   le. Alatta a kezdőkép (a videó első képkockája) ül, a videó csak akkor
   úszik rá, amikor már van mit mutatnia, ezért nincs villanás. A lekerekítés
   a videón is rajta van, mert a Safari lejátszás közben a szülő
   overflow:hidden vágását nem mindig tartja. */
.admvid{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;isolation:isolate;
  background:#F6F7F9;box-shadow:0 30px 90px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.25)}
.admvid::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.admvid-poster,.admvid-v{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.admvid-v{z-index:1;opacity:0;transition:opacity .45s ease}
.admvid.ready .admvid-v{opacity:1}

/* A videó alatti három kiemelés. Sarokban akcens derengés, fent fénylő
   perem, ugyanaz a nyelv, mint az árkártyán. */
.adm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.akc{position:relative;isolation:isolate;overflow:hidden;padding:16px 18px 18px;border-radius:var(--r-inner);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--dark-2);
  border:1px solid var(--dline);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.akc::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(180px 120px at 100% 0%,rgba(255,74,31,.15),transparent 70%)}
.akc-h{display:flex;align-items:center;gap:11px}
.akc-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#FF8A65;
  background:rgba(255,74,31,.1);border:1px solid rgba(255,74,31,.24)}
.akc-t{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.03em;line-height:1.1;color:#fff;margin:0;white-space:nowrap}
.akc-k{font-size:12.5px;line-height:1.5;color:var(--dtext);margin:12px 0 0;text-wrap:pretty}
@media (hover:hover){.akc:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}}
.adm-dots{display:none}

/* a pipák 1 px-szel nagyobbak, mint az árkártyán; a szöveg egy sorba fér */
.adm-feats{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:13px}
.adm-feats .tick{width:23px;height:23px;font-size:11.5px;margin-top:2px}
.adm-feats .p{color:rgba(255,255,255,.75);font-size:clamp(15px,1.12vw,16px)}

/* A rendelés útja a fejléc jobb oldalán: öt pont egy vonalon. A vonal a
   következő pontig töltődik (--p, 0 és 1 között), odaérve a pont
   bekapcsol (.on), a legutóbbi akcens (.cur), a kézbesítés zöld, és egy
   kis ünneplés fut körülötte. A léptetés a main.js-ben (3d). A .done
   állapot a kész kép: JS nélkül és csökkentett mozgásnál ez látszik. */
.flow{position:relative;align-self:stretch;max-width:560px;margin-top:6px}
.flow-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.fs{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;text-align:center}
.fs-ic{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);border:1.5px solid var(--line);color:var(--ink-30);
  transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s}
.fs-ic svg{width:21px;height:21px;overflow:visible}
.fs-t{font-size:12px;font-weight:600;letter-spacing:-.005em;color:var(--ink-30);white-space:nowrap;transition:color .35s}
.fs.on .fs-ic,.flow.done .fs-ic{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 8px 18px rgba(17,17,17,.16)}
.fs.cur .fs-ic{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(255,74,31,.14),0 8px 18px rgba(255,74,31,.25)}
.fs-done.on .fs-ic,.flow.done .fs-done .fs-ic{background:var(--green);border-color:var(--green);box-shadow:0 0 0 5px rgba(0,200,83,.14),0 8px 18px rgba(0,200,83,.22)}
.fs.on .fs-t,.flow.done .fs-t{color:var(--ink)}
.flow-line{position:absolute;left:10%;right:10%;top:22px;height:2px;border-radius:2px;background:var(--line)}
.flow-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);border-radius:inherit;
  background:linear-gradient(90deg,var(--ink),var(--accent));transition:width .9s cubic-bezier(.45,0,.25,1)}
.flow-head{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(255,74,31,.18);opacity:0;
  transition:left .9s cubic-bezier(.45,0,.25,1),opacity .25s}
.flow.done{--p:1}
.flow.moving .flow-head{opacity:1}
.flow.reset .flow-fill,.flow.reset .flow-head{transition-duration:.45s}
/* a pontok saját kis mozdulata, csak a léptetés közben */
.fs-it,.fs-car{transform-box:fill-box;transform-origin:center}
.fs-ck,.fs-tape,.fs-sm{stroke-dasharray:1;stroke-dashoffset:0}
.flow.run .fs.on .fs-ic{animation:fsPop .45s cubic-bezier(.3,1.5,.5,1)}
.flow.run .fs-cart:not(.on) .fs-it{opacity:0}
.flow.run .fs-cart.on .fs-it{animation:fsDrop .5s .1s cubic-bezier(.3,1.4,.5,1) both}
.flow.run .fs:not(.on) .fs-ck,.flow.run .fs:not(.on) .fs-tape,.flow.run .fs:not(.on) .fs-sm{stroke-dashoffset:1}
.flow.run .fs.on .fs-ck,.flow.run .fs.on .fs-tape,.flow.run .fs.on .fs-sm{animation:fsDraw .45s .15s ease-out both}
.flow.run .fs-truck.on .fs-car{animation:fsDrive .6s cubic-bezier(.3,1.3,.5,1) both}
.fs-spark{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;pointer-events:none;opacity:0}
.fs-spark::before,.fs-spark::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle,var(--green) 0 2px,transparent 2.6px) 50% 0/8px 8px no-repeat,
    radial-gradient(circle,var(--green) 0 2px,transparent 2.6px) 50% 100%/8px 8px no-repeat,
    radial-gradient(circle,var(--accent) 0 2px,transparent 2.6px) 0 50%/8px 8px no-repeat,
    radial-gradient(circle,var(--accent) 0 2px,transparent 2.6px) 100% 50%/8px 8px no-repeat}
.fs-spark::after{transform:rotate(45deg) scale(.82)}
.flow.run .fs-done.on .fs-spark{animation:fsBurst .9s .2s ease-out both}
@keyframes fsPop{0%{transform:scale(.84)}100%{transform:none}}
@keyframes fsDrop{from{transform:translateY(-7px);opacity:0}to{transform:none;opacity:1}}
@keyframes fsDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fsDrive{from{transform:translateX(-5px);opacity:.3}to{transform:none;opacity:1}}
@keyframes fsBurst{0%{opacity:0;transform:scale(.55)}30%{opacity:1}100%{opacity:0;transform:scale(1.2)}}

/* rendelés sín, kattintásra lépő.
   Állapotok (main.js): .done = kinyitott lépés, .cur = a legutóbb nyitott,
   .next = a következő, ez pulzál, .linked = a lépés utáni összekötő kitöltve.
   A tartalom és a helyőrző ugyanabban a rácscellában ül, ezért a sor
   magassága nyitáskor nem ugrik (asztali nézetben). */
.rail{position:relative;margin-top:clamp(24px,2.6vw,34px)}
.rail-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;
  margin-bottom:clamp(22px,2.4vw,30px);padding:11px 12px 11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--cool)}
.rail-hint{display:flex;align-items:center;gap:10px;margin:0;font-size:13.5px;font-weight:600;color:var(--ink-70);line-height:1.4}
.rail-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:dotping 1.9s ease-out infinite}
@keyframes dotping{0%{box-shadow:0 0 0 0 rgba(255,74,31,.45)}70%{box-shadow:0 0 0 6px rgba(255,74,31,0)}100%{box-shadow:0 0 0 0 rgba(255,74,31,0)}}
.rail.fin .rail-dot{background:var(--green);animation:pl 2.2s infinite}
.rail-meta{display:flex;align-items:center;gap:14px;margin-left:auto}
.rail-count{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-30);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.rail-count b{color:var(--ink);font-weight:700}
.rail-reset{font-size:13px}
.no-js .rail-bar{display:none}

.rail-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.st{position:relative;display:flex;flex-direction:column;gap:14px}
.st-top{position:relative;z-index:1;display:flex;align-items:center;gap:10px}
.st-n{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;padding:0;
  font-family:'Sora',sans-serif;font-weight:800;font-size:14px;color:var(--ink-30);flex:none;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .2s}
.st.done .st-n{background:var(--accent);border-color:var(--accent);color:#fff;transition-delay:var(--d,0s)}
.st.cur .st-n{box-shadow:0 0 0 6px rgba(255,74,31,.13),0 8px 20px rgba(255,74,31,.28)}
.st.next .st-n{border-color:var(--accent);color:var(--accent);animation:nudge 1.9s ease-out infinite}
@keyframes nudge{0%{box-shadow:0 0 0 0 rgba(255,74,31,.38)}70%{box-shadow:0 0 0 12px rgba(255,74,31,0)}100%{box-shadow:0 0 0 0 rgba(255,74,31,0)}}
/* összekötő a következő lépés számáig, balról töltődik */
.st-link{position:absolute;left:54px;right:-14px;top:26px;height:2px;background:var(--line);overflow:hidden}
.st-link i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,1,.36,1) var(--ld,0s)}
.st.linked .st-link i,.no-js .st-link i{transform:none}
.st-inner{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.st h3{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;margin:0;letter-spacing:-.02em;transition:color .3s}
.st:not(.done):not(.next) h3{color:var(--ink-30)}
.st:not(.done) h3{cursor:pointer}
.st .ds{font-size:12.5px;color:var(--ink-50);line-height:1.5;margin:0}
/* a sor minden lépése egyforma magas: a helyőrző és a kártya kitölti */
.st-stage{flex:1;display:grid}
.st-stage>*{grid-area:1/1;min-width:0}
.st-rev{display:flex;flex-direction:column;gap:14px;
  transition:opacity .45s ease var(--d,0s),transform .55s cubic-bezier(.22,1,.36,1) var(--d,0s),visibility 0s linear var(--d,0s)}
.st:not(.done) .st-rev{opacity:0;transform:translateY(12px);visibility:hidden;
  transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.st-ph{border:1.5px dashed var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px;cursor:pointer;
  transition:opacity .3s ease var(--d,0s),visibility 0s linear var(--d,0s),border-color .3s,background .3s}
.st-ph i{display:block;height:6px;border-radius:3px;background:#F1EFEA}
.st-ph i:nth-child(1){width:88%}.st-ph i:nth-child(2){width:62%}.st-ph i:nth-child(3){width:74%}
.st-ph span{margin-top:auto;font-size:11.5px;font-weight:700;color:var(--accent);opacity:0;transition:opacity .3s}
.st.next .st-ph{border-color:rgba(255,74,31,.4);background:#FFFAF8}
.st.next .st-ph span{opacity:1}
.st.done .st-ph{opacity:0;visibility:hidden;pointer-events:none}
@media (hover:hover){
  .st:not(.done) .st-n:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.05)}
  .st:not(.done) .st-ph:hover{border-color:var(--accent)}
}
.st-ui{flex:1;border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px;min-height:118px;transition:border-color .3s,box-shadow .3s}
.st.cur .st-ui{border-color:rgba(255,74,31,.4);box-shadow:0 12px 30px rgba(255,74,31,.09)}
/* nyitáskor a kártya sorai egymás után úsznak be */
.st.done .st-ui>*{animation:uiin .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--d,0s) + .12s + var(--k,0) * 70ms)}
.st-ui>:nth-child(2){--k:1}.st-ui>:nth-child(3){--k:2}.st-ui>:nth-child(4){--k:3}
@keyframes uiin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.st-note{font-size:9.5px;color:var(--ink-30);margin:7px 0 0}
.kv{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;padding:4px 0}
.kv.sum{border-top:1px solid var(--line);margin-top:5px;padding-top:8px}
.kv .k{color:var(--ink-50)}
.kv .v{font-weight:700}
.opt{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:10px;margin-top:5px}
.opt.row{justify-content:space-between}
.opt.row>span{display:flex;align-items:center;gap:7px}
.opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);font-weight:700}
.radio{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line);flex:none}
.opt.on .radio{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2px #fff}
/* pénztár: a kész rész pipát kap, a jobb szélen a választott érték */
.opt .ov{margin-left:auto;min-width:0;padding-left:6px;font-weight:500;color:var(--ink-30);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt.on .ov{color:var(--accent-deep);opacity:.7}
.opt.ok .radio{border-color:#111;background:#111 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3.2 6.3l1.9 1.9 3.8-4.3%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/100% no-repeat}
.pay-total{background:#111;color:#fff;border-radius:8px;padding:7px 9px;margin-top:8px;display:flex;justify-content:space-between;font-size:10.5px}
/* GLS címke (AWB) vázlata szürkében, mint egy kinyomtatott A6-os címke:
   nagy útvonal betű, vonalkód felirattal, címblokk, alul a nagy vonalkód */
.awb{max-width:300px;background:#F4F5F3;border:1px solid #E3E5E1;border-radius:6px;padding:8px 10px 9px;display:flex;flex-direction:column;gap:6px}
.awb .ln{display:block;height:4px;border-radius:2px;background:#AEB0AD}
.awb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.awb-top b{font-family:Sora,sans-serif;font-weight:800;font-size:24px;line-height:.85;color:#9FA19E;padding-top:2px}
.awb-bc{display:flex;flex-direction:column;align-items:center;gap:3px;width:56%}
.awb-bc .bc{display:block;width:100%;height:17px;background:
  repeating-linear-gradient(90deg,#9FA19E 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,#9FA19E 0 2px,transparent 2px 7px),
  repeating-linear-gradient(90deg,transparent 0 9px,#9FA19E 9px 11px,transparent 11px 13px)}
.awb-bc .ln{width:48%}
.awb-addr{display:flex;flex-direction:column;gap:4px;margin-left:26%}
.awb-bc.lg{width:58%;margin-left:26%;margin-top:2px}
.awb-bc.lg .bc{height:21px}
.trk{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.trk .s{display:flex;align-items:center;gap:7px;font-size:10px}
.trk .d{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.trk .s.done .d{background:var(--green)}
.trk .s.now .d{background:var(--accent);box-shadow:0 0 0 3px rgba(255,74,31,.18)}

@media (max-width:1100px){
  /* egy hasáb: cím, videó, lista, legalul a három kiemelés */
  .admx{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "vid" "list" "stats";row-gap:28px}
  .admx-media{display:contents}
  .admvid{grid-area:vid}
  .adm-statw{grid-area:stats}
  .admx .adm-feats,.adm-stats{margin-top:0}
  /* függőleges sín: a le nem nyitott lépés csak a számából és a címéből áll,
     a tartalma kattintásra nyílik le alatta */
  .rail-grid{grid-template-columns:1fr;gap:0}
  .st{flex-direction:row;gap:16px;padding-bottom:26px}
  .st:last-child{padding-bottom:0}
  .st .st-top{flex-direction:column;align-items:flex-start}
  .st-inner{flex:1;gap:0;padding-top:15px}
  .st-link{left:26px;right:auto;top:54px;bottom:0;width:2px;height:auto}
  .st-link i{transform:scaleY(0);transform-origin:center top}
  .st-stage{grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1) var(--d,0s)}
  .st:not(.done) .st-stage{grid-template-rows:0fr;transition-duration:.25s}
  .st-rev{min-height:0;overflow:hidden;padding-top:10px}
  .st-ph{display:none}
  .st.next .st-inner::after{content:'Kattints a számra';margin-top:4px;font-size:12px;font-weight:700;color:var(--accent)}
  .st.cur .st-ui{box-shadow:none}
}
@media (max-width:720px){
  .admvid{border-radius:var(--r-inner)}
  /* a három kiemelés lapozható sáv, a következő kártya kilóg a szélen */
  .adm-stats{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(var(--pad-x) * -1);padding:2px var(--pad-x) 10px;scroll-padding:0 var(--pad-x);scrollbar-width:none}
  .adm-stats::-webkit-scrollbar{display:none}
  .akc{flex:0 0 80%;scroll-snap-align:start}
  .adm-feats{gap:12px}
  .adm-feats .p{font-size:14.5px;line-height:1.55}
  .adm-feats .tick{margin-top:0}
  .adm-dots{display:flex}
  /* a rendelés útja telefonon: kisebb pontok, a felirat a hasábhoz méretezve */
  .flow{max-width:none;margin-top:4px}
  .fs{gap:8px}
  .fs-ic{width:40px;height:40px}
  .fs-ic svg{width:19px;height:19px}
  .flow-line{top:19px}
  .fs-t{font-size:clamp(9.5px,2.75vw,12px);letter-spacing:-.01em}
  .st-ui{min-height:0}
  .st{padding-bottom:22px}
  .rail-bar{border-radius:18px;padding:12px 14px}
  .rail-hint{font-size:13px;align-items:flex-start}
  .rail-dot{margin-top:5px}
}

/* ============================================================
   10 REFERENCIÁK ÉS ESETTANULMÁNY ABLAK
   Sötét kártyák valódi képpel. A "Részletek" gomb láthatatlan rétege
   (::after) a teljes kártyát lefedi, így bárhol rá lehet kattintani, a
   domain link pedig e réteg fölött ül, külön kattintható.
   ============================================================ */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.refs>*{min-width:0}
.refc{position:relative;background:var(--dark-2);border:1px solid var(--dline);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.refc-media{aspect-ratio:16/10;overflow:hidden;background:#1C1C21;border-bottom:1px solid var(--dline)}
.refc-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.refc-b{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;flex:1}
.refc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.refc-h .d4{color:#fff}
/* állapot jelvény: éles bolt zöld, bemutató bolt narancs, visszafogott
   kerettel és egy pöttyel a szöveg előtt (az élesé lüktet) */
.refc .tg{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dtext);border:1px solid var(--dline);border-radius:999px;padding:4px 11px 4px 9px;white-space:nowrap;flex:none}
.refc .tg::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.refc .tg.live{color:#5FD891;border-color:rgba(0,200,83,.34);background:rgba(0,200,83,.07)}
.refc .tg.live::before{background:var(--green);animation:pl 2.2s infinite}
.refc .tg.demo{color:#FF9A7A;border-color:rgba(255,74,31,.36);background:rgba(255,74,31,.07)}
.refc .tg.demo::before{background:var(--accent)}
.refc-b .p{margin-top:12px;font-size:14px;flex:1}
/* a bolt linkje az esettanulmány ablakban van, a kártyán csak a Részletek gomb */
.refc-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--dline)}
/* Pecsét a lábléc üres felén, kicsit megdöntve: dupla keret (a belső
   vonal egy sötét résen túl), a bolt állapotának színével. */
.stamp{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 8px;border-radius:8px;flex:none;
  font-family:"Sora",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  border:1.5px solid var(--sc);background:var(--sb);color:var(--st);transform:rotate(-6deg);
  box-shadow:inset 0 0 0 2px var(--dark-2),inset 0 0 0 3px var(--sr)}
.stamp svg{flex:none;width:14px;height:14px}
/* a kártya szélessége dönt: szűk kártyán a pecsét és a gomb is összébb húzódik */
.refc-b{container-type:inline-size}
@container (max-width:310px){
  .refc-f{gap:8px}
  .stamp{font-size:9.5px;letter-spacing:.035em;padding:0 9px 0 7px;gap:5px;height:26px}
  .stamp svg{width:12px;height:12px}
  .refc-more{padding:0 13px;gap:6px}
}
@container (max-width:285px){
  .stamp{letter-spacing:.015em;padding:0 8px 0 6px}
  .refc-more{padding:0 12px}
}
/* a legkeskenyebb telefonon a gomb a pecsét alá kerül */
@container (max-width:250px){
  .refc-f{flex-wrap:wrap;row-gap:12px}
  .refc-more{margin-left:auto}
}
.stamp.ok{--st:#5FD891;--sc:rgba(0,200,83,.6);--sb:rgba(0,200,83,.07);--sr:rgba(0,200,83,.3)}
.stamp.demo{--st:#FFAA8C;--sc:rgba(255,138,101,.55);--sb:rgba(255,74,31,.07);--sr:rgba(255,138,101,.26)}
.refc-more{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:0;
  background:#fff;color:var(--ink);font-size:13.5px;font-weight:700;white-space:nowrap;transition:background .25s,color .25s}
.refc-more::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--r-card)}
.refc-more svg{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.refc:has(.refc-more:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
@media (hover:hover){
  .refc:hover{border-color:rgba(255,255,255,.22);transform:translateY(-4px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
  .refc:hover .refc-media img{transform:scale(1.035)}
  .refc:hover .refc-more{background:var(--accent);color:#fff}
  .refc:hover .refc-more svg{transform:scale(1.15)}
}
.no-js .refc-more{display:none}

/* ---------- esettanulmány ablak (<dialog>) ----------
   A dialog a teljes nézetet kitölti, a háttér elmosását a saját
   .case-scrim rétege adja (így a nyitás és a zárás animálható). */
.case{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:#fff;overflow:hidden}
.case:not([open]){display:none}
.case::backdrop{background:transparent}
.case-scrim{position:absolute;inset:0;background:rgba(8,8,10,.62);
  -webkit-backdrop-filter:blur(14px) saturate(.85);backdrop-filter:blur(14px) saturate(.85)}
.case-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
/* Az árnyék csak a nyitó animáció után jelenik meg (.settled): az animáció
   alatt a clip-path levágná, és a végén hirtelen ugrana be. */
.case-panel{position:relative;width:min(1140px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--dark-2);border:1px solid rgba(255,255,255,.14);border-radius:28px;overflow:hidden;
  box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .45s ease}
.case-panel.settled{box-shadow:0 50px 140px rgba(0,0,0,.55)}
.case-sc{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.case-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,3.4vw,52px);padding:clamp(18px,2.4vw,30px)}
.case-grid>*{min-width:0}
.case-side{position:sticky;top:clamp(18px,2.4vw,30px);align-self:start}
.case-media{aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#1C1C21;transform-origin:0 0}
.case-media img{width:100%;height:100%;object-fit:cover;display:block}
.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--dline)}
.case-facts dt{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dtext-2)}
.case-facts dd{margin:6px 0 0;font-size:13.5px;font-weight:600;line-height:1.4;color:#fff}
.case-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px;
  vertical-align:1px;box-shadow:0 0 0 3px rgba(0,200,83,.18)}
.case-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.case-acts .btn{box-shadow:none}
.btn-d{background:transparent;border-color:rgba(255,255,255,.24);color:#fff}
.btn-d:hover{border-color:#fff;color:#fff}
.case-main{padding:6px 8px 10px 0}
.case-eye{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dtext-2)}
.case-eye .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.case-main .d2{color:#fff;margin-top:14px}
.case-main .lead{margin-top:14px;color:rgba(255,255,255,.74);font-size:clamp(16px,1.25vw,18px)}
.case-sec{margin-top:26px;padding-top:22px;border-top:1px solid var(--dline)}
.case-sec h3{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.015em;margin:0 0 10px;color:#fff}
.case-sec .p{color:var(--dtext);font-size:15px}
.case-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.case-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.6;color:var(--dtext)}
.case-list li::before{content:'';position:absolute;left:0;top:.78em;width:12px;height:2px;border-radius:2px;background:var(--accent)}
.case-x{position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;padding:0;
  display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.16);background:rgba(15,15,17,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .2s}
.case-x:hover{background:var(--accent);border-color:var(--accent)}
.case-x:active{transform:scale(.94)}
/* a nyitó és záró animáció szelleme (cases.js): teljes képernyős sötét lap
   clip-path-szal, és a kép másolata. Amíg fut, a valódi panel rejtve van. */
.case-ghost,.case-ghost-img{position:absolute;left:0;top:0;pointer-events:none;display:none}
.case-ghost{width:100%;height:100%;background:var(--dark-2)}
.case-ghost-img{object-fit:cover;transform-origin:0 0;border-radius:18px}
.case.morph .case-ghost,.case.morph .case-ghost-img{display:block}
.case.morph .case-panel{opacity:0}
/* nyitott ablak alatt az oldal nem görgethető; a görgetősáv helyét a body
   jobb belső margója tölti ki (--sbw, cases.js), így semmi nem ugrik */
html.case-lock{overflow:hidden}
html.case-lock body{padding-right:calc(var(--gut) + var(--sbw,0px))}

@media (max-width:900px){
  .case-grid{grid-template-columns:1fr;gap:26px}
  .case-side{position:static;display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:center}
  .case-facts{grid-template-columns:1fr;gap:12px;margin:0;padding:0;border:0}
  .case-acts{margin-top:18px}
  .case-main{padding:0 4px 6px}
}
@media (max-width:720px){
  .case-side{display:contents}
  .case-media{order:1}
  .case-main{order:2}
  .case-side .case-fade{order:3;padding:0 4px;margin-top:-4px}
  .case-wrap{padding:8px}
  .case-panel{border-radius:20px}
  .case-grid{padding:10px 10px 22px;gap:20px}
  .case-media,.case-ghost-img{border-radius:13px}
  .case-x{top:16px;right:16px;width:40px;height:40px}
  .case-facts{gap:0;padding-top:4px;border-top:1px solid var(--dline)}
  .case-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 4px;border-bottom:1px solid var(--dline-2)}
  .case-facts dd{margin:0;text-align:right}
  .case-acts{margin-top:18px}
  .case-sec{margin-top:22px;padding-top:18px}
  .case-list li,.case-sec .p{font-size:14.5px}
}

/* a harmadik hely nem referencia, hanem felhívás */
.refc.next{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.22)}
.refc.next .refc-b{justify-content:center;align-items:center;text-align:center;padding:clamp(28px,3vw,38px)}
.refc.next .d4{color:#fff;margin-top:18px}
.refc.next .p{flex:none;margin-top:10px;max-width:30ch}
.refc.next .btn{margin-top:22px}
.refc.next .plusmark{width:46px;height:46px;border-radius:50%;background:rgba(255,74,31,.14);color:var(--accent);
  display:grid;place-items:center;font-size:26px;font-weight:600;line-height:1;flex:none}

/* ============================================================
   11 CSOMAG, ÁR ÉS HOGYAN KÉSZÜL
   ============================================================ */
.offer{display:grid;grid-template-columns:1.32fr .82fr;gap:clamp(24px,3vw,48px);align-items:start}
.offer>*{min-width:0}
.oh{color:var(--ink);letter-spacing:.12em;margin-bottom:18px}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.9vw,26px)}
.incl>*{min-width:0}
.inc{display:flex;gap:14px;align-items:flex-start}
.inc .ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-deep);
  border:1px solid rgba(255,74,31,.22);display:grid;place-items:center;flex:none}
.inc .nm{font-family:'Sora',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.018em;margin:3px 0 6px}
.inc .p{font-size:14px}

/* Árkártya. A sarokban akcens fény, halvány rács és egy fénylő felső
   perem adja a mélységét; a tartalma a két fül (Amit kapsz, Amit nem
   kapsz), amik csak a lista tartalmát váltják. */
.pricebox{position:sticky;top:calc(var(--hdr-s) + 20px);isolation:isolate;overflow:hidden;
  background:var(--dark);color:#fff;border-radius:var(--r-card);padding:clamp(24px,2.5vw,32px);
  box-shadow:0 30px 70px rgba(17,17,17,.22),0 8px 22px rgba(17,17,17,.1),inset 0 0 0 1px rgba(255,255,255,.07)}
.pricebox::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(340px 240px at 100% 0%,rgba(255,74,31,.26),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(130% 90% at 100% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(130% 90% at 100% 0%,#000 20%,transparent 75%)}
.pricebox::after{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,138,101,.9),transparent)}
.pricebox .mono{color:rgba(255,255,255,.5)}
.pricebox .amt{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1;margin:12px 0 0;
  font-size:clamp(36px,4.2vw,52px);color:#fff;font-variant-numeric:tabular-nums}
.pricebox .amt .c{font-size:.44em;letter-spacing:-.02em;color:rgba(255,255,255,.55)}
/* a két fül egy sávban, a kijelölt mögött fehér pirula csúszik */
.ptabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:22px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--dline)}
.ptabs::before{content:'';position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ptabs[data-i="1"]::before{transform:translateX(100%)}
.ptabs button{position:relative;z-index:1;height:38px;border:0;border-radius:999px;background:none;padding:0 10px;
  font-size:13.5px;font-weight:700;color:rgba(255,255,255,.62);transition:color .3s;white-space:nowrap}
.ptabs button:hover{color:#fff}
.ptabs button[aria-selected="true"]{color:var(--ink)}
.ptabs button:focus-visible{outline-offset:1px;border-radius:999px}
.pz-stack{margin-top:20px;padding-top:20px;border-top:1px solid var(--dline)}
.pz{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pz+.pz{margin-top:16px}
.pz li{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:#fff}
.pz .x,.pz .v{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.pz .x{background:rgba(255,74,31,.16);color:var(--accent)}
.pz .v{background:rgba(0,200,83,.16);color:#2FD67A}
/* fülekkel a két lista egy cellában ül, így váltáskor nem ugrik a kártya */
.pricebox.tabbed .pz-stack{display:grid}
.pricebox.tabbed .pz{grid-area:1/1;margin:0;transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s}
.pricebox.tabbed .pz[inert]{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s,transform .15s,visibility 0s linear .15s}
.pricebox.tabbed .pz li{transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.pricebox.tabbed .pz:not([inert]) li:nth-child(2){transition-delay:.04s}
.pricebox.tabbed .pz:not([inert]) li:nth-child(3){transition-delay:.08s}
.pricebox.tabbed .pz:not([inert]) li:nth-child(4){transition-delay:.12s}
.pricebox.tabbed .pz[inert] li{opacity:0;transform:translateX(-6px)}
.pricebox .btn{width:100%;margin-top:24px}
.pricebox .btn svg{transition:transform .25s}
@media (hover:hover){.pricebox .btn:hover svg{transform:translateX(3px)}}
.pricebox .note{color:var(--dtext-2);font-size:12.5px;text-align:center;margin-top:14px}

/* Amit nem kapsz: a címen átfutó vonal maga az üzenet. Láthatóváláskor
   (.in) a vonal végighúzódik az ikonon és a címen, alul a pozitív párja. */
.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(30px,3.2vw,46px)}
.nots>*{min-width:0}
.not{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,#fff,var(--cool));padding:24px 26px 22px;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.not-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.not-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;color:var(--ink-70);
  background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(17,17,17,.06);transition:background .3s,border-color .3s}
.not-ic .cut{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1) .35s}
.not.in .not-ic .cut,.no-js .not-ic .cut{stroke-dashoffset:0}
/* a címke piros keretben, felkiáltójellel: ez az, amit NEM kapsz */
.not-tag{display:inline-flex;align-items:center;gap:7px;margin:0;padding:4px 10px 4px 5px;border-radius:999px;
  border:1px solid #F5B5B5;background:#FEF3F2;color:#B42318;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.not-tag .ex{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;flex:none;background:#D92D20;color:#fff;
  font-family:'Sora',sans-serif;font-size:10px;font-weight:800;letter-spacing:0;line-height:1}
.not .h{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.022em;margin:20px 0 9px;line-height:1.3}
.not .h span{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 58%/0 2px;
  transition:background-size .7s cubic-bezier(.22,1,.36,1) .55s}
.not.in .h span,.no-js .not .h span{background-size:100% 2px}
.not .p{font-size:14px;margin-bottom:18px}
.not-ok{display:flex;align-items:center;gap:10px;margin:auto 0 0;padding-top:16px;border-top:1px dashed var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink)}
.not-ok .v{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:11px;font-weight:800;
  background:#E6F8EE;color:#0A7C43}
@media (hover:hover){
  .not.in:hover{transform:translateY(-4px);box-shadow:var(--sh-card);border-color:rgba(255,74,31,.35)}
  .not:hover .not-ic{background:var(--accent-soft);border-color:rgba(255,74,31,.28)}
}

/* négy lépés. Asztali nézetben a számokat egy vonal köti össze, ami
   láthatóvá váláskor balról jobbra töltődik (.proc.in), és ahogy odaér,
   a lépés felgyullad, a kártya tetején a kis vizuál pedig lejátssza a
   saját pillanatát (.pc.in). A --i a lépés sorszáma, ebből jön a késleltetés.
   1100 px alatt a kártyák egyenként indulnak, késleltetés nélkül. */
.proc{--pg:clamp(14px,1.6vw,20px);list-style:none;margin:clamp(62px,5vw,80px) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pg)}
.proc>*{min-width:0}
/* a vonal az első kártya közepétől az utolsóéig fut, a számok a kártyák közepén */
.proc::before,.proc::after{content:'';position:absolute;top:-25px;height:2px;border-radius:2px;
  left:calc((100% - 3 * var(--pg)) / 8);right:calc((100% - 3 * var(--pg)) / 8)}
.proc::before{background:rgba(255,255,255,.1)}
.proc::after{background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s cubic-bezier(.4,.1,.4,1) .2s}
.proc.in::after,.no-js .proc::after{transform:none}
.pc{position:relative;display:flex}
.pc-n{position:absolute;top:-47px;left:calc(50% - 22px);z-index:2;width:44px;height:44px;border-radius:50%;background:var(--dark);
  border:1px solid var(--dline);display:grid;place-items:center;font-family:ui-monospace,monospace;font-size:12px;
  font-weight:700;color:var(--dtext);transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
.pc.in .pc-n,.no-js .pc-n{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 6px rgba(255,74,31,.14);
  transition-delay:calc(.2s + var(--i) * .48s)}
.pc-card{flex:1;display:flex;flex-direction:column;background:var(--dark-2);border:1px solid var(--dline);
  border-radius:var(--r-card);overflow:hidden;transition:border-color .3s,transform .35s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.pc-card:hover{border-color:rgba(255,255,255,.22);transform:translateY(-4px)}}
.pc-vis{position:relative;height:204px;display:grid;place-items:center;padding:14px;overflow:hidden;
  background:radial-gradient(110% 90% at 50% 0%,rgba(255,74,31,.11),transparent 62%),var(--dark-3);border-bottom:1px solid var(--dline)}
.pc-vis::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:22px 22px;-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent)}
.pc-b{padding:clamp(20px,2vw,24px);display:flex;flex-direction:column;flex:1}
.pc-b .d4{color:#fff}
.pc-b .p{margin-top:9px;font-size:14px;flex:1}
.pc-out{display:flex;flex-direction:column;gap:4px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--dline)}
.pc-out .k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dtext-2)}
.pc-out .v{font-size:14px;font-weight:700;color:#fff}

/* a négy vizuál közös alapja: kis fehér felület a sötét háttéren */
.pv{position:relative;z-index:1;width:min(100%,236px);background:#fff;color:var(--ink);border-radius:12px;padding:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.42)}
.pv-bar{display:flex;align-items:center;gap:4px;padding-bottom:8px;margin-bottom:5px;border-bottom:1px solid #F0EEEA}
.pv-bar>i{width:6px;height:6px;border-radius:50%;background:#DEDBD5;flex:none}
.pv-bar span{flex:1;min-width:0;margin-left:5px;font-family:ui-monospace,monospace;font-size:8.5px;color:var(--ink-50);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-bar b{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:var(--accent-deep);background:var(--accent-soft);border-radius:999px;padding:3px 7px}
.pv-bar b.g{color:#0A7C43;background:#E6F8EE;display:inline-flex;align-items:center;gap:5px}
.pv-bar b.g::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);animation:pl 2.2s infinite}
/* 01 ajánlat: a pontok sorban kipipálódnak */
.pv-doc{transform:rotate(-2deg)}
.pv-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;margin-bottom:3px;border-bottom:1px solid #F0EEEA}
.pv-h b{font-family:'Sora',sans-serif;font-size:12px;font-weight:800;letter-spacing:-.01em}
.pv-h span{font-family:ui-monospace,monospace;font-size:8.5px;color:var(--ink-30)}
.pv-ck{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:10.5px;font-weight:600;color:var(--ink-70)}
.pv-ck i{position:relative;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line);flex:none;
  transition:background .2s,border-color .2s}
.pv-ck i::after{content:'';position:absolute;left:3.2px;top:.6px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pv-ck:nth-child(3){--k:1}.pv-ck:nth-child(4){--k:2}
.pc.in .pv-ck i,.no-js .pv-ck i{background:var(--accent);border-color:var(--accent);
  transition-delay:calc(.5s + var(--i) * .48s + var(--k,0) * .2s)}
.pc.in .pv-ck i::after,.no-js .pv-ck i::after{transform:rotate(45deg) scale(1);transition-delay:calc(.5s + var(--i) * .48s + var(--k,0) * .2s)}
.pv-sum{display:flex;justify-content:space-between;align-items:center;margin-top:7px;background:#111;color:#fff;
  border-radius:8px;padding:7px 9px;font-size:10px;font-weight:600}
.pv-sum b{color:var(--accent)}
/* 02 terv: asztali és mobil vázlat, a végén rákerül a jóváhagyás */
.pv-board{display:grid;grid-template-columns:1fr 50px;gap:9px;align-items:end;padding:12px 12px 34px}
.pv-desk,.pv-phone{border:1px solid #ECEAE5;display:flex;flex-direction:column;gap:5px;min-width:0}
.pv-desk{border-radius:7px;padding:6px}
.pv-phone{border-radius:10px;padding:5px;height:88px;gap:4px}
.pv-board .nav{display:block;height:5px;width:52%;border-radius:3px;background:#E6E1D8}
.pv-board .hero{display:block;height:40px;border-radius:5px;background:linear-gradient(120deg,#FF4A1F,#FF9166)}
.pv-phone .hero{height:30px}
.pv-desk span{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pv-desk span i,.pv-phone>i:last-child{display:block;height:18px;border-radius:4px;background:#F1EEE8}
.pv-phone>i:last-child{flex:1}
.pv-sw{position:absolute;left:12px;bottom:11px;display:flex;gap:5px}
.pv-sw i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.pv-ok{position:absolute;right:10px;bottom:9px;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:#E6F8EE;color:#0A7C43;border-radius:999px;padding:4px 9px;opacity:0;transform:scale(.5) rotate(-8deg);
  transition:opacity .25s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.pc.in .pv-ok,.no-js .pv-ok{opacity:1;transform:rotate(-6deg);transition-delay:calc(.75s + var(--i) * .48s)}
/* 03 építés: élő link, a beállítások sávjai töltődnek */
.pv-pr{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:8px;padding:5px 0;font-size:10px;font-weight:600;color:var(--ink-70)}
.pv-pr i{display:block;height:6px;border-radius:3px;background:#F1EEE8;overflow:hidden}
.pv-pr em{display:block;height:100%;width:0;border-radius:3px;background:var(--ink);transition:width 1s cubic-bezier(.22,1,.36,1)}
.pv-pr:last-child em{background:var(--accent)}
.pv-pr:nth-child(3){--k:1}.pv-pr:nth-child(4){--k:2}
.pc.in .pv-pr em,.no-js .pv-pr em{width:var(--w);transition-delay:calc(.5s + var(--i) * .48s + var(--k,0) * .16s)}
/* 04 átadás: a bolt él, és beesik az első rendelés */
.pv-site{display:flex;flex-direction:column;gap:5px;margin-top:3px}
.pv-site .hero{display:block;height:44px;border-radius:6px;background:linear-gradient(120deg,#1E1E24,#3A3A45)}
.pv-site span{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pv-site span i{display:block;height:20px;border-radius:4px;background:#F1EEE8}
.pv-toast{position:absolute;z-index:2;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;
  background:var(--dark);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(16px) scale(.96);transition:opacity .35s,transform .55s cubic-bezier(.22,1,.36,1)}
.pc.in .pv-toast,.no-js .pv-toast{opacity:1;transform:none;transition-delay:calc(1s + var(--i) * .48s)}
.pv-toast .ic{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:800;flex:none}
.pv-toast b{display:block;font-size:10.5px;line-height:1.3;color:#fff}
.pv-toast em{display:block;font-style:normal;font-size:9.5px;line-height:1.3;color:var(--dtext)}

@media (max-width:1100px){
  .refs{grid-template-columns:1fr 1fr}
  .offer{grid-template-columns:1fr}
  .pricebox{position:static}
  .nots{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr 1fr;margin-top:clamp(24px,3vw,32px)}
  .proc::before,.proc::after{display:none}
  .pc{--i:0!important}
  .pc-n{top:14px;left:14px}
}
/* a lapozó pöttyök sötét háttéren */
.on-dark .c3-dots button::before{background:rgba(255,255,255,.22)}
.on-dark .c3-dots button[aria-current="true"]::before{background:#fff}
.proc-dots{display:none;margin-top:6px}
@media (max-width:720px){
  .refs{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  /* telefonon a négy lépés vízszintesen lapozható sáv, a következő kártya
     kilóg a szélen; a kártyák a saját láthatóvá válásukkor indulnak */
  .proc{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:24px calc(var(--pad-x) * -1) 0;padding:4px var(--pad-x) 10px;scroll-padding:0 var(--pad-x);scrollbar-width:none}
  .proc::-webkit-scrollbar{display:none}
  .pc{flex:0 0 86%;scroll-snap-align:start}
  /* a sorszám a vizuál bal felső sarkában ül, a vizuál kitér előle */
  .pc-vis{padding-left:64px}
  .proc-dots{display:flex}
  .not{padding:20px}
}

/* ============================================================
   12 VISSZA A TETEJÉRE
   Az oldal 70%-ánál jelenik meg (main.js), a gyűrű a görgetés
   állását mutatja. Mobilon a ragadó ajánlatkérő sáv fölött ül.
   ============================================================ */
.totop{position:fixed;right:20px;bottom:20px;z-index:95;width:52px;height:52px;padding:0;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(15,15,17,.9);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .4s,background-color .2s}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s,background-color .2s}
.totop>svg{grid-area:1/1}
.totop-ring{width:52px;height:52px;transform:rotate(-90deg);fill:none;stroke-width:2.5}
.totop-ring circle{stroke:rgba(255,255,255,.12)}
.totop-ring .val{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--off,100)}
.totop-arw{transition:transform .25s}
@media (hover:hover){
  .totop:hover{background:#000}
  .totop:hover .totop-arw{transform:translateY(-2px)}
}
@media (max-width:720px){
  .totop{right:12px;bottom:92px;width:46px;height:46px}
  .totop-ring{width:46px;height:46px}
}

/* ============================================================
   13 GYIK
   Az ajánlatkérő fölött, teljes szélességben: balra a cím (asztali
   nézetben görgetéskor ott marad), jobbra a kérdések.
   ============================================================ */
.fq{display:grid;grid-template-columns:.78fr 1.32fr;gap:clamp(28px,5vw,88px);align-items:start}
.fq-l{position:sticky;top:calc(var(--hdr-s) + 28px)}
.fq-cta{margin-top:26px}
.fq>*{min-width:0}

.faq{display:flex;flex-direction:column;gap:10px}
.qa{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:.2s}
.qa.open{border-color:var(--ink);box-shadow:var(--sh-card)}
.qa h3{margin:0;font:inherit}
.qa button{width:100%;display:flex;align-items:center;gap:16px;text-align:left;background:none;border:0;padding:17px 20px}
.qa .q{flex:1;font-family:'Sora',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.qa .pm{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:.25s;position:relative}
.qa .pm::before,.qa .pm::after{content:'';position:absolute;background:var(--ink);border-radius:2px;transition:.25s}
.qa .pm::before{width:11px;height:1.6px}
.qa .pm::after{width:1.6px;height:11px}
.qa.open .pm{background:var(--ink);border-color:var(--ink)}
.qa.open .pm::before,.qa.open .pm::after{background:#fff}
.qa.open .pm::after{transform:rotate(90deg);opacity:0}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.qa .a p{padding:0 20px 20px;margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-50)}

/* ============================================================
   14 AJÁNLATKÉRŐ ÉS LÁBLÉC
   ============================================================ */
.cta{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,4vw,60px);align-items:start}
.cta>*{min-width:0}
.form{background:#fff;border-radius:24px;padding:clamp(24px,2.6vw,34px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.form .intro{margin-top:10px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* ha az egyik címke két sorba törik, a mezők akkor is egy vonalban maradnak */
.fgrid.end{align-items:end}
.fgap{height:14px}
.field label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--cool);padding:0 15px;height:50px;
  font-family:inherit;font-size:15px;color:var(--ink);transition:.18s}
.field textarea{height:104px;padding:14px 15px;resize:vertical;line-height:1.5}
.field select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background:var(--cool) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.field select:has(option[value=""]:checked){color:var(--ink-30)}
.field select option{color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(255,74,31,.12)}
/* a legördülőnél csak a háttérszín váltson, különben eltűnne a nyíl */
.field select:focus{outline:none;border-color:var(--accent);background-color:#fff;box-shadow:0 0 0 3px rgba(255,74,31,.12)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-30)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);background:#FEF4F4}
.field .err{display:none;font-size:12px;color:var(--red);margin:6px 0 0;font-weight:600}
.field.bad .err{display:block}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:16px}
.consent input{width:19px;height:19px;accent-color:var(--accent);flex:none;margin-top:2px}
.consent label{font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-50);margin:0}
.consent a{text-decoration:underline}
.consent.bad label{color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .send{width:100%;margin-top:18px;position:relative;z-index:1}
.form .legal{text-align:center;margin-top:12px;font-size:12.5px;position:relative;z-index:2;color:var(--ink-50)}
.formmsg{text-align:center;margin-top:10px;font-weight:600}
.formmsg[hidden]{display:none}
.formmsg.ok{color:#0A7C43}
.formmsg.err{color:var(--red)}
.formmsg.warn{color:#B45309}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.sent{text-align:center;padding:18px 4px 6px}
.sent .ic{width:56px;height:56px;border-radius:50%;background:#E6F8EE;color:#0A7C43;display:grid;place-items:center;
  margin:0 auto 18px;font-size:24px;font-weight:800}
/* Az ár a konverziós ponton is ott van, hogy ne kelljen visszagörgetni érte.
   Az árkártya fényeit kapja: akcens derengés a bal felső sarokban, halvány
   rács, narancs perem és egy fénylő felső él, így kiválik a sötét panelből.
   A belső sáv szélessége dönti el, hogy az ár és a szöveg egymás mellett
   vagy egymás alatt áll (konténer lekérdezés), nem a képernyőé. */
.ctaprice{position:relative;isolation:isolate;overflow:hidden;margin-top:28px;container-type:inline-size;
  padding:clamp(20px,2vw,26px) clamp(20px,2.2vw,28px);border-radius:var(--r-card);
  background:linear-gradient(135deg,rgba(255,74,31,.13),rgba(255,74,31,.03) 48%,rgba(255,255,255,.02)),var(--dark-2);
  border:1px solid rgba(255,74,31,.34);
  box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 5px rgba(255,74,31,.05),inset 0 1px 0 rgba(255,255,255,.05)}
.ctaprice::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(300px 200px at 0% 0%,rgba(255,74,31,.22),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(120% 110% at 0% 0%,#000 15%,transparent 70%);mask-image:radial-gradient(120% 110% at 0% 0%,#000 15%,transparent 70%)}
.ctaprice::after{content:'';position:absolute;left:8%;right:30%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,138,101,.95),transparent)}
.ctaprice-in{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px)}
.ctaprice .amtb{flex:none}
.ctaprice .mono{display:flex;align-items:center;gap:8px;color:#FF9A7A}
.ctaprice .mono::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,74,31,.2);flex:none}
.ctaprice .amt{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1;margin:12px 0 0;
  font-size:clamp(32px,3.4vw,44px);color:#fff;font-variant-numeric:tabular-nums}
.ctaprice .amt .c{font-size:.46em;letter-spacing:-.01em;color:rgba(255,255,255,.55)}
.ctaprice .tx{flex:1;min-width:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.7);margin:0;
  padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--dline)}
@container (max-width:500px){
  .ctaprice-in{flex-direction:column;align-items:stretch;gap:16px}
  .ctaprice .tx{padding:16px 0 0;border-left:0;border-top:1px solid var(--dline)}
}

.cta-steps{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.cta-steps .r{display:flex;gap:15px;align-items:flex-start}
.cta-steps .r .n{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--dline);
  display:grid;place-items:center;font-family:ui-monospace,monospace;font-size:11px;color:#fff;flex:none}
.cta-steps .t{font-size:15px;font-weight:700;color:#fff}
.cta-steps .p{color:var(--dtext);font-size:14px}

/* Az ajánlatkérő és a lábléc is sötét, egymás után egybefolynának. A
   lábléc elé ugyanaz a papír színű rés kerül, ami a lap szélein van. */
footer.panel{margin-top:var(--gut)}
.ftr{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px;padding-bottom:30px;border-bottom:1px solid var(--dline)}
/* oszlopcímek: ugyanaz a mono betű, de nagyobb és fehér, mind a háromnál egyforma */
.ftr h2{font-family:ui-monospace,monospace;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 14px;font-weight:400}
.ftr a{display:block;color:rgba(255,255,255,.75);font-size:14.5px;padding:5px 0}
.ftr a:hover{color:#fff}
/* a lábléc gombja (Süti beállítások) ugyanúgy néz ki, mint a linkek */
.ftr .ftr-lnk{display:block;padding:5px 0;border:0;background:none;text-align:left;color:rgba(255,255,255,.75);font-size:14.5px}
.ftr .ftr-lnk:hover{color:#fff}
.ftr .about{color:var(--dtext);margin-top:14px;max-width:46ch}
/* Kövess minket: márkajeles gomb, új lapon nyílik */
.ftr .soc{display:inline-flex;align-items:center;gap:10px;height:46px;margin-top:4px;padding:0 20px 0 6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);border:1px solid var(--dline);color:#fff;font-size:14.5px;font-weight:600;
  transition:background-color .2s,border-color .2s}
.ftr .soc:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.ftr .soc-ic{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.ftr .soc-ic svg{width:34px;height:34px;color:#1877F2;display:block}
.ftr-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:22px;flex-wrap:wrap}
.ftr-bot .mono{color:#fff}
.ftr-bot .hrt{display:inline-block;width:12px;height:12px;margin:0 2px -1px;color:#FF3B47;vertical-align:baseline}

.sticky{position:fixed;left:10px;right:10px;bottom:10px;z-index:90;display:none;align-items:center;gap:12px;
  background:rgba(15,15,17,.97);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:12px 12px 12px 18px;
  box-shadow:0 18px 40px rgba(0,0,0,.4);transform:translateY(140%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sticky.on{transform:none}
.sticky .t{flex:1;min-width:0}
.sticky .t b{display:block;font-size:13.5px;color:#fff;font-weight:700}
.sticky .t span{font-size:10.5px;color:rgba(255,255,255,.45);letter-spacing:.06em;text-transform:uppercase}
.sticky .btn{flex:none;box-shadow:none}

@media (max-width:1100px){
  .fq{grid-template-columns:1fr;gap:28px}
  .fq-l{position:static}
  .cta{grid-template-columns:1fr}
  .ftr{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:720px){
  .qa .q{font-size:14.5px}
  .qa button{padding:15px 16px;gap:12px}
  .qa .a p{padding:0 16px 16px;font-size:14px}
  .faq{gap:8px}
  .fgrid{grid-template-columns:1fr}
  .form{padding:22px 18px}
  .cta-steps{gap:14px;margin-top:22px}
  .ftr{grid-template-columns:1fr}
  .sticky{display:flex}
}

/* ============================================================
   15 SEGÉDOLDALAK (adatkezelés, 404)
   ============================================================ */
.doc{max-width:780px;margin:0 auto}
.doc-hero .inner{padding-top:calc(var(--hdr-h) + clamp(28px,3.4vw,52px));padding-bottom:clamp(36px,4vw,56px)}
.doc h2{font-family:'Sora',sans-serif;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;margin:38px 0 12px}
.doc h3{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em;margin:24px 0 8px}
.doc p,.doc li{font-size:15.5px;line-height:1.7;color:var(--ink-50);margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:20px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--ink)}
.doc table{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);font-weight:800}
.doc td{color:var(--ink-50)}
/* rövid összefoglaló a tájékoztató elején */
.doc .tldr{margin:22px 0 6px;padding:20px 22px 6px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--cool)}
.doc .tldr h2{margin:0 0 10px;font-size:18px}
@media (max-width:720px){
  .doc table{font-size:14px}
  .doc th,.doc td{padding:10px 8px}
  .doc th:first-child,.doc td:first-child{padding-left:0}
  .doc .tldr{padding:18px 16px 4px}
}
.doc .back{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font-weight:600;font-size:14.5px}
.err-page{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:min(70vh,620px);gap:18px;padding:40px 20px}
.err-page .code{font-family:'Sora',sans-serif;font-size:clamp(64px,12vw,120px);font-weight:800;letter-spacing:-.04em;
  color:var(--accent);line-height:1;margin:0}

/* ============================================================
   16 SÜTI ÉRTESÍTŐ (consent.js)
   Kis kártya a bal alsó sarokban, telefonon alul teljes szélességben.
   Nem takar ki semmit, és nem kell rákattintani a továbbhaladáshoz.
   A két gomb szándékosan egyforma: az elutasítás ugyanolyan könnyű és
   ugyanolyan feltűnő, mint az elfogadás. Amíg nyitva van, telefonon a
   ragadó ajánlatkérő sáv és a vissza gomb nem jön elő alatta.
   ============================================================ */
.ck{position:fixed;left:20px;bottom:20px;z-index:98;width:min(380px,calc(100vw - 40px));
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;
  padding:18px 18px 16px;border-radius:18px;color:#fff;
  background:rgba(15,15,17,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 48px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.ck.on{opacity:1;transform:none}
.ck-t{display:flex;align-items:center;gap:9px;margin:0;font-family:Sora,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ck-t .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.ck-d{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--dtext)}
.ck-d a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:2px}
.ck-d a:hover{color:#fff;text-decoration-color:#fff}
.ck-now{margin:8px 0 0;font-size:12px;color:var(--dtext-2)}
.ck-b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ck-btn{height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;font-size:13.5px;font-weight:700;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.ck-btn:active{transform:scale(.985)}
@media (hover:hover){
  .ck-btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
}
/* Beállítások réteg: csak akkor van, ha a Meta Pixel is be van kötve (consent.js) */
.ck-set{display:grid;gap:8px;margin-top:12px}
.ck-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ck-txt{flex:1;min-width:0}
.ck-txt b{display:block;font-size:13px;color:#fff}
.ck-txt span{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--dtext)}
.ck-fix{flex:none;margin-top:1px;font-size:11px;color:var(--dtext-2);white-space:nowrap}
.ck-tg{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:38px;height:22px;margin:1px 0 0;
  border-radius:var(--r-pill);background:rgba(255,255,255,.18);cursor:pointer;transition:background-color .2s}
.ck-tg::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.ck-tg:checked{background:var(--accent)}
.ck-tg:checked::after{transform:translateX(16px)}
.ck-more{display:block;margin:10px auto 0;padding:4px 6px;border:0;background:none;font-size:12.5px;font-weight:600;
  color:var(--dtext);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:2px}
.ck-more:hover{color:#fff}
html.ck-open .sticky{transform:translateY(140%)}
@media (max-width:720px){
  .ck{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;padding:16px 16px 14px;
    max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  html.ck-open .totop{opacity:0;visibility:hidden}
}