/* =============================================================
   Ensure Kft. — Flottabiztosítás
   Vizuális irány: „Depot" — hideg grafit / mészkő alap, egyetlen
   nagy láthatósági lime akcentus. Széles, nehéz display betű
   (Archivo) + technikai mono (IBM Plex Mono) + semleges kenyér-
   betű (Instrument Sans).

   A kocka hat lapja duotone fotó + egyetlen grafikus jel. A fotó
   adja a tömeget (a vékony rajz a fátyol alatt eltűnt), a lime jel
   a jelentést. A jel színei szándékosan fixek, nem témafüggők:
   mindig világos jel fut a sötét képen. Lásd a `plates` réteget.
   ============================================================= */

@layer reset, tokens, base, furniture, stage, plates, scenes, bands, forms, footer, reveal, responsive;

/* ---------- reset ------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select { font: inherit; color: inherit; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- tokens ------------------------------------------ */
@layer tokens {
  :root {
    --ink:    #0f1419;
    --paper:  #e7e9e4;
    --signal: #cfea3c;

    --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
    --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --ui: 1.6rem;
    --rail: 13.5rem;
    --cube: min(50vw, 56vh, 430px);
    --card-w: 26rem;
    --radius: 2px;

    --t-fast: .22s cubic-bezier(.4,0,.2,1);
    --t-mid:  .45s cubic-bezier(.22,.61,.36,1);
  }

  :root, [data-theme="light"] {
    color-scheme: light;
    --bg:     var(--paper);
    --fg:     var(--ink);
    --muted:  #6b7278;
    --line:   rgb(15 20 25 / .15);
    --line-2: rgb(15 20 25 / .07);
    --scrim:  231 233 228;
    --on-signal: var(--ink);
    --face-bg: #d9dcd6;
    /* A lime jelzőszín szövegként világos alapon olvashatatlan,
       ezért íráshoz sötétebb változatot használunk. */
    --signal-text: #4f6110;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --bg:     var(--ink);
    --fg:     var(--paper);
    --muted:  #7f888f;
    --line:   rgb(231 233 228 / .17);
    --line-2: rgb(231 233 228 / .08);
    --scrim:  15 20 25;
    --on-signal: var(--ink);
    --face-bg: #171c22;
    --signal-text: var(--signal);
  }
}

/* ---------- base -------------------------------------------- */
@layer base {
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color .35s ease, color .35s ease;
  }

  ::selection { background: var(--signal); color: var(--ink); }

  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 1px;
  }

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .skip-link {
    position: fixed; top: .5rem; left: .5rem; z-index: 100;
    transform: translateY(-200%);
    background: var(--signal); color: var(--ink);
    padding: .6rem 1rem; font-family: var(--f-mono); font-size: .75rem;
  }
  .skip-link:focus-visible { transform: none; }

  /* ---- tipográfiai alapok ---- */
  .h-lead, h1, .band__h .h-lead {
    font-family: var(--f-display);
    font-weight: 800;
    font-stretch: 118%;
    font-variation-settings: "wdth" 118, "wght" 800;
    text-transform: uppercase;
    line-height: .93;
    letter-spacing: -.012em;
    text-wrap: balance;
    /* „ADMINISZTRÁCIÓVAL", „FLOTTABIZTOSÍTÁSRÓL" — a magyar
       összetett szavak szélesebbek a kártyánál, ezért elválasztjuk
       őket ahelyett, hogy kilógnának. A lang="hu" adja a mintát. */
    hyphens: auto;
    overflow-wrap: break-word;
  }

  h1 {
    font-size: clamp(1.95rem, 3vw, 2.8rem);
    margin-bottom: 1.6rem;
  }
  h1 em {
    display: block;
    margin-top: .3em;
    font-style: normal;
    color: var(--muted);
  }
  /* A kulcsszó a H1-en belül marad (SEO), a hívómondat érintetlen. */
  .h1-kicker {
    display: block;
    margin-bottom: .85rem;
    font-family: var(--f-mono);
    font-weight: 400;
    font-variation-settings: normal;
    font-size: .7rem;
    letter-spacing: .18em;
    line-height: 1.4;
    color: var(--signal-text);
  }

  h2 { display: block; margin-bottom: 1.4rem; }
  .h-lead {
    display: block;
    font-size: clamp(1.85rem, 2.75vw, 2.5rem);
  }
  .h-q {
    display: block;
    margin-top: .9rem;
    font-family: var(--f-body);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    max-width: 34ch;
  }

  h3 {
    font-family: var(--f-body);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
  }

  .eyebrow {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
    display: inline-block;
  }

  .lead {
    font-size: .95rem;
    line-height: 1.68;
    color: var(--fg);
    max-width: 42ch;
  }
  .lead strong { font-weight: 600; }
  .lead--after { margin-top: 1rem; }

  /* ---- hero kiemelt szám ---- */
  .hero-stat {
    margin-top: 1.8rem;
    display: grid;
    gap: .35rem;
  }
  .hero-stat__num {
    font-family: var(--f-display);
    font-weight: 800;
    font-stretch: 118%;
    font-variation-settings: "wdth" 118, "wght" 800;
    font-size: clamp(2.6rem, 5.5vw, 3.6rem);
    line-height: .9;
    letter-spacing: -.015em;
    color: var(--signal-text);
  }
  .hero-stat__num sup {
    font-size: .32em;
    vertical-align: super;
    font-variation-settings: normal;
  }
  .hero-stat__note {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    line-height: 1.4;
    color: var(--muted);
  }

  .closer {
    margin-top: 1.4rem;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 42ch;
    padding-left: 1rem;
    border-left: 2px solid var(--signal);
  }
  .closer strong { color: var(--fg); font-weight: 600; }

  mark {
    background: var(--signal);
    color: var(--ink);
    padding: .06em .28em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  /* ---- listák ---- */
  .list { margin-top: 1.6rem; display: grid; gap: .95rem; max-width: 42ch; }
  .list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .89rem;
    line-height: 1.6;
    color: var(--muted);
  }
  .list li strong { color: var(--fg); font-weight: 600; }
  .list li::before {
    position: absolute;
    left: 0; top: .05em;
    font-family: var(--f-mono);
    font-size: .8rem;
  }
  .list--plus  li::before { content: "+"; color: var(--signal-text); }
  .list--minus li::before { content: "−"; color: var(--muted); }

  /* ---- rangsorolt lista (Miért az Ensure) ---- */
  .ranked { counter-reset: rank; display: grid; gap: 1.35rem; max-width: 42ch; margin-top: .4rem; }
  .ranked li {
    counter-increment: rank;
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    gap: 0 .6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line-2);
  }
  .ranked li::before {
    content: counter(rank, decimal-leading-zero);
    font-family: var(--f-mono);
    font-size: .72rem;
    color: var(--signal-text);
    padding-top: .18em;
  }
  .ranked p {
    grid-column: 2;
    margin-top: .35rem;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--muted);
  }

  /* ---- gombok ---- */
  .btn {
    display: inline-block;
    background: var(--signal);
    color: var(--on-signal);
    font-family: var(--f-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgb(0 0 0 / .5); filter: saturate(1.15); }
  .btn:active { transform: translateY(0); }
  .btn--sm { padding: .62rem 1rem; font-size: .66rem; }
  .btn--block { width: 100%; text-align: center; }

  .btn-ghost {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: .2rem;
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .btn-ghost:hover { color: var(--fg); border-color: var(--signal); }

  .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; }
  .actions--center { justify-content: center; margin-top: 3.5rem; }
}

/* ---------- rögzített kezelőfelület ------------------------- */
@layer furniture {
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem var(--ui);
    background: linear-gradient(to bottom, rgb(var(--scrim) / .92), rgb(var(--scrim) / 0));
    pointer-events: none;
  }
  .site-header > * { pointer-events: auto; }

  .brand { display: flex; align-items: center; gap: .7rem; }
  /* A 2026-os logó egyszínű, fekvő lockup (3,35 : 1). Maszkként fut, hogy a
     színét a téma adja: világoson a saját #1d1d1b-je, sötéten fehér.
     Fekvő ábra, ezért a SZÉLESSÉG köti, a magasság az arányból jön. */
  .brand__logo {
    width: 9.5rem;
    aspect-ratio: 283.46 / 84.66;
    flex: none;
    background-color: #1d1d1b;
    -webkit-mask: url("../img/ensure-logo-2026.svg") center / contain no-repeat;
    mask: url("../img/ensure-logo-2026.svg") center / contain no-repeat;
  }
  [data-theme="dark"] .brand__logo { background-color: #fff; }
  .brand__sub {
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    padding-left: .55rem;
    border-left: 1px solid var(--line);
  }

  .header-actions { display: flex; align-items: center; gap: 1.4rem; }
  .header-tel {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--muted);
    transition: color var(--t-fast);
  }
  .header-tel:hover { color: var(--fg); }

  /* A kockához tartozó elemek eltűnnek, amikor a kocka kifordul. */
  #classes, #edge-label, #hud { transition: opacity .45s ease; }
  body.stage-off #classes,
  body.stage-off #edge-label,
  body.stage-off #hud { opacity: 0; pointer-events: none; }

  /* járműosztály-sáv */
  #classes {
    position: fixed;
    left: var(--ui);
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
  }
  #classes ol { display: grid; gap: .1rem; }
  #classes a {
    display: flex; align-items: center; gap: .55rem;
    padding: .3rem 0;
    font-family: var(--f-mono);
    font-size: .63rem;
    letter-spacing: .08em;
    color: var(--muted);
    opacity: .5;
    transition: opacity var(--t-fast), color var(--t-fast);
  }
  #classes a::before {
    content: "";
    width: .9rem; height: 1px;
    background: currentColor;
    flex: none;
    transition: width var(--t-fast), background-color var(--t-fast);
  }
  #classes a:hover { opacity: .9; }
  #classes a.is-active { opacity: 1; color: var(--fg); }
  #classes a.is-active::before { width: 1.7rem; background: var(--signal); }
  .cls-n { color: var(--muted); }
  .cls-t { text-transform: uppercase; }

  #edge-label {
    position: fixed;
    right: var(--ui);
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    writing-mode: vertical-rl;
    font-family: var(--f-mono);
    font-size: .63rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .55;
    pointer-events: none;
  }

  #hud {
    position: fixed;
    right: var(--ui);
    bottom: var(--ui);
    z-index: 15;
    width: 8.5rem;
    text-align: right;
    pointer-events: none;
  }
  .hud__row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--f-mono);
    font-size: .63rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .45rem;
  }
  #hud_pct { color: var(--fg); }
  .hud__bar { height: 1px; background: var(--line); }
  .hud__bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .12s linear; }

  #theme_toggle {
    position: fixed;
    left: var(--ui);
    bottom: var(--ui);
    z-index: 15;
    width: 2.2rem; height: 2.2rem;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  #theme_toggle:hover { color: var(--fg); border-color: var(--fg); }
  #theme_toggle svg { width: 1rem; height: 1rem; }
  [data-theme="light"] #theme_toggle .i-sun,
  [data-theme="dark"]  #theme_toggle .i-moon { display: none; }
}

/* ---------- a kocka ----------------------------------------- */
@layer stage {
  #stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    perspective: 1150px;
    pointer-events: none;
    will-change: opacity;
  }

  #cube {
    --s: var(--cube);
    width: var(--s); height: var(--s);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(90deg);
    will-change: transform;
  }

  .face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    background: var(--face-bg);
    box-shadow: 0 40px 80px -40px rgb(0 0 0 / .55);
  }

  /* A mélységet a képekbe égetett vignetta adja, külön réteg
     nem kell — az csak tompítaná a jelet. */

  .face[data-face="front"]  { transform: translateZ(calc(var(--s) / 2)); }
  .face[data-face="back"]   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
  .face[data-face="right"]  { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
  .face[data-face="left"]   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
  .face[data-face="top"]    { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
  .face[data-face="bottom"] { transform: rotateX(90deg)  translateZ(calc(var(--s) / 2)); }
}

/* ---------- a lapok jel-rétege ------------------------------ */
@layer plates {
  .face img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* A jel az SVG-ben ül, a saját háttere adja az alsó fátylat a
     felirat alá — így a fátyol a kép fölött, de a rajz alatt van. */
  .sign {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to top,
      rgb(9 12 16 / .88) 0%,
      rgb(9 12 16 / .34) 20%,
      rgb(9 12 16 / 0) 40%
    );
  }

  /* A kép fix duotone, ezért a jel színei is fixek — nem a téma
     változói, különben világos módban eltűnnének a képen. */
  .s-line  { fill: none; stroke: var(--signal); stroke-width: 11; stroke-linejoin: miter; }
  .s-dot   { fill: #e7e9e4; }
  .s-box   { fill: rgb(11 15 20 / .34); stroke: #e7e9e4; stroke-width: 3.5; }
  .s-box--on { fill: var(--signal); stroke: none; }
  .s-fan   { fill: none; stroke: #e7e9e4; stroke-width: 3.5; }
  .s-brace { fill: none; stroke: #e7e9e4; stroke-width: 3; }
  .s-mark  { fill: var(--signal); }
  .s-glyph { fill: none; stroke: var(--signal); stroke-width: 1.1; stroke-linejoin: round; }
  .s-tick  { fill: var(--signal); }

  .s-lbl {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: .16em;
    fill: #e7e9e4;
  }
}

/* ---------- a kocka fölötti szakaszok ----------------------- */
@layer scenes {
  #cube-stage { position: relative; z-index: 1; }

  .scene {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 9rem 4rem 6rem var(--rail);
  }
  .scene--right { justify-content: flex-end; padding-left: 4rem; padding-right: var(--rail); }

  /* olvashatósági fátyol a fotó fölött, a kártya oldalán */
  .scene::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgb(var(--scrim) / .99) 0%,
      rgb(var(--scrim) / .98) 33%,
      rgb(var(--scrim) / .82) 46%,
      rgb(var(--scrim) / .3) 58%,
      rgb(var(--scrim) / 0) 68%
    );
  }
  .scene--right::before { transform: scaleX(-1); }

  .card { position: relative; width: min(100%, var(--card-w)); }
  /* A hero főcíme a leghosszabb az oldalon — kap egy kis ráhagyást,
     hogy ne kelljen minden sorát elválasztani. */
  #hero .card { width: min(100%, 30rem); }
  .scene--right .card { text-align: right; }
  .scene--right .card .lead,
  .scene--right .card .list,
  .scene--right .card .ranked,
  .scene--right .card .closer { text-align: left; margin-left: auto; }
  .scene--right .card .closer { border-left: 0; border-right: 2px solid var(--signal); padding-left: 0; padding-right: 1rem; text-align: right; }
  .scene--right .card .actions { justify-content: flex-end; }

  .trustbar {
    display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .trustbar strong { color: var(--fg); font-weight: 500; }

  .scroll-hint {
    position: absolute;
    left: var(--rail); bottom: 2.6rem;
    display: flex; align-items: center; gap: .7rem;
    font-family: var(--f-mono);
    font-size: .63rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .scroll-hint span {
    width: 3.6rem; height: 1px; background: var(--line); position: relative; overflow: hidden;
  }
  .scroll-hint span::after {
    content: ""; position: absolute; inset: 0; width: 40%;
    background: var(--signal);
    animation: sweep 2.4s cubic-bezier(.6,0,.4,1) infinite;
  }
  @keyframes sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(250%); } }

}

/* ---------- lapos szakaszok --------------------------------- */
@layer bands {
  .band { position: relative; z-index: 2; background: var(--bg); }
  .wrap { width: min(100% - 3rem, 74rem); margin-inline: auto; }
  .wrap--narrow { width: min(100% - 3rem, 52rem); }

  .band__h { margin-bottom: 3rem; }
  .band__h .h-q { max-width: 40ch; }

  /* bizalom-sáv */
  .band--proof { padding: 5rem 0; border-block: 1px solid var(--line); }
  .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .proof__item { display: flex; flex-direction: column-reverse; gap: .5rem; }
  .proof dt {
    font-family: var(--f-mono);
    font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
  }
  .num {
    font-family: var(--f-display);
    font-weight: 800; font-stretch: 118%;
    text-transform: uppercase;
    line-height: .9;
    font-size: clamp(2.6rem, 6vw, 4.2rem);
  }
  .num i { font-style: normal; color: var(--signal); }
  .num--word { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

  /* folyamat */
  .band--steps { padding: 7rem 0; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
  .steps li { padding-top: 1.2rem; border-top: 2px solid var(--fg); }
  .steps__n {
    display: block;
    font-family: var(--f-mono);
    font-size: .7rem; letter-spacing: .16em;
    color: var(--signal-text);
    margin-bottom: 1.4rem;
  }
  .steps h3 { font-size: 1.05rem; margin-bottom: .5rem; }
  .steps p { font-size: .89rem; line-height: 1.6; color: var(--muted); }

  .steps__sub { margin: .8rem 0 0; display: grid; gap: .3rem; }
  .steps__sub li {
    position: relative;
    /* a .steps li felső paddingját és vonalát itt visszavonjuk */
    padding: 0 0 0 1rem;
    border: 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--muted);
  }
  .steps__sub li::before {
    content: "";
    position: absolute; left: 0; top: .62em;
    width: .35rem; height: 1px;
    background: var(--signal);
  }

  .steps__note {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line-2);
    font-size: .84rem;
    color: var(--fg);
  }

  /* bizalmi logósáv */
  .band--logos { padding: 3.5rem 0; border-top: 1px solid var(--line); }
  .logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 4.5rem;
  }
  .logos__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
  }
  /* A lockup képként jön; a magasság köti, a szélesség szabad. */
  .logos__img {
    display: block;
    height: 2.85rem;
    width: auto;
    opacity: .8;
    transition: opacity var(--t-fast);
  }
  .logos li:hover .logos__img { opacity: 1; }
  /* Témánként csak az egyik változat látszik. */
  .logos__img--neg { display: none; }
  [data-theme="dark"] .logos__img--pos { display: none; }
  [data-theme="dark"] .logos__img--neg { display: block; }

  /* A tanúsítványjelvény három sávra tagolt, ezért magasabban kell futnia,
     mint a szóvédjegy — különben a nyilvántartási szám olvashatatlan. */
  .logos__img--cert { height: 4rem; }

  /* záró CTA */
  .band--cta { padding: 7rem 0 8rem; border-top: 1px solid var(--line); }
  .cta-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: start; }
  .cta-copy .lead { max-width: 40ch; margin-top: .4rem; }
  .cta-alt {
    margin-top: 2rem;
    font-family: var(--f-mono);
    font-size: .72rem; letter-spacing: .06em;
    color: var(--muted);
  }
  .cta-alt a { color: var(--fg); border-bottom: 1px solid var(--signal); padding-bottom: .1rem; }
  .cta-alt .dot { padding: 0 .4rem; }
}

/* ---------- űrlap ------------------------------------------- */
@layer forms {
  .lead-form {
    border: 1px solid var(--line);
    border-top: 2px solid var(--signal);
    padding: 2rem;
    background: rgb(var(--scrim) / .6);
  }
  .lead-form__h {
    font-family: var(--f-mono);
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.8rem;
  }
  .field { margin-bottom: 1.15rem; }
  .field label {
    display: block;
    font-family: var(--f-mono);
    font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .45rem;
  }
  .field input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: .55rem 0;
    font-size: .95rem;
    border-radius: 0;
    transition: border-color var(--t-fast);
  }
  .field input:hover { border-color: var(--muted); }
  .field input:focus { outline: none; border-color: var(--signal); }
  .field input:focus-visible { outline: none; }
  .field.is-bad input { border-color: #d9483b; }

  .field__opt {
    text-transform: none;
    letter-spacing: .02em;
    opacity: .7;
  }
  .field__opt::before { content: "· "; }

  .field__hint {
    margin-top: .5rem;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--muted);
  }

  /* fájlfeltöltés — a natív vezérlő felirata a böngésző nyelvét
     követi, ezért elrejtjük és saját gombot adunk hozzá. Az input
     fókuszálható marad, a fókuszgyűrűt a sor kapja. */
  .file-row {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .9rem;
  }
  .file-row input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    padding: 0; border: 0;
  }
  .file-btn {
    display: inline-block;
    margin: 0;
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
  }
  .file-btn:hover { border-color: var(--signal); }
  .file-row:focus-within .file-btn { outline: 2px solid var(--signal); outline-offset: 3px; }
  .field--file.is-bad .file-btn { border-color: #d9483b; }

  .file-name {
    font-size: .8rem;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .file-name.has-file { color: var(--fg); }

  .check a {
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    transition: border-color var(--t-fast);
  }
  .check a:hover { border-color: var(--signal); }

  /* adatkezelési jelölőnégyzet — a .field label mono stílusát felülírjuk */
  .field--check .check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0;
    font-family: inherit;
    font-size: .8rem; line-height: 1.5;
    letter-spacing: normal; text-transform: none;
    color: var(--fg);
    cursor: pointer;
  }
  .field--check input[type="checkbox"] {
    flex: none;
    width: 1.05rem; height: 1.05rem;
    margin: .15rem 0 0;
    padding: 0;
    border: 0;
    accent-color: var(--signal);
    cursor: pointer;
  }
  .field--check input[type="checkbox"]:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  .field--check.is-bad input[type="checkbox"] { outline: 1px solid #d9483b; outline-offset: 2px; }

  /* rovarfogó — emberi szemnek láthatatlan, robotnak kitölthető */
  .hp {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .err {
    font-family: var(--f-mono);
    font-size: .64rem; letter-spacing: .04em;
    color: #d9483b;
    margin-top: .35rem;
    min-height: 0;
  }
  .lead-form .btn { margin-top: .8rem; }
  .lead-form__note {
    margin-top: 1rem;
    font-size: .72rem; line-height: 1.5;
    color: var(--muted);
  }
  .lead-form__note a {
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    transition: border-color var(--t-fast);
  }
  .lead-form__note a:hover { border-color: var(--signal); }
  .form-status {
    margin-top: 1rem;
    font-family: var(--f-mono);
    font-size: .7rem; line-height: 1.5;
    color: var(--fg);
  }
  .form-status:empty { margin: 0; }
  .form-status.is-ok { color: var(--fg); border-left: 2px solid var(--signal); padding-left: .7rem; }
  .form-status.is-bad { color: #d9483b; }
}

/* ---------- lábléc ------------------------------------------ */
@layer footer {
  .site-footer {
    position: relative; z-index: 2;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 4rem 0 2.5rem;
  }
  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
  .foot-brand {
    font-family: var(--f-display);
    font-weight: 800; font-stretch: 118%; text-transform: uppercase;
    font-size: 1.15rem;
    margin-bottom: .5rem;
  }
  .foot-lbl {
    font-family: var(--f-mono);
    font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .8rem;
  }
  .site-footer p { font-size: .88rem; }
  .foot-muted { color: var(--muted); font-size: .82rem; }
  .site-footer a { border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
  .site-footer a:hover { border-color: var(--signal); }
  .foot-legal {
    margin-top: 3.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line-2);
    display: flex; flex-wrap: wrap; gap: .5rem 1.8rem;
    font-family: var(--f-mono);
    font-size: .66rem; letter-spacing: .08em;
    color: var(--muted);
  }
  .foot-legal a { color: var(--muted); }
  .foot-legal a:hover { color: var(--fg); }

  /* „Sütibeállítások”: gomb, mert hozzájárulást von vissza, nem navigál —
     de a lábléc jogi hivatkozásaival azonos megjelenéssel. */
  .foot-consent {
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 0;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .foot-consent:hover { color: var(--fg); border-color: var(--signal); }
}

/* ---------- megjelenési animáció ---------------------------- */
@layer reveal {
  .r { opacity: 0; transform: translateY(14px); }
  .r.is-in {
    opacity: 1; transform: none;
    transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
  }
  .card > .r:nth-child(2).is-in,
  .steps li:nth-child(2).is-in,
  .proof__item:nth-child(2).is-in,
  .logos li:nth-child(2).is-in { transition-delay: .07s; }
  .card > .r:nth-child(3).is-in,
  .steps li:nth-child(3).is-in,
  .proof__item:nth-child(3).is-in,
  .logos li:nth-child(3).is-in { transition-delay: .14s; }
  .card > .r:nth-child(4).is-in { transition-delay: .21s; }
  .card > .r:nth-child(5).is-in { transition-delay: .28s; }
  .card > .r:nth-child(6).is-in { transition-delay: .35s; }
}

/* ---------- reszponzív -------------------------------------- */
@layer responsive {
  @media (max-width: 1200px) {
    :root { --rail: 4rem; }
    #classes, #edge-label { display: none; }
  }

  @media (max-width: 1000px) {
    :root { --ui: 1.1rem; --cube: min(62vw, 30vh, 300px); --card-w: 34rem; }

    /* Egy hasábban a kocka a szöveg fölé kerül, nem mögé: a felső
       sávban ül, a fátyol csak alatta kezdődik. Középre igazítva
       eltűnne a kártya alatt. */
    #stage { place-items: start center; padding-top: 7vh; }

    .scene,
    .scene--right {
      align-items: flex-end;
      justify-content: center;
      padding: 34vh 1.5rem 6rem;
      min-height: 100vh;
    }
    .scene::before {
      background: linear-gradient(
        to bottom,
        rgb(var(--scrim) / 0) 18%,
        rgb(var(--scrim) / .6) 28%,
        rgb(var(--scrim) / .95) 34%,
        rgb(var(--scrim) / .99) 42%
      );
    }
    #hero .card { width: 100%; }

    /* A kapcsoló a tartalom fölött lebeg, ezért saját alapot kap. */
    #theme_toggle {
      background: rgb(var(--scrim) / .92);
      backdrop-filter: blur(6px);
    }
    .scene--right::before { transform: none; }
    .scene--right .card,
    .scene--right .card .closer { text-align: left; }
    .scene--right .card .lead,
    .scene--right .card .list,
    .scene--right .card .ranked,
    .scene--right .card .closer { margin-left: 0; }
    .scene--right .card .closer { border-right: 0; border-left: 2px solid var(--signal); padding-right: 0; padding-left: 1rem; }
    .scene--right .card .actions { justify-content: flex-start; }
    .card { width: 100%; }
    .scroll-hint { left: 1.5rem; bottom: 1.2rem; }

    #hud { width: 6.5rem; }
    .cta-grid { grid-template-columns: 1fr; gap: 3rem; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 720px) {
    body { font-size: 15px; }
    :root { --cube: min(76vw, 40vh, 330px); }
    /* Hosszú magyar összetett szavak (pl. „flottabiztosításról")
       különben kilógnának a keskeny kijelzőn. */
    h1, .h-lead {
      font-size: clamp(1.45rem, 6.2vw, 2rem);
      overflow-wrap: break-word;
      hyphens: auto;
    }
    .site-header { padding: .85rem 1.1rem; }
    .brand__logo { width: 7.5rem; }
    .brand__sub { display: none; }
    .header-tel { display: none; }
    /* alul hely a rögzített kapcsolónak és a mutatónak, hogy ne
       lógjanak rá a szövegre */
    .scene, .scene--right { padding-top: 32vh; padding-bottom: 6.5rem; }
    /* A görgetésjelző, a rotációmutató és a témakapcsoló a kocka
       desktop kísérői — keskeny kijelzőn a tartalomra lógnának.
       A téma ilyenkor a rendszerbeállítást követi. */
    .scroll-hint, #hud, #theme_toggle { display: none; }
    .proof { grid-template-columns: 1fr; gap: 2.2rem; }
    .steps { grid-template-columns: 1fr; gap: 2rem; }
    .band--proof { padding: 3.5rem 0; }
    .band--steps, .band--cta { padding: 4.5rem 0; }
    .band--logos { padding: 2.5rem 0; }
    .logos { gap: 1.75rem 2.5rem; }
    .logos__img { height: 1.9rem; }
    .logos__img--cert { height: 3rem; }
    .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
    .foot-legal { gap: .4rem 1.2rem; }
    .lead-form { padding: 1.4rem; }
    #theme_toggle { width: 2rem; height: 2rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
    .r { opacity: 1; transform: none; }
  }
}