@font-face{font-family:'Monserrat_bld';src:url("../fonts/Montserrat-Bold.ttf"),url("../fonts/Montserrat-Bold.otf")}
@font-face{font-family:'Monserrat_reg';src:url("../fonts/Montserrat-Regular.ttf"),url("../fonts/Montserrat-Regular.otf")}

*,*::before,*::after{box-sizing:border-box}
html,body{font-family:'Monserrat_reg';margin:0;padding:0;min-height:100vh}

body{
  background:url("../images/background.png") no-repeat center center/cover;
  min-height:100vh;
}

.page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto auto;
  grid-template-areas:
    "logo     phone"
    "text     phone"
    "cta      phone"
    "download phone";
  padding:5vh 5vw;
  column-gap:0;
  row-gap:3vh;
  align-content:center;
}

/* — Logo — */
.logo-wrap{grid-area:logo;display:flex;justify-content:center;align-items:flex-start}
.logo{width:clamp(110px,12vw,180px)}

/* — Text image — */
.text-wrap{grid-area:text;display:flex;justify-content:center;align-items:center}
.text-img{width:100%;max-width:480px}

/* — Phone — */
.phone-wrap{
  grid-area:phone;
  display:flex;
  align-items:center;
  justify-content:center;
}
.phone{max-height:82vh;max-width:100%;width:auto}

/* — CTA button — */
.cta-wrap{grid-area:cta;display:flex;justify-content:center;align-items:center}
.btn-cta{
  display:inline-block;
  background:#008CCF;
  color:#fff;
  text-decoration:none;
  border-radius:60px;
  padding:16px 40px;
  font-size:clamp(.9em,1.1vw,1.15em);
  font-family:'Monserrat_reg';
  cursor:pointer;
  border:none;
  transition:background .2s;
  white-space:nowrap;
}
.btn-cta:hover{background:#0079b3}

/* — Download section — */
.download-wrap{grid-area:download;text-align:center}
.download-title{
  font-family:'Monserrat_bld';
  font-size:clamp(1em,1.3vw,1.5em);
  color:#002E84;
  margin:0 0 4px 0;
}
.download-subtitle{
  font-size:clamp(.85em,1vw,1.1em);
  color:#002E84;
  margin:0 0 16px 0;
}
.store-buttons{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.store-btn{height:clamp(36px,4vw,52px);width:auto}

/* ── Mobile ── */
@media screen and (max-width:991px){
  .page{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:3.5vh 6vw 3vh;
    gap:3vh;
  }
  .logo-wrap{order:1}
  .text-wrap{order:2}
  .phone-wrap{order:3}
  .cta-wrap{order:4;width:100%;justify-content:center}
  .download-wrap{order:5;width:100%}

  .logo{width:clamp(70px,18vw,95px)}
  .text-img{max-width:68vw}
  .phone{max-height:40vh;max-width:65vw}
  .btn-cta{width:82%;text-align:center;font-size:clamp(.78em,3.5vw,.92em);padding:13px 28px}
  .store-buttons{justify-content:center}
  .store-btn{height:clamp(30px,8vw,42px)}
  .download-title{font-size:clamp(.82em,3.5vw,1em)}
  .download-subtitle{font-size:clamp(.72em,3vw,.88em)}
}