/* wpspro.eu – STALIS landing page
   A méretek az 1920 px széles terv arányait követik (vw), alsó/felső korláttal. */

@font-face {
  font-family: "Casablanca URW";
  src: url("../fonts/casablanca-urw-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Casablanca URW";
  src: url("../fonts/casablanca-urw-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Casablanca URW";
  src: url("../fonts/casablanca-urw-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #007dfe;        /* elválasztó vonalak, címsor */
  --blue-badge: #007dcd;  /* logó-badge */
  --blue-pill: #0681cf;   /* jellemző-címkék */
  --dark: #313234;        /* sötét szekció háttere */
  --ink: #2f3033;
  --white: #fff;
  --gutter: max(16px, 10.6vw);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dark);
  color: var(--white);
  font-family: "Casablanca URW", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  font-weight: 500;
  line-height: 1.3;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
p, h1, h2, ul { margin: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  aspect-ratio: 1920 / 1070;
  overflow: hidden;
  background: #8fd3ee;
  border-bottom: max(4px, 0.52vw) solid var(--blue);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.badge {
  position: absolute;
  top: 0;
  left: 5.65%;
  width: 14.3%;
  height: 29.5%;            /* 316 / 1070 */
  background: var(--blue-badge);
  color: var(--white);
  border-radius: 0 0 22% 22% / 0 0 19% 19%;
  box-shadow: 0 0.4vw 1.4vw rgb(0 40 80 / 0.18);
}
.badge .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  transform: translate(-48%, -50%);
}
.hero__text {
  position: absolute;
  left: 14.9%;
  top: 34.5%;
}
.hero__title {
  font-weight: 300;
  font-size: 10.6vw;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__tagline {
  display: inline-block;
  margin-top: 1.9vw;
  margin-left: -1.45vw;
  padding: 0.75vw 1.45vw 0.55vw;
  background: var(--dark);
  font-weight: 300;
  font-size: 3.4vw;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Bevezető (sötét) ---------- */
.intro {
  padding: clamp(48px, 7.4vw, 142px) var(--gutter) clamp(56px, 8.3vw, 160px);
  text-align: center;
}
.intro__copy {
  max-width: 1490px;
  margin: 0 auto;
  text-align: left;
  font-size: clamp(16px, 2.3vw, 44px);
  line-height: 1.3;
  text-transform: uppercase;
}
.intro__copy p + p { margin-top: 1.3em; }

.features {
  list-style: none;
  padding: 0;
  margin: clamp(48px, 8.4vw, 160px) auto 0;
  max-width: 1540px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 60px);
}
.features li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.features img { width: clamp(72px, 9.6vw, 184px); }
.features span {
  display: block;
  width: clamp(120px, 13vw, 250px);
  margin-top: 0.4vw;
  padding: 0.45em 0.6em 0.3em;
  border-radius: 999px;
  background: var(--blue-pill);
  font-weight: 300;
  font-size: clamp(14px, 2.1vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
}

.exploded {
  width: 59.1%;
  max-width: 1135px;
  margin: clamp(48px, 14vw, 270px) auto 0;
}

.intro__claim {
  margin-top: clamp(32px, 5.3vw, 100px);
  font-size: clamp(18px, 3.1vw, 60px);
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---------- Telepítési fotó ---------- */
.installation img { width: 100%; }

/* ---------- Arculat (fehér) ---------- */
.identity {
  background: var(--white);
  border-bottom: max(6px, 1.25vw) solid var(--blue);
  padding: clamp(40px, 6vw, 115px) var(--gutter) clamp(56px, 9.5vw, 180px);
  text-align: center;
}
.identity h2 {
  max-width: 11.5em;
  margin: 0 auto;
  color: var(--blue);
  font-weight: 700;
  font-size: clamp(34px, 7.6vw, 146px);
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- Lábléc ---------- */
.footer {
  aspect-ratio: 1920 / 794;
  min-height: 300px;
  padding: clamp(40px, 6.8vw, 130px) 5.8vw 48px;
  background: var(--dark) image-set(
      url("../img/footer-1920.webp") type("image/webp") 1x,
      url("../img/footer-1920.jpg") type("image/jpeg") 1x
    ) center / cover no-repeat;
}
.footer__logo { width: clamp(96px, 12.1vw, 232px); color: var(--white); }
.footer__title {
  margin-top: clamp(16px, 2.6vw, 50px);
  font-weight: 300;
  font-size: clamp(40px, 7.4vw, 142px);
  line-height: 1;
  text-transform: uppercase;
}
.footer__company {
  margin-top: clamp(16px, 2.8vw, 54px);
  color: var(--blue);
  font-size: clamp(16px, 2.3vw, 44px);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .footer { background-image: image-set(
      url("../img/footer-1280.webp") type("image/webp") 1x,
      url("../img/footer-1280.jpg") type("image/jpeg") 1x); }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .hero { aspect-ratio: auto; height: 150vw; max-height: 720px; }
  .hero__media img { object-position: 76% 100%; }
  .hero::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgb(0 30 55 / 0.45)); }
  .hero__text { z-index: 1; }
  .badge { left: 16px; width: 84px; height: 97px; }
  .hero__text { left: 16px; top: auto; bottom: 7vw; }
  .hero__title { font-size: 22vw; color: var(--white); text-shadow: 0 2px 18px rgb(0 30 60 / 0.35); }
  .hero__tagline { font-size: 6.6vw; margin: 2vw 0 0; padding: 1.4vw 3vw 1vw; }

  .features { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .features img { width: 96px; }
  .features span { width: 150px; }
  .exploded { width: 100%; }
  .footer { aspect-ratio: auto; min-height: 0; padding: 56px 16px 64px;
    background-image: image-set(url("../img/footer-800.webp") type("image/webp") 1x, url("../img/footer-800.jpg") type("image/jpeg") 1x); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}