/* ==========================================================================
   FelhőTér v0.2.0 – design rendszer
   Mobil-first, rem-alapú méretezés: nagy (1920px+ / 4K) kijelzőn a gyökér
   betűméret skálázódik, így az egész felület arányosan nő.
   ========================================================================== */

/* ---------- Fontok (self-hosted, GDPR-barát, nincs külső kérés) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokenek ---------- */
:root{
  /* színek – az eredeti FelhőTér paletta finomhangolva */
  --bg:#f6fbfc;
  --surface:#fff;
  --surface-2:#eef8fa;
  --surface-3:#e3f3f6;
  --ink:#0e2530;
  --ink-2:#1d3c47;
  --muted:#557079;
  --muted-2:#7c949b;
  --line:#d8e8ec;
  --line-2:#e7f1f3;
  --brand:#087e91;
  --brand-dark:#075c6b;
  --brand-2:#0aa7a4;
  --mint:#53d0ca;
  --mint-2:#7de4df;
  --accent:#dff7f4;
  --success:#08775f;
  --success-bg:#e3f8f1;
  --danger:#b4232f;
  --danger-bg:#fdecee;
  --amber:#e3ac43;
  --night:#0b1f27;
  --night-2:#12303a;

  --grad-brand:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  --grad-text:linear-gradient(100deg,#075c6b 0%,#087e91 35%,#0aa7a4 100%);

  --shadow-xs:0 1px 2px rgba(14,37,48,.06);
  --shadow-sm:0 6px 18px -6px rgba(17,72,86,.14),0 2px 4px rgba(17,72,86,.04);
  --shadow:0 24px 60px -20px rgba(17,72,86,.24),0 8px 20px -8px rgba(17,72,86,.08);
  --shadow-lg:0 48px 100px -30px rgba(12,55,68,.35),0 18px 40px -18px rgba(12,55,68,.18);
  --ring:0 0 0 4px rgba(10,167,164,.22);

  --r-xs:.5rem;
  --r-sm:.75rem;
  --r-md:1rem;
  --r-lg:1.375rem;
  --r-xl:1.75rem;
  --r-2xl:2.25rem;

  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Manrope","Inter",ui-sans-serif,system-ui,sans-serif;

  --shell:80rem;            /* 1280px alapon, 4K-n a rem skálázással nő */
  --gutter:1rem;
  --header-h:4.25rem;
  --section-y:clamp(4rem,9vw,7.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / alap ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);overflow-x:clip}
body{margin:0;min-height:100vh;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
body.nav-open{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
[role="list"]{list-style:none}
main:focus{outline:none}
:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px;border-radius:.375rem}
::selection{background:rgba(10,167,164,.22)}
[hidden]{display:none!important}

.shell{width:min(100% - var(--gutter)*2,var(--shell));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:.75rem;top:-4rem;z-index:1000;background:var(--ink);color:#fff;padding:.625rem 1rem;border-radius:.75rem;font-weight:700;transition:top .2s}
.skip-link:focus{top:.75rem}

.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Tipográfiai segédek ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem .375rem .625rem;margin-bottom:1.125rem;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--line);color:var(--brand-dark);font-size:.75rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow-xs)}
.eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--grad-brand);box-shadow:0 0 0 3px rgba(10,167,164,.18)}
.eyebrow.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--mint-2);box-shadow:none}
.text-gradient{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1.0625rem,.95rem + .6vw,1.3rem);color:var(--muted);line-height:1.6}
.muted{color:var(--muted)}
.center{text-align:center;margin-inline:auto}

.text-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:750;color:var(--brand-dark);padding:.5rem 0;transition:gap .2s var(--ease),color .2s}
.text-link .icon{width:1.1em;height:1.1em;transition:transform .2s var(--ease)}
.text-link:hover{color:var(--brand)}
.text-link:hover .icon{transform:translateX(3px)}

/* ---------- Gombok ---------- */
.button{--btn-bg:var(--surface);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.875rem;padding:.6875rem 1.125rem;border-radius:.875rem;border:1px solid transparent;font-weight:750;font-size:.9375rem;line-height:1.2;letter-spacing:-.005em;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.button .icon{width:1.1em;height:1.1em}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.button-primary{background:var(--grad-brand);color:#fff;box-shadow:0 10px 24px -8px rgba(8,126,145,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.button-primary:hover{box-shadow:0 16px 32px -10px rgba(8,126,145,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.button-secondary{background:var(--surface);color:var(--brand-dark);border-color:var(--line);box-shadow:var(--shadow-xs)}
.button-secondary:hover{border-color:rgba(8,126,145,.4);box-shadow:var(--shadow-sm)}
.button-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.button-ghost:hover{background:var(--surface);border-color:rgba(8,126,145,.35)}
.button-dark{background:var(--ink);color:#fff}
.button-dark:hover{background:var(--ink-2)}
.button-light{background:#fff;color:var(--ink);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.button-outline-light{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.04)}
.button-outline-light:hover{background:rgba(255,255,255,.1)}
.button-large{min-height:3.375rem;padding:.875rem 1.5rem;border-radius:1rem;font-size:1rem}
.button.full{width:100%}

.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:999px;font-size:.6875rem;font-weight:800;letter-spacing:.02em;background:var(--success-bg);color:var(--success);white-space:nowrap}
.badge-brand{background:var(--accent);color:var(--brand-dark)}
.badge-solid{background:var(--grad-brand);color:#fff}

/* ==========================================================================
   Fejléc és navigáció
   ========================================================================== */
/* A blur egy pszeudo-elemen van: ha magán a fejlécen lenne, a backdrop-filter
   a fixed pozíciójú mobil menü befoglaló blokkjává tenné a fejlécet. */
.site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(246,251,252,.78);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);transition:background-color .25s}
.site-header.is-scrolled{border-bottom-color:rgba(216,232,236,.9);box-shadow:0 10px 30px -18px rgba(17,72,86,.25)}
.site-header.is-scrolled::before,.nav-open .site-header::before{background:rgba(246,251,252,.94)}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;white-space:nowrap;border-radius:.75rem}
.brand-mark{width:2.375rem;height:2.375rem;display:grid;place-items:center;color:var(--brand)}
.brand-mark svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(8,126,145,.25))}
.brand-word{font-size:1.375rem;color:var(--ink)}
.brand-word span{color:var(--brand)}

.nav-toggle{position:relative;z-index:2;width:2.875rem;height:2.875rem;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:.875rem;box-shadow:var(--shadow-xs);-webkit-tap-highlight-color:transparent}
.nav-toggle-bars{position:relative;width:1.25rem;height:.875rem;display:block}
.nav-toggle-bars span{position:absolute;left:0;height:2px;width:100%;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s,top .3s var(--ease),width .3s var(--ease)}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6px;width:75%}
.nav-toggle-bars span:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:6px;transform:rotate(-45deg)}

/* Mobil: jobbról beúszó panel */
.main-nav{position:fixed;top:var(--header-h);right:0;bottom:0;z-index:99;width:min(100%,26rem);background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s;display:flex;flex-direction:column}
.main-nav.is-open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
.nav-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:1rem}
.nav-list{display:flex;flex-direction:column;gap:.125rem}
.nav-link{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.875rem .75rem;border:0;background:none;border-radius:.75rem;font-weight:700;font-size:1.0625rem;color:var(--ink-2);text-align:left;transition:background-color .2s,color .2s}
.nav-link:hover{background:var(--surface-2)}
.nav-link.is-active{color:var(--brand)}
.nav-caret{transition:transform .25s var(--ease);color:var(--muted-2)}
.nav-trigger[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
.nav-panel{display:none;padding:.25rem 0 .75rem}
.has-menu.is-open .nav-panel{display:block}
.nav-panel-links{display:grid;gap:.25rem}
.nav-card{display:flex;align-items:flex-start;gap:.75rem;padding:.625rem .75rem;border-radius:.875rem;transition:background-color .2s}
.nav-card:hover,.nav-card.is-active{background:var(--surface)}
.nav-card strong{display:block;font-size:.9375rem;font-weight:700;line-height:1.3}
.nav-card small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.4;margin-top:.125rem}
.nav-card-icon{flex:none;width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:.75rem;background:var(--surface-2);color:var(--brand)}
.nav-card-icon .icon{width:1.125rem;height:1.125rem}
.nav-card.is-active strong{color:var(--brand)}
.nav-promo{display:none}
.nav-actions{display:grid;gap:.625rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.nav-actions .button{width:100%;min-height:3.125rem}
.nav-backdrop{position:fixed;inset:var(--header-h) 0 0;z-index:98;background:rgba(11,31,39,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade-in .25s ease}

/* ==========================================================================
   Szekciók – közös elemek
   ========================================================================== */
.section{position:relative;padding-block:var(--section-y)}
.section-tint{background:linear-gradient(180deg,#edf8fa 0%,var(--bg) 100%)}
.section-white{background:var(--surface);border-block:1px solid var(--line-2)}
.section-tight{padding-block:calc(var(--section-y) * .55)}
.section-head{max-width:48rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.section-head.center{text-align:center}
.section-head h2{font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem);margin-bottom:1rem}
.section-head p{color:var(--muted);font-size:clamp(1rem,.95rem + .35vw,1.1875rem)}
.section-head-row{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.section-head-row .section-head{margin-bottom:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.icon-tile{width:3rem;height:3rem;display:grid;place-items:center;border-radius:.875rem;background:linear-gradient(145deg,var(--surface-2),var(--accent));color:var(--brand);box-shadow:inset 0 0 0 1px rgba(8,126,145,.08)}
.icon-tile .icon{width:1.375rem;height:1.375rem}
.icon-tile.solid{background:var(--grad-brand);color:#fff;box-shadow:0 10px 20px -8px rgba(8,126,145,.55)}

.check-list{list-style:none;padding:0;display:grid;gap:.75rem}
.check-list li{display:flex;gap:.75rem;align-items:flex-start;font-weight:600;color:var(--ink-2)}
.check-list li>.icon{margin-top:.125rem;padding:.2rem;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--accent);color:var(--brand);stroke-width:3}

/* ==========================================================================
   Kezdőlap – hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(8,126,145,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(8,126,145,.07) 1px,transparent 1px);background-size:3rem 3rem;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 20%,transparent 75%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.blob-1{width:32rem;height:32rem;right:-10rem;top:-8rem;background:radial-gradient(circle,rgba(10,167,164,.45),transparent 65%)}
.blob-2{width:26rem;height:26rem;left:-10rem;bottom:-8rem;background:radial-gradient(circle,rgba(83,208,202,.35),transparent 65%)}
.blob-3{width:20rem;height:20rem;right:30%;bottom:10%;background:radial-gradient(circle,rgba(8,126,145,.2),transparent 65%)}

.hero-grid{display:grid;gap:clamp(3rem,6vw,4.5rem);align-items:center}
.hero-copy h1{font-size:clamp(2.75rem,1.6rem + 6vw,5.75rem);line-height:.98;letter-spacing:-.05em;margin-bottom:1.5rem}
.hero-copy h1 .text-gradient{display:inline-block;padding-bottom:.06em}
.hero-text{max-width:36rem;margin-bottom:2rem}
.hero-actions{display:flex;flex-direction:column;gap:.75rem;align-items:stretch}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:2rem;color:var(--ink-2);font-weight:600;font-size:.9375rem}
.hero-points li{display:flex;align-items:center;gap:.5rem}
.hero-points .icon{color:var(--brand-2);stroke-width:2.6;width:1.1em;height:1.1em}

/* App-mockup */
.hero-visual{position:relative;padding:1rem 0 2.5rem}
.app-window{position:relative;z-index:2;background:rgba(255,255,255,.92);border:1px solid rgba(216,232,236,.95);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.app-bar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fbfefe,#f4fafb)}
.app-dots{display:flex;gap:.375rem}
.app-dots i{width:.625rem;height:.625rem;border-radius:50%;background:#dbe7ea}
.app-dots i:nth-child(1){background:#f3a0a0}.app-dots i:nth-child(2){background:#f1d38a}.app-dots i:nth-child(3){background:#9adfc6}
.app-url{flex:1;display:flex;align-items:center;gap:.375rem;max-width:16rem;margin-inline:auto;padding:.3rem .75rem;border-radius:.5rem;background:var(--surface-2);color:var(--muted);font-size:.6875rem;font-weight:600}
.app-url .icon{width:.75rem;height:.75rem;color:var(--success)}
.app-body{display:grid;grid-template-columns:1fr;min-height:22rem}
.app-side{display:none;padding:1rem .75rem;border-right:1px solid var(--line-2);background:#fafdfd}
.app-side-nav{display:grid;gap:.125rem;margin-bottom:1.25rem}
.app-side-nav span{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:.625rem;font-size:.75rem;font-weight:650;color:var(--muted)}
.app-side-nav span .icon{width:.95rem;height:.95rem}
.app-side-nav span.is-active{background:var(--accent);color:var(--brand-dark)}
.app-side-meter{padding:.75rem;border-radius:.75rem;background:var(--surface);border:1px solid var(--line-2);font-size:.6875rem;color:var(--muted);font-weight:600}
.app-side-meter strong{display:block;color:var(--ink);font-size:.8125rem}
.meter{height:.4375rem;background:#e5eff1;border-radius:99px;overflow:hidden;margin-top:.5rem}
.meter>span{display:block;height:100%;width:var(--w,37%);background:var(--grad-brand);border-radius:inherit;transform-origin:left;animation:meter-in 1.4s var(--ease) both .3s}
.app-main{padding:1rem;min-width:0;container-type:inline-size}
.app-folders .app-folder:nth-child(3){display:none}
@container (min-width:25rem){.app-folders{grid-template-columns:repeat(3,1fr)}.app-folders .app-folder:nth-child(3){display:block}}
.app-toolbar{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}
.app-toolbar h3{font-size:1rem;letter-spacing:-.02em;margin-right:auto}
.app-search{display:none;align-items:center;gap:.375rem;padding:.4rem .625rem;border:1px solid var(--line);border-radius:.625rem;font-size:.6875rem;color:var(--muted-2);min-width:8rem}
.app-search .icon{width:.8rem;height:.8rem}
.app-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.45rem .75rem;border-radius:.625rem;background:var(--ink);color:#fff;font-size:.6875rem;font-weight:700}
.app-btn .icon{width:.8rem;height:.8rem;color:var(--mint-2)}
.app-folders{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem}
.app-folder{padding:.75rem;border:1px solid var(--line-2);border-radius:.75rem;background:var(--surface);font-size:.6875rem;color:var(--muted);font-weight:600;transition:transform .2s,box-shadow .2s}
.app-folder .icon{width:1.25rem;height:1.25rem;margin-bottom:.375rem;color:var(--c,var(--amber));fill:color-mix(in srgb,var(--c,var(--amber)) 22%,transparent)}
.app-folder strong{display:block;color:var(--ink);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-folder{min-width:0}
.app-files{display:grid;gap:.375rem}
.app-file{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.625rem;padding:.5rem .625rem;border-radius:.75rem;border:1px solid var(--line-2);font-size:.6875rem;color:var(--muted)}
.app-file strong{display:block;color:var(--ink);font-size:.78rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-file-ic{width:2rem;height:2rem;border-radius:.5rem;display:grid;place-items:center;font-size:.5625rem;font-weight:850;letter-spacing:.02em;color:var(--brand-dark);background:var(--surface-2)}
.app-file-ic.pdf{background:#fdecee;color:#b4232f}
.app-file-ic.img{background:#e8f4ff;color:#2463a6}
.app-file-ic.doc{background:#eaf0ff;color:#3b4fb5}
.app-file.is-uploading{background:linear-gradient(90deg,var(--accent),transparent);border-color:rgba(10,167,164,.25)}
.upload-progress{grid-column:2/4;height:.3125rem;background:rgba(8,126,145,.12);border-radius:99px;overflow:hidden;margin-top:.25rem}
.upload-progress span{display:block;height:100%;width:0;background:var(--grad-brand);border-radius:inherit;animation:upload 4.5s var(--ease) infinite}

.float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem .625rem .625rem;border-radius:1rem;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.75rem;line-height:1.35;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.float-card strong{display:block;font-size:.8125rem;color:var(--ink)}
.float-card small{display:block;color:var(--muted)}
.float-card .icon-tile{width:2.25rem;height:2.25rem;border-radius:.75rem}
.float-card .icon-tile .icon{width:1.1rem;height:1.1rem}
.float-share{left:-.25rem;bottom:0;animation:float 7s ease-in-out infinite}
.float-inbox{right:-.25rem;top:-.25rem;animation:float 8s ease-in-out infinite reverse}

/* Bizalmi sáv */
.stats{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(3rem,6vw,4.5rem);border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}
.stats>div{padding:1.125rem 1.25rem;border-color:var(--line);border-style:solid;border-width:0}
.stats>div:nth-child(odd){border-right-width:1px}
.stats>div:nth-child(-n+2){border-bottom-width:1px}
.stats strong{display:block;font-family:var(--font-display);font-size:clamp(1.125rem,1rem + .6vw,1.5rem);letter-spacing:-.03em;line-height:1.2}
.stats span{display:block;color:var(--muted);font-size:.8125rem;margin-top:.125rem}

/* Futó szalag (felhasználási területek) */
.marquee{position:relative;overflow:hidden;padding-block:1.25rem;border-block:1px solid var(--line-2);background:var(--surface);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:.75rem;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:650;font-size:.875rem;color:var(--ink-2);white-space:nowrap}
.marquee-item .icon{color:var(--brand);width:1rem;height:1rem}

/* Fizetési módok */
.mode-grid{display:grid;gap:1rem}
.mode-card{position:relative;display:flex;flex-direction:column;padding:1.75rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.mode-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(8,126,145,.3)}
.mode-card h3{font-size:1.375rem;margin:1.25rem 0 .5rem}
.mode-card p{color:var(--muted);margin-bottom:1.5rem}
.mode-card .text-link{margin-top:auto}
.mode-card .badge{position:absolute;top:1.5rem;right:1.5rem}
.mode-card.is-featured{background:linear-gradient(160deg,var(--night) 0%,#0e3440 100%);border-color:transparent;color:#fff;box-shadow:var(--shadow-lg)}
.mode-card.is-featured h3{color:#fff}
.mode-card.is-featured p{color:#b3c9cf}
.mode-card.is-featured .text-link{color:var(--mint-2)}
.mode-card.is-featured .icon-tile{background:rgba(255,255,255,.08);color:var(--mint-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mode-card.is-featured .badge{background:rgba(125,228,223,.15);color:var(--mint-2)}
.mode-card .mode-meta{display:flex;align-items:baseline;gap:.375rem;margin-bottom:1rem;font-size:.875rem;color:var(--muted)}
.mode-card .mode-meta strong{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);letter-spacing:-.03em}
.mode-card.is-featured .mode-meta{color:#9fb8bf}
.mode-card.is-featured .mode-meta strong{color:#fff}

/* Bento funkciórács */
.bento{display:grid;gap:1rem}
.bento-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:1.75rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.bento-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.bento-card h3{font-size:1.25rem;margin:1.125rem 0 .5rem}
.bento-card p{color:var(--muted);font-size:.9375rem}
.bento-visual{margin-top:1.5rem;flex:1;display:flex;align-items:flex-end}
.bento-card.is-dark{background:linear-gradient(160deg,var(--night),#0f3743);border-color:transparent;color:#fff}
.bento-card.is-dark h3{color:#fff}
.bento-card.is-dark p{color:#adc4ca}
.bento-card.is-dark .icon-tile{background:rgba(255,255,255,.08);color:var(--mint-2)}
.bento-card.is-brand{background:var(--grad-brand);border-color:transparent;color:#fff}
.bento-card.is-brand h3{color:#fff}
.bento-card.is-brand p{color:rgba(255,255,255,.85)}
.bento-card.is-brand .icon-tile{background:rgba(255,255,255,.16);color:#fff}

.mini-drop{width:100%;border:2px dashed #bcd9df;border-radius:1rem;padding:1.5rem 1rem;text-align:center;background:linear-gradient(180deg,#f9fcfd,var(--surface-2));color:var(--muted);font-size:.8125rem;font-weight:600}
.mini-drop .icon{width:2rem;height:2rem;margin:0 auto .5rem;color:var(--brand);animation:bob 2.6s ease-in-out infinite}
.mini-drop strong{display:block;color:var(--ink);font-size:.9375rem}
.mini-link{width:100%;display:grid;gap:.5rem}
.mini-link-url{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;border-radius:.75rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#d9eef1;overflow:hidden;white-space:nowrap}
.mini-link-url .icon{color:var(--mint-2);width:.95rem;height:.95rem}
.mini-link-url span{overflow:hidden;text-overflow:ellipsis}
.mini-chips{display:flex;flex-wrap:wrap;gap:.375rem}
.mini-chips span{padding:.3rem .625rem;border-radius:999px;font-size:.6875rem;font-weight:700;background:rgba(255,255,255,.08);color:#cfe3e7;border:1px solid rgba(255,255,255,.1)}
.mini-chips span.on{background:var(--mint-2);color:var(--night);border-color:transparent}
.ring{--p:37;position:relative;width:7.5rem;height:7.5rem;border-radius:50%;background:conic-gradient(var(--brand-2) calc(var(--p)*1%),#e3eff2 0);display:grid;place-items:center;margin-inline:auto}
.ring::before{content:"";position:absolute;inset:.75rem;border-radius:50%;background:var(--surface)}
.ring span{position:relative;font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;text-align:center;line-height:1.1}
.ring small{display:block;font-family:var(--font-body);font-size:.6875rem;color:var(--muted);font-weight:600;letter-spacing:0}
.mini-search{width:100%;display:grid;gap:.375rem}
.mini-search-box{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;border-radius:.75rem;border:1px solid var(--line);background:var(--surface);font-size:.8125rem;color:var(--ink);font-weight:600;box-shadow:var(--ring)}
.mini-search-box .icon{color:var(--brand);width:1rem;height:1rem}
.mini-search-box i{width:1px;height:1rem;background:var(--brand);animation:caret 1s steps(1) infinite}
.mini-search-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.625rem;font-size:.75rem;color:var(--muted);background:var(--surface-2)}
.mini-search-row .icon{width:.95rem;height:.95rem;color:var(--amber)}
.mini-search-row b{color:var(--ink);font-weight:650}
.mini-plans{display:flex;gap:.375rem;flex-wrap:wrap}
.mini-plans span{padding:.4rem .7rem;border-radius:.625rem;font-size:.75rem;font-weight:750;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18)}
.mini-plans span.on{background:#fff;color:var(--brand-dark)}
.mini-inbox{width:100%;display:grid;gap:.5rem}
.mini-inbox-row{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;border-radius:.75rem;border:1px solid var(--line-2);background:var(--surface);font-size:.75rem;color:var(--muted)}
.mini-inbox-row b{display:block;color:var(--ink);font-size:.8125rem;font-weight:650}
.mini-inbox-row .badge{margin-left:auto}

/* Lépések */
.steps{list-style:none;display:grid;gap:1rem;counter-reset:step}
.step{position:relative;padding:1.75rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line)}
.step-num{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.875rem;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1rem;margin-bottom:1.125rem}
.step h3{font-size:1.1875rem;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.9375rem}

/* Split szekció */
.split{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.split h2{font-size:clamp(2rem,1.3rem + 3vw,3.25rem);margin-bottom:1.125rem}
.split .lead{margin-bottom:1.75rem}
.split .check-list{margin-bottom:2rem}

.panel{position:relative;padding:1.25rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;font-family:var(--font-display);font-weight:800}
.folder-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.625rem}
.folder{padding:1rem;border:1px solid var(--line-2);border-radius:1rem;transition:border-color .2s,transform .2s}
.folder:hover{border-color:rgba(8,126,145,.3);transform:translateY(-2px)}
.folder .icon{width:1.75rem;height:1.75rem;color:var(--c,var(--amber));fill:color-mix(in srgb,var(--c,var(--amber)) 22%,transparent);margin-bottom:.5rem}
.folder strong{display:block;font-size:.9375rem}
.folder small{color:var(--muted);font-size:.78rem}
.drop-zone{margin-top:.75rem;padding:1.5rem 1rem;border:2px dashed #c3dbe0;border-radius:1rem;text-align:center;background:#f9fcfd;color:var(--muted);font-size:.8125rem}
.drop-zone strong{display:block;color:var(--ink);font-size:.9375rem}

/* Sötét biztonsági sáv */
.dark-band{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 80% 0%,rgba(10,167,164,.25),transparent 60%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(8,126,145,.25),transparent 60%),var(--night);color:#e7f2f4;isolation:isolate}
.dark-band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:1.5rem 1.5rem;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band .section-head p,.dark-band .lead{color:#a9c1c7}
.principles{display:grid;gap:1rem}
.principle{padding:1.5rem;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:background-color .3s,border-color .3s}
.principle:hover{background:rgba(255,255,255,.07);border-color:rgba(125,228,223,.3)}
.principle-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.principle-num{font-family:var(--font-display);font-weight:800;color:rgba(255,255,255,.25);font-size:.875rem;letter-spacing:.05em}
.principle .icon-tile{background:rgba(125,228,223,.1);color:var(--mint-2);box-shadow:inset 0 0 0 1px rgba(125,228,223,.2)}
.principle h3{font-size:1.1875rem;margin-bottom:.5rem}
.principle p{color:#a9c1c7;font-size:.9375rem}

/* Árválasztó (kezdőlap) */
.size-picker{padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.size-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.75rem}
.size-chip{padding:.75rem .5rem;border-radius:.875rem;border:1px solid var(--line);background:var(--bg);font-weight:800;font-family:var(--font-display);font-size:1rem;letter-spacing:-.02em;transition:all .2s var(--ease)}
.size-chip small{display:block;font-family:var(--font-body);font-size:.6875rem;font-weight:650;color:var(--muted);letter-spacing:0}
.size-chip:hover{border-color:rgba(8,126,145,.4)}
.size-chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-sm)}
.size-chip[aria-pressed="true"] small{color:var(--mint-2)}
.size-prices{display:grid;gap:.75rem}
.size-price{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-radius:1rem;background:var(--bg);border:1px solid var(--line-2)}
.size-price span{color:var(--muted);font-weight:600;font-size:.875rem}
.size-price span b{display:block;color:var(--ink);font-size:1rem}
.size-price strong{font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.03em;white-space:nowrap}
.size-price strong small{font-family:var(--font-body);font-size:.75rem;color:var(--muted);font-weight:600;letter-spacing:0}
.size-price.is-best{background:var(--accent);border-color:rgba(10,167,164,.3)}

/* GYIK harmonika */
.faq-list{display:grid;gap:.75rem}
.faq-item{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);transition:border-color .25s,box-shadow .25s}
.faq-item[open]{border-color:rgba(8,126,145,.35);box-shadow:var(--shadow-sm)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 1.25rem;cursor:pointer;list-style:none;font-weight:700;font-size:1rem;line-height:1.4;border-radius:var(--r-md)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--brand-dark)}
.faq-toggle{flex:none;position:relative;width:2rem;height:2rem;border-radius:50%;background:var(--surface-2);transition:background-color .25s,transform .3s var(--ease)}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:2px;background:var(--brand);border-radius:2px;transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-toggle{background:var(--brand);transform:rotate(180deg)}
.faq-item[open] .faq-toggle::before,.faq-item[open] .faq-toggle::after{background:#fff}
.faq-item[open] .faq-toggle::after{transform:translate(-50%,-50%) rotate(0)}
.faq-answer{padding:0 1.25rem 1.25rem;color:var(--muted);line-height:1.7}
.faq-item.is-hidden{display:none}

/* CTA doboz */
.cta-box{position:relative;overflow:hidden;display:grid;gap:1.75rem;align-items:center;padding:clamp(2rem,5vw,4rem);border-radius:var(--r-2xl);background:radial-gradient(ellipse 60% 90% at 100% 0%,rgba(10,167,164,.4),transparent 60%),radial-gradient(ellipse 50% 70% at 0% 100%,rgba(8,126,145,.35),transparent 60%),var(--night);color:#fff;isolation:isolate;box-shadow:var(--shadow-lg)}
.cta-box::after{content:"";position:absolute;right:-4rem;bottom:-5rem;z-index:-1;width:22rem;height:22rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15.8 36.8h20.4c5.4 0 9.8-4.1 9.8-9.2 0-4.7-3.7-8.6-8.5-9.1C35.8 12.7 30.5 8.5 24.2 8.5c-7.5 0-13.8 5.9-14.1 13.1C5.4 22.2 2 25.9 2 30.2c0 3.7 2.8 6.6 6.5 6.6h7.3Z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E") no-repeat center/contain}
.cta-box h2{color:#fff;font-size:clamp(1.875rem,1.2rem + 2.8vw,3.25rem);margin-bottom:.875rem}
.cta-box p{color:#b3c9cf;font-size:1.0625rem;max-width:34rem}
.cta-actions{display:flex;flex-direction:column;gap:.75rem}

/* ==========================================================================
   Aloldalak
   ========================================================================== */
.page-hero{position:relative;overflow:hidden;padding:clamp(2.5rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);isolation:isolate}
.page-hero .hero-bg::before{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000 20%,transparent 75%)}
.page-hero h1{font-size:clamp(2.5rem,1.5rem + 4.6vw,4.75rem);letter-spacing:-.05em;line-height:1.02;max-width:56rem;margin-bottom:1.25rem}
.page-hero .lead{max-width:42rem}
.page-hero.center h1,.page-hero.center .lead{margin-inline:auto}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.page-hero.center .page-hero-actions{justify-content:center}

.breadcrumb{margin-bottom:1.5rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:var(--muted)}
.page-hero.center .breadcrumb ol{justify-content:center}
.breadcrumb a{color:var(--brand-dark)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .icon{width:.875rem;height:.875rem;color:var(--muted-2)}

/* Funkció-sorok */
.feature-rows{display:grid;gap:clamp(3.5rem,8vw,7rem)}
.feature-row{display:grid;gap:2rem;align-items:center}
.feature-row h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.625rem);margin:1.25rem 0 1rem}
.feature-row .lead{margin-bottom:1.5rem;font-size:1.0625rem}
.feature-visual{position:relative;padding:clamp(1.25rem,3vw,2.5rem);border-radius:var(--r-2xl);background:linear-gradient(145deg,var(--surface-2),#f7fcfd 60%);border:1px solid var(--line-2);overflow:hidden;isolation:isolate}
.feature-visual::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(8,126,145,.12) 1px,transparent 1px);background-size:1.25rem 1.25rem;-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%)}
.feature-visual .panel{box-shadow:var(--shadow)}
.tag-soon{display:inline-flex;margin-left:.375rem;padding:.125rem .5rem;border-radius:999px;background:#fff5e0;color:#8a5a00;font-size:.6875rem;font-weight:800;vertical-align:middle}

.feature-grid{display:grid;gap:1rem}
.feature-card{padding:1.5rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:box-shadow .3s,transform .3s var(--ease)}
.feature-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.feature-card h3{font-size:1.0625rem;margin:1rem 0 .375rem}
.feature-card p{color:var(--muted);font-size:.9375rem}

/* Megoldások */
.solution-nav{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem .125rem 1rem;margin-bottom:1rem;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.solution-nav::-webkit-scrollbar{display:none}
.solution-nav a{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:650;font-size:.875rem;white-space:nowrap;transition:border-color .2s,background-color .2s}
.solution-nav a:hover{border-color:rgba(8,126,145,.4);background:var(--surface-2)}
.solution-nav .icon{width:1rem;height:1rem;color:var(--brand)}
.solutions{display:grid;gap:1.25rem}
.solution{display:grid;gap:1.5rem;padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.solution:target{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(10,167,164,.12),var(--shadow)}
.solution h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);margin:1.25rem 0 .75rem}
.solution .lead{font-size:1.0625rem;margin-bottom:1.5rem}
.solution-rec{align-self:start;padding:1.5rem;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--night),#0f3743);color:#fff}
.solution-rec .rec-label{font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mint-2)}
.solution-rec .rec-plan{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.625rem 0 .25rem}
.solution-rec .rec-plan strong{font-family:var(--font-display);font-size:1.75rem;letter-spacing:-.03em}
.solution-rec .rec-plan span{color:#b3c9cf;font-size:.875rem;font-weight:600}
.solution-rec .rec-price{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:#fff}
.solution-rec .rec-price small{font-family:var(--font-body);font-weight:600;font-size:.8125rem;color:#9fb8bf}
.solution-rec p{color:#a9c1c7;font-size:.875rem;margin:.75rem 0 1.25rem}

/* Árak */
.billing-toggle{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;max-width:40rem;margin:0 auto clamp(2rem,5vw,3rem);padding:.3125rem;border-radius:1.125rem;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.billing-toggle button{position:relative;z-index:1;padding:.625rem .375rem;border:0;background:transparent;border-radius:.875rem;font-weight:750;font-size:.875rem;color:var(--muted);line-height:1.25;transition:color .25s}
.billing-toggle button span{display:block;font-size:.625rem;font-weight:800;color:var(--success);letter-spacing:.02em}
.billing-toggle button.is-active{color:#fff}
.billing-toggle button.is-active span{color:var(--mint-2)}
.billing-indicator{position:absolute;z-index:0;top:.3125rem;bottom:.3125rem;left:.3125rem;width:calc((100% - .625rem - .5rem)/3);border-radius:.875rem;background:var(--ink);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease)}
.billing-toggle[data-mode="yearly"] .billing-indicator{transform:translateX(calc(100% + .25rem))}
.billing-toggle[data-mode="temporary"] .billing-indicator{transform:translateX(calc(200% + .5rem))}

.pricing-grid{display:grid;gap:1rem}
.price-card{position:relative;display:flex;flex-direction:column;padding:1.5rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(8,126,145,.3)}
.price-card.featured{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-brand) border-box;box-shadow:var(--shadow)}
.popular-badge{position:absolute;top:-.8125rem;left:1.25rem;padding:.3125rem .75rem;border-radius:999px;background:var(--grad-brand);color:#fff;font-size:.6875rem;font-weight:800;box-shadow:0 8px 16px -6px rgba(8,126,145,.5)}
.plan-name{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-dark)}
.price-card h2{font-size:2.25rem;letter-spacing:-.045em;margin:.375rem 0 .875rem}
.price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:.375rem}
.price-line strong{font-family:var(--font-display);font-size:1.75rem;font-weight:800;letter-spacing:-.035em;transition:opacity .2s}
.price-line span{color:var(--muted);font-size:.8125rem;font-weight:600}
.price-equiv{min-height:1.25rem;font-size:.75rem;font-weight:700;color:var(--success);margin-top:.25rem}
.price-note{color:var(--muted);font-size:.8125rem;min-height:2.5rem;margin-top:.5rem}
.price-card ul{list-style:none;display:grid;gap:.5rem;margin:1.125rem 0 1.5rem;padding-top:1.125rem;border-top:1px solid var(--line-2);font-size:.875rem}
.price-card li{display:flex;gap:.5rem;align-items:flex-start}
.price-card li .icon{color:var(--brand-2);stroke-width:2.8;width:1rem;height:1rem;margin-top:.2rem}
.price-card .button{margin-top:auto}
.is-switching [data-price]{opacity:.2}

.info-note{display:flex;gap:1rem;align-items:flex-start;max-width:56rem;margin:2rem auto 0;padding:1.25rem 1.5rem;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line)}
.info-note .icon-tile{flex:none;width:2.5rem;height:2.5rem;background:var(--surface)}
.info-note p{color:var(--muted);margin-top:.25rem}

/* Összehasonlító táblázat (mobilon kártyák) */
.compare{width:100%;border-collapse:separate;border-spacing:0}
.compare caption{text-align:left;padding-bottom:1rem;color:var(--muted);font-size:.875rem}
.compare thead{display:none}
.compare tbody{display:grid;gap:.75rem}
.compare tr{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem;padding:1.125rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.compare th[scope="row"]{grid-column:1/-1;display:flex;align-items:baseline;gap:.5rem;text-align:left;font-family:var(--font-display);font-size:1.125rem;padding-bottom:.5rem;margin-bottom:.25rem;border-bottom:1px solid var(--line-2)}
.compare th[scope="row"] small{font-family:var(--font-body);font-weight:700;color:var(--brand-dark);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.compare td{display:flex;flex-direction:column;font-weight:700;font-size:.9375rem;padding:.25rem 0}
.compare td::before{content:attr(data-label);font-size:.6875rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.compare td small{font-weight:600;color:var(--success);font-size:.75rem}
.compare tr.is-featured{border-color:var(--brand-2);background:linear-gradient(180deg,var(--accent),var(--surface) 60%)}

/* Kalkulátor */
.calc{display:grid;gap:1.5rem;padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.calc-fields{display:grid;gap:1.5rem}
.calc-field label{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.625rem;font-weight:700}
.calc-field label span{display:flex;align-items:center;gap:.5rem}
.calc-field label .icon{color:var(--brand)}
.calc-field output{font-family:var(--font-display);font-weight:800;color:var(--brand-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-field small{display:block;color:var(--muted);font-size:.75rem;margin-top:.375rem}
input[type="range"]{--v:20%;width:100%;height:1.75rem;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:.5rem;border-radius:99px;background:linear-gradient(90deg,var(--brand-2) var(--v),#e3eff2 var(--v))}
input[type="range"]::-moz-range-track{height:.5rem;border-radius:99px;background:#e3eff2}
input[type="range"]::-moz-range-progress{height:.5rem;border-radius:99px;background:var(--brand-2)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:1.5rem;height:1.5rem;margin-top:-.5rem;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 4px 10px rgba(8,126,145,.35);transition:transform .15s}
input[type="range"]::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 4px 10px rgba(8,126,145,.35)}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type="range"]:focus-visible{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}
.calc-result{padding:1.5rem;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--night),#0f3743);color:#fff;display:flex;flex-direction:column}
.calc-result .rec-label{font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mint-2)}
.calc-need{font-family:var(--font-display);font-size:clamp(2.25rem,1.8rem + 2vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin:.5rem 0 .25rem}
.calc-need small{font-size:.4em;color:#9fb8bf;letter-spacing:0}
.calc-result p{color:#a9c1c7;font-size:.875rem}
.calc-plan{margin:1.25rem 0;padding:1rem;border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.calc-plan strong{display:block;font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.03em}
.calc-plan span{color:#b3c9cf;font-size:.875rem}
.calc-bar{height:.5rem;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:.75rem}
.calc-bar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--mint-2));transition:width .4s var(--ease)}
.calc-result .button{margin-top:auto}

/* Biztonság – életciklus idővonal */
.timeline{list-style:none;position:relative;display:grid;gap:1.25rem;padding-left:1.75rem}
.timeline::before{content:"";position:absolute;left:.5rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(180deg,var(--brand-2),var(--line))}
.timeline li{position:relative;padding:1.25rem 1.5rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.timeline li::before{content:"";position:absolute;left:-1.625rem;top:1.625rem;width:1rem;height:1rem;border-radius:50%;background:var(--surface);border:3px solid var(--brand-2);box-shadow:0 0 0 4px var(--bg)}
.timeline h3{font-size:1.0625rem;margin-bottom:.25rem}
.timeline p{color:var(--muted);font-size:.9375rem}
.timeline .when{display:inline-block;margin-bottom:.375rem;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}

/* GYIK oldal */
.faq-layout{display:grid;gap:2rem}
.faq-tools{display:grid;gap:1rem}
.search-field{position:relative}
.search-field .icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none}
.search-field input{width:100%;min-height:3.25rem;padding:.75rem 1rem .75rem 3rem;border-radius:1rem;border:1px solid var(--line);background:var(--surface);font-size:1rem;box-shadow:var(--shadow-xs);transition:border-color .2s,box-shadow .2s}
.search-field input:focus{outline:none;border-color:var(--brand-2);box-shadow:var(--ring)}
.chip-row{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:none;padding:.5rem .875rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:650;font-size:.8125rem;color:var(--ink-2);transition:all .2s}
.chip:hover{border-color:rgba(8,126,145,.4)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.faq-group+.faq-group{margin-top:2.5rem}
.faq-group h2{font-size:1.25rem;margin-bottom:1rem;display:flex;align-items:center;gap:.625rem}
.faq-group h2 .icon-tile{width:2.25rem;height:2.25rem;border-radius:.75rem}
.faq-group h2 .icon-tile .icon{width:1.1rem;height:1.1rem}
.faq-group.is-hidden{display:none}
.faq-empty{padding:2rem;text-align:center;border-radius:var(--r-lg);border:1px dashed var(--line);color:var(--muted)}
.help-card{padding:1.75rem;border-radius:var(--r-xl);background:linear-gradient(160deg,var(--night),#0f3743);color:#fff}
.help-card h2{color:#fff;font-size:1.375rem;margin:1rem 0 .5rem}
.help-card p{color:#a9c1c7;font-size:.9375rem;margin-bottom:1.25rem}
.help-card .icon-tile{background:rgba(125,228,223,.1);color:var(--mint-2)}

/* Kapcsolat */
.contact-grid{display:grid;gap:1.5rem;align-items:start}
.form-card{padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);scroll-margin-top:calc(var(--header-h) + 1rem)}
.form-card h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:.5rem}
.form-card>p{color:var(--muted);margin-bottom:1.75rem}
.form-grid{display:grid;gap:1.125rem}
.field label{display:block;font-weight:700;font-size:.875rem;margin-bottom:.4375rem}
.field label .req{color:var(--danger)}
.field input,.field select,.field textarea{width:100%;min-height:3.125rem;padding:.75rem 1rem;border-radius:.875rem;border:1px solid var(--line);background:var(--bg);font-size:1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.field textarea{min-height:9rem;resize:vertical;line-height:1.55}
.field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;background-size:1.125rem;padding-right:2.75rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:var(--surface);border-color:var(--brand-2);box-shadow:var(--ring)}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--danger);background:var(--danger-bg)}
.field-error{display:flex;align-items:center;gap:.375rem;margin-top:.375rem;color:var(--danger);font-size:.8125rem;font-weight:600}
.field-error .icon{width:1rem;height:1rem}
.field-hint{margin-top:.375rem;color:var(--muted);font-size:.75rem}
.check-field,.field label.check-field{display:flex;gap:.75rem;align-items:flex-start;margin:0;font-size:.875rem;font-weight:500;color:var(--ink-2);cursor:pointer}
.check-field input{flex:none;width:1.25rem;height:1.25rem;margin-top:.125rem;accent-color:var(--brand)}
.check-field a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.alert{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.125rem;border-radius:1rem;margin-bottom:1.5rem;font-weight:600;font-size:.9375rem}
.alert .icon{flex:none;margin-top:.1rem}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid rgba(8,119,95,.2)}
.alert-error{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(180,35,47,.2)}
.alert p{font-weight:500;color:inherit;opacity:.9}
.contact-aside{display:grid;gap:1rem}
.contact-card{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
a.contact-card:hover{border-color:rgba(8,126,145,.35);box-shadow:var(--shadow-sm)}
.contact-card strong{display:block;font-size:1rem}
.contact-card span{color:var(--muted);font-size:.875rem}
.contact-card .icon-tile{flex:none;width:2.75rem;height:2.75rem}
.button[disabled]{opacity:.7;pointer-events:none}

/* Fiók / jogi / 404 állapotkártya */
.status-card{max-width:40rem;margin-inline:auto;padding:clamp(1.75rem,5vw,3rem);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.status-card .icon-tile{width:4rem;height:4rem;border-radius:1.25rem;margin:0 auto 1.5rem}
.status-card .icon-tile .icon{width:1.75rem;height:1.75rem}
.status-card h1{font-size:clamp(2rem,1.5rem + 2.4vw,3rem);margin-bottom:1rem}
.status-card p{color:var(--muted);font-size:1.0625rem;margin-inline:auto;max-width:32rem}
.status-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem}
.plan-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.75rem 0 0;padding:1rem 1.25rem;border-radius:var(--r-md);background:var(--accent);border:1px solid rgba(10,167,164,.3);text-align:left}
.plan-summary small{display:block;color:var(--brand-dark);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.plan-summary strong{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.02em}
.plan-summary span{font-weight:700;color:var(--ink-2);white-space:nowrap}
.error-code{font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,3rem + 10vw,9rem);line-height:1;letter-spacing:-.06em;margin-bottom:.5rem}
.quick-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem}

/* ==========================================================================
   Lábléc
   ========================================================================== */
.site-footer{position:relative;overflow:hidden;margin-top:var(--section-y);padding:clamp(3rem,6vw,5rem) 0 1.5rem;background:var(--night);color:#e5f0f2;isolation:isolate}
.footer-glow{position:absolute;z-index:-1;left:50%;top:-12rem;width:60rem;height:24rem;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(10,167,164,.22),transparent 65%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem 1.5rem}
.footer-about{grid-column:1/-1}
.footer-brand .brand-mark{color:var(--mint)}
.footer-brand .brand-mark svg{filter:none}
.footer-brand .brand-word{color:#fff}
.footer-brand .brand-word span{color:var(--mint)}
.footer-lead{color:#9fb8bf;max-width:24rem;margin:1rem 0 1.25rem}
.footer-mail{display:inline-flex;align-items:center;gap:.5rem;font-weight:650;color:var(--mint-2)}
.footer-mail:hover{text-decoration:underline}
.footer-col h2{font-family:var(--font-body);font-size:.75rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:#7f9ca4;margin-bottom:.875rem}
.footer-col a{display:block;padding:.3125rem 0;color:#cfe0e3;font-size:.9375rem;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;flex-direction:column;gap:.375rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);color:#7f9ca4;font-size:.8125rem}

/* ==========================================================================
   Animációk
   ========================================================================== */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes marquee{to{transform:translateX(calc(-50% - .375rem))}}
@keyframes meter-in{from{transform:scaleX(0)}}
@keyframes upload{0%{width:4%}70%{width:100%}85%,100%{width:100%;opacity:.4}}
@keyframes caret{50%{opacity:0}}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Scroll-reveal: csak ha a JS betöltött (html.js), így JS nélkül is minden látszik */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ==========================================================================
   Breakpointok (mobil-first)
   ========================================================================== */
@media (min-width:30em){ /* 480px */
  .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .app-search{display:flex}
  .cta-actions{flex-direction:row;flex-wrap:wrap}
  .size-chips{grid-template-columns:repeat(6,1fr)}
}

@media (min-width:40em){ /* 640px */
  :root{--gutter:1.5rem}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stats>div{border-width:0 1px 0 0!important}
  .stats>div:last-child{border-right-width:0!important}
  .mode-grid,.pricing-grid,.feature-grid,.principles{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(4,1fr)}
  .footer-bottom{flex-direction:row;justify-content:space-between}
  .size-prices{grid-template-columns:repeat(3,1fr)}
  .size-price{flex-direction:column;align-items:flex-start}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .span-2{grid-column:1/-1}
  .compare tr{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:48em){ /* 768px */
  .app-body{grid-template-columns:11.5rem 1fr}
  .app-side{display:block}
  .app-main{padding:1.25rem 1.5rem}
  .hero-visual{padding:1.5rem 1.5rem 3rem}
  .float-share{left:-1rem;bottom:.5rem}
  .float-inbox{right:-1rem;top:-.5rem}
  .solution{grid-template-columns:1.4fr 1fr;align-items:start}
  .calc{grid-template-columns:1.3fr 1fr}
  .faq-layout{grid-template-columns:1fr}
  .section-head-row{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .cta-box{grid-template-columns:1fr auto}
  .cta-actions{flex-direction:column}

  /* Táblázat valódi táblázatként */
  .compare{display:table;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}
  .compare thead{display:table-header-group}
  .compare tbody{display:table-row-group}
  .compare tr{display:table-row;padding:0;border:0;border-radius:0;background:none}
  .compare th,.compare td{display:table-cell;padding:1rem 1.25rem;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:middle}
  .compare thead th{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
  .compare th[scope="row"]{display:table-cell;border-bottom:1px solid var(--line-2);margin:0;padding-bottom:1rem}
  .compare td::before{content:none}
  .compare tbody tr:last-child>*{border-bottom:0}
  .compare tbody tr:hover>*{background:var(--bg)}
  .compare tr.is-featured>*{background:var(--accent)}
  .compare td small{display:block}
}

@media (min-width:67.5em){ /* 1080px – asztali navigáció */
  :root{--header-h:4.75rem;--gutter:2rem}
  .nav-toggle,.nav-backdrop{display:none!important}
  .main-nav{position:static;width:auto;transform:none;visibility:visible;background:none;border:0;flex:1;transition:none}
  .nav-scroll{flex-direction:row;align-items:center;justify-content:space-between;overflow:visible;padding:0;gap:1rem}
  .nav-list{flex-direction:row;align-items:center;gap:.125rem;margin-inline:auto}
  .nav-item{position:relative}
  .nav-link{width:auto;padding:.5rem .875rem;font-size:.9375rem;font-weight:650;border-radius:.75rem}
  .nav-link.is-active{background:var(--surface-2)}
  .nav-caret{width:1rem;height:1rem}
  .nav-panel{position:absolute;top:calc(100% + .75rem);left:-.5rem;min-width:23rem;padding:.625rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .nav-panel::before{content:"";position:absolute;left:0;right:0;top:-.875rem;height:.875rem}
  .has-menu.is-open .nav-panel{display:grid;animation:panel-in .22s var(--ease)}
  .nav-panel-product{grid-template-columns:1fr 14rem;gap:.5rem;min-width:40rem}
  .nav-panel-grid{grid-template-columns:1fr 1fr;min-width:36rem}
  .nav-card:hover,.nav-card.is-active{background:var(--surface-2)}
  .nav-promo{display:flex;flex-direction:column;gap:.375rem;padding:1.25rem;border-radius:var(--r-md);background:linear-gradient(160deg,var(--night),#0f3743);color:#fff}
  .nav-promo-badge{align-self:flex-start;padding:.25rem .5rem;border-radius:999px;background:rgba(125,228,223,.15);color:var(--mint-2);font-size:.625rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .nav-promo strong{font-family:var(--font-display);font-size:1.125rem;letter-spacing:-.02em;margin-top:.5rem}
  .nav-promo small{color:#a9c1c7;font-size:.8125rem;line-height:1.5}
  .nav-promo-link{display:inline-flex;align-items:center;gap:.375rem;margin-top:auto;padding-top:.75rem;font-weight:750;font-size:.8125rem;color:var(--mint-2)}
  .nav-promo-link .icon{width:.95rem;height:.95rem;transition:transform .2s}
  .nav-promo:hover .nav-promo-link .icon{transform:translateX(3px)}
  .nav-actions{display:flex;align-items:center;gap:.5rem;margin:0;padding:0;border:0}
  .nav-actions .button{width:auto;min-height:2.625rem;padding:.5rem 1rem;font-size:.875rem}

  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
  .mode-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .principles{grid-template-columns:repeat(4,1fr)}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .feature-row{grid-template-columns:1fr 1.1fr;gap:clamp(3rem,6vw,6rem)}
  .feature-row.is-reversed .feature-copy{order:2}
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.6fr repeat(4,1fr);gap:2rem}
  .footer-about{grid-column:auto}
  .faq-layout{grid-template-columns:18rem 1fr;gap:3rem;align-items:start}
  .faq-tools{position:sticky;top:calc(var(--header-h) + 1.5rem)}
  .chip-row{flex-direction:column;overflow:visible}
  .chip{text-align:left;border-radius:.75rem;padding:.625rem .875rem}
  .contact-grid{grid-template-columns:1.5fr 1fr;gap:2rem}

  /* Bento elrendezés: 6 oszlopos rács */
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento-card:nth-child(1){grid-column:span 4}
  .bento-card:nth-child(2){grid-column:span 2}
  .bento-card:nth-child(3){grid-column:span 2}
  .bento-card:nth-child(4){grid-column:span 2}
  .bento-card:nth-child(5){grid-column:span 2}
  .bento-card:nth-child(6){grid-column:span 6;flex-direction:row;align-items:center;gap:2rem}
  .bento-card:nth-child(6) .bento-visual{margin:0 0 0 auto;flex:none}
  .bento-card:nth-child(1) .bento-visual{max-width:none}
}

@media (min-width:80em){ /* 1280px */
  .pricing-grid{grid-template-columns:repeat(6,1fr);gap:.875rem}
  .price-card{padding:1.375rem 1.125rem}
  .price-card h2{font-size:1.875rem}
  .price-line strong{font-size:1.5rem}
  .price-card ul{font-size:.8125rem}
  .hero-copy h1{font-size:clamp(4.5rem,2rem + 4vw,6rem)}
}

@media (min-width:96em){ /* 1536px */
  :root{--shell:86rem}
}

/* Nagy kijelzők: arányos felskálázás (1920px, 2560px/1440p, 3840px/4K) */
@media (min-width:120em){html{font-size:112.5%}}
@media (min-width:160em){html{font-size:131.25%}}
@media (min-width:220em){html{font-size:175%}}

/* Fekvő mobil: alacsony képernyő */
@media (orientation:landscape) and (max-height:31.25em) and (max-width:67.49em){
  .hero-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .hero-copy h1{font-size:2.5rem}
  .float-card{display:none}
  .app-side{display:none}
  .app-body{grid-template-columns:1fr}
}

/* Mozgáscsökkentés */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .marquee-track{animation:none;width:auto;justify-content:center}
  .marquee-group{flex-wrap:wrap;justify-content:center;padding-inline:1rem}
  .marquee-group[aria-hidden]{display:none!important}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* Hover csak valódi egérnél emelje a kártyákat (érintőképernyőn ne ragadjon) */
@media (hover:none){
  .mode-card:hover,.bento-card:hover,.price-card:hover,.feature-card:hover,.folder:hover{transform:none}
}

@media print{
  .site-header,.site-footer,.nav-backdrop,.hero-visual,.marquee{display:none!important}
  body{background:#fff}
}

/* ==========================================================================
   Fiókoldalak (belépés, regisztráció, elfelejtett jelszó) – v0.3.0
   ========================================================================== */
.icon-flip{transform:scaleX(-1)}
body.layout-auth{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.layout-auth main{flex:1;display:flex;flex-direction:column}

.auth-header{position:relative;z-index:10}
.auth-header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--header-h);padding-inline:var(--gutter)}
.auth-header-nav{display:flex;align-items:center;gap:.75rem}
.auth-back{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .625rem;border-radius:.75rem;font-weight:650;font-size:.875rem;color:var(--muted);transition:color .2s,background-color .2s}
.auth-back:hover{color:var(--ink);background:var(--surface-2)}
.auth-back span,.auth-switch-text{display:none}
.auth-switch{display:inline-flex;align-items:center;gap:.625rem;font-size:.875rem;color:var(--muted);font-weight:600}
.auth-switch .button{min-height:2.5rem;padding:.5rem .875rem;font-size:.875rem}

.auth{flex:1;display:grid;grid-template-columns:minmax(0,1fr)}
.auth-main{position:relative;display:flex;justify-content:center;align-items:flex-start;padding:1rem var(--gutter) 3rem;isolation:isolate}
.auth-main::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(10,167,164,.12),transparent 70%);pointer-events:none}
.auth-card{width:100%;max-width:27rem}
.auth-card-wide{max-width:36rem}
.auth-head{margin-bottom:1.5rem}
.auth-head .icon-tile{margin-bottom:1.25rem}
.auth-head h1{font-size:clamp(1.875rem,1.5rem + 1.6vw,2.5rem);letter-spacing:-.045em;margin-bottom:.5rem}
.auth-head p{color:var(--muted);font-size:1rem}

.prep-banner{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;padding:.875rem 1rem;border-radius:1rem;background:#fff8ea;border:1px solid #f1dfb6;color:#6e4f0f;font-size:.875rem;line-height:1.5}
.prep-pill{flex:none;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;background:#f5c860;color:#4a3300;font-size:.6875rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.prep-pill .icon{width:.8rem;height:.8rem}
.alert-info{background:var(--surface-2);color:var(--brand-dark);border:1px solid rgba(8,126,145,.2)}

.auth-form{display:grid;gap:1.125rem}
.field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.field-link{font-size:.8125rem;font-weight:700;color:var(--brand-dark)}
.field-link:hover{text-decoration:underline}
.input-wrap{position:relative}
.input-wrap .input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.125rem;height:1.125rem;color:var(--muted-2);pointer-events:none;transition:color .2s}
.input-wrap.has-icon input{padding-left:2.875rem}
.input-wrap.has-action input{padding-right:3.25rem}
.input-wrap:focus-within .input-icon{color:var(--brand)}
.field.has-error .input-icon{color:var(--danger)}
.input-action{position:absolute;right:.375rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;display:grid;place-items:center;border:0;border-radius:.625rem;background:transparent;color:var(--muted);transition:background-color .2s,color .2s}
.input-action:hover{background:var(--surface-2);color:var(--ink)}
.input-action .icon{width:1.2rem;height:1.2rem}
.input-action .pw-hide,.input-action[aria-pressed="true"] .pw-show{display:none}
.input-action[aria-pressed="true"] .pw-hide{display:block}
.caps-warning{display:flex;align-items:center;gap:.375rem;margin-top:.375rem;font-size:.8125rem;font-weight:650;color:#8a5a00}
.caps-warning .icon{width:.95rem;height:.95rem}
.email-suggest{margin-top:.375rem;font-size:.8125rem;color:var(--muted)}
.email-suggest button{padding:0;border:0;background:none;font-weight:750;color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
.auth-alt{margin-top:1.75rem;text-align:center;color:var(--muted);font-size:.9375rem}
.auth-alt a{display:inline-flex;align-items:center;gap:.375rem;font-weight:750;color:var(--brand-dark)}
.auth-alt a:hover{text-decoration:underline}
.auth-secure{margin-top:1rem;font-size:.75rem;color:var(--muted-2);text-align:center;text-wrap:balance}
.auth-secure .icon{display:inline-block;width:.9rem;height:.9rem;vertical-align:-.15em;margin-right:.25rem}
.button .icon-flip{transform:scaleX(-1)}

/* Lépésjelző */
.stepper{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:1.75rem;counter-reset:s}
.stepper-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.stepper-item:not(:last-child)::after{content:"";position:absolute;top:1rem;left:calc(50% + 1.375rem);right:calc(-50% + 1.375rem);height:2px;border-radius:2px;background:var(--line);transition:background-color .35s}
.stepper-item.is-done:not(:last-child)::after{background:var(--brand-2)}
.stepper-dot{position:relative;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--surface);border:2px solid var(--line);color:var(--muted);font-weight:800;font-size:.8125rem;font-family:var(--font-display);transition:all .3s var(--ease)}
.stepper-check{display:none;width:1rem;height:1rem;stroke-width:3}
.stepper-label{font-size:.75rem;font-weight:700;color:var(--muted)}
.stepper-item.is-current .stepper-dot{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 0 0 5px rgba(14,37,48,.08)}
.stepper-item.is-current .stepper-label{color:var(--ink)}
.stepper-item.is-done .stepper-dot{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.stepper-item.is-done .stepper-num{display:none}
.stepper-item.is-done .stepper-check{display:block}
html:not(.js) .stepper{display:none}

/* Regisztrációs lépések */
.reg-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:1.125rem}
.js .reg-step:not(.is-current){display:none}
.js .reg-step.is-current{animation:step-in .35s var(--ease)}
html:not(.js) .reg-step+.reg-step{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
html:not(.js) [data-next],html:not(.js) [data-prev],html:not(.js) .summary-edit{display:none}
.reg-title{display:flex;align-items:center;gap:.625rem;font-size:1.25rem;letter-spacing:-.025em;outline:none}
.reg-title span{padding:.15rem .5rem;border-radius:999px;background:var(--surface-2);color:var(--brand-dark);font-size:.6875rem;font-family:var(--font-body);font-weight:800;letter-spacing:.04em}
.reg-hint{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;color:var(--muted);line-height:1.5}
.reg-hint .icon{flex:none;width:1rem;height:1rem;margin-top:.1rem;color:var(--brand)}
.reg-hint a{color:var(--brand-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.reg-nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.5rem}
.reg-nav .button{flex:1}
.reg-nav>span:empty{display:none}

/* Fizetési mód és csomag választó (rádiógombok kártyaként) */
.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.3125rem;border-radius:1rem;background:var(--surface);border:1px solid var(--line)}
.mode-option,.plan-option{position:relative;cursor:pointer}
.mode-option input,.plan-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mode-option>span{display:flex;flex-direction:column;align-items:center;padding:.5rem .25rem;border-radius:.75rem;text-align:center;transition:background-color .25s,color .25s}
.mode-option strong{font-size:.875rem;line-height:1.3}
.mode-option small{font-size:.625rem;font-weight:800;color:var(--success);letter-spacing:.02em}
.mode-option:hover>span{background:var(--surface-2)}
.mode-option input:checked+span{background:var(--ink);color:#fff}
.mode-option input:checked+span small{color:var(--mint-2)}
.mode-option input:focus-visible+span,.plan-option input:focus-visible+.plan-option-card{outline:3px solid var(--brand-2);outline-offset:2px}

.plan-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
.plan-option-card{position:relative;display:flex;flex-direction:column;gap:.125rem;height:100%;padding:.875rem 1rem;border-radius:1rem;border:1.5px solid var(--line);background:var(--surface);transition:border-color .2s,background-color .2s,box-shadow .2s,transform .2s var(--ease)}
.plan-option:hover .plan-option-card{border-color:rgba(8,126,145,.4)}
.plan-option input:checked+.plan-option-card{border-color:var(--brand-2);background:linear-gradient(180deg,var(--accent),var(--surface));box-shadow:0 10px 24px -14px rgba(8,126,145,.6)}
.plan-option-name{font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-dark)}
.plan-option-size{font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.035em;line-height:1.2}
.plan-option-price{font-weight:750;font-size:.875rem;color:var(--ink-2)}
.plan-option-price small{font-weight:600;color:var(--muted);font-size:.75rem}
.plan-option-radio{position:absolute;top:.875rem;right:.875rem;width:1.125rem;height:1.125rem;border-radius:50%;border:2px solid var(--line);background:var(--surface);transition:all .2s}
.plan-option input:checked+.plan-option-card .plan-option-radio{border-color:var(--brand-2);background:var(--brand-2);box-shadow:inset 0 0 0 3px #fff}
.plan-option-badge{position:absolute;top:-.6rem;left:.875rem;padding:.15rem .5rem;border-radius:999px;background:var(--grad-brand);color:#fff;font-size:.625rem;font-weight:800}
.plan-options.has-error .plan-option-card{border-color:rgba(180,35,47,.4)}

/* Jelszóerősség */
.pw-meter{display:flex;align-items:center;gap:.75rem;margin-top:-.5rem}
.pw-meter-bars{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.pw-meter-bars span{height:.3125rem;border-radius:99px;background:var(--line);transition:background-color .3s}
.pw-meter-label{min-width:6.5rem;text-align:right;font-size:.75rem;font-weight:750;color:var(--muted)}
.pw-meter[data-score="1"] .pw-meter-bars span:nth-child(-n+1){background:#d4424e}
.pw-meter[data-score="2"] .pw-meter-bars span:nth-child(-n+2){background:#e3a13a}
.pw-meter[data-score="3"] .pw-meter-bars span:nth-child(-n+3){background:var(--brand-2)}
.pw-meter[data-score="4"] .pw-meter-bars span{background:var(--success)}
.pw-meter[data-score="1"] .pw-meter-label{color:#b4232f}
.pw-meter[data-score="2"] .pw-meter-label{color:#8a5a00}
.pw-meter[data-score="3"] .pw-meter-label{color:var(--brand-dark)}
.pw-meter[data-score="4"] .pw-meter-label{color:var(--success)}
.pw-rules{list-style:none;display:grid;gap:.375rem;margin-top:-.375rem;font-size:.8125rem;color:var(--muted)}
.pw-rules li{display:flex;align-items:center;gap:.5rem;transition:color .2s}
.pw-rules .icon{width:1rem;height:1rem;padding:.15rem;border-radius:50%;background:var(--line-2);color:transparent;stroke-width:3.4;transition:all .2s}
.pw-rules li.is-ok{color:var(--success)}
.pw-rules li.is-ok .icon{background:var(--success);color:#fff}
.pw-match{min-height:1.25rem;margin-top:-.75rem;font-size:.8125rem;font-weight:650}
.pw-match.is-ok{color:var(--success)}
.pw-match.is-bad{color:var(--danger)}

/* Összegzés */
.summary{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.summary-row{display:grid;grid-template-columns:1fr auto;gap:.125rem .75rem;padding:1rem 1.125rem;border-bottom:1px solid var(--line-2)}
.summary-row:last-child{border-bottom:0}
.summary dt{grid-column:1;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.summary dd{grid-column:1;margin:0;min-width:0}
.summary dd strong{display:block;font-size:1rem;overflow-wrap:anywhere}
.summary dd small{display:block;color:var(--muted);font-size:.8125rem;overflow-wrap:anywhere}
.summary-edit{grid-column:2;grid-row:1/3;align-self:center;display:inline-flex;align-items:center;gap:.375rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:.625rem;background:var(--surface);font-size:.75rem;font-weight:700;color:var(--brand-dark);transition:border-color .2s,background-color .2s}
.summary-edit:hover{border-color:rgba(8,126,145,.4);background:var(--surface-2)}
.summary-edit .icon{width:.85rem;height:.85rem}
.summary-total{background:var(--accent)}
.summary-total dd{display:flex;align-items:baseline;gap:.375rem}
.summary-total dd strong{display:inline;font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.03em}
.summary-total dd small{display:inline}

/* Oldalsó panel */
.auth-aside{display:none}
.auth-aside-inner{width:100%;display:flex;flex-direction:column;gap:1.5rem;max-width:30rem;margin-inline:auto}
.auth-aside h2{color:#fff;font-size:clamp(1.75rem,1.2rem + 1.5vw,2.5rem);letter-spacing:-.045em}
.auth-aside .eyebrow{align-self:flex-start;margin-bottom:0}
.auth-points{list-style:none;display:grid;gap:.75rem;color:#cfe0e3;font-weight:600;font-size:.9375rem}
.auth-points li{display:flex;align-items:flex-start;gap:.625rem}
.auth-points .icon{flex:none;margin-top:.15rem;width:1.25rem;height:1.25rem;padding:.2rem;border-radius:50%;background:rgba(125,228,223,.14);color:var(--mint-2);stroke-width:3}
.auth-aside-note{display:flex;gap:.625rem;align-items:flex-start;font-size:.8125rem;color:#8fabb2;line-height:1.55}
.auth-aside-note .icon{flex:none;width:1.1rem;height:1.1rem;color:var(--mint-2)}
.auth-mock{position:relative;padding:1.375rem;border-radius:1.5rem;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:rotate(-1.5deg);margin:.5rem .75rem 1rem 0}
.auth-mock-head{display:flex;align-items:flex-start;justify-content:space-between}
.auth-mock-head small{display:block;color:var(--muted);font-size:.75rem;font-weight:650}
.auth-mock-head strong{font-family:var(--font-display);font-size:1.75rem;letter-spacing:-.04em;line-height:1.1}
.auth-mock-meta{display:flex;justify-content:space-between;margin:.375rem 0 1rem;color:var(--muted);font-size:.75rem;font-weight:650}
.auth-mock-list{display:grid;gap:.5rem}
.auth-mock-list div{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.625rem;padding:.5rem .625rem;border:1px solid var(--line-2);border-radius:.75rem;font-size:.8125rem}
.auth-mock-list small{color:var(--muted);font-size:.75rem}
.auth-mock-float{position:absolute;left:-1.25rem;bottom:-1.25rem;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem .875rem;border-radius:.875rem;background:var(--grad-brand);color:#fff;font-size:.8125rem;font-weight:700;box-shadow:0 16px 30px -12px rgba(8,126,145,.8);transform:rotate(1.5deg);animation:float 7s ease-in-out infinite}
.auth-mock-float .icon{width:1rem;height:1rem}
.auth-steps{list-style:none;display:grid;gap:1rem}
.auth-steps li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.125rem;border-radius:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.auth-steps li>span{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.625rem;background:rgba(125,228,223,.14);color:var(--mint-2);font-weight:800;font-family:var(--font-display)}
.auth-steps strong{display:block;color:#fff}
.auth-steps small{display:block;color:#9fb8bf;font-size:.8125rem}
.order-card{padding:1.5rem;border-radius:1.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.order-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.order-top small{display:block;color:#9fb8bf;font-size:.75rem;font-weight:650}
.order-top strong{display:block;color:#fff;font-family:var(--font-display);font-size:1.375rem;letter-spacing:-.03em}
.order-top .badge{background:rgba(125,228,223,.15);color:var(--mint-2)}
.order-price{display:flex;align-items:baseline;gap:.5rem;margin:1.25rem 0 .25rem}
.order-price strong{font-family:var(--font-display);font-size:2.75rem;font-weight:800;letter-spacing:-.05em;color:#fff;line-height:1}
.order-price span{color:#9fb8bf;font-weight:650}
.order-renew{color:#9fb8bf;font-size:.8125rem;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}
.is-updating{animation:pop .35s var(--ease)}

.auth-footer{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);color:var(--muted-2);font-size:.8125rem}
.auth-footer p{margin:0}
.auth-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.25rem}
.auth-footer a{color:var(--muted);font-weight:600}
.auth-footer a:hover{color:var(--ink)}

@keyframes step-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

@media (min-width:30em){
  .auth-back span{display:inline}
  .plan-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reg-nav .button{flex:none}
  .reg-nav>span:empty{display:block}
  .pw-rules{grid-template-columns:1fr 1fr}
}
@media (min-width:40em){
  .auth-switch-text{display:inline}
  .auth-main{padding:2rem var(--gutter) 4rem}
  .auth-card{padding:2.25rem;border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
  .auth-card-wide{padding:2.5rem}
  .auth-footer{flex-direction:row;justify-content:space-between}
}
@media (min-width:64em){
  .auth{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:0}
  .auth-register{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .auth-main{align-items:center;padding:3rem 2.5rem 4rem}
  .auth-card{box-shadow:none;border:0;background:transparent;padding:0}
  .auth-card-wide{max-width:38rem}
  .auth-aside{position:relative;display:block;margin:0 .75rem .75rem 0;padding:3rem clamp(2rem,4vw,4.5rem);border-radius:var(--r-2xl);overflow:clip;color:#e7f2f4;isolation:isolate;
    background:radial-gradient(ellipse 80% 60% at 100% 0%,rgba(10,167,164,.4),transparent 60%),radial-gradient(ellipse 70% 60% at 0% 100%,rgba(8,126,145,.35),transparent 60%),var(--night)}
  .auth-aside::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:1.5rem 1.5rem;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
  .auth-aside{display:flex;align-items:center}
  .auth-register .auth-aside{align-items:flex-start}
  .auth-register .auth-aside-inner{position:sticky;top:3rem}
  body.layout-auth .auth-footer{border-top:0}
}
@media (prefers-reduced-motion:reduce){.auth-mock-float{animation:none}}
@media (max-width:22.49em){ /* 360px alatt (pl. 320px-es telefonok) */
  .auth-back{display:none}
  .auth-switch .button{padding:.5rem .75rem}
}