:root{
  --blue:#00477a;
  --blue2:#0062b3;
  --green:#4caf34;
  --darkgreen:#08712d;
  --orange:#f28a00;
  --paper:#ffffff;
  --soft:#f5f8fb;
  --text:#172033;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#eef7ff,#ffffff);
  color:var(--text);
}

.page{
  width:min(1080px,100%);
  margin:0 auto;
  background:#fff;
  padding:38px 34px 24px;
  min-height:100vh;
}

.hero{
  display:grid;
  grid-template-columns: 1fr 270px;
  gap:28px;
  align-items:center;
  margin-bottom:28px;
}

.logo{
  width:100%;
  max-width:270px;
  justify-self:end;
}

h1{
  margin:0;
  font-size:clamp(3rem,8vw,6.7rem);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:-2px;
  color:var(--blue);
  font-weight:900;
}

h1 span{
  display:block;
  color:var(--green);
}

.tag{
  display:inline-block;
  margin:18px 0 8px;
  padding:10px 18px;
  background:var(--blue);
  color:white;
  border-radius:12px;
  text-transform:uppercase;
  font-weight:900;
  font-size:clamp(1.2rem,3vw,2rem);
}

.subtitle{
  margin:0;
  color:var(--blue);
  font-size:1.45rem;
  font-weight:700;
}

.cards{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.card{
  position:relative;
  display:grid;
  grid-template-columns:72px 92px 1fr 210px;
  gap:18px;
  align-items:center;
  padding:22px;
  border-radius:22px;
  border:3px solid transparent;
}

.card.green{background:#f1faef;border-color:#6ebc59}
.card.blue{background:#eef7ff;border-color:#2372c6}
.card.orange{background:#fff6ea;border-color:#f28a00}

.num{
  width:62px;
  height:62px;
  border-radius:50%;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.4rem;
  font-weight:900;
}
.green .num{background:var(--darkgreen)}
.blue .num{background:var(--blue2)}
.orange .num{background:var(--orange)}

.icon{
  font-size:4rem;
  text-align:center;
}

.card h2{
  margin:0 0 10px;
  font-size:clamp(1.45rem,3vw,2.2rem);
  line-height:1.05;
  text-transform:uppercase;
  font-weight:900;
}

.green h2{color:var(--darkgreen)}
.blue h2{color:var(--blue2)}
.orange h2{color:var(--orange)}

.card p{
  margin:7px 0;
  font-size:1.15rem;
  line-height:1.32;
}

.link{
  display:block;
  margin-top:10px;
  color:#004fc4;
  font-weight:800;
  word-break:break-word;
}

.qrbox{
  background:white;
  border-radius:14px;
  padding:10px;
  text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.12);
  border:4px solid currentColor;
}

.green .qrbox{color:var(--darkgreen)}
.blue .qrbox{color:var(--blue2)}
.orange .qrbox{color:var(--orange)}

.qrbox strong{
  display:block;
  color:white;
  background:currentColor;
  margin:-10px -10px 8px;
  padding:8px 4px;
  text-transform:uppercase;
  border-radius:9px 9px 0 0;
  font-size:1rem;
}

.qrbox strong::first-line{color:white}
.qrbox img{
  width:160px;
  height:160px;
  image-rendering: pixelated;
  background:white;
  padding:6px;
}
.qrbox span{
  display:block;
  font-weight:900;
  font-size:.98rem;
  line-height:1.1;
}

.cta{
  margin-top:22px;
  background:linear-gradient(90deg,var(--blue),#002f62);
  color:white;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:22px 28px;
}

.megaphone{font-size:3.8rem}
.cta h2{
  margin:0;
  text-transform:uppercase;
  font-size:2rem;
}
.cta p{
  margin:4px 0 0;
  color:#a7e36b;
  font-weight:900;
  font-size:1.35rem;
}

footer{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  align-items:center;
  margin-top:18px;
  color:var(--blue);
}
footer img{width:110px}
footer p{margin:0}
.hashtags{
  margin-top:4px;
  color:#0c4e8a;
  font-weight:700;
}

@media (max-width: 760px){
  .page{padding:22px 14px}
  .hero{grid-template-columns:1fr; text-align:center}
  .logo{justify-self:center; max-width:210px}
  .card{
    grid-template-columns:56px 1fr;
    gap:12px;
    padding:16px;
  }
  .icon{display:none}
  .content{grid-column:1 / -1}
  .qrbox{grid-column:1 / -1; max-width:240px; justify-self:center}
  .qrbox img{width:180px;height:180px}
  .cta{padding:18px; gap:14px}
  .cta h2{font-size:1.35rem}
  .cta p{font-size:1rem}
}