/* Resets */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}



/* Clip per-section so children animating from offscreen don't force scroll */
section, .me, .websites, .testimonials, header {
  position: relative; /* containing block for transforms */
  overflow-x: hidden;
}

/* Make headings safe for transform-based animation */
h1, h2, h3 .reveal-text {
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}



body {
  background: #000000; 
  cursor: none; /* Hide default cursor */
  overflow-x: hidden;
}
 

/* width of scrollbar */
body::-webkit-scrollbar {
  width: .5rem;
}

/* whole lentgh of scrollbar */
body::-webkit-scrollbar-track {
  background: #0c0c0c;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(94, 94, 94, 0.5));
  border-radius: 39px;
}



/* REPLACE the existing .cursor block with this block */
.cursor {
  position: fixed;
  width: 32px;
  height: 32px;
  background: url('/assets/icons/fire.webp') no-repeat center center;
  background-size: contain;
  pointer-events: none;           /* allow clicks to pass through to nav */
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease, opacity 0.25s ease;
  z-index: 999999;                /* must be above the nav */
  mix-blend-mode: normal;         /* ensure visibility on dark backgrounds */
  will-change: transform, opacity;
}

.cursor--hover {
  transform: translate(-50%, -50%) scale(1.45);
}

.cursor--hidden {
  opacity: 0;
}



/* Loading Screen section */

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-bar {
  width: 300px;
  height: 20px;
  background-color: #333;
  border-radius: 10px;
  position: relative; /* Needed for positioning the percentage text */
}

.loading-fill {
  height: 100%;
  background-color: #007bff;
  border-radius: 10px 0 0 10px;
}

.loading-percentage {
  position: absolute; /* Positioned within the loading bar */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the text */
  font-size: 18px;
  color: #fff;
}
  


/* =========================================
   1. CORE NAVIGATION STYLES
   ========================================= */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 90px; /* Fixed height for consistency */
    z-index: 50000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 5%; /* Side padding */
    box-sizing: border-box;
}

/* Glassmorphism Background */
nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 10, 10, 0.85); /* Dark tint */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: -1;
}

nav .logo img {
    width: 65px;
    height: auto;
    display: block;
}

/* =========================================
   2. DESKTOP MENU (.navbar)
   ========================================= */
/* Default: Hidden on Mobile */
.navbar {
    display: none;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px; /* Spacing between desktop links */
}

.navbar ul li a {
    text-decoration: none;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.navbar ul li a:hover {
    color: #FF5733; /* Brand Orange */
}

/* =========================================
   3. MENU TRIGGER (THE TECH SWITCH)
   ========================================= */
.icon-wrap {
    position: relative;
    z-index: 50001;
}

.aq-nav-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.aq-nav-trigger:hover {
    background: rgba(255, 87, 51, 0.15);
    border-color: #FF5733;
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.3);
}

.aq-menu-text {
    font-family: 'Raleway', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
}

.aq-nav-trigger i {
    font-size: 1.1rem;
    color: #FF5733;
}

/* =========================================
   4. MOBILE FULLSCREEN MENU (.nav-links)
   ========================================= */
.nav-links {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #050505, #111); /* Deep industrial black */
    z-index: 60000;
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; /* For fade transition */
    transition: opacity 0.4s ease;
}

/* Active State */
.nav-links.open {
    opacity: 1;
}

/* Close Button */
.nav-links .fa-chevron-down {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 24px;
    color: #fff;
    background: rgba(255,255,255,0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-links .fa-chevron-down:hover {
    background: rgba(255, 87, 51, 0.2);
    color: #FF5733;
    transform: rotate(180deg);
}

/* Mobile Menu Links */
.nav-links ul {
    text-align: center;
    padding: 0;
}

.nav-links ul li {
    list-style: none;
    margin: 20px 0;
}

.nav-links ul li a {
    position: relative;
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.3); /* Outline effect */
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s;
}

/* The Fill Effect */
.nav-links ul li a::before {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 0%;
    height: 100%;
    color: #FF5733;
    overflow: hidden;
    transition: width 0.5s ease;
    -webkit-text-stroke: 0px;
    border-right: 2px solid #FF5733; /* Leading edge cursor */
}

.nav-links ul li a:hover::before {
    width: 100%;
}

/* Mobile Logo */
.nav-links ul img {
    width: 80px;
    margin: 0 auto 40px auto;
    display: block;
    opacity: 0.8;
}

/* Social Icons */
.icons {
    margin-top: 40px;
    display: flex;
    gap: 25px;
    justify-content: center;
}

.icons a i {
    font-size: 1.5rem;
    color: #666;
    transition: 0.3s;
}

.icons a i:hover {
    color: #FF5733;
    transform: translateY(-3px);
}

/* =========================================
   5. RESPONSIVE LOGIC
   ========================================= */

/* Mobile Tweaks */
@media (max-width: 768px) {
    .aq-menu-text { display: none; } /* Hide 'MENU' text */
    
    .aq-nav-trigger {
        padding: 0;
        width: 45px; height: 45px;
        border-radius: 50%;
        justify-content: center;
    }
}

/* Desktop Logic */
@media (min-width: 1024px) {
    .navbar { display: block; } /* Show Desktop Nav */
    .icon-wrap { display: none; } /* Hide Trigger */
}



/* Hero section*/
/* --- HOME HERO SECTION (INDUSTRIAL UPGRADE) --- */
:root {
    --bg: #000;
}

/* --- HERO LAYOUT & SPACING FIX --- */
.hero {
    position: relative;
    /* Use dvh (Dynamic Viewport Height) for better mobile support */
    min-height: 100dvh; 
    display: flex;
    flex-direction: column; /* Better for centering */
    justify-content: center; /* Vertically Center */
    align-items: center;
    /* Adjusted padding: Less on top, more on bottom to visually balance */
    padding: 110px 20px 20px 20px; 
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* --- 1. BACKGROUND ENGINE (Preserved) --- */
.hero-bg {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    z-index: 1;
    opacity: 0.15;
    filter: blur(0.6px) saturate(0.8);
    pointer-events: none; /* Let clicks pass through */
}

.lightup {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* 1. The Particles (Stars/Sparks) */
.particle {
    position: absolute;
    background: #0080f8;
    border-radius: 50%;
    /* Start invisible, animation handles the fade in/out */
    opacity: 0; 
    /* ADD GLOW so they look like stars, not dust */
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    animation: floatParticle linear infinite;
}

/* Update the Animation to hit 100% Opacity */
@keyframes floatParticle {
    from { 
        transform: translateY(0); 
        opacity: 0; 
    }
    50% { 
        opacity: 1; /* MAX BRIGHTNESS */
    }
    to { 
        transform: translateY(-100px); 
        opacity: 0; 
    }
}

/* 2. The Dev Icons (Floating Logos) */
.dev-icon {
    position: absolute;
    /* Increase base opacity from 0.2 to 0.4 */
    opacity: 0.4; 
    color: #fff;
    /* Stronger Orange Glow to match your brand */
    filter: drop-shadow(0 0 10px rgba(255, 87, 51, 0.5));
    transition: transform 0.3s ease;
}

/* --- 2. HERO CONTENT (The New Look) --- */
.home-hero-container {
    position: relative;
    z-index: 10; /* Above background */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* BADGE */
.home-hero-badge {
    display: inline-block;
    background: rgba(255, 87, 51, 0.1);
    border: 1px solid rgba(255, 87, 51, 0.4);
    color: #FF5733;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 16px;
    border-radius: 4px;
    margin-bottom: 30px;
    backdrop-filter: blur(5px);
}

/* --- TITLE UPGRADE (Gradient) --- */
.home-hero-title {
    font-family: 'Raleway', sans-serif;
    /* Slightly reduced max size for elegance */
    font-size: clamp(2.8rem, 8vw, 6rem); 
    line-height: 1;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.gradient-text {
    /* Premium Gradient Effect */
    background: linear-gradient(90deg, #FF5733, #ff8800);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Fallback text shadow for glow */
    filter: drop-shadow(0 0 15px rgba(255, 87, 51, 0.3));
}

/* --- SUBTITLE FIX ("With" Problem) --- */
.home-hero-subtitle {
    font-family: 'Poppins', sans-serif;
    color: #ccc;
    font-size: clamp(1rem, 3vw, 1.3rem);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 40px auto;
    
    /* THE MAGIC FIX: Balances lines automatically */
    text-wrap: balance; 
}

/* Hide the manual break on desktop, show on mobile if needed */
.mobile-break {
    display: none;
}


@media (max-width: 768px) {
    .mobile-break {
        display: block; /* Forces "With" to the next line or keeps it grouped */
    }
    
    /* Pull content up slightly if it feels too low on small phones */
    .hero {
        justify-content: center; 
        padding-top: 100px; /* Tweak this if it still feels too high */
    }
}

/* The Typewriter Text Styling */
.typewriter-text-styled {
    font-weight: 700;
    color: #fff; /* Default color, JS overrides this */
    position: relative;
    display: inline-block;
    padding-right: 5px; /* Space for cursor */
}

/* Blinking Cursor (Applied by JS class 'cursor-blink') */
.cursor-blink::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 3px;
    background-color: #FF5733;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- 3. CTA BUTTON (The Final Boss) --- */
.home-hero-cta {
    margin-bottom: 20px;
}

.aq-story-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #FF5733;
    color: white;
    padding: 18px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    box-shadow: 0 5px 20px rgba(255, 87, 51, 0.3);
    font-size: 1rem;
}

.aq-story-btn-primary:hover {
    background: #ff7051;
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(255, 87, 51, 0.6);
}

/* --- 4. SIGNATURE (Preserved) --- */
.designed-by {
    position: fixed;
    bottom: 40px;
    left: 20px;
    transform: rotate(-90deg);
    transform-origin: left center;
    z-index: 9999;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Poppins', sans-serif;
    letter-spacing: 2px;
    font-size: 0.7rem;
    pointer-events: none; /* Don't block clicks */
}

.designed-by span::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 20px;
    background: rgba(255, 255, 255, 0.2);
}

/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 768px) {
    .hero {
        padding-top: 140px;
        align-items: flex-start; /* Move content up on mobile */
    }
    
    .home-hero-title {
        margin-bottom: 20px;
    }
    
    .aq-story-btn-primary {
        width: 100%; /* Full width button on mobile */
        justify-content: center;
    }
    
    .home-hero-badge {
        font-size: 0.7rem;
    }
}



/* Larger screens */
@media (min-width: 1300px) {

  .wrapper {
    position: relative;
    width: 100%; 
    height: 100px; /* Adjust height as needed */
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
  }

  .logo-container {
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    animation: scrollLarge 20s linear infinite; /* Different animation for large screens */
    will-change: transform; /* Optimize animation */
    overflow: hidden;
  }

  .logo {
    width: 100px; /* Adjust size as needed */
    margin: 0 25px; /* Adjust spacing as needed */
  }

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

.row {
  display: flex;
  flex-direction: column;
}



/* icon carousel*/

/* ======================================= */
/* 1. Main Container & Scroller Setup      */
/* ======================================= */
/* --- HOME TECH STREAM (SYSTEM STATUS BAR) --- */

.home-tech-stream {
    background: #050505; /* Deep black */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 2;
    height: 80px; /* Fixed height for the bar */
}

/* 1. The Scroll Container */
.home-track-container {
    width: 100%;
    overflow: hidden;
    /* Soft fade on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 2. The Track (The Mover) */
.home-tech-track {
    display: flex;
    width: max-content;
    animation: scrollHomeTech 40s linear infinite; /* Smooth, slow scroll */
}

/* Pause on hover */
.home-tech-track:hover {
    animation-play-state: paused;
}

/* 3. The Groups (To ensure perfect looping) */
.home-tech-group {
    display: flex;
    align-items: center;
    gap: 50px; /* Space between icons */
    padding-right: 50px; /* Match gap for seamless loop */
}

/* 4. The Items (Icons) */
.home-tech-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Consistent width */
    height: 60px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.home-tech-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5; /* Default dimmed state */
    filter: grayscale(100%); /* Start black & white */
    transition: all 0.4s ease;
}

/* HOVER STATE */
.home-tech-item:hover img {
    opacity: 1;
    filter: grayscale(0%) brightness(1.2); /* Full color + bright */
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

/* 5. Tooltip (Name Reveal) */
.home-tech-item::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    color: #FF5733; /* Brand Orange */
    background: rgba(0,0,0,0.8);
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    white-space: nowrap;
    z-index: 10;
}

.home-tech-item:hover::after {
    opacity: 1;
    bottom: -40px; /* Slide down slightly */
}

/* 6. The Label (Desktop Only) */
.home-tech-label {
    display: none; /* Hidden on mobile */
}

/* --- DESKTOP EXPANSION (Min-width 768px) --- */
@media (min-width: 768px) {
    .home-tech-stream {
        padding: 25px 0;
        height: 100px;
    }

    .home-tech-label {
        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: #050505;
        color: #FF5733;
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 2px;
        padding: 0 30px;
        z-index: 20; /* Sit on top of the scrolling track */
        border-right: 1px solid rgba(255, 87, 51, 0.3);
        box-shadow: 5px 0 20px #000;
    }
    
    .home-track-container {
        /* Add margin left so the track doesn't go under the label */
        margin-left: 180px; 
        width: calc(100% - 180px);
    }
}

/* 7. The Animation */
@keyframes scrollHomeTech {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Move exactly 50% because we have 2 groups */
}



.shadow {
  margin: 0 auto;


}

/* ME section */


/* --- HOME ABOUT SECTION (THE BLUEPRINT) --- */

.home-about-section {
    padding: 80px 20px;
    background: #000000; /* Slightly lighter than pure black */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.home-about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Mobile First: Stack Vertically */
    gap: 50px;
}

/* --- LEFT COLUMN: TEXT --- */
.home-about-label {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.85rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: 700;
}

.home-about-headline {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: #555; /* Dimmed "YOUR CRAFTSMANSHIP IS" */
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.home-about-headline .text-white { color: #fff; }
.home-about-headline .text-orange { color: #FF5733; }

.home-about-body {
    font-family: 'Poppins', sans-serif;
    color: #aaa;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 1rem;
    max-width: 600px;
}

.home-about-body strong {
    color: #fff;
    font-weight: 600;
}

/* The Link (Text Style) */
.home-about-link {
    display: inline-block;
    margin-top: 15px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #FF5733;
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.home-about-link:hover {
    color: #FF5733;
    padding-right: 15px; /* Arrow slide effect */
}

/* --- RIGHT COLUMN: SPEC CARDS --- */
.home-about-specs {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 Column */
    gap: 20px;
    width: 100%;
}

.home-spec-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 25px;
    border-radius: 8px; /* Industrial corners */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hover Effect for Cards */
.home-spec-card:hover {
    background: rgba(255, 87, 51, 0.08); /* Subtle orange tint */
    border-color: #FF5733;
    transform: translateY(-5px);
}

.home-spec-card i {
    font-size: 1.8rem;
    color: #FF5733;
    margin-bottom: 15px;
}

.home-spec-card h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.home-spec-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #888;
    margin: 0;
}

/* --- DESKTOP EXPANSION (Min-width 900px) --- */
@media (min-width: 900px) {
    .home-about-container {
        flex-direction: row; /* Switch to Split Screen */
        align-items: center;
        gap: 80px;
    }
    
    .home-about-text {
        flex: 1; /* Takes up 50% */
    }
    
    .home-about-specs {
        flex: 1; /* Takes up 50% */
        grid-template-columns: 1fr 1fr; /* 2x2 Grid */
    }
}


/* AQ ADVANTAGE SECTION */

 /* --- AQ ADVANTAGE (DIAGNOSTIC GRID) --- */
.aq-advantage-section {
    padding: 100px 20px;
    background: #050505; /* Deep black base */
    position: relative;
    overflow: hidden;
}

/* Background Glow */
.aq-advantage-section::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.1) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.advantage-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- HEADER --- */
.advantage-header {
    text-align: center; /* Center align looks more premium for this layout */
    margin-bottom: 60px;
    /* Ensure opacity starts at 1 in case JS fails */
    opacity: 1; 
}

.advantage-label {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 700;
}

.advantage-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1;
}

.advantage-title .text-orange { color: #FF5733; }

.advantage-subtitle {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* --- THE GRID SYSTEM --- */
.diagnostic-grid {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between rows */
}

/* Header Row (Labels) */
.diag-header-row {
    display: none; /* Mobile First: Hidden by default */
}

.aq-mini-logo {
    width: 24px;
    vertical-align: middle;
    margin-right: 8px;
}

/* --- THE ROWS (GLASS CARDS) --- */
.diag-row {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 Column Stack */
    gap: 15px;
    background: rgba(255, 255, 255, 0.03); /* Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
}

.diag-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* 1. Feature Column */
.col-feature h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.col-feature p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* 2. AQ Ignite Column (THE WINNER) */
.col-aq {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px;
    background: rgba(255, 87, 51, 0.05); /* Very faint orange bg */
    border-radius: 8px;
    border: 1px solid rgba(255, 87, 51, 0.1);
}

.col-aq i {
    color: #FF5733;
    font-size: 1.1rem;
}

/* 3. Others Column (THE LOSER) */
.col-others {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666; /* Dimmed text */
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    padding: 10px;
}

.col-others i {
    color: #444;
    font-size: 1rem;
}

/* --- DESKTOP EXPANSION (Min-Width 768px) --- */
@media (min-width: 768px) {
    /* Show Header Row */
    .diag-header-row {
        display: grid;
        grid-template-columns: 1.5fr 1.5fr 1.5fr; /* 3 Columns */
        padding: 0 30px 10px 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
        color: #666;
        letter-spacing: 1px;
        align-items: end;
    }

    .diag-row {
        grid-template-columns: 1.5fr 1.5fr 1.5fr; /* 3 Columns */
        padding: 20px 30px;
        align-items: center;
    }

    /* Reset Mobile Styles for Desktop */
    .col-aq {
        background: none;
        border: none;
        padding: 0;
    }

    .col-others {
        padding: 0;
        justify-content: flex-start; /* Align left for readability */
    }
}
   
/* --- MOBILE CONTEXT LABELS (The Fix) --- */
@media (max-width: 768px) {
    
    /* 1. Label the AQ Column */
    .col-aq {
        flex-direction: column; /* Stack label above icon */
        align-items: flex-start; /* Align Left */
        gap: 8px;
        position: relative;
        padding-top: 25px; /* Make room for the label */
    }

    .col-aq::before {
        content: "AQ IGNITE"; /* The Label */
        position: absolute;
        top: 8px;
        left: 10px;
        font-family: 'Courier New', monospace;
        font-size: 0.65rem;
        font-weight: 700;
        color: #FF5733; /* Brand Orange */
        letter-spacing: 1px;
        opacity: 0.8;
    }

    /* 2. Label the Others Column */
    .col-others {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        position: relative;
        padding-top: 25px;
        
        /* Add a top border to separate it visually from AQ */
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        margin-top: 10px;
        padding-left: 10px; /* Align with AQ box */
    }

    .col-others::before {
        content: "THE REST"; /* The Label */
        position: absolute;
        top: 8px;
        left: 10px; /* Align with content */
        font-family: 'Courier New', monospace;
        font-size: 0.65rem;
        font-weight: 700;
        color: #555; /* Dimmed Grey */
        letter-spacing: 1px;
    }
    
    /* Adjust icons/text for the new stacked layout */
    .col-aq i, .col-others i {
        font-size: 1.2rem; /* Make icons slightly visible */
        margin-bottom: 2px;
    }
    
    .col-aq span, .col-others span {
        text-align: left; /* Easier to read */
    }
}





/* ============================================= */
        /* 1. "MY PROCESS" SECTION STYLES              */
        /* ============================================= */

/* --- AQ PROCESS (THE PROTOCOL) --- */
/* --- AQ PROCESS (THE PROTOCOL) --- */
.aq-process-section {
    padding: 100px 20px;
    background: #000;
    position: relative;
    overflow: hidden; 
}

.process-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* HEADER */
.process-header {
    text-align: center;
    margin-bottom: 70px;
}

.process-label {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 700;
}

.process-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1;
}

.process-title .text-orange { color: #FF5733; }

.process-subtitle {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* GRID LAYOUT */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    perspective: 1000px; /* Essential for JS Tilt */
}

/* THE CARD (Using 'process-step' for JS, 'protocol-card' for Style) */
.process-step {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    transform-style: preserve-3d; /* Essential for JS Tilt */
}

/* Hover Effect */
.process-step:hover {
    border-color: #FF5733;
    background: rgba(255, 87, 51, 0.05);
    box-shadow: 0 0 30px rgba(255, 87, 51, 0.15);
}

/* 1. RENAMED: THE GIANT WATERMARK NUMBER */
.protocol-bg-number {
    position: absolute;
    top: -20px;
    right: -10px;
    font-family: 'Raleway', sans-serif;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
    transition: color 0.3s ease;
    z-index: 0;
    transform: translateZ(10px); /* 3D Depth */
}

.process-step:hover .protocol-bg-number {
    color: rgba(255, 87, 51, 0.1);
}

/* 2. RENAMED: ICON */
.protocol-icon {
    font-size: 2rem;
    color: #FF5733;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
    transform: translateZ(20px); /* 3D Pop */
}

/* 3. RENAMED: CONTENT (Fixes your clash issue) */
.protocol-content {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    transform: translateZ(30px); /* 3D Pop */
}

.protocol-content h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.protocol-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 4. RENAMED: FOOTER */
.protocol-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    transform: translateZ(20px); /* 3D Pop */
}

.protocol-footer span {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 1px;
    font-weight: 700;
}

.process-step:hover .protocol-footer span {
    color: #FF5733;
}

/* CTA CENTERED */
.process-cta {
    text-align: center;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .process-step {
        padding: 30px 20px;
        min-height: auto;
    }
}



/* 4th Section begins here */
/* =================================================================
   PART 1: HOMEPAGE FEATURED PROJECTS (Scoped: home-featured-)
   ================================================================= */

.home-featured-section {
    padding: 100px 20px;
    background: #050505;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.home-featured-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* HEADER */
.home-featured-header {
    text-align: center;
    margin-bottom: 60px;
}

.home-featured-label {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 700;
}

.home-featured-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1;
}

.home-featured-title .text-orange { color: #FF5733; }

.home-featured-subtitle {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* GRID LAYOUT */
.home-featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

/* THE CARD */
.home-featured-card {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.home-featured-card:hover {
    border-color: #FF5733;
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* IMAGE AREA */
.home-featured-img-wrap {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.home-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: brightness(0.85);
}

.home-featured-card:hover .home-featured-img {
    transform: scale(1.05);
    filter: brightness(1);
}

/* OVERLAY */
.home-featured-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.home-featured-card:hover .home-featured-overlay {
    opacity: 1;
}

.home-overlay-btn {
    color: #fff;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    border: 1px solid #FF5733;
    padding: 12px 24px;
    border-radius: 4px;
    background: rgba(255, 87, 51, 0.2);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* SPECS AREA */
.home-featured-specs {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.home-specs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 10px;
}

.home-specs-header h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.home-specs-badge {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: #FF5733;
    background: rgba(255, 87, 51, 0.08);
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 87, 51, 0.2);
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}

.home-specs-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #999;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* TAGS */
.home-specs-tags {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.home-specs-tags span {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: #777;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.home-specs-tags span i {
    color: #FF5733;
}

.home-featured-cta { text-align: center; }

/* Desktop Grid */
@media (min-width: 1024px) {
    .home-featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =================================================================
   AQ IGNITE: TERMINAL MODALS (High-End Popup)
   ================================================================= */

/* 1. The Dark Overlay (Background) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Deep focus mode */
    backdrop-filter: blur(8px); /* Blur the homepage behind it */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    z-index: 9999;
    padding: 20px; /* Safe spacing on mobile */
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* 2. The Modal Box (The Interface) */
.modal-content {
    background-color: #0a0a0a; /* Almost Black */
    padding: 0; /* ZERO padding so image hits the edges */
    border-radius: 12px;
    border: 1px solid rgba(255, 87, 51, 0.3); /* Brand Orange Border */
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(255, 87, 51, 0.1); /* Subtle Glow */
    width: 100%;
    max-width: 700px; /* Optimal reading width */
    max-height: 90vh; /* Prevents being taller than screen */
    overflow-y: auto; /* Scroll inside if content is long */
    position: relative;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* 3. The Close Button (X) */
.modal-close {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 10;
    line-height: 1;
}

.modal-close:hover {
    background: #FF5733;
    border-color: #FF5733;
    transform: rotate(90deg);
}

/* 4. The Flush Image */
.modal-image {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    object-fit: cover;
    max-height: 350px; /* Prevents image from taking whole screen */
}

/* 5. The Text Wrapper (Provides the padding) */
.modal-text-wrap {
    padding: 40px;
}

.modal-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.8rem;
    margin: 0 0 15px 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.modal-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #bbb; /* Softer grey for reading */
    margin-bottom: 30px;
}

/* 6. The Action Button */
.modal-actions {
    text-align: left; /* Keep high-end alignment */
}

.modal-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid #FF5733;
    color: #FF5733;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.modal-btn i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.modal-btn:hover {
    background: #FF5733;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.4);
}

.modal-btn:hover i {
    transform: translateX(4px);
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .modal-text-wrap {
        padding: 25px;
    }
    .modal-title {
        font-size: 1.5rem;
    }
}

/* TESTIMONIALS SECTION */

/* ============================================= */
/* TESTIMONIALS SECTION STYLING                */
/* ============================================= */
/* =================================================================
   AQ IGNITE: FIELD REPORTS (Testimonials)
   ================================================================= */

.home-feedback-section {
    padding: 100px 20px;
    background: #000;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden; /* Prevents horizontal scroll issues */
}

.home-feedback-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* HEADER */
.home-feedback-header {
    text-align: center;
    margin-bottom: 60px;
}

.home-feedback-label {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 700;
}

.home-feedback-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1;
}

.home-feedback-title .text-orange { color: #FF5733; }

.home-feedback-subtitle {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* --- SLIDER SYSTEM --- */
.feedback-system-wrapper {
    position: relative;
    margin-bottom: 50px;
}

/* 1. The Mask (Visible Area) */
.testimonial-slider-wrapper {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

/* 2. The Track (Flexbox for sliding) */
.testimonial-slider {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* No gap here, we handle spacing with padding in the card */
}

/* --- THE CARD STYLE (Specific & Functional) --- */
.testimonial-card {
    /* FUNCTIONAL STYLES (Required for JS) */
    flex: 0 0 100%; /* Default mobile: 1 slide visible */
    width: 100%;
    padding: 10px; /* Spacing between slides */
    box-sizing: border-box;
}

/* THE VISUAL CARD (Inside the slider wrapper) */
.home-feedback-card {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px; /* Height consistency */
    position: relative;
    transition: all 0.3s ease;
}

.home-feedback-card:hover {
    border-color: #FF5733;
    background: rgba(255, 255, 255, 0.03);
}

/* BACKGROUND QUOTE MARK */
.home-feedback-card::before {
    content: '"';
    position: absolute;
    top: 20px; right: 30px;
    font-family: 'Times New Roman', serif;
    font-size: 6rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* METADATA (Top Row) */
.feedback-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.feedback-id {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #666;
    letter-spacing: 1px;
    font-weight: 700;
}

.feedback-stars i {
    color: #FF5733;
    font-size: 0.7rem;
    margin-left: 2px;
}

/* THE QUOTE */
.feedback-quote {
    font-family: 'Raleway', sans-serif;
    font-size: 1.15rem;
    color: #eee;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    flex-grow: 1;
}

/* THE AUTHOR (Bottom Row) */
.feedback-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-img {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 87, 51, 0.3);
    object-fit: cover;
}

.author-info h4 {
    font-family: 'Raleway', sans-serif;
    color: #fff;
    font-size: 1rem;
    margin: 0;
    font-weight: 700;
}

.author-info p {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.7rem;
    margin: 3px 0 0 0;
    text-transform: uppercase;
}

.verified-badge {
    color: #2ecc71; /* Green check */
    font-size: 1.2rem;
    opacity: 0.8;
    margin-left: auto; /* Pushes check to the far right */
}

/* --- CONTROLS (Buttons) --- */
.feedback-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.control-divider {
    width: 40px; height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.slider-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 50px; height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center; justify-content: center;
    font-size: 1rem;
}

.slider-btn:hover {
    background: #FF5733;
    border-color: #FF5733;
    transform: scale(1.1);
}

/* CTA */
.home-feedback-cta { text-align: center; margin-top: 50px; }

/* --- RESPONSIVE LOGIC (Matches Client.js) --- */
@media (min-width: 768px) {
    .testimonial-card {
        flex: 0 0 50%; /* Show 2 cards on tablet/desktop */
    }
}







       /* lead magnet: homepage & services page */ 
/* --- AQ DIAGNOSTIC (LEAD MAGNET) --- */
.home-audit-section {
    padding: 100px 20px;
    background: #000;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.home-audit-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* THE BLACK BOX CARD */
.audit-terminal-card {
    background: linear-gradient(145deg, #0a0a0a, #050505);
    border: 1px solid rgba(255, 87, 51, 0.3); /* Brand Orange Border */
    border-radius: 12px;
    padding: 60px;
    display: flex;
    flex-direction: column; /* Mobile First: Stack */
    align-items: center;
    gap: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(255, 87, 51, 0.05);
}

/* Background Glow Effect */
.audit-terminal-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 300px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 51, 0.05));
    pointer-events: none;
}

/* --- LEFT CONTENT --- */
.audit-content {
    flex: 1;
    z-index: 2;
    text-align: left;
    width: 100%;
}

.audit-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.2);
    color: #2ecc71; /* Terminal Green */
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.audit-badge i { font-size: 0.8rem; }

.audit-headline {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.audit-headline .text-orange { color: #FF5733; }

.audit-sub {
    font-family: 'Poppins', sans-serif;
    color: #aaa;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 500px;
}

/* CHECKLIST */
.audit-checklist {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
}

.check-item i {
    color: #FF5733;
    font-size: 1.1rem;
    background: rgba(255, 87, 51, 0.1);
    padding: 8px;
    border-radius: 4px;
}

/* BUTTON */
.audit-btn {
    display: inline-block;
    background: #FF5733;
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(255, 87, 51, 0.3);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.audit-btn:hover {
    background: #fff;
    color: #FF5733;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 87, 51, 0.5);
}

.audit-btn i { margin-left: 10px; }

.audit-disclaimer {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #666;
    margin: 0;
}

/* --- RIGHT VISUAL (CSS RADAR) --- */
.audit-visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 250px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* The Grid Lines */
.scan-grid {
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 50%; /* Circle */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(255, 87, 51, 0.1);
}

/* The Animated Scan Line */
.scan-line {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 87, 51, 0.5) 30deg, transparent 60deg);
    animation: radarSpin 3s linear infinite;
}

.scan-icon {
    font-size: 3rem;
    color: #fff;
    z-index: 2;
}

.visual-label {
    margin-top: 20px;
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.8rem;
    letter-spacing: 2px;
    animation: blinkText 2s infinite;
}

/* ANIMATIONS */
@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes blinkText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- DESKTOP EXPANSION (Min-Width 900px) --- */
@media (min-width: 900px) {
    .audit-terminal-card {
        flex-direction: row; /* Switch to Side-by-Side */
        padding: 60px;
        gap: 60px;
    }
    
    .audit-content {
        text-align: left;
    }
    
    .audit-visual {
        min-height: 300px;
    }
}




/* Footer section */
/* ============================================= /
/ UPGRADED FOOTER STYLES                        /
/ ============================================= */
/* ========================================= */
/* AQ SYSTEM FOOTER (High Class Revamp)      */
/* ========================================= */
/* ========================================= */
/* AQ SYSTEM FOOTER (High Class Revamp)      */
/* ========================================= */

.aq-footer-system {
    background-color: #050505; /* Deep Black */
    border-top: 1px solid rgba(255, 87, 51, 0.2); /* Orange Divider */
    padding: 60px 20px 40px 20px;
    position: relative;
    overflow: hidden;
    z-index: 10;
    margin-top: 80px; /* Separation from content */
}

/* Glowing Top Line */
.footer-signal-line {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, #FF5733, transparent);
    box-shadow: 0 0 15px #FF5733;
    opacity: 0.6;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- THE GRID LAYOUT --- */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile First: Stacked */
    gap: 50px;
    margin-bottom: 60px;
}

/* HEADERS (Homepage Style: Clean Text) */
.footer-label {
    font-family: 'Courier New', monospace;
    color: #FF5733; /* Orange */
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 25px;
    font-weight: 700;
    text-transform: uppercase;
}

/* COLUMN 1: IDENTITY */
.brand-col {
    max-width: 100%;
}

.footer-logo {
    margin-bottom: 20px;
}

/* LOGO IMAGE SIZING */
.footer-brand-img {
    height: 60px; /* Adjust if needed */
    width: auto;
    display: block;
}

.footer-mission {
    font-family: 'Poppins', sans-serif;
    color: #999;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 400px;
}

/* SYSTEM STATUS WIDGET */
.system-status-widget {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 15px;
    border-radius: 4px;
}

.status-light {
    width: 8px; height: 8px;
    background-color: #2ecc71; /* Green Status */
    border-radius: 50%;
    box-shadow: 0 0 8px #2ecc71;
}
.status-light.pulse { animation: statusPulse 2s infinite; }

.status-text {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem; color: #aaa; font-weight: 700; letter-spacing: 1px;
}
.status-active { color: #2ecc71; }

@keyframes statusPulse {
    0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; }
}

/* COLUMN 2: NAV LINKS */
.footer-links {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columns of links */
    gap: 15px;
}

.footer-links a {
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s;
    display: inline-block;
}
.footer-links a:hover { color: #FF5733; transform: translateX(5px); }

/* COLUMN 3: SOCIALS & CTA */
.footer-social-grid {
    display: flex; gap: 15px; margin-bottom: 30px;
}

.social-btn {
    width: 45px; height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; border-radius: 4px; transition: 0.3s; font-size: 1.1rem;
    text-decoration: none;
}

.social-btn:hover {
    border-color: #FF5733; color: #FF5733;
    background: rgba(255, 87, 51, 0.1);
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.2);
}

.footer-cta-box {
    border-left: 2px solid #333;
    padding-left: 15px;
}

.cta-label {
    display: block;  font-family: 'Raleway', sans-serif;
    font-size: 0.65rem; color: #666; margin-bottom: 5px; letter-spacing: 1px;
}
.cta-link {
    color: #FF5733; font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: 0.85rem; text-decoration: none; transition: 0.3s;
}
.cta-link:hover { color: #fff; letter-spacing: 0.5px; }

/* --- BOTTOM BAR --- */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    display: flex;
    flex-direction: column; /* Mobile: Stacked */
    gap: 30px;
    align-items: center;
    text-align: center;
}

.copyright-info p {
    font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: #555;
    margin-bottom: 10px; margin-top: 0;
}

.legal-links { font-family: 'Courier New', monospace; font-size: 0.75rem; }
.legal-links a { color: #777; text-decoration: none; transition: 0.3s; }
.legal-links a:hover { color: #fff; }
.separator { margin: 0 10px; color: #333; }

/* TACTICAL JUMP BUTTON */
#back-to-top-btn {
    background: transparent;
    border: 1px solid #FF5733;
    color: #FF5733;
    padding: 10px 20px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.3s;
    display: none; /* JS controls this */
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    margin: 0;
}

#back-to-top-btn:hover {
    background: #FF5733;
    color: #000;
    box-shadow: 0 0 15px #FF5733;
}

/* --- ANIMATION CLASSES --- */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- DESKTOP EXPANSION (Min-width 900px) --- */
@media (min-width: 900px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr; /* 3 Columns layout */
        text-align: left;
    }

    .footer-bottom-bar {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .copyright-info { text-align: left; }
}



/* 22222222222222222222222222222222222222222222222222222222222222 PAGE */



/* Basic styling for character selection section */


/* ========================================= */
/* PAGE: MY STORY (Namespace: abt-)          */
/* ========================================= */

/* --- SAFE SCROLL LOCK (Specific to this page) --- */
body.abt-system-lock {
    overflow: hidden;
    height: 100vh;
}

/* --- SECTION 1: HERO (Profile Auth) --- */
.abt-hero-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 20px;
    background-color: #050505;
}

/* BACKGROUND (The "Industrial Luxury" Grid) */
.abt-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}

/* HERO CARD CONTAINER */
.abt-card-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
}

/* HERO HEADER */
.abt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.abt-id {
    font-family: 'Courier New', monospace;
    color: #666;
    font-size: 0.8rem;
    font-weight: 700;
}

.abt-status {
    font-family: 'Courier New', monospace;
    color: #2ecc71; /* Green */
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 6px; height: 6px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 5px #2ecc71;
}
.status-dot.pulse { animation: abt-pulse 2s infinite; }
@keyframes abt-pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* HERO IMAGE */
.abt-portrait-frame {
    width: 160px;
    height: 180px;
    margin: 0 auto 25px auto;
    position: relative;
    padding: 5px;
}

.abt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) contrast(1.1); 
    border-radius: 4px;
}

.abt-scan-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 5px;
    background: rgba(255, 87, 51, 0.5);
    box-shadow: 0 0 10px #FF5733;
    animation: abt-scan 3s linear infinite;
    z-index: 2;
    opacity: 0.6;
    pointer-events: none;
}
@keyframes abt-scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* CORNERS */
.abt-corner {
    position: absolute;
    width: 10px; height: 10px;
    border-color: #FF5733;
    border-style: solid;
    transition: 0.3s;
}
.c-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.c-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.c-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.c-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.abt-card-container:hover .abt-corner { width: 15px; height: 15px; }

/* HERO TEXT */
.abt-name {
    font-family: 'Raleway', sans-serif;
    font-size: 2.2rem;
    color: #fff;
    font-weight: 800;
    margin: 0 0 5px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.abt-role {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 25px;
}

/* HERO STATS */
.abt-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
}

.abt-stat { display: flex; flex-direction: column; gap: 5px; }

.stat-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    color: #666;
    font-weight: 700;
}

.stat-val {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
}

/* HERO BUTTON */
.abt-action-btn {
    width: 100%;
    padding: 16px;
    background: #FF5733;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 1px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.abt-action-btn:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.4);
}

.btn-loading { display: none; }


/* ========================================= */
/* --- SECTION 2: INTEL & DECK ---           */
/* ========================================= */

.abt-intel-section {
    padding: 100px 20px;
    background-color: #080808;
    min-height: 100vh;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.abt-intel-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    width: 100%;
}

@media (min-width: 900px) {
    .abt-intel-container {
        grid-template-columns: 1fr 1fr; /* Side by Side on Desktop */
        gap: 60px;
        align-items: center;
    }
}


/* ========================================= */
/* CSS UPDATES: ANIMATION & BADGES           */
/* ========================================= */

/* --- 1. NEW MINIMALIST TAGLINE (No Box) --- */
.abt-tagline {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #FF5733; /* Subtle technical grey */
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
    display: block;
}

/* --- 2. HERO "ACCESS GRANTED" STATE --- */
/* When this class is added via JS, the background goes dark */
.abt-hero-section.access-granted::before {
    opacity: 0; /* Hides the grid/gradient background */
    transition: opacity 0.8s ease;
}

.abt-hero-section.access-granted {
    background-color: #000; /* Pure black background */
}



.abt-section-title {
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 40px;
    font-weight: 800;
    text-transform: uppercase;
}
.text-orange { color: #FF5733; }
/* ========================================= */
/* AQ SYSTEM CORE (GAUGES + TERMINAL)        */
/* ========================================= */

.abt-core-section {
    padding: 100px 20px;
    background-color: #080808;
    min-height: 100vh;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.abt-core-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    width: 100%;
}

@media (min-width: 900px) {
    .abt-core-container {
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        align-items: start;
    }
}

/* --- LEFT COL: REACTOR GAUGES --- */
/* --- LEFT COL: REACTOR GAUGES (Upgraded) --- */
.gauge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 Grid */
    gap: 40px;
    justify-items: center; /* Center gauges in their cells */
}

.gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 140px; /* Fixed width for container */
}

/* THE REACTOR HOUSING (New) */
.gauge-circle {
    position: relative;
    width: 130px; /* Slightly larger for housing */
    height: 130px;
    margin-bottom: 20px;
    /* Creates the dark metallic depth */
    background: radial-gradient(circle at center, #111 40%, #050505 70%);
    border-radius: 50%;
    /* Deep inset shadow + outer rim shadow */
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.9), /* Inner depth */
        0 5px 15px rgba(0,0,0,0.5); /* Outer presence */
    border: 1px solid rgba(255, 255, 255, 0.05); /* Subtle rim */
    padding: 10px; /* Spacing between housing and track */
}

/* SVG STYLES */
.gauge-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start from top */
    overflow: visible; /* Allow glow to spill out */
}

/* The inactive track */
.gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.02); /* Very faint track */
    stroke-width: 4; /* Thinner than the fill */
}

/* The active "Plasma" fill */
.gauge-fill {
    fill: none;
    stroke: #FF5733;
    stroke-width: 6; /* Thicker for impact */
    stroke-linecap: round;
    /* Circumference of r=45 is approx 283 */
    stroke-dasharray: 283;
    stroke-dashoffset: 283; /* Start empty (JS animates this) */
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
    
    /* THE "PLASMA" EFFECT: Stacked drop shadows for intense glow */
    filter: 
        drop-shadow(0 0 2px #FF5733) 
        drop-shadow(0 0 5px #FF5733) 
        drop-shadow(0 0 10px rgba(255, 87, 51, 0.5));
}

/* CENTER DIGITAL READOUT (Upgraded) */
.gauge-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* Create a recessed digital screen look */
    width: 70px; height: 70px;
    background: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 10px #000; /* Deep inset */
    border: 1px solid rgba(255, 87, 51, 0.1); /* Subtle orange rim on screen */
    
    /* Text Styles */
    font-family: 'Teko', sans-serif; 
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 5px rgba(255, 87, 51, 0.5); /* Glowing text */
}
.unit { font-size: 0.9rem; color: #FF5733; margin-left: 2px; opacity: 0.8; }

.gauge-label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.7rem;
    color: #888;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 5px;
}


/* --- RIGHT COL: MISSION TERMINAL --- */
.abt-bio-terminal {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid #FF5733;
    border-radius: 6px;
    padding: 35px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.bio-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 20px;
    margin-bottom: 25px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 1px;
}

.bio-status { color: #ff4444; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.blink-dot { width: 8px; height: 8px; background: #ff4444; border-radius: 50%; animation: recBlink 1s infinite; }
@keyframes recBlink { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }

.bio-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.bio-text-block p {
    font-family: 'Poppins', sans-serif;
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.bio-text-block strong { color: #fff; font-weight: 600; }

.highlight-text {
    background: rgba(255, 87, 51, 0.1);
    color: #FF5733;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: 600;
}
/* ========================================= */
/* MISSION TERMINAL: FOOTER COMPLETE         */
/* ========================================= */

.bio-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align top */
}

/* --- 1. SIGNATURE (Left) --- */
.bio-signature {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Courier New', monospace;
}

.sig-label { 
    font-size: 0.65rem; 
    color: #666; 
}

.sig-name { 
    font-size: 0.85rem; 
    color: #fff; 
    font-weight: 700; 
    letter-spacing: 1px; 
}

/* --- 2. ACTIONS CONTAINER (Right) --- */
.bio-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align to right */
    gap: 15px;
}

/* --- 3. DATA CHIP BUTTON --- */
.bio-chip-btn {
    display: flex;
    align-items: center;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 180px;
    position: relative;
    overflow: hidden;
}

.bio-chip-btn:hover {
    border-color: #FF5733;
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.15);
}

.chip-icon {
    font-size: 1.2rem;
    color: #444;
    margin-right: 12px;
    transition: 0.3s;
}
.bio-chip-btn:hover .chip-icon { color: #fff; }

.chip-content {
    display: flex;
    flex-direction: column;
    margin-right: auto;
}

.chip-label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.chip-sub {
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    color: #666;
    margin-top: 2px;
}
.bio-chip-btn:hover .chip-sub { color: #FF5733; }

.chip-arrow {
    font-size: 0.8rem;
    color: #FF5733;
    opacity: 0.5;
    transition: 0.3s;
}
.bio-chip-btn:hover .chip-arrow { opacity: 1; transform: translateY(2px); }

/* --- 4. THE STAMP (Restored) --- */
.bio-stamp {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(46, 204, 113, 0.4); /* Faint Green */
    border: 2px solid rgba(46, 204, 113, 0.4);
    padding: 5px 10px;
    text-transform: uppercase;
    transform: rotate(-5deg);
    letter-spacing: 2px;
    margin-top: 5px; /* Spacing from button */
    pointer-events: none; /* Just for looks */
}

/* --- 5. MOBILE FIXES --- */
@media (max-width: 768px) {
    .bio-footer {
        flex-direction: column;
        gap: 25px;
    }

    .bio-actions {
        width: 100%;
        align-items: flex-start; /* Align left on mobile */
    }

    .bio-chip-btn {
        width: 100%;
    }
    
    .bio-stamp {
        align-self: flex-end; /* Keep stamp to the right or bottom */
    }
}


/* Timeline */

/* ========================================= */
/* AQ SYSTEM LOG (FINAL PRODUCTION CSS)      */
/* ========================================= */

/* --- 1. SECTION CONTAINER --- */
.aq-log-section {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    padding: 0 20px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    position: relative;
}

/* --- 2. HEADER --- */
.aq-log-header {
    margin-bottom: 60px;
    padding-left: 0; /* Centered on Mobile */
    text-align: center;
}

/* Desktop Adjustment */
@media (min-width: 768px) {
    .aq-log-header { 
        text-align: left; 
        padding-left: 50px; 
    }
}

.aq-log-tagline {
    font-family: 'Courier New', monospace; 
    font-size: 0.85rem; 
    color: #666;
    font-weight: 700; 
    margin-bottom: 10px; 
    letter-spacing: 1px; 
    display: block;
}

.aq-log-title {
    font-family: 'Raleway', sans-serif; 
    font-size: 2.5rem; 
    color: #fff;
    margin: 0; 
    text-transform: uppercase; 
    font-weight: 800; 
    line-height: 1;
}

.text-orange { color: #FF5733; }
.text-green { color: #2ecc71; }


/* --- 3. RAIL & PULSE (THE SPINE) --- */
.aq-log-wrapper { 
    position: relative; 
    padding-left: 20px; /* Space for Rail on Mobile */
}

@media (min-width: 768px) { 
    .aq-log-wrapper { padding-left: 50px; } 
}

.aq-log-rail {
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; /* Hugs Left Edge on Mobile */
    width: 3px; 
    background: rgba(255, 255, 255, 0.05); 
    z-index: 0; 
    overflow: hidden;
}

@media (min-width: 768px) { 
    .aq-log-rail { left: 24px; /* Move inward for Desktop */ } 
}

/* THE NEON PULSE ANIMATION */
.aq-rail-pulse {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 250px;
    background: linear-gradient(to bottom, transparent, #FF5733, #ff8c00, transparent);
    animation: logPulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 0 0 25px #FF5733;
    opacity: 1;
}

@keyframes logPulse {
    0% { top: -40%; opacity: 0; }
    30% { opacity: 1; }
    100% { top: 120%; opacity: 0; }
}


/* --- 4. LOG NODES (SOLDERING POINTS) --- */
.aq-log-item { 
    position: relative; 
    margin-bottom: 70px; 
    padding-left: 25px; /* Distance from Rail */
}

@media (min-width: 768px) { 
    .aq-log-item { padding-left: 40px; } 
}

.aq-log-node {
    position: absolute; 
    left: -25px; /* Center on Mobile Rail */
    top: 25px; 
    width: 12px; height: 12px;
    background: #000; 
    border: 2px solid #444; 
    border-radius: 50%; 
    z-index: 2;
    box-shadow: 0 0 15px rgba(0,0,0,1); 
    transition: 0.3s;
}

@media (min-width: 768px) { 
    .aq-log-node { left: -31px; } /* Center on Desktop Rail */
}

/* NODE VARIANTS */
.pulse-node {
    border-color: #FF5733; 
    background: #FF5733;
    box-shadow: 0 0 25px rgba(255, 87, 51, 0.8);
}
.active-node {
    border-color: #2ecc71; 
    background: #2ecc71;
    box-shadow: 0 0 25px rgba(46, 204, 113, 0.8);
}


/* --- 5. CARDS (AMBIENT LIGHTING SYSTEM) --- */
.aq-log-card {
    /* Base: Dark Blue/Grey Ambient */
    background: linear-gradient(145deg, rgba(15, 20, 25, 0.95), rgba(5, 5, 10, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 2px solid rgba(100, 180, 255, 0.3); /* Cool Blue Accent */
    border-radius: 4px;
    padding: 25px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 20px rgba(0, 100, 255, 0.05);
}

@media (min-width: 768px) { 
    .aq-log-card { padding: 35px; } 
}

.aq-log-card:hover {
    transform: translateX(5px);
    border-color: rgba(100, 180, 255, 0.5);
    box-shadow: 0 10px 40px rgba(0, 100, 255, 0.15), inset 0 0 30px rgba(0, 100, 255, 0.1);
}

/* HIGHLIGHT CARD (ORANGE AMBIENT) */
.highlight-card {
    border-left-color: #FF5733;
    background: linear-gradient(145deg, rgba(30, 15, 10, 0.95), rgba(10, 5, 5, 0.95));
    box-shadow: inset 0 0 30px rgba(255, 87, 51, 0.08);
}
.highlight-card:hover {
    border-color: rgba(255, 87, 51, 0.5);
    box-shadow: 0 10px 50px rgba(255, 87, 51, 0.2), inset 0 0 40px rgba(255, 87, 51, 0.15);
}

/* ACTIVE CARD (GREEN AMBIENT) */
.active-card {
    border-left-color: #2ecc71;
    background: linear-gradient(145deg, rgba(10, 30, 15, 0.95), rgba(5, 10, 5, 0.95));
    box-shadow: inset 0 0 30px rgba(46, 204, 113, 0.08);
}
.active-card:hover {
    border-color: rgba(46, 204, 113, 0.5);
    box-shadow: 0 10px 50px rgba(46, 204, 113, 0.2), inset 0 0 40px rgba(46, 204, 113, 0.15);
}


/* --- 6. TYPOGRAPHY --- */
.log-meta {
    font-family: 'Courier New', monospace; 
    font-size: 0.7rem; 
    color: #888;
    margin-bottom: 15px; 
    letter-spacing: 1px; 
    font-weight: 700;
}
.log-heading {
    font-family: 'Raleway', sans-serif; 
    font-size: 1.4rem; 
    color: #fff;
    margin-bottom: 15px; 
    font-weight: 800; 
    text-transform: uppercase;
}
@media (min-width: 768px) { 
    .log-heading { font-size: 1.6rem; } 
}
.log-text {
    font-family: 'Poppins', sans-serif; 
    color: #ccc; 
    font-size: 0.9rem; 
    line-height: 1.7;
}
.log-text strong { 
    color: #fff; 
    font-weight: 600; 
}


/* --- 7. IMAGES & COLOR GRADING --- */
.log-img-container {
    margin-top: 25px; 
    border-radius: 4px; 
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    position: relative;
    height: 200px;
}

.log-img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
    /* High contrast, desaturated but NOT grayscale */
    filter: contrast(1.2) saturate(0.5) brightness(0.8);
    transition: 0.5s;
}

/* COLOR OVERLAYS (Mix Blend Mode) */
.log-color-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2; opacity: 0.6; transition: 0.5s;
    mix-blend-mode: overlay; 
}
/* Overlay Colors */
.blue-grade { background: linear-gradient(45deg, #00c6ff, transparent); }
.orange-grade { background: linear-gradient(45deg, #FF5733, transparent); }
.green-grade { background: linear-gradient(45deg, #2ecc71, transparent); }

/* Hover Effects */
.aq-log-card:hover .log-img { filter: contrast(1.1) saturate(1) brightness(1); }
.aq-log-card:hover .log-color-overlay { opacity: 0.2; }

/* Scanline */
.log-scan-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px; pointer-events: none; z-index: 3; opacity: 0.3;
}


/* --- 8. END MARKER --- */
.aq-log-end {
    display: flex; 
    align-items: center; 
    gap: 15px;
    padding-left: 21px; /* Align with Mobile Rail */
    margin-top: -20px;
}
@media (min-width: 768px) { 
    .aq-log-end { padding-left: 46px; } 
}
.log-end-dot { 
    width: 8px; height: 8px; 
    background: #555; 
    position: relative; z-index: 2; 
}
.aq-log-end span { 
    font-family: 'Courier New', monospace; 
    font-size: 0.7rem; 
    color: #666; 
    letter-spacing: 2px; 
}


/* --- 9. CTA BUTTON --- */
.aq-log-cta {
    margin-top: 80px;
    padding-left: 0; /* Center Mobile */
    text-align: center;
}
@media (min-width: 768px) { 
    .aq-log-cta { text-align: left; padding-left: 50px; } 
}

.aq-log-btn {
    background: #FF5733; 
    color: #fff; 
    text-decoration: none;
    padding: 15px 40px; 
    border-radius: 4px; 
    font-family: 'Courier New', monospace;
    font-weight: 700; 
    text-transform: uppercase; 
    display: inline-flex; 
    gap: 10px; 
    transition: 0.3s;
}
.aq-log-btn:hover { 
    background: #fff; 
    color: #000; 
    box-shadow: 0 0 30px rgba(255, 87, 51, 0.5); 
}

/* --- 10. SAFETY FOR SMALL SCREENS (iPhone SE, etc) --- */
@media (max-width: 400px) {
    .aq-log-section { padding: 0 10px; }
    .aq-log-wrapper { padding-left: 15px; }
    .aq-log-item { padding-left: 15px; }
    .aq-log-card { padding: 20px; }
    .log-heading { font-size: 1.2rem; }
    .aq-log-node { left: -21px; } /* Adjust node position */
}



/* ========================================= */
/* AQ PARTNER STRIP (HIGH CLASS UPGRADE)     */
/* ========================================= */

.aq-network-section {
    width: 100%;
    height: 100px; /* Taller for presence */
    background: #000;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin: 0;
}

/* LEFT LABEL (Desktop Only) */
.net-label {
    position: absolute;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px;
    background: #050505; /* Slightly lighter than black to stand out */
    z-index: 10;
    font-family: 'Raleway', sans-serif;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    border-right: 1px solid rgba(255,255,255,0.1);
    box-shadow: 10px 0 30px #000;
}

/* TICKER */
.net-ticker-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 220px; /* Space for label */
}

.net-ticker {
    display: inline-block;
    animation: tickerScroll 25s linear infinite; /* Slower, smoother scroll */
}

@keyframes tickerScroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* THE "LOGO" ITEMS */
.net-logo-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Oswald', sans-serif; /* Condensed font looks like a logo */
    font-size: 1.2rem;
    font-weight: 500;
    color: #444; /* Dark grey default */
    text-transform: uppercase;
    transition: 0.3s;
    padding: 0 40px; /* Wide spacing */
    letter-spacing: 2px;
}

/* Hover Effect: Lights up white */
.net-logo-item:hover {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.net-logo-item i { font-size: 1rem; color: #333; transition: 0.3s; }
.net-logo-item:hover i { color: #FF5733; } /* Icon turns orange on hover */

/* GRADIENT FADES (Premium Touch) */
.net-fade-right {
    position: absolute; right: 0; top: 0; height: 100%; width: 100px;
    background: linear-gradient(to right, transparent, #000);
    z-index: 5; pointer-events: none;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    .aq-network-section {
        flex-direction: column;
        height: auto;
        padding: 20px 0;
        gap: 15px;
    }

    .net-label {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0;
        justify-content: center;
        background: transparent;
        border: none;
        box-shadow: none;
        color: #666;
        font-size: 0.7rem;
        margin-bottom: 10px;
    }

    .net-ticker-wrap {
        padding-left: 0;
    }
    
    .net-logo-item {
        font-size: 1rem;
        padding: 0 25px;
    }
    
    /* Hide right fade on mobile as it covers content */
    .net-fade-right { display: none; }
}




/* ========================================= */
/* 1. MINDSET SECTION: "THE MONOLITHS"       */
/* ========================================= */

.aq-phil-section {
    padding: 100px 20px;
    background-color: #050505;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.aq-phil-container { max-width: 1200px; margin: 0 auto; }

/* HEADER */
.aq-phil-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 80px auto;
}

.aq-phil-tagline {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #666;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.aq-phil-title {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    font-weight: 800;
}
.text-orange { color: #FF5733; }

.aq-phil-desc {
    font-family: 'Poppins', sans-serif;
    color: #888;
    line-height: 1.6;
}

/* GRID */
.aq-phil-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 900px) { .aq-phil-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* THE MONOLITH CARD */
.aq-phil-card {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    border-radius: 4px; /* Minimal radius */
}

.aq-phil-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 87, 51, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

/* Background Icon (Huge & Faded) */
.phil-bg-icon {
    position: absolute;
    top: -20px; right: -20px;
    font-size: 10rem;
    color: rgba(255, 255, 255, 0.02);
    transform: rotate(15deg);
    transition: 0.4s;
    pointer-events: none;
}
.aq-phil-card:hover .phil-bg-icon {
    color: rgba(255, 87, 51, 0.05);
    transform: rotate(0deg) scale(1.1);
}

/* Content */
.phil-content { position: relative; z-index: 2; }

.phil-num {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #FF5733;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.aq-phil-card h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.8rem;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
}

.phil-divider {
    width: 40px; height: 3px;
    background: #333;
    margin-bottom: 25px;
    transition: 0.4s;
}
.aq-phil-card:hover .phil-divider { width: 80px; background: #FF5733; }

.aq-phil-card p {
    font-family: 'Poppins', sans-serif;
    color: #999;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ========================================= */
/* FINAL CTA: "THE REACTOR LOCK"             */
/* ========================================= */

.aq-deploy-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 100px auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.aq-deploy-card {
    position: relative;
    background: #050505;
    /* Industrial dark border */
    border: 1px solid rgba(255, 87, 51, 0.3);
    border-radius: 12px;
    padding: 80px 30px; /* Tall padding to show off animation */
    text-align: center;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    /* Clip path for sci-fi corners */
    clip-path: polygon(
        20px 0, 100% 0, 
        100% calc(100% - 20px), calc(100% - 20px) 100%, 
        0 100%, 0 20px
    );
}

/* --- THE REACTOR ANIMATION ENGINE --- */
.aq-reactor-anim {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.25; /* Subtle background presence */
}

/* COMMON RING STYLES */
.reactor-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-sizing: border-box;
}

/* 1. OUTER RING (Slow Clockwise Dashed) */
.reactor-ring.outer {
    width: 500px; height: 500px;
    border: 1px dashed rgba(255, 87, 51, 0.3);
    animation: spinClockwise 60s linear infinite;
}

/* 2. MIDDLE RING (Medium Counter-Clockwise Tech) */
.reactor-ring.middle {
    width: 350px; height: 350px;
    border: 2px solid transparent;
    border-top: 2px solid #FF5733;
    border-bottom: 2px solid #FF5733;
    animation: spinCounter 20s linear infinite;
}

/* 3. INNER RING (Fast Clockwise Lock) */
.reactor-ring.inner {
    width: 200px; height: 200px;
    border: 4px solid transparent;
    border-left: 4px solid #FF5733;
    animation: spinClockwise 8s linear infinite;
}

/* 4. THE CORE (Pulsing Center) */
.reactor-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.4) 0%, transparent 70%);
    animation: corePulse 4s ease-in-out infinite;
}

/* ANIMATION KEYFRAMES */
@keyframes spinClockwise {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinCounter {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes corePulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.5); }
}

/* --- CONTENT STYLING --- */
.aq-deploy-content { position: relative; z-index: 5; }

.aq-deploy-title {
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase;
}
.aq-deploy-title .highlight { 
    color: #FF5733; 
    text-shadow: 0 0 20px rgba(255, 87, 51, 0.6); 
}

.aq-deploy-text {
    font-family: 'Poppins', sans-serif;
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

/* CTA ACTIONS */
.aq-deploy-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
@media (min-width: 768px) { 
    .aq-deploy-actions { flex-direction: row; justify-content: center; } 
}

/* BUTTONS */
.aq-deploy-btn {
    padding: 18px 40px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: 0.3s;
    width: 100%;
    max-width: 300px;
    display: flex; justify-content: center; align-items: center; gap: 10px;
}
@media (min-width: 768px) { .aq-deploy-btn { width: auto; } }

.aq-deploy-btn.primary {
    background: #FF5733;
    color: #fff;
    border: 1px solid #FF5733;
}
.aq-deploy-btn.primary:hover {
    background: transparent;
    color: #FF5733;
    box-shadow: 0 0 30px rgba(255, 87, 51, 0.4);
}

.aq-deploy-btn.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ccc;
}
.aq-deploy-btn.secondary:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* MOBILE FIX FOR ANIMATION SIZING */
@media (max-width: 768px) {
    .aq-reactor-anim { width: 100%; height: 100%; }
    .reactor-ring.outer { width: 300px; height: 300px; }
    .reactor-ring.middle { width: 220px; height: 220px; }
    .reactor-ring.inner { width: 140px; height: 140px; }
}



/* ======================================= */
/* NEW SERVICES SECTION STYLES             */
/* ======================================= */

/* --- Main Section Container --- */
/* --- SERVICES SECTION CONTAINER --- */
/* ========================================================= */
/* --- SERVICES SECTION: LAYOUT & MARGINS FIX --- */
/* ========================================================= */

/* --- SERVICES HERO ENGINE (MOBILE FIRST) --- */
.svc-container {
  width: 90%;
  margin:0 auto;
}

/* --- SERVICES HERO (COMMAND CENTER) --- */
.svc-hero-section {
    position: relative;
    /* Spacing: Clears nav, gives room below */
    padding: 160px 20px 100px 20px;
    background: #000; /* Pure Black Base */
    text-align: center; /* Forces Center Alignment */
    overflow: hidden; 
}

/* BACKGROUND GLOW (The "Reactor" Effect) */
.svc-hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.svc-hero-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the flex items */
    position: relative;
    z-index: 2;
}

/* INDUSTRIAL BADGE */
.svc-hero-badge {
    display: inline-flex; /* Shrinks to fit content */
    align-items: center;
    gap: 10px;
    background: rgba(255, 87, 51, 0.05);
    border: 1px solid rgba(255, 87, 51, 0.3);
    color: #FF5733;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 16px;
    border-radius: 4px;
    margin-bottom: 2rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.1);
}

/* MAIN TITLE */
.svc-hero-title {
    font-family: 'Raleway', sans-serif;
    /* Massive responsive sizing */
    font-size: clamp(3rem, 9vw, 5.5rem); 
    line-height: 0.95;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* MOLTEN GRADIENT TEXT */
.svc-fire-text {
    background: linear-gradient(90deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Text becomes the gradient */
    filter: drop-shadow(0 0 25px rgba(255, 87, 51, 0.3)); /* Glows */
}

/* SUBTITLE */
.svc-hero-subtitle {
    font-family: 'Poppins', sans-serif;
    color: #a0a0a0;
    font-size: 1 rem;
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto;
}

/* --- DESKTOP TWEAKS --- */
@media (min-width: 768px) {
    .svc-hero-section {
        padding-top: 200px;
        padding-bottom: 120px;
    }
}




/* ========================================= */
/* SERVICES PAGE: SYSTEM & ROI (svc- classes) */
/* ========================================= */

/* ========================================= */
/* SVC PAGE: EXPLODED VIEW (3D BLUEPRINT)    */
/* ========================================= */

.svc-exploded-section {
    padding: 100px 20px;
    background-color: #050505;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.svc-exploded-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.svc-exploded-header {
    margin-bottom: 60px;
}

/* --- 3D SCENE SETUP --- */
.svc-iso-scene {
    height: 600px; /* Space for the explosion animation */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px; /* Deep perspective */
}

.svc-iso-stack {
    position: relative;
    width: 320px;
    height: 420px;
    transform-style: preserve-3d;
    /* The Isometric Angle */
    transform: rotateX(60deg) rotateZ(-45deg); 
    transition: transform 0.5s ease;
}

/* Rotate slightly to face user on Hover or Active */
.svc-iso-stack:hover,
.svc-iso-stack.active {
    transform: rotateX(50deg) rotateZ(-30deg);
}

/* --- THE LAYERS (Glass Plates) --- */
.svc-iso-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    backdrop-filter: blur(5px);
}

/* CONTENT CORRECTION (Counter-Rotation) */
.svc-layer-content {
    /* Keeps text upright even when layer is tilted */
    transform: rotateZ(45deg) rotateX(-60deg) translateZ(20px); 
    padding: 20px;
    pointer-events: none; 
}

/* --- LAYER COLORS --- */

/* TOP: Design (Orange) */
.svc-layer-top {
    z-index: 3;
    border-color: #FF5733; 
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.1), rgba(10, 10, 10, 0.95));
}

/* MID: Code (White) */
.svc-layer-mid {
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(10, 10, 10, 0.95));
}

/* BOT: Growth (Green) */
.svc-layer-bot {
    z-index: 1;
    border-color: #2ecc71; 
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(10, 10, 10, 0.95));
}

/* ========================================= */
/* SVC PAGE: HYBRID EXPLODED VIEW            */
/* (Horizontal Desktop / Vertical Mobile)    */
/* ========================================= */

.svc-exploded-section {
    padding: 100px 20px;
    background-color: #050505;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.svc-exploded-container {
    max-width: 1200px; /* Wider container for horizontal spread */
    margin: 0 auto;
    text-align: center;
}

.svc-exploded-header {
    margin-bottom: 60px;
}

/* --- TAGLINE & TITLE --- */
.svc-tagline {
    font-family: 'Courier New', monospace;
    color: #FF5733;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
}

.svc-title {
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    color: #fff;
    font-weight: 800;
    margin: 0;
}


/* --- 3D SCENE CONTAINER --- */
.svc-iso-scene {
    /* DESKTOP HEIGHT: Shorter because we expand sideways, not up */
    height: 600px; 
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
}

/* --- THE STACK WRAPPER --- */
.svc-iso-stack {
    position: relative;
    width: 320px;
    height: 380px; /* Standard card height */
    transform-style: preserve-3d;
    
    /* IDLE: 3D Angle */
    transform: rotateX(45deg) rotateZ(-30deg); 
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

/* ACTIVE/HOVER: Snap to Flat */
.svc-iso-stack:hover,
.svc-iso-stack.active {
    transform: rotateX(0deg) rotateZ(0deg); 
}


/* --- THE LAYERS --- */
.svc-iso-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* Base styles */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    
    /* BLUR FIXES */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0); 
    
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- LAYER COLORS --- */
/* TOP: Design (Orange) */
.svc-layer-top {
    z-index: 3;
    border-top: 4px solid #FF5733;
    background: linear-gradient(145deg, rgba(255, 87, 51, 0.15), #0a0a0a 90%);
}

/* MID: Code (White) */
.svc-layer-mid {
    z-index: 2;
    border-top: 4px solid #fff;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), #0a0a0a 90%);
}

/* BOT: Growth (Green) */
.svc-layer-bot {
    z-index: 1;
    border-top: 4px solid #2ecc71;
    background: linear-gradient(145deg, rgba(46, 204, 113, 0.15), #0a0a0a 90%);
}


/* --- CONTENT ALIGNMENT --- */
.svc-layer-content {
    padding: 25px;
    pointer-events: none;
    transform: rotateZ(30deg) rotateX(-45deg);
    transition: transform 0.6s ease;
}

/* ACTIVE: Flat */
.svc-iso-stack:hover .svc-layer-content,
.svc-iso-stack.active .svc-layer-content {
    transform: rotateZ(0deg) rotateX(0deg);
}


/* ========================================= */
/* DESKTOP ANIMATION (HORIZONTAL SPREAD)     */
/* ========================================= */

/* TOP LAYER: Moves LEFT */
.svc-iso-stack:hover .svc-layer-top,
.svc-iso-stack.active .svc-layer-top {
    transform: translateX(-340px) translateZ(50px); 
    box-shadow: 20px 20px 50px rgba(0,0,0,0.6);
}

/* MID LAYER: Stays Center */
.svc-iso-stack:hover .svc-layer-mid,
.svc-iso-stack.active .svc-layer-mid {
    transform: translateX(0px);
    z-index: 10;
}

/* BOT LAYER: Moves RIGHT */
.svc-iso-stack:hover .svc-layer-bot,
.svc-iso-stack.active .svc-layer-bot {
    transform: translateX(340px) translateZ(-50px); 
    box-shadow: -20px 20px 50px rgba(0,0,0,0.6);
}


/* --- TYPOGRAPHY --- */
.svc-layer-id {
    display: block; font-family: 'Courier New', monospace;
    font-size: 0.8rem; color: #aaa; margin-bottom: 10px; font-weight: 700;
}
.svc-layer-content h3 {
    font-family: 'Raleway', sans-serif; font-size: 1.6rem;
    color: #fff; margin: 0 0 10px 0; font-weight: 800; text-transform: uppercase;
}
.svc-layer-content p {
    font-family: 'Poppins', sans-serif; font-size: 0.9rem;
    color: #ccc; line-height: 1.5;
}
.svc-layer-icon {
    font-size: 2.2rem; margin-top: 15px; color: #fff;
}


/* ========================================= */
/* MOBILE OVERRIDE (VERTICAL STACK)          */
/* ========================================= */
@media (max-width: 900px) {
    
    .svc-iso-scene { 
        height: 1000px; /* Taller height for vertical scroll */
    }
    
    .svc-iso-stack { 
        width: 300px; 
        height: 340px;
        /* Start FLAT on Mobile */
        transform: rotateX(0deg) rotateZ(0deg); 
    }
    .svc-layer-content { transform: rotateZ(0deg) rotateX(0deg); }

    /* RESET Horizontal Logic & APPLY Vertical Logic */

    /* TOP: Up */
    .svc-iso-stack:hover .svc-layer-top,
    .svc-iso-stack.active .svc-layer-top { 
        transform: translateX(0px) translateY(-350px); 
    }

    /* BOT: Down */
    .svc-iso-stack:hover .svc-layer-bot,
    .svc-iso-stack.active .svc-layer-bot { 
        transform: translateX(0px) translateY(350px); 
    }
    
    /* MID: Center */
    .svc-iso-stack:hover .svc-layer-mid,
    .svc-iso-stack.active .svc-layer-mid {
        transform: translateX(0px) translateY(0px);
    }
}




/* ========================================= */
/* SVC: ROI TERMINAL (High-End Animation)    */
/* ========================================= */

.svc-terminal-section {
    padding: 0 20px 150px 20px;
    background: #050505;
}

.svc-terminal-box {
    max-width: 900px;
    margin: 0 auto;
    background: #080808; /* Slightly lighter than section for contrast */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    padding: 60px 40px;
    overflow: hidden;
    /* Outer Glow */
    box-shadow: 0 0 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* --- 1. ANIMATED GRID BACKGROUND --- */
.term-grid-bg {
    position: absolute; top: 0; left: 0; width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    opacity: 0.5;
    /* Moves the grid slowly to create depth */
    animation: gridPan 20s linear infinite;
}

@keyframes gridPan {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-40px, -40px); }
}

/* --- 2. CRT SCANLINE EFFECT --- */
.term-scanline {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(255, 87, 51, 0.05) 50%,
        transparent 51%
    );
    background-size: 100% 4px;
    z-index: 2;
    pointer-events: none;
    /* Adds a subtle holographic flicker */
    animation: scanlineFlicker 0.15s infinite;
}

/* --- 3. ABSTRACT GRAPH BARS (Replaces static line) --- */
.term-graph-container {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 60%;
    display: flex; align-items: flex-end; justify-content: space-around;
    padding: 0 50px; opacity: 0.3; z-index: 1;
    pointer-events: none;
}

.term-graph-bar {
    width: 8%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
    border-top: 2px solid rgba(255, 255, 255, 0.3);
}

.term-graph-bar.highlight {
    background: linear-gradient(to top, rgba(255, 87, 51, 0.2), transparent);
    border-top: 2px solid #FF5733;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.2);
}

/* --- CONTENT --- */
.term-content { position: relative; z-index: 5; width: 100%; }

.term-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px; margin-bottom: 40px;
    font-family: 'Courier New', monospace; font-size: 0.8rem; color: #666;
}

.term-meta { display: flex; align-items: center; gap: 10px; }
.term-status { color: #2ecc71; font-weight: 700; letter-spacing: 1px; }

.term-live-dot {
    width: 8px; height: 8px; background: #2ecc71; border-radius: 50%;
    box-shadow: 0 0 10px #2ecc71;
    animation: pulseLive 1.5s infinite;
}
@keyframes pulseLive { 0%{opacity:1; transform: scale(1);} 50%{opacity:0.5; transform: scale(1.2);} 100%{opacity:1; transform: scale(1);} }

/* BIG STAT */
.term-main-stat {
    font-family: 'Teko', sans-serif;
    font-size: 9rem; line-height: 0.9;
    color: #fff;
    margin-bottom: 10px;
    /* Optional: Makes the number look metallic */
    background: linear-gradient(to bottom, #fff 30%, #aaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(255, 87, 51, 0.2));
}

.term-unit { 
    font-size: 4rem; vertical-align: top; 
    color: #FF5733; /* Keeps color solid even with gradient text */
    -webkit-text-fill-color: #FF5733;
}

.term-label {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem; color: #fff; font-weight: 800;
    letter-spacing: 3px; margin-bottom: 50px;
    text-transform: uppercase;
}

/* FOOTER */
.term-footer {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Courier New', monospace; font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.term-badge {
    background: #FF5733; color: #fff; padding: 5px 12px;
    font-weight: 700; border-radius: 4px;
    display: flex; gap: 8px; align-items: center;
}

.term-code {
    text-align: right; color: #666; display: flex; flex-direction: column; gap: 5px;
}

.blinking-cursor {
    animation: blink 1s step-end infinite;
    color: #FF5733;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .term-main-stat { font-size: 6rem; }
    .term-footer { flex-direction: column; gap: 15px; text-align: center; }
    .term-code { align-items: center; }
}





/* --- THE 3D GRID ENGINE --- */
/* ========================================= */
/* 1. THE 3D PHYSICS ENGINE (DO NOT TOUCH) */
/* ========================================= */
/* ========================================= */
/* 3D CARD SYSTEM (Redesigned)               */
/* ========================================= */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    perspective: 2000px;
    margin-bottom: 5rem;
}

.svc-card {
    background-color: transparent;
    width: 100%;
    height: 550px; /* Adjusted height for cleaner look */
    border-radius: 12px;
  
    
}

.svc-content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform-style: preserve-3d; 
}

/* FLIP TRIGGER */
.svc-card:hover .svc-content {
    transform: rotateY(180deg);
    z-index: 9999; /* Higher than everything else on the page */
}

/* SHARED FACE STYLES */
.svc-front, .svc-back {
    position: absolute;
    width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 12px;
    background: linear-gradient(160deg, #111, #050505); /* Deep Black Glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 30px;
    transform-style: preserve-3d; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* BACK FACE SPECIFIC */
.svc-back {
    transform: rotateY(180deg);
    border: 1px solid rgba(255, 87, 51, 0.3); /* Orange border on back */
    background: #080808;
}

/* FEATURED CARD (Middle) */
.svc-featured .svc-front {
    border: 1px solid #FF5733;
    box-shadow: 0 0 30px rgba(255, 87, 51, 0.15);
}

/* ========================================= */
/* INNER CONTENT STYLING                     */
/* ========================================= */

/* STATUS BAR (Top) */
.svc-status-bar {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px; margin-bottom: 20px;
    transform: translateZ(30px);
    /* ADD THIS (CRITICAL FIX): */
    /* This allows the tooltip inside to actually pop out 150px */
    transform-style: preserve-3d;
}

.svc-id {
    font-family: 'Courier New', monospace; font-size: 0.75rem; color: #666; letter-spacing: 1px; font-weight: 700;
}

.svc-led {
    width: 8px; height: 8px; background: #444; border-radius: 50%;
}
.svc-led.active { background: #FF5733; box-shadow: 0 0 8px #FF5733; }

/* MAIN CONTENT (Middle) */
.svc-inner {
    flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    transform: translateZ(50px);
}

.svc-icon-box {
    font-size: 2rem; color: #FF5733; margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(255, 87, 51, 0.4));
}

.svc-title {
    font-family: 'Raleway', sans-serif;  font-size: clamp(2.5rem, 5vw, 3.5rem); 
     color: #fff;
    font-weight: 800; margin: 0 0 20px 0; letter-spacing: 1px;
}

/* MARQUEE (Preserved & Styled) */
.svc-marquee-wrapper {
    width: 100%; overflow: hidden;
    background: rgba(255, 87, 51, 0.1);
    padding: 8px 0; margin-bottom: 30px;
    border-top: 1px solid rgba(255, 87, 51, 0.2);
    border-bottom: 1px solid rgba(255, 87, 51, 0.2);
}

.svc-marquee-content {
    display: flex; white-space: nowrap;
    font-family: 'Courier New', monospace; font-size: 0.8rem; color: #FF5733;
    animation: scroll-left 10s linear infinite; font-weight: 700;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* PRICE TAG */
.svc-price-tag {
    display: flex; flex-direction: column; align-items: center;
}

.price-label { font-family: 'Courier New', monospace; font-size: 0.65rem; color: #666; letter-spacing: 1px; margin-bottom: 5px; }
.price-val { font-family: 'Raleway', sans-serif; font-size: 1.8rem; color: #fff; font-weight: 800; }
.price-sub { font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: #888; }

/* HOVER HINT (Bottom) */
.svc-hover-hint {
    font-family: 'Courier New', monospace; font-size: 0.7rem; color: #444;
    margin-top: 10px; letter-spacing: 1px; transform: translateZ(20px);
}

/* ========================================= */
/* BACK FACE STYLING (Specs)                 */
/* ========================================= */
.svc-spec-list {
    list-style: none; padding: 0; width: 100%; margin-bottom: 30px;
}

.svc-spec-list li {
    display: flex; justify-content: space-between; padding: 12px 0;
    border-bottom: 1px dotted rgba(255,255,255,0.2);
    font-family: 'Courier New', monospace; font-size: 0.8rem;
}

.spec-label { color: #888; font-weight: 700; }
.spec-val { color: #fff; text-align: right; }

.svc-btn {
    display: block; width: 100%; background: #FF5733; color: #fff;
    padding: 12px 0; border-radius: 4px; text-decoration: none;
    font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 1px;
    transition: all 0.3s ease;
}
.svc-btn:hover { background: transparent; border: 1px solid #FF5733; color: #FF5733; }

/* ========================================= */
/* TOOLTIP (Fixed & Cleaned)                 */
/* ========================================= */
.svc-info-trigger {
    color: #666; font-size: 1.2rem; cursor: help; position: relative; 
    z-index: 20;
    /* Ensure the trigger itself sits up high */
    transform: translateZ(20px);
    padding: 20px;
}
.svc-info-trigger:hover { color: #FF5733; }

.svc-tactical-tooltip {
    visibility: hidden; opacity: 0; width: 280px;
    background: #000000; border: 1px solid #FF5733;
    padding: 20px; position: absolute; top: 30px; right: -10px;
    /* 2. THE FIX: Physically lift it off the card in 3D space */
    transform: translateZ(70px);
    isolation: isolate; 
    z-index: 9999; box-shadow: 0 10px 40px rgba(0,0,0,1);
    border-radius: 8px; text-align: left;
    transition: opacity 0.3s ease; pointer-events: none;
}


/* The Visual Box (Pseudo-element approach prevents bleed) */
.svc-tactical-tooltip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* 1. SOLID BLACK Background */
    background-color: #000000;
    /* 2. Brand Border */
    border: 1px solid #FF5733;
    /* 3. Radius & Shadow */
    border-radius: 8px;
    box-shadow: 0 0 0 100px rgba(0,0,0,0), 0 10px 40px rgba(0,0,0,1);
    
    z-index: -1; /* Sits behind the text */
}

.svc-info-trigger:hover + .svc-tactical-tooltip {
    visibility: visible; opacity: 1; pointer-events: auto;
    /* Maintain the Z-lift on hover */
    /* Maintain the aggressive Z-lift */
    transform: translateZ(70px);
}

.svc-tooltip-title {
    display: block; color: #FF5733; font-weight: 700; font-size: 0.7rem;
    border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.tt-price-row {
    display: flex; justify-content: space-between; margin-bottom: 5px;
    font-size: 0.8rem; font-family: 'Poppins', sans-serif;
}

.tt-label { color: #888; }
.tt-value { color: #fff; font-weight: 700; }
.tt-value.retainer { color: #FF5733; }

.tt-section-title {
    font-size: 0.7rem; color: #666; margin-top: 15px; margin-bottom: 5px; font-weight: 700;
}
.tt-desc { font-size: 0.75rem; color: #aaa; line-height: 1.4; }

/* POPULAR BADGE */
.svc-popular-badge {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%) translateZ(40px);
    background: #FF5733; color: #fff; padding: 4px 12px; border-radius: 4px;
    font-family: 'Courier New', monospace; font-size: 0.7rem; font-weight: 700;
}


/* --- A LA CARTE & FAQ --- */
/* ========================================= */
/* MODULE: TACTICAL UPGRADES (Replaces Alacarte) */
/* ========================================= */

/* ========================================= */
/* TACTICAL UPGRADES (Rebuilt)               */
/* ========================================= */

.svc-upgrade-wrapper {
    margin-top: 1rem;
    padding: 60px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: #000; /* Ensure visual separation */
    position: relative;
    z-index: 2;
}

/* HEADER STYLING */
.svc-upgrade-header {
    text-align: center;
    margin-bottom: 5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.svc-badge {
    display: block; /* Ensures it sits on its own line */
    background: transparent; /* Removed Box */
    border: none; /* Removed Border */
    padding: 0; /* Removed Padding */
    
    color: #FF5733; /* Brand Orange */
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px; /* Wider spacing for that "System" feel */
    text-transform: uppercase;
    margin-bottom: 15px; /* Tighter to the headline */
}

.svc-upgrade-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem); 
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    line-height: 1;
    font-weight: 800;
}

.svc-upgrade-title .text-orange { color: #FF5733; }

.svc-upgrade-sub {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    line-height: 1.6;
}

/* THE GRID (Mobile First) */
.svc-upgrade-grid {
    display: grid;
    /* Default: 1 column on mobile */
    grid-template-columns: 1fr; 
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* THE SLOT (Card) */
.upgrade-slot {
    background: linear-gradient(145deg, #0a0a0a, #050505);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

/* Hover Effect: "System Active" */
.upgrade-slot:hover {
    border-color: #FF5733;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* SLOT HEADER (Icon + ID) */
.slot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.slot-icon {
    font-size: 1.8rem;
    color: #444;
    transition: 0.3s;
}

.upgrade-slot:hover .slot-icon {
    color: #FF5733;
    filter: drop-shadow(0 0 10px rgba(255, 87, 51, 0.4));
}

.slot-id {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #555;
    font-weight: 700;
    letter-spacing: 1px;
}

/* SLOT CONTENT */
.slot-content h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    margin: 0 0 10px 0;
    font-weight: 700;
    text-transform: uppercase;
}

.slot-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

/* STATUS LIGHT (Bottom Right) */
.slot-status {
    position: absolute;
    bottom: 20px; right: 20px;
    width: 6px; height: 6px;
    background: #333;
    border-radius: 50%;
    transition: 0.3s;
}

.upgrade-slot:hover .slot-status {
    background: #FF5733;
    box-shadow: 0 0 8px #FF5733;
}

/* CTA BUTTON */
.svc-upgrade-footer {
    text-align: center;
    margin-top: 60px;
}

.upgrade-cta-btn {
    display: inline-block;
    color: #FF5733;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #FF5733;
    padding: 15px 30px;
    border-radius: 4px;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.upgrade-cta-btn:hover {
    background: rgba(255, 87, 51, 0.1);
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.2);
}

.upgrade-cta-btn i { margin-left: 10px; }

/* TABLET & DESKTOP LAYOUT */
@media (min-width: 768px) {
    .svc-upgrade-grid {
        /* 2 Columns on Tablet/Desktop */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .svc-upgrade-grid {
        /* 4 Columns on Large Screens (Optional, stick to 2 if you want bigger cards) */
        grid-template-columns: repeat(4, 1fr); 
    }
}

/* ========================================= */
/* COMPONENT: OPERATIONAL INTEL (FAQ) */
/* ========================================= */

/* The Main Wrapper (Replaces .faq-section) */
/* ========================================= */
/* OPERATIONAL INTELLIGENCE (FAQ)            */
/* ========================================= */

.svc-faq-wrapper {
    max-width: 900px;
    margin: 8rem auto 8rem;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* HEADER STYLES */
.svc-faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

.faq-badge {
    display: block; /* Own line */
    background: transparent; /* Remove Box */
    border: none; /* Remove Border */
    padding: 0; /* Remove Padding */
    
    color: #FF5733; /* Brand Orange */
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px; /* Wide, high-end spacing */
    text-transform: uppercase;
    margin-bottom: 15px; /* Pull tighter to the headline */
}

.svc-faq-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    font-weight: 800;
}

.svc-faq-title .text-orange { color: #FF5733; }

.svc-faq-sub {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-top: 15px;
}

/* ACCORDION ITEM (The Data Log) */
.svc-faq-item {
    margin-bottom: 15px;
    background: linear-gradient(145deg, #0a0a0a, #050505);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hover State */
.svc-faq-item:hover {
    border-color: rgba(255, 87, 51, 0.4);
}

/* Active State (Toggled by JS) */
.svc-faq-item.active {
    border-color: #FF5733;
    box-shadow: 0 5px 30px rgba(255, 87, 51, 0.15);
    background: #080808;
}

/* TRIGGER BUTTON */
.svc-faq-trigger {
    width: 100%;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    outline: none;
}

.trigger-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.faq-id {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #555;
    font-weight: 700;
    letter-spacing: 1px;
}

.svc-faq-item.active .faq-id { color: #FF5733; }

.svc-faq-q-text {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

/* ICON (+ / -) */
.svc-faq-icon {
    color: #666;
    font-size: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.svc-faq-item.active .svc-faq-icon {
    transform: rotate(45deg);
    color: #FF5733;
}

/* ANSWER DRAWER */
.svc-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.svc-faq-a-text {
    padding: 0 25px 30px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: -10px;
}

.svc-faq-a-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #aaa;
    line-height: 1.7;
    margin-top: 20px;
    margin-bottom: 20px;
}

.svc-faq-a-text strong { color: #fff; }

/* META TAG (Status Indicator) */
.faq-meta-tag {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #FF5733;
    letter-spacing: 2px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-meta-tag::before {
    content: '';
    display: block;
    width: 6px; height: 6px;
    background: #FF5733;
    border-radius: 50%;
    box-shadow: 0 0 5px #FF5733;
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    .svc-faq-trigger { padding: 20px; }
    .faq-id { display: none; } /* Hide ID on mobile for space */
    .svc-faq-q-text { font-size: 0.95rem; }
}





/* --- Scoped Styles for Checklist Landing Page --- */
.checklist-landing__body { 
    background-color: #000000; 
    color: #fff; 
    font-family: 'Poppins', sans-serif; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    padding: 20px; 
    margin: 0;
}
.checklist-landing__container { 
    max-width: 600px; 
    width: 100%;
    text-align: center; 
}
.checklist-landing__title { 
    font-family: 'Raleway', sans-serif; 
    font-size: clamp(2.5rem, 6vw, 3.5rem); 
    color: #FF5733; 
    margin: 0 0 15px 0;
}
.checklist-landing__subtitle { 
    font-size: 1.2rem; 
    color: rgba(255, 255, 255, 0.8); 
    margin: 0 0 30px 0;
}
.checklist-landing__form { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}
.checklist-landing__input { 
    background: #1a1a1a; 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 8px; 
    padding: 15px; 
    font-size: 1rem; 
    color: #fff; 
    font-family: 'Poppins', sans-serif;
}
.checklist-landing__submit { 
    background: #FF5733; 
    border: none; 
    border-radius: 8px; 
    padding: 15px; 
    font-size: 1.1rem; 
    font-weight: 600; 
    color: #fff; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
    font-family: 'Poppins', sans-serif;
}
.checklist-landing__submit:hover { 
    transform: scale(1.05); 
}
.checklist-landing__error { 
    color: #e74c3c; 
    font-weight: bold; 
    margin-bottom: 15px; 
}
.g-recaptcha {
    margin: 0 auto; /* Center the reCAPTCHA element */
}



 /* --- Scoped Styles for AI Guide Landing Page --- */
.ai-guide-landing__body { background-color: #0A0A0A; color: #fff; font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; margin: 0; }
.ai-guide-landing__container { max-width: 600px; width: 100%; text-align: center; }
.ai-guide-landing__title { font-family: 'Raleway', sans-serif; font-size: clamp(2.5rem, 6vw, 3.5rem); color: #1c64ac; margin: 0 0 15px 0; }
.ai-guide-landing__subtitle { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); margin: 0 0 30px 0; }
.ai-guide-landing__form { display: flex; flex-direction: column; gap: 15px; }
.ai-guide-landing__input { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; font-size: 1rem; color: #fff; font-family: 'Poppins', sans-serif; }
.ai-guide-landing__submit { background: #1c64ac; border: none; border-radius: 8px; padding: 15px; font-size: 1.1rem; font-weight: 600; color: #fff; cursor: pointer; transition: transform 0.3s ease; font-family: 'Poppins', sans-serif; }
.ai-guide-landing__submit:hover { transform: scale(1.05); }



/* --- Scoped Styles for SEO Report Landing Page --- */
.seo-landing__body { background-color: #0A0A0A; color: #fff; font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; margin: 0; }
.seo-landing__container { max-width: 600px; width: 100%; text-align: center; }
.seo-landing__title { font-family: 'Raleway', sans-serif; font-size: clamp(2.5rem, 6vw, 3.5rem); color: #2ECC71; margin: 0 0 15px 0; }
.seo-landing__subtitle { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); margin: 0 0 30px 0; }
.seo-landing__form { display: flex; flex-direction: column; gap: 15px; }
.seo-landing__input { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; font-size: 1rem; color: #fff; font-family: 'Poppins', sans-serif; }
.seo-landing__submit { background: #2ECC71; border: none; border-radius: 8px; padding: 15px; font-size: 1.1rem; font-weight: 600; color: #fff; cursor: pointer; transition: transform 0.3s ease; font-family: 'Poppins', sans-serif; }
.seo-landing__submit:hover { transform: scale(1.05); }



.retainer-cta-tab { 
  text-align: center; 
  max-width: 700px; 
  margin: 0 auto; 
}

.retainer-cta-tab h3 { 
  font-size: 2.2rem; 
  margin-bottom: 15px; 
  font-family: 'Raleway', sans-serif;
  margin-top: 150px;
}
.retainer-cta-tab p { color: rgba(255,255,255,0.7); 
  margin-bottom: 30px; 
  font-size: 1.1rem; 
  font-family: 'Poppins';
  text-align: left;
}
.cta-button {
    display: inline-block; background: #FF5733; color: #fff; padding: 16px 32px; border-radius: 50px;
    text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 600; transition: transform 0.3s ease;
}
.cta-button:hover { transform: scale(1.05); }






 



/* CONTACT  PAGE */


/* ========================================= */
/* PAGE: CONTACT (Namespace: cnt-)           */
/* ========================================= */

/* --- 1. HERO SECTION --- */
.cnt-hero-section {
    position: relative;
    padding: 140px 20px 60px 20px;
    background-color: #050505;
    text-align: center;
    overflow: hidden;
}

/* Background FX */
.cnt-hero-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; z-index: 0; opacity: 0.5; pointer-events: none;
}
.cnt-hero-section::after {
    content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.15), transparent 70%);
    pointer-events: none; z-index: 0;
}

.cnt-container {
    max-width: 1100px; margin: 0 auto; position: relative; z-index: 2;
}

.cnt-hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 87, 51, 0.1);
    border: 1px solid rgba(255, 87, 51, 0.2);
    padding: 8px 16px; border-radius: 4px;
    color: #FF5733; font-family: 'Courier New', monospace;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; margin-bottom: 25px;
    backdrop-filter: blur(5px);
}

.cnt-hero-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    color: #fff; font-weight: 800; line-height: 0.95;
    text-transform: uppercase; margin: 0 0 25px 0;
}
.cnt-hero-title .text-orange { color: #FF5733; }

.cnt-hero-sub {
    font-family: 'Poppins', sans-serif; color: #888;
    font-size: 1rem; line-height: 1.6; max-width: 600px; margin: 0 auto;
}


/* --- 2. SEQUENCE SECTION (New) --- */
.cnt-sequence-section {
    padding: 40px 20px;
    background: #050505;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cnt-sequence-label {
    text-align: center; color: #444; font-family: 'Courier New', monospace;
    font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 20px;
}

.cnt-sequence-grid {
    display: flex; justify-content: center; align-items: center; gap: 15px;
}

.cnt-step {
    text-align: center;
}
.cnt-step-num {
    display: block; font-family: 'Raleway', sans-serif;
    font-size: 1.5rem; color: #FF5733; font-weight: 800;
}
.cnt-step p {
    font-family: 'Raleway', sans-serif;  font-size: 0.65rem; color: #888; margin: 5px 0 0 0;
}

.cnt-step-line {
    height: 1px; width: 30px; background: #333;
}


/* --- 3. INTERFACE SECTION --- */
.cnt-interface-section {
    padding: 60px 20px 80px 20px; background-color: #050505;
}

.cnt-interface-grid {
    display: grid; grid-template-columns: 1fr; gap: 60px;
}

/* SHARED STYLES */
.cnt-panel-header {
    font-family: 'Courier New', monospace; color: #666;
    font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 30px;
    font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

/* LEFT PANEL */
.cnt-comms-panel { display: flex; flex-direction: column; gap: 30px; }

.cnt-data-row { display: flex; flex-direction: column; gap: 5px; }

.cnt-data-label {
    font-family: 'Courier New', monospace; font-size: 0.7rem;
    color: #FF5733; font-weight: 700; letter-spacing: 1px;
}

/* STATUS INDICATOR STYLES */
.status-indicator-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-dot {
    width: 10px;
    height: 10px;
    background-color: #2ecc71; /* Success Green */
    border-radius: 50%;
    box-shadow: 0 0 10px #2ecc71;
}

.status-dot.pulse {
    animation: statusPulse 2s infinite;
}

/* Re-using the keyframes from your footer */
@keyframes statusPulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.cnt-data-value {
    font-family: 'Raleway', sans-serif; font-size: 1.2rem;
    color: #fff; font-weight: 600;
}
.cnt-data-value.link { text-decoration: none; transition: 0.3s; }
.cnt-data-value.link:hover { color: #FF5733; padding-left: 10px; }

.cnt-social-grid { display: flex; gap: 15px; margin-top: 5px; }
.cnt-hex-link {
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 1.2rem; transition: 0.3s;
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
    /* ADD THIS LINE TO REMOVE UNDERLINE */
    text-decoration: none;
}
.cnt-hex-link:hover { background: #FF5733; border-color: #FF5733; color: #000; }

/* MAP BOX */
.cnt-coordinate-box {
    margin-top: 10px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 5px;
}
.cnt-coord-header {
    font-family: 'Courier New', monospace; font-size: 0.7rem; color: #666; margin-bottom: 5px;
}
.cnt-radar-frame {
    height: 200px; width: 100%; position: relative;
    filter: grayscale(100%) invert(100%) contrast(1.2); opacity: 0.7; transition: 0.3s;
}
.cnt-radar-frame:hover { filter: grayscale(0%); opacity: 1; }
.cnt-radar-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 50%);
    background-size: 100% 4px; pointer-events: none;
}


/* RIGHT PANEL (FORM) */
.cnt-form-panel {
    background: rgba(255, 255, 255, 0.02); padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.cnt-input-group { margin-bottom: 30px; }
.cnt-input-group label {
    display: block;     font-family: 'Raleway', sans-serif;

    font-size: 0.7rem; color: #888; margin-bottom: 10px; font-weight: 700;
}

.cnt-input-group input, .cnt-input-group textarea {
    width: 100%; background: transparent; border: none;
    border-bottom: 1px solid #333; color: #fff;
    font-family: 'Poppins', sans-serif; font-size: 1rem;
    padding: 10px 0; transition: 0.3s; outline: none; border-radius: 0;
}
.cnt-input-group input:focus, .cnt-input-group textarea:focus {
    border-bottom-color: #FF5733; padding-left: 15px;
    background: linear-gradient(90deg, rgba(255, 87, 51, 0.05), transparent);
}

.cnt-transmit-btn {
    width: 100%; background: #FF5733; color: #fff;
    font-family: 'Courier New', monospace; font-weight: 800;
    font-size: 1rem; text-transform: uppercase; padding: 15px;
    border: none; cursor: pointer; letter-spacing: 1px; transition: 0.3s;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
}
.cnt-transmit-btn:hover { background: #e64a19; padding-left: 30px; }

/* DESKTOP TWEAKS */
@media (min-width: 900px) {
    .cnt-interface-grid { grid-template-columns: 0.6fr 1fr; gap: 80px; }
    .cnt-form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    
    .cnt-form-panel {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        background: transparent; padding-left: 50px; padding-top: 0;
        border-top: none; border-right: none; border-bottom: none;
    }
}




/*porfolio page*/

/* ======================================= */
/* FINAL & COMPLETE PORTFOLIO CSS          */
/* ======================================= */

/* --- 1. Main Page Structure & Intro --- */
.portfolio-content {
  width: 90%;
  max-width: 1440px;
  margin: auto;
  text-align: center;
}
/* --- PORTFOLIO HERO (MATCHING SERVICES) --- */
/* ========================================= */
/* PAGE: PORTFOLIO (Namespace: prt-)         */
/* ========================================= */

/* --- HERO SECTION --- */
.prt-hero-section {
    position: relative;
    width: 100%;
    /* Mobile Spacing: Clears the fixed nav */
    padding-top: 140px; 
    padding-bottom: 60px;
    background-color: #050505; 
    overflow: hidden;
    text-align: center; /* Centered Command Style */
}

/* BACKGROUND GRID (Shared Texture) */
.prt-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

/* ORANGE GLOW (Top Center) */
.prt-hero-section::after {
    content: '';
    position: absolute;
    top: -60%; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.prt-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HERO BADGE (Boxed Style) */
.prt-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 87, 51, 0.1);
    border: 1px solid rgba(255, 87, 51, 0.2);
    padding: 8px 16px;
    border-radius: 4px;
    color: #FF5733;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    backdrop-filter: blur(5px);
}

/* HEADLINE */
.prt-hero-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2.8rem, 7vw, 5rem); 
    color: #fff;
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}

.prt-hero-title .text-orange { 
    color: #FF5733; 
    text-shadow: 0 0 20px rgba(255, 87, 51, 0.2);
}

/* SUBHEADLINE */
.prt-hero-sub {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

/* DESKTOP TWEAKS */
@media (min-width: 768px) {
    .prt-hero-section {
        padding-top: 180px;
    }
}




/* ========================================= */
/* PORTFOLIO: SPOTLIGHT (COMMAND CENTER)     */
/* ========================================= */

.prt-spotlight-section {
    padding: 0 20px 120px 20px;
    background: #050505;
    /* Subtle Grid Background for High-Tech feel */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}

.prt-spotlight-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.spotlight-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 87, 51, 0.2); /* Orange tint */
}

.spot-badge {
    font-family: 'Courier New', monospace; font-size: 0.8rem;
    color: #FF5733; letter-spacing: 2px; font-weight: 700;
}

.spot-title {
    font-family: 'Raleway', sans-serif; font-size: 2rem;
    color: #fff; font-weight: 800; margin: 0;
}

/* --- THE HUD CARD (Main Wrapper) --- */
.spotlight-hud-card {
    display: grid; grid-template-columns: 1.4fr 1fr;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px); /* Frosted Glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    /* The Glow */
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    transition: all 0.4s ease;
}

.spotlight-hud-card:hover {
    border-color: rgba(255, 87, 51, 0.4);
    box-shadow: 0 0 60px rgba(255, 87, 51, 0.1);
}

/* DECORATIVE CORNER BRACKETS (The "Tech" Look) */
.hud-corner {
    position: absolute; width: 20px; height: 20px;
    border: 2px solid #FF5733;
    transition: all 0.4s ease;
    z-index: 10;
}
.top-left { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.top-right { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.bottom-left { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.bottom-right { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Brackets expand slightly on hover */
.spotlight-hud-card:hover .hud-corner { width: 30px; height: 30px; }


/* --- LEFT: VISUAL (Scanner) --- */
.spot-visual {
    position: relative;
    height: 100%; min-height: 500px;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.spot-img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.1); /* Industrial B&W */
    transition: all 0.6s ease;
}

/* Colorize on hover */
.spotlight-hud-card:hover .spot-img { 
    filter: grayscale(0%) contrast(1);
    transform: scale(1.03);
}

/* Animated Scan Line */
.scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: rgba(255, 87, 51, 0.6);
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.8);
    z-index: 5;
    animation: scanMove 4s linear infinite;
    opacity: 0.5;
}
@keyframes scanMove { 0% {top: -10%;} 100% {top: 110%;} }

.visual-badge {
    position: absolute; top: 20px; left: 20px;
    background: rgba(0,0,0,0.7); color: #2ecc71;
    padding: 5px 10px; font-family: 'Courier New', monospace;
    font-size: 0.7rem; font-weight: 700; border: 1px solid #2ecc71;
    z-index: 5;
}


/* OVERLAY BUTTON */
.spot-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease; z-index: 6;
}
.spotlight-hud-card:hover .spot-overlay { opacity: 1; }

.spot-btn {
    display: flex; align-items: center; gap: 15px;
    background: transparent; border: 1px solid #FF5733;
    padding: 15px 30px; color: #fff; text-decoration: none;
    font-family: 'Teko', sans-serif; font-size: 1.5rem; letter-spacing: 1px;
    transition: all 0.3s ease;
}
.spot-btn:hover { background: #FF5733; color: #000; }


/* --- RIGHT: DATA (Intelligence) --- */
.spot-data {
    padding: 50px;
    display: flex; flex-direction: column; justify-content: center;
}

.spot-top-bar {
    display: flex; justify-content: space-between;
    font-family: 'Courier New', monospace; font-size: 0.75rem;
    color: #666; margin-bottom: 20px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.spot-project-name {
    font-family: 'Raleway', sans-serif; font-size: 3.5rem;
    line-height: 0.9; color: #fff; margin: 0 0 20px 0;
    text-transform: uppercase;
}

.spot-desc {
    font-family: 'Poppins', sans-serif; font-size: 1rem;
    color: #ccc; line-height: 1.6; margin-bottom: 40px;
}

/* METRICS BOX */
.spot-metrics-box {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px; margin-bottom: 40px;
}

.metric-item { text-align: center; width: 33%; }
.metric-val {
    display: block; font-family: 'Teko', sans-serif;
    font-size: 2.2rem; color: #FF5733; line-height: 1;
    text-shadow: 0 0 15px rgba(255, 87, 51, 0.3);
}
.metric-label {
    font-family: 'Courier New', monospace; font-size: 0.7rem; color: #888;
}
.metric-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }


/* FOOTER STACK */
.spot-footer {
    display: flex; justify-content: space-between; align-items: center;
}
.spot-stack { display: flex; gap: 8px; flex-wrap: wrap; }

.stack-pill {
    font-size: 0.7rem; color: #aaa; background: #111;
    border: 1px solid #333; padding: 5px 12px;
    font-family: 'Courier New', monospace; letter-spacing: 1px;
}

.spot-status-light {
    font-family: 'Courier New', monospace; font-size: 0.7rem;
    color: #2ecc71; display: flex; align-items: center; gap: 8px;
}
.status-dot {
    width: 6px; height: 6px; background: #2ecc71;
    border-radius: 50%; box-shadow: 0 0 8px #2ecc71;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%{opacity:1;} 50%{opacity:0.4;} 100%{opacity:1;} }


/* MOBILE */
@media (max-width: 900px) {
    .spotlight-hud-card { grid-template-columns: 1fr; }
    .spot-visual { min-height: 300px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .spot-data { padding: 30px; }
    .spot-project-name { font-size: 2.5rem; }
    .metric-val { font-size: 1.5rem; }
}



/* ========================================= */
/* UPDATED: FILTER BAR (With Swipe Hint)     */
/* ========================================= */

.prt-filter-section {
    width: 100%;
    margin: 0 auto 60px auto;
    background: transparent;
    padding: 0 20px;
}

.prt-filter-container {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    position: relative; /* Needed for positioning context */
}

/* SCROLL WRAPPER (Restored Flex + Fade Mask) */
.prt-filter-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto; /* Enable Swipe */
    white-space: nowrap;
    padding-bottom: 5px; /* Space for scrollbar */
    padding-right: 40px; /* Extra space at end so last button isn't cut off by mask */
    
    /* Hide Scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
    
    /* THE FADE MASK: This fades the right edge on mobile */
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.prt-filter-scroll::-webkit-scrollbar { 
    display: none; 
}

/* BUTTON STYLING */
.prt-filter-btn {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Default: Ghost Style */
    background: transparent;
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevents squishing */
}

/* Hover State */
.prt-filter-btn:hover {
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* Active State */
.prt-filter-btn.active {
    background: #FF5733; 
    border-color: #FF5733;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.4);
}

/* DESKTOP EXPANSION (Removes fade, centers buttons) */
@media (min-width: 768px) {
    .prt-filter-scroll {
        justify-content: center; /* Center buttons */
        padding-right: 0;
        
        /* Remove the mask on desktop since we don't scroll */
        mask-image: none;
        -webkit-mask-image: none;
    }
}




/* ========================================= */
/* PAGE: PORTFOLIO (Grid + Marquee + CTA)    */
/* ========================================= */

/* ========================================= */
/* PORTFOLIO: GRID & 3D CARDS (FIXED)        */
/* ========================================= */

.prt-grid-section {
    padding: 0 20px 80px 20px;
    background: #050505;
}

/* YOUR ORIGINAL GRID CONTAINER (Untouched) */
.prt-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; 
    gap: 40px;
}
@media (min-width: 768px) { .prt-grid-container { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .prt-grid-container { grid-template-columns: 1fr 1fr 1fr; } }

/* --- 3D CARD STRUCTURE --- */
.prt-card-3d {
    background: transparent;
    height: 450px;
    perspective: 1000px; /* Essential for depth */
    position: relative;
    z-index: 1;
}

.prt-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    cursor: pointer;
}

.prt-card-3d:hover .prt-card-inner {
    transform: rotateY(180deg);
}

/* FRONT & BACK SHELLS */
.prt-card-front, .prt-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    top: 0; left: 0;
    transform-style: preserve-3d; 
    display: flex;
    flex-direction: column;
}

/* --- CARD FRONT STYLES --- */
.prt-card-front {
    background-color: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    align-items: flex-start;
    justify-content: flex-end;
}

.prt-bg-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: grayscale(100%) brightness(0.6);
    transition: 0.5s;
    border-radius: 12px;
    transform: translateZ(0px);
}

.prt-card-3d:hover .prt-bg-img {
    filter: grayscale(0%) brightness(0.8);
}

.prt-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, transparent 80%);
    z-index: 1;
    border-radius: 12px;
    transform: translateZ(1px);
}

.prt-floating-border {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(255, 87, 51, 0.5);
    border-radius: 8px;
    z-index: 2;
    pointer-events: none;
    transform: translateZ(2rem); 
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.2);
}

.prt-content-front {
    position: relative;
    z-index: 3;
    padding: 40px 30px 30px 30px;
    width: 100%;
    text-align: left;
    transform: translateZ(3rem);
}

.prt-badge {
    color: #FF5733;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.prt-title {
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    line-height: 0.9;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.prt-year {
    color: #aaa;
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
}

/* --- CARD BACK STYLES (UPDATED) --- */
.prt-card-back {
    background: #0a0a0a;
    transform: rotateY(180deg);
    padding: 25px;
    text-align: left;
    border: 1px solid #FF5733;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.1);
}

/* Back Layout Wrapper */
.prt-back-layout {
    display: flex; flex-direction: column; 
    height: 100%; 
    justify-content: space-between; 
    transform: translateZ(1rem);
}

/* Header Section */
.prt-back-meta {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 8px; margin-bottom: 10px;
}
.prt-id { font-family: 'Courier New', monospace; font-size: 0.65rem; color: #666; }
.prt-status-dot { width: 6px; height: 6px; background: #2ecc71; border-radius: 50%; box-shadow: 0 0 5px #2ecc71; }

.prt-back-name {
    font-family: 'Teko', sans-serif; font-size: 2rem; color: #fff;
    margin: 0 0 10px 0; text-transform: uppercase; line-height: 0.9;
}

/* Description Text */
.prt-short-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 15px;
    border-left: 2px solid #FF5733; 
    padding-left: 10px;
    text-align: left;
}

/* New Metrics Grid */
.prt-mini-stats {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.05); 
    border-radius: 4px;
    padding: 12px 10px; 
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    transform: translateZ(2rem); 
}

.mini-stat { text-align: center; width: 48%; }

.mini-val { 
    display: block; font-family: 'Teko', sans-serif; 
    font-size: 1.6rem; line-height: 1; 
    text-shadow: 0 0 10px rgba(255, 87, 51, 0.3);
}

.mini-label { 
    font-family: 'Courier New', monospace; font-size: 0.6rem; 
    color: #aaa; letter-spacing: 1px;
}

.mini-divider { width: 1px; height: 25px; background: rgba(255,255,255,0.1); }

/* Footer Section */
.prt-tech-row { 
    display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; 
}
.prt-tag { 
    font-size: 0.65rem; background: #000; padding: 4px 8px; 
    border: 1px solid #333; color: #888; 
    font-family: 'Courier New', monospace; 
}

.prt-view-btn {
    display: block; width: 100%; text-align: center;
    background: rgba(255,255,255,0.05);
    color: #fff; text-decoration: none;
    padding: 12px;
    font-family: 'Courier New'; font-weight: 700; font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
    transform: translateZ(2rem);
}

.prt-view-btn:hover {
    background: #FF5733; color: #fff;
    border-color: #FF5733;
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.4);
}


/* --- NEW SECTION: KINETIC MARQUEE --- */
.prt-marquee-section {
    background: #FF5733;
    padding: 15px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border-top: 1px solid #FF5733;
    border-bottom: 1px solid #FF5733;
    transform: skewY(-2deg); /* Awwwards Angle */
    margin: 40px 0;
}

.prt-marquee-track {
    display: inline-block;
    animation: marqueeScroll 20s linear infinite;
    font-family: 'Teko', sans-serif; /* Or 'Raleway' if Teko isn't loaded */
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
}

.prt-marquee-track span { margin: 0 40px; }
.prt-marquee-track .text-orange { color: #fff; } /* Inverted logic for orange bg */

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* --- FINAL CTA: COMMAND TERMINAL --- */
.prt-final-cta {
    padding: 120px 20px;
    background: radial-gradient(circle at center, #111 0%, #000 100%);
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
}

.cta-signal-light {
    width: 10px; height: 10px; background: #2ecc71;
    border-radius: 50%; box-shadow: 0 0 10px #2ecc71;
    margin: 0 auto 30px auto;
    animation: blink 2s infinite;
}
@keyframes blink { 0%,100% {opacity:1;} 50% {opacity:0.3;} }

.prt-cta-wrapper { max-width: 700px; margin: 0 auto; }

.prt-final-title {
    font-family: 'Raleway', sans-serif;
    font-size: 3.5rem; /* Huge Typography */
    color: #fff;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -1px;
}

.prt-final-sub {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    margin-bottom: 50px;
    line-height: 1.6;
}

.prt-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    color: #FF5733;
    border: 1px solid #FF5733;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    padding: 20px 45px;
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 4px;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.prt-final-btn:hover {
    background: #FF5733;
    color: #fff;
    box-shadow: 0 0 40px rgba(255, 87, 51, 0.4);
}

/* ========================================= */
/* PAGE: INDUSTRIAL CASE STUDY (COMPLETE)    */
/* ========================================= */

:root {
    --case-accent: #FF5733; 
    --case-bg: #050505;
    --case-card: #0F0F0F;
    --case-border: #222;
}

/* --- UTILS --- */
.case-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.mono-tag { 
    font-family: 'Courier New', monospace; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-size: 0.75rem; 
    color: white; 
    display: block; 
    margin-bottom: 8px;
}
.accent-text { color: var(--case-accent); }

/* --- 1. HERO SECTION --- */
.case-hero {
    position: relative; height: 90vh; display: flex; align-items: center; justify-content: center;
    background: #000; overflow: hidden; border-bottom: 1px solid var(--case-border);
}
.case-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0.5; z-index: 1; /* Full Color */
}
.case-scanline-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%; pointer-events: none; z-index: 2;
}
.case-hero-content { 
    text-align: center; position: relative; z-index: 5; 
    border: 1px solid var(--case-accent); padding: 40px 20px; 
    background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
    max-width: 800px; width: 100%;
    box-shadow: 0 0 30px rgba(255, 87, 51, 0.1);
}
.case-title {
    font-family: 'Anton SC', sans-serif; font-size: clamp(3.5rem, 10vw, 7rem); 
    color: #fff; line-height: 0.9; margin: 0; text-transform: uppercase;
}
.case-id-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--case-accent); color: #000; padding: 2px 12px;
    font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.8rem;
}
.case-scroll-indicator {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 5;
}
.scroll-line {
    width: 2px; height: 60px; background: var(--case-accent); margin: 10px auto 0;
    animation: scrollDown 2s infinite;
}
@keyframes scrollDown { 0% { height: 0; opacity: 0; } 50% { height: 60px; opacity: 1; } 100% { height: 0; opacity: 0; transform: translateY(60px); } }

/* --- 2. DATA GRID (MOBILE SCROLL) --- */
.case-data-section { background: var(--case-bg); padding: 60px 0; border-bottom: 1px solid var(--case-border); }
.case-grid-4 {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
}
@media(max-width: 600px) {
    .mobile-scroll-snap {
        display: flex; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory;
    }
    .case-stat-card { min-width: 200px; scroll-snap-align: center; }
}
@media(min-width: 900px) { .case-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.case-stat-card {
    background: var(--case-card); border: 1px solid var(--case-border);
    padding: 25px; transition: 0.3s; position: relative;
}
.case-stat-card:hover { border-color: var(--case-accent); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.case-stat-val { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; }

/* --- 3. NARRATIVE --- */
.case-narrative { background: var(--case-bg); padding: 100px 0; }
.case-narrative-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media(min-width: 900px) { .case-narrative-grid { grid-template-columns: 1fr 1fr; } }

.case-info-card {
    background: var(--case-card); border: 1px solid var(--case-border);
    padding: 40px; position: relative; transition: 0.3s;
}
.case-info-card:hover { border-color: #333; background: #111; }
.case-info-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--case-accent), transparent);
}
.case-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.case-icon { color: var(--case-accent); font-size: 1.5rem; }
.case-heading { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.8rem; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: -1px; }
.case-body { font-family: 'Poppins', sans-serif; color: #aaa; line-height: 1.7; font-size: 1rem; }

/* --- 4. VISUALS (5-ITEM MASONRY GRID) --- */
.case-visuals { background: #000; padding: 100px 0; border-top: 1px solid var(--case-border); }
.case-visual-header { 
    border-bottom: 1px solid var(--case-border); margin-bottom: 40px; padding-bottom: 20px;
    display: flex; justify-content: space-between; align-items: flex-end;
}
.case-visual-title { font-family: 'Anton SC', sans-serif; font-size: 2.5rem; color: #fff; margin: 0; }

.case-gallery-grid {
    display: grid; gap: 20px; grid-template-columns: 1fr;
}
/* --- UPDATED MEDIA QUERY FOR PERFECT BENTO GRID --- */
@media(min-width: 900px) { 
    .case-gallery-grid { 
        /* CHANGE 1: Switch to 2 Columns. This handles 4 items much better. */
        grid-template-columns: repeat(2, 1fr); 
        /* CHANGE 2: Bump height slightly to let 16:9 images breathe */
        grid-auto-rows: 350px; 
    }
    
    /* Hero Image now takes the FULL top row */
    .wide { grid-column: 1 / -1; } 
    
    /* Mobile view takes 2 rows height on the side */
    .tall { grid-row: span 2; }    
    
    .full { grid-column: 1 / -1; } 
}

.case-frame {
    position: relative; border: 1px solid var(--case-border); height: 100%; overflow: hidden;
    background: #050505; cursor: pointer;
}
.case-frame:hover { border-color: var(--case-accent); }
.case-corner { position: absolute; width: 10px; height: 10px; border: 2px solid var(--case-accent); z-index: 2; transition: 0.3s; opacity: 0; }
.case-frame:hover .case-corner { opacity: 1; }
.tl { top: 0; left: 0; border-bottom: 0; border-right: 0; }
.br { bottom: 0; right: 0; border-top: 0; border-left: 0; }

.case-img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.5s ease-out; 
    display: block;
    /* FULL COLOR RESTORED */
    filter: none; opacity: 1;
}
video.case-img { object-fit: cover; width: 100%; height: 100%; }
.case-frame:hover .case-img { transform: scale(1.03); }

.case-tag {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,0.9); color: var(--case-accent);
    font-family: 'Courier New', monospace; font-size: 0.75rem;
    padding: 10px; border-top: 1px solid var(--case-border);
}

/* --- 5. RESULTS --- */
.case-results { background: #080808; padding: 100px 0; text-align: center; border-top: 1px solid var(--case-border); position: relative; overflow: hidden; }
.case-big-stat { font-family: 'Anton SC', sans-serif; font-size: 5rem; color: #fff; line-height: 1; margin-bottom: 10px; }
.case-cta-btn {
    background: var(--case-accent); color: #000; padding: 18px 40px;
    font-family: 'Raleway', sans-serif; font-weight: 800; text-transform: uppercase;
    text-decoration: none; display: inline-block; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
    transition: 0.3s; margin-top: 30px;
}
.case-cta-btn:hover { background: #fff; padding-right: 50px; }

/* The Rotating Scanner */
.scan-reticle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 600px; height: 600px; border: 1px dashed #333; border-radius: 50%;
    pointer-events: none; opacity: 0.3;
}

/* --- 6. ANIMATION LOGIC (NATIVE OBSERVER) --- */

/* Initial State: Hidden and shifted down */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Active State: Visible (Added by JS) */
.scroll-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Reveal Hero: Handled by GSAP, but defaulted to visible for safety */
.reveal-hero {
    opacity: 1; 
}



/* Insights Page */

 /* ========================================= */
/* PAGE: INSIGHTS (Namespace: ins-)          */
/* ========================================= */

/* --- HERO SECTION --- */
.ins-hero-section {
    position: relative;
    width: 100%;
    /* Mobile Spacing: Clears the fixed nav */
    padding-top: 140px; 
    padding-bottom: 80px;
    background-color: #050505; 
    overflow: hidden;
    text-align: center; /* Centered Command Style */
}

/* BACKGROUND GRID (Shared Texture) */
.ins-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

/* ORANGE GLOW (Top Center) */
.ins-hero-section::after {
    content: '';
    position: absolute;
    top: -60%; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.12), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ins-container {
    position: relative;
    z-index: 2;
    max-width: 900px; /* Slightly wider for readability */
    margin: 0 auto;
    width:90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HERO BADGE (Boxed Style) */
.ins-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 87, 51, 0.1);
    border: 1px solid rgba(255, 87, 51, 0.2);
    padding: 8px 16px;
    border-radius: 4px;
    color: #FF5733;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    backdrop-filter: blur(5px);
}

/* HEADLINE */
.ins-hero-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.5rem); 
    color: #fff;
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}

.ins-hero-title .text-orange { color: #FF5733; }

/* SUBHEADLINE */
.ins-hero-sub {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

/* DESKTOP TWEAKS */
@media (min-width: 768px) {
    .ins-hero-section {
        padding-top: 180px;
    }
}



/* ========================================= */
/* INSIGHTS: FEATURED SECTION (HUD STYLE)    */
/* ========================================= */

.ins-feat-section {
    padding: 120px 20px 80px 20px; /* Top padding accounts for Nav */
    background: #050505;
    /* Reuse the high-tech grid background */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    border-bottom: 1px solid rgba(255, 87, 51, 0.1);
}

.text-orange { color: #FF5733; }

/* Header */
.ins-feat-header {
    display: flex; 
    flex-direction: column; /* Stack on mobile */
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 87, 51, 0.2);
    gap: 10px;
}

.ins-feat-badge {
    font-family: 'Courier New', monospace; font-size: 0.75rem;
    color: #FF5733; letter-spacing: 2px; font-weight: 700;
}

.ins-feat-title {
    font-family: 'Raleway', sans-serif; font-size: 1.8rem;
    color: #fff; font-weight: 800; margin: 0;
    line-height: 1;
}

/* --- HUD CARD (Mobile Default) --- */
.ins-feat-card {
    display: flex; 
    flex-direction: column; /* Stack vertically on mobile */
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    transition: all 0.4s ease;
}

.ins-feat-card:hover {
    border-color: rgba(255, 87, 51, 0.4);
    box-shadow: 0 0 50px rgba(255, 87, 51, 0.15);
}

/* Corners */
.ins-corner {
    position: absolute; width: 15px; height: 15px;
    border: 2px solid #FF5733;
    transition: all 0.4s ease;
    z-index: 10;
}
.top-left { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.top-right { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.bottom-left { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.bottom-right { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.ins-feat-card:hover .ins-corner { width: 25px; height: 25px; }


/* --- VISUAL (Top on Mobile) --- */
.ins-feat-visual {
    position: relative;
    width: 100%;
    height: 300px; /* Mobile height */
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ins-feat-img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    transition: all 0.6s ease;
}
.ins-feat-card:hover .ins-feat-img { filter: grayscale(0%) contrast(1); transform: scale(1.03); }

/* Scan Line Animation */
.ins-scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: rgba(255, 87, 51, 0.6);
    box-shadow: 0 0 15px rgba(255, 87, 51, 0.8);
    z-index: 5;
    animation: insScan 4s linear infinite;
    opacity: 0.5;
}
@keyframes insScan { 0% {top: -10%;} 100% {top: 110%;} }

.ins-visual-badge {
    position: absolute; top: 15px; left: 15px;
    background: rgba(0,0,0,0.7); color: #FF5733;
    padding: 4px 8px; font-family: 'Courier New', monospace;
    font-size: 0.65rem; font-weight: 700; border: 1px solid #FF5733;
    z-index: 5;
}

/* Button Overlay */
.ins-feat-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease; z-index: 6;
}
.ins-feat-card:hover .ins-feat-overlay { opacity: 1; }

.ins-feat-btn {
    display: flex; align-items: center; gap: 10px;
    background: transparent; border: 1px solid #FF5733;
    padding: 12px 25px; color: #fff; text-decoration: none;
    font-family: 'Teko', sans-serif; font-size: 1.3rem; letter-spacing: 1px;
    transition: all 0.3s ease;
}
.ins-feat-btn:hover { background: #FF5733; color: #000; }


/* --- DATA SIDE (Bottom on Mobile) --- */
.ins-feat-data {
    padding: 30px 20px;
    display: flex; flex-direction: column; justify-content: center;
}

.ins-feat-top-bar {
    display: flex; justify-content: space-between;
    font-family: 'Courier New', monospace; font-size: 0.7rem;
    color: #666; margin-bottom: 15px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.ins-feat-name {
    font-family: 'Raleway', sans-serif; font-size: 2rem;
    line-height: 1; color: #fff; margin: 0 0 15px 0;
    text-transform: uppercase;
}

.ins-feat-desc {
    font-family: 'Poppins', sans-serif; font-size: 0.95rem;
    color: #ccc; line-height: 1.6; margin-bottom: 30px;
}

/* Metrics Box */
.ins-metrics-box {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px; margin-bottom: 30px;
}

.ins-metric-item { text-align: center; width: 33%; }
.ins-metric-val {
    display: block; font-family: 'Teko', sans-serif;
    font-size: 1.8rem; color: #FF5733; line-height: 1;
}
.ins-metric-label {
    font-family: 'Courier New', monospace; font-size: 0.65rem; color: #888;
}
.ins-metric-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.1); }


/* Footer Stack */
.ins-feat-footer {
    display: flex; flex-direction: column; gap: 15px; /* Stack on mobile */
}

.ins-feat-stack { display: flex; gap: 6px; flex-wrap: wrap; }

.ins-pill {
    font-size: 0.65rem; color: #aaa; background: #111;
    border: 1px solid #333; padding: 4px 10px;
    font-family: 'Courier New', monospace; letter-spacing: 1px;
}

.ins-status-light {
    font-family: 'Courier New', monospace; font-size: 0.7rem;
    color: #2ecc71; display: flex; align-items: center; gap: 8px;
}
.ins-status-dot {
    width: 6px; height: 6px; background: #2ecc71;
    border-radius: 50%; box-shadow: 0 0 8px #2ecc71;
    animation: insPulse 2s infinite;
}
@keyframes insPulse { 0%{opacity:1;} 50%{opacity:0.4;} 100%{opacity:1;} }


/* ========================================= */
/* DESKTOP (Min-Width 900px)                 */
/* ========================================= */
@media (min-width: 900px) {
    .ins-feat-header {
        flex-direction: row; 
        justify-content: space-between; 
        align-items: flex-end;
    }
    
    .ins-feat-card {
        display: grid; 
        grid-template-columns: 1.4fr 1fr; /* Split View */
    }
    
    .ins-feat-visual {
        height: 100%; 
        min-height: 450px;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.1);
    }
    
    .ins-feat-data { padding: 40px; }
    
    .ins-feat-name { font-size: 3rem; }
    
    .ins-feat-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .ins-metric-val { font-size: 2.2rem; }
}




/* ========================================= */
/* INSIGHTS FEED: PREMIUM CLEAN STYLE        */
/* ========================================= */

/* ========================================= */
/* INSIGHTS: INDUSTRIAL GRADE                */
/* ========================================= */

.ins-feed-section {
    padding: 40px 0px 100px 0px;
    background-color: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ins-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 1. TABS: THE FIX (No More Jumping) --- */
.ins-tabs-header {
    margin-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* This creates a horizontal scroll on mobile (like Instagram/YouTube) 
   so tabs NEVER jump to a new line. It's clean and stable. */
.ins-tabs-scroll {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding-bottom: 15px; /* Space for scrollbar */
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.ins-tabs-scroll::-webkit-scrollbar { display: none; } /* Hide Chrome */

.ins-tab-link {
    background: transparent;
    border: none;
    color: #666;
    font-family: 'Raleway', sans-serif;
 /* Tactical Font */
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap; /* Prevents text wrapping */
    position: relative;
    transition: 0.3s;
    padding: 0 0 5px 0;
}

/* Active State: Orange Underline (Like your Homepage) */
.ins-tab-link::after {
    content: '';
    position: absolute;
    bottom: -16px; /* Aligns with container border */
    left: 0;
    width: 0%;
    height: 2px;
    background: #FF5733;
    transition: 0.3s;
}

.ins-tab-link:hover { color: #fff; }

.ins-tab-link.active { color: #fff; }
.ins-tab-link.active::after { width: 100%; }


/* --- 2. GRID SYSTEM --- */
.ins-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 Col */
    gap: 30px;
}

@media (min-width: 768px) {
    .ins-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ins-grid { grid-template-columns: repeat(3, 1fr); }
}


/* --- 3. CARDS: MATCHING "IMPEX AWARDS" --- */
.ins-card {
    background: #0a0a0a; /* Deep dark bg */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-radius: 8px; /* Slight round, high-end feel */
    overflow: hidden;
    transition: 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ins-card:hover {
    border-color: #FF5733; /* Orange Glow on Hover */
    transform: translateY(-5px);
}

.ins-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ins-img-frame {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ins-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    filter: brightness(0.9);
}

.ins-card:hover .ins-img-frame img {
    transform: scale(1.05);
    filter: brightness(1);
}

/* CARD BODY */
.ins-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Header with Title + Badge */
.ins-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.ins-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 800; /* Bold Homepage Style */
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

/* The "Manufacturing" Badge Clone */
.ins-badge {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: #FF5733;
    border: 1px solid #FF5733; /* Outlined look */
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 87, 51, 0.05);
}

.ins-excerpt {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #999;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Footer (WordPress/UIUX Clone) */
.ins-card-footer {
    display: flex;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    margin-top: auto;
}

.ins-meta {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}
.ins-meta i { color: #888; }


/* --- TABS VISIBILITY ANIMATION --- */
.ins-tab-content { display: none; }
.ins-tab-content.active {
    display: block;
    animation: fadeUp 0.5s ease forwards;
}

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


/* ========================================= */
/* INSIGHTS: TACTICAL BRIDGE (UPGRADED)      */
/* ========================================= */

/* The Section Container - Handles Spacing */
.ins-bridge-section {
    padding: 0px 0px;
    background: #050505;
   
}

/* The Panel Appearance */
.ins-bridge-panel {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column; /* Mobile First: Stacked */
    gap: 30px;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Premium subtle glow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Technical background accent on the right */
.ins-bridge-panel::before {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 51, 0.05));
    transform: skewX(-20deg) translateX(50px);
    pointer-events: none;
}

/* Content Styling */
.ins-bridge-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: column; /* Mobile stack for icon+text */
    position: relative;
    z-index: 2;
}

.bridge-icon {
    font-size: 2.5rem;
    color: rgba(255, 87, 51, 0.3); /* Subtle orange */
}

.ins-bridge-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    line-height: 1.1;
}

.ins-bridge-sub {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Premium Button Styling */
.ins-bridge-btn {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #FF5733;
    text-decoration: none;
    padding: 14px 28px;
    border: 1px solid rgba(255, 87, 51, 0.5);
    border-radius: 4px;
    transition: 0.3s all ease;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 87, 51, 0.05);
    white-space: nowrap; /* Prevents button text wrapping */
    position: relative;
    z-index: 2;
}

.ins-bridge-btn:hover {
    background: #FF5733;
    color: #fff;
    border-color: #FF5733;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.3);
    transform: translateY(-2px);
}

/* DESKTOP LAYOUT */
@media (min-width: 768px) {
    .ins-bridge-panel {
        flex-direction: row; /* Side by side */
        justify-content: space-between;
        text-align: left;
        padding: 40px;
    }
    .ins-bridge-content {
        flex-direction: row; /* Icon next to text */
    }
    .ins-bridge-heading { font-size: 1.8rem; }
}



/* ========================================= */
/* INSIGHTS: DATA STREAM UPLINK              */
/* ========================================= */

.ins-newsletter-section {
    padding: 100px 0px 100px 0px;
    background-color: #050505;
}

.ins-news-card {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
    max-width: 900px; 
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Stacked */
    gap: 40px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    /* Subtle inner glow */
    background: radial-gradient(circle at top right, rgba(255, 87, 51, 0.05), transparent 60%), #0a0a0a;
}

/* --- 1. THE DATA STREAM ANIMATION --- */
.ins-stream-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Core Icon */
.stream-icon {
    font-size: 2.5rem;
    color: #FF5733;
    z-index: 5;
    filter: drop-shadow(0 0 15px rgba(255, 87, 51, 0.8));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* The Solid Core */
.stream-core {
    position: absolute;
    width: 60px; height: 60px;
    background: rgba(255, 87, 51, 0.1);
    border: 1px solid rgba(255, 87, 51, 0.5);
    border-radius: 50%;
    z-index: 2;
}

/* Pulsing Rings */
.stream-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
}

/* Ring 1: Fast Pulse */
.r1 {
    width: 100%; height: 100%;
    animation: streamPulse 2s infinite ease-out;
    border-color: rgba(255, 87, 51, 0.3);
}

/* Ring 2: Medium Pulse */
.r2 {
    width: 100%; height: 100%;
    animation: streamPulse 2s infinite 0.5s ease-out;
}

/* Ring 3: Slow Wide Pulse */
.r3 {
    width: 100%; height: 100%;
    animation: streamPulse 2s infinite 1s ease-out;
}

@keyframes streamPulse {
    0% { width: 60px; height: 60px; opacity: 0.8; border-color: rgba(255, 87, 51, 0.5); }
    100% { width: 200px; height: 200px; opacity: 0; border-color: rgba(255, 255, 255, 0.05); }
}


/* --- 2. CONTENT --- */
.ins-news-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ins-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Courier New', monospace;
    color: #2ecc71; /* Green */
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.status-dot {
    width: 8px; height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 8px #2ecc71;
}

.ins-news-title {
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    color: #fff;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px;
    text-transform: uppercase;
    text-align: left;
}
.ins-news-title .text-orange { color: #FF5733; }

.ins-news-sub {
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 1.6;
    text-align: left;
}


/* --- 3. THE FORM --- */
.ins-input-wrapper {
    display: flex;
    gap: 10px;
    flex-direction: column; /* Mobile: Stacked */
}

.ins-input-wrapper input {
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 6px;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    outline: none;
    transition: 0.3s;
}
.ins-input-wrapper input:focus {
    border-color: #FF5733;
    box-shadow: 0 0 10px rgba(255, 87, 51, 0.2);
}

.ins-submit-btn {
    background: #FF5733;
    border: none;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    padding: 15px 30px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ins-submit-btn:hover {
    background: #e64a19;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.4);
    transform: translateY(-2px);
}

.ins-disclaimer {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: #444;
    margin-top: 15px;
}

/* DESKTOP LAYOUT */
@media (min-width: 900px) {
    .ins-news-card {
        grid-template-columns: 0.8fr 1.2fr; /* Anim on left, Content on right */
        text-align: left;
        align-items: center;
    }
    
    .ins-news-content {
        text-align: left;
        display: block;
    }

    .ins-status-badge { justify-content: flex-start; }
    
    .ins-input-wrapper {
        flex-direction: row; /* Desktop: Side by Side */
    }
    
    .ins-input-wrapper input { flex-grow: 1; }
    
    .ins-stream-container {
        width: 100%;
        height: 100%;
        max-height: 250px;
    }
}





/* ========================================= */
/* PAGE: ARTICLE READOUT (Namespace: art-)   */
/* ========================================= */

/* General Layout */
.art-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.art-container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* --- 1. HERO SECTION --- */
.art-hero-section {
    position: relative;
    padding: 160px 0 100px 0;
    background: #000;
    border-bottom: 1px solid rgba(255, 87, 51, 0.2); /* Orange tint border */
    overflow: hidden;
}

.art-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0.25; filter: grayscale(100%) contrast(1.2);
}

.art-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, transparent 0%, #050505 90%);
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 100% 40px; /* Scanline effect */
}

/* Breadcrumbs */
.art-system-path {
    font-family: 'Courier New', monospace; font-size: 0.75rem; color: #666;
    margin-bottom: 40px; letter-spacing: 1px;
}
.path-active { color: #FF5733; }

/* Content */
.art-meta-badge {
    display: inline-block;
    border: 1px solid rgba(255, 87, 51, 0.5);
    color: #FF5733; font-family: 'Courier New', monospace;
    font-size: 0.7rem; padding: 5px 12px; margin-bottom: 20px;
    background: rgba(255, 87, 51, 0.05);
}

.art-title {
    font-family: 'Raleway', sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: #fff; font-weight: 800; line-height: 1;
    margin: 0 0 20px 0; text-transform: uppercase;
    text-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.art-subtitle {
    font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: #aaa;
    max-width: 650px; line-height: 1.6; margin-bottom: 50px;
}

/* Meta Grid (The "HUD") */
.art-meta-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px; border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px; max-width: 600px;
}
@media(min-width: 768px) { .art-meta-grid { grid-template-columns: repeat(4, 1fr); } }

.meta-item { display: flex; flex-direction: column; }
.meta-label { font-family: 'Courier New', monospace; font-size: 0.65rem; color: #555; margin-bottom: 5px; }
.meta-val { font-family: 'Raleway', sans-serif; font-size: 0.9rem; color: #fff; font-weight: 700; }


/* --- 2. BODY SECTION --- */
.art-body-section {
    padding: 80px 0;
    background: #050505;
}

/* Intro Box */
.art-intro-box {
    border-left: 3px solid #FF5733;
    padding-left: 30px; margin-bottom: 60px;
}
.lead-text {
    font-family: 'Poppins', sans-serif; font-size: 1.25rem;
    color: #ccc; line-height: 1.8;
}
.highlight { color: #fff; font-weight: 700; border-bottom: 1px solid #FF5733; }

/* Article Blocks */
.art-block { margin-bottom: 60px; }
.art-block h2 {
    font-family: 'Raleway', sans-serif; color: #fff; font-size: 1.8rem;
    margin-bottom: 25px; font-weight: 800; letter-spacing: -0.5px;
}
.art-block p {
    font-family: 'Poppins', sans-serif; font-size: 1.05rem;
    color: #999; line-height: 1.8; margin-bottom: 20px;
}

/* Data Card (The "System Alert") */
.art-data-card {
    background: #0a0a0a; border: 1px solid #333;
    padding: 30px; border-radius: 8px;
    display: flex; gap: 20px; margin: 40px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.data-icon { font-size: 2rem; color: #2ecc71; } /* Green for Data */
.data-content h4 {
    font-family: 'Courier New', monospace; color: #2ecc71;
    font-size: 0.8rem; margin: 0 0 10px 0; letter-spacing: 1px;
}
.data-content p { color: #ddd; margin: 0; font-size: 1rem; }

/* Checklist */
.art-checklist { list-style: none; padding: 0; margin-top: 30px; }
.art-checklist li {
    display: flex; gap: 15px; margin-bottom: 20px;
    background: rgba(255,255,255,0.02); padding: 15px; border: 1px solid rgba(255,255,255,0.05);
}
.check-icon { font-size: 1.2rem; margin-top: 2px; }
.check-content { color: #ccc; font-family: 'Poppins', sans-serif; font-size: 0.95rem; line-height: 1.6; }
.check-content strong { color: #fff; }

/* Figures/Images */
.art-figure { margin: 60px 0; }
.art-img-frame {
    position: relative; border: 1px solid #333;
    padding: 10px; background: #000; overflow: hidden;
}
.art-img-frame img { width: 100%; display: block; filter: grayscale(20%); }

/* Scanline Animation on Image */
.scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: rgba(255, 87, 51, 0.5);
    animation: scanDown 3s linear infinite;
    box-shadow: 0 0 10px #FF5733;
}
@keyframes scanDown { 0% {top:0;} 100% {top:100%;} }

figcaption {
    text-align: center; font-family: 'Courier New', monospace;
    font-size: 0.7rem; color: #555; margin-top: 15px; letter-spacing: 1px;
}

.closing-statement {
    font-size: 1.2rem; color: #fff; font-weight: 700; margin-top: 40px;
}

/* Animations */
.scroll-fade-up {
    opacity: 0; transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.scroll-fade-up.visible { opacity: 1; transform: translateY(0); }









/* homepage: thank-you.html */


.thank-you-container { max-width: 600px; }
.thank-you-container .icon { font-size: 4rem; color: #2ecc71; margin-bottom: 20px; }
.thank-you-container h1 { font-family: 'Raleway', sans-serif; font-size: 3rem; margin-bottom: 15px; }
.thank-you-container p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; }
.next-step-button { display: inline-block; background: #1c64ac; color: #fff; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; }
.next-step-button:hover { transform: scale(1.05); }









/* web dev tab: services page thank you.html */

/* --- Scoped Styles for Checklist Thank You Page --- */
.checklist-thankyou__body { 
    background-color: #0A0A0A; 
    color: #fff; 
    font-family: 'Poppins', sans-serif; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    text-align: center; 
    padding: 20px; 
    margin: 0;
}
.checklist-thankyou__container { 
    max-width: 600px; 
    width: 100%;
}
.checklist-thankyou__icon { 
    font-size: 4rem; 
    color: #2ecc71; 
    margin-bottom: 20px; 
}
.checklist-thankyou__title { 
    font-family: 'Raleway', sans-serif; 
    font-size: 3rem; 
    margin: 0 0 15px 0;
}
.checklist-thankyou__subtitle { 
    font-size: 1.2rem; 
    color: rgba(255, 255, 255, 0.8); 
    margin: 0 0 30px 0;
}
.checklist-thankyou__button { 
    display: inline-block; 
    background: #FF5733; 
    color: #fff; 
    padding: 16px 32px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: 600; 
    transition: transform 0.3s ease; 
}
.checklist-thankyou__button:hover { 
    transform: scale(1.05); 
}

/* ai tab: services page thank you.html */        
  /* --- Scoped Styles for AI Guide Thank You Page --- */
.ai-guide-thankyou__body { background-color: #0A0A0A; color: #fff; font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 20px; margin: 0; }
.ai-guide-thankyou__container { max-width: 600px; width: 100%; }
.ai-guide-thankyou__icon { font-size: 4rem; color: #2ecc71; margin-bottom: 20px; }
.ai-guide-thankyou__title { font-family: 'Raleway', sans-serif; font-size: 3rem; margin: 0 0 15px 0; }
.ai-guide-thankyou__subtitle { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); margin: 0 0 30px 0; }
.ai-guide-thankyou__button { display: inline-block; background: #1c64ac; color: #fff; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; }
.ai-guide-thankyou__button:hover { transform: scale(1.05); }


/* --- Scoped Styles for SEO Report Thank You Page --- */
.seo-thankyou__body { background-color: #0A0A0A; color: #fff; font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 20px; margin: 0; }
.seo-thankyou__container { max-width: 600px; width: 100%; }
.seo-thankyou__icon { font-size: 4rem; color: #2ecc71; margin-bottom: 20px; }
.seo-thankyou__title { font-family: 'Raleway', sans-serif; font-size: 3rem; margin: 0 0 15px 0; }
.seo-thankyou__subtitle { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); margin: 0 0 30px 0; }
.seo-thankyou__button { display: inline-block; background: #1c64ac; color: #fff; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; }
.seo-thankyou__button:hover { transform: scale(1.05); }



/* Privacy page */

.legal-page-content{
  width: 90%;
  margin: 0 auto;
}



/* ================================================= */
/* FINAL, DEFINITIVE HERO SCROLL FIX (VERSION 2)     */
/* ================================================= */

/* Make the background and content layers 'ghosts' so you can scroll through them */
.hero-bg,
.lightup,
.hero-content {
  pointer-events: none;
}

/* VERY IMPORTANT: Make ONLY the interactive button 'solid' and clickable again */
/* This targets the link and the button inside your hero content */
.hero-content .button-container,
.hero-content .button-container a,
.hero-content .herob {
  pointer-events: auto;
}