/* Web-owned asset.
  ChillHiHi V2 Site Theme: Retro Mocha
  ------------------------------------------------------------
  Marketing/homepage visual theme layer. Keep site.css focused on
  general page structure; use this file for colors, accents,
  hero treatment, and homepage brand mood.
*/

/* 1. Retro Complementary Homepage Accents */
:root {
  --retro-mocha: #a47864;
  --retro-teal: #6490a4;
  --retro-mauve: #8f5d70;
  --retro-ink: #3b2a25;
}

body {
  background: linear-gradient(180deg, #f8f6f1 0%, #f2eee7 100%);
}

.site-header {
  background: rgba(248, 246, 241, 0.94);
}

.brand span {
  background: #3d5159;
  box-shadow: none;
}

.hero {
  position: relative;
}

.hero::before {
  display: none;
}

.hero-copy {
  position: relative;
}

.hero-copy::after {
  display: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #526870;
  letter-spacing: 0.08em;
}

h1 {
  color: var(--retro-ink);
}

.button.primary {
  border-color: #344a52;
  background: #3d5159;
  color: #fffdf8;
  box-shadow: 0 10px 24px rgba(52, 74, 82, 0.14);
}

.button.secondary {
  border-color: rgba(100, 144, 164, 0.32);
  background: rgba(100, 144, 164, 0.08);
  color: #4a7182;
}

.preview-card {
  position: relative;
  overflow: hidden;
}

.preview-card::before {
  display: none;
}

.preview-head b {
  color: var(--retro-teal);
}

.preview-metric {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 253, 248, 0.38), transparent 28%),
    linear-gradient(135deg, rgba(164, 120, 100, 0.92), rgba(100, 144, 164, 0.9));
  color: #fffdf8;
}

.preview-metric small,
.preview-metric span {
  color: rgba(255, 253, 248, 0.74);
}

.preview-grid div:nth-child(2) b,
.preview-grid div:nth-child(4) b {
  color: var(--retro-teal);
}

.feature-grid article {
  position: relative;
  overflow: hidden;
}

.feature-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--retro-mocha);
}

.feature-grid article:nth-child(2)::before {
  background: var(--retro-teal);
}

.feature-grid article:nth-child(3)::before {
  background: var(--retro-mauve);
}

.feature-grid article:nth-child(2) span,
.feature-grid article:nth-child(2) h3 {
  color: #4f7f93;
}

.feature-grid article:nth-child(3) span,
.feature-grid article:nth-child(3) h3 {
  color: var(--retro-mauve);
}

.safety {
  background:
    linear-gradient(90deg, rgba(143, 93, 112, 0.09), transparent 34%),
    rgba(255, 253, 248, 0.86);
}

.site-footer a {
  color: var(--retro-teal);
  font-weight: 780;
}

.education-hero {
  background:
    linear-gradient(115deg, rgba(248, 246, 241, .96), rgba(242, 238, 231, .74)),
    radial-gradient(circle at 80% 24%, rgba(100, 144, 164, .14), transparent 34%);
}

.hero-guide,
.funding-flow article,
.model-card,
.boundary-card {
  box-shadow: 0 12px 30px rgba(59, 42, 37, .055);
}

.role-section {
  background: linear-gradient(180deg, rgba(100, 144, 164, .055), rgba(255, 253, 248, .18));
}

@media (max-width: 680px) {
  .hero::before {
    left: 20px;
    right: 20px;
  }

  .hero-copy::after {
    display: none;
  }
}