/* Reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{height:100%}
body{line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}

/* Light theme only */
:root{
  --radius: 16px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.12);
  --shadow-2: 0 30px 60px rgba(0,0,0,.18);
  --bg: #f7f8fb; 
  --surface: #ffffff; 
  --text: #0e1325; 
  --muted: #6b7280; 
  --border: #e5e7eb; 
  --accent: #6d5efc; 
  --accent-2: #0ea5e9;
  --accent-3: #10b981;
  /* Fixed background gradient for the whole page */
  --gradient: radial-gradient(1200px 600px at 10% -10%, rgba(13, 148, 136, .25), transparent 60%),
              radial-gradient(800px 500px at 100% 10%, rgba(109, 94, 252,.25), transparent 60%),
              radial-gradient(600px 400px at 50% 120%, rgba(14, 165, 233,.22), transparent 60%);
}
/* Update base font styles for consistency */
p, .meta, .muted {
  font-size: 1rem;
  line-height: 1.6;
}

.meta, .muted {
  color: var(--muted);
  font-size: 0.95rem; /* This keeps the meta text slightly smaller, which looks good. */
}
.about-grid {
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 1.25rem;
    display: grid;
}

body{ 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial; 
  background: var(--bg); 
  color: var(--text); 
  background-image: var(--gradient);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100%; 
}
.container{ width:min(1200px, 92%); margin-inline:auto; }
.glass{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(12px); border:1px solid var(--border); }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; background:var(--surface); padding:.5rem .75rem; border-radius:10px; z-index:9999; }

/* Header */
header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background: rgba(247,248,251,.9); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.3px; }
.brand .logo{ width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:grid; place-items:center; box-shadow: var(--shadow-1); }
.brand .logo svg{ width:20px; height:20px; fill:white }
nav ul{ display:flex; gap:0.5rem; flex-wrap:wrap; list-style-type: none;}
nav a{ padding:.5rem .75rem; border-radius:999px; border:1px solid transparent; }
nav a:hover{ background:var(--surface); border-color:var(--border); }
.actions{ display:flex; gap:.5rem; align-items:center; }
.btn, button.btn{ border:1px solid var(--border); background:var(--surface); padding:.6rem .9rem; border-radius:999px; cursor:pointer; transition:transform .15s ease; }
.btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; border:none; box-shadow:var(--shadow-1); }
.btn:hover{ transform:translateY(-1px) }
.icon-btn{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--border); background:var(--surface); }

section{ 
  padding: 3rem 0; 
  background: transparent;
  position: relative;
}
.section-title{ font-size:1.4rem; margin-bottom:1rem; letter-spacing:.2px }
.grid{ display:grid; gap:1rem }

/* Hero */
.hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; padding: 4rem 0 2rem; align-items:center; }
.title{ font-size: clamp(2rem, 3vw + 1rem, 3.6rem); line-height:1; letter-spacing:-.02em; }
.subtitle{ font-size: clamp(1rem, .7vw + .7rem, 1.2rem); color:var(--muted); margin-top: .8rem; }
.cta{ display:flex; gap:.75rem; margin-top:1.4rem; flex-wrap:wrap; }
.hero .card{ padding:1.2rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-1); }
.hero-grid{ display:grid; gap:1rem; }
.stat{ display:flex; align-items:center; gap:.75rem; font-weight:600 }
.stat small{ font-weight:500; color:var(--muted); display:block }

/* Hero Image Styles */
.hero-image {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.profile-photo {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--border);
  background: var(--surface);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-photo:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-2), 0 0 20px rgba(109, 94, 252, 0.15);
}

.pill{ display:inline-flex; align-items:center; gap:.5ch; padding:.45rem .7rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:.95rem }
.pillgroup{ display:flex; flex-wrap:wrap; gap:.5rem }

.toolbar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem }
.toolbar .filter{ cursor:pointer }
.toolbar .filter.active{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; border-color:transparent }
.projects{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.card{ border:1px solid var(--border); border-radius: calc(var(--radius) + 2px); background:var(--surface); box-shadow: var(--shadow-1); overflow:hidden; display:flex; flex-direction:column }
.thumb{ aspect-ratio: 16/9; background: radial-gradient(100% 100% at 0 0, color-mix(in oklab, var(--accent) 50%, transparent), transparent), linear-gradient(135deg, color-mix(in oklab, var(--accent-2) 50%, transparent), transparent), linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.06)); border-bottom:1px solid var(--border); display:grid; place-items:center }
.thumb img{
  max-width:100%;
  height:auto;
}
.card-body{ padding:1rem; display:grid; gap:.75rem }
.card h3{ font-size:1.1rem }
.meta{ color:var(--muted); font-size:.95rem }
.tags{ display:flex; gap:.5rem; flex-wrap:wrap }
.card .actions{ margin-top:auto; padding:1rem; border-top:1px dashed var(--border); display:flex; gap:.5rem }

.timeline{ position:relative; margin-left: .5rem; }
.timeline::before{ content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:linear-gradient(var(--accent), var(--accent-2)); border-radius:2px }
.tl-item{ position:relative; padding-left:2.4rem; margin: 0 0 1.1rem; }
.tl-item::before{ content:""; position:absolute; left:5px; top:.5rem; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent) }
.tl-role{ font-weight:700 }
.tl-meta{ color:var(--muted); font-size:.95rem; margin-bottom:.2rem }

.contact-card{ display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem }
.contact-box{ padding:1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-1) }

footer{ padding:2.5rem 0; color:var(--muted); }
.social{ display:flex; gap:.6rem; flex-wrap:wrap }

.reveal{ opacity:0; transform: translateY(12px); transition: .6s ease }
.reveal.visible{ opacity:1; transform:none }

.muted{ color:var(--muted) }
.row{ display:flex; gap:.75rem; flex-wrap:wrap }

/* New toast notification styles */
.toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.toast {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  color: var(--text);
  font-weight: 500;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.skill-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Mobile Responsiveness */
@media (max-width: 980px){ 
  .hero{ grid-template-columns:1fr; padding-top: 3rem } 
  .contact-card{ grid-template-columns:1fr } 
  .projects{ grid-template-columns: repeat(2, 1fr) } 
      .about-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px){ 
  nav ul{ display:none } 
  .projects{ grid-template-columns:1fr }
  
  /* Hero image mobile styles */
  .profile-photo {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 500px){ 
  .title{ font-size:2rem; line-height:1.2 }
  .hero{ gap:1.5rem; padding:2rem 0 }
  .cta{ flex-direction:column; align-items:center }
  .projects{ grid-template-columns:1fr }
  .contact-card{ grid-template-columns:1fr }
  .profile-photo{ width:120px; height:120px }
}

.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--accent) }
.card:hover .thumb{ background:linear-gradient(135deg, var(--accent), var(--accent-2)) }

.btn:active{ transform:translateY(0); box-shadow:var(--shadow-1) }
.btn:hover:not(.primary){ background:linear-gradient(135deg, rgba(109,94,252,.1), rgba(14,165,233,.1)) }

.timeline::before{ background:linear-gradient(180deg, var(--accent), var(--accent-2), var(--accent)) }
.tl-item:hover{ transform:translateX(8px); transition:transform .3s ease }

/* Loading States */
.loading{ opacity:.6; pointer-events:none }
.fade-in{ opacity:0; animation:fadeIn .6s ease forwards }
@keyframes fadeIn{ to{ opacity:1 } }

/* Enhanced Focus for Accessibility */
.btn:focus,.filter:focus{ outline:3px solid var(--accent); outline-offset:3px }

/* Skill Progress Bars */
.skill-progress{ margin-top:1.5rem }
.skill-item{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem }
.progress-bar{ width:120px; height:8px; background:var(--border); border-radius:4px; overflow:hidden }
.progress{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:4px; transition:width 1s ease }

/* Enhanced Contact Methods */
.contact-methods{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:1.5rem }
.contact-method{ display:flex; align-items:center; gap:.5rem; transition:transform .2s ease }
.contact-method:hover{ transform:translateY(-2px) }
.contact-method .icon{ font-size:1.1rem }