/* stylesheets/style.css */
:root{
  --bg: #0b0e14;
  --card:#121826;
  --muted:#8a93a6;
  --text:#e6ebff;
  --accent:#6aa6ff;
  --accent-2:#6effc2;
  --ring: rgba(106,166,255,.35);
  --radius: 16px;
  --maxw: 1100px;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.footer-contact a {
  color: var(--accent);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

/* highly specific css */
*{box-sizing:border-box}
html,body{margin:0; padding:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif; background:var(--bg); color:var(--text);}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1rem}
header{position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:700}
.dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 6px var(--ring)}
.nav a{opacity:.9}
.links{display:flex; gap:1rem}
.links a{padding:.5rem .75rem; border-radius:10px}
.links a:hover{background:rgba(255,255,255,.06)}
.hero{padding:72px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}

/* screen-based css */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fc; --card:#ffffff; --muted:#5b6476; --text:#121826;
    --accent:#1f6fff; --accent-2:#0fb57a; --ring: rgba(31,111,255,.25);
  }
}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.title{font-size:clamp(1.8rem, 2.5vw + 1rem, 3rem); line-height:1.15; margin:0 0 .75rem}
.subtitle{color:var(--muted); margin:0 0 1.25rem; max-width:60ch}
.cta{display:flex; gap:.75rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-radius:12px; font-weight:600; border:1px solid rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0e14; border:none}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:1rem}
section{padding:36px 0}
section h2{font-size:1.5rem; margin:0 0 .75rem}
section p.lead{color:var(--muted); max-width:65ch}
.grid{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}

@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:640px){.grid{grid-template-columns:1fr}}
.project{display:flex; flex-direction:column; gap:.75rem}
.project .thumb{aspect-ratio:16/9; background:linear-gradient(135deg, rgba(106,166,255,.2), rgba(110,255,194,.2)); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.07)}
.project h3{margin:.25rem 0 0; font-size:1.05rem}
.project p{color:var(--muted); margin:0}
.skills{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{padding:.5rem .7rem; border-radius:10px; border:1px dashed rgba(255,255,255,.2)}
footer{padding:30px 0 60px; color:var(--muted); text-align:center}