/* Portfólio GD — Guilherme Domingues
   Céu claro, pixel art original, títulos apertados e janelas escuras de app. */

@font-face { font-family: "Bricolage Grotesque"; src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("assets/fonts/pixelify-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #F7F5F0; --bg2: #F1EEE6; --card: #FFFFFF;
  --ink: #16181F; --ink2: #474B57; --ink3: #5F6470;
  --line: rgba(22, 24, 31, .1); --line2: rgba(22, 24, 31, .2);
  --sky: #CDE5F4; --sky2: #E4EFF4; --cloud: #FFFFFF; --cloud2: #E6F0F6;
  --edge: #16181F; --px-shadow: #16181F; --bar-bg: rgba(247, 245, 240, .8); --glass: rgba(255, 255, 255, .7);
  --orange: #F08A3C; --orange-ink: #D9670F; --green: #1FB46B; --amber: #F5B342; --amber-soft: #FFE9BC;
  --blue: #3E8BE0; --violet: #8B6CF0; --teal: #19B5A5; --pink: #E255A1; --red: #E5484D;
  --panel: #0E1117; --panel2: #141823; --panel-edge: rgba(22, 24, 31, .85); --panel-line: rgba(255, 255, 255, .08);
  --panel-ink: #E9EBF0; --panel-ink2: #A3ABBC; --panel-ink3: #7F879A;
  --shadow-soft: 0 22px 44px -26px rgba(16, 20, 36, .35);
  --shadow-window: 0 50px 90px -50px rgba(16, 20, 36, .55), 0 18px 36px -24px rgba(16, 20, 36, .35);
  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --press: cubic-bezier(.2, .8, .2, 1);

  /* Paleta da pixel art (dia) */
  --px-ink: #1B1F2A; --px-white: #F6F7FA; --px-shade: #C5CEDB; --px-metal: #4A556E; --px-metal2: #2E3648; --px-screen: #15213C;
  --px-wood: #DDAA72; --px-wood2: #B8834C; --px-leaf: #49A866; --px-leaf2: #2F7F49; --px-tree: #3C8F58; --px-tree2: #2B6F43; --px-pot: #C8693E;
  --px-amber: #F5B342; --px-red: #E5484D; --px-lime: #5BE08A; --px-cyan: #4FD2E8; --px-orange: #F08A3C; --px-violet: #8B6CF0; --px-pink: #E255A1; --px-blue: #3E8BE0;
  --px-grass: #8CC675; --px-grass2: #78B462; --px-path: #E3DCCB; --px-path2: #CFC7B4;
  --px-cap: #2B3140; --px-wall: #F1ECE0; --px-wall2: #D8D0BD; --px-f-hall: #E9E5DB; --px-f-hall2: #D9D4C8;
  --px-f-dados: #DFE9F2; --px-f-dados2: #CDDBE8; --px-f-ia: #E1DBF7; --px-f-ia2: #C9BEEF; --px-f-web: #E5BC85; --px-f-web2: #CFA468;
  --px-f-automacao: #ECE5D5; --px-f-automacao2: #E0B64A; --px-f-integracoes: #D5EEE6; --px-f-integracoes2: #C2E2D8; --px-f-jogos: #4E3F73; --px-f-jogos2: #6A5996;
}

/* Paleta noturna da pixel art: tema noite e bloco de contato. */
:root[data-theme="night"], .night {
  --px-ink: #0B0E16; --px-white: #DDE3EE; --px-shade: #8F9AB0; --px-metal: #39435A; --px-metal2: #232A3A; --px-screen: #0B1226;
  --px-wood: #9A7650; --px-wood2: #77583A; --px-leaf: #2F7F55; --px-leaf2: #1F5F3F; --px-tree: #1D4A3A; --px-tree2: #153A2D; --px-pot: #8D4A2E;
  --px-amber: #FFC857; --px-lime: #7CFFAE; --px-cyan: #7BE9FF;
  --px-grass: #27413A; --px-grass2: #213832; --px-path: #4A4F63; --px-path2: #3C4154;
  --px-cap: #0E121C; --px-wall: #3A4059; --px-wall2: #2E3348; --px-f-hall: #454B63; --px-f-hall2: #3A4057;
  --px-f-dados: #37506E; --px-f-dados2: #2F4662; --px-f-ia: #4A4378; --px-f-ia2: #5A5290; --px-f-web: #7A5A3E; --px-f-web2: #684B33;
  --px-f-automacao: #4F5248; --px-f-automacao2: #B98A2C; --px-f-integracoes: #2F5B58; --px-f-integracoes2: #28504D; --px-f-jogos: #2C2347; --px-f-jogos2: #463A6E;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #0C0F18; --bg2: #10141F; --card: #171C2A;
  --ink: #F2F1EC; --ink2: #BCC1CF; --ink3: #9198AB;
  --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .22);
  --sky: #121B3D; --sky2: #0F1528; --cloud: #2B3559; --cloud2: #232C4C;
  --edge: #F2F1EC; --px-shadow: #000; --bar-bg: rgba(18, 22, 34, .78); --glass: rgba(255, 255, 255, .05);
  --orange-ink: #F08A3C; --panel: #080A10; --panel2: #0E121B; --panel-edge: rgba(255, 255, 255, .14);
  --shadow-soft: 0 22px 44px -26px rgba(0, 0, 0, .7);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .5s, color .5s; }
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(240, 138, 60, .35); }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.1vw, 90px); letter-spacing: -.048em; }
h2 { font-size: clamp(32px, 4.2vw, 58px); }
h3 { font-size: clamp(24px, 2.6vw, 37px); letter-spacing: -.03em; line-height: 1.05; }
p { margin: 0 0 1em; color: var(--ink2); }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }

.px { font-family: var(--pixel); font-weight: 700; letter-spacing: -.01em; color: var(--orange-ink); text-shadow: .045em .05em 0 var(--px-shadow); }
h1 .px { white-space: nowrap; }
.mute { color: var(--ink3); }
h2 > .mute, h2 > .px { display: block; }
.sq { display: inline-block; flex: none; width: 9px; height: 9px; background: var(--ink); }
.sq-green { background: var(--green); } .sq-orange { background: var(--orange); } .sq-blue { background: var(--blue); }
.sq-red { background: var(--red); } .sq-amber { background: var(--amber); }
.pulse { animation: pulse 1.8s ease-out infinite; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 600 13px/1.2 var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.eyebrow.center, .center > .eyebrow { justify-content: center; }
.fineprint { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink3); }
.lead { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; font-weight: 500; color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag, .tags span { display: inline-block; padding: 4px 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--card); font: 500 12px/1.5 var(--mono); color: var(--ink2); }
.checks { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 31px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border: 1.5px solid var(--edge); border-radius: 6px; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.link-arrow { padding: 0; border: 0; background: none; color: var(--ink); font: 700 15px/1.3 var(--font); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.link-arrow:hover { color: var(--orange-ink); }
.ico { width: 18px; height: 18px; flex: none; }
.px-icon, .px-art { shape-rendering: crispEdges; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 22px; border: 2px solid var(--edge); border-radius: 14px; background: #fff; color: #16181F; font: 700 17px/1 var(--font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 0 var(--edge); cursor: pointer; transition: transform .14s var(--press), box-shadow .14s var(--press); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--edge); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.btn:disabled { cursor: wait; opacity: .7; }
.btn-primary { background: var(--orange); }
.btn-md, .btn-sm { min-height: 44px; padding: 10px 17px; border-radius: 12px; font-size: 15px; box-shadow: 0 3px 0 var(--edge); }
.btn-md:hover, .btn-sm:hover { box-shadow: 0 5px 0 var(--edge); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.actions.center, .hero .actions { justify-content: center; }

/* ---------- Barra do topo ---------- */
.topbar { position: sticky; top: 0; z-index: 60; padding: 12px 16px 0; }
.topbar-inner { display: flex; align-items: center; gap: 12px; max-width: 1206px; margin: 0 auto; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bar-bg); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: box-shadow .35s; }
.topbar.is-stuck .topbar-inner { box-shadow: 0 14px 34px -18px rgba(16, 20, 36, .4); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-icon { width: 27px; height: 27px; flex: none; }
.topbar .brand-icon .p-ink, .site-footer .brand-icon .p-ink { fill: var(--ink); }
.topbar .brand-icon .p-white, .site-footer .brand-icon .p-white { fill: var(--card); }
.brand-name { font: 700 23px/1 var(--pixel); letter-spacing: .01em; }
.brand-name b { color: var(--orange-ink); font-weight: 700; }
.topnav { display: flex; gap: 2px; margin-left: 10px; }
.topnav a { padding: 9px 12px; border-radius: 10px; color: var(--ink2); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s; }
.topnav a:hover { background: var(--line); color: var(--ink); }
.topbar-space { flex: 1; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: 600 14px/1 var(--font); text-decoration: none; cursor: pointer; transition: border-color .2s; }
.tb-btn:hover { border-color: var(--line2); }
.theme-toggle, .menu-toggle { position: relative; width: 40px; padding: 0; }
.sun, .moon { position: absolute; width: 14px; height: 14px; border-radius: 50%; transition: opacity .5s, transform .5s; }
.sun { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 179, 66, .25); }
.moon { width: 16px; height: 16px; box-shadow: inset -5px -3px 0 0 #E9E7F7; opacity: 0; transform: rotate(-40deg) scale(.6); }
[data-theme="night"] .sun { opacity: 0; transform: scale(.4); }
[data-theme="night"] .moon { opacity: 1; transform: none; }
.menu-toggle, .cta-short { display: none; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { content: ""; display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { position: absolute; left: 0; }
.menu-toggle span::before { top: -5px; } .menu-toggle span::after { top: 5px; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; margin-top: -72px; padding: 132px 0 0; overflow: hidden; text-align: center; }
.sky { position: absolute; inset: 0 0 auto 0; z-index: -1; height: 940px; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 58%, var(--bg) 100%); transition: opacity .5s; }
.sky-short { height: 460px; }
.cloud { position: absolute; left: 0; width: 150px; animation: drift 90s linear infinite; }
.cloud svg { display: block; width: 100%; height: auto; }
.cloud .p-white { fill: var(--cloud); } .cloud .p-shade { fill: var(--cloud2); }
.cloud-1 { top: 128px; animation-delay: -10s; }
.cloud-2 { top: 84px; width: 210px; animation-duration: 120s; animation-delay: -62s; }
.cloud-3 { top: 318px; width: 120px; animation-duration: 100s; animation-delay: -40s; }
.cloud-4 { top: 228px; width: 96px; animation-duration: 140s; animation-delay: -100s; }
.hero h1 { max-width: 1120px; margin: 30px auto 0; font-size: clamp(46px, 8vw, 116px); letter-spacing: -.045em; line-height: .94; }
.hero-claim { max-width: 900px; margin: 18px auto 0; font: 800 clamp(23px, 3.2vw, 44px)/1.1 var(--font); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
/* Foto em moldura de adesivo: a cabeça passa por cima da borda; o fundo acompanha o tema. */
.hero-me { position: relative; display: inline-block; width: 150px; height: 150px; }
.hero-me.no-photo { width: auto; height: auto; }
.me { position: absolute; inset: 24% 0 0; border: 2px solid var(--edge); border-radius: 30px; background-color: color-mix(in srgb, var(--orange) 30%, var(--card)); background-image: radial-gradient(color-mix(in srgb, var(--orange) 55%, transparent) 1px, transparent 1px); background-size: 9px 9px; box-shadow: 6px 6px 0 var(--orange); transform: rotate(-4deg); transition: transform .5s var(--ease); }
.hero-me:hover .me { transform: rotate(0) scale(1.04); }
.me img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; clip-path: inset(-60% 0 0 0 round 0 0 27px 27px); }
.me-badge { position: absolute; left: 50%; bottom: -13px; padding: 4px 12px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 700 14px/1.2 var(--pixel); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 3px 3px 0 var(--orange); transform: translateX(-50%) rotate(3deg); }
.no-photo .me-badge { position: static; display: inline-block; transform: rotate(-2deg); }
.chip { display: inline-block; width: .82em; height: .82em; margin-right: .16em; padding: .12em; vertical-align: -.1em; border: .04em solid var(--edge); border-radius: .2em; background: #fff; box-shadow: .05em .06em 0 var(--edge); }
.chip svg { display: block; width: 100%; height: 100%; }
.chip-l { transform: rotate(-5deg); } .chip-r { transform: rotate(5deg); }
.caret { display: inline-block; width: .38em; height: .11em; margin-left: .06em; background: var(--orange-ink); box-shadow: .045em .05em 0 var(--px-shadow); animation: blink 1.05s steps(1) infinite; }
.hero-sub { max-width: 700px; margin: 26px auto 0; font-size: clamp(17px, 1.5vw, 20.5px); }
.hero-sub strong { color: var(--ink); }
.prompt { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 24px; padding: 7px 8px 7px 16px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--glass); font: 500 14px/1.4 var(--mono); color: var(--ink2); }
.prompt-mark { color: var(--orange-ink); font-weight: 700; }
.prompt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-btn { flex: none; padding: 8px 12px; border-radius: 8px; background: #16181F; color: #F7F5F0; font: 600 12px/1 var(--mono); text-decoration: none; }
.prompt-btn:hover { background: #2A2E3A; }

/* ---------- Janelas ---------- */
.window, .frame { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--panel-edge); border-radius: 20px; background: var(--panel); color: var(--panel-ink); text-align: left; box-shadow: var(--shadow-window); --edge: #F2F1EC; }
.window-bar { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--panel-line); font: 500 12px/1 var(--mono); color: var(--panel-ink2); }
.dots { display: inline-flex; flex: none; gap: 7px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.dots i:nth-child(2) { background: #FEBC2E; } .dots i:nth-child(3) { background: #28C840; }
.window-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-tag { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, .07); font-size: 11px; white-space: nowrap; }
.frame img { display: block; width: 100%; height: auto; }
.term { margin: 0; padding: 18px; min-height: 190px; font: 500 13px/1.8 var(--mono); color: #D6DAE3; white-space: pre-wrap; }
.window.light { background: #fff; color: #16181F; border-color: rgba(22, 24, 31, .14); --edge: #16181F; }
.window.light .window-bar { border-color: rgba(22, 24, 31, .1); background: #F3F1EC; color: #5F6470; }

/* ---------- Palco do laboratório ---------- */
.stage { position: relative; width: min(1132px, calc(100% - 112px)); margin: 64px auto 0; padding-bottom: 72px; }
.app-top { display: flex; align-items: center; gap: 18px; padding: 11px 16px; border-bottom: 1px solid var(--panel-line); background: var(--panel2); }
.app-brand { display: inline-flex; align-items: center; gap: 9px; }
.app-brand .brand-name { color: #fff; font-size: 22px; }
.app-brand .brand-name b { color: var(--orange); }
.app-brand small { padding: 3px 8px; border-radius: 999px; background: rgba(139, 108, 240, .24); color: #CFC4FF; font: 600 10px/1.2 var(--mono); }
.app-stats { display: flex; overflow: hidden; border: 1px solid var(--panel-line); border-radius: 10px; }
.app-stats span { display: grid; padding: 5px 12px; border-right: 1px solid var(--panel-line); font: 500 10px/1.3 var(--mono); color: var(--panel-ink3); }
.app-stats span:last-child { border: 0; }
.app-stats b { font: 700 15px/1.2 var(--font); color: #fff; }
.app-stats b.ok { color: #3DDC84; }
.app-chips { display: flex; gap: 8px; margin-left: auto; }
.app-chip { display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border: 1px solid var(--panel-line); border-radius: 10px; }
.app-chip > b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: var(--acc); color: #0E1117; font-size: 13px; }
.app-chip span { font: 600 11px/1.3 var(--mono); color: var(--panel-ink); }
.app-chip small { display: block; font-size: 10px; font-weight: 500; color: var(--panel-ink3); }
.app-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.app-side { grid-row: span 2; padding: 14px 10px; border-right: 1px solid var(--panel-line); }
.app-label { margin: 0 0 10px 6px; font: 600 13px/1.2 var(--pixel); letter-spacing: .06em; color: var(--panel-ink2); }
.app-label.on-light { display: flex; align-items: center; gap: 8px; margin-left: 0; color: #474B57; }
.sector-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid transparent; border-radius: 12px; color: var(--panel-ink); text-decoration: none; transition: background .2s, border-color .2s; }
.sector-row:hover, .sector-row.is-active { border-color: var(--panel-line); background: var(--panel2); }
.sector-row.is-active { border-color: var(--acc); }
.avatar, .feed-bot, .float-bot { flex: none; border-radius: 8px; background: color-mix(in srgb, var(--acc) 24%, transparent); }
.avatar { width: 31px; height: 34px; padding: 4px 3px 3px; }
.sector-copy { flex: 1; min-width: 0; }
.sector-copy b { display: block; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.sector-copy small { display: block; overflow: hidden; font: 500 10.5px/1.4 var(--mono); color: var(--panel-ink3); text-overflow: ellipsis; white-space: nowrap; }
.count { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); font: 600 10px/1.4 var(--mono); color: var(--panel-ink2); }
.lab-map { position: relative; aspect-ratio: 336 / 196; background: var(--px-grass); }
.px-art { display: block; width: 100%; height: 100%; }
.lab-zone { position: absolute; border-radius: 4px; }
.lab-zone:hover, .lab-zone:focus-visible { box-shadow: inset 0 0 0 3px var(--acc), 0 0 0 2px rgba(255, 255, 255, .75); }
.lab-tag { position: absolute; left: 3px; top: -10px; padding: 3px 8px; border-left: 3px solid var(--acc); border-radius: 6px; background: #12151D; color: #fff; font: 600 11.5px/1.3 var(--pixel); letter-spacing: .03em; white-space: nowrap; }
.lab-bubble { position: absolute; z-index: 3; padding: 5px 10px; border-radius: 9px; background: #fff; color: #16181F; font: 600 12.5px/1.4 var(--font); white-space: nowrap; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6); pointer-events: none; opacity: 0; transform: translate(-50%, -80%); transition: opacity .3s, transform .4s var(--ease); }
.lab-bubble.is-on { opacity: 1; transform: translate(-50%, -100%); }
.app-feed { padding: 12px 16px 14px; border-top: 1px solid var(--panel-line); }
.app-feed .app-label { margin-left: 0; }
#lab-feed { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
#lab-feed li { display: grid; grid-template-columns: 62px 18px 42px minmax(0, 190px) minmax(0, 1fr); align-items: center; gap: 10px; font: 500 11.5px/1.5 var(--mono); color: var(--panel-ink2); }
#lab-feed time { color: var(--panel-ink3); }
#lab-feed b { overflow: hidden; color: var(--panel-ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.feed-bot { width: 18px; height: 20px; padding: 2px; border-radius: 5px; }
#lab-feed em { padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--acc) 26%, transparent); color: var(--ink); font: 700 10px/1.4 var(--mono); text-align: center; }
#lab-feed em { color: #fff; }

.float { position: absolute; z-index: 4; border-radius: 18px; text-align: left; animation: floaty 7s ease-in-out infinite; }
.float-toast { top: -26px; right: -34px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid rgba(245, 179, 66, .7); background: #12151D; color: #fff; text-decoration: none; box-shadow: 0 22px 44px -22px rgba(16, 20, 36, .7); }
.float-bot { width: 38px; height: 42px; padding: 5px 4px 4px; border-radius: 10px; --acc: #3E8BE0; }
.float-toast b { display: block; font-size: 14.5px; line-height: 1.25; }
.float-toast small { font: 500 11px/1.4 var(--mono); color: var(--panel-ink2); }
.float-toast em { padding: 8px 12px; border-radius: 9px; background: var(--orange); color: #16181F; font: 700 12.5px/1 var(--font); }
.float-day { left: -30px; bottom: 34px; width: 266px; padding: 18px; border: 1px solid rgba(22, 24, 31, .1); background: #fff; color: #16181F; box-shadow: 0 22px 44px -26px rgba(16, 20, 36, .45); animation-duration: 8s; animation-delay: -3s; }
.day-box { padding: 12px 14px; border: 1.5px solid var(--amber); border-radius: 14px; background: #FFF9EC; }
.day-box span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.day-box strong { display: block; font-size: 34px; letter-spacing: -.04em; line-height: 1.1; }
.day-box small { font-size: 12.5px; color: #5F6470; }
.day-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 14px; }
.day-bars i { flex: 1; height: calc(var(--h) * 1%); border-radius: 2px; background: var(--green); }
.day-bars i:nth-child(7) { background: var(--orange); }
.float-queue { right: -34px; bottom: 76px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .1); background: #12151D; color: #fff; box-shadow: 0 22px 44px -22px rgba(16, 20, 36, .7); animation-name: floaty2; animation-duration: 9s; }
.queue-badge { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--orange); color: #16181F; font-size: 19px; }
.float-queue strong { font-size: 14.5px; }
.float-queue p { display: grid; grid-template-columns: 70px 104px 24px; align-items: center; gap: 8px; margin: 5px 0 0; font: 500 11px/1.3 var(--mono); color: var(--panel-ink2); }
.float-queue p i { width: var(--w); min-width: 8px; height: 9px; background: repeating-linear-gradient(90deg, var(--green) 0 7px, transparent 7px 9px); }
.float-queue p em { color: #3DDC84; font-style: normal; font-weight: 700; }

/* ---------- Pixel art ---------- */
.p-ink { fill: var(--px-ink); } .p-white { fill: var(--px-white); } .p-shade { fill: var(--px-shade); } .p-metal { fill: var(--px-metal); }
.p-metal2 { fill: var(--px-metal2); } .p-screen { fill: var(--px-screen); } .p-acc { fill: var(--acc, var(--px-orange)); } .p-wood { fill: var(--px-wood); }
.p-wood2 { fill: var(--px-wood2); } .p-leaf { fill: var(--px-leaf); } .p-leaf2 { fill: var(--px-leaf2); } .p-tree { fill: var(--px-tree); }
.p-tree2 { fill: var(--px-tree2); } .p-pot { fill: var(--px-pot); } .p-amber { fill: var(--px-amber); } .p-red { fill: var(--px-red); }
.p-lime { fill: var(--px-lime); } .p-cyan { fill: var(--px-cyan); } .p-orange { fill: var(--px-orange); } .p-violet { fill: var(--px-violet); }
.p-pink { fill: var(--px-pink); } .p-blue { fill: var(--px-blue); } .p-grass { fill: var(--px-grass); } .p-grass2 { fill: var(--px-grass2); }
.p-path { fill: var(--px-path); } .p-path2 { fill: var(--px-path2); } .p-cap { fill: var(--px-cap); } .p-wall { fill: var(--px-wall); }
.p-wall2 { fill: var(--px-wall2); } .p-f-hall { fill: var(--px-f-hall); } .p-f-hall2 { fill: var(--px-f-hall2); }
.p-f-dados { fill: var(--px-f-dados); } .p-f-dados2 { fill: var(--px-f-dados2); } .p-f-ia { fill: var(--px-f-ia); } .p-f-ia2 { fill: var(--px-f-ia2); }
.p-f-web { fill: var(--px-f-web); } .p-f-web2 { fill: var(--px-f-web2); } .p-f-automacao { fill: var(--px-f-automacao); } .p-f-automacao2 { fill: var(--px-f-automacao2); }
.p-f-integracoes { fill: var(--px-f-integracoes); } .p-f-integracoes2 { fill: var(--px-f-integracoes2); } .p-f-jogos { fill: var(--px-f-jogos); } .p-f-jogos2 { fill: var(--px-f-jogos2); }

.lab-live .px-art .bot { animation: px-bob 1.1s steps(1) infinite; }
.lab-live .px-art .bot-b { animation-delay: -.35s; } .lab-live .px-art .bot-c { animation-delay: -.7s; }
.lab-live .px-art .led { animation: px-blink 1.6s steps(1) infinite; }
.lab-live .px-art .led-1 { animation-delay: -.4s; } .lab-live .px-art .led-2 { animation-delay: -.8s; } .lab-live .px-art .led-3 { animation-delay: -1.2s; }
.lab-live .px-art .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: px-bar 2.4s steps(3) infinite; }
.lab-live .px-art .bar-1 { animation-delay: -.6s; } .lab-live .px-art .bar-2 { animation-delay: -1.2s; } .lab-live .px-art .bar-3 { animation-delay: -1.8s; }
.lab-live .px-art .pkt { animation: px-pkt 2.4s steps(12) infinite; }
.lab-live .px-art .pkt-1 { animation-delay: -.8s; } .lab-live .px-art .pkt-2 { animation-delay: -1.6s; }
.lab-live .px-art .pop { animation: px-pop 4s steps(1) infinite; }
.lab-live .px-art .pop-b { animation-delay: -2s; }
.lab-live .px-art .walker { animation: px-walk 18s steps(60) infinite alternate; }
.lab-live .px-art .belt { animation: px-belt .6s steps(3) infinite; }
.lab-live .px-art .box-in { animation: px-box-in 3.2s steps(12) infinite; }
.lab-live .px-art .box-out { animation: px-box-out 3.2s steps(12) infinite; }
.lab-live .px-art .box-1 { animation-delay: -1.6s; }
.lab-live .px-art .ring { transform-box: fill-box; transform-origin: center; animation: px-ring 2s steps(6) infinite; }
.lab-live .px-art .wire { animation: px-dash .8s steps(4) infinite; }
.lab-live .px-art .neon { animation: px-blink 2.2s steps(1) infinite; }


/* ---------- Seções ---------- */
.section { padding: 84px 0; overflow-x: clip; }
/* Seções abaixo da dobra só são calculadas quando chegam perto da tela; o tamanho reservado evita saltos na rolagem. */
.section, .night { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Links internos e páginas abertas já com âncora pedem as alturas reais (ver app.js e o script do <head>). */
.cv-off .section, .cv-off .night { content-visibility: visible; }
.section-alt { background: var(--bg2); }
.heading { max-width: 900px; }
.heading.center { margin-inline: auto; }
.heading > p:not(.eyebrow) { max-width: 680px; margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 20px); }
.heading.center > p:not(.eyebrow) { margin-inline: auto; }
.heading.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; max-width: none; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.stat { padding: 24px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.stat strong { display: block; font: 800 clamp(38px, 4vw, 58px)/1 var(--font); letter-spacing: -.055em; color: var(--ink); }
.stat strong::after { content: ""; display: block; width: 34px; height: 6px; margin-top: 14px; background: var(--orange); box-shadow: 3px 3px 0 var(--edge); }
.stat b { display: block; margin: 18px 0 4px; font-size: 17.5px; letter-spacing: -.02em; line-height: 1.2; }
.stat p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink3); }

.feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 56px; margin-top: 68px; }
.feature-flip .feature-copy { order: 2; }
.feature-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.step-n { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--bg); font: 800 22px/1 var(--font); box-shadow: 4px 4px 0 var(--orange); }
.feature-copy .eyebrow { margin: 24px 0 12px; }
.feature-copy h3 { margin-bottom: 16px; }
.feature-copy > p { font-size: 17.5px; }
.feature-visual { position: relative; min-width: 0; }
.feature-visual .demo { margin-top: 0; }
.feature-visual .scraper-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
.out-strip { overflow: hidden; border: 1px solid var(--panel-edge); border-radius: 16px; background: var(--panel); }
.out-strip .out-sum { border-top: 0; }
.ok { color: #3DDC84; } .bad { color: #FF8A84; }

/* ---------- Simulação do Airflow ---------- */
.af-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 11px 14px; border-bottom: 1px solid var(--panel-line); background: var(--panel2); }
.af-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.af-tabs button { padding: 7px 11px; border: 0; border-radius: 8px; background: none; color: var(--panel-ink2); font: 600 12.5px/1 var(--font); cursor: pointer; }
.af-tabs button[aria-pressed="true"] { background: #fff; color: #16181F; }
.af-meta { display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); color: var(--panel-ink3); }
.af-meta b { color: var(--panel-ink); }
.af-all { padding: 8px 12px; border: 1.5px solid #F2F1EC; border-radius: 9px; background: var(--orange); color: #16181F; font: 700 12.5px/1 var(--font); box-shadow: 0 2px 0 #F2F1EC; cursor: pointer; }
.af-all:active { transform: translateY(2px); box-shadow: none; }
.af-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 132px 64px 34px; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--panel-line); }
.af-name { min-width: 0; }
.af-name b { display: block; overflow: hidden; font: 600 13px/1.4 var(--mono); color: var(--panel-ink); text-overflow: ellipsis; white-space: nowrap; }
.af-name small { display: flex; align-items: center; gap: 8px; overflow: hidden; font: 500 11px/1.5 var(--mono); color: var(--panel-ink3); white-space: nowrap; }
.af-proj { padding: 1px 6px; border-radius: 5px; font-size: 10px; font-style: normal; font-weight: 700; }
.af-coleta { background: rgba(62, 139, 224, .22); color: #9CCBFF; } .af-etl { background: rgba(31, 180, 107, .22); color: #7BE8B0; } .af-pub { background: rgba(245, 179, 66, .22); color: #FFD88A; }
.af-dots { display: flex; gap: 5px; }
.af-dots i { width: 11px; height: 11px; border-radius: 3px; background: #3A4155; }
.af-dots i.ok { background: #1FB46B; } .af-dots i.fail { background: #E5484D; }
.af-state { padding: 5px 6px; border-radius: 7px; background: rgba(255, 255, 255, .06); color: var(--panel-ink2); font: 600 10.5px/1.2 var(--mono); text-align: center; white-space: nowrap; }
.af-state[data-state="queued"] { background: rgba(245, 179, 66, .2); color: #FFD88A; }
.af-state[data-state="running"] { background: rgba(62, 139, 224, .24); color: #9CCBFF; }
.af-state[data-state="retry"] { background: rgba(229, 72, 77, .24); color: #FFA6A9; }
.af-state[data-state="success"] { background: rgba(31, 180, 107, .22); color: #7BE8B0; }
.af-bar { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.af-bar i { display: block; width: 0; height: 100%; background: #3E8BE0; transition: width .25s linear; }
.af-play { width: 34px; height: 32px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 11px; cursor: pointer; }
.af-play:hover { background: var(--orange); color: #16181F; }
.af-play:disabled { opacity: .35; cursor: default; background: none; color: #fff; }
.af-log { height: 128px; margin: 0; overflow: auto; padding: 12px 14px; background: #090B10; font: 500 12px/1.7 var(--mono); color: #9FE6B8; white-space: pre-wrap; }

/* ---------- Da coleta à decisão ---------- */
.pipe { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; gap: 36px; margin-top: 44px; }
.pipe-steps { display: grid; gap: 6px; }
.pipe-more { margin: 30px 0 0; }
.pipe-steps button { display: flex; align-items: center; gap: 16px; padding: 11px 14px; border: 1px solid transparent; border-radius: 16px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background .25s, border-color .25s, box-shadow .25s; }
.pipe-steps button:hover { background: var(--line); }
.pipe-steps button[aria-pressed="true"] { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.pipe-steps .step-n { width: 40px; height: 40px; font-size: 19px; box-shadow: 3px 3px 0 var(--line2); transition: box-shadow .25s; }
.pipe-steps button[aria-pressed="true"] .step-n { box-shadow: 3px 3px 0 var(--orange); }
.pipe-copy b { display: block; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.pipe-copy small { font: 500 12px/1.4 var(--mono); color: var(--ink3); }
.pipe-detail { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.pipe-detail > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pipe-detail h3 { font-size: 24px; }
.pipe-detail p { margin: 0; font-size: 15.5px; }

/* ---------- Demonstrações ---------- */
.demo { margin-top: 44px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-soft); text-align: left; }
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.demo-label { display: block; margin-bottom: 7px; font: 600 12px/1.2 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.demo-head h3 { font-size: clamp(22px, 2.2vw, 28px); }
.demo-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.shop { padding: 24px; border-right: 1px solid var(--line); background: var(--bg); }
.mono { font: 500 12px/1.4 var(--mono); color: var(--ink3); }
.shop label { display: block; margin: 16px 0 6px; font-size: 13.5px; font-weight: 600; }
.shop input, .shop select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--card); color: var(--ink); font: 500 15px/1.3 var(--font); }
.product-token { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; font-weight: 700; line-height: 1.3; }
.product-token > span { display: grid; place-items: center; flex: none; width: 46px; height: 58px; border: 2px solid var(--edge); border-radius: 8px; background: var(--amber); color: #16181F; font-size: 26px; box-shadow: 3px 3px 0 var(--edge); }
.product-token small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink3); }
.small { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink3); }
.price-results { min-width: 0; padding: 24px; background: var(--panel); color: var(--panel-ink); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metrics > div { padding: 12px 14px; border: 1px solid var(--panel-line); border-radius: 14px; }
.metrics span { display: block; font-size: 12.5px; color: var(--panel-ink2); }
.metrics strong { display: block; font-size: 25px; letter-spacing: -.03em; color: #fff; }
.metrics > div:last-child { border-color: rgba(240, 138, 60, .6); background: rgba(240, 138, 60, .08); }
.price-chart { display: grid; gap: 12px; margin: 22px 0 12px; }
.chart-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 78px; align-items: center; gap: 12px; font: 500 12px/1.3 var(--mono); color: var(--panel-ink2); }
.chart-track { height: 14px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.chart-bar { height: 100%; border-radius: 4px; background: #1FB46B; transition: width .3s; }
.chart-row:last-child .chart-bar { background: var(--orange); }
.chart-row strong { color: #fff; text-align: right; }
.price-results .small { color: var(--panel-ink2); }
.demo-log { min-height: 48px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--panel-line); border-radius: 12px; background: #090B10; font: 500 12.5px/1.7 var(--mono); color: #9FE6B8; white-space: pre-line; }

.agent-ask { display: flex; gap: 10px; margin: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); font: 500 13px/1.5 var(--mono); color: var(--panel-ink); }
.agent-ask .prompt-mark { color: var(--orange); }
.agent-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 4px 16px 0; }
.agent-node { display: grid; align-content: start; justify-items: center; gap: 4px; padding: 16px 6px; border: 1px solid var(--panel-line); border-radius: 14px; text-align: center; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.agent-bot { width: 40px; height: 44px; }
.agent-node strong { font-size: 14px; color: #fff; }
.agent-node small { font: 500 10.5px/1.4 var(--mono); color: var(--panel-ink2); }
.agent-node.active { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 18%, transparent); transform: translateY(-4px); }
.agents .demo-log { margin: 14px 16px 0; }
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; font: 500 11.5px/1.4 var(--mono); color: var(--panel-ink2); }

.scraper-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 22px; background: var(--bg); }
.scraper-grid .window { box-shadow: none; }
.store-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.product { display: grid; gap: 3px; padding: 10px; border: 1.5px solid rgba(22, 24, 31, .12); border-radius: 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.product-art { height: 38px; border-radius: 7px; background: repeating-linear-gradient(135deg, #F5E3C8 0 8px, #EFD7B3 8px 16px); }
.product b { font-size: 13px; line-height: 1.2; }
.product small { overflow: hidden; font: 500 9.5px/1.4 var(--mono); color: #5F6470; text-overflow: ellipsis; white-space: nowrap; }
.product-price { font-size: 14px; font-weight: 800; }
.product-price s { font-size: 11.5px; font-weight: 500; color: #5F6470; }
.product.is-reading { border-color: #3E8BE0; box-shadow: 0 0 0 3px rgba(62, 139, 224, .25); }
.product.is-ok { border-color: #1FB46B; background: #F0FBF5; }
.product.is-bad { border-color: #E5484D; background: #FFF1F1; }
.store-bot { position: absolute; left: 14px; top: 50px; z-index: 2; width: 30px; height: 33px; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); transition: left .45s var(--ease), top .45s var(--ease); }
.store-bot-art { display: block; width: 100%; height: 100%; }
.out-table { min-height: 222px; padding: 8px 12px; font: 500 11.5px/1.5 var(--mono); }
.out-row { display: grid; grid-template-columns: 102px minmax(0, 1fr) 50px 50px 58px; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--panel-line); color: var(--panel-ink); }
.out-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-head { color: var(--panel-ink2); }
.out-sum { margin: 0; padding: 12px; border-top: 1px solid var(--panel-line); font: 500 12px/1.5 var(--mono); color: #9FE6B8; }


/* ---------- Bloco escuro: agentes ---------- */
.dark { margin: 0 16px; border-radius: 36px; background-color: #0E1117; background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 22px 22px; color: #F2F1EC;
  --ink: #F2F1EC; --ink2: #BCC1CF; --ink3: #9198AB; --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .22); --edge: #F2F1EC; --orange-ink: #F08A3C; --card: #171C2A; --panel: #080A10; --panel2: #0E121B; --panel-edge: rgba(255, 255, 255, .14); --px-shadow: #000; }
/* As duas janelas têm a mesma altura; os pontos e o botão ficam numa faixa só, embaixo. */
.ia-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: stretch; gap: 24px; margin-top: 44px; }
.ia-cell { display: flex; min-width: 0; }
.ia-cell > .window { display: flex; flex: 1; flex-direction: column; min-width: 0; box-shadow: none; }
.ia-cell .agent-flow { flex: 1; align-content: center; }
.ia-shot { display: flex; flex-direction: column; box-shadow: none; }
.ia-shot img { flex: 1; min-height: 0; object-fit: cover; object-position: top left; }
.ia-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-top: 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, .04); }
.ia-foot .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0; }

/* ---------- Acervo ---------- */
.search-box { display: flex; align-items: center; flex: none; gap: 10px; width: 320px; max-width: 100%; height: 50px; padding: 0 14px; border: 2px solid var(--edge); border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--edge); }
.search-box span { font-size: 22px; line-height: 1; }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--ink); font: 500 15px/1 var(--font); }
.search-box:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.filters button { min-height: 40px; padding: 8px 15px; border: 1px solid var(--line2); border-radius: 999px; background: var(--card); color: var(--ink2); font: 600 14px/1.2 var(--font); cursor: pointer; transition: background .2s, color .2s; }
.filters button:hover { color: var(--ink); border-color: var(--ink); }
.filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.library-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 22px; font-size: 14px; color: var(--ink3); }
.library-bar p { margin: 0 auto 0 0; color: inherit; }
.tech-label { display: flex; align-items: center; gap: 10px; }
.tech-label select { max-width: 210px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card); color: var(--ink); font: 500 14px/1.2 var(--font); }
.car-nav { display: flex; flex: none; gap: 8px; }
.car-btn { display: grid; place-items: center; width: 44px; height: 40px; padding: 0; border: 2px solid var(--edge); border-radius: 12px; background: #fff; color: #16181F; font: 800 18px/1 var(--font); box-shadow: 0 3px 0 var(--edge); cursor: pointer; transition: transform .14s var(--press), box-shadow .14s var(--press), opacity .2s; }
.car-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 var(--edge); }
.car-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.car-btn:disabled { opacity: .35; cursor: default; }
/* Carrossel: a folga em volta da trilha dá espaço para o card subir e projetar sombra sem ser cortado. */
.project-grid { display: flex; gap: 22px; margin: -10px -6px -30px; padding: 10px 6px 30px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 6px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.project-grid > .project-card { flex: 0 0 calc((100% - 44px) / 3.12); scroll-snap-align: start; }
.project-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--card); transition: transform .25s, box-shadow .25s; }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.project-visual { display: block; text-decoration: none; aspect-ratio: 2.05; margin: 10px 10px 0; overflow: hidden; border-radius: 16px; }
.shot-bar { display: flex; align-items: center; height: 22px; padding: 0 10px; }
.shot-bar .dots { gap: 5px; } .shot-bar .dots i { width: 7px; height: 7px; }
.schema { position: relative; display: block; height: 100%; padding: 14px; background-color: color-mix(in srgb, var(--acc) 15%, var(--card)); background-image: radial-gradient(color-mix(in srgb, var(--acc) 34%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.schema-win { display: block; width: 80%; overflow: hidden; border-radius: 12px; background: #12151D; box-shadow: 0 16px 26px -16px rgba(16, 20, 36, .7); }
.schema-win .shot-bar { gap: 9px; height: 26px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.schema-win em { overflow: hidden; font: 500 10.5px/1 var(--mono); color: #A3ABBC; text-overflow: ellipsis; white-space: nowrap; }
.schema-lines { display: grid; gap: 3px; padding: 10px 12px 13px; font: 500 11.5px/1.5 var(--mono); color: #9FE6B8; }
.schema-lines span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schema-lines span:last-child { color: #FFD88A; }
.schema-tag { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1.5px solid var(--edge); border-radius: 8px; background: var(--card); color: var(--ink); font: 600 11px/1.3 var(--mono); box-shadow: 2px 2px 0 var(--edge); }
.schema-tag::before { content: ""; width: 7px; height: 7px; background: var(--green); }
.schema-bot { position: absolute; right: 14px; bottom: 10px; width: 54px; height: 60px; filter: drop-shadow(0 6px 6px rgba(16, 20, 36, .3)); }
.project-body { display: flex; flex: none; flex-direction: column; gap: 9px; height: 258px; padding: 16px 22px 20px; }
.project-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font: 600 12px/1.3 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.cat { display: inline-flex; align-items: center; gap: 7px; }
.cat i { flex: none; width: 8px; height: 8px; background: var(--acc); }
.status { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink3); }
.project-body h3 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.project-body h3 a { text-decoration: none; }
.project-body h3 a::after { content: ""; position: absolute; inset: 0; }
.project-body p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 15px; }
.project-body h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.project-meta .status { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit-slot { display: flex; flex: none; align-items: center; height: 20px; margin-top: auto; overflow: hidden; }
.credit-slot .credit { white-space: nowrap; }
.project-body .tags { flex: none; height: 29px; overflow: hidden; }
.credit { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
#empty-state { padding: 48px 0; text-align: center; }
#empty-state h3 { margin-bottom: 10px; }


/* ---------- Trajetória ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 60px; }
.about h2 { margin-bottom: 24px; }
/* Créditos de filme: a trajetória sobe sozinha; pausar libera a rolagem manual. */
.credits { align-self: start; }
.credits-toggle { margin-left: auto; padding: 6px 11px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .09); color: var(--panel-ink); font: 600 12px/1 var(--font); cursor: pointer; }
.credits-toggle:hover, .credits-toggle[aria-pressed="true"] { background: #fff; color: #16181F; }
.credits-view { height: 540px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent); }
.credits-roll { animation: credits var(--dur, 70s) linear infinite; }
.credits:hover .credits-roll, .credits:focus-within .credits-roll { animation-play-state: paused; }
.credits-copy { display: grid; gap: 44px; padding: 36px 30px 60px; text-align: center; }
.cr-title { display: grid; gap: 6px; }
.cr-title b { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -.04em; line-height: 1; color: #fff; }
.cr-title span { font: 600 14px/1.3 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.cr-title small, .cr-item small { font: 500 12px/1.4 var(--mono); color: var(--panel-ink3); }
.cr-group { display: grid; gap: 26px; }
.cr-heading { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; font: 700 14px/1.2 var(--pixel); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.cr-heading::before, .cr-heading::after { content: ""; width: 34px; height: 2px; background: currentColor; opacity: .5; }
.cr-item { display: grid; gap: 3px; justify-items: center; }
.cr-item b { font-size: 21px; letter-spacing: -.025em; line-height: 1.15; color: #fff; }
.cr-item span { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--panel-ink); }
.cr-item ul { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.4; color: var(--panel-ink2); }
.cr-win { margin: 12px 0 0; padding: 9px 14px; border-radius: 10px; background: var(--amber); color: #16181F; font-size: 14.5px; font-weight: 800; line-height: 1.25; }
/* Pausado: uma cópia só, parada, com rolagem normal. */
.credits.is-paused .credits-roll { animation: none; }
.credits.is-paused .credits-copy[aria-hidden] { display: none; }
.credits.is-paused .credits-view { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }

/* ---------- Contato (noite) ---------- */
.night { position: relative; margin: 0 16px; overflow: hidden; padding: 92px 0 0; border-radius: 36px 36px 0 0; background: linear-gradient(180deg, #0B1026 0%, #141537 55%, #2A1F45 100%); color: #F2F1EC; text-align: center;
  --ink: #F2F1EC; --ink2: #C3C7D6; --ink3: #A0A6B9; --edge: #F2F1EC; --orange-ink: #F08A3C; --line: rgba(255, 255, 255, .12); --line2: rgba(255, 255, 255, .28); --glass: rgba(255, 255, 255, .05); --px-shadow: #05070C; }
.stars i { position: absolute; width: 3px; height: 3px; background: #fff; animation: twinkle var(--s) steps(2) infinite; animation-delay: calc(var(--d) * -1); }
.night-inner { position: relative; }
.night h2 { max-width: 1000px; margin: 0 auto; font-size: clamp(40px, 6.4vw, 92px); }
.night-sub { margin: 24px auto 0; font-size: clamp(17px, 1.6vw, 21px); }
.night .prompt a { color: #fff; }
.night-lab { max-width: 760px; margin: 52px auto 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; border-radius: 22px 22px 0 0; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.site-footer { padding: 26px 0 34px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; font-size: 14px; color: var(--ink3); }
.footer-inner p { margin: 0; color: inherit; }
.footer-top { color: var(--ink2); font-weight: 600; }

/* ---------- Páginas de case ---------- */
.case { position: relative; isolation: isolate; margin-top: -72px; padding: 116px 0 96px; }
.back-link { display: inline-flex; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.back-link:hover { border-color: var(--line2); }
.case-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin: 34px 0 48px; }
.case-head h1 { margin-bottom: 20px; font-size: clamp(38px, 5.6vw, 80px); }
.case-head .lead { max-width: 760px; margin-bottom: 22px; }
.case-side { display: grid; justify-items: start; gap: 14px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; line-height: 1.3; }
#copy-status { font-size: 13px; color: var(--ink2); }
.device-controls { display: flex; gap: 4px; margin-left: auto; }
.device-controls button { padding: 6px 11px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .07); color: var(--panel-ink2); font: 600 12px/1 var(--font); cursor: pointer; }
.device-controls button[aria-pressed="true"] { background: #fff; color: #16181F; }
#gallery-frame { max-width: 1120px; margin-inline: auto; transition: max-width .5s var(--ease); }
#gallery-frame.mobile { max-width: 390px; }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.case-card { padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); }
.case-card h2, .case-how h2, .game-demo h2 { margin-bottom: 14px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; line-height: 1.02; }
.case-card > p:last-child, .case-card .checks { margin-bottom: 0; }
.case-card .checks { margin-top: 0; }
.case-note { border-style: dashed; border-color: var(--line2); background: none; }
.case-how { margin-top: 20px; padding: 36px; border: 1px solid var(--line); border-radius: 28px; background: var(--bg2); }
.case-how > p:not(.eyebrow) { max-width: 880px; }
.case-flow { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.case-flow li { display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 15px; font-weight: 700; line-height: 1.25; }
.case-flow .step-n { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; box-shadow: 3px 3px 0 var(--acc); }
.case-demo { margin-top: 20px; }
.case-demo .demo { margin-top: 0; }
.case-demo > .window { max-width: 980px; margin-inline: auto; }
.case-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 52px; }
.case-next .btn { white-space: normal; text-align: left; line-height: 1.2; }
.game-demo { padding: 36px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); }
.game-demo iframe { width: 100%; height: 850px; margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; }
.not-found { padding: 80px 0 40px; text-align: center; }
.not-found .lead { margin: 24px 0 30px; }
.not-found .eyebrow { justify-content: center; }

/* ---------- Galeria guiada (telas reais) ---------- */
.case-tour, .case-code { margin-top: 28px; }
.tour-head { max-width: 860px; margin-bottom: 26px; }
.tour-head h2 { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.04em; }
.tour-head .fineprint { margin-top: 12px; }
.tour { position: relative; display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; gap: 26px; }
/* As abas são radios: a troca de tela funciona sem JavaScript e pelo teclado (setas). */
.tour-radio { position: absolute; opacity: 0; pointer-events: none; }
.tour-steps { display: grid; gap: 6px; }
.tour-steps label { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid transparent; border-radius: 16px; cursor: pointer; transition: background .25s, border-color .25s, box-shadow .25s; }
.tour-steps label:hover { background: var(--line); }
.tour-steps .step-n { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; box-shadow: 3px 3px 0 var(--line2); transition: box-shadow .25s; }
.tour-tab b { display: block; font-size: 17px; letter-spacing: -.02em; line-height: 1.2; }
.tour-tab small { font: 500 11.5px/1.4 var(--mono); color: var(--ink3); }
.tour-panel { display: none; }
.tour-panel .frame { box-shadow: var(--shadow-window); }
.tour-shot { display: block; cursor: zoom-in; }
.tour-panel img { aspect-ratio: 1904 / 919; object-fit: cover; object-position: top left; background: #151B35; }
.tour-zoom { margin-left: auto; padding: 5px 10px; border-radius: 7px; background: rgba(255, 255, 255, .08); color: var(--panel-ink); font: 600 12px/1 var(--font); text-decoration: none; white-space: nowrap; }
.tour-zoom:hover { background: #fff; color: #16181F; }
.tour-caption { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px; margin-top: 18px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.tour-count { margin: 0 0 8px; font: 600 12px/1.2 var(--mono); color: var(--ink3); }
.tour-caption h3 { margin-bottom: 10px; font-size: clamp(22px, 2.2vw, 28px); }
.tour-caption p:last-child { margin: 0; font-size: 16px; }
.tour-caption .checks { margin: 0; align-content: start; }
.tour-caption .checks li { font-size: 15px; }
.tour-radio:nth-of-type(1):checked ~ .tour-steps label:nth-of-type(1) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(1):checked ~ .tour-steps label:nth-of-type(1) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(1):focus-visible ~ .tour-steps label:nth-of-type(1) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(1):checked ~ .tour-panels .tour-panel:nth-of-type(1) { display: block; }
.tour-radio:nth-of-type(2):checked ~ .tour-steps label:nth-of-type(2) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(2):checked ~ .tour-steps label:nth-of-type(2) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(2):focus-visible ~ .tour-steps label:nth-of-type(2) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(2):checked ~ .tour-panels .tour-panel:nth-of-type(2) { display: block; }
.tour-radio:nth-of-type(3):checked ~ .tour-steps label:nth-of-type(3) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(3):checked ~ .tour-steps label:nth-of-type(3) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(3):focus-visible ~ .tour-steps label:nth-of-type(3) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(3):checked ~ .tour-panels .tour-panel:nth-of-type(3) { display: block; }
.tour-radio:nth-of-type(4):checked ~ .tour-steps label:nth-of-type(4) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(4):checked ~ .tour-steps label:nth-of-type(4) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(4):focus-visible ~ .tour-steps label:nth-of-type(4) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(4):checked ~ .tour-panels .tour-panel:nth-of-type(4) { display: block; }
.tour-radio:nth-of-type(5):checked ~ .tour-steps label:nth-of-type(5) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(5):checked ~ .tour-steps label:nth-of-type(5) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(5):focus-visible ~ .tour-steps label:nth-of-type(5) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(5):checked ~ .tour-panels .tour-panel:nth-of-type(5) { display: block; }
.tour-radio:nth-of-type(6):checked ~ .tour-steps label:nth-of-type(6) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(6):checked ~ .tour-steps label:nth-of-type(6) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(6):focus-visible ~ .tour-steps label:nth-of-type(6) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(6):checked ~ .tour-panels .tour-panel:nth-of-type(6) { display: block; }
.tour-radio:nth-of-type(7):checked ~ .tour-steps label:nth-of-type(7) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(7):checked ~ .tour-steps label:nth-of-type(7) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(7):focus-visible ~ .tour-steps label:nth-of-type(7) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(7):checked ~ .tour-panels .tour-panel:nth-of-type(7) { display: block; }
.tour-radio:nth-of-type(8):checked ~ .tour-steps label:nth-of-type(8) { border-color: var(--line); background: var(--card); box-shadow: var(--shadow-soft); }
.tour-radio:nth-of-type(8):checked ~ .tour-steps label:nth-of-type(8) .step-n { box-shadow: 3px 3px 0 var(--orange); }
.tour-radio:nth-of-type(8):focus-visible ~ .tour-steps label:nth-of-type(8) { outline: 3px solid var(--blue); outline-offset: 2px; }
.tour-radio:nth-of-type(8):checked ~ .tour-panels .tour-panel:nth-of-type(8) { display: block; }

/* Telas de celular: aparelho à esquerda, legenda ao lado. */
.phone-tour .tour-panel { grid-template-columns: 286px minmax(0, 1fr); align-items: center; gap: 30px; }
.phone-tour .tour-radio:checked ~ .tour-panels .tour-panel { display: none; }
.phone-tour .tour-radio:nth-of-type(1):checked ~ .tour-panels .tour-panel:nth-of-type(1) { display: grid; }
.phone-tour .tour-radio:nth-of-type(2):checked ~ .tour-panels .tour-panel:nth-of-type(2) { display: grid; }
.phone-tour .tour-radio:nth-of-type(3):checked ~ .tour-panels .tour-panel:nth-of-type(3) { display: grid; }
.phone-tour .tour-radio:nth-of-type(4):checked ~ .tour-panels .tour-panel:nth-of-type(4) { display: grid; }
.phone-tour .tour-radio:nth-of-type(5):checked ~ .tour-panels .tour-panel:nth-of-type(5) { display: grid; }
.phone-tour .tour-radio:nth-of-type(6):checked ~ .tour-panels .tour-panel:nth-of-type(6) { display: grid; }
.phone-tour .tour-radio:nth-of-type(7):checked ~ .tour-panels .tour-panel:nth-of-type(7) { display: grid; }
.phone-tour .tour-radio:nth-of-type(8):checked ~ .tour-panels .tour-panel:nth-of-type(8) { display: grid; }
.phone { margin: 0; padding: 9px; border: 2px solid var(--edge); border-radius: 38px; background: #0E1117; box-shadow: 8px 8px 0 var(--acc), var(--shadow-soft); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1600; border-radius: 29px; object-fit: cover; background: #05060A; }
.phone-tour .tour-caption { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 0; }

/* ---------- Download ---------- */
.case-download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 36px; margin-top: 28px; padding: 34px; border: 2px solid var(--edge); border-radius: 28px; background: var(--card); box-shadow: 6px 6px 0 var(--acc); }
.case-download h2 { margin-bottom: 12px; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; }
.case-download p { max-width: 520px; }
.download-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.download-facts dl div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.download-facts dt { font: 600 11.5px/1.3 var(--mono); color: var(--ink3); }
.download-facts dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.download-hash { margin: 12px 0 0; }
.download-hash span { display: block; margin-bottom: 4px; font: 600 11.5px/1.3 var(--mono); color: var(--ink3); }
.download-hash code { display: block; overflow-wrap: anywhere; font: 500 12px/1.5 var(--mono); color: var(--ink2); }

/* ---------- Diagrama de funcionamento ---------- */
.diagram { margin: 26px 0 0; }
.lanes { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.lane { padding: 18px; border: 2px solid var(--edge); border-radius: 18px; background: var(--card); box-shadow: 4px 4px 0 var(--acc); }
.lane-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 17px/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); }
.lane-bot { flex: none; width: 26px; height: 29px; }
.lane ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lane li { padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--acc) 12%, var(--card)); border-left: 3px solid var(--acc); }
.lane li b { display: block; font-size: 14.5px; line-height: 1.25; }
.lane li small { font-size: 12.5px; line-height: 1.35; color: var(--ink2); }
.lane-arrow { align-self: center; font: 800 22px/1 var(--font); color: var(--ink3); }
.diagram figcaption { margin-top: 14px; font-size: 14px; color: var(--ink2); }

/* ---------- Linha do tempo do projeto ---------- */
.case-evolution { margin-top: 28px; }
.evolution { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: evo; }
.evolution li { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); counter-increment: evo; }
.evolution li::before { content: counter(evo); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 800 17px/1 var(--font); box-shadow: 3px 3px 0 var(--acc); }
.evo-when { display: block; font: 600 12px/1.3 var(--mono); color: var(--ink3); }
.evolution b { display: block; margin: 4px 0 8px; font-size: 19px; letter-spacing: -.02em; line-height: 1.15; }
.evolution p { margin: 0; font-size: 14.5px; line-height: 1.45; }

/* ---------- Trechos de código ---------- */
.code-steps { display: grid; gap: 10px; }
.code-step { border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.code-step summary { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 20px; cursor: pointer; list-style: none; }
.code-step summary::-webkit-details-marker { display: none; }
.code-step summary::after { content: "+"; flex: none; margin-left: auto; font: 800 24px/1 var(--font); color: var(--ink3); }
.code-step[open] summary::after { content: "–"; }
.code-step summary:hover { background: var(--line); }
.code-step .step-n { width: 38px; height: 38px; font-size: 18px; box-shadow: 3px 3px 0 var(--line2); }
.code-step[open] .step-n { box-shadow: 3px 3px 0 var(--orange); }
.code-sum b { display: block; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.02em; line-height: 1.2; }
.code-sum small { font: 500 12px/1.4 var(--mono); color: var(--ink3); }
.code-open { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: 26px; padding: 6px 18px 20px; }
.code-open > p { margin: 0; font-size: 16px; }
.code-window { box-shadow: none; }
.term.code { min-height: 0; overflow-x: auto; font-size: 13px; line-height: 1.75; white-space: pre; tab-size: 4; }
.term.code code { font: inherit; }
.tk-c { color: #8B93A7; font-style: italic; } .tk-s { color: #FFD88A; } .tk-k { color: #C4B5FF; } .tk-n { color: #7BE8B0; }


/* ---------- Revelar ao rolar ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* A primeira dobra entra só com CSS: o título conta para o LCP e não pode esperar o JavaScript. */
.rise { animation: rise .7s var(--ease) both; animation-delay: var(--d, 0ms); }
.rise-solid { animation: rise-solid .7s var(--ease) both; animation-delay: var(--d, 0ms); }

/* ---------- Animações ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes rise-solid { from { transform: translateY(22px); } }
@keyframes credits { to { transform: translateY(-50%); } }
@keyframes drift { from { transform: translateX(-25vw); } to { transform: translateX(125vw); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 180, 107, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(31, 180, 107, 0); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes px-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes px-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .2; } }
@keyframes px-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes px-pkt { 0% { transform: translateX(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateX(36px); opacity: 0; } }
@keyframes px-pop { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes px-walk { from { transform: translateX(0); } to { transform: translateX(196px); } }
@keyframes px-belt { from { transform: translateX(0); } to { transform: translateX(6px); } }
@keyframes px-box-in { 0% { transform: translateX(0); opacity: 0; } 10%, 80% { opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }
@keyframes px-box-out { 0% { transform: translateX(0); opacity: 0; } 10%, 80% { opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }
@keyframes px-ring { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes px-dash { to { stroke-dashoffset: -8; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .credits-roll { animation: none; }
  .credits-copy[aria-hidden] { display: none; }
  .credits-view { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .credits-toggle { display: none; }
  .cloud { animation: none; left: var(--rest, 8%); }
  .cloud-2 { --rest: 46%; } .cloud-3 { --rest: 84%; } .cloud-4 { --rest: 68%; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1240px) {
  .float-toast, .float-queue { right: -18px; }
  .float-day { left: -18px; }
  .stage { width: min(1132px, calc(100% - 64px)); }
}
@media (max-width: 1100px) {
  .app-chips { display: none; }
  .feature, .feature-flip { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 56px; }
  .feature-flip .feature-copy { order: 0; }
  .project-grid > .project-card { flex-basis: calc((100% - 22px) / 2.15); }
  .library-bar { flex-wrap: wrap; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ia-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ia-shot img { flex: none; height: auto; }
  .tb-github span { display: none; }
}
@media (max-width: 900px) {
  .topbar { padding: 10px 10px 0; }
  .topbar-inner { gap: 7px; padding: 7px 8px 7px 10px; }
  .brand { gap: 8px; }
  .tb-btn { height: 38px; }
  .theme-toggle, .menu-toggle { width: 38px; }
  .topbar .btn-sm { min-height: 38px; padding: 8px 13px; font-size: 14.5px; }
  .menu-toggle { display: inline-flex; }
  .tb-github { display: none; }
  .topnav { display: none; position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; flex-direction: column; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-soft); }
  .topnav.is-open { display: flex; }
  .topnav a { padding: 12px 14px; font-size: 16px; }
  .brand-name { font-size: 20px; }
  .hero { padding-top: 116px; }
  .stage { width: calc(100% - 32px); margin-top: 56px; padding-bottom: 40px; }
  .float-day, .float-queue { display: none; }
  .float-toast { top: -30px; right: 8px; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { grid-row: auto; display: flex; gap: 6px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--panel-line); }
  .app-side .app-label { display: none; }
  .sector-row { flex: none; padding-right: 12px; }
  .sector-copy small, .app-feed { display: none; }
  .lab-scroll { overflow-x: auto; }
  .lab-map { width: max(100%, 700px); }
  .section { padding: 60px 0; }
  .pipe { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pipe-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-steps button { gap: 12px; padding: 9px 10px; }
  .pipe-copy b { font-size: 17px; }
  .demo-layout, .scraper-grid { grid-template-columns: minmax(0, 1fr); }
  .shop { border-right: 0; border-bottom: 1px solid var(--line); }
  .heading.split { flex-direction: column; align-items: stretch; }
  .search-box { width: 100%; }
  .case-head { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
  .case-grid { grid-template-columns: minmax(0, 1fr); }
  .dark, .night { margin-inline: 8px; border-radius: 28px; }
  .night { border-radius: 28px 28px 0 0; padding-top: 88px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .wrap { width: calc(100% - 36px); }
  .hero h1 { margin-top: 24px; }
  .btn { min-height: 52px; padding: 13px 20px; font-size: 16.5px; }
  .hero .actions { flex-direction: column; align-items: center; }
  .prompt { font-size: 12.5px; }
  .app-top { gap: 12px; padding: 10px 12px; }
  .app-brand small { display: none; }
  .app-stats { margin-left: auto; }
  .float-toast em { display: none; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 18px; }
  .stat strong { grid-row: span 2; min-width: 104px; font-size: 34px; }
  .stat strong::after { margin-top: 10px; }
  .stat b { margin: 0 0 2px; }
  .af-row { grid-template-columns: minmax(0, 1fr) 62px 34px; row-gap: 8px; }
  .af-state { grid-column: 1; grid-row: 2; justify-self: start; }
  .af-bar { grid-column: 2 / 4; grid-row: 2; }
  .af-meta span { display: none; }
  .pipe-steps { grid-template-columns: minmax(0, 1fr); }
  .term { min-height: 150px; padding: 14px; font-size: 12px; }
  .demo-head { flex-direction: column; align-items: flex-start; padding: 20px; }
  .shop, .price-results { padding: 20px; }
  .metrics { gap: 8px; }
  .metrics > div { padding: 10px; }
  .metrics strong { font-size: 19px; }
  .metrics span { min-height: 34px; font-size: 11.5px; line-height: 1.3; }
  .chart-row { grid-template-columns: 62px minmax(0, 1fr) 70px; gap: 8px; font-size: 11px; }
  .agent-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .ia-foot .checks { grid-template-columns: minmax(0, 1fr); }
  .ia-foot .btn { justify-self: stretch; }
  .scraper-grid { padding: 14px; }
  .store-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .out-row { grid-template-columns: 96px minmax(0, 1fr) 46px 52px; }
  .out-row span:nth-child(4) { display: none; }
  .project-grid { gap: 14px; }
  /* Filtros em uma linha que rola para o lado, em vez de quatro linhas empilhadas. */
  .filters { flex-wrap: nowrap; margin: 26px -18px 0; overflow-x: auto; padding: 2px 18px 6px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
  .schema-lines span:nth-child(2) { display: none; }  /* capa mais baixa: sobra espaço para a etiqueta */
  .project-grid > .project-card { flex-basis: 86%; }
  .car-nav { display: none; }
  .library-bar { align-items: flex-start; flex-direction: column; }
  .case-card, .case-how, .game-demo { padding: 22px; border-radius: 22px; }
  .credits-view { height: 460px; }
  .credits-copy { padding-inline: 20px; }
  .case { padding-top: 104px; }
  .game-demo iframe { height: 780px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
/* Barra do topo no celular: nas telas mais estreitas a marca vira "GD". */
@media (max-width: 372px) {
  .topbar .brand-word { display: none; }
}
@media (max-width: 400px) {
  .app-stats span:first-child { display: none; }
}

/* Galeria guiada, diagrama e código em telas menores. */
@media (max-width: 1100px) {
  .tour { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tour-steps { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
  .tour-steps label { flex: none; gap: 10px; padding: 8px 14px 8px 8px; border-color: var(--line); background: var(--card); }
  .tour-steps .step-n { width: 30px; height: 30px; font-size: 15px; }
  .tour-tab small { display: none; }
  .tour-tab b { font-size: 15px; white-space: nowrap; }
  .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lane-arrow { display: none; }
  .code-open { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .tour-caption { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
  .lanes { display: flex; gap: 12px; margin-inline: -4px; overflow-x: auto; padding: 4px 4px 10px; scroll-snap-type: x proximity; }
  .lane { flex: 0 0 82%; scroll-snap-align: start; }
  .code-step summary { gap: 12px; padding: 12px 14px; }
  .code-open { padding: 4px 14px 16px; }
  .term.code { font-size: 12px; }
}

@media (max-width: 1100px) {
  .evolution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero-me { width: 118px; height: 118px; }
  .me { border-radius: 24px; box-shadow: 5px 5px 0 var(--orange); }
  .me img { clip-path: inset(-60% 0 0 0 round 0 0 21px 21px); }
  .evolution { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .phone-tour .tour-panel { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
  .case-download { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .phone-tour .tour-panel { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .phone { width: min(260px, 78%); }
  .case-download { padding: 22px; border-radius: 22px; }
}