:root{
  --bg:#0b1220; --text:#e5e7eb; --muted:#9ca3af; --card:#111827; --accent:#0ea5e9; --accent-2:#22d3ee; --border:#1f2937;
}
:root.light{
  --bg:#ffffff; --text:#111827; --muted:#4b5563; --card:#f8fafc; --accent:#0ea5e9; --accent-2:#2563eb; --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); line-height:1.6}
.container{max-width:1080px; margin:0 auto; padding:0 20px}
.site-header{position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border); z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.avatar{width:250px; height:200px; border-radius:12px; border:1px solid var(--border)}
.subtitle{margin:0; color:var(--muted)}
.nav{display:flex; gap:14px; align-items:center}
.nav a{color:var(--text); text-decoration:none; padding:6px 8px; border-radius:8px}
.nav a:hover{background:var(--card)}
.nav .social{display:grid; place-items:center}
#themeToggle{background:transparent; border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; cursor:pointer}
.hero{padding:72px 0; background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 15%, transparent), transparent 60%)}
.hero h2{font-size:clamp(24px, 4vw, 36px); margin:0 0 10px}
.lead{color:var(--muted); max-width:800px}
.cta{display:flex; gap:12px; margin-top:16px}
.btn{display:inline-block; padding:10px 16px; border:1px solid var(--border); border-radius:10px; color:var(--text); text-decoration:none}
.btn.primary{background:linear-gradient(90deg, var(--accent), var(--accent-2)); border:none; color:white}
.section{padding:56px 0; border-top:1px solid var(--border)}
.two-col{display:grid; grid-template-columns:1.2fr 1fr; gap:28px}
@media(max-width:840px){.two-col{grid-template-columns:1fr}}
.facts{list-style:none; padding:0; margin:0}
.facts li{padding:4px 0; color:var(--muted)}
.timeline{list-style:none; padding:0; margin:0; border-left:2px solid var(--border)}
.timeline li{display:grid; grid-template-columns:160px 1fr; gap:16px; padding:20px 0 20px 20px; position:relative}
.timeline li::before{content:''; width:12px; height:12px; background:var(--accent); border-radius:50%; position:absolute; left:-7px; top:28px}
.time{color:var(--muted)}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px}
.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px}
@media(max-width:840px){.grid{grid-template-columns:1fr}}
.project{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px}
.tags{display:flex; gap:8px; list-style:none; padding:0; margin-top:8px}
.tags li{background:color-mix(in oklab, var(--accent) 20%, transparent); color:white; padding:4px 8px; border-radius:999px; font-size:12px}
.skills, .strengths, .edu, .goals{padding-left:18px}
.contact-form{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; display:grid; gap:10px}
.contact-form label{display:grid; gap:6px; font-weight:500}
.contact-form input, .contact-form textarea{padding:10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text)}
.site-footer{padding:24px 0; border-top:1px solid var(--border); color:var(--muted)}
/* ——— Project icons ——— */
.project h4 {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.project h4 svg {
  width: 18px;
  height: 18px;
  color: var(--text);           /* inherits theme */
  opacity: .9;
}

.project .thumb + h4 { margin-top: 10px; }

/* Optional: colored accent per tag */
.tags li[data-accent="automation"] { background: color-mix(in oklab, var(--accent) 35%, transparent); }
.tags li[data-accent="integration"] { background: color-mix(in oklab, var(--accent-2) 35%, transparent); }
.tags li[data-accent="maintenance"] { background: color-mix(in oklab, #22c55e 35%, transparent); }
.tags li[data-accent="reporting"] { background: color-mix(in oklab, #f59e0b 35%, transparent); }
.tags li[data-accent="warehouse"] { background: color-mix(in oklab, #8b5cf6 35%, transparent); }



/* ===== Mobile fine-tuning for hero heading (added) ===== */
@media (max-width: 480px) {
  .hero { 
    padding: 44px 0 20px;
  }

  .hero h2 {
    font-size: clamp(18px, 6vw, 24px);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0 0 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .lead {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .cta {
    gap: 10px;
    flex-wrap: wrap;
  }

  .btn {
    padding: 9px 14px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Force grid collapse earlier if needed */
@media (max-width: 700px) {
  .two-col, .grid {
    grid-template-columns: 1fr !important;
  }
}