/* index.css — Professional portfolio styles */
:root{
  --bg:#0f1724; /* deep background */
  --card:#0b1220;
  --muted:#93a0b4;
  --accent:#6c5ce7; /* purple accent */
  --accent-2:#00b894; /* green accent */
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --max-width:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#07101a 0%, #0e1724 100%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1.25rem}

/* Header */
.site-header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:10;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.brand .name{font-weight:600;margin:0;font-size:1.25rem;letter-spacing:0.4px}
.brand .tag{margin:0;color:var(--muted);font-size:0.9rem}
.nav{display:flex;gap:1rem;align-items:center}
.search{background:var(--glass);border:1px solid rgba(255,255,255,0.03);color:inherit;padding:0.55rem 0.8rem;border-radius:10px;min-width:220px}
.search:focus{outline:2px solid rgba(108,92,231,0.22);box-shadow:0 4px 20px rgba(12,10,20,0.6)}

/* Hero */
.hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:2rem 0}
.hero-title{font-size:1.6rem;margin:0 0 0.5rem 0}
.hero-sub{color:var(--muted);margin:0 0 1rem 0}
.hero-sub a{color:var(--accent);text-decoration:none}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:0.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:600}

/* Portfolio grid */
.section-title{margin:0 0 1rem 0;color:var(--muted);font-size:0.95rem}
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
.card{display:flex;flex-direction:column;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03);padding:0;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.card:focus{outline:2px solid rgba(108,92,231,0.18);transform:translateY(-4px)}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.media{height:120px;display:block;overflow:hidden}
.media-thumb{height:120px;background-size:cover;background-position:center}
.card-body{padding:1rem}
.card-title{margin:0;font-size:1.05rem;display:flex;align-items:baseline;gap:0.5rem}
.project-year{color:var(--muted);font-size:0.85rem;font-weight:500}
.card-excerpt{margin:0.5rem 0;color:var(--muted);font-size:0.95rem}
.meta{font-size:0.85rem;color:var(--muted)}
.project-links a{color:var(--accent);text-decoration:none}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:2rem}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.78));backdrop-filter: blur(10px) saturate(120%)}
.modal-panel{position:relative;z-index:2;max-width:900px;width:100%;background-color:rgba(10,14,20,0.88);background-image:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));background-blend-mode:overlay;border-radius:14px;padding:1.25rem;border:1px solid rgba(255,255,255,0.06);box-shadow:0 30px 80px rgba(2,8,20,0.85);backdrop-filter: blur(8px) saturate(120%);transform-origin:center center;animation:pop .18s cubic-bezier(.2,.9,.3,1)}
.modal-close{position:absolute;right:14px;top:10px;background:transparent;border:0;color:#cfe9ff;font-size:1.6rem;cursor:pointer}
.modal-content h4{margin-top:0}

@keyframes pop{0%{opacity:0;transform:scale(.98) translateY(6px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.modal-content p{color:var(--muted)}

/* Responsive */
@media(min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:980px){
  .grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
  .hero{padding:3rem 0}
  .hero-title{font-size:1.8rem}
}

/* Accessibility & print */
a:focus{outline:2px solid rgba(108,92,231,0.22)}
@media print{body{background:white;color:black} .site-header, .cta, .search, .modal{display:none}}

/* Tiny utility */
.hidden{display:none !important}