:root{
  --bg:#050608;
  --bg-soft:#0a0c0f;
  --fg:#f5f5f0;
  --muted:#a4a8af;
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.18);
  --accent:#b8ff2a;
  --accent-soft:rgba(184,255,42,.18);
  --pad:clamp(22px,4vw,72px);
  --radius:22px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;cursor:default}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit}
.skip{position:fixed;left:18px;top:18px;padding:10px 14px;z-index:9999;background:#fff;color:#000;transform:translateY(-180%)}
.skip:focus{transform:none}
.noise{position:fixed;inset:0;pointer-events:none;z-index:2500;opacity:.075;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed;inset:0 0 auto;z-index:2400;height:3px;background:rgba(255,255,255,.03)}
.progress i{display:block;width:100%;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),#d8ff8d)}
.cursor,.cursor-glow{display:none}
.header{position:fixed;inset:0 0 auto;z-index:1800;height:84px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(5,6,8,.72),transparent);transition:background .35s,border-color .35s,backdrop-filter .35s}
.header.scrolled{background:rgba(5,6,8,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font:900 1.7rem/1 Arial Black,Arial,sans-serif;letter-spacing:-.08em;position:relative;z-index:5}.logo span{color:var(--accent)}
.desktop-nav{display:flex;gap:clamp(18px,2.6vw,46px)}
.desktop-nav a,.menu-button,.kicker,.round-link,.scene-label,.project-copy a,.contact-button,.contact-link,.availability,.mobile-whats{font:700 .72rem/1.12 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
.desktop-nav a small{display:block;font-size:.56rem;color:#8f949d;margin-bottom:5px}
.menu-button{display:flex;align-items:center;gap:12px;background:none;border:0;color:#fff;cursor:pointer}
.menu-button svg{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;padding:9px;fill:none;stroke:currentColor;stroke-width:1.6;transition:.35s var(--ease)}
.menu-button:hover svg{border-color:var(--accent);color:var(--accent);transform:rotate(10deg)}
.mobile-menu{position:fixed;inset:0;z-index:1700;background:rgba(5,6,8,.98);backdrop-filter:blur(18px);display:grid;place-items:center;transform:translateY(-110%);transition:transform .7s var(--ease)}
.mobile-menu.open{transform:none}
.mobile-menu nav{display:grid;gap:18px;text-align:center}
.mobile-menu a{font:900 clamp(2.2rem,11vw,5rem)/.92 Arial Black,Arial,sans-serif;letter-spacing:-.07em;text-transform:uppercase}
.mobile-menu small{display:block;color:var(--accent);font:700 .75rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;margin-bottom:10px}
.mobile-whats{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);padding:14px 18px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03)}
.hero,.project-stage,.about,.statement,.services,.archive,.contact{position:relative}
.hero{min-height:100svh;padding:110px var(--pad) 56px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-grid,.project-stage:after,.statement:before,.archive:before,.contact:before{position:absolute;inset:0;content:"";background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:84px 84px;opacity:.9;pointer-events:none}
.hero-grid{z-index:-2;mask-image:linear-gradient(to bottom,#000,transparent 96%)}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 70% 48%,rgba(184,255,42,.16),transparent 28%),radial-gradient(circle at 38% 70%,rgba(80,120,255,.11),transparent 18%),linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.64))}
.hero-copy{position:relative;z-index:5;width:min(38rem,38vw);min-width:320px}
.hero h1{margin:24px 0 22px;font:900 clamp(4.5rem,8vw,9.6rem)/.8 Arial Black,Arial,sans-serif;letter-spacing:-.09em;text-transform:uppercase}
.hero h1 span{display:block;transform:translateY(26px);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.loaded .hero h1 span{transform:none;opacity:1}
.loaded .hero h1 span:nth-child(2){transition-delay:.08s}
.hero-sub{max-width:420px;margin:0 0 36px;font-size:clamp(1rem,1.2vw,1.28rem);line-height:1.28;color:#dadad4;transform:translateY(26px);opacity:0;transition:transform .9s var(--ease) .14s,opacity .9s var(--ease) .14s}
.loaded .hero-sub,.loaded .round-link,.loaded .kicker{transform:none;opacity:1}
.hero .kicker,.hero .round-link{transform:translateY(26px);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.round-link,.project-copy a,.contact-button,.contact-link{display:inline-flex;align-items:center;gap:18px}
.round-link svg,.project-copy a svg,.contact-button svg,.contact-link svg{width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;padding:11px;fill:none;stroke:currentColor;stroke-width:1.55;transition:.35s var(--ease)}
.round-link:hover svg,.project-copy a:hover svg,.contact-button:hover svg,.contact-link:hover svg{background:var(--accent);border-color:var(--accent);color:#050608;transform:translateX(4px) rotate(-5deg)}
.hero-art{position:absolute;inset:9% 3% 7% 31%;perspective:1800px}
.hero-word{position:absolute;right:0;top:-2%;width:76%;z-index:0;overflow:hidden}
.hero-word span{display:block;font:900 clamp(8rem,18vw,19rem)/.8 Arial Black,Arial,sans-serif;letter-spacing:-.11em;color:rgba(255,255,255,.92);transform:translate3d(calc(var(--heroShift,0px)),calc(var(--heroRise,0px)),0) scale(var(--heroScale,1));will-change:transform;text-shadow:0 10px 35px rgba(0,0,0,.25)}
.hero-panel{position:absolute;margin:0;border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 90px rgba(0,0,0,.55);overflow:hidden;transform-style:preserve-3d;will-change:transform,opacity}
.hero-panel img{width:100%;height:100%;object-fit:cover}
.hero-panel-a{left:16%;top:17%;width:56%;aspect-ratio:16/10;z-index:3;transform:translate3d(calc(var(--heroP,0)*-70px),calc(var(--heroP,0)*35px),0) rotateY(-14deg) rotateX(2deg) scale(calc(1 + var(--heroP,0)*.06));animation:floatA 8s ease-in-out infinite}
.hero-panel-b{right:2%;top:29%;width:38%;aspect-ratio:4/3;z-index:2;filter:grayscale(1);transform:translate3d(calc(var(--heroP,0)*60px),calc(var(--heroP,0)*-24px),0) rotateY(-9deg);animation:floatB 9s ease-in-out infinite}
.hero-panel-c{left:2%;bottom:2%;width:34%;aspect-ratio:16/10;z-index:1;filter:grayscale(1);transform:translate3d(calc(var(--heroP,0)*-45px),calc(var(--heroP,0)*32px),0) rotateY(11deg);animation:floatC 7s ease-in-out infinite}
@keyframes floatA{50%{transform:translate3d(calc(var(--heroP,0)*-70px),calc(var(--heroP,0)*35px - 12px),0) rotateY(-14deg) rotateX(2deg) scale(calc(1 + var(--heroP,0)*.06))}}
@keyframes floatB{50%{transform:translate3d(calc(var(--heroP,0)*60px),calc(var(--heroP,0)*-24px + 16px),0) rotateY(-9deg)}}
@keyframes floatC{50%{transform:translate3d(calc(var(--heroP,0)*-45px),calc(var(--heroP,0)*32px - 14px),0) rotateY(11deg)}}
.scene-rail{position:absolute;left:3%;top:31%;display:grid;gap:18px;z-index:10;color:#6e7278;font:700 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
.scene-rail span{padding-left:18px;position:relative}.scene-rail span:before{content:"";position:absolute;left:0;top:50%;margin-top:-3px;width:6px;height:6px;border-radius:50%;background:#656a70}
.scene-rail span.active{color:#fff}.scene-rail span.active:before{background:var(--accent);box-shadow:0 0 0 8px rgba(184,255,42,.14)}
.scroll-note{position:absolute;left:3%;bottom:4%;z-index:5;font:700 .58rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#d8d8d4}
.marquee-section{overflow:hidden;padding:10px 0 26px;background:#050608;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:28px;align-items:center;min-width:max-content;padding-left:24px;animation:marquee 24s linear infinite}
.marquee-large .marquee-track span{font:900 clamp(1.05rem,2.4vw,1.5rem)/1 Arial Black,Arial,sans-serif;letter-spacing:.12em;color:#f7f7f3;text-transform:uppercase}
.marquee-track i{font-style:normal;color:var(--accent);opacity:.9}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.projects{position:relative}
.projects-fog{position:fixed;inset:0;z-index:700;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(184,255,42,.18),transparent 22%),radial-gradient(circle at 70% 55%,rgba(255,255,255,.12),transparent 20%),radial-gradient(circle at 30% 45%,rgba(255,255,255,.1),transparent 18%),linear-gradient(180deg,rgba(245,245,245,.14),rgba(5,6,8,.8) 58%);filter:blur(42px);transition:opacity .28s linear}
.project-scene{height:185vh;position:relative}
.project-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#07080a;--p:0;--alpha:0;--lift:0px}
.project-stage:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 66% 50%,rgba(184,255,42,.16),transparent 28%),linear-gradient(180deg,#0a0b0d,#050608)}
.project-bg-word{position:absolute;right:-4vw;top:12vh;font:900 clamp(7rem,19vw,22rem)/.72 Arial Black,Arial,sans-serif;letter-spacing:-.1em;text-transform:uppercase;color:rgba(255,255,255,.09);transform:translate3d(calc((.5 - var(--p))*15vw),calc((var(--p) - .5)*4vh),0);will-change:transform}
.project-copy{position:absolute;left:var(--pad);top:50%;z-index:10;width:min(29rem,31vw);transform:translateY(calc(-50% + var(--lift)));opacity:var(--alpha);will-change:transform,opacity}
.scene-label{color:var(--accent)}
.project-copy h2,.about-copy h2,.services h2,.archive h2,.statement h2,.contact h2{margin:18px 0;font:900 clamp(3.9rem,7vw,8.3rem)/.82 Arial Black,Arial,sans-serif;letter-spacing:-.09em;text-transform:uppercase}
.project-copy>p:not(.scene-label),.about-copy>p:not(.kicker){max-width:34ch;font-size:clamp(1rem,1.12vw,1.18rem);line-height:1.28;color:#d2d4d5}
.project-canvas{position:absolute;left:34%;right:4%;top:12%;bottom:11%;perspective:1900px;transform-style:preserve-3d}
.screen{position:absolute;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:#111;box-shadow:0 35px 120px rgba(0,0,0,.65);will-change:transform,opacity}
.screen img{width:100%;height:100%;object-fit:cover}
.main-screen{left:12%;top:11%;width:72%;aspect-ratio:16/9;z-index:3;opacity:var(--alpha);transform:translate3d(calc((.5 - var(--p))*18vw),calc((.5 - var(--p))*7vh),0) rotateY(calc((.5 - var(--p))*18deg)) rotateX(calc((var(--p) - .5)*6deg)) scale(calc(.84 + var(--alpha)*.18))}
.back-screen{right:0;top:18%;width:54%;aspect-ratio:16/10;z-index:1;opacity:calc(.24 + var(--alpha)*.35);filter:grayscale(1) brightness(.55);transform:translate3d(calc((var(--p) - .5)*10vw),calc((var(--p) - .5)*6vh),0) rotateY(-11deg) scale(calc(.9 + var(--alpha)*.06))}
.detail-screen{left:0;bottom:2%;width:38%;aspect-ratio:4/3;z-index:2;opacity:calc(.22 + var(--alpha)*.4);filter:grayscale(.8) brightness(.7);transform:translate3d(calc((.5 - var(--p))*12vw),calc((var(--p) - .5)*7vh),0) rotateY(10deg) scale(calc(.92 + var(--alpha)*.08))}
.project-meta{position:absolute;right:var(--pad);bottom:5%;display:flex;gap:30px;color:#757b83;font:700 .55rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.project-meta b{color:#e5e6e1;font-weight:700}
.about,.services,.archive,.contact,.statement{padding:clamp(110px,12vw,190px) var(--pad)}
.about{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(360px,1fr);gap:7vw;align-items:center;background:#08090b}
.about figure{margin:0;position:relative;max-width:640px}
.about figure:after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid rgba(184,255,42,.42);z-index:-1}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:contrast(1.06)}
.about-copy h2 em,.contact h2 em{color:var(--accent);font-style:normal}
.statement{min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#c8ff39 0%, #b8ff2a 40%, #8af8cf 100%);color:#050608;overflow:hidden}
.statement p{position:relative;z-index:2;margin:0 0 14px;font:700 .74rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase}
.statement h2{position:relative;z-index:2;max-width:10ch;font-size:clamp(4.2rem,10vw,10rem);line-height:.9}
.statement:after{content:"VISUAL";position:absolute;inset:auto -6% 16% auto;font:900 22vw/.8 Arial Black,Arial,sans-serif;letter-spacing:-.12em;color:rgba(5,6,8,.06);text-transform:uppercase;transform:rotate(-7deg)}
.services{display:grid;grid-template-columns:.78fr 1.22fr;gap:7vw;background:#090a0c}
.service-list{display:grid;gap:14px}
.service-list article{position:relative;padding:28px 86px 28px 24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(184,255,42,.06),rgba(255,255,255,.02));display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:start;transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.service-list article span{color:#050608;background:var(--accent);border-radius:999px;padding:8px 0;text-align:center}
.service-list article h3{margin:0 0 8px;font-size:clamp(1.4rem,2.5vw,2.9rem);letter-spacing:-.05em}
.service-list article p{grid-column:2;margin:0;color:#d0d2d5;max-width:52ch;line-height:1.35}
.service-list article svg{position:absolute;right:20px;top:26px;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.65;opacity:.9;transition:transform .35s var(--ease),color .35s var(--ease)}
.service-list article:hover{transform:translateY(-6px);border-color:rgba(184,255,42,.55);background:linear-gradient(135deg,#c9ff42,#67f3d2);color:#050608}
.service-list article:hover p{color:#050608}.service-list article:hover svg{transform:translate(4px,-4px)}
.archive{background:#060709;overflow:hidden}
.archive header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:54px}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);transition:filter .35s var(--ease)}
.archive-grid a{position:relative;min-height:126px;padding:26px 26px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:14px;background:rgba(255,255,255,.01);opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.archive-grid a.is-visible{opacity:1;transform:none}
.archive-grid:hover a{filter:blur(2px);opacity:.5}
.archive-grid:hover a:hover{filter:none;opacity:1}
.archive-grid a:hover{background:linear-gradient(135deg,#c9ff42,#79f2d0);border-color:rgba(184,255,42,.7);color:#050608}
.archive-grid strong{font-size:clamp(1.2rem,1.65vw,1.6rem);letter-spacing:-.03em}
.archive-grid small{color:var(--accent);font:700 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
.archive-grid .archive-arrow{position:absolute;right:22px;top:22px;width:36px;height:36px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;transition:.35s var(--ease)}
.archive-grid .archive-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.archive-grid a:hover .archive-arrow{background:#050608;color:var(--accent);border-color:#050608;transform:translate(5px,-5px)}
.contact{min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#c8ff39 0%, #b8ff2a 45%, #8cf7d1 100%);color:#050608;overflow:hidden}
.contact .kicker{color:#1b1b1b}
.availability{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:#111}.availability i{width:10px;height:10px;border-radius:50%;background:#111;box-shadow:0 0 0 6px rgba(5,6,8,.14)}
.contact h2{max-width:12ch;font-size:clamp(4.3rem,10vw,10rem);line-height:.88;margin-bottom:32px}
.contact-actions{display:flex;gap:38px;align-items:center;flex-wrap:wrap}
.contact-button svg,.contact-link svg{border-color:rgba(5,6,8,.25)}
.footer{background:#050608;border-top:1px solid rgba(5,6,8,.12)}
.footer-top{padding:30px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:24px;color:#969aa0;font:700 .58rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.footer-top span{font:900 1.55rem/1 Arial Black,Arial,sans-serif;color:#fff}
.footer-marquee{padding:20px 0 28px;border-top:1px solid var(--line);overflow:hidden}
.footer-marquee .marquee-track{animation-duration:18s}
.footer-marquee span{font:900 clamp(2rem,6vw,4.2rem)/1 Arial Black,Arial,sans-serif;letter-spacing:-.05em;color:#fff;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:2300;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 12px;border-radius:999px;background:#0f1510;color:#fff;border:1px solid rgba(184,255,42,.35);box-shadow:0 14px 30px rgba(0,0,0,.36),0 0 0 0 rgba(184,255,42,.45);animation:whatsPulse 1.8s infinite}
.whatsapp-float svg{width:28px;height:28px;color:var(--accent)}
.whatsapp-float span{font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
@keyframes whatsPulse{0%{box-shadow:0 14px 30px rgba(0,0,0,.36),0 0 0 0 rgba(184,255,42,.45)}70%{box-shadow:0 14px 30px rgba(0,0,0,.36),0 0 0 16px rgba(184,255,42,0)}100%{box-shadow:0 14px 30px rgba(0,0,0,.36),0 0 0 0 rgba(184,255,42,0)}}

@media (pointer:fine){
  body{cursor:none}
  .cursor,.cursor-glow{display:block;position:fixed;left:0;top:0;pointer-events:none;z-index:2600}
  .cursor{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.45);border-radius:50%;mix-blend-mode:difference;transition:width .28s,height .28s,margin .28s,border-color .28s}
  .cursor span{position:absolute;left:50%;top:50%;width:6px;height:6px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%)}
  .cursor-glow{width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;background:radial-gradient(circle,rgba(184,255,42,.22),rgba(184,255,42,.08) 28%,rgba(184,255,42,0) 68%);opacity:.55;filter:blur(10px)}
  body.hovering .cursor{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(184,255,42,.7)}
}

@media (max-width:1180px){
  .desktop-nav{display:none}
  .hero-copy{width:min(38rem,46vw)}
  .hero-art{inset:12% -2% 6% 38%}
  .project-canvas{left:31%}
  .project-meta{display:none}
  .archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  :root{--pad:20px}
  .header{height:72px}
  .menu-button span{display:none}
  .hero{padding-top:98px;align-items:flex-start}
  .hero-copy{width:100%;min-width:0;max-width:420px}
  .hero h1{font-size:clamp(3.9rem,17vw,6.8rem);margin:18px 0 18px}
  .hero-sub{max-width:310px}
  .hero-art{inset:34% -22% 2% 2%;opacity:.82}
  .hero-word{right:8%;top:-3%;width:100%}
  .hero-word span{font-size:30vw;letter-spacing:-.12em}
  .hero-panel-a{left:10%;top:25%;width:62%}
  .hero-panel-b{right:4%;top:36%;width:42%}
  .hero-panel-c{left:0;bottom:4%;width:38%}
  .scene-rail,.scroll-note{display:none}
  .marquee-large .marquee-track span{font-size:1rem}
  .project-scene{height:auto}
  .project-stage{position:relative;height:auto;min-height:100svh;padding:92px 20px 66px}
  .project-bg-word{right:-18%;top:8%;font-size:27vw;transform:none;opacity:.72}
  .project-copy{position:relative;left:auto;top:auto;width:100%;transform:none!important;opacity:1!important;margin-bottom:20px}
  .project-copy h2{font-size:clamp(3.3rem,16vw,5.8rem)}
  .project-canvas{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:58vw;min-height:250px;margin-top:38px;perspective:none}
  .main-screen{left:7%;top:0;width:84%;transform:none!important;opacity:1!important}
  .back-screen{right:0;top:12%;width:56%;transform:none!important;opacity:.48!important}
  .detail-screen{left:0;bottom:0;width:42%;transform:none!important;opacity:.58!important}
  .about,.services{grid-template-columns:1fr;gap:54px}
  .about figure{max-width:500px}
  .statement h2,.contact h2{font-size:clamp(3.6rem,17vw,6rem)}
  .archive-grid{grid-template-columns:1fr}
  .contact-actions{flex-direction:column;align-items:flex-start;gap:18px}
  .footer-top{flex-direction:column;align-items:flex-start}
}
@media (max-width:540px){
  .hero{min-height:100svh;padding-bottom:20px}
  .hero-art{inset:42% -16% 3% 0;opacity:.78}
  .hero-word{top:4%;right:6%;width:96%}
  .hero-word span{font-size:26vw}
  .hero-panel-a{left:10%;top:18%;width:64%}
  .hero-panel-b{right:0;top:30%;width:44%}
  .hero-panel-c{left:2%;bottom:1%;width:44%}
  .services .kicker,.archive .kicker,.about .kicker,.contact .kicker{display:block}
  .service-list article{grid-template-columns:1fr;padding:22px 62px 22px 18px}
  .service-list article p{grid-column:auto}
  .service-list article span{width:52px}
  .archive-grid a{min-height:98px}
  .whatsapp-float span{display:none}
  .whatsapp-float{padding:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .hero h1 span,.hero-sub,.hero .kicker,.hero .round-link,.reveal{opacity:1!important;transform:none!important}
  .projects-fog{display:none}
}

/* ===== V3: COMPOSIÇÃO, FOG E RUÍDO TV ===== */
.noise{
  opacity:.16;
  mix-blend-mode:screen;
  background-image:
    repeating-radial-gradient(circle at 17% 32%,rgba(255,255,255,.22) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px);
  background-size:5px 5px,100% 4px;
  animation:tvNoise .18s steps(2,end) infinite,tvScan 6s linear infinite;
}
.noise::before,.noise::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
}
.noise::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");
  opacity:.85;
  animation:tvJump .16s steps(2,end) infinite;
}
.noise::after{
  background:linear-gradient(to bottom,transparent 0 46%,rgba(255,255,255,.14) 49%,rgba(255,255,255,.02) 52%,transparent 56%);
  animation:scanline 4.8s linear infinite;
}
@keyframes tvNoise{0%{transform:translate(0,0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(.5%,1%)}100%{transform:translate(0,0)}}
@keyframes tvJump{0%{transform:translate3d(-2%,-1%,0)}33%{transform:translate3d(1%,2%,0)}66%{transform:translate3d(2%,-2%,0)}100%{transform:translate3d(-1%,1%,0)}}
@keyframes scanline{from{transform:translateY(-55%)}to{transform:translateY(55%)}}
@keyframes tvScan{0%,92%,100%{filter:brightness(1)}94%{filter:brightness(1.5)}96%{filter:brightness(.65)}}

.projects-fog{
  background:
    radial-gradient(circle at 50% 45%,rgba(184,255,42,.11),transparent 20%),
    radial-gradient(circle at 68% 52%,rgba(255,255,255,.09),transparent 16%),
    linear-gradient(180deg,rgba(245,245,245,.05),rgba(5,6,8,.52) 60%);
  filter:blur(24px);
  max-height:100svh;
}

.statement{
  min-height:112svh;
  justify-content:flex-start;
  padding-top:clamp(90px,8vw,130px);
  background:
    linear-gradient(135deg,#c7ff38 0%,#b8ff2a 42%,#7ef1cb 100%);
}
.statement h2{max-width:8.8ch;line-height:.84;margin-top:28px}
.statement:after{content:""}
.statement-motion{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.statement-card{position:absolute;margin:0;overflow:hidden;border:1px solid rgba(5,6,8,.22);box-shadow:0 26px 80px rgba(5,6,8,.22);will-change:transform}
.statement-card img{width:100%;height:100%;object-fit:cover}
.statement-card-a{right:8%;top:13%;width:34vw;max-width:610px;aspect-ratio:16/10;transform:rotate(5deg);animation:statementFloatA 8s ease-in-out infinite}
.statement-card-b{right:22%;bottom:7%;width:26vw;max-width:470px;aspect-ratio:4/3;filter:grayscale(1);transform:rotate(-7deg);animation:statementFloatB 9s ease-in-out infinite}
.statement-card-c{right:-2%;bottom:15%;width:22vw;max-width:410px;aspect-ratio:4/3;filter:grayscale(.7);transform:rotate(8deg);animation:statementFloatC 7s ease-in-out infinite}
.statement-word{position:absolute;right:-4%;bottom:-3%;font:900 24vw/.78 Arial Black,Arial,sans-serif;letter-spacing:-.12em;color:rgba(5,6,8,.08);transform:rotate(-7deg)}
.statement-copy{position:absolute;left:var(--pad);bottom:46px;font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:#111}
@keyframes statementFloatA{50%{transform:translate3d(-12px,18px,0) rotate(3deg)}}
@keyframes statementFloatB{50%{transform:translate3d(15px,-18px,0) rotate(-4deg)}}
@keyframes statementFloatC{50%{transform:translate3d(-10px,-14px,0) rotate(5deg)}}

@media (max-width:1450px){
  .scene-rail{display:none}
  .hero-copy{width:min(38rem,42vw)}
}
@media (max-width:1180px){
  .hero-art{inset:13% -3% 7% 38%}
  .hero-word{right:5%;width:92%}
}
@media (max-width:860px){
  .statement{min-height:980px;padding-bottom:90px}
  .statement h2{position:relative;z-index:3;max-width:9ch}
  .statement-motion{opacity:.64}
  .statement-card-a{width:74vw;right:-18%;top:46%}
  .statement-card-b{width:54vw;right:35%;bottom:7%}
  .statement-card-c{width:44vw;right:-4%;bottom:13%}
  .statement-word{font-size:42vw;bottom:3%}
  .projects-fog{display:none}
}

/* === V4: CASE VISIBILITY + HERO RAIL SPACING === */
@media (min-width:1451px){
  .hero-copy{
    margin-left:86px;
    width:min(38rem,34vw);
  }
  .scene-rail{
    left:24px;
    top:29%;
    width:42px;
    gap:17px;
  }
  .scene-rail span{
    padding-left:18px;
    white-space:nowrap;
  }
}

/* Fog is atmospheric only and can never block the project UI. */
.projects-fog{
  z-index:2;
  opacity:0;
  max-height:100svh;
  mix-blend-mode:screen;
}
.project-stage{
  z-index:10;
}
.project-copy{
  z-index:30;
  pointer-events:auto;
}
.project-copy a{
  position:relative;
  z-index:40;
  pointer-events:auto;
}
.project-canvas{
  z-index:15;
}
.project-meta{
  z-index:25;
}
.project-bg-word{
  z-index:1;
}

/* The project never becomes unreadable while entering or leaving. */
.project-copy,
.main-screen{
  opacity:max(.72,var(--alpha));
}
.back-screen{
  opacity:max(.38,calc(.24 + var(--alpha)*.35));
}
.detail-screen{
  opacity:max(.4,calc(.22 + var(--alpha)*.4));
}

@media (max-width:1450px){
  .hero-copy{margin-left:0}
}

/* ===== V5: MOTION RESTORED + RESPONSIVE REBUILD ===== */
/* Dedicated space for the scene rail on wide screens. */
@media (min-width:1600px){
  .hero-copy{margin-left:118px;width:min(38rem,31vw)}
  .scene-rail{left:28px;width:54px}
}
@media (max-width:1599px){.scene-rail{display:none}}

/* Strong, readable scroll motion for featured cases. */
@media (min-width:861px){
  .project-copy{
    opacity:1!important;
    transform:translate3d(calc((.5 - var(--p))*-5vw),calc(-50% + (var(--p) - .5)*14vh),0)!important;
    transition:none;
  }
  .project-copy .scene-label{
    display:block;
    transform:translateX(calc((.5 - var(--p))*-34px));
    opacity:calc(.72 + var(--alpha)*.28);
  }
  .project-copy h2{
    transform:translate3d(calc((.5 - var(--p))*-70px),0,0) skewX(calc((.5 - var(--p))*-3deg));
    opacity:1;
    will-change:transform;
  }
  .project-copy>p:not(.scene-label){
    transform:translateX(calc((.5 - var(--p))*-42px));
    opacity:calc(.76 + var(--alpha)*.24);
  }
  .project-copy a{
    transform:translateX(calc((.5 - var(--p))*-25px));
    opacity:1;
  }
  .main-screen{
    opacity:1!important;
    transform:translate3d(calc((.5 - var(--p))*24vw),calc((.5 - var(--p))*12vh),0)
      rotateY(calc((.5 - var(--p))*25deg))
      rotateX(calc((var(--p) - .5)*8deg))
      rotateZ(calc((.5 - var(--p))*2deg))
      scale(calc(.82 + var(--p)*.24))!important;
  }
  .back-screen{
    opacity:.56!important;
    transform:translate3d(calc((var(--p) - .5)*17vw),calc((var(--p) - .5)*10vh),-130px)
      rotateY(calc(-15deg + (var(--p) - .5)*7deg))
      rotateZ(calc((var(--p) - .5)*-2deg))!important;
  }
  .detail-screen{
    opacity:.62!important;
    transform:translate3d(calc((.5 - var(--p))*16vw),calc((var(--p) - .5)*12vh),-40px)
      rotateY(calc(12deg + (.5 - var(--p))*8deg))
      rotateZ(calc((.5 - var(--p))*3deg))!important;
  }
  .project-bg-word{
    transform:translate3d(calc((.5 - var(--p))*20vw),calc((var(--p) - .5)*8vh),0)
      scale(calc(.94 + var(--p)*.12))!important;
  }
  .project-meta{transform:translateX(calc((var(--p) - .5)*42px));opacity:calc(.72 + var(--alpha)*.28)}
}

/* Cinematic text reveals throughout the page. */
.project-copy h2,.about-copy h2,.services h2,.archive h2,.statement h2,.contact h2{
  position:relative;
  text-shadow:0 14px 50px rgba(0,0,0,.2);
}
.reveal h2,.reveal>h2,.about-copy.reveal h2,.services header.reveal h2,.archive header.reveal h2{
  clip-path:inset(0 0 100% 0);
  transform:translateY(28px);
  transition:clip-path 1s var(--ease),transform 1s var(--ease);
}
.reveal.is-visible h2,.reveal.is-visible>h2,.about-copy.reveal.is-visible h2,.services header.reveal.is-visible h2,.archive header.reveal.is-visible h2{
  clip-path:inset(0);
  transform:none;
}
.statement h2,.contact h2{
  animation:textBreath 5s ease-in-out infinite;
}
@keyframes textBreath{50%{letter-spacing:-.065em;transform:translateX(8px)}}

/* Mobile is a separate composition, not a compressed desktop layout. */
@media (max-width:860px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .header{height:68px;padding-inline:18px}
  .hero{
    min-height:900px;
    height:auto;
    padding:96px 20px 34px;
    display:block;
    overflow:hidden;
  }
  .hero-copy{
    position:relative;
    z-index:20;
    width:100%;
    max-width:100%;
    margin:0;
    padding-right:4px;
  }
  .hero .kicker{font-size:.57rem;line-height:1.35;max-width:270px}
  .hero h1{
    font-size:clamp(3.75rem,18vw,6.4rem);
    line-height:.82;
    margin:18px 0 20px;
    max-width:100%;
    overflow:visible;
  }
  .hero-sub{font-size:1rem;max-width:300px;margin-bottom:26px}
  .hero-art{
    position:absolute;
    left:0;
    right:0;
    top:390px;
    bottom:20px;
    opacity:.92;
    perspective:900px;
  }
  .hero-word{
    left:8px;
    right:8px;
    top:0;
    width:auto;
    overflow:visible;
  }
  .hero-word span{
    font-size:clamp(5.4rem,27vw,9rem);
    line-height:.82;
    white-space:nowrap;
    transform:none!important;
    color:rgba(255,255,255,.92);
  }
  .hero-panel-a{left:8%;top:25%;width:76%;animation:mobileFloatA 6s ease-in-out infinite;transform:rotate(-3deg)!important}
  .hero-panel-b{right:-7%;top:42%;width:48%;animation:mobileFloatB 7s ease-in-out infinite;transform:rotate(5deg)!important}
  .hero-panel-c{left:-4%;bottom:2%;width:48%;animation:mobileFloatC 6.5s ease-in-out infinite;transform:rotate(-5deg)!important}
  @keyframes mobileFloatA{50%{transform:translateY(-12px) rotate(-1deg)!important}}
  @keyframes mobileFloatB{50%{transform:translateY(12px) rotate(3deg)!important}}
  @keyframes mobileFloatC{50%{transform:translateY(-10px) rotate(-3deg)!important}}

  .project-stage{padding:88px 20px 72px;min-height:860px;overflow:hidden}
  .project-copy{margin:0;position:relative;z-index:30}
  .project-copy h2{font-size:clamp(3.25rem,15vw,5.3rem);line-height:.84;margin:16px 0}
  .project-copy>p:not(.scene-label){max-width:31ch;font-size:.98rem}
  .project-canvas{height:64vw;min-height:260px;margin:38px -4px 0}
  .main-screen{left:5%;width:88%;top:3%;transform:rotate(-2deg)!important;animation:mobileCaseMain 6s ease-in-out infinite}
  .back-screen{right:-7%;width:58%;top:18%;transform:rotate(5deg)!important;animation:mobileCaseBack 7s ease-in-out infinite}
  .detail-screen{left:-5%;width:45%;bottom:0;transform:rotate(-5deg)!important;animation:mobileCaseDetail 6.5s ease-in-out infinite}
  @keyframes mobileCaseMain{50%{transform:translateY(-10px) rotate(1deg)!important}}
  @keyframes mobileCaseBack{50%{transform:translateY(10px) rotate(3deg)!important}}
  @keyframes mobileCaseDetail{50%{transform:translateY(-8px) rotate(-2deg)!important}}
  .project-bg-word{font-size:28vw;top:10%;right:-12%;opacity:.68}

  .statement{min-height:850px;padding:82px 20px 70px}
  .statement h2{font-size:clamp(3.25rem,15vw,5.3rem);max-width:9ch;line-height:.86}
  .statement-card-a{top:45%;right:-18%;width:78vw}
  .statement-card-b{bottom:6%;right:38%;width:55vw}
  .statement-card-c{bottom:12%;right:-10%;width:48vw}

  .contact{min-height:760px;padding:88px 20px}
  .contact h2{font-size:clamp(3.15rem,14.5vw,5.1rem);line-height:.88;max-width:9ch}

  .footer-top{
    padding:24px 20px;
    gap:10px;
    font-size:.48rem;
    line-height:1.45;
    letter-spacing:.1em;
  }
  .footer-top span{font-size:1.15rem}
  .footer-top p{margin:0;max-width:100%}
  .footer-marquee{padding:14px 0 18px}
  .footer-marquee span{font-size:clamp(1.35rem,8vw,2.2rem)}
  .footer-marquee .marquee-track{gap:16px;animation-duration:22s}
}

@media (max-width:430px){
  .hero{min-height:860px}
  .hero-art{top:400px}
  .hero-word span{font-size:25vw}
  .hero-panel-a{width:82%;left:5%}
  .project-stage{min-height:800px}
  .project-canvas{height:72vw;min-height:245px}
  .whatsapp-float{right:14px;bottom:14px}
}

/* ===== V6: TRUE SCROLL MOTION + CHARACTER REVEAL + SAFE SPACING ===== */
.statement h2,.contact h2{animation:none!important;letter-spacing:-.09em;transform:none}

/* Character reveal system */
.char-reveal{display:inline-block;overflow:hidden;vertical-align:top}
.char-reveal>.char{display:inline-block;opacity:0;transform:translate3d(0,1.05em,0) rotate(2deg);filter:blur(8px);will-change:transform,opacity,filter;transition:none}
.char-reveal>.char.space{width:.28em}
.char-reveal>.char.visible{opacity:1;transform:none;filter:blur(0)}

/* Never let featured project copy touch viewport edges. */
@media (min-width:861px){
  .project-copy{
    left:clamp(64px,5.2vw,104px)!important;
    width:min(31rem,30vw)!important;
    transform:translate3d(var(--copyX,0px),calc(-50% + var(--copyY,0px)),0)!important;
  }
  .project-copy .scene-label{transform:translate3d(var(--labelX,0px),0,0)!important}
  .project-copy h2{transform:none!important;overflow:visible}
  .project-copy>p:not(.scene-label){transform:translate3d(var(--bodyX,0px),0,0)!important}
  .project-copy a{transform:translate3d(var(--linkX,0px),0,0)!important}
  .project-canvas{left:36%;right:4.5%}
  .main-screen{transform:translate3d(var(--mainX,0px),var(--mainY,0px),0) rotateY(var(--mainRY,0deg)) rotateX(var(--mainRX,0deg)) rotateZ(var(--mainRZ,0deg)) scale(var(--mainS,1))!important}
  .back-screen{transform:translate3d(var(--backX,0px),var(--backY,0px),-130px) rotateY(var(--backRY,-12deg)) rotateZ(var(--backRZ,0deg))!important}
  .detail-screen{transform:translate3d(var(--detailX,0px),var(--detailY,0px),-40px) rotateY(var(--detailRY,10deg)) rotateZ(var(--detailRZ,0deg))!important}
  .project-bg-word{transform:translate3d(var(--bgX,0px),var(--bgY,0px),0) scale(var(--bgS,1))!important}
}

/* Remove all autonomous pulse/floating motion on mobile. Motion comes from scroll only. */
@media (max-width:860px){
  .hero-panel-a,.hero-panel-b,.hero-panel-c,.main-screen,.back-screen,.detail-screen{animation:none!important}
  .hero{min-height:920px;padding:96px 22px 34px}
  .hero-copy{padding-inline:0;max-width:100%}
  .hero h1{font-size:clamp(3.55rem,17vw,6.2rem);line-height:.84;max-width:94vw}
  .hero-art{top:410px;left:0;right:0;bottom:24px}
  .hero-word{left:18px;right:18px;top:0;width:auto;overflow:hidden}
  .hero-word span{font-size:clamp(4.8rem,24vw,8rem);transform:translate3d(var(--heroWordX,0px),var(--heroWordY,0px),0) scale(var(--heroWordS,1))!important}
  .hero-panel-a{transform:translate3d(var(--heroAX,0px),var(--heroAY,0px),0) rotate(var(--heroAR,-3deg))!important}
  .hero-panel-b{transform:translate3d(var(--heroBX,0px),var(--heroBY,0px),0) rotate(var(--heroBR,5deg))!important}
  .hero-panel-c{transform:translate3d(var(--heroCX,0px),var(--heroCY,0px),0) rotate(var(--heroCR,-5deg))!important}

  .project-stage{padding:92px 22px 76px;min-height:880px}
  .project-copy{width:100%;padding:0;margin:0 0 24px;transform:translate3d(var(--mCopyX,0px),var(--mCopyY,0px),0)!important}
  .project-copy h2{font-size:clamp(3rem,14vw,5rem);line-height:.86;max-width:100%;overflow:visible}
  .project-copy>p:not(.scene-label){font-size:.96rem;max-width:30ch}
  .project-canvas{height:68vw;min-height:255px;margin:42px 0 0}
  .main-screen{left:4%;width:88%;transform:translate3d(var(--mMainX,0px),var(--mMainY,0px),0) rotate(var(--mMainR,-2deg)) scale(var(--mMainS,1))!important}
  .back-screen{right:-2%;width:56%;transform:translate3d(var(--mBackX,0px),var(--mBackY,0px),0) rotate(var(--mBackR,5deg))!important}
  .detail-screen{left:-1%;width:43%;transform:translate3d(var(--mDetailX,0px),var(--mDetailY,0px),0) rotate(var(--mDetailR,-5deg))!important}

  .footer-top{padding:18px 20px!important;font-size:.42rem!important;line-height:1.35!important;gap:7px!important}
  .footer-top span{font-size:1rem!important}
  .footer-top p{font-size:.42rem!important;max-width:270px!important}
  .footer-marquee{padding:10px 0 12px!important}
  .footer-marquee span{font-size:clamp(.95rem,5.6vw,1.45rem)!important;letter-spacing:-.03em!important}
  .footer-marquee .marquee-track{gap:12px!important}
}

@media (max-width:430px){
  .hero{min-height:880px;padding-inline:18px}
  .hero-art{top:405px}
  .hero-word{left:14px;right:14px}
  .project-stage{padding-inline:18px}
  .project-copy h2{font-size:clamp(2.8rem,13.5vw,4.5rem)}
  .footer-top{padding:16px 18px!important}
  .footer-top p{font-size:.39rem!important;letter-spacing:.08em!important}
  .footer-marquee span{font-size:clamp(.85rem,5vw,1.2rem)!important}
}

/* ===== V7: TYPOGRAPHY FIT + HERO STARTS COMPLETE ===== */
@media (min-width:861px){
  .hero-copy{
    width:min(34rem,34vw)!important;
    min-width:300px;
    padding-left:clamp(42px,6.2vw,112px);
  }
  .hero h1{
    font-size:clamp(3.8rem,6.15vw,7.35rem)!important;
    line-height:.82!important;
    max-width:8.6ch;
    margin:22px 0 24px!important;
  }
  .hero-sub{
    max-width:360px!important;
    font-size:clamp(.98rem,1.05vw,1.15rem)!important;
  }
  .hero-art{inset:10% 3% 7% 34%!important}
  .hero-word{width:72%!important}
  .hero-word span{font-size:clamp(7rem,15vw,16.5rem)!important}

  .project-copy h2{
    font-size:clamp(3.15rem,5.15vw,6.35rem)!important;
    line-height:.86!important;
    max-width:8.5ch;
    overflow:visible;
  }
  .project-copy>p:not(.scene-label){
    max-width:31ch!important;
    font-size:clamp(.96rem,1vw,1.08rem)!important;
    line-height:1.34!important;
  }
  .project-copy{width:min(27rem,27vw)!important}
  .project-canvas{left:35%!important}
}

/* The hero must load fully readable. Scroll then deconstructs it. */
.hero .char-reveal>.char{
  opacity:1;
  transform:none;
  filter:none;
}

@media (max-width:860px){
  .hero h1{
    font-size:clamp(3.15rem,15vw,5.35rem)!important;
    line-height:.84!important;
    max-width:7.8ch!important;
  }
  .hero-sub{font-size:.94rem!important;max-width:285px!important}
  .hero-art{top:390px!important}
  .hero-word span{font-size:clamp(4.25rem,21vw,7rem)!important}
  .project-copy h2{
    font-size:clamp(2.65rem,12.4vw,4.35rem)!important;
    line-height:.87!important;
    max-width:9ch!important;
  }
  .statement h2,.contact h2{
    font-size:clamp(2.9rem,13vw,4.8rem)!important;
    line-height:.9!important;
  }
}

@media (max-width:430px){
  .hero h1{font-size:clamp(2.9rem,14vw,4.6rem)!important}
  .project-copy h2{font-size:clamp(2.45rem,11.8vw,3.9rem)!important}
  .footer-marquee span{font-size:clamp(.72rem,4.2vw,1rem)!important}
}

/* ===== V8: READABLE WORD-SAFE TYPOGRAPHY ===== */
.char-reveal{
  display:block!important;
  overflow:visible!important;
  white-space:normal;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
.char-reveal .word{
  display:inline-block;
  white-space:nowrap;
  vertical-align:top;
}
.char-reveal .char{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,1.05em,0) rotate(2deg);
  filter:blur(8px);
  will-change:transform,opacity,filter;
}
.hero .char-reveal .char{
  opacity:1;
  transform:none;
  filter:none;
}
.keep-line{white-space:nowrap;display:inline-block}

.project-copy h2,
.statement h2,
.services header h2,
.archive header h2,
.contact h2,
.about-copy h2{
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}

@media (min-width:861px){
  .project-copy{width:min(31rem,31vw)!important}
  .project-copy h2{
    font-size:clamp(2.8rem,4.55vw,5.7rem)!important;
    line-height:.88!important;
    max-width:none!important;
    letter-spacing:-.07em!important;
  }
  .project-scene[data-index="1"] .project-copy h2{font-size:clamp(2.65rem,4.2vw,5.25rem)!important}
  .project-scene[data-index="6"] .project-copy h2{font-size:clamp(2.35rem,3.75vw,4.7rem)!important}
  .statement h2{
    max-width:11.5ch!important;
    font-size:clamp(3.7rem,7.5vw,7.8rem)!important;
    line-height:.91!important;
    letter-spacing:-.075em!important;
  }
  .services header h2,.archive header h2{
    max-width:8ch!important;
    font-size:clamp(3.4rem,6.5vw,7rem)!important;
    line-height:.9!important;
  }
}

@media (max-width:860px){
  .project-copy h2{
    font-size:clamp(2.35rem,10.8vw,3.8rem)!important;
    line-height:.9!important;
    max-width:100%!important;
    letter-spacing:-.065em!important;
  }
  .project-scene[data-index="1"] .project-copy h2{font-size:clamp(2.2rem,10vw,3.55rem)!important}
  .project-scene[data-index="6"] .project-copy h2{font-size:clamp(2rem,9.3vw,3.25rem)!important}
  .statement h2{
    font-size:clamp(2.35rem,10.7vw,4rem)!important;
    line-height:.92!important;
    max-width:100%!important;
    letter-spacing:-.065em!important;
  }
  .services header h2,.archive header h2{
    font-size:clamp(2.45rem,11vw,4.1rem)!important;
    line-height:.92!important;
    max-width:100%!important;
  }
  .footer-marquee span{
    font-size:clamp(.7rem,3.8vw,.95rem)!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }
  .footer-marquee .marquee-track{gap:16px!important}
}

@media (max-width:430px){
  .project-copy h2{font-size:clamp(2.05rem,10vw,3.15rem)!important}
  .project-scene[data-index="1"] .project-copy h2{font-size:clamp(1.95rem,9.4vw,2.95rem)!important}
  .project-scene[data-index="6"] .project-copy h2{font-size:clamp(1.8rem,8.8vw,2.75rem)!important}
  .statement h2{font-size:clamp(2.05rem,9.8vw,3.4rem)!important}
  .services header h2,.archive header h2{font-size:clamp(2.15rem,10.3vw,3.5rem)!important}
}


/* ===== V10: VIDEO AMBIENTE, LOGO IMAGEM E INTERFACE DE CÓDIGO ===== */
.logo{display:inline-flex;align-items:center;justify-content:center}
.logo img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(184,255,42,.18),0 10px 26px rgba(0,0,0,.34);
}
.hero,.footer{overflow:hidden}
.ambient-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ambient-video-hero{
  z-index:-4;opacity:.11;filter:grayscale(1) contrast(1.1) brightness(.26);
  mix-blend-mode:screen;transform:scale(1.04)
}
.ambient-video-footer{opacity:.13;filter:grayscale(1) contrast(1.08) brightness(.24);mix-blend-mode:screen;transform:scale(1.08)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(5,6,8,.10),rgba(5,6,8,.52) 48%,rgba(5,6,8,.88) 100%);
}
.footer{position:relative;isolation:isolate}
.footer-video-wrap{position:absolute;inset:0;z-index:0}
.footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,8,.58),rgba(5,6,8,.78) 36%,rgba(5,6,8,.96));
}
.footer-top,.footer-marquee{position:relative;z-index:1}
.footer-top span{display:inline-flex;align-items:center;justify-content:center}
.footer-top span img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(184,255,42,.18)}

.code-figure{margin:0}
.code-window{
  position:relative;min-height:560px;border:1px solid rgba(255,255,255,.14);border-radius:24px;
  overflow:hidden;background:
    radial-gradient(circle at 80% 18%,rgba(184,255,42,.18),transparent 20%),
    linear-gradient(180deg,rgba(10,13,16,.96),rgba(5,6,8,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.45);
}
.code-window::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;opacity:.32
}
.code-window-top{
  position:relative;display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#d8d8d8
}
.code-window-top span{width:10px;height:10px;border-radius:50%;background:#2c3139}
.code-window-top span:nth-child(1){background:#ff5f57}.code-window-top span:nth-child(2){background:#febc2e}.code-window-top span:nth-child(3){background:#28c840}
.code-window-top strong{margin-left:8px;font-weight:700;color:#bcc1c8}
.code-screen{
  position:relative;min-height:440px;margin:0;padding:28px 26px 34px;
  font:500 .92rem/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#dce4ec;white-space:pre-wrap;
}
.code-screen code{display:block;max-width:100%}
.code-screen .token-key{color:#b8ff2a}
.code-screen .token-str{color:#8cf7d1}
.code-screen .token-tag{color:#93b8ff}
.code-caret{display:inline-block;width:10px;height:1.1em;vertical-align:-.12em;background:var(--accent);box-shadow:0 0 16px rgba(184,255,42,.65);animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.code-status{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:14px 22px 18px;border-top:1px solid rgba(255,255,255,.08);
  font:700 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;text-transform:uppercase;color:#adb2b8
}
.code-status b{color:var(--accent)}

.about{align-items:center}
.about-copy p{max-width:42ch}
.project-copy h2,
.statement h2,
.services header h2,
.archive header h2,
.contact h2{
  hyphens:none;word-break:keep-all;overflow-wrap:normal;text-wrap:balance
}
.project-copy h2{max-width:8ch;line-height:.88}
.contact h2{max-width:13ch}
.statement h2{max-width:13ch}

@media (max-width:860px){
  .logo img{width:46px;height:46px}
  .ambient-video-hero{opacity:.10}
  .hero::after{background:linear-gradient(180deg,rgba(5,6,8,.14),rgba(5,6,8,.66) 52%,rgba(5,6,8,.94))}
  .code-window{min-height:440px}
  .code-screen{min-height:328px;padding:22px 18px 24px;font-size:.8rem;line-height:1.6}
  .code-status{padding:12px 18px 16px;font-size:.58rem}
  .project-copy h2{font-size:clamp(2.65rem,13.4vw,4.6rem);max-width:9ch;line-height:.9}
  .statement h2{font-size:clamp(3rem,12vw,5rem);max-width:11ch;line-height:.92}
  .contact h2{font-size:clamp(3rem,13vw,5.2rem);max-width:10ch;line-height:.92}
  .footer-top{font-size:.54rem;gap:14px}
  .footer-top span img{width:42px;height:42px}
  .footer-marquee span{font-size:clamp(1.5rem,10vw,2.6rem)}
}
@media (max-width:540px){
  .project-copy h2{font-size:clamp(2.4rem,11.8vw,3.8rem);max-width:10ch}
  .project-copy p{max-width:27ch}
  .statement h2{font-size:clamp(2.6rem,11vw,4rem);max-width:10ch}
  .contact h2{font-size:clamp(2.6rem,12.4vw,4rem);max-width:10ch}
  .hero-sub{max-width:22ch}
  .footer-top{font-size:.5rem;line-height:1.4}
  .footer-marquee{padding:14px 0 18px}
  .footer-marquee span{font-size:clamp(1.2rem,8vw,2rem)}
}


/* V11 — user HTML + flat logo + subtle video + code animation */
.logo{display:inline-flex;align-items:center;justify-content:center}
.logo img{width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 1px rgba(184,255,42,.28),0 0 26px rgba(184,255,42,.16)}
.hero,.footer{isolation:isolate;overflow:hidden}
.ambient-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ambient-video--hero{z-index:-4;opacity:.075;filter:grayscale(1) contrast(1.12) brightness(.34);mix-blend-mode:screen;transform:scale(1.035)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,8,.14),rgba(5,6,8,.62) 58%,rgba(5,6,8,.92))}
.footer{position:relative}
.footer-video{position:absolute;inset:0;z-index:0}
.ambient-video--footer{opacity:.065;filter:grayscale(1) contrast(1.12) brightness(.3);mix-blend-mode:screen;transform:scale(1.05)}
.footer::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(5,6,8,.66),rgba(5,6,8,.94));pointer-events:none}
.footer-top,.footer-marquee{position:relative;z-index:1}
.footer-top>span{display:inline-flex}.footer-top>span img{width:46px;height:46px;border-radius:50%}
.code-visual{margin:0;min-width:0}
.code-editor{position:relative;min-height:560px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:radial-gradient(circle at 80% 18%,rgba(184,255,42,.15),transparent 23%),linear-gradient(180deg,#0c0f13,#050608);box-shadow:0 35px 100px rgba(0,0,0,.48)}
.code-editor::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px}
.code-editor__bar,.code-editor__footer{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.08);color:#aeb4bb;font:700 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.code-editor__bar>span{margin-right:auto}.code-editor__bar>b,.code-editor__footer strong{color:var(--accent)}
.code-editor__dots{display:flex;gap:7px}.code-editor__dots i{width:9px;height:9px;border-radius:50%;background:#3a4048}.code-editor__dots i:nth-child(1){background:#ff5f57}.code-editor__dots i:nth-child(2){background:#febc2e}.code-editor__dots i:nth-child(3){background:#28c840}
.code-editor__screen{position:relative;z-index:1;min-height:438px;margin:0;padding:28px 24px;overflow:hidden;white-space:pre-wrap;color:#dce4ec;font:500 clamp(.76rem,.9vw,.94rem)/1.72 ui-monospace,SFMono-Regular,Menlo,monospace}
.code-editor__cursor{display:inline-block;width:9px;height:1.05em;background:var(--accent);vertical-align:-.12em;box-shadow:0 0 14px rgba(184,255,42,.65);animation:code-caret 1s steps(1,end) infinite}
.code-editor__footer{justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);border-bottom:0}@keyframes code-caret{50%{opacity:0}}
@media(max-width:860px){.logo img{width:46px;height:46px}.ambient-video--hero{opacity:.06}.ambient-video--footer{opacity:.05}.code-editor{min-height:450px}.code-editor__screen{min-height:332px;padding:22px 18px;font-size:.76rem;line-height:1.62}.code-editor__bar,.code-editor__footer{padding:13px 16px;font-size:.56rem}}
@media(max-width:540px){.code-editor{min-height:410px;border-radius:18px}.code-editor__screen{min-height:300px;font-size:.7rem}.footer-top>span img{width:40px;height:40px}}


/* ===== V13: CORREÇÃO DEFINITIVA DE VÍDEO ===== */
.hero{isolation:isolate;background:#050608}
.hero .ambient-video-hero{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.12!important;
  visibility:visible!important;
  display:block!important;
  filter:grayscale(1) contrast(1.08) brightness(.42)!important;
  mix-blend-mode:screen!important;
  transform:scale(1.035)!important;
}
.hero::before{
  z-index:1!important;
  background:radial-gradient(circle at 70% 48%,rgba(184,255,42,.12),transparent 28%),linear-gradient(180deg,rgba(5,6,8,.12),rgba(5,6,8,.48) 56%,rgba(5,6,8,.88))!important;
}
.hero::after{z-index:1!important;background:linear-gradient(180deg,rgba(5,6,8,.08),rgba(5,6,8,.32) 46%,rgba(5,6,8,.78) 100%)!important}
.hero-grid{z-index:2!important}
.hero-copy,.hero-art,.scene-rail,.scroll-note{z-index:3!important}

.footer{position:relative!important;isolation:isolate!important;background:#050608!important}
.footer-video-wrap{position:absolute!important;inset:0!important;z-index:0!important;overflow:hidden!important}
.footer .ambient-video-footer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.11!important;
  visibility:visible!important;
  display:block!important;
  filter:grayscale(1) contrast(1.08) brightness(.38)!important;
  mix-blend-mode:screen!important;
  transform:scale(1.04)!important;
}
.footer::before{z-index:1!important;background:linear-gradient(180deg,rgba(5,6,8,.50),rgba(5,6,8,.78) 45%,rgba(5,6,8,.94))!important}
.footer-top,.footer-marquee{position:relative!important;z-index:2!important}

@media(max-width:860px){
  .hero .ambient-video-hero{opacity:.10!important;filter:grayscale(1) contrast(1.06) brightness(.38)!important}
  .footer .ambient-video-footer{opacity:.09!important}
}
@media(prefers-reduced-motion:reduce){
  .ambient-video{display:block!important}
}

/* ===== V14: VÍDEO VISÍVEL E AINDA SUTIL ===== */
.hero .ambient-video-hero{
  opacity:.34!important;
  filter:grayscale(1) contrast(1.12) brightness(.52)!important;
  mix-blend-mode:normal!important;
}
.hero::before{
  background:
    radial-gradient(circle at 70% 48%,rgba(184,255,42,.10),transparent 30%),
    linear-gradient(90deg,rgba(5,6,8,.72) 0%,rgba(5,6,8,.40) 42%,rgba(5,6,8,.30) 100%)!important;
}
.hero::after{
  background:linear-gradient(180deg,rgba(5,6,8,.08),rgba(5,6,8,.20) 50%,rgba(5,6,8,.68) 100%)!important;
}
.footer .ambient-video-footer{
  opacity:.30!important;
  filter:grayscale(1) contrast(1.12) brightness(.50)!important;
  mix-blend-mode:normal!important;
}
.footer::before{
  background:linear-gradient(180deg,rgba(5,6,8,.44),rgba(5,6,8,.62) 48%,rgba(5,6,8,.82))!important;
}
@media(max-width:860px){
  .hero .ambient-video-hero{opacity:.28!important;filter:grayscale(1) contrast(1.08) brightness(.48)!important}
  .footer .ambient-video-footer{opacity:.25!important}
}


/* ===== V15: HERO MAIS VISÍVEL + VÍDEO NA SEÇÃO CONTATO ===== */
.hero .ambient-video-hero{
  opacity:.44!important;
  filter:grayscale(1) contrast(1.14) brightness(.58)!important;
}
.hero::before{
  background:
    radial-gradient(circle at 70% 48%,rgba(184,255,42,.08),transparent 30%),
    linear-gradient(90deg,rgba(5,6,8,.66) 0%,rgba(5,6,8,.34) 42%,rgba(5,6,8,.24) 100%)!important;
}
.hero::after{
  background:linear-gradient(180deg,rgba(5,6,8,.05),rgba(5,6,8,.15) 52%,rgba(5,6,8,.60) 100%)!important;
}

.contact{
  position:relative!important;
  isolation:isolate!important;
  background:#b8ff2a!important;
}
.contact .ambient-video-contact{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.48!important;
  filter:grayscale(1) contrast(1.14) brightness(.72)!important;
  mix-blend-mode:multiply!important;
  transform:scale(1.035)!important;
  display:block!important;
  visibility:visible!important;
}
.contact::before{
  z-index:1!important;
  background-image:
    linear-gradient(rgba(5,6,8,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,6,8,.06) 1px,transparent 1px),
    linear-gradient(135deg,rgba(200,255,57,.78) 0%,rgba(184,255,42,.70) 45%,rgba(140,247,209,.72) 100%)!important;
  background-size:84px 84px,84px 84px,100% 100%!important;
  opacity:1!important;
}
.contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(184,255,42,.44) 0%,rgba(184,255,42,.18) 58%,rgba(140,247,209,.20) 100%);
}
.contact > :not(.ambient-video-contact){position:relative;z-index:2}

.footer-video-wrap,.footer .ambient-video-footer{display:none!important}
.footer{background:#050608!important}

@media(max-width:860px){
  .hero .ambient-video-hero{opacity:.36!important;filter:grayscale(1) contrast(1.10) brightness(.54)!important}
  .contact .ambient-video-contact{opacity:.42!important;filter:grayscale(1) contrast(1.10) brightness(.68)!important}
  .contact::before{background-image:linear-gradient(rgba(5,6,8,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(5,6,8,.05) 1px,transparent 1px),linear-gradient(135deg,rgba(200,255,57,.82),rgba(140,247,209,.76))!important}
}


/* ===== V16: CONTACT VIDEO STRONGER + NEON MOCKUP PORTFOLIO ===== */
.contact .ambient-video-contact{
  opacity:.72!important;
  filter:grayscale(1) contrast(1.18) brightness(.96)!important;
  mix-blend-mode:soft-light!important;
  transform:scale(1.06)!important;
}
.contact::before{
  background-image:
    linear-gradient(rgba(5,6,8,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,6,8,.04) 1px,transparent 1px),
    linear-gradient(135deg,rgba(200,255,57,.58) 0%,rgba(184,255,42,.48) 42%,rgba(140,247,209,.58) 100%)!important;
  opacity:.92!important;
}
.contact::after{
  background:linear-gradient(90deg,rgba(184,255,42,.16) 0%,rgba(184,255,42,.06) 56%,rgba(140,247,209,.10) 100%)!important;
}
.contact h2,.contact .contact-actions,.contact .availability,.contact .kicker{
  text-shadow:0 10px 30px rgba(255,255,255,.08),0 18px 55px rgba(0,0,0,.08);
}

.project-stage{overflow:hidden}
.project-canvas{
  filter:drop-shadow(0 20px 55px rgba(184,255,42,.08));
}
.project-canvas::before{
  content:"";
  position:absolute;
  inset:12% 8% 6% 8%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 58% 40%, rgba(184,255,42,.22), transparent 24%),
    radial-gradient(circle at 34% 74%, rgba(72,120,255,.14), transparent 20%),
    radial-gradient(circle at 72% 20%, rgba(255,255,255,.08), transparent 12%);
  filter:blur(42px);
  transform:translate3d(calc((.5 - var(--p))*4vw),calc((var(--p) - .5)*3vh),0);
}
.screen{
  border-radius:20px;
  border:1px solid rgba(184,255,42,.24);
  background:linear-gradient(180deg,#0b0f12 0%,#111318 100%);
  box-shadow:
    0 30px 95px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 26px rgba(184,255,42,.07);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
}
.screen::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:38px;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(circle at 18px 19px,#ff5f56 0 4px,transparent 4.5px),
    radial-gradient(circle at 34px 19px,#ffbd2e 0 4px,transparent 4.5px),
    radial-gradient(circle at 50px 19px,#27c93f 0 4px,transparent 4.5px),
    linear-gradient(90deg,rgba(184,255,42,.26) 0%,rgba(255,255,255,.10) 58%,rgba(184,255,42,.18) 100%),
    linear-gradient(180deg,rgba(14,18,24,.96),rgba(8,10,14,.88));
  background-repeat:no-repeat;
  background-size:auto,auto,auto,64% 10px,100% 100%;
  background-position:0 0,0 0,0 0,76px 14px,0 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(184,255,42,.10),transparent 22%,transparent 76%,rgba(184,255,42,.05)),
    radial-gradient(circle at 14% 10%,rgba(255,255,255,.18),transparent 16%),
    linear-gradient(180deg,transparent 0%,transparent 72%,rgba(4,5,7,.20) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  mix-blend-mode:screen;
}
.screen img{
  display:block;
  filter:contrast(1.08) saturate(1.12) brightness(.99);
  transform:scale(1.012);
  transition:transform .55s var(--ease), filter .55s var(--ease), opacity .45s var(--ease);
}
.main-screen{border-color:rgba(184,255,42,.34); box-shadow:0 42px 120px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04) inset,0 0 44px rgba(184,255,42,.13)}
.back-screen,.detail-screen{border-color:rgba(255,255,255,.16)}
.back-screen img,.detail-screen img{filter:contrast(1.03) saturate(1.04) brightness(.82)}
@media (hover:hover){
  .project-stage:hover .screen,
  .project-scene:hover .screen{
    border-color:rgba(184,255,42,.42);
    box-shadow:
      0 34px 110px rgba(0,0,0,.68),
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 0 36px rgba(184,255,42,.16);
  }
  .project-stage:hover .main-screen,
  .project-scene:hover .main-screen{
    box-shadow:
      0 48px 130px rgba(0,0,0,.74),
      0 0 0 1px rgba(255,255,255,.05) inset,
      0 0 60px rgba(184,255,42,.20);
  }
  .project-stage:hover .screen img,
  .project-scene:hover .screen img{
    filter:contrast(1.12) saturate(1.15) brightness(1.03);
  }
  .project-stage:hover .main-screen img,
  .project-scene:hover .main-screen img{transform:scale(1.03)}
}
@media (max-width:860px){
  .contact .ambient-video-contact{
    opacity:.62!important;
    filter:grayscale(1) contrast(1.12) brightness(.92)!important;
  }
  .contact::before{opacity:.88!important}
  .screen{border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 22px rgba(184,255,42,.08)}
  .screen::before{height:32px; background-size:auto,auto,auto,58% 8px,100% 100%; background-position:0 0,0 0,0 0,68px 12px,0 0}
}
@media (max-width:480px){
  .contact .ambient-video-contact{
    opacity:.68!important;
    mix-blend-mode:overlay!important;
    filter:grayscale(1) contrast(1.15) brightness(1)!important;
  }
}


/* ===== V18: ARCHIVE VISUAL PREVIEWS ===== */
.archive{isolation:isolate}
.archive header{position:relative;z-index:3;align-items:flex-end;flex-wrap:wrap}
.archive-intro{max-width:34ch;margin:0 0 12px auto;color:var(--muted);font-size:clamp(.88rem,1.15vw,1.08rem);line-height:1.55}
.archive-grid{position:relative;z-index:2}
.archive-grid a{transition-delay:calc(var(--archive-index,0) * 22ms)}
.archive-thumb{display:none;position:relative;overflow:hidden;aspect-ratio:16/9;border-bottom:1px solid rgba(255,255,255,.10);background:#050608}
.archive-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(184,255,42,.18),transparent 35%,rgba(0,0,0,.16));mix-blend-mode:screen}
.archive-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.06) contrast(1.06)}
.archive-preview{position:fixed;left:0;top:0;width:min(560px,38vw);aspect-ratio:16/9;z-index:9990;pointer-events:none;opacity:0;visibility:hidden;transform:translate3d(var(--preview-x,50vw),var(--preview-y,50vh),0) scale(.88) rotate(-1.5deg);transition:opacity .22s ease,visibility .22s ease,transform .18s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.archive-preview.is-active{opacity:1;visibility:visible;transform:translate3d(var(--preview-x,50vw),var(--preview-y,50vh),0) scale(1) rotate(0deg)}
.archive-preview-inner{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(184,255,42,.54);border-radius:18px;background:#050608;box-shadow:0 32px 90px rgba(0,0,0,.68),0 0 55px rgba(184,255,42,.20),inset 0 0 0 1px rgba(255,255,255,.04)}
.archive-preview-inner::before{content:"";position:absolute;inset:-1px;z-index:3;border-radius:inherit;background:linear-gradient(105deg,rgba(184,255,42,.24),transparent 24%,transparent 75%,rgba(184,255,42,.14));pointer-events:none}
.archive-preview img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.08) saturate(1.12);transform:scale(1.015)}
.archive-preview-noise{position:absolute;inset:-35%;z-index:4;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");animation:archiveNoise .18s steps(2) infinite;mix-blend-mode:screen}
.archive-preview-label{position:absolute;left:18px;bottom:16px;z-index:5;padding:9px 12px;background:rgba(5,6,8,.82);border:1px solid rgba(184,255,42,.42);color:var(--accent);font:800 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;border-radius:999px}
@keyframes archiveNoise{0%{transform:translate(0,0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(1%,2%)}100%{transform:translate(-3%,-1%)}}
.archive-grid.is-previewing a{filter:blur(2.8px) grayscale(.45);opacity:.34;transform:scale(.985)}
.archive-grid.is-previewing a.is-preview-target{filter:none;opacity:1;transform:translateY(-4px) scale(1.01);z-index:3;background:linear-gradient(135deg,rgba(184,255,42,.16),rgba(121,242,208,.08));border-color:rgba(184,255,42,.48);color:#fff}
.archive-grid.is-previewing a.is-preview-target small{color:var(--accent)}
.archive-grid.is-previewing a.is-preview-target .archive-arrow{background:var(--accent);color:#050608;border-color:var(--accent);transform:translate(5px,-5px)}
.archive-grid a.has-preview::before{content:"PREVIEW";position:absolute;left:26px;top:24px;color:rgba(184,255,42,.54);font:800 .47rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;opacity:0;transform:translateY(-5px);transition:.3s var(--ease)}
.archive-grid a.has-preview:hover::before{opacity:1;transform:none}
@media (max-width:1024px){.archive-preview{width:min(480px,48vw)}}
@media (max-width:860px){
  .archive-preview{display:none}
  .archive header{display:block}
  .archive-intro{margin:18px 0 0;max-width:30ch}
  .archive-grid a.has-preview{padding:0 0 20px;min-height:0;overflow:hidden}
  .archive-grid a.has-preview strong,.archive-grid a.has-preview small{margin-left:20px;margin-right:58px}
  .archive-grid a.has-preview strong{margin-top:18px}
  .archive-grid a.has-preview .archive-arrow{top:auto;bottom:18px;right:18px}
  .archive-grid a.has-preview::before{display:none}
  .archive-thumb{display:block}
  .archive-grid:hover a,.archive-grid.is-previewing a{filter:none;opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.archive-preview-noise{animation:none}.archive-preview{transition:none}}


/* ================= V19 IMMERSIVE EXPERIENCE ================= */
.experience-intro{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;background:#030405;color:#fff;transition:opacity .55s ease,visibility .55s ease;overflow:hidden}
.experience-intro.is-done{opacity:0;visibility:hidden;pointer-events:none}
.intro-scan{position:absolute;inset:-30%;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(184,255,42,.055) 3px 4px),radial-gradient(circle at 50% 50%,rgba(184,255,42,.2),transparent 35%);animation:introScan 1.8s linear infinite}
.intro-inner{position:relative;text-align:center;display:grid;justify-items:center;gap:14px;letter-spacing:.18em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.intro-inner img{width:82px;height:82px;filter:drop-shadow(0 0 24px rgba(184,255,42,.5));animation:introLogo 1.2s cubic-bezier(.2,.8,.2,1) both}
.intro-inner p{font-size:.78rem;color:var(--accent);margin:0}.intro-inner strong{font-size:clamp(.75rem,1.2vw,1rem);font-weight:700}
.intro-progress{width:min(340px,70vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden}.intro-progress i{display:block;height:100%;background:var(--accent);box-shadow:0 0 18px var(--accent);animation:introProgress 1.75s ease forwards}
.intro-inner button{border:0;background:none;color:#888;font:700 .6rem/1 ui-monospace;letter-spacing:.14em;text-transform:uppercase;padding:12px;cursor:pointer}
@keyframes introProgress{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}@keyframes introScan{to{transform:translateY(4%)}}@keyframes introLogo{from{opacity:0;transform:scale(.5) rotate(-18deg)}to{opacity:1;transform:none}}

.experience-controls{display:flex;gap:8px;margin-left:auto;margin-right:12px}.experience-controls button{border:1px solid rgba(255,255,255,.16);background:rgba(5,6,8,.62);color:#fff;border-radius:999px;padding:9px 12px;font:700 .58rem/1 ui-monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;gap:6px;cursor:pointer;backdrop-filter:blur(14px)}.experience-controls b{color:var(--accent)}

.project-scene{--theme-glow:rgba(184,255,42,.9)}
.project-stage{background:#050608}
.case-hud{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:calc(.2 + var(--alpha)*.8)}
.hud-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 14px var(--accent);transform-origin:left;will-change:transform}.hud-line-a{width:48%;left:47%;top:21%;transform:scaleX(calc(.15 + var(--p)*.85)) rotate(-4deg)}.hud-line-b{width:38%;left:51%;bottom:19%;transform:scaleX(calc(.2 + (1 - var(--p))*.8)) rotate(6deg)}
.hud-node{position:absolute;width:14px;height:14px;border:1px solid var(--accent);border-radius:50%;box-shadow:0 0 18px var(--accent)}.hud-node:after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}.hud-node-a{left:63%;top:18%;transform:translate(calc(var(--p)*120px),calc(var(--p)*60px))}.hud-node-b{right:8%;bottom:22%;transform:translate(calc(var(--p)*-80px),calc(var(--p)*-40px))}
.hud-panel{position:absolute;width:190px;padding:16px 18px;border:1px solid rgba(184,255,42,.36);background:rgba(4,6,7,.5);backdrop-filter:blur(12px);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 0 28px rgba(184,255,42,.08)}.hud-panel small{display:block;color:#9aa09e;font-size:.58rem;letter-spacing:.12em}.hud-panel strong{display:block;margin:7px 0 10px;color:var(--accent);font-size:1.3rem}.hud-panel i{display:block;height:3px;background:linear-gradient(90deg,var(--accent) 68%,rgba(255,255,255,.12) 68%)}.hud-panel-a{right:3.5%;top:10%;transform:translateY(calc((.5 - var(--p))*55px))}.hud-panel-b{right:5%;bottom:8%;transform:translateY(calc((var(--p) - .5)*45px))}
.hud-svg{position:absolute;inset:8% 2% 8% 35%;width:63%;height:84%;overflow:visible}.hud-path{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:10 10;filter:drop-shadow(0 0 6px var(--accent));stroke-dashoffset:calc((1 - var(--p))*260)}.hud-path-b{opacity:.45;stroke-width:.8}

/* Individual visual languages */
.project-scene[data-theme="finance"] .case-hud{background:linear-gradient(90deg,transparent 36%,rgba(41,94,255,.05))}.project-scene[data-theme="finance"] .hud-svg{transform:skewY(-2deg)}
.project-scene[data-theme="terrain"] .case-hud{background-image:repeating-radial-gradient(ellipse at 72% 58%,transparent 0 34px,rgba(184,255,42,.055) 35px 36px)}.project-scene[data-theme="terrain"] .hud-svg{filter:sepia(.2)}
.project-scene[data-theme="eco"] .case-hud:before{content:"♻";position:absolute;right:13%;top:33%;font-size:7rem;color:rgba(184,255,42,.12);transform:rotate(calc(var(--p)*180deg))}
.project-scene[data-theme="architecture"] .case-hud{background-image:linear-gradient(rgba(184,255,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(184,255,42,.05) 1px,transparent 1px);background-size:34px 34px}.project-scene[data-theme="architecture"] .hud-panel{border-radius:0}
.project-scene[data-theme="industrial"] .case-hud:after{content:"";position:absolute;inset:12% 7% 14% 43%;border:1px solid rgba(184,255,42,.12);background:repeating-linear-gradient(90deg,transparent 0 19px,rgba(184,255,42,.04) 20px);transform:perspective(800px) rotateY(-8deg)}
.project-scene[data-theme="medical"] .hud-path-a{d:path("M10 260 L180 260 L210 260 L240 150 L280 370 L315 260 L440 260 L480 210 L520 310 L560 260 L790 260");stroke-width:2.2}.project-scene[data-theme="medical"] .case-hud{background:radial-gradient(circle at 70% 48%,rgba(184,255,42,.07),transparent 23%)}
.project-scene[data-theme="logistics"] .hud-path-a{stroke-dasharray:3 8;stroke-width:2.4}.project-scene[data-theme="logistics"] .case-hud:before{content:"ROUTE 01 / ACTIVE";position:absolute;right:8%;top:32%;color:var(--accent);font:700 .62rem ui-monospace;letter-spacing:.15em;transform:translateX(calc((.5 - var(--p))*60px))}

.case-transition{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:clamp(0,calc((var(--p) - .78)*5),1);mix-blend-mode:screen}.case-transition span{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(184,255,42,.25),transparent);transform:translateX(calc((var(--p) - .78)*450%)) skewX(-16deg)}.case-transition i{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 3px 4px);clip-path:inset(calc((1 - var(--p))*100%) 0 0)}
.project-scene .main-screen{transform:translate3d(var(--mainX,0),var(--mainY,0),0) rotateY(calc(-8deg + var(--p)*14deg)) rotateX(calc((.5 - var(--p))*3deg)) scale(calc(.92 + var(--p)*.16))!important;filter:brightness(calc(.82 + var(--alpha)*.3)) saturate(1.05)}
.project-scene .back-screen{transform:translate3d(var(--backX,0),var(--backY,0),-80px) rotateY(calc(10deg - var(--p)*18deg)) scale(calc(.82 + var(--p)*.1))!important}.project-scene .detail-screen{transform:translate3d(var(--detailX,0),var(--detailY,0),60px) rotate(calc(-5deg + var(--p)*9deg)) scale(calc(.78 + var(--p)*.12))!important}

.technical-panel{position:absolute;left:4%;bottom:8%;z-index:15;width:min(310px,28vw);padding:18px;border:1px solid rgba(184,255,42,.35);background:rgba(4,6,7,.82);backdrop-filter:blur(18px);opacity:0;transform:translateY(18px);transition:.45s var(--ease);pointer-events:none;font-family:ui-monospace;color:#ddd}.technical-panel small{color:var(--accent);letter-spacing:.12em}.technical-panel ul{padding-left:18px;margin:14px 0 0;line-height:1.8;font-size:.72rem}.mode-technical .technical-panel{opacity:1;transform:none}.mode-technical .project-copy>p:not(.scene-label),.mode-technical .project-meta{opacity:.25}.mode-technical .case-hud{opacity:1}.mode-technical .project-bg-word{opacity:.08}

.authority{position:relative;padding:clamp(90px,10vw,160px) var(--pad);overflow:hidden;background:#050608}.authority:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 42%,rgba(184,255,42,.13),transparent 28%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,70px 70px,70px 70px}.authority>*{position:relative}.authority h2{font:900 clamp(3.6rem,8.5vw,10rem)/.82 Arial Black,Arial,sans-serif;letter-spacing:-.075em;margin:20px 0 60px;max-width:12ch}.authority h2 span{color:var(--accent)}.authority-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.14)}.authority-grid article{padding:34px;min-height:190px;border-right:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:flex-end}.authority-grid article:last-child{border:0}.authority-grid strong{font:900 clamp(2rem,3.2vw,4rem)/.9 Arial Black;color:#fff}.authority-grid span{margin-top:12px;color:#a8aaa8;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}.authority-strip{display:flex;gap:28px;white-space:nowrap;margin-top:40px;font:700 .68rem ui-monospace;letter-spacing:.13em;color:#d5d5d0}.authority-strip i{color:var(--accent)}

.cursor{mix-blend-mode:difference}.cursor span:after{content:"";position:absolute;inset:-18px;border:1px solid rgba(184,255,42,.5);border-radius:50%;transform:scale(.25);opacity:0;transition:.25s}.hovering .cursor span:after{transform:scale(1);opacity:1}.project-scene:hover .main-screen img{filter:saturate(1.25) contrast(1.08)}

@media(max-width:1100px){.experience-controls{display:none}.hud-panel{display:none}.authority-grid{grid-template-columns:repeat(2,1fr)}.authority-grid article:nth-child(2){border-right:0}.authority-grid article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}}
@media(max-width:860px){.experience-intro{display:none}.case-hud{opacity:.55}.hud-svg{inset:18% 0 22% 0;width:100%;height:60%}.technical-panel{display:none}.authority{padding-inline:20px}.authority h2{font-size:clamp(3rem,13vw,5.4rem);margin-bottom:34px}.authority-grid{grid-template-columns:1fr 1fr}.authority-grid article{padding:22px;min-height:135px}.authority-grid strong{font-size:clamp(1.5rem,7vw,2.6rem)}.authority-strip{overflow:hidden}.case-transition{display:none}}
@media(max-width:520px){.authority-grid{grid-template-columns:1fr}.authority-grid article{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)!important}.authority h2{max-width:10ch}}
@media(prefers-reduced-motion:reduce){.experience-intro{display:none}.case-transition,.case-hud{display:none!important}}


/* V20 header/menu refinement */
.header{justify-content:flex-start}
.logo{position:relative;z-index:6;flex:0 0 auto}
.desktop-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:flex-start;width:max-content;z-index:4}
.desktop-nav a{text-align:center}
.menu-button{display:none;position:relative;z-index:6;margin-left:auto}
.experience-controls{margin-left:auto;position:relative;z-index:5}

/* V20 archive cleanup */
.archive .archive-intro{max-width:560px}
.archive-grid a{padding-top:28px}
.archive-grid a strong{max-width:calc(100% - 70px)}

@media (max-width:1180px){
  .menu-button{display:flex}
  .experience-controls{display:none}
}
@media (max-width:860px){
  .header{justify-content:space-between}
  .menu-button{display:flex}
}


/* ============================================================
   V21 — FLOATING SYSTEM / SMART CURSOR / FILTERS / PERFORMANCE
   ============================================================ */
:root{--motion-scale:1;--float-opacity:1}
body.performance-lite{--motion-scale:.45;--float-opacity:.35}
body.motion-reduced{--motion-scale:0;--float-opacity:0}

/* Floating contextual objects */
.floating-system{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden;opacity:var(--float-opacity);transition:opacity .45s var(--ease)}
.float-object{position:absolute;display:grid;place-items:center;color:var(--accent);will-change:transform;filter:drop-shadow(0 0 18px rgba(184,255,42,.26));opacity:.42}
.float-ring{width:86px;height:86px;border:1px solid rgba(184,255,42,.38);border-radius:50%;left:6vw;top:28vh}
.float-ring:before,.float-ring:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.13);border-radius:50%}.float-ring:after{inset:31px;background:var(--accent);box-shadow:0 0 24px var(--accent)}
.float-cube{width:72px;height:72px;right:7vw;top:61vh;perspective:500px}.float-cube i{width:42px;height:42px;border:1px solid rgba(184,255,42,.55);transform:rotateX(54deg) rotateZ(45deg);box-shadow:inset 0 0 24px rgba(184,255,42,.08)}
.float-code{left:13vw;top:76vh;font:800 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;border:1px solid rgba(184,255,42,.25);padding:10px 12px;background:rgba(5,6,8,.54);backdrop-filter:blur(10px)}
.float-chip{right:14vw;top:22vh;font:800 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;padding:10px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(5,6,8,.6);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.float-cross{right:31vw;top:82vh;width:38px;height:38px}.float-cross:before,.float-cross:after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);transform:translate(-50%,-50%)}.float-cross:before{width:38px;height:1px}.float-cross:after{width:1px;height:38px}

/* Contextual cursor */
@media (hover:hover) and (pointer:fine){
  .cursor-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 .5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#050608;opacity:0;font-style:normal;transition:opacity .22s}
  body.cursor-context .cursor{width:72px;height:72px;margin:-36px 0 0 -36px;background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
  body.cursor-context .cursor span{opacity:0}
  body.cursor-context .cursor-label{opacity:1}
}

/* Reactive grid deformation */
.hero-grid,.project-stage:after,.archive:before,.contact:before{background-position:calc(var(--grid-x,0px) * .16) calc(var(--grid-y,0px) * .16);transition:background-position .08s linear}

/* Archive filters */
.archive-filters{display:flex;flex-wrap:wrap;gap:10px;margin:-24px 0 34px;position:relative;z-index:4}
.archive-filters button{appearance:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.025);color:#d9ddd5;border-radius:999px;padding:11px 15px;font:800 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.3s var(--ease)}
.archive-filters button:hover,.archive-filters button.is-active{background:var(--accent);border-color:var(--accent);color:#050608;box-shadow:0 0 26px rgba(184,255,42,.18)}
.archive-grid a.is-filtered-out{display:none}
.archive-grid a.filter-enter{animation:filterEnter .52s var(--ease) both}
@keyframes filterEnter{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Scan reveal per case */
.section-scanner{position:absolute;left:0;right:0;top:0;height:2px;z-index:28;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);box-shadow:0 0 26px var(--accent);transform:translateY(0)}
.project-scene.is-scanning .section-scanner{animation:caseScanner 1.15s var(--ease) both}
@keyframes caseScanner{0%{opacity:0;transform:translateY(7vh)}15%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translateY(88vh)}}

/* Continuous transitions */
.project-scene:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:20vh;z-index:35;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,6,8,.74) 72%,#050608);opacity:calc(.6 + var(--scene-exit,0) * .4)}

/* Closing sequence */
.closing-sequence{position:relative;overflow:hidden;background:#050608;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.closing-track{display:flex;align-items:center;gap:28px;width:max-content;animation:closingMarquee 24s linear infinite}
.closing-track span{font:900 clamp(2.4rem,7vw,8rem)/.8 Arial Black,Arial,sans-serif;letter-spacing:-.075em;color:#f5f5f0;text-transform:uppercase}
.closing-track i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 24px var(--accent)}
@keyframes closingMarquee{to{transform:translateX(-35%)}}

/* Better focus + access */
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.mobile-motion-toggle{position:absolute;right:22px;bottom:22px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);color:#fff;border-radius:999px;padding:11px 14px;font:800 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}

/* Performance lite mode */
body.performance-lite .noise{opacity:.045}
body.performance-lite .cursor-glow{display:none!important}
body.performance-lite .hero-panel,body.performance-lite .screen{animation:none!important}
body.performance-lite .ambient-video{filter:grayscale(1) brightness(.7)!important}

@media (max-width:1180px){
  .floating-system{opacity:.42}
  .float-chip,.float-code{display:none}
  .float-ring{left:-28px;top:32vh;transform:scale(.72)}
  .float-cube{right:-20px;top:68vh;transform:scale(.7)}
}
@media (max-width:860px){
  .floating-system{display:none}
  .archive-filters{margin:0 0 24px;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .archive-filters::-webkit-scrollbar{display:none}
  .archive-filters button{flex:0 0 auto;padding:10px 13px}
  .closing-track span{font-size:clamp(2rem,13vw,4rem)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .floating-system,.cursor-glow,.section-scanner{display:none!important}
}


/* ============================================================
   V22 — MOBILE STABILITY / TOUCH GUARD / PERFORMANCE
   ============================================================ */
.project-copy a{touch-action:pan-y; -webkit-tap-highlight-color:transparent}

@media (max-width:860px){
  /* Heavy desktop-only layers are removed on touch devices. */
  .floating-system,.cursor,.cursor-glow,.case-hud,.case-transition,.section-scanner{display:none!important}
  .noise{opacity:.028!important}
  .project-stage:after,.hero-grid,.statement:before,.archive:before,.contact:before{opacity:.42}
  .screen{box-shadow:0 18px 48px rgba(0,0,0,.48)!important;filter:none!important}
  .main-screen,.back-screen,.detail-screen{will-change:auto!important}
  .char-reveal>.char{filter:none!important}
  .ambient-video{filter:grayscale(1) contrast(1.05) brightness(.56)!important}
  .project-scene{contain:layout paint style}
  .project-copy a{position:relative;z-index:30;min-height:48px;padding-block:8px}
}

body.performance-lite .noise,
body.performance-lite .floating-system,
body.performance-lite .case-hud,
body.performance-lite .case-transition,
body.performance-lite .section-scanner{display:none!important}
body.performance-lite .screen{box-shadow:0 16px 44px rgba(0,0,0,.42)!important}
body.performance-lite .ambient-video{filter:grayscale(1) brightness(.48)!important}
body.performance-lite .project-stage:after{opacity:.28!important}

body.is-scrolling .project-copy a{pointer-events:none}

/* ===== V23: CONTACT VIDEO HIGH VISIBILITY ===== */
.contact{
  background:#9de51f!important;
  color:#050608!important;
}
.contact .ambient-video-contact{
  opacity:.94!important;
  filter:contrast(1.08) saturate(.82) brightness(.94)!important;
  mix-blend-mode:normal!important;
  transform:scale(1.025)!important;
}
.contact::before{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,255,42,.70) 0%,rgba(184,255,42,.38) 38%,rgba(5,6,8,.08) 72%,rgba(5,6,8,.18) 100%)!important;
  background-size:84px 84px,84px 84px,100% 100%!important;
  opacity:.72!important;
}
.contact::after{
  background:
    linear-gradient(180deg,rgba(5,6,8,.08) 0%,transparent 26%,transparent 72%,rgba(5,6,8,.24) 100%),
    radial-gradient(circle at 22% 50%,rgba(184,255,42,.52),transparent 44%)!important;
}
.contact h2{
  text-shadow:0 2px 0 rgba(255,255,255,.16),0 20px 70px rgba(0,0,0,.28)!important;
}
.contact .kicker,.contact .availability,.contact .contact-actions{
  text-shadow:0 1px 16px rgba(255,255,255,.24),0 10px 30px rgba(0,0,0,.18)!important;
}
.contact-button,.contact-link{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

@media(max-width:860px){
  .contact .ambient-video-contact{
    opacity:.90!important;
    filter:contrast(1.05) saturate(.76) brightness(.90)!important;
    transform:scale(1.015)!important;
  }
  .contact::before{
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
      linear-gradient(180deg,rgba(184,255,42,.62) 0%,rgba(184,255,42,.28) 42%,rgba(5,6,8,.14) 100%)!important;
    opacity:.74!important;
  }
  .contact::after{
    background:linear-gradient(180deg,rgba(5,6,8,.04),rgba(5,6,8,.22))!important;
  }
}

@media(max-width:480px){
  .contact .ambient-video-contact{
    opacity:.88!important;
    mix-blend-mode:normal!important;
    filter:contrast(1.03) saturate(.72) brightness(.88)!important;
  }
  .contact h2{font-size:clamp(3.1rem,17vw,5.2rem)!important}
}


/* V24 navigation, contact and performance polish */
.case-jump-nav{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:1450;display:grid;gap:7px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.case-jump-nav.is-visible{opacity:1;pointer-events:auto}
.case-jump-nav a{display:flex;align-items:center;gap:9px;width:34px;overflow:hidden;padding:7px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(5,6,8,.58);backdrop-filter:blur(10px);transition:width .35s var(--ease),border-color .3s,background .3s}
.case-jump-nav a:hover,.case-jump-nav a.is-active{width:132px;border-color:rgba(184,255,42,.55);background:rgba(12,15,11,.88)}
.case-jump-nav small{flex:0 0 18px;color:var(--accent);font:800 .54rem/1 ui-monospace;letter-spacing:.08em}
.case-jump-nav span{white-space:nowrap;font:700 .54rem/1 ui-monospace;letter-spacing:.12em}
.case-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);z-index:30}
.case-progress i{display:block;width:100%;height:100%;transform:scaleX(var(--case-progress,0));transform-origin:left;background:linear-gradient(90deg,var(--accent),#fff)}
.desktop-nav a.is-active{color:var(--accent)}
.desktop-nav a.is-active small{color:#fff}
.tech-summary{padding:clamp(40px,7vw,90px) var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#07090b}
.tech-summary-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tech-summary span{padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font:800 clamp(.58rem,.8vw,.72rem)/1 ui-monospace;letter-spacing:.15em;color:#e9ebdf;background:rgba(255,255,255,.025)}
.contact-lead{position:relative;z-index:4;max-width:580px;margin:18px 0 28px;color:#f3f4ec;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.45;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.contact .ambient-video-contact{transform:translate3d(0,var(--contact-video-y,0px),0) scale(1.08);will-change:transform}
.contact-actions{flex-wrap:wrap}
.contact-actions a{min-height:58px}
.back-to-top{position:fixed;right:22px;bottom:94px;z-index:1800;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(184,255,42,.5);background:rgba(5,6,8,.78);color:var(--accent);font-size:1.25rem;opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s var(--ease);backdrop-filter:blur(12px)}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.mode-technical .project-copy p{max-width:470px}
.mode-technical .technical-panel{opacity:1;transform:none;pointer-events:auto}
.mode-technical .project-canvas{filter:saturate(.45) brightness(.58)}
.mode-technical .case-hud{opacity:.18}
@media(max-width:1180px){.case-jump-nav{display:none}}
@media(max-width:860px){.case-progress{height:3px}.tech-summary{padding-inline:20px}.tech-summary-inner{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none}.tech-summary-inner::-webkit-scrollbar{display:none}.tech-summary span{flex:0 0 auto}.contact-lead{max-width:92%;margin-top:14px}.contact .ambient-video-contact{transform:scale(1.03)}.back-to-top{right:16px;bottom:82px;width:42px;height:42px}.contact-actions a{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.contact .ambient-video-contact{transform:none!important}.case-jump-nav,.back-to-top{transition:none}}

.experience-intro.intro-returning .intro-inner{opacity:.35;transform:scale(.96)}
.experience-intro.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s linear,visibility .16s}