:root {
    --titan-bg: #000000;
    --titan-surface: #161617;
    --titan-surface-hover: #1d1d1f;
    --titan-text: #f5f5f7;
    --titan-text-secondary: #86868b;
    --titan-accent: #2997ff;
    --titan-nav-bg: rgba(0, 0, 0, 0.8);
    --titan-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --titan-max-w: 1100px;
    --titan-nav-height: 52px;
    --text-bg-opacity: 0.6;
}

/* --- RESET & GLOBAL --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--titan-bg); color: var(--titan-text); font-family: var(--titan-font); font-size: 17px; line-height: 1.47; font-weight: 400; letter-spacing: -0.022em; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.3s; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* --- NAVIGATION --- */
#titan_main_nav { position: fixed; top: 0; left: 0; width: 100%; height: var(--titan-nav-height); background: var(--titan-nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 9999; font-size: 12px; }
.titan_nav_container { max-width: var(--titan-max-w); margin: 0 auto; height: 100%; position: relative; padding: 0 20px; }
.titan_nav_wrapper { display: flex; justify-content: center; align-items: center; height: 100%; }

/* Logo */
.titan_logo { display: flex; align-items: center; color: #fff; margin-right: 30px; opacity: 0.9; }
.titan_logo_img { width: auto; height: 24px; display: block; }
.titan_logo_text { font-weight: 600; margin-left: 8px; letter-spacing: 1px; }

/* Menu */
.titan_menu_list { display: flex; height: 100%; gap: 35px; }
.titan_menu_list > li { height: 100%; display: flex; align-items: center; position: relative; cursor: pointer; }
.titan_link { color: #e8e8ed; opacity: 0.8; transition: opacity 0.3s; padding: 0 5px; }
.titan_menu_list > li:hover .titan_link { opacity: 1; color: #fff; }

.titan_mobile_toggle { display: none; background: none; border: none; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 10001; cursor: pointer; }
.titan_mobile_toggle span { display: block; width: 20px; height: 2px; background: #fff; margin: 5px 0; transition: 0.3s; }

/* DROPDOWN MENU */
.titan_dropdown { 
    position: fixed; 
    top: var(--titan-nav-height); 
    left: 0; 
    width: 100%; 
    background: #161617; 
    height: 0; 
    overflow: hidden; 
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; 
    opacity: 0; 
    visibility: hidden;
    z-index: 9998;
}
.titan_has_dropdown:hover .titan_dropdown { height: auto; padding: 40px 0 60px 0; opacity: 1; visibility: visible; border-bottom: 1px solid #333; }
.titan_dropdown:hover { opacity: 1; visibility: visible; }
.titan_dropdown_inner { max-width: var(--titan-max-w); margin: 0 auto; display: flex; justify-content: center; gap: 80px; padding: 0 20px; }
.titan_col { display: flex; flex-direction: column; }
.titan_col h4 { font-size: 12px; color: var(--titan-text-secondary); text-transform: uppercase; margin-bottom: 10px; margin-top: 20px; }
.titan_col h4:first-child { margin-top: 0; }
.titan_col a { font-size: 21px; font-weight: 600; color: var(--titan-text); margin-bottom: 8px; line-height: 1.2; display: block; }
.titan_col a small { display: block; font-size: 12px; font-weight: 400; color: var(--titan-text-secondary); }
.titan_col a:hover { color: var(--titan-accent); }

/* --- HERO SECTION --- */
.titan_hero { position: relative; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 140px; overflow: hidden; }
.titan_background_wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.titan_bg_img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.6; transition: transform 0.8s ease; }
.titan_hero_content { text-align: center; max-width: 800px; padding: 0 20px; z-index: 2; }
.titan_hero_content h1 { font-size: 72px; font-weight: 600; margin-bottom: 10px; }
.titan_hero_content h2 { font-size: 28px; font-weight: 400; color: #d2d2d7; }
.titan_cta_group { margin-top: 30px; display: flex; justify-content: center; gap: 20px; font-size: 17px; }
.titan_btn_primary { background: #0071e3; color: #fff; padding: 8px 22px; border-radius: 980px; font-size: 14px; }
.titan_btn_primary:hover { background: #0077ed; }
.titan_link_arrow { color: var(--titan-accent); font-size: 15px; display: flex; align-items: center; }
.titan_link_arrow:hover { text-decoration: underline; }

/* --- TAKE A CLOSER LOOK --- */
.titan_closer_look_section { padding-top: 50px; }
.center-text { text-align: center; }
.titan_closer_wrapper { background: #000; border-radius: 30px; position: relative; overflow: hidden; margin-top: 40px; width: 100%; height: 700px; border: 1px solid #333; }
.titan_closer_bg_layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-color: #000; }
#titan_feature_bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.3s ease; }
.titan_ui_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; padding: 60px; display: flex; align-items: center; gap: 30px; background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%); }

.titan_nav_arrows { display: flex; flex-direction: column; gap: 15px; }
.titan_arrow_btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(40, 40, 40, 0.6); backdrop-filter: blur(10px); border: none; color: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.3s, transform 0.2s; }
.titan_arrow_btn:hover { background: rgba(80, 80, 80, 0.9); transform: scale(1.05); }

.titan_feature_list { display: flex; flex-direction: column; gap: 15px; max-width: 350px; }
.titan_feature_item { background: rgba(28, 28, 30, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 99px; padding: 12px 24px; cursor: pointer; color: #fff; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; width: fit-content; }
.titan_feature_item:hover { background: rgba(60, 60, 62, 0.7); border-color: rgba(255,255,255,0.3); }
.titan_pill_header { display: flex; align-items: center; gap: 12px; width: 100%; }
.btn_icon { font-size: 20px; line-height: 1; font-weight: 300; transition: transform 0.3s; }
.btn_label { font-size: 15px; font-weight: 600; }
.titan_feature_desc { height: 0; opacity: 0; margin-top: 0; font-size: 15px; line-height: 1.5; color: #d2d2d7; transition: opacity 0.3s ease; pointer-events: none; }
.titan_feature_desc strong { display: block; color: #fff; margin-bottom: 4px; }
.titan_feature_item.active { background: rgba(28, 28, 30, 0.9); border-radius: 28px; padding: 24px; border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 15px 40px rgba(0,0,0,0.4); width: 100%; cursor: default; }
.titan_feature_item.active .btn_icon { display: none; }
.titan_feature_item.active .btn_label { display: none; }
.titan_feature_item.active .titan_feature_desc { height: auto; opacity: 1; margin-top: 0; pointer-events: auto; }
.titan_mobile_info_box { display: none; }

/* --- COMMON & GRID --- */
.titan_section { padding: 100px 20px; max-width: var(--titan-max-w); margin: 0 auto; }
.titan_section_header { margin-bottom: 50px; }
.titan_section_header h3 { font-size: 48px; font-weight: 600; }
.titan_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.titan_card { position: relative; height: 500px; border-radius: 24px; overflow: hidden; background: #000; transition: transform 0.5s ease; }
.titan_hover_effect { overflow: hidden; cursor: pointer; }
.titan_hover_effect .titan_card_bg, .titan_hover_effect .titan_bg_img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.titan_hover_effect:hover .titan_card_bg, .titan_hover_effect:hover .titan_bg_img { transform: scale(1.05); }
.titan_card_large { grid-column: span 2; }
@media(min-width: 900px) { .titan_card_large { grid-column: span 2; } }
.titan_card_bg_wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.titan_card_bg { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.8; }
.titan_card_content { position: relative; z-index: 1; padding: 40px; height: 100%; display: flex; flex-direction: column; }
.titan_tag { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #888; margin-bottom: 10px; }
.titan_card h4 { font-size: 32px; font-weight: 600; margin-bottom: 5px; }
.titan_card p { font-size: 19px; opacity: 0.9; }

/* Text Overlay Fix */
.titan_text_overlay_fix {
    background: rgba(0, 0, 0, var(--text-bg-opacity)); 
    border-radius: 24px;
    height: 100%;
}

.titan_card_light .titan_card_bg { opacity: 1; }
.titan_card_light .titan_card_content.dark-text { color: #000; }
.titan_card_light .titan_tag { color: #555; }
.titan_card_light { grid-column: span 3; }
.titan_banner_section { position: relative; width: 100%; height: 700px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 80px; text-align: center; background: #000; margin-bottom: 50px; }
.titan_banner_text { position: relative; z-index: 2; }
.titan_banner_text h2 { font-size: 56px; font-weight: 600; }
.titan_banner_text p { font-size: 24px; color: #ccc; }

/* --- NEW SECTIONS --- */
/* Highlights */
.titan_highlights_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.titan_hl_card { 
    background: #161617; border-radius: 24px; padding: 30px; text-align: center; 
    opacity: 0; transform: translateY(30px); transition: all 0.6s; 
}
.titan_hl_card.is-visible { opacity: 1; transform: translateY(0); }
.titan_hl_wide { grid-column: span 2; }
.titan_hl_icon { font-size: 40px; margin-bottom: 15px; }
.titan_hl_card h4 { font-size: 19px; font-weight: 600; color: #fff; }
.titan_hl_card p { font-size: 15px; color: #86868b; }

/* Cooling */
.titan_cooling_section { height: 600px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #000; overflow: hidden; margin: 50px 0; }
.titan_cooling_content { z-index: 2; position: relative; padding: 20px; max-width: 900px; }
.titan_fan_anim { animation: spin 3s linear infinite; margin-bottom: 20px; color: var(--titan-accent); }
@keyframes spin { 100% { transform: rotate(360deg); } }
.titan_cooling_content h2 { font-size: 56px; margin-bottom: 20px; }
.titan_cooling_content p { font-size: 21px; color: #a1a1a6; }

/* Hanna */
.titan_hanna_section { padding: 100px 20px; max-width: 1100px; margin: 50px auto; border-radius: 30px; background: #161617; overflow: hidden; }
.titan_hanna_layout { display: flex; align-items: center; gap: 40px; }
.titan_hanna_text { flex: 1; padding: 40px; }
.titan_hanna_text h3 { font-size: 48px; margin-bottom: 20px; }
.titan_video_btn { background: #fff; color: #000; border: none; padding: 12px 24px; border-radius: 50px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.titan_hanna_visual { flex: 1; text-align: center; opacity: 0; transform: translateX(50px); transition: 0.8s; }
.titan_hanna_visual.is-visible { opacity: 1; transform: translateX(0); }

/* Camera */
.titan_camera_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.titan_cam_card { position: relative; border-radius: 24px; overflow: hidden; cursor: zoom-in; }
.titan_cam_label { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.7); color: #fff; padding: 8px 16px; border-radius: 8px; font-weight: 600; }
.titan_cam_label.highlight { background: var(--titan-accent); }

/* ULTRA-HD (Full BG + Overlay) */
.titan_ultra_hd_section {  padding-top: 50px; padding-bottom: 50px; position: relative; width: 100%; min-height: 800px; background: #000; color: #fff; overflow: hidden; display: flex; align-items: center; }
.titan_hd_bg_layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.titan_hd_flower_img { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; opacity: 0; transform: scale(1.1); transition: opacity 1.5s ease, transform 1.5s ease; }
.titan_hd_flower_img.is-visible { opacity: 1; transform: scale(1); }
.titan_hd_gradient_mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #000000 5%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 100%); z-index: 1; }
.titan_hd_container { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; width: 100%; padding: 0 20px; }
.titan_hd_header { text-align: center; margin-bottom: 60px; opacity: 0; transform: translateY(30px); transition: 0.8s ease; }
.titan_hd_header.is-visible { opacity: 1; transform: translateY(0); }
.titan_hd_header h2 { font-size: 48px; margin-bottom: 15px; }
.titan_hd_specs { display: grid; grid-template-columns: 240px 240px; gap: 50px; margin-left: 50px; }
.titan_hd_item { display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.titan_hd_item.is-visible { opacity: 1; transform: translateY(0); }
.hd_icon { color: #86868b; margin-bottom: 15px; }
.hd_icon svg { width: 32px; height: 32px; opacity: 0.8; }
.titan_hd_item h3 { font-size: 36px; font-weight: 600; margin-bottom: 10px; line-height: 1; }
.hd_desc { font-size: 15px; line-height: 1.6; color: #fff; }
.hd_wide { grid-column: span 2; margin-top: 20px; }

/* MODALS */
.titan_modal_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; backdrop-filter: blur(10px); }
.titan_modal_overlay.open { opacity: 1; visibility: visible; }
.titan_modal_content { position: relative; max-width: 90%; max-height: 90%; }
.video-content { width: 800px; background: #000; }
.titan_video_wrapper { position: relative; width: 100%; height: auto; display: flex; justify-content: center; }
.titan_modal_close { position: absolute; top: -50px; right: 0; background: none; border: none; color: #fff; font-size: 40px; cursor: pointer; transition: transform 0.2s; }
.titan_modal_close:hover { transform: scale(1.2); color: var(--titan-accent); }
#titan_lightbox_img { max-height: 85vh; max-width: 100%; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.titan_lightbox_trigger { cursor: zoom-in; }

/* FAQ */
.titan_faq { background: var(--titan-surface); padding: 100px 20px; margin-top: 50px; }
.titan_faq_container { max-width: 800px; margin: 0 auto; }
.titan_faq h3 { font-size: 40px; margin-bottom: 40px; text-align: center; }
.titan_accordion { border-bottom: 1px solid #424245; }
.titan_accordion_btn { width: 100%; background: none; border: none; color: var(--titan-text); font-size: 19px; font-weight: 600; text-align: left; padding: 24px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.titan_icon { transition: transform 0.3s; font-size: 24px; font-weight: 300; }
.titan_panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, opacity 0.4s ease-out; opacity: 0; padding-right: 10px; }
.titan_panel p { padding-bottom: 24px; color: var(--titan-text-secondary); line-height: 1.6; margin: 0; font-size: 16px; }
.titan_accordion.active .titan_icon { transform: rotate(45deg); }
.titan_accordion.active .titan_panel { opacity: 1; }

/* ======================================================= */
/* BOTTOM MENU NAVIGATION (APPLE TYPOGRAPHY FIXED)         */
/* ======================================================= */

.titan_bottom_menu {
    background: #f5f5f7;
    /* Apple uses a specific grey for the footer text, not black */
    /*color: #424245; */
    color: #88888f;
    font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    line-height: 1.33337;
    font-weight: 400;
    /* FIX: Reset letter spacing so characters aren't squashed */
    letter-spacing: 0; 
    /* FIX: Makes font look thinner/greyer like Mac rendering */
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    
    padding: 40px 0 20px 0;
    border-top: 1px solid #d2d2d7;
    width: 100%;
    position: relative;
    z-index: 10;
}

.bottom_menu_wrapper {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 22px;
}

/* --- COLUMNS --- */
.bottom_menu_col {
    display: flex;
    flex-direction: column;
}

/* HEADINGS: Slightly darker and bolder */
.bottom_menu_heading {
    font-size: 12px;
    line-height: 1.33337;
    font-weight: 600; /* Semi-Bold */
    color: #1d1d1f; /* Darker than links */
    margin-bottom: 9px;
    margin-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0; /* Ensure no negative spacing */
}

/* LISTS */
.bottom_menu_links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bottom_menu_links li { 
    margin-bottom: 9px;
}

/* LINKS: The specific fix for the "Store" look */
.bottom_menu_links a {
    color: #65656b; /* The exact Apple Grey #424245 , #8f8f94*/
    text-decoration: none;
    font-size: 12px;
    font-weight: 400; /* Regular weight */
    letter-spacing: 0; /* Fixes "too close" gap */
    transition: color 0.2s, text-decoration 0.2s;
}

.bottom_menu_links a:hover { 
    color: #1d1d1f; /* Darkens on hover */
    text-decoration: underline;
}

/* Sub-category Labels */
.bottom_menu_category_label {
    font-weight: 600;
    color: #1d1d1f;
    margin-top: 12px;
    margin-bottom: 9px;
    font-size: 12px;
}
.bottom_menu_category_label:first-child { margin-top: 0; }


/* --- BOTTOM SECTION (Socials & Copyright) --- */
.bottom_menu_bottom { margin-top: 35px; }

.bottom_menu_social_section h4 { 
    font-size: 12px; 
    font-weight: 600; 
    margin-bottom: 10px; 
    color: #1d1d1f;
}

.bottom_menu_social_icons { display: flex; gap: 15px; }

/* FIX: Social Icons Color for Light Background */
.bottom_menu_social_icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e8e8ed;
    color: #1d1d1f !important; /* Forces black/dark grey icon */
    transition: 0.3s; font-size: 16px; border: none; text-decoration: none;
}
.bottom_menu_social_icon:hover { 
    background: #0071e3; 
    color: #fff !important; /* Forces white on hover */
}
/* Ensure FA icons inherit the forced color */
.bottom_menu_social_icon i { color: inherit; }


.bottom_menu_bottom hr { border: 0; border-top: 1px solid #d2d2d7; margin: 20px 0; }

.bottom_menu_legal { display: flex; justify-content: space-between; flex-wrap: wrap; color: #86868b; font-size: 12px; }
.bottom_menu_legal p { margin: 0; padding-bottom: 5px; color: #86868b; letter-spacing: 0; }

.bottom_menu_legal_links a { 
    color: #424245; 
    margin: 0 8px; 
    text-decoration: none; 
    border-right: 1px solid #d2d2d7;
    padding-right: 10px;
    letter-spacing: 0;
}
.bottom_menu_legal_links a:last-child { border: none; }
.bottom_menu_legal_links a:hover { text-decoration: underline; color: #1d1d1f; }


/* ======================================================= */
/* DESKTOP VIEW (Screens WIDER than 900px)                 */
/* ======================================================= */
@media (min-width: 901px) {
    .bottom_menu_nav {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px;
        align-items: start;
    }

    .bottom_menu_toggle { display: none !important; }

    .bottom_menu_links { 
        display: block !important; 
        max-height: none !important; 
        opacity: 1 !important;
        visibility: visible !important;
    }

    .bottom_menu_heading { cursor: default; pointer-events: none; }
}


/* ======================================================= */
/* MOBILE VIEW (Screens SMALLER than 900px)                */
/* ======================================================= */
@media (max-width: 900px) {
    .bottom_menu_nav {
        display: flex !important;
        flex-direction: column;
        gap: 0;
    }

    .bottom_menu_col { border-bottom: 1px solid #d2d2d7; }

    .bottom_menu_heading {
        padding: 14px 0;
        margin: 0;
        cursor: pointer;
        font-size: 12px;
        color: #1d1d1f;
        pointer-events: auto;
    }

    .bottom_menu_toggle {
        display: inline-block;
        font-weight: 400;
        font-size: 14px;
        transition: transform 0.3s ease;
        color: #1d1d1f;
    }

    .bottom_menu_links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        padding-left: 0;
    }

    /* Open State */
    .bottom_menu_col.active .bottom_menu_links {
        max-height: 1000px;
        margin-bottom: 20px;
        padding-top: 5px;
    }

    .bottom_menu_col.active .bottom_menu_toggle {
        transform: rotate(45deg);
    }

    .bottom_menu_legal { flex-direction: column; gap: 10px; }
    .bottom_menu_legal_links a { display: block; margin: 5px 0; border: none; padding: 0; }
}


/* --- WHATSAPP FLOATING BUTTON --- */
.titan-whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.titan-whatsapp-float:hover { transform: scale(1.1); background-color: #20b85a; }
.titan-whatsapp-float svg { width: 32px; height: 32px; display: block; }

@media (max-width: 768px) {
    .titan-whatsapp-float {
        bottom: 20px; right: 20px; width: 50px; height: 50px;
    }
    .titan-whatsapp-float svg { width: 26px; height: 26px; }
}

/* LINKED CARDS */
.titan-card-link-block { display: block; text-decoration: none; color: inherit; height: 100%; }
.titan-card-link-block:hover .titan_card { transform: scale(1.02); }

/* --- DEMO SECTION (Video Background) --- */
.titan_demo_section {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: #000;
}

/* Background Video Styling */
.titan_demo_bg_wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}

.titan_demo_video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video fills screen without distortion */
}

.titan_demo_overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Darkens video by 60% */
    z-index: 1;
}

/* Content Container */
.titan_demo_content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

.titan_demo_content h2 {
    font-size: 56px;
    font-weight: 600;
    color: #fff;
    /*margin-bottom: 60px;  original margin if without Subtitle*/
    margin-bottom: 10px; /* Reduced margin to sit closer to subtitle */
}

.titan_demo_subtitle {
    font-size: 28px;
    font-weight: 400;
    color: #d2d2d7;
    margin-bottom: 60px; /* Creates space between text and grid */
}


/* Grid Layout (Centering Logic) */
.titan_demo_grid {
    display: flex;
    justify-content: center; /* Centralizes items regardless of count (1, 2, or 3) */
    flex-wrap: wrap; /* Allows wrapping on mobile */
    gap: 30px;
}

/* Card Styling */
.titan_demo_card {
    flex: 0 1 350px; /* Base width 350px, allowed to shrink */
    background: rgba(255, 255, 255, 0.05); /* Glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 0 0 30px 0; /* Padding bottom only, image touches top */
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, background 0.3s;
}

.titan_demo_card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.titan_demo_thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 20px;
}

.titan_demo_card h3 {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.titan_demo_card p {
    font-size: 15px;
    color: #a1a1a6;
    padding: 0 20px;
    margin-bottom: 20px;
    line-height: 1.5;
}


.titan_demo_card .titan_video_btn {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px; /* Optional: adds a little space at the bottom */
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .titan_demo_section { padding: 60px 20px; }
    /*
    .titan_demo_content h2 { font-size: 40px; margin-bottom: 40px; } original margin if without subtitle*/

    .titan_demo_content h2 { font-size: 40px; margin-bottom: 10px; }
    .titan_demo_subtitle { font-size: 20px; margin-bottom: 40px; }

    .titan_demo_grid { flex-direction: column; align-items: center; }
    .titan_demo_card { width: 100%; max-width: 400px; flex: auto; }
}

/* MOBILE GENERAL */
@media (max-width: 900px) {
    .titan_hero_content h1 { font-size: 48px; }
    .titan_banner_text h2 { font-size: 40px; }
    .titan_mobile_toggle { display: block; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: none; border: none; z-index: 10001; cursor: pointer; padding: 10px; }
    .titan_mobile_toggle span { display: block; width: 25px; height: 2px; background: #fff; margin: 6px 0; transition: 0.3s; }
    .titan_menu_list { position: fixed; top: var(--titan-nav-height); left: 0; width: 100%; height: 0; background: #000; display: flex; flex-direction: column; align-items: flex-start; overflow-y: hidden; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; gap: 0; z-index: 9998; border-top: 1px solid rgba(255,255,255,0.1); }
    .titan_menu_list.mobile-active { height: calc(100vh - var(--titan-nav-height)); padding: 20px 40px; overflow-y: auto; }
    .titan_menu_list > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); height: auto; display: block; padding: 0; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; }
    .titan_menu_list.mobile-active > li { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
    .titan_menu_list > li > a { display: block; padding: 15px 0; font-size: 17px; color: #fff; font-weight: 500; }
    .titan_dropdown { position: static; height: auto; opacity: 1; visibility: visible; background: transparent; border: none; padding: 0 0 10px 20px; display: none; }
    .titan_has_dropdown:hover .titan_dropdown { display: block; }
    .titan_dropdown_inner { flex-direction: column; gap: 20px; padding: 0; }
    .titan_col h4 { margin-top: 15px; color: #86868b; }
    .titan_col a { font-size: 15px; color: #e8e8ed; }
    .titan_highlights_grid { grid-template-columns: 1fr; }
    .titan_hl_wide { grid-column: span 1; }
    .titan_cooling_section { height: auto; padding: 60px 20px; }
    .titan_hanna_layout { flex-direction: column-reverse; }
    .titan_camera_grid { grid-template-columns: 1fr; }
    .video-content { width: 95%; }
    .titan_card_large { grid-column: span 1; }
    .titan_card_light { grid-column: span 1; }
    .chapter-list { justify-content: flex-start; }
    
    /* Ultra HD Mobile */
    .titan_hd_gradient_mask { background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%); }
    .titan_hd_flower_img { object-position: center; }
    .titan_hd_specs { margin-left: 0; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; }
    .titan_hd_header h2 { font-size: 32px; }
    .titan_hd_item h3 { font-size: 28px; }

    /* Closer Look Mobile */
    .titan_closer_wrapper { height: auto; display: flex; flex-direction: column; }
    .titan_closer_bg_layer { position: relative; width: 100%; height: 350px; order: 1; }
    .titan_ui_overlay { position: relative; order: 2; width: 100%; height: auto; padding: 20px 0; display: flex; flex-direction: column; background: #000; }
    .titan_nav_arrows { display: none; }
    .titan_feature_list { display: flex; flex-direction: row; overflow-x: auto; gap: 12px; width: 100%; max-width: 100%; padding: 10px 20px; order: 2; -ms-overflow-style: none; scrollbar-width: none; }
    .titan_feature_list::-webkit-scrollbar { display: none; }
    .titan_feature_item { background: #1c1c1e; border-radius: 50px; padding: 10px 20px; width: auto; min-width: max-content; flex-shrink: 0; box-shadow: none; white-space: nowrap; }
    .titan_feature_item.active { background: #fff; color: #000; }
    .titan_feature_item .btn_icon, .titan_feature_item .btn_label, .titan_feature_item.active .btn_icon, .titan_feature_item.active .btn_label { display: inline-block; }
    .titan_feature_item .btn_icon { margin-right: 8px; }
    .titan_feature_desc { display: none !important; }
    .titan_mobile_info_box { order: 1; display: block; position: relative; top: auto; left: auto; transform: none; width: 100%; margin-bottom: 10px; background: transparent; text-align: center; padding: 0 20px; }
    .titan_mobile_info_box h4 { font-size: 18px; margin-bottom: 5px; color: #fff; }
    .titan_mobile_info_box p { font-size: 14px; color: #ccc; margin: 0; }
}


/* ======================================================= */
/* NEWSROOM & NEWS DETAIL STYLES                           */
/* ======================================================= */

/* Force white background for content wrapper */
.newsroom-light-wrapper {
    background-color: #ffffff;
    color: #1d1d1f;
    padding-bottom: 100px;
    width: 100%;
}

/* Typography Overrides inside light wrapper */
.newsroom-light-wrapper h1, 
.newsroom-light-wrapper h2, 
.newsroom-light-wrapper h3, 
.newsroom-light-wrapper p {
    color: #1d1d1f;
}

/* Latest News Featured Card */
.news-section-title {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 30px;
}

.news-featured-card {
    display: flex;
    flex-direction: column;
    background: #fbfbfd;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.news-featured-card:hover {
    transform: scale(1.01);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.news-featured-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.news-featured-content {
    padding: 40px;
}

.news-date {
    font-size: 14px;
    color: #86868b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.news-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
}

.news-excerpt {
    font-size: 21px;
    color: #424245 !important; /* Force grey */
    line-height: 1.4;
}

/* More News Grid */
.more-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-8px);
}

.news-card-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 20px;
}

.news-card .news-title {
    font-size: 24px;
    line-height: 1.2;
}


/* --- NEWS DETAIL ARTICLE --- */
.article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 20px 40px 20px;
}

.article-header {
    text-align: center;
    margin-bottom: 60px;
}

.article-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.article-subtitle {
    font-size: 24px;
    color: #86868b !important;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 30px;
}

.article-date {
    font-size: 15px;
    color: #86868b !important;
    font-weight: 600;
}

.article-text {
    font-size: 21px;
    line-height: 1.6;
    color: #1d1d1f;
    margin-bottom: 40px;
}

.article-full-image {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 40px;
}

.article-2col-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.article-2col-images img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
}

.article-video {
    width: 100%;
    border-radius: 20px;
    outline: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.article-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 60px;
}

.article-gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    cursor: zoom-in;
    transition: opacity 0.3s;
}

.article-gallery img:hover {
    opacity: 0.8;
}

.article-footer-links {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #d2d2d7;
    padding-top: 40px;
    margin-top: 40px;
    font-size: 17px;
}

.article-footer-links a {
    color: #0071e3;
    font-weight: 600;
    transition: color 0.2s;
}

.article-footer-links a:hover {
    color: #0077ed;
    text-decoration: underline;
}

/* Mobile Adjustments for Newsroom */
@media (max-width: 900px) {
    .news-section-title { font-size: 32px; }
    .news-featured-img { height: 300px; }
    .news-title { font-size: 28px; }
    .more-news-grid { grid-template-columns: 1fr; gap: 40px; }
    
    .article-title { font-size: 36px; }
    .article-subtitle { font-size: 21px; }
    .article-text { font-size: 19px; }
    
    .article-2col-images { grid-template-columns: 1fr; }
    .article-2col-images img { height: auto; }
    
    .article-gallery { grid-template-columns: 1fr 1fr; } /* 2 columns on mobile */
    .article-footer-links { flex-direction: column; gap: 20px; align-items: center; }
}


/* ======================================================= */
/* HELP CENTER / FAQ PAGE STYLES                           */
/* ======================================================= */

/* Body override for Help Theme */
body.titan-help-theme {
    background-color: #ffffff;
    color: #1d1d1f;
}

/* Ensure the main nav stays dark */
body.titan-help-theme #titan_main_nav {
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #333;
}
body.titan-help-theme .titan_link { color: #f5f5f7; }
body.titan-help-theme .titan_logo_text { color: #fff; }

.help-layout-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--titan-nav-height); /* Clear the sticky nav */
    min-height: 100vh;
    position: relative;
}

/* Mobile Toggle for Sidebar */
.help-mobile-sidebar-toggle {
    display: none;
    width: 100%;
    padding: 15px 20px;
    background: #f5f5f7;
    border: none;
    border-bottom: 1px solid #d2d2d7;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    cursor: pointer;
    position: sticky;
    top: var(--titan-nav-height);
    z-index: 99;
}
.help-mobile-sidebar-toggle i { margin-right: 10px; color: #0071e3; }

/* --- LEFT PANEL: SIDEBAR --- */
.help-sidebar {
    flex: 0 0 280px;
    border-right: 1px solid #e5e5e5;
    padding: 40px 20px 40px 0;
    position: sticky;
    top: var(--titan-nav-height);
    height: calc(100vh - var(--titan-nav-height));
    overflow-y: auto;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}
.help-sidebar::-webkit-scrollbar { display: none; }

.help-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 1. Main Group Button (Level 1) */
.help-nav-title {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    /* Strict Padding: 12px on the left */
    padding: 10px 12px; 
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.help-nav-title:hover { background: #f5f5f7; }

/* Wrapper to align Icon and Text perfectly */
.help-nav-title span {
    display: flex;
    align-items: center;
}

/* Strict Icon Sizing to lock the alignment math */
.help-icon { 
    display: inline-block;
    width: 24px; /* Fixed width */
    text-align: center; 
    margin-right: 12px; /* Fixed gap */
    font-size: 16px; 
    color: #86868b;
}

/* 
   THE MATH FOR PERFECT ALIGNMENT:
   Left Padding (12px) + Icon Width (24px) + Icon Margin (12px) = 48px
   Therefore, Level 2 items must have exactly 48px of left padding.
*/

.help-chevron { font-size: 12px; color: #86868b; transition: transform 0.3s; }

/* 2. Subtitle & Direct Links (Level 2) */
.help-nav-subtitle,
.help-nav-level2-link {
    display: flex;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--titan-font) !important; 
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #424245 !important;
    letter-spacing: 0 !important; 
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* CRITICAL FIX: Set left padding exactly to 48px to match Level 1 */
    padding: 8px 12px 8px 48px !important; 
    
    border-radius: 6px;
    cursor: pointer;
    justify-content: space-between; 
    align-items: center;
    text-decoration: none;
    transition: all 0.2s ease;
    margin: 0;
}

.help-nav-subtitle:hover,
.help-nav-level2-link:hover { 
    background: #f5f5f7; 
    color: #1d1d1f !important; 
}

.help-nav-level2-link.active { 
    background-color: #eef2ff; 
    color: #4f46e5 !important; 
}

/* 3. Deep Links (Level 3) */
.help-nav-list {
    list-style: none;
    padding: 0;
    margin: 2px 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-nav-level3-link {
    display: block;
    /* Indent Level 3 slightly deeper than Level 2 */
    padding: 8px 12px 8px 60px !important; 
    font-size: 14px !important;
    color: #424245 !important;
    border-radius: 6px;
    transition: all 0.2s;
    text-decoration: none;
    letter-spacing: 0 !important;
}

.help-nav-level3-link:hover { background: #f5f5f7; color: #1d1d1f !important; }
.help-nav-level3-link.active { background-color: #eef2ff; color: #4f46e5 !important; font-weight: 600 !important; }

/* Accordion Logic */
.help-nav-content,
.help-nav-subgroup .help-nav-list {
    display: none;
}
.help-nav-group.expanded > .help-nav-content,
.help-nav-subgroup.expanded > .help-nav-list {
    display: block;
}
.help-nav-group.expanded > .help-nav-title .help-chevron,
.help-nav-subgroup.expanded > .help-nav-subtitle .help-chevron {
    transform: rotate(180deg);
}

/* --- RIGHT PANEL: CONTENT --- */
.help-content-area {
    flex: 1;
    padding: 40px 60px 100px 60px;
    max-width: 850px;
}

.help-breadcrumbs {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 30px;
}
.help-breadcrumbs span { color: #1d1d1f; font-weight: 500; }

.help-article {
    color: #1d1d1f;
}

.help-main-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.help-intro {
    font-size: 19px;
    color: #424245;
    line-height: 1.5;
    margin-bottom: 40px;
}

.help-section { margin-bottom: 50px; }
.help-section h2 { font-size: 24px; font-weight: 600; margin-bottom: 15px; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px; }
.help-section h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; margin-top: 20px; }
.help-subtitle { font-size: 15px; color: #424245; margin-bottom: 15px; font-weight: 400 !important; }
.help-section p { font-size: 16px; line-height: 1.6; color: #424245; margin-bottom: 15px; }

/* Lists */
.help-bullet-list, .help-number-list {
    margin-bottom: 20px;
    padding-left: 20px;
    color: #424245;
    font-size: 16px;
    line-height: 1.6;
}
.help-bullet-list li, .help-number-list li { margin-bottom: 10px; }
.help-bullet-list li strong, .help-number-list li strong { color: #1d1d1f; }

/* Images & Video */
.help-image-container { text-align: center; margin: 20px 0; }
.help-image-container img { width: 100%; border-radius: 12px; border: 1px solid #e5e5e5; cursor: zoom-in; }
.help-image-caption { display: block; font-size: 13px; color: #86868b; margin-top: 10px; }

.help-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}
.help-gallery-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    border: 1px solid #e5e5e5;
    transition: opacity 0.2s;
}
.help-gallery-grid img:hover { opacity: 0.8; }

.help-video-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.help-video-container video { width: 100%; display: block; }

/* Related Articles */
.help-related-grid { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.help-related-card {
    display: flex; align-items: center; padding: 20px; border: 1px solid #e5e5e5; border-radius: 12px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s;
}
.help-related-card:hover { border-color: #0071e3; box-shadow: 0 4px 12px rgba(0,113,227,0.1); }
.help-related-card i { font-size: 24px; color: #0071e3; margin-right: 20px; width: 30px; text-align: center; }
.help-related-card h4 { font-size: 17px; font-weight: 600; margin: 0 0 5px 0; color: #1d1d1f; }
.help-related-card p { font-size: 14px; margin: 0; color: #86868b; }

/* Footer Links (Prev/Next) */
.help-footer-links {
    display: flex; justify-content: space-between; border-top: 1px solid #e5e5e5; padding-top: 30px; margin-top: 50px;
}
.help-nav-btn { font-size: 15px; font-weight: 600; color: #0071e3; text-decoration: none; }
.help-nav-btn:hover { text-decoration: underline; }
.help-nav-btn i { font-size: 12px; margin: 0 5px; }

/* Mobile Help Center Adjustments */
@media (max-width: 900px) {
    .help-layout-container { flex-direction: column; }
    .help-mobile-sidebar-toggle { display: block; }
    .help-sidebar {
        flex: none; width: 100%; height: auto; border-right: none; padding: 20px;
        position: static; border-bottom: 1px solid #e5e5e5;
        display: none; 
    }
    .help-sidebar.mobile-open { display: block; }

    .help-content-area { padding: 30px 20px; max-width: 100%; }
    .help-main-title { font-size: 32px; }
    .help-gallery-grid { grid-template-columns: 1fr 1fr; }
    .help-footer-links { flex-direction: column; gap: 20px; align-items: center; }
}


/* ======================================================= */
/* IGLA PAGE SPECIFIC STYLES                               */
/* ======================================================= */

.igla-main {
    --igla-red: #D42B1E;
    --igla-red-light: #E8372A;
    --igla-bg:   #ffffff;
    --igla-bg-2: #f7f7f7;
    --igla-bg-3: #efefef;
    --igla-gray: #888888;
    --igla-mid:  #444444;
    --igla-dark: #0a0a0a;
    background: var(--igla-bg);
}

/* Base Typo */
.igla-main h1, .igla-main h2, .igla-main h3, .igla-main h4, .igla-main p { font-family: var(--titan-font); }

/* HERO */
.igla-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 130px 6% 80px; position: relative; background: var(--igla-bg); overflow: hidden; }


.igla-hero-bg-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 55% at 50% 45%, rgba(212,43,30,0.06) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 20% 80%, rgba(212,43,30,0.03) 0%, transparent 60%); }
.igla-hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 70%); }



/* --- OPTIONAL HERO BACKGROUND IMAGE --- */
.igla-hero-optional-img {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    
    /* Adjust this to make the background darker or lighter (0.1 to 1) */
    opacity: 0.15; 
    
    /* Ensures the image doesn't block you from clicking text/buttons */
    pointer-events: none; 
}

/* Ensure the glow and grid sit safely on top of the image */
.igla-hero-bg-glow { z-index: 1; }
.igla-hero-grid { z-index: 1; }
.igla-hero-content { z-index: 2; }

.igla-hero-content { position: relative; z-index: 1; max-width: 1000px; }
.igla-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,43,30,0.07); border: 1px solid rgba(212,43,30,0.22); color: var(--igla-red); padding: 6px 18px; border-radius: 100px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2.2rem; }
.igla-eyebrow-dot { width: 7px; height: 7px; background: var(--igla-red); border-radius: 50%; animation: blink 2.2s ease infinite; }
@keyframes blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(1.4); } }
.igla-hero h1 { 
    font-size: clamp(3rem, 9vw, 8.5rem); 
    line-height: 1.05; /* Tight line height to keep words close together */
    letter-spacing: -0.04em; 
    margin-bottom: 0.3rem; 
}

/* By using display: block, the spans break into new lines automatically */
.igla-hero h1 span {
    display: block; 
}

/* 1. Thin Title */
.igla-title-thin { 
    font-weight: 200; 
    color: var(--igla-gray); 
}

/* 2. Black Title */
.igla-title-black { 
    font-weight: 900; 
    color: var(--igla-dark); 
}

/* 3. Red Title */
.igla-title-red { 
    font-weight: 900; 
    font-style: italic; 
    color: var(--igla-red); 
}
.igla-thin { font-weight: 200; color: var(--igla-gray); }
.igla-red { color: var(--igla-red); }
.igla-italic { font-style: italic; font-weight: 800; }
.igla-hero-tagline { font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 300; color: var(--igla-mid); letter-spacing: -0.01em; margin-bottom: 0.6rem; margin-top: 0.6rem; }
.igla-hero-tagline strong { font-weight: 700; color: var(--igla-dark); }
.igla-hero-sub { font-size: clamp(0.88rem, 1.6vw, 1.1rem); color: var(--igla-gray); line-height: 1.75; max-width: 520px; margin: 0 auto 3rem; }
.igla-btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.igla-btn-primary { background: var(--igla-red); color: #fff; padding: 16px 38px; border-radius: 6px; font-size: 0.95rem; font-weight: 600; text-decoration: none; letter-spacing: 0.02em; transition: all 0.22s; display: inline-block; }
.igla-btn-primary:hover { background: var(--igla-red-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212,43,30,0.25); color: #fff; }
.igla-btn-ghost { background: transparent; color: var(--igla-dark); padding: 16px 38px; border-radius: 6px; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(0,0,0,0.18); transition: all 0.22s; display: inline-flex; align-items: center; gap: 8px; }
.igla-btn-ghost:hover { border-color: rgba(0,0,0,0.45); background: rgba(0,0,0,0.03); color: var(--igla-dark); }
.igla-play-icon { width: 20px; height: 20px; background: rgba(0,0,0,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; }
.igla-hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--igla-gray); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.igla-scroll-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, transparent, var(--igla-gray)); animation: scrollPulse 2.2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { opacity:0.3; } 55% { opacity:1; } }

/* HERO IMAGE STRIP */
.igla-hero-img-strip { width: 100%; max-width: 900px; margin: 3rem auto 0; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 32px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06); }
.igla-hero-img-strip img { width: 100%; display: block; }
.igla-hero-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(255,255,255,0.92) 0%, transparent 100%); padding: 2.5rem 2rem 1.8rem; display: flex; align-items: flex-end; justify-content: space-between; }
.igla-hero-img-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--igla-red); }
.igla-hero-img-name { font-size: 1.3rem; font-weight: 800; margin-top: 0.2rem; color: var(--igla-dark); }

/* ========================================= */
/* STATS (Dynamic HTML Color Support)        */
/* ========================================= */
.igla-stats-strip { 
    /* Variables fall back to default light theme colors if not set in HTML */
    background: var(--stat-bg-color, var(--igla-bg-2)); 
    border-top: 1px solid rgba(0,0,0,0.07); 
    border-bottom: 1px solid rgba(0,0,0,0.07); 
    padding: 2.8rem 6%; 
    transition: background 0.3s ease;
}

/* Helper class if you want borders to look better in Dark Mode */
.igla-stats-strip.igla-dark-mode-stats {
    border-color: rgba(255,255,255,0.1);
}

.igla-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; text-align: center; }

.igla-stat-num { 
    font-size: 2.9rem; 
    font-weight: 900; 
    /* Controlled by HTML variable */
    color: var(--stat-num-color, var(--igla-red)); 
    letter-spacing: -0.04em; 
    line-height: 1; 
}
.igla-stat-num sup { font-size: 1.4rem; }

.igla-stat-lbl { 
    font-size: 0.75rem; 
    /* Controlled by HTML variable */
    color: var(--stat-lbl-color, var(--igla-gray)); 
    text-transform: uppercase; 
    letter-spacing: 0.07em; 
    margin-top: 0.4rem; 
}

/* SHARED */
.igla-section-label { display: inline-block; color: var(--igla-red); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.igla-section-title { font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.028em; margin-bottom: 1.4rem; color: var(--igla-dark); }
.igla-section-body { font-size: 1.05rem; color: var(--igla-mid); line-height: 1.82; }
.igla-section-body strong { color: var(--igla-dark); }


/* ========================================= */
/* PROBLEM SECTION & SUBTITLE                */
/* ========================================= */
.igla-problem { padding: 110px 6%; background: var(--igla-bg); }
.igla-problem-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }

/* Removes bottom margin from Title if Subtitle follows it */
.igla-section-title.has-subtitle { margin-bottom: 0; }

/* New Subtitle Class (Forces new line) */
.igla-section-subtitle {
    display: block; /* Forces it to its own line */
    font-size: clamp(2rem, 4.5vw, 3.6rem); /* Matches the main title size */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: var(--igla-red);
    font-style: italic;
    margin-top: 0.2rem;
    margin-bottom: 1.4rem; /* Restores the space before the paragraph */
}

.igla-threat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.igla-threat-card { background: var(--igla-bg-2); border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; padding: 1.6rem; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.igla-threat-card:hover { border-color: rgba(212,43,30,0.28); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.igla-threat-icon { font-size: 1.65rem; margin-bottom: 0.9rem; display: block; }
.igla-threat-card h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--igla-dark); }
.igla-threat-card p { font-size: 0.78rem; color: var(--igla-gray); line-height: 1.55; }
.igla-threat-card.igla-span2 { grid-column: 1 / -1; background: rgba(212,43,30,0.04); border-color: rgba(212,43,30,0.18); }

/* REVEAL (dark) */
.igla-reveal-section { padding: 130px 6%; text-align: center; background: var(--igla-dark); position: relative; overflow: hidden; }
.igla-reveal-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212,43,30,0.12) 0%, transparent 65%); }
.igla-reveal-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.igla-reveal-inner h2 { font-size: clamp(2.4rem, 6vw, 5.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 1.6rem; color: #fff; }
.igla-reveal-inner h2 .igla-thin { font-weight: 100; color: rgba(255,255,255,0.3); }
.igla-reveal-inner p { font-size: 1.1rem; color: rgba(255,255,255,0.65); line-height: 1.82; margin-bottom: 3rem; max-width: 680px; margin-left: auto; margin-right: auto; }
.igla-reveal-inner p strong { color: #fff; }
.igla-reveal-inner .igla-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
.igla-reveal-inner .igla-btn-ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); color: #fff; }

/* HOW */
.igla-how { padding: 110px 6%; background: var(--igla-bg); }
.igla-how-inner { max-width: 1140px; margin: 0 auto; }
.igla-how-header { text-align: center; margin-bottom: 4rem; }
.igla-steps-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; position: relative; }
.igla-steps-row::before { content: ''; position: absolute; top: 36px; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, rgba(212,43,30,0.22), transparent); }
.igla-step { background: var(--igla-bg-2); border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; padding: 2rem 1.6rem; text-align: center; position: relative; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.igla-step:hover { border-color: rgba(212,43,30,0.28); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.07); }
.igla-step-num { width: 50px; height: 50px; background: rgba(212,43,30,0.08); border: 1px solid rgba(212,43,30,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.3rem; font-size: 1.05rem; font-weight: 800; color: var(--igla-red); }
.igla-step h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--igla-dark); }
.igla-step p { font-size: 0.79rem; color: var(--igla-gray); line-height: 1.6; }

/* CINEMATIC */
.igla-cinematic { position: relative; overflow: hidden; height: 520px; display: flex; align-items: center; }
.igla-cinematic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.36); }
.igla-cinematic-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.2) 60%, transparent 100%); }
.igla-cinematic-content { position: relative; z-index: 1; padding: 0 8%; max-width: 800px; }
.igla-cinematic-content h2 { font-size: clamp(2.5rem, 5.5vw, 4.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 1.2rem; color: #fff; }
.igla-cinematic-content h2 .igla-italic { font-style: italic; color: var(--igla-red); }
.igla-cinematic-content p { font-size: 1.05rem; color: rgba(255,255,255,0.65); line-height: 1.78; margin-top: 1rem; }

/* VIDEO */
.igla-video-hero { padding: 0; background: var(--igla-bg-3); }
.igla-video-hero-inner { max-width: 1400px; margin: 0 auto; }
.igla-video-hero-text { text-align: center; padding: 80px 6% 60px; }
.igla-video-hero-text h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.06; letter-spacing: -0.038em; margin-bottom: 1rem; color: var(--igla-dark); }
.igla-video-hero-text p { font-size: 1rem; color: var(--igla-gray); max-width: 480px; margin: 0 auto; }
.igla-video-embed-wrap { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; }
.igla-video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ========================================= */
/* VIDEO GRID                                */
/* ========================================= */
.igla-video-grid-section { padding: 80px 6%; background: var(--igla-bg-2); }
.igla-video-grid-header { text-align: center; margin-bottom: 3rem; }
.igla-video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; max-width: 1100px; margin: 0 auto; }

/* Card Container */
.igla-video-thumb { 
    border-radius: 14px; 
    overflow: hidden; 
    background: var(--igla-bg); 
    border: 1px solid rgba(0,0,0,0.08); 
    cursor: pointer; 
    transition: all 0.3s; 
    text-decoration: none; 
    color: var(--igla-dark); 
    display: block; 
}
.igla-video-thumb:hover { 
    border-color: rgba(212,43,30,0.3); 
    transform: translateY(-4px); 
    box-shadow: 0 20px 50px rgba(0,0,0,0.10); 
}

/* Image Wrappers (Forces 16:9 Aspect Ratio perfectly matching video) */
.igla-video-thumb-img-wrap,
.igla-video-thumb-overlay-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
    overflow: hidden;
}

/* The Images inside the wrappers */
.igla-video-thumb-img-wrap img,
.igla-video-thumb-overlay-wrap img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.igla-video-thumb:hover img { transform: scale(1.05); }

/* Play Button Overlay (For Video Column) */
.igla-video-play-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Dark Overlay (For Column 3) */
.igla-thumb-dark-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Adjust 0.6 for more/less darkness */
    z-index: 1;
}

/* Overlay Text Container */
.igla-thumb-overlay-text {
    position: absolute;
    z-index: 2;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

/* Text Positioning Controls (Set in HTML) */
.align-center .igla-thumb-overlay-text {
    top: 50%;
    transform: translateY(-50%);
}
.align-bottom .igla-thumb-overlay-text {
    bottom: 0;
}

/* Inner Text Styles */
.igla-overlay-icon { font-size: 2.5rem; margin-bottom: 5px; line-height: 1; }
.igla-overlay-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.igla-overlay-sub { font-size: 0.8rem; color: rgba(255,255,255,0.8); }

/* Card Body (White area with title) */
.igla-video-thumb-body { padding: 1rem 1.2rem 1.4rem; position: relative; z-index: 3; background: var(--igla-bg); }
.igla-video-thumb-tag { font-size: 0.65rem; font-weight: 700; color: var(--igla-red); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.35rem; }
.igla-video-thumb-title { font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: var(--igla-dark); }
.igla-video-playlist-cta { text-align: center; margin-top: 2.5rem; }

/* AUTH */
.igla-auth-modes { padding: 110px 6%; background: var(--igla-bg); }
.igla-auth-modes-inner { max-width: 1140px; margin: 0 auto; }
.igla-auth-header { text-align: center; margin-bottom: 4rem; }
.igla-auth-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.igla-auth-card { background: var(--igla-bg-2); border: 1px solid rgba(0,0,0,0.07); border-radius: 20px; padding: 2.5rem 2rem; text-align: center; transition: all 0.3s; position: relative; overflow: hidden; }
.igla-auth-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--igla-red), transparent); opacity: 0; transition: opacity 0.3s; }
.igla-auth-card:hover { border-color: rgba(212,43,30,0.28); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.07); }
.igla-auth-card:hover::before { opacity: 1; }
.igla-auth-icon { font-size: 3rem; margin-bottom: 1.2rem; display: block; }
.igla-auth-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; color: var(--igla-dark); }
.igla-auth-sub { font-size: 0.78rem; color: var(--igla-gray); line-height: 1.6; }
.igla-auth-badge { display: inline-block; margin-top: 1rem; background: rgba(212,43,30,0.07); border: 1px solid rgba(212,43,30,0.2); color: var(--igla-red); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 12px; border-radius: 100px; }

/* LIFESTYLE */
.igla-lifestyle { padding: 0; background: var(--igla-bg-2); overflow: hidden; }
.igla-lifestyle-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; }
.igla-lifestyle-copy { display: flex; flex-direction: column; justify-content: center; padding: 5rem 6%; background: var(--igla-bg-2); }
.igla-lifestyle-visual { background: var(--igla-bg-3); display: flex; align-items: center; justify-content: center; padding: 3rem; position: relative; overflow: hidden; }
.igla-lifestyle-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212,43,30,0.06) 0%, transparent 70%); }
.igla-lifestyle-visual img { max-width: 100%; max-height: 360px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18)); transition: transform 0.5s ease; }
.igla-lifestyle-visual:hover img { transform: scale(1.04) rotate(-1deg); }

/* GALLERY */
.igla-gallery-strip { padding: 80px 0; background: var(--igla-bg); overflow: hidden; }
.igla-gallery-strip-header { text-align: center; padding: 0 6%; margin-bottom: 3rem; }
.igla-gallery-scroll { display: flex; gap: 1.2rem; overflow-x: auto; padding: 0 6%; scrollbar-width: none; }
.igla-gallery-scroll::-webkit-scrollbar { display: none; }
.igla-gallery-item { flex: 0 0 320px; height: 240px; border-radius: 16px; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,0.07); transition: transform 0.3s, box-shadow 0.3s; }
.igla-gallery-item:hover { transform: scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,0.10); }
.igla-gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.92); transition: filter 0.4s; }
.igla-gallery-item:hover img { filter: brightness(1); }
.igla-gallery-item-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(255,255,255,0.88) 0%, transparent 100%); padding: 1.2rem 1rem 0.8rem; font-size: 0.72rem; font-weight: 600; color: var(--igla-mid); }

/* PRODUCTS */
.igla-products { padding: 110px 6%; background: var(--igla-bg-2); }
.igla-products-header { text-align: center; margin-bottom: 4.5rem; }
.igla-products-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem; max-width: 1200px; margin: 0 auto; }
.igla-product-card { background: var(--igla-bg); border: 1px solid rgba(0,0,0,0.08); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.35s; }
.igla-product-card:hover { border-color: rgba(212,43,30,0.3); transform: translateY(-7px); box-shadow: 0 28px 64px rgba(0,0,0,0.10); }
.igla-product-card.igla-featured { border-color: rgba(212,43,30,0.3); box-shadow: 0 0 0 1px rgba(212,43,30,0.12), 0 12px 40px rgba(0,0,0,0.08); }
.igla-product-badge-wrap { position: relative; }
.igla-product-badge { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--igla-red); color: #fff; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 13px; border-radius: 100px; }
.igla-product-img-zone { min-height: 260px; background: var(--igla-bg-2); display: flex; align-items: center; justify-content: center; padding: 2.5rem; position: relative; overflow: hidden; }
.igla-product-img-zone::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,43,30,0.05) 0%, transparent 65%); pointer-events: none; }
.igla-product-img-zone img { max-width: 100%; max-height: 200px; object-fit: contain; position: relative; z-index: 1; transition: transform 0.4s ease; filter: drop-shadow(0 12px 32px rgba(0,0,0,0.12)); }
.igla-product-card:hover .igla-product-img-zone img { transform: scale(1.05); }
.igla-product-body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.igla-prod-model { font-size: 0.68rem; color: var(--igla-red); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; }
.igla-prod-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0.45rem; color: var(--igla-dark); }
.igla-prod-tagline { font-size: 0.98rem; color: var(--igla-gray); font-style: italic; margin-bottom: 1.6rem; }
.igla-prod-features { list-style: none; flex: 1; margin-bottom: 1.8rem; padding: 0;}
.igla-prod-features li { display: flex; gap: 10px; align-items: flex-start; padding: 0.55rem 0; border-bottom: 1px solid rgba(0,0,0,0.055); font-size: 0.93rem; color: var(--igla-mid); line-height: 1.4; }
.igla-prod-features li:last-child { border-bottom: none; }
.igla-fi { color: var(--igla-red); flex-shrink: 0; font-size: 0.7rem; margin-top: 3px; }
.igla-prod-btn { display: block; text-align: center; text-decoration: none; padding: 12px 22px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; transition: all 0.22s; background: rgba(212,43,30,0.07); border: 1px solid rgba(212,43,30,0.22); color: var(--igla-red); }
.igla-prod-btn:hover { background: var(--igla-red); color: #fff; border-color: var(--igla-red); }
.igla-product-card.igla-featured .igla-prod-btn { background: var(--igla-red); color: #fff; border-color: var(--igla-red); }
.igla-product-card.igla-featured .igla-prod-btn:hover { background: var(--igla-red-light); }
/* ========================================= */
/* DEVICE CALLOUT (Updated Full Image Style) */
/* ========================================= */

.igla-device-callout { 
    padding: 110px 6%; 
    background: var(--igla-bg); 
}

.igla-device-inner { 
    max-width: 1140px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 6rem; 
    align-items: center; 
}

/* Removed background, borders, and padding to allow full-size image */
.igla-device-visual { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%;
}

/* Image now takes 100% width and scales naturally without limits */
.igla-device-visual img { 
    width: 100%; 
    height: auto; 
    max-height: none; /* Overrides previous size limits */
    object-fit: cover; 
    position: relative; 
    z-index: 1; 
    border-radius: 20px; /* Gives the full image clean, rounded corners */
    box-shadow: 0 16px 40px rgba(0,0,0,0.12); /* Smooth shadow behind the image */
}

/* Specs List Styles (Unchanged) */
.igla-specs-list { margin-top: 1.8rem; }
.igla-spec-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 0.84rem; }
.igla-spec-row:last-child { border-bottom: none; }
.igla-spec-key { color: var(--igla-gray); }
.igla-spec-val { color: var(--igla-dark); font-weight: 600; text-align: right; }

/* Mobile Adjustments (Unchanged but ensuring it stays responsive) */
@media (max-width: 900px) {
    .igla-device-inner { grid-template-columns: 1fr; gap: 3rem; }
}


/* ========================================= */
/* ANTI-HIJACK (Adjustable Image & Layout)   */
/* ========================================= */
/* ========================================= */
/* ANTI-HIJACK (Adjustable Image & Layout)   */
/* ========================================= */

.igla-antihijack { 
    padding: 0; 
    background: var(--igla-bg-3); /* Seamless background for the whole section */
    overflow: hidden; 
}

.igla-antihijack-inner { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    min-height: 500px; 
}

/* --- LAYOUT CONTROLS (Set via HTML class) --- */

/* 1. If Image is set to RIGHT */
.igla-antihijack-inner.image-on-right .igla-antihijack-visual { 
    order: 2; 
    justify-content: flex-end; /* Snaps the reduced image tightly to the RIGHT edge */
}
.igla-antihijack-inner.image-on-right .igla-antihijack-copy { 
    order: 1; 
    /* Pushed 100px further from left edge, brought closer to the image */
    padding: 5rem 5% 5rem calc(6% + 100px); 
}

/* 2. If Image is set to LEFT */
.igla-antihijack-inner.image-on-left .igla-antihijack-visual { 
    order: 1; 
    justify-content: flex-start; /* Snaps the reduced image tightly to the LEFT edge */
}
.igla-antihijack-inner.image-on-left .igla-antihijack-copy { 
    order: 2; 
    /* Pushed 100px further from right edge, brought closer to the image */
    padding: 5rem calc(6% + 100px) 5rem 5%; 
}

/* --- PANELS --- */

/* Visual Container */
.igla-antihijack-visual {
    position: relative;
    display: flex;
    align-items: center; /* Centers the image vertically */
    width: 100%;
    height: 100%;
    background: transparent; /* Removed the grey box so it blends seamlessly */
}

/* The Image Itself */
.igla-antihijack-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures no distortion */
    display: block;
    /* max-width is controlled inline via HTML */
}

/* Text Content */
.igla-antihijack-copy { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    .igla-antihijack-inner { 
        grid-template-columns: 1fr; 
    }
    
    /* On mobile, ALWAYS put image on top for better reading flow */
    .igla-antihijack-inner.image-on-left .igla-antihijack-visual,
    .igla-antihijack-inner.image-on-right .igla-antihijack-visual { 
        order: 1; 
        min-height: 350px; 
        justify-content: center; /* Center image on mobile */
    }
    
    .igla-antihijack-inner.image-on-left .igla-antihijack-copy,
    .igla-antihijack-inner.image-on-right .igla-antihijack-copy { 
        order: 2; 
        padding: 4rem 6%; /* Reset padding for mobile */
    }

    /* Force image to full width on mobile for consistency */
    .igla-antihijack-img {
        max-width: 100% !important; 
    }
}

/* COMPARISON */
.igla-compare { padding: 90px 6%; background: var(--igla-bg-2); }
.igla-compare-inner { max-width: 1000px; margin: 0 auto; }
.igla-compare-header { text-align: center; margin-bottom: 3.5rem; }
.igla-cmp-table { width: 100%; border-collapse: collapse; background: var(--igla-bg); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.07); }
.igla-cmp-table th { padding: 1.2rem 1.4rem; font-size: 0.94rem; font-weight: 700; text-align: center; background: var(--igla-bg); border-bottom: 1px solid rgba(0,0,0,0.07); color: var(--igla-dark); }
.igla-cmp-table th:first-child { text-align: left; }
.igla-cmp-table th.igla-hl { background: rgba(212,43,30,0.06); color: var(--igla-red); }
.igla-cmp-table td { padding: 1rem 1.4rem; text-align: center; font-size: 0.92rem; color: var(--igla-mid); border-top: 1px solid rgba(0,0,0,0.05); }
.igla-cmp-table td:first-child { text-align: left; color: var(--igla-dark); font-weight: 500; }
.igla-cmp-table td.igla-hl { background: rgba(212,43,30,0.03); }
.igla-cmp-table tr:hover td { background: rgba(0,0,0,0.018); }
.igla-cmp-table tr:hover td.igla-hl { background: rgba(212,43,30,0.06); }
.igla-yes { color: #16a34a; font-weight: 600; }
.igla-no { color: rgba(0,0,0,0.18); }
.igla-opt { color: var(--igla-gray); font-size: 0.87rem; }
.igla-cmp-note { text-align: center; color: var(--igla-gray); font-size: 0.75rem; margin-top: 1.4rem; line-height: 1.7; }

/* BIG QUOTE */
.igla-big-quote { padding: 120px 6%; text-align: center; background: var(--igla-dark); position: relative; overflow: hidden; }
.igla-big-quote::before { content: '"'; position: absolute; top: -0.2em; left: 50%; transform: translateX(-50%); font-size: 30rem; font-weight: 900; color: rgba(255,255,255,0.02); line-height: 1; pointer-events: none; }
.igla-big-quote-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.igla-big-quote blockquote { font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 300; line-height: 1.35; letter-spacing: -0.025em; color: #fff; font-style: italic; margin: 0;}
.igla-big-quote blockquote strong { font-weight: 900; font-style: normal; color: var(--igla-red); }
.igla-big-quote-attr { margin-top: 2rem; font-size: 0.78rem; color: rgba(255,255,255,0.35); letter-spacing: 0.08em; text-transform: uppercase; }

/* ETHOS */
.igla-ethos { padding: 110px 6%; background: var(--igla-bg); }
.igla-ethos-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.igla-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.igla-trust-card { background: var(--igla-bg-2); border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; padding: 1.6rem; text-align: center; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.igla-trust-card:hover { border-color: rgba(212,43,30,0.25); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.igla-trust-icon { font-size: 2rem; margin-bottom: 0.8rem; }
.igla-trust-card h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--igla-dark); }
.igla-trust-card p { font-size: 0.76rem; color: var(--igla-gray); line-height: 1.55; }

/* FINAL CTA */
.igla-final-cta { padding: 120px 6%; padding-top: 60px; text-align: center; background: var(--igla-bg-2); position: relative; overflow: hidden; }
.igla-final-cta-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(212,43,30,0.07) 0%, transparent 65%); }
.igla-final-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.igla-final-cta h2 { font-size: clamp(2.2rem, 5.5vw, 4.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.032em; margin-bottom: 1.3rem; color: var(--igla-dark); }
.igla-final-cta h2 .igla-thin { font-weight: 100; color: var(--igla-gray); }
.igla-final-cta h2 .igla-red { color: var(--igla-red); }
.igla-final-cta h2 .igla-italic { font-style: italic; }
.igla-final-cta p { font-size: 1.1rem; color: var(--igla-mid); line-height: 1.78; margin-bottom: 3rem; }

/* IGLA RESPONSIVE */
@media (max-width: 900px) {
    .igla-problem-inner, .igla-ethos-inner, .igla-device-inner, .igla-lifestyle-inner, .igla-antihijack-inner { grid-template-columns: 1fr; gap: 3rem; }
    .igla-steps-row { grid-template-columns: 1fr 1fr; }
    .igla-steps-row::before { display: none; }
    .igla-products-grid { grid-template-columns: 1fr; max-width: 460px; }
    .igla-stats-grid { grid-template-columns: 1fr 1fr; }
    .igla-threat-grid { grid-template-columns: 1fr; }
    .igla-trust-grid { grid-template-columns: 1fr; }
    .igla-auth-grid { grid-template-columns: 1fr; }
    .igla-video-grid { grid-template-columns: 1fr; }
    .igla-cinematic { height: 420px; }
}
@media (max-width: 560px) {
    .igla-steps-row { grid-template-columns: 1fr; }
    .igla-stats-grid { grid-template-columns: 1fr 1fr; }
}

.titan_delay_3 { animation-delay: 0.6s; }
.titan_delay_4 { animation-delay: 0.8s; }

/* ======================================================= */
/* ABOUT US PAGE STYLES (Modern Apple-Bento Layout)        */
/* ======================================================= */

/* 1. Hero */
.about-hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: flex-end; /* Text sits nicely at the bottom */
    padding: 100px 5%;
    overflow: hidden;
    background: #000;
}

.about-hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}
.about-hero-bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}

.about-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.about-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    display: block;
    margin-bottom: 15px;
}

.about-hero h1 {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    flex: 1.2;
}
.about-hero h1 em { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.6); }

.about-hero-desc {
    flex: 1;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
}
.about-hero-desc p { margin-bottom: 15px; color: inherit; }
.about-hero-desc p:last-child { margin-bottom: 0; }

/* 2. Stats Grid */
.about-stats-wrapper {
    max-width: 1200px;
    margin: -40px auto 80px auto; /* Pulls it up slightly over the hero */
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
}

.about-stat-card {
    padding: 40px 30px;
    text-align: center;
    border-right: 1px solid #f0f0f0;
}
.about-stat-card:last-child { border-right: none; }

.stat-num {
    display: block;
    font-size: 48px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.03em;
    margin-bottom: 5px;
}
.stat-label {
    font-size: 14px;
    color: #86868b;
    line-height: 1.4;
}

/* 3. Mission Quote */
.about-mission {
    padding: 80px 20px;
    text-align: center;
}
.about-mission blockquote {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
    line-height: 1.4;
    color: #1d1d1f;
}
.about-mission blockquote::before, .about-mission blockquote::after {
    content: '"';
    color: #0071e3;
}

/* 4. Video Zone */
.about-video-zone {
    max-width: 1200px;
    margin: 0 auto 100px auto;
    padding: 0 20px;
}
.about-video-container {
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
.about-video-container video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 5. Our Story */
.about-story {
    padding: 0 20px 100px 20px;
}
.about-story-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #86868b;
    margin-bottom: 15px;
    border: 1px solid #d2d2d7;
    padding: 4px 12px;
    border-radius: 50px;
}
.story-title {
    font-size: 48px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 30px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.story-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #424245;
    margin-bottom: 20px;
}
.story-visual img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 6. What We Do (Pillars Bento Grid) */
.about-pillars {
    background: #fbfbfd;
    padding: 100px 20px;
}
.pillars-header {
    max-width: 1200px;
    margin: 0 auto 50px auto;
    text-align: center;
}
.pillars-header h2 { font-size: 48px; font-weight: 600; margin: 15px 0; letter-spacing: -0.02em; }
.pillars-header p { font-size: 21px; color: #86868b; }

.pillars-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.pillar-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}
.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.pillar-num {
    display: block; font-size: 12px; font-weight: 600; color: #d2d2d7; margin-bottom: 20px;
}
.pillar-icon {
    font-size: 32px; color: #0071e3; margin-bottom: 20px; display: block;
}
.pillar-card h4 { font-size: 20px; font-weight: 600; margin-bottom: 10px; color: #1d1d1f; }
.pillar-card p { font-size: 15px; color: #86868b; line-height: 1.5; }

/* 7. Why Pro ICE Closing */
.about-why {
    position: relative;
    padding: 120px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #000;
}
.why-bg { position: absolute; inset: 0; z-index: 0; }
.why-bg img { width: 100%; height: 100%; object-fit: cover; }
.why-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(1px); }
.why-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    color: #fff;
}
.why-content h2 { font-size: 48px; font-weight: 600; margin: 20px 0 30px 0; color: #fff; }
.why-content p { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.8); margin-bottom: 20px; }


/* --- MOBILE RESPONSIVE (About Page) --- */
@media (max-width: 900px) {
    .about-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .about-hero h1 { font-size: 42px; }
    
    .about-stats-wrapper { margin-top: -20px; }
    .about-stats-grid { grid-template-columns: 1fr; }
    .about-stat-card { border-right: none; border-bottom: 1px solid #f0f0f0; padding: 30px; }
    .about-stat-card:last-child { border-bottom: none; }
    
    .about-mission { padding: 50px 20px; }
    
    .about-story-inner { grid-template-columns: 1fr; gap: 40px; }
    .story-title { font-size: 36px; }
    
    .pillars-header h2 { font-size: 32px; }
    .pillars-grid { grid-template-columns: 1fr; }
    
    .about-why { padding: 80px 20px; }
    .why-content h2 { font-size: 36px; }
}