/*
Theme Name: iSeller Shopify
Theme URI: https://iseller.com.br
Author: iSeller
Description: Landing page da iSeller (versão Shopify): agência Shopify B2B e B2C, migração, marketplaces, integrações com ERP e IA.
Version: 1.3.2
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: iseller-shopify
*/

/* Todo o CSS do tema. Enfileirado em functions.php com cache-busting por filemtime().
   Organização: tokens > base > componentes > seções (na ordem da home) > rodapé > movimento.
   Cada @media fica junto da seção que ajusta. */

/* =========================================================
   Tokens
   ========================================================= */
:root{
  --color-primary:#215ED5;      /* azul oficial iSeller */
  --color-primary-dark:#1A4BAA;
  --color-primary-light:#EAF1FC;
  --color-primary-bright:#3B7BF0;  /* azul claro dos degradês (botão principal e destaque do hero) */

  --color-accent:#95BF47;       /* verde Shopify: fundos, bordas, linhas e brilhos (contraste baixo, nunca texto) */
  --color-accent-dark:#4A7329;  /* mesmo verde, escurecido para texto e ícones (AA) */
  --color-accent-light:#F2F8EA;

  --color-ink:#0F172A;
  --color-text-secondary:#475569;
  --color-text-tertiary:#94A3B8;
  --color-border:#E2E8F0;
  --color-border-strong:#CBD5E1;
  --color-line:#DCE6F5;         /* borda azulada de cards e painéis */
  --color-connector:#C9D7EE;    /* linhas finas que ligam elementos (camada de integração) */
  --color-surface:#EDF1F9;      /* só elementos internos (bordas, chips, áreas de card) */
  --color-soft:#EDF3FA;         /* fundo de seção azul clarinho */
  --color-white:#FFFFFF;

  --color-hero:#12306B;         /* hero: azul profundo da marca */
  --color-hero-deep:#0B1F4A;
  --color-footer:#12306B;       /* rodapé: azul profundo da marca */
  --color-footer-deep:#0B1F4A;
  --color-footer-bar:#081738;   /* barra inferior, um tom mais escuro */
  --color-on-dark:rgba(255,255,255,.88);
  --color-on-dark-muted:rgba(255,255,255,.72);

  --color-whatsapp:#25D366;     /* verde oficial do WhatsApp (botão fixo) */

  --color-piperun:#FF007F;      /* rosa PipeRun: brilhos, faixa e detalhes (contraste baixo, nunca texto) */
  --color-piperun-dark:#C80064; /* rosa escurecido para texto e botão (AA com branco) */
  --color-piperun-deep:#A30052;
  --color-piperun-light:#FFF0F7;
  --color-piperun-border:#FFC7E2;

  --fs-h1:clamp(32px, 4vw, 46px);
  --fs-h2:clamp(26px, 2.5vw, 32px);
  --fs-h3:18px;
  --fs-lead:clamp(16px, 1.25vw, 17px);

  --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-card:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-card:0 6px 18px rgba(15,23,42,.04);
  --shadow-md:0 8px 24px rgba(15,23,42,.10);
  --shadow-lg:0 20px 48px rgba(15,23,42,.14);

  --font-heading:'Manrope', sans-serif;
  --font-body:'Inter', sans-serif;
  --container-max:1240px;
}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--color-ink); background:var(--color-white); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,svg{display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
:focus-visible{outline:3px solid var(--color-primary); outline-offset:3px;}
.icon{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.icon--sm{width:14px; height:14px;}
.icon--md{width:17px; height:17px;}
.svg-sprite-defs{position:absolute;}
.nowrap{white-space:nowrap;}
.skip-link{position:fixed; top:-100px; left:16px; z-index:1000; background:var(--color-white); color:var(--color-ink); padding:12px 18px; border:2px solid var(--color-primary); border-radius:7px;}
.skip-link:focus{top:12px;}
#conteudo-principal{scroll-margin-top:90px;}
.minimal-page{padding-top:110px; padding-bottom:110px;}

.container{max-width:var(--container-max); margin:0 auto; padding:0 24px;}
.container--narrow{max-width:820px;}
section{padding:96px 0; scroll-margin-top:72px;}
/* Fundos de seção: a home alterna só entre estas duas classes (ver front-page.php) */
.section--white{background:var(--color-white);}
.section--soft{background:var(--color-soft);}
.section--feature{position:relative; padding:116px 0;}
.section--feature .container > .accent-bar{width:56px; height:4px; border-radius:999px; background:var(--color-primary); margin-bottom:24px;}
.section--tight{padding:72px 0;}

/* Tipografia: tamanhos só pelos tokens --fs-* */
h1,h2,h3{font-family:var(--font-heading); color:var(--color-ink); text-wrap:balance;}
h1{font-weight:700; font-size:var(--fs-h1); line-height:1.1; letter-spacing:-.036em; max-width:22ch;}
h2{font-weight:700; font-size:var(--fs-h2); line-height:1.18; letter-spacing:-.03em; max-width:26ch;}
h3{font-size:var(--fs-h3); line-height:1.3; font-weight:600; letter-spacing:-.02em;}
p{color:var(--color-text-secondary); font-size:16px;}
.lead{font-size:var(--fs-lead); line-height:1.65; max-width:560px;}
/* Respiro entre título e subtítulo em todas as seções */
h2 + p{margin-top:14px;}
.measure{max-width:560px;}
.block-title{font-size:24px; line-height:1.25; margin-bottom:8px;}

/* Antetítulo: a pílula segue o fundo da seção (azul clarinho no branco, branca no azul clarinho) */
.tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--color-primary); background:var(--color-surface); padding:7px 16px 7px 12px; border-radius:999px; margin-bottom:20px; letter-spacing:.02em; box-shadow:inset 0 0 0 1px rgba(33,94,213,.03);}
.tag .icon{width:16px; height:16px;}
.tag--accent{color:var(--color-accent-dark); background:var(--color-accent-light);}
.section--soft .tag:not(.tag--accent){background:var(--color-white); box-shadow:inset 0 0 0 1px var(--color-border);}

/* Botões e links */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:16px; border-radius:10px; padding:14px 28px; cursor:pointer; border:1.5px solid transparent; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;}
.btn-lg{padding:16px 32px; font-size:17px;}
.btn-primary{background:linear-gradient(135deg, var(--color-primary-bright), var(--color-primary) 55%, var(--color-primary-dark)); color:var(--color-white); box-shadow:0 8px 18px rgba(33,94,213,.18);}
.btn-primary:hover{background:linear-gradient(135deg, #4C86F5, var(--color-primary-dark) 65%, #123B8C); transform:translateY(-1px); box-shadow:0 12px 24px rgba(33,94,213,.24);}
.btn-secondary{background:var(--color-primary-light); border-color:color-mix(in srgb, var(--color-primary) 28%, var(--color-border-strong)); color:var(--color-primary-dark);}
.btn-secondary:hover{background:var(--color-white); border-color:var(--color-primary); box-shadow:0 6px 16px rgba(33,94,213,.14); transform:translateY(-1px);}
.btn-secondary.btn-accent{background:var(--color-accent-light); color:var(--color-accent-dark); border-color:color-mix(in srgb, var(--color-accent) 45%, var(--color-border-strong));}
.btn-secondary.btn-accent:hover{border-color:var(--color-accent-dark);}
.btn-link{color:var(--color-primary); font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:6px;}
.btn-link:hover{text-decoration:underline;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}
.cta-soft{display:inline-flex; align-items:center; gap:6px; margin-top:32px; font-weight:600; font-size:15px; color:var(--color-primary);}
.cta-soft:hover{text-decoration:underline;}
.cta-soft .icon{width:15px; height:15px;}
.cta-soft--accent{color:var(--color-accent-dark);}
.support-text{font-size:14.5px; color:var(--color-text-tertiary); margin-top:14px; line-height:1.5;}

/* Card de painel (Pagamentos, Integrações): mesma borda, raio e padding */
.capability-panel{border:1px solid var(--color-border); border-radius:var(--radius-card); padding:28px; background:var(--color-white); box-shadow:0 10px 28px rgba(15,23,42,.035);}
.capability-panel h3{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:var(--fs-h3); font-weight:700; color:var(--color-ink);}
.capability-panel h3 .icon{width:20px; height:20px; color:var(--color-primary);}
.capability-panel p{font-size:14px; line-height:1.6;}

/* Nome em texto no lugar da logo (enquanto o arquivo em /imagens não existe) */
.logo-name{font:700 12px/1.15 var(--font-heading); color:var(--color-ink); text-align:center; letter-spacing:-.01em;}

/* Moldura de navegador para capturas de tela de projetos reais (B2B, só no desktop) */
.screenshot-frame{margin:0; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--color-border); background:var(--color-white); box-shadow:var(--shadow-lg);}
.screenshot-frame__bar{display:flex; gap:6px; padding:11px 14px; background:var(--color-surface); border-bottom:1px solid var(--color-border);}
.screenshot-frame__bar i{width:9px; height:9px; border-radius:50%; background:var(--color-border-strong);}
.screenshot-frame__img{display:block; width:100%; height:auto;}
.screenshot-frame__empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; aspect-ratio:16/10; padding:24px; text-align:center; background:linear-gradient(180deg,var(--color-white),var(--color-primary-light));}
.screenshot-frame__empty strong{font:700 16px/1.25 var(--font-heading); color:var(--color-ink);}
.screenshot-frame__empty span{font-size:12.5px; color:var(--color-text-tertiary); word-break:break-word;}


/* Trilha — linha de conexão (Base.com e integração personalizada) */
.trail{position:relative; display:flex; justify-content:space-between; gap:12px; margin:40px 0 4px;}
.trail::before{content:""; position:absolute; top:22px; left:7%; right:7%; height:2px; background:var(--color-border-strong); z-index:0;}
.trail::after{content:""; position:absolute; top:19.5px; left:7%; width:7px; height:7px; border-radius:50%; background:var(--color-primary); box-shadow:0 0 6px 1.5px rgba(33,94,213,.45); z-index:0; animation:trail-pulse-x 9s linear infinite; pointer-events:none;}
.trail--accent::before{background:color-mix(in srgb, var(--color-accent) 35%, var(--color-border-strong));}
.trail--accent::after{background:var(--color-accent); box-shadow:0 0 6px 1.5px color-mix(in srgb, var(--color-accent) 55%, transparent);}
.trail-node{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; z-index:1; padding:0 4px;}
.trail-node h4{font-family:var(--font-heading); font-size:14px; font-weight:700; color:var(--color-ink);}
.trail-node__detail{font-size:12px; color:var(--color-text-tertiary);}
.trail-dot{position:relative; width:44px; height:44px; border-radius:50%; background:var(--color-white); border:2px solid var(--color-primary); display:flex; align-items:center; justify-content:center; color:var(--color-primary); flex-shrink:0; box-shadow:var(--shadow-sm);}
.trail-dot::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; border:1.5px solid var(--color-primary); opacity:0; animation:integration-ping 2.6s ease-out infinite; pointer-events:none;}
.trail-node:nth-child(2) .trail-dot::before{animation-delay:.6s;}
.trail-node:nth-child(3) .trail-dot::before{animation-delay:1.2s;}
.trail-dot .icon{width:19px; height:19px;}
.trail-dot img{width:26px; height:26px; object-fit:contain;}
.trail--accent .trail-dot{border-color:var(--color-accent); color:var(--color-accent-dark);}
.trail--accent .trail-dot::before{border-color:var(--color-accent);}
.trail-dot--wide{width:112px; border-radius:999px; padding:0 16px;}
.trail-dot.trail-dot--wide img{width:auto; height:auto; max-width:100%; max-height:20px;}
.trail-dot--wide .logo-name{white-space:nowrap;}
@keyframes trail-pulse-x{0%{left:7%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:93%; opacity:0;}}
@keyframes trail-pulse-y{0%{top:0%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{top:96%; opacity:0;}}
@keyframes integration-ping{0%{transform:scale(1); opacity:.45;} 100%{transform:scale(1.4); opacity:0;}}
@keyframes integration-flow{to{stroke-dashoffset:-30;}}
@media (max-width:960px){
  .trail{flex-direction:column; align-items:flex-start; gap:26px; margin:32px 0 4px;}
  .trail::before{top:0; bottom:0; left:21px; right:auto; width:2px; height:auto;}
  .trail::after{top:0; left:17.5px; animation-name:trail-pulse-y;}
  .trail-node{flex-direction:row; text-align:left; gap:16px; padding:0; width:100%;}
}

/* =========================================================
   Header e navegação
   ========================================================= */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--color-line); box-shadow:0 6px 20px rgba(33,94,213,.06);}
/* Faixa fina no topo com o degradê da marca */
header::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--color-primary-dark), var(--color-primary) 45%, var(--color-primary-bright) 80%, var(--color-accent));}
header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px;}
.logo{display:inline-flex; align-items:center; font-family:var(--font-heading); font-weight:800; font-size:20px; color:var(--color-ink);}
.iseller-logo-img{display:block; height:auto; object-fit:contain; flex-shrink:0;}
/* Logo do cabeçalho (proporção ≈ 3,17:1) */
.logo.brandword{flex:0 0 120px; width:120px; max-width:120px; min-width:0; font-family:Manrope,Inter,sans-serif; font-size:clamp(1.55rem,2.1vw,2rem); line-height:1; white-space:nowrap;}
/* A logo do rodapé usa o mesmo tamanho da do cabeçalho */
.logo.brandword .iseller-logo-img,.logo--footer .iseller-logo-img{width:120px; max-width:120px; max-height:38px; flex:none;}
.logo--footer{margin-bottom:12px;}
nav.main-nav{min-width:0;}
nav.main-nav ul{display:flex; gap:clamp(12px,1.5vw,24px);}
nav.main-nav a{font-size:14px; font-weight:500; color:color-mix(in srgb, var(--color-ink) 78%, var(--color-text-secondary)); white-space:nowrap;}
nav.main-nav a:hover{color:var(--color-primary);}
.header-actions{display:flex; align-items:center; gap:20px; flex-shrink:0;}
.header-actions .btn{padding:10px 22px; font-size:15px;}
.menu-icon{display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--color-ink); font-family:inherit; font-size:24px; line-height:1; background:none; border:none; cursor:pointer;}
.mobile-ctas{display:none;}
/* Menu em modo celular/tablet até 1220px (9 itens não cabem ao lado do botão) */
@media (min-width:1221px){
  nav.main-nav a{position:relative; padding:6px 0;}
  nav.main-nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;}
  nav.main-nav a:hover::after{transform:scaleX(1);}
}
@media (max-width:1220px){
  nav.main-nav{position:fixed; top:72px; left:0; right:0; height:calc(100vh - 72px); background:var(--color-white); padding:32px 24px; transform:translateY(-110%); transition:transform .2s ease; z-index:40; overflow-y:auto;}
  nav.main-nav:not(.is-open){visibility:hidden;}
  nav.main-nav.is-open{transform:translateY(0); box-shadow:0 14px 25px rgba(15,23,42,.16);}
  nav.main-nav ul{flex-direction:column; gap:0;}
  nav.main-nav ul li{border-bottom:1px solid var(--color-border);}
  nav.main-nav ul li a{display:block; padding:16px 0; font-size:15px;}
  nav.main-nav .mobile-ctas{display:flex; flex-direction:column; gap:12px; margin-top:24px;}
  nav.main-nav .mobile-ctas .btn-primary{color:var(--color-white); font-size:16px;}
  .menu-icon{display:inline-flex;}
  .header-actions .btn-primary{display:none;}
  body.iseller-menu-open{overflow:hidden;}
}
@media (max-width:960px){
  .logo.brandword{flex-basis:108px; width:108px; max-width:108px;}
  .logo.brandword .iseller-logo-img,.logo--footer .iseller-logo-img{width:108px; max-width:108px; max-height:34px;}
}
@media (max-width:400px){
  .logo.brandword{flex-basis:100px; width:100px; max-width:100px;}
  .logo.brandword .iseller-logo-img,.logo--footer .iseller-logo-img{width:100px; max-width:100px; max-height:32px;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative; overflow:hidden; padding:72px 0 92px; color:var(--color-white); background:radial-gradient(ellipse 50% 70% at 80% 45%, rgba(59,123,240,.45), transparent 70%), radial-gradient(ellipse 30% 40% at 100% 100%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%), radial-gradient(ellipse 45% 60% at 0% 0%, rgba(59,123,240,.22), transparent 70%), linear-gradient(135deg, var(--color-hero-deep) 0%, var(--color-hero) 55%, var(--color-primary-dark) 100%);}
.hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px); background-size:26px 26px; opacity:.14; -webkit-mask-image:linear-gradient(to bottom, black, transparent 75%); mask-image:linear-gradient(to bottom, black, transparent 75%); pointer-events:none;}
.hero .container{position:relative; display:grid; grid-template-columns:.92fr 1.08fr; gap:72px; align-items:center;}
.hero h1{margin-bottom:24px; max-width:22ch; color:var(--color-white);}
/* Destaque do título: degradê de azuis claros, para brilhar no fundo azul */
.hero-highlight{white-space:nowrap; background:linear-gradient(90deg, color-mix(in srgb, var(--color-primary-bright) 70%, var(--color-white)), color-mix(in srgb, var(--color-primary-bright) 30%, var(--color-white))); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .lead{max-width:500px; color:rgba(255,255,255,.86);}
/* Antetítulo do hero em pílula translúcida branca */
.hero .tag{color:var(--color-white); background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);}
.hero .cta-row{margin-top:26px;}
/* Botões do hero: principal branco e secundário contornado, para contrastar com o azul */
.hero .btn-primary{background:var(--color-white); color:var(--color-primary-dark); box-shadow:0 10px 26px rgba(4,14,40,.35);}
.hero .btn-primary:hover{background:var(--color-primary-light); box-shadow:0 14px 30px rgba(4,14,40,.42);}
.hero .btn-secondary{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); color:var(--color-white);}
.hero .btn-secondary:hover{background:rgba(255,255,255,.16); border-color:var(--color-white); box-shadow:none;}
.hero .support-text{max-width:520px; margin-top:13px; font-size:13px; color:rgba(255,255,255,.66);}
.hero-visual{position:relative; max-width:640px; width:100%; justify-self:end;}
/* Brilho azul atrás do notebook */
.hero-visual::before{content:""; position:absolute; inset:4% 0 0; border-radius:50%; background:radial-gradient(circle, rgba(59,123,240,.55), rgba(33,94,213,.18) 45%, transparent 70%); filter:blur(28px); pointer-events:none;}
/* O PNG tem ~9% de margem transparente de cada lado: a imagem passa disso para o notebook ocupar a coluna inteira */
.hero-image{position:relative; display:block; width:118%; max-width:none; height:auto; margin:0 -9%; filter:drop-shadow(0 30px 40px rgba(2,8,24,.45));}
/* Responsivo: coluna única alinhada à esquerda, sem a imagem */
@media (max-width:960px){
  .hero{padding:58px 0 74px;}
  .hero .container{grid-template-columns:1fr; padding-top:8px;}
  .hero-visual{display:none;}
}
@media (max-width:560px){
  .hero{padding:42px 0 62px;}
  .hero h1{margin-bottom:17px;}
  .hero .cta-row{margin-top:22px;}
}

/* =========================================================
   Cases de sucesso: faixa compacta com logos girando sem parar.
   A lista vem duplicada no HTML; o trilho anda metade da largura e recomeça sem salto.
   O giro não para (nem com o mouse em cima), exceto para quem pede menos movimento.
   ========================================================= */
.cases-section{padding:48px 0 52px; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);}
.cases-head{display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; margin-bottom:24px;}
.cases-head .tag{margin-bottom:0;}
.cases-head h2{font-size:20px; max-width:none;}
.cases-marquee{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);}
.cases-track{display:flex; width:max-content; animation:cases-scroll 45s linear infinite;}
.cases-list{display:flex;}
.case-logo{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:150px; height:76px; margin-right:40px;}
.case-logo img{max-width:124px; max-height:72px; width:auto; height:auto; object-fit:contain;}
.case-logo .logo-name{font-size:14px; color:var(--color-text-secondary);}
.case-logo--sm img{max-width:92px;}
.case-logo--lg img{max-width:148px;}
.case-logo--xl{width:180px;}
.case-logo--xl img{max-width:176px;}
@keyframes cases-scroll{to{transform:translateX(-50%);}}
@media (max-width:560px){
  .cases-section{padding:36px 0 40px;}
  .cases-head h2{font-size:18px;}
  .case-logo{width:116px; height:60px; margin-right:28px;}
  .case-logo img{max-width:96px; max-height:58px;}
  .case-logo--sm img{max-width:72px;}
  .case-logo--lg img{max-width:112px;}
  .case-logo--xl{width:140px;}
  .case-logo--xl img{max-width:134px;}
}

/* =========================================================
   Soluções
   ========================================================= */
#solucoes{padding:78px 0;}
.solucoes-head{max-width:640px; margin-bottom:48px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.card{display:flex; flex-direction:column; height:100%; background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:28px; transition:box-shadow .2s ease, transform .2s ease;}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
#solucoes .card{padding:24px; border-color:#E8EDF5;}
#solucoes .card:hover{box-shadow:0 12px 30px rgba(15,23,42,.07);}
.card-icon{width:44px; height:44px; border-radius:var(--radius-md); background:var(--color-primary-light); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.card-icon .icon{color:var(--color-primary);}
.card h3{margin-bottom:8px;}
.card p{flex:1; font-size:14px; margin-bottom:14px;}
/* Desktop: largura que deixa os 4 textos de Soluções com exatamente 3 linhas */
@media (min-width:1221px){#solucoes .card p{max-width:15.5em;}}
@media (max-width:1220px){.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){
  .solucoes-head{margin-bottom:28px;}
  .grid-4{grid-template-columns:1fr; gap:10px;}
  #solucoes .card{display:grid; grid-template-columns:36px 1fr; column-gap:14px; padding:16px;}
  .card-icon{grid-row:1 / 4; width:36px; height:36px; margin:0;}
  .card h3{font-size:16px; margin-bottom:4px;}
  .card p{font-size:13.5px; margin-bottom:8px;}
  .card .btn-link{font-size:13.5px;}
}

/* =========================================================
   Desafios
   ========================================================= */
.customer-pains{padding:76px 0;}
.customer-pains .pain-intro{max-width:760px; margin:0 0 28px;}
.customer-pains .pain-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.customer-pains .pain-item{display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:var(--color-white); border:1px solid var(--color-border); border-radius:14px; padding:22px; color:var(--color-ink); box-shadow:var(--shadow-card); transition:box-shadow .2s, transform .2s;}
.customer-pains .pain-item:hover{box-shadow:0 12px 26px rgba(15,23,42,.09); transform:translateY(-2px);}
.customer-pains .pain-number{font-size:12px; color:var(--color-accent-dark); font-weight:800; flex:none; letter-spacing:.08em;}
.customer-pains .pain-item strong{display:block; margin-bottom:5px; font-size:16px;}
.customer-pains .pain-item small{display:block; color:var(--color-text-secondary); line-height:1.5; font-size:13px;}
.customer-pains .pain-footer{margin-top:22px; font-size:14px;}
@media (max-width:1220px){.customer-pains .pain-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:960px){.customer-pains .pain-item{padding:18px;} .customer-pains .pain-item strong{font-size:15px;}}


/* =========================================================
   Pilares: B2B e Dropshipping
   ========================================================= */
.pillar .container{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.pillar p.lead{margin:14px 0 24px;}
.feature-list{display:flex; flex-direction:column; gap:13px; margin-bottom:8px;}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--color-ink); font-weight:500;}
.feature-list li .icon{width:19px; height:19px; color:var(--color-primary); margin-top:1px;}
.segment-badges{position:relative;}
.pillar .container.b2b-benefits-wrap{position:relative; display:block; margin-top:84px; padding-top:72px;}
/* Linha que separa o B2B dos benefícios, sumindo em degradê nas laterais */
.pillar .container.b2b-benefits-wrap::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent);}
.b2b-benefits-head{max-width:720px; margin-bottom:36px;}
.b2b-benefits-title{margin-bottom:12px; font-size:24px; line-height:1.2;}
.pillar .b2b-benefits-head p.lead{margin:0;}
.b2b-benefits-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
@media (max-width:1220px){.b2b-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.b2b-benefit{padding:26px; border-radius:18px; background:var(--color-white); border:1px solid var(--color-border); box-shadow:0 8px 24px rgba(15,23,42,.05); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.b2b-benefit:hover{transform:translateY(-3px); border-color:#C6D5F2; box-shadow:0 16px 34px rgba(15,23,42,.09);}
.b2b-benefit__icon{display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:16px; border-radius:12px; background:var(--color-accent-light); color:var(--color-accent-dark);}
.b2b-benefit h3{margin-bottom:8px;}
.b2b-benefit p{font-size:14.5px; line-height:1.6;}
.b2b-benefits-note{margin-top:22px; font-size:13px; color:var(--color-text-tertiary);}

/* Dropshipping: fluxo, caixas e destaque */
.flow{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:44px 0 40px;}
.flow-step{display:flex; flex-direction:column; align-items:center; gap:10px; flex:1;}
.flow-step span{font-size:13.5px; font-weight:600; color:var(--color-ink); text-align:center;}
.flow-icon{width:56px; height:56px; border-radius:50%; background:var(--color-white); border:1.5px solid var(--color-border-strong); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary); animation:flow-pulse 4s ease-in-out infinite;}
.flow-icon--brand{border-color:var(--color-primary);}
.flow-icon--brand img{width:30px; height:30px; object-fit:contain;}
.flow-arrow{color:var(--color-border-strong); flex:0 0 auto;}
.flow-arrow .icon{width:20px; height:20px; animation:flow-arrow-move 4s ease-in-out infinite;}
.flow-arrow:nth-child(2) .icon{animation-delay:.5s;}
.flow-step:nth-child(3) .flow-icon{animation-delay:1s;}
.flow-arrow:nth-child(4) .icon{animation-delay:1.5s;}
.flow-step:nth-child(5) .flow-icon{animation-delay:2s;}
.flow-arrow:nth-child(6) .icon{animation-delay:2.5s;}
.flow-step:nth-child(7) .flow-icon{animation-delay:3s;}
@keyframes flow-pulse{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(33,94,213,0);} 8%{transform:scale(1.1); box-shadow:0 0 0 7px rgba(33,94,213,.14);} 20%{transform:scale(1); box-shadow:0 0 0 0 rgba(33,94,213,0);}}
@keyframes flow-arrow-move{0%,100%{transform:translateX(0); color:var(--color-border-strong);} 8%{transform:translateX(5px); color:var(--color-primary);} 20%{transform:translateX(0); color:var(--color-border-strong);}}
.split-2{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:8px 0 32px;}
.split-box{background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:26px;}
.split-box h3{margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.split-box h3 .icon{color:var(--color-primary); width:20px; height:20px;}
.highlight-line{display:flex; align-items:center; gap:12px; background:var(--color-primary-light); border-radius:var(--radius-md); padding:16px 20px; font-size:14px; font-weight:600; color:var(--color-primary); margin-bottom:8px;}
.highlight-line .icon{width:20px; height:20px; flex-shrink:0;}
@media (max-width:960px){
  /* Responsivo: B2B em coluna única, sem a captura */
  .pillar .container{grid-template-columns:1fr; gap:28px;}
  .segment-badges{display:none;}
  .feature-list li{font-size:14px;}
  .pillar .container.b2b-benefits-wrap{margin-top:56px; padding-top:48px;}
  .b2b-benefits-title{font-size:22px;}
  .split-2{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .pillar .container.b2b-benefits-wrap{margin-top:40px; padding-top:32px;}
  .b2b-benefits-head{margin-bottom:20px;}
  .b2b-benefit{padding:18px;}
  .b2b-benefit__icon{width:38px; height:38px; margin-bottom:12px;}
  .b2b-benefit h3{font-size:16px;}
  .b2b-benefit p{font-size:13.5px;}
  .flow{gap:6px; margin:32px 0 28px; align-items:flex-start;}
  .flow-arrow{display:none;}
  .flow-icon{width:46px; height:46px;}
  .flow-icon .icon{width:19px; height:19px;}
  .flow-icon--brand img{width:24px; height:24px;}
  .flow-step span{font-size:12px; line-height:1.35;}
}

/* =========================================================
   Marketplaces
   ========================================================= */
.market-ops{display:grid; grid-template-columns:.92fr 1.08fr; gap:28px; margin-top:46px; align-items:stretch;}
.market-network,.ops-console{position:relative; border:1px solid var(--color-line); border-radius:var(--radius-card); overflow:hidden; min-height:410px;}
.market-network{padding:30px; background:radial-gradient(circle at 50% 46%,rgba(33,94,213,.13),transparent 28%), linear-gradient(180deg,#fff,#F9FBFF);}
.market-network::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(33,94,213,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(33,94,213,.08) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 88%); pointer-events:none;}
.market-network__hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:92px; height:92px; border-radius:24px; background:var(--color-white); border:1px solid var(--color-line); display:flex; align-items:center; justify-content:center; box-shadow:0 20px 40px rgba(33,94,213,.16); z-index:3;}
.market-network__hub img{width:40%; height:40%; object-fit:contain;}
.market-network__hub .logo-name{padding:0 6px;}
.market-network__hub::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; border:1.5px solid var(--color-primary); opacity:0; animation:integration-ping 2.6s ease-out infinite; pointer-events:none;}
.market-orbit{position:absolute; inset:0; z-index:2;}
.market-badge{position:absolute; display:flex; align-items:center; justify-content:center; padding:11px 14px; border-radius:999px; background:var(--color-white); border:1px solid #DCE5F2; box-shadow:0 8px 20px rgba(15,23,42,.06); white-space:nowrap;}
.market-badge img{width:84px; height:24px; object-fit:contain;}
.market-badge:nth-child(1){left:7%; top:15%;} .market-badge:nth-child(2){right:9%; top:12%;} .market-badge:nth-child(3){left:4%; top:46%;} .market-badge:nth-child(4){right:4%; top:44%;} .market-badge:nth-child(5){left:13%; bottom:11%;} .market-badge:nth-child(6){right:16%; bottom:10%;} .market-badge:nth-child(7){left:50%; top:7%; transform:translateX(-50%);}
.market-links{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
.market-links line{stroke-dasharray:2.5 5; animation:integration-flow 1.6s linear infinite;}
.market-links line:nth-of-type(2){animation-delay:.25s;} .market-links line:nth-of-type(3){animation-delay:.5s;} .market-links line:nth-of-type(4){animation-delay:.75s;} .market-links line:nth-of-type(5){animation-delay:1s;} .market-links line:nth-of-type(6){animation-delay:1.25s;} .market-links line:nth-of-type(7){animation-delay:1.5s;}
.ops-console{background:var(--color-white); box-shadow:0 20px 42px rgba(15,23,42,.07);}
.ops-console__head{height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--color-border);}
.ops-console__head strong{font:700 14px var(--font-heading);}
.ops-status{display:inline-flex; align-items:center; gap:7px; font-size:11px; color:#4B647E; background:#F6F9FD; border:1px solid #E1E8F2; border-radius:999px; padding:6px 9px;}
.ops-status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--color-accent);}
.ops-console__body{padding:18px; display:grid; gap:10px;}
.order-card{display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:12px; border:1px solid #E7ECF3; border-radius:12px; background:var(--color-white);}
.order-channel{width:38px; height:38px; border-radius:10px; background:#EEF4FD; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.order-channel img{width:22px; height:22px; object-fit:contain;}
.order-channel .icon{width:18px; height:18px; color:var(--color-primary);}
.order-info strong{display:block; font-size:12px; margin-bottom:4px;}
.order-info span{display:block; font-size:10px; color:#8290A3;}
.order-tag{font-size:10px; padding:5px 8px; border-radius:999px; background:var(--color-accent-light); color:var(--color-accent-dark); font-weight:700;}
.market-copyline{margin-top:20px; max-width:680px;}

/* Farmácias e cosméticos (Base.com) */
.expansion-block{position:relative; margin-top:38px; padding:36px 40px; border-radius:var(--radius-card); background:linear-gradient(100deg,var(--color-white) 0%,color-mix(in srgb, var(--color-accent-light) 55%, var(--color-white)) 100%); border:1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-white)); border-left:none; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px;}
.expansion-block::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--color-accent),var(--color-accent));}
.expansion-block__head{max-width:560px; margin-bottom:4px;}
.expansion-block .tag--accent{margin-bottom:14px;}
.expansion-block .trail{max-width:460px; margin:0;}
.expansion-block .marketplace-ecosystem{grid-column:1/-1;}
.marketplace-ecosystem{margin-top:22px; padding-top:18px; border-top:1px solid color-mix(in srgb, var(--color-accent) 15%, var(--color-white));}
.marketplace-ecosystem__label{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-tertiary); margin-bottom:12px;}
.marketplace-logo-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.marketplace-logo-slot{height:42px; min-width:78px; padding:0 16px; border-radius:12px; border:1px solid #E5EAF1; background:var(--color-white); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(15,23,42,.035); color:#A0AEC0; font-size:10px; font-weight:700; letter-spacing:.035em; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.marketplace-logo-slot img{height:24px; width:auto; max-width:56px; object-fit:contain;}
.marketplace-logo-slot .logo-name{font-size:11px; white-space:nowrap; color:var(--color-text-secondary);}
.marketplace-logo-slot:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--color-accent) 40%, var(--color-white)); box-shadow:0 7px 16px rgba(15,23,42,.06);}
.marketplace-logo-slot--more{border-style:dashed; border-color:color-mix(in srgb, var(--color-accent) 45%, white); background:var(--color-accent-light); color:var(--color-accent-dark); min-width:118px; gap:6px;}
.marketplace-logo-slot--more .icon{width:14px; height:14px;}
@media (max-width:960px){
  .market-ops,.expansion-block{grid-template-columns:1fr;}
  .market-ops{margin-top:32px;}
  .market-network,.ops-console{min-height:350px;}
  .market-badge{padding:8px 10px;}
  .market-badge img{width:66px; height:19px;}
  /* Trilha vertical centralizada no card, com a linha passando pelo meio das pílulas */
  .expansion-block .trail{width:fit-content; max-width:none; margin:16px auto 0;}
  .expansion-block .trail::before{left:56px;}
  .expansion-block .trail::after{left:52.5px;}
  .marketplace-logo-row{gap:8px;}
  .marketplace-logo-slot{min-width:72px; height:40px; padding:0 13px;}
}
@media (max-width:560px){
  .market-ops{gap:16px;}
  .market-network{min-height:330px; padding:18px;}
  .market-network__hub{width:70px; height:70px; border-radius:20px;}
  .market-badge:nth-child(1){left:5%; top:12%;} .market-badge:nth-child(2){right:4%; top:13%;} .market-badge:nth-child(3){left:2%; top:45%;} .market-badge:nth-child(4){right:2%; top:46%;} .market-badge:nth-child(5){left:8%; bottom:9%;} .market-badge:nth-child(6){right:9%; bottom:9%;} .market-badge:nth-child(7){top:3%;}
  .ops-console__body{padding:12px;}
  .order-card{grid-template-columns:32px 1fr auto; padding:10px;}
  .order-channel{width:32px; height:32px;}
  .order-channel img{width:18px; height:18px;}
  .expansion-block{margin-top:28px; padding:24px 18px;}
  .marketplace-ecosystem{margin-top:18px; padding-top:16px;}
  .marketplace-logo-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .marketplace-logo-slot{width:100%; min-width:0; height:40px; padding:0 8px;}
  .marketplace-logo-slot--more{grid-column:1/-1;}
}

/* =========================================================
   Pagamentos e Frete: dois cards simétricos.
   O subgrid alinha título, texto, rótulos e grades entre os dois cards.
   ========================================================= */
.commerce-journey{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(6,auto); column-gap:22px; row-gap:16px; margin-top:42px;}
.commerce-journey .capability-panel{display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; align-content:start; background:var(--color-soft);}
.integration-kind{margin:22px 0 10px; font-size:11px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; color:var(--color-text-secondary);}
.brand-logo-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
.native-grid{display:grid; justify-items:start; gap:8px;}
.integration-brand-pill{display:flex; align-items:center; gap:8px; border:1px solid #DCE5F2; border-radius:11px; background:var(--color-white); color:var(--color-ink); font-size:12px; font-weight:700; line-height:1.3; box-shadow:0 3px 10px rgba(15,23,42,.025);}
.integration-brand-pill--logo{height:48px; justify-content:center; padding:0 10px;}
.integration-brand-pill--logo img{max-width:100%; max-height:22px; width:auto; height:auto; object-fit:contain;}
.integration-brand-pill--logo .logo-name{font-size:12.5px;}
.integration-brand-pill--sm img{max-height:16px;}
.integration-brand-pill--lg img{max-height:30px;}
.integration-brand-pill--native{height:38px; padding:0 10px 0 6px; white-space:nowrap; background:var(--color-primary-light); border-color:color-mix(in srgb, var(--color-primary) 20%, var(--color-white)); color:var(--color-primary-dark);}
.integration-logo-placeholder{width:24px; height:24px; flex:0 0 24px; border:1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-white)); border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--color-white); color:var(--color-primary);}
.integration-logo-placeholder .icon{width:13px; height:13px;}
@media (max-width:960px){
  .commerce-journey{grid-template-columns:1fr; grid-template-rows:repeat(12,auto); margin-top:32px;}
}
@media (max-width:560px){
  .commerce-journey .capability-panel{padding:20px 16px;}
  .brand-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* =========================================================
   Integrações: dois cards da mesma altura
   ========================================================= */
#integracoes{padding:92px 0;}
.integration-layer{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; margin-top:42px;}
/* Card de sistemas: 2 colunas no desktop, com as linhas esticando até a altura do card vizinho */
.capability-panel--systems{display:flex; flex-direction:column;}
.system-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; flex:1; gap:10px; margin-top:18px;}
.system-card{display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:6px 10px; border:1px solid #DFE7F2; border-radius:12px; background:var(--color-white); font-size:12px; font-weight:700; text-align:center; box-shadow:0 3px 10px rgba(15,23,42,.03);}
.system-card .icon{width:15px; height:15px; color:var(--color-text-tertiary);}
.system-card--logo img{max-height:20px; width:auto; max-width:88%; object-fit:contain;}
.system-card--sm img{max-height:18px;}
.system-card--lg img{max-height:26px;}
.system-card--logo .logo-name{font-size:13px;}
.integration-core{display:flex; flex-direction:column;}
.integration-core__hub{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:14px;}
.integration-core__mark{position:relative; display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:20px; background:var(--color-white); border:1px solid var(--color-line); box-shadow:0 12px 28px rgba(33,94,213,.16);}
.integration-core__mark img{width:36px; height:36px; object-fit:contain;}
.integration-core__mark::before{content:""; position:absolute; inset:0; border-radius:inherit; border:1.5px solid var(--color-primary); opacity:0; animation:integration-ping 2.6s ease-out infinite; pointer-events:none;}
.integration-core__label{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-secondary);}
/* Portas em 2x2 ligadas ao hub: uma linha vertical central e um ramo curto até cada pílula */
.integration-ports{position:relative; display:grid; grid-template-columns:1fr 1fr; column-gap:32px; row-gap:12px; margin-top:22px;}
.integration-ports::before{content:""; position:absolute; left:50%; top:-22px; bottom:20px; width:1px; transform:translateX(-50%); background:var(--color-connector);}
.integration-port{position:relative; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; background:var(--color-white); border:1px solid var(--color-line); font-size:12px; font-weight:700; box-shadow:0 4px 12px rgba(15,23,42,.04);}
.integration-port::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--color-accent); flex-shrink:0;}
.integration-port::after{content:""; position:absolute; top:50%; width:17px; height:1px; background:var(--color-connector);}
.integration-port:nth-child(odd)::after{left:100%;}
.integration-port:nth-child(even)::after{right:100%;}

/* Integração personalizada / API REST */
.strategic-moment{margin-top:56px; padding:48px 40px; border-radius:var(--radius-xl); background:linear-gradient(180deg,var(--color-white),color-mix(in srgb, var(--color-accent-light) 55%, var(--color-white))); border:1px solid var(--color-border); border-top:3px solid var(--color-accent); text-align:center; box-shadow:0 16px 38px rgba(15,23,42,.045);}
.strategic-moment .tag--accent{margin-bottom:16px;}
.strategic-moment .block-title{max-width:620px; margin-left:auto; margin-right:auto;}
.strategic-moment > p.measure{margin-left:auto; margin-right:auto;}
.strategic-moment .trail{max-width:480px; margin:40px auto 8px;}
.strategic-moment .btn{margin-top:28px;}
@media (max-width:960px){
  .integration-layer{grid-template-columns:1fr; margin-top:32px;}
  .system-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .strategic-moment{padding:36px 24px;}
  .strategic-moment .trail{width:fit-content; max-width:none;}
}
@media (max-width:560px){
  .strategic-moment{margin-top:32px; padding:28px 18px;}
  .system-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* =========================================================
   IA — duas colunas: apresentação, provedores e CTA | usos
   ========================================================= */
.ai-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;}
.ai-label{display:block; margin:28px 0 12px; font:800 11px/1.3 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-secondary);}
.ai-uses-col .ai-label{margin-top:0;}
.ai-providers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:420px;}
/* O botão acompanha a largura do grid de provedores para as bordas baterem */
.ai-foot .btn{width:100%; max-width:420px;}
.ai-chip{display:flex; align-items:center; justify-content:center; height:52px; padding:8px 14px; border-radius:12px; background:var(--color-white); border:1px solid var(--color-border); box-shadow:var(--shadow-sm);}
.ai-chip .logo-name{font-size:15px;}
.ai-chip img{max-width:70%; max-height:26px; width:auto; height:auto; object-fit:contain;}
.ai-chip--sm img{max-height:22px;}
.ai-chip--lg img{max-height:32px;}
.ai-foot{margin-top:28px; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.ai-foot .support-text{margin-top:6px; max-width:520px;}
.ai-uses{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.ai-use{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start; padding:22px; border-radius:14px; background:var(--color-white); border:1px solid var(--color-border); box-shadow:var(--shadow-sm);}
.ai-use__icon{display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:12px; border-radius:10px; background:var(--color-accent-light); color:var(--color-accent-dark);}
.ai-use h3{margin-bottom:5px; font-size:16px; white-space:nowrap;}
.ai-use p{font-size:13.5px; line-height:1.55;}
@media (max-width:960px){.ai-layout{grid-template-columns:1fr; gap:40px;}}
@media (max-width:560px){
  .ai-layout{gap:28px;}
  .ai-foot .btn{padding:14px 16px; font-size:14.5px;}
  .ai-uses{grid-template-columns:1fr; gap:10px;}
  .ai-use{grid-row:auto; grid-template-rows:auto auto; grid-template-columns:34px 1fr; column-gap:14px; padding:16px;}
  .ai-use__icon{grid-row:1 / 3; width:34px; height:34px; margin:0;}
  .ai-use h3{font-size:15px; white-space:normal;}
  .ai-use p{font-size:13px;}
}

/* =========================================================
   Marketing
   ========================================================= */
#marketing{padding:66px 0;}
.tile-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:14px; margin:32px 0 4px;}
.tile{display:flex; gap:14px; align-items:center; background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:16px 18px;}
.tile-icon{flex:0 0 36px; width:36px; height:36px; border-radius:var(--radius-md); background:var(--color-primary-light); display:flex; align-items:center; justify-content:center;}
.tile-icon .icon{color:var(--color-primary);}
.tile p{font-size:14.5px; font-weight:600; color:var(--color-ink);}
@media (max-width:560px){
  .tile-grid{gap:10px; margin-top:24px;}
  .tile{flex-direction:column; align-items:flex-start; gap:10px; padding:14px;}
  .tile p{font-size:13.5px; max-width:13ch;}
}

/* =========================================================
   Implantação assistida: texto | etapas num card
   ========================================================= */
.assist-layout{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.assist-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.assist-chips li{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:var(--color-accent-light); color:var(--color-accent-dark); font-size:13px; font-weight:600;}
.assist-chips .icon{width:16px; height:16px;}
.assist-intro .cta-soft{margin-top:26px;}
.assist-steps{position:relative; list-style:none; padding:8px 28px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-white); box-shadow:var(--shadow-card);}
/* Linha de progresso vertical: trilho claro + preenchimento verde animado, centrada nos números */
.assist-steps::before,.assist-steps::after{content:""; position:absolute; left:49px; top:48px; bottom:48px; width:2px;}
.assist-steps::before{background:color-mix(in srgb, var(--color-accent) 25%, var(--color-white));}
.assist-steps::after{background:var(--color-accent); transform-origin:top; animation:step-line-fill 6.4s ease-in-out infinite;}
.assist-step{position:relative; display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:center; padding:18px 0;}
.assist-step + .assist-step{border-top:1px solid var(--color-border);}
.assist-step__num{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--color-accent-light); border:1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-white)); color:var(--color-accent-dark); font:800 14px var(--font-heading);}
.assist-step h3{font-size:16px; font-weight:700; margin-bottom:2px;}
.assist-step p{font-size:13.5px;}
@keyframes step-line-fill{0%{transform:scaleY(0);} 85%,100%{transform:scaleY(1);}}
@media (max-width:960px){.assist-layout{grid-template-columns:1fr; gap:32px;}}
@media (max-width:560px){
  .assist-steps{padding:4px 18px;}
  .assist-steps::before,.assist-steps::after{left:39px; top:44px; bottom:44px;}
}

/* =========================================================
   Suporte
   ========================================================= */
#suporte{padding:76px 0;}
.support-flow{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:48px;}
.support-step{flex:1; text-align:center; padding:18px 12px; border-radius:var(--radius-lg);}
.support-step h3{margin-bottom:6px;}
.support-step p{font-size:14px; max-width:24ch; margin-inline:auto;}
.support-icon{width:56px; height:56px; border-radius:50%; background:var(--color-primary-light); color:var(--color-primary); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; animation:flow-pulse 4.5s ease-in-out infinite;}
.support-step:nth-child(3) .support-icon{animation-delay:1.5s;}
.support-step:nth-child(5) .support-icon{animation-delay:3s;}
.support-connector{position:relative; overflow:hidden; flex:0 0 auto; width:60px; height:3px; border-radius:2px; background:var(--color-border-strong); margin-top:27px;}
.support-connector::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--color-primary), #6C9BEA); border-radius:inherit; transform-origin:left; transform:scaleX(0); animation:support-line-fill-1 4.5s ease-in-out infinite;}
.support-connector:nth-child(4)::after{animation-name:support-line-fill-2;}
@keyframes support-line-fill-1{0%{transform:scaleX(0);} 16%{transform:scaleX(1);} 28%{transform:scaleX(1);} 38%{transform:scaleX(0);} 100%{transform:scaleX(0);}}
@keyframes support-line-fill-2{0%{transform:scaleX(0);} 38%{transform:scaleX(0);} 54%{transform:scaleX(1);} 62%{transform:scaleX(1);} 72%{transform:scaleX(0);} 100%{transform:scaleX(0);}}
/* Celular e tablet: lista compacta num card (ícone ao lado, divisória fina), sem os conectores */
@media (max-width:960px){
  .support-flow{flex-direction:column; gap:0; margin-top:28px; padding:4px 20px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-white); box-shadow:var(--shadow-card);}
  .support-connector{display:none;}
  .support-step{display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:center; width:100%; padding:16px 0; text-align:left; border-radius:0;}
  .support-step ~ .support-step{border-top:1px solid var(--color-border);}
  .support-icon{grid-row:1 / 3; width:44px; height:44px; margin:0;}
  .support-icon .icon{width:20px; height:20px;}
  .support-step h3{font-size:16px; margin-bottom:2px;}
  .support-step p{max-width:none; margin:0; font-size:13.5px;}
}
}

/* =========================================================
   Migração
   ========================================================= */
.migration-head{max-width:740px; margin-bottom:48px;}
.migration-flow{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,.55fr); gap:28px; align-items:center; margin-bottom:40px; padding:32px; border-radius:24px; background:var(--color-surface); border:1px solid var(--color-border);}
.migration-label{display:block; margin-bottom:14px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-secondary);}
.platform-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.platform-slot{display:flex; align-items:center; justify-content:center; min-height:68px; padding:12px 14px; border-radius:14px; background:var(--color-white); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); text-align:center;}
.platform-slot .logo-name{font-size:15px;}
.platform-slot img{max-width:76%; max-height:24px; width:auto; height:auto; object-fit:contain;}
.platform-slot--sm img{max-height:19px;}
.platform-more{display:block; margin-top:12px; font-size:13px; color:var(--color-text-secondary);}
.migration-bridge{display:flex; align-items:center;}
.migration-bridge__line{display:block; width:44px; height:2px; background:repeating-linear-gradient(90deg,var(--color-primary) 0 6px,transparent 6px 12px); opacity:.45;}
.migration-bridge__hub{position:relative; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--color-white); box-shadow:0 0 0 8px var(--color-primary-light),0 14px 32px rgba(33,94,213,.22); flex-shrink:0;}
.migration-bridge__hub img{width:34px; height:34px; object-fit:contain;}
.migration-bridge__hub::before{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--color-primary); opacity:0; animation:integration-ping 2.6s ease-out infinite; pointer-events:none;}
.shopify-card{display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 20px; border-radius:var(--radius-card); text-align:center; background:var(--color-white); border:1px solid var(--color-border); box-shadow:var(--shadow-md);}
.shopify-card__icon{display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:6px;}
.shopify-card__icon img{width:auto; height:48px; object-fit:contain;}
.shopify-card strong{font:800 24px/1.1 var(--font-heading); letter-spacing:-.02em; color:var(--color-ink);}
.shopify-card span:last-child{font-size:13px; color:var(--color-text-secondary);}
.migration-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:28px;}
@media (max-width:1220px){.migration-steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
.migration-step{padding:22px; border-radius:16px; background:var(--color-white); border:1px solid var(--color-border); box-shadow:var(--shadow-sm);}
.migration-step__num{display:block; margin-bottom:12px; font:800 13px/1 var(--font-heading); letter-spacing:.08em; color:var(--color-accent-dark);}
.migration-step h3{margin-bottom:8px; font-size:17px;}
.migration-step p{font-size:14px; line-height:1.55;}
.migration-chips{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 36px;}
.migration-chips li{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:var(--color-primary-light); font-size:13.5px; font-weight:600; color:var(--color-primary-dark);}
.migration-chips .icon{width:15px; height:15px; color:var(--color-accent-dark);}
.migration-foot{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.migration-foot .support-text{margin-top:6px; max-width:640px;}
.migration-foot .btn,.ai-foot .btn{white-space:normal; text-align:center;}
@media (max-width:960px){
  .migration-head{margin-bottom:34px;}
  /* Fluxo empilhado e compacto: ponte pequena e card Shopify horizontal na largura toda */
  .migration-flow{grid-template-columns:1fr; gap:14px; padding:20px;}
  .migration-label{margin-bottom:10px;}
  .platform-more{margin-top:10px;}
  .migration-bridge{flex-direction:column; justify-content:center;}
  .migration-bridge__line{width:2px; height:14px; background:repeating-linear-gradient(180deg,var(--color-primary) 0 4px,transparent 4px 8px);}
  .migration-bridge__hub{width:44px; height:44px; box-shadow:0 0 0 5px var(--color-primary-light),0 8px 20px rgba(33,94,213,.18);}
  .migration-bridge__hub img{width:24px; height:24px;}
  .shopify-card{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:2px; align-items:center; padding:16px 18px; text-align:left;}
  .shopify-card__icon{grid-row:1 / 3; width:40px; height:40px; margin:0;}
  .shopify-card__icon img{height:38px;}
  .shopify-card strong{font-size:19px;}
}
@media (max-width:600px){
  .platform-grid{gap:8px;}
  .platform-slot{min-height:48px; padding:8px 6px; border-radius:12px;}
  .platform-slot img{max-width:84%; max-height:18px;}
  .platform-slot--sm img{max-height:14px;}
  .migration-steps{grid-template-columns:1fr; gap:10px;}
  .migration-step{display:grid; grid-template-columns:28px 1fr; column-gap:10px; padding:16px;}
  .migration-step__num{grid-row:1 / 3; margin:2px 0 0;}
  .migration-step h3{font-size:15px; margin-bottom:4px;}
  .migration-step p{font-size:13px;}
  .migration-foot{align-items:stretch;}
  .migration-foot .btn{width:100%;}
}

/* =========================================================
   Parceiros: faixa do PipeRun.
   Sem a classe partner-cta-section--piperun, a faixa fica sem o card.
   ========================================================= */
#parceiros.partner-cta-section{padding:64px 0;}
.partner-cta-wrap{display:flex; align-items:center; justify-content:space-between; gap:48px;}
.partner-cta-copy{max-width:720px;}
.partner-cta-copy .tag{margin-bottom:14px;}
.partner-cta-copy h2{margin-bottom:10px;}
.partner-cta-copy p{max-width:650px; font-size:15px;}
.partner-cta-action{flex:0 0 auto;}
.partner-cta-action .btn{white-space:nowrap;}
.partner-cta-section--piperun .partner-cta-wrap{position:relative; overflow:hidden; padding:44px 48px; border-radius:24px; background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-piperun) 8%, transparent), transparent 40%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--color-piperun) 4%, transparent), transparent 40%), linear-gradient(135deg,var(--color-piperun-light),var(--color-white) 65%); border:1px solid var(--color-piperun-border);}
/* Faixa rosa no topo do card */
.partner-cta-section--piperun .partner-cta-wrap::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--color-piperun),var(--color-piperun-dark));}
.partner-cta-section--piperun .partner-cta-copy .tag{background:var(--color-white); color:var(--color-piperun-dark); box-shadow:inset 0 0 0 1px var(--color-piperun-border);}
.piperun-highlight{color:var(--color-piperun-dark);}
.partner-cta-section--piperun .btn-primary{background:var(--color-white); color:var(--color-piperun-dark); border-color:var(--color-piperun-border); box-shadow:0 4px 12px color-mix(in srgb, var(--color-piperun) 10%, transparent);}
.partner-cta-section--piperun .btn-primary:hover{background:var(--color-piperun-light); border-color:var(--color-piperun-dark); box-shadow:0 8px 18px color-mix(in srgb, var(--color-piperun) 16%, transparent);}
@media (max-width:960px){
  .partner-cta-wrap{align-items:flex-start; gap:28px;}
  .partner-cta-section--piperun .partner-cta-wrap{padding:36px 32px;}
}
@media (max-width:700px){
  .partner-cta-wrap{flex-direction:column; gap:22px;}
  .partner-cta-action,.partner-cta-action .btn{width:100%;}
}
@media (max-width:560px){
  .partner-cta-copy p{font-size:14px;}
  .partner-cta-section--piperun .partner-cta-wrap{padding:30px 20px 24px; border-radius:18px;}
}

/* =========================================================
   Conversão (formulário WhatsApp)
   ========================================================= */
.convert-wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.form-mock{border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:32px; background:var(--color-white); box-shadow:0 18px 44px rgba(15,23,42,.06);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;}
.form-field label{display:block; font-size:13px; font-weight:600; color:var(--color-text-secondary); margin-bottom:7px;}
.form-field input,.form-field select{width:100%; height:44px; border:1px solid var(--color-border-strong); border-radius:var(--radius-md); background:var(--color-white); padding:0 14px; font-family:var(--font-body); font-size:14.5px; color:var(--color-ink); appearance:none; -webkit-appearance:none;}
.form-field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px;}
.form-field input:focus,.form-field select:focus{outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light);}
.form-field:last-of-type{margin-bottom:22px;}
.form-submit{width:100%; margin-top:22px;}
.form-note{margin-top:12px;}
.form-whatsapp-link{margin-top:10px;}
@media (max-width:960px){.convert-wrap{grid-template-columns:1fr; gap:32px;}}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr;}
  .cta-row{flex-direction:column;}
  .cta-row .btn{width:100%;}
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-heading{margin-bottom:32px;}
.faq-item{background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:0 22px; margin-bottom:12px; box-shadow:0 2px 8px rgba(15,23,42,.03); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.faq-item:hover{border-color:#C9DAF8; box-shadow:0 8px 18px rgba(15,23,42,.06); transform:translateY(-1px);}
.faq-item[open]{border-color:var(--color-primary); box-shadow:0 10px 24px rgba(33,94,213,.1);}
.faq-item summary{cursor:pointer; font-family:var(--font-heading); font-weight:700; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{background:var(--color-primary-light); color:var(--color-primary); border-radius:50%; width:30px; height:30px; padding:7px; transition:transform .25s ease, background .2s ease, color .2s ease;}
.faq-item[open] summary .icon{background:var(--color-primary); color:var(--color-white); transform:rotate(45deg);}
.faq-item p{display:grid; grid-template-rows:0fr; overflow:hidden; opacity:0; font-size:15px; transition:grid-template-rows .35s ease, opacity .3s ease, margin-top .35s ease, padding-bottom .35s ease;}
.faq-item[open] p{grid-template-rows:1fr; opacity:1; margin-top:-6px; padding-bottom:20px;}

/* =========================================================
   CTA final
   ========================================================= */
.cta-final{padding:78px 0; text-align:center;}
.cta-final h2{margin:0 auto;}
.cta-final .cta-row{justify-content:center;}

/* =========================================================
   Rodapé: azul profundo da marca
   ========================================================= */
footer{color:var(--color-white); background:radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 45%), linear-gradient(160deg, var(--color-footer) 0%, var(--color-footer-deep) 100%);}
footer > .container{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-top:64px; padding-bottom:48px;}
footer h3{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-white); margin-bottom:16px;}
.footer-tagline{color:var(--color-on-dark-muted); font-size:14px; max-width:260px;}
footer ul li{margin-bottom:10px;}
.footer-partner{display:block; width:150px; height:auto; margin-top:20px; margin-left:-6px;}
footer ul li a{font-size:14px; color:var(--color-on-dark);}
footer ul li a:hover{color:var(--color-white);}
.footer-bottom{background:var(--color-footer-bar); font-size:13px; color:var(--color-on-dark-muted);}
/* Botão fixo do WhatsApp: estático, no canto inferior direito, abaixo do menu mobile aberto */
.whatsapp-float{position:fixed; right:24px; bottom:24px; z-index:40; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--color-whatsapp); color:var(--color-white); box-shadow:0 8px 22px rgba(15,23,42,.22);}
.whatsapp-float svg{width:30px; height:30px; fill:currentColor;}
.whatsapp-float:hover{box-shadow:0 10px 26px rgba(15,23,42,.3);}
.footer-bottom .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:20px; padding-bottom:20px;}
/* Tablet: marca em linha inteira e 3 colunas abaixo. Celular: marca, Soluções e Serviços lado a lado, Contato embaixo */
@media (max-width:960px){
  footer > .container{grid-template-columns:repeat(3,1fr); gap:28px 24px; padding-top:48px; padding-bottom:36px;}
  footer > .container > :first-child{grid-column:1/-1;}
  .footer-tagline{max-width:420px;}
}
@media (max-width:560px){
  .whatsapp-float{right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:52px; height:52px;}
  .whatsapp-float svg{width:28px; height:28px;}
  footer > .container{grid-template-columns:1fr 1fr; gap:20px 16px; padding-top:40px; padding-bottom:24px;}
  footer > .container > :last-child{grid-column:1/-1;}
  footer h3{margin-bottom:2px;}
  footer ul li{margin-bottom:0;}
  footer ul li a{display:inline-flex; align-items:center; min-height:44px;}
  .footer-bottom .container{flex-direction:column; align-items:center; text-align:center; padding-top:16px; padding-bottom:16px;}
}

/* =========================================================
   Ritmo das seções no celular
   ========================================================= */
@media (max-width:960px){
  section,.section--feature,.section--tight,#solucoes,.customer-pains,#integracoes,#marketing,#suporte,.cta-final,#parceiros.partner-cta-section{padding:64px 0;}
  .block-title{font-size:20px;}
}
@media (max-width:560px){
  section,.section--feature,.section--tight,#solucoes,.customer-pains,#integracoes,#marketing,#suporte,.cta-final,#parceiros.partner-cta-section{padding:56px 0;}
  .tag{margin-bottom:16px;}
  .cta-soft{margin-top:28px;}
}

/* =========================================================
   Carrosséis no celular: grupos longos de cards (Desafios e Benefícios B2B)
   rolam na horizontal com scroll-snap, mostrando um pedaço do próximo card.
   A rolagem fica dentro do grupo; a página não ganha rolagem horizontal.
   ========================================================= */
@media (max-width:560px){
  .customer-pains .pain-grid,.b2b-benefits-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:24px; margin-inline:-24px; padding:2px 24px 12px; scrollbar-width:thin;}
  .customer-pains .pain-item,.b2b-benefit{scroll-snap-align:start;}
}

/* =========================================================
   Movimento: entrada das seções e preferência por menos movimento
   ========================================================= */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s ease;}
.reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .reveal{opacity:1; transform:none;}
  .flow-icon,.flow-arrow .icon,.support-icon,.market-links line{animation:none;}
  .trail::after,.trail-dot::before,.market-network__hub::before,.integration-core__mark::before{display:none;}
  .support-connector::after{animation:none; transform:scaleX(1);}
  .assist-steps::after{animation:none; transform:scaleY(1);}
  .cases-track{animation:none; width:auto; justify-content:center;}
  .cases-list{flex-wrap:wrap; justify-content:center; row-gap:12px;}
  .cases-list[aria-hidden]{display:none;}
  .cases-marquee{-webkit-mask-image:none; mask-image:none;}
  .customer-pains .pain-item:hover{transform:none;}
}