/* Start custom CSS for html, class: .elementor-element-c7952d2 *//* ================================================================
   KLIMAKUPON.HU — "KAPCSOLAT" OLDAL HERO CSS
   Fájl: 14-kapcsolat-hero.css        Blokkok: 14.0 – 14.4
   HOVA: Megjelenés → Testreszabás → További CSS
         (ugyanoda, ahol a 01-header.css / 02-footer.css /
         03-klimak-hero.css is van — NE widget "Egyéni CSS"-be)
   ================================================================ */


/* ================================================
   14.0 — TOKENEK
================================================ */
.cst-kp-kah{
  --kph-font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kph-primary:#0D6EFD;
  --kph-primary-dark:#0B5ED7;
  --kph-ink:#0B2D5B;
  --kph-body:#6B7280;
  --kph-white:#FFFFFF;
  --kph-blue-050:#E6F2FF;
  --kph-line:#E4EAF1;
  --kph-max:1360px;

  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--kph-blue-050) 0%, #FFFFFF 100%);
  font-family:var(--kph-font);
}
.cst-kp-kah *{ box-sizing:border-box; }
.cst-kp-kah a{ text-decoration:none !important; }
.cst-kp-kah svg{ display:block; }
.cst-kp-kah a:focus-visible{
  outline:3px solid var(--kph-primary) !important;
  outline-offset:2px;
}

.cst-kp-kah__wrap{
  position:relative; z-index:1;
  max-width:var(--kph-max); margin:0 auto; padding:64px 32px;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:48px;
}


/* ================================================
   14.1 — TARTALOM (bal oldal)
================================================ */
.cst-kp-kah__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px; padding:7px 15px 7px 12px;
  background:var(--kph-white);
  border:1px solid rgba(13,110,253,.2); border-radius:100px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--kph-primary);
}
.cst-kp-kah__eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--kph-primary); flex:0 0 auto;
}

.cst-kp-kah__title{
  margin:0 0 16px;
  font-family:var(--kph-font); font-weight:800;
  font-size:clamp(30px,3.6vw,46px); line-height:1.15; letter-spacing:-.015em;
  color:var(--kph-ink) !important;
}
.cst-kp-kah__title em{ font-style:normal; color:var(--kph-primary) !important; }

.cst-kp-kah__lead{
  margin:0 0 30px;
  font-size:16.5px; line-height:1.7; color:var(--kph-body);
  max-width:52ch;
}

.cst-kp-kah__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:32px; }

.cst-kp-kah__btn{
  display:inline-flex; align-items:center; gap:9px;
  height:54px; padding:0 26px;
  font-family:var(--kph-font); font-size:15px; font-weight:700;
  border-radius:999px;
  transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cst-kp-kah__btn svg{ width:17px; height:17px; }
.cst-kp-kah__btn--primary{
  color:var(--kph-white) !important;
  background:var(--kph-primary);
  box-shadow:0 16px 32px -16px rgba(13,110,253,.65);
}
.cst-kp-kah__btn--primary:hover{ background:var(--kph-primary-dark); transform:translateY(-2px); }

/* --- Telefon / e-mail gyorslinkek --- */
.cst-kp-kah__contact{
  display:flex; flex-wrap:wrap; gap:14px;
  list-style:none; margin:0; padding:0;
}
.cst-kp-kah__contact a{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px;
  background:var(--kph-white);
  border:1px solid var(--kph-line); border-radius:14px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cst-kp-kah__contact a:hover{
  border-color:var(--kph-primary);
  box-shadow:0 14px 28px -18px rgba(13,110,253,.4);
  transform:translateY(-1px);
}
.cst-kp-kah__contacticon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  background:var(--kph-blue-050); border-radius:10px;
  color:var(--kph-primary);
}
.cst-kp-kah__contacticon svg{ width:18px; height:18px; }
.cst-kp-kah__contact strong{
  display:block; margin-bottom:2px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--kph-body);
}
.cst-kp-kah__contact a > span:last-child{
  font-size:14.5px; font-weight:700; color:var(--kph-ink);
  line-height:1.35;
}


/* ================================================
   14.2 — VIZUÁL (jobb oldal — chat-buborék illusztráció)
================================================ */
.cst-kp-kah__visual{ position:relative; display:flex; justify-content:center; }

.cst-kp-kah__visualcard{
  position:relative;
  width:100%; max-width:420px;
  padding:44px 28px;
  background:var(--kph-white);
  border:1px solid var(--kph-line); border-radius:28px;
  box-shadow:0 40px 80px -40px rgba(11,45,91,.35);
}
.cst-kp-kah__bubble{ width:100%; height:auto; }

.cst-kp-kah__chip{
  position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:14px 20px;
  background:var(--kph-primary); color:var(--kph-white);
  border-radius:16px;
  box-shadow:0 20px 40px -18px rgba(13,110,253,.75);
  white-space:nowrap;
}
.cst-kp-kah__chip svg{ width:22px; height:22px; flex:0 0 auto; }
.cst-kp-kah__chip span{ font-size:13px; font-weight:700; line-height:1.35; }

.cst-kp-kah::before{
  content:'';
  position:absolute; top:-120px; right:-120px; z-index:0;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(13,110,253,.10) 0%, rgba(13,110,253,0) 70%);
}


/* ================================================
   14.3 — REZSPONZÍV
================================================ */
@media (max-width:1024px){
  .cst-kp-kah__wrap{ padding:52px 24px; gap:36px; }
  .cst-kp-kah__visualcard{ max-width:340px; padding:32px 22px; }
}

@media (max-width:860px){
  .cst-kp-kah__wrap{ grid-template-columns:1fr; }
  .cst-kp-kah__visual{ order:-1; margin-bottom:8px; }
  .cst-kp-kah__visualcard{ max-width:300px; }
  .cst-kp-kah__lead{ max-width:none; }
}

@media (max-width:600px){
  .cst-kp-kah__wrap{ padding:40px 16px 56px; }
  .cst-kp-kah__btn{ width:100%; justify-content:center; }
  .cst-kp-kah__contact{ flex-direction:column; }
  .cst-kp-kah__contact a{ width:100%; }
  .cst-kp-kah__chip{ position:static; transform:none; margin-top:20px; justify-content:center; }
  .cst-kp-kah__visualcard{ max-width:none; padding-bottom:24px; }
}

@media (prefers-reduced-motion:reduce){
  .cst-kp-kah__btn,
  .cst-kp-kah__contact a{ transition:none !important; }
}/* End custom CSS */