/* ========================================================================== 
   GENZZZ MARKETING AGENCY — LANDING PAGE STYLES
   --------------------------------------------------------------------------
   Tartalomjegyzék
   01. Design tokenek / alapok
   02. Fix háttér és globális motion rétegek
   03. Fejléc és navigáció
   04. Hero
   05. Marquee és pozicionálás
   06. Portfólió
   08. Folyamat és működési elvek
   09. FAQ
   10. Kapcsolat és footer
   11. Animációk
   12. Reszponzív töréspontok
   13. Akadálymentesség / reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. DESIGN TOKENEK / ALAPOK
   -------------------------------------------------------------------------- */

@property --scene-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 72%;
}

@property --scene-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 18%;
}

@property --scene-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.14;
}

:root {
  color-scheme: dark;

  --bg: #040713;
  --bg-deep: #02040c;
  --surface: rgba(12, 18, 40, 0.68);
  --surface-strong: rgba(17, 25, 55, 0.92);
  --surface-soft: rgba(255, 255, 255, 0.045);
  --line: rgba(173, 196, 255, 0.16);
  --line-strong: rgba(190, 209, 255, 0.28);
  --text: #f5f7ff;
  --text-soft: #b7c0dc;
  --muted: #7f89a8;
  --accent: #6f8cff;
  --accent-bright: #3cc8ff;
  --accent-violet: #8aa6ff;
  --gold: #d6b66f;
  --gold-bright: #f2d995;
  --gold-soft: rgba(214, 182, 111, 0.18);
  --signal: #d4ddff;
  --positive: #85f5cd;
  --danger: #ff9aaf;

  /* A JS jelenetváltáskor finoman módosítja ezeket. */
  --scene-x: 72%;
  --scene-y: 18%;
  --scene-size: 60rem;
  --scene-opacity: 0.18;
  --process-progress: 0;
  --process-line-height: 0%;
  --process-gold: 0;
  --constellation-cutoff: 100svh;

  --font-sans: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --page: min(1440px, calc(100vw - 64px));
  --gutter: clamp(1.25rem, 3vw, 4rem);
  --section-space: clamp(7rem, 12vw, 12rem);
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.2, 0.85, 0.15, 1.2);
  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--bg-deep);
}

body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  color: #06101d;
  background: #9ae5ff;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

p,
h1,
h2,
h3 {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-shell {
  width: var(--page);
  max-width: 100%;
  margin-inline: auto;
}

/* Grid/flex gyerekeknél megakadályozza, hogy a belső, görgethető sorok
   a viewportnál szélesebbre kényszerítsék a teljes dokumentumot. */
.services-layout > *,
.process-layout > *,
.faq-layout > *,
.contact-layout > *,
.principles-grid > *,
.work-heading > *,
.positioning-detail > * {
  min-width: 0;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  color: #020713;
  background: #ffffff;
  border-radius: 999px;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.section-scene {
  position: relative;
  isolation: isolate;
}

section[id]:not(#top),
article[id] {
  scroll-margin-top: 6.5rem;
}

.section-kicker,
.eyebrow,
.meta-label,
.section-index,
.service-item header p,
.process-step > div:last-child > p:first-child,
.footer-column > span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-kicker {
  margin-bottom: 1.25rem;
  color: #9ba9d2;
}

.section-kicker::before {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: 0.65rem;
  vertical-align: middle;
  content: "";
  background: currentColor;
  opacity: 0.65;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(3rem, 6.2vw, 6.6rem);
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  font-size: 0.9rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.text-link span {
  position: relative;
}

.text-link span::after {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0.25);
  transform-origin: left;
  opacity: 0.55;
  transition: transform 400ms var(--ease-out);
}

.text-link:hover span::after,
.text-link:focus-visible span::after {
  transform: scaleX(1);
}

.text-link svg,
.button svg,
.header-cta svg,
.contact-email svg {
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 350ms var(--ease-out);
}

.text-link:hover svg,
.button:hover svg,
.header-cta:hover svg,
.contact-email:hover svg {
  transform: translateX(0.25rem);
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.7rem;
  padding: 0.95rem 1.25rem 0.95rem 1.55rem;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0);
  transition: border-color 300ms ease, background 300ms ease, color 300ms ease, transform 300ms var(--ease-out);
}

.button::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28), transparent 70%);
  transform: translateX(-130%);
  transition: transform 700ms var(--ease-out);
}

.button:hover::before {
  transform: translateX(130%);
}

.button > * {
  position: relative;
  z-index: 1;
}

.button--primary {
  color: #05111e;
  color: #f8fbff;
  background: linear-gradient(135deg, #2d6cff 0%, #438cf7 62%, #d6b66f 145%);
  box-shadow: 0 16px 50px rgba(44, 108, 255, 0.24), 0 0 0 1px rgba(214, 182, 111, 0.14) inset;
}

.button--primary:hover {
  box-shadow: 0 18px 70px rgba(84, 145, 255, 0.36);
}

.button--light {
  color: #030611;
  background: #ffffff;
}

.button:focus-visible,
.text-link:focus-visible,
.header-cta:focus-visible,
.brand:focus-visible,
.desktop-nav a:focus-visible,
.footer-column a:focus-visible,
.footer-bottom a:focus-visible,
.footer-bottom button:focus-visible,
.menu-toggle:focus-visible,
.service-index a:focus-visible,
.case-card a:focus-visible,
.contact-email:focus-visible {
  outline: 2px solid #84dcff;
  outline-offset: 5px;
}

/* --------------------------------------------------------------------------
   02. FIX HÁTTÉR ÉS GLOBÁLIS MOTION RÉTEGEK
   -------------------------------------------------------------------------- */

#network-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 620ms ease;
  background:
    radial-gradient(circle at 58% 18%, rgba(22, 75, 162, 0.16), transparent 42%),
    linear-gradient(180deg, #030817 0%, #010207 100%);
}

/*
 * A canvas feletti fátyol csak az olvashatóságot és a jelenetenkénti
 * fényirányt szabályozza. A háló rajzát nem nyomja el sötét fedőréteggel.
 */
.background-veil {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--scene-x) var(--scene-y), rgba(45, 113, 255, var(--scene-opacity)), transparent 32rem),
    radial-gradient(circle at calc(100% - var(--scene-x)) calc(100% - var(--scene-y)), rgba(54, 197, 255, 0.052), transparent 29rem),
    linear-gradient(180deg, rgba(2, 4, 12, 0.015), rgba(2, 4, 12, 0.38));
  transition: --scene-x 1800ms var(--ease-out), --scene-y 1800ms var(--ease-out), --scene-opacity 1500ms ease, opacity 620ms ease;
}

.background-veil::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 68% 58%, rgba(238, 193, 91, 0.12), transparent 31rem),
    linear-gradient(118deg, transparent 18%, rgba(238, 193, 91, 0.035) 52%, transparent 82%);
  mix-blend-mode: screen;
  transform: scale(0.98);
  transition: opacity 1600ms ease, transform 1900ms var(--ease-out);
}

body[data-scene="process"] .background-veil::after {
  opacity: var(--process-gold);
  transform: scale(1.015);
}

/*
 * A csillagképes / háló háttér kizárólag a positioning („A márkád minden…”) szekciónál
 * jelenjen meg. A hero, a hero-stage és az alatta lévő első kártyás blokk mögött így
 * már nem látszik a procedurális háttéranimáció.
 */
body[data-scene="signal"] #network-canvas,
body[data-scene="signal"] .background-veil {
  opacity: 1;
}

.noise-layer {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.scroll-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
}

main,
.site-footer {
  position: relative;
  z-index: 2;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #4fa8ff, #83d8ff 56%, #d6b66f);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 1rem rgba(107, 196, 255, 0.7);
}

/* --------------------------------------------------------------------------
   03. FEJLÉC ÉS NAVIGÁCIÓ
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  left: 0;
  padding: 1rem 0;
  transition: padding 350ms var(--ease-out), background 350ms ease, border-color 350ms ease;
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--line);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 450ms var(--ease-out);
}

.site-header.is-scrolled {
  padding-block: 0.55rem;
  background: rgba(4, 7, 19, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.site-header.is-scrolled::after {
  transform: scaleX(1);
}

.header-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--page);
  min-height: 3.25rem;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0);
  transition: transform 250ms var(--ease-out);
}

.brand-mark {
  position: relative;
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  transform: rotate(-8deg);
}

.brand-mark::before,
.brand-mark::after,
.brand-mark i {
  position: absolute;
  content: "";
  background: currentColor;
}

.brand-mark::before,
.brand-mark::after {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  box-shadow: 0 0 1rem currentColor;
}

.brand-mark::before {
  top: 0.14rem;
  left: 0.15rem;
}

.brand-mark::after {
  right: 0.08rem;
  bottom: 0.14rem;
}

.brand-mark i {
  top: 50%;
  left: 50%;
  width: 1.45rem;
  height: 1px;
  transform-origin: left;
  opacity: 0.7;
}

.brand-mark i:nth-child(1) {
  transform: translate(-50%, -50%) rotate(28deg);
}

.brand-mark i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(91deg);
}

.brand-mark i:nth-child(3) {
  transform: translate(-50%, -50%) rotate(151deg);
}

.brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.brand-suffix {
  padding-left: 0.65rem;
  font-size: 0.56rem;
  font-weight: 500;
  line-height: 1.15;
  color: #aab6d3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-left: 1px solid rgba(214, 182, 111, 0.5);
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.desktop-nav a {
  position: relative;
  padding-block: 0.75rem;
  font-size: 0.76rem;
  color: var(--text-soft);
  transition: color 250ms ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 1px;
  content: "";
  background: #8ddfff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out);
}

.desktop-nav a:hover {
  color: var(--text);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.65rem;
  padding: 0.72rem 1rem;
  font-size: 0.76rem;
  font-weight: 650;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0);
  transition: background 300ms ease, border-color 300ms ease, transform 250ms var(--ease-out);
}

.header-cta:hover {
  border-color: rgba(133, 221, 255, 0.55);
  background: rgba(111, 140, 255, 0.12);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition: transform 350ms var(--ease-out);
}

.menu-toggle span:first-child {
  transform: translateY(-0.22rem);
}

.menu-toggle span:last-child {
  transform: translateY(0.22rem);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  z-index: 0;
  inset: 0;
  padding: 8rem 1.5rem 2rem;
  background:
    radial-gradient(circle at 75% 10%, rgba(84, 118, 255, 0.28), transparent 36rem),
    rgba(3, 6, 16, 0.97);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2rem);
  transition: opacity 350ms ease, transform 500ms var(--ease-out), visibility 0s linear 500ms;
}

.mobile-menu[hidden] {
  display: none;
}

/* A menü mindig a teljes viewportot fedje le, a bezáró X pedig előtte maradjon. */
body.menu-open .site-header.is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.menu-toggle[aria-expanded="true"] {
  position: relative;
  z-index: 2;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.mobile-menu nav {
  display: grid;
  border-top: 1px solid var(--line);
}

.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  font-size: clamp(2rem, 9vw, 3.6rem);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -0.045em;
  border-bottom: 1px solid var(--line);
}

.mobile-menu nav a span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.mobile-menu-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--text-soft);
}

.mobile-menu-meta p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   04. HERO
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(2, 5, 15, 0.12) 0%, rgba(2, 5, 15, 0.08) 45%, rgba(2, 5, 15, 0.68) 100%);
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent calc(20% - 1px), rgba(255, 255, 255, 0.025) 20%, transparent calc(20% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(214, 182, 111, 0.035) 50%, transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(80% - 1px), rgba(255, 255, 255, 0.025) 80%, transparent calc(80% + 1px));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 92%, transparent);
}

.hero::after {
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -36%;
  left: -12%;
  height: 68%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(57, 141, 255, 0.22) 0%, rgba(34, 102, 225, 0.08) 34%, transparent 68%),
    radial-gradient(ellipse at center, rgba(214, 182, 111, 0.1), transparent 52%);
  filter: blur(1.5rem);
  transform: translateY(var(--hero-stage-y, 0px)) scale(var(--hero-stage-scale, 1));
  transition: transform 120ms linear;
}

.section-index {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: max(1rem, calc((100vw - var(--page)) / 2 - 2.7rem));
  color: rgba(197, 212, 255, 0.42);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(22rem, 1fr) auto;
  min-height: 100svh;
  padding-top: clamp(7.4rem, 12vh, 9.4rem);
  padding-bottom: clamp(1.35rem, 3vh, 2rem);
}

.hero-copy {
  position: relative;
  z-index: 8;
  width: min(100%, 74rem);
  margin-inline: auto;
  text-align: center;
  opacity: var(--hero-copy-opacity, 1);
  transform: translate3d(0, var(--hero-copy-y, 0px), 0);
  will-change: transform, opacity;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: clamp(1.35rem, 2.6vh, 2rem);
  color: #c5d0ec;
}

.status-dot {
  position: relative;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 1.2rem rgba(214, 182, 111, 0.66);
}

.status-dot::after {
  position: absolute;
  inset: -0.32rem;
  content: "";
  border: 1px solid rgba(214, 182, 111, 0.34);
  border-radius: 50%;
  animation: statusPulse 3.2s ease-out infinite;
}

.hero-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(3.35rem, 7.4vw, 7.75rem);
  font-weight: 650;
  line-height: 0.92;
  letter-spacing: -0.062em;
  text-transform: uppercase;
  text-shadow: 0 0 1.4rem rgba(255, 255, 255, 0.05), 0 0 2.2rem rgba(214, 182, 111, 0.04);
}

.title-line {
  display: block;
  width: 100%;
  overflow: hidden;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.title-line > span {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
  transform: translateY(112%);
}

body.is-ready .title-line > span {
  transform: translateY(0);
  transition: transform 1.2s var(--ease-out);
}

body.is-ready .title-line:nth-child(2) > span {
  transition-delay: 100ms;
}

.title-line--accent > span {
  background: linear-gradient(104deg, #f5f8ff 0%, #86cfff 36%, #4e91ff 67%, #e2c579 103%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


.hero-title--sheen .title-line > span::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  color: transparent;
  background:
    linear-gradient(108deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 255, 255, 0.00) 38%,
      rgba(255, 255, 255, 0.10) 43%,
      rgba(255, 255, 255, 0.38) 48%,
      rgba(248, 244, 232, 0.62) 51%,
      rgba(226, 205, 154, 0.42) 55%,
      rgba(255, 255, 255, 0.12) 60%,
      transparent 67%,
      transparent 100%);
  background-size: 285% 100%;
  background-position: -205% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 0.7rem rgba(255, 255, 255, 0.10));
  animation: heroTitleSweep 9s cubic-bezier(0.18, 0.68, 0.22, 1) infinite;
}

.hero-title--sheen .title-line:nth-child(2) > span::after {
  animation-delay: 0.24s;
}

.hero-lower {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.35rem;
  width: min(100%, 51rem);
  margin: clamp(1.4rem, 3vh, 2.3rem) auto 0;
}

.hero-lede {
  margin-bottom: 0;
  font-size: clamp(0.98rem, 1.3vw, 1.13rem);
  font-weight: 300;
  line-height: 1.75;
  color: #b9c4df;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  white-space: nowrap;
}

.hero-stage {
  position: relative;
  z-index: 5;
  align-self: end;
  min-height: clamp(22rem, 42vh, 31rem);
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
  perspective: 1200px;
  transform: translate3d(0, var(--hero-stage-y, 0px), 0) scale(var(--hero-stage-scale, 1));
  transform-origin: 50% 100%;
  will-change: transform;
  isolation: isolate;
}

.hero-stage-media {
  position: absolute;
  z-index: 0;
  inset: 3% 1.2% 0.4rem;
  overflow: hidden;
  pointer-events: none;
  border-radius: 1.8rem 1.8rem 1.2rem 1.2rem;
  border: 1px solid rgba(120, 155, 226, 0.12);
  background: #040814;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -4rem 6rem rgba(2, 5, 14, 0.56),
    0 1.8rem 4rem rgba(0, 0, 0, 0.20);
}

.hero-stage-media::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 48%, rgba(5, 10, 24, 0.08) 0%, rgba(3, 7, 18, 0.24) 48%, rgba(2, 5, 14, 0.72) 100%),
    linear-gradient(180deg, rgba(2, 5, 14, 0.24) 0%, rgba(2, 5, 14, 0.36) 54%, rgba(2, 5, 14, 0.78) 100%);
}

.hero-stage-media::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.18);
  background: linear-gradient(90deg, rgba(2, 5, 14, 0.12), transparent 20%, transparent 80%, rgba(2, 5, 14, 0.10));
}

.hero-stage-media__image {
  position: absolute;
  inset: -4%;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 48%;
  background-size: cover;
  filter: saturate(1.04) contrast(1.06) brightness(0.44);
  transform: scale(1.06) translate3d(0, 0, 0);
  transform-origin: 52% 46%;
  will-change: transform;
  animation: heroStagePhotoDrift 16s cubic-bezier(0.42, 0.04, 0.22, 1) infinite alternate;
}

.hero-stage-media__ambient {
  position: absolute;
  z-index: 1;
  inset: -2% -8%;
  opacity: 0.52;
  background:
    radial-gradient(ellipse at 63% 46%, rgba(255, 174, 59, 0.28) 0%, rgba(255, 159, 26, 0.16) 20%, transparent 46%),
    radial-gradient(ellipse at 28% 56%, rgba(49, 129, 255, 0.22) 0%, rgba(74, 62, 255, 0.12) 24%, transparent 48%),
    radial-gradient(ellipse at 80% 18%, rgba(255, 176, 64, 0.16) 0%, transparent 32%);
  filter: blur(2rem);
  mix-blend-mode: screen;
  transform: translate3d(-1.5%, 0.6%, 0) scale(1.02);
  will-change: transform, opacity;
  animation: heroStageAmbientDrift 10s cubic-bezier(0.39, 0.06, 0.19, 1) infinite alternate;
}

.hero-stage-media__sheen {
  position: absolute;
  z-index: 1;
  inset: -10% -18%;
  opacity: 0.28;
  background:
    linear-gradient(112deg,
      transparent 10%,
      rgba(255, 255, 255, 0) 32%,
      rgba(255, 203, 122, 0.12) 43%,
      rgba(255, 241, 214, 0.20) 50%,
      rgba(83, 168, 255, 0.10) 58%,
      transparent 70%);
  filter: blur(1.6rem);
  mix-blend-mode: screen;
  transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  will-change: transform, opacity;
  animation: heroStageSheenSweep 9s cubic-bezier(0.42, 0.06, 0.16, 1) infinite;
}

.hero-stage-grid {
  position: absolute;
  z-index: 1;
  inset: 4% 4% 5%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(112, 151, 227, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 151, 227, 0.055) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse at 50% 75%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 75%, #000 0%, transparent 70%);
  transform: perspective(650px) rotateX(64deg) translateY(22%);
  opacity: 0.65;
}

.hero-horizon {
  position: absolute;
  z-index: 2;
  right: 1%;
  bottom: 3.1rem;
  left: 1%;
  height: 8rem;
  overflow: visible;
  border-top: 1px solid rgba(91, 170, 255, 0.7);
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(52, 144, 255, 0.3), transparent 58%);
  box-shadow: 0 -0.35rem 2.8rem rgba(38, 126, 255, 0.28), 0 -1px 0 rgba(214, 182, 111, 0.24);
  transform: perspective(600px) rotateX(64deg);
}

.hero-horizon span {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  width: 18rem;
  height: 1rem;
  background: linear-gradient(90deg, transparent, rgba(245, 219, 151, 0.92), transparent);
  filter: blur(0.35rem);
  transform: translateX(-50%);
  animation: horizonPulse 4.8s ease-in-out infinite;
}

.hero-card {
  position: absolute;
  z-index: 4;
  top: 17%;
  width: clamp(16rem, 22vw, 20.5rem);
  min-height: 15rem;
  padding: 1.5rem 1.55rem 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(112, 157, 237, 0.28);
  border-top-color: rgba(139, 194, 255, 0.55);
  border-radius: 1.05rem;
  background:
    linear-gradient(145deg, rgba(10, 22, 49, 0.9), rgba(6, 13, 30, 0.62)),
    rgba(5, 11, 25, 0.76);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  will-change: transform;
}

.hero-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(214, 182, 111, 0.7), transparent);
  opacity: 0.72;
}

.hero-card--left {
  left: 8%;
  --reveal-delay: 180ms;
  transform: rotateY(9deg) rotateZ(-1.2deg) translate3d(0, 0, 0);
  animation: panelFloatLeft 8s ease-in-out infinite;
}

.hero-card--left::before {
  left: 0;
}

.hero-card--right {
  right: 8%;
  --reveal-delay: 260ms;
  transform: rotateY(-9deg) rotateZ(1.2deg) translate3d(0, 0, 0);
  animation: panelFloatRight 8.8s ease-in-out infinite;
}

.hero-card--right::before {
  right: 0;
}

.hero-card-index {
  margin-bottom: 1.2rem;
  font-size: 0.62rem;
  font-weight: 500;
  color: #8ea1c9;
  letter-spacing: 0.12em;
}

.hero-card h2 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.hero-card > p:not(.hero-card-index) {
  margin-bottom: 1.15rem;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.65;
  color: #aebad6;
}

.hero-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hero-card li {
  padding: 0.38rem 0.55rem;
  font-size: 0.57rem;
  font-weight: 500;
  color: #cbd5eb;
  letter-spacing: 0.035em;
  border: 1px solid rgba(151, 178, 232, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.hero-card-pulse {
  position: absolute;
  right: 1.25rem;
  bottom: 1.2rem;
  width: 2.9rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright));
  transform-origin: right;
  animation: cardPulse 3.4s ease-in-out infinite;
}

.hero-core {
  position: absolute;
  z-index: 6;
  bottom: 1.8rem;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(15rem, 22vw, 20rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 86, 187, 0.3) 0%, rgba(7, 19, 47, 0.08) 54%, transparent 70%);
  filter: drop-shadow(0 1.2rem 2rem rgba(9, 75, 191, 0.32));
  transform: translateX(-50%) translateY(var(--hero-core-y, 0px));
}

.hero-core::before,
.hero-core::after {
  position: absolute;
  content: "";
  border-radius: 50%;
}

.hero-core::before {
  inset: 14%;
  border: 1px solid rgba(99, 169, 255, 0.26);
  box-shadow: 0 0 2.8rem rgba(56, 132, 255, 0.18), inset 0 0 2.2rem rgba(214, 182, 111, 0.08);
  animation: coreBreath 5.2s ease-in-out infinite;
}

.hero-core::after {
  inset: 34%;
  background: radial-gradient(circle, rgba(236, 218, 169, 0.28), rgba(42, 120, 255, 0.13) 42%, transparent 72%);
  filter: blur(0.7rem);
}

.hero-core-mesh {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: meshDrift 18s linear infinite;
}

.mesh-lines {
  fill: none;
  stroke: rgba(117, 181, 255, 0.62);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 7;
  animation: meshDash 18s linear infinite;
}

.mesh-nodes {
  fill: #dcecff;
  filter: drop-shadow(0 0 0.45rem rgba(88, 164, 255, 0.9));
}

.mesh-nodes circle:nth-child(3n) {
  fill: var(--gold-bright);
  filter: drop-shadow(0 0 0.55rem rgba(214, 182, 111, 0.85));
}

.hero-core-wordmark {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  text-align: center;
}

.hero-core-wordmark strong {
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.08em;
  text-shadow: 0 0 1.8rem rgba(80, 145, 255, 0.65);
}

.hero-core-wordmark span {
  font-size: 0.48rem;
  font-weight: 500;
  color: #9eaccb;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-float-label {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.5rem;
  font-weight: 500;
  color: #aebbd6;
  letter-spacing: 0.1em;
  border: 1px solid rgba(147, 178, 234, 0.18);
  border-radius: 999px;
  background: rgba(5, 12, 28, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-float-label span {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #79c8ff;
  box-shadow: 0 0 0.7rem rgba(79, 168, 255, 0.85);
}

.hero-float-label--one {
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  animation: labelFloat 6.8s ease-in-out infinite;
}

.hero-float-label--two {
  right: 28%;
  bottom: 17%;
  animation: labelFloat 7.4s ease-in-out -2.2s infinite;
}

.hero-meta {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-self: end;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.hero-meta > div {
  display: grid;
  gap: 0.3rem;
}

.hero-meta > div + div {
  padding-left: clamp(1rem, 3vw, 3rem);
  border-left: 1px solid var(--line);
}

.meta-label {
  color: var(--muted);
}

.hero-meta strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.71rem;
  font-weight: 400;
  color: #d6ddf4;
}

.hero-meta strong i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 1rem rgba(214, 182, 111, 0.8);
}

.hero-meta b {
  font-weight: 500;
  animation: scrollNudge 1.9s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   05. MARQUEE ÉS POZICIONÁLÁS
   -------------------------------------------------------------------------- */

.capability-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  color: #ced8f6;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 27, 0.74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(1.8rem, 4vw, 4rem);
  padding: 1.05rem clamp(1.8rem, 4vw, 4rem) 1.05rem 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
}

.marquee-set i {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #7ad7ff;
  box-shadow: 0 0 0.8rem rgba(122, 215, 255, 0.8);
}

.positioning {
  padding-block: var(--section-space) clamp(5rem, 9vw, 9rem);
  background: linear-gradient(180deg, rgba(3, 7, 17, 0.3), rgba(7, 13, 31, 0.62));
  border-bottom: 1px solid var(--line);
}

.positioning-grid {
  display: grid;
  grid-template-columns: minmax(5rem, 0.22fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 8rem);
}

.section-rail {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-rail::after {
  width: 1px;
  height: 6rem;
  margin-top: 0.5rem;
  content: "";
  background: linear-gradient(var(--line-strong), transparent);
}

.section-rail p {
  margin: 0;
  writing-mode: vertical-rl;
}

.positioning-main {
  max-width: 76rem;
}

.positioning-main > .section-kicker {
  margin-bottom: 2rem;
}

.statement {
  max-width: 75rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  font-size: clamp(3.2rem, 7.5vw, 8rem);
  font-weight: 460;
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.statement em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(160, 210, 255, 0.85);
}

.positioning-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
  gap: clamp(2rem, 6vw, 7rem);
  max-width: 66rem;
  margin-left: auto;
}

.positioning-detail > p {
  margin-bottom: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.62;
  color: #c4cde5;
}

.micro-proof {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: start;
  gap: 1rem;
  padding-top: 0.45rem;
}

.micro-proof-line {
  height: 1px;
  margin-top: 0.65rem;
  background: #75d9ff;
}

.micro-proof p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--text-soft);
}

.micro-proof strong {
  color: var(--text);
  font-weight: 600;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(5rem, 10vw, 9rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metric-strip article {
  position: relative;
  min-height: 13rem;
  padding: clamp(1.5rem, 3vw, 3rem);
}

.metric-strip article + article {
  border-left: 1px solid var(--line);
}

.metric-strip .metric-number {
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 420;
  line-height: 1;
  letter-spacing: -0.08em;
}

.metric-strip sup {
  margin-left: 0.3rem;
  font-size: clamp(1rem, 2vw, 1.6rem);
  color: #81dcff;
}

.metric-strip p {
  position: absolute;
  right: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: #c3cce4;
}

.metric-strip small {
  color: var(--muted);
}

.data-note {
  margin-top: 0.85rem;
  margin-bottom: 0;
  font-size: 0.66rem;
  color: rgba(170, 181, 211, 0.62);
}

/* --------------------------------------------------------------------------
   06. SZOLGÁLTATÁSOK
   -------------------------------------------------------------------------- */

.services {
  padding-block: var(--section-space);
  border-bottom: 1px solid var(--line);
  background: rgba(2, 5, 14, 0.46);
}

.services-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(4rem, 9vw, 10rem);
}

.services-intro {
  position: sticky;
  top: 8rem;
  align-self: start;
}

.services-intro .section-heading h2 {
  max-width: 12ch;
}

.service-index {
  display: grid;
  max-width: 100%;
  margin-top: clamp(3rem, 7vw, 7rem);
  border-top: 1px solid var(--line);
}

.service-index a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  padding: 0.9rem 0;
  font-size: 0.76rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  transition: color 300ms ease, padding-left 350ms var(--ease-out);
}

.service-index a span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.service-index a.is-active,
.service-index a:hover {
  padding-left: 0.5rem;
  color: var(--text);
}

.service-index a.is-active::after {
  justify-self: end;
  content: "●";
  color: #7bdcff;
  text-shadow: 0 0 0.8rem currentColor;
}

.service-list {
  border-top: 1px solid var(--line-strong);
}

.service-item {
  position: relative;
  min-height: 26rem;
  padding-block: clamp(2.2rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line-strong);
}

.service-item::before {
  position: absolute;
  z-index: -1;
  inset: 0 -2rem;
  content: "";
  background: linear-gradient(90deg, rgba(77, 124, 255, 0.08), transparent 72%);
  opacity: 0;
  transform: scaleY(0.76);
  transition: opacity 450ms ease, transform 600ms var(--ease-out);
}

.service-item.is-active::before,
.service-item:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.service-item header {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1.5rem;
  align-items: start;
}

.service-number {
  padding-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  color: #86dcff;
}

.service-item header p {
  margin-bottom: 0.75rem;
  color: var(--muted);
}

.service-item h3 {
  max-width: 15ch;
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 470;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.service-symbol {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
  color: #c6d5ff;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: color 350ms ease, border-color 350ms ease, transform 500ms var(--ease-out);
}

.service-item:hover .service-symbol,
.service-item.is-active .service-symbol {
  color: #75d9ff;
  border-color: rgba(117, 217, 255, 0.5);
  transform: rotate(90deg);
}

.service-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.55fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-left: 4.5rem;
}

.service-body > p {
  max-width: 38rem;
  margin-bottom: 0;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  color: var(--text-soft);
}

.service-body ul {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.service-body li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #aeb9d7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-body li::before {
  width: 0.28rem;
  height: 0.28rem;
  content: "";
  border: 1px solid #7fdcff;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   07. PORTFÓLIÓ
   -------------------------------------------------------------------------- */

.work {
  position: relative;
  padding-block: var(--section-space);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(6, 11, 27, 0.82), rgba(2, 5, 14, 0.78));
}

.work > .page-shell {
  position: relative;
  z-index: 2;
}

.work-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #040814;
}

.work-media::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 62%, rgba(5, 10, 24, 0.10) 0%, rgba(3, 7, 18, 0.28) 40%, rgba(2, 5, 14, 0.80) 100%),
    linear-gradient(180deg, rgba(2, 5, 14, 0.36) 0%, rgba(2, 5, 14, 0.52) 42%, rgba(2, 5, 14, 0.86) 100%);
}

.work-media::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 8rem rgba(0, 0, 0, 0.22);
  background: linear-gradient(90deg, rgba(2, 5, 14, 0.16), transparent 22%, transparent 78%, rgba(2, 5, 14, 0.16));
}

.work-media__image {
  position: absolute;
  inset: -4%;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 42%;
  background-size: cover;
  filter: saturate(0.98) contrast(1.06) brightness(0.44);
  transform: scale(1.06) translate3d(0, 0, 0);
  transform-origin: 52% 40%;
  will-change: transform;
  animation: workPhotoDrift 18s cubic-bezier(0.42, 0.04, 0.22, 1) infinite alternate;
}

.work-media__ambient {
  position: absolute;
  z-index: 1;
  inset: -4% -12%;
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 34% 64%, rgba(58, 170, 255, 0.24) 0%, rgba(74, 62, 255, 0.12) 18%, transparent 42%),
    radial-gradient(ellipse at 72% 20%, rgba(255, 157, 79, 0.24) 0%, rgba(255, 122, 72, 0.12) 22%, transparent 46%),
    radial-gradient(ellipse at 68% 66%, rgba(255, 181, 118, 0.12) 0%, transparent 28%);
  filter: blur(2.2rem);
  mix-blend-mode: screen;
  transform: translate3d(-1.8%, 0.8%, 0) scale(1.02);
  will-change: transform, opacity;
  animation: workAmbientDrift 12s cubic-bezier(0.39, 0.06, 0.19, 1) infinite alternate;
}

.work-media__sheen {
  position: absolute;
  z-index: 1;
  inset: -8% -16%;
  opacity: 0.22;
  background:
    linear-gradient(112deg,
      transparent 10%,
      rgba(255, 255, 255, 0) 32%,
      rgba(255, 199, 143, 0.10) 43%,
      rgba(255, 235, 214, 0.18) 50%,
      rgba(103, 190, 255, 0.12) 58%,
      transparent 70%);
  filter: blur(1.6rem);
  mix-blend-mode: screen;
  transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  will-change: transform, opacity;
  animation: workSheenSweep 10s cubic-bezier(0.42, 0.06, 0.16, 1) infinite;
}

.work-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
  margin-bottom: clamp(4rem, 9vw, 8rem);
}

.work-heading h2 {
  margin-bottom: 0;
  font-size: clamp(3.4rem, 7.5vw, 8rem);
  font-weight: 470;
  line-height: 0.91;
  letter-spacing: -0.07em;
}

.work-heading > p {
  margin-bottom: 0.5rem;
  color: var(--text-soft);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 3vw, 3rem);
}

.case-card {
  min-width: 0;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 350ms var(--ease-out);
  will-change: transform;
}

.case-card--wide {
  grid-column: 1 / -1;
}

.case-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  border: 1px solid var(--line);
  background: #0a1026;
  box-shadow: var(--shadow-soft);
}

.case-card--wide .case-visual {
  aspect-ratio: 16 / 8.6;
}

.case-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(3, 7, 19, 0.4));
  pointer-events: none;
}

.case-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter 500ms ease;
}

.case-card:hover .case-visual img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.case-chip {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e5ecff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(3, 7, 19, 0.46);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.case-cursor {
  position: absolute;
  z-index: 3;
  top: var(--cursor-y, 50%);
  left: var(--cursor-x, 50%);
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: #06101d;
  border-radius: 50%;
  background: rgba(221, 245, 255, 0.92);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  transition: transform 350ms var(--ease-spring), opacity 250ms ease;
  pointer-events: none;
}

.case-card:hover .case-cursor {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.case-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  padding-top: 1.4rem;
}

.case-info > div:first-child > p {
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #86dfff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-info h3 {
  max-width: 25ch;
  margin-bottom: 0;
  font-size: clamp(1.25rem, 2.3vw, 2.1rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.case-result {
  min-width: 7.5rem;
  text-align: right;
}

.case-result strong {
  display: block;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 470;
  line-height: 1;
  letter-spacing: -0.06em;
}

.case-result span {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   08. FOLYAMAT ÉS MŰKÖDÉSI ELVEK
   -------------------------------------------------------------------------- */

.process {
  position: relative;
  padding-block: var(--section-space);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 7, 17, 0.34);
}

.process-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(4rem, 10vw, 11rem);
}

.process-sticky {
  position: sticky;
  top: 8rem;
  align-self: start;
}

.process-sticky h2 {
  max-width: 12ch;
  margin-bottom: 2rem;
  font-size: clamp(3rem, 5.5vw, 5.8rem);
  font-weight: 470;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.process-sticky > p:not(.section-kicker) {
  max-width: 32rem;
  color: var(--text-soft);
}

.process-sticky .text-link {
  margin-top: 1.5rem;
}

.process-steps {
  position: relative;
}

.process-steps::before {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 1.35rem;
  width: 1px;
  content: "";
  background: linear-gradient(#73d8ff, rgba(119, 139, 206, 0.15) 86%, transparent);
}

.process-step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-height: 25rem;
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.process-step:last-child {
  min-height: 0;
  padding-bottom: 0;
}

.step-marker {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: start;
}

.step-marker span {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: #b8c7ec;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #070c1d;
  transition: color 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}

.process-step.is-visible .step-marker span {
  color: #06101d;
  border-color: #9fe5ff;
  background: #9fe5ff;
  box-shadow: 0 0 2rem rgba(109, 212, 255, 0.32);
}

.process-step > div:last-child {
  padding-top: 0.3rem;
}

.process-step > div:last-child > p:first-child {
  margin-bottom: 1.2rem;
  color: #7fdcff;
}

.process-step h3 {
  max-width: 16ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 3.7vw, 4rem);
  font-weight: 470;
  line-height: 1;
  letter-spacing: -0.05em;
}

.process-step > div:last-child > p:not(:first-child) {
  max-width: 37rem;
  color: var(--text-soft);
}

.step-output {
  display: inline-flex;
  margin-top: 1.2rem;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: #b8c6e8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.principles {
  position: relative;
  padding-block: clamp(6rem, 10vw, 10rem);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 10, 24, 0.36);
}

.principles-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(4rem, 10vw, 12rem);
}

.principles .section-heading h2 {
  max-width: 9ch;
  font-size: clamp(3rem, 5.5vw, 5.8rem);
}


.immersive-sections {
  position: relative;
  isolation: isolate;
}

.process-principles-block > .process,
.process-principles-block > .principles {
  position: relative;
  z-index: 2;
}

.process-principles-block > .section-photo-backdrop {
  inset: 0;
}


.process-principles-block {
  overflow: hidden;
}

.process-principles-block::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 5, 14, 0) 0%, rgba(2, 5, 14, 0.08) 62%, rgba(2, 5, 14, 0.18) 100%);
}

.process-principles-media .section-photo-backdrop__image {
  background-image: none;
  background-position: 54% 28%;
  filter: saturate(1.03) contrast(1.05) brightness(0.34);
  transform: scale(1.08) translate3d(0, 0, 0);
  transform-origin: 54% 34%;
  animation: processPrinciplesPhotoDrift 22s cubic-bezier(0.42, 0.04, 0.22, 1) infinite alternate;
}

.process-principles-media .section-photo-backdrop__ambient {
  opacity: 0.40;
  background:
    radial-gradient(ellipse at 58% 34%, rgba(101, 212, 255, 0.24) 0%, rgba(62, 151, 255, 0.12) 18%, transparent 44%),
    radial-gradient(ellipse at 76% 18%, rgba(224, 244, 255, 0.10) 0%, transparent 32%),
    radial-gradient(ellipse at 34% 72%, rgba(53, 112, 255, 0.14) 0%, rgba(95, 190, 255, 0.08) 20%, transparent 44%);
  filter: blur(2.6rem);
  transform: translate3d(-1.8%, 0.7%, 0) scale(1.03);
  animation: processPrinciplesAmbientDrift 13s cubic-bezier(0.39, 0.06, 0.19, 1) infinite alternate;
}

.process-principles-media .section-photo-backdrop__sheen {
  opacity: 0.19;
  background:
    linear-gradient(112deg,
      transparent 12%,
      rgba(255, 255, 255, 0) 34%,
      rgba(195, 238, 255, 0.08) 45%,
      rgba(243, 251, 255, 0.17) 50%,
      rgba(100, 204, 255, 0.11) 58%,
      transparent 70%);
  filter: blur(1.9rem);
  transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  animation: processPrinciplesSheenSweep 11s cubic-bezier(0.42, 0.06, 0.16, 1) infinite;
}


.section-photo-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #040814;
}

.section-photo-backdrop::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 48%, rgba(5, 10, 24, 0.10) 0%, rgba(3, 7, 18, 0.30) 42%, rgba(2, 5, 14, 0.82) 100%),
    linear-gradient(180deg, rgba(2, 5, 14, 0.34) 0%, rgba(2, 5, 14, 0.52) 48%, rgba(2, 5, 14, 0.86) 100%);
}

.section-photo-backdrop::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 8rem rgba(0, 0, 0, 0.18);
  background: linear-gradient(90deg, rgba(2, 5, 14, 0.14), transparent 22%, transparent 78%, rgba(2, 5, 14, 0.14));
}

.section-photo-backdrop__image,
.section-photo-backdrop__ambient,
.section-photo-backdrop__sheen {
  position: absolute;
}

.section-photo-backdrop__image {
  inset: -4%;
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}

.section-photo-backdrop__ambient {
  z-index: 1;
  inset: -6% -12%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.section-photo-backdrop__sheen {
  z-index: 1;
  inset: -10% -16%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}


/* Ne töltsük le a viewporttól távoli dekoratív fotókat az első render előtt. */
.hero-stage.is-media-ready .hero-stage-media__image {
  background-image: url("../assets/hero-stage-bulb.jpg");
  background-image: image-set(
    url("../assets/hero-stage-bulb.webp") type("image/webp") 1x,
    url("../assets/hero-stage-bulb.jpg") type("image/jpeg") 1x
  );
}

.work.is-media-ready .work-media__image {
  background-image: url("../assets/work-bokeh-hand.jpg");
  background-image: image-set(
    url("../assets/work-bokeh-hand.webp") type("image/webp") 1x,
    url("../assets/work-bokeh-hand.jpg") type("image/jpeg") 1x
  );
}

.process-principles-block.is-media-ready .process-principles-media .section-photo-backdrop__image {
  background-image: url("../assets/process-principles-blue-light.jpg");
  background-image: image-set(
    url("../assets/process-principles-blue-light.webp") type("image/webp") 1x,
    url("../assets/process-principles-blue-light.jpg") type("image/jpeg") 1x
  );
}

.faq-contact-block.is-media-ready .faq-contact-media .section-photo-backdrop__image {
  background-image: url("../assets/contact-phone-neon.jpg");
  background-image: image-set(
    url("../assets/contact-phone-neon.webp") type("image/webp") 1x,
    url("../assets/contact-phone-neon.jpg") type("image/jpeg") 1x
  );
}

/* A viewporton kívüli dekorációk ne égessék feleslegesen a GPU/CPU-t. */
.hero:not(.is-media-active) .hero-media__image,
.hero:not(.is-media-active) .hero-media__ambient,
.hero:not(.is-media-active) .hero-media__sheen,
.hero:not(.is-media-active) .hero-stage-media__image,
.hero:not(.is-media-active) .hero-stage-media__ambient,
.hero:not(.is-media-active) .hero-stage-media__sheen,
.work:not(.is-media-active) .work-media__image,
.work:not(.is-media-active) .work-media__ambient,
.work:not(.is-media-active) .work-media__sheen,
.process-principles-block:not(.is-media-active) .section-photo-backdrop__image,
.process-principles-block:not(.is-media-active) .section-photo-backdrop__ambient,
.process-principles-block:not(.is-media-active) .section-photo-backdrop__sheen,
.faq-contact-block:not(.is-media-active) .section-photo-backdrop__image,
.faq-contact-block:not(.is-media-active) .section-photo-backdrop__ambient,
.faq-contact-block:not(.is-media-active) .section-photo-backdrop__sheen {
  animation-play-state: paused !important;
  will-change: auto !important;
}

.faq-contact-block {
  overflow: hidden;
}

.faq-contact-block > .faq,
.faq-contact-block > .contact {
  position: relative;
  z-index: 2;
}

.faq-contact-block > .section-photo-backdrop {
  inset: 0;
}

.faq-contact-block::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 5, 14, 0.02) 0%, rgba(2, 5, 14, 0.06) 46%, rgba(2, 5, 14, 0.16) 100%);
}

.faq-contact-media .section-photo-backdrop__image {
  background-image: none;
  background-position: 52% 42%;
  filter: saturate(1.03) contrast(1.04) brightness(0.36);
  transform: scale(1.07) translate3d(0, 0, 0);
  transform-origin: 52% 42%;
  animation: faqContactPhotoDrift 20s cubic-bezier(0.42, 0.04, 0.22, 1) infinite alternate;
}

.faq-contact-media .section-photo-backdrop__ambient {
  opacity: 0.44;
  background:
    radial-gradient(ellipse at 28% 58%, rgba(82, 221, 255, 0.22) 0%, rgba(52, 158, 255, 0.12) 18%, transparent 44%),
    radial-gradient(ellipse at 78% 70%, rgba(255, 93, 214, 0.24) 0%, rgba(255, 126, 188, 0.10) 22%, transparent 46%),
    radial-gradient(ellipse at 78% 24%, rgba(189, 108, 255, 0.14) 0%, transparent 34%);
  filter: blur(2.5rem);
  transform: translate3d(-1.5%, 0.6%, 0) scale(1.03);
  animation: faqContactAmbientDrift 12.5s cubic-bezier(0.39, 0.06, 0.19, 1) infinite alternate;
}

.faq-contact-media .section-photo-backdrop__sheen {
  opacity: 0.18;
  background:
    linear-gradient(112deg,
      transparent 12%,
      rgba(255, 255, 255, 0) 34%,
      rgba(191, 237, 255, 0.08) 45%,
      rgba(255, 223, 246, 0.14) 50%,
      rgba(114, 213, 255, 0.10) 58%,
      transparent 70%);
  filter: blur(1.9rem);
  transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  animation: faqContactSheenSweep 10.5s cubic-bezier(0.42, 0.06, 0.16, 1) infinite;
}

.process-media .section-photo-backdrop__image {
  background-position: 56% 36%;
  filter: saturate(1.02) contrast(1.04) brightness(0.34);
  transform: scale(1.06) translate3d(0, 0, 0);
  transform-origin: 52% 38%;
  animation: processPhotoDrift 18s cubic-bezier(0.42, 0.04, 0.22, 1) infinite alternate;
}

.process-media .section-photo-backdrop__ambient {
  opacity: 0.38;
  background:
    radial-gradient(ellipse at 64% 36%, rgba(86, 205, 255, 0.26) 0%, rgba(58, 144, 255, 0.14) 18%, transparent 44%),
    radial-gradient(ellipse at 28% 72%, rgba(67, 140, 255, 0.18) 0%, rgba(93, 76, 255, 0.08) 22%, transparent 46%);
  filter: blur(2.4rem);
  transform: translate3d(-1.6%, 0.6%, 0) scale(1.02);
  animation: processAmbientDrift 12s cubic-bezier(0.39, 0.06, 0.19, 1) infinite alternate;
}

.process-media .section-photo-backdrop__sheen {
  opacity: 0.18;
  background:
    linear-gradient(112deg,
      transparent 12%,
      rgba(255, 255, 255, 0) 34%,
      rgba(170, 228, 255, 0.08) 45%,
      rgba(236, 247, 255, 0.16) 51%,
      rgba(87, 188, 255, 0.10) 58%,
      transparent 70%);
  filter: blur(1.8rem);
  transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  animation: processSheenSweep 10.5s cubic-bezier(0.42, 0.06, 0.16, 1) infinite;
}

.principles-media .section-photo-backdrop__image {
  background-position: 54% 32%;
  filter: saturate(1.01) contrast(1.05) brightness(0.29);
  transform: scale(1.08) translate3d(0, 0, 0);
  transform-origin: 55% 34%;
  animation: principlesPhotoDrift 20s cubic-bezier(0.42, 0.04, 0.22, 1) infinite alternate;
}

.principles-media .section-photo-backdrop__ambient {
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 54% 40%, rgba(102, 214, 255, 0.24) 0%, rgba(67, 140, 255, 0.12) 18%, transparent 42%),
    radial-gradient(ellipse at 76% 18%, rgba(208, 240, 255, 0.10) 0%, transparent 32%),
    radial-gradient(ellipse at 34% 72%, rgba(54, 110, 255, 0.14) 0%, rgba(87, 188, 255, 0.08) 20%, transparent 42%);
  filter: blur(2.6rem);
  transform: translate3d(-1.8%, 0.7%, 0) scale(1.03);
  animation: principlesAmbientDrift 13s cubic-bezier(0.39, 0.06, 0.19, 1) infinite alternate;
}

.principles-media .section-photo-backdrop__sheen {
  opacity: 0.20;
  background:
    linear-gradient(112deg,
      transparent 12%,
      rgba(255, 255, 255, 0) 34%,
      rgba(196, 238, 255, 0.08) 45%,
      rgba(244, 251, 255, 0.17) 50%,
      rgba(100, 205, 255, 0.11) 58%,
      transparent 70%);
  filter: blur(1.9rem);
  transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  animation: principlesSheenSweep 11s cubic-bezier(0.42, 0.06, 0.16, 1) infinite;
}

.principle-list {
  border-top: 1px solid var(--line-strong);
}

.principle {
  display: grid;
  grid-template-columns: 3rem minmax(12rem, 0.75fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line-strong);
}

.principle > span {
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #79d8ff;
}

.principle h3 {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.principle p {
  margin-bottom: 0;
  font-size: 0.93rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   09. FAQ
   -------------------------------------------------------------------------- */

.faq {
  position: relative;
  z-index: 2;
  padding-block: var(--section-space);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 7, 17, 0.34);
}

.faq-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(4rem, 9vw, 10rem);
}

.faq .section-heading h2 {
  max-width: 11ch;
  font-size: clamp(3rem, 5.8vw, 6rem);
}

.faq-list {
  border-top: 1px solid var(--line-strong);
  background: rgba(5, 10, 24, 0.26);
  backdrop-filter: blur(12px) saturate(122%);
  -webkit-backdrop-filter: blur(12px) saturate(122%);
  border-radius: 1.35rem;
  padding-inline: clamp(1rem, 2vw, 1.4rem);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 18px 48px rgba(0,0,0,0.12);
}

.faq-item {
  border-bottom: 1px solid var(--line-strong);
}

.faq-item summary {
  display: grid;
  grid-template-columns: 1fr 2.25rem;
  align-items: center;
  gap: 2rem;
  padding: 1.7rem 0;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 520;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform 400ms var(--ease-out), border-color 300ms ease;
}

.faq-item summary i::before,
.faq-item summary i::after {
  position: absolute;
  width: 0.8rem;
  height: 1px;
  content: "";
  background: currentColor;
}

.faq-item summary i::after {
  transform: rotate(90deg);
  transition: transform 350ms var(--ease-out);
}

.faq-item[open] summary i {
  border-color: rgba(126, 219, 255, 0.55);
  transform: rotate(90deg);
}

.faq-item[open] summary i::after {
  transform: rotate(0deg);
}

.faq-item > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease-out);
}

.faq-item[open] > div {
  grid-template-rows: 1fr;
}

.faq-item > div > p {
  max-width: 45rem;
  min-height: 0;
  margin: 0;
  padding-right: 3.5rem;
  padding-bottom: 0;
  overflow: hidden;
  color: var(--text-soft);
  transition: padding-bottom 450ms var(--ease-out);
}

.faq-item[open] > div > p {
  padding-bottom: 1.8rem;
}

/* --------------------------------------------------------------------------
   10. KAPCSOLAT ÉS FOOTER
   -------------------------------------------------------------------------- */

.contact {
  position: relative;
  z-index: 2;
  padding-block: clamp(5rem, 9vw, 8.5rem);
  overflow: hidden;
  isolation: isolate;
  color: #f7f9ff;
  background:
    linear-gradient(180deg, rgba(5, 8, 20, 0.18) 0%, rgba(5, 8, 20, 0.28) 100%);
}

.contact::before {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2, 5, 14, 0.08) 0%, rgba(2, 5, 14, 0.20) 38%, rgba(2, 5, 14, 0.42) 100%),
    radial-gradient(circle at 22% 20%, rgba(104, 219, 255, 0.10), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(255, 108, 202, 0.10), transparent 26%);
  pointer-events: none;
}

.contact-glow {
  position: absolute;
  z-index: 1;
  top: 4rem;
  left: -8rem;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: rgba(57, 207, 255, 0.08);
  filter: blur(76px);
  animation: contactGlow 12s ease-in-out infinite alternate;
}

.contact-layout {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 0.86fr) minmax(32rem, 1fr);
  gap: clamp(3rem, 6vw, 5.5rem);
}

.contact-copy {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0 0 0;
}

.contact-copy::before {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  content: "Indítsuk el";
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(210, 225, 255, 0.78);
}

.contact-copy::after {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(6rem, 16vw, 9rem);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(138, 226, 255, 0.9), rgba(138, 226, 255, 0));
}

.contact-copy h2 {
  margin-bottom: 1.4rem;
  font-size: clamp(3.2rem, 6.7vw, 7rem);
  font-weight: 470;
  line-height: 0.91;
  letter-spacing: -0.07em;
}

.contact-copy h2 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(214, 233, 255, 0.9);
}

.contact-copy > p:not(.section-kicker) {
  max-width: 31rem;
  margin: 0;
  color: rgba(216, 225, 244, 0.88);
  font-size: 1.02rem;
  line-height: 1.72;
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.7rem;
  padding: 0.9rem 1.15rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 15, 34, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.contact-form {
  position: relative;
  padding: clamp(1.6rem, 3.4vw, 3rem);
  border: 1px solid rgba(218, 230, 255, 0.16);
  border-radius: 1.8rem;
  background:
    linear-gradient(180deg, rgba(7, 12, 29, 0.72) 0%, rgba(5, 9, 23, 0.60) 100%);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
}

.contact-form::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 18%);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.contact-form > label,
.form-grid label {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.35rem;
}

.contact-form label > span,
.contact-form legend {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #c4cce5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-form label > span em {
  margin-left: 0.3rem;
  font-style: normal;
  color: #7e89aa;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding-inline: 1rem;
  color: var(--text);
  border: 1px solid rgba(192, 207, 244, 0.18);
  border-radius: 1rem;
  outline: none;
  background: rgba(8, 12, 28, 0.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color 250ms ease, background 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.contact-form input[type="text"],
.contact-form input[type="email"] {
  min-height: 3.35rem;
}

.contact-form textarea {
  min-height: 8.6rem;
  padding: 0.95rem 1rem;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #747f9e;
  opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(134, 221, 255, 0.72);
  background: rgba(9, 14, 32, 0.8);
  box-shadow: 0 0 0 0.2rem rgba(103, 211, 255, 0.11);
  transform: translateY(-1px);
}

.contact-form .is-invalid {
  border-color: rgba(255, 116, 145, 0.7) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 116, 145, 0.1) !important;
}

.field-error {
  min-height: 0.8rem;
  font-size: 0.65rem;
  color: #ffb4c2;
}

.contact-form fieldset {
  margin-bottom: 1.6rem;
  padding: 1.1rem 1rem 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.1rem;
  background: rgba(8, 12, 28, 0.26);
}

.contact-form legend {
  margin-bottom: 0.9rem;
}

.interest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.interest-grid label {
  position: relative;
  margin: 0;
}

.interest-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.interest-grid span {
  display: grid;
  place-items: center;
  min-height: 2.8rem;
  padding: 0.55rem 0.82rem;
  font-family: var(--font-mono);
  font-size: 0.58rem !important;
  color: #aeb9d6 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(187, 204, 244, 0.18);
  border-radius: 999px;
  background: rgba(10, 15, 32, 0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  cursor: pointer;
  transition: color 250ms ease, border-color 250ms ease, background 250ms ease, transform 250ms ease;
}

.interest-grid input:focus-visible + span {
  outline: 2px solid #84dcff;
  outline-offset: 3px;
}

.interest-grid input:checked + span {
  color: #06101d !important;
  border-color: #9fe7ff;
  background: #9fe7ff;
  transform: translateY(-1px);
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.form-footer p {
  max-width: 22rem;
  margin: 0;
  font-size: 0.64rem;
  line-height: 1.55;
  color: #7f8baa;
}

.form-status {
  min-height: 1.5rem;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--positive);
}

.site-footer {
  position: relative;
  z-index: 2;
  padding-top: clamp(4rem, 8vw, 7rem);
  background: #02040c;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(9rem, 0.5fr));
  gap: clamp(2rem, 6vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.footer-grid > div:first-child > p {
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.footer-column > span {
  margin-bottom: 0.6rem;
  color: #6f7b9b;
}

.footer-column a,
.footer-column p {
  margin: 0;
  font-size: 0.76rem;
  color: #b9c2dc;
  transition: color 250ms ease;
}

.footer-column a:hover {
  color: #ffffff;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: 5rem;
  font-size: 0.66rem;
  color: #697492;
  border-top: 1px solid var(--line);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom > div {
  display: flex;
  gap: 1.2rem;
}

.footer-bottom button {
  justify-self: end;
  padding: 0;
  color: #9aa5c3;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.noscript-note {
  position: fixed;
  z-index: 1000;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 1rem;
  color: #06101d;
  text-align: center;
  background: #ffffff;
  border-radius: 0.8rem;
}

/* --------------------------------------------------------------------------
   11. ANIMÁCIÓK
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  filter: blur(0.55rem);
  transform: translate3d(0, 2.6rem, 0) scale(0.987);
  transition:
    opacity 900ms ease var(--reveal-delay, 0ms),
    filter 1000ms ease var(--reveal-delay, 0ms),
    transform 1050ms var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}


/* --------------------------------------------------------------------------
   11A. V2.1 — SZEKCIÓSPECIFIKUS PRÉMIUM MOTION
   -------------------------------------------------------------------------- */

.motion-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

/* A folyamat háttere a scrollal együtt, fokozatosan kékből aranyba fordul. */
.process::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: var(--process-gold);
  background:
    radial-gradient(circle at 74% 42%, rgba(229, 187, 91, 0.2), transparent 31rem),
    radial-gradient(circle at 22% 72%, rgba(78, 164, 255, 0.12), transparent 28rem);
  transform: translate3d(0, 0, 0) scale(1.025);
  transition: opacity 500ms linear, transform 900ms var(--ease-out);
}

.process-steps::before {
  background: linear-gradient(
    to bottom,
    rgba(111, 213, 255, 0.8) 0%,
    rgba(111, 213, 255, 0.28) 38%,
    rgba(224, 187, 98, 0.42) 68%,
    rgba(224, 187, 98, 0.08) 88%,
    transparent 100%
  );
  transition: background 900ms ease;
}

.process-steps::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: calc(1.35rem - 1px);
  width: 3px;
  height: var(--process-line-height);
  max-height: 100%;
  content: "";
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(117, 219, 255, 0.95),
    rgba(116, 175, 255, 0.78) 36%,
    rgba(238, 201, 113, 0.96) 100%
  );
  box-shadow:
    0 0 1rem rgba(84, 184, 255, 0.2),
    0 0 1.4rem rgba(224, 187, 98, 0.16);
  transform-origin: top;
  transition: height 140ms linear, box-shadow 700ms ease;
}

.process-step[data-process-step] {
  position: relative;
  z-index: 1;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.process-step[data-process-step].reveal {
  opacity: 0;
  filter: blur(0.7rem);
  transform: perspective(1100px) translate3d(0, 4.4rem, 0) rotateX(5deg) scale(0.982);
  transform-origin: 50% 0;
  transition:
    opacity 1050ms ease var(--reveal-delay, 0ms),
    filter 1150ms ease var(--reveal-delay, 0ms),
    transform 1350ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.process-step[data-process-step].reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
}

.process-step[data-process-step]::after {
  position: absolute;
  top: -1.2rem;
  right: -1rem;
  left: 4.6rem;
  height: 1px;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(239, 205, 124, 0.82), transparent);
  transform: scaleX(0.3) translateX(-16%);
  transition: opacity 700ms ease, transform 1100ms var(--ease-out);
}

.process-step.is-current::after {
  opacity: var(--process-gold);
  transform: scaleX(1) translateX(0);
}

.process-step .step-marker span,
.process-step h3,
.process-step .step-output,
.process-step > div:last-child > p:first-child {
  transition:
    color 700ms ease,
    border-color 700ms ease,
    background-color 700ms ease,
    box-shadow 700ms ease,
    transform 900ms var(--ease-out);
}

.process-step.is-passed .step-marker span {
  color: #08111f;
  border-color: rgba(125, 216, 255, 0.82);
  background: rgba(138, 220, 255, 0.9);
  box-shadow: 0 0 1.5rem rgba(91, 190, 255, 0.22);
}

.process-step.is-current .step-marker span {
  color: #171006;
  border-color: rgba(248, 220, 154, 0.96);
  background: #e8c77d;
  box-shadow:
    0 0 0 0.32rem rgba(232, 199, 125, 0.08),
    0 0 2.4rem rgba(232, 199, 125, 0.34);
  transform: scale(1.075);
}

.process-step.is-current h3 {
  color: #fffaf0;
  transform: translate3d(0.28rem, 0, 0);
}

.process-step.is-current > div:last-child > p:first-child {
  color: #e8c77d;
}

.process-step.is-current .step-output {
  color: #ead7aa;
  border-color: rgba(232, 199, 125, 0.38);
  background: rgba(232, 199, 125, 0.045);
}

/* A három működési elv nem sima fade: perspektivikus, lassan lefékező flip. */
.principle-list {
  perspective: 1500px;
  transform-style: preserve-3d;
}

.principle--flip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.principle--flip.reveal {
  opacity: 0;
  filter: blur(0.65rem);
  transform:
    perspective(1500px)
    translate3d(0, 3.8rem, -4rem)
    rotateX(-18deg)
    rotateY(4deg)
    scale(0.972);
  transform-origin: 50% 0;
  transition:
    opacity 950ms ease var(--flip-delay, 0ms),
    filter 1050ms ease var(--flip-delay, 0ms),
    transform 1450ms cubic-bezier(0.16, 1, 0.3, 1) var(--flip-delay, 0ms),
    background-color 650ms ease,
    border-color 650ms ease;
  will-change: transform, opacity, filter;
}

.principle--flip.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform:
    perspective(1500px)
    translate3d(0, 0, 0)
    rotateX(0deg)
    rotateY(0deg)
    scale(1);
}

.principle--flip::before {
  position: absolute;
  z-index: -1;
  inset: -30% -18%;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(104, 191, 255, 0.08) 46%,
    rgba(235, 199, 115, 0.13) 52%,
    transparent 63%
  );
  transform: translate3d(-42%, 0, 0) rotate(4deg);
}

.principle--flip.is-visible::before {
  animation: principleLightSweep 1500ms var(--ease-out) calc(var(--flip-delay, 0ms) + 260ms) both;
}

.principle--flip.is-flip-settled {
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .principle--flip.is-visible:hover {
    border-color: rgba(224, 190, 109, 0.34);
    background: linear-gradient(90deg, rgba(69, 147, 255, 0.035), rgba(224, 190, 109, 0.045));
    transform: perspective(1500px) translate3d(0.3rem, -0.15rem, 0.7rem) rotateX(0deg) rotateY(-0.45deg) scale(1.004);
  }
}

@keyframes principleLightSweep {
  0% {
    opacity: 0;
    transform: translate3d(-42%, 0, 0) rotate(4deg);
  }
  24% { opacity: 0.78; }
  72% { opacity: 0.32; }
  100% {
    opacity: 0;
    transform: translate3d(42%, 0, 0) rotate(4deg);
  }
}

@keyframes statusPulse {
  0% { transform: scale(0.55); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.65); opacity: 0; }
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes orbitRingOne {
  from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(12deg); }
  to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(372deg); }
}

@keyframes orbitSpinTilt {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes nodeFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0.35rem, -0.5rem, 0); }
}

@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.3rem); }
}


@keyframes horizonPulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scaleX(0.72); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.12); }
}

@keyframes panelFloatLeft {
  0%, 100% { transform: rotateY(9deg) rotateZ(-1.2deg) translate3d(0, 0, 0); }
  50% { transform: rotateY(7deg) rotateZ(-0.6deg) translate3d(0.2rem, -0.65rem, 0); }
}

@keyframes panelFloatRight {
  0%, 100% { transform: rotateY(-9deg) rotateZ(1.2deg) translate3d(0, 0, 0); }
  50% { transform: rotateY(-7deg) rotateZ(0.6deg) translate3d(-0.2rem, -0.55rem, 0); }
}

@keyframes coreBreath {
  0%, 100% { transform: scale(0.97); opacity: 0.72; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes meshDrift {
  to { transform: rotate(360deg); }
}

@keyframes meshDash {
  to { stroke-dashoffset: -180; }
}

@keyframes cardPulse {
  0%, 100% { opacity: 0.22; transform: scaleX(0.45); }
  50% { opacity: 0.95; transform: scaleX(1); }
}

@keyframes labelFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -0.45rem; }
}

@keyframes marquee {
  to { transform: translateX(var(--marquee-offset, -50%)); }
}

@keyframes contactGlow {
  from { transform: translate3d(0, 0, 0) scale(0.9); }
  to { transform: translate3d(8rem, 3rem, 0) scale(1.16); }
}

/* --------------------------------------------------------------------------
   12. RESZPONZÍV TÖRÉSPONTOK
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root {
    --page: min(100% - 48px, 1200px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-orbit {
    right: -12rem;
    width: 42rem;
    opacity: 0.55;
  }

  .hero-copy {
    max-width: 58rem;
  }

  .hero-title {
    font-size: clamp(4rem, 12vw, 9rem);
  }

  .hero-lower {
    grid-template-columns: minmax(0, 1fr);
    max-width: 38rem;
  }

  .hero-actions {
    white-space: normal;
  }

  .services-layout,
  .process-layout,
  .faq-layout,
  .contact-layout {
    gap: clamp(3rem, 6vw, 6rem);
  }

  .principles-grid {
    grid-template-columns: minmax(16rem, 0.55fr) minmax(0, 1.45fr);
    gap: 4rem;
  }
}

@media (max-width: 960px) {
  .desktop-nav,
  .header-cta {
    display: none;
  }

  .header-shell {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .section-index {
    display: none;
  }

  .hero-grid {
    padding-top: 8rem;
  }

  .hero-copy {
    align-self: center;
  }

  .signal-orbit {
    top: 51%;
    right: -18rem;
    width: 40rem;
    opacity: 0.45;
  }

  .positioning-grid {
    grid-template-columns: 1fr;
  }

  .section-rail {
    display: none;
  }

  .positioning-detail {
    margin-left: 0;
  }

  .metric-strip article {
    min-height: 11rem;
  }

  .services-layout,
  .process-layout,
  .faq-layout,
  .contact-layout,
  .principles-grid {
    grid-template-columns: 1fr;
  }

  .services-intro,
  .process-sticky {
    position: relative;
    top: auto;
  }

  .service-index {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .service-index::-webkit-scrollbar {
    display: none;
  }

  .service-index a {
    grid-template-columns: auto auto;
    flex: 0 0 auto;
    min-width: 9.5rem;
    padding-right: 1rem;
    border-right: 1px solid var(--line);
  }

  .service-index a.is-active::after {
    display: none;
  }

  .work-heading {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .work-heading > p {
    max-width: 38rem;
  }

  .process-sticky h2,
  .faq .section-heading h2,
  .principles .section-heading h2 {
    max-width: 14ch;
  }

  .principle-list {
    margin-top: 1rem;
  }

  .contact-copy > p:not(.section-kicker) {
    max-width: 42rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  :root {
    --page: calc(100% - 32px);
    --section-space: 6.5rem;
  }

  body {
    font-size: 15px;
  }

  .site-header {
    padding-block: 0.65rem;
  }

  .header-shell {
    min-height: 3rem;
  }

  .hero-grid {
    min-height: 100svh;
    padding-top: 7rem;
    padding-bottom: 1.25rem;
  }

  .eyebrow {
    margin-bottom: 2rem;
    font-size: 0.62rem;
  }

  .hero-title {
    font-size: clamp(3.55rem, 18.4vw, 6.3rem);
    line-height: 0.83;
  }

  .title-line--outline {
    transform: translateX(7vw) translateY(var(--parallax-y, 0px));
  }

  .hero-lower {
    gap: 1.7rem;
    margin-top: 2.4rem;
    margin-left: 0;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .button {
    min-height: 3.4rem;
  }

  .signal-orbit {
    top: 36%;
    right: -18rem;
    width: 34rem;
    opacity: 0.33;
  }

  .orbit-node,
  .orbit-core {
    transform: scale(0.88) translate(-50%, -50%);
  }

  .hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 3rem;
  }

  .hero-meta > div {
    min-height: 4.25rem;
    padding-top: 0.75rem;
  }

  .hero-meta > div + div {
    padding-left: 1rem;
  }

  .hero-meta > div:last-child {
    display: none;
  }

  .marquee-set {
    padding-block: 0.9rem;
  }

  .statement {
    font-size: clamp(2.8rem, 14vw, 5rem);
  }

  .positioning-detail {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .micro-proof {
    max-width: 24rem;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .metric-strip article {
    min-height: 10.5rem;
  }

  .metric-strip article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .service-item {
    min-height: auto;
  }

  .service-item header {
    grid-template-columns: 2.25rem 1fr auto;
    gap: 0.75rem;
  }

  .service-symbol {
    width: 2.5rem;
    height: 2.5rem;
  }

  .service-body {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    margin-top: 2.3rem;
    margin-left: 3rem;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

  .case-card--wide {
    grid-column: auto;
  }

  .case-visual {
    aspect-ratio: 4 / 4.8;
  }

  .case-card--wide .case-visual {
    aspect-ratio: 16 / 10.5;
  }

  .case-info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .case-result {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    text-align: left;
  }

  .process-steps::before {
    left: 1.15rem;
  }

  .process-steps::after {
    left: calc(1.15rem - 1px);
  }

  .process-step {
    grid-template-columns: 2.35rem 1fr;
    gap: 1.25rem;
    min-height: 22rem;
  }

  .step-marker span {
    width: 2.35rem;
    height: 2.35rem;
  }

  .principle {
    grid-template-columns: 2.25rem 1fr;
  }

  .principle p {
    grid-column: 2;
  }

  .faq-item summary {
    gap: 1rem;
    padding-block: 1.35rem;
  }

  .faq-item > div > p {
    padding-right: 0;
  }

  .contact::before {
    background-size: 3.5rem 3.5rem;
  }

  .contact-form {
    border-radius: 1.4rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .interest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .form-footer .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 1.5rem;
  }

  .footer-bottom {
    grid-template-columns: 1fr auto;
    padding-block: 1.5rem;
  }

  .footer-bottom > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .footer-bottom button {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 430px) {
  .brand-name {
    font-size: 0.68rem;
  }

  .mobile-menu {
    padding-top: 7rem;
  }

  .mobile-menu-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-title {
    font-size: clamp(3.15rem, 18vw, 4.8rem);
  }

  .hero-lede {
    font-size: 0.94rem;
  }

  .hero-meta {
    grid-template-columns: 1fr;
  }

  .hero-meta > div:nth-child(2) {
    display: none;
  }

  .service-item h3 {
    font-size: 1.9rem;
  }

  .service-body {
    margin-left: 0;
  }

  .case-chip {
    top: 0.75rem;
    left: 0.75rem;
  }

  .principle {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .principle p {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid > div:first-child {
    grid-column: auto;
  }
}



/* --------------------------------------------------------------------------
   HERO V2 — késői reszponzív felülírások
   A régebbi komponensek breakpointjai után szerepel, ezért csak a hero új
   szerkezetét hangolja, az alatta lévő szekciókhoz nem nyúl.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(22rem, 1fr) auto;
  }

  .hero-copy {
    max-width: 64rem;
  }

  .hero-title {
    font-size: clamp(3.6rem, 9vw, 6.8rem);
  }

  .hero-lower {
    max-width: 47rem;
  }

  .hero-card--left { left: 3%; }
  .hero-card--right { right: 3%; }
}

@media (max-width: 960px) {
  .hero-grid {
    padding-top: 7.5rem;
  }

  .hero-copy {
    align-self: start;
  }

  .hero-stage {
    min-height: 24rem;
  }

  .hero-card {
    top: 22%;
    width: 17rem;
    min-height: 14.2rem;
  }

  .hero-card--left { left: -1rem; }
  .hero-card--right { right: -1rem; }

  .hero-core {
    width: 17rem;
  }

  .hero-float-label--two {
    right: 22%;
  }
}

@media (max-width: 720px) {
  .hero-grid {
    min-height: 100svh;
    grid-template-rows: auto minmax(20rem, 1fr) auto;
    padding-top: 6.8rem;
    padding-bottom: 1.1rem;
  }

  .eyebrow {
    max-width: 21rem;
    margin-right: auto;
    margin-bottom: 1.35rem;
    margin-left: auto;
    font-size: 0.57rem;
    line-height: 1.6;
  }

  .hero-title {
    font-size: clamp(2.85rem, 13.2vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.058em;
  }

  .hero-lower {
    gap: 1.1rem;
    margin-top: 1.2rem;
  }

  .hero-lede {
    max-width: 36rem;
    font-size: 0.88rem;
    line-height: 1.65;
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
  }

  .hero-actions .button {
    min-height: 3.2rem;
    padding-inline: 1.15rem;
    font-size: 0.74rem;
  }

  .hero-actions .text-link {
    font-size: 0.73rem;
  }

  .hero-stage {
    min-height: 20rem;
    margin-top: 0;
  }

  .hero-stage-grid {
    inset: 10% -10% 0;
    background-size: 3rem 3rem;
  }

  .hero-card {
    top: 24%;
    width: min(43vw, 12.5rem);
    min-height: 11.9rem;
    padding: 1rem;
    border-radius: 0.8rem;
  }

  .hero-card--left { left: -0.6rem; }
  .hero-card--right { right: -0.6rem; }

  .hero-card-index {
    margin-bottom: 0.7rem;
    font-size: 0.48rem;
  }

  .hero-card h2 {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }

  .hero-card > p:not(.hero-card-index) {
    display: none;
  }

  .hero-card ul {
    display: grid;
    gap: 0.3rem;
  }

  .hero-card li {
    width: fit-content;
    padding: 0.25rem 0.42rem;
    font-size: 0.45rem;
  }

  .hero-core {
    bottom: 1rem;
    width: 12rem;
  }

  .hero-core-wordmark strong {
    font-size: 2rem;
  }

  .hero-float-label {
    display: none;
  }

  .hero-horizon {
    right: -14%;
    left: -14%;
    bottom: 2.2rem;
  }

  .hero-meta {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }

  .hero-meta > div {
    min-height: 3.7rem;
    padding-top: 0.65rem;
  }

  .hero-meta > div:last-child {
    display: none;
  }
}

@media (max-width: 430px) {
  .brand-name {
    font-size: 0.95rem;
  }

  .brand-suffix {
    max-width: 5.5rem;
    font-size: 0.48rem;
  }

  .hero-title {
    font-size: clamp(2.55rem, 12.4vw, 3.7rem);
  }

  .hero-lede {
    font-size: 0.81rem;
  }

  .hero-actions .text-link {
    display: none;
  }

  .hero-card {
    width: 10.4rem;
  }

  .hero-card--left { left: -1.55rem; }
  .hero-card--right { right: -1.55rem; }

  .hero-core {
    width: 9.9rem;
  }

  .hero-meta {
    grid-template-columns: 1fr;
  }

  .hero-meta > div:nth-child(2) {
    display: none;
  }
}



/* --------------------------------------------------------------------------
   12.5 HERO FINOMHANGOLÁS — v2.3
   Csak a hero központi márkajelét, fő CTA-ját és két szolgáltatáskártyáját
   módosítja. A v2.2 procedurális háttér és annak scroll-motion rendszere
   változatlan marad.
   -------------------------------------------------------------------------- */

/* A hero fő CTA-ja nem követi a kurzort: hoverkor a helyén marad, csak finoman
   nagyobb lesz, miközben egy lassú, keskeny fénycsóva fut végig rajta. */
.hero-primary-cta {
  transform: scale(1);
  transform-origin: center;
  will-change: transform, box-shadow;
  transition:
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-primary-cta::before {
  inset: -65% auto -65% -48%;
  width: 31%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 18%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(226, 198, 128, 0.3) 70%,
    transparent 100%
  );
  filter: blur(0.22rem);
  opacity: 0.82;
  transform: skewX(-18deg);
  transition: left 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-primary-cta:hover,
.hero-primary-cta:focus-visible {
  transform: scale(1.035);
  filter: brightness(1.055) saturate(1.04);
  box-shadow:
    0 21px 74px rgba(84, 145, 255, 0.38),
    0 0 0 1px rgba(234, 210, 151, 0.2) inset;
}

.hero-primary-cta:hover::before,
.hero-primary-cta:focus-visible::before {
  left: 121%;
  transform: skewX(-18deg);
}

.hero-primary-cta:active {
  transform: scale(0.995);
  transition-duration: 120ms;
}

.hero-primary-cta:hover svg,
.hero-primary-cta:focus-visible svg {
  transform: translateX(0.14rem);
}

/* Apple-szerű, opálos liquid-glass szolgáltatáskártyák. A kártyák eredeti
   tartalma és lebegő alapmozgása megmarad; a hover külön scale/translate
   tulajdonságokat használ, ezért nem akad össze a meglévő transform motionnel. */
.hero-card {
  isolation: isolate;
  border-color: rgba(202, 222, 255, 0.22);
  border-top-color: rgba(240, 247, 255, 0.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.115), transparent 33%),
    radial-gradient(circle at 90% 110%, rgba(216, 180, 100, 0.075), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(77, 127, 215, 0.038) 46%, rgba(4, 12, 29, 0.19) 100%);
  box-shadow:
    0 2.4rem 6.5rem rgba(0, 0, 0, 0.3),
    0 0.8rem 2.4rem rgba(8, 51, 126, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(126, 174, 255, 0.06);
  -webkit-backdrop-filter: blur(28px) saturate(155%) brightness(1.04);
  backdrop-filter: blur(28px) saturate(155%) brightness(1.04);
  scale: 1;
  translate: 0 0;
  transition:
    scale 720ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 720ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 520ms ease,
    box-shadow 720ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 720ms cubic-bezier(0.16, 1, 0.3, 1),
    background 720ms ease;
}

.hero-card::before {
  z-index: -1;
  top: -52%;
  bottom: auto;
  width: 74%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.11), rgba(87, 154, 255, 0.035) 48%, transparent 72%);
  filter: blur(1.25rem);
  opacity: 0.66;
  transition: opacity 650ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hero-card--left::before {
  left: -18%;
}

.hero-card--right::before {
  right: -18%;
}

.hero-card::after {
  position: absolute;
  z-index: 6;
  top: -72%;
  bottom: -72%;
  left: -62%;
  width: 33%;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05) 23%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(161, 205, 255, 0.08) 76%,
    transparent
  );
  filter: blur(0.32rem);
  opacity: 0;
  transform: skewX(-15deg);
  transition:
    left 1050ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease;
}

.hero-card:hover,
.hero-card:focus-within {
  scale: 1.027;
  translate: 0 -0.38rem;
  border-color: rgba(219, 233, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.58);
  filter: brightness(1.055) saturate(1.06);
  box-shadow:
    0 3rem 8rem rgba(0, 0, 0, 0.37),
    0 1.2rem 3.2rem rgba(22, 91, 211, 0.17),
    0 0 3.8rem rgba(77, 143, 255, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(214, 182, 111, 0.09);
}

.hero-card:hover::before,
.hero-card:focus-within::before {
  opacity: 0.94;
  transform: translate3d(8%, 9%, 0) scale(1.08);
}

.hero-card:hover::after,
.hero-card:focus-within::after {
  left: 132%;
  opacity: 0.9;
}

.hero-card li {
  background: rgba(255, 255, 255, 0.038);
  border-color: rgba(199, 220, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* A korábbi GZ gömb és forgó háló helyén a feltöltött logó lebeg egy finom,
   rétegzett liquid-glass felületen. A környező canvas-hálóhoz nem nyúlunk. */
.hero-core {
  bottom: 1.25rem;
  width: clamp(18rem, 25vw, 24.5rem);
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  filter: none;
  pointer-events: none;
  transform: translateX(-50%) translateY(var(--hero-core-y, 0px));
}

.hero-core::before {
  inset: 20% 4% -10%;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(57, 137, 255, 0.2), transparent 62%),
    radial-gradient(ellipse at 58% 54%, rgba(214, 182, 111, 0.1), transparent 50%);
  box-shadow: none;
  filter: blur(1.35rem);
  opacity: 0.86;
  animation: heroLogoAura 7.5s ease-in-out infinite;
}

.hero-core::after {
  inset: auto 9% -0.55rem;
  height: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(85, 159, 255, 0.3), rgba(214, 182, 111, 0.075) 34%, transparent 72%);
  filter: blur(0.42rem);
  opacity: 0.82;
}

.hero-logo-glass {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(0.95rem, 1.7vw, 1.4rem) clamp(1.2rem, 2vw, 1.8rem);
  overflow: hidden;
  border: 1px solid rgba(204, 226, 255, 0.21);
  border-top-color: rgba(255, 255, 255, 0.43);
  border-radius: clamp(1.45rem, 2.4vw, 2.15rem);
  background:
    radial-gradient(circle at 18% -10%, rgba(255, 255, 255, 0.145), transparent 37%),
    radial-gradient(circle at 92% 112%, rgba(214, 182, 111, 0.09), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(72, 128, 224, 0.04) 46%, rgba(5, 13, 31, 0.17));
  box-shadow:
    0 2.4rem 7rem rgba(0, 0, 0, 0.3),
    0 0.85rem 2.8rem rgba(35, 103, 218, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(102, 164, 255, 0.075);
  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(1.04);
  backdrop-filter: blur(30px) saturate(150%) brightness(1.04);
  transform-style: preserve-3d;
  animation: heroLogoFloat 8.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.hero-logo-glass::before {
  position: absolute;
  inset: 1px;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.095), transparent 25%, transparent 70%, rgba(227, 196, 119, 0.055)),
    radial-gradient(circle at 72% 18%, rgba(118, 183, 255, 0.065), transparent 34%);
  opacity: 0.92;
}

.hero-logo-glass::after {
  position: absolute;
  top: -72%;
  bottom: -72%;
  left: -62%;
  width: 27%;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), rgba(224, 195, 119, 0.08), transparent);
  filter: blur(0.36rem);
  transform: skewX(-17deg);
  animation: heroLogoSweep 8.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.hero-logo-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 94%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0.85rem 1.55rem rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 1.15rem rgba(75, 139, 244, 0.11));
  transform: translateZ(1rem);
}

@keyframes heroLogoFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
  50% {
    transform: translate3d(0, -0.42rem, 0) rotateX(0.55deg);
  }
}

@keyframes heroLogoAura {
  0%, 100% {
    opacity: 0.66;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.98;
    transform: scale(1.06);
  }
}

@keyframes heroLogoSweep {
  0%, 56% {
    left: -62%;
    opacity: 0;
  }
  62% {
    opacity: 0.72;
  }
  79% {
    left: 132%;
    opacity: 0.2;
  }
  80%, 100% {
    left: 132%;
    opacity: 0;
  }
}

@media (max-width: 980px) {
  .hero-core {
    width: clamp(15rem, 31vw, 18.5rem);
  }
}

@media (max-width: 720px) {
  .hero-core {
    bottom: 0.85rem;
    width: 12.25rem;
  }

  .hero-logo-glass {
    padding: 0.72rem 0.82rem;
    border-radius: 1.3rem;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
  }

  .hero-card:hover,
  .hero-card:focus-within {
    scale: 1.018;
    translate: 0 -0.2rem;
  }
}

@media (max-width: 430px) {
  .hero-core {
    width: 10.1rem;
  }

  .hero-logo-glass {
    padding: 0.58rem 0.64rem;
    border-radius: 1.05rem;
  }
}


/* --------------------------------------------------------------------------
   12.6 HERO ALATTI FINOMHANGOLÁS — v2.4
   --------------------------------------------------------------------------
   Kizárólag a hero utáni pozicionálási blokkot és a mérőszámokat módosítja.
   A v2.2 canvas-háttér, a hero v2.3 elemei és az oldal további szekciói
   változatlanok maradnak.
   -------------------------------------------------------------------------- */

/* A hero alsó meta-sora kikerült a HTML-ből. A stage alatt így nincs külön
   információs UI-réteg; a háttér és a hero fényhorizontja szabadon marad. */
.hero-grid {
  grid-template-rows: auto minmax(22rem, 1fr);
}

/* A bevezető rail és kicker kikerült, ezért a tartalom teljes szélességű,
   tiszta rácsban folytatódik. */
.positioning-grid--minimal {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Öt, két irányban animálható sor. A maszkoló doboz extra alsó belső teret
   hagy a Poppins leszálló szárainak, így a betűk alja nem vágódik le. */
.statement--sequenced {
  display: grid;
  gap: clamp(0.035em, 0.18vw, 0.08em);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
  overflow: visible;
  line-height: 1.04;
}

.statement-line {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0.06em 0.08em 0.18em 0.02em;
  margin-bottom: -0.11em;
  line-height: 1.04;
}

.statement-line > span {
  position: relative;
  display: block;
  padding-bottom: 0.015em;
  white-space: nowrap;
  opacity: var(--line-opacity, 0);
  filter: blur(var(--line-blur, 0.52rem));
  transform: translate3d(0, var(--line-y, 0.72em), 0) scaleY(var(--line-scale, 0.985));
  transform-origin: left bottom;
  will-change: transform, opacity, filter;
}

.statement-line > span::after {
  position: absolute;
  z-index: 2;
  top: 7%;
  bottom: 10%;
  left: 0;
  width: 19%;
  content: "";
  pointer-events: none;
  opacity: var(--line-shine-opacity, 0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(122, 205, 255, 0.035) 16%,
    rgba(224, 243, 255, 0.62) 48%,
    rgba(227, 196, 117, 0.24) 69%,
    transparent 100%
  );
  filter: blur(0.2rem);
  mix-blend-mode: screen;
  transform: translate3d(var(--line-shine-x, -160%), 0, 0) skewX(-16deg);
  will-change: transform, opacity;
}

.statement-line--accent > span {
  color: transparent;
  background: linear-gradient(105deg, #eef7ff 0%, #7dcfff 35%, #5898ff 63%, #e2c579 108%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A rövid kiegészítő proof blokk kikerült; a leírás egyetlen, jól olvasható
   oszlopban marad, több levegővel a címsor és a mérőszámok között. */
.positioning-detail--single {
  display: block;
  max-width: 52rem;
  margin-left: auto;
}

.positioning-detail--single > p {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.82;
  color: #c6d0e8;
}

/* Opálos, rétegzett liquid-glass mérőkártyák. A szám és a magyarázat nem
   pozicionálódik egymásra: normál dokumentumfolyamban, külön ritmussal élnek. */
.metric-strip--glass {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin-top: clamp(5.5rem, 10vw, 9.5rem);
  border: 0;
}

.metric-strip--glass .metric-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(17rem, 24vw, 21rem);
  padding: clamp(1.65rem, 2.8vw, 2.8rem);
  overflow: hidden;
  border: 1px solid rgba(194, 219, 255, 0.19);
  border-top-color: rgba(245, 250, 255, 0.38);
  border-radius: clamp(1.35rem, 2.2vw, 2rem);
  background:
    radial-gradient(circle at 14% -8%, rgba(255, 255, 255, 0.115), transparent 35%),
    radial-gradient(circle at 105% 108%, rgba(218, 184, 101, 0.075), transparent 43%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.067), rgba(76, 126, 214, 0.032) 48%, rgba(4, 11, 27, 0.16));
  box-shadow:
    0 2.2rem 6rem rgba(0, 0, 0, 0.24),
    0 0.7rem 2rem rgba(19, 73, 160, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.105),
    inset 0 -1px 0 rgba(111, 167, 255, 0.045);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
  transition:
    border-color 650ms ease,
    box-shadow 750ms var(--ease-out),
    transform 750ms var(--ease-out),
    background 650ms ease;
}

.metric-strip--glass .metric-card::before {
  position: absolute;
  z-index: -1;
  top: -42%;
  left: -18%;
  width: 72%;
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 180, 255, 0.11), transparent 68%);
  filter: blur(1.1rem);
  opacity: 0.78;
  transition: opacity 650ms ease, transform 850ms var(--ease-out);
}

.metric-strip--glass .metric-card::after {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -45%;
  width: 22%;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), rgba(220, 190, 115, 0.08), transparent);
  filter: blur(0.3rem);
  transform: skewX(-16deg);
  transition: left 1200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
}

.metric-value {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.45rem, 1vw, 0.8rem);
  min-width: 0;
}

.metric-strip--glass .metric-number {
  display: block;
  font-size: clamp(4.6rem, 7.2vw, 7.4rem);
  font-weight: 430;
  line-height: 0.88;
  letter-spacing: -0.085em;
  color: #f7f9ff;
  text-shadow: 0 0 2.2rem rgba(82, 156, 255, 0.14);
}

.metric-strip--glass sup {
  margin: 0.35rem 0 0;
  font-size: clamp(0.9rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1;
  color: #e1c57d;
  letter-spacing: 0.02em;
}

.metric-copy {
  display: grid;
  gap: 0.7rem;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(178, 205, 255, 0.13);
}

.metric-strip--glass .metric-copy p {
  position: static;
  margin: 0;
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  font-weight: 520;
  line-height: 1.45;
  color: #e5eaf8;
  letter-spacing: -0.015em;
}

.metric-strip--glass .metric-copy small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.65;
  color: #8f9cbb;
}

@media (hover: hover) and (pointer: fine) {
  .metric-strip--glass .metric-card:hover {
    border-color: rgba(212, 231, 255, 0.32);
    border-top-color: rgba(255, 255, 255, 0.52);
    background:
      radial-gradient(circle at 18% -4%, rgba(255, 255, 255, 0.14), transparent 37%),
      radial-gradient(circle at 102% 106%, rgba(218, 184, 101, 0.1), transparent 44%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(78, 132, 225, 0.04) 48%, rgba(4, 11, 27, 0.17));
    box-shadow:
      0 2.8rem 7rem rgba(0, 0, 0, 0.31),
      0 1rem 2.8rem rgba(28, 89, 190, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(214, 182, 111, 0.065);
    transform: translate3d(0, -0.35rem, 0);
  }

  .metric-strip--glass .metric-card:hover::before {
    opacity: 1;
    transform: translate3d(9%, 8%, 0) scale(1.08);
  }

  .metric-strip--glass .metric-card:hover::after {
    left: 128%;
    opacity: 0.75;
  }
}

.data-note {
  margin-top: 1.15rem;
  padding-inline: 0.25rem;
  line-height: 1.65;
}

@media (max-width: 960px) {
  .statement--sequenced {
    max-width: 100%;
  }

  .metric-strip--glass {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-strip--glass .metric-card:last-child {
    grid-column: 1 / -1;
    min-height: 15rem;
  }
}

@media (max-width: 720px) {
  .hero-grid {
    grid-template-rows: auto minmax(20rem, 1fr);
  }

  .statement--sequenced {
    width: fit-content;
    max-width: 100%;
    gap: 0.075em;
    font-size: clamp(1.9rem, 9vw, 4.75rem);
  }

  .statement-line {
    width: fit-content;
  }

  .positioning-detail--single {
    margin-left: 0;
  }

  .positioning-detail--single > p {
    font-size: 1rem;
    line-height: 1.78;
  }

  .metric-strip--glass {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 4.75rem;
  }

  .metric-strip--glass .metric-card,
  .metric-strip--glass .metric-card:last-child {
    grid-column: auto;
    min-height: 14.5rem;
    padding: 1.5rem;
  }

  .metric-strip--glass .metric-card + .metric-card {
    border-left: 1px solid rgba(194, 219, 255, 0.19);
  }

  .metric-strip--glass .metric-number {
    font-size: clamp(4.5rem, 23vw, 6.4rem);
  }

  .metric-copy {
    padding-top: 2.5rem;
  }
}

@media (max-width: 430px) {
  .statement--sequenced {
    font-size: clamp(2.15rem, 10.5vw, 2.85rem);
  }

  .metric-strip--glass .metric-card,
  .metric-strip--glass .metric-card:last-child {
    min-height: 13.75rem;
    border-radius: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   12.7 PORTFÓLIÓ ÉS TARTALMI IGAZÍTÁS — v4.3
   --------------------------------------------------------------------------
   Ez a réteg kizárólag a pozicionálási szöveg igazítását, a portfólió fejlécét
   és a projektképek lightbox nézetét módosítja. A canvas háttérhez és annak
   görgetésvezérelt motion rendszeréhez nem nyúl.
   -------------------------------------------------------------------------- */

/* A beúszó címsor és az alatta lévő leírás közös, középre rendezett blokkban
   él. Ettől a két elem bal széle pontosan egy vonalba kerül. */
.positioning-copy {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.positioning-copy .statement--sequenced {
  margin-inline: 0;
}

.positioning-copy .positioning-detail--single {
  margin-left: 0;
}

/* A portfólió leírása beljebb kerül a jobb margótól, miközben a két oszlop
   között stabil, jól olvasható tér marad. */
.work-heading--balanced {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
  gap: clamp(3rem, 6vw, 7rem);
  max-width: 82rem;
  padding-right: clamp(1rem, 3vw, 3rem);
}

.work-heading--balanced > p {
  width: 100%;
  max-width: 29rem;
  justify-self: start;
  margin-bottom: 0.35rem;
  line-height: 1.75;
}

.case-card > a[data-project-lightbox] {
  display: block;
  cursor: zoom-in;
}

/* A kis projektcímek eltávolítása után a fő projektcím marad az információs
   blokk első, vizuálisan hangsúlyos eleme. */
.case-info > div:first-child > h3:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   PROJEKT LIGHTBOX
   -------------------------------------------------------------------------- */

body.lightbox-open {
  overflow: hidden;
}

.project-lightbox {
  width: min(94vw, 90rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  color: var(--text);
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0) scale(0.985);
  transition:
    opacity 420ms ease,
    transform 620ms var(--ease-out),
    display 420ms allow-discrete,
    overlay 420ms allow-discrete;
}

.project-lightbox[open] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.project-lightbox.is-closing {
  opacity: 0;
  transform: translate3d(0, 0.9rem, 0) scale(0.99);
}

@starting-style {
  .project-lightbox[open] {
    opacity: 0;
    transform: translate3d(0, 1.4rem, 0) scale(0.985);
  }
}

.project-lightbox::backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(21, 74, 145, 0.2), transparent 48%),
    rgba(1, 4, 12, 0.78);
  -webkit-backdrop-filter: blur(1.15rem) saturate(1.18);
  backdrop-filter: blur(1.15rem) saturate(1.18);
  opacity: 0;
  transition:
    opacity 420ms ease,
    display 420ms allow-discrete,
    overlay 420ms allow-discrete;
}

.project-lightbox[open]::backdrop {
  opacity: 1;
}

.project-lightbox.is-closing::backdrop {
  opacity: 0;
}

@starting-style {
  .project-lightbox[open]::backdrop {
    opacity: 0;
  }
}

.project-lightbox-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(215, 230, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.42);
  border-radius: clamp(1.35rem, 2.4vw, 2.2rem);
  background:
    radial-gradient(circle at 14% -10%, rgba(255, 255, 255, 0.11), transparent 34%),
    radial-gradient(circle at 98% 108%, rgba(219, 184, 101, 0.08), transparent 38%),
    linear-gradient(145deg, rgba(18, 30, 58, 0.86), rgba(4, 10, 25, 0.9));
  box-shadow:
    0 4rem 10rem rgba(0, 0, 0, 0.54),
    0 1.5rem 4rem rgba(22, 84, 174, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(2rem) saturate(1.25);
  backdrop-filter: blur(2rem) saturate(1.25);
}

.project-lightbox-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  height: min(70vh, 46rem);
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 2.2rem);
  background:
    radial-gradient(circle at 50% 45%, rgba(86, 148, 255, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(1, 5, 15, 0.38), rgba(1, 4, 12, 0.62));
  touch-action: none;
  cursor: default;
}

.project-lightbox-stage.is-zoomed {
  cursor: grab;
}

.project-lightbox-stage.is-dragging {
  cursor: grabbing;
}

.project-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform:
    translate3d(var(--lightbox-pan-x, 0px), var(--lightbox-pan-y, 0px), 0)
    scale(var(--lightbox-zoom, 1));
  transition: transform 520ms var(--ease-out), opacity 240ms ease;
  will-change: transform;
}

.project-lightbox-stage.is-dragging .project-lightbox-image {
  transition: none;
}

.project-lightbox-close,
.project-lightbox-controls {
  border: 1px solid rgba(229, 239, 255, 0.24);
  background:
    radial-gradient(circle at 32% 10%, rgba(255, 255, 255, 0.16), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(22, 43, 78, 0.22));
  box-shadow:
    0 1rem 2.8rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(1.25rem) saturate(1.35);
  backdrop-filter: blur(1.25rem) saturate(1.35);
}

.project-lightbox-close {
  position: absolute;
  z-index: 5;
  top: clamp(0.75rem, 1.6vw, 1.35rem);
  right: clamp(0.75rem, 1.6vw, 1.35rem);
  display: grid;
  place-items: center;
  width: clamp(2.8rem, 4vw, 3.35rem);
  height: clamp(2.8rem, 4vw, 3.35rem);
  padding: 0;
  color: #f4f8ff;
  border-radius: 50%;
  transition:
    transform 420ms var(--ease-out),
    border-color 300ms ease,
    background-color 300ms ease,
    box-shadow 300ms ease;
}

.project-lightbox-close svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.project-lightbox-close:hover {
  border-color: rgba(255, 255, 255, 0.46);
  box-shadow:
    0 1.25rem 3rem rgba(0, 0, 0, 0.3),
    0 0 2rem rgba(102, 181, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: scale(1.06);
}

.project-lightbox-controls {
  position: absolute;
  z-index: 4;
  bottom: clamp(0.75rem, 1.6vw, 1.35rem);
  left: 50%;
  display: grid;
  grid-template-columns: 2.55rem minmax(3.7rem, auto) 2.55rem;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
  transform: translateX(-50%);
}

.project-lightbox-controls button {
  display: grid;
  place-items: center;
  min-height: 2.55rem;
  padding: 0;
  color: #f2f6ff;
  font-size: 1.25rem;
  font-weight: 400;
  transition: background-color 240ms ease, color 240ms ease;
}

.project-lightbox-controls button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.09);
}

.project-lightbox-controls button:disabled {
  color: rgba(215, 225, 245, 0.34);
  cursor: not-allowed;
}

.project-lightbox-controls output {
  min-width: 3.7rem;
  padding-inline: 0.6rem;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 2.55rem;
  color: #d9e3f8;
  text-align: center;
  letter-spacing: 0.04em;
  border-inline: 1px solid rgba(220, 234, 255, 0.12);
}

.project-lightbox-caption {
  display: grid;
  grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 0.66fr);
  align-items: start;
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(1.35rem, 2.5vw, 2.5rem) clamp(1.4rem, 3vw, 3.25rem);
  border-top: 1px solid rgba(210, 226, 255, 0.13);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(2, 7, 18, 0.16));
}

.project-lightbox-caption h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  font-weight: 520;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.project-lightbox-caption p {
  max-width: 58rem;
  margin: 0;
  font-size: clamp(0.92rem, 1.1vw, 1.04rem);
  line-height: 1.75;
  color: #b9c5df;
}

@media (max-width: 960px) {
  .work-heading--balanced {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 100%;
    padding-right: 0;
  }

  .work-heading--balanced > p {
    max-width: 38rem;
  }
}

@media (max-width: 720px) {
  .positioning-copy {
    width: 100%;
  }

  .project-lightbox {
    width: calc(100vw - 1rem);
  }

  .project-lightbox-shell {
    max-height: 96vh;
    border-radius: 1.25rem;
  }

  .project-lightbox-stage {
    height: 61vh;
    padding: 0.7rem;
  }

  .project-lightbox-caption {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 1.15rem 1.2rem 1.35rem;
  }

  .project-lightbox-caption p {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .project-lightbox-controls {
    bottom: 0.7rem;
  }
}


/* --------------------------------------------------------------------------
   13. AKADÁLYMENTESSÉG / REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .hero-stage,
  .hero-card,
  .hero-core,
  .hero-core-mesh {
    animation: none !important;
    transform: none;
  }

  .hero-core {
    transform: translateX(-50%);
  }

  .title-line > span {
    transform: none;
  }

  .case-cursor {
    display: none;
  }

  .process-step[data-process-step],
  .principle--flip,
  .principle--flip:hover {
    filter: none !important;
    transform: none !important;
  }

  .principle--flip::before {
    display: none;
  }
}

@media (hover: none) {
  .case-cursor {
    display: none;
  }

  .process-step[data-process-step],
  .principle--flip,
  .principle--flip:hover {
    filter: none !important;
    transform: none !important;
  }

  .principle--flip::before {
    display: none;
  }

  .case-card {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   15. V4.5.1 FINOMHANGOLÁS
   Kizárólag: elv-kártyák arany hover, nyitott GYIK arany akcentus,
   scroll-linked kapcsolati címsor, működő űrlap és footer logó.
   -------------------------------------------------------------------------- */

/* Három működési elv: visszafogott arany fényréteg hoverkor. */
.principle--flip::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 13% 50%, rgba(229, 195, 112, 0.115), transparent 34%),
    linear-gradient(90deg, rgba(229, 195, 112, 0.055), transparent 32%);
  box-shadow:
    inset 0 1px 0 rgba(242, 214, 143, 0.09),
    inset 0 -1px 0 rgba(226, 190, 103, 0.13);
  transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.principle--flip > span,
.principle--flip h3 {
  transition:
    color 520ms ease,
    text-shadow 720ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .principle--flip.is-visible:hover::after {
    opacity: 1;
  }

  .principle--flip.is-visible:hover > span {
    color: #e7c77b;
    text-shadow: 0 0 1.25rem rgba(224, 187, 96, 0.32);
  }

  .principle--flip.is-visible:hover h3 {
    color: #fff8e8;
    text-shadow: 0 0 1.8rem rgba(224, 187, 96, 0.16);
  }
}

/* GYIK: a nyitott elem finom arany jelzést és meleg üvegfényt kap. */
.faq-item {
  position: relative;
  transition:
    border-color 520ms ease,
    background 650ms ease,
    box-shadow 650ms ease;
}

.faq-item[open] {
  border-color: rgba(227, 194, 112, 0.34);
  background:
    radial-gradient(circle at 92% 12%, rgba(231, 198, 119, 0.075), transparent 34%),
    linear-gradient(90deg, rgba(227, 194, 112, 0.035), transparent 56%);
  box-shadow: inset 0 1px 0 rgba(240, 216, 158, 0.055);
}

.faq-item summary span,
.faq-item > div > p {
  transition:
    color 520ms ease,
    text-shadow 650ms ease;
}

.faq-item[open] summary span {
  color: #fff6df;
  text-shadow: 0 0 1.55rem rgba(229, 195, 111, 0.14);
}

.faq-item[open] summary i {
  color: #e8c97d;
  border-color: rgba(233, 202, 126, 0.58);
  box-shadow:
    0 0 1.4rem rgba(222, 180, 82, 0.15),
    inset 0 0 0 1px rgba(255, 238, 194, 0.035);
}

.faq-item[open] > div > p {
  color: #cfd5e5;
}

/* Kapcsolati főcím: nagyobb sorköz, maszkolt sorok és kétirányú scroll-motion. */
.contact-statement {
  display: grid;
  gap: clamp(0.08em, 0.4vw, 0.16em);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 2.35rem;
  overflow: visible;
  font-size: clamp(3.2rem, 6.7vw, 7rem);
  font-weight: 470;
  line-height: 1.08;
  letter-spacing: -0.07em;
}

.contact-statement-line {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: -0.04em;
  padding: 0.035em 0.08em 0.16em 0.015em;
  overflow: hidden;
  line-height: 1.08;
}

.contact-statement-line > span {
  position: relative;
  display: block;
  padding-bottom: 0.02em;
  white-space: nowrap;
  opacity: var(--contact-line-opacity, 0);
  filter: blur(var(--contact-line-blur, 0.5rem));
  transform: translate3d(0, var(--contact-line-y, 0.7em), 0) scaleY(var(--contact-line-scale, 0.985));
  transform-origin: left bottom;
  will-change: transform, opacity, filter;
}

.contact-statement-line > span::after {
  position: absolute;
  z-index: 2;
  top: 7%;
  bottom: 11%;
  left: 0;
  width: 20%;
  content: "";
  pointer-events: none;
  opacity: var(--contact-shine-opacity, 0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(117, 201, 255, 0.04) 16%,
    rgba(230, 244, 255, 0.62) 47%,
    rgba(231, 198, 118, 0.28) 69%,
    transparent 100%
  );
  filter: blur(0.2rem);
  mix-blend-mode: screen;
  transform: translate3d(var(--contact-shine-x, -160%), 0, 0) skewX(-16deg);
  will-change: transform, opacity;
}

.contact-statement-line--accent > span {
  color: transparent;
  background: linear-gradient(105deg, #f3f7ff 0%, #91d4ff 34%, #6c9fff 63%, #e2c579 108%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-statement-line--accent em {
  color: inherit;
  font-style: normal;
  -webkit-text-stroke: 0;
}

/* A FormSubmit spamcsapda vizuálisan és a billentyűzetes fókuszból is kiesik. */
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-form button[disabled] {
  cursor: wait;
  opacity: 0.72;
  filter: saturate(0.72);
}

/* Footer: a korábbi szöveges Signal/Form márkajel helyett a GenZzz logó. */
.footer-brand-logo {
  display: inline-flex;
  width: clamp(9rem, 12vw, 11.5rem);
  max-width: 100%;
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 620ms ease;
}

.footer-brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0.8rem 1.8rem rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 1.25rem rgba(224, 188, 98, 0.055));
}

.footer-brand-logo:hover,
.footer-brand-logo:focus-visible {
  opacity: 1;
  filter: brightness(1.06);
  transform: translateY(-0.18rem) scale(1.012);
}

@media (max-width: 720px) {
  .contact-statement {
    gap: 0.12em;
    font-size: clamp(2.05rem, 9vw, 4rem);
    line-height: 1.1;
  }

  .contact-statement-line {
    padding-bottom: 0.18em;
    line-height: 1.1;
  }
}

@media (max-width: 430px) {
  .contact-statement {
    font-size: clamp(1.9rem, 8.6vw, 2.35rem);
  }

  .footer-brand-logo {
    width: 10.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-statement-line > span {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .contact-statement-line > span::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   16. V4.6 — HERO TÉRKÖZ, AKTÍV NAVIGÁCIÓ ÉS KAPCSOLATI LAYOUT
   --------------------------------------------------------------------------
   A canvas-háttérhez és annak motion logikájához ez a blokk nem nyúl.
   -------------------------------------------------------------------------- */

/* A fejlécben egyetlen opálos pill mozog az aktuális menüpont alá. */
.desktop-nav {
  position: relative;
  gap: 0.15rem;
  padding: 0.28rem;
  border: 1px solid rgba(195, 214, 255, 0.1);
  border-radius: 999px;
  background: rgba(8, 14, 31, 0.2);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0.8rem 2.5rem rgba(0, 0, 0, 0.08);
  isolation: isolate;
}

.desktop-nav-pill {
  position: absolute;
  z-index: 0;
  top: 0.28rem;
  bottom: 0.28rem;
  left: 0;
  width: var(--nav-pill-width, 0px);
  pointer-events: none;
  opacity: var(--nav-pill-opacity, 0);
  border: 1px solid rgba(205, 223, 255, 0.2);
  border-top-color: rgba(230, 241, 255, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(126, 166, 238, 0.055)),
    rgba(11, 20, 43, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(111, 153, 233, 0.08),
    0 0.5rem 1.8rem rgba(0, 0, 0, 0.14),
    0 0 1.6rem rgba(83, 153, 255, 0.055);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
  transform: translate3d(var(--nav-pill-x, 0px), 0, 0);
  transition:
    width 680ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease;
  will-change: width, transform;
}

.desktop-nav-pill::after {
  position: absolute;
  inset: 1px 18% auto;
  height: 1px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  opacity: 0.46;
}

.desktop-nav a {
  z-index: 1;
  padding: 0.62rem 0.88rem;
  color: #9faac5;
  border-radius: 999px;
  transition: color 420ms ease, text-shadow 520ms ease;
}

.desktop-nav a::after {
  display: none;
}

.desktop-nav a.is-active {
  color: #f6f8ff;
  text-shadow: 0 0 1.15rem rgba(126, 187, 255, 0.16);
}

.mobile-menu nav a.is-active {
  color: #f8fbff;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.075), rgba(105, 148, 231, 0.035)),
    rgba(12, 20, 42, 0.22);
  box-shadow: inset 0 0 0 1px rgba(195, 217, 255, 0.1);
}

.mobile-menu nav a.is-active span {
  color: var(--gold-bright);
}

/* A hero főcím két sora levegősebben, de továbbra is egy egységként áll. */
.hero-title {
  line-height: 1.02;
}

.title-line + .title-line {
  margin-top: 0.055em;
}

/* Desktopon a hero külön, teljes képernyős nyitány; a kártyák már a
   Rólunk anchorhoz tartozó második vizuális fejezetben kezdődnek. */
@media (min-width: 961px) {
  .hero,
  .hero-grid {
    min-height: 166svh;
  }

  .hero-grid {
    display: block;
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 5vh, 4.5rem);
  }

  .hero-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 100svh;
    padding-top: clamp(6.5rem, 10vh, 8.5rem);
    padding-bottom: clamp(5rem, 9vh, 7.5rem);
  }

  .hero-stage {
    min-height: clamp(30rem, 58svh, 43rem);
    margin-top: clamp(4.5rem, 9vh, 7.5rem);
    scroll-margin-top: 6.25rem;
  }
}

/* A kapcsolati blokk finomabb arányokkal és prémiumabb szerkesztéssel működik. */
.contact-layout {
  grid-template-columns: minmax(0, 0.84fr) minmax(30rem, 1fr);
  gap: clamp(3rem, 5vw, 5rem);
}

.contact-copy {
  min-width: 0;
  max-width: 100%;
}

.contact-copy h2.contact-statement {
  width: 100%;
  max-width: 36rem;
  font-size: clamp(2.7rem, 3.35vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.06em;
}

.contact-statement-line {
  width: 100%;
}

@media (max-width: 1180px) and (min-width: 961px) {
  .contact-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(28rem, 1fr);
    gap: 3rem;
  }

  .contact-copy h2.contact-statement {
    font-size: clamp(2.55rem, 3.8vw, 3.3rem);
  }
}

@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-copy {
    padding-top: 1rem;
  }

  .contact-copy h2.contact-statement {
    max-width: 45rem;
  }
}

@media (max-width: 720px) {
  .hero-title {
    line-height: 1.01;
  }

  .title-line + .title-line {
    margin-top: 0.08em;
  }

  .contact-copy h2.contact-statement {
    width: 100%;
    font-size: clamp(2.05rem, 9vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav-pill {
    transition-duration: 0.001ms;
  }
}

/* --------------------------------------------------------------------------
   16. V4.6.1 HERO ÉS RÓLUNK-SZÍNPAD FINOMHANGOLÁS
   --------------------------------------------------------------------------
   A canvas-háttérhez és a többi szekcióhoz nem nyúl. A hero fölötti kompakt
   logót, a Rólunk-kártyák scroll-linked belépését és az elv-számozást kezeli.
   -------------------------------------------------------------------------- */

/* Kompakt, középre helyezett márkajel a hero címe felett. */
.hero-intro-logo {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto clamp(1rem, 2vh, 1.35rem);
}

.hero-intro-logo-glass {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(5.15rem, 5.8vw, 6.4rem);
  padding: 0.52rem 0.68rem;
  overflow: hidden;
  border: 1px solid rgba(205, 222, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.25);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 18% -18%, rgba(255, 255, 255, 0.095), transparent 46%),
    linear-gradient(145deg, rgba(14, 20, 34, 0.78), rgba(2, 6, 15, 0.62));
  box-shadow:
    0 0.8rem 2.8rem rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1px 0 rgba(214, 182, 111, 0.055);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  opacity: 0;
  transform: translate3d(0, 0.65rem, 0) scale(0.965);
  transition:
    opacity 900ms ease 120ms,
    transform 1150ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.hero-intro-logo-glass::after {
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -55%;
  width: 24%;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.17), rgba(224, 190, 105, 0.07), transparent);
  filter: blur(0.28rem);
  transform: skewX(-17deg);
  animation: heroIntroLogoSweep 8.6s cubic-bezier(0.16, 1, 0.3, 1) 1.6s infinite;
}

.hero-intro-logo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.35rem 0.65rem rgba(0, 0, 0, 0.2));
}

body.is-ready .hero-intro-logo-glass {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@keyframes heroIntroLogoSweep {
  0%, 58% { left: -55%; opacity: 0; }
  64% { opacity: 0.62; }
  80% { left: 132%; opacity: 0.12; }
  81%, 100% { left: 132%; opacity: 0; }
}

/* A középső logókártya enyhén magasabb vizuális pozíciót kap. */
.hero-core {
  top: clamp(3.2rem, 7.5%, 5.25rem);
  bottom: auto;
}

/* A színpad elemei csak akkor kapják meg a rejtett kezdőállapotot, amikor a
   vezérlő JS már aktív; így JS nélkül is teljesen olvasható marad az oldal. */
body.hero-stage-motion-ready [data-stage-logo] {
  opacity: var(--stage-logo-opacity, 0);
  filter: blur(var(--stage-logo-blur, 0.8rem));
  translate: 0 var(--stage-logo-y, 2.4rem);
  scale: var(--stage-logo-scale, 0.955);
  will-change: opacity, filter, translate, scale;
}

body.hero-stage-motion-ready [data-stage-card] {
  opacity: var(--stage-card-opacity, 0);
  filter: blur(var(--stage-card-blur, 0.8rem));
  translate: var(--stage-card-x, 0) var(--stage-card-y, 2.8rem);
  scale: var(--stage-card-scale, 0.965);
  clip-path: inset(var(--stage-card-clip, 12%) 0 0 round 1.05rem);
  will-change: opacity, filter, translate, scale, clip-path;
}

body.hero-stage-motion-ready [data-stage-card="left"] {
  --stage-card-x: var(--stage-left-x, -1.4rem);
  --stage-card-y: var(--stage-left-y, 2.8rem);
  --stage-card-opacity: var(--stage-left-opacity, 0);
  --stage-card-blur: var(--stage-left-blur, 0.8rem);
  --stage-card-scale: var(--stage-left-scale, 0.965);
  --stage-card-clip: var(--stage-left-clip, 12%);
}

body.hero-stage-motion-ready [data-stage-card="right"] {
  --stage-card-x: var(--stage-right-x, 1.4rem);
  --stage-card-y: var(--stage-right-y, 2.8rem);
  --stage-card-opacity: var(--stage-right-opacity, 0);
  --stage-card-blur: var(--stage-right-blur, 0.8rem);
  --stage-card-scale: var(--stage-right-scale, 0.965);
  --stage-card-clip: var(--stage-right-clip, 12%);
}

/* Nagyobb, karakteresebb Poppins Bold számozás a működési elveknél. */
.principle > span {
  padding-top: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.35rem, 1.75vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
}

@media (min-width: 961px) {
  /* A márkajel miatt a nyitóblokk csak finoman mozdul lefelé; a teljes
     képernyős desktop-fejezet magassága és a következő szekció kezdete nem változik. */
  .hero-copy {
    transform: translate3d(0, calc(var(--hero-copy-y, 0px) + 0.35rem), 0);
  }
}

@media (max-width: 960px) {
  .hero-intro-logo {
    margin-bottom: 0.9rem;
  }

  .hero-intro-logo-glass {
    width: 5rem;
    padding: 0.45rem 0.58rem;
    border-radius: 0.9rem;
  }

  .hero-core {
    top: 8%;
    bottom: auto;
  }
}

@media (max-width: 720px) {
  .hero-stage {
    min-height: 31rem;
  }

  .hero-card {
    top: 43%;
  }

  .hero-intro-logo-glass {
    width: 4.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.82rem;
  }

  .hero-core {
    top: 9%;
    bottom: auto;
    width: 11rem;
  }

  body.hero-stage-motion-ready [data-stage-card] {
    clip-path: inset(var(--stage-card-clip, 14%) 0 0 round 0.8rem);
  }

  .principle > span {
    font-size: 1.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro-logo-glass,
  body.hero-stage-motion-ready [data-stage-logo],
  body.hero-stage-motion-ready [data-stage-card] {
    opacity: 1;
    filter: none;
    translate: 0 0;
    scale: 1;
    clip-path: inset(0 0 0 round 1rem);
    transition: none;
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   17. V4.7 HERO PHOTO — kizárólag a nyitó viewport
   --------------------------------------------------------------------------
   A Rólunk-színpadot és az oldal további részeit érintetlenül hagyja.
   A fotó mozgása szándékosan mikroszkopikus: lassú 1–2%-os drift + nagyon
   halk ambient fény. Így a hero élőnek hat, de a motion nem versenyez a CTA-val.
   -------------------------------------------------------------------------- */

.hero-media {
  position: absolute;
  z-index: -3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  background: #050914;
}

.hero-media__image {
  position: absolute;
  inset: -2.5%;
  background-image: url("../assets/hero-dashboard.jpg");
  background-image: image-set(
    url("../assets/hero-dashboard.webp") type("image/webp") 1x,
    url("../assets/hero-dashboard.jpg") type("image/jpeg") 1x
  );
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  filter: saturate(0.92) contrast(1.05) brightness(0.74);
  transform: scale(1.025) translate3d(0, 0, 0);
  transform-origin: 46% 52%;
  will-change: transform;
  animation: heroPhotoDrift 14s cubic-bezier(0.42, 0.04, 0.22, 1) infinite alternate;
}

/* Kontraszt-réteg: a fotó megmarad fotónak, de a headline minden képméreten
   stabilan olvasható. Alul a sötétítés a következő vizuális fejezetbe olvad. */
.hero-media::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 35%, rgba(7, 13, 30, 0.08) 0%, rgba(4, 8, 20, 0.32) 58%, rgba(3, 7, 17, 0.58) 100%),
    linear-gradient(180deg, rgba(2, 5, 14, 0.28) 0%, rgba(2, 5, 14, 0.35) 52%, rgba(2, 5, 14, 0.90) 100%);
}

/* Alig érzékelhető, lassú „monitor glow”. Nem scanline és nem effekt-show:
   csak 2–4% fényerő-változás, ami prémium digitális érzetet ad. */
.hero-media__ambient {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 1%;
  width: 66%;
  height: 72%;
  opacity: 0.34;
  background:
    radial-gradient(ellipse at 42% 48%, rgba(70, 111, 255, 0.28) 0%, rgba(72, 42, 255, 0.13) 34%, transparent 68%),
    radial-gradient(ellipse at 62% 28%, rgba(151, 73, 255, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 68%, rgba(72, 198, 255, 0.14) 0%, transparent 54%);
  filter: blur(2.2rem);
  mix-blend-mode: screen;
  transform: translate3d(-2.4%, 0.9%, 0) scale(1.01);
  will-change: transform, opacity;
  animation: heroAmbientDrift 11s cubic-bezier(0.39, 0.06, 0.19, 1) infinite alternate;
}

.hero-media__sheen {
  position: absolute;
  z-index: 1;
  inset: -8% -18%;
  opacity: 0.30;
  background:
    linear-gradient(114deg,
      transparent 8%,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(158, 200, 255, 0.18) 44%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(170, 132, 255, 0.15) 56%,
      transparent 68%);
  filter: blur(1.35rem);
  mix-blend-mode: screen;
  transform: translate3d(-16%, 4%, 0) rotate(-8deg) scale(1.1);
  will-change: transform, opacity;
  animation: heroSheenSweep 8.8s cubic-bezier(0.42, 0.06, 0.16, 1) infinite;
}

/* Finom vignette a széleken: a kép fókusza középen marad, a navbar és a CTA
   vizuálisan nyugodtabb környezetet kap. */
.hero-media::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 8rem rgba(0, 0, 0, 0.22);
  background: linear-gradient(90deg, rgba(2, 5, 14, 0.22), transparent 24%, transparent 76%, rgba(2, 5, 14, 0.16));
}

@keyframes heroPhotoDrift {
  0% {
    transform: scale(1.05) translate3d(-1.6%, 0.8%, 0);
  }
  50% {
    transform: scale(1.085) translate3d(0.35%, -0.25%, 0);
  }
  100% {
    transform: scale(1.11) translate3d(1.8%, -1.05%, 0);
  }
}

@keyframes heroAmbientDrift {
  0% {
    opacity: 0.24;
    transform: translate3d(-2.4%, 0.9%, 0) scale(1.01);
  }
  50% {
    opacity: 0.35;
    transform: translate3d(0.8%, -0.25%, 0) scale(1.05);
  }
  100% {
    opacity: 0.44;
    transform: translate3d(2.8%, -1.1%, 0) scale(1.09);
  }
}

/* A meglévő dekor-vonalak a fotó fölött túl technikainak hatnának a nyitó
   képernyőn, ezért az első viewportban a fotó kapja a főszerepet. A hero után
   a jelenlegi vizuális rendszer változatlan marad. */
.hero::before {
  z-index: -1;
}

@media (max-width: 960px) {
  .hero-media__image {
    inset: -3%;
    background-position: 47% 50%;
    filter: saturate(0.9) contrast(1.03) brightness(0.68);
  }

  .process-principles-media .section-photo-backdrop__image {
    background-position: 58% 30%;
    filter: saturate(0.98) contrast(1.04) brightness(0.28);
  }

  .process-principles-media .section-photo-backdrop__ambient {
    opacity: 0.36;
  }

  .faq-contact-media .section-photo-backdrop__image {
    background-position: 54% 40%;
    filter: saturate(0.98) contrast(1.04) brightness(0.33);
  }

  .process-media .section-photo-backdrop__image {
    background-position: 58% 34%;
    filter: saturate(0.98) contrast(1.04) brightness(0.30);
  }

  .principles-media .section-photo-backdrop__image {
    background-position: 58% 28%;
    filter: saturate(0.98) contrast(1.04) brightness(0.26);
  }

  .work-media__image {
    background-position: 52% 36%;
    filter: saturate(0.94) contrast(1.04) brightness(0.40);
  }

  .work-media__ambient {
    opacity: 0.38;
  }

  .hero-media::before {
    background:
      radial-gradient(circle at 50% 34%, rgba(5, 10, 24, 0.10) 0%, rgba(3, 7, 18, 0.38) 60%, rgba(2, 5, 14, 0.64) 100%),
      linear-gradient(180deg, rgba(2, 5, 14, 0.30) 0%, rgba(2, 5, 14, 0.40) 52%, rgba(2, 5, 14, 0.92) 100%);
  }

  .hero-media__ambient {
    left: -10%;
    width: 88%;
  }

  .hero-media__sheen {
    inset: -12% -28%;
    opacity: 0.22;
  }
}

@media (max-width: 640px) {
  .hero-media__image {
    background-position: 42% 50%;
    filter: saturate(0.82) contrast(1.03) brightness(0.60);
  }

  .process-principles-media .section-photo-backdrop__image {
    background-position: 62% 26%;
    filter: saturate(0.94) contrast(1.03) brightness(0.24);
  }

  .process-principles-media .section-photo-backdrop__ambient {
    opacity: 0.32;
  }

  .faq-contact-media .section-photo-backdrop__image {
    background-position: 57% 38%;
    filter: saturate(0.94) contrast(1.03) brightness(0.28);
  }

  .faq-contact-media .section-photo-backdrop__ambient {
    filter: blur(1.8rem);
    opacity: 0.34;
  }

  .faq-contact-media .section-photo-backdrop__sheen {
    opacity: 0.14;
  }

  .process-media .section-photo-backdrop__image {
    background-position: 63% 32%;
    filter: saturate(0.94) contrast(1.03) brightness(0.26);
  }

  .principles-media .section-photo-backdrop__image {
    background-position: 62% 26%;
    filter: saturate(0.94) contrast(1.03) brightness(0.22);
  }

  .process-media .section-photo-backdrop__ambient,
  .principles-media .section-photo-backdrop__ambient {
    filter: blur(1.8rem);
  }

  .process-media .section-photo-backdrop__sheen,
  .principles-media .section-photo-backdrop__sheen {
    opacity: 0.14;
  }

  .work-media__image {
    background-position: 58% 34%;
    filter: saturate(0.90) contrast(1.03) brightness(0.34);
  }

  .work-media__ambient {
    opacity: 0.34;
    filter: blur(1.7rem);
  }

  .work-media__sheen {
    opacity: 0.16;
  }

  .hero-stage-media {
    inset: 5% 0.5rem 0.3rem;
    border-radius: 1.35rem 1.35rem 0.9rem 0.9rem;
  }

  .hero-stage-media__image {
    background-position: 58% 48%;
    filter: saturate(1.02) contrast(1.04) brightness(0.38);
  }

  .hero-stage-media__ambient {
    opacity: 0.46;
    filter: blur(1.65rem);
  }

  .hero-stage-media__sheen {
    opacity: 0.20;
  }

  .hero-media::after {
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.20);
    background: linear-gradient(90deg, rgba(2, 5, 14, 0.16), transparent 22%, transparent 78%, rgba(2, 5, 14, 0.12));
  }

  .hero-media__sheen {
    opacity: 0.18;
  }
}

@keyframes faqContactPhotoDrift {
  0% {
    transform: scale(1.07) translate3d(-1.0%, 0.8%, 0);
  }
  50% {
    transform: scale(1.10) translate3d(0.2%, -0.18%, 0);
  }
  100% {
    transform: scale(1.13) translate3d(1.2%, -0.95%, 0);
  }
}

@keyframes faqContactAmbientDrift {
  0% {
    opacity: 0.35;
    transform: translate3d(-1.5%, 0.6%, 0) scale(1.03);
  }
  50% {
    opacity: 0.45;
    transform: translate3d(0.55%, -0.12%, 0) scale(1.07);
  }
  100% {
    opacity: 0.56;
    transform: translate3d(2.0%, -0.95%, 0) scale(1.10);
  }
}

@keyframes faqContactSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  18% {
    opacity: 0.10;
  }
  48% {
    opacity: 0.22;
    transform: translate3d(0%, 0.8%, 0) rotate(-5deg) scale(1.11);
  }
  82% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -4%, 0) rotate(-3deg) scale(1.13);
  }
}

@keyframes contactPhotoDrift {
  0% {
    transform: scale(1.07) translate3d(-1.0%, 0.8%, 0);
  }
  50% {
    transform: scale(1.10) translate3d(0.25%, -0.15%, 0);
  }
  100% {
    transform: scale(1.13) translate3d(1.15%, -0.95%, 0);
  }
}

@keyframes contactAmbientDrift {
  0% {
    opacity: 0.34;
    transform: translate3d(-1.5%, 0.6%, 0) scale(1.03);
  }
  50% {
    opacity: 0.44;
    transform: translate3d(0.55%, -0.12%, 0) scale(1.07);
  }
  100% {
    opacity: 0.56;
    transform: translate3d(2.0%, -0.95%, 0) scale(1.10);
  }
}

@keyframes contactSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  18% {
    opacity: 0.10;
  }
  48% {
    opacity: 0.22;
    transform: translate3d(0%, 0.8%, 0) rotate(-5deg) scale(1.11);
  }
  82% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -4%, 0) rotate(-3deg) scale(1.13);
  }
}

@keyframes processPrinciplesPhotoDrift {
  0% {
    transform: scale(1.08) translate3d(-1.25%, 0.9%, 0);
  }
  50% {
    transform: scale(1.11) translate3d(0.25%, -0.2%, 0);
  }
  100% {
    transform: scale(1.14) translate3d(1.35%, -1.0%, 0);
  }
}

@keyframes processPrinciplesAmbientDrift {
  0% {
    opacity: 0.33;
    transform: translate3d(-1.8%, 0.7%, 0) scale(1.03);
  }
  50% {
    opacity: 0.43;
    transform: translate3d(0.55%, -0.18%, 0) scale(1.07);
  }
  100% {
    opacity: 0.54;
    transform: translate3d(2.25%, -1.0%, 0) scale(1.11);
  }
}

@keyframes processPrinciplesSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  18% {
    opacity: 0.12;
  }
  48% {
    opacity: 0.24;
    transform: translate3d(0%, 0.8%, 0) rotate(-5deg) scale(1.11);
  }
  82% {
    opacity: 0.14;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -4%, 0) rotate(-3deg) scale(1.13);
  }
}

@keyframes processPhotoDrift {
  0% {
    transform: scale(1.06) translate3d(-1.2%, 0.8%, 0);
  }
  50% {
    transform: scale(1.09) translate3d(0.25%, -0.18%, 0);
  }
  100% {
    transform: scale(1.12) translate3d(1.15%, -0.9%, 0);
  }
}

@keyframes processAmbientDrift {
  0% {
    opacity: 0.30;
    transform: translate3d(-1.6%, 0.6%, 0) scale(1.02);
  }
  50% {
    opacity: 0.40;
    transform: translate3d(0.55%, -0.15%, 0) scale(1.06);
  }
  100% {
    opacity: 0.50;
    transform: translate3d(2.1%, -0.95%, 0) scale(1.10);
  }
}

@keyframes processSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  18% {
    opacity: 0.10;
  }
  48% {
    opacity: 0.22;
    transform: translate3d(0%, 0.8%, 0) rotate(-5deg) scale(1.11);
  }
  82% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -4%, 0) rotate(-3deg) scale(1.13);
  }
}

@keyframes principlesPhotoDrift {
  0% {
    transform: scale(1.08) translate3d(-1.3%, 0.9%, 0);
  }
  50% {
    transform: scale(1.11) translate3d(0.2%, -0.2%, 0);
  }
  100% {
    transform: scale(1.14) translate3d(1.35%, -1.0%, 0);
  }
}

@keyframes principlesAmbientDrift {
  0% {
    opacity: 0.34;
    transform: translate3d(-1.8%, 0.7%, 0) scale(1.03);
  }
  50% {
    opacity: 0.44;
    transform: translate3d(0.55%, -0.18%, 0) scale(1.07);
  }
  100% {
    opacity: 0.56;
    transform: translate3d(2.25%, -1.0%, 0) scale(1.11);
  }
}

@keyframes principlesSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  18% {
    opacity: 0.12;
  }
  48% {
    opacity: 0.24;
    transform: translate3d(0%, 0.8%, 0) rotate(-5deg) scale(1.11);
  }
  82% {
    opacity: 0.14;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -4%, 0) rotate(-3deg) scale(1.13);
  }
}

@keyframes workPhotoDrift {
  0% {
    transform: scale(1.06) translate3d(-1.1%, 0.9%, 0);
  }
  50% {
    transform: scale(1.09) translate3d(0.2%, -0.2%, 0);
  }
  100% {
    transform: scale(1.12) translate3d(1.2%, -0.95%, 0);
  }
}

@keyframes workAmbientDrift {
  0% {
    opacity: 0.34;
    transform: translate3d(-1.8%, 0.8%, 0) scale(1.02);
  }
  50% {
    opacity: 0.46;
    transform: translate3d(0.5%, -0.15%, 0) scale(1.05);
  }
  100% {
    opacity: 0.58;
    transform: translate3d(2.2%, -1%, 0) scale(1.1);
  }
}

@keyframes workSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  18% {
    opacity: 0.12;
  }
  48% {
    opacity: 0.24;
    transform: translate3d(0%, 0.8%, 0) rotate(-5deg) scale(1.11);
  }
  82% {
    opacity: 0.14;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -4%, 0) rotate(-3deg) scale(1.13);
  }
}

@keyframes heroStagePhotoDrift {
  0% {
    transform: scale(1.06) translate3d(-1.25%, 0.7%, 0);
  }
  50% {
    transform: scale(1.09) translate3d(0.3%, -0.2%, 0);
  }
  100% {
    transform: scale(1.12) translate3d(1.25%, -0.85%, 0);
  }
}

@keyframes heroStageAmbientDrift {
  0% {
    opacity: 0.42;
    transform: translate3d(-1.5%, 0.6%, 0) scale(1.02);
  }
  50% {
    opacity: 0.56;
    transform: translate3d(0.6%, -0.15%, 0) scale(1.06);
  }
  100% {
    opacity: 0.66;
    transform: translate3d(2%, -0.9%, 0) scale(1.1);
  }
}

@keyframes heroStageSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  18% {
    opacity: 0.16;
  }
  48% {
    opacity: 0.32;
    transform: translate3d(0%, 0.8%, 0) rotate(-5deg) scale(1.11);
  }
  82% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -4%, 0) rotate(-3deg) scale(1.13);
  }
}

@keyframes heroSheenSweep {
  0% {
    opacity: 0;
    transform: translate3d(-18%, 5%, 0) rotate(-8deg) scale(1.08);
  }
  14% {
    opacity: 0.18;
  }
  45% {
    opacity: 0.34;
    transform: translate3d(-1%, 1%, 0) rotate(-6deg) scale(1.12);
  }
  78% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    transform: translate3d(18%, -4%, 0) rotate(-3deg) scale(1.14);
  }
}

@keyframes heroTitleSweep {
  0%, 70% {
    background-position: -205% 0;
    opacity: 0;
  }
  74% {
    opacity: 0.16;
  }
  82% {
    opacity: 0.58;
  }
  92% {
    opacity: 0.28;
  }
  100% {
    background-position: 170% 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media__image,
  .hero-media__ambient,
  .hero-media__sheen,
  .hero-stage-media__image,
  .hero-stage-media__ambient,
  .hero-stage-media__sheen,
  .work-media__image,
  .work-media__ambient,
  .work-media__sheen,
  .section-photo-backdrop__image,
  .section-photo-backdrop__ambient,
  .section-photo-backdrop__sheen,
  .hero-title--sheen .title-line > span::after {
    animation: none;
    transform: none;
  }

  .hero-title--sheen .title-line > span::after {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   18. V5.4 PORTFOLIO CARDS — kompaktabb, premium glass megjelenes
   --------------------------------------------------------------------------
   Kizarolag a portfolio harom projektkartyajat finomitja. A portfolio hatter,
   a tobbi szekcio es a globalis motion rendszer valtozatlan marad.
   -------------------------------------------------------------------------- */

.work .case-grid {
  width: min(100%, 64rem);
  margin-inline: auto;
  gap: clamp(1.7rem, 3vw, 2.6rem) clamp(1.35rem, 2.4vw, 2rem);
}

.work .case-card--wide {
  width: min(100%, 58rem);
  justify-self: center;
}

.work .case-card > a[data-project-lightbox] {
  position: relative;
  display: block;
  padding: 0.55rem 0.55rem 0.8rem;
  overflow: hidden;
  border: 1px solid rgba(210, 225, 255, 0.15);
  border-radius: 1.55rem;
  background:
    linear-gradient(145deg, rgba(15, 24, 48, 0.62), rgba(5, 10, 24, 0.44)),
    rgba(7, 13, 30, 0.46);
  box-shadow:
    0 1.2rem 3.2rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
  translate: 0 0;
  transition:
    translate 600ms var(--ease-out),
    border-color 500ms ease,
    background 500ms ease,
    box-shadow 600ms var(--ease-out);
}

.work .case-card > a[data-project-lightbox]::before {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), rgba(232, 202, 139, 0.24), transparent);
  opacity: 0.48;
}

.work .case-card > a[data-project-lightbox]::after {
  position: absolute;
  z-index: 0;
  top: -45%;
  right: -18%;
  width: 44%;
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 195, 255, 0.10), transparent 67%);
  filter: blur(1.4rem);
  opacity: 0.58;
  transition: opacity 500ms ease, transform 800ms var(--ease-out);
}

.work .case-card:hover > a[data-project-lightbox],
.work .case-card > a[data-project-lightbox]:focus-visible {
  translate: 0 -0.4rem;
  border-color: rgba(223, 233, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(18, 29, 56, 0.70), rgba(6, 12, 27, 0.50)),
    rgba(7, 13, 30, 0.52);
  box-shadow:
    0 1.8rem 4.4rem rgba(0, 0, 0, 0.31),
    0 0 2.8rem rgba(90, 164, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 0 0 1px rgba(214, 182, 111, 0.035);
}

.work .case-card:hover > a[data-project-lightbox]::after,
.work .case-card > a[data-project-lightbox]:focus-visible::after {
  opacity: 0.82;
  transform: translate3d(-8%, 7%, 0) scale(1.08);
}

.work .case-visual {
  z-index: 1;
  aspect-ratio: 5 / 5.6;
  border-color: rgba(205, 222, 255, 0.13);
  border-radius: 1.08rem;
  box-shadow:
    0 0.8rem 2.2rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.work .case-card--wide .case-visual {
  aspect-ratio: 16 / 8.15;
}

.work .case-visual::after {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 34%, rgba(3, 7, 19, 0.26)),
    linear-gradient(180deg, transparent 58%, rgba(2, 5, 14, 0.16));
}

.work .case-visual img {
  transition: transform 1.25s var(--ease-out), filter 650ms ease;
}

.work .case-card:not(.case-card--featured):hover .case-visual img {
  transform: scale(1.022);
  filter: saturate(1.055) contrast(1.025) brightness(1.015);
}

.work .case-chip {
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.48rem 0.68rem;
  font-size: 0.53rem;
  font-weight: 520;
  letter-spacing: 0.115em;
  color: rgba(242, 246, 255, 0.92);
  border-color: rgba(235, 242, 255, 0.20);
  background: rgba(5, 10, 24, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
}

.work .case-cursor {
  width: 4.05rem;
  height: 4.05rem;
  color: rgba(247, 250, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(5, 11, 25, 0.66);
  box-shadow:
    0 0.9rem 2.4rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}

.work .case-info {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  padding: 1.1rem 0.65rem 0.35rem;
}

.work .case-info h3 {
  max-width: 27ch;
  font-size: clamp(1.05rem, 1.65vw, 1.42rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: rgba(248, 250, 255, 0.95);
}

.work .case-result {
  min-width: 6.5rem;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(197, 216, 255, 0.11);
}

.work .case-result strong {
  font-size: clamp(1.55rem, 2.25vw, 2.15rem);
  font-weight: 500;
  background: linear-gradient(105deg, #f6f8ff 0%, #b7dfff 52%, #e3c77f 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.work .case-result span {
  display: block;
  max-width: 8rem;
  margin-top: 0.28rem;
  font-size: 0.49rem;
  line-height: 1.45;
  color: rgba(182, 194, 219, 0.66);
}

@media (max-width: 960px) {
  .work .case-grid {
    width: min(100%, 50rem);
  }

  .work .case-card--wide {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .work .case-grid {
    width: min(100%, 34rem);
    gap: 1.5rem;
  }

  .work .case-card > a[data-project-lightbox] {
    padding: 0.45rem 0.45rem 0.7rem;
    border-radius: 1.3rem;
  }

  .work .case-visual,
  .work .case-card--wide .case-visual {
    aspect-ratio: 4 / 4.6;
    border-radius: 0.95rem;
  }

  .work .case-info {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 0.95rem 0.55rem 0.25rem;
  }

  .work .case-result {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    min-width: 0;
    padding-top: 0.75rem;
    padding-left: 0;
    text-align: left;
    border-top: 1px solid rgba(197, 216, 255, 0.10);
    border-left: 0;
  }

  .work .case-result span {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work .case-card > a[data-project-lightbox] {
    translate: 0 0 !important;
  }
}

/* --------------------------------------------------------------------------
   19. V5.5 PORTFOLIO ALIGNMENT + HEADING REFINEMENT
   --------------------------------------------------------------------------
   Csak a portfolio blokk kartyaszelesseget es a felette levo szoveges
   bevezeto layoutot finomitja. A hatterhez, motionhoz es mas szekciohoz nem nyul.
   -------------------------------------------------------------------------- */

/* A portfolio fejlec ugyanarra a 64rem-es tengelyre ul fel, mint a kartyak.
   Ettol a cim, a leiras es az alatta levo projektek egy kozos editorial gridet kapnak. */
.work .work-heading--balanced {
  width: min(100%, 64rem);
  max-width: none;
  margin-inline: auto;
  margin-bottom: clamp(3.4rem, 6vw, 5.6rem);
  padding-right: 0;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
  align-items: end;
  gap: clamp(2.6rem, 5vw, 5rem);
}

.work .work-heading--balanced h2 {
  max-width: 8ch;
  font-size: clamp(3.2rem, 6.3vw, 6.9rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.work .work-heading--balanced > p {
  position: relative;
  width: 100%;
  max-width: 25rem;
  margin: 0 0 0.45rem;
  padding-top: 1rem;
  justify-self: end;
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  line-height: 1.72;
  color: rgba(205, 215, 238, 0.82);
  border-top: 1px solid rgba(214, 228, 255, 0.18);
}

.work .work-heading--balanced > p::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 4.2rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(235, 244, 255, 0.72), rgba(214, 182, 111, 0.48), transparent);
}

/* A felso kartya pontosan a ket also kartya kozos kulso szelessegevel egyezik. */
.work .case-card--wide {
  width: 100%;
  justify-self: stretch;
}

@media (max-width: 960px) {
  .work .work-heading--balanced {
    width: min(100%, 50rem);
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .work .work-heading--balanced h2 {
    max-width: 9ch;
  }

  .work .work-heading--balanced > p {
    max-width: 34rem;
    justify-self: start;
    margin-bottom: 0;
  }
}

@media (max-width: 720px) {
  .work .work-heading--balanced {
    width: min(100%, 34rem);
    margin-bottom: 2.8rem;
    gap: 1.45rem;
  }

  .work .work-heading--balanced h2 {
    font-size: clamp(2.8rem, 13vw, 4.6rem);
  }

  .work .work-heading--balanced > p {
    max-width: 100%;
    padding-top: 0.85rem;
    font-size: 0.88rem;
    line-height: 1.68;
  }
}

/* --------------------------------------------------------------------------
   20. V6.1 LIGHT / DARK THEME TOGGLE
   --------------------------------------------------------------------------
   A két téma azonos layoutot, motiont és funkciókat használ. Kizárólag a
   felületi színek, kontrasztok és üveg-rétegek változnak.
   -------------------------------------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  justify-self: end;
  min-width: 0;
}

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  transition:
    color 320ms ease,
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease,
    transform 320ms var(--ease-out);
}

.theme-toggle:hover {
  color: var(--text);
  border-color: rgba(133, 221, 255, 0.55);
  background: rgba(111, 140, 255, 0.10);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 2px solid #84dcff;
  outline-offset: 4px;
}

.theme-toggle svg {
  width: 1.12rem;
  height: 1.12rem;
  overflow: visible;
  transition: transform 600ms var(--ease-out);
}

.theme-toggle circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
}

.theme-toggle path {
  fill: currentColor;
  stroke: none;
  opacity: 0.92;
}

html[data-theme="light"] .theme-toggle svg {
  transform: rotate(180deg);
}

@media (max-width: 960px) {
  .header-actions {
    gap: 0.55rem;
  }

  .theme-toggle,
  .menu-toggle {
    width: 2.65rem;
    height: 2.65rem;
  }
}

/* Modern, progresszíven javuló témaváltás. Nem támogatott böngészőben simán vált. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.001ms;
  }
}

/* -------------------------- RENDER OPTIMALIZÁLÁS ------------------------- */
.hero-media,
.hero-stage-media,
.work-media,
.section-photo-backdrop,
.faq-contact-block,
.process-principles-block {
  contain: paint;
}

/* ------------------------------ LIGHT THEME ------------------------------ */

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f7fb;
  --bg-deep: #e9eef6;
  --surface: rgba(255, 255, 255, 0.74);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --surface-soft: rgba(24, 40, 72, 0.045);
  --line: rgba(47, 67, 108, 0.13);
  --line-strong: rgba(47, 67, 108, 0.22);
  --text: #10182b;
  --text-soft: #44506a;
  --muted: #727e96;
  --accent: #536fe5;
  --accent-bright: #197fae;
  --accent-violet: #6679db;
  --gold: #9b762d;
  --gold-bright: #b38a36;
  --gold-soft: rgba(168, 124, 38, 0.13);
  --signal: #324260;
  --positive: #087655;
  --danger: #bc3f59;
  --shadow-soft: 0 24px 70px rgba(34, 51, 82, 0.13);
}

html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--bg);
}

html[data-theme="light"] ::selection {
  color: #0c1a2c;
  background: #bfeaff;
}

/* A procedurális háló ugyanaz marad, csak világos palettára fordul. */
html[data-theme="light"] #network-canvas {
  filter: invert(1) hue-rotate(180deg) saturate(0.72) brightness(1.08) contrast(0.9);
}

html[data-theme="light"] .background-veil {
  background:
    radial-gradient(circle at var(--scene-x) var(--scene-y), rgba(76, 139, 226, calc(var(--scene-opacity) * 0.65)), transparent 32rem),
    radial-gradient(circle at calc(100% - var(--scene-x)) calc(100% - var(--scene-y)), rgba(52, 166, 206, 0.052), transparent 29rem),
    linear-gradient(180deg, rgba(248, 251, 255, 0.02), rgba(232, 238, 248, 0.24));
}

html[data-theme="light"] .noise-layer {
  opacity: 0.018;
  mix-blend-mode: multiply;
}

/* Header / navigation */
html[data-theme="light"] .site-header.is-scrolled {
  background: rgba(248, 250, 254, 0.78);
  box-shadow: 0 0.6rem 2rem rgba(38, 53, 82, 0.07);
}

html[data-theme="light"] .brand-suffix {
  color: #647089;
  border-left-color: rgba(155, 118, 45, 0.42);
}

html[data-theme="light"] .brand-name {
  color: #111a2d;
}

html[data-theme="light"] .desktop-nav {
  border-color: rgba(54, 74, 115, 0.16);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0.8rem 2.2rem rgba(42, 57, 90, 0.07);
}

html[data-theme="light"] .desktop-nav a {
  color: #283650;
  text-shadow: none;
}

html[data-theme="light"] .desktop-nav a:hover {
  color: #0f182a;
}

html[data-theme="light"] .desktop-nav a.is-active {
  color: #0b1425;
  text-shadow: none;
}

html[data-theme="light"] .header-cta,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .menu-toggle {
  color: #26334d;
}

html[data-theme="light"] .menu-toggle span {
  background: #26334d;
}

html[data-theme="light"] .mobile-menu nav a {
  color: #35415a;
}

html[data-theme="light"] .mobile-menu nav a:hover,
html[data-theme="light"] .mobile-menu nav a.is-active {
  color: #0d1729;
}

html[data-theme="light"] .desktop-nav-pill {
  border-color: rgba(61, 82, 124, 0.15);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0.5rem 1.4rem rgba(45, 60, 92, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .header-cta,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .menu-toggle {
  border-color: rgba(54, 74, 115, 0.18);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 0.45rem 1.3rem rgba(35, 51, 82, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .header-cta:hover,
html[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(46, 143, 185, 0.34);
  background: rgba(230, 244, 252, 0.84);
}

html[data-theme="light"] .mobile-menu {
  background:
    radial-gradient(circle at 75% 10%, rgba(88, 134, 226, 0.16), transparent 36rem),
    rgba(246, 249, 253, 0.985);
}

/* Hero: ugyanaz a kép és ugyanaz a motion, világosabb gradinggel. */
html[data-theme="light"] .hero-media__image {
  filter: saturate(0.82) contrast(0.94) brightness(1.08);
}

html[data-theme="light"] .hero-media::before {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08) 0%, rgba(248, 250, 253, 0.34) 58%, rgba(238, 243, 249, 0.62) 100%),
    linear-gradient(180deg, rgba(248, 250, 253, 0.30) 0%, rgba(245, 248, 252, 0.36) 50%, rgba(236, 241, 248, 0.80) 100%);
}

html[data-theme="light"] .hero-media::after {
  box-shadow: inset 0 0 8rem rgba(65, 79, 105, 0.08);
  background: linear-gradient(90deg, rgba(239, 244, 250, 0.25), transparent 24%, transparent 76%, rgba(239, 244, 250, 0.20));
}

html[data-theme="light"] .hero-title {
  color: #121a2d;
  text-shadow: 0 0 1.4rem rgba(255, 255, 255, 0.18);
}

html[data-theme="light"] .title-line--accent > span {
  background: linear-gradient(104deg, #1d2c48 0%, #297fac 36%, #536fe5 67%, #9b762d 103%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .hero-title--sheen .title-line > span::after {
  filter: drop-shadow(0 0 0.55rem rgba(255, 255, 255, 0.42));
}

html[data-theme="light"] .hero-lede {
  color: #45536d;
}

html[data-theme="light"] .hero-stage-media {
  border-color: rgba(52, 75, 118, 0.15);
  background: #edf2f8;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 -4rem 6rem rgba(221, 229, 240, 0.30),
    0 1.8rem 4rem rgba(35, 50, 82, 0.12);
}

html[data-theme="light"] .hero-stage-media__image {
  filter: saturate(0.92) contrast(0.98) brightness(0.92);
}

html[data-theme="light"] .hero-stage-media::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.04) 0%, rgba(247, 249, 252, 0.14) 48%, rgba(233, 239, 247, 0.46) 100%),
    linear-gradient(180deg, rgba(245, 248, 252, 0.10) 0%, rgba(243, 246, 250, 0.16) 54%, rgba(229, 235, 244, 0.52) 100%);
}

html[data-theme="light"] .hero-card,
html[data-theme="light"] .metric-strip--glass .metric-card {
  border-color: rgba(61, 83, 126, 0.18);
  border-top-color: rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.74), transparent 35%),
    radial-gradient(circle at 100% 108%, rgba(188, 148, 65, 0.07), transparent 43%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(239, 244, 251, 0.62) 48%, rgba(225, 233, 244, 0.42));
  box-shadow:
    0 2rem 5.5rem rgba(35, 50, 82, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(77, 104, 157, 0.06);
}

html[data-theme="light"] .hero-card > p:not(.hero-card-index),
html[data-theme="light"] .hero-card li,
html[data-theme="light"] .metric-strip--glass .metric-copy small {
  color: #56637b;
}

html[data-theme="light"] .hero-card-index,
html[data-theme="light"] .hero-card h2 {
  color: #152039;
}

html[data-theme="light"] .hero-card li {
  border-color: rgba(61, 83, 126, 0.14);
  background: rgba(255, 255, 255, 0.46);
}

html[data-theme="light"] .metric-strip--glass .metric-number,
html[data-theme="light"] .metric-strip--glass .metric-copy p {
  color: #17213a;
}

html[data-theme="light"] .metric-strip--glass sup {
  color: #9b762d;
}

/* Positioning + services */
html[data-theme="light"] .positioning {
  background: linear-gradient(180deg, rgba(244, 248, 253, 0.42), rgba(234, 240, 248, 0.66));
}

html[data-theme="light"] .positioning-detail--single > p,
html[data-theme="light"] .positioning-detail > p,
html[data-theme="light"] .service-body > p,
html[data-theme="light"] .process-sticky > p:not(.section-kicker),
html[data-theme="light"] .process-step > div:last-child > p:not(:first-child),
html[data-theme="light"] .principle p,
html[data-theme="light"] .faq-item > div > p {
  color: #4a5771;
}

html[data-theme="light"] .statement em {
  -webkit-text-stroke-color: rgba(45, 116, 164, 0.82);
}

html[data-theme="light"] .services {
  background: rgba(238, 243, 249, 0.72);
}

html[data-theme="light"] .service-item::before {
  background: linear-gradient(90deg, rgba(77, 124, 255, 0.065), transparent 72%);
}

html[data-theme="light"] .service-symbol {
  color: #41516d;
  background: rgba(255, 255, 255, 0.48);
}

/* Portfolio photo remains identical; only the grading and glass cards change. */
html[data-theme="light"] .work-media__image {
  filter: saturate(0.88) contrast(0.96) brightness(0.88);
}

html[data-theme="light"] .work-media::before {
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.04) 0%, rgba(245, 248, 252, 0.18) 40%, rgba(231, 237, 245, 0.62) 100%),
    linear-gradient(180deg, rgba(244, 247, 251, 0.20) 0%, rgba(242, 246, 250, 0.28) 42%, rgba(228, 235, 244, 0.70) 100%);
}

html[data-theme="light"] .work .work-heading--balanced > p {
  color: #536078;
  border-top-color: rgba(54, 75, 117, 0.18);
}

html[data-theme="light"] .work .case-card > a[data-project-lightbox] {
  border-color: rgba(61, 83, 126, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(236, 242, 249, 0.62)),
    rgba(245, 248, 252, 0.64);
  box-shadow:
    0 1.2rem 3.2rem rgba(35, 50, 82, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(56, 77, 116, 0.015);
}

html[data-theme="light"] .work .case-info h3 {
  color: #17213a;
}

html[data-theme="light"] .work .case-result strong {
  background: linear-gradient(105deg, #1b2b47 0%, #327ca7 52%, #9b762d 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .work .case-result span {
  color: #65728a;
}

html[data-theme="light"] .work .case-chip,
html[data-theme="light"] .work .case-cursor {
  color: #f7f9ff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(8, 14, 29, 0.62);
}

/* Process / principles photo remains continuous with the same motion. */
html[data-theme="light"] .process-principles-media .section-photo-backdrop__image {
  filter: saturate(0.90) contrast(0.98) brightness(0.78);
}

html[data-theme="light"] .section-photo-backdrop::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.02) 0%, rgba(246, 249, 252, 0.12) 42%, rgba(226, 234, 244, 0.56) 100%),
    linear-gradient(180deg, rgba(245, 248, 252, 0.12) 0%, rgba(239, 244, 249, 0.22) 48%, rgba(225, 233, 243, 0.64) 100%);
}

html[data-theme="light"] .process,
html[data-theme="light"] .principles,
html[data-theme="light"] .faq,
html[data-theme="light"] .contact {
  background: rgba(245, 248, 252, 0.22);
}

html[data-theme="light"] .step-marker span {
  color: #536078;
  border-color: rgba(61, 83, 126, 0.20);
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .process-step.is-passed .step-marker span {
  color: #102239;
}

html[data-theme="light"] .process-step.is-current h3 {
  color: #1b253a;
}

html[data-theme="light"] .process-step.is-current > div:last-child > p:first-child,
html[data-theme="light"] .process-step.is-current .step-output {
  color: #8b6928;
}

html[data-theme="light"] .principle--flip.is-visible:hover {
  background: linear-gradient(90deg, rgba(69, 147, 255, 0.04), rgba(201, 153, 52, 0.045));
}

/* FAQ + Contact shared image and glass UI. */
html[data-theme="light"] .faq-contact-media .section-photo-backdrop__image {
  filter: saturate(0.92) contrast(0.98) brightness(0.84);
}

html[data-theme="light"] .faq-list,
html[data-theme="light"] .contact-form {
  border-color: rgba(60, 81, 121, 0.16);
  background: rgba(252, 253, 255, 0.68);
  box-shadow:
    0 24px 70px rgba(36, 51, 81, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .faq-item,
html[data-theme="light"] .faq-list,
html[data-theme="light"] .principle-list,
html[data-theme="light"] .principle {
  border-color: rgba(59, 79, 119, 0.16);
}

html[data-theme="light"] .contact-copy::before {
  color: #5e6b84;
}

html[data-theme="light"] .contact-copy::after {
  background: linear-gradient(90deg, rgba(44, 141, 182, 0.74), rgba(44, 141, 182, 0));
}

html[data-theme="light"] .contact-copy > p:not(.section-kicker) {
  color: #4e5b74;
}

html[data-theme="light"] .contact-email {
  color: #1a263f;
  border-color: rgba(60, 81, 121, 0.18);
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    0 0.6rem 1.8rem rgba(35, 50, 82, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .contact-form label > span,
html[data-theme="light"] .contact-form legend {
  color: #57647c;
}

html[data-theme="light"] .contact-form input[type="text"],
html[data-theme="light"] .contact-form input[type="email"],
html[data-theme="light"] .contact-form textarea,
html[data-theme="light"] .contact-form fieldset {
  color: #19233b;
  border-color: rgba(60, 81, 121, 0.15);
  background: rgba(248, 251, 254, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder {
  color: #8a94a7;
}

html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form textarea:focus {
  border-color: rgba(43, 144, 185, 0.52);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 0.2rem rgba(72, 171, 210, 0.10);
}

html[data-theme="light"] .interest-grid span {
  color: #526077 !important;
  border-color: rgba(60, 81, 121, 0.14);
  background: rgba(255, 255, 255, 0.62);
}

html[data-theme="light"] .interest-grid input:checked + span {
  color: #102239 !important;
  border-color: #8fd9f2;
  background: #bfeafa;
}

html[data-theme="light"] .form-footer,
html[data-theme="light"] .metric-copy,
html[data-theme="light"] .work .case-result {
  border-color: rgba(60, 81, 121, 0.13);
}

html[data-theme="light"] .form-footer p {
  color: #78849a;
}

/* Footer */
html[data-theme="light"] .site-footer {
  color: #1b263f;
  background: #e7edf5;
}

html[data-theme="light"] .footer-grid > div:first-child > p,
html[data-theme="light"] .footer-column a,
html[data-theme="light"] .footer-column p,
html[data-theme="light"] .footer-bottom {
  color: #5d6980;
}

html[data-theme="light"] .footer-column > span {
  color: #8994a7;
}

html[data-theme="light"] .footer-brand-logo {
  border-color: rgba(54, 74, 115, 0.16);
  background: rgba(15, 22, 39, 0.86);
  box-shadow: 0 0.8rem 2.2rem rgba(35, 50, 82, 0.10);
}

/* A fehér logóelemek light mode-ban is ugyanúgy láthatók: a logó saját
   sötét glass hordozón marad, nem cseréljük és nem színezzük át. */
html[data-theme="light"] .hero-intro-logo-glass,
html[data-theme="light"] .hero-logo-glass {
  border-color: rgba(205, 222, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.38);
  background:
    radial-gradient(circle at 18% -18%, rgba(255, 255, 255, 0.10), transparent 46%),
    linear-gradient(145deg, rgba(21, 28, 45, 0.88), rgba(8, 13, 25, 0.78));
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle svg {
    transition: none;
  }
}

html[data-theme="light"] .button--light {
  color: #f8fbff;
  background: linear-gradient(135deg, #1b2a45, #2b4968 72%, #8f6c2b 150%);
  box-shadow: 0 14px 38px rgba(29, 45, 72, 0.18);
}

html[data-theme="light"] .button--primary {
  color: #f8fbff;
}

html[data-theme="light"] .text-link {
  color: #26344f;
}

/* --------------------------------------------------------------------------
   21. V6.4 — CHROME / MOBILE PERFORMANCE PROFILE
   --------------------------------------------------------------------------
   Chrome/Blink alatt a legnagyobb scroll-költséget a mozgó backdrop-filter,
   filter: blur(), mix-blend-mode és a sok egyidejű rasterizált réteg adja.
   Ezeket vizuálisan nagyon közeli, de compositor-barátabb megoldásokra cseréli.
   Safari a teljes, eredeti effektkészletet kapja.
   -------------------------------------------------------------------------- */

/* Mobilon kisebb dekódolási/raster költségű háttérképek. */
@media (max-width: 900px) {
  .hero-media__image {
    background-image: url("../assets/hero-dashboard-mobile.webp");
  }

  .hero-stage.is-media-ready .hero-stage-media__image {
    background-image: url("../assets/hero-stage-bulb-mobile.webp");
  }

  .work.is-media-ready .work-media__image {
    background-image: url("../assets/work-bokeh-hand-mobile.webp");
  }

  .process-principles-block.is-media-ready .process-principles-media .section-photo-backdrop__image {
    background-image: url("../assets/process-principles-blue-light-mobile.webp");
  }

  .faq-contact-block.is-media-ready .faq-contact-media .section-photo-backdrop__image {
    background-image: url("../assets/contact-phone-neon-mobile.webp");
  }
}

/* A fix, blur-os UI rétegek Chrome-ban scroll közben drágák. */
html.perf-blink .site-header.is-scrolled,
html.perf-blink .desktop-nav,
html.perf-blink .desktop-nav-pill,
html.perf-blink .theme-toggle,
html.perf-blink .header-cta,
html.perf-blink .hero-card,
html.perf-blink .hero-float-label,
html.perf-blink .hero-logo-glass,
html.perf-blink .hero-intro-logo-glass,
html.perf-blink .capability-marquee,
html.perf-blink .metric-strip--glass .metric-card,
html.perf-blink .work .case-card > a[data-project-lightbox],
html.perf-blink .work .case-chip,
html.perf-blink .work .case-cursor,
html.perf-blink .faq-list,
html.perf-blink .contact-email,
html.perf-blink .contact-form,
html.perf-blink .project-lightbox-shell,
html.perf-blink .project-lightbox-controls,
html.perf-blink .project-lightbox::backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* A vizuális mélység megmarad, de nincs folyamatos háttér-rasterizálás. */
html.perf-blink .site-header.is-scrolled {
  background: rgba(4, 7, 19, 0.94);
}

html[data-theme="light"].perf-blink .site-header.is-scrolled {
  background: rgba(248, 250, 254, 0.96);
}

html.perf-blink .desktop-nav {
  background: rgba(8, 14, 31, 0.84);
}

html[data-theme="light"].perf-blink .desktop-nav {
  background: rgba(255, 255, 255, 0.94);
}

html.perf-blink .desktop-nav-pill {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(126, 166, 238, 0.07)),
    rgba(11, 20, 43, 0.88);
}

html[data-theme="light"].perf-blink .desktop-nav-pill {
  background: rgba(239, 244, 251, 0.98);
}

html.perf-blink .hero-card {
  background: linear-gradient(145deg, rgba(8, 14, 31, 0.88), rgba(8, 12, 28, 0.78));
}

html.perf-blink .hero-logo-glass,
html.perf-blink .hero-intro-logo-glass {
  background: linear-gradient(145deg, rgba(12, 20, 42, 0.9), rgba(7, 12, 28, 0.82));
}

html.perf-blink .metric-strip--glass .metric-card,
html.perf-blink .work .case-card > a[data-project-lightbox],
html.perf-blink .faq-list,
html.perf-blink .contact-form {
  background-color: rgba(5, 10, 24, 0.86);
}

html[data-theme="light"].perf-blink .metric-strip--glass .metric-card,
html[data-theme="light"].perf-blink .work .case-card > a[data-project-lightbox],
html[data-theme="light"].perf-blink .faq-list,
html[data-theme="light"].perf-blink .contact-form {
  background-color: rgba(250, 252, 255, 0.94);
}

/* Mozgó, óriási blur/mix-blend rétegek helyett tiszta gradient compositing. */
html.perf-blink .hero-media__ambient,
html.perf-blink .hero-media__sheen,
html.perf-blink .hero-stage-media__ambient,
html.perf-blink .hero-stage-media__sheen,
html.perf-blink .work-media__ambient,
html.perf-blink .work-media__sheen,
html.perf-blink .section-photo-backdrop__ambient,
html.perf-blink .section-photo-backdrop__sheen {
  filter: none !important;
  mix-blend-mode: normal !important;
}

html.perf-blink .hero-media__ambient,
html.perf-blink .hero-stage-media__ambient,
html.perf-blink .work-media__ambient,
html.perf-blink .section-photo-backdrop__ambient {
  opacity: 0.22;
}

html.perf-blink .hero-media__sheen,
html.perf-blink .hero-stage-media__sheen,
html.perf-blink .work-media__sheen,
html.perf-blink .section-photo-backdrop__sheen {
  opacity: 0.11;
}

/* A mozgó fotókon a CSS filter külön offscreen surface-et kényszerít ki. */
html.perf-blink .hero-media__image,
html.perf-blink .hero-stage-media__image,
html.perf-blink .work-media__image,
html.perf-blink .section-photo-backdrop__image {
  filter: none !important;
}

/* A meglévő stationary overlayek pótolják a filteres sötétítést. */
html.perf-blink .hero-media::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.46) 0%, rgba(3, 7, 18, 0.56) 52%, rgba(2, 5, 14, 0.78) 100%),
    radial-gradient(circle at 50% 46%, transparent 18%, rgba(2, 5, 14, 0.26) 68%, rgba(2, 5, 14, 0.52) 100%);
}

html.perf-blink .hero-stage-media::before,
html.perf-blink .work-media::before,
html.perf-blink .section-photo-backdrop::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(5, 10, 24, 0.12) 0%, rgba(3, 7, 18, 0.38) 44%, rgba(2, 5, 14, 0.84) 100%),
    linear-gradient(180deg, rgba(2, 5, 14, 0.30) 0%, rgba(2, 5, 14, 0.52) 48%, rgba(2, 5, 14, 0.88) 100%);
}

/* Chrome-ban a filter animálása különösen drága; opacity + transform marad. */
html.perf-blink .reveal,
html.perf-blink .reveal.is-visible,
html.perf-blink .process-step[data-process-step].reveal,
html.perf-blink .process-step[data-process-step].reveal.is-visible,
html.perf-blink .principle--flip.reveal,
html.perf-blink .principle--flip.reveal.is-visible,
html.perf-blink body.hero-stage-motion-ready [data-stage-logo],
html.perf-blink body.hero-stage-motion-ready [data-stage-card],
html.perf-blink .statement-line > span,
html.perf-blink .contact-statement-line > span {
  filter: none !important;
}

html.perf-blink .reveal,
html.perf-blink .process-step[data-process-step].reveal,
html.perf-blink .principle--flip.reveal {
  transition-property: opacity, transform, background-color, border-color !important;
}

html.perf-blink body.hero-stage-motion-ready [data-stage-card] {
  clip-path: none !important;
}

html.perf-blink .statement-line > span::after,
html.perf-blink .contact-statement-line > span::after {
  display: none !important;
}

/* Hosszú szekciók offscreen tartalmát Chrome ne fesse újra scroll közben. */
/* A nagy szakaszok teljes magassága maradjon stabil felgörgetéskor is. */

/* Scroll alatt a dekoratív fény-sweep ideiglenesen szünetel; a fő drift marad. */
html.perf-blink body.is-scrolling .hero-media__ambient,
html.perf-blink body.is-scrolling .hero-media__sheen,
html.perf-blink body.is-scrolling .hero-stage-media__ambient,
html.perf-blink body.is-scrolling .hero-stage-media__sheen,
html.perf-blink body.is-scrolling .work-media__ambient,
html.perf-blink body.is-scrolling .work-media__sheen,
html.perf-blink body.is-scrolling .section-photo-backdrop__ambient,
html.perf-blink body.is-scrolling .section-photo-backdrop__sheen,
html.perf-blink body.is-scrolling .hero-title--sheen .title-line > span::after {
  animation-play-state: paused !important;
}

/* Mobilon egyetlen fő háttér-drift marad aktív szekciónként. */
html.perf-mobile .hero-media__ambient,
html.perf-mobile .hero-media__sheen,
html.perf-mobile .hero-stage-media__ambient,
html.perf-mobile .hero-stage-media__sheen,
html.perf-mobile .work-media__ambient,
html.perf-mobile .work-media__sheen,
html.perf-mobile .section-photo-backdrop__ambient,
html.perf-mobile .section-photo-backdrop__sheen {
  animation: none !important;
  will-change: auto !important;
}

html.perf-mobile .hero-media__sheen,
html.perf-mobile .hero-stage-media__sheen,
html.perf-mobile .work-media__sheen,
html.perf-mobile .section-photo-backdrop__sheen {
  display: none;
}

html.perf-mobile .hero-media__ambient,
html.perf-mobile .hero-stage-media__ambient,
html.perf-mobile .work-media__ambient,
html.perf-mobile .section-photo-backdrop__ambient {
  transform: none !important;
  opacity: 0.18;
}

/* Mobilon a 3D flip helyett ugyanaz a reveal lapos, stabil compositor rétegen. */
html.perf-mobile .principle-list,
html.perf-mobile .principle--flip {
  perspective: none;
  transform-style: flat;
}

html.perf-mobile .principle--flip.reveal {
  transform: translate3d(0, 2.25rem, 0) scale(0.988);
}

html.perf-mobile .principle--flip.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Light theme: a menü mindig nagy kontrasztú legyen, fényes fotó fölött is. */
html[data-theme="light"] .desktop-nav a,
html[data-theme="light"] .desktop-nav a:visited {
  color: #1b2942 !important;
  opacity: 1;
}

html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .desktop-nav a.is-active,
html[data-theme="light"] .desktop-nav a[aria-current="page"] {
  color: #07111f !important;
}

html[data-theme="light"] .brand-name {
  color: #07111f !important;
}

html[data-theme="light"] .brand-suffix {
  color: #536079 !important;
}

html[data-theme="light"] .mobile-menu {
  background: rgba(246, 249, 253, 0.985);
}

html[data-theme="light"] .mobile-menu nav a,
html[data-theme="light"] .mobile-menu nav a:visited {
  color: #26344d !important;
}

html[data-theme="light"] .mobile-menu nav a.is-active,
html[data-theme="light"] .mobile-menu nav a:hover {
  color: #07111f !important;
}

/* A háló ténylegesen kerüljön ki a compositor tree-ből, ha nem látható. */
#network-canvas,
.background-veil {
  visibility: hidden;
}

body[data-scene="signal"] #network-canvas,
body[data-scene="signal"] .background-veil {
  visibility: visible;
}


/* Scroll-linked process vonal: transform, nem layoutot triggerelő height. */
html.perf-blink .process-steps::after,
html.perf-mobile .process-steps::after {
  height: 100%;
  transform: scaleY(var(--process-progress, 0));
  transform-origin: top;
  transition: box-shadow 700ms ease;
  will-change: transform;
}

/* Light theme + Chrome: ne szűrjük a teljes canvas bitmapet minden frame-ben. */
html[data-theme="light"].perf-blink #network-canvas {
  filter: none !important;
}

html[data-theme="light"].perf-blink .background-veil {
  background:
    radial-gradient(circle at var(--scene-x) var(--scene-y), rgba(76, 139, 226, 0.14), transparent 32rem),
    radial-gradient(circle at calc(100% - var(--scene-x)) calc(100% - var(--scene-y)), rgba(52, 166, 206, 0.06), transparent 29rem),
    linear-gradient(180deg, rgba(247, 250, 254, 0.90), rgba(235, 241, 249, 0.92));
}

/* A hero szöveg sheenje mobilon drága text-raster animáció; desktopon megmarad. */
html.perf-mobile .hero-title--sheen .title-line > span::after {
  display: none !important;
}

/* További hero raster-költségek levétele Blink alatt. */
html.perf-blink .hero-primary-cta::before,
html.perf-blink .hero-card::before,
html.perf-blink .hero-card::after,
html.perf-blink .hero-core::before,
html.perf-blink .hero-core::after,
html.perf-blink .hero-logo-glass::after,
html.perf-blink .hero-intro-logo-glass::after,
html.perf-blink .contact-glow {
  filter: none !important;
}

html.perf-blink .contact-glow {
  background: radial-gradient(circle, rgba(57, 207, 255, 0.14), rgba(57, 207, 255, 0.04) 42%, transparent 72%);
}

html.perf-blink body.is-scrolling .hero-logo-glass,
html.perf-blink body.is-scrolling .hero-logo-glass::after,
html.perf-blink body.is-scrolling .hero-core::before,
html.perf-blink body.is-scrolling .contact-glow {
  animation-play-state: paused !important;
}

html.perf-mobile .hero-logo-glass::after,
html.perf-mobile .hero-core::before,
html.perf-mobile .contact-glow {
  animation: none !important;
}

html.perf-mobile .hero-logo-glass,
html.perf-mobile .hero-intro-logo-glass {
  animation: none !important;
}

/* Light Chrome grading: ugyanaz a világos megjelenés filter-raster nélkül. */
html[data-theme="light"].perf-blink .hero-media::before {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.10) 0%, rgba(248, 250, 253, 0.40) 58%, rgba(238, 243, 249, 0.68) 100%),
    linear-gradient(180deg, rgba(248, 250, 253, 0.34) 0%, rgba(245, 248, 252, 0.42) 50%, rgba(236, 241, 248, 0.84) 100%);
}

html[data-theme="light"].perf-blink .hero-stage-media::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.06) 0%, rgba(247, 249, 252, 0.18) 48%, rgba(233, 239, 247, 0.52) 100%),
    linear-gradient(180deg, rgba(245, 248, 252, 0.14) 0%, rgba(243, 246, 250, 0.20) 54%, rgba(229, 235, 244, 0.58) 100%);
}

html[data-theme="light"].perf-blink .work-media::before {
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.06) 0%, rgba(245, 248, 252, 0.22) 40%, rgba(231, 237, 245, 0.68) 100%),
    linear-gradient(180deg, rgba(244, 247, 251, 0.24) 0%, rgba(242, 246, 250, 0.32) 42%, rgba(228, 235, 244, 0.74) 100%);
}

html[data-theme="light"].perf-blink .section-photo-backdrop::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.04) 0%, rgba(246, 249, 252, 0.16) 42%, rgba(226, 234, 244, 0.62) 100%),
    linear-gradient(180deg, rgba(245, 248, 252, 0.16) 0%, rgba(239, 244, 249, 0.26) 48%, rgba(225, 233, 243, 0.70) 100%);
}

html[data-theme="light"].perf-blink .hero-card,
html[data-theme="light"].perf-blink .hero-logo-glass,
html[data-theme="light"].perf-blink .hero-intro-logo-glass {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.86), transparent 35%),
    radial-gradient(circle at 100% 108%, rgba(188, 148, 65, 0.07), transparent 43%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 244, 251, 0.86) 48%, rgba(225, 233, 244, 0.78));
}

html[data-theme="light"].perf-blink .contact-email {
  background: rgba(255, 255, 255, 0.82);
  color: #1f2e48;
}

/* A fix, full-screen noise blend alig látható, Chrome-ban viszont drága scroll layer. */
html.perf-blink .noise-layer,
html.perf-mobile .noise-layer {
  display: none !important;
}

html.perf-blink .background-veil::after {
  mix-blend-mode: normal;
}

/* Chrome scroll-prioritás: görgetés közben minden nem kritikus végtelen dekoráció megáll. */
html.perf-blink body.is-scrolling .hero-media__image,
html.perf-blink body.is-scrolling .hero-stage-media__image,
html.perf-blink body.is-scrolling .work-media__image,
html.perf-blink body.is-scrolling .section-photo-backdrop__image,
html.perf-blink body.is-scrolling .hero-card,
html.perf-blink body.is-scrolling .hero-card-pulse,
html.perf-blink body.is-scrolling .hero-horizon span,
html.perf-blink body.is-scrolling .marquee-track,
html.perf-blink body.is-scrolling .hero-intro-logo-glass::after {
  animation-play-state: paused !important;
}

/* A hosszabb, jóváhagyott főcím mindkét sorát teljesen mutassa meg. */
.hero-title .title-line--accent > span {
  font-size: 0.62em;
}

@media (max-width: 960px) {
  .hero-title .title-line:first-child > span {
    font-size: 0.75em;
  }

  .hero-title .title-line--accent > span {
    font-size: 0.45em;
  }
}

@media (max-width: 720px) {
  .hero-title .title-line:first-child > span {
    font-size: clamp(0.52em, 9vw, 0.8em);
  }

  .hero-title .title-line--accent > span {
    font-size: clamp(0.3em, 5vw, 0.48em);
  }
}

/* Referenciák: szabadon lélegző, egymás alatt sorakozó képgalériák. */
.work .case-grid {
  display: flex;
  flex-direction: column;
  width: min(100%, 70rem);
  gap: clamp(4.5rem, 8vw, 8.5rem);
}

.work .case-card--featured,
.work .case-card--wide {
  width: 100%;
  grid-column: auto;
}

.work .case-card--featured > .case-project,
html[data-theme="light"] .work .case-card--featured > .case-project {
  display: block;
  padding: 0;
  color: var(--text);
  text-align: left;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  translate: 0 0;
}

.work .case-card--featured > .case-project::before,
.work .case-card--featured > .case-project::after {
  display: none;
}

.work .case-card--featured:hover > .case-project,
.work .case-card--featured > .case-project:focus-visible,
html[data-theme="light"] .work .case-card--featured:hover > .case-project {
  translate: 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.work .case-card--featured .case-visual,
.work .case-card--featured.case-card--wide .case-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.7;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.work .case-card--featured:nth-child(2) .case-visual {
  background: transparent;
}

.work .case-card--featured .case-visual::after {
  display: none;
}

.work .case-stack-trigger {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.work .case-stack-trigger:focus-visible {
  outline: 3px solid #9cd9ff;
  outline-offset: -6px;
  border-radius: inherit;
}

.work .case-gallery {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.work .case-gallery img {
  position: absolute;
  top: 48%;
  left: 50%;
  display: block;
  width: 37%;
  height: auto;
  max-height: 83%;
  object-fit: contain;
  border: 0;
  border-radius: clamp(0.5rem, 1vw, 0.9rem);
  background: transparent;
  box-shadow: 0 1.5rem 3.2rem rgba(0, 0, 0, 0.46);
  transition: transform 780ms var(--ease-out), filter 500ms ease, box-shadow 600ms ease;
  will-change: transform;
}

.work .case-gallery--fitt img:first-child {
  z-index: 3;
  width: 35%;
  transform: translate(-50%, -53%) rotate(-4deg);
}

.work .case-gallery--fitt img:nth-child(2) {
  z-index: 2;
  transform: translate(-33%, -40%) rotate(8deg);
}

.work .case-gallery--fitt img:nth-child(3) {
  z-index: 1;
  transform: translate(-68%, -28%) rotate(-9deg);
}

.work .case-gallery--coffee img {
  width: 38%;
  max-height: 76%;
}

.work .case-gallery--coffee img:first-child {
  z-index: 2;
  transform: translate(-56%, -51%) rotate(-6deg);
}

.work .case-gallery--coffee img:last-child {
  z-index: 1;
  transform: translate(-35%, -39%) rotate(8deg);
}

.work .case-card--featured.is-expanded .case-gallery--fitt img:first-child { transform: translate(-117%, -51%) rotate(-7deg); }
.work .case-card--featured.is-expanded .case-gallery--fitt img:nth-child(2) { transform: translate(-5%, -86%) rotate(5deg); }
.work .case-card--featured.is-expanded .case-gallery--fitt img:nth-child(3) { transform: translate(-2%, 0%) rotate(-5deg); }
.work .case-card--featured.is-expanded .case-gallery--coffee img:first-child { transform: translate(-112%, -52%) rotate(-7deg); }
.work .case-card--featured.is-expanded .case-gallery--coffee img:last-child { transform: translate(12%, -48%) rotate(7deg); }

.work .case-card--featured:hover .case-gallery img,
.work .case-card--featured:focus-within .case-gallery img {
  filter: none;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.47);
}

@media (hover: hover) and (min-width: 721px) {
  .work .case-card--featured:hover .case-gallery--fitt img:first-child,
  .work .case-card--featured:focus-within .case-gallery--fitt img:first-child {
    transform: translate(-117%, -51%) rotate(-7deg);
  }
  .work .case-card--featured:hover .case-gallery--fitt img:nth-child(2),
  .work .case-card--featured:focus-within .case-gallery--fitt img:nth-child(2) {
    transform: translate(-5%, -86%) rotate(5deg);
  }
  .work .case-card--featured:hover .case-gallery--fitt img:nth-child(3),
  .work .case-card--featured:focus-within .case-gallery--fitt img:nth-child(3) {
    transform: translate(-2%, 0%) rotate(-5deg);
  }
  .work .case-card--featured:hover .case-gallery--coffee img:first-child,
  .work .case-card--featured:focus-within .case-gallery--coffee img:first-child {
    transform: translate(-112%, -52%) rotate(-7deg);
  }
  .work .case-card--featured:hover .case-gallery--coffee img:last-child,
  .work .case-card--featured:focus-within .case-gallery--coffee img:last-child {
    transform: translate(12%, -48%) rotate(7deg);
  }
}

.work .case-visual-note {
  position: absolute;
  z-index: 5;
  right: clamp(1.2rem, 3vw, 2.6rem);
  bottom: clamp(1rem, 2.3vw, 2rem);
  left: clamp(1.2rem, 3vw, 2.6rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  text-shadow: 0 1px 0.7rem rgba(0, 0, 0, 0.86);
  pointer-events: none;
}

.work .case-discover {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: clamp(0.9rem, 1.4vw, 1.13rem);
  font-weight: 520;
  letter-spacing: -0.02em;
}

.work .case-discover svg {
  position: relative;
  z-index: 1;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.65rem;
  flex: none;
  border: 1px solid rgba(245, 249, 255, 0.63);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 1rem rgba(164, 211, 255, 0.24);
  animation: caseDiscoverBreath 2.7s ease-in-out infinite;
}

.work .case-discover::before,
.work .case-discover::after {
  position: absolute;
  top: 50%;
  left: 1.4rem;
  width: 2.8rem;
  height: 2.8rem;
  content: "";
  border: 1px solid rgba(196, 226, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: caseDiscoverRipple 2.7s ease-out infinite;
}

.work .case-discover::after { animation-delay: 0.75s; }

.work .case-card--featured:hover .case-discover svg,
.work .case-card--featured.is-expanded .case-discover svg {
  animation: caseDiscoverClick 480ms var(--ease-out) both;
}

@keyframes caseDiscoverBreath {
  50% { box-shadow: 0 0 1.6rem rgba(164, 211, 255, 0.55); }
}

@keyframes caseDiscoverRipple {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.86); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}

@keyframes caseDiscoverClick {
  0% { transform: scale(1); }
  34% { transform: scale(0.82); }
  100% { transform: scale(1.08); }
}

.work .case-visual-note strong {
  margin-left: auto;
  font: 500 0.68rem var(--font-mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.work .case-card--featured .case-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.32fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(1.6rem, 3.8vw, 3rem) 0 0;
}

.work .case-eyebrow {
  display: block;
  margin-bottom: 0.85rem;
  color: #b3c7e5;
  font: 500 0.7rem var(--font-mono);
  letter-spacing: 0.11em;
}

.work .case-card--featured .case-info h3 {
  max-width: 25ch;
  margin: 0 0 0.85rem;
  font-size: clamp(1.6rem, 3.3vw, 3rem);
  font-weight: 510;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.work .case-card--featured .case-info p {
  max-width: 61ch;
  margin: 0;
  color: #b9c7dd;
  font: 400 clamp(0.94rem, 1.24vw, 1.08rem)/1.7 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

.work .case-card--featured .case-result {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
  padding: 1.7rem 0 0;
  border: 0;
  border-top: 1px solid rgba(190, 211, 247, 0.22);
}

.work .case-card--featured .case-result span {
  max-width: none;
  margin: 0;
  color: #b9c7dd;
  font-size: 0.8rem;
  line-height: 1.8;
}

.work .case-card--featured .case-result strong {
  font-size: 1.4rem;
  line-height: 1;
}

.work .case-card--upcoming {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: clamp(3.5rem, 7vw, 6rem) 1rem clamp(3rem, 6vw, 5rem);
  text-align: center;
  border-top: 0;
}

.work .case-card--upcoming::before {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(184, 217, 255, 0.55), transparent);
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-out) 250ms;
}

.work .case-card--upcoming.is-visible::before { transform: scaleX(1); }
.work .case-card--upcoming .case-eyebrow { margin-bottom: 1.3rem; }
.work .case-card--upcoming h3 { max-width: 18ch; margin: 0; font-size: clamp(2.15rem, 5vw, 4.35rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.055em; }
.work .case-card--upcoming p { max-width: 42ch; margin: 1.3rem 0 0; color: #b9c7dd; font-size: clamp(0.96rem, 1.25vw, 1.08rem); line-height: 1.65; }
.work .case-upcoming-link {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2rem;
  padding: 0.85rem 1.1rem;
  color: #f5f8ff;
  font-size: 0.9rem;
  border: 1px solid rgba(218, 234, 255, 0.4);
  border-radius: 999px;
  background: rgba(110, 161, 231, 0.12);
  transition: background-color 300ms ease, transform 350ms var(--ease-out), border-color 300ms ease;
}

.work .case-upcoming-link:hover { background: rgba(110, 161, 231, 0.24); border-color: rgba(218, 234, 255, 0.72); transform: translateY(-0.2rem); }
html[data-theme="light"] .work .case-upcoming-link { color: #182943; border-color: rgba(30, 70, 125, 0.45); }

html[data-theme="light"] .work .case-card--featured .case-info p,
html[data-theme="light"] .work .case-card--featured .case-result span,
html[data-theme="light"] .work .case-card--upcoming p,
html[data-theme="light"] .work .case-eyebrow { color: #42516a; }

.project-lightbox-gallery {
  position: absolute;
  z-index: 4;
  right: 1.1rem;
  bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.45rem;
  color: #f2f6ff;
  background: rgba(5, 11, 25, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.project-lightbox-gallery[hidden] {
  display: none;
}

.project-lightbox-gallery button {
  width: 2rem;
  height: 2rem;
  color: inherit;
  border-radius: 50%;
  font-size: 1.2rem;
}

.project-lightbox-gallery button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.project-lightbox-gallery output {
  min-width: 2.5rem;
  font: 0.72rem var(--font-mono);
  text-align: center;
}

@media (max-width: 720px) {
  .project-lightbox-gallery {
    right: 0.7rem;
    bottom: 4rem;
  }
}

@media (max-width: 720px) {
  .work .case-grid { gap: 4.5rem; }

  .work .case-card--featured .case-visual,
  .work .case-card--featured.case-card--wide .case-visual {
    aspect-ratio: 4 / 4.8;
    border-radius: 0;
  }

  .work .case-gallery--fitt img:first-child { width: 65%; }
  .work .case-gallery--fitt img:nth-child(2),
  .work .case-gallery--fitt img:nth-child(3) { width: 64%; }
  .work .case-gallery--coffee img { width: 66%; }

  .work .case-card--featured.is-expanded .case-gallery--fitt img:first-child { transform: translate(-68%, -58%) rotate(-8deg); }
  .work .case-card--featured.is-expanded .case-gallery--fitt img:nth-child(2) { transform: translate(-28%, -115%) rotate(5deg); }
  .work .case-card--featured.is-expanded .case-gallery--fitt img:nth-child(3) { transform: translate(-28%, 12%) rotate(-5deg); }
  .work .case-card--featured.is-expanded .case-gallery--coffee img:first-child { transform: translate(-69%, -66%) rotate(-7deg); }
  .work .case-card--featured.is-expanded .case-gallery--coffee img:last-child { transform: translate(-33%, -24%) rotate(7deg); }

  .work .case-visual-note { align-items: flex-end; }
  .work .case-discover { font-size: 0.82rem; gap: 0.65rem; }
  .work .case-discover svg { width: 2.55rem; height: 2.55rem; }
  .work .case-discover::before,
  .work .case-discover::after { left: 1.275rem; width: 2.55rem; height: 2.55rem; }
  .work .case-visual-note strong { font-size: 0.58rem; }

  .work .case-card--featured .case-info {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1.4rem;
  }

  .work .case-card--featured .case-info h3 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .work .case-card--featured .case-result { padding-top: 1rem; }
  .work .case-card--upcoming { padding-inline: 0.3rem; }
}

@media (max-width: 380px) {
  .work .case-discover > span { max-width: 10ch; }
  .work .case-visual-note strong { font-size: 0.53rem; }
}

@media (prefers-reduced-motion: reduce) {
  .work .case-gallery img,
  .work .case-discover svg,
  .work .case-discover::before,
  .work .case-discover::after { animation: none; }
}

/* Az alap nagyítás a teljes képet a képernyőn belül tartja, a leírás görgethető. */
.project-lightbox { max-height: 94dvh; }
.project-lightbox-shell { height: min(92dvh, 57rem); max-height: 92dvh; }
.project-lightbox-stage { height: auto; min-height: 0; padding: 3.8rem 1.5rem 4.8rem; }
.project-lightbox-image { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.project-lightbox-caption { max-height: 30dvh; overflow-y: auto; }

@media (max-width: 720px) {
  .project-lightbox-shell { height: 94dvh; max-height: 94dvh; }
  .project-lightbox-stage { height: auto; padding: 3.6rem 0.6rem 5.5rem; }
  .project-lightbox-caption { max-height: 31dvh; }
}

/* A három pillértől megjelenő, üvegszerű vissza a tetejére gomb. */
.back-to-top {
  position: fixed;
  z-index: 75;
  right: clamp(1rem, 2.5vw, 2.4rem);
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  padding: 0;
  color: #f5f8ff;
  border: 1px solid rgba(226, 239, 255, 0.26);
  border-radius: 50%;
  background: rgba(11, 19, 42, 0.54);
  box-shadow: 0 0.65rem 1.8rem rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.11);
  -webkit-backdrop-filter: blur(15px) saturate(125%);
  backdrop-filter: blur(15px) saturate(125%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.55rem);
  transition: opacity 320ms ease, visibility 320ms ease, transform 420ms var(--ease-out), background-color 260ms ease;
}

.back-to-top.is-visible {
  opacity: 0.8;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top.is-visible:hover,
.back-to-top.is-visible:focus-visible {
  opacity: 1;
  background: rgba(34, 60, 102, 0.75);
  transform: translateY(-0.2rem);
}

.back-to-top:focus-visible { outline: 2px solid #96d6ff; outline-offset: 3px; }
.back-to-top svg { width: 1.18rem; height: 1.18rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="light"] .back-to-top { color: #182943; border-color: rgba(50, 81, 122, 0.25); background: rgba(249, 252, 255, 0.7); }
body.menu-open .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
.mobile-menu { max-height: 100dvh; overflow-y: auto; }

@media (max-width: 720px) {
  .back-to-top { right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); width: 2.85rem; height: 2.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition-duration: 0.01ms; }
}

/* A szolgáltatáskártyák háttere a teljes viewport szélességén fut ki. */
.hero-stage-media,
html[data-theme="light"] .hero-stage-media {
  top: 0;
  right: calc(50% - 52vw);
  bottom: -2rem;
  left: calc(50% - 52vw);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
}

/* A márkajel a fejléc bal oldalára kerül; a régi feliratot a kép kivágása rejti. */
.brand-logo-crop {
  position: relative;
  display: block;
  flex: none;
  width: clamp(4.6rem, 7.2vw, 5.5rem);
  aspect-ratio: 1000 / 635;
  overflow: hidden;
}

.brand-logo-crop img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 430px) {
  .brand-logo-crop { width: 4.6rem; }
  .brand-suffix { padding-left: 0.45rem; }
}

/* A többi megjelenő márkajel feliratát is az új névhez igazítjuk. */
.hero-logo-image,
.footer-brand-logo img {
  clip-path: inset(0 0 18% 0);
}

.hero-logo-caption {
  position: absolute;
  z-index: 3;
  bottom: 13%;
  left: 0;
  width: 100%;
  color: #d6b66f;
  font-size: clamp(0.48rem, 1vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}

.footer-brand-logo { position: relative; }
.footer-brand-logo::after {
  position: absolute;
  right: 0;
  bottom: 8%;
  left: 0;
  content: "DIGITAL AGENCY";
  color: #d6b66f;
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
}

/* A sorszámok helyén a márka, marketing és technológia közös céljai. */
.metric-strip--benefits .metric-headline {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.6rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: #f7f9ff;
  text-shadow: 0 0 2.2rem rgba(82, 156, 255, 0.14);
}

.metric-strip--benefits .metric-copy {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
}

.metric-strip--benefits .metric-copy small {
  font-size: 0.8rem;
  line-height: 1.75;
}

html[data-theme="light"] .metric-strip--benefits .metric-headline {
  color: #182943;
  text-shadow: none;
}

@media (max-width: 720px) {
  .metric-strip--benefits .metric-headline {
    font-size: clamp(1.65rem, 7.5vw, 2.6rem);
  }
}