/* ==========================================================
   PRINTER-FAIR — REDESIGN PROTOTYPE
   Standalone, framework-free (HTML/CSS/JS/PHP) — no WordPress,
   no build step. Every file here can be dropped straight into
   a cPanel public_html and it will run.
   ========================================================== */

/* ---------- Fonts (self-hosted: no request ever leaves for Google, fonts are cached with the site) ----------
   Latin + Latin-ext cover Hungarian (ő, ű are in Latin-ext). Instrument Sans and Public Sans are variable fonts,
   so one file serves every weight. Licensed under the SIL Open Font License. */
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin-ext.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:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/ibm-plex-mono-600-latin-ext.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:'Instrument Sans'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('../fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Instrument Sans'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('../fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+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:'Public Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/public-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Public Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/public-sans-latin-ext.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; }

/* ---------- Tokens ---------- */
:root{
  --paper:#FBF9F6;
  --surface:#FFFFFF;
  --surface-sunken:#F3F0EC;
  --ink:#14171A;
  --well:#14171A; /* fixed, theme-independent dark — for sections (hero visual, "why us", footer) that must stay dark regardless of light/dark mode, unlike --ink which is the theme-aware text color */
  --ink-soft:#4A5155;
  --mist:#8B9094;
  --line:rgba(20,23,26,.10);
  --line-soft:rgba(20,23,26,.06);

  --red:#C8102E;
  --veeam:#00B336; /* Veeam brand green — used next to our red on the Adatmentés page */
  --red-dark:#A20D26;
  --red-wash:rgba(200,16,46,.07);
  --red-wash-strong:rgba(200,16,46,.14);
  --ok:#1c7a45; --ok-wash:rgba(46,160,90,.12);
  --glass-fill:rgba(20,23,26,.035); --glass-border:rgba(20,23,26,.05);
  --pill-shadow: -2px -2px 4px rgba(255,255,255,.7), 2px 2px 5px rgba(20,23,26,.08);
  --header-edge-shadow: 0 1px 0 rgba(255,255,255,.6), 0 10px 22px rgba(20,23,26,.05);

  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;

  --shadow-1: 0 1px 2px rgba(20,23,26,.04), 0 8px 24px rgba(20,23,26,.05);
  --shadow-2: 0 4px 14px rgba(20,23,26,.08), 0 26px 60px rgba(20,23,26,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-fluid: cubic-bezier(.32,.72,0,1); /* iOS-drawer-like — fast, fluid settle, no bounce */
  --fast:150ms; --base:260ms; --slow:480ms; --reveal:640ms;

  --header-h: 88px;
  --header-top: 18px;
  --header-clear: 142px; /* header-top + header-h + breathing room, for content that now sits below a position:fixed header */
  --wrap: 1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101214;
    --surface:#1A1D20;
    --surface-sunken:#16181B;
    --ink:#F2EFEA;
    --ink-soft:#AEB4B7;
    --mist:#6E7376;
    --line:rgba(242,239,234,.12);
    --line-soft:rgba(242,239,234,.07);
    --red:#E23A56;
    --red-dark:#F0607A;
    --red-wash:rgba(226,58,86,.12);
    --red-wash-strong:rgba(226,58,86,.20);
    --ok:#5fd88a; --ok-wash:rgba(95,216,138,.14);
    --glass-fill:rgba(255,255,255,.06); --glass-border:rgba(255,255,255,.10);
    --pill-shadow: -2px -2px 4px rgba(255,255,255,.05), 2px 2px 6px rgba(0,0,0,.4);
    --header-edge-shadow: 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.35);
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.30);
    --shadow-2: 0 4px 14px rgba(0,0,0,.35), 0 26px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#101214; --surface:#1A1D20; --surface-sunken:#16181B;
  --ink:#F2EFEA; --ink-soft:#AEB4B7; --mist:#6E7376;
  --line:rgba(242,239,234,.12); --line-soft:rgba(242,239,234,.07);
  --red:#E23A56; --red-dark:#F0607A;
  --red-wash:rgba(226,58,86,.12); --red-wash-strong:rgba(226,58,86,.20);
  --ok:#5fd88a; --ok-wash:rgba(95,216,138,.14);
  --glass-fill:rgba(255,255,255,.06); --glass-border:rgba(255,255,255,.10);
  --pill-shadow: -2px -2px 4px rgba(255,255,255,.05), 2px 2px 6px rgba(0,0,0,.4);
  --header-edge-shadow: 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.35);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.30);
  --shadow-2: 0 4px 14px rgba(0,0,0,.35), 0 26px 60px rgba(0,0,0,.45);
}

/* Cross-page transitions (progressive enhancement — no-op where unsupported) */
@view-transition{ navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red-wash-strong); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
section{ padding:112px 0; }
@media (max-width:900px){ section{ padding:76px 0; } .wrap{ padding:0 20px; } }

h1,h2,h3,h4{ font-family:'Instrument Sans', system-ui, sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.08; margin:0; text-wrap:balance; }
.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--red);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.eyebrow.is-plain::before{ content:none; }
.eyebrow.is-plain{ padding-left:1px; }
p{ margin:0; }
.lede{ color:var(--ink-soft); font-size:19px; line-height:1.65; max-width:52ch; }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease);
  transition-delay: calc(var(--stagger, 0) * 70ms);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* Same idea, but re-triggers on every pass through the viewport: it blurs in
   on the way in and back out on the way out (see data-reveal-loop in main.js). */
[data-reveal-loop]{
  opacity:0; transform:translateY(22px); filter:blur(5px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
[data-reveal-loop].is-visible{
  opacity:1; transform:none; filter:blur(0);
  transition-delay: calc(var(--stagger, 0) * 110ms);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal-loop]{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Public Sans',sans-serif; font-weight:600; font-size:15.5px;
  padding:15px 28px; border-radius:var(--r-sm); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; box-shadow:var(--shadow-1);
  transition: background-color var(--base) var(--ease), border-color var(--base) var(--ease),
              color var(--base) var(--ease), box-shadow var(--base) var(--ease),
              transform var(--fast) var(--ease), translate var(--fast) var(--ease);
}
.btn:active{ transform:scale(.97); box-shadow:var(--shadow-1); }
.btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.btn-primary{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); box-shadow:var(--shadow-2); translate:0 -2px; }
/* Secondary button: white, red text, red outline. On hover a red fill sweeps in from the left and
   the button lifts with the same shadow as the primary one, so the two read as a pair in the hero.
   --fill can be overridden where the surrounding colour would swallow the red (see the CTA band). */
.btn-ghost{
  --fill:var(--red);
  background-color:var(--surface);
  background-image:linear-gradient(var(--fill), var(--fill));
  background-repeat:no-repeat; background-position:left center; background-size:0% 100%;
  border-color:var(--red); color:var(--red); box-shadow:none;
  transition: background-size .4s var(--ease), background-color var(--base) var(--ease), border-color var(--base) var(--ease),
              color var(--base) var(--ease), box-shadow var(--base) var(--ease),
              transform var(--fast) var(--ease), translate var(--fast) var(--ease);
}
.btn-ghost:hover{ background-size:100% 100%; border-color:var(--fill); color:#fff; box-shadow:var(--shadow-2); translate:0 -2px; }
.btn-block{ width:100%; }
.btn svg{ width:17px; height:17px; flex:0 0 auto; transition:transform var(--base) var(--ease); }
.btn-primary:hover svg{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){ .btn, .btn svg{ transition-duration:1ms !important; } .btn:active{ transform:none; } }

/* ---------- Header — floating glass capsule ---------- */
.site-header{
  position:fixed; top:var(--header-top); left:50%; z-index:50;
  width:fit-content; max-width:calc(100% - 40px);
  display:flex; flex-direction:column; align-items:stretch;
  border-radius:28px;
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-1);
  transform:translate(-50%, 0);
  transition: box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-2); border-color:var(--line); }
@media (max-width:860px){
  /* Same width open or closed — only the height animates (via the grid
     trick below), so there's no width transition to fight with at all. */
  .site-header{ width:85%; }
}
@media (prefers-reduced-motion: reduce){
  .site-header{ transition:box-shadow var(--base) linear, border-color var(--base) linear; }
}
.site-header .wrap{ display:flex; align-items:center; gap:40px; width:100%; height:var(--header-h); flex:0 0 auto; max-width:none; margin:0; padding:0 10px 0 26px; }
.brand{ display:flex; align-items:center; view-transition-name: brand; }
.brand-logo{ height:64px; width:auto; max-width:none; aspect-ratio:950/700; display:block; flex-shrink:0; }
.main-nav{ display:flex; align-items:center; gap:26px; }

.main-nav > ul{ list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0; position:relative; }
.main-nav > ul > li{ display:flex; align-items:center; position:relative; z-index:1; }
.main-nav a{ font-size:14.5px; font-weight:600; color:var(--ink-soft); padding:9px 16px; border-radius:999px; transition:color var(--base) var(--ease); }
.main-nav a:hover{ color:var(--ink); }
.main-nav a.is-active{ color:var(--ink); }

/* Liquid-glass pill — slides behind whichever top-level item is
   hovered/active, echoing the header's own backdrop-filter material
   instead of a flat underline. Positioned/sized by main.js. */
.main-nav > ul > li.nav-pill{
  position:absolute; top:0; bottom:0; left:0; width:0;
  border-radius:999px; background:var(--glass-fill);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--pill-shadow);
  opacity:0; pointer-events:none; z-index:0;
  transition:transform var(--base) var(--ease), width var(--base) var(--ease), opacity var(--base) var(--ease);
}
.main-nav > ul > li.nav-pill.is-visible{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .nav-pill{ transition:opacity var(--base) linear; } }

/* Dropdown ("Szolgáltatások") — desktop, hover/focus revealed */
.has-dropdown{ position:relative; }
/* Invisible bridge over the visual gap between trigger and panel, so
   moving the mouse from one to the other doesn't lose :hover mid-way. */
.has-dropdown::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:100%; width:260px; height:14px;
}
.nav-parent{
  display:inline-flex; align-items:center; gap:5px;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-soft);
  background:none; border:none; padding:9px 16px; border-radius:999px; cursor:pointer;
  transition:color var(--base) var(--ease);
}
.nav-parent__chevron{ width:14px; height:14px; }
.has-dropdown:hover .nav-parent,
.has-dropdown:focus-within .nav-parent,
.nav-parent.is-active{ color:var(--ink); }

.main-nav .dropdown{
  display:block; position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%, 8px);
  min-width:240px; width:max-content; list-style:none; margin:0; padding:10px; z-index:60;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line-soft); border-radius:22px;
  box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility var(--base);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
}
.dropdown li + li{ margin-top:2px; }
.dropdown a{
  display:block; padding:10px 12px; border-radius:14px; font-size:14px; font-weight:500;
  color:var(--ink-soft); transition:background-color var(--base) var(--ease), color var(--base) var(--ease);
}
/* Kill the top-level nav's red underline pseudo-element — it was leaking
   onto dropdown links too, cutting a straight line across the rounded card. */
.dropdown a::after{ content:none; }
.dropdown a:hover, .dropdown a:focus-visible{ background:var(--surface-sunken); color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .dropdown{ transition:opacity var(--base) linear; }
}

/* Toggle — a round button, two bars that morph into an X (not the
   squared-off three-line hamburger this replaced). */
.nav-toggle{
  display:none; width:44px; height:44px; flex:0 0 auto; position:relative;
  margin-left:auto; /* pinned to the wrap's right edge, so it tracks the capsule's growing width instead of drifting left with the logo */
  border-radius:999px; border:1px solid var(--glass-border); background:var(--glass-fill);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle__bar{
  position:absolute; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform var(--base) var(--ease);
}
.nav-toggle__bar:first-child{ transform:translateY(-3px); }
.nav-toggle__bar:last-child{ transform:translateY(3px); }
body.nav-open .nav-toggle__bar:first-child{ transform:translateY(0) rotate(45deg); }
body.nav-open .nav-toggle__bar:last-child{ transform:translateY(0) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .nav-toggle__bar{ transition:none; } }

/* Mobile menu — no separate full-screen panel: the capsule itself grows
   downward to hold the links, using a CSS grid-rows trick (0fr → 1fr)
   for a smooth, precise height animation without measuring in JS. The
   drawer-style curve (fast, fluid settle, no bounce) reads as "liquid"
   rather than the default ease, which feels comparatively stiff here. */
.mobile-nav-grid{
  display:none;
  grid-template-rows:0fr;
  transition:grid-template-rows 560ms var(--ease-fluid);
}
body.nav-open .mobile-nav-grid{ grid-template-rows:1fr; }
.mobile-nav-content{ overflow:hidden; min-height:0; padding:0 26px; }
@media (prefers-reduced-motion: reduce){ .mobile-nav-grid{ transition:grid-template-rows var(--base) linear; } }

@media (max-width:860px){
  .main-nav ul{ display:none; }
  .main-nav .btn-primary{ display:none; } /* lives inside the open mobile menu instead */
  .nav-toggle{ display:flex; }
  .mobile-nav-grid{ display:grid; }

  .mobile-nav-content ul{ list-style:none; margin:0; padding:10px 0 6px; display:flex; flex-direction:column; gap:2px; }
  .mobile-nav-content a{ display:block; padding:14px 4px; font-size:18px; font-weight:600; border-bottom:1px solid var(--line-soft); }
  .mobile-nav-content .btn{ margin:18px 0 22px; }

  /* Szolgáltatások — same fluid grid-expand as the outer capsule, not the
     browser's native (instant, unanimated) <details> toggle. */
  .mobile-dropdown{ border-bottom:1px solid var(--line-soft); }
  .mobile-dropdown__trigger{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:none; border:none; font:inherit; cursor:pointer; color:var(--ink);
    padding:14px 4px; font-size:18px; font-weight:600;
  }
  .mobile-dropdown__chevron{ width:13px; height:13px; flex:0 0 auto; transition:transform 560ms var(--ease-fluid); }
  .mobile-dropdown.is-open .mobile-dropdown__chevron{ transform:rotate(180deg); }
  .mobile-dropdown__grid{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows 560ms var(--ease-fluid);
  }
  .mobile-dropdown.is-open .mobile-dropdown__grid{ grid-template-rows:1fr; }
  .mobile-dropdown__list{
    overflow:hidden; min-height:0; list-style:none; margin:0; padding:0 0 0 14px;
    display:flex; flex-direction:column; gap:2px;
  }
  .mobile-dropdown__list a{ font-size:15px; font-weight:500; padding:10px 4px; border-bottom:none; }
  @media (prefers-reduced-motion: reduce){
    .mobile-dropdown__chevron, .mobile-dropdown__grid{ transition:grid-template-rows var(--base) linear, transform var(--base) linear; }
  }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding:calc(var(--header-clear) + 48px) 0 110px; overflow:hidden; }
.hero .wrap{ display:flex; justify-content:center; }
.hero-panel{
  position:relative; z-index:1; max-width:800px; width:100%; text-align:center;
  background:rgba(255,255,255,.62); backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(255,255,255,.65); border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(20,23,26,.10), inset 0 1px 0 rgba(255,255,255,.7);
  padding:56px 60px;
}
.hero .eyebrow{ justify-content:center; }
.hero h1{ font-size:clamp(2.6rem, 5vw, 4.1rem); margin-bottom:24px; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero .lede{ margin:0 auto 36px; }
.hero-actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
.hero-stat{
  text-align:center; padding:10px 14px; border-radius:var(--r-sm);
  transition:transform var(--base) var(--ease);
}
.hero-stat:hover{ transform:translateY(-3px); }
.hero-stat b{
  display:block; font-family:'Instrument Sans',sans-serif; font-size:28px; font-weight:700; letter-spacing:-.01em;
  transition:color var(--base) var(--ease);
}
.hero-stat:hover b{ color:var(--red); }
.hero-stat span{ font-size:13px; color:var(--mist); }

/* Subtle animated aurora glow behind the headline — service-agnostic, no
   literal content, just enough motion to keep the hero from feeling static.
   Red + a neutral slate tone, so it reads as brand rather than "just pink". */
.hero::before{
  content:""; position:absolute; inset:-15% -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 54% at 20% 22%, rgba(20,23,26,.07), transparent 65%),
    radial-gradient(34% 38% at 80% 68%, rgba(20,23,26,.05), transparent 60%),
    radial-gradient(44% 48% at 58% 92%, rgba(139,144,148,.10), transparent 62%);
  filter:blur(46px);
  animation:heroGlow 22s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(2.5%,-3%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-panel{
    background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10);
    box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"] .hero-panel{
  background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Wavy contour lines — canvas-drawn (see main.js), so they can flow
   continuously instead of just swaying in place. Light mode tuned for now.
   Below, two orbs pulse in place (scale only, no travel) — sharp outside
   the glass panel, softened where the panel's own backdrop-filter covers
   them. Both layers drift down slightly on scroll via --hero-parallax
   (set from main.js), a fraction of actual scroll speed, for a depth cue. */
.hero-waves{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; display:block;
  transform:translateY(var(--hero-parallax, 0px));
}

.hero-orbs{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  transform:translateY(var(--hero-parallax, 0px));
}
.hero-orb{ position:absolute; border-radius:50%; background:transparent; }
.hero-orb--1{
  width:500px; height:500px; top:65.3%; left:30%;
  border:2px solid var(--red);
  animation:orbPulse1 10.2s ease-in-out infinite;
}
.hero-orb--2{
  width:250px; height:250px; top:52%; left:72%;
  border:1.5px solid var(--mist);
  animation:orbPulse2 7.9s ease-in-out infinite;
}
@keyframes orbPulse1{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.2); }
}
@keyframes orbPulse2{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.3); }
}
@media (prefers-reduced-motion: reduce){
  .hero-orb{ animation:none; }
}

@media (max-width:900px){
  .hero-orbs{ display:none; }
  .hero-panel{ padding:36px 24px; }
  .hero{ padding:calc(var(--header-clear) + 20px) 0 64px; }
}

/* ---------- Hero — alt concept (dashboard mockup, for comparison only) ---------- */
.hero-alt{ padding:calc(var(--header-clear) + 20px) 0 100px; overflow:hidden; }
.hero-alt .wrap{ max-width:var(--wrap); }
.hero-alt-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center; }
.hero-alt-content h1{ font-size:clamp(2.5rem, 4.6vw, 3.6rem); margin-bottom:22px; }
.hero-alt-content h1 em{ font-style:normal; color:var(--red); }
.hero-alt-content .lede{ margin-bottom:34px; }

.hero-alt-panel{
  background:var(--well); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-2);
  position:relative; overflow:hidden;
}
.hero-alt-panel::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 20% 15%, rgba(200,16,46,.28), transparent 55%); pointer-events:none; }
.hero-alt-panel__head{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12);
}
.hero-alt-live{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#fff; }
.hero-alt-live__dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.2); animation:heroAltPulse 2s ease-in-out infinite; }
@keyframes heroAltPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.hero-alt-uptime{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(255,255,255,.55); }

.hero-alt-rows{ position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.hero-alt-rows li{ display:flex; align-items:center; gap:13px; padding:12px 8px; border-radius:var(--r-sm); transition:background-color var(--base) var(--ease); }
.hero-alt-rows li:hover{ background:rgba(255,255,255,.05); }
.hero-alt-row__icon{ width:36px; height:36px; flex:0 0 36px; border-radius:10px; background:rgba(255,255,255,.08); color:var(--red); display:grid; place-items:center; }
.hero-alt-row__icon svg{ width:18px; height:18px; }
.hero-alt-row__text{ flex:1; min-width:0; }
.hero-alt-row__text b{ display:block; font-size:14px; color:#fff; }
.hero-alt-row__text span{ font-size:12.5px; color:rgba(255,255,255,.5); }
.hero-alt-row__status{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.hero-alt-row__status.is-ok{ background:#4ade80; }
.hero-alt-row__status.is-busy{ background:#f2b84b; }

@media (max-width:980px){
  .hero-alt-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .hero-alt-live__dot{ animation:none; }
}

/* ---------- Section headers ---------- */
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head.left{ margin:0 0 48px; text-align:left; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.5rem); margin:10px 0 14px; }
.section-head p{ color:var(--ink-soft); font-size:16.5px; }

/* ---------- Problem cards (doubles as the services overview) ---------- */
.problems{ position:relative; background:var(--surface-sunken); }
/* Wave divider — two irregular (not a repeating sine) layers of the same
   color drifting past each other in opposite directions at different speeds,
   so the seam reads as a loose, hand-drawn swell instead of a mechanical
   ripple. The back layer is a soft, translucent echo; the front layer carries
   the actual flat-color handoff and gets a faint drop-shadow for lift. Each
   SVG is double-width with a path that repeats every half, so a -50% shift
   loops seamlessly. */
.problems-wave{ position:absolute; top:-56px; left:0; width:100%; height:112px; overflow:hidden; line-height:0; pointer-events:none; }
.problems-wave svg{ position:absolute; top:0; left:0; width:200%; height:100%; display:block; fill:var(--surface-sunken); }
.problems-wave__back{ opacity:.5; animation:problemsWaveDrift 32s linear infinite; }
.problems-wave__front{ animation:problemsWaveDrift 19s linear infinite reverse; filter:drop-shadow(0 -4px 10px rgba(20,23,26,.05)); }
@keyframes problemsWaveDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .problems-wave__back, .problems-wave__front{ animation:none; } }
.problems.is-offscreen .problems-wave svg{ animation-play-state:paused; }
.hero.is-offscreen::before, .hero.is-offscreen .hero-orb{ animation-play-state:paused; }
/* The band's height is fixed in px while its horizontal wavelength shrinks
   with the viewport (exactly one period always fills the container width),
   so without a mobile override the bumps get squeezed into a narrow, tall
   shape that reads as sharp little spikes. Scaling the height down with the
   viewport keeps the same gentle, rolling proportions at every width. */
@media (max-width:980px){ .problems-wave{ height:84px; top:-42px; } }
@media (max-width:620px){
  .problems-wave{ height:40px; top:-20px; }
  /* Zooming the SVG in (instead of just shrinking the band) crops the view
     down to a small slice of the path, so mobile reads as one soft curve
     rather than a compressed row of ripples. Slowed down to match, since a
     tighter crop would otherwise scroll past visibly faster. */
  .problems-wave svg{ width:640%; }
  .problems-wave__back{ animation-duration:64s; }
  .problems-wave__front{ animation-duration:38s; }
}
.problems-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* Problem cards — unlike the generic [data-reveal] (which reveals once and
   stays), these re-trigger every time they cross the viewport: fade/blur in
   on the way in, and back out on the way out, so revisiting the section by
   scrolling up feels alive rather than "already spent". */
.problem-card{
  position:relative;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:28px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-1);
  opacity:0; transform:translateY(26px) scale(.96); filter:blur(6px);
  transition:
    opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease),
    box-shadow .35s var(--ease), border-color .35s var(--ease);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
.problem-card.is-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.problem-card.is-visible:hover{
  transform:translateY(-6px) scale(1.012);
  box-shadow:var(--shadow-2); border-color:var(--line);
  transition-delay:0s;
}
@media (prefers-reduced-motion: reduce){
  .problem-card{ opacity:1; transform:none; filter:none; transition:box-shadow .35s var(--ease), border-color .35s var(--ease); }
}
.problem-card__icon{ width:68px; height:68px; border-radius:16px; background:var(--surface-sunken); color:var(--red); display:grid; place-items:center; }
.problem-card__icon svg{ width:32px; height:32px; }
.problem-card h3{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.problem-card p{ color:var(--ink-soft); font-size:14px; line-height:1.6; flex:1; }
.problem-card__tag{
  display:inline-flex; align-items:center; gap:4px; width:fit-content;
  font-size:13.5px; font-weight:600; color:var(--red); transition:gap var(--fast) var(--ease);
}
.problem-card__tag svg{ width:15px; height:15px; transition:transform var(--fast) var(--ease); }
.problem-card__tag:hover{ gap:8px; }
@media (max-width:980px){ .problems-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .problems-grid{ grid-template-columns:1fr; } }

/* ---------- Why us — pure-black band, plain in-flow section (no full-viewport takeover) ---------- */
.why{
  position:relative; background:#000; color:#fff;
  padding:96px 0;
}
.why-layout{ display:flex; gap:64px; align-items:flex-start; }
.why-intro{ flex:0 0 300px; max-width:300px; }
.why-intro .eyebrow{ color:var(--red); }
.why-intro h2{ font-size:clamp(1.8rem,3vw,2.3rem); margin:12px 0 16px; line-height:1.2; }
.why-intro p{ color:rgba(255,255,255,.62); font-size:15.5px; line-height:1.6; }
.why-grid{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:32px 28px; }
.why-card__icon{ color:var(--red); margin-bottom:18px; }
.why-card__icon svg{ width:46px; height:46px; }
.why-card h3{ color:#fff; font-size:16.5px; margin-bottom:10px; }
.why-card p{ color:rgba(255,255,255,.6); font-size:14px; line-height:1.6; }
/* Repeatable reveal (re-triggers every pass through the viewport, like the
   problem cards) — the intro block drifts up while each why-card both drifts
   up AND pops its icon in with a slight overshoot/spin, cascading left to
   right via --stagger, so the row feels like it's "switching on" one icon
   at a time rather than fading in as one flat block. */
.why-intro, .why-card{
  opacity:0; transform:translateY(22px); filter:blur(5px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  transition-delay: calc(var(--stagger, 0) * 110ms);
}
.why-intro.is-visible, .why-card.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }
.why-card__icon{
  transform:scale(.4) rotate(-18deg);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--stagger, 0) * 110ms + 90ms);
}
.why-card.is-visible .why-card__icon{ transform:scale(1) rotate(0deg); }
@media (prefers-reduced-motion: reduce){
  .why-intro, .why-card{ opacity:1; transform:none; filter:none; transition:none; }
  .why-card__icon{ transform:none; transition:none; }
}
@media (max-width:980px){
  .why-layout{ flex-direction:column; gap:40px; }
  .why-intro{ flex:none; max-width:520px; }
  .why-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- Logo slider ----------
   Logos advance one at a time (auto + arrows + swipe), looping forever via
   cloned edge items — see initLogoSlider() in main.js. Without JS the
   viewport simply scrolls sideways. */
.logo-slider{ padding:88px 0; }
.logo-slider__stage{
  --visible:5;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px;
}
.logo-slider__viewport{ overflow-x:auto; border-radius:var(--r-md); outline-offset:4px; scrollbar-width:thin; touch-action:pan-y; }
.logo-slider__stage.is-enhanced .logo-slider__viewport{ overflow:hidden; }
.logo-slider__track{ display:flex; margin:0; padding:0; list-style:none; will-change:transform; }
.logo-slider__stage.is-enhanced .logo-slider__track{ transition:transform .6s var(--ease); }
.logo-slider__stage.is-jumping .logo-slider__track{ transition:none; }
.logo-slider__item{ flex:0 0 calc(100% / var(--visible)); padding:0 6px; }
.logo-slider__defs{ position:absolute; width:0; height:0; overflow:hidden; }
/* Logos sit straight on the page, no plates. Two copies are stacked: a flat
   brand-red silhouette (SVG filter in index.php) and the untouched original,
   which fades in on hover. */
.logo-slider__logo{
  display:grid; place-items:center; height:92px; cursor:default;
  transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
/* Scroll in/out: logos rise and sharpen one after another (--pos is set from
   main.js by position in view); on the way out they drop together, no stagger. */
.logo-slider__stage.is-enhanced:not(.is-visible) .logo-slider__logo{ opacity:0; transform:translateY(20px) scale(.88); filter:blur(5px); }
.logo-slider__stage.is-visible .logo-slider__logo{ transition-delay:calc(var(--pos, 0) * 90ms + 120ms); }
.logo-slider__img{
  /* --r (aspect ratio) and --lh (height for equal visual weight) come from index.php;
     the width is capped to the cell so very wide wordmarks shrink instead of overflowing. */
  grid-area:1 / 1; width:min(calc(var(--lh, 48px) * var(--r, 3) * var(--logo-scale, 1)), 100%); height:auto;
  aspect-ratio:var(--r, 3); object-fit:contain;
  user-select:none; -webkit-user-drag:none; transition:opacity var(--slow) var(--ease);
}
.logo-slider__img--tint{ filter:url(#pfRedTint); opacity:.92; }
.logo-slider__img--orig{ opacity:0; }
.logo-slider__img--orig.is-always{ opacity:1; }
.logo-slider__item:hover .logo-slider__img--tint{ opacity:0; }
.logo-slider__item:hover .logo-slider__img--orig{ opacity:1; }
/* Arrows borrow the header capsule's glass; hover flips them to brand red. */
.logo-slider__btn{
  width:48px; height:48px; border-radius:50%; color:var(--ink); cursor:pointer;
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--line-soft); box-shadow:var(--shadow-1);
  display:inline-grid; place-items:center;
  transition:background-color var(--base) var(--ease), border-color var(--base) var(--ease), color var(--base) var(--ease), transform var(--base) var(--ease), opacity var(--slow) var(--ease);
}
.logo-slider__stage.is-enhanced:not(.is-visible) .logo-slider__btn{ opacity:0; transform:scale(.6); }
.logo-slider__btn:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); }
.logo-slider__btn:active{ transform:scale(.95); }
.logo-slider__btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.logo-slider__btn svg{ width:20px; height:20px; }
.logo-slider__stage:not(.is-enhanced) .logo-slider__btn,
.logo-slider__stage.is-static .logo-slider__btn{ display:none; }
.logo-slider__stage.is-static{ grid-template-columns:minmax(0,1fr); }
.logo-slider__stage.is-static .logo-slider__track{ justify-content:center; }
@media (max-width:560px){
  .logo-slider{ padding:64px 0; }
  .logo-slider__stage{ grid-template-columns:1fr 1fr; gap:16px 12px; }
  .logo-slider__viewport{ grid-column:1 / -1; grid-row:1; }
  .logo-slider__btn--prev{ grid-row:2; justify-self:end; }
  .logo-slider__btn--next{ grid-row:2; justify-self:start; }
  .logo-slider__logo{ height:76px; }
  .logo-slider__stage{ --logo-scale:.8; }
}
@media (prefers-reduced-motion: reduce){
  .logo-slider__stage.is-enhanced .logo-slider__track{ transition:none; }
  .logo-slider__stage.is-enhanced:not(.is-visible) .logo-slider__logo{ opacity:1; transform:none; filter:none; }
  .logo-slider__stage.is-enhanced:not(.is-visible) .logo-slider__btn{ opacity:1; transform:none; }
}

/* ---------- Customer quotes ----------
   Sits on the plain page background, like the logo slider above it. */
.quotes{ padding:24px 0 100px; }
.quotes-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:22px;
  max-width:1000px; margin:0 auto;
}
.quotes-grid:has(> :only-child){ max-width:680px; }
.quote-card{
  margin:0; display:flex; flex-direction:column; gap:20px; padding:34px 34px 30px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  transition:
    opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease),
    translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Scroll-reveal stagger applies to the first three only; the hover lift (translate) and
   its shadow respond instantly. */
.quote-card.is-visible{ transition-delay:calc(var(--stagger, 0) * 110ms), calc(var(--stagger, 0) * 110ms), calc(var(--stagger, 0) * 110ms), 0s, 0s, 0s; }
@media (hover:hover){
  .quote-card.is-visible:hover{ translate:0 -6px; box-shadow:var(--shadow-2); border-color:var(--line); }
}
@media (prefers-reduced-motion: reduce){
  .quote-card{ transition:box-shadow .35s var(--ease), border-color .35s var(--ease); }
  .quote-card.is-visible:hover{ translate:none; }
}
.quote-card__mark{ width:34px; height:34px; color:var(--red); flex:none; }
.quote-card__text{ margin:0; flex:1; }
.quote-card__text p{ font-size:18px; line-height:1.65; color:var(--ink); margin:0; }
.quote-card__who{ padding-top:22px; border-top:1px solid var(--line-soft); }
.quote-card__name{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quote-card__name b{ font-size:15.5px; color:var(--ink); }
.quote-card__name span{ font-size:13.5px; color:var(--ink-soft); }
@media (max-width:560px){
  .quotes{ padding:8px 0 72px; }
  .quote-card{ padding:26px 22px 24px; }
  .quote-card__text p{ font-size:16.5px; }
}

/* ---------- CTA band ---------- */
.cta-band{ background:var(--red); color:#fff; padding:60px 0; }
.cta-band__inner{ display:flex; align-items:center; justify-content:center; gap:44px; }
.cta-band__icon{ width:108px; height:108px; flex:none; object-fit:contain; }
.cta-band__text{ max-width:560px; }
.cta-band h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 8px; }
.cta-band p{ color:rgba(255,255,255,.88); font-size:17px; margin:0; }
/* Same secondary button as the hero, but on the red band it stays white on hover (no fill sweep) —
   it just lifts, gets the shadow and its text deepens to the darker red. */
.cta-band .btn-ghost{ background-color:#fff; flex:none; }
.cta-band .btn-ghost:hover{ background-size:0% 100%; color:var(--red-dark); border-color:#fff; }
@media (max-width:860px){
  .cta-band{ padding:48px 0; }
  .cta-band__inner{ flex-direction:column; text-align:center; gap:22px; }
  .cta-band__icon{ width:84px; height:84px; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--well); color:rgba(255,255,255,.7); padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:48px; margin-bottom:56px; }
.footer-brand-logo{ display:inline-block; margin-bottom:24px; }
.footer-brand-logo img{ height:100px; width:auto; max-width:none; display:block; }
.site-footer p{ font-size:14px; line-height:1.7; max-width:280px; }
.site-footer h4{ color:#fff; font-size:14px; margin-bottom:18px; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-links a{ font-size:14px; transition:color var(--base) var(--ease); }
.footer-links a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:12.5px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; transition:border-color var(--base) var(--ease), background-color var(--base) var(--ease); }
.footer-social a:hover{ border-color:var(--red); background:rgba(255,255,255,.08); }
.footer-social img{ width:16px; height:16px; display:block; }

.footer-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.footer-contact li{ display:flex; align-items:center; gap:11px; }
.footer-contact img{ width:16px; height:16px; flex:0 0 16px; }
.footer-contact a, .footer-contact span{ font-size:14px; transition:color var(--base) var(--ease); }
.footer-contact a:hover{ color:#fff; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Footer — mobile (<560px): one unified, centered nav mirroring
   the header, instead of the two-column Szolgáltatások/Navigáció split. ---------- */
.footer-mobile{ display:none; }
.footer-mobile-logo{ display:block; width:fit-content; margin:0 auto 32px; }
.footer-mobile-logo img{ height:88px; width:auto; max-width:none; display:block; }

.footer-mobile-nav{ list-style:none; margin:0 0 30px; padding:0; border-top:1px solid rgba(255,255,255,.12); }
.footer-mobile-nav > li:not(.mobile-dropdown){ border-bottom:1px solid rgba(255,255,255,.12); }
.footer-mobile-nav > li > a{ display:block; text-align:center; padding:14px 4px; font-size:15px; transition:color var(--base) var(--ease); }
.footer-mobile-nav > li > a:hover{ color:#fff; }

.footer-mobile-nav .mobile-dropdown{ border-bottom-color:rgba(255,255,255,.12); }
.footer-mobile-nav .mobile-dropdown__trigger{ justify-content:center; gap:9px; color:rgba(255,255,255,.7); font-size:15px; }
.footer-mobile-nav .mobile-dropdown__trigger:hover{ color:#fff; }
.footer-mobile-nav .mobile-dropdown__list{ padding:0; align-items:center; }
.footer-mobile-nav .mobile-dropdown__list a{ text-align:center; color:rgba(255,255,255,.55); }
.footer-mobile-nav .mobile-dropdown__list a:hover{ color:#fff; }

.footer-mobile .footer-social{ justify-content:center; margin-bottom:32px; }
.footer-mobile .footer-contact{ align-items:center; margin-bottom:4px; }
.footer-mobile .footer-contact li{ justify-content:center; }

@media (max-width:560px){
  .footer-grid{ display:none; }
  .footer-mobile{ display:block; }
}

/* ---------- Contact page ---------- */
.page-hero{ padding:calc(var(--header-clear) + 10px) 0 20px; }
.page-hero h1{ font-size:clamp(2.2rem,4vw,3rem); margin-bottom:16px; }
.page-hero h1 em{ font-style:normal; color:var(--red); }

.contact-section{ position:relative; overflow:hidden; padding:calc(var(--header-clear) + 6px) 0 440px; }
.contact-map-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.contact-map-bg iframe{
  position:absolute; left:0%; top:45%; width:100%; height:85%; border:0;
  opacity:0; transition:opacity .9s var(--ease);   /* loaded by main.js once the page is done; fades in */
}
.contact-map-bg iframe.is-loaded{ opacity:1; }
.contact-map-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, rgba(251,249,246,.4) 80%, rgba(251,249,246,0) 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .contact-map-scrim{
    background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, rgba(16,18,20,.4) 80%, rgba(16,18,20,0) 100%);
  }
}
:root[data-theme="dark"] .contact-map-scrim{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, rgba(16,18,20,.4) 80%, rgba(16,18,20,0) 100%);
}
.contact-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:start; }
.contact-info h1{ font-size:clamp(1.9rem,3.2vw,2.5rem); margin-bottom:12px; }
.contact-info h1 em{ font-style:normal; color:var(--red); }
.contact-info .lede{ font-size:16px; margin-bottom:30px; }
.contact-cards{ display:flex; flex-direction:column; gap:12px; }
.contact-card{ display:flex; align-items:center; gap:14px; padding:15px 17px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--shadow-1); }
.contact-card__icon{ width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; }
.contact-card__icon svg, .contact-card__icon img{ width:19px; height:19px; }
.contact-card h4{ font-size:13px; margin-bottom:2px; }
.contact-card p{ font-size:13.5px; color:var(--ink-soft); }
.contact-card a{ color:inherit; }
.contact-card a:hover{ color:var(--red); }
.map-links{ display:flex; gap:7px; margin-top:9px; }
.map-links a{
  width:24px; height:24px; border-radius:7px; background:var(--surface-sunken);
  display:grid; place-items:center;
  transition:background-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.map-links a:hover{ background:var(--line); transform:translateY(-1px); }
.map-links img{ width:13px; height:13px; display:block; }

.form-panel{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-1); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ position:relative; margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  background:var(--paper); color:var(--ink); font-family:inherit; font-size:15px;
  transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.field textarea{ resize:vertical; min-height:90px; }
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:42px; cursor:pointer;
  background-image:url("/media/chevron-down.svg");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;
}
.field select:invalid{ color:var(--mist); }
.field select option{ color:var(--ink); background:var(--surface); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-wash);
}
.field .field-error{ display:none; font-size:12.5px; color:var(--red); margin-top:6px; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--red); }
.field.has-error .field-error{ display:block; }

.field .field-hint{ display:block; font-size:12.5px; color:var(--mist); margin-top:6px; line-height:1.45; }
.field.has-error .field-hint{ display:none; }

/* Kereskedelem quote block (contact form) */
.trade-box{ padding:18px; border:1.5px solid var(--line); border-radius:var(--r-md,14px); background:var(--surface-sunken); }
.trade-box[hidden]{ display:none; }
.trade-box.has-error{ border-color:var(--red); }
.trade-box.has-error .field-error{ display:block; }
.trade-box__title{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
.trade-box__lead{ font-size:13px; line-height:1.5; color:var(--ink-soft); margin:0 0 12px; }
.trade-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.trade-chip{ position:relative; cursor:pointer; }
.trade-chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.trade-chip span{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:13.5px; font-weight:600; transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.trade-chip:hover span{ border-color:var(--red); }
.trade-chip input:checked + span{ border-color:var(--red); color:var(--ink); }
.trade-chip input:checked + span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); margin-right:8px; }
.trade-chip input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; }
.trade-hints{ margin-top:14px; display:grid; gap:10px; }
.trade-hints__lead{ font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:0; }
.trade-hints__lead[hidden], .trade-hint[hidden]{ display:none; }
.trade-hint{ padding:10px 12px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line-soft); }
.trade-hint b{ display:block; font-size:13px; margin-bottom:2px; }
.trade-hint p{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.msg-std[hidden], .msg-trade[hidden]{ display:none; }

.form-submit{ display:flex; align-items:center; gap:16px; margin-top:6px; }
.form-submit .btn{ min-width:190px; position:relative; }
.form-submit .btn .spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  display:none; animation:spin .7s linear infinite;
}
.form-submit .btn.is-loading .spinner{ display:inline-block; }
.form-submit .btn.is-loading .btn-label{ opacity:.85; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-status{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--r-sm); font-size:14px; font-weight:600;
  opacity:0; transform:translateY(-6px); max-height:0; overflow:hidden; margin-top:0;
  transition:opacity var(--base) var(--ease), transform var(--base) var(--ease), max-height var(--base) var(--ease), margin-top var(--base) var(--ease);
}
.form-status.is-visible{ opacity:1; transform:none; max-height:80px; margin-top:18px; }
.form-status.ok{ background:var(--ok-wash); color:var(--ok); }
.form-status.err{ background:var(--surface-sunken); color:var(--red); box-shadow:inset 3px 0 0 var(--red); }
.form-status svg{ width:18px; height:18px; flex:0 0 auto; }

.consent-field{ margin-bottom:26px; }
.checkbox-label{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-soft); line-height:1.55; cursor:pointer; }
.checkbox-label input[type="checkbox"]{ width:17px; height:17px; margin-top:2px; flex:0 0 17px; accent-color:var(--red); cursor:pointer; }
.checkbox-label a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.checkbox-label a:hover{ color:var(--red); }

@media (max-width:900px){
  .contact-section{ padding:calc(var(--header-clear) + 10px) 0 360px; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .form-panel{ padding:28px; }
  .form-row{ grid-template-columns:1fr; }
}

/* Spam trap: invisible to people, tempting to bots. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Privacy notice: full page + pop-up ---------- */
.footer-bottom a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; transition:color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease); }
.footer-bottom a:hover{ color:#fff; text-decoration-color:var(--red); }

.legal-page{ padding:calc(var(--header-clear) + 28px) 0 110px; }
.legal-page .wrap{ max-width:860px; }
.legal-page h1{ font-size:clamp(34px,5vw,52px); margin:14px 0 26px; }
.legal-page h1 em{ font-style:normal; color:var(--red); }

.legal-doc{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.legal-doc p{ margin:0 0 14px; }
.legal-doc strong{ color:var(--ink); font-weight:600; }
.legal-doc a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.legal-doc a:hover{ color:var(--red); }
.legal-doc h3{ font-size:18px; color:var(--ink); margin:30px 0 10px; letter-spacing:-.01em; }
.legal-doc ul{ margin:0 0 14px; padding-left:20px; }
.legal-doc li{ margin-bottom:6px; padding-left:2px; }
.legal-doc li::marker{ color:var(--red); }
.legal-meta{ font-size:13px; color:var(--mist); margin-bottom:18px !important; }
.legal-table-wrap{ overflow-x:auto; margin:0 0 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.legal-table{ width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.55; min-width:640px; }
.legal-table th{ text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist); font-weight:600; padding:12px 14px; background:var(--surface-sunken); border-bottom:1px solid var(--line); }
.legal-table td{ padding:14px; vertical-align:top; border-bottom:1px solid var(--line-soft); }
.legal-table tr:last-child td{ border-bottom:0; }

.has-modal{ overflow:hidden; }
.legal-modal{
  width:min(760px, calc(100vw - 32px)); max-height:min(86vh, 820px);
  padding:0; border:0; border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-2);
  overflow:hidden; flex-direction:column;
}
.legal-modal[open]{ display:flex; animation:legalIn .28s var(--ease-fluid); }
.legal-modal::backdrop{ background:rgba(14,16,18,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:legalFade .28s var(--ease); }
@keyframes legalIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes legalFade{ from{ opacity:0; } to{ opacity:1; } }
.legal-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px 16px; border-bottom:1px solid var(--line); }
.legal-modal__head h2{ font-size:22px; }
.legal-modal__close{ width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink-soft); cursor:pointer; transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.legal-modal__close:hover{ color:var(--red); border-color:var(--red); }
.legal-modal__close svg{ width:18px; height:18px; }
.legal-modal__body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:18px 24px 6px; outline:none; }
.legal-modal__body .legal-doc{ font-size:14.5px; }
.legal-modal__loading{ color:var(--mist); }
.legal-modal__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 24px 18px; border-top:1px solid var(--line); }
.legal-modal__foot a{ font-size:13.5px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.legal-modal__foot a:hover{ color:var(--red); }
@media (max-width:600px){
  .legal-modal__head, .legal-modal__body, .legal-modal__foot{ padding-left:18px; padding-right:18px; }
  .legal-modal{ max-height:90vh; }
}
@media (prefers-reduced-motion:reduce){ .legal-modal[open], .legal-modal::backdrop{ animation:none; } }

/* ---------- Contact form: Cloudflare Turnstile box ---------- */
.captcha-field{ margin-bottom:18px; }

/* ---------- Dokumentumtár ---------- */
/* ---------- Dokumentumtár: PDF reader window (PDF.js, see assets/js/doc-reader.js) ---------- */
.doc-reader .pdfViewer .page.loadingIcon::after{ background:none; } /* PDF.js's loading gif is not shipped */
.doc-reader{
  width:min(1180px, calc(100vw - 24px)); height:calc(100vh - 24px); height:calc(100dvh - 24px);
  max-width:none; max-height:none; padding:0; border:0; border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-2); overflow:hidden;
  flex-direction:column;
}
.doc-reader[open]{ display:flex; animation:legalIn .28s var(--ease-fluid); }
.doc-reader::backdrop{ background:rgba(14,16,18,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:legalFade .28s var(--ease); }
.doc-reader__bar{ display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; padding:12px 16px 12px 22px; border-bottom:1px solid var(--line); background:var(--surface); }
.doc-reader__title{ min-width:0; flex:1 1 220px; }
.doc-reader__title h2{ font-size:17px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-reader__title small{ display:block; color:var(--mist); font-size:12.5px; margin-top:2px; }
.doc-reader__tools{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }
.doc-reader__group{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:var(--surface-sunken); border:1px solid var(--line-soft); }
.doc-reader__btn{ width:34px; height:34px; flex:0 0 auto; display:inline-grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--ink-soft); cursor:pointer; transition:color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.doc-reader__btn:hover{ color:var(--red); background:var(--surface); }
.doc-reader__btn svg{ width:17px; height:17px; }
.doc-reader__close{ border:1px solid var(--line); }
.doc-reader__q{ width:190px; border:0; background:transparent; font:inherit; font-size:14px; color:var(--ink); padding:6px 4px 6px 12px; outline:none; }
.doc-reader__q::placeholder{ color:var(--mist); }
.doc-reader__count{ font-size:12px; color:var(--mist); min-width:0; padding:0 6px; white-space:nowrap; }
.doc-reader__page{ width:50px; text-align:center; border:1px solid var(--line); border-radius:8px; background:var(--surface); font:inherit; font-size:14px; color:var(--ink); padding:5px 2px; -moz-appearance:textfield; appearance:textfield; }
.doc-reader__page::-webkit-outer-spin-button, .doc-reader__page::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.doc-reader__of{ font-size:13.5px; color:var(--mist); padding:0 6px 0 4px; white-space:nowrap; }
.doc-reader__stage{ position:relative; flex:1 1 auto; min-height:0; background:var(--surface-sunken); }
.doc-reader__scroll{ position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; padding:14px 0 24px; }
.doc-reader__scroll .pdfViewer .page{ margin:0 auto 12px; border:0; box-shadow:var(--shadow-1); background-clip:content-box; }
.doc-reader__status{ position:absolute; left:50%; top:50%; translate:-50% -50%; max-width:min(420px, 86%); padding:14px 20px; border-radius:var(--r-sm); background:var(--surface); box-shadow:var(--shadow-1); color:var(--ink-soft); font-size:14.5px; text-align:center; }
.doc-reader__status[hidden]{ display:none; }
.doc-reader__status a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:760px){
  .doc-reader{ width:100vw; height:100vh; height:100dvh; border-radius:0; }
  .doc-reader__bar{ padding:10px 12px; gap:8px 10px; }
  .doc-reader__title{ flex-basis:60%; }
  .doc-reader__close{ order:2; margin-left:auto; }
  .doc-reader__title{ order:1; }
  .doc-reader__tools{ order:3; width:100%; justify-content:space-between; }
  .doc-reader__find{ order:4; width:100%; }
  .doc-reader__q{ flex:1; width:auto; min-width:0; }
}
@media (prefers-reduced-motion:reduce){ .doc-reader[open], .doc-reader::backdrop{ animation:none; } }

/* ---------- Dokumentumtár: one web document (dokumentum.php — e.g. the ÁSZF) ---------- */
.doc-view .wrap{ max-width:var(--wrap); }
.doc-view h1{ max-width:900px; margin-bottom:16px; }
.doc-view__back{ text-decoration:none; }
.doc-view__back:hover{ color:var(--red); }
.doc-view__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:14px; color:var(--ink-soft); margin:0 0 18px; }
.doc-view__notice{ max-width:900px; padding:12px 16px; border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r-sm); background:var(--surface-sunken); font-size:14.5px; color:var(--ink-soft); margin:0 0 18px; }
.doc-view__notice a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.doc-view__actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
.doc-view__source{ font-size:13px; color:var(--mist); margin:0 0 36px; }
.doc-pill--soon{ background:var(--surface-sunken); color:var(--ink-soft); }
.doc-pill--old{ background:var(--surface-sunken); color:var(--mist); }
.doc-view__grid{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; align-items:start; }
.doc-toc{ position:sticky; top:calc(var(--header-clear) - 10px); max-height:calc(100vh - var(--header-clear) - 10px); overflow:auto; padding:18px 18px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); font-size:13.5px; }
.doc-toc summary{ font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; list-style:none; }
.doc-toc summary::-webkit-details-marker{ display:none; }
.doc-toc ol{ list-style:none; margin:12px 0 0; padding:0; }
.doc-toc li{ margin:0; }
.doc-toc a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding:5px 0; color:var(--ink-soft); line-height:1.4; text-decoration:none; border-top:1px solid var(--line-soft); }
.doc-toc li:first-child a{ border-top:0; }
.doc-toc a:hover{ color:var(--red); }
.doc-view__body{ min-width:0; max-width:860px; }
.doc-view__body h2{ font-size:24px; color:var(--ink); margin:52px 0 14px; letter-spacing:-.015em; line-height:1.25; scroll-margin-top:calc(var(--header-clear) + 10px); }
.doc-view__body h2:first-of-type{ margin-top:0; }
.doc-view__body h3{ font-size:18px; line-height:1.35; margin:32px 0 10px; }
.doc-view__body h4{ font-size:15.5px; color:var(--ink); margin:22px 0 8px; letter-spacing:-.005em; line-height:1.4; }
.doc-view__body .legal-item{ padding-left:18px; }
.legal-note{ font-size:13.5px; color:var(--mist); }
.legal-table td.num{ text-align:right; white-space:nowrap; }
.legal-table--narrow{ min-width:0; }
.legal-table--tariff td{ padding:7px 14px; }
.legal-table--grid{ min-width:760px; }
.legal-fold{ margin:0 0 18px; }
.legal-fold > summary{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; color:var(--ink); padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); margin-bottom:12px; }
.legal-fold > summary:hover{ color:var(--red); border-color:var(--red); }
@media (max-width:1000px){
  .doc-view__grid{ grid-template-columns:1fr; gap:24px; }
  .doc-toc{ position:static; max-height:none; }
}
@media print{
  .site-header, .site-footer, footer, .doc-toc, .doc-view__actions, .doc-view__back, .scroll-progress{ display:none !important; }
  .legal-page{ padding:0; }
  .doc-view__grid{ display:block; }
  .legal-table-wrap{ overflow:visible; border:0; }
  .legal-table{ min-width:0; }
  .legal-fold > summary{ display:none; }
}

.doc-page{ padding:calc(var(--header-clear) + 28px) 0 110px; }
.doc-page .wrap{ max-width:900px; }
.doc-page h1{ font-size:clamp(34px,5vw,52px); margin:14px 0 18px; }
.doc-page h1 em{ font-style:normal; color:var(--red); }
.doc-page .lede{ color:var(--ink-soft); font-size:17px; line-height:1.65; max-width:680px; margin:0 0 12px; }
.doc-cat{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mist); margin:48px 0 16px; scroll-margin-top:calc(var(--header-clear) - 20px); }
.doc-list{ display:flex; flex-direction:column; gap:16px; }
.doc-card{ display:flex; gap:20px; padding:26px 28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1); transition:box-shadow var(--base) var(--ease), translate var(--base) var(--ease); }
@media (hover:hover){ .doc-card:hover{ box-shadow:var(--shadow-2); translate:0 -2px; } }
.doc-card__icon{ flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--surface-sunken); color:var(--red); }
.doc-card__icon svg{ width:24px; height:24px; }
.doc-card__main{ flex:1; min-width:0; }
.doc-card h3{ font-size:20px; margin:2px 0 6px; letter-spacing:-.015em; }
.doc-card__desc{ color:var(--ink-soft); font-size:15px; margin:0 0 12px; }
.doc-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:13.5px; color:var(--ink-soft); margin:0 0 4px; }
.doc-card__size{ color:var(--mist); }
.doc-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:600; background:var(--ok-wash); color:var(--ok); }
.doc-card__note{ font-size:13.5px; color:var(--mist); margin:0 0 4px; }
.doc-card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.doc-card__actions .btn{ padding:11px 20px; font-size:14.5px; }
.doc-upcoming{ margin-top:16px; padding:13px 16px; border-radius:var(--r-sm); background:var(--surface-sunken); border:1px solid var(--line-soft); font-size:14px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:4px 12px; }
.doc-upcoming strong{ color:var(--ink); font-weight:600; }
.doc-upcoming a, .doc-foot a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.doc-upcoming a:hover, .doc-foot a:hover{ color:var(--red); }
.doc-archive{ margin-top:18px; border-top:1px solid var(--line-soft); padding-top:4px; }
.doc-archive summary{ cursor:pointer; list-style:none; padding:10px 0; font-size:14px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.doc-archive summary::-webkit-details-marker{ display:none; }
.doc-archive summary::before{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; rotate:-45deg; transition:rotate var(--base) var(--ease); }
.doc-archive[open] summary::before{ rotate:45deg; }
.doc-archive summary:hover{ color:var(--red); }
.doc-archive ul{ list-style:none; margin:0; padding:0; }
.doc-archive li{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line-soft); font-size:14px; }
.doc-archive__what b{ color:var(--ink); font-weight:600; }
.doc-archive__what small{ display:block; color:var(--mist); font-size:12.5px; margin-top:2px; }
.doc-archive__links{ display:flex; gap:16px; }
.doc-archive__links a{ color:var(--ink-soft); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.doc-archive__links a:hover{ color:var(--red); }
.doc-langnote{ display:inline-block; margin:6px 0 0; padding:7px 14px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface-sunken); color:var(--ink-soft); font-size:13.5px; }
.doc-empty{ margin-top:36px; padding:30px; border:1px dashed var(--line); border-radius:var(--r-md); color:var(--ink-soft); text-align:center; }
.doc-foot{ margin-top:48px; font-size:14px; color:var(--ink-soft); line-height:1.7; }
@media (max-width:600px){
  .doc-card{ flex-direction:column; gap:14px; padding:22px 20px; }
  .doc-card__actions .btn{ flex:1 1 140px; text-align:center; justify-content:center; }
}

/* ---------- Referenciák (one-screen "under construction" page) ----------
   Background: the page's (pretend) source code, faded into the paper in muted greys and reds, typed by
   main.js with typos and corrections; on top of it the message card. No editor chrome, follows the theme. */
.dev-stage{
  position:relative; display:grid; place-items:center; overflow:hidden;
  min-height:100svh; padding:var(--header-clear) 24px 48px;
}
.dev-bg{
  position:absolute; inset:0; padding-top:calc(var(--header-clear) - 6px); pointer-events:none; user-select:none;
  font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:15px;
  color:color-mix(in srgb, var(--ink) 30%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 calc(var(--header-clear) + 30px), #000 80%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 calc(var(--header-clear) + 30px), #000 80%, transparent);
}
.dev-bg__inner{ display:flex; flex-direction:column; height:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.dev-tab{
  align-self:flex-start; padding:7px 16px 8px; font-size:12.5px; margin-left:58px;
  border-top:2px solid color-mix(in srgb, var(--red) 55%, transparent);
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  color:color-mix(in srgb, var(--ink) 45%, transparent);
}
.dev-code{ flex:1; min-height:0; padding:14px 0; line-height:1.8; overflow:hidden; }
.dev-scroll{ position:relative; counter-reset:ln; transition:transform .6s var(--ease), opacity .5s var(--ease); }
.dev-scroll.is-clearing{ opacity:0; }
.dev-line{ display:flex; counter-increment:ln; min-height:1.8em; white-space:pre; }
.dev-line[hidden]{ display:none; }
.dev-line::before{ content:counter(ln); flex:0 0 58px; padding-right:24px; text-align:right; color:color-mix(in srgb, var(--ink) 16%, transparent); }
.dev-line.is-current{ background:color-mix(in srgb, var(--ink) 3%, transparent); }
.dev-line.is-current::before{ color:color-mix(in srgb, var(--ink) 40%, transparent); }
.dev-code .k{ color:color-mix(in srgb, var(--red) 60%, transparent); }
.dev-code .f{ color:color-mix(in srgb, var(--red-dark) 45%, transparent); }
.dev-code .s{ color:color-mix(in srgb, var(--red) 40%, transparent); }
.dev-code .v{ color:color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.dev-code .c{ color:color-mix(in srgb, var(--mist) 70%, transparent); font-style:italic; }
.dev-caret{ display:inline-block; width:2px; height:1.2em; margin-left:1px; vertical-align:-.2em; background:var(--red); animation:devCaret 1.05s steps(1) infinite; }
.dev-code.is-typing .dev-caret{ animation:none; }
@keyframes devCaret{ 50%{ opacity:0; } }

.dev-card{
  position:relative; z-index:1; width:min(540px, 100%); text-align:center;
  padding:44px 44px 40px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2);
}
.dev-card h1{ font-size:clamp(2rem, 3.4vw, 2.9rem); margin-bottom:16px; }
.dev-card h1 em{ font-style:normal; color:var(--red); }
.dev-card p{ color:var(--ink-soft); font-size:17px; line-height:1.6; margin:0 0 28px; }
.dev-card__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

@media (max-width:620px){
  .dev-stage{ padding:var(--header-clear) 12px 32px; }
  .dev-bg{ font-size:12px; }
  .dev-bg__inner{ padding:0 8px; }
  .dev-tab{ margin-left:34px; }
  .dev-line::before{ flex-basis:34px; padding-right:12px; }
  .dev-card{ padding:30px 22px 26px; }
  .dev-card__actions .btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){ .dev-caret{ animation:none; } }

/* ---------- Service pages: hero with the "deployment" terminal (IT üzemeltetés) ---------- */
.svc-hero{ padding-bottom:96px; }
.svc-hero .wrap{ display:block; }
.svc-hero__grid{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:56px; align-items:center; }
.svc-hero__text .eyebrow{ justify-content:flex-start; margin-bottom:14px; }
.svc-hero h1{ font-size:clamp(2.3rem,4.4vw,3.6rem); margin-bottom:22px; }
.svc-hero .lede{ margin:0 0 30px; max-width:540px; }
.svc-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:48px; }
.svc-promises{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.svc-promise{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.svc-promise b{ font-family:'Instrument Sans',sans-serif; font-size:16px; color:var(--ink); letter-spacing:-.01em; }
.svc-promise__icon{ display:block; color:var(--red); margin-bottom:6px; }
.svc-promise__icon svg{ display:block; width:40px; height:40px; }
.svc-hero__visual{ min-width:0; }

/* The terminal: a frosted-glass window over the animated hero background. */
.term{
  --term-green:#2fa968; --term-wait:#b7862a;
  width:100%; max-width:560px; margin-left:auto; overflow:hidden; border-radius:20px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 70px rgba(20,23,26,.12), 0 4px 14px rgba(20,23,26,.05), inset 0 1px 0 rgba(255,255,255,.8);
  font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition:opacity .45s ease, transform .45s ease, box-shadow .35s ease, translate .35s ease;
}
@media (hover:hover){ .term:hover{ translate:0 -3px; box-shadow:0 30px 80px rgba(20,23,26,.15), 0 5px 18px rgba(20,23,26,.06), inset 0 1px 0 rgba(255,255,255,.85); } }
.term.is-closing, .term.is-opening{ opacity:0; transform:scale(.94) translateY(10px); }
.term.is-closing{ pointer-events:none; }

.term__bar, .term__footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 18px; background:rgba(255,255,255,.34); }
.term__bar{ min-height:48px; border-bottom:1px solid rgba(20,23,26,.07); }
.term__footer{ min-height:42px; gap:14px; border-top:1px solid rgba(20,23,26,.07); color:var(--mist); font-size:9px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.term__dots{ display:flex; align-items:center; gap:7px; }
.term__dot{ width:9px; height:9px; border-radius:50%; padding:0; border:0; appearance:none; }
.term__dot--red{ background:#e85d68; cursor:pointer; transition:transform .15s ease; }
.term__dot--red:hover{ transform:scale(1.25); }
.term__dot--red:active{ transform:scale(.82); }
.term__dot--red:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.term__dot--yellow{ background:#d9ad46; }
.term__dot--green{ background:#4caf72; }
.term__title{ color:var(--mist); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.term__footer-status{ display:flex; align-items:center; gap:7px; }
.term__footer-dot{ width:6px; height:6px; border-radius:50%; background:var(--term-green); box-shadow:0 0 0 3px rgba(57,181,108,.14); transition:background-color .4s ease, box-shadow .4s ease; }
.term__footer-status[data-state="wait"] .term__footer-dot{ background:var(--term-wait); box-shadow:0 0 0 3px rgba(224,180,90,.2); animation:termPulse 1.2s ease-in-out infinite; }
.term__footer-status[data-state="wait"]{ color:var(--term-wait); }
.term__footer-status{ transition:color .4s ease; }
@keyframes termPulse{ 50%{ opacity:.35; } }
.term__footer-brand{ color:var(--ink-soft); }

.term__body{ min-height:455px; padding:24px 24px 22px; font-size:13px; font-weight:500; line-height:1.9; }
.term__line{ min-height:24px; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.term__prompt{ color:var(--mist); }
.term__command{ color:var(--ink); }
.term__response, .term__response--running{ color:var(--term-green); font-weight:600; }
.term__response{ margin-bottom:6px; }
.term__cursor{ display:inline-block; width:7px; height:14px; margin-left:3px; vertical-align:-2px; background:var(--red); animation:termBlink .9s steps(1) infinite; }
@keyframes termBlink{ 0%,48%{ opacity:1; } 49%,100%{ opacity:0; } }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .term{ --term-green:#5fd88a; --term-wait:#e0b45a; background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .term__bar, :root:not([data-theme="light"]) .term__footer{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
}
:root[data-theme="dark"] .term{ --term-green:#5fd88a; --term-wait:#e0b45a; background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="dark"] .term__bar, :root[data-theme="dark"] .term__footer{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }

@media (max-width:1100px){
  .svc-promises{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .svc-hero{ padding-bottom:64px; }
  .svc-hero__grid{ grid-template-columns:1fr; gap:40px; }
  .term{ margin:0 auto; max-width:100%; border-radius:16px; }
  .term__body{ min-height:270px; padding:20px 17px; font-size:11.5px; line-height:1.85; }
  .term__bar, .term__footer{ padding:0 14px; }
  .term__title{ font-size:8px; }
  .term__footer{ font-size:8px; }
}
@media (max-width:480px){ .svc-promises{ grid-template-columns:1fr 1fr; gap:18px 14px; } }
@media (prefers-reduced-motion:reduce){ .term, .term__cursor, .term__footer-dot{ transition:none; animation:none; } .term__cursor{ opacity:1; } }

/* Orbs: only the red ring, kept behind the terminal (so the glass has something to blur) and off the headline. */
.svc-hero .hero-orb--1{ width:460px; height:460px; top:56%; left:76%; }

/* ---------- Service pages: "Mit csinálunk?" blocks ---------- */
.svc-offer{ padding:90px 0 100px; }
.svc-offer__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.offer-card{
  display:flex; gap:24px; padding:32px 32px 30px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1);
  transition:box-shadow var(--base) var(--ease), border-color var(--base) var(--ease), translate var(--base) var(--ease);
}
@media (hover:hover){ .offer-card:hover{ box-shadow:var(--shadow-2); border-color:rgba(200,16,46,.35); translate:0 -3px; } }
/* Reveal once, calmly: a soft rise + fade as the card comes into view, and it stays (no blur, no fading back out).
   The transition list repeats the hover properties because it replaces the generic [data-reveal] one. */
.offer-card[data-reveal-soft]{
  opacity:0; transform:translateY(34px) scale(.985);
  transition:opacity .35s ease, transform .35s ease, box-shadow var(--base) var(--ease), border-color var(--base) var(--ease), translate var(--base) var(--ease);
}
.offer-card[data-reveal-soft].is-visible{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease), translate var(--base) var(--ease);
  transition-delay:calc(var(--stagger, 0) * 120ms), calc(var(--stagger, 0) * 120ms), 0s, 0s, 0s;
}
@media (prefers-reduced-motion: reduce){ .offer-card[data-reveal-soft]{ opacity:1; transform:none; transition:none; } }
.offer-card[data-reveal]{
  transform:translateY(34px) scale(.985);
  transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease), translate var(--base) var(--ease);
  transition-delay:calc(var(--stagger, 0) * 120ms), calc(var(--stagger, 0) * 120ms), 0s, 0s, 0s;
}
.offer-card[data-reveal].is-visible{ transform:none; }
.offer-card__icon{ flex:0 0 56px; width:56px; color:var(--red); transition:translate var(--base) var(--ease-spring); }
.offer-card__icon svg{ display:block; width:56px; height:56px; }
@media (hover:hover){ .offer-card:hover .offer-card__icon{ translate:0 -3px; } }
.offer-card__body{ min-width:0; }
.offer-card h3{ font-size:20px; letter-spacing:-.015em; margin:4px 0 10px; }
.offer-card p{ color:var(--ink-soft); font-size:15px; line-height:1.65; margin:0 0 16px; }
.offer-card ul{ list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--line-soft); display:grid; gap:7px; }
.offer-card li{ position:relative; padding-left:18px; font-size:14.5px; line-height:1.5; color:var(--ink); text-wrap:pretty; }
.offer-card li::before{ content:""; position:absolute; left:2px; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--red); }
@media (max-width:980px){ .svc-offer__grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .svc-offer{ padding:64px 0 72px; }
  .offer-card{ flex-direction:column; gap:16px; padding:26px 22px; }
  .offer-card__icon{ flex-basis:auto; width:46px; }
  .offer-card__icon svg{ width:46px; height:46px; }
}

/* ---------- Adatmentés page ---------- */
.bk-hero .hero-orb--1{ width:460px; height:460px; top:56%; left:76%; }

/* Glass card with the Veeam 3-2-1-1-0 rule (same glass recipe as the IT terminal). */
.bk-card{
  width:100%; max-width:560px; margin-left:auto; padding:26px 26px 22px; border-radius:20px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 70px rgba(20,23,26,.12), 0 4px 14px rgba(20,23,26,.05), inset 0 1px 0 rgba(255,255,255,.8);
}
.bk-card__head{ display:flex; flex-direction:column; gap:14px; padding-bottom:20px; margin-bottom:6px; border-bottom:1px solid rgba(20,23,26,.07); }
.bk-card__logo{ display:block; width:132px; height:auto; }
.bk-card h2{ font-size:20px; letter-spacing:-.015em; margin-bottom:6px; }
.bk-card__head p{ color:var(--ink-soft); font-size:14px; line-height:1.55; }

.bk-rule{ list-style:none; margin:0; padding:0; }
.bk-step{ position:relative; display:grid; grid-template-columns:50px minmax(0,1fr) 26px; gap:0 16px; align-items:start; padding:13px 0; }
.bk-step:not(:last-child)::after{   /* connector down to the next step */
  content:""; position:absolute; left:24px; top:calc(13px + 50px + 3px); bottom:-10px; width:2px; border-radius:2px;
  background:linear-gradient(var(--red), var(--red)); transform-origin:top; transition:transform .5s var(--ease) .15s;
}
.bk-step__node{
  width:50px; height:50px; display:grid; place-items:center; border-radius:50%;
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:22px; line-height:1; color:var(--red);
  background:var(--surface); border:2px solid var(--red);
  transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .6s var(--ease);
}
.bk-step__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:4px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.bk-step__txt b{ font-family:'Instrument Sans',sans-serif; font-size:16px; color:var(--ink); letter-spacing:-.01em; }
.bk-step__icon{ color:var(--mist); padding-top:13px; }
.bk-step__icon svg{ display:block; width:24px; height:24px; }

/* the final "0" belongs to Veeam: green node, green connector end, green check */
.bk-step--zero .bk-step__node{ color:var(--veeam); border-color:var(--veeam); }
.bk-step--zero .bk-step__icon{ color:var(--veeam); }
.bk-step:nth-last-child(2)::after{ background:linear-gradient(var(--red), var(--veeam)); }

/* playback (backup.js): steps start dimmed, light up in turn, the last one glows green once */
.bk-rule.is-armed .bk-step{ opacity:.35; transition:opacity .5s var(--ease); }
.bk-rule.is-armed .bk-step.is-on{ opacity:1; }
.bk-rule.is-armed .bk-step:not(:last-child)::after{ transform:scaleY(0); }
.bk-rule.is-armed .bk-step.is-on:not(:last-child)::after{ transform:scaleY(1); }
.bk-rule.is-armed .bk-step__node{ border-color:var(--line); color:var(--mist); }
.bk-rule.is-armed .bk-step.is-on .bk-step__node{ border-color:var(--red); color:var(--red); }
.bk-rule.is-armed .bk-step--zero.is-on .bk-step__node{ border-color:var(--veeam); color:var(--veeam); }
.bk-rule.is-done .bk-step--zero .bk-step__node{ box-shadow:0 0 0 6px rgba(0,179,54,.16); animation:bkGlow 1.6s ease-out 1; }
@keyframes bkGlow{ 0%{ box-shadow:0 0 0 0 rgba(0,179,54,.5); } 100%{ box-shadow:0 0 0 14px rgba(0,179,54,0); } }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bk-card{ background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .bk-card__head{ border-color:rgba(255,255,255,.08); }
}
:root[data-theme="dark"] .bk-card{ background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="dark"] .bk-card__head{ border-color:rgba(255,255,255,.08); }

/* Sections */
.bk-section{ padding:90px 0; }
.bk-section--alt{ background:var(--surface-sunken); }
.bk-why{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.bk-protect{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.bk-tile{
  display:flex; flex-direction:column; gap:10px; padding:28px 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1);
  transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease), translate var(--base) var(--ease);
}
.bk-tile[data-reveal]{ transition-delay:calc(var(--stagger, 0) * 70ms), calc(var(--stagger, 0) * 70ms), 0s, 0s, 0s; }
@media (hover:hover){ .bk-tile:hover{ box-shadow:var(--shadow-2); border-color:rgba(200,16,46,.35); translate:0 -3px; } }
.bk-tile__icon{ display:block; width:44px; height:44px; color:var(--red); margin-bottom:4px; }
.bk-tile__icon svg{ display:block; width:44px; height:44px; }
.bk-tile h3{ font-size:18px; letter-spacing:-.015em; }
.bk-tile p{ color:var(--ink-soft); font-size:14.5px; line-height:1.62; }
.bk-tile--row{ flex-direction:row; gap:18px; align-items:flex-start; }
.bk-tile--row .bk-tile__icon{ flex:0 0 40px; width:40px; height:40px; margin:2px 0 0; }
.bk-tile--row .bk-tile__icon svg{ width:40px; height:40px; }
.bk-tile--row h3{ margin-bottom:6px; }

/* RPO / RTO */
.bk-numbers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:960px; margin:0 auto; }
.bk-number{ padding:34px 34px 32px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1); transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }
.bk-number[data-reveal]{ transition-delay:calc(var(--stagger, 0) * 90ms); }
.bk-number__abbr{ font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:54px; line-height:1; letter-spacing:-.03em; margin-bottom:14px; color:var(--red); }
.bk-number:nth-child(2) .bk-number__abbr{ color:var(--veeam); }
.bk-number h3{ font-size:20px; letter-spacing:-.015em; margin-bottom:10px; }
.bk-number p{ color:var(--ink-soft); font-size:15px; line-height:1.65; }
.bk-note{ max-width:640px; margin:30px auto 0; text-align:center; color:var(--ink-soft); font-size:15px; }

/* How we work */
.bk-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; position:relative; counter-reset:none; }
.bk-steps__item{ position:relative; padding-top:6px; }
.bk-steps__num{
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%; margin-bottom:16px; position:relative; z-index:1;
  background:var(--surface); border:2px solid var(--veeam); color:var(--veeam);
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:20px;
}
.bk-steps__item:not(:last-child)::before{   /* line to the next step */
  content:""; position:absolute; top:29px; left:58px; right:-22px; height:2px; background:linear-gradient(90deg, var(--veeam), var(--line));
}
.bk-steps h3{ font-size:18px; letter-spacing:-.015em; margin-bottom:8px; }
.bk-steps p{ color:var(--ink-soft); font-size:14.5px; line-height:1.62; }

@media (max-width:1100px){
  .bk-why{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bk-protect{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bk-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 28px; }
  .bk-steps__item:nth-child(2)::before{ display:none; }
}
@media (max-width:900px){
  .bk-card{ margin:0 auto; max-width:100%; padding:22px 18px 18px; border-radius:16px; }
}
@media (max-width:700px){
  .bk-section{ padding:64px 0; }
  .bk-why, .bk-protect, .bk-numbers, .bk-steps{ grid-template-columns:1fr; }
  .bk-steps__item::before{ display:none; }
  .bk-number{ padding:28px 24px; }
  .bk-number__abbr{ font-size:44px; }
}
@media (max-width:420px){
  .bk-step{ grid-template-columns:44px minmax(0,1fr); gap:0 12px; }
  .bk-step__node{ width:44px; height:44px; font-size:20px; }
  .bk-step:not(:last-child)::after{ left:21px; top:calc(13px + 44px + 3px); }
  .bk-step__icon{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .bk-rule.is-armed .bk-step, .bk-step::after, .bk-step__node{ transition:none; }
  .bk-rule.is-done .bk-step--zero .bk-step__node{ animation:none; }
}

/* ---------- Gyengeáramú rendszerek: the blueprint hero ---------- */
.gy-hero .svc-hero__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; }
.gy-hero .hero-orb--1{ width:480px; height:480px; top:54%; left:78%; }
.gy-promises{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px 26px !important; }
.gy-promises .svc-promise{ outline:none; transition:translate var(--base) var(--ease); }
.gy-promises .svc-promise b{ transition:color var(--base) var(--ease); }
@media (hover:hover){ .gy-promises .svc-promise:hover{ translate:0 -3px; } .gy-promises .svc-promise:hover b{ color:var(--red); } }
.gy-promises .svc-promise:focus-visible b{ color:var(--red); }

.bp-card{
  width:100%; max-width:640px; margin-left:auto; padding:14px 14px 12px; border-radius:20px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 70px rgba(20,23,26,.12), 0 4px 14px rgba(20,23,26,.05), inset 0 1px 0 rgba(255,255,255,.8);
}
.bp__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 12px; }
.bp__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.bp-chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px 0 10px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:transparent; color:var(--mist); font:600 12.5px/1 'Public Sans',sans-serif; cursor:pointer;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.bp-chip svg{ width:16px; height:16px; flex:0 0 16px; }
.bp-chip.is-on{ color:var(--ink); border-color:var(--red); background:var(--surface); }
.bp-chip.is-on svg{ color:var(--red); }
.bp-chip:hover{ border-color:var(--red); }
.bp-chip:focus-visible, .bp__replay:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.bp__replay{ flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), rotate .5s var(--ease); }
.bp__replay svg{ width:16px; height:16px; }
.bp__replay:hover{ color:var(--red); border-color:var(--red); rotate:-90deg; }

.bp__paper{ border-radius:12px; overflow:hidden; background:rgba(255,255,255,.62); border:1px solid rgba(20,23,26,.07); }
.bp__svg{ display:block; width:100%; height:auto; }
.bp__title{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 4px 2px; font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mist); }
.bp__tip{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color var(--fast) var(--ease); }
.bp__tip.is-device{ color:var(--ink); }
.bp__meta{ flex:0 0 auto; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bp-card{ background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .bp__paper{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
}
:root[data-theme="dark"] .bp-card{ background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="dark"] .bp__paper{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }

/* --- drawing --- */
.bp-grid{ fill:none; stroke:var(--line); }
.bp-grid--s{ stroke-width:.35; }
.bp-grid--l{ stroke-width:.7; }
.bp-wall{ fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linejoin:miter; }
.bp-wall--outer{ stroke-width:2.8; }
.bp-door{ fill:none; stroke:var(--mist); stroke-width:1; stroke-dasharray:2 2; }
.bp-room{ font:600 6.3px 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.14em; fill:var(--mist); }
.bp-code{ font:600 6.3px 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.06em; fill:var(--ink-soft); }

.bp-cable{ fill:none; stroke:var(--red); stroke-width:1.7; stroke-linejoin:round; }
.bp-junction{ fill:var(--red); }
.bp-rack{ fill:var(--surface); stroke:var(--ink); stroke-width:1.6; }
.bp-rack-slot{ fill:none; stroke:var(--mist); stroke-width:1; }
.bp-rack-led{ fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; }
.bp-ap{ fill:var(--surface); stroke:var(--red); stroke-width:1.7; }
.bp-ap-dot{ fill:var(--red); }
.bp-dp{ fill:var(--surface); stroke:var(--red); stroke-width:1.5; }
.bp-ring{ fill:none; stroke:var(--red); stroke-width:.9; stroke-dasharray:2.5 3; opacity:0; transform-box:fill-box; transform-origin:center; }
.bp-reader{ fill:var(--surface); stroke:var(--ink); stroke-width:1.5; }
.bp-reader-dot{ fill:var(--red); }
.bp-reader-wave{ fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; }
.bp-cone{ fill:var(--ink); fill-opacity:.07; stroke:var(--mist); stroke-width:.8; stroke-dasharray:3 3; transform-box:view-box; }
.bp-cam{ fill:var(--surface); stroke:var(--ink); stroke-width:1.6; }
.bp-cam-lens{ fill:var(--red); }
.bp-pir{ fill:var(--surface); stroke:var(--red); stroke-width:1.6; }
.bp-pir-dot{ fill:var(--red); }
.bp-pir-arc{ fill:none; stroke:var(--red); stroke-width:.9; stroke-dasharray:2 2.5; opacity:.55; }
.bp-panel{ fill:var(--surface); stroke:var(--ink); stroke-width:1.5; }
.bp-panel-keys{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }
.bp-siren{ fill:none; stroke:var(--red); stroke-width:1.2; stroke-linecap:round; }
.bp-hit{ fill:rgba(0,0,0,0); }
.bp-dev{ outline:none; cursor:pointer; }
.bp-dev:hover :is(.bp-ap, .bp-dp, .bp-reader, .bp-cam, .bp-pir, .bp-panel, .bp-rack){ stroke-width:2.6; }
.bp-dev:focus-visible .bp-hit{ stroke:var(--red); stroke-width:1; stroke-dasharray:2 2; }

/* --- layers --- */
.bp-layer{ transition:opacity .35s ease; }
.bp-layer.is-off{ opacity:0; pointer-events:none; }
.bp[data-focus="net"] .bp-layer:not([data-layer="net"]),
.bp[data-focus="acc"] .bp-layer:not([data-layer="acc"]),
.bp[data-focus="cam"] .bp-layer:not([data-layer="cam"]),
.bp[data-focus="alm"] .bp-layer:not([data-layer="alm"]){ opacity:.14; }

/* --- endless pulses (only once the drawing is in) --- */
@keyframes bpRing{ 0%{ transform:scale(.12); opacity:.9; } 100%{ transform:scale(1); opacity:0; } }
@keyframes bpArc{ 0%,100%{ opacity:.12; } 45%{ opacity:.85; } }
.bp:not(.is-armed) .bp-ring, .bp.is-playing .bp-ring{ animation:bpRing 3.4s ease-out infinite; animation-delay:calc(var(--d, 0ms) + 500ms); }
.bp:not(.is-armed) .bp-pir-arc, .bp.is-playing .bp-pir-arc{ animation:bpArc 2.6s ease-in-out infinite; animation-delay:var(--d, 0ms); }
.bp.is-paused *{ animation-play-state:paused !important; }

/* --- build-up (backup of the finished state when JS is off: no .is-armed, everything visible) --- */
.bp-draw{ stroke-dasharray:1; stroke-dashoffset:0; }
.bp-pop{ transform-box:fill-box; transform-origin:center; }
.bp.is-armed .bp-draw{ stroke-dashoffset:1; }
.bp.is-armed .bp-fade, .bp.is-armed .bp-pop, .bp.is-armed .bp-cone{ opacity:0; }
.bp.is-armed .bp-pop{ transform:scale(.3); }
.bp.is-armed .bp-cone{ transform:scale(.15); }
.bp.is-armed .bp-pir-arc, .bp.is-armed .bp-ring{ opacity:0; }
.bp.is-armed.is-playing .bp-draw{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t, 800ms) var(--ease) var(--d, 0ms); }
.bp.is-armed.is-playing .bp-fade{ opacity:1; transition:opacity .6s var(--ease) var(--d, 0ms); }
.bp.is-armed.is-playing .bp-pop{ opacity:1; transform:none; transition:opacity .3s ease var(--d, 0ms), transform .5s var(--ease-spring) var(--d, 0ms); }
.bp.is-armed.is-playing .bp-cone{ opacity:1; transform:none; transition:opacity .6s ease var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }

/* --- section variants --- */
.bk-steps--red .bk-steps__num{ border-color:var(--red); color:var(--red); }
.bk-steps--red .bk-steps__item:not(:last-child)::before{ background:linear-gradient(90deg, var(--red), var(--line)); }
@media (min-width:1101px){
  .bk-steps--five{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; }
  .gy-why{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1100px){ .bk-steps--five .bk-steps__item:nth-child(4)::before{ display:none; } }
/* six steps: three per row on desktop, two on tablets */
@media (min-width:1101px){
  .bk-steps--six{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 32px; }
  .bk-steps--six .bk-steps__item:nth-child(3)::before{ display:none; }
}
@media (max-width:1100px){ .bk-steps--six .bk-steps__item:nth-child(even)::before{ display:none; } }
.sv-channels{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; margin-inline:auto; }
@media (max-width:700px){ .sv-channels{ grid-template-columns:1fr; } }

@media (max-width:900px){
  .gy-hero .svc-hero__grid{ grid-template-columns:1fr; }
  .bp-card{ margin:0 auto; max-width:100%; }
}
@media (max-width:520px){
  .bp-card{ padding:10px 10px 10px; border-radius:16px; }
  .bp-room{ display:none; }
  .bp-chip{ height:30px; padding:0 10px 0 8px; font-size:12px; gap:5px; }
  .bp__title{ font-size:9px; }
}
@media (prefers-reduced-motion:reduce){
  .bp-ring, .bp-pir-arc{ animation:none !important; }
  .bp-ring{ opacity:.35; }
}

/* ---------- Kereskedelem: the quote-list hero ---------- */
.tr-hero .hero-orb--1{ width:460px; height:460px; top:56%; left:76%; }
.qt-card{
  --qt-green:#2fa968; --qt-wait:#b7862a;
  width:100%; max-width:540px; margin-left:auto; padding:22px 20px 18px; border-radius:20px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 70px rgba(20,23,26,.12), 0 4px 14px rgba(20,23,26,.05), inset 0 1px 0 rgba(255,255,255,.8);
}
.qt-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:0 4px 16px; }
.qt-card h2{ font-size:20px; letter-spacing:-.015em; margin-bottom:4px; }
.qt-card__head p{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; }
.qt-card__badge{ flex:0 0 auto; padding:4px 11px; border-radius:var(--r-pill); background:var(--surface-sunken); border:1px solid var(--line-soft); color:var(--mist); font-size:11.5px; font-weight:600; }

.qt-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.qt-row{
  width:100%; display:grid; grid-template-columns:40px minmax(0,1fr) 26px; gap:12px; align-items:center; text-align:left;
  padding:10px 14px 10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.4);
  font:inherit; color:inherit; cursor:pointer;
  transition:border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), translate var(--fast) var(--ease);
}
@media (hover:hover){ .qt-row:hover{ border-color:var(--red); translate:0 -1px; } }
.qt-row:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.qt-row.is-selected{ border-color:var(--red); background:var(--surface); }
.qt-row__icon{ display:block; color:var(--mist); transition:color var(--fast) var(--ease); }
.qt-row__icon svg{ display:block; width:34px; height:34px; }
.qt-row.is-selected .qt-row__icon{ color:var(--red); }
.qt-row__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.qt-row__txt b{ font-family:'Instrument Sans',sans-serif; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.qt-row__txt span{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.qt-row__check{ width:24px; height:24px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--line); color:#fff; transition:background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.qt-row__check svg{ width:14px; height:14px; opacity:0; scale:.5; transition:opacity var(--fast) var(--ease), scale .3s var(--ease-spring); }
.qt-row.is-selected .qt-row__check{ background:var(--red); border-color:var(--red); }
.qt-row.is-selected .qt-row__check svg{ opacity:1; scale:1; }

.qt-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 4px 2px; }
.qt-status{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--qt-wait); transition:color .4s ease; }
.qt-status__dot{ width:8px; height:8px; border-radius:50%; background:var(--qt-wait); box-shadow:0 0 0 3px rgba(224,180,90,.2); animation:termPulse 1.2s ease-in-out infinite; transition:background-color .4s ease; }
.qt-status[data-state="ok"]{ color:var(--qt-green); }
.qt-status[data-state="ok"] .qt-status__dot{ background:var(--qt-green); box-shadow:0 0 0 3px rgba(57,181,108,.16); animation:none; }
.qt-cta{ padding:11px 20px; font-size:14.5px; }

/* intro: rows slide in one after another (qt.js adds .is-armed, then .is-playing) */
.qt-card.is-armed .qt-item{ opacity:0; translate:0 12px; }
.qt-card.is-armed.is-playing .qt-item{ opacity:1; translate:none; transition:opacity .55s var(--ease) var(--d, 0ms), translate .55s var(--ease) var(--d, 0ms); }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .qt-card{ --qt-green:#5fd88a; --qt-wait:#e0b45a; background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .qt-row{ background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .qt-row.is-selected{ background:var(--surface); }
}
:root[data-theme="dark"] .qt-card{ --qt-green:#5fd88a; --qt-wait:#e0b45a; background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="dark"] .qt-row{ background:rgba(255,255,255,.04); }
:root[data-theme="dark"] .qt-row.is-selected{ background:var(--surface); }

@media (max-width:900px){ .qt-card{ margin:0 auto; max-width:100%; } }
@media (max-width:480px){
  .qt-card{ padding:18px 12px 14px; border-radius:16px; }
  .qt-card__badge{ display:none; }
  .qt-card__foot{ flex-direction:column; align-items:stretch; }
  .qt-cta{ text-align:center; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .qt-status__dot{ animation:none; } }

/* ---------- Szerviz: the live service ticket ---------- */
.sv-hero .hero-orb--1{ width:460px; height:460px; top:56%; left:76%; }
.sv-card{
  --sv-green:#2fa968; --sv-wait:#b7862a;
  width:100%; max-width:540px; margin-left:auto; padding:22px 20px 16px; border-radius:20px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 70px rgba(20,23,26,.12), 0 4px 14px rgba(20,23,26,.05), inset 0 1px 0 rgba(255,255,255,.8);
}
.sv-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:0 4px 14px; }
.sv-card h2{ font-size:20px; letter-spacing:-.015em; margin-bottom:4px; }
.sv-card__head p{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; }
.sv-card__id{ flex:0 0 auto; font:600 11.5px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.06em; color:var(--mist); padding:5px 10px; border:1px dashed var(--line); border-radius:8px; }

.sv-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 2px 14px; }
.sv-chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px 0 10px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:transparent; color:var(--mist); font:600 12.5px/1 'Public Sans',sans-serif; cursor:pointer;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.sv-chip svg{ width:16px; height:16px; flex:0 0 16px; }
.sv-chip.is-on{ color:var(--ink); border-color:var(--red); background:var(--surface); }
.sv-chip.is-on svg{ color:var(--red); }
.sv-chip:hover{ border-color:var(--red); }
.sv-chip:focus-visible, .sv-replay:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.sv-device{ display:flex; align-items:center; gap:14px; padding:12px 14px; margin-bottom:16px; border-radius:14px; background:rgba(255,255,255,.45); border:1px solid var(--line); }
.sv-device__icon{ flex:0 0 38px; color:var(--red); }
.sv-device__icon svg{ display:block; width:38px; height:38px; }
.sv-device > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sv-device b{ font-family:'Instrument Sans',sans-serif; font-size:16px; letter-spacing:-.01em; color:var(--ink); }
.sv-device > div > span{ font-size:13px; color:var(--ink-soft); line-height:1.4; }
.sv-card__example{ flex:0 0 auto; padding:3px 10px; border-radius:var(--r-pill); background:var(--surface-sunken); border:1px solid var(--line-soft); color:var(--mist); font-size:11px; font-weight:600; }

.sv-steps{ list-style:none; margin:0; padding:0 4px; }
.sv-step{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:0 14px; padding:0 0 14px; }
.sv-step:last-child{ padding-bottom:2px; }
.sv-step:not(:last-child)::after{ content:""; position:absolute; left:13px; top:30px; bottom:2px; width:2px; border-radius:2px; background:var(--line); }
.sv-step:not(:last-child)::before{ content:""; position:absolute; z-index:1; left:13px; top:30px; bottom:2px; width:2px; border-radius:2px; background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease); }
.sv-step.is-done:not(:last-child)::before{ transform:scaleY(1); }
.sv-step__dot{ position:relative; z-index:2; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--line); background:var(--surface); color:#fff; transition:background-color .35s var(--ease), border-color .35s var(--ease); }
.sv-step__dot svg{ width:14px; height:14px; opacity:0; scale:.5; transition:opacity .25s ease, scale .35s var(--ease-spring); }
.sv-step.is-active .sv-step__dot{ border-color:var(--red); animation:svPulse 1.1s ease-in-out infinite; }
.sv-step.is-done .sv-step__dot{ background:var(--red); border-color:var(--red); }
.sv-step.is-done .sv-step__dot svg{ opacity:1; scale:1; }
.sv-step:last-child.is-done .sv-step__dot{ background:var(--sv-green); border-color:var(--sv-green); }
@keyframes svPulse{ 50%{ box-shadow:0 0 0 6px rgba(200,16,46,.14); } }
.sv-step__txt{ display:flex; flex-direction:column; gap:1px; padding-top:3px; min-width:0; }
.sv-step__txt b{ font-family:'Instrument Sans',sans-serif; font-size:15px; letter-spacing:-.01em; color:var(--mist); transition:color .35s var(--ease); }
.sv-step__note{ font-size:13px; line-height:1.45; color:var(--ink-soft); opacity:0; transition:opacity .45s ease; }
.sv-step.is-active .sv-step__txt b, .sv-step.is-done .sv-step__txt b{ color:var(--ink); }
.sv-step.is-active .sv-step__note, .sv-step.is-done .sv-step__note{ opacity:1; }

.sv-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px 0; margin-top:12px; border-top:1px solid rgba(20,23,26,.07); }
.sv-status{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--sv-wait); transition:color .4s ease; }
.sv-status__dot{ width:8px; height:8px; border-radius:50%; background:var(--sv-wait); box-shadow:0 0 0 3px rgba(224,180,90,.2); animation:termPulse 1.2s ease-in-out infinite; transition:background-color .4s ease; }
.sv-status[data-state="ok"]{ color:var(--sv-green); }
.sv-status[data-state="ok"] .sv-status__dot{ background:var(--sv-green); box-shadow:0 0 0 3px rgba(57,181,108,.16); animation:none; }
.sv-replay{ flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), rotate .5s var(--ease); }
.sv-replay svg{ width:16px; height:16px; }
.sv-replay:hover{ color:var(--red); border-color:var(--red); rotate:-90deg; }

.sv-link{ margin-top:6px; font-weight:600; font-size:14px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.sv-link:hover{ color:var(--red); }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sv-card{ --sv-green:#5fd88a; --sv-wait:#e0b45a; background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .sv-device{ background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .sv-card__foot{ border-color:rgba(255,255,255,.08); }
}
:root[data-theme="dark"] .sv-card{ --sv-green:#5fd88a; --sv-wait:#e0b45a; background:rgba(26,29,32,.55); border-color:rgba(255,255,255,.10); box-shadow:0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="dark"] .sv-device{ background:rgba(255,255,255,.04); }
:root[data-theme="dark"] .sv-card__foot{ border-color:rgba(255,255,255,.08); }

@media (max-width:900px){ .sv-card{ margin:0 auto; max-width:100%; } }
@media (max-width:480px){
  .sv-card{ padding:18px 12px 12px; border-radius:16px; }
  .sv-chip{ height:30px; padding:0 10px 0 8px; font-size:12px; gap:5px; }
  .sv-card__example{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .sv-status__dot, .sv-step.is-active .sv-step__dot{ animation:none; } .sv-step:not(:last-child)::before{ transition:none; } }

/* ---------- Language switch (globe + current language, small menu) ---------- */
.lang{ position:relative; }
.lang summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:8px 12px 8px 11px;
  border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink);
  font-size:13px; font-weight:600; letter-spacing:.02em;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lang summary::-webkit-details-marker{ display:none; }
.lang summary:hover, .lang[open] summary{ border-color:var(--red); }
.lang summary:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.lang summary svg{ width:17px; height:17px; flex:0 0 auto; }
.main-nav a{ white-space:nowrap; }
.lang .lang__chev{ width:13px; height:13px; color:var(--ink-soft); transition:rotate var(--base) var(--ease); }
.lang[open] .lang__chev{ rotate:180deg; }
.lang ul{
  list-style:none; margin:0; padding:6px; position:absolute; right:0; top:calc(100% + 10px); min-width:160px; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2);
}
.main-nav .lang ul a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:11px; font-size:14px; color:var(--ink-soft); }
.main-nav .lang ul a:hover{ background:var(--surface-sunken); color:var(--ink); }
.main-nav .lang ul a.is-current{ color:var(--red); }
.main-nav .lang ul a.is-current::after{ content:""; width:7px; height:12px; border:solid currentColor; border-width:0 2px 2px 0; rotate:45deg; translate:0 -2px; }
.mobile-lang{ display:none; }
@media (max-width:860px){
  .main-nav .lang{ display:none; }
  .mobile-lang{ display:flex; gap:10px; padding:16px 0 24px; }
  .mobile-nav-content .mobile-lang a{ flex:1; text-align:center; padding:12px 0; border:1px solid var(--line); border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-soft); }
  .mobile-nav-content .mobile-lang a.is-current{ border-color:var(--red); color:var(--red); }
}

/* ---------- Reading progress bar (created by main.js) ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; z-index:200; height:3px; pointer-events:none;
  background:var(--red); transform:scaleX(0); transform-origin:0 50%; opacity:0;
  transition:opacity .25s ease;
}
.scroll-progress.is-on{ opacity:1; }
@media print{ .scroll-progress{ display:none; } }

/* ======================================================================================================
   RÓLUNK (about page) — hero card, timeline, values, pillars, leadership chart
   ====================================================================================================== */
.ab-hero .hero-orb--1{ width:460px; height:460px; top:56%; left:76%; }
.ab-lead2{ margin-top:14px; margin-bottom:26px; max-width:560px; color:var(--ink-soft); font-size:16.5px; line-height:1.65; }
.ab-lead2 b{ color:var(--ink); }

/* hero card */
.ab-card{ padding:30px 28px 24px; }
.ab-card__num{ display:flex; align-items:baseline; gap:10px; font-family:'Instrument Sans',sans-serif; line-height:1; }
.ab-card__num b{ font-size:clamp(76px,9vw,116px); font-weight:700; letter-spacing:-.045em; color:var(--red); font-variant-numeric:tabular-nums; }
.ab-card__num span{ font-size:clamp(26px,3vw,36px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.ab-card__label{ margin:6px 0 20px; font-size:14px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }
.ab-facts{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(20,23,26,.08); }
.ab-facts li{ display:flex; align-items:baseline; gap:14px; padding:12px 2px; border-bottom:1px solid rgba(20,23,26,.08); }
.ab-facts b{ flex:0 0 96px; font-family:'Instrument Sans',sans-serif; font-size:19px; letter-spacing:-.01em; color:var(--ink); }
.ab-facts span{ font-size:14px; line-height:1.4; color:var(--ink-soft); }
.ab-card__quote{ margin:18px 2px 0; font-size:14.5px; line-height:1.55; color:var(--ink); font-weight:600; }
:root:not([data-theme="light"]) .ab-facts, :root:not([data-theme="light"]) .ab-facts li{ border-color:rgba(255,255,255,.1); }
:root[data-theme="dark"] .ab-facts, :root[data-theme="dark"] .ab-facts li{ border-color:rgba(255,255,255,.1); }
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .ab-facts, :root:not([data-theme="dark"]) .ab-facts li{ border-color:rgba(20,23,26,.08); } }
@media (max-width:480px){ .ab-card{ padding:24px 18px 20px; } .ab-facts b{ flex-basis:84px; } }

/* timeline */
.ab-timeline{ --p:1; position:relative; list-style:none; margin:0 auto; padding:8px 0 0; max-width:1000px; }
.ab-timeline::before, .ab-timeline::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; margin-left:-1.5px; border-radius:3px; }
.ab-timeline::before{ background:var(--line); }
.ab-timeline::after{ background:var(--red); transform-origin:top; transform:scaleY(var(--p)); }
.ab-step{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-bottom:58px; }
.ab-step:last-child{ padding-bottom:0; }
.ab-step__body{ padding:0 52px; }
.ab-step:nth-child(odd) .ab-step__body{ grid-column:1; text-align:right; }
.ab-step:nth-child(even) .ab-step__body{ grid-column:2; }
.ab-step__node{
  position:absolute; z-index:1; left:50%; top:6px; width:22px; height:22px; margin-left:-11px; border-radius:50%;
  background:var(--surface); border:3px solid var(--line);
  transition:background-color .45s var(--ease), border-color .45s var(--ease), scale .5s var(--ease-spring, var(--ease));
}
.ab-step.is-on .ab-step__node, .ab-timeline:not(.is-live) .ab-step__node{ background:var(--red); border-color:var(--red); scale:1.12; }
.ab-step.is-future .ab-step__node, .ab-step.is-future.is-on .ab-step__node, .ab-timeline:not(.is-live) .ab-step.is-future .ab-step__node{ background:var(--surface); }
.ab-step.is-future.is-on .ab-step__node, .ab-timeline:not(.is-live) .ab-step.is-future .ab-step__node{ border-color:var(--red); }
.ab-step__when{ display:block; font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:clamp(28px,3.4vw,40px); letter-spacing:-.03em; line-height:1.05; color:var(--mist); transition:color .45s var(--ease); }
.ab-step.is-on .ab-step__when, .ab-timeline:not(.is-live) .ab-step__when{ color:var(--red); }
.ab-step h3{ margin:10px 0 8px; font-size:20px; letter-spacing:-.015em; line-height:1.3; }
.ab-step p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.65; }
.ab-step.is-future .ab-step__when{ font-style:italic; }

@media (max-width:760px){
  .ab-timeline::before, .ab-timeline::after{ left:14px; }
  .ab-step{ grid-template-columns:1fr; padding-bottom:44px; }
  .ab-step:nth-child(odd) .ab-step__body, .ab-step:nth-child(even) .ab-step__body{ grid-column:1; text-align:left; padding:0 0 0 52px; }
  .ab-step__node{ left:14px; }
}

/* values — black band like the homepage's "Miért mi", cards stay white */
.ab-dark{ background:#000; color:#fff; }
.ab-dark .section-head h2{ color:#fff; }
.ab-dark .section-head p{ color:rgba(255,255,255,.62); }
.ab-values{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
@media (max-width:1100px){ .ab-values{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .ab-values{ grid-template-columns:1fr; } }

/* pillars */
.ab-pillars{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.ab-pillar{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:28px 26px 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1);
  transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease), translate var(--base) var(--ease);
}
.ab-pillar[data-reveal]{ transition-delay:calc(var(--stagger, 0) * 80ms), calc(var(--stagger, 0) * 80ms), 0s, 0s, 0s; }
.ab-pillar::after{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); }
@media (hover:hover){ .ab-pillar:hover{ box-shadow:var(--shadow-2); border-color:rgba(200,16,46,.35); translate:0 -3px; } .ab-pillar:hover::after{ transform:scaleX(1); } }
.ab-pillar__no{ font:600 12px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.1em; color:var(--mist); }
.ab-pillar h3{ font-size:26px; letter-spacing:-.025em; }
.ab-pillar ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ab-pillar li a{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--ink-soft); text-decoration:none; transition:color var(--fast) var(--ease), translate var(--fast) var(--ease); }
.ab-pillar li a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); flex:0 0 6px; }
.ab-pillar li a:hover{ color:var(--red); translate:3px 0; }
@media (max-width:1100px){ .ab-pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .ab-pillars{ grid-template-columns:1fr; } }

/* leadership chart — the connectors are one SVG, drawn by about.js from the real card positions */
.ab-people .section-head{ max-width:880px; }
.ab-org{ position:relative; display:flex; flex-direction:column; align-items:center; max-width:920px; margin:0 auto; }
.ab-org__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.ab-org > :not(.ab-org__svg){ position:relative; z-index:1; }
.ab-person{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1);
  padding:22px 20px 20px; transition:box-shadow var(--base) var(--ease), border-color var(--base) var(--ease), translate var(--base) var(--ease);
}
@media (hover:hover){ .ab-person:hover{ box-shadow:var(--shadow-2); border-color:rgba(200,16,46,.35); translate:0 -3px; } }
.ab-person h3{ margin-top:10px; font-size:18px; letter-spacing:-.015em; }
.ab-person p{ margin:0; color:var(--ink-soft); font-size:14px; font-weight:600; }
.ab-person--lead{ width:min(360px,100%); padding:28px 24px 26px; }
.ab-person--lead h3{ font-size:22px; }
.ab-person--lead p{ color:var(--red); }
.ab-avatar{
  display:grid; place-items:center; width:84px; height:84px; border-radius:50%; overflow:hidden;
  background:var(--surface-sunken); border:2px solid var(--line); color:var(--red);
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:26px; letter-spacing:-.02em;
}
.ab-avatar--lg{ width:144px; height:144px; font-size:44px; border-color:var(--red); box-shadow:0 0 0 6px var(--surface), 0 0 0 7px var(--line); }
.ab-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.ab-org__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; width:100%; margin-top:76px; }
.ab-org__team{
  display:flex; align-items:center; justify-content:center; gap:14px; width:100%; margin-top:64px; padding:18px 24px;
  border:1.5px dashed var(--line); border-radius:var(--r-md); color:var(--ink-soft); font-size:15px; line-height:1.55; background:var(--surface);
}
.ab-org__team b{ color:var(--ink); }
.ab-org__team-icon{ flex:0 0 36px; width:36px; height:36px; color:var(--red); }
.ab-org__team-icon svg{ width:36px; height:36px; display:block; }

/* connector styling */
.ab-link{ fill:none; stroke:var(--red); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ab-link--soft{ stroke:var(--mist); stroke-width:2; stroke-dasharray:2 7; opacity:.75; }
.ab-dot{ fill:var(--red); }
.ab-dot--soft{ fill:var(--mist); opacity:.75; }

/* the chart draws itself (only when JS armed it) */
.ab-org.is-armed .ab-link:not(.ab-link--soft){ stroke-dasharray:1; stroke-dashoffset:1; }
.ab-org.is-armed .ab-link--soft, .ab-org.is-armed .ab-dot{ opacity:0; }
.ab-org.is-armed .ab-person--lead, .ab-org.is-armed .ab-person--sub, .ab-org.is-armed .ab-org__team{ opacity:0; translate:0 14px; }
.ab-org.is-drawn .ab-link:not(.ab-link--soft){ stroke-dashoffset:0; }
.ab-org.is-drawn .ab-link--soft, .ab-org.is-drawn .ab-dot--soft{ opacity:.75; }
.ab-org.is-drawn .ab-dot:not(.ab-dot--soft){ opacity:1; }
.ab-org.is-drawn .ab-person--lead, .ab-org.is-drawn .ab-person--sub, .ab-org.is-drawn .ab-org__team{ opacity:1; translate:0 0; }
.ab-org .ab-link:not(.ab-link--soft){ transition:stroke-dashoffset .9s var(--ease) .35s; }
.ab-org .ab-link--soft, .ab-org .ab-dot{ transition:opacity .5s var(--ease) 1.5s; }
.ab-org .ab-person--lead, .ab-org .ab-person--sub, .ab-org .ab-org__team{ transition:opacity .6s var(--ease), translate .6s var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease); }
.ab-org .ab-person--sub{ transition-delay:calc(1.1s + var(--i, 0) * 120ms), calc(1.1s + var(--i, 0) * 120ms), 0s, 0s; }
.ab-org .ab-org__team{ transition-delay:1.9s, 1.9s, 0s, 0s; }
.ab-org.is-drawn .ab-person:hover{ transition-delay:0s; }
.ab-org__svg.is-static *{ transition:none !important; }

@media (max-width:760px){
  .ab-org__row{ grid-template-columns:1fr; gap:48px; margin-top:48px; }
  .ab-org__team{ flex-direction:column; text-align:center; margin-top:48px; }
}

@media (prefers-reduced-motion:reduce){
  .ab-pillar::after, .ab-step__node, .ab-step__when{ transition:none; }
}
@media print{ .ab-hero .hero-orb--1{ display:none; } }

/* vision */
.ab-vision__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:start; }
.ab-vision__head h2{ margin-top:14px; font-size:clamp(1.7rem,3.1vw,2.5rem); line-height:1.18; letter-spacing:-.03em; position:relative; padding-left:26px; }
.ab-vision__head h2::before{ content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:4px; border-radius:4px; background:var(--red); transform-origin:top; transform:scaleY(0); transition:transform .9s var(--ease) .2s; }
.ab-vision__head.is-visible h2::before{ transform:scaleY(1); }
.ab-vision__text p{ margin:0 0 18px; color:var(--ink-soft); font-size:16.5px; line-height:1.75; }
.ab-vision__text p:first-child{ color:var(--ink); }
.ab-vision__text p:last-child{ margin-bottom:0; }
@media (max-width:900px){ .ab-vision__grid{ grid-template-columns:1fr; gap:28px; } }
@media (prefers-reduced-motion:reduce){ .ab-vision__head h2::before{ transform:none; transition:none; } }