:root {
  --color-primary: #0F2E7A;
  --color-primary-dark: #0A1F57;
  --color-primary-light: #EAF1FF;

  --color-border: #C9D8FF;

  --color-bg: #FFFFFF;
  --color-surface: #F7FAFF;

  --color-text: #172033;
  --color-text-secondary: #5E6A85;

  --shadow-soft:
    0 10px 30px rgba(15, 46, 122, 0.08);

  --shadow-hover:
    0 16px 40px rgba(15, 46, 122, 0.12);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --container-width: 1200px;
}


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


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    var(--color-bg);

  color:
    var(--color-text);

  line-height:
    1.6;
}


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


.container {
  width:
    min(
      100% - 40px,
      var(--container-width)
    );

  margin:
    0 auto;
}


.section {
  padding:
    80px 0;

  scroll-margin-top:
    80px;
}


.section-title {
  margin-bottom:
    32px;

  color:
    var(--color-primary-dark);

  font-size:
    32px;

  font-weight:
    700;
}


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

.header {
  position:
    sticky;

  top:
    0;

  z-index:
    10;

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

  border-bottom:
    1px solid
    rgba(201, 216, 255, 0.8);

  backdrop-filter:
    blur(12px);
}


.header__inner {
  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.logo {
  color:
    var(--color-primary);

  font-size:
    22px;

  font-weight:
    800;
}


.nav {
  display:
    flex;

  align-items:
    center;

  gap:
    22px;
}


.nav a {
  position:
    relative;

  color:
    var(--color-text-secondary);

  font-size:
    14px;

  font-weight:
    600;

  transition:
    0.2s ease;
}


.nav a::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -7px;

  width:
    0;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--color-primary);

  transition:
    width 0.2s ease;
}


.nav a:hover {
  color:
    var(--color-primary);
}


.nav a:hover::after {
  width:
    100%;
}


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

.hero {
  padding:
    100px 0 80px;

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


.hero__content {
  max-width:
    780px;
}


.hero__eyebrow {
  display:
    inline-block;

  margin-bottom:
    18px;

  padding:
    8px 14px;

  border-radius:
    999px;

  background:
    var(--color-primary-light);

  color:
    var(--color-primary);

  font-size:
    14px;

  font-weight:
    700;
}


.hero h1 {
  margin-bottom:
    22px;

  color:
    var(--color-primary-dark);

  font-size:
    58px;

  line-height:
    1.08;

  letter-spacing:
    -0.025em;
}


.hero__text {
  max-width:
    680px;

  margin-bottom:
    30px;

  color:
    var(--color-text-secondary);

  font-size:
    20px;

  line-height:
    1.7;
}


.button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    14px 24px;

  border-radius:
    12px;

  background:
    var(--color-primary);

  color:
    #FFFFFF;

  font-weight:
    700;

  box-shadow:
    var(--shadow-soft);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.button:hover {
  background:
    var(--color-primary-dark);

  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-hover);
}


/* ========================================
   KPI
======================================== */

.kpi-grid {
  display:
    grid;

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

  gap:
    20px;
}


.kpi-card {
  padding:
    24px;

  background:
    #FFFFFF;

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

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

  box-shadow:
    var(--shadow-soft);

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


.kpi-card:hover {
  transform:
    translateY(-3px);

  border-color:
    #A9C1FF;

  box-shadow:
    var(--shadow-hover);
}


.kpi-label {
  margin-bottom:
    10px;

  color:
    var(--color-text-secondary);

  font-size:
    14px;
}


.kpi-value {
  margin-bottom:
    8px;

  color:
    var(--color-primary-dark);

  font-size:
    34px;

  font-weight:
    800;
}


.kpi-change {
  display:
    inline-block;

  padding:
    6px 10px;

  border-radius:
    999px;

  background:
    var(--color-primary-light);

  color:
    var(--color-primary);

  font-size:
    14px;

  font-weight:
    700;
}


.kpi-change.negative {
  background:
    #FFF1F0;

  color:
    #B42318;
}


/* ========================================
   PERFORMANCE / CHARTS
======================================== */

.performance {
  background:
    var(--color-surface);
}


.chart-card {
  padding:
    28px;

  background:
    #FFFFFF;

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

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

  box-shadow:
    var(--shadow-soft);

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


.chart-card:hover {
  border-color:
    #B7CAFF;

  box-shadow:
    var(--shadow-hover);
}


.chart-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    30px;
}


.chart-card__header h3 {
  margin-bottom:
    6px;

  color:
    var(--color-primary-dark);

  font-size:
    22px;
}


.chart-card__header p {
  color:
    var(--color-text-secondary);

  font-size:
    14px;
}


.chart-period {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    7px 12px;

  border-radius:
    999px;

  background:
    var(--color-primary-light);

  color:
    var(--color-primary);

  font-size:
    13px;

  font-weight:
    700;

  white-space:
    nowrap;
}


.chart-wrapper {
  position:
    relative;

  width:
    100%;

  height:
    400px;
}


.chart-row {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;

  margin-top:
    20px;
}


.chart-card--small {
  height:
    100%;
}


.chart-wrapper--small {
  height:
    300px;
}


/* ========================================
   SECTION HEADINGS
======================================== */

.section-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;

  margin-bottom:
    32px;
}


.section-heading .section-title {
  margin-bottom:
    0;
}


.section-eyebrow {
  margin-bottom:
    8px;

  color:
    var(--color-primary);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.section-description {
  max-width:
    430px;

  color:
    var(--color-text-secondary);

  font-size:
    15px;

  text-align:
    right;

  line-height:
    1.6;
}


/* ========================================
   RATIOS
======================================== */

.ratios {
  background:
    var(--color-surface);
}


.ratio-grid {
  display:
    grid;

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

  gap:
    20px;
}


.ratio-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    26px;

  background:
    #FFFFFF;

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

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

  box-shadow:
    var(--shadow-soft);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.ratio-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow-hover);
}


.ratio-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    4px;

  background:
    var(--color-primary);
}


.ratio-label {
  margin-bottom:
    14px;

  color:
    var(--color-text-secondary);

  font-size:
    14px;

  font-weight:
    700;
}


.ratio-value {
  margin-bottom:
    12px;

  color:
    var(--color-primary-dark);

  font-size:
    34px;

  line-height:
    1;

  font-weight:
    800;
}


.ratio-description {
  color:
    var(--color-text-secondary);

  font-size:
    13px;

  line-height:
    1.55;
}


/* ========================================
   METHODOLOGY
======================================== */

.methodology {
  background:
    #FFFFFF;
}


.methodology-grid {
  display:
    grid;

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

  gap:
    20px;
}


.methodology-card {
  padding:
    28px;

  background:
    var(--color-surface);

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

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

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}


.methodology-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #AFC5FF;
}


.methodology-card--wide {
  grid-column:
    span 2;
}


.methodology-number {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  margin-bottom:
    18px;

  border-radius:
    10px;

  background:
    var(--color-primary-light);

  color:
    var(--color-primary);

  font-size:
    14px;

  font-weight:
    800;
}


.methodology-card h3 {
  margin-bottom:
    10px;

  color:
    var(--color-primary-dark);

  font-size:
    21px;
}


.methodology-card > p {
  margin-bottom:
    24px;

  color:
    var(--color-text-secondary);

  font-size:
    14px;

  line-height:
    1.65;
}


/* SOURCE LIST */

.source-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.source-item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    12px 14px;

  background:
    #FFFFFF;

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

  border-radius:
    10px;

  color:
    var(--color-text-secondary);

  font-size:
    13px;
}


.source-item strong {
  color:
    var(--color-primary);

  font-size:
    13px;
}


/* PIPELINE */

.pipeline {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;
}


.pipeline span:not(.pipeline-arrow) {
  padding:
    10px 14px;

  background:
    #FFFFFF;

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

  border-radius:
    10px;

  color:
    var(--color-primary-dark);

  font-size:
    13px;

  font-weight:
    700;
}


.pipeline-arrow {
  color:
    var(--color-primary);

  font-weight:
    800;
}


/* FORMULAS */

.formula-grid {
  display:
    grid;

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

  gap:
    14px;
}


.formula-item {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    16px;

  background:
    #FFFFFF;

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

  border-radius:
    12px;
}


.formula-name {
  color:
    var(--color-primary-dark);

  font-size:
    14px;

  font-weight:
    800;
}


.formula-item code {
  color:
    var(--color-text-secondary);

  font-family:
    "Courier New",
    monospace;

  font-size:
    13px;

  white-space:
    normal;
}


/* SCOPE */

.scope-grid {
  display:
    grid;

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

  gap:
    14px;
}


.scope-grid > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    16px;

  background:
    #FFFFFF;

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

  border-radius:
    12px;
}


.scope-label {
  color:
    var(--color-text-secondary);

  font-size:
    12px;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


.scope-grid strong {
  color:
    var(--color-primary-dark);

  font-size:
    15px;
}


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

.findings {
  background:
    var(--color-surface);
}


.findings-grid {
  display:
    grid;

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

  gap:
    20px;
}


.finding-card {
  padding:
    26px;

  background:
    #FFFFFF;

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

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

  box-shadow:
    var(--shadow-soft);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.finding-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow-hover);
}


.finding-number {
  display:
    inline-block;

  margin-bottom:
    14px;

  color:
    var(--color-primary);

  font-size:
    24px;

  font-weight:
    800;
}


.finding-title {
  margin-bottom:
    10px;

  color:
    var(--color-primary-dark);

  font-size:
    18px;

  font-weight:
    800;
}


.finding-card p {
  color:
    var(--color-text-secondary);

  font-size:
    15px;

  line-height:
    1.65;
}


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

.footer {
  padding:
    40px 0;

  background:
    var(--color-primary-dark);

  color:
    rgba(255, 255, 255, 0.72);

  text-align:
    center;
}


.footer-title {
  margin-bottom:
    6px;

  color:
    #FFFFFF;

  font-size:
    18px;

  font-weight:
    800;
}


.footer p {
  font-size:
    13px;
}


.footer-note {
  margin-top:
    6px;

  opacity:
    0.72;
}


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

@media (
  max-width: 992px
) {

  .hero h1 {
    font-size:
      44px;
  }


  .nav {
    gap:
      16px;
  }


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


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


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


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


  .methodology-card--wide {
    grid-column:
      auto;
  }


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


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


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

@media (
  max-width: 640px
) {

  .container {
    width:
      min(
        100% - 28px,
        var(--container-width)
      );
  }


  .header__inner {
    flex-direction:
      column;

    justify-content:
      center;

    gap:
      12px;

    padding:
      16px 0;
  }


  .nav {
    flex-wrap:
      wrap;

    justify-content:
      center;

    gap:
      12px 16px;
  }


  .nav a {
    font-size:
      13px;
  }


  .hero {
    padding:
      70px 0 55px;
  }


  .hero h1 {
    font-size:
      36px;
  }


  .hero__text {
    font-size:
      17px;
  }


  .section {
    padding:
      60px 0;
  }


  .section-title {
    font-size:
      28px;
  }


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


  .chart-card {
    padding:
      20px;
  }


  .chart-card__header {
    flex-direction:
      column;
  }


  .chart-wrapper {
    height:
      320px;
  }


  .chart-wrapper--small {
    height:
      300px;
  }


  .section-heading {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      12px;
  }


  .section-description {
    text-align:
      left;
  }


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


  .methodology-card {
    padding:
      22px;
  }


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


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


  .pipeline {
    align-items:
      flex-start;
  }


  .source-item {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }


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

}