/* =========================================================================
   AI Growth Kits — marketing site
   Design system: "Clean commerce SaaS" with a modular "kit" signature.
   Display: Space Grotesk · Body: Inter · Growth-emerald accent on ink navy.
   ========================================================================= */

:root {
  /* Neutrals */
  --ink:        #0E1726;
  --ink-2:      #17233A;
  --text:       #14202E;
  --muted:      #58697B;
  --line:       #E5EAF0;
  --line-soft:  #EEF2F6;
  --bg:         #FFFFFF;
  --bg-tint:    #F4F8F6;
  --bg-cool:    #F6F8FB;

  /* Primary — growth emerald */
  --primary:      #0FA968;
  --primary-600:  #0B8C56;
  --primary-050:  #E7F6EE;

  /* Kit category colors */
  --k-upsell:   #0FA968;
  --k-bundle:   #6D5EF6;
  --k-review:   #F5A623;
  --k-form:     #2D8CFF;
  --k-seo:      #F0568C;
  --k-analytics:#12B5B0;

  --radius:     16px;
  --radius-sm:  10px;
  --shadow-sm:  0 1px 2px rgba(14,23,38,.06), 0 1px 3px rgba(14,23,38,.04);
  --shadow-md:  0 8px 24px rgba(14,23,38,.08);
  --shadow-lg:  0 24px 60px rgba(14,23,38,.14);
  --container:  1160px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset-ish ---------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }

/* ---- Layout helpers ----------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--tint { background: var(--bg-tint); }
.section--cool { background: var(--bg-cool); }
.section--ink  { background: var(--ink); color: #C9D4E0; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.center { text-align: center; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 24px; }
.stack-sm > * + * { margin-top: 10px; }

/* ---- Eyebrow / labels --------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-600);
  background: var(--primary-050);
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.section--ink .eyebrow { color: #7CE7B2; background: rgba(15,169,104,.16); }
.lead { font-size: 1.18rem; color: var(--muted); }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-bottom: 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem;
  line-height: 1; padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
  white-space: nowrap; will-change: transform;
  color: #fff; /* every button uses white text */
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(15,169,104,.28); }
.btn--primary:hover { background: var(--primary-600); box-shadow: 0 10px 22px rgba(15,169,104,.34); }
/* Ghost/outline: dark fill so the white text stays readable (was dark text on white) */
.btn--ghost { background: var(--ink); color: #fff; border-color: transparent; }
.btn--ghost:hover { background: var(--ink-2); border-color: transparent; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); }
.btn--light { background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.24); }
.btn--light:hover { background: rgba(255,255,255,.18); }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; line-height: 1; }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ---- Nav ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--ink); font-size: 1.12rem; letter-spacing: -.02em; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--k-upsell), var(--primary-600));
  box-shadow: 0 2px 8px rgba(15,169,104,.32);
}
.brand__ico { width: 19px; height: 19px; color: #fff; }
.brand__accent { color: var(--primary); }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav__links a { font-size: .96rem; color: #33475B; font-weight: 500; transition: color .15s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: .2s; }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 84px 0 72px; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(15,169,104,.10), transparent 60%),
    radial-gradient(50% 50% at 100% 10%, rgba(109,94,246,.08), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 span { color: var(--primary); }
.hero .lead { max-width: 520px; margin-bottom: 28px; }
.hero__meta { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .92rem; }
.hero__meta strong { color: var(--ink); }
.stars { color: var(--k-review); letter-spacing: 2px; }

/* Hero product mock */
.mock {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 18px; position: relative;
}
.mock__bar { display: flex; gap: 6px; margin-bottom: 14px; }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: #E1E7EE; }
.mock__title { font-family: "Space Grotesk"; font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: 12px; display:flex; justify-content:space-between; align-items:center;}
.mock__title small { color: var(--muted); font-weight:500; font-family:"Inter"; }
.up-card {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 10px; background:#fff;
}
.up-card__img { width: 46px; height: 46px; border-radius: 8px; flex-shrink:0;
  background: linear-gradient(135deg,#EAF0F6,#DCE6F0); }
.up-card:nth-child(2) .up-card__img{ background:linear-gradient(135deg,#E7F6EE,#CFead9);}
.up-card:nth-child(3) .up-card__img{ background:linear-gradient(135deg,#F1ECFF,#E0d6ff);}
.up-card__info { flex: 1; min-width: 0; }
.up-card__info b { font-size: .9rem; color: var(--ink); font-weight:600; display:block; }
.up-card__info span { font-size: .85rem; color: var(--muted); }
.up-card__btn { background: var(--ink); color:#fff; font-size:.8rem; font-weight:600; padding:7px 14px; border-radius:999px; }
.mock__float {
  position: absolute; right: -18px; bottom: -18px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
}
.mock__float .pill { width:34px;height:34px;border-radius:10px;background:var(--primary-050);display:grid;place-items:center;color:var(--primary-600);font-weight:700;}
.mock__float b { font-family:"Space Grotesk"; color: var(--ink); font-size:1.05rem; display:block; line-height:1.1;}
.mock__float small { color: var(--muted); font-size:.78rem;}

/* ---- Trust bar ---------------------------------------------------------- */
.trust { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.trust__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 0; }
.trust__label { font-size:.82rem; text-transform: uppercase; letter-spacing:.1em; color: var(--muted); font-weight:600; }
.trust__stats { display:flex; gap: 40px; flex-wrap: wrap; }
.trust__stat b { font-family:"Space Grotesk"; font-size:1.5rem; color: var(--ink); display:block; }
.trust__stat span { font-size:.85rem; color: var(--muted); }

/* ---- Kit cards ---------------------------------------------------------- */
.kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kit {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  overflow: hidden;
}
.kit::before { content:""; position:absolute; left:0; top:0; height:4px; width:100%; background: var(--kc, var(--primary)); opacity:.9;}
.kit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.kit__icon { width: 46px; height: 46px; border-radius: 12px; display:grid; place-items:center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--kc) 14%, #fff); color: var(--kc); }
.kit__icon svg { width: 24px; height: 24px; }
.kit h3 { margin-bottom: 8px; }
.kit p { color: var(--muted); font-size: .98rem; margin-bottom: 14px; }
.kit__tags { display:flex; flex-wrap:wrap; gap:7px; }
.tag { font-size:.78rem; color:#42566A; background: var(--bg-cool); border:1px solid var(--line-soft); padding:4px 10px; border-radius:999px; }
.kit-u{--kc:var(--k-upsell);} .kit-b{--kc:var(--k-bundle);} .kit-r{--kc:var(--k-review);}
.kit-f{--kc:var(--k-form);} .kit-s{--kc:var(--k-seo);} .kit-a{--kc:var(--k-analytics);}

/* ---- Steps / how it works ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step__n { font-family:"Space Grotesk"; font-weight:700; font-size:.9rem; color: var(--primary-600);
  border:1.5px solid var(--primary-050); background: var(--primary-050); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:16px;}
.step h3 { font-size:1.15rem; margin-bottom:6px; }
.step p { color: var(--muted); font-size:.97rem; margin:0; }

/* ---- Feature detail rows (features page) -------------------------------- */
.feature-block { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; padding: 40px 0; }
.feature-block:nth-child(even) .feature-block__media { order: -1; }
.feature-block__media {
  background: var(--bg-cool); border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px; min-height: 260px; display:flex; flex-direction:column; justify-content:center;
}
.feature-list { list-style:none; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: 12px; color:#33475B; }
.feature-list li::before {
  content:""; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%;
  background: var(--primary-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B8C56' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

/* mini UI chips inside media */
.ui-chip { background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:10px; margin-bottom:10px; box-shadow: var(--shadow-sm);}
.ui-chip .dot { width:30px; height:30px; border-radius:8px; background: var(--kc,var(--primary-050)); flex-shrink:0;}
.ui-chip b { font-size:.9rem; color: var(--ink); display:block;}
.ui-chip span { font-size:.82rem; color:var(--muted);}

/* ===== Animated feature demos (autoplay, screen-recording style) ========== */
.feature-block__media { padding:18px; }
.demo { width:100%; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-md); --acc:var(--primary); }
.demo__bar { display:flex; align-items:center; gap:6px; padding:9px 12px; background:#EEF1F5; border-bottom:1px solid var(--line-soft); }
.demo__bar i { width:9px; height:9px; border-radius:50%; background:#CED6DF; flex-shrink:0; }
.demo__bar i:nth-child(1){ background:#FF6058; } .demo__bar i:nth-child(2){ background:#FEBC2E; } .demo__bar i:nth-child(3){ background:#28C840; }
.demo__url { margin-left:6px; flex:1; font-size:.7rem; color:#7C8996; font-family:ui-monospace,Menlo,monospace; background:#fff; border:1px solid var(--line-soft); border-radius:6px; padding:3px 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo__screen { position:relative; min-height:256px; padding:14px; overflow:hidden; background:linear-gradient(180deg,#fff,#FAFBFC); }
.demo.paused .demo__screen *, .demo.paused .demo__screen { animation-play-state:paused !important; }

/* --- Upsell: Shopify-style cart drawer with live upsell add --- */
.demo--upsell .demo__screen { padding:0; }
.cart { display:flex; flex-direction:column; padding:14px; }
.cart__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.cart__head b { font-family:"Space Grotesk"; font-size:1rem; color:var(--ink); }
.cart__x { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:var(--muted); background:var(--bg-cool); font-size:.72rem; }
.cart__promo { background:#EAF2FF; color:#2456C7; text-align:center; font-size:.68rem; font-weight:600; padding:6px 8px; border-radius:8px; line-height:1.4; margin-bottom:10px; }
.cart__ship { margin-bottom:12px; }
.cart__ship p { margin:0 0 6px; text-align:center; font-size:.7rem; color:#33475B; font-weight:600; }
.cart__ship .track { height:6px; border-radius:999px; background:var(--bg-cool); position:relative; }
.cart__ship .fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--ink); width:62%; transition:width .6s var(--ease); }
.cart__ship .truck { position:absolute; top:50%; left:62%; width:17px; height:17px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%); display:grid; place-items:center; color:#fff; font-size:.6rem; transition:left .6s var(--ease); }
.cart__items { display:flex; flex-direction:column; }
.cart__item { display:flex; gap:9px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line-soft); }
.cart__item.is-hidden { display:none; }
.cart__item.adding { animation:cartAdd .55s var(--ease); }
@keyframes cartAdd { from{opacity:0; transform:translateY(-8px) scale(.98)} to{opacity:1; transform:none} }
.cart__ph { width:40px; height:46px; border-radius:8px; background:var(--c,#e7ebf0); flex-shrink:0; }
.cart__meta { flex:1; min-width:0; }
.cart__meta b { display:block; font-size:.76rem; color:var(--ink); font-weight:600; line-height:1.3; }
.cart__meta .sz { font-size:.66rem; color:var(--muted); margin-top:1px; }
.cart__qty { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; margin-top:6px; overflow:hidden; }
.cart__qty span { padding:2px 7px; color:var(--muted); font-size:.75rem; }
.cart__qty em { padding:2px 9px; font-style:normal; color:var(--ink); font-weight:600; font-size:.72rem; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.cart__price { text-align:right; flex-shrink:0; padding-left:6px; }
.cart__price s { color:#C0392B; font-size:.66rem; display:block; opacity:.85; }
.cart__price b { color:var(--ink); font-weight:700; font-size:.78rem; }
.cart__reco { margin-top:12px; }
.cart__reco-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.cart__reco-h b { font-family:"Space Grotesk"; font-size:.84rem; color:var(--ink); }
.cart__arrows { display:flex; gap:5px; }
.cart__arrows i { width:19px; height:19px; border-radius:50%; background:var(--bg-cool); display:grid; place-items:center; color:var(--muted); font-size:.62rem; font-style:normal; }
.cart__recobox { display:flex; align-items:center; gap:9px; border:1px solid var(--line-soft); border-radius:10px; padding:8px; }
.cart__recobox .cart__ph { width:34px; height:40px; transition:background .3s; }
.cart__recobox .rmeta { flex:1; min-width:0; }
.cart__recobox .rmeta b { font-size:.75rem; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart__recobox .rmeta s { font-size:.66rem; color:#C0392B; } .cart__recobox .rmeta em { font-style:normal; font-size:.74rem; color:var(--ink); font-weight:700; margin-left:5px; }
.cart__addbtn { flex-shrink:0; background:var(--ink); color:#fff; font-weight:600; font-size:.72rem; padding:7px 13px; border-radius:8px; white-space:nowrap; }
.cart__addbtn.press { animation:cartPress .45s var(--ease); }
@keyframes cartPress { 40%{ transform:scale(.88); background:var(--acc); } 100%{ transform:scale(1); } }
.cart__note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:.72rem; color:var(--muted); padding:10px 0 8px; }
.cart__checkout { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; border-radius:9px; font-family:"Space Grotesk"; font-weight:600; font-size:.84rem; padding:11px; }
.cart__pay { display:flex; gap:5px; justify-content:center; margin-top:8px; }
.cart__pay i { width:28px; height:17px; border-radius:3px; background:#fff; border:1px solid var(--line); font-size:.46rem; display:grid; place-items:center; color:#5a6b7b; font-weight:800; font-style:normal; letter-spacing:.02em; }
.cart__cursor { position:absolute; width:18px; height:18px; left:50%; top:60%; pointer-events:none; z-index:6; opacity:0; transition:left .7s var(--ease), top .7s var(--ease), opacity .3s; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cart__cursor svg { width:100%; height:100%; }

/* --- Bundle: "Bundle and Save" tiered discount --- */
.bnd { display:flex; flex-direction:column; gap:11px; }
.bnd__h { font-family:"Space Grotesk"; font-size:1rem; color:var(--ink); font-weight:700; }
.bnd__tierlabels { display:flex; justify-content:space-between; margin-bottom:6px; }
.bnd__tierlabels span { font-size:.64rem; color:var(--muted); line-height:1.2; }
.bnd__tierlabels span b { display:block; font-size:.8rem; color:var(--ink); font-weight:700; }
.bnd__tierlabels span:last-child b { color:var(--acc); }
.bnd__track { height:7px; border-radius:999px; background:var(--bg-cool); overflow:hidden; }
.bnd__track i { display:block; height:100%; width:6%; border-radius:999px; background:linear-gradient(90deg,#0FA968,#F0568C); animation:bndFill 9s infinite; }
@keyframes bndFill { 0%,4%{width:8%} 30%{width:40%} 58%{width:70%} 84%,90%{width:100%} 96%,100%{width:8%} }
.bnd__body { display:grid; grid-template-columns:1.05fr 1fr; gap:10px; }
.bnd__prods { display:grid; grid-template-columns:1fr 1fr; gap:7px; align-content:start; }
.bnd__card { border:1px solid var(--line-soft); border-radius:9px; padding:6px; }
.bnd__card .ph { height:34px; border-radius:6px; background:var(--c,#eee); margin-bottom:4px; }
.bnd__card b { font-size:.64rem; color:var(--ink); display:block; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bnd__card em { font-style:normal; font-size:.64rem; color:var(--muted); }
.bnd__add { display:block; text-align:center; font-size:.62rem; font-weight:700; color:#fff; background:var(--ink); border-radius:5px; padding:3px 0; margin-top:3px; }
.bnd__sum { border:1px solid var(--line); border-radius:11px; padding:9px; display:flex; flex-direction:column; }
.bnd__sum > b { font-family:"Space Grotesk"; font-size:.76rem; color:var(--ink); margin-bottom:4px; }
.bnd__row { display:flex; align-items:center; gap:6px; padding:5px 0; border-top:1px solid var(--line-soft); opacity:0; animation:bndRow 9s infinite; }
.bnd__row:nth-child(2){animation-delay:.4s} .bnd__row:nth-child(3){animation-delay:1.5s} .bnd__row:nth-child(4){animation-delay:2.7s}
@keyframes bndRow { 0%,2%{opacity:0; transform:translateX(8px)} 9%,90%{opacity:1; transform:none} 96%,100%{opacity:0} }
.bnd__row .ph { width:20px; height:22px; border-radius:4px; background:var(--c,#eee); flex-shrink:0; }
.bnd__row small { flex:1; font-size:.62rem; color:#33475B; line-height:1.2; }
.bnd__row .q { font-size:.6rem; color:var(--muted); white-space:nowrap; }
.bnd__subtot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:7px; border-top:1px solid var(--line); }
.bnd__subtot span { font-size:.68rem; color:var(--muted); }
.bnd__subtot b { position:relative; font-family:"Space Grotesk"; font-size:.85rem; color:var(--ink); }
.bnd__co { text-align:center; background:var(--ink); color:#fff; font-size:.66rem; font-weight:600; border-radius:7px; padding:6px; margin-top:6px; }

/* --- Reviews: shoppable video-review carousel --- */
.demo--review .demo__screen { padding:0; background:linear-gradient(120deg,#FF7A3C 0%,#FF5D8F 55%,#F7B733 120%); }
.vrev { position:relative; height:100%; display:flex; align-items:center; padding:16px 34px; }
.vrev__arrow { position:absolute; top:50%; transform:translateY(-50%); width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; color:var(--ink); font-size:.85rem; z-index:3; box-shadow:0 2px 8px rgba(0,0,0,.18); font-style:normal; }
.vrev__arrow.l { left:6px; } .vrev__arrow.r { right:6px; }
.vrev__slider { overflow:hidden; width:100%; }
.vrev__track { display:flex; gap:11px; animation:vrevSlide 12s infinite; }
@keyframes vrevSlide { 0%,22%{transform:translateX(0)} 30%,55%{transform:translateX(-119px)} 63%,90%{transform:translateX(-238px)} 97%,100%{transform:translateX(0)} }
.vrev__card { flex:0 0 108px; aspect-ratio:9/14; border-radius:13px; overflow:hidden; position:relative; box-shadow:0 8px 18px rgba(0,0,0,.22); }
.vrev__card .vid { position:absolute; inset:0; background:linear-gradient(160deg,var(--c1,#6a5acd),var(--c2,#2b2b40)); }
.vrev__card .vid::after { content:""; position:absolute; inset:0; background:radial-gradient(55% 38% at 50% 30%, rgba(255,255,255,.28), transparent 70%); }
.vrev__card .ava { position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.35); }
.vrev__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--ink); font-size:.62rem; padding-left:2px; }
.vrev__cap { position:absolute; left:0; right:0; bottom:0; padding:7px 8px 8px; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent); color:#fff; }
.vrev__cap b { font-size:.66rem; font-weight:600; display:block; }
.vrev__cap .st { font-size:.6rem; color:#FFD24A; letter-spacing:1px; }

/* --- Forms: drag-and-drop field builder --- */
.demo--form .demo__screen { padding:0; }
.fb { display:flex; height:100%; }
.fb__palette { width:36%; flex-shrink:0; border-right:1px solid var(--line-soft); padding:12px 10px; background:var(--bg-cool); }
.fb__palette h5 { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 8px; font-weight:700; }
.fb__chip { display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 8px; margin-bottom:6px; font-size:.7rem; color:#33475B; }
.fb__chip .gr { color:#B3BECB; font-size:.72rem; letter-spacing:-2px; }
.fb__chip.hot { border-color:var(--acc); box-shadow:0 4px 12px rgba(45,140,255,.22); color:var(--ink); }
.fb__canvas { flex:1; padding:12px; position:relative; overflow:hidden; }
.fb__canvas h4 { font-family:"Space Grotesk"; font-size:.8rem; color:var(--ink); margin:0 0 9px; }
.fb__field { border:1px solid var(--line); border-radius:8px; padding:6px 9px; margin-bottom:7px; display:flex; align-items:center; gap:8px; background:#fff; }
.fb__field .gr { color:#B3BECB; font-size:.74rem; letter-spacing:-2px; flex-shrink:0; }
.fb__field .fl { flex:1; min-width:0; }
.fb__field label { font-size:.6rem; color:var(--muted); display:block; }
.fb__field .val { font-size:.72rem; color:#8895A3; }
.fb__field.upload { border-style:dashed; border-color:var(--acc); color:var(--acc); justify-content:center; font-size:.7rem; font-weight:600; padding:9px; transform-origin:left top; animation:fbDrop 8s infinite; }
@keyframes fbDrop {
  0%,5%   { opacity:0; transform:translate(-46px,-26px) rotate(-5deg) scale(.95); box-shadow:0 12px 22px rgba(0,0,0,.16); }
  18%     { opacity:1; transform:translate(-16px,-8px) rotate(-2deg) scale(1); box-shadow:0 12px 22px rgba(0,0,0,.16); }
  30%,92% { opacity:1; transform:translate(0,0) rotate(0) scale(1); box-shadow:none; }
  100%    { opacity:0; transform:translate(-46px,-26px) rotate(-5deg) scale(.95); }
}
.fb__slot { border:1.5px dashed var(--line); border-radius:8px; height:34px; margin-bottom:7px; opacity:0; animation:fbSlot 8s infinite; }
@keyframes fbSlot { 0%,4%{opacity:0} 8%,26%{opacity:1} 30%,100%{opacity:0; height:0; margin:0} }
.fb__cursor { position:absolute; width:17px; height:17px; z-index:5; opacity:0; animation:fbCursor 8s infinite; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.fb__cursor svg { width:100%; height:100%; }
@keyframes fbCursor {
  0%{ opacity:0; left:-30px; top:20px; }
  6%{ opacity:1; left:-24px; top:24px; }
  20%{ opacity:1; left:40px; top:150px; }
  30%{ opacity:1; left:56px; top:158px; }
  40%,92%{ opacity:0; left:56px; top:158px; }
  100%{ opacity:0; }
}

/* --- SEO: health gauge + checklist + AI draft --- */
.se { display:flex; flex-direction:column; gap:12px; height:100%; }
.se__top { display:flex; gap:16px; align-items:center; }
.se__gauge { position:relative; width:82px; height:82px; flex-shrink:0; }
.se__gauge svg { width:100%; height:100%; transform:rotate(-90deg); }
.se__gauge .bg { fill:none; stroke:var(--bg-cool); stroke-width:3.6; }
.se__gauge .fg { fill:none; stroke:var(--acc); stroke-width:3.6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:14; animation:seRing 8s infinite; }
@keyframes seRing { 0%{stroke-dashoffset:100} 22%{stroke-dashoffset:14} 90%{stroke-dashoffset:14} 100%{stroke-dashoffset:100} }
.se__score { position:absolute; inset:0; display:grid; place-items:center; font-family:"Space Grotesk"; font-size:1.35rem; font-weight:700; color:var(--ink); }
.se__chk { display:flex; flex-direction:column; gap:7px; }
.se__chk span { display:flex; align-items:center; gap:8px; font-size:.8rem; color:#33475B; }
.se__chk i { width:17px; height:17px; border-radius:50%; background:var(--bg-cool); position:relative; flex-shrink:0; }
.se__chk i::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:.62rem; font-weight:800; color:#fff; background:var(--acc); border-radius:50%; opacity:0; transform:scale(.4); }
.se__chk span:nth-child(1) i::after { animation:bxCk 8s infinite .8s; } .se__chk span:nth-child(2) i::after { animation:bxCk 8s infinite 1.3s; } .se__chk span:nth-child(3) i::after { animation:bxCk 8s infinite 1.8s; }
.se__ai { margin-top:auto; background:var(--bg-cool); border-radius:10px; padding:10px 12px; }
.se__ai small { font-size:.68rem; font-weight:700; color:var(--acc); text-transform:uppercase; letter-spacing:.05em; }
.se__ai p { margin:4px 0 0; }
.se__type { display:inline-block; white-space:nowrap; overflow:hidden; width:0; font-size:.82rem; color:var(--ink); border-right:2px solid var(--acc); animation:seType 8s infinite; }
@keyframes seType { 0%,44%{width:0} 78%{width:28ch} 94%{width:28ch} 100%{width:0} }

/* --- Analytics: growing bar chart --- */
.an { display:flex; flex-direction:column; gap:12px; height:100%; }
.an__kpis { display:flex; gap:10px; }
.an__kpi { flex:1; border:1px solid var(--line-soft); border-radius:10px; padding:8px 10px; }
.an__kpi small { font-size:.7rem; color:var(--muted); display:block; }
.an__kpi b { font-family:"Space Grotesk"; font-size:1.15rem; color:var(--ink); }
.an__kpi b span { display:inline-block; }
.an__bars { display:flex; align-items:flex-end; gap:8px; height:104px; }
.an__bars i { flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#fff)); height:var(--h,50%); transform:scaleY(.7); transform-origin:bottom; animation:anBar 3s ease-in-out infinite; }
.an__bars i:nth-child(1){animation-delay:0s} .an__bars i:nth-child(2){animation-delay:.12s} .an__bars i:nth-child(3){animation-delay:.24s} .an__bars i:nth-child(4){animation-delay:.36s} .an__bars i:nth-child(5){animation-delay:.48s} .an__bars i:nth-child(6){animation-delay:.6s} .an__bars i:nth-child(7){animation-delay:.72s}
@keyframes anBar { 0%,100%{transform:scaleY(.68)} 50%{transform:scaleY(1)} }
.an__x { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .demo__screen *, .demo__screen { animation:none !important; }
  .vrev__track { transform:none; }
  .se__type { width:auto; }
  .bnd__track i { width:100%; } .bnd__row { opacity:1; transform:none; }
  .fb__field.upload { opacity:1; transform:none; box-shadow:none; } .fb__slot, .fb__cursor { display:none; }
  .se__chk i::after { opacity:1; transform:none; }
  .an__bars i { transform:none; }
  .se__gauge .fg { stroke-dashoffset:14; }
}

/* ---- Stat band ---------------------------------------------------------- */
.statband { display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; text-align:center; }
.statband .num { font-family:"Space Grotesk"; font-size: clamp(2rem,4vw,2.8rem); color:#fff; font-weight:600; }
.statband .num span { color: #7CE7B2; }
.statband .lbl { color:#9FB0C2; font-size:.95rem; }

/* ---- Our apps showcase -------------------------------------------------- */
.apps-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.app-card { display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.app-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#D7DEE7; }
.app-card__top { display:flex; align-items:center; gap:14px; }
.app-card__icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--ac,var(--primary)), color-mix(in srgb, var(--ac,var(--primary)) 55%, #1a1a2e)); }
.app-card__icon svg { width:26px; height:26px; }
.app-card__top h3 { font-size:1.15rem; margin:0; }
.app-card__meta { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); margin-top:3px; }
.app-card__meta .stars { color:var(--k-review); letter-spacing:1px; }
.app-card > p { color:var(--muted); margin:0; font-size:.96rem; }
.app-card__cta { margin-top:auto; font-family:"Space Grotesk"; font-weight:600; color:var(--primary-600); font-size:.95rem; display:inline-flex; align-items:center; gap:6px; }
.app-card__cta em { font-style:normal; transition:transform .2s var(--ease); }
.app-card:hover .app-card__cta em { transform:translateX(4px); }
@media (max-width:760px){ .apps-grid { grid-template-columns:1fr; } }

/* ---- Pricing ------------------------------------------------------------ */
.pricing { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items:stretch; }
.price-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; position:relative; }
.price-card.is-featured { border-color: var(--primary); box-shadow: 0 20px 44px rgba(15,169,104,.16); }
.price-card__badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-size:.76rem; font-weight:700; letter-spacing:.04em; padding:5px 14px; border-radius:999px; font-family:"Space Grotesk";}
.price-card h3 { font-size:1.2rem; margin-bottom:4px; }
.price-card__sub { color:var(--muted); font-size:.92rem; min-height:40px; margin-bottom:14px;}
.price-card__amt { font-family:"Space Grotesk"; font-weight:700; color:var(--ink); font-size:2.6rem; letter-spacing:-.03em; line-height:1;}
.price-card__amt small { font-size:1rem; color:var(--muted); font-weight:500; letter-spacing:0;}
.price-card__amt em { font-style:normal; font-size:.9rem; color:var(--primary-600); display:block; margin-top:6px; font-family:"Inter"; font-weight:600;}
.price-card ul { list-style:none; margin: 22px 0; display:flex; flex-direction:column; gap:11px; flex:1;}
.price-card li { position:relative; padding-left:28px; font-size:.95rem; color:#33475B;}
.price-card li::before { content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%; background:var(--primary-050);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230B8C56' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center;}
.price-card li.off { color:#9AA7B4; }
.price-card li.off::before { background:#EEF2F6; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23A9B4C0' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");}

/* comparison table */
.cmp { width:100%; border-collapse: collapse; font-size:.95rem; }
.cmp th, .cmp td { text-align:center; padding:14px 12px; border-bottom:1px solid var(--line-soft); }
.cmp th:first-child, .cmp td:first-child { text-align:left; color:var(--text); font-weight:500; }
.cmp thead th { font-family:"Space Grotesk"; color:var(--ink); font-size:1rem; }
.cmp thead th span { display:block; font-size:.85rem; color:var(--muted); font-weight:500; font-family:"Inter";}
.cmp .yes { color: var(--primary-600); font-weight:700; }
.cmp .no { color:#B7C0CA; }
.cmp-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }

/* ---- Testimonials / reviews -------------------------------------------- */
.reviews-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.review {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; gap:12px; break-inside: avoid;
}
.review .stars { font-size:1rem; }
.review p { color:#2B3B4B; font-size:1rem; margin:0; }
.review__who { display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-family:"Space Grotesk"; font-size:.95rem;}
.review__who b { display:block; font-size:.92rem; color:var(--ink);}
.review__who span { font-size:.82rem; color:var(--muted);}

/* ---- Case studies ------------------------------------------------------- */
.case {
  display:grid; grid-template-columns: 1fr 1.2fr; gap:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-bottom:26px;
}
.case__side { padding:32px; background: var(--ink); color:#C9D4E0; display:flex; flex-direction:column; justify-content:center;}
.case__side .k { font-family:"Space Grotesk"; color:#7CE7B2; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; margin-bottom:10px;}
.case__side h3 { color:#fff; font-size:1.35rem;}
.case__metrics { display:flex; gap:26px; margin-top:18px; flex-wrap:wrap;}
.case__metrics b { font-family:"Space Grotesk"; color:#fff; font-size:1.8rem; display:block; line-height:1;}
.case__metrics span { color:#9FB0C2; font-size:.82rem;}
.case__body { padding:32px; }
.case__body p { color:#33475B;}

/* ---- FAQ / accordion ---------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q { width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:"Space Grotesk"; font-weight:600; font-size:1.08rem; color:var(--ink);}
.faq__q::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--primary); font-weight:400; transition:transform .2s;}
.faq__item.open .faq__q::after { transform:translateY(-50%) rotate(45deg); }
.faq__a { max-height:0; overflow:hidden; transition:max-height .28s var(--ease); }
.faq__a p { color:var(--muted); padding: 0 0 20px; margin:0; }

/* ---- Resources / blog cards -------------------------------------------- */
.res-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.res-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s; display:flex; flex-direction:column;}
.res-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md);}
.res-card__cover { height:120px; background: linear-gradient(135deg, var(--kc,#0FA968), color-mix(in srgb,var(--kc,#0FA968) 55%, #1a1a2e)); position:relative;}
.res-card__cover span { position:absolute; left:16px; bottom:12px; color:#fff; font-family:"Space Grotesk"; font-weight:600; font-size:.8rem; background:rgba(0,0,0,.2); padding:4px 10px; border-radius:999px; backdrop-filter:blur(4px);}
.res-card__body { padding:20px; flex:1; display:flex; flex-direction:column;}
.res-card__body h3 { font-size:1.08rem; margin-bottom:8px;}
.res-card__body p { color:var(--muted); font-size:.92rem; margin-bottom:14px; flex:1;}
.res-card__link { color:var(--primary-600); font-weight:600; font-size:.92rem; font-family:"Space Grotesk";}

/* ---- Contact / forms ---------------------------------------------------- */
.field { margin-bottom:18px; }
.field label { display:block; font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field input, .field textarea, .field select {
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font: inherit; font-size:.98rem; color:var(--text); background:#fff; transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-050); }
.field textarea { min-height:130px; resize:vertical; }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start; }
.contact-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.channel { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft);}
.channel:last-child{ border-bottom:0;}
.channel__ic { width:42px;height:42px;border-radius:11px;background:var(--primary-050);color:var(--primary-600);display:grid;place-items:center;flex-shrink:0;}
.channel b { color:var(--ink); display:block; font-size:1rem;}
.channel span { color:var(--muted); font-size:.9rem;}

/* ---- CTA band ----------------------------------------------------------- */
.cta-band { background: linear-gradient(120deg, #0E1726, #123A2A); border-radius: 26px; padding: 56px; text-align:center; position:relative; overflow:hidden;}
.cta-band::after{ content:""; position:absolute; inset:0; background: radial-gradient(50% 80% at 80% 0%, rgba(15,169,104,.35), transparent 60%); pointer-events:none; }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#B9C6D4; max-width:520px; margin:0 auto 26px; }

/* ---- Page hero (interior pages) ---------------------------------------- */
.page-hero { padding: 64px 0 40px; text-align:center; }
.page-hero .lead { max-width:640px; margin: 0 auto; }

/* ---- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color:#93A3B5; padding: 64px 0 32px; }
.footer a:not(.btn) { color:#B7C4D2; font-size:.94rem; transition:color .15s;}
.footer a:not(.btn):hover { color:#fff; }
.footer__top { display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer .brand { color:#fff; margin-bottom:14px;}
.footer__col h4 { color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px;}
.footer__col ul { list-style:none; display:flex; flex-direction:column; gap:10px;}
.footer__blurb { max-width:280px; font-size:.94rem; }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:.86rem; flex-wrap:wrap; gap:12px;}

/* ---- Utilities ---------------------------------------------------------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .muted{color:var(--muted);}
.note { font-size:.82rem; color:var(--muted); background:var(--bg-cool); border:1px dashed var(--line); border-radius:10px; padding:10px 14px; display:inline-block;}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .kits, .steps, .reviews-grid, .res-grid, .pricing { grid-template-columns: 1fr 1fr; }
  .statband { grid-template-columns: 1fr 1fr; gap:32px; }
  .feature-block { grid-template-columns: 1fr; gap:28px; padding:28px 0;}
  .feature-block:nth-child(even) .feature-block__media { order: 0; }
  .contact-grid { grid-template-columns:1fr; gap:32px;}
  .case { grid-template-columns:1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap:28px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .nav__links, .nav__actions .btn--ghost { display: none; }
  .nav__toggle { display: block; }
  .nav[data-open="true"] .nav__links {
    display: flex; position: absolute; top: 68px; left:0; right:0; flex-direction: column;
    background:#fff; border-bottom:1px solid var(--line); padding: 16px 24px; gap:16px; box-shadow: var(--shadow-md);
  }
  .kits, .steps, .reviews-grid, .res-grid, .pricing, .footer__top { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; }
  .trust__stats { gap:24px; }
  .case__body, .case__side { padding:24px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* fade-in on scroll */
.reveal { opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* =========================================================================
   v2 — "wollo" aesthetic: soft canvas, data-viz, liquid-glass mega header,
   fluid interactions, blog + affiliation. Loaded on top of the base above.
   ========================================================================= */

:root {
  --canvas: #E8EAEE;          /* soft grey desk */
  --tile-pink:   #FF7EC3;
  --tile-yellow: #FFD24A;
  --tile-violet: #6D5EF6;
  --tile-blue:   #2D8CFF;
  --tile-teal:   #12B5B0;
  --glass-blur: 20px;
}

/* Smooth-scroll: Lenis sets this, but keep native fallback off when JS runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- Fluid mouse blob (ambient) + custom cursor dot --------------------- */
.fluid-blob {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px; border-radius: 50%;
  pointer-events: none; z-index: 0; transform: translate3d(-50%,-50%,0);
  background: radial-gradient(circle at center, rgba(15,169,104,.16), rgba(109,94,246,.10) 45%, transparent 70%);
  filter: blur(30px); opacity: 0; transition: opacity .4s ease; will-change: transform;
}
body.has-fluid .fluid-blob { opacity: 1; }
.cursor-dot {
  position: fixed; top:0; left:0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); pointer-events: none; z-index: 9999;
  transform: translate3d(-50%,-50%,0); mix-blend-mode: multiply; transition: width .2s, height .2s, background .2s;
}
.cursor-ring {
  position: fixed; top:0; left:0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(15,169,104,.5); pointer-events: none; z-index: 9998;
  transform: translate3d(-50%,-50%,0); will-change: transform;
}
.cursor-ring.is-hover { width: 54px; height: 54px; background: rgba(15,169,104,.08); }
@media (hover: none), (max-width: 900px) { .cursor-dot, .cursor-ring, .fluid-blob { display: none; } }

/* ---- Liquid-glass floating header + mega menu -------------------------- */
.gnav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% - 32px)); z-index: 200;
  transition: top .35s var(--ease);
}
.gnav.is-scrolled { top: 0; }
.gnav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  height: 62px; padding: 0 12px 0 22px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 30px rgba(20,21,26,.10), inset 0 1px 0 rgba(255,255,255,.6);
  transition: box-shadow .3s var(--ease), background .3s;
}
.gnav.is-scrolled .gnav__bar { box-shadow: 0 10px 34px rgba(20,21,26,.16), inset 0 1px 0 rgba(255,255,255,.6); }
.gnav .brand { color: var(--ink); font-size: 1.08rem; }
.gnav__menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; }
.gnav__link {
  display: inline-flex; align-items: center; gap: 6px; font-family: "Space Grotesk", sans-serif;
  font-weight: 500; font-size: .96rem; color: #2B3A47; padding: 9px 14px; border-radius: 999px;
  cursor: pointer; transition: background .18s, color .18s; background: transparent; border: 0;
}
.gnav__link:hover, .gnav__item.open .gnav__link { background: rgba(15,23,38,.06); color: var(--ink); }
.gnav__link svg { width: 14px; height: 14px; transition: transform .2s; }
.gnav__item.open .gnav__link svg { transform: rotate(180deg); }
.gnav__actions { display: flex; align-items: center; gap: 8px; }
.gnav__toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.gnav__toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px; transition: .25s; }

/* Mega panel */
.gnav__item { position: static; }
.mega {
  position: absolute; top: calc(100% + 12px); left: 0; right: 0; margin: 0 auto;
  width: 100%; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  pointer-events: none;
}
.gnav__item.open .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega__inner {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(20,21,26,.20);
  border-radius: 26px; padding: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.mega__card {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px;
  transition: background .18s, transform .18s; background: rgba(255,255,255,.5);
}
.mega__card:hover { background: #fff; transform: translateY(-2px); }
.mega__thumb {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--mc, var(--primary)), color-mix(in srgb, var(--mc, var(--primary)) 55%, #1a1a2e));
}
.mega__thumb svg { width: 22px; height: 22px; }
/* Force every icon inside the mega menu to render white */
.mega svg { color: #fff; stroke: #fff; }
.mega svg [fill]:not([fill="none"]), .mega svg[fill]:not([fill="none"]) { fill: #fff; }
.mega__card b { display: block; font-family: "Space Grotesk"; font-size: .96rem; color: var(--ink); margin-bottom: 2px; }
.mega__card span { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.mega__promo {
  grid-column: span 1; border-radius: 16px; padding: 18px; color: #fff;
  background: linear-gradient(150deg, var(--ink), #123A2A); display: flex; flex-direction: column; justify-content: space-between;
}
.mega__promo b { font-family: "Space Grotesk"; font-size: 1.05rem; }
.mega__promo p { font-size: .84rem; color: #B9C6D4; margin: 6px 0 12px; }

/* Mobile drawer — full-screen sliding panel */
.gnav__drawer {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,21,26,.4);
  backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.gnav__drawer.open { opacity: 1; visibility: visible; }
.gnav__drawer-inner {
  position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; border-radius: 0;
  padding: 20px 22px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto;
  transform: translateX(100%); transition: transform .32s var(--ease);
  display: flex; flex-direction: column;
}
.gnav__drawer.open .gnav__drawer-inner { transform: translateX(0); }
.gnav__drawer details { border-bottom: 1px solid var(--line-soft); }
.gnav__drawer summary { list-style: none; cursor: pointer; padding: 15px 4px; font-family: "Space Grotesk"; font-weight: 600; font-size: 1.05rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.gnav__drawer summary::-webkit-details-marker { display: none; }
.gnav__drawer summary::after { content: "+"; color: var(--primary); font-size: 1.4rem; transition: transform .25s var(--ease); }
.gnav__drawer details[open] summary::after { transform: rotate(45deg); }
/* animated submenu (grid-rows 0fr → 1fr) */
.gnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.gnav__drawer details[open] .gnav__sub { grid-template-rows: 1fr; }
.gnav__sub-in { overflow: hidden; min-height: 0; }
.gnav__drawer .gnav__sub-in a { display: block; padding: 10px 6px 10px 14px; color: #33475B; font-size: .96rem; }
.gnav__drawer .drawer-cta { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.gnav__drawer .drawer-cta .btn { width: 100%; }
.gnav__drawer .drawer-cta .btn--ghost { background: var(--ink); color: #fff; border-color: transparent; }
.gnav__drawer .drawer-cta .btn--primary { color: #fff; }

/* offset for fixed header on pages that opt in */
.has-gnav { padding-top: 96px; }

/* ---- Homepage canvas + shell ------------------------------------------- */
body.home { background: var(--canvas); }
.shell {
  background: #fff; border-radius: 34px; overflow: clip; margin: 0 14px 14px;
  box-shadow: 0 30px 80px rgba(20,21,26,.12);
}
@media (max-width: 680px) { .shell { border-radius: 22px; margin: 0 8px 8px; } }

/* ---- Code-typing hero -------------------------------------------------- */
.chero { position: relative; padding: 40px 0 70px; overflow: hidden; }
.chero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.chero h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); }
.chero h1 .grad {
  background: linear-gradient(100deg, var(--primary), var(--tile-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chero .lead { max-width: 520px; }
.editor {
  background: #0E1726; border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden;
  border: 1px solid #1d2a3d;
}
.editor__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #0b1320; border-bottom: 1px solid #1d2a3d; }
.editor__bar i { width: 11px; height: 11px; border-radius: 50%; }
.editor__bar i:nth-child(1){ background:#ff5f57;} .editor__bar i:nth-child(2){ background:#febc2e;} .editor__bar i:nth-child(3){ background:#28c840;}
.editor__bar span { margin-left: 8px; color: #5f7183; font-size: .78rem; font-family: ui-monospace, Menlo, monospace; }
.editor__code {
  margin: 0; padding: 18px 20px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .82rem; line-height: 1.7; color: #C9D4E0; min-height: 250px; white-space: pre-wrap; word-break: break-word;
}
.editor__code .k { color: #7CE7B2; } .editor__code .s { color: #FFD24A; } .editor__code .c { color: #5f7183; font-style: italic; }
.editor__code .t { color: #7EA8FF; } .editor__code .p { color: #FF7EC3; }
.editor__cursor { display: inline-block; width: 8px; height: 1.05em; background: #7CE7B2; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Data-viz dashboard ------------------------------------------------ */
.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  box-shadow: var(--shadow-sm);
}
.panel h3 { font-size: 1.15rem; margin-bottom: 18px; }
.panel--bars { display: flex; flex-direction: column; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bar-row__label { width: 120px; font-size: .86rem; color: #42566A; flex-shrink: 0; text-align: left; }
/* Disclaimer note — pushed to the bottom to fill the panel's blank space */
.panel-note {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: .78rem; line-height: 1.55; color: var(--muted); text-align: left;
}
.panel-note b { color: #42566A; font-weight: 600; }
.bar-track { flex: 1; height: 26px; background: var(--bg-cool); border-radius: 999px; overflow: hidden; }
.bar-fill {
  height: 100%; width: 0; border-radius: 999px; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px; color: #fff; font-size: .76rem; font-weight: 700; font-family: "Space Grotesk";
  transition: width 1.1s var(--ease);
}
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tiles--4 { grid-template-columns: 1fr 1fr; }
.tile { border-radius: 18px; padding: 18px; color: #fff; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; }
.tiles--4 .tile { min-height: 96px; padding: 14px 16px; }
.tile small { font-size: .8rem; opacity: .92; font-weight: 500; }
.tile b { font-family: "Space Grotesk"; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.tiles--4 .tile b { font-size: 1.6rem; }
.tile .delta { font-size: .72rem; font-weight: 600; opacity: .85; margin-left: 6px; letter-spacing: 0; }

/* Feature tabs (performance panel) */
.feat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.feat-tabs button {
  font-family: "Space Grotesk", sans-serif; font-size: .8rem; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  color: #42566A; background: var(--bg-cool); border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.feat-tabs button:hover { border-color: var(--line); }
.feat-tabs button.on { background: var(--primary-050); color: var(--primary-600); border-color: rgba(15,169,104,.35); }
.chip-tabs span { cursor: pointer; }
.perf-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.linechart .path { transition: none; }
.tile--pink { background: var(--tile-pink); } .tile--yellow { background: var(--tile-yellow); color: #1c1400; }
.tile--violet { background: var(--tile-violet); } .tile--emerald { background: var(--primary); }
.tile--blue { background: var(--tile-blue); } .tile--teal { background: var(--tile-teal); }
.linechart { width: 100%; height: auto; display: block; }
.linechart .path { stroke: var(--tile-pink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.linechart .area { fill: url(#lg-pink); opacity: .18; }
.linechart .dot { fill: var(--tile-pink); }
.chip-tabs { display: inline-flex; gap: 4px; background: var(--bg-cool); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.chip-tabs span { font-size: .78rem; padding: 6px 12px; border-radius: 999px; color: #42566A; font-weight: 600; }
.chip-tabs span.on { background: var(--ink); color: #fff; }

/* count-up number */
.countup { font-variant-numeric: tabular-nums; }

/* ---- Magnetic wrap ----------------------------------------------------- */
.magnetic { display: inline-block; will-change: transform; }
/* Magnetic pull is driven instantly by JS — transitioning transform here
   creates a lag/feedback loop that makes the button jitter (shake) on hover. */
.btn.magnetic { transition: box-shadow .2s var(--ease), background .2s, color .2s; }
.btn.magnetic:hover { transform: none; }

/* ---- Reveal base (JS adds .is-in on enter, removes on leave = AOS mirror) */
.gsa { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.gsa.is-in { opacity: 1; transform: none; }

/* ---- Blog index -------------------------------------------------------- */
.blog-hero { text-align: center; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.blog-filters a { font-size: .88rem; font-weight: 600; font-family: "Space Grotesk"; color: #33475B; background: #fff; border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; }
.blog-filters a:hover { border-color: var(--primary); color: var(--primary-600); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post-card__cover { height: 150px; position: relative; background: linear-gradient(135deg, var(--kc, #0FA968), color-mix(in srgb, var(--kc, #0FA968) 50%, #16182a)); }
.post-card__cover span { position: absolute; left: 16px; bottom: 14px; color: #fff; font-family: "Space Grotesk"; font-weight: 600; font-size: .78rem; background: rgba(0,0,0,.22); padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.post-card__body p { color: var(--muted); font-size: .92rem; flex: 1; margin-bottom: 14px; }
.post-card__meta { font-size: .82rem; color: var(--muted); font-weight: 500; }

/* ---- Blog post --------------------------------------------------------- */
.post { padding: 40px 0 70px; }
.post__container { max-width: 760px; }
.post__eyebrow { font-family: "Space Grotesk"; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--primary-600); margin-bottom: 12px; }
.post h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.post__meta { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
.post__lead { font-size: 1.2rem; color: #33475B; line-height: 1.6; margin-bottom: 8px; }
.post__body { font-size: 1.06rem; line-height: 1.75; color: #263544; }
.post__body h2 { font-size: 1.7rem; margin: 40px 0 14px; }
.post__body h3 { font-size: 1.28rem; margin: 28px 0 10px; }
.post__body p { margin: 0 0 18px; }
.post__body ul, .post__body ol { padding-left: 22px; margin: 0 0 18px; }
.post__body li { margin-bottom: 8px; }
.post__body a:not(.btn) { color: var(--primary-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.post__body a.btn { color: #fff; } .post__body a.btn--ghost { color: #fff; }
.post__body img { border-radius: 14px; margin: 20px 0; }
.post__body blockquote { border-left: 4px solid var(--primary); background: var(--bg-tint); padding: 14px 18px; border-radius: 0 12px 12px 0; margin: 0 0 18px; color: #33475B; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; margin: 22px 0; }
.post__body .cmp { font-size: .95rem; }
.post__body .cmp td, .post__body .cmp th { text-align: left; }
.post-cta {
  background: linear-gradient(140deg, #0E1726, #123A2A); border-radius: 20px; padding: 28px 30px;
  margin: 30px 0; color: #fff; text-align: center;
}
.post-cta h3 { color: #fff; margin-bottom: 6px; }
.post-cta p { color: #B9C6D4; margin-bottom: 16px; }
.post__related { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.post__related h3 { margin-bottom: 12px; }
.post__related ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.post__related a { color: var(--primary-600); font-weight: 600; }

/* ---- Affiliation page -------------------------------------------------- */
.aff-hero { text-align: center; }
.aff-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: astep; }
.aff-step { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; position: relative; }
.aff-step__n { counter-increment: astep; font-family: "Space Grotesk"; font-weight: 700; color: #fff; background: var(--primary); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; }
.aff-step__n::before { content: counter(astep); }
.aff-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.aff-earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: center; }
.aff-earn .big { font-family: "Space Grotesk"; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; color: var(--primary-600); letter-spacing: -.03em; }
.aff-calc { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px; max-width: 640px; margin: 0 auto; }
.aff-calc input[type=range] { width: 100%; accent-color: var(--primary); }
.aff-calc__out { text-align: center; margin-top: 18px; }
.aff-calc__out b { font-family: "Space Grotesk"; font-size: 2.6rem; color: var(--ink); display: block; }

@media (max-width: 940px) {
  .chero__grid { grid-template-columns: 1fr; gap: 36px; }
  .dash { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .aff-steps, .aff-tiers, .aff-earn { grid-template-columns: 1fr; }
  .mega__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .gnav__menu, .gnav__actions .btn { display: none; }
  .gnav__toggle { display: block; }
  .gnav__bar { height: 58px; }
  .has-gnav { padding-top: 88px; }
}
@media (max-width: 680px) {
  .chero { padding: 55px 0 50px; }
  .post-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .mega__inner { grid-template-columns: 1fr; }
}

/* ---- Mobile refinements ------------------------------------------------- */
@media (max-width: 680px) {
  /* 1. headings & paragraphs ~2px smaller */
  h1 { font-size: calc(clamp(2.4rem, 5vw, 3.9rem) - 2px); }
  h2 { font-size: calc(clamp(1.9rem, 3.4vw, 2.7rem) - 2px); }
  h3 { font-size: calc(1.3rem - 2px); }
  h4 { font-size: calc(1rem - 2px); }
  p, li { font-size: 14px; }
  .lead { font-size: 15px; }
  .page-hero .lead, .section-head p { font-size: 15px; }

  /* 3. chip tabs */
  .chip-tabs span { font-size: 10px; padding: 6px 10px; }

  /* 4. reviews grid → partial-view slider (1.2 cards) */
  .reviews-grid {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; margin: 0 -4px; padding-left: 4px; padding-right: 4px;
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid > .review { flex: 0 0 82%; scroll-snap-align: start; }

  /* 5. app card meta stacks */
  .app-card__meta { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* 6. all buttons compact */
  .btn, .btn--lg, .btn--sm { padding: 10px 16px; font-size: 12px; line-height: 1; }

  /* build-a-box demo: stack the box summary under the products */
  .demo--bundle .bnd__body { grid-template-columns: 1fr; }
}

/* post-body links: keep buttons clean */
.post__body .btn, .post-cta .btn { text-decoration: none; }
.post-cta .btn--primary { background: var(--primary); }

/* reveal base supports mirror too (transition already defined on base) */
.reveal { will-change: opacity, transform; }

/* ---- Keep demo media inside its box (no horizontal overflow) ------------ */
.feature-block__media { overflow: hidden; }
.demo, .demo__screen { max-width: 100%; }

/* ---- WhatsApp badge (contact page) ------------------------------------- */
.wa-badge { width:64px; height:64px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; margin:0 auto 18px; box-shadow:0 8px 20px rgba(37,211,102,.35); }

/* ---- Floating WhatsApp button (all pages) ------------------------------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 250;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(37,211,102,.55); }
.wa-float svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: waPulse 2.4s infinite;
}
@keyframes waPulse { 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5) } 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }
@media (max-width: 680px) { .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; } .wa-float svg { width: 27px; height: 27px; } }