@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(fonts/space-grotesk-latin.woff2) format('woff2')}
*{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;padding:0;min-height:100vh;overflow-x:hidden;transition:background .4s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.6;font-weight:400}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{margin:0;font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{text-decoration:none}
button{font:inherit}
::selection{background:rgba(167,139,250,.35)}
.nav-brand-light{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-0.02em}

/* === THEME COLORS === */
body.dark{background:#0f172a;color:#f1f5f9}
body.light{background:#c7d2fe;color:#1f2937}

body.dark .nav-brand-light{color:#f1f5f9}
body.light .nav-brand-light{color:#1f2937}
body.dark .nav-brand-dot{color:#a78bfa}
body.light .nav-brand-dot{color:#6d28d9}

body.dark .text-main{color:#f1f5f9}
body.light .text-main{color:#1f2937}
body.dark .text-muted{color:#94a3b8}
body.light .text-muted{color:#6b7280}
body.dark .text-btn{color:#e2e8f0}
body.light .text-btn{color:#1e293b}
body.dark .text-accent{color:#a78bfa}
body.light .text-accent{color:#6d28d9}

body.dark .nav-link{color:#cbd5e1}
body.light .nav-link{color:#374151}
body.dark .nav-link:hover{color:#a78bfa}
body.light .nav-link:hover{color:#6d28d9}
body.dark .pill-indigo{color:#818cf8}
body.light .pill-indigo{color:#4338ca}
body.dark .pill-blue{color:#60a5fa}
body.light .pill-blue{color:#1d4ed8}
body.dark .pill-green{color:#4ade80}
body.light .pill-green{color:#15803d}

/* === THEME ICONS === */
body.light .sun-icon{display:block}
body.light .moon-icon{display:none}
body.dark .sun-icon{display:none}
body.dark .moon-icon{display:block}

/* === VANTA BG === */
#vanta-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}

/* ============================================
   GLASSMORPHISM BASE
   ============================================ */

/* --- Glass Panel (Navbar) --- */
.clay-nav{
  border-radius:50px;
  transition:background .4s ease,box-shadow .4s ease;
  position:relative;
  overflow:hidden;
}
body.dark .clay-nav{
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.08),inset 0 -1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
}
body.light .clay-nav{
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.7),inset 0 -1px 0 rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.5);
}
.clay-nav::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent)}
body.light .clay-nav::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent)}

/* --- Glass Card --- */
.clay-card{
  border-radius:20px;
  position:relative;
  overflow:hidden;
  transition:transform .4s ease;
}
body.dark .clay-card{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.08),inset 0 -1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
}
body.light .clay-card{
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.7),inset 0 -1px 0 rgba(255,255,255,0.2),inset 0 0 20px 10px rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.45);
}
.clay-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent)}
body.light .clay-card::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent)}
.clay-card::after{content:'';position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent,rgba(255,255,255,0.15))}
body.light .clay-card::after{background:linear-gradient(180deg,rgba(255,255,255,0.9),transparent,rgba(255,255,255,0.3))}

/* --- Glass Button --- */
.clay-button{
  border-radius:14px;
  position:relative;
  overflow:hidden;
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
  line-height:1;
  white-space:nowrap;
}
body.dark .clay-button{
  background:rgba(255,255,255,0.07);
  box-shadow:0 4px 16px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.08),inset 0 -1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
}
body.light .clay-button{
  background:rgba(255,255,255,0.5);
  box-shadow:0 4px 16px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.7),inset 0 -1px 0 rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.5);
}
.clay-button::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent)}
body.light .clay-button::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent)}
.clay-button:hover{transform:translateY(-2px)}
body.dark .clay-button:hover{background:rgba(255,255,255,0.12);box-shadow:0 6px 24px rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.12)}
body.light .clay-button:hover{background:rgba(255,255,255,0.65);box-shadow:0 6px 24px rgba(0,0,0,0.08);border-color:rgba(255,255,255,0.7)}

/* --- Glass Pill --- */
.clay-pill{
  border-radius:50px;
  position:relative;
  line-height:1.4;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
}
body.dark .clay-pill{
  background:rgba(255,255,255,0.06);
  box-shadow:0 2px 8px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.06);
}
body.light .clay-pill{
  background:rgba(255,255,255,0.45);
  box-shadow:0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.5);
}

/* === BUTTONS (Page Toggle & Theme Toggle) === */
#pageToggleBtn,#themeToggleBtn{
  width:38px;height:38px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s ease,transform .3s ease;
}
#pageToggleBtn:hover,#themeToggleBtn:hover{transform:scale(1.1)}
body.dark #pageToggleBtn,body.dark #themeToggleBtn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1)}
body.light #pageToggleBtn,body.light #themeToggleBtn{background:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.5)}

/* === SECTION TRANSITIONS === */
html,body{height:100%;overflow:hidden}
.sections-container{transition:width .5s ease-in-out,height .5s ease-in-out;width:100%;height:100vh;height:100dvh;overflow:hidden}
.left-section,.right-section{transition:width .5s ease-in-out,opacity .5s ease-in-out,padding .5s ease-in-out;height:100vh;height:100dvh}

@media(min-width:768px){
  .sections-container{flex-direction:row}
  .sections-container.left-active .left-section{width:100%;opacity:1;overflow-y:auto;overflow-x:hidden;padding:4rem 5rem;display:flex}
  .sections-container.left-active .left-section .clay-card{margin:auto}
  .sections-container.left-active .right-section{width:0;opacity:0;overflow:hidden;padding:0;min-height:0}
  .sections-container.right-active .left-section{width:0;opacity:0;overflow:hidden;padding:0;min-height:0}
  .sections-container.right-active .right-section{width:100%;opacity:1;overflow-y:auto;padding:4rem 5rem}
}

@media(max-width:767px){
  .sections-container{flex-direction:column;height:100vh;height:100dvh}
  .sections-container.left-active .left-section{width:100%;opacity:1;overflow-y:auto;overflow-x:hidden;padding:3.5rem 3rem;display:flex}
  .sections-container.left-active .left-section .clay-card{margin:auto}
  .sections-container.left-active .right-section{width:100%;height:0;opacity:0;overflow:hidden;padding:0;min-height:0}
  .sections-container.right-active .left-section{width:100%;height:0;opacity:0;overflow:hidden;padding:0;min-height:0}
  .sections-container.right-active .right-section{width:100%;opacity:1;overflow-y:auto;padding:3.5rem 3rem}
  .clay-card{border-radius:16px}
}

/* === PROJECTS === */
.projects-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
.project-preview{border-radius:0 0 12px 12px;overflow:hidden;line-height:0}
.project-preview img{width:100%;height:auto;display:block;object-fit:cover}
body.dark .project-preview{background:rgba(0,0,0,.2)}
body.light .project-preview{background:rgba(255,255,255,.2)}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:4px}