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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background: #f6f8fc;

  color: #0f172a;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}


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

.site-header {
  background: #ffffff;

  border-bottom: 1px solid #edf1f6;

  padding: 25px 0 23px;
}


.site-header h1 {
  font-size: 28px;

  line-height: 1.1;

  letter-spacing: -0.8px;

  font-weight: 750;

  color: #162033;
}


.site-header p {
  margin-top: 7px;

  font-size: 13px;

  color: #536681;
}


/* =========================================================
   PROJECT 1
   ========================================================= */

.mdm2-project {
  padding: 48px 0 60px;
}


/* =========================================================
   PROJECT HEADING
   ========================================================= */

.project-heading {
  margin-bottom: 28px;
}


.project-label {
  display: inline-block;

  margin-bottom: 7px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.04em;

  color: #2563eb;
}


.project-heading h2 {
  font-size: clamp(30px, 4vw, 39px);

  line-height: 1.08;

  letter-spacing: -1.4px;

  font-weight: 800;

  color: #111b2e;
}


.project-heading p {
  max-width: 760px;

  margin-top: 10px;

  font-size: 14px;

  line-height: 1.65;

  color: #536681;
}


/* =========================================================
   MDM2 GRID
   ========================================================= */

.mdm2-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(300px, 0.88fr);

  gap: 18px;

  align-items: stretch;
}


/* =========================================================
   CARDS
   ========================================================= */

.viewer-card,
.comparison-card {
  background: #ffffff;

  border: 1px solid #edf1f6;

  border-radius: 17px;

  box-shadow:
    0 9px 30px
    rgba(15, 23, 42, 0.055);
}


/* =========================================================
   VIEWER CARD
   ========================================================= */

.viewer-card {
  padding: 16px;
}


/* =========================================================
   VIEWER TOP
   ========================================================= */

.viewer-top {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 18px;

  margin-bottom: 14px;
}


.viewer-title h3 {
  font-size: 16px;

  line-height: 1.25;

  font-weight: 750;

  color: #111827;
}


.viewer-title span {
  display: block;

  margin-top: 4px;

  font-size: 11px;

  color: #708197;
}


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

.viewer-buttons {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 7px;
}


.viewer-buttons button {
  appearance: none;

  border: 1px solid #dce4ee;

  background: #ffffff;

  color: #243044;

  padding: 8px 14px;

  border-radius: 9px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

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


.viewer-buttons button:hover {
  border-color: #b8c7dc;

  background: #f8fafc;
}


.viewer-buttons button:active {
  transform: translateY(1px);
}


.viewer-buttons button.active {
  background: #2563eb;

  border-color: #2563eb;

  color: #ffffff;

  box-shadow:
    0 4px 12px
    rgba(37, 99, 235, 0.18);
}


/* =========================================================
   3D VIEWER
   ========================================================= */

#mdm2Viewer {
  position: relative;

  width: 100%;

  height: 570px;

  overflow: hidden;

  border-radius: 12px;

  background:
    radial-gradient(
      circle at center,
      #f8fbff 0%,
      #eef4fa 48%,
      #e9f1f9 100%
    );
}


/* =========================================================
   VIEWER MESSAGE
   ========================================================= */

.viewer-message {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 2;

  font-size: 13px;

  color: #7b8ba1;

  pointer-events: none;
}


/* =========================================================
   VIEWER LEGEND
   ========================================================= */

.viewer-legend {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 12px;

  padding: 0 2px;
}


.viewer-legend span {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-size: 10px;

  font-weight: 500;

  color: #62748b;
}


.dot {
  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  flex: 0 0 auto;
}


.dot.nutlin {
  background: #f59e0b;
}


.dot.candidate {
  background: #a855f7;
}


.dot.residue {
  background: #22c7d6;
}


/* =========================================================
   COMPARISON CARD
   ========================================================= */

.comparison-card {
  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 14px;
}


/* =========================================================
   CANDIDATE SELECTOR
   ========================================================= */

.candidate-selector {
  width: 100%;
}


.candidate-selector label {
  display: block;

  margin-bottom: 7px;

  font-size: 11px;

  font-weight: 700;

  color: #1e293b;
}


#candidateSelect {
  width: 100%;

  min-height: 42px;

  padding: 0 13px;

  border: 1px solid #cfd9e6;

  border-radius: 9px;

  outline: none;

  background: #ffffff;

  color: #172033;

  font-family: inherit;

  font-size: 12px;

  cursor: pointer;

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


#candidateSelect:focus {
  border-color: #3b82f6;

  box-shadow:
    0 0 0 3px
    rgba(59, 130, 246, 0.11);
}


/* =========================================================
   REFERENCE + CANDIDATE BOXES
   ========================================================= */

.reference-box,
.candidate-box {
  border-radius: 12px;

  padding: 15px;
}


.reference-box {
  background: #ffffff;

  border: 1px solid #dfe7ef;
}


.candidate-box {
  background: #f4fbf7;

  border: 1px solid #d8eee1;
}


/* =========================================================
   SMALL TITLES
   ========================================================= */

.small-title {
  display: block;

  margin-bottom: 2px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.03em;
}


.reference-title {
  color: #2563eb;
}


.candidate-title {
  color: #268653;
}


/* =========================================================
   REFERENCE / CANDIDATE HEADINGS
   ========================================================= */

.reference-box h3,
.candidate-box h3 {
  margin-bottom: 12px;

  font-size: 17px;

  line-height: 1.2;

  font-weight: 800;

  color: #101827;
}


/* =========================================================
   METRICS
   ========================================================= */

.metric-row {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 15px;

  padding: 11px 0;

  border-top: 1px solid #e8edf3;
}


.metric-row:first-of-type {
  border-top: 0;
}


.metric-row span {
  flex: 0 0 auto;

  font-size: 10px;

  color: #6a7b91;
}


.metric-row strong {
  max-width: 64%;

  text-align: right;

  font-size: 10px;

  line-height: 1.45;

  font-weight: 750;

  color: #182235;
}


/* =========================================================
   PROXIMAL RESIDUES
   ========================================================= */

.residue-block {
  margin-top: 3px;

  padding-top: 13px;

  border-top: 1px solid #e3ece7;
}


.residue-title {
  display: block;

  margin-bottom: 8px;

  font-size: 10px;

  font-weight: 600;

  color: #6a7b91;
}


.residue-list {
  display: block;

  width: 100%;

  padding: 9px 10px;

  border-radius: 8px;

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

  font-size: 10px;

  font-weight: 650;

  line-height: 1.65;

  color: #263448;

  overflow-wrap: anywhere;

  word-break: normal;
}


/* =========================================================
   HOW TO USE
   ========================================================= */

.viewer-note {
  padding: 14px;

  border-radius: 11px;

  background: #edf5ff;

  color: #536681;
}


.viewer-note > strong {
  display: block;

  margin-bottom: 7px;

  font-size: 11px;

  font-weight: 800;

  color: #2563eb;
}


.viewer-note p {
  font-size: 10px;

  line-height: 1.55;

  color: #536681;
}


.viewer-note p + p {
  margin-top: 7px;
}


.viewer-note b {
  font-weight: 750;

  color: #354861;
}


/* =========================================================
   OPTIMIZATION SECTION
   ========================================================= */

.optimization-section {
  padding: 20px 0 90px;
}


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

.results-heading {
  margin-bottom: 34px;
}


.results-heading h2 {
  margin-top: 5px;

  font-size: clamp(28px, 4vw, 38px);

  line-height: 1.1;

  letter-spacing: -1.2px;

  font-weight: 800;

  color: #111b2e;
}


.results-heading p {
  max-width: 760px;

  margin-top: 10px;

  font-size: 14px;

  line-height: 1.65;

  color: #536681;
}


/* =========================================================
   GENERATION FLOW
   ========================================================= */

.generation-flow {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    90px
    minmax(0, 1fr)
    90px
    minmax(0, 1fr);

  align-items: stretch;

  gap: 12px;
}


/* =========================================================
   GENERATION CARD
   ========================================================= */

.generation-card {
  position: relative;

  min-width: 0;

  padding: 22px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e7edf4;

  border-radius: 16px;

  box-shadow:
    0 9px 30px
    rgba(15, 23, 42, 0.045);
}


.generation-number {
  position: absolute;

  top: 13px;

  right: 16px;

  font-size: 42px;

  line-height: 1;

  font-weight: 850;

  color: #eef2f7;
}


.generation-label {
  position: relative;

  display: inline-block;

  z-index: 1;

  margin-bottom: 8px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.06em;

  color: #2563eb;
}


.generation-card h3 {
  position: relative;

  z-index: 1;

  min-height: 48px;

  max-width: 210px;

  font-size: 18px;

  line-height: 1.25;

  font-weight: 800;

  color: #172033;
}


.generation-card > p {
  min-height: 92px;

  margin-top: 11px;

  font-size: 11px;

  line-height: 1.65;

  color: #66778d;
}


/* =========================================================
   GENERATION MAIN STAT
   ========================================================= */

.generation-main-stat {
  margin-top: 18px;

  padding: 15px;

  border-radius: 11px;

  background: #f6f9fd;
}


.generation-main-stat strong {
  display: block;

  font-size: 27px;

  line-height: 1;

  letter-spacing: -0.7px;

  font-weight: 800;

  color: #182235;
}


.generation-main-stat span {
  display: block;

  margin-top: 6px;

  font-size: 10px;

  color: #718198;
}


/* =========================================================
   GENERATION METRICS
   ========================================================= */

.generation-metrics {
  margin-top: 14px;
}


.generation-metrics > div {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 10px 1px;

  border-top: 1px solid #edf1f5;
}


.generation-metrics span {
  font-size: 10px;

  color: #6c7d92;
}


.generation-metrics strong {
  font-size: 11px;

  font-weight: 800;

  color: #1b2739;
}


/* =========================================================
   GENERATION 3
   ========================================================= */

.gen3-card {
  border-color: #cfe7da;

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


.gen3-card .generation-label {
  color: #248653;
}


.gen3-card .generation-main-stat {
  background: #edf8f2;
}


.highlight-metric {
  margin-left: -8px;

  margin-right: -8px;

  padding-left: 8px !important;

  padding-right: 8px !important;

  border-radius: 7px;

  background: #edf8f2;
}


.highlight-metric strong {
  color: #18834d;
}


/* =========================================================
   GENERATION ARROWS
   ========================================================= */

.generation-arrow {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}


.generation-arrow span {
  max-width: 85px;

  margin-bottom: 7px;

  font-size: 9px;

  line-height: 1.4;

  font-weight: 700;

  color: #7a8ba0;
}


.arrow-line {
  font-size: 28px;

  line-height: 1;

  color: #9fb0c5;
}


/* =========================================================
   KEY RESULT
   ========================================================= */

.key-result-card {
  display: grid;

  grid-template-columns: 54px 1fr;

  gap: 18px;

  align-items: center;

  margin-top: 24px;

  padding: 23px 26px;

  border: 1px solid #cfe7da;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #f1faf5 0%,
      #f8fcfa 100%
    );
}


.key-result-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: #dff4e8;

  color: #238553;

  font-size: 24px;

  font-weight: 800;
}


.key-result-label {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.06em;

  color: #238553;
}


.key-result-card h3 {
  font-size: 18px;

  line-height: 1.35;

  font-weight: 750;

  color: #172033;
}


.key-result-card h3 strong {
  color: #18834d;
}


.key-result-card p {
  max-width: 820px;

  margin-top: 7px;

  font-size: 11px;

  line-height: 1.6;

  color: #61748a;
}


/* =========================================================
   RESULTS TABLE CARD
   ========================================================= */

.results-table-card {
  margin-top: 24px;

  padding: 24px;

  background: #ffffff;

  border: 1px solid #e7edf4;

  border-radius: 16px;

  box-shadow:
    0 9px 30px
    rgba(15, 23, 42, 0.04);
}


.results-table-heading {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 20px;

  margin-bottom: 19px;
}


.small-section-label {
  display: block;

  margin-bottom: 4px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.06em;

  color: #2563eb;
}


.results-table-heading h3 {
  font-size: 18px;

  font-weight: 800;

  color: #172033;
}


.results-table-heading p {
  font-size: 10px;

  color: #7a8ba0;
}


/* =========================================================
   TABLE
   ========================================================= */

.table-scroll {
  width: 100%;

  overflow-x: auto;
}


.generation-table {
  width: 100%;

  min-width: 660px;

  border-collapse: collapse;
}


.generation-table th,
.generation-table td {
  padding: 13px 16px;

  text-align: right;

  border-top: 1px solid #edf1f5;

  font-size: 11px;
}


.generation-table th:first-child,
.generation-table td:first-child {
  text-align: left;
}


.generation-table thead th {
  border-top: 0;

  background: #f7f9fc;

  font-size: 10px;

  font-weight: 750;

  color: #5d6f86;
}


.generation-table thead th:first-child {
  border-radius: 8px 0 0 8px;
}


.generation-table thead th:last-child {
  border-radius: 0 8px 8px 0;
}


.generation-table tbody td:first-child {
  font-weight: 600;

  color: #536681;
}


.generation-table tbody td:not(:first-child) {
  font-weight: 700;

  color: #263448;
}


.gen3-column {
  background: #f4faf7;
}


.generation-table thead .gen3-column {
  color: #238553;

  background: #eaf7f0;
}


.strong-result {
  color: #18834d !important;

  font-weight: 850 !important;
}


/* =========================================================
   INTERPRETATION
   ========================================================= */

.results-interpretation {
  display: grid;

  grid-template-columns: 50px 1fr;

  gap: 18px;

  margin-top: 24px;

  padding: 24px;

  border-left: 3px solid #2563eb;

  border-radius: 0 13px 13px 0;

  background: #eef5ff;
}


.interpretation-number {
  font-size: 30px;

  line-height: 1;

  font-weight: 850;

  color: #b9d1fb;
}


.results-interpretation span {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.06em;

  color: #2563eb;
}


.results-interpretation h3 {
  max-width: 700px;

  font-size: 17px;

  line-height: 1.4;

  font-weight: 750;

  color: #182235;
}


.results-interpretation p {
  max-width: 820px;

  margin-top: 8px;

  font-size: 11px;

  line-height: 1.65;

  color: #5c7088;
}


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

@media (max-width: 1050px) {

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


  .generation-arrow {
    min-height: 54px;
  }


  .generation-arrow span {
    max-width: none;

    margin-bottom: 2px;
  }


  .arrow-line {
    transform: rotate(90deg);
  }


  .generation-card h3,
  .generation-card > p {
    min-height: auto;
  }

}


@media (max-width: 980px) {

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


  .comparison-card {
    display: grid;

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

    gap: 14px;
  }


  .candidate-selector,
  .viewer-note {
    grid-column: 1 / -1;
  }

}


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

@media (max-width: 700px) {

  .container {
    width: min(
      100% - 24px,
      1180px
    );
  }


  .site-header {
    padding: 20px 0;
  }


  .site-header h1 {
    font-size: 24px;
  }


  .mdm2-project {
    padding: 34px 0 50px;
  }


  .project-heading h2 {
    font-size: 30px;
  }


  .project-heading p {
    font-size: 13px;
  }


  .viewer-top {
    flex-direction: column;

    align-items: stretch;
  }


  .viewer-buttons {
    justify-content: flex-start;
  }


  #mdm2Viewer {
    height: 480px;
  }


  .comparison-card {
    display: flex;

    flex-direction: column;
  }


  .optimization-section {
    padding-bottom: 60px;
  }


  .results-heading {
    margin-bottom: 25px;
  }


  .generation-card {
    padding: 19px;
  }


  .key-result-card {
    grid-template-columns: 1fr;

    padding: 20px;
  }


  .results-table-card {
    padding: 18px;
  }


  .results-table-heading {
    align-items: flex-start;

    flex-direction: column;
  }


  .results-interpretation {
    grid-template-columns: 1fr;

    padding: 20px;
  }

}


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

@media (max-width: 480px) {

  #mdm2Viewer {
    height: 410px;
  }


  .viewer-buttons {
    display: grid;

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

    width: 100%;
  }


  .viewer-buttons button {
    width: 100%;
  }


  .viewer-legend {
    gap: 10px;
  }


  .metric-row {
    gap: 10px;
  }


  .metric-row strong {
    max-width: 58%;
  }


  .generation-number {
    font-size: 36px;
  }


  .key-result-card h3 {
    font-size: 16px;
  }

}
/* =========================================================
   STRUCTURE-BASED VALIDATION
   ========================================================= */

.validation-section {
  padding: 20px 0 100px;
}


/* =========================================================
   VALIDATION HEADING
   ========================================================= */

.validation-heading {
  margin-bottom: 30px;
}


.validation-heading h2 {
  margin-top: 5px;

  font-size: clamp(28px, 4vw, 38px);

  line-height: 1.1;

  letter-spacing: -1.2px;

  font-weight: 800;

  color: #111b2e;
}


.validation-heading p {
  max-width: 760px;

  margin-top: 10px;

  font-size: 14px;

  line-height: 1.65;

  color: #536681;
}


/* =========================================================
   VALIDATION PIPELINE
   ========================================================= */

.validation-pipeline {
  display: grid;

  grid-template-columns:
    1fr
    45px
    1fr
    45px
    1fr;

  gap: 12px;

  align-items: center;

  margin-bottom: 26px;
}


.validation-step {
  display: grid;

  grid-template-columns: 40px 1fr;

  gap: 12px;

  min-height: 125px;

  padding: 17px;

  background: #ffffff;

  border: 1px solid #e6edf4;

  border-radius: 14px;
}


.validation-step-number {
  font-size: 25px;

  line-height: 1;

  font-weight: 850;

  color: #d7e3f4;
}


.validation-step-label {
  display: block;

  margin-bottom: 4px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.06em;

  color: #2563eb;
}


.validation-step h3 {
  font-size: 14px;

  line-height: 1.3;

  font-weight: 750;

  color: #172033;
}


.validation-step p {
  margin-top: 6px;

  font-size: 10px;

  line-height: 1.55;

  color: #687a90;
}


.validation-connector {
  text-align: center;

  font-size: 24px;

  color: #9eb0c5;
}


/* =========================================================
   VALIDATION BLOCK
   ========================================================= */

.validation-block {
  margin-top: 24px;

  padding: 24px;

  background: #ffffff;

  border: 1px solid #e7edf4;

  border-radius: 16px;

  box-shadow:
    0 9px 30px
    rgba(15, 23, 42, 0.04);
}


.validation-block-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}


.validation-block-heading > div {
  position: relative;
}


.validation-index {
  position: absolute;

  top: -8px;

  right: -42px;

  font-size: 30px;

  font-weight: 850;

  color: #eef2f7;
}


.validation-block-heading h3 {
  margin-top: 3px;

  font-size: 18px;

  font-weight: 800;

  color: #172033;
}


.validation-block-heading > p {
  max-width: 320px;

  text-align: right;

  font-size: 10px;

  line-height: 1.5;

  color: #7a8ba0;
}


/* =========================================================
   VALIDATION TABLE
   ========================================================= */

.validation-table-scroll {
  width: 100%;

  overflow-x: auto;
}


.validation-table {
  width: 100%;

  min-width: 620px;

  border-collapse: collapse;
}


.validation-table th,
.validation-table td {
  padding: 13px 15px;

  border-top: 1px solid #edf1f5;

  text-align: right;

  font-size: 11px;
}


.validation-table th:first-child,
.validation-table td:first-child {
  text-align: left;
}


.validation-table thead th {
  border-top: 0;

  background: #f7f9fc;

  color: #607188;

  font-size: 10px;

  font-weight: 750;
}


.validation-table thead th:first-child {
  border-radius: 8px 0 0 8px;
}


.validation-table thead th:last-child {
  border-radius: 0 8px 8px 0;
}


.validation-table tbody td {
  color: #344257;
}


.reference-row {
  background: #fffaf1;
}


.candidate-focus-row {
  background: #f1faf5;
}


.table-tag {
  display: inline-block;

  margin-left: 7px;

  padding: 3px 6px;

  border-radius: 5px;

  font-size: 8px;

  font-weight: 800;

  vertical-align: middle;
}


.reference-tag {
  background: #fff0ce;

  color: #a36600;
}


.focus-tag {
  background: #dff4e8;

  color: #238553;
}


/* =========================================================
   VALIDATION INSIGHT
   ========================================================= */

.validation-insight {
  margin-top: 17px;

  padding: 15px 17px;

  border-left: 3px solid #2563eb;

  border-radius: 0 9px 9px 0;

  background: #eef5ff;
}


.validation-insight span {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: 0.06em;

  color: #2563eb;
}


.validation-insight p {
  max-width: 900px;

  font-size: 10px;

  line-height: 1.65;

  color: #536a84;
}


.validation-insight strong {
  color: #233650;
}


/* =========================================================
   ENERGY GRID
   ========================================================= */

.energy-grid {
  display: grid;

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

  gap: 12px;
}


.energy-card {
  padding: 16px;

  background: #f8fafc;

  border: 1px solid #e7edf4;

  border-radius: 12px;
}


.energy-generation {
  display: block;

  min-height: 14px;

  margin-bottom: 5px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.04em;

  color: #72839a;
}


.energy-card h4 {
  font-size: 12px;

  font-weight: 750;

  color: #243044;
}


.energy-value {
  display: block;

  margin-top: 14px;

  font-size: 23px;

  line-height: 1;

  letter-spacing: -0.5px;

  color: #172033;
}


.energy-unit {
  display: block;

  margin-top: 5px;

  font-size: 9px;

  color: #718198;
}


.reference-energy {
  background: #fffaf1;

  border-color: #f2dfb9;
}


.gen2-energy-focus {
  background: #f2faf5;

  border-color: #cfe7da;
}


.post-analysis-card {
  background: #f5f7ff;

  border-color: #dfe4fa;
}


.post-analysis-card .energy-generation {
  color: #5968b4;
}


/* =========================================================
   METHOD NOTE
   ========================================================= */

.method-note {
  margin-top: 16px;

  padding: 14px 16px;

  border-radius: 9px;

  background: #f7f9fc;
}


.method-note strong {
  display: block;

  margin-bottom: 4px;

  font-size: 9px;

  color: #465970;
}


.method-note p {
  font-size: 10px;

  line-height: 1.6;

  color: #6b7d92;
}


/* =========================================================
   MD GRID
   ========================================================= */

.md-grid {
  display: grid;

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

  gap: 12px;
}


.md-card {
  padding: 17px;

  border: 1px solid #e6edf4;

  border-radius: 12px;

  background: #f9fbfd;
}


.md-card-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;
}


.md-card-top span {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.05em;

  color: #718198;
}


.md-card h4 {
  font-size: 13px;

  font-weight: 800;

  color: #172033;
}


.md-status {
  flex: 0 0 auto;

  padding: 4px 7px;

  border-radius: 6px;

  font-size: 8px;

  font-weight: 800;
}


.reference-status {
  background: #fff0ce;

  color: #9d6507;
}


.balanced-status {
  background: #dff4e8;

  color: #238553;
}


.reference-md {
  background: #fffaf2;

  border-color: #f1dfba;
}


.md-focus {
  background: #f1faf5;

  border-color: #cfe7da;
}


.md-metrics {
  margin-top: 15px;
}


.md-metrics > div {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  padding: 9px 0;

  border-top: 1px solid #e8edf3;
}


.md-metrics span {
  font-size: 9px;

  color: #708197;
}


.md-metrics strong {
  font-size: 10px;

  color: #263448;
}


/* =========================================================
   STRUCTURAL CONCLUSION
   ========================================================= */

.structural-conclusion {
  display: grid;

  grid-template-columns: 50px 1fr;

  gap: 18px;

  margin-top: 20px;

  padding: 21px;

  border-left: 3px solid #248653;

  border-radius: 0 12px 12px 0;

  background: #eff9f3;
}


.structural-conclusion-number {
  font-size: 30px;

  line-height: 1;

  font-weight: 850;

  color: #b8dfca;
}


.structural-conclusion span {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: 0.06em;

  color: #238553;
}


.structural-conclusion h3 {
  max-width: 720px;

  font-size: 17px;

  line-height: 1.4;

  color: #182235;
}


.structural-conclusion p {
  max-width: 850px;

  margin-top: 7px;

  font-size: 10px;

  line-height: 1.65;

  color: #5c7187;
}


/* =========================================================
   VALIDATION SUMMARY
   ========================================================= */

.validation-summary {
  margin-top: 24px;

  padding: 24px;

  border-radius: 16px;

  background: #172033;

  color: #ffffff;
}


.validation-summary .small-section-label {
  color: #7db0ff;
}


.validation-summary > h3 {
  margin-top: 4px;

  font-size: 19px;

  font-weight: 750;

  color: #ffffff;
}


.summary-grid {
  display: grid;

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

  gap: 14px;

  margin-top: 19px;
}


.summary-grid > div {
  padding: 15px;

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

  border-radius: 10px;

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


.summary-grid strong {
  display: block;

  margin-bottom: 6px;

  font-size: 10px;

  color: #ffffff;
}


.summary-grid p {
  font-size: 9px;

  line-height: 1.6;

  color: #aebcd0;
}


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

@media (max-width: 1000px) {

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


  .validation-connector {
    transform: rotate(90deg);

    height: 25px;
  }


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


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


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

}


@media (max-width: 650px) {

  .validation-section {
    padding-bottom: 70px;
  }


  .validation-block {
    padding: 18px;
  }


  .validation-block-heading {
    align-items: flex-start;

    flex-direction: column;
  }


  .validation-block-heading > p {
    text-align: left;
  }


  .validation-index {
    display: none;
  }


  .energy-grid,
  .md-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }


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

}
/* =========================================================
   END-TO-END WORKFLOW
========================================================= */

.workflow-section {
  padding: 15px 0 100px;
}


/* =========================================================
   HEADING
========================================================= */

.workflow-heading {
  margin-bottom: 30px;
}


.workflow-heading h2 {
  margin-top: 5px;

  font-size: clamp(28px, 4vw, 38px);

  line-height: 1.1;

  letter-spacing: -1.2px;

  font-weight: 800;

  color: #111b2e;
}


.workflow-heading p {
  max-width: 790px;

  margin-top: 10px;

  font-size: 14px;

  line-height: 1.65;

  color: #536681;
}


/* =========================================================
   WORKFLOW SHELL
========================================================= */

.workflow-shell {
  padding: 24px;

  background: #ffffff;

  border: 1px solid #e7edf4;

  border-radius: 17px;

  box-shadow:
    0 9px 30px
    rgba(15, 23, 42, 0.04);
}


/* =========================================================
   WORKFLOW TRACK
========================================================= */

.workflow-track {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    35px
    minmax(0, 1fr)
    35px
    minmax(0, 1fr)
    35px
    minmax(0, 1fr);

  gap: 8px;

  align-items: stretch;
}


.workflow-card {
  position: relative;

  min-height: 250px;

  padding: 18px;

  overflow: hidden;

  background: #f8fafc;

  border: 1px solid #e4eaf2;

  border-radius: 13px;
}


.workflow-card-primary {
  background: #eef5ff;

  border-color: #d6e5fb;
}


.workflow-card-green {
  background: #eff9f4;

  border-color: #d2eadc;
}


.workflow-card-final {
  background: #f2f5ff;

  border-color: #dce3f7;
}


/* =========================================================
   NUMBER
========================================================= */

.workflow-number {
  position: absolute;

  top: 9px;

  right: 12px;

  font-size: 31px;

  line-height: 1;

  font-weight: 850;

  color: #e4eaf2;
}


.workflow-card-primary .workflow-number {
  color: #d6e5fb;
}


.workflow-card-green .workflow-number {
  color: #d3eade;
}


/* =========================================================
   ICON
========================================================= */

.workflow-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 37px;

  height: 37px;

  margin-bottom: 16px;

  border-radius: 10px;

  background: #eaf1fb;

  color: #2563eb;

  font-size: 10px;

  font-weight: 850;

  letter-spacing: 0.02em;
}


.workflow-card-green .workflow-icon {
  background: #dff3e7;

  color: #258554;
}


/* =========================================================
   TEXT
========================================================= */

.workflow-label {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: 0.06em;

  color: #2563eb;
}


.workflow-card-green .workflow-label {
  color: #258554;
}


.workflow-card h3 {
  font-size: 16px;

  line-height: 1.25;

  font-weight: 800;

  color: #172033;
}


.workflow-card p {
  margin-top: 8px;

  font-size: 10px;

  line-height: 1.6;

  color: #687a90;
}


/* =========================================================
   STAT
========================================================= */

.workflow-stat {
  position: absolute;

  left: 18px;

  right: 18px;

  bottom: 17px;

  padding-top: 12px;

  border-top: 1px solid #e3e9f0;
}


.workflow-stat strong {
  display: block;

  font-size: 16px;

  line-height: 1.2;

  font-weight: 800;

  color: #172033;
}


.workflow-stat span {
  display: block;

  margin-top: 3px;

  font-size: 8px;

  color: #7a8ba0;
}


/* =========================================================
   ARROWS
========================================================= */

.workflow-arrow {
  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 23px;

  color: #9db1c9;
}


/* =========================================================
   ROW TRANSITION
========================================================= */

.workflow-turn {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-height: 70px;

  color: #8094ad;
}


.workflow-turn span {
  font-size: 8px;

  font-weight: 750;

  letter-spacing: 0.03em;
}


.workflow-turn div {
  font-size: 22px;
}


/* =========================================================
   SECOND TRACK
========================================================= */

.workflow-track-second {
  margin-top: 0;
}


/* =========================================================
   TAKEAWAY
========================================================= */

.workflow-takeaway {
  display: grid;

  grid-template-columns: 50px 1fr;

  gap: 18px;

  margin-top: 24px;

  padding: 21px;

  border-left: 3px solid #2563eb;

  border-radius: 0 12px 12px 0;

  background: #eef5ff;
}


.workflow-takeaway-number {
  font-size: 30px;

  line-height: 1;

  font-weight: 850;

  color: #b7d3fa;
}


.workflow-takeaway span {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: 0.06em;

  color: #2563eb;
}


.workflow-takeaway h3 {
  max-width: 760px;

  font-size: 17px;

  line-height: 1.4;

  color: #182235;
}


.workflow-takeaway p {
  max-width: 900px;

  margin-top: 7px;

  font-size: 10px;

  line-height: 1.65;

  color: #5c7187;
}


/* =========================================================
   TECHNOLOGY STACK
========================================================= */

.workflow-tools {
  margin-top: 18px;

  padding: 19px 22px;

  background: #172033;

  border-radius: 13px;
}


.workflow-tools .small-section-label {
  color: #7dacff;
}


.workflow-tool-list {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 11px;
}


.workflow-tool-list span {
  display: inline-flex;

  align-items: center;

  min-height: 29px;

  padding: 0 11px;

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

  border-radius: 7px;

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

  color: #c4d0e0;

  font-size: 9px;

  font-weight: 650;
}


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

@media (max-width: 1000px) {

  .workflow-track {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;
  }


  .workflow-arrow {
    display: none;
  }


  .workflow-turn {
    min-height: 55px;
  }

}


@media (max-width: 650px) {

  .workflow-section {
    padding-bottom: 70px;
  }


  .workflow-shell {
    padding: 17px;
  }


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


  .workflow-card {
    min-height: 235px;
  }


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

}
.project-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.project-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
}

.project-primary {
  color: #ffffff;
  background: #173b73;
  box-shadow: 0 10px 24px rgba(23, 59, 115, 0.16);
}

.project-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}