/* ==========================================================
   Portfólio Endil Igor — v2 (preto-grafite)
   Cores: altere aqui para mudar o site inteiro
   ========================================================== */
:root {
  --ink: #0c0c0d;        /* fundo */
  --panel: #121213;      /* blocos */
  --panel-2: #101011;    /* blocos mais escuros */
  --panel-3: #141415;
  --line: #26262a;       /* bordas */
  --line-2: #1f1f22;     /* bordas sutis */
  --paper: #ededee;      /* texto principal */
  --mute: #9a9aa1;       /* texto secundário */
  --mute-2: #8f8f96;
  --mute-3: #5e5e65;
  --body-txt: #b9b9bf;
  --orange: #5eff32;     /* destaque */
  --orange-2: #1beb00;
  --ok: #6fd3a0;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
::selection { background: var(--orange); color: var(--ink); }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--orange); color: var(--ink); padding: 8px 14px; border-radius: 6px; font-weight: 700;
}
.skip:focus { left: 12px; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes packet {
  0% { top: -4px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 211, 160, .45); }
  50% { box-shadow: 0 0 0 6px rgba(111, 211, 160, 0); }
}

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 14px; z-index: 50;
  display: flex; justify-content: center;
  padding: 0 16px;
}
.nav-inner {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 18px;
  background: rgba(20, 20, 21, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  max-width: 100%; overflow-x: auto;
}
.logo {
  font-weight: 800; font-size: 19px; text-decoration: none;
  font-variation-settings: "wdth" 120; letter-spacing: -.02em;
  margin-right: 14px; white-space: nowrap;
}
.logo span { color: var(--orange); }
.menu { display: flex; gap: 2px; align-items: center; }
.menu a {
  text-decoration: none; color: var(--mute); font-weight: 500; font-size: 14px;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; transition: color .15s, background .15s;
}
.menu a:hover { color: var(--paper); background: var(--panel-3); }
.menu .menu-cta {
  color: var(--ink); background: var(--paper); font-weight: 700; padding: 7px 16px; margin-left: 6px;
}
.menu .menu-cta:hover { background: var(--orange); color: var(--ink); }

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 14px 22px; border-radius: 12px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn-main { background: var(--orange); color: var(--ink); }
.btn-main:hover { background: var(--orange-2); }
.btn-ghost { border-color: var(--line); color: var(--paper); background: var(--panel-3); }
.btn-ghost:hover { border-color: var(--mute-3); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--orange); color: var(--ink); }

/* ---------- HERO ---------- */
.hero-sec { position: relative; padding: 88px 0 40px; }
.hero-grid-bg {
  position: absolute; inset: -80px 0 0 0;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 56px; align-items: center;
}
.who {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-3); margin-bottom: 32px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}
.avatar-txt {
  width: 32px; height: 32px; border-radius: 50%; background: var(--panel-3);
  display: grid; place-items: center; font-weight: 800; color: var(--orange); font-size: 13px;
}
.who-role { font-size: 14px; font-weight: 600; }
.who-sep { width: 1px; height: 14px; background: var(--line); }
.who-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulse 2.4s ease-in-out infinite; }

h1.title {
  font-size: clamp(60px, 9.5vw, 128px); font-weight: 800;
  font-variation-settings: "wdth" 125; letter-spacing: -.045em; line-height: .88;
  margin-bottom: 28px;
}
h1.title .dim { color: var(--mute-3); }
h1.title .accent { color: var(--orange); }

.lead { font-size: 19px; color: var(--body-txt); max-width: 30em; margin-bottom: 32px; }
.lead b { color: var(--paper); font-weight: 400; }

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Console */
.console {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  font-family: var(--mono); font-size: 13.5px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
.console-top {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--line-2); background: var(--panel-3);
}
.console-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: inline-block; }
.console-title { flex: 1; text-align: center; color: var(--mute-3); font-size: 12px; }
.resend {
  font-family: inherit; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--mute); border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 10px; cursor: pointer;
}
.resend:hover { color: var(--paper); border-color: var(--mute-3); }

.console-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.console-tab {
  font-family: inherit; font-size: 12.5px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--mute-3); padding: 6px 10px 10px; cursor: pointer; white-space: nowrap;
}
.console-tab.is-on { color: var(--paper); border-bottom-color: var(--orange); }

.console-req { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; font-size: 12.5px; }
.method { color: var(--ink); background: var(--ok); font-weight: 600; padding: 1px 7px; border-radius: 5px; font-size: 11.5px; }
.path { color: var(--paper); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-ok { color: var(--ok); font-weight: 600; }
.ms { color: var(--mute-3); }

.console-body {
  margin: 0; padding: 12px 18px 22px; min-height: 268px;
  color: var(--body-txt); white-space: pre-wrap; word-break: break-word; line-height: 1.75; font-family: inherit;
}
.console-body .k { color: var(--orange-2); }
.console-body .s { color: var(--paper); }
.console-body .n { color: var(--ok); }
.caret { display: inline-block; width: 8px; height: 1.1em; background: var(--orange); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }

/* ---------- NÚMEROS ---------- */
.stats {
  position: relative; width: min(var(--wrap), 100% - 40px); margin: 72px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); overflow: hidden;
}
.stats div { padding: 22px 24px; border-right: 1px solid var(--line-2); }
.stats div:last-child { border-right: 0; }
.stats b {
  display: block; font-size: 40px; font-weight: 800; line-height: 1;
  font-variation-settings: "wdth" 115; letter-spacing: -.02em; margin-bottom: 6px;
}
.stats span { color: var(--mute-2); font-size: 14px; }

/* ---------- SEÇÕES ---------- */
section[id] { width: min(var(--wrap), 100% - 40px); margin: 96px auto 0; }
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--orange); margin-bottom: 12px; }
.sec-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 36px;
}
.sec-title { font-size: clamp(40px, 5.5vw, 64px); font-weight: 800; font-variation-settings: "wdth" 120; letter-spacing: -.035em; }
.sec-sub { color: var(--mute-2); max-width: 26em; }

/* Destaque */
.featured {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 56px;
}
.featured-info { padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.featured-tags { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12.5px; }
.badge-destaque { color: var(--ink); background: var(--orange); padding: 2px 8px; border-radius: 5px; font-weight: 600; }
.featured-tags .year { color: var(--mute-2); }
.featured h3 { font-size: clamp(36px, 4vw, 48px); font-weight: 800; font-variation-settings: "wdth" 118; letter-spacing: -.03em; }
.featured-info > p { color: var(--body-txt); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  font-family: var(--mono); font-size: 12px; color: var(--body-txt);
  background: var(--panel-3); border: 1px solid var(--line); padding: 3px 9px; border-radius: 6px;
}
.featured .btn-light { align-self: flex-start; margin-top: auto; }

.arch {
  margin: 0; padding: 40px; background: var(--panel-2); border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column; justify-content: center;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 18px 18px;
}
.arch-node { background: var(--panel-3); border: 1px solid #2e2e32; border-radius: 12px; padding: 14px 16px; }
.arch-node b { display: block; font-size: 16px; }
.arch-node span { font-family: var(--mono); font-size: 12.5px; color: var(--mute-2); }
.arch-db { border-color: var(--orange); }
.arch-link {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 0 0 0 24px; height: 56px;
}
.arch-link .rail {
  position: relative; width: 2px; height: 100%;
  background: repeating-linear-gradient(to bottom, #3a3a3f 0 4px, transparent 4px 8px);
}
.arch-link .packet {
  position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 10px var(--orange);
  animation: packet 2.2s ease-in-out infinite;
}
.arch-link .rail-2 .packet { animation-delay: 1.1s; }
.arch-link span:last-child { font-family: var(--mono); font-size: 12px; color: var(--mute-2); }
.arch figcaption { margin-top: 16px; font-size: 13.5px; color: var(--mute-2); }

/* Controles de projetos */
.proj-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 14px; font-weight: 600;
  background: var(--panel); color: var(--mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.filter .count { font-family: var(--mono); font-size: 11.5px; opacity: .6; }
.filter:hover { color: var(--paper); }
.filter.is-on { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.view-toggle { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.view-btn {
  font-family: var(--mono); font-size: 12px; background: transparent; color: var(--mute-3);
  border: 0; border-radius: 7px; padding: 6px 12px; cursor: pointer;
}
.view-btn.is-on { background: #232326; color: var(--paper); }

/* Lista de projetos */
.proj-list { border-top: 1px solid var(--line-2); }
.proj-list li { border-bottom: 1px solid var(--line-2); }
.proj-list a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 20px; align-items: start;
  padding: 22px 12px; text-decoration: none; border-radius: 12px; transition: background .15s;
}
.proj-list a:hover { background: var(--panel-3); }
.proj-num { font-family: var(--mono); font-size: 13px; color: var(--mute-3); padding-top: 4px; }
.proj-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.proj-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.proj-head h3 { font-size: 22px; font-weight: 700; font-variation-settings: "wdth" 108; letter-spacing: -.01em; }
.proj-meta { font-family: var(--mono); font-size: 12px; color: var(--mute-2); }
.proj-live {
  font-family: var(--mono); font-size: 11.5px; color: var(--ok);
  border: 1px solid rgba(111, 211, 160, .35); padding: 0 7px; border-radius: 5px;
}
.proj-desc { color: #a5a5ab; font-size: 15px; line-height: 1.55; max-width: 44em; }
.proj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.proj-chips li { font-family: var(--mono); font-size: 11.5px; color: var(--mute); background: #161618; border: 1px solid #232326; padding: 2px 8px; border-radius: 5px; }
.proj-arrow { font-size: 18px; color: var(--orange); padding-top: 2px; }

/* Grade de projetos */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  border: 1px solid #232326; border-radius: 16px; background: var(--panel);
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.card:hover { border-color: #3a3a3f; transform: translateY(-2px); }
.card-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--mute-2); }
.card-top .arrow { color: var(--orange); }
.card h3 { font-size: 21px; font-weight: 700; font-variation-settings: "wdth" 108; }
.card > p { color: #a5a5ab; font-size: 15px; line-height: 1.55; flex: 1; }
.card .chips li { background: #18181a; border-color: var(--line); }

.empty { color: var(--mute-2); padding: 24px 0; }
[hidden] { display: none !important; }

/* Desafios */
.challenges-wrap { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px; align-items: start; }
.challenges h3 { font-size: 28px; font-weight: 800; font-variation-settings: "wdth" 112; letter-spacing: -.02em; margin-bottom: 10px; }
.challenges > p { color: var(--mute-2); margin-bottom: 24px; max-width: 24em; }
.challenges-list { display: grid; gap: 8px; }
.challenges-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.challenges-list a:hover { border-color: #3a3a3f; background: var(--panel-3); }
.challenges-list .c-num { font-family: var(--mono); font-size: 12px; color: var(--mute-3); }
.challenges-list b { font-size: 16px; display: block; }
.challenges-list .c-desc { color: var(--mute-2); font-size: 14px; }
.challenges-list .c-go { font-family: var(--mono); font-size: 12px; color: var(--orange); }

/* Trajetória */
.trail-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 48px; align-items: start; }
.trail-sticky { position: sticky; top: 110px; }
.trail-sticky .sec-sub { color: var(--mute-2); }
.trail { position: relative; min-width: 0; }
.trail-line { position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.trail li { position: relative; padding: 0 0 36px 36px; }
.trail-dot { position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid var(--mute-3); }
.trail li.now .trail-dot { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 5px rgba(255, 140, 50, .2); }
.trail time { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--mute-2); margin-bottom: 6px; }
.trail li.now time { color: var(--orange); }
.trail h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.trail p { color: #a5a5ab; font-size: 15.5px; max-width: 38em; }

/* Stack */
.stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.stack-card { padding: 24px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); }
.stack-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.stack-card h3 { font-size: 17px; font-weight: 700; }
.stack-card .count { font-family: var(--mono); font-size: 12px; color: var(--mute-3); }
.stack-card ul { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-card li { font-size: 13.5px; color: #cfcfd4; background: #18181a; border: 1px solid var(--line); padding: 4px 10px; border-radius: 8px; }

/* Contato */
.contact-box {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 28px; background: var(--panel);
  padding: clamp(32px, 6vw, 72px);
}
.contact-glow {
  position: absolute; right: -120px; top: -160px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, var(--orange) 0%, transparent 65%); opacity: .14; pointer-events: none;
}
.contact-box .eyebrow, .contact-box h2, .contact-box p, .contact-links { position: relative; }
.contact-box h2 {
  font-size: clamp(48px, 8vw, 104px); font-weight: 800; font-variation-settings: "wdth" 125;
  letter-spacing: -.045em; line-height: .92; margin-bottom: 22px;
}
.contact-box p { font-size: 19px; color: var(--body-txt); max-width: 32em; margin-bottom: 36px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.email-group { display: inline-flex; align-items: stretch; border-radius: 12px; overflow: hidden; border: 1px solid #3a3a3f; }
.email-group a {
  display: inline-flex; align-items: center; padding: 14px 20px; font-weight: 700; font-size: 15px;
  text-decoration: none; background: var(--paper); color: var(--ink);
}
.email-group a:hover { background: #ffffff; }
.copy-btn {
  font-family: var(--mono); font-size: 12.5px; padding: 0 16px; border: 0; background: #1a1a1c;
  color: var(--body-txt); cursor: pointer; min-width: 96px;
}
.copy-btn:hover { background: #222225; }
.copy-btn.is-copied { color: var(--ok); }

/* Rodapé */
.foot { width: min(var(--wrap), 100% - 40px); margin: 64px auto 0; padding: 28px 0 40px; border-top: 1px solid var(--line-2); color: var(--mute-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.foot-made { font-family: var(--mono); font-size: 12.5px; color: var(--mute-3); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--paper); }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  section[id] { margin-top: 72px; }
  .stats div { padding: 18px 18px; }
  .featured-info { padding: 28px; }
  .arch { padding: 28px; }
  .trail-sticky { position: static; }
  .contact-box { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}