:root{
  --bg:#0b0c10; --card:#11131a; --border:#1b2130; --text:#e6e9ef; --muted:#aab0c0;
  --accent:#7aa2f7; --link:#8bd5ff; --chip:#121826; --chip-b:#22283a;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font:16px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:linear-gradient(180deg,#0b0c10 0%,#0a0b10 60%,#090a0e 100%) scroll}
.wrap{max-width:980px;margin:0 auto;padding:28px 18px 80px}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#000;color:#fff;padding:8px;border-radius:8px}
.site-header{position:sticky;top:0;background:rgba(9,10,14,.75);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:-.02em;border:1px solid var(--border);border-radius:12px;padding:6px 10px;background:var(--card)}
.menu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.menu a{padding:8px 10px;border-radius:10px} .menu a:hover{background:#121826}
.theme-toggle{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
.hero{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.hero img{width:300px;height:auto;border-radius:0;border:2px solid var(--border);object-fit:cover}
h1{font-size:clamp(28px,4.5vw,40px);letter-spacing:-.02em;margin:.2em 0 .2em 0}
h2{font-size:20px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin:28px 0 12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.grid.two{display:grid;grid-template-columns:1.2fr .8fr;gap:18px} @media (max-width:880px){.grid.two{grid-template-columns:1fr}}
.sub{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.chips li{background:var(--chip);border:1px solid var(--chip-b);color:#cbd5e1;padding:4px 10px;border-radius:999px;font-size:13px}
.timeline{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.timeline .meta{color:var(--muted);font-size:14px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.meta{color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:880px){.row{grid-template-columns:1fr}}
.section{scroll-margin-top:80px}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:700px){.contact-cards{grid-template-columns:1fr}}
.card .btn{display:inline-block;padding:10px 14px;border-radius:12px;background:#1b2130;border:1px solid var(--border);color:var(--text)}
.card .btn.outline{background:transparent}
.footer{opacity:.7;color:var(--muted);text-align:center;margin-top:26px}

/* Light mode */
:root.light{--bg:#f7f7fb;--card:#ffffff;--border:#e5e7ef;--text:#0b1020;--muted:#4d5566;--accent:#3556e1;--link:#1f6feb;--chip:#f3f4f8;--chip-b:#e5e7ef}
body.light{background:#f7f7fb}
.site-header.light{background:rgba(255,255,255,.8)}

/* Small niceties */
html{scroll-behavior:smooth}
hr.sep{border:0;border-top:1px solid var(--border);margin:24px 0}
.hero {
  display: grid;
  grid-template-columns: 260px 1fr; /* left = image, right = text */
  gap: 24px;                        /* space between them */
  align-items: center;
}

.hero img {
  width: 260px;
  height: auto;
  border-radius: 0;                  /* rectangle, not circle */
}
@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
  }
}
.back-top {
  text-align: center;    /* centers the link horizontally */
  margin-top: 1.5rem;    /* space above the link */
}

.back-top a {
  text-decoration: none;
  font-weight: 600;
  color: var(--link);
}

.back-top a:hover {
  text-decoration: underline;
}