/* =========================================================================
   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;
}

/* ===== 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 band — Nigeria map, pan + zoom ===== */
.ng-band{
  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);
  overflow:hidden;
}
.ng-stage{
  position:relative;
  max-width:none;        /* full-row stage — no centered 1080px column */
  height:300px;          /* shorter band — top/bottom crop the map */
  margin:0 auto;
  padding:0;
}
/* Viewport spans the whole row; horizontal mask feathers the edges so
   the map content fades into the dotted band instead of clipping hard. */
.ng-viewport{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  cursor:grab;
  user-select:none;
  touch-action:none;
  z-index:1;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.ng-viewport:active{cursor:grabbing}
.ng-canvas{
  position:absolute;
  top:50%;left:50%;
  width:min(1200px, 100%);
  transform:translate(-50%,-50%) scale(1.0);
  transform-origin:center center;
  will-change:transform;
  pointer-events:none;     /* clicks pass through to viewport for drag */
}
.ng-map{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(3px 4px 0 rgba(43,43,43,.10));
}
/* Africa context layer — muted so Nigeria reads as the focus. */
.ng-africa{
  fill:#ede9df;
  stroke:#b8b3a4;
  stroke-width:4;
  stroke-linejoin:round;
}
.ng-region-label{
  font-family:'Patrick Hand',cursive;font-size:34px;
  fill:#a09a8b;
  text-anchor:middle;
  letter-spacing:.5px;
  pointer-events:none;
}
/* Neighboring country labels — caps, faint ink, all visible when zoomed in */
.ng-country-label{
  font-family:'Gaegu',cursive;font-weight:700;font-size:18px;
  fill:#8a8478;text-anchor:middle;letter-spacing:1.5px;
  pointer-events:none;
}
/* Ocean / sea italics */
.ng-ocean-label{
  font-family:'Patrick Hand',cursive;font-size:32px;
  fill:#7fa8b8;font-style:italic;letter-spacing:1px;
  pointer-events:none;
}
.ng-sea-label{
  font-family:'Patrick Hand',cursive;font-size:22px;
  fill:#7fa8b8;font-style:italic;letter-spacing:1px;text-anchor:middle;
  pointer-events:none;
}
/* Lake Chad + river system */
.ng-water{fill:#cfe3ec;stroke:#7fa8b8;stroke-width:1.5}
.ng-water-label{
  font-family:'Patrick Hand',cursive;font-size:10px;
  fill:#5a8295;font-style:italic;text-anchor:middle;
  pointer-events:none;
}
.ng-river{
  fill:none;stroke:#7fa8b8;stroke-width:2;
  stroke-dasharray:5 3;opacity:.7;
}
.ng-pin-label{
  font-family:'Gaegu',cursive;font-weight:700;font-size:14px;
  fill:#2b2b2b;text-anchor:middle;
  paint-order:stroke;stroke:#fffdf7;stroke-width:4px;stroke-linejoin:round;
}
/* Tiny hint label so users know the map is interactive. */
.ng-hint{
  position:absolute;
  bottom:8px;right:10px;
  font-family:'Patrick Hand',cursive;font-size:10.5px;color:#8a8478;
  pointer-events:none;
  background:rgba(244,242,236,.92);padding:2px 8px;border-radius:8px;
  white-space:nowrap;
  letter-spacing:.2px;
}
/* Subheading tag — small rounded pill, sits off to the side of the map */
.ng-tag{
  position:absolute;
  top:18px;left:24px;
  background:#fff;
  font-size:13px;
  padding:6px 14px;
  transform:rotate(-1.5deg);
  z-index:3;
}
.ng-chip{
  position:absolute;
  background:#fff;
  font-size:13px;
  pointer-events:none;
  z-index:3;
}
@media (prefers-reduced-motion:reduce){
  .ng-pin animate{display:none}
}
@media (max-width:760px){
  .ng-stage{height:260px;padding:0 18px}
  .ng-chip{display:none}
  .ng-tag{font-size:11px;padding:4px 10px}
}

/* 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{background:var(--ink);color:#fff;padding:34px 44px}
.footer > .row{max-width:1080px;margin:0 auto}
.footer .lines i{background:#5a5a5a}
.badge{
  height:42px;border:2px solid #fff;border-radius:8px;
  display:inline-flex;align-items:center;gap:8px;padding:0 12px;
  font-family:'Gaegu',cursive;font-weight:700;font-size:13px;color:#fff;
}
.badge small{
  display:block;font-family:'Patrick Hand',cursive;font-weight:400;
  font-size:10px;opacity:.8;line-height:1;
}

@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{padding:24px 22px}
}