:root{
  --bg:#0d0f12; --card:#11151a; --muted:#9aa3ad; --fg:#e8edf2; --link:#8ab4ff;
  --accent:#00c26e; --accent-weak:#2a3340; --btn:#1c2330; --btn-hover:#222b3a;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --logo-fill:#18A6A2;
   --logo-teal:#2ca5a0;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#fff; --card:#f7f9fb; --muted:#5b6673; --fg:#0f1419; --link:#2b6cb0;
         --accent:#0a7f2e; --accent-weak:#e6ecf2; --btn:#eef3f8; --btn-hover:#e4ebf3;
         --shadow: 0 10px 20px rgba(16,24,40,.08); --logo-teal:#2ca5a0; }
}
@media (prefers-color-scheme: dark){ :root{ --logo-fill:#5eead4; } }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }
a{ color:var(--link); text-decoration:none; } a:hover{ text-decoration:underline; }
.container{ max-width:800px; margin:8vh auto; padding:0 1.25rem; }
@media (max-width:600px){
  .container{ margin:4vh auto; padding:0 1rem; }
}
.hero{ margin-bottom:1.75rem; display:flex; flex-direction:column; gap:0.5rem; }
.hero-header{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero-header img{ width:clamp(56px, 8vw, 88px); height:auto; flex-shrink:0; object-fit:contain; overflow:visible; }
.name{ font-size:clamp(1.8rem,4vw,3rem); line-height:1.1; margin:0; letter-spacing:-.02em; word-break:keep-all; }
.tagline{ margin:0 0 .5rem 0; color:var(--muted); font-size:1.05rem; }
.typewrap{ margin:0.8rem 0 0.6rem; font-size:clamp(1.1rem,2.5vw,1.4rem); color:var(--muted); line-height:1.4; }
.typewrap strong{ color:var(--fg); font-weight:700; }
.caret{ display:inline-block; width:.6ch; margin-left:.1rem; border-right:2px solid currentColor; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{border-color:transparent;} }
.links{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:0.3rem 0 0.8rem; }
.btn{ display:inline-block; padding:.55rem .8rem; border-radius:.65rem; background:var(--btn); color:var(--fg); border:1px solid var(--accent-weak); transition:transform .12s ease, background .12s ease, border-color .12s ease; }
.btn:hover{ background:var(--btn-hover); border-color:#3b475a; transform:translateY(-1px); }
.card{
  background: color-mix(in srgb, var(--logo-teal) 7%, var(--card)); /* subtle teal tint */
  border: 1px solid color-mix(in srgb, var(--logo-teal) 40%, var(--accent-weak));
  border-radius: 16px;
  padding: 1rem 1rem;
  margin: 1rem 0;
  box-shadow: var(--shadow);
  transition: background .3s ease, border-color .3s ease;
}

.card:hover{
  background: color-mix(in srgb, var(--logo-teal) 12%, var(--card));
  border-color: var(--logo-teal);
}

.card h2{ margin:.2rem 0 .6rem; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.items{ list-style:disc; padding-left:1.25rem; margin:0; }
.items li{ padding:.4rem 0; }
.worked{ color:var(--muted); padding-left:.5rem; }
.foot{ margin:2rem 0 1rem; color:var(--muted); font-size:.92rem; text-align:center; }
@media (max-width:600px){
  .btn{ font-size:.9rem; padding:.45rem .7rem; }
  .card{ padding:.8rem; }
  .hero-header{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .hero-header img{ align-self:center; }
}