/* =========================================
   VARIABLES & THEME
   ========================================= */
:root {
   --bg-main: #36454F;
   --bg-dark: #2a363e;
   --bg-darker: #1e262c;
   --bg-card: #2f3d46;
   --border-color: #4a5c68;
   --border-highlight: #5b7180;
   --text-main: #e2e8f0;
   --text-muted: #94a3b8;
   --text-accent: #cbd5e1;
   --term-red: #e06c75;
   --term-yellow: #e5c07b;
   --term-green: #98c379;
   --transition-fast: 0.2s ease-out;
   --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   RESET & BASE
   ========================================= */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   background: var(--bg-main);
   color: var(--text-main);
   font-family: 'Inter', -apple-system, sans-serif;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased
}

h1,
h2,
h3,
.nav-logo,
.prompt,
.command {
   font-family: 'Fira Code', monospace;
   font-weight: 500
}

a {
   color: var(--text-main);
   text-decoration: none;
   transition: color var(--transition-fast)
}

a:hover {
   color: #fff
}

/* =========================================
   LAYOUT
   ========================================= */
.container {
   max-width: 1000px;
   margin: 0 auto;
   padding: 0 2rem
}

.section-block {
   padding: 6rem 0;
   min-height: 50vh
}

/* =========================================
   NAVIGATION
   ========================================= */
#navbar {
   position: fixed;
   top: 0;
   width: 100%;
   background: rgba(54, 69, 79, .92);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--border-color);
   z-index: 100;
   transition: transform var(--transition-smooth)
}

.nav-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 1.25rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.nav-logo {
   font-size: 1.1rem;
   color: var(--text-muted)
}

.nav-logo:hover {
   color: var(--text-main)
}

.nav-links {
   display: flex;
   gap: 2rem
}

.nav-link {
   font-size: .9rem;
   color: var(--text-muted);
   letter-spacing: .05em
}

/* =========================================
   HERO
   ========================================= */
.section-hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding-top: 5rem;
   padding-bottom: 2rem;
   animation: heroFadeUp .8s ease-out forwards
}

@keyframes heroFadeUp {
   from {
      opacity: 0;
      transform: translateY(20px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.hero-split {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 4rem;
   width: 100%
}

.hero-left {
   flex: 0 0 35%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center
}

.profile-img {
   width: 250px;
   height: 250px;
   object-fit: cover;
   border-radius: 50%;
   border: 4px solid var(--border-color);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
   transition: transform .4s, border-color .4s;
   margin-bottom: 1.5rem
}

.profile-img:hover {
   transform: scale(1.03);
   border-color: var(--border-highlight)
}

.hero-contact-area-left {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.5rem;
   margin-top: .5rem
}

.contact-stack {
   display: flex;
   flex-direction: column;
   gap: .8rem;
   font-family: 'Fira Code', monospace;
   font-size: .85rem;
   color: var(--text-muted);
   text-align: center
}

.contact-stack i {
   color: var(--text-accent)
}

.contact-stack a {
   color: var(--text-muted)
}

.contact-stack a:hover {
   color: #fff;
   text-decoration: underline
}

.social-icons {
   display: flex;
   gap: 1rem;
   font-size: 1.4rem
}

.center-icons {
   justify-content: center;
   flex-wrap: wrap
}

.social-icons a {
   color: var(--text-muted);
   transition: color var(--transition-fast), transform var(--transition-fast)
}

.social-icons a:hover {
   color: #fff;
   transform: translateY(-2px)
}

.hero-right {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.hero-name {
   font-size: clamp(1.8rem, 3.5vw, 2.8rem);
   color: #fff;
   line-height: 1.1;
   margin-bottom: .5rem;
   letter-spacing: -.02em;
   font-weight: 800
}

.hero-role {
   font-family: 'Fira Code', monospace;
   font-size: 1.15rem;
   color: var(--text-accent);
   margin-bottom: 1.5rem
}

.hero-summary {
   font-size: 1.05rem;
   color: var(--text-muted);
   max-width: 600px;
   margin-bottom: 2rem;
   line-height: 1.7
}

.real-name {
   font-family: 'Fira Code', monospace;
   color: var(--text-accent);
   font-weight: 600;
   font-size: .95rem
}

.hero-cta-row {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap
}

.btn-primary {
   display: inline-block;
   padding: .65rem 1.4rem;
   background: var(--bg-darker);
   border: 1px solid var(--border-color);
   color: var(--text-main);
   font-family: 'Fira Code', monospace;
   font-size: .9rem;
   border-radius: 4px;
   transition: all var(--transition-fast)
}

.btn-primary:hover,
.btn-ghost:hover {
   background: var(--bg-card);
   border-color: var(--border-highlight);
   transform: translateY(-2px);
   color: #fff
}

.btn-ghost {
   display: inline-block;
   padding: .65rem 1.4rem;
   background: transparent;
   border: 1px solid var(--border-color);
   color: var(--text-muted);
   font-family: 'Fira Code', monospace;
   font-size: .9rem;
   border-radius: 4px;
   transition: all var(--transition-fast)
}

/* =========================================
   SECTION HEADERS
   ========================================= */
.section-title {
   font-size: 2rem;
   color: #fff;
   margin-bottom: .5rem
}

.section-intro {
   color: var(--text-muted);
   margin-bottom: 3rem
}

.cursor-blink {
   animation: blink 1s step-end infinite;
   opacity: .5;
   font-weight: 400
}

@keyframes blink {

   0%,
   100% {
      opacity: .5
   }

   50% {
      opacity: 0
   }
}

/* =========================================
   COURSEWORK BOXES (horizontal scroll row)
   ========================================= */
.scroll-row {
   display: flex;
   gap: 1.5rem;
   overflow-x: auto;
   padding-bottom: 1rem;
   scrollbar-width: thin;
   scrollbar-color: var(--border-color) transparent
}

.scroll-row::-webkit-scrollbar {
   height: 4px
}

.scroll-row::-webkit-scrollbar-track {
   background: transparent
}

.scroll-row::-webkit-scrollbar-thumb {
   background: var(--border-color);
   border-radius: 4px
}

.box {
   flex: 0 0 180px;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 6px;
   padding: 1.25rem;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast)
}

.box:hover {
   border-color: var(--border-highlight);
   box-shadow: 0 6px 20px rgba(0, 0, 0, .15)
}

.box h3 {
   font-size: 1rem;
   color: #fff;
   margin-bottom: .25rem
}

.dense>* {
   margin: 0
}

.small {
   font-size: .8rem;
   color: var(--text-muted);
   margin-top: .75rem
}

/* =========================================
   PROJECTS GRID
   ========================================= */
.projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 2rem
}

.project-card {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 6px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth)
}

.project-card:hover {
   transform: translateY(-4px);
   border-color: var(--border-highlight);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
   background: var(--bg-dark)
}

/* Project media strip */
.project-media {
   width: 100%;
   background: var(--bg-darker);
   overflow: hidden;
   max-height: 240px;
   display: flex;
   align-items: center;
   justify-content: center
}

.project-media img,
.project-media video {
   width: 100%;
   height: 240px;
   object-fit: cover;
   display: block
}

/* Hide media strip when empty (placeholder file is 0 bytes) */
.project-media:empty {
   display: none
}

.project-body {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   flex-grow: 1
}

.project-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: .75rem
}

.project-title {
   font-size: 1.1rem;
   color: #fff
}

.project-link {
   color: var(--text-muted)
}

.project-link:hover {
   color: #fff
}

.project-description {
   color: var(--text-muted);
   font-size: .9rem;
   margin-bottom: 1.25rem;
   flex-grow: 1
}

.tech-stack {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
   margin-top: auto
}

.tech-tag {
   font-family: 'Fira Code', monospace;
   font-size: .75rem;
   color: var(--text-accent);
   background: var(--bg-darker);
   padding: .2rem .55rem;
   border-radius: 4px;
   border: 1px solid var(--border-color)
}

/* =========================================
   ABOUT TERMINAL
   ========================================= */
.about-terminal {
   background: var(--bg-darker);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 20px 40px rgba(0, 0, 0, .2)
}

.term-header {
   background: var(--bg-dark);
   padding: .75rem 1rem;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--border-color)
}

.dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   margin-right: 8px
}

.dot.red {
   background: var(--term-red)
}

.dot.yellow {
   background: var(--term-yellow)
}

.dot.green {
   background: var(--term-green)
}

.term-title {
   margin: 0 auto;
   font-family: 'Fira Code', monospace;
   font-size: .8rem;
   color: var(--text-muted)
}

.term-body {
   padding: 2rem;
   font-family: 'Fira Code', monospace;
   font-size: .9rem;
   color: var(--text-accent)
}

.prompt {
   color: var(--term-green);
   margin-right: .5rem
}

.command {
   color: #fff
}

.output {
   margin-top: .75rem;
   line-height: 1.7;
   color: var(--text-muted)
}

/* =========================================
   BLOG
   ========================================= */
.blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 1.5rem
}

.blog-card {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 6px;
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: .75rem;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast)
}

.blog-card:hover {
   border-color: var(--border-highlight);
   box-shadow: 0 6px 24px rgba(0, 0, 0, .15)
}

.blog-meta {
   display: flex;
   gap: 1rem;
   align-items: center
}

.blog-tag {
   font-family: 'Fira Code', monospace;
   font-size: .7rem;
   background: var(--bg-darker);
   border: 1px solid var(--border-color);
   color: var(--text-accent);
   padding: .15rem .5rem;
   border-radius: 3px;
   text-transform: uppercase;
   letter-spacing: .06em
}

.blog-date {
   font-family: 'Fira Code', monospace;
   font-size: .75rem;
   color: var(--text-muted)
}

.blog-title {
   font-size: 1rem;
   color: #fff;
   line-height: 1.4
}

.blog-title a {
   color: #fff
}

.blog-title a:hover {
   color: var(--text-accent)
}

.blog-excerpt {
   font-size: .875rem;
   color: var(--text-muted);
   line-height: 1.6
}

.blog-tags {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   margin-top: auto
}

.inline-link {
   color: var(--text-accent);
   text-decoration: underline;
   text-underline-offset: 3px
}

.inline-link:hover {
   color: #fff
}

/* =========================================
   SCROLL FADE-IN
   ========================================= */
.fade-in {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-in.visible {
   opacity: 1;
   transform: translateY(0)
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media(max-width:900px) {
   .hero-split {
      flex-direction: column;
      text-align: center;
      gap: 2rem;
      padding-top: 2rem
   }

   .hero-right {
      align-items: center
   }

   .hero-cta-row {
      justify-content: center
   }

   .projects-grid,
   .blog-grid {
      grid-template-columns: 1fr
   }
}

@media(max-width:768px) {
   .nav-links {
      display: none
   }

   .hero-name {
      font-size: 2.5rem
   }
}