/* JSS home redesign: operational clarity with a regional, green-blue identity. */
body[data-site="jsssistemas"] .jss-clean-home {
  --jss-ink: #10251f;
  --jss-deep: #073b2e;
  --jss-green: #0b8f65;
  --jss-mint: #dff7ed;
  --jss-cyan: #26b8c7;
  --jss-blue: #1f6fd1;
  --jss-paper: #fbfdfc;
  background: var(--jss-paper);
  color: var(--jss-ink);
}

body[data-site="jsssistemas"] .jss-v2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 5vw, 72px) 24px clamp(62px, 7vw, 100px);
  background:
    radial-gradient(circle at 83% 30%, rgba(38,184,199,.15), transparent 25%),
    radial-gradient(circle at 96% 80%, rgba(11,143,101,.12), transparent 32%),
    linear-gradient(135deg, #f8fcfa 0%, #ffffff 58%, #f2fbfa 100%);
  border-bottom: 0;
}

body[data-site="jsssistemas"] .jss-v2-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 52%;
  z-index: -1;
  opacity: .48;
  background-image: linear-gradient(rgba(11,143,101,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(11,143,101,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 78%, transparent);
}

body[data-site="jsssistemas"] .jss-v2-hero-grid {
  max-width: 1280px;
  grid-template-columns: minmax(440px, 1fr) minmax(520px, 1.08fr);
  gap: clamp(42px, 5vw, 76px);
}

body[data-site="jsssistemas"] .jss-v2-hero-copy h1 {
  max-width: 620px;
  font-size: clamp(2.8rem, 4.45vw, 4.55rem);
  line-height: .99;
  letter-spacing: -.065em;
}

body[data-site="jsssistemas"] .jss-v2-hero-copy h1 em {
  display: block;
  margin-top: .11em;
  color: var(--jss-green);
  background: none;
  -webkit-text-fill-color: initial;
}

body[data-site="jsssistemas"] .jss-v2-lead {
  max-width: 540px;
  font-size: 1.08rem;
  line-height: 1.7;
  color: #50635c;
}

body[data-site="jsssistemas"] .jss-v2-badge {
  border-color: #b9ead6;
  background: rgba(223,247,237,.78);
  color: var(--jss-deep);
}

body[data-site="jsssistemas"] .jss-v2-btn-primary {
  border-radius: 8px;
  background: var(--jss-deep);
  box-shadow: 0 15px 30px rgba(7,59,46,.18);
}

body[data-site="jsssistemas"] .jss-v2-btn-primary:hover { background: var(--jss-green); }

body[data-site="jsssistemas"] .jss-v2-btn-secondary {
  border-radius: 8px;
  color: var(--jss-deep) !important;
  border-color: #b8d9d0;
  background: rgba(255,255,255,.72);
}

body[data-site="jsssistemas"] .jss-v2-hero-proof {
  gap: 22px;
  max-width: 600px;
  color: #60766d;
  border-top-color: #cfe4dd;
}

body[data-site="jsssistemas"] .jss-v2-hero-proof span::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--jss-green);
  color: white;
  font-size: 10px;
  font-weight: 900;
}

body[data-site="jsssistemas"] .jss-v2-hero-mockup {
  position: relative;
  padding: 18px;
  border: 1px solid #b9e7d7;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(219,250,239,.9), rgba(225,247,249,.72) 50%, rgba(255,255,255,.9));
  box-shadow: 0 34px 70px rgba(7,59,46,.16), 0 6px 20px rgba(31,111,209,.08);
  transform: rotate(1.1deg);
}

body[data-site="jsssistemas"] .jss-dashboard-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
  background: #fff;
}

body[data-site="jsssistemas"] .jss-v2-hero-mockup > .jss-v2-card-main { display: none; }

body[data-site="jsssistemas"] .jss-v2-hero-mockup::before {
  content: "JSS ERP  /  visão geral";
  position: absolute;
  top: -15px;
  right: 24px;
  padding: 7px 12px;
  border: 1px solid #b9e7d7;
  border-radius: 999px;
  background: #ffffff;
  color: var(--jss-green);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .05em;
  transform: rotate(-1.1deg);
}

body[data-site="jsssistemas"] .jss-v2-card-main {
  min-height: 470px;
  padding: 28px;
  border-radius: 19px;
  border-color: #d8e9e4;
  box-shadow: 0 10px 28px rgba(16,37,31,.07);
}

body[data-site="jsssistemas"] .jss-v2-card-header { margin-bottom: 26px; }
body[data-site="jsssistemas"] .jss-v2-header-title { color: var(--jss-deep); }
body[data-site="jsssistemas"] .jss-v2-icon { color: var(--jss-blue); }
body[data-site="jsssistemas"] .jss-v2-status-pill { color: var(--jss-green); background: #ebfbf4; border-color: #b9ead6; }
body[data-site="jsssistemas"] .jss-v2-kpi strong { font-size: clamp(2.35rem, 4vw, 3.55rem); color: var(--jss-deep); }
body[data-site="jsssistemas"] .jss-v2-kpi p { color: var(--jss-green); }
body[data-site="jsssistemas"] .jss-v2-subcard { min-height: 104px; border-radius: 12px; background: #f8fcfb; }
body[data-site="jsssistemas"] .jss-v2-subcard strong.is-success { color: var(--jss-green); }

body[data-site="jsssistemas"] .jss-v2-coverage { background: var(--jss-deep); padding: 19px 24px; }
body[data-site="jsssistemas"] .jss-v2-coverage-inner { max-width: 1280px; }
body[data-site="jsssistemas"] .jss-cov-item { border-radius: 999px; background: rgba(255,255,255,.08); }

/* Benefits band: practical value, not a compressed text strip. */
body[data-site="jsssistemas"] .jss-v2-coverage {
  padding: clamp(42px, 5vw, 68px) clamp(24px, 7vw, 112px);
  background: var(--jss-deep);
  color: #f5fffc;
}
body[data-site="jsssistemas"] .jss-v2-coverage-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(200px, .8fr) minmax(0, 1.8fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: center;
}
body[data-site="jsssistemas"] .jss-v2-coverage-label {
  display: block;
  max-width: 230px;
  color: #ffffff;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-transform: none;
}
body[data-site="jsssistemas"] .jss-v2-coverage-label::after {
  content: "Menos retrabalho. Mais controle para decidir.";
  display: block;
  margin-top: 15px;
  color: #9ed4c7;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
body[data-site="jsssistemas"] .jss-v2-coverage-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body[data-site="jsssistemas"] .jss-cov-item {
  display: block;
  min-height: 92px;
  padding: 19px 20px;
  border: 1px solid rgba(164, 229, 215, .2);
  border-radius: 12px;
  background: rgba(255,255,255,.065);
  color: #bcd4d0;
  font-size: .86rem;
  line-height: 1.45;
}
body[data-site="jsssistemas"] .jss-cov-item::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: 11px;
  border-radius: 50%;
  background: #30c79f;
  color: #06372c;
  font-size: .75rem;
  font-weight: 900;
}
body[data-site="jsssistemas"] .jss-cov-item strong {
  display: block;
  margin-bottom: 4px;
  color: #f2fffb;
  font-size: .95rem;
}

@media (max-width: 720px) {
  body[data-site="jsssistemas"] .jss-v2-coverage-inner { grid-template-columns: 1fr; gap: 28px; }
  body[data-site="jsssistemas"] .jss-v2-coverage-label { max-width: none; }
}
@media (max-width: 480px) {
  body[data-site="jsssistemas"] .jss-v2-coverage-tags { grid-template-columns: 1fr; }
}

body[data-site="jsssistemas"] .jss-v2-modules,
body[data-site="jsssistemas"] .jss-v2-blog { max-width: 1280px; }
body[data-site="jsssistemas"] .jss-v2-section-head h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); letter-spacing: -.055em; }
body[data-site="jsssistemas"] .jss-v2-section-head h2 em { color: var(--jss-green); }
body[data-site="jsssistemas"] .jss-v2-mod-card { border-radius: 14px; box-shadow: 0 12px 30px rgba(16,37,31,.05); }
body[data-site="jsssistemas"] .jss-v2-mod-card.is-highlight { border-color: var(--jss-green); }
body[data-site="jsssistemas"] .jss-v2-card-tag { color: var(--jss-green); }
body[data-site="jsssistemas"] .jss-v2-mod-link:hover { background: var(--jss-deep); border-color: var(--jss-deep); }

/* Compact moving benefit ribbon. */
body[data-site="jsssistemas"] .jss-v2-coverage { padding: 15px clamp(20px, 7vw, 112px); background: var(--jss-deep); overflow: hidden; }
body[data-site="jsssistemas"] .jss-v2-coverage-inner { max-width: 1280px; min-height: 34px; margin: 0 auto; display: flex; align-items: center; gap: 25px; }
body[data-site="jsssistemas"] .jss-v2-coverage-label { flex: 0 0 auto; max-width: none; color: #7de5ca; font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
body[data-site="jsssistemas"] .jss-v2-coverage-label::after { display: none; }
body[data-site="jsssistemas"] .jss-v2-coverage-tags { min-width: 0; display: block; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
body[data-site="jsssistemas"] .jss-benefit-track { display: inline-flex; align-items: center; gap: 25px; min-width: max-content; animation: jss-benefit-marquee 28s linear infinite; }
body[data-site="jsssistemas"] .jss-benefit-track span { color: #f4fffc; font-size: .84rem; font-weight: 650; }
body[data-site="jsssistemas"] .jss-benefit-track i { color: #39cda7; font-size: 1.1rem; font-style: normal; }
@keyframes jss-benefit-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body[data-site="jsssistemas"] .jss-benefit-track { animation: none; } }
@media (max-width: 600px) {
  body[data-site="jsssistemas"] .jss-v2-coverage-inner { gap: 14px; }
  body[data-site="jsssistemas"] .jss-v2-coverage-label { font-size: .63rem; }
  body[data-site="jsssistemas"] .jss-benefit-track { gap: 16px; }
  body[data-site="jsssistemas"] .jss-benefit-track span { font-size: .77rem; }
}

@media (max-width: 1024px) {
  body[data-site="jsssistemas"] .jss-v2-hero-grid { grid-template-columns: 1fr; }
  body[data-site="jsssistemas"] .jss-v2-hero-mockup { max-width: 760px; margin: 16px auto 0; }
}

@media (max-width: 640px) {
  body[data-site="jsssistemas"] .jss-v2-hero { padding-top: 56px; }
  body[data-site="jsssistemas"] .jss-v2-hero-copy h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  body[data-site="jsssistemas"] .jss-v2-hero-mockup { padding: 10px; border-radius: 20px; transform: none; }
  body[data-site="jsssistemas"] .jss-v2-hero-mockup::before { top: -12px; right: 14px; }
  body[data-site="jsssistemas"] .jss-v2-card-main { min-height: 0; padding: 20px; }
}