/* ==========================================================
   START HERO SECTION CSS
   NindoTV — Premium IPTV Hero
   Version : 1.0.0
========================================================== */

/* ----------------------------------------------------------
   1. DESIGN TOKENS
---------------------------------------------------------- */
:root {
  /* Typography */
  --hero-font-display : 'Sora', 'Segoe UI', system-ui, sans-serif;
  --hero-font-body    : 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* White scale */
  --hero-white        : #ffffff;
  --hero-white-90     : rgba(255, 255, 255, 0.90);
  --hero-white-75     : rgba(255, 255, 255, 0.75);
  --hero-white-55     : rgba(255, 255, 255, 0.55);
  --hero-white-22     : rgba(255, 255, 255, 0.22);
  --hero-white-12     : rgba(255, 255, 255, 0.12);
  --hero-white-07     : rgba(255, 255, 255, 0.07);

  /* Accent */
  --hero-accent       : #2563eb;
  --hero-accent-dark  : #1d4ed8;
  --hero-accent-glow  : rgba(37, 99, 235, 0.42);

  /* Overlay */
  --hero-overlay-a    : rgba(4, 8, 18, 0.76);
  --hero-overlay-b    : rgba(4, 8, 18, 0.48);

  /* UI */
  --hero-radius-pill  : 999px;
  --hero-radius-card  : 14px;
  --hero-radius-sm    : 8px;

  /* Motion */
  --hero-ease         : cubic-bezier(0.22, 0.61, 0.36, 1);
  --hero-duration     : 0.24s;
}


/* ----------------------------------------------------------
   2. SECTION SHELL
---------------------------------------------------------- */
.hero {
  position        : relative;
  min-height      : 100svh;
  display         : flex;
  align-items     : center;
  justify-content : center;
  overflow        : hidden;
  font-family     : var(--hero-font-body);
}


/* ----------------------------------------------------------
   3. BACKGROUND & OVERLAY
---------------------------------------------------------- */
.hero__bg {
  position : absolute;
  inset     : 0;
  z-index   : 0;
}

.hero__bg-img {
  width           : 100%;
  height          : 100%;
  object-fit      : cover;
  object-position : center top;
  display         : block;
}

.hero__overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(
    155deg,
    var(--hero-overlay-a)  0%,
    var(--hero-overlay-b) 100%
  );
}


/* ----------------------------------------------------------
   4. CONTENT CONTAINER
---------------------------------------------------------- */
.hero__container {
  position        : relative;
  z-index         : 1;
  max-width       : 860px;
  width           : 100%;
  margin          : 0 auto;
  padding         : 6.5rem 1.75rem 5rem;
  text-align      : center;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
}


/* ----------------------------------------------------------
   5. BADGE
---------------------------------------------------------- */
.hero__badge {
  display              : inline-flex;
  align-items          : center;
  gap                  : 0.5rem;
  padding              : 0.42rem 1.1rem;
  margin-bottom        : 1.75rem;
  background           : var(--hero-white-12);
  border               : 1px solid var(--hero-white-22);
  border-radius        : var(--hero-radius-pill);
  color                : var(--hero-white-90);
  font-family          : var(--hero-font-body);
  font-size            : 0.78rem;
  font-weight          : 500;
  letter-spacing       : 0.015em;
  white-space          : nowrap;
  backdrop-filter      : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition           : background var(--hero-duration) ease;
}

.hero__badge-dot {
  display       : block;
  flex-shrink   : 0;
  width         : 8px;
  height        : 8px;
  border-radius : 50%;
  background    : #22c55e;
  box-shadow    : 0 0 0 3px rgba(34, 197, 94, 0.28);
  animation     : hero-dot-pulse 2.6s ease-in-out infinite;
}

@keyframes hero-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28); }
  50%       { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.08); }
}

.hero__badge-flag {
  font-size   : 0.9rem;
  line-height : 1;
}


/* ----------------------------------------------------------
   6. HEADLINE  h1
---------------------------------------------------------- */
.hero__title {
  font-family    : var(--hero-font-display);
  font-size      : clamp(2.35rem, 5.8vw, 4.1rem);
  font-weight    : 800;
  line-height    : 1.09;
  letter-spacing : -0.025em;
  color          : var(--hero-white);
  margin         : 0 0 1rem;
}


/* ----------------------------------------------------------
   7. SUBHEADLINE  h2
---------------------------------------------------------- */
.hero__subtitle {
  font-family    : var(--hero-font-display);
  font-size      : clamp(0.95rem, 2vw, 1.2rem);
  font-weight    : 600;
  color          : var(--hero-white-75);
  letter-spacing : 0.01em;
  margin         : 0 0 1.35rem;
}


/* ----------------------------------------------------------
   8. DESCRIPTION PARAGRAPH
---------------------------------------------------------- */
.hero__description {
  font-size     : clamp(0.88rem, 1.5vw, 1.02rem);
  font-weight   : 400;
  line-height   : 1.8;
  color         : var(--hero-white-75);
  max-width     : 690px;
  margin        : 0 auto 2.4rem;
}

.hero__description strong {
  color       : var(--hero-white);
  font-weight : 600;
}


/* ----------------------------------------------------------
   9. CTA BUTTONS
---------------------------------------------------------- */
.hero__ctas {
  display         : flex;
  gap             : 0.85rem;
  flex-wrap       : wrap;
  justify-content : center;
  margin-bottom   : 3rem;
}

.hero__btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.4rem;
  padding         : 0.82rem 2.1rem;
  border-radius   : var(--hero-radius-pill);
  font-family     : var(--hero-font-body);
  font-size       : 0.93rem;
  font-weight     : 700;
  letter-spacing  : 0.01em;
  text-decoration : none;
  cursor          : pointer;
  white-space     : nowrap;
  border          : 1.5px solid transparent;
  transition      :
    transform    var(--hero-duration) var(--hero-ease),
    box-shadow   var(--hero-duration) var(--hero-ease),
    background   0.18s ease,
    border-color 0.18s ease;
}

/* Primary — solid blue */
.hero__btn--primary {
  background  : var(--hero-accent);
  color       : var(--hero-white);
  box-shadow  : 0 3px 20px var(--hero-accent-glow);
}

.hero__btn--primary:hover,
.hero__btn--primary:focus-visible {
  background  : var(--hero-accent-dark);
  transform   : translateY(-3px);
  box-shadow  : 0 8px 30px var(--hero-accent-glow);
  outline     : none;
}

.hero__btn--primary:active {
  transform  : translateY(-1px);
  box-shadow : 0 4px 14px var(--hero-accent-glow);
}

/* Secondary — ghost/glass */
.hero__btn--secondary {
  background           : var(--hero-white-07);
  color                : var(--hero-white-90);
  border-color         : var(--hero-white-22);
  backdrop-filter      : blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero__btn--secondary:hover,
.hero__btn--secondary:focus-visible {
  background   : var(--hero-white-12);
  border-color : var(--hero-white-22);
  transform    : translateY(-3px);
  outline      : none;
}

.hero__btn--secondary:active {
  transform : translateY(-1px);
}


/* ----------------------------------------------------------
   10. STATS GRID
---------------------------------------------------------- */
.hero__stats {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  gap                   : 0.7rem;
  width                 : 100%;
  max-width             : 740px;
  margin-bottom         : 2rem;
}

.hero__stat {
  display              : flex;
  flex-direction       : column;
  align-items          : center;
  gap                  : 0.32rem;
  padding              : 1rem 0.65rem;
  background           : var(--hero-white-12);
  border               : 1px solid var(--hero-white-22);
  border-radius        : var(--hero-radius-card);
  backdrop-filter      : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition           :
    background  var(--hero-duration) ease,
    transform   var(--hero-duration) var(--hero-ease),
    box-shadow  var(--hero-duration) ease;
}

.hero__stat:hover {
  background : rgba(255, 255, 255, 0.19);
  transform  : translateY(-3px);
  box-shadow : 0 6px 24px rgba(0, 0, 0, 0.22);
}

.hero__stat-value {
  font-family  : var(--hero-font-display);
  font-size    : clamp(1.08rem, 2.2vw, 1.38rem);
  font-weight  : 800;
  color        : var(--hero-white);
  line-height  : 1;
  letter-spacing: -0.01em;
}

.hero__stat-label {
  font-size   : 0.70rem;
  font-weight : 500;
  color       : var(--hero-white-55);
  text-align  : center;
  line-height : 1.35;
}


/* ----------------------------------------------------------
   11. TRUST BAR
---------------------------------------------------------- */
.hero__trust {
  display         : flex;
  align-items     : center;
  flex-wrap       : wrap;
  justify-content : center;
  gap             : 0.45rem 0.35rem;
  font-size       : 0.76rem;
  font-weight     : 500;
  color           : var(--hero-white-55);
}

.hero__trust-item {
  display     : inline-flex;
  align-items : center;
  gap         : 0.28rem;
  transition  : color var(--hero-duration) ease;
}

.hero__trust-item:hover {
  color : var(--hero-white-75);
}

.hero__trust-sep {
  color     : var(--hero-white-22);
  font-size : 0.55rem;
  user-select: none;
}


/* ----------------------------------------------------------
   12. RESPONSIVE — TABLET  ≤ 900px
---------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__stats {
    grid-template-columns : repeat(2, 1fr);
    max-width             : 500px;
  }

  .hero__title {
    font-size : clamp(2rem, 7vw, 3rem);
  }
}


/* ----------------------------------------------------------
   13. RESPONSIVE — MOBILE  ≤ 600px
---------------------------------------------------------- */
@media (max-width: 600px) {
  .hero__container {
    padding : 5rem 1.2rem 4rem;
  }

  .hero__badge {
    font-size  : 0.72rem;
    white-space: normal;
    text-align : center;
    max-width  : 280px;
  }

  .hero__ctas {
    flex-direction : column;
    align-items    : stretch;
    width          : 100%;
    max-width      : 320px;
  }

  .hero__btn {
    width           : 100%;
    justify-content : center;
    padding         : 0.9rem 1.5rem;
  }

  .hero__stats {
    grid-template-columns : repeat(2, 1fr);
    gap                   : 0.55rem;
    max-width             : 100%;
  }

  .hero__stat {
    padding : 0.85rem 0.5rem;
  }

  .hero__trust {
    font-size : 0.68rem;
    gap       : 0.4rem 0.3rem;
  }
}


/* ----------------------------------------------------------
   14. REDUCED MOTION SUPPORT
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__badge-dot {
    animation : none;
  }

  .hero__btn,
  .hero__stat,
  .hero__trust-item {
    transition : none;
  }
}

/* ==========================================================
   END HERO SECTION CSS
========================================================== */