/* MiaWiFi Hero - isolated styles */
.mw-hero, .mw-hero * { box-sizing: border-box; }
.mw-hero { font-family: Arial, Helvetica, sans-serif; color:#123b59; }
.mw-hero a { text-decoration:none; }

.mw-hero {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 82% 22%, rgba(8, 169, 232, .14), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(22, 139, 208, .10), transparent 30%),
        linear-gradient(135deg, #fff 0%, #fff 55%, #f3fbfe 100%);
    }

    .mw-hero:before {
      content: "";
      position: absolute;
      width: 620px;
      height: 620px;
      right: -250px;
      top: -260px;
      border: 1px solid rgba(8, 169, 232, .12);
      border-radius: 50%;
    }

    .mw-hero:after {
      content: "";
      position: absolute;
      width: 460px;
      height: 460px;
      right: -150px;
      bottom: -220px;
      border: 1px solid rgba(8, 169, 232, .12);
      border-radius: 50%;
    }

    .mw-hero__container {
      width: min(1240px, 92%);
      margin: auto;
      position: relative;
      z-index: 2
    }

    

    

    

    

    

    

    

    .mw-hero__grid {
      min-height: calc(100vh - 92px);
      display: grid;
      grid-template-columns: 48% 52%;
      align-items: center;
      gap: 10px;
      padding: 28px 0 70px;
    }

    .mw-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #08a9e8;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1.8px;
      margin-bottom: 22px;
    }

    .mw-hero__eyebrow i {
      display: block;
      width: 28px;
      height: 2px;
      background: #08a9e8
    }

    .mw-hero__title {
      font-size: clamp(48px, 5.3vw, 76px);
      line-height: .98;
      letter-spacing: -4px;
      max-width: 610px;
      margin-bottom: 27px;
    }

    .mw-hero__title span {
      color: #08a9e8
    }

    .mw-hero__lead {
      color: #536b7a;
      font-size: 19px;
      line-height: 1.7;
      max-width: 570px;
      margin-bottom: 31px;
    }

    .mw-hero__actions {
      display: flex;
      gap: 14px;
      align-items: center;
      margin-bottom: 45px
    }

    .mw-hero__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      padding: 15px 25px;
      border-radius: 28px;
      font-weight: 700;
      font-size: 14px;
    }

    .mw-hero__btn--primary {
      background: #08a9e8;
      color: #fff;
      box-shadow: 0 10px 28px rgba(8, 169, 232, .22)
    }

    .mw-hero__btn--secondary {
      border: 1px solid #c9e5ef;
      color: #123b59;
      background: #fff
    }

    .mw-hero__stats {
      display: flex;
      gap: 0;
      max-width: 620px
    }

    .mw-hero__stat {
      padding-right: 30px;
      margin-right: 30px;
      border-right: 1px solid #dcebf0
    }

    .mw-hero__stat:last-child {
      border: 0
    }

    .mw-hero__stat strong {
      display: block;
      font-size: 25px;
      color: #123b59;
      letter-spacing: -1px
    }

    .mw-hero__stat span {
      font-size: 11px;
      color: #8093a0;
      letter-spacing: 1.1px;
      font-weight: 700
    }

    /* Network visual — venue circle */
    .mw-hero__visual {
      height: 570px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center
    }

    /* Animated network -> venue cases */
    .mw-hero__network {
      width: 550px;
      height: 550px;
      min-height: 550px;
      position: relative
    }

    .mw-hero__orbit {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #d9e8f2;
      border-radius: 50%;
      opacity: 0;
      animation: mwHeroOrbitIn 1.2s ease forwards, mwHeroOrbitSpin 7s linear 1.2s infinite
    }

    .mw-hero__orbit-1 {
      width: 220px;
      height: 220px;
      animation-delay: .1s, 1.3s
    }

    .mw-hero__orbit-2 {
      width: 350px;
      height: 350px;
      animation-delay: .25s, 1.45s
    }

    .mw-hero__orbit-3 {
      width: 490px;
      height: 490px;
      animation-delay: .4s, 1.6s
    }

    .mw-hero__cases:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 490px;
      height: 490px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(72, 169, 220, .10);
      border-radius: 50%;
      z-index: -1;
      box-shadow: 0 0 80px rgba(72, 169, 220, .06);
    }

    .mw-hero__cases:before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 490px;
      height: 490px;
      transform: translate(-50%, -50%);
      border: 1px dashed rgba(72, 169, 220, .16);
      border-radius: 50%;
      z-index: -1
    }

    .mw-hero__network-core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(.55);
      width: 145px;
      height: 145px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: linear-gradient(145deg, #08a9e8 0%, #168bd0 58%, #123b59 100%);
      color: #fff;
      box-shadow: 0 22px 55px rgba(8, 169, 232, .25), 0 8px 24px rgba(18, 59, 89, .16);
      z-index: 5;
      opacity: 0;
      animation: mwHeroCoreIn .9s .65s cubic-bezier(.2, .8, .2, 1) forwards
    }

    .mw-hero__network-core span {
      font-size: 23px;
      font-weight: 800;
      letter-spacing: -1px
    }

    .mw-hero__network-core small {
      font-size: 9px;
      line-height: 1.4;
      opacity: .82;
      margin-top: 6px
    }

    .mw-hero__orbit-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #50b3e8;
      box-shadow: 0 0 0 8px rgba(80, 179, 232, .10), 0 0 20px rgba(80, 179, 232, .5);
      left: 50%;
      top: 50%;
      opacity: 0;
      z-index: 4
    }

    .mw-hero__d1 {
      animation: mwHeroDot1 4.2s 1.1s linear infinite
    }

    .mw-hero__d2 {
      animation: mwHeroDot2 4.8s 1.2s linear infinite
    }

    .mw-hero__d3 {
      animation: mwHeroDot3 5.2s 1.3s linear infinite
    }

    .mw-hero__d4 {
      animation: mwHeroDot4 4.6s 1.4s linear infinite
    }

    .mw-hero__cases {
      position: absolute;
      inset: 0;
      z-index: 8;
      opacity: 1;
      visibility: visible;
      animation: none
    }

    .mw-hero__case {
      position: absolute;
      width: 108px;
      height: 108px;
      padding: 12px;

      /* nền kính cao cấp */
      background:
        radial-gradient(circle at 30% 20%,
          rgba(255, 255, 255, .98),
          rgba(255, 255, 255, .82) 45%,
          rgba(232, 246, 253, .75) 100%);

      border: 1px solid rgba(255, 255, 255, .95);
      border-radius: 50%;

      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;

      /* bóng mềm + chiều sâu */
      box-shadow:
        0 18px 42px rgba(38, 73, 103, .14),
        0 5px 14px rgba(63, 154, 210, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .85);

      opacity: 1;
      visibility: visible;
      will-change: transform, opacity, filter;
      animation: mwHeroVenueIn .82s cubic-bezier(.16, 1, .3, 1) backwards;
      transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        box-shadow .35s,
        border-color .35s;
    }

    /* .mw-hero__case:hover {
      transform: translateY(-6px) scale(1.04);
      box-shadow: 0 20px 42px rgba(37, 67, 91, .13);
      border-color: #a9d8ef
    } */

    .mw-hero__case:hover {
      transform: translate(-50%, -50%) translateY(-8px) scale(1.07);

      box-shadow:
        0 28px 55px rgba(37, 67, 91, .18),
        0 8px 20px rgba(66, 159, 215, .12),
        inset 0 0 0 1px rgba(255, 255, 255, .95);

      border-color: rgba(105, 190, 231, .65);
    }

    .mw-hero__case-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;

      background: linear-gradient(145deg,
          #ffffff,
          #e8f6fd);

      color: #329bd5;

      display: grid;
      place-items: center;

      box-shadow:
        0 7px 16px rgba(55, 151, 207, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .9);

      position: relative;
      z-index: 1;
    }

    .mw-hero__case-icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .mw-hero__case b {
      font-size: 11px;
      color: #26354b;
      white-space: nowrap;
      font-weight: 700;
      letter-spacing: -.1px
    }

    .mw-hero__case {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%)
    }

    .mw-hero__c1 {
      left: calc(50% + 0px);
      top: calc(50% + -245px);
    }

    .mw-hero__c2 {
      left: calc(50% + 144px);
      top: calc(50% + -198.2px);
    }

    .mw-hero__c3 {
      left: calc(50% + 233px);
      top: calc(50% + -75.7px);
    }

    .mw-hero__c4 {
      left: calc(50% + 233px);
      top: calc(50% + 75.7px);
    }

    .mw-hero__c5 {
      left: calc(50% + 144px);
      top: calc(50% + 198.2px);
    }

    .mw-hero__c6 {
      left: calc(50% + 0px);
      top: calc(50% + 245px);
    }

    .mw-hero__c7 {
      left: calc(50% + -144px);
      top: calc(50% + 198.2px);
    }

    .mw-hero__c8 {
      left: calc(50% + -233px);
      top: calc(50% + 75.7px);
    }

    .mw-hero__c9 {
      left: calc(50% + -233px);
      top: calc(50% + -75.7px);
    }

    .mw-hero__c10 {
      left: calc(50% + -144px);
      top: calc(50% + -198.2px);
    }

    /* .mw-hero__case:hover {
      transform: translate(-50%, -50%) scale(1.04)
    } */

    .mw-hero__c1 {
      animation-delay: 1.50s
    }

    .mw-hero__c2 {
      animation-delay: 1.515s
    }

    .mw-hero__c3 {
      animation-delay: 1.530s
    }

    .mw-hero__c4 {
      animation-delay: 1.545s
    }

    .mw-hero__c5 {
      animation-delay: 1.560s
    }

    .mw-hero__c6 {
      animation-delay: 1.575s
    }

    .mw-hero__c7 {
      animation-delay: 1.590s
    }

    .mw-hero__c8 {
      animation-delay: 1.605s
    }

    .mw-hero__c9 {
      animation-delay: 1.620s
    }

    .mw-hero__c10 {
      animation-delay: 1.635s
    }

    @keyframes mwHeroOrbitIn {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.25)
      }

      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
      }
    }

    @keyframes mwHeroOrbitSpin {
      from {
        transform: translate(-50%, -50%) rotate(0deg)
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg)
      }
    }

    @keyframes mwHeroCoreIn {
      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
      }
    }

    @keyframes mwHeroCasesIn {
      0% {
        opacity: 0;
        transform: scale(.72)
      }

      70% {
        opacity: 1;
        transform: scale(1.04)
      }

      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes mwHeroVenueIn {
      0% {
        opacity: 0;
        filter: blur(8px);
        transform: translate(-50%, -50%) translateY(22px) scale(.52) rotate(-5deg);
        box-shadow:
          0 0 0 rgba(80, 179, 232, 0),
          0 0 0 rgba(80, 179, 232, 0),
          inset 0 0 0 1px rgba(255, 255, 255, .55);
      }

      45% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) translateY(-7px) scale(1.08) rotate(1.2deg);
        box-shadow:
          0 24px 54px rgba(38, 73, 103, .17),
          0 0 32px rgba(80, 179, 232, .18),
          inset 0 0 0 1px rgba(255, 255, 255, .95);
      }

      72% {
        transform: translate(-50%, -50%) translateY(3px) scale(.985) rotate(-.4deg);
      }

      100% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) translateY(0) scale(1) rotate(0);
      }
    }

    .mw-hero__case::after {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid rgba(80, 179, 232, .20);
      opacity: 0;
      pointer-events: none;
      animation: mwHeroVenueHalo .82s ease-out backwards;
      animation-delay: inherit;
    }

    @keyframes mwHeroVenueHalo {
      0% {
        opacity: 0;
        transform: scale(.72);
      }

      42% {
        opacity: .75;
        transform: scale(1.02);
      }

      100% {
        opacity: 0;
        transform: scale(1.18);
      }
    }

    .mw-hero__case-icon {
      animation: mwHeroIconReveal .68s cubic-bezier(.16, 1, .3, 1) backwards;
      animation-delay: inherit;
    }

    @keyframes mwHeroIconReveal {
      0% {
        opacity: 0;
        transform: scale(.45) rotate(-14deg);
      }

      60% {
        opacity: 1;
        transform: scale(1.12) rotate(3deg);
      }

      100% {
        opacity: 1;
        transform: scale(1) rotate(0);
      }
    }

    @keyframes mwHeroDot1 {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) translateX(108px)
      }

      10% {
        opacity: 1
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg) translateX(108px)
      }
    }

    @keyframes mwHeroDot2 {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(180deg) translateX(174px)
      }

      10% {
        opacity: 1
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(540deg) translateX(174px)
      }
    }

    @keyframes mwHeroDot3 {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(80deg) translateX(242px)
      }

      10% {
        opacity: 1
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(440deg) translateX(242px)
      }
    }

    @keyframes mwHeroDot4 {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(260deg) translateX(242px)
      }

      10% {
        opacity: 1
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(620deg) translateX(242px)
      }
    }


    .mw-hero__scroll {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      letter-spacing: 2px;
      color: #8aa0ab
    }

    .mw-hero__scroll:after {
      content: "";
      display: block;
      width: 1px;
      height: 30px;
      background: #b8dce8;
      margin: 9px auto 0
    }

/* Decorative corner circles disabled */
.mw-hero::before,
.mw-hero::after { display:none !important; content:none !important; }

/* =========================================================
   Mobile layout polish v2
   Keep this block at the END of hero.css so it wins only
   inside .mw-hero and does not affect the rest of the site.
   ========================================================= */
@media (max-width: 900px) {
  .mw-hero {
    min-height: auto;
    padding-top: 86px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 69%, rgba(8,169,232,.11), transparent 34%),
      linear-gradient(180deg, #fff 0%, #fff 42%, #f4fbfe 100%);
  }

  .mw-hero__container {
    width: 100%;
    max-width: 680px;
    padding: 0 20px;
    margin: 0 auto;
  }

  /* display:contents lets the network sit before the stats on mobile
     without changing desktop HTML structure. */
  .mw-hero__grid {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 22px 0 38px;
  }

  .mw-hero__content {
    display: contents;
  }

  .mw-hero__eyebrow {
    order: 1;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 360px;
    margin: 0 auto 14px;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 1.05px;
    text-align: center;
    white-space: normal;
  }

  .mw-hero__eyebrow i {
    width: 22px;
    flex: 0 0 22px;
  }

  .mw-hero__title {
    order: 2;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 18px;
    font-size: clamp(40px, 10.2vw, 56px);
    line-height: .98;
    letter-spacing: -2.5px;
    text-align: center;
    color: #123b59;
  }

  .mw-hero__lead {
    order: 3;
    width: 100%;
    max-width: 430px;
    margin: 0 auto 22px;
    padding: 0 2px;
    font-size: 14px;
    line-height: 1.62;
    text-align: center;
  }

  .mw-hero__actions {
    order: 4;
    justify-content: center;
    margin: 0 0 12px;
  }

  .mw-hero__actions .mw-hero__btn--secondary {
    display: none;
  }

  .mw-hero__btn {
    min-width: 188px;
    padding: 13px 20px;
    font-size: 11px;
    line-height: 1;
  }

  .mw-hero__visual {
    order: 5;
    width: 100%;
    height: 390px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .mw-hero__network {
    flex: 0 0 550px;
    width: 550px;
    height: 550px;
    min-height: 550px;
    transform: scale(.64);
    transform-origin: center center;
  }

  .mw-hero__case {
    width: 92px;
    height: 92px;
    padding: 9px;
  }

  .mw-hero__case-icon {
    width: 34px;
    height: 34px;
  }

  .mw-hero__case-icon svg {
    width: 17px;
    height: 17px;
  }

  .mw-hero__case b {
    font-size: 11px;
  }

  .mw-hero__stats {
    order: 6;
    width: 100%;
    max-width: 430px;
    margin: -2px auto 0;
    padding: 13px 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #deebf1;
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 12px 30px rgba(18,59,89,.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .mw-hero__stat {
    min-width: 0;
    margin: 0;
    padding: 0 6px;
    border-right: 1px solid #deebf0;
    text-align: center;
  }

  .mw-hero__stat:last-child { border-right: 0; }

  .mw-hero__stat strong {
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: -.5px;
    white-space: nowrap;
  }

  .mw-hero__stat span {
    display: block;
    margin-top: 4px;
    font-size: 6.4px;
    line-height: 1.25;
    letter-spacing: .48px;
    white-space: normal;
  }

  .mw-hero__scroll { display: none; }
}

@media (max-width: 480px) {
  .mw-hero { padding-top: 82px; }
  .mw-hero__container { padding: 0 16px; }
  .mw-hero__grid { padding: 24px 0 30px; }

  .mw-hero__eyebrow {
    max-width: 320px;
    margin-bottom: 12px;
    font-size: 8.2px;
    letter-spacing: .9px;
  }

  .mw-hero__title {
    max-width: 100%;
    margin-bottom: 16px;
    font-size: clamp(38px, 11.5vw, 48px);
    letter-spacing: -2.1px;
  }

  .mw-hero__lead {
    max-width: 365px;
    margin-bottom: 19px;
    font-size: 13px;
    line-height: 1.58;
  }

  .mw-hero__actions { margin-bottom: 7px; }

  .mw-hero__visual {
    height: 345px;
  }

  .mw-hero__network {
    transform: scale(.56);
  }

  .mw-hero__stats {
    margin-top: 0;
    padding: 12px 4px;
    border-radius: 15px;
  }

  .mw-hero__stat { padding: 0 3px; }
  .mw-hero__stat strong { font-size: 17px; }
  .mw-hero__stat span { font-size: 5.8px; letter-spacing: .34px; }
}

@media (max-width: 380px) {
  .mw-hero { padding-top: 78px; }
  .mw-hero__container { padding: 0 12px; }
  .mw-hero__grid { padding-top: 20px; }
  .mw-hero__eyebrow { font-size: 7.6px; max-width: 292px; }
  .mw-hero__title { font-size: 38px; letter-spacing: -1.8px; }
  .mw-hero__lead { max-width: 330px; font-size: 12.5px; }
  .mw-hero__visual { height: 320px; }
  .mw-hero__network { transform: scale(.515); }
  .mw-hero__stat strong { font-size: 16px; }
  .mw-hero__stat span { font-size: 5.4px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mw-hero .mw-hero__orbit,
  .mw-hero .mw-hero__orbit-dot,
  .mw-hero .mw-hero__network-core,
  .mw-hero .mw-hero__case,
  .mw-hero .mw-hero__case-icon,
  .mw-hero .mw-hero__case::after {
    animation: none !important;
  }
  .mw-hero .mw-hero__orbit,
  .mw-hero .mw-hero__network-core { opacity:1; }
  .mw-hero .mw-hero__network-core { transform:translate(-50%,-50%) scale(1); }
}