*{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Helvetica Neue',Arial,sans-serif;background:#0a0e14;color:#e8edf3;-webkit-font-smoothing:antialiased;line-height:1.6}
 .accent-bar{height:3px;background:linear-gradient(90deg,#81C4FF 0 33%,#16588E 33% 66%,#E7222E 66% 100%)}
  header{background:#000;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));border-bottom:1px solid #1a2332}
  nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
  nav a{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75);padding:10px 14px;border-radius:4px;text-decoration:none;position:relative;transition:color .2s}
  nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:#1c69d4;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  nav a:hover{color:#fff}
  nav a:hover::after, nav a.active::after{transform:scaleX(1)}
  nav a.active{color:#fff}
  .banner-wrap{background:#000;border-bottom:2px solid #1c69d4}
  .banner-wrap img{width:100%;height:auto;display:block}
  main{max-width:780px;margin:0 auto;padding:28px 20px 60px}
  main#contacts-main{max-width: fit-content;margin:0 auto;padding:28px 20px 60px}
  h1{font-size:clamp(24px,6vw,34px);font-weight:600;line-height:1.2;color:#fff;margin-bottom:18px;letter-spacing:.3px}
  h1 .accent{color:#1c69d4; text-align: justify;}
  .intro-label{display:inline-block;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#1c69d4;font-weight:600;margin-bottom:14px;padding:5px 10px;border:1px solid #1c69d4;border-radius:3px}
  p{margin-bottom:14px;color:#c9d2dc;font-size:15px}
  strong{color:#fff;font-weight:600}
  ol.steps{list-style:none;counter-reset:step;margin:18px 0 22px;padding:0}
  ol.steps li{counter-increment:step;position:relative;padding:14px 16px 14px 56px;background:#10161f;border:1px solid #1a2332;border-left:3px solid #1c69d4;border-radius:6px;margin-bottom:10px;color:#e8edf3}
  ol.steps li::before{content:counter(step);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;background:#1c69d4;color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px}
  ul.handover{list-style:none;margin:14px 0 22px;padding:0}
  ul.handover li{padding:12px 16px;background:#10161f;border:1px solid #1a2332;border-radius:6px;margin-bottom:8px;color:#c9d2dc;font-size:15px;position:relative;padding-left:36px}
  ul.handover li::before{content:"▸";position:absolute;left:14px;top:12px;color:#e22;font-weight:700}
  .office{background:linear-gradient(135deg,#0f1622,#10161f);border:1px solid #1c69d4;border-radius:8px;padding:18px 18px 14px;margin-top:18px}
  .office h3{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#1c69d4;font-weight:600;margin-bottom:12px}
  .office ul{list-style:none;padding:0;margin:0}
  .office li{padding:10px 0;border-bottom:1px solid #1a2332;color:#e8edf3;font-size:15px;display:flex;align-items:center;gap:10px}
  .office li:last-child{border-bottom:none}
  .office li::before{content:"📍";font-size:16px}
  footer{background:#000;padding:24px 20px;text-align:center;border-top:1px solid #1a2332}
  footer .stripe{display:inline-flex;height:4px;width:120px;margin-bottom:10px}
  footer .stripe div{flex:1}
  footer .stripe div:nth-child(1){background:#81C4FF}
  footer .stripe div:nth-child(2){background:#16588E}
  footer .stripe div:nth-child(3){background:#E7222E}
  footer p{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0}
  @media(min-width:640px){
    nav a{font-size:14px;padding:12px 18px}
    main{padding:40px 32px 80px}
    p,ul.handover li,.office li{font-size:16px}
  }
  .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #1c69d4, #154ba0);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(28, 105, 212, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(28, 105, 212, 0.5);
  background: linear-gradient(135deg, #1e77e8, #154ba0);
}

.cta-button::after {
  content: "→";
  font-size: 18px;
  transition: transform 0.2s;
}

.cta-button:hover::after {
  transform: translateX(4px);
}

.cta-wrap {
  margin: 28px 0;
  text-align: center;
}

#alapszabaly:any-link {
color: #81C4FF;
}




.hover-trigger {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.hover-image {
  position: absolute;
  left: 0;
  top: -60vh; /* a szöveg alá helyezi; használhatsz -100% vagy negatív értéket ha fent akarod */
  margin-top: 8px;
  width: 800px; /* állítsd a szükséges méretre */
  height: auto;
  opacity: 0;
  pointer-events: none; /* hogy a kép ne blokkolja a hover eseményt */
  transition: opacity 0.15s ease-in-out, transform 0.15s ease;
  transform: translateY(6px);
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border-radius: 4px;
}

.hover-trigger:hover .hover-image,
.hover-trigger:focus .hover-image {
  opacity: 1;
  transform: translateY(0);
}