:root{
  --bg: #0b0e12;
  --bg-elev: #11151b;
  --text: #e5e7eb;
  --muted: #a1a1aa;
  --brand: #0ea5e9;
  --brand-2: #22d3ee;
  --card: #0f141a;
  --border: #262a31;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 12px;
  --transition: 0.2s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg,var(--bg) 0%, #0a0f15 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
  padding: clamp(16px, 3vw, 28px);
}

.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 28px);
  background: rgba(8,11,15,0.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}

.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700}
.brand-mark{filter: drop-shadow(0 6px 16px rgba(14,165,233,.35));}
.brand-text{letter-spacing:.2px}

.primary-nav{display:flex; align-items:center; gap: 18px}
.primary-nav a{
  color:var(--text); text-decoration:none; opacity:.9; 
  transition: opacity var(--transition); position: relative;
}
.primary-nav a[aria-current="page"]{color:white; font-weight:600}
.primary-nav a:hover{opacity:1}
.theme-toggle{inline-size:40px; block-size:40px; border-radius:999px; border:1px solid var(--border); background:var(--bg-elev); cursor:pointer;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer}
.nav-toggle-bar{display:block; width:22px; height:2px; background:var(--text); margin:5px 0}

@media (max-width: 800px){
  .nav-toggle{display:block}
  .primary-nav{position:fixed; inset:60px 0 auto 0; background:rgba(8,11,15,.95); padding:16px; display:none; flex-direction:column; align-items:flex-start; gap:8px; border-bottom:1px solid var(--border)}
  .primary-nav.open{display:flex}
}

.hero{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 3vw, 40px);
  align-items:center; padding: clamp(24px, 4vw, 60px) 0;
}
.hero-text h1{font-size: clamp(28px, 4vw, 44px); line-height:1.15; margin:0 0 10px}
.lead{color:var(--muted); font-size: clamp(16px, 1.5vw, 18px)}
.hero-cta{display:flex; gap:12px; margin:18px 0 14px}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; 
  border:1px solid var(--border); background:var(--bg-elev); color:var(--text); 
  border-radius:10px; text-decoration:none; box-shadow:var(--shadow);
  transition: all var(--transition); cursor: pointer; font-weight: 500;
}
.btn:hover{transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0,0,0,.45)}
.btn:active{transform: translateY(0)}
.btn.primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); 
  border-color:transparent; color:#0b0e12; font-weight:700
}
.btn.primary:hover{box-shadow: 0 12px 40px rgba(14,165,233,.4)}
.btn.small{padding:8px 10px; font-size:14px}

.quick-highlights{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:12px 0 0; list-style:none}
.quick-highlights li{padding:6px 10px; border:1px dashed var(--border); border-radius:8px; color:var(--muted)}

.hero-art img{width:100%; height:auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));}

.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin: 10px 0 40px}
.card{
  background:var(--card); border:1px solid var(--border); 
  border-radius:16px; padding:18px; box-shadow:var(--shadow);
  transition: all var(--transition);
}
.card:hover{transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,.45); border-color: var(--brand)}
.card.soft{background: rgba(255,255,255,.02)}
.card-icon{font-size: 2rem; margin-bottom: 8px}

.split{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}
.aside .profile{width:100%; border-radius:14px; border:1px solid var(--border); background:#0a0f15}

.skills-section{margin-top: 16px}
.skill-category{
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
  margin-top: 16px;
  margin-bottom: 8px;
}
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:6px 0 18px}
.tags li{padding:6px 10px; border-radius:999px; background: rgba(14,165,233,.15); color:#8bd3ff; border:1px solid rgba(14,165,233,.35)}

.facts{list-style: none; padding-left:0; margin:8px 0 0}
.facts li{margin: 6px 0; color: var(--muted)}

.page-head{padding: 14px 0 8px; border-bottom:1px dashed var(--border); margin-bottom:18px}

.projects-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:20px; margin: 12px 0 40px}
.project-card{
  display:flex; flex-direction:column; gap:10px; 
  justify-content:space-between; padding:0; overflow:hidden;
  position: relative;
}
.project-card.featured{
  border-color: var(--brand);
  box-shadow: 0 10px 40px rgba(14,165,233,.2);
}
.project-card-body{padding:20px; position: relative}
.project-card h3{margin-top: 8px; margin-bottom: 8px}
.project-icon{font-size: 2.5rem; margin-bottom: 4px}
.badge{
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0b0e12;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.feature-list{
  list-style: none;
  padding: 0;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.6;
}
.feature-list li{
  padding-left: 20px;
  position: relative;
  margin: 6px 0;
  color: var(--muted);
}
.feature-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: bold;
}
.project-card .meta{
  display:flex; flex-wrap: wrap; gap:8px; list-style:none; 
  padding:0; margin:12px 0 0; font-size: 13px;
}
.project-card .meta li{
  padding: 4px 10px; border-radius: 6px; 
  background: rgba(14,165,233,.1); color: #8bd3ff;
  border: 1px solid rgba(14,165,233,.25);
}
.project-card-actions{
  display:flex; gap:10px; padding:16px; 
  border-top:1px dashed var(--border); margin-top: auto;
}

.contact-container{display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 20px}
.form{margin-top:0}
.field{display:grid; gap:6px; margin:14px 0}
.field label{font-weight: 500}
.required{color: var(--brand)}
.field input, .field textarea{
  padding:12px; border-radius:10px; border:1px solid var(--border); 
  background:#0a0f15; color:var(--text); transition: border-color var(--transition);
  font-family: inherit; font-size: 15px;
}
.field input:focus, .field textarea:focus{
  outline: none; border-color: var(--brand); 
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
.field input::placeholder, .field textarea::placeholder{color: var(--muted); opacity: 0.6}
.actions{display:flex; gap:10px; align-items:center; margin-top:8px}
.form-tip{color:var(--muted); font-size:14px; margin-top:10px; text-align: center}
.contact-info{display: flex; flex-direction: column; gap: 16px}
.contact-methods{list-style: none; padding: 0; margin: 12px 0 0}
.contact-methods li{margin: 12px 0; line-height: 1.6}
.contact-methods strong{display: block; color: var(--text); margin-bottom: 4px}
.contact-methods a{color: var(--brand); text-decoration: none}
.contact-methods a:hover{text-decoration: underline}

.site-footer{
  margin-top:60px; padding:24px clamp(16px, 3vw, 28px); 
  border-top:1px solid var(--border); background: var(--bg-elev);
}
.footer-content{
  max-width: 1100px; margin: 0 auto; 
  display: flex; flex-wrap: wrap; justify-content: space-between; 
  align-items: center; gap: 16px; color: var(--muted);
}
.footer-links{display: flex; gap: 20px; flex-wrap: wrap}
.footer-links a{color: var(--text); text-decoration: none; transition: color var(--transition)}
.footer-links a:hover{color: var(--brand)}
@media (max-width: 600px){
  .footer-content{flex-direction: column; text-align: center; gap: 12px}
}

@media (max-width: 980px){
  .hero{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .contact-container{grid-template-columns: 1fr}
}
@media (max-width: 520px){
  .hero-cta{flex-direction: column}
  .btn{width: 100%; justify-content: center}
}
.theme-toggle {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.theme-toggle .icon {
  display: none;
}

[data-theme="light"] .theme-toggle .sun {
  display: inline;
}

[data-theme="dark"] .theme-toggle .moon {
  display: inline;
}
/* Light theme overrides */
[data-theme="light"]{
  --bg: #f8fafc;
  --bg-elev: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --border: #e2e8f0;
  --shadow: 0 4px 20px rgba(0,0,0,.08);
}

[data-theme="light"] .site-header{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
}

[data-theme="light"] body{
  background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%);
}

[data-theme="light"] .card{
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border-color: #e2e8f0;
}

[data-theme="light"] .card:hover{
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

[data-theme="light"] .btn{
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

[data-theme="light"] .btn:hover{
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

[data-theme="light"] .btn.primary{
  box-shadow: 0 4px 14px rgba(14,165,233,.25);
}

[data-theme="light"] .btn.primary:hover{
  box-shadow: 0 6px 20px rgba(14,165,233,.4);
}

[data-theme="light"] .project-card.featured{
  box-shadow: 0 8px 32px rgba(14,165,233,.15);
  border-color: var(--brand);
}

[data-theme="light"] .tags li{
  background: rgba(14,165,233,.08);
  color: #0369a1;
  border-color: rgba(14,165,233,.2);
}

[data-theme="light"] .project-card .meta li{
  background: rgba(14,165,233,.08);
  color: #0369a1;
  border-color: rgba(14,165,233,.2);
}

[data-theme="light"] .quick-highlights li{
  background: rgba(14,165,233,.05);
  color: var(--muted);
  border-color: rgba(14,165,233,.15);
}

[data-theme="light"] .brand-mark{
  filter: drop-shadow(0 4px 12px rgba(14,165,233,.3));
}

[data-theme="light"] .hero-art img{
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.15));
}

[data-theme="light"] .field input,
[data-theme="light"] .field textarea{
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--text);
}

[data-theme="light"] .field input:focus,
[data-theme="light"] .field textarea:focus{
  background: #ffffff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
/* Active link styling */
.primary-nav a[aria-current="page"]{
  position: relative;
  color: var(--text);
  opacity: 1;
  font-weight: 700;
}

.primary-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background: var(--brand);
  border-radius:2px;
}

/* Keep white only in dark mode */
[data-theme="dark"] .primary-nav a[aria-current="page"]{
  color: #fff;
}

[data-theme="light"] .primary-nav a[aria-current="page"]{
  color: var(--text);
}