/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO v2 — real website + embedded interactive dashboard
   Light theme. Data colours blue + orange = colourblind-safe.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:        #ffffff;
  --bg-alt:    #f5f8fc;
  --panel:     #ffffff;
  --line:      #e3e8ef;
  --line-soft: #eef2f7;

  --ink:   #15202b;
  --ink-2: #51606f;
  --ink-3: #8693a3;

  --blue:    #0f6cbd;
  --blue-d:  #0a4f8a;
  --blue-l:  #d6e8f7;
  --violet:  #6d4ed6;
  --teal:    #0a9aa6;
  --orange:  #e8821e;
  --orange-l:#fce4c7;
  --green:   #1f9d6b;
  --amber:   #d98a00;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(16,28,45,.05), 0 6px 20px rgba(16,28,45,.06);
  --gap: 18px;
  --maxw: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px,4vw,28px); }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: .92rem;
  padding: 11px 22px; border-radius: 9px; cursor: pointer;
  text-decoration: none; border: 1.5px solid transparent; transition: all .18s ease;
}
.btn--sm { padding: 7px 15px; font-size: .82rem; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-d); transform: translateY(-1px); }
.btn--outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }

/* ─── NAV ─── */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); transition: box-shadow .2s; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(16,28,45,.05); }
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 12px clamp(16px,4vw,28px); display: flex; align-items: center; gap: 20px; }
.nav__logo { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--ink); }
.nav__logo span { color: var(--blue); }
.nav__links { display: flex; gap: 22px; list-style: none; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .92rem; transition: color .15s; }
.nav__links a:hover { color: var(--blue); }
.nav__cta { white-space: nowrap; }
.nav__burger { display: none; background: none; border: none; color: var(--ink); cursor: pointer; }
.nav__drawer { display: none; position: sticky; top: 56px; z-index: 39; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.nav__drawer.open { max-height: 320px; }
.nav__drawer ul { list-style: none; padding: 8px 0; }
.nav__drawer a { display: block; padding: 12px clamp(16px,4vw,28px); text-decoration: none; color: var(--ink); font-weight: 500; }
.nav__drawer a:hover { background: var(--bg-alt); }

/* ─── HERO ─── */
.hero { padding: clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px); position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.4fr .9fr; align-items: center; gap: 40px; }
.hero__greeting { color: var(--blue); font-weight: 600; letter-spacing: .04em; }
.hero__name { font-size: clamp(2rem,5vw,3.2rem); font-weight: 700; line-height: 1.1; margin: 4px 0 8px; }
.hero__role { font-size: clamp(1.1rem,2.4vw,1.5rem); font-weight: 600; color: var(--ink-2); min-height: 1.6em; }
.cursor { color: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__bio { margin: 16px 0 24px; color: var(--ink-2); max-width: 46ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero__social { display: flex; gap: 14px; }
.hero__social a { color: var(--ink-3); transition: color .15s, transform .15s; }
.hero__social a:hover { color: var(--blue); transform: translateY(-2px); }
.hero__avatar-wrap { position: relative; justify-self: center; width: 220px; height: 220px; }
.avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow); position: relative; z-index: 2; }
.avatar svg { width: 100%; height: 100%; }
.avatar__ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed var(--blue-l); animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--ink-3); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%,8px); } }

/* ─── SECTIONS ─── */
.section { padding: clamp(48px,7vw,84px) 0; }
.section--alt { background: var(--bg-alt); }
.section__title { font-size: clamp(1.5rem,3vw,2rem); font-weight: 700; text-align: center; }
.section__sub { text-align: center; color: var(--ink-2); margin: 8px auto 36px; max-width: 56ch; }

/* ─── ABOUT ─── */
.about__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.about__text p { margin-bottom: 14px; color: var(--ink-2); }
.about__links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow); }
.stat-card__number { display: block; font-size: 2rem; font-weight: 700; color: var(--blue); }
.stat-card__label { font-size: .82rem; color: var(--ink-2); }

/* ─── SLICER ─── */
.slicer-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: var(--gap); padding: 12px 16px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); }
.slicer-bar__label { font-size: .68rem; letter-spacing: .12em; font-weight: 600; color: var(--ink-3); }
.slicer { display: flex; gap: 6px; flex-wrap: wrap; }
.slicer__btn { font: inherit; font-size: .82rem; font-weight: 500; padding: 6px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 7px; cursor: pointer; transition: all .15s; }
.slicer__btn:hover { border-color: var(--blue); color: var(--blue); }
.slicer__btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.slicer-bar__reset { font-size: .76rem; color: var(--orange); font-weight: 600; cursor: pointer; }
.slicer-bar__reset:hover { text-decoration: underline; }

/* ─── KPI CARDS ─── */
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); margin-bottom: var(--gap); }
.kpi-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--c, var(--blue)); }
.kpi-card--hero { background: linear-gradient(180deg,#fff,#f4f9ff); }
.kpi-card__label { font-size: .72rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.kpi-card__value { font-size: 2.3rem; font-weight: 700; line-height: 1; color: var(--c, var(--blue-d)); }
.kpi-card__plus { font-size: 1.3rem; vertical-align: top; }
.kpi-card__sub { font-size: .78rem; color: var(--ink-2); }
.kpi-card__sub--good { color: var(--green); font-weight: 600; }
.kpi-card__sub--warn { color: var(--amber); font-weight: 600; }

/* ─── TABS ─── */
.tabs { display: flex; gap: 4px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px; padding: 4px; width: fit-content; margin-bottom: var(--gap); }
.tab { font: inherit; font-weight: 600; font-size: .86rem; padding: 8px 18px; border: none; background: none; color: var(--ink-2); border-radius: 7px; cursor: pointer; transition: all .15s; }
.tab:hover { color: var(--ink); }
.tab.is-active { background: #fff; color: var(--blue); box-shadow: var(--shadow); }
.tab-panel { display: none; animation: fadeIn .35s ease; }
.tab-panel.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ─── PANELS ─── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; }
.panel__head { margin-bottom: 16px; }
.panel__head--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel__title { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.panel__sub { font-size: .78rem; color: var(--ink-3); margin-top: 3px; }
.panel__note { margin-top: auto; padding-top: 14px; font-size: .78rem; color: var(--ink-2); font-style: italic; border-top: 1px dashed var(--line); }

/* ─── BAR CHARTS ─── */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; }
.bar-row__label { font-size: .82rem; font-weight: 500; }
.bar-row__track { position: relative; height: 22px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.bar-row__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--blue); border-radius: 5px; transition: width .9s cubic-bezier(.22,.61,.36,1); }
.bar-row__fill--hi { background: var(--orange); }
.bar-row__val { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .74rem; font-weight: 600; color: #fff; }
.bars--clickable .bar-row { cursor: pointer; }
.bars--clickable .bar-row:hover .bar-row__fill { filter: brightness(.92); }
.bar-row.is-dim { opacity: .35; }
.bar-row.is-sel .bar-row__label { color: var(--orange); font-weight: 700; }

/* ─── DONUT ─── */
.donut-wrap { position: relative; width: 180px; margin: 8px auto 4px; }
.donut { width: 100%; height: auto; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 16; transition: stroke-dasharray .8s ease; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center__num { font-size: 1.9rem; font-weight: 700; color: var(--green); }
.donut-center__lbl { font-size: .72rem; color: var(--ink-3); }
.legend { list-style: none; display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.legend li { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-2); }
.legend__sw { width: 11px; height: 11px; border-radius: 3px; }

/* ─── HEATMAP ─── */
.heatmap-wrap { overflow-x: auto; }
.heatmap { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: .76rem; }
.heatmap th { font-size: .66rem; font-weight: 600; color: var(--ink-3); padding: 4px; text-transform: uppercase; letter-spacing: .03em; }
.heatmap th.heatmap__rowhead, .heatmap td.heatmap__rowhead { text-align: left; color: var(--ink); font-weight: 600; white-space: nowrap; }
.heatmap td.cell { text-align: center; padding: 9px 4px; border-radius: 4px; font-weight: 600; color: #fff; font-family: "JetBrains Mono", monospace; }

/* ─── PROJECT TABLE ─── */
.table-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ptable thead th { text-align: left; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 0 10px 8px; border-bottom: 2px solid var(--line); }
.ptable__right { text-align: right; }
.ptable tbody td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ptable tbody tr:hover { background: #f6faff; }
.ptable__title { font-weight: 600; }
.ptable__tech { display: inline-block; font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--blue-l); color: var(--blue-d); }
.ptable__tech[data-cat="r"] { background:#e7e0f7; color:#5b3f9e; }
.ptable__tech[data-cat="sql"] { background:#d9eef7; color:#0a6b8a; }
.ptable__tech[data-cat="tableau"] { background: var(--orange-l); color:#a9560a; }
.dot-status { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:500; }
.dot-status::before { content:""; width:8px; height:8px; border-radius:50%; }
.dot-status--done::before { background: var(--green); } .dot-status--done { color: var(--green); }
.dot-status--wip::before { background: var(--amber); } .dot-status--wip { color: var(--amber); }
.ptable__link { color: var(--blue); text-decoration: none; font-weight: 600; }
.ptable__link:hover { text-decoration: underline; }
.ptable__link--none { color: var(--ink-3); }

/* ─── PROJECT CARDS ─── */
.projects__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: var(--gap); }
.project-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .18s, box-shadow .18s; }
.project-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,28,45,.1); }
.project-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.project-card__title { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.project-card__links { display: flex; gap: 14px; margin-top: auto; padding-top: 6px; }
.project-card__links a { font-size: .82rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.project-card__links a:hover { text-decoration: underline; }
.badge { font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.badge--green { background: #e3f6ee; color: var(--green); }
.badge--amber { background: #fdf0d9; color: var(--amber); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: .7rem; font-weight: 500; padding: 3px 9px; border-radius: 5px; background: var(--bg-alt); color: var(--ink-2); border: 1px solid var(--line); }

/* ─── TIMELINE ─── */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 14px; }
.tl-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--panel); box-shadow: var(--shadow); }
.tl-card--now { border-color: var(--blue-l); background: #f4f9ff; }
.tl-card__date { font-size: .72rem; font-weight: 600; color: var(--blue); }
.tl-card__role { font-size: .92rem; font-weight: 600; margin: 3px 0 1px; }
.tl-card__org { font-size: .78rem; color: var(--ink-2); }
.tl-card__type { font-size: .66rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; display: inline-block; }

/* ─── CONTACT ─── */
.contact__wrap { text-align: center; }
.contact__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; max-width: 760px; margin: 0 auto; }
.contact-card { display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); color: var(--ink); transition: transform .15s, border-color .15s; }
.contact-card:hover { transform: translateY(-2px); border-color: var(--blue); }
.contact-card svg { color: var(--blue); flex-shrink: 0; }
.contact-card__label { display: block; font-size: .72rem; color: var(--ink-3); }
.contact-card__value { display: block; font-size: .86rem; font-weight: 600; word-break: break-word; }
.contact__location { display: inline-flex; align-items: center; gap: 7px; margin-top: 28px; color: var(--ink-2); font-size: .9rem; }

/* ─── FOOTER ─── */
.footer { border-top: 1px solid var(--line); background: var(--bg-alt); }
.footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px clamp(16px,4vw,28px); font-size: .82rem; color: var(--ink-3); }
.footer__links { display: flex; gap: 18px; }
.footer__links a { color: var(--ink-2); text-decoration: none; }
.footer__links a:hover { color: var(--blue); }

/* ─── TOOLTIP ─── */
.tooltip { position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: #fff; font-size: .76rem; padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transform: translate(-50%,-130%); white-space: nowrap; }

/* ─── REVEAL ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; margin-left: auto; }
  .nav__drawer { display: block; }
  .hero__grid, .about__grid, .grid-2 { grid-template-columns: 1fr; }
  .hero__avatar-wrap { order: -1; }
  .kpi-row { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bar-row__fill, .reveal, .avatar__ring, .hero__scroll, .cursor { transition: none; animation: none; }
}