/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.hero__bg,
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__bg-img {
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 92vw;
}

/* =========================================================
   Sizing is calibrated pixel-for-pixel against the two source
   mockups (WEB & MOBILE/1920X1080.png and 1080X1920.png).

   Both mockups place the exact same artwork (SVG/SVG.svg, native
   628x887) at 1:1 scale, horizontally centered — confirmed by
   diffing PNG/1920X1080.png and PNG/1080X1920.png (the plain
   backgrounds) against the two WEB & MOBILE mockups: the only
   difference is a 628x887 block, at (124px from top) on desktop
   and (870px from top / 163px from bottom) on mobile.

   So every width below is "native crop px / reference viewport
   width" as vw, and every vertical gap/offset is "native canvas
   px / reference viewport height" as vh — each breakpoint
   reproduces its reference mockup exactly at that native size and
   scales proportionally around it.
   ========================================================= */

/* All hero text is now the real brand artwork (SVG-wrapped PNG crops
   cut from SVG/SVG.svg), not live text — every wrapper below just
   sizes its <img> via width; height follows automatically. */
.tagline {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.brand img,
.tagline__pre img,
.tagline__main img,
.phone img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Logo ---------- */
.logo {
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

/* ---------- Brand ---------- */
.brand {
  line-height: 0;
}

/* ---------- Tagline ---------- */
.tagline__pre,
.tagline__main {
  display: block;
  line-height: 0;
}

/* ---------- Phone ---------- */
.phone {
  display: block;
  opacity: 0.88;
  transition: opacity 0.25s ease;
}

.phone:hover,
.phone:focus-visible {
  opacity: 1;
}

/* ---------- Desktop (reference: 1920x1080) ---------- */
@media (min-width: 768px) {
  .hero__content {
    padding-top: clamp(50px, 11.48vh, 160px);
  }

  .logo {
    width: clamp(72px, 9.948vw, 210px);
    margin-bottom: clamp(6px, 1.3vh, 18px);
  }

  .brand {
    width: clamp(180px, 23.44vw, 500px);
    margin-bottom: clamp(60px, 13.52vh, 190px);
  }

  .tagline__pre {
    width: clamp(180px, 23.39vw, 495px);
    margin-bottom: clamp(19px, 4.35vh, 61px);
  }

  .tagline__main {
    width: clamp(250px, 32.71vw, 695px);
    margin-bottom: clamp(85px, 19.26vh, 270px);
  }

  .phone {
    width: clamp(100px, 13.23vw, 280px);
  }
}

/* ---------- Mobile (reference: 1080x1920) ---------- */
@media (max-width: 767px) {
  .hero {
    align-items: flex-end;
  }

  .hero__content {
    padding: 0 20px clamp(65px, 8.49vh, 210px);
  }

  .logo {
    width: clamp(58px, 17.69vw, 190px);
    margin-bottom: clamp(4px, 0.73vh, 12px);
  }

  .brand {
    width: clamp(140px, 41.67vw, 420px);
    margin-bottom: clamp(38px, 7.6vh, 120px);
  }

  .tagline__pre {
    width: clamp(140px, 41.57vw, 415px);
    margin-bottom: clamp(12px, 2.45vh, 39px);
  }

  .tagline__main {
    width: clamp(200px, 58.15vw, 585px);
    margin-bottom: clamp(54px, 10.83vh, 170px);
  }

  .phone {
    width: clamp(85px, 23.52vw, 235px);
  }
}