/* ==========================================================================
   MEP Magyarország — design system
   Fehér – szürke – kék, ipari B2B, futurisztikus 3D-s prémium stílus
   Betűtípus: Cabinet Grotesk (Fontshare CDN, ld. <head>)
   ========================================================================== */

:root{
  --color-white: #ffffff;
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-border: #e2e5ea;
  --color-text: #14181f;
  --color-text-muted: #545c6b;
  --color-gray-50: #f6f7f9;
  --color-gray-100: #eceef2;
  --color-gray-200: #d8dce3;
  --color-gray-800: #1c2230;
  --color-gray-900: #10141c;

  --color-blue-600: #0b5fd7;
  --color-blue-700: #0a4fb0;
  --color-blue-500: #2f7dee;
  --color-blue-100: #e5f0ff;

  --color-cyan: #22d3ee;
  --color-cyan-2: #67e8f9;

  --color-accent: var(--color-blue-600);
  --color-accent-hover: var(--color-blue-700);

  --glow-blue: rgba(47,125,238,.5);
  --glow-blue-soft: rgba(47,125,238,.28);
  --glow-cyan: rgba(34,211,238,.4);

  --shadow-sm: 0 1px 2px rgba(16,20,28,.06);
  --shadow-md: 0 6px 20px rgba(16,20,28,.08);
  --shadow-lg: 0 16px 40px rgba(16,20,28,.14);
  --shadow-glow: 0 18px 44px -12px var(--glow-blue-soft);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --container: 1200px;
  --font: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --transition: 220ms cubic-bezier(.4,0,.2,1);
  --tilt-transition: transform 140ms ease-out;
  --tilt-perspective: 1000px;
}

:root[data-theme="dark"]{
  --color-bg: #0d1016;
  --color-surface: #151a23;
  --color-border: #262c38;
  --color-text: #eef1f6;
  --color-text-muted: #9aa3b2;
  --color-gray-100: #1a2029;
  --color-gray-200: #232a36;
  --color-blue-100: #132a4d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  --shadow-glow: 0 18px 50px -10px rgba(47,125,238,.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg: #0d1016;
    --color-surface: #151a23;
    --color-border: #262c38;
    --color-text: #eef1f6;
    --color-text-muted: #9aa3b2;
    --color-gray-100: #1a2029;
    --color-gray-200: #232a36;
    --color-blue-100: #132a4d;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 20px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
    --shadow-glow: 0 18px 50px -10px rgba(47,125,238,.35);
  }
}

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

body{
  margin:0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: var(--color-accent); text-decoration:none; }
a:hover{ color: var(--color-accent-hover); }

.container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{ line-height:1.15; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; }
h1{ font-size: clamp(2rem, 4vw, 3.25rem); font-weight:800; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h3{ font-size: 1.25rem; }
p{ margin:0 0 1em; color: var(--color-text-muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--color-accent); box-shadow: 0 0 8px var(--glow-blue); }

/* ---------- Keyframes ---------- */
@keyframes auroraFloat{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(28px,-22px) scale(1.08);} }
@keyframes spin360{ to{ transform: rotate(360deg); } }
@keyframes spin360Rev{ to{ transform: rotate(-360deg); } }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.7); } }
@keyframes floatChip{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: var(--radius-sm);
  font-weight:600; font-size:.95rem; cursor:pointer; border:2px solid transparent;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(135deg, var(--color-blue-600), var(--color-blue-500));
  color:#fff; box-shadow: 0 4px 18px -4px var(--glow-blue-soft);
}
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events:none;
}
.btn-primary:hover{ box-shadow: 0 10px 32px -6px var(--glow-blue); transform: translateY(-2px); }
.btn-primary:hover::after{ left:120%; }
.btn-outline{ background:transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover{ border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-blue-100); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 32px; font-size:1.02rem; }

/* ---------- Header / floating nav ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:80;
  padding: 14px 20px;
  pointer-events: none;
}
.floating-nav{
  pointer-events: auto;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:14px;
  width:100%; max-width: 820px; margin: 0 auto;
  padding: 9px 9px 9px 14px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}

/* Tartalom eltolása a lebegő nav alól — a főoldal hero-ján a nav közvetlenül a hero-n lebeg */
#main{ padding-top: 104px; }
#main:has(> .hero){ padding-top: 0; }
@media (max-width: 560px){
  #main{ padding-top: 92px; }
}

.brand-mark{ display:flex; align-items:center; justify-self:center; }
.brand-logo{ height:32px; width:auto; display:block; }
.brand-logo-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-logo-light{ display:none; }
  :root:not([data-theme="light"]) .brand-logo-dark{ display:block; }
}
:root[data-theme="dark"] .brand-logo-light{ display:none; }
:root[data-theme="dark"] .brand-logo-dark{ display:block; }

/* Nyelvválasztó — mobilon bal szélen, laptopon jobb szélen (ld. lejjebb a desktop média query-ben) */
.lang-switch{ position:relative; flex:none; justify-self:start; }
.lang-trigger{
  display:flex; align-items:center; gap:6px;
  background: var(--color-bg); border:1px solid var(--color-border); border-radius:999px;
  padding:9px 12px; cursor:pointer; font: inherit; font-weight:700; font-size:.78rem; letter-spacing:.03em;
  color: var(--color-text); transition: border-color var(--transition), color var(--transition);
}
.lang-trigger:hover{ border-color: var(--color-accent); color: var(--color-accent); }
.lang-caret{ color: var(--color-text-muted); transition: transform var(--transition); }
.lang-switch.open .lang-caret{ transform: rotate(180deg); }

.lang-menu{
  position:absolute; top: calc(100% + 10px); left:0; z-index:5;
  list-style:none; margin:0; padding:8px; min-width:190px;
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(-6px) scale(.98);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-option{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:0; border-radius: var(--radius-sm); cursor:pointer;
  padding:9px 10px; font: inherit; color: var(--color-text);
}
.lang-option:hover{ background: var(--color-gray-100); }
.lang-option-code{ font-weight:700; font-size:.8rem; width:2.4em; flex:none; }
.lang-option-name{ font-weight:500; font-size:.85rem; color: var(--color-text-muted); flex:1; }
.lang-option em{ font-style:normal; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--color-accent); background: var(--color-blue-100); padding:3px 7px; border-radius:999px; }
.lang-option.is-active .lang-option-code{ color: var(--color-accent); }
.lang-option.is-active .lang-option-name::after{ content:" ✓"; color: var(--color-accent); }

/* Menü hamburger + lenyíló panel */
.nav-toggle-wrap{ position:relative; flex:none; justify-self:end; }
.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background: var(--color-bg); border:1px solid var(--color-border); border-radius:999px;
  cursor:pointer; padding:12px; width:42px; height:42px;
}
.nav-toggle span{ display:block; width:16px; height:2px; background: var(--color-text); margin:2px 0; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-4px) rotate(-45deg); }

.nav-panel{
  position:absolute; top: calc(100% + 10px); right:0; z-index:5;
  width: min(300px, calc(100vw - 48px));
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 10px;
  opacity:0; visibility:hidden; transform: translateY(-8px) scale(.98);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-panel.open{ opacity:1; visibility:visible; transform:none; }
.nav-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.nav-links a{ display:block; padding:12px 12px; border-radius: var(--radius-sm); color: var(--color-text); font-weight:600; font-size:.95rem; }
.nav-links a:hover{ background: var(--color-gray-100); color: var(--color-accent); }
.nav-links a.active{ color: var(--color-accent); background: var(--color-blue-100); }
.nav-panel-actions{ margin-top:8px; padding-top:10px; border-top:1px solid var(--color-border); }

/* Termékek almenü (kategóriák) — mobilon mindig látszik a fő elem alatt behúzva */
.nav-item.has-sub{ display:flex; flex-direction:column; }
.nav-submenu{
  list-style:none; margin:2px 0 6px 14px; padding:0 0 0 10px;
  display:flex; flex-direction:column; gap:1px;
  border-left:2px solid var(--color-border);
}
.nav-submenu a{ display:block; padding:8px 10px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight:500; font-size:.86rem; }
.nav-submenu a:hover{ background: var(--color-gray-100); color: var(--color-accent); }

/* Sötét / világos mód kapcsoló */
.theme-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:none; border:0; cursor:pointer; padding:10px 12px; border-radius: var(--radius-sm);
  font: inherit; font-weight:600; font-size:.9rem; color: var(--color-text);
  margin-top:4px; padding-top:14px; border-top:1px solid var(--color-border);
}
.theme-toggle:hover{ background: var(--color-gray-100); }
.theme-toggle-track{
  width:38px; height:22px; border-radius:999px; background: var(--color-gray-200);
  position:relative; flex:none; transition: background var(--transition);
}
.theme-toggle-thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow: var(--shadow-sm); transition: transform var(--transition);
}
.theme-toggle[aria-pressed="true"] .theme-toggle-track{ background: var(--color-accent); }
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb{ transform: translateX(16px); }

@media (max-width: 560px){
  .site-header{ padding: 12px; }
  .floating-nav{ padding:8px 8px 8px 12px; }
  .nav-panel{ right:0; }
}

/* ---------- Laptop / desktop nézet: rendes, kiírt navigációs sáv, hamburger nélkül ---------- */
@media (min-width: 901px){
  .floating-nav{
    display:flex; align-items:center;
    max-width: 1260px; gap:16px; padding: 8px 10px 8px 18px;
  }
  /* Laptopon: logó bal szélen, nyelvválasztó jobb szélen (flex sorrend, grid helyett) */
  .brand-mark{ order:1; margin-right:auto; }
  .nav-toggle-wrap{ order:2; }
  .lang-switch{ order:3; }
  .lang-menu{ left:auto; right:0; }

  /* Hamburger gomb elrejtve, a menü mindig nyitva/inline */
  .nav-toggle{ display:none; }
  .nav-toggle-wrap{ display:flex; align-items:center; gap:18px; }
  .nav-panel{
    position:static; width:auto; max-width:none;
    opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; padding:0;
    display:flex; align-items:center; gap:18px;
  }
  .nav-links{ flex-direction:row; align-items:center; gap:0; }
  .nav-links a{ padding:9px 9px; font-size:.84rem; white-space:nowrap; }
  .nav-panel-actions{ margin:0; padding:0; border:0; }
  .nav-panel-actions .btn-block{ width:auto; }

  /* Sötét/világos mód kapcsoló — kompakt, ikon-szerű forma a sávban */
  .theme-toggle{ width:auto; margin:0; padding:0; border:0; background:none; flex-direction:row; gap:8px; }
  .theme-toggle > span:first-child{ display:none; }

  /* Termékek almenü — asztali nézetben lenyíló panel hoverre/fókuszra */
  .nav-item.has-sub{ position:relative; flex-direction:row; }
  .nav-item.has-sub > .nav-submenu{
    position:absolute; top:calc(100% + 10px); left:0; z-index:5;
    flex-direction:column; margin:0; padding:8px; min-width:210px;
    border-left:0; background: var(--color-surface); border:1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    opacity:0; visibility:hidden; transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav-item.has-sub:hover > .nav-submenu,
  .nav-item.has-sub:focus-within > .nav-submenu{ opacity:1; visibility:visible; transform:none; }
  .nav-item.has-sub > .nav-submenu a{ font-size:.88rem; padding:9px 10px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47,125,238,.22), transparent 60%),
    url("../img/bg-hex-pattern.jpg") center/cover no-repeat,
    linear-gradient(180deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
  color:#fff;
  padding: 100px 0 90px;
}
.hero::before, .hero::after{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  filter: blur(100px); opacity:.32; z-index:0; pointer-events:none;
}
.hero::before{ background: var(--color-blue-500); top:-180px; right:-100px; animation: auroraFloat 15s ease-in-out infinite; }
.hero::after{ background: var(--color-cyan); bottom:-220px; left:-120px; animation: auroraFloat 19s ease-in-out infinite reverse; }
.hero-bg-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; }
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(6,9,16,.86) 0%, rgba(6,9,16,.68) 32%, rgba(6,9,16,.32) 54%, transparent 74%);
}
@media (max-width: 860px){
  .hero-scrim{ background: linear-gradient(180deg, rgba(6,9,16,.82) 0%, rgba(6,9,16,.6) 55%, rgba(6,9,16,.4) 100%); }
}
.hero .container{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.hero h1{ color:#fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero .eyebrow{ text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero p.lead{ color: #c4cbda; font-size: 1.15rem; max-width: 46ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px; }

.hero-visual{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-lg), 0 0 60px -20px var(--glow-blue);
  border: 1px solid rgba(255,255,255,.14);
  aspect-ratio: 4/3;
  background: linear-gradient(135deg,#1b2130,#0b0e15);
  transition: var(--tilt-transition);
  transform-style: preserve-3d;
}
.hero-visual-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hv-chip{
  position:absolute; z-index:2; display:flex; align-items:center; gap:8px;
  background: rgba(21,26,35,.65); border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius:999px; padding:8px 14px; font-size:.78rem; font-weight:600; color:#dde3ee;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
  animation: floatChip 5s ease-in-out infinite;
}
.hv-dot{ width:7px; height:7px; border-radius:50%; background: var(--color-cyan); box-shadow: 0 0 10px var(--color-cyan); animation: pulseDot 2s ease-in-out infinite; flex:none; }
.hv-chip-1{ top:10%; left:8%; animation-delay:.2s; }
.hv-chip-2{ bottom:16%; right:8%; animation-delay:1.1s; }
.hv-chip-3{ bottom:10%; left:12%; animation-delay:.6s; }
.hero-stats{ display:flex; gap:32px; margin-top:46px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size:1.6rem; color:#fff; }
.hero-stat span{ color:#9aa3b7; font-size:.85rem; }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: minmax(0, 1fr); gap:28px; }
  .hero-grid > *{ min-width:0; }
  .hero{ padding: 108px 0 40px; text-align:left; }
  /* Kevesebb effekt mobilon/tableten: gyorsabb betöltés, tisztább (nem "homályos") háttér */
  .hero::before, .hero::after{ display:none; }
  .hero-bg-canvas{ display:none; }
  .hero p.lead{ max-width:none; }
  .hero-actions{ margin-top:18px; }
  /* Statisztika-sáv: vízszintes görgetés, hogy ne törje sorokra és ne nyújtsa meg a hero-t */
  .hero-stats{
    flex-wrap:nowrap; overflow-x:auto; gap:26px; margin-top:26px;
    padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent);
  }
  .hero-stats::-webkit-scrollbar{ display:none; }
  .hero-stat{ flex:none; white-space:nowrap; }
  .hero-visual{ aspect-ratio:16/10; margin-top:0; }
}
@media (max-width: 560px){
  .hero{ padding-top: 92px; padding-bottom:32px; }
  .hero h1{ font-size:1.8rem; line-height:1.2; }
  .hero p.lead{ font-size:.95rem; }
  .hero-stat b{ font-size:1.3rem; }
  .hero-stat span{ font-size:.78rem; }
}

/* ---------- Görgetésjelző ---------- */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; z-index:2; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:.75; text-decoration:none; pointer-events:none;
  animation: scrollCueFloat 2.6s ease-in-out infinite;
}
.scroll-cue-mouse{
  width:24px; height:38px; border-radius:14px; border:2px solid rgba(255,255,255,.45);
  position:relative;
}
.scroll-cue-wheel{
  position:absolute; top:6px; left:50%; width:4px; height:8px; border-radius:2px;
  background: var(--color-cyan); box-shadow: 0 0 8px var(--glow-cyan);
  transform:translateX(-50%);
  animation: scrollCueWheel 1.7s ease-in-out infinite;
}
@keyframes scrollCueFloat{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(6px); } }
@keyframes scrollCueWheel{ 0%{ opacity:1; top:6px; } 70%{ opacity:0; top:20px; } 100%{ opacity:0; top:6px; } }
@media (max-width: 560px){ .scroll-cue{ display:none; } }

/* ---------- Sections ---------- */
.section{ padding: 88px 0; }
.section-tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-alt{ position:relative; background: var(--color-surface); }
.section-alt::before, .section-alt::after{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(720px, 82%); height:1px; z-index:1;
  background: linear-gradient(90deg, transparent, var(--color-accent) 50%, transparent);
  box-shadow: 0 0 16px 1px var(--glow-blue), 0 0 2px var(--glow-blue-soft);
}
.section-alt::after{ top:auto; bottom:0; }

.reveal{
  opacity:0; transform: translateY(34px) scale(.98);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* Lépcsőzetes megjelenés grid-elemeknél és section-head szövegeknél */
.grid > .reveal:nth-child(1),.why-grid > .reveal:nth-child(1){ transition-delay: 0ms; }
.grid > .reveal:nth-child(2),.why-grid > .reveal:nth-child(2){ transition-delay: 90ms; }
.grid > .reveal:nth-child(3),.why-grid > .reveal:nth-child(3){ transition-delay: 180ms; }
.grid > .reveal:nth-child(4),.why-grid > .reveal:nth-child(4){ transition-delay: 270ms; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap: 24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

/* ---------- Vízszintesen görgethető kártyasor (kategóriák, blog, termékek mobilon/tableten) ---------- */
@media (max-width: 860px){
  .hscroll{
    display:flex; flex-wrap:nowrap; align-items:stretch; gap:16px;
    overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0 -20px; padding:4px 20px 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 20px, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, black 20px, black calc(100% - 28px), transparent);
  }
  .hscroll::-webkit-scrollbar{ display:none; }
  .hscroll > *{ flex: 0 0 78%; scroll-snap-align:start; min-width:0; }
}
@media (max-width: 480px){
  .hscroll > *{ flex-basis: 86%; }
}

.card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 28px; transition: var(--tilt-transition), box-shadow var(--transition), border-color var(--transition);
  transform-style: preserve-3d; will-change: transform;
}
.card:hover{ box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: var(--color-blue-500); }
.card .icon{
  width:48px; height:48px; border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--color-blue-100), var(--color-blue-500) 160%);
  color: var(--color-accent);
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px; font-size: 1.1rem; font-weight:800;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 6px 16px -6px var(--glow-blue-soft);
}
:root[data-theme="dark"] .card .icon{ color:#fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.15), 0 6px 16px -6px var(--glow-blue); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card .icon{ color:#fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.15), 0 6px 16px -6px var(--glow-blue); } }

.category-card{
  display:block; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  overflow:hidden; transition: var(--tilt-transition), box-shadow var(--transition), border-color var(--transition);
  transform-style: preserve-3d; will-change: transform;
}
.category-card:hover{ box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: var(--color-blue-500); }
.category-card .thumb, .product-card .thumb{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 15% 0%, var(--color-blue-100), transparent 55%),
    linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
  color: var(--color-text-muted); font-size:.85rem;
}
.category-card .thumb{ aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center; }
.category-card .thumb::before, .product-card .thumb::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image: linear-gradient(rgba(11,95,215,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(11,95,215,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);
}
.category-card .thumb::after, .product-card .thumb::after{
  content:""; position:absolute; z-index:-1; width:58%; padding-top:58%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg);
  border-radius:50%; border:1.5px dashed var(--color-blue-500); opacity:.4; animation: spin360 24s linear infinite;
}
.category-card .body{ padding: 22px; }
.category-card .body h3{ color: var(--color-text); margin-bottom:6px; }
.category-card .body p{ margin:0 0 14px; font-size:.92rem; }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 14px; }
.tag{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background: var(--color-blue-100); color: var(--color-accent); padding:4px 10px; border-radius:999px; }

.product-card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 20px; transition: var(--tilt-transition), box-shadow var(--transition), border-color var(--transition);
  transform-style: preserve-3d; will-change: transform;
}
.product-card:hover{ box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: var(--color-blue-500); }
.product-card .thumb{ aspect-ratio:4/3; border-radius: var(--radius-sm); margin-bottom:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-card .thumb::after{ width:46%; padding-top:46%; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }

.product-photo{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius: var(--radius-lg);
  border:1px solid var(--color-border); box-shadow: var(--shadow-md);
  margin-bottom:8px;
}
.product-photo-credit{ font-size:.75rem; color: var(--color-text-muted); margin:0 0 32px; }
.product-card h4{ margin:0 0 4px; font-size:1.05rem; }
.product-card .model{ font-size:.78rem; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.product-card .specs{ list-style:none; margin:0 0 16px; padding:0; font-size:.85rem; color: var(--color-text-muted); }
.product-card .specs li{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--color-border); }
.product-card .actions{ display:flex; gap:10px; }
.product-card .actions .btn{ flex:1; padding:11px 14px; font-size:.85rem; }

/* Önálló (nem product-card-on belüli) specifikáció-lista, pl. adatlap oldalakon */
.specs{ list-style:none; margin:0; padding:0; font-size:.9rem; }
.specs li{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--color-border); }
.specs li:first-child{ border-top:0; }
.specs li span:first-child{ color: var(--color-text-muted); }
.specs li span:last-child{ font-weight:600; text-align:right; }

/* ---------- Why us ---------- */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
@media (max-width: 980px){ .why-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr;} }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(120deg, var(--color-blue-700), var(--color-blue-600) 55%, var(--color-cyan) 160%);
  color:#fff; border-radius: var(--radius-lg); padding: 56px; text-align:center;
  box-shadow: 0 30px 70px -24px var(--glow-blue);
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.3;
  background-image: url("../img/bg-hex-pattern.jpg");
  background-size: cover; background-position: center;
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; }
.cta-band p{ color: #dbe7ff; max-width: 56ch; margin-left:auto; margin-right:auto; }
.cta-band .btn-primary{ background:#fff; color: var(--color-blue-700); box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); }
.cta-band .btn-primary::after{ background: linear-gradient(120deg, transparent, rgba(10,79,176,.18), transparent); }
.cta-band .btn-primary:hover{ background:#eef4ff; }
.cta-band .btn-outline{ border-color: rgba(255,255,255,.5); color:#fff; }
.cta-band .btn-outline:hover{ border-color:#fff; box-shadow:none; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size:.85rem; color: var(--color-text-muted); padding: 20px 0 0; }
.breadcrumbs a{ color: var(--color-text-muted); }
.breadcrumbs a:hover{ color: var(--color-accent); }
.breadcrumbs .sep{ margin: 0 6px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item summary{ cursor:pointer; padding: 18px 4px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color: var(--color-accent); transition: transform var(--transition); }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ padding: 0 4px 18px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns: minmax(0,1fr); } }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full{ grid-column: 1 / -1; }
label{ font-size:.85rem; font-weight:600; color: var(--color-text); }
input, select, textarea{
  width:100%; min-width:0;
  font-family: inherit; font-size:.95rem; padding: 12px 14px; border-radius: var(--radius-sm);
  border:1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-blue-100);
}
textarea{ resize: vertical; min-height: 120px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color: var(--color-text-muted); }
.checkbox-row input{ width:18px; height:18px; margin-top:2px; padding:0; }
.form-note{ font-size:.78rem; color: var(--color-text-muted); margin-top: 10px; }
.form-status{ font-size:.9rem; font-weight:600; margin-top:14px; display:none; padding:12px 14px; border-radius: var(--radius-sm); }
.form-status.visible{ display:block; }
.form-status.success{ background:#e7f6ec; color:#1b7a3d; }
.form-status.error{ background:#fdeceb; color:#c0392b; }
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- Video ---------- */
.video-embed{ position:relative; aspect-ratio:16/9; border-radius: var(--radius-md); overflow:hidden; background:#000; box-shadow: var(--shadow-md), var(--shadow-glow); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-gray-900); color:#c4cbda; padding: 64px 0 28px; margin-top: 80px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }
.site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:16px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-brand{ display:inline-block; margin-bottom:14px; }
.footer-logo{ height:38px; width:auto; display:block; }
.footer-brand-tag{ color:#9aa3b7; font-size:.9rem; max-width:32ch; margin:0; }
.site-footer a{ color:#9aa3b7; font-size:.9rem; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid #232a36; margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#6b7386; }

/* ---------- Térkép szekció (Kapcsolat oldal) ---------- */
.map-section{
  padding:0; overflow:hidden; display:grid; grid-template-columns: 1fr 1.15fr; align-items:stretch;
}
.map-section-info{ padding:40px; display:flex; flex-direction:column; }
.map-section-info .contact-link{ padding:12px 0; border-top:1px solid var(--color-border); }
.map-section-info .contact-link:first-of-type{ border-top:0; }
.map-embed{ position:relative; min-height:340px; background: var(--color-gray-100); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width: 780px){
  .map-section{ grid-template-columns: 1fr; }
  .map-embed{ min-height:280px; order:-1; }
}

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }
.badge-stock{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin:0 0 12px; }
.badge-stock.in{ background:#e7f6ec; color:#1b7a3d; }
.badge-stock.order{ background:#fef3e2; color:#a5680b; }
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 16px; z-index:100; }
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Segítség-fül (call-to-action widget) ---------- */
.help-widget{ position:fixed; z-index:85; right:0; top:62%; transform:translateY(-50%); }
.help-tab{
  display:flex; align-items:center; gap:9px;
  background: var(--color-accent); color:#fff; border:0; cursor:pointer;
  padding:15px 20px 15px 16px; border-radius: 999px 0 0 999px;
  font: inherit; font-weight:700; font-size:.85rem; white-space:nowrap;
  box-shadow: var(--shadow-lg), 0 0 24px -8px var(--glow-blue);
  transition: background var(--transition), padding-right var(--transition), transform var(--transition);
}
.help-tab:hover{ background: var(--color-accent-hover); padding-right:26px; }
.help-tab-icon{ flex:none; display:flex; }
.help-widget.open .help-tab{ opacity:0; visibility:hidden; pointer-events:none; }

.help-panel{
  position:absolute; right:0; top:50%;
  transform: translateY(-50%) translateX(16px) scale(.95);
  width:min(320px, calc(100vw - 24px));
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:24px;
  opacity:0; visibility:hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.help-widget.open .help-panel{ opacity:1; visibility:visible; transform: translateY(-50%) translateX(0) scale(1); }
.help-panel-close{
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%;
  border:0; background: var(--color-gray-100); color: var(--color-text); cursor:pointer;
  font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.help-panel-close:hover{ background: var(--color-gray-200); }
.help-panel h3{ margin:0 6px 8px 0; font-size:1.05rem; line-height:1.3; }
.help-panel p{ margin:0 0 18px; font-size:.86rem; color: var(--color-text-muted); line-height:1.55; }
.help-contact-link{
  display:flex; align-items:center; gap:12px; padding:9px 6px; margin:0 -6px 2px; border-radius: var(--radius-sm);
  color: var(--color-text); font-size:.85rem; line-height:1.4;
}
.help-contact-link:hover{ background: var(--color-gray-100); }
.help-contact-link strong{ display:block; font-size:.82rem; }
.help-contact-link span.help-contact-text{ font-weight:600; color: var(--color-text-muted); }
.help-contact-icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:50%; background: var(--color-blue-100); color: var(--color-accent);
}
.help-panel .btn-block{ margin-top:14px; }

@media (max-width:640px){
  .help-widget{ top:58%; }
  .help-tab span{ display:none; }
  .help-tab{ padding:14px; border-radius:50%; box-shadow: var(--shadow-lg), 0 0 24px -8px var(--glow-blue); }
  .help-tab:hover{ padding-right:14px; }
}

/* ---------- Cookie banner ---------- */
.btn-sm{ padding:9px 16px; font-size:.85rem; }
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  max-width:640px; margin:0 auto;
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding:20px 22px;
  transform: translateY(140%); opacity:0; visibility:hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease, visibility .5s;
}
.cookie-banner.visible{ transform:none; opacity:1; visibility:visible; }
.cookie-banner-inner{ display:flex; flex-direction:column; gap:14px; }
.cookie-banner p{ margin:0; font-size:.85rem; color: var(--color-text-muted); }
.cookie-banner-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
@media (max-width:560px){
  .cookie-banner{ left:10px; right:10px; bottom:10px; padding:16px; }
  .cookie-banner-actions{ justify-content:stretch; }
  .cookie-banner-actions .btn{ flex:1; }
}