:root {
    /* Color Palette - Professional & High Contrast */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc; /* Slate 50 */
    --bg-alt: #f1f5f9;      /* Slate 100 */
    
    /* Text Colors - High Readability */
    --text-primary: #0f172a;   /* Slate 900 - Almost Black */
    --text-secondary: #475569; /* Slate 600 - Professional Grey */
    --text-muted: #94a3b8;     /* Slate 400 */
    
    /* Accents - Trust & Technology */
    --accent-primary: #f97316;    /* Orange 500 */
    --accent-hover: #ea580c;      /* Orange 600 - Darker Orange */
    --accent-secondary: #0f172a;  /* Dark Slate */
    --accent-success: #16a34a;    /* Green for Monetization/Money */
    
    --border-color: #e2e8f0;      /* Slate 200 */
    --card-hover-border: #cbd5e1; /* Slate 300 */
    
    /* Spacing system */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 3rem;
    --spacing-lg: 5rem;
    --spacing-xl: 8rem;

    /* Typography - Professional Stack */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.7;
    --line-height-heading: 1.1;
    
    /* UI Elements */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Shadows - Soft & Modern */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.01);
    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);
}

/* Dark Mode Support */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-alt: #020617;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --accent-primary: #fb923c; /* Orange 400 - Brighter for Dark Mode */
    --accent-hover: #f97316;   /* Orange 500 */
    --accent-secondary: #f8fafc;
    --accent-success: #4ade80;
    --border-color: #334155;
    --card-hover-border: #475569;
}

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

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
    transition: background-color 0.3s, color 0.3s;
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    line-height: var(--line-height-heading);
    font-weight: 700;
    letter-spacing: -0.03em; /* Tighter for modern look */
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.5rem;
}

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

ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: var(--spacing-lg) 0;
}

.bg-alt {
    background-color: var(--bg-secondary);
}

/* Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.25rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    letter-spacing: -0.01em;
}

.btn-primary {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

[data-theme="dark"] .btn-primary {
    background-color: var(--accent-primary);
    color: #0f172a;
}

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

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

.btn-secondary:hover {
    border-color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.btn-sm {
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    background-color: var(--bg-alt);
    color: var(--text-primary);
    border-radius: 8px;
}

.btn-sm:hover {
    background-color: var(--border-color);
}

.btn-lg {
    padding: 1.25rem 3rem;
    font-size: 1.125rem;
}

/* Header */
header {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

[data-theme="dark"] header {
    background-color: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* For mobile menu */
    height: 80px; /* Fixed height for better CLS */
}

.logo {
    display: flex;
    align-items: center;
    z-index: 1002; /* Ensure logo is above menu overlay */
}

.logo-img {
    height: 60px; /* Adjusted height */
    width: auto;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
    z-index: 1002;
    padding: 0.5rem;
}

.main-nav ul { 
    display: flex; 
    gap: 2.5rem; 
}

.main-nav a {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
}

.main-nav a:hover { color: var(--text-primary); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1002; /* Ensure actions are clickable */
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
        order: 3; /* Push to right */
    }

    .header-actions {
        order: 2;
        margin-left: auto; /* Push to right, next to toggle */
        margin-right: 1rem;
    }
    
    .btn-sm {
        padding: 0.5rem 1rem; /* Smaller button on mobile */
        font-size: 0.8rem;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--bg-primary);
        padding: 6rem 2rem 2rem;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .main-nav.active {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }

    .main-nav ul {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        width: 100%;
    }

    .main-nav a {
        font-size: 1.5rem;
        font-weight: 600;
        display: block;
        padding: 1rem;
    }
}

#theme-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.5rem;
    transition: transform 0.2s;
}

#theme-toggle:hover {
    color: var(--text-primary);
    transform: rotate(15deg);
}

/* HERO SECTION - NEW LAYOUT */
.hero-section {
    padding: 8rem 0 6rem;
    display: flex;
    align-items: center;
    overflow: hidden; /* For blobs */
    min-height: 90vh; /* Ensure full viewport height */
}

.hero-container-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Text wider than image */
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .hero-section {
        padding: 4rem 0 3rem;
        min-height: auto;
        text-align: center; /* Center text on mobile */
    }

    .hero-container-grid {
        grid-template-columns: 1fr; /* Stack */
        gap: 3rem;
    }

    .hero-content {
        order: 1; /* Text first */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-image-wrapper {
        order: 2; /* Image second */
        max-width: 350px;
        margin: 0 auto;
    }
    
    .headline {
        font-size: clamp(2rem, 8vw, 3rem); /* Adjust font size for mobile */
    }
    
    .description {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
    
    .cta-group {
        justify-content: center;
    }
}

/* Section Spacing on Mobile */
@media (max-width: 768px) {
    .section {
        padding: 4rem 0; /* Reduce padding */
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-intro {
        margin-bottom: 3rem;
        font-size: 1rem;
    }
    
    .container {
        padding: 0 1.5rem; /* Reduce side padding */
    }
}

/* CTA Section Mobile */
.cta-section {
    padding: 8rem 0;
    text-align: center;
}

@media (max-width: 768px) {
    .cta-section {
        padding: 4rem 0;
    }
    
    .cta-card {
        padding: 3rem 1.5rem;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-text {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr; /* Force 1 column on small mobile */
        max-width: 100%;
    }
}

.hero-content {
    max-width: 100%;
}

/* Experience Badge */
.experience-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.exp-number {
    font-weight: 800;
    color: var(--accent-primary);
    font-size: 1rem;
}

.headline {
    /* Responsive Font Size using clamp */
    font-size: clamp(2.5rem, 5vw, 4.5rem); 
    line-height: 1.05;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    letter-spacing: -0.04em;
}

.subheadline {
    font-size: clamp(1.125rem, 2vw, 1.35rem);
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 500;
    opacity: 0.9;
}

.description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 90%;
    font-weight: 400;
}

/* Highlight Text - Monetization */
.highlight-text {
    color: var(--accent-success); /* Green for money/success */
    font-weight: 700;
    display: block; /* Force new line? Or inline-block? Inline flows better, but block emphasizes. User said "at the end". Inline is safer for flow. */
    margin-top: 0.5rem; /* Add some space if it wraps */
}

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

/* Hero Image Styling */
.hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image {
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius-lg);
    /* Fancy shape or clean box? User asked for professional. Clean rounded box is best. */
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 2;
    aspect-ratio: 1/1; /* Square or Portrait */
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* Optional Blob Background */
.hero-image-blob {
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at center, var(--bg-alt) 0%, transparent 70%);
    z-index: 1;
    top: -10%;
    left: -10%;
    border-radius: 50%;
    opacity: 0.8;
}

/* Section Titles */
.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.04em;
}

.section-intro {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 5rem;
    color: var(--text-secondary);
    font-size: 1.25rem;
}

/* Services Tabs Layout */
.services-tabs-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 900px) {
    .services-tabs-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Tabs Sidebar */
.services-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 120px; /* Sticky sidebar if height allows */
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 500;
    width: 100%;
}

.tab-btn i {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
    color: var(--text-muted);
    transition: color 0.3s;
}

.tab-btn:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.tab-btn:hover i {
    color: var(--accent-primary);
}

.tab-btn.active {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-weight: 600;
}

.tab-btn.active i {
    color: var(--accent-primary);
}

[data-theme="dark"] .tab-btn.active {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Content Area */
.services-content-area {
    min-height: 500px; /* Prevent jumpiness */
}

.service-panel {
    display: none;
    background-color: var(--bg-primary);
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.4s ease forwards;
    border: 1px solid transparent;
}

[data-theme="dark"] .service-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.service-panel.active {
    display: block;
}

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

.panel-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.panel-header .icon-box {
    width: 64px;
    height: 64px;
    background-color: var(--bg-alt);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--accent-primary);
}

.panel-header h3 {
    margin: 0;
    font-size: 1.75rem;
}

/* Mobile First Responsive Overhaul */

/* 1. Global & Typography Adjustments */
:root {
    /* Mobile-first spacing (smaller by default) */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;
    
    --font-size-base: 15px; /* Slightly smaller for mobile readability */
}

@media (min-width: 768px) {
    :root {
        --spacing-sm: 1.5rem;
        --spacing-md: 3rem;
        --spacing-lg: 5rem;
        --spacing-xl: 8rem;
        --font-size-base: 16px;
    }
}

/* 2. Header & Navigation */
@media (max-width: 900px) {
    .header-container {
        height: 70px;
        padding: 0 1.5rem;
    }

    .logo-img {
        height: 45px; /* Smaller logo on mobile */
    }

    .mobile-menu-toggle {
        display: flex; /* Ensure flex for centering */
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px; /* Minimum touch target */
        font-size: 1.25rem;
        padding: 0;
    }

    .main-nav {
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
    }

    [data-theme="dark"] .main-nav {
        background-color: rgba(15, 23, 42, 0.98);
    }
}

/* 3. Hero Section */
@media (max-width: 900px) {
    .hero-section {
        padding: 6rem 0 4rem; /* Adjusted for fixed header */
        min-height: auto;
        text-align: center;
    }

    .hero-container-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-content {
        order: 1;
        align-items: center; /* Center flex items */
    }

    .headline {
        font-size: 2.5rem; /* Fallback */
        font-size: clamp(2.2rem, 8vw, 3rem);
        line-height: 1.1;
    }

    .description {
        font-size: 1rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .cta-group {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        gap: 1rem;
    }

    .btn {
        width: 100%; /* Full width buttons on mobile */
        justify-content: center;
    }

    .hero-image-wrapper {
        order: 2;
        max-width: 300px; /* Limit image size on mobile */
        margin: 0 auto;
    }
}

/* 4. Services (Scrollable Tabs) */
@media (max-width: 900px) {
    .services-tabs-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    
    .services-sidebar::-webkit-scrollbar { 
        display: none; 
    }

    .tab-btn {
        min-width: auto;
        white-space: nowrap;
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
        background-color: var(--bg-alt);
        border: 1px solid transparent;
        border-radius: 99px; /* Pill shape for mobile */
        scroll-snap-align: center;
    }

    .tab-btn.active {
        background-color: var(--accent-primary);
        color: white;
    }
    
    .tab-btn.active i {
        color: white;
    }

    .service-panel {
        padding: 2rem 1.5rem;
    }
    
    .panel-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .panel-header h3 {
        font-size: 1.5rem;
    }
}

/* 5. Portfolio & Mobile Frame Scaling */
@media (max-width: 900px) {
    .portfolio-list {
        gap: 5rem;
    }

    .portfolio-item, 
    .portfolio-item.reverse {
        display: flex;
        flex-direction: column-reverse; /* Text below image */
        gap: 2rem;
    }

    .portfolio-visual {
        width: 100%;
        transform: scale(0.9); /* Scale down slightly by default */
    }

    /* Handle very small screens */
    @media (max-width: 380px) {
        .mobile-frame {
            transform: scale(0.8) !important;
            margin-left: -10%; /* Offset scaling layout shift */
        }
    }
}

/* 6. Contact & Footer */
@media (max-width: 768px) {
    .cta-section {
        padding: 4rem 0;
    }

    .cta-card {
        padding: 2.5rem 1.5rem;
    }

    .cta-title {
        font-size: 1.75rem;
    }

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

    .contact-item {
        flex-direction: row; /* Horizontal layout for contacts on mobile is often better */
        justify-content: flex-start;
        text-align: left;
        padding: 1rem;
        gap: 1rem;
    }
    
    .contact-icon {
        margin-bottom: 0;
        font-size: 1.5rem;
    }
    
    .contact-info {
        align-items: flex-start;
    }

    .site-footer {
        text-align: center;
    }

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

    .footer-links, .footer-contact {
        align-items: center;
    }
    
    .footer-links ul, .contact-list {
        align-items: center;
    }
    
    .footer-links h4::after, 
    .footer-contact h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
}


/* New Service Styles */
.service-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.service-list-items { /* Renamed to avoid conflict with .services-list wrapper? No, class is .service-list in HTML ul */
    /* Wait, HTML uses class="service-list" for the UL. CSS selector .service-list was used for wrapper? 
       Checking HTML: <div class="services-list"> (plural) wrapper. <ul class="service-list"> (singular) items.
       My CSS had .services-list for wrapper. And .service-list for UL.
       Correct.
    */
}

/* Renaming CSS rule to be clear based on HTML structure */
ul.service-list {
    list-style: none;
    margin-bottom: 2rem;
    flex-grow: 1; /* Push focus to bottom */
}

ul.service-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

ul.service-list li::before {
    content: "•";
    color: var(--accent-primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.service-focus {
    margin-top: auto; /* Push to bottom */
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 1rem;
    color: var(--text-primary);
}

/* Projects */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 3rem;
}

.project-card {
    padding: 0; /* Clean wrapper */
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.project-header h3 { font-size: 1.75rem; margin: 0; }

.tag {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
    background-color: var(--text-primary);
    color: var(--bg-primary); /* High contrast tag */
    border-radius: 99px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[data-theme="dark"] .tag {
    background-color: var(--bg-alt);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.project-body p { margin-bottom: 0.5rem; font-size: 1.05rem; }
.project-body strong { color: var(--text-primary); font-weight: 600; }
.project-body .impact { 
    margin-top: 1.5rem; 
    color: var(--accent-primary); 
    font-weight: 600;
    font-size: 1.1rem;
}

/* Video Grid */
.video-card {
    aspect-ratio: 16 / 9;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.video-card:hover { box-shadow: var(--shadow-xl); transform: scale(1.02); }

.video-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1rem;
    color: var(--text-secondary);
}

.video-placeholder i { font-size: 3.5rem; color: var(--text-primary); }

/* Process */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
    padding-top: 2rem;
}

.step-number {
    font-size: 5rem;
    font-weight: 900;
    color: var(--border-color);
    line-height: 0.8;
    margin-bottom: 1rem;
    opacity: 0.5;
}


/* Portfolio Section */
.portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.portfolio-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.portfolio-text {
    text-align: left;
}

.portfolio-visual {
    display: flex;
    justify-content: center;
    position: relative;
}

/* Mobile Frame Mockup */
.mobile-frame {
    width: 280px; /* Typical phone width scale */
    height: 580px;
    background-color: #0f172a; /* Frame color */
    border-radius: 40px;
    border: 12px solid #0f172a;
    position: relative;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: rotate(-2deg); /* Slight tilt for style */
    transition: transform 0.3s ease;
    z-index: 5;
}

[data-theme="dark"] .mobile-frame {
    border-color: #1e293b;
    background-color: #1e293b;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}

.mobile-frame:hover {
    transform: rotate(0deg) scale(1.02);
    z-index: 10;
}

/* Slider Styles */
.screen-slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background-color: var(--bg-secondary);
}

.slides-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    pointer-events: none; /* Let clicks pass through except on buttons */
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-frame:hover .slider-controls {
    opacity: 1;
}

.slider-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s;
}

.slider-btn:hover {
    background-color: var(--accent-primary);
}

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 20;
}

.slider-dot {
    width: 6px;
    height: 6px;
    background-color: rgba(255,255,255,0.4);
    border-radius: 50%;
    transition: all 0.3s;
}

.slider-dot.active {
    background-color: var(--accent-primary);
    transform: scale(1.2);
}

/* ... existing notch styles ... */
.notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background-color: #0f172a;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}

[data-theme="dark"] .notch {
    background-color: #1e293b;
}

.portfolio-item.reverse .mobile-frame {
    transform: rotate(2deg);
}

.portfolio-item.reverse .mobile-frame:hover {
    transform: rotate(0deg) scale(1.02);
}

/* Text Styles */
.portfolio-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgba(249, 115, 22, 0.1);
    color: var(--accent-primary);
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portfolio-text h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}

.tech-stack span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background-color: var(--bg-alt);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
}

[data-theme="dark"] .tech-stack span {
    background-color: rgba(255,255,255,0.05);
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--accent-primary);
    padding-bottom: 2px;
    transition: all 0.2s;
}

.btn-link:hover {
    color: var(--accent-primary);
    gap: 0.75rem;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .portfolio-item {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .portfolio-item.reverse {
        display: flex;
        flex-direction: column-reverse; /* Text bottom, Visual top - wait, usually visual first? */
        /* Let's keep consistent: Visual on top, text on bottom */
        flex-direction: column-reverse; 
    }
    
    .portfolio-item {
        display: flex;
        flex-direction: column-reverse; /* Text is first in HTML, so reverse puts text bottom, visual top */
    }

    .portfolio-text {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .tech-stack {
        justify-content: center;
    }
    
    .portfolio-text h3 {
        font-size: 2rem;
    }
}

.cta-section {
    padding: 8rem 0;
    background-color: var(--bg-primary); /* Changed to primary bg so card stands out? Or secondary? Let's check user intent. "Like other sections" usually means the section has a background and the content is in container, OR the content itself is wide. 
    User said: "I want the box to be full width like other sections".
    Looking at other sections: .section uses .container which is max-width: 1200px.
    The CTA card currently has max-width: 900px.
    The user likely wants the CTA card to expand to the full width of the container (1200px) or the section itself to be the card.
    Let's assume "Full Width" means matching the .container width (1200px) instead of the restricted 900px card.
    */
    text-align: center;
}

.cta-card {
    background-color: var(--bg-secondary); /* Light grey bg for the card */
    border-radius: var(--radius-lg);
    padding: 5rem 2rem;
    color: var(--text-primary);
    /* box-shadow: var(--shadow-xl); Remove shadow for a cleaner flat look or keep it? */
    /* max-width: 900px;  REMOVE THIS to allow full width of container */
    width: 100%; /* Force full width */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* border: 1px solid var(--border-color); Remove border if it's a section-like feel? Keep it for definition. */
}

[data-theme="dark"] .cta-card {
    background-color: var(--bg-secondary); /* Darker grey in dark mode */
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text-primary); /* Dark text */
    margin-bottom: 1.5rem;
}

[data-theme="dark"] .cta-title {
    color: var(--text-primary);
}

.cta-text {
    font-size: 1.25rem;
    color: var(--text-secondary); /* Grey text */
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

[data-theme="dark"] .cta-text {
    color: var(--text-secondary);
}

/* Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Force 4 columns */
    gap: 1rem; /* Reduce gap slightly to fit */
    margin-bottom: 3rem;
    max-width: 1000px; /* Increase max-width to allow space for 4 items */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 on tablets */
    }
}

@media (max-width: 600px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background-color: var(--bg-alt); /* Light grey bg */
    border-radius: var(--radius-md);
    transition: var(--transition);
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .contact-item {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.contact-item:hover {
    background-color: var(--bg-primary); /* White on hover */
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .contact-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
}

.contact-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--accent-primary);
}

.cta-card .contact-icon {
    color: var(--accent-primary); /* Ensure accent color */
}

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

.contact-info .label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.contact-info .value {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* New Footer Styles - Professional Dark Theme */
.site-footer {
    padding: 4rem 0 2rem;
    background-color: var(--bg-alt); /* Default light theme bg */
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    position: relative;
}

[data-theme="dark"] .site-footer {
    background-color: #0b1120; /* Darker than main bg for footer */
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr; /* Balanced columns */
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand .logo {
    margin-bottom: 1.5rem;
    display: inline-block;
}

.footer-brand .logo-img {
    height: 100px;
    width: auto;
    border-radius: 2;
}

.footer-desc {
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.6;
    font-size: 0.95rem;
    opacity: 0.9;
}

.footer-links h4,
.footer-contact h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-links h4::after,
.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2rem;
    height: 2px;
    background-color: var(--accent-primary);
    border-radius: 2px;
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
}

.footer-links a:hover {
    color: var(--accent-primary);
    transform: translateX(5px);
}

/* Enhanced Contact List */
.contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.contact-list li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 0.4rem;
    border-radius: 8px;
    background-color: transparent;
}

.contact-list li a:hover {
    color: var(--text-primary);
    background-color: rgba(0,0,0,0.03);
    transform: translateX(5px);
}

[data-theme="dark"] .contact-list li a:hover {
    background-color: rgba(255,255,255,0.05);
}

.contact-list li i {
    color: var(--accent-primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(249, 115, 22, 0.1); /* Light orange bg for icon */
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
}

.contact-list li a:hover i {
    background-color: var(--accent-primary);
    color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.footer-legal {
    display: flex;
    gap: 2rem;
}

.footer-legal a {
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--accent-primary);
}

/* Mobile Footer */
@media (max-width: 768px) {
    .site-footer {
        padding: 4rem 0 2rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-links h4::after,
    .footer-contact h4::after {
        left: 0; /* Keep left aligned on mobile too */
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .footer-legal {
        justify-content: center;
    }
}

/* NEW HERO SECTION STYLES (Redesign) */
.new-hero-section {
    padding: 10rem 0 6rem;
    text-align: center;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    position: relative;
}

.new-hero-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

.new-hero-headline {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 2.5rem;
    letter-spacing: -0.04em;
}

.new-hero-headline .text-highlight {
    color: var(--accent-primary); /* Orange */
}

.new-hero-subheadline {
    font-size: 1.35rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-weight: 500;
}

.new-hero-form-wrapper {
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.new-hero-form {
    display: flex;
    width: 100%;
    max-width: 650px;
    gap: 0.75rem;
    align-items: stretch;
}

.new-hero-input {
    flex: 1;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.new-hero-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.new-hero-btn {
    background-color: var(--accent-primary);
    color: white;
    border: none;
    padding: 0 2.5rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.3s, transform 0.2s;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.new-hero-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.new-hero-footer-note {
    font-size: 1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0.9;
}

.new-hero-footer-note i {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

/* Responsive Adjustments for New Hero */
@media (max-width: 768px) {
    .new-hero-section {
        padding: 8rem 0 4rem;
        min-height: auto;
    }

    .new-hero-form {
        flex-direction: column;
        gap: 1rem;
    }
    
    .new-hero-input {
        width: 100%;
        text-align: center;
    }

    .new-hero-btn {
        width: 100%;
        padding: 1.25rem;
    }
    
    .new-hero-headline {
        font-size: 2.5rem;
    }
}