/* ============================================================
   Grew — base styles shared across all pages
   ============================================================ */

:root {
  --bg:        #FAFAFB;
  --ink:       #1B1B47;
  --ink-soft:  #2D2D5F;
  --purple:    #7B6CFF;
  --purple-2:  #6B5DE8;
  --purple-soft: #ECEAF8;
  --line:      #E8E7F2;
  --card:      #FFFFFF;
  --muted:     #9A9AB5;
  --gray-soft: #F0EFF5;

  /* Grew accent colors */
  --c-tristesse:   #5B7AC0;
  --c-colere:      #C03A2E;
  --c-confiance:   #2B8A8E;
  --c-degout:      #6E9D3E;
  --c-honte:       #B85F6E;
  --c-joie:        #D9B41A;
  --c-indifferent: #8B8B8B;
  --c-peur:        #5A7BC4;
  --c-surprise:    #E8915A;
  --c-inconnu:     #7B6CFF;

  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(27,27,71,.04), 0 4px 14px rgba(27,27,71,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Cherry Bomb One", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  background-image:
    url("../img/backgrond\ grewz.png");
    /* url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%23DEDDE8' stroke-width='1.2' opacity='.6'><ellipse cx='40' cy='50' rx='22' ry='25'/><circle cx='34' cy='44' r='1.2' fill='%23DEDDE8'/><circle cx='46' cy='44' r='1.2' fill='%23DEDDE8'/><path d='M34 56 Q40 60 46 56'/><ellipse cx='150' cy='110' rx='24' ry='27'/><circle cx='144' cy='104' r='1.2' fill='%23DEDDE8'/><circle cx='156' cy='104' r='1.2' fill='%23DEDDE8'/><path d='M144 116 Q150 120 156 116'/><ellipse cx='80' cy='170' rx='20' ry='22'/><circle cx='75' cy='165' r='1.2' fill='%23DEDDE8'/><circle cx='85' cy='165' r='1.2' fill='%23DEDDE8'/><path d='M75 175 Q80 178 85 175'/><ellipse cx='190' cy='30' rx='18' ry='20'/></g></svg>"); */
  background-repeat: repeat;
}

/* ---------- HEADER ---------- */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 24px;
  margin: 10px 24px;
  padding: 18px 36px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-size: 36px;
  color: var(--ink);
  letter-spacing: .5px;
  text-decoration: none;
}
.site nav { display: flex; gap: 56px; }
.site nav a {
  color: var(--ink);
  font-size: 18px;
  text-decoration: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  padding: 4px 2px;
  transition: color .2s;
}
.site nav a:hover { color: var(--purple); }
.site nav a.active { color: var(--purple); }
.site nav a.active::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px; bottom: -4px; height: 3px;
  background: var(--purple);
  border-radius: 2px;
  transform: skew(-10deg);
}

.cta {
  font-family: inherit;
  background: var(--purple);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 4px 0 var(--purple-2);
  transition: transform .15s, box-shadow .15s;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--purple-2); }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--purple-2); }

/* ---------- BANNER (skewed black tag) ---------- */
.banner-tag {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 14px 32px;
  border-radius: 14px;
  font-size: 18px;
  letter-spacing: 1px;
  transform: rotate(-4deg);
  box-shadow: 0 8px 0 rgba(27,27,71,.18);
}

/* ---------- HANDWRITTEN ARROW ---------- */
.handwritten {
  font-family: "Cherry Bomb One", system-ui, sans-serif;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: .5px;
  transform: rotate(-8deg);
  display: inline-block;
}

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width: 960px) {
  header.site { padding: 14px 20px; margin: 0 12px; }
  .site nav { gap: 28px; }
  .site nav a { font-size: 14px; letter-spacing: 1px; }
  .cta { padding: 10px 18px; font-size: 13px; }
  .logo { font-size: 28px; }
}
@media (max-width: 640px) {
  .site nav { display: none; }
  header.site .cta { padding: 8px 14px; font-size: 12px; }
}