/* ===============================
   Theme Variables
=================================*/
:root{
  --bg:#ffffff;
  --surface:#f7f9fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;
  --primary:#2563eb;      /* blue-600 */
  --primary-2:#3b82f6;    /* blue-500 */
  --ring: 0 0 0 3px rgba(37,99,235,0.25);
  --radius: 16px;
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --shadow-md: 0 10px 30px rgba(2,6,23,0.08);

  /* layout helpers */
  --header-h: 64px; /* tweak to your real header height */
}

html[data-theme='dark']{
  --bg:#0f1320;
  --surface:#151a2b;
  --card:#1e253b;
  --text:#e7ecf3;
  --muted:#9aa3b2;
  --border:rgba(255,255,255,0.08);
  --primary:#38bdf8;
  --primary-2:#7dd3fc;
  --ring: 0 0 0 3px rgba(125,211,252,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
}

/* ===============================
   Base / Resets
=================================*/
*{box-sizing:border-box}
html, body { height:100% }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;

  /* Smooth in-page scroll & offset for sticky header */
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  background: var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Any hash-targeted section should avoid sitting under the header */
section[id]{ scroll-margin-top: var(--header-h); }

/* ===============================
   Typography
=================================*/
h1,h2,h3,h4{
  font-family:Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  line-height:1.2; margin:0 0 8px
}
h1{font-size:48px}
h2{font-size:28px}
h3{font-size:20px}
p{margin:0 0 12px}
.eyebrow{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:12px}

/* ===============================
   Links & Buttons
=================================*/
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:none; box-shadow: var(--ring); border-radius:8px}

.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;
  border:1px solid var(--border);font-weight:600; box-shadow:var(--shadow-sm);
  transition:transform .06s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none; box-shadow: var(--ring)}
.btn.primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; border:0;
  box-shadow:0 6px 20px rgba(37,99,235,0.25);
}
.btn.ghost{background:var(--card);color:var(--text)}

/* ===============================
   Header
=================================*/
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; margin:0 auto; max-width:1120px;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,0.72);
  border-bottom:1px solid var(--border);
}
html[data-theme='dark'] .site-header{
  background:rgba(21,26,43,0.6);
}

.logo{display:flex;gap:10px;align-items:center;color:var(--text);font-weight:700;font-size:18px}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:22px;cursor:pointer}
.nav-toggle:focus-visible{box-shadow:var(--ring); border-radius:8px}

.nav-links{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-links a{
  padding:8px 12px;border-radius:999px; color:var(--text);
  text-decoration:none; border:1px solid transparent;
}
.nav-links a:hover,
.nav-links a.active{ background:#f1f5f9 }
html[data-theme='dark'] .nav-links a:hover,
html[data-theme='dark'] .nav-links a.active{ background:rgba(255,255,255,0.08) }

/* ===============================
   Hero
=================================*/
.hero{
  display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;
  align-items:center;max-width:1120px;margin:56px auto;padding:0 20px;
}
.hero::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(700px 400px at 80% -10%, rgba(37,99,235,0.08), transparent 60%),
    radial-gradient(800px 500px at 10% 10%, rgba(59,130,246,0.08), transparent 60%),
    var(--bg);
}
.hero h1{margin:10px 0 10px}
.subhead{color:#334155;max-width:58ch;font-size:18px}
.quick-stats{display:flex;gap:18px;list-style:none;margin:22px 0 0;padding:0;color:#334155;flex-wrap:wrap}
.hero-ctas{display:flex;gap:12px;margin-top:18px}
.hero-portrait{display:flex;align-items:center;justify-content:center}
.avatar{
  width:180px;height:180px;border-radius:50%;
  object-fit:cover;border:4px solid rgba(59,130,246,0.25);
  box-shadow:var(--shadow-md);
}
.avatar.large{width:220px;height:220px}

/* ===============================
   Sections
=================================*/
.highlights{max-width:1120px;margin:40px auto;padding:0 20px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow-sm);
}
.card h3{margin:6px 0 8px}
.card.project .meta{display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:10px 0 0;list-style:none;color:#475569}
.card.mini{padding:14px}

.cta-band{
  max-width:1120px;margin:32px auto;padding:18px 20px;
  background:linear-gradient(135deg,#eef2ff,#eff6ff);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

/* ===============================
   Pages
=================================*/
.page{max-width:1120px;margin:44px auto;padding:0 20px}
.page.narrow{max-width:840px}

.about-grid{display:grid;grid-template-columns:240px 1fr;gap:24px;margin:22px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:6px 12px;border-radius:999px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

/* ===============================
   Contact form
=================================*/
.contact-form{margin-top:12px;background:var(--card);border:1px solid var(--border);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.input-row{display:flex;flex-direction:column;margin-bottom:12px}
.input-row label{font-weight:600;margin-bottom:6px}
.input-row input,.input-row textarea{
  background:var(--card);border:1px solid var(--border);color:var(--text);
  padding:12px;border-radius:12px;outline:none;
}
.input-row input:focus,.input-row textarea:focus{box-shadow:var(--ring);border-color:var(--primary)}
.hint{color:#64748b;font-size:12px;margin-top:6px}
.radio-group{border:1px dashed var(--border);border-radius:12px;padding:12px;margin:18px 0}
.radio-group legend{padding:0 6px;color:#334155}
.radio-group label{margin-right:14px}
.actions{display:flex;align-items:center;gap:12px}
.form-status{min-height:18px;color:#1e40af}

/* ===============================
   Footer
=================================*/
.site-footer{
  max-width:1120px;margin:44px auto;padding:20px;color:#475569;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border)
}

/* ===============================
   Responsive
=================================*/
@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-ctas{justify-content:center;flex-wrap:wrap}
  .quick-stats{justify-content:center}
  .about-grid{grid-template-columns:1fr; text-align:center}
  .nav-toggle{display:inline-block}
  .nav-links{
    display:none; position:absolute; right:20px; top:calc(var(--header-h) - 8px);
    flex-direction:column; gap:8px;
    background:var(--card); padding:12px; border-radius:12px;
    border:1px solid var(--border); box-shadow:var(--shadow-sm)
  }
  .nav-links.show{display:flex}
  .cards{grid-template-columns:1fr}
  .cta-band{flex-direction:column;text-align:center}
}

/* ===============================
   Reduced Motion
=================================*/
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important}
}