:root {
  --sky-top: #3f2a67;
  --sky-mid: #6f3f74;
  --sky-glow: #df5f79;
  --sunline: #f5a557;
  --sea-top: #4c7396;
  --sea-bottom: #315c80;

  --ink-strong: #181824;
  --ink-soft: #2a2b3c;
  --ink-muted: #3f4660;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", sans-serif;
  color: var(--ink-soft);
  background:
    linear-gradient(
      to bottom,
      var(--sky-top) 0%,
      #563472 24%,
      var(--sky-mid) 44%,
      var(--sky-glow) 66%,
      var(--sunline) 78%,
      #f0b976 84%,
      var(--sea-top) 88%,
      var(--sea-bottom) 100%
    );
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1rem, 3.2vw, 2.6rem);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* Soft central scrim so text keeps high contrast over vivid gradients. */
body > .page::before {
  content: "";
  position: fixed;
  inset: 8% 0 auto 0;
  height: 72vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(70% 50% at 50% 40%, #f4f1f6aa 0%, #f3eff340 56%, transparent 100%),
    linear-gradient(to bottom, #00000016 0%, transparent 42%);
}

body > .page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
  background:
    radial-gradient(circle at 16% 22%, #ffffff2f 0 2px, transparent 3px),
    radial-gradient(circle at 72% 34%, #ffffff33 0 2px, transparent 3px),
    radial-gradient(circle at 36% 64%, #ffffff22 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 84% 74%, #ffffff2b 0 1.5px, transparent 2.5px);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Decorative shoreline moved lower and softened to reduce visual competition. */
body::before {
  height: 15vh;
  opacity: 0.36;
  background:
    linear-gradient(to top, #1b30449c 0%, transparent 72%),
    radial-gradient(120% 120% at 36% 100%, #d5c5ac 0%, #c2b295 57%, transparent 58%);
  clip-path: polygon(0 100%, 0 68%, 16% 74%, 31% 79%, 48% 74%, 64% 83%, 81% 72%, 100% 78%, 100% 100%);
}

body::after {
  height: 20vh;
  opacity: 0.24;
  background:
    radial-gradient(52% 34% at 20% 96%, #dcccb5ad 0%, transparent 72%),
    radial-gradient(57% 36% at 82% 98%, #cfbea7ac 0%, transparent 73%),
    linear-gradient(to top, #234b6d7a 8%, transparent 60%);
}

.bg-shape {
  position: fixed;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.27;
  z-index: 0;
}

.shape-1 {
  width: 360px;
  height: 360px;
  top: -110px;
  left: -80px;
  background: #ff7d67;
}

.shape-2 {
  width: 430px;
  height: 430px;
  right: -130px;
  bottom: -140px;
  background: #3f7297;
}

.page {
  z-index: 1;
  width: min(96vw, 920px);
  position: relative;
}

.glass-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #b8ecff70;
  background:
    linear-gradient(160deg, #bbf1ff40 0%, #94d8f935 30%, #8ee6ff28 62%, #b6f8ff40 100%),
    linear-gradient(180deg, #d6f4ff2e 0%, #7bc6eb2a 55%, #7fd7f531 100%);
  backdrop-filter: blur(24px) saturate(170%) contrast(108%);
  -webkit-backdrop-filter: blur(24px) saturate(170%) contrast(108%);
  box-shadow: 0 22px 46px #10213b3b, inset 0 1px 0 #e8fbff99, inset 0 -1px 0 #74c9e655;
}

/* Faux reflection layers to mimic polished crystal glass. */
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  background:
    linear-gradient(112deg, #ffffff61 0%, #ffffff10 26%, transparent 45%),
    radial-gradient(80% 48% at 12% 4%, #ffffff52 0%, transparent 62%);
}

.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  background:
    repeating-linear-gradient(
      92deg,
      transparent 0 16px,
      #ffffff05 16px 24px
    ),
    linear-gradient(to bottom, #a6e2ff14 0%, transparent 45%, #62b8df1f 100%);
}

.glass-panel > * {
  position: relative;
  z-index: 1;
}

/* Hero is primary: larger, brighter and with clearer top highlight. */
.hero {
  border-radius: 24px;
  padding: clamp(1.4rem, 3.3vw, 2.45rem);
  animation: rise 500ms ease;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 54%;
  background: linear-gradient(to bottom, #dff9ff66 0%, #ffffff08 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-media {
  margin: -0.45rem auto 1rem;
  width: min(100%, 560px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ffffffc2;
  box-shadow: 0 18px 34px #1f1a2c4f;
  position: relative;
  background: #243246;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, #0b132765 0%, transparent 55%),
    linear-gradient(to bottom, #ffffff2a 0%, transparent 35%);
}

.hero-media img {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 320px);
  object-fit: cover;
  object-position: center center;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2f3551;
}

h1 {
  margin: 0.36rem 0 0.7rem;
  font-size: clamp(2.05rem, 5.2vw, 3.35rem);
  line-height: 1.02;
  color: var(--ink-strong);
  text-wrap: balance;
}

.lead {
  margin: 0;
  max-width: 58ch;
  line-height: 1.5;
  color: #2b3044;
}

.metric-row {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
}

.metric {
  margin: 0;
  border: 1px solid #d7f4ff8c;
  border-radius: 11px;
  padding: 0.54rem 0.62rem;
  font-size: 0.82rem;
  color: #24324d;
  background:
    linear-gradient(145deg, #f7fdff88 0%, #d8f0ff52 100%),
    linear-gradient(180deg, #ffffff31 0%, #9cd2ea2e 100%);
  box-shadow: inset 0 1px 0 #ffffffc7;
}

.metric strong {
  display: block;
  font-size: 0.9rem;
  color: #162540;
}

/* Secondary panel: calmer opacity and tighter rhythm than the hero. */
.facts {
  margin-top: 0.95rem;
  border-radius: 18px;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  background:
    linear-gradient(155deg, #c6f0ff35 0%, #8fd6f42a 45%, #a3eeff3a 100%),
    linear-gradient(180deg, #cbf3ff28 0%, #8fd0ed2a 100%);
}

.facts::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(to bottom, #7fd4ff 0%, #64acd8 100%);
  opacity: 0.72;
}

.facts-head {
  margin-bottom: 0.8rem;
}

.facts-head h2 {
  margin: 0;
  font-size: 0.96rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2f476f;
}

.facts-head p {
  margin: 0.3rem 0 0;
  max-width: 62ch;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.fact-item {
  position: relative;
  overflow: hidden;
  border: 1px solid #c3f1ff66;
  border-radius: 13px;
  background:
    linear-gradient(164deg, #d9f8ff38 0%, #9fdbf629 56%, #cdf6ff3a 100%),
    linear-gradient(180deg, #f0fdff30 0%, #8acbe925 100%);
  padding: 0.8rem 0.86rem;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 #f2fdff72;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.fact-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(120deg, #ffffff2d 0%, transparent 44%);
}

.fact-item > * {
  position: relative;
  z-index: 1;
}

.fact-item h3 {
  margin: 0 0 0.32rem;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #344f7a;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.fact-item h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, #3f7cbc 0%, #62b9e3 100%);
  box-shadow: 0 0 0 3px #b7e4ff60;
}

.fact-item p {
  margin: 0;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #252b3f;
}

.fact-item strong {
  color: #1c2540;
}

.fact-item:hover {
  transform: translateY(-2px);
  border-color: #d8f6ffaf;
  box-shadow: 0 10px 20px #1b35574a, inset 0 1px 0 #f2fdff72;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .metric-row {
    grid-template-columns: 1fr;
  }

  .fact-grid {
    grid-template-columns: 1fr;
    gap: 0.58rem;
  }

  .fact-item p {
    max-width: 52ch;
  }
}

@media (max-width: 520px) {
  body {
    padding: 0.95rem;
  }

  .hero {
    padding: 1.2rem;
    border-radius: 16px;
  }

  .facts {
    border-radius: 14px;
    padding: 0.95rem;
  }

  .eyebrow {
    letter-spacing: 0.06em;
  }

  .hero-media {
    margin: -0.2rem auto 0.85rem;
    width: min(100%, 380px);
    border-radius: 12px;
  }
}