/* ============================================================
   Szabitrans — shared site stylesheet (site.css)
   Single source of truth for tokens, base, header/nav, footer,
   buttons and shared components. Extracted from the original
   homepage <style> so every page renders with the same design.
   Page-specific layout (breadcrumbs, article prose, sub-hero)
   lives in page.css.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --bg:           #4a4a4a;   /* primary charcoal           */
  --surface:      #3a3a3a;   /* cards / secondary surface  */
  --surface-2:    #424242;   /* slightly lighter section   */
  --footer:       #2a2a2a;   /* footer                     */
  --accent:       #cc1f1f;   /* brand red                  */
  --accent-hover: #e23030;   /* red hover                  */
  --accent-dark:  #a01818;   /* pressed red                */
  --text:         #ffffff;   /* text on dark               */
  --text-soft:    #e0e0e0;   /* light contrast text        */
  --text-muted:   #b0b0b0;   /* muted captions             */
  --border:       #5a5a5a;   /* hairline borders           */
  --ok:           #36b34a;   /* success green              */

  --maxw: 1200px;
  --radius: 6px;
  --radius-lg: 12px;
  --gap: clamp(1.25rem, 3vw, 2rem);
  --section-pad: clamp(4rem, 9vw, 7rem);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.45);

  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Roboto Condensed', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
html{background:#2a2a2a;scrollbar-gutter:stable}   /* dark base + állandó görgősáv-hely → nincs „rángás" a betöltés végén */
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  font-family:var(--font-body);
  background:transparent;                        /* a fix háttérvideó látszik át mindenhol, egységesen */
  color:var(--text-soft);
  line-height:1.65;
  font-size:1.05rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--text);
  line-height:1.08;
  font-weight:500;            /* brand: big titles are light, not heavy Oswald-700 */
  letter-spacing:-.01em;      /* brand: tight tracking, not the old +.5px */
  overflow-wrap:break-word;
  word-break:break-word;
}
p,a,span,li{overflow-wrap:break-word}
:focus-visible{
  outline:3px solid var(--accent-hover);
  outline-offset:3px;
  border-radius:3px;
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.section{padding-block:var(--section-pad)}
.section-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head .eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--accent-hover);
  font-size:var(--fs-eyebrow);
  margin-bottom:.75rem;
}
.section-head h2{
  font-size:clamp(2rem,5vw,3.25rem);
  text-transform:uppercase;
}
.section-head h2 .accent{color:var(--accent)}
.section-head .lead{
  max-width:56ch;margin:1rem auto 0;color:var(--text-soft);
  font-size:var(--fs-lead);line-height:1.55;
}
.title-rule{
  width:70px;height:4px;background:var(--accent);
  margin:1.25rem auto 0;border-radius:2px;
}

/* skip link */
.skip-link{
  position:absolute;left:50%;top:-60px;transform:translateX(-50%);
  background:var(--accent);color:#fff;padding:.7rem 1.25rem;border-radius:0 0 6px 6px;
  z-index:2000;font-family:var(--font-head);transition:top .25s var(--ease);
}
.skip-link:focus{top:0}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-head);font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;font-size:.95rem;
  padding:.95rem 2rem;border-radius:var(--radius);
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
  position:relative;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-primary:active{background:var(--accent-dark);transform:translateY(-1px)}
.btn-outline{border:2px solid var(--accent);color:#fff;padding:.85rem 1.9rem}
.btn-outline:hover{background:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:1100;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(42,42,42,.95);                 /* darker / more opaque at top */
  border-bottom:1px solid transparent;will-change:transform;
  transition:transform .28s cubic-bezier(.4,0,.2,1),background .3s ease,box-shadow .3s ease,border-color .3s ease,height .35s var(--ease);
}
.header.nav-hidden{transform:translateY(-100%)}
/* (.scrolled állapot eltávolítva — a fejléc SOHA nem változik: egyszerű szürke sáv,
    ami csak felcsúszik lefelé görgetéskor. Így nincs hirtelen sötét/világos váltás.) */
.header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.brand{display:flex;align-items:center;line-height:1}
.brand .brand-logo{
  height:46px;width:auto;display:block;
  transition:height .35s var(--ease);
}
.header.scrolled .brand .brand-logo{height:38px}
@media (max-width:480px){.brand .brand-logo{height:38px}}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  font-family:var(--font-head);font-weight:500;letter-spacing:1px;
  text-transform:uppercase;font-size:.95rem;color:var(--text-soft);
  padding:.55rem .9rem;border-radius:var(--radius);position:relative;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.35rem;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:#fff}

.hamburger{
  display:none;width:44px;height:44px;border-radius:var(--radius);
  position:relative;flex:none;z-index:1100;
}
.hamburger span{
  position:absolute;left:11px;right:11px;height:2.5px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease),top .3s var(--ease);
}
.hamburger span:nth-child(1){top:15px}
.hamburger span:nth-child(2){top:21px}
.hamburger span:nth-child(3){top:27px}
.hamburger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--header-h) + 1rem);padding-bottom:2.5rem;overflow:hidden;
  background:#3a3a3a;                              /* fallback under the video */
}
/* (Fix 4) old diagonal stripes, warning tape and red glow overlays removed — video is the only background now. */
/* ---- Hero layout: centered column + right-side rotating logo ---- */
.hero-inner{
  width:100%;max-width:1200px;margin:0 auto;padding:6rem 2rem 3rem;
  display:flex;align-items:center;justify-content:center;gap:3rem;position:relative;z-index:3;
}
.hero .hero-center-column{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .hero-main-logo{
  width:clamp(260px,38vw,480px);height:auto;background:transparent;mix-blend-mode:normal;
  margin-bottom:.8rem;filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
.hero .hero-tagline{
  font-size:clamp(.9rem,1.8vw,1.25rem);font-weight:700;letter-spacing:.05em;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8);margin-bottom:1.6rem;
}
.hero .hero-headline{
  /* type (size/weight/line-height/letter-spacing/margin) lives in ONE place: the
     HERO REFRESH PASS rule at the end of this file. Here only colour + casing. */
  color:#fff;text-transform:none;
}
.hero .hero-sub{
  font-size:clamp(.95rem,1.6vw,1.15rem);color:#e0e0e0;line-height:1.6;margin-bottom:2rem;
}
.hero .hero-cta-group{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hero .hero-logo-switcher-col{flex-shrink:0;display:flex;align-items:center;justify-content:center}
@media (max-width:768px){
  .hero-inner{flex-direction:column;padding:5rem 1.5rem 2.5rem;gap:2rem}
  .hero .hero-logo-switcher-col{order:3}
}

/* ---- LOGO SWITCHER ---- */
.logo-switcher{display:flex;flex-direction:column;align-items:center;gap:1.25rem;cursor:pointer}
.logo-circle{
  --size:clamp(220px,30vw,340px);
  width:var(--size);height:var(--size);position:relative;border-radius:50%;
  transform-style:preserve-3d;transition:transform .7s var(--ease);
  /* decorative double red ring, echoing the emblem design */
  box-shadow:
    0 0 0 6px var(--accent),
    0 0 0 11px var(--bg),
    0 0 0 13px rgba(204,31,31,.55),
    0 22px 50px rgba(0,0,0,.5);
}
.logo-switcher:hover .logo-circle{transform:scale(1.04)}
.logo-switcher.flip .logo-circle{transform:rotateY(180deg)}
.logo-switcher:hover.flip .logo-circle{transform:rotateY(180deg) scale(1.04)}
.logo-face{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#fff;
}
.logo-face.back{transform:rotateY(180deg)}
.logo-face img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* styled placeholder shown if a logo image fails to load */
.logo-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:1.5rem;gap:.35rem;background:var(--surface);color:#fff;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;
}
.logo-fallback[hidden]{display:none}
.logo-fallback .fb-name{font-size:1.4rem;font-weight:700;line-height:1.05}
.logo-fallback .fb-sub{font-size:.7rem;letter-spacing:2px;color:var(--accent-hover)}
/* shine sweep on the glass */
.logo-circle::after{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 45%);
}
.logo-dots{display:flex;gap:.6rem;align-items:center}
.logo-dots button{
  width:11px;height:11px;border-radius:50%;background:var(--border);
  transition:background .3s var(--ease),transform .3s var(--ease);padding:0;
}
.logo-dots button.active{background:var(--accent);transform:scale(1.25)}
.logo-dots button:hover{background:var(--accent-hover)}
.logo-hint{
  font-family:var(--font-head);letter-spacing:1.5px;text-transform:uppercase;
  font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem;
}
.logo-hint svg{width:14px;height:14px;stroke:var(--accent)}
@media (prefers-reduced-motion: reduce){
  .logo-switcher.flip .logo-circle{transform:none}
}

.hero .badge{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--accent);color:var(--accent-hover);
  font-family:var(--font-head);letter-spacing:2px;text-transform:uppercase;
  font-size:.8rem;padding:.4rem 1rem;border-radius:50px;margin-bottom:1.5rem;
  background:rgba(204,31,31,.08);
}
.hero .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero h1{
  font-size:clamp(2.4rem,6.5vw,4.75rem);
  text-transform:uppercase;line-height:1.02;
}
.hero h1 .accent{color:var(--accent);display:inline-block}
.hero .subtitle{
  font-size:clamp(1.15rem,2.4vw,1.6rem);
  color:var(--text-soft);margin-top:1.4rem;max-width:52ch;font-weight:400;
}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}

.hero .scroll-cue{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;
  color:var(--text-muted);font-family:var(--font-head);letter-spacing:2px;
  font-size:.75rem;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:.4rem;
}
.hero .scroll-cue .mouse{
  width:24px;height:38px;border:2px solid var(--text-muted);border-radius:14px;position:relative;
}
.hero .scroll-cue .mouse::after{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:4px;height:7px;border-radius:2px;background:var(--accent);
  animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{0%{opacity:0;top:6px}40%{opacity:1}80%{opacity:0;top:18px}100%{opacity:0}}
/* hide the scroll cue where it would overlap the hero text (short or narrow screens) */
@media (max-height:780px),(max-width:600px){.hero .scroll-cue{display:none}}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
/* Bidirectional scroll-reveal: elements animate in when entering the viewport and
   reset when leaving, so scrolling up then down re-triggers the animation.
   Hidden state is gated by .js so the page is never blank without JavaScript.
   will-change avoids iOS Safari compositing glitches. */
.js .reveal,.js .reveal-left,.js .reveal-right{will-change:opacity,transform;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal{opacity:0;transform:translateX(-36px)}      /* finom, balról besuhanó megjelenés */
.js .reveal-left{opacity:0;transform:translateX(-36px)}
.js .reveal-right{opacity:0;transform:translateX(36px)}
/* higher specificity than the hide rules above so the revealed state always wins the cascade */
.js .reveal.visible,.js .reveal-left.visible,.js .reveal-right.visible{opacity:1;transform:translate(0)}

/* ============================================================
   ABOUT / TIMELINE
   ============================================================ */
#rolunk{background:var(--bg)}
.about-intro{max-width:62ch;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center;color:var(--text-soft);font-size:1.15rem}
.about-intro strong{color:#fff}

.timeline{position:relative;max-width:920px;margin-inline:auto}
.timeline::before{
  content:"";position:absolute;top:0;bottom:0;left:24px;width:3px;
  background:linear-gradient(var(--accent),var(--border));border-radius:2px;
}
.t-item{position:relative;padding:0 0 2.75rem 70px}
.t-item:last-child{padding-bottom:0}
.t-dot{
  position:absolute;left:13px;top:4px;width:26px;height:26px;border-radius:50%;
  background:var(--accent);border:4px solid var(--bg);box-shadow:0 0 0 3px var(--accent);
  z-index:2;
}
.t-dot::after{
  content:"";position:absolute;inset:6px;border-radius:50%;background:#fff;opacity:.9;
}
.t-card{
  background:var(--surface);border-radius:var(--radius-lg);padding:1.5rem 1.75rem;
  border-left:4px solid var(--accent);box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.t-card:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
.t-year{font-family:var(--font-head);font-weight:700;color:var(--accent-hover);font-size:1.5rem;letter-spacing:1px}
.t-card h3{font-size:1.25rem;margin:.15rem 0 .5rem;text-transform:uppercase}
.t-card p{color:var(--text-muted);font-size:1.02rem}

/* desktop alternating layout */
@media (min-width:860px){
  .timeline::before{left:50%;transform:translateX(-50%)}
  .t-item{width:50%;padding:0 0 3rem 0}
  .t-item:nth-child(odd){left:0;padding-right:48px;text-align:right}
  .t-item:nth-child(even){left:50%;padding-left:48px}
  .t-dot{left:auto}
  .t-item:nth-child(odd) .t-dot{right:-13px;left:auto}
  .t-item:nth-child(even) .t-dot{left:-13px}
  .t-item:nth-child(odd) .t-card{border-left:none;border-right:4px solid var(--accent)}
  .t-item:nth-child(odd) .t-card:hover{transform:translateX(-6px)}
}

/* ============================================================
   SERVICES
   ============================================================ */
#szolgaltatasok{background:linear-gradient(var(--bg),var(--surface-2))}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards-grid{grid-template-columns:1fr}}

.service-card{
  background:var(--surface);border-radius:var(--radius-lg);padding:2rem 1.75rem;
  border:1px solid var(--border);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.service-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{
  width:64px;height:64px;border-radius:14px;display:grid;place-items:center;
  background:rgba(204,31,31,.12);border:1px solid rgba(204,31,31,.4);margin-bottom:1.25rem;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.service-card:hover .service-icon{background:var(--accent);transform:rotate(-6deg) scale(1.05)}
.service-icon svg{width:34px;height:34px;stroke:var(--accent);transition:stroke .3s var(--ease)}
.service-card:hover .service-icon svg{stroke:#fff}
.service-card h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:.6rem}
.service-card p{color:var(--text-muted);font-size:1.02rem}
.service-card .num{
  position:absolute;top:1.25rem;right:1.5rem;font-family:var(--font-head);
  font-size:2.5rem;font-weight:700;color:rgba(255,255,255,.05);line-height:1;
}

/* ============================================================
   ÉPÍTŐANYAG PONT
   ============================================================ */
#epitoanyag-pont{background:#2a2a2a;position:relative;overflow:hidden;isolation:isolate;z-index:1}
/* (Fix 7) gray diagonal stripe background removed — replaced by video background */
.ep-emblem{
  width:150px;height:150px;border-radius:50%;margin:0 auto 1.5rem;
  border:5px solid var(--accent);background:var(--surface);
  display:grid;place-items:center;text-align:center;position:relative;
  box-shadow:var(--shadow-md);overflow:hidden;
}
.ep-emblem img{width:100%;height:100%;object-fit:cover}
.ep-emblem .fallback{padding:1rem}
.ep-emblem .fallback .e1{font-family:var(--font-head);font-weight:700;color:#fff;font-size:1.1rem;letter-spacing:1px;line-height:1}
.ep-emblem .fallback .e2{font-family:var(--font-head);font-weight:700;color:var(--accent-hover);font-size:1.3rem;letter-spacing:1px}
.ep-emblem .fallback .e3{font-size:.6rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-top:2px}

.ep-badge{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#fff;
  font-family:var(--font-head);font-weight:600;letter-spacing:2px;text-transform:uppercase;
  font-size:.85rem;padding:.45rem 1.1rem;border-radius:50px;box-shadow:var(--shadow-sm);
}
.ep-badge .pulse{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulseRing 1.8s infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.ep-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;position:relative;z-index:1}
@media (max-width:880px){.ep-grid{grid-template-columns:1fr}}
.ep-text h3{font-size:clamp(1.6rem,3vw,2.25rem);text-transform:uppercase;margin:.75rem 0 1rem}
.ep-text .ep-sub{color:var(--accent-hover);font-family:var(--font-head);font-size:1.2rem;letter-spacing:1px;margin-bottom:1rem;text-transform:uppercase}
.ep-text p{color:var(--text-soft);margin-bottom:1rem;font-size:1.08rem}
.ep-text .ep-feats{display:flex;flex-direction:column;gap:.65rem;margin-top:1.5rem}
.ep-text .ep-feats li{display:flex;align-items:center;gap:.7rem;color:var(--text-soft)}
.ep-text .ep-feats svg{width:22px;height:22px;flex:none;stroke:var(--accent)}

.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:480px){.product-grid{grid-template-columns:1fr}}
.product-card{
  background:var(--surface);border-radius:var(--radius);padding:1.4rem;
  border:1px solid var(--border);border-top:3px solid var(--accent);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.product-card{transition:transform .3s ease,box-shadow .3s ease}
.product-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 32px rgba(204,31,31,.25)}
.product-card .pc-icon{width:44px;height:44px;border-radius:10px;background:rgba(204,31,31,.14);display:grid;place-items:center;margin-bottom:.85rem}
.product-card .pc-icon svg{width:24px;height:24px;stroke:var(--accent-hover)}
.product-card h4{font-size:1.1rem;text-transform:uppercase;margin-bottom:.4rem}
.product-card p{color:var(--text-muted);font-size:.95rem;line-height:1.5}

/* ============================================================
   WHY US
   ============================================================ */
#miert-mi{background:var(--bg)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media (max-width:860px){.usp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.usp-grid{grid-template-columns:1fr}}
.usp{
  text-align:center;padding:2rem 1.25rem;background:var(--surface);
  border-radius:var(--radius-lg);border:1px solid var(--border);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.usp:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.usp-icon{
  width:72px;height:72px;margin:0 auto 1.1rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(204,31,31,.12);border:2px solid var(--accent);
}
.usp-icon svg{width:36px;height:36px;stroke:var(--accent)}
.usp .stat{font-family:var(--font-head);font-weight:700;font-size:2.4rem;color:#fff;line-height:1;margin-bottom:.25rem}
.usp .stat .accent{color:var(--accent)}
.usp h3{font-size:1.1rem;text-transform:uppercase;margin-bottom:.5rem}
.usp p{color:var(--text-muted);font-size:.98rem}

/* ============================================================
   CONTACT
   ============================================================ */
#kapcsolat{background:linear-gradient(var(--bg),var(--surface))}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (max-width:840px){.contact-grid{grid-template-columns:1fr}}

.contact-info .info-item{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}
.contact-info .info-item .ii-icon{
  width:52px;height:52px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--accent);box-shadow:var(--shadow-sm);
}
.contact-info .info-item .ii-icon svg{width:26px;height:26px;stroke:#fff}
.contact-info .info-item h3{font-size:1.05rem;text-transform:uppercase;margin-bottom:.15rem;color:#fff}
.contact-info .info-item p,.contact-info .info-item a{color:var(--text-soft);font-size:1.05rem}
.contact-info .info-item a:hover{color:var(--accent-hover)}
.contact-info .placeholder{color:var(--text-muted);font-style:italic}

.map-embed{
  margin-top:1.5rem;border-radius:var(--radius-lg);overflow:hidden;height:230px;
  border:1px solid var(--border);position:relative;
  background:
    linear-gradient(rgba(42,42,42,.55),rgba(42,42,42,.55)),
    repeating-linear-gradient(0deg,#4f4f4f 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,#4f4f4f 0 1px,transparent 1px 42px),
    var(--surface);
}
.map-embed .road{position:absolute;background:#5e5e5e}
.map-embed .road.r1{top:40%;left:-5%;right:-5%;height:14px;transform:rotate(-8deg)}
.map-embed .road.r2{top:-10%;bottom:-10%;left:60%;width:14px;transform:rotate(12deg)}
.map-embed .pin{
  position:absolute;top:42%;left:48%;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;z-index:2;
}
.map-embed .pin svg{width:40px;height:40px;fill:var(--accent);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.map-embed .pin-label{
  margin-top:.4rem;background:var(--accent);color:#fff;font-family:var(--font-head);
  letter-spacing:1px;font-size:.8rem;padding:.25rem .7rem;border-radius:4px;text-transform:uppercase;
}
.map-embed .map-note{
  position:absolute;bottom:.6rem;right:.7rem;font-size:.7rem;color:var(--text-muted);
  background:rgba(0,0,0,.4);padding:.2rem .5rem;border-radius:4px;
}

/* form */
.contact-form{
  background:var(--surface);border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--border);box-shadow:var(--shadow-md);
}
.contact-form h3{font-size:1.4rem;text-transform:uppercase;margin-bottom:.35rem}
.contact-form .form-sub{color:var(--text-muted);margin-bottom:1.5rem;font-size:.98rem}
.field{margin-bottom:1.25rem}
.field label{display:block;font-family:var(--font-head);font-weight:600;letter-spacing:.5px;color:var(--text-soft);margin-bottom:.4rem;font-size:.95rem;text-transform:uppercase}
.field label .req{color:var(--accent)}
.field input,.field textarea{
  width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);
  color:#fff;font-family:var(--font-body);font-size:1.02rem;padding:.85rem 1rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#888}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,31,31,.2)}
.field textarea{resize:vertical;min-height:130px}
.field .error-msg{display:none;color:#ff6b6b;font-size:.9rem;margin-top:.4rem;align-items:center;gap:.35rem}
.field .error-msg svg{width:15px;height:15px;flex:none}
.field.invalid input,.field.invalid textarea{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.18)}
.field.invalid .error-msg{display:flex}
.field.valid input,.field.valid textarea{border-color:var(--ok)}

.form-status{
  display:none;align-items:center;gap:.6rem;padding:1rem 1.25rem;border-radius:var(--radius);
  background:rgba(54,179,74,.15);border:1px solid var(--ok);color:#9be6a8;
  font-family:var(--font-head);letter-spacing:.5px;margin-bottom:1.25rem;
}
.form-status.show{display:flex}
.form-status svg{width:22px;height:22px;flex:none;stroke:var(--ok)}
.contact-form .btn{width:100%;justify-content:center;font-size:1.05rem;padding:1.05rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:transparent;border-top:4px solid var(--accent);padding-top:clamp(3rem,6vw,4.5rem)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3rem)}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer .f-brand .brand{margin-bottom:1.1rem}
.footer .f-brand .brand-logo{height:58px}
.footer .f-brand p{color:var(--text-muted);font-size:1rem;max-width:34ch}
.footer .f-brand .tagline{
  color:var(--accent-hover);font-family:var(--font-head);font-size:1.15rem;
  letter-spacing:1px;text-transform:uppercase;margin-top:1rem;
}
.footer-col h4{font-size:1.05rem;text-transform:uppercase;margin-bottom:1.1rem;letter-spacing:1px;position:relative;padding-bottom:.6rem}
.footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--accent);border-radius:2px}
.footer-col ul li{margin-bottom:.6rem}
.footer-col ul a{color:var(--text-muted);font-size:1rem;transition:color .2s var(--ease),padding-left .2s var(--ease)}
.footer-col ul a:hover{color:var(--accent-hover);padding-left:5px}
.footer-col .f-contact li{display:flex;gap:.6rem;align-items:flex-start;color:var(--text-muted);margin-bottom:.7rem;font-size:1rem}
.footer-col .f-contact svg{width:18px;height:18px;flex:none;stroke:var(--accent);margin-top:3px}
.footer-bottom{
  border-top:1px solid var(--border);margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-block:1.5rem;text-align:center;color:var(--text-muted);font-size:.95rem;
}
.footer-bottom .accent{color:var(--accent-hover)}

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media (max-width:920px){
  .hamburger{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,82vw);height:100vh;
    flex-direction:column;align-items:stretch;justify-content:center;gap:.5rem;
    background:var(--footer);padding:5rem 1.75rem 2rem;
    transform:translateX(105%);transition:transform .4s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.5);z-index:1050;
    border-left:3px solid var(--accent);
  }
  .nav.open{transform:translateX(0)}
  .nav a{font-size:1.25rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);min-height:48px;display:flex;align-items:center}
  .nav a::after{display:none}
  .nav a.active{background:rgba(204,31,31,.15);border-left:3px solid var(--accent);color:#fff}
  .nav-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1040;
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);
  }
  .nav-overlay.show{opacity:1;visibility:visible}
}
body.nav-lock{overflow:hidden}

/* ============================================================
   SINGLE FIXED BACKGROUND VIDEO + scroll-driven overlay
   ============================================================ */
/* EGYETLEN fix háttérvideó az egész oldal mögött; KONSTANS, egységes sötétség.
   Nincs scroll-vezérlés / JS → garantáltan nincs vibrálás, és mindenhol UGYANOLYAN árnyalat. */
#global-video-bg{position:fixed;inset:0;z-index:-10;pointer-events:none}
/* AMBIENT, ÉLETLEN videó: a blur elmossa a horizont éles fényerő-élét (a „hirtelen
   sötétedés" okát), a felskálázás elrejti a blur szélét, a brightness egységesen sötétít. */
#global-bg-video{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:blur(64px) brightness(.55) saturate(.9);transform:scale(1.22)}
/* Konstans, egységes sötétítés + finom vignetta. A blur már elmosta a horizont éles élét,
   ezért itt csak egyenletes alap + lágy vignetta kell. Nincs scroll-/szekció-vezérlés. */
#global-bg-overlay{position:absolute;inset:0;background:
  radial-gradient(130% 120% at 50% 44%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.32) 100%),
  rgba(0,0,0,.5)}
.hero{position:relative}
.hero-inner{position:relative;z-index:3}

/* minden szekció átlátszó → a fix videó látszik át mindenhol, ugyanazzal a sötétséggel */
#fooldal,#cegcsoport,#rolunk,#szolgaltatasok,#miert-mi,#epitoanyag-pont,#kapcsolat{background:transparent}

/* hero readability over the video */
.hero h1,.hero .subtitle,.hero .hero-headline,.hero .hero-sub{text-shadow:0 2px 16px rgba(0,0,0,.85)}
.hero .btn-primary{box-shadow:0 4px 20px rgba(204,31,31,.4)}

/* --- Reduced motion: drop the video, fall back to solid dark --- */
@media (prefers-reduced-motion: reduce){
  #global-bg-video{display:none}
  #global-video-bg{background:#2a2a2a}
}

/* ============================================================
   GLASSMORPHISM CARDS (services + Építőanyag Pont)
   ============================================================ */
.glass-card{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:.5px solid rgba(255,255,255,.12);border-radius:12px;
  transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
#szolgaltatasok .service-card.glass-card,#epitoanyag-pont .product-card.glass-card{
  background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.12);
}
.glass-card:hover,
#szolgaltatasok .service-card.glass-card:hover,#epitoanyag-pont .product-card.glass-card:hover{
  background:rgba(255,255,255,.10);border-color:rgba(204,31,31,.45);
  transform:translateY(-4px) scale(1.02);box-shadow:0 8px 32px rgba(204,31,31,.2);
}

/* ============================================================
   v2 — BRAND, EXPANDABLE CARDS, TIMELINE ACCORDION, GALLERY, MOBILE
   ============================================================ */

/* ---- Header: brand removed; nav + Galéria pill ---- */
.header .container{display:flex;align-items:center;gap:1rem}
.header-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.btn-gallery{
  font-family:var(--font-head);font-weight:600;letter-spacing:1px;text-transform:uppercase;
  font-size:.9rem;color:#fff;border:2px solid var(--accent);border-radius:50px;
  padding:.55rem 1.25rem;min-height:44px;display:inline-flex;align-items:center;gap:.45rem;
  transition:background .25s ease,transform .2s ease,box-shadow .2s ease;
}
.btn-gallery svg{width:16px;height:16px;stroke:currentColor}
.btn-gallery:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(204,31,31,.4)}
@media (max-width:480px){.btn-gallery{font-size:.78rem;padding:.45rem .9rem}}

/* ---- Hero rotating logo sizing ---- */
.logo-circle{--size:clamp(150px,20vw,210px)}
.logo-switcher{gap:1rem}
.logo-switcher .logo-hint{font-size:.68rem}
@media (max-width:768px){
  .logo-circle{--size:clamp(150px,42vw,200px)}
}

/* ---- Timeline accordion ---- */
#rolunk .t-card{cursor:pointer;overflow:hidden;position:relative;padding:1.2rem 1.5rem;
  max-height:6.4rem;transition:max-height .4s cubic-bezier(.4,0,.2,1),transform .25s var(--ease),box-shadow .25s var(--ease)}
#rolunk .t-card.open{max-height:520px}
.t-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s ease;z-index:0}
.t-card.open .t-bg{opacity:.18}
.t-inner{position:relative;z-index:1}
.t-head{display:flex;align-items:center;gap:.75rem}
.t-head-text{flex:1;min-width:0}
.t-chevron{width:22px;height:22px;stroke:var(--accent-hover);flex:none;transition:transform .4s ease}
.t-card.open .t-chevron{transform:rotate(180deg)}
.t-body{opacity:0;transition:opacity .3s ease .12s;padding-top:.85rem}
.t-card.open .t-body{opacity:1}
.t-body p{color:var(--text-soft)}
@media (min-width:860px){ .t-item:nth-child(odd) .t-head{flex-direction:row-reverse} }

/* ---- Expandable cards (Services + ÉP product) ---- */
.cards-grid,.product-grid{position:relative}
#szolgaltatasok .service-card{cursor:pointer;min-height:148px;display:flex;flex-direction:column;justify-content:center;padding:1.6rem 1.4rem}
#szolgaltatasok .service-card > p,#szolgaltatasok .service-card .num{display:none}
#szolgaltatasok .service-card h3{margin-bottom:0;font-size:1.15rem}
#szolgaltatasok .service-card .service-icon{margin-bottom:.75rem}
#epitoanyag-pont .product-card{cursor:pointer}
#epitoanyag-pont .product-card > p{display:none}
#epitoanyag-pont .product-card h4{margin-bottom:0}
/* fade siblings out while a panel is open */
.cards-grid.expanded > .service-card,.product-grid.expanded > .product-card{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* the expanding panel fills the grid area */
.card-panel{
  position:absolute;inset:0;z-index:6;border-radius:var(--radius-lg);overflow-y:auto;overflow-x:hidden;
  background:rgba(10,10,10,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--accent);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:scale(.98);
  transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1),visibility .45s;
  display:flex;flex-direction:column;justify-content:flex-start;gap:1.1rem;
  padding:clamp(1.6rem,4vw,2.8rem);padding-top:clamp(3.2rem,6vw,4rem);   /* hely a × gombnak felül */
  scrollbar-width:none;-ms-overflow-style:none;       /* hide scrollbar, keep scroll */
}
.card-panel::-webkit-scrollbar{display:none}
.expanded > .card-panel{opacity:1;visibility:visible;transform:none}
.card-panel-bg{display:none}   /* a panel-háttérképet egyelőre elrejtjük – marad a sötét üveg */
.expanded > .card-panel .card-panel-bg{opacity:.18}
.card-panel-inner{position:relative;z-index:1;max-width:680px;display:flex;flex-direction:column;gap:.9rem}
.cp-title{font-family:var(--font-head);font-size:clamp(1.6rem,4vw,2.6rem);text-transform:uppercase;color:#fff;margin-bottom:1rem;line-height:1.05}
.cp-desc{color:var(--text-soft);font-size:clamp(1rem,2vw,1.15rem);opacity:0;transition:opacity .3s ease .3s;max-width:62ch}
.expanded > .card-panel .cp-desc{opacity:1}
.card-panel-close{
  position:absolute;top:1rem;right:1rem;z-index:3;width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:1.7rem;line-height:1;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);transition:background .2s,transform .3s}
.card-panel-close:hover{background:var(--accent);transform:rotate(90deg)}
.card-panel-actions{position:relative;z-index:3;margin-top:auto;display:flex;flex-wrap:wrap;gap:.8rem;padding-top:1.2rem}
.cp-gallery,.cp-contact{
  font-family:var(--font-head);font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:.85rem;
  color:#fff;border:2px solid var(--accent);border-radius:50px;padding:.7rem 1.3rem;min-height:46px;
  display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.3);cursor:pointer;
  transition:background .25s var(--ease-out),transform .2s var(--ease-out)}
.cp-gallery:hover,.cp-contact:hover{background:var(--accent);transform:translateY(-2px)}
@keyframes cpPulse{0%,100%{box-shadow:0 0 0 0 rgba(204,31,31,.5)}70%{box-shadow:0 0 0 12px rgba(204,31,31,0)}}

/* ---- ÉP video background ---- */
.ep-video-wrapper{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:opacity}
.ep-video-wrapper video{width:100%;height:100%;object-fit:cover}
.ep-video-overlay{position:absolute;inset:0;background:rgba(20,20,20,.6)}
#epitoanyag-pont .container{position:relative;z-index:1}

/* ---- Contact: map stretches to align with form bottom; subtler bg ---- */
/* (Kapcsolat egységes tömör háttér – a külön sötét háttér eltávolítva) */
.contact-grid{align-items:stretch}
.contact-info{display:flex;flex-direction:column}
#contact-map{flex:1 1 auto;min-height:240px;width:100%;border:0;border-radius:var(--radius-lg);margin-top:1.5rem;filter:grayscale(.2)}

/* ---- Global mobile polish ---- */
h1,h2,h3,h4,.cp-title,.hero-brand,.t-card h3{word-break:keep-all;overflow-wrap:normal}
.nav a,.btn,.btn-gallery,.cp-gallery{min-height:48px}
@media (max-width:600px){
  .cards-grid,.product-grid{grid-template-columns:1fr}
  /* expanded panel goes full-bleed width on phones */
  .cards-grid.expanded > .card-panel,.product-grid.expanded > .card-panel{
    position:fixed;inset:auto 0 0 0;top:var(--header-h);width:100vw;border-radius:0;z-index:1200}
}
/* ============================================================
   ██  REDESIGN — „SÖTÉT INFINITY" SKIN  ██
   Override-réteg a meglévő stílusok fölött. A működő szabályokat
   nem törli; csak újraöltözteti a felületet (font, tér, komponensek).
   ============================================================ */

/* ---- Lenis sima görgetés (kötelező alapstílusok) ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---- Token-felülírás: grotesque tipográfia + levegősebb ritmus ---- */
:root{
  --font-head: 'Space Grotesk','Oswald','Arial Narrow',sans-serif;
  --font-body: 'Inter',system-ui,-apple-system,sans-serif;
  --font-display: 'Space Grotesk','Oswald',sans-serif;
  --section-pad: clamp(5rem,11vw,9rem);
  --gap: clamp(1.5rem,3.2vw,2.4rem);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Fluid type scale (~1.25 ratio) — single source of truth for the type ladder.
     Consumed by headings/eyebrow/lead/card-titles so the H1>H2>H3>lead>body hierarchy stays consistent. */
  --fs-eyebrow: clamp(.78rem, .74rem + .2vw, .85rem);
  --fs-lead:    clamp(1.1rem, 1.04rem + .5vw, 1.25rem);
  --fs-h4:      clamp(1.15rem, 1.1rem + .4vw, 1.32rem);
  --fs-h3:      clamp(1.25rem, 1.18rem + .6vw, 1.5rem);
  --fs-h2:      clamp(1.7rem, 1.4rem + 1.6vw, 2.4rem);
  --fs-h1:      clamp(2.3rem, 1.9rem + 2.4vw, 3.7rem);
  --fs-display: clamp(2.6rem, 2rem + 3.2vw, 4.2rem);
  /* rhythm */
  --lh-body: 1.65;
  --lh-tight: 1.5;
  --tracking-label: .26em;
}
body{font-size:1.02rem;letter-spacing:0}

/* nagy címsorok: grotesque, NEM csupa-nagybetű, könnyedebb súly, feszes betűköz */
.section-head h2,
.hero .hero-headline,
.ep-text h3{
  text-transform:none;
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.04;
}
.section-head h2{font-size:var(--fs-h2);text-wrap:balance}
/* (.hero .hero-headline size/weight intentionally NOT set here — single source of
   truth is the HERO REFRESH PASS rule at the end of this file.) */
.ep-text h3{font-size:var(--fs-h2)}

/* kártya-/blokk-címek: letisztult sentence-case grotesque */
.service-card h3,.product-card h4,.usp h3,.t-card h3,.contact-form h3,
.contact-info .info-item h3,.cp-title,.footer-col h4{
  text-transform:none;font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;
}
.cp-title{font-weight:600}

/* eyebrow / nav / gombok: marad a finom, ritkított nagybetűs label-stílus
   (a .section-head .eyebrow alapszabály már a token-értékeket használja — itt nincs felülírás) */

/* felületek: kevesebb kemény keret, levegősebb glass (Infinity „sok üres tér") */
.service-card,.usp,.product-card,.contact-form{border-color:rgba(255,255,255,.10)}
.title-rule{height:2px;width:54px;opacity:.9}

/* finomabb gombok */
.btn{letter-spacing:.12em;font-weight:500}

/* ============================================================
   NYITÓ ANIMÁCIÓ (preloader) — „logó-feltárás + függöny"
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:5000;background:#1b1b1b;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  will-change:opacity;
}
#intro .intro-logo-wrap{position:relative;overflow:hidden;display:inline-block;line-height:0}
#intro .intro-logo{width:min(72vw,440px);height:auto;display:block;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
/* (becsillanás eltávolítva) */
#intro.intro-hidden{pointer-events:none}
html.intro-active,html.intro-active body{overflow:hidden}
/* fallback ha nincs JS / reduced-motion: ne takarjon ki semmit */
html:not(.js) #intro{display:none}
@media (prefers-reduced-motion:reduce){#intro{display:none!important}}

/* ============================================================
   EGYEDI KURZOR — „pont + késleltetett gyűrű" (csak egér + fine pointer)
   ============================================================ */
#cursor-dot,#cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
  html.cursor-on,html.cursor-on a,html.cursor-on button,
  html.cursor-on [role="button"],html.cursor-on input,
  html.cursor-on textarea,html.cursor-on .logo-switcher{cursor:none}
  #cursor-dot,#cursor-ring{
    position:fixed;top:0;left:0;z-index:6000;pointer-events:none;border-radius:50%;
    transform:translate(-50%,-50%);will-change:transform;display:block;opacity:0;
    transition:opacity .3s ease;
  }
  html.cursor-on #cursor-dot,html.cursor-on #cursor-ring{opacity:1}
  #cursor-dot{
    width:8px;height:8px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.45);
    transition:width .18s var(--ease-out),height .18s var(--ease-out),background .2s ease,opacity .3s ease;
  }
  #cursor-ring{
    width:28px;height:28px;border:1.6px solid rgba(255,255,255,.5);
    transition:width .18s var(--ease-out),height .18s var(--ease-out),
               border-color .25s ease,background .25s ease,opacity .3s ease;
  }
  /* kattintható elem fölött: a PÖTTY nő meg + pirosra vált; a GYŰRŰ csak pirosra vált (nem nő) */
  html.cur-hover #cursor-dot{width:13px;height:13px;background:var(--accent)}
  html.cur-hover #cursor-ring{border-color:var(--accent);background:rgba(204,31,31,.12)}
  /* kattintáskor a külső gyűrű egy pillanatra megnő */
  html.cur-down #cursor-ring{width:44px;height:44px}
}

/* ============================================================
   HERO — függőleges „SCROLL" jelző (a régi egér-cue helyett)
   ============================================================ */
.hero .scroll-cue{display:none!important}
.hero-scroll-v{
  position:absolute;right:clamp(1rem,3.5vw,2.6rem);bottom:2.4rem;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-family:var(--font-display);letter-spacing:.4em;text-transform:uppercase;
  font-size:.7rem;font-weight:500;color:rgba(255,255,255,.72);
}
.hero-scroll-v .vtxt{writing-mode:vertical-rl;text-orientation:mixed}
.hero-scroll-v .line{position:relative;width:1px;height:64px;background:rgba(255,255,255,.25);overflow:hidden}
.hero-scroll-v .line::after{
  content:"";position:absolute;left:0;top:-45%;width:100%;height:45%;background:var(--accent);
  animation:scrollLineMove 1.9s var(--ease-out) infinite;
}
@keyframes scrollLineMove{0%{top:-45%}100%{top:100%}}
@media (max-width:600px),(max-height:640px){.hero-scroll-v{display:none}}

/* ---- Hero belépő: az EGÉSZ kompozíció (logó+eyebrow+szöveg+CTA) EGYBEN tárul fel,
   mozis „fókuszba-állással" (home.js animálja az oszlopot egységként — nem darabonként).
   A kezdő rejtett állapot a .js + is-home-ra van kötve → JS nélkül SOHA nem üres. ---- */
.js .is-home .hero-center-column{opacity:0}
.hero-center-column{will-change:opacity,transform}
/* GSAP-független feltárás (no-JS-fallback/reduced/deep-link): a page-revealed felfedi az
   oszlopot. !important, hogy felülírja a fenti (3-osztályos) rejtő szabályt is. */
html.page-revealed .hero-center-column{opacity:1 !important;transition:opacity .8s var(--ease-out)}
/* Failsafe: ha a GSAP soha nem futott le, az oszlop élesen, transzform/blur nélkül látszik. */
html.hero-failsafe .hero-center-column{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}
/* fejléc + nav is balról úszik be a tartalommal együtt — CSAK a főoldalon (intro-koreográfia).
   Az aloldalakon/galériában a nav mindig látszik (nincs törékeny opacity-átmenet). */
.js .is-home .header{opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}   /* csak a felcsúszás (transform) animál; az opacity-t a GSAP kezeli */
html.page-revealed .header{opacity:1}
.js .is-home .header .nav a,.js .is-home .header .btn-gallery,.js .is-home .header .hamburger{opacity:0;transform:translateX(-22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.page-revealed .header .nav a,html.page-revealed .header .btn-gallery,html.page-revealed .header .hamburger{opacity:1;transform:none}

/* ============================================================
   SZOLGÁLTATÁSOK — Infinity-ihlette „sector-link" lista
   (a kinyíló panel funkció változatlan marad)
   ============================================================ */
#szolgaltatasok #servicesGrid{
  display:flex;flex-direction:column;gap:0;grid-template-columns:none;
  border-top:1px solid rgba(255,255,255,.14);max-width:980px;margin-inline:auto;
}
#szolgaltatasok #servicesGrid .service-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.3rem;
  min-height:0;padding:1.5rem 1rem;border:0;border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;transform:none;
  transition:background .35s var(--ease-out),padding .35s var(--ease-out);
}
#szolgaltatasok #servicesGrid .service-card::before{display:none}      /* felső accent-csík ki */
#szolgaltatasok #servicesGrid .service-card::after{                    /* hover-nyíl */
  content:"";grid-column:3;justify-self:end;width:30px;height:30px;flex:none;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  opacity:0;transform:translateX(-12px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
#szolgaltatasok #servicesGrid .service-card:hover,
#szolgaltatasok #servicesGrid .service-card:focus-visible{background:rgba(255,255,255,.045);padding-left:1.6rem}
#szolgaltatasok #servicesGrid .service-card:hover::after,
#szolgaltatasok #servicesGrid .service-card:focus-visible::after{opacity:1;transform:translateX(0)}
#szolgaltatasok #servicesGrid .service-card .service-icon{
  width:48px;height:48px;margin:0;border-radius:10px;transition:background .3s var(--ease-out),transform .3s var(--ease-out)}
#szolgaltatasok #servicesGrid .service-card:hover .service-icon{transform:none;background:var(--accent)}
#szolgaltatasok #servicesGrid .service-card:hover .service-icon svg{stroke:#fff}
#szolgaltatasok #servicesGrid .service-card h3{font-size:clamp(1.3rem,3vw,2.05rem);font-weight:500;margin:0;letter-spacing:-.01em}
@media (max-width:600px){
  #szolgaltatasok #servicesGrid .service-card{padding:1.2rem .5rem;gap:1rem}
  #szolgaltatasok #servicesGrid .service-card h3{font-size:1.25rem}
}

/* ============================================================
   KAPCSOLAT — Infinity-szerű minimal (aláhúzásos) mezők
   (a teljes validáció + térkép változatlan)
   ============================================================ */
#kapcsolat .contact-form{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:.5px solid rgba(255,255,255,.12)}
#kapcsolat .field input,#kapcsolat .field textarea{
  background:transparent;border:0;border-bottom:1.5px solid rgba(255,255,255,.22);
  border-radius:0;padding:.7rem .15rem;
}
#kapcsolat .field input:focus,#kapcsolat .field textarea:focus{
  border-bottom-color:var(--accent);box-shadow:none;
}
#kapcsolat .field label{letter-spacing:.12em;font-size:.8rem;color:var(--text-muted);font-weight:500}
#kapcsolat .field.invalid input,#kapcsolat .field.invalid textarea{border-bottom-color:#ff6b6b}
#kapcsolat .field.valid input,#kapcsolat .field.valid textarea{border-bottom-color:var(--ok)}

/* ============================================================
   IDŐVONAL — letisztultabb, nagy könnyű évszámok
   ============================================================ */
#rolunk .t-year{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:400;color:#fff;opacity:.92;letter-spacing:0}
#rolunk .t-card h3{font-weight:500;letter-spacing:-.01em}
#rolunk .t-card{border-left-width:2px}
@media (min-width:860px){ #rolunk .t-item:nth-child(odd) .t-card{border-right-width:2px} }

/* ============================================================
   ÉPÍTŐANYAG PONT — levegősebb, csiszoltabb
   ============================================================ */
#epitoanyag-pont .ep-emblem{border-width:3px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
#epitoanyag-pont .ep-badge{font-weight:500;letter-spacing:.14em}
#epitoanyag-pont .ep-sub{
  font-family:var(--font-display);text-transform:none;font-weight:500;
  letter-spacing:-.01em;color:var(--accent-hover);font-size:clamp(1.05rem,2vw,1.3rem);
}
#epitoanyag-pont .ep-text p{color:var(--text-soft)}
#epitoanyag-pont .ep-feats li{font-size:1.02rem}
#epitoanyag-pont .product-card{padding:1.6rem;border-radius:12px;border-top-width:2px}
#epitoanyag-pont .product-card h4{font-size:1.18rem;font-weight:500}
#epitoanyag-pont .ep-grid{gap:clamp(2.5rem,5vw,4.5rem)}

/* ============================================================
   FOOTER — letisztult, levegős
   ============================================================ */
.footer{border-top-width:2px;padding-top:clamp(4rem,7vw,5.5rem)}
.footer-col h4{font-weight:500;letter-spacing:.02em}
.footer-col h4::after{height:2px;width:42px}
.footer .f-brand .tagline{text-transform:none;font-family:var(--font-display);font-weight:500;letter-spacing:-.01em}
.footer .f-brand p{color:var(--text-muted)}
.footer-bottom{letter-spacing:.02em}
.footer-col ul a:hover{color:#fff}

/* ============================================================
   CÉGCSOPORT sáv — letisztult statikus al-márka logók
   ============================================================ */
.group-band{padding-block:clamp(3.5rem,7vw,6rem)}
.group-band .brand-row{display:flex;gap:clamp(1.5rem,4vw,3rem);justify-content:center;align-items:stretch;flex-wrap:wrap}
.brand-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem;
  background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:.5px solid rgba(255,255,255,.12);border-radius:16px;padding:2.2rem 2.6rem;min-width:min(280px,82vw);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out);
}
.brand-card:hover{transform:translateY(-6px);border-color:rgba(204,31,31,.5);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.brand-logo-wrap{
  width:clamp(120px,16vw,158px);height:clamp(120px,16vw,158px);border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.brand-logo-wrap img{width:100%;height:100%;object-fit:cover}
.brand-card .brand-name{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:#fff;font-size:1.25rem}
.brand-card .brand-sub{color:var(--text-muted);font-size:.95rem}

/* ============================================================
   ██ EGYSÉGES SÖTÉT ÜVEG + EGYSÉGES PIROS HOVER-SÁV (override) ██
   A "szabitrans piros" sáv balról kitölt hoverre — minden boxon ugyanúgy.
   ============================================================ */
:root{ --glass:rgba(255,255,255,.05); --glass-bd:rgba(255,255,255,.14); }

/* EMELT ÜVEG-PANEL: a sötét, egyenletes alapnál enyhén világosabb felület + világos
   keret + lágy árnyék + belső fénykeret + blur. Mivel az alap egyenletes, ez NEM okoz
   szekciók közti sötétedést — csak letisztult, modern panel-hatást. */
#rolunk .t-card, #miert-mi .usp, #epitoanyag-pont .product-card,
#kapcsolat .contact-form, .brand-card{
  background-color:var(--glass) !important;
  border:1px solid var(--glass-bd) !important;
  backdrop-filter:blur(14px) saturate(1.08);-webkit-backdrop-filter:blur(14px) saturate(1.08);
  box-shadow:0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* EGYSÉGES hover: piros sáv balról kitölt (~0.25s) + enyhe emelés.
   (A timeline-akkordeont szándékosan kihagyjuk, hogy a nyílás-animáció ne sérüljön.) */
#szolgaltatasok #servicesGrid .service-card,
#epitoanyag-pont .product-card,
#miert-mi .usp,
.brand-card{
  background-image:linear-gradient(var(--accent),var(--accent)) !important;
  background-repeat:no-repeat !important;
  background-position:left 100% !important;
  background-size:0% 3px !important;
  transition:background-size .25s var(--ease-out), transform .25s var(--ease-out),
             box-shadow .25s var(--ease-out), border-color .25s var(--ease-out) !important;
}
#szolgaltatasok #servicesGrid .service-card:hover,
#szolgaltatasok #servicesGrid .service-card:focus-visible,
#epitoanyag-pont .product-card:hover,
#miert-mi .usp:hover,
.brand-card:hover{
  background-size:100% 3px !important;
  transform:translateY(-4px) !important;
  border-color:rgba(204,31,31,.55) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.5) !important;
}

/* ============================================================
   ██ V2 — modernebb, látványosabb finomítások ██
   ============================================================ */
/* — Megnyíló panel (Szolgáltatások + Építőanyag Pont): elegáns, LÁGY blur-feltárulás — */
.cards-grid,.product-grid{transition:min-height .55s var(--ease-out)}
.card-panel{
  background:rgba(12,12,14,.82) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.55) !important;
  transform:scale(.99) translateY(10px);
  filter:blur(10px);
  transition:opacity .55s var(--ease-out), transform .7s var(--ease-out), filter .55s var(--ease-out), visibility .55s !important;
}
.expanded > .card-panel{transform:none !important;filter:blur(0) !important}
.card-panel .cp-title{position:relative;padding-bottom:.7rem;opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out) .14s, transform .55s var(--ease-out) .14s}
.expanded > .card-panel .cp-title{opacity:1;transform:none}
.card-panel .cp-title::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--accent);border-radius:2px;transition:width .6s var(--ease-out) .4s}
.expanded > .card-panel .cp-title::after{width:64px}
.card-panel .cp-desc{transform:translateY(12px);
  transition:opacity .5s ease .3s, transform .5s var(--ease-out) .3s}
.expanded > .card-panel .cp-desc{opacity:1;transform:none}
.card-panel .card-panel-actions{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease .44s, transform .5s var(--ease-out) .44s}
.expanded > .card-panel .card-panel-actions{opacity:1;transform:none}

/* — Építőanyag Pont termékkártyák: hover-nyíl (mint a szolgáltatásoknál) — */
#epitoanyag-pont .product-card{position:relative;overflow:hidden}
#epitoanyag-pont .product-card::after{content:"";position:absolute;right:1.15rem;top:1.15rem;width:22px;height:22px;
  opacity:0;transform:translateX(-8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat}
#epitoanyag-pont .product-card:hover::after,
#epitoanyag-pont .product-card:focus-visible::after{opacity:1;transform:translateX(0)}

/* — Idővonal: pont „pop" + glow a megjelenéskor + lefutó accent-csillanás a vonalon — */
.js .t-item.reveal .t-dot{transform:scale(.25);opacity:.4;transition:transform .55s var(--ease-out),opacity .4s ease,box-shadow .5s ease}
.js .t-item.reveal.visible .t-dot{transform:scale(1);opacity:1;
  box-shadow:0 0 0 3px var(--accent), 0 0 18px 2px rgba(204,31,31,.55)}
.timeline::after{content:"";position:absolute;top:0;left:24px;width:3px;height:84px;border-radius:2px;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(204,31,31,0), var(--accent-hover), rgba(204,31,31,0));
  animation:tlSheen 4.8s var(--ease-out) infinite}
@media (min-width:860px){.timeline::after{left:50%;transform:translateX(-50%)}}
@keyframes tlSheen{0%{top:-84px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.timeline::after{display:none}.js .t-item.reveal .t-dot{transform:none;opacity:1}}

/* — Görgetés közbeni be/ki-úszó lágy blur+fade (compositor-vezérelt, JS nélkül) —
   Belépéskor balról + élesedik, kilépéskor felfelé + elmosódik. Bidirekcionális. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js .reveal, .js .reveal-left, .js .reveal-right{
      opacity:1;
      animation: svxScroll linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    /* named tartomány: csak BELÉPÉSKOR (alul) és KILÉPÉSKOR (felül) mosódik/úszik;
       ami teljesen a képernyőn van (pl. footer az oldal alján, szekciócímek) → ÉLES. */
    @keyframes svxScroll{
      entry 0%   { opacity:0; transform:translateX(-30px) }
      entry 100% { opacity:1; transform:none }
      exit 0%    { opacity:1; transform:none }
      exit 100%  { opacity:0; transform:translateY(-24px) }
    }
  }
}

/* — Oldalsó, letisztult piros dísz (csak széles képernyőn, ahol üres a két szél) — */
.side-deco{position:fixed;top:0;bottom:0;width:60px;z-index:20;pointer-events:none;display:none;
  align-items:center;justify-content:center}
@media (min-width:1500px){ .side-deco{display:flex} }
.side-deco.side-left{left:0}
.side-deco.side-right{right:0}
.side-deco::after{content:"";position:absolute;top:16%;bottom:16%;width:1px;
  background:linear-gradient(transparent,rgba(204,31,31,.55),transparent)}
.side-deco.side-left::after{left:20px}
.side-deco.side-right::after{right:20px}
.side-vtext{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.34);display:flex;align-items:center;gap:1.1rem;white-space:nowrap}
.side-vtext::before{content:"";width:1px;height:64px;background:var(--accent)}
.side-progress{position:relative;width:2px;height:44vh;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.side-progress > span{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(var(--accent),var(--accent-hover))}
@supports (animation-timeline: scroll()){
  .side-progress > span{animation:sideGrow linear both;animation-timeline:scroll(root block)}
  @keyframes sideGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@media (prefers-reduced-motion:reduce){.side-progress > span{transform:scaleY(1)}}

/* — Mobil teljesítmény: könnyebb háttér-blur + görgetés-effekt blur NÉLKÜL — */
@media (max-width:768px){
  #global-bg-video{filter:blur(28px) brightness(.55) saturate(.9);transform:scale(1.14)}
}
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  .js .reveal,.js .reveal-left,.js .reveal-right{animation-name:svxScrollLite}
}
@keyframes svxScrollLite{
  entry 0%   {opacity:0;transform:translateY(24px)}
  entry 100% {opacity:1;transform:none}
  exit 0%    {opacity:1;transform:none}
  exit 100%  {opacity:0;transform:translateY(-20px)}
}

/* — Idővonal: az évszám-DOBOZOK is animálva (skálázódva) jelennek meg, nem csak a pöttyök — */
#rolunk .t-card{transform-origin:center}
#rolunk .t-card:hover{box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(204,31,31,.5) !important}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .js #rolunk .t-card{
      animation: tCardIn linear both; animation-timeline: view(); animation-range: entry 4% entry 96%;
    }
    @keyframes tCardIn{ from{transform:scale(.82);opacity:0} to{transform:scale(1);opacity:1} }
  }
}

/* ============================================================
   ██ V3 — Tények, Vélemények, Mobil CTA, számozás, textúra ██
   ============================================================ */
.stats-band{padding-block:clamp(2.4rem,5vw,3.8rem)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,1.8rem);text-align:center}
.stat{padding:1.5rem 1rem;border-radius:16px;background:var(--glass);border:1px solid var(--glass-bd);
  backdrop-filter:blur(14px) saturate(1.08);-webkit-backdrop-filter:blur(14px) saturate(1.08);
  box-shadow:0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07)}
.stat-num{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,4.2vw,2.9rem);color:#fff;line-height:1;letter-spacing:-.02em}
.stat-num .u{color:var(--accent)}
.stat-label{margin-top:.5rem;color:var(--text-muted);font-size:.95rem;letter-spacing:.02em}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2rem)}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr}}
.review{margin:0;padding:clamp(1.5rem,3vw,2.2rem);border-radius:18px;background:var(--glass);
  border:1px solid var(--glass-bd);backdrop-filter:blur(14px) saturate(1.08);-webkit-backdrop-filter:blur(14px) saturate(1.08);
  box-shadow:0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:1rem;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.review:hover{transform:translateY(-6px);border-color:rgba(204,31,31,.5);box-shadow:0 20px 46px rgba(0,0,0,.45)}
.review-stars{color:var(--accent-hover);letter-spacing:3px;font-size:1.05rem}
/* Facebook recommendation label (not a star rating) — a small accent chip instead of big tracked stars */
.review-stars.r-fb{letter-spacing:.04em;font-size:.8rem;font-weight:600;text-transform:uppercase;font-family:var(--font-display)}
.review blockquote{margin:0;color:var(--text-soft);font-size:1.05rem;line-height:1.6;font-style:italic}
.review figcaption{display:flex;flex-direction:column;margin-top:auto}
.review .r-name{font-family:var(--font-display);font-weight:600;color:#fff}
.review .r-role{color:var(--text-muted);font-size:.9rem}

.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:none;gap:.6rem;padding:.6rem .8rem;
  background:rgba(20,20,22,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.12);padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
.mcta-btn{flex:1;text-align:center;font-family:var(--font-display);font-weight:600;letter-spacing:.02em;
  border-radius:50px;padding:.85rem 1rem;min-height:50px;display:flex;align-items:center;justify-content:center}
.mcta-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(204,31,31,.4)}
.mcta-ghost{border:1.5px solid rgba(255,255,255,.3);color:#fff}
@media (max-width:760px){ .mobile-cta{display:flex} body{padding-bottom:74px} }
/* Step 13: hide the sticky CTA while the nav dropdown is open (it must not float over the menu). */
body.nav-lock .mobile-cta{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease-out),visibility .25s}
/* Step 14: the conversion action outweighs the phone link; soft fade separates the bar from content. */
.mobile-cta .mcta-primary{flex:1.4}
.mobile-cta .mcta-ghost{flex:1}
.mobile-cta::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px;pointer-events:none;
  background:linear-gradient(to top,rgba(20,20,22,.92),transparent)}

/* Szekció-számozás (01, 02, …) az eyebrow elé */
body{counter-reset:secnum}
.section-head{counter-increment:secnum}
.section-head .eyebrow::before{content:counter(secnum,decimal-leading-zero);margin-right:.7em;
  color:var(--accent);font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}

/* Finom szemcse-textúra (mélység) */
.grain{position:fixed;inset:0;z-index:-5;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.grain{display:none}}

/* Sikeres küldés: pop + animált (megrajzolódó) pipa */
.form-status.show{animation:statusPop .42s var(--ease-out)}
@keyframes statusPop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.form-status svg path{stroke-dasharray:32;stroke-dashoffset:32}
.form-status.show svg path{animation:checkDraw .55s var(--ease-out) .18s forwards}
@keyframes checkDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.form-status.show svg path{animation:none;stroke-dashoffset:0}.form-status.show{animation:none}}

/* Mágneses gombok (a GSAP kezeli a transformot) */
.btn-primary,.btn-gallery{will-change:transform}

/* Vissza a tetejére gomb */
.to-top{position:fixed;right:18px;bottom:18px;z-index:1150;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 22px rgba(204,31,31,.45);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent-hover)}
.to-top svg{width:22px;height:22px;stroke:#fff;fill:none}
@media (max-width:760px){.to-top{right:14px;bottom:84px;width:46px;height:46px}}

/* Kulcsszó-marquee elválasztó */
.marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.10);padding:1.1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .m-item{font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,2.3vw,1.6rem);
  color:var(--text-soft);letter-spacing:.01em;display:inline-flex;align-items:center;white-space:nowrap;padding:0 1.6rem}
.marquee-track .m-item::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:3.2rem}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;justify-content:center}}

/* Sötétre hangolt térkép (a világos Google-iframe helyett) */
#contact-map{filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9) grayscale(.18)}

/* Hero eyebrow (a többi szekció eyebrow-nyelvezetével) */
.hero-eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--font-display);
  font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-hover);font-weight:500;margin-bottom:.5rem}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:24px;height:1px;background:var(--accent);opacity:.75}

/* Kurzor-követő fény a Vélemény/Tény kártyákon */
.review,.stat{--mx:50%;--my:50%}
.review::before,.stat::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx) var(--my), rgba(204,31,31,.16), transparent 62%)}
.review:hover::before,.stat:hover::before{opacity:1}
.review > *,.stat > *{position:relative;z-index:1}

/* EGYSÉGES gomb-fény (sheen) hoverre — minden fő gombon ugyanaz */
.btn,.btn-gallery,.cp-gallery,.cp-contact,.mcta-primary{position:relative;overflow:hidden}
.btn::after,.btn-gallery::after,.cp-gallery::after,.cp-contact::after,.mcta-primary::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s var(--ease-out)}
.btn:hover::after,.btn-gallery:hover::after,.cp-gallery:hover::after,.cp-contact:hover::after,.mcta-primary:hover::after{left:130%}

/* =====================================================================
   V4 — Nav csúszó aláhúzás · 3D kártya-tilt · Scroll-sebesség skew · Intró-maszk
   ===================================================================== */

/* --- Nav: egyetlen csúszó aláhúzás-jelző (a per-link ::after kiváltása) --- */
.nav{position:relative}
.nav-indicator{position:absolute;bottom:.35rem;left:0;height:2px;width:0;border-radius:2px;
  background:var(--accent);opacity:0;pointer-events:none;
  box-shadow:0 0 8px rgba(204,31,31,.6);
  transition:transform .38s var(--ease-out),width .38s var(--ease-out),opacity .25s ease;
  will-change:transform,width}
.nav.has-indicator a::after{display:none}
@media (max-width:768px){.nav-indicator{display:none!important}}

/* --- 3D kártya-tilt: csak egér + fine pointer; hoverkor a reveal-animáció befagy --- */
@media (hover:hover) and (pointer:fine){
  .tilt{transition:transform .3s var(--ease-out)}
  .tilt.is-tilting{animation:none!important;transition:transform .08s linear;will-change:transform;z-index:3}
}
@media (prefers-reduced-motion:reduce){.tilt,.tilt.is-tilting{transform:none!important}}

/* --- Scroll-sebesség skew: egyetlen :root változó vezérli a kijelölt blokkokat --- */
.vskew{transform:skewY(var(--vskew,0deg));will-change:transform}
@media (prefers-reduced-motion:reduce){.vskew{transform:none!important}}

/* --- TELJESÍTMÉNY: a háttérvideó már erősen blurolt → a kártyák backdrop-filterje
   redundáns és drága (minden scroll-képkockán újraszámolódik). Kivesszük; a keret +
   árnyék + enyhe opálos alap megőrzi az „emelt üveg" hatást, kompozit-barát módon. --- */
.glass-card, #szolgaltatasok .service-card, #epitoanyag-pont .product-card,
#rolunk .t-card, #miert-mi .usp, #kapcsolat .contact-form, .brand-card,
.review, .stat{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* --- Nem kattintható infó-dobozok (Tények, Vélemények, USP): csak NAGYON enyhe,
   szinte azonnali hover (a felhasználó kérése: ne nőjenek meg, ne legyen késleltetés). --- */
.stat{transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease}
.stat:hover{transform:translateY(-2px) scale(1.006);border-color:rgba(204,31,31,.4);
  box-shadow:0 16px 38px rgba(0,0,0,.34)}
.review{transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out),border-color .14s var(--ease-out) !important}
.review:hover{transform:translateY(-2px) !important}
#miert-mi .usp:hover{transform:translateY(-2px) !important;transition-duration:.14s !important}

/* ============================================================
   ██  DESIGN REFINEMENT PASS — type ladder, focal points, hero  ██
   Appended last so it wins by source order over the legacy rules.
   ============================================================ */

/* — Step 5: collapse peer card titles into one h4 tier; calm card body line-height — */
.usp h3,.contact-info .info-item h3,.contact-form h3,#epitoanyag-pont .product-card h4{font-size:var(--fs-h4)}
.usp p,#epitoanyag-pont .product-card p,#szolgaltatasok .service-card p{line-height:var(--lh-tight)}
/* the services index "sector-link" title relates to the scale, not its own outlier clamp */
#szolgaltatasok #servicesGrid .service-card h3{font-size:var(--fs-h2)}

/* — Step 6: standardise the centered about-intro measure — */
.about-intro{max-width:68ch}

/* — Step 8: in hero & CTA contexts the primary (red) action clearly wins; outline = quiet ghost.
     (The global .btn-outline elsewhere, e.g. "Összes szolgáltatás", is untouched.) — */
.hero .btn-outline,.cta-band .btn-outline{border-color:rgba(255,255,255,.28);color:var(--text-soft);background:transparent}
.hero .btn-outline:hover,.cta-band .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06);transform:translateY(-3px)}

/* — Step 9: hero headline second line gets the brand-red accent focal point — */
.hero .hero-headline span{color:var(--accent-hover);font-weight:500}

/* — Step 10: rebalance the hero toward the message (trim logo, lift & strengthen the eyebrow) — */
.hero .hero-main-logo{width:clamp(265px,37vw,500px);margin-bottom:1.2rem}
.hero-eyebrow{margin-bottom:.9rem}
.hero-eyebrow::before,.hero-eyebrow::after{width:32px;opacity:.9}

/* — Step 14: on small phones the hero CTAs stack full-width (red primary on top, even padding) — */
@media (max-width:520px){
  .hero .hero-cta-group{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-inline:auto}
  .hero .hero-cta-group .btn{width:100%;justify-content:center}
}
/* — Step 15: tighten the airy section rhythm on phones (floor ~52px instead of ~80px) — */
@media (max-width:600px){ :root{--section-pad:clamp(3.25rem,12vw,5rem)} }

/* ============================================================
   ██  HERO REFRESH PASS — sharp video + cinematic legibility scrim  ██
   The hero now shows the background video SHARP at the very top
   (home.js ramps the global blur 0 → ambient only as you scroll).
   A framed scrim (vignette + top/bottom gradient) keeps the centered
   logo/text crisp and readable WITHOUT any blur. Appended last to win.
   ============================================================ */
/* scrim sits above the (fixed) video, below the hero content (z-index:3) */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 36%, transparent 0%, transparent 48%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.34) 100%);
  /* Fade the ENTIRE scrim to transparent before the hero's bottom edge, so the
     darkening never ends in a hard horizontal line where the next section begins
     (the scrim scrolls with the hero over the fixed video → a hard edge would show). */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 94%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 94%);
}
/* razor-sharp, high-contrast centred copy on the now-unblurred video */
.hero .hero-headline{text-shadow:0 2px 22px rgba(0,0,0,.92),0 1px 4px rgba(0,0,0,.7)}
/* red eyebrow needs a crisp dark halo to stay legible on bright, now-sharp video frames */
.hero-eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.9)}

/* — Owner request: tagline SIGNIFICANTLY smaller so the (slightly bigger) logo is
     the clear focal point; refined two-line sub-headline instead of a giant title — */
.hero .hero-headline{
  font-size:clamp(1.1rem, .82rem + 1.15vw, 1.85rem);
  font-weight:500;line-height:1.32;letter-spacing:0;
  max-width:30ch;margin:.1rem auto 1.7rem;
}