/* 
    -----------------------------------------------
    LPM Studio - Modern Template Base (Neon Dark)
    ----------------------------------------------- 
    */
    :root { --site-dark: #121212; }

    [data-theme="clean"] {
        --primary: #373737;
    --accent: #d2ff00;
    --light: #e9e9e9;
    --gray: #808080;
    --bg-body: #494949;
    --bg-header: rgb(255 255 255 / 36%);
    --bg-header-transparent: rgba(255, 255, 255, 0);
    --glass: rgba(0, 0, 0, 0.05);
    --border-color: rgba(0, 0, 0, 0.1);
}

    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
        font-family: 'Space Grotesk', sans-serif;
        background-color: var(--bg-body);
        color: var(--light);
        line-height: 1.6;
        overflow-x: hidden;
    }

    h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }
    a { text-decoration: none; color: inherit; transition: 0.3s; }

    /* --- DYNAMIC HEADER --- */
    .site-header {
        position: fixed;
        top: 0; 
        left: 0; right: 0; 
        margin: 0 auto; /* CSS Centering without Transform */
        width: 100%;
        padding: 30px 50px;
        padding: 30px 50px;
        z-index: 1000;
        /* Optimized transition to prevent border flash */
        transition: width 0.4s, padding 0.4s, background 0.4s, border-radius 0.4s, top 0.4s, border-color 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
        display: flex;
        flex-direction: column; /* Ensure stack */
        align-items: center;    /* Center align main block */
        background: var(--bg-header);    /* Background stays on Parent ONLY */
        
        /* Pre-define border to prevent geometry jump */
        border: 1px solid transparent; 
        border-bottom: 1px solid var(--border-color); 
        backdrop-filter: blur(12px);
    }

.post-title {
font-size:3rem;
    line-height: 60px;
}

    /* Force Blogger Widget Width */
    .site-header .section, 
    .site-header .widget, 
    .site-header .widget-content {
        width: 100%;
        display: block;
    }

    .header-inner {
        width: 100%;
        max-width: 1200px; /* Limit as requested */
        margin: 0 auto;    /* Center it */
        display: flex;
        justify-content: normal; /* Allow margin-auto to control spacing */
        align-items: center;

        /* No background on inner anymore */
        background: transparent;
        padding: 0;
        border-radius: 0;
        border: none;
        transition: none;
    }

    /* Scrolled State ("Suspenso") */
    /* Scrolled State: Morph Parent into Pill */
    .site-header.scrolled {
        top: 20px;
        /* positioning handled by base class (left:0, right:0, margin:auto) */
        width: 95%; /* Responsive width */
        max-width: 1200px; /* Pill Width */
        max-width: 1200px; /* Pill Width */
        padding: 15px 40px;
        border-radius: 50px;
        background: var(--bg-header); /* Keep same bg, no overlap */
        
        /* Smoothly activate full border */
        border-color: var(--border-color);
        /* border-bottom is already set, so this effectively colors top/left/right */
        
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        backdrop-filter: blur(12px);
    }

    .site-header.scrolled .header-inner {
        /* Reset Inner to plain wrapper */
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
        max-width: 100%; /* Fill the parent pill */
    }


    .logo-img {
        height: 40px;
        width: auto;
        transition: 0.3s;
    }
    
    .logo-link {
        margin-right: auto; /* Push Nav and Button to right */
    }

    /* THEME TOGGLE BUTTON */
    .logo { color: #ffffff !important; }
    .theme-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--light);
        width: 40px; height: 40px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: 0.3s;
        margin-left: 20px;
    }
    .theme-btn:hover {
        background: var(--primary);
        color: #000;
        transform: rotate(30deg);
    }
    
    /* Clean Theme Specific Overrides */
    [data-theme='clean'] .theme-btn {
        background: rgba(0,0,0,0.05);
        border-color: rgba(0,0,0,0.1);
        color: var(--site-dark);
    }
    [data-theme='clean'] .theme-btn:hover {
        background: var(--site-dark);
        color: #fff;
    }


    /* Desktop Navigation */
    .desktop-nav {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .nav-link {
        color: var(--light);
        font-weight: 500;
        font-size: 0.95rem;
        position: relative;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -5px; left: 0;
        width: 0%; height: 2px;
        background: var(--primary);
        transition: 0.3s;
    }

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

    .btn-nav {
        background: var(--primary);
        color: #000;
        padding: 10px 25px;
        border-radius: 30px;
        font-weight: bold;
    }
    
    .btn-nav:hover {
        background: #fff;
        transform: translateY(-2px);
    }
    
    .btn-nav::after { display: none; } /* No underline for button */

    
    .mobile-contact { display: none; } /* Hide mobile button on desktop */

    @media (max-width: 900px) {
        .site-header { padding: 20px; }
        .header-inner { 
            width: 100%; 
            display: flex;
            justify-content: space-between !important; /* Restore for Mobile */
            align-items: center;
        }
        
        .desktop-nav { display: none; } /* Hide desktop nav */
        
        /* Mobile Order: Logo (L) - Contact (R) - Hamburger (R) */
        .logo-link { order: 1; margin-right: auto; margin-left: 0; } /* Far Left */
        .mobile-contact { display: none; order: 3; margin-right: 15px; font-size: 0.85rem; padding: 8px 15px; } /* Center/Right */
        #theme-toggle { order: 2; margin: 0 15px 0 0; } /* Between Logo and Contact */
        .mobile-toggle { display: block; order: 3; } /* Far Right */
        
        .logo-img { height: 35px; } /* Slightly smaller logo */

        /* Mobile Scrolled State */
        .site-header.scrolled { padding: 10px; }
        .site-header.scrolled .header-inner {
            max-width: 96%;
        }

        /* Modal Responsive Fixes */
        .modal-content {
            width: 95% !important;
            padding: 0 !important;
            margin: 10px;
        }
        .modal-body-wrapper { padding: 25px !important; }
        .modal-body h3 { font-size: 1.5rem; }
    }
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(5, 5, 5, 0.98);
        backdrop-filter: blur(20px);
        z-index: 1001;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }

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

    .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .mobile-nav a {
        font-size: 2rem;
        color: #fff;
        font-weight: bold;
    }

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

    @media (max-width: 900px) {
        .site-header { padding: 20px; }
        .header-inner { 
            width: 100%; 
            display: flex;
            justify-content: space-between; /* Force separation */
            align-items: center;
        }
        .desktop-nav { display: none; } /* Hide desktop nav */
        .mobile-toggle { display: block; } /* Show hamburger */
        
        /* Mobile Scrolled State */
        .site-header.scrolled { padding: 10px; }
        .site-header.scrolled .header-inner {
        }
    }

    /* --- HERO SECTION --- */
    .hero-section { position: relative; min-height: 100vh; padding-top: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: var(--bg-body);
    }

    /* --- CORE LAYOUT & TYPOGRAPHY --- */
    .container {
        width: 100%;
        max-width: 1200px;
        padding: 0 20px;
        position: relative;
        z-index: 10;
        margin: 0 auto; /* Center the container */
    }
    
    /* Hero specific grid */
    .hero-section .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
        height: 100%; /* Full height of hero */
    }

    /* Animated Background Blobs */
    .hero-bg-blobs {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }


    /* --- ADVANCED BACKGROUND EFFECTS --- */
    
    /* 1. Code Typing Background */
    .code-bg-wrapper {
        position: absolute;
        top: 10%; right: 5%; /* Moved to Right */
        width: 45%; height: 80%; /* Constrained to right side */
        overflow: hidden;
        z-index: 1; /* Behind symbols (2) */
        pointer-events: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end; /* Right align text */
    }
    
    .code-line {
        font-family: 'Courier New', monospace;
        color: rgba(222, 255, 5, 0.15); /* Reduced opacity from 0.25 to 0.15 */
        font-size: 1.3rem; 
        white-space: nowrap;
        position: relative; 
        opacity: 0;
        font-weight: bold;
        margin-bottom: 15px;
        right: 0;
    }

    /* Typing Animation Simulation */
    .code-line:nth-child(1) { animation: typeFade 8s infinite 0s; }
    .code-line:nth-child(2) { animation: typeFade 8s infinite 2s; }
    .code-line:nth-child(3) { animation: typeFade 8s infinite 4s; }
    .code-line:nth-child(4) { animation: typeFade 8s infinite 1s; }
    .code-line:nth-child(5) { animation: typeFade 8s infinite 3s; }

    @keyframes typeFade {
        0% { opacity: 0; transform: translateX(-20px); }
        10% { opacity: 1; transform: translateX(0); } 
        80% { opacity: 1; }
        100% { opacity: 0; transform: translateY(10px); }
    }

    /* 2. Floating Tech Symbols (Depth) */
    .floating-symbols {
        position: absolute;
        width: 100%; height: 100%;
        top: 0; left: 0;
        z-index: 2; /* In front of blobs, behind content */
        pointer-events: none;
    }
    
    .tech-symbol {
        position: absolute;
        color: var(--primary);
        font-family: 'Space Grotesk', bold;
        opacity: 0.4;
        text-shadow: 0 0 10px var(--primary);
    }
    
    .sym-1 { top: 20%; right: 15%; font-size: 40px; filter: blur(2px); animation: floatSym 15s infinite ease-in-out; }
    .sym-2 { bottom: 30%; left: 10%; font-size: 60px; filter: blur(5px); animation: floatSym 20s infinite ease-in-out reverse; opacity: 0.2; }
    .sym-3 { top: 10%; left: 40%; font-size: 20px; filter: blur(0px); animation: floatSym 10s infinite ease-in-out 1s; }
    
    @keyframes floatSym {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        50% { transform: translate(20px, -30px) rotate(10deg); }
    }

    /* Organic SVG Shape Center (Behind Person) */
    .svg-organic-bg {
        position: absolute;
        top: 50%;
        left: 50%; /* Center behind person */
        transform: translate(-50%, -50%);
        width: 650px;
        z-index:5;
        
       
    }
    
    .svg-organic-bg path {
        fill: #0000007d;
        stroke: none;
        z-index:5;
        filter: blur(50px);
    }
    
    /* Removed SVG animations for solid static look, will animate via JS Parallax */

    /* Hero Text Content */
    .hero-text {
        position: relative;
        z-index: 10;
        text-align: left;
		padding-top: 90px;
    }

    /* LEGACY SUBTITLE REMOVED - replaced by global .section-subtitle */

    .hero-text h1 {
        font-size: 4.1rem;
        line-height: 1.1;
        font-weight: 700;
        margin-bottom: 25px;
        color: #ffffff;
    }
    
    .hero-text h1 span {
        color: var(--primary);
    }
    
    /* GLOBAL TYPOGRAPHY UTILITIES */
    .section-title-wrapper {
        text-align: center;
        margin-bottom: 60px;
        position: relative;
        z-index: 20;
    }
    
    .section-subtitle {
        display: inline-block;
        color: var(--primary);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 15px;
        background: rgba(222, 255, 5, 0.1);
        padding: 5px 15px;
        border-radius: 50px;
        border: 1px solid rgba(222, 255, 5, 0.2);
    }
    
    .section-title {
        font-size: 3rem;
        line-height: 1.1;
        color: #fff;
        margin: 0;
        font-weight: 700;
    }
    
    .section-title .highlight {
        color: var(--primary);
    }
    
    @media (max-width: 900px) {
        .section-title { font-size: 2rem; }
        .section-subtitle { font-size: 0.8rem; letter-spacing: 1px; }
        .section-title-wrapper { margin-bottom: 40px; }
    }
    
    /* VERTICAL WORD CYCLE ANIMATION */
    .word-cycle-wrapper {
        position: relative;
        display: inline-block;
        vertical-align: bottom;
        height: 1.1em; /* Adjust to match line-height */
        overflow: hidden;
        color: var(--primary);
        min-width: 7ch; /* Prevent layout shift */
        text-align: left;
    }

    .cycle-item {
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        transform: translateY(-100%);
        animation: verticalCycle 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    }
    
    /* Stagger Delays */
    .cycle-item:nth-child(1) { animation-delay: 0s; }
    .cycle-item:nth-child(2) { animation-delay: 2s; }
    .cycle-item:nth-child(3) { animation-delay: 4s; }

    @keyframes verticalCycle {
        0% { transform: translateY(-100%); opacity: 0; }
        5% { transform: translateY(0); opacity: 1; }
        28% { transform: translateY(0); opacity: 1; } /* Stay */
        33% { transform: translateY(100%); opacity: 0; } /* Exit Down */
        100% { transform: translateY(100%); opacity: 0; }
    }
    
    /* --- PORTFOLIO CAROUSEL --- */
    .portfolio-carousel {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 600px; /* Increased from 600px for better 16:9 display */
        z-index: 3; /* Behind Person (10), In front of SVG (2) */
        display: flex;
        gap: 30px; /* Increased gap */
        overflow: hidden;
        mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
        pointer-events: none; /* Let clicks pass through to blob/bg if needed */
    }

    .carousel-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 100px;
    }

    .col-up { animation: scrollUp 100s linear infinite; }
    .col-down { animation: scrollDown 100s linear infinite; }

    .carousel-item {
        width: 100%;
        border-radius: 8px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    
    .carousel-item img {
        width: 100%;
        display: block;
        height: auto;
        filter: grayscale(10%); /* Tech look */
        transition: 0.3s;
    }

    @keyframes scrollUp {
        0% { transform: translateY(0); }
        100% { transform: translateY(-33.333%); } /* 1/3 of total height (3 sets) */
    }

    @keyframes scrollDown {
        0% { transform: translateY(-33.333%); } /* Start offset to match center */
        100% { transform: translateY(0); }
    }

    /* Mobile Carousel Adjustment */
    @media (max-width: 1140px) {
        .portfolio-carousel {
            width: 100vw;
            height: 300px; /* Shorter on mobile */
            flex-direction: column; /* Stack rows */
            mask-image: none;
            -webkit-mask-image: none;
        }
        
        .carousel-col {
            flex-direction: row; /* Horizontal scroll */
            width: fit-content; /* Allow overflow for scroll */
            gap: 10px;
        }
        
        .carousel-item {
            width: 200px; /* Fixed width items */
            flex-shrink: 0;
        }

        .col-up { animation: scrollLeft 100s linear infinite; }
        .col-down { animation: scrollRight 100s linear infinite; }
    }

    @keyframes scrollLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(-33.333%); }
    }

    @keyframes scrollRight {
        0% { transform: translateX(-50%); } /* Start halfway */
        100% { transform: translateX(-16.666%); } /* This logic mimics scrollDown reverse but easier to just use scrollLeft logic reversed or similar */
    }
    /* Fixing scrollRight logic for mobile 3 sets: 
       Start at -33.33% and go to 0.
    */
    @media (max-width: 1140px) {
        .col-down { animation: scrollRightMobile 100s linear infinite; }
    }
    
    @keyframes scrollRightMobile {
        0% { transform: translateX(-33.333%); }
        100% { transform: translateX(0); }
    }
    
    /* Removed textShow as typing handles visibility via width */

    .hero-text p {
        font-size: 1.25rem;
        color: #aaaaaa;
        margin-bottom: 40px;
        max-width: 500px;
        font-weight: 400;
    }

    .btn-hero {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--primary);
        color: #000;
        padding: 18px 40px;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 5px;
        transition: 0.3s;
    }
    
    .btn-hero:hover {
        transform: translateY(-5px);
    }

    .btn-hero i {
        font-size: 1.7rem; /* Larger icon */
    }

    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 20px;
        transition: 0.3s;
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin-left: 15px;
    }

    .btn-icon:hover {
        background: var(--primary);
        color: #000;
        transform: translateY(-5px) rotate(10deg);
        box-shadow: 0 0 20px rgba(222, 255, 5, 0.3);
        border-color: var(--primary);
    }

    /* Hero Image (Thinking Man) */
    .hero-image-wrapper {
        position: relative;
        z-index: 5;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-person-img {
        max-width: 100%;
        height: auto;
        transform: translateY(20px);
        filter: drop-shadow(0 0 30px rgba(0,0,0,0.5));
        will-change: transform;
        z-index: 9;
    }
    
    /* Parallax Group */
    .parallax-group {
        position: relative;
        width: 100%;
        max-width: 700px; /* Adjust as needed */
        display: grid;
        grid-template-areas: "stack";
        align-items: center;
        justify-items: center;
    }

    .hero-layer {
        grid-area: stack;
        width: 100%;
        height: auto;
        display: block;
        will-change: transform;
        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
    }

    .layer-notebook { z-index: 5; } /* Back */
    .layer-tablet { z-index: 6; }   /* Middle */
    .layer-mobile { z-index: 7; }   /* Front */

    @keyframes floatBlob {
        0% { transform: translate(0, 0) scale(1); }
        100% { transform: translate(30px, -30px) scale(1.1); }
    }
    
    /* Responsive */
    /* Responsive Mobile (<900px) */
    @media (max-width: 900px) {
        .hero-section .container { 
            grid-template-columns: 1fr; 
            text-align: center; 
            padding-top: 120px; /* Space for fixed header */
            gap: 60px;
        }
        .hero-text { margin: 0 auto; padding-top:10px;}
        .hero-text h1 { font-size: 3rem; }
        .hero-text p { margin-right: auto; margin-left: auto; }
        .svg-organic-bg { left: 50%; transform: translateX(-50%); width: 100%; max-width: 500px; }
        .hero-person-img { max-width: 80%; margin-top: -20px; }
        
        /* Ensure other grids stack too */
        .reverse-layout { grid-template-columns: 1fr !important; direction: ltr !important; }
        .diff-grid, .matrix-grid { grid-template-columns: 1fr !important; }
        .card-1 { top: 30% !important; right: 5% !important; font-size: 1.2rem !important;}
        .card-2 { top: 15% !important; left: 12% !important; font-size: 1.2rem !important;}
        .card-3 { bottom: -10% !important; right: 15% !important; font-size: 1.2rem !important;}
        .card-4 { bottom: 15% !important; left: 10% !important; font-size: 1.2rem !important;}
        .card-5 { top: -15% !important; left: 30% !important; font-size: 1.2rem !important;}
    }

    /* Large Screens (>2000px) */
    @media (min-width: 2000px) {
        /* Scale Hero Wrapper */
        .hero-section .container { 
            max-width: 1600px; 
            gap: 80px;
        }
        /* Scale Heading Typography */
        .hero-text h1 { 
            font-size: 5.5rem; 
            margin-bottom: 30px;
        }
        .hero-text p { 
            font-size: 1.4rem; 
            max-width: 700px; 
        }
        .btn-hero {
            padding: 20px 40px;
            font-size: 1.2rem;
        }
        /* Scale Visual Elements */
        .parallax-group { max-width: 900px; }
        .svg-organic-bg { width: 900px; }
        
        /* Keep Content Sections Readable (Not too wide) */
        .reverse-layout,
        .differentiators-section .container,
        .sales-matrix-section .container {
            max-width: 1400px !important;
        }
        
        .section-title { font-size: 4rem; }
        
        /* Larger Blobs */
        .blob-1, .blob-2 {
            width: 800px;
            height: 800px;
        }
        .portfolio-carousel { width: 800px;}
    }


    /* --- FOOTER STYLES (PRESERVED) --- */
    /* LPM Studio Credits */
    .lpm-eclipse-icon { 
        position: relative; 
        width: 15px; 
        height: 15px; 
        background-color: #d2ff00; 
        border-radius: 50%; 
        box-shadow: 0 0 15px rgba(222, 255, 5, 0.3); 
        margin-right: 3px; 
        display: inline-block; 
        vertical-align: middle; 
        margin-bottom: 3px; 
    }
    .lpm-eclipse-icon::after { 
        content: ''; 
        position: absolute; 
        width: 15px; 
        height: 15px; 
        background-color: #000; 
        border-radius: 50%; 
        top: 50%; 
        left: 50%; 
        transform: translate(-70%, -50%); 
    }

    .developer-credit {
        color: #888;
        font-size: 13px;
        margin-top: 15px;
        font-family: 'Space Grotesk', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        opacity: 1;
        transition: 0.3s;
    }

    .developer-credit a {
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        letter-spacing: 0.5px;
        transition: 0.3s;
        position: relative;
    }

    .developer-credit a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0%;
        height: 1px;
        background: #d2ff00;
        transition: 0.3s;
    }

    .developer-credit:hover a {
        color: #d2ff00;
        text-shadow: 0 0 15px rgba(210, 255, 0, 0.4);
    }
    .developer-credit:hover a::after { width: 100%; }

    /* --- ADVANTAGES SECTION --- */
    .advantages-section {
        position: relative;
        padding: 100px 0;
        display: flex;           /* Restore flex */
        justify-content: center; /* Center horizontally */
        align-items: center;     /* Center vertically (useful if height logic changes, safe here) */
        background: var(--site-dark);
        overflow: hidden;
    }

    .reverse-layout {
        display: grid; /* Restore grid explicitly */
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 50px;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        direction: rtl; /* Flip grid order visually */
    }
    
    .reverse-layout > * { direction: ltr; /* Reset content direction */ }

    .advantages-text h2 {
        font-size: 3rem;
        line-height: 1.2;
        margin-bottom: 20px;
        color: #fff;
    }

    .advantages-text p {
        font-size: 1.2rem;
        color: #ccc;
        margin-bottom: 30px;
        line-height: 1.6;
        max-width: 90%;
    }

    .advantages-text .highlight {
        color: var(--primary);
        font-style: italic;
    }

    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 11px;
        margin-top: 30px;
    }

    .tag {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #ddd;
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: 0.3s;
    }

    .tag i { color: var(--primary); }
    .tag:hover { background: rgba(222, 255, 5, 0.1); border-color: var(--primary); transform: translateY(-3px); }

    /* Visuals */
    .advantages-visuals {
        position: relative;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .adv-card {
        position: absolute;
        background: rgba(20, 20, 20, 0.9);
        border: 1px solid rgba(255,255,255,0.1);
        padding: 30px 40px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        color: #fff;
        font-weight: 700;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 15px;
        backdrop-filter: blur(10px);
        /* transition: transform 0.1s linear; REMOVED for JS LERP */
    }

    .adv-card i { font-size: 1.5rem; color: var(--primary); }

    .card-1 { top: 50%; right: 0%; z-index: 3; border-color: var(--primary); }
    .card-2 { top: 40%; left: 20%; z-index: 2; }
    .card-3 { bottom: 10%; right: 5%; z-index: 3; }
    .card-4 { bottom: 15%; left: 10%; z-index: 2; opacity: 0.9; }
    .card-5 { top: 15%; left: 30%; z-index: 1; opacity: 0.8; }

    /* Section Separator */
    .section-separator {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary), transparent);
        opacity: 0.5;
    }
    
    .section-separator::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100%;
        background: #fff;
        filter: blur(2px);
        animation: sepRun 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes sepRun {
        0% { left: -100px; opacity: 0; }
        50% { opacity: 1; }
        100% { left: 100%; opacity: 0; }
    }

    /* Fixed: Prevent horizontal width jitter */
    .hero-section, .advantages-section, .differentiators-section {
        overflow: hidden; /* Clips flying parallax elements */
        width: 100%;
    }

    @media (max-width: 900px) {
        .reverse-layout { direction: ltr; grid-template-columns: 1fr; }
        .advantages-visuals { height: 300px; margin-bottom: 50px; }
        .advantages-text { text-align: left; }
        /* Keep original layout flow */
    }

    /* --- PERFORMANCE OPTIMIZATIONS --- */
    /* --- PERFORMANCE OPTIMIZATIONS --- */
    .blob, .hero-layer, .adv-card, .carousel-col {
        will-change: transform; 
        backface-visibility: hidden;
        transition: none !important; /* JS Physics Control */
    }
    
    @media (min-width: 2000px) {
        .advantages-text h2 { font-size: 3rem; }
        .tag { font-size: 1.2rem; padding: 15px 30px; }
        .adv-card { font-size: 1.8rem; padding: 30px 50px; }
        .card-1 { top: 30%; right: 5%; }
        .card-2 { top: 20%; left: 20%;  }
        .card-3 { bottom: 0%; right: 15%; }
        .card-4 { bottom: 15%; left: 10%; }
        .card-5 { top: 0%; left: 30%;}
    }

    /* --- INTERNAL HERO (Restored) --- */
    .internal-hero {
        padding: 180px 0 80px 0; /* Clear header + spacing */
        background-color: #050505;
        background-image: url('https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?q=80&w=2670&auto=format&fit=crop'); /* Dark Abstract Tech */
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Parallax feel */
        position: relative;
        text-align: center;
        min-height: 40vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    .internal-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.7); /* Overlay to ensure text readability */
    }
    
    /* Content wrapper to float above overlay */
    .internal-hero .container {
        position: relative;
        z-index: 2;
    }
    
    .internal-hero .section-title { 
        margin-bottom: 0; 
        font-size: 3.5rem; 
        text-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
    
    .internal-hero .section-subtitle { 
        display: inline-block; /* Fix 100% width issue */
        margin-bottom: 20px; 
        color: var(--primary); 
        letter-spacing: 2px; 
        text-transform: uppercase; 
        font-weight: 800;
        font-size: 0.85rem;
        
        /* Tag Styling */
        border: 1px solid var(--primary);
        background: rgba(222, 255, 5, 0.05);
        padding: 8px 16px;
        border-radius: 50px;
        backdrop-filter: blur(5px);
    }
    
    @media (max-width: 768px) {
        .internal-hero { padding-top: 150px; min-height: 30vh; }
        .internal-hero .section-title { font-size: 2.5rem; }
    }

    /* --- DIFFERENTIATORS SECTION --- */
    .differentiators-section {
        padding: 100px 0;
        background: var(--bg-body);
        position: relative;
    }

    /* LEGACY TITLE REMOVED - replaced by global .section-title */
    
    .section-title .highlight { color: var(--primary); }

    .diff-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        position: relative;
        z-index: 10;
    }

    .diff-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 15px;
        padding: 40px 30px;
        text-align: center;
        transition: 0.4s;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .diff-card:hover {
        transform: translateY(-10px);
        border-color:rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.05);
    }

    .diff-card i {
        font-size: 3rem;
        color: var(--primary);
        margin-bottom: 25px;
        transition: 0.4s;
    }

    .diff-card:hover i { transform: scale(1.2); }

    .diff-card h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        color: #fff;
    }

    .diff-card p {
        color: #aaa;
        font-size: 1rem;
    }

    /* MODAL STYLES */
    .modal-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    /* Duplicate Modal CSS Removed */
    
    /* CLICK HINT (Persistent & Elegant) */
    .click-hint {
        margin-top: 25px;
        font-size: 0.85rem;
        color: var(--primary);
        transform: translateY(0);
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px; /* Reduced gap */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .diff-card:hover .click-hint {
        opacity: 1;
        text-shadow: 0 0 10px rgba(222, 255, 5, 0.4);
    }

    .click-hint i, .click-hint .fa-arrow-right {
        font-size: 10px !important; /* Force tiny pixel size */
        transform: scale(0.6); /* Force visual shrink */
        animation: bounceRight 1.5s infinite;
        margin: 0 !important;
        color: #fff;
        line-height: 1;
        display: inline-block; /* Required for transform */
    }

    @keyframes bounceRight {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(5px); }
    }

    /* --- DIFFERENTIATORS SECTION --- */
    .differentiators-section {
        width: 100%;
        padding: 100px 0;
        background: var(--bg-body);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .differentiators-section .container {
        display: block;
        text-align: center;
        max-width: 1200px;
        width: 100%; /* Ensure container fills up to max */
        padding: 0 20px; /* Prevent edge touching on mobile */
    }

    /* Layout Spacing */

    .section-title {
        text-align: center;
        font-size: 3rem;
        margin-bottom: 20px;
        color: #fff;
    }
    
    .section-title .highlight { color: var(--primary); }

    .diff-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        position: relative;
        z-index: 10;
        width: 100%; /* Grid full width */
    }

    /* --- DIFF CARD STYLES --- */
    .diff-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 15px;
        padding: 40px 30px;
        text-align: center;
        transition: 0.4s;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    /* Note: Hover effect handled by JS Parallax or needs override? 
       Actually, if transition is none, hover transform won't animate smoothly via CSS.
       But JS Lerp handles the section parallax. 
       Let's re-enable CSS transition for hover as it might be separate. 
       Use !important to override the global unset if needed, or refine selectors.
       For now, let's assume JS loop doesn't target SINGLE cards unless entire section moves.
       Ah, strict parallax moved individual cards. So hover transform conflicts.
       Let's keep text shadow effects for hover. */
    
    .diff-card:hover {
        /* transform: translateY(-10px); Disabled for Physics */
        border-color: rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.05);
    }

    .diff-card i {
        font-size: 3rem;
        color: var(--primary);
        margin-bottom: 25px;
    }
    
    .diff-card:hover i { transform: scale(1.2); }

    .diff-card h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        color: #fff;
    }

    .diff-card p {
        color: #aaa;
        font-size: 1rem;
    }

    /* --- PREMIUM MODAL STYLES --- */
    .modal-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.85); /* Darker backdrop */
        backdrop-filter: blur(15px);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .modal-content {
            background: rgba(10, 10, 10, 0.95);
    border: 1px solid #bdbdbd38;
    width: 90%;
    max-width: 900px;
    border-radius: 20px;
    padding: 0;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .modal-overlay.active .modal-content { transform: scale(1) translateY(0); }

    .modal-header-img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%); /* Fade out bottom */
        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    }

    .modal-body-wrapper {
        padding: 40px;
        flex: 1;
    }

    .close-modal {
        position: absolute;
        top: 20px; right: 20px;
        background: rgba(0,0,0,0.6);
        border: 1px solid rgba(255,255,255,0.2);
        width: 45px; height: 45px;
        border-radius: 50%;
        color: #fff;
        font-size: 1.2rem;
        cursor: pointer;
        transition: 0.3s;
        z-index: 10;
        display: flex; align-items: center; justify-content: center;
        backdrop-filter: blur(5px);
    }

    .close-modal:hover { 
        background: var(--primary); 
        color: #000; 
        transform: rotate(90deg) scale(1.1);
        box-shadow: 0 0 20px var(--primary);
    }

    .modal-body h3 { 
        font-size: 2.2rem; 
        margin-bottom: 20px; 
        color: #fff;
        text-shadow: 0 0 10px rgba(255,255,255,0.1); 
    }
    
    .modal-body p { margin-bottom: 30px; font-size: 1.1rem; line-height: 1.7; color: #ccc; }
    
    .modal-body ul { list-style: none; margin-bottom: 30px; }
    .modal-body li { 
        margin-bottom: 12px; 
        display: flex; 
        align-items: center; 
        gap: 15px; 
        color: #eee; 
        font-size: 1.05rem;
    }
    
    .modal-body li::before { 
        content: '\f00c'; 
        font-family: 'Font Awesome 5 Free'; 
        font-weight: 900; 
        color: var(--primary); 
        background: rgba(210, 255, 0, 0.1);
        width: 25px; height: 25px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        font-size: 0.8rem;
    }

    .modal-btn {
        display: inline-block;
        background: var(--primary);
        color: #000;
        padding: 18px 40px;
        border-radius: 50px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: 0.3s;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
    
    .modal-btn::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
        transition: 0.5s;
    }
    
    .modal-btn:hover {
        transform: translateY(-3px) scale(1.02);
    }
    
    .modal-btn:hover::after { left: 100%; }

    @media (min-width: 900px) {
        .modal-content { 
            flex-direction: row; 
            max-width: 900px;
            height: auto; 
            max-height: 80vh;
        }
        .modal-header-img {
            width: 40%;
            height: auto;
            mask-image: none; /* Reset mask for side visual */
            border-right: 1px solid rgba(255,255,255,0.1);
        }
        .modal-body-wrapper {
            padding: 50px;
            overflow-y: auto;
        }
    }

    /* SALES MACHINE & CHATBOT (From HTML5) */
    .sales-matrix-section {
        width: 100%;
        padding: 100px 0;
        background: var(--site-dark);
        position: relative;
        overflow: hidden;
    }
    
    /* Typewriter Effect */
    .typing-wrapper {
        display: inline-block;
        position: relative;
    }
    
    .typing-text {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 3rem; /* Mobile default */
        color: #fff;
        position: relative;
        white-space: normal; /* Allow wrapping */
        line-height: 1.2;
        display: inline;
    }
    
    /* Cursor Effect Class */
    .cursor-active {
        border-right: 3px solid var(--primary);
        animation: blink 0.75s step-end infinite;
    }


    
    @keyframes blink {
        from, to { border-color: transparent; }
        50% { border-color: var(--primary); }
    }

    .subtitle-uppercase {
        text-transform: uppercase;
        color: var(--primary);
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        font-size: 1.1rem;
    }
    
    @media (max-width: 600px) {
        .typing-text { font-size: 2rem; }
    }
    
    /* Matrix Grid */
    .matrix-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
        margin-top: 60px;
    }
    
    .matrix-card {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
        padding: 40px;
        border-radius: 20px;
        transition: 0.4s;
        position: relative;
        overflow: hidden;
    }
    
    .matrix-card:hover {
        background: rgba(255,255,255,0.05);
        transform: translateY(-5px);
        border-color: rgba(255, 255, 255, 0.05);
    }
    
    .matrix-step {
        position: absolute;
        top: -20px; right: -20px;
        font-size: 6rem;
        font-weight: 900;
        color: rgba(255,255,255,0.02);
        z-index: 0;
    }
    
    .matrix-icon {
        font-size: 2.5rem;
        color: var(--primary);
        margin-bottom: 20px;
        position: relative; z-index: 1;
    }
    
    .matrix-card h3 {
        font-size: 1.5rem;
        color: #fff;
        margin-bottom: 15px;
        position: relative; z-index: 1;
    }
    
    .matrix-card p {
        color: #aaa;
        font-size: 1rem;
        line-height: 1.6;
        position: relative; z-index: 1;
    }

    /* Chatbot Widget Styles */
    .chatbot-widget {
        position: fixed;
        bottom: 30px; right: 30px;
        z-index: 9999;
        font-family: 'Inter', sans-serif;
    }

    .chatbot-toggle {
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--site-dark);
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
    position: relative;
}
    .chatbot-toggle:hover { transform: scale(1.1); }

    .chatbot-badge {
        position: absolute;
        top: -5px; right: -5px;
        background: #ff0000;
        color: #fff;
        font-size: 12px;
        width: 20px; height: 20px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        opacity: 0;
        transition: 0.3s;
    }
    .chatbot-badge.active { opacity: 1; }
    .chatbot-badge.pulse { animation: pulseRed 2s infinite; }
    
    @keyframes pulseRed {
        0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    }

    .chatbot-window {
        position: absolute;
        bottom: 80px; right: 0;
        width: 350px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        overflow: hidden;
        opacity: 0; visibility: hidden;
        transform: translateY(20px) scale(0.9);
        transition: 0.3s cubic-bezier(0.1, 0.9, 0.1, 1);
        transform-origin: bottom right;
    }
    .chatbot-window.active {
        opacity: 1; visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* Header */
    .chat-header {
    background: var(--primary);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--bg-body);
}
    .chat-avatar {
        width: 40px; height: 40px;
        border-radius: 50%;
        background: #151515;
        padding: 2px;
    }
    .chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .chat-info h4 { font-size: 1rem; margin: 0; }
    .chat-info p { font-size: 1rem; margin: 0; opacity: 0.8; }
    .chat-close { margin-left: auto; cursor: pointer; opacity: 0.7; }
    .chat-close:hover { opacity: 1; }

    /* Messages Area */
    .chat-messages {
        background: #151515;
        height: 300px;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .message-bubble {
        background: #fff;
        padding: 10px 15px;
        border-radius: 10px 10px 10px 0;
        font-size: 0.9rem;
        color: #333;
        max-width: 85%;
        align-self: flex-start;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        opacity: 0;
        transform: translateY(10px);
        animation: popIn 0.3s forwards;
    }

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

    /* Input Area */
    .chat-input-area {
        background: #a4a4a4;
        padding: 15px;
        display: flex;
        gap: 10px;
    }
    .chat-input {
        flex: 1;
        border: none;
        padding: 10px 15px;
        border-radius: 20px;
        outline: none;
    }
    .chat-send {
        background: #242424;
        color: #fff;
        border: none;
        width: 40px; height: 40px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.2s;
    }
    .chat-send:hover { transform: scale(1.1); }

    @media (max-width: 480px) {
        .chatbot-window { width: 300px; right: -10px; }
    }

    /* --- PORTFOLIO CAROUSEL (2D) --- */
    .templates-section {
        padding: 100px 0;
        background: var(--bg-body);
        position: relative;
        overflow: hidden;
    }

    .portfolio-grid-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        padding: 0 20px;
    }

    .portfolio-track {
        display: flex;
        gap: 30px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 30px; /* Space for scrollbar/indicators */
        scrollbar-width: none; /* Hide scrollbar Firefox */
        -ms-overflow-style: none; /* Hide scrollbar IE */
        scroll-behavior: smooth;
		padding-top: 30px;
        padding-left: 20px; /* Symmetry */
        padding-right: 20px; /* Symmetry */
        cursor: grab; /* Drag hint */
        user-select: none; /* Prevent text selection */
    }

    .portfolio-track.active {
        cursor: grabbing;
        scroll-snap-type: none; /* Disable snap during drag */
        scroll-behavior: auto; /* Instant follow */
    }

    .portfolio-track::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

    .portfolio-item {
        flex: 0 0 calc(33.333% - 20px); /* 3 items minus gap */
        scroll-snap-align: start;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        transition: transform 0.3s ease;
    }

    .portfolio-item:hover {
        transform: translateY(-5px);
    }

    .portfolio-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
        pointer-events: none; /* Prevent native drag */
        user-select: none;
    }

    .portfolio-item:hover img {
        transform: scale(1.05); /* Zoom effect */
    }

    /* Mobile Responsive */
    @media (max-width: 900px) {
        .portfolio-item {
            flex: 0 0 100%; /* 1 item full width */
        }
    }

    /* Navigation */
    .portfolio-nav-btn {
        position: absolute;
        top: 45%; /* Slightly higher to center on image area */
        transform: translateY(-50%);
        width: 50px; 
        height: 50px;
        background: var(--primary);
        color: var(--site-dark);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        font-size: 1.2rem;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    .portfolio-nav-btn:hover {
        transform: translateY(-50%) scale(1.1);
    }

    .nav-prev { left: -10px; }
    .nav-next { right: -10px; }
    
    @media (max-width: 1300px) {
        .nav-prev { left: 10px; }
        .nav-next { right: 10px; }
    }

    .drag-hint {
        text-align: center;
        color: var(--primary);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.9rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        min-height: 20px;
    }

    /* HOME BLOG (From HTML9) */
    .home-blog-section { padding: 80px 0; background: var(--site-dark); position: relative; }
    .blog-carousel-wrapper { overflow: hidden; position: relative; padding: 20px 0; }
    .blog-carousel-track { display: flex; gap: 30px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 10px; scroll-snap-type: x mandatory; padding-top: 20px;}
    .blog-carousel-track::-webkit-scrollbar { height: 5px; }
    .blog-carousel-track::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
    
    .home-post-card {
        min-width: calc((100% - 60px) / 3); /* Exactly 3 cards (Gap 30px * 2) */
        width: calc((100% - 60px) / 3);
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 15px;
        overflow: hidden;
        transition: 0.3s;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .home-post-card:hover { transform: translateY(-10px); }
    
    .home-post-img { width: 100%; height: 200px; object-fit: cover; }
    .home-post-content { padding: 25px; }
    .home-post-date { color: var(--primary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; display:block; }
    .home-post-title { color: #fff; font-size: 1.4rem; margin-bottom: 15px; line-height: 1.3; }
    .home-post-snippet { color: #999; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .btn-read { color: #fff; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; text-decoration: none; display: flex; align-items: center; gap: 10px; transition:0.3s;}
    .btn-read i { transition: 0.3s; }
    .btn-read:hover { color: var(--primary); }
    .btn-read:hover i { transform: translateX(5px); }
    
    @media (max-width: 768px) {
        .home-post-card { min-width: 85vw; scroll-snap-align: center; } 
        .blog-carousel-track { padding: 0 20px 20px 20px; } /* Padding for snap centering */
    }

    /* FOOTER (From HTML2) */
    .site-footer {
        background: var(--site-dark);
        padding: 20px;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.1);
        font-size: 12px;
    }
    .footer-copy { color: #ccc; font-size: 12px; margin: 0; }
    .developer-credit { margin-top: 10px; font-size: 14px; }

    /* --- REVEAL ON SCROLL ANIMATION --- */
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(50px);
        transition: all 1s cubic-bezier(0.5, 0, 0, 1);
        will-change: opacity, transform;
    }

    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    }
/* --- ABOUT SECTION --- */
.about-section {
    padding: 100px 0;
    background: var(--bg-body);
    position: relative;
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Imagem levemente menor que o texto */
    align-items: center;
    gap: 80px;
padding: 80px 0px;
}

.about-visuals {
    position: relative;
}

/* Moldura Neon atrás da imagem */
.about-img-wrapper {
    position: relative;
    z-index: 2;
}

.about-img-wrapper::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary);
    border-radius: 20px;
    z-index: -1;
    transition: 0.4s;
}

.about-img-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    filter: grayscale(20%);
    border: 1px solid var(--border-color);
    display: block;
}

.about-section:hover .about-img-wrapper::before {
    transform: translate(10px, -10px);
}

.about-text h2 {
    text-align: left;
    margin-bottom: 25px;
}

.about-text p {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Responsivo para Celular */
@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    
    .about-text h2 {
        text-align: center;
    }
    
    .about-img-wrapper::before {
        left: 0;
        top: 15px;
        transform: scale(0.95);
    }
    
    .about-visuals {
        order: 2; /* Texto em cima, imagem embaixo no mobile */
padding: 0px 20px;
    }
}

/* --- NOVA LOGO ESTILO ECLIPSE (ESTÁTICA COM SUFIXO) --- */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    /* Hover removido */
}

/* O Ícone de Eclipse */
.eclipse-icon {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* A "sombra" que faz o efeito de recorte */
.eclipse-icon::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    /* Cor aproximada do fundo do header para o recorte */
    background-color: #121212; 
    border-radius: 50%;
    top: 50%;
    left: 40%;
    transform: translate(-75%, -50%);
    /* Transição removida pois não há mais hover */
}

/* Texto Principal LPM */
.brand-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--light);
    letter-spacing: -1px;
    line-height: 1;
    /* Garante que o texto menor alinhe na base */
    display: flex;
    align-items: baseline;
}

/* O ponto e a barra neon */
.brand-text .dot,
.brand-text .slash {
    color: var(--primary);
}

/* Estilo da barra / */
.brand-text .slash {
    margin-left: 2px;
    font-weight: 600; /* Um pouco menos pesado que o LPM */
}

/* Estilo do texto "site" menor */
.brand-text .site-text {
    font-size: 1rem; /* Tamanho bem menor */
    font-weight: 600;
    color: var(--light); /* Mantém a cor do texto principal */
    margin-left: 2px;
    text-transform: lowercase;
    letter-spacing: 0px;
}

/* Esconde a regra antiga da logo-img */
    .logo-img { display: none; }