/* Gerado a partir da direção visual aprovada. */

:root {
  --ink: #101820;
  --paper: #f4f6f2;
  --white: #ffffff;
  --blue: #2357ff;
  --lime: #b7d449;
  --slate: #7a8795;
  --line: #cbd2d1;
  --soft: #e8eae7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Sora", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin-top: 0; }
.prototype-bar { height: 36px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: var(--paper); font: 500 10px/1.4 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.site-header { min-height: 92px; padding: 18px 48px; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 36px; background: var(--paper); border-bottom: 1px solid var(--line); }
.wordmark { width: max-content; display: flex; flex-direction: column; font-size: 28px; font-weight: 800; line-height: .77; letter-spacing: -.09em; text-transform: lowercase; }
.site-header nav { display: flex; justify-content: center; gap: clamp(24px, 3.2vw, 50px); }
.site-header nav a { font: 500 13px/1 "Sora", Arial, sans-serif; }
.button { min-height: 52px; padding: 0 22px; display: inline-flex; justify-content: space-between; align-items: center; gap: 34px; font: 600 12px/1.25 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .015em; transition: transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-ink { color: var(--white); background: var(--ink); }
.button-lime { color: var(--ink); background: var(--lime); }
.header-cta { min-height: 46px; padding: 0 20px; border: 1px solid var(--ink); color: var(--ink); background: transparent; font: 600 13px/1 "Sora", Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.menu-button { display: none; }
.eyebrow { margin-bottom: 22px; color: var(--blue); font: 600 11px/1.5 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow-light { color: var(--paper); }
.eyebrow-lime { color: var(--lime); }
.text-link { display: inline-flex; align-items: center; gap: 22px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: 600 12px/1.3 "IBM Plex Mono", monospace; letter-spacing: .02em; text-transform: uppercase; }

.hero { min-height: 820px; display: grid; grid-template-columns: 58% 42%; border-bottom: 1px solid var(--ink); }
.hero-copy { padding: 112px max(48px, calc((100vw - 1360px) / 2)) 44px; padding-right: clamp(54px, 6vw, 110px); display: flex; flex-direction: column; align-items: flex-start; background: var(--paper); position: relative; }
.hero h1 { max-width: 800px; margin-bottom: 30px; font-size: clamp(55px, 5vw, 78px); line-height: .98; font-weight: 600; letter-spacing: -.065em; }
.hero h1 em { color: var(--blue); font-style: normal; }
.lead { max-width: 690px; margin-bottom: 34px; color: #53616b; font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.origin { margin: auto 0 0; padding-top: 50px; font: 500 11px/1.5 "IBM Plex Mono", monospace; }
.hero-art { min-width: 0; position: relative; overflow: hidden; background: var(--blue); color: var(--white); }
.art-grid { position: absolute; inset: 0; opacity: .21; background-image: linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px); background-size: 72px 72px; }
.art-code { position: absolute; left: 38px; top: 34px; padding: 10px 13px; background: var(--lime); color: var(--ink); font: 600 11px/1.25 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.plane { width: 55%; height: 43%; position: absolute; border: 2px solid var(--white); background: rgba(255,255,255,.035); transform: skewY(-7deg); }
.plane span { position: absolute; left: 15px; bottom: 15px; font: 500 10px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; transform: skewY(7deg); }
.plane-one { left: 9%; top: 25%; }
.plane-two { left: 33%; top: 16%; border-color: var(--lime); background: rgba(183,212,73,.11); }
.plane-three { left: 23%; top: 43%; border-color: var(--ink); background: rgba(16,24,32,.13); }
.decision-node { min-width: 170px; padding: 17px 18px; position: absolute; left: 33%; top: 46%; z-index: 3; background: var(--ink); color: var(--white); }
.decision-node b { display: block; color: var(--lime); font-size: 11px; text-transform: uppercase; }
.decision-node span { display: block; margin-top: 2px; font-size: 27px; font-weight: 600; letter-spacing: -.05em; }
.art-caption { position: absolute; left: 38px; bottom: 38px; margin: 0; font-size: 23px; line-height: 1.12; font-weight: 600; letter-spacing: -.045em; }
.art-index { position: absolute; right: 28px; bottom: 35px; font: 500 10px/1.3 "IBM Plex Mono", monospace; writing-mode: vertical-rl; }

.solutions { min-height: 1020px; padding: 124px max(48px, calc((100% - 1360px) / 2)) 45px; background: var(--blue); color: var(--white); }
.solutions-heading { margin-bottom: 85px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: end; }
.solutions h2 { max-width: 850px; margin-bottom: 0; font-size: clamp(48px, 5vw, 74px); line-height: .99; font-weight: 600; letter-spacing: -.06em; }
.solutions-heading > p { max-width: 520px; margin-bottom: 4px; color: var(--paper); font-size: 16px; line-height: 1.7; }
.system-map { min-height: 585px; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; border-top: 1px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.55); }
.map-line { position: absolute; z-index: 3; pointer-events: none; }
.map-line-top { width: 66.7%; height: 7px; left: 16.65%; top: -4px; background: var(--lime); }
.map-line-drop { width: 7px; height: 70px; left: calc(50% - 3px); top: -4px; background: var(--lime); }
.map-node { padding: 9px 13px; position: absolute; z-index: 5; top: 65px; left: 50%; transform: translateX(-50%); background: var(--lime); color: var(--ink); font: 600 11px/1.25 "IBM Plex Mono", monospace; text-transform: uppercase; }
.lane { min-width: 0; padding: 28px 38px 34px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.55); position: relative; }
.lane:first-of-type { padding-left: 0; }
.lane:last-child { padding-right: 0; border-right: 0; }
.lane-meta { display: flex; justify-content: space-between; color: var(--paper); font: 500 11px/1.35 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.lane-symbol { height: 150px; margin: 65px 0 25px; position: relative; }
.symbol-frame i { width: 108px; height: 108px; position: absolute; border: 2px solid var(--white); }
.symbol-frame i:first-child { left: 12%; top: 4%; }
.symbol-frame i:last-child { left: calc(12% + 48px); top: 29%; border-color: var(--lime); }
.symbol-window i { width: 150px; height: 92px; position: absolute; border: 2px solid var(--white); transform: skewY(-6deg); }
.symbol-window i:first-child { left: 12%; top: 10%; }
.symbol-window i:last-child { left: 24%; top: 33%; border-color: var(--lime); background: rgba(183,212,73,.12); }
.symbol-signal { display: flex; align-items: flex-end; gap: 14px; padding-left: 12%; }
.symbol-signal i { width: 27px; background: var(--white); }
.symbol-signal i:nth-child(1) { height: 42px; }.symbol-signal i:nth-child(2) { height: 82px; background: var(--lime); }.symbol-signal i:nth-child(3) { height: 126px; background: var(--ink); }
.symbol-network i { width: 54px; height: 54px; position: absolute; border: 2px solid var(--white); }
.symbol-network i:nth-child(1) { left: 9%; top: 12%; }
.symbol-network i:nth-child(2) { left: 44%; top: 4%; border-color: var(--lime); }
.symbol-network i:nth-child(3) { left: 27%; top: 54%; border-color: var(--ink); }
.symbol-network::before, .symbol-network::after { content: ""; height: 2px; position: absolute; background: var(--paper); transform-origin: left center; }
.symbol-network::before { width: 43%; left: 22%; top: 42%; transform: rotate(-15deg); }
.symbol-network::after { width: 31%; left: 35%; top: 59%; transform: rotate(27deg); background: var(--lime); }
.lane h3 { margin-bottom: 17px; font-size: 34px; line-height: 1.02; font-weight: 600; letter-spacing: -.055em; }
.lane p { max-width: 370px; min-height: 108px; margin-bottom: 28px; color: var(--paper); font-size: 15px; line-height: 1.65; }
.lane a { width: max-content; margin-top: auto; padding-bottom: 5px; border-bottom: 1px solid var(--lime); color: var(--white); font: 600 11px/1.35 "IBM Plex Mono", monospace; text-transform: uppercase; }
.lane a span { color: var(--lime); margin-left: 16px; }
.solutions-foot { padding-top: 25px; display: flex; justify-content: space-between; font: 500 10px/1.4 "IBM Plex Mono", monospace; letter-spacing: .07em; }

.audiences-soft { min-height: 900px; padding: 122px max(48px, calc((100% - 1360px) / 2)); background: var(--soft); color: var(--ink); }
.audiences-soft .eyebrow { color: var(--ink); }
.soft-heading { margin-bottom: 78px; display: grid; grid-template-columns: 1.28fr .72fr; gap: 8vw; align-items: end; }
.soft-heading h2 { max-width: 850px; margin-bottom: 0; font-size: clamp(48px, 5vw, 72px); line-height: 1; font-weight: 600; letter-spacing: -.06em; }
.soft-heading > p { max-width: 520px; margin-bottom: 5px; color: #4f5b61; font-size: 16px; line-height: 1.7; }
.audience-system { min-height: 485px; display: grid; grid-template-columns: 1fr 1fr; position: relative; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.audience-system article { padding: 28px 7vw 32px 0; display: flex; flex-direction: column; }
.audience-system article + article { padding-left: 7vw; padding-right: 0; border-left: 1px solid var(--ink); }
.audience-meta { display: flex; justify-content: space-between; color: #4f5b61; font: 500 11px/1.35 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.audience-system h3 { margin: 54px 0 20px; font-size: 40px; line-height: 1.02; font-weight: 600; letter-spacing: -.055em; }
.audience-system article > p { max-width: 540px; color: #4f5b61; font-size: 15px; line-height: 1.7; }
.audience-system ul { margin: 14px 0 32px; padding: 0; list-style: none; }
.audience-system li { padding: 11px 0; border-bottom: 1px solid #cbd0ce; font: 500 13px/1.5 "IBM Plex Mono", monospace; }
.audience-system .text-link { width: max-content; margin-top: auto; }
.audience-rail { width: 170px; height: 8px; position: absolute; z-index: 3; left: calc(50% - 85px); top: -4px; background: var(--blue); }
.audience-rail i { width: 8px; height: 70px; position: absolute; left: calc(50% - 4px); background: var(--blue); }
.audience-rail b { width: 22px; height: 22px; position: absolute; left: calc(50% - 11px); top: 65px; background: var(--lime); border: 5px solid var(--soft); }

.method-ink { min-height: 940px; padding: 122px max(48px, calc((100% - 1360px) / 2)) 52px; position: relative; overflow: hidden; background: var(--ink); color: var(--white); }
.method-ink::after { content: ""; width: 520px; height: 620px; position: absolute; right: -285px; top: 80px; border: 2px solid var(--blue); transform: skewY(-8deg); opacity: .6; }
.method-heading { margin-bottom: 80px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: end; position: relative; z-index: 2; }
.method-heading h2 { max-width: 930px; margin-bottom: 0; font-size: clamp(48px, 5.2vw, 76px); line-height: .99; font-weight: 600; letter-spacing: -.06em; }
.method-heading > p { max-width: 500px; margin-bottom: 5px; color: #c2cace; font-size: 16px; line-height: 1.7; }
.method-flow { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; position: relative; z-index: 2; border-top: 1px solid #48535a; border-bottom: 1px solid #48535a; }
.method-flow li { min-height: 370px; padding: 30px 26px 28px; position: relative; border-right: 1px solid #48535a; }
.method-flow li:first-child { padding-left: 0; }
.method-flow li:last-child { padding-right: 0; border-right: 0; }
.method-letter { display: block; color: var(--lime); font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -.07em; }
.method-flow li > div { position: absolute; left: 26px; right: 26px; bottom: 32px; }
.method-flow li:first-child > div { left: 0; }
.method-flow li:last-child > div { right: 0; }
.method-flow h3 { margin-bottom: 14px; font-size: 24px; font-weight: 600; letter-spacing: -.045em; }
.method-flow p { margin: 0; color: #c2cace; font-size: 14px; line-height: 1.65; }
.method-flow i { width: 54px; height: 7px; position: absolute; right: -27px; top: 57px; z-index: 3; background: var(--blue); }
.method-flow i::after { content: ""; width: 7px; height: 7px; position: absolute; right: 0; background: var(--lime); }
.method-footer { padding-top: 38px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.button-outline { color: var(--white); border: 1px solid #69747b; }
.method-footer p { margin: 0; color: #aeb8bd; font: 500 10px/1.5 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }

.process-lime { min-height: 800px; padding: 120px max(48px, calc((100% - 1360px) / 2)) 48px; background: var(--lime); color: var(--ink); }
.process-heading { margin-bottom: 78px; display: grid; grid-template-columns: 1.32fr .68fr; gap: 8vw; align-items: end; }
.process-heading h2 { max-width: 900px; margin-bottom: 0; font-size: clamp(48px, 5.2vw, 76px); line-height: .99; font-weight: 600; letter-spacing: -.06em; }
.process-heading > p { max-width: 500px; margin-bottom: 5px; color: var(--ink); font-size: 16px; line-height: 1.7; }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.process-steps article { min-height: 320px; padding: 27px 42px 30px 0; border-right: 1px solid rgba(16,24,32,.48); }
.process-steps article + article { padding-left: 42px; }
.process-steps article:last-child { padding-right: 0; border-right: 0; }
.step-top { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; font: 600 11px/1.4 "IBM Plex Mono", monospace; }
.step-top i { height: 1px; background: rgba(16,24,32,.36); }
.process-steps h3 { margin: 105px 0 14px; font-size: 31px; font-weight: 600; letter-spacing: -.05em; }
.process-steps p { max-width: 330px; margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; }
.process-bottom { padding-top: 36px; display: flex; justify-content: space-between; align-items: center; }
.process-bottom > span { font: 500 10px/1.5 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.process-lime .eyebrow { color: var(--ink); }
.process-lime .button-ink { color: var(--paper); }

.final-cta { min-height: 820px; padding: 132px max(48px, calc((100% - 1360px) / 2)) 42px; position: relative; overflow: hidden; background: var(--ink); color: var(--white); }
.cta-content { max-width: 990px; position: relative; z-index: 4; }
.final-cta h2 { max-width: 1050px; margin-bottom: 30px; font-size: clamp(60px, 7vw, 105px); line-height: .94; font-weight: 600; letter-spacing: -.072em; }
.cta-content > p:not(.eyebrow) { max-width: 690px; margin-bottom: 36px; color: #c2cace; font-size: 17px; line-height: 1.7; }
.cta-actions { display: flex; align-items: center; gap: 30px; }
.text-link-light { color: var(--white); }
.cta-architecture { width: 49vw; height: 720px; position: absolute; right: -12vw; top: 58px; opacity: .95; }
.cta-plane { width: 420px; height: 520px; position: absolute; border: 2px solid; transform: skewY(-8deg); }
.cta-plane-one { left: 0; top: 90px; border-color: var(--blue); background: rgba(35,87,255,.08); }
.cta-plane-two { left: 145px; top: 0; border-color: var(--slate); }
.cta-plane-three { left: 250px; top: 160px; border-color: var(--lime); background: rgba(183,212,73,.06); }
.cta-footer { position: absolute; z-index: 5; left: max(48px, calc((100% - 1360px) / 2)); right: max(48px, calc((100% - 1360px) / 2)); bottom: 35px; padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: end; border-top: 1px solid #3b464e; }
.wordmark-light { color: var(--white); font-size: 27px; }
.cta-footer p { margin: 0; color: #c2cace; font-size: 12px; }
.cta-footer > span { color: #c2cace; font: 500 10px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; }

.palette { height: 110px; display: grid; grid-template-columns: repeat(5, 1fr); }
.swatch { padding: 20px; font: 500 11px/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; }
.swatch-ink { background: var(--ink); color: var(--paper); }.swatch-paper { background: var(--paper); }.swatch-blue { background: var(--blue); color: var(--paper); }.swatch-lime { background: var(--lime); }.swatch-slate { background: var(--slate); color: var(--ink); }

@media (max-width: 1000px) {
  .site-header { padding-inline: 28px; grid-template-columns: 130px 1fr auto; gap: 20px; }
  .site-header nav { gap: 18px; }
  .hero-copy { padding-left: 28px; }
  .hero h1 { font-size: 57px; }
  .solutions, .final-cta { padding-left: 28px; padding-right: 28px; }
  .audiences-soft { padding-left: 28px; padding-right: 28px; }
  .method-ink { padding-left: 28px; padding-right: 28px; }
  .process-lime { padding-left: 28px; padding-right: 28px; }
  .lane { padding-inline: 24px; }
  .cta-footer { left: 28px; right: 28px; }
}

@media (max-width: 760px) {
  .prototype-bar { height: 30px; padding-inline: 18px; font-size: 7px; }
  .prototype-bar span:last-child { display: none; }
  .site-header { height: 76px; padding-inline: 18px; grid-template-columns: 1fr auto; }
  .wordmark { font-size: 25px; }
  .site-header nav, .header-cta { display: none; }
  .menu-button { width: 43px; height: 43px; padding: 11px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid var(--ink); background: transparent; }
  .menu-button span { width: 100%; height: 1px; background: var(--ink); }
  .button { width: 100%; min-height: 56px; }
  .eyebrow { font-size: 8px; }

  .hero { display: flex; flex-direction: column; }
  .hero-copy { min-height: 670px; padding: 72px 18px 36px; }
  .hero h1 { font-size: 45px; }
  .lead { font-size: 16px; }
  .hero-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 24px; }
  .hero-actions .text-link { align-self: flex-start; }
  .origin { padding-top: 48px; font-size: 10px; }
  .hero-art { min-height: 580px; }
  .art-grid { background-size: 54px 54px; }
  .art-code { left: 18px; top: 22px; }
  .plane { width: 65%; height: 40%; }
  .plane-one { left: 7%; top: 25%; }.plane-two { left: 29%; top: 16%; }.plane-three { left: 18%; top: 44%; }
  .decision-node { left: 29%; top: 46%; }
  .art-caption { left: 18px; bottom: 28px; font-size: 21px; }
  .art-index { right: 15px; bottom: 28px; }

  .solutions { min-height: 0; padding: 90px 18px 30px; }
  .solutions-heading { margin-bottom: 60px; display: block; }
  .solutions h2 { margin-bottom: 26px; font-size: 43px; }
  .solutions-heading > p { font-size: 15px; }
  .system-map { display: block; border-bottom: 0; }
  .map-line-top { width: 7px; height: calc(100% - 55px); left: 17px; top: 0; }
  .map-line-drop { display: none; }
  .map-node { top: 28px; left: 17px; transform: translateX(-40%); writing-mode: vertical-rl; }
  .lane, .lane:first-of-type, .lane:last-child { min-height: 530px; padding: 28px 0 36px 55px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.55); }
  .lane-meta { padding-left: 0; }
  .lane-symbol { margin-top: 58px; }
  .lane h3 { font-size: 32px; }
  .lane p { min-height: auto; }
  .solutions-foot { display: block; line-height: 2; }
  .solutions-foot span { display: block; }

  .audiences-soft { min-height: 0; padding: 90px 18px; }
  .soft-heading { margin-bottom: 58px; display: block; }
  .soft-heading h2 { margin-bottom: 25px; font-size: 42px; }
  .soft-heading > p { font-size: 15px; }
  .audience-system { display: block; border-bottom: 0; }
  .audience-system article, .audience-system article + article { min-height: 520px; padding: 30px 0 35px 48px; border-left: 0; border-bottom: 1px solid var(--ink); }
  .audience-system h3 { font-size: 34px; }
  .audience-rail { width: 8px; height: calc(100% - 60px); left: 16px; top: 0; }
  .audience-rail i { display: none; }
  .audience-rail b { left: -7px; top: 60px; border-color: var(--soft); }

  .method-ink { min-height: 0; padding: 90px 18px 42px; }
  .method-heading { margin-bottom: 58px; display: block; }
  .method-heading h2 { margin-bottom: 25px; font-size: 42px; }
  .method-heading > p { font-size: 15px; }
  .method-flow { display: block; }
  .method-flow li, .method-flow li:first-child, .method-flow li:last-child { min-height: 150px; padding: 24px 0; display: grid; grid-template-columns: 58px 1fr; align-items: center; border-right: 0; border-bottom: 1px solid #48535a; }
  .method-flow li:last-child { border-bottom: 0; }
  .method-letter { font-size: 42px; }
  .method-flow li > div, .method-flow li:first-child > div, .method-flow li:last-child > div { position: static; }
  .method-flow h3 { margin-bottom: 8px; font-size: 22px; }
  .method-flow i { width: 7px; height: 40px; left: 16px; right: auto; top: auto; bottom: -20px; }
  .method-flow i::after { bottom: 0; }
  .method-footer { align-items: stretch; flex-direction: column; gap: 30px; }
  .method-footer p { line-height: 1.7; }
  .method-ink::after { opacity: .25; }

  .process-lime { min-height: 0; padding: 90px 18px 42px; }
  .process-heading { margin-bottom: 55px; display: block; }
  .process-heading h2 { margin-bottom: 25px; font-size: 42px; }
  .process-heading > p { font-size: 15px; }
  .process-steps { display: block; }
  .process-steps article, .process-steps article + article, .process-steps article:last-child { min-height: 220px; padding: 25px 0; border-right: 0; border-bottom: 1px solid rgba(16,24,32,.48); }
  .process-steps article:last-child { border-bottom: 0; }
  .process-steps h3 { margin-top: 72px; font-size: 28px; }
  .process-bottom { align-items: stretch; flex-direction: column; gap: 30px; }

  .final-cta { min-height: 780px; padding: 100px 18px 145px; }
  .final-cta h2 { font-size: 52px; }
  .cta-content > p:not(.eyebrow) { font-size: 14px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .text-link { align-self: flex-start; }
  .cta-architecture { width: 650px; right: -480px; opacity: .5; }
  .cta-footer { left: 18px; right: 18px; bottom: 24px; grid-template-columns: 1fr auto; }
  .cta-footer p { display: none; }
  .palette { height: auto; grid-template-columns: 1fr; }
  .swatch { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }


/* Extensão da direção visual aprovada para a Home completa. */

:root {
  --home-section-space: 120px;
}

/* Interações do header */
.site-header nav a { padding: 13px 0; position: relative; transition: color .2s ease; }
.site-header nav a::after { content: ""; height: 2px; position: absolute; left: 0; right: 100%; bottom: 5px; background: var(--blue); transition: right .22s ease; }
.site-header nav a::before { content: ""; width: 6px; height: 6px; position: absolute; right: -11px; bottom: 3px; background: var(--lime); opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--blue); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.site-header nav a:hover::before, .site-header nav a:focus-visible::before { opacity: 1; transform: scale(1); }
.header-cta { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.header-cta:hover, .header-cta:focus-visible { color: var(--paper); background: var(--ink); transform: translateY(-2px); }

/* Estados globais de ação */
.button-ink, .button-lime, .button-outline { border: 1px solid transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.button-ink:hover, .button-ink:focus-visible { color: var(--paper); background: var(--blue); border-color: var(--blue); transform: translateY(-3px); }
.button-lime:hover, .button-lime:focus-visible { color: var(--ink); background: var(--paper); border-color: var(--paper); transform: translateY(-3px); }
.button-outline { border-color: #69747b; }
.button-outline:hover, .button-outline:focus-visible { color: var(--ink); background: var(--lime); border-color: var(--lime); transform: translateY(-3px); }
.process-lime .button-ink:hover, .process-lime .button-ink:focus-visible { color: var(--ink); background: var(--paper); border-color: var(--ink); }
.text-link { transition: color .2s ease, border-color .2s ease; }
.text-link span { display: inline-block; transition: transform .2s ease; }
.text-link:hover, .text-link:focus-visible { color: var(--blue); border-color: var(--blue); }
.text-link:hover span, .text-link:focus-visible span { transform: translate(3px, -2px); }
.text-link-light:hover, .text-link-light:focus-visible { color: var(--lime); border-color: var(--lime); }

/* Nó estratégico apoiado diretamente sobre a linha de convergência */
.system-map .map-line-drop { display: none; }
.system-map .map-node { top: 0; transform: translate(-50%, -50%); }

/* Links das três frentes */
.system-map .lane a { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(244,246,242,.7); transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.system-map .lane a span { transition: color .2s ease, transform .2s ease; }
.system-map .lane a:hover, .system-map .lane a:focus-visible { color: var(--ink); background: var(--lime); border-color: var(--lime); transform: translateY(-3px); }
.system-map .lane a:hover span, .system-map .lane a:focus-visible span { color: var(--ink); transform: translate(3px, -2px); }

/* Marcadores editoriais das listas de públicos */
.audience-system li { display: flex; align-items: center; gap: 12px; }
.audience-system li::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; background: var(--lime); }

:where(a, button):focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .site-header nav a, .site-header nav a::after, .site-header nav a::before,
  .header-cta, .button-ink, .button-lime, .button-outline,
  .text-link, .text-link span, .system-map .lane a, .system-map .lane a span,
  .footer-column > a { transition: none; }
}

.problem-ink { min-height: 880px; padding: 122px max(48px, calc((100% - 1360px) / 2)) 52px; background: var(--ink); color: var(--white); }
.problem-heading { margin-bottom: 78px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: end; }
.problem-heading h2 { max-width: 900px; margin: 0; font-size: clamp(48px, 5.2vw, 76px); line-height: .99; font-weight: 600; letter-spacing: -.06em; }
.problem-heading > p { max-width: 520px; margin: 0 0 5px; color: #c2cace; font-size: 16px; line-height: 1.7; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #48535a; border-bottom: 1px solid #48535a; }
.problem-grid article { min-height: 340px; padding: 28px 38px 32px 0; border-right: 1px solid #48535a; }
.problem-grid article + article { padding-left: 38px; }
.problem-grid article:last-child { padding-right: 0; border-right: 0; }
.problem-grid span { color: var(--lime); font: 600 11px/1.4 "IBM Plex Mono", monospace; }
.problem-grid h3 { margin: 82px 0 20px; font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -.045em; }
.problem-grid p { max-width: 380px; margin: 0; color: #c2cace; font-size: 15px; line-height: 1.7; }
.problem-close { max-width: 720px; margin: 38px 0 0 auto; color: var(--paper); font-size: 17px; line-height: 1.65; }

.proof-paper { min-height: 1020px; padding: 122px max(48px, calc((100% - 1360px) / 2)) 60px; background: var(--paper); color: var(--ink); }
.proof-heading { margin-bottom: 72px; display: grid; grid-template-columns: 1.28fr .72fr; gap: 8vw; align-items: end; }
.proof-heading h2 { max-width: 820px; margin: 0; font-size: clamp(48px, 5.1vw, 74px); line-height: 1; font-weight: 600; letter-spacing: -.06em; }
.proof-heading > p { max-width: 520px; margin: 0 0 5px; color: #4f5b61; font-size: 16px; line-height: 1.7; }
.case-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-list article { padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.case-visual { aspect-ratio: 1.25; margin-bottom: 26px; padding: 18px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.case-visual::before, .case-visual::after { content: ""; width: 64%; height: 68%; position: absolute; border: 1px solid currentColor; transform: skewY(-7deg); opacity: .55; }
.case-visual::before { left: -15%; top: 15%; }.case-visual::after { right: -20%; bottom: 8%; }
.case-visual span { position: relative; z-index: 2; padding: 9px 11px; background: inherit; font: 600 10px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; }
.case-visual i { position: absolute; right: 16px; top: 15px; font: 500 11px/1 "IBM Plex Mono", monospace; font-style: normal; }
.case-blue { background: var(--blue); color: var(--paper); border-color: var(--blue); }.case-soft { background: var(--soft); color: var(--ink); }.case-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.case-type { margin-bottom: 14px; color: var(--blue); font: 600 11px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; }
.case-list h3 { margin-bottom: 14px; font-size: 25px; line-height: 1.12; letter-spacing: -.045em; }
.case-list article > p:last-child { margin: 0; color: #4f5b61; font-size: 14px; line-height: 1.65; }
.pending-note { max-width: 820px; margin: 42px 0 0; padding-left: 16px; border-left: 5px solid var(--lime); color: #4f5b61; font-size: 14px; line-height: 1.65; }

.about-paper { min-height: 830px; display: grid; grid-template-columns: 48% 52%; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.about-visual { min-height: 830px; position: relative; overflow: hidden; background: var(--blue); color: var(--paper); }
.about-grid-lines { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px); background-size: 72px 72px; }
.about-visual > span { position: absolute; left: 35px; top: 32px; padding: 10px 12px; background: var(--lime); color: var(--ink); font: 600 10px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; }
.about-visual i, .about-visual b { width: 55%; height: 52%; position: absolute; border: 2px solid; transform: skewY(-7deg); }
.about-visual i { left: 10%; top: 28%; border-color: var(--paper); }.about-visual b { left: 35%; top: 18%; border-color: var(--lime); }
.about-content { padding: 118px max(48px, calc((100vw - 1360px) / 2)) 90px clamp(60px, 7vw, 120px); }
.about-content h2 { max-width: 720px; margin-bottom: 32px; font-size: clamp(44px, 4.6vw, 68px); line-height: 1; font-weight: 600; letter-spacing: -.06em; }
.about-content > p:not(.eyebrow) { max-width: 670px; margin-bottom: 18px; color: #4f5b61; font-size: 16px; line-height: 1.7; }
.about-content .text-link { margin-top: 18px; }

.final-cta { min-height: 760px; padding-bottom: 110px; }

.site-footer { padding: 82px max(48px, calc((100% - 1360px) / 2)) 30px; position: relative; background: var(--ink); color: var(--paper); border-top: 1px solid #445058; }
.site-footer::before { content: ""; height: 8px; position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(90deg, var(--blue) 0 76%, var(--lime) 76% 100%); }
.footer-intro { min-height: 190px; display: flex; gap: 34px; align-items: center; }
.footer-wordmark { width: 112px; margin: 0; flex: 0 0 112px; }
.footer-wordmark img { aspect-ratio: 1; object-fit: cover; }
.footer-intro > p { max-width: none; margin: 0; color: #c2cace; font-size: 17px; line-height: 1.65; white-space: nowrap; }
.footer-navigation { display: grid; grid-template-columns: 1.05fr .9fr .9fr 1.15fr; border-top: 1px solid #445058; border-bottom: 1px solid #445058; }
.footer-column { min-width: 0; min-height: 300px; padding: 34px 32px 38px 0; display: flex; flex-direction: column; gap: 17px; border-right: 1px solid #445058; }
.footer-column + .footer-column { padding-left: 32px; }
.footer-column:last-child { padding-right: 0; border-right: 0; }
.footer-column > p { margin-bottom: 20px; color: var(--lime); font: 600 11px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.footer-subheading { margin-top: 9px; color: #8f9ba1; font: 600 9px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; overflow-wrap: anywhere; }
.footer-column > a { width: max-content; max-width: 100%; color: var(--paper); font-size: 14px; line-height: 1.5; transition: color .2s ease, transform .2s ease; }
.footer-column > a:hover, .footer-column > a:focus-visible { color: var(--lime); transform: translateX(4px); }
.footer-contact > a { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid #59656c; display: flex; justify-content: space-between; gap: 24px; overflow-wrap: anywhere; }
.footer-contact > a span { flex: 0 0 auto; }
.footer-social { margin-top: auto; display: flex; gap: 25px; }
.footer-social a { color: #c2cace; font: 500 11px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--lime); }
.footer-bottom { min-height: 74px; padding-top: 25px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 35px; align-items: start; color: #aeb8bd; font: 500 10px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }
.footer-bottom > div { display: flex; gap: 28px; }
.footer-bottom > span:last-child { text-align: right; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--paper); }

/* Ritmo vertical padrão. Hero, seção institucional dividida e footer são exceções. */
.problem-ink,
.solutions,
.audiences-soft,
.method-ink,
.process-lime,
.proof-paper,
.final-cta {
  padding-top: var(--home-section-space);
  padding-bottom: var(--home-section-space);
}

@media (max-width: 1000px) {
  .problem-ink, .proof-paper { padding-left: 28px; padding-right: 28px; }
  .about-content { padding-right: 28px; padding-left: 55px; }
  .site-footer { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 760px) {
  :root { --home-section-space: 88px; }

  .menu-button { position: relative; z-index: 30; }
  .site-header nav.is-open { display: flex; position: absolute; z-index: 20; top: 76px; left: 0; right: 0; padding: 28px 18px 34px; flex-direction: column; align-items: flex-start; gap: 24px; background: var(--paper); border-bottom: 1px solid var(--ink); }
  .site-header nav.is-open a { font-size: 16px; }

  .site-header nav a::before { right: -14px; }
  .system-map .map-node { top: 28px; transform: translateX(-40%); }
  .system-map .lane a { width: max-content; max-width: 100%; }

  .problem-ink { min-height: 0; padding: 90px 18px 42px; }
  .problem-heading { margin-bottom: 55px; display: block; }
  .problem-heading h2 { margin-bottom: 25px; font-size: 42px; }
  .problem-heading > p { font-size: 15px; }
  .problem-grid { display: block; }
  .problem-grid article, .problem-grid article + article, .problem-grid article:last-child { min-height: 260px; padding: 25px 0; border-right: 0; border-bottom: 1px solid #48535a; }
  .problem-grid article:last-child { border-bottom: 0; }
  .problem-grid h3 { margin-top: 62px; font-size: 24px; }
  .problem-grid p { font-size: 15px; }
  .problem-close { margin-top: 35px; font-size: 16px; }

  .audience-system .text-link { width: 100%; max-width: 100%; justify-content: space-between; white-space: normal; line-height: 1.5; }

  .proof-paper { min-height: 0; padding: 90px 18px 45px; }
  .proof-heading { margin-bottom: 55px; display: block; }
  .proof-heading h2 { margin-bottom: 25px; font-size: 42px; }
  .proof-heading > p { font-size: 15px; }
  .case-list { display: block; }
  .case-list article + article { margin-top: 50px; }
  .case-visual { aspect-ratio: 1.18; }
  .case-list h3 { font-size: 24px; }
  .case-list article > p:last-child { font-size: 15px; }

  .about-paper { min-height: 0; display: flex; flex-direction: column; }
  .about-visual { min-height: 520px; }
  .about-content { padding: 90px 18px; }
  .about-content h2 { font-size: 42px; }
  .about-content > p:not(.eyebrow) { font-size: 15px; }

  .final-cta { min-height: 720px; padding-bottom: 100px; }
  .site-footer { padding: 70px 18px 24px; }
  .footer-intro { min-height: 180px; display: flex; gap: 22px; align-items: center; }
  .wordmark { width: 56px; }
  .footer-wordmark { width: 86px; flex-basis: 86px; }
  .footer-intro > p { min-width: 0; font-size: 14px; white-space: normal; }
  .footer-navigation { grid-template-columns: 1fr 1fr; }
  .footer-column, .footer-column + .footer-column, .footer-column:last-child { min-height: 265px; padding: 30px 20px 32px 0; border-right: 1px solid #445058; border-bottom: 1px solid #445058; }
  .footer-column:nth-child(even) { padding-left: 20px; padding-right: 0; border-right: 0; }
  .footer-column:nth-child(n+3) { border-bottom: 0; }
  .footer-column > a { width: auto; font-size: 13px; }
  .footer-contact > a { gap: 10px; }
  .footer-social { flex-direction: column; gap: 12px; }
  .footer-bottom { padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
  .footer-bottom > div { flex-direction: column; gap: 10px; }
  .footer-bottom > span:last-child { text-align: left; }

  .problem-ink,
  .solutions,
  .audiences-soft,
  .method-ink,
  .process-lime,
  .proof-paper,
  .final-cta {
    padding-top: var(--home-section-space);
    padding-bottom: var(--home-section-space);
  }
}
.wordmark { width: 64px; display: block; line-height: 0; }
.wordmark img { width: 100%; height: auto; display: block; }



/* Adaptações da implementação PHP */
.prototype-bar { display: none; }
.skip-link { position: fixed; z-index: 1000; left: 18px; top: 12px; padding: 12px 16px; color: var(--paper); background: var(--ink); transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.site-header nav a[aria-current="page"] { color: var(--blue); }
[data-pending-link] { cursor: not-allowed; }