/* ============================================================
   Apek Flow — shared stylesheet
   Premium look: dark layered hero, glass nav, floating depth
   cards, scroll reveals. No frameworks, no build step.
   ============================================================ */

:root{
  --brand:#06A3DA;
  --brand-dark:#0587b4;
  --brand-glow:#4cc7f0;
  /* Logo greens, from the brand export (Apek Flow Logo.dc.html).
     The mark is green; --brand blue stays the UI/action colour. See the
     handbook note "Two brand colours" before changing either. */
  --leaf:#4f9a3d;
  --leaf-light:#a3d06a;
  --leaf-bright:#8cc63f;
  --wa:#25D366;
  --navy:#07182e;
  --navy-2:#0b2137;
  --ink:#0b1b2b;
  --body:#4a5a6a;
  --line:#e3e9ef;
  --soft:#f5f9fc;
  --radius:16px;
  --max:1160px;
  --shadow-lg:0 24px 70px rgba(7,24,46,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
img{max-width:100%}

/* ---------------- language toggle ----------------
   !important is deliberate and load-bearing. The old rule ([data-ru]{display:none})
   had the same specificity as component rules like .fstat b{display:block}, and
   whichever came later in the file won — so any styled element carrying data-ru
   showed BOTH languages (the "Days Дни" bug, 22 Jul 2026). With !important the
   hidden language always loses, and the visible one keeps its component display
   (block, inline-flex, whatever) instead of being forced to inline. */
html:not([lang="ru"]) [data-ru]{display:none!important}
html[lang="ru"] [data-en]{display:none!important}

/* ---------------- announcement ---------------- */
.announce{
  background:linear-gradient(90deg,var(--navy),#0d3050 60%,var(--navy));
  color:#bfe6f7;font-size:13px;font-weight:600;text-align:center;
  padding:8px 0;letter-spacing:.01em;
}

/* ---------------- header ---------------- */
.site-head{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
body.home .site-head{
  background:rgba(7,24,46,.72);border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
/* ---- brand lockup ------------------------------------------------------
   The mark is the real vector logo (three capsules) from the brand export.
   Two colour variants: --leaf on light backgrounds, --leaf-bright on dark.
   The wordmark reproduces the designed lockup: small letterspaced "APEK"
   above a heavy "flow". Hard-coded rather than SITE_NAME because the two
   halves are styled differently — if the brand name changes, edit here. */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;
       perspective:620px}
/* Logo mark: a slow 3D tilt (rotateY/rotateX oscillation via perspective on the
   parent) plus a green glow that breathes. Two animations on two different
   properties — transform for the tilt, filter for the glow — so they run
   together without fighting. Hover does a full 3D coin-spin. */
.logo-mark{
  width:34px;height:34px;flex:none;display:block;
  transform-style:preserve-3d;
  animation:logo-tilt 6s ease-in-out infinite, logo-glow 3.2s ease-in-out infinite;
  will-change:transform,filter;
}
@keyframes logo-tilt{
  0%,100%{transform:rotateY(-14deg) rotateX(5deg)}
  50%{transform:rotateY(14deg) rotateX(-3deg)}
}
@keyframes logo-glow{
  0%,100%{filter:drop-shadow(0 2px 5px rgba(79,154,61,.4))}
  50%{filter:drop-shadow(0 4px 15px rgba(140,198,63,.9))}
}
.logo:hover .logo-mark{animation:logo-spin 1.1s cubic-bezier(.5,0,.3,1),
                                 logo-glow 3.2s ease-in-out infinite}
@keyframes logo-spin{
  from{transform:rotateY(0) scale(1)}
  50%{transform:rotateY(180deg) scale(1.12)}
  to{transform:rotateY(360deg) scale(1)}
}
/* footer sits on dark navy — push the glow brighter so it reads */
.foot-brand .logo-mark{animation:logo-tilt 6s ease-in-out infinite, logo-glow-bright 3.2s ease-in-out infinite}
@keyframes logo-glow-bright{
  0%,100%{filter:drop-shadow(0 2px 6px rgba(140,198,63,.5))}
  50%{filter:drop-shadow(0 4px 18px rgba(163,208,106,1))}
}
@media(prefers-reduced-motion:reduce){
  .logo-mark,.foot-brand .logo-mark{animation:none;
    filter:drop-shadow(0 2px 8px rgba(140,198,63,.6))}
}
.lm-dark{display:none}
body.home .site-head .lm-light,.foot-brand .lm-light{display:none}
body.home .site-head .lm-dark,.foot-brand .lm-dark{display:block}

.logo-type{display:flex;flex-direction:column;line-height:1;gap:3px}
.logo-type b{font-size:9px;font-weight:800;letter-spacing:.2em;
             text-transform:uppercase;color:var(--leaf)}
.logo-type i{font-style:normal;font-size:21px;font-weight:800;
             letter-spacing:-.02em;color:var(--ink)}
body.home .site-head .logo-type i,.foot-brand .logo-type i{color:#fff}
body.home .site-head .logo-type b,.foot-brand .logo-type b{color:var(--leaf-light)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--body);text-decoration:none;font-size:15px;font-weight:600}
body.home .site-head .nav-links a{color:#c9d8e6}
.nav-links a:hover{color:var(--brand)}
@media(max-width:860px){.nav-links a[data-hide]{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:12px;font-weight:700;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-glow));color:#fff;
  box-shadow:0 8px 24px rgba(6,163,218,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(6,163,218,.45)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.35)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,211,102,.45)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
body.home .site-head .btn-login{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
body.home .site-head .btn-login:hover{border-color:var(--brand-glow);color:var(--brand-glow)}

/* Language is automatic (browser-detected) — there is no visible picker.
   See js/i18n.js and the handbook "Multi-language system" note. */

/* ---------------- HERO ---------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(6,163,218,.28), transparent 60%),
    radial-gradient(700px 420px at -10% 100%, rgba(37,211,102,.14), transparent 55%),
    radial-gradient(130% 55% at 50% 108%, rgba(3,10,20,.6), transparent 62%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  padding:88px 0 110px;
}
/* fine film-grain noise: breaks up gradient banding on cheap screens and adds
   texture. Tiny inline SVG turbulence tile, blended overlay at 4%. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero::after{ /* fine grid — masked so it fades away instead of covering the
                 whole hero like graph paper; strongest up near the nav. */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(#fff 1px,transparent 1px),
                   linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 78%);
}

/* light beams — two long soft streaks sweeping very slowly across the dark.
   This is the layer that makes the hero feel alive without drawing the eye
   away from the headline. */
.beam{
  position:absolute;z-index:0;pointer-events:none;filter:blur(46px);
  border-radius:999px;transform-origin:center;
}
.beam-1{
  width:1100px;height:190px;top:16%;left:-14%;
  background:linear-gradient(90deg,transparent,rgba(6,163,218,.32),rgba(76,199,240,.18),transparent);
  transform:rotate(-16deg);
  animation:beamdrift 16s ease-in-out infinite alternate;
}
.beam-2{
  width:900px;height:150px;bottom:8%;right:-18%;
  background:linear-gradient(90deg,transparent,rgba(37,211,102,.16),rgba(6,163,218,.14),transparent);
  transform:rotate(14deg);
  animation:beamdrift2 20s ease-in-out infinite alternate;
}
/* Each beam gets its own keyframes because animation overrides the whole
   transform — shared keyframes would snap beam-2 to beam-1's angle. */
@keyframes beamdrift{
  from{transform:rotate(-16deg) translateX(-70px);opacity:.75}
  to{transform:rotate(-13deg) translateX(90px);opacity:1}
}
@keyframes beamdrift2{
  from{transform:rotate(14deg) translateX(80px);opacity:.7}
  to{transform:rotate(11deg) translateX(-80px);opacity:1}
}
@media(prefers-reduced-motion:reduce){.beam{animation:none}}
/* floating service icons in the hero background — decorative depth.
   z-index:1 keeps them above the orbs/grid but below the content (z-index:2). */
.hero-icons{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-icons .hi{position:absolute;display:block;color:#fff;opacity:.07;
  animation:floaty 9s ease-in-out infinite}
.hero-icons .hi svg{width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hi-1{width:58px;height:58px;top:16%;left:39%;animation-delay:.0s}
.hi-2{width:46px;height:46px;top:58%;left:6%;animation-delay:1.2s;opacity:.06}
.hi-3{width:40px;height:40px;top:24%;left:60%;animation-delay:2.1s}
.hi-4{width:66px;height:66px;bottom:14%;left:44%;animation-delay:.7s;opacity:.05}
.hi-5{width:44px;height:44px;top:9%;left:72%;animation-delay:1.7s}
.hi-6{width:38px;height:38px;bottom:24%;left:28%;animation-delay:2.6s;opacity:.06}
@media(max-width:960px){.hi-3,.hi-4,.hi-5{display:none}}
@media(prefers-reduced-motion:reduce){.hero-icons .hi{animation:none}}

.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.orb-1{width:420px;height:420px;background:rgba(6,163,218,.35);top:-140px;right:6%;
       animation:drift 11s ease-in-out infinite alternate}
.orb-2{width:300px;height:300px;background:rgba(37,211,102,.18);bottom:-90px;left:2%;
       animation:drift 13s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(36px,26px)}}

.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;
}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.hero-visual{margin-top:26px}}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;color:#cfe9f7;
  margin-bottom:26px;backdrop-filter:blur(6px);
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.hero h1{
  font-size:clamp(34px,4.8vw,58px);line-height:1.08;margin:0 0 22px;
  letter-spacing:-.025em;font-weight:800;
}
.hero h1 .grad{
  background:linear-gradient(90deg,var(--brand-glow),#8be3ff 55%,var(--wa));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{font-size:19px;color:#b7c9d9;max-width:560px;margin:0 0 34px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .note{font-size:14px;color:#8fa6ba;margin-top:20px}

/* hero integration flow — WhatsApp → Apek Flow API → tools belt.
   Replaced the old stat strip (director, 22 Jul 2026): the flow shows what
   the API actually does instead of four abstract numbers. */
.hero-flow{
  margin-top:46px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;
  max-width:640px;
}
.hf-cap{font-size:13.5px;color:#8fa6ba;margin:0 0 16px;font-weight:600}
.hf-line{display:flex;align-items:center;gap:12px}
.hf-chip{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:11px;padding:9px 15px;font-weight:700;font-size:13.5px;color:#dce8f2;
  white-space:nowrap;
}
.hf-chip svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hf-wa{border-color:rgba(37,211,102,.45);color:#b9f4d2}
.hf-wa svg{stroke:var(--wa)}
.hf-core{
  border-color:rgba(6,163,218,.55);color:#fff;
  background:rgba(6,163,218,.14);box-shadow:0 0 20px rgba(6,163,218,.28);
}
.hf-core svg{stroke:var(--brand-glow);animation:hfspin 9s linear infinite}
@keyframes hfspin{to{transform:rotate(360deg)}}

/* forward chevrons, lighting up in sequence — data flowing left to right */
.hf-arr{display:inline-flex;gap:4px;flex:none}
.hf-arr i{
  width:8px;height:8px;border-top:2px solid var(--brand-glow);
  border-right:2px solid var(--brand-glow);transform:rotate(45deg);
  opacity:.15;animation:hfchev 1.2s linear infinite;
}
.hf-arr i:nth-child(2){animation-delay:.15s}
.hf-arr i:nth-child(3){animation-delay:.3s}
@keyframes hfchev{0%,60%,100%{opacity:.15}20%{opacity:1}}

/* tools belt — the track holds the chip list twice; sliding it -50% then
   snapping back is invisible, so it scrolls forever. Fades at both edges. */
.hf-tools{
  flex:1;min-width:110px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hf-track{display:flex;gap:10px;width:max-content;animation:hfscroll 24s linear infinite}
.hf-tools .hf-chip{font-weight:600;font-size:12.5px;padding:7px 13px;color:#b9c9d8}
@keyframes hfscroll{to{transform:translateX(-50%)}}

@media(max-width:640px){
  .hf-line{flex-wrap:wrap}
  .hf-tools{flex-basis:100%;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  .hf-arr i,.hf-track,.hf-core svg{animation:none}
  .hf-arr i{opacity:.6}
}

/* ---------- phone mockup ---------- */
.hero-visual{position:relative;z-index:2;perspective:1200px}
.phone{
  width:330px;max-width:88%;margin:0 auto;border-radius:34px;
  background:#0d1b26;padding:12px;
  box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.07) inset;
  transform:rotateY(-8deg) rotateX(4deg);
  transition:transform .25s ease-out;
  will-change:transform;
}
.phone-screen{
  border-radius:24px;overflow:hidden;background:#0a141d;
  display:flex;flex-direction:column;height:520px;
}
.chat-top{
  background:#12232f;display:flex;align-items:center;gap:11px;padding:13px 15px;flex:none;
}
.chat-ava{width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-glow));
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px}
.chat-top b{color:#fff;font-size:14px;display:block;line-height:1.25}
.chat-top small{color:#22c55e;font-size:11.5px;font-weight:600}
.chat-body{
  flex:1;padding:16px 13px;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  background:
    radial-gradient(300px 200px at 80% 10%, rgba(6,163,218,.07), transparent),
    #0a141d;
}
.msg{
  max-width:82%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;
  color:#e8eef4;opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .45s,transform .45s;
}
.msg.show{opacity:1;transform:none}
.msg.in{background:#16293a;border-bottom-left-radius:4px;align-self:flex-start}
.msg.out{background:#0d5c46;border-bottom-right-radius:4px;align-self:flex-end}
.msg .tr{
  display:block;margin-top:7px;padding-top:7px;font-size:12px;color:#9fdcf5;
  border-top:1px dashed rgba(255,255,255,.18);
}
.msg .tr::before{content:"⇄ ";color:var(--brand-glow)}
.typing{
  align-self:flex-start;background:#16293a;border-radius:14px;border-bottom-left-radius:4px;
  padding:12px 16px;display:none;gap:5px;
}
.typing.show{display:flex}
.typing i{width:7px;height:7px;border-radius:50%;background:#7fa5c0;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* floating cards */
.fcard{
  position:absolute;background:#fff;border-radius:14px;padding:12px 16px;
  box-shadow:var(--shadow-lg);font-size:13px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:9px;white-space:nowrap;z-index:3;
  animation:floaty 5.5s ease-in-out infinite;
}
.fcard small{display:block;font-weight:600;color:var(--body);font-size:11.5px}
.fcard .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none}
.fc-1{top:6%;left:-2%;animation-delay:.4s}
.fc-2{bottom:20%;right:-4%;animation-delay:1.6s}
.fc-3{bottom:-4%;left:6%;animation-delay:2.8s}
@media(max-width:960px){.fc-1{left:0}.fc-2{right:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---------------- sections (light) ---------------- */
section{padding:84px 0}
.kicker{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:12px;
}
.section-head{max-width:680px;margin:0 0 48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:clamp(27px,3.4vw,38px);margin:0 0 14px;letter-spacing:-.02em;font-weight:800}
.section-head p{font-size:17px;color:var(--body);margin:0}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* problem strip */
.strip{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pain{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:820px){.pain{grid-template-columns:1fr}}
.pain div{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;font-size:15.5px;color:var(--body);display:flex;gap:12px;
}
.pain b{color:var(--ink)}
.pain .x{color:#dc2626;font-weight:800;flex:none}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px 26px;background:#fff;
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-size:13px;font-weight:800;color:var(--brand);
  letter-spacing:.1em;margin-bottom:14px;
}
.step h3{margin:0 0 8px;font-size:17.5px}
.step p{margin:0;font-size:15px;color:var(--body)}

/* feature cards */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(6,163,218,.35)}
.card h3{margin:0 0 9px;font-size:17px}
.card p{margin:0;color:var(--body);font-size:15px}
.icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,rgba(6,163,218,.12),rgba(76,199,240,.16));
  display:grid;place-items:center;margin-bottom:18px;font-size:20px;
}

/* translation showcase */
.showcase{
  background:
    radial-gradient(700px 380px at 90% 0%, rgba(6,163,218,.16), transparent 55%),
    linear-gradient(180deg,var(--navy),var(--navy-2));
  color:#fff;border-radius:26px;padding:56px 52px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  overflow:hidden;position:relative;
}
@media(max-width:960px){.showcase{grid-template-columns:1fr;padding:40px 26px}}
.showcase h2{color:#fff}
.showcase p{color:#b7c9d9;font-size:16.5px}
.showcase .kicker{color:var(--brand-glow)}
.lang-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.lang-chips span{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:700;color:#cfe9f7;
}
.tr-demo{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:22px;display:grid;gap:12px;
}
.tr-row{display:grid;gap:5px;background:rgba(255,255,255,.05);border-radius:12px;padding:13px 16px}
.tr-row small{font-size:11px;font-weight:800;letter-spacing:.09em;color:#7fd0ef;text-transform:uppercase}
.tr-row span{font-size:14.5px;color:#e8eef4}
.tr-arrow{text-align:center;color:var(--brand-glow);font-size:18px;line-height:1}

/* pricing (redesigned 22 Jul 2026) --------------------------------------
   Three tiers, featured one raised and scaled. Higher tiers use an
   "Everything in X, plus" progression so the value ladder is obvious.
   CTA sits ABOVE the feature list so the button is visible without
   scrolling the card. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
@media(max-width:940px){.plans{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.plan{
  border:1px solid var(--line);border-radius:22px;padding:30px 28px;background:#fff;position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.plan.featured{
  border:2px solid var(--brand);
  background:linear-gradient(180deg,#fff 0%,#f2fbff 100%);
  transform:scale(1.045);z-index:2;
}
@media(max-width:940px){.plan.featured{transform:none}}
.plan.featured::before{ /* gradient top accent bar */
  content:"";position:absolute;top:0;left:24px;right:24px;height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-glow),var(--wa));
}
.tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);color:#fff;white-space:nowrap;
  background:linear-gradient(90deg,var(--brand),var(--brand-glow));
  font-size:12px;font-weight:800;padding:6px 16px;border-radius:999px;letter-spacing:.05em;
  box-shadow:0 8px 20px rgba(6,163,218,.35);
}

.plan-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.plan-ic{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,rgba(6,163,218,.12),rgba(76,199,240,.18));
}
.plan.featured .plan-ic{background:linear-gradient(135deg,rgba(6,163,218,.2),rgba(37,211,102,.18))}
.plan-top h3{margin:0;font-size:21px;letter-spacing:-.01em}
.plan-tag-mini{font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.02em}
.plan .who{color:var(--body);font-size:14px;margin:0 0 18px;min-height:40px;line-height:1.5}

.price{font-size:48px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;
       display:flex;align-items:baseline;gap:2px}
.plan.featured .price{
  background:linear-gradient(90deg,var(--brand),var(--brand-glow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price .per{font-size:16px;font-weight:600;color:var(--body);letter-spacing:0;-webkit-text-fill-color:var(--body)}
.price-note{display:block;font-size:12.5px;color:var(--body);margin:8px 0 20px;opacity:.85}
.plan-cta{width:100%;margin-bottom:8px}

.plus-lead{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);margin:22px 0 14px;display:flex;align-items:center;gap:10px;
}
.plus-lead::after{content:"";flex:1;height:1px;background:var(--line)}
.plan ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.plan.featured ul,.plan ul{margin-top:20px}
.plan li{display:flex;gap:10px;font-size:14.5px;color:var(--body);align-items:flex-start;line-height:1.4}
.plan li b{color:var(--ink);font-weight:800}
.tick{color:var(--brand);font-weight:800;flex:none}
.plan.featured .tick{color:var(--wa)}
.muted-item{opacity:.45}

/* trust row under the plans */
.price-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin:44px auto 0;max-width:820px;
}
.price-trust>span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.pt-ic{width:20px;height:20px;flex:none;border-radius:50%;background:rgba(37,211,102,.15);
       color:#1da851;display:grid;place-items:center;font-size:11px;font-weight:800}
.price-meta{margin-top:26px;font-size:13.5px;color:var(--body);text-align:center;max-width:620px;
            margin-left:auto;margin-right:auto}

/* trust */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.trust{grid-template-columns:1fr}}
.trust>div{
  padding:26px;border-radius:var(--radius);background:var(--soft);
  border:1px solid var(--line);border-top:3px solid var(--brand);
}
.trust-ic{
  display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;
  font-size:22px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(6,163,218,.12),rgba(76,199,240,.18));
}
.trust h4{margin:0 0 8px;font-size:16px}
.trust p{margin:0;font-size:15px;color:var(--body)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:0;margin-bottom:12px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 22px;font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--brand);font-weight:600;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 20px;color:var(--body);font-size:15px}

/* final CTA */
.final{
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(76,199,240,.35), transparent 60%),
    linear-gradient(135deg,var(--brand),#0d7fb0);
  color:#fff;text-align:center;border-radius:26px;padding:64px 30px;
}
.final h2{color:#fff}
.final p{color:rgba(255,255,255,.92);font-size:17px;max-width:540px;margin:0 auto 30px}
.final .btn-primary{background:#fff;color:var(--brand);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.final .btn-primary:hover{background:#f0f9ff}
.final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.final .btn-ghost:hover{border-color:#fff;color:#fff}

/* footer */
footer{background:var(--navy);color:#8fa6ba;padding:56px 0 0;font-size:14px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:40px}
@media(max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot{grid-template-columns:1fr}}
.foot-brand .logo{color:#fff;margin-bottom:14px}
.foot-brand p{margin:0;line-height:1.7}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h5{margin:0 0 4px;color:#fff;font-size:14px;letter-spacing:.03em}
footer a{color:#8fa6ba;text-decoration:none}
footer a:hover{color:var(--brand-glow)}
.foot-base{
  border-top:1px solid rgba(255,255,255,.08);padding-top:22px;padding-bottom:26px;
  font-size:13px;color:#5f7488;
}

/* ---------------- legal (inner) pages ---------------- */
.legal-hero{background:var(--soft);border-bottom:1px solid var(--line);padding:54px 0}
.legal-hero h1{font-size:clamp(28px,4vw,38px);margin:0 0 10px;letter-spacing:-.02em}
.legal-hero .updated{color:var(--body);font-size:15px;margin:0}
.legal-main{padding:46px 0 76px}
.legal-main .inner-wrap{max-width:780px;margin:0 auto;padding:0 24px}
.legal-main h3{font-size:19px;margin:38px 0 12px;letter-spacing:-.01em}
.legal-main h3:first-of-type{margin-top:0}
.legal-main p{color:var(--body);margin:0 0 14px}
.legal-main ul{color:var(--body);margin:0 0 18px;padding-left:22px}
.legal-main li{margin-bottom:9px}
.legal-main a{color:var(--brand)}
.official{
  background:var(--soft);border-left:3px solid var(--brand);padding:16px 20px;
  border-radius:0 10px 10px 0;font-size:14px;color:var(--body);margin:0 0 34px;
}

/* ---------------- reviews ---------------- */
.review{
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .2s,box-shadow .2s;
}
.review{position:relative;overflow:hidden}
.review::before{ /* oversized decorative quote mark */
  content:"\201C";position:absolute;top:-18px;right:14px;font-size:96px;line-height:1;
  font-family:Georgia,"Times New Roman",serif;color:rgba(6,163,218,.1);pointer-events:none;
}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.review .stars{color:#f5a623;font-size:15px;letter-spacing:2px}
.review p{margin:0;color:var(--body);font-size:15px;font-style:italic;position:relative;z-index:1}
.who-r{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
       display:flex;flex-direction:column;gap:2px}
.who-r b{font-size:14.5px;color:var(--ink)}
.who-r span{font-size:13px;color:var(--body)}

/* ---------------- offices ---------------- */
.offices{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:700px){.offices{grid-template-columns:1fr}}
.offices>div{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;display:flex;flex-direction:column;gap:4px;
}
.office-flag{font-size:26px;line-height:1;margin-bottom:8px}
.offices h4{margin:0;font-size:16px}
.offices p{margin:0;font-size:14.5px;color:var(--body)}

/* ---------------- connect (animated hub) ---------------- */
.connect{overflow:hidden}
.connect-stage{
  position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;
  align-items:center;gap:20px;min-height:400px;
}
@media(max-width:860px){
  .connect-stage{grid-template-columns:1fr;justify-items:center;min-height:0}
  .cnodes-in{flex-direction:row!important;flex-wrap:wrap;justify-content:center}
}
.cwires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.cwires path.wire{
  fill:none;stroke:rgba(6,163,218,.35);stroke-width:2;
  stroke-dasharray:7 7;animation:wireflow 1.2s linear infinite;
}
@keyframes wireflow{to{stroke-dashoffset:-14}}
.cnodes-in{display:flex;flex-direction:column;gap:14px;z-index:2;justify-self:start}
.cnode{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;font-weight:700;font-size:14.5px;color:var(--ink);
  box-shadow:0 6px 18px rgba(7,24,46,.08);display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.chub-wrap{display:grid;place-items:center;z-index:2}
.chub{
  position:relative;width:180px;height:180px;border-radius:50%;
  /* The gradient is oversized (200%) and its position is animated, so the blue
     drifts across the sphere. Doing it on the background itself rather than with
     an overlay pseudo-element avoids fighting the stacking order with the logo
     and text inside. */
  background:linear-gradient(150deg,var(--brand-glow),var(--brand) 45%,#0468a0 78%,var(--brand-glow));
  background-size:200% 200%;
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;
  box-shadow:0 22px 52px rgba(6,163,218,.42),inset 0 -12px 28px rgba(0,20,40,.18);
  animation:chubfloat 5.5s ease-in-out infinite,chubshift 9s ease-in-out infinite;
}
@keyframes chubfloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@keyframes chubshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.chub b{font-size:16px}
.chub small{font-size:10.5px;color:rgba(255,255,255,.82);max-width:120px;line-height:1.35}

/* Three rings on the same 3s pulse, each a second behind the last, so the hub
   emits a steady outward pulse instead of one lonely blip. */
.chub-ring{
  position:absolute;inset:-12px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  animation:ringpulse 3s ease-out infinite;
}
.chub-ring.r2{animation-delay:1s}
.chub-ring.r3{animation-delay:2s}
@keyframes ringpulse{
  0%{transform:scale(.92);opacity:.85}
  100%{transform:scale(1.3);opacity:0}
}

/* A green dot orbiting the blue hub — picks up the WhatsApp green of the
   flowing wire dots, so the eye reads hub and wires as one system. */
.chub-orbit{position:absolute;inset:-12px;border-radius:50%;animation:chuborbit 7s linear infinite}
.chub-orbit::before{
  content:"";position:absolute;top:-5px;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;background:var(--wa);
  box-shadow:0 0 12px rgba(37,211,102,.9);
}
@keyframes chuborbit{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .chub,.chub-ring,.chub-orbit{animation:none}
  .chub-ring.r2,.chub-ring.r3{display:none}
}
.cout-wrap{display:grid;place-items:center;z-index:2;justify-self:end}
@media(max-width:860px){.cnodes-in,.cout-wrap{justify-self:center}}
.cnode.cout{
  border-radius:16px;padding:18px 24px;white-space:normal;text-align:left;
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  border:2px solid var(--wa);box-shadow:0 14px 40px rgba(37,211,102,.18);
}
.cnode.cout b{font-size:16px}
.cnode.cout small{font-weight:600;color:var(--body);font-size:13px}

/* ---------------- feature panels (Wati-style, added 22 Jul 2026) ----------------
   Two tinted rounded panels replacing the old problem strip + 3 pillars +
   how-it-works. All their content was folded into the bullet lists here.
   The stat numbers are FACTS (1 number, 24/7 history, EU storage) — never
   add invented performance claims like "3X ROI"; we have no data for them. */
.feat{padding:36px 0}
.feat:first-of-type{padding-top:70px}
.fpanel{border-radius:30px;padding:56px 54px;position:relative;overflow:hidden}
.fpanel-a{background:
  radial-gradient(700px 400px at 88% 0%, rgba(6,163,218,.14), transparent 55%),#eaf6fd}
.fpanel-b{background:
  radial-gradient(700px 400px at 10% 0%, rgba(37,211,102,.13), transparent 55%),#effbf3}
@media(max-width:640px){.fpanel{padding:36px 22px;border-radius:22px}}

.feat-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.feat-b-visual-first{}
.fpanel-b .feat-grid>.fv{order:-1}
@media(max-width:940px){
  .feat-grid{grid-template-columns:1fr}
  .fpanel-b .feat-grid>.fv{order:2}
  .fv{margin-top:36px}
}
.fpanel h2{font-size:clamp(24px,2.9vw,33px)}

/* journey pills — light up in sequence, data moving left to right */
.jflow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:16px 0 24px}
.jp{
  background:#fff;border:1px solid rgba(7,24,46,.12);border-radius:999px;
  padding:7px 16px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  color:var(--ink);animation:jpulse 3.6s infinite;
}
.jp1{animation-delay:0s}.jp2{animation-delay:.9s}.jp3{animation-delay:1.8s}.jp4{animation-delay:2.7s}
.ja{color:var(--brand);font-weight:800;opacity:.5;font-style:normal}
@keyframes jpulse{
  0%,22%,100%{border-color:rgba(7,24,46,.12);color:var(--ink);box-shadow:none;transform:none}
  8%{border-color:var(--brand);color:var(--brand);
     box-shadow:0 8px 20px rgba(6,163,218,.3);transform:translateY(-2px)}
}
.fpanel-b .ja{color:#1da851}
.fpanel-b .jp{animation-name:jpulse-b}
@keyframes jpulse-b{
  0%,22%,100%{border-color:rgba(7,24,46,.12);color:var(--ink);box-shadow:none;transform:none}
  8%{border-color:#1da851;color:#157a3c;
     box-shadow:0 8px 20px rgba(37,211,102,.3);transform:translateY(-2px)}
}

/* check bullets */
.feat-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.feat-list li{display:flex;gap:11px;font-size:15.5px;color:var(--body);line-height:1.55}
.feat-list .ck{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:2px;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;
  background:var(--brand);
}
.fpanel-b .ck{background:#1da851}
.feat-list b{color:var(--ink)}

/* fact strip — sits BELOW the grid, spanning the full panel width, so the
   panel closes with a clean divider row instead of leaving a hole under the
   shorter visual column. */
.fstats{display:flex;flex-wrap:wrap;gap:16px 0;margin-top:42px;
        border-top:1px solid rgba(7,24,46,.1);padding-top:24px}
.fstat{position:relative;padding:0 26px}
.fstat:first-child{padding-left:0}
.fstat+.fstat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
                      background:rgba(7,24,46,.12)}
.fstat b{display:block;font-size:26px;font-weight:800;color:var(--brand);
         letter-spacing:-.02em;line-height:1;margin-bottom:6px}
.fpanel-b .fstat b{color:#1da851}
.fstat span{display:block;font-size:13px;color:var(--body);max-width:150px;line-height:1.4}
/* On phones the three facts wrap; without this the vertical dividers become
   orphan bars floating beside the wrapped rows. Drop dividers + left padding
   so they stack flush. */
@media(max-width:600px){
  .fstats{gap:15px}
  .fstat{padding:0}
  .fstat+.fstat::before{display:none}
}

/* visual column: white card + glow ring + floating chips */
.fv{position:relative;display:grid;place-items:center;min-height:340px}
.fv-ring{position:absolute;width:min(360px,95%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(6,163,218,.17),transparent 65%)}
.fpanel-b .fv-ring{background:radial-gradient(circle,rgba(37,211,102,.17),transparent 65%)}
.fv-card{position:relative;z-index:2;background:#fff;border-radius:20px;
  box-shadow:0 24px 60px rgba(7,24,46,.16);padding:20px;width:min(320px,100%)}
.fv-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fv-ava{width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-glow));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
.fv-head b{font-size:14.5px;color:var(--ink);display:block;line-height:1.3}
.fv-head small{font-size:12px;color:var(--body)}
.fv-msg{border-radius:12px;padding:9px 13px;font-size:13.5px;line-height:1.45;
        margin-bottom:8px;max-width:88%;color:var(--ink)}
.fv-in{background:#f1f5f9}
.fv-out{background:#dcf8e7;color:#0b3d24;margin-left:auto}
.fv-note{font-size:12px;color:var(--body);text-align:center;margin-top:10px;font-weight:600}
.fv-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
        font-size:13.5px;color:var(--body);padding:9px 2px;
        border-bottom:1px dashed var(--line)}
.fv-row b{color:var(--ink)}

.fchip{
  position:absolute;z-index:3;background:#fff;border-radius:13px;
  box-shadow:0 14px 34px rgba(7,24,46,.18);padding:9px 14px;
  font-size:12.5px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  animation:floaty 5.5s ease-in-out infinite;
}
.fchip small{display:block;font-weight:600;color:var(--body);font-size:11px}
.fp1{top:4%;left:-2%}
.fp2{bottom:8%;right:-2%;animation-delay:1.6s}
.fp3{top:42%;right:-6%;animation-delay:2.9s}
@media(max-width:1100px){.fp3{right:0}}
/* On phones the card fills the column, so chips at the corners land ON TOP of
   it (covered the name and cut the note, 22 Jul 2026). Give the .fv vertical
   padding and park one chip in the gap above the card, one below — clear of
   the card entirely. Third chip is dropped; two is plenty on a small screen. */
@media(max-width:600px){
  .fv{min-height:0;padding:58px 2px}
  .fchip{animation:none}
  .fp1{top:2px;left:4px;right:auto;bottom:auto}
  .fp2{bottom:2px;right:4px;top:auto;left:auto}
  .fp3{display:none}
}

/* region belt — same two-copies trick as the hero tools belt */
.rbelt-cap{font-size:13.5px;color:var(--body);font-weight:700;margin:34px 0 12px}
.rbelt{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rtrack{display:flex;gap:10px;width:max-content;animation:hfscroll 30s linear infinite}
.rtrack span{background:#fff;border:1px solid rgba(7,24,46,.08);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .jp,.fchip,.rtrack{animation:none}
}

/* ---------------- what is your business ---------------- */
.bizask{background:
  radial-gradient(600px 300px at 50% 0%, rgba(6,163,218,.07), transparent 60%),#fff}
.biz-chips{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto;
}
.biz-chips a{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:12px 20px;font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s,box-shadow .15s,border-color .15s,color .15s;
}
.biz-chips a:hover{
  transform:translateY(-3px);border-color:var(--brand);color:var(--brand);
  box-shadow:0 10px 26px rgba(6,163,218,.18);
}

/* industries grid (use-case cards, added 22 Jul 2026) */
.ind-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;
}
@media(max-width:960px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ind-grid{grid-template-columns:1fr}}
.ind-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  text-decoration:none;display:block;position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.ind-card::after{ /* corner glow that grows on hover */
  content:"";position:absolute;top:-40px;right:-40px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,163,218,.18),transparent 70%);
  opacity:0;transition:opacity .25s ease,transform .25s ease;
}
.ind-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(6,163,218,.18);
                border-color:rgba(6,163,218,.4)}
.ind-card:hover::after{opacity:1;transform:scale(1.4)}
.ind-ic{
  font-size:26px;display:inline-grid;place-items:center;width:50px;height:50px;border-radius:14px;
  background:linear-gradient(135deg,rgba(6,163,218,.1),rgba(76,199,240,.16));margin-bottom:14px;
  transition:transform .25s ease;
}
.ind-card:hover .ind-ic{transform:scale(1.08) rotate(-4deg)}
.ind-card h3{margin:0 0 7px;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.ind-card p{margin:0;font-size:13.5px;color:var(--body);line-height:1.5}
.ind-fit{max-width:640px;margin:34px auto 0;text-align:center;font-size:15px;color:var(--body);
         line-height:1.6}
.ind-fit b{color:var(--ink)}

/* ============================================================
   Cross-section motion polish (22 Jul 2026)
   One restrained, consistent motion layer tying the sections
   together. Everything here is disabled under reduced-motion
   at the bottom of the block.
   ============================================================ */

/* Developers demo — the two ⇣ arrows pulse downward so the API
   flow reads as live data moving webhook → API → WhatsApp. */
.tr-demo .tr-arrow{animation:tr-flow 1.8s ease-in-out infinite}
@keyframes tr-flow{
  0%,100%{transform:translateY(-3px);opacity:.4}
  50%{transform:translateY(3px);opacity:1}
}

/* Featured pricing plan breathes, so the eye lands on it first. */
.plan.featured{animation:plan-breathe 4s ease-in-out infinite}
@keyframes plan-breathe{
  0%,100%{box-shadow:0 20px 55px rgba(6,163,218,.18)}
  50%{box-shadow:0 26px 68px rgba(6,163,218,.36)}
}
.plan.featured .tag{animation:tag-float 2.6s ease-in-out infinite}
@keyframes tag-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Unified hover: every interactive card lifts into the same brand
   glow, instead of each section hovering slightly differently. */
.card,.plan,.review,.trust>div,.biz-chips a{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease;
}
.card:hover,.review:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 52px rgba(6,163,218,.22);border-color:rgba(6,163,218,.45);
}
.trust>div:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(6,163,218,.16)}
.plan:not(.featured):hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(6,163,218,.22)}

/* FAQ — quieter, but responsive: summary tints on hover, open rows lift. */
.faq summary{transition:color .18s ease}
.faq summary:hover{color:var(--brand)}
.faq details[open]{box-shadow:0 12px 30px rgba(7,24,46,.08);border-color:rgba(6,163,218,.3)}

/* Section kickers get a tiny leading spark that pulses. */
.kicker::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--brand);margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(6,163,218,.5);animation:kick-pulse 2.4s ease-out infinite;
}
.showcase .kicker::before,.fpanel-b .kicker::before{background:var(--wa)}
@keyframes kick-pulse{
  0%{box-shadow:0 0 0 0 rgba(6,163,218,.5)}
  70%{box-shadow:0 0 0 7px rgba(6,163,218,0)}
  100%{box-shadow:0 0 0 0 rgba(6,163,218,0)}
}

@media(prefers-reduced-motion:reduce){
  .tr-demo .tr-arrow,.plan.featured,.plan.featured .tag,.kicker::before{animation:none}
}