:root {
  --ink: #172033;
  --paper: #f3f5f9;
  --lime: #dce4f3;
  --green: #465779;
  --muted: #70798a;
  --line: rgba(70, 87, 121, .17);
  --radius: 8px;
}

body { background: var(--paper); }
html, body { max-width: 100%; overflow-x: clip; }

/* Cabeçalho claro e editorial */
.site-header {
  background: rgba(243, 245, 249, .9);
  border-bottom-color: rgba(70, 87, 121, .12);
  color: var(--ink);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(35, 48, 74, .07); }
.brand-mark { background: #465779; border-radius: 50%; color: #fff; }
.brand-logo {
  background: #465779;
  border-radius: 7px;
  display: block;
  height: 32px;
  object-fit: contain;
  object-position: center;
  width: 36px;
}
.desktop-nav a { color: #697386; }
.desktop-nav a:hover { color: #465779; }
.header-cta { background: #465779; border: 0; color: #fff; }
.header-cta i { color: #fff; }
.header-account-actions { align-items: center; display: flex; gap: .7rem; justify-self: end; }
.header-login {
  border: 1px solid rgba(70,87,121,.28);
  border-radius: 30px;
  font-size: .9rem;
  font-weight: 600;
  padding: .68rem 1rem;
}
.header-login:hover { background: #e5eaf3; }
.menu-toggle span { background: #465779; }

/* Hero assimétrico, claro e menos convencional */
.hero {
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(70,87,121,.11) 50%, transparent 50.1%),
    linear-gradient(rgba(70,87,121,.055) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 100% 96px, auto;
  color: var(--ink);
  grid-template-columns: .9fr 1.1fr;
  padding-top: 118px;
}
.hero:before {
  background: #465779;
  content: "";
  height: 10px;
  left: clamp(1.2rem,4vw,4.5rem);
  position: absolute;
  top: 78px;
  width: 28%;
}
.hero-glow {
  background: #9eacc7;
  filter: blur(150px);
  opacity: .18;
  right: -10%;
  top: 10%;
}
.eyebrow { color: #465779; }
.eyebrow span { background: #465779; border-radius: 0; height: 2px; width: 28px; }
.hero h1 { font-size: clamp(3.8rem, 6.2vw, 7.5rem); }
.hero h1 em { color: #465779; }
.hero-copy > p { color: #626c7e; max-width: 540px; }
.primary { background: #465779; color: #fff; }
.text-link i { color: #465779; }
.trust p { color: #788193; }
.trust b { color: var(--ink); }
.avatars span { background: #d6deed; border-color: var(--paper); color: #465779; }
.dashboard-wrap { margin-left: 1vw; }
.dashboard-wrap > :not(.dashboard-image) { display: none; }
.dashboard-image {
  background: #fff;
  border: 8px solid #fff;
  box-shadow: 22px 28px 0 #465779, 0 40px 90px rgba(43,55,82,.2);
  display: block;
  height: auto;
  transform: rotate(1.5deg);
  width: 100%;
}
.dashboard {
  border: 8px solid #fff;
  border-radius: 7px;
  box-shadow: 22px 28px 0 #465779, 0 40px 90px rgba(43,55,82,.2);
  transform: rotate(1.5deg);
}
.dashboard aside { background: #465779; color: #9facc5; }
.dashboard aside .active,.dash-logo { background: #fff; color: #465779; }
.float-pill { border: 1px solid var(--line); border-radius: 4px; box-shadow: 8px 8px 0 rgba(70,87,121,.16); }
.float-pill i { background: #465779; color: #fff; }
.pill-sale { right: -8px; top: 11%; }
.pill-stock { bottom: 5%; left: -20px; }
.scroll-hint { color: #657087; }
.scroll-hint i { color: #465779; }

/* Blocos editoriais */
.section { padding-left: clamp(1.2rem, 7vw, 8.5rem); padding-right: clamp(1.2rem, 7vw, 8.5rem); }
.section-label { color: #465779; }
.section-label i { font-size: .72em; margin: 0 .65rem; }
.inline-arrow { color: #465779; font-size: .72em; margin: 0 .3rem; }
.about { background: #fff; border-top: 1px solid var(--line); }
.about-grid { grid-template-columns: 1.25fr .75fr; }
.about h2 em,.features h2 em,.plans h2 em,.faq h2 em { color: #465779; }
.about-heading { border-left: 10px solid #465779; padding-left: 2.5rem; }
.separation span { background: #465779; }
.separation i { color: #465779; }
.about-photo { height: min(55vw, 690px); margin-left: 7vw; }
.about-photo:before {
  border: 1px solid #fff;
  content: "";
  inset: 22px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.photo-caption { background: #465779; color: #fff; padding: 1.8rem 2.5rem; }

/* Funcionalidades como mosaico, não cards genéricos */
.features { background: #465779; color: #fff; }
.features .section-label { color: #cbd6ec; }
.features h2 em { color: #cbd6ec; }
.features-head p { color: #d5dbea; }
.feature-grid { gap: 2px; }
.feature-card {
  background: #f7f8fb;
  border-radius: 0;
  color: var(--ink);
  min-height: 340px;
  transition: transform .3s, background .3s;
}
.feature-card:hover { background: #fff; transform: translateY(-6px); z-index: 2; }
.feature-card .icon { background: #dce4f3; border-radius: 50%; color: #465779; }
.feature-card.dark { background: #25334f; }
.feature-card.dark .icon { background: #fff; color: #465779; }
.mini-stock i { background: #aebbd4; }
.mini-stock b,.metrics b { color: #465779; }
.spark i { background: #52617e; }
.spark i:nth-child(7) { background: #fff; }

/* Pós-venda com azul integral */
.after-sales {
  background: #192238;
  gap: clamp(3rem, 6vw, 7rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.after-copy { min-width: 0; position: relative; z-index: 2; }
.after-copy h2 em { color: #aebbd4; }
.after-copy li i { color: #aebbd4; }
.orbit,.orbit:before,.orbit:after { border-color: rgba(174,187,212,.3); }
.orbit b { background: #465779; border: 2px solid #aebbd4; border-radius: 50%; color: #fff; }
.orbit span:nth-child(2) { background: #aebbd4; }
.message-preview {
  aspect-ratio: auto;
  background: #fff;
  border: 8px solid #fff;
  border-radius: 0;
  box-shadow: 22px 28px 0 #465779, 0 40px 90px rgba(43,55,82,.2);
  margin: 0;
  max-width: none;
  overflow: hidden;
  transform: rotate(1.5deg);
  justify-self: start;
  width: calc(100% - 24px);
}
.message-preview:before,
.message-preview:after { display: none; }
.message-preview img { display: block; filter: none; height: auto; opacity: 1; width: 100%; }

/* Planos e FAQ com desenho mais firme */
.plans { background: #eef1f7; }
.plans-head > p { color: var(--muted); line-height: 1.65; margin-bottom: 2.5rem; max-width: 340px; }
.toggle { background: #dce2ed; }
.toggle button.active { background: #465779; }
.price-card { background: #fff; border-radius: 0; }
.price-card.featured { background: #465779; box-shadow: 16px 16px 0 #b5c1d9; }
.popular { background: #fff; color: #465779; }
.price-card.featured .primary { background: #fff; color: #465779; }
.pricing-grid { align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1500px; }
.price-card { display: flex; flex-direction: column; min-width: 0; }
.price-card .price { margin-bottom: 1.4rem; }
.price-card .price strong { font-size: clamp(3.5rem, 4.5vw, 5rem); }
.price-card .price sup { font-size: .34em; letter-spacing: 0; vertical-align: super; }
.plan-for { color: #778196; font-size: .65rem; margin-bottom: 1.2rem; }
.price-card.featured .plan-for { color: #c7d0e2; }
.plan-profile { border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.6; min-height: 82px; padding-bottom: 1.2rem; }
.price-card.featured .plan-profile { border-color: rgba(255,255,255,.18); color: #d8dfec; }
.plan-extra { color: inherit !important; font-weight: 700; margin-top: 1.4rem !important; }
.price-card ul { flex: 1; }
.price-card .button { margin-top: auto; }
.faq { background: #fff; }
.faq-list summary i { align-items:center; background:#e5eaf3; border-radius:50%; color:#465779; display:flex; height:32px; justify-content:center; width:32px; }

/* Fechamento de marca */
.support { background: #465779; color: #fff; }
.support h2 em { color: #cbd6ec; }
.support-copy > span,.support-copy p { color: #e2e7f1; }
.dark-button { background: #fff; color: #465779; }
.support-art span { color: rgba(255,255,255,.08); }
.support-art i { background: #fff; color: #465779; }
footer { background: #111722; }
.back-to-top { background: #465779; color: #fff; }
.chart .line { stroke: #465779; }

/* Leitura confortável em telas grandes e pequenas */
body { font-size: 17px; }
.desktop-nav a,.header-cta,.button,.text-link { font-size: .9rem; }
.eyebrow,.section-label { font-size: .78rem; }
.hero-copy > p,.about-copy > p,.features-head p,.after-copy > p,.plans-head > p,.support-copy p { font-size: 1.05rem; }
.trust p,.plan-for,.plan-note,footer p,footer a,footer small { font-size: .82rem; }
.about-copy .muted,.feature-card p,.faq-list details p { font-size: .95rem; }
.separation p,.price-card > p,.after-copy li,.price-card li { font-size: .9rem; }
.price-card > span,.support-copy > span { font-size: .76rem; }
.plan-profile { font-size: .92rem !important; }
.mini-stock { padding: .75rem 1rem; }
.mini-stock div {
  font-size: clamp(.88rem, .75vw, 1rem);
  gap: .9rem;
  min-height: 58px;
  padding: .85rem .25rem;
}
.mini-stock i { height: 30px; width: 30px; }
.mini-stock b { font-size: clamp(.88rem, .75vw, 1rem); }

/* Públicos atendidos */
.audience {
  background: #fff;
  border-top: 1px solid var(--line);
  text-align: center;
}
.audience-inner { margin: 0 auto; max-width: 1120px; }
.audience .section-label { margin-bottom: 1.5rem; }
.audience h2 {
  font-size: clamp(2.7rem, 4.4vw, 5.2rem);
  line-height: 1.02;
  margin: 0 auto 1.7rem;
  max-width: 980px;
}
.audience h2 em { color: #465779; font-style: normal; }
.audience-intro {
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.75;
  margin: 0 auto;
  max-width: 790px;
}
.audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
  margin: 3.3rem auto 2.2rem;
  max-width: 1040px;
}
.audience-tags span {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: .92rem;
  font-weight: 600;
  gap: .7rem;
  padding: .62rem 1rem .62rem .7rem;
}
.audience-tags i {
  align-items: center;
  background: #e8edf5;
  border-radius: 50%;
  color: #465779;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.audience-closing { font-size: 1rem; font-weight: 700; margin-bottom: 1.2rem; }
.audience-button { background: #192238; color: #fff; }

@media(max-width:1050px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .header-account-actions { display: none; }
  .site-header .brand,.menu-toggle { position: relative; z-index: 3; }
  .menu-toggle { align-items: center; height: 42px; justify-content: center; width: 42px; }
  .menu-toggle span { height: 2px; width: 24px; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(9px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-9px) rotate(-45deg); }
  .mobile-menu {
    background: #465779;
    color: #fff;
    gap: 0;
    height: 100dvh;
    inset: 0;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 110px 1.5rem 2rem;
    position: fixed;
    width: 100vw;
    z-index: 2;
  }
  .mobile-menu a {
    align-items: center;
    border-color: rgba(255,255,255,.2);
    display: flex;
    font-size: clamp(1.35rem, 6vw, 2.15rem);
    justify-content: space-between;
    padding: 1rem .2rem;
  }
  .mobile-menu a:after { content: "\f061"; font: 900 .75rem "Font Awesome 6 Free"; opacity: .7; }
  body.menu-open .site-header { background: transparent; border-color: transparent; box-shadow: none; }
  body.menu-open .site-header .brand { color: #fff; }
  body.menu-open .brand-logo { outline: 1px solid rgba(255,255,255,.35); }
  body.menu-open .menu-toggle span { background: #fff; }
  .hero { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-heading,.about-copy { min-width: 0; width: 100%; }
  .about-copy { padding-top: 1rem; }
  .about-photo { margin-left: 0; width: 100%; }
  .after-sales { gap: 1rem; grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 720px; }
  .dashboard-wrap { margin-bottom: 3rem; }
  .dashboard-image { transform: none; }
  .message-preview { margin: 4rem auto 0; max-width: 850px; transform: none; width: calc(100% - 24px); }
}

@media(max-width:650px) {
  .site-header { height: 64px; padding-left: 1rem; padding-right: 1rem; }
  .site-header.is-scrolled { height: 64px; }
  .hero { min-height: auto; padding: 104px 1rem 5rem; }
  .hero:before { left: 1rem; top: 64px; width: 42%; }
  .hero-copy { margin-bottom: 3.5rem; max-width: 100%; }
  .hero h1 { font-size: clamp(3.25rem, 14vw, 5rem); overflow-wrap: anywhere; }
  .hero-copy > p { max-width: 100%; }
  .trust { margin-top: 2.3rem; }
  .dashboard-wrap { margin: 0; max-width: 100%; width: 100%; }
  .dashboard { box-shadow: 10px 12px 0 #465779, 0 25px 50px rgba(43,55,82,.16); }
  .dashboard-image { border-width: 4px; box-shadow: 8px 10px 0 #465779, 0 25px 50px rgba(43,55,82,.16); max-width: calc(100% - 8px); }
  .message-preview { border-width: 4px; box-shadow: 8px 10px 0 #465779, 0 25px 50px rgba(43,55,82,.16); max-width: calc(100% - 8px); width: 100%; }
  .about-heading { border-left-width: 6px; padding-left: 1rem; }
  .about h2 { font-size: clamp(3.1rem, 14vw, 5rem); overflow-wrap: normal; }
  .about-copy > p,.about-copy .muted { max-width: 100%; overflow-wrap: break-word; }
  .separation { align-items: flex-start; flex-wrap: wrap; }
  .separation p { flex-basis: 100%; margin-left: 0; max-width: 100%; }
  .about-photo { margin-left: 0; }
  .about-photo:before { inset: 10px; }
  .feature-grid { gap: 1px; }
  .price-card.featured { box-shadow: 8px 8px 0 #b5c1d9; }
}