:root {
  color-scheme: dark;
  --dark: #071126;
  --dark-2: #101d37;
  --white: #ffffff;
  --social-cyan: #12e3de;
  --social-violet: #a378ff;
  --social-muted: #aebbd5;
  --social-cyan-glow: rgba(18,227,222,.09);
  --social-violet-glow: rgba(163,120,255,.11);
  --primary-description: #103844;
  --brand-purple: #5b4397;
  --line: rgba(174,187,213,.2);
  --paper: #f3f5fc;
  --ink: #171229;
  --muted: #675f7d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; color: var(--white); background: radial-gradient(ellipse at 100% 0,var(--social-cyan-glow),transparent 42%),radial-gradient(ellipse at 0 80%,var(--social-violet-glow),transparent 48%),var(--dark); font-family: "DM Sans",sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--social-violet); outline-offset: 5px; }
.bio { width: min(100% - 40px, 540px); margin: auto; padding: 42px 0 24px; }
.brand { display: inline-flex; padding-block: 4px; }
.brand img { display: block; width: 112px; height: auto; }
.eyebrow { margin: 30px 0 13px; color: var(--social-cyan); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font: 600 clamp(34px,7.8vw,46px)/1.08 "Outfit",sans-serif; letter-spacing: -.04em; }
h1 span { color: var(--social-muted); }
.lead { margin: 18px 0 26px; color: var(--social-muted); font-size: 15px; line-height: 1.65; }
.paths { display: grid; gap: 12px; }
.path { display: flex; align-items: center; gap: 16px; padding: 21px; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: transform .18s ease,border-color .18s ease; }
.path-content { min-width: 0; display: grid; gap: 4px; }
.path strong { font: 600 20px/1.2 "Outfit",sans-serif; letter-spacing: -.02em; }
.path-description { color: var(--social-muted); font-size: 13px; line-height: 1.55; }
.arrow { display: block; margin-left: auto; flex: 0 0 24px; width: 24px; height: 24px; }
.path-primary { background: var(--social-cyan); color: var(--dark); border-color: transparent; padding-block: 24px; }
.path-primary strong { font-size: 23px; }
.path-label { margin-bottom: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.path-primary .path-description { color: var(--primary-description); margin-top: 5px; }
.path-site { background: var(--paper); color: var(--ink); border-color: transparent; }
.path-site .path-description { color: var(--muted); }
.path-icon { flex: 0 0 36px; color: var(--brand-purple); }
.path-icon svg { display: block; width: 32px; height: 32px; }
.path-founder { background: var(--dark-2); }
.portrait { flex: 0 0 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--dark); }
.portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.36); }
.context { margin-top: 26px; padding: 0 2px; color: var(--social-muted); font-size: 13px; }
.context p { margin: 0; }
.context strong { color: var(--white); font-weight: 500; }
.context .demo-note { margin-top: 14px; font-size: 12px; line-height: 1.65; }
footer { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; color: var(--social-muted); font-size: 11px; }
footer a { text-underline-offset: 4px; }
@media (hover:hover) { .path:hover { transform: translateY(-2px); border-color: var(--social-violet); } }
@media (min-width: 800px) { .bio { padding-top: 54px; padding-bottom: 34px; } }
@media (max-width: 360px) { .bio { width: calc(100% - 32px); padding-top: 28px; } .path { gap: 12px; padding: 18px; } .path-primary strong { font-size: 21px; } .path strong { overflow-wrap: break-word; } .path-icon { flex-basis: 28px; } .portrait { flex-basis: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .path { transition: none; } }

/* Perfis oficiais: ícones vetoriais e rótulos visíveis. */
.social-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.social-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: 13px; }
.social-links svg { width: 18px; height: 18px; flex: 0 0 18px; }
.social-links a:hover { color: var(--social-cyan); }
.social-links a:focus-visible { outline: 2px solid var(--social-cyan); outline-offset: 4px; border-radius: 3px; }

footer { flex-direction: column; gap: 12px; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }