:root {
  --ink: #10243e;
  --muted: #5c6d80;
  --line: #d9e3ed;
  --blue: #0866c6;
  --blue-dark: #064d96;
  --teal: #008b85;
  --teal-dark: #06746f;
  --light: #f5f9fc;
  --white: #ffffff;
  --doi-bg: #eefaf7;
  --doi-border: #b8e3d8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fbff 100%
    );
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  backdrop-filter: blur(16px);

  border-bottom:
    1px solid var(--line);
}

.nav {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.brand {
  color: var(--ink);

  font-weight: 850;
  letter-spacing: -0.02em;

  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

nav {
  display: flex;
  align-items: center;

  gap: 12px;

  flex-wrap: wrap;
}

nav > a {
  font-weight: 600;
}

.lang {
  border: 0;

  background: transparent;

  padding: 8px 10px;

  color: var(--muted);

  cursor: pointer;

  font: inherit;
}

.lang.active {
  color: var(--blue);

  font-weight: 750;

  border-bottom:
    2px solid var(--blue);
}

.nav-doi {
  display: inline-flex;
  align-items: center;

  padding: 7px 12px;

  border:
    1px solid var(--doi-border);

  border-radius: 999px;

  color: var(--teal-dark);

  background:
    var(--doi-bg);

  font-weight: 800;
}

.nav-doi:hover {
  text-decoration: none;

  border-color:
    var(--teal);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: 660px;

  display: grid;

  grid-template-columns:
    1.15fr
    0.85fr;

  gap: 64px;

  align-items: center;

  padding:
    72px
    0;
}

.eyebrow {
  color: var(--teal);

  font-weight: 800;

  letter-spacing: 0.13em;

  font-size: 0.78rem;
}

h1 {
  font-size:
    clamp(
      2.7rem,
      6vw,
      5.5rem
    );

  line-height: 0.98;

  letter-spacing: -0.055em;

  margin:
    0.2em
    0;
}

.lead {
  color: var(--muted);

  font-size: 1.25rem;

  line-height: 1.7;

  max-width: 720px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.actions {
  display: flex;

  gap: 14px;

  margin-top: 28px;

  flex-wrap: wrap;
}

.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    14px
    20px;

  border-radius: 12px;

  font-weight: 800;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.button:hover {
  text-decoration: none;

  transform:
    translateY(-2px);
}

.primary {
  background:
    var(--blue);

  color:
    #ffffff;

  box-shadow:
    0
    12px
    30px
    rgba(
      8,
      102,
      198,
      0.22
    );
}

.primary:hover {
  background:
    var(--blue-dark);
}

.secondary {
  border:
    1px solid var(--line);

  color:
    var(--ink);

  background:
    #ffffff;
}

.secondary:hover {
  border-color:
    #a9bfd3;
}

.doi-button {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #087f79,
      #0a9a87
    );

  border:
    1px solid
    rgba(
      0,
      139,
      133,
      0.25
    );

  box-shadow:
    0
    12px
    28px
    rgba(
      0,
      139,
      133,
      0.18
    );
}

.doi-button:hover {
  color:
    #ffffff;
}


/* =========================================================
   DOI PANEL INSIDE HERO
   ========================================================= */

.doi-panel {
  margin-top:
    24px;

  padding:
    17px
    18px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border:
    1px solid
    var(--doi-border);

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      #f7fffd,
      #edf9f7
    );

  box-shadow:
    0
    12px
    30px
    rgba(
      0,
      139,
      133,
      0.07
    );
}

.doi-panel-text {
  display: flex;

  flex-direction: column;

  gap: 4px;

  min-width: 0;
}

.doi-kicker {
  color:
    var(--teal);

  font-size:
    0.72rem;

  font-weight:
    850;

  letter-spacing:
    0.1em;
}

.doi-label {
  color:
    var(--muted);

  font-size:
    0.86rem;

  font-weight:
    700;
}

.doi-value {
  display: inline-block;

  color:
    var(--ink);

  font-size:
    1.04rem;

  font-weight:
    850;

  overflow-wrap:
    anywhere;
}

.doi-value:hover {
  color:
    var(--blue);
}

.doi-note {
  color:
    var(--muted);

  font-size:
    0.82rem;

  line-height:
    1.4;
}

.doi-badge {
  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;
}

.doi-badge img {
  max-width:
    230px;

  height:
    auto;
}


/* =========================================================
   SEISMIC CARD
   ========================================================= */

.seismic-card {
  position: relative;

  overflow: hidden;

  min-height: 360px;

  border:
    1px solid
    var(--line);

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at 20% 15%,
      #e6fbf9,
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #edf6ff
    );

  box-shadow:
    0
    30px
    80px
    rgba(
      20,
      65,
      100,
      0.14
    );

  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: column;

  padding: 26px;
}

.seismic-card svg {
  width: 100%;
}

.seismic-card polyline {
  fill: none;

  stroke:
    var(--blue);

  stroke-width:
    6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.seismic-card p {
  color:
    var(--muted);

  text-align:
    center;

  font-weight:
    700;
}

.pulse {
  position: absolute;

  width: 180px;
  height: 180px;

  border:
    2px solid
    rgba(
      0,
      139,
      133,
      0.2
    );

  border-radius:
    50%;

  animation:
    pulse
    4s
    infinite;
}

.pulse.delayed {
  animation-delay:
    2s;
}

@keyframes pulse {

  0% {
    transform:
      scale(0.5);

    opacity:
      1;
  }

  100% {
    transform:
      scale(2.8);

    opacity:
      0;
  }
}


/* =========================================================
   RELEASE / DOI CARD
   ========================================================= */

.release-card {
  margin:
    -12px
    auto
    66px;

  padding:
    32px
    36px;

  display:
    grid;

  grid-template-columns:
    1.35fr
    0.65fr;

  gap:
    38px;

  align-items:
    center;

  border:
    1px solid
    var(--doi-border);

  border-radius:
    24px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #effaf7
    );

  box-shadow:
    0
    18px
    48px
    rgba(
      12,
      94,
      89,
      0.08
    );
}

.release-main h2 {
  margin:
    5px
    0
    10px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.5rem
    );

  letter-spacing:
    -0.03em;
}

.release-main p:last-child {
  color:
    var(--muted);

  line-height:
    1.7;

  margin-bottom:
    0;
}

.release-doi {
  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  border-radius:
    18px;

  background:
    #102a4d;

  color:
    #ffffff;

  box-shadow:
    0
    18px
    40px
    rgba(
      16,
      42,
      77,
      0.16
    );
}

.release-doi > span {
  color:
    #8df4e5;

  font-size:
    0.72rem;

  font-weight:
    850;

  letter-spacing:
    0.12em;
}

.release-doi > a:first-of-type {
  color:
    #ffffff;

  font-size:
    1.04rem;

  font-weight:
    850;

  overflow-wrap:
    anywhere;
}

.release-doi small {
  color:
    #c7d7e8;
}

.zenodo-link {
  margin-top:
    8px;

  color:
    #8df4e5;

  font-weight:
    800;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    18px;

  padding-bottom:
    60px;
}

.features article {
  padding:
    26px;

  border:
    1px solid
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      0.86
    );

  border-radius:
    20px;

  box-shadow:
    0
    12px
    35px
    rgba(
      32,
      72,
      102,
      0.06
    );
}

.features span {
  display:
    inline-grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  border-radius:
    10px;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--teal)
    );

  font-weight:
    850;
}

.features h2 {
  font-size:
    1.2rem;

  margin:
    18px
    0
    8px;
}

.features p {
  color:
    var(--muted);

  line-height:
    1.65;
}


/* =========================================================
   ARCHITECTURE
   ========================================================= */

.architecture {
  margin-bottom:
    62px;

  padding:
    40px;

  border-radius:
    28px;

  color:
    #ffffff;

  background:
    linear-gradient(
      125deg,
      #102a4d,
      #006f92 58%,
      #009a86
    );
}

.architecture h2 {
  font-size:
    clamp(
      2rem,
      4vw,
      3.4rem
    );

  margin:
    0.2em
    0
    0.8em;
}

.architecture p {
  line-height:
    1.7;
}

.architecture .eyebrow {
  color:
    #8df4e5;
}

.flow {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    12px;

  flex-wrap: wrap;

  padding:
    22px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  border-radius:
    16px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );
}


/* =========================================================
   CITATION SECTION
   ========================================================= */

.citation-section {
  margin-bottom:
    66px;

  padding:
    38px;

  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    36px;

  align-items:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    26px;

  background:
    #ffffff;

  box-shadow:
    0
    16px
    44px
    rgba(
      25,
      62,
      90,
      0.07
    );
}

.citation-section h2 {
  margin:
    5px
    0
    12px;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.7rem
    );
}

.citation-section > div:first-child > p:last-child {
  color:
    var(--muted);

  line-height:
    1.7;
}

.citation-box {
  padding:
    24px;

  border:
    1px solid
    var(--doi-border);

  border-radius:
    18px;

  background:
    var(--doi-bg);
}

.citation-box strong {
  display:
    block;

  margin-bottom:
    8px;

  font-size:
    1.1rem;
}

.citation-box p {
  color:
    var(--muted);

  line-height:
    1.6;
}

.citation-box a {
  display:
    inline-block;

  font-weight:
    850;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   AUTHOR
   ========================================================= */

.author {
  display: grid;

  grid-template-columns:
    180px
    1fr;

  gap:
    34px;

  align-items:
    center;

  padding:
    40px;

  margin-bottom:
    70px;

  border:
    1px solid
    var(--line);

  border-radius:
    26px;

  background:
    #ffffff;
}

.author img {
  width:
    180px;

  height:
    180px;

  border-radius:
    24px;

  object-fit:
    cover;
}

.author h2 {
  font-size:
    2.2rem;

  margin:
    0.1em
    0;
}

.author p {
  color:
    var(--muted);

  line-height:
    1.7;
}

.profile-links {
  font-weight:
    750;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  border-top:
    1px solid
    var(--line);

  padding:
    28px
    0;

  color:
    var(--muted);

  background:
    #ffffff;
}

.footer-grid {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;
}

.footer-grid > div:first-child {
  max-width:
    820px;

  line-height:
    1.6;
}

.footer-doi {
  flex:
    0
    0
    auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.footer-doi span {
  color:
    var(--teal);

  font-size:
    0.7rem;

  font-weight:
    850;

  letter-spacing:
    0.12em;
}

.footer-doi a {
  color:
    var(--ink);

  font-weight:
    800;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible {
  outline:
    3px solid
    rgba(
      8,
      102,
      198,
      0.3
    );

  outline-offset:
    3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 860px) {

  .nav {
    padding:
      10px
      0;
  }

  .hero {
    grid-template-columns:
      1fr;

    min-height:
      auto;

    gap:
      38px;

    padding:
      54px
      0;
  }

  .grid {
    grid-template-columns:
      1fr;
  }

  .release-card {
    grid-template-columns:
      1fr;

    margin-top:
      0;
  }

  .citation-section {
    grid-template-columns:
      1fr;
  }

  .author {
    grid-template-columns:
      1fr;
  }

  .author img {
    width:
      130px;

    height:
      130px;
  }

  .flow {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .flow i {
    transform:
      rotate(90deg);
  }

  .footer-grid {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .wrap {
    width:
      min(
        100% - 26px,
        1180px
      );
  }

  .site-header {
    position:
      relative;
  }

  .nav {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      8px;

    padding:
      14px
      0;
  }

  nav {
    width:
      100%;

    gap:
      7px;
  }

  nav > a,
  .lang {
    font-size:
      0.88rem;
  }

  h1 {
    font-size:
      clamp(
        2.5rem,
        14vw,
        4rem
      );
  }

  .lead {
    font-size:
      1.05rem;
  }

  .actions {
    flex-direction:
      column;
  }

  .button {
    width:
      100%;
  }

  .doi-panel {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .doi-badge img {
    max-width:
      100%;
  }

  .seismic-card {
    min-height:
      300px;

    border-radius:
      20px;
  }

  .release-card,
  .architecture,
  .citation-section,
  .author {
    padding:
      25px;

    border-radius:
      20px;
  }

  .release-doi {
    padding:
      20px;
  }

  .release-doi > a:first-of-type {
    font-size:
      0.96rem;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  .pulse {
    animation:
      none;
  }

  .button {
    transition:
      none;
  }

}