:root{--ink:#030405;--paper:#F8FAFC;--muted:rgba(248,250,252,.66);--blue:#35B6FF;--gold:#FFB72E}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;background:var(--ink);color:var(--paper)}body{font-family:"DM Sans",system-ui,sans-serif;overflow-x:hidden;cursor:none}a{color:inherit;text-decoration:none}.hero{min-height:100svh;position:relative;overflow:hidden;isolation:isolate;background:#030405}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-8;filter:saturate(.9) contrast(1.03)}.hero.has-video #ambient{opacity:.48}.hero.has-video .mark-ambient{opacity:.045}#ambient{position:absolute;inset:0;width:100%;height:100%;z-index:-6}.mark-ambient{position:absolute;right:-7vw;top:49%;width:min(47vw,760px);transform:translateY(-50%);opacity:.085;mix-blend-mode:screen;filter:saturate(1.15) contrast(1.06);z-index:-5;pointer-events:none}.overlay{position:absolute;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(42% 58% at 79% 46%,rgba(20,98,152,.10),transparent 74%),linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.67) 37%,rgba(0,0,0,.30) 67%,rgba(0,0,0,.40) 100%)}.hero.has-video .overlay{background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.56) 38%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.46) 100%)}.grain{position:absolute;inset:-40%;z-index:-3;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 9s steps(7) infinite}@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,2%)}50%{transform:translate(2%,-2%)}75%{transform:translate(1%,2%)}100%{transform:translate(0,0)}}.shell{width:min(1480px,calc(100% - 9vw));margin:0 auto}header{height:96px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand img{width:50px;height:50px;object-fit:cover;mix-blend-mode:screen;filter:saturate(1.08) contrast(1.08)}.brand-name{font-family:"Inter Tight",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em}nav{display:flex;gap:40px;align-items:center;font-size:14px;font-weight:300;color:rgba(255,255,255,.78)}nav a{padding:10px 0;position:relative}nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,var(--blue),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.16,1,.3,1)}nav a:hover::after{transform:scaleX(1)}.hero-body{min-height:calc(100svh - 96px);display:flex;align-items:center;padding:0 0 7vh}.copy{width:min(640px,58vw);transform:translateY(8vh)}.headline{margin:0;font-family:"Inter Tight",system-ui,sans-serif;letter-spacing:-.048em;line-height:.98}.fixed{display:block;font-size:clamp(46px,3.45vw,56px);font-weight:300;color:rgba(255,255,255,.96);white-space:normal;line-height:1.04}.dynamic-wrap{display:block;margin-top:12px;min-height:1.02em;overflow:hidden;font-size:clamp(66px,4.65vw,76px);font-weight:600;letter-spacing:-.055em}.dynamic{display:inline-block;position:relative;color:#fff;will-change:transform,filter,opacity}.dynamic::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;transform-origin:left;background:linear-gradient(90deg,var(--blue),rgba(255,255,255,.9) 46%,var(--gold));opacity:.82;animation:underlinePulse 2.7s ease-in-out infinite}@keyframes underlinePulse{0%,100%{transform:scaleX(.16);opacity:.40}45%{transform:scaleX(1);opacity:.90}70%{transform:scaleX(.48);opacity:.62}}.dynamic.exit{animation:wordExit .40s cubic-bezier(.4,0,.2,1) forwards}.dynamic.enter{animation:wordEnter .58s cubic-bezier(.16,1,.3,1) forwards}@keyframes wordExit{to{opacity:0;transform:translateY(-24px);filter:blur(8px)}}@keyframes wordEnter{from{opacity:0;transform:translateY(25px);filter:blur(9px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.support{margin:32px 0 0;max-width:640px;color:var(--muted);font-size:clamp(15px,1.15vw,18px);line-height:1.5;font-weight:300;letter-spacing:-.012em}.cta-row{margin-top:36px}.cta{height:54px;display:inline-flex;align-items:center;gap:28px;padding:0 23px;border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.08);backdrop-filter:blur(8px);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;transition:.35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.cta::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);background:linear-gradient(90deg,rgba(53,182,255,.17),rgba(255,183,46,.19));transition:.52s cubic-bezier(.16,1,.3,1)}.cta:hover{border-color:rgba(255,255,255,.72);transform:translateY(-2px)}.cta:hover::before{transform:translateX(0)}.cta-arrow{font-size:18px;line-height:1;letter-spacing:0}.scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:14px;height:28px;border:1px solid rgba(255,255,255,.32);border-radius:20px;opacity:.58}.scroll::after{content:"";width:3px;height:3px;position:absolute;left:50%;top:6px;border-radius:50%;background:white;transform:translateX(-50%);animation:wheel 1.8s ease-in-out infinite}@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%)}.cursor-dot{width:4px;height:4px;background:white}.cursor-ring{width:25px;height:25px;border:1px solid rgba(255,255,255,.42);transition:width .22s ease,height .22s ease,border-color .22s ease}body.hovering .cursor-ring{width:44px;height:44px;border-color:rgba(255,183,46,.72)}.preview-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;background:#111820;border:1px solid rgba(255,255,255,.18);border-top:0;padding:8px 15px;border-radius:0 0 10px 10px;font-size:12px;color:#dfe9f3;box-shadow:0 8px 30px rgba(0,0,0,.35)}.preview-bar a{color:#ffca60;margin-left:12px}@media(max-width:1100px){.copy{width:min(620px,72vw)}}@media(max-width:900px){body{cursor:auto}.cursor-dot,.cursor-ring{display:none}.shell{width:min(100% - 40px,760px)}header{height:82px}nav a:nth-child(2),nav a:nth-child(3){display:none}nav{gap:22px}.brand img{width:45px;height:45px}.hero-body{min-height:calc(100svh - 82px);padding:2vh 0 11vh}.copy{width:92vw;transform:translateY(4vh)}.fixed{white-space:normal;font-size:clamp(38px,9.6vw,50px);max-width:12ch;line-height:1.04}.dynamic-wrap{font-size:clamp(56px,13.8vw,72px)}.support{max-width:34ch;font-size:16px}.mark-ambient{width:95vw;right:-46vw;opacity:.07}.overlay{background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.42))}}@media(max-width:560px){nav{display:none}.brand-name{font-size:12px}.fixed{font-size:clamp(35px,10.5vw,45px)}.dynamic-wrap{font-size:clamp(52px,15vw,66px)}.support{margin-top:26px}.cta-row{margin-top:30px}.cta{height:52px;padding:0 18px;font-size:11px;gap:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}


/* ============================================================
   CENA 02 — PROBLEMA
   Linguagem própria: menos interface, mais narrativa por scroll.
   ============================================================ */
.hero{box-shadow:0 34px 85px rgba(0,0,0,.34)}
.problem-section{
  --problem-progress:0;
  position:relative;
  height:145svh;
  background:#05070a;
  color:var(--paper);
  isolation:isolate;
}
.problem-section::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:120px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,#030405 0%,rgba(3,4,5,.88) 20%,rgba(5,7,10,0) 100%);
}
.problem-sticky{
  position:sticky;top:0;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.problem-atmosphere{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 45% at 69% 48%,rgba(53,182,255,.075),transparent 74%),
    radial-gradient(28% 34% at 84% 68%,rgba(255,183,46,.045),transparent 76%),
    linear-gradient(120deg,#05070a 0%,#070b10 58%,#060709 100%);
}
.problem-atmosphere::after{
  content:"";position:absolute;inset:0;opacity:.30;
  background:linear-gradient(105deg,transparent 0 41%,rgba(255,255,255,.012) 41.1% 41.3%,transparent 41.4% 100%);
}
.problem-shell{
  width:min(1480px,calc(100% - 9vw));margin:0 auto;
  display:grid;grid-template-columns:minmax(330px,.72fr) minmax(650px,1.35fr);
  gap:clamp(48px,7vw,110px);align-items:center;
}
.problem-copy{position:relative;z-index:4;align-self:center;padding-top:4vh}
.problem-title{margin:0;font-family:"Inter Tight",system-ui,sans-serif;font-weight:300;letter-spacing:-.052em;line-height:.94}
.problem-title span,.problem-title strong{display:block}
.problem-title span{font-size:clamp(52px,4.6vw,74px);font-weight:300;color:#fff}
.problem-title strong{font-size:clamp(52px,4.6vw,74px);font-weight:550;color:rgba(248,250,252,.72)}
.problem-closing{
  margin:42px 0 0;max-width:32ch;
  font-size:12px;line-height:1.55;font-weight:400;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(248,250,252,.64);
  opacity:calc(.32 + var(--problem-progress) * .68);
  transform:translateY(calc(12px - var(--problem-progress) * 12px));
}
.problem-closing::before{content:"";display:block;width:24px;height:1px;margin-bottom:17px;background:linear-gradient(90deg,var(--blue),var(--gold))}
.journey{position:relative;height:min(48vw,470px);min-height:390px;align-self:center}
.journey-svg{position:absolute;inset:3% 0 0;width:100%;height:88%;overflow:visible}
.journey-base{fill:none;stroke:rgba(255,255,255,.075);stroke-width:1.2;vector-effect:non-scaling-stroke}
.journey-path{fill:none;stroke:url(#journeyGradient);stroke-width:2;vector-effect:non-scaling-stroke;filter:url(#journeyGlow);stroke-linecap:round}
.journey-node{
  position:absolute;display:flex;align-items:center;gap:11px;z-index:5;
  opacity:.22;transform:translateY(9px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
}
.problem-section.motion-ready .journey-node:not(.revealed){opacity:.08;transform:translateY(12px)}
.journey-node.revealed{opacity:1;transform:translateY(0)}
.node-dot{width:12px;height:12px;border:2px solid rgba(255,255,255,.82);border-radius:50%;background:#05070a;box-shadow:0 0 0 7px rgba(255,255,255,.025),0 0 18px rgba(53,182,255,.24);flex:0 0 auto}
.node-label{font-family:"DM Sans",system-ui,sans-serif;font-size:14px;line-height:1.25;font-weight:400;color:rgba(255,255,255,.86);white-space:nowrap}
.node-1{left:2.8%;top:58%}.node-2{left:36%;top:25%}.node-3{left:64%;top:63%}.node-4{right:0;top:50%}
.is-break .node-dot{border-color:#ff5b70;background:#ff4d67;box-shadow:0 0 0 8px rgba(255,77,103,.06),0 0 24px rgba(255,77,103,.42)}
.is-break .node-label{color:#ff7789}.is-lost .node-dot{border-color:rgba(255,255,255,.54);box-shadow:none}.is-lost .node-label{color:rgba(255,255,255,.58)}

@media(max-width:1100px){
  .problem-shell{grid-template-columns:minmax(300px,.8fr) minmax(520px,1.2fr);gap:36px}
  .node-label{font-size:13px}
}
@media(max-width:900px){
  .problem-section{height:auto;min-height:100svh;padding:110px 0 100px}
  .problem-sticky{position:relative;top:auto;min-height:auto;overflow:visible;display:block}
  .problem-shell{width:min(100% - 40px,760px);display:block}
  .problem-copy{padding:0}
  .problem-title span,.problem-title strong{font-size:clamp(48px,12vw,68px)}
  .problem-closing{margin-top:30px;opacity:1;transform:none}
  .journey{height:auto;min-height:0;margin-top:72px;display:grid;gap:0;padding-left:32px}
  .journey-svg{display:none}
  .journey::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,var(--blue) 0%,#fff 34%,var(--gold) 54%,#ff4d67 72%,rgba(255,255,255,.18) 100%)}
  .journey-node{position:relative!important;left:auto!important;right:auto!important;top:auto!important;opacity:1!important;transform:none!important;min-height:82px;gap:14px}
  .node-dot{position:absolute;left:-30px;top:4px;width:13px;height:13px}
  .node-label{font-size:16px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .problem-section{height:auto;min-height:100svh;padding:110px 0}
  .problem-sticky{position:relative}
  .journey-node{opacity:1;transform:none}
  .problem-closing{opacity:1;transform:none}
}


/* ============================================================
   CENA 03 — COMO ATUAMOS
   Ruptura clara/editorial: a identidade continua, o layout muda.
   Sem cards; três linhas tipográficas e um único sinal de energia.
   ============================================================ */
.approach-section{
  --approach-index:0;
  position:relative;
  min-height:110svh;
  overflow:hidden;
  background:#f1efe8;
  color:#090b0d;
  isolation:isolate;
}
.approach-section::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:16vh;
  background:linear-gradient(180deg,#05070a 0%,rgba(5,7,10,.35) 26%,rgba(241,239,232,0) 100%);
  opacity:.16;
  pointer-events:none;
}
.approach-signal{
  position:absolute;
  width:min(52vw,820px);
  aspect-ratio:1;
  right:-14vw;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  opacity:.62;
  filter:blur(1px);
  background:
    radial-gradient(circle at 42% 42%,rgba(53,182,255,.22),transparent 27%),
    radial-gradient(circle at 62% 58%,rgba(255,183,46,.18),transparent 31%),
    radial-gradient(circle at 50% 50%,rgba(9,11,13,.06),transparent 62%);
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;
  pointer-events:none;
  z-index:-1;
}
.approach-signal::before,.approach-signal::after{
  content:"";position:absolute;inset:17%;border:1px solid rgba(9,11,13,.09);border-radius:50%;
}
.approach-signal::after{
  inset:29%;
  border-color:rgba(9,11,13,.07);
}
.approach-shell{
  width:min(1480px,calc(100% - 9vw));
  min-height:110svh;
  margin:0 auto;
  padding:clamp(110px,13vh,160px) 0 110px;
  display:grid;
  grid-template-columns:minmax(340px,.82fr) minmax(600px,1.18fr);
  gap:clamp(65px,8vw,135px);
  align-items:start;
}
.approach-intro{
  position:sticky;
  top:22vh;
  padding-top:8px;
}
.approach-eyebrow{
  display:block;
  margin-bottom:34px;
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:rgba(9,11,13,.49);
}
.approach-eyebrow::before{
  content:"";
  display:inline-block;
  width:23px;height:1px;
  margin:0 13px 3px 0;
  background:linear-gradient(90deg,var(--blue),var(--gold));
}
.approach-title{
  margin:0;
  max-width:9.8ch;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(52px,4.45vw,76px);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:300;
}
.approach-title span,.approach-title strong{display:block}
.approach-title strong{
  margin-top:8px;
  font-weight:600;
}
.approach-list{
  padding-top:2vh;
  border-top:1px solid rgba(9,11,13,.18);
}
.approach-item{
  position:relative;
  min-height:174px;
  display:grid;
  grid-template-columns:56px 1fr 42px;
  gap:18px;
  align-items:center;
  border-bottom:1px solid rgba(9,11,13,.18);
  cursor:default;
  transition:padding .48s cubic-bezier(.16,1,.3,1),background .45s ease;
}
.approach-item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--blue),var(--gold));
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.approach-item.active{
  padding-left:20px;
  background:linear-gradient(90deg,rgba(53,182,255,.055),rgba(255,183,46,.028) 58%,transparent);
}
.approach-item.active::before{transform:scaleY(1)}
.approach-number{
  align-self:start;
  padding-top:40px;
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(9,11,13,.38);
}
.approach-text h3{
  margin:0;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(34px,3.25vw,54px);
  font-weight:430;
  letter-spacing:-.048em;
  color:rgba(9,11,13,.58);
  transition:color .42s ease,transform .48s cubic-bezier(.16,1,.3,1);
}
.approach-text p{
  max-width:41ch;
  margin:10px 0 0;
  font-size:15px;
  line-height:1.48;
  font-weight:300;
  color:rgba(9,11,13,.48);
  opacity:.52;
  transform:translateY(6px);
  transition:opacity .42s ease,transform .48s cubic-bezier(.16,1,.3,1);
}
.approach-arrow{
  justify-self:end;
  font-size:24px;
  color:rgba(9,11,13,.30);
  transform:translate(-4px,4px);
  transition:transform .48s cubic-bezier(.16,1,.3,1),color .42s ease;
}
.approach-item.active .approach-text h3{
  color:#090b0d;
  transform:translateX(6px);
}
.approach-item.active .approach-text p{
  opacity:1;
  transform:translate(6px,0);
}
.approach-item.active .approach-arrow{
  color:#090b0d;
  transform:translate(0,0);
}

@media(max-width:1100px){
  .approach-shell{grid-template-columns:minmax(300px,.78fr) minmax(500px,1.22fr);gap:48px}
  .approach-item{min-height:160px}
}
@media(max-width:900px){
  .approach-section{min-height:auto}
  .approach-shell{
    width:min(100% - 40px,760px);
    min-height:auto;
    display:block;
    padding:105px 0 95px;
  }
  .approach-intro{position:relative;top:auto}
  .approach-title{max-width:11ch;font-size:clamp(50px,12vw,70px)}
  .approach-list{margin-top:70px;padding-top:0}
  .approach-item{min-height:145px;grid-template-columns:42px 1fr 34px}
  .approach-number{padding-top:35px}
  .approach-text h3{font-size:clamp(34px,8.4vw,48px);color:#090b0d}
  .approach-text p{opacity:1;transform:none;font-size:15px}
  .approach-item.active{padding-left:10px}
  .approach-item.active .approach-text h3,.approach-item.active .approach-text p{transform:none}
  .approach-signal{width:110vw;right:-67vw;top:35%;opacity:.34}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .approach-item,.approach-text h3,.approach-text p,.approach-arrow,.approach-signal{transition:none!important}
}


/* ============================================================
   CENA 04 — PROJETOS / CASES
   Prova visual em palco escuro. Lista tipográfica + mídia real.
   Sem grade de cards e sem resultados inventados.
   ============================================================ */
.projects-section{position:relative;background:#05070a;color:#f8fafc;min-height:118svh;overflow:hidden}
.projects-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 65% at 82% 45%,rgba(53,182,255,.075),transparent 68%),radial-gradient(42% 52% at 75% 76%,rgba(255,183,46,.055),transparent 70%)}
.projects-shell{width:min(1480px,calc(100% - 9vw));margin:0 auto;padding:clamp(110px,14vh,170px) 0 130px}
.projects-head{display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw;align-items:end;margin-bottom:clamp(70px,9vh,110px)}
.projects-eyebrow{align-self:start;font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:rgba(248,250,252,.48)}
.projects-eyebrow::before{content:"";display:inline-block;width:23px;height:1px;margin:0 13px 3px 0;background:linear-gradient(90deg,var(--blue),var(--gold))}
.projects-title{margin:0;font-family:"Inter Tight",system-ui,sans-serif;font-size:clamp(48px,4.35vw,74px);line-height:.95;letter-spacing:-.055em;font-weight:300;max-width:11ch}
.projects-title span,.projects-title strong{display:block}.projects-title strong{font-weight:600;margin-top:7px}
.projects-experience{display:grid;grid-template-columns:minmax(430px,.86fr) minmax(590px,1.14fr);gap:clamp(60px,7vw,120px);align-items:start}
.projects-list{border-top:1px solid rgba(255,255,255,.15)}
.project-row{position:relative;min-height:154px;display:grid;grid-template-columns:48px 1fr 34px;gap:16px;align-items:center;border-bottom:1px solid rgba(255,255,255,.15);cursor:pointer;transition:padding .5s cubic-bezier(.16,1,.3,1),background .4s ease;outline:none}
.project-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue),var(--gold));transform:scaleY(0);transform-origin:center;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.project-row.active{padding-left:18px;background:linear-gradient(90deg,rgba(53,182,255,.055),rgba(255,183,46,.025) 65%,transparent)}
.project-row.active::before{transform:scaleY(1)}
.project-index{align-self:start;padding-top:35px;font-size:10px;letter-spacing:.15em;color:rgba(248,250,252,.33)}
.project-row-copy h3{margin:0;font-family:"Inter Tight",system-ui,sans-serif;font-size:clamp(31px,2.9vw,48px);font-weight:430;letter-spacing:-.045em;color:rgba(248,250,252,.68);transition:color .4s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.project-row-copy p{margin:8px 0 0;max-width:42ch;font-size:14px;font-weight:300;line-height:1.45;color:rgba(248,250,252,.58);opacity:.72;transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.project-row-arrow{justify-self:end;font-size:22px;color:rgba(248,250,252,.25);transition:transform .45s cubic-bezier(.16,1,.3,1),color .4s ease}
.project-row.active .project-row-copy h3{color:#fff;transform:translateX(5px)}.project-row.active .project-row-copy p{opacity:1;transform:translateX(5px)}.project-row.active .project-row-arrow{color:var(--gold);transform:translate(1px,-2px)}
.project-stage{position:sticky;top:13vh;height:min(68vh,690px);border:1px solid rgba(255,255,255,.12);overflow:hidden;background:#090c10;box-shadow:0 34px 90px rgba(0,0,0,.34)}
.project-slide{position:absolute;inset:0;opacity:0;transform:scale(1.018);transition:opacity .58s ease,transform .85s cubic-bezier(.16,1,.3,1);pointer-events:none}.project-slide.active{opacity:1;transform:scale(1);pointer-events:auto}
.project-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.78) 100%);pointer-events:none}
.project-slide img,.project-slide video{width:100%;height:100%;object-fit:cover;display:block}.project-slide video{background:#05070a}
.project-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,4vw,56px);overflow:hidden;background:radial-gradient(70% 70% at 70% 28%,rgba(53,182,255,.12),transparent 65%),radial-gradient(60% 70% at 30% 85%,rgba(255,183,46,.08),transparent 70%),#080b0f}
.project-fallback::before{content:"";position:absolute;width:58%;aspect-ratio:1;right:-15%;top:-12%;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 56px rgba(255,255,255,.018),0 0 0 112px rgba(255,255,255,.012)}
.project-fallback span{position:relative;max-width:8ch;font-family:"Inter Tight",system-ui,sans-serif;font-size:clamp(56px,6vw,104px);font-weight:600;letter-spacing:-.07em;line-height:.84;color:rgba(248,250,252,.92)}
.project-fallback small{position:relative;margin-top:24px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(248,250,252,.35)}
.project-stage-meta{position:absolute;left:28px;right:28px;bottom:24px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}.project-stage-meta span{font-weight:500}.project-stage-meta a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82)}
@media(max-width:1050px){.projects-experience{grid-template-columns:.9fr 1.1fr;gap:45px}.project-row{min-height:140px}.project-stage{height:58vh}}
@media(max-width:900px){.projects-section{min-height:auto}.projects-shell{width:min(100% - 40px,760px);padding:100px 0 95px}.projects-head{display:block;margin-bottom:65px}.projects-title{margin-top:30px;font-size:clamp(50px,12vw,70px)}.projects-experience{display:block}.project-stage{display:none}.project-row{min-height:138px;grid-template-columns:38px 1fr 30px}.project-row-copy h3{font-size:clamp(34px,8.8vw,48px);color:#fff}.project-row-copy p{opacity:1}.project-row.active{padding-left:8px}}


/* ============================================================
   NAVEGAÇÃO MOBILE — presença sem alterar o Hero desktop aprovado
   ============================================================ */
.mobile-nav-toggle,.mobile-nav{display:none}
@media(max-width:700px){
  .desktop-nav{display:none!important}
  .mobile-nav-toggle{
    display:flex;
    width:48px;height:48px;
    align-items:center;justify-content:center;
    flex-direction:column;gap:7px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(3,4,5,.20);
    backdrop-filter:blur(10px);
    color:#fff;
    position:relative;z-index:31;
  }
  .mobile-nav-toggle span{
    display:block;width:19px;height:1px;background:#fff;
    transition:transform .36s cubic-bezier(.16,1,.3,1),opacity .25s ease;
  }
  body.mobile-nav-open .mobile-nav-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  body.mobile-nav-open .mobile-nav-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .mobile-nav{
    display:block;
    position:fixed;inset:0;
    z-index:30;
    background:rgba(3,4,5,.96);
    backdrop-filter:blur(16px);
    opacity:0;visibility:hidden;
    transition:opacity .32s ease,visibility .32s ease;
  }
  body.mobile-nav-open .mobile-nav{opacity:1;visibility:visible}
  .mobile-nav-inner{
    min-height:100%;
    width:min(100% - 40px,720px);
    margin:0 auto;
    display:flex;flex-direction:column;
    justify-content:center;
    gap:14px;
  }
  .mobile-nav a{
    font-family:"Inter Tight",system-ui,sans-serif;
    font-size:clamp(42px,12vw,64px);
    font-weight:350;
    letter-spacing:-.055em;
    line-height:1;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  body.mobile-nav-open{overflow:hidden}
}

/* ============================================================
   CENA 05 — SOBRE / AUTORIDADE
   Editorial humano. Mídia real quando existir; nunca imagem fictícia.
   ============================================================ */
.about-section{
  position:relative;
  min-height:108svh;
  background:#e8edf0;
  color:#080a0c;
  overflow:hidden;
}
.about-section::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent 7%,rgba(53,182,255,.58),rgba(255,255,255,.8) 50%,rgba(255,183,46,.62),transparent 93%);
}
.about-shell{
  width:min(1480px,calc(100% - 9vw));
  min-height:108svh;
  margin:0 auto;
  padding:clamp(105px,13vh,165px) 0 105px;
  display:grid;
  grid-template-columns:minmax(430px,.9fr) minmax(520px,1.1fr);
  gap:clamp(70px,8vw,145px);
  align-items:center;
}
.about-copy{max-width:660px}
.about-eyebrow{
  display:block;
  margin-bottom:34px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:rgba(8,10,12,.47);
}
.about-eyebrow::before{
  content:"";display:inline-block;width:24px;height:1px;margin:0 13px 3px 0;
  background:linear-gradient(90deg,var(--blue),var(--gold));
}
.about-title{
  margin:0;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(52px,4.6vw,78px);
  line-height:.94;
  letter-spacing:-.06em;
  font-weight:300;
  max-width:10.5ch;
}
.about-title span,.about-title strong{display:block}
.about-title strong{font-weight:600;margin-top:7px}
.about-person{
  margin-top:54px;
  display:flex;align-items:baseline;gap:15px;
  padding-top:20px;
  border-top:1px solid rgba(8,10,12,.18);
}
.about-person strong{
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:19px;letter-spacing:-.025em;font-weight:600;
}
.about-person span{font-size:12px;color:rgba(8,10,12,.48);letter-spacing:.04em}
.about-body{
  max-width:47ch;
  margin:22px 0 0;
  font-size:16px;
  line-height:1.55;
  font-weight:300;
  color:rgba(8,10,12,.67);
}
.about-statement{
  margin:36px 0 0;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(25px,2vw,34px);
  letter-spacing:-.035em;
  line-height:1.05;
  font-weight:500;
}
.about-visual{
  position:relative;
  height:min(72vh,760px);
  min-height:560px;
  overflow:hidden;
  background:#090c10;
}
.about-visual::before{
  content:"";
  position:absolute;z-index:2;inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(8,10,12,.12);
}
.about-visual::after{
  content:"";
  position:absolute;z-index:3;
  left:0;right:0;bottom:0;height:36%;
  background:linear-gradient(180deg,transparent,rgba(3,4,5,.36));
  pointer-events:none;
}
.about-visual>img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.about-fallback{
  position:absolute;inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(32px,4vw,60px);
  background:
    radial-gradient(65% 58% at 72% 31%,rgba(53,182,255,.16),transparent 70%),
    radial-gradient(58% 58% at 28% 80%,rgba(255,183,46,.11),transparent 72%),
    #070a0e;
}
.about-fallback>img{
  position:absolute;
  width:78%;
  height:auto;
  top:50%;left:58%;
  transform:translate(-50%,-54%);
  mix-blend-mode:screen;
  opacity:.24;
  filter:saturate(1.12) contrast(1.06);
}
.about-fallback span{
  position:relative;z-index:1;
  color:#fff;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(35px,3.5vw,60px);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:550;
}
.about-fallback small{
  position:relative;z-index:1;
  margin-top:10px;
  color:rgba(255,255,255,.40);
  letter-spacing:.18em;
  font-size:10px;
}

/* ============================================================
   CENA 06 — CONTATO FINAL
   Silêncio visual: uma pergunta, uma ação.
   ============================================================ */
.contact-section{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:#020304;
  color:#f8fafc;
  isolation:isolate;
  display:flex;
  flex-direction:column;
}
.contact-glow{
  position:absolute;
  width:min(82vw,1280px);
  aspect-ratio:1;
  left:50%;top:49%;
  transform:translate(-50%,-50%);
  z-index:-2;
  opacity:.82;
  background:
    radial-gradient(circle at 33% 43%,rgba(53,182,255,.18),transparent 30%),
    radial-gradient(circle at 68% 58%,rgba(255,183,46,.13),transparent 32%);
  filter:blur(12px);
}
.contact-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 56% at 50% 52%,rgba(255,255,255,.035),transparent 68%);
}
.contact-shell{
  width:min(1480px,calc(100% - 9vw));
  margin:auto;
  padding:100px 0 80px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.contact-eyebrow{
  margin-bottom:34px;
  font-size:10px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;
  color:rgba(248,250,252,.42);
}
.contact-title{
  margin:0;
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(60px,6.2vw,106px);
  line-height:.88;
  letter-spacing:-.068em;
  font-weight:300;
  max-width:10ch;
}
.contact-title span,.contact-title strong{display:block}
.contact-title strong{font-weight:600;margin-top:8px}
.contact-support{
  margin:30px 0 0;
  color:rgba(248,250,252,.58);
  font-size:16px;font-weight:300;
}
.contact-cta{
  margin-top:46px;
  display:inline-flex;
  align-items:center;
  gap:42px;
  min-height:62px;
  padding:0 25px;
  border:1px solid rgba(255,255,255,.35);
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.025);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s ease,background .35s ease;
}
.contact-cta b{font-size:20px;font-weight:400;color:var(--gold)}
.contact-cta:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.72);
  background:linear-gradient(90deg,rgba(53,182,255,.09),rgba(255,183,46,.08));
}
.site-footer{
  width:min(1480px,calc(100% - 9vw));
  margin:0 auto;
  min-height:92px;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  color:rgba(248,250,252,.42);
}
.site-footer>div{display:flex;align-items:center;gap:10px}
.site-footer img{width:28px;height:28px;object-fit:cover;mix-blend-mode:screen}
.site-footer span{font-size:11px;letter-spacing:.15em;font-weight:600;color:rgba(248,250,252,.72)}
.site-footer small{font-size:11px;font-weight:300}

@media(max-width:1000px){
  .about-shell{grid-template-columns:.9fr 1.1fr;gap:50px}
  .about-visual{min-height:510px;height:62vh}
}
@media(max-width:900px){
  .about-section{min-height:auto}
  .about-shell{
    width:min(100% - 40px,760px);
    min-height:auto;
    display:block;
    padding:100px 0;
  }
  .about-title{font-size:clamp(50px,12vw,70px)}
  .about-visual{margin-top:65px;height:70svh;min-height:480px}
  .about-person{margin-top:44px}
  .contact-shell,.site-footer{width:min(100% - 40px,760px)}
  .contact-title{font-size:clamp(58px,15vw,88px)}
}
@media(max-width:560px){
  .about-shell{padding:88px 0}
  .about-person{display:block}
  .about-person span{display:block;margin-top:5px}
  .about-body{font-size:15px}
  .about-visual{min-height:430px;height:61svh}
  .contact-shell{padding:90px 0 70px}
  .contact-support{max-width:26ch;line-height:1.45}
  .contact-cta{min-height:58px;gap:26px;padding:0 20px}
  .site-footer{min-height:84px;align-items:flex-start;flex-direction:column;justify-content:center;gap:7px}
}

@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .about-copy{opacity:.55;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
  .about-visual{opacity:.6;transform:translateY(34px);transition:opacity .9s ease .08s,transform 1s cubic-bezier(.16,1,.3,1) .08s}
  .about-section.about-visible .about-copy,.about-section.about-visible .about-visual{opacity:1;transform:translateY(0)}
}

/* Revisão v0.7 — fotografia provisória real */
.about-photo{object-position:center 42%;filter:saturate(.94) contrast(1.015)}
.about-photo-default{object-position:center 40%}
@media(max-width:900px){.about-photo,.about-photo-default{object-position:center 38%}}


/* ============================================================
   V0.9 — LAPIDAÇÃO / ACESSIBILIDADE / MOBILE
   ============================================================ */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:5px;
}
.project-mobile-link{display:none}
@media(max-width:900px){
  .project-mobile-link{
    display:inline-flex;
    margin-top:18px;
    align-items:center;
    gap:9px;
    width:max-content;
    padding-bottom:5px;
    border-bottom:1px solid rgba(255,255,255,.34);
    color:#fff;
    font-size:11px;
    font-weight:500;
    letter-spacing:.10em;
    text-transform:uppercase;
  }
  .project-mobile-link b{color:var(--gold);font-size:16px;font-weight:400}
  .project-row{padding:15px 0}
  .project-row-arrow{display:none}
  .project-row{grid-template-columns:38px 1fr}
}
@media(max-width:560px){
  .problem-section{padding-bottom:78px}
  .problem-title span,.problem-title strong{font-size:clamp(46px,13.5vw,62px)}
  .problem-closing{margin-top:32px}
  .approach-shell,.projects-shell,.about-shell{padding-top:86px;padding-bottom:86px}
  .approach-list{margin-top:54px}
  .projects-head{margin-bottom:48px}
  .project-row{min-height:132px}
  .about-title{font-size:clamp(46px,13vw,62px)}
  .about-person{margin-top:36px}
  .contact-title{font-size:clamp(54px,15vw,80px)}
}


/* ============================================================
   V0.11 — CORREÇÃO ESTRUTURAL PROJETOS MOBILE
   Garante fluxo normal: cabeçalho termina antes da lista começar.
   ============================================================ */
@media(max-width:900px){
  .projects-section{overflow:clip}
  .projects-shell{
    display:block;
    padding-top:96px;
    padding-bottom:104px;
  }
  .projects-head{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:22px!important;
    min-height:0!important;
    height:auto!important;
    margin:0 0 72px!important;
    padding:0!important;
    z-index:2;
  }
  .projects-eyebrow{
    position:static!important;
    transform:none!important;
    margin:0!important;
  }
  .projects-title{
    position:static!important;
    transform:none!important;
    margin:0!important;
    max-width:9.4ch;
    font-size:clamp(48px,11vw,64px);
    line-height:.92;
  }
  .projects-experience{
    position:relative!important;
    display:block!important;
    clear:both;
    margin:0!important;
    padding:0!important;
    z-index:1;
  }
  .projects-list{
    position:relative;
    clear:both;
    margin:0;
  }
  .project-row:first-child{border-top:1px solid rgba(255,255,255,.15)}
}
@media(max-width:560px){
  .projects-shell{padding-top:82px;padding-bottom:90px}
  .projects-head{gap:18px!important;margin-bottom:56px!important}
  .projects-title{font-size:clamp(46px,12.4vw,58px);max-width:9.2ch}
  .project-row{min-height:126px}
  .about-shell{padding-top:94px}
}