/* ===========================================
   DESIGN TOKENS (CSS Variables) - LOCKED
   =========================================== */
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-accent: #1F3C88;
  
  /* Layout & Spacing (8px system) */
  --grid-gap: 24px;
  --grid-gap-mobile: 16px;
  --space-unit: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  --space-dead: 240px;
  --line-hair: 1px;
  
  /* Motion */
  --motion-fast: 120ms;
  --motion-ease: linear;

  /* Fonts */
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Typography Scales */
  --fs-display: 72px;
  --lh-display: 1.1;
  --fw-display: 700;
  --ls-display: -0.02em;
  
  --fs-h: 40px;
  --lh-h: 1.2;
  --fw-h: 600;
  
  --fs-body: 18px;
  --lh-body: 1.6;
  --fw-body: 400;
  
  --fs-small: 14px;
  --lh-small: 1.5;
  --fw-small: 400;
}

/* ===========================================
   RESET & GLOBAL STYLES
   =========================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background: var(--color-white);
  color: var(--color-black);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

section {
  width: 100%;
  position: relative;
}

/* ===========================================
   GRID ENGINE
   =========================================== */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

@media (max-width: 768px) {
  .grid-container {
    gap: var(--grid-gap-mobile);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* ===========================================
   DEBUG MODE
   =========================================== */
.debug-grid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  pointer-events: none;
  z-index: 9999;
}

.debug-grid > div {
  background: rgba(31, 60, 136, 0.1);
  border-left: var(--line-hair) solid var(--color-accent);
  border-right: var(--line-hair) solid var(--color-accent);
}

@media (max-width: 768px) {
  .debug-grid {
    gap: var(--grid-gap-mobile);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* ===========================================
   [01] HERO
   100vh, cols 1-8, ≥60% empty space
   =========================================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-xl);
}

.hero__content {
  grid-column: 1 / 9;
}

.hero__headline {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.hero__subheadline {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
  .hero__content {
    grid-column: 1 / -1;
  }
  
  .hero__headline {
    font-size: var(--fs-h);
  }
}

/* ===========================================
   DEAD SPACE
   =========================================== */
.dead-space {
  margin-bottom: var(--space-dead);
}

/* ===========================================
   [02] POSITION
   cols 1-5, remaining empty
   =========================================== */
.position {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: var(--line-hair) solid var(--color-black);
}

.position__text {
  grid-column: 1 / 6;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
  .position__text {
    grid-column: 1 / 11;
  }
}

/* ===========================================
   [03] FILTER
   cols 5-8 (Narrow bottleneck)
   =========================================== */
.filter {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: var(--line-hair) solid var(--color-black);
}

.filter__text {
  grid-column: 5 / 9;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
  .filter__text {
    grid-column: 3 / 11;
  }
}

/* ===========================================
   [04] METHOD
   3 equal modules: 1-4, 5-8, 9-12
   =========================================== */
.method {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: var(--line-hair) solid var(--color-black);
}

.method__item {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.method__item:nth-child(1) {
  grid-column: 1 / 5;
}

.method__item:nth-child(2) {
  grid-column: 5 / 9;
}

.method__item:nth-child(3) {
  grid-column: 9 / 13;
}

.method__number {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  display: block;
  margin-bottom: var(--space-unit);
}

@media (max-width: 768px) {
  .method__item:nth-child(1),
  .method__item:nth-child(2),
  .method__item:nth-child(3) {
    grid-column: 1 / -1;
    margin-bottom: var(--space-md);
  }
  
  .method__item:last-child {
    margin-bottom: 0;
  }
}

/* ===========================================
   CASE №0 - ISOLATED MODULE (HARD ISOLATION)
   Block Root: .case0
   All elements: .case0__*
   No external dependencies except :root tokens
   =========================================== */

/* Block Root */
.case0 {
  width: 100%;
  position: relative;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: var(--line-hair) solid var(--color-black);
}

/* Internal Grid Engine */
.case0__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Head: cols 1-4 */
.case0__head {
  grid-column: 1 / 5;
  grid-row: 1 / 2;
}

.case0__title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-unit);
}

.case0__subtitle {
  display: block;
  font-family: var(--font-main);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
}

/* Report: cols 5-9 with structural border */
.case0__report {
  grid-column: 5 / 10;
  grid-row: 1 / 2;
  border-left: var(--line-hair) solid var(--color-accent);
  padding-left: var(--space-md);
}

.case0__phase {
  margin-bottom: var(--space-lg);
}

.case0__phase:last-child {
  margin-bottom: 0;
}

.case0__phase-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin-bottom: var(--space-sm);
}

.case0__block {
  margin-bottom: var(--space-sm);
}

.case0__block:last-child {
  margin-bottom: 0;
}

.case0__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
  margin-bottom: var(--space-unit);
}

.case0__value {
  display: block;
  font-family: var(--font-main);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
}

/* Note: cols 10-12 */
.case0__note {
  grid-column: 10 / 13;
  grid-row: 1 / 2;
}

.case0__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
}

/* CASE №0 Mobile */
@media (max-width: 768px) {
  .case0__grid {
    gap: var(--grid-gap-mobile);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .case0__head {
    grid-column: 1 / 13;
    grid-row: 1 / 2;
    margin-bottom: var(--space-md);
  }
  
  .case0__report {
    grid-column: 3 / 11;
    grid-row: 2 / 3;
    padding-left: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  
  .case0__note {
    grid-column: 3 / 11;
    grid-row: 3 / 4;
  }
}

/* ===========================================
   CASE TEMPLATE v1.2 - ISOLATED MODULE (HARD ISOLATION)
   Block Root: .caseT
   All elements: .caseT__*
   No external dependencies except :root tokens
   =========================================== */

/* Block Root */
.caseT {
  width: 100%;
  position: relative;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: var(--line-hair) solid var(--color-black);
}

/* Internal Grid Engine */
.caseT__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Head: cols 1-4 */
.caseT__head {
  grid-column: 1 / 5;
  grid-row: 1 / 2;
}

.caseT__doctitle {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
  color: var(--color-black);
  margin-bottom: var(--space-sm);
}

.caseT__divider {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
  color: var(--color-black);
  margin-bottom: var(--space-sm);
}

.caseT__field {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin-bottom: var(--space-unit);
}

.caseT__line {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
}

/* Report: cols 5-9 with structural border */
.caseT__report {
  grid-column: 5 / 10;
  grid-row: 1 / 2;
  border-left: var(--line-hair) solid var(--color-accent);
  padding-left: var(--space-md);
}

.caseT__section {
  margin-bottom: var(--space-lg);
}

.caseT__section:last-child {
  margin-bottom: 0;
}

.caseT__section-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin-bottom: var(--space-sm);
}

.caseT__block {
  margin-bottom: var(--space-sm);
}

.caseT__block:last-child {
  margin-bottom: 0;
}

.caseT__key {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
  color: var(--color-accent);
  margin-bottom: var(--space-unit);
}

.caseT__val {
  display: block;
  font-family: var(--font-main);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
  color: var(--color-black);
}

/* Sidebar: cols 10-12 */
.caseT__sidebar {
  grid-column: 10 / 13;
  grid-row: 1 / 2;
  align-self: end;
}

.caseT__status {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
  color: var(--color-black);
}

/* CASE TEMPLATE Mobile */
@media (max-width: 768px) {
  .caseT__grid {
    gap: var(--grid-gap-mobile);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .caseT__head {
    grid-column: 1 / 13;
    grid-row: 1 / 2;
    margin-bottom: var(--space-md);
  }
  
  .caseT__report {
    grid-column: 3 / 11;
    grid-row: 2 / 3;
    padding-left: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  
  .caseT__sidebar {
    grid-column: 3 / 11;
    grid-row: 3 / 4;
    align-self: start;
  }
}

/* ===========================================
   [05] RESULT
   Each group cols 1-6, Group 2 shifted to col 5
   =========================================== */
.result {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: var(--line-hair) solid var(--color-black);
}

.result__group {
  margin-bottom: var(--space-lg);
}

.result__group:last-child {
  margin-bottom: 0;
}

.result__group:nth-child(1) .result__inner,
.result__group:nth-child(3) .result__inner {
  grid-column: 1 / 7;
}

.result__group:nth-child(2) .result__inner {
  grid-column: 5 / 11;
}

.result__title {
  font-size: var(--fs-h);
  font-weight: var(--fw-h);
  line-height: var(--lh-h);
  margin-bottom: var(--space-sm);
}

.result__desc {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
  .result__group:nth-child(1) .result__inner,
  .result__group:nth-child(2) .result__inner,
  .result__group:nth-child(3) .result__inner {
    grid-column: 1 / 12;
  }
  
  .result__title {
    font-size: var(--fs-h);
  }
}

/* ===========================================
   [06] FOUNDATION
   cols 1-4, --font-mono, --fs-small
   =========================================== */
.foundation {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-top: var(--line-hair) solid var(--color-black);
}

.foundation__text {
  grid-column: 1 / 5;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  line-height: var(--lh-small);
}

@media (max-width: 768px) {
  .foundation__text {
    grid-column: 1 / 13;
  }
}

/* ===========================================
   [07] CTA
   Aligned to col 1 or col 5
   =========================================== */
.cta {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-top: var(--line-hair) solid var(--color-black);
}

.cta__button-wrapper {
  grid-column: 1 / 5;
}

.cta__button {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.cta__button:hover {
  background: var(--color-accent);
}

@media (max-width: 768px) {
  .cta__button-wrapper {
    grid-column: 1 / -1;
  }
}