/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:     #15203f;
  --btn-ig:   #f5a800;
  --btn-fb:   #e87600;
  --btn-tt:   #d93535;
  --btn-yt:   #c8105a;
  --btn-w27:  #9b1a6e;
  --btn-wimo: #3b2a6e;
  --max-w:    480px;

  /* Light body gradient sampled from the designer's background (hatter2):
     cyan on the left, white in the centre, deeper blue on the right. */
  --body-grad: linear-gradient(100deg,
                 #bfe3f6 0%, #ffffff 45%, #eef6fc 60%, #7ba6cf 100%);
}

html {
  min-height: 100%;
  background: var(--body-grad) no-repeat center top;
  background-size: 100% 100%;
}

body {
  min-height: 100vh;
  background: transparent;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #fff;
  overflow-x: hidden;
}

/* Deep-blue accent in the bottom-right corner, echoing the designer's art */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 100% 100%,
               rgba(20,88,166,0.55) 0%, rgba(20,88,166,0) 55%);
}

/* ── Page wrapper ── */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-wrapper > * { min-width: 0; max-width: 100%; }

/* ── Hero ── */
/* The navy header has generous bottom padding; an overlaid light SVG carves
   the curved bottom edge (thin navy on the right, deep on the left), matching
   the reference mockup. */
.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--navy) url("assets/bg-header.png") center / cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 52px 24px 140px;
}

.hero-logo {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
}

.hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;            /* overlap the seam by 1px */
  width: 100%;
  height: 150px;
  display: block;
}

/* ── Links ── */
.links {
  width: 100%;
  max-width: var(--max-w);
  padding: 16px 20px 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Buttons ── */
.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.link-btn:hover  { filter: brightness(1.08); transform: translateY(-2px); }
.link-btn:active { filter: brightness(0.94); transform: translateY(3px); }

/* Icon: designer's SVG recoloured to white via CSS mask */
.link-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* Per-button colours + colour-matched bottom shadow */
.instagram       { background: var(--btn-ig);   box-shadow: 0 6px 0 #a86d00; }
.facebook        { background: var(--btn-fb);   box-shadow: 0 6px 0 #a34f00; }
.tiktok          { background: var(--btn-tt);   box-shadow: 0 6px 0 #961212; }
.youtube         { background: var(--btn-yt);   box-shadow: 0 6px 0 #890a3d; }
.website-imo2027 { background: var(--btn-w27);  box-shadow: 0 6px 0 #6a0f4c; }
.website-imo     { background: var(--btn-wimo); box-shadow: 0 6px 0 #261748; }

.instagram:active       { box-shadow: 0 2px 0 #a86d00; }
.facebook:active        { box-shadow: 0 2px 0 #a34f00; }
.tiktok:active          { box-shadow: 0 2px 0 #961212; }
.youtube:active         { box-shadow: 0 2px 0 #890a3d; }
.website-imo2027:active { box-shadow: 0 2px 0 #6a0f4c; }
.website-imo:active     { box-shadow: 0 2px 0 #261748; }

.email {
  background: #fff;
  color: #1a1a2e;
  font-size: 15px;
  border: 1.5px solid #ccd3e8;
  box-shadow: 0 6px 0 #b0bcd4;
}
.email:active { box-shadow: 0 2px 0 #b0bcd4; }
.email .link-icon { background-color: #1a1a2e; }

.divider { margin: 2px 0; }

/* ── Tablet ── */
@media (min-width: 680px) {
  .hero {
    padding: 48px 32px 150px;
  }
  .hero-logo { max-width: 440px; }
  .hero-wave { height: 165px; }

  .links {
    max-width: 560px;
    padding: 18px 0 64px;
  }

  .link-btn {
    font-size: 19px;
    padding: 18px 28px;
  }
}

/* ── Desktop ── */
@media (min-width: 1024px) {
  .hero { padding: 60px 32px 175px; }
  .hero-logo { max-width: 480px; }
  .hero-wave { height: 185px; }

  .links {
    max-width: 600px;
    padding: 20px 0 72px;
  }
}