/* ============================================================
   Jonatas Miler — Portfólio · "Cobre & Meia-Noite"
   Immersive dark system: layered midnight + copper, blue & rose
   undertones, glows, animated data-viz.
   ============================================================ */

:root {
  /* ---- layered midnight backgrounds ---- */
  --bg-0: #080d18;   /* deepest */
  --bg-1: #0c1424;   /* page base */
  --bg-2: #111c31;   /* panel */
  --bg-3: #16243d;   /* raised */
  --bg-4: #1d2f4d;   /* hover/raised+ */

  /* ---- ink ---- */
  --ink:   #eef2fa;
  --ink-2: #a7b4cd;
  --ink-3: #6b7894;
  --ink-4: #46536e;

  /* ---- lines ---- */
  --line:   rgba(238, 242, 250, 0.10);
  --line-2: rgba(238, 242, 250, 0.055);
  --glass:  rgba(16, 26, 46, 0.66);

  /* ---- accents: copper primary + undertones (tweakable) ---- */
  --c1: #e6a86d;   /* copper */
  --c2: #f2c79a;   /* copper light */
  --c1-deep: #c47a45;
  --blue: #5b8fd4; /* secondary undertone */
  --rose: #e88aa0; /* tertiary undertone */
  --accent: var(--c1);

  /* glows derived */
  --glow-c: color-mix(in oklch, var(--c1) 60%, transparent);
  --glow-b: color-mix(in oklch, var(--blue) 55%, transparent);
  --grad: linear-gradient(105deg, var(--c1), var(--rose) 70%, var(--blue));
  --grad-cb: linear-gradient(120deg, var(--c1), var(--blue));

  /* ---- type ---- */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Manrope', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- rhythm ---- */
  --d: 1;
  --section-y: calc(120px * var(--d));
  --gutter: clamp(20px, 5vw, 84px);
  --maxw: 1280px;
  --base-size: 17px;
}

:root[data-density="compact"] { --d: 0.72; }
:root[data-density="comfy"]   { --d: 1.22; }

/* alternate palette tones (tweakable) */
:root[data-tone="emerald"] { --c1:#34d399; --c2:#7defc0; --c1-deep:#16a06a; --blue:#38bdf8; --rose:#fbbf6b; }
:root[data-tone="violet"]  { --c1:#a78bfa; --c2:#c9b8ff; --c1-deep:#7c5cf0; --blue:#22d3ee; --rose:#f472b6; }
:root[data-tone="azure"]   { --c1:#5b9df4; --c2:#9cc4ff; --c1-deep:#3b6ea5; --blue:#22d3ee; --rose:#e88aa0; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  background: var(--bg-1);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--base-size);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* fixed background layers: gradient wash + node canvas */
#bg-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.bg-wash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 82% 8%, color-mix(in oklch, var(--c1) 16%, transparent), transparent 70%),
    radial-gradient(50% 45% at 10% 30%, color-mix(in oklch, var(--blue) 14%, transparent), transparent 72%),
    radial-gradient(60% 50% at 50% 110%, color-mix(in oklch, var(--rose) 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 22%, var(--bg-1) 78%, var(--bg-0));
}
main, header.nav, footer.foot { position: relative; z-index: 2; }

::selection { background: var(--c1); color: var(--bg-0); }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c1);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content:""; width: 24px; height: 1px; background: var(--c1); }
.section-label {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance;
}
.section-title .g {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- nav ---------- */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px var(--gutter);
  transition: padding .3s, background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
header.nav.scrolled {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
  padding-top: 11px; padding-bottom: 11px;
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 12px 2px var(--glow-c); }
.brand .role { color: var(--ink-3); font-weight: 500; font-size: 0.7rem; }
nav.links { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
nav.links a {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: .02em;
  color: var(--ink-2); position: relative; padding: 4px 0; white-space: nowrap; transition: color .2s;
}
nav.links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background: var(--grad-cb); transition: width .25s; }
nav.links a:hover, nav.links a.active { color: var(--ink); }
nav.links a:hover::after, nav.links a.active::after { width:100%; }
.nav-cta {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600;
  padding: 9px 16px; border-radius: 100px; white-space: nowrap;
  color: var(--bg-0); background: var(--c1);
  box-shadow: 0 0 0 0 var(--glow-c); transition: box-shadow .25s, transform .15s;
}
.nav-cta:hover { box-shadow: 0 6px 22px -6px var(--glow-c); transform: translateY(-1px); }
.nav-toggle { display:none; }
@media (max-width: 920px) {
  nav.links { display:none; }
  nav.links.open {
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:100%; left:0; right:0;
    background: var(--bg-2); border-bottom:1px solid var(--line);
    padding:18px var(--gutter) 26px; gap:16px;
  }
  .nav-toggle { display:inline-flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
  .nav-toggle span { width:24px; height:2px; background: var(--ink); display:block; border-radius:2px; }
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing:.02em;
  padding: 13px 22px; border-radius: 100px; display:inline-flex; align-items:center; gap:9px;
  cursor:pointer; border:1px solid var(--line); transition: transform .15s, box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--c1); color: var(--bg-0); border-color: transparent; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px var(--glow-c); }
.btn-ghost { background: color-mix(in oklch, var(--ink) 4%, transparent); color: var(--ink); }
.btn-ghost:hover { border-color: var(--c1); color: var(--c1); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: calc(150px * var(--d)); padding-bottom: var(--section-y); }
.hero-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap: clamp(30px,5vw,68px); align-items:center; }
.status-pill {
  display:inline-flex; align-items:center; gap:9px; font-family: var(--mono);
  font-size:0.71rem; letter-spacing:.03em; color: var(--ink);
  background: var(--glass); border:1px solid var(--line); backdrop-filter: blur(8px);
  padding:7px 14px 7px 11px; border-radius:100px; margin-bottom:22px;
}
.status-pill .live { width:8px; height:8px; border-radius:50%; background:#37d399; box-shadow:0 0 0 0 rgba(55,211,153,.6); animation: livePulse 2s infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(55,211,153,.5);} 70%{box-shadow:0 0 0 7px rgba(55,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(55,211,153,0);} }
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 3.7vw, 3.15rem); line-height: 1.05; letter-spacing:-0.025em;
  margin-bottom: 14px; text-wrap: balance;
}
.hero h1 .name { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h1 .lead { color: var(--ink); }
.rotator {
  display:block; margin-top:6px; height:1.3em; overflow:hidden;
  font-family: var(--mono); font-weight:600; font-size: clamp(1.1rem,2vw,1.6rem); color: var(--c1);
}
.rotator .track { display:block; transition: transform .6s cubic-bezier(.7,0,.2,1); }
.rotator .track span { display:block; height:1.3em; line-height:1.3em; white-space:nowrap; }
.rotator .track span::before { content:"› "; color: var(--ink-4); }
.hero-support { margin-top:26px; max-width:none; color: var(--ink-2); font-size:1.04rem; line-height:1.7; }
.hero-support strong { color: var(--ink); font-weight:700; }
.hero-cta { display:flex; gap:13px; margin-top:36px; flex-wrap:wrap; }
.hero-meta { display:flex; gap:20px; margin-top:32px; flex-wrap:wrap; font-family: var(--mono); font-size:0.76rem; color: var(--ink-2); }
.hero-meta a { display:inline-flex; align-items:center; gap:7px; transition: color .2s; }
.hero-meta a:hover { color: var(--c1); }

/* portrait — duotone copper/midnight */
.hero-right { display:flex; justify-content:center; }
.portrait {
  position: relative; aspect-ratio: 4/5; width:100%; max-width: 312px; border-radius: 16px; overflow:hidden;
  background: var(--bg-2); border:1px solid var(--line);
  box-shadow: 0 40px 80px -40px #000, 0 0 70px -30px var(--glow-c);
}
.portrait::after { content:""; position:absolute; inset:0; z-index:4; border-radius:inherit; padding:1px; background: var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; }
.portrait-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; filter: grayscale(1) sepia(0.62) saturate(1.75) hue-rotate(-12deg) contrast(1.07) brightness(1.06); }
/* dual-tone depth: cool blue glow lower-right + bottom vignette (no blend mode — renders everywhere) */
.portrait .duo-hi { position:absolute; inset:0; z-index:2; background: radial-gradient(125% 100% at 82% 112%, color-mix(in oklch, var(--blue) 60%, transparent), transparent 58%); opacity:.5; }
.portrait .duo-sh { position:absolute; inset:0; z-index:3; background: linear-gradient(180deg, rgba(12,20,36,0) 44%, rgba(8,13,24,.62)); }
.portrait .frame-tag { position:absolute; top:12px; left:12px; z-index:5; font-family: var(--mono); font-size:0.56rem; letter-spacing:.14em; text-transform:uppercase; color: var(--c2); }
.portrait .badge {
  position:absolute; bottom:12px; left:12px; right:12px; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono); font-size:0.64rem; color: var(--ink); 
  background: var(--glass); backdrop-filter: blur(8px); border:1px solid var(--line);
  padding:8px 12px; border-radius:10px;
}
.portrait .badge b { color: var(--c1); }
@media (max-width: 880px) { .hero-grid { grid-template-columns:1fr; } .portrait { max-width:330px; order:-1; } }

/* ---------- tech marquee ---------- */
.marquee {
  position: relative; border-block:1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(6px); overflow:hidden; padding-block:16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee .track { display:flex; width:max-content; animation: scrollX 40s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .item { font-family: var(--mono); font-size:0.84rem; color: var(--ink-2); padding:0 24px; display:inline-flex; align-items:center; gap:24px; white-space:nowrap; }
.marquee .item::after { content:"◆"; color: var(--c1); font-size:0.6em; }
@keyframes scrollX { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================
   section scaffold
   ============================================================ */
section.band { position: relative; padding-block: var(--section-y); }
.sec-head { display:grid; grid-template-columns:auto 1fr; gap:16px 26px; align-items:baseline; margin-bottom:52px; }
.sec-head .num { font-family: var(--mono); font-size:0.8rem; color: var(--c1); letter-spacing:.1em; padding-top:9px; }
.sec-head .htext p { margin-top:14px; color: var(--ink-2); max-width:58ch; font-size:1.03rem; }

/* ============================================================
   NÚMEROS — dashboard with animated mini-charts
   ============================================================ */
.numbers { position: relative; padding-block: var(--section-y); }
.numbers .head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:46px; }
.numbers .head h2 { font-family: var(--display); font-weight:500; font-size: clamp(1.7rem,3.4vw,2.7rem); line-height:1.08; letter-spacing:-0.02em; max-width:18ch; }
.numbers .head p { max-width:34ch; color: var(--ink-2); font-size:0.98rem; }
.stat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.stat {
  position: relative; background: var(--bg-2); border:1px solid var(--line);
  border-radius:14px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:10px;
  overflow:hidden; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.stat::before { content:""; position:absolute; inset:0; background: radial-gradient(80% 60% at 100% 0%, color-mix(in oklch,var(--c1) 10%,transparent), transparent 60%); opacity:0; transition:opacity .3s; }
.stat:hover { border-color: color-mix(in oklch,var(--c1) 40%, var(--line)); transform: translateY(-3px); box-shadow: 0 20px 40px -28px #000; }
.stat:hover::before { opacity:1; }
.stat .fig { font-family: var(--display); font-weight:600; font-size: clamp(1.6rem,2.4vw,2.3rem); letter-spacing:-0.02em; line-height:1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .fig .g { background: var(--grad-cb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .fig .unit { font-size:0.5em; color: var(--ink-2); }
.stat .desc { color: var(--ink-2); font-size:0.86rem; line-height:1.4; }
.stat .viz { margin-top:auto; height:42px; }
@media (max-width: 900px){ .stat-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 460px){ .stat-grid { grid-template-columns: 1fr;} }

/* mini-chart primitives (animate when .in) */
.spark { width:100%; height:100%; overflow:visible; }
.spark .ln { fill:none; stroke: var(--c1); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: var(--len,200); stroke-dashoffset: var(--len,200); }
.viz.in .spark .ln { transition: stroke-dashoffset 1.4s cubic-bezier(.4,.7,.3,1); stroke-dashoffset:0; }
.spark .area { fill: url(#areaGrad); opacity:0; }
.viz.in .spark .area { transition: opacity 1s .4s ease; opacity:.5; }
.spark .dotEnd { fill: var(--c2); opacity:0; }
.viz.in .spark .dotEnd { transition: opacity .3s 1.3s; opacity:1; }
.bars { display:flex; align-items:flex-end; gap:5px; height:100%; }
.bars span { flex:1; background: var(--grad-cb); border-radius:3px 3px 0 0; transform:scaleY(0); transform-origin:bottom; opacity:.85; }
.viz.in .bars span { animation: barGrow .7s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes barGrow { to { transform: scaleY(1); } }
.gauge { width:46px; height:46px; }
.gauge circle { fill:none; stroke-width:5; stroke-linecap:round; }
.gauge .track-c { stroke: var(--line); }
.gauge .val-c { stroke: var(--c1); stroke-dasharray: 126; stroke-dashoffset: 126; transform: rotate(-90deg); transform-origin:center; }
.viz.in .gauge .val-c { transition: stroke-dashoffset 1.5s cubic-bezier(.3,.7,.3,1); stroke-dashoffset: var(--off, 8); }
.pkgs { display:flex; gap:8px; align-items:center; height:100%; }
.pkgs .pkg { font-family: var(--mono); font-size:0.64rem; color: var(--c1); border:1px solid color-mix(in oklch,var(--c1) 40%,var(--line)); border-radius:6px; padding:4px 8px; opacity:0; transform: translateY(6px); }
.viz.in .pkgs .pkg { animation: pkgIn .4s ease forwards; }
@keyframes pkgIn { to { opacity:1; transform:none; } }

/* ============================================================
   ARQUITETURA — animated pipeline diagram
   ============================================================ */
.arch { position: relative; padding-block: var(--section-y); }
.arch-stage {
  position: relative; background: var(--bg-2); border:1px solid var(--line); border-radius:18px;
  padding: clamp(26px,4vw,48px); overflow:hidden;
  box-shadow: 0 40px 90px -50px #000;
}
.arch-stage::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 90% at 50% 0%, color-mix(in oklch,var(--c1) 9%,transparent), transparent 70%); }
.arch-flow { position: relative; z-index:2; display:flex; align-items:stretch; gap:0; }
.node {
  flex: 0 0 auto; width: clamp(110px, 16%, 168px);
  background: var(--bg-3); border:1px solid var(--line); border-radius:12px;
  padding:16px 12px; text-align:center; opacity:0; transform: translateY(14px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.arch.in .node { animation: nodeIn .5s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes nodeIn { to { opacity:1; transform:none; } }
.node .ico { width:28px; height:28px; margin-bottom:9px; color: var(--c1); }
.node .nt { font-family: var(--mono); font-size:0.73rem; color: var(--ink); font-weight:500; line-height:1.2; }
.node .ns { font-size:0.64rem; color: var(--ink-3); margin-top:3px; }
.conn { flex:1 1 auto; min-width:18px; align-self:center; height:2px; position:relative; margin:0 -1px; }
.conn .line { position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background-image: repeating-linear-gradient(90deg, color-mix(in oklch,var(--c1) 60%, var(--line)) 0 6px, transparent 6px 12px); }
.arch.in .conn .line { transition: transform .5s ease; transition-delay: calc(.5s + var(--i,0) * .18s); transform:scaleX(1); }
.conn .dot { position:absolute; top:50%; left:0; width:7px; height:7px; border-radius:50%; background: var(--c2); transform: translate(-50%,-50%); box-shadow:0 0 9px 1px var(--glow-c); opacity:0; }
.arch.in .conn .dot { opacity:1; animation: flow 1.7s linear infinite; animation-delay: calc(1s + var(--i,0) * .18s); }
@keyframes flow { from{ left:0; } to{ left:100%; } }
.arch-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; position:relative; z-index:2; }
.arch-tags .at { font-family: var(--mono); font-size:0.7rem; color: var(--ink-2); border:1px solid var(--line); border-radius:100px; padding:6px 13px; display:inline-flex; gap:7px; align-items:center; }
.arch-tags .at b { color: var(--c1); }
@media (max-width: 780px){
  .arch-flow { flex-wrap:wrap; justify-content:center; gap:12px; }
  .node { width: clamp(120px, 40%, 200px); }
  .conn { display:none; }
}

/* ============================================================
   SOBRE
   ============================================================ */
.sobre-grid { display:grid; grid-template-columns:1.4fr 1fr; gap: clamp(36px,5vw,76px); align-items:start; }
.sobre-prose p { font-size:1.12rem; line-height:1.7; color: var(--ink-2); margin-bottom:1.05em; max-width:60ch; }
.sobre-prose p strong { color: var(--ink); font-weight:600; }
.sobre-prose p em { font-style:normal; color: var(--c1); }
.sobre-prose p:first-child { color: var(--ink); font-size:1.2rem; }
.values { border-top:1px solid var(--line); }
.values > .value { border-bottom:1px solid var(--line); padding:20px 0; display:grid; grid-template-columns:auto 1fr; gap:16px; }
.value .vk { font-family: var(--mono); font-size:0.8rem; color: var(--c1); font-weight:700; }
.value h4 { font-family: var(--display); font-weight:500; font-size:1.1rem; margin-bottom:4px; }
.value p { color: var(--ink-2); font-size:0.95rem; line-height:1.5; }
@media (max-width: 820px){ .sobre-grid { grid-template-columns:1fr; } }

/* ============================================================
   EXPERIÊNCIA
   ============================================================ */
.exp-filters { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:40px; }
.chip {
  font-family: var(--mono); font-size:0.74rem; padding:8px 15px; border-radius:100px;
  background: var(--bg-2); border:1px solid var(--line); color: var(--ink-2); cursor:pointer;
  display:inline-flex; gap:7px; align-items:center; transition: all .2s;
}
.chip .ct { color: var(--ink-4); }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.active { background: var(--c1); border-color: var(--c1); color: var(--bg-0); }
.chip.active .ct { color: var(--bg-0); opacity:.6; }
.timeline { display:flex; flex-direction:column; }
.exp { display:grid; grid-template-columns:150px 1fr; gap: clamp(16px,3vw,46px); padding:28px 0; border-top:1px solid var(--line); }
.exp.hide { display:none; }
.exp .when { font-family: var(--mono); font-size:0.8rem; color: var(--ink-2); padding-top:6px; }
.exp .when .now { display:inline-block; margin-top:8px; font-size:0.64rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c1); }
.exp .when .now::before { content:"● "; font-size:0.7em; }
.exp .body { max-width:72ch; }
.exp .titleline { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.exp h3 { font-family: var(--display); font-weight:500; font-size: clamp(1.25rem,2vw,1.55rem); letter-spacing:-0.015em; line-height:1.15; }
.exp .co { color: var(--ink-2); font-size:0.95rem; margin-bottom:13px; }
.exp .co .at { color: var(--c1); }
.badge-own { font-family: var(--mono); font-size:0.58rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c1); border:1px solid color-mix(in oklch,var(--c1) 50%, var(--line)); border-radius:100px; padding:3px 9px; white-space:nowrap; }
.exp .desc { color: var(--ink-2); font-size:1rem; line-height:1.6; }
.exp .desc strong { color: var(--ink); font-weight:600; }
.exp .desc .hl { color: var(--c1); font-weight:600; font-family: var(--mono); font-size:0.92em; }
.why { margin-top:15px; padding:13px 17px; border-left:2px solid var(--c1); background: color-mix(in oklch,var(--c1) 8%, transparent); font-size:0.97rem; color: var(--ink); border-radius:0 8px 8px 0; }
.why b { font-family: var(--mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--c1); display:block; margin-bottom:3px; }
.stack { display:flex; gap:7px; flex-wrap:wrap; margin-top:15px; }
.stack .tag { font-family: var(--mono); font-size:0.69rem; color: var(--ink-2); background: var(--bg-3); border:1px solid var(--line-2); padding:4px 10px; border-radius:6px; }
@media (max-width: 680px){ .exp { grid-template-columns:1fr; gap:6px; } .exp .when { padding-top:0; } }

/* ============================================================
   OPEN SOURCE & PROJETOS
   ============================================================ */
.gh-banner {
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  padding:22px 26px; border:1px solid var(--line); border-radius:16px; margin-bottom:36px;
  background: linear-gradient(120deg, color-mix(in oklch,var(--c1) 9%,transparent), transparent 55%), var(--bg-2);
  position:relative; overflow:hidden;
}
.gh-banner::after { content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; background: radial-gradient(circle, var(--glow-c), transparent 70%); opacity:.4; }
.gh-banner .ghl { display:flex; align-items:center; gap:16px; position:relative; z-index:2; }
.gh-banner svg.ghmark { width:34px; height:34px; color: var(--ink); flex-shrink:0; }
.gh-banner .meta b { font-family: var(--mono); font-size:1.02rem; }
.gh-banner .meta span { display:block; color: var(--ink-2); font-size:0.88rem; margin-top:2px; }
.gh-banner .ghcount { display:flex; gap:26px; flex-wrap:wrap; position:relative; z-index:2; }
.gh-banner .ghcount .c b { font-family: var(--display); font-weight:600; font-size:1.4rem; background: var(--grad-cb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gh-banner .ghcount .c span { display:block; font-family: var(--mono); font-size:0.62rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-3); }
.gh-banner .ghbtn { position:relative; z-index:2; font-family: var(--mono); font-size:0.76rem; font-weight:600; padding:11px 18px; border-radius:100px; background: var(--c1); color: var(--bg-0); transition: box-shadow .2s, transform .15s; }
.gh-banner .ghbtn:hover { transform: translateY(-1px); box-shadow:0 8px 24px -8px var(--glow-c); }

.proj-cat { font-family: var(--mono); font-size:0.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-3); margin:6px 0 20px; display:flex; align-items:center; gap:14px; }
.proj-cat::after { content:""; flex:1; height:1px; background: var(--line); }
.proj-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap:14px; margin-bottom:46px; }
.card {
  position: relative; background: var(--bg-2); border:1px solid var(--line); border-radius:14px;
  padding:24px 22px; display:flex; flex-direction:column; gap:11px; overflow:hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; pointer-events:none; }
.card:hover { transform: translateY(-3px); box-shadow:0 22px 44px -28px #000; }
.card:hover::after { opacity:.8; }
.card .ct-row, .card .toprow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card h4 { font-family: var(--display); font-weight:500; font-size:1.28rem; letter-spacing:-0.015em; line-height:1.1; }
.card .sub { font-family: var(--mono); font-size:0.71rem; letter-spacing:.03em; color: var(--c1); text-transform:uppercase; }
.card p { color: var(--ink-2); font-size:0.94rem; line-height:1.55; flex:1; }
.card p .hl { color: var(--ink); font-weight:600; font-family: var(--mono); font-size:0.9em; }
.card .tags { display:flex; gap:6px; flex-wrap:wrap; }
.card .tags span { font-family: var(--mono); font-size:0.65rem; color: var(--ink-2); border:1px solid var(--line); padding:3px 8px; border-radius:5px; }
.pill { font-family: var(--mono); font-size:0.59rem; letter-spacing:.07em; text-transform:uppercase; padding:3px 9px; border-radius:100px; white-space:nowrap; background: var(--grad-cb); color: var(--bg-0); font-weight:600; }
.os-card .repometa { display:flex; align-items:center; gap:14px; font-family: var(--mono); font-size:0.71rem; color: var(--ink-3); }
.os-card .repometa .lang { display:inline-flex; align-items:center; gap:6px; }
.os-card .repometa .ld { width:9px; height:9px; border-radius:50%; }
.os-card .links { display:flex; gap:16px; }
.os-card .links a { font-family: var(--mono); font-size:0.71rem; color: var(--c1); display:inline-flex; align-items:center; gap:6px; }
.os-card .links a:hover { text-decoration:underline; }
.os-card .links svg { width:13px; height:13px; }
.card .gh { font-family: var(--mono); font-size:0.71rem; color: var(--c1); display:inline-flex; align-items:center; gap:6px; }
.card .gh svg { width:14px; height:14px; }

/* ============================================================
   RECONHECIMENTO / PRÊMIOS
   ============================================================ */
.awards-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap:14px; }
.award {
  position: relative; background: var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:28px 24px; overflow:hidden; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.award::before { content:""; position:absolute; right:-30px; top:-30px; width:150px; height:150px; background: radial-gradient(circle, var(--medal-glow,var(--glow-c)), transparent 70%); opacity:.28; }
.award:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--c1) 35%, var(--line)); box-shadow:0 22px 44px -28px #000; }
.medal {
  position: relative; z-index:2; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-family: var(--display); font-weight:700; font-size:1.1rem; color:#2a1a08;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4);
}
.medal svg { width:26px; height:26px; }
.award.gold   { --medal-glow: rgba(244,201,122,.6); }
.award.gold   .medal { background: linear-gradient(155deg,#fbe0a0,#d99a3e 55%,#b9772f); }
.award.bronze { --medal-glow: rgba(216,160,106,.5); }
.award.bronze .medal { background: linear-gradient(155deg,#e6b487,#b87440 55%,#8a5126); color:#2a1505; }
.award.valor  { --medal-glow: var(--glow-c); }
.award.valor  .medal { background: linear-gradient(155deg, var(--c2), var(--c1-deep)); color: var(--bg-0); }
.award .rank { position:relative; z-index:2; font-family: var(--mono); font-size:0.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.award.gold .rank { color:#f4c97a; }
.award.bronze .rank { color:#e0a572; }
.award.valor .rank { color: var(--c1); }
.award h4 { position:relative; z-index:2; font-family: var(--display); font-weight:500; font-size:1.18rem; line-height:1.2; letter-spacing:-0.015em; margin:6px 0 10px; }
.award .cat { position:relative; z-index:2; color: var(--ink-2); font-size:0.92rem; line-height:1.5; }
.award .meta-row { position:relative; z-index:2; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.award .nota { font-family: var(--mono); font-size:0.72rem; color: var(--ink); background: var(--bg-3); border:1px solid var(--line); padding:5px 11px; border-radius:100px; }
.award .nota b { color: var(--c1); }
.award .ed { font-family: var(--mono); font-size:0.7rem; color: var(--ink-3); }

/* ============================================================
   SKILLS
   ============================================================ */
.skills-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap:24px 40px; }
.skill-group h4 { font-family: var(--mono); font-size:0.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--c1); margin-bottom:13px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.skill-group .pills { display:flex; gap:8px; flex-wrap:wrap; }
.skill-group .pills span { font-size:0.92rem; color: var(--ink); padding:4px 0; }
.skill-group .pills span:not(:last-child)::after { content:"·"; color: var(--ink-4); margin-left:8px; }

/* ============================================================
   LIDERANÇA
   ============================================================ */
.lead-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.lead-cell { background: var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:32px 30px; position:relative; overflow:hidden; transition: border-color .3s; }
.lead-cell:hover { border-color: color-mix(in oklch,var(--c1) 35%, var(--line)); }
.lead-cell .n { font-family: var(--mono); font-size:0.78rem; color: var(--c1); }
.lead-cell h4 { font-family: var(--display); font-weight:500; font-size:1.4rem; letter-spacing:-0.015em; margin:13px 0 11px; line-height:1.1; }
.lead-cell p { color: var(--ink-2); font-size:0.98rem; line-height:1.6; }
.lead-cell p strong { color: var(--ink); font-weight:600; }
@media (max-width: 760px){ .lead-grid { grid-template-columns:1fr; } }

/* ============================================================
   FORMAÇÃO + CERTS
   ============================================================ */
.edu-grid { display:grid; grid-template-columns:1.2fr 1fr; gap: clamp(36px,5vw,70px); align-items:start; }
.edu-item { padding:20px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:8px 20px; }
.edu-item h4 { font-family: var(--display); font-weight:500; font-size:1.14rem; }
.edu-item .yr { font-family: var(--mono); font-size:0.74rem; color: var(--ink-3); white-space:nowrap; padding-top:4px; }
.edu-item .inst { color: var(--c1); font-size:0.9rem; font-family: var(--mono); margin-top:2px; }
.edu-item p { grid-column:1/-1; color: var(--ink-2); font-size:0.94rem; line-height:1.5; }
.certs h4.cap { font-family: var(--mono); font-size:0.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-3); margin-bottom:14px; }
.cert { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); align-items:baseline; }
.cert .tick { color: var(--c1); font-family: var(--mono); font-size:0.8rem; }
.cert .ct { font-size:0.96rem; color: var(--ink); }
.cert .ct b { font-weight:600; }
.cert .ct .src { color: var(--ink-3); font-size:0.84rem; font-family: var(--mono); }
@media (max-width: 820px){ .edu-grid { grid-template-columns:1fr; } }

/* ============================================================
   CONTATO
   ============================================================ */
.contact { position: relative; padding-block: calc(150px * var(--d)); text-align:center; overflow:hidden; }
.contact::before { content:""; position:absolute; left:50%; top:50%; width:760px; height:760px; transform:translate(-50%,-50%); background: radial-gradient(circle, color-mix(in oklch,var(--c1) 14%,transparent), transparent 60%); pointer-events:none; }
.contact .inner { position:relative; z-index:2; }
.contact h2 { font-family: var(--display); font-weight:500; font-size: clamp(2.2rem,5.4vw,4.2rem); line-height:1.04; letter-spacing:-0.03em; margin:22px auto 24px; max-width:18ch; text-wrap:balance; }
.contact h2 .g { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.contact p { color: var(--ink-2); max-width:56ch; margin:0 auto; font-size:1.12rem; line-height:1.6; }
.contact-cta { display:flex; gap:13px; justify-content:center; margin-top:38px; flex-wrap:wrap; }

/* footer */
footer.foot { background: var(--bg-0); border-top:1px solid var(--line); padding:28px var(--gutter); display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; font-family: var(--mono); font-size:0.73rem; color: var(--ink-3); }
footer.foot a { color: var(--ink-2); transition: color .2s; }
footer.foot a:hover { color: var(--c1); }
footer.foot .fl { display:flex; gap:20px; flex-wrap:wrap; }

/* reveal */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
  .marquee .track { animation:none; }
}
/* motion off (tweak) */
:root[data-motion="off"] #bg-canvas { display:none; }
:root[data-motion="off"] .marquee .track { animation:none; }