/* V1 — African Premium */

:root {
  --v1-bg: #FAFAF7;
  --v1-blue: #0066B3;
  --v1-navy: #0A1F3D;
  --v1-terracotta: #E8833A;
  --v1-terracotta-deep: #C66A24;
  --v1-sage: #3D7B5F;
  --v1-warm: #F5EFE6;
  --v1-line: rgba(10, 31, 61, 0.08);
}

html, body { background: var(--v1-bg); color: var(--v1-navy); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  font-size: 16px;
  line-height: 1.55;
}

.font-display { font-family: 'Fraunces', Georgia, serif; font-feature-settings: 'ss01', 'ss03'; letter-spacing: -0.02em; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Navbar */
.v1-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all 380ms var(--ek-ease);
  padding-block: 18px;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.v1-nav.is-scrolled {
  background: rgba(250, 250, 247, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--v1-line);
  padding-block: 12px;
}
.v1-nav .nav-link {
  color: rgba(10, 31, 61, 0.78);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  transition: color 220ms var(--ek-ease);
}
.v1-nav.over-dark .nav-link { color: rgba(255, 255, 255, 0.9); }
.v1-nav.over-dark .nav-link:hover { color: #fff; }
.v1-nav.is-scrolled .nav-link { color: rgba(10, 31, 61, 0.85); }
.v1-nav .nav-link:hover { color: var(--v1-blue); }
.v1-nav .nav-link::after {
  content: ''; position: absolute; bottom: -6px; left: 0; height: 2px; width: 0;
  background: var(--v1-terracotta); transition: width 280ms var(--ek-ease);
}
.v1-nav .nav-link:hover::after { width: 100%; }

/* CTA primary */
.btn-primary {
  background: var(--v1-terracotta);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 240ms var(--ek-ease);
  box-shadow: 0 8px 24px rgba(232, 131, 58, 0.35);
}
.btn-primary:hover { background: var(--v1-terracotta-deep); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(232, 131, 58, 0.45); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-flex; align-items: center; gap: 8px;
  backdrop-filter: blur(8px);
  transition: all 240ms var(--ek-ease);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.7); }

.btn-secondary {
  background: var(--v1-navy);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 240ms var(--ek-ease);
}
.btn-secondary:hover { background: #143460; transform: translateY(-1px); }

/* Hero */
.v1-hero {
  position: relative;
  min-height: 100svh;
  background: var(--v1-navy);
  overflow: hidden;
  isolation: isolate;
}
.v1-hero-img {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=2400&q=82&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.9) saturate(1.05);
  z-index: -2;
  will-change: transform;
}
.v1-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 31, 61, 0.55) 0%, rgba(10, 31, 61, 0.2) 35%, rgba(10, 31, 61, 0.65) 90%),
    radial-gradient(70% 60% at 80% 20%, rgba(232, 131, 58, 0.18), transparent 60%);
  z-index: -1;
}
.v1-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.v1-hero h1 em { font-style: italic; color: var(--v1-terracotta); font-feature-settings: 'ss03'; font-weight: 500; }
.v1-hero .stat-num { font-family: 'Fraunces', serif; font-weight: 500; }

/* Marquee proverbes */
.v1-proverbs {
  background: var(--v1-warm);
  border-block: 1px solid var(--v1-line);
}

/* Section title */
.v1-eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v1-terracotta);
}
.v1-h2 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--v1-navy);
}
.v1-h2 em { font-style: italic; color: var(--v1-blue); }
.v1-lead { font-size: 18px; color: rgba(10, 31, 61, 0.72); max-width: 60ch; }

/* Cards */
.v1-card {
  background: #fff;
  border-radius: var(--ek-r-lg);
  border: 1px solid var(--v1-line);
  padding: 28px;
  transition: all 320ms var(--ek-ease);
}
.v1-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(10, 31, 61, 0.08);
  border-color: rgba(0, 102, 179, 0.18);
}

/* Glass card (niveaux) */
.v1-glass {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--ek-r-lg);
  padding: 28px;
  transition: all 320ms var(--ek-ease);
}
.v1-glass:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 48px rgba(10, 31, 61, 0.12);
}
.v1-glass .lvl-icon {
  font-size: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 102, 179, 0.1), rgba(232, 131, 58, 0.1));
  margin-bottom: 18px;
}

/* Bento */
.v1-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.v1-bento > * { padding: 28px; border-radius: var(--ek-r-lg); position: relative; overflow: hidden; }
.bento-hero { grid-column: span 4; grid-row: span 2; background: linear-gradient(135deg, var(--v1-navy) 0%, #1B3460 100%); color: #fff; min-height: 380px; }
.bento-md   { grid-column: span 2; background: #fff; border: 1px solid var(--v1-line); }
.bento-md.alt { background: var(--v1-warm); border-color: rgba(232, 131, 58, 0.2); }
.bento-sm   { grid-column: span 2; background: #fff; border: 1px solid var(--v1-line); }
.bento-wide { grid-column: span 4; background: linear-gradient(135deg, var(--v1-blue) 0%, #2480C7 100%); color: #fff; }

@media (max-width: 1023px) { .v1-bento { grid-template-columns: repeat(2, 1fr); } .bento-hero, .bento-wide { grid-column: span 2; grid-row: auto; } }
@media (max-width: 639px) { .v1-bento { grid-template-columns: 1fr; } .v1-bento > * { grid-column: 1; } }

/* Phone mockup */
.phone {
  width: 280px;
  border-radius: 38px;
  background: #0A1F3D;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(10, 31, 61, 0.35), inset 0 0 0 2px rgba(255,255,255,0.08);
  position: relative;
}
.phone::before {
  content: '';
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px; background: #000; border-radius: 999px; z-index: 2;
}
.phone-screen {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 9/19;
  position: relative;
}

/* Testimonial card */
.v1-testimonial {
  background: #fff;
  border: 1px solid var(--v1-line);
  border-radius: var(--ek-r-lg);
  padding: 32px;
  position: relative;
}
.v1-testimonial::before {
  content: '“';
  position: absolute; top: 8px; right: 24px;
  font-family: 'Fraunces', serif;
  font-size: 96px; line-height: 1;
  color: rgba(232, 131, 58, 0.18);
}
.v1-testimonial .quote { font-family: 'Fraunces', serif; font-size: 19px; line-height: 1.5; font-style: italic; }

/* Footer */
.v1-footer { background: var(--v1-navy); color: #fff; }
.v1-footer a { color: rgba(255, 255, 255, 0.72); transition: color 200ms var(--ek-ease); }
.v1-footer a:hover { color: var(--v1-terracotta); }

/* Mobile drawer */
.v1-drawer {
  position: fixed; inset: 0;
  background: rgba(10, 31, 61, 0.95);
  backdrop-filter: blur(20px);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 380ms var(--ek-ease);
}
.v1-drawer.is-open { transform: translateX(0); }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}