/* =========================================================================
   Lagbot — Direction B (statement / type-led)
   Lifted directly from Lagbot Wireframes.html, adapted for production.
   ========================================================================= */
:root{
  --ink:#2b2b2b;
  --paper:#fbfbf9;
  --muted:#c9c9c4;
  --muted-2:#e4e4df;
  --accent:#ff6b1a;
  --line:#2b2b2b;
  --hatch:repeating-linear-gradient(45deg,#ececea 0 9px,#f7f7f4 9px 18px);
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  font-family:'Patrick Hand',cursive;
  color:var(--ink);
  background-color:var(--paper);
  font-size:17px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* Ben-Day dot grain — subtle ambient texture, masked with a vertical
   gradient so the dots are softly present at the top of the view and
   fade to nothing by the bottom. Sits behind all content via z-index:-1.
   ::before = the default (dark dots on paper). ::after = the orange-state
   overlay (denser dark dots tuned for the amber background); cross-fades
   in via .page-amber so the scene's color shift keeps the Ben-Day texture. */
body{transition:background-color .6s ease-out}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:radial-gradient(circle, rgba(43,43,43,.14) 1px, transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 50%, transparent 95%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 50%, transparent 95%);
  pointer-events:none;
  z-index:-1;
  transition:opacity .6s ease-out;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:radial-gradient(circle, rgba(20,20,20,.32) 1.2px, transparent 1.6px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 50%, transparent 95%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 50%, transparent 95%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition:opacity .6s ease-out;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Full-bleed page — no frame, no shadow, no surface fill.
   Leaving the page transparent lets the body's Ben-Day dot pattern
   show through every light section. */
.stage{display:block;padding:0}
.page{width:100%;background:transparent;border:none;box-shadow:none}

/* Content max-width lives on .wrap so dark/hatched sections can bleed full-width */
.wrap{max-width:1080px;margin:0 auto;padding:34px 44px}
.sketch{
  border:2.5px solid var(--ink);
  /* secret of the hand-drawn look — wildly asymmetric border-radius */
  border-radius:255px 14px 225px 14px/14px 225px 14px 255px;
  background:#fff;
}
.sec{position:relative}

/* Hero: fill the viewport — phone sits at the bottom, dark band starts below the fold */
.sec.hero{min-height:calc(100vh - 84px);display:flex;flex-direction:column}
.sec.hero > .wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;       /* keep inline elements at their natural width */
}

/* Hero stage: 3-column grid — left bubbles | phone | right bubbles.
   Phone is the only auto-width column; bubble columns flex to fill.
   This GUARANTEES bubbles can never overlap the phone. */
.hero-stage{
  width:100%;
  margin-top:auto;       /* pushes the stage to the bottom of the hero */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(12px, 2vw, 32px);
  align-items:end;       /* phone & bubble columns bottom-align */
}
.bub-col{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom:60px;   /* lift bubbles off the very bottom of viewport */
}
.bub-col-left{align-items:flex-start}
.bub-col-right{align-items:flex-end;text-align:right}
/* Reset .bub.in / .bub.out align-self so they obey their column's align-items */
.bub-col .bub{align-self:auto}

/* Smaller, tighter phone for the hero — auto-height (no wa-body min-height) */
.hero-phone{width:240px}
.hero-phone .wa-body{min-height:0;padding:12px 11px 18px}

@media(max-width:760px){
  .hero-stage{grid-template-columns:1fr;justify-items:center}
  .bub-col{flex-direction:row;flex-wrap:wrap;justify-content:center;padding-bottom:18px}
  .bub-col-right{order:3}
}

/* Nav row links — sit between logo and Get Started CTA */
.nav-links{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);
  margin-left:clamp(32px,4.5vw,64px);
  font-family:'Gaegu',cursive;font-weight:700;font-size:19px;
}
.nav-links a{
  position:relative;color:var(--ink);padding:6px 2px;
  transition:color .15s ease-out;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  height:2px;background:var(--accent);
  transition:right .25s ease-out;
}
.nav-links a:hover::after{right:0}
@media(max-width:760px){.nav-links{display:none}}

.eyebrow{
  display:inline-block;font-family:'Gaegu',cursive;font-weight:700;font-size:13px;letter-spacing:.5px;
  border:2px solid var(--ink);padding:3px 11px;border-radius:20px;margin-bottom:14px;
}

/* Large display type — Manrope 200 (clean thin sans, professional) */
.h-xxl{font-family:'Manrope',sans-serif;font-weight:200;line-height:1.02;font-size:64px;letter-spacing:-.03em;margin:0 0 18px}
.h-xl{font-family:'Manrope',sans-serif;font-weight:200;line-height:1.05;font-size:48px;letter-spacing:-.025em;margin:0 0 16px}
.h-lg{font-family:'Manrope',sans-serif;font-weight:300;line-height:1.1;font-size:34px;letter-spacing:-.02em;margin:0 0 14px}
/* Small UI heading stays Gaegu (per "only the big fonts") */
.h-md{font-family:'Gaegu',cursive;font-weight:700;font-size:22px;margin:0 0 8px}
.accent{color:var(--accent)}

/* Typewriter cycling phrase — slot sizes to the current text so "Never miss"
   and "again." reflow gently with each character. Pace is slow enough that
   the reflow reads as part of the rhythm, not a jitter. */
.typewriter{
  display:inline-block;
  vertical-align:baseline;
  white-space:nowrap;
}

.lines{margin:0}
.lines i{display:block;height:9px;background:var(--muted);border-radius:6px;margin:9px 0}
.lines i:nth-child(1){width:96%}
.lines i:nth-child(2){width:88%}
.lines i:nth-child(3){width:72%}
.lines.short i:nth-child(1){width:80%}
.lines.short i:nth-child(2){width:55%}

.ph{
  background:var(--hatch);
  border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:#8a8a84;
}
.ph span{
  font-family:'Courier New',monospace;font-size:12px;letter-spacing:.3px;
  background:rgba(255,255,255,.7);padding:2px 8px;
}

/* Clean square buttons with rounded corners (no more wobbly radius) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Gaegu',cursive;font-weight:700;font-size:16px;
  padding:12px 22px;border:2.5px solid var(--ink);background:#fff;color:var(--ink);
  border-radius:12px;
  cursor:pointer;
}
.btn.fill{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.fill:hover{filter:brightness(1.05)}

.field{
  flex:1;min-width:0;
  border:2.5px solid var(--ink);background:#fff;
  padding:12px 16px;color:var(--ink);
  border-radius:12px;
  font-family:'Patrick Hand',cursive;font-size:16px;outline:none;
}
.field::placeholder{color:#9a9a94}

.capture{display:flex;gap:10px;max-width:430px;margin-top:8px}

/* Bigger capture form for the hero — chunkier email + CTA */
.capture-lg{max-width:560px;gap:14px}
.capture-lg .field,
.capture-lg .btn{
  padding:18px 26px;
  font-size:19px;
  border-radius:16px;
}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  border:2px solid var(--ink);padding:5px 12px;border-radius:20px;
  font-size:14px;font-family:'Gaegu',cursive;font-weight:700;background:#fff;
}

.row{display:flex;gap:24px}
.grid{display:grid;gap:22px}
.card{padding:22px}
.icon{
  width:44px;height:44px;border:2.5px solid var(--ink);border-radius:12px;background:var(--muted-2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Gaegu',cursive;font-weight:700;margin-bottom:12px;
}
.muted-band{background:var(--ink);color:#fff}
.muted-band .lines i{background:#5a5a5a}
.muted-band .h-lg,.muted-band .h-md{color:#fff}

.stat{font-family:'Manrope',sans-serif;font-weight:200;font-size:56px;line-height:1;letter-spacing:-.035em;color:var(--accent)}
.plan-desc{
  font-family:'Patrick Hand',cursive;font-size:16px;line-height:1.45;
  color:#5a5a55;margin:14px 0 0;max-width:30ch;
}
.stat-cap{
  font-family:'Patrick Hand',cursive;font-size:15px;line-height:1.35;
  color:#cfcfcb;max-width:220px;margin:14px auto 0;
}
.feat-desc{
  font-family:'Patrick Hand',cursive;font-size:18px;line-height:1.5;
  color:var(--accent);max-width:46ch;margin:14px 0 0;
}

/* Feature row chat screenshots — standalone .wa panels (no phone shell).
   Inherit the WhatsApp-tinted chat surface and bubble colors already
   defined on .wa, but tighten padding/sizes so 4-5 messages fit the row. */
.feat-chat{
  margin-top:0;
  border:2.5px solid var(--ink);
  border-radius:18px;
  background:#fff;
  box-shadow:3px 4px 0 rgba(43,43,43,.08);
  align-self:center;
  max-width:480px;
}
.feat-chat .wa-body{
  padding:11px;
  gap:7px;
  min-height:0;
}
.feat-chat .bub{
  padding:7px 10px;
  font-size:13px;
  line-height:1.3;
  max-width:80%;
}
.feat-chat .bub b{font-size:10.5px;margin-bottom:0}
/* Paystack-style link bubble — monospaced, brand-tinted */
.feat-chat .bub.pay-link{
  font-family:'Courier New',monospace;
  font-size:12px;
  letter-spacing:.2px;
}
/* Compound .wa.feat-chat selector — specificity (0,2,0) — beats the later
   .wa rule which would otherwise win source-order and render only a 2px
   muted border. This is what makes the dark ink stroke around the chat
   panel actually paint, matching the Meet Nova transcript above. */
.wa.feat-chat{
  border:2.5px solid var(--ink);
}

/* ----- Feature-row scroll reveal -----
   The whole message view fades + slides in as a single unit when it
   enters the viewport. JS adds .is-revealed once; CSS handles motion.
   Once revealed, the class stays — no re-trigger on scroll-back. */
.feat-chat{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.feat-chat.is-revealed{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .feat-chat{opacity:1;transform:none;transition:none}
}

/* ===== Support page ===== */
/* Active nav state (used on the current page) */
.nav-links a.is-current{color:var(--accent)}
.nav-links a.is-current::after{right:0}

/* Topic cards */
.sup-topic{
  display:block;
  text-decoration:none;color:var(--ink);
  background:#fff;
  padding:24px 22px;
  transition:transform .18s ease-out, box-shadow .18s ease-out;
}
.sup-topic:hover{
  transform:translateY(-2px) rotate(-.4deg);
  box-shadow:3px 4px 0 rgba(43,43,43,.10);
}
.sup-topic .icon{
  font-family:'Gaegu',cursive;font-weight:700;font-size:18px;
  background:#fff;
}
.sup-topic-desc{
  font-family:'Patrick Hand',cursive;font-size:16px;line-height:1.45;
  color:#5a5a55;margin:6px 0 0;
}

/* FAQ accordion */
.sup-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sup-faq-item{
  border:2.5px solid var(--ink);
  border-radius:14px;
  background:#fff;
  padding:0;
  overflow:hidden;
}
.sup-faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:16px 20px;
  font-family:'Gaegu',cursive;font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.sup-faq-item > summary::-webkit-details-marker{display:none}
.sup-faq-item > summary::after{
  content:"+";
  font-family:'Gaegu',cursive;font-weight:700;font-size:22px;color:var(--accent);
  line-height:1;flex:none;
  transition:transform .2s ease-out;
}
.sup-faq-item[open] > summary::after{transform:rotate(45deg)}
.sup-faq-item > p{
  margin:0;padding:0 20px 18px;
  font-family:'Patrick Hand',cursive;font-size:16px;line-height:1.5;color:#3a3a35;
}
.sup-faq-item code{
  font-family:'Courier New',monospace;font-size:13.5px;
  background:#f2f0e9;padding:1px 6px;border-radius:4px;
}

/* Contact form layout */
.sup-contact{display:flex;flex-direction:column;gap:12px;max-width:520px}
.sup-contact textarea{resize:vertical;min-height:96px;font-family:'Patrick Hand',cursive}

/* ===== FAQ search results — live filter under the help centre search ===== */
.faq-results{
  max-width:760px;
  margin:30px auto 0;
  text-align:left;
}
.faq-results-count{
  font-family:'Patrick Hand',cursive;font-size:14px;color:#6f6f6a;
  text-align:center;margin:0 0 14px;
}
.faq-results-list{display:flex;flex-direction:column;gap:12px}
.faq-result .faq-cat{
  display:inline-block;
  font-family:'Gaegu',cursive;font-weight:700;font-size:11px;
  color:var(--accent);text-transform:uppercase;letter-spacing:.7px;
  background:rgba(255,107,26,.10);padding:2px 9px;border-radius:10px;
  margin-right:10px;
}
.faq-result .faq-q{display:inline}
.faq-result mark{
  background:rgba(255,107,26,.22);color:var(--ink);
  padding:0 2px;border-radius:3px;
}
.faq-no-results{
  font-family:'Patrick Hand',cursive;font-size:16px;color:#6f6f6a;
  text-align:center;padding:28px 16px;
  border:2.5px dashed #cfcfcb;border-radius:14px;background:#fff;
}
.faq-no-results .faq-nova-link{
  background:none;border:none;
  color:var(--accent);font:inherit;cursor:pointer;
  text-decoration:underline;padding:0;
}

/* Talk-to-Nova tile — orange-accented, calls itself out as the action card */
.sup-topic-nova{
  border-color:var(--accent);
  background:#fff;
  text-align:left;
  font:inherit;
  cursor:pointer;
  position:relative;
}
.sup-topic-nova:hover{
  box-shadow:3px 4px 0 rgba(255,107,26,.30);
  transform:translateY(-2px) rotate(-.4deg);
}
.sup-topic-nova .nova-icon{
  background:var(--accent);
  border-color:var(--ink);
  color:#fff;
}
.sup-topic-cta{
  display:inline-block;margin-top:12px;
  font-family:'Gaegu',cursive;font-weight:700;font-size:15px;
  color:var(--accent);
}

/* ===== Nova chat — floating support widget ===== */
.nova-chat{
  position:fixed;
  right:24px;bottom:24px;
  width:360px;max-width:calc(100vw - 32px);
  height:520px;max-height:calc(100vh - 48px);
  z-index:60;
  opacity:0;
  transform:translateY(16px) scale(.97);
  pointer-events:none;
  transition:opacity .22s ease-out, transform .22s ease-out;
}
.nova-chat.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.nova-chat-card{
  display:flex;flex-direction:column;
  height:100%;
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:22px;
  overflow:hidden;
  box-shadow:6px 8px 0 rgba(43,43,43,.18);
}
.nova-chat-top{
  position:relative;
  flex:none;
  padding:11px 44px 11px 12px;
}
.nova-chat-close{
  position:absolute;top:8px;right:8px;
  width:30px;height:30px;border-radius:50%;
  background:transparent;border:none;
  color:var(--ink);
  font-family:'Gaegu',cursive;font-weight:700;font-size:22px;
  line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.nova-chat-close:hover{background:rgba(43,43,43,.08)}
.nova-chat-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:14px 12px;
}
.nova-chat-input{
  flex:none;
  padding:10px;
}
.nova-chat-field{
  font-size:14px;color:var(--ink);
  font-family:'Patrick Hand',cursive;
  border:none;outline:none;background:transparent;
}
.nova-chat-field::placeholder{color:#9a9a94}
.nova-chat-input .wa-input-btn{
  width:30px;height:30px;font-size:15px;
}

/* Typing indicator inside the chat */
.bub.nova-typing{
  display:inline-flex !important;
  align-items:center;gap:5px;
  padding:11px 14px;
}
.nova-typing .dot{
  width:6px;height:6px;border-radius:50%;background:#5a5a55;
  animation:nova-dot 1.2s ease-in-out infinite;
}
.nova-typing .dot:nth-child(2){animation-delay:.15s}
.nova-typing .dot:nth-child(3){animation-delay:.30s}
@keyframes nova-dot{
  0%,80%,100%{opacity:.3;transform:translateY(0)}
  40%       {opacity:1;transform:translateY(-3px)}
}

@media(max-width:560px){
  .nova-chat{
    right:8px;bottom:8px;left:8px;
    width:auto;
    height:min(80vh, 580px);
  }
}

/* Soft tinted hero band on support page */
.sup-hero{
  background:#f6f4ee;
  border-bottom:2.5px solid var(--ink);
}

@media(max-width:760px){
  .sup-topic{padding:18px 16px}
  .sup-faq-item > summary{font-size:16px;padding:14px 16px}
  .sup-faq-item > p{padding:0 16px 14px;font-size:15px}
}

/* ===== Coverage section — dotted-paper band, two-column layout =====
   Left column carries the editorial text + pill list + stat card.
   Right column holds the draggable, zoomable Nigeria map. */
.coverage-sec{
  background-color:#f4f2ec;
  background-image:radial-gradient(circle, rgba(43,43,43,.11) 1px, transparent 1.4px);
  background-size:18px 18px;
  border-top:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);
  padding:clamp(40px,5vh,80px) clamp(24px,5vw,72px) clamp(20px,3vh,44px);
}
.cov-grid{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  /* Tighter left, much wider right — matches reference proportions */
  grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(32px,4vw,68px);
  align-items:start;
}
.cov-left{max-width:480px}

/* Eyebrow — small orange tracked caps */
.cov-eyebrow{
  display:inline-block;
  font-family:'Gaegu',cursive;font-weight:700;
  font-size:13px;letter-spacing:.22em;
  color:var(--accent);
  text-transform:uppercase;
  margin-bottom:22px;
}

/* Headline — Manrope thin. Sized + width-capped so it lands on two lines
   ("Powering conversations" / "where business happens") at desktop. */
.cov-head{
  font-family:'Manrope',sans-serif;font-weight:200;
  font-size:clamp(32px,3.2vw,46px);
  line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);
  margin:0 0 18px;
  max-width:22ch;
}
.cov-sub{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.55;
  color:#6f6f6a;
  margin:0 0 28px;
  max-width:38ch;
}

/* Pill list — five stacked rounded buttons with thin ink stroke. */
.cov-pills{
  list-style:none;
  margin:0 0 28px;padding:0;
  display:flex;flex-direction:column;
  gap:10px;
}
.cov-pill{
  display:inline-flex;align-items:center;gap:12px;
  width:fit-content;
  padding:10px 20px 10px 14px;
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:999px;
  font-family:'Patrick Hand',cursive;
  font-size:16px;
  color:var(--ink);
  box-shadow:2px 3px 0 rgba(43,43,43,.06);
  /* hover: orange fill, white text/icon, micro-lift. Transitions ease-out-expo
     so the colour shift feels considered, not abrupt. */
  transition:background-color .26s cubic-bezier(.16,1,.3,1),
             border-color     .26s cubic-bezier(.16,1,.3,1),
             color            .26s cubic-bezier(.16,1,.3,1),
             transform        .26s cubic-bezier(.16,1,.3,1),
             box-shadow       .26s cubic-bezier(.16,1,.3,1);
}
.cov-pill:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:2px 5px 0 rgba(43,43,43,.10);
}
.cov-pill:hover .cov-pill-ico{
  color:#fff;
}
.cov-pill-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  color:var(--ink);
  flex:none;
  transition:color .26s cubic-bezier(.16,1,.3,1);
}
.cov-pill-flag{
  /* Flag SVG draws its own ink border; remove the slot's strokeColor reset */
  width:28px;
}
.cov-pill-txt{line-height:1;letter-spacing:.2px}

/* Stat card — three orange-icon stats in a single horizontal pill. */
.cov-stats{
  display:flex;align-items:stretch;
  gap:0;
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:22px;
  padding:18px 8px;
  box-shadow:2px 3px 0 rgba(43,43,43,.06);
  max-width:480px;
}
.cov-stat{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:0 14px;
}
.cov-stat-ico{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);
  margin-bottom:8px;
}
.cov-stat-num{
  font-family:'Manrope',sans-serif;font-weight:300;
  font-size:clamp(22px,2vw,28px);
  letter-spacing:-.02em;line-height:1;
  color:var(--ink);
  margin-bottom:4px;
}
.cov-stat-lbl{
  font-family:'Patrick Hand',cursive;
  font-size:13px;color:#6f6f6a;line-height:1.25;
}
.cov-stat-div{
  flex:none;
  width:1px;
  background:#d8d6cf;
  margin:6px 0;
}

/* Right column — Nigeria map (static display, no zoom/pan/drag). */
.cov-right{
  display:flex;flex-direction:column;
  align-items:center;
}

/* Map viewport — square, sized via aspect-ratio, image fills it
   with object-fit:contain so the FULL PNG is always in frame. */
.cov-map-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  max-width:clamp(720px,95vh,1100px);
  margin-top:clamp(40px,6vh,90px);
}

.cov-map-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  user-select:none;
}

/* Decorative overlay elements — trees, palm, buildings, boats, waves
   positioned absolutely with % coords (of the square wrap = same as
   image since both share 1:1 aspect). Pointer-events:none so they
   don't intercept clicks on the map. Slightly translucent so they
   read as faint decorations, not dominant features. */
.cov-deco{
  position:absolute;
  height:auto;
  user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
  /* recede behind the route network — decorations are atmosphere, not data */
  opacity:.72;
}

/* Boats slowly sail across the gulf, then reset.
   Opacity fades at the start/end so the reset back to origin isn't visible —
   the boat just drifts in from one side and out the other in a loop.
   Large boat drifts right; small boat drifts left so they appear to pass. */
@keyframes covBoatDriftR {
  0%   { transform:translateX(0);     opacity:0; }
  10%  {                              opacity:.72; }
  88%  {                              opacity:.72; }
  100% { transform:translateX(170%);  opacity:0; }
}
@keyframes covBoatDriftL {
  0%   { transform:translateX(0);     opacity:0; }
  10%  {                              opacity:.72; }
  88%  {                              opacity:.72; }
  100% { transform:translateX(-170%); opacity:0; }
}
.cov-deco.cov-boat-l{ animation:covBoatDriftR 34s linear infinite; }
.cov-deco.cov-boat-s{ animation:covBoatDriftL 28s linear infinite -9s; }
@media (prefers-reduced-motion: reduce){
  .cov-deco.cov-boat-l, .cov-deco.cov-boat-s{ animation:none; }
}

/* Plane — full-bleed SVG layer sharing the routes' 0-100 coord space, so
   the SMIL animateMotion path can be authored in map percentages. Sits
   ABOVE routes, labels, and decorations so it never gets occluded as it
   crosses the map. */
.cov-plane{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5;
  overflow:visible;
}
.cov-plane-mark{
  opacity:0;                 /* SMIL fades up; this is the resting state */
  will-change:transform,opacity;
}
@media (prefers-reduced-motion: reduce){
  .cov-plane{ display:none; }
}

/* Coverage routes — Lagos hub broadcasting to major cities.
   Static orange paths + city dots show the network footprint; a
   pulsing radar ring on Lagos and traveling pulse-dots on each path
   communicate live activity. All coords are 0-100 (matches square wrap). */
.cov-routes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:3;
  overflow:visible;
}
.cov-routes-paths path{
  fill:none;
  stroke:var(--accent);
  stroke-width:.18;
  stroke-linecap:round;
  opacity:.9;
}
.cov-routes-flow circle{
  fill:var(--accent);
}
.cov-routes-city-ring{
  fill:none;
  stroke:var(--accent);
  stroke-width:.22;
}
.cov-routes-city-dot{
  fill:var(--accent);
}
.cov-routes-hub-ring{
  fill:none;
  stroke:var(--accent);
  stroke-width:.28;
}
.cov-routes-hub-dot{
  fill:var(--accent);
}
.cov-routes-hub-pulse{
  fill:none;
  stroke:var(--accent);
  stroke-width:.15;
  transform-box:fill-box;
  transform-origin:center;
  /* ease-out-expo — natural deceleration, the canonical broadcast feel */
  animation:covHubPulse 3.4s cubic-bezier(.16,1,.3,1) infinite;
  will-change:transform,opacity;
}
@keyframes covHubPulse{
  /* start scale .7 so each ring emerges from the static hub ring's edge
     rather than from somewhere inside it (more believable broadcast origin) */
  0%   { transform:scale(.7);  opacity:.55; }
  100% { transform:scale(2.7); opacity:0; }
}

/* City labels — HTML for crisp text. Smaller font so the network fits
   well inside Nigeria's outline without crowding neighbouring countries. */
.cov-city-label{
  position:absolute;
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:clamp(8.5px,.68vw,10px);
  color:var(--ink);
  /* refined data-overlay typography: tighter tracking, optimized rendering */
  letter-spacing:-.015em;
  font-feature-settings:"ss01","cv11";
  pointer-events:none;
  z-index:4;
  white-space:nowrap;
  /* breathing space between dot and label so they read as paired but distinct */
  transform:translate(12px,-50%);
}
.cov-label-lagos{
  font-weight:600;
  background:#fff;
  border:1px solid var(--ink);
  border-radius:4px;
  padding:1px 6px;
  /* sits to the LEFT of its dot (Lagos hub), per the reference */
  transform:translate(calc(-100% - 12px),-50%);
}
@media (prefers-reduced-motion: reduce){
  .cov-routes-hub-pulse,
  .cov-routes-flow{ display:none; }
}

/* === Scroll-triggered staged entrance ===
   Coverage map reveals in deliberate phases when the section scrolls into
   view: base PNG fades up first, atmospheric decorations next, then the
   connection paths stroke-draw outward from Lagos, then the city dots and
   the Lagos hub appear, then labels, then the live broadcast layer (hub
   pulse + traveling dots) starts. JS adds .cov-pre-reveal on init, and
   .cov-revealed when IntersectionObserver fires; if JS is disabled or
   reduced-motion is on, neither class is present and everything just shows. */
.cov-pre-reveal .cov-map-img,
.cov-pre-reveal .cov-deco:not(.cov-boat-l):not(.cov-boat-s),
.cov-pre-reveal .cov-routes-paths,
.cov-pre-reveal .cov-routes-flow,
.cov-pre-reveal .cov-routes-cities,
.cov-pre-reveal .cov-routes-hub,
.cov-pre-reveal .cov-city-label{
  opacity:0;
}
.cov-pre-reveal .cov-routes-paths path{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}

.cov-revealed .cov-map-img{
  transition:opacity .9s cubic-bezier(.16,1,.3,1);
  opacity:1;
}
.cov-revealed .cov-deco:not(.cov-boat-l):not(.cov-boat-s){
  transition:opacity 1s cubic-bezier(.16,1,.3,1) .35s;
  opacity:.72;
}
.cov-revealed .cov-routes-paths{
  transition:opacity .5s cubic-bezier(.16,1,.3,1) .75s;
  opacity:1;
}
.cov-revealed .cov-routes-paths path{
  transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1) .8s;
  stroke-dashoffset:0;
}
.cov-revealed .cov-routes-cities,
.cov-revealed .cov-routes-hub{
  transition:opacity .6s cubic-bezier(.16,1,.3,1) 1.5s;
  opacity:1;
}
.cov-revealed .cov-city-label{
  transition:opacity .55s cubic-bezier(.16,1,.3,1) 1.75s;
  opacity:1;
}
.cov-revealed .cov-routes-flow{
  transition:opacity .8s cubic-bezier(.16,1,.3,1) 2s;
  opacity:1;
}

@media(max-width:900px){
  .cov-grid{grid-template-columns:1fr;gap:32px}
  .cov-head{max-width:none}
  .cov-map-wrap{margin-top:0}
}

/* phone + chat mock — iPhone-ish proportions, a touch shorter */
.phone{
  width:268px;min-height:500px;border:3px solid var(--ink);border-radius:34px;background:#fff;
  padding:10px 10px 14px;position:relative;flex:none;
  display:flex;flex-direction:column;
}
.phone .wa{flex:1}
.phone::before{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:78px;height:7px;background:var(--ink);border-radius:6px;
}
.wa{margin-top:16px;border-radius:24px;overflow:hidden;border:2px solid var(--muted-2);display:flex;flex-direction:column}
.wa-top{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;background:var(--muted-2);border-bottom:2px solid #d3d3ce;
}
.wa-top svg{width:30px;height:20px}
.wa-top .nm{font-family:'Gaegu',cursive;font-weight:700;font-size:15px;line-height:1}
.wa-top .nm small{display:block;font-family:'Patrick Hand',cursive;font-weight:400;font-size:11px;color:#6f6f6a}
/* WhatsApp-tinted chat surface — beige paper, no green undertone */
.wa-body{padding:14px 11px;display:flex;flex-direction:column;gap:9px;background:#ece5dd;flex:1}

.bub{max-width:80%;padding:8px 11px;font-size:13.5px;line-height:1.25;border:2px solid var(--ink)}
/* incoming = white (Nova), outgoing = WhatsApp light-green (customer) */
.bub.in{align-self:flex-start;background:#fff;border-radius:2px 14px 14px 14px;border-left:4px solid var(--accent)}
.bub.out{align-self:flex-end;background:#d9fdd3;border-radius:14px 2px 14px 14px}
.bub b{font-family:'Gaegu',cursive;font-weight:700;font-size:11px;color:var(--accent);display:block;margin-bottom:1px}

/* WhatsApp message input bar at the bottom of the chat */
.wa-input{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  background:var(--muted-2);
  border-top:2px solid #d3d3ce;
}
.wa-input-field{
  flex:1;background:#fff;border:1.5px solid var(--ink);border-radius:16px;
  padding:6px 12px;
  font-family:'Patrick Hand',cursive;font-size:12px;color:#9a9a94;
  line-height:1;
}
.wa-input-btn{
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Gaegu',cursive;font-weight:700;font-size:13px;line-height:1;
  flex:none;border:2px solid var(--ink);
}

/* scatter (hero floating bubbles) */
.scatter{position:relative}
.floatb{position:absolute}

/* ===== Phone reveal — scroll-driven slide-in of the full phone =====
   The .phone-reveal div is an inert spacer between the hero and the
   muted-band; it provides the scroll distance for the phone overlay's
   animation. The actual phone lives in a fixed-position overlay at
   the end of the body so it can animate independently of normal flow. */
/* Reveal spacer — only needs to cover the phone-rise motion (50% of viewport).
   Once the phone lands centered with bubbles, the rest of the sequence plays
   on a timeline, so this spacer no longer carries the bubble-cascade dwell. */
.phone-reveal{height:100vh}

.phone-overlay{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index:5;
  pointer-events:none;
  /* default: half cut at viewport bottom — JS overrides this on scroll */
  transform:translateY(50%);
  will-change:transform;
}
.phone-overlay .phone-stage{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(12px,2vw,32px);
  align-items:center;          /* side bubbles vertically centered on the phone */
}
.phone-overlay .phone{pointer-events:auto}
.phone-overlay .bub-col{
  display:flex;flex-direction:column;gap:32px;
}
/* Bigger, more legible floating side bubbles */
.phone-overlay .fb{
  font-size:15.5px;line-height:1.3;padding:11px 15px;
}
.phone-overlay .fb b{font-size:12.5px}

/* Floating bob — kicks in when the overlay has .floating (set by JS once
   the muted-band scrolls into view). Each bubble bobs on its own delay so
   they drift, not pulse in unison. Rotation is preserved via the CSS var. */
@keyframes bub-bob{
  0%,100%{transform:translateY(0) rotate(var(--bub-rot,0deg))}
  50%   {transform:translateY(-7px) rotate(var(--bub-rot,0deg))}
}
.phone-overlay.revealed.floating .fb{
  animation:bub-bob 3.6s ease-in-out infinite;
}
.phone-overlay.floating .bub-col-left  .fb:nth-child(1){animation-delay:0s}
.phone-overlay.floating .bub-col-left  .fb:nth-child(2){animation-delay:.9s}
.phone-overlay.floating .bub-col-right .fb:nth-child(1){animation-delay:.45s}
.phone-overlay.floating .bub-col-right .fb:nth-child(2){animation-delay:1.3s}
@media (prefers-reduced-motion:reduce){
  .phone-overlay.floating .fb{animation:none}
}
.phone-overlay .bub-col-left{align-items:flex-start}
.phone-overlay .bub-col-right{align-items:flex-end;text-align:right}
.phone-overlay .bub-col .bub{align-self:auto}

/* Floating bubbles + in-phone messages — hidden by default, fade in
   when overlay gets the .revealed class. Rotation preserved via CSS var. */
.phone-overlay .fb,
.phone-overlay .msg-bub{
  opacity:0;
  transform:translateY(8px) rotate(var(--bub-rot,0deg));
  max-width:var(--bub-mw,none);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
.phone-overlay.revealed .fb,
.phone-overlay.revealed .msg-bub{
  opacity:1;
  transform:translateY(0) rotate(var(--bub-rot,0deg));
}
/* Stagger: chat messages first (inside the phone), then side bubbles.
   Delays are spaced out so the cascade takes ~3s — slow enough that each
   bubble registers individually instead of all popping at once. Pairs with
   the JS WA-dwell guard which holds the moment for a beat after the last
   bubble lands. */
.phone-overlay .msg-bub,
.phone-overlay .fb{transition-duration:.7s}
.phone-overlay.revealed .msg-bub[data-msg-i="1"]{transition-delay:.25s}
.phone-overlay.revealed .msg-bub[data-msg-i="2"]{transition-delay:.85s}
.phone-overlay.revealed .bub-col-left .fb:nth-child(1){transition-delay:1.45s}
.phone-overlay.revealed .bub-col-left .fb:nth-child(2){transition-delay:1.85s}
.phone-overlay.revealed .bub-col-right .fb:nth-child(1){transition-delay:2.25s}
.phone-overlay.revealed .bub-col-right .fb:nth-child(2){transition-delay:2.7s}

@media(max-width:760px){
  .phone-overlay .phone-stage{grid-template-columns:1fr;justify-items:center}
  .phone-overlay .bub-col{display:none}
}

/* Scene-transform spacer — small buffer below the reveal. The transformation
   sequence (spin → loading → dashboard → pair → conn) is TIMELINE-driven, not
   scroll-driven, so it doesn't need viewport-multiples of scroll distance.
   This spacer just gives the page a moment between reveal-end and muted-band. */
.scene-transform{height:60vh}

/* ===== PHONE-PAIR — fixed positioning context for both phones + connection.
   Perspective gives the inner phones real 3D depth for the Y-axis spin. ===== */
.phone-pair{
  position:relative;
  width:clamp(280px,52vw,640px);
  height:510px;
  margin:0 auto;
  perspective:1400px;
}
/* Wrappers handle X-shift (with smooth transition) so they don't interfere
   with the JS-driven rotation on the phones themselves. */
.phone-1-wrap,
.phone-2-wrap{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease-out;
}
.phone-2-wrap{opacity:0}
.phone-overlay.scene-pair .phone-1-wrap{
  transform:translate(calc(-50% - clamp(140px,18vw,180px)),-50%);
}
.phone-overlay.scene-pair .phone-2-wrap{
  transform:translate(calc(-50% + clamp(140px,18vw,180px)),-50%);
  opacity:1;
}
/* 3D HOST — wraps phone-1 and a black back-card. The rotation lives here
   so both faces share the same 3D context (preserve-3d). At 0° / 360° the
   phone front shows; at 180° the back card (#0a0a0a, phone-shaped) shows.
   The flip moment is what makes the screen change look like a real device
   spin instead of a fade. */
.phone-3d-host{
  position:relative;
  width:268px;
  min-height:500px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform:rotateY(var(--phone-rot,0deg));
}
.phone-3d-host .phone-1{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.phone-back-card{
  position:absolute;
  inset:0;
  background:#0a0a0a;
  border:3px solid var(--ink);
  border-radius:34px;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* phone-2 stays static (no spin) — keep selector neutral. */
.phone-pair .phone-2{transform:none}

/* ===== PAGE COLOR PHASES =====
   Spin + loading + dashboard + pair all share ORANGE (with Ben-Day dots).
   The black moment lives on the phone itself, not the page: at 180° of
   the spin the phone's back card (#0a0a0a) faces the viewer, reading as
   "the phone went black for a beat" against the orange page. After pair,
   bg fades back to paper for the connection scene. */
/* Orange phase is scoped to .amber-zone — a wrapper that ends just above
   the muted-band — so the orange physically cannot bleed past it, even on
   a hard fast scroll. Body bg/dots stay cream throughout; only this zone
   changes. .amber-zone::before paints the orange-state Ben-Day dots scoped
   inside the zone (parent has position:relative). */
.amber-zone{position:relative;transition:background-color .6s ease-out}
.amber-zone::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(20,20,20,.32) 1.2px, transparent 1.6px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 50%, transparent 95%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 50%, transparent 95%);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity .6s ease-out;
}
body.page-amber .amber-zone{background-color:#ff6b1a}
body.page-amber .amber-zone::before{opacity:1}

/* ===== PHONE SCREENS — stacked inside phone-1; opacity-controlled by data-state ===== */
.phone-1{display:flex;flex-direction:column}
.phone-screen{
  position:absolute;
  top:26px;left:10px;right:10px;bottom:14px;
  border-radius:24px;
  overflow:hidden;
  opacity:0;
  transition:opacity .55s ease-out;
}
.phone-1[data-state="wa"]        .ps-wa{opacity:1}
.phone-1[data-state="loading"]   .ps-loading{opacity:1}
.phone-1[data-state="dashboard"] .ps-dashboard{opacity:1}
/* The .wa inside ps-wa drops its margin-top — the screen container handles offset */
.ps-wa{display:flex;flex-direction:column}
.ps-wa .wa{margin-top:0;flex:1;border:none;border-radius:0;height:100%}

/* ===== LOADING SCREEN — descends into pure black first, THEN logo appears.
   The chat→loading transition takes ~0.6s; we hold the black for another
   beat before the Lagbot mark fades in, so the moment lands. Orange ring
   is gone; ambience comes from the phone-shell glow below. ===== */
.ps-loading{
  background:#0a0a0a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:#fff;
  transition:opacity .8s ease-out;
}
/* Soft orange glow halos the phone while loading — replaces the inner
   ring with an outer atmosphere on the page background. */
.phone-1[data-state="loading"]{
  box-shadow:
    0 0 60px 14px rgba(255,107,26,.38),
    0 0 120px 36px rgba(255,107,26,.22);
  transition:box-shadow .8s ease-out;
}
.phone-1{transition:box-shadow .8s ease-out}
/* All content inside is hidden until the black has "descended" */
.ps-loading-logo{width:72px;height:46px;opacity:0;transform:scale(.85)}
.phone-1[data-state="loading"] .ps-loading-logo{
  animation:ps-logo-in .65s cubic-bezier(.16,1,.3,1) 1.1s forwards;
}
@keyframes ps-logo-in{to{opacity:1;transform:scale(1)}}
.ps-loading-label{
  font-family:'Gaegu',cursive;font-weight:700;font-size:13px;color:#cfcfcb;opacity:0;
}
.phone-1[data-state="loading"] .ps-loading-label{
  animation:ps-logo-in .5s ease-out 1.5s forwards;
}
.ps-loading-track{
  position:absolute;bottom:18px;left:24px;right:24px;height:3px;
  background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;
}
.ps-loading-fill{height:100%;background:var(--accent);width:0;border-radius:3px}
.phone-1[data-state="loading"] .ps-loading-fill{
  animation:ps-fill 1.8s ease-out 1.6s forwards;
}
@keyframes ps-fill{to{width:100%}}

/* ===== DASHBOARD SCREEN — Lagbot app mockup, brand-consistent ===== */
.ps-dashboard{background:var(--paper);display:flex;flex-direction:column}
.dash-top{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--ink);color:#fff;
}
.dash-top svg{width:28px;height:18px}
.dash-title{font-family:'Gaegu',cursive;font-weight:700;font-size:14px;line-height:1}
.dash-body{flex:1;padding:11px 10px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dash-stat{
  border:2px solid var(--ink);border-radius:10px;padding:7px 4px;background:#fff;
  text-align:center;
}
.dash-stat b{
  display:block;font-family:'Manrope',sans-serif;font-weight:300;
  font-size:15px;color:var(--accent);letter-spacing:-.02em;
}
.dash-stat span{font-family:'Gaegu',cursive;font-weight:700;font-size:10px;color:var(--ink)}
.dash-section{
  font-family:'Gaegu',cursive;font-weight:700;font-size:11px;
  color:#6f6f6a;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;
}
.dash-list{display:flex;flex-direction:column;gap:5px;flex:1}
.dash-item{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border:1.5px solid var(--ink);border-radius:10px;background:#fff;
}
.dash-avatar{
  width:22px;height:22px;border-radius:50%;background:var(--accent);
  color:#fff;font-family:'Gaegu',cursive;font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.dash-info{flex:1;min-width:0}
.dash-info span{font-family:'Gaegu',cursive;font-weight:700;font-size:12px;line-height:1.1;display:block}
.dash-info small{font-family:'Patrick Hand',cursive;font-size:10.5px;color:#6f6f6a;display:block;line-height:1.2}
.dash-time{font-family:'Patrick Hand',cursive;font-size:10px;color:#9a9a94;flex:none}

/* ===== CONNECTION — pulsing dots between the two phones ===== */
.phone-conn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;gap:10px;
  opacity:0;
  transition:opacity .5s ease-out;
  pointer-events:none;
}
.phone-overlay.scene-conn .phone-conn{opacity:1}
.conn-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);border:2px solid var(--ink);
  animation:conn-pulse 1.3s ease-in-out infinite;
}
.conn-dot:nth-child(2){animation-delay:.18s}
.conn-dot:nth-child(3){animation-delay:.36s}
@keyframes conn-pulse{
  0%,100%{transform:scale(.7);opacity:.5}
  50%    {transform:scale(1.15);opacity:1}
}

/* ===== BUBBLES OUT — hide the side bubbles during transformation ===== */
.phone-overlay.bubs-out .bub-col{
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .6s ease-out, transform .6s ease-out;
  pointer-events:none;
}

@media(max-width:760px){
  .phone-pair{width:280px;height:510px}
  .phone-overlay.scene-pair .phone-1,
  .phone-overlay.scene-pair .phone-2{transform:translate(-50%,-50%) scale(.9)}
  .phone-overlay.scene-pair .phone-2{opacity:0}
}

/* footer */
/* === Footer — balanced two-row layout, no wasted whitespace ===
   Top row: brand (left) | tagline + capture form (right).
   Bottom row: section nav (left) | © + tagline (right), divided by a
   thin hairline. Fills full width with proper rhythm, stays minimal. */
.footer{
  background:var(--ink);
  color:#f4f2ec;
  padding:clamp(40px,5.5vh,68px) clamp(28px,5vw,72px) clamp(22px,2.8vh,36px);
}
.footer-wrap{
  max-width:1200px;
  margin:0 auto;
}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(28px,5vw,72px);
  flex-wrap:wrap;
}
.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Gaegu',cursive;font-weight:700;
  font-size:clamp(22px,2vw,26px);
  color:#fff;text-decoration:none;
  transition:opacity .22s cubic-bezier(.16,1,.3,1);
}
.footer-brand:hover{ opacity:.85; }
.footer-brand svg{ width:48px;height:30px;flex:none; }
.footer-cta{
  display:flex;align-items:center;
  gap:clamp(20px,2.6vw,40px);
  flex:1 1 auto;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.footer-tag{
  font-family:'Patrick Hand',cursive;font-weight:400;
  font-size:clamp(18px,1.6vw,22px);
  color:#fff;
  margin:0;
  max-width:18ch;
  line-height:1.2;
}
.footer-form{
  display:flex;gap:8px;
  width:clamp(260px,28vw,340px);
  margin:0;
}
.footer-form .field{ flex:1;min-width:0; }
.footer-meta{
  border-top:1.5px solid rgba(244,242,236,.12);
  margin-top:clamp(28px,3.5vh,40px);
  padding-top:clamp(18px,2.4vh,26px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 28px;
}
.footer-nav{
  display:flex;
  gap:clamp(16px,1.8vw,30px);
  flex-wrap:wrap;
}
.footer-nav a{
  font-family:'Patrick Hand',cursive;
  font-size:15px;
  color:#cfcfcb;
  text-decoration:none;
  transition:color .25s cubic-bezier(.16,1,.3,1);
}
.footer-nav a:hover{ color:var(--accent); }
.footer-copy{
  font-family:'Patrick Hand',cursive;
  font-size:13px;
  color:#888;
}

/* === Email-capture confirmation — replaces the form after submit so
   the user gets feedback instead of an apparent no-op === */
.capture-thanks{
  font-family:'Patrick Hand',cursive;
  font-size:clamp(15px,1.2vw,18px);
  color:var(--accent);
  padding:10px 2px;
  animation:captureThanks .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes captureThanks{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

@media(max-width:760px){
  .h-xxl{font-size:46px}.h-xl{font-size:36px}.h-lg{font-size:28px}.stat{font-size:44px}
  .row{flex-direction:column}
  .wrap{padding:26px 22px}
  .footer-top{ flex-direction:column;align-items:flex-start; }
  .footer-cta{ justify-content:flex-start;width:100%; }
  .footer-form{ width:100%; }
  .footer-meta{ flex-direction:column;align-items:flex-start; }
}

/* ===== Scroll hint =====
   Fixed at the bottom-center of the viewport, hidden by default. JS sets
   inline opacity each tick once the animation reaches the black-phone
   moment, then drops the opacity as the user scrolls past the trigger.
   Color is currentColor so it reads against both paper and the orange
   phase — we set color: var(--ink) which stays dark in both. */
.scroll-hint{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-family:'Patrick Hand',cursive;
  font-size:14px;
  letter-spacing:.4px;
  color:var(--ink);
  opacity:0;
  pointer-events:none;
  z-index:50;
  will-change:opacity;
}
.scroll-hint-text{line-height:1}
.scroll-hint-arrow{
  display:block;width:22px;height:22px;
  animation:scroll-hint-bounce 1.6s ease-in-out infinite;
}
.scroll-hint-arrow svg{display:block;width:100%;height:100%}
@keyframes scroll-hint-bounce{
  0%,100%{transform:translateY(0);opacity:.85}
  50%{transform:translateY(5px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint-arrow{animation:none}
}