/* Camada de movimento. Tudo escopado em .js (só existe sem prefers-reduced-motion e com JS rodando). */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --rx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ry{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{interpolate-size:allow-keywords}
main{position:relative;isolation:isolate;overflow-x:clip}

/* Aurora + grade atrás do hero */
.hero-aurora{position:absolute;inset:0 0 auto;height:min(115vh,1100px);z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.hero-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.6;mix-blend-mode:screen;will-change:transform}
.hero-aurora i:nth-child(1){width:56vw;height:56vw;left:-14%;top:-18%;background:radial-gradient(circle at 35% 35%,rgba(214,138,95,.55),transparent 62%)}
.hero-aurora i:nth-child(2){width:42vw;height:42vw;right:-8%;top:4%;background:radial-gradient(circle,rgba(217,164,65,.32),transparent 62%)}
.hero-aurora i:nth-child(3){width:38vw;height:38vw;left:34%;bottom:-22%;background:radial-gradient(circle,rgba(226,155,114,.28),transparent 62%)}
.js .hero-aurora i:nth-child(1){animation:aurora-a 22s ease-in-out infinite alternate}
.js .hero-aurora i:nth-child(2){animation:aurora-b 26s ease-in-out infinite alternate}
.js .hero-aurora i:nth-child(3){animation:aurora-c 30s ease-in-out infinite alternate}
@keyframes aurora-a{to{transform:translate(14%,22%) scale(1.15)}}
@keyframes aurora-b{to{transform:translate(-18%,26%) scale(.9)}}
@keyframes aurora-c{to{transform:translate(-22%,-18%) scale(1.2)}}
.hero-aurora::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(230,223,209,.13) 1px,transparent 1.5px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse 65% 60% at 55% 15%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 65% 60% at 55% 15%,#000 10%,transparent 72%)}
.hero-spot{position:absolute;left:var(--mx,-999px);top:var(--my,-999px);width:520px;height:520px;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle,rgba(214,138,95,.09),transparent 62%);opacity:0;transition:opacity .6s var(--curve)}
.hero.is-hover ~ .hero-aurora .hero-spot,.hero-aurora.on .hero-spot{opacity:1}

/* Entrada do hero (por animação, não por observer: sempre completa) */
@keyframes rise{from{opacity:0;translate:0 22px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.js .hero-copy>.eyebrow{animation:rise .9s var(--curve) both .05s}
.js .hero-copy>.lede{animation:rise 1s var(--curve) both .55s}
.js .hero-copy>.hero-actions{animation:rise 1s var(--curve) both .75s}
.js .hero-bottom{animation:rise 1.1s var(--curve) both 1.1s}
@keyframes stage-in{from{opacity:0;translate:0 34px;filter:blur(10px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.js .live-demo{animation:stage-in 1.3s var(--curve) both .45s}

/* Headline palavra por palavra; o itálico acende em terracota */
.js h1.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.js h1.split .w>span{display:inline-block;translate:0 115%;animation:word-up .95s var(--curve) forwards;animation-delay:calc(var(--i,0)*65ms + .15s)}
.js h1.split em .w>span{color:var(--text);animation:word-up .95s var(--curve) forwards,ignite 1.6s ease forwards;animation-delay:calc(var(--i,0)*65ms + .15s),calc(var(--i,0)*65ms + .9s)}
@keyframes word-up{to{translate:0 0}}
@keyframes ignite{to{color:var(--accent)}}

/* Mock do WhatsApp: tilt 3D e luz orbitando a borda */
.js .live-demo{transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(-1deg);transition:transform .7s var(--curve);transform-style:preserve-3d}
.js .live-demo::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--a),transparent 0 62%,rgba(214,138,95,.15) 72%,rgba(226,155,114,.95) 84%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:orbit 7s linear infinite}
.js .live-demo::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 40px 120px -40px rgba(214,138,95,.35),0 0 0 1px rgba(230,223,209,.04) inset;transition:box-shadow .7s var(--curve)}
.js .hero.is-hover .live-demo::after{box-shadow:0 50px 140px -40px rgba(214,138,95,.5),0 0 0 1px rgba(230,223,209,.06) inset}
@keyframes orbit{to{--a:360deg}}

/* Botões: brilho e varredura; o magnetismo vem do JS via translate */
.js .btn{position:relative;overflow:hidden;transition:transform .35s var(--curve),background .35s var(--curve),box-shadow .5s var(--curve),translate .5s var(--curve)}
.js .btn:hover{box-shadow:0 14px 44px -12px rgba(214,138,95,.6)}
.js .btn::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);translate:-130% 0;pointer-events:none}
.js .btn:hover::after{translate:130% 0;transition:translate .9s var(--curve)}
.js .btn>*{position:relative}

/* Reveals: escalonamento entre irmãos + blur */
.js [data-reveal]{transform:translateY(34px);filter:blur(8px);transition:opacity 1.1s var(--curve),transform 1.1s var(--curve),filter 1.1s var(--curve);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{filter:blur(0)}

/* Itálico dos títulos: sublinhado que se desenha ao entrar */
.js [data-reveal] h2 em{background:linear-gradient(currentColor,currentColor) no-repeat 0 92%/0% 1px;transition:background-size 1.1s var(--curve) .45s;padding-bottom:.02em}
.js [data-reveal].is-in h2 em{background-size:100% 1px}

/* Card "Com a Pavanello": fio de luz na borda superior */
.js .compare-com .solution-card{position:relative;overflow:hidden}
.js .compare-com .solution-card::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(214,138,95,.9),transparent);background-size:220% 100%;animation:shimmer 3.6s linear infinite;opacity:.9}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* Fechamento: o "p." flutua */
.js .closing-word{animation:float 14s ease-in-out infinite alternate}
@keyframes float{to{translate:0 -28px}}

/* FAQ: abre com altura animada onde o browser suporta */
.qa-item::details-content{height:0;overflow:clip;transition:height .4s var(--curve),content-visibility .4s allow-discrete}
.qa-item[open]::details-content{height:auto}

/* Barra de progresso de scroll (CSS puro; some onde não há suporte) */
.progress{position:fixed;inset:0 auto auto 0;height:2px;width:100%;z-index:8;background:linear-gradient(90deg,var(--accent),#e29b72);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){.js .progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Seções abaixo do hero: títulos palavra por palavra ao entrar */
.js [data-reveal] h2.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-reveal] h2.split .w>span{display:inline-block;translate:0 120%;transition:translate .9s var(--curve);transition-delay:calc(var(--i,0)*75ms)}
.js [data-reveal].is-in h2.split .w>span{translate:0 0}
.js [data-reveal] h2.split em .w>span{color:var(--text);transition:translate .9s var(--curve),color 1.4s ease;transition-delay:calc(var(--i,0)*75ms),calc(var(--i,0)*75ms + .7s)}
.js [data-reveal].is-in h2.split em .w>span{color:var(--accent)}

/* Escalonamento dos filhos dos blocos */
.js .stagger>*{opacity:0;translate:0 28px;filter:blur(6px);transition:opacity .9s var(--curve),translate .9s var(--curve),filter .9s var(--curve);transition-delay:calc(var(--i,0)*110ms + .15s)}
.js .is-in .stagger>*,.js .stagger.is-in>*{opacity:1;translate:0 0;filter:blur(0)}

/* Detalhes por seção */
.js [data-reveal] .step-number{display:inline-block;scale:.35;opacity:0;transition:scale 1s cubic-bezier(.34,1.56,.64,1),opacity .5s}
.js [data-reveal].is-in .step-number{scale:1;opacity:1}
.js .compare-list li:before{opacity:0;scale:.2;transition:opacity .5s,scale .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0)*110ms + .6s)}
.js .is-in .compare-list li:before{opacity:1;scale:1}
.js [data-reveal] .eyebrow:before{width:0;transition:width .9s var(--curve) .2s}
.js [data-reveal].is-in .eyebrow:before{width:1.6rem}
.js [data-reveal].solution-shell,.js [data-reveal].practice-shell,.js [data-reveal].closing-shell,.js [data-reveal] .compare-card{scale:.94;transition:scale 1.1s var(--curve)}
.js [data-reveal].is-in.solution-shell,.js [data-reveal].is-in.practice-shell,.js [data-reveal].is-in.closing-shell,.js [data-reveal].is-in .compare-card{scale:1}
.js [data-reveal].is-in .compare-card,.js [data-reveal].is-in.solution-shell,.js [data-reveal].is-in.practice-shell{animation:edge-flash 1.4s var(--curve) .3s}
@keyframes edge-flash{30%{box-shadow:0 0 0 1px rgba(214,138,95,.45),0 20px 60px -30px rgba(214,138,95,.35)}}

/* Aurora do fechamento: a página abre e fecha com luz */
.aurora-end{inset:auto 0 0;height:min(80vh,720px);-webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
.aurora-end i{opacity:.22}
.aurora-end i:nth-child(2){display:none}
.aurora-end i:nth-child(1){left:auto;right:-10%;top:auto;bottom:-25%;width:46vw;height:46vw}
.aurora-end i:nth-child(2){left:-8%;right:auto;top:auto;bottom:-10%;width:34vw;height:34vw}
.aurora-end::after{-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 100%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 60% 55% at 50% 100%,#000 10%,transparent 72%)}

/* Luz em degradê: cada seção tem um glow mais fraco que a anterior */
.section{position:relative}
.section::before{content:'';position:absolute;left:50%;top:-6rem;width:min(1400px,140vw);height:min(70vh,640px);translate:-50% 0;z-index:-1;pointer-events:none;background:radial-gradient(52% 55% at var(--gx,50%) 0%,rgba(214,138,95,var(--glow,0)),transparent 70%)}
#problema{--glow:.34;--gx:62%}
#nichos{--glow:.26;--gx:38%}
#solucoes{--glow:.19;--gx:60%}
#oferta{--glow:.13;--gx:40%}
#comecar{--glow:.08;--gx:50%}
#duvidas{--glow:.05;--gx:50%}

/* Parallax leve, só onde o browser suporta scroll-driven animation */
@supports (animation-timeline:view()){
  .js .closing-word{animation:float 14s ease-in-out infinite alternate,drift-far linear both;animation-timeline:auto,view()}
  @keyframes drift-far{from{translate:0 80px}to{translate:0 -40px}}
}

@media(max-width:760px){
  .hero-aurora i{filter:blur(56px)}
  .hero-aurora i:nth-child(1){width:110vw;height:110vw;left:-30%}
  .hero-aurora i:nth-child(2){width:80vw;height:80vw}
  .hero-aurora i:nth-child(3){display:none}
  .js .live-demo{transform:rotate(-1deg)}
}