/* Morth Labs: cores, fontes e símbolo seguem o guia de identidade (morth-labs/morth-labs.html). */
:root {
  --carbono: #0d1014;
  --giz: #f2f1ea;
  --lima: #9ee05a;
  --lima-tinta: #3f7a14;
  --bg: #0d1014;
  --bg-2: #141920;
  --fg: #f2f1ea;
  --muted: #9aa2ae;
  --line: #262d36;
  --accent: #9ee05a;
  --font-mark: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f1ea; --bg-2: #e9e8df; --fg: #0d1014; --muted: #5b636e; --line: #d6d4c9; --accent: #3f7a14;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f2f1ea; --bg-2: #e9e8df; --fg: #0d1014; --muted: #5b636e; --line: #d6d4c9; --accent: #3f7a14;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.6 var(--font-body);
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 960px; margin: 0 auto; }

/* Símbolo: anel no traço da cor do texto, olhos sempre em lima (o único toque de cor). */
.ring { fill: none; stroke: currentColor; }
.eye { fill: var(--lima); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .eye { fill: var(--lima-tinta); } }
:root[data-theme="light"] .eye { fill: var(--lima-tinta); }
.blink { transform-box: fill-box; transform-origin: center; animation: blink 5.5s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 20px; border-bottom: 1px solid var(--line);
}
.top .logo { display: block; width: 168px; color: var(--fg); }
.top .logo svg { display: block; width: 100%; height: auto; }
.lang { font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--muted); text-decoration: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; }

.label { font: 600 0.72rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.label b { color: var(--accent); font-weight: 600; }

.hero { display: grid; gap: 20px; padding-block: clamp(56px, 12vw, 120px) clamp(48px, 9vw, 96px); }
.hero h1 {
  font: 800 clamp(2.2rem, 7vw, 4.2rem)/1.05 var(--font-mark);
  letter-spacing: -0.02em; margin: 0; max-width: 14ch; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 1.1rem; }

section { padding-block: 40px; border-top: 1px solid var(--line); display: grid; gap: 24px; }
section h2 { font: 800 clamp(1.4rem, 3.4vw, 2rem)/1.15 var(--font-mark); margin: 0; letter-spacing: -0.01em; }

.exps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.exp { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.exp .code { font: 600 0.8rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--accent); }
.exp h3 { font: 800 1.5rem/1.1 var(--font-mark); margin: 0; }
.exp p { margin: 0; color: var(--muted); }
.exp .status { font: 500 0.78rem/1.4 var(--font-mono); color: var(--muted); }
.exp.soon { border-style: dashed; background: transparent; }
.exp.soon h3 { color: var(--muted); }

.contact a { font: 600 clamp(1.1rem, 3vw, 1.4rem)/1.3 var(--font-mark); }
footer { padding-block: 32px 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* Definições do símbolo (fora do fluxo; sem style inline por causa do CSP). */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Página "em construção": símbolo grande piscando, conteúdo centralizado na altura da tela. */
.soon-page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.soon-page .hero { align-content: center; }
.soon-mark { width: 88px; height: auto; color: var(--fg); }