/* =============================================================
   UTILITY: IMAGE CAPTIONS
   Centered captions displayed below project images.
   Width matches the fixed thumbnail size (200px).
   ============================================================= */
.image-caption {
    display: block;
    width: 200px;
    margin: 1.5rem auto 0 auto;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* =============================================================
   BACKGROUND CANVAS
   Full-screen fixed canvas rendered behind all content.
   Hosts the animated particle network (see scripts.js).
   z-index: -1 keeps it below every stacking context.
   pointer-events: none ensures it never intercepts clicks.
   ============================================================= */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Override residual inline light-theme colors from HTML */
[style*="color: #374151"] { color: var(--text-secondary) !important; }
[style*="color: #475569"] { color: var(--text-primary) !important; }
[style*="color: #64748b"] { color: var(--text-muted) !important; }

/* =============================================================
   RESET & BASE STYLES
   Strips browser default margin/padding and enforces
   border-box sizing on every element for predictable layouts.
   ============================================================= */
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================================================
   DESIGN TOKENS  (CSS custom properties)

   Colors
   -------
   --primary / --primary-light  : main accent cyan, used for
     highlights, links, icons, borders and glows.
   --secondary                  : purple, used in gradients.
   --bg-primary/secondary/card  : layered dark navy backgrounds.
   --bg-card-hover              : slightly lighter card bg on hover.
   --text-primary               : near-white, main readable text.
   --text-secondary             : muted blue-grey, supporting text.
   --text-muted                 : dark grey, captions & metadata.
   --border-color               : subtle white border at low opacity.
   --gradient-primary           : cyan→purple diagonal gradient.

   Spacing  (8-point scale)
   ------------------------
   xs=8  sm=16  md=24  lg=32  xl=48  2xl=64

   Typography
   ----------
   Poppins (headings/logo) + Inter (body), with system-ui fallbacks.
   Font-size scale: xs → sm → base → lg → xl → 5xl → 6xl.

   Effects
   -------
   --shadow-md  : standard card shadow.
   --shadow-xl  : glowing cyan shadow for elevated elements.
   --transition : consistent cubic-bezier easing (0.3s).
   ============================================================= */
:root {
    --primary: #00c2ff;
    --primary-light: #33cfff;
    --secondary: #7c4dff;

    /* Backgrounds */
    --bg-primary:    #07101f;
    --bg-secondary:  #0b1828;
    --bg-card:       #0f1f35;
    --bg-card-hover: #152843;

    /* Text */
    --text-primary:   #dde6f0;
    --text-secondary: #7a93ae;
    --text-muted:     #4a6278;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.07);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00c2ff 0%, #7c4dff 100%);

    /* Spacing */
    --container-width: 1200px;
    --section-padding: 100px 0;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;

    /* Typography */
    --font-primary: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    /* Effects */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px -8px rgba(0, 194, 255, 0.12);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   GLOBAL TYPOGRAPHY: <strong>
   Overrides the browser default bold weight to inherit from
   the parent, while colorising keywords in the accent cyan.
   This creates visual emphasis through color alone, keeping
   the text weight uniform across descriptions.
   ============================================================= */
strong {
    color: var(--primary);
    font-weight: inherit;
}


body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* =============================================================
   THEME TOGGLE BUTTON
   Circular icon button in the navbar. Shows moon in dark mode,
   sun in light mode. Icons swapped via body.light class.
   ============================================================= */
.theme-toggle {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgba(0, 194, 255, 0.15);
    border-color: var(--primary);
    color: var(--primary);
    transform: rotate(20deg);
}

/* In dark mode: show moon, hide sun */
.icon-sun  { display: none; }
.icon-moon { display: block; }

/* In light mode: show sun, hide moon */
body.light .icon-sun  { display: block; }
body.light .icon-moon { display: none; }

/* =============================================================
   LIGHT MODE OVERRIDES
   Applied when <body> has class "light".
   All CSS variables are redefined here; component styles
   inherit the new values automatically.
   ============================================================= */
body.light {
    --primary:        #0096c7;
    --primary-light:  #00b4d8;
    --secondary:      #6d28d9;

    --bg-primary:    #f0f4f8;
    --bg-secondary:  #e2e8f0;
    --bg-card:       #ffffff;
    --bg-card-hover: #e8f4fd;

    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #64748b;

    --border-color: rgba(0, 0, 0, 0.09);

    --gradient-primary: linear-gradient(135deg, #0096c7 0%, #6d28d9 100%);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 40px -8px rgba(0, 150, 199, 0.18);
}

/* Navbar background in light mode */
body.light .navbar {
    background-color: rgba(240, 244, 248, 0.93);
}

/* Mobile menu panel in light mode: only apply bg on the slide-in panel */
@media (max-width: 700px) {
    body.light .nav-menu {
        background: var(--bg-card);
        border-left-color: rgba(0, 150, 199, 0.3);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
    }
}

/* Toggle button toned down in light mode */
body.light .theme-toggle {
    background: rgba(0, 0, 0, 0.05);
}

/* Projects section explicit bg in light mode */
body.light #projects {
    background: var(--bg-secondary);
}

/* Sub-section headers in light mode */
body.light .project-subsection-header {
    background: rgba(0, 0, 0, 0.02);
}
body.light .project-subsection-header:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* =============================================================
   THEME TOGGLE BUTTON
   ============================================================= */

/* =============================================================
   NAVIGATION BAR
   Fixed at the top, always visible while scrolling.
   Uses backdrop-filter blur + semi-transparent bg to let the
   canvas animation bleed through the bar subtly.
   ============================================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(7, 16, 31, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-2xl);
    max-width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-right: auto;
}

/* Logo text: gradient fill using background-clip trick.
   -webkit-text-fill-color: transparent reveals the gradient. */
.logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-left: auto;
    white-space: nowrap;
}

.nav-link {
    color: var(--text-primary);
    font-weight: 500;
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
}

/* Animated underline on hover: grows from 0 to 100% width
   using a pseudo-element with the primary gradient. */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
}

/* Hamburger icon: three bars animated into an X when the
   hidden checkbox (#menu-toggle) is checked (CSS-only toggle). */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1001;
}
.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

.menu-toggle:checked + .hamburger .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle:checked + .hamburger .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle:checked + .hamburger .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* =============================================================
   BUTTONS
   Base .btn provides shared layout (flex, padding, radius).
   .btn-primary applies the gradient fill with a glow shadow
   and a subtle lift on hover.
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-align: center;
    white-space: nowrap;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* =============================================================
   HERO SECTION
   Full-viewport-height intro section.
   background: transparent lets the canvas show through.
   Content is vertically/horizontally centered via flexbox.
   padding-top accounts for the fixed navbar height.
   ============================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
    background: transparent;
    overflow: hidden;
}

.hero-container {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-content {
    animation: fadeInUp 1s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-profile {
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: center;
}

/* Profile photo: circular crop with a glowing cyan ring.
   Double box-shadow: inner soft ring + outer diffuse glow.
   float animation defined in keyframes (scripts handles none). */
.hero-profile-image {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border: 3px solid var(--primary);
    box-shadow: 0 0 0 6px rgba(0, 194, 255, 0.1), 0 10px 40px rgba(0, 194, 255, 0.2);
}

.hero-title {
    font-size: var(--font-size-6xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    text-align: center;
}

/* Gradient heading text: background-clip trick reveals the
   cyan→purple gradient through the transparent text fill. */
.gradient-text {
    display: block;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    text-align: center;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    justify-content: center;
    flex-wrap: wrap;
}

/* =============================================================
   GENERIC SECTION WRAPPER
   All <section> elements share the same vertical padding and
   the dark primary background by default.
   Individual sections (e.g. #contact) override background.
   ============================================================= */
section {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.section-subtitle {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* =============================================================
   PROJECTS — GRID SYSTEM

   Projects are displayed in a responsive grid layout.
   - Mobile: 1 column
   - Tablet: 2 columns
   - Desktop: 3 columns

   Each project is a .project-accordion card.
   Clicking .project-header toggles .project-content via JS
   (toggleProject()). The content uses max-height animation
   from 0 → 4000px to smoothly expand/collapse.

   Sub-sections within each project use the same pattern:
   .project-subsection  →  .project-subsection-content
   toggled by toggleSubsection() in scripts.js.

   .project-header--badge variant: used for projects that have
   a status badge ("En développement", "Nouveau"). On desktop
   the layout is flex row with CSS order properties; on mobile
   it collapses to two stacked rows.
   ============================================================= */

/* Grid container */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    counter-reset: project-counter;
}

/* Responsive grid: 2 columns on tablets */
@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Responsive grid: 3 columns on desktop */
@media (min-width: 1200px) {
    .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    }

    #projects > .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}

.project-accordion {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    scroll-margin-top: 100px;
    counter-increment: project-counter;
}

.project-accordion:hover {
    border-color: rgba(0, 194, 255, 0.5);
    box-shadow: 0 12px 40px rgba(0, 194, 255, 0.15);
}

.project-accordion.active {
    grid-column: 1 / -1;
    border-color: rgba(0, 194, 255, 0.5);
    box-shadow: 0 12px 40px rgba(0, 194, 255, 0.15);
}

.project-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-card);
    transition: background-color 0.3s ease;
    min-height: auto;
}

.project-header:hover {
    background: var(--bg-card-hover);
}

.project-title-accordion {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-title-accordion::before {
    content: counter(project-counter);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
    background: linear-gradient(135deg, #00c2ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* First row: Title + Toggle */
.project-header-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

/* Full description shown directly when the project opens */
.project-description-full {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.7;
    border-bottom: 1px solid var(--border-color);
}

.project-description-full p {
    margin: 0 0 1rem 0;
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    overflow-wrap: break-word;
}

.project-description-full p:last-child {
    margin-bottom: 0;
}

.project-description-full ul {
    padding-left: 1.5rem;
    margin: 0.75rem 0 0 0;
    color: var(--text-secondary);
    line-height: 1.8;
}

.project-description-full li {
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    overflow-wrap: break-word;
}

/* Hide the short description when the project is open */
.project-accordion.active .project-description-short {
    display: none;
}

/* Truncated preview shown when the project is closed */
.project-description-short {
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    overflow-wrap: break-word;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.5em * 3);
}

/* Second row: Badge + GitHub button */
.project-header-row2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Badge must remain visible in row2 */
.project-badge {
    flex-shrink: 0;
}

/* GitHub links are always right-aligned */
.project-header-row2 .github-link {
    flex-shrink: 0;
    margin-left: auto;
}

.github-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(124, 77, 255, 0.10);
    color: var(--secondary);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition);
    text-decoration: none;
    border: 1px solid rgba(124, 77, 255, 0.30);
}

.github-link:hover {
    background: var(--secondary);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(124, 77, 255, 0.35);
}

/* Light mode */
body.light .github-link {
    background: rgba(109, 40, 217, 0.08);
    color: var(--secondary);
    border-color: rgba(109, 40, 217, 0.30);
}

body.light .github-link:hover {
    background: var(--secondary);
    border-color: transparent;
    color: white;
}

.github-link .github-icon {
    width: 18px;
    height: 18px;
}

.accordion-toggle {
    width: 24px;
    height: 24px;
    color: var(--primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.project-accordion.active .accordion-toggle {
    transform: rotate(180deg);
}

.project-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-content.active {
    max-height: 25000px;
    overflow: visible;
}

.project-details {
    padding: 0 1.5rem 2rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.project-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Shared heading color for project sections */
.project-section h4,
.project-subsection-header h4 {
    color: var(--text-primary);
}

.project-section h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: none;
    display: inline-block;
}
.project-subsection-title {
    transition: border-bottom 0.3s;
}

.project-section p {
    color: var(--text-primary);
    line-height: 1.7;
    margin: 0;
}

.project-description {
    color: var(--text-primary);
    margin: 1.5rem 0;
    line-height: 1.6;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.tech-badge {
    padding: 6px 12px;
    background: rgba(0, 194, 255, 0.08);
    color: var(--primary);
    border-radius: 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1px solid rgba(0, 194, 255, 0.15);
}

/* Project status badges */
.project-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
}

/* "Nouveau" — cyan, same family as tech badges */
.badge-new {
    background: rgba(0, 194, 255, 0.10);
    color: var(--primary);
    border-color: rgba(0, 194, 255, 0.25);
}

/* "En développement" — amber, softer WIP signal */
.badge-wip {
    background: rgba(251, 191, 36, 0.10);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
}

/* Light mode adjustments */
body.light .badge-new {
    background: rgba(0, 150, 199, 0.10);
    color: var(--primary);
    border-color: rgba(0, 150, 199, 0.30);
}

body.light .badge-wip {
    background: rgba(180, 120, 0, 0.10);
    color: #b45309;
    border-color: rgba(180, 120, 0, 0.25);
}

.github-icon {
    width: 20px;
    height: 20px;
}

/* Flowchart hover effect */
.project-section img:hover {
    transform: scale(1.05);
}



/* Sub-accordion for project sections */
.project-subsection {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.project-subsection-header {
    padding: 1rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    transition: background-color 0.3s ease;
}

.project-subsection-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.project-subsection-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    border: none;
    padding: 0;
    display: block;
}

.subsection-toggle {
    width: 20px;
    height: 20px;
    color: var(--primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.project-subsection.active .subsection-toggle {
    transform: rotate(180deg);
}

.project-subsection-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-subsection-content.active {
    max-height: 20000px;
    overflow: visible;
}

.project-subsection-body {
    padding: 1.5rem;
    overflow: visible;
}

/* Ensure images are visible and not cut off */
.project-subsection-body img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Hover effect for images */
.project-subsection-body a:hover img {
    transform: scale(1.05);
}

/* =============================================================
   CONTACT SECTION
   background: transparent exposes the canvas animation
   behind this section (same effect as the hero).
   ============================================================= */
#contact {
    background: transparent;
}

.contact-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
}
.contact-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
}

.contact-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}


.contact-value a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.contact-value a:hover {
    text-decoration: underline;
}

/* =============================================================
   FOOTER
   Slightly lighter background (--bg-secondary) to visually
   separate it from the main content area.
   ============================================================= */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-xl) 0 var(--spacing-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    justify-items: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    justify-content: center;
}

.footer-logo-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Poppins', sans-serif;
}

.footer-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.footer-social {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.footer-social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--text-primary);
}

.footer-social-link:hover {
    background: var(--gradient-primary);
    transform: translateY(-4px);
    color: #FFFFFF;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    text-align: center;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
}

.footer-link {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    transition: var(--transition);
    text-align: center;
}

.footer-link:hover {
    color: var(--primary-light);
}

.footer-bottom {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.footer-copyright {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* =============================================================
   HERO LAYOUT HELPERS
   Utility classes that mirror the inline styles used in the
   hero section HTML, extracted here for maintainability.
   .hero-flex       : side-by-side photo + text layout.
   .hero-desc       : constrained-width paragraph container.
   .hero-desc-inner : body text styling for the description.
   ============================================================= */
.hero-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0 30px 0;
}
.hero-text {
    flex: 1;
    max-width: 700px;
    text-align: center;
}
.hero-desc {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
.hero-desc-inner {
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: left;
}

/* PROJECTS LIST */
.projects-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =============================================================
   PROJECT IMAGE GRIDS
   Two-column grid used for flowcharts and screenshots.
   .project-flowchart-note : italic caption below the grid.
   ============================================================= */
.project-flowchart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 1rem;
    justify-items: center;
}
.project-flowchart-item {
    text-align: center;
}
.project-flowchart-img {
    width: 200px;
    aspect-ratio: 1/1;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}
.project-flowchart-img:hover {
    transform: scale(1.05);
}
.project-flowchart-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1rem;
    text-align: center;
    font-style: italic;
}

/* =============================================================
   PAGE LOAD ANIMATIONS
   Staggered entrance on the hero section:
     1. Navbar   slides down from above
     2. Photo    fades up (delay 0.1s)
     3. Name     fades up (delay 0.35s)
     4. Role     fades up (delay 0.55s)
     5. Bio      fades up (delay 0.75s)
     6. Scroll   fades in  (delay 1s)
   animation-fill-mode: both keeps elements invisible before
   their animation starts (no flash of unstyled content).
   ============================================================= */

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* Navbar */
.navbar {
    animation: slideInDown 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Hero elements — staggered */
.hero-profile-image {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both,
               float 3s ease-in-out 0.8s infinite;
}

.hero-title {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}

.hero-role-title {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both;
}

.hero-desc-container {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.75s both;
}

.hero-desc-inner-text,
.hero-desc-inner-text p {
    text-align: justify;
    text-align-last: left;
    hyphens: none;
}

.scroll-indicator {
    animation: fadeIn 0.6s ease 1s both;
}

/* =============================================================
   LARGE SCREENS (≥ 1440px)
   Only widens the container and bumps font sizes slightly.
   Everything else stays identical.
   ============================================================= */
@media (min-width: 1440px) {
    #projects > .container {
        max-width: 1800px;
        margin: 0 auto;
        padding-left: var(--spacing-2xl);
        padding-right: var(--spacing-2xl);
    }      
}

    .hero-profile-image {
        width: 280px;
        height: 280px;
    }

    .hero-flex-container {
        max-width: 1360px !important;
        gap: 5rem !important;
    }

    /* Projects list wider */
    .projects-list,
    #projects > .container > div[style*="max-width"] {
        max-width: 1100px !important;
    }

    .project-title-accordion .project-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .project-description-short {
        min-height: auto;
    }

    .project-header-row2 .github-link {
        margin-left: auto;
    }


@media (min-width: 1700px) {
    :root {
        --container-width: 1600px;
        --font-size-6xl: 5rem;
        --font-size-5xl: 4rem;
        --font-size-xl: 1.5rem;
        --font-size-lg: 1.3rem;
        --font-size-base: 1.15rem;
        --font-size-sm: 1rem;
        --section-padding: 130px 0;
        --spacing-xl: 60px;
        --spacing-2xl: 80px;
    }

    .hero-profile-image {
        width: 340px;
        height: 340px;
    }

    .hero-flex-container {
        max-width: 1600px !important;
        gap: 7rem !important;
        padding: 80px 0 40px 0 !important;
    }

    .hero-desc-container {
        max-width: 1300px !important;
    }

    .hero-desc-inner-text {
        font-size: 1.3rem !important;
        line-height: 1.9 !important;
    }

    .projects-list,
    #projects > .container > div[style*="max-width"] {
        max-width: 1300px !important;
    }

    .project-title-accordion {
        font-size: 1.5rem;
    }

    .project-subsection-header h4 {
        font-size: 1.15rem;
    }

    .project-subsection-body p,
    .project-subsection-body li {
        font-size: 1.05rem;
        line-height: 1.85;
    }

    .tech-badge {
        font-size: 1rem;
        padding: 8px 16px;
    }

    .github-link {
        font-size: 1.05rem;
        padding: 0.55rem 1.2rem;
    }

    .project-title-accordion .project-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .project-description-short {
        min-height: auto;
    }

    .project-header-row2 .github-link {
        margin-left: auto;
    }
}

/* =============================================================
   RESPONSIVE DESIGN

   Breakpoints:
     ≤ 900px  — tablet  : loosen padding, simplify footer grid
     ≤ 700px  — mobile  : stack hero, show hamburger menu,
                          collapse project grids to 1 column,
                          shrink typography and badges
     ≤ 480px  — small mobile : further reduce font sizes
   ============================================================= */

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
    .container {
        padding: 0 16px;
        max-width: 100vw;
    }

    .hero-flex-container {
        gap: 2rem !important;
        padding: 40px 16px 20px !important;
    }

    .hero-desc-container {
        padding: 0 8px !important;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

/* Mobile (≤ 700px) */
@media (max-width: 700px) {
    /* --- Navigation --- */
    .nav-container {
        flex-direction: row;
        padding: 10px 16px;
        align-items: center;
    }

    .nav-menu {
        order: 5;
    }

    .nav-menu {
        position: fixed;
        top: 60px;
        right: 0;
        background: var(--bg-card);
        border-left: 2px solid rgba(0, 194, 255, 0.25);
        flex-direction: column;
        align-items: flex-start;
        width: 80vw;
        max-width: 320px;
        height: calc(100vh - 60px);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
        transform: translateX(100%);
        transition: transform 0.3s;
        gap: 0;
        margin-left: 0;
        padding: 2rem 1.5rem;
        z-index: 1000;
    }

    .menu-toggle:checked ~ .nav-menu {
        transform: translateX(0);
    }

    .hamburger {
        display: flex;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        right: 1.5rem;
        top: 1.5rem;
        width: 32px;
        height: 32px;
        opacity: 0;
        z-index: 1002;
    }

    /* Theme toggle li: no border separator, spacing below */
    .nav-toggle-item {
        border-bottom: none !important;
        margin-bottom: 1.5rem;
    }

    .nav-menu li {
        width: 100%;
        margin-bottom: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-link {
        font-size: 1rem;
        padding: 0.85rem 0.5rem;
        width: 100%;
        display: block;
        border-left: 3px solid transparent;
        padding-left: 0.75rem;
        transition: var(--transition);
        color: var(--text-secondary);
    }

    .nav-link:hover {
        color: var(--primary);
        border-left-color: var(--primary);
        background: rgba(0, 194, 255, 0.05);
        padding-left: 1.1rem;
    }
    /* --- Hero --- */
    .hero {
        padding-top: 75px;
        min-height: unset;
    }

    .hero-flex-container {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 1.2rem !important;
        padding: 24px 20px 32px !important;
    }

    .hero-profile {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .hero-profile-image {
        width: 110px;
        height: 110px;
        margin: 0;
    }

    .hero-text-col {
        text-align: center !important;
        min-width: 0;
    }

    .hero-title {
        font-size: 1.4rem;
        text-align: center !important;
    }

    .hero-title .gradient-text {
        display: block;
    }

    .hero-role-title {
        font-size: 1.1rem !important;
        text-align: center !important;
    }

    .hero-desc-container {
        padding: 0 12px !important;
        max-width: 100% !important;
        margin-top: 1.5rem !important;
    }

    .hero-desc-inner-text {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
        text-align: justify;
        text-align-last: left;
        hyphens: auto;
    }

    .hero-desc-inner-text p {
        text-align: justify;
        text-align-last: left;
        hyphens: auto;
    }

    .project-description-full p,
    .project-description-full li,
    .project-description-short {
        hyphens: auto;
    }

    /* --- Sections --- */
    section {
        padding: 40px 0;
    }

    .section-header {
        margin-bottom: var(--spacing-xl);
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    .project-header {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    /* Disable transform on mobile for better performance */
    .project-accordion:hover,
    .project-accordion.active {
        transform: none;
    }

    .project-header-row1 {
        gap: 0.5rem;
    }

    .project-header-row2 {
        gap: 0.5rem;
    }

    .project-header--badge {
        flex-direction: column;
        gap: 0.5rem;
    }

    .project-header-row1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.5rem;
    }

    .project-header-row2 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .project-title-accordion {
        font-size: 0.82rem;
        flex: 1;
        min-width: 0;
        line-height: 1.3;
        white-space: normal;
    }


    .project-title-accordion .project-name {
        white-space: normal;
    }

    .project-badge {
        display: inline-block;
        flex-shrink: 0;
        font-size: 0.58rem !important;
        padding: 0.15rem 0.3rem !important;
        white-space: nowrap;
        border-radius: 0.25rem !important;
    }

    .project-details {
        padding: 0 0.75rem 1rem;
    }

    .project-subsection-header {
        padding: 0.75rem 1rem;
    }

    .project-subsection-body {
        padding: 1rem;
    }

    .project-subsection-body p,
    .project-subsection-body li {
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .github-link {
        font-size: 0.68rem;
        padding: 0.25rem 0.4rem;
        white-space: nowrap;
    }

    .github-link .github-icon {
        width: 11px;
        height: 11px;
    }

    .project-subsection-body > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        justify-items: center !important;
    }

    .project-subsection-body > div[style*="grid-template-columns"] img {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
    }

    .project-subsection-body > div[style*="grid-template-columns"] > div > p {
        width: auto !important;
    }

    .project-flowchart-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .project-flowchart-img {
        width: 100%;
        max-width: 260px;
    }

    .contact-list {
        display: grid;
        grid-template-columns: auto auto;
        gap: 0.75rem 3rem;
        width: fit-content;
        margin: 0 auto;
        align-items: start;
    }

    .contact-item {
        display: flex;
        align-items: flex-start;
        font-size: 0.78rem;
        min-width: 0;
        gap: 0.4rem;
    }

    .contact-item .contact-value {
        min-width: 0;
        word-break: break-word;
    }

    .contact-item .contact-value a {
        font-size: 0.78rem;
    }

    .contact-icon {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin-top: 1px;
    }

    /* --- Footer --- */
    .footer {
        padding: var(--spacing-lg) 0 var(--spacing-sm);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    .hero-flex-container {
        gap: 0.9rem !important;
        padding: 20px 14px 12px !important;
    }

    .hero-profile-image {
        width: 88px;
        height: 88px;
    }

    .hero-title {
        font-size: 1.3rem;
    }

    .hero-role-title {
        font-size: 1rem !important;
    }

    .hero-desc-inner-text {
        font-size: 0.875rem !important;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    .project-title-accordion {
        font-size: 0.875rem;
    }

    .project-subsection-body p,
    .project-subsection-body li {
        font-size: 0.8rem;
    }

    .project-subsection-header h4 {
        font-size: 0.875rem;
    }

    .tech-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    .footer {
        padding: 20px 0 10px;
    }
}

.project-header .project-description-short {
        text-align: justify;
        text-align-last: left;
        hyphens: auto;
        overflow-wrap: break-word;
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin: 0;
        line-height: 1.5;
}

@media (min-width: 1200px) {
    .project-description-short {
        hyphens: none !important;
    }
}

#lightbox-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(20,24,31,0.95);
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s;
}
#lightbox-overlay.active {
    display: flex;
    opacity: 1;
}
#lightbox-img {
    width: auto;
    height: auto;
    max-width: 1200px;
    max-height: 96vh;
    min-width: 0;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    z-index: 10000;
    background: #fff;
}
@media (max-width: 1240px) {
    #lightbox-img {
        max-width: calc(100vw - 80px);
        max-height: 92vh;
    }
}
@media (max-width: 700px) {
    #lightbox-img {
        max-width: calc(100vw - 16px);
        max-height: 85vh;
    }
}
#lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.2s;
}
#lightbox-close:hover {
    color: var(--primary);
}
#lightbox-prev, #lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.2s;
    padding: 0 8px;
}
#lightbox-prev { left: 24px; }
#lightbox-next { right: 24px; }
#lightbox-prev:hover, #lightbox-next:hover {
    color: var(--primary);
}

@media (max-width: 700px) {
    #lightbox-prev, #lightbox-next {
        display: none !important;
    }
    #lightbox-close {
        top: 8px;
        right: 8px;
        font-size: 2.2rem;
        display: block !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    #lightbox-overlay {
        align-items: center !important;
        justify-content: center !important;
    }
    #lightbox-img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
        position: static;
    }
}