.page-hero{padding:clamp(108px,12vw,140px) 0 0}
.page-hero h1{font-size:clamp(2.2rem,4.8vw,3.8rem);margin:4px 0 16px;max-width:900px}
.page-hero h1 em{font-size:1.08em}
.page-hero .lead{color:var(--mu);font-size:1.08rem;max-width:600px}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mu);margin-bottom:22px}
.crumb:hover{color:var(--tx)}

/* carrossel 3D */
.car{margin-top:clamp(30px,4vw,56px)}
.car__stage{position:relative;height:clamp(250px,40vw,500px);perspective:1700px;touch-action:pan-y;outline-offset:6px;cursor:grab;user-select:none;-webkit-user-select:none}
.car__stage.drag{cursor:grabbing}
.slide{position:absolute;left:50%;top:0;width:min(64%,800px);aspect-ratio:16/10;transform:translateX(-50%) translateX(calc(var(--d) * 62%)) translateZ(calc(var(--ad) * -190px)) rotateY(calc(var(--d) * -34deg));opacity:calc(1 - var(--ad) * .38);z-index:calc(10 - var(--ad) * 3);transition:transform .8s var(--ease),opacity .6s;will-change:transform}
.slide[data-far="1"]{opacity:0;pointer-events:none}
.browser{height:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#0b0d14;box-shadow:0 36px 80px rgba(0,0,0,.6);display:flex;flex-direction:column}
.slide:not(.on) .browser{cursor:pointer}
.slide:not(.on) .browser::after{content:"";position:absolute;inset:0;background:rgba(8,9,13,.32);border-radius:14px}
.browser{position:relative}
.browser__bar{flex:none;display:flex;align-items:center;gap:6px;padding:9px 12px;background:#12151e;border-bottom:1px solid var(--line)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#3a3f4d}
.browser__bar i:nth-child(1){background:#ff5f57}.browser__bar i:nth-child(2){background:#febc2e}.browser__bar i:nth-child(3){background:#28c840}
.browser__bar u{margin-left:10px;flex:1;max-width:60%;text-decoration:none;font-size:11.5px;color:var(--mu);background:rgba(255,255,255,.05);padding:3px 12px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top}
.car__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(26px,3vw,40px)}
.car__btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:.25s}
.car__btn:hover{border-color:var(--gold);background:rgba(232,196,142,.08)}
.dots{display:flex;gap:10px}
.dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);transition:.3s;padding:0}
.dots button[aria-current="true"]{background:var(--gold);width:28px;border-radius:6px}

/* informação do site ativo */
.info{margin-top:clamp(28px,4vw,48px);border:1px solid var(--line);border-radius:26px;background:linear-gradient(160deg,var(--card2),var(--card));padding:clamp(24px,3.5vw,44px)}
.pn{display:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);animation:pin .5s var(--ease)}
.pn.on{display:grid}
@keyframes pin{from{opacity:0;transform:translateY(10px)}}
.pn__tag{font:600 12px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pn h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:10px 0 12px}
.pn p{color:var(--mu)}
.pn .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.pn__do{list-style:none;display:grid;gap:9px;margin-top:20px}
.pn__do li{position:relative;padding-left:26px;font-size:14.5px;color:#d3d0ca}
.pn__do li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:rgba(232,196,142,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c48e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat}
.tech{display:grid;gap:18px;align-content:start}
.tech h3{font:600 12px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:7px 14px;border-radius:99px;border:1px solid var(--line2);font-size:13.5px;background:rgba(255,255,255,.03)}
.chips span.hl{border-color:rgba(232,196,142,.45);color:var(--gold);background:rgba(232,196,142,.07)}

/* o que todo site leva */
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.inc div{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--card)}
.inc h3{font-size:1.1rem;margin-bottom:8px}
.inc p{font-size:14.5px;color:var(--mu)}

@media (max-width:980px){
  .pn.on{grid-template-columns:minmax(0,1fr)}
  .inc{grid-template-columns:repeat(2,1fr)}
  .slide{width:min(74%,640px);transform:translateX(-50%) translateX(calc(var(--d) * 60%)) translateZ(calc(var(--ad) * -150px)) rotateY(calc(var(--d) * -30deg))}
}
@media (max-width:640px){
  .car__stage{height:clamp(190px,56vw,260px)}
  .slide{width:80%;transform:translateX(-50%) translateX(calc(var(--d) * 70%)) translateZ(calc(var(--ad) * -120px)) rotateY(calc(var(--d) * -26deg))}
  .inc{grid-template-columns:1fr}
  .pn .row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
}