:root{
    --bg: #07060c;
    --panel: rgba(255,255,255,.04);
    --panel2: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.10);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.62);
    --muted2: rgba(255,255,255,.45);
    --accent: #8b5cf6;   /* lila */
    --accent2:#22d3ee;   /* cyan */
  }

  .services{
    position: relative;
    color: var(--text);
    padding: clamp(56px, 7vw, 96px) 0;
    overflow: hidden;
  }

  /* subtle modern noise + glow blobs */


  .services__wrap{
    width:min(1120px, 92vw);
    margin: 0 auto;
    position:relative;
  }

  .services__head{
    max-width: 720px;
    margin-bottom: clamp(18px, 3vw, 34px);
  }

  .services__kicker{
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    color: var(--muted2);
    margin: 0 0 10px 0;
  }

  .services__title{
    margin: 0;
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.05;
    font-weight: 750;
  }

  .services__title span{
    background: linear-gradient(90deg, var(--text), rgba(255,255,255,.65));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position:relative;
  }

  .services__sub{
    margin: 14px 0 0 0;
    color: var(--muted);
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.55;
  }

  .services__list{
    display: grid;
    gap: 14px;
  }

  .service{
    display: grid;
    grid-template-columns: 170px 1fr 120px;
    align-items: center;
    gap: 18px;

    padding: 22px 22px;
    border-radius: 18px;

    background: linear-gradient(180deg, var(--panel), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);

    text-decoration: none;
    color: inherit;

    position: relative;
    overflow: hidden;

    transform: translateZ(0);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
  }

  /* top highlight + bottom glow */
  .service::before{
    content:"";
    position:absolute; inset:-1px;
    background:
      radial-gradient(900px 180px at 50% 0%, rgba(255,255,255,.10), transparent 55%),
      radial-gradient(600px 260px at 0% 120%, rgba(139,92,246,.18), transparent 60%),
      radial-gradient(520px 240px at 100% 120%, rgba(34,211,238,.12), transparent 60%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events:none;
  }

  .service:hover{
    transform: translateY(-2px);
    border-color: rgba(139,92,246,.35);
    background: linear-gradient(180deg, var(--panel2), rgba(255,255,255,.03));
  }
  .service:hover::before{ opacity: 1; }

  .service__meta{
    display:flex;
    flex-direction: column;
    gap: 10px;
  }

  .service__num{
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(255,255,255,.80);
  }

  .service__tag{
    width: fit-content;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(8px);
  }

  .service__name{
    margin: 0 0 6px 0;
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 750;
    letter-spacing: .01em;
  }

  .service__desc{
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: 14px;
    max-width: 62ch;
  }

  .service__cta{
    justify-self: end;
    text-align: right;
    display:flex;
    align-items:center;
    gap: 10px;
  }

  .service__arrow{
    width: 40px; height: 40px;
    display:grid; place-items:center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    font-size: 18px;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
  }

  .service__link{
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.70);
  }

  .service:hover .service__arrow{
    transform: translateX(3px);
    border-color: rgba(34,211,238,.35);
    background: rgba(34,211,238,.06);
  }

  /* focus styles */
  .service:focus-visible{
    outline: 2px solid rgba(139,92,246,.75);
    outline-offset: 3px;
  }

  /* responsive */
  @media (max-width: 860px){
    .service{
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 18px;
    }
    .service__meta{
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .service__cta{
      justify-self: start;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .service, .service::before, .service__arrow{
      transition: none;
    }
    .service:hover{
      transform: none;
    }
  }




        .subscribe-form {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.footer-contact h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #fff;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list li {
  margin-bottom: 10px;
  font-size: 14px;
}

.contact-label {
  display: block;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
}

.contact-list a {
  color: #c7c7d9;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-list a:hover {
  color: #8b5cf6; /* indigo hover */
}

.footer-social {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.footer-social img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-social a:hover img {
  transform: translateY(-3px);
  opacity: 0.7;
}

.form-row {
  display: flex;
  flex-direction: column; /* alapértelmezett mobilra */
  gap: 10px;
}

/* Input és gomb stílusok */
.form-row input {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2); /* halvány fehér / átlátszó */
  border-radius: 50px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.05); /* finom háttér, sötét témához */
  color: white;
}

.form-row button {
  padding: 12px 20px;
  border: none;
  background-color: #4f46e5; /* indigo */
  color: white;
  font-size: 14px;
  border-radius: 50px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s;
}

.form-row button:hover {
  background-color: #4338ca; /* sötétebb indigo hover */
}

/* Desktop */
@media (min-width: 768px) {
  .form-row {
    flex-direction: row;
  }

  .form-row input {
    flex-grow: 1;
    border-radius: 50px 0 0 50px;
    border-right: none;
  }

  .form-row button {
    flex-shrink: 0;
    width: 140px;
    border-radius: 0 50px 50px 0;
  }
}





/* =========================
   SERVICES BACKGROUND (hero-style)
   ========================= */

.services{
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
}

/* háttér réteg – biztos kitöltés */
.services__bg{
  position: absolute;
  inset: 0;              /* top/left/right/bottom:0 */
  z-index: 0;
  pointer-events: none;

  /* glow + mély vignetta */
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(79,70,229,.26), transparent 60%),
    radial-gradient(780px 520px at 85% 20%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(900px 540px at 55% 110%, rgba(139,92,246,.16), transparent 65%),
    radial-gradient(1200px 700px at 50% 40%, rgba(0,0,0,.62), transparent 72%);

  filter: blur(18px);
  transform: translate3d(0,0,0);
  opacity: .95;
}

/* finom “grain/noise” réteg (csak CSS) */
.services__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  opacity: .09;
  mix-blend-mode: overlay;
  pointer-events: none;

  /* egyszerű noise hatás */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 3px
    );
}

/* content mindig a bg felett */
.services__wrap{
  position: relative;
  z-index: 1;
  width: min(1120px, 92vw);
  margin: 0 auto;
}

/* ha a címsor is ebben a szekcióban van, az is legyen felül */
.services > .flex{
  position: relative;
  z-index: 1;
}

/* opcionális: finom háttér animáció (nem GSAP) */
@media (prefers-reduced-motion: no-preference){
  .services__bg{
    animation: servicesGlow 10s ease-in-out infinite alternate;
  }
  @keyframes servicesGlow{
    0%   { transform: translate3d(-14px,-10px,0) scale(1.02); }
    50%  { transform: translate3d(16px, 10px,0) scale(1.06); }
    100% { transform: translate3d(-10px,14px,0) scale(1.03); }
  }
}

@media (prefers-reduced-motion: reduce){
  .services__bg{ animation: none; }
}