/* ══════════════════════════════════════════════════════════════════════
   Compsolution — megosztott CSS (base.css)
   ══════════════════════════════════════════════════════════════════════
   Ez a 4 élő böngészős lap (index, videnza, it-allapotfelmeres,
   adatkezelesi-tajekoztato) közös törzse: márka-tokenek (világos + sötét,
   duplikálva — ld. lent), reset, tipográfia, nav, hero-alapok, gomb-,
   kártya- és form-komponensek, footer, animációk, a globális reszponzív
   szabályok és a téma-váltó gomb stílusa.

   Lap-specifikus stílus (pl. .itf-*, .vm-*, .legal-*, és minden érték,
   ami csak egyetlen lapon tér el egy megosztott komponenstől) NEM ide,
   hanem a lap saját <style> blokkjába kerül.

   Egy maroknyi, egyébként "közösnek látszó" szabály (pl. a bare "section {}",
   ".container {}", "html {}", ".solution-* ") SZÁNDÉKOSAN NINCS itt, mert
   index.html-nek saját, ELTÉRŐ értéke van ugyanarra a szelektorra —
   idehozva kettőzött alkalmazást / eltérést okozna. Ezek a lap saját
   <style> blokkjában maradnak, minden olyan lapon, ahol eredetileg is
   szerepeltek.

   NE nyúlj a compsolution-termeklapok.html-hez ebből a fájlból: az saját
   tokenrendszerrel (Nunito font, nyomtatási elrendezés) dolgozik, tudatosan
   különálló.
   ══════════════════════════════════════════════════════════════════════ */

      /* ══════════════════════════════════════════════════════════════
         MÁRKAVÁLTOZÓK — VILÁGOS. Ezek az értékek a mai arculat.
         ══════════════════════════════════════════════════════════════ */
      :root {
        color-scheme: light;

        /* Felületek — öt szint. Világos módban három szándékosan azonos
           (#ffffff); a felbontás csak a sötét hierarchiát szolgálja. */
        --bg: #ffffff;
        --surface: #f0f5fb;
        --surface-2: #e8f0f8;
        --surface-card: #ffffff;
        --surface-raised: #ffffff;
        --field-bg: #ffffff;
        /* Mező-placeholder. Külön token, mert a böngésző UA-alapértékére
           (#757575) hagyva a sötét --field-bg-n csak 3,72:1 lenne, ami AA
           alatt van. A világos érték az ink-rampán áll (--ink-light-tól a
           --ink-mid felé 20%-ot lépve): 4,90:1 a mai 4,61 helyett — a mező
           karaktere nem változik, csak a semleges szürke áll be a lap
           hideg ink-családjába. */
        --field-placeholder: #5c738c;
        --border: #d1e0ef;
        --border-strong: #d1e0ef;
        --border-light: #e8f0f8;
        --footer-bg: #1a2332;

        /* Szöveg */
        --ink: #1a2332;
        --ink-mid: #3d4f63;
        --ink-light: #647c96;
        --ink-faint: #7a8da3;
        --on-footer: rgba(255, 255, 255, 0.85);
        --on-footer-faint: rgba(255, 255, 255, 0.35);
        --on-footer-accent: #60a5fa;

        /* Akcentus — kék */
        --accent: #1e5fc4;
        --accent-hover: #1749a8;
        --accent-text: #1e5fc4;
        --accent-2: #0ea5e9;
        --accent-light: #dbeafe;
        --accent-soft: #c7daf8;
        --accent-on-soft: #1749a8;
        --accent-ring: #93c5fd;
        --accent-wash: #eaf3fd;
        --on-accent: #ffffff;

        /* Akcentus — meleg */
        --accent-warm: #f59e0b;
        --accent-warm-2: #f97316;
        --warm-soft: #fef3c7;
        --warm-on-soft: #92400e;
        --on-accent-warm: #ffffff;

        /* Funkcionális */
        --green: #059669;
        --green-soft: #d1fae5;
        --danger: #dc2626;
        --danger-soft: #fef2f2;
        --danger-ring: #fecaca;

        /* Hero-környezet */
        --hero-bg-1: #f0f6fc;
        --hero-bg-2: #d4e1f0;
        --hero-bg-3: #b8c8df;
        --hero-glow: rgba(30, 95, 196, 0.06);
        --hero-rule: rgba(30, 95, 196, 0.15);
        --hero-chip-bg: rgba(255, 255, 255, 0.55);
        --hero-chip-border: rgba(209, 224, 239, 0.7);

        /* Nav */
        --nav-bg: rgba(255, 255, 255, 0.92);
        --menu-bg: rgba(255, 255, 255, 0.97);

        /* Hero-illusztráció festése — a markup fill/stroke literáljait váltja ki */

        /* Árnyék-színek — a geometria a szabályban marad, csak a szín jön tokenből.
           A drop shadow sötét módban fekete alapú (a kék glow eltűnne a sötét
           felületen), a hue-jelző glow (primary gomb, azure, warm) színes marad. */
        --shadow-accent: rgba(30, 95, 196, 0.25);
        --shadow-accent-strong: rgba(30, 95, 196, 0.35);
        --shadow-accent-inset: rgba(30, 95, 196, 0.2);
        --shadow-accent-muted: rgba(30, 95, 196, 0.15);
        --shadow-soft-06: rgba(30, 95, 196, 0.06);
        --shadow-soft-07: rgba(30, 95, 196, 0.07);
        --shadow-soft-08: rgba(30, 95, 196, 0.08);
        --shadow-soft-10: rgba(30, 95, 196, 0.1);
        --shadow-soft-12: rgba(30, 95, 196, 0.12);
        --shadow-lift-14: rgba(30, 95, 196, 0.14);
        --shadow-lift-16: rgba(30, 95, 196, 0.16);
        --shadow-ink-04: rgba(26, 35, 50, 0.04);
        --shadow-ink-06: rgba(26, 35, 50, 0.06);
        --shadow-ink-10: rgba(26, 35, 50, 0.1);
        --shadow-warm-12: rgba(245, 158, 11, 0.12);
        --shadow-warm-14: rgba(245, 158, 11, 0.14);
        --shadow-cyan: rgba(14, 165, 233, 0.1);
        --shadow-focus-ring: rgba(30, 95, 196, 0.1);
      }


      /* ══════════════════════════════════════════════════════════════
         SÖTÉT — hideg kék-szürke. A blokk KÉTSZER szerepel: egyszer az
         OS-automatikához, egyszer a kézi felülíráshoz. A kettőt tartsd
         egymás mellett és azonos sorrendben, hogy ne csússzanak el.
         Miért nem light-dark(): nem támogató böngészőn az EGÉSZ token
         érvénytelen lenne — olvashatatlan szöveg egy ügyfél-facing
         főoldalon. Duplikálás, kommenttel.
         ══════════════════════════════════════════════════════════════ */
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          color-scheme: dark;

          /* Felületek — öt szint. Világos módban három szándékosan azonos */
          --bg: #0d1522;
          --surface: #152136;
          --surface-2: #111c2c;
          --surface-card: #1b2840;
          --surface-raised: #24334e;
          --field-bg: #111c2c;
          --field-placeholder: #8399b6; /* = --ink-faint, 5,87:1 */
          --border: #2c3f5c;
          --border-strong: #4a6796;
          --border-light: #223148;
          --footer-bg: #0a121e;

          /* Szöveg */
          --ink: #e8f0fb;
          --ink-mid: #b7c8de;
          --ink-light: #93a8c4;
          --ink-faint: #8399b6;
          --on-footer: #dfe8f4;
          --on-footer-faint: #7e93b0;
          --on-footer-accent: #60a5fa;

          /* Akcentus — kék */
          --accent: #2b70de;
          --accent-hover: #1e5fc4;
          --accent-text: #60a5fa;
          --accent-2: #38bdf8;
          --accent-light: #132444;
          --accent-soft: #1a3260;
          --accent-on-soft: #a9caff;
          --accent-ring: #3a5c8f;
          --accent-wash: #16243c;
          --on-accent: #ffffff;

          /* Akcentus — meleg */
          --accent-warm: #f5a524;
          --accent-warm-2: #fb8b3c;
          --warm-soft: #3a2a0c;
          --warm-on-soft: #f8cd7a;
          --on-accent-warm: #1a1204;

          /* Funkcionális */
          --green: #34d399;
          --green-soft: #0e3529;
          --danger: #f98b8b;
          --danger-soft: #331418;
          --danger-ring: #5d2328;

          /* Hero-környezet */
          --hero-bg-1: #0f1a2b;
          --hero-bg-2: #14243a;
          --hero-bg-3: #1b2c47;
          --hero-glow: rgba(96, 165, 250, 0.1);
          --hero-rule: rgba(96, 165, 250, 0.18);
          --hero-chip-bg: rgba(42, 61, 92, 0.55);
          --hero-chip-border: rgba(90, 116, 156, 0.5);

          /* Nav */
          --nav-bg: rgba(13, 21, 34, 0.88);
          --menu-bg: rgba(26, 40, 64, 0.97);

          /* Hero-illusztráció festése — a markup fill/stroke literáljait váltja ki */

          /* Árnyék-színek — a geometria a szabályban marad, csak a szín jön
             tokenből. A fokozat-szám (-04/-06/-07/-08/-10/-12/-14/-16) a
             VILÁGOS alfaértékből származik — onnan jött a token neve.
             Sötétben az alfák szándékosan nem követik ezt a sorrendet (a
             -06 erősebb, mint a -08), mert ott más a mélység-mechanika: a
             számot NE olvasd sötét alfa-sorrendnek. */
          --shadow-accent: rgba(20, 70, 150, 0.55);
          --shadow-accent-strong: rgba(43, 112, 222, 0.42);
          --shadow-accent-inset: rgba(0, 0, 0, 0.5);
          --shadow-accent-muted: rgba(20, 70, 150, 0.3);
          --shadow-soft-06: rgba(0, 0, 0, 0.38);
          --shadow-soft-07: rgba(0, 0, 0, 0.38);
          --shadow-soft-08: rgba(0, 0, 0, 0.3);
          --shadow-soft-10: rgba(0, 0, 0, 0.38);
          --shadow-soft-12: rgba(0, 0, 0, 0.45);
          --shadow-lift-14: rgba(0, 0, 0, 0.55);
          --shadow-lift-16: rgba(0, 0, 0, 0.55);
          --shadow-ink-04: rgba(0, 0, 0, 0.3);
          --shadow-ink-06: rgba(0, 0, 0, 0.4);
          --shadow-ink-10: rgba(0, 0, 0, 0.62);
          --shadow-warm-12: rgba(245, 165, 36, 0.16);
          --shadow-warm-14: rgba(245, 165, 36, 0.16);
          --shadow-cyan: rgba(56, 189, 248, 0.14);
          --shadow-focus-ring: rgba(96, 165, 250, 0.22);
        }
      }


      /* Kézi felülírás — ugyanazok a dark értékek, azonos sorrendben. */
      :root[data-theme="dark"] {
        color-scheme: dark;

        /* Felületek — öt szint. Világos módban három szándékosan azonos */
        --bg: #0d1522;
        --surface: #152136;
        --surface-2: #111c2c;
        --surface-card: #1b2840;
        --surface-raised: #24334e;
        --field-bg: #111c2c;
        --field-placeholder: #8399b6; /* = --ink-faint, 5,87:1 */
        --border: #2c3f5c;
        --border-strong: #4a6796;
        --border-light: #223148;
        --footer-bg: #0a121e;

        /* Szöveg */
        --ink: #e8f0fb;
        --ink-mid: #b7c8de;
        --ink-light: #93a8c4;
        --ink-faint: #8399b6;
        --on-footer: #dfe8f4;
        --on-footer-faint: #7e93b0;
        --on-footer-accent: #60a5fa;

        /* Akcentus — kék */
        --accent: #2b70de;
        --accent-hover: #1e5fc4;
        --accent-text: #60a5fa;
        --accent-2: #38bdf8;
        --accent-light: #132444;
        --accent-soft: #1a3260;
        --accent-on-soft: #a9caff;
        --accent-ring: #3a5c8f;
        --accent-wash: #16243c;
        --on-accent: #ffffff;

        /* Akcentus — meleg */
        --accent-warm: #f5a524;
        --accent-warm-2: #fb8b3c;
        --warm-soft: #3a2a0c;
        --warm-on-soft: #f8cd7a;
        --on-accent-warm: #1a1204;

        /* Funkcionális */
        --green: #34d399;
        --green-soft: #0e3529;
        --danger: #f98b8b;
        --danger-soft: #331418;
        --danger-ring: #5d2328;

        /* Hero-környezet */
        --hero-bg-1: #0f1a2b;
        --hero-bg-2: #14243a;
        --hero-bg-3: #1b2c47;
        --hero-glow: rgba(96, 165, 250, 0.1);
        --hero-rule: rgba(96, 165, 250, 0.18);
        --hero-chip-bg: rgba(42, 61, 92, 0.55);
        --hero-chip-border: rgba(90, 116, 156, 0.5);

        /* Nav */
        --nav-bg: rgba(13, 21, 34, 0.88);
        --menu-bg: rgba(26, 40, 64, 0.97);

        /* Hero-illusztráció festése — a markup fill/stroke literáljait váltja ki */

        /* Árnyék-színek — a geometria a szabályban marad, csak a szín jön
           tokenből. A fokozat-szám (-04/-06/-07/-08/-10/-12/-14/-16) a
           VILÁGOS alfaértékből származik — onnan jött a token neve.
           Sötétben az alfák szándékosan nem követik ezt a sorrendet (a
           -06 erősebb, mint a -08), mert ott más a mélység-mechanika: a
           számot NE olvasd sötét alfa-sorrendnek. */
        --shadow-accent: rgba(20, 70, 150, 0.55);
        --shadow-accent-strong: rgba(43, 112, 222, 0.42);
        --shadow-accent-inset: rgba(0, 0, 0, 0.5);
        --shadow-accent-muted: rgba(20, 70, 150, 0.3);
        --shadow-soft-06: rgba(0, 0, 0, 0.38);
        --shadow-soft-07: rgba(0, 0, 0, 0.38);
        --shadow-soft-08: rgba(0, 0, 0, 0.3);
        --shadow-soft-10: rgba(0, 0, 0, 0.38);
        --shadow-soft-12: rgba(0, 0, 0, 0.45);
        --shadow-lift-14: rgba(0, 0, 0, 0.55);
        --shadow-lift-16: rgba(0, 0, 0, 0.55);
        --shadow-ink-04: rgba(0, 0, 0, 0.3);
        --shadow-ink-06: rgba(0, 0, 0, 0.4);
        --shadow-ink-10: rgba(0, 0, 0, 0.62);
        --shadow-warm-12: rgba(245, 165, 36, 0.16);
        --shadow-warm-14: rgba(245, 165, 36, 0.16);
        --shadow-cyan: rgba(56, 189, 248, 0.14);
        --shadow-focus-ring: rgba(96, 165, 250, 0.22);
      }



      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Inter", sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }


      /* ── NAV (megegyezik a többi aloldallal) ── */
      nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--nav-bg);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-light);
        padding: 0 32px;
      }

      .nav-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
      }


      /* Logó wordmark: Comp kék, solution sötét */
      .nav-brand {
        font-family: "Sora", sans-serif;
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--ink);
        text-decoration: none;
        letter-spacing: -0.025em;
      }

      .nav-brand span {
        color: var(--accent-text);
      }


      .nav-links {
        display: flex;
        gap: 28px;
        list-style: none;
      }

      .nav-links a {
        font-size: 0.85rem;
        color: var(--ink-mid);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
      }

      .nav-links a:hover {
        color: var(--accent-text);
      }


      /* Fókusz-jelző billentyűzethez */
      .nav-links a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
        border-radius: 3px;
      }


      .nav-cta {
        background: var(--accent);
        color: var(--on-accent) !important;
        padding: 8px 18px;
        border-radius: 6px;
        font-weight: 600 !important;
        font-size: 0.83rem !important;
        transition: background 0.2s !important;
      }

      .nav-cta:hover {
        background: var(--accent-hover) !important;
      }


      /* Hamburger gomb — 700px alatt látható */
      .nav-hamburger {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 6px;
        color: var(--ink);
        transition: background 0.15s;
      }

      .nav-hamburger:hover {
        background: var(--surface);
      }

      .nav-hamburger:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
      }

      .nav-hamburger svg {
        display: block;
      }


      /* Mobil menü */
      .nav-mobile {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--menu-bg);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        padding: 16px 24px 20px;
        list-style: none;
        flex-direction: column;
        gap: 4px;
        z-index: 99;
        box-shadow: 0 8px 24px var(--shadow-ink-10);
      }

      .nav-mobile.open {
        display: flex;
      }

      .nav-mobile li a {
        display: block;
        font-size: 0.92rem;
        color: var(--ink-mid);
        text-decoration: none;
        font-weight: 500;
        padding: 10px 14px;
        border-radius: 8px;
        transition:
          background 0.15s,
          color 0.15s;
      }

      .nav-mobile li a:hover {
        background: var(--surface);
        color: var(--accent-text);
      }

      .nav-mobile li a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
      }

      .nav-mobile .nav-cta {
        background: var(--accent) !important;
        color: var(--on-accent) !important;
        margin-top: 8px;
        text-align: center;
      }


      @media (max-width: 700px) {
        .nav-links {
          display: none;
        }
        .nav-hamburger {
          display: block;
        }
      }


      /* ── HERO v2 ── */
      .hero {
        background: linear-gradient(
          135deg,
          var(--hero-bg-1) 0%,
          var(--hero-bg-2) 45%,
          var(--hero-bg-3) 100%
        );
        border-bottom: 1px solid var(--border);
        padding: 80px 32px 72px;
        position: relative;
        overflow: visible;
        z-index: 2;
      }

      .hero-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 48px;
        align-items: start;
        position: relative;
      }

      .hero-text {
        max-width: 540px;
        position: relative;
        z-index: 1;
      }

      .hero-visual {
        position: relative;
        min-height: 470px;
      }

      .hero-visual::before {
        content: "";
        position: absolute;
        inset: -20px -40px -20px -20px;
        background: radial-gradient(
          ellipse at 60% 40%,
          var(--hero-glow) 0%,
          transparent 70%
        );
        border-radius: 50%;
        pointer-events: none;
        z-index: -1;
      }

      .hero-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 530px;
        aspect-ratio: 600 / 620;
        pointer-events: none;
        z-index: 0;
      }


      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent-on-soft);
        background: var(--accent-soft);
        border: 1px solid var(--accent-ring);
        padding: 5px 14px;
        border-radius: 20px;
        margin-bottom: 24px;
        animation: fadeUp 0.5s ease both;
      }

      .hero-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--accent);
        border-radius: 50%;
        flex-shrink: 0;
        animation: blink 1.8s ease-in-out infinite;
      }

      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.25;
        }
      }


      .hero-headline {
        font-family: "Sora", sans-serif;
        font-size: clamp(2.4rem, 4.5vw, 3.4rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.035em;
        color: var(--ink);
        margin-bottom: 24px;
        animation: fadeUp 0.5s 0.1s ease both;
      }

      .hero-headline em {
        font-style: normal;
        color: var(--accent-text);
        position: relative;
      }

      .hero-headline em::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        border-radius: 2px;
        transform-origin: left;
        animation: slideIn 0.7s 0.8s ease both;
      }

      @keyframes slideIn {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }


      .hero-sub {
        font-size: 1.02rem;
        color: var(--ink-mid);
        max-width: 500px;
        line-height: 1.72;
        margin-bottom: 32px;
        animation: fadeUp 0.5s 0.2s ease both;
      }

      .hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        animation: fadeUp 0.5s 0.3s ease both;
      }


      .btn-primary {
        background: var(--accent);
        color: var(--on-accent);
        padding: 14px 32px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.92rem;
        text-decoration: none;
        transition:
          background 0.2s,
          transform 0.15s,
          box-shadow 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 16px var(--shadow-accent);
      }

      .btn-primary:hover {
        background: var(--accent-hover);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px var(--shadow-accent-strong);
      }

      .btn-primary:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px var(--shadow-accent-inset);
        transition:
          transform 0.08s,
          box-shadow 0.08s;
      }


      .btn-secondary {
        background: transparent;
        color: var(--accent-text);
        border: 2px solid var(--accent-ring);
        padding: 12px 26px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.92rem;
        text-decoration: none;
        transition:
          background 0.2s,
          border-color 0.2s,
          color 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .btn-secondary:hover {
        background: var(--accent-wash);
        border-color: var(--accent);
      }

      .btn-secondary:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }


      .hero-trust {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        width: max-content;
        margin-top: 32px;
        padding-top: 32px;
        border-top: 1px solid var(--hero-rule);
        animation: fadeUp 0.5s 0.4s ease both;
      }

      .hero-trust-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--ink-mid);
        background: var(--hero-chip-bg);
        border: 1px solid var(--hero-chip-border);
        backdrop-filter: blur(4px);
        padding: 5px 7px;
        border-radius: 20px;
      }

      .hero-trust-item svg {
        width: 14px;
        height: 14px;
        stroke: var(--green);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
      }


      /* Panel float animációk */
      .panel-1,
      .panel-2,
      .panel-3 {
        transform-origin: 0 0;
      }

      .panel-1 {
        animation: panelFloat1 6s ease-in-out infinite;
      }

      .panel-2 {
        animation: panelFloat2 7s ease-in-out 0.8s infinite;
      }

      .panel-3 {
        animation: panelFloat3 8s ease-in-out 0.4s infinite;
      }


      @keyframes panelFloat1 {
        0%,
        100% {
          transform: translate(290px, 10px);
        }
        50% {
          transform: translate(290px, 4px);
        }
      }

      @keyframes panelFloat2 {
        0%,
        100% {
          transform: translate(20px, 165px);
        }
        50% {
          transform: translate(20px, 170px);
        }
      }

      @keyframes panelFloat3 {
        0%,
        100% {
          transform: translate(200px, 365px);
        }
        50% {
          transform: translate(200px, 360px);
        }
      }


      /* ── PROBLEM STRIP ── */
      .problems {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 72px 32px 56px;
        position: relative;
        z-index: 1;
      }

      .section-eyebrow {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-light);
        margin-bottom: 20px;
      }

      .problems-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
      }

      .problem-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 20px 22px;
        border-left: 3px solid var(--accent);
      }

      .problem-card p {
        font-size: 0.86rem;
        color: var(--ink-mid);
        line-height: 1.6;
        font-style: italic;
      }

      .section-header {
        text-align: center;
        margin-bottom: 56px;
      }

      .section-tag {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent-on-soft);
        background: var(--accent-soft);
        padding: 4px 12px;
        border-radius: 20px;
        margin-bottom: 14px;
      }

      .section-title {
        font-family: "Sora", sans-serif;
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ink);
        line-height: 1.25;
        margin-bottom: 14px;
      }

      .section-sub {
        font-size: 0.95rem;
        color: var(--ink-light);
        max-width: 540px;
        margin: 0 auto;
        line-height: 1.7;
      }


      /* ── TABS ── */
      .expertise-tabs {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 48px;
      }

      .tab-btn {
        padding: 9px 22px;
        border-radius: 30px;
        font-size: 0.83rem;
        font-weight: 600;
        cursor: pointer;
        border: 2px solid var(--border-strong);
        background: var(--surface-card);
        color: var(--ink-mid);
        transition: all 0.2s;
      }

      .tab-btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
      }

      .tab-btn:hover:not(.active) {
        border-color: var(--accent);
        color: var(--accent-text);
      }

      .tab-panel {
        display: none;
      }

      .tab-panel.active {
        display: grid;
      }


      /* ── SERVICE CARDS ── */
      .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
      }

      .service-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 28px;
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          transform 0.2s;
      }

      .service-card:hover {
        border-color: var(--accent);
        box-shadow: 0 6px 24px var(--shadow-soft-10);
        transform: translateY(-2px);
      }

      .service-icon {
        width: 44px;
        height: 44px;
        background: var(--accent-light);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
      }

      .service-icon svg {
        width: 22px;
        height: 22px;
        stroke: var(--accent-text);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .service-title {
        font-family: "Sora", sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--ink);
        margin-bottom: 8px;
      }

      .service-desc {
        font-size: 0.83rem;
        color: var(--ink-light);
        line-height: 1.65;
      }


      /* ── MEGOLDÁSOK (termék-kártyák — szándékosan eltérnek a service-card-tól) ── */
      .solutions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .solution-card:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      .solution-card.coming-soon {
        background: var(--surface);
      }

      .solution-card.coming-soon:hover {
        border-color: var(--accent-warm);
        box-shadow: 0 10px 32px var(--shadow-warm-14);
      }

      .solution-badge {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--on-accent-warm);
        background: var(--accent-warm);
        padding: 4px 10px;
        border-radius: 20px;
        margin-bottom: 18px;
      }

      .solution-icon {
        width: 52px;
        height: 52px;
        background: var(--surface-2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
      }

      .solution-icon svg {
        width: 26px;
        height: 26px;
        stroke: var(--ink-light);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .solution-title {
        font-family: "Sora", sans-serif;
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--ink);
        margin-bottom: 10px;
      }

      .solution-desc {
        font-size: 0.88rem;
        color: var(--ink-mid);
        line-height: 1.7;
        margin-bottom: 26px;
      }

      .solution-cta {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: 0.86rem;
        color: var(--accent-text);
      }

      .solution-card.coming-soon .solution-cta {
        color: var(--ink-mid);
      }

      .solution-cta svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s;
      }

      .solution-card:hover .solution-cta svg {
        transform: translateX(3px);
      }


      /* ── AZURE ── */
      .azure-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
      }

      .azure-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 20px 22px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }

      .azure-card:hover {
        border-color: var(--accent-2);
        box-shadow: 0 4px 16px var(--shadow-cyan);
      }

      .azure-num {
        font-family: "Sora", sans-serif;
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--accent-2);
        opacity: 0.5;
        line-height: 1;
        min-width: 28px;
        padding-top: 2px;
      }

      .azure-title {
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--ink);
        margin-bottom: 5px;
      }

      .azure-desc {
        font-size: 0.81rem;
        color: var(--ink-light);
        line-height: 1.6;
      }


      /* ── NETWORK ── */
      .network-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
      }

      .network-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 24px 26px;
        border-top: 3px solid var(--accent-warm);
        transition: box-shadow 0.2s;
      }

      .network-card:hover {
        box-shadow: 0 4px 16px var(--shadow-warm-12);
      }

      .network-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--warm-on-soft);
        margin-bottom: 8px;
      }

      .network-title {
        font-family: "Sora", sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--ink);
        margin-bottom: 8px;
      }

      .network-desc {
        font-size: 0.82rem;
        color: var(--ink-light);
        line-height: 1.65;
      }


      /* ── TEAM ── */
      .team-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 28px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .team-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 36px 32px;
        position: relative;
        overflow: hidden;
      }

      .team-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
      }

      .team-card.warm::before {
        background: linear-gradient(90deg, var(--accent-warm), var(--accent-warm-2));
      }

      .team-role-badge {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent-on-soft);
        background: var(--accent-soft);
        padding: 3px 10px;
        border-radius: 20px;
        margin-bottom: 14px;
      }

      .team-role-badge.warm {
        color: var(--warm-on-soft);
        background: var(--warm-soft);
      }

      .team-photo-placeholder {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--surface-2);
        border: 2px dashed var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
      }

      .team-photo-placeholder svg {
        width: 32px;
        height: 32px;
        stroke: var(--ink-faint);
      }

      .team-name {
        font-family: "Sora", sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 4px;
      }

      .team-title {
        font-size: 0.85rem;
        color: var(--ink-light);
        margin-bottom: 18px;
      }

      .team-bio {
        font-size: 0.86rem;
        color: var(--ink-mid);
        line-height: 1.7;
        margin-bottom: 20px;
      }

      .team-certs {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .team-cert {
        font-size: 0.72rem;
        color: var(--ink-mid);
        background: var(--surface);
        border: 1px solid var(--border);
        padding: 3px 9px;
        border-radius: 4px;
        font-weight: 500;
      }


      /* ── REFERENCES ── */
      .ref-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .ref-card {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 26px 28px;
      }

      .ref-sector {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent-text);
        margin-bottom: 8px;
      }

      .ref-client {
        font-family: "Sora", sans-serif;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--ink);
        margin-bottom: 10px;
      }

      .ref-body {
        font-size: 0.84rem;
        color: var(--ink-light);
        line-height: 1.65;
      }

      .ref-tag {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--green);
        background: var(--green-soft);
        padding: 2px 8px;
        border-radius: 20px;
        margin-top: 10px;
      }


      /* ── WHY ── */
      .why-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 32px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .why-item {
        text-align: center;
        padding: 8px;
      }

      .why-icon {
        width: 56px;
        height: 56px;
        background: var(--accent-light);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
      }

      .why-icon svg {
        width: 26px;
        height: 26px;
        stroke: var(--accent-text);
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .why-title {
        font-family: "Sora", sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--ink);
        margin-bottom: 8px;
      }

      .why-text {
        font-size: 0.83rem;
        color: var(--ink-light);
        line-height: 1.65;
      }


      /* ── CONTACT ── */
      .cta-section {
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 80px 32px;
      }

      .cta-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: start;
      }

      @media (max-width: 820px) {
        .cta-inner {
          grid-template-columns: 1fr;
          gap: 40px;
        }
      }


      .cta-left .section-tag {
        background: var(--accent-soft);
        color: var(--accent-on-soft);
        border: 1px solid var(--accent-ring);
      }

      .cta-left .section-title {
        text-align: left;
        margin-bottom: 16px;
      }

      .cta-left .section-sub {
        text-align: left;
        margin: 0 0 32px;
      }

      .cta-promise {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .cta-promise-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.87rem;
        color: var(--ink-mid);
        font-weight: 500;
      }

      .cta-promise-item svg {
        width: 18px;
        height: 18px;
        stroke: var(--green);
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
      }


      /* ── FORM ── */
      .contact-form {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 36px;
        box-shadow: 0 4px 24px var(--shadow-soft-07);
      }

      .form-title {
        font-family: "Sora", sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 24px;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      @media (max-width: 500px) {
        .form-row {
          grid-template-columns: 1fr;
        }
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 14px;
      }

      .form-group label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--ink-mid);
      }


      /* Fehér háttér a form mezőknek (kontraszt javítás) */
      .form-group input,
      .form-group select,
      .form-group textarea {
        font-family: "Inter", sans-serif;
        font-size: 0.88rem;
        color: var(--ink);
        background: var(--field-bg);
        border: 1.5px solid var(--border-strong);
        border-radius: 8px;
        padding: 10px 14px;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
        outline: none;
        width: 100%;
      }

      /* A placeholder színét nem hagyjuk a böngésző UA-alapértékére: az a
         sötét --field-bg-n csak 3,72:1, ami AA alatt van. Tokenből jön
         (--field-placeholder), mindkét témában 4,5:1 fölé mérve. */
      .form-group input::placeholder,
      .form-group textarea::placeholder {
        color: var(--field-placeholder);
        /* A Firefox alapból .54 opacity-t tesz a placeholderre, ami visszavinné
           a kontrasztot — ezért explicit 1. */
        opacity: 1;
      }

      .form-group input:focus,
      .form-group select:focus,
      .form-group textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--shadow-focus-ring);
        background: var(--field-bg);
      }

      .form-group textarea {
        resize: vertical;
        min-height: 96px;
      }

      .form-group select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647c96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
        cursor: pointer;
      }


      /* Inline hibaüzenet a mezők alatt */
      .form-error {
        display: none;
        font-size: 0.76rem;
        color: var(--danger);
        margin-top: 4px;
        font-weight: 500;
      }

      .form-error.visible {
        display: block;
      }

      .form-group input.invalid,
      .form-group select.invalid,
      .form-group textarea.invalid {
        border-color: var(--danger);
      }


      /* Turnstile widget — illesztve a form ritmusához.
         A "flexible" méret a szülő szélességét tölti ki, ezért a wrappert
         nem középre igazított flexboxként, hanem teljes szélességű blokként
         kezeljük — így a widget ugyanolyan széles, mint a form mezői. */
      .form-captcha {
        margin: 14px 0 6px;
        width: 100%;
      }

      .form-captcha .cf-turnstile {
        width: 100%;
      }


      .form-submit {
        width: 100%;
        background: var(--accent);
        color: var(--on-accent);
        border: none;
        border-radius: 8px;
        padding: 13px 24px;
        font-family: "Sora", sans-serif;
        font-size: 0.92rem;
        font-weight: 600;
        cursor: pointer;
        transition:
          background 0.2s,
          transform 0.15s,
          box-shadow 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 6px;
        box-shadow: 0 4px 14px var(--shadow-accent);
      }

      .form-submit:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px var(--shadow-accent-strong);
      }

      .form-submit:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 4px 14px var(--shadow-accent-muted);
      }

      .form-submit svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .form-note {
        font-size: 0.74rem;
        color: var(--ink-faint);
        text-align: center;
        margin-top: 12px;
      }


      /* Küldés-státusz üzenet (siker/hiba a fetch válasza alapján) */
      .form-status {
        display: none;
        font-size: 0.82rem;
        font-weight: 500;
        text-align: center;
        margin-top: 14px;
        padding: 10px 14px;
        border-radius: 8px;
      }

      .form-status.visible {
        display: block;
      }

      .form-status.error {
        display: block;
        color: var(--danger);
        background: var(--danger-soft);
        border: 1px solid var(--danger-ring);
      }


      /* Honeypot mező — vizuálisan és screen reader számára is rejtve */
      .form-honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }


      /* A captcha alatti hibaüzenet középre igazítva (nincs form-group szülője) */
      .form-captcha + .form-error {
        text-align: center;
      }


      /* ── SUCCESS ── */
      .form-success {
        display: none;
        text-align: center;
        padding: 40px 20px;
      }

      .form-success.visible {
        display: block;
      }

      .success-icon {
        width: 64px;
        height: 64px;
        background: var(--green-soft);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
      }

      .success-icon svg {
        width: 32px;
        height: 32px;
        stroke: var(--green);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .success-title {
        font-family: "Sora", sans-serif;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 10px;
      }

      .success-sub {
        font-size: 0.87rem;
        color: var(--ink-light);
        line-height: 1.65;
      }


      /* ── FOOTER (megegyezik a többi oldallal) ── */
      footer {
        background: var(--footer-bg);
        padding: 28px 32px;
      }

      .footer-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
      }

      .footer-brand {
        font-family: "Sora", sans-serif;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--on-footer);
        letter-spacing: -0.025em;
      }

      .footer-brand span {
        color: var(--on-footer-accent);
      }

      .footer-note {
        font-size: 0.75rem;
        color: var(--on-footer-faint);
      }


      /* ── ANIMÁCIÓK ── */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }


      /* ── RESZPONZÍV ── */
      @media (max-width: 1000px) {
        .hero-grid {
          gap: 32px;
        }
        .hero-canvas {
          max-width: 420px;
        }
      }

      @media (max-width: 920px) {
        .problems {
          padding: 56px 24px 48px;
        }
      }


      /* ── TÉMA-VÁLTÓ ── */
      /* A wordmark és a váltó egy csoportban: a .nav-inner így pontosan 3
         gyerekes marad, tehát a space-between és a nav-linkek helye nem
         mozdul el egyetlen viewporton sem. */
      .nav-brand-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .theme-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        padding: 0;
        background: none;
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--ink-faint);
        cursor: pointer;
        transition:
          background-color 0.15s,
          color 0.15s,
          border-color 0.15s;
      }

      .theme-toggle:hover {
        background: var(--surface);
        color: var(--accent-text);
      }

      .theme-toggle:active {
        background: var(--surface-2);
      }

      .theme-toggle:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
      }

      /* Kézi felülírás kiemelve — különben az "OS-t követem" és a "sötétre
         állítottam" állapot ránézésre nem különböztethető meg. */
      .theme-toggle[data-theme-state="light"],
      .theme-toggle[data-theme-state="dark"] {
        color: var(--accent-text);
        background: var(--accent-light);
        border-color: var(--accent-ring);
      }

      .theme-toggle[data-theme-state="light"]:hover,
      .theme-toggle[data-theme-state="dark"]:hover {
        background: var(--accent-soft);
      }

      /* Egyszerre pontosan egy ikon látszik — nincs átfedés, nincs morfolás. */
      .theme-toggle .ti {
        display: none;
      }

      .theme-toggle[data-theme-state="auto"] .ti-auto,
      .theme-toggle[data-theme-state="light"] .ti-light,
      .theme-toggle[data-theme-state="dark"] .ti-dark {
        display: block;
      }

      /* Első festés, még a lap végi script előtt. A gomb data-theme-state-jét
         csak az a script tudja beállítani — a <head>-beli FOUC-script futásakor
         a gomb még nem létezik —, a <html data-theme> viszont ott már eldőlt.
         Amíg a gombon nincs attribútum, a látványt abból vezetjük le: a
         data-theme KIZÁRÓLAG kézi felülírásnál van jelen, tehát a három állapot
         pontosan megkülönböztethető. Így a váltó nem mutat ~120 ms-ig "auto"-t
         egy tárolt dark preferencia mellett. */
      :root:not([data-theme]) .theme-toggle:not([data-theme-state]) .ti-auto,
      :root[data-theme="light"] .theme-toggle:not([data-theme-state]) .ti-light,
      :root[data-theme="dark"] .theme-toggle:not([data-theme-state]) .ti-dark {
        display: block;
      }

      :root[data-theme] .theme-toggle:not([data-theme-state]) {
        color: var(--accent-text);
        background: var(--accent-light);
        border-color: var(--accent-ring);
      }

      /* Képernyőolvasónak szánt állapot-bejelentés (aria-live), szemmel rejtve */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      @media (max-width: 700px) {
        .theme-toggle {
          width: 38px;
          height: 38px;
        }
      }