/* ============================================================
   Carlos Dias Jr. — portfolio
   ============================================================ */

:root{
  --bg:#0b0f14;
  --bg-alt:#0e141b;
  --panel:#111922;
  --panel-2:#151f2a;
  --line:#1e2b38;
  --line-2:#2a3b4c;
  --tx:#c6d4e1;
  --tx-hi:#eaf2fa;
  --tx-dim:#7d8fa1;
  --tx-faint:#5a6b7b;
  --acc:#4ea1ff;
  --acc-dim:#2b6fc0;
  --acc-soft:rgba(78,161,255,.12);
  --grn:#3fb950;
  --amb:#d9a441;
  --l0:#161e27; --l1:#0e4429; --l2:#006d32; --l3:#26a641; --l4:#39d353;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.30);
  --r:10px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="light"]{
  --bg:#fdfdfb;
  --bg-alt:#f4f6f8;
  --panel:#ffffff;
  --panel-2:#f7f9fb;
  --line:#e2e8ef;
  --line-2:#cfd9e3;
  --tx:#2a3743;
  --tx-hi:#0d151d;
  --tx-dim:#5c6c7b;
  --tx-faint:#8496a5;
  --acc:#0d6ad4;
  --acc-dim:#0d6ad4;
  --acc-soft:rgba(13,106,212,.09);
  --grn:#1a7f37;
  --amb:#9a6700;
  --l0:#ebedf0; --l1:#9be9a8; --l2:#40c463; --l3:#30a14e; --l4:#216e39;
  --shadow:0 1px 2px rgba(20,40,60,.06), 0 8px 26px rgba(20,40,60,.07);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:74px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mono{font-family:var(--mono)}
.dim{color:var(--tx-faint)}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--tx-hi); line-height:1.2; margin:0}
strong,b{color:var(--tx-hi); font-weight:600}
kbd{
  font-family:var(--mono); font-size:.78em; padding:1px 6px;
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:4px;
  background:var(--panel-2); color:var(--tx-hi);
}
em{color:var(--tx-dim)}

.wrap{width:min(1140px, 100% - 3rem); margin-inline:auto}
@media (max-width:640px){ .wrap{width:calc(100% - 2rem)} }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--acc); color:#fff; padding:.6rem 1rem; border-radius:0 0 6px 0;
}
.skip:focus{left:0}

/* ---------- language switching ----------
   Hide only the inactive language. Elements keep whatever display their own
   rules give them, so a .lang element can also be a block, a grid item, etc. */
html[data-lang="pt"] .lang.en,
html[data-lang="en"] .lang.pt{display:none !important}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:1.5rem; height:60px}

.brand{display:flex; align-items:center; gap:.6rem; color:var(--tx-hi); font-weight:600}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid; place-items:center; width:28px; height:28px; flex:none;
  border-radius:7px; background:linear-gradient(145deg,var(--acc),var(--acc-dim));
  color:#fff; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:-.5px;
}
.brand-txt{font-family:var(--mono); font-size:14.5px}
.cursor{color:var(--acc); animation:blink 1.15s steps(2,start) infinite}
@keyframes blink{to{opacity:0}}
@media (prefers-reduced-motion:reduce){ .cursor{animation:none} }

.nav{display:flex; gap:1.5rem; margin-left:auto; font-size:14px}
.nav a{color:var(--tx-dim); font-weight:500}
.nav a:hover{color:var(--tx-hi); text-decoration:none}
@media (max-width:720px){ .nav{display:none} }

.toggles{display:flex; gap:.4rem; margin-left:auto}
@media (min-width:721px){ .toggles{margin-left:1.4rem} }
.tgl{
  display:grid; place-items:center; min-width:34px; height:30px; padding:0 .5rem;
  border:1px solid var(--line); border-radius:7px;
  background:var(--panel); color:var(--tx-dim); cursor:pointer;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.4px;
  transition:.16s;
}
.tgl:hover{color:var(--tx-hi); border-color:var(--line-2); background:var(--panel-2)}
.ico-moon{display:none}
html[data-theme="light"] .ico-sun{display:none}
html[data-theme="light"] .ico-moon{display:block}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:5.5rem 0 4.5rem; overflow:hidden}
.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.5;
  mask-image:radial-gradient(ellipse 80% 62% at 30% 24%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 30% 24%, #000 0%, transparent 78%);
}
.hero-in{position:relative}

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:12.5px; color:var(--tx-dim); letter-spacing:.02em;
  padding:.34rem .8rem .34rem .7rem; margin:0 0 1.6rem;
  border:1px solid var(--line); border-radius:999px; background:var(--panel);
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--grn); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--grn) 20%, transparent);
}

.hero h1{
  font-size:clamp(2.6rem, 7.5vw, 4.6rem);
  font-weight:700; letter-spacing:-.035em; margin:0 0 .7rem;
  background:linear-gradient(160deg, var(--tx-hi) 20%, var(--tx-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.roles{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:13px; color:var(--acc); margin:0 0 1.7rem; letter-spacing:.01em;
}
.roles i{color:var(--tx-faint); font-style:normal}

.lede{max-width:60ch; font-size:clamp(1rem, 2.1vw, 1.145rem); color:var(--tx); margin:0 0 2.2rem}

.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.5rem}
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.66rem 1.15rem; border-radius:8px;
  border:1px solid var(--line-2); background:var(--panel); color:var(--tx-hi);
  font-size:14px; font-weight:500; transition:.16s;
}
.btn:hover{background:var(--panel-2); border-color:var(--acc); text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--acc); border-color:var(--acc); color:#fff}
.btn-primary:hover{background:var(--acc); filter:brightness(1.12); border-color:var(--acc)}
html[data-theme="light"] .btn-primary{color:#fff}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:4.6rem 0; border-top:1px solid var(--line)}
.sec-alt{background:var(--bg-alt)}

.sec-h{
  display:flex; align-items:baseline; gap:.85rem;
  font-size:clamp(1.5rem,3.4vw,2rem); font-weight:650; letter-spacing:-.022em;
  margin:0 0 .6rem;
}
.num{color:var(--acc); font-size:.62em; font-weight:700; letter-spacing:.05em}
.sec-sub{color:var(--tx-dim); margin:0 0 2.4rem; max-width:62ch; font-size:15px}
.sec-h + .two-col, .sec-h + .cards{margin-top:2.2rem}

.two-col{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:2.6rem}
@media (max-width:900px){ .two-col{grid-template-columns:1fr; gap:2rem} }

.prose p{margin:0 0 1.05rem; max-width:66ch}
.prose p:last-child{margin-bottom:0}
.prose h4{
  font-size:12px; font-family:var(--mono); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--acc);
  margin:2rem 0 .8rem; padding-bottom:.5rem; border-bottom:1px solid var(--line);
}
.prose h4:first-child{margin-top:0}
.prose ol{margin:0 0 1.1rem; padding-left:1.25rem; max-width:66ch}
.prose ol li{margin-bottom:.55rem; padding-left:.2rem}
.prose ol li::marker{color:var(--acc); font-family:var(--mono); font-size:.9em}

/* ---------- side panels ---------- */
.side{display:flex; flex-direction:column; gap:1rem}
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:1.25rem;
}
.panel-h{
  font-size:11.5px; color:var(--tx-faint); letter-spacing:.05em;
  margin:0 0 .95rem;
}
.tags{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0}
.tags li{
  font-family:var(--mono); font-size:11.5px; color:var(--tx-dim);
  padding:.25rem .6rem; border:1px solid var(--line); border-radius:5px;
  background:var(--panel-2);
}
.links{list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.8rem}
.links li{display:flex; flex-direction:column; gap:.1rem}
.links .k{font-family:var(--mono); font-size:11.5px; color:var(--acc); letter-spacing:.04em}
.links .v{font-size:13.5px; color:var(--tx-dim); line-height:1.4}
.panel-link{font-size:12.5px; display:inline-block}

/* ============================================================
   APP CARDS
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:1.4rem}

.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  color:inherit; transition:.2s ease;
}
.card:hover{
  text-decoration:none; transform:translateY(-4px);
  border-color:var(--acc); box-shadow:var(--shadow);
}
@media (prefers-reduced-motion:reduce){ .card:hover{transform:none} }

.card-vis{
  height:168px; display:grid; place-items:center; padding:1rem 1.4rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--acc-soft), transparent 62%),
    var(--panel-2);
}
.card-vis svg{width:100%; height:100%; max-height:130px}

/* ladder art */
.card-vis-ladder .rail{stroke:var(--tx-faint); stroke-width:2.6; stroke-linecap:round}
.card-vis-ladder .rung line,.card-vis-ladder .rung path{
  stroke:var(--tx-dim); stroke-width:2.2; fill:none; stroke-linecap:round;
}
.card-vis-ladder .rung rect{stroke:var(--tx-dim); stroke-width:2.2; fill:none}
.card-vis-ladder .rung-live line,.card-vis-ladder .rung-live path,.card-vis-ladder .rung-live rect{stroke:var(--acc)}
.card-vis-ladder .rung-live .coil{stroke:var(--grn)}
.card:hover .card-vis-ladder .rung-live line,
.card:hover .card-vis-ladder .rung-live path,
.card:hover .card-vis-ladder .rung-live rect{filter:drop-shadow(0 0 5px var(--acc))}

/* pneumatic art */
.card-vis-pneu .pneu rect{fill:none; stroke:var(--tx-dim); stroke-width:2.2}
.card-vis-pneu .pneu line{stroke:var(--tx-dim); stroke-width:2.2; stroke-linecap:round}
.card-vis-pneu .piston{fill:var(--tx-dim); stroke:none}
.card-vis-pneu .rod{stroke:var(--tx-faint)}
.card-vis-pneu .vsym{stroke:var(--tx-faint); stroke-width:1.6; fill:none}
.card-vis-pneu .pipe{stroke:var(--acc); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.card-vis-pneu .air{fill:var(--grn)}
.card:hover .card-vis-pneu .piston{fill:var(--acc)}
.card:hover .card-vis-pneu .pipe{filter:drop-shadow(0 0 5px var(--acc))}

.card-body{padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1}
.card-tag{font-size:11px; color:var(--tx-faint); letter-spacing:.05em; margin:0 0 .55rem}
.card h3{font-size:1.35rem; letter-spacing:-.02em; margin:0 0 .6rem}
.card-body p{margin:0 0 1.3rem; color:var(--tx-dim); font-size:14.5px; line-height:1.6}
.mod{
  font-family:var(--mono); font-size:.58em; font-weight:700; vertical-align:.35em;
  color:var(--amb); border:1px solid currentColor; border-radius:4px;
  padding:.1em .38em; letter-spacing:.06em; margin-left:.15em;
}
.card-go{
  margin-top:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-size:12.5px; font-weight:700; color:var(--acc); letter-spacing:.02em;
}
.card-go svg{transition:transform .18s}
.card:hover .card-go svg{transform:translateX(4px)}

/* ============================================================
   PROJECT DETAIL
   ============================================================ */
.proj-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:.85rem; margin-bottom:2.2rem}
.proj-head h2{font-size:clamp(1.5rem,3.4vw,2rem); letter-spacing:-.022em}
.ghost{
  margin-left:auto; font-size:12px; color:var(--tx-dim);
  border:1px solid var(--line); border-radius:6px; padding:.34rem .75rem; transition:.16s;
}
.ghost:hover{color:var(--acc); border-color:var(--acc); text-decoration:none}

.proj-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); gap:2.6rem}

.feat{list-style:none; padding:0; margin:0}
.feat li{
  padding:.85rem 0 .9rem 0; border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--tx-dim); line-height:1.6;
}
.feat li:last-child{border-bottom:0}
/* only the leading label is a block — <b> used for emphasis inside the text stays inline */
.feat li > b{display:block; color:var(--tx-hi); font-size:14px; margin-bottom:.2rem}
.feat-check li{position:relative; padding-left:1.7rem}
.feat-check li::before{
  content:"✓"; position:absolute; left:0; top:.85rem;
  color:var(--grn); font-weight:700; font-size:13px; font-family:var(--mono);
}

.codebox{
  margin:1.6rem 0 0; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); overflow:hidden;
}
.codebox-h{
  margin:0; padding:.6rem 1rem; font-size:11px; color:var(--tx-faint);
  border-bottom:1px solid var(--line); background:var(--panel-2); letter-spacing:.04em;
}
.codebox pre{
  margin:0; padding:1.1rem 1rem; overflow-x:auto;
  font-size:13px; color:var(--acc); line-height:1.6;
}
.codebox-n{
  margin:0; padding:.75rem 1rem .95rem; font-size:13px; color:var(--tx-dim);
  border-top:1px solid var(--line);
}

.credit{
  margin-top:1.6rem; padding:1.1rem 1.2rem;
  border:1px solid var(--line); border-left:3px solid var(--amb);
  border-radius:0 var(--r) var(--r) 0; background:var(--panel);
}
.credit-h{margin:0 0 .6rem; font-size:11px; color:var(--amb); letter-spacing:.05em}
.credit p{margin:0; font-size:13.5px; color:var(--tx-dim); line-height:1.6}

.stack{margin:1.5rem 0 0; font-size:12px; color:var(--tx-faint); letter-spacing:.02em}

/* ============================================================
   RESEARCH REPOS
   ============================================================ */
.repos{display:flex; flex-direction:column; gap:.75rem}
.repo{
  display:block; padding:1rem 1.15rem; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line); transition:.16s; color:inherit;
}
.repo:hover{border-color:var(--acc); text-decoration:none; background:var(--panel-2)}
.repo-n{display:flex; align-items:center; gap:.6rem; font-size:13.5px; color:var(--acc); font-weight:500}
.repo-d{display:block; margin-top:.4rem; font-size:13px; color:var(--tx-dim); line-height:1.55}
.lg{
  font-size:10px; font-weight:700; letter-spacing:.04em; padding:.1rem .42rem;
  border-radius:20px; border:1px solid currentColor;
}
.lg-rust{color:#e07b53}
.lg-verilog{color:#b2b7f8}
.lg-css{color:#a06ee1}

/* ============================================================
   GITHUB CALENDAR
   ============================================================ */
.gh{border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden}

.gh-top{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  padding:1.3rem 1.5rem; border-bottom:1px solid var(--line); background:var(--panel-2);
}
.gh-user{display:flex; align-items:center; gap:.9rem; color:inherit}
.gh-user:hover{text-decoration:none}
.gh-user img{border-radius:50%; border:1px solid var(--line-2); display:block}
.gh-user b{display:block; font-size:14px; color:var(--tx-hi)}
.gh-user:hover b{color:var(--acc)}
.gh-user em{font-size:12.5px; color:var(--tx-faint); font-style:normal}

.gh-stats{list-style:none; display:flex; gap:2rem; padding:0; margin:0 0 0 auto}
.gh-stats li{display:flex; flex-direction:column}
.gh-stats b{font-size:20px; color:var(--tx-hi); font-weight:700; line-height:1.2}
.gh-stats span{font-size:11px; color:var(--tx-faint); letter-spacing:.03em}
@media (max-width:640px){ .gh-stats{margin-left:0; gap:1.4rem} }

.cal-wrap{padding:1.4rem 1.5rem 1.1rem}
.cal-scroll{overflow-x:auto; padding-bottom:.4rem}
.cal-months{
  display:grid; grid-auto-flow:column; gap:0;
  font-size:10.5px; color:var(--tx-faint);
  margin-left:30px; margin-bottom:.35rem; min-width:722px;
}
.cal-row{display:flex; gap:.4rem; min-width:752px}
.cal-days{
  display:flex; flex-direction:column; justify-content:space-around;
  font-size:9.5px; color:var(--tx-faint); width:26px; padding:2px 0 0;
}
.cal{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 12px); gap:3px}
.cal i{
  width:12px; height:12px; border-radius:2.5px; background:var(--l0);
  display:block; cursor:default;
}
.cal i[data-level="1"]{background:var(--l1)}
.cal i[data-level="2"]{background:var(--l2)}
.cal i[data-level="3"]{background:var(--l3)}
.cal i[data-level="4"]{background:var(--l4)}
.cal i:hover{outline:1.5px solid var(--tx-dim); outline-offset:1px}

.cal-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  margin-top:.9rem; font-size:11px; color:var(--tx-faint);
}
.cal-legend{display:flex; align-items:center; gap:.28rem; margin-left:auto}
.cal-legend i{width:11px; height:11px; border-radius:2.5px; background:var(--l0); display:block}
.cal-legend i[data-level="1"]{background:var(--l1)}
.cal-legend i[data-level="2"]{background:var(--l2)}
.cal-legend i[data-level="3"]{background:var(--l3)}
.cal-legend i[data-level="4"]{background:var(--l4)}

.gh-cta{
  display:block; padding:.95rem 1.5rem; font-size:12.5px;
  border-top:1px solid var(--line); background:var(--panel-2); color:var(--acc);
}
.gh-cta:hover{text-decoration:none; background:var(--acc-soft)}

/* ============================================================
   SPACE
   ============================================================ */
.space > p{max-width:74ch; margin:0 0 1.05rem}
.comp{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-top:2rem;
}
.comp-i{background:var(--panel); padding:1.2rem 1.3rem}
.comp-i p:first-child{
  color:var(--acc); font-size:12.5px; font-weight:700; letter-spacing:.05em; margin:0 0 .5rem;
}
.comp-i p{margin:0; font-size:13.5px; color:var(--tx-dim); line-height:1.6}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line); padding:2.4rem 0; background:var(--bg-alt)}
.foot-in{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start}
.foot p{margin:0; font-size:13px; color:var(--tx-faint)}
.foot-n{color:var(--tx-hi) !important; font-size:14px !important; margin-bottom:.3rem !important}
.foot-l{display:flex; flex-wrap:wrap; gap:1.3rem; margin-left:auto; font-size:12.5px}
.foot-l a{color:var(--tx-dim)}
.foot-l a:hover{color:var(--acc)}