:root{
  /* Brand colors */
  --c-blue-1: #2D89BE;
  --c-blue-2: #143B6D;
  --c-blue-3: #196297;
  --c-ink:    #131320;

  /* Accent */
  --c-cyan:        #00D4FF;
  --c-cyan-92:     rgba(0, 212, 255, 0.92);
  --c-cyan-65:     rgba(0, 212, 255, 0.65);
  --c-cyan-glow:   rgba(0, 212, 255, 0.28);

  /* Neutrals */
  --c-white: #fff;
  --c-text-dim: rgba(255,255,255,0.78);

  /* Surfaces */
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.10);
  --overlay-bg: rgba(0,0,0,0.35);
  --overlay-border: rgba(255,255,255,0.10);

  /* Shadows */
  --shadow-soft: 0 10px 50px rgba(255,255,255,0.12);
  --shadow-deep: 0 25px 60px rgba(0,0,0,0.45);

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 10px;
  --s-2: 14px;
  --s-3: 18px;
  --s-4: 20px;
  --s-5: 26px;
  --s-6: 30px;
  --s-7: 40px;
  --s-8: 60px;
  --s-9: 120px;

  /* Layout widths */
  --w-nav: 1700px;
  --w-molino: 1400px;
  --w-content: 1400px;
  --w-services: 1450px;

  /* Motion */
  --t-fast: 180ms;
  --t-mid: 350ms;
  --t-slow: 700ms;
  --e-smooth: cubic-bezier(0.4, 0, 0.2, 1);

 /* Extra accents (hero mentalitáshoz) */
  --c-violet-55: rgba(124, 58, 237, 0.55);
  --c-amber-55:  rgba(245, 158, 11, 0.55);
  --c-lime-55:   rgba(34, 197, 94, 0.55);

  --c-white-08:  rgba(255,255,255,0.08);
  --c-white-14:  rgba(255,255,255,0.14);

  /* Typography */
  --ff-base: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

/* =========================================================
   RESET / BASE
   ========================================================= */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family: var(--ff-base);
  color: var(--c-white);
  background: linear-gradient(
    90deg,
    rgba(45, 137, 190, 1) 0%,
    rgba(20, 59, 109, 1) 16%,
    rgba(25, 98, 151, 1) 62%,
    rgba(19, 19, 32, 1) 100%
  );
}
/* EXTRA – mobil overscroll ugrás ellen */
body{
  overscroll-behavior: none;
}



/* Utility: visually hidden (SEO/accessibility) */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* =========================================================
   INTRO VIDEO – FULLSCREEN, NEM LÓG KI (minden eszköz)
   ========================================================= */

/* main rejtés */
.main-hidden{
  display: none;
}

/* (Fontos) ne legyen “rejtett” default görgetés / margin */
html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

/* intro alap */
#welcome-intro{
  position: fixed;
  top: 0;
  left: 0;

  /* inset:0 helyett így néha stabilabb mobilon */
  width: 100%;
  height: 100vh;        /* fallback */
  height: 100svh;       /* small viewport height – iOS bar ugrálás ellen */
  height: 100dvh;       /* modern böngészők */

  overflow: clip;       /* jobb mint hidden: nem csinál scroll-t */
  z-index: 9999;

  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;

  /* Safe-area (iPhone notch) – nehogy “kifusson” */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

#welcome-intro.hide{
  opacity: 0;
  visibility: hidden;
}

/* videó: abszolút kitöltés, subpixel csúszás ellen */
#intro-video{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  /* néha 1px “villanás” ellen */
  transform: translateZ(0);
}

/* Ha valamiért overflow:clip nem támogatott */
@supports not (overflow: clip){
  #welcome-intro{ overflow: hidden; }
}

/* =========================================================
   NAV
   ========================================================= */

.nav-wrap{
  position: sticky;
  top: 0;
  z-index: 9999;

  margin-bottom: var(--s-6);
  background: rgba(19,19,32,0.35);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar{
  position: relative;
  display:flex;
  align-items:center;

  height: 80px;
  padding: var(--s-1) var(--s-4);
  max-width: var(--w-nav);
  margin: 0 auto;
}

.navbar-nav{
  position:absolute;
  left:50%;
  transform: translate(-45%);
  display:flex;
  gap: var(--s-6);
}

.logo{
  position:absolute;
  margin-right:auto;
  transform: translate(10%, 10%);
}

.logo img{
  width:150px;
  height:150px;
}

.nav-link{
  display:flex;
  align-items:center;
  justify-content:center;

  padding: 1px 20px;
  color: var(--c-white);
  text-decoration:none;

  border-bottom: 2px solid transparent;
  transition: border-color var(--t-mid) ease;
}

.nav-link:hover{
  border-bottom-color: var(--c-white);
}

/* =========================
   HAMBURGER + DRAWER NAV
========================= */

/* Alap: desktopon rejtve */
.hamburger{
  display:none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10001;
}

.hamburger span{
  width: 26px;
  height: 3px;
  background: rgba(255,255,255,0.95);
  border-radius: 3px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburger.active span:nth-child(1){
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2){
  opacity: 0;
}
.hamburger.active span:nth-child(3){
  transform: rotate(-45deg) translate(6px, -6px);
}

.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9999;
}
.nav-overlay.active{
  opacity: 1;
  pointer-events: auto;
}



/* =========================================================
   MOLINÓ / SLIDER
   ========================================================= */

.molino{
  width: 100%;
  max-width: var(--w-molino);
  margin: 0 auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

.molino__viewport{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  line-height: 0;
  background: var(--c-ink);
}

.molino__track{
  display:flex;
  transform: translateX(0);
  transition: transform var(--t-slow) var(--e-smooth);
  will-change: transform;
}

/* Slide: a CTA pozicionálási alapja */
.molino__slide{
  flex: 0 0 100%;
  width: 100%;
  display:block;
  position: relative; /* <- EZ A KULCS */
}

.molino__slide img{
  width: 100%;
  height:auto;
  object-fit: cover;
  display:block;
}

/* CTA: most már slide-on belül van, és együtt mozog a képpel */
.molino__cta{
  position:absolute;
  right: 250px;
  bottom: 62px;
  z-index: 3;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 20px 30px;
  border-radius: var(--r-pill);

  text-decoration:none;
  font-weight:700;
  font-size:16px;
  line-height:1;

  color: #001018;
  background: var(--c-cyan-92);
  border: 1px solid var(--c-cyan-65);

  transition: transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              background var(--t-fast) ease;
}

.molino__cta:hover{
  transform: translateY(-2px);
  background: rgba(0, 212, 255, 1);
  box-shadow: 0 14px 35px var(--c-cyan-glow);
}

.molino__cta:focus-visible{
  outline: 2px solid rgba(0, 212, 255, 0.9);
  outline-offset: 3px;
}

/* Dots marad a viewport overlay-jén */
.molino__dots{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5; /* kicsit feljebb, hogy biztos fölötte legyen mindennek */

  display:flex;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);

  border-radius: var(--r-pill);
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  line-height: 1;
}

.molino__dot{
  width:10px;
  height:10px;
  border-radius: var(--r-pill);
  padding:0;
  cursor:pointer;

  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.20);
}

.molino__dot.is-active{
  background: rgba(0, 212, 255, 0.95);
  border-color: rgba(0, 212, 255, 0.75);
}



/* =========================================================
   GARANCIÁK
   ========================================================= */

.garancia-section{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  max-width: var(--w-content);
  margin: 0 auto var(--s-9) auto;
  padding: 40px 8px 0 8px;
}

.garancia-card{
  position:relative;
  height:250px;
  border-radius: var(--r-lg);
  overflow:hidden;
  cursor:pointer;

  background-size:cover;
  background-position:center;

  border: 1px solid rgba(255,255,255,0.08);
  transition: transform var(--t-mid) var(--e-smooth),
              box-shadow var(--t-mid) ease;
}

/* háttérképek */
.garancia-card:nth-child(1){ background-image:url("valaszido.png"); }
.garancia-30{ background-image:url("gari.png"); }
.garancia-hatarido{ background-image:url("hatgari.png"); }

/* glow */
.garancia-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--r-lg) + 2px);
  opacity:0;
  transition: opacity var(--t-mid) ease;
  pointer-events:none;

  background: radial-gradient(
    600px 150px at 20% 0%,
    rgba(0,212,255,0.35),
    rgba(0,0,0,0) 60%
  );
}

.garancia-card:hover::after{ opacity:1; }

/* overlay blur */
.garancia-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  transition: var(--t-mid) ease;
}

.garancia-card:hover::before{
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
}

.garancia-card:hover{
  transform: translateY(-10px);
  box-shadow: var(--shadow-deep);
}

.garancia-overlay{
  position:absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;

  padding: 15px;
  border-radius: var(--r-md);

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);

  transform: translateY(40px);
  opacity:0;
  transition: transform var(--t-mid) ease, opacity var(--t-mid) ease;

  color: var(--c-white);
}

.garancia-card:hover .garancia-overlay{
  transform: translateY(0);
  opacity: 1;
}

.garancia-overlay h3{
  margin:0 0 10px 0;
  font-size:22px;
  font-weight:600;
}

.garancia-overlay p{
  margin:0;
  font-size:16px;
  color:#d1d5db;
}

/* ================================
   GARANCIA HÁTTÉR – RESPONSIVE FIX
   ================================ */

/* Alap: minden garancia-kártya háttérképe reszponzív */
.garancia-card{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* hogy a kép szépen “üljon” a kártyán */
  background-color: rgba(255,255,255,0.04);
}

/* Ha szeretnéd, hogy a fontos rész inkább feljebb legyen (gyakori “badge” képeknél) */
.garancia-card:nth-child(1),
.garancia-30,
.garancia-hatarido{
  background-position: center top;
}

.garancia-30{ background-position: 50% 20%; }
.garancia-hatarido{ background-position: 50% 10%; }

/* Mobil / tablet: legyen stabil magassága, hogy ne torzuljon és ne ugráljon */
@media (max-width: 900px){
  .garancia-card{
    /* választható: fix arány a legszebb */
    aspect-ratio: 16 / 9;
    min-height: 220px;      /* ha a kártya tartalma kevés */
  }
}

/* Kisebb mobil: kicsit magasabb arány, mert keskeny a képernyő */
@media (max-width: 600px){
  .garancia-card{
    aspect-ratio: 4 / 3;
    min-height: 240px;
    background-position: center; /* középre, hogy ne vágjon túl sokat felül */
  }
}

/* Extra kis mobil: még “kártyásabb” arány */
@media (max-width: 480px){
  .garancia-card{
    aspect-ratio: 1 / 1;
    min-height: 260px;
  }
}


/* =========================================================
   SZOLGÁLTATÁSOK (kártyák)
   ========================================================= */

.szolgaltatasok{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--w-services);
  margin: 30px auto 60px auto;
  padding: 0 16px;

  grid-auto-rows: minmax(220px, auto);
  align-items: start;
}

.szolg{
  position: relative;

  border-radius: calc(var(--r-lg) + 2px);
  padding: 28px;
  margin: 10px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  display:flex;
  flex-direction: column;

  box-shadow: 0 15px 40px rgba(0,0,0,0.45);

  transition:
    transform var(--t-mid) var(--e-smooth),
    box-shadow var(--t-mid) var(--e-smooth),
    border-color var(--t-mid) var(--e-smooth);

  overflow: hidden;
}

.szolg:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-deep);
}

/* Alap: minden szolg ugyanazt a glass blur-t használja (amit már beállítottunk) */

/* 1) Weboldal készítés – cyan tech */
.szolg--web{
  background:
    radial-gradient(600px 200px at 20% 0%,
      rgba(0,212,255,0.18),
      rgba(0,0,0,0) 60%),
    rgba(255,255,255,0.05);
}


/* 2) Webdesign – brand blue (elegáns) */
.szolg--design{
  background:
    radial-gradient(600px 200px at 20% 0%,
      rgba(45,137,190,0.20),
      rgba(0,0,0,0) 60%),
    rgba(255,255,255,0.05);
}


/* 3) Ajánló program – lime (pozitív ösztönzés, de visszafogott) */
.szolg--referral{
  background:
    radial-gradient(600px 200px at 20% 0%,
      rgba(34,197,94,0.16),
      rgba(0,0,0,0) 60%),
    rgba(255,255,255,0.05);
}


/* 4) 3D – violet (kreatív / premium) */
.szolg--3d{
  background:
    radial-gradient(600px 200px at 20% 0%,
      rgba(124,58,237,0.16),
      rgba(0,0,0,0) 60%),
    rgba(255,255,255,0.05);
}


/* 5) Karbantartás – amber (figyelem / stabilitás / “üzemeltetés”) */
.szolg--care{
  background:
    radial-gradient(700px 240px at 20% 0%,
      rgba(245,158,11,0.14),
      rgba(0,0,0,0) 60%),
    rgba(255,255,255,0.05);
}



.szolgcim{
  margin: 0 0 12px 0;
  font-size: 22px;
  line-height: 1.2;
}

.szolg p{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Hover alap */


/* Kinyíló blokk */
.szolg__more{
  margin-top: 14px;

  max-height: 0;
  opacity: 0;
  transform: translateY(6px);

  transition: max-height var(--t-mid) var(--e-smooth),
              opacity var(--t-mid) var(--e-smooth),
              transform var(--t-mid) var(--e-smooth);
}

.szolg__list{
  margin: 0 0 14px 18px;
  line-height: 1.45;
  font-size: 15px;
}

/* CTA */
.szolggomb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;

  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;

  color:#001018;
  background: rgba(0,212,255,0.92);
  border: 1px solid rgba(0,212,255,0.65);

  transition: transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              background var(--t-fast) ease;
}

.szolggomb:hover{
  transform: translateY(-2px);
  background: rgba(0,212,255,1);
  box-shadow: 0 14px 35px rgba(0,212,255,0.28);
}

.szolggomb:focus-visible{
  outline: 2px solid rgba(0, 212, 255, 0.9);
  outline-offset: 3px;
}


/* DESKTOP: hover / fókusz -> nő a gridben + kinyílik */


/* MOBIL: görgetésnél JS adja az .is-active class-t */


/* Reszponzív */






/* =========================================================
   Megvalósítási -- Ajánlatkéréstől a megvalósításig
   ========================================================= */

/* =========================
   FOLYAMAT SZEKCIÓ
   ========================= */

/* =========================
   KÖZPONTI ILLUSZTRÁCIÓS FOLYAMAT
   ========================= */

.folyamat-visual{
  max-width: var(--w-content);
  margin: var(--s-8) auto;
  padding: 0 var(--s-4);
  text-align:center;
}

.folyamat-visual__head{
  margin-bottom: var(--s-7);
}

.folyamat-visual__head p{
  color: var(--c-text-dim);
}

/* Wrapper */
.folyamat-visual__wrapper{
  position: relative;
  width: 700px;
  height: 700px;
  margin: 0 auto;
}

/* Központi kör */
.folyamat-core{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:180px;
  height:180px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(0,212,255,0.4),
      rgba(0,212,255,0.1) 60%),
    rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 40px var(--c-cyan-glow);
  overflow:hidden;
}

.folyamat-core__inner{
  font-weight:700;
  font-size:20px;
}

/* Lépések */
.folyamat-step{
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  padding:18px;
  border-radius: var(--r-md);

  background: var(--c-cyan-glow);
  border:1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transition: transform var(--t-mid) var(--e-smooth);
  transform-origin: 50% 50%; /* vagy ezt akár el is hagyhatod */
}

.folyamat-step h3{
  margin:0 0 8px 0;
  font-size:16px;
}

.folyamat-step p{
  margin:0;
  font-size:14px;
  color: var(--c-text-dim);
}

:root{ --radius: 260px; }

/* minden step középre igazítva indul (translate -50 -50),
   aztán forgatjuk és a sugár mentén kitoljuk */
.step-1{ --angle: 0deg;   transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); }
.step-2{ --angle: 60deg;  transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); }
.step-3{ --angle: 120deg; transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); }
.step-4{ --angle: 180deg; transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); }
.step-5{ --angle: 240deg; transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); }
.step-6{ --angle: 300deg; transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); }

/* Hover lebegés – NEM BORÍTJA FEL AZ X POZÍCIÓT */

/* Reszponzív – mobilon vertikális */


/* =========================================================
   FOOTER
   ========================================================= */

.jog{
  text-align:center;
  padding: 20px;
  font-size: 14px;
  color: var(--c-white);
}

/* =========================
   WEBLAP-CSOMAGOK – HERO + EGYEDI LAYOUT
   (a te :root változóidra építve)
   ========================= */

.csomagok{
  max-width: var(--w-content);
  margin: var(--s-7) auto var(--s-9) auto;
  padding: 0 var(--s-4);

  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  align-items:start;
  
}

.csomag{
  position:relative;
  border-radius: var(--r-lg);
  overflow:hidden;
  padding: 28px;

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: var(--c-white);
  box-shadow: 0 18px 45px rgba(0,0,0,0.20);

  transition: transform var(--t-mid) var(--e-smooth),
              box-shadow var(--t-mid) var(--e-smooth),
              border-color var(--t-mid) var(--e-smooth);
}

.csomag::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--r-lg) + 2px);
  pointer-events:none;

  opacity:0;
  transition: opacity var(--t-mid) ease;

  background:
    radial-gradient(700px 240px at 18% 0%,
      rgba(0,212,255,0.22),
      rgba(0,0,0,0) 60%);
}

/* -------- HERO -------- */
.hero{
  grid-column: span 3;
  min-height: 360px;
  padding: 34px;
}

.hero .cta{
  font-size: 16px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
}

.csomag:not(.hero):hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-deep);
  border-color: rgba(0,212,255,0.25);
}

.csomag:not(.hero):hover::before{
  opacity:1;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:0.5;

  background:
    linear-gradient(
      120deg,
      rgba(0,0,0,0) 0%,
      rgba(0,212,255,0.25) 40%,
      rgba(0,0,0,0) 65%
    );

  transform: translateX(-50%) rotate(6deg);
  animation: heroGlowMove 8s ease-in-out infinite;
}

@keyframes heroGlowMove{
  0%{
    transform: translateX(-60%) rotate(6deg);
    opacity:0;
  }
  20%{
    opacity:0.6;
  }
  50%{
    opacity:0.7;
  }
  80%{
    opacity:0.6;
  }
  100%{
    transform: translateX(60%) rotate(6deg);
    opacity:0;
  }
}



/* =========================
   HERO – TRUST BADGE SOR
   ========================= */

   .hero-badges{
  display:flex;
  gap: var(--s-2);
  flex-wrap:wrap;
  margin-top: var(--s-3);
}

.hero-badges span{
  padding: 10px 14px;
  border-radius: var(--r-pill);
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  backdrop-filter: blur(10px);
  font-weight:700;
  font-size:14px;
}

.csomag__content{ max-width: 52ch; }

.csomag__eyebrow{
  margin:0 0 10px 0;
  opacity:.88;
  font-weight:700;
  letter-spacing:.6px;
}

.csomag__title{
  margin:0 0 12px 0;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.1;
}

.csomag__lead{
  margin:0 0 18px 0;
  color: var(--c-text-dim);
  line-height: 1.55;
}

/* HERO badge */
.csomag__badge{
  position:absolute;
  top: 18px;
  right: 18px;

  padding: 10px 14px;
  border-radius: var(--r-pill);

  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-weight: 800;
}

/* -------- EGYEDI ELRENDEZÉS (a meglévő class-okkal) -------- */
/* 1. sor: hero (2 col) + start (jobb felső) */
.start{
  grid-column: 1;
  grid-row: 2;
}

/* 2. sor: pro + brand (két kártya egymás mellett a hero alatt) */
.pro{
  grid-column: 2;
  grid-row: 2;
}
.brand{
  grid-column: 3;
  grid-row: 2;
}

/* 3. sor: marketing teljes szélességű “sáv” */

.marketing{
  grid-column: 1 / 3;
  grid-row: 3;

  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--s-4);
  align-items:center;
  grid-template-columns: minmax(1fr , 1fr)
}

.marketing::before{
  /* marketing kapjon egy kis “amber” fényt */
  background:
    radial-gradient(900px 300px at 22% 0%,
      rgba(245,158,11,0.16),
      rgba(0,0,0,0) 62%),
    radial-gradient(700px 240px at 85% 0%,
      rgba(0,212,255,0.18),
      rgba(0,0,0,0) 60%);
}

/* -------- Head + lista -------- */
.csomag__head h2{
  margin:0 0 8px 0;
  font-size:22px;
}

.csomag__head p{
  margin:0 0 16px 0;
  color: var(--c-text-dim);
  line-height: 1.45;
}

.csomag__list{
  margin:0 0 18px 0;
  padding:0;
  list-style:none;

  display:grid;
  gap: 10px;
}

.csomag__list li{
  position:relative;
  padding-left: 18px;
  color: rgba(255,255,255,0.86);
}

.csomag__list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color: rgba(0,212,255,0.95);
}

/* -------- Finom “szín-kódolás” kártyánként -------- */
.start{ border-color: rgba(0,212,255,0.22); }
.pro{ border-color: rgba(124,58,237,0.22); }
.brand{ border-color: rgba(245,158,11,0.22); }

.pro::before{
  background:
    radial-gradient(700px 240px at 18% 0%,
      rgba(124,58,237,0.18),
      rgba(0,0,0,0) 60%);
}
.brand::before{
  background:
    radial-gradient(700px 240px at 18% 0%,
      rgba(245,158,11,0.16),
      rgba(0,0,0,0) 60%);
}

/* CTA spacing */
.csomag .cta{ margin-top: 6px; }

/* -------- Reszponzív -------- */




.csomag .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 80%;

  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;

  color:#001018;
  background: rgba(0,212,255,0.92);
  border: 1px solid rgba(0,212,255,0.65);

  transition: transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              background var(--t-fast) ease;
}

.cta:hover{
  transform: translateY(-2px);
  background: rgba(0,212,255,1);
  box-shadow: 0 14px 35px rgba(0,212,255,0.28);
}

.cta:focus-visible{
  outline: 2px solid rgba(0, 212, 255, 0.9);
  outline-offset: 3px;
}

/* =========================================================
   WEBLAP-CSOMAGOK  - Árajánlat (2x3x2)
   ========================================================= */

/* =========================
   AJÁNLAT ŰRLAP – MAARTEN STYLE
   (glass + cyan, sötét háttérhez)
   ========================= */

.ajanlat{
  max-width: var(--w-services);
  margin: var(--s-7) auto var(--s-9);
  padding: 0 var(--s-4);
}

/* Kártya / konténer */
.ajanlat__inner{
  position: relative;
  overflow: hidden;

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);

  padding: clamp(20px, 2.4vw, 32px);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: var(--shadow-deep);
}

/* finom cyan glow a sarokban */
.ajanlat__inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;

  background:
    radial-gradient(900px 280px at 16% 0%,
      rgba(0,212,255,0.18),
      rgba(0,0,0,0) 62%),
    radial-gradient(700px 240px at 90% 10%,
      rgba(124,58,237,0.10),
      rgba(0,0,0,0) 60%);
  opacity: 1;
}

/* Head */
.ajanlat__head{
  position: relative;
  z-index: 1;
  margin-bottom: var(--s-4);
}

.ajanlat__head h2{
  margin: 0 0 8px 0;
  font-size: 28px;
  line-height: 1.2;
}

.ajanlat__head p{
  margin: 0;
  color: var(--c-text-dim);
  line-height: 1.55;
}

/* Grid */
.ajanlat__grid{
  position: relative;
  z-index: 1;

  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

/* mezők */
.field{ display:block; }
.field--full{ grid-column: 1 / -1; }

.field__label{
  display:block;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.2;
  color: rgba(255,255,255,0.92);
  letter-spacing: .2px;
}

/* input/select/textarea közös */
.field__input{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.24);

  color: var(--c-white);
  outline: none;
  font-size: 16px;
  font-family: var(--ff-base);

  transition: border-color var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              background var(--t-fast) ease;
}

/* placeholder */
.field__input::placeholder{
  color: rgba(255,255,255,0.55);
}

/* fókusz */
.field__input:focus{
  border-color: rgba(0,212,255,0.60);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.16);
  background: rgba(0,0,0,0.30);
}

/* textarea */
.field__textarea{
  resize: vertical;
  min-height: 140px;
}

/* Actions */
.ajanlat__actions{
  position: relative;
  z-index: 1;

  margin-top: var(--s-4);
  display:flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Gomb – egységes CTA rendszeredhez */
.ajanlat__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;

  color:#001018;
  background: var(--c-cyan-92);
  border: 1px solid var(--c-cyan-65);

  transition: transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              background var(--t-fast) ease;
}

/* hover – csak gombon */


.ajanlat__submit:focus-visible{
  outline: 2px solid rgba(0, 212, 255, 0.9);
  outline-offset: 3px;
}

/* megjegyzés */
.ajanlat__note{
  margin: 0;
  color: var(--c-text-dim);
  line-height: 1.45;
  max-width: 60ch;

  padding: 10px 12px;
  border-radius: var(--r-pill);

  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Reszponzív */


/* =========================================================
   KARBANTARTÁS (2x3x2)
   ========================================================= */

   /* ============================
   KARBANTARTÁS – PAGE DESIGN
   Cyan + 3 kiegészítő szín
   ============================ */

:root{
  --k-cyan:   #00D4FF;
  --k-lime:   #22C55E;
  --k-violet: #7C3AED;
  --k-amber:  #F59E0B;

  --k-glass: rgba(255,255,255,0.06);
  --k-border: rgba(255,255,255,0.10);
  --k-shadow: 0 25px 60px rgba(0,0,0,0.45);
}

.karb{
  max-width: var(--w-content);
  margin: 40px auto 120px;
  padding: 0 20px;
}

/* HERO */
.karb-hero{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--k-glass);
  border: 1px solid var(--k-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--k-shadow);
}

.karb-hero__inner{
  padding: 34px;
  position: relative;
  max-width: 72ch;
}

/* finom fényfolt */
.karb-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(0,212,255,0.25), rgba(0,0,0,0) 60%),
    radial-gradient(600px 220px at 90% 10%, rgba(124,58,237,0.18), rgba(0,0,0,0) 55%);
  pointer-events:none;
}

.karb-title{
  margin:0 0 12px 0;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.12;
}

.karb-lead{
  margin:0 0 18px 0;
  color: var(--c-text-dim);
  line-height: 1.55;
  max-width: 70ch;
}

.karb-hero__cta{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 14px;
  max-width: 400px;
}

/* A hero már position:relative; overflow:hidden; – jó. */
.karb-hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:0.65;

  background:
    linear-gradient(120deg,
      rgba(0,0,0,0) 0%,
      rgba(0,212,255,0.20) 35%,
      rgba(0,0,0,0) 60%);

  transform: translateX(-40%) rotate(6deg);
  animation: refSweep 7s var(--e-smooth) infinite;
}

@keyframes refSweep{
  0%   { transform: translateX(-55%) rotate(6deg); opacity: .0; }
  10%  { opacity: .55; }
  50%  { opacity: .75; }
  90%  { opacity: .55; }
  100% { transform: translateX(55%) rotate(6deg); opacity: 0; }
}

/* Ha valaki érzékeny animációra */


.karb-link{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 2px;
}
.karb-link:hover{
  border-bottom-color: rgba(0,212,255,0.7);
}

/* badge sor */
.karb-badges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: flex-start
}

.karb-badge{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  font-size: 14px;
}

.karb-badge--cyan{ box-shadow: 0 0 0 1px rgba(0,212,255,0.35) inset; }
.karb-badge--lime{ box-shadow: 0 0 0 1px rgba(34,197,94,0.35) inset; }
.karb-badge--amber{ box-shadow: 0 0 0 1px rgba(245,158,11,0.35) inset; }

/* CSOMAGOK */
.karb-plans{
  margin-top: 26px;
}

.karb-head{
  margin: 0 0 14px 0;
}
.karb-head h2{
  margin: 0 0 6px 0;
}
.karb-head p{
  margin: 0;
  color: var(--c-text-dim);
  line-height: 1.45;
}

.karb-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.karb-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 22px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform var(--t-mid) var(--e-smooth),
              box-shadow var(--t-mid) var(--e-smooth),
              border-color var(--t-mid) var(--e-smooth);
}

.karb-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--k-shadow);
}

.karb-card h3{
  margin: 0 0 8px 0;
  font-size: 22px;
}
.karb-desc{
  margin: 0 0 14px 0;
  color: var(--c-text-dim);
  line-height: 1.5;
}

.karb-list{
  margin: 0 0 18px 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
.karb-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,0.86);
}
.karb-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0,212,255,0.95);
}

/* Szín “accent” per kártya */
.karb-card--cyan:hover{ border-color: rgba(0,212,255,0.45); }
.karb-card--lime:hover{ border-color: rgba(34,197,94,0.45); }
.karb-card--violet:hover{ border-color: rgba(124,58,237,0.45); }

.karb-tag{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.35);
}

/* CTA gomb a kártyákon (cyan glow) */
.karb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;

  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;

  color:#001018;
  background: rgba(0,212,255,0.92);
  border: 1px solid rgba(0,212,255,0.65);

  transition: transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              background var(--t-fast) ease;
}

.karb-cta:hover{
  transform: translateY(-2px);
  background: rgba(0,212,255,1);
  box-shadow: 0 14px 35px rgba(0,212,255,0.28);
}

.karb-cta:focus-visible{
  outline: 2px solid rgba(0, 212, 255, 0.9);
  outline-offset: 3px;
}

/* Reszponzív */




/* ============================
  Ajánló program – Kártyák
   ============================ */

/* =========================================
   AJÁNLÓ PROGRAM OLDAL
   ========================================= */


.ref{
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-7) var(--s-4) var(--s-9);
}

/* =========================================
   HERO
   ========================================= */

.ref-hero{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-deep);
}

.ref-hero__inner{
  padding: clamp(22px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-6);
  align-items: center;
}

.ref-hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:0.65;

  background:
    linear-gradient(120deg,
      rgba(0,0,0,0) 0%,
      rgba(0,212,255,0.20) 35%,
      rgba(0,0,0,0) 60%);

  transform: translateX(-40%) rotate(6deg);
  animation: refSweep 7s var(--e-smooth) infinite;
}

@keyframes refSweep{
  0%   { transform: translateX(-55%) rotate(6deg); opacity: .0; }
  10%  { opacity: .55; }
  50%  { opacity: .75; }
  90%  { opacity: .55; }
  100% { transform: translateX(55%) rotate(6deg); opacity: 0; }
}

/* Ha valaki érzékeny animációra */


.ref-kicker{
  margin:0 0 var(--s-2) 0;
  font-weight: 800;
  opacity:.85;
}

.ref-title{
  margin:0 0 var(--s-2) 0;
  font-size: clamp(30px, 3vw, 52px);
  line-height: 1.1;
}

.ref-lead{
  margin:0 0 var(--s-4) 0;
  color: var(--c-text-dim);
  line-height:1.6;
}

/* CTA */

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius: var(--r-pill);
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform var(--t-fast) ease,
    box-shadow var(--t-fast) ease,
    background var(--t-fast) ease;
}

.cta--cyan{
  background: var(--c-cyan-92);
  border:1px solid var(--c-cyan-65);
  color:#001018;
}



/* =========================================
   HERO JOBB OLDALI INFO BLOKK
   ========================================= */

.ref-metrics{
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:18px;
}

.ref-metrics__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.ref-pill{
  border-radius: var(--r-md);
  padding:14px;
  background: rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.1);
}

.ref-pill b{
  display:block;
  margin-bottom:6px;
  font-size:18px;
}

.ref-pill span{
  color: var(--c-text-dim);
  font-size:14px;
}

/* =========================================
   LÉPÉSEK
   ========================================= */

.ref-section{
  margin-top: var(--s-8);
}

.ref-head{
  text-align:center;
  margin-bottom: var(--s-6);
}

.ref-steps{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s-5);
}

.ref-step{
  border-radius: var(--r-lg);
  padding:22px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform var(--t-mid) var(--e-smooth),
    box-shadow var(--t-mid) var(--e-smooth);
}



.ref-step__num{
  width:40px;
  height:40px;
  border-radius: var(--r-pill);
  display:grid;
  place-items:center;
  font-weight:900;
  background: rgba(0,212,255,0.18);
  border:1px solid rgba(0,212,255,0.35);
  margin-bottom:12px;
}

.ref-step p{
  color: var(--c-text-dim);
}

.ref-benefits{
  margin-top: var(--s-8);
}

.ref-benefits__wrap{
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.ref-benefits__inner{
  padding: clamp(18px, 2.2vw, 28px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}

.ref-benefits__title h2{
  margin:0 0 var(--s-2) 0;
}

.ref-benefits__title p{
  margin:0;
  color: var(--c-text-dim);
  line-height: 1.55;
}

.ref-benefits__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

.ref-benefit{
  position:relative;
  border-radius: var(--r-lg);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 18px;
  overflow:hidden;

  transition:
    transform var(--t-mid) var(--e-smooth),
    box-shadow var(--t-mid) var(--e-smooth),
    border-color var(--t-mid) var(--e-smooth);
}

.ref-benefit::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:0;
  transition: opacity var(--t-mid) ease;
  background:
    radial-gradient(600px 220px at 15% 0%,
      rgba(0,212,255,0.16),
      rgba(0,0,0,0) 60%);
}



.ref-benefit__icon{
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  display:grid;
  place-items:center;

  background: rgba(0,212,255,0.18);
  border: 1px solid rgba(0,212,255,0.35);

  margin-bottom: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}

.ref-benefit h3{
  margin:0 0 8px 0;
  font-size: 16px;
}

.ref-benefit p{
  margin:0;
  color: var(--c-text-dim);
  font-size: 14px;
  line-height: 1.45;
}

.ref-benefits__cta{
  margin-top: var(--s-4);
  display:flex;
  gap: var(--s-2);
  align-items:center;
  flex-wrap: wrap;
}

/* Responsive */



/* =========================================
   FORM
   ========================================= */

.ref-form{
  margin-top: var(--s-8);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-deep);
}

.ref-form__inner{
  padding: 28px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field--full{
  grid-column:1 / -1;
}

.input,
.select,
.textarea{
  border-radius: var(--r-md);
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  padding:12px;
  color: var(--c-white);
  font-family: var(--ff-base);
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color: rgba(0,212,255,0.6);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
  outline:none;
}

.textarea{
  min-height:120px;
  resize:vertical;
}

.ref-form__actions{
  grid-column: 1 / 1;
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-3);
}

/* =========================================
   RESPONSIVE
   ========================================= */






/* =========================
   KAPCSOLAT OLDAL – MAARTEN
   ========================= */

.contact{
  max-width: var(--w-content);
  margin: var(--s-7) auto var(--s-9);
  padding: 0 var(--s-4);
}

/* HERO */
.contact-hero{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: var(--shadow-deep);

  padding: clamp(22px, 3vw, 38px);

  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--s-6);
  align-items: start;
}

/* HERO fény (nem hoverre) */
.contact-hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:0.55;

  background:
    linear-gradient(120deg,
      rgba(0,0,0,0) 0%,
      rgba(0,212,255,0.22) 40%,
      rgba(0,0,0,0) 65%);

  transform: translateX(-55%) rotate(6deg);
  animation: heroGlowMove 8s ease-in-out infinite;
}

@keyframes heroGlowMove{
  0%{ transform: translateX(-60%) rotate(6deg); opacity:0; }
  20%{ opacity:.55; }
  50%{ opacity:.7; }
  80%{ opacity:.55; }
  100%{ transform: translateX(60%) rotate(6deg); opacity:0; }
}



.contact-kicker{
  margin:0 0 var(--s-2) 0;
  font-weight:800;
  opacity:.85;
  letter-spacing:.6px;
}

.contact-title{
  margin:0 0 var(--s-2) 0;
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.1;
}

.contact-lead{
  margin:0 0 var(--s-4) 0;
  color: var(--c-text-dim);
  line-height: 1.6;
}

.contact-badges{
  display:flex;
  flex-wrap:wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.contact-badges span{
  padding: 10px 14px;
  border-radius: var(--r-pill);
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 800;
  font-size: 14px;
}

/* Hero panel */
.contact-hero__panel{
  position: relative;
  z-index: 1;
  display:grid;
  gap: var(--s-3);
}

.contact-panel__box{
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-panel__label{
  margin:0 0 6px 0;
  color: var(--c-text-dim);
  font-size: 13px;
}

.contact-panel__value{
  margin:0;
  font-weight: 900;
  color: var(--c-white);
  text-decoration:none;
}

/* Grid cards */
.contact-grid{
  margin-top: var(--s-7);
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--s-5);
}

.contact-card{
  border-radius: var(--r-lg);
  padding: 22px;

  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform var(--t-mid) var(--e-smooth),
              box-shadow var(--t-mid) var(--e-smooth),
              border-color var(--t-mid) var(--e-smooth);
}



.contact-card h2{
  margin:0 0 10px 0;
  font-size: 20px;
}

.contact-card p{
  margin:0 0 12px 0;
  color: var(--c-text-dim);
  line-height: 1.55;
}

.contact-link{
  font-weight: 900;
  text-decoration:none;
  color: var(--c-cyan);
}

/* Form */
.contact-form{
  margin-top: var(--s-8);
  border-radius: var(--r-lg);
  padding: 26px;

  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: var(--shadow-deep);
}

.contact-form__head{
  margin-bottom: var(--s-5);
  text-align:center;
}

.contact-form__head p{
  margin:8px 0 0;
  color: var(--c-text-dim);
}

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.field{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.field--full{
  grid-column: 1 / -1;
}

.field label{
  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

.input, .select, .textarea{
  border-radius: var(--r-md);
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  padding: 12px;
  color: var(--c-white);
  font-family: var(--ff-base);
}

.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(0,212,255,0.6);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
  outline:none;
}

.textarea{
  min-height: 120px;
  resize: vertical;
}

.form-actions{
  grid-column: 1 / -1;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.form-note{
  margin:0;
  color: var(--c-text-dim);
  max-width: 58ch;
  line-height: 1.45;
}

/* Map */
.contact-map{
  margin-top: var(--s-7);
}

.contact-map__box{
  border-radius: var(--r-lg);
  padding: 22px;

  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.map-embed{
  margin-top: 14px;
  border-radius: var(--r-lg);
  min-height: 240px;
  display:grid;
  place-items:center;

  background: rgba(0,0,0,0.25);
  border:1px dashed rgba(255,255,255,0.18);
  color: var(--c-text-dim);
}

/* Responsive */



/* =========================================================
   NAV – SOCIAL (jobb felső)
   ========================================================= */

/* Alap: a .navbar__right lehet footerben is, ezért NEM abszolút itt */
.navbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Csak a fejlécben (nav-wrap) pozicionáljuk jobb felülre */
.nav-wrap .navbar__right{
  position:absolute;
  right: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
}

.nav-social{
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display:grid;
  place-items:center;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              border-color var(--t-fast) ease;
}

.nav-social svg{
  width: 20px;
  height: 20px;
  fill: rgba(255,255,255,0.9);
}



/* mobilon rejtsük, ha túlzsúfolt – igény szerint kikapcsolható */


/* =========================================================
   FOOTER – MAARTEN STYLE
   ========================================================= */

.site-footer{
  margin-top: var(--s-9);
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(19,19,32,0.35);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.site-footer__inner{
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 26px var(--s-4);

  display:grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: var(--s-6);
  align-items:start;
}

.site-footer__title{
  font-size: 18px;
  letter-spacing: .3px;
}

.site-footer__text{
  margin: 8px 0 0 0;
  color: var(--c-text-dim);
  line-height: 1.5;
}

.site-footer__links{
  display:grid;
  gap: 10px;
  justify-items:start;
}

.site-footer__links a,
.linklike{
  color: rgba(255,255,255,0.86);
  text-decoration:none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor:pointer;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.site-footer__links a:hover,
.linklike:hover{
  border-bottom-color: rgba(0,212,255,0.65);
}

.site-footer__small{
  margin:0;
  text-align:right;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}



/* =========================================================
   MODAL – jogi tartalmak
   ========================================================= */

.modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 10000;
}

.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(4px);
}

.modal__panel{
  position: relative;
  width: min(920px, calc(100% - 28px));
  margin: 60px auto;
  border-radius: var(--r-lg);
  overflow:hidden;

  background: rgba(19,19,32,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-deep);
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;

  padding: 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.modal__head h2{
  margin:0;
  font-size: 18px;
}

.modal__close{
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 22px;
  cursor:pointer;
}

.modal__body{
  padding: 18px 18px 22px;
  max-height: min(70vh, 720px);
  overflow:auto;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
}

.modal__body h3{
  margin: 18px 0 10px;
  font-size: 16px;
}

.modal__body ul,
.modal__body ol{
  margin: 8px 0 12px 18px;
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */

.cookie{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11000;

  padding: 14px;
}

.cookie__inner{
  max-width: min(980px, calc(100% - 12px));
  margin: 0 auto;

  border-radius: var(--r-lg);
  padding: 14px 14px;

  background: rgba(19,19,32,0.82);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: var(--shadow-deep);

  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
}

.cookie__text{
  margin:0;
  color: rgba(255,255,255,0.88);
  line-height: 1.45;
  max-width: 70ch;
}

.cookie__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.cookie__btn{
  padding: 10px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0,212,255,0.65);
  background: rgba(0,212,255,0.92);
  color:#001018;
  font-weight: 900;
  cursor:pointer;

  transition: transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease,
              background var(--t-fast) ease;
}



.cookie__btn--ghost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.90);
}

.cookie__btn--link{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.86);
  text-decoration: underline;
  font-weight: 800;
  padding: 10px 8px;
}


/* =========================================================
   RESPONSIVE STRATÉGIA / BREAKPOINT RENDSZER
   ---------------------------------------------------------
   - Desktop: alap stílusok (nincs media)
   - Tablet (<=900px): layout törések, hamburger + drawer, grid 2 oszlop, footer 1 oszlop
   - Mobil (<=768px): hero/slider magasság, formok 1 oszlop, extra szűkítés
   - Kis mobil (<=520px): 1 oszlopos kártyák, gombok teljes szélesség
   - Kis mobil (<=600px): ahol eredetileg 600/620 volt, itt kezeljük
   - Akadálymentesség: prefers-reduced-motion a végén
   ========================================================= */

/* =========================================================
   FŐOLDAL – RESPONSIVE FIX (csak welcome + szolgáltatások + garancia)
   ========================================================= */

/* -------- WELCOME INTRO: mindig fullscreen (ne legyen 50vh!) -------- */
/* (TÖRÖLD ezt, ha nálad még megvan:)
@media (max-width:768px){ #welcome-intro{ height: 50vh; } }
*/

/* ===== 900px alatt: scrollra nyíljon (JS teszi rá az .is-open-t) ===== */
@media (max-width: 900px){

  /* ugyanaz, mint hover glow */
  .garancia-card.is-open::after{ opacity:1; }

  /* ugyanaz, mint hover blur overlay */
  .garancia-card.is-open::before{
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
  }

  /* ugyanaz, mint hover emelés */
  .garancia-card.is-open{
    transform: translateY(-10px);
    box-shadow: var(--shadow-deep);
  }

  /* ugyanaz, mint hover tartalom feljön */
  .garancia-card.is-open .garancia-overlay{
    transform: translateY(0);
    opacity: 1;
  }

  /* 900 alatt hover ne kavarjon (DevTools mobil nézetben se) */
  .garancia-card:hover{
    transform: none;
    box-shadow: none;
  }
  .garancia-card:hover::after{ opacity:0; }
  .garancia-card:hover::before{
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
  }
  .garancia-card:hover .garancia-overlay{
    transform: translateY(40px);
    opacity:0;
  }
}

/* -------- SZOLGÁLTATÁSOK: 900 alatt stabil (nem ugrál), minden látszik -------- */
@media (max-width: 900px){

  .szolgaltatasok{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 16px;
  }

  /* Mobil/tablet: ne mozogjon hoverre, ne animáljon layoutot */
  .szolg{
    margin: 0;
    transform: none !important;
    transition: box-shadow var(--t-mid) var(--e-smooth),
                border-color var(--t-mid) var(--e-smooth) !important;
    animation: szolgFloat 4.8s ease-in-out infinite;
    will-change: box-shadow;
  }

  @keyframes szolgFloat{
    0%, 100%{ box-shadow: 0 15px 40px rgba(0,0,0,0.45); }
    50%{ box-shadow: 0 18px 46px rgba(0,0,0,0.55); }
  }

  .szolg:hover{
    transform: none !important;
  }

  /* 900 alatt mindig látszódjon a teljes tartalom */
  .szolg__more{
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ha nagyon kicsi mobilon feszesebb kell */
@media (max-width: 520px){
  .szolg{ padding: 22px; }
  .szolgcim{ font-size: 20px; }
}

/* -------- SZOLGÁLTATÁSOK: 901 felett (DESKTOP) – állítsuk vissza a hover/kinyílást -------- */
@media (min-width: 901px){

  /* A kártya hover animációja vissza */
  .szolg{
    animation: none; /* a lebegés csak mobil/tablet legyen */
    transition:
      transform var(--t-mid) var(--e-smooth),
      box-shadow var(--t-mid) var(--e-smooth),
      border-color var(--t-mid) var(--e-smooth) !important;
  }

  .szolg:hover{
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-deep);
  }

  /* Expand (hoverre nyíljon ki, ahogy eredetileg) */
  .szolg__more{
    max-height: 0;
    opacity: 0;
    transform: translateY(6px);
    transition:
      max-height var(--t-mid) var(--e-smooth),
      opacity var(--t-mid) var(--e-smooth),
      transform var(--t-mid) var(--e-smooth) !important;
  }

  .szolg--expand:hover .szolg__more,
  .szolg--expand:focus-within .szolg__more{
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
  }
}


/* -------- GARANCIA: 900px alatt stabil grid -------- */
@media (max-width: 900px){

  .garancia-section{
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 18px;
  }

  /* kis vizuális finomítás tabletre */
  .garancia-card{
    min-height: 260px;
  }
}


/* -------- GARANCIA: 768px alatt egymás alatt, középre -------- */
@media (max-width: 768px){

  .garancia-section{
    grid-template-columns: 1fr;
    justify-items: center;   /* középre igazítja a kártyákat */
    align-items: center;
    gap: 20px;
  }

  /* kártyák középre és mobil szélesség */
  .garancia-card{
    width: min(520px, 100%);
    margin: 0 auto;
  }

  /* alap anim állapot */
  .garancia-section > *{
    opacity: 0.92;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  /* JS által aktivált állapot */
  .garancia-section > *.is-open{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== GARANCIA: 900 alatt “active card” kiemelés (layout-mentes) ===== */
@media (max-width: 900px){

  /* alap állapot: picit visszafogottabb */
  .garancia-card{
    opacity: 0.88;
    transform: translateZ(0) scale(0.98);
    transition: transform 0.35s ease, opacity 0.35s ease;
    will-change: transform, opacity;
  }

  /* a középen lévő (JS: .is-open) legyen kiemelve */
  .garancia-card.is-open{
    opacity: 1;
    transform: translateZ(0) scale(1.03);
  }

  /* ha nincs is-open (tehát épp nincs középen semmi), minden “normal” marad */
}

/* =========================================
   GARANCIA SECTION – RESPONSIVE LAYOUT FIX
   (HTML: .garancia-section > .garancia-card...)
   ========================================= */

/* 900px alatt: 2 oszlop, középre */
@media (max-width: 900px){
  .garancia-section{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    justify-content: center;
    align-items: start;
  }
  .garancia-card{
    width: 100%;
  }

  /* A 3. kártya középre kerüljön (2+1 elrendezés) */
  .garancia-section .garancia-card:nth-child(3){
    grid-column: 1 / -1;
    justify-self: center;
    width: min(450px, 100%);
  }
}

/* 768px alatt: 1 oszlop, középre */
@media (max-width: 768px){
  .garancia-section{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
  }

  .garancia-section .garancia-card{
    width: min(520px, 100%);
  }
}


/* -------- Akadálymentesség -------- */
@media (prefers-reduced-motion: reduce){
  .szolg,
  .szolg__more,
  .garancia-section > *{
    transition: none !important;
    animation: none !important;
  }
}


@media (min-width: 901px){
  /* Desktopon a footer mobil social ne jelenjen meg */
  .site-footer .navbar__right--mobile{ display:none !important; }
}

@media (max-width: 900px){
  /* NAV: 900px alatt a felső social eltűnik, hamburger látszik (a hamburger/drawer szabályaid mellett) */
  header .navbar__right{ display:none !important; }

  /* FOOTER: 900px alatt a footerben lévő .navbar__right--mobile mindig látszódjon a .jog felett */
  .site-footer .navbar__right--mobile{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  .site-footer .navbar__right--mobile .nav-social{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius: var(--r-pill);
  }
}

@media (max-width: 900px){
  /* Mobil layout: logó balra, hamburger jobbra */
  .navbar{ justify-content: space-between; }
  .logo{ position: static; transform: none; margin: 0; }
  .logo img{ width: 110px; height: auto; }

  .hamburger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
    margin-left: auto;
  }

  /* Drawer menü */
  .navbar-nav{
    position: fixed;
    top: 0;
    right: -110%;
    left: auto;
    transform: none;

    height: 100vh;
    width: min(86vw, 320px);

    display:flex;
    flex-direction: column;
    align-items: stretch;

    padding: 96px 18px 18px;
    gap: 12px;

    background: rgba(19, 19, 32, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition: right 0.25s ease;
    z-index: 10000;
  }

  .navbar-nav.active{ right: 0; }

  .nav-link{
    justify-content: flex-start;
    padding: 14px 14px;
    border-radius: 14px;
    border-bottom: none;
    background: rgba(255,255,255,0.06);
  }
  .nav-link:hover{ border-bottom-color: transparent; background: rgba(255,255,255,0.10); }
}


@media (hover:hover) and (pointer:fine){
  .folyamat-step:hover{
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translate(calc(var(--radius) + 10px))
      rotate(calc(-1 * var(--angle)));
  }
}

@media (max-width: 900px){
  .folyamat-visual__wrapper{
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:var(--s-4);
  }

  .folyamat-core{
    position:relative;
    transform:none;
    margin: 200px auto 0 auto;
    overflow: hidden;
  }

  .folyamat-core::before{
  content:"";
  position:absolute;
  inset:-35%;
  border-radius:50%;
  background: conic-gradient(
    transparent 0deg,
    rgba(0,212,255,0.85) 45deg,
    transparent 110deg
  );
  filter: blur(14px);
  opacity: 0.7;
  animation: rotateGlow 5s linear infinite;
}

@keyframes rotateGlow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

  .folyamat-step{
    position:relative;
    width:100%;
    transform:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero::after{
    animation:none;
    opacity:0.25;
  }
}

@media (max-width: 900px){
  .csomagok{
    grid-template-columns: 1fr 1fr;
  }

  .hero{ grid-column: 1 / -1; }
  .start, .pro, .brand{ grid-column: auto; grid-row: auto; }

  .marketing{
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .csomagok{
    grid-template-columns: 1fr;
  }

  .hero{ padding: 24px; }
  .csomag{ padding: 22px; }

  /* hero badge ne takarja a címet */
  .csomag__badge{
    position: static;
    display:inline-flex;
    margin-top: 12px;
  }

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

@media (hover:hover) and (pointer:fine){
  .ajanlat__submit:hover{
    transform: translateY(-2px);
    background: var(--c-cyan);
    box-shadow: 0 14px 35px var(--c-cyan-glow);
  }
}

@media (max-width: 768px){
  .ajanlat__grid{
    grid-template-columns: 1fr;
  }
  .ajanlat__submit{
    width: 100%;
  }
  .ajanlat__actions{
    gap: var(--s-2);
  }
  .ajanlat__note{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .karb-hero::after{ animation: none; opacity: .25; }
}

@media (max-width: 900px){
  .karb-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px){
  .karb-hero__inner{ padding: 22px; }
  .karb-grid{ grid-template-columns: 1fr; }
  .karb-hero__cta .cta{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .ref-hero::after{ animation: none; opacity: .25; }
}

@media (hover:hover) and (pointer:fine){
  .cta--cyan:hover{
    transform: translateY(-3px);
    background: var(--c-cyan);
    box-shadow: 0 14px 35px var(--c-cyan-glow);
  }
}

@media (hover:hover) and (pointer:fine){
  .ref-step:hover{
    transform: translateY(-8px);
    box-shadow: var(--shadow-deep);
  }
}

@media (hover:hover) and (pointer:fine){
  .ref-benefit:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow-deep);
    border-color: rgba(0,212,255,0.25);
  }
  .ref-benefit:hover::before{ opacity:1; }
}

@media (max-width: 900px){
  .ref-benefits__inner{ grid-template-columns: 1fr; }
  .ref-benefits__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px){
  .ref-benefits__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .ref-hero__inner{
    grid-template-columns:1fr;
  }
  .ref-steps{
    grid-template-columns:1fr 1fr;
  }
  .ref-form__inner{
    grid-template-columns:1fr;
  }
}

@media (max-width: 520px){
  .ref-steps{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .contact-hero::after{ animation:none; opacity:.22; }
}

@media (hover:hover) and (pointer:fine){
  .contact-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow-deep);
    border-color: rgba(0,212,255,0.25);
  }
}

@media (max-width: 900px){
  .contact-hero{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .form{ grid-template-columns: 1fr; }
}

@media (hover:hover) and (pointer:fine){
  .nav-social:hover{
    transform: translateY(-2px);
    border-color: rgba(0,212,255,0.45);
    box-shadow: 0 14px 35px rgba(0,212,255,0.18);
  }
}

@media (max-width: 900px){
  .site-footer__inner{
    grid-template-columns: 1fr;
  }
  .site-footer__small{ text-align:left; }
}

@media (hover:hover) and (pointer:fine){
  .cookie__btn:hover{
    transform: translateY(-2px);
    background: rgba(0,212,255,1);
    box-shadow: 0 14px 35px rgba(0,212,255,0.20);
  }
}

@media (max-width: 768px){
  .cookie__inner{
    flex-direction: column;
    align-items: stretch;
  }
  .cookie__actions{ justify-content:flex-start; }
}



/* =========================================================
   RESPONSIVE – MOLINO & CTA FINOMHANGOLÁS (csak breakpointok)
   Megjegyzés: ez a blokk a fájl LEGALJÁN van, hogy minden korábbi
   szabályt biztonsággal felülírjon.
   ========================================================= */



  /* Ajánlatkérő gombos sor mobilon */
  .ajanlat__actions{
    flex-direction: column;
    align-items: stretch;
  }

  /* Csomag CTA-k ne maradjanak 80%-on */
  .csomag .cta{
    width: 100% !important;
  }


/* =========================================================
   FOLYAMAT-VISUAL (Az ajánlatkéréstől a megvalósításig) – RESPONSIVE FIX
   Cél: ugyanaz az "orbit" kinézet maradjon, csak skálázva.
   ========================================================= */

@media (max-width: 900px){
  .folyamat-visual__wrapper{
    width: min(640px, 100%);
    height: min(640px, 100vw);
    --radius: 210px;
  }
  .folyamat-core{ width: 160px; height: 160px; }
  .folyamat-core__inner{ font-size: 18px; }
  .folyamat-step{ width: 180px; padding: 16px; }
}

@media (max-width: 768px){
  .folyamat-visual__wrapper{
    width: min(540px, 100%);
    height: min(540px, 100vw);
    --radius: 185px;
  }
  .folyamat-core{ width: 140px; height: 140px; }
  .folyamat-core__inner{ font-size: 17px; }
  .folyamat-step{ width: 170px; padding: 14px; }
  .folyamat-step h3{ font-size: 15px; }
  .folyamat-step p{ font-size: 13px; }
}

/* 600 alatt már nagyon szűk: még megtartjuk a kör elrendezést, de tovább kicsinyítjük */
@media (max-width: 600px){
  .folyamat-visual__wrapper{
    width: min(440px, 100%);
    height: min(440px, 100vw);
    --radius: 150px;
  }
  .folyamat-core{ width: 120px; height: 120px; }
  .folyamat-core__inner{ font-size: 16px; }
  .folyamat-step{ width: 150px; padding: 12px; }
  .folyamat-step h3{ font-size: 14px; }
  .folyamat-step p{ font-size: 12px; }
}

/* 480 alatt a kártyák már ütközhetnek: átváltunk vertikális listára, de ugyanazzal a stílussal */
@media (max-width: 480px){
  .folyamat-visual__wrapper{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .folyamat-core{
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 8px;
  }

  .folyamat-step{
    position: static;
    transform: none !important;
    width: 100%;
  }

  /* radius itt már nem számít, de legyen kis érték, hogy ne öröklődjön máshova */
  .folyamat-visual__wrapper{ --radius: 0px; }
}


/* =========================================================
   FOLYAMAT-VISUAL – ORBIT OVERRIDE (csak media stratégia)
   Fix: a korábbi @media (max-width:900px) listásítás felülírta az orbitot.
   Cél: 900px-től 481px-ig maradjon orbit (ugyanaz a kinézet), 480px alatt lista.
   ========================================================= */

/* 900 -> 481: orbit mód kényszerítése (felülírja a korábbi "grid/lista" media blokkot) */
@media (max-width: 900px) and (min-width: 481px){

  .folyamat-visual__wrapper{
    position: relative !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    height: min(640px, 100vw) !important;
    width: min(640px, 100%) !important;
    margin: 0 auto !important;
    --radius: 210px;
  }

  .folyamat-core{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;         /* eltünteti a 200px-es “üres” tolást */
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
  }

  .folyamat-core__inner{ font-size: 18px; }

  .folyamat-visual__wrapper .folyamat-step{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 180px !important;
    padding: 16px !important;

    /* felülírja a korábbi transform:none !important szabályt */
    transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) !important;
  }
}

/* 768 -> 601: kompaktabb orbit */
@media (max-width: 768px) and (min-width: 601px){
  .folyamat-visual__wrapper{
    height: min(540px, 100vw) !important;
    width: min(540px, 100%) !important;
    --radius: 185px;
  }
  .folyamat-core{ width: 140px !important; height: 140px !important; }
  .folyamat-core__inner{ font-size: 17px; }
  .folyamat-visual__wrapper .folyamat-step{ width: 170px !important; padding: 14px !important; }
  .folyamat-step h3{ font-size: 15px; }
  .folyamat-step p{ font-size: 13px; }
}

/* 600 -> 481: még kompaktabb orbit */
@media (max-width: 600px) and (min-width: 481px){
  .folyamat-visual__wrapper{
    height: min(440px, 100vw) !important;
    width: min(440px, 100%) !important;
    --radius: 150px;
  }
  .folyamat-core{ width: 120px !important; height: 120px !important; }
  .folyamat-core__inner{ font-size: 16px; }
  .folyamat-visual__wrapper .folyamat-step{ width: 150px !important; padding: 12px !important; }
  .folyamat-step h3{ font-size: 14px; }
  .folyamat-step p{ font-size: 12px; }
}