/* =========================================================
   BOTTRIX — Landing Page
   Arquivo: css/landing-pro.css
   Abordagem: mobile-first • tema escuro • alto contraste
   ========================================================= */

/* -----------------------------
   0) Design Tokens (CSS Vars)
------------------------------*/
:root{
  /* Core colors */
  --bg-0:#080d17;
  --bg-1:#0b1220;
  --bg-2:#0e172a;
  --surface-0:rgba(255,255,255,.04);
  --surface-1:rgba(255,255,255,.07);
  --surface-2:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.14);

  --brand:#00d9ff;
  --brand-2:#2ba8fb;
  --brand-3:#39ffb6;
  --accent:#22d3ee;

  --txt-0:#fff;
  --txt-1:rgba(255,255,255,.88);
  --txt-2:rgba(255,255,255,.66);
  --muted:rgba(255,255,255,.46);
  --danger:#ef4444;
  --success:#22c55e;
  --warn:#f59e0b;

  /* Radius / Shadows */
  --r-sm:10px;
  --r:14px;
  --r-lg:22px;
  --shadow-1:0 10px 28px rgba(0,0,0,.35);
  --shadow-2:0 18px 50px rgba(0,0,0,.5);

  /* Spacing scale */
  --g-1:8px;
  --g-2:12px;
  --g-3:16px;
  --g-4:20px;
  --g-5:28px;
  --g-6:36px;
  --g-7:48px;
  --g-8:64px;

  /* Layout */
  --container:1120px;
  --container-lg:1260px;

  /* Effects */
  --blur:10px;
  --trans:180ms ease;

  /* Typography */
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------------------------------
   1) Reset básico + base tipográfica
----------------------------------*/
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  line-height:1.6;
  color:var(--txt-1);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(0,217,255,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-2) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--accent)}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font-family:inherit}

/* Acessibilidade */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:8px;
}

/* Util: bloquear scroll quando modal aberto */
.no-scroll{overflow:hidden}

/* ---------------------------------
   2) Containers e seções
----------------------------------*/
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}
.section{padding: var(--g-7) 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section__title{
  margin:0 0 var(--g-3);
  color:var(--txt-0);
  font-weight:800;
  letter-spacing:.2px;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem);
  text-shadow:0 0 10px rgba(0,217,255,.2);
}
.section__subtitle{
  margin:0 auto var(--g-6);
  color:var(--txt-2);
  max-width:760px;
}
.center{text-align:center}

/* ---------------------------------
   3) Topbar (prova social)
----------------------------------*/
.topbar{
  backdrop-filter: blur(var(--blur));
  background: linear-gradient(90deg, rgba(0,217,255,.16), rgba(43,168,251,.12));
  border-bottom:1px solid var(--border);
  color:var(--txt-1);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--g-3);
  padding:10px 0;
}
.topbar__msg{
  display:inline-flex; align-items:center; gap:10px;
}
.topbar__cta{
  font-weight:700;
  color:var(--txt-0);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--surface-2);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.topbar__cta:hover{border-color:var(--brand);}

/* ---------------------------------
   4) Header / Nav
----------------------------------*/
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(var(--blur));
  background: rgba(7,11,22,.55);
  border-bottom:1px solid var(--border);
}
.header__wrap{
  display:flex; align-items:center; justify-content:space-between; gap:var(--g-3);
  padding:14px 0;
}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--txt-0)}
.brand__logo{
  width:40px; height:40px; object-fit:contain;
  border:1px solid var(--border); border-radius:8px;
  background:var(--surface-0);
}
.brand__name{font-weight:800; letter-spacing:.3px}

/* Nav */
.nav{position:relative}
.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--txt-0); cursor:pointer;
}
.nav__menu{
  position:absolute; right:0; top:calc(100% + 10px);
  min-width:280px; padding:12px;
  background:rgba(11,18,32,.9);
  border:1px solid var(--border); border-radius:14px;
  box-shadow: var(--shadow-2);
  display:none;
}
.nav__menu.is-open{display:block}
.nav__list{display:grid; gap:8px; list-style:none}
.nav__link{
  display:block; padding:10px 12px; border-radius:10px;
  color:var(--txt-1); font-weight:600;
}
.nav__link:hover{background:var(--surface-0); color:var(--txt-0)}
.nav__ctas{
  display:grid; gap:10px; grid-auto-flow:row; margin-top:12px;
}

/* Desktop nav */
@media (min-width: 960px){
  .nav__toggle{display:none}
  .nav__menu{
    position:static; display:flex; align-items:center; gap:16px;
    min-width:unset; padding:0; background:transparent; border:none; box-shadow:none;
  }
  .nav__list{display:flex; gap:16px}
  .nav__ctas{display:flex; gap:10px; margin-top:0}
}

/* ---------------------------------
   5) Botões
----------------------------------*/
.btn{
  --bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --fg: var(--txt-0);
  --bd: var(--surface-2);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:14px; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg); font-weight:700;
  box-shadow: var(--shadow-1);
  transition: transform var(--trans), border-color var(--trans), background var(--trans), color var(--trans);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{
  --bg: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  --fg: #0b1220; --bd: transparent;
  color:#0b1220;
}
.btn--ghost{
  --bg: transparent; --bd: var(--surface-2); --fg: var(--txt-0);
}
.btn--outline{
  --bg: transparent; --bd: rgba(0,217,255,.5); --fg: var(--txt-0);
}
.btn--sm{padding:8px 12px; font-size:.92rem; border-radius:10px}
.btn--lg{padding:14px 20px; font-size:1.05rem}
.btn--block{width:100%}

/* Shine effect (hover sutil) */
.btn--primary{ position:relative; overflow:hidden }
.btn--primary::after{
  content:""; position:absolute; inset:-120% 0 auto -60%;
  width:40%; height:300%; transform:rotate(25deg);
  background:linear-gradient( to right, transparent, rgba(255,255,255,.28), transparent );
  transition:transform 600ms ease;
}
.btn--primary:hover::after{ transform:translateX(320%) rotate(25deg) }

/* ---------------------------------
   6) Hero
----------------------------------*/
.hero{
  padding: clamp(36px, 6vw, 80px) 0 28px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(80% 80% at 10% 0%, rgba(0,217,255,.08), transparent 60%),
    radial-gradient(80% 80% at 100% 0%, rgba(57,255,182,.06), transparent 60%);
}
.hero__grid{
  display:grid; gap:var(--g-6); align-items:center;
}
@media (min-width: 960px){
  .hero__grid{ grid-template-columns: 1.1fr .9fr; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--surface-2); border-radius:999px;
  color:var(--txt-2); background:var(--surface-0); margin:0 0 var(--g-3);
  font-weight:600;
}
.hero__title{
  margin:0 0 var(--g-3);
  color:var(--txt-0);
  font-size: clamp(1.9rem, 2.6vw + 1rem, 3.1rem);
  font-weight:900;
  line-height:1.12;
}
.u-mark{
  background: linear-gradient(180deg, rgba(0,217,255,.5), rgba(0,217,255,0) 62%);
  border-bottom:2px solid rgba(0,217,255,.6);
  padding-bottom:2px;
}
.hero__subtitle{ color:var(--txt-2); margin:0 0 var(--g-4) }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:var(--g-4) }

.hero__bullets{ list-style:none; color:var(--txt-1) }
.hero__bullets li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.hero__bullets i{ color:var(--success) }

.hero__mockup{
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow:hidden;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,217,255,.12), transparent 60%);
}
.hero__mockup img{ width:100%; height:520px; object-fit:cover }

/* Fitinha de confiança */
.hero__trust{
  margin-top: clamp(22px, 4vw, 40px);
  display:flex; gap:8px; flex-wrap:wrap;
}
.trust-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--surface-2); color:var(--txt-2);
  background:var(--surface-0);
}

/* ---------------------------------
   7) Social Proof + KPIs
----------------------------------*/
.social-proof{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:var(--g-3) }
.social-proof__logos img{ height:28px; opacity:.8 }
.social-proof__text{ color:var(--txt-2) }

.kpis{ padding: var(--g-6) 0 }
.kpis__grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width: 720px){ .kpis__grid{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
.kpi{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--border);
  border-radius:14px; background:var(--surface-0);
}
.kpi i{ font-size:24px; color:var(--brand-3) }
.kpi__txt strong{ color:var(--txt-0); display:block; line-height:1.2 }
.kpi__txt span{ color:var(--txt-2); font-size:.95rem }

/* ---------------------------------
   8) Cards de benefícios / integrações
----------------------------------*/
.cards{ display:grid; gap:16px }
.cards--benefits{ grid-template-columns:1fr }
@media (min-width: 720px){ .cards--benefits{ grid-template-columns:repeat(2,1fr) } }
@media (min-width: 992px){ .cards--benefits{ grid-template-columns:repeat(3,1fr) } }

.card{
  padding:20px; border:1px solid var(--border);
  border-radius:var(--r); background:var(--surface-0);
  box-shadow: var(--shadow-1);
  transition: transform var(--trans), border-color var(--trans), background var(--trans);
}
.card:hover{ transform:translateY(-2px); border-color:var(--brand); background:rgba(255,255,255,.07) }
.card__icon{ color:var(--brand); font-size:1.8rem }
.card__title{ color:var(--txt-0); margin:6px 0 8px; font-weight:800 }
.card p{ color:var(--txt-2); margin:0 }

/* Linha (ícone + texto) */
.card--row{ display:flex; gap:12px; align-items:flex-start }

/* ---------------------------------
   9) Steps (Como funciona)
----------------------------------*/
.steps{ display:grid; gap:14px; list-style:none }
.step{
  display:grid; grid-template-columns:44px 1fr; gap:12px;
  padding:14px; border-radius:14px; border:1px solid var(--border); background:var(--surface-0);
}
.step__num{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-weight:900;
  color:#0b1220; background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.step__txt h3{ margin:0 0 6px; color:var(--txt-0) }
.step__txt p{ margin:0; color:var(--txt-2) }

@media (min-width: 720px){ .steps{ grid-template-columns:repeat(2, minmax(0,1fr)) } }

.mini-cta{ display:flex; gap:12px; justify-content:center; margin-top:var(--g-5) }

/* ---------------------------------
   10) Product Tour (Tabs)
----------------------------------*/
.tabs{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:var(--g-4)
}
.tab{
  padding:10px 14px; border-radius:999px; border:1px solid var(--surface-2);
  background:var(--surface-0); color:var(--txt-1); font-weight:700; cursor:pointer;
}
.tab.is-active{ background:linear-gradient(180deg, var(--brand), var(--brand-2)); color:#0b1220; border-color:transparent }
.panes{ position:relative }
.pane{ display:none }
.pane.is-active{ display:block; animation: fade .28s ease }
@keyframes fade{ from{opacity:.7; transform:translateY(6px)} to{opacity:1; transform:none} }

.pane__grid{ display:grid; gap:16px; align-items:center }
@media (min-width: 960px){ .pane__grid{ grid-template-columns: 1.05fr .95fr } }
.pane__copy h3{ margin:0 0 8px; color:var(--txt-0) }
.pane__copy p{ margin:0 0 12px; color:var(--txt-2) }
.tick{ list-style:none; display:grid; gap:8px; color:var(--txt-1); margin: 0 0 var(--g-4) }
.tick i{ color:var(--success) }
.pane__media{
  border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface-0);
  box-shadow: var(--shadow-1);
}

/* ---------------------------------
   11) Use cases
----------------------------------*/
.grid{ display:grid; gap:16px }
.grid--cards-4{ grid-template-columns:1fr }
@media (min-width: 720px){ .grid--cards-4{ grid-template-columns:repeat(2,1fr) } }
@media (min-width: 992px){ .grid--cards-4{ grid-template-columns:repeat(4,1fr) } }

.use{
  padding:18px; border-radius:14px; border:1px solid var(--border); background:var(--surface-0);
  transition: border-color var(--trans), transform var(--trans);
}
.use:hover{ border-color:var(--brand); transform: translateY(-2px) }
.use__icon{ font-size:1.6rem; color:var(--brand) }
.use h3{ margin:8px 0; color:var(--txt-0) }
.use p{ margin:0; color:var(--txt-2) }
/* Centraliza o CTA dentro da grid e faz ocupar a linha inteira */
.grid--cards-4 .mini-cta{
  grid-column: 1 / -1;        /* ocupa todas as colunas da grid */
  display: flex;               /* centraliza o conteúdo */
  justify-content: center;     /* centro horizontal */
  align-items: center;         /* centro vertical (da própria linha) */
  margin-top: 8px;             /* espaçamento opcional */
}

.grid--cards-4 .mini-cta .btn{
  display: inline-flex;        /* garante centragem perfeita */
}
/* Em telas grandes, dá um respiro extra acima do CTA */
@media (min-width: 992px){
  .grid--cards-4 .mini-cta{ margin-top: 16px; }
}



/* ---------------------------------
   12) Comparativo (tabela)
----------------------------------*/
.table-responsive{
  overflow:auto; border:1px solid var(--border); border-radius:14px; background:var(--surface-0)
}
.table{ width:100%; border-collapse:collapse; min-width:680px }
.table th,.table td{ padding:12px 14px; border-bottom:1px solid var(--border); text-align:left }
.table thead th{ background:rgba(255,255,255,.06); color:var(--txt-0) }
.table tbody td{ color:var(--txt-1) }
.table tbody tr:hover td{ background:rgba(255,255,255,.03) }
.compare i.bx-check{ color:var(--success) }
.compare i.bx-minus{ color:#9aa0a6 }
.compare i.bx-x{ color:var(--danger) }

/* Scrollbar da tabela */
.table-responsive::-webkit-scrollbar{height:10px}
.table-responsive::-webkit-scrollbar-thumb{background:var(--surface-2); border-radius:10px}
.table-responsive::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}

/* ---------------------------------
   13) ROI / Calculadora
----------------------------------*/
.grid--2{ grid-template-columns:1fr }
@media (min-width: 960px){ .grid--2{ grid-template-columns:1fr 1fr } }

.roi__form, .roi__result{
  border:1px solid var(--border); border-radius:14px; background:var(--surface-0); padding:18px;
}
.form__group{ display:grid; gap:6px; margin-bottom:12px }
.form__group label{ color:var(--txt-1); font-weight:700 }
.form__group input, .roi__form select{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--txt-0);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}
.form__group input:focus, .roi__form select:focus{ border-color:var(--brand) }
.form__actions{ display:flex; gap:10px; margin-top:8px }
.form__hint{ color:var(--muted); margin:8px 0 0 }

.result__list{ list-style:none; display:grid; gap:10px; margin:0 0 12px }
.result__list li{
  display:flex; align-items:baseline; justify-content:space-between;
  border:1px dashed var(--border); border-radius:12px; padding:10px 12px;
}
.result__list span{ color:var(--txt-2) }
.result__list strong{ color:var(--txt-0); font-size:1.1rem }
.result__cta .btn--block{ margin-top:8px }

/* ---------------------------------
   14) Pricing (Pay-per-sale)
----------------------------------*/
.pricing{ display:grid; gap:16px; justify-items:center }
.pps{
  width:min(720px, 100%);
  border:1px solid rgba(0,217,255,.28);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(0,217,255,.10), rgba(255,255,255,.03));
  padding:22px;
  box-shadow: var(--shadow-1);
}
.pps__head{ margin-bottom:12px }
.pps__price{
  margin:0 0 6px; color:var(--txt-0);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
}
.pps__price strong{ font-size:1.22em }
.pps__price span{ color:var(--txt-2); font-weight:500; margin-left:4px }
.pps__tag{ margin:0; color:var(--txt-2) }

.pps__list{ list-style:none; display:grid; gap:8px; margin:16px 0 }
.pps__list i{ color:var(--success) }

.pps__actions{ display:grid; gap:10px; margin-bottom:12px }
.pps__calc{
  border:1px solid var(--border); border-radius:12px; padding:12px; background:rgba(255,255,255,.04);
  display:grid; gap:8px;
}
.pps__calc label{ color:var(--txt-1); font-weight:700 }
.pps__calc input{
  background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--txt-0);
  padding:10px 12px; border-radius:10px; outline:none;
}
.pps__calc input:focus{ border-color:var(--brand) }
.pps__result{
  display:flex; align-items:baseline; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  color:var(--txt-1);
}
.pps__result strong{ color:var(--txt-0) }
.pps__hint{ color:var(--muted) }

/* ---------------------------------
   15) Testemunhos
----------------------------------*/
.testimonials{ display:grid; gap:16px }
@media (min-width: 960px){ .testimonials{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

.testimonial{
  margin:0;
  border:1px solid var(--border); border-radius:14px; background:var(--surface-0);
  padding:18px; color:var(--txt-1); box-shadow:var(--shadow-1);
}
.testimonial footer{ margin-top:8px; color:var(--muted) }

/* ---------------------------------
   16) Trust / Segurança
----------------------------------*/
.grid--cards-3{ grid-template-columns:1fr }
@media (min-width: 960px){ .grid--cards-3{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

.trust{
  text-align:center;
  padding:18px; border-radius:14px; border:1px solid var(--border); background:var(--surface-0);
}
.trust__icon{ font-size:1.8rem; color:var(--brand) }
.trust h3{ margin:8px 0; color:var(--txt-0) }
.trust p{ margin:0; color:var(--txt-2) }

/* ---------------------------------
   17) FAQ
----------------------------------*/
.faq-grid{ display:grid; gap:12px }
@media (min-width: 960px){ .faq-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

.faq{
  border:1px solid var(--border); border-radius:14px; background:var(--surface-0);
  padding:12px 14px;
}
.faq > summary{
  cursor:pointer; list-style:none; color:var(--txt-0); font-weight:800; outline:none
}
.faq[open] > summary{ color:var(--brand) }
.faq > p{ color:var(--txt-2); margin:8px 2px 2px 2px }

/* ---------------------------------
   18) CTA Final
----------------------------------*/
.cta{
  padding: var(--g-7) 0;
  background: radial-gradient(100% 100% at 0% 0%, rgba(0,217,255,.08), transparent 60%);
  border-top:1px solid var(--border);
}
.cta__wrap{ text-align:center }
.cta__wrap h2{
  color:var(--txt-0); margin:0 0 8px; font-size: clamp(1.6rem, 1.8vw + 1rem, 2.2rem);
}
.cta__wrap p{ color:var(--txt-2); margin:0 0 16px }
.cta__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.cta__legal{ display:block; color:var(--muted); margin-top:10px }

/* ---------------------------------
   19) Footer
----------------------------------*/
.footer{
  margin-top:40px; background: rgba(7,11,22,.55); border-top:1px solid var(--border);
}
.footer__grid{
  display:grid; gap:var(--g-6); grid-template-columns:1fr; padding:28px 0;
}
@media (min-width: 960px){ .footer__grid{ grid-template-columns: 1.2fr .9fr .9fr } }


.footer__brand-link{ display:inline-flex; align-items:center; gap:10px; color:var(--txt-0) }
.footer__logo{
  width:36px; height:36px; object-fit:contain; border:1px solid var(--border); border-radius:8px; background:var(--surface-0)
}
.footer__desc{ color:var(--txt-2); margin-top:8px; max-width:460px }

.footer__title{ color:var(--txt-0); margin:0 0 10px }
.footer__list{ list-style:none; display:grid; gap:8px }
.footer__list a{ color:var(--txt-2) }
.footer__list a:hover{ color:var(--brand) }
.footer__ctas{ display:flex; gap:10px; margin-top:10px }

.footer__social a{ color:var(--txt-2); margin-right:10px; font-size:1.2rem }
.footer__social a:hover{ color:var(--brand) }

.footer__bottom{ border-top:1px solid var(--border); padding:14px 0; color:var(--muted); font-size:.95rem }
.footer__bottom__wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer__policies{ display:flex; gap:12px }
.footer__policies a{ color:var(--txt-2) }
.footer__policies a:hover{ color:var(--brand) }

/* ---------------------------------
   21) Cookie banner
----------------------------------*/
.cookie[hidden]{ display:none !important }
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:rgba(11,18,32,.9); border-top:1px solid var(--border);
  backdrop-filter: blur(var(--blur));
}
.cookie__wrap{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0;
}
.cookie p{ margin:0; color:var(--txt-2) }
.cookie a{ color:var(--brand) }
.cookie__actions{ display:flex; gap:10px }

/* ---------------------------------
   22) Helpers / Utilities
----------------------------------*/
.hide{ display:none !important }
.mt-0{ margin-top:0 !important }
.mb-0{ margin-bottom:0 !important }
.mt-1{ margin-top:8px !important }
.mb-1{ margin-bottom:8px !important }
.mt-2{ margin-top:12px !important }
.mb-2{ margin-bottom:12px !important }

/* ---------------------------------
   23) Responsividade extra
----------------------------------*/
@media (min-width: 640px){
  .container{ max-width:var(--container) }
  .hero__mockup img{ height:540px }
  .cards.cards--integrations{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 768px){
  .container{ max-width:var(--container) }
}
@media (min-width: 1200px){
  .container{ max-width:var(--container-lg) }
}

/* Ajustes finos do hero em telas muito pequenas */
@media (max-width: 399px){
  .hero__actions .btn{ flex:1 1 100% }
}

/* ---------------------------------
   24) Preferências do usuário
----------------------------------*/
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .btn, .card, .use, .tab, .pane{ transition:none !important }
}

/* ---------------------------------
   25) Impressão (básico)
----------------------------------*/
@media print{
  .topbar, .header, .nav, .cta, .cookie, .modal{ display:none !important }
  .section, .footer{ page-break-inside: avoid }
  body{ background:#fff; color:#000 }
  a{ color:#000; text-decoration:underline }
}

/* ---------------------------------
   26) Micro-Interações (extras)
----------------------------------*/
/* Glow sutil em títulos ao pairar (desktop) */
@media (hover:hover){
  .section__title:hover{ text-shadow:0 0 14px rgba(0,217,255,.35) }
}
/* Elevação em surfaces ao pairar */
.integration:hover, .step:hover{ border-color:var(--brand) }

/* ---------------------------------
   27) Navegação sticky: esconder borda dupla com topbar
----------------------------------*/
.topbar + .header{ border-top:1px solid transparent }

/* ---------------------------------
   28) Correções de contraste
----------------------------------*/
.btn--outline:hover{ background:rgba(0,217,255,.06) }

/* ---------------------------------
   29) Estados de erro/aviso/sucesso em inputs
----------------------------------*/
.is-error{ border-color: var(--danger) !important; box-shadow:0 0 0 3px rgba(239,68,68,.2) }
.is-warn{ border-color: var(--warn) !important; box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.is-success{ border-color: var(--success) !important; box-shadow:0 0 0 3px rgba(34,197,94,.18) }

/* ---------------------------------
   30) Pequenos refinamentos visuais
----------------------------------*/
.hero__mockup{ position:relative; overflow:hidden }
.hero__mockup::before{
  content:""; position:absolute; inset:-40% -20% auto -20%;
  height:220px; background: radial-gradient(60% 80% at 10% 0%, rgba(0,217,255,.12), transparent 70%);
  pointer-events:none;
}