/* v9 */
/* ========== Design tokens ========== */
:root{
  --bg: #0b0e13;
  --bg-alt: #11151b;
  --text: #e6e9ef;
  --muted: #aab3c5;
  --accent: #7aa2ff;
  --accent-2: #a57bff;
  --card: #141923;
  --border: #1e2531;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --space: clamp(1rem, 2.5vw, 2rem);
  --space-lg: clamp(2rem, 6vw, 5rem);

  --h1: clamp(2.2rem, 6vw, 4rem);
  --h2: clamp(1.6rem, 3.5vw, 2.2rem);
  --lead: clamp(1.05rem, 2vw, 1.2rem);
}

/* Base text */
body {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}

/* Headings */
h1, h2, h3, h4 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 700;
}


/* ========== Basic reset ========== */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, #0e131b 100%);
}

/* Links */
a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* Layout helpers */
.container{
  width: min(1100px, 92%);
  margin-inline: auto;
}

/* ========== Header (Hero banner) ========== */
header{
  position: relative;
  min-height: 68vh;
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--space);
  text-align: center;

  /* Banner image + soft gradient overlay (edit banner.jpg) */
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(122,162,255,.22), rgba(165,123,255,.10) 40%, transparent 70%),
    linear-gradient(180deg, rgba(11,14,19,.55), rgba(11,14,19,.85)),
    url("banner.jpg") center/cover no-repeat;
}

header h1{
  margin: 0;
  font-size: var(--h1);
  letter-spacing: .5px;
  line-height: 1.1;
  text-shadow: 0 6px 30px rgba(0,0,0,.45);
}

.subtitle {
  font-family: inherit;
  font-size: 1.25rem;   /* slightly larger than body text */
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* Header nav */
header nav{
  margin-top: 1.6rem;
  display: inline-flex;
  gap: 1.25rem;
  padding: .5rem .75rem;
  backdrop-filter: blur(8px);
  background: rgba(20,25,35,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  text-decoration: none;
}
header nav a{
  color: var(--text);
  font-weight: 600;
  letter-spacing: .2px;
  position: relative;
  padding: .35rem .2rem;
  text-decoration: none;
}
header nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  text-decoration: none;
}
/* header nav a:hover::after{ transform: scaleX(1); } */

/* Optional CTA button in hero (only if you add it) */
.btn{
  display: inline-block;
  margin-top: 1.25rem;
  padding: .8rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #1a2230, #151c29);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }

/* ========== Sections ========== */
.section{
  padding: var(--space-lg) 0;
}
.section.alt{
  background:
    radial-gradient(1000px 400px at 50% 0%, rgba(122,162,255,.12), transparent 60%),
    var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Section headings with accent underline */
.section h2{
  font-size: var(--h2);
  margin: 0 0 .75rem;
  position: relative;
}
.section h2::after{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: .6rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Paragraph rhythm */
.section p{
  color: #d7dbe4;
  max-width: 70ch;
}

/* ========== Projects grid ========== */
#projects ul{
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
#projects li{
  background: linear-gradient(180deg, var(--card), #0f1520);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
#projects li:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-color: rgba(122,162,255,.35);
}
#projects li strong{
  display: block;
  margin-bottom: .35rem;
}

/* ========== Contact ========== */
#contact a{
  font-weight: 600;
}
#contact p{
  margin: .25rem 0;
}

/* ========== Footer ========== */
footer{
  text-align: center;
  padding: 2rem .5rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: #0b0f17;
  font-size: .95rem;
}

/* ========== Accessibility & small niceties ========== */
:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
::selection{
  background: rgba(122,162,255,.35);
}

/* ========== Mobile tweaks ========== */
@media (max-width: 520px){
  header nav{ gap: .75rem; }
  .btn{ width: 100%; }
}

/* Plain bullet list under Projects */
#projects ul.plain-list{
  list-style: disc;
  display: block;           /* cancel grid */
  margin: 1.5rem 0 0 1.25rem;
  padding-left: 0.25rem;
  gap: 0;
}

#projects ul.plain-list li{
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: .35rem 0;
  box-shadow: none;
  transform: none;
  transition: none;
}

#projects ul.plain-list li:hover{
  transform: none;
  box-shadow: none;
  border-color: inherit;
}

/* === About: text left, image right (overrides any old float rules) === */
#about .about-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

#about .about-text{
  flex: 1 1 55ch;          /* grows, but respects readable width */
  min-width: 0;            /* prevents overflow in flex */
}

#about .about-img{
  flex: 0 0 auto;
  float: none !important;  /* cancel previous float if it exists */
}

#about .about-img img{
  display: block;
  width: min(32vw, 320px); /* responsive cap */
  height: auto;
  border-radius: 12px;
  /* box-shadow: 0 8px 20px rgba(0,0,0,0.4); */
}

/* Stack on smaller screens */
@media (max-width: 800px){
  #about .about-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: -225px;
  }

  #about .about-img img {
    width: min(85%, 360px);
    margin-top: -225px;
  }
}


/* Hiring CTA card */
.cta-card {
  margin: 2.5rem auto 0 auto;
  max-width: 700px;
  padding: 2rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ff6ec7, #9b4dff); /* pink → purple */
  color: white;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* Title */
.cta-card h3 {
  margin: 0 0 1rem;
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  font-weight: 700;
}

/* Body text */
.cta-card .cta-body {
  font-family: 'Source Sans 3', 'Nunito', 'Lato', sans-serif; /* match your body font */
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0 auto 1.5rem;
  max-width: 55ch;
}

/* CTA link */
.cta-card .cta-link a {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  text-decoration: underline;
  transition: text-decoration 0.2s ease, color 0.2s ease;
}
.cta-card .cta-link a:hover {
  text-decoration: none;
  color: #ffe8ff; /* subtle hover color */
}
/* Animate arrows */
.cta-link .arrow {
  display: inline-block;
  /* animation: bounce 1s infinite; */
}

.cta-link .arrow:last-child {
  animation-delay: 0.2s; /* offset second arrow for nice rhythm */
}
@media (max-width: 800px){
  .cta-card {
    margin-left: 1.1rem;
    margin-right: 1.1rem;
  }
}

/* Keyframes for bounce effect */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Optional: animate color on hover */
.cta-link a:hover .arrow {
  animation: wiggle 0.6s infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}
/* Sparkle animation */
.sparkle {
  display: inline-block;
  /* animation: sparkle 1.5s infinite ease-in-out; */
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  25% {
    opacity: 0.6;
    transform: scale(1.2) rotate(10deg);
  }
  50% {
    opacity: 0.9;
    transform: scale(0.9) rotate(-10deg);
  }
  75% {
    opacity: 0.7;
    transform: scale(1.3) rotate(5deg);
  }
}
/* Allow long links in lists (like in Projects) to wrap on small screens */
#projects ul.plain-list a {
  word-break: break-word;       /* old fallback */
  overflow-wrap: anywhere;      /* modern browsers */
}

/* Links inside list wrap nicely */
#projects .fold .plain-list a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Wrapper */
.fold {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0f1520, var(--bg-alt));
  box-shadow: var(--shadow);
  margin-top: 1.25rem;
}

/* Summary behaves like clickable bar */
.fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.2rem;
  user-select: none;
}
.fold > summary::-webkit-details-marker { display: none; }

/* Heading + caret aligned */
.fold > summary h3 {
  margin: 0;
  font-weight: 700;
  display: flex;
  justify-content: space-between; /* text left, caret right */
  align-items: center;
}

/* Caret arrow */
.fold .caret {
  width: .75rem;
  height: .75rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform .2s ease;
  margin-left: .5rem;
}
.fold[open] .caret {
  transform: rotate(45deg);
}

/* Hover highlight */
.fold > summary:hover {
  background: rgba(255,255,255,.08);
}
.fold[open] > summary {
  background: rgba(255,255,255,.10);
}

/* Fold body */
.fold-body {
  padding: .6rem 1.2rem 1.2rem;
}