/* ==========================================================================
   RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  transition: background .4s ease, color .4s ease;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; }
h1, h2, h3, p { margin: 0; }

.container {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   TOKENS — HUB (neutro)
========================================================================== */
:root, [data-theme="hub"] {
  --bg: #0B0C10;
  --text: #F5F6F7;
  --muted: #9AA0AA;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================================================
   TOKENS — SOFTWARE (Cyberpunk / IDE)
========================================================================== */
[data-theme="software"] {
  --bg: #0A0E17;
  --bg-alt: #0D1220;
  --surface: #10162A;
  --border: #1E2740;
  --text: #E6E9F2;
  --muted: #7C87A3;
  --accent: #10B981;
  --accent-2: #8B5CF6;
  --accent-contrast: #06120C;
  --font-body: 'JetBrains Mono', monospace;
  --font-display: 'Fira Code', monospace;
  --font-ui: 'Plus Jakarta Sans', sans-serif;
  --radius: 6px;
}

/* ==========================================================================
   TOKENS — INFRA (NOC / Enterprise)
========================================================================== */
[data-theme="infra"] {
  --bg: #0F172A;
  --bg-alt: #111C33;
  --surface: #16223B;
  --border: #223252;
  --text: #E7ECF5;
  --muted: #8494B0;
  --accent: #0EA5E9;
  --accent-ok: #22C55E;
  --accent-warn: #F59E0B;
  --accent-contrast: #04101C;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --radius: 10px;
}

/* ==========================================================================
   TOKENS — DATA / BI (Fintech premium)
========================================================================== */
[data-theme="data"] {
  --bg: #111827;
  --bg-alt: #151E30;
  --surface: #1A2436;
  --border: #2A3651;
  --text: #EDF0F7;
  --muted: #8B93A7;
  --accent: #2563EB;
  --accent-2: #F59E0B;
  --accent-contrast: #FFFFFF;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --radius: 14px;
}

/* ==========================================================================
   VIEW SWITCHING
========================================================================== */
body[data-view="hub"] .profile,
body[data-view="hub"] .app-header { display: none; }
body[data-view="profile"] .hub { display: none; }
.profile[hidden] { display: none !important; }

/* ==========================================================================
   HUB
========================================================================== */
.hub {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(16,185,129,.08), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(37,99,235,.10), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(14,165,233,.08), transparent 45%),
    #0B0C10;
}
.hub__noise {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.hub__intro { text-align: center; max-width: 640px; margin-bottom: 3.5rem; position: relative; z-index: 1; animation: fadeUp .8s ease both; }
.hub__eyebrow {
  display: inline-block; font-family: var(--font-display);
  letter-spacing: .18em; text-transform: uppercase; font-size: .72rem;
  color: #9AA0AA; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,.12);
  padding: .35rem .9rem; border-radius: 999px;
}
.hub__title {
  font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05;
  background: linear-gradient(120deg, #fff 20%, #9AA0AA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hub__subtitle { margin-top: 1rem; color: #9AA0AA; font-size: 1.05rem; line-height: 1.6; }

.hub__cards {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(240px, 320px));
  gap: 1.5rem; width: 100%; justify-content: center;
}
.hub-card {
  position: relative; text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  padding: 2rem 1.75rem 1.75rem;
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
  animation: fadeUp .8s ease both;
}
.hub-card:nth-child(2) { animation-delay: .08s; }
.hub-card:nth-child(3) { animation-delay: .16s; }
.hub-card:hover, .hub-card:focus-visible {
  transform: translateY(-8px);
  background: rgba(255,255,255,.05);
}
.hub-card--software:hover { border-color: #10B981; box-shadow: 0 20px 60px -20px rgba(16,185,129,.45); }
.hub-card--infra:hover { border-color: #0EA5E9; box-shadow: 0 20px 60px -20px rgba(14,165,233,.45); }
.hub-card--data:hover { border-color: #F59E0B; box-shadow: 0 20px 60px -20px rgba(245,158,11,.4); }

.hub-card__glyph {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(255,255,255,.06);
}
.hub-card--software .hub-card__glyph { color: #10B981; }
.hub-card--infra .hub-card__glyph { color: #0EA5E9; }
.hub-card--data .hub-card__glyph { color: #F59E0B; }
.hub-card__glyph svg { width: 26px; height: 26px; }

.hub-card__index { position: absolute; top: 1.75rem; right: 1.75rem; font-family: 'Fira Code', monospace; color: rgba(255,255,255,.25); font-size: .85rem; }
.hub-card__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: #F5F6F7; }
.hub-card__desc { color: #9AA0AA; font-size: .92rem; line-height: 1.55; }
.hub-card__cta { margin-top: auto; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; color: #F5F6F7; }
.hub-card--software .hub-card__cta i,
.hub-card--infra .hub-card__cta i,
.hub-card--data .hub-card__cta i { transition: transform .25s ease; }
.hub-card:hover .hub-card__cta i { transform: translateX(4px); }

.hub__footnote { margin-top: 2.5rem; color: rgba(255,255,255,.35); font-size: .85rem; position: relative; z-index: 1; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 880px) {
  .hub__cards { grid-template-columns: 1fr; width: min(420px, 100%); }
}

/* ==========================================================================
   APP HEADER (fixo — trocar perfil)
========================================================================== */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.app-header__inner {
  width: min(1200px, 100% - 3rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .9rem 0;
}
.app-header__logo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; border: 1.5px solid var(--accent); color: var(--accent);
  flex-shrink: 0;
}
.app-header__nav { display: flex; gap: 1.6rem; margin-inline: auto; }
.app-header__nav a {
  font-size: .9rem; font-weight: 500; color: var(--muted);
  transition: color .25s ease; position: relative; padding: .25rem 0;
}
.app-header__nav a:hover { color: var(--text); }
.app-header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--accent); transition: width .25s ease;
}
.app-header__nav a:hover::after { width: 100%; }

.app-header__actions { display: flex; align-items: center; gap: .75rem; }
.app-header__burger { display: none; flex-direction: column; gap: 5px; width: 28px; }
.app-header__burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem; border-radius: var(--radius, 8px);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--ghost { border: 1px solid var(--border); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--switch { background: var(--accent); color: var(--accent-contrast); }
.btn--switch:hover { filter: brightness(1.1); box-shadow: 0 8px 24px -8px var(--accent); }

@media (max-width: 900px) {
  .app-header__nav { display: none; }
  .app-header__actions .btn span { display: none; }
  .app-header__burger { display: flex; }
}

/* ==========================================================================
   SHARED SECTION LAYOUT
========================================================================== */
.section { padding: 5.5rem 0; }
.section--alt { background: var(--bg-alt); }
.section__title {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700; margin-bottom: 2.5rem; display: flex; align-items: baseline; gap: .6rem;
}
.section__tag { color: var(--accent); font-family: 'Fira Code', 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600; }

.about-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
.about-text { color: var(--muted); font-size: 1.02rem; line-height: 1.75; }
.about-stats { display: flex; flex-direction: column; gap: 1.2rem; border-left: 2px solid var(--border); padding-left: 1.5rem; }
.about-stats li { display: flex; flex-direction: column; }
.about-stats strong { font-family: var(--font-display); font-size: 1.8rem; color: var(--accent); font-weight: 800; }
.about-stats span { color: var(--muted); font-size: .85rem; }

@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }

.badge-grid { display: flex; flex-wrap: wrap; gap: .8rem; }
.badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 500; color: var(--text);
  transition: border-color .25s ease, transform .25s ease;
}
.badge i { color: var(--accent); }
.badge:hover { border-color: var(--accent); transform: translateY(-3px); }

.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.tag { font-size: .72rem; font-weight: 600; padding: .3rem .65rem; border-radius: 6px; background: var(--bg-alt, var(--surface)); border: 1px solid var(--border); color: var(--muted); }

.link-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--accent); margin-right: 1.2rem; }
.link-btn:hover { text-decoration: underline; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.course-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem;
  transition: transform .25s ease, border-color .25s ease;
}
.course-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.course-card__icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 1.05rem; }
.course-card__title { font-size: 1.02rem; font-weight: 700; line-height: 1.35; font-family: var(--font-ui, var(--font-display)); }
.course-card__institution { color: var(--muted); font-size: .85rem; }
.course-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--muted); }
.status { font-weight: 700; padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; }
.status--completed { background: color-mix(in srgb, #22C55E 20%, transparent); color: #4ADE80; }
.status--progress { background: color-mix(in srgb, #F59E0B 20%, transparent); color: #FBBF24; }

.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: flex; flex-direction: column; gap: .4rem; }
.form-row label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.form-row input, .form-row textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: .75rem .9rem; color: var(--text); resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.form-row.has-error input, .form-row.has-error textarea { border-color: #EF4444; }
.form-error { min-height: 1rem; font-size: .75rem; color: #F87171; }
.form-success { color: #4ADE80; font-size: .88rem; display: flex; align-items: center; gap: .5rem; }

.contact-links { display: flex; flex-direction: column; gap: 1rem; }
.contact-links a {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; border-radius: var(--radius, 10px);
  background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: .92rem;
  transition: border-color .25s ease, transform .25s ease;
}
.contact-links a i { color: var(--accent); font-size: 1.1rem; width: 20px; text-align: center; }
.contact-links a:hover { border-color: var(--accent); transform: translateX(4px); }

.footer { padding: 2rem 0; border-top: 1px solid var(--border); }
.footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .82rem; color: var(--muted); }

.hero { padding: 7rem 0 5rem; position: relative; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow { font-family: var(--font-display); color: var(--accent); font-weight: 600; letter-spacing: .05em; margin-bottom: .8rem; }
.hero__title { font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; }
.hero__lead-large { font-size: 1.2rem; font-weight: 600; color: var(--accent); margin-top: .6rem; }
.hero__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-top: 1rem; max-width: 620px; }
.hero__cta-group { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.btn--primary-software { background: var(--accent); color: #06120C; }
.btn--outline-software { border: 1px solid var(--accent); color: var(--accent); }
.btn--primary-infra { background: var(--accent); color: #04101C; }
.btn--outline-infra { border: 1px solid var(--accent); color: var(--accent); }
.btn--primary-data { background: var(--accent); color: #fff; }
.btn--outline-data { border: 1px solid var(--accent); color: var(--accent); }
.btn--primary-software:hover, .btn--primary-infra:hover, .btn--primary-data:hover { filter: brightness(1.08); box-shadow: 0 10px 30px -10px var(--accent); }
.btn--outline-software:hover, .btn--outline-infra:hover, .btn--outline-data:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ==========================================================================
   SOFTWARE THEME — specifics
========================================================================== */
.hero--software { background: var(--bg); }
.hero__bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(16,185,129,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,185,129,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 30% 20%, black, transparent 70%);
}
.cursor-blink { color: var(--accent); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__typewriter { font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--accent-2); margin-top: .8rem; min-height: 2.2rem; }
.typewriter-caret { animation: blink .9s step-end infinite; }

.terminal {
  margin-top: 3rem; max-width: 640px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: #060911;
  box-shadow: 0 30px 80px -30px rgba(16,185,129,.25);
}
.terminal__bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: #0D1220; border-bottom: 1px solid var(--border); }
.terminal__dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal__dot--red { background: #FF5F56; } .terminal__dot--yellow { background: #FFBD2E; } .terminal__dot--green { background: #27C93F; }
.terminal__title { margin-left: .5rem; font-size: .75rem; color: var(--muted); font-family: var(--font-display); }
.terminal__body { padding: 1rem 1.1rem; min-height: 130px; max-height: 230px; overflow-y: auto; font-size: .85rem; line-height: 1.7; color: #C7CEDB; }
.terminal__body p { margin: .2rem 0; }
.terminal__body .tk { color: var(--accent); font-weight: 700; }
.terminal__body .cmd-echo { color: var(--accent-2); }
.terminal__input-row { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-top: 1px solid var(--border); }
.terminal__prompt { color: var(--accent); font-size: .85rem; white-space: nowrap; }
.terminal__input { flex: 1; background: transparent; border: none; color: var(--text); font-family: var(--font-body); font-size: .85rem; }
.terminal__input:focus { outline: none; }

.window-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: transform .25s ease, border-color .25s ease; }
.window-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.window-card__bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.window-card__dot { width: 10px; height: 10px; border-radius: 50%; }
.window-card__dot--red { background: #FF5F56; } .window-card__dot--yellow { background: #FFBD2E; } .window-card__dot--green { background: #27C93F; }
.window-card__filename { margin-left: .4rem; font-size: .72rem; color: var(--muted); font-family: var(--font-display); }
.window-card__body { padding: 1.4rem; }
.window-card__body h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .6rem; }
.window-card__body p { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.window-card__actions { display: flex; }

/* ==========================================================================
   INFRA THEME — specifics
========================================================================== */
.hero--infra { background: linear-gradient(180deg, var(--bg), var(--bg-alt)); }
.status-pill {
  display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 1.3rem;
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.status-dot--online { background: var(--accent-ok); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulseGreen 2s infinite; }
.status-dot--warning { background: var(--accent-warn); box-shadow: 0 0 0 0 rgba(245,158,11,.6); animation: pulseOrange 2s infinite; }
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes pulseOrange { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }

.noc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; max-width: 720px; }
.noc-metric { display: flex; flex-direction: column; gap: .5rem; }
.noc-metric__label { font-size: .78rem; color: var(--muted); font-weight: 600; }
.noc-bar { height: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.noc-bar__fill { height: 100%; width: 0; border-radius: 999px; animation: growBar 1.4s ease forwards .3s; }
.noc-bar__fill--green { background: var(--accent-ok); }
.noc-bar__fill--cyan { background: var(--accent); }
.noc-bar__fill--orange { background: var(--accent-warn); }
@keyframes growBar { to { width: var(--pct); } }
.noc-metric__value { font-size: .78rem; color: var(--text); font-weight: 700; }

@media (max-width: 700px) { .noc-strip { grid-template-columns: repeat(2, 1fr); } }

.rack { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.rack__unit {
  display: flex; align-items: center; gap: .9rem;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 1rem 1.1rem; font-weight: 600; font-size: .9rem; border-radius: 6px;
  transition: background .2s ease;
}
.rack__unit:hover { background: var(--bg-alt); }
.rack__unit i { color: var(--accent); font-size: 1.1rem; width: 22px; text-align: center; }

.noc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: transform .25s ease, border-color .25s ease; }
.noc-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.noc-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; color: var(--accent); font-size: 1.4rem; }
.noc-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .6rem; }
.noc-card p { color: var(--muted); font-size: .88rem; line-height: 1.6; }

/* ==========================================================================
   DATA/BI THEME — specifics
========================================================================== */
.hero--data { background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%), var(--bg); }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; max-width: 720px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; text-align: left; }
.kpi-card__value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--accent); }
.kpi-card__suffix { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--accent); }
.kpi-card__label { display: block; margin-top: .3rem; font-size: .78rem; color: var(--muted); font-weight: 600; }
@media (max-width: 700px) { .kpi-row { grid-template-columns: 1fr; } }

.data-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: transform .25s ease, border-color .25s ease; }
.data-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.mini-chart { display: flex; align-items: flex-end; gap: .4rem; height: 70px; margin-bottom: 1.2rem; }
.mini-chart__bar { flex: 1; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 3px 3px 0 0; height: 0; animation: growUp 1.1s ease forwards .2s; }
@keyframes growUp { to { height: var(--h); } }
.data-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .6rem; }
.data-card p { color: var(--muted); font-size: .88rem; line-height: 1.6; }

/* ==========================================================================
   FADE TRANSITION between hub <-> profile
========================================================================== */
.view-fade-out { animation: viewFadeOut .35s ease forwards; }
.view-fade-in { animation: viewFadeIn .45s ease both; }
@keyframes viewFadeOut { to { opacity: 0; transform: scale(.97); } }
@keyframes viewFadeIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   ACCESSIBILITY
========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent, #10B981); outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE — general
========================================================================== */
@media (max-width: 600px) {
  .section { padding: 3.6rem 0; }
  .hero { padding: 5.5rem 0 3rem; }
  .hero__cta-group .btn span { display: inline; }
  .contact-links a { font-size: .85rem; }
}


/* ============================================================================
   UPGRADE VISUAL — INFRA + DADOS
   Camada adicional: não altera a composição do perfil Desenvolvedor.
============================================================================ */
.hero--infra, .hero--data { isolation: isolate; }
.hero--infra { background: radial-gradient(circle at 78% 16%, rgba(14,165,233,.16), transparent 34%), linear-gradient(135deg, #0b1428 0%, #0f172a 60%, #0b1220 100%); }
.hero--infra::before, .hero--data::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(135deg,black,transparent 72%); z-index:-1; }
.hero__scanlines { position:absolute; inset:0; opacity:.22; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(14,165,233,.05) 6px); animation:scanMove 12s linear infinite; }
@keyframes scanMove { to { transform:translateY(32px); } }
.infra-hero-layout, .data-hero-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.88fr); gap:3.4rem 4.2rem; align-items:center; }
.infra-hero-copy, .data-hero-copy { min-width:0; }
.hero__eyebrow { display:flex; align-items:center; gap:.55rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; }
.status-pill { box-shadow:0 10px 36px rgba(0,0,0,.16); }
.status-pill strong { color:var(--accent-ok); font-size:.7rem; letter-spacing:.04em; }
.infra-console { background:rgba(11,22,42,.88); border:1px solid rgba(104,170,226,.24); border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.05); overflow:hidden; transform:perspective(900px) rotateY(-2deg); animation:consoleFloat 7s ease-in-out infinite; }
@keyframes consoleFloat { 50% { transform:perspective(900px) rotateY(2deg) translateY(-6px); } }
.infra-console__topbar, .infra-console__footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; color:#89a8c5; font-family:'JetBrains Mono',monospace; font-size:.68rem; }
.infra-console__topbar { background:rgba(255,255,255,.035); border-bottom:1px solid rgba(104,170,226,.16); }
.infra-console__footer { border-top:1px solid rgba(104,170,226,.14); color:#6f8aa6; }
.infra-console__footer > span:first-child { display:flex; align-items:center; gap:.5rem; color:#b5cce0; }
.console-led, .dashboard-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.45rem; background:#22c55e; box-shadow:0 0 12px #22c55e; }
.console-live { color:#7ee2a0; font-weight:700; letter-spacing:.1em; }
.console-live i { font-size:.45rem; vertical-align:middle; animation:blink 1.3s ease infinite; }
.infra-console__body { padding:1.25rem; }
.console-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.console-kpi { padding:.85rem; border-radius:11px; background:rgba(255,255,255,.045); border:1px solid rgba(104,170,226,.12); }
.console-kpi span, .console-kpi small { display:block; color:#7894ae; font-size:.66rem; }
.console-kpi strong { display:block; color:#edf7ff; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.32rem; margin:.35rem 0 .25rem; }
.console-kpi small { color:#73d699; white-space:nowrap; }
.console-kpi small i { margin-right:.25rem; }
.console-kpi__warning { color:#f7bd52 !important; }
.console-chart { margin-top:1rem; padding:1rem; border:1px solid rgba(104,170,226,.13); border-radius:12px; background:rgba(3,10,24,.26); }
.console-chart__head, .chart-axis { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.68rem; color:#7998b3; }
.console-chart__head strong { color:#e5f4ff; font-size:.76rem; }
.console-chart__head em { color:#5ee28b; font-style:normal; margin-left:.35rem; }
.latency-chart { height:100px; margin:1rem 0 .45rem; display:flex; align-items:flex-end; gap:.45rem; background:repeating-linear-gradient(to bottom,transparent 0 24px,rgba(137,181,214,.10) 25px); }
.latency-chart i { flex:1; height:var(--h); border-radius:4px 4px 1px 1px; background:linear-gradient(180deg,#7dd3fc,#0ea5e9); opacity:.9; transform-origin:bottom; animation:barRise .9s cubic-bezier(.2,.8,.2,1) both; }
.latency-chart i:nth-child(2n) { background:linear-gradient(180deg,#38bdf8,#2563eb); animation-delay:.08s; }
@keyframes barRise { from { transform:scaleY(0); opacity:0; } to { transform:scaleY(1); opacity:.9; } }
.chart-axis { font-size:.58rem; }
.noc-strip { grid-column:1 / -1; max-width:none; width:100%; padding:1rem 1.2rem; margin-top:0; border:1px solid rgba(104,170,226,.17); border-radius:14px; background:rgba(12,31,54,.58); box-shadow:0 16px 45px rgba(0,0,0,.16); }
.noc-metric { gap:.55rem; }
.noc-metric__label { display:flex; align-items:center; gap:.45rem; color:#98b4ce; }
.noc-metric__label i { color:var(--accent); }
.noc-metric__value { color:#edf7ff; font-family:'JetBrains Mono',monospace; }
.noc-bar { height:6px; background:rgba(0,0,0,.22); }
.noc-bar__fill { transition:width .8s ease; }
.section-heading-row { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; }
.section-heading-row .section__title { margin-bottom:.55rem; }
.section-intro, .section__intro { color:var(--muted); max-width:620px; line-height:1.6; font-size:.9rem; }
.section-counter { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; }
.section-counter strong { color:var(--accent); font-family:'JetBrains Mono',monospace; font-size:1.2rem; margin-right:.35rem; }
.infra-ops-grid { display:grid; grid-template-columns:1.6fr .8fr; gap:1rem; margin-top:2.6rem; }
.ops-card, .readiness-card, .data-readiness { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; }
.ops-card__heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--text); font-weight:700; font-size:.82rem; }
.ops-card__heading i { color:var(--accent); margin-right:.4rem; }
.ops-card__meta, .ops-card__heading > span:last-child { color:var(--muted); font-size:.68rem; font-weight:500; }
.ops-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:1.6rem; }
.ops-step { position:relative; display:flex; flex-direction:column; gap:.25rem; color:#62748c; }
.ops-step:not(:last-child)::after { content:""; position:absolute; top:12px; left:34px; width:calc(100% - 20px); height:1px; background:var(--border); }
.ops-step span { position:relative; z-index:1; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--bg-alt); border:1px solid var(--border); font:600 .65rem 'JetBrains Mono',monospace; }
.ops-step strong { margin-top:.4rem; color:var(--text); font-size:.74rem; }
.ops-step small { color:var(--muted); font-size:.65rem; }
.ops-step--done span { color:#0b1724; background:var(--accent-ok); border-color:var(--accent-ok); }
.ops-step--active span { color:#051522; background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(14,165,233,.12); }
.health-score { color:var(--accent-ok) !important; }
.health-ring { width:116px; height:116px; margin:1.2rem auto .8rem; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at center,var(--surface) 58%,transparent 59%), conic-gradient(var(--accent-ok) 0 96%,rgba(255,255,255,.08) 96% 100%); }
.health-ring span { color:var(--text); font:800 1.6rem 'Plus Jakarta Sans',sans-serif; text-align:center; }
.health-ring small { display:block; color:var(--muted); font:500 .65rem Inter,sans-serif; }
.ops-card--health p, .readiness-card p, .data-readiness p { color:var(--muted); font-size:.72rem; line-height:1.5; text-align:center; }
.ops-card--health p i, .readiness-card p i, .data-readiness p i { color:var(--accent-ok); margin-right:.25rem; }
.infra-skill-layout, .data-skill-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.65fr); gap:1.4rem; align-items:start; }
.rack { gap:.7rem; }
.rack__unit { position:relative; padding:1rem 1.1rem; border-left-width:3px; }
.rack__unit b { margin-left:auto; color:var(--accent); font:700 .7rem 'JetBrains Mono',monospace; }
.readiness-card, .data-readiness { display:flex; flex-direction:column; gap:1rem; }
.readiness-row, .data-readiness__row { display:grid; grid-template-columns:1fr auto; gap:.4rem .8rem; font-size:.72rem; color:var(--muted); }
.readiness-row strong, .data-readiness__row strong { color:var(--text); font-family:'JetBrains Mono',monospace; }
.readiness-row > div, .data-readiness__row > div { grid-column:1/-1; height:6px; overflow:hidden; border-radius:99px; background:var(--bg-alt); }
.readiness-row i, .data-readiness__row i { display:block; height:100%; width:var(--pct); background:linear-gradient(90deg,var(--accent),var(--accent-ok)); border-radius:inherit; animation:growBar 1.2s ease both; }
.readiness-card p, .data-readiness p { margin:.1rem 0 0; padding-top:.85rem; border-top:1px solid var(--border); }
.noc-card, .data-card { position:relative; overflow:hidden; }
.noc-card::after, .data-card::after { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity .25s ease; }
.noc-card:hover::after, .data-card:hover::after { opacity:1; }
.project-kicker { display:inline-block; margin-bottom:.55rem; color:var(--accent); font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.project-impact { display:grid; grid-template-columns:auto 1fr auto 1fr; align-items:baseline; gap:.2rem .55rem; margin:1.15rem 0; padding:.8rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.project-impact strong, .data-card__metric strong { color:var(--text); font:800 1.15rem 'Plus Jakarta Sans',sans-serif; }
.project-impact span, .data-card__metric span { color:var(--muted); font-size:.65rem; }
.project-trigger { padding:0; background:transparent; cursor:pointer; border:0; }
.project-trigger:hover { text-decoration:underline; }
.data-hero-orbit { position:absolute; width:500px; height:500px; right:-100px; top:20px; border:1px solid rgba(37,99,235,.16); border-radius:50%; box-shadow:0 0 0 42px rgba(37,99,235,.035),0 0 0 84px rgba(245,158,11,.025); pointer-events:none; }
.data-hero-layout { grid-template-columns:minmax(0,.85fr) minmax(430px,1.15fr); }
.data-badge { display:inline-flex; align-items:center; gap:.5rem; color:#f8c66b; font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.data-badge i { color:var(--accent-2); }
.data-hero-copy .hero__title { margin-top:.8rem; }
.data-proof { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; margin-top:2rem; color:#aab4c8; font-size:.7rem; font-weight:600; }
.data-proof i { color:var(--accent-2); margin-right:.3rem; }
.bi-dashboard { border:1px solid rgba(114,147,215,.25); border-radius:18px; background:linear-gradient(145deg,rgba(31,46,78,.92),rgba(17,24,39,.94)); box-shadow:0 26px 70px rgba(0,0,0,.3); overflow:hidden; animation:dashboardFloat 8s ease-in-out infinite; }
@keyframes dashboardFloat { 50% { transform:translateY(-7px); } }
.bi-dashboard__topbar { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.85rem 1rem; color:#9baad0; font:500 .67rem 'JetBrains Mono',monospace; border-bottom:1px solid rgba(114,147,215,.16); }
.dashboard-dot { background:#f59e0b; box-shadow:0 0 12px #f59e0b; }
.dashboard-date { color:#7e8cab; }
.bi-dashboard__body { padding:1.35rem; }
.bi-dashboard__heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.eyebrow-small { display:block; color:#8998b9; text-transform:uppercase; font-size:.59rem; letter-spacing:.13em; margin-bottom:.35rem; }
.bi-dashboard__heading h2 { color:#f5f8ff; font-size:1.05rem; }
.bi-dashboard__heading > strong { color:#f8c66b; font:800 1.4rem 'Plus Jakarta Sans',sans-serif; white-space:nowrap; }
.chart-switcher { display:flex; gap:.35rem; margin:1.25rem 0 .7rem; }
.chart-filter { padding:.4rem .7rem; border-radius:7px; color:#8290ad; background:transparent; border:1px solid transparent; font-size:.68rem; }
.chart-filter:hover, .chart-filter.is-active { color:#f7ca70; background:rgba(245,158,11,.11); border-color:rgba(245,158,11,.26); }
.trend-chart { position:relative; height:185px; padding:.4rem 0 .1rem; }
.trend-chart__grid { position:absolute; inset:0 0 24px; display:flex; flex-direction:column; justify-content:space-between; }
.trend-chart__grid span { display:block; border-top:1px dashed rgba(139,147,167,.17); }
.trend-chart svg { position:absolute; inset:0 0 22px; width:100%; height:calc(100% - 22px); overflow:visible; }
#dataTrendLine { fill:none; stroke:#f59e0b; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 4px 6px rgba(245,158,11,.28)); transition:points .55s ease; }
.trend-dot { fill:#18233a; stroke:#f8c66b; stroke-width:2; transition:cx .55s ease,cy .55s ease; }
.trend-chart__labels { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#73809d; font-size:.6rem; }
.bi-dashboard__footer { display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid rgba(114,147,215,.16); color:#8794b0; font-size:.67rem; }
.bi-dashboard__footer i, .bi-dashboard__footer b { color:#5ee1a0; }
.bi-dashboard__footer span:last-child b { color:#f8c66b; }
.data-hero-layout .kpi-row { grid-column:1/-1; max-width:none; margin-top:-.5rem; }
.kpi-card { position:relative; overflow:hidden; box-shadow:0 12px 26px rgba(0,0,0,.12); }
.kpi-card::after { content:""; position:absolute; width:70px; height:70px; right:-24px; top:-25px; border-radius:50%; background:rgba(37,99,235,.12); }
.kpi-card__icon { display:grid; place-items:center; width:32px; height:32px; margin-bottom:.55rem; border-radius:9px; color:var(--accent-2); background:rgba(245,158,11,.12); font-size:.8rem; }
.kpi-card__value { position:relative; z-index:1; }
.data-story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.7rem; }
.story-card { position:relative; padding:1.4rem; min-height:190px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .25s ease,border-color .25s ease; }
.story-card:hover { transform:translateY(-5px); border-color:var(--accent-2); }
.story-card__number { color:var(--accent-2); font:700 .68rem 'JetBrains Mono',monospace; }
.story-card > i { display:block; margin:1.5rem 0 .8rem; color:var(--accent); font-size:1.25rem; }
.story-card h3 { font-size:1rem; }
.story-card p { margin-top:.45rem; color:var(--muted); font-size:.78rem; line-height:1.55; }
.story-card__line { position:absolute; bottom:0; left:0; width:38%; height:3px; background:var(--accent-2); }
.data-card__metric { display:flex; align-items:baseline; gap:.55rem; padding:.8rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.data-card__metric strong { color:var(--accent-2); }
.mini-chart { height:82px; gap:.5rem; padding:.2rem .1rem 0; background:repeating-linear-gradient(to bottom,transparent 0 25px,rgba(139,147,167,.12) 26px); }
.mini-chart__bar { display:block; flex:1; background:linear-gradient(180deg,var(--accent-2),var(--accent)); box-shadow:0 0 12px rgba(245,158,11,.1); }
.detail-modal { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:1rem; }
.detail-modal[hidden] { display:none; }
.detail-modal__backdrop { position:absolute; inset:0; background:rgba(2,6,18,.74); backdrop-filter:blur(8px); animation:modalFade .2s ease both; }
.detail-modal__dialog { position:relative; width:min(520px,100%); padding:2rem; background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius); box-shadow:0 24px 90px rgba(0,0,0,.45); animation:modalUp .3s ease both; }
.detail-modal__close { position:absolute; top:.8rem; right:.9rem; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:var(--muted); background:var(--bg-alt); }
.detail-modal__close:hover { color:var(--text); }
.detail-modal__dialog h2 { margin:.4rem 0 1rem; font-family:var(--font-display); font-size:1.5rem; }
.detail-modal__dialog p { color:var(--muted); line-height:1.7; font-size:.92rem; margin:1rem 0 1.5rem; }
.detail-modal__metric { display:inline-block; padding:.45rem .7rem; border-radius:8px; color:var(--accent-contrast); background:var(--accent); font-size:.78rem; }
@keyframes modalFade { from { opacity:0; } to { opacity:1; } }
@keyframes modalUp { from { opacity:0; transform:translateY(15px) scale(.98); } to { opacity:1; transform:none; } }

@media (max-width:900px) {
  .infra-hero-layout, .data-hero-layout { grid-template-columns:1fr; gap:2.2rem; }
  .infra-console, .bi-dashboard { max-width:680px; width:100%; }
  .data-hero-layout .kpi-row { margin-top:0; }
}
@media (max-width:700px) {
  .console-kpis { grid-template-columns:1fr; }
  .console-kpi strong { font-size:1.1rem; }
  .infra-ops-grid, .infra-skill-layout, .data-skill-layout { grid-template-columns:1fr; }
  .data-story-grid { grid-template-columns:1fr; }
  .ops-timeline { gap:.3rem; }
  .ops-step:not(:last-child)::after { left:28px; width:calc(100% - 16px); }
  .section-heading-row { align-items:flex-start; flex-direction:column; gap:.6rem; }
  .bi-dashboard__heading > strong { font-size:1.05rem; }
}
@media (max-width:520px) {
  .noc-strip { grid-template-columns:1fr 1fr; }
  .infra-console__topbar, .infra-console__footer { font-size:.6rem; }
  .infra-console__footer { align-items:flex-start; flex-direction:column; }
  .data-proof { gap:.55rem .8rem; }
  .trend-chart { height:165px; }
  .bi-dashboard__body { padding:1rem; }
  .bi-dashboard__footer { font-size:.6rem; }
  .project-impact { grid-template-columns:auto 1fr; }
}