@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@700&display=swap');

:root {
  --bg: #0e0f11;
  --panel: #1c1d21;
  --line: #26282d;
  --text: #e6e7ea;
  --muted: #8b8f98;
  --gold: #f6c945;
  --gold-light: #ffe98a;
  --sky: #4fc3f7;
  --cloud: #f0f0f0;
  --header-height: 72px;
  --travel: min(70svh, 620px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gold); color: var(--bg); }
h1, h2, p { margin: 0; }

.skip-link { position: fixed; z-index: 30; top: -100px; left: 16px; padding: 12px 16px; background: var(--gold); color: var(--bg); }
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  height: var(--header-height);
  border-bottom: 1px solid var(--line);
  background: rgba(14, 15, 17, .96);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 23px 0 18px; border-right: 1px solid var(--line); font-size: 23px; font-weight: 700; letter-spacing: -.065em; white-space: nowrap; }
.brand-icon { position: relative; display: block; flex: none; width: 42px; height: 42px; }
.brand img { display: block; width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.brand-strings { position: absolute; inset: 0; display: none; width: 100%; height: 100%; fill: #fff; shape-rendering: crispEdges; pointer-events: none; }
.brand-icon--dark .brand-strings { display: block; }
.brand-wordmark { font: 700 25px/1 "Space Mono", monospace; letter-spacing: -.055em; }
.brand-cursor { display: inline-block; color: var(--gold); animation: brand-cursor-blink 1.2s steps(1, end) infinite; }
@keyframes brand-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 99% { opacity: .15; }
  100% { opacity: 1; }
}
.main-nav { display: flex; align-items: stretch; }
.main-nav a { display: grid; place-items: center; min-width: 138px; padding: 0 22px; border-right: 1px solid var(--line); font-size: 15px; font-weight: 500; transition: background .2s, color .2s; }
.main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--panel); }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -2px var(--gold); }
.language-switch { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-left: 1px solid var(--line); }
.language-switch button { display: grid; place-items: center; min-width: 38px; height: 35px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font: 500 12px "DM Mono", monospace; transition: background .2s, color .2s; }
.language-switch button:hover { color: var(--text); }
.language-switch button[aria-pressed="true"] { background: var(--panel); color: var(--gold); }
.language-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.header-action { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 230px; padding: 0 24px; background: var(--cloud); color: var(--bg); font-size: 15px; font-weight: 600; transition: background .2s; }
.header-action:hover { background: var(--gold-light); }
.pixel-arrow { display: block; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.pixel-arrow-diagonal { width: 24px; height: 24px; }

/* O palco fica imóvel enquanto a rolagem transforma o hero na segunda tela. */
.story { height: calc(100svh - var(--header-height) + var(--travel)); }
.stage { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); overflow: hidden; background: var(--bg); }
.hero, .vision { position: absolute; inset: 0; }
.hero-main { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; width: 70%; height: 60%; padding: clamp(38px, 3.1vw, 72px); padding-bottom: clamp(40px, 4.5vw, 86px); opacity: var(--hero-alpha, 1); transform: translateY(var(--title-y, 0px)); }
h1 { max-width: 1280px; font-size: clamp(68px, 6.7vw, 142px); font-weight: 500; line-height: .99; letter-spacing: -.075em; }
h1 span { white-space: nowrap; }
.hero-aside { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 66px; width: 30%; height: 60%; padding: clamp(32px, 3vw, 72px); padding-bottom: clamp(48px, 4.8vw, 96px); border-left: 1px solid var(--line); background: var(--panel); opacity: var(--aside-alpha, 1); transform: translateY(var(--title-y, 0px)); }
.hero-aside p { max-width: 520px; font-size: clamp(27px, 2vw, 42px); line-height: 1.1; letter-spacing: -.055em; }
.aside-index { color: var(--muted); font: 11px "DM Mono", monospace; letter-spacing: .08em; }

.hero-art { position: absolute; z-index: 3; top: 60%; left: 0; width: 70%; height: 40%; overflow: hidden; background: var(--sky); clip-path: inset(0 var(--art-crop, 0%) 0 0); opacity: var(--art-alpha, 1); transform: translateY(var(--art-y, 0px)); }
.mosaic-canvas { display: block; width: 100%; height: 100%; }
.hero-scroll { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; width: 30%; height: 40%; padding: 38px clamp(32px, 3vw, 72px) 28px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--bg); opacity: var(--aside-alpha, 1); }
.scroll-caption, .scroll-number { color: var(--muted); font: 11px "DM Mono", monospace; letter-spacing: .06em; }
.hero-scroll a { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: fit-content; }
.pixel-arrow-down { width: 15px; height: 19px; animation: scroll-arrow-pulse 1.8s steps(1, end) infinite both; }
.hero-scroll a svg:nth-child(1) { --arrow-base: #41454c; animation-delay: 0s; }
.hero-scroll a svg:nth-child(2) { --arrow-base: #9298a2; animation-delay: .22s; }
.hero-scroll a svg:nth-child(3) { --arrow-base: var(--text); animation-delay: .44s; }
.hero-scroll a:hover { transform: translateY(6px); transition: transform .25s; }
@keyframes scroll-arrow-pulse {
  0%, 12%, 70%, 100% { color: var(--arrow-base); transform: translateY(0); }
  28%, 44% { color: var(--text); transform: translateY(3px); }
  55% { color: var(--arrow-base); transform: translateY(6px); }
}

.vision { z-index: 2; display: grid; place-items: center; padding: 80px 32px 96px; opacity: var(--vision-alpha, 0); pointer-events: none; }
.vision-inner { display: flex; flex-direction: column; align-items: center; width: calc(100% - var(--vision-inset, 0%)); max-width: 1450px; margin-left: var(--vision-inset, 0%); text-align: center; transform: scale(var(--vision-scale, .92)); }
.vision-symbols { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 32px; }
.symbol { position: relative; display: grid; place-items: center; width: 50px; height: 50px; }
.symbol-art { display: block; width: 36px; height: 36px; image-rendering: pixelated; }
.symbol-model .model-claude { width: 42px; height: 27px; }
.symbol-model .model-chatgpt { width: 42px; height: 42px; }
.symbol-model .model-mark { position: absolute; inset: 0; margin: auto; opacity: 0; animation: model-mark-cycle 9s steps(1, end) infinite; }
.symbol-model .model-mark:first-child { opacity: 1; }
.symbol-model .model-mark:nth-child(2) { animation-delay: -6s; }
.symbol-model .model-mark:nth-child(3) { animation-delay: -3s; }
@keyframes model-mark-cycle {
  0%, 32% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
.vision-kicker { margin-bottom: 34px; color: var(--gold); font: 11px "DM Mono", monospace; letter-spacing: .14em; }
.vision h2 { max-width: 1410px; font-size: clamp(44px, 5.4vw, 106px); font-weight: 500; line-height: 1.06; letter-spacing: -.07em; text-wrap: balance; }
.vision-bottom { position: absolute; right: 32px; bottom: 24px; left: 32px; display: flex; justify-content: space-between; color: #5b606a; font: 10px "DM Mono", monospace; letter-spacing: .08em; }

@media (max-width: 1080px) {
  h1 { font-size: clamp(60px, 7vw, 100px); }
  .hero-aside p { font-size: clamp(24px, 2.8vw, 36px); }
}
@media (max-width: 760px) {
  :root { --header-height: 64px; --travel: 520px; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto auto; }
  .brand { border-right: 0; padding-left: 16px; }.brand-icon, .brand img { width: 38px; height: 38px; }
  .brand-wordmark { font-size: 20px; }
  .main-nav { display: none; }
  .language-switch { padding: 0 7px; }
  .language-switch button { min-width: 34px; }
  .header-action { min-width: 0; gap: 10px; padding: 0 16px; font-size: 13px; }
  .hero-main { width: 100%; height: 49%; padding: 32px 23px 48px; }
  h1 { font-size: clamp(52px, 9.8vw, 82px); line-height: 1.02; }
  h1 span { white-space: normal; }
  .hero-aside { top: 49%; right: auto; left: 0; width: 100%; height: 26%; gap: 16px; padding: 26px 23px 30px; border-top: 1px solid var(--line); border-left: 0; }
  .hero-aside p { max-width: 550px; font-size: clamp(24px, 5vw, 34px); }
  .hero-art { top: 75%; width: 100%; height: 25%; }
  .hero-scroll { display: none; }
  .vision { padding: 75px 23px 80px; }
  .vision-symbols { gap: 11px; margin-bottom: 26px; }.symbol { width: 42px; height: 42px; }.symbol-art { width: 32px; height: 32px; }.symbol-model .model-claude { width: 38px; height: 24px; }.symbol-model .model-chatgpt { width: 38px; height: 38px; }
  .vision-kicker { margin-bottom: 25px; font-size: 10px; }
  .vision h2 { font-size: clamp(40px, 7.7vw, 64px); line-height: 1.08; }
  .vision-bottom { right: 23px; left: 23px; font-size: 9px; }
}
@media (max-width: 440px) {
  .brand { gap: 5px; padding: 0 6px 0 9px; }
  .brand-icon, .brand img { width: 30px; height: 30px; }
  .brand-wordmark { font-size: 16px; }
  .header-action { min-width: 52px; gap: 0; padding: 0 12px; }
  .header-action-label { display: none; }
  .pixel-arrow-diagonal { width: 20px; height: 20px; }
  h1 { font-size: clamp(46px, 11vw, 62px); }
  .vision h2 { font-size: clamp(36px, 9vw, 48px); }
}
@media (max-width: 360px) {
  .hero-aside { gap: 8px; padding: 10px 20px 12px; }
  .hero-aside p { font-size: 19px; line-height: 1.12; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .symbol-model .model-mark { animation: none !important; opacity: 0; }
  .symbol-model .model-mark:first-child { opacity: 1; }
  .pixel-arrow-down { animation: none !important; color: var(--arrow-base); }
  .brand-cursor { animation: none !important; opacity: 1; }
}