/* =========================================================
   ANONDO WIFI NETWORK — PACKAGE SECTION
   All selectors are scoped to #packages.package-reference-final
   so the rest of the homepage remains unchanged.
   ========================================================= */

#packages.package-reference-final{
  --pkg-blue:#1268e8;
  --pkg-green:#09aa52;
  --pkg-orange:#ff7300;
  --pkg-purple:#6b1cdd;
  --pkg-navy:#102c77;
  --pkg-text:#41527b;
  --pkg-border:#dce7f6;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:62px 0 52px;
  background:linear-gradient(135deg,#f5faff 0%,#ffffff 50%,#f3f8ff 100%);
}

#packages.package-reference-final .package-reference-wrap{
  position:relative;
  z-index:3;
  width:min(100% - 32px, 1280px);
  margin-inline:auto;
}

#packages.package-reference-final .package-reference-title{
  width:100%;
  margin:0 auto 38px;
  text-align:center;
}

#packages.package-reference-final .package-reference-title small{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin:0 0 9px;
  color:var(--pkg-blue);
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:1.8px;
}

#packages.package-reference-final .package-reference-title small span{
  display:block;
  width:34px;
  height:2px;
  border-radius:2px;
  background:var(--pkg-blue);
}

#packages.package-reference-final .package-reference-title h2{
  margin:0;
  color:var(--pkg-navy);
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
  font-size:36px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}

#packages.package-reference-final .package-reference-title p{
  margin:7px auto 0;
  color:#687798;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  text-align:center;
}

#packages.package-reference-final .package-reference-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

#packages.package-reference-final .ref-plan{
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--pkg-border);
  border-radius:17px;
  background:#fff;
  box-shadow:0 12px 30px rgba(30,73,145,.10);
  transition:transform .22s ease,box-shadow .22s ease;
}

#packages.package-reference-final .ref-plan:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(30,73,145,.15);
}

#packages.package-reference-final .ref-plan-head{
  min-height:94px;
  padding:16px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
}

#packages.package-reference-final .ref-plan-head h3{
  margin:0;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:21px;
  font-weight:800;
  line-height:1.1;
}

#packages.package-reference-final .ref-plan-head p{
  margin:5px 0 0;
  color:#fff;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
}

#packages.package-reference-final .ref-plan-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.20);
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:27px;
  font-weight:800;
}

#packages.package-reference-final .ref-basic .ref-plan-head{
  background:linear-gradient(135deg,#087cf0,#1267e8);
}
#packages.package-reference-final .ref-standard .ref-plan-head{
  background:linear-gradient(135deg,#08b45b,#08a64e);
}
#packages.package-reference-final .ref-premium .ref-plan-head{
  background:linear-gradient(135deg,#ff8500,#ff6f00);
}
#packages.package-reference-final .ref-ultimate .ref-plan-head{
  background:linear-gradient(135deg,#7924ec,#6518d7);
}

#packages.package-reference-final .ref-plan-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:18px 21px 20px;
  text-align:center;
  background:#fff;
}

#packages.package-reference-final .ref-speed{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:9px;
  margin:0 0 12px;
  color:#143b9d;
}

#packages.package-reference-final .ref-speed b{
  color:#143b9d;
  font-family:Arial,sans-serif;
  font-size:56px;
  font-weight:800;
  line-height:1;
}

#packages.package-reference-final .ref-speed strong{
  color:#143b9d;
  font-family:Arial,sans-serif;
  font-size:16px;
  font-weight:800;
  line-height:1;
}

#packages.package-reference-final .ref-price{
  margin:0 0 12px;
  padding:8px 8px;
  border-radius:8px;
  background:#edf4ff;
  color:#11377f;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
  font-size:17px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
}

#packages.package-reference-final .ref-price span{
  font-size:12px;
  font-weight:600;
}

#packages.package-reference-final .ref-plan-body ul{
  flex:1;
  list-style:none;
  margin:0 0 13px;
  padding:11px 0 10px;
  border-top:1px solid #e6edf7;
  text-align:left;
}

#packages.package-reference-final .ref-plan-body li{
  position:relative;
  margin:0;
  padding:5px 0 5px 23px;
  color:var(--pkg-text);
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
}

#packages.package-reference-final .ref-plan-body li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:2px;
  color:#0aaa59;
  font-family:Arial,sans-serif;
  font-size:17px;
  font-weight:900;
}

#packages.package-reference-final .ref-plan-body a{
  width:100%;
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  border-radius:8px;
  color:#fff!important;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none!important;
  transition:filter .2s ease,transform .2s ease;
}

#packages.package-reference-final .ref-plan-body a:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}

#packages.package-reference-final .ref-basic .ref-plan-body a{background:#125bd8}
#packages.package-reference-final .ref-standard .ref-plan-body a{background:#08aa51}
#packages.package-reference-final .ref-premium .ref-plan-body a{background:#ff7200}
#packages.package-reference-final .ref-ultimate .ref-plan-body a{background:#681bdf}

#packages.package-reference-final .ref-benefits{
  display:grid;
  grid-template-columns:repeat(4,max-content);
  justify-content:center;
  align-items:center;
  gap:48px;
  margin-top:32px;
}

#packages.package-reference-final .ref-benefits>div{
  display:flex;
  align-items:center;
  gap:9px;
  color:#5c6d95;
  white-space:nowrap;
}

#packages.package-reference-final .ref-benefits i{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf3ff;
  color:#1268e5;
  font-family:Arial,sans-serif;
  font-size:21px;
  font-style:normal;
}

#packages.package-reference-final .ref-benefits span{
  color:#5c6d95;
  font-family:"Hind Siliguri","Noto Sans Bengali",sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
}

/* Decorative elements */
#packages.package-reference-final .package-bg{
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
}

#packages.package-reference-final .package-bg-left{
  width:340px;
  height:340px;
  left:-225px;
  top:-190px;
  background:#eaf3ff;
}

#packages.package-reference-final .package-bg-right{
  width:310px;
  height:310px;
  right:-215px;
  bottom:-205px;
  background:#edf7ff;
}

#packages.package-reference-final .package-dots{
  position:absolute;
  z-index:1;
  width:92px;
  height:115px;
  opacity:.68;
  pointer-events:none;
  background-image:radial-gradient(#c7dcfa 2px,transparent 2px);
  background-size:19px 19px;
}

#packages.package-reference-final .package-dots-left{
  left:16px;
  top:92px;
}

#packages.package-reference-final .package-dots-right{
  right:14px;
  bottom:90px;
}

#packages.package-reference-final .package-wifi-mark{
  position:absolute;
  z-index:1;
  top:58px;
  right:60px;
  color:#d6e4fa;
  font-family:Arial,sans-serif;
  font-size:70px;
  font-weight:700;
  line-height:1;
  letter-spacing:-12px;
  opacity:.72;
  transform:rotate(-90deg);
  pointer-events:none;
}

/* Tablet */
@media (max-width:1050px){
  #packages.package-reference-final .package-reference-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:900px;
    margin-inline:auto;
    gap:18px;
  }

  #packages.package-reference-final .ref-benefits{
    grid-template-columns:repeat(2,max-content);
    gap:18px 42px;
  }
}

/* Mobile */
@media (max-width:680px){
  #packages.package-reference-final{
    padding:45px 0 40px;
  }

  #packages.package-reference-final .package-reference-wrap{
    width:min(100% - 24px,520px);
  }

  #packages.package-reference-final .package-reference-title{
    margin-bottom:25px;
  }

  #packages.package-reference-final .package-reference-title small{
    gap:9px;
    font-size:9px;
    letter-spacing:1.5px;
  }

  #packages.package-reference-final .package-reference-title small span{
    width:22px;
  }

  #packages.package-reference-final .package-reference-title h2{
    font-size:28px;
  }

  #packages.package-reference-final .package-reference-title p{
    padding-inline:5px;
    font-size:12px;
  }

  #packages.package-reference-final .package-reference-grid{
    grid-template-columns:1fr;
    gap:15px;
  }

  #packages.package-reference-final .ref-plan{
    width:100%;
    max-width:520px;
    margin-inline:auto;
  }

  #packages.package-reference-final .ref-plan-head{
    min-height:82px;
    padding:14px 16px;
  }

  #packages.package-reference-final .ref-plan-head h3{
    font-size:19px;
  }

  #packages.package-reference-final .ref-plan-head p{
    font-size:12px;
  }

  #packages.package-reference-final .ref-plan-icon{
    flex-basis:46px;
    width:46px;
    height:46px;
    font-size:23px;
  }

  #packages.package-reference-final .ref-plan-body{
    padding:17px 18px 18px;
  }

  #packages.package-reference-final .ref-speed b{
    font-size:50px;
  }

  #packages.package-reference-final .ref-benefits{
    grid-template-columns:1fr;
    gap:10px;
  }

  #packages.package-reference-final .ref-benefits>div{
    justify-content:center;
  }

  #packages.package-reference-final .package-dots{
    display:none;
  }

  #packages.package-reference-final .package-wifi-mark{
    right:-18px;
    top:22px;
    font-size:58px;
  }
}

/* Small phones */
@media (max-width:390px){
  #packages.package-reference-final .package-reference-title h2{
    font-size:25px;
  }

  #packages.package-reference-final .ref-plan-body{
    padding-inline:15px;
  }

  #packages.package-reference-final .ref-speed b{
    font-size:46px;
  }

  #packages.package-reference-final .ref-plan-body li{
    font-size:11px;
  }
}