/* =========================================================
   BIOLOGICAL AGE PREDICTOR
   Case Study
========================================================= */

:root {
  --bg: #050b14;
  --bg-soft: #08111e;

  --panel: rgba(13, 25, 42, 0.78);
  --panel-strong: rgba(15, 30, 49, 0.92);

  --border: rgba(145, 185, 220, 0.14);
  --border-highlight: rgba(112, 215, 247, 0.28);

  --text: #f4f7fb;
  --text-soft: #a8b8c9;
  --text-muted: #718296;

  --cyan: #72d9f7;
  --blue: #83bfff;
  --violet: #9b8cff;
  --green: #79dfba;

  --radius-xl: 28px;
  --radius-lg: 19px;
  --radius-md: 12px;

  --shell: 1180px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(54, 154, 215, 0.12),
      transparent 28%
    ),

    radial-gradient(
      circle at 90% 18%,
      rgba(137, 102, 236, 0.09),
      transparent 27%
    ),

    linear-gradient(
      180deg,
      #07111e 0%,
      var(--bg) 45%,
      #04080f 100%
    );

  color: var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;
}


body::before {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 48px 48px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 84%
    );
}


a {
  color: inherit;

  text-decoration: none;
}


img {
  display: block;

  width: 100%;

  max-width: 100%;
}


code {
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
}


::selection {
  background:
    rgba(114, 217, 247, 0.25);

  color: white;
}


/* =========================================================
   LAYOUT
========================================================= */

.shell {
  width:
    min(
      calc(100% - 48px),
      var(--shell)
    );

  margin-inline: auto;
}


.section {
  padding-top: 115px;
}


.section-heading {
  max-width: 810px;

  margin-bottom: 45px;
}


.eyebrow {
  margin: 0;

  color: var(--cyan);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


.section-heading h2 {
  margin:
    10px 0
    0;

  font-size:
    clamp(
      2rem,
      4vw,
      3.55rem
    );

  line-height: 1.08;

  letter-spacing: -0.055em;
}


.section-intro {
  max-width: 680px;

  margin:
    17px 0
    0;

  color: var(--text-soft);

  font-size: 1rem;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
  position: sticky;

  top: 0;

  z-index: 100;

  display: grid;

  grid-template-columns:
    minmax(220px, 1fr)
    auto
    minmax(220px, 1fr);

  align-items: center;

  width:
    min(
      calc(100% - 48px),
      1260px
    );

  margin:
    18px auto
    0;

  padding:
    13px
    16px;

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

  border-radius: 17px;

  background:
    rgba(6, 13, 23, 0.8);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 14px 44px
    rgba(0, 0, 0, 0.22);
}


.brand {
  display: flex;

  align-items: center;

  gap: 11px;

  width: fit-content;
}


.brand-mark {
  display: grid;

  place-items: center;

  width: 41px;

  height: 41px;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(114, 217, 247, 0.24);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(114, 217, 247, 0.13),
      rgba(155, 140, 255, 0.08)
    );

  color: var(--cyan);

  font-size: 0.82rem;

  font-weight: 900;

  letter-spacing: 0.08em;
}


.brand-text {
  display: flex;

  flex-direction: column;

  line-height: 1.2;
}


.brand-text strong {
  font-size: 0.92rem;
}


.brand-text small {
  margin-top: 3px;

  color: var(--text-muted);

  font-size: 0.7rem;
}


.topbar nav {
  display: flex;

  gap: 4px;
}


.topbar nav a {
  padding:
    8px
    11px;

  border-radius: 8px;

  color: var(--text-soft);

  font-size: 0.8rem;
}


.topbar nav a:hover {
  background:
    rgba(255, 255, 255, 0.05);

  color: white;
}


.github-link {
  justify-self: end;

  padding:
    9px
    12px;

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

  border-radius: 9px;

  color: var(--text-soft);

  font-size: 0.8rem;

  font-weight: 700;

  transition:
    color 160ms ease,
    border-color 160ms ease;
}


.github-link:hover {
  color: white;

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


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

.hero {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(390px, 0.92fr);

  gap: 72px;

  align-items: center;

  min-height:
    calc(100vh - 115px);

  padding-top: 75px;

  padding-bottom: 70px;
}


.hero-copy {
  max-width: 710px;
}


.back-link {
  display: inline-block;

  margin-bottom: 40px;

  color: var(--text-muted);

  font-size: 0.82rem;
}


.back-link:hover {
  color: var(--cyan);
}


.hero h1 {
  margin:
    12px 0
    24px;

  font-size:
    clamp(
      3.3rem,
      7vw,
      6.7rem
    );

  line-height: 0.93;

  letter-spacing: -0.075em;
}


.hero h1 span {
  display: block;

  margin-top: 8px;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--blue) 43%,
      var(--violet)
    );

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;
}


.hero-description {
  max-width: 690px;

  margin: 0;

  color: var(--text-soft);

  font-size:
    clamp(
      1rem,
      1.7vw,
      1.16rem
    );
}


.tag-list {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 28px;
}


.tag-list span,
.skills-list span,
.source-tables span {
  padding:
    7px
    11px;

  border:
    1px solid
    rgba(114, 217, 247, 0.12);

  border-radius: 999px;

  background:
    rgba(114, 217, 247, 0.05);

  color: #bad8e6;

  font-size: 0.73rem;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 11px;

  margin-top: 33px;
}


.button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 45px;

  padding:
    0
    17px;

  border-radius: 10px;

  font-size: 0.82rem;

  font-weight: 800;

  transition:
    transform 160ms ease,
    border-color 160ms ease;
}


.button:hover {
  transform:
    translateY(-2px);
}


.button-primary {
  background:
    linear-gradient(
      135deg,
      #79def8,
      #8ccaff
    );

  color: #07111c;

  box-shadow:
    0 10px 30px
    rgba(78, 192, 234, 0.15);
}


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

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

  color: var(--text-soft);
}


.button-secondary:hover {
  border-color:
    var(--border-highlight);
}


/* =========================================================
   PERFORMANCE PANEL
========================================================= */

.performance-panel {
  padding: 25px;

  border:
    1px solid
    rgba(141, 194, 230, 0.15);

  border-radius:
    var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      rgba(16, 30, 49, 0.95),
      rgba(8, 17, 29, 0.97)
    );

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.28);
}


.performance-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  margin-bottom: 17px;
}


.performance-header h2 {
  margin:
    5px 0
    0;

  font-size: 1.25rem;
}


.status-pill {
  padding:
    6px
    9px;

  border:
    1px solid
    rgba(121, 223, 186, 0.18);

  border-radius: 999px;

  background:
    rgba(121, 223, 186, 0.1);

  color: var(--green);

  font-size: 0.64rem;

  font-weight: 900;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.model-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 18px;

  padding:
    18px
    3px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.065);
}


.model-name {
  display: flex;

  align-items: center;

  gap: 12px;
}


.model-number {
  display: grid;

  place-items: center;

  width: 31px;

  height: 31px;

  border-radius: 9px;

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

  color: var(--text-muted);

  font-size: 0.63rem;

  font-weight: 900;
}


.model-name > span:last-child {
  display: flex;

  flex-direction: column;
}


.model-name strong {
  font-size: 0.9rem;
}


.model-name small {
  margin-top: 2px;

  color: var(--text-muted);

  font-size: 0.68rem;
}


.model-score {
  font-size: 1.65rem;

  letter-spacing: -0.04em;
}


.model-best .model-score {
  color: var(--cyan);
}


.model-best .model-number {
  color: var(--cyan);

  background:
    rgba(114, 217, 247, 0.09);
}


.performance-note {
  margin-top: 19px;

  padding:
    12px
    13px;

  border-radius: 11px;

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

  color: var(--text-soft);

  font-size: 0.73rem;
}


/* =========================================================
   PROJECT PROFILE
========================================================= */

.project-profile {
  display: grid;

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

  overflow: hidden;

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

  border-radius:
    var(--radius-lg);

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


.project-profile article {
  padding:
    23px
    25px;

  border-right:
    1px solid
    var(--border);
}


.project-profile article:last-child {
  border-right: 0;
}


.project-profile span,
.project-profile small {
  display: block;
}


.project-profile span {
  margin-bottom: 4px;

  color: var(--text-muted);

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.project-profile strong {
  display: block;

  margin-bottom: 3px;

  font-size: 1.4rem;

  letter-spacing: -0.035em;
}


.project-profile small {
  color: var(--text-soft);

  font-size: 0.7rem;
}


/* =========================================================
   OVERVIEW
========================================================= */

.overview-grid {
  display: grid;

  grid-template-columns:
    1.1fr
    0.9fr;

  gap: 52px;

  align-items: start;
}


.overview-copy {
  color: var(--text-soft);

  font-size: 1.02rem;
}


.overview-copy p:first-child {
  margin-top: 0;
}


.overview-copy p:last-child {
  margin-bottom: 0;
}


.project-details {
  margin: 0;

  overflow: hidden;

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

  border-radius:
    var(--radius-lg);

  background:
    var(--panel);
}


.project-details div {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding:
    16px
    18px;

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


.project-details div:last-child {
  border-bottom: 0;
}


.project-details dt {
  color: var(--text-muted);

  font-size: 0.75rem;
}


.project-details dd {
  margin: 0;

  color: white;

  font-size: 0.78rem;

  font-weight: 700;

  text-align: right;
}


/* =========================================================
   CASE STUDY SECTIONS
========================================================= */

.case-study {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  gap: 48px;

  align-items: center;
}


.case-study-reverse .case-image {
  order: 2;
}


.case-image,
.result-image {
  overflow: hidden;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--panel-strong);

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.2);
}


.case-image img {
  width: 100%;

  height: auto;

  object-fit: contain;
}


.case-image-terminal {
  background: #0c0c0c;
}


.case-copy {
  max-width: 470px;
}


.section-number {
  display: inline-block;

  margin-bottom: 30px;

  color: var(--text-muted);

  font-size: 0.7rem;

  font-weight: 900;

  letter-spacing: 0.12em;
}


.case-copy h3 {
  margin:
    8px 0
    15px;

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

  line-height: 1.1;

  letter-spacing: -0.04em;
}


.case-copy > p:not(.eyebrow) {
  color: var(--text-soft);
}


.case-copy code {
  padding:
    3px
    6px;

  border-radius: 6px;

  background:
    rgba(114, 217, 247, 0.08);

  color: var(--cyan);

  font-size: 0.8em;
}


.source-tables {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 21px;
}


/* =========================================================
   FEATURE IMPORTANCE
========================================================= */

.feature-box {
  margin-top: 25px;

  overflow: hidden;

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

  border-radius:
    var(--radius-lg);

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


.feature-box > span {
  display: block;

  padding:
    12px
    15px;

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

  color: var(--text-muted);

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.feature-box div {
  display: flex;

  justify-content: space-between;

  padding:
    10px
    15px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.045);
}


.feature-box div:last-child {
  border-bottom: 0;
}


.feature-box strong {
  font-size: 0.78rem;
}


.feature-box b {
  color: var(--cyan);

  font-size: 0.78rem;
}


/* =========================================================
   RESULTS
========================================================= */

.result-display {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, 0.65fr);

  gap: 35px;

  align-items: stretch;
}


.result-image img {
  width: 100%;

  height: 100%;

  object-fit: contain;
}


.result-summary {
  display: flex;

  flex-direction: column;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--panel);
}


.result-summary article {
  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    23px;

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


.result-summary article:last-child {
  border-bottom: 0;
}


.result-summary span {
  color: var(--text-soft);

  font-size: 0.8rem;
}


.result-summary strong {
  margin:
    4px 0;

  font-size: 2rem;

  letter-spacing: -0.04em;
}


.result-summary article:first-child strong {
  color: var(--cyan);
}


.result-summary small {
  color: var(--text-muted);

  font-size: 0.68rem;
}


/* =========================================================
   FINDINGS
========================================================= */

.findings-grid {
  display: grid;

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

  gap: 13px;
}


.findings-grid article {
  min-height: 220px;

  padding: 23px;

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

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(16, 29, 47, 0.65),
      rgba(9, 17, 29, 0.62)
    );
}


.findings-grid article > span {
  display: inline-block;

  margin-bottom: 32px;

  color: var(--cyan);

  font-size: 0.68rem;

  font-weight: 900;
}


.findings-grid h3 {
  margin:
    0
    0
    10px;

  font-size: 1rem;

  letter-spacing: -0.02em;
}


.findings-grid p {
  margin: 0;

  color: var(--text-soft);

  font-size: 0.79rem;
}


/* =========================================================
   FILES
========================================================= */

.file-grid {
  display: grid;

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

  gap: 13px;
}


.file-grid article {
  display: flex;

  align-items: flex-start;

  gap: 15px;

  padding: 20px;

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

  border-radius:
    var(--radius-lg);

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


.file-grid article > span {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 40px;

  height: 40px;

  border-radius: 10px;

  background:
    rgba(114, 217, 247, 0.08);

  color: var(--cyan);

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 0.67rem;

  font-weight: 900;
}


.file-grid h3 {
  margin:
    0
    0
    5px;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 0.78rem;
}


.file-grid p {
  margin: 0;

  color: var(--text-soft);

  font-size: 0.75rem;
}


/* =========================================================
   SKILLS
========================================================= */

.skills-list {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


/* =========================================================
   GITHUB CTA
========================================================= */

.github-cta {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 40px;

  margin-top: 115px;

  padding:
    40px;

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

  border-radius:
    var(--radius-xl);

  background:
    linear-gradient(
      135deg,
      rgba(114, 217, 247, 0.06),
      rgba(155, 140, 255, 0.045)
    );
}


.github-cta h2 {
  margin:
    8px 0;

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

  letter-spacing: -0.045em;
}


.github-cta p:not(.eyebrow) {
  max-width: 650px;

  margin: 0;

  color: var(--text-soft);
}


.github-cta > a {
  flex: 0 0 auto;

  padding:
    12px
    16px;

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

  border-radius: 10px;

  color: var(--cyan);

  font-size: 0.8rem;

  font-weight: 800;
}


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

.footer {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 20px;

  margin-top: 120px;

  margin-bottom: 30px;

  padding:
    28px 0;

  border-top:
    1px solid
    var(--border);
}


.footer p {
  margin: 0;

  color: var(--text-muted);

  font-size: 0.7rem;
}


.footer > a:last-child {
  justify-self: end;

  color: var(--text-soft);

  font-size: 0.76rem;
}


.footer > a:last-child:hover {
  color: var(--cyan);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

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


  .topbar nav {
    display: none;
  }


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

    min-height: auto;
  }


  .performance-panel {
    max-width: 720px;
  }


  .findings-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


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

}


@media (max-width: 760px) {

  .shell {
    width:
      min(
        calc(100% - 30px),
        var(--shell)
      );
  }


  .section {
    padding-top: 85px;
  }


  .topbar {
    width:
      calc(100% - 24px);

    margin-top: 12px;
  }


  .brand-text small {
    display: none;
  }


  .hero {
    padding-top: 60px;

    gap: 45px;
  }


  .hero h1 {
    font-size:
      clamp(
        3rem,
        15vw,
        5rem
      );
  }


  .project-profile {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .project-profile article:nth-child(2) {
    border-right: 0;
  }


  .project-profile article:nth-child(-n + 2) {
    border-bottom:
      1px solid
      var(--border);
  }


  .overview-grid,
  .case-study {
    grid-template-columns:
      1fr;
  }


  .case-study-reverse .case-image {
    order: initial;
  }


  .findings-grid,
  .file-grid {
    grid-template-columns:
      1fr;
  }


  .github-cta {
    flex-direction: column;

    align-items: flex-start;
  }


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

    gap: 20px;
  }


  .footer > a:last-child {
    justify-self: start;
  }

}


@media (max-width: 480px) {

  .hero-actions {
    flex-direction: column;
  }


  .button {
    width: 100%;
  }


  .performance-panel {
    padding: 20px;
  }


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


  .project-profile article {
    border-right: 0;

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


  .project-profile article:last-child {
    border-bottom: 0;
  }


  .github-cta {
    padding: 26px;
  }

}