/* LOOPIENT – közös, könnyen hangolható 3D vizuális réteg.
   A színek, az üveghatás és a mozgás itt módosítható minden oldalon egyszerre. */
:root {
  color-scheme: dark !important;
  --loopient-glass: rgba(14, 22, 38, .82);
  --loopient-glass-edge: rgba(255, 255, 255, .14);
  --loopient-orange: #ff7518;
  --loopient-panel-radius: 1.25rem;
  --loopient-panel-shadow: 0 20px 52px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.13);
}
html { min-height:100%; background:#080b12 !important; }
html body {
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:transparent !important;
  color:#f2f3f5;
}

html body { overflow-x:clip; }

/* Minden oldal fejlécén ugyanaz a visszafogott, üveges réteg jelenik meg. */
body header {
  background:rgba(11,15,22,.68) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 12px 38px rgba(0,0,0,.20) !important;
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
}
body footer {
  background:rgba(11,15,22,.76) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
}

/* Sötét, mélykék alap és statikus narancs fénymezők adják a hátteret. */
.loopient-atmosphere {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
}
.loopient-atmosphere::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 48% at 50% -8%,rgba(255,105,20,.20),transparent 72%),
    radial-gradient(ellipse 54% 54% at 100% 48%,rgba(35,73,128,.22),transparent 76%),
    radial-gradient(ellipse 44% 45% at 0% 86%,rgba(255,105,20,.10),transparent 74%),
    linear-gradient(135deg,#080b12 0%,#101a2d 48%,#090d16 100%);
  opacity:1;
}

/* A narancssárga fényfoltok lassan, egymástól függetlenül vándorolnak. */
.loopient-atmosphere::after {
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  background:
    radial-gradient(ellipse 45% 40% at 25% 30%,rgba(255,105,20,.14),transparent 72%),
    radial-gradient(ellipse 38% 42% at 75% 70%,rgba(249,115,22,.12),transparent 74%);
  background-size:160% 160%,160% 160%;
  background-position:0% 0%,100% 100%;
  animation:loopient-orange-drift 22s ease-in-out infinite alternate;
}
@keyframes loopient-orange-drift {
  0% { background-position:0% 0%,100% 100%; }
  50% { background-position:45% 55%,55% 20%; }
  100% { background-position:100% 55%,0% 50%; }
}

/* A kártyák kissé kiemelkednek a háttérből; az árnyék adja a mélységet. */
body .faq-panel,
body main [class*="shadow-[var(--shadow-raised)]"],
body main .card-lift {
  background-color:var(--loopient-glass) !important;
  border-color:var(--loopient-glass-edge) !important;
  border-radius:var(--loopient-panel-radius) !important;
  box-shadow:var(--loopient-panel-shadow) !important;
  -webkit-backdrop-filter:blur(8px) saturate(115%);
  backdrop-filter:blur(8px) saturate(115%);
}
body .card {
  transform:translateZ(0);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}

/* A kiemelt kártyák narancs peremet és hátulról érkező lágy fényt kapnak. */
body .faq-panel,
body main > section:first-of-type [class*="shadow-[var(--shadow-raised)]"],
body main .card-lift:nth-child(3n + 1) {
  border:1px solid rgba(255,145,66,.90) !important;
  box-shadow:
    0 0 6px rgba(255,145,66,.46),
    0 0 24px rgba(255,105,20,.28),
    0 0 52px rgba(255,105,20,.18),
    0 18px 48px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  body .card:hover {
    transform:translateY(-3px);
    border-color:rgba(251,146,60,.28) !important;
    box-shadow:0 28px 62px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
}

/* A fejléc kap üveges hatást; a blur csak a fejlécen van a gördülékenységért. */
body .glass {
  background:rgba(11,15,22,.68) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 12px 38px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
}
body .btn {
  position:relative;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.12);
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease;
}
body .btn-primary {
  background-image:linear-gradient(145deg,rgba(255,255,255,.20),transparent 55%,rgba(130,45,8,.12)) !important;
  box-shadow:0 9px 24px rgba(249,115,22,.18),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.12);
}
body .btn-secondary,
body .btn-glass-light,
body .btn-dark {
  background-color:rgba(24,30,40,.62) !important;
  background-image:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 60%,rgba(249,115,22,.05)) !important;
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  backdrop-filter:blur(8px) saturate(120%);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  body .btn:hover { transform:translateY(-2px); box-shadow:0 13px 28px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.10); }
}

/* Kis képernyőn kevesebb kör látszik, hogy ne zavarja a tartalmat. */
@media(max-width:700px) {
  .loopient-atmosphere::before { background-position:58% center,58% center,58% center; }
}
@media(prefers-reduced-motion:reduce) {
  body .card,body .btn { transition:none !important; }
  .loopient-atmosphere::after { animation:none; }
}

/*
 * Végleges közös felülírások.
 * Ezek veszik át a korábbi narancs fényfoltok és rácsok helyét minden oldalon.
 */
html body main section[class] {
  background-color:transparent !important;
  background-image:none !important;
}
html body main .orb,
html body main .bg-grid,
html body main .bg-grid-dark,
html body main .bg-dots,
html body main .bg-dots-light {
  display:none !important;
}
/* A főoldal korábbi nagy SVG-gyűrűjét eltávolítjuk a látványból. */
html body main > section:first-of-type > div[aria-hidden="true"] {
  display:none !important;
}
/* A nagy felületek sötét, enyhén áttetsző panelként emelkedjenek ki. */
html body main [class*="bg-surface"]:not(.rounded-full),
html body main .card,
html body main .faq-panel,
html body main [class*="shadow-[var(--shadow-raised)]"],
html body main [class*="rounded-[1.75rem]"],
html body main .card-lift {
  background-color:rgba(14,22,38,.86) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:var(--loopient-panel-radius) !important;
  box-shadow:var(--loopient-panel-shadow) !important;
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
}
html body main .text-ink { color:#f5f3f0 !important; }
html body main figure > div {
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12);
}
html body main > section:first-of-type {
  min-height:min(760px,calc(100svh - 150px));
  display:flex;
  align-items:center;
}
html body main > section:first-of-type > div:not([aria-hidden="true"]) {
  width:100%;
}
@media(max-width:700px) {
  html body main > section:first-of-type { min-height:0; }
  html body main figure > div { -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
}