: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; 
    }
}
/* ==========================================================================
   ULTRA-PREMIUM PRODUCT ISLAND: ARCTIC EDITION
   Theme: Precision Engineering & Minimalist Depth
   ========================================================================== */

/* ==========================================================================
   ASEC PREMIUM VIBRANT UI - PROPRIETARY IP DESIGN
   ========================================================================== */

:root {
    --fw-blue: #00D2FF;      /* Neon Cyan */
    --fw-royal: #2962FF;     /* Actionable Royal Blue */
    --fw-black: #0f172a;     /* Deep Slate */
    --fw-white: #ffffff;
    --fw-glass: rgba(41, 98, 255, 0.06);
    --fw-border: #e2e8f0;    
    --smooth-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --glow-shadow: 0 15px 35px rgba(41, 98, 255, 0.35);
}

/* 1. SECTION WRAPPER & BACKGROUND */
.fw-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 80% 20%, rgba(0, 210, 255, 0.05), transparent 40%),
                radial-gradient(circle at 20% 80%, rgba(41, 98, 255, 0.05), #ffffff 50%);
    overflow: hidden;
}

/* 2. MAIN CONTAINER */
.product-island.full-width-island {
    box-sizing: border-box;
    width: 100%;
    padding: 120px 8%; 
    opacity: 0;
    transform: translateY(60px);
    transition: all 1.2s var(--smooth-ease);
}

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

/* 3. LAYOUT */
.island-content {
    display: flex;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
}

.island-text { flex: 1.4; }

.tech-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
    padding-top: 40px;
    border-top: 1px solid rgba(41, 98, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s var(--smooth-ease) 0.4s;
}

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

/* 4. TYPOGRAPHY: VIBRANT STYLING */
.fw-badge {
    /* Fallback color for older browsers */
    color: #2962FF; 

    /* Gradient definitions */
    background: linear-gradient(90deg, #2962FF, #00D2FF);
    
    /* Clipping the background to the text */
    background-clip: text;
    -webkit-background-clip: text;
    
    /* Making the text transparent to show the background */
    -webkit-text-fill-color: transparent;
    
    /* Typography */
    text-transform: uppercase;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 4px;
    margin-bottom: 25px;
    
    /* Critical for clipping to work correctly */
    display: inline-block; 
    line-height: 1.2;
}

.island-text h2 {
    font-size: clamp(2.8rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -3px;
    color: var(--fw-black);
    margin: 0;
}

.desc-text { 
    font-size: 1.15rem; 
    line-height: 1.7; 
    color: #475569; 
    margin-top: 30px;
}

/* 5. TECH TAGS: CAPSULE GLASS EFFECT */
.software-tags span {
    font-family: 'Inter', sans-serif;
    background: var(--fw-glass);
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fw-royal);
    border-radius: 50px;
    margin: 0 8px 10px 0;
    display: inline-block;
    border: 1px solid rgba(41, 98, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.software-tags span:hover {
    background: var(--fw-royal);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(41, 98, 255, 0.2);
}

.method-item strong {
    color: var(--fw-black);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 6. BUTTONS: NEW PREMIUM DESIGN */
.fw-btn-group { display: flex; gap: 20px; margin-top: 50px; }

/* Primary Glowing Button */
.fw-btn-primary {
    padding: 20px 45px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--fw-royal), #0052D4);
    color: white;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s var(--smooth-ease);
    box-shadow: var(--glow-shadow);
    border: none;
}

.fw-btn-primary:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 25px 50px rgba(41, 98, 255, 0.5);
}

/* Secondary Industrial Button */
.btn-primary { /* Class from your HTML */
    padding: 18px 40px;
    border-radius: 12px;
    background: transparent;
    color: var(--fw-black);
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid var(--fw-black);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--fw-black);
    color: #fff;
    transform: translateY(-3px);
}

/* 7. IMAGE VISUALS: HARDWARE POP */
.island-visual {
    flex: 1;
    position: relative;
}

.island-visual img {
    width: 100%;
    max-width: 650px;
    filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.18));
    border-radius: 8px;
    
    opacity: 0;
    transform: translateX(80px) rotate(2deg);
    transition: all 1.6s var(--smooth-ease) 0.3s;
}

.active-scroll .island-visual img {
    opacity: 1;
    transform: translateX(0) rotate(0);
}

/* Ambient Glow behind image */
.island-visual::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.15), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* 8. MOBILE ADAPTATION */
@media (max-width: 1100px) {
    .island-content { flex-direction: column; text-align: center; gap: 60px; }
    .island-text { order: 2; }
    .island-visual { order: 1; }
    .tech-main-grid { grid-template-columns: 1fr; text-align: left; }
    .fw-btn-group { flex-direction: column; align-items: stretch; }
}