/* ==========================================================================
   Adwix Connect — homepage v2 (motion pass). Loaded only by index.html, after
   adwix.css. Every animation moves transform/opacity only and is switched off
   under prefers-reduced-motion. Behaviour lives in /assets/home.js.
   ========================================================================== */

/* ── Hero: rotating outcome ──────────────────────────────────────────────── */
.rot{display:inline-grid;vertical-align:top;white-space:nowrap;}
.rot__w{grid-area:1/1;opacity:0;transform:translateY(.45em);transition:opacity .45s var(--ease),transform .45s var(--ease);
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;}
.rot__w.is-on{opacity:1;transform:none;}
.rot__w.is-out{opacity:0;transform:translateY(-.45em);}

/* ── Hero visual: the customer's WhatsApp in front of the team's inbox ───── */
.hero__media{flex-direction:column;align-items:center;}
.hv{position:relative;width:min(100%,560px);height:600px;}
/* back window */
.hv-win{position:absolute;top:18px;left:200px;right:-28px;height:300px;background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(12,26,20,.35);}
.hv-win__bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f5f9f7;border-bottom:1px solid var(--line);}
.hv-win__bar i{width:9px;height:9px;border-radius:50%;background:#dfe7e3;}
.hv-win__bar span{margin-left:10px;font-size:10.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 10px;}
.hv-win__body{height:calc(100% - 34px);padding:16px 18px 16px 108px;}
.hv-main{display:flex;flex-direction:column;gap:10px;}
.hv-main__head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);}
.hv-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;flex-shrink:0;}
.hv-main__head strong{display:block;font-size:13px;color:var(--heading);}
.hv-main__head small{display:block;font-size:10px;color:var(--muted);}
.hv-kv{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;color:var(--muted);}
.hv-pill{font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:99px;}
.hv-pill--g{background:#e3f8ec;color:#0b7a3e}.hv-pill--b{background:#e6efff;color:#1d5fa8}
.hv-note{font-size:10.5px;font-weight:700;color:#7a5200;background:#fff8e6;border:1px dashed #f0d48f;border-radius:8px;padding:6px 9px;align-self:flex-start;}
.hv-tags{display:flex;gap:6px;flex-wrap:wrap;}
.hv-tags span{font-size:10px;font-weight:700;color:var(--text);background:var(--bg-soft);border:1px solid var(--line);padding:3px 8px;border-radius:99px;}
/* front phone */
.hv-phone{position:absolute;left:18px;bottom:0;width:272px;height:566px;padding:9px;border-radius:48px;
  background:linear-gradient(145deg,#2b2f33,#0d0f11 40%,#24282c);box-shadow:0 50px 90px -30px rgba(12,26,20,.55),0 0 0 1.5px #3a3f44 inset;}
.hv-island{position:absolute;top:19px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:99px;background:#000;z-index:3;}
.hv-scr{position:relative;height:100%;border-radius:40px;overflow:hidden;display:flex;flex-direction:column;
  background-color:#efe7de;background-image:radial-gradient(rgba(120,100,80,.10) 1px,transparent 1.4px),radial-gradient(rgba(120,100,80,.07) 1px,transparent 1.4px);
  background-size:18px 18px,18px 18px;background-position:0 0,9px 9px;}
.hv-status{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 4px 26px;background:#fff;font-size:12px;color:#111;}
.hv-status span{display:flex;gap:5px;align-items:center;}
.hv-status i{display:block;background:#111;}
.hv-status .sig{width:15px;height:9px;clip-path:polygon(0 100%,100% 0,100% 100%);}
.hv-status .wifi{width:13px;height:9px;border-radius:12px 12px 0 0;clip-path:polygon(50% 100%,0 0,100% 0);}
.hv-status .bat{width:21px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #111;background:linear-gradient(90deg,#111 70%,transparent 70%);background-clip:content-box;padding:2px;}
.hv-head{display:flex;align-items:center;gap:8px;padding:8px 12px 9px 6px;background:#fff;border-bottom:1px solid #eee;}
.hv-head svg{width:20px;height:20px;fill:none;stroke:#1f2c34;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.hv-head .hv-hic{width:17px;height:17px;margin-left:6px;}
.hv-hav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brand-grad);color:#fff;font-size:11px;font-weight:800;flex-shrink:0;}
.hv-hname{flex:1;min-width:0;line-height:1.15;}
.hv-hname b{display:block;font-size:13.5px;color:#111b21;}
.hv-hname small{font-size:10.5px;color:#667781;}
.hv-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 10px 8px;overflow:hidden;}
.hv-chat>*{flex-shrink:0;}
.hv-day{align-self:center;font-size:10px;font-weight:600;color:#54656f;background:#fff;border-radius:7px;padding:3px 9px;box-shadow:0 1px .5px rgba(0,0,0,.08);margin-bottom:auto;}
.hv-b{max-width:84%;font-size:12.5px;line-height:1.4;color:#111b21;padding:6px 8px 5px;border-radius:9px;box-shadow:0 1px .5px rgba(0,0,0,.12);}
.hv-b--in{align-self:flex-start;background:#fff;border-top-left-radius:2px;}
.hv-b--out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px;}
.hv-t{float:right;margin:6px 0 -3px 10px;font-size:9.5px;color:#667781;white-space:nowrap;}
.tk{color:#8696a0;transition:color .3s;}
.tk.is-read{color:#53bdeb;}
.hv-b--card{padding:3px;max-width:86%;}
.hv-img{height:104px;border-radius:7px;display:grid;place-items:end start;padding:8px;
  background:linear-gradient(160deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.5)),url(/assets/img/goa-beach.webp) center/cover,#2bb0a6;}
.hv-img span{font-size:10.5px;font-weight:800;color:#fff;letter-spacing:.06em;}
.hv-cbody{padding:6px 6px 4px;font-size:12px;}
.hv-cbody b{display:block;font-size:12.5px;margin-bottom:2px;}
.hv-btn{border-top:1px solid #e9edef;text-align:center;padding:7px 0 5px;font-size:12px;font-weight:600;color:#027eb5;}
.hv-typing{align-self:flex-start;display:flex;gap:3px;background:#fff;border-radius:9px;padding:9px 11px;box-shadow:0 1px .5px rgba(0,0,0,.12);}
.hv-typing i{width:6px;height:6px;border-radius:50%;background:#9aa6ad;animation:typedot 1.2s infinite;}
.hv-typing i:nth-child(2){animation-delay:.15s}.hv-typing i:nth-child(3){animation-delay:.3s}
.hv-input{display:flex;gap:6px;align-items:center;padding:6px 8px 16px;}
.hv-field{flex:1;background:#fff;border-radius:99px;padding:8px 12px;font-size:12px;color:#8696a0;}
.hv-mic{width:34px;height:34px;border-radius:50%;background:#00a884;display:grid;place-items:center;flex-shrink:0;}
.hv-mic svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;}
/* floats */
.hero__media .mock__float{max-width:176px;padding:11px 14px;}
.hero__media .mock__float .fl-num{font-size:1.12rem;}
.hv-float--a{top:348px;right:8px;left:auto;}
.hv-float--b{bottom:52px;right:40px;left:auto;}
/* playback (home.js adds .js-play; without JS everything is simply shown) */
.js-play [data-seq]{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.js-play .mock__float[data-seq]{transform:none;transition:opacity .5s var(--ease);}
.js-play .is-in{opacity:1!important;transform:none!important;}
.js-play .hv-typing:not(.is-in){display:none;}
@media(max-width:640px){
  .hv{height:580px;}
  .hv-win,.hero__media .mock__float{display:none;}
  .hv-phone{left:50%;margin-left:-136px;}
}

/* ── Tools strip ─────────────────────────────────────────────────────────── */
.cloud__note{text-align:center;font-size:.8rem;color:var(--muted);margin-top:12px;}

/* ── Product tour (scroll-pinned) ────────────────────────────────────────── */
.tour__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,72px);margin-top:clamp(28px,4vw,48px);}
.tour__step{min-height:calc(62vh / var(--z,1));display:flex;flex-direction:column;justify-content:center;padding:24px 0;opacity:.35;transition:opacity .4s var(--ease);}
.tour__step.is-active{opacity:1;}
.tour__k{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-700);}
.tour__step h3{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:10px 0 12px;letter-spacing:-.02em;}
.tour__step p{color:var(--text);font-size:1.03rem;line-height:1.7;max-width:480px;}
.tour__step ul{list-style:none;margin-top:16px;display:grid;gap:9px;}
.tour__step li{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--heading);font-size:.96rem;}
.tour__step li svg{width:19px;height:19px;color:var(--brand-600);flex-shrink:0;}
.tour__step .tour__more{display:inline-flex;margin-top:18px;font-weight:700;color:var(--brand-700);font-size:.93rem;}
.tour__step .tour__more:hover{text-decoration:underline;}
.tour__stage{position:relative;}
.tour__sticky{position:sticky;top:110px;height:min(560px,calc(100vh / var(--z,1) - 150px));}
.tour__dots{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);display:flex;gap:8px;}
.tour__dots i{width:8px;height:8px;border-radius:99px;background:#cfe3d8;transition:width .3s var(--ease),background .3s;}
.tour__dots i.is-on{width:26px;background:var(--brand);}
.tw{position:absolute;inset:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;}
.tw.is-active{opacity:1;transform:none;pointer-events:auto;}
.tw__bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg-soft);}
.tw__bar i{width:10px;height:10px;border-radius:50%;background:#dfe8e3;}
.tw__bar span{margin-left:12px;font-size:.78rem;font-weight:700;color:var(--muted);}
.tw__bar em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:700;color:var(--muted);border:1px solid var(--line);padding:2px 9px;border-radius:99px;background:#fff;}
.tw__body{position:absolute;inset:42px 0 0;padding:20px;}
/* staged reveal inside a panel */
.tw .st{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);}
.tw.is-active .st{opacity:1;transform:none;}
.tw.is-active .st:nth-child(2){transition-delay:.12s}.tw.is-active .st:nth-child(3){transition-delay:.24s}
.tw.is-active .st:nth-child(4){transition-delay:.36s}.tw.is-active .st:nth-child(5){transition-delay:.48s}.tw.is-active .st:nth-child(6){transition-delay:.6s}

/* panel: inbox */
.ib{display:grid;grid-template-columns:200px 1fr;gap:14px;height:100%;}
.ib__list{border-right:1px solid var(--line-soft);padding-right:12px;display:flex;flex-direction:column;gap:6px;}
.ib__row{display:flex;gap:10px;align-items:center;padding:9px;border-radius:12px;}
.ib__row.is-sel{background:var(--bg-mint);}
.ib__av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;flex-shrink:0;}
.ib__row b{display:block;font-size:.82rem;color:var(--heading);}
.ib__row small{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.ib__chat{display:flex;flex-direction:column;gap:9px;min-width:0;}
.ib__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line-soft);}
.ib__head b{font-size:.92rem;color:var(--heading);margin-right:auto;}
.pl{font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:99px;}
.pl--g{background:#e3f8ec;color:#0b7a3e}.pl--b{background:#e6efff;color:#1d5fa8}.pl--a{background:#fff2dc;color:#9a5b00}
.cb{max-width:80%;padding:9px 12px;border-radius:12px;font-size:.84rem;line-height:1.45;background:#f1f5f3;color:var(--heading);}
.cb--out{align-self:flex-end;background:#d9fdd3;}
.cb--note{align-self:center;max-width:92%;background:#fff8e6;border:1px dashed #f0d48f;color:#7a5200;font-size:.76rem;}
/* panel: campaigns funnel */
.fn{display:grid;gap:14px;}
.fn__row{display:grid;grid-template-columns:90px 1fr 70px;align-items:center;gap:12px;font-size:.85rem;font-weight:700;color:var(--heading);}
.fn__bar{height:30px;border-radius:9px;background:var(--bg-soft);overflow:hidden;}
.fn__bar i{display:block;height:100%;border-radius:9px;background:var(--brand-grad);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease);}
.tw.is-active .fn__bar i{transform:scaleX(var(--w));}
.fn__row:nth-child(2) i{transition-delay:.12s}.fn__row:nth-child(3) i{transition-delay:.24s}.fn__row:nth-child(4) i{transition-delay:.36s}
.fn__row span:last-child{text-align:right;color:var(--muted);}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.mini div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.mini small{display:block;font-size:.66rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.mini b{font-size:1.25rem;color:var(--heading);}
/* panel: automation rule */
.rl{display:grid;gap:10px;}
.rl__n{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;}
.rl__n>i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-style:normal;font-weight:800;font-size:.72rem;}
.rl__n b{display:block;font-size:.88rem;color:var(--heading);}
.rl__n small{display:block;font-size:.76rem;color:var(--muted);}
.rl__when>i{background:#fff2dc;color:#9a5b00}.rl__then>i{background:#e3f8ec;color:#0b7a3e}
.rl__note{font-size:.74rem;color:var(--muted);text-align:center;margin-top:4px;}
/* panel: commerce */
.cm{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.cm__p{border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.cm__img{display:block;width:100%;height:118px;object-fit:cover;background:#eef3f0;}
.cm__p div:last-child{padding:9px 11px;}
.cm__p b{display:block;font-size:.8rem;color:var(--heading);}
.cm__p small{font-size:.76rem;color:var(--brand-700);font-weight:700;}
.cm__cart{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#0b1f17;color:#cfe3d9;font-size:.84rem;}
.cm__cart b{color:#fff;}
.cm__cart span{margin-left:auto;background:var(--brand);color:#05210f;font-weight:800;padding:6px 12px;border-radius:99px;font-size:.76rem;}
/* panel: analytics */
.an__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.an__chart{display:flex;align-items:flex-end;gap:8px;height:190px;padding:14px;border:1px solid var(--line);border-radius:14px;}
.an__chart i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#7bf0a6,#16a34a);transform-origin:bottom;transform:scaleY(0);transition:transform .7s var(--ease);height:var(--h);}
.tw.is-active .an__chart i{transform:scaleY(1);}
.an__chart i:nth-child(2){transition-delay:.05s}.an__chart i:nth-child(3){transition-delay:.1s}.an__chart i:nth-child(4){transition-delay:.15s}.an__chart i:nth-child(5){transition-delay:.2s}.an__chart i:nth-child(6){transition-delay:.25s}.an__chart i:nth-child(7){transition-delay:.3s}

.tour__mob{display:none;}
@media(max-width:960px){
  .tour__grid{grid-template-columns:1fr;}
  .tour__stage{display:none;}
  .tour__step{min-height:0;opacity:1;padding:18px 0 30px;}
  .tour__mob{display:block;position:relative;height:430px;margin-top:22px;}
  .tour__mob .tw{opacity:1;transform:none;}
  .tour__mob .tw .st{opacity:1;transform:none;}
  .tour__mob .fn__bar i{transform:scaleX(var(--w));}
  .tour__mob .an__chart i{transform:scaleY(1);}
}
@media(max-width:560px){
  .ib{grid-template-columns:1fr;}
  .ib__list{display:none;}
  .cm{grid-template-columns:repeat(2,1fr);}
  .cm__p:nth-child(3){display:none;}
}

/* ── How it works: line draws across as the section enters ───────────────── */
.how{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px;}
.how__line{position:absolute;left:12%;right:12%;top:31px;height:2px;background:var(--line);overflow:hidden;}
.how__line i{display:block;height:100%;background:var(--brand-grad);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease);}
.how.is-in .how__line i{transform:scaleX(1);}
.how__s{position:relative;text-align:center;padding:0 6px;}
.how__n{position:relative;z-index:1;width:62px;height:62px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);
  color:var(--muted);font-weight:800;font-size:1.2rem;transition:all .5s var(--ease);}
.how.is-in .how__n{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:var(--sh-glow);}
.how.is-in .how__s:nth-child(3) .how__n{transition-delay:.35s}.how.is-in .how__s:nth-child(4) .how__n{transition-delay:.7s}.how.is-in .how__s:nth-child(5) .how__n{transition-delay:1.05s}
.how__s h3{font-size:1.08rem;margin-bottom:7px;}
.how__s p{font-size:.92rem;color:var(--text);line-height:1.6;}
.how__cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px;}
@media(max-width:860px){.how{grid-template-columns:1fr 1fr;row-gap:34px}.how__line{display:none}}
@media(max-width:520px){.how{grid-template-columns:1fr}}

/* ── After-hours automation band ─────────────────────────────────────────── */
.night{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.night .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#8ff0b5;}
.night h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem);margin:16px 0 14px;}
.night p{color:#a9c4b8;font-size:1.04rem;line-height:1.7;}
.night .btn{margin-top:24px;}
.flow{position:relative;display:grid;gap:0;}
.flow__n{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateX(20px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.flow__n i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:rgba(37,211,102,.16);color:#7bf0a6;}
.flow__n i svg{width:20px;height:20px;}
.flow__n b{display:block;color:#fff;font-size:.95rem;}
.flow__n small{display:block;color:#8fb3a4;font-size:.8rem;}
.flow__n time{margin-left:auto;font-size:.74rem;font-weight:700;color:#7bf0a6;white-space:nowrap;}
.flow__c{width:2px;height:22px;margin-left:35px;background:rgba(123,240,166,.35);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);}
.flow.is-in .flow__n,.flow.is-in .flow__c{opacity:1;transform:none;}
.flow.is-in>:nth-child(2){transition-delay:.35s}.flow.is-in>:nth-child(3){transition-delay:.55s}.flow.is-in>:nth-child(4){transition-delay:.9s}
.flow.is-in>:nth-child(5){transition-delay:1.1s}.flow.is-in>:nth-child(6){transition-delay:1.45s}.flow.is-in>:nth-child(7){transition-delay:1.65s}
.flow__cap{margin-top:12px;font-size:.76rem;color:#7fa093;text-align:center;}
@media(max-width:860px){.night{grid-template-columns:1fr}}

/* ── Industry switcher ───────────────────────────────────────────────────── */
.ind{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center;}
.ind__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.ind__tab{font:inherit;font-weight:700;font-size:.92rem;padding:10px 18px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--text);cursor:pointer;transition:all .2s var(--ease);}
.ind__tab:hover{border-color:var(--brand);color:var(--heading);}
.ind__tab[aria-selected="true"]{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:0 8px 18px -8px rgba(18,178,94,.7);}
.ind__pane{display:none;}
.ind__pane.is-on{display:block;animation:indIn .45s var(--ease);}
.ind__pane h3{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:10px;}
.ind__pane p{color:var(--text);line-height:1.7;margin-bottom:16px;}
.ind__pane ul{list-style:none;display:grid;gap:10px;}
.ind__pane li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--heading);}
.ind__pane li svg{width:20px;height:20px;color:var(--brand-600);flex-shrink:0;margin-top:2px;}
.ind__media{display:flex;justify-content:center;}
.ind__media .mock__chat{justify-content:flex-end;}
.ind__media .mock__chat>*{flex-shrink:0;}
.ind__chat{display:none;}
.ind__chat.is-on{display:flex;}
.ind__chat.is-on>*{animation:indIn .45s var(--ease) both;}
.ind__chat.is-on>:nth-child(2){animation-delay:.25s}.ind__chat.is-on>:nth-child(3){animation-delay:.5s}.ind__chat.is-on>:nth-child(4){animation-delay:.75s}
@keyframes indIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:860px){.ind{grid-template-columns:1fr}.ind__tabs{justify-content:center}}

/* ── Trust: honest numbers strip ─────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
.fact{text-align:center;padding:20px 12px;border-radius:var(--r);background:var(--bg-mint);border:1px solid var(--line);}
.fact b{display:block;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;color:var(--heading);letter-spacing:-.02em;}
.fact span{font-size:.86rem;color:var(--text);font-weight:600;}
@media(max-width:760px){.facts{grid-template-columns:1fr 1fr}}

/* ── Learn teaser ────────────────────────────────────────────────────────── */
.lt{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;}
.lt__card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;}
.lt__card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#cde9da;}
.lt__thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#0a1f17,#0e3323);}
.lt__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.lt__play{position:absolute;left:16px;bottom:16px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--brand-grad);box-shadow:var(--sh-glow);transition:transform .25s var(--ease);}
.lt__card:hover .lt__play{transform:scale(1.08);}
.lt__play svg{width:22px;height:22px;fill:#fff;margin-left:3px;}
.lt__body{padding:18px 20px 20px;}
.lt__body small{font-size:.74rem;font-weight:800;color:var(--brand-700);text-transform:uppercase;letter-spacing:.06em;}
.lt__body h3{font-size:1.06rem;margin:6px 0;line-height:1.35;}
.lt__body p{font-size:.9rem;color:var(--text);line-height:1.55;}
.lt__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--bg-mint);color:var(--brand-700);margin:20px 20px 0;}
.lt__ic svg{width:22px;height:22px;}
.lt__more{text-align:center;margin-top:26px;}
@media(max-width:900px){.lt{grid-template-columns:1fr 1fr}.lt__card:first-child{grid-column:1/-1}}
@media(max-width:560px){.lt{grid-template-columns:1fr}}

/* ══ Mobile pass ═══════════════════════════════════════════════════════════
   Phones were scrolling ~20,000px. Long stacks become swipe rows (scroll-snap,
   no JS), the steps become a compact timeline, and decorative mockups shrink.
   ════════════════════════════════════════════════════════════════════════ */
.swipe-hint{display:none;}
@media(max-width:960px){
  /* product tour → one swipeable card per feature */
  .tour__grid{display:block;margin-top:8px;}
  .tour__steps{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .tour__steps::-webkit-scrollbar{display:none;}
  .tour__step{flex:0 0 min(86%,440px);scroll-snap-align:start;justify-content:flex-start;padding:22px 20px 20px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);}
  .tour__step ul{display:none;}
  .tour__step h3{font-size:1.3rem;margin:8px 0 8px;}
  .tour__step p{font-size:.95rem;line-height:1.6;}
  .tour__step .tour__more{padding:8px 0;margin-top:6px;}
  .tour__mob{height:340px;margin-top:14px;}
  .tour__mob .tw{border-radius:16px;box-shadow:none;}
  .swipe-hint{display:block;text-align:center;font-size:.82rem;font-weight:700;color:var(--muted);margin-top:2px;}

  /* how it works → vertical timeline */
  .how{grid-template-columns:1fr;row-gap:20px;max-width:520px;margin-inline:auto;}
  .how__line{display:block;left:25px;right:auto;top:28px;bottom:28px;width:2px;height:auto;}
  .how__line i{width:100%;height:100%;transform:scaleY(0);transform-origin:top;}
  .how.is-in .how__line i{transform:scaleY(1);}
  .how__s{display:grid;grid-template-columns:52px 1fr;column-gap:16px;text-align:left;padding:0;}
  .how__n{width:52px;height:52px;margin:0;grid-row:span 2;font-size:1.05rem;}
  .how__s h3{margin:3px 0 3px;font-size:1.02rem;}
  .how__s p{font-size:.9rem;}

  /* industry tabs → one scrollable row */
  .ind__tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-inline:calc(-1 * var(--gutter));
    padding:2px var(--gutter) 8px;scrollbar-width:none;}
  .ind__tabs::-webkit-scrollbar{display:none;}
  .ind__tab{flex-shrink:0;}
  .ind__media .mock__screen{height:430px;}
  .ind{grid-template-columns:minmax(0,1fr);}
  .ind>div{min-width:0;}
  .flow__n span{min-width:0;}
  .flow{grid-template-columns:minmax(0,1fr);}
  .cm__cart{flex-wrap:wrap;row-gap:6px;}

  /* trust cards + Learn teaser → swipe rows */
  body .trust,.lt{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 16px;scrollbar-width:none;}
  body .trust::-webkit-scrollbar,.lt::-webkit-scrollbar{display:none;}
  body .trust__item{flex:0 0 min(80%,340px);scroll-snap-align:start;}
  .lt__card{flex:0 0 min(82%,360px);scroll-snap-align:start;}
  .lt__card:first-child{grid-column:auto;}
  /* pricing → swipe row (Professional first, the next plan peeks in) */
  body .price-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);max-width:none;
    margin-inline:calc(-1 * var(--gutter));padding:16px var(--gutter) 16px;scrollbar-width:none;align-items:stretch;}
  body .price-grid::-webkit-scrollbar{display:none;}
  body .price-grid>.price{flex:0 0 min(84%,380px);scroll-snap-align:start;}
}
@media(max-width:640px){
  .section{padding:52px 0;}
  .sec-head{margin-bottom:26px;}
  .hide-sm{display:none;}
  .hero{padding-top:22px;}
  .hero__copy h1{font-size:2.35rem;margin:16px 0 14px;}
  .hero__copy>p{font-size:1rem;margin-bottom:22px;}
  .hero__chips .chip{font-size:.78rem;padding:6px 11px;}
  /* hero phone at 86% — same picture, ~90px shorter */
  .hv{height:500px;}
  .hv-phone{zoom:.86;}
  .mini{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .mini b{font-size:1rem;}
  .mini>div:nth-child(3){display:none;}
  /* after-hours flow: time moves into the corner so the text gets the width */
  .flow__n{position:relative;padding:12px 14px;}
  .flow__n time{position:absolute;top:9px;right:12px;font-size:.66rem;}
  .flow__n span{padding-right:48px;}
  .flow__n b{font-size:.88rem;}
  /* the app section's text + Play badge carry it; the big ringing-phone mock is desktop-only */
  .appsec .split__media{display:none;}
  .facts{gap:10px;margin-bottom:18px;}
  .fact{padding:14px 8px;}
  /* balanced line breaks — no lone word ("your", "anytime") on its own line */
  h1,h2,h3,.sec-head p,.hero__micro,.cta-final p{text-wrap:balance;}
  .hero__copy h1{font-size:clamp(2rem,9.4vw,2.35rem);letter-spacing:-.02em;}
  .hero__micro{font-size:.84rem;margin-bottom:18px;}
  .hero__cta{gap:10px;}
  /* plan cards: more width for the feature list so lines don't wrap twice */
  body .price-grid>.price{padding:28px 20px;}
  /* smaller WhatsApp button, clear of the iPhone home bar, so it covers less content */
  .wa-fab{padding:12px;bottom:calc(16px + env(safe-area-inset-bottom));right:14px;}
  .wa-fab svg{width:22px;height:22px;}
}

/* ── Reduced motion: show everything in its final state ──────────────────── */
@media(prefers-reduced-motion:reduce){
  .rot__w,.tw,.tw .st,.fn__bar i,.an__chart i,.how__line i,.how__n,.flow__n,.flow__c,.lt__card,.tour__step{transition:none!important;}
  .js-play [data-seq]{opacity:1;transform:none;}
  .ind__pane.is-on,.ind__chat.is-on>*{animation:none;}
  .flow__n,.flow__c{opacity:1;transform:none;}
  .how__line i{transform:scaleX(1);}
}