:root{
  --navy:#03182b;
  --navy2:#0a2f52;
  --blue:#0b94e1;
  --cyan:#24b7f4;
  --green:#51be43;
  --ink:#123f72;
  --muted:#627d95;
  --line:#d7e6f1;
  --soft:#f5fbff;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1280px,94%);margin:auto}

.gs-header{
  position:sticky;top:0;z-index:100;
  height:76px;background:rgba(3,24,43,.97);
  border-bottom:1px solid #174864
}
.gs-nav{
  width:min(1400px,96%);height:100%;margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:28px
}
.gs-brand{
  color:#fff;font-size:28px;font-weight:900;letter-spacing:-.02em
}
.gs-brand b{color:var(--cyan)}
.gs-links{
  display:flex;align-items:center;gap:28px;
  color:#dceaf5;font-size:14px;font-weight:700
}
.gs-links a:hover{color:#fff}
.gs-client{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;border-radius:10px;
  background:linear-gradient(135deg,#0ca3ef,#0b79d4);
  color:#fff;font-size:13px;font-weight:900
}

.gs-hero{background:#fff;padding:0}
.gs-hero-wrap{
  width:min(1440px,100%);
  margin:auto;
  box-shadow:0 26px 60px rgba(3,24,43,.10)
}
.gs-hero img{width:100%;height:auto}

.gs-strip{
  background:#f1f8fd;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 18px
}
.gs-strip-grid{
  width:min(1280px,94%);margin:auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0
}
.gs-strip-item{
  text-align:center;padding:12px 16px;
  border-right:1px solid #d2e3ef
}
.gs-strip-item:last-child{border-right:0}
.gs-strip-item strong{
  display:block;color:#097ec8;font-size:28px;font-weight:900
}
.gs-strip-item small{
  display:block;margin-top:5px;color:#5d7890;font-size:12px;font-weight:700
}

.section{padding:68px 20px}
.section.soft{background:var(--soft)}
.section.dark{
  background:
    radial-gradient(circle at 85% 0,rgba(36,183,244,.18),transparent 30%),
    linear-gradient(135deg,#071b2e,#0b2f4f);
  color:#fff
}
.head{
  max-width:940px;margin:0 auto 36px;text-align:center
}
.eyebrow{
  color:#0a92de;font-size:12px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase
}
.dark .eyebrow{color:#7ed8ff}
.head h2{
  margin:9px 0 12px;
  color:var(--ink);
  font-size:40px;line-height:1.08
}
.dark .head h2{color:#fff}
.head p{
  margin:0;color:var(--muted);
  font-size:17px;line-height:1.68
}
.dark .head p{color:#c6d8e7}

.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.card{
  padding:28px;border-radius:20px;border:1px solid var(--line);background:#fff
}
.dark .card{background:#0f2a42;border-color:#224d71}
.icon{
  width:56px;height:56px;display:grid;place-items:center;
  border-radius:16px;margin-bottom:16px;
  color:#fff;font-size:23px;font-weight:900;
  background:linear-gradient(135deg,#0ca3ef,#0b70c7)
}
.card h3{
  margin:0 0 9px;color:#123f72;font-size:24px
}
.dark .card h3{color:#fff}
.card p{
  margin:0;color:var(--muted);font-size:14px;line-height:1.65
}
.dark .card p{color:#c5d8e7}
.card ul{
  margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px
}
.card li{
  color:var(--ink);font-size:13px;line-height:1.46
}
.dark .card li{color:#dce7ef}
.card li::before{
  content:"✓";display:inline-block;margin-right:8px;
  color:var(--green);font-weight:900
}

.solution-card{
  padding:22px;border-radius:18px;border:1px solid var(--line);
  background:#fff;display:flex;flex-direction:column;gap:12px
}
.solution-card .top{
  display:flex;align-items:center;gap:12px
}
.solution-card .bubble{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;color:#fff;font-size:20px;font-weight:900
}
.solution-card:nth-child(1) .bubble{background:linear-gradient(135deg,#1da9ef,#1379d3)}
.solution-card:nth-child(2) .bubble{background:linear-gradient(135deg,#7e61ff,#593ce7)}
.solution-card:nth-child(3) .bubble{background:linear-gradient(135deg,#27c981,#13995c)}
.solution-card:nth-child(4) .bubble{background:linear-gradient(135deg,#ffb020,#f08000)}
.solution-card:nth-child(5) .bubble{background:linear-gradient(135deg,#13b7ff,#0a6fd1)}
.solution-card h3{margin:0;color:#123f72;font-size:24px}
.solution-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.62}
.solution-card .tag{
  display:inline-flex;align-self:flex-start;margin-top:4px;
  min-height:40px;padding:0 16px;border-radius:10px;
  align-items:center;justify-content:center;
  border:1px solid #c8ddec;background:#f5fbff;
  color:#0b79c7;font-size:13px;font-weight:900
}

.story{
  display:grid;grid-template-columns:1.2fr .8fr;gap:18px
}
.story-main,.story-side{
  padding:32px;border-radius:22px;border:1px solid #234d70;background:#0f2d47
}
.story-main h3,.story-side h3{margin:0 0 12px;color:#fff;font-size:30px}
.story-main p,.story-side p{margin:0;color:#c9dbe8;line-height:1.75}
.story-main ul,.story-side ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.story-main li,.story-side li{color:#e4edf4;font-size:14px}
.story-main li::before,.story-side li::before{content:"✓";margin-right:8px;color:#65e87a;font-weight:900}

.process{
  display:grid;grid-template-columns:repeat(9,1fr);gap:8px;align-items:center
}
.step{
  min-height:185px;padding:20px 16px;text-align:center;
  border:1px solid var(--line);border-radius:16px;background:#fff
}
.step strong{display:block;color:#0e4071;font-size:19px;margin-bottom:8px}
.step p{margin:0;color:#637f98;font-size:12px;line-height:1.55}
.arrow{text-align:center;color:#1aa6f2;font-size:28px;font-weight:900}

.kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.kpi{
  padding:26px;text-align:center;border:1px solid var(--line);
  border-radius:18px;background:#fff
}
.kpi strong{
  display:block;color:#0b83d0;font-size:34px;font-weight:900
}
.kpi span{
  display:block;margin-top:8px;color:#637d95;font-size:13px;font-weight:700
}

.cta{
  padding:38px;border-radius:22px;color:#fff;
  background:
    radial-gradient(circle at 85% 0,rgba(36,183,244,.20),transparent 28%),
    linear-gradient(135deg,#0b3150,#031b2f)
}
.cta h3{margin:0 0 10px;font-size:34px}
.cta p{margin:0;color:#c5d8e7;line-height:1.7}
.whatsapp{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;margin-top:22px;padding:0 22px;border-radius:11px;
  background:#22c55e;color:#fff;font-weight:900
}

.faq details{
  padding:16px 18px;margin-bottom:10px;border:1px solid var(--line);
  border-radius:14px;background:#fff
}
.faq summary{cursor:pointer;color:#123f72;font-weight:900}
.faq p{margin:10px 0 0;color:var(--muted);line-height:1.62}

.footer{
  background:#03182b;color:#9eb7cb;padding:42px 20px 18px
}
.footer-grid{
  width:min(1280px,94%);margin:auto;display:grid;
  grid-template-columns:1.1fr .8fr .8fr 1.4fr;gap:26px
}
.footer strong{color:#fff}
.footer small{display:block;margin-top:8px;line-height:1.68}
.footer-bottom{
  width:min(1280px,94%);margin:24px auto 0;padding-top:14px;
  border-top:1px solid #16415e;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:10px
}

@media(max-width:1100px){
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2,.kpis,.story{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg)}
}
@media(max-width:900px){
  .gs-links{display:none}
  .gs-strip-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .gs-strip-grid,.footer-grid,.grid-5{grid-template-columns:1fr}
  .gs-strip-item{border-right:0;border-bottom:1px solid #d2e3ef}
  .head h2{font-size:31px}
  .gs-brand{font-size:23px}
}


/* =========================================================
   PRODUTOS CLICAVEIS SOBRE O BANNER PRINCIPAL
   ========================================================= */
.gs-hero-wrap{
  position:relative;
}

.gs-product-hotspots{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.gs-product-hotspot{
  position:absolute;
  top:54.4%;
  height:30.0%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 8px 13px;
  border:2px solid transparent;
  border-radius:14px;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.gs-product-hotspot span{
  opacity:0;
  transform:translateY(6px);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(3,24,43,.94);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:opacity .18s ease,transform .18s ease;
}

.gs-product-hotspot:hover,
.gs-product-hotspot:focus-visible{
  transform:translateY(-3px);
  border-color:#61d4ff;
  background:rgba(28,168,235,.06);
  box-shadow:inset 0 0 28px rgba(28,168,235,.14),0 0 20px rgba(28,168,235,.32);
  outline:none;
}

.gs-product-hotspot:hover span,
.gs-product-hotspot:focus-visible span{
  opacity:1;
  transform:translateY(0);
}

.hs-portaria{left:0.9%;width:17.8%}
.hs-govoip{left:18.8%;width:18.0%}
.hs-sentinela{left:36.9%;width:18.0%}
.hs-gocrm{left:55.0%;width:18.0%}
.hs-porteiro{left:73.1%;width:18.2%}

@media(max-width:700px){
  .gs-product-hotspot{padding-bottom:5px;border-radius:8px}
  .gs-product-hotspot span{display:none}
}