/* ============ TOKENS ============ */
  :root{
    --ground:#EEF0F2;
    --ground-2:#E4E7EA;
    --surface: rgba(255,255,255,0.58);
    --surface-strong: rgba(255,255,255,0.82);
    --edge: rgba(20,24,28,0.10);
    --edge-strong: rgba(20,24,28,0.18);
    --ink:#0D1013;
    --ink-soft:#565F6B;
    /* #87909C csak 2,83:1 volt a --ground-on es 2,60:1 a --ground-2-n, tehat
       megbukott a WCAG AA 4,5:1-en. 29 szoveg-szabaly hasznalja (footer-fejlecek,
       morzsamenu, tablazat-fejlecek, diagram-feliratok, statisztika-cimkek). */
    --ink-faint:#616870;   /* 4,56:1 a --ground-2-n, 4,94:1 a --ground-on */
    --chrome-1:#C7CDD6;
    --chrome-2:#9AA1AC;
    --chrome-3:#5B6270;
    --mint:#0FD79A;
    --mint-deep:#0A9E77;
    --mint-ink:#04352A;
    --shadow: 0 20px 60px -20px rgba(20,30,35,0.35);
    --radius-card: 26px;
    --radius-pill: 999px;
    --radius-tile: 14px;
    --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
    --sp-5:2.5rem; --sp-6:3rem; --sp-8:4rem; --sp-10:5rem; --sp-12:6rem; --sp-16:8rem;
    --font-display:'Unbounded', 'Arial Black', sans-serif;
    --font-body:'Manrope', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0A0C0E;
      --ground-2:#101317;
      --surface: rgba(255,255,255,0.055);
      --surface-strong: rgba(255,255,255,0.09);
      --edge: rgba(255,255,255,0.10);
      --edge-strong: rgba(255,255,255,0.18);
      --ink:#EDEFF2;
      --ink-soft:#9BA3AE;
      --ink-faint:#777E88;   /* 3,88:1 -> 4,55:1 a --ground-2-n */
      --chrome-1:#454B54;
      --chrome-2:#2B2F35;
      --chrome-3:#1A1C20;
      --mint:#22F0B4;
      --mint-deep:#12C592;
      --mint-ink:#04352A;
      --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0A0C0E;
    --ground-2:#101317;
    --surface: rgba(255,255,255,0.055);
    --surface-strong: rgba(255,255,255,0.09);
    --edge: rgba(255,255,255,0.10);
    --edge-strong: rgba(255,255,255,0.18);
    --ink:#EDEFF2;
    --ink-soft:#9BA3AE;
    --ink-faint:#777E88;   /* 3,88:1 -> 4,55:1 a --ground-2-n */
    --chrome-1:#454B54;
    --chrome-2:#2B2F35;
    --chrome-3:#1A1C20;
    --mint:#22F0B4;
    --mint-deep:#12C592;
    --mint-ink:#04352A;
    --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* overflow-wrap:anywhere — a hosszú magyar összetett szavak (pl.
     "kampánymenedzsernek") min-content szélessége keskeny mobilnézetben
     nagyobb, mint a rendelkezésre álló hely: e nélkül kilógnak a dobozukból,
     és rács-elemként a saját sávjukat is szélesebbre feszítik. */
  h1,h2,h3{ font-family:var(--font-display); text-wrap:balance; margin:0; letter-spacing:-0.01em; overflow-wrap:anywhere; }
  p{ margin:0; overflow-wrap:break-word; }
  a{ color:inherit; }
  ::selection{ background:var(--mint); color:var(--mint-ink); }

  .wrap{ max-width:1180px; margin:0 auto; padding-left:var(--sp-4); padding-right:var(--sp-4); }
  @media (max-width:640px){ .wrap{ padding-left:var(--sp-3); padding-right:var(--sp-3); } }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--mint-deep);
    display:flex;
    align-items:center;
    gap:.6em;
  }
  .eyebrow::before{
    content:"";
    width:1.6em; height:1px;
    background:var(--mint-deep);
    display:inline-block;
  }

  button, .btn{
    font-family:var(--font-body);
    font-weight:700;
    font-size:.95rem;
    text-decoration:none;
    border:none;
    cursor:pointer;
    border-radius:var(--radius-pill);
    padding:.9em 1.6em;
    display:inline-flex;
    align-items:center;
    gap:.5em;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  }
  button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible{
    outline:2px solid var(--mint);
    outline-offset:3px;
  }
  .btn-primary{ background:var(--mint); color:var(--mint-ink); box-shadow:0 10px 30px -8px rgba(15,215,154,0.55); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -6px rgba(15,215,154,0.65); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--edge-strong); }
  .btn-ghost:hover{ border-color:var(--mint-deep); color:var(--mint-deep); }
  .btn-block{ width:100%; justify-content:center; }
  .btn-whatsapp{ background:#25D366; color:#04150D; box-shadow:0 10px 30px -8px rgba(37,211,102,0.55); }
  .btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -6px rgba(37,211,102,0.65); }

  /* ============ LIQUID CHROME BACKDROP ============ */
  .liquid-bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
  .blob{ position:absolute; border-radius:50%; filter:blur(7vw); will-change:transform; }
  .blob-a{ width:48vw; height:48vw; top:-14%; left:-10%; background:var(--chrome-1); opacity:.55; animation:driftA 28s ease-in-out infinite alternate; }
  .blob-b{ width:42vw; height:42vw; top:6%; right:-14%; background:var(--mint); opacity:.4; animation:driftB 34s ease-in-out infinite alternate; }
  .blob-c{ width:40vw; height:40vw; bottom:-16%; left:18%; background:var(--chrome-2); opacity:.45; animation:driftC 26s ease-in-out infinite alternate; }
  .blob-d{ width:26vw; height:26vw; bottom:8%; right:12%; background:var(--mint); opacity:.3; animation:driftB 22s ease-in-out infinite alternate-reverse; }
  @keyframes driftA{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6vw,8vh) scale(1.15); } }
  @keyframes driftB{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-7vw,6vh) scale(.9); } }
  @keyframes driftC{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(5vw,-7vh) scale(1.1); } }
  @media (prefers-reduced-motion: reduce){ .blob{ animation:none !important; } }
  .grain-veil{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background: radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.35), transparent 60%);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .grain-veil{ background:radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.06), transparent 60%); }
  }
  :root[data-theme="dark"] .grain-veil{ background:radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.06), transparent 60%); }

  /* ============ GLASS ============ */
  .glass{
    background:var(--surface);
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    border:1px solid var(--edge);
    box-shadow:var(--shadow);
  }

  /* ============ NAV ============ */
  nav.topnav{
    position:fixed; top:var(--sp-3); left:50%; transform:translateX(-50%);
    z-index:50; width:min(1100px, calc(100% - 2rem));
    border-radius:var(--radius-pill);
    display:flex; align-items:center; justify-content:space-between;
    padding:.6rem .7rem .6rem 1.4rem;
  }
  .brand{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; }
  .brand .dot{ color:var(--mint-deep); }
  .nav-links{ display:flex; gap:var(--sp-4); list-style:none; margin:0; padding:0; }
  .nav-links a{ text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink-soft); transition:color .2s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{ display:flex; align-items:center; gap:var(--sp-2); }
  .nav-toggle{ display:none; background:transparent; border:none; padding:.5rem; }
  .nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; }
  @media (max-width:860px){
    .nav-links{ display:none; }
    .nav-toggle{ display:inline-flex; flex-direction:column; }
  }
  .mobile-panel{
    position:fixed; top:calc(var(--sp-3) + 62px); left:50%; transform:translateX(-50%);
    width:min(560px, calc(100% - 2rem)); z-index:49;
    border-radius:22px; padding:var(--sp-3);
    display:none; flex-direction:column; gap:var(--sp-2);
  }
  .mobile-panel.open{ display:flex; }
  .mobile-panel a{ text-decoration:none; font-weight:600; padding:.5rem .3rem; color:var(--ink-soft); }

  /* ============ SECTION SCAFFOLD ============ */
  section{ position:relative; padding:var(--sp-16) 0; }
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.from-left{ transform:translate(-32px,10px); }
  .reveal.from-right{ transform:translate(32px,10px); }
  /* 640px alatt a .wrap oldalpaddingja már csak 24px, így a ±32px-es
     vízszintes belépő eltolás kilógna a viewportból (vízszintes görgetés
     a reveal lefutásáig). Mobilon ezért csak függőlegesen mozgatunk.
     FONTOS: ennek a .reveal.is-visible szabály ELŐTT kell állnia,
     különben azonos specificitással felülírná a végállapotot. */
  @media (max-width:640px){
    .reveal.from-left, .reveal.from-right{ transform:translate(0,18px); }
  }
  .reveal.is-visible{ opacity:1; transform:translate(0,0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ transition:opacity .3s ease; transform:none !important; }
  }

  /* ============ HERO ============ */
  .hero{ padding-top:calc(var(--sp-16) + 3rem); padding-bottom:var(--sp-12); }
  .hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--sp-8); align-items:end; }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
  .headline-collage{
    display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .6rem;
    margin-top:var(--sp-3); max-width:15ch;
  }
  .badge{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.5rem, 2.4vw + 1rem, 3.1rem);
    line-height:1.05; padding:.22em .48em; display:inline-flex; align-items:center;
    white-space:nowrap; border-radius:.42em; text-wrap:balance;
  }
  .badge-solid{ background:var(--mint); color:var(--mint-ink); }
  .badge-dark{ background:var(--ink); color:var(--ground); }
  .badge-slant{ background:var(--chrome-3); color:var(--ground); transform:skewX(-7deg); }
  .badge-slant > span{ display:inline-block; transform:skewX(7deg); }
  .badge-thin{
    font-family:var(--font-body); font-weight:700; font-size:clamp(1.05rem, 1.1vw + .8rem, 1.5rem);
    border:2px solid var(--edge-strong); color:var(--ink-soft); border-radius:var(--radius-pill);
    padding:.35em .85em;
  }
  .hero-sub{ max-width:46ch; color:var(--ink-soft); font-size:1.08rem; margin-top:var(--sp-4); }
  .hero-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-5); }

  .hero-card{
    border-radius:var(--radius-card);
    padding:var(--sp-4);
    display:flex; flex-direction:column; gap:var(--sp-3);
  }
  .hero-card .kpi-mono{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); letter-spacing:.06em; }
  .hero-card strong{ font-family:var(--font-display); font-size:1.5rem; display:block; margin-top:.2rem; }

  .pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--sp-6); }
  .pill{
    display:inline-flex; align-items:center; gap:.5em;
    padding:.5em 1em; border-radius:var(--radius-pill);
    font-size:.85rem; font-weight:600; color:var(--ink-soft);
    background:var(--surface); border:1px solid var(--edge);
  }
  .pill svg{ width:16px; height:16px; stroke:var(--mint-deep); }

  /* ============ PLATFORM BAR ============ */
  .platform-bar{ padding:var(--sp-8) 0; }
  .platform-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); }
  @media (max-width:760px){ .platform-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .platform-grid{ grid-template-columns:1fr; } }
  .platform-card{
    background:var(--surface-strong); border:1px solid var(--edge); border-radius:20px;
    padding:var(--sp-3) var(--sp-4); display:flex; align-items:center; gap:1rem;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .platform-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .p-icon{ width:46px; height:46px; flex:none; border-radius:13px; display:flex; align-items:center; justify-content:center; }
  .p-icon svg{ width:24px; height:24px; }
  .p-icon img{ width:26px; height:26px; object-fit:contain; display:block; }
  .platform-card .p-name{ font-weight:700; font-size:1.02rem; }
  .platform-card .p-sub{ display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:.15em; }

  /* ============ WEB SHOWCASE ============ */
  .web-panel{
    position:relative; overflow:hidden;
    background:radial-gradient(130% 120% at 12% -10%, #171C22 0%, #0A0C0F 62%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:36px; padding:clamp(1.5rem, 3vw, 3.5rem);
    box-shadow:0 40px 90px -45px rgba(0,0,0,0.65);
  }
  .web-panel::after{
    content:""; position:absolute; top:-25%; right:-8%; width:55%; height:70%;
    background:radial-gradient(circle, rgba(15,215,154,0.30), transparent 68%);
    pointer-events:none;
  }
  .web-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.82fr 1.18fr; gap:var(--sp-6); align-items:center; }
  @media (max-width:900px){ .web-grid{ grid-template-columns:1fr; gap:var(--sp-10); } }
  .web-copy .eyebrow{ color:var(--mint); }
  .web-copy .eyebrow::before{ background:var(--mint); }
  .web-copy h2{ color:#F3F6F8; font-size:clamp(2rem,2.2vw + 1.4rem,3.1rem); font-weight:600; margin-top:.7rem; }
  .web-copy p{ color:#AAB2BC; margin-top:var(--sp-3); max-width:42ch; font-size:1.02rem; }
  .web-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-4); }
  .web-chip{ display:inline-flex; align-items:center; gap:.45em; padding:.5em .95em; border-radius:var(--radius-pill); font-size:.82rem; font-weight:700; color:#E9EDF1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); }
  .web-chip svg{ width:15px; height:15px; stroke:var(--mint); flex:none; }

  .web-stage{ position:relative; }
  .browser-frame{
    position:relative; z-index:1; border-radius:15px; overflow:hidden;
    box-shadow:0 34px 70px -28px rgba(0,0,0,0.75); border:1px solid rgba(255,255,255,0.10);
    animation:floaty 7s ease-in-out infinite alternate;
  }
  .browser-bar{ display:flex; align-items:center; gap:.55rem; padding:.6rem .8rem; background:#E9ECEF; }
  .browser-bar .tl{ width:9px; height:9px; border-radius:50%; flex:none; }
  .browser-url{ flex:1; margin-left:.4rem; background:#fff; border-radius:999px; padding:.28rem .8rem; font-family:var(--font-mono); font-size:.66rem; color:#8b939d; }
  .browser-body{ background:#FBFCFD; padding:.9rem; }
  .ms-nav{ display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; }
  .ms-logo{ width:16px; height:16px; border-radius:5px; background:var(--mint); flex:none; }
  .ms-links{ display:flex; gap:.35rem; flex:1; }
  .ms-links i{ width:20px; height:5px; border-radius:3px; background:#dde2e7; display:block; }
  .ms-btn{ width:34px; height:14px; border-radius:7px; background:#20262d; flex:none; }
  .ms-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:.7rem; margin-bottom:.8rem; }
  .ms-hcol{ display:flex; flex-direction:column; gap:.4rem; justify-content:center; }
  .ms-bar{ height:8px; border-radius:4px; background:#c9d0d7; display:block; }
  .ms-bar.big{ height:11px; background:#20262d; }
  .w90{ width:90%; } .w70{ width:70%; } .w50{ width:50%; } .w80{ width:80%; } .w60{ width:60%; }
  .ms-cta{ width:46px; height:15px; border-radius:8px; background:var(--mint); margin-top:.2rem; }
  .ms-img{ border-radius:9px; background:linear-gradient(150deg,#9AA1AC,#454B54); min-height:70px; }
  .ms-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .ms-cards span{ height:34px; border-radius:8px; }
  .ms-cards span:nth-child(1){ background:linear-gradient(155deg,#0FD79A,#0A6B54); }
  .ms-cards span:nth-child(2){ background:#eef1f4; border:1px solid #e2e6ea; }
  .ms-cards span:nth-child(3){ background:linear-gradient(155deg,#C7CDD6,#5B6270); }

  .phone-frame{
    position:absolute; right:-6px; bottom:-22px; z-index:2; width:104px; height:196px;
    background:#0E1216; border-radius:20px; padding:7px; border:1px solid rgba(255,255,255,0.14);
    box-shadow:0 26px 50px -18px rgba(0,0,0,0.8); animation:floaty 6s ease-in-out .5s infinite alternate;
  }
  .phone-notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:34px; height:5px; border-radius:3px; background:#2a2f36; z-index:1; }
  .phone-screen{ height:100%; border-radius:14px; background:#FBFCFD; padding:.7rem .55rem; display:flex; flex-direction:column; gap:.4rem; }
  .phone-screen .ph-head{ height:26px; border-radius:7px; background:linear-gradient(150deg,#0FD79A,#0A6B54); margin-bottom:.15rem; }
  .ph-card{ height:40px; border-radius:8px; background:#eef1f4; border:1px solid #e2e6ea; }

  .score-ring{
    position:absolute; left:-20px; top:-20px; z-index:3; width:84px; height:84px; border-radius:50%;
    background:conic-gradient(var(--mint) 0% 96%, rgba(255,255,255,0.14) 96% 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 18px 40px -14px rgba(0,0,0,0.7); animation:floaty 8s ease-in-out .2s infinite alternate;
  }
  .score-ring .score-inner{ width:66px; height:66px; border-radius:50%; background:#0C0F13; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .score-ring strong{ font-family:var(--font-display); font-size:1.25rem; color:#fff; line-height:1; }
  .score-ring span{ font-family:var(--font-mono); font-size:.5rem; letter-spacing:.04em; color:var(--mint); text-transform:uppercase; }

  @keyframes floaty{ from{ transform:translateY(0); } to{ transform:translateY(-11px); } }
  @media (prefers-reduced-motion: reduce){ .browser-frame,.phone-frame,.score-ring{ animation:none !important; } }
  @media (max-width:520px){ .phone-frame{ display:none; } .score-ring{ left:auto; right:-6px; top:-14px; } }

  /* ============ FEATURE GRID ============ */
  .feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-6); }
  @media (max-width:820px){ .feature-grid{ grid-template-columns:1fr; } }
  .feature-tile{
    border-radius:28px; padding:var(--sp-4); min-height:400px;
    display:flex; flex-direction:column; gap:var(--sp-3);
  }
  .feature-tile.tone-mint{ background:var(--mint); color:var(--mint-ink); }
  .feature-tile.tone-ink{ background:var(--ink); color:var(--ground); }
  .feature-tile.tone-chrome{ background:var(--chrome-3); color:var(--ground); }
  .feature-tile.tone-pale{ background:var(--surface-strong); color:var(--ink); border:1px solid var(--edge); }
  .feature-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.22); }
  .feature-tile.tone-pale .feature-icon{ background:var(--surface); }
  .feature-icon svg{ width:22px; height:22px; stroke:currentColor; }
  .feature-tile h3{ font-size:1.5rem; font-weight:600; font-family:var(--font-body); }
  .feature-tile p{ font-size:.95rem; opacity:.85; max-width:34ch; }
  .feature-mock{
    margin-top:auto; background:var(--ground); border-radius:16px; padding:var(--sp-3);
    color:var(--ink); box-shadow:0 10px 30px -14px rgba(0,0,0,.35);
  }

  /* mini pipeline mockup */
  .mock-pipeline{ display:flex; flex-direction:column; gap:.55rem; }
  .mock-node{ display:flex; align-items:center; gap:.6rem; background:var(--surface-strong); border:1px solid var(--edge); border-radius:11px; padding:.5rem .7rem; font-size:.82rem; font-weight:700; }
  .mock-node .dot{ width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; }
  .mock-node .dot svg{ width:14px; height:14px; stroke:#fff; }
  .mock-arrow{ align-self:center; color:var(--ink-faint); font-size:.8rem; }

  /* mini checklist mockup */
  .mock-checklist{ display:flex; flex-direction:column; gap:.5rem; }
  .mock-check-row{ display:flex; align-items:center; gap:.6rem; }
  .mock-swatch{ width:30px; height:30px; border-radius:8px; flex:none; }
  .mock-check-row span{ font-size:.85rem; font-weight:700; flex:1; }
  .mock-check-row .box{ width:18px; height:18px; border-radius:5px; background:var(--mint); display:flex; align-items:center; justify-content:center; flex:none; }
  .mock-check-row .box svg{ width:11px; height:11px; stroke:var(--mint-ink); }

  /* mini rule-builder mockup */
  .mock-rule{ display:flex; gap:.6rem; }
  .mock-and{ width:20px; border-radius:8px; background:var(--mint); flex:none; display:flex; align-items:center; justify-content:center; }
  .mock-and span{ writing-mode:vertical-rl; font-family:var(--font-mono); font-size:.62rem; font-weight:700; color:var(--mint-ink); letter-spacing:.06em; }
  .mock-conditions{ flex:1; display:flex; flex-direction:column; gap:.4rem; }
  .mock-condition{ background:var(--surface-strong); border:1px solid var(--edge); border-radius:9px; padding:.45rem .6rem; display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; }
  .mock-condition .grip{ display:flex; gap:2px; flex-wrap:wrap; width:8px; }
  .mock-condition .grip i{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); display:block; }

  /* mini bar chart mockup */
  .mock-chart{ display:flex; align-items:flex-end; gap:.4rem; height:110px; }
  .mock-bar{ flex:1; background:linear-gradient(180deg, var(--mint), var(--mint-deep)); border-radius:6px 6px 2px 2px; }

  /* ============ PROCESS (STICKY) ============ */
  .process-shell{ position:relative; }
  .process-head{ margin-bottom:var(--sp-8); }
  .process-scroller{ position:relative; height:calc(100vh * 5); }
  .process-stage{
    position:sticky; top:0; height:100vh;
    display:flex; align-items:center;
  }
  .process-inner{ width:100%; display:grid; grid-template-columns:.5fr 1.5fr; gap:var(--sp-8); align-items:center; }
  @media (max-width:860px){
    .process-inner{ grid-template-columns:1fr; gap:var(--sp-4); }
    .process-scroller{ height:auto; }
    .process-stage{ position:static; height:auto; padding:var(--sp-6) 0; }
    .step-card{ display:flex !important; margin-bottom:var(--sp-3); }
  }

  .rail{ display:flex; flex-direction:column; gap:var(--sp-2); }
  .rail-item{ display:flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:.85rem; color:var(--ink-faint); opacity:.5; transition:opacity .3s, color .3s; }
  .rail-item.active{ opacity:1; color:var(--mint-deep); }
  .rail-num{ width:2.4em; }
  .rail-item svg{ width:16px; height:16px; stroke:currentColor; flex:none; }
  .step-icon{ width:48px; height:48px; border-radius:13px; background:var(--mint); display:flex; align-items:center; justify-content:center; margin-bottom:.3rem; }
  .step-icon svg{ width:24px; height:24px; stroke:var(--mint-ink); }
  .step-card-head{ display:flex; align-items:center; gap:var(--sp-2); }
  .rail-track{ position:relative; width:2px; background:var(--edge); height:160px; margin-left:1.15em; margin-top:.4rem; }
  .rail-fill{ position:absolute; top:0; left:0; width:100%; background:var(--mint); height:0%; transition:height .25s ease; }

  .step-card{ border-radius:var(--radius-card); padding:var(--sp-6); min-height:260px; display:none; flex-direction:column; gap:var(--sp-2); }
  .step-card.active{ display:flex; }
  .step-num{ font-family:var(--font-mono); font-size:.85rem; color:var(--mint-deep); letter-spacing:.1em; }
  .step-card h3{ font-size:1.9rem; font-weight:600; }
  .step-card p{ color:var(--ink-soft); max-width:52ch; font-size:1.02rem; }

  /* ============ CRM SHOWCASE ============ */
  .crm-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:var(--sp-8); align-items:center; }
  @media (max-width:900px){ .crm-grid{ grid-template-columns:1fr; } }
  .crm-copy h2{ font-size:clamp(2rem, 2vw + 1.4rem, 2.9rem); font-weight:600; margin-top:var(--sp-2); }
  .crm-copy p.lead{ color:var(--ink-soft); margin-top:var(--sp-3); max-width:50ch; font-size:1.05rem; }
  .feature-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
  .feature-list li{ display:flex; gap:.7em; align-items:flex-start; font-weight:600; }
  .feature-list svg{ flex:none; width:20px; height:20px; margin-top:.15em; stroke:var(--mint-deep); }

  .dash-card{ border-radius:var(--radius-card); padding:var(--sp-4); position:relative; overflow:hidden; }
  .dash-topbar{ display:flex; gap:.4rem; margin-bottom:var(--sp-3); }
  .dash-topbar span{ width:9px; height:9px; border-radius:50%; background:var(--edge-strong); }
  .dash-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-bottom:var(--sp-2); }
  .dash-tile{ background:var(--surface-strong); border:1px solid var(--edge); border-radius:var(--radius-tile); padding:var(--sp-2); }
  .dash-tile .dash-label{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; }
  .dash-tile .dash-value{ font-family:var(--font-display); font-size:1.3rem; margin-top:.2rem; }
  .dash-chart{ background:var(--surface-strong); border:1px solid var(--edge); border-radius:var(--radius-tile); padding:var(--sp-3); }
  .dash-chart svg{ width:100%; height:auto; display:block; }

  /* ============ PORTFOLIO ============ */
  .work-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); margin-top:var(--sp-6); }
  @media (max-width:860px){ .work-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .work-grid{ grid-template-columns:1fr; } }
  .work-tile{
    aspect-ratio:4/5; border-radius:18px; position:relative; overflow:hidden;
    display:flex; align-items:flex-end; padding:var(--sp-3);
    border:1px solid var(--edge);
    transition:transform .35s ease;
  }
  .work-tile:hover{ transform:translateY(-6px); }
  .work-tile .tile-label{ position:relative; z-index:1; font-weight:700; color:#fff; font-size:1.05rem; text-shadow:0 2px 12px rgba(0,0,0,.35); }
  .work-tile .tile-tag{ position:relative; z-index:1; font-family:var(--font-mono); font-size:.68rem; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:.3em; }
  .note-caption{ margin-top:var(--sp-3); font-size:.85rem; color:var(--ink-faint); }

  /* ============ TRUST ============ */
  .trust-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); margin-top:var(--sp-6); }
  @media (max-width:860px){ .trust-grid{ grid-template-columns:1fr; } }
  .trust-card{ border-radius:20px; padding:var(--sp-4); }
  .trust-card svg{ width:26px; height:26px; stroke:var(--mint-deep); }
  .trust-card h3{ font-size:1.05rem; font-weight:700; margin-top:var(--sp-2); font-family:var(--font-body); }
  .trust-card p{ color:var(--ink-soft); font-size:.92rem; margin-top:.4rem; }

  /* ============ NEWSLETTER ============ */
  .news-card{ border-radius:var(--radius-card); padding:var(--sp-8); text-align:left; display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-6); align-items:center; }
  @media (max-width:860px){ .news-card{ grid-template-columns:1fr; } }
  .news-card h2{ font-size:clamp(1.7rem, 1.6vw + 1.2rem, 2.4rem); font-weight:600; }
  .news-form{ display:flex; gap:.6rem; flex-wrap:wrap; }
  .news-form input{
    flex:1 1 220px; padding:.95em 1.2em; border-radius:var(--radius-pill);
    border:1px solid var(--edge-strong); background:var(--surface-strong); color:var(--ink);
    font-family:var(--font-body); font-size:.95rem;
  }
  .news-form input::placeholder{ color:var(--ink-faint); }
  .news-status{ font-family:var(--font-mono); font-size:.8rem; color:var(--mint-deep); margin-top:.7rem; min-height:1.2em; }

  /* ============ FINAL CTA ============ */
  .final-cta{ text-align:center; padding-top:var(--sp-16); }
  .final-cta h2{ font-size:clamp(2.2rem, 3vw + 1.4rem, 3.6rem); font-weight:700; max-width:18ch; margin:0 auto; }
  .final-cta p{ color:var(--ink-soft); margin:var(--sp-3) auto 0; max-width:48ch; }
  .final-cta .btn-primary{ margin-top:var(--sp-5); font-size:1.05rem; padding:1em 2em; }

  .contact-panel{
    display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-8);
    align-items:stretch; text-align:left; margin-top:var(--sp-8);
  }
  @media (max-width:860px){ .contact-panel{ grid-template-columns:1fr; } }
  .contact-quick{ display:flex; flex-direction:column; gap:.9rem; }
  .contact-quick .btn{ justify-content:center; }
  .contact-quick-note{ font-size:.85rem; color:var(--ink-faint); margin-top:.2rem; }
  .contact-form{ display:flex; flex-direction:column; gap:.8rem; }
  .contact-form input, .contact-form textarea{
    width:100%; padding:.95em 1.2em; border-radius:var(--radius-tile);
    border:1px solid var(--edge-strong); background:var(--surface-strong); color:var(--ink);
    font-family:var(--font-body); font-size:.95rem; resize:vertical;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--ink-faint); }
  .contact-form textarea{ min-height:110px; }
  .contact-form .form-status{ font-family:var(--font-mono); font-size:.8rem; color:var(--mint-deep); min-height:1.2em; }
  /* Hibás beküldés: nem elég a szöveg színe — a mint és a piros közti
     különbség egy futó pillantásnál elsikkad, ezért kap saját sávot is. */
  .contact-form .form-status.is-error{
    color:#B3261E; background:#FDECEA; border-left:3px solid #B3261E;
    padding:.55rem .7rem; border-radius:6px; line-height:1.45;
  }
  .contact-form .hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
  .contact-consent{ font-size:.74rem; color:var(--ink-faint); line-height:1.45; margin-top:.1rem; }

  /* ============ FOOTER ============ */
  footer{ padding:var(--sp-10) 0 var(--sp-16); border-top:1px solid var(--edge); margin-top:var(--sp-12); }
  .foot-grid{ display:grid; grid-template-columns:1.4fr .8fr .8fr .8fr; gap:var(--sp-6); }
  .foot-grid > *{ min-width:0; }
  @media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  .foot-grid h3{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:var(--sp-2); }
  .foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
  /* Az info@soulsilvermarketing.com egyetlen tördelhetetlen szó: 375px-en a
     min-content szélessége ~205px, ami a 1fr 1fr rácsot a konténeren túlra
     feszíti (~20px vízszintes túlcsordulás minden oldalon). */
  .foot-grid a{ text-decoration:none; color:var(--ink-soft); font-size:.92rem; overflow-wrap:anywhere; }
  .foot-grid a:hover{ color:var(--mint-deep); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-8); flex-wrap:wrap; gap:var(--sp-2); color:var(--ink-faint); font-size:.82rem; }
  .foot-social{ display:flex; gap:.8rem; }
  .foot-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--edge); display:flex; align-items:center; justify-content:center; background:#fff; transition:transform .2s ease; }
  .foot-social a:hover{ transform:translateY(-2px); }
  .foot-social svg{ width:15px; height:15px; stroke:var(--ink-soft); }
  .foot-social img{ width:17px; height:17px; object-fit:contain; display:block; }

  /* ============ COOKIE BANNER ============ */
  .cookie-bar{
    position:fixed; left:50%; bottom:var(--sp-3); transform:translate(-50%, 140%);
    width:min(680px, calc(100% - 2rem)); z-index:60;
    border-radius:20px; padding:var(--sp-3) var(--sp-4);
    display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
    transition:transform .5s ease;
  }
  .cookie-bar.show{ transform:translate(-50%, 0); }
  .cookie-bar p{ flex:1 1 260px; font-size:.85rem; color:var(--ink-soft); }
  .cookie-actions{ display:flex; gap:.5rem; }
  .cookie-actions button{ padding:.6em 1.1em; font-size:.82rem; }
  .cookie-bar p a{ color:var(--mint-deep); text-decoration:underline; }

  /* ============ FOOTER JOGI LINKEK ============ */
  .foot-legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; }
  .foot-legal a{ color:var(--ink-faint); text-decoration:none; font-size:.82rem; transition:color .2s ease; }
  .foot-legal a:hover{ color:var(--mint-deep); }
  @media (max-width:640px){ .foot-legal{ order:3; width:100%; } }

  /* ============ LEBEGŐ WHATSAPP GOMB ============ */
  .wa-float{
    position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:clamp(1rem,3vw,1.6rem); z-index:70;
    width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center; text-decoration:none;
    box-shadow:0 10px 26px rgba(37,211,102,.42), 0 4px 12px rgba(0,0,0,.18);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wa-float svg, .wa-float img{ width:30px; height:30px; position:relative; z-index:1; }
  .wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 16px 34px rgba(37,211,102,.5); }
  .wa-float .wa-float-pulse{ position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.5; z-index:0; animation:waPulse 2.6s ease-out infinite; }
  @keyframes waPulse{ 0%{ transform:scale(1); opacity:.5; } 70%{ transform:scale(1.9); opacity:0; } 100%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .wa-float .wa-float-pulse{ display:none; } }
  /* amíg a cookie sáv látszik, mobilon rejtsük el a gombot (nem takarja a sávot);
     a cookie-döntés után azonnal visszatér */
  @media (max-width:720px){
    body.has-cookiebar .wa-float{ opacity:0; visibility:hidden; pointer-events:none; }
  }

  /* ============ JOGI OLDALAK (adatvédelem, ÁSZF, cookie, impresszum) ============ */
  .legal-main{ padding-top:calc(var(--sp-16) + 1rem); padding-bottom:var(--sp-10); }
  .legal-wrap{ max-width:820px; }
  .legal-head{ margin-bottom:var(--sp-6); }
  .legal-head h1{ font-size:clamp(2rem, 2.4vw + 1.2rem, 3rem); font-weight:700; line-height:1.05; margin-top:var(--sp-3); }
  .legal-head .legal-updated{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); margin-top:var(--sp-2); }
  .legal-note{ background:var(--surface-2, #f4f6f8); border:1px solid var(--edge); border-left:3px solid var(--mint-deep); border-radius:12px; padding:var(--sp-3) var(--sp-4); margin:var(--sp-4) 0 var(--sp-6); font-size:.9rem; color:var(--ink-soft); }
  .legal-content h2{ font-size:1.3rem; font-weight:600; margin-top:var(--sp-6); margin-bottom:var(--sp-2); }
  .legal-content h3{ font-size:1.02rem; font-weight:600; margin-top:var(--sp-4); margin-bottom:var(--sp-1); }
  .legal-content p{ color:var(--ink-soft); line-height:1.7; margin-bottom:var(--sp-2); }
  .legal-content ul{ margin:0 0 var(--sp-2) 1.1rem; color:var(--ink-soft); line-height:1.7; }
  .legal-content li{ margin-bottom:.35rem; }
  .legal-content a{ color:var(--mint-deep); }
  .legal-content strong{ color:var(--ink); }
  /* A jogi tablazatok harom szoveges kolumnaval nem szorithatok 375px ala:
     375px-en az adatvedelmi tabla 666px-re nyult, ami 330px vizszintes
     tulcsordulast okozott az egesz lapon. Ezert a tabla sajat, vizszintesen
     gorgetheto keretet kap, es a min-width tartja olvashato szelessegen. */
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--sp-3) 0 var(--sp-4);
    border-radius:var(--radius-tile); }
  .table-scroll .legal-table{ margin:0; min-width:520px; }
  .legal-table{ width:100%; border-collapse:collapse; margin:var(--sp-3) 0 var(--sp-4); font-size:.9rem; }
  .legal-table th, .legal-table td{ text-align:left; padding:.6rem .7rem; border:1px solid var(--edge); vertical-align:top; color:var(--ink-soft); }
  .legal-table th{ background:var(--surface-2, #f4f6f8); font-weight:600; color:var(--ink); }
  .legal-content .ph{ background:#FFF3C4; color:#7a5b00; padding:0 .3em; border-radius:4px; font-weight:600; }

  /* ============================================================
     SUBPAGE / SERVICE DETAIL PAGES
     ============================================================ */
  .page-main{ padding-top:calc(var(--sp-16) + 1rem); }

  /* breadcrumb / back */
  /* flex-wrap nélkül a hosszabb morzsamenük (pl. "… / PPC hirdetéskezelés")
     375px-en pár pixellel kilógnak a viewportból. */
  .subnav{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .6rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; }
  .subnav a{ text-decoration:none; color:var(--ink-faint); transition:color .2s; }
  .subnav a:hover{ color:var(--mint-deep); }
  .subnav .sep{ opacity:.5; }

  /* service hero */
  .svc-hero{ padding:var(--sp-6) 0 var(--sp-10); }
  .svc-hero-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:var(--sp-8); align-items:center; }
  @media (max-width:900px){ .svc-hero-grid{ grid-template-columns:1fr; gap:var(--sp-6); } }
  .svc-hero h1{ font-size:clamp(2.4rem, 3vw + 1.4rem, 4rem); line-height:1.03; font-weight:700; margin-top:var(--sp-3); }
  .svc-hero h1 em{ font-style:normal; color:var(--mint-deep); }
  .svc-hero .lead{ max-width:48ch; color:var(--ink-soft); font-size:1.1rem; margin-top:var(--sp-3); }
  .svc-hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); }
  .svc-visual{ border-radius:var(--radius-card); min-height:280px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
  .svc-visual .svc-emblem{ width:96px; height:96px; border-radius:26px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; }
  .svc-visual .svc-emblem svg{ width:48px; height:48px; stroke:#fff; fill:none; stroke-width:1.8; }
  .svc-stat-row{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); flex-wrap:wrap; }
  .svc-stat{ background:var(--surface); border:1px solid var(--edge); border-radius:16px; padding:.8rem 1.1rem; }
  .svc-stat b{ font-family:var(--font-display); font-size:1.4rem; display:block; }
  .svc-stat span{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }

  /* generic section head */
  .sec-head{ max-width:52ch; }
  .sec-head h2{ font-size:clamp(1.9rem,2vw + 1.2rem,2.8rem); font-weight:600; margin-top:.6rem; }
  .sec-head p{ color:var(--ink-soft); margin-top:var(--sp-2); }

  /* what is included grid */
  .incl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); }
  @media (max-width:860px){ .incl-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .incl-grid{ grid-template-columns:1fr; } }
  .incl-card{ border-radius:20px; padding:var(--sp-4); background:var(--surface); border:1px solid var(--edge); }
  .incl-card .incl-ico{ width:44px; height:44px; border-radius:12px; background:var(--mint); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2); }
  .incl-card .incl-ico svg{ width:22px; height:22px; stroke:var(--mint-ink); fill:none; stroke-width:2; }
  .incl-card h3{ font-family:var(--font-body); font-weight:700; font-size:1.05rem; }
  .incl-card p{ color:var(--ink-soft); font-size:.92rem; margin-top:.4rem; }

  /* horizontal process steps */
  .steprow{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-2); margin-top:var(--sp-6); }
  @media (max-width:860px){ .steprow{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .steprow{ grid-template-columns:1fr; } }
  .stepbox{ background:var(--surface); border:1px solid var(--edge); border-radius:16px; padding:var(--sp-3); position:relative; }
  .stepbox .stepnum{ font-family:var(--font-mono); font-size:.7rem; color:var(--mint-deep); letter-spacing:.1em; }
  .stepbox h3{ font-family:var(--font-body); font-weight:700; font-size:1rem; margin:.3rem 0 0; }
  .stepbox p{ color:var(--ink-soft); font-size:.85rem; margin-top:.3rem; }

  /* references */
  .ref-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); }
  @media (max-width:860px){ .ref-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .ref-grid{ grid-template-columns:1fr; } }
  .ref-card{ border-radius:20px; overflow:hidden; border:1px solid var(--edge); background:var(--surface); }
  .ref-thumb{ aspect-ratio:16/10; display:flex; align-items:flex-end; padding:var(--sp-3); }
  .ref-thumb .ref-tag{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:rgba(0,0,0,.28); padding:.3em .7em; border-radius:999px; }
  .ref-body{ padding:var(--sp-3); }
  .ref-body h3{ font-family:var(--font-body); font-weight:700; font-size:1.02rem; }
  .ref-body p{ color:var(--ink-soft); font-size:.88rem; margin-top:.35rem; }
  .ref-metric{ display:flex; gap:var(--sp-3); margin-top:var(--sp-2); }
  .ref-metric b{ font-family:var(--font-display); font-size:1.15rem; color:var(--mint-deep); display:block; }
  .ref-metric span{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }

  /* pricing */
  .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); align-items:stretch; }
  /* A "250 000 Ft/hó-tól" a nem törő szóközök miatt egyetlen,
     ~272px széles tördelhetetlen blokk. Három oszlop csak akkor fér el,
     ha a .wrap már a teljes 1180px-es szélességén van; alatta a rács
     a saját konténerén (861-1000px között a viewporton) is túlcsordult. */
  @media (max-width:1180px){ .price-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:860px){ .price-grid{ grid-template-columns:1fr; max-width:460px; } }
  .price-card{ border-radius:24px; padding:var(--sp-5); background:var(--surface); border:1px solid var(--edge); display:flex; flex-direction:column; }
  .price-card.featured{ background:var(--ink); color:var(--ground); border-color:transparent; box-shadow:var(--shadow); position:relative; }
  .price-card.featured .price-sub, .price-card.featured .price-feat li{ color:rgba(255,255,255,0.82); }
  .price-badge{ position:absolute; top:var(--sp-3); right:var(--sp-3); background:var(--mint); color:var(--mint-ink); font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; padding:.35em .7em; border-radius:999px; font-weight:700; }
  .price-name{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mint-deep); }
  .price-card.featured .price-name{ color:var(--mint); }
  .price-amount{ font-family:var(--font-display); font-size:clamp(1.35rem, 6vw, 2.1rem); font-weight:700; margin:var(--sp-2) 0 .2rem; line-height:1; }
  /* Sajat sorba: a "180 000 Ft" + "/ho-tol" egyutt nem fer ki egy ~350px-es
     kartyan, es a "tol" magaban tordelt le. Igy soha nem torik szo kozepen. */
  .price-amount small{ display:block; margin-top:.15em; font-family:var(--font-body);
    font-size:.86rem; font-weight:600; color:var(--ink-faint); white-space:nowrap; }
  .price-card.featured .price-amount small{ color:rgba(255,255,255,0.6); }
  .price-sub{ color:var(--ink-soft); font-size:.9rem; }
  .price-feat{ list-style:none; padding:0; margin:var(--sp-4) 0; display:flex; flex-direction:column; gap:.7rem; flex:1; }
  .price-feat li{ display:flex; gap:.6em; align-items:flex-start; font-size:.92rem; color:var(--ink-soft); }
  .price-feat li svg{ width:18px; height:18px; flex:none; margin-top:.15em; stroke:var(--mint-deep); fill:none; stroke-width:2.4; }
  .price-card.featured .price-feat li svg{ stroke:var(--mint); }
  .price-note{ margin-top:var(--sp-3); font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); }

  /* faq */
  .faq-list{ margin-top:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-2); }
  .faq-item{ border:1px solid var(--edge); border-radius:16px; background:var(--surface); padding:var(--sp-3) var(--sp-4); }
  .faq-item h3{ font-family:var(--font-body); font-weight:700; font-size:1rem; }
  .faq-item p{ color:var(--ink-soft); font-size:.92rem; margin-top:.4rem; }

  /* page CTA band */
  .page-cta{ text-align:center; }
  .page-cta .cta-panel{ border-radius:var(--radius-card); padding:var(--sp-8) var(--sp-4); background:radial-gradient(120% 130% at 15% 0%, #171C22, #0A0C0F); color:#F3F6F8; position:relative; overflow:hidden; }
  .page-cta .cta-panel::after{ content:""; position:absolute; top:-30%; right:-8%; width:55%; height:80%; background:radial-gradient(circle, rgba(15,215,154,0.28), transparent 68%); pointer-events:none; }
  .page-cta h2{ font-size:clamp(1.9rem,2vw + 1.3rem,2.8rem); font-weight:700; position:relative; z-index:1; }
  .page-cta p{ color:#AAB2BC; max-width:46ch; margin:var(--sp-3) auto 0; position:relative; z-index:1; }
  .page-cta .svc-hero-actions{ justify-content:center; position:relative; z-index:1; }

  /* ============================================================
     PARALLAX CINEMATIC HERO (service pages)
     ============================================================ */
  /* A .phero a <main> közvetlen gyereke, tehát már teljes szélességű:
     a 100vw + left:50% + margin-left:-50vw trükk fölösleges, viszont a
     100vw a görgetősávot is beleszámolja → desktopon ~fél görgetősávnyi
     (8px) vízszintes túlcsordulás. Lásd még a .logo-marquee-nél írtakat. */
  .phero{
    position:relative; width:100%;
    min-height:min(80vh, 760px); display:flex; align-items:flex-end;
    color:#fff; overflow:hidden; isolation:isolate;
  }
  .phero-bg{
    position:absolute; inset:0; z-index:-1;
    background-size:cover; background-position:center;
    background-attachment:fixed;
    background-color:#0A0C0F;
  }
  /* Építőipari landing hero. Azért itt van és nem az oldal inline
     stílusában, mert médialekérdezés kell hozzá: asztalin fekvő, mobilon
     álló kép megy. Asztali nézetben a doboz közel négyzetes, ott a `left`
     a jó: balra a munkás, jobbra a tábla. */
  .phero-bg--epitoipar{
    background-image:
      url(img/hero-epitoipari.jpg),
      radial-gradient(120% 100% at 10% 6%, #5A4212 0%, transparent 58%),
      radial-gradient(100% 90% at 92% 100%, #C8912B 0%, transparent 54%),
      linear-gradient(160deg,#0A0B0D 0%,#191A1C 100%);
    background-position:left center;
  }
  /* Erősebb scrim CSAK ezen az oldalon. Az alapértelmezett jobbra alig
     sötétít (0,30), ami sima fotónál jó — itt viszont a kép jobb felén egy
     piros-fehér tábla ül a saját, nagy feliratával, és a fehér H1 pont
     ráesett. A vízszintes gradiens ezért végig telítettebb. */
  .phero-scrim--epitoipar{
    background:
      linear-gradient(90deg, rgba(8,10,12,0.95) 0%, rgba(8,10,12,0.88) 30%, rgba(8,10,12,0.68) 60%, rgba(8,10,12,0.52) 100%),
      linear-gradient(0deg, rgba(8,10,12,0.90) 0%, rgba(8,10,12,0.20) 45%, rgba(8,10,12,0.40) 100%);
  }
  .phero-scrim{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(8,10,12,0.94) 0%, rgba(8,10,12,0.80) 26%, rgba(8,10,12,0.30) 58%, rgba(8,10,12,0.30) 100%),
      linear-gradient(0deg, rgba(8,10,12,0.90) 0%, rgba(8,10,12,0.15) 45%, rgba(8,10,12,0.35) 100%);
  }
  .phero .wrap{ position:relative; z-index:1; width:100%; padding-top:calc(var(--sp-16) + 3rem); padding-bottom:var(--sp-8); }
  .phero .subnav{ color:rgba(255,255,255,0.62); }
  .phero .subnav a{ color:rgba(255,255,255,0.62); }
  .phero .subnav a:hover{ color:var(--mint); }
  .phero-kicker{
    display:inline-flex; align-items:center; gap:.7em;
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--mint); margin-top:var(--sp-4);
  }
  .phero-kicker::before{ content:""; width:2.2em; height:1px; background:var(--mint); display:inline-block; }
  .phero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2.6rem, 4vw + 1.4rem, 5rem); line-height:1.0; letter-spacing:-0.02em;
    margin-top:var(--sp-3); max-width:16ch; text-wrap:balance;
    text-shadow:0 4px 40px rgba(0,0,0,0.5);
  }
  .phero h1 em{ font-style:normal; color:var(--mint); }
  .phero .lead{ max-width:46ch; color:rgba(255,255,255,0.86); font-size:1.12rem; margin-top:var(--sp-4); text-shadow:0 2px 18px rgba(0,0,0,0.5); }
  .phero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); }
  .phero-actions .btn-ghost{ color:#fff; border-color:rgba(255,255,255,0.35); }
  .phero-actions .btn-ghost:hover{ border-color:var(--mint); color:var(--mint); }
  .phero-stats{ display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); margin-top:var(--sp-6); }
  .phero-stat b{ font-family:var(--font-display); font-size:1.5rem; display:block; }
  .phero-stat span{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,0.6); }
  .phero-cue{ position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); z-index:1; width:22px; height:34px; border:2px solid rgba(255,255,255,0.5); border-radius:12px; }
  .phero-cue::after{ content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%); width:3px; height:7px; border-radius:2px; background:var(--mint); animation:pheroCue 1.6s ease-in-out infinite; }
  @keyframes pheroCue{ 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0; transform:translate(-50%,10px);} }
  @media (prefers-reduced-motion: reduce){ .phero-cue::after{ animation:none; } }
  @media (max-width:900px){
    .phero-bg{ background-attachment:scroll; }
    .phero{ min-height:auto; }
    /* Mobilon SAJÁT, ÁLLÓ kép megy, és NEM `cover`-rel.

       A fekvő fotóval ez megoldhatatlan volt: a hero doboz itt ~375×1304
       (0.29 arány), a fotó 1.5 — a `cover` a kép szélességének csak 19%-át
       mutatta, és abba sem a munkás, sem a tábla nem fért bele. Pedig a
       kattintások 84%-a mobilról jön.

       `background-size:100% auto`: a kép teljes szélességben, természetes
       magassággal ül a hero TETEJÉN — így egyáltalán nincs vágás, a
       kompozíció pont az, amit a generátor adott. Alatta a
       background-color viszi tovább a sötétet; a kép alja pontosan
       #0A0C0F-re van kikeverve, ezért nincs látható átmenet.
       A `no-repeat` kötelező: enélkül a kép függőlegesen csempézne. */
    .phero-bg--epitoipar{
      background-image:url(img/hero-epitoipari-mobil.jpg);
      background-size:100% auto;
      background-position:center top;
      background-repeat:no-repeat;
    }
    /* A vízszintes scrim itt fölösleges — a kép alsó része eleve sötét.
       Felül viszont szándékosan világos marad, hogy a STOP-tábla és az arc
       kontrasztos legyen; a sötétítés ott kapcsol be, ahol a szöveg kezdődik. */
    .phero-scrim--epitoipar{
      background:linear-gradient(180deg,
        rgba(8,10,12,0.12) 0%,
        rgba(8,10,12,0.18) 10%,
        rgba(8,10,12,0.70) 26%,
        rgba(8,10,12,0.55) 45%,
        rgba(8,10,12,0.45) 100%);
    }
    /* 176px felso terkoz utan mobilon ~350px ures sav volt a nav es a
       morzsamenu kozott. A .topnav alja 106px-nel van, 136px ad ~30px levegot. */
    .phero .wrap{ padding-top:calc(var(--sp-16) + .5rem); padding-bottom:var(--sp-6); }
    /* Az építőipari landingen a szöveg a kép ALÁ kerül, ne a sárga
       mellényre: 375 px-en a munkás 305 px-ig tart, a morzsamenü viszont
       136 px-nél kezdődött, és beleolvadt a mellénybe. Ennek a sornak a
       fenti .phero .wrap UTÁN kell állnia — azonos a specificitás, tehát
       a sorrend dönt. */
    .phero--epitoipar .wrap{ padding-top:200px; }
  }

  /* mid-page full-bleed parallax accent band (optional per page) */
  .pband{ position:relative; width:100%; min-height:340px; display:flex; align-items:center; color:#fff; overflow:hidden; }
  .pband-bg{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; background-attachment:fixed; background-color:#0A0C0F; }
  .pband-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,10,12,0.86), rgba(8,10,12,0.45) 60%, rgba(8,10,12,0.6)); pointer-events:none; }
  .pband .wrap{ position:relative; z-index:1; }
  @media (max-width:900px){ .pband-bg{ background-attachment:scroll; } }

  /* ============ REFERENCIÁK OLDAL ============ */

  /* --- hero + statisztikák --- */
  .ref-hero{ position:relative; padding-top:calc(var(--sp-16) + 1.5rem); padding-bottom:var(--sp-8); overflow:hidden; }
  .ref-hero::before{ content:""; position:absolute; inset:-30% -10% auto -10%; height:70vh; z-index:-1;
    background:radial-gradient(ellipse at 30% 0%, rgba(15,215,154,0.18), transparent 62%),
               radial-gradient(ellipse at 78% 12%, rgba(154,161,172,0.28), transparent 60%); }
  .ref-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); max-width:640px; }
  .ref-stat{ border:1px solid var(--edge); background:var(--surface); border-radius:var(--radius-tile); padding:var(--sp-3); backdrop-filter:blur(12px); }
  .ref-stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.6rem,1.4vw + 1.1rem,2.3rem); font-weight:600; line-height:1; letter-spacing:-.02em; }
  .ref-stat span{ display:block; margin-top:.45em; font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }
  @media (max-width:560px){ .ref-stats{ grid-template-columns:1fr; max-width:none; } }

  /* --- ügyféllogó marquee --- */
  /* A szülő <section> már teljes szélességű, ezért NEM kell 100vw full-bleed trükk:
     a 100vw a görgetősávot is beleszámolja, és vízszintes túlcsordulást okoz. */
  .logo-marquee{ position:relative; width:100%; padding:var(--sp-4) 0; border-block:1px solid var(--edge); overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .logo-track{ display:flex; align-items:center; gap:var(--sp-8); width:max-content; animation:logo-slide 38s linear infinite; }
  .logo-marquee:hover .logo-track{ animation-play-state:paused; }
  @keyframes logo-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .logo-item{ flex:0 0 auto; height:34px; display:flex; align-items:center; opacity:.5; filter:grayscale(1);
    transition:opacity .3s ease, filter .3s ease; }
  .logo-item img{ height:100%; width:auto; display:block; }
  .logo-item:hover{ opacity:1; filter:grayscale(0); }
  .logo-item .logo-text{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink-soft); white-space:nowrap; }

  /* --- kategória chipek --- */
  .chip-row{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:var(--sp-5); }
  .chip{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
    padding:.62em 1.15em; border-radius:var(--radius-pill); border:1px solid var(--edge-strong);
    background:var(--surface); color:var(--ink-soft); cursor:pointer; white-space:nowrap;
    transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
  .chip:hover{ transform:translateY(-2px); border-color:var(--mint-deep); color:var(--ink); }
  .chip.active{ background:var(--mint); border-color:var(--mint); color:var(--mint-ink); font-weight:600; }
  .chip:focus-visible{ outline:2px solid var(--mint-deep); outline-offset:3px; }

  /* --- bento rács --- */
  .bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:225px; gap:var(--sp-2); margin-top:var(--sp-5); }
  .bento-item{ position:relative; grid-column:span 1; grid-row:span 1; border-radius:var(--radius-tile); overflow:hidden;
    border:1px solid var(--edge); background:var(--chrome-3); cursor:pointer; padding:0; text-align:left; color:#fff;
    transition:transform .4s ease, opacity .45s ease, box-shadow .4s ease; }
  /* A dőlés-transzformot a .reveal.is-visible fölé kell emelni, különben az
     nullázza. A reveal-maszk NEM a gombon van: a clip-path kinullázná az
     IntersectionObserver metszetét, és a kártya sosem jelenne meg. */
  .bento-item.reveal, .bento-item.reveal.is-visible{
    transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); }
  .bento-inner{ position:absolute; inset:0; display:block;
    clip-path:inset(0 0 100% 0); transition:clip-path .9s cubic-bezier(.16,1,.3,1); }
  .bento-item.is-visible .bento-inner{ clip-path:inset(0 0 0 0); }
  .bento-item.wide{ grid-column:span 2; }
  .bento-item.tall{ grid-row:span 2; }
  .bento-item:hover{ box-shadow:var(--shadow); }
  .bento-item:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }

  .bento-media{ position:absolute; inset:0; display:block; background-size:cover; background-position:center; background-repeat:no-repeat;
    transform:scale(1.12); transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
  .bento-item.is-visible .bento-media{ transform:scale(1); }
  .bento-item:hover .bento-media{ transform:scale(1.07); }
  .bento-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.15);
    transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
  .bento-item.is-visible .bento-img{ transform:scale(1); }
  .bento-item:hover .bento-img{ transform:scale(1.07); }

  .bento-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    gap:.4rem; padding:var(--sp-3); z-index:2;
    background:linear-gradient(180deg, rgba(6,8,10,0) 38%, rgba(6,8,10,.72) 100%); }
  .bento-tag{ align-self:flex-start; font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase;
    letter-spacing:.09em; background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
    padding:.32em .75em; border-radius:var(--radius-pill); color:#fff; }
  .bento-title{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; line-height:1.2;
    text-shadow:0 2px 14px rgba(0,0,0,.4); transform:translateY(6px); opacity:.92; transition:transform .35s ease, opacity .35s ease; }
  .bento-sub{ font-size:.78rem; color:rgba(255,255,255,.72); max-height:0; opacity:0; overflow:hidden;
    transition:max-height .35s ease, opacity .35s ease; }
  .bento-item:hover .bento-title{ transform:translateY(0); opacity:1; }
  .bento-item:hover .bento-sub{ max-height:3.4em; opacity:1; }
  .bento-item.wide .bento-title{ font-size:1.25rem; }
  .bento-item.tall .bento-title{ font-size:1.18rem; }

  /* fényszalag hoverre */
  .bento-sheen{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 48%, rgba(15,215,154,.24) 54%, transparent 64%);
    transform:translateX(-120%); }
  .bento-item:hover .bento-sheen{ opacity:1; animation:sheen-sweep .85s ease forwards; }
  @keyframes sheen-sweep{ to{ transform:translateX(120%); } }

  /* videó jelzés a kártyán */
  .bento-play{ position:absolute; top:var(--sp-2); right:var(--sp-2); z-index:3; width:34px; height:34px; border-radius:50%;
    display:grid; place-items:center; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.3); }
  .bento-play svg{ width:13px; height:13px; fill:#fff; margin-left:2px; }

  /* szűrt állapot — előbb kifakul (.is-fading), majd kikerül a rácsból (.is-hidden) */
  .bento-item.is-fading{ opacity:0; transform:scale(.94); pointer-events:none; }
  .bento-item.is-hidden{ display:none; }

  @media (max-width:860px){
    .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
    .bento-item.tall{ grid-row:span 1; }
  }
  @media (max-width:560px){
    .bento{ grid-template-columns:1fr; grid-auto-rows:230px; }
    .bento-item.wide{ grid-column:span 1; }
  }

  /* --- full-bleed parallax videó-sáv --- */
  .vband{ position:relative; width:100%; height:78vh; min-height:420px; max-height:760px;
    overflow:hidden; display:flex; align-items:flex-end; color:#fff; background:#0A0C0F; margin-block:var(--sp-10); }
  .vband-frame{ position:absolute; inset:-14% 0; z-index:0; will-change:transform; }
  .vband-video{ width:100%; height:100%; object-fit:cover; display:block; }
  .vband-poster{ position:absolute; inset:0; background-size:cover; background-position:center; }
  .vband-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(6,8,10,.55) 0%, rgba(6,8,10,.18) 40%, rgba(6,8,10,.88) 100%); }
  .vband-content{ position:relative; z-index:2; width:100%; padding-bottom:var(--sp-8); will-change:transform; }
  .vband-eyebrow{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--mint); }
  .vband h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; line-height:1.05;
    font-size:clamp(2rem,3.4vw + 1rem,4.2rem); margin:.25em 0 .3em; max-width:16ch; }
  .vband p{ max-width:46ch; color:rgba(255,255,255,.78); }
  .vband-client{ display:flex; align-items:center; gap:.8rem; margin-top:var(--sp-3); }
  .vband-client img{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.85; }
  .vband-client span{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); }
  @media (max-width:860px){ .vband{ height:62vh; min-height:360px; } .vband-frame{ inset:-8% 0; } }

  /* --- lightbox --- */
  .lb{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
    padding:var(--sp-4); background:rgba(6,8,10,.82); backdrop-filter:blur(18px); opacity:0; transition:opacity .3s ease; }
  .lb.open{ display:flex; }
  .lb.shown{ opacity:1; }
  .lb-stage{ position:relative; width:min(1080px,100%); max-height:88vh; overflow:auto;
    border-radius:var(--radius-card); background:#0D1013; border:1px solid rgba(255,255,255,.12);
    transform:scale(.96) translateY(12px); transition:transform .35s cubic-bezier(.16,1,.3,1); }
  .lb.shown .lb-stage{ transform:none; }
  .lb-media{ position:relative; background:#000; aspect-ratio:16/9; display:grid; place-items:center; }
  .lb-media img, .lb-media video, .lb-media iframe{ width:100%; height:100%; object-fit:contain; border:0; display:block; }
  .lb-empty{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.42); text-align:center; padding:0 var(--sp-4); }
  .lb-info{ padding:var(--sp-3) var(--sp-4) var(--sp-4); color:#fff; }
  .lb-info .lb-tag{ font-family:var(--font-mono); font-size:.63rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mint); }
  .lb-info h3{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; margin:.35em 0 .3em; }
  .lb-info p{ color:rgba(255,255,255,.72); max-width:62ch; font-size:.92rem; }
  .lb-client{ display:flex; align-items:center; gap:.7rem; margin-top:var(--sp-3); }
  .lb-client img{ height:24px; width:auto; filter:brightness(0) invert(1); opacity:.8; }
  .lb-btn{ position:absolute; z-index:4; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px);
    color:#fff; cursor:pointer; transition:background .2s ease, transform .2s ease; }
  .lb-btn:hover{ background:rgba(255,255,255,.24); transform:scale(1.06); }
  .lb-btn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
  .lb-btn svg{ width:18px; height:18px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .lb-close{ top:var(--sp-3); right:var(--sp-3); }
  .lb-prev{ left:var(--sp-3); top:33%; }
  .lb-next{ right:var(--sp-3); top:33%; }
  .lb-counter{ position:absolute; top:var(--sp-3); left:var(--sp-3); z-index:4;
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; color:rgba(255,255,255,.72);
    background:rgba(6,8,10,.5); padding:.5em 1em; border-radius:var(--radius-pill); }
  @media (max-width:560px){
    .lb{ padding:0; }
    .lb-stage{ max-height:100vh; border-radius:0; min-height:100%; }
    .lb-prev{ left:.5rem; } .lb-next{ right:.5rem; }
  }

  /* --- mozgáscsökkentés --- */
  @media (prefers-reduced-motion: reduce){
    .bento-inner{ clip-path:none; transition:none; }
    .bento-item.reveal, .bento-item.reveal.is-visible{ transform:none; }
    .bento-img, .bento-media{ transform:none; }
    .bento-item:hover .bento-img, .bento-item:hover .bento-media{ transform:none; }
    .bento-sheen{ display:none; }
    .logo-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
    .vband-frame, .vband-content{ transform:none; }
    .lb, .lb-stage{ transition:none; }
  }

  /* ============ WORKFLOW AUTOMATIZÁLÁS OLDAL ============ */

  /* --- workflow katalógus --- */
  .wf-cat{ margin-top:var(--sp-6); }
  .wf-cat-head{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:var(--sp-2);
    padding-bottom:var(--sp-2); border-bottom:1px solid var(--edge); }
  .wf-cat-head h3{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
  .wf-cat-head span{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--ink-faint); }

  .wf-list{ display:flex; flex-direction:column; gap:.6rem; }
  .wf-item{ border:1px solid var(--edge); border-radius:var(--radius-tile); background:var(--surface);
    overflow:hidden; transition:border-color .25s ease; }
  .wf-item:hover{ border-color:var(--edge-strong); }

  .wf-trigger{ width:100%; display:flex; align-items:center; gap:var(--sp-2); text-align:left;
    padding:var(--sp-3); background:none; border:0; cursor:pointer; color:inherit; font:inherit; }
  .wf-trigger:focus-visible{ outline:2px solid var(--mint-deep); outline-offset:-2px; }
  .wf-trigger .wf-name{ flex:1 1 auto; min-width:0; font-weight:700; font-size:1rem; overflow-wrap:anywhere; }
  .wf-trigger .wf-tag{ flex:0 0 auto; font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase;
    letter-spacing:.08em; color:var(--mint-deep); background:rgba(15,215,154,.12);
    padding:.32em .7em; border-radius:var(--radius-pill); }
  .wf-chev{ flex:0 0 auto; width:20px; height:20px; stroke:var(--ink-faint); stroke-width:2; fill:none;
    stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
  .wf-trigger[aria-expanded="true"] .wf-chev{ transform:rotate(180deg); }
  .wf-trigger[aria-expanded="true"] .wf-name{ color:var(--mint-deep); }

  .wf-panel{ padding:0 var(--sp-3) var(--sp-3); border-top:1px solid var(--edge); }
  .wf-panel-inner{ padding-top:var(--sp-3); }

  /* lépéslista: bal oldali mint vonal + számozott pontok */
  .wf-steps{ list-style:none; margin:0; padding:0 0 0 var(--sp-4); position:relative; }
  .wf-steps::before{ content:""; position:absolute; left:7px; top:.5em; bottom:.5em; width:2px;
    background:linear-gradient(180deg, var(--mint), rgba(15,215,154,.15)); border-radius:2px; }
  .wf-step{ position:relative; padding:.35rem 0; font-size:.92rem; color:var(--ink-soft); overflow-wrap:anywhere; }
  .wf-step::before{ content:""; position:absolute; left:calc(-1 * var(--sp-4) + 3px); top:.95em;
    width:10px; height:10px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px var(--ground); }
  .wf-step b{ color:var(--ink); }

  .wf-result{ margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-tile);
    background:rgba(15,215,154,.1); border:1px solid rgba(15,215,154,.28); font-size:.9rem; }
  .wf-result b{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--mint-deep); display:block; margin-bottom:.3em; }

  /* --- workflow anatómia ábra --- */
  .wf-anatomy{ margin-top:var(--sp-6); overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--edge); border-radius:var(--radius-card); background:var(--surface);
    padding:var(--sp-4) var(--sp-3); }
  .wf-anatomy svg{ display:block; min-width:660px; width:100%; height:auto; }
  .wf-anatomy-note{ margin-top:var(--sp-2); font-family:var(--font-mono); font-size:.64rem;
    text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); text-align:center; }

  /* --- ROI kalkulátor --- */
  .calc{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-4); margin-top:var(--sp-6);
    align-items:start; }
  .calc > *{ min-width:0; }
  @media (max-width:860px){ .calc{ grid-template-columns:1fr; } }

  .calc-inputs{ display:flex; flex-direction:column; gap:var(--sp-4);
    border:1px solid var(--edge); border-radius:var(--radius-card); background:var(--surface);
    padding:var(--sp-4); }
  .calc-field label{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2);
    font-size:.9rem; font-weight:600; margin-bottom:.6rem; }
  .calc-field .calc-val{ font-family:var(--font-mono); font-size:.85rem; color:var(--mint-deep);
    background:rgba(15,215,154,.12); padding:.2em .6em; border-radius:var(--radius-pill); white-space:nowrap; }
  .calc-field input[type=range]{ width:100%; margin:0; accent-color:var(--mint-deep); }
  .calc-field .calc-hint{ margin-top:.4rem; font-size:.78rem; color:var(--ink-faint); }

  .calc-out{ border-radius:var(--radius-card); background:var(--ink); color:var(--ground);
    padding:var(--sp-4); box-shadow:var(--shadow); }
  .calc-out .calc-eyebrow{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--mint); }
  .calc-big{ font-family:var(--font-display); font-weight:700; line-height:1;
    font-size:clamp(1.9rem, 5vw, 2.9rem); margin:.35em 0 .1em; overflow-wrap:anywhere; }
  .calc-big small{ font-family:var(--font-body); font-size:.42em; font-weight:600; color:rgba(255,255,255,.6); }
  .calc-rows{ list-style:none; margin:var(--sp-3) 0 0; padding:var(--sp-3) 0 0; display:flex;
    flex-direction:column; gap:.65rem; border-top:1px solid rgba(255,255,255,.14); }
  .calc-rows li{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2);
    font-size:.9rem; color:rgba(255,255,255,.72); }
  .calc-rows b{ font-family:var(--font-mono); color:#fff; text-align:right; overflow-wrap:anywhere; }
  .calc-fte{ margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-tile);
    background:rgba(15,215,154,.16); border:1px solid rgba(15,215,154,.35); font-size:.9rem; color:#fff; }
  .calc-fte b{ color:var(--mint); }

  .calc-formula{ margin-top:var(--sp-3); font-family:var(--font-mono); font-size:.72rem;
    color:var(--ink-faint); background:var(--ground-2); border:1px solid var(--edge);
    border-radius:var(--radius-tile); padding:var(--sp-2) var(--sp-3); overflow-x:auto; }
  .calc-note{ margin-top:var(--sp-2); font-size:.8rem; color:var(--ink-faint); }

  /* --- modellezett számpélda --- */
  .model-case{ margin-top:var(--sp-6); border-radius:var(--radius-card); overflow:hidden;
    border:1px solid var(--edge); background:var(--ink); color:var(--ground); box-shadow:var(--shadow); }
  .model-case-in{ padding:var(--sp-5); }
  .model-badge{ display:inline-block; font-family:var(--font-mono); font-size:.62rem;
    text-transform:uppercase; letter-spacing:.1em; font-weight:700;
    background:var(--mint); color:var(--mint-ink); padding:.4em .9em; border-radius:var(--radius-pill); }
  .model-case h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
    font-size:clamp(1.4rem, 2.2vw + .8rem, 2.1rem); margin:var(--sp-3) 0 var(--sp-2); overflow-wrap:anywhere; }
  .model-case p{ color:rgba(255,255,255,.76); max-width:64ch; }
  .model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-4); }
  .model-grid > *{ min-width:0; }
  @media (max-width:760px){ .model-grid{ grid-template-columns:1fr; } }
  .model-box{ border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-tile); padding:var(--sp-3); }
  .model-box .model-k{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--mint); }
  .model-box .model-v{ font-family:var(--font-display); font-size:1.5rem; font-weight:700;
    margin:.3em 0 .15em; line-height:1.05; overflow-wrap:anywhere; }
  .model-box p{ font-size:.84rem; color:rgba(255,255,255,.62); }
  .model-disclaimer{ margin-top:var(--sp-4); padding-top:var(--sp-3);
    border-top:1px solid rgba(255,255,255,.14); font-size:.82rem; color:rgba(255,255,255,.58); }

  @media (prefers-reduced-motion: reduce){
    .wf-chev, .wf-item{ transition:none; }
  }

  /* ============ DIAGRAMOK ============
     A jelölő-szín NEM a téma --mint-deep tokene: a sötét téma #12C592-je
     megbukik a dataviz validátor világosság-sávján (L 0.73 > 0.67). A #0A9E77
     viszont mindkét felszínen (#E4E7EA és #101317) átmegy mind az öt
     ellenőrzésen, ezért mindkét módban ugyanez. Ne cseréld var(--mint-deep)-re.
     A --chart-surface SZILÁRD szín: a jelölő-gyűrűk és a kitöltés-rések
     ebből vannak, átlátszó felszínen azok nem működnének. */
  :root{
    --chart-mark:#0A9E77;
    --chart-surface:var(--ground-2);
  }

  .chart-card{ background:var(--chart-surface); border:1px solid var(--edge);
    border-radius:var(--radius-card); padding:var(--sp-4) var(--sp-4) var(--sp-3);
    margin-top:var(--sp-4); position:relative; }
  .chart-card > * { min-width:0; }
  .chart-head{ display:flex; justify-content:space-between; align-items:baseline;
    gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); }
  .chart-title{ font-family:var(--font-display); font-weight:600; font-size:1.02rem;
    letter-spacing:-.01em; overflow-wrap:anywhere; }
  .chart-sub{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase;
    letter-spacing:.09em; color:var(--ink-faint); }
  /* szűk kijelzőn a diagram vízszintesen görgethető a saját keretén belül */
  .chart-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chart-scroll > svg{ min-width:600px; }

  /* --- kulcs (nem sorozat-legend: egyetlen sorozat van, ez a jelölések magyarázata) --- */
  .chart-key{ display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); margin-top:var(--sp-3);
    padding-top:var(--sp-2); border-top:1px solid var(--edge);
    font-size:.78rem; color:var(--ink-soft); }
  .chart-key span{ display:inline-flex; align-items:center; gap:.45rem; }
  .chart-key i{ display:inline-block; flex:0 0 auto; }
  .chart-key .k-bar{ width:22px; height:8px; border-radius:4px; background:var(--chart-mark); }
  .chart-key .k-dash{ width:22px; height:0; border-top:2px dashed var(--ink-faint); }
  .chart-key .k-dot{ width:9px; height:9px; border-radius:50%; background:var(--chart-mark); }

  /* --- ártartomány-diagram --- */
  .rng{ display:block; width:100%; height:auto; }
  .rng-grid line{ stroke:var(--edge); stroke-width:1; }        /* szilárd hajszálvonal */
  .rng-axis line{ stroke:var(--edge-strong); stroke-width:1; }
  .rng-axis text{ fill:var(--ink-faint); font-family:var(--font-mono); font-size:9px; }
  .rng-unit{ font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
  .rng-name{ fill:var(--ink); font-family:var(--font-body); font-size:11.5px; font-weight:700; }
  .rng-val{ fill:var(--ink); font-family:var(--font-mono); font-size:10px; font-weight:600; }
  .rng-val2{ fill:var(--ink-faint); font-family:var(--font-mono); font-size:9.5px; }
  .rng-bar{ fill:var(--chart-mark); }
  .rng-ext{ stroke:var(--ink-faint); stroke-width:2; stroke-dasharray:2 4.5; stroke-linecap:round; }
  .rng-ext-solid{ stroke:var(--chart-mark); stroke-width:2; stroke-linecap:round; }
  /* 2px felszín-gyűrű, hogy a jelölő ott is olvasható legyen, ahol átfed */
  .rng-dot{ fill:var(--chart-mark); stroke:var(--chart-surface); stroke-width:2; }
  .rng-hit{ fill:transparent; }
  .rng-row{ cursor:default; }
  .rng-row:hover .rng-hit,
  .rng-row:focus-visible .rng-hit{ fill:rgba(15,215,154,.09); }
  .rng-row:focus-visible{ outline:none; }
  .rng-row:focus-visible .rng-name{ text-decoration:underline; }

  /* --- ROI-görbe --- */
  .roi{ display:block; width:100%; height:auto; }
  .roi-grid line{ stroke:var(--edge); stroke-width:1; }
  .roi-axis line{ stroke:var(--edge-strong); stroke-width:1; }
  .roi-axis text, .roi-ylab text{ fill:var(--ink-faint); font-family:var(--font-mono); font-size:9px; }
  .roi-unit{ fill:var(--ink-faint); font-family:var(--font-mono); font-size:8px;
    letter-spacing:.08em; text-transform:uppercase; }
  .roi-area{ fill:var(--chart-mark); opacity:.1; }             /* ~10% wash */
  .roi-line{ fill:none; stroke:var(--chart-mark); stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }
  .roi-dot{ fill:var(--chart-mark); stroke:var(--chart-surface); stroke-width:2; }
  .roi-lab{ fill:var(--ink); font-family:var(--font-mono); font-size:10px; font-weight:600; }

  /* --- tooltip --- */
  .chart-tip{ position:absolute; z-index:5; pointer-events:none; opacity:0;
    transform:translate(-50%,-100%); transition:opacity .15s ease;
    background:var(--ink); color:var(--ground); border-radius:10px;
    padding:.6em .8em; min-width:150px; box-shadow:var(--shadow); }
  .chart-tip.show{ opacity:1; }
  .chart-tip b{ display:block; font-size:.86rem; margin-bottom:.35em; }
  .chart-tip dl{ margin:0; display:grid; grid-template-columns:auto auto; gap:.15em .7em;
    font-family:var(--font-mono); font-size:.7rem; }
  .chart-tip dt{ color:rgba(255,255,255,.6); }
  .chart-tip dd{ margin:0; text-align:right; white-space:nowrap; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .chart-tip dt{ color:rgba(0,0,0,.55); }
  }
  :root[data-theme="dark"] .chart-tip dt{ color:rgba(0,0,0,.55); }

  /* --- táblázatos nézet (a diagram alternatívája, mindig elérhető) --- */
  .chart-table{ margin-top:var(--sp-3); }
  .chart-table > summary{ cursor:pointer; font-family:var(--font-mono); font-size:.68rem;
    text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);
    padding:.5em 0; }
  .chart-table > summary:focus-visible{ outline:2px solid var(--mint-deep); outline-offset:2px; }
  .chart-table table{ width:100%; border-collapse:collapse; margin-top:var(--sp-2);
    font-size:.86rem; }
  .chart-table th, .chart-table td{ text-align:left; padding:.5em .6em;
    border-bottom:1px solid var(--edge); overflow-wrap:anywhere; }
  .chart-table th{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase;
    letter-spacing:.08em; color:var(--ink-faint); font-weight:600; }
  .chart-table td.num{ text-align:right; font-family:var(--font-mono);
    font-variant-numeric:tabular-nums; white-space:nowrap; }

  @media (prefers-reduced-motion: reduce){
    .chart-tip{ transition:none; }
  }

  /* ============ MOBILNÉZET JAVÍTÁSOK (2026-09-02 audit) ============ */

  /* --- diagram: széles vs. kompakt változat ---
     A széles viewBox 760 (ár) / 520 (ROI) egység. 375px-es telefonon a
     görgethető keret ~246px, ott a 9,5px-es címke ~7,5px-en jelent meg, és
     egyszerre a diagram 41%-a látszott. 620px alatt ezért a kompakt változat
     jön, amit NEM kell vízszintesen görgetni. */
  .chart-mobile{ display:none; }
  @media (max-width:620px){
    .chart-desktop{ display:none; }
    .chart-mobile{ display:block; }
    /* a kompakt SVG-t nem kényszerítjük 600px-re: elfér a konténerben */
    .chart-scroll.chart-mobile > svg{ min-width:0; }
    .chart-scroll.chart-mobile{ overflow-x:visible; }
  }
  /* a kompakt változat nagyobb betűi (a viewBox szűkebb, a nagyítás ~1,0) */
  .rng-compact .rng-name{ font-size:12.5px; }
  .rng-compact .rng-val{ font-size:11px; }
  .rng-compact .rng-axis text{ font-size:10px; }
  .rng-compact .rng-unit{ font-size:9px; }
  .roi-compact .roi-axis text, .roi-compact .roi-ylab text{ font-size:10.5px; }
  .roi-compact .roi-unit{ font-size:9.5px; }
  .roi-compact .roi-lab{ font-size:12px; }

  /* --- 1. wf-trigger 320px-en: a címke-pill leszorította a nevet 31px-re,
         olvashatatlanná. Szűk kijelzőn a pill a név ALÁ kerül. --- */
  @media (max-width:520px){
    .wf-trigger{ flex-wrap:wrap; align-items:flex-start; }
    /* flex-basis:0, hogy a nev a chevronnal EGY sorban maradjon es belul
       tordelodjon (1 1 auto eseten a chevront kulon sorba nyomta) */
    .wf-trigger .wf-name{ flex:1 1 0; min-width:0; order:1; }
    .wf-chev{ order:2; margin-top:3px; }
    /* align-self, hogy a pill csak a tartalma szelessegu legyen, ne savnak lassek */
    .wf-trigger .wf-tag{ order:3; flex-basis:100%; align-self:flex-start;
      width:max-content; max-width:100%; margin-top:.5rem; }
  }

  /* --- 2. bento-title 320px-en levágódott (a kártya overflow:hidden) --- */
  .bento-title, .bento-sub, .bento-tag{ overflow-wrap:anywhere; }

  /* --- 3. az ÁSZF-ben a "Nyilvántartási/cégjegyzékszám:" 25px-et kilógott:
         a "/" nem törési pont, és a li overflow-wrap-je normal volt --- */
  .legal-content li, .legal-content strong, .legal-content dd, .legal-content dt{
    overflow-wrap:anywhere; }

  /* --- 4. tap-targetek (WCAG 2.5.8: min. 24x24, mobilon 44px a cél) --- */
  /* --- csúszkák ---
     A 16px magas, kitöltés nélküli sáv nem olvasódott vezérlőnek: nem látszott,
     hol állsz a skálán, és hogy húzni kell. Ezért:
       - a --fill custom property adja a kitöltés százalékát (az app.js írja),
         a pseudo-elem pedig örökli az inputról
       - 44px magas fogási terület, 26px fogantyú, aktív állapotban nagyobb
     A ::-webkit-slider-runnable-track ES a ::-moz-range-track ugyanezt a
     gradienst kapja, kulonben Firefoxban kitoltes nelkul marad. */
  .calc-field input[type=range]{
    -webkit-appearance:none; appearance:none; width:100%; height:44px;
    background:transparent; cursor:pointer; --fill:50%; }

  .calc-field input[type=range]::-webkit-slider-runnable-track{
    height:8px; border-radius:4px;
    background:linear-gradient(90deg,
      var(--mint-deep) 0 var(--fill), var(--edge-strong) var(--fill) 100%); }
  .calc-field input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:26px; height:26px;
    margin-top:-9px; border-radius:50%; background:var(--ground);
    border:3px solid var(--mint-deep);
    box-shadow:0 2px 8px rgba(10,158,119,.35);
    transition:transform .12s ease, box-shadow .12s ease; }
  .calc-field input[type=range]:hover::-webkit-slider-thumb{
    transform:scale(1.08); box-shadow:0 3px 12px rgba(10,158,119,.5); }
  .calc-field input[type=range]:active::-webkit-slider-thumb{
    transform:scale(1.14); }

  .calc-field input[type=range]::-moz-range-track{
    height:8px; border-radius:4px;
    background:linear-gradient(90deg,
      var(--mint-deep) 0 var(--fill), var(--edge-strong) var(--fill) 100%); }
  .calc-field input[type=range]::-moz-range-thumb{
    width:26px; height:26px; border-radius:50%; background:var(--ground);
    border:3px solid var(--mint-deep);
    box-shadow:0 2px 8px rgba(10,158,119,.35); }

  .calc-field input[type=range]:focus-visible{ outline:2px solid var(--mint-deep);
    outline-offset:4px; border-radius:var(--radius-pill); }
  @media (prefers-reduced-motion: reduce){
    .calc-field input[type=range]::-webkit-slider-thumb{ transition:none; }
    .calc-field input[type=range]:hover::-webkit-slider-thumb,
    .calc-field input[type=range]:active::-webkit-slider-thumb{ transform:none; }
  }

  /* min/max feliratok a csúszka alatt: a skála végpontjai enélkül nem látszanak */
  .calc-range{ display:flex; justify-content:space-between;
    font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em;
    color:var(--ink-faint); margin-top:-.35rem; }

  /* footer- és jogi listalinkek 20-22px magasak voltak */
  .foot-grid a, .legal-content li > a, .foot-legal a{ display:inline-block; padding-block:.28em; }
  .foot-grid .brand{ padding-block:.2em; }
  .foot-social a{ display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; }

  /* hamburger 36px széles volt */
  .nav-toggle{ min-width:44px; }

  /* szűrő-chipek 30px magasak voltak. Szélesség-alapú a töréspont, nem
     (hover:none): úgy determinisztikus és böngészőben mérhető. */
  @media (max-width:620px){
    .chip{ padding:.78em 1.15em; }
  }

  /* A kompakt diagram konténere 375px-en csak ~246px volt (wrap 24px + kártya
     32px padding oldalanként), ezért a 300 egységes viewBox 0,72-re kicsinyült
     és a feliratok 8px körül jelentek meg. Mobilon kisebb kártya-padding →
     ~295px hely → ~1,0 nagyítás, tehát a CSS-méret a tényleges méret. */
  @media (max-width:620px){
    .chart-card{ padding:var(--sp-3) var(--sp-2) var(--sp-2); }
  }

  /* --- mobil ártartomány-lista (a kompakt SVG helyett) ---
     Az SVG-szöveg a konténerrel skálázódik, tehát nem lehet reszponzív:
     bármelyik viewBox-méretnél valamelyik készülékszélességen elromlik a
     betűméret. HTML-ben a szöveg mindig a CSS-méretén marad, a sáv hosszát
     pedig százalék adja — 320px-től 430px-ig egyformán olvasható. */
  .rng-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
    gap:var(--sp-3); }
  .rng-litem{ min-width:0; }
  .rng-litem-head{ display:flex; justify-content:space-between; align-items:baseline;
    gap:var(--sp-2); margin-bottom:.45rem; }
  .rng-litem-name{ font-size:.88rem; font-weight:700; overflow-wrap:anywhere; }
  .rng-litem-val{ flex:0 0 auto; font-family:var(--font-mono); font-size:.76rem;
    color:var(--ink-soft); white-space:nowrap; }
  .rng-track{ position:relative; height:12px; border-radius:6px;
    background:var(--edge); }
  .rng-fill{ position:absolute; top:0; height:100%; border-radius:6px;
    background:var(--chart-mark); }
  /* nyitott vég: szaggatott folytatás a "felette egyedi ár" jelzésére */
  .rng-open{ position:absolute; top:5px; height:2px; width:26px; margin-left:6px;
    background:repeating-linear-gradient(90deg, var(--ink-faint) 0 2px,
      transparent 2px 6px); }
  .rng-cap{ position:absolute; top:1px; width:10px; height:10px; margin-left:-5px;
    border-radius:50%; background:var(--chart-mark);
    box-shadow:0 0 0 2px var(--chart-surface); }
  .rng-scale{ display:flex; justify-content:space-between; font-family:var(--font-mono);
    font-size:.66rem; color:var(--ink-faint); padding-top:.2rem;
    border-top:1px solid var(--edge); margin-top:.2rem; }

  /* a kompakt ROI-görbe betűi (viewBox 240 → nagyítás 0,93-1,3) */
  .roi-compact .roi-axis text, .roi-compact .roi-ylab text{ font-size:11.5px; }
  .roi-compact .roi-unit{ font-size:10px; }
  .roi-compact .roi-lab{ font-size:12.5px; }

  /* --- mobil fejléc ---
     375px-en a logó (135px) + a "Ingyenes konzultáció" gomb (117px, két sorba
     tördelve) + a hamburger (44px) együtt 323px, a rendelkezésre álló hely
     309px. A gomb szövege ezért két sorba csúszott, a fejléc 84px magas lett,
     és a logó mellett nem maradt térköz. Szűk kijelzőn a fejléc-CTA kikerül:
     a Kapcsolat a hamburger-menüben és a lebegő WhatsApp gombban is ott van,
     plusz minden oldalnak van saját CTA-szekciója. */
  @media (max-width:620px){
    .nav-cta .btn{ display:none; }
    .topnav{ gap:var(--sp-2); }
  }

  /* ============ A11Y SEGEDOSZTALYOK ============ */

  /* Kepernyoolvasonak megmarad, szemmel nem latszik. NEM display:none es nem
     visibility:hidden - azok a kepernyoolvasobol is kivennek. */
  .visually-hidden{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
    border:0; }

  /* Ugras a tartalomra: csak fokuszban latszik (WCAG 2.4.1 Bypass Blocks).
     A nav position:fixed, ezert a link z-indexe fole kell menjen. */
  .skip-link{
    position:absolute; top:-100px; left:var(--sp-2); z-index:200;
    background:var(--ink); color:var(--ground); text-decoration:none;
    font-weight:700; font-size:.9rem; padding:.7em 1.1em;
    border-radius:var(--radius-pill); box-shadow:var(--shadow);
    transition:top .18s ease; }
  .skip-link:focus{ top:var(--sp-2); outline:2px solid var(--mint); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }

  /* ============ SZOLGÁLTATÁS-HERO HÁTTEREK ============
     A generált „hightech iroda" fotók kikerültek: AI-klisék voltak, a
     képernyőkön és a papírokon halandzsa szöveggel.

     Két dolgot kell tudni a méretezésről:
     1. A .phero-bg `background-attachment:fixed`, tehát a gradiens a
        VIEWPORThoz méretezett, nem az elemhez — a százalékos pozíciók a
        képernyőre értendők.
     2. A .phero-scrim a jobb oldalon is ~44%-ot elnyel (0,30 vízszintes +
        0,15–0,35 függőleges réteg). Ezért kell erős, éles kifutású fénypont,
        különben sík sötét sávnak látszik. Balra a scrim 94%, oda kerül a
        fehér szöveg — ott a fényerő nem zavar.

     Oldalanként más a fénypont helye, színe és élessége, hogy a kilenc
     szolgáltatás-oldal ne legyen egyforma. */

  .phero-bg.bg-ppc{
    background-image:
      radial-gradient(62% 58% at 79% 30%, rgba(34,240,180,.92), rgba(15,215,154,.34) 42%, transparent 72%),
      radial-gradient(70% 60% at 96% 92%, rgba(154,161,172,.34), transparent 66%),
      linear-gradient(150deg,#10403A 0%,#08181C 52%,#05090C 100%); }

  .phero-bg.bg-workflow{
    background-image:
      radial-gradient(58% 66% at 72% 44%, rgba(34,240,180,.85), rgba(10,158,119,.30) 44%, transparent 74%),
      radial-gradient(64% 52% at 22% 6%, rgba(199,205,214,.24), transparent 62%),
      linear-gradient(150deg,#0C5745 0%,#0D2A31 50%,#05090C 100%); }

  .phero-bg.bg-marka{
    background-image:
      radial-gradient(60% 56% at 80% 28%, rgba(34,240,180,.90), rgba(15,215,154,.30) 44%, transparent 74%),
      radial-gradient(48% 44% at 92% 16%, rgba(226,231,238,.52), transparent 70%),
      radial-gradient(54% 50% at 50% 94%, rgba(15,215,154,.40), transparent 68%),
      linear-gradient(150deg,#17423C 0%,#101C22 52%,#05090C 100%); }

  .phero-bg.bg-social{
    background-image:
      radial-gradient(52% 48% at 32% 14%, rgba(34,240,180,.72), transparent 68%),
      radial-gradient(64% 62% at 88% 66%, rgba(199,205,214,.50), transparent 70%),
      linear-gradient(158deg,#123A3E 0%,#0B1E23 52%,#05090C 100%); }

  .phero-bg.bg-web{
    background-image:
      radial-gradient(60% 66% at 88% 56%, rgba(15,215,154,.88), rgba(10,158,119,.30) 46%, transparent 74%),
      radial-gradient(54% 48% at 16% 10%, rgba(199,205,214,.22), transparent 62%),
      linear-gradient(148deg,#0E3A31 0%,#091B20 54%,#05090C 100%); }

  .phero-bg.bg-dron{
    background-image:
      radial-gradient(130% 46% at 54% -6%, rgba(34,240,180,.82), rgba(15,215,154,.24) 50%, transparent 78%),
      radial-gradient(150% 54% at 46% -2%, rgba(199,205,214,.34), transparent 74%),
      radial-gradient(56% 50% at 86% 78%, rgba(15,215,154,.62), transparent 70%),
      linear-gradient(180deg,#173B41 0%,#0C1A21 50%,#05090C 100%); }

  .phero-bg.bg-aftermovie{
    background-image:
      radial-gradient(54% 52% at 87% 74%, rgba(34,240,180,.95), rgba(15,215,154,.32) 40%, transparent 72%),
      radial-gradient(64% 56% at 38% 8%, rgba(91,98,112,.44), transparent 66%),
      linear-gradient(150deg,#151F29 0%,#0A1016 52%,#05090C 100%); }

  .phero-bg.bg-termek{
    background-image:
      radial-gradient(58% 58% at 76% 44%, rgba(34,240,180,.88), rgba(15,215,154,.28) 44%, transparent 74%),
      radial-gradient(44% 46% at 58% 30%, rgba(240,243,247,.58), transparent 72%),
      radial-gradient(48% 42% at 26% 96%, rgba(15,215,154,.32), transparent 68%),
      linear-gradient(150deg,#1B3B35 0%,#101C20 54%,#05090C 100%); }

  .phero-bg.bg-crm{
    background-image:
      radial-gradient(60% 58% at 68% 34%, rgba(34,240,180,.80), rgba(10,158,119,.28) 44%, transparent 72%),
      radial-gradient(66% 58% at 95% 82%, rgba(15,215,154,.42), transparent 68%),
      linear-gradient(150deg,#0D4249 0%,#081D24 54%,#05090C 100%); }

  /* ============ ÜGYFÉLSZERZÉSI AJÁNLAT (arak.html) ============
     A .page-main 144px padding-top-ot ad, és a szekció még rátesz — desktopon
     185px, mobilon ~300px halott térköz volt a menü és az első szöveg között.
     Az ajánlat-hero ezért maga adja a felső levegőt, a szekció-padding nélkül. */
  .offer-main{ padding-top:0; }
  .offer-hero{ padding-top:calc(var(--sp-12) + 1.5rem); padding-bottom:var(--sp-8);
    position:relative; overflow:hidden; }
  .offer-hero::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:80vh;
    z-index:-1;
    background:radial-gradient(ellipse at 72% 0%, rgba(15,215,154,.22), transparent 62%),
               radial-gradient(ellipse at 20% 18%, rgba(154,161,172,.20), transparent 58%); }
  .offer-hero h1{ font-size:clamp(2.4rem,4.4vw + 1rem,4.8rem); font-weight:600;
    letter-spacing:-.035em; line-height:1.0; margin:.15em 0 .4em; max-width:15ch; }
  .offer-hero h1 em{ font-style:normal; color:var(--mint-deep); }
  /* A kenyermorzsa es az eyebrow ugyanaz a mono kiskapitalis stilus: kozvetlenul
     egymas alatt egyetlen blokknak olvasodnak, ezert kell koztuk levego. */
  .offer-hero .subnav{ margin-bottom:var(--sp-3); }
  .offer-hero .lead{ max-width:54ch; }
  .offer-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--sp-5); }

  .offer-points{ list-style:none; margin:var(--sp-6) 0 0; padding:0;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3);
    max-width:680px; }
  .offer-points li{ border-left:2px solid var(--mint); padding:.1rem 0 .1rem var(--sp-2); }
  /* Rovid cimkek: NE torjenek szo kozepen (a globalis h1-h3 overflow-wrap:anywhere
     nem ide szol). Ha nem fer ki, szavak kozott tordeljen. */
  .offer-points b{ display:block; font-family:var(--font-display); font-weight:600;
    font-size:clamp(1rem,1vw + .78rem,1.3rem); letter-spacing:-.02em; line-height:1.12;
    overflow-wrap:normal; word-break:normal; hyphens:none; }
  .offer-points span{ display:block; margin-top:.25em; font-family:var(--font-mono);
    font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
  @media (max-width:620px){
    .offer-points{ grid-template-columns:1fr; gap:var(--sp-3); max-width:none; }
    /* A .topnav fixed, top:24px, 82px magas -> az alja 106px-nel van.
       128+8=136px ad ~30px levegot alatta. 80px-nel a morzsamenu a nav ALA csuszott. */
    .offer-hero{ padding-top:calc(var(--sp-16) + .5rem); }
  }

  /* --- garancia-kártyák --- */
  .guar-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-3); margin-top:var(--sp-6); }
  .guar-grid > *{ min-width:0; }
  .guar-card-wide{ grid-column:1 / -1; }
  @media (max-width:760px){ .guar-grid{ grid-template-columns:1fr; } }
  .guar-card{ border:1px solid var(--edge); border-radius:var(--radius-card);
    background:var(--surface); padding:var(--sp-4); backdrop-filter:blur(12px); }
  .guar-k{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--mint-deep); margin-bottom:var(--sp-2); }
  .guar-card p{ color:var(--ink-soft); font-size:.95rem; }
  .guar-list{ margin:var(--sp-3) 0 0; padding-left:1.3em; display:flex;
    flex-direction:column; gap:.55rem; color:var(--ink-soft); font-size:.95rem; }
  .guar-list b{ color:var(--ink); }

  /* --- kinek szól / kinek nem --- */
  .fit-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--sp-3); margin-top:var(--sp-6); }
  .fit-grid > *{ min-width:0; }
  @media (max-width:760px){ .fit-grid{ grid-template-columns:1fr; } }
  .fit-card{ border:1px solid var(--edge); border-radius:var(--radius-card);
    padding:var(--sp-4); background:var(--surface); }
  .fit-card.fit-yes{ border-color:rgba(15,215,154,.42); }
  .fit-k{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
    letter-spacing:.1em; margin-bottom:var(--sp-2); }
  .fit-yes .fit-k{ color:var(--mint-deep); }
  .fit-no .fit-k{ color:var(--ink-faint); }
  .fit-card ul{ list-style:none; margin:0; padding:0; display:flex;
    flex-direction:column; gap:.6rem; }
  .fit-card li{ position:relative; padding-left:1.4em; color:var(--ink-soft);
    font-size:.95rem; overflow-wrap:anywhere; }
  .fit-yes li::before{ content:"+"; position:absolute; left:0; top:-.05em;
    color:var(--mint-deep); font-weight:700; }
  .fit-no li::before{ content:"–"; position:absolute; left:0; top:-.05em;
    color:var(--ink-faint); font-weight:700; }

  /* --- szolgáltatás-árlista tábla --- */
  .svc-table-wrap{ margin-top:var(--sp-5); overflow-x:auto;
    -webkit-overflow-scrolling:touch; }
  .svc-table{ width:100%; border-collapse:collapse; min-width:520px; }
  .svc-table th, .svc-table td{ text-align:left; padding:.85em .7em;
    border-bottom:1px solid var(--edge); vertical-align:top; }
  .svc-table thead th{ font-family:var(--font-mono); font-size:.64rem;
    text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
    font-weight:600; border-bottom-color:var(--edge-strong); }
  .svc-table tbody th[scope=row]{ font-weight:700; font-size:.98rem;
    overflow-wrap:anywhere; }
  /* A sor elsodleges tap-targetje: 21px magas volt, a WCAG 2.5.8 24px-es
     minimuma alatt. Az inline-kivetel itt nem all, mert nem folyo szovegben van. */
  .svc-table tbody th[scope=row] a{ text-decoration:none; display:inline-block;
    padding-block:.32em; }
  .svc-table tbody th[scope=row] a:hover{ color:var(--mint-deep); }
  .svc-what{ display:block; margin-top:.25em; font-weight:400; font-size:.82rem;
    color:var(--ink-soft); }
  .svc-table td.num, .svc-table th.num{ text-align:right; font-family:var(--font-mono);
    font-variant-numeric:tabular-nums; white-space:nowrap; font-size:.9rem; }
  .svc-table tr.svc-group th{ padding-top:var(--sp-4); border-bottom:none;
    font-family:var(--font-display); font-weight:600; font-size:1.02rem;
    letter-spacing:-.01em; color:var(--ink); text-transform:none; }
  .svc-table tr.svc-group th span{ font-family:var(--font-mono); font-size:.64rem;
    text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
    margin-left:.5em; }
  .svc-table tr.svc-group:first-child th{ padding-top:0; }

  /* Fizetes gomb az arlista-tablazat ar-cellaiban. A cella jobbra igazitott es
     nowrap, ezert a gomb kulon sorba kerul a szam ala. Korvonalas, nem toltott:
     19 toltott gomb elnyomna a tablazatot. A magassagot a padding tartja a
     WCAG 2.5.8 szerinti 24px-es tap-target minimum folott. */
  .svc-buy{ margin-top:.5em; }
  .svc-buy button{ font-family:var(--font-body); font-size:.72rem; font-weight:700;
    padding:.45em .9em; min-height:26px; cursor:pointer; white-space:nowrap;
    border:1px solid var(--mint-deep); border-radius:var(--radius-pill);
    background:transparent; color:var(--mint-deep);
    transition:background .2s, color .2s, border-color .2s; }
  .svc-buy button:hover{ background:var(--mint); color:var(--mint-ink); border-color:var(--mint); }
  .svc-buy button:focus-visible{ outline:2px solid var(--mint-deep); outline-offset:2px; }
  .svc-buy button:active{ transform:translateY(1px); }

  /* A hero-kartya CTA-ja: az ugyfelszerzesi ajanlatra visz. Sajat sor, hogy a
     tap-target 24px fole menjen (a kartyan belul nincs folyo szoveg-kivetel). */
  .hero-card-link{ display:inline-block; margin-top:var(--sp-3); padding-block:.3em;
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
    text-decoration:none; color:var(--mint-deep); font-weight:600; }
  .hero-card-link:hover{ text-decoration:underline; }

/* ---------- Nyelvvalaszto ----------
   <details>/<summary>, mert igy JS nelkul is nyilik, billentyuzettel is
   kezelheto, es az Esc bezarja - sajat gomb+lista eseten mindezt kezzel
   kellene megirni az app.js-ben.
   A nav 860px alatt hamburgerre valt: ott a valaszto a mobil panelbe kerul
   (.panel-langs), a navban levot elrejtjuk, hogy ne szoruljon a fejlec. */
/* NINCS margin-left:auto - a .topnav space-between-et hasznal, es egy kozepso
   gyerek auto-margoja osszenyomna a logo es a menu kozotti helyet. */
.lang-switch{ position:relative; }
.lang-switch summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; min-width:44px; height:40px; padding:0 .6rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--ink-soft); border:1px solid var(--edge); border-radius:999px;
  transition:color .2s ease, border-color .2s ease; }
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch summary:hover{ color:var(--ink); border-color:var(--mint); }
.lang-switch[open] summary{ color:var(--ink); border-color:var(--mint); }
.lang-switch ul{
  position:absolute; right:0; top:calc(100% + .5rem); z-index:60;
  margin:0; padding:.35rem; list-style:none; min-width:150px;
  background:var(--ground); border:1px solid var(--edge);
  border-radius:14px; box-shadow:0 18px 40px rgba(20,30,40,.16); }
.lang-switch li{ margin:0; }
.lang-switch li a, .lang-switch li span{
  display:block; padding:.55rem .7rem; border-radius:9px;
  font-size:.9rem; text-decoration:none; color:var(--ink-soft); }
.lang-switch li a:hover{ background:var(--surface-2, rgba(0,0,0,.05)); color:var(--ink); }
.lang-switch li span[aria-current]{ color:var(--mint-deep); font-weight:600; }

.panel-langs{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--edge); }
.panel-langs a{
  padding:.6rem .9rem; border:1px solid var(--edge); border-radius:999px;
  font-size:.86rem; text-decoration:none; color:var(--ink-soft); }
.panel-langs a:hover{ color:var(--ink); border-color:var(--mint); }

@media (max-width:860px){
  .lang-switch{ display:none; }
}

/* A jogi oldalak forditasan a magyar verzio elsobbsegere figyelmezteto doboz. */
.legal-main .legal-note{
  margin:var(--sp-4) 0; padding:var(--sp-3);
  border:1px solid var(--edge); border-left:3px solid var(--mint-deep);
  border-radius:10px; background:var(--surface-2, rgba(0,0,0,.03));
  font-size:.92rem; color:var(--ink-soft); }

/* ---------- Tobbnyelvu layout-biztonsag  (TOBBNYELVU BIZTONSAG) ----------
   A CSS grid `1fr` valojaban minmax(auto, 1fr), es az `auto` also hatara a
   tartalom min-content szelessege. Egyetlen hosszu, torhetetlen szo ezert
   szetfeszitheti a savot a konteneren tul — a magyar szoveggel ez nem jott elo,
   a nemet osszetett szavakkal (Wochenperformance, Kampagnendaten) igen: a
   .feature-grid savja 303px lett egy 257px-es konteneren, 22px tulcsordulassal.
   A min-width:0 engedi a savot zsugorodni, az overflow-wrap pedig a szot torni.
   Ez nem a nemetre szol kulon: barmelyik nyelv barmikor hozhat hosszabb szot. */
.feature-grid > *, .bento-grid > *, .price-grid > *,
.svc-table td, .svc-table th, .wf-list > *, .step-grid > *{ min-width:0; }

.feature-tile, .price-card, .bento-overlay, .dash-label,
.wf-name, .wf-tag, .calc-field label{ overflow-wrap:break-word; }

/* A dashboard-makett cimkeje fix szelessegu dobozban ul; nemetul a
   "Wochenperformance" 156px-et kert 141px helyett. Itt a torest engedjuk. */
.dash-label{ overflow-wrap:anywhere; }