/* kasvu-site.css — kas.vu zen design system */

/* ── Custom properties ──────────────────────────────────────────────────────── */

:root {
  --zen-sage:   #A3A755;
  --zen-indigo: #4A3F8A;
  --zen-gray:   #8E8E8A;
  --zen-cream:  #F0ECD8;
  --zen-slate:  #4E5A65;
  --zen-dark:   #2C2F33;
  --zen-light:  #F7F5EC;
  --zen-white:  #ffffff;

  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── Base reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  background:  var(--zen-light);
  color:       var(--zen-slate);
  font-family: var(--font-body);
  margin:      0;
  min-height:  100vh;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.kasvu-container {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 1.5rem;
}

.kasvu-prose {
  max-width: 720px;
  margin:    0 auto;
  padding:   0 1.5rem;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-display);
  color:       var(--zen-indigo);
  line-height: 1.2;
  margin:      0;
}

p { margin: 0; }

a { text-decoration: none; }

/* ── Hero overlay ───────────────────────────────────────────────────────────── */

.hero-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to right,
    rgba(44,47,51,0.75) 0%,
    rgba(44,47,51,0.35) 60%,
    rgba(44,47,51,0.1)  100%
  );
}

/* ── Nav ────────────────────────────────────────────────────────────────────── */

.kasvu-nav {
  position:   sticky;
  top:        0;
  z-index:    100;
  background: rgba(44,47,51,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.kasvu-nav a { color: rgba(255,255,255,0.75); }
.kasvu-nav a:hover { color: #fff; }
.kasvu-nav .brand { color: var(--zen-sage); font-family: var(--font-display); font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.btn-primary {
  display:         inline-block;
  background:      var(--zen-sage);
  color:           #fff;
  font-family:     var(--font-body);
  font-size:       0.875rem;
  font-weight:     600;
  padding:         0.75rem 1.75rem;
  border-radius:   6px;
  text-decoration: none;
  transition:      background 0.2s;
}
.btn-primary:hover { background: #8e9248; }

.btn-ghost {
  display:         inline-block;
  color:           rgba(255,255,255,0.7);
  font-family:     var(--font-body);
  font-size:       0.875rem;
  font-weight:     500;
  padding:         0.75rem 1.75rem;
  border-radius:   6px;
  border:          1px solid rgba(255,255,255,0.2);
  text-decoration: none;
  transition:      color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ── Section utilities ──────────────────────────────────────────────────────── */

.section-eyebrow {
  font-family:    var(--font-body);
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--zen-sage);
}

.bg-white  { background: var(--zen-white); }
.bg-light  { background: var(--zen-light); }
.bg-dark   { background: var(--zen-dark);  }

/* ── Card grid ──────────────────────────────────────────────────────────────── */

.pillar-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   1rem;
}

.pillar-card {
  background:    var(--zen-white);
  border:        1px solid rgba(163,167,85,0.15);
  border-radius: 10px;
  padding:       1.5rem;
  text-decoration: none;
  display:       block;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.pillar-card:hover {
  border-color: var(--zen-sage);
  box-shadow:   0 4px 16px rgba(74,63,138,0.08);
}
.pillar-card .num  { font-size: 0.75rem; font-family: var(--font-body); color: var(--zen-gray); }
.pillar-card h3    { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--zen-dark); margin: 0.5rem 0 0.25rem; }
.pillar-card p     { font-size: 0.875rem; color: var(--zen-gray); line-height: 1.6; }

/* ── Prose ──────────────────────────────────────────────────────────────────── */

.prose-kasvu {
  color:       var(--zen-slate);
  line-height: 1.8;
  font-size:   1rem;
}
.prose-kasvu h2 {
  font-family:  var(--font-display);
  color:        var(--zen-indigo);
  font-size:    1.35rem;
  font-weight:  600;
  margin-top:   2rem;
  margin-bottom: 0.75rem;
}
.prose-kasvu h3 {
  font-family:  var(--font-display);
  color:        var(--zen-dark);
  font-size:    1.05rem;
  font-weight:  600;
  margin-top:   1.5rem;
  margin-bottom: 0.5rem;
}
.prose-kasvu p  { margin-bottom: 1rem; }
.prose-kasvu ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-kasvu li { margin-bottom: 0.4rem; }
.prose-kasvu a  { color: var(--zen-sage); }
.prose-kasvu a:hover { color: var(--zen-indigo); }

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.kasvu-footer {
  background:   var(--zen-dark);
  color:        rgba(255,255,255,0.45);
  font-size:    0.8rem;
  padding:      2.5rem 1.5rem;
  text-align:   center;
}
.kasvu-footer a { color: rgba(255,255,255,0.5); }
.kasvu-footer a:hover { color: rgba(255,255,255,0.8); }

/* ── Locale switcher ────────────────────────────────────────────────────────── */

.locale-btn {
  font-size:    0.7rem;
  font-weight:  600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:        rgba(255,255,255,0.45);
  padding:      0.25rem 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition:   color 0.15s;
}
.locale-btn:hover, .locale-btn.active { color: var(--zen-sage); }