:root{
  --bg:#0b0c0f;--text:#e7e9ee;--muted:#9aa3b2;
  --accent:#00e5ff;--card:#141720;--stroke:#202534;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
.c-container{max-width:1120px;margin:0 auto;padding:0 20px}
.c-section{padding:96px 0}
.c-grid{display:grid;gap:24px}
/* nav */
.c-nav{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(11,12,15,.95),rgba(11,12,15,.7) 70%,rgba(11,12,15,0));backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid rgba(255,255,255,.05)}
.c-nav_inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.c-brand{font-weight:800;letter-spacing:.08em}
.c-brand .dot{color:var(--accent)}
.c-nav_links{display:flex;gap:16px}
.c-nav_links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.c-nav_links a:hover{color:var(--text);border-color:var(--stroke)}
/* hero */
.c-hero{padding:120px 0 64px}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.h1{font-size:56px;line-height:1.05;margin:10px 0 8px}
.h2{font-size:28px;color:var(--muted);margin:0 0 12px}
.sub{color:var(--muted);max-width:840px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
/* btn */
.c-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--stroke);border-radius:12px;text-decoration:none;color:var(--text);transition:transform .2s,border-color .2s,background .2s}
.c-btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.c-btn--accent{background:linear-gradient(90deg,var(--accent),#7af6ff);color:#001015;border-color:transparent}
/* highlights */
.c-highlights{grid-template-columns:repeat(12,1fr)}
.c-thumb{grid-column:span 12;position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--stroke);cursor:pointer;background:var(--card)}
.c-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s}
.c-thumb:hover img{transform:scale(1.05)}
.c-cap{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);font-size:12px}
/* cards */
.c-cards{grid-template-columns:repeat(12,1fr)}
.c-card{grid-column:span 12;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
.c-title{font-size:20px;font-weight:700}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{font-size:12px;border:1px solid var(--stroke);padding:4px 10px;border-radius:999px}
.c-actions{display:flex;gap:10px}
.skill-list{display:flex;flex-wrap:wrap;gap:10px}
.skill{border:1px solid var(--stroke);background:rgba(255,255,255,.02);padding:10px 14px;border-radius:999px}
.c-footer{padding:40px 0;border-top:1px solid var(--stroke);color:var(--muted);font-size:14px}
@media (min-width:768px){.h1{font-size:64px}.c-card{grid-column:span 6}.c-thumb{grid-column:span 6}}
@media (min-width:1040px){.c-card{grid-column:span 4}.c-thumb{grid-column:span 3}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}