:root {
    /* Industrial Light Palette */
    --v4-bg-light: #ffffff;
    --v4-accent: rgb(0, 14, 145);      /* Deep Blue */
    
    /* Typography Colors */
    --v4-text-main: rgb(255, 255, 255); /* High Contrast for Overlays */
    --v4-text-dim: rgb(255, 255, 255);      /* Muted Brand Color */
    
    /* Animation Physics */
    --v4-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --v4-reveal-speed: 1.2s;
}

/* ==========================================================================
   START OF HERO INFO SECTION STYLES
   ========================================================================== */

/**
 * 1. RESET & FOUNDATION
 * Viewport-filling container with Inter typography.
 */
.mega-hero_l {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--v4-bg-light);
    font-family: 'Inter', sans-serif;
}

/**
 * 2. VISUAL ENGINE (Background & Frame)
 * Handles the "Floating Frame" effect and cinematic focus.
 */
.mega-hero_l-visual-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mega-hero_l-bg-img {
    width: 98%;
    height: 95%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    
    /* Initial Cinematic State (Blurred) */
    filter: blur(25px) brightness(1.05);
    transform: scale(1.1);
    animation: mega-hero_l-cameraFocus 3s var(--v4-ease) forwards;
    transition: transform 1s var(--v4-ease);
}

/* Subtle Zoom Interaction on Hover */
.mega-hero_l:hover .mega-hero_l-bg-img {
    transform: scale(1.03);
}

/**
 * 3. CONTENT LAYOUT
 */
.mega-hero_l-content-box {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 1600px;
}

.mega-hero_l-layout-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/**
 * 4. TYPOGRAPHY (Hero Title)
 * Massive text with scanning reveal effect.
 */
.mega-hero_l-huge-title {
    color: var(--v4-text-main);
    font-size: clamp(50px, 8vw, 130px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -3px;
    text-transform: uppercase;
    margin: 0;
    
    /* Scanning Animation Logic */
    clip-path: inset(0 100% 0 0); 
    opacity: 0;
    animation: mega-hero_l-textScan 2s var(--v4-ease) forwards 0.8s;
}

.mega-hero_l-accent-bar {
    width: 0;
    height: 6px;
    background: var(--v4-accent);
    margin-top: 30px;
    animation: mega-hero_l-lineExtend 1.5s ease forwards 1.2s;
}

/**
 * 5. DATA PANELS (Content & Metrics)
 */
.mega-hero_l-details {
    max-width: 500px;
    color: var(--v4-text-main);
}

.mega-hero_l-id-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    letter-spacing: 6px;
    color: var(--v4-accent);
    font-weight: 800;
}



/**
 * 5. DATA PANELS & DETAILS (L-VERSION)
 */
.mega-hero_l-details {
    max-width: 480px;
}

.mega-hero_l-id-code {
    font-family: monospace;
    font-size: 22px;
    letter-spacing: 8px;
    color: var(--v4-accent);
    font-weight: bold;
}

.mega-hero_l-details h3 {
    font-size: 2.2rem;
    margin: 15px 0;
    font-weight: 700;
    color: var(--v4-text-main);
}

.mega-hero_l-details p {
    color: var(--v4-text-dim);
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Technical Specifications Row */
.mega-hero_l-specs-row {
    display: flex;
    gap: 40px;
    margin: 30px 0;
}

.mega-hero_l-spec-label { 
    display: block; 
    font-size: 10px; 
    color: var(--v4-accent); 
    font-weight: 800; 
    letter-spacing: 1px;
}

.mega-hero_l-spec-value { 
    font-weight: bold; 
    font-size: 16px; 
    font-family: monospace; 
    color: var(--v4-text-main);
}

/* Call to Action (CTA) Link */
.mega-hero_l-action-link {
    display: inline-block;
    color: var(--v4-text-main);
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--v4-accent);
    padding-bottom: 5px;
    transition: 0.3s ease;
}

.mega-hero_l-action-link:hover {
    color: var(--v4-accent);
    padding-left: 10px;
}








/**
 * 6. REVEAL SYSTEM
 * Staggered translateY animations for child elements.
 */
.reveal-node {
    opacity: 0;
    transform: translateY(40px);
    animation: mega-hero_l-itemUp var(--v4-reveal-speed) var(--v4-ease) forwards;
}

/* Sequential Animation Delays */
.mega-hero_l-details .reveal-node:nth-child(1) { animation-delay: 1.0s; } /* Code */
.mega-hero_l-details .reveal-node:nth-child(2) { animation-delay: 1.2s; } /* H3 */
.mega-hero_l-details .reveal-node:nth-child(3) { animation-delay: 1.4s; } /* P */
.mega-hero_l-details .reveal-node:nth-child(4) { animation-delay: 1.6s; } /* Specs Row */
.mega-hero_l-details .reveal-node:nth-child(5) { animation-delay: 1.8s; } /* Link */

/**
 * 7. KEYFRAMES
 */
@keyframes mega-hero_l-cameraFocus {
    to { filter: blur(0px) brightness(1.1); transform: scale(1); }
}

@keyframes mega-hero_l-textScan {
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes mega-hero_l-lineExtend {
    to { width: 120px; }
}

@keyframes mega-hero_l-itemUp {
    to { opacity: 1; transform: translateY(0); }
}

/**
 * 8. RESPONSIVE ADAPTATION
 * Optimized for tablets and mobile devices.
 */
@media (max-width: 992px) {
    .mega-hero_l { 
        height: auto; 
        min-height: 100vh; 
        padding: 120px 0 80px; 
    }
    .mega-hero_l-layout-grid { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 60px; 
    }
    .mega-hero_l-bg-img { 
        width: 100%; 
        height: 100%; 
        border-radius: 0; 
    }
    .mega-hero_l-huge-title { 
        font-size: 60px !important; 
    }
}  










/* ==========================================================================
   PRODUCT ISLAND - LIGHT INDUSTRIAL V4
   Theme: Slate / Blue / Light UI
   Features: Laser Scan Buttons, 3D Entrance, Responsive Grid
   ========================================================================== */

:root {
    --fw-blue: #2962FF;     /* Actionable Electric Blue */
    --fw-black: #0f172a;    /* Deep Slate Black */
    --fw-white: #ffffff;
    --island-bg: #f8fafc;   /* Subtle grey-blue base */
    --text-muted: #64748b;  /* Muted Slate Grey */
    --v4-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 1. THE ISLAND CONTAINER --- */
.product-island {
    box-sizing: border-box;
    width: 94%;
    max-width: 1400px;
    margin: 100px auto;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(40px, 6vw, 100px);
    
    /* Light UI Surface */
    background: var(--island-bg); 
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 20px 50px -12px rgba(0, 0, 0, 0.08);

    /* Entrance Animation */
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.4s var(--v4-ease);
}

.product-island.active-scroll {
    opacity: 1;
    transform: translateY(0);
}

/* --- 2. LAYOUT --- */
.island-content {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    z-index: 2;
}

/* --- 3. TEXT & TYPOGRAPHY --- */
.island-text { flex: 1.2; }

.fw-badge {
    color: var(--fw-blue);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 25px;
}

.island-text h2 {
    font-size: clamp(2.5rem, 5vw, 4.2rem); 
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
    margin: 0 0 25px 0;
    color: var(--fw-black);
    /* Subtle light-mode gradient */
    background: linear-gradient(180deg, var(--fw-black) 0%, #475569 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
    .island-text h2 { color: var(--fw-black); }
}

.island-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 520px;
}

/* --- 4. BUTTON GROUP & BUTTONS (LASER STYLE) --- */
.fw-btn-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.fw-btn-primary, .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    
    padding: 16px 40px;
    background: var(--fw-blue);
    color: #ffffff !important;
    
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 8px; /* Industrial rounded-square */
    border: none;
    transition: all 0.5s var(--v4-ease);
    z-index: 1;
    box-shadow: 0 10px 20px rgba(41, 98, 255, 0.2);
}

/* Laser Sweep Effect */
.fw-btn-primary::before, .btn-primary::before {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: all 0.7s var(--v4-ease);
}

/* Darker Blue Hover Layer */
.fw-btn-primary::after, .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0039cb;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.fw-btn-primary:hover, .btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(41, 98, 255, 0.3);
}

.fw-btn-primary:hover::before, .btn-primary:hover::before { left: 150%; }
.fw-btn-primary:hover::after, .btn-primary:hover::after { opacity: 1; }

/* --- 5. IMAGE & VISUAL (3D ENTRANCE) --- */
.island-visual { flex: 1; display: flex; justify-content: center; }

.island-visual img {
    width: 100%;
    max-width: 500px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
    opacity: 0;
    transform: perspective(1000px) rotateY(-15deg) translateX(40px);
    transition: all 1.6s var(--v4-ease) 0.2s;
}

.product-island.active-scroll .island-visual img {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg) translateX(0);
}

/* --- 6. MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .product-island { padding: 40px 25px; width: 92%; border-radius: 30px; margin: 60px auto; }
    .island-content { flex-direction: column-reverse; text-align: center; gap: 40px; }
    .island-text h2 { font-size: 2.2rem; }
    .fw-btn-group { flex-direction: column; width: 100%; }
    .fw-btn-primary, .btn-primary { width: 100%; }
    .island-visual img { max-width: 280px; }
}

/* ==========================================================================
   PURE SECTION - TIGHT & ANCHORED
   Everything is closer together, but the right side is still locked.
   ========================================================================== */

:root {
    --bg-white: #ffffff;
    --accent-blue: #2962FF;
    --text-black: #0f172a;
    --text-blackk: #03030336;
    --text-muted: #64748b;
    --ghost-grey: #f1f5f9;
    --v4-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Faster, sharper ease */
}

.pure-wide {
    padding: 80px 6%; /* Reduced vertical padding for compactness */
    background: var(--bg-white);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.pure-container {
    width: 100%;
    max-width: 1300px; /* Narrowed from 1500px to bring sides closer */
    position: relative;
}

/* --- 1. THE TIGHT GRID --- */
.pure-flex-wrapper {
    display: grid;
    /* LEFT: Flex | RIGHT: Locked 450px */
    grid-template-columns: 1fr 450px; 
    align-items: end; 
    gap: 40px; /* Reduced gap from 80px to 40px to bring them together */
    position: relative;
    z-index: 2;
}

/* --- 2. THE STABLE TITLE --- */
.pure--title {
    font-size: clamp(60px, 9vw, 150px); /* Slightly smaller for compactness */
    font-weight: 950;
    color: var(--text-blackk);
    margin: 0;
    line-height: 0.85;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    
    /* Reveal Animation */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: transform 0.6s var(--v4-ease), color 0.4s ease;
}

.pure--title:hover {
    color: var(--accent-blue);
    transform: translateX(10px);
}

/* --- 3. THE INFO BLOCK (ANCHORED) --- */
.pure-info {
    width: 450px; 
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.pure-line-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Tighter spacing */
    overflow: hidden;
}

/* Line Animation */
.pure-line-header::before {
    content: '';
    width: 40px;
    height: 3px;
    background: var(--accent-blue);
    margin-right: 15px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s var(--v4-ease) 0.2s;
}

.active-scroll .pure-line-header::before {
    transform: scaleX(1);
}

.pure-tech-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--accent-blue);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s var(--v4-ease) 0.4s;
}

.active-scroll .pure-tech-tag {
    opacity: 1;
    transform: translateY(0);
}

/* --- 4. H3 WITH SHIMMER --- */
.pure-info h3 {
    font-size: 2.2rem; /* Compact professional sizing */
    font-weight: 900;
    margin: 10px 0 15px 0;
    color: var(--text-black);
    line-height: 1.1;
    letter-spacing: -1px;
    
    /* Shimmer Effect */
    background: linear-gradient(90deg, var(--text-black), var(--accent-blue), var(--text-black));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Entrance */
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.6s var(--v4-ease) 0.5s, background-position 0.8s ease;
}

.pure-info h3:hover {
    background-position: right center;
}

.active-scroll .pure-info h3 {
    opacity: 1;
    transform: translateY(0);
}

/* --- 5. PARAGRAPH --- */
.pure-info p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.6s var(--v4-ease) 0.7s;
}

.active-scroll .pure-info p {
    opacity: 1;
    transform: translateY(0);
}


/* --- 6. BACKGROUND GHOST TEXT --- */
.pure-bg-index {
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    font-size: 20vw;
    font-weight: 950;
    color: var(--ghost-grey);
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    opacity: 0.5;
    -webkit-text-stroke: 1px rgba(0,0,0,0.02);
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 1024px) {
    .pure-flex-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .pure-info {
        width: 100%;
    }
}