/* === CSS RESET, minimalist === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  --bg: #0a0a0a;
  --fg: #ffffff;
  --accent: #0a84ff;    /* OpenAI‑ish electric blue */

  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
}

/* Layout helpers */
.container { width: min(90%, 1000px); margin-inline: auto; }
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.show { opacity: 1; transform: none; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; gap: 2rem; padding: 4rem 0 3rem; align-items: center; }
.profile-wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 20px;
  flex-shrink: 0;
}
.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.intro h1 { font-weight: 600; font-size: 2rem; margin-bottom: .3rem; }
.subtitle a { color: var(--accent); text-decoration: none; }
.subtitle a:hover { text-decoration: underline; }

/* Projects */
#projects { padding-block: 2rem 5rem; }
#projects > h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }

.project-card { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; align-items: flex-start; }
.project-card .img-wrapper { width: 140px; height: 140px; overflow: hidden; border-radius: 16px; flex-shrink: 0; }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.project-card:hover img { transform: scale(1.07); }
.details h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .2rem; }
.details a { color: var(--accent); text-decoration: none; }
.details a:hover { text-decoration: underline; }
.details p {
  max-width: 80ch; /* was 60ch; allows lines to run a bit longer before wrapping */
}

.date { color:#9a9a9a; font-size:1rem; margin:.15rem 0 .55rem; line-height:1.3; }

.footer { text-align: center; padding: 3rem 0 2rem; font-size: .9rem; color: #aaa; }
.footer a { color: var(--accent); }



.ai { transition: color .3s, text-shadow .3s; }
.hero:hover .ai { color: var(--accent); text-shadow: 0 0 8px var(--accent); }

/* Spacing */
.cta-buttons{
    margin-top: 1.4rem;
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
  }

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1.1rem;border-radius:9999px;background:var(--accent,rgba(255,255,255,.1));color:var(--btn-fg,#fff);font-weight:600;text-decoration:none;line-height:1.1;transition:transform .15s,box-shadow .15s,background .15s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25);}
.btn.outline{background:transparent;color:var(--accent, #5ec7ff);border:1px solid var(--accent, #5ec7ff);} 
.btn.outline:hover{background:var(--accent, #5ec7ff);color:#fff;}

/* Turn project links into mini buttons */
.details h3 a{display:inline-block;padding:.3rem .7rem;margin:0 .3rem .4rem 0;border-radius:.5rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-decoration:none;font-size:.85rem;transition:background .15s,transform .15s;}
.details h3 a:hover{background:rgba(255,255,255,.15);transform:translateY(-2px) scale(1.02);} 


/* Responsive tweaks */
.hero:hover .profile-img { transform: scale(1.07); }

.btn svg{width:1.05em;height:1.05em;fill:currentColor;display:block;}

/* LinkedIn "in" square */
.btn .li-box{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.2em;
    height:1.2em;
    border-radius:4px;
    font-weight:700;
    font-size:.9em;
    line-height:1;
    flex-shrink:0;
  }
  .btn:not(.outline) .li-box{ /* filled blue button */
    background:#fff;
    color:var(--accent);
  }
  .btn.outline .li-box{ /* outline button */
    background:var(--accent);
    color:#fff;
  }

  @media (max-width: 600px) {
    .hero { flex-direction: column; text-align: center; align-items: center; }
    .intro { width: 100%; }
    .cta-buttons{ justify-content: center; margin-left:auto; margin-right:auto; }
    .project-card { flex-direction: column; align-items: center; text-align: center; }
    .details p { text-align: center; }
  }