:root{
  --bg: #f6fbff;
  --text: #0f172a;
  --muted: #475569;
  --line: rgba(15, 23, 42, 0.10);
  --blue: #2563eb;
  --blue2:#60a5fa;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --radius: 18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 450px at 15% 0%, rgba(37, 99, 235, 0.16), transparent 60%),
    radial-gradient(800px 400px at 90% 10%, rgba(96, 165, 250, 0.14), transparent 58%),
    radial-gradient(900px 520px at 40% 110%, rgba(255, 237, 213, 0.65), transparent 55%),
    var(--bg);
}
a{color: var(--blue); text-decoration:none}
a:hover{text-decoration:underline}

.bg-blob{ position: fixed; filter: blur(50px); opacity: 0.55; z-index:-1; border-radius:999px; }
.blob-a{ width:520px; height:520px; left:-180px; top:120px; background: rgba(37,99,235,0.22);}
.blob-b{ width:520px; height:520px; right:-180px; top:240px; background: rgba(255,237,213,0.85);}

.wrap{max-width:1060px; margin:0 auto; padding:22px 16px 44px;}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  position: sticky; top: 12px; z-index: 10;
}
.brand{font-weight:800; color: var(--text)}
.navlinks a{margin-left:14px; color: var(--muted); font-weight:600}
.navlinks a:hover{color: var(--text)}
.main{margin-top:16px; display:flex; flex-direction:column; gap:16px}
.hero{
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  padding:22px; border:1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.76));
  box-shadow: var(--shadow);
}
.hero h1{margin:8px 0; font-size:44px; letter-spacing:-0.03em}
.kicker{color: var(--muted); font-weight:750}
.lead{margin:0; color: var(--muted); line-height:1.6}
.cta{margin-top:14px}
.btn{
  display:inline-flex; padding:10px 12px;
  border:1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,0.92);
  font-weight:750; color: var(--text);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.06);
}
.btn.primary{ border-color: rgba(37,99,235,0.25); background: rgba(37,99,235,0.10); }
.meta{margin-top:14px; display:flex; gap:14px; flex-wrap:wrap}
.meta-item{display:flex; align-items:center; gap:10px; color: var(--muted); font-weight:650}
.dot{ width:9px; height:9px; border-radius:50%; background: rgba(37,99,235,0.35); }
.avatar{
  width:150px; height:150px; border-radius: 24px; object-fit: cover;
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow: 0 18px 40px rgba(2,6,23,0.10);
  background: white;
}
.avatar.placeholder{
  display:flex; align-items:center; justify-content:center;
  width:150px; height:150px; border-radius: 24px;
  border: 1px dashed rgba(15,23,42,0.18);
  color: var(--muted); background: rgba(255,255,255,0.78);
  font-weight:800;
}
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 860px){
  .hero{flex-direction:column; align-items:flex-start}
  .hero h1{font-size:34px}
  .grid{grid-template-columns: 1fr}
  .avatar, .avatar.placeholder{width:120px; height:120px}
}
.card{
  border:1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,0.82);
  box-shadow: var(--shadow);
  padding:18px;
}
.card-h h2{margin:0 0 10px; font-size:18px}
.timeline{display:flex; flex-direction:column; gap:12px}
.t-item{
  display:flex; justify-content:space-between; gap:14px;
  padding:12px; border:1px solid rgba(15,23,42,0.08);
  border-radius: 16px; background: rgba(255,255,255,0.78);
}
.t-title{font-weight:850}
.t-sub{color: var(--muted); margin-top:4px; font-weight:650}
.t-note{color: var(--muted); max-width:420px; font-weight:600}
.list{margin:0; padding-left:18px;}
.list li{margin:8px 0; line-height:1.6}
.skillgrid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 860px){ .skillgrid{grid-template-columns: 1fr} }
.skillbox{ border:1px solid rgba(15,23,42,0.08); border-radius: 16px; padding:12px; background: rgba(255,255,255,0.78); }
.skilltitle{font-weight:850; margin-bottom:8px}
.skillitem{color: var(--muted); font-weight:650; margin:6px 0}
.pagehead h1{margin:0; font-size:28px}
.muted{color: var(--muted)}
.tiny{font-size:12px}
.xp,.proj,.ref{
  padding:14px; border:1px solid rgba(15,23,42,0.08);
  border-radius: 18px; background: rgba(255,255,255,0.82);
  margin-bottom:12px;
}
.xp-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.xp-title,.proj-title,.ref-name{font-weight:900}
.xp-sub,.proj-desc,.ref-sub{color: var(--muted); font-weight:700; margin-top:6px}
.xp-dates{color: var(--muted); font-weight:800}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.pill{
  display:inline-flex; padding:6px 10px; border-radius: 999px;
  border:1px solid rgba(37,99,235,0.18);
  background: rgba(37,99,235,0.06);
  font-weight:800; font-size:12px;
}
.refs{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 860px){ .refs{grid-template-columns:1fr} }
.ref-row{display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-weight:650}
.ref-row span:first-child{color: var(--muted); font-weight:800}
.quick{display:flex; flex-direction:column; gap:10px}
.qrow{
  display:flex; justify-content:space-between; gap:14px;
  padding:12px; border:1px solid rgba(15,23,42,0.08);
  border-radius: 16px; background: rgba(255,255,255,0.78);
}
.ql{color: var(--muted); font-weight:850}
.qr{font-weight:800}

.vgrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
@media (max-width: 980px){ .vgrid{grid-template-columns:1fr} }
.vcard{ border:1px solid rgba(15,23,42,0.08); border-radius:18px; overflow:hidden; background: rgba(255,255,255,0.84); }
.vimg{height:150px; background: rgba(15,23,42,0.02)}
.vimg img{width:100%; height:100%; object-fit:cover; display:block}
.vbody{padding:12px}
.vtitle{font-weight:900}
.vcap{color: var(--muted); margin-top:6px; line-height:1.5; font-weight:650}
.vcred{margin-top:10px; font-size:12px}

.footer{ text-align:center; color: var(--muted); font-weight:650; margin-top:6px; padding-top:10px; }



/* ======== ORDERED SINGLE-COLUMN OVERRIDES ======== */
.main{gap:14px;}
.grid{
  display:block !important;
}
.grid > .card{
  margin-bottom:14px;
}
.timeline .t-item,
.skillgrid,
.refs{
  display:block !important;
}
.skillbox{margin-bottom:12px;}
.refs .ref{margin-bottom:12px;}

.hero{
  flex-direction: row;
  align-items: center;
}
@media (max-width: 860px){
  .hero{flex-direction:column; align-items:flex-start;}
}

/* remove unused visual grid styles if still referenced */
.vgrid,.vcard,.vimg,.vbody,.vtitle,.vcap,.vcred{display:none !important;}



/* ===== CV HOMEPAGE ENHANCEMENTS ===== */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.chip{
  display:inline-flex; align-items:center;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(37,99,235,0.18);
  background: rgba(37,99,235,0.06);
  font-weight:800;
  color: rgba(15,23,42,0.86);
  font-size:13px;
}
.stack{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.mini{
  border:1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.78);
  border-radius: 16px;
  padding:12px;
}
.mini-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mini-title{font-weight:900;}
.mini-date{color: rgba(71,85,105,0.95); font-weight:850;}
.mini-sub{margin-top:6px; font-weight:650; line-height:1.55;}
.list-clean{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.li{
  padding:10px 12px;
  border:1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  font-weight:650;
  color: rgba(15,23,42,0.88);
  line-height:1.6;
}



/* ===== COLOR + CONTRAST UPGRADE (LIGHT THEME) =====
   - warmer, cleaner blues
   - clearer borders
   - less “washed out glass”
   - more consistent shadows
*/
:root{
  --bg: #f7fafc;                 /* clean light base */
  --text: #0b1220;               /* deeper ink */
  --muted: #334155;              /* readable grey */
  --line: rgba(15, 23, 42, 0.16);/* clearer borders */
  --line2: rgba(15, 23, 42, 0.22);

  --blue: #1d4ed8;               /* primary blue */
  --blue2:#38bdf8;               /* accent sky */
  --blueSoft: rgba(29, 78, 216, 0.10);
  --warm: rgba(255, 237, 213, 0.55);

  --shadow: 0 10px 28px rgba(2, 6, 23, 0.10);
  --shadow2: 0 18px 46px rgba(2, 6, 23, 0.12);

  --radius: 18px;
}

/* background: less noisy, more “premium” */
body{
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(29,78,216,0.14), transparent 62%),
    radial-gradient(900px 500px at 92% 0%, rgba(56,189,248,0.10), transparent 62%),
    radial-gradient(900px 520px at 50% 120%, var(--warm), transparent 58%),
    var(--bg);
}

/* links/buttons */
a{color: var(--blue);}
a:hover{color: #0f3fbf;}

/* nav + hero + cards: cleaner light panels and stronger borders */
.nav{
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow);
}
.hero{
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow2);
}
.card{
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow);
}

/* inner tiles: make borders visible and consistent */
.t-item,
.skillbox,
.xp, .proj, .ref,
.qrow,
.mini,
.li{
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.90);
}

/* chips/pills: better blue */
.pill, .chip{
  border: 1px solid rgba(29,78,216,0.22);
  background: rgba(29,78,216,0.08);
  color: rgba(11,18,32,0.92);
}

/* buttons: clearer primary */
.btn{
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
}
.btn.primary{
  border: 1px solid rgba(29,78,216,0.28);
  background: linear-gradient(180deg, rgba(29,78,216,0.14), rgba(29,78,216,0.07));
}

/* avatars: crisp frame */
.avatar{
  border: 1px solid rgba(15,23,42,0.20);
  box-shadow: var(--shadow2);
}

/* blobs slightly calmer */
.bg-blob{ opacity: 0.42; }
.blob-a{ background: rgba(29,78,216,0.22); }
.blob-b{ background: rgba(255,237,213,0.80); }

/* typography tweaks for “calm confidence” */
.lead{ color: rgba(51,65,85,0.95); }
.muted{ color: rgba(51,65,85,0.92); }



/* ===== Tone down bolding in "What I do" + selected blocks ===== */
.li{
  font-weight: 550;             /* was too heavy */
}
.li strong{
  font-weight: 800;             /* keep label bold */
}
.mini-title{
  font-weight: 800;             /* slightly softer than 900 */
}



/* ===== Nerdy font upgrade ===== */
:root{
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-nerd: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body{ font-family: var(--font-body); }

/* Headings + key labels get the nerdy mono */
.hero h1,
.pagehead h1,
.card-h h2,
.brand,
.kicker,
.mini-title,
.xp-title, .proj-title, .ref-name,
.t-title,
.skilltitle{
  font-family: var(--font-nerd);
  letter-spacing: -0.01em;
}

/* Keep long paragraphs easy to read */
.lead, p, li, .muted, .mini-sub, .vcap, .skillitem{
  font-family: var(--font-body);
}



/* ===== Local image galleries (3 across) ===== */
.proj-gallery, .xp-gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.gimg{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.03);
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
}
.gimg:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,0.10);
}
@media (max-width: 780px){
  .proj-gallery, .xp-gallery{ grid-template-columns: 1fr; }
  .gimg{ height: 180px; }
}



/* ===== Homepage energy upgrades ===== */
.stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
.stat{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.90);
  padding:12px;
}
.stat-k{
  font-family: var(--font-nerd, inherit);
  font-weight: 800;
  color: rgba(51,65,85,0.95);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-v{
  margin-top:6px;
  font-weight: 800;
  line-height: 1.35;
}

.twocol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.panel{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.90);
  padding:12px;
}
.panel-h{
  font-family: var(--font-nerd, inherit);
  font-weight: 900;
  margin-bottom: 8px;
}
.panel-p{ line-height: 1.65; font-weight: 650; }

.cta-bar{
  border: 1px solid rgba(29,78,216,0.25);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(29,78,216,0.10), rgba(255,255,255,0.92));
  box-shadow: var(--shadow, 0 10px 28px rgba(2,6,23,0.10));
  padding: 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.cta-title{
  font-family: var(--font-nerd, inherit);
  font-weight: 900;
  font-size: 16px;
}
.cta-sub{ margin-top:4px; font-weight:650; }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 980px){
  .stats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px){
  .twocol{ grid-template-columns: 1fr; }
  .cta-bar{ flex-direction:column; align-items:flex-start; }
}



/* ===== Simple CV monogram logo (subtle, professional) ===== */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.logoMark{
  width:34px;
  height:34px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-nerd, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.95);

  background: linear-gradient(180deg, rgba(29,78,216,0.95), rgba(29,78,216,0.78));
  border: 1px solid rgba(15,23,42,0.16);
  box-shadow: 0 10px 22px rgba(2,6,23,0.10);
}
.brandText{
  font-weight: 900;
  letter-spacing: -0.01em;
}



/* ===== Nav right container + icon buttons ===== */
.navright{
  display:flex;
  align-items:center;
  gap:12px;
}
.navicons{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:10px;
  border-left: 1px solid var(--line);
}
.iconbtn{
  width:36px;
  height:36px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
}
.iconbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,0.10);
  text-decoration:none;
}
.ico{
  width:18px;
  height:18px;
  fill: rgba(15,23,42,0.82);
}
.iconbtn:hover .ico{
  fill: rgba(29,78,216,0.95);
}

/* hero meta icons */
.meta-ico{
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
}
.meta-ico .ico{ width:18px; height:18px; fill: rgba(29,78,216,0.90); }



/* ===== CV monogram: outline (more corporate/minimal) ===== */
.logoMark{
  color: rgba(29,78,216,0.95) !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(29,78,216,0.32) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,0.08) !important;
}



/* ===== Contact quick rows: label icons ===== */
.ql-ico{ display:flex; align-items:center; gap:10px; }
.qicon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.qicon .ico{ width:18px; height:18px; fill: rgba(29,78,216,0.92); }