/* =========================================================================
   Whatsoza — Showcase layer (collage hero, product mockups, proof graphics)
   Built on tokens.css. Loaded after components.css.
   Visual language: real-feeling product UI + photography + floating proof,
   arranged as a collage that "illustrates" the product (AiSensy-style),
   kept on the Whatsoza teal brand.
   ========================================================================= */

/* ---- Accent tokens for the showcase ------------------------------------ */
:root{
  --fs-hero:clamp(2.5rem,5.4vw,4.4rem);
  --glass:rgba(255,255,255,.72);
  --sh-float:0 22px 48px -18px rgba(11,18,32,.26),0 6px 16px -8px rgba(11,18,32,.14);
  --sh-card:0 14px 36px -16px rgba(11,18,32,.22);
  --wa-ink:#0a3d1f;
}

/* ---- Hero text ---------------------------------------------------------- */
.hero--x{background:
  radial-gradient(60% 55% at 88% 6%,rgba(14,124,107,.10),transparent 60%),
  radial-gradient(50% 50% at 8% 90%,rgba(37,211,102,.08),transparent 60%),
  linear-gradient(180deg,var(--c-primary-50),#fff 60%);}
.hero--x h1{font-size:var(--fs-hero);line-height:1.03;letter-spacing:-.03em;font-weight:800;}
.hero--x .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(360px,520px);align-items:center;}
.hero--x .hero-content{min-width:0;}
@media(max-width:920px){.hero--x .hero-grid{grid-template-columns:1fr;}}
.hl{color:var(--c-primary-700);padding:0 .04em;
  background-image:linear-gradient(180deg,transparent 58%,rgba(37,211,102,.32) 58%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* On dark heroes/sections the dark-teal ink is muddy — brighten the keyword */
.phero--dark .hl,.section--dark .hl{color:var(--c-primary-200);
  background-image:linear-gradient(180deg,transparent 58%,rgba(37,211,102,.42) 58%);}
.hero-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--c-primary-100);color:var(--c-primary-700);font-weight:600;font-size:.84rem;
  box-shadow:var(--sh-1);}
.hero-pill .wz-icon{width:16px;height:16px;color:var(--c-primary);}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--c-wa);box-shadow:0 0 0 4px rgba(37,211,102,.18);}

/* ---- Collage stage ------------------------------------------------------ */
.collage{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1/1.04;}
.collage__blob{position:absolute;inset:6% 4% 2% 8%;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;
  background:radial-gradient(120% 120% at 70% 20%,var(--c-primary) 0%,var(--c-primary-700) 70%);
  opacity:.92;filter:saturate(1.05);}
.collage__blob::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(60% 60% at 80% 85%,rgba(37,211,102,.5),transparent 60%);mix-blend-mode:screen;}
.collage__photo{position:absolute;inset:11% 7% 0 11%;border-radius:28px;overflow:hidden;
  box-shadow:0 34px 70px -26px rgba(11,18,32,.5),0 0 0 1px rgba(11,18,32,.06);background:var(--c-surface-2);}
.collage__photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.collage__ring{position:absolute;inset:11% 7% 0 11%;border-radius:28px;box-shadow:inset 0 0 0 1px rgba(11,18,32,.08),inset 0 2px 1px rgba(255,255,255,.4);pointer-events:none;}

/* floating product cards + badges on the stage */
.collage__item{position:absolute;z-index:3;}
.collage__arcs{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;}
.collage__arcs path{fill:none;stroke:rgba(14,124,107,.35);stroke-width:2;stroke-dasharray:4 7;stroke-linecap:round;}
.collage__arcs circle{fill:var(--c-primary);}

/* ---- Product cards (mockups) ------------------------------------------- */
.pcard{background:#fff;border:1px solid var(--c-border);border-radius:16px;box-shadow:var(--sh-float);overflow:hidden;}
.pcard--chat{width:min(60%,300px);}
.pchat__head{background:var(--c-primary-700);color:#fff;padding:.55rem .7rem;display:flex;align-items:center;gap:.5rem;}
.pchat__avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;padding:4px;}
.pchat__avatar img{width:100%;height:100%;object-fit:contain;}
.pchat__name{font-weight:600;font-size:.82rem;line-height:1.05;}
.pchat__status{font-size:.64rem;opacity:.82;display:flex;align-items:center;gap:.25rem;}
.pchat__status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-wa);}
.pchat__body{padding:.6rem;background:#ECE5DD;display:flex;flex-direction:column;gap:.4rem;}
.pbub{max-width:88%;padding:.42rem .6rem;border-radius:12px;font-size:.72rem;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08);}
.pbub--in{background:#fff;align-self:flex-start;border-top-left-radius:3px;color:#222;}
.pbub--out{background:#D9FDD3;align-self:flex-end;border-top-right-radius:3px;color:var(--wa-ink);}

/* stat / proof card */
.statcard{background:#fff;border:1px solid var(--c-border);border-radius:16px;box-shadow:var(--sh-float);
  padding:.8rem .95rem;display:flex;align-items:center;gap:.7rem;}
/* number + label must STACK (wrapper span would otherwise be inline → text collides) */
.statcard > span:last-child{display:flex;flex-direction:column;min-width:0;}
.statcard__ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--c-primary-50);color:var(--c-primary-600);}
.statcard__ic--wa{background:#E4F9EC;color:#0f7a37;}
.statcard__ic--amber{background:#FCF3D5;color:var(--c-accent-600);}
.statcard__ic .wz-icon{width:20px;height:20px;}
.statcard__n{font-family:var(--font-display);font-weight:800;font-size:1.25rem;line-height:1;color:var(--c-ink);letter-spacing:-.02em;}
.statcard__l{font-size:.7rem;color:var(--c-muted);margin-top:2px;}

/* floating pill badge */
.fbadge{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--c-border);
  border-radius:var(--r-pill);padding:.42rem .8rem;box-shadow:var(--sh-card);font-weight:600;font-size:.78rem;color:var(--c-ink);}
.fbadge .wz-icon{width:15px;height:15px;}
.fbadge--ok{color:#0f7a37;}
.fbadge--ok .wz-icon{color:var(--c-wa-600);}

/* WhatsApp node chip */
.wa-node{width:58px;height:58px;border-radius:17px;background:linear-gradient(155deg,#2bd46a,#1aa851);
  display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.6);}
.wa-node .wz-icon{width:30px;height:30px;color:#fff;}

/* ---- Collage placement (desktop) --------------------------------------- */
.collage__item--chat{top:17%;left:-7%;}
.collage__item--stat{bottom:14%;right:-9%;}
.collage__item--badge1{top:7%;right:2%;}
.collage__item--badge2{bottom:4%;left:4%;}
.collage__item--wa{top:-3%;left:34%;}
@media(max-width:1180px){
  .collage__item--chat{left:-2%;width:min(58%,250px);}
  .collage__item--stat{right:-4%;}
}
@media(max-width:920px){
  .collage{max-width:460px;}
  .collage__item--badge1,.collage__item--badge2{display:none;}
}
@media(max-width:520px){
  .collage{max-width:340px;}
  .collage__item--stat{right:-2%;bottom:10%;transform:scale(.9);}
  .collage__item--chat{left:-4%;top:12%;transform:scale(.95);}
}

/* ---- Motion ------------------------------------------------------------- */
@keyframes wzfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes wzfloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
.float-a{animation:wzfloat 6.5s ease-in-out infinite;}
.float-b{animation:wzfloat2 7.5s ease-in-out infinite;}
.float-c{animation:wzfloat 8s ease-in-out infinite .6s;}
@media(prefers-reduced-motion:reduce){.float-a,.float-b,.float-c{animation:none;}}

/* ---- Logo marquee ------------------------------------------------------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex;gap:3.2rem;width:max-content;animation:wzmarq 32s linear infinite;align-items:center;}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes wzmarq{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;justify-content:center;}}

/* =========================================================================
   Product dashboard mockup — the "all-in-one platform" showpiece.
   Pure HTML/CSS recreation (not a screenshot). Mirrors the real app modules.
   ========================================================================= */
.dash{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--c-border);box-shadow:var(--sh-3);
  display:grid;grid-template-columns:200px 1fr;max-width:920px;margin-inline:auto;}
.dash__chrome{grid-column:1/-1;display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;background:var(--c-surface);border-bottom:1px solid var(--c-border);}
.dash__dot{width:11px;height:11px;border-radius:50%;background:#D7DEE7;}
.dash__url{margin-left:.8rem;font-size:.72rem;color:var(--c-muted);background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:.18rem .6rem;}
.dash__side{background:#0B1220;color:#9DB0C7;padding:.9rem .7rem;display:flex;flex-direction:column;gap:.15rem;}
.dash__brand{display:flex;align-items:center;gap:.5rem;padding:.2rem .4rem .8rem;}
.dash__brand img{height:22px;width:auto;filter:brightness(0) invert(1);}
.dash__nav{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:9px;font-size:.8rem;color:#A9B8CC;}
.dash__nav .wz-icon{width:17px;height:17px;}
.dash__nav--on{background:rgba(255,255,255,.08);color:#fff;}
.dash__nav--on .wz-icon{color:var(--c-primary-200);}
.dash__main{padding:1.1rem;background:var(--c-surface);min-width:0;}
.dash__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;}
.dash__h b{font-family:var(--font-display);font-size:1rem;color:var(--c-ink);}
.dash__pill{font-size:.68rem;font-weight:600;color:var(--c-primary-700);background:var(--c-primary-50);border:1px solid var(--c-primary-100);border-radius:var(--r-pill);padding:.2rem .6rem;}
.dash__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.9rem;}
.kpi{background:#fff;border:1px solid var(--c-border);border-radius:12px;padding:.6rem .7rem;}
.kpi__l{font-size:.64rem;color:var(--c-muted);display:flex;align-items:center;gap:.3rem;}
.kpi__l .wz-icon{width:13px;height:13px;color:var(--c-primary);}
.kpi__n{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--c-ink);letter-spacing:-.02em;margin-top:.2rem;}
.kpi__d{font-size:.6rem;font-weight:600;color:var(--c-success);}
.dash__row{display:grid;grid-template-columns:1.4fr 1fr;gap:.7rem;}
.dash__panel{background:#fff;border:1px solid var(--c-border);border-radius:12px;padding:.75rem;}
.dash__panel b{font-size:.78rem;color:var(--c-ink);display:block;margin-bottom:.55rem;}
.chart{display:flex;align-items:flex-end;gap:.35rem;height:92px;}
.chart span{flex:1;background:linear-gradient(180deg,var(--c-primary),var(--c-primary-600));border-radius:4px 4px 0 0;opacity:.9;}
.chart span:nth-child(odd){background:linear-gradient(180deg,var(--c-primary-200),var(--c-primary-100));}
.conv{display:flex;align-items:center;gap:.5rem;padding:.32rem 0;border-top:1px solid var(--c-surface-2);}
.conv:first-of-type{border-top:0;}
.conv__a{width:26px;height:26px;border-radius:50%;background:var(--c-primary-100);color:var(--c-primary-700);display:grid;place-items:center;font-size:.62rem;font-weight:700;flex:none;}
.conv__t{min-width:0;flex:1;display:flex;flex-direction:column;}
.conv__n{font-size:.72rem;font-weight:600;color:var(--c-ink);line-height:1.1;}
.conv__m{font-size:.64rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.conv__b{font-size:.56rem;font-weight:700;color:#0f7a37;background:#E4F9EC;border-radius:var(--r-pill);padding:.1rem .4rem;flex:none;}
@media(max-width:720px){
  .dash{grid-template-columns:1fr;}
  .dash__side{flex-direction:row;flex-wrap:wrap;gap:.3rem;padding:.6rem;}
  .dash__brand{width:100%;padding-bottom:.3rem;}
  .dash__kpis{grid-template-columns:repeat(2,1fr);}
  .dash__row{grid-template-columns:1fr;}
}

/* =========================================================================
   BRAND MOTIFS — vector shapes drawn from the logo (chat-bubble squircle,
   dot grid, morphing blob, rings). A subtle decorative layer for branding.
   ========================================================================= */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.deco>*{position:absolute;}
.deco-dots{background-image:radial-gradient(var(--c-primary-200) 1.3px,transparent 1.3px);background-size:22px 22px;opacity:.4;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 78%);}
.deco-blob{border-radius:42% 58% 54% 46%/48% 52% 48% 52%;background:radial-gradient(120% 120% at 70% 20%,var(--c-primary),var(--c-primary-700));opacity:.08;}
.deco-ring{border:2px dashed var(--c-primary-200);border-radius:50%;opacity:.45;}
.section--dark .deco-dots{background-image:radial-gradient(rgba(255,255,255,.14) 1.3px,transparent 1.3px);}
.section--dark .deco-ring{border-color:rgba(255,255,255,.14);}
/* chat-bubble (squircle with a tail corner) — the core brand shape */
.wz-bubble{display:grid;place-items:center;background:#fff;border:1px solid var(--c-border);
  border-radius:18px 18px 18px 5px;box-shadow:var(--sh-card);color:var(--c-primary);}
.wz-bubble .wz-icon{width:20px;height:20px;}
.wz-bubble--wa{color:var(--c-wa-600);}
.wz-bubble--amber{color:var(--c-accent-600);}
.wz-bubble--solid{background:linear-gradient(155deg,var(--c-primary),var(--c-primary-700));color:#fff;border-color:transparent;}

/* =========================================================================
   BRANDED ILLUSTRATION — a content-telling hero visual for info pages:
   a morphing logo-bubble with the page's icon + floating chat bubbles + dots.
   ========================================================================= */
.hero-illus{position:relative;width:100%;max-width:440px;margin-inline:auto;aspect-ratio:1/0.92;display:grid;place-items:center;}
.hero-illus__dots{position:absolute;inset:10%;background-image:radial-gradient(var(--c-primary-200) 1.3px,transparent 1.3px);background-size:24px 24px;opacity:.5;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 75%);}
.hero-illus__blob{position:absolute;width:72%;aspect-ratio:1;border-radius:34% 66% 57% 43%/42% 38% 62% 58%;
  background:linear-gradient(155deg,var(--c-primary) 10%,var(--c-primary-700));box-shadow:var(--sh-primary);animation:wzmorph 16s ease-in-out infinite;}
.hero-illus__blob::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(55% 55% at 78% 82%,rgba(37,211,102,.45),transparent 60%);mix-blend-mode:screen;}
.hero-illus__mark{position:relative;z-index:2;color:#fff;display:grid;place-items:center;}
.hero-illus__mark .wz-icon{width:88px;height:88px;}
.hero-illus .wz-bubble{position:absolute;z-index:3;width:52px;height:52px;}
.hero-illus .fbadge,.hero-illus .statcard{position:absolute;z-index:4;}
.hero-illus__b1{top:6%;left:2%;} .hero-illus__b2{bottom:10%;right:0;} .hero-illus__b3{top:16%;right:8%;}
@keyframes wzmorph{0%,100%{border-radius:34% 66% 57% 43%/42% 38% 62% 58%}50%{border-radius:60% 40% 38% 62%/52% 60% 40% 48%}}
@media(prefers-reduced-motion:reduce){.hero-illus__blob{animation:none;}}
@media(max-width:520px){.hero-illus{max-width:320px;} .hero-illus__mark .wz-icon{width:64px;height:64px;}}

/* ---- Inner-page hero: split layout (text + visual) --------------------- */
.phero{position:relative;}
.phero .deco{z-index:0;} .phero__in{position:relative;z-index:1;}
.phero--split .phero__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,460px);gap:clamp(2rem,5vw,4rem);align-items:center;}
.phero--split .phero h1,.phero--split h1{max-width:18ch;}
@media(max-width:900px){.phero--split .phero__in{grid-template-columns:1fr;} .phero__visual{order:-1;max-width:420px;}}
.phero__visual{position:relative;}

/* ---- Section eyebrow (bolder than the old kicker) ---------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-primary-700);}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--c-primary);}
.section--dark .eyebrow{color:var(--c-primary-200);}

/* ---- Section heading (bigger, confident) ------------------------------- */
.sec-head{max-width:720px;}
.sec-head--center{margin-inline:auto;text-align:center;}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.9rem);
  letter-spacing:-.025em;line-height:1.08;margin:.6rem 0 0;}
.sec-head p{color:var(--c-body);font-size:1.075rem;margin:.8rem 0 0;line-height:1.6;}
.section--dark .sec-head p{color:var(--c-on-dark-muted);}

/* =========================================================================
   FEATURE SPLIT — alternating text + product-mockup collage (AiSensy-style)
   Markup:
   <div class="feat [feat--rev]">
     <div class="feat__text"> eyebrow / h2 / p / .feat-points / CTA </div>
     <div class="feat__media"> .stage with .phone/.dash/.pcard/.statcard/.fbadge </div>
   </div>
   ========================================================================= */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.feat + .feat{margin-top:clamp(3rem,7vw,6rem);}
.feat__text h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,2.8vw,2.5rem);letter-spacing:-.02em;line-height:1.1;margin:.7rem 0 0;}
.feat__text>p{color:var(--c-body);font-size:1.06rem;line-height:1.6;margin:.8rem 0 1.3rem;}
.feat-points{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.05rem;}
.feat-points li{display:flex;gap:.85rem;align-items:flex-start;}
.feat-points .ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--c-primary-50);color:var(--c-primary-600);border:1px solid var(--c-primary-100);}
.feat-points .ic .wz-icon{width:20px;height:20px;}
.feat-points b{display:block;font-size:1rem;color:var(--c-ink);line-height:1.25;}
.feat-points span{font-size:.92rem;color:var(--c-muted);line-height:1.5;}
.feat--rev .feat__text{order:2;}
.section--dark .feat__text h2{color:#fff;} .section--dark .feat__text>p{color:var(--c-on-dark-muted);}
.section--dark .feat-points b{color:#fff;} .section--dark .feat-points span{color:var(--c-on-dark-muted);}
.section--dark .feat-points .ic{background:rgba(18,169,155,.14);color:var(--c-primary-200);border-color:var(--c-dark-border);}
@media(max-width:860px){.feat{grid-template-columns:1fr;gap:2rem;} .feat--rev .feat__text{order:0;}}

/* media stage for feature collages */
.stage{position:relative;width:100%;min-height:340px;display:flex;align-items:center;justify-content:center;padding:1.2rem;}
.stage__bg{position:absolute;inset:8% 6%;border-radius:32px;
  background:radial-gradient(120% 120% at 70% 20%,var(--c-primary-50),rgba(37,211,102,.10));z-index:0;}
.stage>*{position:relative;z-index:1;}
.stage .float-x{position:absolute;z-index:2;}

/* ---- Phone mockup (WhatsApp chat) -------------------------------------- */
.phone{width:286px;max-width:86%;background:#0B1220;border-radius:34px;padding:9px;box-shadow:var(--sh-3);}
.phone__scr{background:#ECE5DD;border-radius:26px;overflow:hidden;}
.phone__top{background:var(--c-primary-700);color:#fff;padding:.7rem .8rem;display:flex;align-items:center;gap:.55rem;}
.phone__top .av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;padding:4px;}
.phone__top .av img{width:100%;height:100%;object-fit:contain;}
.phone__top .nm{font-weight:600;font-size:.86rem;line-height:1.05;}
.phone__top .st{font-size:.66rem;opacity:.82;}
.phone__body{padding:.75rem;display:flex;flex-direction:column;gap:.45rem;min-height:230px;
  background-image:linear-gradient(rgba(236,229,221,.5),rgba(236,229,221,.5));}
.phone__body .pbub{max-width:86%;}
.phone__input{display:flex;align-items:center;gap:.5rem;background:#fff;padding:.5rem .7rem;color:var(--c-muted);font-size:.78rem;}
.phone__input .snd{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--c-wa);color:#fff;display:grid;place-items:center;}
.phone__input .snd .wz-icon{width:15px;height:15px;}

/* =========================================================================
   STAT BAND — big proof numbers
   ========================================================================= */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.statband .sb{text-align:center;}
.statband .sb__n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,4vw,3.2rem);
  line-height:1;letter-spacing:-.02em;color:var(--c-ink);}
.statband .sb__n .u{color:var(--c-primary);}
.statband .sb__l{margin-top:.5rem;color:var(--c-muted);font-size:.95rem;}
.statband .sb__s{display:block;margin-top:.15rem;font-size:.74rem;color:var(--c-muted);opacity:.8;}
.section--dark .statband .sb__n{color:#fff;} .section--dark .statband .sb__n .u{color:var(--c-primary-200);}
.section--dark .statband .sb__l{color:var(--c-on-dark);} .section--dark .statband .sb__s{color:var(--c-on-dark-muted);}
@media(max-width:720px){.statband{grid-template-columns:repeat(2,1fr);gap:1.8rem 1rem;}}

/* =========================================================================
   TESTIMONIAL CARD with photo
   ========================================================================= */
.tcard{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:1.1rem;height:100%;}
.tcard__q{font-size:1.02rem;line-height:1.6;color:var(--c-ink);margin:0;}
.tcard__q::before{content:"\201C";}.tcard__q::after{content:"\201D";}
.tcard__by{display:flex;align-items:center;gap:.8rem;margin-top:auto;}
.tcard__ph{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--c-surface-2);}
.tcard__nm{font-weight:700;color:var(--c-ink);line-height:1.2;font-size:.95rem;}
.tcard__ro{font-size:.82rem;color:var(--c-muted);}
.tcard__stars{color:var(--c-accent);letter-spacing:2px;font-size:.9rem;}

/* =========================================================================
   INNER PAGE HERO (restyled) + CTA band (conversion)
   ========================================================================= */
.phero{position:relative;overflow:hidden;background:
  radial-gradient(60% 60% at 90% 0%,var(--c-primary-50),transparent 60%),linear-gradient(180deg,#fff,var(--c-surface));
  border-bottom:1px solid var(--c-border);}
.phero__in{padding-block:clamp(2.2rem,5vw,3.8rem) clamp(2.4rem,5vw,4rem);}
.phero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.025em;line-height:1.06;margin:.7rem 0 0;max-width:16ch;}
.phero p{font-size:1.1rem;color:var(--c-body);line-height:1.6;margin:.9rem 0 0;max-width:60ch;}
.phero .hero-cta{margin-top:1.5rem;}
.phero--dark{background:linear-gradient(160deg,var(--c-dark),var(--c-dark-2));border-bottom:0;color:#fff;}
.phero--dark h1{color:#fff;} .phero--dark p{color:var(--c-on-dark-muted);}
.phero--dark .eyebrow{color:var(--c-primary-200);}
.phero--dark .hero-trust span{color:var(--c-on-dark-muted);}
.phero--dark .breadcrumb,.phero--dark .breadcrumb a{color:var(--c-on-dark-muted);}

.cta-x{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(145deg,var(--c-primary-700),var(--c-primary) 60%,#13a890);
  color:#fff;text-align:center;padding:clamp(2.5rem,6vw,4.5rem);box-shadow:var(--sh-primary);}
.cta-x::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:22px 22px;opacity:.5;-webkit-mask-image:radial-gradient(70% 70% at 50% 0%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 0%,#000,transparent);}
.cta-x>*{position:relative;z-index:1;}
.cta-x h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.02em;margin:0;color:#fff;}
.cta-x p{color:rgba(255,255,255,.88);font-size:1.1rem;margin:.9rem auto 0;max-width:56ch;}
.cta-x .hero-cta{justify-content:center;margin-top:1.6rem;}
.cta-x .btn-wz--primary{background:#fff;color:var(--c-primary-700);}
.cta-x .btn-wz--primary:hover{background:#fff;color:var(--c-primary-700);box-shadow:0 18px 40px -12px rgba(0,0,0,.4);}

/* ---- Benefit chips marquee row ----------------------------------------- */
.benefit-chip{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;font-weight:600;color:var(--c-primary-700);font-size:.95rem;}
.benefit-chip .wz-icon{width:17px;height:17px;color:var(--c-wa-600);}

/* =========================================================================
   Team Inbox mockup (2-pane) — product showcase
   ========================================================================= */
.inbox{display:grid;grid-template-columns:180px 1fr;background:#fff;border:1px solid var(--c-border);
  border-radius:16px;overflow:hidden;box-shadow:var(--sh-float);max-width:460px;}
.inbox__list{border-right:1px solid var(--c-border);background:var(--c-surface);padding:.5rem;}
.inbox__search{font-size:.68rem;color:var(--c-muted);background:#fff;border:1px solid var(--c-border);border-radius:8px;padding:.3rem .5rem;margin-bottom:.4rem;}
.inrow{display:flex;gap:.5rem;align-items:center;padding:.4rem .4rem;border-radius:9px;}
.inrow--on{background:var(--c-primary-50);}
.inrow__av{width:28px;height:28px;border-radius:50%;background:var(--c-primary-100);color:var(--c-primary-700);display:grid;place-items:center;font-size:.6rem;font-weight:700;flex:none;}
.inrow__t{min-width:0;flex:1;display:flex;flex-direction:column;}
.inrow__n{font-size:.7rem;font-weight:600;color:var(--c-ink);line-height:1.1;}
.inrow__m{font-size:.62rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inrow__u{width:16px;height:16px;border-radius:50%;background:var(--c-wa);color:#fff;font-size:.55rem;font-weight:700;display:grid;place-items:center;flex:none;}
.inbox__chat{background:#ECE5DD;padding:.6rem;display:flex;flex-direction:column;gap:.4rem;min-height:210px;}
.inbox__cHead{background:#fff;margin:-.6rem -.6rem .2rem;padding:.45rem .6rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--c-border);}
.inbox__cHead .nm{font-size:.74rem;font-weight:600;color:var(--c-ink);}
.inbox__cHead .tag{margin-left:auto;font-size:.56rem;font-weight:700;color:var(--c-primary-700);background:var(--c-primary-50);border-radius:var(--r-pill);padding:.1rem .45rem;}
@media(max-width:420px){.inbox{grid-template-columns:120px 1fr;}}

/* =========================================================================
   Campaign / broadcast mockup — product showcase
   ========================================================================= */
.camp{background:#fff;border:1px solid var(--c-border);border-radius:16px;box-shadow:var(--sh-float);
  padding:1rem;max-width:380px;}
.camp__h{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem;}
.camp__h .ic{width:34px;height:34px;border-radius:10px;background:var(--c-primary-50);color:var(--c-primary-600);display:grid;place-items:center;}
.camp__h .ic .wz-icon{width:18px;height:18px;}
.camp__h b{font-size:.86rem;color:var(--c-ink);}
.camp__h .st{margin-left:auto;font-size:.6rem;font-weight:700;color:#0f7a37;background:#E4F9EC;border-radius:var(--r-pill);padding:.12rem .5rem;}
.camp__sub{font-size:.68rem;color:var(--c-muted);margin:0 0 .7rem;}
.cbar{margin-bottom:.55rem;}
.cbar__t{display:flex;justify-content:space-between;font-size:.66rem;color:var(--c-body);margin-bottom:.2rem;}
.cbar__t b{color:var(--c-ink);}
.cbar__track{height:7px;border-radius:7px;background:var(--c-surface-2);overflow:hidden;}
.cbar__fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--c-primary),var(--c-primary-600));}
.cbar__fill--wa{background:linear-gradient(90deg,#2bd46a,#1aa851);}
.cbar__fill--amber{background:linear-gradient(90deg,#F2B705,#D49E04);}

/* =========================================================================
   CRAFT POLISH — depth, warmth, device realism, considered spacing.
   Shared refinements that lift every page toward a hand-crafted feel.
   ========================================================================= */
:root{ --sh-float:0 26px 60px -22px rgba(11,18,32,.30),0 8px 20px -10px rgba(11,18,32,.14); }

/* Hand-arranged collage: slight tilt + depth on the floating pieces */
.collage__item--chat{transform:rotate(-2.5deg);} .collage__item--chat:hover{transform:rotate(0);transition:transform var(--t-lg);}
.collage__item--stat{transform:rotate(2deg);}
.pcard,.statcard,.camp,.inbox,.dash{transition:transform var(--t-lg),box-shadow var(--t-lg);}
.collage .pcard:hover{transform:translateY(-4px) rotate(0);}

/* Feature mockups float a touch for life; subtle hover lift */
.feat__media .phone,.feat__media .inbox,.feat__media .camp{box-shadow:var(--sh-float);}
.feat:hover .feat__media .phone,.feat:hover .feat__media .inbox,.feat:hover .feat__media .camp{transform:translateY(-4px);}

/* Warmth: real-looking multi-colour avatar chips in the product mockups */
.dash__panel .conv:nth-of-type(1) .conv__a{background:#D1FAE5;color:#047857;}
.dash__panel .conv:nth-of-type(2) .conv__a{background:#DBEAFE;color:#1D4ED8;}
.dash__panel .conv:nth-of-type(3) .conv__a{background:#FCE7F3;color:#BE185D;}
.dash__panel .conv:nth-of-type(4) .conv__a{background:#FEF3C7;color:#B45309;}
.inbox__list .inrow:nth-of-type(2) .inrow__av{background:#DBEAFE;color:#1D4ED8;}
.inbox__list .inrow:nth-of-type(3) .inrow__av{background:#FCE7F3;color:#BE185D;}
.inbox__list .inrow:nth-of-type(4) .inrow__av{background:#FEF3C7;color:#B45309;}
.inbox__list .inrow:nth-of-type(5) .inrow__av{background:#EDE9FE;color:#6D28D9;}

/* Device realism: a notch on the phone mockups */
.phone{position:relative;padding-top:11px;}
.phone::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34%;height:15px;background:#0B1220;border-radius:0 0 12px 12px;z-index:3;}
.phone__scr{position:relative;}

/* Stage backdrop gets the dot-motif texture for a "designed" feel */
.stage__bg{overflow:hidden;}
.stage__bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--c-primary-200) 1.2px,transparent 1.2px);background-size:20px 20px;opacity:.5;
  -webkit-mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 30% 30%,#000,transparent 75%);}

/* A touch more air between feature splits and section rhythm */
.feat + .feat{margin-top:clamp(4rem,8vw,7rem);}

/* Section heads breathe a little more */
.sec-head{margin-bottom:.2rem;}

/* =========================================================================
   HERO CREATIVE VARIANTS — different compositions per page type (variety).
   ========================================================================= */
.herov{position:relative;width:100%;max-width:480px;margin-inline:auto;}

/* PANEL — product dashboard on a brand gradient + floating cards */
.herov-panel{aspect-ratio:1/0.94;border-radius:30px;background:linear-gradient(155deg,var(--c-primary),var(--c-primary-700));box-shadow:var(--sh-primary);display:grid;place-items:center;}
.herov-panel__grid{position:absolute;inset:0;border-radius:30px;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:20px 20px;opacity:.6;-webkit-mask-image:radial-gradient(70% 70% at 50% 25%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 25%,#000,transparent);}
.herov-panel__wa{position:absolute;top:-18px;left:28px;width:54px;height:54px;z-index:4;}
.dashcard{position:relative;z-index:2;width:74%;background:#fff;border-radius:16px;box-shadow:var(--sh-3);padding:.85rem;}
.dashcard__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
.dashcard__t{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.8rem;color:var(--c-ink);}
.dashcard__t .wz-icon{width:15px;height:15px;color:var(--c-primary);}
.dashcard__live{font-size:.58rem;font-weight:700;color:#0f7a37;background:#E4F9EC;border-radius:var(--r-pill);padding:.12rem .45rem;}
.dashcard__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:.6rem;}
.dkpi{background:var(--c-surface);border:1px solid var(--c-border);border-radius:9px;padding:.4rem .45rem;}
.dkpi__l{font-size:.54rem;color:var(--c-muted);display:block;line-height:1.2;}
.dkpi__n{font-family:var(--font-display);font-weight:800;font-size:.9rem;color:var(--c-ink);}
.dashcard__chart{display:flex;align-items:flex-end;gap:.25rem;height:50px;}
.dashcard__chart span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--c-primary),var(--c-primary-600));}
.dashcard__chart span:nth-child(odd){background:linear-gradient(180deg,var(--c-primary-200),var(--c-primary-100));}
.herov-panel__c1{position:absolute;top:7%;right:-6%;width:min(56%,210px);z-index:3;}
.herov-panel__c1 .pcard--chat{width:100%;}
.herov-panel__c2{position:absolute;bottom:7%;left:-5%;z-index:3;}

/* PHONE — phone + quick-reply chips + sparkles */
.herov-phone{aspect-ratio:1/0.98;display:grid;place-items:center;}
.herov-phone .phone{position:relative;z-index:2;}
.herov-phone__wa{position:absolute;top:1%;left:14%;width:50px;height:50px;z-index:4;}
.herov-chips{position:absolute;right:-1%;top:28%;display:flex;flex-direction:column;gap:.5rem;z-index:3;}
.herov-chip{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-pill);padding:.4rem .8rem;font-size:.75rem;font-weight:600;color:var(--c-primary-700);box-shadow:var(--sh-card);white-space:nowrap;}
.herov-chip:nth-child(2){margin-right:1.4rem;} .herov-chip:nth-child(3){margin-right:.5rem;}
.herov-spark{position:absolute;z-index:1;opacity:.55;}
.herov-spark .wz-icon{width:26px;height:26px;}
.herov-spark--1{top:7%;left:7%;color:var(--c-primary);} .herov-spark--2{bottom:15%;right:32%;color:var(--c-wa);}
.herov-phone__badge{position:absolute;bottom:9%;left:-2%;z-index:3;}

/* BROADCAST — person + offer card + audience avatars + reach badge */
.herov-bcast{aspect-ratio:1/1.02;}
.herov-bcast__photo{position:absolute;inset:8% 14% 0 22%;border-radius:26px;overflow:hidden;box-shadow:0 34px 70px -26px rgba(11,18,32,.5),0 0 0 1px rgba(11,18,32,.06);background:var(--c-surface-2);}
.herov-bcast__photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.herov-bcast__ring{inset:8% 14% 0 22%;}
.herov-bcast__wa{position:absolute;top:-2%;left:42%;width:52px;height:52px;z-index:4;}
.herov-bcast__offer{position:absolute;top:16%;left:-6%;z-index:4;}
.herov-bcast__av{position:absolute;width:50px;height:50px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:var(--sh-card);z-index:4;}
.herov-bcast__av img{width:100%;height:100%;object-fit:cover;}
.herov-bcast__av--1{top:10%;right:0;} .herov-bcast__av--2{top:40%;right:-5%;} .herov-bcast__av--3{top:68%;right:4%;}
.herov-bcast__reach{position:absolute;bottom:10%;left:6%;z-index:5;}
@media(max-width:900px){.herov,.herov-panel,.herov-phone,.herov-bcast{max-width:420px;}}

/* Enriched panel dashcard (realistic app chrome + tagged contact rows) */
.dashcard__chrome{display:flex;align-items:center;gap:.4rem;margin-bottom:.55rem;padding-bottom:.45rem;border-bottom:1px solid var(--c-surface-2);}
.dashcard__brand{display:flex;align-items:center;gap:.3rem;font-weight:800;font-size:.7rem;color:var(--c-ink);font-family:var(--font-display);}
.dashcard__brand img{width:14px;height:14px;}
.dashcard__qr{margin-left:auto;display:flex;align-items:center;gap:2px;font-size:.5rem;color:var(--c-muted);}
.dashcard__qr b{width:3px;height:8px;border-radius:1px;background:var(--c-wa);display:inline-block;}
.dashcard__waba{font-size:.5rem;font-weight:700;color:#0f7a37;background:#E4F9EC;border-radius:var(--r-pill);padding:.1rem .4rem;}
.dkpi__d{font-size:.48rem;font-weight:700;color:var(--c-success);display:block;}
.dashcard__row{display:flex;align-items:center;gap:.4rem;padding-top:.4rem;margin-top:.4rem;border-top:1px solid var(--c-surface-2);}
.dashcard__av{width:19px;height:19px;border-radius:50%;background:#D1FAE5;color:#047857;font-size:.5rem;font-weight:700;display:grid;place-items:center;flex:none;}
.dashcard__nm{font-size:.62rem;font-weight:600;color:var(--c-ink);flex:1;}
.dashcard__tag{font-size:.48rem;font-weight:700;border-radius:var(--r-pill);padding:.1rem .4rem;white-space:nowrap;}
.dashcard__tag--lead{color:#B45309;background:#FEF3C7;}
.dashcard__tag--sales{color:#1D4ED8;background:#DBEAFE;}

/* Donut ring for campaign/analytics mockups */
.camp__top{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;padding-bottom:.65rem;border-bottom:1px solid var(--c-surface-2);}
.donut{--p:75;position:relative;width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--c-primary) calc(var(--p)*1%),var(--c-surface-2) 0);}
.donut::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;}
.donut span{position:relative;z-index:1;font-weight:800;font-size:.72rem;color:var(--c-primary-700);font-family:var(--font-display);}
.camp__topx b{font-size:.8rem;color:var(--c-ink);display:block;line-height:1.1;}
.camp__topx span{font-size:.66rem;color:var(--c-muted);}