:root {
    /* Modern Professional Palette */
    --primary-color: #3b82f6;
    --secondary-color: #8b5cf6;
    --accent-color: #06b6d4;
    --success-color: #10b981;
    --text-color: #1e293b;
    --light-text-color: #64748b;
    --bg-color: #f8fafc;
    --light-bg-color: #ffffff;
    --dark-bg-color: #0f172a;
    --dark-text-color: #f1f5f9;
    --dark-light-text-color: #94a3b8;
    --border-color: #e2e8f0;
    --section-padding: 100px 0;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);

    /* Typography */
    --font-main: 'Inter', sans-serif;
    --font-display: 'Poppins', sans-serif;
}

/* Dark theme with premium aesthetic */
html.dark-theme {
    --primary-color: #60a5fa;
    --secondary-color: #a78bfa;
    --accent-color: #22d3ee;
    --success-color: #34d399;
    --text-color: #f1f5f9;
    --light-text-color: #94a3b8;
    --bg-color: #0f172a;
    --light-bg-color: #1e293b;
    --dark-bg-color: #020617;
    --border-color: #334155;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    /* Dynamic background base */
    background-image:
        radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
    transition: var(--transition);
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    letter-spacing: -0.5px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: var(--section-padding);
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-header h2 {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header p {
    color: var(--light-text-color);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.divider {
    display: block;
    height: 4px;
    width: 60px;
    background: var(--gradient);
    margin: 16px auto;
    border-radius: 2px;
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s, visibility 0.5s;
}

.loader {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(59, 130, 246, 0.2);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
}

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

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

/* Header/Navigation with glassmorphism */
header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1050px;
    padding: 0 8px;
    z-index: 1000;
    background: transparent;
    border: none;
    box-shadow: none;
}

header .container {
    padding: 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.logo-detached {
    margin-right: auto;
    display: flex;
    align-items: center;
    transform: translateX(-16px);
}

nav {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-shell,
.header-controls {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    transition: var(--transition);
}

.nav-shell {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 18px;
}

.header-controls {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open header {
    z-index: 1500;
}

html.dark-theme .nav-shell,
html.dark-theme .header-controls {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

header.scrolled .nav-shell,
header.scrolled .header-controls {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

html.dark-theme header.scrolled .nav-shell,
html.dark-theme header.scrolled .header-controls {
    background: rgba(15, 23, 42, 0.85);
}

.logo-detached img,
.logo img {
    height: 57px;
    width: auto;
    display: block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.logo img:hover {
    transform: scale(1.2);
}

/* Logo Toggling Logic */
/* Default (Light Theme) -> Show White Logo (logo_white.png), Hide Dark Logo (logo_dark.png) */
.light-mode-logo {
    display: block !important;
}

.dark-mode-logo {
    display: none !important;
}

/* Dark Theme -> Show Dark Logo (logo_dark.png), Hide White Logo (logo_white.png) */
html.dark-theme .light-mode-logo {
    display: none !important;
}

html.dark-theme .dark-mode-logo {
    display: block !important;
}

.menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 8px;
}

.menu li {
    position: relative;
}

.menu li a {
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    letter-spacing: -0.5px;
}

.menu li a:hover {
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.1) translateY(-2px);
}

.menu li a.active {
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
    font-weight: 600;
}

html.dark-theme .menu li a:hover,
html.dark-theme .menu li a.active {
    background: rgba(255, 255, 255, 0.1);
}



.menu-btn {
    display: none;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1.35rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.menu-btn:hover,
.menu-btn.active {
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.12);
}

.menu-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#theme-toggle,
.lheader button {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    /* Ensure button is above other elements */
    border-radius: 8px;
}

/* Ensure button color is visible in dark theme */
html.dark-theme header button {
    color: var(--text-color);
}

#theme-toggle:hover,
.lang-switch:hover {
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
}

.controls-separator {
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
    margin: 0 8px;
}

/* Hero Section with modern gradient background */
/* Hero Section */
.hero {
    padding-top: 160px;
    padding-bottom: 120px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Particle Canvas Background - Fixed */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#particle-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ensure hero content is above particle canvas */
.hero .container {
    position: relative;
    z-index: 1;
}

.hero .scroll-down {
    z-index: 1;
}


.hero-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 64px;
}

.hero-text {
    flex: 1;
    min-width: 400px;
}

.hero-text h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--font-main);
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-color);
    line-height: 1.1;
}

.hero-text h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    color: var(--text-color);
}



.hero-text p {
    margin-bottom: 32px;
    font-size: 1.125rem;
    color: var(--light-text-color);
    line-height: 1.8;
    max-width: 580px;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--gradient);
    color: white;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--text-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}



.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
}

.image-container {
    position: relative;
    width: 380px;
    height: 380px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    border: 3px solid var(--border-color);
}

.image-container:hover img {
    transform: scale(1.03);
}

.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition);
}

.scroll-down i {
    font-size: 1.75rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}

/* About Section with enhanced cards */
.about {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
}

.about-text {
    flex: 6;
    min-width: 300px;
}

.about-text p {
    margin-bottom: 24px;
    color: var(--text-color);
    line-height: 1.8;
    font-size: 1.05rem;
}

.about-text h3 {
    color: var(--primary-color);
    font-size: 1.75rem;
    margin: 32px 0 24px;
}



/* Glassmorphism Utility */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-radius: 20px;
    transition: var(--transition);
}

html.dark-theme .glass-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Light mode glassmorphism - Darker tint as requested */
html:not(.dark-theme) .glass-card {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    border-color: var(--primary-color);
}





/* Experience Section */


/* Education with modern cards */


/* Portfolio with enhanced grid */


/* Contact Section (Old - check overlap with support page first) */
/* Kept generic classes that might be used, removed structure unused in new support page */
.contact-form {
    /* Glassmorphism applied */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    padding: 40px;
    border-radius: 20px;
    transition: var(--transition);
}

.modal-overlay,
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1100;
}

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

.notification-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 24px;
    width: min(420px, calc(100% - 48px));
    padding: 32px;
    box-shadow: 0 25px 50px rgba(2, 6, 23, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    color: var(--dark-text-color);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.notification-modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.notification-icon {
    font-size: 3rem;
    color: var(--success-color);
    margin-bottom: 8px;
}

.notification-modal h3 {
    font-size: 1.4rem;
    color: white;
    margin: 0;
}

.notification-modal p {
    color: var(--dark-light-text-color);
    margin: 0;
    line-height: 1.6;
}

.notification-modal .modal-close {
    margin-top: 8px;
    min-width: 140px;
}

@media (max-width: 576px) {
    .notification-modal {
        padding: 24px;
        gap: 12px;
    }

    .notification-icon {
        font-size: 2.5rem;
    }
}

html:not(.dark-theme) .contact-form {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.input-group {
    margin-bottom: 24px;
}

.input-group input,
.input-group textarea {
    width: 100%;
    background: var(--light-bg-color);
    border: 1px solid var(--border-color);
    padding: 14px 18px;
    border-radius: 12px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.input-group textarea {
    height: 150px;
    resize: vertical;
}

.input-group input:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Footer - Compact Modern Design */
footer {
    background: var(--bg-color);
    /* Restore background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 0;
    /* Reduced padding for compact look */
    margin-top: auto;
    /* Push to bottom */
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    text-align: left;
}

.footer-content p {
    color: var(--light-text-color);
    margin: 0;
    font-size: 0.9rem;
}

footer .social-links {
    justify-content: flex-end;
}



/* Responsive */
@media (max-width: 992px) {
    .hero-text {
        min-width: 100%;
    }

    .hero-content {
        text-align: center;
    }

    .about-text,
    .skills {
        flex: 100%;
    }

    .timeline::after {
        left: 28px;
        margin-left: 0;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
        margin-bottom: 40px;
    }

    .timeline-item:nth-child(even) {
        float: none;
        padding-left: 70px;
        padding-right: 25px;
        margin-top: 0;
    }

    .timeline-icon {
        left: 8px !important;
        right: auto !important;
    }

    .timeline-icon::after,
    .timeline-item:nth-child(even) .timeline-icon::after {
        left: calc(100% - 4px);
        right: auto;
        width: 22px;
    }

    .timeline-content {
        border-right: none;
        border-left: 4px solid var(--primary-color);
    }

    .timeline-item:nth-child(even) .timeline-content {
        border-left: 4px solid var(--primary-color);
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    .social-links {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    header {
        max-width: 100%;
        padding: 0 16px;
    }

    .header-inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .logo-detached,
    .nav-shell,
    .header-controls {
        flex: 0 0 auto;
        width: auto;
        border-radius: 999px;
        padding: 6px 14px;
    }

    .logo-detached {
        margin-right: 0;
        transform: none;
        justify-content: center;
    }

    .nav-shell {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        display: contents;
    }

    .header-controls {
        justify-content: center;
        gap: 6px;
        padding: 6px 12px;
    }

    .controls-separator {
        display: none;
    }

    .menu {
        position: fixed;
        top: 50vh;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        width: min(360px, calc(100% - 40px));
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 28px;
        flex-direction: column;
        padding: 32px 26px;
        gap: 12px;
        box-shadow: 0 25px 60px rgba(15, 23, 42, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: var(--transition);
        z-index: 1200;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .dark-theme .menu {
        background: rgba(15, 23, 42, 0.94);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .menu.active {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    .menu li {
        width: 100%;
        margin: 0;
    }

    .menu a {
        width: 100%;
        padding: 14px;
        justify-content: center;
        text-align: center;
        border-radius: 16px;
    }

    .menu-btn {
        display: flex;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .dark-theme .menu-btn {
        background: rgba(15, 23, 42, 0.6);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* Studio Showcase Specific Styles */

/* Mockups */
.mockup-container {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.iphone-mockup {
    width: 200px;
    height: 400px;
    background: #000;
    border-radius: 30px;
    border: 8px solid #333;
    position: absolute;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: var(--transition);
}

.mockup-left {
    transform: translateX(-35%) rotate(-8deg);
    z-index: 1;
}

.mockup-right {
    transform: translateX(35%) rotate(8deg) translateY(20px);
    z-index: 2;
}

.iphone-mockup:hover {
    transform: scale(1.05) rotate(0deg);
    z-index: 10;
}

.screen-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.guess4-bg {
    background: linear-gradient(45deg, #FF6B6B, #556270);
}

.quickmath-bg {
    background: linear-gradient(45deg, #4ECDC4, #556270);
}

/* Apps Section */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.app-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: var(--transition);
}

.app-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.app-icon {
    width: 100px;
    height: 100px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    margin-bottom: 24px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    /* Ensure image respects border radius */
}

.guess4-icon {
    background: linear-gradient(135deg, #FF6B6B, #556270);
}

.quickmath-icon {
    background: linear-gradient(135deg, #4ECDC4, #556270);
}

.app-details h3 {
    font-size: 1.75rem;
    margin-bottom: 12px;
    color: var(--text-color);
}

.app-desc {
    color: var(--light-text-color);
    margin-bottom: 28px;
    font-size: 1.05rem;
    line-height: 1.6;
    min-height: 54px;
}

.store-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

.store-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Footer Links */
.footer-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
}

.separator {
    color: var(--light-text-color);
    opacity: 0.5;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .mockup-container {
        height: 300px;
        transform: scale(0.9);
        margin-top: 40px;
    }

    .iphone-mockup {
        width: 160px;
        height: 320px;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

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

/* App Landing Page Styles */
.app-hero {
    padding-top: 160px;
    padding-bottom: 80px;
    text-align: center;
}

.app-icon-large {
    width: 140px;
    height: 140px;
    border-radius: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
    margin-bottom: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    /* Ensure image respects border radius */
}

.app-tagline {
    font-size: 1.25rem;
    color: var(--light-text-color);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.store-btn-large {
    font-size: 1.1rem;
    padding: 16px 40px;
    gap: 12px;
}

.app-features {
    padding: 80px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.feature-item {
    text-align: center;
    padding: 40px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.feature-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
}

.feature-item i {
    font-size: 2.5rem;
    margin-bottom: 24px;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-item h3 {
    margin-bottom: 16px;
    font-size: 1.25rem;
    color: var(--text-color);
}

.feature-item p {
    color: var(--light-text-color);
    line-height: 1.6;
}

/* App Card Link Styles */
.app-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: var(--transition);
}

.app-card-link:hover .app-card {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Ensure object/a tag inside doesn't trigger parent link styles unwantedly */
.store-btn {
    position: relative;
    z-index: 2;
}

/* Stretched Link Pattern */
.app-card {
    position: relative;
    /* Essential for stretched link */
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

.store-btn {
    position: relative;
    z-index: 2;
    /* Place above the stretched link */
}

/* Screen reader only utility if not present */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Logo Image Styling & Theme Toggling */
.logo-detached img,
.logo img {
    height: 57px;
    width: auto;
}

/* Default (Light Theme - assuming body has light background by variables, though hardcoded dark might override) 
   If body is hardcoded dark, we need to ensure the WHITE logo shows. 
   Let's assume the class names refer to the THEME they belong to.
   light-mode-logo -> Show in Light Theme
   dark-mode-logo -> Show in Dark Theme
*/

/* Hiding by default to avoid flash, then selective display */
.light-mode-logo,
.dark-mode-logo {
    display: none;
}

/* Logic: Check body class for theme */
body:not(.dark-theme) .light-mode-logo {
    display: block;
    /* Show dark logo on light bg? Or white logo? 
                       Wait, previously about/index.html had:
                       logo_white.png with class light-mode-logo
                       logo_dark.png with class dark-mode-logo
                       
                       If logo_white is for "Light Mode (Theme)", that means Light Theme has Dark Background? Rare.
                       More likely: Class name describes the IMAGE content.
                       light-mode-logo = White Logo
                       dark-mode-logo = Dark Logo
                       
                       Let's check the Site's visual state.
                       The site is Dark (#0a0a14).
                       Therefore we want White Logo (light-mode-logo).
    */
    display: block;
}

body.dark-theme .dark-mode-logo {
    /* If dark theme is active, and background is... lighter? Or darker?
       Usually Dark Theme = Dark BG = White Logo.
       
       Let's assume standard:
       Default (no class) = Light Theme = Light BG = Dark Logo (logo_dark).
       .dark-theme = Dark Theme = Dark BG = White Logo (logo_white).
       
       BUT about/index.html reversed the classes/images?
       src="logo_white.png" class="light-mode-logo"
       src="logo_dark.png" class="dark-mode-logo"
       
       If I use this blindly:
       Default: .light-mode-logo (logo_white) shows.
       Dark Theme: .dark-mode-logo (logo_dark) shows.
       
       If Default BG is Dark (as seen in line 56 #0a0a14), then showing logo_white is CORRECT.
       So "light-mode-logo" class name might truly mean "The Light Colored Logo".
    */
    display: block;
}

/* Inversion for the other logo */
body:not(.dark-theme) .dark-mode-logo {
    display: none;
}

body.dark-theme .light-mode-logo {
    display: none;
}

/* Footer Alignment Correction */
footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Legal Page Dark Mode Text Fix */
.legal-content,
.legal-content p,
.legal-content li {
    color: var(--text-color);
    /* Ensures dynamic text color based on theme */
}

/* Ensure Logo Visibility */
.logo-detached img {
    max-height: 64px !important;
    width: auto;
    display: block;
    /* Ensure image takes space */
}

/* Legal Pages Styling */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-color);
}

.legal-content h1 {
    margin-bottom: 2rem;
}

.legal-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.legal-content ul {
    padding-left: 20px;
    margin-bottom: 1rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

/* Support Page Styling */
.support-container {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
}

.support-icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.contact-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
    /* Glassmorphism */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

body:not(.dark-theme) .contact-card {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.support-subtitle {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    color: var(--light-text-color);
}

.support-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Language Switcher Styling */
.lang-switch {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lang-switch:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    text-decoration: none;
}

body:not(.dark-theme) .lang-switch:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Footer Text Link Style */
.footer-text-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-text-link:hover {
    text-decoration: none;
    color: inherit;
    opacity: 1;
}

.footer-links {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

/* Hero Mockup Image */
.hero-mockup-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
    animation: float 6s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.hero-mockup-img:hover {
    transform: scale(1.02);
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}



/* MacBook Mockup - Straight & Professional */
.macbook-mockup {
    width: 560px;
    /* Slightly wider */
    max-width: 90vw;
    height: 330px;
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%) perspective(2000px) rotateY(5deg);
    /* Subtle Y rotation only */
    z-index: 1;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.5));
    animation: floatMacbook 6s ease-in-out infinite;
}

.macbook-screen {
    width: 100%;
    height: 100%;
    /* Dark, professional gradient */
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 18px;
    border: 2px solid #64748b;
    /* Sharper border */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
    padding: 24px;
    position: relative;
    overflow: hidden;
}

/* Camera Notch */
.macbook-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 18px;
    background: #020617;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 10;
}

.macbook-base {
    width: 120%;
    height: 20px;
    background: #334155;
    position: absolute;
    bottom: -20px;
    left: -10%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: linear-gradient(to bottom, #475569, #1e293b);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    /* Add slight 3D depth illusion for the base */
    transform: perspective(2000px) rotateX(10deg);
    transform-origin: top;
}

.macbook-base::after {
    content: '';
    position: absolute;
    top: 0;
    left: 38%;
    width: 24%;
    height: 6px;
    background: #0f172a;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Adjust iPhone - Cleaner Position */
.iphone-mockup.with-macbook {
    position: absolute;
    right: -20px;
    bottom: -10px;
    z-index: 2;
    transform: scale(0.95);
    /* Nearly actual size */
    animation: floatPhone 7s ease-in-out infinite;
    border: 4px solid #475569;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.mockup-container {
    position: relative;
    width: 100%;
    height: 480px;
    /* More vertical space */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
    overflow: visible !important;
}

/* Screen Content */
.code-content {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13.5px;
    color: #f1f5f9;
    overflow: hidden;
    line-height: 1.7;
    height: 100%;
    padding-top: 15px;
    opacity: 0.9;
}

.code-line {
    width: 100%;
    height: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.code-line.short {
    width: 40%;
}

.code-line.medium {
    width: 70%;
}

.code-line.long {
    width: 90%;
}

/* Refined Float Animation - Vertical Only */
@keyframes floatMacbook {

    0%,
    100% {
        transform: translate(-50%, -50%) perspective(2000px) rotateY(5deg) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) perspective(2000px) rotateY(5deg) translateY(-15px);
    }
}

@keyframes floatPhone {

    0%,
    100% {
        transform: scale(0.95) translateY(0);
    }

    50% {
        transform: scale(0.95) translateY(-12px);
    }
}



/* Mobile Responsive */
@media (max-width: 768px) {
    .macbook-mockup {
        width: 320px;
        height: 200px;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: none;
        /* Simplify on mobile */
    }

    .iphone-mockup.with-macbook {
        right: 0;
        bottom: -10px;
    }

    .mockup-container {
        height: 350px;
    }
}

/* Override HERO IMAGE constraints clearly */
.hero-image.studio-hero-image {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Ensure Mockup Container has space */
.mockup-container {
    overflow: visible !important;
    z-index: 10;
}

/* --- APP PAGE SCREENSHOTS (ISOLATED) --- */
.app-showcase-section {
    padding: 80px 0;
    text-align: center;
}

.app-showcase-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.app-phone-frame {
    width: 240px;
    /* Reduced for 4-column layout */
    height: 480px;
    background: #000;
    border-radius: 32px;
    /* Adjusted radius */
    border: 10px solid #333;
    /* Adjusted bezel */
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.app-phone-frame:hover {
    transform: translateY(-10px);
}



.app-phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #121212;
    position: relative;
}

.app-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Ensure full visibility without cropping */
    display: block;
}

/* Notch Detail */
.app-phone-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 24px;
    background: #333;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 10;
}

.app-phone-frame.no-notch::before {
    display: none;
}

/* Mobile responsive for showcases */
@media (max-width: 768px) {
    .app-phone-frame {
        width: 260px;
        height: 520px;
    }
}

/* Code Snippet Styles */
.code-content {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #e6edf3;
}

.window-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.control-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-red {
    background: #ff5f56;
}

.dot-yellow {
    background: #ffbd2e;
}

.dot-green {
    background: #27c93f;
}

.code-keyword {
    color: #ff7b72;
}

.code-type {
    color: #d2a8ff;
}

.code-entity {
    color: #79c0ff;
}

/* MacBook Static for Screenshots */
.macbook-static {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 40px auto;
    animation: none;
    width: 650px;
    height: 380px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.macbook-static .macbook-screen {
    background: #000;
}

.macbook-static .macbook-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .macbook-static {
        width: 100%;
        height: auto;
        aspect-ratio: 16/10;
        margin: 20px auto;
    }
}