:root { --ink:#080b0f; --paper:#f4f0e8; --acid:#fff200; --orange:#f22b17; --violet:#2445ff; --pink:#f4007a; }
:root { --font-display:'Archivo Black',sans-serif; --font-sans:'DM Sans',sans-serif; --font-serif:'Cormorant Garamond',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans), sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px, calc(100% - 80px)); margin-inline:auto; }
.nav { height:112px; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:10; border-bottom:1px solid rgba(22,21,20,.25); }
.brand { display:flex; flex-direction:row; align-items:center; gap:12px; line-height:.85; font-family:var(--font-display); font-size:20px; letter-spacing:-1px; }
.brand>img { width:64px; height:64px; object-fit:cover; box-shadow:5px 5px 0 var(--ink); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s; }
.brand:hover>img { transform:rotate(-5deg) scale(1.08); box-shadow:9px 9px 0 var(--pink); }
.brand>span { display:flex; flex-direction:column; }
.brand small { font:700 8px/1 var(--font-sans); letter-spacing:3.4px; margin-top:8px; }
nav { display:flex; align-items:center; gap:38px; font-size:13px; font-weight:600; }
.navCta { border:1px solid var(--ink); padding:13px 20px; transition:.2s; }
.navCta:hover { background:var(--ink); color:white; }
.hero { min-height:850px; padding-top:82px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.1; background-image:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px); }
.eyebrow,.sectionLabel { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:2.5px; font-weight:800; }
.eyebrow span { width:28px; height:8px; background:var(--orange); border-radius:50%; }
.hero h1 { max-width:1020px; font:400 clamp(58px,8vw,112px)/.88 var(--font-display); letter-spacing:-6px; text-transform:uppercase; margin:68px 0 0; position:relative; z-index:2; animation:heroRise .95s cubic-bezier(.16,1,.3,1) both; }
.heroLogo { position:absolute; width:340px; height:340px; object-fit:cover; right:9%; top:120px; opacity:.07; transform:rotate(10deg); filter:grayscale(1); animation:logoDrift 9s ease-in-out infinite; }
.heroTwist { animation:heroRise 1s .12s cubic-bezier(.16,1,.3,1) both; }
@keyframes heroRise { from { opacity:0; transform:translateY(70px) skewY(2deg); } to { opacity:1; transform:none; } }
@keyframes logoDrift { 50% { transform:rotate(2deg) scale(1.1); opacity:.13; } }
.heroTwist { display:flex; align-items:flex-end; gap:110px; margin:22px 0 0 25%; position:relative; z-index:2; }
.heroTwist>p { font:600 clamp(52px,6.5vw,92px)/.82 var(--font-serif); letter-spacing:-4px; margin:0; }
.heroTwist em { color:var(--pink); text-shadow:3px 3px 0 var(--acid); }
.heroCopy { width:340px; padding:22px 24px 24px; position:relative; z-index:4; background:rgba(244,240,232,.98); border:1px solid rgba(8,11,15,.55); box-shadow:none; }
.heroCopy p { font-size:15px; line-height:1.55; margin:0 0 24px; }
.button { display:flex; justify-content:space-between; align-items:center; background:var(--acid); padding:17px 20px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; transition:transform .25s,box-shadow .25s; }
.button:hover { transform:translateY(-4px); box-shadow:0 9px 0 var(--pink); }
.stageMark { position:absolute; width:280px; height:280px; border-radius:50%; background:var(--pink); right:2%; top:176px; display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(9deg); color:var(--acid); font:400 47px/.75 var(--font-display); letter-spacing:-3px; z-index:1; border:12px solid var(--acid); box-shadow:12px 12px 0 var(--violet); animation:stageFloat 5s ease-in-out infinite; }
@keyframes stageFloat { 50% { transform:translateY(-18px) rotate(4deg); box-shadow:19px 23px 0 var(--violet); } }
.stageMark b { font:600 37px/1 var(--font-serif); color:var(--ink); }
.scrollNote { position:absolute; bottom:25px; left:0; font-size:10px; letter-spacing:2px; text-transform:uppercase; writing-mode:vertical-rl; }
.ticker { overflow:hidden; background:var(--acid); color:var(--ink); border-block:5px solid var(--ink); padding:13px 0 9px; font:400 28px/1 var(--font-display); white-space:nowrap; transform:rotate(-1deg); width:102%; margin-left:-1%; }
.ticker div { width:max-content; animation:marquee 22s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }
.manifesto { background:var(--ink); color:var(--paper); padding:145px 0; background-image:linear-gradient(135deg,rgba(244,0,122,.07),transparent 35%); }
.manifestoGrid { display:grid; grid-template-columns:1fr 3fr; gap:60px; }
.bigText { font:500 clamp(42px,5.6vw,76px)/1.02 var(--font-serif); margin:0; max-width:940px; }
.bigText strong { color:var(--acid); font-weight:600; }
.beforeAfter { display:grid; grid-template-columns:1fr auto 1fr; gap:50px; align-items:center; margin-top:90px; padding-top:30px; border-top:1px solid #4b4945; }
.beforeAfter>div:last-child { text-align:right; }
.beforeAfter small { color:#817d74; letter-spacing:3px; }
.beforeAfter p { font:500 25px/1.25 var(--font-serif); }
.pulse { color:var(--orange); font-size:52px; animation:turn 10s linear infinite; }
@keyframes turn { to { transform:rotate(360deg); } }
.process { padding:145px 0; position:relative; overflow:hidden; }
.process::before { content:""; position:absolute; right:-90px; top:60px; width:300px; height:300px; border:1px solid rgba(8,11,15,.18); border-radius:50%; pointer-events:none; }
.sectionTop { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; margin-bottom:65px; position:relative; z-index:1; }
.sectionTop>p { width:410px; margin:0 0 8px; line-height:1.6; flex:none; border-top:2px solid var(--ink); padding-top:18px; font-size:15px; }
.sectionHead h2 { font:400 clamp(48px,6.2vw,86px)/.86 var(--font-display); text-transform:uppercase; letter-spacing:-4px; margin:34px 0 0; }
.sectionHead h2 i { font-family:var(--font-serif); font-weight:600; font-style:italic; text-transform:none; letter-spacing:-3px; color:var(--orange); }
.dark { color:#5f5a51; }
.steps { border-top:1px solid #aaa49a; display:grid; grid-template-columns:repeat(4,1fr); }
.steps article { padding:28px 28px 10px 0; border-right:1px solid #aaa49a; min-height:255px; transition:background .3s,color .3s,transform .3s; }
.steps article:hover { background:rgba(255,242,0,.8); transform:translateY(-6px); }
.steps article { padding-left:28px; }
.steps article:first-child { padding-left:0; }
.steps article:last-child { border:0; }
.steps span { font-size:11px; color:var(--orange); }
.steps h3 { font:400 36px/1 var(--font-display); text-transform:uppercase; margin:60px 0 18px; letter-spacing:-2px; }
.steps p { font-size:13px; line-height:1.55; color:#625e56; }

/* cada passo se move como o verbo que ele nomeia */
.steps h3 { white-space:nowrap; }
.steps h3 .ltr { display:inline-block; font:inherit; color:inherit; letter-spacing:inherit; }
@media (hover:hover) and (pointer:fine) {
  .steps h3 { display:block; width:fit-content; transform-origin:left center; padding-bottom:8px; margin-bottom:10px; transition:letter-spacing .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1),background-size .55s cubic-bezier(.2,.8,.2,1); }
  .steps h3 .ltr { transition:transform .5s cubic-bezier(.2,.8,.2,1); }

  /* 01 DESARMAR — as letras largam a rigidez e caem fora de forma */
  .steps article:nth-child(1):hover .ltr { transform:translateY(7px) rotate(-9deg); transition-delay:calc(var(--i) * .045s); }
  .steps article:nth-child(1):hover .ltr:nth-child(even) { transform:translateY(-5px) rotate(8deg); }

  /* 02 EXPERIMENTAR — cada letra improvisa, uma depois da outra, sem parar */
  .steps article:nth-child(2):hover .ltr { animation:ltrJump .62s ease-in-out infinite; animation-delay:calc(var(--i) * .055s); }

  /* 03 CRIAR — a palavra é construída letra por letra sobre uma base que se desenha */
  .steps article:nth-child(3) h3 { background:linear-gradient(var(--violet),var(--violet)) left bottom/0 7px no-repeat; }
  .steps article:nth-child(3):hover h3 { background-size:100% 7px; }
  .steps article:nth-child(3):hover .ltr { animation:ltrBuild .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * .07s); }

  /* 04 OCUPAR — a palavra se abre e toma todo o espaço do bloco */
  .steps article:nth-child(4):hover h3 { letter-spacing:7px; transform:scale(1.05); }
}
@keyframes ltrJump { 0%,100% { transform:none; } 30% { transform:translateY(-10px) rotate(-7deg); } 60% { transform:translateY(3px) rotate(4deg); } }
@keyframes ltrBuild { 0% { transform:translateY(10px) scale(.7); opacity:.2; } 100% { transform:none; opacity:1; } }
.courses { padding:150px 0; background:var(--ink); color:white; border-top:1px solid #292b2f; }
.courses h2,.outcomes h2,.finalCta h2 { font:400 clamp(55px,7vw,96px)/.88 var(--font-display); letter-spacing:-5px; text-transform:uppercase; margin:65px 0; }
.courses h2 i,.outcomes h2 i { font-family:var(--font-serif); text-transform:none; font-weight:600; color:var(--acid); }
.courseGrid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.course { min-height:700px; padding:36px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s; }
.course.primary:hover { transform:rotate(0) translateY(-12px); box-shadow:0 18px 45px rgba(255,242,0,.16); }
.course.secondary:hover { transform:rotate(0) translateY(-12px); box-shadow:0 18px 45px rgba(36,69,255,.22); }
.primary { background:var(--acid); color:var(--ink); transform:rotate(-.35deg); box-shadow:none; }
.secondary { background:var(--paper); color:var(--ink); transform:rotate(.35deg); box-shadow:none; }
.courseMeta { display:flex; justify-content:space-between; font-size:10px; letter-spacing:2px; }
.course small { font-size:10px; font-weight:800; letter-spacing:2px; }
.course h3 { font:400 54px/.9 var(--font-display); letter-spacing:-3px; margin:18px 0; }
.course p { max-width:480px; font-size:14px; line-height:1.6; }
.course ul { list-style:none; padding:20px 0; margin:0; border-top:1px solid rgba(22,21,20,.35); border-bottom:1px solid rgba(22,21,20,.35); display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:12px; }
.course li::before { content:"✦"; margin-right:8px; color:var(--orange); }
.price { display:flex; align-items:baseline; gap:10px; }
.price span { font-size:11px; }
.price strong { font:600 36px/1 var(--font-serif); }
.price small { letter-spacing:0; }
.courseButton { border:1px solid var(--ink); padding:18px; display:flex; justify-content:space-between; font-size:12px; font-weight:800; text-transform:uppercase; }
.courseButton:hover { background:var(--ink); color:white; }
.finePrint { text-align:center; color:#85827b; font-size:10px; letter-spacing:2px; margin-top:55px; text-transform:uppercase; }
.outcomes { padding:155px 0; display:grid; grid-template-columns:1fr 1.2fr; gap:110px; }
.outcomes h2 { font-size:62px; margin-top:45px; }
.outcomes h2 i { color:var(--violet); }
.outcomeList { border-top:1px solid #aaa49a; }
.outcomeList div { display:grid; grid-template-columns:40px 1fr auto; gap:20px; align-items:center; padding:25px 0; border-bottom:1px solid #aaa49a; transition:padding .3s,background .3s; }
.outcomeList div:hover { padding-left:22px; padding-right:18px; background:var(--acid); }
.outcomeList span { color:var(--orange); font-size:10px; }
.outcomeList p { font:500 25px/1.1 var(--font-serif); margin:0; }
.outcomeList b { font-size:20px; }
.visualManifesto { background:var(--ink); padding:0; overflow:hidden; border-block:1px solid #292b2f; }
.visualGrid { width:100%; max-width:none; display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:0; align-items:stretch; }
.visualGrid>img { width:100%; height:680px; object-fit:cover; border:0; filter:saturate(.85) contrast(1.08); }
.visualGrid>img:first-child,.visualGrid>img:last-child { transform:none; opacity:.72; }
.plusStatement { background:var(--pink); color:var(--acid); display:flex; flex-direction:column; justify-content:center; align-items:center; font:400 clamp(45px,6vw,88px)/.78 var(--font-display); letter-spacing:-4px; text-align:center; box-shadow:none; }
.plusStatement span { color:var(--ink); font-size:.7em; line-height:.55; }
.director { background:var(--violet); color:white; padding:150px 0; }
.directorGrid { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; align-items:center; }
.portrait { min-height:680px; background:var(--ink); color:var(--paper); padding:30px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(-1.2deg); overflow:hidden; position:relative; border:4px solid var(--acid); }
.portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--pink),transparent 55%); mix-blend-mode:multiply; }
.portrait>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:contrast(1.08) saturate(1.05); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.portrait:hover>img { transform:scale(1.055); }
.portrait div { position:absolute; left:30px; bottom:34px; font:400 66px/.78 var(--font-display); letter-spacing:-5px; z-index:2; color:var(--paper); text-shadow:5px 5px 0 var(--pink); }
.portrait span { position:absolute; top:24px; right:24px; padding:10px 13px; background:var(--acid); color:var(--ink); font-size:9px; font-weight:800; letter-spacing:3px; z-index:2; transform:rotate(2deg); }
.directorCopy blockquote { font:600 clamp(38px,4.5vw,62px)/1.02 var(--font-serif); margin:55px 0 38px; }
.directorCopy p { max-width:600px; line-height:1.7; }
.directorCopy a { display:inline-block; margin-top:30px; font-size:12px; font-weight:800; border-bottom:2px solid var(--acid); color:var(--acid); padding-bottom:5px; text-transform:uppercase; }
.finalCta { width:100%; max-width:none; padding:150px max(40px,calc((100vw - 1180px)/2)); background:var(--paper); }
.finalCta h2 { max-width:1000px; }
.finalRow { display:flex; justify-content:flex-end; align-items:center; gap:100px; }
.finalRow>p { width:380px; line-height:1.7; }
.roundButton { flex:none; width:220px; height:220px; background:var(--acid); border-radius:50%; display:flex; justify-content:center; align-items:center; gap:28px; font:400 17px/.95 var(--font-display); transition:.25s; }
.roundButton:hover { transform:rotate(7deg) scale(1.04); background:var(--orange); }
.roundButton b { font-size:30px; }
footer { background:var(--ink); color:var(--paper); padding:0 0 25px; overflow:hidden; }
.footerStatement { padding:90px max(40px,calc((100vw - 1180px)/2)) 70px; color:var(--pink); font:400 clamp(72px,11vw,170px)/.76 var(--font-display); letter-spacing:-8px; text-transform:uppercase; white-space:nowrap; border-bottom:1px solid #34363a; transform:translateX(-1.5vw); }
.footerStatement span { display:block; }
.footerStatement span:last-child { color:var(--paper); }
.footerTop { padding-top:65px; }
.reveal { opacity:0; transform:translateY(65px); transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
.steps article.reveal:nth-child(2),.outcomeList>div.reveal:nth-child(2) { transition-delay:.08s; }
.steps article.reveal:nth-child(3),.outcomeList>div.reveal:nth-child(3) { transition-delay:.16s; }
.steps article.reveal:nth-child(4),.outcomeList>div.reveal:nth-child(4) { transition-delay:.24s; }
.footerTop { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; padding-bottom:65px; }
.footerTop p { font-size:12px; line-height:1.7; }
.footerTop>a { text-align:right; font-weight:700; font-size:12px; }
.footerBottom { padding-top:22px; border-top:1px solid #45433f; display:flex; justify-content:space-between; color:#77736c; font-size:9px; letter-spacing:1.5px; }

@media (max-width: 800px) {
  .shell { width:min(100% - 32px, 640px); }
  .nav { height:84px; } .brand>img { width:50px; height:50px; } nav>a:not(.navCta) { display:none; } .navCta { padding:11px 13px; }
  .hero { min-height:auto; padding-top:42px; padding-bottom:78px; overflow:hidden; }
  .hero h1 { width:100%; max-width:100%; letter-spacing:-2.6px; margin-top:44px; font-size:clamp(39px,11.7vw,52px); line-height:.9; }
  .heroLogo { display:none; }
  .heroTwist { margin:24px 0 0; display:block; min-height:0; position:relative; }
  .heroTwist>p { width:calc(100% - 116px); min-height:142px; display:flex; flex-direction:column; justify-content:center; font-size:45px; line-height:.82; letter-spacing:-1.8px; }
  .heroCopy { margin-top:28px; width:100%; max-width:none; padding:20px; box-shadow:none; }
  .stageMark { width:124px; height:124px; right:0; top:310px; font-size:24px; letter-spacing:-1.5px; z-index:3; opacity:1; border-width:8px; box-shadow:8px 9px 0 var(--violet); }
  .stageMark b { font-size:22px; }
  .scrollNote { display:none; }
  .manifesto,.process,.courses,.outcomes,.director,.finalCta { padding:85px 0; }
  .finalCta { width:100%; max-width:none; padding:85px 16px; }
  .manifestoGrid,.outcomes,.directorGrid { grid-template-columns:1fr; gap:55px; }
  .bigText { font-size:42px; }
  .beforeAfter { gap:12px; margin-top:60px; }
  .beforeAfter p { font-size:18px; } .pulse { font-size:30px; }
  .sectionTop { display:block; margin-bottom:48px; } .sectionTop>p { width:auto; margin:30px 0 0; }
  .sectionHead h2 { font-size:clamp(42px,12.5vw,58px); letter-spacing:-2.6px; margin-top:22px; }
  .process::before { right:-140px; top:40px; width:230px; height:230px; }
  .steps { grid-template-columns:1fr 1fr; } .steps article:nth-child(2) { border-right:0; } .steps article { min-height:0; padding:24px 18px 22px 0; }
  .steps article:not(:first-child) { padding-left:18px; }
  .steps article:nth-child(3) { padding-left:0; border-top:1px solid #aaa49a; } .steps article:nth-child(4) { border-top:1px solid #aaa49a; }
  .steps h3 { font-size:clamp(24px,6.4vw,32px); letter-spacing:-1.2px; line-height:1.02; margin:22px 0 12px; }
  .courses h2,.finalCta h2 { font-size:51px; letter-spacing:-3px; }
  .courseGrid { grid-template-columns:1fr; gap:36px; }
  .course { min-height:690px; padding:28px; } .course h3 { font-size:43px; }
  .course ul { grid-template-columns:1fr; }
  .outcomes h2 { font-size:48px; }
  .directorGrid { gap:70px; } .portrait { min-height:480px; } .portrait div { left:22px; bottom:26px; font-size:52px; }
  .visualGrid { grid-template-columns:1fr 1fr; gap:0; } .visualGrid>img { height:390px; } .plusStatement { grid-column:1/-1; grid-row:1; min-height:330px; } .visualGrid>img:first-child { grid-column:1; } .visualGrid>img:last-child { grid-column:2; }
  .footerStatement { padding:70px 16px 55px; font-size:59px; line-height:.8; letter-spacing:-4px; white-space:normal; transform:none; }
  .finalRow { display:block; } .finalRow>p { width:auto; margin-bottom:45px; } .roundButton { margin-left:auto; width:190px; height:190px; }
  .footerTop { grid-template-columns:1fr; gap:35px; } .footerTop>a { text-align:left; } .footerBottom { gap:25px; line-height:1.5; }
}

@media (max-width: 540px) {
  .steps { grid-template-columns:1fr; }
  .steps article,.steps article:not(:first-child) { padding:22px 0 24px; border-right:0; border-top:1px solid #aaa49a; }
  .steps article:first-child { border-top:0; }
  .steps article:hover { padding-left:0; transform:none; background:transparent; }
  .steps h3 { font-size:38px; letter-spacing:-1.5px; margin:14px 0 10px; }
  .steps p { font-size:14px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .pulse,.ticker div,.stageMark,.heroLogo,.hero h1,.heroTwist,.steps h3,.steps h3 .ltr { animation:none !important; transform:none !important; } .reveal { opacity:1; transform:none; transition:none; } }
