:root {
  --sky-top: #052c5c;
  --sky-high: #0a4d8c;
  --sky-mid: #2e9ede;
  --sky-low: #86d4f2;
  --sky-haze: #dff7fd;

  --grass-deep: #12662f;
  --grass-mid: #2f9a4a;
  --grass-bright: #86e05c;

  --water-deep: #0a5a86;
  --water-mid: #1f9bc4;
  --water-bright: #7fe4f0;

  --glass-edge: rgba(255, 255, 255, 0.72);
  --glass-shadow:
    0 40px 90px rgba(3, 34, 62, 0.5),
    0 12px 30px rgba(3, 34, 62, 0.3),
    0 2px 6px rgba(3, 34, 62, 0.24);

  --text: #f4fbff;
  --muted: rgba(233, 248, 255, 0.8);

  --font-display: "Quicksand", "Segoe UI", "Frutiger", "Lucida Grande", Helvetica, Arial, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", "Frutiger", "Lucida Grande", Helvetica, Arial, sans-serif;

  --radius-panel: 30px;
  --radius-pill: 999px;

  --px: 0px;
  --py: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  background: #062a52;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------- stage */

.stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.sky {
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-high) 20%,
      #1877bd 38%,
      var(--sky-mid) 54%,
      var(--sky-low) 72%,
      var(--sky-haze) 88%,
      #eafcff 100%
    );
}

/* Aurora wash — the Aero "colored light in the air" layer. */
.sky-glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 40% at 78% 6%, rgba(255, 246, 200, 0.55), transparent 60%),
    radial-gradient(ellipse 70% 50% at 12% 18%, rgba(120, 255, 214, 0.22), transparent 62%),
    radial-gradient(ellipse 80% 44% at 50% 96%, rgba(150, 255, 190, 0.3), transparent 66%),
    radial-gradient(ellipse 50% 40% at 90% 60%, rgba(180, 150, 255, 0.18), transparent 64%);
  mix-blend-mode: screen;
  animation: aurora-breathe 18s ease-in-out infinite alternate;
}

@keyframes aurora-breathe {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}

.sky-rays {
  position: absolute;
  inset: -50% -20% 0;
  transform-origin: 78% 8%;
  opacity: 0.3;
  background:
    conic-gradient(
      from 196deg at 78% 8%,
      transparent 0deg,
      rgba(255, 255, 255, 0.55) 5deg,
      transparent 12deg,
      transparent 20deg,
      rgba(255, 255, 255, 0.34) 26deg,
      transparent 34deg,
      transparent 47deg,
      rgba(255, 255, 255, 0.5) 54deg,
      transparent 62deg,
      transparent 78deg,
      rgba(255, 255, 255, 0.3) 85deg,
      transparent 93deg
    );
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: ray-sweep 26s ease-in-out infinite alternate;
}

@keyframes ray-sweep {
  from { transform: rotate(-5deg); }
  to { transform: rotate(6deg); }
}

/* ------------------------------------------------------- glass swoosh */

.swoosh-wrap {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--px), var(--py), 0);
  filter: url(#swoosh-warp);
  opacity: 0.85;
}

.swoosh {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  transform-origin: center;
}

.swoosh-a {
  top: -46%;
  left: -22%;
  width: 116%;
  height: 116%;
  border: 42px solid transparent;
  border-top-color: rgba(160, 255, 235, 0.34);
  border-right-color: rgba(120, 220, 255, 0.26);
  filter: blur(16px);
  animation: swoosh-drift-a 34s ease-in-out infinite alternate;
}

.swoosh-b {
  top: 6%;
  left: -34%;
  width: 128%;
  height: 96%;
  border: 26px solid transparent;
  border-bottom-color: rgba(190, 255, 190, 0.3);
  border-left-color: rgba(255, 250, 190, 0.22);
  filter: blur(20px);
  animation: swoosh-drift-b 40s ease-in-out infinite alternate;
}

.swoosh-c {
  top: -18%;
  right: -40%;
  width: 90%;
  height: 130%;
  border: 18px solid transparent;
  border-left-color: rgba(200, 180, 255, 0.26);
  border-bottom-color: rgba(140, 240, 255, 0.24);
  filter: blur(12px);
  animation: swoosh-drift-c 30s ease-in-out infinite alternate;
}

@keyframes swoosh-drift-a {
  from { transform: rotate(-8deg) scale(1); }
  to { transform: rotate(10deg) scale(1.08); }
}

@keyframes swoosh-drift-b {
  from { transform: rotate(6deg) scale(1.04); }
  to { transform: rotate(-9deg) scale(1); }
}

@keyframes swoosh-drift-c {
  from { transform: rotate(12deg) scale(1); }
  to { transform: rotate(-6deg) scale(1.1); }
}

/* ---------------------------------------------------------- sun/flare */

.sun {
  position: absolute;
  top: 8%;
  left: 78%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  transform: translate3d(var(--px), var(--py), 0);
}

.sun-core {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 252, 225, 0.95) 40%, rgba(255, 240, 180, 0) 72%);
  filter: blur(2px);
  animation: flare-pulse 8s ease-in-out infinite;
}

.sun-bloom {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(190, 245, 255, 0.28) 26%, transparent 66%),
    radial-gradient(circle, rgba(160, 255, 220, 0.24) 0%, transparent 74%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: flare-pulse 8s ease-in-out infinite reverse;
}

@keyframes flare-pulse {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* Anamorphic ghosts strung along the sun→center axis. */
.flare-ghosts {
  position: absolute;
  top: 8%;
  left: 78%;
  width: 1px;
  height: 1px;
}

.flare-ghosts span {
  position: absolute;
  top: calc(var(--p) * 4.4);
  left: calc(var(--p) * -6.2);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 72%);
  box-shadow: 0 0 0 1px var(--c) inset;
  mix-blend-mode: screen;
  filter: blur(0.5px);
  animation: flare-pulse 8s ease-in-out infinite;
}

/* -------------------------------------------------------------- hills */

.hills {
  position: absolute;
  right: -6%;
  bottom: 17vh;
  left: -6%;
  height: 16vh;
  overflow: hidden;
  transform: translate3d(calc(var(--px) * -0.4), 0, 0);
}

/* Each hill is an oversized ellipse cropped by the layer, so only its
   crest arc shows above the horizon. */
.hill {
  position: absolute;
  bottom: -170%;
  height: 260%;
  border-radius: 50%;
}

.hill-far {
  left: -18%;
  width: 86%;
  background: linear-gradient(180deg, #46b063 0%, var(--grass-mid) 34%, #17702f 100%);
  filter: blur(2px) saturate(115%);
  opacity: 0.92;
}

.hill-near {
  right: -22%;
  width: 92%;
  background: linear-gradient(180deg, var(--grass-bright) 0%, #34a350 38%, var(--grass-deep) 100%);
  filter: saturate(125%);
  box-shadow: 0 -2px 14px rgba(180, 255, 160, 0.35);
}

/* Blades along the hill crest, drawn as a repeating conic comb. */
.grass {
  position: absolute;
  right: 0;
  bottom: -1vh;
  left: 0;
  height: 30px;
  background:
    repeating-conic-gradient(
      from 90deg at 50% 100%,
      #1d7f3c 0deg 2deg,
      transparent 2deg 8deg
    );
  background-size: 14px 30px;
  opacity: 0.55;
  filter: blur(0.4px);
  animation: grass-sway 7s ease-in-out infinite alternate;
}

@keyframes grass-sway {
  from { transform: skewX(-3deg); }
  to { transform: skewX(3deg); }
}

/* -------------------------------------------------------------- water */

.water {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 17vh;
  overflow: hidden;
  transform: translate3d(calc(var(--px) * -0.2), 0, 0);
}

.water-body {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(223, 247, 253, 0.75) 0%, var(--water-bright) 10%, var(--water-mid) 44%, var(--water-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.caustics {
  position: absolute;
  inset: -10% -10% 0;
  background:
    repeating-linear-gradient(
      2deg,
      transparent 0 10px,
      rgba(255, 255, 255, 0.55) 10px 13px,
      transparent 13px 26px
    ),
    repeating-linear-gradient(
      -3deg,
      transparent 0 16px,
      rgba(190, 250, 255, 0.45) 16px 19px,
      transparent 19px 38px
    );
  filter: url(#caustics);
  opacity: 0.42;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  animation: caustic-crawl 18s linear infinite;
}

@keyframes caustic-crawl {
  from { background-position: 0 0, 0 0; }
  to { background-position: 340px -120px, -280px 100px; }
}

/* Specular glitter path where the sun meets the water. */
.water-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 26%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.85) 0 2px,
      transparent 2px 9px
    );
  filter: blur(2px);
  opacity: 0.55;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 0%, #000 0%, transparent 76%);
  mask-image: radial-gradient(ellipse 60% 90% at 50% 0%, #000 0%, transparent 76%);
  animation: shine-flicker 4s ease-in-out infinite alternate;
}

@keyframes shine-flicker {
  from { opacity: 0.35; transform: scaleX(1); }
  to { opacity: 0.7; transform: scaleX(1.12); }
}

/* ------------------------------------------------------------ bubbles */

.bubbles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubbles-far {
  z-index: -1;
  filter: blur(1.6px);
  transform: translate3d(var(--px), var(--py), 0);
}

.bubbles-near {
  z-index: 3;
  filter: blur(0.3px);
}

.bubble {
  position: absolute;
  bottom: -22vh;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: var(--opacity);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.24) 16%, transparent 30%),
    radial-gradient(circle at 72% 78%, rgba(190, 250, 255, 0.6) 0%, transparent 44%),
    conic-gradient(
      from var(--spin),
      rgba(255, 180, 220, 0.32),
      rgba(180, 220, 255, 0.3),
      rgba(190, 255, 220, 0.32),
      rgba(255, 245, 180, 0.3),
      rgba(255, 180, 220, 0.32)
    ),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(255, 255, 255, 0.42) 84%, rgba(255, 255, 255, 0.85) 97%);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.5),
    0 0 16px rgba(190, 245, 255, 0.4);
  filter: hue-rotate(var(--hue));
  animation:
    bubble-rise var(--rise-duration) linear var(--rise-delay) infinite,
    bubble-sway var(--sway-duration) ease-in-out var(--rise-delay) infinite alternate;
}

@keyframes bubble-rise {
  from { transform: translateY(0) scale(0.8) rotate(0deg); }
  to { transform: translateY(-142vh) scale(1.14) rotate(140deg); }
}

@keyframes bubble-sway {
  from { margin-left: calc(var(--drift) * -0.5); }
  to { margin-left: calc(var(--drift) * 0.5); }
}

/* ----------------------------------------------------------- sparkles */

.sparkles {
  position: absolute;
  inset: 0;
}

.sparkle {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background:
    linear-gradient(0deg, transparent 46%, #fff 50%, transparent 54%),
    linear-gradient(90deg, transparent 46%, #fff 50%, transparent 54%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(210, 250, 255, 0.9);
  mix-blend-mode: screen;
  animation: twinkle var(--twinkle) ease-in-out var(--twinkle-delay) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1) rotate(90deg); }
}

/* --------------------------------------------------------------- page */

.page-shell {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  width: min(780px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0;
  align-items: center;
}

.hero {
  width: 100%;
}

/* -------------------------------------------------------- glass panel */

.glass-panel {
  position: relative;
  padding: 46px clamp(24px, 5vw, 54px) 42px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(96, 176, 226, 0.44) 0%, rgba(30, 110, 170, 0.36) 46%, rgba(12, 74, 122, 0.46) 100%);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.34),
    inset 0 0 60px rgba(190, 245, 255, 0.16);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(26px) saturate(180%) brightness(1.06);
  overflow: hidden;
  transform: translate3d(var(--px), var(--py), 0);
  animation: panel-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; }
}

/* Hard-edged Aero gloss over the top half. */
.panel-gloss {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 47%;
  pointer-events: none;
  border-radius: var(--radius-panel) var(--radius-panel) 50% 50% / var(--radius-panel) var(--radius-panel) 20% 20%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 100%);
}

/* Specular bar that travels across the glass. */
.panel-sweep {
  position: absolute;
  top: -60%;
  left: -60%;
  width: 45%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(22deg);
  filter: blur(14px);
  animation: sweep 9s ease-in-out 1.4s infinite;
}

@keyframes sweep {
  0% { left: -60%; }
  55%, 100% { left: 160%; }
}

/* Inner chrome rim. */
.panel-rim {
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: calc(var(--radius-panel) - 3px);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.14);
}

/* Panel reflection puddled underneath. */
.panel-reflection {
  height: 90px;
  margin: 0 clamp(18px, 4vw, 40px);
  border-radius: 0 0 40% 40% / 0 0 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(190, 245, 255, 0.05) 60%, transparent);
  filter: blur(7px);
  transform: scaleY(-1);
  opacity: 0.7;
  animation: reflect-wobble 6s ease-in-out infinite alternate;
}

@keyframes reflect-wobble {
  from { transform: scaleY(-1) scaleX(0.99); opacity: 0.55; }
  to { transform: scaleY(-1.08) scaleX(1.01); opacity: 0.78; }
}

/* ---------------------------------------------------------- hero copy */

/* Lifted above .panel-gloss, which paints later in DOM order and would
   otherwise lay a white wash over the type. */
.hero-copy {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08) 52%, rgba(120, 200, 240, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(4, 42, 76, 0.28);
  color: #fff;
  text-shadow: 0 1px 2px rgba(6, 52, 88, 0.55);
}

/* Liquid chrome. Dark-dominant on purpose: the glass behind is light
   blue, so a pale chrome dissolves into it. Deep navy with a white
   specular flash at the 50% break is what actually reads as metal. */
.wordmark {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 7vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.1;
  background:
    linear-gradient(
      180deg,
      #eaf7ff 0%,
      #9fd2ee 9%,
      #2f7fb5 26%,
      #0a4373 43%,
      #052c4e 49.6%,
      #ffffff 50%,
      #dff4ff 52.5%,
      #4b9cd0 64%,
      #0d4a7c 82%,
      #06375f 93%,
      #63aeda 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* White glow lifts the dark metal off the glass; the tight white
     top edge reads as the lit bevel. */
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 7px rgba(216, 245, 255, 0.55))
    drop-shadow(0 4px 10px rgba(4, 34, 62, 0.5));
}

/* Mirrored wordmark fading away below the type. */
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 62%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform: scaleY(-1);
  transform-origin: top;
  opacity: 0.28;
  filter: blur(1px);
  pointer-events: none;
}

.tagline {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 2vw, 1.06rem);
  font-weight: 500;
  letter-spacing: 0.004em;
  color: var(--muted);
  text-shadow: 0 1px 3px rgba(6, 52, 88, 0.5);
}

.intro {
  position: relative;
  margin: 28px 0 0;
  padding-top: 26px;
  font-size: 1.03rem;
  font-weight: 400;
  line-height: 1.76;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(6, 52, 88, 0.45);
}

/* Glass divider with a bright core. */
.intro::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 30%, rgba(190, 245, 255, 0.95) 50%, rgba(255, 255, 255, 0.85) 70%, transparent);
  box-shadow: 0 0 12px rgba(190, 245, 255, 0.8);
}

.text-link {
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  color: #eafaff;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

.text-link:hover,
.text-link:focus-visible {
  border-bottom-color: #fff;
  color: #fff;
  text-shadow: 0 0 16px rgba(180, 244, 255, 0.95);
}

/* ------------------------------------------------------------ buttons */

.link-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.aero-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 14px 27px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(53, 200, 245, 0.42) 51%, rgba(11, 110, 168, 0.62) 100%),
    linear-gradient(180deg, #4bb8e8 0%, #1a7fc4 50%, #0d5f9c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -3px 8px rgba(8, 70, 112, 0.45),
    inset 0 0 18px rgba(190, 245, 255, 0.2),
    0 8px 20px rgba(6, 52, 88, 0.38),
    0 1px 2px rgba(6, 52, 88, 0.34);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(5, 49, 79, 0.65);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, filter 0.18s ease;
}

.aero-button-mail {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(134, 224, 92, 0.44) 51%, rgba(24, 110, 52, 0.66) 100%),
    linear-gradient(180deg, #6fcf50 0%, #2f9a4a 50%, #1b6f36 100%);
}

.button-gloss {
  position: absolute;
  top: 1px;
  right: 1px;
  left: 1px;
  height: 46%;
  pointer-events: none;
  border-radius: var(--radius-pill) var(--radius-pill) 50% 50% / var(--radius-pill) var(--radius-pill) 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.button-shine {
  position: absolute;
  top: -50%;
  left: -80%;
  width: 40%;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: rotate(22deg);
  filter: blur(5px);
  transition: left 0.6s ease;
}

.aero-button:hover .button-shine,
.aero-button:focus-visible .button-shine {
  left: 140%;
}

.button-label {
  position: relative;
}

.aero-button:hover,
.aero-button:focus-visible {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.12) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -3px 8px rgba(8, 70, 112, 0.38),
    0 16px 32px rgba(6, 52, 88, 0.44),
    0 0 30px rgba(120, 226, 255, 0.65);
}

.aero-button:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    inset 0 3px 10px rgba(6, 52, 88, 0.55),
    0 2px 6px rgba(6, 52, 88, 0.32);
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------- footer */

.site-footer {
  margin-top: 6px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(6, 52, 88, 0.55);
}

/* -------------------------------------------------------- adaptations */

@media (max-width: 520px) {
  .page-shell {
    padding: 28px 0;
  }

  .glass-panel {
    padding: 34px 22px 32px;
  }

  /* Thinner strokes at this size get swamped by the glow, so drop it
     and add weight to keep the chrome reading. */
  .wordmark {
    font-weight: 700;
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6))
      drop-shadow(0 3px 8px rgba(4, 34, 62, 0.6));
  }

  .aero-button {
    flex: 1 1 auto;
    min-width: 0;
  }

  .swoosh-wrap {
    filter: none;
    opacity: 0.6;
  }

  .panel-reflection {
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}