:root{
  --bg:#0a0a0a;
  --card-bg:#1a1a1a;
  --card-bg-2:#1e1e1e;
  --accent:#cfff04;
  --text:#ffffff;
  --muted:#8c8c8c;
  --price:rgb(240,237,232);
  --radius-lg:20px;
  --font:'Poppins',system-ui,sans-serif;
  --font-price:'Unbounded',sans-serif;
  --font-secondary:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.phone-frame{
  width:100%;
  max-width:424px;
  min-height:100vh;
  position:relative;
  background:var(--bg);
}

.hero{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#151515;
}

.hero__slides{position:absolute;inset:0}

.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
}

.hero__slide--active{opacity:1}

.hero__image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
}

.hero__overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  pointer-events:none;
}

.hero__title{
  position:absolute;
  left:20px;
  bottom:26px;
  z-index:2;
  font-size:26px;
  line-height:1.15;
  font-weight:700;
}

.hero__title--accent{color:var(--accent)}

.hero__dots{
  position:absolute;
  right:16px;
  bottom:20px;
  z-index:2;
  display:flex;
  gap:6px;
}

.hero__dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:all .3s ease;
  cursor:pointer;
}

.hero__dots span.active{
  width:16px;
  border-radius:4px;
  background:var(--accent);
}

.packages{
  padding:22px 18px 6px;
}

.packages__label{
  margin-bottom:14px;
  color:rgb(90,90,90);
  font-family:var(--font-secondary);
  font-size:12px;
  font-style:normal;
  font-weight:400;
  line-height:normal;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.package-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.package-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content 12px;
  align-items:center;
  column-gap:12px;
  padding:16px 18px;
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  background:var(--card-bg);
  color:inherit;
  transition:transform .15s ease,border-color .2s ease;
}

.package-card:hover{transform:translateY(-2px)}

.package-card--highlight{
  border-color:var(--accent);
  background:var(--card-bg-2);
  box-shadow:0 0 18px rgba(207,255,4,.12);
}

.package-card__info{min-width:0}

.package-card__name{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgb(240,237,232);
  font-family:var(--font-price);
  font-size:13px;
  font-style:normal;
  font-weight:600;
  line-height:normal;
}

.badge{
  padding:3px 8px;
  border-radius:20px;
  background:var(--accent);
  color:#101010;
  font-family:var(--font-secondary);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}

.package-card__desc{
  margin-top:4px;
  color:rgb(90,90,90);
  font-family:var(--font-secondary);
  font-size:12px;
  font-style:normal;
  font-weight:400;
  line-height:normal;
}

.package-card__price{
  justify-self:end;
  text-align:right;
}

.package-card__value{
  color:var(--price);
  font-family:var(--font-price);
  font-size:20px;
  font-style:normal;
  font-weight:700;
  line-height:20px;
  white-space:nowrap;
}

.package-card__value strong,
.package-card__value span{font:inherit}

.package-card__unit{
  margin-top:2px;
  color:rgb(90,90,90);
  font-family:var(--font-secondary);
  font-size:12px;
  font-style:normal;
  font-weight:400;
  line-height:normal;
}

.package-card__arrow{
  justify-self:end;
  color:var(--muted);
  font-size:20px;
}

.package-card__arrow--accent{color:var(--accent)}

.footer{
  padding:26px 20px 40px;
  color:rgb(90,90,90);
  font-family:var(--font-secondary);
  font-size:12px;
  font-style:normal;
  font-weight:400;
  line-height:normal;
  text-align:center;
}

.footer__sub{margin-top:7px}

@media (min-width:425px){
  body{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .hero__slide,
  .hero__dots span,
  .package-card{
    transition:none;
  }
}