@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=League+Spartan:wght@600;700&family=Space+Grotesk:wght@600;700&display=swap');

:root{
  --display: "League Spartan", "Space Grotesk", "Trebuchet MS", Arial, sans-serif;
  --bg0:#070606;
  --bg1:#0c0a0a;
  --bg2:#121010;
  --card:#141212cc;
  --card2:#1b1717cc;
  --stroke:#2a2525;
  --text:#f2f2f2;
  --muted:#b9b3b3;
  --muted2:#8f8686;

  --brand:#ff4a01;
  --brand2:#ff6a2a;
  --ok:#35d07f;
  --warn:#ffcc00;
  --bad:#ff3b3b;

  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;

  --max: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-padding-top: 96px;}
body{
  margin:0;
  color: var(--text);
  padding-top:72px;
  background:
    radial-gradient(900px 520px at 12% 25%, rgba(255,106,0,.22), transparent 60%),
    radial-gradient(900px 520px at 88% 30%, rgba(0,255,200,.12), transparent 60%),
    radial-gradient(1200px 700px at 65% 90%, rgba(255,106,0,.12), transparent 60%),
    #050505;
  background-attachment: fixed;
}


a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Layout */
.container{max-width:var(--max); margin:0 auto; padding:0 20px;}
.section{padding:82px 0; position:relative; background:transparent; scroll-margin-top:96px;}
.grid{display:grid; gap:18px;}
.two{grid-template-columns: 1.2fr .8fr;}
.three{grid-template-columns: repeat(3, minmax(0, 1fr));}
.four{grid-template-columns: repeat(4, 1fr);}
@media (max-width: 980px){
  .two{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
  .four{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .four{grid-template-columns:1fr}
  .section{padding:64px 0;}
}

/* Components */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(10,8,8,.85), rgba(10,8,8,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.nav-menu{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
}
.brand{display:flex; align-items:center; gap:10px;}
.logo{
  width:96px; height:auto;
  filter: drop-shadow(0 10px 28px rgba(255,74,1,.12));
}
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  margin-left:auto;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.85);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-backdrop{
  display:none;
}
.nav-links{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.nav-links a{
  font-size:13px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:.2s;
}

h1, h2, h3, h4, .h1, .module-title, .flow-title, .faq summary{
  font-family: var(--display);
}
.nav-links a.active{
  color: var(--brand);
  border-color: rgba(255,74,1,.35);
  background: rgba(255,74,1,.10);
}
.nav-links a:hover{
  color:var(--text);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.cta-row{display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;}

@media (max-width: 980px){
  body.nav-open{overflow:hidden;}
  .nav-inner{padding:12px 0;}
  .nav-toggle{display:inline-flex;}
  .nav-menu{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    padding:18px 20px 22px;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    background: rgba(10,8,8,.96);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
    z-index:60;
  }
  body.nav-open .nav-menu{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  .nav-links{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .nav-links a{
    font-size:14px;
    padding:12px 12px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
  }
  .cta-row{
    justify-content:stretch;
  }
  .cta-row .btn{
    width:100%;
    justify-content:center;
  }
  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease;
    z-index:55;
  }
  body.nav-open .nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  body.nav-open .nav-toggle span:nth-child(1){transform: translateY(6px) rotate(45deg);}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  body.nav-open .nav-toggle span:nth-child(3){transform: translateY(-6px) rotate(-45deg);}
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--text);
  font-weight:650;
  font-size:13px;
  letter-spacing:.2px;
  transition:.2s;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05);}
.btn.primary{
  border-color: rgba(255,74,1,.35);
  background: linear-gradient(180deg, rgba(255,74,1,.95), rgba(255,74,1,.78));
  box-shadow: 0 16px 50px rgba(255,74,1,.18);
  position: relative;
  overflow: hidden;
  animation: cta-pulse 2.2s ease-in-out infinite;
}
.btn.primary:hover{filter:saturate(1.05); transform: translateY(-1px);}
.btn .dot{width:9px; height:9px; border-radius:999px; background: var(--brand); box-shadow:0 0 0 6px rgba(255,74,1,.18);}

.btn.primary::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), transparent 55%);
  opacity:.35;
  animation: cta-sheen 2.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes cta-pulse{
  0%, 100%{transform: translateY(0); box-shadow: 0 16px 50px rgba(255,74,1,.22);}
  50%{transform: translateY(-2px); box-shadow: 0 24px 70px rgba(255,74,1,.35);}
}

@keyframes cta-sheen{
  0%{transform: translateX(-20%) rotate(-8deg); opacity:.2;}
  50%{transform: translateX(10%) rotate(-8deg); opacity:.45;}
  100%{transform: translateX(35%) rotate(-8deg); opacity:.2;}
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
  width:max-content;
}
.pill strong{color:var(--text)}
.pill .jp{color:rgba(255,255,255,.72); font-weight:600;}
.h1{
  font-size: clamp(40px, 4.6vw, 64px);
  line-height:1.02;
  letter-spacing:-.8px;
  margin:14px 0 14px;
}
.sub{
  font-size: 18px;
  line-height:1.55;
  color:var(--muted);
  max-width: 62ch;
}
.no-wrap{white-space: nowrap;}
.kpis{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.kpis .kpi{
  padding:12px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  min-width: 190px;
}
.kpis .kpi .v{font-size:20px; font-weight:800}
.kpis .kpi .l{font-size:12px; color:var(--muted2); margin-top:2px}

.card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(240px 140px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(220px 120px at 90% 10%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 4px);
  opacity:.55;
  pointer-events:none;
}
.card-inner{padding:22px; position:relative; z-index:1;}
.card h3{margin:0 0 10px; font-size:18px; letter-spacing:-.2px;}
.card p{margin:0; color:var(--muted); font-size:14px; line-height:1.6;}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.78);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.badge .b{width:8px; height:8px; border-radius:999px; background: var(--brand);}
.badge.ok .b{background: var(--ok);}
.badge.warn .b{background: var(--warn);}
.badge.bad .b{background: var(--bad);}

.hero{
  padding: 110px 0 80px;
  position: relative;
  min-height: calc(100vh - 72px);
  display:flex;
  align-items:center;
}

/* GRID */
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  column-gap: 64px;
  row-gap: 28px;
  align-items: center;
}

@media (max-width: 980px){
  .hero-grid{
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

/* HERO visual */
.hero-visual{
  position: relative;
  background: transparent;
  overflow: visible;
}

/* PRODUCT IMAGE */
.hero-shot{
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 50px 160px rgba(0,0,0,.7);

  /* deslocamento CONTROLADO */
  transform-origin: top right;
  transform: translate(0, -40px) scale(1.08);
}

/* MOBILE RESET */
@media (max-width: 980px){
  .hero{
    min-height: auto;
    padding: 90px 0 60px;
  }
  .hero-shot{
    width: 100%;
    transform: none;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
  }
  .no-wrap{white-space: normal;}
}


.mock{
  position:relative;
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(800px 360px at 55% 30%, rgba(255,74,1,.14), transparent 50%),
              radial-gradient(650px 360px at 20% 70%, rgba(53,208,127,.10), transparent 50%),
              rgba(255,255,255,.02);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 460px;
}
.mock-top{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}
.mock-top .left{display:flex; gap:10px; align-items:center;}
.dots{display:flex; gap:7px;}
.dots span{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.12)}
.dots span:nth-child(1){background:rgba(255,59,59,.55)}
.dots span:nth-child(2){background:rgba(255,204,0,.50)}
.dots span:nth-child(3){background:rgba(53,208,127,.45)}
.mock-top .title{font-size:12px; color:rgba(255,255,255,.78);}
.mock-body{padding:14px;}
.shot{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  background: rgba(0,0,0,.25);
}
.shot img{width:100%; height:auto;}

.feature{
  display:flex; gap:12px; align-items:flex-start;
  padding:18px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition:.2s;
}
.feature:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04);}
.ic{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background: radial-gradient(24px 24px at 30% 20%, rgba(255,255,255,.18), transparent 60%),
              rgba(255,74,1,.16);
  border:1px solid rgba(255,74,1,.25);
  flex:0 0 auto;
}
.ic svg{width:18px; height:18px; fill:var(--brand)}
.feature h4{margin:0 0 6px; font-size:14px;}
.feature p{margin:0; font-size:13px; color:var(--muted); line-height:1.45;}

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin:26px 0;
}

.logo-chip{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding:12px;
  display:grid; place-items:center;
  min-height:52px;
  color:rgba(255,255,255,.65);
  font-size:12px;
  text-align:center;
}

.logos{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.hero-logos{
  grid-column: 1 / -1;
}

.logo-carousel{
  --visible-count: 8;
  align-items: center;
}

.logo-carousel-viewport{
  flex: 1;
  overflow: hidden;
  padding-top: 3px;
}

.logo-carousel-track{
  display:flex;
  gap:12px;
  transition: transform .45s ease;
  will-change: transform;
}

.logo-carousel-item{
  flex: 0 0 calc((100% - (12px * (var(--visible-count) - 1))) / var(--visible-count));
  display:flex;
  justify-content:center;
}

.logo-carousel-btn{
  width:34px;
  height:34px;
  flex: 0 0 34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color:rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}

.logo-carousel-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}

.logo-carousel-btn span{
  font-size:22px;
  line-height:1;
  transform: translateY(-1px);
}

.logo-carousel.no-carousel .logo-carousel-btn{
  display:none;
}

@media (max-width: 980px){
  .logos{
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .logo-carousel{
    --visible-count: 4;
    flex-wrap: nowrap;
  }
}
@media (max-width: 560px){
  .logos{
    gap: 10px;
  }

  .logo-carousel{
    --visible-count: 4;
  }
}


.client-logo{
  height: 84px;
  width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: .95;
  filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.client-logo:hover{
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-3px);
}



.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
.g{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  overflow:hidden;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  position:relative;
}
.g::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 220px at 30% 10%, rgba(255,74,1,.08), transparent 60%);
  pointer-events:none;
}
.g img{width:100%; height:100%; object-fit:cover;}
.g span{
  position:absolute; left:12px; bottom:10px;
  font-size:12px; color:rgba(255,255,255,.82);
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:7px 10px;
  backdrop-filter: blur(8px);
}
.g.big{grid-column: span 7; aspect-ratio: 16/9;}
.g.mid{grid-column: span 5; aspect-ratio: 16/10;}
.g.small{grid-column: span 4; aspect-ratio: 16/11;}
@media (max-width: 980px){
  .g.big,.g.mid,.g.small{grid-column: span 12;}
}

.quote{
  padding:18px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.quote p{margin:0; color:rgba(255,255,255,.85); line-height:1.55;}
.quote .who{margin-top:10px; color:var(--muted); font-size:13px;}
.quote .who strong{color:var(--text)}

.coverage-inner{
  display:grid;
  gap:22px;
}
.coverage-map{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  background: radial-gradient(800px 360px at 20% 20%, rgba(255,74,1,.12), transparent 60%),
              rgba(0,0,0,.2);
}
.coverage-map::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 240px at 70% 20%, rgba(255,74,1,.18), transparent 60%);
  opacity:.8;
  pointer-events:none;
}
.coverage-map img{
  width:100%;
  height:auto;
  display:block;
}
.coverage-caption{
  position:absolute;
  left:14px;
  bottom:14px;
  font-size:12px;
  color:rgba(255,255,255,.82);
  padding:7px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.coverage-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}
.coverage-stat{
  padding:16px 18px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  text-align:center;
}
.stat-value{
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 800;
  letter-spacing:-.6px;
  color: var(--text);
}
.stat-label{
  margin-top:4px;
  font-size:11px;
  letter-spacing:.9px;
  text-transform: uppercase;
  color: var(--muted2);
}
.stat-note{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
}
@media (max-width: 980px){
  .coverage-stats{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px){
  .coverage-stats{grid-template-columns: 1fr;}
  .coverage-caption{
    position:static;
    margin:12px;
    display:inline-flex;
  }
}

.faq details{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding:14px 14px;
}
.faq details + details{margin-top:12px;}
.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:14px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq .a{margin-top:10px; color:var(--muted); line-height:1.6; font-size:13px;}

.footer{
  padding:40px 0 60px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18));
}
.footer .logo{
  width:110px;
  height:auto;
  filter: none;
}
.footer .cols{display:grid; grid-template-columns: 1.3fr .7fr .7fr; gap:20px;}
@media (max-width: 980px){ .footer .cols{grid-template-columns:1fr} }
.small{font-size:12px; color:var(--muted2); line-height:1.6;}
.linklist a{display:block; padding:7px 0; color:var(--muted); font-size:13px;}
.linklist a:hover{color:var(--text)}

/* Modal (lightbox) */
.modal{
  position:fixed; inset:0; z-index:100;
  background: rgba(0,0,0,.72);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.modal.on{display:flex;}
.modal .box{
  max-width: min(1100px, 96vw);
  max-height: 86vh;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background: rgba(10,8,8,.9);
  box-shadow: var(--shadow);
  position:relative;
}
.modal img{
  max-width:100%;
  max-height:86vh;
  display:block;
}
.modal .x{
  position:absolute; top:10px; right:10px;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  display:grid; place-items:center;
  cursor:pointer;
}
.modal .x:hover{background: rgba(255,255,255,.06);}
.modal .x svg{width:18px; height:18px; fill:rgba(255,255,255,.85);}

/* Form (added) */
.form{margin-top:12px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field span{font-size:12px; color:rgba(255,255,255,.78); font-weight:650;}
.field input, .field textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
.field input:focus, .field textarea:focus{
  border-color: rgba(255,74,1,.35);
  box-shadow: 0 0 0 6px rgba(255,74,1,.10);
}
.honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-status{
  margin-top:12px;
  min-height:18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
}
.form-status.show{opacity:1; transform: translateY(0);}
.form-status.ok{
  color:var(--ok);
  border-color: rgba(53,208,127,.35);
  background: rgba(53,208,127,.10);
}
.form-status.error{
  color:var(--bad);
  border-color: rgba(255,59,59,.35);
  background: rgba(255,59,59,.10);
}
.form-status.sending{
  color:var(--muted);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.status-ic{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  display:none;
}
.form-status.ok .status-ic-ok{display:block;}
.form-status.error .status-ic-err{display:block;}
.form.is-loading .btn.primary{
  opacity:.75;
  pointer-events:none;
}
.form.is-loading .btn.primary{
  animation: none;
}
.form.is-loading .btn.primary::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  display:inline-block;
  animation: spin 1s linear infinite;
  margin-right:8px;
}
.form.is-loading .btn.primary::after{
  opacity:.15;
}

.toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:200;
  max-width: min(360px, 92vw);
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,13,13,.92);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  opacity:0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
  font-size:12px;
  letter-spacing:.2px;
}
.toast.show{opacity:1; transform: translateY(0);}
.toast.ok{
  border-color: rgba(53,208,127,.35);
  background: linear-gradient(180deg, rgba(53,208,127,.16), rgba(15,13,13,.92));
}
.toast.error{
  border-color: rgba(255,59,59,.35);
  background: linear-gradient(180deg, rgba(255,59,59,.16), rgba(15,13,13,.92));
}

@keyframes spin{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}

/* =========================
   SECTION BACKGROUNDS (intentional)
   ========================= */

.hero{
  position: relative;
  padding: 72px 0 36px;
  background:
    radial-gradient(900px 520px at 12% 25%, rgba(255,106,0,.22), transparent 60%),
    radial-gradient(900px 520px at 88% 30%, rgba(0,255,200,.12), transparent 60%),
    radial-gradient(1200px 700px at 65% 90%, rgba(255,106,0,.12), transparent 60%),
    #050505;
}

/* separador “natural” no fim do hero */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:140px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(5,5,5,0), rgba(5,5,5,1));
}

/* seção seguinte (ex: #why) com outro clima */
#why, .why{
  position: relative;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(0,255,200,.12), transparent 55%),
    radial-gradient(900px 520px at 85% 80%, rgba(255,106,0,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)),
    #050505;
}

/* separador no topo do #why pra “colar” com o hero */
#why::before, .why::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;
  height:120px;
  pointer-events:none;
  background: linear-gradient(to top, rgba(5,5,5,0), rgba(5,5,5,1));
}

/* soft separator at bottom of #why to blend into next section */
#why::after, .why::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:120px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(5,5,5,0), rgba(5,5,5,1));
}


/* distinct section tones for navigation clarity */
#modules{
  position: relative;
  background:
    radial-gradient(800px 480px at 80% 20%, rgba(255,74,1,.18), transparent 60%),
    radial-gradient(900px 520px at 15% 85%, rgba(0,255,200,.08), transparent 60%),
    linear-gradient(180deg, rgba(8,6,6,.75), rgba(6,5,5,.45)),
    #050505;
}

#screens{
  position: relative;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(120,140,255,.12), transparent 60%),
    radial-gradient(800px 500px at 85% 70%, rgba(255,106,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(6,7,10,.75), rgba(5,5,6,.55)),
    #050505;
}

#coverage{
  position: relative;
  background:
    radial-gradient(900px 520px at 75% 15%, rgba(53,208,127,.14), transparent 60%),
    radial-gradient(900px 520px at 20% 80%, rgba(255,74,1,.08), transparent 60%),
    linear-gradient(180deg, rgba(6,9,7,.75), rgba(5,5,5,.55)),
    #050505;
}

#faq{
  position: relative;
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(255,204,0,.12), transparent 60%),
    radial-gradient(900px 520px at 85% 75%, rgba(0,255,200,.08), transparent 60%),
    linear-gradient(180deg, rgba(9,7,5,.75), rgba(5,5,5,.55)),
    #050505;
}

#contact{
  position: relative;
  background:
    radial-gradient(900px 520px at 85% 20%, rgba(255,74,1,.18), transparent 60%),
    radial-gradient(900px 520px at 15% 80%, rgba(120,140,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(8,6,8,.75), rgba(5,5,5,.55)),
    #050505;
}

.footer{
  position: relative;
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(255,74,1,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,5,5,.2), rgba(0,0,0,.45)),
    #050505;
}

/* subtle blends between sections to avoid hairline seams */
#modules::before,
#screens::before,
#coverage::before,
#faq::before,
#contact::before,
.footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;
  height:80px;
  pointer-events:none;
  background: linear-gradient(to top, rgba(5,5,5,0), rgba(5,5,5,1));
}
#modules::after,
#screens::after,
#coverage::after,
#faq::after,
#contact::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:80px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(5,5,5,0), rgba(5,5,5,1));
}



/* avoid forcing all sections to transparent (was overriding hero/#why backgrounds) */


/* Bigger module cards for readability */
#modules .card{min-height: 210px;}
@media (max-width: 980px){
  #modules .card{min-height: auto;}
}

#modules .card-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}
#modules .module-title{
  margin:0;
  font-family: "Bebas Neue", "Space Grotesk", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(26px, 2.25vw, 33px);
  font-weight: 700;
  letter-spacing:1.2px;
  line-height:1.05;
  color: #ffffff;
  text-shadow: none;
  margin-top: 0;
}
.module-desc{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.module-icon{
  width:160px;
  height:160px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background: none;
  box-shadow: none;
  margin-top:0;
  margin-bottom:0;
}
.module-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}


}


.flow-arrow{transform: rotate(90deg); justify-content:flex-start;}
}


.flow-arrow{height:26px;}
  .flow-arrow span{width:80px; margin-left:10px;}
  .flow-arrow span::after{right:-8px;}
}


.flow-card::before{display:none;}
  .flow-arrow{height:26px;}
  .flow-arrow span{width:80px; margin-left:10px;}
  .flow-arrow span::after{right:-8px;}
}


/* Why flow - premium horizontal story */
.why-flow{margin-top:20px;}
.flow-card{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(255,74,1,.10), transparent 60%),
    radial-gradient(900px 360px at 80% 0%, rgba(0,255,200,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  padding:24px;
  display:grid;
  grid-template-columns: 1fr 90px 1.05fr 90px 1fr;
  gap:18px;
  align-items:stretch;
  position:relative;
  overflow:hidden;
}
.flow-card > *{position:relative; z-index:1;}
.flow-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 420px at 12% 0%, rgba(255,74,1,.14), transparent 60%),
    radial-gradient(900px 360px at 88% 6%, rgba(0,255,200,.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px);
  opacity:.6;
  pointer-events:none;
}
.flow-card::after{
  content:"";
  position:absolute; inset:1px;
  border-radius: 27px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
  opacity:.5;
}
.flow-step{
  position:relative;
  border-radius: 22px;
  padding:20px 22px;
  background: linear-gradient(180deg, rgba(8,8,8,.6), rgba(6,6,6,.35));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 50px rgba(0,0,0,.45);
  isolation: isolate;
  display:grid;
  grid-template-rows: auto 1fr;
  gap:14px;
}
.flow-step > *{position:relative; z-index:1;}
.flow-step::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 22px;
  padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  z-index:0;
}
.flow-step.break{background: linear-gradient(180deg, rgba(12,10,10,.75), rgba(8,7,7,.45));}
.flow-step.deliver{background: linear-gradient(180deg, rgba(10,10,14,.75), rgba(7,7,9,.45));}
.flow-step.kpi{background: linear-gradient(180deg, rgba(10,12,10,.75), rgba(7,9,7,.45));}

.flow-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0;
  min-height:92px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.flow-ic{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background-color: rgba(255,255,255,.08);
  background-image:
    radial-gradient(18px 18px at 30% 20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(26px 26px at 80% 90%, rgba(255,255,255,.18), transparent 60%);
  background-blend-mode: screen;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  flex:0 0 42px;
  position:relative;
  overflow:hidden;
}
.flow-ic::after{
  content:"";
  position:absolute; inset:1px;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 60%);
  opacity:.6;
  pointer-events:none;
}
.flow-ic svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:var(--text);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}
.flow-ic.break{background-color: rgba(255,74,1,.20); border-color: rgba(255,74,1,.35);}
.flow-ic.deliver{background-color: rgba(120,140,255,.22); border-color: rgba(120,140,255,.35);}
.flow-ic.kpi{background-color: rgba(53,208,127,.22); border-color: rgba(53,208,127,.35);}

.flow-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}
.flow-title{margin-top:6px; font-size:18px; font-weight:800; letter-spacing:-.2px; line-height:1.25;}

/* unified bullets */
.flow-list{margin:0; padding-left:0; color:var(--muted); font-size:14px; line-height:1.65;}
.flow-list li{margin:6px 0; list-style: none; position:relative; padding-left:16px;}
.flow-list li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(255,74,1,.15);
}

.flow-arrow{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  align-self:center;
}
.flow-arrow-img{
  width:92px;
  height:auto;
  opacity:.95;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
}

@media (max-width: 980px){
  .flow-card{grid-template-columns: 1fr;}
  .flow-arrow{height:26px;}
  .flow-arrow-img{width:70px; transform: rotate(90deg);}
  .flow-head{min-height:0;}
}