/* =========================================================
   RAIO7 DIGITAL — Landing / Tráfego Pago Duque de Caxias
   Palette: brand navy + gold lightning. One bold accent.
   ========================================================= */

:root{
  --navy:      #0A1830;   /* base background            */
  --navy-2:    #0E2142;   /* panels                     */
  --navy-3:    #14294C;   /* cards                      */
  --navy-line: rgba(233,185,58,.16);
  --hair:      rgba(233,235,244,.09);

  --gold:      #E9B93A;   /* the raio — primary accent  */
  --gold-2:    #F6CF5C;   /* highlight                  */
  --gold-deep: #C89523;

  --wa:        #25D366;   /* WhatsApp, functional only  */
  --wa-2:      #1eb857;

  --fog:       #EEF2F8;   /* text on navy               */
  --mist:      #9BAAC4;   /* muted                      */
  --mist-2:    #61728f;   /* faint                      */

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1120px;
  --r: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy);
  color:var(--fog);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--navy); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap.narrow{ max-width:820px; }

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 22px;
}
.eyebrow.gold{ color:var(--gold-2); }

.h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem, 4.3vw, 3.15rem);
  line-height:1.04; letter-spacing:-.02em;
  margin:0 0 22px; text-wrap:balance;
}
.h2.big{ font-size:clamp(2.1rem, 5vw, 3.7rem); }
.hl{ color:var(--gold); }
.muted-line{ color:var(--mist); }

.lead{ font-size:1.16rem; color:#d6deec; max-width:60ch; margin:0 0 20px; }
.section{ padding:clamp(72px,10vw,128px) 0; position:relative; }

/* ---------- Buttons ---------- */
.btn{
  --pv:14px; --ph:24px;
  display:inline-flex; align-items:center; gap:10px;
  padding:var(--pv) var(--ph);
  font-family:var(--body); font-weight:700; font-size:1rem;
  border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s;
  line-height:1;
}
.btn .ic{ width:1.15em; height:1.15em; }
.btn:focus-visible{ outline:3px solid var(--gold-2); outline-offset:3px; }

.btn-gold{ background:var(--gold); color:#25190a; box-shadow:0 8px 30px -10px rgba(233,185,58,.6); }
.btn-gold:hover{ background:var(--gold-2); transform:translateY(-2px); }

.btn-wa{ background:var(--wa); color:#04220f; box-shadow:0 8px 30px -12px rgba(37,211,102,.6); }
.btn-wa:hover{ background:var(--wa-2); transform:translateY(-2px); }

.btn-ghost{ background:transparent; color:var(--fog); border-color:var(--navy-line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

.btn-lg{ --pv:17px; --ph:30px; font-size:1.08rem; }
.btn-sm{ --pv:11px; --ph:18px; font-size:.9rem; }

/* ---------- CTA band (entre seções) ---------- */
.cta-band{
  background:linear-gradient(100deg, rgba(233,185,58,.11), rgba(233,185,58,.025) 60%);
  border-block:1px solid var(--navy-line); position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; top:-40%; right:-4%; width:min(38vw,420px); height:180%;
  background:linear-gradient(160deg, transparent 42%, rgba(233,185,58,.4) 50%, transparent 58%);
  clip-path:polygon(58% 0,42% 44%,60% 44%,34% 100%,44% 56%,28% 56%);
  opacity:.1; pointer-events:none;
}
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,4vw,48px); flex-wrap:wrap;
  padding-block:clamp(32px,5vw,52px); position:relative; z-index:1;
}
.cta-text{ display:flex; align-items:center; gap:16px; }
.cta-bolt{ width:42px; height:42px; color:var(--gold); flex:none; filter:drop-shadow(0 0 10px rgba(233,185,58,.4)); }
.cta-band p{
  font-family:var(--display); font-weight:700; line-height:1.14; margin:0;
  font-size:clamp(1.22rem,2.6vw,1.85rem); max-width:24ch; text-wrap:balance;
}
.cta-band p .hl{ color:var(--gold); }
@media (max-width:680px){
  .cta-bolt{ width:34px; height:34px; }
  .cta-band-inner .btn{ width:100%; justify-content:center; }
}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:28px;
  padding:14px 24px;
  background:rgba(10,24,48,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.brand{ display:inline-flex; align-items:center; gap:11px; margin-right:auto; }
.brand-bolt{ width:34px; height:34px; filter:drop-shadow(0 0 10px rgba(233,185,58,.35)); }
.brand-word{ font-family:var(--display); font-weight:800; font-size:1.24rem; letter-spacing:-.01em; }
.brand-word em{ font-style:normal; font-weight:600; font-size:.7em; color:var(--mist); letter-spacing:.04em; }
.brand-seven{ color:var(--gold); }

.nav{ display:flex; gap:26px; }
.nav a{ font-size:.94rem; color:var(--mist); font-weight:500; transition:color .18s; }
.nav a:hover{ color:var(--fog); }
.nav-cta{ margin-left:6px; }

/* ---------- 1. HERO ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(96px,15vh,190px) 0 clamp(70px,9vw,110px); }
.hero-inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; position:relative; z-index:2; }
.storm{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% -8%, rgba(233,185,58,.18), transparent 46%),
    radial-gradient(90% 70% at 8% 110%, rgba(20,41,76,.9), transparent 60%),
    linear-gradient(180deg, #0b1c38 0%, var(--navy) 70%);
}
.storm::before{  /* grain + a faint bolt streak */
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.storm::after{
  content:""; position:absolute; top:-6%; right:9%; width:min(46vw,560px); height:120%;
  background:linear-gradient(160deg, transparent 40%, rgba(233,185,58,.5) 50%, transparent 60%);
  clip-path:polygon(58% 0,42% 44%,60% 44%,34% 100%,44% 56%,28% 56%);
  opacity:.14; filter:blur(1px);
  animation:flicker 7s ease-in-out infinite;
}
@keyframes flicker{ 0%,92%,100%{opacity:.1} 93%{opacity:.5} 95%{opacity:.14} 97%{opacity:.42} }

.hero-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.5rem, 6.4vw, 5.3rem);
  line-height:.99; letter-spacing:-.028em;
  margin:0 0 26px; max-width:16ch; text-wrap:balance;
}
.hero-title .hl{ color:var(--gold); }
.hero-title .place{ color:var(--gold); white-space:nowrap; position:relative; }
.hero-title .place::after{
  content:""; position:absolute; left:0; right:0; bottom:.02em; height:.08em;
  background:var(--gold); border-radius:3px; opacity:.4;
  transform:scaleX(0); transform-origin:left;
  animation:place-underline .7s .5s ease forwards;
}
@keyframes place-underline{ to{ transform:scaleX(1); } }
.hero-sub{ font-size:clamp(1.08rem,1.6vw,1.32rem); color:#cfd8e8; max-width:62ch; margin:0 0 36px; }
.hero-sub strong{ color:var(--fog); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 2. CREDIBILIDADE ---------- */
.credbar{ border-block:1px solid var(--hair); background:var(--navy-2); overflow:hidden; }
.cred-track{
  display:flex; align-items:center; gap:0; width:max-content;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; color:var(--mist);
  padding:15px 0; white-space:nowrap;
  animation:marquee 34s linear infinite;
}
.cred-track span{ padding:0 26px; }
.cred-track b{ color:var(--gold); font-weight:700; }
.cred-track i{ width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.6; flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 3. PROBLEMA ---------- */
.problem{ background:linear-gradient(180deg, var(--navy) 0%, #091528 100%); }
.problem .h2{ font-size:clamp(2rem,4.8vw,3.4rem); }
.pains{ list-style:none; margin:34px 0 30px; padding:0; display:grid; gap:2px; }
.pains li{
  position:relative; padding:18px 20px 18px 52px;
  border:1px solid var(--hair); border-radius:10px;
  background:rgba(255,255,255,.015); color:#c4cee0; font-size:1.05rem;
}
.pains li::before{
  content:"✕"; position:absolute; left:20px; top:17px;
  color:#7d4b4b; font-weight:700; font-family:var(--mono);
}
.pains li + li{ margin-top:8px; }
.turn{ font-size:1.22rem; line-height:1.55; border-left:3px solid var(--gold); padding-left:22px; }
.turn strong{ color:var(--gold); }

/* ---------- 4. MÉTODO RAIO ---------- */
.metodo{ background:var(--navy); }
.raio-spine{ position:relative; margin-top:56px; }
.spine-svg{
  position:absolute; left:clamp(24px,4vw,40px); top:20px; bottom:20px;
  width:40px; height:calc(100% - 40px); overflow:visible; z-index:0;
}
.spine-path{
  fill:none; stroke:var(--gold); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(233,185,58,.55));
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:none;
}
.raio-spine.lit .spine-path{ animation:draw 1.8s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(30px,5vw,58px); }
.step{
  display:grid; grid-template-columns:clamp(70px,10vw,104px) 1fr; gap:clamp(18px,3vw,40px);
  align-items:start; position:relative; z-index:1;
}
.step-mark{
  font-family:var(--display); font-weight:800;
  font-size:clamp(3rem,7vw,5.4rem); line-height:1;
  color:var(--navy); -webkit-text-stroke:2px var(--gold);
  text-align:center;
  transition:color .5s ease, text-shadow .5s ease, transform .5s ease;
}
.step.on .step-mark{ color:var(--gold); text-shadow:0 0 26px rgba(233,185,58,.55); }
.step-body{ padding-top:6px; }
.step-body h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.4vw,1.75rem); margin:0 0 10px; }
.step-body p{ margin:0; color:var(--mist); max-width:56ch; }

/* ---------- 5. O QUE ENTREGAMOS ---------- */
.entrega{ background:linear-gradient(180deg,#091528,var(--navy-2)); }
.grid-serv{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:46px; }
.scard{
  padding:26px 22px 28px; border:1px solid var(--hair); border-radius:var(--r);
  background:var(--navy-3); transition:transform .2s ease, border-color .2s, background .2s;
  position:relative; overflow:hidden;
}
.scard::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.scard:hover{ transform:translateY(-4px); border-color:var(--navy-line); background:#182f57; }
.scard:hover::before{ transform:scaleX(1); }
.scard h3{ font-family:var(--display); font-weight:700; font-size:1.16rem; margin:0 0 10px; line-height:1.2; color:var(--gold); }
.scard h3 span{ display:block; font-family:var(--mono); font-size:.68rem; font-weight:500; color:var(--mist); letter-spacing:.08em; text-transform:uppercase; margin-top:5px; }
.scard p{ margin:0; font-size:.96rem; color:var(--mist); }

/* ---------- 6. PARA QUEM É ---------- */
.paraquem{ background:var(--navy); }
.grid-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:46px; counter-reset:seg; }
.seg{
  padding:22px 20px; border:1px solid var(--hair); border-radius:12px;
  background:rgba(255,255,255,.015); transition:border-color .2s, background .2s; position:relative;
}
.seg::before{
  counter-increment:seg; content:counter(seg,decimal-leading-zero);
  font-family:var(--mono); font-size:.7rem; color:var(--gold-deep); letter-spacing:.05em;
  position:absolute; top:16px; right:18px;
}
.seg:hover{ border-color:var(--navy-line); background:#122548; }
.seg-ic{
  width:44px; height:44px; padding:9px; margin-bottom:14px;
  color:var(--gold); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round;
  border:1px solid var(--navy-line); border-radius:11px;
  background:rgba(233,185,58,.07); transition:background .2s, transform .2s;
}
.seg:hover .seg-ic{ background:rgba(233,185,58,.14); transform:translateY(-2px); }
.seg h3{ font-family:var(--display); font-weight:700; font-size:1.05rem; margin:0 0 8px; padding-right:26px; color:var(--gold); }
.seg p{ margin:0; font-size:.9rem; color:var(--mist); line-height:1.5; }
.seg-cta{ margin-top:30px; font-size:1.14rem; color:#cbd5e6; }
.seg-cta strong{ color:var(--gold); }

/* ---------- 7. RESULTADOS ---------- */
.resultados{ background:linear-gradient(180deg,var(--navy),#091528); }
.benefits{ list-style:none; margin:40px 0 0; padding:0; display:grid; gap:14px; max-width:900px; }
.benefits li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  font-size:1.12rem; padding:18px 22px; border-radius:12px;
  background:var(--navy-3); border:1px solid var(--hair);
}
.benefits .ic{ width:1.5rem; height:1.5rem; color:var(--gold); margin-top:2px; }

/* ---------- 8. SOBRE ---------- */
.sobre{ background:var(--navy-2); }
.sobre-inner{ max-width:860px; }
.sobre-inner .lead strong,.sobre-inner p strong{ color:var(--gold); }
.claim{ font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.25; color:var(--fog); margin:26px 0 0; text-wrap:balance; }

.cred-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 0; padding:0; }
.cred-chips li{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--gold);
  border:1px solid var(--navy-line); background:rgba(233,185,58,.06);
  padding:8px 14px; border-radius:999px;
}
.ig-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  font-weight:500; color:var(--mist); transition:color .18s;
}
.ig-link .ic{ width:1.25em; height:1.25em; color:var(--gold); }
.ig-link b{ color:var(--fog); font-weight:700; }
.ig-link:hover{ color:var(--fog); }
.ig-link:hover .ic{ filter:drop-shadow(0 0 8px rgba(233,185,58,.5)); }

/* ---------- 9. DEPOIMENTOS ---------- */
.depo{ background:var(--navy); }
.depo-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(340px,1fr);
  gap:16px; margin-top:46px; padding:6px 24px 20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}
.quote{
  scroll-snap-align:start; margin:0;
  background:var(--navy-3); border:1px solid var(--hair);
  border-radius:16px; padding:28px 26px 24px; display:flex; flex-direction:column;
}
.quote::before{ content:"“"; font-family:var(--display); font-weight:800; font-size:3.4rem; line-height:.5; color:var(--gold); }
.quote blockquote{ margin:16px 0 22px; font-size:1.04rem; line-height:1.55; color:#dbe3f0; flex:1; }
.quote figcaption{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--hair); padding-top:16px; }
.quote figcaption b{ font-weight:700; color:var(--fog); }
.quote figcaption span{ font-family:var(--mono); font-size:.76rem; color:var(--gold); letter-spacing:.02em; }

/* ---------- 10. OBJEÇÕES ---------- */
.objecoes{ background:linear-gradient(180deg,var(--navy),var(--navy-2)); }
.faq{ margin-top:38px; display:grid; gap:10px; }
.faq details{
  border:1px solid var(--hair); border-radius:12px; background:var(--navy-3);
  padding:4px 22px; transition:border-color .2s;
}
.faq details[open]{ border-color:var(--navy-line); }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 30px 18px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--fog);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.5rem; color:var(--gold); transition:transform .2s;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{ margin:0 0 20px; color:var(--mist); }

/* ---------- 11+12. OFERTA / CTA FINAL ---------- */
.oferta{ background:radial-gradient(120% 120% at 50% 0%, #0e2545, var(--navy) 70%); }
.oferta-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.oferta .lead{ text-align:center; }
.offer-list{ list-style:none; margin:6px 0 44px; padding:0; display:grid; gap:12px; text-align:left; max-width:620px; }
.offer-list li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; font-size:1.08rem; color:#dbe3f0; }
.offer-list .ic{ width:1.35rem; height:1.35rem; color:var(--gold); margin-top:3px; }

.final-cta{
  width:100%; max-width:760px; margin-top:6px;
  padding:40px 30px; border:1px solid var(--navy-line); border-radius:22px;
  background:linear-gradient(180deg, rgba(233,185,58,.06), transparent);
}
.cta-kicker{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,2.5vw,1.6rem); line-height:1.3; margin:0 0 26px; text-wrap:balance; }
.cta-fine{ margin:22px 0 0; font-size:.92rem; color:var(--mist); }

.ps{ margin:52px auto 0; max-width:620px; font-size:.98rem; color:var(--mist); border-top:1px solid var(--hair); padding-top:26px; }
.ps span{ font-family:var(--mono); color:var(--gold); font-weight:700; margin-right:6px; }

/* ---------- RODAPÉ ---------- */
.site-foot{ background:#071021; border-top:1px solid var(--hair); padding:64px 0 90px; font-size:.92rem; }
.foot-top{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:34px; }
.foot-tagline{ font-family:var(--mono); font-size:.82rem; color:var(--gold); margin:0; }
.foot-lead{ color:var(--mist); margin:0 0 20px; }
.coverage{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 28px; margin-bottom:34px; }
.dist h4{ font-family:var(--mono); font-size:.82rem; font-weight:700; color:var(--fog); margin:0 0 10px; letter-spacing:.02em; }
.dist h4 span{ display:block; color:var(--gold); font-weight:500; margin-top:2px; }
.dist p{ margin:0; color:var(--mist-2); font-size:.82rem; line-height:1.7; }
.foot-regions{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; padding:22px 0; border-block:1px solid var(--hair); margin-bottom:22px; }
.foot-regions .rlabel{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); }
.foot-regions span:last-child{ color:var(--mist); }
.foot-services{ color:var(--mist-2); font-size:.8rem; line-height:1.7; margin:0 0 30px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-bottom span{ color:var(--mist-2); font-family:var(--mono); font-size:.78rem; }
.foot-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-actions .ig-link{ margin-top:0; font-size:.9rem; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{ display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:60; justify-content:center; box-shadow:0 14px 40px -10px rgba(0,0,0,.7); }

/* ---------- Reveal (only hidden when JS is present) ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid-serv{ grid-template-columns:repeat(2,1fr); }
  .grid-seg{ grid-template-columns:repeat(2,1fr); }
  .coverage{ grid-template-columns:repeat(2,1fr); }
  .nav{ display:none; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .nav-cta{ display:none; }
  .grid-serv,.grid-seg,.coverage{ grid-template-columns:1fr; }
  .spine-svg{ left:16px; }
  .step{ grid-template-columns:56px 1fr; gap:16px; }
  .depo-row{ grid-auto-columns:82%; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
  .mobile-cta{ display:flex; }
  main{ padding-bottom:70px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-title .place::after{ transform:none; }
  .spine-path{ stroke-dashoffset:0; }
  html{ scroll-behavior:auto; }
}