/* ==========================================================================
   SGS-PATROL — design system (shared with Alarm Team; accent token = SGS blue)
   Wiguard section anatomy × futuristic 2026 security-tech skin
   --------------------------------------------------------------------------
   Fonts (load in <head> of every page):
   https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap
   --------------------------------------------------------------------------
   TOC
   01 Design tokens          08 Step cards
   02 Reset / base           09 About split, trust box, feature rows
   03 Typography & utilities 10 Dark bands, counters
   04 Buttons & links        11 Service cards, read-more
   05 Section head pattern   12 Project cards
   06 Header (topbar+nav)    13 Partner cards & marquee
   07 Hero slider            14 CTA band
   15 Page banner + breadcrumb   18 Back-to-top, misc
   16 Contact (cards/form/map)   19 Scroll-reveal utilities
   17 Footer                     20 Responsive
                                 21 Reduced motion
   ========================================================================== */

/* ==== 01 DESIGN TOKENS =================================================== */
:root {
  /* palette — evolved from Wiguard tokens */
  --bg-dark:        #070b1a;   /* deep near-black navy (was #070E20) */
  --bg-dark-3:      #0e1630;
  --bg-darkest:     #050814;
  --bg-light:       #f6f8fb;
  --bg-white:       #ffffff;

  --accent:         #d99b26;   /* SGS-Patrol crest gold (sampled #d09020–#e0b040) */
  --accent-bright:  #f2c65a;   /* bright end of the ramp */
  --accent-deep:    #8f620c;   /* AA-friendly deep gold for text on light */
  --teal:           #f5d572;   /* gradient partner: champagne */
  --teal-deep:      #7d5a10;

  --accent-grad:        linear-gradient(96deg, var(--accent) 0%, var(--teal) 100%);
  --accent-grad-bright: linear-gradient(96deg, var(--accent-bright) 0%, var(--teal) 100%);

  --ink:            #10141f;   /* headings on light */
  --ink-soft:       #566070;   /* body on light */
  --text-on-dark:   rgba(255, 255, 255, 0.72);
  --text-on-dark-strong: rgba(255, 255, 255, 0.88);

  --line-light:     rgba(16, 20, 35, 0.10);
  --line-accent:    rgba(217, 155, 38, 0.35);

  --glass-bg:       rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border:   rgba(255, 255, 255, 0.09);

  /* shadows / glows */
  --glow-green:     0 0 24px rgba(217, 155, 38, 0.35);
  --glow-ring:      0 0 0 1px rgba(217, 155, 38, 0.30), 0 10px 40px rgba(217, 155, 38, 0.20);
  --shadow-soft:    0 20px 50px rgba(7, 14, 32, 0.08);
  --shadow-lift:    0 30px 70px rgba(7, 14, 32, 0.14);
  --shadow-dark:    0 18px 50px rgba(0, 0, 0, 0.40);

  /* type */
  --font-head: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* shape */
  --radius:      18px;
  --radius-lg:   22px;
  --radius-sm:   12px;
  --radius-pill: 999px;

  /* layout */
  --container: 1170px;
  --gutter:    24px;
  --topbar-h:  44px;
  --nav-h:     84px;
  --header-h:  calc(var(--topbar-h) + var(--nav-h));

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==== 02 RESET / BASE ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

a {
  color: var(--accent-bright);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
a:hover { color: var(--teal); }

::selection { background: var(--accent); color: #1c1405; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 999;
  padding: 10px 18px;
  background: var(--accent);
  color: #1c1405;
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 0; color: #1c1405; }

/* ==== 03 TYPOGRAPHY & UTILITIES ========================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.55em;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(34px, 4.6vw, 48px); }
h2 { font-size: clamp(28px, 3.6vw, 38px); }
h3 { font-size: clamp(22px, 2.6vw, 28px); }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--text-on-dark-strong); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.text-center { text-align: center; }

.text-gradient {
  background: var(--accent-grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* section shells ---------------------------------------------------------- */
.section {
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0;
}
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* light section: airy white/off-white, dark text */
.section--light { background: var(--bg-light); color: var(--ink-soft); }
.section--white { background: var(--bg-white); color: var(--ink-soft); }
.section--light h1, .section--light h2, .section--light h3,
.section--light h4, .section--light h5, .section--light h6,
.section--white h1, .section--white h2, .section--white h3,
.section--white h4, .section--white h5, .section--white h6 { color: var(--ink); }
.section--light strong, .section--white strong { color: var(--ink); }
.section--light a:not(.btn), .section--white a:not(.btn) { color: var(--accent-deep); }
.section--light a:not(.btn):hover, .section--white a:not(.btn):hover { color: var(--teal-deep); }
.section--light .text-gradient, .section--white .text-gradient {
  background: linear-gradient(92deg, var(--accent-deep), var(--teal-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text-on-dark-strong);
}
.section--light .lead, .section--white .lead { color: #3c4553; }

/* gradient hairline divider */
.divider-grad {
  border: 0;
  height: 1px;
  margin: 32px 0;
  background: linear-gradient(90deg, transparent, var(--line-accent), transparent);
}

/* grid helpers ------------------------------------------------------------ */
.grid { display: grid; gap: 30px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* pill list (references, tags) */
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.pill {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-on-dark-strong);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pill:hover { border-color: var(--line-accent); box-shadow: var(--glow-green); }
.section--light .pill, .section--white .pill {
  background: #fff; border-color: var(--line-light); color: var(--ink);
  box-shadow: 0 4px 14px rgba(7, 14, 32, 0.05);
}
.section--light .pill:hover, .section--white .pill:hover { border-color: var(--line-accent); }

/* generic glass card */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ==== 04 BUTTONS & LINKS ================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* solid: neon green, dark text (7.5:1 contrast) */
.btn--solid {
  background: var(--accent-grad);
  color: #1c1405;
}
.btn--solid:hover {
  color: #1c1405;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(217, 155, 38, 0.45), 0 12px 38px rgba(217, 155, 38, 0.40);
}

/* outline: 1px neon border */
.btn--outline {
  background: transparent;
  border-color: rgba(217, 155, 38, 0.55);
  color: #ffffff;
}
.btn--outline:hover {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  box-shadow: var(--glow-green);
  transform: translateY(-2px);
}
.section--light .btn--outline, .section--white .btn--outline {
  color: var(--ink);
  border-color: var(--accent);
}
.section--light .btn--outline:hover, .section--white .btn--outline:hover { color: var(--accent-deep); }

.btn--sm { padding: 11px 22px; font-size: 12.5px; }
.btn--lg { padding: 19px 42px; font-size: 15px; }

/* Read-more text link: Wiguard double-bar underline, gradient fill */
.read-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 7px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.read-more::before,
.read-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
}
.read-more::before { width: 100%; background: rgba(127, 141, 160, 0.30); }
.read-more::after  { width: 0;    background: var(--accent-grad-bright); transition: width 0.35s var(--ease); }
.read-more:hover { color: var(--accent-bright); }
.read-more:hover::after { width: 100%; }
.read-more svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.read-more:hover svg { transform: translateX(4px); }
.section--light .read-more, .section--white .read-more { color: var(--accent-deep); }
.section--light .read-more:hover, .section--white .read-more:hover { color: var(--accent-deep); }

/* ==== 05 SECTION HEAD PATTERN (kicker + H2 + gradient divider) =========== */
.section-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 800px; }
.section-head--center { margin-inline: auto; text-align: center; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.section--light .kicker, .section--white .kicker { color: var(--accent-deep); }
.kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.section-head--center .kicker::after {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.section-title { margin-bottom: 18px; }

.title-sep {
  display: block;
  width: 64px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent-grad-bright);
  box-shadow: 0 0 14px rgba(217, 155, 38, 0.55);
}
.section-head--center .title-sep { margin-inline: auto; }

.section-lead { margin-top: 20px; font-size: 17px; }

/* ==== 06 HEADER =========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 0.35s var(--ease);
}
.site-header.is-scrolled { transform: translateY(calc(-1 * var(--topbar-h))); }

/* --- topbar --- */
.topbar {
  height: var(--topbar-h);
  background: rgba(5, 8, 20, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.topbar__contacts { display: flex; align-items: center; gap: 28px; }
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.topbar__item svg { width: 15px; height: 15px; color: var(--accent-bright); flex: none; }
.topbar__item:hover { color: var(--accent-bright); }

/* --- navbar --- */
.navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.site-header.is-scrolled .navbar,
body.nav-open .navbar {
  background: rgba(7, 11, 26, 0.80);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--nav-h);
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .navbar__inner { height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__logo {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(217, 155, 38, 0.30));
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .brand__logo { height: 40px; }
.brand__text {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}
.brand__text span {
  background: var(--accent-grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav { margin-left: auto; }
.nav__menu { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav__menu > li { position: relative; }
.nav__menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.nav__menu > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__menu > li > a:hover,
.nav__menu > li > a.is-active,
.nav__menu > li.is-active > a { color: var(--accent-bright); }
.nav__menu > li > a:hover::after,
.nav__menu > li > a.is-active::after,
.nav__menu > li.is-active > a::after { transform: scaleX(1); }

.nav__caret { width: 12px; height: 12px; opacity: 0.7; }

/* dropdown */
.nav__subtoggle { display: none; }
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 270px;
  padding: 10px;
  list-style: none;
  background: rgba(10, 17, 38, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--shadow-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav__dropdown:hover > .nav__submenu,
.nav__dropdown:focus-within > .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__submenu a {
  display: block;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              padding-left 0.25s var(--ease);
}
.nav__submenu a:hover,
.nav__submenu a.is-active {
  background: rgba(217, 155, 38, 0.12);
  color: var(--accent-bright);
  padding-left: 22px;
}

.navbar__cta { flex: none; }

/* hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  margin-left: auto;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==== 07 HERO SLIDER ====================================================== */
.hero {
  position: relative;
  min-height: clamp(600px, 96svh, 860px);
  background: var(--bg-dark);
  overflow: hidden;
}
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
  z-index: 1;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1);
}
.hero__slide.is-active .hero__bg { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 11, 26, 0.94) 18%, rgba(7, 11, 26, 0.62) 58%, rgba(7, 11, 26, 0.80) 100%),
    linear-gradient(0deg, var(--bg-dark) 0%, transparent 26%);
}

/* animated grid overlay — put class bg-grid on the section */
.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(217, 155, 38, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 155, 38, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 25%, transparent 78%);
}

/* slow scanline sweep */
.hero__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(217, 155, 38, 0.07), transparent);
  animation: scanline 9s linear infinite;
}
@keyframes scanline {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(100vh + 280px)); }
}

.hero__content {
  position: relative;
  z-index: 3;
  padding-top: calc(var(--header-h) + 24px);
  padding-bottom: 110px;
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.hero__kicker::before {
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-bright));
}
.hero__title {
  max-width: 15ch;
  margin-bottom: 24px;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero__text {
  max-width: 560px;
  margin-bottom: 36px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* staggered entrance of the active slide's layers */
.hero__kicker, .hero__title, .hero__text, .hero__actions { opacity: 0; }
.hero__slide.is-active .hero__kicker  { animation: hero-up 0.7s 0.20s var(--ease) both; }
.hero__slide.is-active .hero__title   { animation: hero-up 0.7s 0.35s var(--ease) both; }
.hero__slide.is-active .hero__text    { animation: hero-up 0.7s 0.50s var(--ease) both; }
.hero__slide.is-active .hero__actions { animation: hero-up 0.7s 0.65s var(--ease) both; }
@keyframes hero-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* arrows + dots */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow:hover { border-color: var(--accent); color: var(--accent-bright); box-shadow: var(--glow-green); }
.hero__arrow--prev { left: 28px; }
.hero__arrow--next { right: 28px; }

.hero__dots {
  position: absolute;
  bottom: 34px;
  left: 50%;
  z-index: 5;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.hero__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.hero__dots button.is-active {
  width: 30px;
  background: var(--accent-bright);
  box-shadow: 0 0 12px rgba(217, 155, 38, 0.65);
}

/* ==== 08 STEP CARDS (3 elevated cards pulled over the hero) ============== */
.step-cards {
  position: relative;
  z-index: 4;
  margin-top: -70px;
}
.step-card {
  position: relative;
  overflow: hidden;
  padding: 44px 32px 40px;
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  color: var(--ink-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.step-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(217, 155, 38, 0.25);
}
.step-card h3, .step-card h4 { color: var(--ink); font-size: 21px; margin-bottom: 12px; }
.step-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 18px;
  background: var(--accent-grad);
  color: #1c1405;
  box-shadow: 0 10px 26px rgba(217, 155, 38, 0.35);
  transition: transform 0.35s var(--ease);
}
.step-card__icon svg { width: 28px; height: 28px; }
.step-card__icon img { width: 34px; height: 34px; }
.step-card:hover .step-card__icon { transform: translateY(-4px) scale(1.05); }
.step-card__num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--font-head);
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(16, 20, 35, 0.14);
  pointer-events: none;
}

/* glass variant when placed on a dark band */
.dark-band .step-card, .step-card--glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
  color: var(--text-on-dark);
}
.dark-band .step-card h3, .dark-band .step-card h4,
.step-card--glass h3, .step-card--glass h4 { color: #fff; }
.dark-band .step-card__num, .step-card--glass .step-card__num {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
}
.dark-band .step-card:hover, .step-card--glass:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glow-ring);
}

/* ==== 09 ABOUT SPLIT, TRUST BOX, FEATURE ROWS ============================ */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}

.about-media { position: relative; }
.about-media__img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.about-media__img--overlap {
  position: absolute;
  right: -18px;
  bottom: -48px;
  width: 55%;
  border: 6px solid var(--bg-light);
}
.section--white .about-media__img--overlap { border-color: var(--bg-white); }
.dark-band .about-media__img--overlap { border-color: var(--bg-dark); }

/* trust box: gradient panel with pattern, overlaps the collage */
.trust-box {
  position: relative;
  z-index: 2;
  max-width: 320px;
  margin-top: -60px;
  margin-left: -14px;
  padding: 30px 30px 28px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px) 0 0 / 100% 12px,
    linear-gradient(120deg, var(--accent) 0%, var(--teal) 100%);
  color: #1c1405;
  box-shadow: 0 24px 60px rgba(217, 155, 38, 0.28);
}
.trust-box strong,
.trust-box .trust-box__title {
  display: block;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #1c1405;
}
.trust-box__num { font-size: 38px; display: block; line-height: 1.15; }

/* mission / vision rows */
.feature-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 26px;
  margin-bottom: 20px;
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  color: var(--ink-soft);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature-row h4 { color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.feature-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(217, 155, 38, 0.12);
  border: 1px solid rgba(217, 155, 38, 0.35);
  color: var(--accent-deep);
}
.feature-row__icon svg { width: 26px; height: 26px; }
.feature-row__icon img { width: 30px; height: 30px; }
.dark-band .feature-row {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  color: var(--text-on-dark);
}
.dark-band .feature-row h4 { color: #fff; }
.dark-band .feature-row__icon { color: var(--accent-bright); }

/* green-check icon list */
.check-list { list-style: none; }
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306130a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat,
    linear-gradient(120deg, var(--accent), var(--teal));
  box-shadow: 0 3px 10px rgba(217, 155, 38, 0.35);
}

/* ==== 10 DARK BANDS & COUNTERS =========================================== */
.dark-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(217, 155, 38, 0.13), transparent 60%),
    radial-gradient(820px 460px at 92% 112%, rgba(242, 198, 90, 0.10), transparent 60%),
    var(--bg-dark);
  color: var(--text-on-dark);
}
.dark-band > .container { position: relative; z-index: 3; }
.dark-band h1, .dark-band h2, .dark-band h3,
.dark-band h4, .dark-band h5, .dark-band h6 { color: #fff; }

/* photo background variant: add inline style background-image */
.dark-band--photo { background-size: cover; background-position: center; }
.dark-band--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(7, 11, 26, 0.88);
}

/* counters */
.counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.counter { position: relative; padding: 12px 18px; text-align: center; }
.counter + .counter::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(217, 155, 38, 0.45), transparent);
}
.counter__num {
  display: inline-block;
  font-family: var(--font-head);
  font-size: clamp(42px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  background: var(--accent-grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.counter__suffix {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 600;
  color: var(--teal);
  vertical-align: 14px;
}
.counter__label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.60);
}

/* feature boxes on dark bands ("best offers" pattern) */
.feature-box {
  position: relative;
  padding: 36px 30px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.feature-box:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 155, 38, 0.40);
  background: var(--glass-bg-hover);
  box-shadow: var(--glow-ring);
}
.feature-box h4 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.feature-box__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: rgba(217, 155, 38, 0.14);
  border: 1px solid rgba(217, 155, 38, 0.35);
  color: var(--accent-bright);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.feature-box__icon svg { width: 26px; height: 26px; }
.feature-box__icon img { width: 32px; height: 32px; }
.feature-box:hover .feature-box__icon {
  background: var(--accent-grad);
  color: #1c1405;
  transform: translateY(-3px);
}

/* ==== 11 SERVICE CARDS ==================================================== */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  color: var(--ink-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(217, 155, 38, 0.25);
}
/* gradient bottom bar sweeps in on hover (Wiguard's green border, upgraded) */
.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
}
.service-card:hover::after { transform: scaleX(1); }

.service-card__thumb { display: block; overflow: hidden; }
.service-card__thumb img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 3.5s var(--ease);
}
.service-card:hover .service-card__thumb img { transform: scale(1.12); }

.service-card__badge {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: -43px auto 0;
  border-radius: 50%;
  background: var(--bg-white);
  border: 1px solid rgba(217, 155, 38, 0.25);
  box-shadow: 0 12px 30px rgba(7, 14, 32, 0.14);
  transition: box-shadow 0.35s var(--ease);
}
.service-card:hover .service-card__badge { box-shadow: 0 12px 30px rgba(217, 155, 38, 0.35); }
.service-card__badge img { width: 46px; height: 46px; object-fit: contain; }
.service-card__badge svg { width: 38px; height: 38px; color: var(--accent-deep); }

.service-card__body { padding: 20px 28px 34px; display: flex; flex-direction: column; flex: 1; }
.service-card__title {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 15px;
  font-size: 21px;
}
.service-card__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent-grad-bright);
  transform: translateX(-50%);
}
.service-card__title a { color: var(--ink); }
.service-card__title a:hover { color: var(--accent-deep); }
.service-card p { margin-bottom: 20px; }
.service-card .read-more { margin-top: auto; align-self: center; }

/* glass variant on dark bands */
.dark-band .service-card, .service-card--glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
  color: var(--text-on-dark);
}
.dark-band .service-card:hover, .service-card--glass:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glow-ring);
}
.dark-band .service-card__title a, .service-card--glass .service-card__title a { color: #fff; }
.dark-band .service-card__title a:hover,
.service-card--glass .service-card__title a:hover { color: var(--accent-bright); }
.dark-band .service-card__badge, .service-card--glass .service-card__badge {
  background: var(--bg-dark-3);
  border-color: rgba(217, 155, 38, 0.40);
}

/* sidebar service menu (service detail pages) */
.service-menu { list-style: none; display: grid; gap: 8px; }
.service-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  border: 1px solid var(--line-light);
  font-weight: 600;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), padding-left 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-menu a::after { content: "→"; opacity: 0.5; transition: transform 0.3s var(--ease); }
.service-menu a:hover,
.service-menu a.is-active {
  background: var(--accent-grad);
  border-color: transparent;
  color: #1c1405;
  padding-left: 28px;
  box-shadow: 0 10px 30px rgba(217, 155, 38, 0.30);
}
.service-menu a:hover::after, .service-menu a.is-active::after { opacity: 1; transform: translateX(3px); }
.dark-band .service-menu a {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-on-dark-strong);
}
.dark-band .service-menu a:hover, .dark-band .service-menu a.is-active { color: #1c1405; }

/* ==== 12 PROJECT / PORTFOLIO CARDS ======================================= */
.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 4s var(--ease);
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 11, 26, 0.94) 0%, rgba(7, 11, 26, 0.25) 45%, transparent 70%);
  transition: background 0.35s var(--ease);
}
.project-card:hover { border-color: rgba(217, 155, 38, 0.45); box-shadow: var(--glow-ring); }
.project-card:hover img { transform: scale(1.16); }

.project-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 26px 24px;
}
.project-card__cat {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.project-card__title { margin: 0; font-size: 21px; color: #fff; }

.project-card__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
              background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.project-card__arrow svg { width: 18px; height: 18px; }
.project-card:hover .project-card__arrow {
  opacity: 1;
  transform: none;
  background: var(--accent);
  border-color: transparent;
  color: #1c1405;
}

/* ==== 13 PARTNER CARDS & MARQUEE ========================================= */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.partner-card {
  display: grid;
  place-items: center;
  height: 108px;
  padding: 18px 26px;
  background: var(--bg-white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.partner-card img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.78;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.partner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 155, 38, 0.45);
  box-shadow: 0 14px 40px rgba(7, 14, 32, 0.12);
}
.partner-card:hover img { filter: none; opacity: 1; }
.dark-band .partner-card { background: rgba(255, 255, 255, 0.93); border-color: transparent; }
.dark-band .partner-card:hover { box-shadow: var(--glow-green); }

/* infinite logo marquee — JS duplicates .marquee__group once */
.marquee {
  position: relative;
  overflow: hidden;
  --marquee-gap: 56px;
  --marquee-speed: 38s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-speed) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
  flex: none;
}
.marquee__group .partner-card { width: 190px; flex: none; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ==== 14 CTA BAND ========================================================= */
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.cta-band__inner h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.3;
}

/* ==== 15 PAGE BANNER (inner pages) + BREADCRUMB ========================== */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(52px, 7vw, 84px)) 0 clamp(52px, 7vw, 84px);
  background:
    radial-gradient(900px 460px at 15% 0%, rgba(217, 155, 38, 0.14), transparent 60%),
    radial-gradient(700px 400px at 88% 100%, rgba(242, 198, 90, 0.10), transparent 60%),
    var(--bg-dark);
}
.page-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center;
  background-size: cover;
  opacity: 0.26;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  z-index: 2;
  background: linear-gradient(0deg, var(--bg-dark), transparent);
}
.page-banner > .container { position: relative; z-index: 3; text-align: center; }
.page-banner h1 { margin-bottom: 0; }
.page-banner .kicker { justify-content: center; }

.breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  list-style: none;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.breadcrumb a { color: var(--accent-bright); }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb li + li::before {
  content: "›";
  margin-right: 10px;
  opacity: 0.5;
}

/* ==== 16 CONTACT: INFO CARDS, FORM, MAP ================================== */
.info-card {
  padding: 40px 28px;
  text-align: center;
  background: var(--bg-white);
  border: 1px solid rgba(217, 155, 38, 0.35);
  border-radius: var(--radius);
  color: var(--ink-soft);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.info-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(217, 155, 38, 0.18);
}
.info-card h4 { color: var(--ink); font-size: 19px; margin-bottom: 8px; }
.info-card a { font-weight: 600; }
.info-card__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: rgba(217, 155, 38, 0.12);
  border: 1px solid rgba(217, 155, 38, 0.35);
  color: var(--accent-deep);
}
.info-card__icon svg { width: 28px; height: 28px; }
.dark-band .info-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text-on-dark);
}
.dark-band .info-card h4 { color: #fff; }
.dark-band .info-card__icon { color: var(--accent-bright); }

/* form + map split */
.contact-split {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 34px;
  align-items: stretch;
}

.contact-panel {
  padding: clamp(30px, 4vw, 48px) clamp(24px, 3.4vw, 42px);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(7, 14, 32, 0.12);
  color: var(--ink-soft);
}
.contact-panel h3 { color: var(--ink); }
.dark-band .contact-panel, .contact-panel--glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
  color: var(--text-on-dark);
}
.dark-band .contact-panel h3, .contact-panel--glass h3 { color: #fff; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .form-field--full { grid-column: 1 / -1; }

.form-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #dfe5ee;
  border-radius: var(--radius-sm);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.form-field textarea { height: auto; min-height: 150px; padding: 14px 18px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #97a1b0; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(217, 155, 38, 0.15);
}
/* dark / glass form variant */
.dark-band .form-field input,
.dark-band .form-field select,
.dark-band .form-field textarea,
.contact-panel--glass .form-field input,
.contact-panel--glass .form-field select,
.contact-panel--glass .form-field textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.dark-band .form-field input::placeholder,
.dark-band .form-field textarea::placeholder,
.contact-panel--glass .form-field input::placeholder,
.contact-panel--glass .form-field textarea::placeholder { color: rgba(255, 255, 255, 0.40); }

/* status notice shown after the mailto fallback fires (kapcsolat.html) */
.form-note {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-on-dark);
}
.form-note a { color: var(--accent-bright); font-weight: 600; }
.form-note a:hover { color: var(--teal); }

.map-frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-light);
  min-height: 420px;
}
.dark-band .map-frame { border-color: var(--glass-border); }
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* ==== 17 FOOTER =========================================================== */
.site-footer { position: relative; color: rgba(255, 255, 255, 0.68); }

/* gradient contact strip — overlaps down into the footer (Wiguard anatomy) */
.footer-strip-wrap {
  position: relative;
  z-index: 3;
  margin-bottom: -62px;
}
.footer-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 26px clamp(22px, 3.5vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, var(--accent) 0%, var(--teal) 100%);
  color: #1c1405;
  box-shadow: 0 24px 60px rgba(217, 155, 38, 0.28);
}
.footer-strip__item { display: flex; align-items: center; gap: 18px; min-width: 0; }
.footer-strip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #1c1405;
}
.footer-strip__icon svg { width: 26px; height: 26px; }
.footer-strip__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.footer-strip__value {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  color: #1c1405;
  overflow-wrap: anywhere;
}
.footer-strip__value a { color: #1c1405; }
.footer-strip__value a:hover { color: #0b3a22; text-decoration: underline; }

/* main footer */
.footer-mid {
  padding: 122px 0 40px;
  background:
    radial-gradient(800px 400px at 85% 0%, rgba(242, 198, 90, 0.07), transparent 60%),
    radial-gradient(700px 380px at 8% 100%, rgba(217, 155, 38, 0.08), transparent 60%),
    var(--bg-darkest);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1.1fr 1.25fr;
  gap: clamp(28px, 4vw, 48px);
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand img { height: 44px; width: auto; filter: drop-shadow(0 0 12px rgba(217, 155, 38, 0.30)); }
.footer-brand span {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.footer-about { font-size: 15px; }

.footer-title {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 12px;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad-bright);
  box-shadow: 0 0 10px rgba(217, 155, 38, 0.55);
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 4px; }
.footer-links a {
  display: inline-block;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-links a:hover { color: var(--accent-bright); transform: translateX(4px); }

.footer-contact { list-style: none; font-size: 15px; }
.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.footer-contact svg { flex: none; width: 17px; height: 17px; margin-top: 5px; color: var(--accent-bright); }
.footer-contact a { color: rgba(255, 255, 255, 0.78); }
.footer-contact a:hover { color: var(--accent-bright); }
.footer-meta { font-size: 13.5px; color: rgba(255, 255, 255, 0.45); }

.footer-social { display: flex; gap: 10px; margin-top: 20px; list-style: none; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-social a:hover {
  background: var(--accent-grad);
  border-color: transparent;
  color: #1c1405;
  transform: translateY(-3px);
  box-shadow: var(--glow-green);
}
.footer-social svg { width: 18px; height: 18px; }

.footer-bottom {
  padding: 16px 0;
  background: var(--bg-darkest);
  font-size: 14px;
  text-align: center;
}
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.footer-bottom p { margin: 0; }
.footer-bottom p a { color: rgba(255, 255, 255, 0.75); }
.footer-bottom p a:hover { color: var(--accent-bright); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; }
.footer-legal a { color: rgba(255, 255, 255, 0.55); font-size: 13.5px; }
.footer-legal a:hover { color: var(--accent-bright); }

/* ==== 18 BACK-TO-TOP & MISC =============================================== */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #1c1405;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              visibility 0.3s, box-shadow 0.3s var(--ease);
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { box-shadow: 0 0 0 1px rgba(217, 155, 38, 0.45), 0 10px 34px rgba(217, 155, 38, 0.45); }

/* ==== 19 SCROLL-REVEAL UTILITIES ========================================= */
/* Hidden state only applies when JS is running (html.js set by main.js). */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
html.js .reveal--left  { transform: translateX(-34px); }
html.js .reveal--right { transform: translateX(34px); }
html.js .reveal--zoom  { transform: scale(0.94); }
html.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ==== 20 RESPONSIVE ======================================================= */
@media (max-width: 1200px) {
  .hero__arrow--prev { left: 14px; }
  .hero__arrow--next { right: 14px; }
}

@media (max-width: 1024px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .counter-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .counter + .counter::before { display: none; }
  .step-cards { margin-top: 48px; }
  .about-split, .contact-split { grid-template-columns: 1fr; }
  .about-media { max-width: 560px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band__inner { justify-content: center; text-align: center; }
}

@media (max-width: 991px) {
  :root { --topbar-h: 0px; --nav-h: 68px; }
  .topbar { display: none; }

  .navbar {
    background: rgba(7, 11, 26, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .site-header.is-scrolled { transform: none; }
  .site-header.is-scrolled .navbar__inner { height: var(--nav-h); }
  .brand__logo, .site-header.is-scrolled .brand__logo { height: 38px; }
  .brand__text { font-size: 18px; }
  .navbar__cta { display: none; }
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 99;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    margin-left: 0;
    background: rgba(6, 9, 22, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }

  .nav__menu { flex-direction: column; align-items: stretch; gap: 0; padding: 14px 22px 26px; }
  .nav__menu > li > a {
    display: flex;
    width: 100%;
    padding: 14px 4px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav__menu > li > a::after { display: none; }
  .nav__caret { display: none; }

  .nav__dropdown { position: relative; }
  .nav__subtoggle {
    position: absolute;
    top: 5px;
    right: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
  }
  .nav__subtoggle svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
  .nav__dropdown.open .nav__subtoggle svg { transform: rotate(180deg); }

  .nav__submenu {
    position: static;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: max-height 0.35s var(--ease);
  }
  .nav__dropdown.open .nav__submenu { max-height: 340px; }
  .nav__submenu a { padding: 11px 18px; font-size: 14px; }
  .nav__submenu a:hover, .nav__submenu a.is-active { padding-left: 24px; }
}

@media (max-width: 767px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-strip { grid-template-columns: 1fr; padding: 28px 24px; }
  .footer-strip-wrap { margin-bottom: -120px; }
  .footer-mid { padding-top: 154px; }
  .footer-bottom .container { justify-content: center; text-align: center; }

  .hero { min-height: 560px; }
  .hero__content { padding-bottom: 96px; }
  .hero__arrow { width: 42px; height: 42px; }
  .hero__arrow--prev { left: 10px; }
  .hero__arrow--next { right: 10px; }

  .step-cards { margin-top: 40px; }
  .trust-box { margin-left: 0; max-width: none; }
  .about-media__img--overlap { position: static; width: 70%; margin: -40px 0 0 auto; }

  .counter-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 425px) {
  .counter-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .back-to-top { width: 38px; height: 38px; right: 18px; bottom: 18px; }
  .btn { padding: 15px 26px; }
}

/* ==== 21 REDUCED MOTION =================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__slide.is-active .hero__bg { animation: none; }
  .hero__scan { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee__group { flex-wrap: wrap; }
  .marquee__group[aria-hidden="true"] { display: none; }
  html.js .reveal { opacity: 1; transform: none; }
  .hero__kicker, .hero__title, .hero__text, .hero__actions { opacity: 1; }
}

/* ==== 22 SERVICE DETAIL LAYOUT (service subpages: sidebar + content) ====== */
.service-detail {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
.service-aside {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: grid;
  gap: 30px;
}
.side-title {
  position: relative;
  font-size: 20px;
  margin-bottom: 18px;
  padding-bottom: 12px;
}
.side-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-grad);
}

/* dark contact promo box in the sidebar */
.promo-card {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(320px 220px at 88% -18%, rgba(217, 155, 38, 0.22), transparent 65%),
    radial-gradient(300px 220px at -10% 112%, rgba(242, 198, 90, 0.16), transparent 60%),
    var(--bg-dark);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-dark);
}
.section--light .promo-card h4, .section--white .promo-card h4,
.promo-card h4 { color: #ffffff; }
.promo-card p { font-size: 15px; }
.promo-card__mark {
  position: absolute;
  right: -26px;
  bottom: -32px;
  width: 150px;
  opacity: 0.14;
  pointer-events: none;
}
.promo-card__contact {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin: 18px 0 24px;
}
.service-aside .promo-card__contact a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-on-dark-strong);
  font-weight: 600;
}
.service-aside .promo-card__contact a:hover { color: var(--accent-bright); }
.promo-card__contact svg { width: 18px; height: 18px; flex: none; color: var(--accent-bright); }
.promo-card__phone { font-family: var(--font-head); font-size: 19px; letter-spacing: 0.01em; }
.promo-card .btn { position: relative; z-index: 1; width: 100%; }

/* main column */
.service-figure {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-lift);
  margin-bottom: 38px;
}
.service-content h3 { margin-top: 38px; }
.check-list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}

/* gradient CTA strip at the end of the content column */
.detail-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px) 0 0 / 100% 12px,
    linear-gradient(120deg, var(--accent) 0%, var(--teal) 100%);
  color: #1c1405;
  box-shadow: 0 24px 60px rgba(217, 155, 38, 0.28);
}
.section--light .detail-cta h4, .section--white .detail-cta h4,
.detail-cta h4 { margin: 0; color: #1c1405; font-size: 23px; }
.detail-cta p { margin: 6px 0 0; color: rgba(6, 19, 10, 0.78); font-weight: 500; }

/* dark button (for use on the green gradient strip) */
.btn--dark {
  background: var(--bg-dark);
  color: #ffffff;
}
.btn--dark:hover {
  color: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(7, 11, 26, 0.35);
}

@media (max-width: 1024px) {
  .service-detail { grid-template-columns: 1fr; }
  .service-aside { position: static; order: 2; }
  .service-content { order: 1; }
}
@media (max-width: 767px) {
  .check-list--2col { grid-template-columns: 1fr; }
  .detail-cta { padding: 26px 24px; }
}

/* ==========================================================================
   SGS-Patrol additions — image-free service thumbs + non-numeric counters
   (SGS has no per-service photography; these keep the card anatomy intact)
   ========================================================================== */
/* (gradient card band removed — real photos are used again) */

/* counters whose value is not a number (0–24, OKF, Országos) */
.counter__text {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  color: var(--text-on-dark-strong);
  letter-spacing: -0.01em;
}
.counter__text em {
  font-style: normal;
  background: var(--accent-grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* taller gradient panel used in place of a photo on service detail pages */

/* SGS crest is a wide shield with an internal wordmark — give it a little more
   height than the Alarm Team mark so the emblem reads at header size. */
.brand__logo { height: 52px; }
.site-header.is-scrolled .brand__logo { height: 44px; }
.footer-brand img { height: 60px; }

/* --------------------------------------------------------------------------
   Header CTA moved into the topbar (Ügyfélkapu). Two consequences handled:
   1. the navbar right slot is empty -> push the menu to the right edge
   2. the topbar is hidden ≤991px -> surface Ügyfélkapu inside the mobile menu
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .navbar__inner > .nav__menu { margin-left: auto; }
  .nav__menu-portal { display: none; }
}
@media (max-width: 991px) {
  .nav__menu > li.nav__menu-portal > a { color: var(--accent-bright); font-weight: 600; }
}

/* --------------------------------------------------------------------------
   Compact footer: the three link columns were removed, so the remaining
   brand block is centred and width-capped instead of sitting in a 4-col grid.
   -------------------------------------------------------------------------- */
.footer-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.footer-about { max-width: 620px; font-size: 15px; }
.footer-about p { margin: 14px 0 0; }
.footer-brand { display: inline-block; }
.footer-social { justify-content: center; margin-top: 18px; }

/* gold contact strip: 3 across on wide screens, 2 on mid, 1 on mobile */
@media (max-width: 1100px) and (min-width: 768px) {
  .footer-strip { grid-template-columns: 1fr 1fr; }
}

.map-frame__credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: #3c4553;
  font-size: 11px;
  line-height: 1.4;
  text-decoration: none;
}
.map-frame__credit:hover { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   Contact block compaction — the map matches the form panel's height, so the
   panel is what actually drives it. Tighter padding, gaps and textarea.
   -------------------------------------------------------------------------- */
.contact-split .contact-panel { padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.6vw, 32px); }
.contact-split .contact-panel > h3 { margin-bottom: 18px; }
.contact-split .form-grid { gap: 14px; }
.contact-split .form-field textarea { min-height: 104px; }
.contact-split .form-field label { margin-bottom: 5px; }
.contact-split .footer-meta { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
.map-frame { min-height: 340px; }
.map-frame__crop iframe,
.map-frame iframe { min-height: calc(340px + 26px); }

/* --------------------------------------------------------------------------
   Map interaction: the page must never zoom the embed on wheel-scroll, but the
   OSM +/- buttons have to stay clickable. The embed runs MapLibre GL and puts
   its zoom control at the TOP-RIGHT (buttons 29x29 at ~10px inset, 58px tall),
   so the blockers leave that corner open.
   -------------------------------------------------------------------------- */
.map-frame { position: relative; }
.map-frame__crop { position: absolute; inset: 0; overflow: hidden; }
.map-frame__block { position: absolute; z-index: 1; }
.map-frame__block--top  { top: 0; left: 0; right: 58px; height: 84px; }
.map-frame__block--rest { top: 84px; left: 0; right: 0; bottom: 0; }

/* Slimmer contact block: the form panel drives the row height, so tighten it
   further and let the map follow. */
.contact-split .contact-panel { padding: clamp(20px, 2.1vw, 26px) clamp(18px, 2.1vw, 26px); }
.contact-split .contact-panel > h3 { margin-bottom: 14px; font-size: 21px; }
.contact-split .form-grid { gap: 11px; }
.contact-split .form-field input { height: 46px; }
.contact-split .form-field textarea { min-height: 82px; }
.contact-split .form-field label { margin-bottom: 4px; font-size: 13px; }
.contact-split .footer-meta { margin-top: 8px; font-size: 12px; line-height: 1.45; }
.map-frame { min-height: 300px; }
.map-frame__crop iframe,
.map-frame iframe { min-height: calc(300px + 26px); }

/* Service detail hero panel: same light treatment, icon kept (no badge there) */
/* badge sits on a light band now — give it a warm ring instead of a hard shadow */
.service-card__badge {
  border-color: rgba(217, 155, 38, 0.35);
  box-shadow: 0 10px 24px rgba(143, 98, 12, 0.14);
}
.service-card:hover .service-card__badge { box-shadow: 0 12px 28px rgba(217, 155, 38, 0.30); }

/* hero fine-tuning: slightly lighter headline weight, marginally smaller lead */
.hero__title { font-weight: 600; }
.hero__text { font-size: 16.5px; }

/* --------------------------------------------------------------------------
   Process strip: five numbered cards under their own section head. No longer
   pulled up over the hero (a heading needs air), and it wraps 5 -> 3 -> 2 -> 1.
   -------------------------------------------------------------------------- */
.step-head { margin-bottom: 42px; }
.step-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
}
.step-grid .step-card { padding: 34px 22px 30px; height: 100%; }
.step-grid .step-card h3 { font-size: 18px; }
.step-grid .step-card p { font-size: 14.5px; line-height: 1.65; }
.step-grid .step-card__num { font-size: 46px; }
.step-grid .step-card__icon { width: 54px; height: 54px; }
.step-grid .step-card__icon svg { width: 25px; height: 25px; }

@media (max-width: 1200px) { .step-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .step-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Process block pulled up so the heading AND the top of the cards sit over the
   dark hero. Heading therefore needs light-on-dark colours.
   -------------------------------------------------------------------------- */
.step-block {
  position: relative;
  z-index: 4;
  margin-top: -212px;
}
.step-head { margin-bottom: 34px; }
.section--light .step-head .section-title { color: #ffffff; }
.step-head .title-sep { background: var(--accent-grad-bright); }

/* lift the hero copy so there is a black band under it for the process heading */
.hero--static .hero__content { padding-bottom: 345px; }
.step-head { margin-bottom: 24px; }
.step-block { margin-top: -197px; }

/* The overlap only works where the hero is tall enough to host the heading.
   Below that, drop it and put the heading back on the light section. */
@media (max-width: 991px) {
  .hero--static .hero__content { padding-bottom: 110px; }
  .step-block { margin-top: -46px; }
  .section--light .step-head .section-title { color: var(--ink); }
  .step-head { margin-bottom: 30px; }
}
@media (max-width: 767px) {
  .step-block { margin-top: 0; }
  .section.section--flush-top { padding-top: clamp(48px, 8vw, 70px); }
}

/* "Hogy dolgozunk mi" — small uppercase label rather than a full section title */
.step-head .section-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.step-head .title-sep { width: 48px; height: 2px; }
.step-head { margin-bottom: 26px; }

/* Six steps read better as 3x2 than as one cramped row of six */
.step-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-grid .step-card { padding: 38px 26px 34px; }
.step-grid .step-card h3 { font-size: 19px; }
.step-grid .step-card p { font-size: 15px; }
.step-grid .step-card__num { font-size: 54px; }
@media (max-width: 1200px) { .step-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .step-grid { grid-template-columns: 1fr; } }

/* more air between the navbar and the hero kicker */
.hero--static .hero__content { padding-top: calc(var(--header-h) + 78px); }

/* the static hero carries both a taller top gap and a black band for the
   process heading, so it needs a little more room than the slider version */
.hero--static { min-height: clamp(660px, 104svh, 960px); }

/* "Ismerje meg cégünket" parked at the hero's top-right, stacked under the
   KAPCSOLAT menu item (which itself sits under ÜGYFÉLKAPU in the topbar). */
.hero__corner {
  position: absolute;
  top: calc(var(--header-h) + 26px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.hero__corner .btn { pointer-events: auto; }
@media (max-width: 991px) { .hero__corner { display: none; } }

/* anchor jump must clear the fixed header */
#hogy-dolgozunk { scroll-margin-top: calc(var(--header-h) + 34px); }

/* ==========================================================================
   INTRO OVERLAY — first visit only. The navbar logo scales up out of the
   top-left corner to fill the screen, then the language flags fade in.
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--bg-darkest);
}
.intro[hidden] { display: none; }
body.intro-open { overflow: hidden; }

.intro__inner { text-align: center; padding: 24px; }

.intro__brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  transform-origin: center center;
  animation: intro-zoom 3.1s cubic-bezier(0.25, 0.9, 0.3, 1) both;
}
.intro__logo {
  height: clamp(150px, 26vw, 300px);
  width: auto;
}

/* start: small, up in the top-left corner (roughly where the navbar mark sits) */
@keyframes intro-zoom {
  from { transform: scale(0.35); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.intro__hint {
  margin: clamp(26px, 4vh, 46px) 0 18px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  animation: intro-rise 0.7s 2.95s var(--ease) both;
}
.intro__flags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 30px);
}
.intro__flag {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 20px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  animation: intro-rise 0.7s var(--ease) both;
}
.intro__flag:nth-child(1) { animation-delay: 3.05s; }
.intro__flag:nth-child(2) { animation-delay: 3.20s; }
.intro__flag:nth-child(3) { animation-delay: 3.35s; }
.intro__flag svg {
  width: clamp(56px, 7vw, 78px);
  height: auto;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.intro__flag span {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.intro__flag:hover,
.intro__flag:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(217, 155, 38, 0.55);
  background: rgba(217, 155, 38, 0.10);
  color: #fff;
}
.intro__skip {
  margin-top: clamp(24px, 4vh, 42px);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
  animation: intro-rise 0.6s 3.7s var(--ease) both;
}
.intro__skip:hover { color: var(--accent-bright); }

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro__brand, .intro__hint, .intro__flag, .intro__skip { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   WELCOME PAGE (udvozlet.html) — portrait + greeting in the chosen language
   ========================================================================== */
.welcome {
  min-height: 100svh;
  display: grid;
  align-items: center;
  background:
    radial-gradient(900px 520px at 78% 10%, rgba(217, 155, 38, 0.13), transparent 62%),
    var(--bg-dark);
}
.welcome__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.welcome__media img {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  background: linear-gradient(150deg, #0d1428, #16213c);
}
.welcome__lang[hidden] { display: none; }
.welcome__lang h1 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 16px; }
.welcome__lang .title-sep { margin-bottom: 24px; }
.welcome__lang p { color: var(--text-on-dark); font-size: 16.5px; margin-bottom: 14px; max-width: 62ch; }
.welcome__sign {
  margin-top: 24px !important;
  font-family: var(--font-head);
  font-weight: 700;
  color: #fff;
}
.welcome__sign span {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--accent-bright);
}
.welcome__cta { margin-top: 30px; }

@media (max-width: 900px) {
  .welcome__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .welcome__lang p { margin-left: auto; margin-right: auto; }
  .welcome__portrait { max-width: 300px; }
}


/* Portrait placeholder — SGS has no photo of a person on file yet, so this
   reads as an intentional empty frame rather than a broken image. */
.portrait-ph {
  margin: 0;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  display: grid;
  place-content: center;
  gap: 16px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(217, 155, 38, 0.38);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(217, 155, 38, 0.10), transparent 62%),
    linear-gradient(150deg, #0c1428, #16213c);
  color: rgba(255, 255, 255, 0.34);
  text-align: center;
}
.portrait-ph svg { width: 86px; height: 86px; justify-self: center; }
.portrait-ph figcaption {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.portrait-ph figcaption span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.26);
}

/* Managing Director's portrait on the welcome page */
.welcome__portrait {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

/* Footer: brand block left-aligned with its social row, bigger mark, smaller icons */
.footer-grid { justify-items: start; text-align: left; }
.footer-about { max-width: 760px; }
.footer-social { justify-content: flex-start; }
.footer-social a { width: 34px; height: 34px; }
.footer-social svg { width: 16px; height: 16px; }
.footer-brand img { height: 86px; }

/* trust box: "30" + "év" */
/* "30 év" must read as one unit on a single line */
.trust-box__num { display: inline; }
.trust-box__unit {
  display: inline;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  margin-left: 7px;
}
.trust-box strong { margin-top: 10px; }

/* five counters now — one row on wide screens, then 3+2, 2, 1 */
.counter-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .counter-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; } }
@media (max-width: 900px)  { .counter-grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } }
@media (max-width: 575px)  { .counter-grid { grid-template-columns: 1fr; } }
/* the divider only makes sense between items on the same row */
.counter + .counter::before { display: none; }

/* Netlify honeypot field must never be visible to a human */
.is-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Thank-you page */
.thanks-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--ink-soft);
}
.thanks-card__icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #1c1405;
  box-shadow: 0 16px 36px rgba(217, 155, 38, 0.32);
}
.thanks-card__icon svg { width: 36px; height: 36px; }
.thanks-card h2 { color: var(--ink); margin-bottom: 14px; }
.thanks-card .title-sep { margin: 0 auto 24px; }
.thanks-card p { margin-bottom: 14px; }
.thanks-card a { color: var(--accent-deep); }
.thanks-card__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* --------------------------------------------------------------------------
   Light veil over a photo band: the picture shows through a white wash instead
   of the dark navy one, so headings go dark while the cards stay dark glass.
   -------------------------------------------------------------------------- */
.dark-band--veil::after { background: rgba(255, 255, 255, 0.82); }
.dark-band--veil .kicker { color: var(--accent-deep); }
.dark-band--veil .section-title,
.dark-band--veil h2 { color: var(--ink); }
.dark-band--veil .section-lead,
.dark-band--veil > .container > p { color: var(--ink-soft); }

.dark-band--veil .step-card {
  background: rgba(10, 17, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.dark-band--veil .step-card h3 { color: #ffffff; }
.dark-band--veil .step-card p { color: rgba(255, 255, 255, 0.78); }
.dark-band--veil .step-card__num { color: rgba(255, 255, 255, 0.14); }

/* On the light-veil band the generic dark-band hover (a white wash) would turn
   the card almost white under the white text — darken on hover instead. */
.dark-band--veil .step-card:hover {
  background: rgba(10, 17, 38, 0.86);
  border-color: rgba(217, 155, 38, 0.45);
  box-shadow: var(--glow-ring);
}

/* Statutory company data line at the very bottom */
.footer-bottom .container { display: block; }
.footer-regdata {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.46);
}
.footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 767px) {
  .footer-bottom__row { justify-content: center; text-align: center; }
  .footer-regdata { text-align: center; }
}

/* A dark band above the gold contact strip — the white section used to run
   straight into the gold, which read as an abrupt colour jump. */
.site-footer { background: var(--bg-darkest); }
.footer-strip-wrap { padding-top: 76px; }
@media (max-width: 767px) { .footer-strip-wrap { padding-top: 54px; } }

/* info-cards need the same treatment as step-cards on a light-veil band:
   the dark-band default is a white glass, invisible against a white wash. */
.dark-band--veil .info-card {
  background: rgba(10, 17, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.78);
}
.dark-band--veil .info-card:hover {
  background: rgba(10, 17, 38, 0.86);
  border-color: rgba(217, 155, 38, 0.45);
}
.dark-band--veil .info-card h4 { color: #ffffff; }
.dark-band--veil .info-card p { color: rgba(255, 255, 255, 0.78); }
.dark-band--veil .info-card a { color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   Fixes: 1) the light-veil band ended in a hard seam against the white section
   below, 2) the OSM attribution wraps to two lines so 26px of crop no longer
   hid it, 3) the footer logo and blurb sit side by side instead of stacked.
   -------------------------------------------------------------------------- */

/* 1 — fade the veil band out into the next (white) section */
.dark-band--veil::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}

/* 2 — deeper crop so the two-line OSM bar stays out of sight */
.map-frame__crop iframe { height: calc(100% + 58px); min-height: calc(300px + 58px); }

/* 3 — footer brand: shield on the left, text beside it */
.footer-about {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 26px;
  align-items: center;
  max-width: 820px;
}
.footer-brand { grid-row: 1 / span 2; align-self: center; }
.footer-about > p { margin: 0; align-self: end; }
.footer-social { align-self: start; margin-top: 14px; }
@media (max-width: 767px) {
  .footer-about { grid-template-columns: 1fr; row-gap: 16px; justify-items: center; text-align: center; }
  .footer-brand { grid-row: auto; }
  .footer-social { justify-content: center; }
}

/* Company data moved into the footer's right-hand column, one line each */
.footer-grid { grid-template-columns: 1fr auto; column-gap: clamp(30px, 5vw, 70px); align-items: start; }
.footer-regdata {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: end;
  text-align: right;
  border: 0;
  padding: 0;
}
.footer-regdata div { display: grid; gap: 2px; }
.footer-regdata dt {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.footer-regdata dd {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .footer-regdata { justify-items: start; text-align: left; }
}

/* This control-room photo is busier than the others — wash it out further */
.dark-band--veil-strong::after { background: rgba(255, 255, 255, 0.91); }

/* partner logo tiles sit on the light-veil band on partnereink.html */
.dark-band--veil .partner-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.dark-band--veil .partner-card:hover { background: #ffffff; }

/* --------------------------------------------------------------------------
   Language switcher in the topbar (HU / EN / DE)
   -------------------------------------------------------------------------- */
.topbar__right { display: flex; align-items: center; gap: 16px; }
.lang-switch { display: flex; align-items: center; gap: 6px; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.lang-switch a svg { width: 18px; height: auto; border-radius: 2px; display: block; }
.lang-switch a:hover { color: #fff; border-color: rgba(217, 155, 38, 0.45); }
.lang-switch a.is-active {
  color: #fff;
  border-color: rgba(217, 155, 38, 0.7);
  background: rgba(217, 155, 38, 0.14);
}
@media (max-width: 991px) {
  .lang-switch { gap: 4px; }
  .lang-switch a span { display: none; }
  .lang-switch a { padding: 4px 6px; }
}

/* Contact form status line (Formspree submit feedback) */
.form-status {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-deep);
}
.form-status--error { color: #b3261e; }