/* Shaista Shabbir · Portfolio CV — clean, responsive, modern */
:root{
  --bg:#0b1220;
  --bg2:#101a2e;
  --text:#e6eefb;
  --muted:#b6c2d9;
  --accent:#4ad6ff;
  --accent2:#7a5cff;
  --card:#111a30cc;
  --border:#22314f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(135deg,var(--bg),var(--bg2));color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji',sans-serif;line-height:1.6}

.container{width:min(1100px,92vw);margin:0 auto}

.hero{position:relative;overflow:hidden;padding:70px 0 40px;border-bottom:1px solid var(--border)}
.hero__content{display:grid;grid-template-columns:1.3fr 0.7fr;gap:24px;align-items:center}
.hero__left h1{font-size:48px;line-height:1.1;margin:0 0 6px;font-weight:800}
.subtitle{font-size:20px;color:var(--accent);margin:0 0 8px}
.tagline{color:var(--muted);max-width:48ch}
.tagline .de{opacity:.8}
.cta{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}

.btn{display:inline-block;padding:10px 16px;border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;background:transparent;transition:.2s}
.btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101e;border-color:transparent;font-weight:600}
.btn.ghost{opacity:.9}

.hero__right .avatar{
  width:220px;
  height:auto;           /* keep proportions */
  object-fit:contain;    /* no cropping */
  border-radius:16px;
  border:2px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  margin-top:4px;
}
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;   /* ensure it stretches fully */
  height: 250px;
  width: 100%;  /* optional but explicit */
  background:
    radial-gradient(1000px 300px at 10% 10%, rgba(74,214,255,.18), transparent),
    radial-gradient(800px 280px at 85% -10%, rgba(122,92,255,.22), transparent);
  z-index: -1; /* keep it behind content if needed */
}

.scroll{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);opacity:.6}
.scroll span{display:block;width:26px;height:42px;border:2px solid var(--border);border-radius:16px;position:relative}
.scroll span::after{content:'';position:absolute;left:50%;top:8px;width:6px;height:6px;background:var(--muted);border-radius:50%;transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{top:8px;opacity:1}70%{top:20px;opacity:0}100%{top:8px;opacity:0}}

main{padding:32px 0 80px}
.card{background:var(--card);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:16px;margin:18px 0;padding:22px 20px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
h2{margin:0 0 10px}
h3{margin:0 0 8px}
.lead{margin:0}
.meta{list-style:none;margin:0;padding:0}
.meta li{margin:6px 0;color:var(--muted)}
.meta a{color:var(--text)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:10px 0;border-bottom:1px dashed var(--border)}
.timeline li:last-child{border-bottom:none}
.t-title{font-weight:600}
.t-sub{color:var(--muted)}
.t-note{font-size:.95rem;color:var(--accent)}
.bullets{margin:.25rem 0 .25rem 1rem}
.bullets li{margin:.4rem 0}
.exp article{padding:12px 0;border-bottom:1px dashed var(--border)}
.exp article:last-child{border-bottom:none}
.exp header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.exp h4{margin:0}
.footer{padding:30px 0;border-top:1px solid var(--border);text-align:center;color:var(--muted)}

@media (max-width: 860px){
  .hero__content{grid-template-columns:1fr}
  .hero__right{order:-1;display:flex;justify-content:center}
  .hero__left h1{font-size:40px}
  .grid.two{grid-template-columns:1fr}
}

/* Theme support */
:root{ --theme-bg: linear-gradient(135deg,var(--bg),var(--bg2)); }
html[data-theme='light']{
  --bg:#f7f9fc; --bg2:#e9eef7; --text:#0e1422; --muted:#334155; --card:#ffffffcc;
  --border:#d6e0f5; --accent:#0057ff; --accent2:#6f3cff;
}
html[data-theme='light'] body{ background: var(--theme-bg); }
#theme-toggle{margin-left:6px}

/* Projects grid */
#projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:12px}
.project{display:block;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);text-decoration:none}
.project h4{margin:0 0 6px}
.project p{margin:0 0 10px;color:var(--muted);min-height:40px}
.project .meta{display:flex;gap:10px;color:var(--muted);font-size:.9rem}

#nn-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.35; pointer-events:none}
.hero > *{position:relative; z-index:1}
.muted{color:var(--muted)}
input, textarea{width:100%; padding:10px 12px; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:10px}
input:focus, textarea:focus{outline:none; border-color:var(--accent)}
label{display:block; margin:8px 0}