/* ======= Design System (v6) ======= */
:root {
  --brand: #0E4B5A;
  --brand-2: #0A2F37;
  --accent: #0FA47A;
  --accent-2: #79E2C5;
  --ink: #121518;
  --muted: #5E6A6E;
  --bone: #F7F6F2;
  --paper: #FFFFFF;
  --smoke: #F1F3F5;
  --line: #E6EBEF;
  --gold: #BDA061;

  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2rem;  --s-6:2.75rem; --s-7:3.25rem;

  --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem;
  --shadow: 0 10px 30px rgba(10,47,55,.08);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin:0; color:var(--ink); background:var(--bone);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55; letter-spacing:.1px;
}
.container { max-width:1120px; margin:0 auto; padding:0 var(--s-3) }

/* ======= Navigation ======= */
.site-header { background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color:#fff }
.nav {
  position:sticky; top:0; z-index:1000; backdrop-filter:saturate(150%) blur(6px);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-2) var(--s-3); background:rgba(14,75,90,.9); border-bottom:1px solid rgba(255,255,255,.12);
}
.brand { color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px }
.nav-toggle { display:none; background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; padding:.35rem .6rem; border-radius:.5rem }
.menu { display:flex; gap:var(--s-3); list-style:none; margin:0; padding:0 }
.menu a { color:#fff; text-decoration:none; opacity:.92; font-weight:600 }
.menu a:hover { opacity:1; text-decoration:underline }

/* ======= Hero ======= */
.hero {
  padding: var(--s-6) 0 var(--s-5);
  text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(900px 300px at 110% 10%, rgba(255,255,255,.08), transparent 62%);
}
.kicker { display:inline-block; padding:.25rem .55rem; border:1px solid rgba(255,255,255,.35); border-radius:.4rem; font-size:.8rem; opacity:.95; margin-bottom:var(--s-2) }
.hero h1 { margin:.2rem 0 .6rem; font-size:clamp(1.8rem,2.2vw + 1rem,2.8rem); line-height:1.15; letter-spacing:.2px }
.hero p { margin:0 auto var(--s-3); max-width:820px; color:#eef7f5; opacity:.95 }
.cta-row { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap }
.btn {
  padding:.65rem 1rem; border-radius:.65rem; text-decoration:none; display:inline-block; border:1px solid transparent; font-weight:700;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.btn.primary { background:linear-gradient(180deg, var(--accent) 0%, #0d966f 100%); color:#05251d; border-color:#0e906c }
.btn.primary:hover { filter:saturate(110%); transform:translateY(-1px) }
.btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35) }
.btn.ghost:hover { background:rgba(255,255,255,.08) }
.manual-badge {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--s-2);
  background:#ffffff; color:var(--brand-2); padding:.45rem .7rem; border-radius:.55rem;
  border:1px solid var(--line); text-decoration:none; font-weight:800;
}
.manual-badge svg { width:18px; height:18px }

/* ======= Sections ======= */
.section { padding: var(--s-6) 0; background:var(--bone) }
.section.alt { background:var(--smoke) }
.section.tight { padding: var(--s-5) 0 }
h2 { margin:0 0 var(--s-3); font-size:clamp(1.35rem, 1.2vw + .9rem, 2rem); color:var(--brand-2); letter-spacing:.2px }
h3 { margin:.35rem 0 .25rem; color:var(--brand); font-size:1.05rem }

/* ======= Cards & grids ======= */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s-3) }
.card {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s-3); box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(10,47,55,.12); border-color:#dbe4ea }
.card ul { padding-left:1.1rem; margin:.5rem 0 0; color:#2a3135 }
.grid.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-4) }

/* ======= Experience list ======= */
.list { margin:.5rem 0 0; padding-left:1.1rem }
.list li { margin:.3rem 0 }
@media(min-width: 900px){
  .list.columns { columns:2; column-gap:var(--s-4) }
  .list.columns li { break-inside:avoid }
}

/* ======= Manual ======= */
.manual {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-4); box-shadow:var(--shadow);
}
.manual-header { display:flex; align-items:center; gap:var(--s-3); border-bottom:2px solid var(--line); padding-bottom:var(--s-2); margin-bottom:var(--s-2) }
.manual-header .icon { width:30px; height:30px; border-radius:.5rem; background:linear-gradient(135deg, var(--brand), var(--brand-2)) }
.manual h3 { margin:.4rem 0 .3rem }
.manual h4 { margin:var(--s-3) 0 var(--s-2); color:var(--brand-2); font-size:1.05rem }
.toc { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.5rem; margin:.4rem 0 var(--s-3) }
.toc a { display:block; padding:.55rem .7rem; border:1px solid var(--line); border-radius:.6rem; background:#fafcfd; text-decoration:none; color:var(--brand-2); font-weight:700 }
.toc a:hover { border-color:#d5e3ea }
.callout { border-left:4px solid var(--accent); background:#f5fbf9; padding:.8rem .9rem; border-radius:.5rem; margin:.6rem 0 }
.kbd { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#f2f5f4; border:1px solid #e2e7e5; padding:.05rem .35rem; border-radius:.3rem }

/* ======= Contact ======= */
.contact { background:linear-gradient(0deg, #f2f5f7, #fafbfc) }
.contact .card { padding:var(--s-3) }
.contact-form { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-3); box-shadow:var(--shadow) }
.contact-form label { display:block; font-weight:700; margin:.6rem 0 .2rem }
.contact-form input,.contact-form textarea { width:100%; padding:.6rem .7rem; border:1px solid #dfe7e4; border-radius:.5rem }
.contact-form button { margin-top:.5rem }

/* ======= Footer ======= */
.site-footer { background:var(--brand-2); color:#d9e7ea; padding: var(--s-3) 0; border-top:4px solid var(--brand) }
.site-footer .container { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap }
.to-top { color:#d9e7ea; text-decoration:none; border:1px solid rgba(255,255,255,.35); padding:.2rem .55rem; border-radius:.4rem }

/* ======= Responsive Menu ======= */
@media (max-width: 880px){
  .nav-toggle { display:inline-block }
  .menu {
    display:none; flex-direction:column; position:absolute; right:var(--s-3); top:3.3rem;
    background:rgba(14,75,90,.98); padding:var(--s-3); border-radius:.8rem; border:1px solid rgba(255,255,255,.18);
    min-width:220px; gap:var(--s-2);
  }
  .menu.open { display:flex }
}