/* ========== Base ========= */
:root{
  --red:#ee4056;
  --ink:#0b0b0b;
  --cloud:#f2f2f2;
  --accent:#fbef2f;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background: var(--red);
  color:#fff;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }

/* ========== Banner ========= */
.banner{
  position:relative;
  min-height: 220px;
  background: var(--cloud) url('clouds.png') center/cover no-repeat;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  /* IMPORTANT: allow the circular logo to overlap below without being cut off */
  overflow: visible;
  isolation:isolate; /* create a new stacking context for safer z-indexing */
}

/* soft fade overlay where clouds meet red */
.banner::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:84px;
  background: linear-gradient(to bottom, rgba(238,64,86,0) 0%, rgba(238,64,86,.12) 35%, rgba(238,64,86,.45) 70%, rgba(238,64,86,1) 100%);
  z-index:1;
  pointer-events:none;
}

/* slanted red cut using ::after */
.banner::after{
  content:"";
  position:absolute;
  inset:auto 0 -6vw 0;
  height: 34vw;
  max-height: 240px;
  background: var(--red);
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
  z-index:0;
}

.banner__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding: 24px 16px 0 16px;
  z-index:2; /* above gradient and wedge */
}

.brand{
  width: 220px;
  height:auto;
  border-radius:50%;
  background:#fff;
  padding:18px;
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
  transform: translateY(56%); /* overlap the red nicely */
  position:relative;
  z-index:3; /* top-most so it never hides behind other elements */
}

/* ========== Main / Success Card ========= */
.main{
  /* leave generous space so the logo doesn't sit on the checkmark */
  padding: clamp(110px, 13vw, 140px) 16px 56px;
}

.card{
  max-width: 880px;
  margin: 0 auto;
  text-align:center;
  position:relative;
  z-index:1;
}

.success__icon{
  width: 120px;
  margin: 28px auto 14px;
  position:relative;
  z-index:0;
}

.headline{
  font-family: 'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 1px;
  font-size: clamp(44px, 8vw, 70px);
  line-height:1;
  margin: 10px 0 6px;
}

.lead{
  font-weight:600;
  font-size: clamp(14px, 2.6vw, 18px);
  line-height:1.6;
  max-width: 980px;
  margin: 10px auto 22px;
}

.pill{
  display:inline-block;
  border:0;
  background: var(--accent);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(14px, 2.8vw, 18px);
  padding: 14px 38px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  cursor: default;
}

/* ========== Small tweaks ========= */
@media (min-width: 768px){
  .brand{ width: 260px; transform: translateY(58%); }
  .success__icon{ width: 130px; }
}

@media (max-width:480px){
  .pill{ padding: 12px 28px; }
  .brand{ width: 200px; transform: translateY(58%); }
}