/* styles.css */
:root{
  --w: #ffffff;

  --glassA: rgba(255,255,255,0.22);
  --glassB: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.28);

  --shadow: 0 30px 90px rgba(0,0,0,0.42);
  --radius: 24px;

  --btn1: #e9fff3;
  --btn2: #8ff0b8;
  --btn3: #35d27c;

  --gold: #ffd76a;
  --whiteSoft: rgba(255,255,255,0.78);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--w);
}

body{
  overflow-x: hidden;
}

/* Background image */
.bg{
  position: fixed;
  inset: 0;
  background-image: url("assets/vecteezy_yellow-green-background-design-royalty-free-vector-wallpaper_17743713.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 35%;
  background-attachment: fixed;
  transform: scale(1.12);
}

.bgOverlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 700px at 25% 20%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(900px 700px at 80% 10%, rgba(255,255,255,0.08), transparent 62%),
    linear-gradient(rgba(6,48,27,0.86), rgba(6,48,27,0.86));
}

/* Layout */
.wrap{
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 16px 42px;
}

.top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo{
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.title{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.subtitle{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78);
  margin-top: 4px;
}

/* Crystal glass card */
.card{
  position: relative;
  background: linear-gradient(180deg, var(--glassA), var(--glassB));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.28);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
}

/* Shine */
.card::before{
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 80%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0)
  );
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}

/* BP watermark */
.card::after{
  content: "BP";
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-10deg);
  font-size: clamp(140px, 18vw, 280px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.06);
  text-shadow: 0 30px 80px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 0;
}

/* Content */
.hero{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 22px;
  padding: 26px;
}

/* Left */
.heroLeft{
  text-align: center;
}

.headline{
  margin: 0 0 18px 0;
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  padding-bottom: 14px;
}

.headline::after{
  content:"";
  display:block;
  width: 140px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
}

.copy{
  margin: 0 auto 26px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  max-width: 560px;
}

/* Stats */
.stats{
  position: relative;
  margin: 40px auto 34px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: rgba(0,0,0,0.16);
  max-width: 560px;
}

.stats::before{
  content:"TRUSTED BY USERS";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}

.stat{
  min-width: 170px;
}

.statLabel{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 6px;
}

.statSub{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.70);
}

.ratingRow, .downloadRow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ratingValue, .downloadValue{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.stars{
  display: inline-flex;
  gap: 4px;
  transform: translateY(-1px);
}

.star{
  font-size: 16px;
  opacity: 0.35;
  color: var(--gold);
}

.star.filled{ opacity: 1; }
.star.half{ opacity: 0.75; }

.divider{
  width: 1px;
  background: rgba(255,255,255,0.16);
}

/* CTA */
.cta{
  position: relative;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.cta::before{
  content:"";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 92px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.16), rgba(53,210,124,0.0) 70%);
  pointer-events: none;
  z-index: 0;
}

.btn{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 900;
  color: #05351e;
  background: linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 55%, var(--btn3) 100%);
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: 0 20px 55px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.75);
  transition: transform 160ms ease, filter 160ms ease;
  min-width: 240px;
}

.btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(1px);
  filter: brightness(0.98);
}

.helpText{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.84);
  text-align: center;
}

.finePrint{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  text-align: center;
}

/* Right phone */
.heroRight{
  display: flex;
  align-items: center;
  justify-content: center;
}

.phoneMock{
  width: 310px;
  height: 450px;
  border-radius: 34px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: 0 22px 70px rgba(0,0,0,0.28);
  overflow: hidden;
  position: relative;
}

.phoneTop, .phoneBottom{
  height: 44px;
  background: rgba(255,255,255,0.07);
}

/* Phone screen */
.phoneScreen{
  position: relative;
  height: calc(100% - 88px);
  padding: 16px;
  padding-bottom: 118px; /* space for install button and dots */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Soft white circle highlight behind reviews */
.phoneScreen::before{
  content:"";
  position:absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.0) 70%
  );
  z-index: 0;
  pointer-events: none;
}

.phoneScreen > *{
  position: relative;
  z-index: 2;
}

/* Header inside phone */
.phoneHeader{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}

.phoneAppIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.34);
  color: #ffffff;
}

.phoneHeaderText{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.phoneHeaderTitle{
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,0.96);
}

.phoneHeaderSub{
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.74);
}

.phoneHeaderPill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.40);
  color: #ffffff;
  white-space: nowrap;
}

/* Reviews */
.phoneReviews{
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.reviewItem{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
}

.reviewAvatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(255,255,255,0.26);
  border: 1px solid rgba(255,255,255,0.46);
  color: #ffffff;
}

.reviewBody{
  min-width: 0;
}

.reviewTopRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reviewName{
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviewStars{
  display: flex;
  gap: 3px;
  align-items: center;
  color: var(--gold);
}

.rStar{
  font-size: 12px;
  color: #ffd66b;
}

.rStar.dim{ opacity: 0.45; }

.reviewText{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255,255,255,0.90);
}

.reviewMeta{
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

/* Install button docked properly */
.phoneScreen{
  position: relative;
  height: calc(100% - 88px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* reserve space at the bottom so reviews never get covered */
.phoneReviews{
  flex: 1;
  min-height: 0;
  padding-bottom: 110px;
}

/* install button perfectly centered in bottom area */
.phoneInstallWrap{
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.phoneInstallBtn{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 0;
  background: #ffffff;
  color: #064322;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.85);
}

.phoneInstallText{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  line-height: 1;
}

/* dots locked at the very bottom center */
.phoneFooter{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}



.phoneInstallBtn{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 0;
  cursor: default;
  background: #ffffff;
  color: #064322;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.85);
}

.phoneInstallText{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  line-height: 1;
}

/* Dots pinned at bottom */
.phoneFooter{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 6;
}

.phoneFooterDot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}

.phoneFooterDot.active{
  width: 18px;
  background: rgba(255,255,255,0.60);
}

/* Footer */
.footer{
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .heroRight{ display: none; }
}

@media (max-width: 520px){
  .wrap{ padding: 18px 12px 30px; }
  .hero{ padding: 18px; }
  .stats{ flex-direction: column; gap: 12px; padding: 16px; }
  .divider{ display: none; }
  .btn{ width: 100%; min-width: 0; }
  .cta::before{ width: 260px; }
}


/* HARD REMOVE phone install button */
.phoneInstallWrap,
.phoneInstallBtn,
.phoneInstallText {
  display: none !important;
}