/* Hero da primeira seção — composição fiel à referência */
.hero{
  min-height:720px;
  padding:32px 0 0;
  isolation:isolate;
  background-color:#030303;
  background-image:url("assets/hero-desktop-subject-sharp-v6.webp");
  background-position:right center;
  background-size:auto 100%;
  background-repeat:no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to top,#030303 0%,rgba(3,3,3,.97) 12%,rgba(3,3,3,.82) 24%,rgba(3,3,3,.5) 38%,rgba(3,3,3,.18) 52%,transparent 66%);
  pointer-events:none;
}
.hero::after{display:none}
.hero + .comparison{border-top:0}
.hero .container{width:min(1180px,calc(100% - 44px))}
.hero__grid{grid-template-columns:48% 52%;gap:0;min-height:688px;align-items:center}
.hero__content{align-self:center;z-index:4;padding:8px 0 34px}
.hero .eyebrow{padding:7px 11px;border-color:#9b6b11;background:rgba(0,0,0,.34);color:#efbd45;font-size:.62rem;letter-spacing:.11em}
.hero h1{margin:17px 0 13px;font-family:"Cinzel",serif;text-transform:uppercase;line-height:.9}
.hero h1>span.hero-title-line{display:block;color:#d7a332;font-size:clamp(2.1rem,4.2vw,4.35rem);font-weight:500;letter-spacing:-.045em}
.hero h1 .hero-title-line b{font-size:.32em;font-weight:500;letter-spacing:0;vertical-align:.25em}
.hero h1 .hero-title-line strong{font-size:1.35em;font-weight:500;line-height:.7}
.hero h1 .hero-title-line--two{padding-left:2.12em}
.hero h1 small{display:block;max-width:455px;margin-top:13px;color:#f1ede5;font-family:"Inter",sans-serif;font-size:clamp(1.02rem,1.55vw,1.48rem);font-weight:600;line-height:1.32;letter-spacing:.01em}
.hero h1 em{color:#e4ad32}
.hero__lead{max-width:420px;margin:0;color:#bdb8af;font-size:.75rem;line-height:1.52}
.hero .benefits-grid{grid-template-columns:repeat(3,1fr);max-width:430px;margin:18px 0 16px}
.hero .benefit{min-height:78px;padding:4px 11px;text-align:center}
.hero .benefit:first-child{padding-left:0}
.hero .benefit .icon{display:grid;place-items:center;width:31px;height:31px;margin:auto;border:1px solid #a8791d;border-radius:50%;color:#d9a631;font-size:1rem}
.hero .benefit p{margin-top:6px;color:#f1ece1;font-size:.52rem;line-height:1.35}
.hero .cta{position:relative;min-width:360px;min-height:48px;overflow:hidden;gap:0;border-color:#f5c354;background:linear-gradient(110deg,#bb8015 0%,#f0c45a 45%,#ba7a11 100%);box-shadow:0 0 0 1px rgba(255,199,75,.24),0 0 22px rgba(232,169,42,.4);font-family:"Cinzel",serif;font-size:.72rem;font-weight:700;letter-spacing:.035em;text-align:center;animation:heroButtonPulse 1.65s ease-in-out infinite}
.hero .cta::after{content:"";position:absolute;top:-50%;left:-42%;width:30%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transform:rotate(18deg);animation:heroButtonShine 2.35s ease-in-out infinite}
.hero .cta:hover{filter:brightness(1.15);transform:translateY(-2px) scale(1.02)}
.hero .trust-row{max-width:360px;justify-content:center;margin-top:10px;font-size:.58rem}
.hero__visual{position:relative;align-self:stretch;min-height:688px;pointer-events:none}
.hero-devices{position:absolute;z-index:6;right:-9%;bottom:-2%;width:92%;height:auto;filter:drop-shadow(0 28px 34px rgba(0,0,0,.82));animation:heroDevicesFloat 4.4s ease-in-out infinite;will-change:transform}
@keyframes heroDevicesFloat{0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}50%{transform:translate3d(0,-13px,0) rotate(.25deg)}}
@keyframes heroDevicesFloatMobile{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes heroButtonPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,199,75,.2),0 0 13px rgba(232,169,42,.32)}50%{box-shadow:0 0 0 2px rgba(255,210,103,.42),0 0 30px rgba(245,184,52,.78)}}
@keyframes heroButtonShine{0%,18%{left:-42%;opacity:0}35%{opacity:1}58%,100%{left:125%;opacity:0}}
@media(max-width:760px){
  .hero{min-height:auto;padding:0;background-image:url("assets/hero-mobile-bg-v3.webp");background-position:center top;background-size:auto 440px}
  .hero::before{background:linear-gradient(180deg,transparent 0,transparent 270px,rgba(3,3,3,.55) 350px,#030303 440px,#030303 100%)}
  .hero .container{width:100%!important;max-width:none!important;padding-inline:20px;box-sizing:border-box}
  .hero__grid{display:block;min-height:auto}
  .hero__content{position:relative;z-index:5;padding:300px 0 32px;text-align:center;opacity:1!important;transform:none!important;transition:none!important}
  .hero .eyebrow{font-size:.56rem;padding:6px 9px}
  .hero h1{margin:13px 0 12px;line-height:1}
  .hero h1>span.hero-title-line{font-size:clamp(1.65rem,8.8vw,2.25rem);letter-spacing:-.035em}
  .hero h1 .hero-title-line--two{padding-left:0}
  .hero h1 small{max-width:340px;margin:12px auto 0;font-size:.88rem;line-height:1.38;text-shadow:0 2px 8px #000}
  .hero__lead{max-width:340px;margin-inline:auto;font-size:.72rem;line-height:1.5}
  .hero .benefits-grid{grid-template-columns:repeat(3,1fr);gap:0;max-width:100%;margin:15px 0 14px}
  .hero .benefit{min-height:72px;padding:2px 6px;border:0!important;border-right:1px solid rgba(213,163,61,.3)!important;border-radius:0}
  .hero .benefit:last-child{border-right:0!important}
  .hero .benefit .icon{width:27px;height:27px;font-size:.85rem}
  .hero .benefit p{font-size:.43rem}
  .hero .cta{width:100%;min-width:0;font-size:.67rem;animation:none}
  .hero .cta::after{animation:none;display:none}
  .hero .trust-row{max-width:none}
  .hero__visual{position:absolute;inset:0;min-height:0;opacity:1!important;transform:none!important;transition:none!important}
  .hero-devices{top:170px;right:auto;bottom:auto;left:5%;width:43%;animation:heroDevicesFloatMobile 5.5s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(0,0,0,.68));will-change:transform}
  .page-glow{display:none!important}
}
@media(prefers-reduced-motion:reduce){.hero-devices,.hero .cta,.hero .cta::after{animation:none}}