@font-face{font-family:Chacal;src:local('Arial');font-display:swap}
:root{color-scheme:dark;--bg:#080909;--surface:#101111;--gold:#eabe70;--muted:#9b9c98;--text:#f0f0e9;--line:rgba(255,255,255,.12);--radius:22px;--max:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font-family:'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{background:none;border:0}button:disabled{opacity:.4;cursor:default}img{max-width:100%;display:block}p,h1,h2,h3{margin:0}p{color:var(--muted)}h1,h2,h3{font-weight:500;line-height:1.08;letter-spacing:-.055em}h1{font-size:clamp(3.2rem,5.3vw,5.1rem)}h2{font-size:clamp(2.5rem,4.1vw,4.15rem)}h3{font-size:1.65rem;letter-spacing:-.035em;line-height:1.22}em{font-style:normal;color:var(--gold)}::selection{background:var(--gold);color:#080909}:focus-visible{outline:2px solid var(--gold);outline-offset:6px}a:hover{color:var(--gold)}.wrap{width:calc(100% - 112px);max-width:var(--max);margin-inline:auto}.section{padding-block:110px}.eyebrow{font-size:.75rem;letter-spacing:.15em;font-weight:500;color:var(--gold);line-height:1.5}.section-heading{margin-bottom:50px}.section-heading .eyebrow,.about-copy .eyebrow,.faq .eyebrow{margin-bottom:24px}.max-copy{max-width:560px;margin-top:25px}.split-heading{display:grid;grid-template-columns:1.35fr 1fr;gap:100px;align-items:end}.split-heading p{max-width:420px;line-height:1.8}.button{background:var(--gold);color:#17130d;border:1px solid var(--gold);display:inline-flex;align-items:center;justify-content:space-between;gap:27px;padding:15px 23px;border-radius:100px;font-size:.9rem;font-weight:600;line-height:1.3;transition:background .25s,transform .25s,box-shadow .25s}.button span{font-size:1.3rem;font-weight:400}.button:hover{background:#f4d295;color:#080909;transform:translateY(-2px);box-shadow:0 8px 35px #d5a34422}.skip{position:fixed;top:-100px;left:15px;z-index:999;background:var(--gold);color:#111;padding:12px 20px}.skip:focus{top:10px}.scroll-progress{height:2px;background:var(--gold);position:fixed;inset:0 0 auto;z-index:100;transform:scaleX(0);transform-origin:left}.site-header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding-inline:56px;position:absolute;top:0;left:0;right:0;z-index:50;transition:background .3s}.site-header.scrolled{background:#080909f0;border-bottom:1px solid var(--line)}.brand{width:148px;flex-shrink:0}.brand img{width:100%;height:auto}.desktop-nav{display:flex;gap:30px;font-size:.875rem}.desktop-nav a{position:relative}.desktop-nav a:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}.desktop-nav a:hover:after{transform:scaleX(1)}.header-actions{display:flex;align-items:center;gap:24px}.language{display:flex;gap:3px;align-items:center}.language button{font-size:.75rem;color:var(--muted);padding:8px 5px}.language button[aria-pressed=true]{color:var(--gold)}.header-cta{font-size:.8rem;background:#ffffff07;color:var(--text);border-color:#ffffff30;padding:10px 17px;gap:18px}.menu-toggle{display:none}.hero-scroll{height:160svh;position:relative}.hero-stage{height:100svh;min-height:760px;max-height:1100px;position:sticky;top:0;overflow:hidden;display:flex;align-items:center;border-bottom:1px solid var(--line)}.hero-art{position:absolute;left:31%;width:85%;height:100%;top:0}.hero-poster,#hero-canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.hero-poster{opacity:1}#hero-canvas{opacity:0}#hero-canvas.loaded{opacity:1}.hero-art-vignette{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 27%,transparent 80%,var(--bg)),linear-gradient(0deg,var(--bg),transparent 24%,transparent 80%,#08090980);pointer-events:none}.hero-content{position:relative;z-index:2;padding-top:65px;pointer-events:none}.hero-content>*{pointer-events:auto}.hero-content .eyebrow{display:flex;gap:13px;align-items:center;margin-bottom:27px}.small-line{height:1px;width:27px;background:var(--gold)}.hero-content h1{max-width:670px;line-height:1.03;letter-spacing:-.06em}.hero-sub{font-size:1.3rem;color:var(--text);margin-top:25px;font-weight:400;letter-spacing:-.025em}.hero-body{max-width:390px;margin-top:15px;font-size:1rem;line-height:1.8}.hero-content .button{margin-top:30px}.hero-platforms{display:flex;gap:22px;margin-top:35px;align-items:center;color:#bbbcb6}.hero-platforms>span{font-size:1.4rem;display:flex;align-items:center;gap:6px}.platform-small{font-size:.75rem}.hero-platforms .meta-symbol{font-size:2rem}.hero-platforms .web-symbol{font-size:1.1rem}.hero-bottom{position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:3;font-size:.75rem;color:var(--muted)}.scroll-link{display:flex;align-items:center;gap:12px}.scroll-circle{display:grid;place-items:center;width:33px;height:43px;border:1px solid #ffffff35;border-radius:30px;color:var(--gold);font-size:1rem}.coordinates{letter-spacing:.035em}.coordinates span{margin:0 12px}.frame-counter{font-variant-numeric:tabular-nums}.service-strip{display:flex;align-items:center;justify-content:center;gap:40px;padding:23px 28px;border-bottom:1px solid var(--line);color:#c0c1bb;white-space:nowrap;overflow:hidden;font-size:.85rem}.service-strip i{font-style:normal;color:var(--gold);font-size:1.1rem}.service-strip i:last-child{display:none}.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.pain-card{border:1px solid var(--line);background:linear-gradient(140deg,#ffffff04,transparent);border-radius:var(--radius);padding:32px;position:relative}.index{display:block;color:#666b65;font-size:.8rem;margin-bottom:45px;letter-spacing:.1em}.pain-card h3{font-size:1.4rem;margin-bottom:15px}.pain-card p{font-size:.95rem;line-height:1.8}.solutions{padding-top:40px}.solution-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:35px;align-items:start}.vision-card{position:sticky;top:40px;height:700px;border-radius:26px;overflow:hidden;border:1px solid #d6aa5933;background:#111}.media-slot{position:absolute;inset:0;overflow:hidden}.media-slot img,.media-slot video{height:100%;width:100%;object-fit:cover}.media-slot video{position:absolute;inset:0}.vision-card .media-slot img{object-position:52% center}.vision-caption{position:absolute;bottom:0;left:0;right:0;padding:140px 35px 35px;background:linear-gradient(transparent,#050505f5)}.vision-caption p{font-size:2rem;color:var(--text);line-height:1.1;letter-spacing:-.04em;max-width:300px;margin-top:15px}.vision-line{display:block;height:2px;width:60px;background:var(--gold);margin-top:23px}.crosshair{position:absolute;top:25px;left:26px;color:var(--gold);font-size:1.7rem;font-weight:200;line-height:1}.service-card{padding:30px 34px 34px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#171919b0,#0e1010c0);backdrop-filter:blur(16px);margin-bottom:20px}.service-card:last-child{margin:0}.service-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.service-icon{color:var(--gold);font-size:1.7rem}.service-card h3{max-width:450px;font-size:1.8rem}.service-card p{margin-top:17px;line-height:1.8;font-size:.95rem}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}.chips span{font-size:.75rem;border:1px solid #ffffff18;color:#b9bbb5;border-radius:100px;padding:5px 11px}.text-link{font-size:.875rem;display:flex;align-items:center;justify-content:space-between;margin-top:25px;color:var(--gold);padding-top:19px;border-top:1px solid var(--line)}.text-link span{font-size:1.3rem}.method{background:#101111;border-block:1px solid var(--line)}.method-track{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}.step-number{display:flex;justify-content:space-between;border-top:1px solid #d9b16d55;padding-top:20px;color:var(--gold);font-size:.875rem}.step-number span{color:#555}.method-step h3{margin-top:40px;margin-bottom:16px}.method-step p{font-size:.95rem;max-width:260px}.about{display:grid;grid-template-columns:1.35fr 1fr;gap:140px;align-items:center}.about-copy>p:not(.eyebrow){margin-top:26px;max-width:510px;line-height:1.8}.about-copy .about-note{color:var(--gold);font-size:.85rem}.stats{border-left:1px solid var(--line);padding-left:65px}.stat{padding:22px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:23px}.stat:last-child{border:0}.stat strong{font-size:4.3rem;font-weight:400;line-height:1;letter-spacing:-.055em;min-width:165px}.stat span{max-width:150px;font-size:.85rem;color:var(--muted);line-height:1.5}.portfolio{padding-top:30px;overflow:hidden}.carousel-controls{display:flex;align-items:center;gap:12px;margin-top:24px}.carousel-controls button{border:1px solid #ffffff30;border-radius:50%;width:42px;height:42px;font-size:1.2rem}.carousel-controls button:hover{border-color:var(--gold);color:var(--gold)}#carousel-count{margin-left:13px;color:var(--muted);font-size:.75rem}.project-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#675538 transparent;padding:0 max(56px,calc((100vw - 1280px)/2)) 24px;overscroll-behavior-x:contain}.project-card{flex:0 0 55%;min-width:0;scroll-snap-align:center}.project-visual{height:425px;position:relative;overflow:hidden;border-radius:22px;background:#161714;border:1px solid #ffffff20}.project-visual>img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.project-visual:hover>img{transform:scale(1.035)}.project-1>img{object-position:70% 20%}.project-2>img{object-position:40%}.project-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#040505c0,transparent),linear-gradient(0deg,#040505c0,transparent 70%);display:flex;flex-direction:column;justify-content:end;padding:35px 90px 35px 35px}.project-overlay>span{font-size:.65rem;letter-spacing:.14em;color:var(--gold)}.project-overlay h3{font-size:2.9rem;max-width:330px;margin-top:12px;line-height:1.02;letter-spacing:-.045em}.demo-badge{position:absolute;top:22px;left:22px;padding:6px 11px;border:1px solid #ffffff33;border-radius:100px;font-size:.625rem;letter-spacing:.1em;color:#eceae1;background:#0b0b0b80;backdrop-filter:blur(12px)}.project-open{width:47px;height:47px;border:1px solid #ffffff55;border-radius:50%;position:absolute;bottom:28px;right:26px;background:#ffffff08;font-size:1.5rem;backdrop-filter:blur(15px)}.project-open:hover{background:var(--gold);color:#111}.project-meta{display:flex;justify-content:space-between;gap:20px;margin-top:17px;font-size:.8rem;color:#b9bab5}.project-meta>span:last-child{font-size:.65rem;color:#72766e;letter-spacing:.08em}.differences{padding-top:45px}.differences>h2{margin-top:24px}.difference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;margin-top:65px}.difference-grid article{border-top:1px solid var(--line);padding-top:26px}.difference-icon{color:var(--gold);font-size:1.7rem}.difference-grid h3{font-size:1.4rem;margin-block:25px 17px}.difference-grid p{font-size:.95rem}.testimonials{border-top:1px solid var(--line);padding-block:65px}.testimonial-heading{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:25px}.testimonial-heading h2{font-size:2.5rem;max-width:650px}.quote-mark{color:var(--gold);font-family:Georgia,serif;font-size:6rem;line-height:1}.testimonial-empty{border:1px dashed #ffffff22;border-radius:14px;padding:25px 30px;margin-top:30px;display:flex;justify-content:space-between;gap:30px;align-items:center}.testimonial-empty span{font-size:.75rem;color:#737870}.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}.testimonial-grid figure{padding:30px;border:1px solid var(--line);border-radius:var(--radius);margin:30px 0 0}.testimonial-grid blockquote{margin:0 0 25px}.testimonial-grid figcaption{color:var(--gold)}.testimonial-grid figcaption span{display:block;color:var(--muted);font-size:.85rem}.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:90px}.faq h2{max-width:460px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{list-style:none;display:flex;align-items:center;gap:20px;cursor:pointer;padding:24px 0;font-size:1rem;line-height:1.5}.faq summary::-webkit-details-marker{display:none}.faq-number{font-size:.75rem;color:#767c73}.faq-plus{margin-left:auto;color:var(--gold);font-size:1.4rem;transition:transform .25s}.faq details[open] .faq-plus{transform:rotate(45deg)}.faq details>p{padding:0 30px 25px 36px;font-size:.95rem;line-height:1.8}.contact-section{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;border-block:1px solid #d1a45325;background:#0b0b09}.contact-section .media-slot{left:28%;width:90%;height:110%;top:-5%}.contact-section .media-slot img{object-fit:contain}.contact-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080909 10%,#080909ea 28%,#08090944 58%,transparent),linear-gradient(0deg,#080909,transparent 20%,transparent 80%,#080909)}.contact-content{position:relative;padding-block:75px}.contact-content h2{font-size:clamp(3.4rem,5.4vw,5.3rem);margin-top:25px;max-width:740px}.contact-content>p:not(.eyebrow){max-width:370px;margin-block:25px;font-size:1rem}.contact-note{display:block;margin-top:20px;font-size:.75rem;color:var(--muted)}.footer-main{display:grid;grid-template-columns:1.35fr .7fr 1fr;gap:80px;padding-block:75px 65px}.footer-brand img{width:160px;height:auto}.footer-brand p{font-size:.9rem;max-width:290px;margin-top:20px}.footer-links,.footer-contact{display:flex;flex-direction:column;align-items:start;gap:12px;font-size:.9rem}.footer-links>span,.footer-contact>span{color:#797e76;font-size:.75rem;margin-bottom:10px}.footer-contact p{font-size:.8rem;margin-top:5px}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-block:24px;border-top:1px solid var(--line);font-size:.75rem;color:#8c9286}.footer-bottom button{font-size:.75rem;padding:8px}.footer-word{font-weight:600;font-size:clamp(5rem,18.5vw,18rem);line-height:.92;letter-spacing:-.065em;text-align:center;color:#171a16;overflow:hidden;padding:20px 0 0;user-select:none}.mobile-nav[hidden]{display:none}dialog{background:#0e100f;color:var(--text);border:1px solid #eabe7066;border-radius:20px;width:min(95vw,1050px);padding:48px 25px 25px}dialog::backdrop{background:#000c;backdrop-filter:blur(12px)}dialog img{width:100%;max-height:70vh;object-fit:contain;border-radius:8px}dialog p{padding-top:18px;font-size:.85rem}.dialog-close{position:absolute;right:13px;top:3px;width:40px;height:40px;font-size:2rem}.motion-disabled{scroll-behavior:auto}.motion-disabled .hero-scroll{height:auto}.motion-disabled .hero-stage{position:relative}.motion-disabled *{transition:none!important;animation:none!important}.motion-disabled .vision-card{position:relative;top:auto}
@media(min-width:1600px){.hero-art{left:32%;width:78%}.hero-content h1{max-width:720px}.hero-stage{min-height:900px}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}.site-header{padding-inline:32px;gap:20px}.desktop-nav{gap:18px;font-size:.8rem}.header-actions{gap:14px}.brand{width:125px}.header-cta{display:none}.hero-content h1{max-width:570px}.hero-content{padding-top:45px}.hero-stage{min-height:760px}.hero-art{left:30%;width:95%}.split-heading{gap:45px}.about{gap:50px}.stats{padding-left:30px}.stat strong{min-width:140px;font-size:3.5rem}.vision-card{height:640px}.project-track{padding-inline:32px}.project-card{flex-basis:70%}.faq{gap:45px}.footer-main{gap:35px}}
@media(max-width:1024px){.desktop-nav{display:none}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:42px;padding:7px}.menu-toggle span{height:1px;width:24px;background:var(--text);transition:transform .25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.mobile-nav{position:fixed;inset:104px 0 0;background:#080909fa;backdrop-filter:blur(20px);z-index:49;padding:40px 28px;display:flex;flex-direction:column;gap:30px;overflow-y:auto}.mobile-nav>a:not(.button){font-size:2rem;letter-spacing:-.04em}.mobile-nav>.button{align-self:flex-start;margin-top:20px}.hero-content{margin-top:14vh!important}.hero-scroll{height:calc(100svh + 350px)!important}}
@media(max-width:760px){html{scroll-padding-top:85px}.wrap{width:calc(100% - 40px)}.section{padding-block:70px}.site-header{height:85px;padding-inline:20px}.brand{width:119px}.header-actions{gap:12px}.language button{font-size:.75rem;padding:10px 5px}.mobile-nav{inset:85px 0 0}.hero-stage{height:100svh;min-height:910px;max-height:none;display:block}.hero-content{padding-top:130px;margin-top:0!important}.hero-content .eyebrow{font-size:.65rem;letter-spacing:.12em;margin-bottom:22px}.hero-content h1{font-size:clamp(2.65rem,10.5vw,4.2rem);max-width:550px;line-height:1.06}.hero-sub{font-size:1.12rem;margin-top:20px}.hero-body{font-size:.9rem;max-width:340px;line-height:1.7;margin-top:13px}.hero-content .button{margin-top:24px;font-size:.8rem;padding:14px 20px}.hero-platforms{margin-top:23px;gap:20px}.hero-art{left:-30%;top:485px;width:160%;height:410px;pointer-events:none}.hero-art-vignette{background:linear-gradient(0deg,#080909,transparent 20%,transparent 85%,#080909),linear-gradient(90deg,#080909,transparent 15%,transparent 85%,#080909)}.hero-bottom{bottom:20px;font-size:.65rem}.coordinates{display:none}.frame-counter{padding-right:5px}.service-strip{justify-content:start;gap:26px;font-size:.75rem;padding:19px 20px}.section-heading{margin-bottom:34px}.eyebrow{font-size:.7rem}h2{font-size:clamp(2.1rem,8.7vw,3.4rem);line-height:1.1}.split-heading{display:block}.split-heading>p,.split-heading>div{margin-top:24px}.pain-grid{grid-template-columns:1fr;gap:13px}.pain-card{padding:24px}.index{margin-bottom:25px}.pain-card h3{font-size:1.3rem}.pain-card p{font-size:.9rem}.solution-grid{grid-template-columns:1fr;gap:20px}.vision-card{position:relative;top:auto;height:450px}.vision-card .media-slot img{object-fit:cover}.vision-caption{padding:110px 26px 25px}.vision-caption p{font-size:1.6rem}.service-card{padding:25px}.service-card h3{font-size:1.6rem}.service-card p{font-size:.9rem}.method-track{grid-template-columns:1fr 1fr;gap:35px 25px}.method-step h3{font-size:1.4rem;margin-top:25px}.method-step p{font-size:.875rem}.about{display:block}.stats{border-left:0;padding-left:0;margin-top:35px}.stat{gap:30px}.stat strong{min-width:155px;font-size:3.7rem}.stat span{max-width:170px}.project-track{padding-inline:20px;gap:24px}.project-card{flex-basis:90%}.project-visual{height:360px}.project-overlay{padding:30px 65px 30px 25px}.project-overlay h3{font-size:2.3rem}.project-meta{font-size:.75rem;gap:10px}.project-meta>span:last-child{display:none}.demo-badge{font-size:.6rem;left:15px;top:17px}.difference-grid{grid-template-columns:1fr;gap:25px;margin-top:35px}.difference-grid article{padding-top:25px}.difference-grid h3{margin-top:16px}.testimonial-heading{gap:15px}.testimonial-heading h2{font-size:2rem}.quote-mark{font-size:5rem}.testimonial-empty{display:block;padding:22px}.testimonial-empty p{font-size:.9rem}.testimonial-empty span{display:block;margin-top:12px}.testimonial-grid{grid-template-columns:1fr}.faq{display:block}.faq-list{margin-top:35px}.faq h2{max-width:none}.faq summary{font-size:.95rem;gap:12px}.faq details>p{padding-left:25px;font-size:.9rem}.contact-section{min-height:770px;align-items:start}.contact-content{padding-block:60px}.contact-content h2{font-size:clamp(2.6rem,10.8vw,4rem)}.contact-content>p:not(.eyebrow){font-size:.95rem;max-width:310px}.contact-section .media-slot{left:-33%;width:166%;height:460px;top:auto;bottom:-40px}.contact-shade{background:linear-gradient(0deg,#080909,transparent 22%,transparent 40%,#080909 62%)}.footer-main{grid-template-columns:1fr 1fr;gap:35px;padding-block:55px 35px}.footer-brand{grid-column:1/-1}.footer-brand p{max-width:340px}.footer-links,.footer-contact{font-size:.8rem}.footer-contact a{overflow-wrap:anywhere}.footer-bottom{flex-wrap:wrap;gap:8px;font-size:.7rem}.footer-bottom>span{width:100%}.footer-bottom>a{margin-left:auto}.footer-word{font-size:19vw;padding-top:15px}.motion-disabled .hero-stage{min-height:910px}}
.site-header{position:fixed}.project-visual>video{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* =============================================
   CHACAL — GLASSMORPHISM + ENHANCED MOTION
   ============================================= */
:root{--glass-bg:rgba(255,255,255,.04);--glass-bg-strong:rgba(12,14,14,.75);--glass-border:rgba(255,255,255,.10);--glass-border-glow:rgba(234,190,112,.22)}

/* === HEADER — glass ao scrollar === */
.site-header.scrolled{background:rgba(8,9,9,.72)!important;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-bottom:1px solid var(--glass-border)!important;box-shadow:0 1px 0 rgba(234,190,112,.06),0 4px 24px rgba(0,0,0,.35)}

/* === PAIN CARDS — glass + hover glow === */
.pain-card{background:var(--glass-bg)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:border-color .35s,box-shadow .35s,transform .35s!important}
.pain-card:hover{border-color:var(--glass-border-glow)!important;box-shadow:0 0 0 1px var(--glass-border-glow),0 8px 40px rgba(234,190,112,.08),inset 0 1px 0 rgba(255,255,255,.07);transform:translateY(-5px)}

/* === SERVICE CARDS — glass aprimorado === */
.service-card{background:var(--glass-bg-strong)!important;backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);transition:border-color .35s,box-shadow .35s!important}
.service-card:hover{border-color:var(--glass-border-glow)!important;box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 1px var(--glass-border-glow)}

/* === MOBILE NAV — glass === */
.mobile-nav{background:rgba(8,9,9,.82)!important;backdrop-filter:blur(32px) saturate(180%)!important;-webkit-backdrop-filter:blur(32px) saturate(180%)!important}

/* === DEMO BADGE — glass === */
.demo-badge{background:rgba(8,9,9,.55)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.16)!important}

/* === SCROLL CIRCLE — glass + hover === */
.scroll-circle{background:rgba(255,255,255,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .3s,background .3s,color .3s}
.scroll-link:hover .scroll-circle{border-color:var(--gold)!important;background:rgba(234,190,112,.10)}

/* === TESTIMONIALS — glass === */
.testimonial-grid figure{background:rgba(255,255,255,.025)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:border-color .35s,box-shadow .35s}
.testimonial-grid figure:hover{border-color:var(--glass-border-glow);box-shadow:0 8px 32px rgba(234,190,112,.07)}

/* === DIFFERENCE ARTICLES — hover slide === */
.difference-grid article{transition:border-color .35s,padding-left .35s!important}
.difference-grid article:hover{border-color:var(--glass-border-glow);padding-left:10px}

/* === STAT — hover gold === */
.stat strong{transition:color .35s}
.stat:hover strong{color:var(--gold)}

/* === PROJECT VISUAL — border glow hover === */
.project-visual{transition:border-color .4s,box-shadow .4s!important}
.project-visual:hover{border-color:rgba(234,190,112,.25)!important;box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(234,190,112,.15)}

/* === PROJECT OPEN — enhanced === */
.project-open{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .25s,border-color .25s,color .25s,transform .25s!important}
.project-open:hover{transform:scale(1.1)}

/* === CROSSHAIR — animação hover === */
.crosshair{transition:transform .4s ease,color .3s}
.vision-card:hover .crosshair{transform:scale(1.3) rotate(15deg)}

/* === FAQ — item aberto dourado === */
.faq details[open]>summary{color:var(--gold)}

/* === BUTTON — shine ao hover + ripple === */
.button{position:relative;overflow:hidden}
.button::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);background-size:200% 100%;background-position:-100% 0;transition:background-position .55s ease;pointer-events:none;border-radius:inherit}
.button:hover::before{background-position:200% 0}

/* === MARQUEE STRIP (100% INFINITO CONTÍNUO) === */
.service-strip{display:flex!important;align-items:center;overflow:hidden!important;user-select:none;padding:20px 0!important;border-bottom:1px solid var(--line);background:rgba(8,9,9,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);width:100%}
.strip-track{display:flex!important;align-items:center;width:max-content!important;will-change:transform;animation:chacalMarquee 90s linear infinite!important}
.strip-group{display:flex;align-items:center;gap:38px;padding-right:38px;flex-shrink:0;white-space:nowrap}
.strip-group span{font-size:.85rem;letter-spacing:.08em;color:#c4c6bf;text-transform:uppercase;font-weight:500;flex-shrink:0}
.strip-group i{font-style:normal;color:var(--gold);font-size:1.05rem;flex-shrink:0}
@keyframes chacalMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* === CAROUSEL CONTROLS — glass === */
.carousel-controls button{background:rgba(255,255,255,.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .25s,color .25s,background .25s,transform .2s!important}
.carousel-controls button:hover{transform:scale(1.08)}

/* === DIALOG — glass aprimorado === */
dialog{background:rgba(10,12,12,.95)!important;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}

/* =============================================
   HERO — IMERSIVO CENTRALIZADO (DESKTOP)
   Arte cobre 100% da tela, texto centrado.
   Mobile preserva layout original.
   ============================================= */
@media(min-width:761px){
  /* Chacal como backdrop total */
  .hero-art{left:0;width:100%}

  /* Vignette: escurece bordas e base, centro respira */
  .hero-art-vignette{background:
    linear-gradient(90deg,var(--bg) 0%,rgba(8,9,9,.55) 10%,transparent 28%,transparent 72%,rgba(8,9,9,.55) 90%,var(--bg) 100%),
    linear-gradient(0deg,var(--bg) 0%,rgba(8,9,9,.72) 16%,transparent 38%,transparent 82%,var(--bg) 100%)}

  /* Overlay escuro atrás do texto — melhora contraste sem escurecer toda a cena */
  .hero-stage::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 85% 52% at 50% 82%,rgba(8,9,9,.94) 0%,rgba(8,9,9,.65) 45%,transparent 75%);pointer-events:none;z-index:1}

  /* Conteúdo da hero: flex coluna centralizado */
  .hero-content{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:0;
    margin-top:22vh;
    filter:drop-shadow(0 2px 32px rgba(0,0,0,.65))
  }
  @media(max-width:1150px) {
    .hero-content{ margin-top:12vh; }
  }
  .hero-content .eyebrow{justify-content:center}
  .hero-content h1{max-width:none;text-shadow:0 2px 48px rgba(0,0,0,.8),0 0 80px rgba(0,0,0,.5)}
  .hero-content .hero-sub{text-align:center}
  .hero-content .hero-body{max-width:520px;text-align:center}
  .hero-platforms{justify-content:center}

  /* Linha decorativa da eyebrow some (fica estranha no centro) */
  .small-line{display:none}

  /* Hero bottom: mantém spread lateral */
  .hero-bottom{padding-inline:56px}
}

/* === HERO PLATFORMS DOTS === */
.platform-dot{color:var(--gold);font-weight:700;margin-inline:2px;opacity:.7}

/* === PROBLEM CONCLUSION === */
.problem-conclusion{margin-top:40px;padding:24px 32px;background:rgba(234,190,112,.05);border:1px solid rgba(234,190,112,.2);border-radius:var(--radius);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-align:center}
.problem-conclusion p{color:var(--text);font-size:1.05rem;line-height:1.7;margin:0 auto;font-weight:400;text-align:center}

/* === SERVICE LEAD === */
.service-lead{color:var(--text)!important;font-size:1rem;margin-top:12px;margin-bottom:8px;font-weight:500}

/* === ABOUT PARAGRAPHS === */
.about-paragraphs p{margin-top:18px;max-width:510px;line-height:1.8}

/* === TESTIMONIAL SUB === */
.testimonial-sub{color:var(--muted);margin-top:12px;font-size:1rem;max-width:650px}

/* === DIFFERENCE GRID (4 colunas no desktop) === */
@media(min-width:1151px){
  .difference-grid{grid-template-columns:repeat(4,1fr)!important;gap:32px!important}
}
@media(max-width:1150px) and (min-width:761px){
  .difference-grid{grid-template-columns:repeat(2,1fr)!important;gap:32px!important}
}

/* === VISION CANVAS & SCROLL ANIMATION === */
#vision-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:1}
#vision-canvas.loaded{opacity:1}
.vision-card .media-slot{z-index:0}
.vision-card .vision-caption{z-index:2}
.vision-card .crosshair{z-index:2}
.motion-disabled #vision-canvas{display:none}

/* === CONTACT SECTION BACKGROUND (chacal-rodape.webp) === */
.contact-section{min-height:680px;background:#080909}
.contact-section .media-slot{left:0!important;width:100%!important;height:115%!important;top:-7.5%!important}
.contact-section .media-slot img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:right center!important}
.contact-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080909f2 0%,#080909e6 28%,#08090966 52%,transparent 75%),linear-gradient(0deg,#080909 0%,transparent 25%,transparent 75%,#080909 100%)!important;pointer-events:none}
.contact-content h2{max-width:700px!important;line-height:1.08!important}
.contact-content h2 em{display:inline!important;white-space:normal!important}
.contact-content>p:not(.eyebrow){max-width:540px!important;line-height:1.75!important;font-size:1.05rem!important;margin-block:25px!important}
@media(max-width:760px){
  .contact-section{min-height:720px;align-items:start}
  .contact-section .media-slot{left:0!important;width:100%!important;height:100%!important;top:0!important;bottom:0!important}
  .contact-section .media-slot img{object-position:72% center!important}
  .contact-shade{background:linear-gradient(180deg,#080909f5 0%,#080909c0 40%,#08090955 70%,#080909 100%)!important}
  .contact-content h2 em{white-space:normal}
  .contact-content>p:not(.eyebrow){max-width:100%!important}
}

/* === BACK TO TOP & FOOTER STACKING === */
.footer-word{pointer-events:none!important}
.footer-bottom{position:relative;z-index:20}
.back-to-top{display:inline-flex;align-items:center;gap:6px;transition:color .25s ease,transform .25s ease;cursor:pointer;position:relative;z-index:21;pointer-events:auto}
.back-to-top:hover{color:var(--gold);transform:translateY(-2px)}

/* ==========================================================================
   SHOWCASE DE LANDING PAGES — GRID 3x3, FILTROS & MODAL CINEMATOGRÁFICO
   ========================================================================== */

/* Cabeçalho do Portfólio em 2 Linhas */
.portfolio .split-heading{
  grid-template-columns:1.55fr 1fr!important;
  gap:48px!important;
}
.portfolio .split-heading h2{
  font-size:clamp(2.3rem, 3.75vw, 3.85rem)!important;
  line-height:1.08!important;
  max-width:none!important;
}
@media(max-width:760px){
  .portfolio .split-heading{
    display:block!important;
  }
}

/* Barra de Filtros por Nicho */
.project-filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:38px;
}
.project-filter-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;
  font-size:0.82rem;
  color:#a5a9a1;
  transition:all .25s ease;
}
.project-filter-btn:hover{
  background:rgba(234,190,112,0.08);
  border-color:rgba(234,190,112,0.3);
  color:var(--text);
  transform:translateY(-1px);
}
.project-filter-btn.active{
  background:rgba(234,190,112,0.14);
  border-color:var(--gold);
  color:var(--gold);
  font-weight:600;
  box-shadow:0 0 20px rgba(234,190,112,0.15);
}
.filter-count{
  display:inline-grid;
  place-items:center;
  font-size:0.7rem;
  padding:1px 7px;
  border-radius:100px;
  background:rgba(255,255,255,0.08);
  color:#90948b;
  min-width:20px;
}
.project-filter-btn.active .filter-count{
  background:var(--gold);
  color:#080909;
  font-weight:700;
}

/* Grid de Projetos 3x3 */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.project-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  transition:transform .35s ease, opacity .35s ease;
}
.project-card.card-hidden{
  display:none!important;
}

/* Moldura de Janela de Navegador Minimalista */
.project-browser-frame{
  background:#101212;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(0,0,0,0.5);
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.project-card:hover .project-browser-frame{
  border-color:rgba(234,190,112,0.35);
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(234,190,112,0.2);
}

/* Barra Superior do Browser */
.browser-header{
  height:38px;
  background:#161818;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:14px;
  gap:10px;
  user-select:none;
}
.browser-dots{
  display:flex;
  gap:6px;
  align-items:center;
}
.browser-dots .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:block;
  opacity:0.75;
}
.browser-dots .dot-close{ background:#ff5f56; }
.browser-dots .dot-min{ background:#ffbd2e; }
.browser-dots .dot-max{ background:#27c93f; }

.browser-address-bar{
  flex:1;
  max-width:240px;
  height:24px;
  background:#0c0d0d;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:0.7rem;
  color:#82877f;
  padding-inline:10px;
}
.browser-address-bar .lock-icon{
  color:var(--gold);
  flex-shrink:0;
  opacity:0.8;
}
.browser-address-bar span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.browser-zoom-btn{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  display:grid;
  place-items:center;
  font-size:0.75rem;
  color:#9fa39b;
  transition:all .2s ease;
  background:transparent;
}
.browser-zoom-btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#080909;
}

/* Área de Viewport com Overflow Escondido e Efeito Hover Scroll */
.browser-viewport{
  position:relative;
  height:360px;
  overflow:hidden;
  background:#090a0a;
  cursor:pointer;
}
.project-long-img{
  width:100%;
  height:auto;
  display:block;
  transform:translateY(0);
  transition:transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change:transform;
}
.browser-viewport:hover .project-long-img{
  transform:translateY(var(--scroll-dist, -65%));
  transition:transform var(--scroll-speed, 5.5s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Overlay sutil com dica de hover e botão flutuante */
.browser-viewport-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:14px;
  background:linear-gradient(180deg, transparent 60%, rgba(8,9,9,0.7) 100%);
  transition:opacity .3s ease;
}
.hover-scroll-hint{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:0.68rem;
  letter-spacing:0.04em;
  color:#d4d6cf;
  background:rgba(12,14,14,0.85);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:100px;
  padding:5px 11px;
  transition:opacity .3s ease, transform .3s ease;
}
.mouse-icon{
  width:10px;
  height:14px;
  border:1px solid var(--gold);
  border-radius:6px;
  position:relative;
  display:inline-block;
}
.mouse-icon:after{
  content:'';
  position:absolute;
  top:2px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:3px;
  background:var(--gold);
  border-radius:1px;
  animation:mouseScroll 1.6s infinite;
}
@keyframes mouseScroll{
  0%{ transform:translate(-50%, 0); opacity:1; }
  100%{ transform:translate(-50%, 4px); opacity:0; }
}

.view-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.72rem;
  font-weight:600;
  color:#080909;
  background:var(--gold);
  border-radius:100px;
  padding:6px 13px;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  opacity:0;
  transform:translateY(8px);
  transition:all .25s ease;
}
.browser-viewport:hover .view-pill{
  opacity:1;
  transform:translateY(0);
}
.browser-viewport:hover .hover-scroll-hint{
  opacity:0.4;
}

/* Informações do Projeto abaixo do card */
.project-info{
  padding:18px 4px 0;
}
.project-tags{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.75rem;
  margin-bottom:8px;
}
.project-tag-cat{
  color:var(--gold);
  font-weight:600;
  letter-spacing:0.04em;
}
.browser-direct-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  color:var(--gold);
  font-size:0.68rem;
  margin-left:4px;
  opacity:0.8;
  transition:transform .2s ease, opacity .2s ease, color .2s ease;
}
.browser-direct-link:hover{
  transform:scale(1.25);
  opacity:1;
  color:#fff;
}
.project-tag-dot{
  color:#555953;
}
.project-tag-type{
  color:#8e9289;
}
.project-tag-loc{
  color:#9a9e96;
  font-size:0.7rem;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:100px;
  padding:1px 7px;
  letter-spacing:0.04em;
  background:rgba(255,255,255,0.03);
}
.project-card-title{
  font-size:1.22rem;
  letter-spacing:-0.03em;
  font-weight:500;
  color:var(--text);
  line-height:1.28;
  margin-bottom:8px;
  transition:color .25s ease;
}
.project-card:hover .project-card-title{
  color:var(--gold);
}
.project-card-desc{
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ==========================================================================
   MODAL LIGHTBOX CINEMATOGRÁFICO (REFINADO & ULTRA-PREMIUM)
   ========================================================================== */
dialog.cinematic-modal {
  margin: auto !important;
  padding: 0 !important;
  border: 1px solid rgba(234, 190, 112, 0.28) !important;
  border-radius: 20px !important;
  background: #090a0a !important;
  color: var(--text);
  width: min(94vw, 1260px) !important;
  height: min(88vh, 860px) !important;
  max-height: 860px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

dialog.cinematic-modal::backdrop {
  background: rgba(4, 5, 5, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cinematic-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Header do Modal */
.cinematic-header {
  height: 64px;
  min-height: 64px;
  padding: 0 24px;
  background: #101212;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  z-index: 5;
}

.cinematic-header-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cinematic-category {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}

.cinematic-title {
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: #f5f5f0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}

.cinematic-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Botão Site ao Vivo (Header) */
.modal-btn-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #cfd2cb;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.2;
}

.modal-btn-live:hover {
  background: rgba(234, 190, 112, 0.12);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

/* Botão CTA WhatsApp (Header) */
.modal-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #080909;
  background: var(--gold);
  border: 1px solid var(--gold);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.2;
}

.modal-btn-cta:hover {
  background: #f4d295;
  box-shadow: 0 4px 16px rgba(234, 190, 112, 0.25);
  transform: translateY(-1px);
}

/* Botão Fechar */
.cinematic-header .dialog-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #a5a9a1 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: all .2s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

.cinematic-header .dialog-close:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Corpo do Modal */
.cinematic-body {
  height: calc(100% - 64px);
  display: grid;
  grid-template-columns: 1fr 330px;
  overflow: hidden;
  background: #090a0a;
}

/* Canvas / Viewport da Landing Page */
.cinematic-canvas {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: #060707;
}

.cinematic-browser-bar {
  height: 38px;
  min-height: 38px;
  background: #111313;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  gap: 15px;
  flex-shrink: 0;
}

.cinematic-browser-bar .browser-address-bar {
  max-width: 340px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  color: #9fa29b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-badge-status {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #27c93f;
  font-weight: 600;
}

.cinematic-viewport {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--gold) rgba(255, 255, 255, 0.08) !important;
  background: #060707 !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch;
}

.cinematic-viewport::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}

.cinematic-viewport::-webkit-scrollbar-track {
  background: rgba(12, 14, 14, 0.95) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cinematic-viewport::-webkit-scrollbar-thumb {
  background: var(--gold) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
}

.cinematic-viewport::-webkit-scrollbar-thumb:hover {
  background: #f4d295 !important;
}

.cinematic-viewport img,
#modal-img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  object-fit: unset !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Sidebar do Modal */
.cinematic-sidebar {
  background: #0c0e0e;
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-desc {
  font-size: 0.88rem;
  color: #cfd1ca;
  line-height: 1.7;
  margin-block: 12px 20px;
}

.sidebar-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-block: 18px;
  border-block: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.meta-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #71756e;
  font-weight: 500;
}

.sidebar-meta-item strong {
  font-size: 0.84rem;
  font-weight: 500;
  color: #e2e4dd;
}

.sidebar-action-box {
  margin-top: auto;
  padding-top: 20px;
}

.sidebar-subtext {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 12px;
}

.modal-btn-sidebar {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  background: var(--gold);
  color: #080909;
  text-decoration: none;
  border: 1px solid var(--gold);
  transition: all .2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.modal-btn-sidebar:hover {
  background: #f4d295;
  box-shadow: 0 6px 22px rgba(234, 190, 112, 0.22);
  transform: translateY(-1px);
}

/* Responsividade da Grid de Projetos */
@media(max-width: 1150px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
  .browser-viewport {
    height: 330px;
  }
  .cinematic-body {
    grid-template-columns: 1fr 290px;
  }
}

/* Responsividade do Modal em Telas Médias e Mobile (< 860px) */
@media(max-width: 860px) {
  dialog.cinematic-modal {
    width: 95vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
  }

  .cinematic-header {
    height: 58px;
    min-height: 58px;
    padding: 0 16px;
  }

  .cinematic-title {
    font-size: 1rem;
    max-width: 280px;
  }

  /* No header mobile, mantemos o botão Live e escondemos o CTA duplo (já presente na sidebar) */
  .modal-btn-cta {
    display: none;
  }

  .modal-btn-live {
    padding: 6px 12px;
    font-size: 0.74rem;
  }

  .cinematic-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
    height: calc(100% - 58px);
    display: flex;
    flex-direction: column;
  }

  .cinematic-canvas {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 52vh;
    min-height: 380px;
    flex-shrink: 0;
  }

  .cinematic-viewport {
    padding: 0 !important;
  }

  .cinematic-viewport::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
  }

  .cinematic-sidebar {
    padding: 20px 16px;
    overflow: visible;
    height: auto;
    flex-shrink: 0;
  }
}

@media(max-width: 640px) {
  .project-filter-bar {
    gap: 8px 10px;
    margin-bottom: 28px;
    overflow: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .project-filter-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .browser-viewport {
    height: 310px;
  }

  .cinematic-title {
    max-width: 170px;
    font-size: 0.92rem;
  }
}

/* =============================================
   CHACAL — MODAL DE CAPTURA DE LEADS (DARK/GOLD/GLASS)
   ============================================= */
.lead-modal{
  background:rgba(12,14,14,.95)!important;
  border:1px solid rgba(234,190,112,.35)!important;
  border-radius:24px!important;
  width:min(92vw,520px)!important;
  max-width:520px!important;
  padding:0!important;
  backdrop-filter:blur(32px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(180%)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.85),0 0 0 1px rgba(234,190,112,.12)!important;
  overflow:hidden;
}
.lead-modal::backdrop{
  background:rgba(0,0,0,.82)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.lead-modal-shell{
  padding:34px 32px 32px;
  position:relative;
  display:flex;
  flex-direction:column;
}
.lead-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.lead-modal-close{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  margin:0!important;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#f0f0e9;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  transition:all .25s ease;
}
.lead-modal-close:hover{
  background:var(--gold);
  color:#080909;
  border-color:var(--gold);
  transform:scale(1.06);
}
.lead-header-text{
  margin-bottom:24px;
}
.lead-title{
  font-size:1.75rem;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.04em;
  color:var(--text);
  margin-bottom:8px;
}
.lead-subtitle{
  font-size:.92rem;
  color:var(--muted);
  line-height:1.55;
}
.lead-field-group{
  margin-bottom:18px;
}
.lead-field-group label{
  display:block;
  font-size:.82rem;
  font-weight:500;
  color:#d4d6cf;
  margin-bottom:8px;
  letter-spacing:.02em;
}
.lead-required{
  color:var(--gold);
}
.lead-optional{
  color:#737870;
  font-size:.75rem;
  font-weight:400;
}
.lead-input-wrap input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:14px 16px;
  color:var(--text);
  font-size:.95rem;
  font-family:inherit;
  outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.lead-input-wrap input:focus{
  border-color:var(--gold);
  background:rgba(234,190,112,.05);
  box-shadow:0 0 0 3px rgba(234,190,112,.15);
}
.lead-input-wrap input.has-error{
  border-color:#ef4444!important;
  background:rgba(239,68,68,.06)!important;
}
.lead-error-msg{
  display:none;
  font-size:.76rem;
  color:#f87171;
  margin-top:6px;
}
.lead-field-hint{
  display:block;
  font-size:.72rem;
  color:#71766e;
  margin-top:5px;
}
.lead-submit-btn{
  width:100%;
  margin-top:10px;
  background:var(--gold);
  color:#0f1110;
  font-weight:600;
  font-size:.95rem;
  padding:15px 24px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .2s,background .2s,box-shadow .2s;
}
.lead-submit-btn:hover{
  background:#f4d295;
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(234,190,112,.25);
}
.lead-submit-btn:disabled{
  opacity:.7;
  cursor:wait;
  transform:none;
}
.lead-success-content{
  text-align:center;
  padding:15px 0 10px;
}
.lead-success-badge{
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(234,190,112,.12);
  border:1px solid rgba(234,190,112,.3);
  color:var(--gold);
  display:grid;
  place-items:center;
  margin:0 auto 20px;
}
.lead-success-actions{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.lead-wa-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#25D366;
  color:#fff;
  padding:15px 22px;
  border-radius:12px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  transition:transform .2s,background .2s,box-shadow .2s;
}
.lead-wa-cta:hover{
  background:#20bd5a;
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(37,211,102,.3);
  color:#fff;
}
.lead-close-secondary-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:#c0c2bc;
  padding:12px 20px;
  border-radius:12px;
  font-size:.85rem;
  cursor:pointer;
  transition:all .2s;
}
.lead-close-secondary-btn:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}

/* =============================================
   CHACAL — RESPONSIVIDADE MOBILE REFINADA (HERO, PORTFÓLIO, MENU)
   ============================================= */
@media(max-width:768px){
  /* === HERO MOBILE === */
  .hero-scroll{
    height:calc(100svh + 120px)!important;
    position:relative!important;
  }
  .hero-stage{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    position:sticky!important;
    top:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    padding:0!important;
  }
  .hero-art{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    left:0!important;
    top:0!important;
    pointer-events:none!important;
    z-index:0!important;
  }
  .hero-art-vignette{
    position:absolute!important;
    inset:0!important;
    background:radial-gradient(ellipse 90% 70% at 50% 45%,rgba(8,9,9,.32) 0%,rgba(8,9,9,.78) 55%,var(--bg) 95%)!important;
    pointer-events:none!important;
    z-index:1!important;
  }
  .hero-content{
    position:relative!important;
    z-index:2!important;
    padding:85px 20px 20px!important;
    margin:0 auto!important;
    width:100%!important;
    max-width:480px!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }
  .hero-content .eyebrow{
    justify-content:center!important;
    font-size:.68rem!important;
    margin-bottom:14px!important;
  }
  .small-line{
    display:none!important;
  }
  .hero-content h1{
    font-size:clamp(2rem,7.5vw,2.5rem)!important;
    line-height:1.12!important;
    max-width:none!important;
    text-align:center!important;
    text-shadow:0 2px 24px rgba(0,0,0,.9),0 0 60px rgba(0,0,0,.6)!important;
    margin-bottom:14px!important;
  }
  .hero-content .hero-body{
    font-size:.88rem!important;
    line-height:1.6!important;
    max-width:330px!important;
    margin:0 auto!important;
    text-align:center!important;
    color:#d0d2cb!important;
    text-shadow:0 1px 16px rgba(0,0,0,.85)!important;
  }
  .hero-content .button{
    margin-top:20px!important;
    font-size:.88rem!important;
    padding:13px 22px!important;
    align-self:center!important;
  }
  .hero-platforms{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:8px 10px!important;
    margin-top:20px!important;
    width:100%!important;
  }
  .hero-platforms>span{
    font-size:.76rem!important;
    font-weight:500!important;
    color:#d0d2cb!important;
    padding:5px 12px!important;
    background:rgba(18,20,20,.72)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:100px!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    white-space:nowrap!important;
  }
  .platform-dot{
    display:none!important;
  }
  .hero-bottom{
    bottom:14px!important;
    justify-content:center!important;
  }
  .scroll-link{
    font-size:.75rem!important;
  }

  /* === PORTFÓLIO MOBILE (TOUCH SEM SCROLL, ABRIR DIRETO) === */
  .hover-scroll-hint{
    display:none!important;
  }
  .project-long-img{
    transform:none!important;
    transition:none!important;
  }
  .browser-viewport:hover .project-long-img,
  .browser-viewport:active .project-long-img,
  .browser-viewport:focus .project-long-img{
    transform:none!important;
  }
  .browser-viewport-overlay{
    opacity:1!important;
    background:linear-gradient(0deg,rgba(8,9,9,.75) 0%,transparent 55%)!important;
    align-items:flex-end!important;
    justify-content:center!important;
    padding-bottom:12px!important;
  }
  .view-pill{
    transform:none!important;
    font-size:.78rem!important;
    padding:7px 15px!important;
  }

  /* === MENU MOBILE ÂNCORAS === */
  .mobile-nav{
    position:fixed!important;
    inset:85px 0 0!important;
    background:rgba(8,9,9,.94)!important;
    backdrop-filter:blur(24px) saturate(180%)!important;
    -webkit-backdrop-filter:blur(24px) saturate(180%)!important;
    z-index:99!important;
    padding:35px 28px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
    overflow-y:auto!important;
  }
  .mobile-nav>a:not(.button){
    font-size:1.75rem!important;
    letter-spacing:-.03em!important;
    color:#f0f0e9!important;
    transition:color .2s ease!important;
  }
  .mobile-nav>a:not(.button):hover,
  .mobile-nav>a:not(.button):active{
    color:var(--gold)!important;
  }
  .mobile-nav[hidden]{
    display:none!important;
  }
  .mobile-nav>.button{
    align-self:flex-start!important;
    margin-top:16px!important;
  }
}

/* Mini containers das palavras-chave da Hero (Padrão Desktop & Mobile) */
.hero-platforms {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px 14px !important;
  margin-top: 28px !important;
}
.hero-platforms > span {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: #d6d8d1 !important;
  padding: 7px 18px !important;
  background: rgba(18, 20, 20, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 100px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}
.hero-platforms > span:hover {
  border-color: rgba(234, 190, 112, 0.45) !important;
  color: var(--gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(234, 190, 112, 0.15) !important;
}
.platform-dot {
  display: none !important;
}

/* === VISION CARD MOBILE ENQUADRAMENTO === */
@media(max-width:768px){
  .vision-card {
    height: 500px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }
  .vision-card .media-slot img {
    object-position: center 20% !important;
  }
  .vision-caption {
    padding: 100px 24px 24px !important;
  }
  .vision-caption p {
    font-size: 1.65rem !important;
  }
}