/* ============================================================
   DEIJS.EU - PORTFOLIO WEBSITE STYLES
   ============================================================
   
   TABLE OF CONTENTS:
   ------------------
   1.  ROOT VARIABLES (Dark Theme - "Night in the Forest")
   2.  LIGHT THEME OVERRIDE ("After the Office")
   3.  BASE RESET & TYPOGRAPHY
   4.  LOADING SCREEN
   5.  SWIPER SLIDER STYLES (Experience, Education, Blog)
   6.  CV SECTION (Download Cards)
   7.  PLATFORMS SECTION (Portal Cards)
   8.  CONTACT SECTION STYLES (Additional)
   9.  FOOTER LOGO STYLES
   10. NEURAL LOADER ANIMATION
   11. HEADER & NAVIGATION (with Floating Clouds)
   12. MENU OVERLAY
   13. THEME TOGGLE
   14. HUD ELEMENTS (Location + Time)
   15. VIEWPOINT NAVIGATION
   16. MOBILE BOTTOM BAR
   17. HERO SECTION
   18. CTA BUTTONS
   19. SECTION LAYOUT
   20. OFFERINGS GRID
   21. MANIFESTO SECTION
   22. CONTACT SECTION (Job Inquiry Form)
   23. FOOTER (with Floating Clouds)
   24. DYNAMIC CURSOR (Desktop Only)
   25. GLITCH EFFECT (Bunkros Style)
   26. ANIMATION UTILITIES
   27. INTERACTIVE PARTICLES (Dark Theme Only)
   28. MOBILE RESPONSIVE
   
============================================================ */


/* ============================================================
   1. ROOT VARIABLES - DARK THEME ("Night in the Forest")
   - Core design tokens: colors, fonts, spacing, transitions
   ============================================================ */
:root {
    /* Primary color palette - Natural Forest */
    --primary-accent: #6ee7b7;
    --primary-accent-rgb: 110, 231, 183;
    --secondary-accent: #86efac;
    --secondary-accent-rgb: 134, 239, 172;
    --tertiary-accent: #bef264;
    
    /* Surface colors - Night Forest */
    --bg-base: #1a1a1a;
    --bg-body: #1a1a1a;
    --bg-surface: #2a2a2a;
    --bg-elevated: #333333;
    --border-color: #4a4a4a;
    
    /* Text colors - Moonlight & Warmth */
    --text-primary: #faf8f5;
    --text-secondary: #e8e6e0;
    --text-tertiary: #b8c4b8;
    
    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --font-accent: 'Montserrat', sans-serif;
    
    /* Spacing - Mobile first */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    
    /* Effects */
    --glow-color: rgba(110, 231, 183, 0.25);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s ease;
    
    /* Hero overlay - Night Forest Gradient (subtle) */
    --hero-overlay: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.75) 0%,
        rgba(26, 26, 26, 0.35) 40%,
        rgba(26, 26, 26, 0.75) 100%
    );
    --hero-accent-overlay: linear-gradient(
        135deg,
        rgba(110, 231, 183, 0.08) 0%,
        transparent 50%,
        rgba(134, 239, 172, 0.08) 100%
    );
    
    /* HUD/LOC position */
    --hud-safe-bottom: 0px;
    --loc-top: auto;
    --loc-bottom: calc(var(--space-lg) + var(--hud-safe-bottom));
    --loc-transform: translateY(0);
    
    /* Viewport handling */
    --vh: 1vh;
}

@media (max-width: 768px) {
    html[data-theme="dark"] {
        --hud-safe-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}


/* ============================================================
   2. LIGHT THEME OVERRIDE ("After the Office")
   ============================================================ */
[data-theme="light"] {
    /* Surface colors - Clean Office */
    --bg-base: #f8faf9;
    --bg-body: #f8faf9;
    --bg-surface: #ffffff;
    --bg-elevated: #f0f5f3;
    --border-color: #d1e0db;
    
    /* Text colors */
    --text-primary: #1a2f28;
    --text-secondary: #4a5f56;
    --text-tertiary: #7a8f85;
    
    /* Accent adjustments for light */
    --primary-accent: #059669;
    --primary-accent-rgb: 5, 150, 105;
    --secondary-accent: #0d9488;
    --secondary-accent-rgb: 13, 148, 136;
    --tertiary-accent: #65a30d;
    --glow-color: rgba(5, 150, 105, 0.3);
    
    /* Hero overlay - Light green gradient (subtle) */
    --hero-overlay: linear-gradient(
        180deg,
        rgba(248, 250, 249, 0.8) 0%,
        rgba(248, 250, 249, 0.55) 50%,
        rgba(248, 250, 249, 0.8) 100%
    );
    --hero-accent-overlay: linear-gradient(
        135deg,
        rgba(5, 150, 105, 0.15) 0%,
        rgba(13, 148, 136, 0.1) 50%,
        rgba(101, 163, 13, 0.15) 100%
    );
    
    /* LOC position shift */
    --loc-top: 5rem;
    --loc-bottom: auto;
    --loc-transform: translateY(0);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #4a4a4a, #5a5a5a);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--primary-accent), var(--secondary-accent));
}

::selection {
    background-color: rgba(var(--primary-accent-rgb), 0.3);
    color: var(--text-primary);
}


/* ============================================================
   4. LOADING SCREEN
   ============================================================ */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-base);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s var(--transition-smooth), visibility 0.8s var(--transition-smooth);
}

.loading-text {
    font-family: var(--font-heading);
    font-size: clamp(0.75rem, 3vw, 1rem);
    margin-bottom: 2rem;
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 0 var(--space-md);
    font-weight: 600;
}

.loading-text::after {
    content: '...';
    display: inline-block;
    width: 20px;
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ============================================================
   5. SWIPER SLIDER STYLES
   - Used for Experience, Education, and Blog carousels
   ============================================================ */
.experience-swiper-section,
.education-swiper-section {
    min-height: 100vh;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Dark theme: Alternating gradient backgrounds for panels */
[data-theme="dark"] .experience-swiper-section {
    background: linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #333333 100%);
}

[data-theme="dark"] .education-swiper-section {
    background: linear-gradient(180deg, #333333 0%, #1a1a1a 50%, #000000 100%);
}

/* Light theme: Stone grey to white gradient with particles */
[data-theme="light"] .experience-swiper-section {
    background: linear-gradient(180deg, #f1f7f6 0%, #707D7D 100%);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .education-swiper-section {
    background: linear-gradient(180deg, #707D7D 0%, #f1f7f6 100%);
    position: relative;
    overflow: hidden;
}

.swiper-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.experience-swiper,
.education-swiper {
    padding: 10px 4px 40px;
}

/* Equal height slides */
.experience-swiper .swiper-wrapper,
.education-swiper .swiper-wrapper {
    align-items: stretch;
}

.experience-swiper .swiper-slide,
.education-swiper .swiper-slide {
    height: auto;
    display: flex;
}

/* Experience/Education Slide Card */
.experience-slide,
.education-slide {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1);
    text-decoration: none;
    color: inherit;
    width: 100%;
}

[data-theme="dark"] .experience-slide,
[data-theme="dark"] .education-slide {
    border: 1px solid rgba(110, 231, 183, 0.2);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(110, 231, 183, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .experience-slide,
[data-theme="light"] .education-slide {
    background: radial-gradient(circle at center, #707D7D 0%, #505A5A 100%);
    border: 3px solid #555555;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .experience-slide .slide-content h3,
[data-theme="light"] .education-slide .slide-content h3 {
    color: #F1F7F6;
}

[data-theme="light"] .experience-slide .slide-content p,
[data-theme="light"] .education-slide .slide-content p {
    color: #F1F7F6;
}

[data-theme="light"] .experience-slide .slide-achievement,
[data-theme="light"] .education-slide .slide-achievement {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #AACBC4;
}

[data-theme="light"] .experience-slide .slide-achievement strong,
[data-theme="light"] .education-slide .slide-achievement strong {
    color: #CEE1DD;
}

[data-theme="light"] .experience-slide .slide-image-placeholder,
[data-theme="light"] .education-slide .slide-image-placeholder {
    background: radial-gradient(circle at center, #606D6D 0%, #404A4A 100%);
}

[data-theme="light"] .experience-slide .slide-image-placeholder i,
[data-theme="light"] .education-slide .slide-image-placeholder i {
    color: rgba(241, 247, 246, 0.6);
}

.experience-slide:hover,
.education-slide:hover {
    transform: translateY(-8px);
    border-color: var(--primary-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(110, 231, 183, 0.1);
}

/* Slide Image Placeholder */
.slide-image-placeholder {
    position: relative;
    aspect-ratio: 16 / 3.5;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slide-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-image-placeholder i {
    font-size: 2.2rem;
    color: var(--primary-accent);
    opacity: 0.5;
}

.slide-period {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(42, 42, 42, 0.9);
    backdrop-filter: blur(4px);
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    border: 1px solid rgba(110, 231, 183, 0.2);
}

[data-theme="light"] .slide-period {
    background: rgba(255, 255, 255, 0.9);
    color: #065f46;
}

/* Slide Content */
.slide-content {
    padding: 1.2rem 1.4rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.slide-content h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.slide-company {
    display: inline-block;
    background: rgba(var(--primary-accent-rgb), 0.1);
    color: var(--primary-accent);
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
    text-decoration: none;
    transition: background 0.3s ease;
}

.slide-company:hover {
    background: var(--primary-accent);
    color: #011c16;
}

.slide-content p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 0.8rem;
    flex-grow: 1;
}

.slide-achievement {
    background: rgba(var(--primary-accent-rgb), 0.1);
    border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
    padding: 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.slide-achievement strong {
    color: var(--primary-accent);
}

/* Light Theme: Slide company tag */
[data-theme="light"] .slide-company {
    background: #AACBC4;
    color: #1A1A1A;
    font-weight: 500;
    border: 1px solid #AACBC4;
}

[data-theme="light"] .slide-company:hover {
    background: #b8d6d0;
    color: #1A1A1A;
}

/* Slide Category (Blog articles) */
.slide-category {
    display: inline-block;
    background: rgba(var(--primary-accent-rgb), 0.15);
    color: var(--primary-accent);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-accent);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

[data-theme="light"] .slide-category {
    background: rgba(5, 150, 105, 0.15);
    color: #059669;
}

/* Swiper Navigation Arrows */
.experience-swiper .swiper-button-next,
.experience-swiper .swiper-button-prev,
.education-swiper .swiper-button-next,
.education-swiper .swiper-button-prev {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--primary-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.experience-swiper .swiper-button-next:hover,
.experience-swiper .swiper-button-prev:hover,
.education-swiper .swiper-button-next:hover,
.education-swiper .swiper-button-prev:hover {
    background: var(--primary-accent);
    color: #011c16;
    border-color: var(--primary-accent);
}

.experience-swiper .swiper-button-next::after,
.experience-swiper .swiper-button-prev::after,
.education-swiper .swiper-button-next::after,
.education-swiper .swiper-button-prev::after {
    font-size: 0.9rem;
    font-weight: 700;
}

/* Links Grid (generic) */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    max-width: 800px;
    margin: 0 auto;
}

.link-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease;
}

.link-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(110, 231, 183, 0.1);
}

.link-card i {
    font-size: 2.5rem;
    color: var(--primary-accent);
    margin-bottom: 1rem;
}

.link-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.link-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Blog Section Styles */
.blog-swiper-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px var(--space-md);
    box-sizing: border-box;
}

[data-theme="dark"] .blog-swiper-section {
    background: linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #333333 100%);
}

[data-theme="light"] .blog-swiper-section {
    background: linear-gradient(180deg, #f1f7f6 0%, #707D7D 100%);
    position: relative;
    overflow: hidden;
}

.blog-swiper {
    padding: 20px 4px 60px;
}

.blog-swiper .swiper-wrapper {
    align-items: stretch;
}

.blog-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.blog-slide {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    text-decoration: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .blog-slide {
    border: 1px solid rgba(110, 231, 183, 0.2);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(110, 231, 183, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .blog-slide {
    background: radial-gradient(circle at center, #707D7D 0%, #505A5A 100%);
    border: 3px solid #555555;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .blog-slide .slide-content h3 {
    color: #F1F7F6;
}

[data-theme="light"] .blog-slide .slide-content p {
    color: #F1F7F6;
}

[data-theme="light"] .blog-slide .slide-image-placeholder {
    background: radial-gradient(circle at center, #606D6D 0%, #404A4A 100%);
}

[data-theme="light"] .blog-slide .slide-image-placeholder i {
    color: rgba(241, 247, 246, 0.6);
}

.blog-slide:hover {
    transform: translateY(-8px);
    border-color: var(--primary-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(110, 231, 183, 0.1);
}

.blog-swiper .swiper-button-next,
.blog-swiper .swiper-button-prev {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--primary-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.blog-swiper .swiper-button-next:hover,
.blog-swiper .swiper-button-prev:hover {
    background: var(--primary-accent);
    color: #1a1a1a;
    border-color: var(--primary-accent);
}

.blog-swiper .swiper-button-next::after,
.blog-swiper .swiper-button-prev::after {
    font-size: 0.9rem;
    font-weight: 700;
}

/* ============================================================
   5.6 LIGHT THEME FLOATING PARTICLES
   - Dark pine particles floating across sections
   ============================================================ */
.section-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Ensure section content stays above particles */
.section-header,
.swiper-shell,
.cv-grid-desktop,
.cv-swiper-shell,
.platforms-grid {
    position: relative;
    z-index: 2;
}
                   
/* ============================================================
   5.5 MUSIC SECTION
   - Album showcase with cover art and inline player trigger
   ============================================================ */
.music-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px var(--space-md);
    box-sizing: border-box;
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #111111 100%);
}

.music-player-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.music-album-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    text-align: center;
}

@media (min-width: 768px) {
    .music-album-showcase {
        flex-direction: row;
        text-align: left;
        gap: var(--space-xxl);
    }
}

.album-cover-wrapper {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(110, 231, 183, 0.15);
    cursor: pointer;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.album-cover-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 60px rgba(110, 231, 183, 0.25);
}

.album-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.album-cover-wrapper:hover .album-play-overlay {
    opacity: 1;
}

.album-play-overlay i {
    font-size: 48px;
    color: var(--primary-accent);
    text-shadow: 0 0 20px rgba(110, 231, 183, 0.5);
}

.album-info {
    flex: 1;
}

.album-title {
    font-family: var(--font-accent);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.album-artist {
    font-size: 1rem;
    color: var(--primary-accent);
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.album-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
}

.album-tracks {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    justify-content: center;
}

@media (min-width: 768px) {
    .album-tracks {
        justify-content: flex-start;
    }
}

.album-tracks span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.album-tracks i {
    color: var(--primary-accent);
}

.album-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary-accent), #10b981);
    color: #000;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.album-play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(110, 231, 183, 0.4);
}

.album-play-btn:active {
    transform: translateY(-1px);
}

/* ============================================================
   6. CV SECTION
   - Download cards for English/Dutch CV + LinkedIn
   - Desktop: Grid layout | Mobile: Swiper slider
   ============================================================ */
.cv-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px var(--space-md);
    box-sizing: border-box;
}

[data-theme="dark"] .cv-section {
    background: linear-gradient(180deg, #333333 0%, #1a1a1a 50%, #000000 100%);
}

[data-theme="light"] .cv-section {
    background: linear-gradient(180deg, #707D7D 0%, #f1f7f6 100%);
    position: relative;
    overflow: hidden;
}

/* Desktop Grid */
.cv-grid-desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Mobile Swiper - hidden on desktop */
.cv-swiper-shell {
    display: none;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 900px) {
    .cv-grid-desktop {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

.cv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cv-card {
    background: #1a1a1a;
    border: 1px solid rgba(110, 231, 183, 0.2);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(110, 231, 183, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .cv-card {
    background: radial-gradient(circle at center, #707D7D 0%, #505A5A 100%);
    border: 3px solid #555555;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .cv-card h3 {
    color: #F1F7F6;
}

[data-theme="light"] .cv-card p {
    color: #F1F7F6;
}

[data-theme="light"] .cv-card i {
    color: #F1F7F6;
}

[data-theme="light"] .cv-card .cv-download {
    color: #F1F7F6;
}

.cv-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(110, 231, 183, 0.1);
}

.cv-card i {
    font-size: 3rem;
    color: #dc2626;
    margin-bottom: 1.5rem;
}

.cv-card.linkedin-card i {
    color: #0077b5;
}

.cv-card h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.cv-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.cv-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--primary-accent-rgb), 0.1);
    color: var(--primary-accent);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.3s ease;
}

.cv-card:hover .cv-download {
    background: var(--primary-accent);
    color: #1a1a1a;
}


/* ============================================================
   7. PLATFORMS SECTION
   - Admin Portal + Family portal cards
   ============================================================ */
.platforms-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px var(--space-md);
    box-sizing: border-box;
}

[data-theme="dark"] .platforms-section {
    background: linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #333333 100%);
}

[data-theme="light"] .platforms-section {
    background: linear-gradient(180deg, #f1f7f6 0%, #707D7D 100%);
    position: relative;
    overflow: hidden;
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (max-width: 600px) {
    .platforms-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
    }
}

.platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3.5rem 2rem;
    min-height: 280px;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .platform-card {
    background: #1a1a1a;
    border: 1px solid rgba(110, 231, 183, 0.2);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(110, 231, 183, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .platform-card {
    background: radial-gradient(circle at center, #707D7D 0%, #505A5A 100%);
    border: 3px solid #555555;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .platform-card h3 {
    color: #F1F7F6;
}

[data-theme="light"] .platform-card p {
    color: #F1F7F6;
}

[data-theme="light"] .platform-card i {
    color: #F1F7F6;
}

.platform-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(110, 231, 183, 0.1);
}

.platform-card i {
    font-size: 2.5rem;
    color: var(--primary-accent);
    margin-bottom: 1rem;
}

.platform-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.platform-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}


/* ============================================================
   8. CONTACT SECTION - JOB INQUIRY FORM
   - Form with name, company, email, subject, message
   - Privacy checkbox, submit button, LinkedIn fallback
   ============================================================ */
.contact-section {
    min-height: auto;
    padding-bottom: var(--space-xxl);
    position: relative;
    overflow: hidden;
}

.contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--primary-accent-rgb), 0.03), rgba(0, 0, 0, 0.02));
    z-index: 0;
}

.contact-form-container {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    position: relative;
    z-index: 1;
}

.contact-intro {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.contact-intro p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.contact-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(var(--primary-accent-rgb), 0.1);
    border: 1px solid rgba(var(--primary-accent-rgb), 0.2);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-md);
}

.contact-disclaimer i {
    font-size: 0.85rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: var(--space-xl);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

@media (max-width: 500px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: left;
}

.form-label {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-input,
.form-textarea {
    padding: var(--space-md);
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 52px;
    transition: all var(--transition-fast);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 15px rgba(var(--primary-accent-rgb), 0.2);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-tertiary);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    text-align: left;
}

.checkbox {
    margin-top: 3px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--primary-accent);
}

.checkbox-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.checkbox-label a {
    color: var(--primary-accent);
    text-decoration: none;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    color: #1a1a1a;
    border: none;
    padding: var(--space-md);
    border-radius: 8px;
    font-family: var(--font-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.9rem;
    min-height: 52px;
    box-shadow: 0 10px 20px rgba(var(--primary-accent-rgb), 0.2);
    margin-top: var(--space-sm);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(var(--primary-accent-rgb), 0.3);
}

.form-footer {
    text-align: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-sm);
}

.form-footer p {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.form-footer a {
    color: var(--primary-accent);
    text-decoration: none;
}

.form-footer a:hover {
    text-decoration: underline;
}


/* ============================================================
   9. FOOTER LOGO STYLES
   - Army green DEIJS, dark/white .EU based on theme
   ============================================================ */
.footer-logo-deijs {
    color: #4a5d23;
}

.footer-logo-eu {
    color: #333333;
}

[data-theme="dark"] .footer-logo-eu {
    color: #ffffff;
}

[data-theme="light"] .footer-logo-deijs {
    color: #3d4d1c;
}

[data-theme="light"] .footer-logo-eu {
    color: #333333;
}


/* ============================================================
   10. NEURAL LOADER ANIMATION
   - Pulsing nodes with rotating connection circle
   ============================================================ */
.neural-loader {
    width: 80px;
    height: 80px;
    position: relative;
}

.neural-node {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--primary-accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--primary-accent);
    animation: pulse 2s infinite;
}

/* Node Positions (8 nodes in a circle) */
.neural-node:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.neural-node:nth-child(2) { top: 20%; right: 15%; animation-delay: 0.2s; }
.neural-node:nth-child(3) { top: 50%; right: 0; animation-delay: 0.4s; }
.neural-node:nth-child(4) { bottom: 20%; right: 15%; animation-delay: 0.6s; }
.neural-node:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 0.8s; }
.neural-node:nth-child(6) { bottom: 20%; left: 15%; animation-delay: 1s; }
.neural-node:nth-child(7) { top: 50%; left: 0; animation-delay: 1.2s; }
.neural-node:nth-child(8) { top: 20%; left: 15%; animation-delay: 1.4s; }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        background-color: var(--primary-accent);
        box-shadow: 0 0 15px var(--primary-accent);
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
        background-color: var(--secondary-accent);
        box-shadow: 0 0 25px var(--secondary-accent);
    }
}

.neural-connection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(var(--primary-accent-rgb), 0.3);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   11. HEADER & NAVIGATION
   - Fixed header with logo and hamburger menu
   - Floating peachy gradient clouds in dark mode
   - Pulsing light border animation
   ============================================================ */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    transition: all var(--transition-smooth);
}

/* Dark Mode Header: Visible gradient, distinct from page */
[data-theme="dark"] header {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(30, 35, 33, 0.95) 100%);
    border-bottom: 1px solid rgba(170, 203, 196, 0.25);
}

/* Light Mode Header: Visible gradient, distinct from page */
[data-theme="light"] header {
    background: linear-gradient(180deg, rgba(245, 250, 248, 0.98) 0%, rgba(230, 240, 236, 0.95) 100%);
    border-bottom: 1px solid rgba(6, 48, 40, 0.2);
}

/* Pulsing Light Border - travels across the header */
header .header-border-light {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    overflow: hidden;
}

header .header-border-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    animation: borderLightPulse 4s ease-in-out infinite;
}

/* Dark Mode: Pistachio to almost white */
[data-theme="dark"] header .header-border-light::before {
    background: linear-gradient(90deg, transparent 0%, #aacbc4 30%, #f1f7f6 50%, #aacbc4 70%, transparent 100%);
}

/* Light Mode: Pine to grey */
[data-theme="light"] header .header-border-light::before {
    background: linear-gradient(90deg, transparent 0%, #063028 30%, #333333 50%, #063028 70%, transparent 100%);
}

@keyframes borderLightPulse {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Floating peachy gradient cloud - left side */
[data-theme="dark"] header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 180, 120, 0.08) 0%, rgba(255, 200, 150, 0.04) 40%, transparent 70%);
    animation: floatCloud 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Floating peachy gradient cloud - right side */
[data-theme="dark"] header::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 180%;
    background: radial-gradient(ellipse at center, rgba(255, 220, 180, 0.06) 0%, rgba(255, 180, 120, 0.03) 50%, transparent 70%);
    animation: floatCloud 20s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
}

/* Ensure header content stays above clouds */
[data-theme="dark"] header .logo,
[data-theme="dark"] header .nav-toggle {
    position: relative;
    z-index: 1;
}

@keyframes floatCloud {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(10px) translateY(-5px); }
    50% { transform: translateX(20px) translateY(5px); }
    75% { transform: translateX(5px) translateY(-3px); }
}

/* Light Mode: Clean White Glass */
[data-theme="light"] header {
    background: linear-gradient(135deg, #F1F7F6 0%, #AACBC4 100%);
}

/* Logo Styles */
.logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    transition: color var(--transition-fast);
}

.logo:hover {
    color: var(--primary-accent);
}

.logo-highlight {
    color: #4a5d23;
    margin-right: 0;
}

/* Dark theme: Light mint green for better readability */
[data-theme="dark"] .logo-highlight {
    color: #a8d5ba;
}

.logo-eu {
    color: #333333;
}

[data-theme="dark"] .logo-eu {
    color: #ffffff;
}

[data-theme="light"] .logo-highlight {
    color: #3d4d1c;
}

[data-theme="light"] .logo-eu {
    color: #333333;
}

/* Navigation Toggle (Hamburger) */
.nav-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 48px;
    height: 48px;
    border-radius: 8px;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 1001;
    transition: all var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle:focus {
    color: var(--primary-accent);
    border-color: var(--primary-accent);
}

/* ============================================================
   12. MENU OVERLAY
   - Full-screen overlay with accordion sections
   ============================================================ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-base);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    overflow-y: auto;
    padding: calc(80px + var(--space-xl)) var(--space-lg) var(--space-xxl);
}

/* Dark Mode: Deep Green Glass */
[data-theme="dark"] .menu-overlay {
    background-color: rgba(1, 28, 22, 0.95);
}

/* Light Mode: White Glass */
[data-theme="light"] .menu-overlay {
    background-color: rgba(255, 255, 255, 0.95);
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-section {
    margin-bottom: var(--space-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.menu-section summary {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-accent);
    cursor: pointer;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-color);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
}

.menu-section summary::-webkit-details-marker {
    display: none;
}

.menu-section summary::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform var(--transition-fast);
}

.menu-section[open] summary::after {
    transform: rotate(45deg);
}

.menu-links {
    padding: var(--space-md) 0;
}

.menu-link {
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-md) var(--space-sm);
    min-height: 48px;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.menu-link:hover,
.menu-link:focus {
    color: var(--primary-accent);
    background-color: var(--bg-elevated);
    transform: translateX(10px);
}

.menu-link i {
    margin-right: var(--space-md);
    width: 24px;
    text-align: center;
}


/* ============================================================
   13. THEME TOGGLE
   - Vertical side button (desktop only)
   ============================================================ */
.theme-toggle {
    position: fixed;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.theme-toggle-btn {
    background: var(--bg-elevated);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-md);
    border-radius: 8px;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.theme-toggle-btn:hover {
    border-color: var(--primary-accent);
    color: var(--primary-accent);
    box-shadow: 0 4px 20px var(--glow-color);
    transform: translateY(-2px);
}

/* Hide on mobile - use bottom bar instead */
@media (max-width: 768px) {
    .theme-toggle {
        display: none;
    }
}


/* ============================================================
   14. HUD ELEMENTS (Location Badge + Time)
   - Fixed position badges showing mode and system time
   ============================================================ */
.hud-container {
    position: fixed;
    left: var(--space-md);
    top: var(--loc-top);
    bottom: var(--loc-bottom);
    z-index: 997;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition: all var(--transition-smooth);
    transform: var(--loc-transform);
}

.hud-badge {
    background: var(--bg-elevated);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast);
}

.hud-badge-label {
    color: var(--primary-accent);
    margin-right: var(--space-xs);
}

/* Time badge - hide on small mobile */
.time-badge {
    display: none;
}

@media (min-width: 480px) {
    .time-badge {
        display: block;
    }
}


/* ============================================================
   15. VIEWPOINT NAVIGATION
   - Bottom center pill with prev/next buttons
   ============================================================ */
.viewpoint-nav {
    position: fixed;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 997;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(6, 95, 70, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    border-radius: 50px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(52, 211, 153, 0.2);
}

.viewpoint-btn {
    background: none;
    border: none;
    color: #ffffff;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.viewpoint-btn:hover,
.viewpoint-btn:focus {
    color: var(--primary-accent);
    background: rgba(var(--primary-accent-rgb), 0.1);
    box-shadow: 0 0 10px var(--glow-color);
}

.viewpoint-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
}

.viewpoint-indicator {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 40px;
    text-align: center;
    letter-spacing: 0.05em;
}

/* Hide on mobile - use bottom bar instead */
@media (max-width: 768px) {
    .viewpoint-nav {
        display: none;
    }
}


/* ============================================================
   16. MOBILE BOTTOM BAR
   - Fixed bottom navigation for mobile devices
   - Gradient backgrounds with pulsing border animation
   ============================================================ */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 998;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    overflow: hidden;
}

/* Dark Mode: Deep gradient with permanent border */
[data-theme="dark"] .mobile-bottom-bar {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.98) 0%, rgba(20, 30, 28, 0.98) 50%, rgba(15, 25, 22, 0.98) 100%);
    border-top: 1px solid rgba(170, 203, 196, 0.25);
}

/* Light Mode: Pistachio gradient with permanent border */
[data-theme="light"] .mobile-bottom-bar {
    background: linear-gradient(180deg, #AACBC4 0%, #C5DDD8 50%, #D5E8E3 100%);
    border-top: 1px solid rgba(6, 48, 40, 0.2);
}

/* Pulsing border animation for mobile bar - matches header */
.mobile-bottom-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    animation: mobileBarBorderPulse 4s ease-in-out infinite;
}

/* Dark Mode: Pistachio to almost white pulse */
[data-theme="dark"] .mobile-bottom-bar::before {
    background: linear-gradient(90deg, transparent 0%, #aacbc4 30%, #f1f7f6 50%, #aacbc4 70%, transparent 100%);
}

/* Light Mode: Pine to grey pulse */
[data-theme="light"] .mobile-bottom-bar::before {
    background: linear-gradient(90deg, transparent 0%, #063028 30%, #333333 50%, #063028 70%, transparent 100%);
}

@keyframes mobileBarBorderPulse {
    0% { left: -100%; }
    100% { left: 100%; }
}

@media (max-width: 768px) {
    .mobile-bottom-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

.mobile-bar-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: var(--space-sm);
    min-width: 60px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Dark Mode: White icons and text */
[data-theme="dark"] .mobile-bar-btn {
    color: #ffffff;
}

[data-theme="dark"] .mobile-bar-btn:hover,
[data-theme="dark"] .mobile-bar-btn:focus,
[data-theme="dark"] .mobile-bar-btn.active {
    color: var(--primary-accent);
}

/* Light Mode: White icons and text (for contrast on pistachio) */
[data-theme="light"] .mobile-bar-btn {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .mobile-bar-btn:hover,
[data-theme="light"] .mobile-bar-btn:focus,
[data-theme="light"] .mobile-bar-btn.active {
    color: #063028;
    text-shadow: none;
}

.mobile-bar-btn i {
    font-size: 1.2rem;
}

.mobile-bar-btn span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-family: var(--font-heading);
}

/* ============================================================
   17. HERO SECTION
   - Full-viewport hero with video background
   - Animated headline with glitch effect
   - NOTE: career.css may override these for home page
   ============================================================ */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: var(--space-xxl) var(--space-md);
    padding-bottom: calc(var(--space-xxl) + 80px);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Video/Image background styling */
.hero-bg video,
.hero-bg .hero-bg-video,
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%) contrast(1.1);
    transition: filter var(--transition-smooth);
}

/* Dark Mode: Atmospheric but visible */
[data-theme="dark"] .hero-bg video,
[data-theme="dark"] .hero-bg .hero-bg-video,
[data-theme="dark"] .hero-bg img {
    filter: grayscale(30%) contrast(1.15) brightness(0.75);
}

/* Light Mode: Bright, sunny */
[data-theme="light"] .hero-bg video,
[data-theme="light"] .hero-bg .hero-bg-video,
[data-theme="light"] .hero-bg img {
    filter: grayscale(0%) contrast(1.1) brightness(1.1) saturate(1.1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-overlay);
    transition: background var(--transition-smooth);
}

.hero-accent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-accent-overlay);
    transition: background var(--transition-smooth);
}

.hero-content {
    text-align: center;
    max-width: 900px;
    z-index: 1;
    padding: 0 var(--space-sm);
}

.hero-headline {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 8vw, 4.5rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-headline-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s forwards;
}

.hero-headline-word:nth-child(1) { animation-delay: 0.2s; }
.hero-headline-word:nth-child(2) { animation-delay: 0.4s; }
.hero-headline-word:nth-child(3) { animation-delay: 0.6s; }

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

.hero-accent {
    color: var(--primary-accent);
    text-shadow: 0 0 30px var(--glow-color);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 2.5vw, 1.25rem);
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    color: var(--text-secondary);
    line-height: 1.7;
    opacity: 0;
    animation: fadeIn 1s 1s forwards;
}

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

.hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    opacity: 0;
    animation: fadeIn 1s 1.5s forwards;
}

@media (min-width: 480px) {
    .hero-cta {
        flex-direction: row;
        justify-content: center;
    }
}


/* ============================================================
   18. CTA BUTTONS
   - Primary (gradient) and Secondary (outline) styles
   - Pill shape (border-radius: 50px)
   - NOTE: career.css may override these for home page
   ============================================================ */
.cta-btn {
    padding: var(--space-md) var(--space-xl);
    border-radius: 50px;
    font-family: var(--font-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.85rem;
    min-height: 52px;
    min-width: 180px;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Hero CTA container for even button widths */
.hero-cta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-lg);
}

/* ------------------------------------------------------------
   HERO CTA BUTTON SIZING
   - flex: 1 = buttons grow equally to share available space
   - min-width: 180px = prevents buttons from getting too small
   - max-width: 220px = prevents buttons from stretching too wide
   - Height is controlled by .cta-btn min-height (52px) + padding
   - To change button height: adjust .cta-btn min-height above
   ------------------------------------------------------------ */
.hero-cta .cta-btn {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 220px;
}

/* Primary button: Mint to Pistachio gradient */
.cta-primary {
    background: linear-gradient(135deg, #2FA98C 0%, #AACBC4 100%);
    color: #011c16;
    border: none;
    box-shadow: 0 4px 14px rgba(47, 169, 140, 0.25);
}

.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(47, 169, 140, 0.35);
}

.cta-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--primary-accent);
}

.cta-secondary:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.05);
    transform: translateY(-2px);
}

/* Hero scroll down indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: calc(var(--space-xl) + 80px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: fadeIn 1s 2s forwards, bounce 2s 2.5s infinite;
}

@media (max-width: 768px) {
    .hero-scroll-indicator {
        bottom: calc(var(--space-lg) + 100px);
    }
}

.hero-scroll-btn {
    background: rgba(var(--primary-accent-rgb), 0.05);
    border: 1px solid var(--primary-accent);
    color: var(--primary-accent);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hero-scroll-btn:hover {
    background: var(--primary-accent);
    color: #011c16;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}


/* ============================================================
   19. SECTION LAYOUT
   - Common section padding, headers, titles
   ============================================================ */
.section {
    padding: var(--space-xxl) var(--space-md);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .section {
        padding: calc(var(--space-xxl) * 1.5) var(--space-xl);
    }
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
    .section-header {
        margin-bottom: var(--space-lg);
    }
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--primary-accent), transparent);
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 400;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Light Theme: Section gradient from stone (#707D7D) at bottom to #F1F7F6 at top */
[data-theme="light"] .section {
    background: linear-gradient(180deg, #F1F7F6 0%, #F1F7F6 60%, #707D7D 100%);
}

/* Override for specific sections that have their own backgrounds */
[data-theme="light"] .hero,
[data-theme="light"] .music-section {
    background: transparent;
}

/* Album tap instruction */
.album-tap-instruction {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    opacity: 0.8;
    font-style: italic;
}

/* ============================================================
   20. OFFERINGS GRID
   - Service cards with hover effects
   - Emerald to Peach gradient accents
   ============================================================ */
.offerings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 600px) {
    .offerings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .offerings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.offering-card {
    background-color: var(--bg-surface);
    border-radius: 16px;
    overflow: hidden;
    transition: all var(--transition-smooth);
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.offering-card:hover {
    transform: translateY(-5px);
    border-color: #ff9f7c;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 159, 124, 0.25);
}

.offering-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--primary-accent), #ff9f7c);
}

.offering-icon {
    font-size: 2rem;
    color: var(--primary-accent);
    margin: var(--space-lg) 0 var(--space-md);
    text-align: center;
    transition: color var(--transition-fast);
}

.offering-card:hover .offering-icon {
    color: #ff9f7c;
}

.offering-content {
    padding: 0 var(--space-lg) var(--space-lg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.offering-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.offering-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    flex-grow: 1;
    font-size: 0.9rem;
    line-height: 1.6;
}

.offering-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--primary-accent);
    text-decoration: none;
    font-family: var(--font-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.offering-link:hover {
    gap: var(--space-md);
    text-shadow: 0 0 10px rgba(255, 159, 124, 0.4);
    color: #ff9f7c;
}


/* ============================================================
   21. MANIFESTO SECTION
   - Principles grid with numbered items
   ============================================================ */
.manifesto {
    background-color: var(--bg-elevated);
    position: relative;
}

.manifesto-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 50%, rgba(var(--primary-accent-rgb), 0.05), transparent 70%),
                radial-gradient(circle at 70% 20%, rgba(255, 159, 124, 0.05), transparent 70%);
    z-index: 0;
}

.principles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

@media (min-width: 600px) {
    .principles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media (min-width: 900px) {
    .principles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.principle {
    background-color: var(--bg-base);
    border-radius: 16px;
    padding: var(--space-lg);
    transition: all var(--transition-smooth);
    border: 1px solid transparent;
}

.principle:hover {
    transform: translateY(-3px);
    border-color: #ff9f7c;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 159, 124, 0.25);
}

.principle-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--primary-accent-rgb), 0.3);
    margin-bottom: var(--space-sm);
    line-height: 1;
}

.principle-title {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.principle-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}

.manifesto-cta {
    text-align: center;
    margin-top: var(--space-xl);
    position: relative;
    z-index: 1;
}


/* ============================================================
   22. CONTACT SECTION (Job Inquiry Form)
   - Form with gradient background
   ============================================================ */
.contact-section {
    text-align: center;
    padding: var(--space-xxl) var(--space-md);
    background-color: var(--bg-surface);
    position: relative;
    overflow: hidden;
}

.contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--primary-accent-rgb), 0.03), rgba(255, 159, 124, 0.05));
    z-index: 0;
}

.contact-content {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.contact-title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.contact-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: left;
}

.form-label {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.form-input {
    padding: var(--space-md);
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 52px;
    transition: all var(--transition-fast);
}

textarea.form-input {
    min-height: 120px;
    resize: vertical;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.15);
    background-color: rgba(var(--primary-accent-rgb), 0.02);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    text-align: left;
    margin-top: var(--space-sm);
}

.checkbox {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-accent);
    flex-shrink: 0;
}

.checkbox-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.checkbox-label a {
    color: var(--primary-accent);
    text-decoration: none;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary-accent), var(--tertiary-accent));
    color: #011c16;
    border: none;
    padding: var(--space-md);
    border-radius: 8px;
    font-family: var(--font-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.9rem;
    min-height: 52px;
    margin-top: var(--space-md);
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.35);
}


/* ============================================================
   23. FOOTER
   - Footer layout with floating peachy clouds (dark mode)
   ============================================================ */
footer {
    background-color: var(--bg-base);
    padding: var(--space-xl) var(--space-md);
    padding-bottom: calc(var(--space-xl) + 80px);
    border-top: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Floating peachy gradient cloud for footer */
[data-theme="dark"] footer::before {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -15%;
    width: 70%;
    height: 150%;
    background: radial-gradient(ellipse at center, rgba(255, 180, 120, 0.06) 0%, rgba(255, 200, 150, 0.03) 40%, transparent 70%);
    animation: floatCloudFooter 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] footer::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 50%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(255, 220, 180, 0.05) 0%, rgba(255, 180, 120, 0.02) 50%, transparent 70%);
    animation: floatCloudFooter 25s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] footer .footer-content,
[data-theme="dark"] footer .footer-bottom {
    position: relative;
    z-index: 1;
}

@keyframes floatCloudFooter {
    0%, 100% { transform: translateX(0) translateY(0); }
    33% { transform: translateX(-15px) translateY(8px); }
    66% { transform: translateX(10px) translateY(-5px); }
}

/* Light Mode Footer */
[data-theme="light"] footer {
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
    footer {
        padding-bottom: var(--space-xl);
    }
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.footer-logo {
    flex: 1;
    min-width: 250px;
}

.footer-logo-link {
    text-decoration: none;
}

.footer-logo-text {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
    color: #ff9f7c;
    transition: color var(--transition-fast);
}

.footer-logo-link:hover .footer-logo-text {
    color: var(--primary-accent);
}

.footer-tagline {
    font-family: var(--font-body);
    color: var(--text-secondary);
    max-width: 280px;
    margin-bottom: var(--space-lg);
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-surface);
    color: var(--primary-accent);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background-color: #ff9f7c;
    color: #011c16;
    border-color: #ff9f7c;
    transform: translateY(-2px);
}

/* Music Player Link - Special Animation */
.music-player-link {
    position: relative;
}

.music-player-link::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-accent), #10b981);
    opacity: 0;
    animation: pulse-ring 2s ease-in-out infinite;
    z-index: -1;
}

.music-player-link:hover::before {
    opacity: 0.5;
}

@keyframes pulse-ring {
    0%, 100% { transform: scale(1); opacity: 0; }
    50% { transform: scale(1.2); opacity: 0.3; }
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    flex: 2;
}

@media (min-width: 600px) {
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-column-title {
    font-family: var(--font-accent);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-column-list {
    list-style: none;
}

.footer-column-list li {
    margin-bottom: var(--space-sm);
}

.footer-column-list a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-size: 0.85rem;
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
}

.footer-column-list a:hover {
    color: #ff9f7c;
    padding-left: 5px;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-color);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 600px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.copyright {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.back-to-top {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.back-to-top:hover {
    background-color: #ff9f7c;
    color: #011c16;
    border-color: #ff9f7c;
    transform: translateY(-3px);
}


/* ============================================================
   24. DYNAMIC CURSOR (Desktop Only)
   - Custom cursor that expands on hover
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .cursor-dot {
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background-color: var(--primary-accent);
        border-radius: 50%;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
        mix-blend-mode: difference;
    }

    .cursor-dot.active {
        width: 50px;
        height: 50px;
        background-color: rgba(255, 159, 124, 0.2);
        border: 1px solid #ff9f7c;
    }
}

/* Hide cursor on touch devices */
@media (hover: none) {
    .cursor-dot {
        display: none !important;
    }
}


/* ============================================================
   25. GLITCH EFFECT (Bunkros Style)
   - White text with green shadow animation
   ============================================================ */
.glitch {
    position: relative;
    color: #ffffff;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
}

/* Layer 1: Green shadow shift */
.glitch::before {
    left: 3px;
    text-shadow: -3px 0 #6ee7b7, 3px 0 #6ee7b7;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

/* Layer 2: Dark shadow shift */
.glitch::after {
    left: -3px;
    text-shadow: 3px 0 #333333, -3px 0 #333333;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(42px, 9999px, 44px, 0); }
    5% { clip: rect(12px, 9999px, 59px, 0); }
    10% { clip: rect(48px, 9999px, 29px, 0); }
    15% { clip: rect(42px, 9999px, 73px, 0); }
    20% { clip: rect(63px, 9999px, 27px, 0); }
    25% { clip: rect(34px, 9999px, 55px, 0); }
    30% { clip: rect(86px, 9999px, 73px, 0); }
    35% { clip: rect(20px, 9999px, 20px, 0); }
    40% { clip: rect(26px, 9999px, 60px, 0); }
    45% { clip: rect(25px, 9999px, 66px, 0); }
    50% { clip: rect(57px, 9999px, 98px, 0); }
    55% { clip: rect(5px, 9999px, 46px, 0); }
    60% { clip: rect(82px, 9999px, 31px, 0); }
    65% { clip: rect(54px, 9999px, 27px, 0); }
    70% { clip: rect(28px, 9999px, 99px, 0); }
    75% { clip: rect(45px, 9999px, 69px, 0); }
    80% { clip: rect(23px, 9999px, 85px, 0); }
    85% { clip: rect(54px, 9999px, 84px, 0); }
    90% { clip: rect(45px, 9999px, 47px, 0); }
    95% { clip: rect(37px, 9999px, 20px, 0); }
    100% { clip: rect(4px, 9999px, 91px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); }
    5% { clip: rect(52px, 9999px, 74px, 0); }
    10% { clip: rect(79px, 9999px, 85px, 0); }
    15% { clip: rect(75px, 9999px, 5px, 0); }
    20% { clip: rect(67px, 9999px, 61px, 0); }
    25% { clip: rect(14px, 9999px, 79px, 0); }
    30% { clip: rect(1px, 9999px, 66px, 0); }
    35% { clip: rect(86px, 9999px, 30px, 0); }
    40% { clip: rect(23px, 9999px, 98px, 0); }
    45% { clip: rect(85px, 9999px, 72px, 0); }
    50% { clip: rect(71px, 9999px, 75px, 0); }
    55% { clip: rect(2px, 9999px, 48px, 0); }
    60% { clip: rect(30px, 9999px, 16px, 0); }
    65% { clip: rect(59px, 9999px, 50px, 0); }
    70% { clip: rect(41px, 9999px, 62px, 0); }
    75% { clip: rect(2px, 9999px, 82px, 0); }
    80% { clip: rect(47px, 9999px, 73px, 0); }
    85% { clip: rect(3px, 9999px, 27px, 0); }
    90% { clip: rect(40px, 9999px, 86px, 0); }
    95% { clip: rect(45px, 9999px, 78px, 0); }
    100% { clip: rect(19px, 9999px, 84px, 0); }
}


/* ============================================================
   26. ANIMATION UTILITIES
   - Scroll-reveal animations for cards
   ============================================================ */
.offering-card,
.principle {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s var(--transition-smooth);
}

.offering-card.animated,
.principle.animated {
    opacity: 1;
    transform: translateY(0);
}

@keyframes slideIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100px); opacity: 0; }
}


/* ============================================================
   27. INTERACTIVE PARTICLES (Both Themes)
   - Dark: floating white dots | Light: floating pine dots (#032221)
   - React to mouse movement
   ============================================================ */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}


/* ============================================================
   28. MOBILE RESPONSIVE - COMPREHENSIVE VIEWPORT HANDLING
   - Proper scaling for all card types on mobile devices
   - Breakpoints: 480px (small), 600px (medium), 768px (tablet)
   ============================================================ */

/* --- Base Mobile Styles (up to 768px) --- */
@media (max-width: 768px) {
    /* Section spacing adjustments */
    .experience-swiper-section,
    .education-swiper-section,
    .blog-swiper-section,
    .cv-section,
    .platforms-section {
        min-height: auto;
        padding: 60px var(--space-sm) 80px;
    }
    
    /* Section headers */
    .section-header {
        margin-bottom: var(--space-lg);
        padding: 0 var(--space-sm);
    }
    
    .section-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .section-subtitle {
        font-size: clamp(0.85rem, 3vw, 1rem);
        line-height: 1.5;
    }
    
    /* Swiper shell - full width on mobile */
    .swiper-shell {
        width: 100%;
        padding: 0 var(--space-sm);
    }
    
    /* Card slide content scaling */
    .slide-content {
        padding: 1rem;
    }
    
    .slide-content h3 {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    
    .slide-content p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .slide-company {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
    
    .slide-achievement {
        font-size: 0.75rem;
        padding: 0.6rem;
    }
    
    .slide-image-placeholder {
        aspect-ratio: 16 / 4;
    }
    
    .slide-image-placeholder i {
        font-size: 1.8rem;
    }
    
    .slide-period {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
        top: 8px;
        right: 8px;
    }
    
    /* Swiper navigation arrows - smaller on mobile */
    .experience-swiper .swiper-button-next,
    .experience-swiper .swiper-button-prev,
    .education-swiper .swiper-button-next,
    .education-swiper .swiper-button-prev,
    .blog-swiper .swiper-button-next,
    .blog-swiper .swiper-button-prev {
        width: 36px;
        height: 36px;
    }
    
    .experience-swiper .swiper-button-next::after,
    .experience-swiper .swiper-button-prev::after,
    .education-swiper .swiper-button-next::after,
    .education-swiper .swiper-button-prev::after,
    .blog-swiper .swiper-button-next::after,
    .blog-swiper .swiper-button-prev::after {
        font-size: 0.75rem;
    }
    
    /* CV Cards */
    .cv-grid-desktop {
        display: none;
    }
    
    .cv-swiper-shell {
        display: block;
        width: 100%;
        padding: 0 var(--space-sm);
    }
    
    .cv-swiper {
        padding: 10px 0 40px;
    }
    
    .cv-swiper .swiper-slide {
        height: auto;
        display: flex;
    }
    
    .cv-swiper .cv-card {
        width: 100%;
        margin: 0 auto;
    }
    
    .cv-pagination {
        bottom: 0;
    }
    
    .cv-pagination .swiper-pagination-bullet {
        background: var(--text-tertiary);
        opacity: 0.5;
    }
    
    .cv-pagination .swiper-pagination-bullet-active {
        background: var(--primary-accent);
        opacity: 1;
    }
    
    .cv-card {
        padding: 1.5rem 1.25rem;
    }
    
    .cv-card i {
        font-size: 2rem;
    }
    
    .cv-card h3 {
        font-size: 1.1rem;
    }
    
    .cv-card p {
        font-size: 0.85rem;
    }
    
    .cv-download {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
    
    /* CV Section - fit in one viewport */
    .cv-section {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 60px var(--space-sm);
    }
    
    /* Platform Cards - fit both in one viewport */
    .platforms-section {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 60px var(--space-sm);
    }
    
    .platforms-grid {
        gap: var(--space-md);
        padding: 0 var(--space-sm);
    }
    
    .platform-card {
        padding: 1.5rem 1.25rem;
    }
    
    .platform-card i {
        font-size: 2rem;
    }
    
    .platform-card h3 {
        font-size: 1.1rem;
    }
    
    .platform-card p {
        font-size: 0.85rem;
    }
    
    /* Contact Section - new viewport */
    .contact-section {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 60px;
    }
    
    /* Contact form */
    .contact-form-container {
        padding: 0 var(--space-sm);
    }
    
    .contact-form {
        padding: var(--space-lg);
    }
}

/* --- Small Mobile (up to 480px) --- */
@media (max-width: 480px) {
    /* Even tighter spacing */
    .experience-swiper-section,
    .education-swiper-section,
    .blog-swiper-section,
    .cv-section,
    .platforms-section {
        padding: 50px var(--space-xs) 70px;
    }
    
    .swiper-shell {
        padding: 0 var(--space-xs);
    }
    
    /* Slide cards */
    .experience-slide,
    .education-slide,
    .blog-slide {
        border-radius: 12px;
        border-width: 2px;
    }
    
    .slide-content {
        padding: 0.85rem;
    }
    
    .slide-content h3 {
        font-size: 0.95rem;
    }
    
    .slide-content p {
        font-size: 0.8rem;
    }
    
    .slide-company {
        font-size: 0.65rem;
    }
    
    .slide-achievement {
        font-size: 0.7rem;
        padding: 0.5rem;
    }
    
    .slide-image-placeholder {
        aspect-ratio: 16 / 4.5;
    }
    
    .slide-image-placeholder i {
        font-size: 1.5rem;
    }
    
    /* CV Section - compact for small screens */
    .cv-section {
        padding: 50px var(--space-xs);
    }
    
    .cv-swiper-shell {
        padding: 0 var(--space-xs);
    }
    
    .cv-card {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }
    
    .cv-card i {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
    
    .cv-card h3 {
        font-size: 1rem;
    }
    
    .cv-card p {
        font-size: 0.8rem;
    }
    
    /* Platform Cards - compact for small screens */
    .platforms-section {
        padding: 50px var(--space-xs);
    }
    
    .platforms-grid {
        max-width: 100%;
        padding: 0 var(--space-xs);
    }
    
    .platform-card {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }
    
    .platform-card i {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
    
    .platform-card h3 {
        font-size: 1rem;
    }
    
    /* Contact Section - compact */
    .contact-section {
        padding-top: 50px;
    }
    
    /* Contact form */
    .contact-form {
        padding: var(--space-md);
        border-radius: 12px;
    }
    
    .form-input,
    .form-textarea {
        padding: var(--space-sm);
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    /* Hide swiper nav arrows on very small screens */
    .experience-swiper .swiper-button-next,
    .experience-swiper .swiper-button-prev,
    .education-swiper .swiper-button-next,
    .education-swiper .swiper-button-prev,
    .blog-swiper .swiper-button-next,
    .blog-swiper .swiper-button-prev {
        display: none;
    }
}

/* --- Touch device optimizations --- */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .experience-slide,
    .education-slide,
    .blog-slide,
    .cv-card,
    .platform-card {
        min-height: 44px; /* iOS accessibility minimum */
    }
    
    /* Remove hover transforms on touch */
    .experience-slide:hover,
    .education-slide:hover,
    .blog-slide:hover,
    .cv-card:hover,
    .platform-card:hover {
        transform: none;
    }
    
    /* Active state instead of hover */
    .experience-slide:active,
    .education-slide:active,
    .blog-slide:active,
    .cv-card:active,
    .platform-card:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* --- Landscape mobile optimization --- */
@media (max-height: 500px) and (orientation: landscape) {
    .experience-swiper-section,
    .education-swiper-section,
    .blog-swiper-section,
    .cv-section,
    .platforms-section {
        min-height: auto;
        padding: 40px var(--space-md);
    }
    
    .section-header {
        margin-bottom: var(--space-md);
    }
    
    .slide-image-placeholder {
        aspect-ratio: 16 / 5;
    }
}

/* --- Safe area handling for notched devices --- */
@supports (padding: max(0px)) {
    .experience-swiper-section,
    .education-swiper-section,
    .blog-swiper-section,
    .cv-section,
    .platforms-section {
        padding-left: max(var(--space-sm), env(safe-area-inset-left));
        padding-right: max(var(--space-sm), env(safe-area-inset-right));
    }
}