/* =========================================================
   Tokens — Liquid Glass theme
   ========================================================= */
:root{
  --bg-1:          #EDEAF7;
  --bg-2:          #F4F1FB;
  --ink:           #1E1B2E;
  --ink-dim:       #5B5670;
  --ink-faint:     #8B87A0;

  --glass-fill:    rgba(255,255,255,0.50);
  --glass-fill-2:  rgba(255,255,255,0.68);
  --glass-border:  rgba(255,255,255,0.75);
  --glass-shadow:  0 12px 40px -12px rgba(46,34,98,0.22);

  --accent-a:      #7C6FF0;
  --accent-b:      #5FA0FF;
  --accent-c:      #E56FD1;
  --accent-mint:   #34D8B0;

  --font-display:  'Space Grotesk', sans-serif;
  --font-logo:     'Fraunces', serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --max: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: linear-gradient(175deg, var(--bg-1), var(--bg-2) 55%, #EFEAFB);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; color: var(--ink); }
p{ margin:0; }
button, input, textarea{ font-family: inherit; }

:focus-visible{ outline: 2px solid var(--accent-a); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ===== Ambient blurred blobs ===== */
.bg-blobs{ position: fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%; filter: blur(70px); opacity:0.55;
  animation: drift 18s ease-in-out infinite;
}
.blob-1{ width:420px; height:420px; top:-120px; left:-100px; background: radial-gradient(circle, var(--accent-a), transparent 70%); }
.blob-2{ width:380px; height:380px; top:10%; right:-140px; background: radial-gradient(circle, var(--accent-b), transparent 70%); animation-delay: -4s; }
.blob-3{ width:340px; height:340px; bottom:12%; left:-120px; background: radial-gradient(circle, var(--accent-c), transparent 70%); animation-delay: -9s; }
.blob-4{ width:300px; height:300px; bottom:-100px; right:10%; background: radial-gradient(circle, var(--accent-mint), transparent 70%); animation-delay: -13s; }
.blob-5{ width:260px; height:260px; top:45%; left:38%; background: radial-gradient(circle, var(--accent-b), transparent 70%); opacity:0.35; animation-delay: -6s; }
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-24px) scale(1.06); }
}

.grid-overlay{
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(30,27,46,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,27,46,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 1000px 700px at 50% 0%, black, transparent 75%);
}

.section-inner, .hero-inner, .nav{ max-width: var(--max); margin: 0 auto; position: relative; z-index: 2; }
.section-inner, .hero-inner{ padding-left: 28px; padding-right: 28px; }

/* ===== Glass utility ===== */
.glass{
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
}

.glass-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--glass-fill-2);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  box-shadow: 0 6px 18px -8px rgba(46,34,98,0.18);
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--accent-mint);
  box-shadow: 0 0 0 4px rgba(52,216,176,0.25);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size:14.5px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
  color: var(--ink);
}
.btn .arrow, .btn .icon-down{ transition: transform .18s ease; }
.btn:hover .arrow{ transform: translateX(3px); }
.btn:hover .icon-down{ transform: translateY(2px); }

.btn-gradient{
  background: linear-gradient(115deg, var(--accent-a), var(--accent-b) 55%, var(--accent-c));
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(124,111,240,0.55);
}
.btn-gradient:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(124,111,240,0.65); }

.btn-glass{
  background: var(--glass-fill-2);
  border-color: var(--glass-border);
  backdrop-filter: blur(16px);
}
.btn-glass:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(46,34,98,0.25); }

.full-width{ width:100%; justify-content:center; }

/* =========================================================
   Nav
   ========================================================= */
.nav-wrap{ position: sticky; top:16px; z-index: 50; padding: 0 20px; }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px;
  padding: 12px 14px 12px 24px;
  border-radius: 999px;
}
.logo{ font-family: var(--font-logo); font-weight:600; font-size:20px; letter-spacing: 0.02em; }
.nav-links{ display:flex; gap:8px; }
.nav-links a{
  font-size: 14px; color: var(--ink-dim); font-weight:500;
  padding: 8px 14px; border-radius: 999px;
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover{ color: var(--ink); background: rgba(255,255,255,0.6); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-cta{ padding: 10px 18px; font-size:13.5px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:20px; height:2px; background: var(--ink); border-radius:2px; }

@media (max-width: 860px){
  .nav-links{
    position:absolute; top: calc(100% + 8px); left:0; right:0;
    flex-direction:column; gap:4px; padding: 10px;
    border-radius: var(--radius-md);
    background: var(--glass-fill-2);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .nav-links.open{ max-height: 300px; opacity:1; }
  .nav-links a{ padding:12px 16px; }
  .nav-right{ display:none; }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{ padding-top: 56px; position:relative; }
.hero-inner{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:40px;
  align-items:center;
  padding-top: 44px; padding-bottom: 70px;
}
.hero-title{
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.03;
  margin-bottom: 20px;
}
.grad-text{
  background: linear-gradient(100deg, var(--accent-a), var(--accent-b), var(--accent-c));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.hero-role{
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent-a);
  min-height: 24px;
  margin-bottom: 22px;
}
.cursor{ animation: blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.hero-desc{ max-width: 480px; color: var(--ink-dim); font-size: 16px; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 30px; }
.hero-socials{ display:flex; gap:12px; }
.hero-socials a{
  width:38px; height:38px; border-radius:50%;
  background: var(--glass-fill-2);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:12px; color: var(--ink-dim);
  transition: all .18s ease;
}
.hero-socials a:hover{ color: var(--accent-a); transform: translateY(-2px); }

.hero-visual{ position: relative; display:flex; justify-content:center; align-items:center; min-height: 420px; }
.photo-frame{
  position: relative; width: 300px; height: 300px;
  border-radius: 44% 56% 58% 42% / 48% 44% 56% 52%;
  padding: 10px;
  overflow: hidden;
}
.photo-frame img{
  width:100%; height:100%; object-fit:cover;
  border-radius: 44% 56% 58% 42% / 48% 44% 56% 52%;
}

.float-card{
  position:absolute;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

.card-stack{ top: 4%; left: -10%; width: 190px; animation-delay: .2s; }
.fc-label{ font-family: var(--font-mono); font-size:11px; color: var(--ink-faint); margin-bottom:10px; text-transform:uppercase; letter-spacing:.05em; }
.fc-bars{ display:flex; flex-direction:column; gap:8px; }
.fc-bar-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; }
.fc-bar-row span{ width: 74px; color: var(--ink-dim); font-family: var(--font-mono); font-size: 10.5px; }
.fc-bar-row i{ display:block; height:5px; border-radius:4px; flex:1; background: rgba(30,27,46,0.08); position:relative; overflow:hidden; }
.fc-bar-row i::after{
  content:''; position:absolute; inset:0; width: var(--w);
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  border-radius:4px;
}

.card-exp{ bottom: 8%; right: -10%; display:flex; flex-direction:column; align-items:center; gap:2px; animation-delay: .8s; }
.card-cgpa{ top: 2%; right: -6%; display:flex; flex-direction:column; align-items:center; gap:2px; animation-delay: 1.4s; }
.fc-num{ font-family: var(--font-display); font-size: 22px; color: var(--accent-a); font-weight:700; }
.fc-sub{ font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }

@media (max-width: 640px){ .card-stack, .card-exp, .card-cgpa{ display:none; } }

.stats-bar{
  max-width: var(--max); margin: 0 auto;
  padding: 0 28px 64px;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position:relative; z-index:1;
}
.stat{
  border-radius: var(--radius-md);
  padding: 22px 20px;
  display:flex; flex-direction:column; gap:4px;
}
.stat-num{ font-family: var(--font-display); font-size: 26px; font-weight:700; color: var(--ink); }
.stat-label{ font-size: 12.5px; color: var(--ink-dim); }

@media (max-width: 700px){ .stats-bar{ grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   Sections (shared)
   ========================================================= */
.section{ padding: 90px 0; position:relative; z-index:1; }
.section-alt{ background: rgba(255,255,255,0.22); border-top:1px solid rgba(255,255,255,0.5); border-bottom:1px solid rgba(255,255,255,0.5); }
.section-head h2{ font-size: clamp(28px, 4vw, 38px); max-width: 620px; }
.section-head{ margin-bottom: 48px; }

/* About */
.about-body p{ color: var(--ink-dim); max-width: 720px; margin-bottom: 16px; font-size: 15.5px; }
.about-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.about-col{ border-radius: var(--radius-lg); padding: 24px; }
.about-col h3{ font-size: 12.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--accent-a); font-family: var(--font-mono); margin-bottom:14px; }
.edu-school{ font-weight:600; font-size:15.5px; }
.edu-degree{ color: var(--ink-dim); font-size:14px; margin-top:2px; }
.edu-meta{ font-family: var(--font-mono); font-size:12.5px; color: var(--ink-faint); margin-top:6px; }
.cert-list li{ color: var(--ink-dim); font-size: 14px; padding: 7px 0; border-top: 1px solid rgba(30,27,46,0.08); }
.cert-list li:first-child{ border-top:none; }

@media (max-width: 760px){ .about-cols{ grid-template-columns: 1fr; } }

/* Skills */
.skills-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 40px; }
.skill-card{
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.skill-card:hover{ transform: translateY(-5px); }
.skill-icon{
  display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color:#fff; font-size: 17px; margin-bottom: 16px;
}
.skill-card h3{ font-size: 16px; margin-bottom: 8px; }
.skill-card p{ font-size: 13.5px; color: var(--ink-dim); }

.tech-strip{ border-radius: var(--radius-lg); padding: 26px 28px; }
.tech-tags{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; }
.tech-tags span{
  font-family: var(--font-mono); font-size: 12.5px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.8); color: var(--ink-dim);
}

@media (max-width: 900px){ .skills-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .skills-grid{ grid-template-columns: 1fr; } }

/* Projects — logo tile cards like the reference dashboard */
.projects-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.project-card{
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{ transform: translateY(-6px); }
.project-logo{
  width: 100%; height: 92px;
  border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: 22px; letter-spacing:.04em;
  margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.logo-dark{ background: linear-gradient(135deg, #241F3D, #4A3F7A); color:#fff; }
.logo-light{ background: rgba(255,255,255,0.75); color: var(--accent-a); border: 1px solid rgba(255,255,255,0.9); }
.logo-mint{ background: linear-gradient(135deg, #1F7A64, var(--accent-mint)); color:#fff; }

.status-pill{
  position:absolute; top:8px; right:8px;
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font-mono); font-size: 10px; font-weight:500;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.85); color: var(--ink);
  backdrop-filter: blur(6px);
}
.status-live{ color: #0E9A72; }
.status-dev{ color: #B4780F; }
.status-soon{ color: var(--ink-faint); }

.project-link{ display:block; }
.project-link:hover{ text-decoration:none; }

.project-card h3{ font-size: 16.5px; margin-bottom: 4px; }
.project-sub{ font-size: 12px; color: var(--ink-faint); margin-bottom: 10px; font-family: var(--font-mono); }
.project-desc{ font-size: 13px; color: var(--ink-dim); margin-bottom: 16px; }
.project-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.project-tags span{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  background: rgba(255,255,255,0.55); padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7);
}
.tag-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.dot-ok{ background: var(--accent-mint); }
.dot-warn{ background: #F5B860; }
.dot-soon{ background: var(--ink-faint); }

@media (max-width: 980px){ .projects-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .projects-grid{ grid-template-columns: 1fr; } }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items:start; }
.contact-sub{ color: var(--ink-dim); font-size: 15px; margin: 6px 0 30px; display:block; max-width: 420px; }
.contact-details{ display:flex; flex-direction:column; border-radius: var(--radius-lg); padding: 6px 24px; }
.contact-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 0; border-top: 1px solid rgba(30,27,46,0.08);
  transition: color .18s ease;
}
.contact-details a:first-child{ border-top:none; }
.contact-row:hover{ color: var(--accent-a); }
.contact-label{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.contact-value{ font-size: 14.5px; font-weight:500; }

.contact-form{ border-radius: var(--radius-lg); padding: 30px; display:flex; flex-direction:column; gap:18px; }
.contact-form label{ display:flex; flex-direction:column; gap:8px; font-size:13px; color: var(--ink-dim); }
.contact-form input, .contact-form textarea{
  background: rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.8); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--ink); font-size: 14.5px; resize: vertical;
  transition: border-color .18s ease, background .18s ease;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--accent-a); outline:none; background: rgba(255,255,255,0.8); }
.form-note{ font-size: 13px; color: var(--accent-a); min-height: 18px; }

@media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } }

/* Footer */
.footer{
  border-radius: var(--radius-lg);
  margin: 0 20px 30px;
  padding: 24px 28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size: 13px; color: var(--ink-faint);
  position:relative; z-index:1;
  max-width: calc(var(--max) - 40px);
  margin-left:auto; margin-right:auto;
}
.back-top{ color: var(--ink-dim); transition: color .18s ease; }
.back-top:hover{ color: var(--accent-a); }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }