/* =========================================================
   06. HERO Searchhero
   ========================================================= */

.hero {
  max-width: 1240px;
  min-height: 650px;

  margin: 0 auto;
  padding: 60px 28px 90px;

  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;

  gap: 55px;

  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ---------------------------------------------------------
   Hero Copy
   --------------------------------------------------------- */

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy .eyebrow {
  margin-bottom: 22px;
}

.hero-copy h1 {
  max-width: 620px;

  margin: 0 0 25px;

  color: var(--ink);

  font-family: "Inter", sans-serif;
  font-size: clamp(48px, 5vw, 68px);

  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.065em;

  text-transform: uppercase;
}

.hero-copy h1 em {
  color: var(--green-soft);
  font-style: normal;
}

.hero-text {
  max-width: 480px;

  margin: 0 0 27px;

  color: var(--muted);

  font-size: 16px;
  line-height: 1.7;
}

.headline-cursor {
  display: inline-flex;
  align-items: flex-end;

  width: 18px;
  height: 26px;

  margin-left: 4px;

  vertical-align: baseline;

  transform: translateY(10px) translateX(-10px) rotate(-20deg);
}

.headline-cursor svg {
  display: block;

  width: 100%;
  height: 100%;

  fill: var(--coral);

  filter: drop-shadow(0 2px 3px rgba(23, 36, 33, 0.12));
}

/* ---------------------------------------------------------
   Hero Price
   --------------------------------------------------------- */

.hero-price {
  display: flex;
  align-items: baseline;
  gap: 11px;

  margin-bottom: 20px;
}

.hero-price > span {
  color: var(--muted);

  font:
    500 11px "DM Mono",
    monospace;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-price strong {
  color: var(--ink);

  font-family: "Inter", Arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: -0.05em;
}

.hero-price small {
  margin-left: 3px;

  color: var(--muted);

  font:
    500 11px "DM Mono",
    monospace;

  letter-spacing: 0;
}

/* ---------------------------------------------------------
   Hero Benefits
   --------------------------------------------------------- */

.hero-benefits {
  max-width: 560px;

  margin: 0 0 28px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.hero-benefit {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  padding: 14px 15px;

  background: var(--white);

  border: 1px solid var(--line);
  border-radius: 8px;

  box-shadow: 0 5px 18px #173a3008;
}

.benefit-icon {
  width: 22px;
  height: 22px;

  flex-shrink: 0;

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

  background: var(--mint);
  color: var(--ink);

  border-radius: 50%;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.hero-benefit strong {
  display: block;

  margin-bottom: 3px;

  color: var(--ink);

  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hero-benefit div > span {
  display: block;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   Hero Actions
   --------------------------------------------------------- */

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  min-width: 215px;

  padding: 15px 18px 15px 20px;

  background: var(--mint);
  color: var(--ink);

  border-radius: 7px;

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    gap 0.25s ease;
}

.hero-actions.button span {
  font-size: 18px;
  font-weight: 400;
}

.hero-actions.button:hover {
  transform: translateY(-3px);
  color: var(--ink);

  gap: 42px;
}

/* ---------------------------------------------------------
   Hero Reassurance
   --------------------------------------------------------- */

.hero-note {
  display: flex;
  flex-wrap: wrap;

  gap: 17px;

  margin-top: 20px;
}

.hero-note span {
  color: #587068;

  font:
    500 10px "DM Mono",
    monospace;

  letter-spacing: 0.01em;
}

.hero-note span::first-letter {
  color: var(--green-soft);
}

/* =========================================================
   07. HERO VISUAL
   ========================================================= */

.hero-visual {
  position: relative;

  height: 540px;

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

/* ---------------------------------------------------------
   Decorative Orbital Lines
   --------------------------------------------------------- */

.hero-orbit {
  position: absolute;

  border: 1px solid #bfd4ca;
  border-radius: 50%;

  pointer-events: none;
}

.orbit-one {
  width: 440px;
  height: 440px;

  right: 18px;
}

.orbit-two {
  width: 555px;
  height: 555px;

  right: -40px;

  border-style: dashed;
}

/* ---------------------------------------------------------
   Floating Visual Label
   --------------------------------------------------------- */

.hero-visual-label {
  position: absolute;

  top: 38px;
  right: 8px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 11px 14px;

  background: var(--white);

  border-radius: 8px;

  box-shadow: 0 9px 25px #173a3018;

  color: var(--green-dark);

  font:
    500 10px "DM Mono",
    monospace;

  letter-spacing: 0.02em;
}

.hero-visual-label .pulse {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  background: var(--mint);
  border-radius: 50%;
}

.hero-visual-label {
  animation: herovisuallabel 2s ease-in-out infinite;
}

.hero-visual-label--secondary {
  top: auto;
  right: auto;
  bottom: 38px;
  left: -8px;
  animation-delay: 0.35s;
  text-decoration: none;
}

.hero-visual-label--secondary:hover {
  color: var(--green-dark);
}
@keyframes herovisuallabel {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

/* =========================================================
   08. HERO — BROWSER PREVIEW
   ========================================================= */

.hero-catalogue {
  position: relative;

  z-index: 2;

  width: min(540px, 100%);

  transform: rotate(1.5deg);
}

.catalogue-browser {
  overflow: hidden;

  background: var(--white);

  border-radius: 10px;

  box-shadow:
    0 30px 65px #183a3056,
    0 5px 15px #173a3010;
  scale: 1.01;
}

/* ---------------------------------------------------------
   Browser Header
   --------------------------------------------------------- */

.browser-top {
  height: 37px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 0 12px;

  border-bottom: 1px solid #e9ece9;

  color: #9aa49f;

  font:
    9px "DM Mono",
    monospace;
}

.browser-dots {
  display: flex;
  gap: 4px;
}

.browser-dots i {
  width: 5px;
  height: 5px;

  background: #d7ddd9;

  border-radius: 50%;
}

.browser-menu {
  margin-left: auto;
}

/* ---------------------------------------------------------
   Homepage Hero Mockup
   --------------------------------------------------------- */

.homepage-hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
/* =========================================================
   20. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 950px) {
  /* -------------------------------------------------------
     Hero
     ------------------------------------------------------- */

  .hero {
    grid-template-columns: 1fr;

    gap: 45px;

    padding-top: 65px;
  }

  .hero-copy {
    max-width: 650px;
  }

  .hero-visual {
    height: 520px;
  }
}

/* =========================================================
   22. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {
  /* -------------------------------------------------------
     Hero
     ------------------------------------------------------- */

  .hero {
    min-height: 0;

    padding: 30px 21px 70px;

    gap: 35px;
  }

  .hero-copy h1 {
    font-size: 45px;
  }

  .hero-text {
    font-size: 15px;
  }

  .headline-cursor {
    transform: translateY(12px) translateX(-10px) rotate(-20deg);
  }

  .hero-price {
    margin-bottom: 23px;
  }

  .hero-price strong {
    font-size: 28px;
  }

  .hero-note {
    gap: 8px 14px;
  }

  /* Hero visual */

  .hero-visual {
    height: 410px;
  }

  .hero-catalogue {
    width: 100%;

    transform: none;
  }
  /* Visual label */

  .hero-visual-label {
    top: 10px;
    right: -3px;

    padding: 9px 11px;

    font-size: 9px;
  }
  /* Decorative orbits */

  .orbit-one {
    width: 300px;
    height: 300px;

    right: 5px;
  }

  .orbit-two {
    width: 375px;
    height: 375px;

    right: -30px;
  }

  /* Button depth */

  .button {
    box-shadow: 0 4px 0 #1c8d68;
  }

  .button-coral {
    box-shadow: 0 4px 0 #bb3f3c;
  }
}

/* =========================================================
   23. RESPONSIVE — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {
  .hero-copy h1 {
    font-size: 40px;
  }

  .hero-benefits {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .hero-visual-label.hero-visual-label--secondary {
    top: auto;
    right: auto;
    bottom: 16px;
    left: 0;
    font-size: 8px;
  }
}