/* ==========================================================================
   Layout — container, grid, sections
   ========================================================================== */

.sv-container {
  width: 100%;
  max-width: var(--sv-container);
  margin-inline: auto;
  padding-inline: var(--sv-space-6);
}

@media (min-width: 768px) {
  .sv-container { padding-inline: var(--sv-space-8); }
}

.sv-container--narrow {
  max-width: var(--sv-container-sm);
}

.sv-container--max-1280 {
  max-width: 1280px;
}

.sv-section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.sv-section--tight { padding-block: clamp(3rem, 5vw, 5rem); }

.sv-section--dark {
  background: var(--sv-section-alt);
}

.sv-section--darker {
  background: var(--sv-very-light);
  background-image:
    linear-gradient(180deg, var(--sv-section-alt) 0%, var(--sv-very-light) 100%);
}

.sv-section--gradient {
  position: relative;
  background: var(--sv-light-blue);
  overflow: hidden;
}
.sv-section--gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sv-gradient-mesh);
  opacity: 0.5;
  pointer-events: none;
}
.sv-process-section.sv-section--gradient {
  background: linear-gradient(180deg, #050B1C 0%, #0A1F3D 100%);
}
.sv-process-section.sv-section--gradient::before {
  display: none;
}

.sv-section--why-solivra {
  padding-block: 120px;
  background: #FFFFFF;
  background-image:
    linear-gradient(180deg, #F5FAFF 0%, #EAF4FF 100%);
  position: relative;
}
.sv-section--why-solivra::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 132, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 132, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 1;
}

.sv-section--mission-vision {
  padding-block: 120px;
  background: #FFFFFF;
  background-image:
    linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
  position: relative;
}
.sv-section--mission-vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(45, 140, 255, 0.08), transparent 70%);
  pointer-events: none;
}

.sv-section--timeline {
  padding-block: 120px;
  background: #FFFFFF;
  background-image:
    linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
  position: relative;
}
.sv-section--timeline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(45, 140, 255, 0.06), transparent 70%);
  pointer-events: none;
}

.sv-grid {
  display: grid;
  gap: var(--sv-space-6);
}

.sv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .sv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .sv-grid--2,
  .sv-grid--3,
  .sv-grid--4,
  .sv-grid--5 { grid-template-columns: 1fr; }
}

.sv-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sv-flex {
  display: flex;
  gap: var(--sv-space-4);
}

.sv-flex--center { align-items: center; justify-content: center; }
.sv-flex--between { justify-content: space-between; align-items: center; }
.sv-flex--wrap { flex-wrap: wrap; }
.sv-flex--col { flex-direction: column; }

.sv-stack { display: flex; flex-direction: column; gap: var(--sv-space-4); }
.sv-stack--sm { gap: var(--sv-space-2); }
.sv-stack--lg { gap: var(--sv-space-6); }
.sv-stack--xl { gap: var(--sv-space-8); }

.sv-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sv-line), transparent);
  margin-block: var(--sv-space-8);
}

.sv-text-center { text-align: center; }
.sv-text-muted { color: var(--sv-ink-muted); }
.sv-text-gradient {
  background: var(--sv-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sv-text-brand {
  background: var(--sv-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sv-relative { position: relative; }
.sv-z-0 { z-index: 0; }
.sv-z-1 { z-index: 1; }
.sv-z-2 { z-index: 2; }