body{
  background:var(--page-bg);
  padding:0;
}

.skip-link{
  position:absolute;
  top:-48px;
  left:12px;
  background:var(--blue);
  color:var(--chalk);
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  padding:10px 16px;
  border-radius:6px;
  text-decoration:none;
  z-index:100;
  transition:top 0.15s ease;
}
.skip-link:focus{top:12px;}

a:focus-visible, .skip-link:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

.hero{
  padding:0;
  background:var(--blue-dark);
}
.hero-inner{
  max-width:1320px;
  margin:0 auto;
  padding:34px 24px 28px;
}
.hero-top{
  display:grid;
  grid-template-columns:minmax(0,596px) minmax(0,400px);
  justify-content:start;
  align-items:center;
  gap:36px;
}
.hero-top > *{min-width:0;}

.hero-copy{
  max-width:596px;
  padding-top:0;
  padding-left:36px;
  position:relative;
  isolation:isolate;
}

/* Halvány háttér-dísz a szöveg alatt, középen – nem növeli a magasságot. */
.hero-house{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:clamp(160px,52%,260px);
  height:auto;
  opacity:0.11;
  z-index:-1;
  pointer-events:none;
}

.hero-visual{position:relative;max-width:420px;margin-left:0;}
.hero-visual img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width:900px){
  .hero-top{grid-template-columns:1fr;gap:8px;text-align:center;}
  .hero-copy{max-width:520px;margin:0 auto;padding-top:0;}
  .hero-visual{order:-1;max-width:260px;margin:0 auto 8px;}
}
@media (max-width:380px){
  .hero-visual{max-width:200px;}
}

.hero .eyebrow{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--blue);
  margin:0 0 10px;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;
  margin:0 0 12px;
  letter-spacing:-1.2px;
  color:var(--chalk);
}
.hero h1 .hl{color:var(--blue);}
.hero p{
  max-width:460px;
  margin:0;
  color:rgba(255,255,255,0.72);
  font-size:17px;
  line-height:1.6;
}
@media (max-width:900px){
  .hero p{margin-left:auto;margin-right:auto;}
}
.hero a.cta, .hero .cta{
  display:block;
  width:fit-content;
  margin:22px auto 0;
  text-align:center;
  background:var(--chalk);
  color:var(--blue-dark);
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:0.2px;
  font-size:17px;
  text-decoration:none;
  padding:13px 38px;
  border-radius:6px;
  border:1.5px solid var(--chalk);
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  transition:background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  cursor:pointer;
}
.hero a.cta:hover, .hero .cta:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--chalk);
  transform:translateY(1px);
}
@media (max-width:900px){
  .hero a.cta, .hero .cta{margin:26px auto 0;}
}

hr{
  border:none;
  border-top:1px solid var(--border);
  max-width:480px;
  margin:0 auto;
}

@media (max-width:480px){
  .hero-inner{width:100%;padding:24px 14px 30px;overflow:hidden;}
  .hero h1{font-size:clamp(27px,9vw,36px);overflow-wrap:anywhere;}
  .hero p{font-size:16px;}
  .hero .eyebrow{font-size:13px;letter-spacing:1px;overflow-wrap:anywhere;}
  .hero a.cta, .hero .cta{width:100%;max-width:320px;padding:12px 16px;white-space:normal;}
  .contact-text{overflow-wrap:anywhere;}
}

@media (prefers-reduced-motion: reduce){
  .hero a.cta, .skip-link, .contact-btn, .trust-item{transition:none;}
}