/* ============================================================================
   CoBuild Africa — Tunnel "Investir autrement"
   Funnel-specific styles, built on the CoBuild design tokens.
   Bands: solid dark nav · teal hero · charcoal-teal dark · white · cream cards.
   ========================================================================== */

@import url('colors_and_type.css');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cobuild-cream);
  color: var(--cobuild-dark-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ----- Section band colors ------------------------------------------------ */
.band { position: relative; overflow: hidden; }
.band-hero    { background: var(--section-hero); color: #fff; }      /* #2F6360 teal */
.band-dark    { background: var(--section-dark); color: #fff; }      /* #2A4140 charcoal-teal */
.band-deep    { background: var(--cobuild-dark-1); color: #fff; }    /* #1A2D2C */
.band-light   { background: #ffffff; color: var(--cobuild-dark-1); }
.band-cream   { background: var(--cobuild-cream); color: var(--cobuild-dark-1); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section-pad { padding: 72px 0; }
.section-pad-sm { padding: 48px 0; }

/* ----- Ambient orbs (dark bands only) ------------------------------------- */
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orbs .orb { position: absolute; border-radius: 50%; filter: blur(110px); animation: orb-float 20s infinite ease-in-out alternate; }
.orbs .o1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: var(--cobuild-dark-2); top: -16%; left: -10%; opacity: .5; }
.orbs .o2 { width: 36vw; height: 36vw; max-width: 520px; max-height: 520px; background: var(--cobuild-accent); bottom: -14%; right: -8%; opacity: .16; animation-delay: -10s; }
.orbs .o3 { width: 26vw; height: 26vw; max-width: 380px; max-height: 380px; background: var(--cobuild-muted); top: 38%; left: 52%; opacity: .10; animation-delay: -5s; }
@keyframes orb-float { 0% { transform: translate(0,0) scale(1);} 100% { transform: translate(5%,8%) scale(1.06);} }
.band > .wrap, .band > .nav-inner { position: relative; z-index: 1; }

/* ----- Typography helpers ------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cobuild-accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; display: inline-block; }
.band-light .eyebrow, .band-cream .eyebrow { color: var(--cobuild-dark-2); }

.display {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1.05;
  letter-spacing: -.02em; margin: 22px 0;
}
h2.title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.018em; margin: 16px 0;
}
h3.sub { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.25; margin: 0; }
.lead { font-size: 1.18rem; line-height: 1.6; max-width: 56ch; }
.band-hero .lead, .band-dark .lead, .band-deep .lead { color: rgba(255,255,255,.82); }
.band-light .lead, .band-cream .lead { color: rgba(26,45,44,.68); }
.accent { color: var(--cobuild-accent); }
.muted-d { color: rgba(255,255,255,.62); }
.muted-l { color: rgba(26,45,44,.6); }

/* The design tokens are dark-first (headings default to near-white --fg1).
   On light/cream bands, force brand-dark heading + text color. */
.band-light, .band-cream { color: var(--cobuild-dark-1); }
.band-light h1, .band-light h2, .band-light h3, .band-light h4, .band-light .display, .band-light .title, .band-light .sub,
.band-cream h1, .band-cream h2, .band-cream h3, .band-cream h4, .band-cream .display, .band-cream .title, .band-cream .sub {
  color: var(--cobuild-dark-1);
}
.band-hero h1, .band-hero h2, .band-hero h3, .band-hero h4,
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4,
.band-deep h1, .band-deep h2, .band-deep h3, .band-deep h4 { color: #fff; }

/* ----- Hand-drawn circle motif (signature) -------------------------------- */
.circled { position: relative; display: inline-block; padding: 6px 26px; white-space: nowrap; }
.circled > .ink { position: relative; z-index: 1; }
.circled > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.circled.draw .stroke-1 { stroke-dasharray: 620; }
.in .circled.draw .stroke-1 { animation: draw-circle 1.05s var(--ease-out-soft); }
@keyframes draw-circle { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } }

/* ----- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 15px 26px; border-radius: 100px; border: 1px solid transparent;
  transition: transform .3s var(--ease-out-soft), background .3s var(--ease-out-soft), box-shadow .3s var(--ease-out-soft), border-color .3s var(--ease-out-soft);
  white-space: nowrap;
}
.btn .arrow { width: 18px; height: 1.5px; background: currentColor; position: relative; transition: width .3s var(--ease-out-soft); }
.btn .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.btn:hover .arrow { width: 26px; }

.btn-accent { background: var(--cobuild-accent); color: var(--cobuild-dark-1); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 28px rgba(102,192,189,.28); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 8px 30px rgba(102,192,189,.42); }
.btn-accent:active { transform: translateY(0) scale(.99); }

.btn-dark { background: var(--cobuild-dark-1); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,22,21,.28); }

.btn-ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(14px); }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }

.btn-outline { background: transparent; border-color: currentColor; }
.btn-outline:hover { background: rgba(26,45,44,.05); transform: translateY(-2px); }

.btn-lg { padding: 17px 32px; font-size: 16px; }

/* WhatsApp button — brand teal per wireframe, with the glyph */
.wa-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cobuild-accent); color: var(--cobuild-dark-1);
  border: none; border-radius: 100px; padding: 16px 28px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 8px 24px rgba(102,192,189,.30);
  transition: transform .3s var(--ease-out-soft), box-shadow .3s var(--ease-out-soft);
}
.wa-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 12px 32px rgba(102,192,189,.45); }
.wa-btn svg { width: 22px; height: 22px; }

/* ----- Glass surface (dark bands) ----------------------------------------- */
.glass {
  background: rgba(26,45,44,.32);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 8px 32px rgba(0,0,0,.30), inset 0 1px 1px rgba(255,255,255,.15), inset 0 -1px 1px rgba(255,255,255,.02);
}

/* ----- Floating nav ------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 60; background: var(--section-nav); border-bottom: 1px solid rgba(255,255,255,.05); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; gap: 24px; }
.nav .logo img { height: 42px; width: auto; }
.nav-links { flex: 1; display: flex; justify-content: center; }
.nav-links ul { list-style: none; margin: 0; padding: 6px 8px; display: flex; gap: 4px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; box-shadow: inset 0 1px 1px rgba(255,255,255,.05); }
.nav-links a { padding: 9px 20px; border-radius: 100px; font-size: 14.5px; font-weight: 500; color: #fff; transition: background .25s var(--ease-out-soft); }
.nav-links a:hover { background: rgba(255,255,255,.06); }
.nav-links a.active { background: rgba(0,0,0,.35); font-weight: 600; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 1px rgba(255,255,255,.06); }
.nav-cta { flex: 0 0 auto; }
.nav-back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 500; }
.nav-back:hover { color: #fff; }

/* ----- Reveal on scroll ---------------------------------------------------
   Below-fold content fades/rises in as it enters the viewport.
   Safety: if JS detects a frozen animation timeline (print export, some
   preview/capture hosts) it adds html.no-anim, which forces everything
   visible. Print + reduced-motion + no-JS are handled the same way. */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: none; animation: reveal-in .68s var(--ease-out-soft); }
@keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

html.no-anim .reveal,
html.no-anim .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; }
html.no-anim .orbs .orb { animation: none !important; }
html.no-anim .in .circled.draw .stroke-1 { animation: none !important; stroke-dashoffset: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; }
  .orbs .orb { animation: none !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ----- Media placeholder (branded, not wireframe-dashed) ------------------ */
.media {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(102,192,189,.18), transparent 60%),
    linear-gradient(150deg, #34514f, #223634);
  border: 1px solid rgba(255,255,255,.08);
}
.media.light-ph {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(102,192,189,.16), transparent 60%),
    linear-gradient(150deg, #eef1f1, #e2e8e8);
  border: 1px solid rgba(26,45,44,.08);
}
.media .ph-tag {
  position: absolute; left: 16px; bottom: 16px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72); background: rgba(0,0,0,.32);
  padding: 7px 13px; border-radius: 100px; backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 8px;
}
.media.light-ph .ph-tag { color: rgba(26,45,44,.7); background: rgba(255,255,255,.55); }

/* Play button */
.play-btn { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); display: grid; place-items: center; transition: transform .3s var(--ease-out-soft), background .3s var(--ease-out-soft); }
.play-btn::after { content: ""; width: 0; height: 0; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.media:hover .play-btn, .vsl:hover .play-btn { transform: scale(1.06); background: rgba(102,192,189,.28); border-color: var(--cobuild-accent); }