:root {
  color-scheme: light;
  --mindbase-premium: #0b1320;
  --mindbase-corporate: #111b2e;
  --mindbase-steel: #9fb3cf;
  --mindbase-primary: #5e789b;
  --mindbase-metal: #dde7f4;
  --mindbase-paper: #f4f7fb;
  --mindbase-line: #d7e0ec;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, #f8fafc 0%, var(--mindbase-paper) 46%, #eef3f8 100%);
}

a {
  text-decoration: none;
}

input, textarea, select, button {
  outline: none;
}

a, button {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

::selection {
  background: rgba(159, 179, 207, 0.35);
  color: var(--mindbase-corporate);
}

.brand-symbol {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  object-position: center;
}

.brand-wordmark {
  display: block;
  height: 3rem;
  width: auto;
  object-fit: contain;
}

.premium-surface {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(215, 224, 236, 0.95);
  box-shadow: 0 18px 50px rgba(11, 19, 32, 0.1);
}

.premium-dark-surface {
  background: rgba(11, 19, 32, 0.84);
  border: 1px solid rgba(221, 231, 244, 0.2);
}

.hero-media {
  background-position: center right;
  background-size: cover;
  transform: scale(1.015);
}

.hero-vignette {
  background:
    linear-gradient(90deg, rgba(11, 19, 32, 0.98) 0%, rgba(11, 19, 32, 0.9) 42%, rgba(11, 19, 32, 0.56) 100%),
    linear-gradient(180deg, rgba(11, 19, 32, 0.1) 0%, rgba(11, 19, 32, 0.76) 100%);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(221, 231, 244, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221, 231, 244, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 72%);
}

.section-kicker {
  color: var(--mindbase-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.premium-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(221, 231, 244, 0.55), transparent);
}

.rotating-line {
  position: relative;
  display: block;
  height: 1.2em;
  overflow: hidden;
}

.rotating-line span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  animation: slide-fade 9s infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.rotating-line span:nth-child(1) {
  animation-delay: 0s;
}

.rotating-line span:nth-child(2) {
  animation-delay: 3s;
}

.rotating-line span:nth-child(3) {
  animation-delay: 6s;
}

@keyframes slide-fade {
  0% {
    opacity: 0;
    transform: translateX(-0.8rem);
  }
  10%,
  30% {
    opacity: 1;
    transform: translateX(0);
  }
  40% {
    opacity: 0;
    transform: translateX(1.2rem);
  }
  100% {
    opacity: 0;
    transform: translateX(1.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotating-line span {
    position: static;
    animation: none;
  }

  .rotating-line span:not(:first-child) {
    display: none;
  }
}