/* RF. / Upgrade editorial e comercial — preserva as animacoes do projeto original */
:root{--rf-ink:#0e1316;--rf-green:#c9ff47;--rf-soft:#f5f6f1}
body{overflow-x:clip}
a:focus-visible,button:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:24px;padding:13px 18px;background:#c9ff47;color:#070909;font-weight:800;z-index:10050;border:2px solid #070909}
.skip-link:focus{top:12px}
.nav{border-radius:13px;box-shadow:0 7px 0 color-mix(in srgb,var(--rule) 7%,transparent),0 12px 45px rgb(0 0 0/.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:color-mix(in srgb,var(--surface) 93%,transparent)}
.brand{gap:12px;white-space:nowrap}
.brand-mark{font-weight:900;letter-spacing:-.095em;font-size:2.15rem;line-height:1;color:var(--ink)}
.brand-mark span{color:var(--purple)}
.brand-caption{font-family:'JetBrains Mono',monospace;font-size:.55rem;font-weight:700;line-height:1.3;letter-spacing:.07em}
.brand-caption small{display:block;font-family:'Onest',sans-serif;font-size:.65rem;letter-spacing:.10em;font-weight:500;color:var(--ink-muted)}
.nav-links a{font-size:.87rem;letter-spacing:-.01em}
#hero{min-height:min(850px,100svh)}
.hero-sub{font-size:clamp(1.03rem,1.6vw,1.24rem);line-height:1.65;max-width:575px}
.hero-title{letter-spacing:-.057em}
.hero-photo-frame{border-radius:24px;box-shadow:18px 18px 0 var(--lime),0 30px 70px rgb(0 0 0/.09)}
.hero-badge{letter-spacing:.03em}
.hero-meta{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta-item{font-size:.64rem}
#motion-signature{overflow:clip}
/* Portfolio / featured case */
#projects{padding-top:clamp(88px,9vw,140px)}
#projects .section-head{max-width:850px;margin-bottom:42px}
#projects .section-head h2{font-size:clamp(2.8rem,5.6vw,5.3rem);line-height:1.04;letter-spacing:-.058em}
.project-gallery{max-width:1380px}
.project-gallery .hscroll-caption{margin-bottom:28px}
.hscroll-caption-text{font-size:clamp(1.1rem,1.9vw,1.5rem);letter-spacing:-.035em}
.featured-case{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(26px,3vw,55px);padding:clamp(30px,5vw,70px);min-height:548px;margin:0 0 clamp(64px,8vw,100px);border-radius:24px;background:linear-gradient(135deg,#080f18 0%,#0b1e33 52%,#07121f 100%);color:#fff;overflow:hidden;border:1px solid #27415c;box-shadow:0 25px 70px rgb(5 18 36/.16)}
.featured-case:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.21;background-image:linear-gradient(#739dc2 1px,transparent 1px),linear-gradient(90deg,#739dc2 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(90deg,transparent 12%,#000 100%)}
.featured-case:after{content:'';position:absolute;width:440px;height:440px;border-radius:50%;right:-165px;top:-215px;background:#335d8e;filter:blur(105px);opacity:.42;z-index:-1}
.featured-copy{position:relative;z-index:2}
.featured-eyebrow{display:flex;align-items:center;gap:9px;font:700 .66rem/1.4 'JetBrains Mono',monospace;letter-spacing:.11em;color:#b5d0e7;margin-bottom:39px}
.featured-live{width:8px;height:8px;border-radius:50%;background:#c9ff47;box-shadow:0 0 0 5px rgb(201 255 71/.12);animation:rf-livepulse 2.3s ease-in-out infinite}
.featured-counter{margin-left:auto;color:#93b5d3;letter-spacing:.04em;font-size:.59rem}
@keyframes rf-livepulse{50%{box-shadow:0 0 0 9px rgb(201 255 71/0)}}
.featured-topline{font:.63rem/1.5 'JetBrains Mono',monospace;letter-spacing:.11em;color:#aabed1;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:11px}
.featured-topline span{color:#7592b1}
.featured-title{font-weight:900;letter-spacing:-.075em;line-height:.98;font-size:clamp(2.65rem,4.45vw,5rem);overflow-wrap:anywhere;margin:0 0 23px;color:white}
.featured-title span{color:#bed9f6}
.featured-lead{font-size:clamp(1.25rem,1.95vw,1.65rem);line-height:1.25;letter-spacing:-.035em;max-width:450px;font-weight:700;margin-bottom:16px}
.featured-description{color:#b6c4d1;font-size:.94rem;line-height:1.75;max-width:510px}
.featured-deliverables{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.featured-deliverables span{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:650;color:#e0eaf4;border:1px solid #45607a;background:rgb(255 255 255/.055);padding:9px 12px;border-radius:100px}
.featured-deliverables i{width:6px;height:6px;border-radius:50%;background:#c9ff47;flex:none}
.featured-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:31px}
.featured-button{padding:14px 19px;display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:.9rem;border-radius:8px;color:#07111e;background:#c9ff47;box-shadow:0 5px 0 #719221;transition:transform .25s ease,box-shadow .25s ease}
.featured-button:hover{transform:translateY(-3px);box-shadow:0 8px 0 #719221}
.featured-button svg{height:17px;width:17px;transition:transform .25s}
.featured-button:hover svg{transform:translateX(4px)}
.featured-domain{font:.63rem/1.4 'JetBrains Mono',monospace;color:#9baebf}
.featured-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;isolation:isolate;padding:20px 0 42px}
.featured-orbit{position:absolute;border:1px solid rgb(187 220 250/.2);border-radius:24px;pointer-events:none;z-index:-1}
.orbit-one{inset:9px -14px 31px 17px;transform:rotate(-4deg)}
.orbit-two{inset:24px 10px 13px -18px;transform:rotate(4deg)}
.featured-browser{width:100%;position:relative;overflow:hidden;background:#091627;border:1px solid #4b6a85;border-radius:14px;box-shadow:0 28px 75px rgb(0 0 0/.54);transform:perspective(1300px) rotateY(-5deg) rotateX(2deg);transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s}
.featured-visual:hover .featured-browser{transform:perspective(1300px) rotateY(0deg) rotateX(0deg) translateY(-6px);box-shadow:0 37px 80px rgb(0 0 0/.55)}
.featured-browserbar{height:37px;padding:0 12px;background:#13243a;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #27405a}
.browser-lights{display:flex;gap:6px;align-items:center}
.browser-lights i{width:7px;height:7px;border-radius:50%;background:#c86d6b}
.browser-lights i:nth-child(2){background:#ddb66b}.browser-lights i:nth-child(3){background:#6fac84}
.browser-url{display:flex;align-items:center;gap:6px;font:600 .64rem 'JetBrains Mono',monospace;color:#d6e3ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-open{flex:none;color:#adbed0}
.featured-browser picture{display:block;width:100%;overflow:hidden;aspect-ratio:1343/637}
.featured-browser img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.featured-view{position:absolute;right:13px;bottom:3px;display:inline-flex;align-items:center;gap:9px;color:#d7e7f7;font:700 .7rem 'JetBrains Mono',monospace;letter-spacing:.09em}
.featured-visual:hover .featured-view{color:#c9ff47}
.gallery-subhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid color-mix(in srgb,var(--rule) 19%,transparent);padding-top:19px;margin-bottom:27px;font:700 .7rem 'JetBrains Mono',monospace;letter-spacing:.09em}
.gallery-subhead span:last-child{font-weight:500;color:var(--ink-muted);font-size:.65rem;letter-spacing:.05em}
.project-gallery .hscroll-track{gap:clamp(22px,3vw,36px)}
.project-gallery .p-card{border-radius:14px;overflow:hidden;box-shadow:0 7px 0 color-mix(in srgb,var(--rule) 9%,transparent),0 18px 36px rgb(0 0 0/.055);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.project-gallery .p-card:hover{transform:translateY(-7px);box-shadow:0 10px 0 color-mix(in srgb,var(--purple) 40%,transparent),0 25px 50px rgb(0 0 0/.08)}
.project-gallery .p-preview{aspect-ratio:1.98}
.project-gallery .p-content{padding:23px 24px 26px;gap:12px}
.project-gallery .p-title{font-size:clamp(1.28rem,2vw,1.72rem);line-height:1.15;letter-spacing:-.05em}
.project-gallery .p-cat{font-size:.63rem;letter-spacing:.045em}
.project-gallery .p-desc{font-size:.9rem;line-height:1.6;display:block;overflow:visible}
.project-gallery .p-cta{font-size:.89rem;padding-top:16px;margin-top:8px}
.lab-num{display:grid;place-items:center;width:53px;height:53px;border-radius:13px;font-size:1.9rem;line-height:1;background:var(--lime);border:2px solid var(--rule);box-shadow:3px 3px 0 var(--shadow);color:#080b0e!important}
.about-promise{background:var(--ink);color:var(--surface);border-radius:20px;border:2px solid var(--rule);padding:clamp(27px,4vw,44px);box-shadow:9px 9px 0 var(--lime)}
.about-promise-kicker{font:600 .66rem 'JetBrains Mono',monospace;letter-spacing:.08em;opacity:.65}
.about-promise-mark{font-size:clamp(5rem,10vw,8.5rem);line-height:1.2;font-weight:900;letter-spacing:-.1em;color:var(--lime);margin:21px 0}
.about-promise h3{font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.15;letter-spacing:-.04em}
.about-promise p{color:var(--ink-on-inverse-muted);margin-top:17px;font-size:.94rem;line-height:1.7}
.about-promise a{margin-top:25px;display:inline-flex;gap:15px;align-items:center;border-bottom:1px solid var(--lime);padding-bottom:6px;color:var(--lime);font-weight:750}
.wa-float{position:fixed;right:clamp(15px,2.5vw,32px);bottom:clamp(15px,2.5vw,32px);z-index:110;width:56px;height:56px;display:grid;place-items:center;color:#fff;background:#18bd61;border:2px solid #f4fff8;border-radius:50%;box-shadow:0 5px 18px rgb(0 0 0/.2);transition:transform .2s ease,box-shadow .2s ease}
.wa-float svg{width:30px;height:30px}.wa-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px rgb(0 0 0/.26)}
@media(min-width:1024px){.nav{inset:17px max(24px,calc((100vw - 1320px)/2)) auto;max-width:1320px}.featured-case{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}}
@media(max-width:1100px){.featured-case{grid-template-columns:1fr;gap:20px}.featured-copy{max-width:720px}.featured-visual{max-width:800px;margin:12px auto 0;width:100%}.featured-title{font-size:clamp(3rem,7.2vw,5.5rem)}.featured-description{max-width:670px}.featured-eyebrow{margin-bottom:25px}}
@media(max-width:767px){.nav{padding:9px 13px;inset:12px 12px auto}.brand-mark{font-size:1.9rem}.brand-caption{font-size:.48rem}.brand-caption small{font-size:.54rem}.hero-title{font-size:clamp(2.7rem,10.8vw,5rem)}#hero{min-height:0;padding-top:130px}.hero-sub{font-size:1.06rem}.project-gallery{padding:0 16px}.project-gallery .hscroll-caption{padding:0 4px}.featured-case{border-radius:18px;padding:25px 19px 24px;gap:8px;margin-bottom:56px}.featured-eyebrow{font-size:.57rem;margin-bottom:27px;flex-wrap:wrap}.featured-counter{font-size:.52rem}.featured-title{font-size:clamp(2.8rem,10.5vw,4.5rem)}.featured-lead{font-size:1.33rem}.featured-description{font-size:.88rem;line-height:1.65}.featured-deliverables{gap:7px}.featured-deliverables span{font-size:.65rem;padding:8px 9px}.featured-button{width:100%;justify-content:center;font-size:.82rem}.featured-domain{display:none}.featured-visual{padding:20px 5px 28px}.featured-browser{transform:none;border-radius:10px}.featured-visual:hover .featured-browser{transform:translateY(-3px)}.featured-browserbar{height:31px;padding:0 9px}.browser-url{font-size:.52rem}.featured-view{font-size:.6rem;right:6px;bottom:0}.gallery-subhead span:last-child{font-size:.55rem}.project-gallery .hscroll-track{gap:23px}.project-gallery .p-content{padding:21px 19px 23px}.wa-float{height:52px;width:52px;bottom:16px;right:16px}#projects .section-head h2{font-size:clamp(2.6rem,9vw,4rem)}.brand-caption{display:block}}
@media(prefers-reduced-motion:reduce){.featured-live{animation:none}.featured-browser,.project-gallery .p-card,.wa-float{transition:none!important}}
/* Keep the complete RecuperaCon name on one line at narrow viewport widths. */
@media(max-width:767px){.featured-title{font-size:clamp(1.8rem,8.6vw,3.1rem);white-space:nowrap;overflow-wrap:normal;letter-spacing:-.075em}}
/* Small phones: keep the code sample scrollable inside its own card, never across the page. */
@media(max-width:599px){
 #stack .stack-grid,#stack .tech-grid{grid-template-columns:minmax(0,1fr);max-width:100%}
 #stack .stack-grid>*,#stack .tech-grid>*{min-width:0;max-width:100%}
 #stack .code-card{overflow:hidden;transform:none}
 #stack .code-card-body{overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch}
 #stack .code-line{width:max-content;min-width:100%}
}