html { scroll-behavior: smooth; }
body { background:#0A0A0A; }

/* Animated mono background */
.animated-bg{
  position: fixed; inset: 0; z-index: -2;
  overflow: hidden; background:#0A0A0A;
}
.animated-bg::before,
.animated-bg::after{
  content:"";
  position:absolute;
  width:80vw; height:80vw; border-radius:50%;
  filter: blur(120px);
  opacity:.15;
  animation: floatMove 20s ease-in-out infinite alternate;
}
.animated-bg::before{
  background: radial-gradient(circle, white 0%, transparent 70%);
  top:-20%; left:-20%;
}
.animated-bg::after{
  background: radial-gradient(circle, white 0%, transparent 70%);
  bottom:-20%; right:-20%;
  animation-duration: 25s;
}
@keyframes floatMove{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(60px,40px) scale(1.1); }
  100%{ transform: translate(-40px,-60px) scale(1); }
}

/* Mono glow overlay */
.mono-glow{
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,.10), rgba(0,0,0,0) 70%),
    radial-gradient(40% 40% at 80% 20%, rgba(255,255,255,.06), rgba(0,0,0,0) 70%);
}

/* Page transitions (content wrapper) */
#content{ opacity:0; transform: translateY(10px); }
#content.in{ opacity:1; transform:none; transition: 520ms ease; }
#content.out{ opacity:0; transform: translateY(10px); transition: 260ms ease; }

/* Reveal */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(2px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: transform, opacity, filter;
}
.reveal.is-inview{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Lift */
.lift{ transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
.lift:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  background-color: rgba(255,255,255,.08);
}

/* Navbar scroll */
.nav-scrolled{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 50px rgba(0,0,0,.45) !important;
}

/* Filter chip */
.chip{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); }
.chip:hover{ background: rgba(255,255,255,.08); }
.chip-active{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: white;
}

/* Mobile menu animation */
#mobileMenu{
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow: hidden;
  transition: max-height 320ms ease, opacity 220ms ease, transform 220ms ease;
  will-change: max-height, opacity, transform;
  pointer-events: none;
}
#mobileMenu.menu-open{
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Overlay (blocks tap-through) */
#menuOverlay{
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #content{ opacity:1 !important; transform:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .lift{ transition:none !important; }
}
.dev-note{
  margin-top: 10px;
  opacity: 0.85;
  font-size: 14px;
}

/* === ABOUT: Team card glow === */
.team-card{
  position: relative;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}

.team-card::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.18),
    rgba(255,255,255,.06) 30%,
    transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.team-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  background-color: rgba(255,255,255,.06);
}

.team-card:hover::before{
  opacity: 1;
}

/* jobb tapinthatóság mobilon */
@media (hover: none){
  .team-card:hover{ transform: none; }
  .team-card:hover::before{ opacity: 0; }
}



/* --------------------------
   Cinematic portfolio cards
-------------------------- */
.cin-card{ position: relative; }
.cin-media{ position: relative; overflow: hidden; }
.cin-thumb{
  transform: scale(1.02);
  filter: contrast(1.02) saturate(.95);
  transition: transform 650ms ease, filter 650ms ease, opacity 420ms ease;
}
.cin-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 18px;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18) 55%, rgba(0,0,0,.0));
  transition: background 450ms ease;
}
.cin-grain{
  pointer-events:none;
  position:absolute; inset:-40%;
  opacity:.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  transform: translate3d(0,0,0);
  animation: cinGrain 6s steps(8) infinite;
}
@keyframes cinGrain{
  0%{ transform: translate3d(-2%, -2%, 0); }
  20%{ transform: translate3d(2%, -1%, 0); }
  40%{ transform: translate3d(1%, 2%, 0); }
  60%{ transform: translate3d(-1%, 1%, 0); }
  80%{ transform: translate3d(-2%, 2%, 0); }
  100%{ transform: translate3d(2%, -2%, 0); }
}
.cin-play{
  width: 18px; height: 18px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.cin-cta{ width: fit-content; }
.cin-iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 260ms ease;
}
.cin-playing .cin-iframe{ opacity: 1; }
.cin-playing .cin-thumb{ opacity: .0; }
.cin-card:hover .cin-thumb{ transform: scale(1.08); filter: contrast(1.08) saturate(1.0); }
.cin-card:hover .cin-overlay{ background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.18) 60%, rgba(0,0,0,.0)); }

.cin-hover:hover .cin-thumb{ transform: scale(1.08); filter: contrast(1.08) saturate(1.0); }
.cin-hover:hover .cin-overlay{ background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.18) 60%, rgba(0,0,0,.0)); }


/* SEO + layout polish */
body{ overflow-x:hidden; }
img{ max-width:100%; height:auto; }
nav a[aria-current="page"]{ color:#fff; }
.header-link-active{ color:#fff; }
.section-kicker{ letter-spacing:.16em; text-transform:uppercase; }
.metric-card{ min-height:110px; }
.logo-chip{ border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
.testimonial-card{ position:relative; }
.testimonial-card::before{ content:"“"; position:absolute; top:10px; right:16px; font-size:54px; line-height:1; opacity:.08; }
.faq-item summary{ list-style:none; cursor:pointer; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open]{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
.rich-copy p + p{ margin-top:1rem; }
@media (max-width: 767px){
  header .mx-auto.max-w-6xl{ padding-left:12px; padding-right:12px; }
  #nav{ gap:.6rem; align-items:center; }
  #nav > a{ min-width:0; flex:1 1 auto; }
  #nav .leading-tight{ min-width:0; }
  #nav .leading-tight > div:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #nav .rounded-xl.bg-white.text-black.px-4.py-2.text-sm.font-semibold.hover\:opacity-90{ padding:.7rem .9rem; }
  #mobileMenu{ margin-top:.65rem; }
}