/**
 * ============================================================================
 * BrandGlows - Full-Width Responsive Desktop Layout Restoration
 * Eliminates all narrow constraints, fixed widths, and white borders
 * ============================================================================
 */

/* 1. ROOT & BODY FULL-WIDTH ENFORCEMENT */
html {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #020408 !important;
  background-color: #020408 !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  box-sizing: border-box !important;
}

body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #020408 !important;
  background-color: #020408 !important;
  color: #FFFFFF !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
  zoom: 1 !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* 2. WRAPPER & MAIN CONTAINER FULL-WIDTH */
#page,
.site,
main,
.page-content,
.site-content,
.entry-content,
#content,
.wp-site-blocks {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* 3. FULL-WIDTH CINEMATIC SECTIONS */
.site-header,
.hero-section,
.marquee-section,
.section,
.cta-section,
.cta-section-cinematic,
.site-footer,
.site-footer-cinematic {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #020408 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* 4. CONTENT CONTAINERS (1240px desktop container, responsive scaling) */
.container,
.header-inner,
.cta-inner {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1280px) {
  .container,
  .header-inner,
  .cta-inner {
    max-width: 1140px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 991px) {
  .container,
  .header-inner,
  .cta-inner {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 5. MULTI-COLUMN RESPONSIVE GRIDS */
.grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  width: 100% !important;
}

.grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
}

.grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

@media (max-width: 991px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 576px) {
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* 6. PREVENT ACCIDENTAL HORIZONTAL OVERFLOW OR NARROW BOXING */
body.loader-active {
  overflow-x: hidden !important;
}


/*
Theme Name: BrandGlows Creative Platform V2
Theme URI: https://brandglows.ai
Author: BrandGlows
Author URI: https://brandglows.ai
Description: Premium SaaS-inspired WordPress theme for creative services and content production agencies.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brandglows
Tags: dark, portfolio, blog, custom-menu, custom-logo, featured-images, threaded-comments
*/

/* ============================================================
   CSS DESIGN SYSTEM — FlexiFunnels & TagMango Inspired
   ============================================================ */

:root {
    /* Brand Colors - High Intensity */
    --brand-blue: #1B6DFB; /* Vibrant Primary Blue */
    --brand-navy: #061b40; /* Extreme Deep Navy */
    --brand-cyan: #00F0FF; /* Neon Cyan for extreme glows */
    
    /* Backgrounds - Pitch Black for max contrast */
    --bg: #020408; /* Abyss black */
    --bg-alt: #050912;
    --card: rgba(10, 16, 28, 0.7); /* Deep dark glass */
    --glass-bg: rgba(27, 109, 251, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    /* Premium Accents */
    --violet: var(--brand-blue); 
    --cyan: var(--brand-cyan);
    --coral: #38BDF8; 
    --green: #00E676; /* Neon green */
    --gold: #FFD700;
    
    /* Text */
    --text: #FFFFFF;
    --text-secondary: #A0AABF;
    --text-muted: #64748B;
    
    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%);
    --gradient-text: linear-gradient(100deg, #FFFFFF 0%, #00F0FF 100%);
    --gradient-glow: radial-gradient(circle at top center, rgba(27,109,251,0.25) 0%, rgba(0,240,255,0.08) 40%, transparent 80%);
    --gradient-card: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.0) 100%);
    
    /* Structure & Geometry */
    --border: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(0, 240, 255, 0.6);
    --r: 16px;
    --r-lg: 24px; /* Chunky rounded corners */
    --r-xl: 32px;
    
    /* Badass Shadows & Glows */
    --shadow: 0 10px 40px rgba(0,0,0,0.8);
    --shadow-glow: 0 0 60px -10px rgba(0, 240, 255, 0.4);
    --blue-glow: 0 0 40px -5px rgba(27, 109, 251, 0.5);
    --cyan-glow: 0 0 0 4px rgba(0, 240, 255, 0.4);
    --card-hover-glow: 0 25px 50px -12px rgba(27, 109, 251, 0.5), 0 0 20px rgba(0, 240, 255, 0.3);
    
    /* Animation Timing */
    --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    --header-h: 72px;
    --max-w: 1200px;
    --ff: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--ff);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body.dark-theme { background: var(--bg); color: var(--text); }
h1,h2,h3,h4,h5,h6 { font-family: var(--ff); margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--cyan); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--cyan); color: var(--bg); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }

/* ============ LAYOUT ============ */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flex-col { display: flex; flex-direction: column; gap: 16px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }

/* ============ HEADER / NAV ============ */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--header-h);
    background: rgba(11,15,25,0.75);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-bottom: 1px solid var(--border);
    transition: background 0.3s, box-shadow 0.3s;
}
.site-header.header-scrolled {
    background: rgba(11,15,25,0.95);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
}

/* Brand */
.brand-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; }
.brand-logo img { max-height: 40px !important; width: auto !important; object-fit: contain !important; }
.brand-logo .logo-dot {
    width: 28px; height: 28px; border-radius: 9px; background: var(--gradient-hero);
    box-shadow: 0 4px 14px -3px var(--violet-glow); position: relative; flex-shrink: 0;
}
.brand-logo .logo-dot::after {
    content: ""; position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%; background: #FFF; opacity: 0.85;
}
.logo-accent { color: var(--cyan); }

/* Nav Links */
.main-nav { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.main-nav li a, .nav-link {
    font-size: 0.95rem; font-weight: 500; color: var(--text-secondary);
    transition: color var(--transition); padding: 8px 0; position: relative;
}
.main-nav li a:hover, .nav-link:hover { color: var(--text); }
.main-nav li.current-menu-item a, .main-nav li.current_page_item a { color: var(--cyan); }

/* Nav CTA */
.header-actions { display: flex; align-items: center; gap: 16px; }
.nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gradient-hero); color: #FFF; font-weight: 700; font-size: 0.9rem;
    padding: 10px 22px; border-radius: 12px; border: none;
    box-shadow: var(--blue-glow);
    transition: transform var(--bounce), box-shadow var(--transition);
}
.nav-cta:hover { 
    color: #FFF; 
    transform: translateY(-4px) scale(1.02); 
    box-shadow: 0 15px 35px -5px rgba(0,240,255,0.4); 
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; cursor: pointer;
}
.menu-toggle span {
    width: 100%; height: 2px; background: var(--text); border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.nav-open .menu-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
.nav-open .menu-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--ff); font-weight: 700; font-size: 0.95rem;
    padding: 12px 24px; border-radius: 12px; border: none;
    transition: all var(--bounce); cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
}
.btn-primary {
    background: var(--gradient-hero); color: #FFF;
    box-shadow: var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover { 
    color: #FFF; 
    transform: translateY(-5px) scale(1.05); 
    filter: brightness(1.2); 
    box-shadow: 0 20px 40px -10px rgba(0, 240, 255, 0.7), 0 0 20px rgba(27, 109, 251, 0.5); 
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-secondary {
    background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
.btn-secondary:hover { 
    color: #FFF; 
    background: rgba(255,255,255,0.1); 
    border-color: var(--brand-cyan); 
    transform: translateY(-3px); 
    box-shadow: 0 10px 30px -5px rgba(27,109,251,0.2);
}
.btn-ghost { background: transparent; color: var(--text-secondary); transition: all var(--transition); }
.btn-ghost:hover { color: var(--text); transform: translateX(4px); }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; border-radius: 14px; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ============ SECTIONS ============ */
.section { padding: 100px 0; position: relative; }
.section-alt { background: var(--bg-alt); }
.section-header { text-align: center; margin-bottom: 56px; }
.section-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--cyan); background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.2);
    padding: 6px 16px; border-radius: 50px; margin-bottom: 12px;
}
.section-title { font-size: 2.4rem; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.section-subtitle { font-size: 1.1rem; color: var(--text-secondary); max-width: 650px; margin: 0 auto; }

.gradient-text {
    background: var(--gradient-hero);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ============ HERO ============ */
.hero-section {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 140px 24px 100px; position: relative;
}
.hero-section::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--gradient-glow);
}
.hero-content { position: relative; max-width: 850px; margin: 0 auto; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(124,58,237,0.12); border: 1px solid var(--border-glow);
    padding: 8px 20px; border-radius: 50px;
    font-size: 0.85rem; font-weight: 700; color: var(--cyan); margin-bottom: 24px;
}
.hero-badge .pip { width: 10px; height: 10px; border-radius: 4px; background: var(--gradient-hero); }
.hero-title { font-size: clamp(2.6rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 20px; }
.hero-subtitle { font-size: 1.2rem; color: var(--text-secondary); max-width: 640px; margin: 0 auto 36px; line-height: 1.6; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 48px; }

/* Stats Row */
.stats-row {
    display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
    padding-top: 32px; border-top: 1px solid var(--border);
}
.stat-box { text-align: center; }
.stat-number { display: block; font-size: 1.6rem; font-weight: 800; color: var(--text); }
.stat-label { font-size: 0.82rem; color: var(--text-muted); }

/* ============ GLASS CARDS ============ */
.glass-card {
    background: var(--card); background-image: var(--gradient-card);
    border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--shadow);
    transition: all var(--bounce);
}
.glass-card:hover { 
    border-color: rgba(255,255,255,0.15); 
    transform: translateY(-8px) scale(1.02); 
    box-shadow: 0 15px 35px -5px rgba(0,0,0,0.5), 0 0 15px rgba(27, 109, 251, 0.2); 
}

/* ============ SERVICE CARDS ============ */
.service-card {
    background: var(--card); background-image: var(--gradient-card);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 32px; display: flex; flex-direction: column; gap: 16px;
    box-shadow: var(--shadow);
    transition: all var(--bounce);
}
.service-card:hover { 
    border-color: rgba(255,255,255,0.15); 
    transform: translateY(-8px) scale(1.02); 
    box-shadow: 0 15px 35px -5px rgba(0,0,0,0.5), 0 0 15px rgba(27, 109, 251, 0.2); 
}
.service-icon {
    width: 48px; height: 48px; border-radius: 14px; background: var(--gradient-hero);
    display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 1.2rem;
}
.service-title { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.service-desc { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; }
.service-tag {
    display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--cyan);
    background: rgba(6,182,212,0.1); padding: 4px 12px; border-radius: 50px; width: fit-content;
}

/* ============ METRIC CARDS ============ */
.metric-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 32px; text-align: center;
}
.metric-value {
    font-size: 3rem; font-weight: 800; line-height: 1;
    background: var(--gradient-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.metric-label { font-size: 0.95rem; color: var(--text-secondary); }

/* ============ PORTFOLIO ============ */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.portfolio-item {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden; transition: all var(--bounce);
}
.portfolio-item:hover { 
    transform: translateY(-10px); 
    border-color: var(--brand-cyan);
    box-shadow: 0 20px 40px -10px rgba(27,109,251,0.3);
}
.portfolio-thumb {
    height: 200px; background: linear-gradient(135deg, rgba(27,109,251,0.2), rgba(0,240,255,0.2));
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.portfolio-thumb img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-item:hover .portfolio-thumb img { transform: scale(1.08); }
.portfolio-info { padding: 18px; }
.portfolio-info h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.portfolio-info p { font-size: 0.82rem; color: var(--text-muted); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; justify-content: center; }
.filter-btn {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-secondary);
    padding: 8px 20px; border-radius: 50px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition);
}
.filter-btn.active, .filter-btn:hover { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }

/* ============ TESTIMONIALS ============ */
.testimonial-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; }
.testimonial-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-hero);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #FFF; font-size: 0.85rem; flex-shrink: 0;
}
.author-name { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.author-role { font-size: 0.8rem; color: var(--text-muted); }

/* Stats Banner */
.stats-banner {
    background: var(--card); border: 1px solid var(--border-glow); border-radius: var(--r-lg);
    padding: 24px 40px; display: flex; justify-content: space-around; align-items: center;
    margin-top: 40px; flex-wrap: wrap; gap: 20px;
}
.stats-banner .stat-number { font-size: 2rem; font-weight: 800; color: var(--cyan); }
.stats-banner .stat-label { font-size: 0.85rem; color: var(--text-secondary); }

/* ============ PRICING ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pricing-card {
    background: var(--card); background-image: var(--gradient-card);
    border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 40px; display: flex; flex-direction: column; position: relative; 
    box-shadow: var(--shadow);
    transition: all var(--bounce);
}
.pricing-card:hover { 
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-10px) scale(1.01); 
    box-shadow: 0 15px 35px -5px rgba(0,0,0,0.5), 0 0 15px rgba(27, 109, 251, 0.2); 
}
.pricing-card.popular { border-color: rgba(27,109,251,0.6); box-shadow: var(--blue-glow); }
.pricing-card.popular:hover { 
    border-color: rgba(27,109,251,1);
    transform: translateY(-10px) scale(1.02); 
    box-shadow: 0 20px 40px -10px rgba(27,109,251,0.4); 
}
.pricing-badge {
    position: absolute; top: -12px; right: 24px;
    background: var(--gradient-hero); color: #FFF; font-size: 0.75rem; font-weight: 800;
    padding: 4px 14px; border-radius: 50px; letter-spacing: 0.05em;
}
.pricing-name { font-size: 1.2rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.pricing-price { font-size: 2.8rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.pricing-price span { font-size: 1rem; color: var(--text-muted); font-weight: 500; }
.pricing-desc { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; flex: 1; }
.pricing-features li { font-size: 0.92rem; color: var(--text-secondary); padding-left: 28px; position: relative; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: bold; }
.pricing-cta { margin-top: auto; }
.pricing-cta .btn { width: 100%; }

/* ============ TIMELINE ============ */
.timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.timeline-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.timeline-badge {
    display: inline-block; background: var(--gradient-hero); color: #FFF;
    font-size: 0.75rem; font-weight: 800; padding: 4px 14px; border-radius: 50px; width: fit-content;
}
.timeline-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.timeline-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.timeline-list li { font-size: 0.88rem; color: var(--text-secondary); padding-left: 18px; position: relative; }
.timeline-list li::before { content: "→"; position: absolute; left: 0; color: var(--cyan); }

/* ============ CTA SECTION ============ */
.cta-section {
    padding: 80px 0; text-align: center; position: relative;
    background: var(--bg-alt);
}
.cta-section::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(500px circle at 50% 50%, var(--violet-glow), transparent 70%);
}
.cta-section .cta-inner { position: relative; }
.cta-title { font-size: 2.4rem; font-weight: 800; margin-bottom: 12px; }
.cta-subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 32px; max-width: 550px; margin-left: auto; margin-right: auto; }

/* ============ PAGE HERO ============ */
.page-hero {
    padding: 140px 0 60px; text-align: center;
    background: var(--bg); position: relative;
}
.page-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--gradient-glow);
}
.page-hero h1 { font-size: 2.8rem; font-weight: 800; position: relative; }
.page-hero p { font-size: 1.1rem; color: var(--text-secondary); margin-top: 12px; position: relative; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ============ FOOTER ============ */
.site-footer {
    background: var(--bg-alt); border-top: 1px solid var(--border); padding: 80px 0 0;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand-text { font-size: 0.9rem; color: var(--text-muted); margin-top: 12px; line-height: 1.6; max-width: 280px; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: var(--r); background: rgba(255,255,255,0.06);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); transition: all var(--transition);
}
.footer-social a:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(6,182,212,0.1); }
.footer-heading { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links li a { font-size: 0.88rem; color: var(--text-muted); transition: color var(--transition); }
.footer-links li a:hover { color: var(--cyan); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 10px; }
.footer-bottom {
    border-top: 1px solid var(--border); margin-top: 48px; padding: 24px 0;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.82rem; color: var(--text-muted);
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { color: var(--text-muted); }
.footer-bottom-links a:hover { color: var(--cyan); }

/* ============ PROCESS CARDS (CIRCLE TO TRIANGLE HOVER) ============ */
.process-card {
    padding: 32px 16px;
    transition: all 0.4s ease;
}
.process-icon-wrapper {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto 32px auto;
}
.process-shape {
    position: absolute;
    inset: 0;
    background: var(--brand-blue);
    clip-path: circle(50% at 50% 50%);
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.process-shape-inner {
    position: absolute;
    inset: 2px;
    background: var(--bg);
    clip-path: circle(50% at 50% 50%);
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.process-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--cyan) 0%, var(--brand-blue) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.3);
    z-index: 2;
    transition: transform 0.4s ease;
}
.process-card:hover .process-shape {
    /* Morph to Triangle */
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: var(--cyan);
    transform: scale(1.05);
}
.process-card:hover .process-shape-inner {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.process-card:hover .process-badge {
    transform: scale(1.1) rotate(10deg);
}

/* ============ GALAXY TIMELINE ============ */
.galaxy-timeline {
    position: relative;
    padding-left: 20px;
}
.galaxy-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 20px;
    left: 27px; /* center of dot */
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}
.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    z-index: 2;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 24px;
    position: relative;
    z-index: 2;
    animation: pulse-glow 3s infinite alternate;
}
.timeline-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
@keyframes pulse-glow {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.2); filter: brightness(1.3); }
}

/* ============ FORMS ============ */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-input, .form-textarea, .form-select {
    width: 100%; padding: 12px 16px; font-family: var(--ff); font-size: 0.95rem;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--r);
    color: var(--text); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-glow);
}
.form-textarea { min-height: 120px; resize: vertical; }

/* ============ WHATSAPP FLOAT ============ */
.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(37,211,102,0.4); transition: transform var(--transition);
    opacity: 0; transform: scale(0.8); pointer-events: none;
}
.whatsapp-float.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #FFF; }

/* ============ BLOG ============ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden; transition: all var(--transition);
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--border-glow); }
.blog-thumb { height: 180px; background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(6,182,212,0.2)); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-body { padding: 20px; }
.blog-category { font-size: 0.75rem; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.blog-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.blog-card h3 a { color: inherit; }
.blog-card h3 a:hover { color: var(--cyan); }
.blog-excerpt { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.blog-meta { display: flex; gap: 16px; margin-top: 12px; font-size: 0.8rem; color: var(--text-muted); }

/* WP Content Styling */
.post-content-wrapper { max-width: 780px; margin: 0 auto; padding: 60px 0; }
.post-content p { margin-bottom: 20px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; }
.post-content h2 { font-size: 1.6rem; margin: 40px 0 16px; color: var(--text); }
.post-content h3 { font-size: 1.3rem; margin: 32px 0 12px; color: var(--text); }
.post-content ul, .post-content ol { margin: 16px 0; padding-left: 24px; }
.post-content li { margin-bottom: 8px; color: var(--text-secondary); }
.post-content img { border-radius: var(--r-lg); margin: 24px 0; }
.post-content blockquote {
    border-left: 4px solid var(--violet); padding: 16px 24px; margin: 24px 0;
    background: rgba(124,58,237,0.08); border-radius: 0 var(--r) var(--r) 0;
    font-style: italic; color: var(--text-secondary);
}
.post-content a { color: var(--cyan); text-decoration: underline; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination .page-numbers {
    padding: 8px 14px; border-radius: var(--r); background: var(--card);
    border: 1px solid var(--border); color: var(--text-secondary); font-weight: 600;
}
.pagination .page-numbers.current { background: var(--violet); color: #FFF; border-color: var(--violet); }

/* Contact Info Cards */
.contact-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.contact-icon {
    width: 44px; height: 44px; border-radius: var(--r); background: rgba(6,182,212,0.12);
    display: flex; align-items: center; justify-content: center; color: var(--cyan); flex-shrink: 0;
}

/* Feature Items */
.feature-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.feature-icon {
    width: 44px; height: 44px; min-width: 44px; border-radius: var(--r);
    background: rgba(124,58,237,0.12); color: var(--violet);
    display: flex; align-items: center; justify-content: center;
}

/* Process / About */
.process-step {
    text-align: center; padding: 28px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.process-num {
    width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-hero);
    color: #FFF; font-weight: 800; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}

/* 404 */
.error-404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.error-code { font-size: 8rem; font-weight: 800; background: var(--gradient-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }

/* ============ UTILITIES ============ */
.text-cyan { color: var(--cyan); }
.text-violet { color: var(--violet); }
.text-coral { color: var(--coral); }
.text-green { color: var(--green); }
.text-sm { font-size: 0.88rem; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; } .mt-6 { margin-top: 64px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .timeline-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .main-nav {
        display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
        background: var(--bg); flex-direction: column; padding: 40px 24px; gap: 20px; z-index: 999;
    }
    .nav-open .main-nav { display: flex; }
    .main-nav li a { font-size: 1.2rem; }
    .hero-title { font-size: 2.2rem; }
    .section-title { font-size: 1.8rem; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .portfolio-grid, .blog-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .timeline-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .stats-row { gap: 24px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .cover-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-section { padding: 120px 16px 60px; }
    .section { padding: 60px 0; }
    .header-actions .nav-cta span { display: none; }
}

/* ============ ANIMATIONS ============ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Tailwind-style Movement Utilities */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse 4s ease-in-out infinite; }
.hover-lift { 
    transition: all var(--bounce); 
    will-change: transform, box-shadow, border-color;
}
.hover-lift:hover { 
    transform: translateY(-8px) scale(1.02); 
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px -5px rgba(0,0,0,0.5), 0 0 15px rgba(27, 109, 251, 0.1); 
}

/* ============ MARQUEE ============ */
.marquee-content {
    animation: marquee-scroll 20s linear infinite;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============ CUSTOM CURSOR ============ */
body { cursor: none; }
a, button, input, textarea, select { cursor: none; }
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 20px; height: 20px;
    background: rgba(0, 240, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s;
    mix-blend-mode: screen;
    box-shadow: 0 0 15px var(--cyan);
}
.custom-cursor.cursor-hover {
    width: 50px; height: 50px;
    background: rgba(27, 109, 251, 0.3);
    border: 1px solid var(--cyan);
    box-shadow: 0 0 30px var(--cyan);
}
@media (max-width: 768px) {
    body, a, button, input, textarea, select { cursor: auto; }
    .custom-cursor { display: none !important; }
}
@media (max-width: 768px) {
    body, a, button, input, textarea, select { cursor: auto; }
    .custom-cursor { display: none !important; }
}

/* ========================================
   CINEMATIC LOADER (Active Theory Style)
======================================== */

#cinematic-loader{
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020408;
    overflow: hidden;
    transition: opacity .8s ease, visibility .8s ease;
}

#cinematic-loader.hide{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-bg{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,240,255,.15), transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(139,92,246,.15), transparent 35%),
        #020408;
    filter: blur(20px);
    animation: loaderGlow 8s ease-in-out infinite alternate;
}

.loader-content{
    position: relative;
    z-index: 2;
    text-align: center;
    width: min(90%, 420px);
}

.loader-logo{
    width: 92px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 24px rgba(0,240,255,.35));
    animation: logoPulse 2.6s ease-in-out infinite;
}

.loader-title{
    margin: 0;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: 0;
    transform: translateY(12px);
    animation: revealUp .8s ease forwards .2s;
}

.loader-subtitle{
    margin: 10px 0 28px;
    color: #9fb3c8;
    font-size: .95rem;
    letter-spacing: .08em;
    opacity: 0;
    transform: translateY(12px);
    animation: revealUp .8s ease forwards .45s;
}

.loader-progress{
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.loader-progress span{
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg,#00f0ff,#8b5cf6,#00f0ff);
    background-size: 200% 100%;
    animation:
        progressFill 2.6s cubic-bezier(.22,1,.36,1) forwards,
        gradientShift 2s linear infinite;
}

body.loader-active{
    overflow: hidden;
}

@keyframes progressFill{
    from{ width:0%; }
    to{ width:100%; }
}

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

@keyframes logoPulse{
    0%,100%{ transform: scale(1); opacity:1; }
    50%{ transform: scale(1.08); opacity:.92; }
}

@keyframes gradientShift{
    0%{ background-position:0% 50%; }
    100%{ background-position:200% 50%; }
}

@keyframes loaderGlow{
    from{ transform: scale(1); opacity:.9; }
    to{ transform: scale(1.08); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
    #cinematic-loader,
    .loader-bg,
    .loader-logo,
    .loader-title,
    .loader-subtitle,
    .loader-progress span{
        animation: none !important;
        transition: none !important;
    }

    .loader-title,
    .loader-subtitle{
        opacity: 1;
        transform: none;
    }

    .loader-progress span{
        width: 100%;
    }
}

/* ========================================
   HERO CINEMATIC TITLE ANIMATION
======================================== */

.cinematic-title{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    line-height:0.9;
    margin-bottom:24px;
}

.cinematic-title .line{
    display:block;
    opacity:0;
    transform:translateY(60px) scale(0.96);
    filter:blur(12px);
    animation:cinematicReveal 1s cubic-bezier(.22,1,.36,1) forwards;
    will-change:transform,opacity,filter;
}

.cinematic-title .line-1{
    animation-delay:2.8s;
}

.cinematic-title .line-2{
    animation-delay:3.1s;
}

.cinematic-title .line-3{
    animation-delay:3.4s;
}

.gradient-text{
    background:linear-gradient(90deg,#00f0ff,#8b5cf6,#00f0ff);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:
        cinematicReveal 1s cubic-bezier(.22,1,.36,1) forwards,
        gradientMove 6s linear infinite;
    animation-delay:3.4s,4.2s;
}

@keyframes cinematicReveal{
    0%{
        opacity:0;
        transform:translateY(60px) scale(0.96);
        filter:blur(12px);
    }
    60%{
        opacity:1;
        transform:translateY(-6px) scale(1.01);
        filter:blur(0);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@keyframes gradientMove{
    0%{ background-position:0% 50%; }
    100%{ background-position:200% 50%; }
}

.hero-subtitle{
    opacity:0;
    transform:translateY(30px);
    animation:subtitleReveal .9s ease forwards;
    animation-delay:3.8s;
}

.hero-buttons,
.hero-actions{
    opacity:0;
    transform:translateY(24px);
    animation:subtitleReveal .9s ease forwards;
    animation-delay:4.1s;
}

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

@media (prefers-reduced-motion:reduce){
    .cinematic-title .line,
    .gradient-text,
    .hero-subtitle,
    .hero-buttons,
    .hero-actions{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
    }
}


/**
 * ============================================================================
 * BrandGlows - Premium Energy Core Visuals for Services Section
 * Lusion-Inspired Minimal Futuristic Orbs
 * ============================================================================
 */

/* Container wrapper for the visual */
.service-visual-box {
  width: 64px;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(10, 18, 36, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: visible;
  will-change: transform;
}

/* Glass Card Hover Reactions */
.glass-card:hover .service-visual-box {
  transform: scale(1.12) translateZ(10px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.2);
}

/* --------------------------------------------------------------------------
   1. Brand Strategy - Glowing Blue Core & Expanding Rings
   -------------------------------------------------------------------------- */
.core-strategy {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-strategy .strategy-nucleus {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 0 16px #3b82f6, 0 0 32px rgba(59, 130, 246, 0.5);
  animation: strategyBreathe 3.6s infinite ease-in-out;
  position: relative;
  z-index: 2;
}

.core-strategy .strategy-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.45);
  animation: strategyRingExpand 3.6s infinite ease-out;
  pointer-events: none;
}

.core-strategy .strategy-ring:nth-child(2) {
  animation-delay: 1.2s;
}
.core-strategy .strategy-ring:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes strategyBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px #3b82f6, 0 0 28px rgba(59, 130, 246, 0.4); }
  50% { transform: scale(1.18); box-shadow: 0 0 22px #60a5fa, 0 0 40px rgba(96, 165, 250, 0.7); }
}

@keyframes strategyRingExpand {
  0% { width: 14px; height: 14px; opacity: 0.8; transform: scale(1); }
  100% { width: 52px; height: 52px; opacity: 0; transform: scale(1.6); }
}

/* --------------------------------------------------------------------------
   2. Visual Identity & Design - Cyan/Blue Gradient Orb & Rotating Halo
   -------------------------------------------------------------------------- */
.core-visual-identity {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-visual-identity .identity-orb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a5f3fc 0%, #00F0FF 45%, #1d4ed8 100%);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.75), 0 0 35px rgba(0, 240, 255, 0.35);
  z-index: 2;
  position: relative;
}

.core-visual-identity .identity-halo {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 240, 255, 0.5);
  border-top-color: #ffffff;
  animation: haloRotate 6s infinite linear;
  transform: rotateX(65deg);
}

.core-visual-identity .identity-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 6px #00F0FF;
  animation: particleFloat 3s infinite ease-in-out;
}

.core-visual-identity .identity-particle:nth-child(3) { top: 4px; left: 6px; animation-delay: 0.5s; }
.core-visual-identity .identity-particle:nth-child(4) { bottom: 6px; right: 4px; animation-delay: 1.5s; }

@keyframes haloRotate {
  0% { transform: rotateX(65deg) rotateZ(0deg); }
  100% { transform: rotateX(65deg) rotateZ(360deg); }
}

@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.4; }
  50% { transform: translateY(-4px) scale(1.2); opacity: 1; }
}

/* --------------------------------------------------------------------------
   3. Creative Consulting - Blue Geometric Core & Slow 3D Rotation
   -------------------------------------------------------------------------- */
.core-consulting {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 300px;
}

.core-consulting .consulting-prism {
  width: 18px;
  height: 18px;
  position: relative;
  transform-style: preserve-3d;
  animation: prismSpin 8s infinite linear;
}

.core-consulting .prism-face {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(0, 240, 255, 0.65);
  background: rgba(27, 109, 251, 0.18);
  backdrop-filter: blur(2px);
}

.core-consulting .prism-face:nth-child(1) { transform: rotateY(0deg) translateZ(9px); }
.core-consulting .prism-face:nth-child(2) { transform: rotateY(90deg) translateZ(9px); }
.core-consulting .prism-face:nth-child(3) { transform: rotateX(90deg) translateZ(9px); }

.core-consulting .consulting-glow {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1B6DFB;
  box-shadow: 0 0 20px #00F0FF, 0 0 35px rgba(27, 109, 251, 0.6);
  z-index: 0;
}

@keyframes prismSpin {
  0% { transform: rotateX(25deg) rotateY(0deg); }
  50% { transform: rotateX(55deg) rotateY(180deg); }
  100% { transform: rotateX(25deg) rotateY(360deg); }
}

/* --------------------------------------------------------------------------
   4. Digital Presence - Cyan/Purple Energy Core & Orbiting Particles
   -------------------------------------------------------------------------- */
.core-digital {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-digital .digital-core {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e879f9 0%, #a855f7 45%, #00F0FF 100%);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.8), 0 0 30px rgba(0, 240, 255, 0.4);
  animation: digitalWavePulse 2.8s infinite ease-in-out;
  position: relative;
  z-index: 2;
}

.core-digital .digital-wave {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.4);
  animation: digitalWaveExpand 2.8s infinite ease-out;
}

.core-digital .digital-orbit {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  animation: orbitSpin 3.2s infinite linear;
}

.core-digital .digital-satellite {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF, 0 0 14px #e879f9;
}

@keyframes digitalWavePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 22px rgba(168, 85, 247, 1), 0 0 38px rgba(0, 240, 255, 0.6); }
}

@keyframes digitalWaveExpand {
  0% { width: 14px; height: 14px; opacity: 0.75; }
  100% { width: 44px; height: 44px; opacity: 0; }
}

@keyframes orbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .core-strategy .strategy-nucleus,
  .core-strategy .strategy-ring,
  .core-visual-identity .identity-halo,
  .core-visual-identity .identity-particle,
  .core-consulting .consulting-prism,
  .core-digital .digital-core,
  .core-digital .digital-wave,
  .core-digital .digital-orbit {
    animation: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - "How We Work" & "Brands We've Helped Grow" Cinematic Suite
 * Lusion-Inspired Interactive Architecture
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. PROCESS SECTION ("HOW WE WORK")
   -------------------------------------------------------------------------- */
.process-section-cinematic {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

/* Connecting Energy Beam between 1 -> 2 -> 3 */
.process-energy-track {
  position: absolute;
  top: 52px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
  pointer-events: none;
}

.process-energy-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(27, 109, 251, 0.8) 30%, #00F0FF 50%, rgba(27, 109, 251, 0.8) 70%, transparent 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 14px #00F0FF, 0 0 28px rgba(0, 240, 255, 0.5);
  animation: energyFlow 4.5s infinite linear;
}

@keyframes energyFlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Process Cards with 3D Depth */
.process-card-cinematic {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  will-change: transform;
  opacity: 0;
  transform: translateY(40px) translateZ(-30px) scale(0.95);
}

.process-card-cinematic.in-view {
  opacity: 1;
  transform: translateY(0) translateZ(0) scale(1);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-card-cinematic:nth-child(1).in-view { transition-delay: 0.1s; }
.process-card-cinematic:nth-child(2).in-view { transition-delay: 0.3s; }
.process-card-cinematic:nth-child(3).in-view { transition-delay: 0.5s; }

/* Process Icon Wrapper & Energy Rings */
.process-icon-wrapper {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 28px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.process-energy-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 240, 255, 0.35);
  border-top-color: #00F0FF;
  border-right-color: #1B6DFB;
  animation: ringRotate 9s infinite linear;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-satellite-dot {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 10px #00F0FF, 0 0 20px #1B6DFB;
}

.process-shape {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(27, 109, 251, 0.25) 0%, rgba(10, 18, 36, 0.85) 80%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}

.process-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B6DFB, #00F0FF);
  color: #020408;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.6);
  animation: badgeGlowPulse 2.8s infinite ease-in-out;
  z-index: 3;
}

@keyframes badgeGlowPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(0, 240, 255, 0.6); }
  50% { transform: scale(1.1); box-shadow: 0 0 24px rgba(0, 240, 255, 0.95); }
}

@keyframes ringRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hover Enhancements */
.process-card-cinematic:hover .process-shape {
  border-color: rgba(0, 240, 255, 0.5);
  background: radial-gradient(circle at 35% 35%, rgba(0, 240, 255, 0.3) 0%, rgba(10, 18, 36, 0.9) 80%);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.35), inset 0 0 20px rgba(0, 240, 255, 0.2);
}

.process-card-cinematic:hover .process-energy-ring {
  border-color: rgba(0, 240, 255, 0.8);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
}

.process-card-cinematic:hover h3 {
  color: #00F0FF !important;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.process-card-cinematic:hover p {
  color: #e2e8f0 !important;
  transition: color 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. BRANDS WE'VE HELPED GROW (STATS & TESTIMONIAL)
   -------------------------------------------------------------------------- */
.social-proof-cinematic {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

/* Aurora Light behind Heading */
.heading-aurora-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.15) 0%, rgba(27, 109, 251, 0.1) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: auroraDrift 8s infinite alternate ease-in-out;
}

@keyframes auroraDrift {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
  100% { transform: translateX(-40%) scale(1.15); opacity: 1; }
}

/* Stat Box with 3D Parallax & Cursor Spotlight */
.stat-box-cinematic {
  position: relative;
  padding: 30px 20px;
  border-radius: 20px;
  background: rgba(10, 15, 30, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.stat-box-cinematic:hover {
  transform: translateY(-8px) translateZ(15px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.2);
}

.stat-number-glow {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 8px;
  will-change: text-shadow, transform;
}

.stat-number-glow.counting {
  text-shadow: 0 0 35px currentColor, 0 0 60px currentColor;
  transform: scale(1.05);
}

.stat-number-glow.counted {
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
  transform: scale(1);
  transition: all 0.6s ease;
}

/* Testimonial Glass Card with Moving Sheen Beam */
.testimonial-card-cinematic {
  position: relative;
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 48px;
  background: rgba(10, 16, 34, 0.65) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.08);
}

.testimonial-card-cinematic:hover {
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 240, 255, 0.25);
}

/* Light Sheen Beam Sweep */
.testimonial-sheen {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), rgba(0, 240, 255, 0.12), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  animation: sheenSweep 6s infinite ease-in-out;
}

@keyframes sheenSweep {
  0% { left: -100%; }
  40%, 100% { left: 200%; }
}

/* Background Ambient Dust Particles */
.ambient-dust-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ambient-dust-dot {
  position: absolute;
  border-radius: 50%;
  background: #00F0FF;
  opacity: 0.25;
  filter: blur(1px);
  animation: dustFloat 12s infinite ease-in-out alternate;
}

@keyframes dustFloat {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(25px, -35px, 0); }
  100% { transform: translate3d(-20px, 25px, 0); }
}

@media (max-width: 768px) {
  .process-energy-track { display: none; }
  .stat-box-cinematic { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-card-cinematic,
  .process-energy-beam,
  .process-energy-ring,
  .process-badge,
  .heading-aurora-glow,
  .testimonial-sheen,
  .ambient-dust-dot {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - "How We Work" Geometric Shapes (Triangle, Circle, Hexagon)
 * Lusion-Inspired Animated Neon Geometry with Perimeter Particles
 * ============================================================================
 */

.process-icon-wrapper {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 28px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

/* Base Geometric Shape Container */
.process-geometric-shape {
  width: 96px;
  height: 96px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  animation: shapeIdleFloat 4.2s infinite ease-in-out;
  will-change: transform, filter;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.35));
}

.process-card-cinematic:nth-child(1) .process-geometric-shape { animation-delay: 0s; }
.process-card-cinematic:nth-child(2) .process-geometric-shape { animation-delay: 1.4s; }
.process-card-cinematic:nth-child(3) .process-geometric-shape { animation-delay: 2.8s; }

/* Hover: 360° Smooth Rotation & Glow Bloom */
.process-card-cinematic:hover .process-geometric-shape,
.process-card:hover .process-geometric-shape {
  transform: rotate(360deg) scale(1.12);
  filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.9)) drop-shadow(0 0 35px rgba(27, 109, 251, 0.6));
}

/* SVG Shapes Styling */
.shape-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.shape-bg-glass {
  fill: rgba(10, 18, 36, 0.6);
  backdrop-filter: blur(8px);
}

.shape-stroke-outer {
  fill: none;
  stroke: rgba(0, 240, 255, 0.3);
  stroke-width: 1.2;
}

.shape-stroke-neon {
  fill: none;
  stroke: url(#cyanBlueGrad);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px #00F0FF);
}

.shape-inner-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.4s ease, filter 0.3s ease;
}

.process-card-cinematic:hover .shape-inner-icon {
  filter: drop-shadow(0 0 8px #00F0FF);
}

/* Luminous Traveling Perimeter Particle */
.shape-particle {
  fill: #00F0FF;
  filter: drop-shadow(0 0 6px #00F0FF) drop-shadow(0 0 12px #1B6DFB);
}

/* Badge (1, 2, 3) */
.process-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B6DFB, #00F0FF);
  color: #020408;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.65);
  animation: badgeGlowPulse 2.8s infinite ease-in-out;
  z-index: 4;
  pointer-events: none;
}

@keyframes shapeIdleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
}

@keyframes badgeGlowPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(0, 240, 255, 0.6); }
  50% { transform: scale(1.1); box-shadow: 0 0 22px rgba(0, 240, 255, 0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .process-geometric-shape {
    animation: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Premium Morphing Energy Core Architecture ("How We Work")
 * Lusion-Inspired Fluid Geometric Morphing & Particle Sparks
 * ============================================================================
 */

.process-icon-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 28px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
}

/* Master Shape Canvas Container */
.morphing-core-container {
  width: 104px;
  height: 104px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform, filter;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.4));
  animation: coreIdleBreathe 4.5s infinite ease-in-out;
}

.process-card-cinematic:nth-child(1) .morphing-core-container { animation-delay: 0s; }
.process-card-cinematic:nth-child(2) .morphing-core-container { animation-delay: 1.5s; }
.process-card-cinematic:nth-child(3) .morphing-core-container { animation-delay: 3s; }

/* SVG Vector Canvas */
.morphing-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Base Morphing Energy Outline Path with Smooth Interpolation */
.morph-path {
  fill: rgba(10, 18, 38, 0.65);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: d 0.75s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease, fill 0.4s ease;
  will-change: d;
}

/* Glow & Glass Layers */
.morph-path-glow {
  fill: none;
  stroke-width: 3.5;
  opacity: 0.35;
  transition: d 0.75s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease, opacity 0.4s ease;
}

/* --------------------------------------------------------------------------
   1. DISCOVER: Triangle -> Complex Organic Shape
   -------------------------------------------------------------------------- */
.core-discover .morph-path {
  d: path("M 50,16 L 85,78 A 3 3 0 0 1 82,82 L 18,82 A 3 3 0 0 1 15,78 Z");
  stroke: url(#cyanBlueGrad1);
}
.core-discover .morph-path-glow {
  d: path("M 50,16 L 85,78 A 3 3 0 0 1 82,82 L 18,82 A 3 3 0 0 1 15,78 Z");
  stroke: #00F0FF;
}

/* On Card Hover: Morphs into Organic Complex Shape */
.process-card-cinematic:hover .core-discover .morph-path,
.process-card:hover .core-discover .morph-path {
  d: path("M 50,12 C 86,16 96,48 82,74 C 68,92 28,94 16,72 C 6,52 18,22 50,12 Z");
  stroke: #00F0FF;
  fill: rgba(27, 109, 251, 0.22);
}
.process-card-cinematic:hover .core-discover .morph-path-glow,
.process-card:hover .core-discover .morph-path-glow {
  d: path("M 50,12 C 86,16 96,48 82,74 C 68,92 28,94 16,72 C 6,52 18,22 50,12 Z");
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   2. DESIGN: Circle -> Fluid Rounded Polygon / Organic Blob
   -------------------------------------------------------------------------- */
.core-design .morph-path {
  d: path("M 50,14 C 70,14 86,30 86,50 C 86,70 70,86 50,86 C 30,86 14,70 14,50 C 14,30 30,14 50,14 Z");
  stroke: url(#blueCyanGrad2);
}
.core-design .morph-path-glow {
  d: path("M 50,14 C 70,14 86,30 86,50 C 86,70 70,86 50,86 C 30,86 14,70 14,50 C 14,30 30,14 50,14 Z");
  stroke: #1B6DFB;
}

/* On Card Hover: Morphs into Fluid Polygon / Blob */
.process-card-cinematic:hover .core-design .morph-path,
.process-card:hover .core-design .morph-path {
  d: path("M 50,10 C 82,14 94,40 84,72 C 72,92 28,92 16,70 C 6,50 14,20 50,10 Z");
  stroke: #00F0FF;
  fill: rgba(0, 240, 255, 0.2);
}
.process-card-cinematic:hover .core-design .morph-path-glow,
.process-card:hover .core-design .morph-path-glow {
  d: path("M 50,10 C 82,14 94,40 84,72 C 72,92 28,92 16,70 C 6,50 14,20 50,10 Z");
  opacity: 0.9;
  stroke: #00F0FF;
}

/* --------------------------------------------------------------------------
   3. DELIVER: Hexagon -> Futuristic Crystalline Star / Crystal
   -------------------------------------------------------------------------- */
.core-deliver .morph-path {
  d: path("M 50,14 L 83,32 L 83,68 L 50,86 L 17,68 L 17,32 Z");
  stroke: url(#cyanPurpleGrad3);
}
.core-deliver .morph-path-glow {
  d: path("M 50,14 L 83,32 L 83,68 L 50,86 L 17,68 L 17,32 Z");
  stroke: #a855f7;
}

/* On Card Hover: Morphs into Faceted Crystalline Star */
.process-card-cinematic:hover .core-deliver .morph-path,
.process-card:hover .core-deliver .morph-path {
  d: path("M 50,8 L 64,30 L 92,36 L 72,58 L 78,88 L 50,72 L 22,88 L 28,58 L 8,36 L 36,30 Z");
  stroke: #00F0FF;
  fill: rgba(168, 85, 247, 0.25);
}
.process-card-cinematic:hover .core-deliver .morph-path-glow,
.process-card:hover .core-deliver .morph-path-glow {
  d: path("M 50,8 L 64,30 L 92,36 L 72,58 L 78,88 L 50,72 L 22,88 L 28,58 L 8,36 L 36,30 Z");
  opacity: 0.95;
  stroke: #00F0FF;
}

/* --------------------------------------------------------------------------
   INTERNAL ENERGY PARTICLES, SPARKS & NODES
   -------------------------------------------------------------------------- */
.energy-spark {
  position: absolute;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF, 0 0 16px #1B6DFB;
  pointer-events: none;
  animation: sparkPulse 2.8s infinite ease-in-out;
}

.core-nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a5f3fc 0%, #00F0FF 50%, #1d4ed8 100%);
  box-shadow: 0 0 15px #00F0FF, 0 0 30px rgba(0, 240, 255, 0.4);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.process-card-cinematic:hover .core-nucleus {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 25px #00F0FF, 0 0 45px rgba(0, 240, 255, 0.8);
}

/* Inner Ray Lines */
.inner-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: raySpin 14s infinite linear;
}

/* Hover Transform & Bloom */
.process-card-cinematic:hover .morphing-core-container {
  transform: scale(1.12) translateZ(12px);
  filter: drop-shadow(0 0 22px rgba(0, 240, 255, 0.85)) drop-shadow(0 0 40px rgba(27, 109, 251, 0.6));
}

@keyframes coreIdleBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

@keyframes sparkPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes raySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .morphing-core-container,
  .morph-path,
  .morph-path-glow,
  .energy-spark,
  .inner-rays {
    animation: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - "Why Choose Us" + Contact Form Cinematic Digital Energy Field
 * Lusion-Inspired Interactive Web Canvas & Liquid Light Architecture
 * ============================================================================
 */

.contact-section-cinematic {
  position: relative;
  overflow: hidden;
  background: #020408 !important;
  perspective: 1200px;
  padding: 120px 0;
}

/* Background Canvas Layer */
.energy-field-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* Atmospheric Nebula Glows */
.nebula-glow-1 {
  position: absolute;
  top: -15%;
  right: -10%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, rgba(27, 109, 251, 0.06) 45%, transparent 70%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 0;
  animation: nebulaFloat1 14s infinite alternate ease-in-out;
}

.nebula-glow-2 {
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(27, 109, 251, 0.14) 0%, rgba(168, 85, 247, 0.05) 50%, transparent 70%);
  filter: blur(75px);
  pointer-events: none;
  z-index: 0;
  animation: nebulaFloat2 16s infinite alternate ease-in-out;
}

/* Flowing Liquid-Light Wave Ribbon */
.liquid-wave-ribbon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 280px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  overflow: visible;
}

.wave-ribbon-path {
  fill: none;
  stroke: url(#liquidWaveGrad);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.35));
  animation: waveMorph 10s infinite ease-in-out alternate;
}

@keyframes waveMorph {
  0% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.2) translateY(-15px); }
  100% { transform: scaleY(0.9) translateY(15px); }
}

@keyframes nebulaFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.15); }
}

@keyframes nebulaFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(45px, -35px) scale(1.2); }
}

/* Feature List Items with 3D Micro-Lift */
.why-choose-list li {
  position: relative;
  padding: 12px 16px;
  border-radius: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
}

.why-choose-list li:hover {
  transform: translateX(8px);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(0, 240, 255, 0.15);
}

.why-choose-list li:hover h4 {
  color: #00F0FF;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Contact Form Glass Card */
.contact-card-cinematic {
  position: relative;
  background: rgba(10, 16, 34, 0.72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 240, 255, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.contact-card-cinematic:hover {
  border-color: rgba(0, 240, 255, 0.32) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 240, 255, 0.22);
}

/* Input Fields Soft Neon Focus */
.contact-card-cinematic input,
.contact-card-cinematic select,
.contact-card-cinematic textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.contact-card-cinematic input:focus,
.contact-card-cinematic select:focus,
.contact-card-cinematic textarea:focus {
  outline: none !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.05) !important;
  background: rgba(10, 20, 42, 0.8) !important;
}

/* Button Refined Moving Sheen */
.contact-card-cinematic button[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card-cinematic button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4), 0 0 20px rgba(27, 109, 251, 0.5);
}

.contact-card-cinematic button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  transition: none;
}

.contact-card-cinematic button[type="submit"]:hover::after {
  left: 200%;
  transition: left 0.75s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .energy-field-canvas,
  .nebula-glow-1,
  .nebula-glow-2,
  .liquid-wave-ribbon,
  .wave-ribbon-path {
    animation: none !important;
    display: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Premium Footer Logo Upgrade
 * High-End Responsive Sizing, Ambient Backlight, Micro-Tilt & Sheen
 * ============================================================================
 */

.footer-logo-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
  perspective: 700px;
  transform-style: preserve-3d;
}

/* Ambient Backlight Glow */
.footer-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 90px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.18) 0%, rgba(27, 109, 251, 0.1) 50%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Footer Brand Logo Link */
.footer-brand-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  z-index: 1;
  overflow: hidden;
  border-radius: 12px;
  padding: 6px 8px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  will-change: transform, filter;
}

/* Logo Image Styling & Sizing */
.footer-logo-img {
  width: 200px !important;
  max-width: 210px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.2)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65));
  transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: Subtle 3-4px Lift & Enhanced Glow */
.footer-logo-wrapper:hover .footer-brand-logo {
  transform: translateY(-4px);
  filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.4)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.8));
}

.footer-logo-wrapper:hover .footer-logo-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Slow Elegant Moving Light Sheen */
.footer-logo-sheen {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(0, 240, 255, 0.25), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  transition: none;
}

.footer-logo-wrapper:hover .footer-logo-sheen {
  left: 220%;
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tablet & Mobile Responsive Scaling */
@media (max-width: 991px) {
  .footer-logo-img {
    width: 175px !important;
    max-width: 180px !important;
  }
  .footer-logo-glow {
    width: 190px;
    height: 80px;
  }
}

@media (max-width: 576px) {
  .footer-logo-img {
    width: 150px !important;
    max-width: 155px !important;
  }
  .footer-logo-glow {
    width: 160px;
    height: 70px;
  }
  .footer-logo-wrapper {
    margin-bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo-wrapper,
  .footer-brand-logo,
  .footer-logo-glow,
  .footer-logo-sheen {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - "CTA + Footer" 3D Cinematic Architecture & Atmospheric Suite
 * Lusion-Inspired Layered Depth, Magnetic Button & Ambient Energy Fields
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. CTA 3D ATMOSPHERIC SECTION
   -------------------------------------------------------------------------- */
.cta-section-cinematic {
  position: relative;
  overflow: hidden;
  background: #020408 !important;
  padding: 140px 0 100px 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Atmospheric Volumetric Light Fields */
.cta-nebula-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  height: 450px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.16) 0%, rgba(27, 109, 251, 0.1) 45%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: ctaNebulaPulse 12s infinite alternate ease-in-out;
  will-change: transform, opacity;
}

@keyframes ctaNebulaPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  100% { transform: translate(-48%, -52%) scale(1.15); opacity: 1; }
}

/* Canvas for Interactive CTA Floating Particles */
.cta-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
}

.cta-inner-cinematic {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  transform-style: preserve-3d;
}

/* Cinematic 3D Reveal Heading */
.cta-title-cinematic {
  font-size: clamp(2.6rem, 5.5vw, 4rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 20px !important;
  will-change: transform, filter, opacity;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
  transform: translate3d(0, 30px, -40px);
  filter: blur(12px);
  opacity: 0;
}

.cta-title-cinematic.revealed {
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  opacity: 1;
}

.cta-subtitle-cinematic {
  font-size: 1.25rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: 40px !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   2. MAGNETIC 3D CTA BUTTON & LIGHT FIELD
   -------------------------------------------------------------------------- */
.cta-btn-container {
  position: relative;
  display: inline-block;
  perspective: 600px;
  transform-style: preserve-3d;
}

/* Dedicated Behind-Button Light Field */
.cta-button-light-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 90px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.3) 0%, rgba(27, 109, 251, 0.18) 50%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.4s ease, transform 0.35s ease, filter 0.4s ease;
}

.cta-btn-container:hover .cta-button-light-field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.3);
  filter: blur(34px);
}

/* Magnetic Button Element */
.btn-magnetic-cta {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 18px 40px !important;
  border-radius: 50px !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.35), 0 0 20px rgba(27, 109, 251, 0.4) !important;
  text-decoration: none !important;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.35s ease;
}

.btn-magnetic-cta:hover {
  box-shadow: 0 18px 45px rgba(0, 240, 255, 0.55), 0 0 35px rgba(0, 240, 255, 0.4) !important;
}

.btn-magnetic-cta:active {
  transform: scale(0.96) translateZ(-4px) !important;
  box-shadow: 0 6px 15px rgba(0, 240, 255, 0.3) !important;
}

/* Light Reflection Sheen Beam Sweep */
.btn-magnetic-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), rgba(0, 240, 255, 0.4), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  transition: none;
}

.btn-magnetic-cta:hover::after {
  left: 220%;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   3. FOOTER 3D ENERGY DIVIDER LINE
   -------------------------------------------------------------------------- */
.footer-energy-divider {
  position: relative;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 15%, rgba(0, 240, 255, 0.3) 50%, rgba(255, 255, 255, 0.08) 85%, transparent 100%);
  margin: 0;
  overflow: visible;
}

.energy-divider-node {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 12px #00F0FF, 0 0 24px #1B6DFB, 0 0 40px #00F0FF;
  animation: energyNodeTravel 7s infinite linear;
}

@keyframes energyNodeTravel {
  0% { left: 5%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 95%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. FOOTER 3D DEPTH & GLASS SURFACES
   -------------------------------------------------------------------------- */
.site-footer-cinematic {
  position: relative;
  background: #010307 !important;
  overflow: hidden;
  padding: 80px 0 35px 0;
  perspective: 1200px;
}

/* Footer Ambient Spotlight Overlay */
.footer-spotlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   5. BRANDGLOWS LOGO 3D FOCAL POINT
   -------------------------------------------------------------------------- */
.footer-logo-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
  perspective: 700px;
  transform-style: preserve-3d;
}

.footer-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  height: 95px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.2) 0%, rgba(27, 109, 251, 0.12) 50%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.footer-brand-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  z-index: 1;
  overflow: hidden;
  border-radius: 12px;
  padding: 6px 8px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  will-change: transform, filter;
}

.footer-logo-img {
  width: 205px !important;
  max-width: 215px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.22)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.75));
  transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-logo-wrapper:hover .footer-brand-logo {
  transform: translateY(-4px);
  filter: drop-shadow(0 0 24px rgba(0, 240, 255, 0.45)) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}

.footer-logo-wrapper:hover .footer-logo-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.18);
}

.footer-logo-sheen {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), rgba(0, 240, 255, 0.28), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  transition: none;
}

.footer-logo-wrapper:hover .footer-logo-sheen {
  left: 220%;
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   6. FOOTER LINKS MICRO 3D INTERACTION
   -------------------------------------------------------------------------- */
.footer-links li a {
  position: relative;
  display: inline-block;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  padding: 4px 0;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.25s ease !important;
}

.footer-links li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #00F0FF, #1B6DFB);
  box-shadow: 0 0 8px #00F0FF;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-links li a:hover {
  color: #fff !important;
  transform: translateY(-2px);
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.45);
}

.footer-links li a:hover::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. SOCIAL ICONS 3D GLASS CAPSULES
   -------------------------------------------------------------------------- */
.footer-social a {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(10, 18, 36, 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
  overflow: hidden;
}

.footer-social a:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: rgba(0, 240, 255, 0.45) !important;
  color: #00F0FF !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 240, 255, 0.35) !important;
}

.footer-social a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
}

.footer-social a:hover::after {
  left: 200%;
  transition: left 0.6s ease;
}

/* Tablet & Mobile Overrides */
@media (max-width: 991px) {
  .cta-section-cinematic { padding: 100px 0 70px 0; }
  .footer-logo-img { width: 175px !important; }
}

@media (max-width: 576px) {
  .cta-section-cinematic { padding: 80px 0 60px 0; }
  .footer-logo-img { width: 150px !important; }
  .btn-magnetic-cta { padding: 16px 28px !important; font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-title-cinematic,
  .cta-nebula-field,
  .cta-button-light-field,
  .energy-divider-node,
  .footer-logo-glow,
  .btn-magnetic-cta::after,
  .footer-logo-sheen {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Master Interactive 3D Footer Suite
 * Lusion-Inspired Cinematic Lighting, Glass Capsules, and Micro-Interactions
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. FOOTER MAIN CONTAINER & ATMOSPHERE
   -------------------------------------------------------------------------- */
.site-footer-cinematic {
  position: relative;
  background: #010307 !important;
  overflow: hidden;
  padding: 85px 0 35px 0;
  perspective: 1200px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Background Atmosphere Light Fields */
.footer-nebula-bg {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, rgba(27, 109, 251, 0.05) 45%, transparent 70%);
  filter: blur(75px);
  pointer-events: none;
  z-index: 0;
  animation: footerNebulaDrift 14s infinite alternate ease-in-out;
}

@keyframes footerNebulaDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, 30px) scale(1.15); }
}

/* Canvas for subtle floating particles & light sweep */
.footer-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* Footer Light Sweep Beam */
.footer-sweep-beam {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.025), rgba(27, 109, 251, 0.04), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 0;
  animation: footerSweep 16s infinite ease-in-out;
}

@keyframes footerSweep {
  0% { left: -100%; }
  35%, 100% { left: 220%; }
}

/* --------------------------------------------------------------------------
   2. BRAND LOGO - 3D FOCAL POINT
   -------------------------------------------------------------------------- */
.footer-logo-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  perspective: 700px;
  transform-style: preserve-3d;
}

.footer-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  height: 95px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.22) 0%, rgba(27, 109, 251, 0.12) 50%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.footer-brand-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  z-index: 1;
  overflow: hidden;
  border-radius: 12px;
  padding: 4px 6px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform, filter;
}

.footer-logo-img {
  width: 205px !important;
  max-width: 215px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.22)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.75));
  transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-logo-wrapper:hover .footer-brand-logo {
  transform: translateY(-4px);
  filter: drop-shadow(0 0 24px rgba(0, 240, 255, 0.45)) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}

.footer-logo-wrapper:hover .footer-logo-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.18);
}

.footer-logo-sheen {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), rgba(0, 240, 255, 0.28), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  transition: none;
}

.footer-logo-wrapper:hover .footer-logo-sheen {
  left: 220%;
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 22px;
  letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   3. SOCIAL MEDIA 3D GLASS BUTTONS (INSTAGRAM, LINKEDIN, FACEBOOK, YOUTUBE)
   -------------------------------------------------------------------------- */
.footer-social-suite {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

.social-glass-item {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(10, 18, 38, 0.65) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease !important;
  text-decoration: none !important;
  overflow: hidden;
  perspective: 400px;
}

.social-glass-item svg {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease, filter 0.3s ease;
  pointer-events: none;
}

/* Radial Glow Backlight behind hovered icon */
.social-glass-item .social-glow-backlight {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.35) 0%, rgba(27, 109, 251, 0.2) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.social-glass-item:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: #00F0FF !important;
  background: rgba(10, 22, 48, 0.85) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 240, 255, 0.35) !important;
}

.social-glass-item:hover svg {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px #00F0FF);
}

.social-glass-item:hover .social-glow-backlight {
  opacity: 1;
}

.social-glass-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
}

.social-glass-item:hover::after {
  left: 220%;
  transition: left 0.65s ease-in-out;
}

/* --------------------------------------------------------------------------
   4. COLUMN LINKS (QUICK LINKS & SERVICES) - MICRO 3D HOVER
   -------------------------------------------------------------------------- */
.footer-heading {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 22px !important;
  letter-spacing: 0.5px;
  position: relative;
  display: inline-block;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, #00F0FF, #1B6DFB);
  border-radius: 2px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list li a {
  position: relative;
  display: inline-block;
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 0.95rem;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.25s ease !important;
  padding: 2px 0;
}

.footer-links-list li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #00F0FF, #1B6DFB);
  box-shadow: 0 0 8px #00F0FF;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-links-list li a:hover {
  color: #fff !important;
  transform: translateX(5px);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

.footer-links-list li a:hover::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   5. CONTACT COLUMN ITEMS
   -------------------------------------------------------------------------- */
.footer-contact-suite {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 0.95rem;
  transition: transform 0.25s ease, color 0.25s ease;
  text-decoration: none;
}

.footer-contact-row:hover {
  transform: translateX(4px);
  color: #e2e8f0;
}

.footer-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #00F0FF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.footer-contact-row:hover .footer-contact-icon {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
  transform: scale(1.08);
}

.footer-contact-row a {
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
}

.footer-contact-row a:hover {
  color: #00F0FF !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* --------------------------------------------------------------------------
   6. FOOTER DIVIDER & COPYRIGHT
   -------------------------------------------------------------------------- */
.footer-divider-track {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(0, 240, 255, 0.25) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100%);
  margin: 50px 0 28px 0;
  overflow: visible;
}

.footer-divider-spark {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 10px #00F0FF, 0 0 20px #1B6DFB;
  animation: dividerSparkDrift 9s infinite linear;
}

@keyframes dividerSparkDrift {
  0% { left: 10%; opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { left: 90%; opacity: 0; }
}

.footer-bottom-cinematic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.88rem;
  color: #64748b;
}

.footer-bottom-links a {
  color: #64748b !important;
  text-decoration: none !important;
  margin-left: 20px;
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
}

.footer-bottom-links a:hover {
  color: #00F0FF !important;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

/* --------------------------------------------------------------------------
   7. FLOATING WHATSAPP BUTTON 3D POLISH
   -------------------------------------------------------------------------- */
.whatsapp-float-cinematic {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 0 16px rgba(37, 211, 102, 0.25);
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

.whatsapp-float-cinematic:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 14px 35px rgba(37, 211, 102, 0.6), 0 0 25px rgba(37, 211, 102, 0.45);
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .site-footer-cinematic { padding: 65px 0 30px 0; }
  .footer-logo-img { width: 175px !important; }
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-bottom-cinematic { flex-direction: column; text-align: center; }
  .footer-bottom-links a { margin: 0 10px; }
}

@media (max-width: 576px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-logo-img { width: 150px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-cinematic,
  .footer-nebula-bg,
  .footer-particles-canvas,
  .footer-sweep-beam,
  .footer-divider-spark,
  .footer-logo-sheen,
  .social-glass-item::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Premium Energy Core Visuals for Services Section
 * Lusion-Inspired Minimal Futuristic Orbs
 * ============================================================================
 */

/* Container wrapper for the visual */
.service-visual-box {
  width: 64px;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(10, 18, 36, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: visible;
  will-change: transform;
}

/* Glass Card Hover Reactions */
.glass-card:hover .service-visual-box {
  transform: scale(1.12) translateZ(10px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.2);
}

/* --------------------------------------------------------------------------
   1. Brand Strategy - Glowing Blue Core & Expanding Rings
   -------------------------------------------------------------------------- */
.core-strategy {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-strategy .strategy-nucleus {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 0 16px #3b82f6, 0 0 32px rgba(59, 130, 246, 0.5);
  animation: strategyBreathe 3.6s infinite ease-in-out;
  position: relative;
  z-index: 2;
}

.core-strategy .strategy-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.45);
  animation: strategyRingExpand 3.6s infinite ease-out;
  pointer-events: none;
}

.core-strategy .strategy-ring:nth-child(2) {
  animation-delay: 1.2s;
}
.core-strategy .strategy-ring:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes strategyBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px #3b82f6, 0 0 28px rgba(59, 130, 246, 0.4); }
  50% { transform: scale(1.18); box-shadow: 0 0 22px #60a5fa, 0 0 40px rgba(96, 165, 250, 0.7); }
}

@keyframes strategyRingExpand {
  0% { width: 14px; height: 14px; opacity: 0.8; transform: scale(1); }
  100% { width: 52px; height: 52px; opacity: 0; transform: scale(1.6); }
}

/* --------------------------------------------------------------------------
   2. Visual Identity & Design - Cyan/Blue Gradient Orb & Rotating Halo
   -------------------------------------------------------------------------- */
.core-visual-identity {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-visual-identity .identity-orb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a5f3fc 0%, #00F0FF 45%, #1d4ed8 100%);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.75), 0 0 35px rgba(0, 240, 255, 0.35);
  z-index: 2;
  position: relative;
}

.core-visual-identity .identity-halo {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 240, 255, 0.5);
  border-top-color: #ffffff;
  animation: haloRotate 6s infinite linear;
  transform: rotateX(65deg);
}

.core-visual-identity .identity-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 6px #00F0FF;
  animation: particleFloat 3s infinite ease-in-out;
}

.core-visual-identity .identity-particle:nth-child(3) { top: 4px; left: 6px; animation-delay: 0.5s; }
.core-visual-identity .identity-particle:nth-child(4) { bottom: 6px; right: 4px; animation-delay: 1.5s; }

@keyframes haloRotate {
  0% { transform: rotateX(65deg) rotateZ(0deg); }
  100% { transform: rotateX(65deg) rotateZ(360deg); }
}

@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.4; }
  50% { transform: translateY(-4px) scale(1.2); opacity: 1; }
}

/* --------------------------------------------------------------------------
   3. Creative Consulting - Blue Geometric Core & Slow 3D Rotation
   -------------------------------------------------------------------------- */
.core-consulting {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 300px;
}

.core-consulting .consulting-prism {
  width: 18px;
  height: 18px;
  position: relative;
  transform-style: preserve-3d;
  animation: prismSpin 8s infinite linear;
}

.core-consulting .prism-face {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(0, 240, 255, 0.65);
  background: rgba(27, 109, 251, 0.18);
  backdrop-filter: blur(2px);
}

.core-consulting .prism-face:nth-child(1) { transform: rotateY(0deg) translateZ(9px); }
.core-consulting .prism-face:nth-child(2) { transform: rotateY(90deg) translateZ(9px); }
.core-consulting .prism-face:nth-child(3) { transform: rotateX(90deg) translateZ(9px); }

.core-consulting .consulting-glow {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1B6DFB;
  box-shadow: 0 0 20px #00F0FF, 0 0 35px rgba(27, 109, 251, 0.6);
  z-index: 0;
}

@keyframes prismSpin {
  0% { transform: rotateX(25deg) rotateY(0deg); }
  50% { transform: rotateX(55deg) rotateY(180deg); }
  100% { transform: rotateX(25deg) rotateY(360deg); }
}

/* --------------------------------------------------------------------------
   4. Digital Presence - Cyan/Purple Energy Core & Orbiting Particles
   -------------------------------------------------------------------------- */
.core-digital {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-digital .digital-core {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e879f9 0%, #a855f7 45%, #00F0FF 100%);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.8), 0 0 30px rgba(0, 240, 255, 0.4);
  animation: digitalWavePulse 2.8s infinite ease-in-out;
  position: relative;
  z-index: 2;
}

.core-digital .digital-wave {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.4);
  animation: digitalWaveExpand 2.8s infinite ease-out;
}

.core-digital .digital-orbit {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  animation: orbitSpin 3.2s infinite linear;
}

.core-digital .digital-satellite {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF, 0 0 14px #e879f9;
}

@keyframes digitalWavePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 22px rgba(168, 85, 247, 1), 0 0 38px rgba(0, 240, 255, 0.6); }
}

@keyframes digitalWaveExpand {
  0% { width: 14px; height: 14px; opacity: 0.75; }
  100% { width: 44px; height: 44px; opacity: 0; }
}

@keyframes orbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .core-strategy .strategy-nucleus,
  .core-strategy .strategy-ring,
  .core-visual-identity .identity-halo,
  .core-visual-identity .identity-particle,
  .core-consulting .consulting-prism,
  .core-digital .digital-core,
  .core-digital .digital-wave,
  .core-digital .digital-orbit {
    animation: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Premium Morphing Energy Core Architecture ("How We Work")
 * Lusion-Inspired Fluid Geometric Morphing & Particle Sparks
 * ============================================================================
 */

.process-icon-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 28px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
}

/* Master Shape Canvas Container */
.morphing-core-container {
  width: 104px;
  height: 104px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform, filter;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.4));
  animation: coreIdleBreathe 4.5s infinite ease-in-out;
}

.process-card-cinematic:nth-child(1) .morphing-core-container { animation-delay: 0s; }
.process-card-cinematic:nth-child(2) .morphing-core-container { animation-delay: 1.5s; }
.process-card-cinematic:nth-child(3) .morphing-core-container { animation-delay: 3s; }

/* SVG Vector Canvas */
.morphing-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Base Morphing Energy Outline Path with Smooth Interpolation */
.morph-path {
  fill: rgba(10, 18, 38, 0.65);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: d 0.75s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease, fill 0.4s ease;
  will-change: d;
}

/* Glow & Glass Layers */
.morph-path-glow {
  fill: none;
  stroke-width: 3.5;
  opacity: 0.35;
  transition: d 0.75s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease, opacity 0.4s ease;
}

/* --------------------------------------------------------------------------
   1. DISCOVER: Triangle -> Complex Organic Shape
   -------------------------------------------------------------------------- */
.core-discover .morph-path {
  d: path("M 50,16 L 85,78 A 3 3 0 0 1 82,82 L 18,82 A 3 3 0 0 1 15,78 Z");
  stroke: url(#cyanBlueGrad1);
}
.core-discover .morph-path-glow {
  d: path("M 50,16 L 85,78 A 3 3 0 0 1 82,82 L 18,82 A 3 3 0 0 1 15,78 Z");
  stroke: #00F0FF;
}

/* On Card Hover: Morphs into Organic Complex Shape */
.process-card-cinematic:hover .core-discover .morph-path,
.process-card:hover .core-discover .morph-path {
  d: path("M 50,12 C 86,16 96,48 82,74 C 68,92 28,94 16,72 C 6,52 18,22 50,12 Z");
  stroke: #00F0FF;
  fill: rgba(27, 109, 251, 0.22);
}
.process-card-cinematic:hover .core-discover .morph-path-glow,
.process-card:hover .core-discover .morph-path-glow {
  d: path("M 50,12 C 86,16 96,48 82,74 C 68,92 28,94 16,72 C 6,52 18,22 50,12 Z");
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   2. DESIGN: Circle -> Fluid Rounded Polygon / Organic Blob
   -------------------------------------------------------------------------- */
.core-design .morph-path {
  d: path("M 50,14 C 70,14 86,30 86,50 C 86,70 70,86 50,86 C 30,86 14,70 14,50 C 14,30 30,14 50,14 Z");
  stroke: url(#blueCyanGrad2);
}
.core-design .morph-path-glow {
  d: path("M 50,14 C 70,14 86,30 86,50 C 86,70 70,86 50,86 C 30,86 14,70 14,50 C 14,30 30,14 50,14 Z");
  stroke: #1B6DFB;
}

/* On Card Hover: Morphs into Fluid Polygon / Blob */
.process-card-cinematic:hover .core-design .morph-path,
.process-card:hover .core-design .morph-path {
  d: path("M 50,10 C 82,14 94,40 84,72 C 72,92 28,92 16,70 C 6,50 14,20 50,10 Z");
  stroke: #00F0FF;
  fill: rgba(0, 240, 255, 0.2);
}
.process-card-cinematic:hover .core-design .morph-path-glow,
.process-card:hover .core-design .morph-path-glow {
  d: path("M 50,10 C 82,14 94,40 84,72 C 72,92 28,92 16,70 C 6,50 14,20 50,10 Z");
  opacity: 0.9;
  stroke: #00F0FF;
}

/* --------------------------------------------------------------------------
   3. DELIVER: Hexagon -> Futuristic Crystalline Star / Crystal
   -------------------------------------------------------------------------- */
.core-deliver .morph-path {
  d: path("M 50,14 L 83,32 L 83,68 L 50,86 L 17,68 L 17,32 Z");
  stroke: url(#cyanPurpleGrad3);
}
.core-deliver .morph-path-glow {
  d: path("M 50,14 L 83,32 L 83,68 L 50,86 L 17,68 L 17,32 Z");
  stroke: #a855f7;
}

/* On Card Hover: Morphs into Faceted Crystalline Star */
.process-card-cinematic:hover .core-deliver .morph-path,
.process-card:hover .core-deliver .morph-path {
  d: path("M 50,8 L 64,30 L 92,36 L 72,58 L 78,88 L 50,72 L 22,88 L 28,58 L 8,36 L 36,30 Z");
  stroke: #00F0FF;
  fill: rgba(168, 85, 247, 0.25);
}
.process-card-cinematic:hover .core-deliver .morph-path-glow,
.process-card:hover .core-deliver .morph-path-glow {
  d: path("M 50,8 L 64,30 L 92,36 L 72,58 L 78,88 L 50,72 L 22,88 L 28,58 L 8,36 L 36,30 Z");
  opacity: 0.95;
  stroke: #00F0FF;
}

/* --------------------------------------------------------------------------
   INTERNAL ENERGY PARTICLES, SPARKS & NODES
   -------------------------------------------------------------------------- */
.energy-spark {
  position: absolute;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 8px #00F0FF, 0 0 16px #1B6DFB;
  pointer-events: none;
  animation: sparkPulse 2.8s infinite ease-in-out;
}

.core-nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a5f3fc 0%, #00F0FF 50%, #1d4ed8 100%);
  box-shadow: 0 0 15px #00F0FF, 0 0 30px rgba(0, 240, 255, 0.4);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.process-card-cinematic:hover .core-nucleus {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 25px #00F0FF, 0 0 45px rgba(0, 240, 255, 0.8);
}

/* Inner Ray Lines */
.inner-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: raySpin 14s infinite linear;
}

/* Hover Transform & Bloom */
.process-card-cinematic:hover .morphing-core-container {
  transform: scale(1.12) translateZ(12px);
  filter: drop-shadow(0 0 22px rgba(0, 240, 255, 0.85)) drop-shadow(0 0 40px rgba(27, 109, 251, 0.6));
}

@keyframes coreIdleBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

@keyframes sparkPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes raySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .morphing-core-container,
  .morph-path,
  .morph-path-glow,
  .energy-spark,
  .inner-rays {
    animation: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - "How We Work" & "Brands We've Helped Grow" Cinematic Suite
 * Lusion-Inspired Interactive Architecture
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. PROCESS SECTION ("HOW WE WORK")
   -------------------------------------------------------------------------- */
.process-section-cinematic {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

/* Connecting Energy Beam between 1 -> 2 -> 3 */
.process-energy-track {
  position: absolute;
  top: 52px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
  pointer-events: none;
}

.process-energy-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(27, 109, 251, 0.8) 30%, #00F0FF 50%, rgba(27, 109, 251, 0.8) 70%, transparent 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 14px #00F0FF, 0 0 28px rgba(0, 240, 255, 0.5);
  animation: energyFlow 4.5s infinite linear;
}

@keyframes energyFlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Process Cards with 3D Depth */
.process-card-cinematic {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  will-change: transform;
  opacity: 0;
  transform: translateY(40px) translateZ(-30px) scale(0.95);
}

.process-card-cinematic.in-view {
  opacity: 1;
  transform: translateY(0) translateZ(0) scale(1);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-card-cinematic:nth-child(1).in-view { transition-delay: 0.1s; }
.process-card-cinematic:nth-child(2).in-view { transition-delay: 0.3s; }
.process-card-cinematic:nth-child(3).in-view { transition-delay: 0.5s; }

/* Process Icon Wrapper & Energy Rings */
.process-icon-wrapper {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 28px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.process-energy-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 240, 255, 0.35);
  border-top-color: #00F0FF;
  border-right-color: #1B6DFB;
  animation: ringRotate 9s infinite linear;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-satellite-dot {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 10px #00F0FF, 0 0 20px #1B6DFB;
}

.process-shape {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(27, 109, 251, 0.25) 0%, rgba(10, 18, 36, 0.85) 80%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}

.process-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B6DFB, #00F0FF);
  color: #020408;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.6);
  animation: badgeGlowPulse 2.8s infinite ease-in-out;
  z-index: 3;
}

@keyframes badgeGlowPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(0, 240, 255, 0.6); }
  50% { transform: scale(1.1); box-shadow: 0 0 24px rgba(0, 240, 255, 0.95); }
}

@keyframes ringRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hover Enhancements */
.process-card-cinematic:hover .process-shape {
  border-color: rgba(0, 240, 255, 0.5);
  background: radial-gradient(circle at 35% 35%, rgba(0, 240, 255, 0.3) 0%, rgba(10, 18, 36, 0.9) 80%);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.35), inset 0 0 20px rgba(0, 240, 255, 0.2);
}

.process-card-cinematic:hover .process-energy-ring {
  border-color: rgba(0, 240, 255, 0.8);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
}

.process-card-cinematic:hover h3 {
  color: #00F0FF !important;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.process-card-cinematic:hover p {
  color: #e2e8f0 !important;
  transition: color 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. BRANDS WE'VE HELPED GROW (STATS & TESTIMONIAL)
   -------------------------------------------------------------------------- */
.social-proof-cinematic {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

/* Aurora Light behind Heading */
.heading-aurora-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.15) 0%, rgba(27, 109, 251, 0.1) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: auroraDrift 8s infinite alternate ease-in-out;
}

@keyframes auroraDrift {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
  100% { transform: translateX(-40%) scale(1.15); opacity: 1; }
}

/* Stat Box with 3D Parallax & Cursor Spotlight */
.stat-box-cinematic {
  position: relative;
  padding: 30px 20px;
  border-radius: 20px;
  background: rgba(10, 15, 30, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.stat-box-cinematic:hover {
  transform: translateY(-8px) translateZ(15px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.2);
}

.stat-number-glow {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 8px;
  will-change: text-shadow, transform;
}

.stat-number-glow.counting {
  text-shadow: 0 0 35px currentColor, 0 0 60px currentColor;
  transform: scale(1.05);
}

.stat-number-glow.counted {
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
  transform: scale(1);
  transition: all 0.6s ease;
}

/* Testimonial Glass Card with Moving Sheen Beam */
.testimonial-card-cinematic {
  position: relative;
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 48px;
  background: rgba(10, 16, 34, 0.65) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.08);
}

.testimonial-card-cinematic:hover {
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 240, 255, 0.25);
}

/* Light Sheen Beam Sweep */
.testimonial-sheen {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), rgba(0, 240, 255, 0.12), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  animation: sheenSweep 6s infinite ease-in-out;
}

@keyframes sheenSweep {
  0% { left: -100%; }
  40%, 100% { left: 200%; }
}

/* Background Ambient Dust Particles */
.ambient-dust-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ambient-dust-dot {
  position: absolute;
  border-radius: 50%;
  background: #00F0FF;
  opacity: 0.25;
  filter: blur(1px);
  animation: dustFloat 12s infinite ease-in-out alternate;
}

@keyframes dustFloat {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(25px, -35px, 0); }
  100% { transform: translate3d(-20px, 25px, 0); }
}

@media (max-width: 768px) {
  .process-energy-track { display: none; }
  .stat-box-cinematic { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-card-cinematic,
  .process-energy-beam,
  .process-energy-ring,
  .process-badge,
  .heading-aurora-glow,
  .testimonial-sheen,
  .ambient-dust-dot {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - "Why Choose Us" + Contact Form Cinematic Digital Energy Field
 * Lusion-Inspired Interactive Web Canvas & Liquid Light Architecture
 * ============================================================================
 */

.contact-section-cinematic {
  position: relative;
  overflow: hidden;
  background: #020408 !important;
  perspective: 1200px;
  padding: 120px 0;
}

/* Background Canvas Layer */
.energy-field-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* Atmospheric Nebula Glows */
.nebula-glow-1 {
  position: absolute;
  top: -15%;
  right: -10%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, rgba(27, 109, 251, 0.06) 45%, transparent 70%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 0;
  animation: nebulaFloat1 14s infinite alternate ease-in-out;
}

.nebula-glow-2 {
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(27, 109, 251, 0.14) 0%, rgba(168, 85, 247, 0.05) 50%, transparent 70%);
  filter: blur(75px);
  pointer-events: none;
  z-index: 0;
  animation: nebulaFloat2 16s infinite alternate ease-in-out;
}

/* Flowing Liquid-Light Wave Ribbon */
.liquid-wave-ribbon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 280px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  overflow: visible;
}

.wave-ribbon-path {
  fill: none;
  stroke: url(#liquidWaveGrad);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.35));
  animation: waveMorph 10s infinite ease-in-out alternate;
}

@keyframes waveMorph {
  0% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.2) translateY(-15px); }
  100% { transform: scaleY(0.9) translateY(15px); }
}

@keyframes nebulaFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.15); }
}

@keyframes nebulaFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(45px, -35px) scale(1.2); }
}

/* Feature List Items with 3D Micro-Lift */
.why-choose-list li {
  position: relative;
  padding: 12px 16px;
  border-radius: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
}

.why-choose-list li:hover {
  transform: translateX(8px);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(0, 240, 255, 0.15);
}

.why-choose-list li:hover h4 {
  color: #00F0FF;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Contact Form Glass Card */
.contact-card-cinematic {
  position: relative;
  background: rgba(10, 16, 34, 0.72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 240, 255, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.contact-card-cinematic:hover {
  border-color: rgba(0, 240, 255, 0.32) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 240, 255, 0.22);
}

/* Input Fields Soft Neon Focus */
.contact-card-cinematic input,
.contact-card-cinematic select,
.contact-card-cinematic textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.contact-card-cinematic input:focus,
.contact-card-cinematic select:focus,
.contact-card-cinematic textarea:focus {
  outline: none !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.05) !important;
  background: rgba(10, 20, 42, 0.8) !important;
}

/* Button Refined Moving Sheen */
.contact-card-cinematic button[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card-cinematic button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4), 0 0 20px rgba(27, 109, 251, 0.5);
}

.contact-card-cinematic button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  transition: none;
}

.contact-card-cinematic button[type="submit"]:hover::after {
  left: 200%;
  transition: left 0.75s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .energy-field-canvas,
  .nebula-glow-1,
  .nebula-glow-2,
  .liquid-wave-ribbon,
  .wave-ribbon-path {
    animation: none !important;
    display: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Full-Width Responsive Desktop Layout Restoration
 * Eliminates all narrow constraints, fixed widths, and white borders
 * ============================================================================
 */

/* 1. ROOT & BODY FULL-WIDTH ENFORCEMENT */
html {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #020408 !important;
  background-color: #020408 !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  box-sizing: border-box !important;
}

body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #020408 !important;
  background-color: #020408 !important;
  color: #FFFFFF !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
  zoom: 1 !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* 2. WRAPPER & MAIN CONTAINER FULL-WIDTH */
#page,
.site,
main,
.page-content,
.site-content,
.entry-content,
#content,
.wp-site-blocks {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* 3. FULL-WIDTH CINEMATIC SECTIONS */
.site-header,
.hero-section,
.marquee-section,
.section,
.cta-section,
.cta-section-cinematic,
.site-footer,
.site-footer-cinematic {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #020408 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* 4. CONTENT CONTAINERS (1240px desktop container, responsive scaling) */
.container,
.header-inner,
.cta-inner {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1280px) {
  .container,
  .header-inner,
  .cta-inner {
    max-width: 1140px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 991px) {
  .container,
  .header-inner,
  .cta-inner {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 5. MULTI-COLUMN RESPONSIVE GRIDS */
.grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  width: 100% !important;
}

.grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
}

.grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

@media (max-width: 991px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 576px) {
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* 6. PREVENT ACCIDENTAL HORIZONTAL OVERFLOW OR NARROW BOXING */
body.loader-active {
  overflow-x: hidden !important;
}


/**
 * ============================================================================
 * BrandGlows - Light Blue Animated Continuous Marquee Scroller (Right to Left)
 * ============================================================================
 */

.marquee-section.marquee-light-blue {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #00f0ff 100%) !important;
  padding: 16px 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 30px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
  z-index: 10 !important;
}

.marquee-track {
  display: flex !important;
  width: max-content !important;
  animation: marqueeScrollRightToLeft 24s linear infinite !important;
  will-change: transform;
}

.marquee-section:hover .marquee-track {
  animation-play-state: paused;
}

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

.marquee-content-block {
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
  padding-right: 36px !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2.2px !important;
  color: #020408 !important;
  user-select: none;
}

.marquee-star-icon {
  width: 18px !important;
  height: 18px !important;
  fill: #020408 !important;
  color: #020408 !important;
  opacity: 0.8 !important;
  flex-shrink: 0;
  display: inline-block;
  animation: starRotate 6s linear infinite !important;
}

@keyframes starRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .marquee-star-icon {
    animation: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Scoped Services Section Premium Card Animations & Mouse Glow
 * ============================================================================
 */

/* Section Container */
.services-section-cinematic {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 !important;
}

/* 2x2 Grid Layout */
.services-grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
}

/* Premium Service Card */
.service-card-premium {
  position: relative !important;
  background: rgba(10, 16, 32, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 42px 36px !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
  will-change: transform;
  z-index: 1;
}

/* Card Hover Elevation, Scale & Ambient Glow */
.service-card-premium:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 0 32px rgba(0, 240, 255, 0.15) !important;
}

/* Top Accent Glow Lines */
.service-top-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  opacity: 0.85;
  transition: opacity 0.35s ease, height 0.35s ease, filter 0.35s ease;
}

.service-card-premium:hover .service-top-accent {
  opacity: 1;
  height: 4.5px;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.7));
}

.accent-blue { background: linear-gradient(90deg, #1B6DFB 0%, #00F0FF 100%) !important; }
.accent-cyan { background: linear-gradient(90deg, #00F0FF 0%, #38BDF8 100%) !important; }
.accent-violet { background: linear-gradient(90deg, #8B5CF6 0%, #00F0FF 100%) !important; }
.accent-presence { background: linear-gradient(90deg, #00F0FF 0%, #1B6DFB 100%) !important; }

/* Mouse-Following Clipped Glow */
.card-mouse-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.14) 0%, rgba(27, 109, 251, 0.05) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
  z-index: 0;
}

.service-card-premium:hover .card-mouse-glow {
  opacity: 1;
}

/* Icon Box & Cores */
.service-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.service-card-premium:hover .service-icon-box {
  transform: scale(1.08) translateY(-2px);
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.service-visual-core {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Core 1: Strategy */
.strategy-nucleus {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1B6DFB;
  box-shadow: 0 0 14px #1B6DFB, 0 0 22px rgba(27, 109, 251, 0.6);
  animation: strategyPulse 3s infinite alternate ease-in-out;
}

.strategy-ring {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 240, 255, 0.4);
  animation: ringBreathe 3s infinite alternate ease-in-out;
}

.ring-outer {
  width: 34px;
  height: 34px;
  border: 1px dashed rgba(27, 109, 251, 0.4);
  animation: ringBreathe 3s infinite alternate ease-in-out 0.5s;
}

@keyframes strategyPulse {
  0% { transform: scale(0.9); box-shadow: 0 0 10px #1B6DFB; }
  100% { transform: scale(1.15); box-shadow: 0 0 18px #00F0FF; }
}

@keyframes ringBreathe {
  0% { transform: scale(0.85) rotate(0deg); opacity: 0.5; }
  100% { transform: scale(1.1) rotate(180deg); opacity: 0.9; }
}

/* Core 2: Identity */
.identity-orb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00F0FF, #1B6DFB);
  box-shadow: 0 0 15px #00F0FF;
}

.identity-halo {
  position: absolute;
  width: 28px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 240, 255, 0.6);
  transform: rotate(-25deg);
  animation: haloSpin 6s infinite linear;
}

.identity-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 6px #00F0FF;
}

.p1 { top: 2px; right: 4px; animation: sparkDrift1 4s infinite alternate ease-in-out; }
.p2 { bottom: 3px; left: 4px; animation: sparkDrift2 4s infinite alternate ease-in-out; }

@keyframes haloSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sparkDrift1 {
  0% { transform: translate(0, 0); opacity: 0.4; }
  100% { transform: translate(3px, -3px); opacity: 1; }
}

@keyframes sparkDrift2 {
  0% { transform: translate(0, 0); opacity: 0.4; }
  100% { transform: translate(-3px, 3px); opacity: 1; }
}

/* Core 3: Consulting */
.consulting-cube {
  position: relative;
  width: 18px;
  height: 18px;
  transform-style: preserve-3d;
  animation: cubeRotate 8s infinite linear;
}

.cube-facet {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(139, 92, 246, 0.8);
  background: rgba(139, 92, 246, 0.15);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.f-front { transform: translateZ(9px); }
.f-back { transform: rotateY(180deg) translateZ(9px); }
.f-top { transform: rotateX(90deg) translateZ(9px); }
.f-bottom { transform: rotateX(-90deg) translateZ(9px); }

.consulting-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 10px #00F0FF;
}

@keyframes cubeRotate {
  0% { transform: rotateX(25deg) rotateY(0deg); }
  100% { transform: rotateX(25deg) rotateY(360deg); }
}

/* Core 4: Presence */
.presence-core-nucleus {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 12px #00F0FF;
  position: relative;
  z-index: 2;
}

.presence-pulse-wave {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 240, 255, 0.5);
  animation: wavePulse 3s infinite ease-out;
}

.wave-1 { width: 22px; height: 22px; }
.wave-2 { width: 32px; height: 32px; animation-delay: 1.2s; }

.presence-orbit-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1B6DFB;
  box-shadow: 0 0 8px #1B6DFB;
  top: 0;
  left: 50%;
  transform-origin: 0 18px;
  animation: nodeOrbit 4s infinite linear;
}

@keyframes wavePulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes nodeOrbit {
  0% { transform: rotate(0deg) translateX(16px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(16px) rotate(-360deg); }
}

/* Card Text */
.service-card-title {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
  position: relative;
  z-index: 2;
}

.service-card-desc {
  font-size: 0.98rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
}

/* Responsive */
@media (max-width: 900px) {
  .services-grid-2x2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .services-section-cinematic {
    padding: 80px 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card-premium,
  .strategy-nucleus,
  .strategy-ring,
  .identity-halo,
  .consulting-cube,
  .presence-pulse-wave,
  .presence-orbit-node {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Services Section Master Cinematic Upgrade
 * Ambient Space, Mouse Spotlight, Glass Light Sweep, Micro-Interactions
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT SPACE
   -------------------------------------------------------------------------- */
.services-section-cinematic {
  position: relative !important;
  background: #020408 !important;
  padding: 130px 0 120px 0 !important;
  overflow: hidden !important;
}

/* Ambient Blurred Light Orbs Behind Heading & Cards */
.services-ambient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.services-orb-1 {
  top: 8%;
  left: 15%;
  width: 550px;
  height: 380px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08) 0%, rgba(27, 109, 251, 0.04) 45%, transparent 70%);
  filter: blur(85px);
  animation: servicesOrbBreathe1 16s infinite alternate ease-in-out;
}

.services-orb-2 {
  top: 12%;
  right: 12%;
  width: 600px;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.07) 0%, rgba(27, 109, 251, 0.035) 50%, transparent 70%);
  filter: blur(90px);
  animation: servicesOrbBreathe2 18s infinite alternate ease-in-out;
}

.services-orb-3 {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 350px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.05) 0%, rgba(139, 92, 246, 0.03) 50%, transparent 75%);
  filter: blur(95px);
  animation: servicesOrbBreathe3 20s infinite alternate ease-in-out;
}

@keyframes servicesOrbBreathe1 {
  0% { transform: translate(0, 0) scale(0.92); opacity: 0.7; }
  100% { transform: translate(25px, -18px) scale(1.1); opacity: 1; }
}

@keyframes servicesOrbBreathe2 {
  0% { transform: translate(0, 0) scale(1.08); opacity: 0.65; }
  100% { transform: translate(-22px, 20px) scale(0.94); opacity: 0.95; }
}

@keyframes servicesOrbBreathe3 {
  0% { transform: translateX(-50%) scale(0.95); opacity: 0.6; }
  100% { transform: translateX(-48%) scale(1.08); opacity: 0.9; }
}

/* Floating Particles Canvas */
.services-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

/* Heading */
.services-main-title {
  font-size: clamp(2.2rem, 3.8vw, 2.7rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 52px !important;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   2. 2x2 CARD GRID & CINEMATIC INTERACTIVE CARD
   -------------------------------------------------------------------------- */
.services-grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  position: relative;
  z-index: 2;
}

.service-card-cinematic {
  position: relative !important;
  background: rgba(10, 16, 32, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 44px 38px !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
  will-change: transform;
  z-index: 1;
}

/* Hover State: 10px Lift, Subtle Scale & Ambient Glow */
.service-card-cinematic:hover {
  transform: translateY(-10px) scale(1.015) !important;
  border-color: rgba(0, 240, 255, 0.38) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.65), 0 0 36px rgba(0, 240, 255, 0.16) !important;
}

/* Top Border Highlight */
.service-top-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  opacity: 0.85;
  transition: opacity 0.35s ease, height 0.35s ease, filter 0.35s ease;
}

.service-card-cinematic:hover .service-top-border {
  opacity: 1;
  height: 4.5px;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.7));
}

.border-blue { background: linear-gradient(90deg, #1B6DFB 0%, #00F0FF 100%) !important; }
.border-cyan { background: linear-gradient(90deg, #00F0FF 0%, #38BDF8 100%) !important; }
.border-violet { background: linear-gradient(90deg, #8B5CF6 0%, #00F0FF 100%) !important; }
.border-presence { background: linear-gradient(90deg, #00F0FF 0%, #1B6DFB 100%) !important; }

/* Subtle Glass Light Sheen Sweep Across Card */
.service-sheen-sweep {
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  transition: none;
  z-index: 1;
}

.service-card-cinematic:hover .service-sheen-sweep {
  left: 220%;
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mouse-Following Clipped Spotlight */
.card-mouse-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, rgba(27, 109, 251, 0.05) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
  z-index: 0;
}

.service-card-cinematic:hover .card-mouse-spotlight {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. ICON MICRO-ANIMATION & CORES
   -------------------------------------------------------------------------- */
.service-icon-rig {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.service-card-cinematic:hover .service-icon-rig {
  transform: scale(1.09) translateY(-4px);
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.32);
}

.service-visual-core {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Core 1: Strategy */
.strategy-nucleus {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1B6DFB;
  box-shadow: 0 0 14px #1B6DFB, 0 0 22px rgba(27, 109, 251, 0.6);
  animation: strategyPulse 3s infinite alternate ease-in-out;
}

.strategy-ring {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 240, 255, 0.4);
  animation: ringBreathe 3s infinite alternate ease-in-out;
}

.ring-outer {
  width: 34px;
  height: 34px;
  border: 1px dashed rgba(27, 109, 251, 0.4);
  animation: ringBreathe 3s infinite alternate ease-in-out 0.5s;
}

@keyframes strategyPulse {
  0% { transform: scale(0.9); box-shadow: 0 0 10px #1B6DFB; }
  100% { transform: scale(1.15); box-shadow: 0 0 18px #00F0FF; }
}

@keyframes ringBreathe {
  0% { transform: scale(0.85) rotate(0deg); opacity: 0.5; }
  100% { transform: scale(1.1) rotate(180deg); opacity: 0.9; }
}

/* Core 2: Identity */
.identity-orb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00F0FF, #1B6DFB);
  box-shadow: 0 0 15px #00F0FF;
}

.identity-halo {
  position: absolute;
  width: 28px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 240, 255, 0.6);
  transform: rotate(-25deg);
  animation: haloSpin 6s infinite linear;
}

.identity-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 6px #00F0FF;
}

.p1 { top: 2px; right: 4px; animation: sparkDrift1 4s infinite alternate ease-in-out; }
.p2 { bottom: 3px; left: 4px; animation: sparkDrift2 4s infinite alternate ease-in-out; }

@keyframes haloSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sparkDrift1 {
  0% { transform: translate(0, 0); opacity: 0.4; }
  100% { transform: translate(3px, -3px); opacity: 1; }
}

@keyframes sparkDrift2 {
  0% { transform: translate(0, 0); opacity: 0.4; }
  100% { transform: translate(-3px, 3px); opacity: 1; }
}

/* Core 3: Consulting */
.consulting-cube {
  position: relative;
  width: 18px;
  height: 18px;
  transform-style: preserve-3d;
  animation: cubeRotate 8s infinite linear;
}

.cube-facet {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(139, 92, 246, 0.8);
  background: rgba(139, 92, 246, 0.15);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.f-front { transform: translateZ(9px); }
.f-back { transform: rotateY(180deg) translateZ(9px); }
.f-top { transform: rotateX(90deg) translateZ(9px); }
.f-bottom { transform: rotateX(-90deg) translateZ(9px); }

.consulting-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 10px #00F0FF;
}

@keyframes cubeRotate {
  0% { transform: rotateX(25deg) rotateY(0deg); }
  100% { transform: rotateX(25deg) rotateY(360deg); }
}

/* Core 4: Presence */
.presence-core-nucleus {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 0 12px #00F0FF;
  position: relative;
  z-index: 2;
}

.presence-pulse-wave {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 240, 255, 0.5);
  animation: wavePulse 3s infinite ease-out;
}

.wave-1 { width: 22px; height: 22px; }
.wave-2 { width: 32px; height: 32px; animation-delay: 1.2s; }

.presence-orbit-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1B6DFB;
  box-shadow: 0 0 8px #1B6DFB;
  top: 0;
  left: 50%;
  transform-origin: 0 18px;
  animation: nodeOrbit 4s infinite linear;
}

@keyframes wavePulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes nodeOrbit {
  0% { transform: rotate(0deg) translateX(16px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(16px) rotate(-360deg); }
}

/* --------------------------------------------------------------------------
   4. TEXT MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
.service-card-heading {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.3s ease;
}

.service-card-cinematic:hover .service-card-heading {
  transform: translateY(-2.5px);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

.service-card-text {
  font-size: 0.98rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.service-card-cinematic:hover .service-card-text {
  transform: translateY(-2px);
  color: #cbd5e1 !important;
}

/* Responsive */
@media (max-width: 900px) {
  .services-grid-2x2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .services-section-cinematic {
    padding: 80px 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-orb-1,
  .services-orb-2,
  .services-orb-3,
  .service-card-cinematic,
  .service-card-heading,
  .service-card-text,
  .strategy-nucleus,
  .strategy-ring,
  .identity-halo,
  .consulting-cube,
  .presence-pulse-wave,
  .presence-orbit-node {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Brands We've Helped Grow Premium Section Architecture
 * Matching Services Section Visual Language: Glass Cards, Spotlight & Counter
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT GLOWS
   -------------------------------------------------------------------------- */
.brands-grow-section-cinematic {
  position: relative !important;
  background: #020408 !important;
  overflow: hidden !important;
  padding: 125px 0 115px 0 !important;
}

/* Ambient Blurred Glow Orbs */
.brands-ambient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.brands-orb-1 {
  top: 15%;
  left: 14%;
  width: 540px;
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08) 0%, rgba(27, 109, 251, 0.04) 45%, transparent 70%);
  filter: blur(85px);
  animation: brandsOrbFloat1 16s infinite alternate ease-in-out;
}

.brands-orb-2 {
  bottom: 12%;
  right: 12%;
  width: 580px;
  height: 390px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.07) 0%, rgba(27, 109, 251, 0.035) 50%, transparent 70%);
  filter: blur(90px);
  animation: brandsOrbFloat2 18s infinite alternate ease-in-out;
}

@keyframes brandsOrbFloat1 {
  0% { transform: translate(0, 0) scale(0.92); opacity: 0.7; }
  100% { transform: translate(24px, -16px) scale(1.08); opacity: 1; }
}

@keyframes brandsOrbFloat2 {
  0% { transform: translate(0, 0) scale(1.06); opacity: 0.65; }
  100% { transform: translate(-20px, 18px) scale(0.94); opacity: 0.95; }
}

/* Particles Canvas */
.brands-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

/* Heading */
.brands-section-title {
  font-size: clamp(2.2rem, 3.8vw, 2.7rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 52px !important;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   2. 3 STATISTIC CARDS (MATCHING SERVICES VISUAL LANGUAGE)
   -------------------------------------------------------------------------- */
.brands-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin-bottom: 48px !important;
  position: relative;
  z-index: 2;
}

.stat-card-cinematic {
  position: relative !important;
  background: rgba(10, 16, 32, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 42px 28px 36px 28px !important;
  text-align: center !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
  will-change: transform;
  z-index: 1;
}

/* Card Hover Elevation, Scale & Glow */
.stat-card-cinematic:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(0, 240, 255, 0.38) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 0 32px rgba(0, 240, 255, 0.16) !important;
}

/* Top Accent Lines */
.stat-top-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  opacity: 0.85;
  transition: opacity 0.35s ease, height 0.35s ease, filter 0.35s ease;
}

.stat-card-cinematic:hover .stat-top-accent {
  opacity: 1;
  height: 4.5px;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.7));
}

.stat-top-accent.accent-blue { background: linear-gradient(90deg, #1B6DFB 0%, #00F0FF 100%) !important; }
.stat-top-accent.accent-cyan { background: linear-gradient(90deg, #00F0FF 0%, #38BDF8 100%) !important; }
.stat-top-accent.accent-violet { background: linear-gradient(90deg, #8B5CF6 0%, #00F0FF 100%) !important; }

/* Light Sheen Sweep Across Card */
.stat-sheen-sweep {
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  transition: none;
  z-index: 1;
}

.stat-card-cinematic:hover .stat-sheen-sweep {
  left: 220%;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mouse-Following Clipped Spotlight */
.card-mouse-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, rgba(27, 109, 251, 0.05) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
  z-index: 0;
}

.stat-card-cinematic:hover .card-mouse-spotlight {
  opacity: 1;
}

/* Large Number */
.stat-num-val {
  font-size: clamp(2.8rem, 4vw, 3.4rem) !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
  letter-spacing: -1px;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.stat-card-cinematic:hover .stat-num-val {
  color: #00F0FF !important;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.6) !important;
}

/* Label Underneath */
.stat-label-text {
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.stat-card-cinematic:hover .stat-label-text {
  color: #e2e8f0 !important;
}

/* --------------------------------------------------------------------------
   3. PREMIUM TESTIMONIAL CARD
   -------------------------------------------------------------------------- */
.testimonial-card-cinematic {
  max-width: 820px !important;
  margin: 0 auto !important;
  background: rgba(10, 16, 32, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 44px 40px !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.testimonial-card-cinematic:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 240, 255, 0.32) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65), 0 0 28px rgba(0, 240, 255, 0.12) !important;
}

.testimonial-quote-text {
  font-size: clamp(1.08rem, 1.8vw, 1.25rem) !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  color: #e2e8f0 !important;
  margin: 0 0 20px 0 !important;
  font-weight: 400 !important;
  position: relative;
  z-index: 2;
}

.testimonial-author-text {
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .brands-stats-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .brands-grow-section-cinematic { padding: 80px 0 75px 0 !important; }
  .testimonial-card-cinematic { padding: 32px 22px !important; }
  .stat-card-cinematic { padding: 32px 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .brands-orb-1,
  .brands-orb-2,
  .stat-card-cinematic,
  .testimonial-card-cinematic {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Master Animation & Interaction Suite
 * Cinematic Micro-Interactions, Social Buttons, CTA, Footer & WhatsApp
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. HERO SECTION INTERACTIONS
   -------------------------------------------------------------------------- */
.hero-anim-title {
  animation: heroFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-anim-subtitle {
  animation: heroFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

.hero-anim-cta {
  animation: heroFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

@keyframes heroFadeInUp {
  0% { opacity: 0; transform: translateY(24px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* CTA Buttons Micro-Interaction */
.btn-primary {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, filter 0.28s ease !important;
  will-change: transform;
}

.btn-primary:hover {
  transform: scale(1.03) translateY(-1px) !important;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.55), 0 8px 24px rgba(27, 109, 251, 0.45) !important;
}

.btn-primary:active {
  transform: scale(0.98) translateY(1px) !important;
}

/* Button Sheen Sweep */
.btn-primary::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%) !important;
  transform: skewX(-25deg) !important;
  pointer-events: none !important;
  transition: none !important;
}

.btn-primary:hover::after {
  left: 220% !important;
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Floating Badges Organic Drift */
.hero-badge-1 {
  animation: badgeOrganicFloat1 7s infinite alternate ease-in-out !important;
}

.hero-badge-2 {
  animation: badgeOrganicFloat2 8.5s infinite alternate ease-in-out !important;
}

@keyframes badgeOrganicFloat1 {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-8px) rotate(-1.2deg); }
}

@keyframes badgeOrganicFloat2 {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(8px) rotate(1.2deg); }
}

.cyan-pulse-dot {
  animation: cyanBreathingPulse 2.8s infinite ease-in-out !important;
}

@keyframes cyanBreathingPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px #00F0FF; }
  50% { transform: scale(1.35); box-shadow: 0 0 16px #00F0FF, 0 0 24px rgba(0, 240, 255, 0.6); }
}

/* --------------------------------------------------------------------------
   2. MARQUEE SCROLLER (EDGE FADE & HOVER)
   -------------------------------------------------------------------------- */
.marquee-section.marquee-light-blue {
  position: relative !important;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.marquee-content-block span {
  transition: color 0.25s ease, text-shadow 0.25s ease;
  cursor: pointer;
}

.marquee-content-block span:hover {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8) !important;
}

/* --------------------------------------------------------------------------
   3. CTA BOTTOM SECTION
   -------------------------------------------------------------------------- */
.cta-section {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 100px 0 !important;
  overflow: hidden !important;
  text-align: center !important;
}

.cta-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 380px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08) 0%, rgba(27, 109, 251, 0.04) 45%, transparent 70%);
  filter: blur(85px);
  pointer-events: none;
  animation: ctaOrbBreathe 14s infinite alternate ease-in-out;
  z-index: 0;
}

@keyframes ctaOrbBreathe {
  0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.65; }
  100% { transform: translate(-48%, -52%) scale(1.1); opacity: 1; }
}

.cta-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.cta-inner {
  position: relative;
  z-index: 2;
}

.cta-title {
  font-size: clamp(2.3rem, 4.2vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 18px !important;
  line-height: 1.2 !important;
}

.cta-subtitle {
  font-size: 1.18rem !important;
  color: #94a3b8 !important;
  max-width: 620px !important;
  margin: 0 auto 36px auto !important;
  line-height: 1.65 !important;
}

/* --------------------------------------------------------------------------
   4. FOOTER & 4 SOCIAL MEDIA BUTTONS
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative !important;
  background: #020408 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 85px 0 35px 0 !important;
  overflow: hidden !important;
}

.footer-ambient-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.04) 0%, rgba(27, 109, 251, 0.02) 50%, transparent 75%);
  filter: blur(95px);
  pointer-events: none;
  z-index: 0;
}

.footer-social {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  position: relative;
  z-index: 2;
}

.footer-social a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease !important;
  will-change: transform;
}

.footer-social a:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: #00F0FF !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.social-icon-svg {
  width: 18px !important;
  height: 18px !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block;
}

.footer-social a:hover .social-icon-svg {
  transform: scale(1.09) !important;
}

/* --------------------------------------------------------------------------
   5. FOOTER LINKS & CONTACT HOVER
   -------------------------------------------------------------------------- */
.footer-links li a {
  position: relative !important;
  display: inline-block !important;
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
  line-height: 2 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important;
}

.footer-links li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1.5px !important;
  background: #00F0FF !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-links li a:hover {
  transform: translateX(4px) !important;
  color: #ffffff !important;
}

.footer-links li a:hover::after {
  width: 100% !important;
}

/* Contact Items */
.footer-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  font-size: 0.95rem !important;
  color: #94a3b8 !important;
}

.footer-contact-item a {
  color: #94a3b8 !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
  display: inline-block;
}

.footer-contact-item a:hover {
  color: #00F0FF !important;
  transform: translateX(3px) !important;
}

/* Footer Bottom Divider Traveling Beam */
.footer-bottom {
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 50px !important;
  padding-top: 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.88rem !important;
  color: #64748b !important;
}

.footer-divider-beam {
  position: absolute;
  top: -1px;
  left: -20%;
  width: 25%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, #00F0FF 50%, transparent 100%);
  animation: footerBeamDrift 9s linear infinite;
  pointer-events: none;
}

@keyframes footerBeamDrift {
  0% { left: -25%; }
  100% { left: 125%; }
}

.footer-bottom-links a {
  color: #64748b !important;
  margin-left: 20px !important;
  transition: color 0.25s ease !important;
}

.footer-bottom-links a:hover {
  color: #00F0FF !important;
}

/* --------------------------------------------------------------------------
   6. WHATSAPP FLOATING BUTTON
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
  z-index: 9999 !important;
  animation: waPulseGlow 3s infinite ease-in-out !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.whatsapp-float:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.65) !important;
}

.whatsapp-float:active {
  transform: scale(0.95) !important;
}

@keyframes waPulseGlow {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 4px 28px rgba(37, 211, 102, 0.7), 0 0 14px rgba(37, 211, 102, 0.5);
  }
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-anim-title,
  .hero-anim-subtitle,
  .hero-anim-cta,
  .hero-badge-1,
  .hero-badge-2,
  .cyan-pulse-dot,
  .cta-ambient-glow,
  .footer-divider-beam,
  .whatsapp-float {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - CTA Section Cinematic Animation & Interaction Upgrade
 * Atmospheric Radial Glow, Shifting Gradient Text, Magnetic Shimmer Button
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT SPACE
   -------------------------------------------------------------------------- */
.cta-section {
  position: relative !important;
  background: #020408 !important;
  padding: 135px 0 115px 0 !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Atmospheric Breathing Glow (Follows Mouse Subtly) */
.cta-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(168, 85, 247, 0.06) 45%, rgba(27, 109, 251, 0.03) 65%, transparent 80%);
  filter: blur(95px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  animation: ctaGlowBreathe 8s infinite alternate ease-in-out;
  z-index: 0;
}

@keyframes ctaGlowBreathe {
  0% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* Floating Light Particles Canvas */
.cta-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.cta-inner {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   2. HEADING & SHIFTING GRADIENT
   -------------------------------------------------------------------------- */
.cta-title {
  font-size: clamp(2.3rem, 4.4vw, 3.3rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
  cursor: default;
}

.cta-gradient-text {
  background: linear-gradient(135deg, #a855f7 0%, #38bdf8 50%, #00F0FF 100%, #a855f7 150%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: ctaGradShift 7s ease-in-out infinite alternate !important;
  transition: filter 0.35s ease;
  display: inline-block;
}

.cta-title:hover .cta-gradient-text {
  filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.55));
}

@keyframes ctaGradShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.cta-subtitle {
  font-size: 1.18rem !important;
  color: #94a3b8 !important;
  max-width: 640px !important;
  margin: 0 auto 38px auto !important;
  line-height: 1.68 !important;
}

/* --------------------------------------------------------------------------
   3. BUTTON ANIMATIONS (BREATHE, SHIMMER, MAGNETIC & PRESS)
   -------------------------------------------------------------------------- */
.cta-magnetic-btn {
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 36px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  will-change: transform;
  animation: ctaBtnBreathe 3.5s infinite ease-in-out !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, filter 0.28s ease !important;
}

@keyframes ctaBtnBreathe {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(0, 240, 255, 0.35), 0 2px 10px rgba(27, 109, 251, 0.25);
  }
  50% {
    box-shadow: 0 6px 28px rgba(0, 240, 255, 0.55), 0 4px 18px rgba(27, 109, 251, 0.45);
  }
}

.cta-magnetic-btn:hover {
  transform: translateY(-2.5px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 0 32px rgba(0, 240, 255, 0.65), 0 8px 24px rgba(27, 109, 251, 0.5) !important;
}

.cta-magnetic-btn:active {
  transform: scale(0.97) translateY(1px) !important;
}

/* Shimmer Sweep on Hover */
.cta-magnetic-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
  transform: skewX(-25deg) !important;
  pointer-events: none !important;
  transition: none !important;
}

.cta-magnetic-btn:hover::after {
  left: 220% !important;
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Click Ripple Feedback */
.cta-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: ctaRippleAnim 0.6s linear;
  pointer-events: none;
}

@keyframes ctaRippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   4. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cta-ambient-glow,
  .cta-gradient-text,
  .cta-magnetic-btn {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - CTA Section Master 3D Depth Environment & Parallax Architecture
 * Multi-Layered Atmosphere, 3D Grid Field, Depth Particles & Cursor Spotlight
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & 3D STAGE
   -------------------------------------------------------------------------- */
.cta-section {
  position: relative !important;
  background: #020408 !important;
  padding: 135px 0 115px 0 !important;
  overflow: hidden !important;
  perspective: 1200px !important;
  text-align: center !important;
}

/* 3D Background Stage (Transformed in 3D without affecting text content) */
.cta-3d-bg-stage {
  position: absolute !important;
  inset: -60px !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  z-index: 0 !important;
  will-change: transform;
}

/* Layer 1 & 5: Subtle 3D Perspective Light Field / Grid */
.cta-3d-grid-plane {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, transparent 68%);
  opacity: 0.65;
  will-change: transform;
  transform-origin: center center;
}

/* Layer 2: Deep Atmospheric Blurred Glow (Moves opposite to cursor) */
.cta-ambient-glow-layer2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 820px;
  height: 460px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.1) 0%, rgba(168, 85, 247, 0.055) 45%, rgba(27, 109, 251, 0.02) 65%, transparent 80%);
  filter: blur(95px);
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: ctaAtmosphereBreathe 9s infinite alternate ease-in-out;
}

@keyframes ctaAtmosphereBreathe {
  0% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

/* Layer 3: Secondary Foreground Glow (Behind Heading & Button) */
.cta-ambient-glow-layer3 {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 540px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.14) 0%, rgba(56, 189, 248, 0.06) 50%, transparent 75%);
  filter: blur(80px);
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Interactive Cursor Follow Spotlight */
.cta-cursor-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, rgba(27, 109, 251, 0.04) 45%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
  z-index: 1;
}

/* Layer 4: 3D Depth Floating Particles Canvas */
.cta-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   2. CONTENT STAYS STABLE, CLEAN & READABLE
   -------------------------------------------------------------------------- */
.cta-inner {
  position: relative !important;
  z-index: 5 !important;
}

.cta-title {
  font-size: clamp(2.3rem, 4.4vw, 3.3rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
  cursor: default;
}

.cta-gradient-text {
  background: linear-gradient(135deg, #a855f7 0%, #38bdf8 50%, #00F0FF 100%, #a855f7 150%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: ctaGradShift 7s ease-in-out infinite alternate !important;
  transition: filter 0.35s ease;
  display: inline-block;
}

.cta-title:hover .cta-gradient-text {
  filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.55));
}

@keyframes ctaGradShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.cta-subtitle {
  font-size: 1.18rem !important;
  color: #94a3b8 !important;
  max-width: 640px !important;
  margin: 0 auto 38px auto !important;
  line-height: 1.68 !important;
}

/* --------------------------------------------------------------------------
   3. BUTTON ANIMATIONS
   -------------------------------------------------------------------------- */
.cta-magnetic-btn {
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 36px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  will-change: transform;
  animation: ctaBtnPulseGlow 3.5s infinite ease-in-out !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, filter 0.28s ease !important;
}

@keyframes ctaBtnPulseGlow {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(0, 240, 255, 0.35), 0 2px 10px rgba(27, 109, 251, 0.25);
  }
  50% {
    box-shadow: 0 6px 28px rgba(0, 240, 255, 0.55), 0 4px 18px rgba(27, 109, 251, 0.45);
  }
}

.cta-magnetic-btn:hover {
  transform: translateY(-2.5px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 0 34px rgba(0, 240, 255, 0.7), 0 8px 24px rgba(27, 109, 251, 0.5) !important;
}

.cta-magnetic-btn:active {
  transform: scale(0.97) translateY(1px) !important;
}

/* Shimmer Sweep on Hover */
.cta-magnetic-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
  transform: skewX(-25deg) !important;
  pointer-events: none !important;
  transition: none !important;
}

.cta-magnetic-btn:hover::after {
  left: 220% !important;
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Click Ripple Feedback */
.cta-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: ctaRippleAnim 0.6s linear;
  pointer-events: none;
}

@keyframes ctaRippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   4. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cta-3d-bg-stage,
  .cta-3d-grid-plane,
  .cta-ambient-glow-layer2,
  .cta-ambient-glow-layer3,
  .cta-cursor-spotlight,
  .cta-gradient-text,
  .cta-magnetic-btn {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - About Page Hero 3D Redesign Styles
 * ============================================================================
 */
.about-hero-section {
  position: relative !important;
  background: #020408 !important;
  min-height: 85vh !important;
  padding: 145px 0 85px 0 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  perspective: 1200px !important;
}

.about-hero-ambient-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 900px !important;
  height: 550px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(168, 85, 247, 0.08) 45%, rgba(27, 109, 251, 0.04) 65%, transparent 80%) !important;
  filter: blur(95px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.about-hero-particles-canvas-wrap {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.7 !important;
}

.about-hero-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

.about-hero-grid {
  display: grid !important;
  grid-template-columns: 1.12fr 0.98fr !important;
  gap: 52px !important;
  align-items: center !important;
  width: 100% !important;
}

.about-hero-content-col {
  text-align: left !important;
}

.about-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  font-size: 0.86rem !important;
  color: #00F0FF !important;
  margin-bottom: 24px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.14) !important;
}

.about-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
}

.about-hero-description {
  font-size: 1.12rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  margin-bottom: 36px !important;
  max-width: 520px !important;
}

.about-hero-cta-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.about-hero-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 36px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  border-radius: 12px !important;
  width: fit-content !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
}

.about-hero-cta-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.55), 0 8px 24px rgba(27, 109, 251, 0.45) !important;
}

.about-hero-social-proof {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.about-hero-avatar-stack {
  display: flex !important;
  align-items: center !important;
}

.about-hero-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid #020408 !important;
  margin-left: -8px !important;
  background-size: cover !important;
  background-position: center !important;
  display: inline-block !important;
}

.about-hero-avatar:first-child {
  margin-left: 0 !important;
}

.about-hero-social-proof-text {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* 3D Visual Frame on Right */
.about-hero-visual-col {
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}

.about-hero-3d-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  transform-style: preserve-3d !important;
  perspective: 1200px !important;
}

.about-hero-stage-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 108% !important;
  height: 108% !important;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.28) 0%, rgba(168, 85, 247, 0.18) 45%, transparent 70%) !important;
  filter: blur(65px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: aboutHeroGlowBreathe 7s infinite alternate ease-in-out !important;
}

@keyframes aboutHeroGlowBreathe {
  0% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.about-hero-glass-frame {
  position: relative !important;
  border-radius: 22px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow: 
    0 34px 80px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(0, 240, 255, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
  animation: aboutHeroFloat 6s ease-in-out infinite alternate !important;
}

@keyframes aboutHeroFloat {
  0% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-8px) rotateX(1.8deg) rotateY(-1.8deg); }
  100% { transform: translateY(5px) rotateX(-1.2deg) rotateY(1.5deg); }
}

.about-hero-artwork-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  transform: translateZ(4px) !important;
}

.about-hero-specular-sheen {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle 380px at var(--about-mouse-x, 50%) var(--about-mouse-y, 50%), rgba(255, 255, 255, 0.22) 0%, rgba(0, 240, 255, 0.08) 40%, transparent 75%) !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
  z-index: 2 !important;
  transform: translateZ(8px) !important;
}

@media (max-width: 991px) {
  .about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 45px !important;
    text-align: center !important;
  }
  .about-hero-content-col {
    text-align: center !important;
  }
  .about-hero-description {
    margin: 0 auto 30px auto !important;
  }
  .about-hero-cta-group {
    align-items: center !important;
  }
  .about-hero-cta-btn {
    margin: 0 auto !important;
  }
  .about-hero-social-proof {
    justify-content: center !important;
  }
  .about-hero-3d-stage {
    margin: 0 auto !important;
  }
}

/**
 * ============================================================================
 * BrandGlows - About Page Hero "3D Orbital Showcase" Engine
 * 3D Orbital Rings System, Asynchronous Floating Chips, Suspended Depth & Light Sweep
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION SPACING & DARK BACKGROUND
   -------------------------------------------------------------------------- */
.about-hero-section {
  position: relative !important;
  background: #020408 !important;
  min-height: auto !important;
  padding: 95px 0 65px 0 !important; /* Fixed top spacing (75-90px below navbar) */
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  perspective: 1200px !important;
}

/* Ambient Deep Lighting */
.about-hero-ambient-glow {
  position: absolute !important;
  top: 50% !important;
  left: 65% !important;
  transform: translate(-50%, -50%) !important;
  width: 750px !important;
  height: 520px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(168, 85, 247, 0.08) 45%, rgba(27, 109, 251, 0.03) 65%, transparent 80%) !important;
  filter: blur(95px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.about-hero-floor-glow {
  position: absolute !important;
  bottom: 0 !important;
  right: 15% !important;
  width: 500px !important;
  height: 120px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08) 0%, transparent 70%) !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.about-hero-particles-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.75 !important;
}

/* --------------------------------------------------------------------------
   2. 2-COLUMN BALANCED HERO GRID
   -------------------------------------------------------------------------- */
.about-hero-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

.about-hero-grid {
  display: grid !important;
  grid-template-columns: 1.08fr 1fr !important;
  gap: 44px !important;
  align-items: center !important;
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   3. LEFT COLUMN: ENTRANCE ANIMATIONS & STABLE TYPOGRAPHY
   -------------------------------------------------------------------------- */
.about-hero-content-col {
  text-align: left !important;
}

.about-anim-badge {
  animation: heroFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.about-anim-title {
  animation: heroFadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.about-anim-desc {
  animation: heroFadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.about-anim-cta {
  animation: heroFadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}

@keyframes heroFadeInUp {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

.about-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  backdrop-filter: blur(12px) !important;
  padding: 7px 16px !important;
  border-radius: 30px !important;
  font-size: 0.84rem !important;
  color: #00F0FF !important;
  margin-bottom: 20px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.12) !important;
}

.cyan-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  background: #00F0FF !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px #00F0FF !important;
  display: inline-block !important;
}

.about-hero-title {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  margin-bottom: 18px !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
}

.about-hero-description {
  font-size: 1.08rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  margin-bottom: 30px !important;
  max-width: 510px !important;
}

.about-hero-cta-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

/* CTA Micro-Interaction */
.about-hero-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 34px !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  border-radius: 12px !important;
  width: fit-content !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  color: #ffffff !important;
  border: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, filter 0.25s ease !important;
}

.about-hero-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.6), 0 8px 24px rgba(27, 109, 251, 0.45) !important;
  filter: brightness(1.06) !important;
}

.about-hero-social-proof {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.about-hero-avatar-stack {
  display: flex !important;
  align-items: center !important;
}

.about-hero-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid #020408 !important;
  margin-left: -8px !important;
  background-size: cover !important;
  background-position: center !important;
  display: inline-block !important;
}

.about-hero-avatar:first-child {
  margin-left: 0 !important;
}

.about-hero-social-proof-text {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   4. RIGHT COLUMN: 3D ORBITAL SHOWCASE SYSTEM
   -------------------------------------------------------------------------- */
.about-hero-visual-col {
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}

.orbital-showcase-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  height: 410px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  perspective: 1200px !important;
}

/* 3D Orbital Rings System */
.orbital-rings-system {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  z-index: 2 !important;
}

.orbital-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  border-radius: 50% !important;
  border: 1.5px solid transparent !important;
  transform-style: preserve-3d !important;
  pointer-events: none !important;
}

/* Ring 1 (Cyan / Diagonal Orbit) */
.ring-1 {
  width: 580px !important;
  height: 580px !important;
  margin-top: -290px !important;
  margin-left: -290px !important;
  border-color: rgba(0, 240, 255, 0.22) !important;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.15), inset 0 0 16px rgba(0, 240, 255, 0.1) !important;
  transform: rotateX(68deg) rotateY(18deg) !important;
  animation: ringOrbit1 24s linear infinite !important;
}

@keyframes ringOrbit1 {
  0% { transform: rotateX(68deg) rotateY(18deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg); }
}

/* Ring 2 (Purple / Orthogonal Counter-Orbit) */
.ring-2 {
  width: 510px !important;
  height: 510px !important;
  margin-top: -255px !important;
  margin-left: -255px !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.12) !important;
  transform: rotateX(32deg) rotateY(68deg) !important;
  animation: ringOrbit2 30s linear infinite reverse !important;
}

@keyframes ringOrbit2 {
  0% { transform: rotateX(32deg) rotateY(68deg) rotateZ(0deg); }
  100% { transform: rotateX(32deg) rotateY(68deg) rotateZ(360deg); }
}

/* Ring 3 (Blue / Outer Halo) */
.ring-3 {
  width: 450px !important;
  height: 450px !important;
  margin-top: -225px !important;
  margin-left: -225px !important;
  border-color: rgba(56, 189, 248, 0.16) !important;
  transform: rotateX(75deg) rotateY(-22deg) !important;
  animation: ringOrbit3 38s linear infinite !important;
}

@keyframes ringOrbit3 {
  0% { transform: rotateX(75deg) rotateY(-22deg) rotateZ(0deg); }
  100% { transform: rotateX(75deg) rotateY(-22deg) rotateZ(360deg); }
}

/* --------------------------------------------------------------------------
   5. ASYNCHRONOUS FLOATING UI CHIPS (ORBITAL DRIFT)
   -------------------------------------------------------------------------- */
.orbital-chip {
  position: absolute !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  backdrop-filter: blur(14px) !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(0, 240, 255, 0.22) !important;
  pointer-events: auto !important;
  will-change: transform;
  transform-style: preserve-3d !important;
}

/* Chip 1: Brand Strategy (Top-Left) */
.chip-strategy {
  top: 10% !important;
  left: -4% !important;
  animation: chipDrift1 7s ease-in-out infinite alternate !important;
}

@keyframes chipDrift1 {
  0% { transform: translate(0, 0) rotate(0deg) translateZ(35px); }
  50% { transform: translate(8px, -10px) rotate(1.5deg) translateZ(42px); }
  100% { transform: translate(-6px, 6px) rotate(-1.5deg) translateZ(32px); }
}

/* Chip 2: Digital Growth (Bottom-Left) */
.chip-growth {
  bottom: 8% !important;
  left: -3% !important;
  animation: chipDrift2 8.5s ease-in-out infinite alternate !important;
}

@keyframes chipDrift2 {
  0% { transform: translate(0, 0) rotate(0deg) translateZ(35px); }
  50% { transform: translate(-8px, 8px) rotate(-1.5deg) translateZ(40px); }
  100% { transform: translate(6px, -8px) rotate(1.2deg) translateZ(32px); }
}

/* Chip 3: Creative Design (Right) */
.chip-design {
  top: 48% !important;
  right: -5% !important;
  animation: chipDrift3 8s ease-in-out infinite alternate !important;
}

@keyframes chipDrift3 {
  0% { transform: translate(0, 0) rotate(0deg) translateZ(35px); }
  50% { transform: translate(6px, 10px) rotate(1.8deg) translateZ(42px); }
  100% { transform: translate(-8px, -6px) rotate(-1.2deg) translateZ(30px); }
}

/* --------------------------------------------------------------------------
   6. MAIN 3D SUSPENDED IMAGE FRAME
   -------------------------------------------------------------------------- */
.orbital-image-frame {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  border-radius: 20px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.42) !important;
  box-shadow: 
    0 32px 75px rgba(0, 0, 0, 0.88),
    0 0 45px rgba(0, 240, 255, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
  animation: imageSuspendedFloat 6.5s ease-in-out infinite alternate !important;
}

@keyframes imageSuspendedFloat {
  0% { transform: translateY(0px) scale(1) translateZ(20px); }
  50% { transform: translateY(-7px) scale(1.008) translateZ(26px); }
  100% { transform: translateY(4px) scale(0.995) translateZ(16px); }
}

.orbital-artwork-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* Glass Specular Sheen */
.orbital-specular-sheen {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle 380px at var(--orbital-mouse-x, 50%) var(--orbital-mouse-y, 50%), rgba(255, 255, 255, 0.2) 0%, rgba(0, 240, 255, 0.08) 40%, transparent 75%) !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
  z-index: 2 !important;
}

/* Periodic Diagonal Light Sweep (Every 9-11 seconds) */
.orbital-light-sweep {
  position: absolute !important;
  top: 0 !important;
  left: -150% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%) !important;
  transform: skewX(-30deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  animation: glassLightSweep 10s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

@keyframes glassLightSweep {
  0%, 75% { left: -150%; }
  100% { left: 250%; }
}

/* Grounding Floor Shadow */
.orbital-depth-shadow {
  position: absolute !important;
  bottom: -22px !important;
  width: 80% !important;
  height: 30px !important;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, transparent 70%) !important;
  filter: blur(14px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .about-hero-section {
    padding: 85px 0 50px 0 !important;
  }
  .about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }
  .about-hero-content-col {
    text-align: center !important;
  }
  .about-hero-description {
    margin: 0 auto 26px auto !important;
  }
  .about-hero-cta-group {
    align-items: center !important;
  }
  .about-hero-cta-btn {
    margin: 0 auto !important;
  }
  .about-hero-social-proof {
    justify-content: center !important;
  }
  .orbital-showcase-stage {
    margin: 0 auto !important;
    max-width: 480px !important;
    height: 350px !important;
  }
  .ring-1 { width: 460px !important; height: 460px !important; margin-top: -230px !important; margin-left: -230px !important; }
  .ring-2 { width: 400px !important; height: 400px !important; margin-top: -200px !important; margin-left: -200px !important; }
  .ring-3 { width: 350px !important; height: 350px !important; margin-top: -175px !important; margin-left: -175px !important; }
}

@media (max-width: 576px) {
  .orbital-chip {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
  }
  .chip-strategy { top: 5% !important; left: -2% !important; }
  .chip-growth { bottom: 4% !important; left: -2% !important; }
  .chip-design { top: 48% !important; right: -2% !important; }
}

/* --------------------------------------------------------------------------
   8. REDUCED MOTION SAFEGUARDS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ring-1, .ring-2, .ring-3,
  .chip-strategy, .chip-growth, .chip-design,
  .orbital-image-frame,
  .orbital-light-sweep {
    animation: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - About Page "Our Story" & "The Journey" 3D Interactive Storytelling
 * Floating 3D Glass Panel, Dimensional 3D Timeline Nodes, Tube Lighting & Scroll Progress
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT SPACE
   -------------------------------------------------------------------------- */
.our-story-section {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 !important;
  overflow: hidden !important;
  perspective: 1200px !important;
}

.story-ambient-glow {
  position: absolute !important;
  top: 40% !important;
  left: 70% !important;
  transform: translate(-50%, -50%) !important;
  width: 750px !important;
  height: 500px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.1) 0%, rgba(168, 85, 247, 0.06) 45%, transparent 75%) !important;
  filter: blur(95px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.story-particles-wrap {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.7 !important;
}

.story-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

.story-2col-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 65px !important;
  align-items: center !important;
}

/* --------------------------------------------------------------------------
   2. LEFT SIDE: OUR STORY TEXT (MICRO-PARALLAX)
   -------------------------------------------------------------------------- */
.story-content-col {
  text-align: left !important;
  will-change: transform;
}

.story-tag-badge {
  display: inline-block !important;
  padding: 6px 16px !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  color: #00F0FF !important;
  border-radius: 20px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.1) !important;
}

.story-main-heading {
  font-size: clamp(2.2rem, 3.6vw, 3.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 24px !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
}

.story-paragraph {
  color: #94a3b8 !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
  font-size: 1.08rem !important;
}

/* --------------------------------------------------------------------------
   3. RIGHT SIDE: 3D FLOATING JOURNEY GLASS PANEL
   -------------------------------------------------------------------------- */
.story-journey-col {
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
}

.journey-3d-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;
  transform-style: preserve-3d !important;
  perspective: 1200px !important;
}

.journey-ambient-backlight {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 105% !important;
  height: 105% !important;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.2) 0%, rgba(168, 85, 247, 0.12) 50%, transparent 75%) !important;
  filter: blur(60px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: journeyBacklightBreathe 8s infinite alternate ease-in-out !important;
}

@keyframes journeyBacklightBreathe {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* 3D Glass Panel */
.journey-glass-panel {
  position: relative !important;
  z-index: 2 !important;
  padding: 44px 40px !important;
  border-radius: 24px !important;
  background: rgba(10, 16, 32, 0.75) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 
    0 30px 70px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(0, 240, 255, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.journey-card-title {
  color: #00F0FF !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  margin-bottom: 34px !important;
  letter-spacing: -0.3px !important;
  transform: translateZ(16px) !important;
}

.journey-specular-sheen {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle 350px at var(--journey-mouse-x, 50%) var(--journey-mouse-y, 50%), rgba(255, 255, 255, 0.18) 0%, transparent 70%) !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}

/* --------------------------------------------------------------------------
   4. 3D TIMELINE & GLOWING NODES
   -------------------------------------------------------------------------- */
.journey-timeline-3d {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  transform-style: preserve-3d !important;
}

/* 3D Glowing Vertical Line / Tube */
.timeline-tube-base {
  position: absolute !important;
  left: 20px !important;
  top: 15px !important;
  bottom: 20px !important;
  width: 3px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  z-index: 1 !important;
}

.timeline-tube-fill {
  position: absolute !important;
  left: 20px !important;
  top: 15px !important;
  width: 3px !important;
  height: 20%;
  background: linear-gradient(to bottom, #00F0FF, #1B6DFB, #a855f7) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 12px #00F0FF, 0 0 20px rgba(0, 240, 255, 0.5) !important;
  z-index: 2 !important;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stage Node Row */
.journey-stage-node {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  position: relative !important;
  z-index: 3 !important;
  cursor: pointer !important;
  transform-style: preserve-3d !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

/* Spherical 3D Node Core */
.node-sphere-core {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transform-style: preserve-3d !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

.node-icon {
  width: 18px !important;
  height: 18px !important;
  color: #94a3b8 !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.node-pulse-ring {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 1.5px solid transparent !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
}

/* Label Wrap */
.node-label-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  transform: translateZ(8px) !important;
  transition: transform 0.3s ease !important;
}

.node-stage-name {
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  transition: color 0.3s ease !important;
}

.node-stage-desc {
  font-size: 0.82rem !important;
  color: #64748b !important;
  transition: color 0.3s ease !important;
}

/* --------------------------------------------------------------------------
   5. ACTIVE & HOVER NODE STATES (ELEVATION +25px Z-DEPTH)
   -------------------------------------------------------------------------- */
.journey-stage-node.active,
.journey-stage-node:hover {
  transform: translateZ(24px) !important;
}

.journey-stage-node.active .node-sphere-core,
.journey-stage-node:hover .node-sphere-core {
  background: linear-gradient(135deg, #1B6DFB, #00F0FF) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.7), 0 0 35px rgba(27, 109, 251, 0.5) !important;
  transform: scale(1.12) translateZ(10px) !important;
}

.journey-stage-node.active .node-icon,
.journey-stage-node:hover .node-icon {
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.journey-stage-node.active .node-pulse-ring,
.journey-stage-node:hover .node-pulse-ring {
  border-color: rgba(0, 240, 255, 0.5) !important;
  animation: nodeRingSpin 4s linear infinite !important;
}

@keyframes nodeRingSpin {
  0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
  50% { transform: rotate(180deg) scale(1.15); opacity: 0.4; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
}

.journey-stage-node.active .node-stage-name,
.journey-stage-node:hover .node-stage-name {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
}

.journey-stage-node.active .node-stage-desc,
.journey-stage-node:hover .node-stage-desc {
  color: #00F0FF !important;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .story-2col-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    text-align: center !important;
  }
  .story-content-col {
    text-align: center !important;
  }
  .story-journey-col {
    margin: 0 auto !important;
  }
  .journey-stage-node {
    text-align: left !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - About Page "Mission x Vision: Two Living Worlds"
 * High-End 3D Holographic Stage, Dimensional Crystals, Neural Core, Abstract Globe & Depth Field
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION WRAPPER & AMBIENT SPACE
   -------------------------------------------------------------------------- */
.mission-vision-section {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 100px 0 !important;
  overflow: hidden !important;
  perspective: 1600px !important;
}

/* Atmospheric Ambient Backlights */
.mv-ambient-glow-mission {
  position: absolute !important;
  top: 45% !important;
  left: 22% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 480px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(27, 109, 251, 0.06) 50%, transparent 75%) !important;
  filter: blur(85px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.mv-ambient-glow-vision {
  position: absolute !important;
  top: 45% !important;
  right: 22% !important;
  transform: translate(50%, -50%) !important;
  width: 600px !important;
  height: 480px !important;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.12) 0%, rgba(0, 240, 255, 0.05) 50%, transparent 75%) !important;
  filter: blur(85px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Header Section */
.mv-header-wrap {
  text-align: center !important;
  margin-bottom: 56px !important;
  position: relative !important;
  z-index: 2 !important;
}

.mv-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  color: #00F0FF !important;
  border-radius: 30px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.14) !important;
}

.mv-main-heading {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.mv-heading-gradient-mission {
  color: #ffffff !important;
}

.mv-heading-gradient-vision {
  background: linear-gradient(135deg, #00F0FF 0%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* --------------------------------------------------------------------------
   2. 2-COLUMN GRID & QUANTUM BRIDGE
   -------------------------------------------------------------------------- */
.mv-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

.mv-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: stretch !important;
  position: relative !important;
}

/* Central Quantum Connection Bridge */
.mv-quantum-bridge {
  position: absolute !important;
  top: 30% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.4) 0%, rgba(168, 85, 247, 0.6) 50%, rgba(0, 240, 255, 0.4) 100%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.mv-quantum-orb {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #00F0FF !important;
  box-shadow: 0 0 14px #00F0FF, 0 0 24px rgba(168, 85, 247, 0.8) !important;
  animation: quantumOrbPulse 3s infinite ease-in-out alternate !important;
}

@keyframes quantumOrbPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); box-shadow: 0 0 10px #00F0FF; }
  100% { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 20px #00F0FF, 0 0 30px #a855f7; }
}

.mv-quantum-particle-beam {
  position: absolute !important;
  top: -3px !important;
  left: -20px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px #00F0FF !important;
  animation: quantumBeamTravel 5s infinite cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes quantumBeamTravel {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  50% { left: 100%; opacity: 1; }
  60% { opacity: 0; }
  100% { left: 0%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   3. LIVING WORLD CARD BASE (STABLE CONTAINER)
   -------------------------------------------------------------------------- */
.mv-world-card {
  position: relative !important;
  border-radius: 28px !important;
  background: rgba(7, 12, 22, 0.82) !important;
  backdrop-filter: blur(22px) !important;
  padding: 34px 34px 38px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  perspective: 1600px !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Mission Card Borders & Shadows */
.card-mission {
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(0, 240, 255, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
}

.card-mission:hover {
  border-color: rgba(0, 240, 255, 0.65) !important;
  box-shadow: 
    0 35px 90px rgba(0, 0, 0, 0.95),
    0 0 65px rgba(0, 240, 255, 0.3),
    inset 0 1px 3px rgba(255, 255, 255, 0.4) !important;
}

/* Vision Card Borders & Shadows */
.card-vision {
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(168, 85, 247, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
}

.card-vision:hover {
  border-color: rgba(168, 85, 247, 0.65) !important;
  box-shadow: 
    0 35px 90px rgba(0, 0, 0, 0.95),
    0 0 65px rgba(168, 85, 247, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.4) !important;
}

/* Card Hover Floating Badge */
.mv-world-hover-tag {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  opacity: 0.65 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  transform: translateZ(20px) !important;
}

.card-mission .mv-world-hover-tag {
  background: rgba(0, 240, 255, 0.1) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
}

.card-vision .mv-world-hover-tag {
  background: rgba(168, 85, 247, 0.1) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.mv-world-card:hover .mv-world-hover-tag {
  opacity: 1 !important;
  transform: translateZ(30px) !important;
}

/* Diagonal Specular Sheen (7-10s Infinite Sweep) */
.mv-card-specular-sweep {
  position: absolute !important;
  top: 0 !important;
  left: -160% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%) !important;
  transform: skewX(-30deg) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  border-radius: inherit !important;
  animation: mvLightSweep 8.5s infinite cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes mvLightSweep {
  0%, 75% { left: -160%; }
  100% { left: 260%; }
}

/* --------------------------------------------------------------------------
   4. 3D HOLOGRAPHIC STAGE (MISSION & VISION)
   -------------------------------------------------------------------------- */
.mv-stage-wrap {
  position: relative !important;
  width: 100% !important;
  height: 290px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 1400px !important;
  transform-style: preserve-3d !important;
  margin-bottom: 24px !important;
}

/* Mission Pedestal Portal */
.mv-portal-pedestal {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) rotateX(72deg) translateZ(10px) !important;
  width: 210px !important;
  height: 210px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow: 
    0 0 25px rgba(0, 240, 255, 0.5),
    inset 0 0 20px rgba(0, 240, 255, 0.35) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.mv-portal-pedestal::after {
  content: '' !important;
  position: absolute !important;
  inset: 18px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(0, 240, 255, 0.6) !important;
  animation: pedestalSpin 16s linear infinite !important;
}

.pedestal-vision {
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 
    0 0 25px rgba(168, 85, 247, 0.5),
    inset 0 0 20px rgba(168, 85, 247, 0.35) !important;
}

.pedestal-vision::after {
  border-color: rgba(168, 85, 247, 0.6) !important;
  animation: pedestalSpin 18s linear infinite reverse !important;
}

@keyframes pedestalSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3D Main Object Container (Moves with Depth Field) */
.mv-3d-object-core {
  position: relative !important;
  width: 170px !important;
  height: 170px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  z-index: 3 !important;
  animation: coreBreathing 6s ease-in-out infinite alternate !important;
}

@keyframes coreBreathing {
  0% { transform: translateY(0) scale(1) translateZ(120px); }
  100% { transform: translateY(-7px) scale(1.025) translateZ(135px); }
}

/* 3D Asymmetrical Orbital Rings */
.mv-orbit-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1.5px solid transparent !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
}

/* Mission Orbital Rings */
.ring-mission-1 {
  width: 250px !important;
  height: 250px !important;
  border-color: rgba(0, 240, 255, 0.38) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3) !important;
  transform: rotateX(68deg) rotateY(15deg) translateZ(100px) !important;
  animation: ringOrbitM1 20s linear infinite !important;
}

.ring-mission-2 {
  width: 210px !important;
  height: 210px !important;
  border-color: rgba(27, 109, 251, 0.35) !important;
  box-shadow: 0 0 14px rgba(27, 109, 251, 0.25) !important;
  transform: rotateX(35deg) rotateY(70deg) translateZ(90px) !important;
  animation: ringOrbitM2 24s linear infinite reverse !important;
}

@keyframes ringOrbitM1 {
  0% { transform: rotateX(68deg) rotateY(15deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(15deg) rotateZ(360deg); }
}

@keyframes ringOrbitM2 {
  0% { transform: rotateX(35deg) rotateY(70deg) rotateZ(0deg); }
  100% { transform: rotateX(35deg) rotateY(70deg) rotateZ(360deg); }
}

/* Vision Orbital Rings */
.ring-vision-1 {
  width: 250px !important;
  height: 250px !important;
  border-color: rgba(168, 85, 247, 0.38) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3) !important;
  transform: rotateX(65deg) rotateY(-20deg) translateZ(100px) !important;
  animation: ringOrbitV1 22s linear infinite !important;
}

.ring-vision-2 {
  width: 215px !important;
  height: 215px !important;
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25) !important;
  transform: rotateX(40deg) rotateY(65deg) translateZ(90px) !important;
  animation: ringOrbitV2 26s linear infinite reverse !important;
}

@keyframes ringOrbitV1 {
  0% { transform: rotateX(65deg) rotateY(-20deg) rotateZ(0deg); }
  100% { transform: rotateX(65deg) rotateY(-20deg) rotateZ(360deg); }
}

@keyframes ringOrbitV2 {
  0% { transform: rotateX(40deg) rotateY(65deg) rotateZ(0deg); }
  100% { transform: rotateX(40deg) rotateY(65deg) rotateZ(360deg); }
}

/* Floating 3D Crystal Shards / Polyhedrons */
.mv-shard {
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35) !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

.shard-m1 { top: 18% !important; left: 8% !important; transform: rotate(45deg) translateZ(150px) !important; animation: shardDrift1 6s infinite alternate ease-in-out !important; }
.shard-m2 { bottom: 22% !important; right: 10% !important; transform: rotate(25deg) translateZ(140px) !important; animation: shardDrift2 7s infinite alternate ease-in-out !important; }

.shard-v1 { top: 18% !important; right: 8% !important; border-color: rgba(168, 85, 247, 0.45) !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.35) !important; transform: rotate(-35deg) translateZ(150px) !important; animation: shardDrift1 6.5s infinite alternate ease-in-out !important; }
.shard-v2 { bottom: 22% !important; left: 10% !important; border-color: rgba(168, 85, 247, 0.45) !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.35) !important; transform: rotate(55deg) translateZ(140px) !important; animation: shardDrift2 7.5s infinite alternate ease-in-out !important; }

@keyframes shardDrift1 {
  0% { transform: translateY(0px) rotate(45deg) translateZ(150px); }
  100% { transform: translateY(-8px) rotate(58deg) translateZ(165px); }
}

@keyframes shardDrift2 {
  0% { transform: translateY(0px) rotate(25deg) translateZ(140px); }
  100% { transform: translateY(6px) rotate(12deg) translateZ(155px); }
}

/* Floating Micro UI Badges */
.mv-micro-badge {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  padding: 6px 12px !important;
  border-radius: 14px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 240, 255, 0.2) !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  z-index: 4 !important;
}

.badge-mission-left { top: 12% !important; left: -2% !important; transform: translateZ(160px) !important; }
.badge-mission-right { bottom: 18% !important; right: -2% !important; transform: translateZ(160px) !important; }

.badge-vision-right { top: 30% !important; right: 8% !important; border-color: rgba(168, 85, 247, 0.3) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 0 14px rgba(168, 85, 247, 0.2) !important; transform: translateZ(160px) !important; }

/* --------------------------------------------------------------------------
   5. REAL HTML CONTENT & BOTTOM PILLS
   -------------------------------------------------------------------------- */
.mv-content-wrap {
  text-align: center !important;
  position: relative !important;
  z-index: 3 !important;
}

.mv-card-heading {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.3px !important;
}

.mission-cyan-text {
  color: #00F0FF !important;
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.4) !important;
}

.vision-purple-text {
  color: #c084fc !important;
  text-shadow: 0 0 18px rgba(168, 85, 247, 0.4) !important;
}

.mv-card-desc {
  font-size: 1.04rem !important;
  color: #94a3b8 !important;
  line-height: 1.7 !important;
  margin-bottom: 26px !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bottom Mini-Pills Stack */
.mv-pills-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.mv-mini-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  transition: all 0.28s ease !important;
}

.card-mission .mv-mini-pill:hover {
  background: rgba(0, 240, 255, 0.08) !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
  transform: translateY(-2px) !important;
}

.card-vision .mv-mini-pill:hover {
  background: rgba(168, 85, 247, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
  transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .mv-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .mv-quantum-bridge {
    display: none !important;
  }
  .mv-stage-wrap {
    height: 260px !important;
  }
}

@media (max-width: 576px) {
  .mv-world-card {
    padding: 26px 20px 30px 20px !important;
  }
  .mv-stage-wrap {
    height: 240px !important;
  }
  .mv-3d-object-core {
    width: 140px !important;
    height: 140px !important;
  }
  .mv-micro-badge {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
  }
  .mv-mini-pill {
    padding: 5px 10px !important;
    font-size: 0.74rem !important;
  }
}

/* --------------------------------------------------------------------------
   7. ACCESSIBILITY / PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mv-3d-object-core,
  .mv-orbit-ring,
  .mv-shard,
  .mv-card-specular-sweep,
  .mv-portal-pedestal::after,
  .mv-quantum-particle-beam {
    animation: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - About Page "Our Creative Process / How We Work" 3D Journey Engine
 * Glowing 3D Energy Rail, Traveling Energy Pulse, 5 Futuristic 3D Nodes & Mouse Micro-Physics
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT SPACE
   -------------------------------------------------------------------------- */
.creative-process-section {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 110px 0 !important;
  overflow: hidden !important;
  perspective: 1400px !important;
}

/* Atmospheric Ambient Lighting */
.process-ambient-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 900px !important;
  height: 450px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.09) 0%, rgba(27, 109, 251, 0.05) 50%, rgba(168, 85, 247, 0.03) 70%, transparent 80%) !important;
  filter: blur(95px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.process-particles-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.65 !important;
}

.process-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Header Section */
.process-header-wrap {
  margin-bottom: 75px !important;
}

.process-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  color: #00F0FF !important;
  border-radius: 30px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.12) !important;
}

.process-main-heading {
  font-size: clamp(2.3rem, 3.8vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   2. 3D JOURNEY TRACK & 5 PROCESS STATIONS
   -------------------------------------------------------------------------- */
.process-journey-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
  perspective: 1400px !important;
  transform-style: preserve-3d !important;
}

/* 3D Illuminated Energy Rail / Tube */
.process-energy-rail {
  position: absolute !important;
  top: 55px !important;
  left: 8% !important;
  right: 8% !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  z-index: 1 !important;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8) !important;
}

/* Active Glowing Fill Rail */
.process-energy-fill {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, #1B6DFB 0%, #00F0FF 50%, #a855f7 100%) !important;
  border-radius: inherit !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6), 0 0 24px rgba(27, 109, 251, 0.4) !important;
  opacity: 0.85 !important;
}

/* Traveling Energy Pulse Packet */
.process-energy-pulse {
  position: absolute !important;
  top: -6px !important;
  left: 0% !important;
  width: 24px !important;
  height: 16px !important;
  border-radius: 10px !important;
  background: radial-gradient(circle, #ffffff 30%, #00F0FF 70%, transparent 100%) !important;
  box-shadow: 0 0 18px #00F0FF, 0 0 30px #ffffff, 0 0 40px rgba(0, 240, 255, 0.8) !important;
  z-index: 3 !important;
  animation: energyPulseTravel 9s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes energyPulseTravel {
  0% { left: 0%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   3. PROCESS STATION ITEMS (3D NODE + NUMBER + TITLE + DESC)
   -------------------------------------------------------------------------- */
.process-station-item {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transform-style: preserve-3d !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3D Glass Node Housing */
.process-node-stage {
  position: relative !important;
  width: 106px !important;
  height: 106px !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  backdrop-filter: blur(14px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(0, 240, 255, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  margin-bottom: 22px !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Concentric Ambient Node Halo */
.process-node-halo {
  position: absolute !important;
  inset: -8px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(0, 240, 255, 0.4) !important;
  pointer-events: none !important;
  animation: nodeHaloSpin 18s linear infinite !important;
}

@keyframes nodeHaloSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3D Vector Icon Artwork */
.process-3d-artwork {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateZ(20px) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.process-3d-artwork svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Step Number Pill */
.process-step-pill {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1B6DFB, #00F0FF) !important;
  color: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 240, 255, 0.4) !important;
  border: 2px solid #020408 !important;
  transform: translateZ(30px) !important;
}

/* Text Meta (Station Title & Description) */
.process-station-title {
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.3px !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

.process-station-desc {
  font-size: 0.86rem !important;
  color: #94a3b8 !important;
  line-height: 1.55 !important;
  max-width: 200px !important;
  margin: 0 auto !important;
  transition: color 0.3s ease !important;
}

/* --------------------------------------------------------------------------
   4. HOVER & ACTIVE PULSE INTERACTIONS (+30px Z-DEPTH)
   -------------------------------------------------------------------------- */
.process-station-item:hover .process-node-stage,
.process-station-item.active-pulse .process-node-stage {
  transform: scale(1.1) translateZ(30px) !important;
  border-color: #00F0FF !important;
  box-shadow: 
    0 24px 50px rgba(0, 0, 0, 0.95),
    0 0 40px rgba(0, 240, 255, 0.65),
    inset 0 1px 3px rgba(255, 255, 255, 0.45) !important;
}

.process-station-item:hover .process-3d-artwork,
.process-station-item.active-pulse .process-3d-artwork {
  transform: scale(1.12) translateZ(35px) !important;
}

.process-station-item:hover .process-station-title,
.process-station-item.active-pulse .process-station-title {
  color: #00F0FF !important;
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.5) !important;
}

.process-station-item:hover .process-station-desc,
.process-station-item.active-pulse .process-station-desc {
  color: #e2e8f0 !important;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .process-journey-track {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 35px 20px !important;
  }
  .process-energy-rail {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .process-journey-track {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .process-station-item {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 20px !important;
    background: rgba(11, 18, 35, 0.6) !important;
    padding: 16px 20px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
  }
  .process-node-stage {
    margin-bottom: 0 !important;
    width: 76px !important;
    height: 76px !important;
    flex-shrink: 0 !important;
  }
  .process-3d-artwork {
    width: 38px !important;
    height: 38px !important;
  }
  .process-station-desc {
    max-width: none !important;
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .process-energy-pulse,
  .process-node-halo {
    animation: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - About Page "Our Core Values" / "What We Believe" 3D Engine
 * 4 Unique 3D Glass Environments, Holographic Pedestals, Constellation Rail & 3D Tilt Physics
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT ATMOSPHERE
   -------------------------------------------------------------------------- */
.core-values-section {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 110px 0 !important;
  overflow: hidden !important;
  perspective: 1600px !important;
}

.values-ambient-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 950px !important;
  height: 480px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08) 0%, rgba(168, 85, 247, 0.05) 50%, rgba(27, 109, 251, 0.03) 70%, transparent 80%) !important;
  filter: blur(95px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.values-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Header */
.values-header-wrap {
  margin-bottom: 70px !important;
}

.values-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  color: #00F0FF !important;
  border-radius: 30px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.12) !important;
}

.values-main-heading {
  font-size: clamp(2.3rem, 3.8vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   2. 4-COLUMN 3D CARD GRID & CONSTELLATION RAIL
   -------------------------------------------------------------------------- */
.values-grid-wrap {
  position: relative !important;
  width: 100% !important;
}

/* Background Constellation Connection Line */
.values-constellation-rail {
  position: absolute !important;
  top: 100px !important;
  left: 5% !important;
  right: 5% !important;
  width: 90% !important;
  height: 60px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.45 !important;
  transition: opacity 0.4s ease !important;
}

.values-grid-wrap:hover .values-constellation-rail {
  opacity: 0.8 !important;
}

.values-4col-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 26px !important;
  align-items: stretch !important;
  position: relative !important;
  z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   3. 3D GLASS ENVIRONMENT CARD
   -------------------------------------------------------------------------- */
.values-3d-card {
  position: relative !important;
  border-radius: 22px !important;
  background: rgba(9, 15, 28, 0.78) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(18px) !important;
  padding: 32px 24px 34px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.8),
    inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  transform-style: preserve-3d !important;
  perspective: 1200px !important;
  will-change: transform !important;
  cursor: pointer !important;
  transition: 
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* Individual Subtle Accent Lighting */
.card-strategy { border-color: rgba(27, 109, 251, 0.3) !important; }
.card-creativity { border-color: rgba(168, 85, 247, 0.3) !important; }
.card-collaboration { border-color: rgba(0, 240, 255, 0.3) !important; }
.card-excellence { border-color: rgba(56, 189, 248, 0.3) !important; }

/* 3D Visual Housing */
.values-visual-stage {
  position: relative !important;
  width: 120px !important;
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  margin-bottom: 26px !important;
}

/* Holographic Disk Pedestal */
.values-pedestal-disk {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) rotateX(74deg) translateZ(5px) !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35), inset 0 0 12px rgba(0, 240, 255, 0.2) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.values-pedestal-disk::after {
  content: '' !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(255, 255, 255, 0.4) !important;
  animation: pedestalDiskSpin 16s linear infinite !important;
}

@keyframes pedestalDiskSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3D Floating Object Centerpiece */
.values-3d-object {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transform: translateZ(25px) !important;
  z-index: 2 !important;
  animation: valueObjectFloat 6s ease-in-out infinite alternate !important;
}

@keyframes valueObjectFloat {
  0% { transform: translateY(0px) rotateY(0deg) translateZ(25px); }
  50% { transform: translateY(-6px) rotateY(4deg) translateZ(30px); }
  100% { transform: translateY(3px) rotateY(-4deg) translateZ(22px); }
}

.values-3d-object svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Card Typography */
.values-card-title {
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.3px !important;
  transform: translateZ(12px) !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

.values-card-desc {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  transform: translateZ(6px) !important;
}

/* --------------------------------------------------------------------------
   4. HOVER INTERACTION (+10px LIFT & 3D PARALLAX TILT)
   -------------------------------------------------------------------------- */
.values-3d-card:hover {
  transform: translateY(-8px) translateZ(20px) !important;
  box-shadow: 
    0 30px 70px rgba(0, 0, 0, 0.95),
    0 0 45px rgba(0, 240, 255, 0.3),
    inset 0 1px 3px rgba(255, 255, 255, 0.35) !important;
}

.card-strategy:hover { border-color: rgba(27, 109, 251, 0.7) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.95), 0 0 45px rgba(27,109,251,0.4) !important; }
.card-creativity:hover { border-color: rgba(168, 85, 247, 0.7) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.95), 0 0 45px rgba(168,85,247,0.4) !important; }
.card-collaboration:hover { border-color: rgba(0, 240, 255, 0.7) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.95), 0 0 45px rgba(0,240,255,0.45) !important; }
.card-excellence:hover { border-color: rgba(56, 189, 248, 0.7) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.95), 0 0 45px rgba(56,189,248,0.4) !important; }

.values-3d-card:hover .values-3d-object {
  transform: scale(1.14) translateY(-8px) translateZ(45px) !important;
}

.values-3d-card:hover .values-card-title {
  color: #00F0FF !important;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.4) !important;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .values-4col-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
  .values-constellation-rail {
    display: none !important;
  }
}

@media (max-width: 580px) {
  .values-4col-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .values-3d-card {
    padding: 28px 20px !important;
  }
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION SAFEGUARDS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .values-3d-object,
  .values-pedestal-disk::after {
    animation: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - About Page "Client Constellation / Trusted By" 3D Engine
 * Central Glass Orb, 6 Orbiting Client Nodes, Infinite Logo Wall, 3 Trust Pillars & Testimonial
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT SPACE
   -------------------------------------------------------------------------- */
.client-constellation-section {
  position: relative !important;
  background: #020408 !important;
  padding: 125px 0 110px 0 !important;
  overflow: hidden !important;
  perspective: 1400px !important;
}

.constellation-ambient-glow {
  position: absolute !important;
  top: 45% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 900px !important;
  height: 520px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.1) 0%, rgba(27, 109, 251, 0.05) 50%, rgba(168, 85, 247, 0.03) 70%, transparent 80%) !important;
  filter: blur(95px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.constellation-particles-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.65 !important;
}

.constellation-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Header */
.constellation-header-wrap {
  margin-bottom: 50px !important;
}

.constellation-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  color: #00F0FF !important;
  border-radius: 30px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.12) !important;
}

.constellation-main-heading {
  font-size: clamp(2.3rem, 3.8vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
}

.constellation-subtitle {
  font-size: 1.08rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   2. 3D CLIENT CONSTELLATION STAGE
   -------------------------------------------------------------------------- */
.constellation-3d-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 650px !important;
  height: 380px !important;
  margin: 0 auto 50px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  perspective: 1400px !important;
}

.constellation-stage-halo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.18) 0%, rgba(27, 109, 251, 0.08) 50%, transparent 75%) !important;
  filter: blur(40px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Orbital Rings */
.constellation-orbit-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(0, 240, 255, 0.25) !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
}

.orbit-ring-inner {
  width: 380px !important;
  height: 380px !important;
  margin-top: -190px !important;
  margin-left: -190px !important;
  transform: rotateX(68deg) rotateY(15deg) !important;
  animation: orbitInnerSpin 32s linear infinite !important;
}

.orbit-ring-outer {
  width: 520px !important;
  height: 520px !important;
  margin-top: -260px !important;
  margin-left: -260px !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  transform: rotateX(40deg) rotateY(65deg) !important;
  animation: orbitOuterSpin 40s linear infinite reverse !important;
}

@keyframes orbitInnerSpin {
  0% { transform: rotateX(68deg) rotateY(15deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(15deg) rotateZ(360deg); }
}

@keyframes orbitOuterSpin {
  0% { transform: rotateX(40deg) rotateY(65deg) rotateZ(0deg); }
  100% { transform: rotateX(40deg) rotateY(65deg) rotateZ(360deg); }
}

/* Central BrandGlows Core Glass Orb */
.constellation-central-orb {
  position: relative !important;
  z-index: 5 !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, rgba(0, 240, 255, 0.4) 0%, rgba(15, 23, 42, 0.85) 60%, #020408 100%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.5) !important;
  box-shadow: 
    0 24px 50px rgba(0, 0, 0, 0.9),
    0 0 35px rgba(0, 240, 255, 0.45),
    inset 0 1px 4px rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
  animation: centralOrbFloat 6s ease-in-out infinite alternate !important;
}

@keyframes centralOrbFloat {
  0% { transform: translateY(0px) scale(1) translateZ(30px); }
  50% { transform: translateY(-7px) scale(1.02) translateZ(36px); }
  100% { transform: translateY(4px) scale(0.99) translateZ(26px); }
}

.constellation-central-orb:hover {
  transform: translateY(-8px) scale(1.08) translateZ(50px) !important;
  box-shadow: 
    0 30px 65px rgba(0, 0, 0, 0.95),
    0 0 55px rgba(0, 240, 255, 0.7),
    inset 0 1px 6px rgba(255, 255, 255, 0.65) !important;
}

.central-orb-core {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transform: translateZ(15px) !important;
}

.central-orb-logo-text {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
}

.central-orb-sub {
  font-size: 0.65rem !important;
  color: #00F0FF !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Orbiting Client Nodes */
.client-orbit-node {
  position: absolute !important;
  z-index: 6 !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  cursor: pointer !important;
}

.client-node-sphere {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
.client-node-capsule {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(11, 18, 35, 0.88) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
  backdrop-filter: blur(14px) !important;
  padding: 8px 16px !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.25) !important;
  transform-style: preserve-3d !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Light sweep sheen */
.client-node-capsule::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%) !important;
  transition: left 0.55s ease !important;
  pointer-events: none !important;
  border-radius: 24px !important;
}

.client-orbit-node:hover .client-node-capsule::after {
  left: 160% !important;
}

.client-orbit-node:hover .client-node-capsule {
  transform: scale(1.05) translateY(-4px) translateZ(35px) !important;
  border-color: rgba(0, 240, 255, 0.85) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 36px rgba(0, 240, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  background: rgba(11, 18, 42, 0.95) !important;
}

/* Icon glow */
.client-node-capsule:hover .client-mini-badge {
  background: rgba(0, 240, 255, 0.22) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6), 0 0 4px rgba(255,255,255,0.3) !important;
  transform: scale(1.08) !important;
}

/* Name & status brightening */
.client-node-capsule:hover .client-capsule-name,
.client-node-capsule:hover .client-capsule-status {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0,240,255,0.7) !important;
}

/* Hide extra tooltip for Client 05 */
.node-5 .client-hover-tooltip {
  display: none !important;
}

/* Orbit ring slow rotation */
.orbit-ring-inner {
  animation: orbitSpin 30s linear infinite !important;
}
.orbit-ring-outer {
  animation: orbitSpin 45s linear infinite !important;
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 240, 255, 0.2) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.client-orbit-node:hover .client-node-sphere {
  transform: scale(1.12) translateZ(25px) !important;
  border-color: #00F0FF !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 240, 255, 0.5) !important;
}

/* Node Placements */
.node-1 { top: 12% !important; left: 8% !important; animation: clientDrift1 8s infinite alternate ease-in-out !important; }
.node-2 { top: 16% !important; right: 10% !important; animation: clientDrift2 9s infinite alternate ease-in-out !important; }
.node-3 { bottom: 18% !important; left: 12% !important; animation: clientDrift2 7.5s infinite alternate ease-in-out !important; }
.node-4 { bottom: 14% !important; right: 14% !important; animation: clientDrift1 8.5s infinite alternate ease-in-out !important; }
.node-5 { top: 48% !important; left: -2% !important; animation: clientDrift1 9.5s infinite alternate ease-in-out !important; }
.node-6 { top: 48% !important; right: -2% !important; animation: clientDrift2 8s infinite alternate ease-in-out !important; }

@keyframes clientDrift1 {
  0% { transform: translate(0, 0) translateZ(40px); }
  50% { transform: translate(8px, -10px) translateZ(48px); }
  100% { transform: translate(-6px, 6px) translateZ(36px); }
}

@keyframes clientDrift2 {
  0% { transform: translate(0, 0) translateZ(40px); }
  50% { transform: translate(-8px, 8px) translateZ(46px); }
  100% { transform: translate(6px, -8px) translateZ(38px); }
}

/* --------------------------------------------------------------------------
   3. CLIENT LOGO MARQUEE WALL
   -------------------------------------------------------------------------- */
.constellation-logo-wall {
  position: relative !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 50px auto !important;
  overflow: hidden !important;
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%) !important;
}

.logo-wall-track {
  display: flex !important;
  gap: 20px !important;
  width: max-content !important;
  animation: logoMarqueeScroll 24s linear infinite !important;
}

.constellation-logo-wall:hover .logo-wall-track {
  animation-play-state: paused !important;
}

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

.logo-wall-slot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  border-radius: 14px !important;
  background: rgba(11, 18, 35, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.logo-wall-slot:hover {
  background: rgba(0, 240, 255, 0.08) !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.15) !important;
}

/* --------------------------------------------------------------------------
   4. THREE COMPACT CREDIBILITY TRUST INDICATORS
   -------------------------------------------------------------------------- */
.constellation-trust-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 950px !important;
  margin: 0 auto 50px auto !important;
}

.trust-indicator-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  text-align: left !important;
  padding: 22px 24px !important;
  border-radius: 18px !important;
  background: rgba(9, 15, 28, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7) !important;
  transition: all 0.3s ease !important;
}

.trust-indicator-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 240, 255, 0.15) !important;
}

.trust-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.trust-info h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

.trust-info p {
  font-size: 0.84rem !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   5. PREMIUM TESTIMONIAL / TRUST STATEMENT CARD
   -------------------------------------------------------------------------- */
.constellation-testimonial-card {
  position: relative !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 40px 45px !important;
  border-radius: 24px !important;
  background: rgba(9, 15, 28, 0.82) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 240, 255, 0.15) !important;
}

.testimonial-glass-quote {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: rgba(0, 240, 255, 0.1) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px auto !important;
}

.testimonial-badge-tag {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #00F0FF !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.testimonial-quote-heading {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.3px !important;
}

.testimonial-quote-body {
  font-size: 0.94rem !important;
  color: #94a3b8 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .constellation-trust-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .constellation-3d-stage {
    height: 320px !important;
    max-width: 500px !important;
  }
  .orbit-ring-inner { width: 300px !important; height: 300px !important; margin-top: -150px !important; margin-left: -150px !important; }
  .orbit-ring-outer { width: 420px !important; height: 420px !important; margin-top: -210px !important; margin-left: -210px !important; }
}

@media (max-width: 580px) {
  .constellation-testimonial-card {
    padding: 30px 22px !important;
  }
  .testimonial-quote-heading {
    font-size: 1.15rem !important;
  }
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION SAFEGUARDS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .orbit-ring-inner,
  .orbit-ring-outer,
  .constellation-central-orb,
  .logo-wall-track {
    animation: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - "Creative Studio" Services 3D Ecosystem Engine
 * Central 3D Glass Creative Core, 6 Custom 3D Modules, Energy Pathways & Interactive Modals
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION CONTAINER & AMBIENT SPACE
   -------------------------------------------------------------------------- */
.services-studio-section {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 110px 0 !important;
  overflow: hidden !important;
  perspective: 1600px !important;
}

.studio-ambient-glow-core {
  position: absolute !important;
  top: 45% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 900px !important;
  height: 600px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(27, 109, 251, 0.06) 45%, rgba(168, 85, 247, 0.04) 65%, transparent 80%) !important;
  filter: blur(100px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.studio-particles-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.7 !important;
}

.studio-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Header */
.studio-header-wrap {
  margin-bottom: 60px !important;
}

.studio-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  color: #00F0FF !important;
  border-radius: 30px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.12) !important;
}

.studio-main-heading {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  margin: 0 0 18px 0 !important;
}

.studio-subtitle {
  font-size: 1.12rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   2. 3D CREATIVE STUDIO RADIAL ECOSYSTEM
   -------------------------------------------------------------------------- */
.studio-ecosystem-stage {
  position: relative !important;
  width: 100% !important;
  margin: 0 auto 90px auto !important;
  perspective: 1600px !important;
  transform-style: preserve-3d !important;
}

/* Central 3D Creative Core (Large Suspended Sphere) */
.studio-central-core-wrap {
  position: relative !important;
  width: 220px !important;
  height: 220px !important;
  margin: 0 auto 50px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  z-index: 5 !important;
}

.studio-core-sphere {
  position: relative !important;
  width: 170px !important;
  height: 170px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(0, 240, 255, 0.6) 25%, rgba(27, 109, 251, 0.35) 60%, rgba(2, 4, 8, 0.95) 100%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.6) !important;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 50px rgba(0, 240, 255, 0.5),
    inset 0 2px 6px rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  animation: studioCoreBreathe 7s ease-in-out infinite alternate !important;
}

@keyframes studioCoreBreathe {
  0% { transform: translateY(0) scale(1) translateZ(40px); }
  50% { transform: translateY(-8px) scale(1.03) translateZ(50px); }
  100% { transform: translateY(5px) scale(0.98) translateZ(35px); }
}

.studio-core-rings {
  position: absolute !important;
  inset: -30px !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(0, 240, 255, 0.4) !important;
  transform: rotateX(68deg) rotateY(18deg) !important;
  animation: coreRingSpin 24s linear infinite !important;
  pointer-events: none !important;
}

.studio-core-rings-2 {
  position: absolute !important;
  inset: -45px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(168, 85, 247, 0.35) !important;
  transform: rotateX(35deg) rotateY(70deg) !important;
  animation: coreRingSpin 30s linear infinite reverse !important;
  pointer-events: none !important;
}

@keyframes coreRingSpin {
  0% { transform: rotateX(68deg) rotateY(18deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg); }
}

.studio-core-inner-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transform: translateZ(20px) !important;
}

.studio-core-logo-text {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.8) !important;
}

.studio-core-sub-text {
  font-size: 0.68rem !important;
  color: #00F0FF !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* --------------------------------------------------------------------------
   3. SIX 3D SERVICE MODULES GRID
   -------------------------------------------------------------------------- */
.studio-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 4 !important;
}

/* Service Card Module */
.studio-service-module {
  position: relative !important;
  border-radius: 24px !important;
  background: rgba(9, 15, 28, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  padding: 32px 26px 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  transform-style: preserve-3d !important;
  perspective: 1200px !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.8),
    inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  will-change: transform !important;
  transition: 
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* Module Hover State */
.studio-service-module:hover {
  transform: translateY(-10px) scale(1.02) translateZ(30px) !important;
  border-color: rgba(0, 240, 255, 0.6) !important;
  box-shadow: 
    0 32px 75px rgba(0, 0, 0, 0.95),
    0 0 45px rgba(0, 240, 255, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.4) !important;
}

/* Module Header (Number Pill & 3D Stage) */
.module-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.module-number-pill {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.25) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  letter-spacing: 1px !important;
}

/* 3D Visual Rig Inside Module */
.module-3d-visual-rig {
  width: 65px !important;
  height: 65px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  transform: translateZ(25px) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.studio-service-module:hover .module-3d-visual-rig {
  transform: scale(1.15) translateZ(45px) rotateY(10deg) !important;
}

.module-3d-visual-rig svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Module Typography */
.module-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.3px !important;
  transition: color 0.3s ease !important;
}

.studio-service-module:hover .module-title {
  color: #00F0FF !important;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.4) !important;
}

.module-description {
  font-size: 0.92rem !important;
  color: #94a3b8 !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
}

/* Deliverable Badges Stack */
.module-deliverables-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.module-deliverables-list li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.84rem !important;
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

.module-deliverables-list li i {
  color: #00F0FF !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

/* Explore Service Action Link */
.module-explore-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #00F0FF !important;
  text-decoration: none !important;
  margin-top: auto !important;
  transition: gap 0.25s ease, color 0.25s ease !important;
}

.studio-service-module:hover .module-explore-btn {
  gap: 10px !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. BIG CINEMATIC CONVERSION CTA
   -------------------------------------------------------------------------- */
.studio-conversion-card {
  position: relative !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 55px 50px !important;
  border-radius: 30px !important;
  background: rgba(9, 15, 28, 0.85) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(0, 240, 255, 0.25),
    inset 0 1px 3px rgba(255, 255, 255, 0.3) !important;
  text-align: center !important;
  overflow: hidden !important;
}

.studio-cta-heading {
  font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
}

.studio-cta-desc {
  font-size: 1.1rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  max-width: 680px !important;
  margin: 0 auto 36px auto !important;
}

.studio-cta-btn-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.btn-studio-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 36px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
}

.btn-studio-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 32px rgba(0, 240, 255, 0.65), 0 8px 24px rgba(27, 109, 251, 0.45) !important;
}

.btn-studio-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 32px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.28s ease !important;
}

.btn-studio-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
  transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   5. INTERACTIVE INQUIRY & BOOKING MODALS
   -------------------------------------------------------------------------- */
.studio-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(2, 4, 8, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}

.studio-modal-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.studio-modal-content {
  position: relative !important;
  width: 100% !important;
  max-width: 620px !important;
  background: rgba(11, 18, 35, 0.95) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
  border-radius: 28px !important;
  padding: 40px 36px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(0, 240, 255, 0.3) !important;
  transform: scale(0.9) translateY(20px) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: left !important;
}

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

.studio-modal-close {
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.studio-modal-close:hover {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
}

/* Modal Form Styles */
.modal-form-group {
  margin-bottom: 20px !important;
}

.modal-form-label {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

.modal-form-input,
.modal-form-select,
.modal-form-textarea {
  width: 100% !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  outline: none !important;
  transition: border-color 0.25s ease !important;
}

.modal-form-input:focus,
.modal-form-textarea:focus {
  border-color: #00F0FF !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3) !important;
}

.modal-chips-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.modal-chip-btn {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.modal-chip-btn.selected,
.modal-chip-btn:hover {
  background: rgba(0, 240, 255, 0.15) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .studio-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  .studio-services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .studio-conversion-card {
    padding: 35px 24px !important;
  }
  .studio-modal-content {
    padding: 30px 20px !important;
  }
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION SAFEGUARDS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .studio-core-sphere,
  .studio-core-rings,
  .studio-core-rings-2 {
    animation: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - About Page "3D Client Trust Network" (Master Section 6 Upgrade)
 * Bespoke 3D SVG Artworks, Holographic Identity Capsules, Energy Flow & Interactive Tooltips
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. SECTION ATMOSPHERE & BACKGROUND
   -------------------------------------------------------------------------- */
.client-constellation-section {
  position: relative !important;
  background: #020408 !important;
  padding: 120px 0 110px 0 !important;
  overflow: hidden !important;
  perspective: 1600px !important;
}

.constellation-ambient-glow {
  position: absolute !important;
  top: 45% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 920px !important;
  height: 540px !important;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(27, 109, 251, 0.06) 45%, rgba(168, 85, 247, 0.03) 70%, transparent 80%) !important;
  filter: blur(100px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.constellation-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: center !important;
}

/* Header */
.constellation-header-wrap {
  margin-bottom: 50px !important;
}

.constellation-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 240, 255, 0.28) !important;
  color: #00F0FF !important;
  border-radius: 30px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.12) !important;
}

.constellation-main-heading {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
}

.constellation-subtitle {
  font-size: 1.1rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   2. 3D CLIENT TRUST NETWORK ORBIT STAGE
   -------------------------------------------------------------------------- */
.constellation-3d-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 750px !important;
  height: 420px !important;
  margin: 0 auto 55px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  perspective: 1600px !important;
}

.constellation-stage-halo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.22) 0%, rgba(27, 109, 251, 0.08) 50%, transparent 75%) !important;
  filter: blur(45px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 3D Elliptical Orbit Paths */
.constellation-orbit-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(0, 240, 255, 0.3) !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
}

.orbit-ring-inner {
  width: 440px !important;
  height: 440px !important;
  margin-top: -220px !important;
  margin-left: -220px !important;
  transform: rotateX(68deg) rotateY(15deg) !important;
  animation: trustOrbitInner 35s linear infinite !important;
}

.orbit-ring-outer {
  width: 620px !important;
  height: 620px !important;
  margin-top: -310px !important;
  margin-left: -310px !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
  transform: rotateX(42deg) rotateY(65deg) !important;
  animation: trustOrbitOuter 42s linear infinite reverse !important;
}

@keyframes trustOrbitInner {
  0% { transform: rotateX(68deg) rotateY(15deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(15deg) rotateZ(360deg); }
}

@keyframes trustOrbitOuter {
  0% { transform: rotateX(42deg) rotateY(65deg) rotateZ(0deg); }
  100% { transform: rotateX(42deg) rotateY(65deg) rotateZ(360deg); }
}

/* Central BrandGlows 3D Glass Energy Core */
.constellation-central-orb {
  position: relative !important;
  z-index: 5 !important;
  width: 155px !important;
  height: 155px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, rgba(0, 240, 255, 0.45) 0%, rgba(15, 23, 42, 0.9) 55%, #020408 100%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.6) !important;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.95),
    0 0 45px rgba(0, 240, 255, 0.5),
    inset 0 2px 5px rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
  animation: trustCoreFloat 6s ease-in-out infinite alternate !important;
}

@keyframes trustCoreFloat {
  0% { transform: translateY(0px) scale(1) translateZ(35px); }
  50% { transform: translateY(-8px) scale(1.03) translateZ(45px); }
  100% { transform: translateY(5px) scale(0.98) translateZ(30px); }
}

.constellation-central-orb:hover {
  transform: translateY(-8px) scale(1.08) translateZ(55px) !important;
  box-shadow: 
    0 35px 75px rgba(0, 0, 0, 0.95),
    0 0 60px rgba(0, 240, 255, 0.75),
    inset 0 2px 6px rgba(255, 255, 255, 0.7) !important;
}

.central-orb-core {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transform: translateZ(20px) !important;
}

.central-orb-logo-text {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8) !important;
}

.central-orb-sub {
  font-size: 0.68rem !important;
  color: #00F0FF !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

/* --------------------------------------------------------------------------
   3. SIX 3D CLIENT HOLOGRAPHIC IDENTITY CAPSULES
   -------------------------------------------------------------------------- */
.client-orbit-node {
  position: absolute !important;
  z-index: 6 !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  cursor: pointer !important;
}

.client-node-capsule {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(11, 18, 35, 0.88) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
  backdrop-filter: blur(14px) !important;
  padding: 8px 16px !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.25) !important;
  transform-style: preserve-3d !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Light sweep sheen on hover */
.client-node-capsule::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%) !important;
  transition: left 0.55s ease !important;
  pointer-events: none !important;
  border-radius: 24px !important;
}

.client-orbit-node:hover .client-node-capsule::after {
  left: 160% !important;
}

.client-orbit-node:hover .client-node-capsule {
  transform: scale(1.05) translateY(-4px) translateZ(35px) !important;
  border-color: rgba(0, 240, 255, 0.85) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 36px rgba(0, 240, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  background: rgba(11, 18, 42, 0.95) !important;
}

/* Mini 3D Brand Badge Inside Capsule */
.client-mini-badge {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: rgba(0, 240, 255, 0.12) !important;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.client-mini-badge svg {
  width: 14px !important;
  height: 14px !important;
}

.client-capsule-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.client-capsule-name {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
}

.client-capsule-status {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: #00F0FF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* Interactive Hover Detail Tooltip */
.client-hover-tooltip {
  position: absolute !important;
  bottom: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) scale(0.9) !important;
  background: rgba(9, 15, 28, 0.95) !important;
  border: 1px solid rgba(0, 240, 255, 0.5) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 240, 255, 0.3) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
}

.client-orbit-node:hover .client-hover-tooltip {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.client-hover-tooltip span {
  display: block !important;
  font-size: 0.72rem !important;
  color: #cbd5e1 !important;
}

.client-hover-tooltip strong {
  color: #00F0FF !important;
}

/* Node Precise Placements */
.node-1 { top: 8% !important; left: 12% !important; animation: clientDrift1 8s infinite alternate ease-in-out !important; }
.node-2 { top: 10% !important; right: 14% !important; animation: clientDrift2 9s infinite alternate ease-in-out !important; }
.node-3 { bottom: 12% !important; left: 15% !important; animation: clientDrift2 7.5s infinite alternate ease-in-out !important; }
.node-4 { bottom: 10% !important; right: 16% !important; animation: clientDrift1 8.5s infinite alternate ease-in-out !important; }
.node-5 { top: 46% !important; left: 0% !important; animation: clientDrift1 9.5s infinite alternate ease-in-out !important; }
.node-6 { top: 46% !important; right: 0% !important; animation: clientDrift2 8s infinite alternate ease-in-out !important; }

/* --------------------------------------------------------------------------
   4. THREE 3D PARTNERSHIP CREDIBILITY CARDS (NO EMPTY SQUARES)
   -------------------------------------------------------------------------- */
.constellation-trust-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 26px !important;
  max-width: 1000px !important;
  margin: 0 auto 50px auto !important;
}

.trust-indicator-card {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  text-align: left !important;
  padding: 24px 26px !important;
  border-radius: 20px !important;
  background: rgba(9, 15, 28, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.trust-indicator-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 240, 255, 0.2) !important;
}

/* Bespoke 3D Visual Box (NO EMPTY SQUARES) */
.trust-3d-visual-box {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, rgba(15, 23, 42, 0.85) 80%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25) !important;
  transition: transform 0.3s ease !important;
}

.trust-indicator-card:hover .trust-3d-visual-box {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.5) !important;
}

.trust-3d-visual-box svg {
  width: 32px !important;
  height: 32px !important;
  overflow: visible !important;
}

.trust-info h4 {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.2px !important;
}

.trust-info p {
  font-size: 0.86rem !important;
  color: #94a3b8 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   5. PREMIUM TESTIMONIAL PANEL (NO EMPTY CIRCLE)
   -------------------------------------------------------------------------- */
.constellation-testimonial-card {
  position: relative !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 44px 50px !important;
  border-radius: 26px !important;
  background: rgba(9, 15, 28, 0.85) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 240, 255, 0.18) !important;
  overflow: hidden !important;
}

/* 3D Abstract Quote Orb (NO EMPTY CIRCLE) */
.testimonial-3d-quote-orb {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, rgba(0, 240, 255, 0.35) 0%, rgba(15, 23, 42, 0.9) 70%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.55) !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px auto !important;
}

.testimonial-3d-quote-orb svg {
  width: 24px !important;
  height: 24px !important;
}

.testimonial-badge-tag {
  display: inline-block !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #00F0FF !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.testimonial-quote-heading {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.3px !important;
}

.testimonial-quote-body {
  font-size: 0.96rem !important;
  color: #94a3b8 !important;
  line-height: 1.68 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .constellation-trust-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .constellation-3d-stage {
    height: 340px !important;
    max-width: 520px !important;
  }
  .orbit-ring-inner { width: 320px !important; height: 320px !important; margin-top: -160px !important; margin-left: -160px !important; }
  .orbit-ring-outer { width: 460px !important; height: 460px !important; margin-top: -230px !important; margin-left: -230px !important; }
}

@media (max-width: 580px) {
  .constellation-testimonial-card {
    padding: 32px 22px !important;
  }
  .testimonial-quote-heading {
    font-size: 1.2rem !important;
  }
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION SAFEGUARDS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .orbit-ring-inner,
  .orbit-ring-outer,
  .constellation-central-orb,
  .client-orbit-node {
    animation: none !important;
    transform: none !important;
  }
}


/**
 * ============================================================================
 * BrandGlows - Portfolio Section 2 Engine
 * Filter Smooth Transitions, 3D Hover Depth, Video Cards & Lightbox Modal
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   1. PORTFOLIO SECTION & FILTER BAR
   -------------------------------------------------------------------------- */
.portfolio-master-section {
  position: relative !important;
  background: #020408 !important;
  padding: 80px 0 120px 0 !important;
  overflow: hidden !important;
}

.portfolio-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 50px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 5 !important;
}

.portfolio-filter-btn {
  padding: 9px 24px !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.portfolio-filter-btn:hover {
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #00F0FF !important;
  background: rgba(0, 240, 255, 0.06) !important;
  transform: translateY(-2px) !important;
}

.portfolio-filter-btn.active {
  background: linear-gradient(135deg, rgba(27, 109, 251, 0.8) 0%, rgba(0, 240, 255, 0.8) 100%) !important;
  border-color: #00F0FF !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.35) !important;
}

/* --------------------------------------------------------------------------
   2. 3-COLUMN PORTFOLIO GRID & CARDS
   -------------------------------------------------------------------------- */
.portfolio-3col-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.portfolio-card-item {
  position: relative !important;
  border-radius: 20px !important;
  background: rgba(9, 15, 28, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8) !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  transition: 
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.38s ease,
    opacity 0.35s ease !important;
}

.portfolio-card-item.hidden {
  display: none !important;
}

.portfolio-card-item:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(0, 240, 255, 0.5) !important;
  box-shadow: 
    0 30px 65px rgba(0, 0, 0, 0.95),
    0 0 35px rgba(0, 240, 255, 0.25) !important;
}

/* Media Box */
.portfolio-media-box {
  position: relative !important;
  width: 100% !important;
  height: 240px !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.portfolio-media-box img,
.portfolio-media-box video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.portfolio-card-item:hover .portfolio-media-box img,
.portfolio-card-item:hover .portfolio-media-box video {
  transform: scale(1.06) !important;
}

/* Dark Specular Overlay & View Project Button */
.portfolio-media-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(9, 15, 28, 0.9) 0%, rgba(9, 15, 28, 0.2) 60%, transparent 100%) !important;
  opacity: 0.6 !important;
  transition: opacity 0.35s ease !important;
}

.portfolio-card-item:hover .portfolio-media-overlay {
  opacity: 0.85 !important;
}

.portfolio-view-badge {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.8) !important;
  padding: 8px 18px !important;
  border-radius: 24px !important;
  background: rgba(0, 240, 255, 0.9) !important;
  color: #020408 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.6) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.portfolio-card-item:hover .portfolio-view-badge {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Video Indicator Badges */
.portfolio-video-play-badge {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(0, 240, 255, 0.2) !important;
  border: 1.5px solid #00F0FF !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4) !important;
}

.portfolio-viral-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: rgba(239, 68, 68, 0.85) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5) !important;
}

/* Card Info Body */
.portfolio-card-info {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.portfolio-card-category {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #00F0FF !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
}

.portfolio-card-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.35 !important;
  transition: color 0.3s ease !important;
}

.portfolio-card-item:hover .portfolio-card-title {
  color: #00F0FF !important;
}

.portfolio-card-desc {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   3. LIGHTBOX / PROJECT PREVIEW MODAL
   -------------------------------------------------------------------------- */
.portfolio-lightbox-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(2, 4, 8, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}

.portfolio-lightbox-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.portfolio-lightbox-content {
  position: relative !important;
  width: 100% !important;
  max-width: 820px !important;
  background: rgba(11, 18, 35, 0.96) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.45) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 60px rgba(0, 240, 255, 0.3) !important;
  transform: scale(0.9) translateY(20px) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: left !important;
}

.portfolio-lightbox-overlay.active .portfolio-lightbox-content {
  transform: scale(1) translateY(0) !important;
}

.portfolio-lightbox-close {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 1.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.25s ease !important;
}

.portfolio-lightbox-close:hover {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: #00F0FF !important;
  color: #00F0FF !important;
}

.portfolio-lightbox-media-wrap {
  width: 100% !important;
  height: 420px !important;
  background: #000000 !important;
  position: relative !important;
  overflow: hidden !important;
}

.portfolio-lightbox-media-wrap img,
.portfolio-lightbox-media-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.portfolio-lightbox-body {
  padding: 30px 35px !important;
}

.lightbox-project-cat {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #00F0FF !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 6px !important;
}

.lightbox-project-title {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.3px !important;
}

.lightbox-project-desc {
  font-size: 0.95rem !important;
  color: #94a3b8 !important;
  line-height: 1.65 !important;
  margin-bottom: 24px !important;
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .portfolio-3col-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 26px !important;
  }
}

@media (max-width: 640px) {
  .portfolio-3col-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .portfolio-filter-bar {
    gap: 8px !important;
  }
  .portfolio-filter-btn {
    padding: 7px 16px !important;
    font-size: 0.8rem !important;
  }
  .portfolio-lightbox-media-wrap {
    height: 260px !important;
  }
  .portfolio-lightbox-body {
    padding: 22px 20px !important;
  }
}




/**
 * BrandGlows - Contact Page Engine
 * Section 1 Hero & Section 2 Two-Column Interactive Contact Suite
 */

/* ==========================================================================
   1. SECTION 1: CONTACT HERO
   ========================================================================== */
.contact-hero-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 130px 0 70px 0 !important;
  background: radial-gradient(circle at 50% 10%, rgba(27, 109, 251, 0.15) 0%, #020408 70%) !important;
  text-align: center !important;
}

.contact-hero-ambient-glow {
  position: absolute !important;
  top: -100px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  height: 350px !important;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.18) 0%, rgba(27, 109, 251, 0.12) 40%, transparent 70%) !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: heroGlowPulse 8s ease-in-out infinite alternate !important;
}

@keyframes heroGlowPulse {
  0% { opacity: 0.6; transform: translateX(-50%) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.contact-hero-title {
  font-size: clamp(2.6rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
}

.contact-hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
  color: #94a3b8 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  line-height: 1.7 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   2. SECTION 2: CONTACT INFORMATION & FORM GRID
   ========================================================================== */
.contact-main-section {
  position: relative !important;
  padding: 40px 0 120px 0 !important;
  background: #020408 !important;
}

.contact-layout-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 50px !important;
  align-items: start !important;
}

/* Left Column: Contact Cards */
.contact-info-col {
  display: flex !important;
  flex-direction: column !important;
}

.contact-section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.3px !important;
}

.contact-section-desc {
  font-size: 1rem !important;
  color: #94a3b8 !important;
  line-height: 1.7 !important;
  margin-bottom: 36px !important;
}

.contact-cards-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.contact-interactive-card {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 24px 28px !important;
  border-radius: 18px !important;
  background: rgba(9, 15, 28, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7) !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.contact-interactive-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 240, 255, 0.25) !important;
}

.contact-interactive-card.card-email {
  border-left: 4px solid #1B6DFB !important;
}
.contact-interactive-card.card-email:hover {
  border-color: #1B6DFB !important;
}

.contact-interactive-card.card-call {
  border-left: 4px solid #00F0FF !important;
}
.contact-interactive-card.card-call:hover {
  border-color: #00F0FF !important;
}

.contact-interactive-card.card-whatsapp {
  border-left: 4px solid #25D366 !important;
}
.contact-interactive-card.card-whatsapp:hover {
  border-color: #25D366 !important;
}

.contact-card-icon-box {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.35s ease !important;
}

.contact-interactive-card:hover .contact-card-icon-box {
  transform: scale(1.1) rotate(4deg) !important;
}

.card-email .contact-card-icon-box {
  background: rgba(27, 109, 251, 0.15) !important;
  color: #1B6DFB !important;
  border: 1px solid rgba(27, 109, 251, 0.3) !important;
}

.card-call .contact-card-icon-box {
  background: rgba(0, 240, 255, 0.15) !important;
  color: #00F0FF !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
}

.card-whatsapp .contact-card-icon-box {
  background: rgba(37, 211, 102, 0.15) !important;
  color: #25D366 !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
}

.contact-card-body h4 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
}

.contact-card-body p {
  font-size: 0.95rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  transition: color 0.25s ease !important;
}

.contact-interactive-card:hover .contact-card-body p {
  color: #00F0FF !important;
}

/* Right Column: Premium Form Card */
.contact-form-card {
  padding: 44px 40px !important;
  border-radius: 24px !important;
  background: rgba(11, 18, 35, 0.88) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85) !important;
  text-align: left !important;
}

.contact-form-title {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.3px !important;
}

.contact-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

.contact-field-wrap {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 20px !important;
}

.contact-field-label {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  margin-bottom: 8px !important;
}

.contact-field-input,
.contact-field-textarea {
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-family: inherit !important;
  outline: none !important;
  transition: all 0.28s ease !important;
}

.contact-field-input:focus,
.contact-field-textarea:focus {
  background: rgba(0, 240, 255, 0.04) !important;
  border-color: #00F0FF !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25) !important;
}

.contact-field-textarea {
  min-height: 130px !important;
  resize: vertical !important;
}

.contact-submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 16px 32px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 30px rgba(0, 240, 255, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.contact-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.55) !important;
}

.contact-submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Success State Box */
.contact-form-success {
  display: none;
  padding: 30px !important;
  border-radius: 16px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1.5px solid #10b981 !important;
  text-align: center !important;
  animation: fadeInSuccess 0.4s ease !important;
}

.contact-form-success.active {
  display: block !important;
}

.contact-form-success h4 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #10b981 !important;
  margin-bottom: 8px !important;
}

.contact-form-success p {
  font-size: 0.95rem !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
}

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

/* ==========================================================================
   3. RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 960px) {
  .contact-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .contact-form-card {
    padding: 32px 24px !important;
  }
}

@media (max-width: 600px) {
  .contact-form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .contact-interactive-card {
    padding: 20px 22px !important;
  }
  .contact-hero-section {
    padding: 100px 0 50px 0 !important;
  }
}


/**
 * BrandGlows - Refined Pricing Section Engine
 * Compact, Elegant 3-Card Glassmorphic Pricing Grid
 */

/* ==========================================================================
   1. PRICING SECTION CONTAINER & GRID
   ========================================================================== */
.pricing-refined-section {
  position: relative !important;
  padding: 40px 0 90px 0 !important;
  background: #020408 !important;
}

.pricing-3cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   2. COMPACT BASE CARD STYLES
   ========================================================================== */
.pricing-compact-card {
  position: relative !important;
  border-radius: 20px !important;
  background: rgba(9, 15, 28, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  padding: 34px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- CARD 1: STARTER (₹15,000) --- */
.card-plan-starter {
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}
.card-plan-starter:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85) !important;
}

/* --- CARD 2: GROWTH (₹30,000) - MOST POPULAR CENTERPIECE --- */
.card-plan-growth {
  border: 2px solid #00F0FF !important;
  background: radial-gradient(circle at 50% 0%, rgba(27, 109, 251, 0.18) 0%, rgba(9, 15, 28, 0.95) 75%) !important;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.9),
    0 0 35px rgba(0, 240, 255, 0.28),
    inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-8px) scale(1.02) !important;
  z-index: 5 !important;
}
.card-plan-growth:hover {
  transform: translateY(-14px) scale(1.03) !important;
  box-shadow: 
    0 35px 75px rgba(0, 0, 0, 0.95),
    0 0 45px rgba(0, 240, 255, 0.4) !important;
}

/* Badge for Growth */
.pricing-popular-badge {
  position: absolute !important;
  top: -14px !important;
  right: 28px !important;
  padding: 5px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.45) !important;
}

/* --- CARD 3: SCALE (₹50,000) --- */
.card-plan-scale {
  border: 1.5px solid rgba(27, 109, 251, 0.35) !important;
  background: radial-gradient(circle at 50% 0%, rgba(27, 109, 251, 0.08) 0%, rgba(9, 15, 28, 0.9) 80%) !important;
}
.card-plan-scale:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.85), 0 0 25px rgba(27, 109, 251, 0.25) !important;
}

/* ==========================================================================
   3. CARD HEADER & TYPOGRAPHY
   ========================================================================== */
.pricing-plan-header {
  margin-bottom: 22px !important;
}

.pricing-plan-name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 10px 0 !important;
}

.card-plan-growth .pricing-plan-name {
  color: #00F0FF !important;
}

.pricing-price-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.pricing-amount {
  font-size: clamp(2.2rem, 3.2vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

.pricing-period {
  font-size: 0.92rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.pricing-plan-desc {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  line-height: 1.55 !important;
  min-height: 42px !important;
  margin: 0 !important;
}

.pricing-card-divider {
  width: 100% !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 18px 0 22px 0 !important;
}

/* ==========================================================================
   4. FEATURES LIST (PERFECT ALIGNMENT)
   ========================================================================== */
.pricing-features-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 30px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}

.pricing-feature-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.88rem !important;
  color: #cbd5e1 !important;
  line-height: 1.4 !important;
}

.pricing-check-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #10b981 !important;
}

.card-plan-growth .pricing-check-icon {
  color: #00F0FF !important;
}

/* ==========================================================================
   5. DISTINCT CALL-TO-ACTION BUTTONS
   ========================================================================== */
.pricing-cta-wrap {
  margin-top: auto !important;
  width: 100% !important;
}

/* Starter CTA */
.btn-pricing-starter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}
.btn-pricing-starter:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Growth CTA */
.btn-pricing-growth {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #1B6DFB 0%, #00F0FF 100%) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 22px rgba(0, 240, 255, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-pricing-growth:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.6) !important;
}

/* Scale CTA */
.btn-pricing-scale {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  background: rgba(27, 109, 251, 0.15) !important;
  border: 1.5px solid rgba(27, 109, 251, 0.45) !important;
  color: #38bdf8 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}
.btn-pricing-scale:hover {
  background: rgba(27, 109, 251, 0.28) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 960px) {
  .pricing-3cards-grid {
    grid-template-columns: 1fr !important;
    max-width: 520px !important;
    gap: 34px !important;
  }
  .card-plan-growth {
    transform: none !important;
  }
  .card-plan-growth:hover {
    transform: translateY(-6px) !important;
  }
}


/**
 * ============================================================================
 * BRANDGLOWS - CINEMATIC DIGITAL PRELOADER SUITE
 * Sophisticated Digital Studio Loading Experience & Ambient HUD
 * ============================================================================
 */

.cinematic-preloader-root {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #020408 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.8s ease, 
              visibility 0.8s ease !important;
  will-change: opacity, transform, filter !important;
}

.cinematic-preloader-root.hide {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.03) !important;
  filter: blur(10px) !important;
  pointer-events: none !important;
}

body.loader-active {
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   1. AMBIENT BACKGROUND GLOWS
   -------------------------------------------------------------------------- */
.loader-ambient-glow {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  opacity: 0.2 !important;
  animation: loaderAmbientPulse 8s ease-in-out infinite alternate !important;
}

.loader-ambient-glow.left-glow {
  top: -15% !important;
  left: -10% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.45) 0%, rgba(27, 109, 251, 0.2) 60%, transparent 80%) !important;
}

.loader-ambient-glow.right-glow {
  bottom: -15% !important;
  right: -10% !important;
  width: 550px !important;
  height: 550px !important;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, rgba(27, 109, 251, 0.15) 60%, transparent 80%) !important;
}

@keyframes loaderAmbientPulse {
  0% { transform: scale(0.95); opacity: 0.18; }
  100% { transform: scale(1.1); opacity: 0.28; }
}

/* --------------------------------------------------------------------------
   2. TECHNICAL HUD METADATA (FOUR CORNERS)
   -------------------------------------------------------------------------- */
.loader-hud {
  position: absolute !important;
  font-family: 'Plus Jakarta Sans', monospace, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: rgba(148, 163, 184, 0.45) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  animation: hudFadeIn 1s ease forwards !important;
}

.hud-top-left { top: 32px !important; left: 36px !important; }
.hud-top-right { top: 32px !important; right: 36px !important; }
.hud-bottom-left { bottom: 32px !important; left: 36px !important; }
.hud-bottom-right { bottom: 32px !important; right: 36px !important; }

.hud-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  animation: hudDotBlink 1.8s infinite ease-in-out !important;
}

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

@keyframes hudFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   3. CENTER CONTENT CONTAINER
   -------------------------------------------------------------------------- */
.loader-center-box {
  position: relative !important;
  z-index: 10 !important;
  text-align: center !important;
  width: min(90%, 460px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Logo Animation */
.loader-logo-wrap {
  margin-bottom: 22px !important;
  animation: logoSoftReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.loader-brand-logo {
  width: 88px !important;
  height: auto !important;
  filter: drop-shadow(0 0 25px rgba(0, 240, 255, 0.4)) !important;
  animation: logoBreath 4s ease-in-out infinite alternate !important;
}

@keyframes logoSoftReveal {
  from { opacity: 0; transform: scale(0.85); filter: blur(6px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes logoBreath {
  0% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.35)); }
  100% { transform: scale(1.03); filter: drop-shadow(0 0 35px rgba(0, 240, 255, 0.65)); }
}

/* Brand Title & Subtitle */
.loader-brand-title {
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 4vw, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  animation: titleBlurReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s !important;
  opacity: 0 !important;
}

.loader-brand-subtitle {
  margin: 0 0 28px 0 !important;
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.4 !important;
  animation: titleBlurReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.35s !important;
  opacity: 0 !important;
}

@keyframes titleBlurReveal {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --------------------------------------------------------------------------
   4. COUNTER & PROGRESS BAR
   -------------------------------------------------------------------------- */
.loader-counter-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 8px !important;
}

.loader-percentage-text {
  font-family: 'Plus Jakarta Sans', monospace, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #00F0FF !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6) !important;
  font-variant-numeric: tabular-nums !important;
}

.loader-progress-track {
  width: 100% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  overflow: visible !important;
  position: relative !important;
  margin-bottom: 14px !important;
}

.loader-progress-fill {
  position: relative !important;
  height: 100% !important;
  width: 0% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #1B6DFB 0%, #00F0FF 100%) !important;
  transition: width 0.08s linear !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5) !important;
}

.loader-progress-glow-head {
  position: absolute !important;
  right: -2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px #00F0FF, 0 0 20px #00F0FF !important;
}

/* --------------------------------------------------------------------------
   5. TECHNICAL STATUS ROTATOR
   -------------------------------------------------------------------------- */
.loader-status-container {
  width: 100% !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.loader-status-text {
  font-family: 'Plus Jakarta Sans', monospace, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.loader-status-text.fade-swap {
  opacity: 0 !important;
  transform: translateY(4px) !important;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE DESIGN (MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hud-top-left, .hud-top-right, .hud-bottom-left, .hud-bottom-right {
    font-size: 0.65rem !important;
  }
  .hud-top-left { top: 18px !important; left: 18px !important; }
  .hud-top-right { top: 18px !important; right: 18px !important; }
  .hud-bottom-left { display: none !important; }
  .hud-bottom-right { bottom: 18px !important; right: 18px !important; }
  
  .loader-brand-logo {
    width: 72px !important;
  }
  .loader-brand-title {
    font-size: 1.8rem !important;
  }
  .loader-brand-subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 22px !important;
  }
}