/* ==========================================
   GEIST — self-hosted, SIL OFL 1.1
   Variable files: one request covers 100-900, which matters because this
   site uses 15 distinct weights including 450, 480, 520, 650, 750 and 850.
   Italic and mono are declared but only fetched when a rule matches them.
   ========================================== */
@font-face {
  font-family: 'Geist';
  src: url('../../assets/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('../../assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../../assets/fonts/Geist-Italic-Variable.woff2') format('woff2-variations'),
       url('../../assets/fonts/Geist-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../../assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('../../assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Consolidated from 10 separate :root blocks. Where a token was
     defined more than once the LAST value is kept, which is what the
     cascade already resolved to:
       --ease-smooth        was cubic-bezier(0.25,0.1,0.25,1), dead since
                            five later blocks set cubic-bezier(0.4,0,0.2,1)
       --sbd-section-padding was 100px 0, overridden to 80px 0 */
  --color-primary: #1e4d8c;
  --color-primary-light: #3b6fc4;
  --color-primary-dark: #16386a;
  --color-primary-50: #eef3fb;
  --color-primary-100: #d4e1f5;
  --color-primary-200: #a7c0ea;
  --color-primary-500: #3b6fc4;
  --color-primary-600: #1e4d8c;
  --color-primary-700: #1a4179;
  --color-primary-800: #16386a;
  --color-primary-900: #0f2750;
  --color-secondary: #c6930a;
  --color-secondary-light: #ecc94b;
  --color-secondary-dark: #975a16;
  --color-secondary-50: #fffaf0;
  --color-secondary-100: #feebc8;
  --color-secondary-200: #fbd38d;
  --color-secondary-500: #d69e2e;
  --color-secondary-600: #c6930a;
  --color-secondary-700: #b7791f;
  --color-secondary-800: #975a16;
  --color-secondary-900: #744210;
  --color-accent: #c6930a;
  --color-accent-light: #e0b341;
  --color-accent-dark: #975a16;
  --color-success: #38a169;
  --color-success-light: #68d391;
  --color-warning: #dd6b20;
  --color-warning-light: #f6ad55;
  --color-error: #e53e3e;
  --color-error-light: #fc8181;
  --color-info: #00b5d8;
  --color-info-light: #76e4f7;
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #515154;
  --color-text-tertiary: #6e6e73;
  --color-text-light: #a0aec0;
  --color-text-muted: #cbd5e0;
  --color-text-white: #ffffff;
  --color-text-inverse: #f4f7fc;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f7;
  --color-bg-tertiary: #f5f5f7;
  --color-bg-dark: #1a202c;
  --color-bg-darker: #171923;
  --color-bg-darkest: #0d1117;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-light: rgba(255, 255, 255, 0.95);
  --glass-bg-dark: rgba(26, 32, 44, 0.9);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-light: rgba(255, 255, 255, 0.2);
  --glass-border-gold: rgba(198, 147, 10, 0.12);
  --glass-shadow: var(--ds-elevation-3);
  --glass-shadow-gold: 0 4px 6px -1px rgba(198, 147, 10, 0.08),
    0 10px 20px -5px rgba(198, 147, 10, 0.12);
  --gradient-blue: linear-gradient(135deg, 
    #16386a 0%, 
    #2b5aa8 40%, 
    #5c86cc 100%);
  --gradient-blue-dark: linear-gradient(135deg, 
    #1a4179 0%, 
    #16386a 100%);
  --gradient-blue-light: linear-gradient(135deg, 
    #5c86cc 0%, 
    #7fa3d8 100%);
  --gradient-blue-radial: radial-gradient(
    ellipse at 30% 20%, 
    #5c86cc 0%, 
    #2b5aa8 40%, 
    #16386a 100%);
  --gradient-gold: linear-gradient(135deg, 
    #975a16 0%, 
    #c6930a 40%, 
    #ecc94b 100%);
  --gradient-gold-shine: linear-gradient(135deg, #c6930a, #f6e05e);
  --gradient-gold-subtle: linear-gradient(135deg, 
    rgba(198, 147, 10, 0.1) 0%, 
    rgba(236, 201, 75, 0.05) 100%);
  --gradient-brand: linear-gradient(135deg, #16386a, #ecc94b);
  --gradient-brand-subtle: linear-gradient(90deg, 
    rgba(26, 54, 93, 0.05) 0%, 
    rgba(198, 147, 10, 0.03) 50%, 
    rgba(198, 147, 10, 0.05) 100%);
  --gradient-hero: linear-gradient(135deg, #16386a, #5c86cc);
  --gradient-marquee: linear-gradient(90deg, #16386a, #16386a);
  --gradient-bg-blue: linear-gradient(180deg, 
    #fbfcfd 0%, 
    #ffffff 100%);
  --gradient-bg-gold: linear-gradient(180deg, 
    #fafbfc 0%, 
    #ffffff 100%);
  --gradient-bg-mixed: linear-gradient(135deg, 
    #ffffff 0%, 
    #f5f5f7 50%, 
    #ffffff 100%);
  --gradient-bg-subtle: linear-gradient(180deg, 
    #f5f5f7 0%, 
    #ffffff 50%, 
    #f5f5f7 100%);
  --gradient-mesh: radial-gradient(at 20% 20%, rgba(30, 77, 140, 0.05) 0%, transparent 50%),
    radial-gradient(at 80% 20%, rgba(198, 147, 10, 0.04) 0%, transparent 50%),
    radial-gradient(at 50% 80%, rgba(30, 77, 140, 0.03) 0%, transparent 50%);
  --space-px: 1px;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);
  --space-4xl: var(--space-20);
  --space-5xl: var(--space-24);
  --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-display: var(--font-family);
  --font-family-mono: 'Geist Mono', 'SF Mono', Monaco, Consolas, monospace;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;
  --font-4xl: 2.25rem;
  --font-5xl: 3rem;
  --font-6xl: 3.75rem;
  --font-7xl: 4.5rem;
  --font-8xl: 6rem;
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.85;
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.08em;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;
  --shadow-xs: var(--ds-elevation-1);
  --shadow-sm: var(--ds-elevation-1);
  --shadow-md: var(--ds-elevation-2);
  --shadow-lg: var(--ds-elevation-3);
  --shadow-xl: var(--ds-elevation-4);
  --shadow-2xl: var(--ds-elevation-4);
  --shadow-blue: var(--ds-elevation-3);
  --shadow-blue-lg: var(--ds-elevation-3);
  --shadow-gold: 0 4px 14px rgba(198, 147, 10, 0.2),
    0 10px 30px rgba(198, 147, 10, 0.15);
  --shadow-gold-lg: 0 8px 24px rgba(198, 147, 10, 0.25),
    0 20px 50px rgba(198, 147, 10, 0.2);
  --shadow-purple: 0 4px 14px rgba(198, 147, 10, 0.2),
    0 10px 30px rgba(198, 147, 10, 0.15);
  --glow-blue: 0 0 40px rgba(66, 153, 225, 0.3);
  --glow-gold: 0 0 40px rgba(198, 147, 10, 0.3);
  --glow-purple: 0 0 40px rgba(198, 147, 10, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.06);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --z-behind: -1;
  --z-base: 1;
  --z-docked: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;
  --z-notification: 1700;
  --z-max: 9999;
  --container-max-width: 1400px;
  --container-padding: 24px;
  --container-padding-sm: 16px;
  --container-padding-lg: 32px;
  --container-padding-xl: 48px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --blur-none: 0;
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
  --form-bg: rgba(255, 255, 255, 0.95);
  --form-bg-focus: rgba(255, 255, 255, 1);
  --form-border: rgba(100, 116, 139, 0.2);
  --form-border-focus: #1e4d8c;
  --form-label: #64748b;
  --form-label-active: #1e4d8c;
  --form-text: #1e293b;
  --form-placeholder: #94a3b8;
  --form-error: #ef4444;
  --form-error-bg: rgba(239, 68, 68, 0.08);
  --form-error-glow: rgba(239, 68, 68, 0.25);
  --form-success: #10b981;
  --form-success-bg: rgba(16, 185, 129, 0.08);
  --form-success-glow: rgba(16, 185, 129, 0.25);
  --form-warning: #f59e0b;
  --whatsapp-primary: #25D366;
  --whatsapp-secondary: #128C7E;
  --whatsapp-glow: rgba(37, 211, 102, 0.35);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --shadow-form-subtle: var(--ds-elevation-1);
  --shadow-form-focus: var(--ds-elevation-2);
  --shadow-form-error: 0 0 0 4px var(--form-error-glow),
                         0 4px 16px rgba(239, 68, 68, 0.12);
  --shadow-form-success: 0 0 0 4px var(--form-success-glow),
                           0 4px 16px rgba(16, 185, 129, 0.12);
  --shadow-button-elevated: var(--ds-elevation-2);
  --menu-bg: #ffffff;
  --menu-text-primary: #2c3e50;
  --menu-text-secondary: #7f8c8d;
  --menu-accent: #1e4d8c;
  --menu-accent-secondary: #c6930a;
  --menu-accent-glow: rgba(30, 77, 140, 0.35);
  --menu-border: rgba(30, 77, 140, 0.12);
  --menu-hover-bg: rgba(30, 77, 140, 0.06);
  --pain-slow: #ef4444;
  --pain-conversion: #10b981;
  --pain-manage: #5c86cc;
  --pain-scale: #d97706;
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --shadow-menu-container: var(--ds-elevation-4);
  --shadow-nav-icon: var(--ds-elevation-2);
  --shadow-soriva-btn: 0 8px 32px rgba(30, 77, 140, 0.4),
                         0 4px 14px rgba(198, 147, 10, 0.3);
  --badge-primary: #FF4757;
  --badge-secondary: #FF6B7A;
  --badge-glow: rgba(255, 71, 87, 0.45);
  --benefit-gradient-start: #1e4d8c;
  --benefit-gradient-end: #d97706;
  --benefit-bg: rgba(255, 255, 255, 0.75);
  --benefit-border: rgba(255, 255, 255, 0.85);
  --slider-bg: #fafafa;
  --slider-card-bg: #e5e5e5;
  --slider-overlay: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 30%,
        transparent 60%
    );
  --testimonial-accent: #1e4d8c;
  --testimonial-accent-alt: #c6930a;
  --testimonial-star: #ffd700;
  --testimonial-bg: rgba(255, 255, 255, 0.75);
  --ease-netflix: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-3d-rotate: cubic-bezier(0.4, 0, 0.2, 1);
  --faq-accent: #1e4d8c;
  --faq-accent-alt: #c6930a;
  --faq-text-primary: #1a1a1a;
  --faq-text-secondary: #666666;
  --faq-text-body: #333333;
  --faq-bg: rgba(255, 255, 255, 0.75);
  --faq-bg-active: rgba(255, 255, 255, 0.96);
  --faq-border: rgba(0, 0, 0, 0.06);
  --faq-border-active: rgba(138, 43, 226, 0.28);
  --ai-hero-primary: #1e4d8c;
  --ai-hero-secondary: #c6930a;
  --ai-hero-text: #1a1a1a;
  --ai-hero-text-muted: #555555;
  --ai-hero-glow: rgba(30, 77, 140, 0.35);
  --ease-accordion: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-faq-card: var(--ds-elevation-3);
  --shadow-faq-hover: var(--ds-elevation-3);
  --shadow-faq-active: 0 18px 56px rgba(138, 43, 226, 0.2),
                         0 8px 20px rgba(0, 0, 0, 0.1),
                         inset 0 1px 0 rgba(255, 255, 255, 1);
  --phil-bg-start: #f5f7fa;
  --phil-bg-end: #c3cfe2;
  --phil-text-primary: #1a1a2e;
  --phil-text-secondary: #4a5568;
  --phil-accent: #1e4d8c;
  --phil-accent-alt: #c6930a;
  --phil-card-bg: rgba(255, 255, 255, 0.88);
  --phil-card-border: rgba(255, 255, 255, 0.35);
  --core-gradient-start: #1e4d8c;
  --core-gradient-end: #c6930a;
  --core-text: #ffffff;
  --core-text-muted: rgba(255, 255, 255, 0.88);
  --core-glass-bg: rgba(255, 255, 255, 0.15);
  --core-glass-border: rgba(255, 255, 255, 0.32);
  --ease-orbit: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-philosophy-card: var(--ds-elevation-3);
  --shadow-philosophy-hover: var(--ds-elevation-4);
  --shadow-core-card: var(--ds-elevation-3);
  --shadow-core-hover: var(--ds-elevation-4);
  --sbd-primary: #1e4d8c;
  --sbd-primary-dark: #5c86cc;
  --sbd-secondary: #c6930a;
  --sbd-accent: #c6930a;
  --sbd-accent-light: #ffd700;
  --sbd-gradient-primary: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%);
  --sbd-gradient-secondary: linear-gradient(135deg, #16386a 0%, #2d3748 100%);
  --sbd-gradient-accent: linear-gradient(135deg, #c6930a 0%, #d4a62a 100%);
  --sbd-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --sbd-text-primary: #1a202c;
  --sbd-text-secondary: #4a5568;
  --sbd-text-muted: #718096;
  --sbd-text-light: #a0aec0;
  --sbd-bg-dark: #0f1419;
  --sbd-bg-card: rgba(255, 255, 255, 0.98);
  --sbd-bg-glass: rgba(255, 255, 255, 0.1);
  --sbd-shadow-sm: var(--ds-elevation-1);
  --sbd-shadow-md: var(--ds-elevation-2);
  --sbd-shadow-lg: var(--ds-elevation-3);
  --sbd-shadow-xl: var(--ds-elevation-4);
  --sbd-shadow-glow: var(--ds-elevation-3);
  --sbd-shadow-card: var(--ds-elevation-3);
  --sbd-radius-sm: 8px;
  --sbd-radius-md: 12px;
  --sbd-radius-lg: 16px;
  --sbd-radius-xl: 24px;
  --sbd-radius-full: 9999px;
  --sbd-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --sbd-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --sbd-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --sbd-section-padding: 100px 0;
  --sbd-container-width: 1200px;
  --sbd-container-padding: 0 24px;
  --swd-gradient-mesh: radial-gradient(at 40% 20%, rgba(255, 255, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(255, 255, 255, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(255, 255, 255, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(198, 147, 10, 0.12) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 255, 255, 0.1) 0px, transparent 50%);
  --swd-glass-bg: rgba(255, 255, 255, 0.12);
  --swd-glass-border: rgba(255, 255, 255, 0.2);
  --swd-glass-blur: blur(20px);
  --rt-gradient-hero: linear-gradient(135deg, #f4f7fc, #f4f7fc);
  --rt-card-bg: rgba(255, 255, 255, 0.95);
  --rt-card-border: rgba(26, 54, 93, 0.08);
  --rt-card-shadow: var(--ds-elevation-2);
  --rt-card-shadow-hover: var(--ds-elevation-4);
  --rt-transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --rt-transition-fast: all 0.3s ease;

  /* ==========================================
     DESIGN SYSTEM — added in P2-3. All names are --ds-* prefixed:
     six unprefixed names (--radius-sm..3xl, --gradient-brand) were already
     taken, and redefining them shifted every existing radius up a step.
     These are the target scales. They are defined here so the values exist
     in one place; individual rules are migrated onto them in P2-6, where
     each section is reviewed rather than snapped in bulk.
     ========================================== */

  /* Radius — 7 steps replacing 27 ad-hoc values under 50px, plus pill/circle.
     Current usage peaks at 12, 14, 16, 20 and 24px; this scale keeps
     12/16/20/24 exact and moves nothing by more than 4px. */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;
  --ds-radius-2xl: 24px;
  --ds-radius-3xl: 32px;
  --ds-radius-pill: 999px;
  --ds-radius-circle: 50%;

  /* Elevation — 4 steps replacing 290 distinct box-shadow values.
     Tuned to navy rather than neutral black so shadows sit in the palette. */
  --ds-elevation-1: 0 1px 2px rgba(15, 39, 80, 0.06), 0 1px 3px rgba(15, 39, 80, 0.04);
  --ds-elevation-2: 0 2px 8px rgba(15, 39, 80, 0.07), 0 1px 3px rgba(15, 39, 80, 0.05);
  --ds-elevation-3: 0 8px 24px rgba(15, 39, 80, 0.09), 0 2px 6px rgba(15, 39, 80, 0.05);
  --ds-elevation-4: 0 20px 48px rgba(15, 39, 80, 0.12), 0 4px 12px rgba(15, 39, 80, 0.06);

  /* Brand ramp — the only two hues on the site. BillFlow's purple folded
     into this in P2-3; gold stays an accent, never a gradient partner to
     navy (blue-to-gold goes muddy through the middle). */
  --ds-brand-navy-050: #eef3fb;
  --ds-brand-navy-200: #a7c0ea;
  --ds-brand-navy-400: #3b6fc4;
  --ds-brand-navy-600: #1e4d8c;
  --ds-brand-navy-800: #16386a;
  --ds-brand-navy-900: #0f2750;
  --ds-brand-gold-100: #f7f0dc;
  --ds-brand-gold-400: #e0b341;
  --ds-brand-gold-600: #c6930a;
  --ds-brand-gold-800: #8a6708;
  --ds-gradient-brand: linear-gradient(135deg, var(--ds-brand-navy-400) 0%, var(--ds-brand-navy-600) 100%);

}

/**
 * ========================================
 * RISENEX - ULTRA POLISHED PREMIUM CSS
 * Version: 5.0 - Professional Grade
 * Blue (RISE) + Gold (NEX) Theme
 * ✨ ULTRA POLISHED BY CLAUDE
 * ========================================
 */

/* ==========================================
   CSS CUSTOM PROPERTIES (CSS VARIABLES)
   ========================================== */

/* ==========================================
   RESET & BASE STYLES - Enhanced
   ========================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  font-weight: var(--font-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  line-height: var(--leading-normal);
  padding-top: 120px;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Selection Styling */
::selection {
  background: rgba(49, 130, 206, 0.2);
  color: var(--color-primary);
}

::-moz-selection {
  background: rgba(49, 130, 206, 0.2);
  color: var(--color-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* ==========================================
   CONTAINER - GLOBAL
   ========================================== */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
  z-index: var(--z-base);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--container-padding-sm);
  }
}

/* ==========================================
   PREMIUM GRADIENT MARQUEE BAR - Ultra Polished
   ========================================== */





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





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



/* ==========================================
   GLASS MORPHISM NAVBAR - Premium
   ========================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
  padding: 8px 0;
  transform: translateY(0);
}
/* Hide on scroll down (Apple/Samsung style) */
.navbar.nav-hidden {
  transform: translateY(-120%);
}
/* When scrolled, add a subtle frosted blur so text stays readable */
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:  var(--ds-elevation-1);
}

.navbar::before {
  content: none;
}

.navbar.scrolled {
  background: var(--glass-bg-light);
  box-shadow: var(--glass-shadow);
  border-color: rgba(26, 54, 93, 0.06);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-8);
  padding: 0 var(--space-6);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  z-index: 2;
  flex-shrink: 0;
}

.nav-logo img {
  height: 72px;
  width: auto;
  transition: transform var(--transition-base), filter var(--transition-base);
}

.nav-logo:hover img {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 12px rgba(26, 54, 93, 0.15));
}

/* Desktop Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  justify-content: center;
}

.nav-item {
  position: relative;
  z-index: 10;
}

.nav-item::before,
.nav-item::after {
  pointer-events: none !important;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 15px;
  font-weight: 500;
  color: #1d1d1f;
  padding: 9px 20px;
  border-radius: var(--ds-radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast), font-weight var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.nav-link::before,
.nav-link::after {
  pointer-events: none !important;
}

.nav-link:hover {
  color: var(--color-primary);
  background: rgba(0, 0, 0, 0.04);
}

.nav-link.active {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
}

.dropdown-icon {
  transition: transform var(--transition-fast);
  color: var(--color-text-light);
  width: 14px;
  height: 14px;
}

.has-dropdown.is-open .dropdown-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* ==========================================
   MEGA DROPDOWN - Premium Slide Animation
   ========================================== */

.nav-dropdown,
.has-dropdown {
  position: relative;
}

.mega-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100%;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition: 
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    visibility 0.45s;
  z-index: calc(var(--z-dropdown) - 1);
  padding-top: 72px;
}

/* Click-driven only. The hover triggers that used to live here opened a
   position:fixed, 100vw panel anchored at top:0 — once visible its box
   covered the whole header, so .mega-dropdown:hover kept it open while the
   pointer was anywhere near the nav. That is what made it feel twitchy. */
.mega-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transform: translateY(0);
}

/* Dropdown Content */
.mega-dropdown-content {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: none;
  border-radius: 0 0 24px 24px;
  box-shadow:  var(--ds-elevation-3);
  padding: 96px max(48px, calc((100vw - 1320px) / 2)) 64px;
  display: grid;
  grid-template-columns: 220px 1fr 1.3fr;
  gap: var(--space-10);
  min-height: 460px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mega-dropdown-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 5%, 
    rgba(255, 255, 255, 0.6) 50%, 
    transparent 95%);
}

/* Left: Logo Section */
.mega-logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: transparent;
}

.mega-logo-section img {
  width: 300px;
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 8px 24px rgba(26, 54, 93, 0.12));
  transition: transform var(--transition-medium);
}

.mega-logo-section:hover img {
  transform: scale(1.02);
}

/* Center: Menu Items */
.mega-menu-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
}

.mega-menu-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
  transition: background-color var(--transition-base), transform var(--transition-base), color var(--transition-base);
  position: relative;
  overflow: hidden;
}

.menu-number {
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-light);
  background: var(--color-bg-tertiary);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), filter var(--transition-base), max-height var(--transition-base), width var(--transition-base), height var(--transition-base), top var(--transition-base), left var(--transition-base);
  flex-shrink: 0;
}

.mega-menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-brand);
  border-radius: 0 4px 4px 0;
  transform: scaleY(0);
  transition: transform var(--transition-base) var(--ease-premium);
}

.mega-menu-link:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  transform: translateX(6px);
}

.mega-menu-link:hover::before {
  transform: scaleY(1);
}

.mega-menu-link:hover .menu-number {
  background: var(--gradient-brand);
  color: white;
  transform: scale(1.08);
  box-shadow: var(--shadow-sm);
}

/* Right: Description */
.mega-description {
  position: relative;
  padding: var(--space-8);
  background: var(--gradient-bg-subtle);
  border-radius: var(--radius-2xl);
  min-height: 340px;
  overflow: hidden;
}

.mega-description::before {
  content: '';
  position: absolute;
  top: -100%;
  right: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle at center, 
    rgba(49, 130, 206, 0.06) 0%, 
    transparent 60%);
  animation: gentlePulse 6s ease-in-out infinite;
}

@keyframes gentlePulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.5; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 0.7; 
  }
}

.mega-desc-item {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  right: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: transform 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium);
  pointer-events: none;
  z-index: 1;
}

.mega-desc-item.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

.desc-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.desc-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  animation: iconFloat 4s ease-in-out infinite;
}

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

.desc-header h3 {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: var(--tracking-tight);
}

.mega-desc-item p {
  font-size: var(--font-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.desc-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feature-tag {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: white;
  color: var(--color-primary);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  border: 1px solid var(--glass-border);
}

.feature-tag:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--gradient-brand);
  color: white;
  border-color: transparent;
}

/* ==========================================
   MEET SORIVA BUTTON - Premium CTA
   ========================================== */

.btn-soriva-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.btn-soriva {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 26px;
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  color: white;
  background: #1e4d8c;
  border-radius: var(--radius-full);
  box-shadow: 
     var(--ds-elevation-2);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
  z-index: 1;
  letter-spacing: var(--tracking-wide);
}

.btn-soriva::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    #1e4d8c 0%, 
    #c6930a 50%, 
    #975a16 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: -1;
}

.btn-soriva::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.5s var(--ease-premium), height 0.5s var(--ease-premium);
}

.btn-soriva:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(198, 147, 10, 0.4),
    0 4px 8px rgba(198, 147, 10, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-soriva:hover::before {
  opacity: 1;
}

.btn-soriva:hover::after {
  width: 300px;
  height: 300px;
}

.btn-soriva:active {
  transform: translateY(0);
  box-shadow: 
    0 4px 12px rgba(198, 147, 10, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-arrow {
  transition: transform var(--transition-base);
  width: 16px;
  height: 16px;
}

.btn-soriva:hover .btn-arrow {
  transform: translateX(3px);
}

.btn-tagline {
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================
   RESPONSIVE - Mega Dropdown
   ========================================== */

@media (max-width: 1024px) {
  .mega-dropdown {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
  }
  
  .mega-dropdown-content {
    grid-template-columns: 1fr;
    padding: var(--space-6);
    min-height: auto;
    gap: var(--space-6);
  }
  
  .mega-logo-section {
    display: none;
  }
  
  .mega-description {
    min-height: 200px;
  }
}

@media (max-width: 768px) {
  .nav-wrapper {
    height: 64px;
    padding: 0 var(--space-4);
  }
  
  .nav-logo img {
    height: 56px;
  }
  
  .btn-soriva {
    padding: 10px 20px;
    font-size: var(--font-sm);
  }
}

/* ==========================================
   UTILITY CLASSES - Brand Colors
   ========================================== */



















/* ==========================================
   MOBILE TOGGLE
   ========================================== */

/* ==========================================
   HERO SECTION - ULTRA PREMIUM
   ========================================== */
/* ==========================================
   RISENEX CSS - PART 2 (ULTRA POLISHED)
   Hero | Vision | Services Sections
   ========================================== */

/* ==========================================
   HERO SECTION - PREMIUM ENTRANCE
   ========================================== */

.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(30, 77, 140, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(59, 111, 196, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 50% 100%, rgba(198, 147, 10, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fc 50%, #f4f7fc 100%);
  position: relative;
  overflow: hidden;
  z-index: var(--z-base);
}

/* Animated Grid Background */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(30, 77, 140, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 77, 140, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-flow 25s linear infinite;
  opacity: 0.5;
  z-index: 1;
  will-change: transform;
}

@keyframes grid-flow {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(60px) translateX(30px); }
}

/* Top Light Orb */
.hero-section::after {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: 
    radial-gradient(circle, rgba(30, 77, 140, 0.15) 0%, rgba(59, 111, 196, 0.08) 30%, transparent 70%);
  animation: light-pulse 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  will-change: opacity, transform;
}

@keyframes light-pulse {
  0%, 100% { 
    opacity: 0.4; 
    transform: translateX(-50%) scale(1); 
    filter: blur(0px);
  }
  50% { 
    opacity: 0.7; 
    transform: translateX(-50%) scale(1.15); 
    filter: blur(10px);
  }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .hero-section::before,
  .hero-section::after,
  .floating-card,
  .gradient-blob {
    animation: none !important;
  }
}

/* Hero Grid Layout */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.hero-left {
  padding-right: 40px;
}

/* Hero Title - Premium Typography */
.hero-title {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 28px;
  color: var(--color-text-primary);
  letter-spacing: -0.045em;
  text-shadow: 0 4px 40px rgba(30, 77, 140, 0.06);
}

.hero-title .title-intro {
  display: block;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  text-transform: uppercase;
  opacity: 0.9;
  position: relative;
  padding-left: 20px;
}

.hero-title .title-intro::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--gradient-primary);
  border-radius: 50%;
  box-shadow:  var(--ds-elevation-2);
}

/* Gradient Text Highlight */
.gradient-highlight {
  display: block;
  background: linear-gradient(
    135deg, 
    #1e4d8c 0%, 
    #1a4179 50%, 
    #3b6fc4 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
  animation: gradient-shift 8s ease infinite;
  margin-top: 10px;
  will-change: background-position;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Hero Subtitle */
.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.75;
  color: #64748b;
  margin-bottom: 44px;
  max-width: 540px;
  font-weight: 450;
}

/* Hero CTA Buttons */
.hero-cta {
  display: flex;
  gap: 16px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

/* Button Base Styles */
.btn {
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 1rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: none;
  text-decoration: none;
  isolation: isolate;
}

/* Button Shine Effect */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent
  );
  transition: left 0.6s ease;
  z-index: 1;
}

.btn:hover::before {
  left: 100%;
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 50%, #1a4179 100%);
  background-size: 200% 200%;
  color: white;
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  background-position: 100% 50%;
}

.btn-primary:active {
  transform: translateY(-2px) scale(1.01);
}

.btn-primary svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary:hover svg {
  transform: translateX(6px);
}

/* Secondary Button */
.btn-secondary {
  background: rgba(30, 77, 140, 0.06);
  color: var(--color-primary);
  border: 2px solid rgba(30, 77, 140, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-secondary:hover {
  background: rgba(30, 77, 140, 0.12);
  border-color: rgba(30, 77, 140, 0.4);
  transform: translateY(-4px);
  box-shadow: 
     var(--ds-elevation-2), inset 0 0 0 1px rgba(30, 77, 140, 0.1);
}

.btn-large {
  padding: 18px 38px;
  font-size: 1.1rem;
}

/* Hero Features Bar */
.hero-features {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 22px 32px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(2deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-features:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-4px);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #475569;
  font-weight: 600;
  transition: transform 0.3s ease, color 0.3s ease;
}

.feature-item:hover {
  color: var(--color-primary);
  transform: translateX(4px);
}

.feature-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(30, 77, 140, 0.5));
  transition: transform 0.3s ease;
}

.feature-item:hover svg {
  transform: scale(1.15) rotate(-5deg);
}

/* ==========================================
   HERO RIGHT - VISUAL SHOWCASE
   ========================================== */

.hero-right {
  position: relative;
  height: 680px;
  perspective: 1200px;
}

.visual-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Floating Cards - Premium Glass */
.floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 28px 36px;
  box-shadow: 
     var(--ds-elevation-4), inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  z-index: var(--z-base);
  will-change: transform;
}

/* Card Hover Glow */
.floating-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(30, 77, 140, 0.3), rgba(59, 111, 196, 0.3));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.floating-card:hover::after {
  opacity: 1;
}

/* Card Shine Effect */
.floating-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.7), 
    transparent
  );
  transition: left 0.6s ease;
  border-radius: 24px;
  z-index: 1;
}

.floating-card:hover::before {
  left: 100%;
}

.floating-card:hover {
  transform: translateY(-20px) scale(1.08) rotateZ(3deg);
  box-shadow: 
     var(--ds-elevation-4), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}

.card-icon {
  font-size: 3.2rem;
  filter: drop-shadow(0 6px 15px rgba(30, 77, 140, 0.35));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-card:hover .card-icon {
  transform: scale(1.2) rotateZ(-8deg) translateY(-5px);
}

.card-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* Card Positions & Animations */
.card-1 { 
  top: 6%; 
  left: 8%; 
  animation: float-1 8s ease-in-out infinite; 
  z-index: 5; 
}
.card-2 { 
  top: 3%; 
  right: 6%; 
  animation: float-2 9s ease-in-out infinite; 
  z-index: 4; 
}
.card-3 { 
  top: 46%; 
  left: 0%; 
  animation: float-3 7s ease-in-out infinite; 
  z-index: 3; 
}
.card-4 { 
  top: 42%; 
  right: 3%; 
  animation: float-1 8.5s ease-in-out infinite 0.5s; 
  z-index: 6; 
}
.card-5 { 
  bottom: 8%; 
  left: 25%; 
  animation: float-2 7.5s ease-in-out infinite 1s; 
  z-index: 7; 
}

@keyframes float-1 {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  25% { transform: translateY(-15px) rotate(0deg); }
  50% { transform: translateY(-28px) rotate(2deg); }
  75% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes float-2 {
  0%, 100% { transform: translateY(0px) rotate(2deg); }
  25% { transform: translateY(-20px) rotate(0deg); }
  50% { transform: translateY(-32px) rotate(-2deg); }
  75% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes float-3 {
  0%, 100% { transform: translateY(0px) rotate(-3deg); }
  33% { transform: translateY(-25px) rotate(1deg); }
  66% { transform: translateY(-18px) rotate(3deg); }
}

/* Center Orb - Pulsing Energy */
.center-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  z-index: 1;
  pointer-events: none;
}

.orb-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

.ring-1 {
  width: 100%;
  height: 100%;
  border-color: rgba(30, 77, 140, 0.6);
  animation: pulse-ring-1 5s ease-in-out infinite;
}

.ring-2 {
  width: 80%;
  height: 80%;
  border-color: rgba(59, 111, 196, 0.55);
  animation: pulse-ring-2 5s ease-in-out infinite 0.8s;
}

.ring-3 {
  width: 60%;
  height: 60%;
  border-color: rgba(198, 147, 10, 0.5);
  animation: pulse-ring-3 5s ease-in-out infinite 1.6s;
}

@keyframes pulse-ring-1 {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(0.9); 
    opacity: 0; 
    border-width: 3px; 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.25); 
    opacity: 0.6; 
    border-width: 1px; 
  }
}

@keyframes pulse-ring-2 {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(0.9); 
    opacity: 0; 
    border-width: 3px; 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.3); 
    opacity: 0.5; 
    border-width: 1px; 
  }
}

@keyframes pulse-ring-3 {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(0.9); 
    opacity: 0; 
    border-width: 3px; 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.35); 
    opacity: 0.45; 
    border-width: 1px; 
  }
}

.orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle, 
    rgba(30, 77, 140, 0.5) 0%, 
    rgba(59, 111, 196, 0.3) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: glow-pulse 6s ease-in-out infinite;
  filter: blur(30px);
  will-change: transform, opacity;
}

@keyframes glow-pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1); 
    opacity: 0.5; 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.4); 
    opacity: 0.8; 
  }
}

/* Gradient Blobs */
.gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.15;
  animation: blob-float 25s ease-in-out infinite;
  mix-blend-mode: multiply;
  will-change: transform;
  pointer-events: none;
}

.blob-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #1e4d8c, #3b6fc4);
  top: 5%;
  right: 0%;
}

.blob-2 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #3b6fc4, #c6930a);
  bottom: 5%;
  left: 5%;
  animation-delay: 4s;
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(50px, -50px) scale(1.1) rotate(5deg); }
  50% { transform: translate(-30px, 40px) scale(0.95) rotate(-3deg); }
  75% { transform: translate(25px, -25px) scale(1.05) rotate(2deg); }
}

/* ==========================================
   VISION SECTION - BRAND STORY
   ========================================== */

.vision-section {
  padding: 140px 0;
  background: 
    radial-gradient(ellipse 60% 40% at 30% 50%, rgba(30, 77, 140, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #f4f7fc 0%, #ffffff 50%, #f4f7fc 100%);
  position: relative;
  overflow: hidden;
}

.vision-grid {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 80px;
  align-items: center;
}

.vision-left {
  position: relative;
  height: 520px;
}

.vision-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central Orb - Vision */
.central-orb {
  position: relative;
  width: 280px;
  height: 280px;
}

.orb-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle, 
    rgba(30, 77, 140, 0.25) 0%, 
    rgba(59, 111, 196, 0.1) 50%,
    transparent 70%
  );
  animation: orb-pulse 5s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes orb-pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1); 
    opacity: 0.9; 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.4); 
    opacity: 0.3; 
  }
}

.orb-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1e4d8c, #1e4d8c);
  filter: blur(25px);
  animation: orb-glow-rotate 8s linear infinite;
  will-change: transform;
}

@keyframes orb-glow-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Spark Lines - Energy Rays */
.spark-line {
  position: absolute;
  width: 3px;
  height: 0;
  border-radius: 4px;
  background: linear-gradient(
    180deg, 
    rgba(30, 77, 140, 0.9) 0%,
    rgba(59, 111, 196, 0.5) 50%,
    transparent 100%
  );
  animation: spark-shoot 4s ease-out infinite;
  transform-origin: top center;
  will-change: height, opacity;
}

.line-1 { 
  top: 8%; 
  left: 50%; 
  transform: translateX(-50%);
}
.line-2 { 
  top: 50%; 
  right: 8%; 
  transform: translateY(-50%) rotate(90deg);
  animation-delay: 1s;
}
.line-3 { 
  bottom: 8%; 
  left: 50%; 
  transform: translateX(-50%) rotate(180deg);
  animation-delay: 2s;
}
.line-4 { 
  top: 50%; 
  left: 8%; 
  transform: translateY(-50%) rotate(270deg);
  animation-delay: 3s;
}

@keyframes spark-shoot {
  0% { 
    height: 0; 
    opacity: 0;
  }
  10% { 
    opacity: 1; 
  }
  40% { 
    height: 120px; 
    opacity: 1;
  }
  100% { 
    height: 180px; 
    opacity: 0;
  }
}

/* Vision Content */
.vision-right {
  padding-left: 40px;
}

.vision-title {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin-bottom: 24px;
  letter-spacing: -0.04em;
}

.vision-highlight {
  display: block;
  background: linear-gradient(135deg, #1e4d8c, #c6930a);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(30, 77, 140, 0.25));
  animation: gradient-shift 6s ease infinite;
  margin-top: 8px;
}

.vision-description {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #64748b;
  margin-bottom: 44px;
  font-style: italic;
  position: relative;
  padding-left: 24px;
}

.vision-description::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -5px;
  font-size: 2.5rem;
  color: rgba(30, 77, 140, 0.3);
  font-family: Georgia, serif;
}

/* Core Values Grid */
.core-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1000px;
}

/* Value Card - Premium Glass */
.value-card {
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

/* Card Gradient Border on Hover */
.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, #1e4d8c, #3b6fc4, #c6930a);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.value-card:hover::before {
  opacity: 1;
}

/* Card Shine */
.value-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.6), 
    transparent
  );
  transition: left 0.7s ease;
}

.value-card:hover::after {
  left: 100%;
}

.value-card:hover {
  transform: translateY(-15px) translateZ(25px) rotateX(5deg);
  box-shadow: 
     var(--ds-elevation-4), inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
}

.value-icon {
  font-size: 2.6rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(30, 77, 140, 0.3));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.value-card:hover .value-icon {
  transform: scale(1.2) translateY(-8px) rotateZ(-8deg);
}

.value-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.value-text {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.6;
}

/* ==========================================
   SERVICES SECTION - 3D FLIP CARDS
   ========================================== */

.services-section {
  padding: 140px 20px;
  position: relative;
  z-index: var(--z-base);
  background: 
    radial-gradient(ellipse 50% 50% at 50% 0%, rgba(30, 77, 140, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fc 50%, #ffffff 100%);
  overflow: hidden;
}

/* Section Header - Universal */
.section-header {
  text-align: center;
  margin-bottom: 80px;
  animation: fadeInUp 0.8s ease-out;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, rgba(30, 77, 140, 0.08) 0%, rgba(59, 111, 196, 0.08) 100%);
  border: 2px solid rgba(30, 77, 140, 0.15);
  border-radius: var(--ds-radius-pill);
  color: #1e4d8c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.section-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: shimmer 4s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}

.section-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, #122d55, #3b6fc4);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 20px 0;
  line-height: 1.15;
  letter-spacing: -0.03em;
  animation: gradient-shift 8s ease infinite;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
  font-weight: 450;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Service Card - 3D Flip Container */
.service-card {
  position: relative;
  height: 620px;
  perspective: 1200px;
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.service-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* Card Faces */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 24px;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Front Card - Premium Glass */
.card-front {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
     var(--ds-elevation-3), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* Gradient Border - Front */
.card-front::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 50%, #c6930a 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.2;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.service-card:hover .card-front::before {
  opacity: 0.5;
}

/* Back Card - Gradient */
.card-back {
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 50%, #1a4179 100%);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
  transform: rotateY(180deg);
}

/* Service Icon */
.service-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  padding: 16px;
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 50%, #1a4179 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotateZ(-5deg);
}

.service-icon svg {
  width: 100%;
  height: 100%;
  stroke: #ffffff;
  stroke-width: 1.5;
}

.service-title {
  font-size: 1.35rem;
  font-weight: 750;
  color: #1e293b;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.service-brief {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Hover Indicator */
.hover-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
}

.hover-indicator span {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.hover-indicator span::after {
  content: '→';
  display: inline-block;
  animation: moveArrow 1.5s ease-in-out infinite;
  color: #1e4d8c;
}

@keyframes moveArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* Back Card Content */
.back-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.service-description {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.75;
  text-align: left;
  margin-bottom: 24px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Custom Scrollbar for Description */
.service-description::-webkit-scrollbar {
  width: 4px;
}

.service-description::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.service-description::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}

.service-description::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* ==========================================
   RESPONSIVE - PART 2
   ========================================== */

@media (max-width: 1200px) {
  .hero-grid {
    gap: 50px;
  }
  
  .hero-right {
    height: 550px;
  }
  
  .vision-grid {
    gap: 50px;
  }
}

@media (max-width: 992px) {
  .hero-section {
    padding: 120px 0 80px;
    min-height: auto;
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }
  
  .hero-left {
    padding-right: 0;
    order: 1;
  }
  
  .hero-right {
    order: 2;
    height: 450px;
  }
  
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-cta {
    justify-content: center;
  }
  
  .hero-features {
    justify-content: center;
  }
  
  .hero-title .title-intro {
    padding-left: 0;
  }
  
  .hero-title .title-intro::before {
    display: none;
  }
  
  .vision-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .vision-left {
    height: 350px;
    order: 1;
  }
  
  .vision-right {
    padding-left: 0;
    order: 2;
  }
  
  .vision-description {
    padding-left: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .vision-description::before {
    display: none;
  }
  
  .core-values {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 100px 0 60px;
  }
  
  .hero-right {
    height: 380px;
  }
  
  .floating-card {
    padding: 18px 24px;
    border-radius: 16px;
  }
  
  .card-icon {
    font-size: 2.2rem;
  }
  
  .card-label {
    font-size: 0.85rem;
  }
  
  .center-orb {
    width: 280px;
    height: 280px;
  }
  
  .hero-features {
    padding: 16px 20px;
    gap: 16px;
  }
  
  .services-section {
    padding: 80px 16px;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .service-card {
    height: 580px;
  }
  
  .core-values {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 90px 0 50px;
  }
  
  .hero-right {
    height: 320px;
  }
  
  .floating-card {
    padding: 14px 18px;
  }
  
  .card-icon {
    font-size: 1.8rem;
  }
  
  .card-label {
    font-size: 0.75rem;
  }
  
  .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
  
  .btn-large {
    padding: 14px 28px;
  }
  
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  
  .feature-item {
    font-size: 0.8rem;
  }
  
  .service-card {
    height: 540px;
  }
  
  .card-front,
  .card-back {
    padding: 30px 20px;
  }
}
/* ==========================================
   RISENEX CSS - PART 3 (ULTRA POLISHED)
   Process | Timeline | Tech Ecosystem
   ========================================== */

/* ==========================================
   SHARED COMPONENTS - ENHANCED
   ========================================== */

/* Custom Scrollbar - Premium Glass */
.service-description::-webkit-scrollbar {
  width: 5px;
}

.service-description::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.service-description::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
  border-radius: 8px;
  transition: background 0.3s ease;
}

.service-description::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
}

/* Tech Stack Tags */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: auto;
}

.tech-tag {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  font-size: 11px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-tag:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow:  var(--ds-elevation-2);
}

/* ==========================================
   FLOATING BACKGROUND ELEMENTS
   ========================================== */

.floating-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(80px);
  animation: float-ambient 25s infinite ease-in-out;
  will-change: transform;
}

.floating-circle:nth-child(1) {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 100%);
  top: -150px;
  left: -150px;
  animation-delay: 0s;
}

.floating-circle:nth-child(2) {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #c6930a 0%, #f472b6 100%);
  bottom: -200px;
  right: -200px;
  animation-delay: 8s;
}

.floating-circle:nth-child(3) {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
  top: 45%;
  left: 45%;
  animation-delay: 16s;
}

@keyframes float-ambient {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  20% {
    transform: translate(80px, -60px) scale(1.08) rotate(5deg);
  }
  40% {
    transform: translate(-60px, 80px) scale(0.95) rotate(-3deg);
  }
  60% {
    transform: translate(40px, 40px) scale(1.05) rotate(2deg);
  }
  80% {
    transform: translate(-40px, -40px) scale(0.98) rotate(-2deg);
  }
}

/* Service Card Glow Effect */
.service-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    135deg, 
    rgba(30, 77, 140, 0.25) 0%, 
    rgba(59, 111, 196, 0.2) 50%,
    rgba(198, 147, 10, 0.15) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 24px;
  pointer-events: none;
  z-index: -1;
  filter: blur(15px);
}

.service-card:hover::after {
  opacity: 1;
}

/* ==========================================
   PROCESS SECTION - PREMIUM WHITE THEME
   ========================================== */

.process-section {
  padding: 140px 0;
  background: 
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(59, 111, 196, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fc 50%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

/* Animated Background Orbs */
.process-section::before {
  content: '';
  position: absolute;
  top: -250px;
  right: -250px;
  width: 650px;
  height: 650px;
  background: radial-gradient(
    circle, 
    rgba(59, 111, 196, 0.08) 0%, 
    rgba(59, 111, 196, 0.03) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: floatOrb 25s ease-in-out infinite;
  will-change: transform;
}

.process-section::after {
  content: '';
  position: absolute;
  bottom: -350px;
  left: -350px;
  width: 750px;
  height: 750px;
  background: radial-gradient(
    circle, 
    rgba(6, 182, 212, 0.07) 0%, 
    rgba(6, 182, 212, 0.02) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: floatOrb 30s ease-in-out infinite reverse;
  will-change: transform;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(60px, -60px) scale(1.08); }
  50% { transform: translate(-40px, 40px) scale(0.95); }
  75% { transform: translate(50px, 70px) scale(1.03); }
}

/* ==========================================
   WHY CHOOSE US GRID - PREMIUM CARDS
   ========================================== */

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-bottom: 120px;
}

.choose-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 1);
  will-change: transform, box-shadow;
}

/* Animated Top Border */
.choose-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1e4d8c, #1e4d8c);
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 24px 24px 0 0;
}

.choose-card:hover::before {
  transform: scaleX(1);
  animation: gradientSlide 3s linear infinite;
}

@keyframes gradientSlide {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* Glow Effect Behind Card */
.choose-card::after {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, #3b6fc4, #06b6d4, #3b6fc4);
  background-size: 200% 200%;
  border-radius: 32px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
  filter: blur(20px);
  animation: gradientRotate 4s ease infinite paused;
}

.choose-card:hover::after {
  opacity: 0.25;
  animation-play-state: running;
}

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

.choose-card:hover {
  transform: translateY(-16px) scale(1.02);
  border-color: rgba(59, 111, 196, 0.2);
  box-shadow: 
    0 32px 64px rgba(59, 111, 196, 0.12),
    0 16px 32px rgba(6, 182, 212, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Card Number Watermark */
.choose-number {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 80px;
  font-weight: 900;
  background: linear-gradient(180deg, #eef3fb 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  opacity: 0.6;
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, filter 0.5s ease, max-height 0.5s ease, width 0.5s ease, height 0.5s ease, top 0.5s ease, left 0.5s ease;
}

.choose-card:hover .choose-number {
  opacity: 0.8;
  transform: scale(1.1) rotate(5deg);
}

/* Card Icon */
.choose-icon {
  font-size: 58px;
  margin-bottom: 28px;
  display: inline-block;
  filter: drop-shadow(0 6px 16px rgba(59, 111, 196, 0.25));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, filter;
}

.choose-card:hover .choose-icon {
  transform: scale(1.18) rotate(-8deg) translateY(-5px);
  filter: drop-shadow(0 12px 24px rgba(59, 111, 196, 0.4));
}

.choose-card h3 {
  font-size: 1.4rem;
  font-weight: 750;
  color: #1e293b;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.choose-card p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.8;
  margin: 0;
  font-weight: 480;
}

/* ==========================================
   TIMELINE WRAPPER - ENHANCED
   ========================================== */

.process-timeline-wrapper {
  margin-top: 120px;
  position: relative;
}

.timeline-title {
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 3.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, #122d55, #06b6d4);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px 0;
  letter-spacing: -0.03em;
  animation: gradient-shift 8s ease infinite;
}

.timeline-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: #64748b;
  margin: 0 0 80px 0;
  font-weight: 480;
}

/* ==========================================
   PROGRESS BAR - PREMIUM GLASS
   ========================================== */

.timeline-progress {
  position: relative;
  max-width: 680px;
  margin: 0 auto 110px;
  height: 8px;
}

.progress-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #e2e8f0, #eef3fb);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 
     var(--ds-elevation-1), inset 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Animated Progress Fill */
.progress-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, #1e4d8c, #22d3ee);
  background-size: 200% 100%;
  border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 0 20px rgba(59, 111, 196, 0.5),
    0 0 40px rgba(6, 182, 212, 0.3);
  will-change: width;
  animation: progressGlow 2s ease-in-out infinite;
}

@keyframes progressGlow {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(59, 111, 196, 0.5),
      0 0 40px rgba(6, 182, 212, 0.3);
  }
  50% { 
    box-shadow: 
      0 0 30px rgba(59, 111, 196, 0.7),
      0 0 60px rgba(6, 182, 212, 0.5);
  }
}

/* Progress Dots Container */
.progress-dots {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}

/* Individual Progress Dot */
.progress-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #e2e8f0;
  position: relative;
  transition: background-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 1);
  will-change: transform;
}

/* Ripple Effect Container */
.progress-dot::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle, 
    rgba(59, 111, 196, 0.25) 0%, 
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Inner Dot */
.progress-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b6fc4, #06b6d4);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:  var(--ds-elevation-1);
}

/* Active Dot State */
.progress-dot.active {
  background: #ffffff;
  border-color: #3b6fc4;
  transform: scale(1.4);
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.progress-dot.active::before {
  opacity: 1;
  animation: rippleSmooth 2.5s ease-out infinite;
}

.progress-dot.active::after {
  transform: translate(-50%, -50%) scale(1);
}

@keyframes rippleSmooth {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(2.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Completed Dot State */
.progress-dot.completed {
  border-color: #06b6d4;
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
}

.progress-dot.completed::after {
  transform: translate(-50%, -50%) scale(1);
  background: #ffffff;
}

/* Hover State */
.progress-dot:hover {
  transform: scale(1.5);
  border-color: #a7c0ea;
  box-shadow: 
     var(--ds-elevation-2);
}

/* ==========================================
   TIMELINE DECK - 3D CARD STACK
   ========================================== */

.timeline-deck {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  height: 680px;
  perspective: 2800px;
  perspective-origin: center 55%;
}

/* Timeline Card Base */
.timeline-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 32px;
  padding: 52px 48px;
  
  /* Default hidden state */
  transform: translateX(150%) translateZ(0) scale(0.9);
  opacity: 0;
  pointer-events: none;
  
  /* Let JavaScript handle transitions */
  transition: none;
  
  box-shadow: 
     var(--ds-elevation-4), inset 0 1px 0 rgba(255, 255, 255, 1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 1;
}

/* Active Card State */
.timeline-card.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
  border-color: rgba(59, 111, 196, 0.15);
  box-shadow: 
    0 50px 100px rgba(59, 111, 196, 0.12),
    0 25px 60px rgba(6, 182, 212, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Card Glow Effect */
.card-glow {
  position: absolute;
  inset: -6px;
  background: linear-gradient(
    135deg,
    rgba(30, 77, 140, 0.15) 0%,
    rgba(59, 111, 196, 0.12) 50%,
    rgba(6, 182, 212, 0.1) 100%
  );
  background-size: 200% 200%;
  border-radius: 32px;
  opacity: 0;
  filter: blur(25px);
  transition: opacity 0.6s ease-out;
  z-index: -1;
}

.timeline-card.active .card-glow {
  opacity: 0.7;
  animation: gradientRotate 10s ease infinite;
}

/* Card Inner Content */
.card-inner {
  position: relative;
  z-index: 1;
}

/* Card Header */
.card-header {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 36px;
}

/* Step Badge */
.step-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 50%, #06b6d4 100%);
  background-size: 200% 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  flex-shrink: 0;
  animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { 
    box-shadow: 
       var(--ds-elevation-3);
  }
  50% { 
    box-shadow: 
       var(--ds-elevation-3);
  }
}

.step-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Step Icon */
.step-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(14, 165, 233, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b6fc4;
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step-icon:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.step-icon svg {
  stroke: currentColor;
  filter: drop-shadow(0 2px 6px rgba(14, 165, 233, 0.35));
}

/* Card Title */
.card-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 850;
  color: #1e293b;
  margin: 0 0 22px 0;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

/* Card Description */
.card-description {
  font-size: 1.2rem;
  color: #475569;
  line-height: 1.85;
  margin: 0 0 36px 0;
  font-weight: 480;
}

/* Card Features List */
.card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-features li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1rem;
  color: #334155;
  font-weight: 600;
  padding: 20px 24px;
  
  /* Premium Glass Effect */
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 1);
  
  transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* Hover Accent Line */
.card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #1e4d8c, #06b6d4);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 0 4px 4px 0;
}

.card-features li:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-4px) translateX(8px);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.card-features li:hover::before {
  transform: scaleY(1);
}

.card-features li svg {
  flex-shrink: 0;
  stroke: #06b6d4;
  transition: transform 0.3s ease, stroke 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(6, 182, 212, 0.3));
}

.card-features li:hover svg {
  stroke: #1e4d8c;
  transform: scale(1.15) rotate(-5deg);
}

/* ==========================================
   NAVIGATION BUTTONS - PREMIUM
   ========================================== */

.timeline-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 80px;
}

.nav-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 2px solid rgba(226, 232, 240, 0.8);
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 1);
  will-change: transform;
}

/* Gradient Background on Hover */
.nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 50%, #06b6d4 100%);
  opacity: 0;
  transition: opacity 0.4s ease-out;
  border-radius: 50%;
}

.nav-btn:hover::before {
  opacity: 1;
}

.nav-btn:hover {
  transform: scale(1.18) translateY(-5px);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nav-btn svg {
  position: relative;
  z-index: 1;
  stroke: currentColor;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-btn:hover svg {
  transform: scale(1.15);
}

/* Active Press State */
.nav-btn:active {
  transform: scale(1.05) translateY(-2px);
  transition: transform 0.1s ease;
}

/* Disabled State */
.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.nav-btn:disabled:hover::before {
  opacity: 0;
}

/* ==========================================
   TECH ECOSYSTEM SECTION - PREMIUM
   ========================================== */

.tech-ecosystem-section {
  padding: 140px 0;
  position: relative;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(30, 77, 140, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 70% 70%, rgba(198, 147, 10, 0.05) 0%, transparent 60%),
    linear-gradient(135deg, #f4f7fc 0%, #eef3fb 50%, #dde7f6 100%);
}

/* Animated Background Layers */
.tech-ecosystem-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(30, 77, 140, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(198, 147, 10, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(59, 111, 196, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundPulse 15s ease-in-out infinite;
}

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

/* Floating Grid Pattern */
.tech-ecosystem-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(30, 77, 140, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 77, 140, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ==========================================
   RESPONSIVE DESIGN - PART 3
   ========================================== */

@media (max-width: 1200px) {
  .timeline-deck {
    max-width: 650px;
  }
  
  .timeline-card {
    padding: 44px 40px;
  }
  
  .why-choose-grid {
    gap: 24px;
  }
}

@media (max-width: 992px) {
  .process-section {
    padding: 100px 0;
  }
  
  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 80px;
  }
  
  .process-timeline-wrapper {
    margin-top: 80px;
  }
  
  .timeline-deck {
    height: 720px;
    max-width: 100%;
  }
  
  .timeline-card {
    padding: 40px 32px;
  }
  
  .card-title {
    font-size: 1.6rem;
  }
  
  .card-description {
    font-size: 1.05rem;
  }
}

@media (max-width: 768px) {
  .process-section {
    padding: 80px 0;
  }
  
  .why-choose-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 70px;
  }
  
  .choose-card {
    padding: 36px 28px;
  }
  
  .choose-number {
    font-size: 60px;
  }
  
  .choose-icon {
    font-size: 48px;
  }
  
  .timeline-title {
    font-size: 2rem;
  }
  
  .timeline-subtitle {
    font-size: 1rem;
    margin-bottom: 60px;
  }
  
  .timeline-deck {
    height: 750px;
    perspective: 1800px;
  }
  
  .timeline-card {
    padding: 36px 24px;
    border-radius: 24px;
  }
  
  .timeline-card.active {
    transform: translateX(-50%) translateZ(15px) scale(1);
  }
  
  .card-header {
    gap: 18px;
    margin-bottom: 28px;
  }
  
  .step-badge,
  .step-icon {
    width: 58px;
    height: 58px;
  }
  
  .step-number {
    font-size: 1.4rem;
  }
  
  .card-title {
    font-size: 1.4rem;
  }
  
  .card-description {
    font-size: 0.95rem;
    margin-bottom: 28px;
  }
  
  .card-features li {
    padding: 16px 20px;
    font-size: 0.9rem;
    gap: 12px;
  }
  
  .timeline-progress {
    margin-bottom: 80px;
  }
  
  .nav-btn {
    width: 58px;
    height: 58px;
  }
  
  .timeline-nav {
    gap: 20px;
    margin-top: 60px;
  }
  
  .tech-ecosystem-section {
    padding: 80px 0;
  }
  
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .process-section {
    padding: 60px 0;
  }
  
  .choose-card {
    padding: 28px 22px;
  }
  
  .choose-card h3 {
    font-size: 1.2rem;
  }
  
  .choose-card p {
    font-size: 0.9rem;
  }
  
  .timeline-deck {
    height: 800px;
  }
  
  .timeline-card {
    padding: 28px 20px;
    border-radius: 20px;
  }
  
  .card-title {
    font-size: 1.25rem;
  }
  
  .card-description {
    font-size: 0.9rem;
  }
  
  .step-badge,
  .step-icon {
    width: 50px;
    height: 50px;
  }
  
  .step-number {
    font-size: 1.2rem;
  }
  
  .nav-btn {
    width: 52px;
    height: 52px;
  }
  
  .card-features li {
    padding: 14px 16px;
    font-size: 0.85rem;
    border-radius: 12px;
  }
  
  .progress-dot {
    width: 18px;
    height: 18px;
  }
  
  .progress-dot.active {
    transform: scale(1.3);
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */






.visible { display: block !important; }

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .floating-circle,
  .process-section::before,
  .process-section::after,
  .choose-card::before,
  .choose-card::after,
  .progress-dot::before,
  .card-glow,
  .step-badge {
    animation: none !important;
  }
  
  .timeline-card,
  .choose-card,
  .nav-btn,
  .progress-dot {
    transition-duration: 0.2s !important;
  }
}
/* ============================================
   SECTION HEADER
/* ==========================================
   RISENEX CSS - PART 4 (ULTRA POLISHED)
   Tech Ecosystem Bento Grid | SORIVA Animation
   ========================================== */

/* ==========================================
   SECTION HEADER - UNIVERSAL PREMIUM
   ========================================== */

.section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1e4d8c;
  background: linear-gradient(
    135deg, 
    rgba(30, 77, 140, 0.08) 0%, 
    rgba(59, 111, 196, 0.08) 100%
  );
  padding: 12px 26px;
  border-radius: var(--ds-radius-pill);
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(30, 77, 140, 0.15);
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.section-label:hover {
  transform: translateY(-2px);
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.section-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #122d55;
  margin: 0 0 18px 0;
  line-height: 1.15;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #122d55 0%, #1e4d8c 50%, #3b6fc4 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

.section-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  font-weight: 450;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

/* ==========================================
   BENTO GRID LAYOUT - PREMIUM 3-ROW
   ========================================== */

.tech-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(420px, auto) minmax(420px, auto) minmax(380px, auto);
  gap: 24px;
  margin-top: 60px;
}

/* Grid Positioning */
.card-frontend { grid-column: 1; grid-row: 1; }
.card-backend { grid-column: 2; grid-row: 1; }
.card-ai { 
  grid-column: 3; 
  grid-row: 1 / 3;
  height: 100%;
}
.card-database { grid-column: 1; grid-row: 2; }
.card-cloud { grid-column: 2; grid-row: 2; }
.card-security { 
  grid-column: 1 / 4;
  grid-row: 3;
}

/* ==========================================
   GLASSMORPHISM CARDS - LIQUID GLASS
   ========================================== */

.tech-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  will-change: transform;
}

/* Standard Glass Card */
.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -1px 1px rgba(0, 0, 0, 0.02);
}

/* Premium Glass for AI Card */
.premium-glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.78) 100%
  );
  backdrop-filter: blur(35px) saturate(200%);
  -webkit-backdrop-filter: blur(35px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 
     var(--ds-elevation-4), inset 0 2px 2px rgba(255, 255, 255, 1), inset 0 -2px 2px rgba(30, 77, 140, 0.03);
}

/* ==========================================
   GLASS SHINE EFFECT - LIGHTNING SHIMMER
   ========================================== */

.glass-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, transparent, transparent);
  transform: translateX(-100%) translateY(-100%) rotate(25deg);
  animation: shimmerSweep 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

@keyframes shimmerSweep {
  0%, 100% {
    transform: translateX(-100%) translateY(-100%) rotate(25deg);
  }
  15%, 85% {
    transform: translateX(100%) translateY(100%) rotate(25deg);
  }
}

.tech-card:hover .glass-shine {
  animation-duration: 4s;
}

/* Premium Shine - More Intense */
.premium-shine {
  background: linear-gradient(120deg, transparent, transparent);
  animation: shimmerSweep 6s ease-in-out infinite;
}

/* ==========================================
   CARD HOVER EFFECTS - ENHANCED DEPTH
   ========================================== */

.tech-card:hover {
  transform: translateY(-14px) scale(1.02);
  box-shadow: 
     var(--ds-elevation-4), inset 0 2px 2px rgba(255, 255, 255, 1);
}

.premium-glass:hover {
  transform: translateY(-18px) scale(1.03);
  box-shadow: 
     var(--ds-elevation-4), inset 0 2px 4px rgba(255, 255, 255, 1);
}

/* ==========================================
   CARD GLOW EFFECTS - THEMED COLORS
   ========================================== */

.card-glow {
  position: absolute;
  inset: -2px;
  border-radius: 32px;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
  filter: blur(20px);
  pointer-events: none;
}

/* Frontend - Blue */
.card-frontend .card-glow {
  background: linear-gradient(
    135deg,
    rgba(30, 77, 140, 0.3) 0%,
    rgba(59, 111, 196, 0.2) 100%
  );
}

/* Backend - Purple/Pink */
.card-backend .card-glow {
  background: linear-gradient(
    135deg,
    rgba(198, 147, 10, 0.25) 0%,
    rgba(59, 111, 196, 0.2) 100%
  );
}

/* Database - Cyan */
.card-database .card-glow {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.3) 0%,
    rgba(30, 77, 140, 0.2) 100%
  );
}

/* Cloud - Teal */
.card-cloud .card-glow {
  background: linear-gradient(
    135deg,
    rgba(20, 184, 166, 0.3) 0%,
    rgba(6, 182, 212, 0.2) 100%
  );
}

/* Security - Orange/Warm */
.card-security .card-glow {
  background: linear-gradient(
    135deg,
    rgba(251, 146, 60, 0.25) 0%,
    rgba(198, 147, 10, 0.2) 100%
  );
}

/* Premium AI Glow */
.premium-glow {
  background: radial-gradient(
    circle at 50% 50%, 
    rgba(30, 77, 140, 0.35) 0%,
    rgba(59, 111, 196, 0.25) 40%,
    transparent 70%
  );
}

.tech-card:hover .card-glow {
  opacity: 1;
}

/* ==========================================
   CARD CONTENT LAYOUT
   ========================================== */

.card-content {
  position: relative;
  z-index: 2;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ==========================================
   ANIMATED SORIVA LETTERS - CRISP VERSION
   ========================================== */

.soriva-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 14px;
  z-index: 10;
  pointer-events: none;
}

.soriva-letter {
  font-size: 56px;
  font-weight: 900;
  background: linear-gradient(135deg, #1e4d8c, #1e4d8c);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 1;
  animation: 
    letterFloat 3.5s ease-in-out infinite,
    gradientShift 5s ease-in-out infinite;
  transform-origin: center;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  filter: drop-shadow(0 4px 12px rgba(30, 77, 140, 0.3));
  will-change: transform;
}

/* Individual Letter Animations */
.soriva-letter:nth-child(1) {
  animation-delay: 0s, 0s;
  animation-name: letterFloat, letterRotate, gradientShift;
  animation-duration: 3.5s, 7s, 5s;
}

.soriva-letter:nth-child(2) {
  animation-delay: 0.15s, 0.15s;
  animation-name: letterFloat, letterScale, gradientShift;
  animation-duration: 3.5s, 6s, 5s;
}

.soriva-letter:nth-child(3) {
  animation-delay: 0.3s, 0.3s;
  animation-name: letterFloat, letterRotate, gradientShift;
  animation-duration: 3.5s, 8s, 5s;
}

.soriva-letter:nth-child(4) {
  animation-delay: 0.45s, 0.45s;
  animation-name: letterFloat, letterScale, gradientShift;
  animation-duration: 3.5s, 7s, 5s;
}

.soriva-letter:nth-child(5) {
  animation-delay: 0.6s, 0.6s;
  animation-name: letterFloat, letterRotate, gradientShift;
  animation-duration: 3.5s, 6.5s, 5s;
}

.soriva-letter:nth-child(6) {
  animation-delay: 0.75s, 0.75s;
  animation-name: letterFloat, letterScale, gradientShift;
  animation-duration: 3.5s, 7.5s, 5s;
}

/* Float Animation */
@keyframes letterFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-22px);
  }
}

/* Rotate Animation */
@keyframes letterRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

/* Scale Animation */
@keyframes letterScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}

/* Gradient Shift Animation */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Faster on Hover */
.card-ai:hover .soriva-letter {
  animation-duration: 2s, 3s, 3s;
  filter: drop-shadow(0 6px 20px rgba(30, 77, 140, 0.45));
}

/* ==========================================
   CARD ICON AREA
   ========================================== */

.card-icon-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
  height: 140px;
  position: relative;
}

.ai-area {
  height: 240px;
  margin-bottom: 44px;
}

.icon-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-wrapper {
  width: 220px;
  height: 220px;
}

/* SVG Icons */
.tech-icon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.1));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tech-card:hover .tech-icon {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
}

/* Icon Animations */
.animate-float {
  animation: iconFloat 4.5s ease-in-out infinite;
}

.animate-pulse {
  animation: iconPulse 2.5s ease-in-out infinite;
}

.animate-stack {
  animation: stackBounce 3.5s ease-in-out infinite;
}

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

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

@keyframes stackBounce {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.04);
  }
}

/* Icon Particles */
.icon-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #1e4d8c, #3b6fc4);
  border-radius: 50%;
  opacity: 0.5;
  animation: particleFloat 4s ease-in-out infinite;
  will-change: transform, opacity;
}

.particle:nth-child(1) {
  top: 18%;
  left: 18%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  top: 68%;
  right: 18%;
  animation-delay: 1.2s;
}

.particle:nth-child(3) {
  bottom: 18%;
  left: 48%;
  animation-delay: 2.4s;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(12px, -18px) scale(1.3);
    opacity: 0.9;
  }
}

/* Cloud Dots Animation */
.cloud-dot {
  animation: cloudDotPulse 2.5s ease-in-out infinite;
}

.cloud-dot:nth-child(4) { animation-delay: 0s; }
.cloud-dot:nth-child(5) { animation-delay: 0.4s; }
.cloud-dot:nth-child(6) { animation-delay: 0.8s; }

@keyframes cloudDotPulse {
  0%, 100% {
    opacity: 0.5;
    r: 2.5;
  }
  50% {
    opacity: 1;
    r: 3.5;
  }
}

/* ==========================================
   AI BRAIN & NEURAL NETWORK
   ========================================== */

.ai-brain {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.25;
  z-index: 1;
  pointer-events: none;
}

.neural-network {
  width: 100%;
  height: 100%;
  position: relative;
}

.network-svg {
  width: 100%;
  height: 100%;
}

/* Neural Network Nodes */
.node {
  animation: nodeGlow 2.5s ease-in-out infinite;
  will-change: opacity, filter;
}

.node:nth-child(1) { animation-delay: 0s; }
.node:nth-child(2) { animation-delay: 0.3s; }
.node:nth-child(3) { animation-delay: 0.6s; }
.node:nth-child(4) { animation-delay: 0.9s; }
.node:nth-child(5) { animation-delay: 1.2s; }

@keyframes nodeGlow {
  0%, 100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 3px rgba(30, 77, 140, 0.5));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(30, 77, 140, 1));
  }
}

/* Neural Connections */
.connection {
  stroke-width: 1.5;
  opacity: 0.35;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: 
    connectionPulse 3.5s ease-in-out infinite,
    connectionFlow 5s linear infinite;
  will-change: stroke-dashoffset, opacity;
}

.connection:nth-child(6) { animation-delay: 0s; }
.connection:nth-child(7) { animation-delay: 0.6s; }
.connection:nth-child(8) { animation-delay: 1.2s; }
.connection:nth-child(9) { animation-delay: 1.8s; }

@keyframes connectionPulse {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.65;
  }
}

@keyframes connectionFlow {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* AI Pulse Rings */
.ai-pulse-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border: 2px solid rgba(30, 77, 140, 0.4);
  border-radius: 50%;
  animation: pulseRing 3.5s ease-out infinite;
  will-change: width, height, opacity;
}

.pulse-ring:nth-child(2) {
  animation-delay: 1.2s;
}

.pulse-ring:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes pulseRing {
  0% {
    width: 90px;
    height: 90px;
    opacity: 0.8;
  }
  100% {
    width: 180px;
    height: 180px;
    opacity: 0;
  }
}

/* ==========================================
   CARD INFO & CONTENT
   ========================================== */

.card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Card Badge */
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1e4d8c;
  background: linear-gradient(
    135deg, 
    rgba(30, 77, 140, 0.1) 0%, 
    rgba(59, 111, 196, 0.08) 100%
  );
  padding: 8px 16px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 77, 140, 0.2);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tech-card:hover .card-badge {
  background: linear-gradient(
    135deg, 
    rgba(30, 77, 140, 0.18) 0%, 
    rgba(59, 111, 196, 0.15) 100%
  );
  border-color: rgba(30, 77, 140, 0.35);
  transform: translateY(-3px);
  box-shadow:  var(--ds-elevation-2);
}

/* Premium Badge */
.premium-badge {
  background: linear-gradient(
    135deg, 
    rgba(30, 77, 140, 0.15) 0%, 
    rgba(59, 111, 196, 0.12) 100%
  );
  border: 1px solid rgba(30, 77, 140, 0.3);
  font-size: 12px;
  padding: 10px 18px;
}

.badge-icon {
  font-size: 14px;
  display: inline-block;
  animation: badgeIconSpin 5s ease-in-out infinite;
}

@keyframes badgeIconSpin {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(15deg) scale(1.1);
  }
  50% {
    transform: rotate(0deg) scale(1);
  }
  75% {
    transform: rotate(-15deg) scale(1.1);
  }
}

/* Card Title */
.card-title {
  font-size: 1.4rem;
  font-weight: 750;
  color: #1e293b;
  margin: 0 0 10px 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.tech-card:hover .card-title {
  color: #1e4d8c;
}

.card-title.large {
  font-size: 1.7rem;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

/* Live Dot Indicator */
.live-dot {
  width: 11px;
  height: 11px;
  background: linear-gradient(135deg, #10b981, #34d399);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: liveDotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(16, 185, 129, 0.3);
  animation: liveDotRing 2s ease-out infinite;
}

@keyframes liveDotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes liveDotRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Card Description */
.card-desc {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 22px 0;
  line-height: 1.7;
  font-weight: 480;
}

.card-desc.large {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 30px;
  color: #475569;
}

/* Card Metrics */
.card-metrics {
  display: flex;
  gap: 14px;
  margin-top: auto;
  flex-wrap: wrap;
}

.metric {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  background: rgba(100, 116, 139, 0.06);
  padding: 10px 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 116, 139, 0.08);
  transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.metric:hover {
  background: rgba(30, 77, 140, 0.1);
  border-color: rgba(30, 77, 140, 0.15);
  transform: translateY(-3px);
  box-shadow:  var(--ds-elevation-2);
}

.metric-icon {
  font-size: 1rem;
}

.metric-value {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ==========================================
   SECURITY CARD - HORIZONTAL LAYOUT
   ========================================== */

.card-security .card-content {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 32px;
  align-items: start;
}

.card-security .card-icon-area {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-security .card-info {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-security .card-title {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.card-security .card-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 18px;
}

/* Security Features Grid */
.security-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.security-features--pair {
  grid-template-columns: repeat(2, minmax(0, 220px));
}

.security-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(251, 146, 60, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(251, 146, 60, 0.12);
}

.security-item:hover {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(251, 146, 60, 0.1);
}

.sec-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.sec-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

/* Security Metrics */


.security-metrics .metric {
  flex: 1;
  min-width: 150px;
  text-align: left;
  padding: 12px 18px;
  gap: 8px;
}

.security-metrics .metric-icon {
  font-size: 1.1rem;
}

.security-metrics .metric-value {
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ==========================================
   AI CAPABILITIES
   ========================================== */

.ai-capabilities {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0;
}

.capability {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(100, 116, 139, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(100, 116, 139, 0.08);
}

.capability:hover {
  background: rgba(30, 77, 140, 0.08);
  border-color: rgba(30, 77, 140, 0.15);
  transform: translateX(8px);
  box-shadow:  var(--ds-elevation-2);
}

.cap-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.capability:hover .cap-icon {
  transform: scale(1.15) rotate(-8deg);
}

.cap-text {
  font-size: 0.9rem;
  font-weight: 620;
  color: #334155;
}

/* ==========================================
   AI CTA BUTTON - PREMIUM
   ========================================== */

.ai-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #1e4d8c 0%, #3b6fc4 50%, #1a4179 100%);
  background-size: 200% 200%;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 16px;
  margin-top: auto;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-position 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), outline 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), outline-offset 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

/* Shine Effect */
.ai-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.35), 
    transparent
  );
  transition: left 0.6s ease;
}

.ai-cta-btn:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background-position: 100% 50%;
}

.ai-cta-btn:hover::before {
  left: 100%;
}

.ai-cta-btn svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-cta-btn:hover svg {
  transform: translateX(6px);
}

.ai-cta-btn:active {
  transform: translateY(-2px) scale(1.01);
}

/* ==========================================
   RESPONSIVE DESIGN - PART 4
   ========================================== */

/* Large Desktop */
@media (max-width: 1600px) {
  .container {
    max-width: 1200px;
  }
  
  .tech-bento-grid {
    grid-template-rows: minmax(400px, auto) minmax(400px, auto) minmax(360px, auto);
  }
}

/* Desktop */
@media (max-width: 1400px) {
  .section-title {
    font-size: 2.8rem;
  }
  
  .soriva-animation {
    gap: 12px;
  }
  
  .soriva-letter {
    font-size: 48px;
  }
}

/* Laptop */
@media (max-width: 1200px) {
  .container {
    padding: 0 30px;
  }
  
  .tech-bento-grid {
    gap: 20px;
    grid-template-rows: minmax(380px, auto) minmax(380px, auto) minmax(340px, auto);
  }
  
  .card-content {
    padding: 32px;
  }
  
  .soriva-letter {
    font-size: 42px;
  }
}

/* Tablet Large */
@media (max-width: 1024px) {
  .tech-ecosystem-section {
    padding: 100px 0;
  }
  
  .section-header {
    margin-bottom: 60px;
  }
  
  .section-title {
    font-size: 2.4rem;
  }
  
  .tech-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 20px;
  }
  
  .card-frontend { grid-column: 1; grid-row: 1; }
  .card-backend { grid-column: 2; grid-row: 1; }
  .card-database { grid-column: 1; grid-row: 2; }
  .card-cloud { grid-column: 2; grid-row: 2; }
  .card-ai { 
    grid-column: 1 / 3; 
    grid-row: 3; 
    min-height: 450px;
  }
  .card-security { 
    grid-column: 1 / 3; 
    grid-row: 4; 
    min-height: 380px;
  }
  
  .soriva-letter {
    font-size: 38px;
  }
  
  .card-security .card-content {
    grid-template-columns: 130px 1fr;
    gap: 24px;
  }
  
  .security-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet */
@media (max-width: 768px) {
.container {
    padding: 0 20px;
  }
.section-title {
    font-size: 2rem;
  }
.section-subtitle {
    font-size: 1rem;
  }
.tech-bento-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
.tech-card {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 340px;
  }
.card-ai {
    min-height: 500px;
  }
.card-security {
    min-height: 480px;
  }
.card-content {
    padding: 28px;
  }
.card-security .card-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
.card-security .card-icon-area {
    height: 120px;
  }
.soriva-animation {
    gap: 8px;
  }
.soriva-letter {
    font-size: 30px;
  }
.card-title {
    font-size: 1.25rem;
  }
.card-title.large {
    font-size: 1.4rem;
  }
.security-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
.security-metrics .metric {
    min-width: auto;
  }
}


/* Mobile Large */
@media (max-width: 480px) {
  .tech-ecosystem-section {
    padding: 70px 0;
  }
  
  .section-header {
    margin-bottom: 40px;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .section-subtitle {
    font-size: 0.95rem;
  }
  
  .tech-bento-grid {
    gap: 14px;
  }
  
  .tech-card {
    min-height: 300px;
  }
  
  .card-ai {
    min-height: 450px;
  }
  
  .card-security {
    min-height: 440px;
  }
  
  .card-content {
    padding: 22px;
  }
  
  .card-icon-area {
    height: 100px;
  }
  
  .ai-area {
    height: 160px;
  }
  
  .icon-wrapper {
    width: 85px;
    height: 85px;
  }
  
  .ai-wrapper {
    width: 140px;
    height: 140px;
  }
  
  .soriva-letter {
    font-size: 24px;
    gap: 6px;
  }
  
  .card-title {
    font-size: 1.15rem;
  }
  
  .card-title.large {
    font-size: 1.25rem;
  }
  
  .card-desc.large {
    font-size: 0.9rem;
  }
  
  .card-security .card-title {
    font-size: 1.25rem;
  }
  
  .card-security .card-desc {
    font-size: 0.85rem;
  }
  
  .ai-capabilities {
    gap: 10px;
    margin: 20px 0;
  }
  
  .capability {
    padding: 14px 16px;
  }
  
  .security-features {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .security-item {
    padding: 12px 16px;
  }
  
  .sec-text {
    font-size: 0.8rem;
  }
  
  .ai-cta-btn {
    padding: 16px 30px;
    font-size: 0.95rem;
  }
}

/* Mobile Small */
@media (max-width: 375px) {
  .section-title {
    font-size: 1.5rem;
  }
  
  .soriva-letter {
    font-size: 20px;
  }
  
  .card-title {
    font-size: 1.05rem;
  }
  
  .card-title.large {
    font-size: 1.15rem;
  }
  
  .card-content {
    padding: 18px;
  }
}

/* ==========================================
   REDUCED MOTION PREFERENCE
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  .glass-shine,
  .premium-shine,
  .soriva-letter,
  .particle,
  .node,
  .connection,
  .pulse-ring,
  .animate-float,
  .animate-pulse,
  .animate-stack,
  .cloud-dot,
  .badge-icon,
  .live-dot {
    animation: none !important;
  }
  
  .tech-card,
  .card-badge,
  .metric,
  .security-item,
  .capability,
  .ai-cta-btn {
    transition-duration: 0.2s !important;
  }
}
/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
/* ==========================================
   RISENEX CSS - PART 5 (ULTRA POLISHED)
   Tech Carousel | Footer | Stats Section
   ========================================== */

/* ==========================================
   HARDWARE ACCELERATION - GPU OPTIMIZED
   ========================================== */

.tech-card,
.glass-shine,
.soriva-letter,
.tech-icon,
.pulse-ring,
.particle,
.tech-logo-card,
.tech-scroll-track,
.scroll-to-top {
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}

/* Force GPU Layer Promotion */
.tech-scroll-track,
.floating-circle,
.gradient-blob {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }
  
  .tech-scroll-track {
    animation: none !important;
  }
}

/* Print Styles */
@media print {
  .tech-ecosystem-section,
.tech-carousel-section {
    background: white !important;
  }
  
  .tech-card,
.tech-logo-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
  }
  
  .glass-shine,
  .card-glow,
  .ai-pulse-rings,
  .scroll-to-top,
  .tech-scroll-track::before,
  .tech-scroll-track::after {
    display: none !important;
  }
}

/* ==========================================
   TECHNOLOGY CAROUSEL SECTION - ULTRA PREMIUM
   ========================================== */

.tech-carousel-section {
  padding: 140px 0;
  background: 
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(30, 77, 140, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 70%, rgba(217, 119, 6, 0.04) 0%, transparent 60%),
    linear-gradient(135deg, #f4f7fc 0%, #ffffff 50%, #f4f7fc 100%);
  position: relative;
  overflow: hidden;
}

/* Animated Background Orbs */
.tech-carousel-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(30, 77, 140, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(30, 77, 140, 0.03) 0%, transparent 50%);
  pointer-events: none;
  animation: backgroundPulse 12s ease-in-out infinite;
  will-change: opacity;
}

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

/* Subtle Grid Overlay */
.tech-carousel-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(30, 77, 140, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 77, 140, 0.015) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  opacity: 0.6;
}

/* ==========================================
   CAROUSEL SECTION HEADER
   ========================================== */

.tech-carousel-section .section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}

.tech-carousel-section .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #1e4d8c 0%, #d97706 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease-in-out infinite;
  padding: 14px 30px;
  position: relative;
}

.tech-carousel-section .section-label::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg, 
    rgba(30, 77, 140, 0.08) 0%, 
    rgba(217, 119, 6, 0.08) 100%
  );
  border-radius: var(--ds-radius-pill);
  border: 1.5px solid rgba(30, 77, 140, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.tech-carousel-section .section-label:hover::before {
  border-color: rgba(30, 77, 140, 0.35);
  box-shadow:  var(--ds-elevation-2);
}

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

.tech-carousel-section .section-title {
  font-size: clamp(2.5rem, 5vw, 3.2rem);
  font-weight: 900;
  color: #122d55;
  margin: 0 0 18px 0;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.tech-carousel-section .section-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  font-weight: 450;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

/* ==========================================
   TECH CATEGORY WITH GLOW
   ========================================== */

.tech-category {
  margin-bottom: 16px;
  position: relative;
}

.tech-category:last-child {
  margin-bottom: 0;
}

/* Category-specific Ambient Glows */
.tech-category::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 220px;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  transition: opacity 0.5s ease;
}

.tech-category:hover::before {
  opacity: 1;
}

/* Frontend/Backend - Blue */
.tech-category:nth-child(2)::before {
  background: radial-gradient(
    ellipse, 
    rgba(92, 134, 204, 0.12) 0%, 
    rgba(30, 77, 140, 0.08) 40%,
    transparent 70%
  );
}

/* Database - Amber */
.tech-category:nth-child(3)::before {
  background: radial-gradient(
    ellipse, 
    rgba(217, 119, 6, 0.12) 0%, 
    rgba(245, 158, 11, 0.08) 40%,
    transparent 70%
  );
}

/* DevOps/Cloud - Cyan */
.tech-category:nth-child(4)::before {
  background: radial-gradient(
    ellipse, 
    rgba(6, 182, 212, 0.12) 0%, 
    rgba(20, 184, 166, 0.08) 40%,
    transparent 70%
  );
}

/* Category Title */
.category-title {
  font-size: 1.35rem;
  font-weight: 750;
  color: #1e4d8c;
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.category-icon {
  font-size: 2rem;
  display: inline-block;
  animation: iconBounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(30, 77, 140, 0.2));
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

/* ==========================================
   SCROLL WRAPPER & TRACK
   ========================================== */

.tech-scroll-wrapper {
  width: 100%;
  overflow: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
  position: relative;
  padding: 36px 0 64px 0;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  z-index: 1;
}

/* Belt and braces: nothing here is ever meant to be scrolled by hand. */
.tech-scroll-wrapper::-webkit-scrollbar,
.tech-scroll-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tech-scroll-track {
  display: flex;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 32px;
  animation: scrollLeft 40s linear infinite;
  will-change: transform;
  position: relative;
  z-index: 1;
}

.tech-scroll-track:hover {
  animation-play-state: paused;
}

.tech-scroll-reverse {
  animation-name: scrollRight;
  animation-duration: 35s;
}

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

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

/* ==========================================
   TECH LOGO CARDS - ULTRA PREMIUM 3D GLASS
   ========================================== */

.tech-logo-card {
  flex-shrink: 0;
  width: 135px;
  height: 135px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(35px) saturate(200%);
  -webkit-backdrop-filter: blur(35px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
     var(--ds-elevation-3), inset 0 2px 2px rgba(255, 255, 255, 1), inset 0 -2px 4px rgba(0, 0, 0, 0.015);
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
  z-index: 10;
}

.tech-logo-card:hover {
  z-index: 100;
}

/* Glowing Background Layer */
.tech-logo-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, rgba(30, 77, 140, 0.2), rgba(59, 111, 196, 0.2));
  background-size: 300% 300%;
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  filter: blur(25px);
  animation: gradientRotate 6s ease-in-out infinite paused;
  z-index: -1;
}

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

.tech-logo-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* Shimmer Effect */
.tech-logo-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, transparent);
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.tech-logo-card:hover::after {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Hover State */
.tech-logo-card:hover {
  transform: translateY(-18px) scale(1.1) rotateZ(3deg);
  box-shadow: 
    0 25px 60px rgba(30, 77, 140, 0.2),
    0 12px 30px rgba(30, 77, 140, 0.12),
    0 6px 15px rgba(217, 119, 6, 0.08),
    inset 0 3px 3px rgba(255, 255, 255, 1);
  border-color: rgba(30, 77, 140, 0.3);
}

/* Logo Image */
.tech-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
}

.tech-logo-card:hover img {
  transform: scale(1.18) translateZ(25px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.12));
}

/* Tiles for capabilities that have no brand logo. Same tile, same motion —
   one navy tone marks them as ours rather than as a missing image. */
.tech-logo-card .rx-icon {
  width: 100%;
  height: 100%;
  color: #1e4d8c;
  stroke-width: 1.1;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tech-logo-card:hover .rx-icon {
  transform: scale(1.18) translateZ(25px);
}

/* ==========================================
   TECH TOOLTIP - PREMIUM GLASS
   ========================================== */

.tech-tooltip {
  position: absolute;
  bottom: -52px;
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  background: linear-gradient(
    135deg, 
    rgba(30, 77, 140, 0.95) 0%, 
    rgba(15, 23, 42, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.3px;
}

/* Tooltip Arrow */
.tech-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid rgba(30, 77, 140, 0.95);
}

.tech-logo-card:hover .tech-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================
   SITE FOOTER - PREMIUM DESIGN
   ========================================== */

.site-footer {
  background: 
    radial-gradient(ellipse 50% 30% at 20% 80%, rgba(30, 77, 140, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(217, 119, 6, 0.02) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
  color: #334155;
  padding: 110px 0 0 0;
  position: relative;
  overflow: hidden;
}

/* Subtle Background Elements */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(30, 77, 140, 0.025) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.025) 0%, transparent 40%);
  pointer-events: none;
}

/* Top Gradient Border */
.site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, transparent);
}

.footer-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* Footer Main Grid */
.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 80px;
  padding-bottom: 80px;
  border-bottom: 2px solid rgba(30, 77, 140, 0.08);
}

/* ==========================================
   FOOTER BRAND - 5X LOGO
   ========================================== */

.footer-brand {
  max-width: 580px;
}

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

.footer-logo img {
  height: 240px;
  width: auto;
  filter: drop-shadow(0 8px 25px rgba(30, 77, 140, 0.15));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-logo img:hover {
  transform: translateY(-5px) scale(1.02);
  filter: drop-shadow(0 12px 35px rgba(30, 77, 140, 0.2));
}

.footer-tagline {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #64748b;
  margin: 0 0 44px 0;
  font-weight: 480;
}

/* Social Links */
.footer-social {
  display: flex;
  gap: 16px;
}

.social-link {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 77, 140, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(30, 77, 140, 0.12);
  border-radius: 16px;
  color: #475569;
  transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-link svg {
  width: 26px;
  height: 26px;
  transition: transform 0.3s ease;
}

.social-link:hover {
  background: linear-gradient(135deg, #1e4d8c 0%, #1e4d8c 50%, #d97706 100%);
  color: white;
  transform: translateY(-5px) scale(1.05);
  border-color: transparent;
  box-shadow: 
     var(--ds-elevation-3);
}

.social-link:hover svg {
  transform: scale(1.1);
}

/* ==========================================
   FOOTER COLUMNS
   ========================================== */

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

.footer-heading {
  font-size: 1.35rem;
  font-weight: 750;
  color: #1e293b;
  margin: 0 0 32px 0;
  position: relative;
  padding-bottom: 16px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55px;
  height: 4px;
  background: linear-gradient(90deg, #1e4d8c, #1e4d8c, #d97706);
  border-radius: 4px;
}

/* Footer Links */
.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li,
.footer-contact li {
  margin-bottom: 18px;
}

.footer-links a,
.footer-contact a {
  font-size: 1.05rem;
  color: #64748b;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
  position: relative;
  font-weight: 520;
}

.footer-links a::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #1e4d8c, #d97706);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 4px;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: #1e4d8c;
  transform: translateX(6px);
}

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

/* Contact Items */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: #1e4d8c;
  margin-top: 2px;
  transition: transform 0.3s ease;
}

.footer-contact li:hover .contact-icon {
  transform: scale(1.15) rotate(-5deg);
}

.footer-contact span,
.footer-contact a {
  font-size: 1.05rem;
  line-height: 1.75;
}

/* ==========================================
   NEWSLETTER SECTION - PREMIUM
   ========================================== */











/* Newsletter Form */














/* Subscribe Button */


/* Button Shine */






.btn-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.subscribe-btn:hover .btn-icon {
  transform: translateX(5px);
}

/* ==========================================
   FOOTER BOTTOM
   ========================================== */

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 0;
  gap: 28px;
}

.copyright {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
}

.copyright strong {
  color: #1e293b;
  font-weight: 750;
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  font-size: 1rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 520;
  position: relative;
}

.footer-bottom-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #1e4d8c, #d97706);
  transition: width 0.3s ease;
}

.footer-bottom-links a:hover {
  color: #1e4d8c;
}

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

.separator {
  color: #cbd5e1;
}

/* ==========================================
   SCROLL TO TOP BUTTON - PREMIUM ANIMATED
   ========================================== */

.scroll-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  
  width: 60px;
  height: 60px;
  
  background: linear-gradient(135deg, #1e4d8c 0%, #1e4d8c 50%, #0d9488 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 50%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 1.5rem;
  color: white;
  font-weight: normal;
  line-height: 1;
  font-family: Arial, sans-serif;
  
  padding: 0;
  margin: 0;
  
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(25px) scale(0.9);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-position 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Visible State */
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Pulse Ring Animation */
.scroll-to-top::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(30, 77, 140, 0.3);
  opacity: 0;
  animation: scrollPulse 2s ease-out infinite;
}

@keyframes scrollPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Hover State */
.scroll-to-top:hover {
  background-position: 100% 50%;
  transform: translateY(-5px) scale(1.08);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.scroll-to-top:hover::before {
  animation-duration: 1.5s;
}

/* Active State */
.scroll-to-top:active {
  transform: translateY(-2px) scale(1.02);
}

/* ==========================================
   STATS SECTION - GLASSMORPHISM 3D
   ========================================== */

/* ==========================================
   WHAT DEFINES US
   Replaces the animated counters. Same glass language as the section it
   supersedes — identical background, title gradient and card tokens — so the
   page reads unchanged; only the counters and their circles are gone.
   ========================================== */

.defines-section {
  padding: 150px 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(30, 77, 140, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 70% 70%, rgba(217, 119, 6, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, #eef3fb 0%, #dde7f6 50%, #eef3fb 100%);
  position: relative;
  overflow: hidden;
}

.defines-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

.defines-header {
  text-align: center;
  margin-bottom: 80px;
}

.defines-title {
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  font-weight: 900;
  margin: 0 0 22px 0;
  background: linear-gradient(135deg, #1e4d8c, #d97706);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
  line-height: 1.15;
  filter: drop-shadow(0 3px 10px rgba(30, 77, 140, 0.12));
  animation: gradientShift 8s ease infinite;
}

.defines-subtitle {
  font-size: 1.25rem;
  color: #52606d;
  font-weight: 450;
  margin: 0 auto;
  max-width: 620px;
  line-height: 1.7;
}

.defines-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* Frosted glass, same recipe the stat cards used. */
.define-card {
  position: relative;
  padding: 44px 32px;
  text-align: center;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border-radius: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--ds-elevation-3), inset 0 2px 0 rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: transform 0.5s var(--ease-smooth),
              box-shadow 0.5s var(--ease-smooth),
              border-color 0.5s var(--ease-smooth),
              background-color 0.5s var(--ease-smooth);
  will-change: transform;
}

.define-icon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  color: #1e4d8c;
  background: linear-gradient(150deg, rgba(30, 77, 140, 0.10), rgba(217, 119, 6, 0.08));
  border: 1px solid rgba(30, 77, 140, 0.12);
  transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
}

.define-icon .rx-icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}

.define-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #122d55;
  letter-spacing: -0.02em;
  margin: 0;
}

.define-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: #52606d;
  font-weight: 450;
  margin: 0;
  max-width: 26ch;
}

/* Lift plus a navy glow — the section's own accent, no new colour. */
.define-card:hover {
  transform: translateY(-12px);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(30, 77, 140, 0.22);
  box-shadow:
    var(--ds-elevation-4),
    0 22px 50px rgba(30, 77, 140, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 1);
}

.define-card:hover .define-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 26px rgba(30, 77, 140, 0.18);
}

@media (max-width: 1100px) {
  .defines-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 768px) {
  .defines-section { padding: 100px 0; }
  .defines-header { margin-bottom: 56px; }
  .defines-container { padding: 0 20px; }
  .define-card { padding: 36px 26px; border-radius: 26px; }
  .define-icon { width: 64px; height: 64px; border-radius: 20px; }
  .define-icon .rx-icon { width: 29px; height: 29px; }
}

@media (max-width: 560px) {
  .defines-grid { grid-template-columns: 1fr; gap: 20px; }
  .defines-section { padding: 80px 0; }
  .defines-subtitle { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  .defines-title { animation: none; }
  .define-card,
  .define-icon { transition: none; }
  .define-card:hover { transform: none; }
  .define-card:hover .define-icon { transform: none; }
}

/* Animated Background */

@keyframes statsBackground {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-15px, -15px) rotate(2deg); }
  50% { transform: translate(10px, 10px) rotate(-1deg); }
  75% { transform: translate(-5px, 5px) rotate(1deg); }
}

/* Grid Pattern Overlay */

/* Stats Grid */

/* Stat Card - Premium Glass */

/* Card Glow Effect */

/* Card Shine */

/* Stat Icon */

/* Stat Number */

/* Stat Label */

/* ==========================================
   RESPONSIVE DESIGN - PART 5
   ========================================== */

/* Large Desktop */
@media (max-width: 1600px) {
  .tech-carousel-section {
    padding: 110px 0;
  }
  
  .tech-category {
    margin-bottom: 16px;
  }
  
  .footer-logo img {
    height: 210px;
  }
}

/* Desktop */
@media (max-width: 1400px) {
  .tech-carousel-section .section-title {
    font-size: 2.6rem;
  }
  
  .tech-logo-card {
    width: 125px;
    height: 125px;
    padding: 28px;
  }
  
  .footer-logo img {
    height: 190px;
  }
  
  
}

/* Laptop */
@media (max-width: 1200px) {
.tech-carousel-section {
    padding: 90px 0;
  }
.tech-category {
    margin-bottom: 14px;
  }
.tech-logo-card {
    width: 115px;
    height: 115px;
    padding: 26px;
    border-radius: 20px;
  }
.tech-scroll-track {
    gap: 28px;
  }
.footer-main {
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 50px;
  }
.footer-logo img {
    height: 170px;
  }
}


/* Tablet Large */
@media (max-width: 1024px) {
.tech-carousel-section .section-title {
    font-size: 2.3rem;
  }
.tech-carousel-section .section-subtitle {
    font-size: 1.05rem;
  }
.category-title {
    font-size: 1.2rem;
  }
.tech-logo-card {
    width: 105px;
    height: 105px;
    padding: 24px;
  }
.footer-main {
    grid-template-columns: repeat(2, 1fr);
  }
.footer-logo img {
    height: 155px;
  }
}


/* Tablet */
@media (max-width: 768px) {
.tech-carousel-section {
    padding: 70px 0;
  }
.tech-carousel-section .section-header {
    margin-bottom: 60px;
  }
.tech-carousel-section .section-title {
    font-size: 2rem;
  }
.tech-carousel-section .section-subtitle {
    font-size: 1rem;
    padding: 0 20px;
  }
.tech-category {
    margin-bottom: 12px;
  }
.category-title {
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
.category-icon {
    font-size: 1.75rem;
  }
.tech-scroll-wrapper {
    padding: 28px 0 56px 0;
  }
.tech-logo-card {
    width: 95px;
    height: 95px;
    padding: 22px;
    border-radius: 20px;
  }
.tech-scroll-track {
    gap: 22px;
  }
.tech-tooltip {
    font-size: 0.8rem;
    padding: 10px 18px;
  }
.site-footer {
    padding: 80px 0 0 0;
  }
.footer-main {
    grid-template-columns: 1fr;
    gap: 50px;
  }
.footer-logo img {
    height: 140px;
  }
.footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
.scroll-to-top {
    width: 54px;
    height: 54px;
    bottom: 24px;
    right: 24px;
    font-size: 1.35rem;
  }
}


/* Mobile Large */
@media (max-width: 480px) {
.tech-carousel-section {
    padding: 55px 0;
  }
.tech-carousel-section .section-title {
    font-size: 1.75rem;
  }
.tech-carousel-section .section-subtitle {
    font-size: 0.95rem;
  }
.tech-scroll-wrapper {
    padding: 24px 0 48px 0;
  }
.tech-logo-card {
    width: 85px;
    height: 85px;
    padding: 20px;
    border-radius: 16px;
  }
.tech-scroll-track {
    gap: 18px;
    animation-duration: 28s;
  }
.tech-scroll-reverse {
    animation-duration: 24s;
  }
.tech-tooltip {
    bottom: -46px;
    font-size: 0.75rem;
    padding: 9px 16px;
  }
.footer-logo img {
    height: 120px;
  }
.scroll-to-top {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    font-size: 1.25rem;
  }
}


/* Mobile Small */
@media (max-width: 375px) {
  .tech-carousel-section .section-title {
    font-size: 1.5rem;
  }
  
  .tech-logo-card {
    width: 75px;
    height: 75px;
    padding: 18px;
  }
  
  .category-title {
    font-size: 1rem;
  }
  
  .footer-logo img {
    height: 100px;
  }
  
  
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS - FINAL
   ========================================== */

.tech-scroll-track,
.tech-logo-card,
.tech-tooltip,
.tech-logo-card::before,
.tech-logo-card::after,
.scroll-to-top,
.subscribe-btn {
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .tech-scroll-track,
.tech-logo-card::before,
.category-icon,
.scroll-to-top::before {
    animation: none !important;
  }
  
  .tech-logo-card,
.scroll-to-top,
.social-link,
.subscribe-btn {
    transition-duration: 0.15s !important;
  }
}

/* Print Styles */
@media print {
  .tech-carousel-section,
.site-footer {
    background: white !important;
    padding: 40px 0 !important;
  }
  
  .tech-scroll-track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .tech-tooltip,
.tech-logo-card::before,
.tech-logo-card::after,
.scroll-to-top {
    display: none !important;
  }
}
/* ============================================
   SECTION HEADER
   ============================================ */
/* ==========================================
   RISENEX CSS - PART 6 (ULTRA POLISHED)
   Stats Section | CTA Section | Contact Modal
   ========================================== */

/* ==========================================
   STATS HEADER - PREMIUM TYPOGRAPHY
   ========================================== */

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

/* ==========================================
   STATS GRID - PERFECT ALIGNMENT
   ========================================== */

/* ==========================================
   STAT CARD - GLASSMORPHISM 3D ULTRA
   ========================================== */

/* 3D Inner Gradient Overlay */

/* Glass Shine Effect - Top Half */

/* Entrance Animation */

@keyframes statFadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px) translateZ(-60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0) scale(1);
  }
}

/* ==========================================
   CIRCULAR PROGRESS - 3D GLASS EFFECT
   ========================================== */

/* Glass Circle Background */

/* Glass Shine Highlight */

/* SVG Circle */

/* Circle Colors with Enhanced Glow */

/* Animated State */

/* ==========================================
   STAT CONTENT - CENTER DISPLAY
   ========================================== */

/* Specific fix for larger numbers */

/* ==========================================
   STAT LABELS - CONSISTENT HEIGHT
   ========================================== */

/* ==========================================
   3D HOVER EFFECTS - PREMIUM GLASS
   ========================================== */

/* ==========================================
   CTA SECTION - PREMIUM LIGHT THEME
   ========================================== */

.cta-section {
  position: relative;
  padding: 140px 0;
  background: 
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(30, 77, 140, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(217, 119, 6, 0.03) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fc 50%, rgba(30, 77, 140, 0.02) 100%);
  overflow: hidden;
}

/* Particle Background */
.cta-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(30, 77, 140, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.03) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(30, 77, 140, 0.02) 0%, transparent 60%);
  animation: particleFloat 25s ease-in-out infinite;
  will-change: transform;
}

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(25px, -25px) scale(1.03); }
  50% { transform: translate(-15px, 15px) scale(0.98); }
  75% { transform: translate(10px, -10px) scale(1.02); }
}

/* ==========================================
   CTA CARD - ULTRA PREMIUM GLASS
   ========================================== */

.cta-card {
  position: relative;
  max-width: 1020px;
  margin: 0 auto;
  padding: 90px 70px;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.92) 0%,
    rgba(248, 250, 252, 0.95) 100%
  );
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border-radius: 32px;
  border: 1.5px solid rgba(30, 77, 140, 0.08);
  box-shadow: 
    0 25px 70px rgba(30, 77, 140, 0.08),
    0 0 120px rgba(217, 119, 6, 0.04),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}

.cta-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.cta-card:hover {
  border-color: rgba(217, 119, 6, 0.15);
  box-shadow: 
    0 35px 90px rgba(30, 77, 140, 0.1),
    0 0 160px rgba(217, 119, 6, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 1);
  transform: translateY(-8px);
}

/* ==========================================
   CTA GLOW - ANIMATED AMBIENT
   ========================================== */

.cta-glow {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle,
    rgba(217, 119, 6, 0.05) 0%,
    rgba(30, 77, 140, 0.03) 30%,
    transparent 70%
  );
  animation: glowPulse 10s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes glowPulse {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  50% { 
    transform: translate(15px, 15px) scale(1.15);
    opacity: 0.7;
  }
}

/* ==========================================
   CTA CONTENT
   ========================================== */

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Badge */
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: linear-gradient(
    135deg, 
    rgba(217, 119, 6, 0.06) 0%,
    rgba(217, 119, 6, 0.1) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(217, 119, 6, 0.2);
  border-radius: var(--ds-radius-pill);
  color: #d97706;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.5px;
  margin-bottom: 36px;
  animation: badgePulse 3s ease-in-out infinite;
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.cta-badge:hover {
  transform: scale(1.05);
  border-color: rgba(217, 119, 6, 0.35);
}

.badge-dot {
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border-radius: 50%;
  animation: dotBlink 1.8s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.6);
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes dotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.9); }
}

/* Title */
.cta-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  color: #1e293b;
  margin-bottom: 26px;
  letter-spacing: -0.03em;
}

.gradient-text {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  animation: gradientTextShift 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(217, 119, 6, 0.2));
}

@keyframes gradientTextShift {
  0%, 100% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% { 
    background-position: 100% 50%;
    filter: hue-rotate(10deg);
  }
}

/* Description */
.cta-description {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #64748b;
  max-width: 720px;
  margin: 0 auto 52px;
  font-weight: 480;
}

/* ==========================================
   CTA FEATURES
   ========================================== */

.cta-features {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #475569;
  font-size: 1.05rem;
  font-weight: 550;
  transition: transform 0.3s ease, color 0.3s ease;
}

.cta-feature:hover {
  color: #1e4d8c;
  transform: translateX(4px);
}

.feature-icon {
  width: 26px;
  height: 26px;
  color: #d97706;
  stroke-width: 2.5;
  transition: transform 0.3s ease;
}

.cta-feature:hover .feature-icon {
  transform: scale(1.15) rotate(-5deg);
}

/* ==========================================
   CTA BUTTONS - PREMIUM
   ========================================== */

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 44px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 16px;
  text-decoration: none;
  transition: outline 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), outline-offset 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

/* Primary Button */
.cta-primary {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  background-size: 200% 200%;
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 
    0 12px 35px rgba(217, 119, 6, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cta-primary:hover {
  transform: translateY(-6px) scale(1.03);
  background-position: 100% 50%;
  box-shadow: 
    0 22px 55px rgba(217, 119, 6, 0.4),
    0 0 0 4px rgba(217, 119, 6, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cta-primary:active {
  transform: translateY(-2px) scale(1.01);
}

.cta-primary .button-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-primary:hover .button-icon {
  transform: translateX(6px);
}

/* Button Shine Effect */
.button-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.6s ease;
}

.cta-primary:hover .button-shine {
  left: 100%;
}

/* Secondary Button */
.cta-secondary {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: #1e4d8c;
  border: 2px solid rgba(30, 77, 140, 0.12);
  box-shadow: 
     var(--ds-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cta-secondary:hover {
  background: #ffffff;
  border-color: rgba(217, 119, 6, 0.25);
  transform: translateY(-6px) scale(1.03);
  box-shadow: 
     var(--ds-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.button-icon-left {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  color: #d97706;
  transition: transform 0.3s ease;
}

.cta-secondary:hover .button-icon-left {
  transform: scale(1.15) rotate(-5deg);
}

/* ==========================================
   TRUST BADGES
   ========================================== */

.cta-trust {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 550;
  transition: color 0.3s ease;
}

.trust-badge:hover {
  color: #1e4d8c;
}

.trust-badge svg {
  width: 20px;
  height: 20px;
  color: #d97706;
  transition: transform 0.3s ease;
}

.trust-badge:hover svg {
  transform: scale(1.15);
}

/* ==========================================
   CTA DECORATIVE CIRCLES
   ========================================== */

.cta-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 32px;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  animation: circleFloat 18s ease-in-out infinite;
  will-change: transform, opacity;
}

.circle-1 {
  width: 320px;
  height: 320px;
  top: -120px;
  right: -120px;
  background: radial-gradient(
    circle,
    rgba(217, 119, 6, 0.08) 0%,
    transparent 70%
  );
  animation-delay: 0s;
}

.circle-2 {
  width: 280px;
  height: 280px;
  bottom: -100px;
  left: -100px;
  background: radial-gradient(
    circle,
    rgba(30, 77, 140, 0.06) 0%,
    transparent 70%
  );
  animation-delay: 6s;
}

.circle-3 {
  width: 220px;
  height: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(30, 77, 140, 0.05) 0%,
    transparent 70%
  );
  animation-delay: 12s;
}

@keyframes circleFloat {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: translate(35px, -35px) scale(1.25);
    opacity: 0.75;
  }
}

/* ==========================================
   CONTACT MODAL - PREMIUM DESIGN
   ========================================== */

.contact-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.contact-modal.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal Wrapper */
.modal-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  z-index: 10000;
}

/* Modal Content */
.modal-content {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f4f7fc 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 24px;
  padding: 48px;
  max-width: 700px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 
     var(--ds-elevation-4);
  animation: modalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Custom Scrollbar */
.modal-content::-webkit-scrollbar {
  width: 6px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.08);
  border-radius: 8px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(30, 77, 140, 0.4), rgba(30, 77, 140, 0.2));
  border-radius: 8px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(30, 77, 140, 0.6), rgba(30, 77, 140, 0.4));
}

/* ==========================================
   MODAL CLOSE BUTTON
   ========================================== */

.modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  background: rgba(100, 116, 139, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(100, 116, 139, 0.12);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), outline 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), outline-offset 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.modal-close svg {
  width: 20px;
  height: 20px;
  color: #64748b;
  transition: color 0.3s ease;
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  transform: rotate(90deg) scale(1.1);
}

.modal-close:hover svg {
  color: #ef4444;
}

/* ==========================================
   MODAL HEADER - CENTERED
   ========================================== */

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-bottom: 40px;
}

.modal-logo {
  display: block;
  text-align: center;
  width: 100%;
  margin: 0 auto 24px auto;
}

.modal-logo img {
  display: block;
  margin: 0 auto;
  height: 65px;
  filter: drop-shadow(0 4px 12px rgba(30, 77, 140, 0.12));
  transition: transform 0.3s ease;
}

.modal-logo img:hover {
  transform: scale(1.05);
}

.modal-title {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  width: 100%;
  margin: 0 auto 12px auto;
  background: linear-gradient(135deg, #1e4d8c 0%, #5c86cc 50%, #1e4d8c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.modal-subtitle {
  font-size: 1.05rem;
  color: #64748b;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  font-weight: 480;
}

/* ==========================================
   MODAL FORM STYLES
   ========================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 650;
  color: #334155;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 16px 20px;
  font-size: 1rem;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(100, 116, 139, 0.12);
  border-radius: 12px;
  outline: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-image 0.3s ease, outline 0.3s ease, outline-offset 0.3s ease;
  font-weight: 480;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #94a3b8;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #1e4d8c;
  background: #ffffff;
  box-shadow: 
     var(--ds-elevation-2);
}

.form-group textarea {
  min-height: 130px;
  resize: vertical;
}

/* Form Submit Button */












/* ==========================================
   RESPONSIVE DESIGN - PART 6
   ========================================== */

/* Large Desktop */

@media (max-width: 1200px) {
  
  
  
  
  
  
  
  
  .cta-card { padding: 70px 50px; }
}

@media (max-width: 1024px) {
  
  
  
  
  
  
  
  
  .cta-title { font-size: 2.8rem; }
  .cta-card { padding: 60px 44px; }
}

@media (max-width: 768px) {
  
  
  
  
  
  
  
  
  
  
  .cta-section { padding: 90px 0; }
  .cta-card { padding: 50px 32px; border-radius: 24px; }
  .cta-title { font-size: 2.2rem; }
  .cta-description { font-size: 1.05rem; margin-bottom: 36px; }
  .cta-features { flex-direction: column; gap: 18px; align-items: center; }
  .cta-buttons { flex-direction: column; gap: 16px; }
  .cta-button { width: 100%; justify-content: center; padding: 18px 36px; }
  .cta-trust { flex-direction: column; gap: 16px; }
  
  .modal-content { padding: 36px 28px; border-radius: 24px; }
}

@media (max-width: 480px) {
  
  
  
  
  
  
  .cta-card { padding: 40px 24px; }
  .cta-title { font-size: 1.9rem; }
  .cta-description { font-size: 1rem; }
  .cta-button { padding: 16px 30px; font-size: 1rem; }
  
  .modal-content { padding: 28px 20px; }
  .modal-title { font-size: 1.6rem; }
}

/* ==========================================
   ACCESSIBILITY & PERFORMANCE
   ========================================== */

.cta-button:focus,
.form-submit:focus {
  outline: 3px solid rgba(30, 77, 140, 0.5);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cta-card,
.cta-particles,
.cta-glow,
.cta-badge,
.badge-dot,
.gradient-text,
.decoration-circle,
.button-shine,
.modal-content {
    animation: none !important;
  }
  
  .cta-button,
.form-submit {
    transition-duration: 0.15s !important;
  }
  
  .cta-card.visible {
    transform: none;
  }
}

/* Print Styles */
@media print {
  .cta-section {
    background: white !important;
    padding: 40px 0 !important;
  }
  
  .cta-card {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
  }
  
  .cta-particles,
  .cta-glow,
  .cta-decoration,
  .contact-modal {
    display: none !important;
  }
}
/* ==================== CONTACT FORM STYLES ==================== */
/* ============================================================================
   RISENEX GLOBAL - PART 7 ULTRA POLISHED CSS
   Contact Form, Success States, Web Development Hero
   Premium Glassmorphism | Smooth Animations | Full Accessibility
   ============================================================================ */

/* ==================== CSS CUSTOM PROPERTIES (Part 7 Specific) ==================== */

/* ==================== CONTACT FORM - BASE ==================== */

.contact-form {
    animation: formFadeIn 0.6s var(--ease-out-expo) 0.15s both;
    position: relative;
}

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

/* ==================== FORM ROW - RESPONSIVE GRID ==================== */

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 3vw, 24px);
    margin-bottom: clamp(16px, 3vw, 24px);
}

/* ==================== FORM GROUP - CONTAINER ==================== */

.form-group {
    position: relative;
    margin-bottom: clamp(18px, 3vw, 24px);
}

/* Glassmorphism Background Glow on Focus */
.form-group::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(
        135deg,
        rgba(30, 77, 140, 0.08) 0%,
        rgba(92, 134, 204, 0.06) 100%
    );
    border-radius: 16px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s var(--ease-smooth);
    pointer-events: none;
}

.form-group:focus-within::before {
    opacity: 1;
}

/* ==================== FLOATING LABEL - ENHANCED ==================== */

.form-group label {
    position: absolute;
    left: 16px;
    top: 18px;
    color: var(--form-label);
    font-size: 0.95rem;
    font-weight: 500;
    pointer-events: none;
    transition: 
        top 0.3s var(--ease-out-expo),
        left 0.3s var(--ease-out-expo),
        font-size 0.3s var(--ease-out-expo),
        color 0.3s var(--ease-smooth),
        background 0.3s var(--ease-smooth),
        padding 0.3s var(--ease-out-expo),
        font-weight 0.2s var(--ease-smooth);
    background: transparent;
    padding: 0 6px;
    z-index: 2;
    transform-origin: left center;
    will-change: top, font-size, color;
}

/* Textarea Label - Initial Hidden State */
.form-group textarea[placeholder] + label {
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity 0.25s var(--ease-smooth),
        visibility 0.25s var(--ease-smooth),
        top 0.3s var(--ease-out-expo),
        left 0.3s var(--ease-out-expo),
        font-size 0.3s var(--ease-out-expo),
        color 0.3s var(--ease-smooth),
        background 0.3s var(--ease-smooth);
}

/* Textarea Label - Active State */
.form-group textarea[placeholder]:focus + label,
.form-group textarea[placeholder]:not(:placeholder-shown) + label {
    opacity: 1;
    visibility: visible;
    top: -10px;
    left: 10px;
    font-size: 0.75rem;
    color: var(--form-label-active);
    background: white;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
}

/* ==================== INPUT, SELECT, TEXTAREA - BASE STYLES ==================== */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 16px 14px;
    border: 2px solid var(--form-border);
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--form-text);
    background: var(--form-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: 
        border-color 0.3s var(--ease-smooth),
        background-color 0.3s var(--ease-smooth),
        box-shadow 0.4s var(--ease-out-expo),
        transform 0.2s var(--ease-smooth);
    font-family: inherit;
    outline: none;
    box-shadow: var(--shadow-form-subtle);
    will-change: border-color, box-shadow;
}

/* Textarea Specific */
.form-group textarea {
    resize: vertical;
    min-height: 100px;
    max-height: 300px;
    line-height: 1.6;
}

/* Placeholder Styling */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
    transition: opacity 0.3s var(--ease-smooth);
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    opacity: 0.5;
}

/* ==================== SELECT DROPDOWN - ENHANCED ==================== */

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 48px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    transition: 
        border-color 0.3s var(--ease-smooth),
        background-color 0.3s var(--ease-smooth),
        background-image 0.3s var(--ease-smooth),
        box-shadow 0.4s var(--ease-out-expo);
}

/* Select Focus Arrow Color Change */
.form-group select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ==================== FOCUS STATE - PREMIUM ==================== */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--form-border-focus);
    background: var(--form-bg-focus);
    box-shadow: var(--shadow-form-focus);
}

/* ==================== FLOATING LABEL ANIMATION - ACTIVE STATE ==================== */

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group select:not([value=""]) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -10px;
    left: 10px;
    font-size: 0.75rem;
    color: var(--form-label-active);
    background: white;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    opacity: 1;
    visibility: visible;
}

/* Textarea Without Placeholder */
.form-group textarea:not([placeholder]) + label {
    opacity: 1;
    visibility: visible;
}

/* Textarea Label Position */
.form-group textarea + label {
    top: 18px;
    pointer-events: none;
}

/* Textarea Active Label */
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group textarea:valid + label {
    top: -10px;
    left: 10px;
    font-size: 0.75rem;
    color: var(--form-label-active);
    background: white;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    opacity: 1;
    visibility: visible;
}

/* ==================== ERROR STATE - ENHANCED ==================== */

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--form-error);
    background: var(--form-error-bg);
    animation: formShake 0.5s var(--ease-in-out-back);
    box-shadow: var(--shadow-form-error);
}

.form-group.error label {
    color: var(--form-error);
}

/* Error Glow Effect */
.form-group.error::before {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.1) 0%,
        rgba(239, 68, 68, 0.05) 100%
    );
    opacity: 1;
}

.form-error {
    display: none;
    color: var(--form-error);
    font-size: 0.8rem;
    margin-top: 8px;
    padding-left: 4px;
    font-weight: 500;
    line-height: 1.4;
}

.form-group.error .form-error {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: errorSlideIn 0.35s var(--ease-out-expo);
}

@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== SUCCESS STATE - ENHANCED ==================== */

.form-group.success input,
.form-group.success select,
.form-group.success textarea {
    border-color: var(--form-success);
    background: var(--form-success-bg);
    box-shadow: var(--shadow-form-success);
}

.form-group.success label {
    color: var(--form-success);
}

/* Success Glow Effect */
.form-group.success::before {
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.1) 0%,
        rgba(16, 185, 129, 0.05) 100%
    );
    opacity: 1;
}

/* ==================== WORD COUNTER - ENHANCED ==================== */

.word-counter {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--form-label);
    margin-top: 8px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s var(--ease-smooth);
}

.word-counter.warning {
    color: var(--form-warning);
    animation: counterPulse 1s ease-in-out infinite;
}

.word-counter.error {
    color: var(--form-error);
    font-weight: 600;
    animation: counterPulse 0.6s ease-in-out infinite;
}

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

/* ==================== FORM BUTTONS - PREMIUM ==================== */

.form-buttons {
    display: flex;
    gap: 14px;
    margin-top: clamp(28px, 4vw, 36px);
}

.btn-whatsapp,
.btn-submit {
    flex: 1;
    padding: 16px 28px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 
        transform 0.3s var(--ease-out-expo),
        box-shadow 0.4s var(--ease-smooth),
        background 0.3s var(--ease-smooth),
        color 0.3s var(--ease-smooth),
        border-color 0.3s var(--ease-smooth);
    font-family: inherit;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    will-change: transform, box-shadow;
}

/* Button Shine Effect */
.btn-whatsapp::before,
.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );
    transition: left 0.6s var(--ease-smooth);
    z-index: 1;
    pointer-events: none;
}

.btn-whatsapp:hover::before,
.btn-submit:hover::before {
    left: 100%;
}

.btn-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.35s var(--ease-bounce);
    position: relative;
    z-index: 2;
}

/* ==================== WHATSAPP BUTTON - ENHANCED ==================== */





.btn-whatsapp:hover .btn-icon {
    transform: scale(1.15) rotate(-8deg);
}



/* ==================== SUBMIT BUTTON - ENHANCED ==================== */

.btn-submit {
    background: transparent;
    color: #1e4d8c;
    border: 2px solid #1e4d8c;
    box-shadow:  var(--ds-elevation-1);
}

.btn-submit .btn-icon {
    stroke: #1e4d8c;
    transition: 
        transform 0.35s var(--ease-bounce),
        stroke 0.3s var(--ease-smooth);
}

.btn-submit:hover {
    background: linear-gradient(135deg, #1e4d8c 0%, #2b5aa8 100%);
    color: white;
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-button-elevated);
    border-color: transparent;
}

.btn-submit:hover .btn-icon {
    stroke: white;
    transform: translateX(4px);
}

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

/* ==================== BUTTON LOADING STATE ==================== */

.btn-whatsapp.loading,
.btn-submit.loading {
    pointer-events: none;
    opacity: 0.75;
    cursor: wait;
}

.btn-whatsapp.loading::after,
.btn-submit.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: white;
    border-radius: 50%;
    animation: buttonSpin 0.75s linear infinite;
    z-index: 3;
}

.btn-submit.loading::after {
    border-color: rgba(30, 77, 140, 0.25);
    border-top-color: #1e4d8c;
}

@keyframes buttonSpin {
    to { transform: rotate(360deg); }
}

/* ==================== SUCCESS MESSAGE - PREMIUM ==================== */

.success-message {
    display: none;
    text-align: center;
    padding: clamp(32px, 5vw, 48px) clamp(16px, 3vw, 24px);
    animation: successReveal 0.65s var(--ease-out-expo);
}

.success-message.show {
    display: block;
}

@keyframes successReveal {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.success-animation {
    margin: 0 auto 28px;
    width: 88px;
    height: 88px;
    position: relative;
}

/* Celebration Particles */
.success-animation::before,
.success-animation::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: successParticles 1.5s var(--ease-out-expo) 0.8s;
    opacity: 0;
}

.success-animation::before {
    background: var(--form-success);
    top: 10%;
    left: -20%;
}

.success-animation::after {
    background: #5c86cc;
    top: 20%;
    right: -20%;
    animation-delay: 0.9s;
}

@keyframes successParticles {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    20% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0) translateY(-30px);
    }
}

.success-checkmark {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: block;
    stroke-width: 2.5;
    stroke: var(--form-success);
    stroke-miterlimit: 10;
    animation: 
        successCheckmarkFill 0.45s ease-in-out 0.45s forwards,
        successCheckmarkScale 0.35s var(--ease-bounce) 1s both;
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.3));
}

.success-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2.5;
    stroke-miterlimit: 10;
    stroke: var(--form-success);
    fill: none;
    animation: successStroke 0.7s var(--ease-out-expo) forwards;
}

.success-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: var(--form-success);
    stroke-width: 3;
    animation: successStroke 0.4s var(--ease-out-expo) 0.85s forwards;
}

@keyframes successStroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes successCheckmarkFill {
    100% { 
        box-shadow: inset 0 0 0 44px rgba(16, 185, 129, 0.1);
    }
}

@keyframes successCheckmarkScale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.12, 1.12, 1); }
}

.success-title {
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    color: #08152b;
    margin-bottom: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #1e4d8c 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.success-text {
    color: var(--form-label);
    font-size: 1rem;
    margin-bottom: 28px;
    line-height: 1.7;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.btn-close-success {
    padding: 14px 36px;
    background: linear-gradient(135deg, #1e4d8c 0%, #5c86cc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: 
        transform 0.3s var(--ease-out-expo),
        box-shadow 0.4s var(--ease-smooth);
    box-shadow: 
         var(--ds-elevation-2);
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.btn-close-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transition: left 0.5s var(--ease-smooth);
}

.btn-close-success:hover {
    transform: translateY(-3px);
    box-shadow: 
         var(--ds-elevation-2);
}

.btn-close-success:hover::before {
    left: 100%;
}

.btn-close-success:active {
    transform: translateY(-1px);
}

/* ==================== FORM NOTE - ENHANCED ==================== */

.form-note {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
    padding: 14px 18px;
    background: linear-gradient(
        135deg,
        rgba(92, 134, 204, 0.06) 0%,
        rgba(30, 77, 140, 0.04) 100%
    );
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--form-label);
    line-height: 1.5;
    border: 1px solid rgba(92, 134, 204, 0.1);
}

.form-note svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #5c86cc;
}

/* ==================== CHECKBOX STYLING - ENHANCED ==================== */

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #1e4d8c;
    border-radius: 4px;
    transition: transform 0.2s var(--ease-bounce);
}

.form-checkbox input[type="checkbox"]:hover {
    transform: scale(1.1);
}

.form-checkbox input[type="checkbox"]:checked {
    animation: checkboxPop 0.3s var(--ease-bounce);
}

@keyframes checkboxPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.form-checkbox .checkbox-label {
    position: static;
    top: auto;
    left: auto;
    font-size: 0.9rem;
    color: var(--form-label);
    line-height: 1.6;
    cursor: pointer;
    padding: 0;
    background: transparent;
    pointer-events: auto;
}

.form-checkbox .checkbox-label a {
    color: #1e4d8c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: 
        color 0.3s var(--ease-smooth),
        text-decoration-color 0.3s var(--ease-smooth);
}

.form-checkbox .checkbox-label a:hover {
    color: #5c86cc;
    text-decoration-color: transparent;
}

/* ==================== FORM ANIMATIONS ==================== */

@keyframes formShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
    90% { transform: translateX(2px); }
}

/* ==================== FORM RESPONSIVE DESIGN ==================== */

@media (max-width: 768px) {
    .modal-content {
        padding: clamp(24px, 5vw, 32px) clamp(16px, 4vw, 24px);
        max-height: 95vh;
        border-radius: 20px;
    }
    
    .modal-close {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }
    
    .modal-title {
        font-size: clamp(1.4rem, 5vw, 1.7rem);
    }
    
    .modal-subtitle {
        font-size: 0.9rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }
    
    .form-group {
        margin-bottom: 18px;
    }
    
    .form-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .btn-whatsapp,
    .btn-submit {
        width: 100%;
        padding: 14px 24px;
    }
    
    .success-animation {
        width: 70px;
        height: 70px;
    }
    
    .success-checkmark {
        width: 70px;
        height: 70px;
    }
    
    .success-title {
        font-size: 1.5rem;
    }
    
    /* Mobile Modal Centering */
    #contactModal .modal-header,
    #contactModal .modal-header .modal-logo,
    #contactModal .modal-header .modal-title,
    #contactModal .modal-header .modal-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

@media (max-width: 480px) {
    .modal-wrapper {
        padding: 8px;
    }
    
    .modal-content {
        padding: 22px 14px;
        border-radius: 16px;
    }
    
    .modal-header {
        margin-bottom: 22px;
    }
    
    .modal-logo img {
        height: 48px;
    }
    
    .modal-title {
        font-size: 1.35rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 12px;
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    .form-group label {
        font-size: 0.9rem;
    }
    
    .btn-whatsapp,
    .btn-submit {
        padding: 14px 18px;
        font-size: 0.9rem;
        border-radius: 12px;
    }
    
    .form-note {
        font-size: 0.8rem;
        padding: 12px 14px;
    }
    
    /* Extra Small Screen Centering */
    #contactModal .modal-header,
    #contactModal .modal-header * {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
        padding: 16px 14px;
    }
    
    .btn-whatsapp,
    .btn-submit {
        min-height: 52px;
    }
    
    .form-checkbox input[type="checkbox"] {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
}

/* ==================== FORM ACCESSIBILITY ==================== */

/* Focus Visible for Keyboard Navigation */
.modal-close:focus-visible,
.btn-whatsapp:focus-visible,
.btn-submit:focus-visible,
.btn-close-success:focus-visible {
    outline: 3px solid #5c86cc;
    outline-offset: 3px;
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 3px solid #5c86cc;
    outline-offset: 2px;
}

.form-checkbox input[type="checkbox"]:focus-visible {
    outline: 3px solid #5c86cc;
    outline-offset: 3px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        border-width: 3px;
    }
    
    .btn-whatsapp,
    .btn-submit {
        border: 2px solid currentColor;
    }
    
    .form-error {
        font-weight: 700;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .contact-form,
    .modal-overlay,
    .modal-content,
    .form-group::before,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-group label,
    .btn-whatsapp,
    .btn-submit,
    .btn-whatsapp::before,
    .btn-submit::before,
    .btn-icon,
    .success-message,
    .success-checkmark,
    .success-circle,
    .success-check,
    .success-animation::before,
    .success-animation::after,
    .btn-close-success,
    .form-checkbox input[type="checkbox"],
    .word-counter {
        animation: none !important;
        transition: opacity 0.2s ease, color 0.2s ease !important;
    }
    
    .form-group.error input,
    .form-group.error select,
    .form-group.error textarea {
        animation: none !important;
    }
    
    .btn-whatsapp.loading::after,
    .btn-submit.loading::after {
        animation: buttonSpin 1.5s linear infinite !important;
    }
}

/* ==================== FORM PRINT STYLES ==================== */

@media print {
    .contact-modal,
    .modal-overlay,
    .form-buttons,
    .btn-whatsapp,
    .btn-submit,
    .modal-close,
    .form-note {
        display: none !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        border: 1px solid #333 !important;
        background: white !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .form-group label {
        color: #333 !important;
        position: static !important;
        display: block !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }
}

/* ============================================================================
   WEB DEVELOPMENT PAGE - HERO SECTION - ULTRA POLISHED
   ============================================================================ */

/* ==================== HERO SECTION - BASE ==================== */



/* Subtle Grid Pattern Overlay */


/* ==================== HERO BACKGROUND EFFECTS ==================== */













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



/* Secondary Gradient Orb */


@keyframes webdevGradientPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.6; 
    }
    50% { 
        transform: scale(1.15); 
        opacity: 0.35; 
    }
}

/* ==================== HERO CONTAINER LAYOUT ==================== */

.webdev-hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(40px, 6vw, 70px);
    align-items: center;
}



/* ==================== HERO BADGE - GLASSMORPHISM ==================== */



@keyframes badgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



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



/* ==================== HERO TITLE - ENHANCED ==================== */



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



@keyframes gradientTextShift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}





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

/* ==================== HERO SUBTITLE ==================== */



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

/* ==================== HERO CTA BUTTONS ==================== */



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



/* Button Shine Effect */




/* ==================== PRIMARY CTA BUTTON ==================== */







/* ==================== SECONDARY CTA BUTTON ==================== */













/* ==================== HERO TRUST INDICATORS ==================== */



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









/* ==================== HERO VISUAL SECTION ==================== */



@keyframes heroVisualReveal {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* ==================== BROWSER MOCKUP - PREMIUM ==================== */





/* Loading Bar Animation */


@keyframes webdevLoadingBar {
    0% { width: 0%; opacity: 1; }
    45% { width: 100%; opacity: 1; }
    50% { width: 100%; opacity: 0; }
    100% { width: 100%; opacity: 0; }
}

/* ==================== BROWSER HEADER ==================== */















@keyframes webdevDotPulse {
    0%, 100% { 
        transform: scale(1); 
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.12); 
        filter: brightness(1.15);
    }
}

/* ==================== BROWSER URL BAR ==================== */





/* HTTPS Indicator */


@keyframes webdevNetworkBlink {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    }
    50% { 
        opacity: 0.5;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
    }
}

/* ==================== BROWSER CONTENT AREA ==================== */





@keyframes webdevContentScroll {
    0%, 12% { transform: translateY(0); }
    28%, 38% { transform: translateY(-45px); }
    54%, 64% { transform: translateY(-90px); }
    80%, 100% { transform: translateY(0); }
}









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

/* ==================== WEB DEV HERO RESPONSIVE ==================== */

@media (max-width: 1024px) {
.webdev-hero .container {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
}






/* ==================== WEB DEV HERO ACCESSIBILITY ==================== */

/* Focus Visible States */


/* High Contrast Mode */


/* Reduced Motion */


/* ==================== WEB DEV HERO PRINT STYLES ==================== */

@media print {
.webdev-hero .container {
        display: block;
    }
}


/* ============================================================================
   END OF PART 7 ULTRA POLISHED CSS
   ============================================================================ */
/* ============================================================================
   RISENEX GLOBAL - PART 8 ULTRA POLISHED CSS
   Floating Elements, Pain Points, Premium Mobile Menu
   Premium Glassmorphism | Smooth Animations | Full Accessibility
   ============================================================================ */

/* ==================== CSS CUSTOM PROPERTIES (Part 8 Specific) ==================== */

/* ============================================================================
   BROWSER CONTENT EFFECTS - ENHANCED
   ============================================================================ */

/* Network Status Indicator */


@keyframes networkStatusPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 
            0 0 10px rgba(16, 185, 129, 0.5),
            0 0 20px rgba(16, 185, 129, 0.3);
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        box-shadow: 
            0 0 16px rgba(16, 185, 129, 0.7),
            0 0 28px rgba(16, 185, 129, 0.4);
        transform: scale(1.1);
    }
}

/* ==================== FLOATING ELEMENTS - PREMIUM ==================== */









/* Floating Element Positions */








@keyframes floatingElementDance {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    20% {
        transform: translateY(-12px) rotate(2deg);
    }
    40% {
        transform: translateY(-6px) rotate(-1deg);
    }
    60% {
        transform: translateY(8px) rotate(1.5deg);
    }
    80% {
        transform: translateY(14px) rotate(-2deg);
    }
}

/* ==================== SCROLL INDICATOR - ENHANCED ==================== */



@keyframes scrollIndicatorFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 0.85;
        transform: translateX(-50%) translateY(0);
    }
}









@keyframes scrollWheelBounce {
    0%, 100% { 
        transform: translateX(-50%) translateY(0); 
        opacity: 1; 
    }
    50% { 
        transform: translateX(-50%) translateY(12px); 
        opacity: 0.4; 
    }
}





/* ============================================================================
   PAIN POINTS SECTION - PREMIUM
   ============================================================================ */



/* Subtle Background Pattern */


/* ==================== SECTION HEADER ==================== */





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



/* Gradient Text Inside Title */


@keyframes sectionGradientShift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}



/* ==================== PAIN GRID ==================== */



/* ==================== PAIN CARD - PREMIUM GLASSMORPHISM ==================== */



/* Top Gradient Bar */


/* Corner Glow Effect */








/* ==================== PAIN ICON - ENHANCED ==================== */





/* Icon Variants with Enhanced Gradients */












/* ==================== PAIN CONTENT ==================== */











/* ==================== PAIN FEATURES LIST ==================== */











/* ==================== PAIN CTA ==================== */







/* ============================================================================
   SPACING FIX - Hero to Pain Points
   ============================================================================ */





/* ============================================================================
   MOBILE HAMBURGER MENU - PREMIUM WHITE THEME
   ============================================================================ */

/* ==================== SITE HEADER - ENHANCED ==================== */



/* Header scrolled state - add via JS */
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 
         var(--ds-elevation-3);
}



/* ==================== SITE LOGO ==================== */





.site-logo .logo-text {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        var(--menu-accent) 0%,
        var(--menu-accent-secondary) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

/* ==================== DESKTOP NAVIGATION ==================== */



@media (min-width: 1024px) {
.desktop-nav .nav-link {
        color: var(--menu-text-primary);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.95rem;
        transition: 
            color 0.3s var(--ease-smooth),
            transform 0.3s var(--ease-smooth);
        position: relative;
        padding: 6px 0;
    }
.desktop-nav .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--menu-accent), var(--menu-accent-secondary));
        border-radius: 4px;
        transition: width 0.35s var(--ease-out-expo);
    }
.desktop-nav .nav-link:hover {
        color: var(--menu-accent);
    }
.desktop-nav .nav-link:hover::after {
        width: 100%;
    }
}


/* ==================== HAMBURGER BUTTON - ENHANCED ==================== */

.hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    background: rgba(30, 77, 140, 0.08);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    z-index: 10001;
    position: relative;
    transition: 
        background 0.3s var(--ease-smooth),
        transform 0.3s var(--ease-bounce);
    -webkit-tap-highlight-color: transparent;
}

.hamburger:hover {
    background: rgba(30, 77, 140, 0.14);
    transform: scale(1.05);
}

.hamburger:active {
    transform: scale(0.94);
}

.hamburger-box {
    width: 24px;
    height: 20px;
    display: block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2.5px;
    background-color: var(--menu-accent);
    border-radius: 4px;
    position: absolute;
    transition: transform 0.35s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background-color 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo), filter 0.35s var(--ease-out-expo), max-height 0.35s var(--ease-out-expo), width 0.35s var(--ease-out-expo), height 0.35s var(--ease-out-expo), top 0.35s var(--ease-out-expo), left 0.35s var(--ease-out-expo);
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1.25px;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -8px;
    width: 20px;
    right: 0;
}

.hamburger-inner::after {
    bottom: -8px;
    width: 16px;
    right: 0;
}

/* Hamburger Active State (X) */
.hamburger.is-active {
    background: rgba(30, 77, 140, 0.12);
}

.hamburger.is-active .hamburger-inner {
    transform: rotate(45deg);
    background-color: var(--menu-accent);
}

.hamburger.is-active .hamburger-inner::before {
    top: 0;
    width: 24px;
    opacity: 0;
    transform: translateX(10px);
}

.hamburger.is-active .hamburger-inner::after {
    bottom: 0;
    width: 24px;
    transform: rotate(-90deg);
}

@media (min-width: 1024px) {
    .hamburger {
        display: none;
    }
}

/* ==================== MOBILE MENU OVERLAY ==================== */

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: 
        visibility 0.4s,
        opacity 0.4s var(--ease-smooth);
    pointer-events: none;
}

.mobile-menu-overlay.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Dark Backdrop */
.mobile-menu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s var(--ease-smooth);
}

.mobile-menu-overlay.is-active .mobile-menu-backdrop {
    opacity: 1;
}

/* ==================== MENU CONTAINER - PREMIUM WHITE ==================== */

.mobile-menu-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88%;
    max-width: 420px;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    background: var(--menu-bg);
    box-shadow: var(--shadow-menu-container);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 100000;
}

.mobile-menu-overlay.is-active .mobile-menu-container {
    transform: translateX(0);
}

/* ==================== MENU HEADER ==================== */

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--menu-border);
    background: linear-gradient(
        135deg,
        rgba(30, 77, 140, 0.04) 0%,
        rgba(198, 147, 10, 0.04) 100%
    );
    flex-shrink: 0;
}

.menu-logo .logo-text {
    font-size: 1.55rem;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        var(--menu-accent) 0%,
        var(--menu-accent-secondary) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.menu-close {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 77, 140, 0.08);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: var(--menu-accent);
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1;
    transition: 
        background 0.3s var(--ease-smooth),
        transform 0.4s var(--ease-bounce);
    -webkit-tap-highlight-color: transparent;
}

.menu-close:hover {
    background: rgba(30, 77, 140, 0.16);
    transform: rotate(90deg) scale(1.05);
}

.menu-close:active {
    transform: rotate(90deg) scale(0.95);
}

/* ==================== MENU CONTENT ==================== */

.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 0 2rem 0;
    background: var(--menu-bg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Custom Scrollbar */
.mobile-menu-content::-webkit-scrollbar {
    width: 6px;
}

.mobile-menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-menu-content::-webkit-scrollbar-thumb {
    background: rgba(30, 77, 140, 0.2);
    border-radius: 8px;
}

.mobile-menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 77, 140, 0.35);
}

/* ==================== NAVIGATION LIST ==================== */

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-item {
    opacity: 0;
    transform: translateX(40px);
    margin-bottom: 0.3rem;
}

/* Staggered Animation */
.mobile-menu-overlay.is-active .mobile-nav-item {
    animation: menuItemSlideIn 0.55s var(--ease-out-expo) forwards;
}

.mobile-menu-overlay.is-active .mobile-nav-item:nth-child(1) { animation-delay: 0.08s; }
.mobile-menu-overlay.is-active .mobile-nav-item:nth-child(2) { animation-delay: 0.14s; }
.mobile-menu-overlay.is-active .mobile-nav-item:nth-child(3) { animation-delay: 0.20s; }
.mobile-menu-overlay.is-active .mobile-nav-item:nth-child(4) { animation-delay: 0.26s; }
.mobile-menu-overlay.is-active .mobile-nav-item:nth-child(5) { animation-delay: 0.32s; }
.mobile-menu-overlay.is-active .mobile-nav-item:nth-child(6) { animation-delay: 0.38s; }

@keyframes menuItemSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================== NAVIGATION LINKS ==================== */

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 1.1rem 1.75rem;
    color: var(--menu-text-primary);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: 
        background 0.3s var(--ease-smooth),
        padding-left 0.35s var(--ease-out-expo),
        border-color 0.3s var(--ease-smooth);
    border-left: 4px solid transparent;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-link:hover {
    background: var(--menu-hover-bg);
    border-left-color: var(--menu-accent);
    padding-left: 2.1rem;
}

.mobile-nav-link:active {
    background: rgba(30, 77, 140, 0.1);
}

.nav-icon {
    font-size: 1.7rem;
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(30, 77, 140, 0.1) 0%,
        rgba(198, 147, 10, 0.08) 100%
    );
    border-radius: 12px;
    flex-shrink: 0;
    transition: 
        background 0.3s var(--ease-smooth),
        transform 0.35s var(--ease-bounce),
        box-shadow 0.3s var(--ease-smooth);
}

.mobile-nav-link:hover .nav-icon {
    background: linear-gradient(
        135deg,
        rgba(30, 77, 140, 0.18) 0%,
        rgba(198, 147, 10, 0.15) 100%
    );
    transform: scale(1.08);
    box-shadow: var(--shadow-nav-icon);
}

.nav-text {
    flex: 1;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* ==================== SUBMENU ==================== */

.submenu-arrow {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 
        transform 0.4s var(--ease-out-expo),
        background 0.3s var(--ease-smooth);
    color: var(--menu-text-secondary);
    font-size: 0.85rem;
    background: rgba(30, 77, 140, 0.08);
    border-radius: 8px;
}

.has-submenu.is-open .submenu-arrow {
    transform: rotate(180deg);
    background: rgba(30, 77, 140, 0.15);
    color: var(--menu-accent);
}

.mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        rgba(30, 77, 140, 0.02) 0%,
        rgba(198, 147, 10, 0.02) 100%
    );
    transition: 
        max-height 0.5s var(--ease-out-expo),
        padding 0.5s var(--ease-out-expo);
}

.has-submenu.is-open .mobile-submenu {
    max-height: 1200px;
    padding: 0.85rem 0;
    margin-bottom: 0.6rem;
}

.mobile-submenu-item {
    opacity: 0;
    transform: translateX(24px);
    transition: 
        opacity 0.35s var(--ease-smooth),
        transform 0.35s var(--ease-out-expo);
}

.has-submenu.is-open .mobile-submenu-item {
    opacity: 1;
    transform: translateX(0);
}

.has-submenu.is-open .mobile-submenu-item:nth-child(1) { transition-delay: 0.08s; }
.has-submenu.is-open .mobile-submenu-item:nth-child(2) { transition-delay: 0.14s; }
.has-submenu.is-open .mobile-submenu-item:nth-child(3) { transition-delay: 0.20s; }
.has-submenu.is-open .mobile-submenu-item:nth-child(4) { transition-delay: 0.26s; }
.has-submenu.is-open .mobile-submenu-item:nth-child(5) { transition-delay: 0.32s; }

.mobile-submenu-link {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.75rem 1rem 2.85rem;
    color: #34495e;
    text-decoration: none;
    transition: 
        background 0.3s var(--ease-smooth),
        padding-left 0.35s var(--ease-out-expo);
    background: transparent;
    border-radius: 0 12px 12px 0;
    margin-right: 0.6rem;
    -webkit-tap-highlight-color: transparent;
}

.mobile-submenu-link:hover {
    background: rgba(30, 77, 140, 0.08);
    padding-left: 3.15rem;
}

.mobile-submenu-link:active {
    background: rgba(30, 77, 140, 0.12);
}

.submenu-icon {
    font-size: 1.9rem;
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--menu-bg);
    border-radius: 16px;
    box-shadow: 
         var(--ds-elevation-2);
    flex-shrink: 0;
    transition: 
        transform 0.35s var(--ease-bounce),
        box-shadow 0.35s var(--ease-smooth);
}

.mobile-submenu-link:hover .submenu-icon {
    transform: scale(1.1);
    box-shadow: 
         var(--ds-elevation-2);
}

.submenu-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.submenu-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--menu-text-primary);
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.submenu-desc {
    font-size: 0.82rem;
    color: var(--menu-text-secondary);
    line-height: 1.35;
}

/* ==================== SORIVA CTA - PREMIUM AI BUTTON ==================== */

.mobile-menu-footer {
    position: relative;
    padding: 1.35rem 1.6rem 1.6rem;
    padding-bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 1.35rem));
    border-top: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(248, 249, 250, 0.5) 25%,
        rgba(255, 255, 255, 1) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(24px);
    transition: 
        opacity 0.55s var(--ease-out-expo) 0.4s,
        transform 0.55s var(--ease-out-expo) 0.4s;
    margin-top: auto;
}

.mobile-menu-overlay.is-active .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.soriva-cta {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.35rem 1.6rem;
    background: linear-gradient(
        135deg,
        var(--menu-accent) 0%,
        var(--menu-accent-secondary) 50%,
        var(--menu-accent) 100%
    );
    background-size: 200% 200%;
    border-radius: 20px;
    text-decoration: none;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 
         var(--ds-elevation-1), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    transition: 
        transform 0.45s var(--ease-out-expo),
        box-shadow 0.45s var(--ease-smooth);
    animation: sorivaGradientShift 7s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

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

/* Glass Overlay */
.soriva-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    border-radius: 20px;
    pointer-events: none;
}

/* Shimmer Effect */
.soriva-cta::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: sorivaShimmer 4s ease-in-out infinite;
}

@keyframes sorivaShimmer {
    0%, 100% {
        left: -100%;
    }
    45%, 55% {
        left: 150%;
    }
}

.soriva-cta:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
        0 0 50px rgba(30, 77, 140, 0.5),
        0 14px 42px rgba(30, 77, 140, 0.45),
        0 8px 20px rgba(198, 147, 10, 0.35);
}

.soriva-cta:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 8px 28px rgba(30, 77, 140, 0.4),
        0 4px 12px rgba(198, 147, 10, 0.3);
}

.soriva-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    font-size: 1.8rem;
    flex-shrink: 0;
    position: relative;
    box-shadow: 
         var(--ds-elevation-2), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    transition: 
        transform 0.45s var(--ease-bounce),
        border-color 0.35s var(--ease-smooth);
}

/* Icon Glow */
.soriva-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.35) 0%,
        transparent 70%
    );
    border-radius: 16px;
    pointer-events: none;
}

.soriva-cta:hover .soriva-icon {
    animation: sorivaIconLaunch 0.65s var(--ease-bounce) forwards;
    border-color: rgba(255, 255, 255, 0.5);
}

@keyframes sorivaIconLaunch {
    0% {
        transform: translateY(0) scale(1);
    }
    30% {
        transform: translateY(-5px) scale(1.12) rotate(-6deg);
    }
    60% {
        transform: translateY(-2px) scale(1.08) rotate(4deg);
    }
    100% {
        transform: translateY(0) scale(1.1) rotate(0deg);
    }
}

.soriva-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    z-index: 1;
}

.soriva-title {
    font-size: 1.18rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.soriva-subtitle {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.25;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
    text-transform: uppercase;
}

.soriva-arrow {
    font-size: 1.55rem;
    font-weight: 300;
    color: #ffffff;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.45s var(--ease-out-expo);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.soriva-cta:hover .soriva-arrow {
    animation: sorivaArrowBounce 0.9s ease-in-out infinite;
}

@keyframes sorivaArrowBounce {
    0%, 100% {
        transform: translateX(6px) scale(1.1);
    }
    50% {
        transform: translateX(12px) scale(1.18);
    }
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */



@media (max-width: 1024px) {
.webdev-hero .container {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}


@media (max-width: 768px) {
.mobile-menu-container {
        width: 92%;
        max-width: 380px;
    }
.mobile-nav-link {
        padding: 1rem 1.5rem;
    }
.nav-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
.soriva-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
}


@media (max-width: 480px) {
.mobile-menu-header {
        padding: 1.25rem 1.5rem;
    }
.mobile-nav-link {
        padding: 0.95rem 1.25rem;
        gap: 1rem;
    }
.nav-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 1.5rem;
    }
.mobile-submenu-link {
        padding-left: 2.5rem;
    }
.submenu-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
.soriva-cta {
        padding: 1.2rem 1.35rem;
    }
.soriva-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 1.6rem;
    }
.soriva-title {
        font-size: 1.1rem;
    }
.soriva-subtitle {
        font-size: 0.82rem;
    }
}


/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
    .hamburger {
        min-height: 48px;
        min-width: 48px;
    }
    
    .mobile-nav-link {
        min-height: 56px;
    }
    
    .mobile-submenu-link {
        min-height: 60px;
    }
    
    .menu-close {
        min-height: 48px;
        min-width: 48px;
    }
    
    .soriva-cta {
        min-height: 80px;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus Visible States */
.hamburger:focus-visible,
.menu-close:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-submenu-link:focus-visible,
.soriva-cta:focus-visible,
.webdev-btn-primary:focus-visible,
.webdev-btn-secondary:focus-visible {
    outline: 3px solid var(--menu-accent);
    outline-offset: 3px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
.mobile-menu-container {
        border-left: 2px solid #333;
    }
.mobile-nav-link,
    .mobile-submenu-link {
        border: 1px solid transparent;
    }
.mobile-nav-link:hover,
    .mobile-submenu-link:hover {
        border-color: #333;
    }
.soriva-cta {
        border: 2px solid white;
    }
}


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .webdev-floating-element,
    .webdev-scroll-indicator,
    .webdev-scroll-wheel,
    .webdev-browser-content::before,
    .webdev-section-badge,
    .webdev-section-title .webdev-gradient-text,
    .webdev-pain-card,
    .webdev-pain-card::before,
    .webdev-pain-card::after,
    .webdev-pain-icon,
    .webdev-pain-icon svg,
    .webdev-pain-features li,
    .webdev-pain-features svg,
    .hamburger,
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after,
    .mobile-menu-overlay,
    .mobile-menu-backdrop,
    .mobile-menu-container,
    .mobile-nav-item,
    .mobile-nav-link,
    .nav-icon,
    .submenu-arrow,
    .mobile-submenu,
    .mobile-submenu-item,
    .mobile-submenu-link,
    .submenu-icon,
    .mobile-menu-footer,
    .soriva-cta,
    .soriva-cta::before,
    .soriva-cta::after,
    .soriva-icon,
    .soriva-arrow,
    .menu-close,
    .site-header {
        animation: none !important;
        transition: opacity 0.2s ease, color 0.2s ease !important;
    }
    
    /* Keep essential transitions for usability */
    .mobile-submenu {
        transition: max-height 0.3s ease !important;
    }
    
    .mobile-menu-container {
        transition: transform 0.3s ease !important;
    }
    
    .mobile-menu-overlay {
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }
}

/* Skip to Content Link (Screen Readers) */




/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
.site-header,
    .hamburger,
    .mobile-menu-overlay,
    .webdev-scroll-indicator,
    .webdev-floating-element,
    .soriva-cta,
    .mobile-menu-footer {
        display: none !important;
    }
}


/* ============================================================================
   END OF PART 8 ULTRA POLISHED CSS
   ============================================================================ */
/* ============================================================================
   RISENEX GLOBAL - PART 9 ULTRA POLISHED CSS
   Soriva Badge, Why Choose Us, Video Slider, Lightbox, 3D Testimonials
   Premium Glassmorphism | Smooth Animations | Full Accessibility
   ============================================================================ */

/* ==================== CSS CUSTOM PROPERTIES (Part 9 Specific) ==================== */

/* ============================================================================
   SORIVA BADGE - PREMIUM ENHANCED
   ============================================================================ */

.soriva-badge {
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 2;
    
    /* Premium Gradient Background */
    background: linear-gradient(
        135deg,
        var(--badge-primary) 0%,
        var(--badge-secondary) 50%,
        var(--badge-primary) 100%
    );
    background-size: 200% 200%;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.45rem 0.9rem;
    border-radius: 16px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    
    /* Multi-layer Shadow */
    box-shadow: 
        0 0 0 2px rgba(255, 255, 255, 0.35),
        0 4px 18px var(--badge-glow),
        0 2px 8px rgba(255, 71, 87, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    
    /* Gradient Animation */
    animation: badgeGradientPulse 3s ease-in-out infinite;
    transition: 
        transform 0.35s var(--ease-bounce),
        box-shadow 0.35s var(--ease-smooth);
}

@keyframes badgeGradientPulse {
    0%, 100% { 
        background-position: 0% 50%;
        filter: brightness(1);
    }
    50% { 
        background-position: 100% 50%;
        filter: brightness(1.1);
    }
}

.soriva-badge:hover {
    transform: scale(1.08);
    box-shadow: 
        0 0 0 3px rgba(255, 255, 255, 0.45),
        0 6px 24px var(--badge-glow),
        0 4px 12px rgba(255, 71, 87, 0.4);
}

/* Shimmer Effect */
.soriva-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.65) 50%,
        transparent 100%
    );
    border-radius: inherit;
    animation: badgeShimmer 3.5s ease-in-out infinite;
}

@keyframes badgeShimmer {
    0%, 100% { left: -100%; }
    45%, 55% { left: 100%; }
}

/* ============================================================================
   BODY SCROLL LOCK
   ============================================================================ */

body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport for mobile */
    touch-action: none;
    -webkit-overflow-scrolling: none;
}

/* Prevent content shift when scrollbar disappears */
body.menu-open {
    padding-right: var(--scrollbar-width, 0);
}

/* ============================================================================
   HIDE ON DESKTOP / MOBILE UTILITIES
   ============================================================================ */

@media (min-width: 1024px) {
.mobile-menu-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


@media (max-width: 1023px) {
    .btn-soriva-wrapper,
    .desktop-only {
        display: none !important;
    }
}

/* ============================================================================
   WHY CHOOSE US SECTION - PREMIUM GLASSMORPHISM
   ============================================================================ */



/* Background Decorations - Enhanced */




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

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

/* ==================== SECTION HEADER ==================== */

.section-header {
    text-align: center;
    max-width: 840px;
    margin: 0 auto clamp(60px, 8vw, 90px);
    position: relative;
    z-index: 1;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--benefit-gradient-start);
    background: linear-gradient(
        135deg,
        rgba(30, 77, 140, 0.1) 0%,
        rgba(217, 119, 6, 0.08) 100%
    );
    padding: 10px 24px;
    border-radius: var(--ds-radius-pill);
    margin-bottom: 24px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid rgba(30, 77, 140, 0.1);
    box-shadow:  var(--ds-elevation-2);
    animation: labelFloat 4s ease-in-out infinite;
}

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

.section-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: #1e293b;
    line-height: 1.15;
    margin-bottom: 22px;
}

.gradient-text {
    background: linear-gradient(
        135deg,
        var(--benefit-gradient-start) 0%,
        var(--benefit-gradient-end) 50%,
        var(--benefit-gradient-start) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextFlow 5s ease-in-out infinite;
}

@keyframes gradientTextFlow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}



/* ==================== BENEFITS GRID ==================== */



/* ==================== BENEFIT CARD - PREMIUM GLASSMORPHISM ==================== */



/* Hover Glow Effect */


/* Corner Shine */








/* ==================== BENEFIT ICON ==================== */











/* ==================== BENEFIT CONTENT ==================== */













/* Checkmark Icon */






/* ==================== WHY CHOOSE CTA BOX ==================== */





/* Animated Gradient Background */


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

.cta-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.25;
}





/* Button Gradient Hover */


/* Button Shine */








.cta-btn .btn-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.35s var(--ease-bounce);
}

.cta-btn:hover .btn-icon {
    transform: translateX(6px);
}



/* ============================================================================
   VIDEO SLIDER - NETFLIX-STYLE PREMIUM
   ============================================================================ */



/* Subtle Pattern Overlay */


.video-showcase .container {
    max-width: 100%;
    padding: 0 clamp(20px, 5vw, 70px);
    position: relative;
    z-index: 1;
}

/* ==================== VIDEO SLIDER HEADER ==================== */

.video-showcase .section-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    text-align: center;
    margin: 0 0 14px 0;
    color: #1a1a1a;
}

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 400;
    text-align: center;
    margin: 0 auto clamp(40px, 6vw, 60px) auto;
    color: #6b7280;
    max-width: 640px;
    line-height: 1.7;
}

/* ==================== SLIDER WRAPPER ==================== */



/* ==================== NAVIGATION BUTTONS ==================== */





















/* ==================== VIDEO SLIDER TRACK ==================== */



/* Infinite Scroll Animation */
.video-slider.infinite-scroll {
    /* Distance and duration are set from JS, not from a percentage.
       translateX(-50%) resolves against the ELEMENT's width, and this flex
       container was constrained to its parent at 697px while its content ran
       to 12,609px — so the strip crawled 349px and snapped back instead of
       scrolling one full set. Sizing the element to its content fixed the
       percentage but changed how the cards themselves sized, so the distance
       is now measured and applied directly, at a fixed px-per-second. */
    animation: videoInfiniteScroll var(--marquee-duration, 45s) linear infinite;
    will-change: transform;
}

@keyframes videoInfiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--marquee-distance, -50%));
    }
}

/* Pause on Hover */


/* ==================== VIDEO CARDS ==================== */





/* Focus Ring */
.video-card.lightbox-active {
    transform: scale(1.08);
    box-shadow: 
         var(--ds-elevation-3);
    z-index: 100;
}

/* ==================== VIDEO PLAYER ==================== */





/* ==================== VIDEO OVERLAY ==================== */





/* ==================== VIDEO INFO ==================== */









/* ============================================================================
   VIDEO LIGHTBOX - ELEGANT BLURRED BACKGROUND
   ============================================================================ */

.video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 50px);
    
    /* The dim MUST come from a real background colour. Relying on
       backdrop-filter alone left the overlay almost invisible anywhere the
       property is unsupported — the panel floated over unblurred, fully
       readable page content. The blur is now an enhancement on top. */
    background: rgba(8, 21, 43, 0.74);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity 0.4s var(--ease-netflix),
        visibility 0.4s;
}

.video-lightbox.active {
    opacity: 1;
    visibility: visible;
}

/* ==================== LIGHTBOX CONTENT ==================== */

.lightbox-content {
    width: 100%;
    max-width: 1050px;
    transform: scale(0.92) translateY(35px);
    transition: transform 0.5s var(--ease-netflix);
}

.video-lightbox.active .lightbox-content {
    transform: scale(1) translateY(0);
}

/* ==================== LIGHTBOX WRAPPER ==================== */

.lightbox-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
         var(--ds-elevation-4);
    animation: lightboxReveal 0.45s var(--ease-netflix);
}

@keyframes lightboxReveal {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==================== LIGHTBOX VIDEO CONTAINER ==================== */

.lightbox-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.lightbox-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== LIGHTBOX INFO ==================== */

.lightbox-info {
    padding: clamp(20px, 3vw, 28px) clamp(24px, 3vw, 32px);
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.75)
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lightbox-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.5px;
}

.lightbox-desc {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* ==================== LIGHTBOX CLOSE BUTTON ==================== */

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 
        background 0.3s var(--ease-smooth),
        transform 0.4s var(--ease-bounce),
        border-color 0.3s var(--ease-smooth);
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-close:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.12) rotate(90deg);
    border-color: rgba(255, 255, 255, 0.25);
}

.lightbox-close:active {
    transform: scale(0.95) rotate(90deg);
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
    color: white;
}

/* ============================================================================
   TESTIMONIALS SECTION - 3D CAROUSEL
   ============================================================================ */



/* Subtle Background Pattern */




/* ==================== TESTIMONIALS HEADER ==================== */







/* ==================== 3D CAROUSEL WRAPPER ==================== */







/* ==================== TESTIMONIAL CARDS - 3D POSITIONING ==================== */



/* Active Card (Center) */


/* Side Cards */
.webdev-testimonial-card.webdev-prev {
    transform: translate(-50%, -50%) translateX(-480px) translateZ(-320px) scale(0.72) rotateY(38deg);
    opacity: 0.35;
    z-index: 5;
}

.webdev-testimonial-card.webdev-next {
    transform: translate(-50%, -50%) translateX(480px) translateZ(-320px) scale(0.72) rotateY(-38deg);
    opacity: 0.35;
    z-index: 5;
}

.webdev-testimonial-card.webdev-far-prev,
.webdev-testimonial-card.webdev-far-next {
    transform: translate(-50%, -50%) translateX(-650px) translateZ(-550px) scale(0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* ==================== GLASSMORPHISM CARD DESIGN ==================== */



/* Shine Effect */




@keyframes testimonialCardShine {
    0% { left: -100%; }
    45%, 55% { left: 100%; }
    100% { left: 100%; }
}

/* Active Card Enhancement */


/* ==================== CARD HEADER ==================== */







/* Avatar Glow Ring */




@keyframes avatarGlowPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.35; 
    }
    50% { 
        transform: scale(1.12); 
        opacity: 0.5; 
    }
}









/* ==================== STAR RATINGS ==================== */









/* Star Animation on Active Card */








@keyframes starTwinkle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* ==================== TESTIMONIAL TEXT ==================== */





/* Quote Mark */




/* ==================== NAVIGATION BUTTONS ==================== */













/* ==================== CAROUSEL INDICATORS ==================== */







.webdev-indicator.webdev-active {
    background: linear-gradient(
        135deg,
        var(--testimonial-accent) 0%,
        var(--testimonial-accent-alt) 100%
    );
    border-color: rgba(30, 77, 140, 0.25);
    width: 44px;
    border-radius: 12px;
    box-shadow: 
         var(--ds-elevation-2);
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .mobile-menu-footer {
        background: linear-gradient(
            180deg,
            rgba(20, 20, 30, 0) 0%,
            rgba(25, 25, 35, 0.55) 30%,
            rgba(30, 30, 40, 1) 100%
        );
    }
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1024px) {
.section-title {
        font-size: clamp(1.75rem, 4.5vw, 2.6rem);
    }
.cta-title {
        font-size: clamp(1.4rem, 3vw, 1.85rem);
    }
.video-showcase .container {
        padding: 0 44px;
    }
.webdev-testimonial-card.webdev-prev {
        transform: translate(-50%, -50%) translateX(-420px) translateZ(-270px) scale(0.68) rotateY(38deg);
    }
.webdev-testimonial-card.webdev-next {
        transform: translate(-50%, -50%) translateX(420px) translateZ(-270px) scale(0.68) rotateY(-38deg);
    }
}


@media (max-width: 768px) {
.section-header {
        margin-bottom: 55px;
    }
.section-title {
        font-size: clamp(1.6rem, 5vw, 2.1rem);
    }
.cta-title {
        font-size: 1.35rem;
    }
.video-showcase .container {
        padding: 0 22px;
    }
.video-lightbox {
        padding: 22px;
        backdrop-filter: blur(18px) brightness(0.55);
        -webkit-backdrop-filter: blur(18px) brightness(0.55);
    }
.lightbox-content {
        max-width: 100%;
    }
.lightbox-title {
        font-size: 1.35rem;
    }
.lightbox-desc {
        font-size: 0.9rem;
    }
.lightbox-info {
        padding: 22px;
    }
.lightbox-close {
        width: 42px;
        height: 42px;
        top: 14px;
        right: 14px;
    }
.lightbox-close svg {
        width: 20px;
        height: 20px;
    }
.webdev-testimonial-card.webdev-prev,
    .webdev-testimonial-card.webdev-next {
        opacity: 0;
        pointer-events: none;
    }
.webdev-indicator.webdev-active {
        width: 34px;
    }
}


@media (max-width: 480px) {
.section-title {
        font-size: 1.65rem;
    }
.soriva-badge {
        font-size: 0.62rem;
        padding: 0.38rem 0.75rem;
    }
}


@media (max-width: 360px) {
    .soriva-cta {
        gap: 0.95rem;
        padding: 1.05rem 1.25rem;
    }
    
    .soriva-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 1.55rem;
    }
    
    .soriva-badge {
        font-size: 0.58rem;
        padding: 0.35rem 0.7rem;
    }
}

/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
.lightbox-close {
        min-height: 48px;
        min-width: 48px;
    }
}


/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus Visible States */
.slider-btn:focus-visible,
.lightbox-close:focus-visible,
.webdev-carousel-nav-btn:focus-visible,
.webdev-indicator:focus-visible,
.video-card:focus-visible,
.benefit-card:focus-visible,
.cta-btn:focus-visible {
    outline: 3px solid var(--testimonial-accent);
    outline-offset: 3px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
.lightbox-wrapper {
        border: 2px solid white;
    }
}


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.soriva-badge,
    .soriva-badge::before,
    .webdev-why-choose::before,
    .webdev-why-choose::after,
    .section-label,
    .gradient-text,
    .benefit-card,
    .benefit-card::before,
    .benefit-card::after,
    .benefit-icon-bg,
    .benefit-icon,
    .benefit-features li,
    .benefit-features li::before,
    .why-choose-cta::before,
    .cta-btn,
    .cta-btn::before,
    .cta-btn::after,
    .cta-btn .btn-icon,
    .video-slider,
    .video-slider.infinite-scroll,
    .video-card,
    .video-player,
    .video-overlay,
    .video-info,
    .slider-btn,
    .slider-btn svg,
    .video-lightbox,
    .lightbox-content,
    .lightbox-wrapper,
    .lightbox-close,
    .webdev-carousel-3d-track,
    .webdev-testimonial-card,
    .webdev-card-glass,
    .webdev-card-glass::before,
    .webdev-client-avatar,
    .webdev-client-avatar::after,
    .webdev-star,
    .webdev-testimonial-text,
    .webdev-carousel-nav-btn,
    .webdev-carousel-nav-btn svg,
    .webdev-indicator {
        animation: none !important;
        transition: opacity 0.2s ease, color 0.2s ease !important;
    }
.video-slider.infinite-scroll {
        animation: none !important;
    }
.video-lightbox {
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }
}


/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
.webdev-why-choose::before,
    .webdev-why-choose::after,
    .why-choose-cta::before,
    .video-showcase,
    .video-lightbox,
    .slider-btn,
    .webdev-carousel-nav-btn,
    .webdev-carousel-indicators,
    .soriva-badge {
        display: none !important;
    }
.section-title,
    .benefit-title,
    .cta-title,
    .webdev-testimonials-title,
    .webdev-client-name {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
.gradient-text {
        background: none !important;
        -webkit-text-fill-color: #000 !important;
    }
}


/* ============================================================================
   SMOOTH FONT RENDERING
   ============================================================================ */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   END OF PART 9 ULTRA POLISHED CSS
   ============================================================================ */
/* ================================ */
/* FAQ SECTION - EXCEPTIONAL DESIGN */
/* WHITE THEME WITH GLASSMORPHISM */
/* ================================ */

/* Section Container */
/* ============================================================================
   RISENEX GLOBAL - PART 10 ULTRA POLISHED CSS
   FAQ Accordion Section, AI Hero Section (The Vision)
   Premium Glassmorphism | Smooth Animations | Full Accessibility
   ============================================================================ */

/* ==================== CSS CUSTOM PROPERTIES (Part 10 Specific) ==================== */

/* ============================================================================
   FAQ SECTION - PREMIUM ACCORDION
   ============================================================================ */



/* Subtle Background Pattern */


/* Secondary Pattern Layer */




/* ==================== FAQ HEADER ==================== */







/* ==================== FAQ ACCORDION CONTAINER ==================== */



/* ==================== FAQ ITEM - GLASSMORPHISM CARD ==================== */



/* Staggered Animation */













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

/* Hover State */


/* Active/Open State */
.webdev-faq-item.webdev-active {
    background: var(--faq-bg-active);
    border-color: var(--faq-border-active);
    box-shadow: var(--shadow-faq-active);
    transform: translateY(-4px);
}

/* ==================== QUESTION BUTTON ==================== */



/* Hover Gradient Overlay */




/* ==================== QUESTION ICON ==================== */





.webdev-faq-item.webdev-active .webdev-faq-icon {
    transform: scale(1.12) rotate(6deg);
    box-shadow: 
         var(--ds-elevation-2);
}

.webdev-faq-item:hover:not(.webdev-active) .webdev-faq-icon {
    transform: scale(1.06);
    box-shadow: 
         var(--ds-elevation-2);
}

/* ==================== QUESTION TEXT ==================== */



.webdev-faq-item.webdev-active .webdev-faq-question-text {
    background: linear-gradient(
        135deg,
        var(--faq-accent) 0%,
        var(--faq-accent-alt) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==================== ARROW ICON ==================== */





.webdev-faq-item.webdev-active .webdev-faq-arrow {
    background: linear-gradient(
        135deg,
        var(--faq-accent) 0%,
        var(--faq-accent-alt) 100%
    );
    color: #ffffff;
    transform: rotate(180deg);
    box-shadow:  var(--ds-elevation-2);
}

.webdev-faq-item:hover:not(.webdev-active) .webdev-faq-arrow {
    background: rgba(30, 77, 140, 0.12);
    color: var(--faq-accent);
}

/* ==================== ANSWER SECTION ==================== */



.webdev-faq-item.webdev-active .webdev-faq-answer {
    max-height: 900px;
}



.webdev-faq-item.webdev-active .webdev-faq-answer-content {
    opacity: 1;
    transform: translateY(0);
}





/* ==================== ANSWER LIST STYLING ==================== */







/* Arrow Bullet */






/* ============================================================================
   AI HERO SECTION - THE VISION
   ============================================================================ */



/* ==================== BACKGROUND EFFECTS ==================== */

/* Grid Pattern */


/* Animated Gradient Orbs */






@keyframes aiHeroOrbFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    25% { 
        transform: translate(35px, -35px) scale(1.06); 
    }
    50% { 
        transform: translate(-25px, 25px) scale(0.94); 
    }
    75% { 
        transform: translate(25px, 35px) scale(1.03); 
    }
}

/* ==================== HERO CONTAINER ==================== */



/* ==================== HERO CONTENT ==================== */



/* ==================== MAIN HEADLINE ==================== */









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

/* ==================== GRADIENT TEXT ==================== */



@keyframes aiHeroGradientFlow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Animated Underline */


@keyframes aiHeroUnderlineReveal {
    to { 
        opacity: 1;
        transform: scaleX(1);
    }
}

/* ==================== SUBHEADLINE ==================== */



@keyframes aiHeroFadeIn {
    to { opacity: 1; }
}

/* ==================== PHILOSOPHY PARAGRAPH ==================== */



/* ==================== CTA BUTTONS ==================== */





/* ==================== PRIMARY BUTTON ==================== */



/* Gradient Hover Overlay */


/* Shine Effect */










/* ==================== SECONDARY BUTTON ==================== */







/* ==================== BUTTON CONTENT ==================== */









/* ==================== HERO VISUAL - AI NETWORK ==================== */



@keyframes aiHeroVisualReveal {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}



/* ==================== SVG ANIMATION ==================== */



/* ==================== CIRCLES ANIMATION ==================== */







@keyframes aiHeroCirclePulse {
    0%, 100% { 
        stroke-opacity: 1;
        transform: scale(1);
    }
    50% { 
        stroke-opacity: 0.55;
        transform: scale(1.06);
    }
}

/* ==================== NODES ANIMATION ==================== */










@keyframes aiHeroNodeGlow {
    0%, 100% { 
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(30, 77, 140, 0.65));
    }
    50% { 
        opacity: 0.65;
        filter: drop-shadow(0 0 18px rgba(30, 77, 140, 0.95));
    }
}

/* ==================== LINES ANIMATION ==================== */








@keyframes aiHeroLineDraw {
    0%, 100% { stroke-dashoffset: 100; }
    50% { stroke-dashoffset: 0; }
}

/* ==================== FLOATING PARTICLES ==================== */









@keyframes aiHeroParticleFloat {
    0%, 100% { 
        transform: translate(0, 0);
        opacity: 0.55;
    }
    50% { 
        transform: translate(25px, -35px);
        opacity: 0.9;
    }
}

/* ==================== SCROLL INDICATOR ==================== */







@keyframes aiHeroScrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */







/* Touch Device Optimization */


/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus Visible States */




/* High Contrast Mode */
@media (prefers-contrast: high) {
.webdev-faq-item.webdev-active {
        border-color: var(--faq-accent);
    }
}


/* Reduced Motion */


/* Scroll Margin for FAQ Items */


/* ============================================================================
   PRINT STYLES
   ============================================================================ */



/* ============================================================================
   END OF PART 10 ULTRA POLISHED CSS
   ============================================================================ *//* ====================================
   SECTION 2: PHILOSOPHY - "THE WHY"
   ==================================== */
/* ============================================================================
   RISENEX GLOBAL - PART 11 ULTRA POLISHED CSS
   AI Philosophy Section, Core Engine Section (How It Works)
   Premium Glassmorphism | Orbital Animations | Full Accessibility
   ============================================================================ */

/* ==================== CSS CUSTOM PROPERTIES (Part 11 Specific) ==================== */

/* ============================================================================
   AI PHILOSOPHY SECTION
   ============================================================================ */





/* ==================== BACKGROUND ELEMENTS ==================== */



/* Grid Pattern */


/* Floating Orbs */






@keyframes philOrbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(35px, -35px) scale(1.08);
    }
    66% {
        transform: translate(-25px, 25px) scale(0.92);
    }
}

/* ==================== PHILOSOPHY HEADER ==================== */



/* Badge */


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

/* Title */


/* Gradient Text */
.gradient-text {
    background: linear-gradient(
        135deg,
        var(--phil-accent) 0%,
        var(--phil-accent-alt) 50%,
        var(--phil-accent) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextFlow 5s ease-in-out infinite;
}

@keyframes gradientTextFlow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Subtitle */


/* ==================== PHILOSOPHY GRID ==================== */



/* ==================== PHILOSOPHY CARD ==================== */





/* Card Glow Effect */




/* Corner Shine */




/* ==================== CARD ICON ==================== */







/* ==================== CARD CONTENT ==================== */









/* ==================== PHILOSOPHY STATEMENT ==================== */







/* Quote Icon */






/* Quote Text */


/* Author */




/* ==================== CORE PRINCIPLES ==================== */







/* ==================== PRINCIPLE ITEM ==================== */





/* Large Number */










/* ============================================================================
   AI CORE ENGINE SECTION - HOW IT WORKS
   ============================================================================ */





/* ==================== BACKGROUND ELEMENTS ==================== */



/* Grid Pattern */


/* Background Orbs */






@keyframes coreOrbFloat {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(55px, -55px);
    }
}

/* ==================== CORE HEADER ==================== */



/* Badge */


@keyframes coreBadgePulse {
    0%, 100% { 
        box-shadow:  var(--ds-elevation-1);
    }
    50% { 
        box-shadow:  var(--ds-elevation-2);
    }
}

/* Title */


.ai-core-title .gradient-text {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #dde7f6 50%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: coreGradientShift 4s ease-in-out infinite;
}

@keyframes coreGradientShift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Subtitle */


/* ==================== CORE ARCHITECTURE ==================== */



/* ==================== CENTER HUB ==================== */







/* Hub Icon */




@keyframes hubIconRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hub Text */




/* Hub Pulse Effect */


@keyframes hubPulseExpand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.6);
        opacity: 0;
    }
}

/* ==================== ORBITING COMPONENTS ==================== */





/* Staggered Fade In */







@keyframes orbitItemFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Orbit Positions */












/* ==================== ORBIT CARD ==================== */





/* Orbit Icon */






/* Orbit Text */




/* ==================== CONNECTOR LINES ==================== */





/* Side Connectors */


/* Top Connector (1) */


/* Top-Right Connector (2) */


/* Bottom-Right Connector (3) */


/* Bottom Connector (4) */


/* Bottom-Left Connector (5) */


/* Top-Left Connector (6) */


/* ==================== TECHNOLOGY STACK ==================== */







/* ==================== TECH ITEM ==================== */





/* Tech Icon */






/* Tech Text */




/* ==================== PROCESS FLOW TIMELINE ==================== */







/* ==================== FLOW STEP ==================== */









@keyframes flowStepSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* Step Number */




/* Step Content */








/* Connecting Line */




/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */









/* Touch Device Optimization */


/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus Visible States */


/* High Contrast Mode */
@media (prefers-contrast: high) {
.gradient-text {
        -webkit-text-fill-color: currentColor;
        background: none;
    }
}


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.ai-bg-orb,
    .ai-core-bg-orb,
    .ai-philosophy-badge,
    .gradient-text,
    .ai-card-icon,
    .ai-card-glow,
    .ai-statement-quote,
    .ai-principle-number,
    .ai-philosophy-card,
    .ai-principle-item,
    .ai-core-badge,
    .ai-core-title .gradient-text,
    .ai-hub-icon svg,
    .ai-hub-inner,
    .ai-hub-pulse,
    .ai-orbit-item,
    .ai-orbit-card,
    .ai-orbit-icon,
    .ai-orbit-connector,
    .ai-tech-item,
    .ai-tech-icon,
    .ai-flow-step,
    .ai-flow-number {
        animation: none !important;
        transition: opacity 0.2s ease, color 0.2s ease !important;
    }
}


/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
.ai-philosophy-title,
    .ai-card-title,
    .ai-principles-heading,
    .ai-principle-title,
    .ai-statement-text,
    .gradient-text {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }
}






/* ====================================
   SECTION 4: CAPABILITIES - "IN ACTION"
   ==================================== */
/* =====================================================
   PART 12: AI CAPABILITIES & IMPACT METRICS
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: AI CAPABILITIES
   ============================================ */





/* ============= HEADER ============= */








.ai-capabilities-title .gradient-text {
    background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 50%, #1e4d8c 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s ease-in-out infinite;
}

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



/* ============= CAPABILITIES GRID ============= */




/* Top gradient bar animation */


/* Subtle inner glow on hover */




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





/* Card Header */














/* Card Content */








/* Features List */








.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 14px;
    flex-shrink: 0;
    box-shadow:  var(--ds-elevation-1);
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-capability-features li:hover .feature-icon {
    transform: scale(1.15) rotate(360deg);
}

/* Badge Overlay */




/* ============= USE CASES SECTION ============= */




















/* ============= BACKGROUND ELEMENTS ============= */










@keyframes floatOrb {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(30px, -30px, 0) scale(1.1);
    }
    66% {
        transform: translate3d(-20px, 20px, 0) scale(0.95);
    }
}

/* ============================================
   SECTION: AI IMPACT METRICS
   ============================================ */





/* Section Header */












/* Stats Grid */




/* Top gradient bar */


/* Radial glow on hover */
























/* Impact Categories */








/* Gradient overlay on hover */






























/* ROI Calculator Teaser */




/* Decorative gradient orb */






























@keyframes roiProgress {
    from {
        stroke-dashoffset: 502.4;
    }
    to {
        stroke-dashoffset: 125.6;
    }
}





/* Background Elements */






@keyframes floatSlowImpact {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(50px, 50px, 0) scale(1.1);
    }
}

/* ============================================
   RESPONSIVE DESIGN - AI CAPABILITIES
   ============================================ */









/* ============================================
   RESPONSIVE DESIGN - IMPACT METRICS
   ============================================ */







/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
.ai-capabilities-title .gradient-text,
    .ai-impact-gradient-text {
        animation: none;
    }
}


/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */






/* ========================================
   SECTION 6: FINAL CTA - LET'S BUILD TOGETHER
   ======================================== */
/* =====================================================
   PART 13: AI CTA FINAL & ERP DEFINITION BANNER
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: AI CTA FINAL
   ============================================ */





/* Content Section */


/* Badge */




@keyframes badgePulseEnhanced {
    0%, 100% {
        box-shadow: 
             var(--ds-elevation-2);
    }
    50% {
        box-shadow: 
             var(--ds-elevation-2);
    }
}







/* Title */




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

/* Description */


/* CTA Buttons */


.ai-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transform: translateZ(0);
    will-change: transform, box-shadow;
    transition: 
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease,
        background 0.3s ease;
}



















/* Trust Indicators */




















/* ============================================
   VISUAL ELEMENT - FLOATING CARD
   ============================================ */





@keyframes cardFloatEnhanced {
    0%, 100% {
        transform: translateY(0) rotate(0deg) translateZ(0);
    }
    25% {
        transform: translateY(-12px) rotate(1deg) translateZ(0);
    }
    50% {
        transform: translateY(-20px) rotate(2deg) translateZ(0);
    }
    75% {
        transform: translateY(-8px) rotate(0.5deg) translateZ(0);
    }
}



@keyframes glowRotateEnhanced {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



/* Grid Lines */









@keyframes lineFlowEnhanced {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Stats Display */






@keyframes barGrowEnhanced {
    from {
        transform: scaleX(0);
        opacity: 0.5;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

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



/* Icon Grid */









@keyframes iconPulseEnhanced {
    0%, 100% {
        transform: scale(1) translateZ(0);
        box-shadow:  var(--ds-elevation-2);
    }
    50% {
        transform: scale(1.08) translateZ(0);
        box-shadow:  var(--ds-elevation-3);
    }
}







/* ============================================
   BACKGROUND ELEMENTS
   ============================================ */





@keyframes floatSlowCTA {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(50px, 50px, 0) scale(1.1);
    }
}

/* Particles */














@keyframes particleFloatEnhanced {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
    }
    15% {
        opacity: 0.9;
    }
    50% {
        transform: translate3d(60px, -60px, 0) scale(1.5);
        opacity: 0.7;
    }
    85% {
        opacity: 0.4;
    }
    100% {
        transform: translate3d(120px, -120px, 0) scale(0.3);
        opacity: 0;
    }
}

/* ============================================
   SECTION: ERP DEFINITION BANNER
   ============================================ */





/* Main Content Wrapper */


/* ============================================
   ERP ABBREVIATION LETTERS
   ============================================ */









@keyframes erpLetterDropEnhanced {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.6) rotateX(-20deg) translateZ(0);
    }
    60% {
        transform: translateY(8px) scale(1.08) rotateX(5deg) translateZ(0);
    }
    80% {
        transform: translateY(-3px) scale(0.98) rotateX(-2deg) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg) translateZ(0);
    }
}

/* Shimmer on completed letters */


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

/* ============================================
   EQUALS SIGN
   ============================================ */







@keyframes erpEqualsFadeEnhanced {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(-10deg) translateZ(0);
    }
    60% {
        transform: scale(1.1) rotate(5deg) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateZ(0);
    }
}

/* ============================================
   FULL FORM TEXT
   ============================================ */









/* Enterprise - Stagger delays */











/* Resource - Stagger delays */









/* Planning - Stagger delays */









@keyframes erpCharFlowEnhanced {
    from {
        opacity: 0;
        transform: translateX(-35px) scale(0.9) translateZ(0);
    }
    60% {
        transform: translateX(3px) scale(1.02) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1) translateZ(0);
    }
}

/* ============================================
   BOTTOM TAGLINE
   ============================================ */



@keyframes erpTaglineAppearEnhanced {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.95) translateZ(0);
    }
    60% {
        transform: translateY(-3px) scale(1.02) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}





@keyframes erpLinePulseEnhanced {
    0%, 100% { 
        opacity: 0.2;
        transform: scaleX(0.8);
    }
    50% { 
        opacity: 1;
        transform: scaleX(1);
    }
}



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

/* ============================================
   RESPONSIVE DESIGN - AI CTA FINAL
   ============================================ */



@media (max-width: 768px) {
.ai-cta-btn {
        justify-content: center;
        width: 100%;
        padding: 16px 28px;
    }
}




/* ============================================
   RESPONSIVE DESIGN - ERP DEFINITION BANNER
   ============================================ */







/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
.ai-cta-btn,
    .ai-cta-trust-item,
    .ai-cta-icon-item {
        transition-duration: 0.01ms !important;
    }
.ai-cta-btn:hover,
    .ai-cta-trust-item:hover,
    .ai-cta-icon-item:hover {
        transform: none;
    }
}


/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */

.ai-cta-btn:focus-visible {
    outline: 3px solid rgba(30, 77, 140, 0.6);
    outline-offset: 4px;
}







/* ============================================
   PRINT STYLES
   ============================================ */


/* =====================================================
   PART 14: ERP HERO SECTION
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: ERP HERO
   ============================================ */



/* Background Gradient Overlay */


/* Secondary ambient orb */


@keyframes erpHeroFloatEnhanced {
    0%, 100% { 
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1); 
    }
    33% {
        transform: translate3d(-20px, 20px, 0) rotate(3deg) scale(1.02);
    }
    66% {
        transform: translate3d(-35px, 35px, 0) rotate(5deg) scale(1.05);
    }
}

/* Container */


/* ============================================
   LEFT CONTENT
   ============================================ */



/* Badge */




@keyframes erpBadgeGlowEnhanced {
    0%, 100% { 
        box-shadow: 
             var(--ds-elevation-2);
    }
    50% { 
        box-shadow: 
             var(--ds-elevation-3);
    }
}



@keyframes erpBadgePulseEnhanced {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
    }
    50% { 
        transform: scale(1.25) rotate(10deg); 
    }
}



/* Title */




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

/* Subtle underline effect */




/* Subtitle */


/* CTA Buttons */










/* Shimmer effect on hover */












/* ============================================
   RIGHT VISUAL GRID
   ============================================ */





/* Module Cards */
.erp-module-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(30, 77, 140, 0.15);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-shadow: 
         var(--ds-elevation-3), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;
    transition: 
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.5s ease,
        border-color 0.4s ease;
    animation: erpCardFloatEnhanced 4s ease-in-out infinite;
}

.erp-module-card:hover {
    transform: translateY(-12px) scale(1.05) translateZ(0);
    box-shadow: 
         var(--ds-elevation-4), 0 0 0 1px rgba(30, 77, 140, 0.2) inset;
    border-color: rgba(30, 77, 140, 0.4);
    animation-play-state: paused;
}

/* Staggered Animation */





@keyframes erpCardFloatEnhanced {
    0%, 100% { 
        transform: translateY(0px) translateZ(0); 
    }
    25% {
        transform: translateY(-8px) translateZ(0);
    }
    50% { 
        transform: translateY(-15px) translateZ(0); 
    }
    75% {
        transform: translateY(-5px) translateZ(0);
    }
}



.erp-module-card:hover .erp-card-icon {
    filter: grayscale(0) saturate(1.2);
    transform: scale(1.25) rotate(8deg);
}



.erp-module-card:hover .erp-card-label {
    color: #1e4d8c;
}

/* ============================================
   CENTRAL HUB
   ============================================ */





@keyframes erpHubRotateEnhanced {
    from { 
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    to { 
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}

/* Multiple pulse rings */






@keyframes erpPulseEnhanced {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}



@keyframes erpHubIconCounterRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* ============================================
   CONNECTION LINES (Optional Enhancement)
   ============================================ */





@keyframes erpConnectionRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */





@keyframes erpScrollBounceEnhanced {
    0%, 100% { 
        transform: translateX(-50%) translateY(0); 
        opacity: 0.7;
    }
    50% { 
        transform: translateX(-50%) translateY(12px); 
        opacity: 0.5;
    }
}



/* Animated flow effect */


@keyframes erpScrollFlow {
    0% { top: -100%; }
    100% { top: 200%; }
}



/* ============================================
   RESPONSIVE DESIGN
   ============================================ */



@media (max-width: 1024px) {
.erp-module-card:hover {
        transform: translateY(-8px) scale(1.03) translateZ(0);
    }
}


@media (max-width: 768px) {
.erp-module-card {
        padding: 24px;
        border-radius: 16px;
    }
}


@media (max-width: 480px) {
.erp-module-card {
        padding: 18px;
        border-radius: 16px;
        gap: 10px;
    }
}


/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
.erp-module-card {
        animation: none;
    }
.erp-btn,
    .erp-module-card,
    .erp-hero-badge {
        transition-duration: 0.01ms !important;
    }
.erp-btn:hover,
    .erp-module-card:hover {
        transform: none;
    }
}


/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */







.erp-module-card:focus-visible {
    outline: 3px solid rgba(30, 77, 140, 0.5);
    outline-offset: 4px;
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
.erp-module-card {
        border-width: 2px;
        border-color: #1e4d8c;
    }
}


/* ============================================
   PRINT STYLES
   ============================================ */


/* ========================================
   ERP PROBLEM SECTION
======================================== */
/* =====================================================
   PART 15: ERP PROBLEM, MODULES & PROCESS SECTIONS
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: ERP PROBLEM
   ============================================ */



/* Subtle background pattern */


@keyframes erpProblemBgFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(20px, 20px, 0) scale(1.02); }
}



/* ============================================
   SECTION HEADER
   ============================================ */









@keyframes erpWarningPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(10deg); }
}







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



/* ============================================
   VISUAL COMPARISON GRID
   ============================================ */



/* ============================================
   LEFT: SCATTERED SYSTEMS
   ============================================ */











/* Staggered float animation */







@keyframes erpScatteredFloatEnhanced {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) translateZ(0); 
    }
    25% {
        transform: translateY(-6px) rotate(1deg) translateZ(0);
    }
    50% { 
        transform: translateY(-12px) rotate(2deg) translateZ(0); 
    }
    75% {
        transform: translateY(-4px) rotate(0.5deg) translateZ(0);
    }
}













/* ============================================
   CENTER: VS DIVIDER
   ============================================ */







@keyframes erpVsPulseEnhanced {
    0%, 100% { 
        transform: scale(1) translateZ(0); 
        box-shadow: 
             var(--ds-elevation-3);
    }
    50% { 
        transform: scale(1.12) translateZ(0); 
        box-shadow: 
             var(--ds-elevation-3);
    }
}







@keyframes erpLineFlowEnhanced {
    from { 
        transform: translateY(-60px); 
        opacity: 0; 
    }
    20% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.8;
    }
    to { 
        transform: translateY(400px); 
        opacity: 0; 
    }
}

/* ============================================
   RIGHT: UNIFIED SYSTEM
   ============================================ */













@keyframes erpUnifiedRotateEnhanced {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

















/* ============================================
   PAIN POINTS GRID
   ============================================ */

























/* ============================================
   BOTTOM CTA
   ============================================ */



















/* ============================================
   SECTION: ERP MODULES
   ============================================ */



/* Decorative background elements */




@keyframes erpModuleOrbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(30px, 30px, 0) scale(1.05); }
}



/* ============================================
   MODULES SECTION HEADER
   ============================================ */







@keyframes erpBadgeFloatEnhanced {
    0%, 100% { transform: translateY(0) translateZ(0); }
    50% { transform: translateY(-6px) translateZ(0); }
}











/* ============================================
   MODULES GRID
   ============================================ */



/* ============================================
   MODULE CARD (Enhanced from Hero)
   ============================================ */

.erp-module-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(30, 77, 140, 0.1);
    border-radius: 24px;
    padding: 45px 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 
         var(--ds-elevation-2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;
    transition: 
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.5s ease,
        border-color 0.4s ease;
    transform-style: preserve-3d;
}

/* Gradient overlay */
.erp-module-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 77, 140, 0.03) 0%, rgba(198, 147, 10, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: 24px;
}

.erp-module-card:hover {
    transform: translateY(-12px) translateZ(0);
    border-color: rgba(30, 77, 140, 0.35);
    box-shadow: 
         var(--ds-elevation-4), 0 0 0 1px rgba(30, 77, 140, 0.1) inset;
}

.erp-module-card:hover::before {
    opacity: 1;
}

/* Module Icon */


.erp-module-card:hover .erp-module-icon-wrapper {
    transform: scale(1.12) rotate(8deg) translateZ(0);
    background: linear-gradient(135deg, rgba(30, 77, 140, 0.18) 0%, rgba(198, 147, 10, 0.18) 100%);
}



.erp-module-card:hover .erp-module-icon {
    transform: scale(1.1);
}



.erp-module-card:hover .erp-module-glow {
    opacity: 1;
    animation: erpGlowPulseEnhanced 2.5s ease-in-out infinite;
}

@keyframes erpGlowPulseEnhanced {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.35; 
    }
    50% { 
        transform: scale(1.3); 
        opacity: 0.6; 
    }
}

/* Module Name */


.erp-module-card:hover .erp-module-name {
    color: #1e4d8c;
}

/* Module Description */


/* ============================================
   MODULE FEATURES
   ============================================ */





.erp-module-card:hover .erp-module-feature {
    color: #2d3748;
    transform: translateX(6px) translateZ(0);
}



.erp-module-card:hover .erp-feature-check {
    transform: scale(1.15);
}

/* ============================================
   TECH BADGES
   ============================================ */





.erp-module-card:hover .erp-tech-badge {
    background: linear-gradient(135deg, rgba(30, 77, 140, 0.15) 0%, rgba(198, 147, 10, 0.15) 100%);
    border-color: rgba(30, 77, 140, 0.4);
    transform: scale(1.05) translateZ(0);
}

/* ============================================
   MODULES NOTE
   ============================================ */







@keyframes erpNoteBounceEnhanced {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(-3deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-4px) rotate(3deg); }
}





/* ============================================
   CARD VISIBILITY ANIMATION
   ============================================ */

.erp-module-card {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
}

.erp-module-card.erp-card-visible {
    animation: erpCardAppearEnhanced 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes erpCardAppearEnhanced {
    from {
        opacity: 0;
        transform: translateY(35px) scale(0.95) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

/* Stagger delays */
.erp-module-card:nth-child(1) { animation-delay: 0s; }
.erp-module-card:nth-child(2) { animation-delay: 0.12s; }
.erp-module-card:nth-child(3) { animation-delay: 0.24s; }
.erp-module-card:nth-child(4) { animation-delay: 0.36s; }
.erp-module-card:nth-child(5) { animation-delay: 0.48s; }

/* ============================================
   SECTION: ERP PROCESS
   ============================================ */



/* Decorative background gradient */




/* ============================================
   PROCESS SECTION HEADER
   ============================================ */









@keyframes erpRotateBadgeEnhanced {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}











/* ============================================
   TIMELINE STRUCTURE
   ============================================ */



/* Central Vertical Line */


/* Animated Progress Line */


@keyframes erpProgressFillEnhanced {
    to { height: 100%; }
}

/* ============================================
   PROCESS STEPS
   ============================================ */

.erp-process-step {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 45px;
    align-items: center;
    margin-bottom: 85px;
    opacity: 0;
    transform: translateY(30px) translateZ(0);
}

.erp-process-step:last-child {
    margin-bottom: 0;
}

.erp-process-step.erp-step-visible {
    animation: erpStepAppearEnhanced 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes erpStepAppearEnhanced {
    from {
        opacity: 0;
        transform: translateY(35px) scale(0.97) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

/* Left-aligned steps (odd) */
.erp-process-step:not(.erp-step-reverse) {
    grid-template-areas: "content number empty";
}

.erp-process-step:not(.erp-step-reverse) .erp-step-content {
    grid-area: content;
    text-align: right;
}

.erp-process-step:not(.erp-step-reverse) .erp-step-number {
    grid-area: number;
}

/* Right-aligned steps (even) */
.erp-step-reverse {
    grid-template-areas: "empty number content";
}

.erp-step-reverse .erp-step-content {
    grid-area: content;
    text-align: left;
}

.erp-step-reverse .erp-step-number {
    grid-area: number;
}

/* ============================================
   STEP NUMBER CIRCLE
   ============================================ */







/* Multiple rings */


@keyframes erpRingPulseEnhanced {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.erp-process-step:hover .erp-step-number {
    transform: scale(1.12) rotate(10deg) translateZ(0);
    box-shadow: 
         var(--ds-elevation-3);
}

/* ============================================
   STEP CONTENT
   ============================================ */



/* Gradient overlay */


.erp-process-step:hover .erp-step-content {
    transform: translateY(-8px) translateZ(0);
    border-color: rgba(30, 77, 140, 0.3);
    box-shadow: 
         var(--ds-elevation-4);
}

.erp-process-step:hover .erp-step-content::before {
    opacity: 1;
}

/* Step Icon */


.erp-process-step:hover .erp-step-icon {
    transform: scale(1.2) rotate(10deg);
}

/* Step Title */


.erp-process-step:hover .erp-step-title {
    color: #1e4d8c;
}

/* Step Description */


/* ============================================
   STEP DETAILS (Mini Badges)
   ============================================ */



.erp-step-reverse .erp-step-details {
    justify-content: flex-start;
}

.erp-process-step:not(.erp-step-reverse) .erp-step-details {
    justify-content: flex-end;
}





/* ============================================
   JS-TRIGGERED ANIMATIONS
   ============================================ */

/* Scroll-in animation */
.erp-animate-in {
    animation: erpFadeSlideUpEnhanced 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes erpFadeSlideUpEnhanced {
    from {
        opacity: 0;
        transform: translateY(45px) scale(0.97) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

/* ============================================
   RESPONSIVE DESIGN - ERP PROBLEM
   ============================================ */



@media (max-width: 968px) {
@keyframes erpLineFlowHorizontalEnhanced {
        from { transform: translateX(-60px); opacity: 0; }
        20% { opacity: 0.8; }
        80% { opacity: 0.8; }
        to { transform: translateX(calc(100% + 60px)); opacity: 0; }
    }
}






/* ============================================
   RESPONSIVE DESIGN - ERP MODULES
   ============================================ */



@media (max-width: 768px) {
.erp-module-card {
        padding: 35px 28px;
    }
.erp-module-card:hover {
        transform: translateY(-8px) translateZ(0);
    }
}


@media (max-width: 480px) {
.erp-module-card {
        padding: 28px 22px;
    }
}


/* ============================================
   RESPONSIVE DESIGN - ERP PROCESS
   ============================================ */

@media (max-width: 968px) {
.erp-process-step {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }
.erp-process-step:not(.erp-step-reverse),
    .erp-step-reverse {
        grid-template-areas: 
            "number"
            "content";
    }
.erp-process-step:not(.erp-step-reverse) .erp-step-content,
    .erp-step-reverse .erp-step-content {
        text-align: center;
    }
}




@media (max-width: 480px) {
.erp-process-step {
        margin-bottom: 50px;
    }
}


/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
.erp-module-card,
    .erp-process-step {
        opacity: 1;
        transform: none;
        animation: none;
    }
.erp-scattered-systems,
    .erp-unified-system,
    .erp-pain-card,
    .erp-module-card,
    .erp-step-content,
    .erp-step-number,
    .erp-problem-cta-btn {
        transition-duration: 0.01ms !important;
    }
.erp-scattered-systems:hover,
    .erp-unified-system:hover,
    .erp-pain-card:hover,
    .erp-module-card:hover,
    .erp-step-content:hover {
        transform: none;
    }
}


/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */



.erp-scattered-item:focus-visible,
.erp-pain-card:focus-visible,
.erp-module-card:focus-visible,
.erp-step-content:focus-visible {
    outline: 3px solid rgba(30, 77, 140, 0.5);
    outline-offset: 4px;
}





/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
.erp-scattered-item,
    .erp-unified-box,
    .erp-pain-card,
    .erp-module-card,
    .erp-step-content {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }
}

/* =====================================================
   PART 16: ERP PROCESS SUMMARY, DIFFERENTIATORS & INDUSTRIES
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: ERP PROCESS SUMMARY
   ============================================ */



















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

/* SVG Connectors */
.erp-connectors-svg line {
    transition: 
        stroke 0.4s ease,
        stroke-width 0.3s ease;
}

.erp-process-step:hover ~ .erp-connectors-svg line {
    stroke: rgba(30, 77, 140, 0.6);
    stroke-width: 3;
}

/* ============================================
   SECTION: ERP DIFFERENTIATORS
   ============================================ */



/* Decorative background elements */




@keyframes diffOrbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(30px, 30px, 0) scale(1.05); }
}



/* ============================================
   DIFFERENTIATORS HEADER
   ============================================ */









@keyframes starTwinkleEnhanced {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        opacity: 1; 
    }
    25% {
        transform: scale(1.15) rotate(90deg);
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.25) rotate(180deg); 
        opacity: 0.85; 
    }
    75% {
        transform: scale(1.15) rotate(270deg);
        opacity: 0.9;
    }
}







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



/* ============================================
   DIFFERENTIATORS GRID
   ============================================ */



/* ============================================
   DIFFERENTIATOR CARD
   ============================================ */

.erp-diff-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(30, 77, 140, 0.1);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 
         var(--ds-elevation-2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;
    transition: 
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.5s ease,
        border-color 0.4s ease;
    transform-style: preserve-3d;
}

/* Gradient overlay */
.erp-diff-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 77, 140, 0.02) 0%, rgba(198, 147, 10, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.erp-diff-card:hover {
    transform: translateY(-12px) translateZ(0);
    border-color: rgba(30, 77, 140, 0.35);
    box-shadow: 
         var(--ds-elevation-4);
}

.erp-diff-card:hover::before {
    opacity: 1;
}

/* ============================================
   CARD VISUAL (TOP SECTION)
   ============================================ */



/* Animated Background Pattern */


.erp-diff-card:hover .erp-diff-pattern {
    opacity: 1;
}

@keyframes patternMoveEnhanced {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(20px, 20px, 0); }
}

/* Icon Wrapper */


.erp-diff-card:hover .erp-diff-icon-wrapper {
    transform: scale(1.18) rotate(12deg) translateZ(0);
    box-shadow: 
         var(--ds-elevation-4);
}



.erp-diff-card:hover .erp-diff-icon {
    transform: scale(1.1);
}

/* ============================================
   CARD CONTENT
   ============================================ */





.erp-diff-card:hover .erp-diff-name {
    color: #1e4d8c;
}



/* Highlight Badge */


.erp-diff-card:hover .erp-diff-highlight-badge {
    background: linear-gradient(135deg, rgba(30, 77, 140, 0.18), rgba(198, 147, 10, 0.18));
    border-color: rgba(30, 77, 140, 0.45);
    transform: translateX(6px) translateZ(0);
}

/* ============================================
   CARD VISIBILITY ANIMATION
   ============================================ */

.erp-diff-card {
    opacity: 0;
    transform: translateY(35px) translateZ(0);
}

.erp-diff-card.erp-diff-visible {
    animation: diffCardAppear 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes diffCardAppear {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

/* Stagger delays */
.erp-diff-card:nth-child(1) { animation-delay: 0s; }
.erp-diff-card:nth-child(2) { animation-delay: 0.12s; }
.erp-diff-card:nth-child(3) { animation-delay: 0.24s; }
.erp-diff-card:nth-child(4) { animation-delay: 0.36s; }
.erp-diff-card:nth-child(5) { animation-delay: 0.48s; }
.erp-diff-card:nth-child(6) { animation-delay: 0.6s; }

/* ============================================
   COMPARISON BOX
   ============================================ */





/* Background pattern */


/* Comparison Sides */














/* Comparison Lists */














/* VS Divider */






@keyframes vsPulseEnhanced {
    0%, 100% { 
        transform: scale(1) translateZ(0); 
    }
    50% { 
        transform: scale(1.12) translateZ(0); 
    }
}

/* ============================================
   SECTION: ERP INDUSTRIES
   ============================================ */



/* Decorative background elements */




@keyframes industryOrbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(25px, 25px, 0) scale(1.05); }
}

/* ============================================
   SECTION HEADER
   ============================================ */







/* Shimmer effect */






/* Animated underline */






/* ============================================
   INDUSTRIES GRID
   ============================================ */





/* Staggered floating */







@keyframes industryFloat {
    0%, 100% {
        transform: translateY(0) translateZ(0);
    }
    50% {
        transform: translateY(-10px) translateZ(0);
    }
}

/* Gradient border effect */


/* Animated background gradient on hover */










/* Icon glow effect */


















/* ============================================
   RESPONSIVE DESIGN - PROCESS SUMMARY
   ============================================ */







/* ============================================
   RESPONSIVE DESIGN - DIFFERENTIATORS
   ============================================ */





@media (max-width: 768px) {
.erp-diff-card:hover {
        transform: translateY(-8px) translateZ(0);
    }
}




/* ============================================
   RESPONSIVE DESIGN - INDUSTRIES
   ============================================ */







/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
.erp-diff-card {
        opacity: 1;
        transform: none;
        animation: none;
    }
.erp-summary-card,
    .erp-diff-card,
    .erp-industry-card,
    .erp-diff-icon-wrapper,
    .erp-industry-icon,
    .erp-diff-highlight-badge {
        transition-duration: 0.01ms !important;
    }
.erp-summary-card:hover,
    .erp-diff-card:hover,
    .erp-industry-card:hover {
        transform: none;
    }
}


/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */

.erp-summary-card:focus-visible,
.erp-diff-card:focus-visible,
.erp-industry-card:focus-visible {
    outline: 3px solid rgba(30, 77, 140, 0.5);
    outline-offset: 4px;
}





/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
.erp-diff-card,
    .erp-industry-card,
    .erp-summary-card,
    .erp-comparison-box {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }
}

/* ===== ERP FAQ Section ===== */
  

  

  

  

  .erp-faq-item.active {
      border-color: #1e4d8c;
      box-shadow:  var(--ds-elevation-3);
  }

  

  

  

  

  .erp-faq-item.active .erp-faq-icon {
      background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%);
      transform: scale(1.1);
  }

  .erp-faq-item.active .erp-faq-icon svg {
      color: #ffffff;
  }

  

  .erp-faq-item.active .erp-faq-question-text {
      color: #1e4d8c;
  }

  

  

  .erp-faq-item.active .erp-faq-toggle {
      background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%);
      transform: rotate(180deg);
  }

  .erp-faq-item.active .erp-faq-toggle svg {
      color: #ffffff;
  }

  

  .erp-faq-item.active .erp-faq-answer {
      max-height: 1000px;
      opacity: 1;
      padding: 0 30px 28px 94px;
  }

  

  /* Responsive */
  @media (max-width: 768px) {
.erp-faq-item.active .erp-faq-answer {
          padding: 0 20px 22px 20px;
      }
}

  /* ===== ERP Waitlist Section ===== */
  

  /* Animated background pattern */
  

  @keyframes bgFloat {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(30px, -30px); }
  }

  

  /* Left Side - Content */
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  /* Right Side - Form */
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  /* Success Message */
  

  

  @keyframes successPop {
      0% { transform: scale(0); }
      100% { transform: scale(1); }
  }

  

  

  

  /* Responsive */
  

  

  
  /* ============================================
    Mobile App Development - Hero Section
    Complete CSS with all fixes
    ============================================ */

 /* =====================================================
   PART 17: MOBILE APP HERO & WHY MOBILE APPS
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: MOBILE APP HERO
   ============================================ */



/* Section Label */




/* Shimmer effect on lines */


@keyframes lineShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}









/* Content */
















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



/* Stats */










/* CTA Buttons */






.mob-hero__btn--primary {
    background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%);
    color: #ffffff;
    box-shadow: 
         var(--ds-elevation-3);
}

.mob-hero__btn--primary:hover {
    transform: translateY(-4px) scale(1.02) translateZ(0);
    box-shadow: 
         var(--ds-elevation-3);
}

.mob-hero__btn--primary:active {
    transform: translateY(-2px) scale(1.01) translateZ(0);
}

.mob-hero__btn--primary:hover svg {
    transform: translateX(5px);
}

.mob-hero__btn--secondary {
    background: rgba(255, 255, 255, 0.9);
    color: #1e4d8c;
    border: 2px solid rgba(30, 77, 140, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mob-hero__btn--secondary:hover {
    background: linear-gradient(135deg, #1e4d8c 0%, #c6930a 100%);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-4px) scale(1.02) translateZ(0);
    box-shadow:  var(--ds-elevation-3);
}

.mob-hero__btn--secondary:hover svg {
    transform: scale(1.15) rotate(10deg);
}

/* ============================================
   VISUAL SECTION - PHONE MOCKUP
   ============================================ */







.mob-hero__phone--front {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(-15deg) translateZ(0);
    z-index: 2;
    animation: floatPhoneEnhanced 6s ease-in-out infinite;
}





.mob-hero__phone--front:hover {
    transform: translate(-50%, -50%) rotateY(-5deg) scale(1.05) translateZ(0);
    animation-play-state: paused;
}





/* App Preview */













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

/* ============================================
   FLOATING BADGES
   ============================================ */













/* Individual badge positions and colors */
























/* ============================================
   BACKGROUND DECORATION
   ============================================ */











/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes mobFadeInUp {
    from {
        opacity: 0;
        transform: translateY(35px) scale(0.97) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

@keyframes mobFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mobFadeInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-25px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateZ(0);
    }
}

@keyframes floatPhoneEnhanced {
    0%, 100% {
        transform: translate(-50%, -50%) rotateY(-15deg) translateY(0) translateZ(0);
    }
    25% {
        transform: translate(-50%, -50%) rotateY(-15deg) translateY(-12px) translateZ(0);
    }
    50% {
        transform: translate(-50%, -50%) rotateY(-15deg) translateY(-22px) translateZ(0);
    }
    75% {
        transform: translate(-50%, -50%) rotateY(-15deg) translateY(-8px) translateZ(0);
    }
}

@keyframes floatBadgeEnhanced {
    0%, 100% {
        transform: translateY(0) translateZ(0);
    }
    50% {
        transform: translateY(-18px) translateZ(0);
    }
}

@keyframes floatCircle {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(35px, -35px, 0) scale(1.1);
    }
    66% {
        transform: translate3d(-25px, 25px, 0) scale(0.9);
    }
}

@keyframes slideContentEnhanced {
    0%, 100% {
        transform: translateY(0) translateZ(0);
    }
    50% {
        transform: translateY(-12px) translateZ(0);
    }
}

/* ============================================
   SECTION: WHY MOBILE APPS
   ============================================ */





/* Section Header */










/* Stats Grid */

























/* Benefits Grid */



























/* CTA Box */


















/* Decorative Elements */








/* ============================================
   RESPONSIVE DESIGN - MOBILE HERO
   ============================================ */









/* ============================================
   RESPONSIVE DESIGN - WHY MOBILE APPS
   ============================================ */







/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */



/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */



.mob-hero__btn--primary:focus-visible {
    outline-color: rgba(255, 255, 255, 0.8);
}







/* ============================================
   PRINT STYLES
   ============================================ */


/* ============================================
   Our Approach Section
   ============================================ */





/* Section Header */








/* Framework Comparison */
















/* Framework Header */


















/* Features List */






/* Framework Stats */








/* Brands */








/* VS Badge */


/* Recommendation Section */






























/* Expertise Section */




















/* Decorative Elements */








/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:  var(--ds-elevation-3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:  var(--ds-elevation-3);
    }
}

/* Responsive Design */





/* ============================================
   App Types We Build Section
   ============================================ */





/* Section Header */








/* App Types Grid */


/* App Type Card */



















/* Card Icon */




/* Card Content */




/* Card Features */








/* Card Badge */


/* CTA Section */
















/* Background Decoration */




/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */







/* ============================================
   Development Process Section - IMPROVED VERSION
   Better Text Visibility & Glass Effect
   ============================================ */





/* Section Header */








/* Timeline */


/* Step */











/* Step Number - More Prominent */


/* Step Line - More Visible */




/* Step Content - Enhanced Glass Effect */




/* Step Icon - More Vibrant */




/* Step Title - Darker & Bolder */


/* Step Description - Better Contrast */


/* Step List - Improved Visibility */






/* Step Duration - Enhanced */




/* Process Highlights - Better Contrast */














/* Background Decoration */




/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */





/* ============================================
   Technology Stack Section
   Enhanced Visibility & Glass Effect
   ============================================ */





/* Section Header */








/* Categories */


/* Category */
.mob-tech__category {
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
}

.mob-tech__category:nth-child(1) { animation-delay: 0.1s; }
.mob-tech__category:nth-child(2) { animation-delay: 0.2s; }
.mob-tech__category:nth-child(3) { animation-delay: 0.3s; }
.mob-tech__category:nth-child(4) { animation-delay: 0.4s; }
.mob-tech__category:nth-child(5) { animation-delay: 0.5s; }

/* Category Header */










/* Tech Grid */


/* Tech Card */






/* Tech Icon */






/* Tech Icon Colors */








































/* Tech Name */


/* Tech Description */


/* Tech Stats */










/* Background Decoration */








/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* Responsive Design */







/* ============================================
   SECTION 7: KEY FEATURES WE INTEGRATE
   ============================================ */







@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(50px, 50px) scale(1.1);
    }
}



/* Header Styles */








/* Features Grid */


/* Feature Card */








/* Visible State (animated in by JS) */
.mob-features__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Icon */






/* Card Title */


/* Card Description */


/* Tech Tags */






/* Staggered Animation */













/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */





/* ============================================
   SECTION 8: FREQUENTLY ASKED QUESTIONS
   ============================================ */









/* Header Styles */








/* FAQ Grid */


/* FAQ Item */

















.mob-faq__item.active {
    border-color: #1e4d8c;
    box-shadow:  var(--ds-elevation-3);
}

/* Question Button */








.mob-faq__item.active .mob-faq__icon {
    transform: rotate(180deg);
}

/* Answer Content */


.mob-faq__item.active .mob-faq__answer {
    max-height: 3000px;
    padding: 0 30px 30px 30px;
}















/* Table Styles (for comparison) */






/* CTA Section at Bottom */




















/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */


@media (max-width: 768px) {
.mob-faq__item.active .mob-faq__answer {
        padding: 0 20px 25px 20px;
    }
}



/* ========================================
   MOBILE CONTACT FORM - COMPLETE CSS
   All classes prefixed with "mob-contact-"
   NO CONFLICTS with existing styles
   ======================================== */

/* ==================== MODAL CONTAINER ==================== */



.mob-contact-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

/* Overlay */


/* ==================== FORM CONTAINER ==================== */



@keyframes mobSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Scrollbar Styling */








/* ==================== CLOSE BUTTON ==================== */









/* ==================== CONTENT ==================== */



/* ==================== HEADER ==================== */









/* ==================== FORM ==================== */



@keyframes mobFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Form Row - 2 Column Layout */


/* Form Field */


/* Label */




/* Input, Select, Textarea */




/* Select Dropdown Arrow */


/* Focus State */


/* Word Counter */


.mob-contact-counter.warning {
    color: #f59e0b;
}

.mob-contact-counter.error {
    color: #ef4444;
}

/* ==================== CHECKBOX ==================== */











/* ==================== BUTTONS ==================== */







/* WhatsApp Button */






/* Submit Button */






/* Loading State */
.mob-contact-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.mob-contact-btn.loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: mobSpin 0.8s linear infinite;
}

@keyframes mobSpin {
    to { transform: rotate(360deg); }
}

/* ==================== SECURITY NOTE ==================== */





/* ==================== SUCCESS MESSAGE ==================== */



.mob-contact-success.show {
    display: block;
}

@keyframes mobScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}



@keyframes mobPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}











/* ==================== RESPONSIVE ==================== */





/* ==================== ACCESSIBILITY ==================== */





/* Reduce motion for users who prefer it */

/* ==========================================
   ABOUT US - HERO SECTION CSS
   Visually Stunning & Animated
   ========================================== */

/* Hero Container */




/* ==================== BACKGROUND ==================== */



/* Animated Grid */


@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Floating Particles */








@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -50px) scale(1.1); }
    66% { transform: translate(-50px, 50px) scale(0.9); }
}

/* ==================== CONTENT ==================== */



/* Label */






/* Main Title */






/* Animated Words */
















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

/* Subtitle */






@keyframes lineExpand {
    to { transform: scaleX(1); }
}

/* ==================== CTA BUTTONS ==================== */



















/* ==================== SCROLL INDICATOR ==================== */







@keyframes scrollDot {
    0%, 100% { top: 0; opacity: 1; }
    50% { top: 40px; opacity: 0.3; }
}



/* ==================== DECORATIVE CIRCLES ==================== */











@keyframes circleFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-30px, 30px) rotate(240deg); }
}

/* ==================== ANIMATIONS ==================== */

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

/* ==================== RESPONSIVE ==================== */




/* ==========================================
   ABOUT US - MISSION STATEMENT CSS
   Clean, Elegant, Animated
   ========================================== */

/* Section Container */




/* ==================== CONTENT SIDE ==================== */



/* Section Label */






/* Main Title */




/* Text Content */












/* Key Points */


















/* ==================== VISUAL SIDE ==================== */





/* Illustration Container */


/* Central Circle */


@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow:  var(--ds-elevation-4); }
    50% { transform: scale(1.05); box-shadow:  var(--ds-elevation-4); }
}







/* Orbiting Elements */








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









/* Connecting Lines */


/* Background Decorations */






@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

/* ==================== ANIMATIONS ==================== */

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================== RESPONSIVE ==================== */




/* ==========================================
   ABOUT US - WHAT WE DO (SERVICES) CSS
   Interactive Flip Cards
   ========================================== */

/* Section Container */




/* ==================== HEADER ==================== */















/* ==================== SERVICES GRID ==================== */



/* ==================== SERVICE CARD ==================== */







/* Card Front & Back Common Styles */


/* Card Front */






















/* Card Back */












/* ==================== TAGLINE CARD ==================== */























/* ==================== RESPONSIVE ==================== */







/* ==================== ANIMATIONS ==================== */

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

/* Stagger animation for cards */






/* ==========================================
   ABOUT US - PHILOSOPHY SECTION CSS
   Minimalist, Powerful, Elegant
   ========================================== */

/* Section Container */




/* ==================== MAIN CONTENT ==================== */



/* ==================== LARGE QUOTE ==================== */









/* ==================== PHILOSOPHY GRID ==================== */



/* Philosophy Item */














/* ==================== PROMISE BOX ==================== */

















/* ==================== SIDE VISUAL ==================== */



/* Animated Lines */








@keyframes lineGrow {
    0%, 100% {
        transform: scaleY(0.8);
        opacity: 0.2;
    }
    50% {
        transform: scaleY(1);
        opacity: 0.5;
    }
}

/* Central Circle */






@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================== ANIMATIONS ==================== */

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

/* ==================== RESPONSIVE ==================== */






/* ==========================================
   ABOUT US - SORIVA SHOWCASE CSS
   LEGENDARY 100/10 VERSION 🔥
   PERFECT BALANCE | STUNNING | READABLE
   ========================================== */

/* Section Container */


/* Layered Background Effect */


/* ==================== ANIMATED BACKGROUND ==================== */





@keyframes gridFlow {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}





/* ==================== CONTAINER ==================== */



/* ==================== HEADER ==================== */









@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}



/* ==================== SORIVA LOGO ==================== */







@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}



@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}







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









/* ==================== SOUL STATEMENT ==================== */





@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}







@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}







/* ==================== PRODUCTS GRID ==================== */









/* Product Card */

































/* ==================== POWERS SECTION ==================== */































/* ==================== VISION STATEMENT ==================== */





















/* ==================== BOTTOM STATEMENT ==================== */











/* ==================== DECORATIONS ==================== */











/* ==================== ANIMATIONS ==================== */

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.6; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.15); 
        opacity: 0.9; 
    }
}

/* ==================== RESPONSIVE ==================== */







/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Selection Styling */
::selection {
    background: rgba(127, 163, 216, 0.3);
    color: white;
}
/* ==========================================
   ABOUT US - CULTURE & VALUES CSS
   LEGENDARY 100/10 VERSION 🔥
   ========================================== */

/* Section Container */




/* ==================== HEADER ==================== */















/* ==================== CORE VALUES ==================== */









/* Value Card */



























/* ==================== WORK ENVIRONMENT ==================== */



























/* ==================== WHAT MAKES US DIFFERENT ==================== */
























/* ==================== BOTTOM QUOTE ==================== */











/* ==================== ANIMATIONS ==================== */

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

/* ==================== RESPONSIVE ==================== */







/* ==================== HOVER EFFECTS ==================== */



/* ==================== PRINT STYLES ==================== */


/* ==========================================
   ABOUT US - CTA SECTION CSS
   LEGENDARY 100/10 - FOCUSED VERSION 🔥
   ========================================== */

/* Section Container */


/* ==================== BACKGROUND ==================== */







/* ==================== CONTAINER ==================== */



/* ==================== MAIN CONTENT ==================== */









/* Badge */




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



/* Title */






/* Description */


/* Primary Button */
















/* Sub Text */


/* ==================== TRUST INDICATORS ==================== */











/* ==================== SECONDARY CTA - MEET SORIVA ==================== */























/* ==================== DECORATIONS ==================== */











/* ==================== ANIMATIONS ==================== */

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

@keyframes pulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.5; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1); 
        opacity: 0.8; 
    }
}

/* ==================== RESPONSIVE ==================== */






/* ============================================
   CONTACT HERO SECTION
   ============================================ */

/* =====================================================
   PART 18: CONTACT PAGE - HERO, QUICK CONNECT & FORM
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: CONTACT HERO
   ============================================ */



.con-hero .container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}



/* Hero Text */




/* One inline-block per word. An inline-block is a line-break opportunity, so
   wrapping WORDS (not characters) is what stops the heading breaking mid-word;
   the characters inside still animate individually. */
.con-hero-word {
    display: inline-block;
    white-space: nowrap;
    line-height: inherit;
}

.con-hero-char {
    display: inline-block;
    opacity: 0;
    animation: conCharFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    line-height: inherit;
}

/* No JS: the heading is plain text in the markup and must stay visible. */
.con-hero-headline:not(:has(.con-hero-char)) {
    opacity: 1;
}

@keyframes conCharFadeIn {
    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}





/* Fade In Up Animation */


@keyframes conFadeInUp {
    from {
        opacity: 0;
        transform: translateY(35px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hero Visual */








@keyframes conGlowPulseEnhanced {
    0%, 100% {
        transform: scale(1) rotate(0deg) translate3d(0, 0, 0);
        opacity: 0.5;
    }
    25% {
        transform: scale(1.05) rotate(5deg) translate3d(10px, -10px, 0);
        opacity: 0.65;
    }
    50% {
        transform: scale(1.12) rotate(12deg) translate3d(0, 0, 0);
        opacity: 0.8;
    }
    75% {
        transform: scale(1.05) rotate(8deg) translate3d(-10px, 10px, 0);
        opacity: 0.65;
    }
}











/* Staggered animation for icon items */





@keyframes conIconAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Background Gradient */


@keyframes conBgFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-30px, 30px, 0) scale(1.05); }
}

/* ============================================
   SECTION: QUICK CONNECT - PREMIUM VERSION
   ============================================ */



/* Decorative Elements */






@keyframes conFloatSlow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(55px, 55px, 0) scale(1.08);
    }
}

/* Header */


/* Badge */




@keyframes conBadgeFloat {
    0%, 100% {
        transform: translateY(0) translateZ(0);
    }
    50% {
        transform: translateY(-8px) translateZ(0);
    }
}



@keyframes conGlowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}







/* Title */




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



/* Cards Grid */


/* Premium Card */








@keyframes conCardReveal {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

/* Card Background Gradient */




/* Shine Effect */




/* Featured Card */










/* Icon Wrapper */




@keyframes conIconPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) translateZ(0);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.25) translateZ(0);
        opacity: 0;
    }
}









/* Card Content */














/* Card Footer */














/* Hours */














/* ============================================
   SECTION: CONTACT FORM
   ============================================ */





@keyframes conFormBgPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}



/* ============================================
   LEFT SIDE - FORM
   ============================================ */











/* Form Groups */


/* Input Wrapper */


/* Input Styles */






/* Floating Label */




/* Textarea */




/* Select Dropdown */














/* Input Border Animation */




/* Error Message */


.con-form-group.con-error .con-error-message {
    opacity: 1;
    transform: translateY(0);
}

.con-form-group.con-error .con-input,
.con-form-group.con-error .con-select {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

/* Submit Button */










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





/* Success Message */


.con-success-message.active {
    display: flex;
    animation: conSlideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes conSlideDown {
    from {
        opacity: 0;
        transform: translateY(-25px) scale(0.95) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}





/* ============================================
   RESPONSIVE DESIGN - HERO
   ============================================ */





/* ============================================
   RESPONSIVE DESIGN - QUICK CONNECT
   ============================================ */





/* ============================================
   RESPONSIVE DESIGN - FORM
   ============================================ */







/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
.con-hero-headline span,
    .con-hero-char,
    .con-hero-word,
    .con-hero-subtitle,
    .con-hero-tagline,
    .con-hero-visual,
    .con-fade-in-up,
    .con-qc-card,
    .con-qc-hours-wrapper {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */











/* ============================================
   PRINT STYLES
   ============================================ */


/* ============================================
   RIGHT SIDE - TRUST BLOCK
   ============================================ */
/* =====================================================
   PART 18B: CONTACT PAGE - TRUST, TEXTAREA, CTA & MAP
   Ultra-Polished with GPU Acceleration & Premium Effects
   ===================================================== */

/* ============================================
   SECTION: TRUST CARD (SIDEBAR)
   ============================================ */









@keyframes conTrustGlowRotate {
    from { transform: rotate(0deg) translate3d(0, 0, 0); }
    to { transform: rotate(360deg) translate3d(0, 0, 0); }
}











/* Trust List */










@keyframes conFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-25px) scale(0.95) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1) translateZ(0);
    }
}













/* Trust Stats */












/* ============================================
   TEXTAREA FOOTER & WORD COUNTER
   ============================================ */



/* Word Counter Container */




/* Word Count Number */




/* Warning state when approaching limit */
.con-word-counter.warning .con-word-count,
.con-word-counter.warning strong {
    color: #f59e0b;
}

.con-word-counter.warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}

/* Error state when limit exceeded */
.con-word-counter.error .con-word-count,
.con-word-counter.error strong {
    color: #ef4444;
}

.con-word-counter.error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Error message takes available space */


/* When error is empty */


/* ============================================
   SECTION: GLOBAL CTA
   ============================================ */



/* Decorative Elements */






@keyframes conCtaFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(60px, 60px, 0) scale(1.08); }
}

/* Content */


/* Badge */




@keyframes conCtaBadgeFloat {
    0%, 100% { transform: translateY(0) translateZ(0); }
    50% { transform: translateY(-8px) translateZ(0); }
}





/* Title */


/* Description */


/* Buttons */
























/* Stats */










/* ============================================
   SECTION: CONTACT MAP
   ============================================ */



/* Animated Background Elements */




@keyframes conMapFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(55px, 55px, 0) scale(1.1); }
}

/* Header Section */
















/* Map Container */






/* Google Map Canvas */


/* Map Controls */












/* Location Cards Container */


/* Location Card Base */




/* Primary Location Card */


















/* Location Tags */










/* Contact Info Card */






















/* Meeting Options Features */






























/* ============================================
   RESPONSIVE DESIGN - TRUST CARD
   ============================================ */





/* ============================================
   RESPONSIVE DESIGN - GLOBAL CTA
   ============================================ */





/* ============================================
   RESPONSIVE DESIGN - MAP SECTION
   ============================================ */







/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */



/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */















/* ============================================
   PRINT STYLES
   ============================================ */


/* ========================================
   LEAFLET CUSTOM MARKER STYLES
   ======================================== */

/* Custom Marker Pin */




@keyframes markerDrop {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
        opacity: 1;
    }
    80% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}







/* Bounce Animation */


@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-10px);
    }
}

/* Custom Popup Styles */
















/* Leaflet Control Attribution - Hide or Style */

/* ========================================
   PRIVACY POLICY PAGE STYLES - REDESIGNED
   Full-Width Layout, Proper Spacing
   Brand-Aligned with RISENEX Blue-Gold Theme
   ======================================== */

/* ==========================================
   PRIVACY HERO SECTION
   ========================================== */



/* Decorative Background Blurs */






@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.1); }
}

/* Hero Content */


/* Badge */






/* Title */




/* Subtitle */




/* Intro */


/* Meta */






/* ==========================================
   PRIVACY CONTENT SECTION
   ========================================== */




/* ==========================================
   READING PROGRESS BAR
   ========================================== */




/* ==========================================
   PRIVACY SECTIONS
   ========================================== */






/* Section Header */








/* Section Content */








/* ==========================================
   SUBSECTIONS
   ========================================== */










/* ==========================================
   LISTS
   ========================================== */








/* ==========================================
   HIGHLIGHT BOX
   ========================================== */








/* ==========================================
   LINKS
   ========================================== */






/* ==========================================
   CONTACT SECTION
   ========================================== */
















/* ==========================================
   BACK TO TOP BUTTON
   ========================================== */


.privacy-back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}







/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Large Screens */


/* Tablets */


/* Mobile */


/* Small Mobile */


/* ==========================================
   PRINT STYLES
   ========================================== */

/* ========================================
   TERMS OF SERVICE PAGE STYLES
   Full-Width Layout, Proper Spacing
   Brand-Aligned with RISENEX Blue-Gold Theme
   ======================================== */

/* ==========================================
   TERMS HERO SECTION
   ========================================== */




/* Decorative Background Blurs */






@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.1); }
}

/* Hero Content */


/* Badge */






/* Title */




/* Subtitle */




/* Intro */


/* Meta */






/* ==========================================
   TERMS CONTENT SECTION
   ========================================== */




/* ==========================================
   READING PROGRESS BAR
   ========================================== */




/* ==========================================
   PRIVACY SECTIONS
   ========================================== */






/* Section Header */








/* Section Content */








/* ==========================================
   SUBSECTIONS
   ========================================== */










/* ==========================================
   LISTS
   ========================================== */








/* ==========================================
   HIGHLIGHT BOX
   ========================================== */








/* ==========================================
   WARNING BOX (For Terms of Service)
   ========================================== */








/* ==========================================
   CLOSING STATEMENT
   ========================================== */






/* ==========================================
   LINKS
   ========================================== */






/* ==========================================
   CONTACT SECTION
   ========================================== */


















/* ==========================================
   BACK TO TOP BUTTON
   ========================================== */


.terms-back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}







/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Large Screens */


/* Tablets */


/* Mobile */


/* Small Mobile */


/* ==========================================
   PRINT STYLES
   ========================================== */

/* ========================================
   COOKIE POLICY PAGE STYLES
   Full-Width Layout, Proper Spacing
   Brand-Aligned with RISENEX Blue-Gold Theme
   ======================================== */

/* ==========================================
   COOKIE HERO SECTION
   ========================================== */




/* Decorative Background Blurs */






@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.1); }
}

/* Hero Content */


/* Badge */






/* Title */




/* Subtitle */




/* Intro */


/* Meta */






/* ==========================================
   COOKIE CONTENT SECTION
   ========================================== */




/* ==========================================
   READING PROGRESS BAR
   ========================================== */




/* ==========================================
   PRIVACY SECTIONS
   ========================================== */






/* Section Header */








/* Section Content */








/* ==========================================
   SUBSECTIONS
   ========================================== */










/* ==========================================
   LISTS
   ========================================== */








/* ==========================================
   HIGHLIGHT BOX
   ========================================== */








/* ==========================================
   WARNING BOX (For Terms of Service)
   ========================================== */








/* ==========================================
   CLOSING STATEMENT
   ========================================== */






/* ==========================================
   LINKS
   ========================================== */






/* ==========================================
   CONTACT SECTION
   ========================================== */


















/* ==========================================
   BACK TO TOP BUTTON
   ========================================== */


.cookie-back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}







/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Large Screens */


/* Tablets */


/* Mobile */


/* Small Mobile */


/* ==========================================
   PRINT STYLES
   ========================================== */


/* ==========================================
   COOKIE-SPECIFIC STYLES
   ========================================== */

/* Cookie Info Box */






/* Cookie Types */














/* External Link Box */







/* ==========================================
   MOBILE RESPONSIVE - NAVBAR FIX
   ========================================== */

@media (max-width: 1024px) {
    /* Show Hamburger */
    .hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide Desktop Menu */
    .nav-menu {
        display: none !important;
    }
    
    /* Hide Soriva Button (it's in mobile menu) */
    .btn-soriva-wrapper {
        display: none !important;
    }
    
    /* Adjust nav-wrapper */
    .nav-wrapper {
        justify-content: space-between;
    }
}
/* ============================================
   SBD PAGE STYLES - PART 1
   Smart Business Digitization
   Enterprise Grade CSS
   ============================================ */

/* --------------------------------------------
   CSS CUSTOM PROPERTIES (VARIABLES)
   -------------------------------------------- */

/* --------------------------------------------
   CONTAINER & UTILITIES
   -------------------------------------------- */






/* --------------------------------------------
   SECTION HEADER (REUSABLE)
   -------------------------------------------- */










/* --------------------------------------------
   SECTION 1: HERO
   -------------------------------------------- */


/* Hero Background */












/* Hero Container */


/* Hero Content */




















/* CTA Buttons */
























/* Trust Indicators */






/* Hero Visual */




/* Central Hub */














/* Orbiting Cards */
















/* Connection Lines */




/* Scroll Indicator */








/* --------------------------------------------
   SECTION 2: PROBLEM
   -------------------------------------------- */










































/* VS Divider */




/* --------------------------------------------
   SECTION 3: FEATURES
   -------------------------------------------- */




































/* --------------------------------------------
   KEYFRAME ANIMATIONS
   -------------------------------------------- */
@keyframes sbd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

@keyframes sbd-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

@keyframes sbd-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes sbd-float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-30px) translateX(15px); }
    50% { transform: translateY(0) translateX(30px); }
    75% { transform: translateY(30px) translateX(15px); }
}

@keyframes sbd-hub-pulse {
    0%, 100% { box-shadow: var(--sbd-shadow-xl), 0 0 60px rgba(30, 77, 140, 0.3); }
    50% { box-shadow: var(--sbd-shadow-xl), 0 0 80px rgba(30, 77, 140, 0.5); }
}

@keyframes sbd-ring-expand {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

@keyframes sbd-orbit-float-y {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-18px); }
}

@keyframes sbd-orbit-float-x {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-18px); }
}

@keyframes sbd-dash-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

@keyframes sbd-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.4; }
}

/* --------------------------------------------
   RESPONSIVE - PART 1
   -------------------------------------------- */





/* ============================================
   SBD CSS - PART 2
   Process, Industries, Why Choose Us
   ============================================ */

/* --------------------------------------------
   SECTION 4: PROCESS / HOW IT WORKS
   -------------------------------------------- */






/* Vertical Line */






/* Odd Steps - Content Left */






/* Even Steps - Content Right */






/* Step Number */






/* Step Content Card */






















/* --------------------------------------------
   SECTION 5: INDUSTRIES
   -------------------------------------------- */










































/* --------------------------------------------
   SECTION 6: WHY CHOOSE US
   -------------------------------------------- */






























/* --------------------------------------------
   RESPONSIVE - PART 2
   -------------------------------------------- */





/* ============================================
   SBD CSS - PART 3
   Contact Form & FAQ
   FRESH DESIGN - NOT ERP REPLICA
   ============================================ */

/* --------------------------------------------
   SECTION 7: CONTACT - FLOATING CARD DESIGN
   -------------------------------------------- */


/* Animated Mesh Background */






/* Left Content */










/* Benefits - Horizontal Pills */














/* Right Form */






















/* Select Dropdown */


/* Submit Button */










.sbd-submit-text,
.sbd-submit-icon {
    position: relative;
    z-index: 1;
}

.sbd-submit-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--sbd-transition-base);
}

.sbd-form-submit:hover .sbd-submit-icon {
    transform: translateX(4px);
}

/* Privacy Note */




/* Success Message */










/* ============================================
   SECTION 8: FAQ - PREMIUM REDESIGN
   Single Column with Decorative Numbers
   ============================================ */


/* Decorative Background Elements */






/* Individual FAQ Item */


/* Left Gradient Border Indicator */






.sbd-faq-item.active {
    border-color: rgba(30, 77, 140, 0.25);
    box-shadow: 
         var(--ds-elevation-3);
    transform: translateX(6px);
}

.sbd-faq-item.active::before {
    background: var(--sbd-gradient-primary);
    width: 5px;
}

/* Question Button */




/* Decorative Number */


.sbd-faq-item:hover .sbd-faq-num,
.sbd-faq-item.active .sbd-faq-num {
    background: var(--sbd-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: scale(1.1);
}

/* Question Text */


.sbd-faq-item:hover .sbd-faq-text,
.sbd-faq-item.active .sbd-faq-text {
    color: var(--sbd-primary);
}

/* Toggle Icon - Plus/Minus Design */


/* Plus Icon using pseudo elements */










.sbd-faq-item.active .sbd-faq-toggle {
    background: var(--sbd-gradient-primary);
    transform: rotate(180deg);
}

.sbd-faq-item.active .sbd-faq-toggle::before,
.sbd-faq-item.active .sbd-faq-toggle::after {
    background: #fff;
}

.sbd-faq-item.active .sbd-faq-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* Hide original SVG toggle */


/* Remove original icon wrapper */


/* Answer Section */


.sbd-faq-item.active .sbd-faq-answer {
    max-height: 400px;
}



/* Decorative quote line in answer */


/* --------------------------------------------
   FAQ RESPONSIVE
   -------------------------------------------- */
@media (max-width: 768px) {
.sbd-faq-item:hover,
    .sbd-faq-item.active {
        transform: translateX(4px);
    }
}


@media (max-width: 480px) {
.sbd-faq-item:hover,
    .sbd-faq-item.active {
        transform: translateX(0);
    }
}


/* ============================================
   SOFTWARE DEVELOPMENT PAGE - CSS
   Risenex Global
   Prefix: swd- (Software Development)
   ============================================ */

/* --- Base Font --- */
body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --- CSS Variables Extension --- */

/* ==========================================
   HERO SECTION
   ========================================== */


/* Animated Mesh Background */




/* Floating Particles */













/* Morphing Blob */


/* Grid Pattern Overlay */


/* Hero Container */


/* Hero Content */


/* Premium Badge */








/* Hero Title */




/* Hero Subtitle */


/* CTA Buttons */
























/* Trust Indicators */






/* ==========================================
   HERO VISUAL - 3D FLOATING CARDS
   ========================================== */




/* Central Code Window */





























/* Floating Feature Cards */










/* Card Positions with Float Animation */








/* Glow Ring */




/* Scroll Indicator */








/* ==========================================
   HERO ANIMATIONS
   ========================================== */
@keyframes swd-mesh-shift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

@keyframes swd-particle-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-30px) translateX(15px) scale(1.2);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px) translateX(-10px) scale(0.8);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-40px) translateX(20px) scale(1.1);
        opacity: 0.6;
    }
}

@keyframes swd-blob-morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translateY(-50%) rotate(0deg);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translateY(-50%) rotate(10deg);
    }
}

@keyframes swd-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

@keyframes swd-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes swd-float-1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes swd-float-2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(-2deg); }
}

@keyframes swd-float-3 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes swd-float-4 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(-1deg); }
}

@keyframes swd-ring-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.3;
    }
}

@keyframes swd-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.4; }
}

/* ==========================================
   SECTION 2: WHO THIS IS FOR - LIGHT THEME
   ========================================== */








/* Section Header - Light Theme */






@keyframes swd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}







/* Audience Grid */


/* Audience Card - Light Theme */










/* Glow Effect */




/* Featured Card */






/* Card Content - Light Theme */
























/* ==========================================
   SECTION 3: SERVICES
   ========================================== */




/* Light Theme Header */






/* Services Grid */


/* Service Card */












/* Service Header */












/* Service Content */














/* Service Tags */






/* ==========================================
   SECTION 4: HOW WE WORK - PROCESS
   ========================================== */




/* Process Timeline Container */


/* Connecting Line */




.swd-process-timeline.animated .swd-line-progress {
    transform: scaleY(1);
}

/* Process Step */




/* Step Marker */










@keyframes swd-marker-pulse-anim {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Step Content */
























/* ==========================================
   SECTION 5: WHY RISENEX - LIGHT THEME
   ========================================== */






/* Light Theme Header for Why Section */








/* Why Grid */


/* Why Card - Light Theme */










/* Animated Border */


@keyframes swd-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



/* Icon - Light Theme */














/* Content - Light Theme */








/* ==========================================
   SECTION 6: USE CASES
   ========================================== */




/* Light Theme Header */






/* Use Cases Grid */


/* Use Case Card */




















/* ==========================================
   SECTION 7: NOT FOR EVERYONE
   ========================================== */


















/* ==========================================
   SECTION 8: CTA / CONTACT
   ========================================== */






/* CTA Content */
























/* CTA Form */
































/* ==========================================
   SECTION 9: FAQ
   ========================================== */




/* Light Theme Header */






/* FAQ Container */


/* FAQ Item */








.swd-faq-item.active {
    border-color: rgba(30, 77, 140, 0.25);
    box-shadow:  var(--ds-elevation-3);
    transform: translateX(6px);
}

.swd-faq-item.active::before {
    background: linear-gradient(180deg, #1e4d8c, #c6930a);
    width: 5px;
}

/* Question Button */






.swd-faq-item:hover .swd-faq-num,
.swd-faq-item.active .swd-faq-num {
    background: linear-gradient(135deg, #1e4d8c, #c6930a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: scale(1.1);
}



.swd-faq-item:hover .swd-faq-text,
.swd-faq-item.active .swd-faq-text {
    color: #1e4d8c;
}

/* Toggle Icon */












.swd-faq-item.active .swd-faq-toggle {
    background: linear-gradient(135deg, #1e4d8c, #c6930a);
    transform: rotate(180deg);
}

.swd-faq-item.active .swd-faq-toggle::before,
.swd-faq-item.active .swd-faq-toggle::after {
    background: #fff;
}

.swd-faq-item.active .swd-faq-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* Answer */


.swd-faq-item.active .swd-faq-answer {
    max-height: 400px;
}





/* ==========================================
   RESPONSIVE STYLES
   ========================================== */

/* Hero Responsive */




@media (max-width: 480px) {
.swd-faq-item:hover,
    .swd-faq-item.active {
        transform: translateX(0);
    }
}

/**
 * ========================================
 * RISENEX TOOLS PAGE - DEDICATED CSS
 * Prefix: rt- (Risenex Tools)
 * Version: 1.0
 * NO CONFLICTS with main styles.css
 * ========================================
 */

/* ==========================================
   RT - CSS VARIABLES (Tools Specific)
   ========================================== */

/* ==========================================
   RT - HERO SECTION
   ========================================== */






@keyframes rt-float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.1); }
}













/* USP Banner */








/* ==========================================
   RT - TOOLS SECTION
   ========================================== */














/* ==========================================
   RT - TOOL CARD
   ========================================== */













































/* ==========================================
   RT - BUTTONS
   ========================================== */


















/* ==========================================
   RT - COMPARISON SECTION (REFINED CSS)
   Premium, Visual, Impactful Design
   ========================================== */



/* Subtle background pattern */


/* ==========================================
   Section Header
   ========================================== */








/* ==========================================
   Comparison Grid (Side by Side)
   ========================================== */


/* ==========================================
   Comparison Box (Common Styles)
   ========================================== */


/* Others Box (Left) */




/* Risenex Box (Right) */




/* ==========================================
   Box Header
   ========================================== */










/* ==========================================
   Price Block
   ========================================== */












/* ==========================================
   Features List
   ========================================== */
















/* ==========================================
   Total Price
   ========================================== */










/* ==========================================
   VS Divider
   ========================================== */




/* ==========================================
   Savings Badge
   ========================================== */




@keyframes rt-shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}







/* ==========================================
   Bottom Stats
   ========================================== */








/* ==========================================
   Trust Note
   ========================================== */




/* ==========================================
   Responsive
   ========================================== */




/* ==========================================
   RT - CTA SECTION
   ========================================== */











/* Total Breakdown Text */


/* ==========================================
   RT - RESPONSIVE
   ========================================== */





/* ==========================================
   BILLFLOW SECTION — bf- prefix
   ========================================== */
.bf-section {
  padding: 100px 0;
  background: var(--gradient-bg-mixed);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.bf-card__btn {
  position: relative;
  z-index: 2;
}
.bf-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  pointer-events: none;
}
.bf-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
  z-index: 1;
}
.bf-header {
  text-align: center;
  margin-bottom: 60px;
}
.bf-label {
  display: inline-block;
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(198, 147, 10, 0.08);
  border: 1px solid rgba(198, 147, 10, 0.15);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}
.bf-title {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 14px;
  line-height: var(--leading-tight);
}
.bf-subtitle {
  font-size: var(--font-lg);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* Cards Grid */
.bf-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .bf-cards { grid-template-columns: 1fr; }
  .bf-section { padding: 64px 0; }
}

/* Base Card */
.bf-card {
  background: var(--glass-bg-light);
  border-radius: var(--radius-3xl);
  padding: 56px 64px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  position: relative;
  overflow: hidden;
}
.bf-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: var(--shadow-xl);
}

/* Business Card — Cyan accent */
.bf-card--business {
  border-top: 3px solid #06b6d4;
}
.bf-card--business:hover {
  box-shadow: var(--shadow-xl), 0 0 40px rgba(6, 182, 212, 0.12);
}

/* CA Card — Purple accent */
.bf-card--ca {
  border-top: 3px solid var(--color-accent);
}
.bf-card--ca:hover {
  box-shadow: var(--shadow-xl), var(--glow-purple);
}

/* Card Tag */
.bf-card__tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  width: fit-content;
}
.bf-card--business .bf-card__tag {
  background: rgba(6, 182, 212, 0.08);
  color: #1e4d8c;
  border: 1px solid rgba(6, 182, 212, 0.2);
}
.bf-card--ca .bf-card__tag {
  background: rgba(198, 147, 10, 0.08);
  color: var(--color-accent);
  border: 1px solid rgba(198, 147, 10, 0.2);
}

/* Card Icon */
.bf-card__icon {
  font-size: 2.2rem;
}

/* Card Title */
.bf-card__title {
  font-family: var(--font-family-display);
  font-size: 34px;
  font-weight: var(--font-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.bf-card--business .bf-card__title span { color: #06b6d4; }
.bf-card--ca .bf-card__title span { color: var(--color-accent); }

/* Tagline */
.bf-card__tagline {
  font-size: 17.5px;
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-top: -6px;
}

/* Description */
.bf-card__desc {
  font-size: 18px;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* Features List */
.bf-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  flex: 1;
}
.bf-card__features li {
  font-size: 17px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.bf-card__features li::before {
  content: '✓';
  font-weight: var(--font-bold);
  font-size: 12px;
  flex-shrink: 0;
}
.bf-card--business .bf-card__features li::before { color: #06b6d4; }
.bf-card--ca .bf-card__features li::before { color: var(--color-accent); }

/* CTA Buttons */
.bf-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: var(--radius-xl);
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  text-decoration: none;
  transition: transform var(--transition-medium), opacity var(--transition-medium), box-shadow var(--transition-medium), background-color var(--transition-medium), border-color var(--transition-medium), color var(--transition-medium), filter var(--transition-medium), max-height var(--transition-medium), width var(--transition-medium), height var(--transition-medium), top var(--transition-medium), left var(--transition-medium);
  margin-top: 8px;
  letter-spacing: var(--tracking-wide);
}
.bf-card__btn--cyan {
  background: linear-gradient(135deg, #06b6d4, #1e4d8c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}
.bf-card__btn--cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.45);
}
.bf-card__btn--purple {
  background: linear-gradient(135deg, #c6930a, #c6930a);
  color: #fff;
  box-shadow: var(--shadow-purple);
}
.bf-card__btn--purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 147, 10, 0.45);
}
.bf-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bf-card--business:hover::after {
  background: radial-gradient(circle at top left, rgba(6,182,212,0.12), transparent 60%);
  opacity: 1;
}

.bf-card--ca:hover::after {
  background: radial-gradient(circle at top left, rgba(107,70,193,0.12), transparent 60%);
  opacity: 1;
}
.bf-card__btn span {
  display: inline-block;
  transition: transform var(--transition-medium);
}
.bf-card__btn:hover span {
  transform: rotate(45deg);
}
.bf-card__trust {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  text-align: center;
  margin-top: 8px;
  letter-spacing: var(--tracking-wide);
  width: 100%;
  display: block;
}

/* ============================================================
   APPLE-EXACT MEGA NAV (v2) — navbar background expands; dropdown flows inside
   ============================================================ */

/* Navbar is the anchor. When dropdown open, it gets solid white bg that visually
   extends down behind the dropdown (one continuous surface). */
.navbar.dropdown-open {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: translateY(0) !important;
}

/* The has-dropdown li must be static so the absolute dropdown anchors to the NAVBAR, not the li */
.nav-item.has-dropdown { position: static; }

/* Mega dropdown: absolute, anchored to the navbar's full width, drops below the 72px bar */
.mega-dropdown {
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  width: 100vw;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    visibility 0.4s;
  z-index: 1190; /* just below navbar bar (1200) */
  padding-top: 0;
}

/* hover triggers removed — click-driven, see .mega-dropdown.active above */
.mega-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transform: translateY(0);
}

/* White content panel: full width of navbar, seamless with the white navbar above it */
.mega-dropdown-content {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0 0 24px 24px;
  box-shadow:  var(--ds-elevation-4);
  padding: 40px max(48px, calc((100vw - 1280px) / 2)) 56px;
  display: grid;
  grid-template-columns: 300px 1fr 1.3fr;
  gap: var(--space-10);
  min-height: 440px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mega-dropdown-content::before { content: none; }

/* Logo: bigger, no grey box */
.mega-logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: transparent;
}
.mega-logo-section img { width: 340px; height: auto; }

/* Keep the navbar container above the dropdown's shadow line so bar items are crisp */
.navbar .container { position: relative; z-index: 2; }

/* ============================================================
   PORTFOLIO / CASE STUDIES PAGE (pf-) — TOP-TIER v2
   ============================================================ */


/* ---------- HERO with particles + orbs ---------- */






@keyframes pfOrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,20px) scale(0.95); }
}

@keyframes pfParticle {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  10% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; }
  100% { transform: translateY(-340px) scale(0.4); opacity: 0; }
}
.pf-hero .container { position: relative; z-index: 2; }




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






/* ---------- CASES ---------- */


















/* Challenge = warm/amber */



/* Built = blue */



/* Result = green */














/* ---------- CTA ---------- */


.pf-cta .container { position: relative; z-index: 1; }







/* ---------- Responsive ---------- */



/* Restored: this override lived inside @media (max-width: 768px) before the
   :root blocks were merged. Hoisting it made 80px apply at every width. */
@media (max-width: 768px) {
  :root { --sbd-section-padding: 80px 0; }
}

/* ==========================================
   ICON SYSTEM — P2-5
   Sized in em so each icon inherits whatever font-size its slot already
   gave the emoji it replaced; no per-slot sizing rules were needed.
   Stroke is currentColor, so icons take the colour of their context.
   ========================================== */
.rx-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;                 /* never squashed inside a flex row */
  stroke-width: 1.75;
  overflow: visible;          /* round caps must not clip at the viewBox edge */
}

/* Optical correction: at small sizes a 1.75 stroke goes muddy, at large
   sizes it goes spindly. Two steps keep the weight looking constant. */
.nav-icon .rx-icon,
.submenu-icon .rx-icon { stroke-width: 1.9; }

.feature-icon .rx-icon,
.metric-icon .rx-icon,
.bf-feat__icon .rx-icon,
.bf-sol-card__icon .rx-icon { stroke-width: 1.6; }

/* ==========================================
   CONTACT HERO REVEAL — P2-6 interaction pass
   One class on .con-hero drives everything, so timing does not depend on
   when the script happens to run. Delays come in as --reveal-delay.
   ========================================== */

/* Masked line rise. The mask is the point: text arriving from behind an
   edge reads as composed, where a fade just reads as slow. */
.con-line-mask {
  overflow: hidden;
  padding-bottom: 0.16em;      /* descenders must not clip against the mask */
  margin-bottom: -0.16em;      /* ...without changing the spacing below */
}

.con-line-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform;
}

.con-hero.is-revealed .con-line-inner {
  transform: translateY(0);
  opacity: 1;
}

/* The visual settles a beat later, slightly larger and softer to start. */


.con-hero.is-revealed .con-hero-visual {
  opacity: 1;
  transform: none;
}

/* Icon tiles arrive last, one after another. */


.con-hero.is-revealed .con-icon-item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Reduce motion, do not remove feedback. Killing the reveal outright made
     the hero read as completely dead for anyone with the OS setting on —
     zero pixels changed between 400ms and 2.6s. Movement is removed; a
     gentle cross-fade stays, which is what the preference actually asks for. */
  .con-line-inner,
  .con-hero .con-hero-visual,
  .con-hero .con-icon-item {
    transform: none !important;
    transition: opacity 0.5s ease;
  }
  .con-hero-char {
    animation: conCharFadeReduced 0.5s ease forwards;
    filter: none;
    transform: none;
  }
  @keyframes conCharFadeReduced {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .con-line-mask { overflow: visible; }
}

/* ==========================================
   VIDEO GALLERY — hover preview
   The card expands in place and its own video plays. There is no lightbox
   on hover any more: with the strip auto-scrolling, every card that drifted
   under the cursor used to spawn one.
   ========================================== */








/* The strip keeps moving on hover, which is how it behaved before: the old
   JS wrote an inline 'running' on every card mouseleave, and inline style
   beats a CSS :hover rule, so the pause below never actually took effect.
   Pausing it for real made it look like it was crawling. The overlay opening
   is what pauses it now. */

@media (prefers-reduced-motion: reduce) {
.video-slider.infinite-scroll { animation: none; }
}


/* With backdrop-filter available the blur itself supplies most of the
   separation, so the flat ground can be lighter. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .video-lightbox { background: rgba(8, 21, 43, 0.52); }
}

/* ============================================================
   CASE STUDY TEMPLATE  (.cs-*)
   ------------------------------------------------------------
   Shared template for the per-project case study pages
   (case-unique-computers.html, case-ifw.html, ...).

   Built on the same idiom as index.html and the portfolio cards:
   frosted white glass over a navy-tinted ground with drifting
   orbs, the four --ds-elevation tokens, radii from the scale,
   navy + gold only. Glass needs something behind it to blur, so
   the body carries a layered gradient ground rather than flat
   white — on white, backdrop-filter renders as nothing.

   Long-form measure: prose runs at 1080px inside a 1280px shell,
   so the reading column is generous without losing the line
   length that makes it readable.
   ============================================================ */



/* ---------- Measure ---------- */



/* ---------- HERO ---------- */



.cs-hero .container { position: relative; z-index: 1; }

@keyframes csOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, 40px) scale(1.06); }
  66%      { transform: translate(30px, -30px) scale(0.96); }
}









/* Measured build facts, in glass. Not marketing metrics. */













/* On the light ground the gold pill loses contrast, so the in-body
   repeat of the same action inverts to navy. */


/* ---------- Status pill ----------
   For a build with no public URL yet. Deliberately not a link and not
   button-shaped: it states a fact rather than inviting a click. */




/* On the light body ground the gold-on-navy version loses contrast. */




/* ---------- BODY GROUND ----------
   The glass has to sit on something. Layered tints plus two slow
   orbs give the frosted cards a real backdrop to sample. */




.cs-body .container { position: relative; z-index: 1; }

/* ---------- SECTIONS ---------- */















/* ---------- Glass panel: the shared surface ---------- */


/* ---------- Problem facets ---------- */







/* ---------- Decision cards ---------- */








/* ---------- Code ---------- */
/* Inline code reads as a token in running prose without shouting. */







/* ---------- Challenges ---------- */

















/* ---------- Figures ---------- */



/* A shot that should not be upscaled past its native width sits inset
   and centred rather than stretched across the column. */

/* Same idea, for an inset shot with more native width to spend. */


/* Paired shots: the before/after of one mechanism. */



/* Inside a challenge card the figure runs edge to edge of the padding. */


/* ---------- Feature groups ---------- */










/* ---------- Plain glass panel (closing section) ---------- */



/* ---------- Honest-disclosure note ---------- */




/* ---------- Page nav ---------- */







/* ---------- CTA ---------- */


.cs-cta .container { position: relative; z-index: 1; }






/* ---------- Reveal ---------- */



/* ---------- Responsive ---------- */






/* Frosted glass costs a lot on low-end GPUs and degrades to a flat
   wash where it is unsupported, so opt in rather than assume. */




/* ============================================================
   PORTFOLIO GATEWAY  (.pw-*)
   ------------------------------------------------------------
   The entry point to the seven case studies. Same glass recipe,
   ground and tokens as the .cs-* case study template, so the
   gateway and the pages it opens read as one system.
   ============================================================ */







/* The first card runs the full width of the grid. */

















/* Stretch the one real link over the whole card, so the card is
   clickable without inventing a second focusable target. */


/* Status flags */