:root {
  --void:#0e0918; --surface:#1a1624; --panel:#1b1728; --shell:#2c2834; --smoke:#3e3a46;
  --ash:#d1cece; --fog:#9d9797; --silver:#e5e7eb;
  --ember:linear-gradient(30deg, rgb(253,137,37), rgb(255,12,0));
  --electric:linear-gradient(141deg, rgb(7,122,199), rgb(107,33,239));
}
html { background:var(--void); color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:5rem; }
body { background:var(--void); color:var(--ash); font-family:'DM Sans', ui-sans-serif, system-ui, sans-serif; font-weight:400; }
.display { font-weight:300; color:#fff; letter-spacing:-.02em; }
:focus-visible { outline:2px solid #077ac7; outline-offset:3px; box-shadow:0 0 0 5px rgba(107,33,239,.45); border-radius:8px; }

/* Botões */
.btn-ember { background:var(--ember); color:#fff; border-radius:8px; text-shadow:0 1px 2px rgba(0,0,0,.3); transition:filter .2s; }
.btn-ember:hover { filter:brightness(1.12) saturate(1.1); }
.btn-ghost { border:1px solid var(--silver); border-radius:6px; color:#fff; transition:background .2s; }
.btn-ghost:hover { background:rgba(255,255,255,.07); }

/* Superfícies: elevação por cor, sem sombra projetada */
.card { background:var(--surface); border-radius:16px; }
.glow-card { border-radius:24px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -1px 0 0 rgba(255,142,93,.3); }
.panel { background:var(--panel); border-radius:24px; }
.chip { background:rgba(163,163,163,.2); border:1px solid rgba(229,231,235,.35); border-radius:8px; color:#fff; padding:.35rem 1rem; }

/* Links com sublinhado elétrico */
.link-ul { background:var(--electric) left bottom / 0 1px no-repeat; transition:background-size .25s; padding-bottom:2px; }
.link-ul:hover { background-size:100% 1px; color:#fff; }

/* Atmosfera */
.hero-glow { background:radial-gradient(127% 234% at 10% 142%, rgba(217,126,75,.133) 0%, rgba(255,255,255,0) 37%); }
.footer-glow { background:radial-gradient(circle farthest-side at 100% -80%, rgba(175,106,140,.46), rgba(98,65,83,.38) 39%, rgba(0,0,0,0) 55%); }
.hero-bolt {
  opacity:.3;
  animation:bolt-flash 3.5s ease-in-out infinite;
  will-change:filter,opacity;
}
@media (min-width:768px) {
  .hero-bolt { opacity:1; }
}
@keyframes bolt-flash {
  0%, 88%, 100% { filter:brightness(1) drop-shadow(0 0 0 transparent); }
  90% { filter:brightness(2) drop-shadow(0 0 32px rgba(255,80,0,.9)); }
  92% { filter:brightness(.65) drop-shadow(0 0 0 transparent); }
  94% { filter:brightness(1.7) drop-shadow(0 0 22px rgba(253,137,37,.75)); }
  96% { filter:brightness(1) drop-shadow(0 0 0 transparent); }
}

/* Canvas de workflow */
.flow { display:flex; flex-direction:column; align-items:center; }
.node { display:flex; align-items:center; gap:12px; width:100%; background:var(--surface); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:14px 16px; }
.node .ico { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:8px; background:var(--shell); font-size:20px; }
.link { position:relative; flex:none; width:2px; height:36px; background:linear-gradient(180deg,#077ac7,#6b21ef); }
.link::after { content:""; position:absolute; left:50%; top:0; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; box-shadow:0 0 10px #6b21ef; animation:pulse-y 2s linear infinite; }
.flow > .link:nth-child(4)::after { animation-delay:.5s; }
.flow > .link:nth-child(6)::after { animation-delay:1s; }
@keyframes pulse-y { 0%{top:0;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:30px;opacity:0} }
@keyframes pulse-x { 0%{left:0;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{left:56px;opacity:0} }
@media (min-width:768px) {
  .flow { flex-direction:row; }
  .node { flex:1; min-width:0; }
  .link { width:64px; height:2px; background:linear-gradient(90deg,#077ac7,#6b21ef); }
  .link::after { top:50%; left:0; margin:-4px 0 0; animation-name:pulse-x; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .link::after { animation:none; opacity:0; }
  .hero-bolt { animation:none; }
}

/* Páginas legais */
.legal { max-width:46rem; margin:0 auto; padding:4rem 1.25rem 6rem; line-height:1.75; }
.legal h1 { font-weight:300; color:#fff; font-size:clamp(2rem,5vw,3rem); line-height:1.05; letter-spacing:-.02em; }
.legal h2 { font-weight:400; color:#fff; font-size:1.35rem; letter-spacing:-.01em; margin:2.5rem 0 .5rem; }
.legal p, .legal li { color:var(--ash); }
.legal strong { color:#fff; font-weight:500; }
.legal p { margin:.75rem 0; }
.legal ul { list-style:disc; padding-left:1.4rem; margin:.5rem 0; }
.legal a { color:#fff; background:var(--electric) left bottom / 100% 1px no-repeat; padding-bottom:2px; }
.legal .meta { color:var(--fog); margin-top:.75rem; }
.legal .ph { background:rgba(253,137,37,.18); color:#ffd2a8; padding:0 .3rem; border-radius:4px; }