/* =========================================
   HERO (Aidory) — fully responsive, premium
   ========================================= */

/* Local tokens (only affect .hero) */
.hero{
  --hero-ink: #064e3b;                  /* title color */
  --hero-max: 1100px;                   /* max width on large screens */
  --hero-pad-top: clamp(56px, 8vw, 120px);
  --hero-pad-bot: clamp(36px, 6vw, 100px);

  width: min(92vw, var(--hero-max));
  margin-inline: auto;
  padding-block: var(--hero-pad-top) var(--hero-pad-bot);
  text-align: center;
}

/* Title base (mobile-first) */
.hero-title{
  margin: 0;
  color: var(--hero-ink);
  font-family: "Poppins","Inter",system-ui,sans-serif;
  font-weight: 800;
  line-height: 1.25;
  /* size grows smoothly with screen */
  font-size: clamp(20px, 5.5vw, 44px);
  /* keep 2 pleasant lines on small screens */
  max-width: 26ch;
  margin-inline: auto;
  white-space: normal;       /* allow wrapping on small screens */
  letter-spacing: -0.02em;
  word-spacing: 0;
}

/* Mobile-only line break (hidden by default) */
.br-mobile{ display: none; }

/* ===== Breakpoints ===== */

/* ≤ 360px — very small phones */
@media (max-width: 360px){
  .hero{ padding-block: 6px 5px; }
  .hero-title{
    font-size: 18px;
    max-width: 25ch;
  }
  .br-mobile{ display: inline; }  /* force 2 lines */
}

/* 361–480px — common phones */
@media (min-width: 361px) and (max-width: 480px){
  .hero{ padding-block: 6px 40px; }
  .hero-title{
    font-size: 18px;
    max-width: 25ch;
  }
  .br-mobile{ display: inline; }  /* keep 2 lines */
}

/* 481–767px — large phones / small tablets (portrait) */
@media (min-width: 481px) and (max-width: 767px){
  .hero{ padding-block: 8px 8px; }
  .hero-title{
    font-size: 20px;
    max-width: 26ch;
  }
  .br-mobile{ display: inline; }  /* still 2 lines */
}

/* 768–1023px — tablets */
@media (min-width: 768px) and (max-width: 1023px){
  .hero{ padding-block: 80px 64px; }
  .hero-title{
    font-size: 34px;
    max-width: 30ch;            /* balanced two lines if needed */
  }
  .br-mobile{ display: inline; } /* often still 2 lines on tablet */
}

/* 1024–1439px — laptops/desktops */
@media (min-width: 1024px) and (max-width: 1439px){
  .hero{ padding-block: 100px 80px; }
  .hero-title{
    font-size: 44px;
    max-width: none;
    white-space: nowrap;        /* single line on desktop */
  }
  .br-mobile{ display: none; }
}

/* 1440–1919px — large desktops */
@media (min-width: 1440px) and (max-width: 1919px){
  .hero{ padding-block: 110px 90px; }
  .hero-title{
    font-size: 48px;
    white-space: nowrap;
  }
  .br-mobile{ display: none; }
}

/* 1920–2559px — Full HD / WQHD */
@media (min-width: 1920px) and (max-width: 2559px){
  .hero{ padding-block: 120px 100px; }
  .hero-title{
    font-size: 52px;
    white-space: nowrap;
  }
  .br-mobile{ display: none; }
}

/* 2560px+ — 4K and ultrawide */
@media (min-width: 2560px){
  .hero{ padding-block: 140px 110px; }
  .hero-title{
    font-size: 60px;
    white-space: nowrap;
  }
  .br-mobile{ display: none; }
}