/* ==========================================================================
   CONSOLIDATED STYLESHEET
   Merged: 2026-07-25 04:12:08
   Files merged: style1.css, style.css, style2.css
   Total duplicate blocks removed: 3375
   ========================================================================== */

/* Home Page + Shared Global Styles */
:root {
  --primary-color: #FE7F2D;
  /* Logo Orange */
  --bg-start: #233D4D;
  /* Logo Slate Blue */
  --bg-end: #152530;
  /* Darker Slate */
  --topbar-color: #1a2c37;
  --text-white: #ffffff;
  --text-gray: rgba(255, 255, 255, 0.75);
  --header-bg: #1a2c37;
  /* Solid dark slate for the header */
  --top-bar-bg: var(--topbar-color);
  --font-main: 'Roboto', sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header & Navigation Styles */
.top-bar {
  background: rgba(16, 7, 70, 0.4);
  /* Subtle semi-transparent base */
  padding: 10px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo img {
  height: 52px;
  /* Adjusted logo size to match screenshot look */
}

/* Show only menu toggle on mobile below */
/* Hero Section Styles */
.hero {
  padding: 180px 0 0px;
  /* Reduced bottom padding for overlap */
  position: relative;
  overflow: visible;
  /* Allow image to spill out the bottom */
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
  color: white;
}

/* Base style for decorative elements */
/* Structural Tech Grid */

/* Soft Mesh Glow Blobs */
/* Data Lines Effect */
/* Left shapes */
/* Shapes 4-6 can be removed or subtly styled if needed, keeping them as glows */
/* Updated centered glow */
.hero-title {
  font-family: var(--font-main);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Futuristic Scan Line Effect */
/* Optional: Slight zoom when becoming inactive to give depth */
/* Subtle reflection/shelf shadow under the slider */
/* Unified Section Utility */
/* Utilities */
/* Redesigned Platform Section Styling */
/* Specific Iconic Colors/Gradients */
/* Platform Footer / ROI Bar */
/* Infinite Logo Scroller Styling */
/* Enterprise Blueprint Storytelling Redesign */
/* Unified Platform Background Effects (Professional Texture) */
.unified-platform {
  background-color: #f8fafc;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 50px 0;
  position: relative;
  overflow: hidden;
}

/* Restored & Optimized Tab component styling */
/* Content Area Logic */
/* 3. High-End Feature Grid */
/* Staggered Tech Matrix Features */
/* Technical Data Bus (Behind the boxes - Moving Style) */
/* Card Staggering */
/* 4. Dashboard Elevation */
/* 5. Integration Ecosystem Enhancement */
/* 6. Sticky CTA refinement */
/* Floating Support Chat Bubble */
/* ----------------------------------------------------------------
   MODERN PROFESSIONAL FOOTER (MABL INSPIRED)
---------------------------------------------------------------- */
/* Scroll Reveal Initial States */
/* Feature Card Glowing Border Effect */
/* Dashboard Image Float/Tilt (Subtle Animation) */
/* Responsive Styles */
/* Vibrant 3D Testimonial Theater */
.testimonials-3d-section {
  background: white;
  padding: 10px 0 50px 0;
  overflow: hidden;
  color: #0f172a;
}

/* 3D Stack Logic */
/* ----------------------------------------------------------------
   PREMIUM BLOGS SECTION REDESIGN
---------------------------------------------------------------- */
/* Refined Grid */
/* Explore Hub Button */
/* Utility Buttons */
/* ----------------------------------------------------------------
   INTEGRATIONS PRO SECTION STYLES
---------------------------------------------------------------- */
/* Grids for surround logos */
.logo-nodes-bottom {
  margin-top: 50px;
  margin-bottom: 0;
}

/* Main content grid (Side nodes + Center) */
/* Center content */
/* Responsive adjustments */
/* ----------------------------------------------------------------
   ENTERPRISE PROFESSIONAL CTA (MODERN LIGHT VERSION)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   SCROLL REVEAL ANIMATIONS
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   WEB AUTOMATION PAGE
---------------------------------------------------------------- */
/* Web Automation Page */
.web-automation-page .wa-hero {
  padding: 140px 0 100px;
  background: linear-gradient(135deg, #15095e 0%, #0f3ac4 60%, #0a1f6e 100%);
  position: relative;
  overflow: hidden;
  color: white;
}

.web-automation-page .wa-hero-title {
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 24px;
  text-shadow: 0 5px 30px rgba(0, 0, 0, 0.4);
}

.web-automation-page .features-deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.web-automation-page .wa-cta {
  padding: 100px 0;
  background: #f8fafc;
}

@media (max-width: 768px) {
  .web-automation-page .wa-hero {
    padding: 160px 0 70px;
  }

  .web-automation-page .wa-hero .container {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }

  .web-automation-page .wa-hero-title {
    font-size: 2.4rem;
  }

  .web-automation-page .wa-hero-desc {
    font-size: 1rem;
    margin-bottom: 26px;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  .web-automation-page .wa-hero-actions {
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .web-automation-page .wa-hero-actions a {
    width: 100%;
    justify-content: center;
  }

  .web-automation-page .wa-hero-stats {
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 24px;
  }

  .web-automation-page .wa-stat {
    min-width: 120px;
  }

  .web-automation-page .browser-body {
    min-height: 260px;
    padding: 18px;
  }

  .web-automation-page .ai-badge,
  .web-automation-page .heal-badge {
    position: static;
    display: inline-flex;
    margin: 14px 10px 0 0;
  }

  .web-automation-page .how-section,
  .web-automation-page .features-deep,
  .web-automation-page .metrics-section,
  .web-automation-page .wa-cta {
    padding: 72px 0;
  }

  .web-automation-page .how-grid {
    grid-template-columns: 1fr;
  }

  .web-automation-page .features-deep-grid,
  .web-automation-page .features-deep-grid.reverse {
    gap: 34px;
    margin-top: 40px;
  }

  .web-automation-page .feature-visual-inner {
    padding: 22px;
    min-height: 280px;
  }

  .web-automation-page .metric-card {
    padding: 34px 18px;
  }

  .web-automation-page .metric-num {
    font-size: 3rem;
  }

  .web-automation-page .browser-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .web-automation-page .browser-card {
    padding: 22px 14px;
  }

  .web-automation-page .section-title {
    font-size: 2.2rem;
  }

  .web-automation-page .section-desc {
    font-size: 1rem;
  }

  .web-automation-page .wa-cta h2 {
    font-size: 2.2rem;
  }

  .web-automation-page .wa-cta p {
    font-size: 1rem;
  }

  .web-automation-page .wa-cta-box {
    padding: 40px 24px;
  }
}

@media (max-width: 480px) {
  .web-automation-page .wa-hero {
    padding: 150px 0 60px;
  }

  .web-automation-page .wa-hero-title {
    font-size: 2rem;
  }

  .web-automation-page .wa-hero-badge {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    padding: 8px 14px;
  }

  .web-automation-page .wa-hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .web-automation-page .section-title {
    font-size: 1.85rem;
  }

  .web-automation-page .how-step {
    padding: 0 8px;
  }

  .web-automation-page .step-circle {
    width: 82px;
    height: 82px;
    font-size: 1.6rem;
    margin-bottom: 18px;
  }

  .web-automation-page .step-title {
    font-size: 1.05rem;
  }

  .web-automation-page .feature-list li {
    gap: 10px;
    padding: 12px 0;
  }

  .web-automation-page .feature-list .fi {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }

  .web-automation-page .browser-cards {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .web-automation-page .browser-icon {
    font-size: 2.3rem;
  }

  .web-automation-page .metrics-grid {
    grid-template-columns: 1fr;
  }

  .web-automation-page .wa-cta-actions {
    gap: 14px;
  }

  .web-automation-page .wa-cta-actions a {
    width: 100%;
    justify-content: center;
  }

  .web-automation-page .breadcrumb {
    font-size: 0.74rem;
    gap: 6px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .container {
    padding: 0 16px;
  }

  .top-bar {
    display: none;
  }

  .main-header {
    padding: 14px 0;
  }

  .main-header .container {
    gap: 12px;
  }

  .logo img {
    height: 38px;
  }

  .header-actions {
    gap: 10px;
    margin-left: auto;
  }

  .btn-book-demo {
    padding: 9px 14px;
    font-size: 0.78rem;
  }

  .header-action-text {
    padding: 8px 12px;
    font-size: 0.72rem;
    letter-spacing: 1px;
  }

  .mobile-menu-toggle.is-open {
    top: 14px;
    right: 16px;
  }

  .nav-links {
    justify-content: flex-start;
    padding: 110px 24px 40px;
    overflow-y: auto;
  }

  .nav-links li {
    text-align: left;
  }

  .nav-item {
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    padding: 12px 0;
    text-transform: none;
  }

  .hero {
    padding: 124px 0 0;
  }

  .hero-content {
    margin-bottom: 32px;
  }

  .hero-tagline {
    font-size: 0.8rem;
    letter-spacing: 1.4px;
    margin-bottom: 14px;
  }

  .hero-title {
    font-size: 2.1rem;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.03em;
  }

  .hero-description {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 26px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .btn {
    width: 100%;
    padding: 15px 20px;
    font-size: 0.95rem;
  }

  .hero-image {
    margin-bottom: -72px;
  }

  .hero-slider {
    height: auto;
    min-height: 210px;
    border-radius: 14px;
  }

  .hero-slide {
    position: absolute;
  }

  .hero-slide img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .slider-dots {
    margin-top: 16px;
    gap: 8px;
  }

  .dot {
    width: 18px;
  }

  .dot.active {
    width: 30px;
  }

  .section-padding,
  .blogs-section,
  .integrations-pro-section,
  .enterprise-cta-section,
  .modern-footer-pro {
    padding-top: 56px;
    padding-bottom: 48px;
  }

  .platform-section {
    padding: 96px 0 44px;
  }

  .platform-main {
    gap: 28px;
    margin-bottom: 28px;
  }

  .platform-left {
    text-align: center;
  }

  .platform-title {
    font-size: 1.85rem;
  }

  .platform-title br {
    display: none;
  }

  .platform-graphic img {
    max-width: 240px;
  }

  .platform-item {
    padding: 24px 20px;
  }

  .grid-icon {
    font-size: 2.2rem;
    margin-bottom: 18px;
  }

  .platform-item h3 {
    font-size: 1.1rem;
  }

  .platform-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .roi-item,
  .roi-item.label {
    justify-content: center;
    text-align: center;
  }

  .roi-arrow {
    display: none;
  }

  .scroller-wrapper {
    padding: 12px 0;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .section-title {
    font-size: 1.95rem;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .section-desc {
    font-size: 1rem;
  }

  .tabs-container {
    gap: 24px;
    margin-top: 28px;
  }

  .tabs-sidebar {
    width: calc(100% + 32px);
    max-width: none;
    margin: 0 -16px;
    padding: 0 16px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
    top: 70px;
  }

  .tabs-sidebar::-webkit-scrollbar {
    display: none;
  }

  .tab-link {
    flex: 0 0 auto;
    padding: 11px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  }

  .tab-link span {
    display: inline;
    font-size: 0.88rem;
  }

  .tab-panel img {
    border-radius: 16px;
  }

  .features {
    padding: 52px 0;
  }

  .features-grid {
    gap: 18px;
    margin-top: 28px;
  }

  .tech-data-bus {
    display: none;
  }

  .feature-card {
    padding: 28px 20px;
  }

  .testimonials-3d-section {
    padding: 20px 0 40px;
  }

  .testimonials-3d-wrapper {
    gap: 32px;
  }

  .live-title {
    font-size: 2.15rem;
    letter-spacing: -0.04em;
  }

  .live-subtitle {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .card-stack-inner {
    height: auto;
  }

  .stack-card,
  .primary-card,
  .secondary-card,
  .next-card,
  .stack-card:hover {
    width: 100%;
    max-width: 100%;
    position: relative;
    left: auto !important;
    top: auto;
    transform: none !important;
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }

  .secondary-card,
  .next-card {
    display: none;
  }

  .card-body {
    padding: 26px 20px;
  }

  .card-body .quote {
    font-size: 1.05rem;
    margin-bottom: 24px;
  }

  .card-footer {
    align-items: flex-start;
  }

  .featured-image img {
    width: 100%;
    height: 240px;
  }

  .featured-badge {
    top: 16px;
    left: 16px;
    padding: 8px 14px;
    font-size: 0.72rem;
  }

  .featured-content {
    padding: 28px 20px;
  }

  .blog-meta {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
  }

  .featured-title {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .featured-content p {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .author-info {
    margin-bottom: 24px;
  }

  .card-image-wrapper {
    height: 200px;
  }

  .card-content {
    padding: 22px 20px 72px;
  }

  .card-content h3 {
    font-size: 1.2rem;
    margin-bottom: 18px;
  }

  .btn-premium-nav,
  .btn-integrations-outline,
  .btn-enterprise-solid,
  .btn-enterprise-outline {
    width: 100%;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  .logo-nodes-top,
  .logo-nodes-bottom {
    gap: 12px;
    margin-bottom: 26px;
  }

  .logo-nodes-bottom {
    margin-top: 26px;
  }

  .node {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
  }

  .integrations-main-grid {
    gap: 26px;
  }

  .side-nodes {
    gap: 14px;
  }

  .large-node {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 14px 18px;
    font-size: 1rem;
    white-space: normal;
    text-align: center;
  }

  .large-node span {
    font-size: 0.98rem;
  }

  .pro-tag {
    margin-bottom: 18px;
  }

  .pro-title {
    font-size: 1.95rem;
    margin-bottom: 16px;
    letter-spacing: -0.04em;
  }

  .pro-desc {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .enterprise-cta-box {
    border-radius: 24px;
    padding: 28px 18px;
  }

  .enterprise-heading {
    font-size: 2rem;
  }

  .enterprise-heading br {
    display: none;
  }

  .enterprise-desc {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .trust-grid {
    gap: 16px;
  }

  .trust-item {
    padding: 18px 16px;
    gap: 14px;
    text-align: left;
  }

  .trust-item:hover {
    transform: none;
  }

  .floating-chat-bubble {
    width: 54px;
    height: 54px;
    right: 18px;
    bottom: 18px;
    font-size: 1.35rem;
  }

  .modern-footer-pro {
    padding-bottom: 0;
  }

  .footer-inner {
    gap: 36px;
  }

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

  .brand-description {
    margin-bottom: 24px;
    font-size: 0.95rem;
  }

  .f-title {
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .f-list li {
    margin-bottom: 10px;
  }

  .f-list a {
    font-size: 0.98rem;
  }

  .footer-bottom-bar {
    padding: 28px 0;
  }

  .footer-social-circles {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Mobile only */
/* Mobile App Testing Page */
/* ═══════════════════════════════════════════
    
    ═══════════════════════════════════════════ */
/* Mobile App Testing Page */
/* ═══════════════════════════════════════════
       TOP BAR
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .top-bar {
  background: rgba(16, 7, 70, .45);
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* ═══════════════════════════════════════════
       HEADER / NAV  (identical to main site)
    ═══════════════════════════════════════════ */
.mobile-app-testing-page header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--nav-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  transition: all .4s ease;
}

/* ═══════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .mat-hero {
  min-height: 100vh;
  padding: 150px 0 100px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* animated mesh background */
/* dot grid */
/* ═══════════════ PHONE MOCKUP ═══════════════ */
/* animated status bar */
/* test result cards on phone */
/* floating side badges */
/* ═══════════════════════════════════════════
       SECTION COMMONS
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .sp {
  padding: 100px 0;
}

/* ═══════════════════════════════════════════
       PLATFORM STRIP  (OS pills)
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       HOW IT WORKS  (timeline)
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       FEATURES  (glassmorphic cards)
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       DEVICE GRID
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       LIVE LOG  (code terminal animation)
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       METRICS
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       INTEGRATIONS STRIP
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       CTA
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       FOOTER  (identical to main site)
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
/* homepage-like light theme override */
/* API Enterprise Page */
/* API / Enterprise Page */
/* API Enterprise Page - redesign pass to match the web automation direction */
.api-enterprise-page .api-hero {
  padding: 158px 0 110px;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 210, 255, 0.18), transparent 20%),
    radial-gradient(circle at 88% 22%, rgba(26, 115, 232, 0.28), transparent 24%),
    linear-gradient(135deg, #160a5d 0%, #173eb8 52%, #0b6df3 100%);
}

/* AI Automation Page */
.ai-automation-page .aia-log-stream {
  min-height: 112px;
  padding: 16px 18px;
  border-radius: 22px;
  background: #0f1d34;
  color: #d8e9ff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.76rem;
  line-height: 1.75;
}

.ai-automation-page .aia-section {
  padding: 100px 0;
}

/* Performance Page */
/* AI Capabilities Page */
/* Platform Overview Page */
.platform-overview-page .pov-hero {
  position: relative;
  padding: 156px 0 92px;
  background: linear-gradient(135deg, #15095e 0%, #103ecd 62%, #0a1f6e 100%);
  color: #fff;
  overflow: hidden;
}

/* Pricing Page */
/* About Page */
.about-hero-grid,
.contact-hero-grid,
.career-hero-grid,
.contact-main-grid,
.about-split-grid,
.career-split-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: center;
}

.about-story-log,
.contact-console-log,
.career-console-log {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.about-section,
.contact-section,
.career-section {
  position: relative;
  padding: 50px 0;
}

.about-section-title,
.contact-section-title,
.career-section-title,
.contact-panel-head h2,
.about-cta-box h2,
.career-cta-box h2 {
  margin-top: 18px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  color: #100746;
}

/* Contact Page */
/* Career Page */
/* Blog Page */
body.blog-page,
body.docs-page {
  background:
    linear-gradient(180deg, #100746 0, #100746 180px, #f7f9fc 180px, #f7f9fc 100%);
  color: #100746;
}

.blog-page .blog-hero {
  padding: 150px 0 84px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
  color: #fff;
}

/* Docs Page */
.docs-hero-desc {
  max-width: 620px;
  margin: 0 0 24px;
  font-size: 1.06rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .top-bar {
    display: none;
  }

  .main-header {
    padding: 16px 0;
  }

  .main-header .container {
    gap: 14px;
  }

  .logo img {
    height: 40px;
  }

  .header-actions {
    gap: 10px;
    margin-left: auto;
  }

  .btn-book-demo {
    padding: 9px 14px;
    font-size: 0.8rem;
  }

  .mobile-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
    padding: 0 !important;
  }

  .nav-links {
    padding: 84px 20px 40px;
    gap: 18px;
  }

  .nav-item {
    font-size: 1.35rem;
    letter-spacing: 1px;
  }

  .hero-title,
  .bh-title,
  .docs-hero-title,
  .about-title,
  .contact-title,
  .career-title {
    font-size: clamp(2.2rem, 10vw, 3rem);
    line-height: 1.02;
  }

  .hero-desc,
  .bh-desc,
  .docs-hero-desc,
  .about-desc,
  .contact-desc,
  .career-desc {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .featured-card,
  .sl-grid,
  .nb-inner,
  .docs-layout,
  .about-hero-grid,
  .contact-hero-grid,
  .career-hero-grid,
  .pricing-page .prc-hero-grid,
  .platform-overview-page .pov-hero-grid,
  .performance-page .perf-hero-grid,
  .ai-capabilities-page .aic-hero-grid,
  .api-enterprise-page .api-hero-grid,
  .mobile-app-testing-page .mat-hero .container {
    grid-template-columns: 1fr !important;
  }

  .posts-grid,
  .topics-cards,
  .sidebar,
  .nb-row,
  .prc-grid,
  .pov-grid,
  .aic-grid,
  .perf-grid,
  .api-grid,
  .about-values-grid,
  .contact-channel-grid,
  .career-role-grid {
    grid-template-columns: 1fr !important;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .blog-page .blog-hero {
    padding-top: 132px;
    padding-bottom: 72px;
  }

  .bh-top,
  .grid-header,
  .page-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .posts-grid,
  .topics-cards,
  .sidebar,
  .nb-row {
    grid-template-columns: 1fr;
  }

  .fc-body {
    padding: 28px 22px;
  }

  .featured-card,
  .nb-inner {
    border-radius: 22px;
  }

  .docs-content {
    padding: 32px 18px;
  }

  .page-nav {
    gap: 12px;
  }

  .pn-card {
    padding: 16px;
  }

  .docs-hero-title {
    font-size: 2.75rem;
  }
}

@media (max-width: 480px) {
  .btn-book-demo {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .nav-links {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-item {
    font-size: 1.15rem;
  }

  .mobile-menu-toggle {
    padding: 0 !important;
  }

  .logo img {
    height: 34px;
  }
}

body.banking-page .main-header,
body.ecommerce-page .main-header,
body.healthcare-page .main-header {
  background: transparent;
}

body.banking-page .bank-hero,
body.banking-page .bank-hero::before,
body.banking-page .bank-hero::after,
body.ecommerce-page .ecom-hero,
body.ecommerce-page .ecom-hero::before,
body.ecommerce-page .ecom-hero::after,
body.healthcare-page .health-hero,
body.healthcare-page .health-hero::before,
body.healthcare-page .health-hero::after {
  pointer-events: none;
}



/* Industry Solution Pages */
body.banking-page .top-bar,
body.ecommerce-page .top-bar,
body.healthcare-page .top-bar {
  background: rgba(16, 7, 70, 0.4);
}

/* Banking Page */
/* TOP BAR */
body.banking-page .top-bar {
  background: rgba(16, 7, 70, .45);
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* HEADER */
body.banking-page header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--nav-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  transition: all .4s;
}

body.banking-page .main-header {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body.banking-page .main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ════════ HERO ════════ */
/* Circuit / grid overlay */
/* compliance badges row */
/* ════ VAULT VISUAL (right side) ════ */
/* floating metric cards */
/* ════ STATS STRIP ════ */
/* ════ CHALLENGES ════ */
/* ════ SOLUTIONS ════ */
/* dashboard mockup */
/* ════ COMPLIANCE ════ */
/* ════ CASE STUDY ════ */
/* ════ CTA ════ */
/* FOOTER */
/* E-Commerce Page */
body.ecommerce-page {
  --nav-bg: #100746;
  --bg: #f7f4ef;
  --bg2: #ffffff;
  --bg3: #f0ede8;
  --ink: #0d0d0d;
  --ink2: #1a1a1a;
  --slate: #555;
  --muted: #888;
  --coral: #e8412a;
  --coral2: #ff5a3c;
  --coral-lite: rgba(232, 65, 42, .08);
  --lime: #a8e535;
  --lime2: #c2f54a;
  --lime-dark: #5a8a00;
  --border: #e0dbd3;
  --border2: #c8c2ba;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* TOP BAR */
body.ecommerce-page .top-bar {
  background: rgba(16, 7, 70, .45);
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* HEADER */
body.ecommerce-page header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--nav-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  transition: all .4s;
}

body.ecommerce-page .main-header {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body.ecommerce-page .main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ════════ HERO ════════ */
/* Diagonal slash */
/* dot grid */
body.ecommerce-page .hero-bc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .35);
  margin-bottom: 20px;
}


/* hero trust */
/* RIGHT: animated metrics panel */
/* ════ PROBLEM STRIP ════ */
/* ════ FEATURES ════ */
/* ════ CONVERSION SECTION ════ */
/* big number display */
/* text side */
/* ════ PEAK TRAFFIC ════ */
/* ════ TESTIMONIAL ════ */
/* ════ CTA ════ */
/* FOOTER */
/* Healthcare Page */
/* TOP BAR */
body.healthcare-page .top-bar {
  background: rgba(16, 7, 70, .45);
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* HEADER */
body.healthcare-page header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--nav-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  transition: all .4s;
}

body.healthcare-page .main-header {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body.healthcare-page .main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ════════ HERO ════════ */
/* subtle crosshatch */
/* compliance mini badges */
/* RIGHT: clinical card visual */
/* ════ STATS ════ */
/* ════ CHALLENGES ════ */
/* ════ COMPLIANCE ════ */
/* EHR mockup */
/* ════ USE CASES ════ */
/* ════ TESTIMONIAL ════ */
/* ════ CTA ════ */
/* FOOTER */
/* Industry Pages - homepage style correction */
/* Banking Page - final redesign */
body.banking-page .bank-hero {
  padding: 164px 0 132px;
}

body.banking-page .sec-title em {
  color: #1e6fd9 !important;
}

/* Banking Page - case study rebuild */
/* Industry Pages - final polish */

body.security-page .sec-hero,
body.integration-page .int-hero,
body.enterprise-services-page .ent-hero {
  padding: 150px 0 80px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ----------------------------------------------------------------
   INTEGRATIONS PAGE
---------------------------------------------------------------- */
body.integration-page {
  --void: #07090f;
  --void2: #0c0f1a;
  --void3: #111523;
  --surface: #161c2e;
  --surface2: #1d2540;
  --indigo: #4f46e5;
  --indigo2: #6366f1;
  --indigo3: #818cf8;
  --indigo-lite: rgba(79, 70, 229, .12);
  --indigo-glow: rgba(79, 70, 229, .25);
  --cyan: #06b6d4;
  --cyan2: #22d3ee;
  --green: #10b981;
  --amber: #f59e0b;
  --pink: #ec4899;
  --orange: #f97316;
  --border: rgba(255, 255, 255, .07);
  --border2: rgba(255, 255, 255, .13);
  --text: #e8eef8;
  --text2: rgba(232, 238, 248, .6);
  --text3: rgba(232, 238, 248, .3);
  --font-display: 'Exo 2', sans-serif;
  --font-body: 'Mulish', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ----------------------------------------------------------------
   SECURITY PAGE
---------------------------------------------------------------- */
body.security-page {
  --void: #050709;
  --void2: #080c10;
  --void3: #0d1219;
  --surface: #111820;
  --surface2: #162030;
  --cyan: #00e5ff;
  --cyan2: #40efff;
  --cyan3: #80f5ff;
  --cyan-lite: rgba(0, 229, 255, .08);
  --cyan-mid: rgba(0, 229, 255, .15);
  --cyan-glow: rgba(0, 229, 255, .2);
  --green: #00ff88;
  --green2: #00cc6a;
  --green-lite: rgba(0, 255, 136, .08);
  --red: #ff3b3b;
  --red-lite: rgba(255, 59, 59, .1);
  --amber: #ffb800;
  --amber-lite: rgba(255, 184, 0, .1);
  --border: rgba(0, 229, 255, .08);
  --border2: rgba(0, 229, 255, .18);
  --text: #ddeeff;
  --text2: rgba(221, 238, 255, .6);
  --text3: rgba(221, 238, 255, .3);
  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Geologica', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

body.security-page .sec-title .cyan {
  color: var(--cyan2);
}

/* ----------------------------------------------------------------
   ENTERPRISE SERVICES PAGE
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   HOMEPAGE-STYLE DARK THEME OVERRIDES FOR INTERNAL PAGES
---------------------------------------------------------------- */


body.security-page .top-bar,
body.enterprise-services-page .top-bar {
  background: rgba(16, 7, 70, .4) !important;
}



/* Final homepage-style shell override for the 3 internal solution pages */
body.integration-page>*:not(header),
body.security-page>*:not(header),
body.enterprise-services-page>*:not(header) {
  z-index: 1;
}


body.integration-page main,
body.security-page main,
body.enterprise-services-page main {
  z-index: 1;
}

body.integration-page .int-hero,
body.security-page .sec-hero,
body.enterprise-services-page .ent-hero {
  padding-top: 190px;
}

/* Home Page + Shared Global Styles */
:root {
  --primary-color: #1e6fd9;
  --bg-start: #b3d9f7;
  /* Light sky blue - start */
  --bg-end: #5aaee8;
  /* Medium light blue - end */
  --topbar-color: #3a8fd6;
  --text-white: #ffffff;
  --text-gray: rgba(255, 255, 255, 0.85);
  --header-bg: #3a8fd6;
  /* Light blue for the header */
  --top-bar-bg: var(--topbar-color);
  --font-main: 'Roboto', sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: var(--font-main);
  background: white;
  /* Light background for the main body */
  color: #100746;
  /* Dark navy for text */
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Header & Navigation Styles */
.top-bar {
  /* background: rgba(16, 7, 70, 0.4); */
  /* Subtle semi-transparent base */
  padding: 10px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  gap: 20px;
}

.top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-gray);
}

.top-bar-item:hover {
  color: var(--text-white);
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: all 0.4s ease;
}

.main-header {
  padding: 24px 0;
  position: relative;
  z-index: 100;
  background: transparent;
  /* Merge with hero */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .logo {
    height: 46px !important;
    padding: 0 20px !important;
  }

  .logo img {
    height: 24px !important;
  }
}

.nav-item {
  position: relative;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
}

.nav-item:hover {
  color: var(--primary-color);
}

.nav-item.active {
  color: var(--primary-color);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

/* Show only menu toggle on mobile below */
@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2101;
  }
}


/* Base style for decorative elements */
.hero-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  /* Layer above the grid */
  overflow: hidden;
}

/* Structural Tech Grid */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  z-index: 1;
}

/* Soft Mesh Glow Blobs */
.shape {
  position: absolute;
  filter: blur(140px);
  border-radius: 50%;
  opacity: 0.6;
  z-index: 1;
}

.shape-1 {
  width: 450px;
  height: 450px;
  top: -150px;
  left: -150px;
  background: var(--primary-color);
  opacity: 0.5;
}

.shape-2 {
  width: 650px;
  height: 650px;
  bottom: -250px;
  right: -150px;
  background: #103ECD;
  opacity: 0.4;
}

.shape-3 {
  width: 350px;
  height: 350px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #9b59b6;
  /* More vibrant purple */
  opacity: 0.3;
}

/* Data Lines Effect */
.hero-shapes::before,
.hero-shapes::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(30, 111, 217, 0.5), transparent);
  animation: data-line 8s linear infinite;
}

.hero-shapes::before {
  left: 5%;
  animation-delay: -2s;
}

.hero-shapes::after {
  right: 5%;
  animation-delay: -5s;
}

@keyframes data-line {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

/* Left shapes */
.shape-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 5%;
  animation-duration: 15s;
  box-shadow: 0 0 30px rgba(16, 62, 205, 0.3);
}

.shape-2 {
  width: 40px;
  height: 40px;
  top: 45%;
  left: 12%;
  animation-duration: 10s;
}

.shape-3 {
  width: 120px;
  height: 120px;
  top: 75%;
  left: 3%;
  animation-duration: 20s;
}

/* Shapes 4-6 can be removed or subtly styled if needed, keeping them as glows */
.shape-4,
.shape-5,
.shape-6 {
  background: rgba(255, 255, 255, 0.05);
  filter: blur(100px);
}

/* Updated centered glow */
.hero::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(16, 62, 205, 0.4) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto 60px;
  /* Center the block and add bottom spacing */
  position: relative;
  z-index: 10;
  /* Ensure text stays above background shapes */
}

.hero-tagline {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}

.hero-title {
  font-family: var(--font-main);
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.special-text {
  background: linear-gradient(to right, #00d2ff, #0069ff, #00d2ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
  display: inline-block;
  padding-right: 5px;
  text-shadow: none;
  /* No shadow on gradient text to keep it sharp */
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 40px;
}

.btn {
  padding: 18px 45px;
  border-radius: 50px;
  font-weight: 700;
  font-family: var(--font-main);
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.hero-slider {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
  background: #0d063a;
  /* Darker base for slide contrast */
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 105, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Futuristic Scan Line Effect */
.hero-slider::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0, 105, 255, 0.15), transparent);
  animation: scan 8s linear infinite;
  z-index: 15;
  pointer-events: none;
}

@keyframes scan {
  from {
    top: -100%;
  }

  to {
    top: 100%;
  }
}

/* Optional: Slight zoom when becoming inactive to give depth */
/* Subtle reflection/shelf shadow under the slider */
.hero-image::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(0, 105, 255, 0.2) 0%, transparent 75%);
  z-index: 0;
  filter: blur(20px);
}

/* Unified Section Utility */
.section-padding-mini {
  padding: 20px 0;
  position: relative;
}

/* Utilities */
/* Redesigned Platform Section Styling */
.platform-section {
  padding: 150px 0 60px;
  background: #f8f9fc;
  border-bottom: 1px solid #eff2f6;
  overflow: hidden;
}

.platform-main {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}

.platform-left {
  flex: 1.2;
  min-width: 0;
}

.platform-graphic img {
  max-width: 350px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.05));
}

.platform-right {
  flex: 1.8;
  min-width: 0;
}

.platform-item {
  padding: 20px 40px;
  border-right: 1px dotted #cbd5e0;
  border-bottom: 1px dotted #cbd5e0;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.grid-icon {
  font-size: 3rem;
  margin-bottom: 30px;
  display: block;
}

/* Specific Iconic Colors/Gradients */
/* Platform Footer / ROI Bar */
/* Infinite Logo Scroller Styling */
/* Enterprise Blueprint Storytelling Redesign */
/* Unified Platform Background Effects (Professional Texture) */
.unified-platform {
  /* background-color: #f8fafc; */
  /* background-image: radial-gradient(#e2e8f0 1px, transparent 1px); */
  background-size: 24px 24px;
  padding: 50px 0;
  position: relative;
  overflow: hidden;
}

/* Restored & Optimized Tab component styling */
.tabs-sidebar {
  width: auto;
  display: flex;
  flex-direction: row;
  background: white;
  padding: 8px;
  border-radius: 100px;
  border: 1px solid #e2e8f0;
  gap: 5px;
  position: sticky;
  top: 100px;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.tab-link {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  color: #64748b;
  border-radius: 100px;
  user-select: none;
  font-weight: 600;
  white-space: nowrap;
  /* Prevents text from coming in 2 lines */
}

.tab-link:hover {
  color: var(--primary-color);
  background: #f1f5f9;
}

.tab-link.active {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 10px 20px rgba(0, 105, 255, 0.2);
}

.tab-link span {
  font-size: 0.95rem;
}

/* Content Area Logic */
.tabs-content {
  width: 100%;
  max-width: 1100px;
}

.tab-panel {
  display: none;
  width: 100%;
}

.tab-panel.active {
  display: block;
  animation: slideUpReveal 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes slideUpReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tab-panel img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  border: 1px solid #eef2f6;
  background: white;
}

@media (max-width: 1024px) {
  .tabs-sidebar {
    width: 100%;
    max-width: 600px;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 30px;
  }
}

@media (max-width: 768px) {
  .tabs-sidebar {
    gap: 3px;
    padding: 5px;
    top: 80px;
  }

  .tab-link {
    padding: 10px 18px;
  }

  .tab-link span {
    display: none;
  }
}

/* 3. High-End Feature Grid */
/* Staggered Tech Matrix Features */
/* Technical Data Bus (Behind the boxes - Moving Style) */
.node-1 {
  left: 12.5%;
}

.node-2 {
  left: 37.5%;
}

.node-3 {
  left: 62.5%;
}

.node-4 {
  left: 87.5%;
}

/* Card Staggering */
.feature-card {
  padding: 40px 30px;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-align: center;
  /* Gradient Border Technique */
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, rgba(0, 105, 255, 0.05), rgba(0, 105, 255, 0.3), rgba(0, 105, 255, 0.05)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.feature-card:hover {
  transform: translateY(-20px);
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, rgba(0, 105, 255, 0.1), rgba(0, 105, 255, 1), rgba(0, 105, 255, 0.1)) border-box;
  box-shadow: 0 40px 100px rgba(0, 105, 255, 0.1);
}

.card-tag {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  color: var(--primary-color);
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: block;
}

.feature-icon {
  width: 70px;
  height: 70px;
  background: #f8fafc;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30px;
  color: #0069ff;
  font-size: 1.6rem;
  transition: all 0.4s;
  border: 1px solid #edf2f7;
}

.feature-card:hover .feature-icon {
  background: var(--primary-color);
  color: white;
  transform: rotate(10deg) scale(1.1);
}

.feature-card h3 {
  font-size: 1.4rem;
  color: #1a202c;
  margin-bottom: 15px;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5568;
}

@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-card:nth-child(even) {
    margin-top: 0;
  }

  .features-flow-path {
    display: none;
  }
}

.feature-icon {
  width: 70px;
  height: 70px;
  background: rgba(0, 105, 255, 0.05);
  color: #0069ff;
  border: 1px solid rgba(0, 105, 255, 0.1);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 30px;
  transition: all 0.5s;
}

.feature-card:hover .feature-icon {
  background: #0069ff;
  color: white;
  transform: rotateY(180deg);
}

.feature-card h3 {
  font-size: 1.6rem;
  margin-bottom: 18px;
  color: #100746;
}

.feature-card p {
  color: #6a6a8e;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* 4. Dashboard Elevation */
/* 5. Integration Ecosystem Enhancement */
/* 6. Sticky CTA refinement */
/* Floating Support Chat Bubble */
/* ----------------------------------------------------------------
   MODERN PROFESSIONAL FOOTER (MABL INSPIRED)
---------------------------------------------------------------- */
.modern-footer-pro {
  /* background: #ffffff; */
  padding: 100px 0 0;
  border-top: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: inherit;
}

.f-title {
  font-size: 0.85rem;
  font-weight: 700;
  /* color: #0f172a; */
  margin-bottom: 25px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 12px;
}

/* Scroll Reveal Initial States */
/* Feature Card Glowing Border Effect */
/* Dashboard Image Float/Tilt (Subtle Animation) */
/* Responsive Styles */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 3.5rem;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(16, 7, 70, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex !important;
    /* Force flex but hidden by offset */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    z-index: 2000;
    transition: all 0.6s cubic-bezier(0.85, 0, 0.15, 1);
    padding: 60px 40px;
    visibility: hidden;
    opacity: 0;
  }

  .nav-links.active {
    right: 0;
    visibility: visible;
    opacity: 1;
  }

  .mobile-menu-toggle.is-open {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 2101;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    display: block;
    width: 100%;
    padding: 10px;
  }

  .nav-item i {
    display: inline-block;
    font-size: 0.9rem;
    margin-left: 8px;
    transition: transform 0.3s ease;
  }

  .mega-menu,
  .standard-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 12px;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    display: none;
    overflow: hidden;
  }

  .has-mega.open .mega-menu,
  .has-dropdown.open .standard-dropdown {
    display: block !important;
  }

  .has-mega.open>.nav-item i,
  .has-dropdown.open>.nav-item i {
    transform: rotate(180deg);
  }

  .mega-menu {
    flex-direction: column;
  }

  .mega-left,
  .mega-right {
    padding: 18px;
    max-width: none;
    width: 100%;
    background: transparent;
    border: 0;
  }

  .mega-header {
    align-items: center;
    margin-bottom: 18px;
  }

  .mega-icon-bg {
    background: rgba(255, 255, 255, 0.12);
    color: #8cc6ff;
  }

  .mega-header h3,
  .promo-text h5,
  .mega-col h4 {
    color: white;
  }

  .mega-header p,
  .promo-text p,
  .mega-col a,
  .standard-dropdown a {
    color: rgba(255, 255, 255, 0.78);
  }

  .mega-link-grid {
    flex-direction: column;
    gap: 20px;
  }

  .mega-col a,
  .standard-dropdown a {
    padding: 8px 0;
    margin-bottom: 0;
    font-size: 0.95rem;
  }

  .standard-dropdown {
    padding: 14px 18px;
  }

  .standard-dropdown a:hover,
  .mega-col a:hover {
    background: transparent;
    color: white;
    padding-left: 0;
    transform: none;
  }

  .promo-btn {
    background: #0069ff;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-content {
    gap: 40px;
  }
}

/* Vibrant 3D Testimonial Theater */
.testimonials-3d-section {
  /* background: white; */
  padding: 10px 0 50px 0;
  overflow: hidden;
  color: #0f172a;
}

.testimonials-3d-header {
  flex: 1;
}

.live-icon {
  width: 80px;
  height: 80px;
  background: #f8fafc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #ff3366;
  margin-bottom: 30px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
}

.live-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -2px;
}

.live-subtitle {
  font-size: 1.25rem;
  opacity: 0.95;
  margin-bottom: 40px;
  max-width: 450px;
}

/* 3D Stack Logic */
.stack-card {
  position: absolute;
  width: 440px;
  background: #f1f5f9;
  /* Light gray background like the image */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  top: 50%;
  transform-style: preserve-3d;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.secondary-card {
  z-index: 2;
  left: 200px;
  transform: translateY(-45%) rotateY(-25deg) rotateX(10deg) translateZ(-100px);
  opacity: 0.7;
  filter: blur(1px);
}

.user-info .user-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-info .user-handle {
  font-size: 1rem;
  color: #94a3b8;
  font-weight: 500;
}

/* ----------------------------------------------------------------
   PREMIUM BLOGS SECTION REDESIGN
---------------------------------------------------------------- */
.featured-image {
  flex: 1.2;
  position: relative;
  overflow: hidden;
}

.featured-image img {
  width: auto;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.blog-featured-card:hover .featured-image img {
  transform: scale(1.05);
}

/* Refined Grid */
/* Explore Hub Button */
/* Utility Buttons */
/* ----------------------------------------------------------------
   INTEGRATIONS PRO SECTION STYLES
---------------------------------------------------------------- */
.integrations-pro-section {
  background: #ffffff;
  padding: 50px 0;
  overflow: hidden;
}

/* Grids for surround logos */
/* Main content grid (Side nodes + Center) */
.side-nodes {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 250px;
}

/* Center content */
.pro-desc {
  font-size: 1.3rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .integrations-main-grid {
    flex-direction: column;
  }

  .side-nodes {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: 20px;
  }
}

/* ----------------------------------------------------------------
   ENTERPRISE PROFESSIONAL CTA (MODERN LIGHT VERSION)
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   SCROLL REVEAL ANIMATIONS
---------------------------------------------------------------- */
.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-item.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* ----------------------------------------------------------------
   WEB AUTOMATION PAGE
---------------------------------------------------------------- */
/* Web Automation Page */
.web-automation-page .wa-hero {
  padding: 140px 0 60px;
  background: linear-gradient(135deg, #15095e 0%, #0f3ac4 60%, #0a1f6e 100%);
  position: relative;
  overflow: hidden;
  color: white;
}

.web-automation-page .wa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 60% 40%, white, transparent 75%);
}

.web-automation-page .wa-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.web-automation-page .wa-glow-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  left: -100px;
  background: #103ecd;
  opacity: 0.4;
}

.web-automation-page .wa-glow-2 {
  width: 600px;
  height: 400px;
  bottom: -150px;
  right: -100px;
  background: #00d2ff;
  opacity: 0.15;
}

.web-automation-page .wa-glow-3 {
  width: 300px;
  height: 300px;
  top: 40%;
  left: 55%;
  background: #f63e7b;
  opacity: 0.12;
}

.web-automation-page .wa-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.web-automation-page .wa-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.web-automation-page .wa-hero-badge i {
  animation: waPulseDot 2s infinite;
}

@keyframes waPulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.web-automation-page .wa-hero-title {
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 24px;
  text-shadow: 0 5px 30px rgba(0, 0, 0, 0.4);
}

.web-automation-page .wa-hero-title .gradient-word {
  background: linear-gradient(90deg, #00d2ff, #0069ff, #f63e7b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: waShimmer 4s linear infinite;
}

@keyframes waShimmer {
  to {
    background-position: 200% center;
  }
}

.web-automation-page .wa-hero-desc {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin-bottom: 40px;
}

.web-automation-page .wa-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.web-automation-page .btn-wa-primary,
.web-automation-page .btn-wa-ghost {
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.web-automation-page .btn-wa-primary {
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: white;
  border: none;
  box-shadow: 0 12px 30px rgba(0, 105, 255, 0.35);
}

.web-automation-page .btn-wa-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 105, 255, 0.5);
}

.web-automation-page .btn-wa-ghost {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

.web-automation-page .btn-wa-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  transform: translateY(-4px);
}

.web-automation-page .wa-hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.web-automation-page .wa-stat {
  text-align: center;
}

.web-automation-page .wa-stat-num {
  font-size: 2.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d2ff, #0069ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.web-automation-page .wa-stat-label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-top: 4px;
}

.web-automation-page .wa-hero-visual {
  position: relative;
}

.web-automation-page .browser-frame {
  background: #1a1040;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
}

.web-automation-page .browser-bar {
  background: #0f0a30;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.web-automation-page .browser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.web-automation-page .browser-dot.red {
  background: #ff5f57;
}

.web-automation-page .browser-dot.yellow {
  background: #febc2e;
}

.web-automation-page .browser-dot.green {
  background: #28c840;
}

.web-automation-page .browser-url {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 12px;
}

.web-automation-page .browser-body {
  padding: 24px;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.web-automation-page .test-runner {
  font-family: Consolas, Monaco, monospace;
  font-size: 0.82rem;
}

.web-automation-page .test-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  opacity: 0;
  transform: translateX(-10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.web-automation-page .test-line.visible {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}

.web-automation-page .test-line.pass .icon {
  color: #28c840;
}

.web-automation-page .test-line.fail .icon {
  color: #ff5f57;
}

.web-automation-page .test-line.running .icon {
  color: #febc2e;
  animation: waSpin 0.8s linear infinite;
}

.web-automation-page .test-line.skip .icon {
  color: #94a3b8;
}

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

.web-automation-page .test-label {
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
}

.web-automation-page .test-time {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.72rem;
}

.web-automation-page .test-summary {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 20px;
}

.web-automation-page .ts-item {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-automation-page .ts-item.p {
  color: #28c840;
}

.web-automation-page .ts-item.f {
  color: #ff5f57;
}

.web-automation-page .ts-item.s {
  color: #94a3b8;
}

.web-automation-page .progress-bar-wrap {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  height: 6px;
}

.web-automation-page .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0069ff, #00d2ff);
  border-radius: 6px;
  width: 0%;
  transition: width 1.5s ease;
}

.web-automation-page .ai-badge {
  position: absolute;
  top: -14px;
  right: -14px;
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: white;
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0, 105, 255, 0.4);
  z-index: 5;
  animation: waFloatBadge 3s ease-in-out infinite;
}

.web-automation-page .heal-badge {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: linear-gradient(135deg, #1a1040, #100746);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
  animation: waFloatBadge 3.5s ease-in-out infinite 0.5s;
}

@keyframes waFloatBadge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.web-automation-page .how-section {
  padding: 50px 0;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}

.web-automation-page .how-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0069ff, #00d2ff, transparent);
}

.web-automation-page .section-tag {
  color: #0069ff;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 14px;
}

.web-automation-page .section-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #100746;
  margin-bottom: 20px;
}

.web-automation-page .section-desc {
  font-size: 1.15rem;
  color: #6a6a8e;
  line-height: 1.6;
}

.web-automation-page .how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 60px;
  position: relative;
}

.web-automation-page .how-grid::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, #0069ff33, #0069ff, #00d2ff, #0069ff, #0069ff33);
  z-index: 0;
}

.web-automation-page .how-step {
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.web-automation-page .step-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: white;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  font-size: 2rem;
  color: #0069ff;
  position: relative;
  transition: all 0.5s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.web-automation-page .step-circle::before {
  content: attr(data-num);
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  background: #0069ff;
  color: white;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Consolas, Monaco, monospace;
}

.web-automation-page .how-step:hover .step-circle {
  background: #0069ff;
  color: white;
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 105, 255, 0.25);
  border-color: transparent;
}

.web-automation-page .step-title {
  font-size: 1.2rem;
  color: #100746;
  margin-bottom: 10px;
}

.web-automation-page .step-desc {
  font-size: 0.92rem;
  color: #718096;
  line-height: 1.6;
}

.web-automation-page .features-deep {
  padding: 50px 0;
  background: white;
}

.web-automation-page .features-deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.web-automation-page .features-deep-grid.reverse {
  direction: rtl;
}

.web-automation-page .features-deep-grid.reverse>* {
  direction: ltr;
}

.web-automation-page .feature-visual-box {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8f0fe;
}

.web-automation-page .feature-visual-inner {
  background: linear-gradient(135deg, #0f1a3d, #1a2d6b);
  padding: 36px;
  min-height: 340px;
  position: relative;
  overflow: hidden;
}

.web-automation-page .fv-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

.web-automation-page .feature-list {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.web-automation-page .feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
}

.web-automation-page .feature-list li:last-child {
  border-bottom: none;
}

.web-automation-page .feature-list .fi {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.1), rgba(0, 210, 255, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0069ff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.web-automation-page .feature-list h4 {
  font-size: 1.05rem;
  color: #100746;
  margin-bottom: 4px;
}

.web-automation-page .feature-list p {
  font-size: 0.9rem;
  color: #718096;
  line-height: 1.5;
}

.web-automation-page .code-window {
  background: #0d1117;
  border-radius: 12px;
  padding: 24px;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
}

.web-automation-page .code-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 60%, rgba(13, 17, 23, 0.8));
  pointer-events: none;
}

.web-automation-page .cw-header {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  align-items: center;
}

.web-automation-page .cw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.web-automation-page .cw-title {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  margin-left: 8px;
}

.web-automation-page .code-line {
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.5);
}

.web-automation-page .code-line .kw {
  color: #ff79c6;
}

.web-automation-page .code-line .fn {
  color: #50fa7b;
}

.web-automation-page .code-line .str {
  color: #f1fa8c;
}

.web-automation-page .code-line .cm {
  color: #6272a4;
}

.web-automation-page .code-line .hl {
  background: rgba(0, 105, 255, 0.2);
  border-left: 2px solid #0069ff;
  padding-left: 6px;
  display: block;
  color: rgba(255, 255, 255, 0.9);
}

.web-automation-page .typing-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #0069ff;
  animation: waBlink 0.7s step-end infinite;
  vertical-align: middle;
}

@keyframes waBlink {
  50% {
    opacity: 0;
  }
}

.web-automation-page .heal-vis {
  position: relative;
  z-index: 1;
}

.web-automation-page .dom-node {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.4s ease;
}

.web-automation-page .dom-node.broken {
  border-color: #ff5f57;
  background: rgba(255, 95, 87, 0.1);
  color: #ff5f57;
}

.web-automation-page .dom-node.healed {
  border-color: #28c840;
  background: rgba(40, 200, 64, 0.1);
  color: #28c840;
}

.web-automation-page .dom-node .dn-icon {
  font-size: 1rem;
}

.web-automation-page .heal-arrow {
  text-align: center;
  color: #febc2e;
  font-size: 1.4rem;
  margin: 6px 0;
  animation: waHealPulse 1.5s ease-in-out infinite;
}

@keyframes waHealPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.web-automation-page .heal-label {
  font-size: 0.72rem;
  font-family: Consolas, Monaco, monospace;
  color: #00d2ff;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 1px;
}

.web-automation-page .browsers-section {
  padding: 50px 0;
  background: #f8fafc;
}

.web-automation-page .browser-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.web-automation-page .browser-card {
  background: white;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  border: 1px solid #e8f0fe;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.web-automation-page .browser-card:hover {
  transform: translateY(-14px);
  box-shadow: 0 30px 60px rgba(0, 105, 255, 0.1);
  border-color: rgba(0, 105, 255, 0.2);
}

.web-automation-page .browser-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
}

.web-automation-page .browser-name {
  font-size: 1rem;
  color: #100746;
  margin-bottom: 4px;
}

.web-automation-page .browser-ver {
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
}

.web-automation-page .browser-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  background: rgba(0, 105, 255, 0.08);
  color: #0069ff;
  border-radius: 50px;
  font-size: 0.72rem;
}

.web-automation-page .metrics-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #15095e 0%, #103ecd 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.web-automation-page .metrics-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.web-automation-page .metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 60px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.web-automation-page .metric-card {
  padding: 50px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.web-automation-page .metric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.1), rgba(0, 210, 255, 0.05));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.web-automation-page .metric-card:hover::after {
  opacity: 1;
}

.web-automation-page .metric-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.web-automation-page .metric-num {
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d2ff, white);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 12px;
  font-family: Consolas, Monaco, monospace;
}

.web-automation-page .metric-label {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.web-automation-page .metric-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 6px;
}

.web-automation-page .counter {
  display: inline-block;
}

.web-automation-page .integrations-strip {
  padding: 70px 0;
  background: white;
}

.web-automation-page .int-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

.web-automation-page .int-logo {
  width: 60px;
  height: 60px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.web-automation-page .int-logo:hover {
  transform: translateY(-6px) scale(1.1);
  background: #0069ff;
  color: white;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(0, 105, 255, 0.25);
}

.web-automation-page .wa-cta {
  padding: 70px 0;
  background: #f8fafc;
}

.web-automation-page .wa-cta-box {
  background: linear-gradient(135deg, #100746, #0f3ac4);
  border-radius: 36px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: white;
}

.web-automation-page .wa-cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.web-automation-page .wa-cta-glow {
  position: absolute;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 105, 255, 0.4) 0%, transparent 70%);
  pointer-events: none;
}

.web-automation-page .wa-cta h2 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  letter-spacing: -1px;
}

.web-automation-page .wa-cta p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.web-automation-page .wa-cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.web-automation-page .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.web-automation-page .breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
}

.web-automation-page .breadcrumb a:hover {
  color: #00d2ff;
}

.web-automation-page .breadcrumb i {
  font-size: 0.6rem;
}

.web-automation-page .breadcrumb a,
.web-automation-page .breadcrumb span {
  white-space: nowrap;
}

.web-automation-page .pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.web-automation-page .pill-blue {
  background: rgba(0, 105, 255, 0.1);
  color: #0069ff;
}

@media (max-width: 1024px) {
  .web-automation-page .wa-hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .web-automation-page .wa-hero-stats {
    justify-content: center;
  }

  .web-automation-page .how-grid {
    grid-template-columns: 1fr 1fr;
  }

  .web-automation-page .how-grid::before {
    display: none;
  }

  .web-automation-page .features-deep-grid,
  .web-automation-page .features-deep-grid.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .web-automation-page .metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .web-automation-page .browser-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .web-automation-page .wa-hero {
    padding: 100px 0 70px;
  }

  .web-automation-page .wa-hero .container {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }

  .web-automation-page .wa-hero-title {
    font-size: 2.4rem;
  }

  .web-automation-page .wa-hero-desc {
    font-size: 1rem;
    margin-bottom: 26px;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  .web-automation-page .wa-hero-actions {
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .web-automation-page .wa-hero-actions a {
    width: 100%;
    justify-content: center;
  }

  .web-automation-page .wa-hero-stats {
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 24px;
  }

  .web-automation-page .wa-stat {
    min-width: 120px;
  }

  .web-automation-page .browser-body {
    min-height: 260px;
    padding: 18px;
  }

  .web-automation-page .ai-badge,
  .web-automation-page .heal-badge {
    position: static;
    display: inline-flex;
    margin: 14px 10px 0 0;
  }

  .web-automation-page .how-section,
  .web-automation-page .features-deep,
  .web-automation-page .metrics-section,
  .web-automation-page .wa-cta {
    padding: 72px 0;
  }

  .web-automation-page .how-grid {
    grid-template-columns: 1fr;
  }

  .web-automation-page .features-deep-grid,
  .web-automation-page .features-deep-grid.reverse {
    gap: 34px;
    margin-top: 40px;
  }

  .web-automation-page .feature-visual-inner {
    padding: 22px;
    min-height: 280px;
  }

  .web-automation-page .metric-card {
    padding: 34px 18px;
  }

  .web-automation-page .metric-num {
    font-size: 3rem;
  }

  .web-automation-page .browser-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .web-automation-page .browser-card {
    padding: 22px 14px;
  }

  .web-automation-page .section-title {
    font-size: 2.2rem;
  }

  .web-automation-page .section-desc {
    font-size: 1rem;
  }

  .web-automation-page .wa-cta h2 {
    font-size: 2.2rem;
  }

  .web-automation-page .wa-cta p {
    font-size: 1rem;
  }

  .web-automation-page .wa-cta-box {
    padding: 40px 24px;
  }
}

@media (max-width: 480px) {
  .web-automation-page .wa-hero {
    padding: 100px 0 60px;
  }

  .web-automation-page .wa-hero-title {
    font-size: 2rem;
  }

  .web-automation-page .wa-hero-badge {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    padding: 8px 14px;
  }

  .web-automation-page .wa-hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .web-automation-page .section-title {
    font-size: 1.85rem;
  }

  .web-automation-page .how-step {
    padding: 0 8px;
  }

  .web-automation-page .step-circle {
    width: 82px;
    height: 82px;
    font-size: 1.6rem;
    margin-bottom: 18px;
  }

  .web-automation-page .step-title {
    font-size: 1.05rem;
  }

  .web-automation-page .feature-list li {
    gap: 10px;
    padding: 12px 0;
  }

  .web-automation-page .feature-list .fi {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }

  .web-automation-page .browser-cards {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .web-automation-page .browser-icon {
    font-size: 2.3rem;
  }

  .web-automation-page .metrics-grid {
    grid-template-columns: 1fr;
  }

  .web-automation-page .wa-cta-actions {
    gap: 14px;
  }

  .web-automation-page .wa-cta-actions a {
    width: 100%;
    justify-content: center;
  }

  .web-automation-page .breadcrumb {
    font-size: 0.74rem;
    gap: 6px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .container {
    padding: 0 16px;
  }

  .top-bar {
    display: none;
  }

  .main-header {
    padding: 14px 0;
  }

  .main-header .container {
    gap: 12px;
  }

  .logo img {
    height: 38px;
  }

  .header-actions {
    gap: 10px;
    margin-left: auto;
  }

  .btn-book-demo {
    display: none !important;
  }

  .header-action-text {
    padding: 8px 12px;
    font-size: 0.72rem;
    letter-spacing: 1px;
  }

  .mobile-menu-toggle.is-open {
    top: 14px;
    right: 16px;
  }

  .nav-links {
    justify-content: flex-start;
    padding: 110px 24px 40px;
    overflow-y: auto;
  }

  .nav-links li {
    text-align: left;
  }

  .nav-item {
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    padding: 12px 0;
    text-transform: none;
  }

  .hero {
    padding: 124px 0 0;
  }

  .hero-content {
    margin-bottom: 32px;
  }

  .hero-tagline {
    font-size: 0.8rem;
    letter-spacing: 1.4px;
    margin-bottom: 14px;
  }

  .hero-title {
    font-size: 2.1rem;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.03em;
  }

  .hero-description {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 26px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .btn {
    width: 100%;
    padding: 15px 20px;
    font-size: 0.95rem;
  }

  .hero-image {
    margin-bottom: -72px;
  }

  .hero-slider {
    height: auto;
    min-height: 210px;
    border-radius: 14px;
  }

  .hero-slide {
    position: absolute;
  }

  .hero-slide img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .slider-dots {
    margin-top: 16px;
    gap: 8px;
  }

  .dot {
    width: 18px;
  }

  .dot.active {
    width: 30px;
  }

  .section-padding,
  .blogs-section,
  .integrations-pro-section,
  .enterprise-cta-section,
  .modern-footer-pro {
    padding-top: 56px;
    padding-bottom: 48px;
  }

  .platform-section {
    padding: 96px 0 44px;
  }

  .platform-main {
    gap: 28px;
    margin-bottom: 28px;
  }

  .platform-left {
    text-align: center;
  }

  .platform-title {
    font-size: 1.85rem;
  }

  .platform-title br {
    display: none;
  }

  .platform-graphic img {
    max-width: 240px;
  }

  .platform-item {
    padding: 24px 20px;
  }

  .grid-icon {
    font-size: 2.2rem;
    margin-bottom: 18px;
  }

  .platform-item h3 {
    font-size: 1.1rem;
  }

  .platform-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .roi-item,
  .roi-item.label {
    justify-content: center;
    text-align: center;
  }

  .roi-arrow {
    display: none;
  }

  .scroller-wrapper {
    padding: 12px 0;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .section-title {
    font-size: 1.95rem;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .section-desc {
    font-size: 1rem;
  }

  .tabs-container {
    gap: 24px;
    margin-top: 28px;
  }

  .tabs-sidebar {
    width: calc(100% + 32px);
    max-width: none;
    margin: 0 -16px;
    padding: 0 16px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
    top: 70px;
  }

  .tabs-sidebar::-webkit-scrollbar {
    display: none;
  }

  .tab-link {
    flex: 0 0 auto;
    padding: 11px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  }

  .tab-link span {
    display: inline;
    font-size: 0.88rem;
  }

  .tab-panel img {
    border-radius: 16px;
  }

  .features {
    padding: 52px 0;
  }

  .features-grid {
    gap: 18px;
    margin-top: 28px;
  }

  .tech-data-bus {
    display: none;
  }

  .feature-card {
    padding: 28px 20px;
  }

  .testimonials-3d-section {
    padding: 20px 0 40px;
  }

  .testimonials-3d-wrapper {
    gap: 32px;
  }

  .live-title {
    font-size: 2.15rem;
    letter-spacing: -0.04em;
  }

  .live-subtitle {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .card-stack-inner {
    height: auto;
  }

  .stack-card,
  .primary-card,
  .secondary-card,
  .next-card,
  .stack-card:hover {
    width: 100%;
    max-width: 100%;
    position: relative;
    left: auto !important;
    top: auto;
    transform: none !important;
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }

  .secondary-card,
  .next-card {
    display: none;
  }

  .card-body {
    padding: 26px 20px;
  }

  .card-body .quote {
    font-size: 1.05rem;
    margin-bottom: 24px;
  }

  .card-footer {
    align-items: flex-start;
  }

  .featured-image img {
    width: 100%;
    height: 240px;
  }

  .featured-badge {
    top: 16px;
    left: 16px;
    padding: 8px 14px;
    font-size: 0.72rem;
  }

  .featured-content {
    padding: 28px 20px;
  }

  .blog-meta {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
  }

  .featured-title {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .featured-content p {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .author-info {
    margin-bottom: 24px;
  }

  .card-image-wrapper {
    height: 200px;
  }

  .card-content {
    padding: 22px 20px 72px;
  }

  .card-content h3 {
    font-size: 1.2rem;
    margin-bottom: 18px;
  }

  .btn-premium-nav,
  .btn-integrations-outline,
  .btn-enterprise-solid,
  .btn-enterprise-outline {
    width: 100%;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  .logo-nodes-top,
  .logo-nodes-bottom {
    gap: 12px;
    margin-bottom: 26px;
  }

  .logo-nodes-bottom {
    margin-top: 26px;
  }

  .node {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
  }

  .integrations-main-grid {
    gap: 26px;
  }

  .side-nodes {
    gap: 14px;
  }

  .large-node {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 14px 18px;
    font-size: 1rem;
    white-space: normal;
    text-align: center;
  }

  .large-node span {
    font-size: 0.98rem;
  }

  .pro-tag {
    margin-bottom: 18px;
  }

  .pro-title {
    font-size: 1.95rem;
    margin-bottom: 16px;
    letter-spacing: -0.04em;
  }

  .pro-desc {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .enterprise-cta-box {
    border-radius: 24px;
    padding: 28px 18px;
  }

  .enterprise-heading {
    font-size: 2rem;
  }

  .enterprise-heading br {
    display: none;
  }

  .enterprise-desc {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .trust-grid {
    gap: 16px;
  }

  .trust-item {
    padding: 18px 16px;
    gap: 14px;
    text-align: left;
  }

  .trust-item:hover {
    transform: none;
  }

  .floating-chat-bubble {
    width: 54px;
    height: 54px;
    right: 18px;
    bottom: 18px;
    font-size: 1.35rem;
  }

  .modern-footer-pro {
    padding-bottom: 0;
  }

  .footer-inner {
    gap: 36px;
  }

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

  .brand-description {
    margin-bottom: 24px;
    font-size: 0.95rem;
  }

  .f-title {
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .f-list li {
    margin-bottom: 10px;
  }

  .f-list a {
    font-size: 0.98rem;
  }

  .footer-bottom-bar {
    padding: 28px 0;
  }

  .footer-social-circles {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Mobile only */
@media (max-width: 768px) {
  .platform-main {
    display: block;
  }
}

/* Mobile App Testing Page */
/* ═══════════════════════════════════════════
    
    ═══════════════════════════════════════════ */
/* Mobile App Testing Page */
.mobile-app-testing-page {
  --nav-bg: #100746;
  --primary: #1e6fd9;
  --text-gray: rgba(255, 255, 255, .75);

  /* page accent palette */
  --emerald: #1e6fd9;
  --emerald-dark: #0056cc;
  --orange: #00d2ff;
  --ink: #ffffff;
  --ink2: #f8fafc;
  --ink3: #eef4ff;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --border: rgba(15, 23, 42, .08);
  --text-main: #100746;
  --text-muted: #64748b;
  --font-display: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-app-testing-page *,
.mobile-app-testing-page *::before,
.mobile-app-testing-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.mobile-app-testing-page {
  scroll-behavior: smooth;
}

body.mobile-app-testing-page {
  font-family: var(--font-body);
  background: #ffffff;
  color: var(--text-main);
  overflow-x: hidden;
}

.mobile-app-testing-page a {
  text-decoration: none;
  color: inherit;
  transition: all .3s ease;
}

.mobile-app-testing-page ul {
  list-style: none;
}

.mobile-app-testing-page img {
  max-width: 100%;
  display: block;
}

.mobile-app-testing-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════════
       TOP BAR
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .top-bar {
  background: #1565c0;
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.mobile-app-testing-page .top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-app-testing-page .top-bar-left,
.mobile-app-testing-page .top-bar-right {
  display: flex;
  gap: 20px;
}

.mobile-app-testing-page .top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-gray);
}

.mobile-app-testing-page .top-bar-item:hover {
  color: #fff;
}

/* ═══════════════════════════════════════════
       HEADER / NAV  (identical to main site)
    ═══════════════════════════════════════════ */
.mobile-app-testing-page header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  box-shadow: none;
  transition: all .4s ease;
}

.mobile-app-testing-page .main-header {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mobile-app-testing-page .main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-app-testing-page .logo img {
  height: 46px;
}

.mobile-app-testing-page .nav-links {
  display: flex;
  gap: 28px;
}

.mobile-app-testing-page .nav-item {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  color: #fff;
}

.mobile-app-testing-page .nav-item i {
  font-size: .68rem;
}

.mobile-app-testing-page .nav-item:hover,
.mobile-app-testing-page .nav-item.active {
  color: var(--emerald);
}

.mobile-app-testing-page .has-mega,
.mobile-app-testing-page .has-dropdown {
  position: relative;
}

.mobile-app-testing-page .mega-menu,
.mobile-app-testing-page .standard-dropdown {
  position: absolute;
  top: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
  color: #333;
  z-index: 1000;
}

.mobile-app-testing-page .mega-menu {
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 730px;
  display: flex;
}

.mobile-app-testing-page .standard-dropdown {
  left: 0;
  width: 255px;
  padding: 14px 0;
  transform: translateY(20px);
}

.mobile-app-testing-page .has-mega:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mobile-app-testing-page .has-dropdown:hover .standard-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-app-testing-page .standard-dropdown a {
  display: block;
  padding: 11px 24px;
  font-size: .97rem;
  font-weight: 500;
  color: #444;
}

.mobile-app-testing-page .standard-dropdown a:hover {
  background: #f8faff;
  color: #0069ff;
  padding-left: 28px;
}

.mobile-app-testing-page .mega-left {
  flex: 1.5;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.mobile-app-testing-page .mega-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.mobile-app-testing-page .mega-icon-bg {
  width: 46px;
  height: 46px;
  background: #f0f7ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0069ff;
  font-size: 1.2rem;
}

.mobile-app-testing-page .mega-header h3 {
  font-size: 1.3rem;
  color: #100746;
  margin-bottom: 4px;
}

.mobile-app-testing-page .mega-header p {
  color: #666;
  font-size: .92rem;
}

.mobile-app-testing-page .mega-link-grid {
  display: flex;
  gap: 36px;
}

.mobile-app-testing-page .mega-col h4 {
  font-size: .76rem;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 13px;
  letter-spacing: 1px;
}

.mobile-app-testing-page .mega-col a {
  display: block;
  font-size: .93rem;
  color: #444;
  margin-bottom: 9px;
}

.mobile-app-testing-page .mega-col a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

.mobile-app-testing-page .mega-right {
  flex: 1;
  background: #f8faff;
  padding: 28px;
  border-left: 1px solid #eff2f6;
  max-width: 240px;
}

.mobile-app-testing-page .promo-text h5 {
  font-size: 1.05rem;
  color: #100746;
  margin-bottom: 7px;
}

.mobile-app-testing-page .promo-text p {
  font-size: .88rem;
  color: #666;
  margin-bottom: 14px;
  line-height: 1.5;
}

.mobile-app-testing-page .promo-btn {
  display: inline-block;
  padding: 7px 14px;
  background: #100746;
  color: #fff !important;
  border-radius: 4px;
  font-size: .83rem;
  font-weight: 600;
}

.mobile-app-testing-page .promo-btn:hover {
  background: #0069ff;
}

.mobile-app-testing-page .header-actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

.mobile-app-testing-page .btn-book-demo {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
  font-size: .93rem;
  box-shadow: 0 8px 20px rgba(0, 105, 255, .28);
  overflow: hidden;
  position: relative;
}

.mobile-app-testing-page .btn-book-demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .2), transparent);
  transition: .6s;
}

.mobile-app-testing-page .btn-book-demo:hover::before {
  left: 100%;
}

.mobile-app-testing-page .btn-book-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 105, 255, .45);
}

.mobile-app-testing-page .mobile-menu-toggle {
  font-weight: 700;
  font-size: .83rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  color: #fff;
  padding: 8px 15px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 50px;
  display: none;
}

.mobile-app-testing-page .mobile-menu-toggle:hover {
  background: #fff;
  color: var(--nav-bg);
}

@media(max-width:1024px) {
  .mobile-app-testing-page .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .mat-hero {
  min-height: 100vh;
  padding: 150px 0 60px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* animated mesh background */
.mobile-app-testing-page .mat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(0, 200, 150, .12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(255, 107, 53, .09) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(30, 111, 217, .18) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* dot grid */
.mobile-app-testing-page .mat-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

.mobile-app-testing-page .mat-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.mobile-app-testing-page .hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .38);
  margin-bottom: 18px;
}

.mobile-app-testing-page .hero-breadcrumb a {
  color: rgba(255, 255, 255, .38);
}

.mobile-app-testing-page .hero-breadcrumb a:hover {
  color: var(--emerald);
}

.mobile-app-testing-page .hero-breadcrumb i {
  font-size: .55rem;
}

.mobile-app-testing-page .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.mobile-app-testing-page .hero-chip-dot {
  width: 7px;
  height: 7px;
  background: var(--emerald);
  border-radius: 50%;
  animation: chipPulse 1.8s ease-in-out infinite;
}

@keyframes chipPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: .4;
  }
}

.mobile-app-testing-page .hero-title {
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
}

.mobile-app-testing-page .hero-title .accent-em {
  position: relative;
  display: inline-block;
  color: var(--emerald);
}

.mobile-app-testing-page .hero-title .accent-em::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--emerald), var(--orange));
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  animation: underlineGrow 1s var(--ease-out-expo) .8s forwards;
}

@keyframes underlineGrow {
  to {
    transform: scaleX(1);
  }
}

.mobile-app-testing-page .hero-title .orange-em {
  color: var(--orange);
}

.mobile-app-testing-page .hero-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 38px;
  max-width: 480px;
}

.mobile-app-testing-page .hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.mobile-app-testing-page .btn-hero-primary {
  padding: 15px 36px;
  background: var(--emerald);
  color: var(--ink);
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 32px rgba(0, 200, 150, .35);
  transition: all .3s var(--ease-out-expo);
  border: none;
  cursor: pointer;
}

.mobile-app-testing-page .btn-hero-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 200, 150, .5);
  background: #00dfa8;
}

.mobile-app-testing-page .btn-hero-ghost {
  padding: 15px 36px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .22);
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
}

.mobile-app-testing-page .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-4px);
}

.mobile-app-testing-page .hero-trust-row {
  display: flex;
  gap: 28px;
  align-items: center;
}

.mobile-app-testing-page .trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mobile-app-testing-page .trust-pill i {
  color: var(--emerald);
  font-size: .9rem;
}

/* ═══════════════ PHONE MOCKUP ═══════════════ */
.mobile-app-testing-page .hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 600px;
}

.mobile-app-testing-page .phone-wrap {
  position: relative;
  width: 280px;
  z-index: 3;
  animation: phoneLevitate 4s ease-in-out infinite;
}

@keyframes phoneLevitate {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-18px) rotate(1deg);
  }
}

.mobile-app-testing-page .phone-shell {
  width: 280px;
  height: 560px;
  background: linear-gradient(160deg, #2a3a5c, #1a2640);
  border-radius: 44px;
  border: 2px solid rgba(255, 255, 255, .12);
  box-shadow:
    0 50px 100px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  overflow: hidden;
  position: relative;
}

.mobile-app-testing-page .phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #0c1020;
  border-radius: 0 0 20px 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mobile-app-testing-page .notch-cam {
  width: 10px;
  height: 10px;
  background: #1e2d44;
  border-radius: 50%;
}

.mobile-app-testing-page .notch-speaker {
  width: 40px;
  height: 4px;
  background: #1e2d44;
  border-radius: 4px;
}

.mobile-app-testing-page .phone-screen {
  position: absolute;
  inset: 0;
  padding: 36px 18px 18px;
  overflow: hidden;
}

.mobile-app-testing-page .phone-screen-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0f1a2e, #0c1220);
}

/* animated status bar */
.mobile-app-testing-page .p-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .6rem;
  color: rgba(255, 255, 255, .5);
  font-family: var(--font-mono);
  padding: 0 6px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

.mobile-app-testing-page .p-sb-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* test result cards on phone */
.mobile-app-testing-page .p-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
  transition: all .4s;
}

.mobile-app-testing-page .p-card.pass {
  border-left: 3px solid var(--emerald);
}

.mobile-app-testing-page .p-card.fail {
  border-left: 3px solid #ff5f57;
}

.mobile-app-testing-page .p-card.running {
  border-left: 3px solid #febc2e;
}

.mobile-app-testing-page .p-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.mobile-app-testing-page .p-card-title {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.mobile-app-testing-page .p-card-badge {
  font-size: .6rem;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
}

.mobile-app-testing-page .badge-pass {
  background: rgba(0, 200, 150, .2);
  color: var(--emerald);
}

.mobile-app-testing-page .badge-fail {
  background: rgba(255, 95, 87, .2);
  color: #ff5f57;
}

.mobile-app-testing-page .badge-run {
  background: rgba(254, 188, 46, .2);
  color: #febc2e;
}

.mobile-app-testing-page .p-card-bar {
  height: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.mobile-app-testing-page .p-card-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.mobile-app-testing-page .p-card.pass .p-card-bar-fill {
  background: var(--emerald);
  width: 100%;
}

.mobile-app-testing-page .p-card.fail .p-card-bar-fill {
  background: #ff5f57;
  width: 40%;
}

.mobile-app-testing-page .p-card.running .p-card-bar-fill {
  background: #febc2e;
  width: 65%;
  animation: runBar 1.5s ease-in-out infinite alternate;
}

@keyframes runBar {
  from {
    width: 40%
  }

  to {
    width: 85%
  }
}

.mobile-app-testing-page .p-footer {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mobile-app-testing-page .p-tab {
  flex: 1;
  padding: 8px;
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  text-align: center;
  font-size: .58rem;
  color: rgba(255, 255, 255, .4);
  font-family: var(--font-mono);
  transition: all .3s;
}

.mobile-app-testing-page .p-tab.active {
  background: rgba(0, 200, 150, .18);
  color: var(--emerald);
}

/* floating side badges */
.mobile-app-testing-page .badge-float {
  position: absolute;
  background: var(--ink2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: .78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  z-index: 10;
}

.mobile-app-testing-page .badge-float.top-right {
  top: 50px;
  right: -60px;
  animation: floatA 3.5s ease-in-out infinite;
}

.mobile-app-testing-page .badge-float.bottom-left {
  bottom: 60px;
  left: -50px;
  animation: floatB 4s ease-in-out infinite .7s;
}

.mobile-app-testing-page .badge-float.mid-right {
  top: 55%;
  right: -70px;
  animation: floatA 3s ease-in-out infinite 1.2s;
}

@keyframes floatA {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatB {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

.mobile-app-testing-page .bfi {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}

.mobile-app-testing-page .bfi-g {
  background: rgba(0, 200, 150, .2);
  color: var(--emerald);
}

.mobile-app-testing-page .bfi-o {
  background: rgba(255, 107, 53, .2);
  color: var(--orange);
}

.mobile-app-testing-page .bfi-b {
  background: rgba(30, 111, 217, .2);
  color: #4da6ff;
}

/* ═══════════════════════════════════════════
       SECTION COMMONS
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .section-tag {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.mobile-app-testing-page .st-emerald {
  color: var(--emerald);
}

.mobile-app-testing-page .st-orange {
  color: var(--orange);
}

.mobile-app-testing-page .section-title {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 18px;
}

.mobile-app-testing-page .section-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.mobile-app-testing-page .text-center {
  text-align: center;
}

.mobile-app-testing-page .sp {
  padding: 50px 0;
}

.mobile-app-testing-page .sp-sm {
  padding: 70px 0;
}

/* ═══════════════════════════════════════════
       PLATFORM STRIP  (OS pills)
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .os-strip {
  padding: 40px 0;
  background: var(--ink2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mobile-app-testing-page .os-strip .container {
  display: flex;
  align-items: center;
  gap: 50px;
  justify-content: center;
  flex-wrap: wrap;
}

.mobile-app-testing-page .os-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text-muted);
  padding: 10px 22px;
  border-radius: 50px;
  border: 1px solid var(--border);
  transition: all .3s;
}

.mobile-app-testing-page .os-pill i {
  font-size: 1.2rem;
}

.mobile-app-testing-page .os-pill:hover {
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
  transform: translateY(-3px);
}

.mobile-app-testing-page .os-pill.active {
  background: rgba(0, 200, 150, .12);
  color: var(--emerald);
  border-color: rgba(0, 200, 150, .3);
}

/* ═══════════════════════════════════════════
       HOW IT WORKS  (timeline)
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .how-section {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.mobile-app-testing-page .how-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 200, 150, .07) 0%, transparent 70%);
  pointer-events: none;
}

.mobile-app-testing-page .timeline {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}

.mobile-app-testing-page .timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--emerald), rgba(0, 200, 150, .3), transparent);
  transform: translateX(-50%);
}

.mobile-app-testing-page .tl-item {
  padding: 40px 50px;
  position: relative;
}

.mobile-app-testing-page .tl-item:nth-child(odd) {
  text-align: right;
  padding-right: 70px;
}

.mobile-app-testing-page .tl-item:nth-child(even) {
  padding-left: 70px;
}

.mobile-app-testing-page .tl-dot {
  position: absolute;
  top: 48px;
  width: 14px;
  height: 14px;
  background: var(--emerald);
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 4px rgba(0, 200, 150, .3);
}

.mobile-app-testing-page .tl-item:nth-child(odd) .tl-dot {
  right: -7px;
}

.mobile-app-testing-page .tl-item:nth-child(even) .tl-dot {
  left: -7px;
}

.mobile-app-testing-page .tl-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--emerald);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.mobile-app-testing-page .tl-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.mobile-app-testing-page .tl-desc {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════
       FEATURES  (glassmorphic cards)
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .features-section {
  background: var(--ink2);
}

.mobile-app-testing-page .feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 60px;
  background: var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.mobile-app-testing-page .feat-card {
  background: var(--ink2);
  padding: 44px 36px;
  transition: all .4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.mobile-app-testing-page .feat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 200, 150, .05), rgba(255, 107, 53, .03));
  opacity: 0;
  transition: opacity .4s;
}

.mobile-app-testing-page .feat-card:hover::before {
  opacity: 1;
}

.mobile-app-testing-page .feat-card:hover {
  background: var(--surface);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  z-index: 2;
}

.mobile-app-testing-page .feat-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 24px;
  transition: all .4s;
}

.mobile-app-testing-page .fi-em {
  background: rgba(0, 200, 150, .12);
  color: var(--emerald);
}

.mobile-app-testing-page .fi-or {
  background: rgba(255, 107, 53, .12);
  color: var(--orange);
}

.mobile-app-testing-page .fi-bl {
  background: rgba(30, 111, 217, .12);
  color: #4da6ff;
}

.mobile-app-testing-page .feat-card:hover .feat-icon {
  transform: rotate(8deg) scale(1.1);
}

.mobile-app-testing-page .feat-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.mobile-app-testing-page .feat-card p {
  font-size: .93rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════
       DEVICE GRID
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .devices-section {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.mobile-app-testing-page .devices-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 53, .07) 0%, transparent 70%);
  pointer-events: none;
}

.mobile-app-testing-page .device-intro {
  max-width: 620px;
  margin: 0 auto 60px;
  text-align: center;
}

.mobile-app-testing-page .device-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mobile-app-testing-page .device-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 22px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all .35s var(--ease-out-expo);
  cursor: default;
}

.mobile-app-testing-page .device-chip:hover {
  background: var(--surface);
  border-color: var(--emerald);
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}

.mobile-app-testing-page .device-chip i {
  font-size: 1.3rem;
  color: var(--emerald);
}

.mobile-app-testing-page .device-chip .os-tag {
  font-size: .68rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 2px;
}

.mobile-app-testing-page .chip-inner {
  display: flex;
  flex-direction: column;
}

.mobile-app-testing-page .device-stat-row {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid var(--border);
}

.mobile-app-testing-page .d-stat {
  text-align: center;
}

.mobile-app-testing-page .d-stat-num {
  font-family: var(--font-display);
  font-size: 3rem;
  background: linear-gradient(135deg, var(--emerald), #00e0b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mobile-app-testing-page .d-stat-label {
  font-size: .84rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ═══════════════════════════════════════════
       LIVE LOG  (code terminal animation)
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .log-section {
  background: var(--ink2);
}

.mobile-app-testing-page .log-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.mobile-app-testing-page .log-terminal {
  background: #080f1a;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}

.mobile-app-testing-page .lt-bar {
  background: #0f1824;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.mobile-app-testing-page .lt-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.mobile-app-testing-page .lt-title {
  font-family: var(--font-mono);
  font-size: .73rem;
  color: rgba(255, 255, 255, .3);
  margin-left: 10px;
}

.mobile-app-testing-page .lt-body {
  padding: 22px 20px;
  font-family: var(--font-mono);
  font-size: .79rem;
  line-height: 1.8;
  min-height: 300px;
}

.mobile-app-testing-page .log-line {
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateX(-8px);
  transition: all .4s ease;
}

.mobile-app-testing-page .log-line.visible {
  opacity: 1;
  transform: translateX(0);
}

.mobile-app-testing-page .log-ts {
  color: rgba(255, 255, 255, .22);
  font-size: .7rem;
  flex-shrink: 0;
  padding-top: 1px;
}

.mobile-app-testing-page .log-msg {
  flex: 1;
}

.mobile-app-testing-page .log-msg.success {
  color: var(--emerald);
}

.mobile-app-testing-page .log-msg.warn {
  color: #febc2e;
}

.mobile-app-testing-page .log-msg.info {
  color: #4da6ff;
}

.mobile-app-testing-page .log-msg.error {
  color: #ff5f57;
}

.mobile-app-testing-page .log-msg.muted {
  color: rgba(255, 255, 255, .35);
}

.mobile-app-testing-page .blink-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--emerald);
  animation: blink .7s step-end infinite;
  vertical-align: middle;
  margin-left: 4px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.mobile-app-testing-page .log-right-content .section-title {
  font-size: 2.4rem;
}

.mobile-app-testing-page .log-right-content .section-desc {
  margin-bottom: 32px;
}

.mobile-app-testing-page .log-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-app-testing-page .ll-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.mobile-app-testing-page .ll-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.mobile-app-testing-page .ll-icon.em {
  background: rgba(0, 200, 150, .12);
  color: var(--emerald);
}

.mobile-app-testing-page .ll-icon.or {
  background: rgba(255, 107, 53, .12);
  color: var(--orange);
}

.mobile-app-testing-page .ll-icon.bl {
  background: rgba(30, 111, 217, .12);
  color: #4da6ff;
}

.mobile-app-testing-page .ll-text h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.mobile-app-testing-page .ll-text p {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════
       METRICS
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .metrics-section {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.mobile-app-testing-page .metrics-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0, 200, 150, .06) 0%, transparent 70%);
  pointer-events: none;
}

.mobile-app-testing-page .metrics-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  margin-top: 60px;
}

.mobile-app-testing-page .met-cell {
  padding: 50px 30px;
  text-align: center;
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: all .4s;
}

.mobile-app-testing-page .met-cell:last-child {
  border-right: none;
}

.mobile-app-testing-page .met-cell::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--emerald), var(--orange));
  transform: scaleX(0);
  transition: transform .5s var(--ease-out-expo);
}

.mobile-app-testing-page .met-cell:hover::after {
  transform: scaleX(1);
}

.mobile-app-testing-page .met-cell:hover {
  background: rgba(255, 255, 255, .02);
}

.mobile-app-testing-page .met-num {
  font-family: var(--font-display);
  font-size: 3.8rem;
  line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff 30%, rgba(255, 255, 255, .55));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mobile-app-testing-page .met-label {
  font-size: .92rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mobile-app-testing-page .met-sub {
  font-size: .78rem;
  color: rgba(255, 255, 255, .25);
  margin-top: 5px;
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════
       INTEGRATIONS STRIP
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .int-section {
  background: var(--ink2);
}

.mobile-app-testing-page .int-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 50px;
}

.mobile-app-testing-page .int-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink3);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 11px 22px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all .3s;
}

.mobile-app-testing-page .int-chip:hover {
  background: var(--surface);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.mobile-app-testing-page .int-chip i {
  font-size: 1.1rem;
}

/* ═══════════════════════════════════════════
       CTA
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .cta-section {
  background: var(--ink);
}

.mobile-app-testing-page .cta-box {
  border-radius: 32px;
  padding: 90px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1f18 0%, #091520 50%, #121024 100%);
  border: 1px solid rgba(0, 200, 150, .15);
}

.mobile-app-testing-page .cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 200, 150, .18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(255, 107, 53, .1) 0%, transparent 50%);
  pointer-events: none;
}

.mobile-app-testing-page .cta-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.mobile-app-testing-page .cta-box h2 {
  font-family: var(--font-display);
  font-size: 3.8rem;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.mobile-app-testing-page .cta-box p {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  line-height: 1.7;
}

.mobile-app-testing-page .cta-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════
       FOOTER  (identical to main site)
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .modern-footer-pro {
  background: #ffffff;
  padding: 100px 0 0;
  border-top: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: 'DM Sans', sans-serif;
}

.mobile-app-testing-page .footer-inner {
  display: flex;
  gap: 100px;
}

.mobile-app-testing-page .footer-brand-side {
  flex: 1.2;
}

.mobile-app-testing-page .footer-logo-main {
  height: 46px;
  margin-bottom: 32px;
  filter: brightness(0);
}

.mobile-app-testing-page .brand-description {
  font-size: .98rem;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 44px;
  max-width: 400px;
}

.mobile-app-testing-page .footer-navigation-side {
  flex: 2.8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.mobile-app-testing-page .f-title {
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 22px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 11px;
}

.mobile-app-testing-page .f-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f1f5f9;
}

.mobile-app-testing-page .f-list {
  list-style: none;
  padding: 0;
}

.mobile-app-testing-page .f-list li {
  margin-bottom: 12px;
}

.mobile-app-testing-page .f-list a {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  display: inline-block;
  transition: all .3s;
}

.mobile-app-testing-page .f-list a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

.mobile-app-testing-page .footer-bottom-bar {
  border-top: 1px solid #f1f5f9;
  padding: 36px 0;
}

.mobile-app-testing-page .bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-app-testing-page .bottom-links-group {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: .92rem;
  color: #94a3b8;
  font-weight: 500;
}

.mobile-app-testing-page .bottom-links-group a {
  color: inherit;
}

.mobile-app-testing-page .bottom-links-group a:hover {
  color: #0069ff;
}

.mobile-app-testing-page .footer-social-circles {
  display: flex;
  gap: 13px;
}

.mobile-app-testing-page .social-circle {
  width: 43px;
  height: 43px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.mobile-app-testing-page .social-circle:hover {
  transform: scale(1.15) translateY(-4px);
  background: #0069ff;
}

.mobile-app-testing-page .floating-chat-bubble {
  position: fixed;
  bottom: 36px;
  right: 36px;
  width: 62px;
  height: 62px;
  background: var(--emerald);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 14px 32px rgba(0, 200, 150, .4);
  z-index: 9999;
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
}

.mobile-app-testing-page .floating-chat-bubble:hover {
  transform: translateY(-8px) scale(1.1);
  background: #00dfa8;
}

/* ═══════════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════════ */
.mobile-app-testing-page .reveal,
.mobile-app-testing-page .reveal-up,
.mobile-app-testing-page .reveal-left,
.mobile-app-testing-page .reveal-right {
  opacity: 0;
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}

.mobile-app-testing-page .reveal {
  transform: translateY(40px);
}

.mobile-app-testing-page .reveal-up {
  transform: translateY(60px);
}

.mobile-app-testing-page .reveal-left {
  transform: translateX(-50px);
}

.mobile-app-testing-page .reveal-right {
  transform: translateX(50px);
}

.mobile-app-testing-page .reveal.active,
.mobile-app-testing-page .reveal-up.active,
.mobile-app-testing-page .reveal-left.active,
.mobile-app-testing-page .reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
@media(max-width:1100px) {
  .mobile-app-testing-page .mat-hero .container {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }



  .mobile-app-testing-page .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-app-testing-page .hero-trust-row {
    justify-content: center;
  }

  .mobile-app-testing-page .hero-actions {
    justify-content: center;
  }

  .mobile-app-testing-page .hero-visual {
    height: 520px;
  }

  .mobile-app-testing-page .badge-float.top-right {
    right: -20px;
    top: 20px;
  }

  .mobile-app-testing-page .badge-float.bottom-left {
    left: -10px;
  }

  .mobile-app-testing-page .badge-float.mid-right {
    right: -20px;
  }

  .mobile-app-testing-page .timeline {
    grid-template-columns: 1fr;
  }

  .mobile-app-testing-page .timeline::before {
    left: 24px;
  }

  .mobile-app-testing-page .tl-item {
    padding: 28px 28px 28px 60px;
    text-align: left;
  }

  .mobile-app-testing-page .tl-item:nth-child(odd) {
    padding: 28px 28px 28px 60px;
    text-align: left;
  }

  .mobile-app-testing-page .tl-item .tl-dot,
  .mobile-app-testing-page .tl-item:nth-child(odd) .tl-dot {
    left: 16px;
    right: auto;
  }

  .mobile-app-testing-page .feat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-app-testing-page .log-split {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .mobile-app-testing-page .metrics-band {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-app-testing-page .met-cell:nth-child(2) {
    border-right: none;
  }

  .mobile-app-testing-page .met-cell:nth-child(3) {
    border-top: 1px solid var(--border);
  }

  .mobile-app-testing-page .met-cell:nth-child(4) {
    border-right: none;
    border-top: 1px solid var(--border);
  }

  .mobile-app-testing-page .footer-inner {
    flex-direction: column;
    gap: 50px;
  }

  .mobile-app-testing-page .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr);
  }

  .mobile-app-testing-page .bottom-flex {
    flex-direction: column;
    gap: 24px;
  }

  .mobile-app-testing-page .bottom-links-group {
    flex-wrap: wrap;
    justify-content: center;
  }
}


@media(max-width:768px) {
  .mobile-app-testing-page .hero-title {
    font-size: 2.8rem;
  }

  .mobile-app-testing-page .mat-hero .container {
    gap: 120px;
  }



  .mobile-app-testing-page .tl-item:nth-child(even) .tl-dot {
    left: 17px !important;
  }

  .mobile-app-testing-page .section-title {
    font-size: 2.2rem;
  }

  .mobile-app-testing-page .feat-grid {
    grid-template-columns: 1fr;
  }

  .mobile-app-testing-page .metrics-band {
    grid-template-columns: 1fr;
  }

  .mobile-app-testing-page .met-cell {
    border-right: none;
    border-top: 1px solid var(--border);
  }

  .mobile-app-testing-page .met-cell:first-child {
    border-top: none;
  }

  .mobile-app-testing-page .device-stat-row {
    flex-direction: column;
    gap: 32px;
  }

  .mobile-app-testing-page .cta-box {
    padding: 50px 24px;
  }

  .mobile-app-testing-page .cta-box h2 {
    font-size: 2.4rem;
  }

  .mobile-app-testing-page .footer-navigation-side {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-app-testing-page .phone-wrap {
    width: 240px;
  }

  .mobile-app-testing-page .phone-shell {
    width: 240px;
    height: 480px;
  }

  .mobile-app-testing-page .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(16, 7, 70, .98);
    backdrop-filter: blur(20px);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    z-index: 2000;
    transition: all .6s cubic-bezier(.85, 0, .15, 1);
    padding: 70px 30px;
    visibility: hidden;
    opacity: 0;
  }

  .mobile-app-testing-page .nav-links.active {
    right: 0;
    visibility: visible;
    opacity: 1;
  }

  .mobile-app-testing-page .nav-item {
    font-size: 1.4rem;
    color: #fff;
    text-transform: uppercase;
    display: block;
  }

  .mobile-app-testing-page .mega-menu,
  .mobile-app-testing-page .standard-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: none;
  }

  .mobile-app-testing-page .has-mega.open .mega-menu,
  .mobile-app-testing-page .has-dropdown.open .standard-dropdown {
    display: block !important;
  }

  .mobile-app-testing-page .mega-menu {
    flex-direction: column;
  }

  .mobile-app-testing-page .mega-left,
  .mobile-app-testing-page .mega-right {
    padding: 16px;
    max-width: none;
    width: 100%;
    background: transparent;
    border: 0;
  }

  .mobile-app-testing-page .mega-header h3,
  .mobile-app-testing-page .promo-text h5,
  .mobile-app-testing-page .mega-col h4 {
    color: #fff;
  }

  .mobile-app-testing-page .mega-header p,
  .mobile-app-testing-page .promo-text p,
  .mobile-app-testing-page .mega-col a,
  .mobile-app-testing-page .standard-dropdown a {
    color: rgba(255, 255, 255, .72);
  }

  .mobile-app-testing-page .mega-link-grid {
    flex-direction: column;
    gap: 16px;
  }

  .mobile-app-testing-page .top-bar-left {
    display: none;
  }
}

@media(max-width:480px) {
  .mobile-app-testing-page .hero-title {
    font-size: 2.2rem;
  }

  .mobile-app-testing-page .hero-visual {
    height: 400px;
  }

  .mobile-app-testing-page .badge-float {
    display: none;
  }

  .mobile-app-testing-page .footer-navigation-side {
    grid-template-columns: 1fr;
  }
}

/* homepage-like light theme override */
.mobile-app-testing-page .mat-hero {
  background: linear-gradient(135deg, #15095E 0%, #103ECD 100%);
  color: #ffffff;
}

.mobile-app-testing-page .mat-hero::before {
  background:
    radial-gradient(circle at 20% 18%, rgba(0, 210, 255, .18), transparent 30%),
    radial-gradient(circle at 85% 78%, rgba(30, 111, 217, .22), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .04), transparent 58%);
}

.mobile-app-testing-page .mat-hero::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 82%);
}

.mobile-app-testing-page .hero-breadcrumb,
.mobile-app-testing-page .hero-breadcrumb a,
.mobile-app-testing-page .hero-desc,
.mobile-app-testing-page .trust-pill {
  color: rgba(255, 255, 255, .78);
}



.mobile-app-testing-page .hero-chip-dot {
  background-color: #00d2ff;
}

.mobile-app-testing-page .hero-title .accent-em,
.mobile-app-testing-page .trust-pill i,
.mobile-app-testing-page .nav-item:hover,
.mobile-app-testing-page .hero-breadcrumb a:hover {
  color: #00d2ff;
}

.mobile-app-testing-page .hero-title .accent-em::after {
  background: linear-gradient(90deg, #00d2ff, #ffffff);
}

.mobile-app-testing-page .btn-hero-primary {
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 105, 255, .28);
}

.mobile-app-testing-page .btn-hero-primary:hover {
  background: linear-gradient(135deg, #0056cc, #00c4ee);
  box-shadow: 0 20px 40px rgba(0, 105, 255, .35);
}

.mobile-app-testing-page .how-section,
.mobile-app-testing-page .devices-section,
.mobile-app-testing-page .metrics-section,
.mobile-app-testing-page .cta-section {
  background: #ffffff;
}

.mobile-app-testing-page .features-section,
.mobile-app-testing-page .log-section,
.mobile-app-testing-page .int-section,
.mobile-app-testing-page .os-strip {
  background: #f8fafc;
}

.mobile-app-testing-page .section-title,
.mobile-app-testing-page .feat-card h3,
.mobile-app-testing-page .tl-title,
.mobile-app-testing-page .ll-text h4,
.mobile-app-testing-page .log-right-content .section-title,
.mobile-app-testing-page .cta-box h2 {
  color: #100746;
}

.mobile-app-testing-page .section-desc,
.mobile-app-testing-page .tl-desc,
.mobile-app-testing-page .feat-card p,
.mobile-app-testing-page .device-chip,
.mobile-app-testing-page .device-chip .os-tag,
.mobile-app-testing-page .ll-text p,
.mobile-app-testing-page .cta-box p,
.mobile-app-testing-page .int-chip,
.mobile-app-testing-page .os-pill,
.mobile-app-testing-page .met-label,
.mobile-app-testing-page .met-sub,
.mobile-app-testing-page .d-stat-label {
  color: #64748b;
}

.mobile-app-testing-page .feat-grid {
  background: rgba(15, 23, 42, .08);
}

.mobile-app-testing-page .feat-card,
.mobile-app-testing-page .device-chip,
.mobile-app-testing-page .int-chip,
.mobile-app-testing-page .metrics-band {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .05);
}

.mobile-app-testing-page .feat-card:hover,
.mobile-app-testing-page .device-chip:hover,
.mobile-app-testing-page .int-chip:hover {
  background: #ffffff;
  color: #100746;
  border-color: rgba(0, 105, 255, .14);
  box-shadow: 0 20px 45px rgba(0, 105, 255, .08);
}

.mobile-app-testing-page .log-terminal {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.mobile-app-testing-page .lt-bar {
  background: #eef4ff;
  border-bottom-color: rgba(15, 23, 42, .08);
}

.mobile-app-testing-page .lt-title {
  color: #64748b;
}

.mobile-app-testing-page .lt-body {
  color: #334155;
}

.mobile-app-testing-page .log-ts {
  color: #94a3b8;
}

.mobile-app-testing-page .metrics-band {
  border: 1px solid rgba(15, 23, 42, .08);
}

.mobile-app-testing-page .met-cell:hover {
  background: #f8fafc;
}

.mobile-app-testing-page .met-num,
.mobile-app-testing-page .d-stat-num {
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mobile-app-testing-page .cta-box {
  background: linear-gradient(135deg, #100746, #0f3ac4) !important;
  border: 1px solid rgba(0, 105, 255, 0.15) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.1) !important;
  color: #ffffff !important;
  padding: 40px !important;
}

.mobile-app-testing-page .cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

.mobile-app-testing-page .cta-box::after {
  display: none !important;
}

.mobile-app-testing-page .cta-glow {
  position: absolute;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 105, 255, 0.4) 0%, transparent 70%);
  pointer-events: none;
}

.mobile-app-testing-page .cta-box h2 {
  color: #ffffff !important;
}

.mobile-app-testing-page .cta-box p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.mobile-app-testing-page .cta-box .btn-hero-ghost {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .22) !important;
}

.mobile-app-testing-page .cta-box .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .5) !important;
}

/* API Enterprise Page */
/* API / Enterprise Page */
.api-enterprise-page {
  --api-bg: #f6f9ff;
  --api-surface: #ffffff;
  --api-surface-alt: #eef5ff;
  --api-border: rgba(16, 7, 70, 0.08);
  --api-border-strong: rgba(16, 7, 70, 0.16);
  --api-text: #100746;
  --api-text-soft: #51627d;
  --api-text-muted: #72829c;
  --api-primary: #1e6fd9;
  --api-primary-2: #00d2ff;
  --api-primary-3: #103ecd;
  --api-primary-soft: rgba(30, 111, 217, 0.12);
  --api-green: #00d2ff;
  --api-red: #103ecd;
  --api-shadow: 0 28px 72px rgba(18, 38, 87, 0.12);
  --api-shadow-soft: 0 18px 44px rgba(18, 38, 87, 0.08);
  --api-radius: 24px;
  --api-mono: 'IBM Plex Mono', monospace;
  /* Compatibility aliases for old inline styles still present in the HTML */
  --amber: #00d2ff;
  --amber2: #3ab8ff;
  --green: #00d2ff;
  --blue: #1e6fd9;
  --purple: #103ecd;
  --red: #1e6fd9;
  --muted: #72829c;
  --slate: #51627d;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-display: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --ink: #100746;
  --ink2: #1d3254;
  --ink3: #405777;
  --bg2: #ffffff;
  --bg3: #eef5ff;
  --border: rgba(16, 7, 70, 0.08);
  --border2: rgba(16, 7, 70, 0.16);
}

body.api-enterprise-page {
  font-family: 'Roboto', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.3), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(30, 111, 217, 0.34), transparent 30%),
    linear-gradient(180deg, #dcebff 0%, #edf6ff 34%, #ffffff 100%);
  color: var(--api-text);
}

.api-enterprise-page main {
  overflow: hidden;
}

.api-enterprise-page .api-hero {
  position: relative;
  padding: 156px 0 96px;
  background:
    linear-gradient(135deg, #15095e 0%, #103ecd 58%, #0f3ac4 100%);
  overflow: hidden;
}

.api-enterprise-page .api-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 60% 40%, white, transparent 75%);
  pointer-events: none;
}

.api-enterprise-page .api-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(16, 62, 205, 0.42), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(0, 210, 255, 0.18), transparent 26%),
    radial-gradient(circle at 62% 42%, rgba(246, 62, 123, 0.12), transparent 20%);
  pointer-events: none;
}

.api-enterprise-page .api-hero .container,
.api-enterprise-page .trust-split,
.api-enterprise-page .log-split {
  position: relative;
  z-index: 1;
}

.api-enterprise-page .api-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}

.api-enterprise-page .hero-bc,
.api-enterprise-page .hero-bc a {
  color: rgba(255, 255, 255, 0.5);
}

.api-enterprise-page .hero-bc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  margin-bottom: 18px;
}

.api-enterprise-page .hero-bc a:hover,
.api-enterprise-page .nav-item:hover,
.api-enterprise-page .nav-item.active,
.api-enterprise-page .sec-tag,
.api-enterprise-page .pill-dot,
.api-enterprise-page .ht-item i,
.api-enterprise-page .hero-title .amber {
  color: #00d2ff;
}

.api-enterprise-page .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.api-enterprise-page .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d2ff;
  box-shadow: 0 0 0 8px rgba(0, 210, 255, 0.12);
}

.api-enterprise-page .hero-title,
.api-enterprise-page .sec-title,
.api-enterprise-page .cta-box h2,
.api-enterprise-page .plan-price,
.api-enterprise-page .roi-num,
.api-enterprise-page .tb-card h4,
.api-enterprise-page .feat-card h3,
.api-enterprise-page .ep-content-header h3 {
  font-family: 'Roboto', sans-serif;
  color: var(--api-text);
}

.api-enterprise-page .hero-title {
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
  color: #ffffff;
}

.api-enterprise-page .hero-title .dim,
.api-enterprise-page .ht-item,
.api-enterprise-page .sec-desc,
.api-enterprise-page .plan-desc,
.api-enterprise-page .tb-card p,
.api-enterprise-page .feat-card p,
.api-enterprise-page .roi-label,
.api-enterprise-page .roi-sub,
.api-enterprise-page .int-chip,
.api-enterprise-page .cap-item,
.api-enterprise-page .ep-path,
.api-enterprise-page .brand-description {
  color: var(--api-text-soft);
}

.api-enterprise-page .hero-title .dim {
  color: rgba(255, 255, 255, 0.46);
}

.api-enterprise-page .hero-desc {
  max-width: 560px;
  margin-bottom: 36px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

.api-enterprise-page .hero-btns,
.api-enterprise-page .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.api-enterprise-page .btn-amber,
.api-enterprise-page .btn-ghost-light,
.api-enterprise-page .btn-plan,
.api-enterprise-page .ep-run-btn {
  border-radius: 999px;
  font-weight: 700;
  min-height: 58px;
  padding: 16px 30px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.api-enterprise-page .btn-amber,
.api-enterprise-page .btn-plan-amber,
.api-enterprise-page .ep-run-btn {
  background: linear-gradient(135deg, var(--api-primary), var(--api-primary-2));
  color: #fff;
  box-shadow: 0 14px 34px rgba(30, 111, 217, 0.26);
}

.api-enterprise-page .btn-amber:hover,
.api-enterprise-page .btn-plan-amber:hover,
.api-enterprise-page .ep-run-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(30, 111, 217, 0.32);
}

.api-enterprise-page .btn-ghost-light,
.api-enterprise-page .btn-plan-outline {
  background: #fff;
  color: var(--api-text);
  border: 1px solid var(--api-border-strong);
}

.api-enterprise-page .btn-book-demo {
  min-height: 56px;
  padding: 14px 32px;
  font-size: 1rem;
}

.api-enterprise-page .api-hero .btn-ghost-light {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
}

.api-enterprise-page .api-hero .btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}

.api-enterprise-page .btn-ghost-light:hover,
.api-enterprise-page .btn-plan-outline:hover {
  background: var(--api-surface-alt);
  border-color: rgba(30, 111, 217, 0.22);
}

.api-enterprise-page .hero-trust {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.api-enterprise-page .ht-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--api-mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}

.api-enterprise-page .api-panel {
  position: relative;
}

.api-enterprise-page .panel-window,
.api-enterprise-page .latency-vis,
.api-enterprise-page .explorer-wrap,
.api-enterprise-page .cta-box,
.api-enterprise-page .roi-strip,
.api-enterprise-page .plan-card,
.api-enterprise-page .feat-card,
.api-enterprise-page .tb-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--api-border);
  box-shadow: var(--api-shadow);
}

.api-enterprise-page .panel-window,
.api-enterprise-page .latency-vis,
.api-enterprise-page .explorer-wrap,
.api-enterprise-page .cta-box,
.api-enterprise-page .roi-strip {
  border-radius: var(--api-radius);
}

.api-enterprise-page .pw-bar,
.api-enterprise-page .pw-tabs,
.api-enterprise-page .ep-content-header,
.api-enterprise-page .lt-bar {
  background: #f7faff;
  border-bottom: 1px solid var(--api-border);
}

.api-enterprise-page .pw-title,
.api-enterprise-page .resp-time,
.api-enterprise-page .lv-title,
.api-enterprise-page .lv-footer,
.api-enterprise-page .lv-stat-label,
.api-enterprise-page .ep-group-label,
.api-enterprise-page .ep-pane-label,
.api-enterprise-page .req-url,
.api-enterprise-page .pw-tab,
.api-enterprise-page .met-sub,
.api-enterprise-page .pw-badge,
.api-enterprise-page .status-200,
.api-enterprise-page .pb-g,
.api-enterprise-page .sc-200,
.api-enterprise-page .lv-live {
  background: rgba(0, 210, 255, 0.12);
  color: var(--api-primary);
}

.api-enterprise-page .pw-tab.active,
.api-enterprise-page .panel-badge .pb-a,
.api-enterprise-page .panel-badge .pb-g,
.api-enterprise-page .pb-b,
.api-enterprise-page .st-amber,
.api-enterprise-page .st-blue,
.api-enterprise-page .st-purple,
.api-enterprise-page .lv-stat-num,
.api-enterprise-page .roi-num,
.api-enterprise-page .met-num,
.api-enterprise-page .d-stat-num {
  color: var(--api-primary);
}

.api-enterprise-page .pw-tab.active {
  border-bottom: 2px solid var(--api-primary);
}

.api-enterprise-page .pw-body,
.api-enterprise-page .ep-panels,
.api-enterprise-page .plans-grid,
.api-enterprise-page .trust-badges,
.api-enterprise-page .feat-grid,
.api-enterprise-page .int-logos {
  display: grid;
}

.api-enterprise-page .pw-body {
  padding: 22px;
}

.api-enterprise-page .json-block,
.api-enterprise-page .code-box {
  background: #f7faff;
  border: 1px solid rgba(30, 111, 217, 0.1);
  border-radius: 18px;
  color: #234066;
  font-family: var(--api-mono);
}

.api-enterprise-page .json-block {
  padding: 16px;
  line-height: 1.72;
}

.api-enterprise-page .code-box {
  padding: 18px;
  min-height: 220px;
  line-height: 1.7;
}

.api-enterprise-page .jk,
.api-enterprise-page .jnum,
.api-enterprise-page .jv {
  color: #1e6fd9;
}

.api-enterprise-page .jstr,
.api-enterprise-page .js,
.api-enterprise-page .jbool {
  color: #0f9ec2;
}

.api-enterprise-page .jcm,
.api-enterprise-page .ep-seg,
.api-enterprise-page .ep-path .param {
  color: #8ca0be;
}

.api-enterprise-page .method-post,
.api-enterprise-page .em-post {
  background: rgba(30, 111, 217, 0.12);
  color: var(--api-primary);
}

.api-enterprise-page .method-get,
.api-enterprise-page .em-get {
  background: rgba(0, 210, 255, 0.12);
  color: #0aa8df;
}

.api-enterprise-page .method-put,
.api-enterprise-page .em-put {
  background: rgba(30, 111, 217, 0.12);
  color: var(--api-primary);
}

.api-enterprise-page .method-del,
.api-enterprise-page .em-del,
.api-enterprise-page .sc-422 {
  background: rgba(16, 62, 205, 0.12);
  color: var(--api-red);
}

.api-enterprise-page .sc-401 {
  background: rgba(30, 111, 217, 0.12);
  color: var(--api-primary);
}

.api-enterprise-page .mini-chart,
.api-enterprise-page .lv-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.api-enterprise-page .mini-chart {
  height: 56px;
}

.api-enterprise-page .bar-mc,
.api-enterprise-page .lv-bar {
  flex: 1;
  border-radius: 999px 999px 0 0;
  background: rgba(30, 111, 217, 0.22);
}

.api-enterprise-page .bar-mc.hi,
.api-enterprise-page .lv-bar.hl,
.api-enterprise-page .lv-bar:hover {
  background: linear-gradient(180deg, var(--api-primary-2), var(--api-primary));
}

.api-enterprise-page .lv-bar.spike {
  background: rgba(16, 62, 205, 0.42);
}

.api-enterprise-page .panel-badge {
  position: absolute;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--api-border);
  box-shadow: var(--api-shadow-soft);
  z-index: 2;
}

.api-enterprise-page .panel-badge.tl {
  top: -18px;
  left: -18px;
}

.api-enterprise-page .panel-badge.br {
  right: -22px;
  bottom: 28px;
}

.api-enterprise-page .panel-badge div {
  color: var(--api-text) !important;
}

.api-enterprise-page .pb-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.api-enterprise-page .pb-a,
.api-enterprise-page .pb-b {
  background: rgba(30, 111, 217, 0.12);
}

.api-enterprise-page .cap-strip,
.api-enterprise-page .plans-section,
.api-enterprise-page .int-section {
  background:
    radial-gradient(circle at top center, rgba(30, 111, 217, 0.14), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(0, 210, 255, 0.1), transparent 24%),
    #ffffff;
}

.api-enterprise-page .cap-strip {
  padding: 26px 0;
  border-top: 1px solid var(--api-border);
  border-bottom: 1px solid var(--api-border);
}

.api-enterprise-page .cap-strip .container {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.api-enterprise-page .cap-item,
.api-enterprise-page .int-chip,
.api-enterprise-page .os-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--api-surface-alt);
  border: 1px solid rgba(30, 111, 217, 0.08);
}

.api-enterprise-page .explorer-section,
.api-enterprise-page .trust-section,
.api-enterprise-page .roi-section,
.api-enterprise-page .cta-section {
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 210, 255, 0.18), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(30, 111, 217, 0.16), transparent 26%),
    linear-gradient(180deg, #eaf4ff 0%, #ffffff 100%);
}

.api-enterprise-page .feat-section {
  background:
    radial-gradient(circle at 85% 10%, rgba(30, 111, 217, 0.18), transparent 28%),
    radial-gradient(circle at 10% 18%, rgba(0, 210, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #dfefff 0%, #f4f9ff 100%);
}

.api-enterprise-page .sp {
  padding: 50px 0;
}

.api-enterprise-page .sp-sm {
  padding: 50px 0;
}

.api-enterprise-page .sec-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--api-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.api-enterprise-page .st-amber,
.api-enterprise-page .st-blue,
.api-enterprise-page .st-purple {
  color: var(--api-primary);
}

.api-enterprise-page .sec-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 16px;
}

.api-enterprise-page .sec-desc {
  font-size: 1rem;
  line-height: 1.72;
}

.api-enterprise-page .explorer-wrap {
  margin-top: 58px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.api-enterprise-page .ep-sidebar {
  background: #f7faff;
  border-right: 1px solid var(--api-border);
  padding: 18px 0;
}

.api-enterprise-page .ep-group-label {
  padding: 14px 24px 10px;
  font-family: var(--api-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.api-enterprise-page .ep-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.api-enterprise-page .ep-row:hover,
.api-enterprise-page .ep-row.active {
  background: rgba(30, 111, 217, 0.08);
  border-left-color: var(--api-primary);
}

.api-enterprise-page .ep-content-header {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.api-enterprise-page .ep-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 24px;
}

.api-enterprise-page .ep-pane-label,
.api-enterprise-page .plan-name,
.api-enterprise-page .f-title,
.api-enterprise-page .lv-title,
.api-enterprise-page .lv-stat-label {
  font-family: var(--api-mono);
}

.api-enterprise-page .feat-grid,
.api-enterprise-page .trust-badges,
.api-enterprise-page .plans-grid {
  margin-top: 56px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.api-enterprise-page .feat-card,
.api-enterprise-page .plan-card,
.api-enterprise-page .tb-card {
  padding: 28px;
  border-radius: 24px;
}

.api-enterprise-page .feat-card:hover,
.api-enterprise-page .tb-card:hover,
.api-enterprise-page .plan-card:hover,
.api-enterprise-page .int-chip:hover,
.api-enterprise-page .cap-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 56px rgba(18, 38, 87, 0.12);
}

.api-enterprise-page .feat-ic,
.api-enterprise-page .tb-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.api-enterprise-page .fi-a,
.api-enterprise-page .tb-icon,
.api-enterprise-page .fi-b,
.api-enterprise-page .fi-g,
.api-enterprise-page .fi-p,
.api-enterprise-page .fi-r,
.api-enterprise-page .fi-s {
  background: rgba(30, 111, 217, 0.1);
  color: var(--api-primary);
}

.api-enterprise-page .trust-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 42px;
  align-items: start;
}

.api-enterprise-page .latency-vis {
  padding: 28px;
}

.api-enterprise-page .lv-header,
.api-enterprise-page .resp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.api-enterprise-page .lv-bars {
  height: 220px;
}

.api-enterprise-page .lv-stats,
.api-enterprise-page .roi-strip {
  margin-top: 18px;
  display: grid;
  gap: 1px;
  background: var(--api-border);
}

.api-enterprise-page .lv-stats {
  grid-template-columns: repeat(3, 1fr);
  border-radius: 18px;
  overflow: hidden;
}

.api-enterprise-page .lv-stat,
.api-enterprise-page .roi-cell {
  background: rgba(255, 255, 255, 0.98);
  padding: 18px;
}

.api-enterprise-page .tb-card,
.api-enterprise-page .int-chip,
.api-enterprise-page .cap-item,
.api-enterprise-page .plan-card,
.api-enterprise-page .feat-card,
.api-enterprise-page .ep-row {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.api-enterprise-page .plan-card.featured {
  background: linear-gradient(180deg, #103ecd 0%, #100746 100%);
  color: #fff;
  box-shadow: 0 28px 72px rgba(16, 7, 70, 0.24);
}

.api-enterprise-page .plan-card.featured .plan-name,
.api-enterprise-page .plan-card.featured .plan-price,
.api-enterprise-page .plan-card.featured .plan-desc,
.api-enterprise-page .plan-card.featured .pf-item,
.api-enterprise-page .plan-card.featured .pf-item.off {
  color: #fff;
}

.api-enterprise-page .plan-featured-badge {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 210, 255, 0.16);
  font-family: var(--api-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.api-enterprise-page .plan-features,
.api-enterprise-page .f-list {
  display: grid;
  gap: 12px;
}

.api-enterprise-page .pf-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--api-text-soft);
}

.api-enterprise-page .pf-item.off {
  color: #9aa8bf;
}

.api-enterprise-page .plan-divider {
  height: 1px;
  margin: 22px 0;
  background: var(--api-border);
}

.api-enterprise-page .plan-card.featured .plan-divider {
  background: rgba(255, 255, 255, 0.16);
}

.api-enterprise-page .plan-price {
  font-size: clamp(3.4rem, 5vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.api-enterprise-page .plan-price span {
  font-size: 1.1rem;
}

.api-enterprise-page .roi-strip {
  grid-template-columns: repeat(4, 1fr);
  border-radius: 24px;
  overflow: hidden;
}

.api-enterprise-page .roi-num {
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1;
  margin-bottom: 10px;
}

.api-enterprise-page .int-logos {
  margin-top: 44px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.api-enterprise-page .int-chip {
  justify-content: center;
}

.api-enterprise-page .cta-box {
  padding: 56px;
  text-align: center;
  background:
    radial-gradient(circle at top center, rgba(30, 111, 217, 0.16), transparent 34%),
    linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
}

.api-enterprise-page .cta-box p {
  max-width: 700px;
  margin: 0 auto 30px;
  color: var(--api-text-soft);
}

.api-enterprise-page .cta-actions {
  justify-content: center;
}

@media (max-width: 1180px) {

  .api-enterprise-page .api-hero .container,
  .api-enterprise-page .trust-split,
  .api-enterprise-page .explorer-wrap {
    grid-template-columns: 1fr;
  }

  .api-enterprise-page .panel-badge.tl {
    left: 0;
  }

  .api-enterprise-page .panel-badge.br {
    right: 0;
    bottom: -20px;
  }

  .api-enterprise-page .feat-grid,
  .api-enterprise-page .plans-grid,
  .api-enterprise-page .int-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .api-enterprise-page .roi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .api-enterprise-page .sp {
    padding: 84px 0;
  }

  .api-enterprise-page .sp-sm {
    padding: 60px 0;
  }

  .api-enterprise-page .ep-panels,
  .api-enterprise-page .feat-grid,
  .api-enterprise-page .plans-grid,
  .api-enterprise-page .int-logos,
  .api-enterprise-page .roi-strip,
  .api-enterprise-page .lv-stats,
  .api-enterprise-page .trust-badges {
    grid-template-columns: 1fr;
  }

  .api-enterprise-page .cta-box {
    padding: 40px 24px;
  }
}

@media (max-width: 640px) {
  .api-enterprise-page .api-hero {
    padding: 134px 0 72px;
  }

  .api-enterprise-page .hero-btns,
  .api-enterprise-page .cta-actions {
    flex-direction: column;
  }

  .api-enterprise-page .btn-amber,
  .api-enterprise-page .btn-ghost-light,
  .api-enterprise-page .btn-plan,
  .api-enterprise-page .ep-run-btn {
    width: 100%;
    justify-content: center;
  }

  .api-enterprise-page .panel-badge {
    position: static;
    margin-bottom: 14px;
  }

  .api-enterprise-page .pw-body,
  .api-enterprise-page .ep-content-header,
  .api-enterprise-page .ep-panels,
  .api-enterprise-page .latency-vis,
  .api-enterprise-page .feat-card,
  .api-enterprise-page .plan-card,
  .api-enterprise-page .tb-card {
    padding: 20px;
  }

  .api-enterprise-page .cap-strip .container {
    justify-content: flex-start;
  }
}

/* API Enterprise Page - redesign pass to match the web automation direction */
body.api-enterprise-page {
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.18), transparent 24%),
    linear-gradient(180deg, #f2f8ff 0%, #ffffff 30%, #f7fbff 100%);
}

.api-enterprise-page .api-hero {
  padding: 158px 0 60px;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 210, 255, 0.18), transparent 20%),
    radial-gradient(circle at 88% 22%, rgba(26, 115, 232, 0.28), transparent 24%),
    linear-gradient(135deg, #160a5d 0%, #173eb8 52%, #0b6df3 100%);
}

.api-enterprise-page .api-hero::before {
  mask-image: none;
  opacity: 0.85;
}

.api-enterprise-page .api-hero::after {
  background:
    radial-gradient(circle at 14% 16%, rgba(0, 210, 255, 0.22), transparent 20%),
    radial-gradient(circle at 82% 76%, rgba(0, 210, 255, 0.18), transparent 24%),
    radial-gradient(circle at 55% 35%, rgba(255, 255, 255, 0.08), transparent 22%);
}



.api-enterprise-page .hero-title {
  max-width: 620px;
  text-shadow: 0 20px 50px rgba(8, 18, 65, 0.28);
}

.api-enterprise-page .hero-title .amber {
  background: linear-gradient(135deg, #74b8ff 0%, #23d6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.api-enterprise-page .hero-title .dim {
  color: rgba(255, 255, 255, 0.62);
}

.api-enterprise-page .hero-desc {
  max-width: 540px;
  color: rgba(255, 255, 255, 0.8);
}

.api-enterprise-page .btn-amber,
.api-enterprise-page .btn-plan-amber,
.api-enterprise-page .ep-run-btn {
  background: linear-gradient(135deg, #1a73e8 0%, #1cc8ff 100%);
}

.api-enterprise-page .api-panel {
  padding-top: 18px;
}

.api-enterprise-page .panel-window {
  background: rgba(20, 13, 66, 0.9);
  border: 1px solid rgba(112, 177, 255, 0.24);
  box-shadow:
    0 34px 90px rgba(6, 13, 50, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.api-enterprise-page .pw-bar,
.api-enterprise-page .pw-tabs {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.api-enterprise-page .pw-title,
.api-enterprise-page .resp-time,
.api-enterprise-page .req-url,
.api-enterprise-page .pw-tab,
.api-enterprise-page .pw-badge {
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
}

.api-enterprise-page .pw-tab.active {
  color: #24d5ff;
  border-bottom-color: #24d5ff;
}

.api-enterprise-page .pw-badge {
  padding: 0;
}

.api-enterprise-page .pw-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.api-enterprise-page .json-block,
.api-enterprise-page .code-box {
  background: rgba(6, 16, 42, 0.68);
  border: 1px solid rgba(89, 154, 255, 0.16);
  color: #d9ebff;
}

.api-enterprise-page .jcm,
.api-enterprise-page .ep-seg,
.api-enterprise-page .ep-path .param {
  color: rgba(185, 207, 241, 0.62);
}

.api-enterprise-page .jk,
.api-enterprise-page .jnum,
.api-enterprise-page .jv {
  color: #6cb5ff;
}

.api-enterprise-page .jstr,
.api-enterprise-page .js,
.api-enterprise-page .jbool {
  color: #28d4ff;
}

.api-enterprise-page .status-200,
.api-enterprise-page .sc-200,
.api-enterprise-page .lv-live {
  background: rgba(36, 213, 255, 0.14);
  color: #28d4ff;
}

.api-enterprise-page .bar-mc,
.api-enterprise-page .lv-bar {
  background: rgba(82, 143, 255, 0.2);
}

.api-enterprise-page .bar-mc.hi,
.api-enterprise-page .lv-bar.hl,
.api-enterprise-page .lv-bar:hover {
  background: linear-gradient(180deg, #29d5ff 0%, #1f73e9 100%);
}

.api-enterprise-page .panel-badge {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.api-enterprise-page .cap-strip {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  padding: 0 0 22px;
  border: 0;
  background: transparent;
}

.api-enterprise-page .cap-strip .container {
  gap: 18px;
  padding: 22px 28px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(16, 7, 70, 0.08);
  box-shadow: 0 24px 60px rgba(18, 38, 87, 0.12);
}

.api-enterprise-page .cap-item {
  flex: 1 1 150px;
  justify-content: center;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: #4f6688;
}

.api-enterprise-page .cap-item i {
  color: #1e6fd9;
}

.api-enterprise-page .explorer-section,
.api-enterprise-page .feat-section,
.api-enterprise-page .trust-section,
.api-enterprise-page .plans-section,
.api-enterprise-page .int-section,
.api-enterprise-page .cta-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(72, 164, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.api-enterprise-page .roi-section {
  background:
    linear-gradient(135deg, #1a3dbb 0%, #1733a5 48%, #175fe4 100%);
}

.api-enterprise-page .sec-tag {
  color: #1e6fd9;
}

.api-enterprise-page .sec-title {
  letter-spacing: -0.035em;
}

.api-enterprise-page .explorer-wrap {
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(15, 37, 83, 0.1);
}

.api-enterprise-page .ep-sidebar {
  background: #f4f8ff;
}

.api-enterprise-page .ep-row {
  border-left-width: 4px;
  border-radius: 0 18px 18px 0;
  margin-right: 18px;
}

.api-enterprise-page .ep-content-header {
  padding: 26px 28px;
}

.api-enterprise-page .ep-panels {
  padding: 28px;
}

.api-enterprise-page .feat-grid,
.api-enterprise-page .trust-badges,
.api-enterprise-page .plans-grid {
  gap: 24px;
}

.api-enterprise-page .feat-card,
.api-enterprise-page .tb-card,
.api-enterprise-page .plan-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 44px rgba(18, 38, 87, 0.08);
}

.api-enterprise-page .feat-card {
  min-height: 100%;
}

.api-enterprise-page .feat-ic,
.api-enterprise-page .tb-icon {
  background: linear-gradient(135deg, rgba(31, 115, 233, 0.14), rgba(0, 210, 255, 0.16));
  color: #1e6fd9;
  box-shadow: inset 0 0 0 1px rgba(31, 115, 233, 0.08);
}

.api-enterprise-page .latency-vis {
  padding: 30px;
  background:
    linear-gradient(180deg, #eef5ff 0%, #ffffff 100%);
}

.api-enterprise-page .lv-bars {
  height: 240px;
}

.api-enterprise-page .lv-stats {
  background: rgba(30, 111, 217, 0.12);
}

.api-enterprise-page .lv-stat {
  background: rgba(255, 255, 255, 0.92);
}

.api-enterprise-page .plan-card.featured {
  background:
    radial-gradient(circle at top right, rgba(36, 213, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #1637ad 0%, #140d64 100%);
}

.api-enterprise-page .plan-featured-badge {
  color: #28d4ff;
}

.api-enterprise-page .roi-strip {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.api-enterprise-page .roi-cell {
  background: transparent;
}

.api-enterprise-page .roi-num,
.api-enterprise-page .roi-label,
.api-enterprise-page .roi-sub {
  color: #ffffff;
}

.api-enterprise-page .roi-sub {
  opacity: 0.72;
}

.api-enterprise-page .int-logos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.api-enterprise-page .int-chip {
  min-height: 58px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 34px rgba(18, 38, 87, 0.08);
}

.api-enterprise-page .cta-box {
  padding: 40px;
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 213, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #1737b0 0%, #12349b 45%, #1649d1 100%);
  border: 1px solid rgba(104, 179, 255, 0.18);
  box-shadow: 0 28px 80px rgba(12, 25, 79, 0.28);
}

.api-enterprise-page .cta-box h2,
.api-enterprise-page .cta-box p {
  color: #ffffff;
}

.api-enterprise-page .cta-box p {
  opacity: 0.82;
}

.api-enterprise-page .cta-box .btn-ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
}

.api-enterprise-page .cta-box .btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 1180px) {
  .api-enterprise-page .cap-strip {
    margin-top: -22px;
  }

  .api-enterprise-page .cap-strip .container {
    padding: 20px;
  }
}

@media (max-width: 860px) {
  .api-enterprise-page .cap-strip {
    margin-top: 0;
    padding-top: 18px;
  }

  .api-enterprise-page .cap-strip .container {
    border-radius: 22px;
  }

  .api-enterprise-page .cap-item {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .api-enterprise-page .api-hero {
    padding: 136px 0 80px;
  }

  .api-enterprise-page .cap-strip .container,
  .api-enterprise-page .explorer-wrap,
  .api-enterprise-page .panel-window,
  .api-enterprise-page .cta-box,
  .api-enterprise-page .roi-strip {
    border-radius: 22px;
  }

  .api-enterprise-page .ep-row {
    margin-right: 0;
    border-radius: 18px;
  }
}

/* AI Automation Page */
.ai-automation-page {
  --aia-bg: #f4faff;
  --aia-surface: rgba(255, 255, 255, 0.96);
  --aia-surface-strong: #ffffff;
  --aia-surface-soft: #edf7ff;
  --aia-border: rgba(16, 7, 70, 0.08);
  --aia-border-strong: rgba(16, 7, 70, 0.14);
  --aia-text: #100746;
  --aia-text-soft: #56667f;
  --aia-text-muted: #8292aa;
  --aia-primary: #1e6fd9;
  --aia-primary-2: #00d2ff;
  --aia-primary-soft: rgba(30, 111, 217, 0.12);
  --aia-green: #10b981;
  --aia-shadow: 0 28px 72px rgba(18, 38, 87, 0.12);
  --aia-shadow-soft: 0 18px 44px rgba(18, 38, 87, 0.08);
}

body.ai-automation-page {
  font-family: 'Roboto', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.16), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(30, 111, 217, 0.18), transparent 26%),
    linear-gradient(180deg, #edf7ff 0%, #f7fbff 40%, #ffffff 100%);
  color: var(--aia-text);
}

.ai-automation-page main {
  overflow: hidden;
}

.ai-automation-page .aia-hero,
.ai-automation-page .aia-flow-section,
.ai-automation-page .aia-metrics-section,
.ai-automation-page .aia-cta-section {
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 210, 255, 0.1), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(30, 111, 217, 0.08), transparent 24%),
    linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%);
}

.ai-automation-page .aia-capability-section,
.ai-automation-page .aia-integrations-section {
  background: #ffffff;
}

.ai-automation-page .aia-trust-section {
  background:
    radial-gradient(circle at 85% 15%, rgba(30, 111, 217, 0.08), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f8fbff 100%);
}

.ai-automation-page .aia-hero {
  position: relative;
  padding: 156px 0 96px;
  background:
    radial-gradient(circle at 8% 18%, rgba(0, 210, 255, 0.2), transparent 20%),
    radial-gradient(circle at 86% 18%, rgba(16, 62, 205, 0.28), transparent 24%),
    radial-gradient(circle at 55% 82%, rgba(155, 89, 182, 0.18), transparent 20%),
    linear-gradient(135deg, #15095e 0%, #103ecd 60%, #0a1f6e 100%);
  color: #ffffff;
  overflow: hidden;
}

.ai-automation-page .aia-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  opacity: 0.55;
  pointer-events: none;
}

.ai-automation-page .aia-hero::after {
  content: '';
  position: absolute;
  top: 58%;
  left: 50%;
  width: 82%;
  height: 82%;
  background: radial-gradient(circle, rgba(16, 62, 205, 0.35) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.ai-automation-page .aia-hero .container,
.ai-automation-page .aia-capability-layout {
  position: relative;
  z-index: 1;
}

.ai-automation-page .aia-hero .aia-breadcrumb,
.ai-automation-page .aia-hero .aia-breadcrumb a {
  color: rgba(255, 255, 255, 0.68);
}



.ai-automation-page .aia-hero .aia-title,
.ai-automation-page .aia-hero .aia-title span {
  color: #ffffff;
}

.ai-automation-page .aia-hero .aia-desc,
.ai-automation-page .aia-hero .aia-proof-item {
  color: rgba(255, 255, 255, 0.82);
}

.ai-automation-page .aia-hero .aia-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.ai-automation-page .aia-hero .aia-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
}

.ai-automation-page .aia-hero .aia-proof-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.ai-automation-page .aia-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 60px;
  align-items: center;
}

.ai-automation-page .aia-breadcrumb,
.ai-automation-page .aia-breadcrumb a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--aia-text-muted);
  font-size: 0.8rem;
}

.ai-automation-page .aia-breadcrumb {
  margin-bottom: 18px;
}

.ai-automation-page .aia-breadcrumb span,
.ai-automation-page .aia-breadcrumb a:hover,
.ai-automation-page .aia-kicker,
.ai-automation-page .aia-proof-item i,
.ai-automation-page .aia-tag,
.ai-automation-page .nav-item:hover,
.ai-automation-page .nav-item.active {
  color: var(--aia-primary);
}

.ai-automation-page .aia-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.ai-automation-page .aia-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aia-primary);
  box-shadow: 0 0 0 8px rgba(30, 111, 217, 0.12);
}

.ai-automation-page .aia-title,
.ai-automation-page .aia-section-title,
.ai-automation-page .aia-cta-box h2,
.ai-automation-page .aia-mini-card h4,
.ai-automation-page .aia-flow-card h3,
.ai-automation-page .aia-trust-card h3,
.ai-automation-page .aia-capability-item h4 {
  /* color: var(--aia-text); */
  font-family: 'Roboto', sans-serif;
}

.ai-automation-page .aia-title {
  font-size: clamp(2.9rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}

.ai-automation-page .aia-title span {
  color: var(--aia-primary);
}

.ai-automation-page .aia-desc,
.ai-automation-page .aia-section-desc,
.ai-automation-page .aia-proof-item,
.ai-automation-page .aia-mini-card p,
.ai-automation-page .aia-flow-card p,
.ai-automation-page .aia-capability-item p,
.ai-automation-page .aia-metric-label,
.ai-automation-page .aia-trust-card p,
.ai-automation-page .aia-integration-chip,
.ai-automation-page .aia-cta-box p {
  color: var(--aia-text-soft);
}

.ai-automation-page .aia-desc {
  max-width: 560px;
  margin-bottom: 34px;
  font-size: 1.06rem;
  line-height: 1.75;
}

.ai-automation-page .aia-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ai-automation-page .aia-actions-center {
  justify-content: center;
}

.ai-automation-page .aia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ai-automation-page .aia-btn-primary {
  background: linear-gradient(135deg, var(--aia-primary), var(--aia-primary-2));
  color: #fff;
  box-shadow: 0 14px 34px rgba(30, 111, 217, 0.24);
}

.ai-automation-page .aia-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(30, 111, 217, 0.3);
}

.ai-automation-page .aia-btn-secondary {
  background: #fff;
  color: var(--aia-text);
  border: 1px solid var(--aia-border-strong);
}

.ai-automation-page .aia-btn-secondary:hover {
  background: var(--aia-surface-soft);
}

.ai-automation-page .aia-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 26px;
}

.ai-automation-page .aia-proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
}

.ai-automation-page .aia-hero-visual {
  position: relative;
  min-height: 560px;
}

.ai-automation-page .aia-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0.75;
}

.ai-automation-page .aia-orb-1 {
  width: 180px;
  height: 180px;
  top: 12px;
  right: 44px;
  background: rgba(0, 210, 255, 0.28);
}

.ai-automation-page .aia-orb-2 {
  width: 240px;
  height: 240px;
  bottom: 36px;
  left: 18px;
  background: rgba(30, 111, 217, 0.2);
}

.ai-automation-page .aia-command,
.ai-automation-page .aia-capability-panel,
.ai-automation-page .aia-flow-card,
.ai-automation-page .aia-metric-card,
.ai-automation-page .aia-trust-card,
.ai-automation-page .aia-integration-chip,
.ai-automation-page .aia-cta-box {
  background: var(--aia-surface);
  border: 1px solid var(--aia-border);
  box-shadow: var(--aia-shadow);
}

.ai-automation-page .aia-command,
.ai-automation-page .aia-capability-panel,
.ai-automation-page .aia-cta-box {
  border-radius: 28px;
}

.ai-automation-page .aia-command {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1324 0%, #111b31 55%, #0d172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 72px rgba(5, 12, 28, 0.42);
}

.ai-automation-page .aia-command-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-automation-page .aia-command-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.ai-automation-page .aia-command-bar strong {
  margin-left: 8px;
  color: #ffffff;
  font-size: 0.92rem;
}

.ai-automation-page .aia-command-bar em {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--aia-green);
  font-style: normal;
  font-size: 0.72rem;
  font-family: 'IBM Plex Mono', monospace;
}

.ai-automation-page .aia-command-body {
  padding: 22px;
  color: #d8e9ff;
}

.ai-automation-page .aia-chat {
  max-width: 82%;
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 14px;
  line-height: 1.65;
}

.ai-automation-page .aia-chat-user {
  background: rgba(255, 255, 255, 0.06);
  color: #f3f8ff;
}

.ai-automation-page .aia-chat-agent {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.2), rgba(0, 210, 255, 0.16));
  color: #e6f3ff;
}

.ai-automation-page .aia-surface-grid,
.ai-automation-page .aia-flow-grid,
.ai-automation-page .aia-metrics-grid,
.ai-automation-page .aia-trust-grid,
.ai-automation-page .aia-integration-grid {
  display: grid;
}

.ai-automation-page .aia-surface-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.ai-automation-page .aia-mini-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-automation-page .aia-mini-card-strong {
  display: flex;
  align-items: center;
  gap: 16px;
  /* background: linear-gradient(135deg, rgba(30, 111, 217, 0.26), rgba(0, 210, 255, 0.18)); */
}

.ai-automation-page .aia-score-ring {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--aia-primary) 0deg, var(--aia-primary-2) 300deg, rgba(30, 111, 217, 0.12) 300deg);
  color: #fff;
  font-size: 1.5rem;
  position: relative;
}

.ai-automation-page .aia-score-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.ai-automation-page .aia-score-ring span,
.ai-automation-page .aia-score-ring small {
  position: relative;
  z-index: 1;
  color: var(--aia-primary);
}

.ai-automation-page .aia-score-ring small {
  font-size: 0.8rem;
  margin-left: 2px;
}

.ai-automation-page .aia-log-stream {
  height: 155px;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: 22px;
  background: #0f1d34;
  color: #d8e9ff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.76rem;
  line-height: 1.75;
}

.ai-automation-page .aia-log-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.ai-automation-page .aia-log-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-automation-page .aia-log-ts {
  color: #86a4cc;
  margin-right: 8px;
}

.ai-automation-page .aia-strip {
  padding: 26px 0;
  background: #ffffff;
  border-top: 1px solid var(--aia-border);
  border-bottom: 1px solid var(--aia-border);
}

.ai-automation-page .aia-strip .container {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.ai-automation-page .aia-strip-item,
.ai-automation-page .aia-integration-chip,
.ai-automation-page .aia-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--aia-surface-soft);
  border: 1px solid rgba(30, 111, 217, 0.08);
  color: var(--aia-text-soft);
}

.ai-automation-page .aia-section {
  padding: 60px 0;
}

.ai-automation-page .aia-section-head {
  max-width: 660px;
  margin: 0 auto 56px;
}

.ai-automation-page .aia-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.ai-automation-page .aia-section-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: 16px;
}

.ai-automation-page .aia-section-desc {
  line-height: 1.72;
}

.ai-automation-page .aia-flow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.ai-automation-page .aia-flow-card,
.ai-automation-page .aia-trust-card,
.ai-automation-page .aia-metric-card {
  padding: 28px;
  border-radius: 24px;
}

.ai-automation-page .aia-step {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 16px;
  background: rgba(30, 111, 217, 0.12);
  color: var(--aia-primary);
}

.ai-automation-page .aia-capability-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: start;
}

.ai-automation-page .aia-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.ai-automation-page .aia-pill.active {
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.14), rgba(0, 210, 255, 0.14));
  color: var(--aia-primary);
}

.ai-automation-page .aia-capability-panel {
  padding: 28px;
}

.ai-automation-page .aia-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.ai-automation-page .aia-panel-head span {
  color: var(--aia-text-muted);
  font-size: 0.8rem;
  font-family: 'IBM Plex Mono', monospace;
}

.ai-automation-page .aia-capability-list {
  display: grid;
  gap: 16px;
}

.ai-automation-page .aia-capability-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: #f7faff;
  border: 1px solid rgba(30, 111, 217, 0.08);
}

.ai-automation-page .aia-capability-item i,
.ai-automation-page .aia-trust-card i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(30, 111, 217, 0.12);
  color: var(--aia-primary);
}

.ai-automation-page .aia-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ai-automation-page .aia-metric-num {
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1;
  color: var(--aia-primary);
  margin-bottom: 10px;
}

.ai-automation-page .aia-trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.ai-automation-page .aia-trust-card i {
  margin-bottom: 18px;
}

.ai-automation-page .aia-integration-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ai-automation-page .aia-integration-chip {
  justify-content: center;
  padding: 16px 18px;
  border-radius: 22px;
}

.ai-automation-page .aia-cta-box {
  padding: 56px;
  text-align: center;
  background:
    radial-gradient(circle at top center, rgba(30, 111, 217, 0.16), transparent 34%),
    linear-gradient(180deg, #eef7ff 0%, #ffffff 100%);
}

.ai-automation-page .aia-cta-box p {
  max-width: 700px;
  margin: 0 auto 30px;
}

.ai-automation-page .aia-flow-card,
.ai-automation-page .aia-metric-card,
.ai-automation-page .aia-trust-card,
.ai-automation-page .aia-capability-item,
.ai-automation-page .aia-strip-item,
.ai-automation-page .aia-integration-chip,
.ai-automation-page .floating-chat-bubble,
.ai-automation-page .social-circle {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ai-automation-page .aia-flow-card:hover,
.ai-automation-page .aia-metric-card:hover,
.ai-automation-page .aia-trust-card:hover,
.ai-automation-page .aia-capability-item:hover,
.ai-automation-page .aia-strip-item:hover,
.ai-automation-page .aia-integration-chip:hover {
  transform: translateY(-5px);
  box-shadow: var(--aia-shadow-soft);
}

.ai-automation-page .floating-chat-bubble {
  background: linear-gradient(135deg, var(--aia-primary), var(--aia-primary-2));
  color: #fff;
  box-shadow: 0 18px 42px rgba(30, 111, 217, 0.28);
}

.ai-automation-page .floating-chat-bubble:hover {
  transform: translateY(-6px) scale(1.05);
}

.ai-automation-page .social-circle:hover {
  background: var(--aia-primary);
}

@media (max-width: 1180px) {

  .ai-automation-page .aia-hero .container,
  .ai-automation-page .aia-capability-layout {
    grid-template-columns: 1fr;
  }

  .ai-automation-page .aia-flow-grid,
  .ai-automation-page .aia-metrics-grid,
  .ai-automation-page .aia-integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .ai-automation-page .aia-section {
    padding: 84px 0;
  }

  .ai-automation-page .aia-flow-grid,
  .ai-automation-page .aia-metrics-grid,
  .ai-automation-page .aia-trust-grid,
  .ai-automation-page .aia-integration-grid,
  .ai-automation-page .aia-surface-grid {
    grid-template-columns: 1fr;
  }

  .ai-automation-page .aia-cta-box {
    padding: 40px 24px;
  }
}

@media (max-width: 640px) {
  .ai-automation-page .aia-hero {
    padding: 136px 0 72px;
  }

  .ai-automation-page .aia-actions {
    flex-direction: column;
  }

  .ai-automation-page .aia-btn {
    width: 100%;
  }

  .ai-automation-page .aia-command-body,
  .ai-automation-page .aia-capability-panel,
  .ai-automation-page .aia-flow-card,
  .ai-automation-page .aia-metric-card,
  .ai-automation-page .aia-trust-card {
    padding: 20px;
  }

  .ai-automation-page .aia-strip .container {
    justify-content: flex-start;
  }
}

/* Performance Page */
.performance-page {
  --perf-bg: #f4f9ff;
  --perf-surface: rgba(255, 255, 255, 0.94);
  --perf-surface-strong: #ffffff;
  --perf-surface-dark: #0d1830;
  --perf-border: rgba(16, 7, 70, 0.08);
  --perf-border-strong: rgba(255, 255, 255, 0.1);
  --perf-text: #100746;
  --perf-text-soft: #5f7088;
  --perf-primary: #0069ff;
  --perf-primary-2: #00d2ff;
  --perf-accent: #ff5a36;
  --perf-shadow: 0 28px 80px rgba(17, 38, 88, 0.14);
}

body.performance-page {
  font-family: 'Roboto', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.14), transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(16, 62, 205, 0.14), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 45%, #ffffff 100%);
  color: var(--perf-text);
}

.performance-page main {
  overflow: hidden;
}

.performance-page .perf-hero,
.performance-page .perf-section,
.performance-page .perf-strip {
  position: relative;
}

.performance-page .perf-hero {
  padding: 156px 0 92px;
  background: linear-gradient(135deg, #15095e 0%, #103ecd 62%, #0a1f6e 100%);
  color: #fff;
  overflow: hidden;
}

.performance-page .perf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  opacity: 0.55;
}

.performance-page .perf-hero-shapes,
.performance-page .perf-hero-grid {
  position: relative;
  z-index: 1;
}

.performance-page .perf-hero-grid,
.performance-page .perf-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}

.performance-page .perf-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}

.performance-page .perf-shape-1 {
  width: 380px;
  height: 380px;
  top: -140px;
  left: -120px;
  background: rgba(0, 210, 255, 0.42);
}

.performance-page .perf-shape-2 {
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -140px;
  background: rgba(16, 62, 205, 0.42);
}

.performance-page .perf-shape-3 {
  width: 260px;
  height: 260px;
  left: 48%;
  top: 20%;
  background: rgba(255, 90, 54, 0.2);
}

.performance-page .perf-breadcrumb,
.performance-page .perf-breadcrumb a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.performance-page .perf-breadcrumb {
  margin-bottom: 18px;
}

.performance-page .perf-breadcrumb span,
.performance-page .perf-breadcrumb a:hover,
.performance-page .perf-kicker,
.performance-page .perf-tag,
.performance-page .perf-mini-tag {
  color: #00d2ff;
}

.performance-page .perf-kicker,
.performance-page .perf-tag,
.performance-page .perf-mini-tag {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.performance-page .perf-kicker {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.8rem;
}

.performance-page .perf-title,
.performance-page .perf-section-title,
.performance-page .perf-cta-box h2 {

  line-height: 1.02;
  letter-spacing: -0.03em;
}

.performance-page .perf-title {
  max-width: 620px;
  margin-bottom: 20px;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
}

.performance-page .perf-desc,
.performance-page .perf-section-desc,
.performance-page .perf-zone-item span,
.performance-page .perf-scenario-card p,
.performance-page .perf-insight-card p,
.performance-page .perf-cta-box p {
  color: var(--perf-text-soft);
  line-height: 1.75;
}

.performance-page .perf-desc,
.performance-page .perf-trust-pill {
  color: rgba(255, 255, 255, 0.82);
}

.performance-page .perf-desc {
  max-width: 560px;
  margin-bottom: 32px;
  font-size: 1.06rem;
}

.performance-page .perf-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.performance-page .perf-actions-center {
  justify-content: center;
}

.performance-page .perf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.performance-page .perf-btn:hover {
  transform: translateY(-3px);
}

.performance-page .perf-btn-primary {
  background: linear-gradient(135deg, var(--perf-primary), var(--perf-primary-2));
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 105, 255, 0.28);
}

.performance-page .perf-btn-secondary {
  background: linear-gradient(135deg, var(--perf-primary), var(--perf-primary-2));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.performance-page .perf-trust-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.performance-page .perf-trust-pill,
.performance-page .perf-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.performance-page .perf-command-card,
.performance-page .perf-observatory-card,
.performance-page .perf-scenario-card,
.performance-page .perf-zone-card,
.performance-page .perf-insight-card,
.performance-page .perf-metric-card,
.performance-page .perf-cta-box {
  border: 1px solid var(--perf-border);
  box-shadow: var(--perf-shadow);
}

.performance-page .perf-command-card {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #0b1324 0%, #101b32 60%, #0c162b 100%);
  border-color: var(--perf-border-strong);
}

.performance-page .perf-command-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.performance-page .perf-command-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.performance-page .perf-command-head strong {
  margin-left: 8px;
  color: #fff;
}

.performance-page .perf-command-head em {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.72rem;
  background: rgba(16, 185, 129, 0.14);
  color: #7dffb0;
}

.performance-page .perf-command-body {
  padding: 22px;
  color: #e1efff;
}

.performance-page .perf-meter-panel {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 20px;
  align-items: center;
}

.performance-page .perf-meter-ring {
  position: relative;
  width: 128px;
  height: 128px;
}

.performance-page .perf-meter-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.performance-page .perf-meter-ring circle {
  fill: none;
  stroke-width: 10;
}

.performance-page .perf-meter-ring circle:first-child {
  stroke: rgba(255, 255, 255, 0.1);
}

.performance-page .perf-meter-ring circle:last-child {
  stroke: #00d2ff;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 0.4s ease;
}

.performance-page .perf-meter-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.performance-page .perf-meter-value span {
  font-size: 2rem;
  line-height: 1;
}

.performance-page .perf-meter-value small,
.performance-page .perf-meter-stats small,
.performance-page .perf-observatory-status,
.performance-page .perf-zone-item span {
  color: rgba(225, 239, 255, 0.7);
}

.performance-page .perf-meter-copy h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
  color: #fff;
}

.performance-page .perf-meter-copy p {
  margin-bottom: 16px;
  line-height: 1.7;
  color: rgba(225, 239, 255, 0.78);
}

.performance-page .perf-meter-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.performance-page .perf-meter-stats div,
.performance-page .perf-zone-item,
.performance-page .perf-ob-stat {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.performance-page .perf-meter-stats span,
.performance-page .perf-ob-stat strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.2rem;
  color: #fff;
}

.performance-page .perf-console-log {
  min-height: 118px;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.8;
}

.performance-page .perf-console-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.performance-page .perf-console-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.performance-page .perf-strip {
  padding: 28px 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(16, 7, 70, 0.06);
}

.performance-page .perf-strip-row,
.performance-page .perf-observatory-stats,
.performance-page .perf-metrics-grid {
  display: grid;
}

.performance-page .perf-strip-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.performance-page .perf-strip-item {
  justify-content: center;
  color: var(--perf-text);
  border-color: rgba(16, 7, 70, 0.08);
  background: #f8fbff;
}

.performance-page .perf-section {
  padding: 96px 0;
}

.performance-page .perf-observatory-section,
.performance-page .perf-metrics-section {
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 210, 255, 0.1), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(30, 111, 217, 0.08), transparent 24%),
    linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%);
}

.performance-page .perf-scenarios-section,
.performance-page .perf-cta-section {
  background: #ffffff;
}

.performance-page .perf-insights-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(16, 62, 205, 0.08), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 100%);
}

.performance-page .perf-section-head {
  max-width: 760px;
  margin: 0 auto 48px;
}

.performance-page .perf-section-title,
.performance-page .perf-cta-box h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.performance-page .perf-observatory-card,
.performance-page .perf-zone-card,
.performance-page .perf-cta-box {
  border-radius: 30px;
  background: var(--perf-surface);
}

.performance-page .perf-observatory-card {
  padding: 28px;
}

.performance-page .perf-observatory-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}

.performance-page .perf-observatory-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0, 105, 255, 0.08);
  color: var(--perf-primary);
  font-weight: 700;
}

.performance-page .perf-observatory-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.performance-page .perf-ob-stat {
  background: #f8fbff;
}

.performance-page .perf-ob-stat strong {
  color: var(--perf-text);
}

.performance-page .perf-ob-stat span {
  color: var(--perf-text-soft);
}

.performance-page .perf-chart-wrap {
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8ff 100%);
}

.performance-page .perf-chart-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.performance-page .perf-grid-lines line {
  stroke: rgba(16, 7, 70, 0.08);
}

.performance-page #perfTrendArea {
  fill: url(#perfAreaGradient);
}

.performance-page #perfTrendLine {
  fill: none;
  stroke: var(--perf-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.performance-page .perf-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.performance-page .perf-scenario-card,
.performance-page .perf-insight-card,
.performance-page .perf-metric-card {
  padding: 28px;
  border-radius: 24px;
  background: var(--perf-surface-strong);
}

.performance-page .perf-scenario-card i,
.performance-page .perf-insight-card-strong .perf-counter-num {
  color: var(--perf-accent);
}

.performance-page .perf-scenario-card i {
  margin-bottom: 18px;
  font-size: 1.4rem;
}

.performance-page .perf-scenario-card h3,
.performance-page .perf-insight-card h3 {
  margin-bottom: 12px;
  font-size: 1.3rem;
  color: var(--perf-text);
}

.performance-page .perf-zone-list,
.performance-page .perf-insight-stack {
  display: grid;
  gap: 14px;
}

.performance-page .perf-zone-card {
  padding: 32px;
}

.performance-page .perf-zone-list {
  margin-top: 24px;
}

.performance-page .perf-zone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(16, 62, 205, 0.06);
}

.performance-page .perf-zone-item strong {
  color: var(--perf-text);
}

.performance-page .perf-mini-tag {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.74rem;
}

.performance-page .perf-insight-card-strong {
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.12), rgba(0, 210, 255, 0.12));
}

.performance-page .perf-counter-num,
.performance-page .perf-metric-num {
  font-size: 2.5rem;
  color: var(--perf-text);
  line-height: 1;
}

.performance-page .perf-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.performance-page .perf-metric-label {
  margin-top: 14px;
  color: var(--perf-text-soft);
}

.performance-page .perf-cta-box {
  padding: 48px;
  text-align: center;
}

.performance-page .perf-cta-box p {
  max-width: 720px;
  margin: 0 auto 28px;
}

@media (max-width: 1100px) {

  .performance-page .perf-hero-grid,
  .performance-page .perf-insights-grid,
  .performance-page .perf-scenarios-grid,
  .performance-page .perf-metrics-grid,
  .performance-page .perf-strip-row,
  .performance-page .perf-observatory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .performance-page .perf-hero {
    padding: 136px 0 72px;
  }

  .performance-page .perf-hero-grid,
  .performance-page .perf-insights-grid,
  .performance-page .perf-scenarios-grid,
  .performance-page .perf-metrics-grid,
  .performance-page .perf-strip-row,
  .performance-page .perf-observatory-stats,
  .performance-page .perf-meter-panel {
    grid-template-columns: 1fr;
  }

  .performance-page .perf-command-body,
  .performance-page .perf-observatory-card,
  .performance-page .perf-scenario-card,
  .performance-page .perf-zone-card,
  .performance-page .perf-insight-card,
  .performance-page .perf-metric-card,
  .performance-page .perf-cta-box {
    padding: 22px;
  }

  .performance-page .perf-actions {
    flex-direction: column;
  }

  .performance-page .perf-btn {
    width: 100%;
    justify-content: center;
  }
}

/* AI Capabilities Page */
.ai-capabilities-page {
  --aic-surface: rgba(255, 255, 255, 0.96);
  --aic-surface-soft: #f3f9ff;
  --aic-border: rgba(16, 7, 70, 0.08);
  --aic-text: #100746;
  --aic-text-soft: #60718b;
  --aic-primary: #0069ff;
  --aic-primary-2: #00d2ff;
  --aic-shadow: 0 28px 80px rgba(17, 38, 88, 0.14);
}

body.ai-capabilities-page {
  font-family: 'Roboto', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.14), transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(16, 62, 205, 0.14), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 45%, #ffffff 100%);
  color: var(--aic-text);
}

.ai-capabilities-page main {
  overflow: hidden;
}

.ai-capabilities-page .aic-hero {
  position: relative;
  padding: 156px 0 50px;
  background: linear-gradient(135deg, #15095e 0%, #103ecd 62%, #0a1f6e 100%);
  color: #fff;
  overflow: hidden;
}

.ai-capabilities-page .aic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  opacity: 0.55;
}

.ai-capabilities-page .aic-hero-grid,
.ai-capabilities-page .aic-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ai-capabilities-page .aic-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}

.ai-capabilities-page .aic-shape-1 {
  width: 380px;
  height: 380px;
  top: -140px;
  left: -120px;
  background: rgba(0, 210, 255, 0.42);
}

.ai-capabilities-page .aic-shape-2 {
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -140px;
  background: rgba(16, 62, 205, 0.42);
}

.ai-capabilities-page .aic-shape-3 {
  width: 260px;
  height: 260px;
  left: 48%;
  top: 20%;
  background: rgba(255, 90, 54, 0.2);
}

.ai-capabilities-page .aic-breadcrumb,
.ai-capabilities-page .aic-breadcrumb a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
}

.ai-capabilities-page .aic-breadcrumb {
  margin-bottom: 18px;
}

.ai-capabilities-page .aic-breadcrumb span,
.ai-capabilities-page .aic-breadcrumb a:hover,
.ai-capabilities-page .aic-kicker,
.ai-capabilities-page .aic-tag {
  color: #00d2ff;
}


.ai-capabilities-page .aic-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.ai-capabilities-page .aic-title,
.ai-capabilities-page .aic-section-title,
.ai-capabilities-page .aic-cta-box h2 {
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.ai-capabilities-page .aic-title {
  max-width: 650px;
  margin-bottom: 20px;
  font-size: clamp(2.8rem, 7vw, 5.1rem);
}

.ai-capabilities-page .aic-desc,
.ai-capabilities-page .aic-section-desc,
.ai-capabilities-page .aic-feature-card p,
.ai-capabilities-page .aic-step-card p,
.ai-capabilities-page .aic-assistant-msg,
.ai-capabilities-page .aic-cta-box p {
  line-height: 1.75;
}

.ai-capabilities-page .aic-desc {
  max-width: 560px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.ai-capabilities-page .aic-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ai-capabilities-page .aic-actions-center {
  justify-content: center;
}

.ai-capabilities-page .aic-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.ai-capabilities-page .aic-btn:hover {
  transform: translateY(-3px);
}

.ai-capabilities-page .aic-btn-primary {
  background: linear-gradient(135deg, var(--aic-primary), var(--aic-primary-2));
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 105, 255, 0.28);
}

.ai-capabilities-page .aic-btn-secondary {
  background: linear-gradient(135deg, var(--aic-primary), var(--aic-primary-2));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ai-capabilities-page .aic-proof-row,
.ai-capabilities-page .aic-strip-row {
  display: grid;
}

.ai-capabilities-page .aic-proof-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.ai-capabilities-page .aic-proof-pill,
.ai-capabilities-page .aic-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
}

.ai-capabilities-page .aic-proof-pill {
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.ai-capabilities-page .aic-command-card,
.ai-capabilities-page .aic-feature-card,
.ai-capabilities-page .aic-step-card,
.ai-capabilities-page .aic-assistant-panel,
.ai-capabilities-page .aic-metric-card,
.ai-capabilities-page .aic-cta-box {
  border: 1px solid var(--aic-border);
  box-shadow: var(--aic-shadow);
}

.ai-capabilities-page .aic-command-card {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #0b1324 0%, #101b32 60%, #0c162b 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.ai-capabilities-page .aic-command-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.ai-capabilities-page .aic-command-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.ai-capabilities-page .aic-command-head strong {
  margin-left: 8px;
  color: #fff;
}

.ai-capabilities-page .aic-command-head em {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.72rem;
  background: rgba(16, 185, 129, 0.14);
  color: #7dffb0;
}

.ai-capabilities-page .aic-command-body {
  padding: 22px;
  color: #e1efff;
}

.ai-capabilities-page .aic-chat {
  max-width: 84%;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  line-height: 1.7;
}

.ai-capabilities-page .aic-chat-user {
  background: rgba(255, 255, 255, 0.06);
  color: #f3f8ff;
}

.ai-capabilities-page .aic-chat-bot {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.2), rgba(0, 210, 255, 0.16));
}

.ai-capabilities-page .aic-mini-grid,
.ai-capabilities-page .aic-card-grid,
.ai-capabilities-page .aic-metrics-grid {
  display: grid;
}

.ai-capabilities-page .aic-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.ai-capabilities-page .aic-mini-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-capabilities-page .aic-mini-card h4 {
  margin-bottom: 10px;
  color: #fff;
}

.ai-capabilities-page .aic-mini-card p {
  color: rgba(225, 239, 255, 0.76);
  line-height: 1.7;
}

.ai-capabilities-page .aic-mini-card-strong {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.16), rgba(0, 210, 255, 0.14));
}

.ai-capabilities-page .aic-score-ring {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--aic-primary) 0deg, var(--aic-primary-2) 300deg, rgba(255, 255, 255, 0.12) 300deg);
  color: #fff;
  position: relative;
}

.ai-capabilities-page .aic-score-ring::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #0f1b32;
}

.ai-capabilities-page .aic-score-ring span,
.ai-capabilities-page .aic-score-ring small {
  position: relative;
  z-index: 1;
}

.ai-capabilities-page .aic-log-stream {
  height: 110px;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.8;
}

.ai-capabilities-page .aic-log-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ai-capabilities-page .aic-log-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-capabilities-page .aic-strip {
  padding: 28px 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(16, 7, 70, 0.06);
}

.ai-capabilities-page .aic-strip-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ai-capabilities-page .aic-strip-item {
  justify-content: center;
  color: var(--aic-text);
  border: 1px solid rgba(16, 7, 70, 0.08);
  background: #f8fbff;
}

.ai-capabilities-page .aic-section {
  padding: 50px 0;
}

.ai-capabilities-page .aic-core-section,
.ai-capabilities-page .aic-demo-section {
  background: #ffffff;
}

.ai-capabilities-page .aic-workflow-section,
.ai-capabilities-page .aic-metrics-section {
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 210, 255, 0.1), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(30, 111, 217, 0.08), transparent 24%),
    linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%);
}

.ai-capabilities-page .aic-cta-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(16, 62, 205, 0.08), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 100%);
}

.ai-capabilities-page .aic-section-head {
  max-width: 760px;
  margin: 0 auto 48px;
}

.ai-capabilities-page .aic-section-title,
.ai-capabilities-page .aic-cta-box h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.ai-capabilities-page .aic-section-desc,
.ai-capabilities-page .aic-feature-card p,
.ai-capabilities-page .aic-step-card p,
.ai-capabilities-page .aic-metric-label,
.ai-capabilities-page .aic-cta-box p {
  color: var(--aic-text-soft);
}

.ai-capabilities-page .aic-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ai-capabilities-page .aic-feature-card,
.ai-capabilities-page .aic-step-card,
.ai-capabilities-page .aic-assistant-panel,
.ai-capabilities-page .aic-metric-card,
.ai-capabilities-page .aic-cta-box {
  border-radius: 28px;
  background: var(--aic-surface);
}

.ai-capabilities-page .aic-feature-card {
  padding: 28px;
}

.ai-capabilities-page .aic-feature-card i {
  margin-bottom: 18px;
  font-size: 1.35rem;
  color: var(--aic-primary);
}

.ai-capabilities-page .aic-feature-card h3,
.ai-capabilities-page .aic-step-card h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  color: var(--aic-text);
}

.ai-capabilities-page .aic-workflow-list {
  display: grid;
  gap: 16px;
}

.ai-capabilities-page .aic-workflow-board {
  margin-top: 28px;
  padding: 26px;
  border-radius: 28px;
  background: var(--aic-surface);
  border: 1px solid var(--aic-border);
  box-shadow: var(--aic-shadow);
}

.ai-capabilities-page .aic-board-head,
.ai-capabilities-page .aic-board-item,
.ai-capabilities-page .aic-board-footer {
  display: flex;
}

.ai-capabilities-page .aic-board-head {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ai-capabilities-page .aic-board-head strong {
  font-size: 1.1rem;
  color: var(--aic-text);
}

.ai-capabilities-page .aic-board-head span {
  color: var(--aic-text-soft);
  font-size: 0.84rem;
}

.ai-capabilities-page .aic-board-list {
  display: grid;
  gap: 14px;
}

.ai-capabilities-page .aic-board-item {
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 20px;
  background: #f8fbff;
}

.ai-capabilities-page .aic-board-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 105, 255, 0.08);
  color: var(--aic-primary);
}

.ai-capabilities-page .aic-board-item h4 {
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--aic-text);
}

.ai-capabilities-page .aic-board-item p {
  color: var(--aic-text-soft);
  line-height: 1.65;
}

.ai-capabilities-page .aic-board-footer {
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.ai-capabilities-page .aic-board-stat {
  flex: 1;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.08), rgba(0, 210, 255, 0.08));
  text-align: center;
}

.ai-capabilities-page .aic-board-stat strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.5rem;
  color: var(--aic-text);
}

.ai-capabilities-page .aic-board-stat span {
  color: var(--aic-text-soft);
  font-size: 0.88rem;
}

.ai-capabilities-page .aic-step-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 24px;
}

.ai-capabilities-page .aic-step-card span {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(0, 105, 255, 0.08);
  color: var(--aic-primary);
}

.ai-capabilities-page .aic-assistant-panel {
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
}

.ai-capabilities-page .aic-assistant-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 24px 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 105, 255, 0.08);
  color: var(--aic-primary);
  font-weight: 700;
}

.ai-capabilities-page .aic-assistant-body {
  padding: 22px 24px 24px;
}

.ai-capabilities-page .aic-assistant-chat {
  min-height: 210px;
  margin-bottom: 18px;
}

.ai-capabilities-page .aic-assistant-msg {
  max-width: 80%;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 18px;
}

.ai-capabilities-page .aic-assistant-msg.bot {
  background: #f6faff;
}

.ai-capabilities-page .aic-assistant-msg.user {
  margin-left: auto;
  background: linear-gradient(135deg, var(--aic-primary), var(--aic-primary-2));
  color: #fff;
}

.ai-capabilities-page .aic-assistant-input {
  display: flex;
  gap: 12px;
}

.ai-capabilities-page .aic-assistant-input input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--aic-border);
  font-size: 0.95rem;
}

.ai-capabilities-page .aic-assistant-input button {
  padding: 14px 22px;
  border-radius: 14px;
  border: none;
  background: var(--aic-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.ai-capabilities-page .aic-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ai-capabilities-page .aic-metric-card,
.ai-capabilities-page .aic-cta-box {
  padding: 32px;
}

.ai-capabilities-page .aic-metric-num {
  font-size: 2.5rem;
  color: var(--aic-text);
  line-height: 1;
}

.ai-capabilities-page .aic-metric-label {
  margin-top: 12px;
}

.ai-capabilities-page .aic-cta-box {
  text-align: center;
}

.ai-capabilities-page .aic-cta-box p {
  max-width: 720px;
  margin: 0 auto 28px;
}

@media (max-width: 1100px) {

  .ai-capabilities-page .aic-hero-grid,
  .ai-capabilities-page .aic-workflow-grid,
  .ai-capabilities-page .aic-card-grid,
  .ai-capabilities-page .aic-metrics-grid,
  .ai-capabilities-page .aic-proof-row,
  .ai-capabilities-page .aic-strip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ai-capabilities-page .aic-hero {
    padding: 136px 0 72px;
  }

  .ai-capabilities-page .aic-hero-grid,
  .ai-capabilities-page .aic-workflow-grid,
  .ai-capabilities-page .aic-card-grid,
  .ai-capabilities-page .aic-metrics-grid,
  .ai-capabilities-page .aic-proof-row,
  .ai-capabilities-page .aic-strip-row,
  .ai-capabilities-page .aic-mini-grid,
  .ai-capabilities-page .aic-assistant-input {
    grid-template-columns: 1fr;
  }

  .ai-capabilities-page .aic-actions {
    flex-direction: column;
  }

  .ai-capabilities-page .aic-btn {
    width: 100%;
    justify-content: center;
  }

  .ai-capabilities-page .aic-feature-card,
  .ai-capabilities-page .aic-step-card,
  .ai-capabilities-page .aic-assistant-panel,
  .ai-capabilities-page .aic-metric-card,
  .ai-capabilities-page .aic-cta-box {
    padding: 22px;
  }

  .ai-capabilities-page .aic-step-card {
    grid-template-columns: 1fr;
  }

  .ai-capabilities-page .aic-board-head,
  .ai-capabilities-page .aic-board-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Redesigned AI Capabilities CTA Section */
.ai-capabilities-page .aic-cta-box {
  background: linear-gradient(135deg, #100746, #0f3ac4) !important;
  border: 1px solid rgba(0, 105, 255, 0.15) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.1) !important;
  color: #ffffff !important;
  padding: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}

.ai-capabilities-page .aic-cta-box::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  z-index: 0 !important;
}

.ai-capabilities-page .aic-cta-box::after {
  display: none !important;
}

.ai-capabilities-page .aic-cta-box .cta-glow {
  position: absolute !important;
  width: 600px !important;
  height: 400px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(0, 105, 255, 0.4) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.ai-capabilities-page .aic-cta-box .aic-tag {
  display: inline-block !important;
  color: #00bcff !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 15px !important;
  position: relative !important;
  z-index: 1 !important;
}

.ai-capabilities-page .aic-cta-box h2 {
  color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
}

.ai-capabilities-page .aic-cta-box p {
  color: rgba(255, 255, 255, 0.75) !important;
  position: relative !important;
  z-index: 1 !important;
}

.ai-capabilities-page .aic-cta-box .aic-actions {
  position: relative !important;
  z-index: 1 !important;
}

.ai-capabilities-page .aic-cta-box .aic-btn-primary {
  background: linear-gradient(135deg, #0069ff, #00d2ff) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 105, 255, 0.28) !important;
}

.ai-capabilities-page .aic-cta-box .aic-btn-primary:hover {
  background: linear-gradient(135deg, #0056cc, #00c4ee) !important;
  box-shadow: 0 20px 40px rgba(0, 105, 255, 0.35) !important;
}

.ai-capabilities-page .aic-cta-box .aic-btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

.ai-capabilities-page .aic-cta-box .aic-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Platform Overview Page */
.platform-overview-page {
  --pov-surface: rgba(255, 255, 255, 0.96);
  --pov-surface-soft: #f3f9ff;
  --pov-border: rgba(16, 7, 70, 0.08);
  --pov-text: #100746;
  --pov-text-soft: #60718b;
  --pov-primary: #0069ff;
  --pov-primary-2: #00d2ff;
  --pov-shadow: 0 28px 80px rgba(17, 38, 88, 0.14);
}

body.platform-overview-page {
  font-family: 'Roboto', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.14), transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(16, 62, 205, 0.14), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 45%, #ffffff 100%);
  color: var(--pov-text);
}

.platform-overview-page main {
  overflow: hidden;
}

.platform-overview-page .pov-hero {
  position: relative;
  padding: 156px 0 70px;
  background: linear-gradient(135deg, #15095e 0%, #103ecd 62%, #0a1f6e 100%);
  color: #fff;
  overflow: hidden;
}

.platform-overview-page .pov-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  opacity: 0.55;
}

.platform-overview-page .pov-hero-grid,
.platform-overview-page .pov-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.platform-overview-page .pov-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}

.platform-overview-page .pov-shape-1 {
  width: 380px;
  height: 380px;
  top: -140px;
  left: -120px;
  background: rgba(0, 210, 255, 0.42);
}

.platform-overview-page .pov-shape-2 {
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -140px;
  background: rgba(16, 62, 205, 0.42);
}

.platform-overview-page .pov-shape-3 {
  width: 260px;
  height: 260px;
  left: 48%;
  top: 20%;
  background: rgba(255, 90, 54, 0.2);
}

.platform-overview-page .pov-breadcrumb,
.platform-overview-page .pov-breadcrumb a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
}

.platform-overview-page .pov-breadcrumb {
  margin-bottom: 18px;
}

.platform-overview-page .pov-breadcrumb span,
.platform-overview-page .pov-breadcrumb a:hover,
.platform-overview-page .pov-kicker,
.platform-overview-page .pov-tag {
  color: #00d2ff;
}

.platform-overview-page .pov-kicker,
.platform-overview-page .pov-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.platform-overview-page .pov-kicker {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.8rem;
}

.platform-overview-page .pov-title,
.platform-overview-page .pov-section-title,
.platform-overview-page .pov-cta-box h2 {
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.platform-overview-page .pov-title {
  max-width: 650px;
  margin-bottom: 20px;
  font-size: clamp(2.8rem, 7vw, 5.1rem);
}

.platform-overview-page .pov-desc,
.platform-overview-page .pov-section-desc,
.platform-overview-page .pov-module-card p,
.platform-overview-page .pov-step-card p,
.platform-overview-page .pov-cta-box p {
  line-height: 1.75;
}

.platform-overview-page .pov-desc {
  max-width: 560px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.platform-overview-page .pov-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.platform-overview-page .pov-actions-center {
  justify-content: center;
}

.platform-overview-page .pov-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.platform-overview-page .pov-btn:hover {
  transform: translateY(-3px);
}

.platform-overview-page .pov-btn-primary {
  background: linear-gradient(135deg, var(--pov-primary), var(--pov-primary-2));
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 105, 255, 0.28);
}

.platform-overview-page .pov-btn-secondary {
  background: linear-gradient(135deg, var(--pov-primary), var(--pov-primary-2));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.platform-overview-page .pov-proof-row,
.platform-overview-page .pov-strip-row,
.platform-overview-page .pov-module-grid,
.platform-overview-page .pov-metrics-grid {
  display: grid;
}

.platform-overview-page .pov-proof-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.platform-overview-page .pov-proof-pill,
.platform-overview-page .pov-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
}

.platform-overview-page .pov-proof-pill {
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.platform-overview-page .pov-platform-card,
.platform-overview-page .pov-module-card,
.platform-overview-page .pov-journey-board,
.platform-overview-page .pov-step-card,
.platform-overview-page .pov-architecture-card,
.platform-overview-page .pov-metric-card,
.platform-overview-page .pov-cta-box {
  border: 1px solid var(--pov-border);
  box-shadow: var(--pov-shadow);
}

.platform-overview-page .pov-platform-card {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #0b1324 0%, #101b32 60%, #0c162b 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.platform-overview-page .pov-platform-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.platform-overview-page .pov-platform-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.platform-overview-page .pov-platform-head strong {
  margin-left: 8px;
  color: #fff;
}

.platform-overview-page .pov-platform-head em {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.72rem;
  background: rgba(16, 185, 129, 0.14);
  color: #7dffb0;
}

.platform-overview-page .pov-platform-body {
  padding: 22px;
  color: #e1efff;
}

.platform-overview-page .pov-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.platform-overview-page .pov-layer-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.platform-overview-page .pov-layer-card small {
  display: block;
  margin-bottom: 8px;
  color: #8fcbff;
}

.platform-overview-page .pov-layer-card strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
}

.platform-overview-page .pov-layer-card span {
  color: rgba(225, 239, 255, 0.76);
  line-height: 1.7;
}

.platform-overview-page .pov-layer-card-strong {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.16), rgba(0, 210, 255, 0.14));
}

.platform-overview-page .pov-score-ring {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--pov-primary) 0deg, var(--pov-primary-2) 300deg, rgba(255, 255, 255, 0.12) 300deg);
  color: #fff;
  position: relative;
}

.platform-overview-page .pov-score-ring::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #0f1b32;
}

.platform-overview-page .pov-score-ring span,
.platform-overview-page .pov-score-ring small {
  position: relative;
  z-index: 1;
}

.platform-overview-page .pov-log-stream {
  height: 110px;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.8;
}

.platform-overview-page .pov-log-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.platform-overview-page .pov-log-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.platform-overview-page .pov-strip {
  padding: 28px 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(16, 7, 70, 0.06);
}

.platform-overview-page .pov-strip-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.platform-overview-page .pov-strip-item {
  justify-content: center;
  color: var(--pov-text);
  border: 1px solid rgba(16, 7, 70, 0.08);
  background: #f8fbff;
}

.platform-overview-page .pov-section {
  padding: 50px 0;
}

.platform-overview-page .pov-modules-section,
.platform-overview-page .pov-architecture-section {
  background: #ffffff;
}

.platform-overview-page .pov-journey-section,
.platform-overview-page .pov-metrics-section {
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 210, 255, 0.1), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(30, 111, 217, 0.08), transparent 24%),
    linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%);
}

.platform-overview-page .pov-cta-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(16, 62, 205, 0.08), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 100%);
}

.platform-overview-page .pov-section-head {
  max-width: 760px;
  margin: 0 auto 48px;
}

.platform-overview-page .pov-section-title,
.platform-overview-page .pov-cta-box h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.platform-overview-page .pov-section-desc,
.platform-overview-page .pov-module-card p,
.platform-overview-page .pov-step-card p,
.platform-overview-page .pov-board-item p,
.platform-overview-page .pov-metric-label,
.platform-overview-page .pov-cta-box p {
  color: var(--pov-text-soft);
}

.platform-overview-page .pov-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.platform-overview-page .pov-module-card,
.platform-overview-page .pov-journey-board,
.platform-overview-page .pov-step-card,
.platform-overview-page .pov-architecture-card,
.platform-overview-page .pov-metric-card,
.platform-overview-page .pov-cta-box {
  border-radius: 28px;
  background: var(--pov-surface);
}

.platform-overview-page .pov-module-card {
  padding: 28px;
}

.platform-overview-page .pov-module-card i {
  margin-bottom: 18px;
  font-size: 1.35rem;
  color: var(--pov-primary);
}

.platform-overview-page .pov-module-card h3,
.platform-overview-page .pov-step-card h3,
.platform-overview-page .pov-board-item h4 {
  margin-bottom: 12px;
  color: var(--pov-text);
}

.platform-overview-page .pov-board-head,
.platform-overview-page .pov-board-item,
.platform-overview-page .pov-arch-row {
  display: flex;
}

.platform-overview-page .pov-journey-board {
  margin-top: 28px;
  padding: 26px;
}

.platform-overview-page .pov-board-head {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.platform-overview-page .pov-board-head strong {
  color: var(--pov-text);
}

.platform-overview-page .pov-board-head span {
  color: var(--pov-text-soft);
  font-size: 0.84rem;
}

.platform-overview-page .pov-board-list {
  display: grid;
  gap: 14px;
  grid-template-rows: repeat(3, 1fr);
}

.platform-overview-page .pov-journey-list {
  display: grid;
  gap: 14px;
  grid-template-rows: repeat(4, 1fr);
}

.platform-overview-page .pov-board-item {
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 20px;
  background: #f8fbff;
}

.platform-overview-page .pov-board-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 105, 255, 0.08);
  color: var(--pov-primary);
}

.platform-overview-page .pov-step-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 24px;
}

.platform-overview-page .pov-step-card span {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(0, 105, 255, 0.08);
  color: var(--pov-primary);

}

.platform-overview-page .pov-architecture-card {
  padding: 30px;
}

.platform-overview-page .pov-arch-row {
  justify-content: space-between;
  gap: 16px;
}

.platform-overview-page .pov-arch-node {
  flex: 1;
  padding: 16px 14px;
  border-radius: 18px;
  background: #f8fbff;
  text-align: center;
  font-weight: 700;
  color: var(--pov-text);
}

.platform-overview-page .pov-arch-line {
  height: 28px;
  width: 2px;
  margin: 10px auto;
  background: linear-gradient(180deg, rgba(0, 105, 255, 0.22), rgba(0, 210, 255, 0.22));
}

.platform-overview-page .pov-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.platform-overview-page .pov-metric-card,
.platform-overview-page .pov-cta-box {
  padding: 32px;
}

.platform-overview-page .pov-metric-num {
  font-size: 2.5rem;
  color: var(--pov-text);
  line-height: 1;
}

.platform-overview-page .pov-metric-label {
  margin-top: 12px;
}

.platform-overview-page .pov-cta-box {
  text-align: center;
}

.platform-overview-page .pov-cta-box p {
  max-width: 720px;
  margin: 0 auto 28px;
}

@media (max-width: 1100px) {

  .platform-overview-page .pov-hero-grid,
  .platform-overview-page .pov-journey-grid,
  .platform-overview-page .pov-module-grid,
  .platform-overview-page .pov-metrics-grid,
  .platform-overview-page .pov-proof-row,
  .platform-overview-page .pov-strip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .platform-overview-page .pov-hero {
    padding: 136px 0 72px;
  }

  .platform-overview-page .pov-hero-grid,
  .platform-overview-page .pov-journey-grid,
  .platform-overview-page .pov-module-grid,
  .platform-overview-page .pov-metrics-grid,
  .platform-overview-page .pov-proof-row,
  .platform-overview-page .pov-strip-row,
  .platform-overview-page .pov-layer-grid {
    grid-template-columns: 1fr;
  }

  .platform-overview-page .pov-actions {
    flex-direction: column;
  }

  .platform-overview-page .pov-btn {
    width: 100%;
    justify-content: center;
  }

  .platform-overview-page .pov-module-card,
  .platform-overview-page .pov-journey-board,
  .platform-overview-page .pov-step-card,
  .platform-overview-page .pov-architecture-card,
  .platform-overview-page .pov-metric-card,
  .platform-overview-page .pov-cta-box {
    padding: 22px;
  }

  .platform-overview-page .pov-step-card {
    grid-template-columns: 1fr;
  }

  .platform-overview-page .pov-board-head,
  .platform-overview-page .pov-arch-row {
    flex-direction: column;
  }
}

/* Redesigned Platform Overview CTA Section */
.platform-overview-page .pov-cta-box {
  background: linear-gradient(135deg, #100746, #0f3ac4) !important;
  border: 1px solid rgba(0, 105, 255, 0.15) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.1) !important;
  color: #ffffff !important;
  padding: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}

.platform-overview-page .pov-cta-box::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  z-index: 0 !important;
}

.platform-overview-page .pov-cta-box::after {
  display: none !important;
}

.platform-overview-page .pov-cta-box .cta-glow {
  position: absolute !important;
  width: 600px !important;
  height: 400px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(0, 105, 255, 0.4) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.platform-overview-page .pov-cta-box .pov-tag {
  display: inline-block !important;
  color: #00bcff !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 15px !important;
  position: relative !important;
  z-index: 1 !important;
}

.platform-overview-page .pov-cta-box h2 {
  color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
}

.platform-overview-page .pov-cta-box p {
  color: rgba(255, 255, 255, 0.75) !important;
  position: relative !important;
  z-index: 1 !important;
}

.platform-overview-page .pov-cta-box .pov-actions {
  position: relative !important;
  z-index: 1 !important;
}

.platform-overview-page .pov-cta-box .pov-btn-primary {
  background: linear-gradient(135deg, #0069ff, #00d2ff) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 105, 255, 0.28) !important;
}

.platform-overview-page .pov-cta-box .pov-btn-primary:hover {
  background: linear-gradient(135deg, #0056cc, #00c4ee) !important;
  box-shadow: 0 20px 40px rgba(0, 105, 255, 0.35) !important;
}

.platform-overview-page .pov-cta-box .pov-btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

.platform-overview-page .pov-cta-box .pov-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Pricing Page */
.pricing-page {
  --prc-surface: rgba(255, 255, 255, 0.96);
  --prc-border: rgba(16, 7, 70, 0.08);
  --prc-text: #100746;
  --prc-text-soft: #60718b;
  --prc-primary: #0069ff;
  --prc-primary-2: #00d2ff;
  --prc-shadow: 0 28px 80px rgba(17, 38, 88, 0.14);
}

body.pricing-page {
  font-family: 'Roboto', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.14), transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(16, 62, 205, 0.14), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 45%, #ffffff 100%);
  color: var(--prc-text);
}

.pricing-page main {
  overflow: hidden;
}

.pricing-page .prc-hero {
  position: relative;
  padding: 156px 0 92px;
  background: linear-gradient(135deg, #15095e 0%, #103ecd 62%, #0a1f6e 100%);
  color: #fff;
  overflow: hidden;
}

.pricing-page .prc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  opacity: 0.55;
}

.pricing-page .prc-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.pricing-page .prc-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}

.pricing-page .prc-shape-1 {
  width: 380px;
  height: 380px;
  top: -140px;
  left: -120px;
  background: rgba(0, 210, 255, 0.42);
}

.pricing-page .prc-shape-2 {
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -140px;
  background: rgba(16, 62, 205, 0.42);
}

.pricing-page .prc-shape-3 {
  width: 260px;
  height: 260px;
  left: 48%;
  top: 20%;
  background: rgba(255, 90, 54, 0.2);
}

.pricing-page .prc-breadcrumb,
.pricing-page .prc-breadcrumb a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
}

.pricing-page .prc-breadcrumb {
  margin-bottom: 18px;
}

.pricing-page .prc-breadcrumb span,
.pricing-page .prc-breadcrumb a:hover,
.pricing-page .prc-kicker,
.pricing-page .prc-tag {
  color: #00d2ff;
}

.pricing-page .prc-kicker,
.pricing-page .prc-tag {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pricing-page .prc-kicker {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.8rem;
}

.pricing-page .prc-title,
.pricing-page .prc-section-title,
.pricing-page .prc-cta-box h2 {
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.pricing-page .prc-title {
  max-width: 650px;
  margin-bottom: 20px;
  font-size: clamp(2.8rem, 7vw, 5.1rem);
}

.pricing-page .prc-desc,
.pricing-page .prc-section-desc,
.pricing-page .prc-plan-desc,
.pricing-page .prc-feature-list li,
.pricing-page .prc-compare-row,
.pricing-page .prc-faq-answer p,
.pricing-page .prc-cta-box p {
  line-height: 1.75;
}

.pricing-page .prc-desc {
  max-width: 560px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.pricing-page .prc-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pricing-page .prc-actions-center {
  justify-content: center;
}

.pricing-page .prc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.pricing-page .prc-btn:hover {
  transform: translateY(-3px);
}

.pricing-page .prc-btn-primary {
  background: linear-gradient(135deg, var(--prc-primary), var(--prc-primary-2));
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 105, 255, 0.28);
}

.pricing-page .prc-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-page .prc-proof-row,
.pricing-page .prc-strip-row,
.pricing-page .prc-plan-grid,
.pricing-page .prc-metrics-grid {
  display: grid;
}

.pricing-page .prc-proof-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.pricing-page .prc-proof-pill,
.pricing-page .prc-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
}

.pricing-page .prc-proof-pill {
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.pricing-page .prc-summary-card,
.pricing-page .prc-plan-card,
.pricing-page .prc-compare-card,
.pricing-page .prc-metric-card,
.pricing-page .prc-faq-list,
.pricing-page .prc-cta-box {
  border: 1px solid var(--prc-border);
  box-shadow: var(--prc-shadow);
}

.pricing-page .prc-summary-card {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #0b1324 0%, #101b32 60%, #0c162b 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.pricing-page .prc-summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.pricing-page .prc-summary-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.pricing-page .prc-summary-head strong {
  margin-left: 8px;
  color: #fff;
}

.pricing-page .prc-summary-head em {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.72rem;
  background: rgba(16, 185, 129, 0.14);
  color: #7dffb0;
}

.pricing-page .prc-summary-body {
  padding: 22px;
  color: #e1efff;
}

.pricing-page .prc-summary-item {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

.pricing-page .prc-summary-item small {
  display: block;
  margin-bottom: 8px;
  color: #8fcbff;
}

.pricing-page .prc-summary-item strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 1.8rem;
}

.pricing-page .prc-summary-item span {
  color: rgba(225, 239, 255, 0.76);
}

.pricing-page .prc-summary-item-strong {
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.16), rgba(0, 210, 255, 0.14));
}

.pricing-page .prc-log-stream {
  min-height: 110px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.8;
}

.pricing-page .prc-log-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pricing-page .prc-log-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.pricing-page .prc-strip {
  padding: 28px 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(16, 7, 70, 0.06);
}

.pricing-page .prc-strip-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.pricing-page .prc-strip-item {
  justify-content: center;
  color: var(--prc-text);
  border: 1px solid rgba(16, 7, 70, 0.08);
  background: #f8fbff;
}

.pricing-page .prc-section {
  padding: 50px 0;
}

.pricing-page .prc-plans-section,
.pricing-page .prc-faq-section {
  background: #ffffff;
}

.pricing-page .prc-compare-section,
.pricing-page .prc-metrics-section {
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 210, 255, 0.1), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(30, 111, 217, 0.08), transparent 24%),
    linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%);
}

.pricing-page .prc-cta-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(16, 62, 205, 0.08), transparent 24%),
    linear-gradient(180deg, #edf7ff 0%, #f9fbff 100%);
}

.pricing-page .prc-section-head {
  max-width: 760px;
  margin: 0 auto 48px;
}

.pricing-page .prc-section-title,
.pricing-page .prc-cta-box h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.pricing-page .prc-section-desc,
.pricing-page .prc-plan-desc,
.pricing-page .prc-feature-list li,
.pricing-page .prc-price-sub,
.pricing-page .prc-compare-row,
.pricing-page .prc-faq-answer p,
.pricing-page .prc-metric-label,
.pricing-page .prc-cta-box p {
  color: var(--prc-text-soft);
}

.pricing-page .prc-billing-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  margin: 0 auto 28px;
  border-radius: 999px;
  background: #f3f9ff;
  border: 1px solid var(--prc-border);
}

.pricing-page .prc-billing-btn {
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--prc-text);
  font-weight: 700;
  cursor: pointer;
}

.pricing-page .prc-billing-btn span {
  margin-left: 6px;
  color: var(--prc-primary);
  font-size: 0.82rem;
}

.pricing-page .prc-billing-btn.active {
  background: linear-gradient(135deg, var(--prc-primary), var(--prc-primary-2));
  color: #fff;
}

.pricing-page .prc-billing-btn.active span {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-page .prc-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pricing-page .prc-plan-card,
.pricing-page .prc-compare-card,
.pricing-page .prc-metric-card,
.pricing-page .prc-faq-list,
.pricing-page .prc-cta-box {
  border-radius: 28px;
  background: var(--prc-surface);
}

.pricing-page .prc-plan-card {
  padding: 30px;
}

.pricing-page .prc-plan-card-featured {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  transform: translateY(-8px);
}

.pricing-page .prc-plan-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 105, 255, 0.08);
  color: var(--prc-primary);
  font-weight: 700;
}

.pricing-page .prc-plan-card h3,
.pricing-page .prc-faq-question {
  color: var(--prc-text);
}

.pricing-page .prc-price {
  margin: 14px 0 6px;
  font-size: 3rem;
  line-height: 1;
  color: var(--prc-text);
}

.pricing-page .prc-plan-desc {
  margin: 16px 0 22px;
}

.pricing-page .prc-feature-list {
  display: grid;
  gap: 12px;
}

.pricing-page .prc-feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pricing-page .prc-feature-list i {
  margin-top: 5px;
  color: var(--prc-primary);
}

.pricing-page .prc-plan-btn {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--prc-primary), var(--prc-primary-2));
  color: #fff;
  font-weight: 700;
}

.pricing-page .prc-plan-btn-outline {
  background: #f3f9ff;
  color: var(--prc-text);
}

.pricing-page .prc-compare-card {
  overflow: hidden;
}

.pricing-page .prc-compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(16, 7, 70, 0.06);
}

.pricing-page .prc-compare-row:last-child {
  border-bottom: none;
}

.pricing-page .prc-compare-head {
  background: #f8fbff;
  color: var(--prc-text);
}

.pricing-page .prc-compare-row i {
  color: var(--prc-primary);
}

.pricing-page .prc-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.pricing-page .prc-metric-card,
.pricing-page .prc-cta-box {
  padding: 32px;
}

.pricing-page .prc-metric-num {
  font-size: 2.5rem;
  color: var(--prc-text);
  line-height: 1;
}

.pricing-page .prc-metric-label {
  margin-top: 12px;
}

.pricing-page .prc-faq-list {
  overflow: hidden;
}

.pricing-page .prc-faq-item {
  border-bottom: 1px solid rgba(16, 7, 70, 0.06);
}

.pricing-page .prc-faq-item:last-child {
  border-bottom: none;
}

.pricing-page .prc-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.pricing-page .prc-faq-question i {
  transition: transform 0.25s ease;
}

.pricing-page .prc-faq-answer {
  display: none;
  padding: 0 24px 22px;
}

.pricing-page .prc-faq-item.active .prc-faq-answer {
  display: block;
}

.pricing-page .prc-faq-item.active .prc-faq-question i {
  transform: rotate(180deg);
}

.pricing-page .prc-cta-box {
  text-align: center;
}

.pricing-page .prc-cta-box p {
  max-width: 720px;
  margin: 0 auto 28px;
}

@media (max-width: 1100px) {

  .pricing-page .prc-hero-grid,
  .pricing-page .prc-plan-grid,
  .pricing-page .prc-metrics-grid,
  .pricing-page .prc-proof-row,
  .pricing-page .prc-strip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .pricing-page .prc-hero {
    padding: 136px 0 72px;
  }

  .pricing-page .prc-hero-grid,
  .pricing-page .prc-plan-grid,
  .pricing-page .prc-metrics-grid,
  .pricing-page .prc-proof-row,
  .pricing-page .prc-strip-row,
  .pricing-page .prc-compare-row {
    grid-template-columns: 1fr;
  }

  .pricing-page .prc-actions {
    flex-direction: column;
  }

  .pricing-page .prc-btn {
    width: 100%;
    justify-content: center;
  }

  .pricing-page .prc-plan-card,
  .pricing-page .prc-metric-card,
  .pricing-page .prc-cta-box {
    padding: 22px;
  }
}

/* About Page */
.about-page,
.contact-page,
.career-page {
  background:
    radial-gradient(circle at top left, rgba(30, 111, 217, 0.08), transparent 24%),
    linear-gradient(180deg, #edf5ff 0%, #ffffff 36%, #f7fbff 100%);
  color: #100746;
}

.about-hero-home,
.contact-hero-home,
.career-hero-home {
  position: relative;
  padding: 150px 0 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #15095e 0%, #1844cf 60%, #1f6cff 100%);
  color: #fff;
}

.about-hero-home::before,
.contact-hero-home::before,
.career-hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.12;
}

.about-hero-grid,
.contact-hero-grid,
.career-hero-grid,
.contact-main-grid,
.about-split-grid,
.career-split-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: stretch;
}

.about-hero-visual,
.contact-hero-visual,
.career-hero-visual {
  display: flex;
  align-items: stretch;
}

.about-hero-visual .about-story-card,
.contact-hero-visual .contact-console-card,
.career-hero-visual .career-console-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.about-shape-1,
.contact-shape-1,
.career-shape-1 {
  width: 320px;
  height: 320px;
  top: -80px;
  left: -40px;
  background: rgba(93, 224, 255, 0.25);
}

.about-shape-2,
.contact-shape-2,
.career-shape-2 {
  width: 260px;
  height: 260px;
  right: 4%;
  top: 22%;
  background: rgba(255, 255, 255, 0.14);
}

.about-shape-3,
.contact-shape-3,
.career-shape-3 {
  width: 220px;
  height: 220px;
  left: 36%;
  bottom: -70px;
  background: rgba(0, 210, 255, 0.18);
}

.about-breadcrumb,
.contact-breadcrumb,
.career-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
}

.about-breadcrumb i,
.contact-breadcrumb i,
.career-breadcrumb i {
  font-size: 0.7rem;
}

.about-kicker,
.contact-kicker,
.career-kicker,
.about-tag,
.contact-tag,
.career-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.about-title,
.contact-title,
.career-title {
  margin-top: 20px;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.about-desc,
.contact-desc,
.career-desc {
  margin-top: 22px;
  max-width: 640px;
  font-size: 1.08rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.84);
}

.about-proof-row,
.contact-proof-row,
.career-proof-row,
.about-values-grid,
.contact-channel-grid,
.career-role-grid,
.about-highlight-grid,
.career-highlight-grid,
.about-metrics-grid,
.contact-mini-metrics,
.career-metrics-grid {
  display: grid;
  gap: 18px;
}

.about-proof-row,
.contact-proof-row,
.career-proof-row {
  margin-top: 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-proof-pill,
.contact-proof-pill,
.career-proof-pill {
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.94);
}

.about-story-card,
.contact-console-card,
.career-console-card,
.contact-panel-card,
.about-highlight-card,
.about-value-card,
.career-highlight-card,
.career-role-card,
.about-metric-card,
.contact-metric-card,
.career-metric-card,
.contact-channel-card,
.about-cta-box,
.career-cta-box,
.contact-faq-list {
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(16, 7, 70, 0.08);
  box-shadow: 0 22px 54px rgba(13, 46, 121, 0.08);
}

.about-story-card,
.contact-console-card,
.career-console-card,
.contact-panel-card,
.about-cta-box,
.career-cta-box {
  padding: 30px;
}

.about-story-head,
.contact-console-head,
.career-console-head,
.contact-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: #100746;
}

.about-story-head span,
.contact-console-head span,
.career-console-head span {
  color: #5b6f92;
  font-size: 0.9rem;
}

.about-story-stats,
.contact-console-stats,
.career-console-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-console-stats div,
.career-console-stats div {
  padding: 18px;
  border-radius: 20px;
  background: #f6faff;
}

.about-story-stats div {
  padding: 10px 18px;
  border-radius: 20px;
  background: #f6faff;
}

.about-story-stats strong,
.contact-console-stats strong,
.career-console-stats strong,
.about-metric-num,
.contact-metric-card strong,
.career-metric-num {
  display: block;
  color: #100746;
  font-size: 2rem;
}

.about-story-stats span,
.contact-console-stats span,
.career-console-stats span,
.about-metric-label,
.contact-metric-card span,
.career-metric-label {
  color: #617395;
}

.about-story-log,
.contact-console-log,
.career-console-log {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  flex: 1;
  align-content: start;
}

.about-log-line,
.contact-log-line,
.career-log-line {
  opacity: 0;
  transform: translateY(10px);
  padding: 14px 16px;
  border-radius: 16px;
  background: #08142f;
  color: rgba(255, 255, 255, 0.88);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.83rem;
  transition: 0.35s ease;
}

.about-log-line.visible,
.contact-log-line.visible,
.career-log-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.about-section {
  position: relative;
  padding: 50px 0;
}

.about-section-head,
.contact-section-head,
.career-section-head {
  margin-bottom: 34px;
}

.about-section-title,
.contact-section-title,
.career-section-title,
.contact-panel-head h2,
.about-cta-box h2,
.career-cta-box h2 {
  margin-top: 0px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  /* color: #100746; */
}

.about-section-desc,
.contact-section-desc,
.career-section-desc,
.about-copy p,
.career-copy p,
.contact-panel-card p,
.about-highlight-card p,
.about-value-card p,
.career-highlight-card p,
.career-role-card p,
.contact-channel-card p,
.contact-faq-answer p,
.about-cta-box p,
.career-cta-box p {
  margin-top: 14px;
  color: #5f7194;
  line-height: 1.8;
}

.about-highlight-grid,
.career-highlight-grid,
.about-values-grid,
.contact-channel-grid,
.career-role-grid,
.about-metrics-grid,
.contact-mini-metrics,
.career-metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-values-grid,
.contact-channel-grid,
.career-role-grid,
.career-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.career-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-highlight-card,
.career-highlight-card,
.about-value-card,
.contact-channel-card,
.career-role-card,
.about-metric-card,
.contact-metric-card,
.career-metric-card {
  padding: 28px;
}

.about-highlight-card i,
.career-highlight-card i,
.contact-channel-card i {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.14), rgba(111, 211, 255, 0.22));
  color: #1e6fd9;
}

.about-highlight-card h3,
.career-highlight-card h3,
.contact-channel-card h3,
.about-value-card h3,
.career-role-card h3 {
  color: #100746;
  font-size: 1.25rem;
}

.about-mission-points {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.about-mission-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 18px;
  background: #f6faff;
  border: 1px solid rgba(16, 7, 70, 0.08);
  color: #24446f;
}

.about-mission-point i {
  margin-top: 2px;
  color: #1e6fd9;
}

.career-why-points {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.career-why-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 18px;
  background: #f6faff;
  border: 1px solid rgba(16, 7, 70, 0.08);
  color: #24446f;
}

.career-why-point i {
  margin-top: 2px;
  color: #1e6fd9;
}

.about-value-card span,
.career-role-meta span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e6fd9;
  font-weight: 700;
  margin-bottom: 18px;
}

.career-role-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.contact-main-grid {
  align-items: stretch;
}

.contact-form-wrap,
.contact-info-wrap {
  display: flex;
  flex-direction: column;
}

.contact-form-wrap .contact-panel-card,
.contact-info-wrap .contact-panel-card {
  flex: 1;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-field {
  display: grid;
  gap: 8px;
}

.contact-field label {
  color: #100746;
  font-weight: 700;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(16, 7, 70, 0.12);
  background: #f8fbff;
  color: #100746;
  font: inherit;
}

.contact-field textarea {
  resize: vertical;
}

.contact-form-actions,
.about-cta-actions,
.career-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
}

.about-btn,
.contact-btn,
.career-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
}

.about-btn-primary,
.contact-btn-primary,
.career-btn-primary {
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
}

.about-btn-secondary,
.career-btn-secondary {
  background: #eef5ff;
  color: #100746;
}

.contact-form-note {
  color: #5f7194;
}

.contact-info-list {
  display: grid;
  gap: 14px;
}

.contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 18px;
  background: #f6faff;
}

.contact-info-item i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #e9f3ff;
  color: #1e6fd9;
}

.contact-faq-list {
  overflow: hidden;
}

.contact-faq-item {
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
}

.contact-faq-item:last-child {
  border-bottom: none;
}

.contact-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: none;
  background: transparent;
  color: #100746;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.contact-faq-answer {
  display: none;
  padding: 0 24px 24px;
}

.contact-faq-item.active .contact-faq-answer {
  display: block;
}

.contact-faq-item.active .contact-faq-question i {
  transform: rotate(180deg);
}

@media (max-width: 1100px) {

  .about-hero-grid,
  .contact-hero-grid,
  .career-hero-grid,
  .contact-main-grid,
  .about-split-grid,
  .career-split-grid,
  .about-proof-row,
  .contact-proof-row,
  .career-proof-row,
  .about-values-grid,
  .contact-channel-grid,
  .career-role-grid,
  .about-highlight-grid,
  .career-highlight-grid,
  .about-metrics-grid,
  .contact-mini-metrics,
  .career-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .about-hero-home,
  .contact-hero-home,
  .career-hero-home {
    padding: 136px 0 72px;
  }

  .about-hero-grid,
  .contact-hero-grid,
  .career-hero-grid,
  .contact-main-grid,
  .about-split-grid,
  .career-split-grid,
  .about-proof-row,
  .contact-proof-row,
  .career-proof-row,
  .about-values-grid,
  .contact-channel-grid,
  .career-role-grid,
  .about-highlight-grid,
  .career-highlight-grid,
  .about-metrics-grid,
  .contact-mini-metrics,
  .career-metrics-grid,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .about-story-card,
  .contact-console-card,
  .career-console-card,
  .contact-panel-card,
  .about-highlight-card,
  .about-value-card,
  .career-highlight-card,
  .career-role-card,
  .about-metric-card,
  .contact-metric-card,
  .career-metric-card,
  .contact-channel-card,
  .about-cta-box,
  .career-cta-box {
    padding: 22px;
  }

  .about-title,
  .contact-title,
  .career-title {
    font-size: 2.9rem;
  }
}

/* Contact Page */
/* Career Page */
/* Blog Page */
body.docs-page {
  background:
    linear-gradient(180deg, #103ECD 0, #103ECD 180px, #f7f9fc 180px, #f7f9fc 100%);
  color: #100746;
}

body.blog-page {
  background:
    linear-gradient(180deg, #103ECD 0, #103ECD 180px, #f7f9fc 180px, #f7f9fc 100%);
  color: #100746;
}

body.blog-page main,
body.docs-page main {
  position: relative;
  z-index: 1;
}

.blog-page .blog-hero {
  padding: 150px 0 84px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%); */
  color: #fff;
}

.blog-page .blog-hero::after {
  content: "";
  position: absolute;
  top: 60%;
  left: 50%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(16, 62, 205, 0.4) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.blog-page .blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  z-index: 0;
  pointer-events: none;
}

.blog-page .blog-hero .container {
  position: relative;
  z-index: 3;
}

.blog-page .blog-hero .hero-shapes {
  z-index: 2;
}

.bh-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.bh-left {
  max-width: 720px;
}

.bh-kicker {
  display: inline-flex;
  margin-bottom: 16px;
  font-family: Roboto, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.bh-title {
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 0.93;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #fff;
}

.bh-title em {
  color: #00d2ff;
  font-style: normal;
}

.bh-right {
  max-width: 420px;
}

.bh-desc {
  font-size: 1.02rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 20px;
}

.blog-search {
  display: flex;
  gap: 10px;
}

.blog-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  outline: none;
}

.blog-search input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.blog-search button {
  border: none;
  border-radius: 12px;
  padding: 0 18px;
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

.blog-search button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0057d8, #00bfe8);
}

.bh-sub-count {
  margin-top: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cat-tab {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.cat-tab:hover,
.cat-tab.active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
}

.featured-section,
.grid-section,
.sidebar-layout {
  background: transparent;
}

.featured-section {
  padding: 0 0 42px;
}

.featured-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(16, 7, 70, 0.06);
  box-shadow: 0 18px 60px rgba(16, 7, 70, 0.08);
}

.fc-image {
  position: relative;
  min-height: 420px;
  background: #100746;
}

.fc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fc-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 7, 70, 0.9);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fc-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
}

.fc-cat {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e85d40;
  margin-bottom: 14px;
}

.fc-title {
  margin-bottom: 16px;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
  color: #100746;
}

.fc-excerpt {
  font-size: 1rem;
  line-height: 1.75;
  color: #4a5568;
  margin-bottom: 28px;
}

.fc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.fc-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fc-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.fc-name {
  font-weight: 700;
  color: #100746;
}

.fc-date,
.fc-read,
.pc-date,
.pc-time,
.lp-meta {
  color: #718096;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fc-read {
  margin-left: auto;
}

.read-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e85d40;
}

.grid-section {
  padding: 24px 0 54px;
}

.grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.grid-title {
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #100746;
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e85d40;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.post-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(16, 7, 70, 0.06);
  box-shadow: 0 14px 40px rgba(16, 7, 70, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 54px rgba(16, 7, 70, 0.12);
}

.pc-img {
  position: relative;
  height: 220px;
  background: #e8f0ee;
  overflow: hidden;
}

.pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-cat-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag-ai {
  background: rgba(124, 58, 237, 0.94);
  color: #fff;
}

.tag-eng {
  background: rgba(20, 184, 166, 0.94);
  color: #fff;
}

.tag-devops {
  background: rgba(232, 93, 64, 0.94);
  color: #fff;
}

.tag-perf {
  background: rgba(234, 88, 12, 0.94);
  color: #fff;
}

.tag-cloud {
  background: rgba(59, 130, 246, 0.94);
  color: #fff;
}

.tag-qa {
  background: rgba(16, 185, 129, 0.94);
  color: #fff;
}

.pc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 22px;
}

.pc-title {
  margin-bottom: 10px;
  font-size: 1.25rem;
  line-height: 1.35;
  color: #100746;
}

.pc-excerpt {
  flex: 1;
  margin-bottom: 18px;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #4a5568;
}

.pc-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 7, 70, 0.08);
}

.pc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.pc-author {
  font-size: 0.84rem;
  font-weight: 700;
  color: #100746;
}

.list-posts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.list-post {
  display: flex;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16, 7, 70, 0.06);
  box-shadow: 0 10px 30px rgba(16, 7, 70, 0.04);
}

.list-post:hover {
  transform: translateY(-2px);
}

.lp-img {
  width: 132px;
  min-width: 132px;
  height: 98px;
  border-radius: 14px;
  overflow: hidden;
  background: #e8f0ee;
}

.lp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-body {
  flex: 1;
}

.lp-cat {
  margin-bottom: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e85d40;
}

.lp-title {
  margin-bottom: 8px;
  font-size: 1.04rem;
  line-height: 1.45;
  color: #100746;
}

.lp-meta {
  display: flex;
  gap: 14px;
}

.sidebar-layout {
  padding: 0 0 72px;
}

.sl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: start;
}

.sidebar {
  display: grid;
  gap: 20px;
}

.sidebar-widget {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(16, 7, 70, 0.06);
  box-shadow: 0 12px 30px rgba(16, 7, 70, 0.04);
}

.newsletter-widget {
  background: linear-gradient(180deg, #100746, #15095e);
  color: #fff;
}

.sw-title {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
  font-size: 1.1rem;
  color: #100746;
}

.newsletter-widget .sw-title {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.nw-desc {
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

.nw-form {
  display: grid;
  gap: 10px;
}

.nw-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  outline: none;
}

.nw-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.nw-btn {
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  background: #e85d40;
  color: #fff;
  cursor: pointer;
}

.nw-count {
  margin-top: 12px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

.topics-list {
  display: grid;
  gap: 8px;
}

.topic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
}

.topic-item:last-child {
  border-bottom: none;
}

.topic-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #100746;
}

.topic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.topic-count {
  font-size: 0.68rem;
  color: #718096;
}

.pp-list {
  display: grid;
  gap: 14px;
}

.pp-item {
  display: flex;
  gap: 12px;
}

.pp-num {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: #100746;
}

.pp-title {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #100746;
}

.pp-meta {
  margin-top: 4px;
  color: #718096;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topics-strip {
  padding: 72px 0;
  background: linear-gradient(180deg, #100746, #15095e);
  color: #fff;
}

.ts-header {
  text-align: center;
  margin-bottom: 34px;
}

.ts-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.ts-title {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.05em;
}

.ts-title em {
  color: #e85d40;
  font-style: normal;
}

.topics-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.topic-card {
  padding: 18px 16px;
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tc-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.tc-name {
  font-weight: 700;
  margin-bottom: 6px;
}

.tc-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.58);
}

.newsletter-banner {
  padding: 84px 0;
  background: linear-gradient(180deg, #f7f9fc, #ffffff);
}

.nb-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 32px;
  align-items: center;
  padding: 38px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(16, 7, 70, 0.08);
  border: 1px solid rgba(16, 7, 70, 0.06);
}

.nb-left h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #100746;
  margin-bottom: 14px;
}

.nb-left h2 em {
  color: #e85d40;
  font-style: normal;
}

.nb-left p,
.nb-note {
  color: #4a5568;
  line-height: 1.7;
}

.nb-form {
  display: grid;
  gap: 12px;
}

.nb-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nb-input {
  width: 100%;
  border: 1px solid rgba(16, 7, 70, 0.12);
  background: #f8fbff;
  color: #100746;
  padding: 14px 16px;
  border-radius: 14px;
  outline: none;
}

.nb-btn {
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
  cursor: pointer;
}

.nb-note {
  font-size: 0.78rem;
  text-align: center;
}

/* Docs Page */
.docs-page {
  --docs-surface: #ffffff;
  --docs-surface-alt: #f8fafc;
  background:
    linear-gradient(180deg, #100746 0, #100746 320px, #f7f9fc 320px, #f7f9fc 100%);
}

.docs-page .docs-search-bar {
  display: none;
}

.docs-page .top-bar .container-full,
.docs-page .main-header .container-full {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

.sidebar-toggle {
  position: fixed;
  top: 118px;
  left: 18px;
  z-index: 1100;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: #100746;
  box-shadow: 0 12px 30px rgba(16, 7, 70, 0.12);
  display: none;
}

.docs-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 220px;
  gap: 0;
  min-height: 100vh;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px 0;
  gap: 24px;
}

.docs-page .docs-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 160px 0 54px;
  color: #fff;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.docs-page .docs-hero::after {
  content: "";
  position: absolute;
  top: 60%;
  left: 50%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(16, 62, 205, 0.4) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.docs-page .docs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
  z-index: 0;
  pointer-events: none;
}

.docs-page .docs-hero .container {
  position: relative;
  z-index: 3;
}

.docs-page .docs-hero .hero-shapes {
  z-index: 2;
}

.docs-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 420px);
  gap: 34px;
  align-items: end;
}

.docs-hero-copy {
  max-width: 760px;
}

.docs-kicker {
  display: inline-flex;
  margin-bottom: 16px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.docs-hero-title {
  margin: 0 0 16px;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.docs-hero-title em {
  color: #00d2ff;
  font-style: normal;
}

.docs-hero-desc {
  max-width: 620px;
  margin: 0 0 24px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
}

.docs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.docs-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
}

.docs-ghost-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.docs-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.docs-tag-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 700;
}

.docs-hero-panel {
  display: grid;
  gap: 14px;
}

.dh-card {
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

.dh-label {
  display: inline-flex;
  margin-bottom: 10px;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.dh-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.35rem;
  color: #fff;
}

.dh-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
}

.docs-sidebar {
  position: sticky;
  top: 100px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 28px 0 40px;
  background: #0f1117;
  color: rgba(255, 255, 255, 0.72);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sb-version,
.sb-section-label,
.sb-item,
.sb-group-header {
  padding-left: 20px;
  padding-right: 20px;
}

.sb-version {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.version-label,
.sb-section-label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.26);
  margin-bottom: 8px;
}

.version-select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #161920;
  color: rgba(255, 255, 255, 0.82);
  padding: 10px 12px;
}

.sb-section {
  padding-top: 20px;
}

.sb-item,
.sb-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.sb-item:hover,
.sb-group-header:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.sb-item.active {
  color: #fff;
  background: rgba(37, 99, 235, 0.18);
  border-left: 2px solid #3b82f6;
  padding-left: 18px;
}

.sb-item i,
.sb-group-header i {
  width: 14px;
  text-align: center;
  opacity: 0.7;
}

.sb-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.58rem;
}

.badge-new {
  background: rgba(59, 130, 246, 0.16);
  color: #60a5fa;
}

.badge-beta {
  background: rgba(124, 58, 237, 0.16);
  color: #c4b5fd;
}

.badge-dep {
  background: rgba(220, 38, 38, 0.16);
  color: #fca5a5;
}

.sb-group-body {
  display: none;
}

.sb-group.open .sb-group-body {
  display: block;
}

.sb-sub {
  padding-left: 20px;
}

.sb-sub .sb-item {
  padding-left: 0;
}

.docs-content {
  min-width: 0;
  max-width: 920px;
  padding: 48px 40px 48px 12px;
}

.doc-bc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 0.72rem;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.doc-bc a {
  color: #718096;
}

.doc-page-header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
}

.doc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.doc-title {
  margin-bottom: 12px;
  font-size: clamp(2.4rem, 5vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.doc-desc {
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #4a5568;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #718096;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.callout {
  display: flex;
  gap: 14px;
  margin: 24px 0;
  padding: 18px 20px;
  border-radius: 16px;
}

.callout i {
  margin-top: 3px;
}

.callout-title {
  margin-bottom: 4px;
}

.callout-body {
  line-height: 1.7;
}

.callout-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.callout-info i,
.callout-info .callout-title {
  color: #2563eb;
}

.callout-tip {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.callout-tip i,
.callout-tip .callout-title {
  color: #059669;
}

.callout-warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.callout-warn i,
.callout-warn .callout-title {
  color: #d97706;
}

.callout-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.callout-danger i,
.callout-danger .callout-title {
  color: #dc2626;
}

.doc-h2,
.doc-h3 {
  position: relative;
  scroll-margin-top: 120px;
}

.doc-h2 {
  margin: 44px 0 16px;
  font-size: 1.7rem;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #100746;
}

.doc-h3 {
  margin: 30px 0 12px;
  font-size: 1.2rem;
  color: #24324a;
}

.doc-p {
  margin-bottom: 16px;
  font-size: 1rem;
  line-height: 1.8;
  color: #4a5568;
}

.doc-ul,
.doc-ol {
  margin: 0 0 16px 20px;
  padding-left: 16px;
}

.doc-ul {
  list-style: disc;
}

.doc-ol {
  list-style: decimal;
}

.doc-ul li,
.doc-ol li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: #4a5568;
}

.doc-link {
  color: #2563eb;
  border-bottom: 1px dashed currentColor;
}

.inline-code {
  padding: 1px 6px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid rgba(16, 7, 70, 0.08);
  font-family: "Fira Code", monospace;
  font-size: 0.85em;
  color: #7c3aed;
}

.doc-divider {
  height: 1px;
  margin: 36px 0;
  background: rgba(16, 7, 70, 0.08);
}

.code-block {
  margin: 20px 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(16, 7, 70, 0.08);
  background: #0d1117;
}

.cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #161b22;
}

.cb-lang,
.cb-filename,
.cb-copy {
  font-family: "Fira Code", monospace;
  font-size: 0.68rem;
}

.cb-lang,
.cb-filename {
  color: rgba(255, 255, 255, 0.46);
  text-transform: uppercase;
}

.cb-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}

.cb-copy.copied {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.34);
}

.code-block pre {
  margin: 0;
  padding: 18px 16px;
  overflow-x: auto;
}

.code-block pre code {
  color: #e6edf3;
  font-family: "Fira Code", monospace;
  font-size: 0.84rem;
  line-height: 1.7;
}

.kw {
  color: #ff7b72;
}

.fn {
  color: #d2a8ff;
}

.str {
  color: #a5d6ff;
}

.cm {
  color: #8b949e;
  font-style: italic;
}

.num {
  color: #79c0ff;
}

.prop {
  color: #ffa657;
}

.const {
  color: #ff7b72;
}

.bool {
  color: #ff7b72;
}

.doc-tabs {
  margin: 20px 0;
}

.dt-header {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
}

.dt-tab {
  padding: 12px 20px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #718096;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.dt-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.dt-panel {
  display: none;
}

.dt-panel.active {
  display: block;
}

.doc-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 14px;
  border: 1px solid rgba(16, 7, 70, 0.08);
  background: #fff;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
}

.doc-table th,
.doc-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #718096;
  background: #f8fafc;
}

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
}

.pn-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16, 7, 70, 0.08);
  box-shadow: 0 10px 30px rgba(16, 7, 70, 0.04);
}

.pn-card.next {
  justify-content: flex-end;
  text-align: right;
}

.pn-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: #100746;
}

.pn-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #718096;
}

.pn-title {
  margin-top: 4px;
  font-weight: 700;
  color: #100746;
}

.docs-toc {
  position: sticky;
  top: 100px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 34px 18px 40px 8px;
  background: #fff;
  border-left: 1px solid rgba(16, 7, 70, 0.08);
}

.toc-title {
  margin-bottom: 18px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #718096;
}

.toc-list {
  display: grid;
  gap: 8px;
}

.toc-item {
  padding: 8px 10px;
  border-radius: 10px;
  color: #4a5568;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.toc-item.toc-h3 {
  padding-left: 18px;
  font-size: 0.92rem;
}

.toc-item:hover,
.toc-item.active {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.toc-divider {
  height: 1px;
  margin: 22px 0;
  background: rgba(16, 7, 70, 0.08);
}

.toc-feedback {
  display: grid;
  gap: 12px;
  color: #100746;
  font-weight: 700;
}

.toc-feedback-btns {
  display: flex;
  gap: 10px;
}

.tfb {
  flex: 1;
  border: 1px solid rgba(16, 7, 70, 0.08);
  background: #f8fafc;
  color: #100746;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

@media (max-width: 1240px) {
  .topics-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .docs-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    padding-left: 20px;
    padding-right: 20px;
  }

  .docs-hero-grid {
    grid-template-columns: 1fr;
  }

  .docs-toc {
    display: none;
  }
}

@media (max-width: 1024px) {
  .featured-card {
    grid-template-columns: 1fr;
  }

  .sl-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nb-inner {
    grid-template-columns: 1fr;
  }

  .docs-layout {
    grid-template-columns: 1fr;
    padding-left: 18px;
    padding-right: 18px;
  }

  .docs-hero {
    padding: 132px 0 42px;
  }

  .sidebar-toggle {
    display: inline-grid;
    place-items: center;
  }

  .docs-sidebar {
    position: fixed;
    left: -300px;
    top: 0;
    width: 280px;
    height: 100vh;
    z-index: 1090;
    transition: left 0.28s ease;
    padding-top: 100px;
  }

  .docs-sidebar.open {
    left: 0;
  }

  .docs-content {
    padding: 40px 24px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .top-bar {
    display: none;
  }

  .main-header {
    padding: 16px 0;
  }

  .main-header .container {
    gap: 14px;
  }

  .logo img {
    height: 40px;
  }

  .header-actions {
    gap: 10px;
    margin-left: auto;
  }

  .btn-book-demo {
    display: none !important;
  }

  .mobile-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
    padding: 0 !important;
  }

  .nav-links {
    padding: 84px 20px 40px;
    gap: 18px;
  }

  .nav-item {
    font-size: 1.35rem;
    letter-spacing: 1px;
  }

  .hero-title,
  .bh-title,
  .docs-hero-title,
  .about-title,
  .contact-title,
  .career-title {
    font-size: clamp(2.2rem, 10vw, 3rem);
    line-height: 1.02;
  }

  .hero-desc,
  .bh-desc,
  .docs-hero-desc,
  .about-desc,
  .contact-desc,
  .career-desc {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .featured-card,
  .sl-grid,
  .nb-inner,
  .docs-layout,
  .about-hero-grid,
  .contact-hero-grid,
  .career-hero-grid,
  .pricing-page .prc-hero-grid,
  .platform-overview-page .pov-hero-grid,
  .performance-page .perf-hero-grid,
  .ai-capabilities-page .aic-hero-grid,
  .api-enterprise-page .api-hero-grid,
  .mobile-app-testing-page .mat-hero .container {
    grid-template-columns: 1fr !important;
  }

  .posts-grid,
  .topics-cards,
  .sidebar,
  .nb-row,
  .prc-grid,
  .pov-grid,
  .aic-grid,
  .perf-grid,
  .api-grid,
  .about-values-grid,
  .contact-channel-grid,
  .career-role-grid {
    grid-template-columns: 1fr !important;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .blog-page .blog-hero {
    padding-top: 132px;
    padding-bottom: 72px;
  }

  .bh-top,
  .grid-header,
  .page-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .posts-grid,
  .topics-cards,
  .sidebar,
  .nb-row {
    grid-template-columns: 1fr;
  }

  .fc-body {
    padding: 28px 22px;
  }

  .featured-card,
  .nb-inner {
    border-radius: 22px;
  }

  .docs-content {
    padding: 32px 18px;
  }

  .page-nav {
    gap: 12px;
  }

  .pn-card {
    padding: 16px;
  }

  .docs-hero-title {
    font-size: 2.75rem;
  }
}

@media (max-width: 480px) {
  .btn-book-demo {
    display: none !important;
  }

  .nav-links {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-item {
    font-size: 1.15rem;
  }

  .mobile-menu-toggle {
    padding: 0 !important;
  }

  .logo img {
    height: 34px;
  }
}

body.banking-page .bank-hero::before,
body.ecommerce-page .ecom-hero::before,
body.healthcare-page .health-hero::before {
  content: '' !important;
  opacity: 1 !important;
}

body.ecommerce-page .ecom-hero::before {
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%) !important;
}

body.ecommerce-page .ecom-hero::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%) !important;
}

body.banking-page .hero-title,
body.banking-page .hero-desc,
body.banking-page .hero-bc,
body.banking-page .hero-bc a,
body.ecommerce-page .hero-title,
body.ecommerce-page .hero-desc,
body.ecommerce-page .hero-bc,
body.ecommerce-page .hero-bc a,
body.healthcare-page .hero-title,
body.healthcare-page .hero-desc,
body.healthcare-page .hero-bc,
body.healthcare-page .hero-bc a {
  color: #fff;
}

body.banking-page .btn-gold,
body.banking-page .btn-ghost-g,
body.ecommerce-page .btn-coral,
body.ecommerce-page .btn-lime,
body.healthcare-page .btn-teal,
body.healthcare-page .btn-outline-teal {
  border-radius: 50px;
}

body.banking-page .bank-hero .container,
body.ecommerce-page .ecom-hero .container,
body.healthcare-page .health-hero .container {
  position: relative;
  z-index: 2;
}

body.banking-page .bank-hero::before,
body.banking-page .bank-hero::after,
body.ecommerce-page .ecom-hero::before,
body.ecommerce-page .ecom-hero::after,
body.healthcare-page .health-hero::before,
body.healthcare-page .health-hero::after {
  pointer-events: none;
}

body.banking-page .bank-hero .container,
body.ecommerce-page .ecom-hero .container,
body.healthcare-page .health-hero .container {
  padding-bottom: 100px;
}

body.banking-page .stats-strip,
body.banking-page .challenges-section,
body.banking-page .conversion-section,
body.banking-page .bank-cta,
body.ecommerce-page .problem-strip,
body.ecommerce-page .features-section,
body.ecommerce-page .conversion-section,
body.ecommerce-page .peak-section,
body.ecommerce-page .testimonial-section,
body.ecommerce-page .ecom-cta,
body.healthcare-page .health-stats,
body.healthcare-page .health-challenges,
body.healthcare-page .compliance-section,
body.healthcare-page .usecases-section,
body.healthcare-page .testimonial-section,
body.healthcare-page .health-cta {
  background: #f7f9fc;
}

body.banking-page .bank-hero,
body.ecommerce-page .ecom-hero,
body.healthcare-page .health-hero {
  min-height: 100vh;
  padding: 150px 0 80px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

body.banking-page .bank-hero .container,
body.ecommerce-page .ecom-hero .container,
body.healthcare-page .health-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-bottom: 100px;
}

body.banking-page .hero-title,
body.ecommerce-page .hero-title,
body.healthcare-page .hero-title {
  margin-bottom: 24px;
  line-height: 0.95;
}

body.banking-page .hero-desc,
body.ecommerce-page .hero-desc,
body.healthcare-page .hero-desc {
  max-width: 560px;
}

body.banking-page .hero-btns,
body.ecommerce-page .hero-btns,
body.healthcare-page .hero-btns {
  margin-bottom: 32px;
}

body.banking-page .hero-bc,
body.banking-page .hero-bc a,
body.banking-page .hero-desc,
body.ecommerce-page .hero-bc,
body.ecommerce-page .hero-bc a,
body.ecommerce-page .hero-desc,
body.healthcare-page .hero-bc,
body.healthcare-page .hero-bc a,
body.healthcare-page .hero-desc {
  color: rgba(255, 255, 255, 0.82);
}

body.banking-page .hero-title,
body.ecommerce-page .hero-title,
body.healthcare-page .hero-title {
  color: #fff;
}

body.banking-page .hero-title em,
body.banking-page .hero-title .dim,
body.ecommerce-page .hero-title .coral,
body.ecommerce-page .hero-title .lime,
body.healthcare-page .hero-title em,
body.healthcare-page .hero-title .teal {
  color: #00d2ff;
}

body.banking-page .hero-tag,
body.banking-page .comp-badge,
body.healthcare-page .hipaa-badge,
body.healthcare-page .comp-pill,
body.ecommerce-page .hero-chip,
body.ecommerce-page .ht-item {}

body.banking-page .hero-tag,
body.banking-page .comp-badge,
body.healthcare-page .hipaa-badge,
body.healthcare-page .comp-pill,
body.ecommerce-page .hero-chip {
  border-radius: 999px;
}

body.banking-page .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  background: rgba(201, 148, 10, 0.12);
  border: 1px solid rgba(201, 148, 10, 0.28);
  color: #f5c842;
  padding: 8px 18px;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
}

body.banking-page .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f5c842;
  animation: tagDot 2s ease-in-out infinite;
}

body.banking-page .compliance-row,
body.healthcare-page .comp-row,
body.ecommerce-page .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.banking-page .comp-badge,
body.healthcare-page .comp-pill,
body.ecommerce-page .ht-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.banking-page .comp-badge {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.68rem;
}

body.healthcare-page .hipaa-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 24px;
  background: rgba(14, 122, 107, 0.08);
  border: 1px solid #b8d4d0;
}

body.healthcare-page .hb-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #0e7a6b;
}

body.healthcare-page .hipaa-badge span {
  color: #0e7a6b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

body.healthcare-page .comp-pill {
  padding: 6px 14px;
  background: #eaf3f1;
  border: 1px solid #d0e4e1;
  color: #0e7a6b;
  font-size: 0.66rem;
  font-weight: 700;
}



body.banking-page .vault-wrap,
body.healthcare-page .clinical-cards,
body.ecommerce-page .hero-panel {
  position: relative;
}

body.banking-page .vault-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

body.banking-page .vault-outer {
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(201, 148, 10, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: vaultSpin 30s linear infinite;
}

body.banking-page .vault-middle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(201, 148, 10, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0f1a;
  animation: vaultSpin 20s linear infinite reverse;
}

body.banking-page .vault-inner {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16202e, #1c2940);
  border: 2px solid rgba(201, 148, 10, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(201, 148, 10, 0.15);
}

body.banking-page .vault-icon {
  font-size: 2.8rem;
  color: #f5c842;
  margin-bottom: 8px;
}

body.banking-page .vault-label {
  color: #a8b8cc;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

body.banking-page .metric-float {
  position: absolute;
  background: #16202e;
  border: 1px solid rgba(168, 184, 204, 0.2);
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  z-index: 5;
}

body.banking-page .mf-1 {
  top: 10px;
  right: -40px;
}

body.banking-page .mf-2 {
  bottom: 30px;
  left: -40px;
}

body.banking-page .mf-3 {
  bottom: -10px;
  right: -20px;
}

body.banking-page .mfi {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.banking-page .mfi-g {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

body.banking-page .mfi-a {
  background: rgba(201, 148, 10, 0.12);
  color: #f5c842;
}

body.banking-page .mfi-b {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

body.banking-page .mf-val {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

body.banking-page .stats-grid,
body.healthcare-page .stats-row,
body.ecommerce-page .problem-cards,
body.ecommerce-page .feat-grid,
body.ecommerce-page .peak-grid,
body.banking-page .challenges-grid,
body.banking-page .comp-grid,
body.healthcare-page .chall-grid,
body.healthcare-page .uc-grid {
  display: grid;
  gap: 20px;
}

body.banking-page .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.healthcare-page .stats-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.banking-page .challenges-grid,
body.healthcare-page .chall-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.banking-page .comp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.healthcare-page .uc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.ecommerce-page .problem-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ecommerce-page .feat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.ecommerce-page .peak-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.banking-page .stat-cell,
body.healthcare-page .hs-cell,
body.ecommerce-page .prob-card,
body.ecommerce-page .feat-card,
body.ecommerce-page .peak-cell,
body.banking-page .ch-card,
body.banking-page .comp-card,
body.healthcare-page .chall-card,
body.healthcare-page .uc-card,
body.healthcare-page .tbm-card,
body.healthcare-page .clin-card,
body.healthcare-page .test-box,
body.ecommerce-page .test-inner {
  background: #fff;
  border: 1px solid #d0e4e1;
  border-radius: 16px;
}

body.banking-page .stat-cell,
body.healthcare-page .hs-cell {
  text-align: center;
  padding: 0 30px;
}

body.banking-page .stat-num,
body.healthcare-page .hs-num,
body.ecommerce-page .peak-num,
body.ecommerce-page .cbn-num,
body.banking-page .cs-stat-num,
body.healthcare-page .tbm-num {
  font-family: var(--font-display);
  line-height: 1;
}

body.banking-page .ch-card,
body.healthcare-page .chall-card,
body.healthcare-page .uc-card,
body.ecommerce-page .prob-card,
body.ecommerce-page .feat-card,
body.ecommerce-page .peak-cell {
  padding: 36px 28px;
}

body.healthcare-page .clin-card {
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.healthcare-page .cc-header,
body.healthcare-page .ehr-topbar,
body.ecommerce-page .hp-header,
body.ecommerce-page .hp-footer {
  display: flex;
  align-items: center;
}

body.healthcare-page .cc-header,
body.ecommerce-page .hp-header {
  gap: 12px;
  margin-bottom: 10px;
}

body.healthcare-page .cc-icon,
body.healthcare-page .cl-icon,
body.healthcare-page .chall-icon-wrap,
body.healthcare-page .uc-ic,
body.ecommerce-page .feat-ic,
body.ecommerce-page .prob-icon,
body.ecommerce-page .peak-icon,
body.ecommerce-page .hpf-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.healthcare-page .cc-icon,
body.healthcare-page .cl-icon,
body.healthcare-page .chall-icon-wrap,
body.healthcare-page .uc-ic,
body.ecommerce-page .feat-ic {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

body.healthcare-page .ehr-mock {
  background: #fff;
  border: 1px solid #d0e4e1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

body.healthcare-page .ehr-topbar {
  background: #0e7a6b;
  padding: 12px 18px;
  gap: 10px;
}

body.healthcare-page .ehr-field {
  flex: 1;
  background: #eaf3f1;
  border: 1px solid #d0e4e1;
  border-radius: 6px;
  padding: 10px 12px;
}

body.healthcare-page .ehr-test {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #eaf3f1;
}

body.ecommerce-page .hero-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

body.ecommerce-page .hp-header {
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.ecommerce-page .hp-test-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.72);
}

body.ecommerce-page .hp-footer {
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
}

body.ecommerce-page .htr-pass {
  background: #a8e535;
}

body.ecommerce-page .htr-fail {
  background: #ff5a3c;
}

body.ecommerce-page .htr-run {
  background: #febc2e;
}

body.ecommerce-page .conv-split,
body.banking-page .sol-split,
body.healthcare-page .comp-hero-split,
body.ecommerce-page .test-inner,
body.banking-page .case-inner,
body.healthcare-page .test-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

body.banking-page .dashboard-mock {
  background: #111624;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(168, 184, 204, 0.2);
}

body.banking-page .dm-bar,
body.ecommerce-page .hp-header,
body.healthcare-page .ehr-topbar {
  gap: 8px;
}

body.banking-page .dm-row,
body.ecommerce-page .conv-mini-grid,
body.ecommerce-page .tb-metrics {
  display: grid;
  gap: 14px;
}

body.banking-page .dm-row,
body.ecommerce-page .conv-mini-grid,
body.ecommerce-page .tb-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.ecommerce-page .conv-big-num,
body.ecommerce-page .test-inner {
  background: #0d0d0d;
  color: #fff;
}

body.ecommerce-page .conv-big-num {
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.ecommerce-page .cta-box,
body.banking-page .cta-box,
body.healthcare-page .hcta-box {
  border-radius: 20px;
  padding: 80px 60px;
  text-align: center;
}

body.banking-page .cta-box {
  background: linear-gradient(135deg, #16202e, #1a0d04);
  border: 1px solid rgba(201, 148, 10, 0.2);
}

body.ecommerce-page .cta-box {
  background: #0d0d0d;
  border: 1px solid rgba(168, 229, 53, 0.15);
}

body.healthcare-page .hcta-box {
  background: linear-gradient(135deg, #0d1f1c, #1a3330);
  border: 1px solid rgba(14, 122, 107, 0.2);
}

body.banking-page .cta-box h2,
body.ecommerce-page .cta-box h2,
body.healthcare-page .hcta-box h2 {
  color: #fff;
}

body.banking-page .cta-btns,
body.ecommerce-page .cta-btns,
body.healthcare-page .cta-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

@keyframes tagDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.2;
    transform: scale(0.5);
  }
}

@keyframes vaultSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes runPulse {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 1100px) {

  body.banking-page .bank-hero .container,
  body.ecommerce-page .ecom-hero .container,
  body.healthcare-page .health-hero .container,
  body.banking-page .sol-split,
  body.banking-page .case-inner,
  body.banking-page .comp-grid,
  body.healthcare-page .comp-hero-split,
  body.healthcare-page .test-box,
  body.ecommerce-page .conv-split,
  body.ecommerce-page .test-inner {
    grid-template-columns: 1fr;
  }

  body.banking-page .stats-grid,
  body.healthcare-page .stats-row,
  body.ecommerce-page .problem-cards,
  body.ecommerce-page .feat-grid,
  body.ecommerce-page .peak-grid,
  body.healthcare-page .uc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.banking-page .vault-wrap {
    order: -1;
  }
}

@media (max-width: 768px) {

  body.banking-page .bank-hero,
  body.ecommerce-page .ecom-hero,
  body.healthcare-page .health-hero {
    padding-top: 120px;
  }

  body.banking-page .stats-grid,
  body.healthcare-page .stats-row,
  body.ecommerce-page .problem-cards,
  body.ecommerce-page .feat-grid,
  body.ecommerce-page .peak-grid,
  body.healthcare-page .uc-grid,
  body.banking-page .challenges-grid,
  body.healthcare-page .chall-grid,
  body.banking-page .dm-row,
  body.ecommerce-page .conv-mini-grid,
  body.ecommerce-page .tb-metrics {
    grid-template-columns: 1fr;
  }

  body.banking-page .hero-title,
  body.ecommerce-page .hero-title,
  body.healthcare-page .hero-title {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
  }

  body.banking-page .cta-box,
  body.ecommerce-page .cta-box,
  body.healthcare-page .hcta-box {
    padding: 48px 24px;
  }
}

/* Industry Solution Pages */
body.banking-page,
body.ecommerce-page,
body.healthcare-page {
  background: linear-gradient(180deg, #100746 0, #100746 260px, #f7f9fc 260px, #f7f9fc 100%);
  color: #100746;
}

body.banking-page .bank-hero,
body.ecommerce-page .ecom-hero,
body.healthcare-page .health-hero {
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%) !important;
  color: #fff !important;
}

body.banking-page .bank-hero::before,
body.ecommerce-page .ecom-hero::before,
body.healthcare-page .health-hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%) !important;
}

body.banking-page .bank-hero::after,
body.ecommerce-page .ecom-hero::after,
body.healthcare-page .health-hero::after {
  background: radial-gradient(circle, rgba(16, 62, 205, 0.38) 0%, transparent 65%) !important;
}

body.banking-page header,
body.ecommerce-page header,
body.healthcare-page header {
  position: absolute;
  background: transparent;
  box-shadow: none;
}

body.banking-page .modern-footer-pro,
body.ecommerce-page .modern-footer-pro,
body.healthcare-page .modern-footer-pro {
  background: #fff;
  color: #100746;
}

body.banking-page .top-bar,
body.ecommerce-page .top-bar,
body.healthcare-page .top-bar {
  background: #1565c0;
}

/* Banking Page */
body.banking-page *,
body.banking-page *::before,
body.banking-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.banking-page {
  scroll-behavior: smooth;
}

body.banking-page {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--text);
  overflow-x: hidden;
}

body.banking-page a {
  text-decoration: none;
  color: inherit;
  transition: all .25s;
}

body.banking-page ul {
  list-style: none;
}

body.banking-page img {
  max-width: 100%;
  display: block;
}

body.banking-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

body.banking-page .tc {
  text-align: center;
}

/* TOP BAR */
body.banking-page .top-bar {
  background: #1565c0;
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

body.banking-page .top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.banking-page .top-bar-left,
body.banking-page .top-bar-right {
  display: flex;
  gap: 20px;
}

body.banking-page .top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .65);
}

body.banking-page .top-bar-item:hover {
  color: #fff;
}

body.banking-page .logo img {
  height: 46px;
}

body.banking-page .nav-links {
  display: flex;
  gap: 28px;
}

body.banking-page .nav-item {
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  color: #fff;
}

body.banking-page .nav-item i {
  font-size: .68rem;
}

body.banking-page .nav-item:hover {
  color: var(--gold2);
}

body.banking-page .has-mega,
body.banking-page .has-dropdown {
  position: relative;
}

body.banking-page .mega-menu,
body.banking-page .standard-dropdown {
  position: absolute;
  top: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
  color: #333;
  z-index: 1000;
}

body.banking-page .mega-menu {
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 730px;
  display: flex;
}

body.banking-page .standard-dropdown {
  left: 0;
  width: 255px;
  padding: 14px 0;
  transform: translateY(20px);
}

body.banking-page .has-mega:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

body.banking-page .has-dropdown:hover .standard-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.banking-page .standard-dropdown a {
  display: block;
  padding: 11px 24px;
  font-size: .97rem;
  font-weight: 500;
  color: #444;
}

body.banking-page .standard-dropdown a:hover {
  background: #f8faff;
  color: #0069ff;
  padding-left: 28px;
}

body.banking-page .mega-left {
  flex: 1.5;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

body.banking-page .mega-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

body.banking-page .mega-icon-bg {
  width: 46px;
  height: 46px;
  background: #f0f7ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0069ff;
  font-size: 1.2rem;
}

body.banking-page .mega-header h3 {
  font-size: 1.3rem;
  color: #100746;
  margin-bottom: 4px;
}

body.banking-page .mega-header p {
  color: #666;
  font-size: .92rem;
}

body.banking-page .mega-link-grid {
  display: flex;
  gap: 36px;
}

body.banking-page .mega-col h4 {
  font-size: .76rem;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 13px;
  letter-spacing: 1px;
}

body.banking-page .mega-col a {
  display: block;
  font-size: .93rem;
  color: #444;
  margin-bottom: 9px;
}

body.banking-page .mega-col a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

body.banking-page .mega-right {
  flex: 1;
  background: #f8faff;
  padding: 28px;
  border-left: 1px solid #eff2f6;
  max-width: 240px;
}

body.banking-page .promo-text h5 {
  font-size: 1.05rem;
  color: #100746;
  margin-bottom: 7px;
}

body.banking-page .promo-text p {
  font-size: .88rem;
  color: #666;
  margin-bottom: 14px;
  line-height: 1.5;
}

body.banking-page .promo-btn {
  display: inline-block;
  padding: 7px 14px;
  background: #100746;
  color: #fff !important;
  border-radius: 4px;
  font-size: .83rem;
  font-weight: 600;
}

body.banking-page .promo-btn:hover {
  background: #0069ff;
}

body.banking-page .header-actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

body.banking-page .btn-book-demo {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
  font-size: .93rem;
  box-shadow: 0 8px 20px rgba(0, 105, 255, .28);
  position: relative;
  overflow: hidden;
}

body.banking-page .btn-book-demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .2), transparent);
  transition: .6s;
}

body.banking-page .btn-book-demo:hover::before {
  left: 100%;
}

body.banking-page .btn-book-demo:hover {
  transform: translateY(-2px);
}

body.banking-page .mobile-menu-toggle {
  font-weight: 700;
  font-size: .83rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  color: #fff;
  padding: 8px 15px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 50px;
  display: none;
}

@media(max-width:1024px) {
  body.banking-page .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ════════ HERO ════════ */
body.banking-page .bank-hero {
  min-height: 100vh;
  padding: 150px 0 80px;
  background: var(--void);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Circuit / grid overlay */
body.banking-page .bank-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 148, 10, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 148, 10, .04) 1px, transparent 1px);
  background-size: 70px 70px;
  pointer-events: none;
}

body.banking-page .bank-hero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at 30% 40%, rgba(201, 148, 10, .1) 0%, transparent 60%);
  pointer-events: none;
}

body.banking-page .bank-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

body.banking-page .hero-bc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  color: var(--text3);
  margin-bottom: 20px;
  font-family: var(--font-mono);
}

body.banking-page .hero-bc a {
  color: var(--text3);
}

body.banking-page .hero-bc a:hover {
  color: var(--gold2);
}

body.banking-page .hero-bc i {
  font-size: .55rem;
}

body.banking-page .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.banking-page .tag-dot {
  width: 6px;
  height: 6px;
  background: var(--gold2);
  border-radius: 50%;
  animation: tagDot 2s ease-in-out infinite;
}

@keyframes tagDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .2;
    transform: scale(.5);
  }
}

body.banking-page .hero-title {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 28px;
}

body.banking-page .hero-title em {
  font-style: italic;
  color: var(--gold2);
}

body.banking-page .hero-title .dim {
  color: var(--text2);
}

body.banking-page .hero-desc {
  font-size: 1.05rem;
  color: var(--text2);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 460px;
}

body.banking-page .hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

body.banking-page .btn-gold {
  padding: 15px 38px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--void);
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 32px var(--gold-glow);
  transition: all .3s var(--ease);
  border: none;
  cursor: pointer;
}

body.banking-page .btn-gold:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(201, 148, 10, .35);
}

body.banking-page .btn-ghost-g {
  padding: 15px 38px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
}

body.banking-page .btn-ghost-g:hover {
  border-color: var(--gold);
  color: var(--gold2);
  transform: translateY(-4px);
}

/* compliance badges row */
body.banking-page .compliance-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

body.banking-page .comp-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--silver);
}

body.banking-page .comp-badge i {
  color: var(--gold2);
}

/* ════ VAULT VISUAL (right side) ════ */
body.banking-page .vault-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.banking-page .vault-outer {
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(201, 148, 10, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: vaultSpin 30s linear infinite;
}

@keyframes vaultSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

body.banking-page .vault-tick {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

body.banking-page .vault-tick:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

body.banking-page .vault-tick:nth-child(2) {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

body.banking-page .vault-tick:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

body.banking-page .vault-tick:nth-child(4) {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

body.banking-page .vault-middle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(201, 148, 10, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void2);
  animation: vaultSpin 20s linear infinite reverse;
}

body.banking-page .vault-inner {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 2px solid rgba(201, 148, 10, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(201, 148, 10, .15), inset 0 0 20px rgba(201, 148, 10, .05);
  animation: none;
}

body.banking-page .vault-icon {
  font-size: 2.8rem;
  color: var(--gold2);
  margin-bottom: 8px;
}

body.banking-page .vault-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--silver);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* floating metric cards */
body.banking-page .metric-float {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: .75rem;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  z-index: 5;
}

body.banking-page .mf-1 {
  top: 10px;
  right: -40px;
  animation: mfloat1 4s ease-in-out infinite;
}

body.banking-page .mf-2 {
  bottom: 30px;
  left: -40px;
  animation: mfloat2 3.5s ease-in-out infinite .5s;
}

body.banking-page .mf-3 {
  bottom: -10px;
  right: -20px;
  animation: mfloat1 5s ease-in-out infinite 1s;
}

@keyframes mfloat1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes mfloat2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

body.banking-page .mfi {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}

body.banking-page .mfi-g {
  background: rgba(16, 185, 129, .15);
  color: var(--green);
}

body.banking-page .mfi-a {
  background: var(--gold-lite);
  color: var(--gold2);
}

body.banking-page .mfi-b {
  background: rgba(59, 130, 246, .15);
  color: var(--blue);
}

body.banking-page .mf-val {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
}

body.banking-page .mf-lbl {
  font-size: .62rem;
  color: var(--text3);
}

/* ════ STATS STRIP ════ */
body.banking-page .stats-strip {
  padding: 50px 0;
  background: var(--void2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

body.banking-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

body.banking-page .stat-cell {
  padding: 0 40px;
  text-align: center;
  border-right: 1px solid var(--border);
}

body.banking-page .stat-cell:last-child {
  border-right: none;
}

body.banking-page .stat-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}

body.banking-page .stat-label {
  font-size: .88rem;
  color: var(--text2);
}

body.banking-page .stat-sub {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text3);
  margin-top: 3px;
}

/* ════ CHALLENGES ════ */
body.banking-page .challenges-section {
  padding: 100px 0;
  background: var(--void);
}

body.banking-page .sec-kicker {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 14px;
  display: block;
}

body.banking-page .sec-title {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -.5px;
}

body.banking-page .sec-title em {
  font-style: italic;
  color: var(--gold2);
}

body.banking-page .sec-desc {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.78;
}

body.banking-page .challenges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 60px;
  background: var(--border);
  border-radius: 12px;
  overflow: hidden;
}

body.banking-page .ch-card {
  background: var(--void2);
  padding: 44px 38px;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}

body.banking-page .ch-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}

body.banking-page .ch-card:hover::before {
  transform: scaleX(1);
}

body.banking-page .ch-card:hover {
  background: var(--surface);
}

body.banking-page .ch-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--gold-lite);
  border: 1px solid rgba(201, 148, 10, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--gold2);
  margin-bottom: 22px;
  transition: all .4s;
}

body.banking-page .ch-card:hover .ch-icon {
  background: var(--gold);
  color: var(--void);
  transform: scale(1.1);
}

body.banking-page .ch-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

body.banking-page .ch-card p {
  font-size: .93rem;
  color: var(--text2);
  line-height: 1.7;
}

/* ════ SOLUTIONS ════ */
body.banking-page .solutions-section {
  padding: 100px 0;
  background: var(--void2);
}

body.banking-page .sol-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* dashboard mockup */
body.banking-page .dashboard-mock {
  background: var(--void3);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border2);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}

body.banking-page .dm-bar {
  background: var(--surface);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

body.banking-page .dm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

body.banking-page .dm-title {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text3);
  margin-left: 10px;
}

body.banking-page .dm-body {
  padding: 20px;
}

body.banking-page .dm-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

body.banking-page .dm-card {
  flex: 1;
  background: var(--surface);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid var(--border);
}

body.banking-page .dm-card-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--text3);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

body.banking-page .dm-card-val {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

body.banking-page .val-green {
  color: var(--green);
}

body.banking-page .val-gold {
  color: var(--gold2);
}

body.banking-page .val-silver {
  color: var(--silver);
}

body.banking-page .dm-test-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

body.banking-page .dm-test {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text2);
}

body.banking-page .dm-test-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

body.banking-page .dm-test-name {
  flex: 1;
}

body.banking-page .dm-test-time {
  color: var(--text3);
  font-size: .65rem;
}

body.banking-page .dm-progress {
  margin-top: 14px;
}

body.banking-page .dm-p-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--text3);
  margin-bottom: 6px;
}

body.banking-page .dm-p-bar {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

body.banking-page .dm-p-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}

body.banking-page .sol-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.banking-page .sf-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

body.banking-page .sfi-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--gold-lite);
  border: 1px solid rgba(201, 148, 10, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--gold2);
  flex-shrink: 0;
  transition: all .3s;
}

body.banking-page .sf-item:hover .sfi-icon {
  background: var(--gold);
  color: var(--void);
}

body.banking-page .sfi-text h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

body.banking-page .sfi-text p {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.65;
}

/* ════ COMPLIANCE ════ */
body.banking-page .compliance-section {
  padding: 100px 0;
  background: var(--void);
}

body.banking-page .comp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

body.banking-page .comp-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
  transition: all .4s var(--ease);
}

body.banking-page .comp-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 20px 50px rgba(201, 148, 10, .12);
}

body.banking-page .comp-seal {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold-lite);
  border: 2px solid rgba(201, 148, 10, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--gold2);
  margin: 0 auto 20px;
}

body.banking-page .comp-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

body.banking-page .comp-card p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.65;
}

body.banking-page .comp-certified {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold2);
  margin-top: 14px;
  display: block;
}

/* ════ CASE STUDY ════ */
body.banking-page .case-section {
  padding: 100px 0;
  background: var(--void2);
  border-top: 1px solid var(--border);
}

body.banking-page .case-inner {
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border-radius: 16px;
  padding: 60px;
  border: 1px solid rgba(201, 148, 10, .15);
  position: relative;
  overflow: hidden;
}

body.banking-page .case-inner::before {
  content: '"';
  position: absolute;
  top: -40px;
  right: 40px;
  font-family: var(--font-display);
  font-size: 300px;
  color: rgba(201, 148, 10, .04);
  line-height: 1;
  pointer-events: none;
}

body.banking-page .case-tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 20px;
  display: block;
}

body.banking-page .case-quote {
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: italic;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 30px;
  max-width: 700px;
  position: relative;
  z-index: 1;
}

body.banking-page .case-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

body.banking-page .ca-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-lite);
  border: 2px solid rgba(201, 148, 10, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold2);
}

body.banking-page .ca-name {
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
}

body.banking-page .ca-role {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text3);
}

body.banking-page .case-stats {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

body.banking-page .cs-stat-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--gold2);
  line-height: 1;
  margin-bottom: 4px;
}

body.banking-page .cs-stat-label {
  font-size: .88rem;
  color: var(--text2);
}

/* ════ CTA ════ */
body.banking-page .bank-cta {
  padding: 100px 0;
  background: var(--void);
}

body.banking-page .cta-box {
  background: linear-gradient(135deg, var(--surface), #1a0d04);
  border-radius: 16px;
  padding: 80px 60px;
  text-align: center;
  border: 1px solid rgba(201, 148, 10, .2);
  position: relative;
  overflow: hidden;
}

body.banking-page .cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 148, 10, .15) 0%, transparent 55%);
  pointer-events: none;
}

body.banking-page .cta-box h2 {
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 600;
  letter-spacing: -.5px;
  color: #fff;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

body.banking-page .cta-box h2 em {
  font-style: italic;
  color: var(--gold2);
}

body.banking-page .cta-box p {
  font-size: 1.05rem;
  color: var(--text2);
  margin-bottom: 40px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.78;
  position: relative;
  z-index: 1;
}

body.banking-page .cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* FOOTER */
body.banking-page .modern-footer-pro {
  background: #fff;
  padding: 100px 0 0;
  border-top: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: var(--font-body);
}

body.banking-page .footer-inner {
  display: flex;
  gap: 100px;
}

body.banking-page .footer-brand-side {
  flex: 1.2;
}

body.banking-page .footer-logo-main {
  height: 46px;
  margin-bottom: 32px;
  filter: brightness(0);
}

body.banking-page .brand-description {
  font-size: .98rem;
  line-height: 1.7;
  color: #64748b;
  max-width: 400px;
}

body.banking-page .footer-navigation-side {
  flex: 2.8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

body.banking-page .f-title {
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 22px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 11px;
}

body.banking-page .f-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f1f5f9;
}

body.banking-page .f-list li {
  margin-bottom: 12px;
}

body.banking-page .f-list a {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  display: inline-block;
  transition: all .3s;
}

body.banking-page .f-list a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

body.banking-page .footer-bottom-bar {
  border-top: 1px solid #f1f5f9;
  padding: 36px 0;
}

body.banking-page .bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.banking-page .bottom-links-group {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: .92rem;
  color: #94a3b8;
}

body.banking-page .bottom-links-group a {
  color: inherit;
}

body.banking-page .bottom-links-group a:hover {
  color: #0069ff;
}

body.banking-page .footer-social-circles {
  display: flex;
  gap: 13px;
}

body.banking-page .social-circle {
  width: 43px;
  height: 43px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all .3s;
}

body.banking-page .social-circle:hover {
  transform: scale(1.15) translateY(-4px);
  background: #0069ff;
}

body.banking-page .floating-chat-bubble {
  position: fixed;
  bottom: 36px;
  right: 36px;
  width: 60px;
  height: 60px;
  background: var(--gold);
  color: var(--void);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 12px 30px var(--gold-glow);
  z-index: 9999;
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
}

body.banking-page .floating-chat-bubble:hover {
  transform: translateY(-8px) scale(1.1);
  background: var(--gold2);
}

body.banking-page .reveal,
body.banking-page .reveal-up,
body.banking-page .reveal-left,
body.banking-page .reveal-right {
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

body.banking-page .reveal {
  transform: translateY(40px);
}

body.banking-page .reveal-up {
  transform: translateY(60px);
}

body.banking-page .reveal-left {
  transform: translateX(-50px);
}

body.banking-page .reveal-right {
  transform: translateX(50px);
}

body.banking-page .reveal.active,
body.banking-page .reveal-up.active,
body.banking-page .reveal-left.active,
body.banking-page .reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

@media(max-width:1100px) {
  body.banking-page .bank-hero .container {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  body.banking-page .hero-desc,
  body.banking-page .hero-btns,
  body.banking-page .compliance-row {
    justify-content: center;
  }

  body.banking-page .vault-wrap {
    order: -1;
  }

  body.banking-page .sol-split {
    grid-template-columns: 1fr;
  }

  body.banking-page .challenges-grid {
    grid-template-columns: 1fr;
  }

  body.banking-page .comp-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.banking-page .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  body.banking-page .footer-inner {
    flex-direction: column;
    gap: 50px;
  }

  body.banking-page .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr);
  }

  body.banking-page .bottom-flex {
    flex-direction: column;
    gap: 20px;
  }
}

@media(max-width:768px) {
  body.banking-page .hero-title {
    font-size: 3.2rem;
  }

  body.banking-page .comp-grid {
    grid-template-columns: 1fr;
  }

  body.banking-page .case-inner {
    padding: 36px 24px;
  }

  body.banking-page .case-quote {
    font-size: 1.5rem;
  }

  body.banking-page .cta-box {
    padding: 50px 24px;
  }

  body.banking-page .cta-box h2 {
    font-size: 2.6rem;
  }

  body.banking-page .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(16, 7, 70, .98);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    z-index: 2000;
    transition: all .6s cubic-bezier(.85, 0, .15, 1);
    padding: 70px 30px;
    visibility: hidden;
    opacity: 0;
  }

  body.banking-page .nav-links.active {
    right: 0;
    visibility: visible;
    opacity: 1;
  }

  body.banking-page .nav-item {
    font-size: 1.4rem;
    color: #fff;
    text-transform: uppercase;
    display: block;
  }

  body.banking-page .mega-menu,
  body.banking-page .standard-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: none;
  }

  body.banking-page .has-mega.open .mega-menu,
  body.banking-page .has-dropdown.open .standard-dropdown {
    display: block !important;
  }

  body.banking-page .mega-menu {
    flex-direction: column;
  }

  body.banking-page .mega-left,
  body.banking-page .mega-right {
    padding: 14px;
    max-width: none;
    width: 100%;
    background: transparent;
    border: 0;
  }

  body.banking-page .mega-header h3,
  body.banking-page .promo-text h5,
  body.banking-page .mega-col h4 {
    color: #fff;
  }

  body.banking-page .mega-header p,
  body.banking-page .promo-text p,
  body.banking-page .mega-col a,
  body.banking-page .standard-dropdown a {
    color: rgba(255, 255, 255, .72);
  }

  body.banking-page .mega-link-grid {
    flex-direction: column;
    gap: 14px;
  }

  body.banking-page .top-bar-left {
    display: none;
  }

  body.banking-page .mf-1,
  body.banking-page .mf-2,
  body.banking-page .mf-3 {
    display: none;
  }
}

@media(max-width:480px) {
  body.banking-page .hero-title {
    font-size: 2.5rem;
  }

  body.banking-page .stats-grid {
    grid-template-columns: 1fr;
  }

  body.banking-page .footer-navigation-side {
    grid-template-columns: 1fr;
  }
}

/* E-Commerce Page */
body.ecommerce-page {
  --nav-bg: #100746;
  --bg: #f7f4ef;
  --bg2: #ffffff;
  --bg3: #f0ede8;
  --ink: #000000;
  --ink2: #000000;
  --slate: #475569;
  --muted: #888;
  --coral: #000000;
  --coral2: #000000;
  --coral-lite: rgba(232, 65, 42, .08);
  --lime: #a8e535;
  --lime2: #c2f54a;
  --lime-dark: #5a8a00;
  --border: #e0dbd3;
  --border2: #c8c2ba;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

body.ecommerce-page *,
body.ecommerce-page *::before,
body.ecommerce-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.ecommerce-page {
  scroll-behavior: smooth;
}

body.ecommerce-page {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

body.ecommerce-page a {
  text-decoration: none;
  color: inherit;
  transition: all .25s;
}

body.ecommerce-page ul {
  list-style: none;
}

body.ecommerce-page img {
  max-width: 100%;
  display: block;
}

body.ecommerce-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

body.ecommerce-page .tc {
  text-align: center;
}

/* TOP BAR */
body.ecommerce-page .top-bar {
  background: #1565c0;
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

body.ecommerce-page .top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.ecommerce-page .top-bar-left,
body.ecommerce-page .top-bar-right {
  display: flex;
  gap: 20px;
}

body.ecommerce-page .top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .65);
}

body.ecommerce-page .top-bar-item:hover {
  color: #fff;
}

body.ecommerce-page .logo img {
  height: 46px;
}

body.ecommerce-page .nav-links {
  display: flex;
  gap: 28px;
}

body.ecommerce-page .nav-item {
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  color: #fff;
}

body.ecommerce-page .nav-item i {
  font-size: .68rem;
}

body.ecommerce-page .nav-item:hover {
  color: var(--lime);
}

body.ecommerce-page .has-mega,
body.ecommerce-page .has-dropdown {
  position: relative;
}

body.ecommerce-page .mega-menu,
body.ecommerce-page .standard-dropdown {
  position: absolute;
  top: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
  color: #333;
  z-index: 1000;
}

body.ecommerce-page .mega-menu {
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 730px;
  display: flex;
}

body.ecommerce-page .standard-dropdown {
  left: 0;
  width: 255px;
  padding: 14px 0;
  transform: translateY(20px);
}

body.ecommerce-page .has-mega:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

body.ecommerce-page .has-dropdown:hover .standard-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.ecommerce-page .standard-dropdown a {
  display: block;
  padding: 11px 24px;
  font-size: .97rem;
  font-weight: 500;
  color: #444;
}

body.ecommerce-page .standard-dropdown a:hover {
  background: #f8faff;
  color: #0069ff;
  padding-left: 28px;
}

body.ecommerce-page .mega-left {
  flex: 1.5;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

body.ecommerce-page .mega-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

body.ecommerce-page .mega-icon-bg {
  width: 46px;
  height: 46px;
  background: #f0f7ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0069ff;
  font-size: 1.2rem;
}

body.ecommerce-page .mega-header h3 {
  font-size: 1.3rem;
  color: #100746;
  margin-bottom: 4px;
}

body.ecommerce-page .mega-header p {
  color: #666;
  font-size: .92rem;
}

body.ecommerce-page .mega-link-grid {
  display: flex;
  gap: 36px;
}

body.ecommerce-page .mega-col h4 {
  font-size: .76rem;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 13px;
  letter-spacing: 1px;
}

body.ecommerce-page .mega-col a {
  display: block;
  font-size: .93rem;
  color: #444;
  margin-bottom: 9px;
}

body.ecommerce-page .mega-col a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

body.ecommerce-page .mega-right {
  flex: 1;
  background: #f8faff;
  padding: 28px;
  border-left: 1px solid #eff2f6;
  max-width: 240px;
}

body.ecommerce-page .promo-text h5 {
  font-size: 1.05rem;
  color: #100746;
  margin-bottom: 7px;
}

body.ecommerce-page .promo-text p {
  font-size: .88rem;
  color: #666;
  margin-bottom: 14px;
  line-height: 1.5;
}

body.ecommerce-page .promo-btn {
  display: inline-block;
  padding: 7px 14px;
  background: #100746;
  color: #fff !important;
  border-radius: 4px;
  font-size: .83rem;
  font-weight: 600;
}

body.ecommerce-page .promo-btn:hover {
  background: #0069ff;
}

body.ecommerce-page .header-actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

body.ecommerce-page .btn-book-demo {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
  font-size: .93rem;
  box-shadow: 0 8px 20px rgba(0, 105, 255, .28);
  position: relative;
  overflow: hidden;
}

body.ecommerce-page .btn-book-demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .2), transparent);
  transition: .6s;
}

body.ecommerce-page .btn-book-demo:hover::before {
  left: 100%;
}

body.ecommerce-page .btn-book-demo:hover {
  transform: translateY(-2px);
}

body.ecommerce-page .mobile-menu-toggle {
  font-weight: 700;
  font-size: .83rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  color: #fff;
  padding: 8px 15px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 50px;
  display: none;
}

@media(max-width:1024px) {
  body.ecommerce-page .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ════════ HERO ════════ */
body.ecommerce-page .ecom-hero {
  padding: 150px 0 0;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* Diagonal slash */
body.ecommerce-page .ecom-hero::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 3;
}

/* dot grid */
body.ecommerce-page .ecom-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

body.ecommerce-page .ecom-hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 100px;
}

body.ecommerce-page .hero-bc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .35);
  margin-bottom: 20px;
}

body.ecommerce-page .hero-bc a {
  color: rgba(255, 255, 255, .35);
}

body.ecommerce-page .hero-bc a:hover {
  color: var(--lime);
}

body.ecommerce-page .hero-bc i {
  font-size: .55rem;
}

body.ecommerce-page .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.ecommerce-page .hero-title {
  font-family: var(--font-display);
  font-size: 5.5rem;
  line-height: .9;
  letter-spacing: -3px;
  color: #fff;
  margin-bottom: 28px;
}

body.ecommerce-page .hero-title .coral {
  color: var(--coral2);
}

body.ecommerce-page .hero-title .lime {
  color: var(--lime);
}

body.ecommerce-page .hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .62);
  line-height: 1.78;
  margin-bottom: 40px;
  max-width: 460px;
}

body.ecommerce-page .hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

body.ecommerce-page .btn-coral {
  padding: 15px 38px;
  background: var(--coral);
  color: #fff;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 32px rgba(232, 65, 42, .3);
  transition: all .3s var(--ease);
  border: none;
  cursor: pointer;
}

body.ecommerce-page .btn-coral:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(232, 65, 42, .5);
  background: var(--coral2);
}

body.ecommerce-page .btn-lime {
  padding: 15px 38px;
  background: var(--lime);
  color: var(--lime-dark);
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
  border: none;
}

body.ecommerce-page .btn-lime:hover {
  transform: translateY(-4px);
  background: var(--lime2);
  box-shadow: 0 12px 32px rgba(168, 229, 53, .3);
}

/* hero trust */
body.ecommerce-page .hero-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

body.ecommerce-page .ht-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
  font-family: var(--font-mono);
}



/* RIGHT: animated metrics panel */
body.ecommerce-page .hero-panel {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

body.ecommerce-page .hp-header {
  background: rgba(255, 255, 255, .06);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

body.ecommerce-page .hp-title {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: rgba(255, 255, 255, .35);
}

body.ecommerce-page .hp-live {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--lime);
  display: flex;
  align-items: center;
  gap: 5px;
}

body.ecommerce-page .hp-live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  animation: liveBlink 1.5s infinite;
}

@keyframes liveBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .2;
  }
}

body.ecommerce-page .hp-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

body.ecommerce-page .hp-met {
  padding: 16px 14px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .06);
}

body.ecommerce-page .hp-met:last-child {
  border-right: none;
}

body.ecommerce-page .hp-met-val {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

body.ecommerce-page .hp-met-val.c {
  color: var(--coral2);
}

body.ecommerce-page .hp-met-val.l {
  color: var(--lime);
}

body.ecommerce-page .hp-met-lbl {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: rgba(255, 255, 255, .35);
}

body.ecommerce-page .hp-tests {
  padding: 16px;
}

body.ecommerce-page .hp-test-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 4px;
  transition: background .3s;
}

body.ecommerce-page .hp-test-row:hover {
  background: rgba(255, 255, 255, .05);
}

body.ecommerce-page .htr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

body.ecommerce-page .htr-pass {
  background: var(--lime);
}

body.ecommerce-page .htr-fail {
  background: var(--coral2);
}

body.ecommerce-page .htr-run {
  background: #febc2e;
  animation: runPulse 1s ease-in-out infinite alternate;
}

@keyframes runPulse {
  from {
    opacity: .4;
  }

  to {
    opacity: 1;
  }
}

body.ecommerce-page .htr-name {
  flex: 1;
}

body.ecommerce-page .htr-time {
  color: rgba(255, 255, 255, .3);
  font-size: .65rem;
}

body.ecommerce-page .hp-footer {
  padding: 12px 16px;
  background: rgba(255, 255, 255, .03);
  display: flex;
  gap: 14px;
}

body.ecommerce-page .hpf-item {
  font-family: var(--font-mono);
  font-size: .68rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

body.ecommerce-page .hpf-pass {}

body.ecommerce-page .hpf-fail {
  color: var(--coral2);
}

body.ecommerce-page .hpf-skip {
  color: rgba(255, 255, 255, .35);
}

/* ════ PROBLEM STRIP ════ */
body.ecommerce-page .problem-strip {
  padding: 80px 0;
  background: var(--bg);
}

body.ecommerce-page .ps-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}

body.ecommerce-page .sec-kicker {
  font-size: .7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}

body.ecommerce-page .sec-title {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -1px;
}

body.ecommerce-page .sec-title .coral {
  color: var(--coral);
}

body.ecommerce-page .sec-desc {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.78;
}

body.ecommerce-page .problem-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

body.ecommerce-page .prob-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  transition: all .4s var(--ease);
}

body.ecommerce-page .prob-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .1);
  border-color: var(--coral);
}

body.ecommerce-page .prob-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
}

body.ecommerce-page .prob-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

body.ecommerce-page .prob-card p {
  font-size: .88rem;
  color: var(--slate);
  line-height: 1.65;
}

body.ecommerce-page .prob-stat {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--coral);
  background: var(--coral-lite);
  padding: 4px 12px;
  border-radius: 50px;
  margin-top: 14px;
  display: inline-block;
}

/* ════ FEATURES ════ */
body.ecommerce-page .features-section {
  padding: 100px 0;
  background: var(--bg3);
}

body.ecommerce-page .feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
  background: var(--border);
  border-radius: 16px;
  overflow: hidden;
}

body.ecommerce-page .feat-card {
  background: var(--bg2);
  padding: 44px 34px;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}

body.ecommerce-page .feat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, var(--coral-lite), transparent);
  transition: height .5s var(--ease);
}

body.ecommerce-page .feat-card:hover::after {
  height: 100%;
}

body.ecommerce-page .feat-card:hover {
  background: #fff;
}

body.ecommerce-page .feat-ic {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 22px;
  transition: all .4s;
  position: relative;
  z-index: 1;
}

body.ecommerce-page .feat-card:hover .feat-ic {
  transform: scale(1.12) rotate(-5deg);
}

body.ecommerce-page .fi-c {
  background: var(--coral-lite);
  color: var(--coral);
}

body.ecommerce-page .fi-l {
  background: rgba(168, 229, 53, .1);
  color: var(--lime-dark);
}

body.ecommerce-page .fi-b {
  background: rgba(59, 130, 246, .08);
  color: #2563eb;
}

body.ecommerce-page .fi-o {
  background: rgba(245, 158, 11, .08);
  color: #d97706;
}

body.ecommerce-page .fi-g {
  background: rgba(16, 185, 129, .08);
  color: #059669;
}

body.ecommerce-page .fi-p {
  background: rgba(124, 58, 237, .08);
  color: #7c3aed;
}

body.ecommerce-page .feat-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

body.ecommerce-page .feat-card p {
  font-size: .9rem;
  color: var(--slate);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

/* ════ CONVERSION SECTION ════ */
body.ecommerce-page .conversion-section {
  padding: 100px 0;
  background: var(--bg2);
}

body.ecommerce-page .conv-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

body.ecommerce-page .conv-visual {
  position: relative;
}

/* big number display */
body.ecommerce-page .conv-big-num {
  background: var(--ink);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}

body.ecommerce-page .conv-big-num::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168, 229, 53, .12) 0%, transparent 55%);
  pointer-events: none;
}

body.ecommerce-page .cbn-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .35);
  text-transform: uppercase;
  margin-bottom: 12px;
}

body.ecommerce-page .cbn-num {
  font-family: var(--font-display);
  font-size: 6rem;
  color: #fff;
  line-height: 1;
  letter-spacing: -3px;
}

body.ecommerce-page .cbn-num span {
  color: var(--lime);
}

body.ecommerce-page .cbn-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .5);
  margin-top: 10px;
}

body.ecommerce-page .conv-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

body.ecommerce-page .conv-mini {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

body.ecommerce-page .conv-mini-val {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lime);
  margin-bottom: 3px;
}

body.ecommerce-page .conv-mini-lbl {
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
}

/* text side */
body.ecommerce-page .conv-text .sec-title {
  font-size: 2.6rem;
}

body.ecommerce-page .conv-text .sec-desc {
  margin-bottom: 32px;
}

body.ecommerce-page .conv-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.ecommerce-page .cl-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

body.ecommerce-page .cl-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--coral-lite);
  border: 1px solid rgba(232, 65, 42, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  font-size: 1rem;
  flex-shrink: 0;
  transition: all .3s;
}

body.ecommerce-page .cl-item:hover .cl-icon {
  background: var(--coral);
  color: #fff;
}

body.ecommerce-page .cl-text h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 4px;
}

body.ecommerce-page .cl-text p {
  font-size: .88rem;
  color: var(--slate);
  line-height: 1.55;
}

/* ════ PEAK TRAFFIC ════ */
body.ecommerce-page .peak-section {
  padding: 100px 0;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

body.ecommerce-page .peak-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 60% 50%, rgba(168, 229, 53, .08) 0%, transparent 60%);
  pointer-events: none;
}

body.ecommerce-page .peak-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 60px;
}

body.ecommerce-page .peak-cell {
  padding: 44px 28px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .08);
  transition: all .4s;
}

body.ecommerce-page .peak-cell:last-child {
  border-right: none;
}

body.ecommerce-page .peak-cell:hover {
  background: rgba(168, 229, 53, .06);
}

body.ecommerce-page .peak-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}

body.ecommerce-page .peak-num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

body.ecommerce-page .peak-num span {
  color: var(--lime);
}

body.ecommerce-page .peak-label {
  font-size: .9rem;
  color: rgba(255, 255, 255, .6);
  font-weight: 500;
}

body.ecommerce-page .peak-sub {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: rgba(255, 255, 255, .3);
  margin-top: 4px;
}

/* ════ TESTIMONIAL ════ */
body.ecommerce-page .testimonial-section {
  padding: 80px 0;
  background: var(--bg);
}

body.ecommerce-page .test-inner {
  background: var(--bg2);
  border-radius: 20px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .05);
}

body.ecommerce-page .test-quote {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 28px;
  letter-spacing: -.3px;
}

body.ecommerce-page .test-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.ecommerce-page .ta-av {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

body.ecommerce-page .ta-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

body.ecommerce-page .ta-role {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
}

body.ecommerce-page .test-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.ecommerce-page .ts-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.ecommerce-page .tss-bar {
  height: 6px;
  background: var(--bg3);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

body.ecommerce-page .tss-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--coral), var(--coral2));
}

body.ecommerce-page .tss-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
}

body.ecommerce-page .tss-labels strong {
  color: var(--coral);
}

/* ════ CTA ════ */
body.ecommerce-page .ecom-cta {
  padding: 100px 0;
  background: var(--bg);
}

body.ecommerce-page .cta-box {
  background: var(--ink);
  border-radius: 20px;
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(168, 229, 53, .15);
}

body.ecommerce-page .cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168, 229, 53, .1) 0%, transparent 55%);
  pointer-events: none;
}

body.ecommerce-page .cta-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

body.ecommerce-page .cta-box h2 {
  font-family: var(--font-display);
  font-size: 4rem;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  line-height: .95;
}

body.ecommerce-page .cta-box h2 span {
  color: var(--lime);
}

body.ecommerce-page .cta-box p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 40px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.78;
  position: relative;
  z-index: 1;
}

body.ecommerce-page .cta-btns {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* FOOTER */
body.ecommerce-page .modern-footer-pro {
  background: #fff;
  padding: 100px 0 0;
  border-top: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: var(--font-body);
}

body.ecommerce-page .footer-inner {
  display: flex;
  gap: 100px;
}

body.ecommerce-page .footer-brand-side {
  flex: 1.2;
}

body.ecommerce-page .footer-logo-main {
  height: 46px;
  margin-bottom: 32px;
  filter: brightness(0);
}

body.ecommerce-page .brand-description {
  font-size: .98rem;
  line-height: 1.7;
  color: #64748b;
  max-width: 400px;
}

body.ecommerce-page .footer-navigation-side {
  flex: 2.8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

body.ecommerce-page .f-title {
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 22px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 11px;
}

body.ecommerce-page .f-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f1f5f9;
}

body.ecommerce-page .f-list li {
  margin-bottom: 12px;
}

body.ecommerce-page .f-list a {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  display: inline-block;
  transition: all .3s;
}

body.ecommerce-page .f-list a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

body.ecommerce-page .footer-bottom-bar {
  border-top: 1px solid #f1f5f9;
  padding: 36px 0;
}

body.ecommerce-page .bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.ecommerce-page .bottom-links-group {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: .92rem;
  color: #94a3b8;
}

body.ecommerce-page .bottom-links-group a {
  color: inherit;
}

body.ecommerce-page .bottom-links-group a:hover {
  color: #0069ff;
}

body.ecommerce-page .footer-social-circles {
  display: flex;
  gap: 13px;
}

body.ecommerce-page .social-circle {
  width: 43px;
  height: 43px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all .3s;
}

body.ecommerce-page .social-circle:hover {
  transform: scale(1.15) translateY(-4px);
  background: #0069ff;
}

body.ecommerce-page .floating-chat-bubble {
  position: fixed;
  bottom: 36px;
  right: 36px;
  width: 60px;
  height: 60px;
  background: var(--coral);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 12px 30px rgba(232, 65, 42, .4);
  z-index: 9999;
  transition: all .4s;
}

body.ecommerce-page .floating-chat-bubble:hover {
  transform: translateY(-8px) scale(1.1);
  background: var(--coral2);
}

body.ecommerce-page .reveal,
body.ecommerce-page .reveal-up,
body.ecommerce-page .reveal-left,
body.ecommerce-page .reveal-right {
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

body.ecommerce-page .reveal {
  transform: translateY(40px);
}

body.ecommerce-page .reveal-up {
  transform: translateY(60px);
}

body.ecommerce-page .reveal-left {
  transform: translateX(-50px);
}

body.ecommerce-page .reveal-right {
  transform: translateX(50px);
}

body.ecommerce-page .reveal.active,
body.ecommerce-page .reveal-up.active,
body.ecommerce-page .reveal-left.active,
body.ecommerce-page .reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

@media(max-width:1100px) {
  body.ecommerce-page .ecom-hero .container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
    padding-bottom: 80px;
  }

  body.ecommerce-page .hero-desc,
  body.ecommerce-page .hero-btns,
  body.ecommerce-page .hero-trust {
    justify-content: center;
  }

  body.ecommerce-page .problem-cards {
    grid-template-columns: 1fr 1fr;
  }

  body.ecommerce-page .conv-split {
    grid-template-columns: 1fr;
  }

  body.ecommerce-page .test-inner {
    grid-template-columns: 1fr;
  }

  body.ecommerce-page .peak-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.ecommerce-page .peak-cell:nth-child(2) {
    border-right: none;
  }

  body.ecommerce-page .peak-cell:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  body.ecommerce-page .peak-cell:nth-child(4) {
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  body.ecommerce-page .footer-inner {
    flex-direction: column;
    gap: 50px;
  }

  body.ecommerce-page .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr);
  }

  body.ecommerce-page .bottom-flex {
    flex-direction: column;
    gap: 20px;
  }
}

@media(max-width:768px) {
  body.ecommerce-page .hero-title {
    font-size: 3.5rem;
  }

  body.ecommerce-page .feat-grid {
    grid-template-columns: 1fr;
  }

  body.ecommerce-page .problem-cards {
    grid-template-columns: 1fr;
  }

  body.ecommerce-page .cta-box {
    padding: 50px 24px;
  }

  body.ecommerce-page .cta-box h2 {
    font-size: 2.8rem;
  }

  body.ecommerce-page .test-inner {
    padding: 36px 24px;
  }

  body.ecommerce-page .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(16, 7, 70, .98);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    z-index: 2000;
    transition: all .6s;
    padding: 70px 30px;
    visibility: hidden;
    opacity: 0;
  }

  body.ecommerce-page .nav-links.active {
    right: 0;
    visibility: visible;
    opacity: 1;
  }

  body.ecommerce-page .nav-item {
    font-size: 1.4rem;
    color: #fff;
    text-transform: uppercase;
    display: block;
  }

  body.ecommerce-page .mega-menu,
  body.ecommerce-page .standard-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: none;
  }

  body.ecommerce-page .has-mega.open .mega-menu,
  body.ecommerce-page .has-dropdown.open .standard-dropdown {
    display: block !important;
  }

  body.ecommerce-page .mega-menu {
    flex-direction: column;
  }

  body.ecommerce-page .mega-left,
  body.ecommerce-page .mega-right {
    padding: 14px;
    max-width: none;
    width: 100%;
    background: transparent;
    border: 0;
  }

  body.ecommerce-page .mega-header h3,
  body.ecommerce-page .promo-text h5,
  body.ecommerce-page .mega-col h4 {
    color: #fff;
  }

  body.ecommerce-page .mega-header p,
  body.ecommerce-page .promo-text p,
  body.ecommerce-page .mega-col a,
  body.ecommerce-page .standard-dropdown a {
    color: rgba(255, 255, 255, .72);
  }

  body.ecommerce-page .mega-link-grid {
    flex-direction: column;
    gap: 14px;
  }

  body.ecommerce-page .top-bar-left {
    display: none;
  }
}

@media(max-width:480px) {
  body.ecommerce-page .hero-title {
    font-size: 2.6rem;
  }

  body.ecommerce-page .peak-grid {
    grid-template-columns: 1fr;
  }

  body.ecommerce-page .footer-navigation-side {
    grid-template-columns: 1fr;
  }
}

/* Healthcare Page */
body.healthcare-page {
  --nav-bg: #100746;
  --bg: #f5f9f8;
  --bg2: #ffffff;
  --bg3: #eaf3f1;
  --teal: #0e7a6b;
  --teal2: #129e8c;
  --teal3: #16c4ae;
  --teal-lite: rgba(14, 122, 107, .08);
  --teal-mid: rgba(14, 122, 107, .15);
  --teal-glow: rgba(14, 122, 107, .2);
  --sky: #0ea5e9;
  --sky-lite: rgba(14, 165, 233, .08);
  --ink: #0d1f1c;
  --ink2: #1a3330;
  --slate: #3d5a57;
  --muted: #7a9490;
  --border: #d0e4e1;
  --border2: #b8d4d0;
  --warm: #f8faf9;
  --red: #ef4444;
  --green: #10b981;
  --amber: #f59e0b;
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

body.healthcare-page *,
body.healthcare-page *::before,
body.healthcare-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.healthcare-page {
  scroll-behavior: smooth;
}

body.healthcare-page {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

body.healthcare-page a {
  text-decoration: none;
  color: inherit;
  transition: all .25s;
}

body.healthcare-page ul {
  list-style: none;
}

body.healthcare-page img {
  max-width: 100%;
  display: block;
}

body.healthcare-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

body.healthcare-page .tc {
  text-align: center;
}

/* TOP BAR */
body.healthcare-page .top-bar {
  background: #1565c0;
  padding: 10px 0;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

body.healthcare-page .top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.healthcare-page .top-bar-left,
body.healthcare-page .top-bar-right {
  display: flex;
  gap: 20px;
}

body.healthcare-page .top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .65);
}

body.healthcare-page .top-bar-item:hover {
  color: #fff;
}

body.healthcare-page .logo img {
  height: 46px;
}

body.healthcare-page .nav-links {
  display: flex;
  gap: 28px;
}

body.healthcare-page .nav-item {
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  color: #fff;
}

body.healthcare-page .nav-item i {
  font-size: .68rem;
}

body.healthcare-page .nav-item:hover {
  color: var(--teal3);
}

body.healthcare-page .has-mega,
body.healthcare-page .has-dropdown {
  position: relative;
}

body.healthcare-page .mega-menu,
body.healthcare-page .standard-dropdown {
  position: absolute;
  top: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
  color: #333;
  z-index: 1000;
}

body.healthcare-page .mega-menu {
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 730px;
  display: flex;
}

body.healthcare-page .standard-dropdown {
  left: 0;
  width: 255px;
  padding: 14px 0;
  transform: translateY(20px);
}

body.healthcare-page .has-mega:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

body.healthcare-page .has-dropdown:hover .standard-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.healthcare-page .standard-dropdown a {
  display: block;
  padding: 11px 24px;
  font-size: .97rem;
  font-weight: 600;
  color: #444;
}

body.healthcare-page .standard-dropdown a:hover {
  background: #f8faff;
  color: #0069ff;
  padding-left: 28px;
}

body.healthcare-page .mega-left {
  flex: 1.5;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

body.healthcare-page .mega-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

body.healthcare-page .mega-icon-bg {
  width: 46px;
  height: 46px;
  background: #f0f7ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0069ff;
  font-size: 1.2rem;
}

body.healthcare-page .mega-header h3 {
  font-size: 1.3rem;
  color: #100746;
  margin-bottom: 4px;
}

body.healthcare-page .mega-header p {
  color: #666;
  font-size: .92rem;
}

body.healthcare-page .mega-link-grid {
  display: flex;
  gap: 36px;
}

body.healthcare-page .mega-col h4 {
  font-size: .76rem;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 13px;
  letter-spacing: 1px;
}

body.healthcare-page .mega-col a {
  display: block;
  font-size: .93rem;
  color: #444;
  margin-bottom: 9px;
}

body.healthcare-page .mega-col a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

body.healthcare-page .mega-right {
  flex: 1;
  background: #f8faff;
  padding: 28px;
  border-left: 1px solid #eff2f6;
  max-width: 240px;
}

body.healthcare-page .promo-text h5 {
  font-size: 1.05rem;
  color: #100746;
  margin-bottom: 7px;
}

body.healthcare-page .promo-text p {
  font-size: .88rem;
  color: #666;
  margin-bottom: 14px;
  line-height: 1.5;
}

body.healthcare-page .promo-btn {
  display: inline-block;
  padding: 7px 14px;
  background: #100746;
  color: #fff !important;
  border-radius: 4px;
  font-size: .83rem;
  font-weight: 600;
}

body.healthcare-page .promo-btn:hover {
  background: #0069ff;
}

body.healthcare-page .header-actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

body.healthcare-page .btn-book-demo {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
  font-size: .93rem;
  box-shadow: 0 8px 20px rgba(0, 105, 255, .28);
  position: relative;
  overflow: hidden;
}

body.healthcare-page .btn-book-demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .2), transparent);
  transition: .6s;
}

body.healthcare-page .btn-book-demo:hover::before {
  left: 100%;
}

body.healthcare-page .btn-book-demo:hover {
  transform: translateY(-2px);
}

body.healthcare-page .mobile-menu-toggle {
  font-weight: 700;
  font-size: .83rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  color: #fff;
  padding: 8px 15px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 50px;
  display: none;
}

@media(max-width:1024px) {
  body.healthcare-page .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ════════ HERO ════════ */
body.healthcare-page .health-hero {
  padding: 150px 0 80px;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

/* subtle crosshatch */
body.healthcare-page .health-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14, 122, 107, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 122, 107, .03) 1px, transparent 1px);
  background-size: 48px 48px;
}

body.healthcare-page .health-hero::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 60%;
  height: 120%;
  background: linear-gradient(135deg, var(--bg3), var(--bg));
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

body.healthcare-page .health-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

body.healthcare-page .hero-bc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 20px;
  font-family: var(--font-mono);
}

body.healthcare-page .hero-bc a {
  color: var(--muted);
}

body.healthcare-page .hero-bc a:hover {
  color: var(--teal);
}

body.healthcare-page .hero-bc i {
  font-size: .55rem;
}

body.healthcare-page .hipaa-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--teal-lite);
  border: 1px solid var(--border2);
  border-radius: 50px;
  padding: 9px 20px;
  margin-bottom: 24px;
}

body.healthcare-page .hipaa-badge .hb-icon {
  width: 30px;
  height: 30px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .9rem;
}

body.healthcare-page .hipaa-badge span {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .5px;
}

body.healthcare-page .hero-title {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin-bottom: 24px;
}

body.healthcare-page .hero-title .teal {
  color: var(--teal);
}

body.healthcare-page .hero-title em {
  font-style: italic;
  color: var(--teal2);
}

body.healthcare-page .hero-desc {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 460px;
}

body.healthcare-page .hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

body.healthcare-page .btn-teal {
  padding: 14px 36px;
  background: var(--teal);
  color: #fff;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 10px 28px var(--teal-glow);
  transition: all .3s var(--ease);
  border: none;
  cursor: pointer;
}

body.healthcare-page .btn-teal:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(14, 122, 107, .35);
  background: var(--teal2);
}

body.healthcare-page .btn-outline-teal {
  padding: 14px 36px;
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--border2);
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
}

body.healthcare-page .btn-outline-teal:hover {
  border-color: var(--teal);
  background: var(--teal-lite);
  transform: translateY(-4px);
}

/* compliance mini badges */
body.healthcare-page .comp-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.healthcare-page .comp-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--teal);
  font-weight: 600;
}

body.healthcare-page .comp-pill i {
  font-size: .75rem;
}

/* RIGHT: clinical card visual */
body.healthcare-page .clinical-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.healthcare-page .clin-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
  transition: all .4s var(--ease);
}

body.healthcare-page .clin-card:hover {
  transform: translateX(-6px);
  border-color: var(--teal);
  box-shadow: 0 12px 40px rgba(14, 122, 107, .12);
}

body.healthcare-page .cc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

body.healthcare-page .cc-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

body.healthcare-page .cc-i-t {
  background: var(--teal-lite);
  color: var(--teal);
}

body.healthcare-page .cc-i-s {
  background: var(--sky-lite);
  color: var(--sky);
}

body.healthcare-page .cc-i-g {
  background: rgba(16, 185, 129, .1);
  color: var(--green);
}

body.healthcare-page .cc-i-a {
  background: rgba(245, 158, 11, .1);
  color: var(--amber);
}

body.healthcare-page .cc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  color: var(--ink);
}

body.healthcare-page .cc-tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 3px;
}

body.healthcare-page .cc-pass {
  background: rgba(16, 185, 129, .1);
  color: var(--green);
}

body.healthcare-page .cc-warn {
  background: rgba(245, 158, 11, .1);
  color: var(--amber);
}

body.healthcare-page .cc-body {
  font-size: .85rem;
  color: var(--slate);
  line-height: 1.6;
}

body.healthcare-page .cc-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

body.healthcare-page .cc-p-bar {
  flex: 1;
  height: 4px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
}

body.healthcare-page .cc-p-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--teal);
}

body.healthcare-page .cc-p-pct {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--teal);
  font-weight: 600;
}

/* ════ STATS ════ */
body.healthcare-page .health-stats {
  padding: 60px 0;
  background: var(--teal);
  position: relative;
  overflow: hidden;
}

body.healthcare-page .health-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 30px 30px;
}

body.healthcare-page .health-stats .container {
  position: relative;
  z-index: 1;
}

body.healthcare-page .stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

body.healthcare-page .hs-cell {
  text-align: center;
  padding: 0 30px;
  border-right: 1px solid rgba(255, 255, 255, .15);
}

body.healthcare-page .hs-cell:last-child {
  border-right: none;
}

body.healthcare-page .hs-num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}

body.healthcare-page .hs-label {
  font-size: .88rem;
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
}

body.healthcare-page .hs-sub {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: rgba(255, 255, 255, .5);
  margin-top: 3px;
}

/* ════ CHALLENGES ════ */
body.healthcare-page .health-challenges {
  padding: 100px 0;
  background: var(--bg);
}

body.healthcare-page .sec-kicker {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  display: block;
}

body.healthcare-page .sec-title {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -.5px;
}

body.healthcare-page .sec-title .teal {
  color: var(--teal);
}

body.healthcare-page .sec-desc {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.78;
}

body.healthcare-page .chall-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 60px;
}

body.healthcare-page .chall-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  transition: all .4s var(--ease);
}

body.healthcare-page .chall-card:hover {
  border-color: var(--teal);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(14, 122, 107, .1);
}

body.healthcare-page .chall-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 22px;
  transition: all .4s;
}

body.healthcare-page .chall-card:hover .chall-icon-wrap {
  transform: scale(1.1) rotate(-5deg);
}

body.healthcare-page .ci-t {
  background: var(--teal-lite);
  color: var(--teal);
}

body.healthcare-page .ci-s {
  background: var(--sky-lite);
  color: var(--sky);
}

body.healthcare-page .ci-g {
  background: rgba(16, 185, 129, .08);
  color: var(--green);
}

body.healthcare-page .ci-a {
  background: rgba(245, 158, 11, .08);
  color: var(--amber);
}

body.healthcare-page .chall-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

body.healthcare-page .chall-card p {
  font-size: .92rem;
  color: var(--slate);
  line-height: 1.7;
}

/* ════ COMPLIANCE ════ */
body.healthcare-page .compliance-section {
  padding: 100px 0;
  background: var(--bg3);
}

body.healthcare-page .comp-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* EHR mockup */
body.healthcare-page .ehr-mock {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

body.healthcare-page .ehr-topbar {
  background: var(--teal);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.healthcare-page .ehr-topbar .etb-icon {
  color: rgba(255, 255, 255, .8);
  font-size: .95rem;
}

body.healthcare-page .ehr-topbar .etb-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(255, 255, 255, .9);
}

body.healthcare-page .ehr-topbar .etb-badge {
  margin-left: auto;
  background: rgba(255, 255, 255, .2);
  border-radius: 4px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: #fff;
}

body.healthcare-page .ehr-body {
  padding: 20px;
}

body.healthcare-page .ehr-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

body.healthcare-page .ehr-field {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}

body.healthcare-page .ehr-field-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--muted);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

body.healthcare-page .ehr-field-val {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
}

body.healthcare-page .ehr-masked {
  font-family: var(--font-mono);
  letter-spacing: 2px;
  color: var(--muted);
}

body.healthcare-page .ehr-tests {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.healthcare-page .ehr-test {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg3);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--slate);
}

body.healthcare-page .et-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

body.healthcare-page .et-pass {
  background: var(--green);
}

body.healthcare-page .et-name {
  flex: 1;
}

body.healthcare-page .et-hipaa {
  font-size: .6rem;
  background: var(--teal-lite);
  color: var(--teal);
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
}

body.healthcare-page .comp-text .sec-title {
  font-size: 2.4rem;
}

body.healthcare-page .comp-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}

body.healthcare-page .cl-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

body.healthcare-page .cl-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--teal-lite);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all .3s;
}

body.healthcare-page .cl-item:hover .cl-icon {
  background: var(--teal);
  color: #fff;
}

body.healthcare-page .cl-text h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 4px;
}

body.healthcare-page .cl-text p {
  font-size: .88rem;
  color: var(--slate);
  line-height: 1.6;
}

/* ════ USE CASES ════ */
body.healthcare-page .usecases-section {
  padding: 100px 0;
  background: var(--bg2);
}

body.healthcare-page .uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
  background: var(--border);
  border-radius: 16px;
  overflow: hidden;
}

body.healthcare-page .uc-card {
  background: var(--bg2);
  padding: 40px 32px;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}

body.healthcare-page .uc-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, var(--teal-lite), transparent);
  transition: height .5s var(--ease);
}

body.healthcare-page .uc-card:hover::after {
  height: 100%;
}

body.healthcare-page .uc-card:hover {
  background: var(--warm);
}

body.healthcare-page .uc-ic {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 20px;
  transition: all .4s;
  position: relative;
  z-index: 1;
}

body.healthcare-page .uci-t {
  background: var(--teal-lite);
  color: var(--teal);
}

body.healthcare-page .uci-s {
  background: var(--sky-lite);
  color: var(--sky);
}

body.healthcare-page .uci-g {
  background: rgba(16, 185, 129, .08);
  color: var(--green);
}

body.healthcare-page .uci-a {
  background: rgba(245, 158, 11, .08);
  color: var(--amber);
}

body.healthcare-page .uci-p {
  background: rgba(124, 58, 237, .06);
  color: #7c3aed;
}

body.healthcare-page .uci-r {
  background: rgba(239, 68, 68, .06);
  color: var(--red);
}

body.healthcare-page .uc-card:hover .uc-ic {
  transform: scale(1.1) rotate(-5deg);
}

body.healthcare-page .uc-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

body.healthcare-page .uc-card p {
  font-size: .9rem;
  color: var(--slate);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

body.healthcare-page .uc-tag {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  padding: 3px 10px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

body.healthcare-page .ut-h {
  background: var(--teal-lite);
  color: var(--teal);
}

body.healthcare-page .ut-f {
  background: rgba(239, 68, 68, .08);
  color: var(--red);
}

/* ════ TESTIMONIAL ════ */
body.healthcare-page .testimonial-section {
  padding: 80px 0;
  background: var(--bg3);
  border-top: 1px solid var(--border);
}

body.healthcare-page .test-box {
  background: var(--bg2);
  border-radius: 20px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .04);
}

body.healthcare-page .tb-left {}

body.healthcare-page .tb-cross {
  width: 50px;
  height: 50px;
  background: var(--teal);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 24px;
}

body.healthcare-page .tb-quote {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 28px;
  font-style: italic;
}

body.healthcare-page .tb-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.healthcare-page .tba-av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

body.healthcare-page .tba-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}

body.healthcare-page .tba-role {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
}

body.healthcare-page .tb-right {}

body.healthcare-page .tb-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body.healthcare-page .tbm-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  transition: all .3s;
}

body.healthcare-page .tbm-card:hover {
  border-color: var(--teal);
  background: var(--bg2);
}

body.healthcare-page .tbm-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 6px;
}

body.healthcare-page .tbm-label {
  font-size: .82rem;
  color: var(--slate);
  font-weight: 600;
}

/* ════ CTA ════ */
body.healthcare-page .health-cta {
  padding: 100px 0;
  background: var(--bg2);
}

body.healthcare-page .hcta-box {
  background: linear-gradient(135deg, var(--ink), var(--ink2));
  border-radius: 20px;
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(14, 122, 107, .2);
}

body.healthcare-page .hcta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(14, 122, 107, .18) 0%, transparent 55%);
  pointer-events: none;
}

body.healthcare-page .hcta-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(14, 122, 107, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 122, 107, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

body.healthcare-page .hcta-box h2 {
  font-family: var(--font-display);
  font-size: 3.5rem;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

body.healthcare-page .hcta-box h2 .teal {
  color: var(--teal3);
}

body.healthcare-page .hcta-box p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 40px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.78;
  position: relative;
  z-index: 1;
}

body.healthcare-page .cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

body.healthcare-page .btn-ghost-t {
  padding: 14px 36px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
}

body.healthcare-page .btn-ghost-t:hover {
  border-color: var(--teal3);
  color: var(--teal3);
  transform: translateY(-4px);
}

/* FOOTER */
body.healthcare-page .modern-footer-pro {
  background: #fff;
  padding: 100px 0 0;
  border-top: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: var(--font-body);
}

body.healthcare-page .footer-inner {
  display: flex;
  gap: 100px;
}

body.healthcare-page .footer-brand-side {
  flex: 1.2;
}

body.healthcare-page .footer-logo-main {
  height: 46px;
  margin-bottom: 32px;
  filter: brightness(0);
}

body.healthcare-page .brand-description {
  font-size: .98rem;
  line-height: 1.7;
  color: #64748b;
  max-width: 400px;
}

body.healthcare-page .footer-navigation-side {
  flex: 2.8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

body.healthcare-page .f-title {
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 22px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 11px;
}

body.healthcare-page .f-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f1f5f9;
}

body.healthcare-page .f-list li {
  margin-bottom: 12px;
}

body.healthcare-page .f-list a {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  display: inline-block;
  transition: all .3s;
}

body.healthcare-page .f-list a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

body.healthcare-page .footer-bottom-bar {
  border-top: 1px solid #f1f5f9;
  padding: 36px 0;
}

body.healthcare-page .bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.healthcare-page .bottom-links-group {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: .92rem;
  color: #94a3b8;
}

body.healthcare-page .bottom-links-group a {
  color: inherit;
}

body.healthcare-page .bottom-links-group a:hover {
  color: #0069ff;
}

body.healthcare-page .footer-social-circles {
  display: flex;
  gap: 13px;
}

body.healthcare-page .social-circle {
  width: 43px;
  height: 43px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all .3s;
}

body.healthcare-page .social-circle:hover {
  transform: scale(1.15) translateY(-4px);
  background: #0069ff;
}

body.healthcare-page .floating-chat-bubble {
  position: fixed;
  bottom: 36px;
  right: 36px;
  width: 60px;
  height: 60px;
  background: var(--teal);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 12px 30px var(--teal-glow);
  z-index: 9999;
  transition: all .4s;
}

body.healthcare-page .floating-chat-bubble:hover {
  transform: translateY(-8px) scale(1.1);
  background: var(--teal2);
}

body.healthcare-page .reveal,
body.healthcare-page .reveal-up,
body.healthcare-page .reveal-left,
body.healthcare-page .reveal-right {
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

body.healthcare-page .reveal {
  transform: translateY(40px);
}

body.healthcare-page .reveal-up {
  transform: translateY(60px);
}

body.healthcare-page .reveal-left {
  transform: translateX(-50px);
}

body.healthcare-page .reveal-right {
  transform: translateX(50px);
}

body.healthcare-page .reveal.active,
body.healthcare-page .reveal-up.active,
body.healthcare-page .reveal-left.active,
body.healthcare-page .reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

@media(max-width:1100px) {
  body.healthcare-page .health-hero .container {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  body.healthcare-page .health-hero::after {
    display: none;
  }

  body.healthcare-page .hero-desc,
  body.healthcare-page .hero-btns,
  body.healthcare-page .comp-row {
    justify-content: center;
  }

  body.healthcare-page .clinical-cards {
    max-width: 600px;
    margin: 0 auto;
  }

  body.healthcare-page .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  body.healthcare-page .hs-cell:nth-child(2) {
    border-right: none;
  }

  body.healthcare-page .hs-cell:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .15);
  }

  body.healthcare-page .hs-cell:nth-child(4) {
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, .15);
  }

  body.healthcare-page .chall-grid {
    grid-template-columns: 1fr;
  }

  body.healthcare-page .comp-hero-split {
    grid-template-columns: 1fr;
  }

  body.healthcare-page .uc-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.healthcare-page .test-box {
    grid-template-columns: 1fr;
  }

  body.healthcare-page .footer-inner {
    flex-direction: column;
    gap: 50px;
  }

  body.healthcare-page .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr);
  }

  body.healthcare-page .bottom-flex {
    flex-direction: column;
    gap: 20px;
  }
}

@media(max-width:768px) {
  body.healthcare-page .hero-title {
    font-size: 3rem;
  }

  body.healthcare-page .uc-grid {
    grid-template-columns: 1fr;
  }

  body.healthcare-page .tb-metrics {
    grid-template-columns: 1fr;
  }

  body.healthcare-page .hcta-box {
    padding: 50px 24px;
  }

  body.healthcare-page .hcta-box h2 {
    font-size: 2.4rem;
  }

  body.healthcare-page .test-box {
    padding: 36px 24px;
  }

  body.healthcare-page .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(16, 7, 70, .98);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    z-index: 2000;
    transition: all .6s;
    padding: 70px 30px;
    visibility: hidden;
    opacity: 0;
  }

  body.healthcare-page .nav-links.active {
    right: 0;
    visibility: visible;
    opacity: 1;
  }

  body.healthcare-page .nav-item {
    font-size: 1.4rem;
    color: #fff;
    text-transform: uppercase;
    display: block;
  }

  body.healthcare-page .mega-menu,
  body.healthcare-page .standard-dropdown {
    position: static;
    width: 100%;
    max-width: none;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: none;
  }

  body.healthcare-page .has-mega.open .mega-menu,
  body.healthcare-page .has-dropdown.open .standard-dropdown {
    display: block !important;
  }

  body.healthcare-page .mega-menu {
    flex-direction: column;
  }

  body.healthcare-page .mega-left,
  body.healthcare-page .mega-right {
    padding: 14px;
    max-width: none;
    width: 100%;
    background: transparent;
    border: 0;
  }

  body.healthcare-page .mega-header h3,
  body.healthcare-page .promo-text h5,
  body.healthcare-page .mega-col h4 {
    color: #fff;
  }

  body.healthcare-page .mega-header p,
  body.healthcare-page .promo-text p,
  body.healthcare-page .mega-col a,
  body.healthcare-page .standard-dropdown a {
    color: rgba(255, 255, 255, .72);
  }

  body.healthcare-page .mega-link-grid {
    flex-direction: column;
    gap: 14px;
  }

  body.healthcare-page .top-bar-left {
    display: none;
  }
}

@media(max-width:480px) {
  body.healthcare-page .hero-title {
    font-size: 2.4rem;
  }

  body.healthcare-page .footer-navigation-side {
    grid-template-columns: 1fr;
  }

  body.healthcare-page .stats-row {
    grid-template-columns: 1fr;
  }

  body.healthcare-page .hs-cell {
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding: 20px 0;
  }

  body.healthcare-page .hs-cell:first-child {
    border-top: none;
  }
}

@keyframes healProgress {
  from {
    width: 65%;
  }

  to {
    width: 90%;
  }
}

/* Industry Pages - homepage style correction */
body.banking-page,
body.ecommerce-page,
body.healthcare-page {
  background:
    radial-gradient(circle at top left, rgba(0, 210, 255, 0.12), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(30, 111, 217, 0.12), transparent 22%),
    linear-gradient(180deg, #eef6ff 0%, #ffffff 34%, #f7fbff 100%);
}

body.banking-page,
body.ecommerce-page,
body.healthcare-page {
  --industry-primary: #1e6fd9;
  --industry-primary-2: #00d2ff;
  --industry-text: #100746;
  --industry-text-soft: #50627d;
  --industry-border: rgba(16, 7, 70, 0.08);
  --industry-surface: rgba(255, 255, 255, 0.96);
  --industry-shadow: 0 20px 54px rgba(18, 38, 87, 0.1);
}

body.banking-page .bank-hero,
body.ecommerce-page .ecom-hero,
body.healthcare-page .health-hero {
  min-height: auto;
  padding: 156px 0 104px;
  background:
    radial-gradient(circle at 15% 18%, rgba(0, 210, 255, 0.18), transparent 20%),
    radial-gradient(circle at 82% 24%, rgba(51, 130, 255, 0.22), transparent 24%),
    linear-gradient(135deg, #140a57 0%, #173eb8 54%, #0a6cf3 100%) !important;
  position: relative;
  overflow: hidden;
}

body.banking-page .bank-hero::before,
body.ecommerce-page .ecom-hero::before,
body.healthcare-page .health-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  mask-image: none !important;
  clip-path: none !important;
  z-index: 0;
}

body.banking-page .bank-hero::after,
body.ecommerce-page .ecom-hero::after,
body.healthcare-page .health-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 210, 255, 0.16), transparent 22%),
    radial-gradient(circle at 85% 78%, rgba(0, 210, 255, 0.14), transparent 24%);
  z-index: 0;
}

body.banking-page .bank-hero .container,
body.ecommerce-page .ecom-hero .container,
body.healthcare-page .health-hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 64px;
  align-items: center;
  padding-bottom: 0;
}

body.banking-page .hero-bc,
body.banking-page .hero-bc a,
body.banking-page .hero-desc,
body.ecommerce-page .hero-bc,
body.ecommerce-page .hero-bc a,
body.ecommerce-page .hero-desc,
body.healthcare-page .hero-bc,
body.healthcare-page .hero-bc a,
body.healthcare-page .hero-desc {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.banking-page .hero-title,
body.ecommerce-page .hero-title,
body.healthcare-page .hero-title {
  color: #ffffff !important;
  text-shadow: 0 18px 48px rgba(9, 18, 64, 0.24);
}

body.banking-page .hero-title em,
body.banking-page .hero-title .dim,
body.ecommerce-page .hero-title .coral,
body.ecommerce-page .hero-title .lime,
body.healthcare-page .hero-title em,
body.healthcare-page .hero-title .teal {
  color: #31d7ff !important;
}



body.banking-page .tag-dot {
  background: #31d7ff !important;
  box-shadow: 0 0 0 8px rgba(49, 215, 255, 0.12);
}

body.banking-page .btn-gold,
body.banking-page .btn-ghost-g,
body.ecommerce-page .btn-coral,
body.ecommerce-page .btn-lime,
body.healthcare-page .btn-teal,
body.healthcare-page .btn-outline-teal,
body.healthcare-page .btn-ghost-t {
  min-height: 54px;
  padding: 15px 28px;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

body.banking-page .btn-gold,
body.ecommerce-page .btn-coral,
body.ecommerce-page .btn-lime,
body.healthcare-page .btn-teal {
  background: linear-gradient(135deg, #1e6fd9 0%, #00d2ff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(30, 111, 217, 0.28) !important;
}

body.banking-page .btn-ghost-g,
body.healthcare-page .btn-outline-teal,
body.healthcare-page .btn-ghost-t {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.24) !important;
}

body.banking-page .stats-strip,
body.healthcare-page .health-stats,
body.ecommerce-page .peak-section {
  background: linear-gradient(135deg, #173eb8 0%, #1241b6 50%, #0e67ea 100%) !important;
  border: 0 !important;
}

body.banking-page .challenges-section,
body.banking-page .solutions-section,
body.banking-page .compliance-section,
body.banking-page .case-section,
body.banking-page .bank-cta,
body.ecommerce-page .problem-strip,
body.ecommerce-page .features-section,
body.ecommerce-page .conversion-section,
body.ecommerce-page .testimonial-section,
body.ecommerce-page .ecom-cta,
body.healthcare-page .health-challenges,
body.healthcare-page .compliance-section,
body.healthcare-page .usecases-section,
body.healthcare-page .testimonial-section,
body.healthcare-page .health-cta {
  background:
    radial-gradient(circle at 50% 0%, rgba(72, 164, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
}

body.banking-page .ch-card,
body.banking-page .comp-card,
body.banking-page .dashboard-mock,
body.banking-page .case-inner,
body.ecommerce-page .prob-card,
body.ecommerce-page .feat-card,
body.ecommerce-page .test-inner,
body.ecommerce-page .conv-big-num,
body.healthcare-page .chall-card,
body.healthcare-page .uc-card,
body.healthcare-page .clin-card,
body.healthcare-page .ehr-mock,
body.healthcare-page .test-box,
body.healthcare-page .tbm-card {
  background: var(--industry-surface) !important;
  border: 1px solid var(--industry-border) !important;
  color: var(--industry-text) !important;
  box-shadow: var(--industry-shadow) !important;
}

body.banking-page .ch-card h3,
body.banking-page .comp-card h3,
body.banking-page .sfi-text h4,
body.banking-page .case-quote,
body.ecommerce-page .prob-card h3,
body.ecommerce-page .feat-card h3,
body.ecommerce-page .conv-text .sec-title,
body.ecommerce-page .test-quote,
body.healthcare-page .chall-card h3,
body.healthcare-page .uc-card h3,
body.healthcare-page .cc-title,
body.healthcare-page .tb-quote {
  color: var(--industry-text) !important;
}

body.banking-page .ch-card p,
body.banking-page .comp-card p,
body.banking-page .sfi-text p,
body.banking-page .sec-desc,
body.ecommerce-page .prob-card p,
body.ecommerce-page .feat-card p,
body.ecommerce-page .sec-desc,
body.healthcare-page .chall-card p,
body.healthcare-page .uc-card p,
body.healthcare-page .sec-desc,
body.healthcare-page .cc-body {
  color: var(--industry-text-soft) !important;
}

body.banking-page .cta-box,
body.ecommerce-page .cta-box,
body.healthcare-page .hcta-box {
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 213, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #1737b0 0%, #12349b 45%, #1649d1 100%) !important;
  border: 1px solid rgba(104, 179, 255, 0.18) !important;
  box-shadow: 0 28px 80px rgba(12, 25, 79, 0.22) !important;
}

body.banking-page .cta-box h2,
body.banking-page .cta-box p,
body.ecommerce-page .cta-box h2,
body.ecommerce-page .cta-box p,
body.healthcare-page .hcta-box h2,
body.healthcare-page .hcta-box p {
  color: #ffffff !important;
}

@media (max-width: 1024px) {

  body.banking-page .bank-hero .container,
  body.ecommerce-page .ecom-hero .container,
  body.healthcare-page .health-hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body.banking-page .hero-btns,
  body.banking-page .compliance-row,
  body.ecommerce-page .hero-btns,
  body.ecommerce-page .hero-trust,
  body.healthcare-page .hero-btns,
  body.healthcare-page .comp-row {
    justify-content: center;
  }
}

@media (max-width: 640px) {

  body.banking-page .bank-hero,
  body.ecommerce-page .ecom-hero,
  body.healthcare-page .health-hero {
    padding: 138px 0 78px;
  }

  body.banking-page .hero-title,
  body.ecommerce-page .hero-title,
  body.healthcare-page .hero-title {
    font-size: 2.8rem !important;
  }
}

/* Banking Page - final redesign */
body.banking-page .bank-hero {
  padding: 164px 0 62px;
}

body.banking-page .bank-hero .container {
  gap: 72px;
}

body.banking-page .hero-title {
  font-size: clamp(3.4rem, 6vw, 5.4rem) !important;
  line-height: 0.92;
  letter-spacing: -0.04em;
  max-width: 620px;
}

body.banking-page .hero-desc {
  max-width: 520px;
  font-size: 1.06rem;
}

body.banking-page .vault-wrap {
  min-height: 420px;
}

body.banking-page .vault-outer {
  width: 420px;
  height: 420px;
  border-color: rgba(123, 197, 255, 0.22);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 62%);
}

body.banking-page .vault-middle {
  width: 312px;
  height: 312px;
  background: rgba(13, 23, 83, 0.34);
  border-color: rgba(123, 197, 255, 0.14);
}

body.banking-page .vault-inner {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  border-color: rgba(111, 188, 255, 0.34);
  box-shadow:
    0 18px 46px rgba(7, 15, 56, 0.34),
    inset 0 0 32px rgba(49, 215, 255, 0.08);
}

body.banking-page .vault-icon {
  color: #31d7ff;
}

body.banking-page .vault-label {
  color: rgba(255, 255, 255, 0.76);
}

body.banking-page .metric-float {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(16, 7, 70, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 30, 84, 0.14);
}

body.banking-page .mf-val {
  color: #100746;
}

body.banking-page .mf-lbl {
  color: #6f82a1;
}

body.banking-page .stats-strip {
  background: transparent !important;
  padding: 0 0 36px;
  margin-top: -52px;
  position: relative;
  z-index: 3;
}

body.banking-page .stats-grid {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(16, 7, 70, 0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(18, 38, 87, 0.12);
}

body.banking-page .stat-cell {
  padding: 34px 26px;
  background: transparent !important;
}

body.banking-page .stat-num {
  color: #173eb8 !important;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
}

body.banking-page .stat-label {
  color: #100746;
  font-weight: 700;
}

body.banking-page .stat-sub {
  color: #7183a0;
}

body.banking-page .challenges-section,
body.banking-page .solutions-section,
body.banking-page .compliance-section,
body.banking-page .case-section,
body.banking-page .bank-cta {
  padding: 50px 0;
}

body.banking-page .sec-kicker {
  color: #1e6fd9 !important;
}

body.banking-page .sec-title {
  color: #100746 !important;
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

body.banking-page .sec-title em {
  color: #000000 !important;
}

body.banking-page .sec-desc {
  color: #536680 !important;
}

body.banking-page .challenges-grid,
body.banking-page .comp-grid {
  gap: 24px;
  background: transparent;
  border-radius: 0;
  margin-top: 22px;
}

body.banking-page .ch-card,
body.banking-page .comp-card {
  padding: 34px 30px;
  border-radius: 24px;
}

body.banking-page .ch-icon,
body.banking-page .comp-seal,
body.banking-page .sfi-icon {
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.14), rgba(0, 210, 255, 0.12)) !important;
  color: #1e6fd9 !important;
}

body.banking-page .sol-split {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

body.banking-page .dashboard-mock {
  border-radius: 26px;
  overflow: hidden;
}

body.banking-page .dm-bar {
  background: #eff6ff !important;
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
}

body.banking-page .dm-title,
body.banking-page .dm-card-label,
body.banking-page .dm-p-label,
body.banking-page .dm-test-time {
  color: #72839c !important;
}

body.banking-page .dm-card,
body.banking-page .dm-test {
  background: #f8fbff !important;
  border: 1px solid rgba(16, 7, 70, 0.06) !important;
}

body.banking-page .dm-card-val,
body.banking-page .dm-test-name {
  color: #100746 !important;
}

body.banking-page .dm-p-bar {
  background: rgba(16, 7, 70, 0.08) !important;
}

body.banking-page .dm-p-fill {
  background: linear-gradient(90deg, #1e6fd9, #00d2ff) !important;
}

body.banking-page .sol-features {
  gap: 22px;
}

body.banking-page .sf-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(16, 7, 70, 0.08);
}

body.banking-page .sf-item:last-child {
  border-bottom: 0;
}

body.banking-page .case-inner {
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 210, 255, 0.12), transparent 20%),
    linear-gradient(135deg, #1737b0 0%, #12349b 45%, #1649d1 100%) !important;
  padding: 56px;
  border: 1px solid rgba(104, 179, 255, 0.18) !important;
  box-shadow: 0 28px 80px rgba(12, 25, 79, 0.18) !important;
}

body.banking-page .case-tag,
body.banking-page .ca-role {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.banking-page .case-quote,
body.banking-page .ca-name,
body.banking-page .cs-stat-label {
  color: #ffffff !important;
}

body.banking-page .ca-av,
body.banking-page .cs-stat-num {
  color: #31d7ff !important;
}

body.banking-page .case-stats {
  border-top-color: rgba(255, 255, 255, 0.12);
}

body.banking-page .cta-box {
  padding: 72px 54px;
}

body.banking-page .cta-box h2 {
  font-size: clamp(2.6rem, 4vw, 4rem);
  letter-spacing: -0.03em;
}

body.banking-page .cta-box h2 em {
  color: #31d7ff !important;
}

@media (max-width: 1024px) {
  body.banking-page .stats-strip {
    margin-top: -28px;
  }

  body.banking-page .sol-split {
    grid-template-columns: 1fr;
  }

  body.banking-page .vault-wrap {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  body.banking-page .stats-strip {
    margin-top: 0;
    padding-top: 18px;
  }

  body.banking-page .stats-grid {
    border-radius: 22px;
  }

  body.banking-page .case-inner,
  body.banking-page .cta-box {
    padding: 34px 22px;
  }

  body.banking-page .vault-outer {
    width: 320px;
    height: 320px;
  }

  body.banking-page .vault-middle {
    width: 236px;
    height: 236px;
  }

  body.banking-page .vault-inner {
    width: 152px;
    height: 152px;
  }
}

/* Banking Page - case study rebuild */
body.banking-page .banking-story-section {
  padding-top: 72px;
}

body.banking-page .banking-story {
  padding: 18px 0 0;
}

body.banking-page .story-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

body.banking-page .story-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(30, 111, 217, 0.08);
  color: #1e6fd9;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.banking-page .story-title {
  margin: 18px 0 14px;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(2.3rem, 4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #100746;
}

body.banking-page .story-title span {
  color: #1e6fd9;
}

body.banking-page .story-desc {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.8;
  color: #536680;
}

body.banking-page .story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: stretch;
}

body.banking-page .story-quote-card,
body.banking-page .story-proof-card {
  border-radius: 28px;
  overflow: hidden;
}

body.banking-page .story-quote-card {
  position: relative;
  padding: 34px;
  background:
    radial-gradient(circle at 20% 15%, rgba(36, 213, 255, 0.16), transparent 22%),
    linear-gradient(135deg, #1737b0 0%, #12349b 45%, #1649d1 100%);
  border: 1px solid rgba(104, 179, 255, 0.18);
  box-shadow: 0 28px 80px rgba(12, 25, 79, 0.18);
}

body.banking-page .story-quote-mark {
  font-family: Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  margin-bottom: 10px;
}

body.banking-page .story-quote-text {
  margin: 0 0 28px;
  font-family: 'Roboto', sans-serif;
  font-size: 1.45rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #ffffff;
}

body.banking-page .story-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

body.banking-page .story-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #31d7ff;
  font-size: 1rem;
}

body.banking-page .story-author-name {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
}

body.banking-page .story-author-role {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

body.banking-page .story-author-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.92rem;
  line-height: 1.6;
}

body.banking-page .story-author-note i {
  color: #31d7ff;
}

body.banking-page .story-proof-card {
  padding: 30px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(16, 7, 70, 0.08);
  box-shadow: 0 22px 60px rgba(18, 38, 87, 0.12);
}

body.banking-page .story-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.banking-page .story-metric {
  padding: 20px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid rgba(30, 111, 217, 0.08);
}

body.banking-page .story-metric-value {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: #173eb8;
  letter-spacing: -0.04em;
}

body.banking-page .story-metric-label {
  margin-top: 8px;
  color: #536680;
  font-size: 0.92rem;
  line-height: 1.5;
}

body.banking-page .story-divider {
  height: 1px;
  margin: 24px 0;
  background: rgba(16, 7, 70, 0.08);
}

body.banking-page .story-journey {
  display: grid;
  gap: 18px;
}

body.banking-page .story-journey-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.banking-page .story-step {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.14), rgba(0, 210, 255, 0.12));
  color: #1e6fd9;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
}

body.banking-page .story-journey-item h3 {
  margin: 0 0 6px;
  font-family: 'Roboto', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #100746;
}

body.banking-page .story-journey-item p {
  margin: 0;
  color: #536680;
  font-size: 0.94rem;
  line-height: 1.65;
}

@media (max-width: 1024px) {
  body.banking-page .story-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {

  body.banking-page .story-quote-card,
  body.banking-page .story-proof-card {
    padding: 24px;
    border-radius: 22px;
  }

  body.banking-page .story-quote-text {
    font-size: 1.2rem;
  }

  body.banking-page .story-metric-grid {
    grid-template-columns: 1fr;
  }

  body.banking-page .story-journey-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  body.banking-page .story-step {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
}

/* Industry Pages - final polish */
body.banking-page,
body.ecommerce-page,
body.healthcare-page {
  font-family: 'Roboto', sans-serif;
}

/* Set heading tags in ecommerce and banking pages to pure black */
body.banking-page h1,
body.banking-page h2,
body.banking-page h3,
body.banking-page h4,
body.banking-page h5,
body.banking-page h6,
body.ecommerce-page h1,
body.ecommerce-page h2,
body.ecommerce-page h3,
body.ecommerce-page h4,
body.ecommerce-page h5,
body.ecommerce-page h6 {
  color: #000000 !important;
}

/* Maintain proper contrast in dark/styled sections */
body.banking-page .bank-hero h1,
body.banking-page .solutions-section h2,
body.banking-page .solutions-section h4,
body.banking-page .case-inner h3,
body.banking-page .case-quote,
body.banking-page .cta-box h2,
body.ecommerce-page .ecom-hero h1,
body.ecommerce-page .cta-box h2 {
  color: #fff !important;
}

body.banking-page .sec-title,
body.ecommerce-page .sec-title,
body.healthcare-page .sec-title,
body.banking-page .hero-title,
body.ecommerce-page .hero-title,
body.healthcare-page .hero-title,
body.banking-page .cta-box h2,
body.ecommerce-page .cta-box h2,
body.healthcare-page .hcta-box h2 {
  font-family: 'Roboto', sans-serif !important;
  letter-spacing: -0.04em;
}

body.banking-page .sec-desc,
body.ecommerce-page .sec-desc,
body.healthcare-page .sec-desc {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

body.ecommerce-page .ecom-hero,
body.healthcare-page .health-hero {
  padding: 160px 0 50px;
}

body.ecommerce-page .hero-title,
body.healthcare-page .hero-title {
  font-size: clamp(3.2rem, 5.6vw, 5.2rem) !important;
  line-height: 0.94;
}

body.ecommerce-page .hero-panel,
body.healthcare-page .clinical-cards {
  min-height: 100%;
}

body.ecommerce-page .hero-panel,
body.healthcare-page .clin-card,
body.healthcare-page .ehr-mock,
body.ecommerce-page .conv-big-num,
body.ecommerce-page .test-inner,
body.healthcare-page .test-box {
  border-radius: 26px !important;
}

body.ecommerce-page .problem-strip,
body.ecommerce-page .features-section,
body.ecommerce-page .conversion-section,
body.ecommerce-page .testimonial-section,
body.ecommerce-page .ecom-cta,
body.healthcare-page .health-challenges,
body.healthcare-page .compliance-section,
body.healthcare-page .usecases-section,
body.healthcare-page .testimonial-section,
body.healthcare-page .health-cta {
  padding: 50px 0;
}

body.ecommerce-page .problem-cards,
body.ecommerce-page .feat-grid,
body.healthcare-page .chall-grid,
body.healthcare-page .uc-grid {
  gap: 24px;
  background: transparent !important;
  border-radius: 0 !important;
}

body.ecommerce-page .prob-card,
body.ecommerce-page .feat-card,
body.healthcare-page .chall-card,
body.healthcare-page .uc-card {
  padding: 30px 26px;
  border-radius: 24px;
}

body.ecommerce-page .prob-card h3,
body.ecommerce-page .feat-card h3,
body.healthcare-page .chall-card h3,
body.healthcare-page .uc-card h3 {
  color: #100746 !important;
  font-size: 1.16rem;
}

body.ecommerce-page .prob-card p,
body.ecommerce-page .feat-card p,
body.healthcare-page .chall-card p,
body.healthcare-page .uc-card p {
  color: #536680 !important;
}

body.ecommerce-page .conversion-section .conv-split,
body.healthcare-page .comp-hero-split,
body.healthcare-page .test-box,
body.ecommerce-page .test-inner {
  gap: 42px;
  align-items: center;
}

body.ecommerce-page .conv-big-num {
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 213, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #1737b0 0%, #12349b 45%, #1649d1 100%) !important;
}

body.ecommerce-page .conv-big-num .cbn-label,
body.ecommerce-page .conv-big-num .cbn-sub {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.ecommerce-page .conv-big-num .cbn-num,
body.ecommerce-page .conv-big-num .cbn-num span {
  color: #ffffff !important;
}

body.ecommerce-page .conv-mini {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.ecommerce-page .conv-mini-val,
body.ecommerce-page .conv-mini-lbl {
  color: #ffffff !important;
}

body.ecommerce-page .peak-grid,
body.healthcare-page .stats-row {
  gap: 16px;
  border: 0 !important;
  background: transparent !important;
}

body.ecommerce-page .peak-cell,
body.healthcare-page .hs-cell {
  border: 0 !important;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(18, 38, 87, 0.1);
}

body.ecommerce-page .peak-num,
body.healthcare-page .hs-num {
  color: #173eb8 !important;
}

body.ecommerce-page .peak-label,
body.healthcare-page .hs-label {
  color: #100746 !important;
}

body.ecommerce-page .peak-sub,
body.healthcare-page .hs-sub {
  color: #6f82a1 !important;
}

body.healthcare-page .clin-card,
body.healthcare-page .ehr-field,
body.healthcare-page .ehr-test {
  background: #f8fbff !important;
}

body.healthcare-page .cc-title,
body.healthcare-page .ehr-field-val,
body.healthcare-page .tbm-label {
  color: #100746 !important;
}

body.healthcare-page .cc-body,
body.healthcare-page .ehr-field-label,
body.healthcare-page .tba-role {
  color: #647896 !important;
}

body.healthcare-page .test-box,
body.ecommerce-page .test-inner {
  padding: 42px;
}

body.healthcare-page .hcta-box,
body.ecommerce-page .cta-box {
  border-radius: 26px !important;
}

@media (max-width: 1024px) {

  body.ecommerce-page .ecom-hero .container,
  body.healthcare-page .health-hero .container {
    grid-template-columns: 1fr;
    gap: 52px;
    text-align: center;
  }

  body.ecommerce-page .hero-btns,
  body.ecommerce-page .hero-trust,
  body.healthcare-page .hero-btns,
  body.healthcare-page .comp-row {
    justify-content: center;
  }
}

@media (max-width: 640px) {

  body.ecommerce-page .ecom-hero,
  body.healthcare-page .health-hero {
    padding: 138px 0 82px;
  }

  body.ecommerce-page .hero-title,
  body.healthcare-page .hero-title {
    font-size: 2.8rem !important;
  }

  body.ecommerce-page .test-inner,
  body.healthcare-page .test-box {
    padding: 26px;
  }
}

body.security-page,
body.integration-page,
body.enterprise-services-page {
  background: #f7f9fc;
}

body.security-page .modern-footer-pro,
body.integration-page .modern-footer-pro,
body.enterprise-services-page .modern-footer-pro {
  background: #ffffff !important;
  color: #1e293b !important;
}

body.security-page .footer-logo-main,
body.integration-page .footer-logo-main,
body.enterprise-services-page .footer-logo-main {
  filter: brightness(0);
}

body.security-page .sec-hero,
body.integration-page .int-hero,
body.enterprise-services-page .ent-hero {
  padding: 150px 0 0px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

body.security-page .sec-hero {
  background: linear-gradient(135deg, #050709 0%, #0d1219 100%) !important;
}

body.security-page .sec-hero::before {
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 229, 255, 0.012) 2px, rgba(0, 229, 255, 0.012) 3px) !important;
}

body.security-page .sec-hero::after {
  background:
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(0, 229, 255, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 30%, rgba(0, 255, 136, 0.05) 0%, transparent 55%) !important;
}

body.integration-page .int-hero {
  background: linear-gradient(135deg, #07090f 0%, #111523 100%) !important;
}

body.integration-page .int-hero::before {
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.05) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
}

body.integration-page .int-hero::after {
  background:
    radial-gradient(ellipse 60% 60% at 70% 50%, rgba(79, 70, 229, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 30%, rgba(6, 182, 212, 0.07) 0%, transparent 55%) !important;
}

body.enterprise-services-page .ent-hero {
  background: linear-gradient(135deg, #1a4a35 0%, #236646 100%) !important;
}

body.enterprise-services-page .ent-hero::before {
  background: repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255, 255, 255, 0.015) 60px, rgba(255, 255, 255, 0.015) 61px) !important;
}

body.enterprise-services-page .ent-hero::after {
  background:
    radial-gradient(ellipse 70% 60% at 80% 40%, rgba(45, 128, 87, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 70%, rgba(184, 135, 10, 0.1) 0%, transparent 55%) !important;
}

body.security-page .hero-title,
body.security-page .hero-desc,
body.security-page .hero-bc,
body.security-page .hero-bc a,
body.integration-page .hero-title,
body.integration-page .hero-desc,
body.integration-page .hero-bc,
body.integration-page .hero-bc a,
body.enterprise-services-page .hero-title,
body.enterprise-services-page .hero-desc,
body.enterprise-services-page .hero-bc,
body.enterprise-services-page .hero-bc a {
  color: #ffffff !important;
}

body.security-page .hero-title .cyan,
body.integration-page .hero-title .indigo {
  color: #818cf8 !important;
}

body.enterprise-services-page .hero-title em {
  color: #d4a012 !important;
}

body.security-page .hero-btns,
body.integration-page .hero-btns,
body.enterprise-services-page .hero-btns {
  margin-bottom: 32px;
}



body.integration-page .int-hero::before,
body.security-page .sec-hero::before,
body.enterprise-services-page .ent-hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
}

body.integration-page .int-hero::after,
body.security-page .sec-hero::after,
body.enterprise-services-page .ent-hero::after {
  background: radial-gradient(circle, rgba(16, 62, 205, 0.4) 0%, transparent 65%) !important;
}

body.security-page .sec-hero,
body.enterprise-services-page .ent-hero {
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%) !important;
}

body.security-page .sec-hero::before,
body.enterprise-services-page .ent-hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%);
}

body.security-page .sec-hero::after,
body.enterprise-services-page .ent-hero::after {
  background: radial-gradient(circle, rgba(16, 62, 205, 0.4) 0%, transparent 65%) !important;
}

body.security-page .hero-title .cyan,
body.enterprise-services-page .hero-title em {
  color: #22d3ee !important;
}

body.security-page .security-status,
body.enterprise-services-page .hero-label {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .82);
}

body.security-page .btn-cyan,
body.enterprise-services-page .btn-gold {
  background: linear-gradient(135deg, #0069ff, #00d2ff);
  color: #fff;
}

body.security-page .sec-hero .container,
body.integration-page .int-hero .container,
body.enterprise-services-page .ent-hero .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {

  body.security-page .sec-hero .container,
  body.integration-page .int-hero .container,
  body.enterprise-services-page .ent-hero .container {
    grid-template-columns: 1fr;
    gap: 52px;
    text-align: center;
  }

  body.security-page .hero-btns,
  body.security-page .hero-trust,
  body.integration-page .hero-btns,
  body.integration-page .hero-stats-row,
  body.enterprise-services-page .hero-btns,
  body.enterprise-services-page .sla-row {
    justify-content: center;
  }
}

@media (max-width: 640px) {

  body.security-page .sec-hero,
  body.integration-page .int-hero,
  body.enterprise-services-page .ent-hero {
    padding: 138px 0 82px;
  }

  body.security-page .hero-title,
  body.integration-page .hero-title,
  body.enterprise-services-page .hero-title {
    font-size: 2.8rem !important;
  }
}

/* ----------------------------------------------------------------
   INTEGRATIONS PAGE
---------------------------------------------------------------- */
body.integration-page {
  --void: #07090f;
  --void2: #0c0f1a;
  --void3: #111523;
  --surface: #161c2e;
  --surface2: #1d2540;
  --indigo: #4f46e5;
  --indigo2: #6366f1;
  --indigo3: #818cf8;
  --indigo-lite: rgba(79, 70, 229, .12);
  --indigo-glow: rgba(79, 70, 229, .25);
  --cyan: #06b6d4;
  --cyan2: #22d3ee;
  --green: #10b981;
  --amber: #f59e0b;
  --pink: #ec4899;
  --orange: #f97316;
  --border: rgba(255, 255, 255, .07);
  --border2: rgba(255, 255, 255, .13);
  --text: #e8eef8;
  --text2: rgba(232, 238, 248, .6);
  --text3: rgba(232, 238, 248, .3);
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body.integration-page .hero-chip,
body.integration-page .hero-title,
body.integration-page .hero-desc,
body.integration-page .hero-bc,
body.integration-page .hero-bc a {
  color: var(--text);
}

body.integration-page .int-hero .container,
body.security-page .sec-hero .container,
body.enterprise-services-page .ent-hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
}

body.integration-page .int-hero .container {
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

body.security-page .sec-hero .container {
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

body.enterprise-services-page .ent-hero .container {
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

body.integration-page .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.integration-page .hc-dot {
  width: 6px;
  height: 6px;
  background: var(--indigo3);
  border-radius: 50%;
  animation: hcdot 2s ease-in-out infinite;
}

body.integration-page .hero-title {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: .95;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 26px;
}

body.integration-page .hero-title .indigo {
  color: var(--indigo3);
}

body.integration-page .hero-title .cyan {
  color: var(--cyan2);
}

body.integration-page .hero-desc {
  font-size: 1.05rem;
  color: var(--text2);
  line-height: 1.78;
  margin-bottom: 40px;
  max-width: 460px;
}

body.integration-page .hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

body.integration-page .btn-indigo {
  padding: 14px 36px;
  background: var(--indigo);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 32px var(--indigo-glow);
  transition: all .3s var(--ease);
  border: none;
  cursor: pointer;
}

body.integration-page .btn-indigo:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(79, 70, 229, .45);
  background: var(--indigo2);
}

body.integration-page .btn-ghost-i {
  padding: 14px 36px;
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
}

body.integration-page .btn-ghost-i:hover {
  border-color: var(--indigo3);
  color: var(--indigo3);
  transform: translateY(-4px);
}

body.integration-page .hero-stats-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

body.integration-page .hs-item {
  text-align: center;
}

body.integration-page .hs-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: #fff;
  line-height: 1;
}

body.integration-page .hs-num span {
  color: var(--indigo3);
}

body.integration-page .hs-lbl {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--text3);
  margin-top: 4px;
  letter-spacing: .5px;
}

body.integration-page .network-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.integration-page .nv-center {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--indigo2));
  border: 2px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  box-shadow: 0 0 40px var(--indigo-glow), 0 0 80px rgba(79, 70, 229, .1);
}

body.integration-page .nv-center-logo {
  font-size: 2rem;
  color: #fff;
}

body.integration-page .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid var(--border);
}

body.integration-page .orbit-1 {
  width: 200px;
  height: 200px;
  margin: -100px;
  animation: orbitSpin 20s linear infinite;
}

body.integration-page .orbit-1 .int-node {
  animation: orbitCounterSpin 20s linear infinite;
}

body.integration-page .orbit-2 {
  width: 320px;
  height: 320px;
  margin: -160px;
  animation: orbitSpin 30s linear infinite reverse;
}

body.integration-page .orbit-2 .int-node {
  animation: orbitSpin 30s linear infinite;
}

body.integration-page .orbit-3 {
  width: 440px;
  height: 440px;
  margin: -220px;
  animation: orbitSpin 45s linear infinite;
}

body.integration-page .orbit-3 .int-node {
  animation: orbitCounterSpin 45s linear infinite;
}

body.integration-page .int-node {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border: 1px solid var(--border2);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: all .3s;
}

body.integration-page .int-node:hover {
  transform: scale(1.2);
  border-color: var(--indigo3);
  box-shadow: 0 0 20px var(--indigo-glow);
}

body.integration-page .n1-a {
  top: 0;
  left: 50%;
  margin: -24px 0 0 -24px;
}

body.integration-page .n1-b {
  top: 50%;
  right: 0;
  margin: -24px -24px 0 0;
}

body.integration-page .n1-c {
  bottom: 0;
  left: 50%;
  margin: 0 0 -24px -24px;
}

body.integration-page .n1-d {
  top: 50%;
  left: 0;
  margin: -24px 0 0 -24px;
}

body.integration-page .n2-a {
  top: 10%;
  left: 50%;
  margin: -24px 0 0 -24px;
}

body.integration-page .n2-b {
  top: 50%;
  right: 5%;
  margin: -24px -24px 0 0;
}

body.integration-page .n2-c {
  bottom: 10%;
  right: 30%;
  margin: 0 -24px -24px 0;
}

body.integration-page .n2-d {
  bottom: 5%;
  left: 50%;
  margin: 0 0 -24px -24px;
}

body.integration-page .n2-e {
  top: 50%;
  left: 5%;
  margin: -24px 0 0 -24px;
}

body.integration-page .n3-a {
  top: 5%;
  left: 40%;
  margin: -24px 0 0 -24px;
}

body.integration-page .n3-b {
  top: 20%;
  right: 5%;
  margin: -24px -24px 0 0;
}

body.integration-page .n3-c {
  bottom: 20%;
  right: 5%;
  margin: 0 -24px -24px 0;
}

body.integration-page .n3-d {
  bottom: 5%;
  left: 30%;
  margin: 0 0 -24px -24px;
}

body.integration-page .n3-e {
  top: 30%;
  left: 0;
  margin: -24px 0 0 -24px;
}

body.integration-page .integrations-section {
  padding: 50px 0 50px;
  background: var(--void2);
}

body.integration-page .int-search-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

body.integration-page .int-search {
  position: relative;
  flex: 1;
  max-width: 380px;
}

body.integration-page .int-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 12px 16px 12px 42px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .84rem;
  outline: none;
  transition: all .3s;
}

body.integration-page .int-search input:focus {
  border-color: var(--indigo3);
  background: var(--surface2);
}

body.integration-page .int-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: .82rem;
}

body.integration-page .int-count {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text3);
  margin-left: auto;
}

body.integration-page .int-count span {
  color: var(--indigo3);
  font-weight: 600;
}

body.integration-page .cat-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

body.integration-page .cf-btn {
  padding: 8px 20px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all .3s;
  user-select: none;
  letter-spacing: .3px;
}

body.integration-page .cf-btn.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  box-shadow: 0 4px 16px var(--indigo-glow);
}

body.integration-page .int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

body.integration-page .int-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: all .4s var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

body.integration-page .int-card:hover {
  border-color: var(--indigo3);
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
}

body.integration-page .ic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

body.integration-page .ic-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--surface2);
  border: 1px solid var(--border);
}

body.integration-page .ic-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .5px;
}

body.integration-page .ib-native {
  background: rgba(79, 70, 229, .15);
  color: var(--indigo3);
}

body.integration-page .ib-popular {
  background: rgba(245, 158, 11, .12);
  color: var(--amber);
}

body.integration-page .ib-new {
  background: rgba(16, 185, 129, .12);
  color: var(--green);
}

body.integration-page .ib-enterprise {
  background: rgba(236, 72, 153, .1);
  color: var(--pink);
}

body.integration-page .ic-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 6px;
}

body.integration-page .ic-desc {
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 14px;
}

body.integration-page .ic-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

body.integration-page .ic-tag {
  font-family: var(--font-mono);
  font-size: .6rem;
  background: rgba(255, 255, 255, .06);
  color: var(--text3);
  padding: 2px 8px;
  border-radius: 3px;
}

body.integration-page .connect-section,
body.integration-page .combos-section,
body.integration-page .int-cta {
  padding: 50px 0;
}

body.integration-page .connect-section {
  background: var(--void);
}

body.integration-page .combos-section {
  background: var(--void2);
}

body.integration-page .int-cta {
  background: var(--void);
}

body.integration-page .connect-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 60px;
  position: relative;
}

body.integration-page .cs-step {
  padding: 0 32px;
  text-align: center;
  position: relative;
  z-index: 1;
}

body.integration-page .cs-num {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--void2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--indigo3);
}

body.integration-page .cs-step h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

body.integration-page .cs-step p {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.65;
}

body.integration-page .combos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 60px;
}

body.integration-page .combo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all .4s var(--ease);
}

body.integration-page .combo-card:hover {
  border-color: var(--indigo3);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

body.integration-page .combo-logos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.integration-page .combo-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

body.integration-page .combo-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

body.integration-page .combo-card p {
  font-size: .87rem;
  color: var(--text2);
  line-height: 1.6;
  flex: 1;
}

body.integration-page .combo-link {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--indigo3);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap .3s;
}

body.integration-page .cta-box {
  background: linear-gradient(135deg, var(--surface), #0d1035);
  border-radius: 20px;
  padding: 80px 60px;
  text-align: center;
  border: 1px solid rgba(79, 70, 229, .2);
  position: relative;
  overflow: hidden;
}

body.integration-page .cta-box h2 {
  font-family: var(--font-display);
  font-size: 3.8rem;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  line-height: 1.05;
}

body.integration-page .cta-box h2 span {
  color: var(--indigo3);
}

body.integration-page .cta-box p {
  font-size: 1.05rem;
  color: var(--text2);
  margin-bottom: 40px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.78;
  position: relative;
  z-index: 1;
}

body.integration-page .cta-btns {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

body.integration-page .combo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo3);
  font-size: .85rem;
  opacity: .9
}

body.integration-page .combo-arrow i {
  animation: arrowNudge 1.8s ease-in-out infinite
}

body.integration-page .int-empty {
  padding: 28px;
  border: 1px dashed var(--border2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: .85rem;
  text-align: center
}

@keyframes arrowNudge {

  0%,
  100% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(4px)
  }
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitCounterSpin {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* ----------------------------------------------------------------
   SECURITY PAGE
---------------------------------------------------------------- */
body.security-page {
  --void: #050709;
  --void2: #080c10;
  --void3: #0d1219;
  --surface: #111820;
  --surface2: #162030;
  --cyan: #00e5ff;
  --cyan2: #40efff;
  --cyan3: #80f5ff;
  --cyan-lite: rgba(0, 229, 255, .08);
  --cyan-mid: rgba(0, 229, 255, .15);
  --cyan-glow: rgba(0, 229, 255, .2);
  --green: #00ff88;
  --green2: #00cc6a;
  --green-lite: rgba(0, 255, 136, .08);
  --red: #ff3b3b;
  --red-lite: rgba(255, 59, 59, .1);
  --amber: #ffb800;
  --amber-lite: rgba(255, 184, 0, .1);
  --border: rgba(0, 229, 255, .08);
  --border2: rgba(0, 229, 255, .18);
  --text: #ddeeff;
  --text2: rgba(221, 238, 255, .6);
  --text3: rgba(221, 238, 255, .3);
  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Geologica', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  background: var(--void) !important;
  color: var(--text) !important;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body.security-page .security-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.security-page .ss-pulse {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

body.security-page .ss-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--green);
  animation: ssPulse 2s ease-out infinite;
}

body.security-page .hero-title {
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 28px;
  text-transform: uppercase;
}

body.security-page .hero-title .cyan {
  color: var(--cyan);
}

body.security-page .hero-title .dim {
  -webkit-text-stroke: 1px rgba(0, 229, 255, .3);
  color: transparent;
}

body.security-page .hero-desc {
  font-size: 1.05rem;
  color: var(--text2);
  line-height: 1.78;
  margin-bottom: 40px;
  max-width: 460px;
}

body.security-page .hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

body.security-page .btn-cyan {
  padding: 14px 36px;
  background: var(--cyan);
  color: var(--void);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 32px var(--cyan-glow);
  transition: all .3s var(--ease);
  border: none;
  cursor: pointer;
}

body.security-page .btn-ghost-c {
  padding: 14px 36px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
}

body.security-page .hero-trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

body.security-page .ht-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text3);
}

body.security-page .shield-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 520px;
}

body.security-page .hex-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--border);
}

body.security-page .hr-1 {
  width: 180px;
  height: 180px;
  animation: hexSpin 25s linear infinite;
}

body.security-page .hr-2 {
  width: 290px;
  height: 290px;
  animation: hexSpin 40s linear infinite reverse;
}

body.security-page .hr-3 {
  width: 410px;
  height: 410px;
  animation: hexSpin 60s linear infinite;
}

body.security-page .hr-4 {
  width: 510px;
  height: 510px;
  border-color: rgba(0, 229, 255, .04);
  animation: hexSpin 80s linear infinite reverse;
}

body.security-page .ring-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}

body.security-page .shield-core {
  position: absolute;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

body.security-page .shield-svg {
  width: 140px;
  height: 140px;
  position: relative;
}

body.security-page .shield-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, .16) 0%, transparent 70%);
}

body.security-page .shield-glow-ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, .16);
}

body.security-page .shield-icon {
  font-size: 3rem;
  color: var(--cyan);
}

body.security-page .threat-stream {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 100%);
}

body.security-page .ts-event {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text2);
  margin-top: 8px;
}

body.security-page .sec-kicker {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cyan2);
  margin-bottom: 14px;
  display: block;
}

body.security-page .sec-title {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -.3px;
}

body.security-page .sec-title .cyan {
  color: #000;
}

body.security-page .sec-desc {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.78;
}

body.security-page .sp {
  padding: 100px 0;
}

body.security-page .sp-sm {
  padding: 80px 0;
}

body.security-page .sec-label {
  position: absolute;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
  animation: secFloat 6s ease-in-out infinite
}

body.security-page .sl-1 {
  top: 15%;
  left: 4%
}

body.security-page .sl-2 {
  top: 5%;
  right: 8%
}

body.security-page .sl-3 {
  right: 0;
  top: 42%
}

body.security-page .sl-4 {
  left: 7%;
  bottom: 20%
}

body.security-page .sl-5 {
  bottom: 8%;
  right: 14%
}

body.security-page .layers-section,
body.security-page .dataflow-section,
body.security-page .pentest-section,
body.security-page .disclosure-section,
body.security-page .metrics-section,
body.security-page .trust-cta {
  background: var(--void)
}

body.security-page .compliance-section,
body.security-page .encryption-section {
  background: var(--void2)
}

body.security-page .layers-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 60px
}

body.security-page .layer-row {
  display: grid;
  grid-template-columns: 78px 68px 1fr 104px;
  gap: 18px;
  align-items: center;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18)
}

body.security-page .layer-num {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: var(--void2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--cyan2)
}

body.security-page .layer-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border2);
  font-size: 1.25rem
}

body.security-page .layer-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px
}

body.security-page .layer-body p {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.65
}

body.security-page .layer-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px
}

body.security-page .ltag {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .3px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border2);
  color: var(--text2)
}

body.security-page .ltag.green {
  background: rgba(0, 255, 136, .08);
  border-color: rgba(0, 255, 136, .2);
  color: var(--green)
}

body.security-page .ltag.amber {
  background: rgba(255, 184, 0, .08);
  border-color: rgba(255, 184, 0, .18);
  color: var(--amber)
}

body.security-page .layer-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px
}

body.security-page .ls-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18)
}

body.security-page .ls-dot.ls-active {
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(0, 255, 136, .12)
}

body.security-page .ls-text {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  color: var(--green);
  font-weight: 700
}

body.security-page .cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 60px
}

body.security-page .cert-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  gap: 16px
}

body.security-page .cert-seal {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--void2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan2);
  font-size: 1.35rem
}

body.security-page .cert-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff
}

body.security-page .cert-card p {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.7
}

body.security-page .cert-valid {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .6px;
  color: var(--cyan2);
  text-transform: uppercase
}

body.security-page .df-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 22px;
  margin-top: 60px
}

body.security-page .df-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18)
}

body.security-page .df-col-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cyan2);
  margin-bottom: 8px
}

body.security-page .df-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

body.security-page .df-item:first-of-type {
  border-top: none;
  padding-top: 0
}

body.security-page .df-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0
}

body.security-page .dii-c {
  background: rgba(0, 229, 255, .1);
  color: var(--cyan2)
}

body.security-page .dii-g {
  background: rgba(0, 255, 136, .1);
  color: var(--green)
}

body.security-page .dii-a {
  background: rgba(255, 184, 0, .1);
  color: var(--amber)
}

body.security-page .df-item-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px
}

body.security-page .df-item-desc {
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.55
}

body.security-page .df-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px
}

body.security-page .df-flow-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan2)
}

body.security-page .df-core-box {
  width: 100%;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--surface), #0f1820);
  border: 1px solid rgba(0, 229, 255, .16);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .2);
  text-align: center
}

body.security-page .df-core-icon {
  font-size: 2rem;
  color: var(--cyan2);
  margin-bottom: 12px
}

body.security-page .df-core-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff
}

body.security-page .df-core-sub {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: 1px;
  color: var(--text2);
  margin-top: 6px
}

body.security-page .enc-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
  margin-top: 60px
}

body.security-page .enc-terminal {
  background: #0a1015;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .3)
}

body.security-page .et-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  flex-wrap: wrap
}

body.security-page .et-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

body.security-page .et-title {
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--text2);
  margin-left: 8px
}

body.security-page .et-status {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--green);
  letter-spacing: 1px
}

body.security-page .et-body {
  padding: 20px
}

body.security-page .et-line,
body.security-page .et-output {
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.7
}

body.security-page .et-line {
  display: flex;
  gap: 8px;
  color: var(--text)
}

body.security-page .et-prompt {
  color: var(--green)
}

body.security-page .et-cmd {
  color: var(--cyan2)
}

body.security-page .et-output {
  margin-top: 4px;
  color: var(--text2)
}

body.security-page .et-comment {
  color: #8b9bb0
}

body.security-page .et-success {
  color: #7ef0b5
}

body.security-page .et-warn {
  color: #ffd166
}

body.security-page .typing-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--cyan2);
  animation: cursorBlink 1s steps(1, end) infinite
}

body.security-page .enc-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px
}

body.security-page .ef-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px
}

body.security-page .ef-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0
}

body.security-page .efi-c {
  background: rgba(0, 229, 255, .1);
  color: var(--cyan2)
}

body.security-page .efi-g {
  background: rgba(0, 255, 136, .1);
  color: var(--green)
}

body.security-page .efi-a {
  background: rgba(255, 184, 0, .1);
  color: var(--amber)
}

body.security-page .ef-text h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px
}

body.security-page .ef-text p {
  font-size: .85rem;
  color: var(--text2);
  line-height: 1.65
}

body.security-page .pt-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 60px
}

body.security-page .pt-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18)
}

body.security-page .pt-circle {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--void2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan2);
  font-size: 1.1rem;
  margin-bottom: 16px
}

body.security-page .pt-step h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px
}

body.security-page .pt-step p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.65
}

body.security-page .pt-freq {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan2)
}

body.security-page .disc-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: start;
  margin-top: 40px
}

body.security-page .dl-title {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 16px
}

body.security-page .dl-title .cyan {
  color: var(--cyan2)
}

body.security-page .dl-desc {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 650px
}

body.security-page .disc-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

body.security-page .ds-step {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px
}

body.security-page .ds-num {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--void2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan2);
  font-family: var(--font-display);
  flex-shrink: 0
}

body.security-page .ds-text h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px
}

body.security-page .ds-text p {
  font-size: .84rem;
  color: var(--text2);
  line-height: 1.65
}

body.security-page .disc-right {
  display: flex;
  flex-direction: column;
  gap: 14px
}

body.security-page .disc-contact-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface)
}

body.security-page .dcc-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void2);
  border: 1px solid var(--border2);
  color: var(--cyan2);
  flex-shrink: 0
}

body.security-page .dcc-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff
}

body.security-page .dcc-value {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--cyan2);
  margin-top: 4px
}

body.security-page .dcc-sub {
  font-size: .78rem;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.5
}

body.security-page .disc-pgp {
  padding: 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border)
}

body.security-page .dpgp-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px
}

body.security-page .dpgp-key {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: #fff;
  word-break: break-word;
  line-height: 1.55
}

body.security-page .metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

body.security-page .met-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18)
}

body.security-page .met-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: #fff;
  line-height: 1
}

body.security-page .unit {
  font-size: 1rem;
  color: var(--cyan2)
}

body.security-page .met-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-top: 10px
}

body.security-page .met-sub {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  color: var(--text2);
  margin-top: 6px;
  text-transform: uppercase
}

body.security-page .trust-cta .cta-box {
  background: linear-gradient(135deg, var(--surface), #0a1820);
  border-radius: 20px;
  padding: 80px 60px;
  text-align: center;
  border: 1px solid rgba(0, 229, 255, .16);
  position: relative;
  overflow: hidden
}

body.security-page .trust-cta .cta-box h2 {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 18px
}

body.security-page .trust-cta .cta-box h2 .cyan {
  color: var(--cyan2)
}

body.security-page .trust-cta .cta-box p {
  font-size: 1.02rem;
  color: var(--text2);
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75
}

body.security-page .trust-cta .cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap
}

@keyframes secFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

@keyframes cursorBlink {

  0%,
  49% {
    opacity: 1
  }

  50%,
  100% {
    opacity: 0
  }
}

/* ----------------------------------------------------------------
   ENTERPRISE SERVICES PAGE
---------------------------------------------------------------- */
body.enterprise-services-page {
  --cream: #f8f6f1;
  --warm: #f2ede5;
  --warm2: #e8e1d6;
  --bg2: #ffffff;
  --forest: #1a4a35;
  --forest2: #236646;
  --forest3: #2d8057;
  --forest-lite: rgba(26, 74, 53, .08);
  --forest-mid: rgba(26, 74, 53, .15);
  --forest-glow: rgba(26, 74, 53, .2);
  --ink: #0f1a0e;
  --ink2: #1c2e1a;
  --slate: #4a6045;
  --muted: #7a9278;
  --border: #dde8da;
  --border2: #c8d8c5;
  --gold: #b8870a;
  --gold2: #d4a012;
  --amber: #d97706;
  --blue: #2563eb;
  --font-display: 'Newsreader', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

body.enterprise-services-page .hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(184, 135, 10, .15);
  border: 1px solid rgba(184, 135, 10, .35);
  color: var(--gold2);
  padding: 8px 20px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

body.enterprise-services-page .hl-dot {
  width: 6px;
  height: 6px;
  background: var(--gold2);
  border-radius: 50%;
  animation: hldot 2s ease-in-out infinite;
}

body.enterprise-services-page .hero-title {
  font-family: var(--font-display);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.5px;
  color: #fff;
  margin-bottom: 28px;
}

body.enterprise-services-page .hero-title em {
  font-style: italic;
  color: var(--gold2);
}

body.enterprise-services-page .hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .68);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 460px;
}

body.enterprise-services-page .hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

body.enterprise-services-page .btn-gold {
  padding: 15px 38px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--ink);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 32px rgba(184, 135, 10, .25);
  transition: all .3s var(--ease);
  border: none;
  cursor: pointer;
}

body.enterprise-services-page .btn-ghost-w {
  padding: 15px 38px;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  cursor: pointer;
}

body.enterprise-services-page .sla-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

body.enterprise-services-page .sla-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .5);
}

body.enterprise-services-page .sla-item i {
  color: var(--gold2);
}

body.enterprise-services-page .csm-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  padding: 36px;
  backdrop-filter: blur(8px);
}

body.enterprise-services-page .csm-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

body.enterprise-services-page .csm-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest2), var(--forest3));
  border: 3px solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}

body.enterprise-services-page .csm-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

body.enterprise-services-page .csm-role {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px;
}

body.enterprise-services-page .csm-online {
  width: 8px;
  height: 8px;
  background: var(--gold2);
  border-radius: 50%;
  border: 2px solid var(--forest);
  margin-top: 2px;
  animation: onlinePulse 2s ease-in-out infinite;
}

body.enterprise-services-page .csm-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.enterprise-services-page .csm-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: all .3s;
}

body.enterprise-services-page .ct-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

body.enterprise-services-page .cti-g {
  background: rgba(45, 128, 87, .25);
  color: var(--gold2);
}

body.enterprise-services-page .cti-b {
  background: rgba(37, 99, 235, .2);
  color: #60a5fa;
}

body.enterprise-services-page .cti-a {
  background: rgba(217, 119, 6, .15);
  color: #fbbf24;
}

body.enterprise-services-page .ct-title {
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

body.enterprise-services-page .ct-sub {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: rgba(255, 255, 255, .35);
  margin-top: 2px;
}

body.enterprise-services-page .ct-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
}

body.enterprise-services-page .cb-done {
  background: rgba(45, 128, 87, .2);
  color: var(--forest3);
}

body.enterprise-services-page .cb-prog {
  background: rgba(245, 158, 11, .15);
  color: var(--amber);
}

body.enterprise-services-page .cb-sched {
  background: rgba(79, 70, 229, .15);
  color: #818cf8;
}

body.enterprise-services-page .services-section {
  padding: 100px 0;
  background: var(--cream);
}

body.enterprise-services-page .sec-kicker {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--forest2);
  margin-bottom: 14px;
  display: block;
}

body.enterprise-services-page .sec-title {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -.3px;
}

body.enterprise-services-page .sec-title em {
  font-style: italic;
  color: var(--forest2);
}

body.enterprise-services-page .sec-desc {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.78;
}

body.enterprise-services-page .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 60px;
}

body.enterprise-services-page .svc-card {
  background: var(--bg2);
  padding: 48px 36px;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}

body.enterprise-services-page .svc-ic {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 24px;
  transition: all .4s;
  position: relative;
  z-index: 1;
}

body.enterprise-services-page .svc-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

body.enterprise-services-page .svc-card p {
  font-size: .92rem;
  color: var(--slate);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

body.enterprise-services-page .tiers-section {
  padding: 100px 0;
  background: var(--warm);
}

body.enterprise-services-page .tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

body.enterprise-services-page .tier-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px 36px;
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.enterprise-services-page .tier-card.featured {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest2);
}

body.enterprise-services-page .tier-name {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

body.enterprise-services-page .tier-tagline {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 20px;
}

body.enterprise-services-page .tier-desc {
  font-size: .9rem;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 28px;
  flex: 1;
}

body.enterprise-services-page .tier-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 24px;
}

body.enterprise-services-page .tier-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

body.enterprise-services-page .tf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--ink2);
}

body.enterprise-services-page .tier-btn {
  padding: 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all .3s;
  border: none;
  text-align: center;
  display: block;
}

body.enterprise-services-page .tb-outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--border2);
}

body.enterprise-services-page .tb-solid {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--ink);
}

body.enterprise-services-page .faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  background: #fff;
}

body.enterprise-services-page .faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

body.enterprise-services-page .faq-a {
  display: none;
  color: var(--slate);
  line-height: 1.7;
  margin-top: 12px;
}

body.enterprise-services-page .faq-item.open .faq-a {
  display: block;
}

body.enterprise-services-page .sp {
  padding: 100px 0
}

body.enterprise-services-page .sp-sm {
  padding: 80px 0
}

body.enterprise-services-page .services-grid .svc-card:hover,
body.enterprise-services-page .tier-card:hover,
body.enterprise-services-page .team-card:hover,
body.enterprise-services-page .outcome-cell:hover,
body.enterprise-services-page .faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(15, 26, 14, .08)
}

body.enterprise-services-page .svc-card {
  display: flex;
  flex-direction: column;
  gap: 14px
}

body.enterprise-services-page .svc-ic.sci-f {
  background: rgba(26, 74, 53, .08);
  color: var(--forest2)
}

body.enterprise-services-page .svc-ic.sci-g {
  background: rgba(45, 128, 87, .12);
  color: var(--forest3)
}

body.enterprise-services-page .svc-ic.sci-b {
  background: rgba(37, 99, 235, .1);
  color: var(--blue)
}

body.enterprise-services-page .svc-ic.sci-a {
  background: rgba(217, 119, 6, .1);
  color: var(--amber)
}

body.enterprise-services-page .svc-ic.sci-p {
  background: rgba(168, 85, 247, .1);
  color: #8b5cf6
}

body.enterprise-services-page .svc-ic.sci-s {
  background: rgba(26, 74, 53, .08);
  color: var(--forest2)
}

body.enterprise-services-page .svc-includes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px
}

body.enterprise-services-page .si-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--ink2)
}

body.enterprise-services-page .si-item i {
  color: var(--forest3)
}

body.enterprise-services-page .tier-featured-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(212, 160, 18, .15);
  color: var(--gold2)
}

body.enterprise-services-page .tier-card.featured .tier-name,
body.enterprise-services-page .tier-card.featured .tier-tagline,
body.enterprise-services-page .tier-card.featured .tier-desc,
body.enterprise-services-page .tier-card.featured .tf-item {
  color: rgba(255, 255, 255, .92)
}

body.enterprise-services-page .tier-card.featured .tier-divider {
  background: rgba(255, 255, 255, .14)
}

body.enterprise-services-page .tf-item.dim {
  opacity: .45
}

body.enterprise-services-page .tb-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--ink)
}

body.enterprise-services-page .journey-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 60px
}

body.enterprise-services-page .jt-step {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  box-shadow: 0 16px 34px rgba(15, 26, 14, .06)
}

body.enterprise-services-page .jt-circle {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--forest-lite);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest2);
  font-size: 1.1rem;
  margin-bottom: 14px
}

body.enterprise-services-page .jt-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px
}

body.enterprise-services-page .jt-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px
}

body.enterprise-services-page .jt-desc {
  font-size: .86rem;
  color: var(--slate);
  line-height: 1.65
}

body.enterprise-services-page .jt-time {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--forest2)
}

body.enterprise-services-page .team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px
}

body.enterprise-services-page .team-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 16px 34px rgba(15, 26, 14, .06)
}

body.enterprise-services-page .tc-av {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest2), var(--forest3));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 14px
}

body.enterprise-services-page .tc-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink)
}

body.enterprise-services-page .tc-role {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 12px
}

body.enterprise-services-page .tc-bio {
  font-size: .86rem;
  color: var(--slate);
  line-height: 1.65
}

body.enterprise-services-page .outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px
}

body.enterprise-services-page .outcome-cell {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
  box-shadow: 0 16px 34px rgba(15, 26, 14, .06)
}

body.enterprise-services-page .oc-num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  color: var(--forest2);
  line-height: 1
}

body.enterprise-services-page .oc-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 10px
}

body.enterprise-services-page .oc-sub {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px
}

body.enterprise-services-page .testimonial-section {
  padding: 100px 0;
  background: var(--warm)
}

body.enterprise-services-page .test-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 18px 40px rgba(15, 26, 14, .06)
}

body.enterprise-services-page .ti-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold2);
  display: block;
  margin-bottom: 14px
}

body.enterprise-services-page .ti-quote {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 18px
}

body.enterprise-services-page .ti-author {
  display: flex;
  align-items: center;
  gap: 12px
}

body.enterprise-services-page .tia-av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest2), var(--forest3));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
}

body.enterprise-services-page .tia-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink)
}

body.enterprise-services-page .tia-role {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted)
}

body.enterprise-services-page .tir-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px
}

body.enterprise-services-page .tirm {
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-align: center
}

body.enterprise-services-page .tirm-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--forest2)
}

body.enterprise-services-page .tirm-lbl {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px
}

body.enterprise-services-page .faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px
}

body.enterprise-services-page .faq-q-text {
  display: block;
  padding-right: 14px
}

body.enterprise-services-page .faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm);
  color: var(--forest2);
  flex-shrink: 0
}

body.enterprise-services-page .ent-cta .cta-box {
  background: linear-gradient(135deg, var(--forest), #0f2418);
  border-radius: 20px;
  padding: 80px 60px;
  text-align: center;
  border: 1px solid rgba(35, 102, 70, .22);
  position: relative;
  overflow: hidden;
  color: #fff
}

body.enterprise-services-page .ent-cta .cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(45, 128, 87, .16) 0%, transparent 55%);
  pointer-events: none
}

body.enterprise-services-page .ent-cta .cta-box h2 {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1.05;
  margin-bottom: 18px;
  color: #fff
}

body.enterprise-services-page .ent-cta .cta-box h2 em {
  color: var(--gold2)
}

body.enterprise-services-page .ent-cta .cta-box p {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75
}

body.enterprise-services-page .ent-cta .cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap
}

body.enterprise-services-page .ent-cta .btn-ghost-w {
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .9)
}

/* ----------------------------------------------------------------
   HOMEPAGE-STYLE DARK THEME OVERRIDES FOR INTERNAL PAGES
---------------------------------------------------------------- */
body.integration-page::before,
body.security-page::before,
body.enterprise-services-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 18%, white 0%, transparent 72%);
  opacity: .55;
  z-index: 0;
}

body.integration-page .hero-bc,
body.integration-page .hero-bc a,
body.security-page .hero-bc,
body.security-page .hero-bc a,
body.enterprise-services-page .hero-bc,
body.enterprise-services-page .hero-bc a,
body.integration-page .sec-desc,
body.security-page .sec-desc,
body.enterprise-services-page .sec-desc,
body.integration-page .hero-desc,
body.security-page .hero-desc,
body.enterprise-services-page .hero-desc {
  color: rgba(255, 255, 255, .72);
}

body.integration-page .integrations-section,
body.integration-page .connect-section,
body.integration-page .combos-section,
body.integration-page .int-cta,
body.security-page .layers-section,
body.security-page .compliance-section,
body.security-page .dataflow-section,
body.security-page .encryption-section,
body.security-page .pentest-section,
body.security-page .disclosure-section,
body.security-page .metrics-section,
body.security-page .trust-cta,
body.enterprise-services-page .services-section,
body.enterprise-services-page .tiers-section,
body.enterprise-services-page .journey-section,
body.enterprise-services-page .team-section,
body.enterprise-services-page .outcomes-section,
body.enterprise-services-page .testimonial-section,
body.enterprise-services-page .faq-section,
body.enterprise-services-page .ent-cta {
  background: #ffffff;
}

body.integration-page .modern-footer-pro,
body.security-page .modern-footer-pro,
body.enterprise-services-page .modern-footer-pro {
  background: #ffffff !important;
}

body.enterprise-services-page .services-grid,
body.enterprise-services-page .tiers-grid,
body.enterprise-services-page .journey-timeline,
body.enterprise-services-page .team-grid,
body.enterprise-services-page .outcomes-grid,
body.enterprise-services-page .faq-list {
  color: #0f1a0e;
}

body.enterprise-services-page .services-section .sec-title,
body.enterprise-services-page .tiers-section .sec-title,
body.enterprise-services-page .journey-section .sec-title,
body.enterprise-services-page .team-section .sec-title,
body.enterprise-services-page .outcomes-section .sec-title,
body.enterprise-services-page .faq-section .sec-title {
  color: #100746;
}

/* ----------------------------------------------------------------
   INTEGRATIONS PAGE LIGHT HEADER / LIGHTER PALETTE
---------------------------------------------------------------- */
body.integration-page {
  background: #ffffff;
  color: #100746;
}

body.integration-page::before {
  opacity: .15;
  mask-image: radial-gradient(circle at 50% 18%, white 0%, transparent 78%);
}

body.integration-page .int-hero {
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%) !important;
  color: #ffffff;
  padding-top: 180px;
}

body.integration-page .int-hero::before,
body.integration-page .int-hero::after {
  opacity: .5;
}

body.integration-page .hero-chip {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .82);
}

body.integration-page .hero-title,
body.integration-page .hero-desc,
body.integration-page .hero-bc,
body.integration-page .hero-bc a,
body.integration-page .hs-lbl,
body.integration-page .int-count,
body.integration-page .combo-card p,
body.integration-page .cs-step p {
  color: rgba(255, 255, 255, .75);
}

body.integration-page .hero-title .indigo {
  color: #818cf8;
}

body.integration-page .hero-title .cyan {
  color: #22d3ee;
}

body.integration-page .network-visual .orbit {
  border-color: rgba(255, 255, 255, .08);
}

body.integration-page .nv-center {
  box-shadow: 0 18px 45px rgba(79, 70, 229, .18), 0 0 0 1px rgba(255, 255, 255, .08);
}

body.integration-page .int-search input,
body.integration-page .cf-btn,
body.integration-page .int-card,
body.integration-page .combo-card,
body.integration-page .cta-box,
body.integration-page .cs-num,
body.integration-page .combo-logo {
  background: #ffffff;
}

body.integration-page .integrations-section,
body.integration-page .connect-section {
  background: #ffffff;
}

body.integration-page .combos-section,
body.integration-page .int-cta {
  background: #f8fbff;
}

body.integration-page .int-card,
body.integration-page .combo-card,
body.integration-page .cta-box {
  border-color: rgba(30, 111, 217, .12);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

body.integration-page .ic-name,
body.integration-page .combo-card h3,
body.integration-page .cs-step h3,
body.integration-page .cta-box h2 {
  color: #100746;
}

body.integration-page .ic-desc,
body.integration-page .hs-lbl,
body.integration-page .combo-link,
body.integration-page .cs-step p,
body.integration-page .cta-box p {
  color: #475569;
}

body.integration-page .modern-footer-pro {
  background: #ffffff !important;
  color: #1e293b !important;
}



body.integration-page .int-hero,
body.security-page .sec-hero,
body.enterprise-services-page .ent-hero {
  padding-top: 220px;
}

@media (max-width: 1100px) {
  body.integration-page .int-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  body.integration-page .combos-grid,
  body.enterprise-services-page .services-grid,
  body.enterprise-services-page .tiers-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.integration-page .connect-steps {
    grid-template-columns: 1fr;
  }

  body.integration-page .connect-steps::before {
    display: none;
  }

  body.security-page .sec-hero .container,
  body.integration-page .int-hero .container,
  body.enterprise-services-page .ent-hero .container {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }
}

@media (max-width: 768px) {

  body.integration-page .int-grid,
  body.enterprise-services-page .services-grid,
  body.enterprise-services-page .tiers-grid {
    grid-template-columns: 1fr;
  }

  body.integration-page .combos-grid {
    grid-template-columns: 1fr;
  }

  body.integration-page .cta-box {
    padding: 50px 24px;
  }

  body.integration-page .cta-box h2 {
    font-size: 2.6rem;
  }

  body.security-page .hero-title {
    font-size: 3.5rem;
  }

  body.security-page .hero-trust,
  body.security-page .hero-btns,
  body.integration-page .hero-btns,
  body.integration-page .hero-stats-row,
  body.enterprise-services-page .hero-btns,
  body.enterprise-services-page .sla-row {
    justify-content: center;
  }

  body.enterprise-services-page .hero-title {
    font-size: 3rem;
  }
}

/* Final homepage-style shell override for the 3 internal solution pages */
body.integration-page,
body.security-page,
body.enterprise-services-page {
  background: #ffffff;
  color: #100746;
}

body.integration-page::before,
body.security-page::before,
body.enterprise-services-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 7, 70, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 7, 70, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 18%, white 0%, transparent 78%);
  opacity: .12;
  z-index: 0;
}


body.integration-page .int-hero,
body.security-page .sec-hero,
body.enterprise-services-page .ent-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%) !important;
  color: #ffffff;
  padding-top: 180px;
}

body.integration-page .int-hero::before,
body.integration-page .int-hero::after,
body.security-page .sec-hero::before,
body.security-page .sec-hero::after,
body.enterprise-services-page .ent-hero::before,
body.enterprise-services-page .ent-hero::after {
  opacity: .48;
}

body.integration-page .hero-bc,
body.integration-page .hero-bc a,
body.integration-page .hero-desc,
body.integration-page .sec-desc,
body.security-page .hero-bc,
body.security-page .hero-bc a,
body.security-page .hero-desc,
body.security-page .sec-desc,
body.enterprise-services-page .hero-bc,
body.enterprise-services-page .hero-bc a,
body.enterprise-services-page .hero-desc,
body.enterprise-services-page .sec-desc {
  color: rgba(255, 255, 255, 0.75) !important;
}

body.integration-page .hero-title,
body.security-page .hero-title,
body.enterprise-services-page .hero-title {
  color: #ffffff !important;
}

body.integration-page .int-card,
body.integration-page .combo-card,
body.integration-page .cs-step,
body.integration-page .cta-box,
body.security-page .layer-row,
body.security-page .cert-card,
body.security-page .df-item,
body.security-page .ef-item,
body.security-page .pt-item,
body.security-page .disclosure-card,
body.security-page .metric-card,
body.security-page .faq-item,
body.security-page .trust-cta .cta-box,
body.enterprise-services-page .svc-card,
body.enterprise-services-page .tier-card,
body.enterprise-services-page .jt-step,
body.enterprise-services-page .team-card,
body.enterprise-services-page .outcome-cell,
body.enterprise-services-page .test-inner,
body.enterprise-services-page .faq-item,
body.enterprise-services-page .ent-cta .cta-box {
  background: #ffffff !important;
  border-color: rgba(30, 111, 217, 0.12) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
  color: #100746 !important;
}

body.integration-page .ic-name,
body.integration-page .combo-card h3,
body.integration-page .cs-step h3,
body.integration-page .cta-box h2,
body.security-page .layer-body h3,
body.security-page .cert-card h3,
body.security-page .df-item-name,
body.security-page .ef-text h4,
body.security-page .pt-title,
body.security-page .dl-title,
body.security-page .metric-num,
body.enterprise-services-page .svc-card h3,
body.enterprise-services-page .tier-name,
body.enterprise-services-page .jt-title,
body.enterprise-services-page .tc-name,
body.enterprise-services-page .oc-label,
body.enterprise-services-page .ti-quote,
body.enterprise-services-page .faq-q-text {
  color: #100746 !important;
}

body.integration-page .ic-desc,
body.integration-page .combo-link,
body.integration-page .cs-step p,
body.integration-page .cta-box p,
body.security-page .layer-body p,
body.security-page .cert-card p,
body.security-page .df-item-desc,
body.security-page .ef-text p,
body.security-page .pt-desc,
body.security-page .dl-desc,
body.security-page .metric-text,
body.enterprise-services-page .svc-card p,
body.enterprise-services-page .tier-desc,
body.enterprise-services-page .jt-desc,
body.enterprise-services-page .tc-bio,
body.enterprise-services-page .oc-sub,
body.enterprise-services-page .tia-role,
body.enterprise-services-page .tirm-lbl,
body.enterprise-services-page .faq-a {
  color: #334155 !important;
}

body.integration-page .hero-chip,
body.security-page .security-status,
body.enterprise-services-page .hero-label,
body.security-page .ht-item,
body.security-page .sla-item {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

body.integration-page .hero-title .indigo {
  color: #818cf8 !important;
}

body.integration-page .hero-title .cyan {
  color: #22d3ee !important;
}

body.security-page .hero-title .cyan {
  color: #22d3ee !important;
}

body.security-page .hero-title .dim {
  color: #a5b4fc !important;
}

body.enterprise-services-page .hero-title em {
  color: #fcd34d !important;
}

body.integration-page .network-visual .orbit {
  border-color: rgba(255, 255, 255, 0.08);
}

body.integration-page .nv-center {
  box-shadow: 0 18px 45px rgba(79, 70, 229, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.integration-page .modern-footer-pro,
body.security-page .modern-footer-pro,
body.enterprise-services-page .modern-footer-pro {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Homepage-style overlay shell for the three solution pages */
/* Force the three solution pages into the same homepage-style visual system */
body.integration-page .int-hero,
body.security-page .sec-hero,
body.enterprise-services-page .ent-hero {
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%) !important;
  color: #ffffff !important;
}

body.integration-page .int-hero .container,
body.security-page .sec-hero .container,
body.enterprise-services-page .ent-hero .container {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: center;
}

body.integration-page .integrations-section,
body.integration-page .connect-section,
body.integration-page .combos-section,
body.integration-page .int-cta,
body.security-page .layers-section,
body.security-page .compliance-section,
body.security-page .dataflow-section,
body.security-page .encryption-section,
body.security-page .pentest-section,
body.security-page .disclosure-section,
body.security-page .metrics-section,
body.security-page .trust-cta,
body.enterprise-services-page .services-section,
body.enterprise-services-page .tiers-section,
body.enterprise-services-page .journey-section,
body.enterprise-services-page .team-section,
body.enterprise-services-page .outcomes-section,
body.enterprise-services-page .testimonial-section,
body.enterprise-services-page .faq-section,
body.enterprise-services-page .ent-cta {
  background: #ffffff !important;
}

body.integration-page .int-card,
body.integration-page .combo-card,
body.integration-page .cs-step,
body.integration-page .cta-box,
body.security-page .layer-row,
body.security-page .cert-card,
body.security-page .df-item,
body.security-page .ef-item,
body.security-page .pt-item,
body.security-page .disclosure-card,
body.security-page .metric-card,
body.security-page .faq-item,
body.security-page .trust-cta .cta-box,
body.enterprise-services-page .svc-card,
body.enterprise-services-page .tier-card,
body.enterprise-services-page .jt-step,
body.enterprise-services-page .team-card,
body.enterprise-services-page .outcome-cell,
body.enterprise-services-page .test-inner,
body.enterprise-services-page .faq-item,
body.enterprise-services-page .ent-cta .cta-box {
  background: #ffffff !important;
  border: 1px solid rgba(30, 111, 217, 0.12) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
  color: #100746 !important;
}

body.security-page .enc-terminal,
body.security-page .layers-visual,
body.security-page .df-grid,
body.security-page .enc-features,
body.security-page .pt-timeline,
body.security-page .metrics-grid,
body.enterprise-services-page .services-grid,
body.enterprise-services-page .tiers-grid,
body.enterprise-services-page .journey-timeline,
body.enterprise-services-page .team-grid,
body.enterprise-services-page .outcomes-grid,
body.enterprise-services-page .faq-list {
  background: transparent !important;
}

body.security-page .enc-terminal {
  background: #ffffff !important;
  border: 1px solid rgba(30, 111, 217, 0.12) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
}

body.security-page .et-bar,
body.security-page .et-body {
  background: transparent !important;
}

body.security-page .layer-row .layer-body h3,
body.security-page .layer-row .layer-body p,
body.security-page .cert-card h3,
body.security-page .cert-card p,
body.security-page .df-item-name,
body.security-page .df-item-desc,
body.security-page .ef-text h4,
body.security-page .ef-text p,
body.enterprise-services-page .svc-card h3,
body.enterprise-services-page .svc-card p,
body.enterprise-services-page .tier-name,
body.enterprise-services-page .tier-desc,
body.enterprise-services-page .jt-title,
body.enterprise-services-page .jt-desc,
body.enterprise-services-page .tc-name,
body.enterprise-services-page .tc-bio,
body.enterprise-services-page .oc-label,
body.enterprise-services-page .oc-sub,
body.enterprise-services-page .ti-quote,
body.enterprise-services-page .faq-q-text,
body.enterprise-services-page .faq-a {
  color: #100746 !important;
}

body.integration-page .hero-desc,
body.integration-page .hero-bc,
body.integration-page .hero-bc a,
body.security-page .hero-desc,
body.security-page .hero-bc,
body.security-page .hero-bc a,
body.enterprise-services-page .hero-desc,
body.enterprise-services-page .hero-bc,
body.enterprise-services-page .hero-bc a {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.integration-page .modern-footer-pro,
body.security-page .modern-footer-pro,
body.enterprise-services-page .modern-footer-pro {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.integration-page .floating-chat-bubble,
body.security-page .floating-chat-bubble,
body.enterprise-services-page .floating-chat-bubble {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 70px;
  height: 70px;
  background: #0069ff !important;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 15px 35px rgba(0, 105, 255, 0.4);
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.integration-page .floating-chat-bubble:hover,
body.security-page .floating-chat-bubble:hover,
body.enterprise-services-page .floating-chat-bubble:hover {
  transform: translateY(-8px) scale(1.1);
  background: #100746 !important;
  box-shadow: 0 20px 45px rgba(16, 7, 70, 0.3);
}

/* Final solution-page shell override
   Keep these three pages aligned with the home page header behavior and prevent
   earlier duplicate rules from pulling the layout in different directions. */
body.integration-page .integrations-section,
body.integration-page .connect-section,
body.integration-page .combos-section,
body.integration-page .int-cta,
body.security-page .layers-section,
body.security-page .compliance-section,
body.security-page .dataflow-section,
body.security-page .encryption-section,
body.security-page .pentest-section,
body.security-page .disclosure-section,
body.security-page .metrics-section,
body.security-page .trust-cta,
body.enterprise-services-page .services-section,
body.enterprise-services-page .tiers-section,
body.enterprise-services-page .journey-section,
body.enterprise-services-page .team-section,
body.enterprise-services-page .outcomes-section,
body.enterprise-services-page .testimonial-section,
body.enterprise-services-page .faq-section,
body.enterprise-services-page .ent-cta {
  position: relative;
  z-index: 1;
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: slideInRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  padding: 44px 0;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow: visible;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.orbit-engine {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 500px;
  flex-shrink: 0;
  margin: 0 auto;
  /* Subtle ambient glow beneath engine on dark bg */
  filter: drop-shadow(0 0 60px rgba(247, 122, 29, 0.12));
}

@media (max-width: 1200px) {
  .orbit-engine {
    height: 480px;
  }
}

@media (max-width: 1024px) {
  .orbit-engine {
    height: 380px;
  }

  .hero-visual {
    justify-content: center;
    padding: 20px 0;
  }
}

/* ── Orbital Rings ── */
.orbit-ring-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid transparent;
}

/* Ring A — large, tilted on X */
.ring-wrap-1 {
  animation: spinRingA 18s linear infinite;
  transform-style: preserve-3d;
}

.ring-a {
  width: min(850px, 92%);
  height: min(850px, 92%);
  aspect-ratio: 1 / 1;
  border-color: rgba(247, 122, 29, 0.55) rgba(247, 122, 29, 0.08) rgba(247, 122, 29, 0.55) rgba(247, 122, 29, 0.08);
  box-shadow: 0 0 30px rgba(247, 122, 29, 0.12), inset 0 0 20px rgba(247, 122, 29, 0.04);
}

@keyframes spinRingA {
  from {
    transform: rotateX(70deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(70deg) rotateZ(360deg);
  }
}

/* Ring B — medium, blue-violet accent */
.ring-wrap-2 {
  animation: spinRingB 11s linear infinite reverse;
  transform-style: preserve-3d;
}

.ring-b {
  width: min(600px, 68%);
  height: min(600px, 68%);
  aspect-ratio: 1 / 1;
  border-color: rgba(168, 85, 247, 0.4) rgba(168, 85, 247, 0.05) rgba(168, 85, 247, 0.4) rgba(168, 85, 247, 0.05);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
}

@keyframes spinRingB {
  from {
    transform: rotateY(60deg) rotateZ(0deg);
  }

  to {
    transform: rotateY(60deg) rotateZ(360deg);
  }
}

/* Ring C — inner, teal/cyan accent */
.ring-wrap-3 {
  animation: spinRingC 7s linear infinite;
}

.ring-c {
  width: min(360px, 42%);
  height: min(360px, 42%);
  aspect-ratio: 1 / 1;
  border-color: rgba(56, 189, 248, 0.6) rgba(56, 189, 248, 0.1) rgba(56, 189, 248, 0.6) rgba(56, 189, 248, 0.1);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.2), 0 0 6px rgba(56, 189, 248, 0.4);
}

@keyframes spinRingC {
  from {
    transform: rotateX(80deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(80deg) rotateZ(360deg);
  }
}

/* ── Center Core Orb ── */
.orbit-core-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.orbit-core {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-inner {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #F77A1D 0%, #ea580c 50%, #c2440a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.2rem;
  box-shadow:
    0 0 0 6px rgba(247, 122, 29, 0.15),
    0 0 40px rgba(247, 122, 29, 0.5),
    0 0 90px rgba(247, 122, 29, 0.25),
    0 0 160px rgba(247, 122, 29, 0.1);
  animation: coreBreath 4s ease-in-out infinite;
  z-index: 10;
  position: relative;
  border: 2px solid rgba(255, 200, 100, 0.3);
}

@keyframes coreBreath {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(247, 122, 29, 0.15), 0 0 40px rgba(247, 122, 29, 0.5), 0 0 90px rgba(247, 122, 29, 0.25);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 10px rgba(247, 122, 29, 0.12), 0 0 60px rgba(247, 122, 29, 0.65), 0 0 130px rgba(247, 122, 29, 0.3);
  }
}

.core-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(247, 122, 29, 0.4);
  animation: corePulseExpand 3s ease-out infinite;
}

.core-pulse.p2 {
  animation-delay: 1s;
}

.core-pulse.p3 {
  animation-delay: 2s;
}

@keyframes corePulseExpand {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* ── SVG Dashed Lines ── */
.orbit-lines-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.orbit-svg-line {
  stroke-width: 2;
  stroke-dasharray: 4 6;
  stroke-dashoffset: 0;
  animation: dashFlow 3s linear infinite;
}

.orbit-svg-line:nth-child(1) {
  animation-delay: 0s;
}

.orbit-svg-line:nth-child(2) {
  animation-delay: 0.8s;
}

.orbit-svg-line:nth-child(3) {
  animation-delay: 1.6s;
}

.orbit-svg-line:nth-child(4) {
  animation-delay: 2.4s;
}

@keyframes dashFlow {
  from {
    stroke-dashoffset: 200;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ── Orbit Metric Cards ── */
.orbit-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Dark glassmorphism for contrast on dark bg */
  background: rgba(15, 24, 42, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 13px 18px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  z-index: 20;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.orbit-card:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  border-color: rgba(247, 122, 29, 0.3);
}

.oc-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.oc-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.oc-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.oc-val {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.92);
}

/* Card positions (N/E/S/W) */
.card-north {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: floatCardNS 5s ease-in-out infinite;
}

.card-east {
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  animation: floatCardEW 6s ease-in-out infinite 1s;
}

.card-south {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: floatCardNS 5.5s ease-in-out infinite 0.5s;
}

.card-west {
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  animation: floatCardEW 7s ease-in-out infinite 1.5s;
}

@keyframes floatCardNS {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

@keyframes floatCardEW {

  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }

  50% {
    transform: translateY(-50%) translateX(-8px);
  }
}

/* ── Micro-Orbs ── */
.micro-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

.mo-1 {
  width: 10px;
  height: 10px;
  background: var(--primary-color);
  box-shadow: 0 0 12px rgba(247, 122, 29, 0.6);
  top: 20%;
  left: 15%;
  animation: microFloat 4s ease-in-out infinite;
}

.mo-2 {
  width: 7px;
  height: 7px;
  background: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
  top: 75%;
  left: 20%;
  animation: microFloat 5s ease-in-out infinite 1.2s;
}

.mo-3 {
  width: 12px;
  height: 12px;
  background: #a855f7;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.6);
  top: 15%;
  right: 15%;
  animation: microFloat 3.5s ease-in-out infinite 0.8s;
}

.mo-4 {
  width: 6px;
  height: 6px;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  bottom: 20%;
  right: 18%;
  animation: microFloat 4.5s ease-in-out infinite 2s;
}

.mo-5 {
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  opacity: 0.5;
  top: 50%;
  left: 5%;
  animation: microFloat 6s ease-in-out infinite 0.4s;
}

@keyframes microFloat {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(8px, -12px);
  }

  50% {
    transform: translate(-5px, -8px);
  }

  75% {
    transform: translate(6px, 4px);
  }
}

/* ── Data Stream Pills ── */
.data-stream {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  width: 100%;
  height: 40px;
  pointer-events: none;
  z-index: 25;
}

.ds-pill {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background: rgba(15, 24, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 7px 14px;
  font-size: 0.73rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  opacity: 0;
  animation: pillRise 8s ease-in-out infinite;
}

.ds-pill i {
  color: #34d399;
  font-size: 0.7rem;
}

.dp-1 {
  animation-delay: 0s;
}

.dp-2 {
  animation-delay: -6.4s;
}

.dp-3 {
  animation-delay: -4.8s;
}

.dp-4 {
  animation-delay: -3.2s;
}

.dp-5 {
  animation-delay: -1.6s;
}

@keyframes pillRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }

  5% {
    opacity: 1;
    transform: translate(-50%, -20px);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, -220px);
  }

  50% {
    opacity: 0;
    transform: translate(-50%, -240px);
  }

  50.01%,
  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
}

/* ── Dashboard Autopilot Window Redesign ── */
.dashboard-window {
  width: 100%;
  background: rgba(10, 18, 36, 0.45);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 100px rgba(247, 122, 29, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(8, 14, 28, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.db-dots {
  display: flex;
  gap: 8px;
}

.db-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red {
  background: #ff5f56;
}

.dot-yellow {
  background: #ffbd2e;
}

.dot-green {
  background: #27c93f;
}

.db-title {
  font-family: 'Fira Code', monospace, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

.db-status {
  font-size: 0.75rem;
  color: #34d399;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-indicator {
  width: 6px;
  height: 6px;
  background: #34d399;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #34d399;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.db-body {
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px;
  position: relative;
}

@media (min-width: 992px) {
  .db-body {
    grid-template-columns: 280px 1fr 280px;
    align-items: center;
    gap: 15px;
  }
}

/* Left Terminal Panel */
.db-terminal {
  background: rgba(3, 7, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  font-family: 'Fira Code', Consolas, Monaco, monospace;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  height: 360px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.4);
}

.term-title {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}

.term-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex-grow: 1;
}

.term-line {
  line-height: 1.4;
  white-space: nowrap;
}

.term-line.cmd {
  color: #60a5fa;
}

.term-line.success {
  color: #34d399;
}

.term-line.info {
  color: rgba(255, 255, 255, 0.85);
}

.term-line.warning {
  color: #fbbf24;
}

.term-line i {
  margin-right: 4px;
}

/* Center Visual Wrap */
.db-center-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Right Stats Panel */
.db-stats-panel {
  background: rgba(3, 7, 18, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 360px;
}

.stats-panel-title {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
}

.stat-label {
  color: rgba(255, 255, 255, 0.6);
}

.stat-value {
  color: #ffffff;
}

.stat-bar-wrapper {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.stat-bar {
  height: 100%;
  border-radius: 4px;
}

/* Confidence circular chart */
.confidence-badge {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.badge-ring {
  width: 42px;
  height: 42px;
}

.circular-chart {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2.8;
}

.circle {
  fill: none;
  stroke: #F77A1D;
  stroke-width: 2.8;
  stroke-linecap: round;
}

.percentage {
  fill: #fff;
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 700;
  text-anchor: middle;
}

.badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.badge-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
}

.badge-desc {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Responsive Hide Rules */
@media (max-width: 991px) {

  .db-terminal,
  .db-stats-panel {
    display: none;
  }

  .db-body {
    padding: 10px 0;
  }
}

:root {
  --primary-color: #1a6fd4;
  /* Vivid Blue */
  --secondary-color: #38bdf8;
  /* Sky Blue */
  --accent-color: #f43f5e;
  --bg-start: #d0eaff;
  /* Very light sky blue */
  --bg-end: #5aaee8;
  /* Medium light blue */
  --topbar-color: #1565c0;
  /* Rich medium blue for top bar */
  --text-white: #ffffff;
  --text-gray: rgba(255, 255, 255, 0.88);
  --header-bg: transparent;
  /* Dynamic glassmorphism */
  --font-main: 'Inter', sans-serif;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --section-padding: 70px;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
}

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

body {
  font-family: var(--font-main);
  background: #ffffff;
  color: #0f172a;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  line-height: 1.6;
}

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

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

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

/* Header & Navigation Styles */
/* Top Bar Consolidated Style */
.top-bar {
  height: 42px;
  /* Precision height */
  background: #1565c0;
  /* Rich medium blue */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1010;
  width: 100%;
  transform: translateY(0);
  opacity: 1;
}

header.sticky-scrolled .top-bar {
  transform: translateY(-100%);
  /* Hides Top Bar on scroll */
  opacity: 0;
  pointer-events: none;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  gap: 24px;
}

.top-bar-item {
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.top-bar-item:hover {
  color: #ffffff;
}

.top-bar-item i {
  color: var(--secondary-color);
  font-size: 0.85rem;
}

/* 2. Main Header (Nav) Styling */
.main-header {
  height: 90px;
  background: var(--header-bg);
  display: flex;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid transparent;
  color: white;
}

header.sticky-scrolled .main-header {
  height: 75px;
  transform: translateY(-42px);
  /* Moves Nav up into the Top Bar's space (TopBar height is 42px) */
  background: rgba(21, 101, 192, 0.92);
  /* Light blue glass on scroll */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 40px rgba(21, 101, 192, 0.3);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  /* Let clicks pass through empty spaces if any */
}

header>* {
  pointer-events: auto;
  /* Re-enable clicks for content */
}

/* Nav Container centering */
.main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  padding: 0 28px !important;
  height: 56px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.logo:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
}

.logo img {
  height: 32px !important;
  width: auto !important;
  display: block !important;
}

/* MOBILE OVERRIDES - HIGH PRIORITY */
@media (max-width: 768px) {
  * {
    box-sizing: border-box !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Container */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    margin: 0 auto !important;
  }

  /* Mobile breadcrumb spacing safety */
  .breadcrumb,
  .hero-breadcrumb,
  .aia-breadcrumb,
  .perf-breadcrumb,
  .pov-breadcrumb,
  .prc-breadcrumb,
  .about-breadcrumb,
  .career-breadcrumb,
  .contact-breadcrumb,
  .blog-breadcrumb,
  .docs-breadcrumb {
    margin-top: 30px !important;
  }

  /* Header */
  .main-header .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Nav Links */
  .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #020617 !important;
    flex-direction: column !important;
    padding: 100px 25px 30px !important;
    gap: 15px !important;
    transition: right 0.35s ease !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    /* Ensure display flex is applied */
  }

  .nav-links.active {
    right: 0 !important;
  }

  .nav-item {
    font-size: 1.05rem !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    width: 100% !important;
    color: white !important;
  }

  /* Mobile Menu Toggle */
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    !important;
    cursor: pointer !important;
    color: white !important;
    font-size: 0.9rem !important;
    z-index: 100000 !important;
  }

  /* Top Bar */
  .top-bar {
    padding: 8px 0 !important;
  }

  .top-bar .container {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .top-bar-left,
  .top-bar-right {
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .top-bar-item {
    font-size: 0.78rem !important;
  }

  /* Hero */
  .hero {
    padding: 160px 0 70px !important;
    min-height: auto !important;
  }

  .hero .container {
    padding: 0 15px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-badge-wrapper {
    margin-bottom: 20px !important;
  }

  .hero-title {
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
  }

  .hero-description {
    font-size: 1rem !important;
    margin-bottom: 30px !important;
    max-width: 100% !important;
  }

  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-trust-island {
    margin-top: 30px !important;
    width: 100% !important;
  }

  /* Section Alignment */
  section {
    padding: 80px 0 !important;
  }

  /* Client Logos */
  .scroller-wrapper {
    padding: 20px 0 !important;
  }

  .scroller-track {
    gap: 20px !important;
  }

  .logo-box {
    width: auto !important;
    min-width: 120px !important;
  }

  /* Unified Platform Tabs */
  .unified-platform .tabs-sidebar {
    gap: 8px !important;
    padding: 10px !important;
  }

  .unified-platform .tab-link {
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
  }

  .unified-platform .service-layout {
    grid-template-columns: 1fr !important;
  }

  /* Hide Mega Menus */
  .mega-menu,
  .standard-dropdown {
    display: none !important;
  }

  /* Grid Columns */
  .features-grid,
  .features-grid--3up {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }

  /* Images */
  img {
    max-width: 100% !important;
  }

  /* Header Actions */
  .header-actions {
    gap: 12px !important;
  }

  .btn-book-demo {
    display: none !important;
  }

  .logo {
    flex-shrink: 0 !important;
  }

  .logo img {
    flex-shrink: 0 !important;
  }
}

/* ALL SECTIONS MOBILE ALIGNMENT */
@media (max-width: 768px) {

  /* Section Headers */
  .section-header {
    text-align: center !important;
    padding: 0 15px !important;
  }

  .section-title {
    font-size: 2rem !important;
  }

  .section-desc {
    font-size: 1rem !important;
  }

  /* Features Grid */
  .features {
    padding: 40px 0 !important;
  }

  .feature-card {
    padding: 25px !important;
  }

  /* Testimonials */
  .testimonials-3d-section {
    padding: 40px 0 !important;
  }

  /* Client Logos */
  .scroller-wrapper {
    padding: 25px 0 !important;
  }

  .logo-box img {
    max-height: 60px !important;
  }

  /* Pricing / Booking */
  .pricing-section,
  .book-demo-section,
  .why-demo-section {
    padding: 40px 0 !important;
  }

  .demo-form-wrapper {
    padding: 30px 20px !important;
  }

  .form-row--split {
    grid-template-columns: 1fr !important;
  }

  .checkbox-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer */
  .modern-footer-pro {
    padding: 60px 0 30px !important;
  }

  .footer-inner {
    flex-direction: column !important;
    gap: 40px !important;
  }

  /* Pulse Bridge CTA */
  .pulse-bridge-cta {
    padding: 40px 0 !important;
  }

  .pulse-bridge-cta .container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 25px !important;
  }

  .pulse-bridge-cta .pulse-content h3 {
    font-size: 1.6rem !important;
  }
}

/* TINY SCREEN OVERRIDES */
@media (max-width: 480px) {
  .nav-links {
    width: 92% !important;
  }

  .hero-title {
    font-size: 1.8rem !important;
  }

  .hero-description {
    font-size: 0.95rem !important;
  }

  .section-title {
    font-size: 1.7rem !important;
  }
}

.nav-links {
  display: flex;
  gap: 30px;
  /* Precise spacing */
}

.nav-item {
  position: relative;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  color: #ffffff !important;
  /* Force high-contrast white */
  opacity: 0.85;
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
}

.nav-item:hover {
  opacity: 1;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.nav-item i {
  font-size: 0.7rem;
}

.btn-book-demo {
  padding: 10px 24px;
  background: var(--primary-color);
  color: white;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.btn-book-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);
  background: #3b82f6;
}

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

.mega-menu,
.standard-dropdown {
  position: absolute;
  top: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  color: #333;
  margin-top: 0;
  z-index: 1000;
}

.mega-menu {
  left: 50%;
  /* Center relative to link */
  transform: translateX(-50%) translateY(20px);
  width: 750px;
  display: flex;
}

.standard-dropdown {
  left: 0;
  width: 260px;
  padding: 15px 0;
  transform: translateY(20px);
  display: block;
}

.has-mega:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.has-dropdown:hover .standard-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.standard-dropdown a {
  display: block;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  transition: all 0.3s ease;
}

.standard-dropdown a:hover {
  background: #f8faff;
  color: #0069ff;
  padding-left: 30px;
}

.mega-left {
  flex: 1.5;
  padding: 30px;
  /* Reduced padding */
  display: flex;
  flex-direction: column;
}

.mega-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 25px;
}

.mega-icon-bg {
  width: 50px;
  height: 50px;
  background: #f0f7ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0069ff;
  font-size: 1.3rem;
}

.mega-header h3 {
  font-size: 1.4rem;
  color: #100746;
  margin-bottom: 5px;
}

.mega-header p {
  color: #666;
  font-size: 0.95rem;
}

.mega-link-grid {
  display: flex;
  gap: 40px;
}

.mega-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.mega-col a {
  display: block;
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 10px;
  font-weight: 400;
}

.mega-col a:hover {
  color: #0069ff;
  transform: translateX(5px);
}

.mega-right {
  flex: 1;
  background: #f8faff;
  padding: 30px;
  border-left: 1px solid #eff2f6;
  max-width: 250px;
  /* Smaller right section */
}

.mega-promo img {
  width: 100%;
  max-width: 180px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.mega-promo:hover img {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 20px 45px rgba(0, 105, 255, 0.2);
}

@keyframes promoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.promo-text h5 {
  font-size: 1.1rem;
  color: #100746;
  margin-bottom: 8px;
}

.promo-text p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.promo-btn {
  display: inline-block;
  padding: 8px 15px;
  background: #100746;
  color: white !important;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
}

.promo-btn:hover {
  background: #0069ff;
}

.header-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.header-action-text {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  color: white;
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  display: none;
  /* Hide on desktop */
  transition: all 0.3s ease;
}

.header-action-text:hover {
  background: white;
  color: #100746;
}

/* Show only menu toggle on mobile below */
@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mat-hero {
    padding-top: 80px;
  }
}

.btn-book-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: linear-gradient(135deg, #0069ff 0%, #00d2ff 100%);
  color: white;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 20px rgba(0, 105, 255, 0.25);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn-book-demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: all 0.6s ease;
}

.btn-book-demo:hover::before {
  left: 100%;
}

.btn-book-demo:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 105, 255, 0.45);
  background: linear-gradient(135deg, #0069ff 0%, #00e0ff 100%);
}

@media (max-width: 480px) {
  .btn-book-demo {
    padding: 10px 20px;
    font-size: 0.85rem;
  }
}

.header-action-icon:hover {
  color: var(--primary-color);
  transform: translateY(-2px);
}

/* Luminous Fluid Mesh Hero Background */
.hero {
  padding: 180px 0 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #002ae5 0%, #0b4260 40%, #024f82 100%);
  /* Bright light-blue gradient */
  color: white;
}

/* 1. Immersive Multi-Layer Background System */
.hero-background-animations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Moving Orbs (Self-Animated Layer) */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.4;
  animation: floatOrb 25s infinite alternate ease-in-out;
}

.orb-1 {
  width: 800px;
  height: 800px;
  background: linear-gradient(135deg, #90caf9, #1976d2);
  top: -20%;
  left: -10%;
  animation-duration: 30s;
  opacity: 0.35;
}

.orb-2 {
  width: 700px;
  height: 700px;
  background: linear-gradient(135deg, #b3e5fc, #0288d1);
  bottom: -15%;
  right: -5%;
  animation-duration: 25s;
  animation-delay: -5s;
  opacity: 0.3;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: #64b5f6;
  top: 40%;
  left: 40%;
  opacity: 0.12;
  animation-duration: 20s;
  animation-delay: -10s;
}

@keyframes floatOrb {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  33% {
    transform: translate(100px, -50px) scale(1.1) rotate(120deg);
  }

  66% {
    transform: translate(-50px, 80px) scale(0.9) rotate(240deg);
  }

  100% {
    transform: translate(0, 0) scale(1) rotate(360deg);
  }
}

/* Oscillating Digital Grid Layer */
.bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
  animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.3;
  }
}

/* ── Hero Boxes Grid Overlay ── */
.hero-boxes-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.85 !important;
}

/* Each generated box cell — fixed 1cm × 1cm tiles, fades at all edges */
.hero-boxes-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 1cm 1cm;
  /* Fade grid out at all four edges */
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  animation: boxGridFade 6s ease-in-out infinite;
}

/* Glowing highlight cells scattered across the small grid */
.hero-boxes-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 1cm 0.7cm at 10% 15%, rgba(255, 255, 255, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 1cm 0.7cm at 30% 28%, rgba(160, 220, 255, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 1cm 0.7cm at 75% 12%, rgba(255, 255, 255, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 1cm 0.7cm at 88% 40%, rgba(160, 220, 255, 0.17) 0%, transparent 70%),
    radial-gradient(ellipse 1cm 0.7cm at 50% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 1cm 0.7cm at 20% 65%, rgba(160, 220, 255, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 1cm 0.7cm at 62% 78%, rgba(255, 255, 255, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 1cm 0.7cm at 90% 82%, rgba(160, 220, 255, 0.14) 0%, transparent 70%);
  animation: boxesGlow 4s ease-in-out infinite alternate;
}

@keyframes boxGridFade {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes boxesGlow {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }

  100% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Cinematic Shooting Beams */
.bg-beams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-beams::before,
.bg-beams::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.3), transparent);
  animation: shootBeam 10s linear infinite;
  opacity: 0.5;
}

.bg-beams::before {
  left: 15%;
  top: -200px;
  animation-duration: 12s;
}

.bg-beams::after {
  right: 25%;
  top: -200px;
  animation-duration: 15s;
  animation-delay: -5s;
}

@keyframes shootBeam {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* Luminous Center Glow (Pulse) */
.hero-center-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 800px;
  background: radial-gradient(circle, rgba(65, 105, 225, 0.2) 0%, rgba(37, 99, 235, 0.08) 50%, transparent 80%);
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
  animation: glowBreathe 12s ease-in-out infinite;
}

@keyframes glowBreathe {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
}

/* Mouse Reactive Focal Glow */
.mouse-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(65, 105, 225, 0.25) 0%, rgba(37, 99, 235, 0.1) 40%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: blur(40px);
  transition: opacity 0.5s ease;
}

/* Ensure the hero container has relative position */
.hero .container {
  position: relative;
  min-height: 800px;
}

.agent-node-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 20;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.agent-node-icon.active {
  opacity: 1;
}

.agent-node-icon i {
  width: 60px;
  height: 60px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  font-size: 1.5rem;
  box-shadow: 0 0 40px rgba(37, 99, 235, 0.3), inset 0 0 20px rgba(96, 165, 250, 0.15);
  position: relative;
  transition: all 0.4s ease;
}

.agent-node-icon.active i {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 50px rgba(37, 99, 235, 0.5), inset 0 0 25px rgba(96, 165, 250, 0.25);
  animation: agentPulse 4s infinite alternate ease-in-out;
}

@keyframes agentPulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.4);
  }

  100% {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(37, 99, 235, 0.6);
  }
}

.agent-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #ffffff;
  background: rgba(37, 99, 235, 0.15);
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s ease 0.4s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.agent-node-icon.active .agent-label {
  opacity: 1;
  transform: translateY(0);
}

/* AI Agent Connection System */
.agent-connection-system {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  width: calc(100% - 30px);
  height: 380px;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

/* Corner Positions (15px inset from 4 sides, moved up above dashboard-window) */
.agent-tl {
  top: 15px;
  left: 15px;
  transform: scale(0.8);
}

.agent-tr {
  top: 15px;
  right: 15px;
  transform: scale(0.8);
}

.agent-br {
  top: 310px;
  right: 15px;
  transform: scale(0.8);
}

.agent-bl {
  top: 310px;
  left: 15px;
  transform: scale(0.8);
}

.agent-tl.active,
.agent-tr.active,
.agent-br.active,
.agent-bl.active {
  transform: scale(1);
}

.connection-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.connection-path {
  fill: none;
  stroke: url(#lineGradient);
  stroke-width: 2.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0.4;
  filter: drop-shadow(0 0 9px rgba(37, 99, 235, 0.5));
  transition: opacity 1s ease;
}

.connection-path.active {
  opacity: 0.7;
  animation: drawSignal 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes drawSignal {
  0% {
    stroke-dashoffset: 2000;
    opacity: 0;
  }

  15% {
    opacity: 0.7;
  }

  50% {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }

  85% {
    opacity: 0.3;
  }

  100% {
    stroke-dashoffset: -2000;
    opacity: 0;
  }
}

/* Pulse animation for the center point */
.hero-center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #60a5fa;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px #2563eb, 0 0 80px rgba(37, 99, 235, 0.4);
  z-index: 10;
}

.hero-center-point::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: translate(-50%, -50%);
  animation: pulseCenter 2.5s infinite;
}

@keyframes pulseCenter {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .agent-connection-system {
    display: none !important;
  }
}

/* Shared Button Base */
.btn {
  padding: 16px 36px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
  background: linear-gradient(135deg, #4169e1, #2563eb);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.6);
  background: linear-gradient(135deg, #60a5fa, #4169e1);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.btn-secondary i {
  color: #00d2ff;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.btn-secondary:hover i {
  transform: scale(1.3);
  filter: drop-shadow(0 0 8px #00d2ff);
}

/* Hero Layout */
.hero::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(65, 105, 225, 0.45) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

.hero .container {
  display: flex;
  flex-direction: column;
  /* Stack vertically */
  align-items: center;
  /* Center horizontally */
  text-align: center;
  /* Center text */
}

.hero-content {
  max-width: 900px;
  margin: 0 auto 50px;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-badge-wrapper {
  margin-bottom: 25px;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--secondary-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hero-title {
  font-family: var(--font-main);
  font-size: clamp(2.5rem, 6vw, 3.2rem);
  /* Dynamic responsive sizing */
  line-height: 1.2;
  margin-bottom: 25px;
  letter-spacing: -2px;
  color: white;
  display: flex;
  flex-flow: row wrap;
  /* Single line with responsive fallback */
  /* justify-content: center; */
  align-items: center;
  gap: 12px;
}

.title-line {
  display: inline-block;
  white-space: nowrap;
  /* Keep individual segments from breaking internally */
  overflow: hidden;
  /* For entrance masking */
  transition: overflow 0.3s ease 1s;
  /* Allow overflow after entrance */
}

.title-line.active {
  overflow: visible;
  /* CRITICAL: Allows 3D Flip without clipping */
}

.title-line span {
  display: block;
  transform: translateY(40px) scaleY(1.15);
  /* Reduced distance and stretch for smoothness */
  transition: transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
  opacity: 0;
  will-change: transform, opacity;
  /* GPU Optimization */
}

.title-line.active span {
  transform: translateY(0) scaleY(1);
  opacity: 1;
}

.text-gradient-main {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
}

.text-gradient {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
}

.text-blue {
  color: var(--primary-color);
}

.platform-intro {
  font-size: 1.1rem;
  color: #64748b;
  margin: 20px 0 10px;
  line-height: 1.6;
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.hero-description {
  font-size: 1.2rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 50px;
  max-width: 650px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  /* Center buttons */
  gap: 20px;
}

.btn {
  padding: 18px 45px;
  border-radius: 100px;
  font-family: var(--font-main);
  font-size: 1.05rem;
  cursor: pointer;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-primary {
  background: #0069ff;
  /* Brighter, more accurate blue */
  color: white;
  border: none;
  box-shadow: 0 12px 24px rgba(0, 105, 255, 0.35);
}

.btn-primary:hover {
  background: #0056cc;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 105, 255, 0.45);
}

.btn-outline {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  transform: translateY(-4px);
}

.hero-image {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: -150px;
  z-index: 20;
}

.hero-slider {
  position: relative;
  width: 100%;
  max-width: 1100px;
  /* Slightly larger */
  height: 480px;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(13, 6, 58, 0.6);
  backdrop-filter: blur(20px);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), 0 0 30px rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px;
}

/* Futuristic Scan Line Effect */
.hero-scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(37, 99, 235, 0) 50%,
      rgba(37, 99, 235, 0.4) 95%,
      rgba(37, 99, 235, 0.8) 100%);
  z-index: 20;
  pointer-events: none;
  animation: scanningBeam 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scanningBeam {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(480px);
    opacity: 0;
  }
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  /* Keep opacity static for wipe effect */
  clip-path: inset(0 0 0 100%);
  /* Start fully clipped from the right */
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1), transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  visibility: visible;
}

.hero-slide.active {
  clip-path: inset(0 0 0 0);
  /* Wipe into full view */
  z-index: 10;
}

/* Optional: Slight zoom when becoming inactive to give depth */
.hero-slide:not(.active) {
  transform: scale(1.1);
  z-index: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Professional fit for dashboard UI */
}

.slider-dots {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.dot {
  width: 30px;
  height: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dot.active {
  width: 45px;
  background: var(--primary-color);
  box-shadow: 0 0 15px var(--primary-color);
}

/* Subtle reflection/shelf shadow under the slider */
.hero-image::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(65, 105, 225, 0.3) 0%, transparent 75%);
  z-index: 0;
  filter: blur(20px);
}

/* Unified Section Utility */
.section-padding {
  padding: 80px 0 60px;
  position: relative;
}

.section-padding-mini {
  padding: 70px 0;
  position: relative;
}

/* Utilities */
.mt-5 {
  margin-top: 4rem !important;
}

/* Redesigned Platform Section Styling */
.platform-section {
  padding: 70px 0 60px;
  background: #f8f9fc;
  border-bottom: 1px solid #eff2f6;
  overflow: hidden;
}

.platform-main {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  margin-bottom: 40px;
}

.platform-left {
  flex: 1.2;
}

.platform-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: #4a5568;
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: block;
}

.platform-title {
  font-size: 2.8rem;
  line-height: 1.2;
  color: #1a202c;
  margin-bottom: 25px;
}

/* Modern Portfolio/Platform Graphic Frames */
.tab-panel {
  perspective: 2000px;
  padding: 40px;
}

.tab-panel img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.15),
    0 0 40px rgba(37, 99, 235, 0.1);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: rotateX(5deg) rotateY(-5deg) rotateZ(1deg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
}

.tab-panel.active img {
  animation: entranceTilt 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes entranceTilt {
  from {
    transform: rotateX(20deg) rotateY(-20deg) rotateZ(5deg) translateY(50px);
    opacity: 0;
  }

  to {
    transform: rotateX(5deg) rotateY(-5deg) rotateZ(1deg) translateY(0);
    opacity: 1;
  }
}

.tab-panel:hover img {
  transform: rotateX(0) rotateY(0) rotateZ(0) scale(1.02);
  box-shadow: 0 60px 120px rgba(37, 99, 235, 0.2);
}

.platform-graphic {
  position: relative;
}

/* Expressive technical overlays */
.tab-panel::after {
  content: 'LIVE SYSTEM ACTIVATED';
  position: absolute;
  top: 60px;
  right: 60px;
  background: rgba(37, 99, 235, 0.9);
  color: white;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  z-index: 10;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  animation: blinkStatus 2s infinite;
}

@keyframes blinkStatus {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes simpleFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

.platform-right {
  flex: 1.8;
}

.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px dotted #cbd5e0;
  border-left: 1px dotted #cbd5e0;
}

.platform-item {
  padding: 60px 40px;
  border-right: 1px dotted #cbd5e0;
  border-bottom: 1px dotted #cbd5e0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

/* Background Color Bloom (Hidden by default) */
.platform-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  z-index: -1;
  border-radius: 50%;
}

.platform-item:hover {
  background: white;
  transform: scale(1.02);
  box-shadow: 0 40px 80px rgba(37, 99, 235, 0.08);
  border-color: #2563eb;
  z-index: 10;
}

.platform-item:hover::before {
  width: 150%;
  height: 150%;
}

/* Custom Bloom Colors for each card */
.platform-item:nth-child(1):hover::before {
  background: radial-gradient(circle, rgba(30, 111, 217, 0.08) 0%, transparent 70%);
}

.platform-item:nth-child(2):hover::before {
  background: radial-gradient(circle, rgba(16, 172, 132, 0.08) 0%, transparent 70%);
}

.platform-item:nth-child(3):hover::before {
  background: radial-gradient(circle, rgba(142, 68, 173, 0.08) 0%, transparent 70%);
}

.platform-item:nth-child(4):hover::before {
  background: radial-gradient(circle, rgba(231, 76, 60, 0.08) 0%, transparent 70%);
}

.grid-icon {
  font-size: 3.5rem;
  margin-bottom: 30px;
  display: block;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.platform-item:hover .grid-icon {
  transform: translateY(-10px) scale(1.1);
  filter: drop-shadow(0 15px 30px currentColor);
}

@keyframes floatingIcon {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-10px) scale(1.05);
  }
}

/* Specific Iconic Colors/Gradients */
.platform-item:nth-child(1) .grid-icon {
  color: #1e6fd9;
  text-shadow: 0 10px 20px rgba(30, 111, 217, 0.2);
}

.platform-item:nth-child(2) .grid-icon {
  color: #10ac84;
  text-shadow: 0 10px 20px rgba(16, 172, 132, 0.2);
}

.platform-item:nth-child(3) .grid-icon {
  color: #8e44ad;
  text-shadow: 0 10px 20px rgba(142, 68, 173, 0.2);
}

.platform-item:nth-child(4) .grid-icon {
  color: #e74c3c;
  text-shadow: 0 10px 20px rgba(231, 76, 60, 0.2);
}

.platform-item h3 {
  font-size: 1.3rem;
  margin-bottom: 18px;
  color: #1a202c;
  line-height: 1.3;
}

.platform-item p {
  font-size: 0.95rem;
  color: #718096;
  line-height: 1.7;
  max-width: 250px;
  margin: 0 auto;
}

/* Platform Footer / ROI Bar */
.platform-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid #cbd5e0;
}

.roi-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roi-item.label {
  font-size: 1rem;
  color: #1a202c;
  white-space: nowrap;
}

.roi-num {
  font-size: 2.2rem;
  font-weight: 700;
}

.color-pink {
  color: #f63e7b;
}

.color-purple {
  color: #8e44ad;
}

.color-red {
  color: #e74c3c;
}

.roi-text {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  color: #4a5568;
}

.roi-arrow {
  font-size: 1.5rem;
  color: #f63e7b;
}

@media (max-width: 1024px) {
  .platform-main {
    flex-direction: column;
    gap: 40px;
  }

  .platform-footer {
    flex-wrap: wrap;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .platform-title {
    font-size: 2rem;
  }

}

/* Infinite Logo Scroller Styling */
.scroller-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 30px 0;
  /* Stronger fading edges for 'Alpha' look */
  mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
}

.scroller-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: infiniteScroll 15s linear infinite;
  gap: 25px;
  /* Comfortable gap for larger logos */
  align-items: center;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 100px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  box-shadow: none;
}

.logo-box img {
  max-width: 170px;
  /* Increased size significantly */
  height: auto;
  filter: none;
  opacity: 1;
  transition: all 0.3s ease;
}

.logo-box:hover {
  transform: translateY(-5px) scale(1.15);
  /* More impactful hover */
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

.logo-box:hover img {
  filter: brightness(1.1);
}

@keyframes infiniteScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.33%);
  }

  /* Perfect loop for the 3 sets in index.html */
}

@media (max-width: 768px) {
  .scroller-track {
    gap: 20px;
  }

  .logo-box {
    width: 140px;
    height: 70px;
    padding: 15px;
  }

  .logo-box img {
    max-width: 80px;
  }
}

/* Enterprise Blueprint Storytelling Redesign */
.story-section {
  padding: 120px 0;
  background: #fcfdfe;
}

.bp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.bp-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.bp-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 40px 80px rgba(0, 60, 255, 0.1);
  border-color: var(--primary-color);
}

.bp-icon {
  width: 100%;
  aspect-ratio: 16/10;
  background: #001f54;
  /* Deep Enterprise Blue */
  border-radius: 8px;
  margin-bottom: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bp-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0.9;
  transition: transform 0.6s;
}

.bp-card:hover .bp-icon img {
  transform: scale(1.1);
}

.bp-tag {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  color: var(--primary-color);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.bp-text h3 {
  font-size: 1.35rem;
  color: #1a202c;
  margin-bottom: 15px;
  line-height: 1.3;
}

.bp-text p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #718096;
  margin: 0;
}

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

@media (max-width: 640px) {
  .bp-grid {
    grid-template-columns: 1fr;
  }
}

.tabs-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

/* Unified Platform Section Sophistication */
.unified-platform {
  position: relative;
  padding: 40px 0 15px;
  overflow: hidden;
  background: #020817;
  /* Deep Midnight Navy Dark Mode */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: white;
  /* Base text color for dark mode */
}

.unified-platform::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
  pointer-events: none;
}

.unified-platform .section-header {
  margin-bottom: 0 !important;
}

.unified-platform .section-title {
  font-size: 3.2rem;
  background: linear-gradient(135deg, #ffffff 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: white;
}

.unified-platform .section-desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.2rem;
  margin-bottom: 0 !important;
}

.unified-platform .service-badge {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
}

.unified-platform .service-title {
  color: #f8fafc !important;
}

.unified-platform .service-desc {
  color: #cbd5e1 !important;
}

.unified-platform .service-capabilities li {
  color: #e2e8f0 !important;
}

.unified-platform .cta-micro {
  color: #94a3b8 !important;
}

.tabs-container {
  max-width: 1000px;
  margin: -45px auto 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.tabs-sidebar {
  width: auto;
  display: flex;
  flex-direction: row;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px);
  padding: 10px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  gap: 10px;
  position: relative;
  z-index: 10;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.tab-link {
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  user-select: none;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
}

.tab-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
  border-radius: 100px;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-secondary i {
  font-size: 0.8rem;
  color: var(--secondary-color);
  transition: transform 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.btn-secondary:hover i {
  transform: scale(1.2) translateX(2px);
  color: #ffffff;
  filter: drop-shadow(0 0 8px var(--secondary-color));
}

/* Radiant Rim Glow - Subtly matching the fluid theme */
.btn-secondary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent);
  transition: 0.5s;
}

.btn-secondary:hover::after {
  left: 100%;
}

.tab-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.tab-link.active {
  color: white;
  box-shadow: 0 15px 30px rgba(0, 105, 255, 0.3);
}

.tab-link.active::before {
  opacity: 1;
  transform: scale(1);
}

.tab-link i {
  font-size: 1rem;
}

.tab-link span {
  font-size: 0.95rem;
  background: transparent;
  color: inherit;
}

.tab-link.active i {
  transform: scale(1.2) rotate(-5deg);
}

.tabs-content {
  width: 100%;
  position: relative;
}

.tab-panel {
  display: none;
  animation: panelEntrance 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  position: relative;
  padding: 20px;
}

.tab-panel.active {
  display: block;
}

@keyframes panelEntrance {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tab-panel img {
  width: 100% !important;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5), 0 0 40px rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #111827;
  /* Darker back for platform images */
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tab-panel:hover img {
  transform: translateY(-8px) scale(1.01) rotateX(0.5deg) rotateY(0.5deg);
  box-shadow: 0 45px 85px -20px rgba(0, 0, 0, 0.6), 0 0 50px rgba(37, 99, 235, 0.25);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Enhanced High-Tech Status Badge for Dark Mode (removed) */
.tab-panel::after {
  display: none;
}

@keyframes statusPulseDark {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.05);
    filter: brightness(1.3);
  }
}

/* AI Activity Simulation Layers */
.panel-simulation {
  position: absolute;
  top: 20px;
  /* Offset for padding */
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

/* --- HIGH-VELOCITY 10S AUTOMATION STORY --- */
.ghost-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 15px #60a5fa, 0 0 0 4px rgba(255, 255, 255, 0.2);
  z-index: 100;
  opacity: 0;
  animation: cursorMove 10s infinite ease-in-out;
}

.simulation-hotspot {
  position: absolute;
  width: 25px;
  height: 25px;
  background: rgba(96, 165, 250, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 5;
  opacity: 0;
}

.tab-panel.active .simulation-hotspot {
  animation: hotspotPulse 10s infinite ease-in-out;
}

.hotspot-1 {
  top: 20%;
  left: 15%;
  animation-delay: 1s !important;
}

.hotspot-2 {
  top: 35%;
  left: 50%;
  animation-delay: 3s !important;
}

.hotspot-3 {
  top: 75%;
  left: 75%;
  animation-delay: 5s !important;
}

.screen-wipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
}

.tab-panel.active .screen-wipe {
  animation: pageTransform 10s infinite cubic-bezier(1, 0, 0, 1);
}

@keyframes pageTransform {

  0%,
  12%,
  85%,
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }

  12.5% {
    opacity: 0.7;
    transform: translateX(0);
  }

  /* Transformation Flash */
  14% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.simulation-popup {
  position: absolute;
  padding: 8px 16px;
  background: rgba(2, 8, 23, 0.9);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  z-index: 110;
}

.tab-panel.active .popup-1 {
  animation: popupShow 10s infinite ease-in-out 3.2s;
  top: 25%;
  left: 45%;
}

.tab-panel.active .popup-2 {
  animation: popupShow 10s infinite ease-in-out 5.2s;
  top: 65%;
  left: 70%;
}

.submit-toast {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background: #10b981;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  z-index: 120;
  box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
}

.tab-panel.active .submit-toast {
  animation: toastReveal 10s infinite ease-in-out 6s;
}

@keyframes cursorMove {
  0% {
    top: 80%;
    left: 80%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  10% {
    top: 20%;
    left: 15%;
  }

  /* Move to click 1 */
  12% {
    transform: scale(0.5);
  }

  14% {
    transform: scale(1);
  }

  28% {
    top: 35%;
    left: 50%;
  }

  /* Move to click 2 */
  30% {
    transform: scale(0.5);
  }

  32% {
    transform: scale(1);
  }

  48% {
    top: 75%;
    left: 75%;
  }

  /* Move to click 3 */
  50% {
    transform: scale(0.5);
  }

  52% {
    transform: scale(1);
  }

  85% {
    top: 75%;
    left: 75%;
    opacity: 1;
  }

  100% {
    top: 80%;
    left: 80%;
    opacity: 0;
  }
}

@keyframes hotspotPulse {

  0%,
  9%,
  16%,
  29%,
  36%,
  49%,
  56%,
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  11%,
  31%,
  51% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 1;
  }

  14%,
  34%,
  54% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

@keyframes popupShow {

  0%,
  15%,
  45%,
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  10%,
  40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastReveal {

  0%,
  25%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }

  5%,
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 1024px) {

  /* Only apply to non-unified-platform tab sidebars */
  :not(.unified-platform) .tabs-sidebar {
    width: 100%;
    max-width: 600px;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 30px;
  }
}

@media (max-width: 768px) {

  /* Only apply to non-unified-platform tab sidebars */
  :not(.unified-platform) .tabs-sidebar {
    gap: 3px;
    padding: 5px;
  }

  :not(.unified-platform) .tab-link {
    padding: 10px 18px;
  }

  :not(.unified-platform) .tab-link span {
    display: none;
  }
}

.section-header {
  margin-bottom: 45px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-tag {
  color: #0069ff;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(0, 105, 255, 0.3);
}



.section-desc {
  font-size: 1.25rem;
  color: #6a6a8e;
  /* Subtle gray-blue for descriptions */
  line-height: 1.6;
  font-weight: 400;
}

/* 3. High-End Feature Grid */
/* Staggered Tech Matrix Features */
.features {
  background: white;
  padding: 60px 0;
  position: relative;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

/* Technical Data Bus (Behind the boxes - Moving Style) */
.tech-data-bus {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.bus-line {
  position: absolute;
  top: 50%;
  /* Passing through the geometric center zone */
  left: -5%;
  width: 110%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #0069ff33, #0069ff, #0069ff33, transparent);
  background-size: 200% 100%;
  opacity: 0.3;
  transform: translateY(-50%);
  animation: signalSweep 10s linear infinite;
}

.bus-node {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #0069ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #0069ff;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.bus-node.node-1 {
  left: 12.5%;
}

.bus-node.node-2 {
  left: 37.5%;
}

.bus-node.node-3 {
  left: 62.5%;
}

.bus-node.node-4 {
  left: 87.5%;
}

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

  100% {
    background-position: -200% 0;
  }
}

/* Card Staggering */
.feature-card:nth-child(even) {
  margin-top: 70px;
}

/* Premium Card Layout */
.feature-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 24px;
  padding: 55px 40px;
  text-align: left;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.02);
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  z-index: 2;
}

/* Glowing Border Trace */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, var(--card-accent, #2563eb), transparent, var(--card-accent, #2563eb));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Theme variables for custom colors */
.feature-card.card-autonomous {
  --card-accent: #3b82f6;
  /* Indigo */
  --card-glow: rgba(59, 130, 246, 0.15);
  --icon-bg: rgba(59, 130, 246, 0.05);
}

.feature-card.card-self-healing {
  --card-accent: #10b981;
  /* Emerald */
  --card-glow: rgba(16, 185, 129, 0.15);
  --icon-bg: rgba(16, 185, 129, 0.05);
}

.feature-card.card-infinite {
  --card-accent: #8b5cf6;
  /* Purple */
  --card-glow: rgba(139, 92, 246, 0.15);
  --icon-bg: rgba(139, 92, 246, 0.05);
}

.feature-card.card-quality {
  --card-accent: #f43f5e;
  /* Rose */
  --card-glow: rgba(244, 63, 94, 0.15);
  --icon-bg: rgba(244, 63, 94, 0.05);
}

/* Hover Interactive States */
.feature-card:hover {
  transform: translateY(-20px) rotateX(4deg) rotateY(-4deg);
  border-color: transparent;
  box-shadow: 0 40px 80px var(--card-glow);
}

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

.feature-icon {
  width: 65px;
  height: 65px;
  background: var(--icon-bg, #f8fbff);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--card-accent, #2563eb);
  margin-bottom: 30px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 2;
  transform: translateZ(20px);
}

.feature-card:hover .feature-icon {
  background: var(--card-accent, #2563eb);
  color: white;
  transform: translateZ(40px) scale(1.15) rotate(10deg);
  box-shadow: 0 15px 30px var(--card-glow);
}

.feature-card h3 {
  font-size: 1.5rem;
  color: #0f172a;
  margin-bottom: 15px;
  letter-spacing: -0.5px;
  transform: translateZ(10px);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.feature-card:hover h3 {
  color: var(--card-accent, #2563eb);
  transform: translateZ(25px);
}

.feature-card p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
  transform: translateZ(5px);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.feature-card:hover p {
  transform: translateZ(15px);
}

/* High-Impact Shine Sweep */
.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: none;
  pointer-events: none;
  z-index: 3;
}

.feature-card:hover::after {
  animation: quickShine 0.8s ease-in-out;
}

@keyframes quickShine {
  0% {
    left: -150%;
  }

  100% {
    left: 150%;
  }
}

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

  .feature-card:nth-child(even) {
    margin-top: 0;
  }

  .features-flow-path {
    display: none;
  }
}

@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* 4. Dashboard Elevation */
.dashboard-section {
  background: #f8faff;
  /* Subtlest blue for secondary background */
}

.dashboard-section::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(16, 62, 205, 0.05) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.dashboard-content {
  display: flex;
  align-items: center;
  gap: 100px;
  position: relative;
  z-index: 1;
}

.dashboard-text {
  flex: 1;
}

.dashboard-text .section-title {
  text-align: left;
}

.check-list {
  margin-top: 35px;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
  font-size: 1.15rem;
  color: #100746;
  font-weight: 500;
}

.check-list i {
  color: #0069ff;
  font-size: 1.35rem;
}

.dashboard-image-wrapper {
  flex: 1.6;
  position: relative;
}

.dashboard-image-wrapper img {
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
  width: 100%;
}

/* 5. Integration Ecosystem Enhancement */
.integrations-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  background: #ffffff;
  padding: 60px;
  border-radius: 30px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
}

.integration-img {
  max-width: 1000px;
  width: 100%;
  filter: grayscale(1) opacity(0.3);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.integrations-logos:hover .integration-img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.02);
}

/* 6. Pulse Bridge CTA (Luminous Styles) */
.pulse-bridge-cta {
  background: #0069ff;
  padding: 80px 0;
  color: white;
  text-align: center;
  border-radius: 40px;
  margin: 60px 20px;
}

.pulse-content h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.pulse-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.btn-pulse-white {
  background: white;
  color: #0069ff;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
}

.btn-pulse-outline {
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
}

/* 7. Sticky CTA refinement */
/* Floating Support Chat Bubble */
.floating-chat-bubble {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 70px;
  height: 70px;
  background: #0069ff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 15px 35px rgba(0, 105, 255, 0.4);
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.floating-chat-bubble:hover {
  transform: translateY(-8px) scale(1.1);
  background: #100746;
  box-shadow: 0 20px 45px rgba(16, 7, 70, 0.3);
}

/* ----------------------------------------------------------------
   MODERN PROFESSIONAL FOOTER (MABL INSPIRED)
---------------------------------------------------------------- */
.modern-footer-pro {
  background: #ffffff;
  padding: 100px 0 0;
  border-top: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: inherit;
}

.footer-inner {
  display: flex;
  gap: 100px;
}

.footer-logo-main {
  height: 48px;
  margin-bottom: 35px;
  filter: brightness(0);
}

.brand-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 45px;
  max-width: 420px;
  font-weight: 400;
}

.footer-trust-badges {
  display: flex;
  gap: 25px;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  border-radius: 12px;
  min-width: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 8px;
  border: 1px solid #f1f5f9;
}

.badge-blue {
  background: #0069ff;
  color: white;
  border: none;
}

.badge-blue i {
  font-size: 1.8rem;
}

.badge-white {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}

.badge-white i {
  font-size: 1.8rem;
  color: #4285f4;
}

.footer-navigation-side {
  flex: 2.8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.f-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 25px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 12px;
}

.f-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f1f5f9;
}

.f-list li {
  margin-bottom: 14px;
}

.f-list a {
  font-size: 1.05rem;
  color: #64748b;
  text-decoration: none;
  transition: all 0.3s;
  font-weight: 500;
}

.f-list a:hover {
  color: #0069ff;
  transform: translateX(5px);
  display: inline-block;
}

.footer-bottom-bar {
  border-top: 1px solid #f1f5f9;
  padding: 40px 0;
}

.bottom-links-group {
  display: flex;
  align-items: center;
  gap: 35px;
  font-size: 0.95rem;
  color: #94a3b8;
  font-weight: 500;
}

.bottom-links-group a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.bottom-links-group a:hover {
  color: #0069ff;
}

.social-circle {
  width: 45px;
  height: 45px;
  background: #000000;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-circle:hover {
  transform: scale(1.15) translateY(-5px);
  background: #0069ff;
}

@media (max-width: 1200px) {
  .footer-inner {
    flex-direction: column;
    gap: 60px;
  }

  .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-description {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .footer-navigation-side {
    grid-template-columns: 1fr;
  }

  .bottom-flex {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .bottom-links-group {
    flex-direction: column;
    gap: 15px;
  }
}

/* Scroll Reveal Initial States */
.reveal,
.reveal-left,
.reveal-item {
  opacity: 0;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal {
  transform: translateY(30px);
}

.reveal-item {
  transform: translateY(40px);
}

.reveal.active,
.reveal-left.active,
.reveal-item.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* Feature Card Glowing Border Effect */
.feature-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, transparent, rgba(30, 111, 217, 0.3), transparent);
  z-index: -1;
  border-radius: 26px;
  box-shadow: 0 0 20px rgba(0, 105, 255, 0.1);
  opacity: 0;
  transition: opacity 0.4s;
}

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

/* Dashboard Image Float/Tilt (Subtle Animation) */
.dashboard-image-wrapper img:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
}

.footer-bottom {
  padding-top: 50px;
  border-top: 1px solid #eff2f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 1rem;
}

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

.bottom-links a:hover {
  color: #fff;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 3.5rem;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(16, 7, 70, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex !important;
    /* Force flex but hidden by offset */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    z-index: 2000;
    transition: all 0.6s cubic-bezier(0.85, 0, 0.15, 1);
    padding: 60px 40px;
    visibility: hidden;
    opacity: 0;
  }

  .nav-links.active {
    right: 0;
    visibility: visible;
    opacity: 1;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    display: block;
    width: 100%;
    padding: 10px;
  }

  .nav-item i {
    display: none;
    /* Hide arrow icons on mobile for cleaner look */
  }

  .mega-menu,
  .standard-dropdown {
    display: none !important;
    /* Simplify mobile view by hiding desktop sub-menus */
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-content {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .hero .container {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    margin: 0 auto 50px;
  }

  .hero-image {
    justify-content: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .top-bar-left {
    display: none;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .dashboard-content {
    flex-direction: column;
    text-align: center;
  }

  .dashboard-text .section-title {
    text-align: center;
  }

  .check-list li {
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .sticky-cta {
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    font-size: 0.9rem;
  }

  .stats-section {
    padding: 150px 0 60px;
  }

  .stat-item::after {
    display: none;
  }

  .stat-number {
    font-size: 2.5rem;
  }
}

/* Vibrant 3D Testimonial Theater */
.testimonials-3d-section {
  background: white;
  padding: 10px 0 50px 0;
  overflow: hidden;
  color: #0f172a;
  background: linear-gradient(135deg, #020617 0%, #1e1b4b 30%, #312e81 60%, #1e1b4b 100%);
  padding: 180px 0;
  position: relative;
  overflow: hidden;
}

/* Floating Vibrant Orbs */
.testimonials-3d-section::before,
.testimonials-3d-section::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 1;
  pointer-events: none;
}

.testimonials-3d-section::before {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent);
  top: -10%;
  right: -5%;
  animation: floatOrbSlow 25s infinite alternate ease-in-out;
}

.testimonials-3d-section::after {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2), transparent);
  bottom: -10%;
  left: -5%;
  animation: floatOrbSlow 20s infinite alternate-reverse ease-in-out;
}

@keyframes floatOrbSlow {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100px, 100px);
  }
}

.testimonials-3d-wrapper {
  display: flex;
  align-items: center;
  gap: 80px;
}

.testimonials-3d-header {
  flex: 1;
  position: relative;
  z-index: 10;
}

.live-icon {
  width: 90px;
  height: 90px;
  border-radius: 24px;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ff3366;
  animation: ringPulse 2s infinite;
}

@keyframes ringPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.live-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #fff !important;
}

.live-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 40px;
  max-width: 450px;
}

.slider-controls {
  display: flex;
  gap: 12px;
}

.slider-controls .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-controls .dot.active {
  background: #ff3366;
  width: 30px;
  border-radius: 5px;
}

/* 3D Stack Logic */
.testimonials-3d-stack {
  flex: 1.2;
  perspective: 1500px;
}

.card-stack-inner {
  position: relative;
  height: 550px;
}

/* High-Contrast White Stack Cards */
.stack-card {
  position: absolute;
  width: 440px;
  background: #ffffff;
  /* Solid Opaque White */
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  top: 50%;
  transform-style: preserve-3d;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Intensity-Enhanced Glow Borders */
.stack-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.8px;
  background: linear-gradient(135deg, #4f46e5, transparent, #9333ea);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0.15;
  /* Subtler on white cards */
  z-index: 5;
}

.primary-card {
  z-index: 3;
  left: 0;
  transform: translateY(-50%) rotateY(-20deg) rotateX(5deg);
  opacity: 1;
}

.secondary-card {
  z-index: 2;
  left: 200px;
  transform: translateY(-45%) rotateY(-25deg) rotateX(10deg) translateZ(-100px);
  opacity: 0.7;
}

.next-card {
  z-index: 1;
  left: 400px;
  transform: translateY(-40%) rotateY(-30deg) rotateX(15deg) translateZ(-200px);
  opacity: 0;
  pointer-events: none;
}

.stack-card:hover {
  transform: translateY(-55%) rotateY(-10deg) rotateX(0deg) translateZ(50px);
  opacity: 1;
  filter: none;
  z-index: 10;
}

.card-body {
  padding: 50px;
  color: #1e293b;
  /* Deep Slate for white cards */
  text-align: left;
}

.card-body .quote {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 40px;
  color: #475569;
  /* Polished charcoal for readability */
  font-weight: 500;
  font-style: italic;
  font-family: 'Inter', sans-serif;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info .user-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #0f172a;
  /* Slate Onyx header on white card */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-info .user-handle {
  font-size: 1rem;
  color: #4f46e5;
  /* Vibrant Indigo Handle */
  font-weight: 600;
}

@media (max-width: 1024px) {
  .testimonials-3d-wrapper {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .live-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .live-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .slider-controls {
    justify-content: center;
  }

  .card-stack-inner {
    height: auto !important;
    display: flex;
    justify-content: center;
  }

  .stack-card {
    position: relative;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto;
    width: 100% !important;
    max-width: 440px !important;
  }

  .secondary-card,
  .next-card {
    display: none !important;
  }
}

/* ----------------------------------------------------------------
   PREMIUM BLOGS SECTION REDESIGN
---------------------------------------------------------------- */
.blogs-section {
  background: #ffffff;
  padding: 50px 0;
}

.blog-featured {
  margin-bottom: 60px;
}

.blog-featured-card {
  display: flex;
  background: #f8fafc;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}

.featured-image {
  flex: 1.2;
  position: relative;
  overflow: hidden;
  background: #000;
}

.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.9;
}

/* Modern Gradient Depth Mask */
.featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 50%, rgba(16, 7, 70, 0.4) 100%);
  pointer-events: none;
}

.blog-featured-card:hover .featured-image img {
  transform: scale(1.1) rotate(1deg);
  opacity: 1;
}

.featured-badge {
  position: absolute;
  top: 30px;
  left: 30px;
  background: #100746;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.featured-badge i {
  color: #ffcc00;
}

.featured-content {
  flex: 1;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

.blog-category {
  background: rgba(0, 105, 255, 0.1);
  color: #0069ff;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.read-time {
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-title {
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 25px;
  font-weight: 700;
}

.featured-title a {
  color: #100746;
}

.featured-title a:hover {
  color: #0069ff;
}

.featured-content p {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 40px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
}

.author-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.author-text {
  display: flex;
  flex-direction: column;
}

.author-name {
  color: #100746;
  font-size: 1.05rem;
}

.author-role {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
}

.btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0069ff;
  font-size: 1rem;
  transition: all 0.3s;
}

.btn-read-more:hover {
  gap: 18px;
}

/* Refined Grid */
.blog-refined-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.refined-blog-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.refined-blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 105, 255, 0.08);
  border-color: rgba(0, 105, 255, 0.1);
}

.card-image-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.refined-blog-card:hover .card-image-wrapper img {
  transform: scale(1.1);
}

.category-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: white;
  color: #100746;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 30px;
  position: relative;
}

.blog-meta-minimal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 500;
}

.dot-separator {
  width: 4px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 50%;
}

.card-content h3 {
  font-size: 1.45rem;
  line-height: 1.4;
  margin-bottom: 40px;
  color: #100746;
}

.card-content h3 a {
  color: inherit;
}

.card-content h3 a:hover {
  color: #0069ff;
}

.card-arrow-link {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  background: #f1f5f9;
  color: #100746;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s;
}

.refined-blog-card:hover .card-arrow-link {
  background: #0069ff;
  color: white;
  transform: rotate(-45deg);
}

/* Explore Hub Button */
.btn-premium-nav {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 18px 45px;
  background: #100746;
  color: white;
  border-radius: 50px;
  font-size: 1.1rem;
  transition: all 0.4s;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}

.btn-premium-nav span {
  position: relative;
  z-index: 2;
}

.btn-premium-nav i {
  position: relative;
  z-index: 2;
  transition: transform 0.4s;
}

.btn-premium-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #0069ff;
  transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
}

.btn-premium-nav:hover::before {
  width: 100%;
}

.btn-premium-nav:hover i {
  transform: translateX(5px);
}

@media (max-width: 1024px) {
  .blog-featured-card {
    flex-direction: column;
  }

  .featured-content {
    padding: 40px;
  }

  .blog-refined-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .blog-refined-grid {
    grid-template-columns: 1fr;
  }

  .featured-title {
    font-size: 1.8rem;
  }

  .blogs-section {
    padding: 80px 0;
  }
}

/* Utility Buttons */
.btn-outline-dark {
  background: transparent;
  color: #100746;
  border: 1.5px solid #100746;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
}

.btn-outline-dark:hover {
  background: #100746;
  color: white;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mt-5 {
  margin-top: 3rem;
}

/* ----------------------------------------------------------------
   INTEGRATIONS PRO SECTION STYLES
---------------------------------------------------------------- */
.integrations-pro-section {
  background: #ffffff;
  padding: 100px 0 !important;
  overflow: hidden;
}

.relative-container {
  position: relative;
  max-width: 1200px !important;
}

/* Grids for surround logos */
.logo-nodes-top,
.logo-nodes-bottom {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 50px;
}

.logo-nodes-bottom {
  margin-bottom: 0;
}

.node {
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #334155;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: all 0.4s ease;
}

.node:hover {
  color: #0069ff;
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 105, 255, 0.1);
  border-color: rgba(0, 105, 255, 0.1);
}

/* Main content grid (Side nodes + Center) */
.integrations-main-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.side-nodes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 250px;
}

.side-left {
  align-items: flex-start;
}

.side-right {
  align-items: flex-end;
}

.large-node {
  background: white;
  padding: 18px 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  font-size: 1.4rem;
  font-weight: 700;
  color: #100746;
  transition: all 0.4s ease;
  white-space: nowrap;
}

.large-node:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.large-node img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.large-node span {
  font-size: 1.1rem;
}

.text-teams {
  color: #5059d4;
}

.text-azure {
  color: #0078d4;
}

.text-git {
  color: #f05032;
}

.text-slate {
  color: #64748b;
}

.text-orange {
  color: #ff9900;
}

.text-yellow {
  color: #ffcc00;
}

.text-blue {
  color: #0069ff;
}

.text-black {
  color: #000000;
}

.text-purple {
  color: #833ab4;
}

.text-green {
  color: #217346;
}

.text-blue-alt {
  color: #00a4ef;
}

/* Redesigned Brand Colors & Hover Animations */
.text-github {
  color: #24292e;
}

.text-gitlab {
  color: #fc6d26;
}

.text-jenkins {
  color: #d24939;
}

.text-jira {
  color: #0052cc;
}

.text-saucelabs {
  color: #e2231a;
}

.text-lambdatest {
  color: #00c2cb;
}

.text-more {
  color: #0069ff;
}

.lambda-icon {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #00c2cb;
  line-height: 1;
  display: inline-block;
  width: 28px;
  text-align: center;
  transition: all 0.4s ease;
}

/* Specific glowing shadows on hover */
.large-node.int-github:hover {
  border-color: #24292e !important;
  box-shadow: 0 15px 35px rgba(36, 41, 46, 0.12) !important;
}

.large-node.int-gitlab:hover {
  border-color: #fc6d26 !important;
  box-shadow: 0 15px 35px rgba(252, 109, 38, 0.15) !important;
}

.large-node.int-jenkins:hover {
  border-color: #d24939 !important;
  box-shadow: 0 15px 35px rgba(210, 73, 57, 0.15) !important;
}

.large-node.int-azure:hover {
  border-color: #0078d4 !important;
  box-shadow: 0 15px 35px rgba(0, 120, 212, 0.15) !important;
}

.large-node.int-jira:hover {
  border-color: #0052cc !important;
  box-shadow: 0 15px 35px rgba(0, 82, 204, 0.15) !important;
}

.large-node.int-saucelabs:hover {
  border-color: #e2231a !important;
  box-shadow: 0 15px 35px rgba(226, 35, 26, 0.15) !important;
}

.large-node.int-lambdatest:hover {
  border-color: #00c2cb !important;
  box-shadow: 0 15px 35px rgba(0, 194, 203, 0.15) !important;
}

.large-node.int-more {
  transition: all 0.3s ease !important;
}

.large-node.int-more:hover {
  border-color: #0069ff !important;
  background: #0069ff !important;
  box-shadow: 0 15px 35px rgba(0, 105, 255, 0.25) !important;
}

.large-node.int-more:hover span,
.large-node.int-more:hover i {
  color: #ffffff !important;
}

/* Center content */
.integrations-pro-content {
  flex: 1;
  max-width: 700px;
}

.pro-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e0f2fe;
  color: #0069ff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 30px;
}

.pro-title {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: #100746;
  margin-bottom: 30px;
  letter-spacing: -1.5px;
}

.pro-desc {
  font-size: 1.3rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-integrations-outline {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 18px 45px;
  border: 2px solid #0069ff;
  color: #0069ff;
  border-radius: 50px;
  font-weight: 850;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-decoration: none;
  background: transparent;
}

.btn-integrations-outline i {
  transition: transform 0.4s ease;
}

.btn-integrations-outline:hover {
  background: #0069ff;
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 105, 255, 0.3);
}

.btn-integrations-outline:hover i {
  transform: translateX(8px);
}

/* Responsive adjustments */
@media (max-width: 1200px) {

  .logo-nodes-top,
  .logo-nodes-bottom {
    gap: 15px;
  }

  .node {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .pro-title {
    font-size: 3rem;
  }
}

@media (max-width: 992px) {
  .integrations-main-grid {
    flex-direction: column;
  }

  .integrations-pro-content {
    order: -1;
    margin-bottom: 40px;
  }

  .side-nodes {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: 20px;
  }
}

@media (max-width: 640px) {

  .logo-nodes-top,
  .logo-nodes-bottom {
    flex-wrap: wrap;
  }

  .side-nodes {
    flex-direction: column;
    align-items: center;
  }

  .pro-title {
    font-size: 2.2rem;
  }

  .pro-desc {
    font-size: 1.1rem;
  }
}

/* ----------------------------------------------------------------
   ENTERPRISE PROFESSIONAL CTA (MODERN LIGHT VERSION)
---------------------------------------------------------------- */
.enterprise-cta-section {
  background: #f8fafc;
  padding: 100px 0;
  overflow: hidden;
}

.enterprise-cta-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 40px;
  padding: 60px;
  position: relative;
  box-shadow: 0 40px 100px rgba(16, 7, 70, 0.05);
}

.enterprise-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.enterprise-left {
  flex: 1.2;
}

.enterprise-badge {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: #0069ff;
  background: rgba(0, 105, 255, 0.08);
  padding: 10px 20px;
  border-radius: 50px;
  margin-bottom: 25px;
}

.enterprise-heading {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 25px;
  color: #100746;
}

.enterprise-desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 30px;
  max-width: 550px;
}

.enterprise-actions {
  display: flex;
  gap: 20px;
}

.btn-enterprise-solid {
  padding: 18px 40px;
  background: #0069ff;
  color: #ffffff;
  border-radius: 50px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn-enterprise-solid:hover {
  background: #0056cc;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 105, 255, 0.2);
}

.btn-enterprise-outline {
  padding: 18px 40px;
  border: 2px solid #e2e8f0;
  color: #100746;
  border-radius: 50px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-enterprise-outline:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.enterprise-right {
  flex: 0.8;
}

.trust-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #f8fafc;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  transition: all 0.3s;
}

.trust-item:hover {
  background: #ffffff;
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.trust-item i {
  font-size: 2rem;
  color: #0069ff;
}

.trust-item h6 {
  font-size: 1.15rem;
  margin-bottom: 4px;
  color: #100746;
}

.trust-item p {
  font-size: 0.95rem;
  color: #94a3b8;
  font-weight: 500;
}

@media (max-width: 1200px) {
  .enterprise-flex {
    flex-direction: column;
    text-align: center;
  }

  .enterprise-left {
    margin-right: 0;
  }

  .enterprise-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .enterprise-actions {
    justify-content: center;
  }

  .enterprise-right {
    width: 100%;
  }

  .trust-grid {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .enterprise-heading {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .enterprise-cta-box {
    padding: 40px 20px;
  }

  .enterprise-heading {
    font-size: 2.5rem;
  }

  .enterprise-actions {
    flex-direction: column;
  }

  .btn-enterprise-solid,
  .btn-enterprise-outline {
    width: 100%;
    justify-content: center;
  }
}

/* ----------------------------------------------------------------
   SCROLL REVEAL ANIMATIONS
---------------------------------------------------------------- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-item {
  opacity: 0;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal,
.reveal-item {
  transform: translateY(50px);
}

.reveal-left {
  transform: translateX(-50px);
}

.reveal-right {
  transform: translateX(50px);
}

/* Section Header Utility */
.section-padding {
  padding: var(--section-padding) 0 !important;
}

.text-center {
  text-align: center;
}

.section-tag {
  display: inline-block;
  padding: 8px 20px;
  /* background: #f1f5f9; */
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 3rem;
  color: #0f172a;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
  line-height: 1.2;
}

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

/* Lifecycle Section Styles */
.lifecycle-section {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  border-top: 1px solid rgba(37, 99, 235, 0.05);
}

.lifecycle-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(244, 63, 94, 0.05) 0%, transparent 40%);
  pointer-events: none;
  animation: bgGlowFloat 20s infinite alternate ease-in-out;
}

/* Floating Particles Effect */
.lifecycle-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#2563eb 0.5px, transparent 0.5px);
  background-size: 60px 60px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

@keyframes bgGlowFloat {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    transform: translateX(-50%) translateY(50px) scale(1.1);
  }
}

.lifecycle-section .section-title {
  color: #0f172a !important;
}

.lifecycle-section .section-desc {
  color: #64748b !important;
}

.lifecycle-section .section-tag {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.1);
  color: #2563eb;
  padding: 8px 20px;
  border-radius: 100px;
  display: inline-block;
  margin: 0 auto 20px;
  font-size: 0.8rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.lifecycle-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 20px 0;
  gap: 30px;
}

.lifecycle-line {
  position: absolute;
  top: 70px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: rgba(37, 99, 235, 0.08);
  /* Clean Base */
  z-index: 1;
  overflow: hidden;
}

/* Data Flow Pulse Effect */
.lifecycle-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(37, 99, 235, 0) 30%,
      #2563eb 50%,
      rgba(37, 99, 235, 0) 70%,
      transparent 100%);
  animation: flowPulse 3s infinite linear;
}

@keyframes flowPulse {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.lifecycle-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ================================================================
   MODERN ABOUT THE COMPANY SECTION
   ================================================================ */
.about-company-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.about-company-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 105, 255, 0.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.about-company-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* LEFT COLUMN */
.about-company-left {
  animation: slideInLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-company-header {
  margin-bottom: 40px;
}

.company-tag {
  display: inline-block;
  background: rgba(0, 105, 255, 0.08);
  color: #0069ff;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid rgba(0, 105, 255, 0.15);
  margin-bottom: 20px;
}

.company-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: #100746;
  letter-spacing: -0.5px;
}

.company-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #64748b;
  margin: 32px 0 40px;
}

.company-benefits {
  display: grid;
  gap: 24px;
}

.benefit-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateX(8px);
}

.benefit-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.1), rgba(0, 105, 255, 0.05));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0069ff;
  font-size: 1.2rem;
  flex-shrink: 0;
  border: 1px solid rgba(0, 105, 255, 0.1);
}

.benefit-text h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #100746;
  margin: 0;
}

/* RIGHT COLUMN */
.about-company-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  animation: slideInRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Experience Card */
.experience-card {
  position: relative;
  background: white;
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 105, 255, 0.1);
  overflow: hidden;
  transition: all 0.4s ease;
}

.experience-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 100px rgba(0, 105, 255, 0.15);
}

.experience-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 105, 255, 0.15), transparent);
  border-radius: 50%;
  pointer-events: none;
}

.experience-number {
  font-size: 4.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0069ff, #103ecd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}

.experience-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.experience-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0069ff, transparent);
}

/* Brand Icons */
.company-brands {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.brand-icon {
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 105, 255, 0.08);
  transition: all 0.4s ease;
}

.brand-icon:hover {
  transform: translateY(-8px) rotate(5deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.brand-apple {
  color: #555;
}

.brand-flutter {
  color: #0069ff;
}

/* CEO Card */
.ceo-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 105, 255, 0.08);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.ceo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.ceo-avatar-wrapper {
  flex-shrink: 0;
}

.ceo-avatar {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(0, 105, 255, 0.15), rgba(0, 105, 255, 0.05));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #0069ff;
  border: 2px solid rgba(0, 105, 255, 0.2);
}

.ceo-info {
  flex: 1;
}

.ceo-name {
  font-size: 1rem;
  font-weight: 800;
  color: #100746;
  letter-spacing: 0.5px;
  margin: 0;
  text-transform: uppercase;
}

.ceo-title {
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 6px 0 0 0;
  font-weight: 500;
}

/* Animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .about-company-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .company-title {
    font-size: 2rem;
  }

  .company-description {
    font-size: 1rem;
  }

  .experience-card {
    padding: 40px 30px;
  }

  .experience-number {
    font-size: 3.5rem;
  }

  .company-benefits {
    gap: 18px;
  }

  .benefit-item {
    gap: 16px;
  }

  .brand-icon {
    width: 70px;
    height: 70px;
    font-size: 1.6rem;
  }

  .ceo-card {
    padding: 24px;
  }

  .ceo-avatar {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }
}

.lifecycle-step:hover {
  transform: translateY(-15px);
}

.step-icon-box {
  width: 100px;
  height: 100px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #2563eb;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08);
  border: 1px solid #f1f5f9;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.lifecycle-step:hover .step-icon-box {
  background: #2563eb;
  color: white;
  transform: translateY(-5px) scale(1.1) rotate(5deg);
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
  border-color: #2563eb;
}

/* Pulse under icon on hover */
.lifecycle-step .step-icon-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #2563eb;
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none;
}

.lifecycle-step:hover .step-icon-box::after {
  animation: stepIconPulse 1.5s infinite;
}

@keyframes stepIconPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.step-number {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, var(--accent-color), #be123c);
  color: white;
  border-radius: 50%;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 15px rgba(244, 63, 94, 0.25);
}

.step-content h3 {
  font-size: 1.4rem;
  color: #0f172a;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.step-content p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* ----------------------------------------------------------------
   LUMINOUS LIGHT FEATURES (CORE BENEFITS)
---------------------------------------------------------------- */
.features {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  padding: 70px 0 10px !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(37, 99, 235, 0.05);
}

/* Atmospheric Soft High-Contrast Orbs */
.features::before,
.features::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.04;
  z-index: 1;
  pointer-events: none;
}

.features::before {
  background: #2563eb;
  top: 10%;
  right: -5%;
}

.features::after {
  background: #f43f5e;
  bottom: 10%;
  left: -5%;
}

/* Feature Header Scoped for Light Theme */
.features .section-title {
  color: #0f172a !important;
  font-weight: 700;
  letter-spacing: -1.5px;
}

.features .section-desc {
  color: #64748b !important;
  max-width: 600px;
  margin: 0 auto;
}

.features .section-tag {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #2563eb;
  padding: 8px 24px;
  border-radius: 100px;
  letter-spacing: 2px;
  margin-bottom: 25px;
  display: inline-block;
  text-transform: uppercase;
}

/* Updated Stats Section ROI */
.roi-item {
  transition: all 0.4s ease;
}

.roi-item:hover {
  transform: scale(1.1);
}

.roi-num {
  font-weight: 900 !important;
  letter-spacing: -2px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Trust Mini Logos in Hero */
.hero-trust {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 1s ease 1s both;
}

.trust-mini-logos {
  display: flex;
  justify-content: center;
  gap: 50px;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.3);
  filter: grayscale(1);
  transition: all 0.4s ease;
}

.trust-mini-logos:hover {
  filter: grayscale(0);
}

.trust-mini-logos i {
  transition: all 0.3s ease;
}

.trust-mini-logos i:hover {
  color: white;
  transform: scale(1.2);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@media (max-width: 992px) {
  .lifecycle-wrapper {
    flex-direction: column;
    padding: 0;
  }

  .lifecycle-line {
    display: none;
  }

  .lifecycle-step {
    flex-direction: row;
    text-align: left;
    margin-bottom: 50px;
    gap: 30px;
    width: 100%;
  }

  .step-icon-box {
    margin-bottom: 0;
    min-width: 90px;
    height: 90px;
  }
}

/* Floating UI Snippets */
.floating-snippets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;
}

.snippet {
  position: absolute;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: drift 10s ease-in-out infinite;
  transition: transform 0.2s ease-out;
}

.snippet i {
  color: #10b981;
}

.snippet-1 {
  top: 20%;
  left: -60px;
  animation-delay: 0s;
}

.snippet-2 {
  top: 50%;
  right: -80px;
  animation-delay: -2s;
}

.snippet-3 {
  bottom: 10%;
  left: -20px;
  animation-delay: -4s;
}

@keyframes drift {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(15px, -15px) rotate(2deg);
  }

  66% {
    transform: translate(-10px, 10px) rotate(-1deg);
  }
}

/* Social Proof styles in Hero */
/* Role Switcher Animation Fix */
#roleText {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  color: var(--secondary-color);
  font-weight: 700;
  min-width: unset;
  /* Let it center naturally */
  text-shadow: 0 0 30px rgba(0, 210, 255, 0.3);
}

.cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 20px;
  border-radius: 100px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 15px;
  /* Spacing from CTA button */
}

/* Volumetric Light behind text */
.hero::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.avatar-stack {
  display: flex;
  margin-right: 5px;
}

.avatar-stack img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #0f172a;
  margin-left: -8px;
  object-fit: cover;
}

.social-text {
  font-size: 0.85rem;
  color: #fff;
  font-weight: 500;
}

/* 3. Hyper-Realistic Dashboard Glow */
.hero-slider::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, #3b82f6, #00d2ff, #f43f5e, #3b82f6);
  background-size: 300% 300%;
  z-index: -1;
  border-radius: 26px;
  filter: blur(25px);
  opacity: 0.5;
  animation: glowMove 8s linear infinite;
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 5. Dynamic CTA Magnet Pulse */
.btn-primary.magnetic-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 2px solid var(--primary-color);
  opacity: 0;
  animation: magnetPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  pointer-events: none;
}

@keyframes magnetPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Role Switcher - 3D Vertical Kinetic Prism Style */
#roleText {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 0 10px;
  white-space: nowrap;
  color: #ffffff !important;
  /* Sharp White Core */
  -webkit-text-fill-color: #ffffff !important;
  /* Force override of parent gradient */
  background: none !important;
  /* Remove any background inheritance */
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.8),
    0 0 25px rgba(59, 130, 246, 0.3);
  position: relative;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  z-index: 10;
}

/* Bottom Sweep Indicator (Minimalist Style) */
#roleText::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #60a5fa, transparent);
  animation: sweepGlow 2s infinite ease-in-out;
}

@keyframes sweepGlow {

  0%,
  100% {
    opacity: 0.3;
    transform: scaleX(0.8);
  }

  50% {
    opacity: 1;
    transform: scaleX(1.1);
  }
}

@keyframes textShimmer {
  to {
    background-position: 200% center;
  }
}

.role-flip-out {
  animation: roleVerticalRollOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.role-flip-in {
  animation: roleVerticalRollIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes roleVerticalRollIn {
  0% {
    opacity: 0;
    transform: translateY(20px) rotateX(-90deg);
    filter: blur(5px) brightness(1.5);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0) brightness(1);
  }
}

@keyframes roleVerticalRollOut {
  0% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) rotateX(90deg);
    filter: blur(5px);
  }
}

/* Mouse Focal Glow (Dynamic - Luminous Fluid Choice) */
.mouse-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(244, 63, 94, 0.05) 40%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  mix-blend-mode: screen;
  filter: blur(40px);
}

/* AI Heartbeat (System Status) */
.hero-status {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 100px;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 30;
  text-transform: uppercase;
}

.pulse-green {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  position: relative;
}

.pulse-green::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #10b981;
  border-radius: 50%;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {

  75%,
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* ----------------------------------------------------------------
   4. LUMINOUS APERTURE LOADER
---------------------------------------------------------------- */
.aperture-loader {
  position: fixed;
  inset: 0;
  background: #020617;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.aperture-loader.loaded {
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  pointer-events: none;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-circle {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(37, 99, 235, 0.3);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spinLoader 1s infinite linear;
}

.loader-status {
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: #64748b;
  text-transform: uppercase;
}

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

/* ----------------------------------------------------------------
   6. DYNAMIC LUMINOUS PROGRESS RAIL
---------------------------------------------------------------- */
.scroll-progress-rail {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #8b5cf6, #2563eb);
  z-index: 10000;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
  transition: width 0.1s ease-out;
}

/* ----------------------------------------------------------------
   1. AI-ACTIVE SCANNING GRID (Background Infrastructure)
---------------------------------------------------------------- */
.global-scanning-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: -10;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), transparent);
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.1);
  animation: laserScan 10s infinite linear;
}

@keyframes laserScan {
  from {
    top: -10%;
  }

  to {
    top: 110%;
  }
}

/* ----------------------------------------------------------------
   5. AGENTIC PARTICLE NODES (Parallax)
---------------------------------------------------------------- */
.agentic-particles-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -5;
  overflow: hidden;
}

.agent-node {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.1;
  transition: transform 0.2s ease-out;
}

.agent-node.node-1 {
  width: 400px;
  height: 400px;
  background: #2563eb;
  top: 10%;
  left: 5%;
}

.agent-node.node-2 {
  width: 300px;
  height: 300px;
  background: #8b5cf6;
  bottom: 20%;
  right: 10%;
}

.agent-node.node-3 {
  width: 500px;
  height: 500px;
  background: #3b82f6;
  top: 50%;
  left: 40%;
}

/* ----------------------------------------------------------------
   2. LUMINOUS SPOT-LIGHT (Testimonials)
---------------------------------------------------------------- */
.spotlight-follower {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  opacity: 0;
}

.testimonials-3d-section:hover .spotlight-follower {
  opacity: 1;
}

/* ----------------------------------------------------------------
   3. LIVE-STATUS SYSTEM METRICS RAIL
---------------------------------------------------------------- */
.infrastructure-rail {
  padding: 15px 0;
  background: #020617;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.rail-flex {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #10b981;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: blinkStatus 2s infinite;
}

.stat-pill {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.stat-version {
  margin-left: auto;
  opacity: 0.5;
}

/* Hero Trust Island & Marquee */
.hero-trust-island {
  margin-top: 100px;
  /* Increased to avoid social-proof overlap */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 30px;
  max-width: 750px;
  width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-left: auto;
  margin-right: auto;
}

.trust-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #94a3b8;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
}

.trust-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 25px;
  /* Gap between rows */
  /* Edge Fading Mask */
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.trust-marquee:last-child {
  margin-bottom: 0;
}

.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marquee-drift 30s linear infinite;
  align-items: center;
}

.marquee-reverse .marquee-track {
  animation-direction: reverse;
}

.marquee-track i,
.marquee-track img {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.marquee-track i:hover,
.marquee-track img:hover {
  color: #ffffff;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
  transform: scale(1.2) rotate(10deg);
}

@keyframes marquee-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* KINETIC MAGNETIC BUTTONS */
.btn-primary {
  position: relative;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  z-index: 10;
}

.btn-primary:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 25px 50px rgba(37, 99, 235, 0.3);
  letter-spacing: 1px;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn-primary:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* VOLUMETRIC GLASS-FILL REVEAL */
.reveal.active,
.reveal-item.active {
  animation: glassFillIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes glassFillIn {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(15px) saturate(0);
    backdrop-filter: blur(0px);
  }

  40% {
    opacity: 0.6;
    filter: blur(5px) saturate(1.2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1);
    backdrop-filter: blur(5px);
  }
}

/* ----------------------------------------------------------------
   THE OVERLAPPING PULSE BRIDGE CTA
---------------------------------------------------------------- */
.pulse-bridge-cta {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  padding: 50px 30px;
  color: white;
  position: relative;
  overflow: hidden;
  max-width: 1160px;
  margin: 0 auto 50px auto;
  /* Overlap Half into Footer */
  border-radius: 32px;
  z-index: 50;
  /* Above Footer */
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.pulse-bridge-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shineStrip 4s infinite linear;
}

@keyframes shineStrip {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

.container-pulse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 10;
}

.pulse-content h3 {
  font-size: 1.8rem;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}

.pulse-content p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.pulse-actions {
  display: flex;
  gap: 15px;
}

.btn-pulse-white {
  background: white;
  color: #2563eb;
  padding: 14px 30px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-pulse-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-pulse-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 14px 30px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-pulse-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

@media (max-width: 992px) {
  .container-pulse {
    flex-direction: column;
    text-align: center;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ----------------------------------------------------------------
   THE LUMINOUS GRADIENT MEGA FOOTER
---------------------------------------------------------------- */
.modern-footer-pro {
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
  padding: 80px 0 0 0;
  /* Increased padding-top to accommodate overlap */
  position: relative;
  overflow: hidden;
  border-top: 1px solid transparent;
  color: #fff;
}

/* Gradient Top Edge Glow */
.modern-footer-pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.4), #2563eb, rgba(96, 165, 250, 0.4), transparent);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
  z-index: 5;
}

/* Atmospheric Background Glow (Footer Corner) */
.modern-footer-pro::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 75%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  position: relative;
  z-index: 10;
}

.footer-brand-side {
  flex: 1.2;
}

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

.brand-description {
  font-size: 1rem;
  color: #94a3b8;
  line-height: 1.8;
  max-width: 450px;
}

.footer-navigation-side {
  flex: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.f-title {
  font-size: 0.85rem;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.f-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.f-list li {
  margin-bottom: 12px;
}

.f-list a {
  color: #64748b;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
}

.f-list a:hover {
  color: #fff;
  transform: translateX(5px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Footer Bottom Bar with Separation Gradient */
.footer-bottom-bar {
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding: 30px 0;
  position: relative;
  z-index: 10;
}

.bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom-links-group {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 0.85rem;
  color: #475569;
}

.bottom-links-group a {
  color: #475569;
  text-decoration: none;
  transition: color 0.3s;
}

.bottom-links-group a:hover {
  color: #94a3b8;
}

.footer-social-circles {
  display: flex;
  gap: 15px;
}

.social-circle {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #94a3b8;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-circle:hover {
  background: #2563eb;
  color: white;
  transform: scale(1.15) translateY(-5px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
  border-color: #3b82f6;
}

@media (max-width: 1024px) {
  .footer-inner {
    flex-direction: column;
    gap: 60px;
  }

  .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .bottom-flex {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .bottom-links-group {
    flex-direction: column;
    gap: 15px;
  }
}

/* ----------------------------------------------------------------
   REVEAL ANIMATION SYSTEM
---------------------------------------------------------------- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-up,
.reveal-item {
  opacity: 0;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform, opacity;
}

.reveal,
.reveal-up,
.reveal-item {
  transform: translateY(40px);
}

.reveal-left {
  transform: translateX(-60px);
}

.reveal-right {
  transform: translateX(60px);
}

.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-up.active,
.reveal-item.active {
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

.glass-reveal.active {
  animation: glassFillIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes glassFillIn {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(15px) saturate(0);
  }

  40% {
    opacity: 0.6;
    filter: blur(5px) saturate(1.2);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

/* ----------------------------------------------------------------
   INTERNAL PAGES (ABOUT, CONTACT, CAREER)
---------------------------------------------------------------- */
.about-page,
.contact-page,
.career-page {
  background: #ffffff;
  /* Clean white base for editorial content */
  color: #100746;
}

.about-page .nav-item.active,
.contact-page .nav-item.active,
.career-page .nav-item.active {
  color: #6fd3ff;
}

.about-page .nav-item.active::after,
.contact-page .nav-item.active::after,
.career-page .nav-item.active::after {
  background: #6fd3ff;
}

.about-hero-home,
.contact-hero-home,
.career-hero-home {
  position: relative;
  padding: 160px 0 50px;
  overflow: hidden;
  /* background: #020617; */
  /* High-contrast Deep Onyx */
  color: #fff;
  z-index: 1;
}

.about-hero-home::after,
.contact-hero-home::after,
.career-hero-home::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}



.about-hero-home::before,
.contact-hero-home::before,
.career-hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.12) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.3;
}

.about-hero-grid,
.contact-hero-grid,
.career-hero-grid,
.about-split-grid,
.career-split-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-hero-shapes,
.contact-hero-shapes,
.career-hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-shape,
.contact-shape,
.career-shape {
  position: absolute;
  border-radius: 999px;
  filter: blur(14px);
  opacity: 0.6;
}

.about-shape-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -200px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.4) 0%, transparent 70%);
  filter: blur(80px);
}

.about-shape-2 {
  width: 500px;
  height: 500px;
  right: -150px;
  top: -100px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.3) 0%, transparent 70%);
  filter: blur(60px);
}

.about-shape-3 {
  width: 400px;
  height: 400px;
  left: 30%;
  bottom: -150px;
  background: radial-gradient(circle, rgba(30, 64, 175, 0.4) 0%, transparent 70%);
  filter: blur(90px);
}

.about-breadcrumb,
.career-breadcrumb,
.contact-breadcrumb,
.blog-breadcrumb,
.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
}

.about-breadcrumb a,
.career-breadcrumb a,
.contact-breadcrumb a,
.blog-breadcrumb a,
.docs-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

.about-breadcrumb a:hover,
.career-breadcrumb a:hover,
.contact-breadcrumb a:hover,
.blog-breadcrumb a:hover,
.docs-breadcrumb a:hover {
  color: #fff;
}

.about-kicker,
.about-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.about-title {
  margin-top: 24px;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #ffffff;
}

.about-desc {
  margin-top: 22px;
  max-width: 580px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.84);
}

.about-proof-row {
  margin-top: 48px;
  display: flex;
  gap: 20px;
}

.about-proof-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.about-proof-circle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* SNAPSHOT CARD */
.about-story-card {
  border-radius: 40px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(16, 7, 70, 0.05);
  padding: 48px;
  position: relative;
  z-index: 10;
}

.about-story-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.about-story-head span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: #64748b;
  letter-spacing: 1px;
}

.about-story-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}



.about-story-stats strong {
  display: block;
  font-size: 2.2rem;
  color: #100746;
  font-weight: 700;
}

.about-story-stats span {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
}

.about-story-log {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-log-line {
  opacity: 0;
  transform: translateY(15px);
  padding: 16px 20px;
  background: #020617;
  border-radius: 14px;
  color: #cbd5e1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border-left: 3px solid #2563eb;
}

.about-log-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* SECTIONS */
.about-section {
  /* padding: 120px 0; */
  position: relative;
}


.about-section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #100746;
}

.about-section-desc {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 700px;
}

.about-section-desc.text-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about-copy p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 24px;
}

.about-mission-points {
  display: grid;
  gap: 16px;
}

.about-mission-point {
  display: flex;
  gap: 16px;
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(16, 7, 70, 0.05);
}

.about-mission-point i {
  color: #2563eb;
  font-size: 1.2rem;
}

.about-mission-point span {
  color: #100746;
  font-weight: 600;
}

.about-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.about-highlight-card {
  padding: 32px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(16, 7, 70, 0.05);
  box-shadow: 0 10px 30px rgba(13, 46, 121, 0.03);
}

.about-highlight-card i {
  width: 54px;
  height: 54px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.about-highlight-card h3 {
  color: #100746;
  font-size: 1.3rem;
}

.about-highlight-card p {
  font-size: 0.95rem;
  color: #64748b;
  margin-top: 10px;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-value-card {
  padding: 40px;
  background: #fff;
  border-radius: 32px;
  border: 1px solid rgba(16, 7, 70, 0.05);
}

.about-value-card span {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  color: #2563eb;
  margin-bottom: 16px;
  background: #eff6ff;
  padding: 6px 12px;
  border-radius: 10px;
}

.about-value-card h3 {
  color: #100746;
  font-size: 1.4rem;
}

.about-value-card p {
  color: #64748b;
  margin-top: 12px;
}

.about-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
}

.about-metric-card {
  padding: 32px;
  background: #fff;
  border-radius: 28px;
  text-align: center;
  border: 1px solid rgba(16, 7, 70, 0.05);
}

.about-metric-num {
  font-size: 2.8rem;
  font-weight: 700;
  color: #100746;
  margin-bottom: 8px;
}

.about-metric-label {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 600;
}

.about-cta-box {
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
  border-radius: 40px;
  padding: 80px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.about-cta-box h2 {
  font-size: 3rem;
  margin-top: 20px;
}

.about-cta-box p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  max-width: 600px;
  margin: 20px auto;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.about-btn-primary {
  background: #fff;
  color: #020617;
}

.about-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* color: #fff; */
  margin-left: 16px;
}

/* RESPONSIVE INTERNAL */
@media (max-width: 1100px) {

  .about-hero-grid,
  .about-split-grid,
  .about-values-grid,
  .about-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .about-hero-grid,
  .about-split-grid,
  .about-values-grid,
  .about-metrics-grid,
  .about-highlight-grid,
  .career-hero-grid,
  .career-split-grid,
  .contact-hero-grid {
    grid-template-columns: 1fr;
  }

  .about-proof-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-title,
  .career-title,
  .contact-title {
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
  }

  .about-desc,
  .career-desc,
  .contact-desc {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .about-story-card {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  .about-story-stats strong {
    font-size: 1.8rem !important;
  }

  .about-cta-box {
    padding: 48px 24px;
  }

  .about-cta-box h2 {
    font-size: 2.2rem;
  }

  .about-btn-secondary {
    margin-left: 0;
    margin-top: 12px;
  }

  .about-hero-home {
    padding: 120px 0 64px;
  }
}

/* ================================================================
   DEMO VIDEO MODAL STYLES
   ================================================================ */
.demo-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.demo-video-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.demo-video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.demo-video-dialog {
  position: relative;
  background: #fff;
  border-radius: 32px;
  max-width: 1200px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.demo-video-modal[aria-hidden="false"] .demo-video-dialog {
  transform: scale(1);
}

.demo-video-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(2, 6, 23, 0.9);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease, transform 0.3s ease;
}

.demo-video-close:hover {
  background: #2563eb;
  transform: rotate(90deg);
}

.demo-modal-content {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 500px;
}

.demo-modal-content:has(.demo-modal-video-only) {
  grid-template-columns: 1fr;
}

.demo-modal-video-only {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.demo-modal-left {
  padding: 56px 48px;
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo-modal-title {
  font-size: 2.4rem;
  margin-bottom: 20px;
  line-height: 1.1;
}

.demo-modal-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.demo-modal-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.demo-modal-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.demo-modal-features li i {
  color: #22c55e;
  font-size: 1.2rem;
}

.demo-modal-right {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Update Service Content Text Colors for Dark Background (using .unified-platform) */
.unified-platform .service-title {
  color: #f8fafc;
}

.unified-platform .service-desc {
  color: #cbd5e1;
}

.unified-platform .service-capabilities li {
  color: #e2e8f0;
}

.unified-platform .cta-micro {
  color: #94a3b8;
}

/* Client Logos Styles */
.client-logo {
  height: 40px;
  width: auto;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.3s ease;
}

.client-logo:hover {
  filter: grayscale(0%) opacity(1);
}

.scroller-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 0;
  overflow: hidden;
}

.clients-marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  gap: 12px;
}

.clients-track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: marquee-left 42s linear infinite;
  will-change: transform;
  transition: animation-play-state 0.35s ease;
}

.client-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 160px;
  min-height: 70px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.client-logo-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
}

.client-logo-card:hover~.clients-track,
.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

.client-logo-card.is-active {
  transform: scale(1.04);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
}

.client-logo-card.is-active .client-logo-scroll {
  transform: scale(1.04);
}

.client-logo-scroll {
  width: 100%;
  max-height: 54px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: all 0.25s ease;
}

.client-logo-scroll:hover {
  transform: scale(1.03);
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .clients-marquee {
    gap: 8px;
  }

  .clients-track {
    gap: 8px;
    animation-duration: 36s;
  }

  .client-logo-card {
    width: 120px;
    min-height: 64px;
    padding: 5px;
    border-radius: 8px;
  }

  .client-logo-scroll {
    max-height: 46px;
  }
}

@media (max-width: 480px) {
  .client-logo-card {
    width: 104px;
    min-height: 58px;
  }

  .client-logo-scroll {
    max-height: 40px;
  }
}

/* Service Layout (Unified Platform Tabs) */
.service-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 60px 0 20px 0;
  width: 100%;
}

.service-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  width: 100%;
  order: 2;
}

.service-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: fit-content;
  margin-top: 0 !important;
}

.service-badge i {
  font-size: 16px;
}

.service-title {
  font-size: 32px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

.service-desc {
  font-size: 16px;
  color: #475569;
  line-height: 1.7;
  margin: 0;
  text-align: center;
  max-width: 800px;
}

.service-capabilities {
  list-style: none;
  padding: 0;
  margin: 15px 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  text-align: left;
}

.service-capabilities li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  color: #e2e8f0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.service-capabilities li:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(37, 99, 235, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.service-capabilities li i {
  color: #10b981;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.service-capabilities li strong {
  color: #ffffff;
  font-weight: 600;
}

.service-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  width: 100%;
}

.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-explore:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.cta-micro {
  color: #64748b;
  font-size: 14px;
}

.service-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50%;
  margin: 0 auto;
  order: 1;
}

.service-visual img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5), 0 0 40px rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* RESPONSIVE MODAL & UNIFIED PLATFORM (MOBILE ONLY) */
@media (max-width: 900px) {
  .demo-modal-content {
    grid-template-columns: 1fr;
  }

  .demo-modal-left {
    padding: 40px 32px 32px;
  }

  .demo-modal-title {
    font-size: 1.8rem;
  }

  .demo-video-player {
    min-height: 320px;
  }

  /* Unified Platform Mobile Styles - Override conflicting styles */
  .unified-platform {
    padding: 80px 20px !important;
  }

  .unified-platform .section-title {
    font-size: 2.2rem !important;
  }

  .unified-platform .section-desc {
    font-size: 1rem !important;
  }

  .unified-platform .tabs-sidebar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 15px 10px !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 100px !important;
  }

  .unified-platform .tab-link {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
  }

  .unified-platform .tab-link span {
    display: inline !important;
    /* Show the text, don't hide it! */
  }

  .unified-platform .service-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 10px 0 !important;
  }

  .unified-platform .service-visual {
    width: 100% !important;
  }

  .unified-platform .service-title {
    font-size: 24px !important;
    color: #f8fafc !important;
  }

  .unified-platform .service-desc {
    font-size: 15px !important;
    color: #cbd5e1 !important;
  }

  .unified-platform .service-capabilities {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .unified-platform .service-capabilities li {
    font-size: 14px !important;
    color: #e2e8f0 !important;
    padding: 12px !important;
  }

  .unified-platform .service-visual img {
    border-radius: 12px !important;
  }

  .unified-platform .cta-micro {
    color: #94a3b8 !important;
  }
}

/* === BOOKING FORM STYLES === */
.book-demo-section {
  padding: 50px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.demo-form-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 32px;
  box-shadow: 0 25px 70px rgba(2, 8, 23, 0.08);
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
}

.demo-form-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #06b6d4, #2563eb);
}

.form-section {
  margin-bottom: 10px;
}

.form-section:last-of-type {
  margin-bottom: 40px;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
}

.form-section-title i {
  font-size: 1.5rem;
  color: #2563eb;
}

.form-row {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}

.form-row--split {
  grid-template-columns: repeat(2, 1fr);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.3px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  transition: all 0.3s ease;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

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

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  color: #334155;
}

.checkbox-label:hover {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #2563eb;
  cursor: pointer;
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
}

.form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #64748b;
}

.form-note i {
  color: #10b981;
}

/* Form Success Message */
.form-success-message {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.form-success-message.active {
  display: block;
}

.form-success-icon {
  font-size: 4rem;
  color: #10b981;
  margin-bottom: 24px;
}

.form-success-title {
  font-size: 2rem;
  color: #0f172a;
  margin-bottom: 16px;
}

.form-success-text {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.form-success-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.form-success-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.3);
}

/* Why Demo Section */
.why-demo-section {
  background: #ffffff;
}

/* === RESPONSIVE BOOKING FORM === */
@media (max-width: 768px) {
  .demo-form-wrapper {
    padding: 40px 20px;
    border-radius: 20px;
  }

  .form-row--split {
    grid-template-columns: 1fr;
  }

  .checkbox-grid {
    grid-template-columns: 1fr;
  }

  .form-section-title {
    font-size: 1.15rem;
  }
}

/* ================================================================
   MOBILE NAVIGATION FIX - HIGH PRIORITY
   ================================================================ */
/* Force mobile menu toggle to be visible */
.mobile-menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  !important;
  cursor: pointer !important;
  color: white !important;
  font-size: 0.9rem !important;
  z-index: 100000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease !important;
  min-width: 70px !important;
  text-align: center !important;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Fix nav links for mobile */
@media (max-width: 1024px) {
  .nav-links {
    position: fixed !important;
    top: -217px !important;
    right: -100% !important;
    width: 85% !important;
    max-width: 350px !important;
    height: 100vh !important;
    background: #020617 !important;
    flex-direction: column !important;
    padding: 100px 30px 40px !important;
    gap: 5px !important;
    transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  .nav-links.active {
    right: 0 !important;
    pointer-events: auto !important;
  }

  /* Menu items */
  .nav-links li {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0 !important;
  }

  .nav-links li:last-child {
    border-bottom: none !important;
  }

  .nav-links li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    color: #e2e8f0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
  }

  .nav-links li a:hover {
    color: #60a5fa !important;
  }

  .nav-links li a i.fa-chevron-down {
    font-size: 0.8rem !important;
    opacity: 0.5 !important;
    transition: transform 0.3s ease !important;
  }

  .nav-links li a i.fa-chevron-down.rotated {
    transform: rotate(180deg) !important;
  }

  /* Mobile dropdowns */
  .has-dropdown .standard-dropdown,
  .has-mega .mega-menu {
    display: none !important;
    position: static !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 0 !important;
    padding: 0 0 0 20px !important;
    box-shadow: none !important;
    width: 100% !important;
    transform: none !important;
    border-left: 2px solid rgba(96, 165, 250, 0.2) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: none !important;
  }

  .has-dropdown.open .standard-dropdown,
  .has-mega.open .mega-menu {
    display: block !important;
    pointer-events: auto !important;
  }

  .has-dropdown .standard-dropdown a,
  .has-mega .mega-menu a {
    padding: 12px 0 !important;
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
    border-bottom: none !important;
    justify-content: flex-start !important;
  }

  .has-dropdown .standard-dropdown a:hover,
  .has-mega .mega-menu a:hover {
    color: #60a5fa !important;
    padding-left: 8px !important;
  }

  .has-mega .mega-left {
    width: 100% !important;
    padding: 0 !important;
  }

  .has-mega .mega-right {
    display: none !important;
  }

  .has-mega .mega-link-grid {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .has-mega .mega-col {
    width: 100% !important;
    padding: 0 !important;
  }

  .has-mega .mega-col h4 {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 0.4 !important;
    margin: 12px 0 4px 0 !important;
    color: #94a3b8 !important;
  }

  .has-mega .mega-header {
    display: none !important;
  }

  /* Hide book demo button on mobile (keep only menu toggle) */
  .btn-book-demo {
    display: none !important;
  }

  /* Show menu toggle */
  .header-action-text.mobile-menu-toggle {
    display: inline-flex !important;
  }

  /* Override any conflicting styles */
  .main-header .container {
    flex-wrap: nowrap !important;
  }

  .header-actions {
    gap: 10px !important;
  }

  /* Top bar hide on mobile */
  .top-bar {
    display: none !important;
  }
}

/* Small screens adjustments */
@media (max-width: 480px) {
  .nav-links {
    width: 92% !important;
    padding: 80px 20px 30px !important;
  }

  .nav-links li a {
    font-size: 0.95rem !important;
    padding: 14px 0 !important;
  }

}

/* Override for header sticky state on mobile */
@media (max-width: 1024px) {
  header.sticky-scrolled .main-header {
    height: 70px !important;
    transform: none !important;
  }

  .main-header {
    height: 70px !important;
  }
}

/* ================================================================
   MOBILE MENU TOGGLE - SHOW ONLY ON MOBILE
   ================================================================ */
/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
  display: none !important;
}

/* Show only on mobile/tablet */
@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: white !important;
    font-size: 1.15rem !important;
    z-index: 100000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    width: 42px !important;
    height: 42px !important;
    text-align: center !important;
  }

  .mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }

  /* Hide Book a Demo button on mobile if needed */
  .btn-book-demo {
    display: none !important;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  .mobile-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }
}

/* ================================================================
   FOOTER ADDRESSES STYLES
   ================================================================ */
.f-col-offices {
  min-width: 280px !important;
}

.footer-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-address:last-child {
  margin-bottom: 0;
}

.footer-address i {
  color: #3b82f6;
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
  min-width: 16px;
}

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

.footer-address strong {
  color: #e2e8f0;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.footer-address span {
  display: block;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .f-col-offices {
    min-width: auto !important;
  }
}

@media (max-width: 768px) {
  .footer-navigation-side {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .footer-address {
    font-size: 0.8rem;
  }

  .footer-address strong {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .footer-address {
    font-size: 0.75rem;
  }

  .footer-address strong {
    font-size: 0.7rem;
  }
}

/* Mobile navbar dropdown fix */
@media (max-width: 1024px) {

  .nav-links,
  .nav-links.active {
    top: 0 !important;
    height: 100dvh !important;
  }

  .nav-links.active {
    overflow-y: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 96px !important;
    padding-bottom: 40px !important;
  }

  .nav-links .has-dropdown.open>.standard-dropdown,
  .nav-links .has-mega.open>.mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav-links .has-mega.open>.mega-menu {
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }
}

/* Current page active nav state */
.nav-links .nav-item.active {
  color: #60a5fa !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.35) !important;
}

.nav-links .nav-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

@media (max-width: 1024px) {
  .nav-links .nav-item.active::after {
    bottom: 8px;
    left: 0;
    right: auto;
    width: 36px;
  }
}

/* ================================================================
   TYPOGRAPHY AND COLOR CONSISTENCY OVERRIDES
   ================================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  color: #0f172a;
  /* Unified dark slate color for all headings */
}

p {
  font-family: 'Inter', sans-serif !important;
  color: #334155;
  /* Unified dark-gray/slate color for all body paragraphs */
  line-height: 1.6;
}

/* Ensure headings and paragraphs on dark backgrounds remain perfectly readable */
.dark-bg,
.top-bar,
.aperture-loader,
.floating-chat-bubble,
.modern-footer-pro,
[class*="-hero"],
[class*="-cta"],
[class*="-footer"],
.wa-hero,
.wa-cta,
.bank-hero,
.bank-cta,
.ecom-hero,
.ecom-cta,
.health-hero,
.health-cta,
.sec-hero,
.sec-cta,
.ent-hero,
.ent-cta,
.int-hero,
.int-cta,
.docs-hero {
  /* --color-heading-fallback: #ffffff;
  --color-body-fallback: rgba(255, 255, 255, 0.88); */
}

/* Nested rules for elements in dark sections */
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.top-bar h1,
.top-bar h2,
.top-bar h3,
.top-bar h4,
.top-bar h5,
.top-bar h6,
.aperture-loader h1,
.aperture-loader h2,
.aperture-loader h3,
.aperture-loader h4,
.aperture-loader h5,
.aperture-loader h6,
.modern-footer-pro h1,
.modern-footer-pro h2,
.modern-footer-pro h3,
.modern-footer-pro h4,
.modern-footer-pro h5,
.modern-footer-pro h6,
[class*="-hero"] h1,
[class*="-hero"] h2,
[class*="-hero"] h3,
[class*="-hero"] h4,
[class*="-hero"] h5,
[class*="-hero"] h6,
[class*="-cta"] h1,
[class*="-cta"] h2,
[class*="-cta"] h3,
[class*="-cta"] h4,
[class*="-cta"] h5,
[class*="-cta"] h6,
[class*="-footer"] h1,
[class*="-footer"] h2,
[class*="-footer"] h3,
[class*="-footer"] h4,
[class*="-footer"] h5,
[class*="-footer"] h6,
.wa-hero h1,
.wa-hero h2,
.wa-hero h3,
.wa-hero h4,
.wa-hero h5,
.wa-hero h6,
.wa-cta h1,
.wa-cta h2,
.wa-cta h3,
.wa-cta h4,
.wa-cta h5,
.wa-cta h6,
.bank-hero h1,
.bank-hero h2,
.bank-hero h3,
.bank-hero h4,
.bank-hero h5,
.bank-hero h6,
.ecom-hero h1,
.ecom-hero h2,
.ecom-hero h3,
.ecom-hero h4,
.ecom-hero h5,
.ecom-hero h6,
.health-hero h1,
.health-hero h2,
.health-hero h3,
.health-hero h4,
.health-hero h5,
.health-hero h6,
.sec-hero h1,
.sec-hero h2,
.sec-hero h3,
.sec-hero h4,
.sec-hero h5,
.sec-hero h6,
.ent-hero h1,
.ent-hero h2,
.ent-hero h3,
.ent-hero h4,
.ent-hero h5,
.ent-hero h6,
.int-hero h1,
.int-hero h2,
.int-hero h3,
.int-hero h4,
.int-hero h5,
.int-hero h6,
.docs-hero h1,
.docs-hero h2,
.docs-hero h3,
.docs-hero h4,
.docs-hero h5,
.docs-hero h6 {
  color: var(--color-heading-fallback) !important;
}

.dark-bg p,
.top-bar p,
.aperture-loader p,
.modern-footer-pro p,
[class*="-hero"] p,
[class*="-cta"] p,
[class*="-footer"] p,
.wa-hero p,
.wa-cta p,
.bank-hero p,
.ecom-hero p,
.health-hero p,
.sec-hero p,
.ent-hero p,
.int-hero p,
.docs-hero p {
  color: var(--color-body-fallback) !important;
}

/* Maintain bright pure white color with 50% alpha dark blue/black glow for headers */
.text-gradient-main,
.text-gradient {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 30px rgba(2, 20, 50, 0.5) !important;
}

/* Ensure the navigation dropdown menus are solid white with high-contrast text on desktop */
@media (min-width: 1025px) {

  .mega-menu,
  .standard-dropdown {
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
  }

  .mega-menu h3,
  .mega-menu h4,
  .mega-menu h5,
  .mega-menu a,
  .standard-dropdown a {
    font-family: 'Inter', sans-serif !important;
  }

  .mega-header h3 {
    color: #0f172a !important;
  }

  .mega-header p {
    color: #475569 !important;
    font-family: 'Inter', sans-serif !important;
  }

  .mega-col h4 {
    color: #64748b !important;
  }

  .mega-col a {
    color: #334155 !important;
    font-family: 'Inter', sans-serif !important;
  }

  .mega-col a:hover {
    color: #0069ff !important;
  }

  .promo-text h5 {
    color: #0f172a !important;
  }

  .promo-text p {
    color: #475569 !important;
    font-family: 'Inter', sans-serif !important;
  }
}

/* Ensure the titles of all hero sections are responsively standardized to a maximum of 4.2rem on desktop, solid white color, and same style */
.hero-title,
.wa-hero-title,
.docs-hero-title,
.pov-title,
.perf-title,
.contact-title,
.career-title,
.bh-title,
.aic-title,
.aia-title,
.about-title {
  color: #ffffff !important;
  font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -1.5px !important;
  text-transform: none !important;
  text-shadow: 0 5px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Standardize the color and style of all highlighted parts inside hero titles to a uniform bright cyan */
.hero-title span:not(.text-gradient-main):not(.text-gradient):not(.title-line),
.hero-title em,
.wa-hero-title span,
.wa-hero-title em,
.docs-hero-title span,
.docs-hero-title em,
.pov-title span,
.pov-title em,
.perf-title span,
.perf-title em,
.contact-title span,
.contact-title em,
.career-title span,
.career-title em,
.bh-title span,
.bh-title em,
.aic-title span,
.aic-title em,
.aia-title span,
.aia-title em,
.about-title span,
.about-title em {
  color: #00d2ff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  font-style: normal !important;
  text-shadow: 0 0 30px rgba(0, 210, 255, 0.3) !important;
}

/* ============================================================
   REQUEST ACCESS MODAL
   ============================================================ */
.ra-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 17, 60, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ra-modal-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}

.ra-modal-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 48px 40px 40px;
  width: 100%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 32px 80px rgba(6, 17, 60, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
}

.ra-modal-overlay[aria-hidden="false"] .ra-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ra-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.ra-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: rotate(90deg);
}

.ra-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #103ECD 0%, #00d2ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.6rem;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 62, 205, 0.3);
}

.ra-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.25;
}

.ra-subtitle {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
}

.ra-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ra-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ra-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ra-input-wrap {
  position: relative;
}

.ra-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.9rem;
  pointer-events: none;
}

.ra-input {
  width: 100%;
  padding: 14px 16px 14px 40px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.98rem;
  font-family: 'Inter', sans-serif;
  color: #0f172a;
  background: #f8fafc;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}

.ra-input:focus {
  border-color: #103ECD;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 62, 205, 0.1);
}

.ra-input.ra-input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.ra-error {
  font-size: 0.82rem;
  color: #ef4444;
  font-weight: 500;
  min-height: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ra-error:not(:empty)::before {
  content: '⚠';
}

.ra-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #103ECD 0%, #0056d6 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 4px 16px rgba(16, 62, 205, 0.35);
  width: 100%;
}

.ra-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 62, 205, 0.45);
}

.ra-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.ra-note {
  font-size: 0.78rem;
  color: #94a3b8;
  text-align: center;
  margin-top: -4px;
}

/* Success state */
.ra-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
  animation: ra-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ra-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.ra-state {
  width: 100%;
}

@media (max-width: 520px) {
  .ra-modal-card {
    padding: 36px 24px 28px;
    border-radius: 18px;
  }

  .ra-title {
    font-size: 1.3rem;
  }
}

/* ============================================================
   GLOBAL BUTTON SYSTEM — Consistent sizing, hover, transitions
   Excluded: .cf-btn (integration filter tabs), integration-page custom buttons
   ============================================================ */
/* Shared base — scoped to exclude integration-page dark-theme buttons */
body:not(.integration-page) a[class*="btn-"],
body:not(.integration-page) button[class*="btn-"]:not(.cf-btn),
.btn-book-demo,
.btn-secondary,
.btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body:not(.integration-page) a[class*="btn-"]:hover,
body:not(.integration-page) button[class*="btn-"]:not(.cf-btn):hover,
.btn-book-demo:hover {
  transform: translateY(-2px) !important;
}

/* ============================================================
   GLOBAL CARD SYSTEM — Consistent radius, shadow, padding
   ============================================================ */
.feature-card,
.solution-card,
.pricing-card,
.blog-card,
.integration-card,
.stat-card,
.case-card,
.tier-card,
.dh-card {
  border-radius: 16px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.feature-card:hover,
.solution-card:hover,
.pricing-card:hover,
.integration-card:hover,
.case-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(16, 62, 205, 0.12) !important;
}

.input-error {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.03) !important;
}

.field-error-msg {
  color: #ef4444 !important;
  font-size: 0.82rem !important;
  margin-top: 6px !important;
  display: block !important;
  font-weight: 500 !important;
}

/* ============================================================
   GLOBAL SECTION RHYTHM
   ============================================================ */
section {
  padding-top: 70px;
  padding-bottom: 70px;
}

section.blog-hero,
section.docs-hero,
section[class$="-hero"],
section[class*="-hero "] {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================================
   RESPONSIVE — Tablet (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* Section spacing */
  section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  section.blog-hero,
  section.docs-hero,
  section[class$="-hero"],
  section[class*="-hero "] {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Hero grids: stack to single column */
  .docs-hero-grid,
  .hero-grid,
  .hero-inner,
  .wa-hero-inner,
  .perf-hero-inner,
  .contact-hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* Hero copy centering */
  .hero-copy,
  .docs-hero-copy,
  .wa-hero-copy,
  .perf-hero-copy {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  /* Hero panels — stack below */
  .docs-hero-panel,
  .hero-panel,
  .wa-hero-visual,
  .perf-hero-visual {
    max-width: 520px;
    margin: 0 auto;
  }

  /* 3-col feature grids → 2-col */
  .features-grid,
  .solutions-grid,
  .cards-grid,
  .security-grid,
  .use-cases-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* 4-col stat/trust rows → 2-col */
  .stats-grid,
  .stat-row,
  .trust-row,
  .sla-row,
  .hero-trust,
  .compliance-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Blog sidebar layout — stack */
  .sl-grid {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    order: -1;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Pricing grid → 2-col */
  .pricing-grid,
  .plans-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Topic cards — wrap */
  .topics-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Section spacing */
  section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  section.blog-hero,
  section.docs-hero,
  section[class$="-hero"],
  section[class*="-hero "] {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Typography scale */
  .hero-title,
  .wa-hero-title,
  .docs-hero-title,
  .pov-title,
  .perf-title,
  .contact-title,
  .career-title,
  .bh-title,
  .aic-title,
  .aia-title,
  .about-title {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }

  /* Feature grids → 1-col */
  .features-grid,
  .solutions-grid,
  .cards-grid,
  .security-grid,
  .use-cases-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stat rows → 2-col */
  .stats-grid,
  .stat-row,
  .trust-row,
  .sla-row,
  .hero-trust,
  .compliance-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Pricing → 1-col */
  .pricing-grid,
  .plans-grid,
  .tier-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    overflow-x: visible !important;
  }

  /* Footer columns → 2-col */
  .footer-navigation-side {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 16px !important;
  }

  /* Footer brand → full-width */
  .footer-inner {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .footer-brand-side {
    max-width: 100% !important;
  }

  /* Blog sidebar → 1-col */
  .sidebar {
    grid-template-columns: 1fr !important;
  }

  /* Docs layout → 1-col */
  .docs-layout {
    display: block !important;
  }

  .docs-sidebar {
    position: static !important;
    width: 100% !important;
    border-radius: 12px;
    margin-bottom: 24px;
  }

  .docs-toc {
    display: none !important;
  }

  /* Topic cards → 2-col */
  .topics-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero breadcrumb */
  .docs-breadcrumb,
  .blog-breadcrumb {
    font-size: 0.82rem;
    flex-wrap: wrap;
  }

  /* CTA button groups → stack */
  .hero-btns,
  .cta-btns,
  .docs-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-btns a,
  .cta-btns a,
  .docs-hero-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Nav blog sidebar */
  .nb-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Featured card → stack */
  .featured-card {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .fc-image img {
    height: 220px !important;
    object-fit: cover !important;
  }
}

/* ============================================================
   RESPONSIVE — Small Mobile (≤480px)
   ============================================================ */
@media (max-width: 480px) {

  .container {
    padding: 0 16px;
  }

  /* Footer columns → 1-col */
  .footer-navigation-side {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Topic cards → 1-col */
  .topics-cards {
    grid-template-columns: 1fr !important;
  }

  /* Stats → 1-col */
  .stats-grid,
  .stat-row,
  .trust-row,
  .sla-row,
  .hero-trust,
  .compliance-row {
    grid-template-columns: 1fr !important;
  }

  /* Blog header hero */
  .bh-top {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Newsletter form → stack */
  .nb-row {
    flex-direction: column !important;
  }

  .nb-input {
    width: 100% !important;
  }

  .ra-modal-card {
    padding: 28px 16px 20px;
    border-radius: 14px;
  }
}

/* Fix for mobile logo scaling and hiding the book a demo button */
@media (max-width: 1024px) {
  .logo {
    padding: 0 16px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: 150px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .logo img {
    height: 24px !important;
    width: auto !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* =================================================================
   GLOBAL BACKGROUND UNIFICATION WITH INDEX.PHP (HOME PAGE)
   ================================================================= */
.bank-hero,
.ecom-hero,
.health-hero,
.int-hero,
.sec-hero,
.ent-hero,
.aia-hero,
.wa-hero,
.perf-hero,
.pov-hero,
.prc-hero,
.about-hero-home,
.career-hero-home,
.contact-hero-home,
.docs-hero,
.hero,
.api-hero {
  background: linear-gradient(160deg, #002ae5 0%, #0b4260 40%, #024f82 100%) !important;
}

.top-bar {
  background: #1565c0 !important;
}

.main-header {
  background: transparent !important;
}

header.sticky-scrolled .main-header {
  background: rgba(21, 101, 192, 0.92) !important;
}

.modern-footer-pro {
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%) !important;
}

.modern-footer-pro,
.modern-footer-pro a,
.modern-footer-pro p,
.modern-footer-pro span,
.modern-footer-pro h5,
.modern-footer-pro .brand-description,
.modern-footer-pro .copyright {
  color: #ffffff !important;
}

.modern-footer-pro a {
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

.modern-footer-pro a:hover {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Speed up scroll reveal animations to load faster */
.reveal,
.reveal-left,
.reveal-right,
.reveal-up,
.reveal-item {
  transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Unify all solution pages background colors and grid overlay with web-automation page */
body.banking-page .bank-hero,
body.ecommerce-page .ecom-hero,
body.healthcare-page .health-hero,
body.integration-page .int-hero,
body.security-page .sec-hero,
body.services-page .ent-hero,
body.pricing-page .hero,
body.pricing-page .hero--compact,
body.blog-page .blog-hero,
body.booking-form-page .hero,
body.booking-form-page .hero--compact {
  background: linear-gradient(160deg, #002ae5 0%, #0b4260 40%, #024f82 100%) !important;
}

body.banking-page .bank-hero::before,
body.ecommerce-page .ecom-hero::before,
body.healthcare-page .health-hero::before,
body.integration-page .int-hero::before,
body.security-page .sec-hero::before,
body.services-page .ent-hero::before,
body.pricing-page .hero::before,
body.pricing-page .hero--compact::before,
body.blog-page .blog-hero::before,
body.booking-form-page .hero::before,
body.booking-form-page .hero--compact::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  mask-image: radial-gradient(circle at 50% 50%, white, transparent 80%) !important;
  opacity: 0.27 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


header.sticky-scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
}

body.services-page .ent-hero {
  padding-top: 230px !important;
}

/* ── Legal Pages Styling (Terms, Privacy, Security Policy) ── */
.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .legal-grid {
    grid-template-columns: 280px 1fr;
    gap: 60px;
  }
}

.legal-sidebar {
  display: none;
}

@media (min-width: 992px) {
  .legal-sidebar {
    display: block;
  }
}

.sticky-sidebar {
  position: sticky;
  top: 120px;
}

.sidebar-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: #64748b;
  margin-bottom: 20px;
}

.sidebar-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid #e2e8f0;
}

.sidebar-link {
  color: #475569;
  text-decoration: none;
  font-size: 0.85rem;
  padding-left: 20px;
  display: block;
  transition: all 0.3s ease;
  margin-left: -1px;
  border-left: 1px solid transparent;
}

.sidebar-link:hover,
.sidebar-link.active {
  color: #1e6fd9;
  border-left-color: #1e6fd9;
}

.legal-body {
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: left;
}

.legal-section h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}

.legal-section p {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-section ul {
  padding-left: 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-section li {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.6;
}

/* Ensure the container content background is white/light slate for policy pages */
.pricing-page main,
.blog-page main,
.booking-form-page main,
.terms-page main,
.privacy-page main,
.security-policy-page main {
  background: #ffffff !important;
}

body.pricing-page,
body.blog-page,
body.booking-form-page,
body.terms-page,
body.privacy-page,
body.security-policy-page {
  background-color: #020617 !important;
}

.legal-content-section {
  background: #ffffff !important;
}

/* Global compact hero adjustments for legal/pricing pages to remove empty space */
.hero.hero--compact {
  padding-top: 140px !important;
  padding-bottom: 20px !important;
  min-height: auto !important;
  height: auto !important;
}

.hero.hero--compact .hero-background-animations,
.hero.hero--compact .agent-connection-system,
.hero.hero--compact .hero-visual,
.hero.hero--compact .hero-trust-island {
  display: none !important;
}

.hero.hero--compact .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}

.hero.hero--compact .hero-content--narrow {
  padding: 40px 0 !important;
  margin: 0 auto !important;
}

/* Force footer logo to render white in dark professional footers */
.modern-footer-pro .footer-logo-main {
  filter: none !important;
}

/* ============================================================
   INTEGRATION PAGE — Light Theme & High-Contrast Tab Filters
   ============================================================ */
body.integration-page {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.integration-page .integrations-section,
body.integration-page .connect-section,
body.integration-page .combos-section {
  background: #ffffff !important;
}

body.integration-page .connect-section {
  background: #f8fafc !important;
}

/* Fix Filter Tabs visibility (cf-btn) */
body.integration-page .cat-filter {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  border-bottom: none !important;
}

body.integration-page .cf-btn {
  padding: 10px 22px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

body.integration-page .cf-btn:hover:not(.active) {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

body.integration-page .cf-btn.active {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3) !important;
}

/* Fix search input and text visibility */
body.integration-page .int-search input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

body.integration-page .int-search input::placeholder {
  color: #94a3b8 !important;
}

body.integration-page .int-count {
  color: #64748b !important;
  font-weight: 600 !important;
}

body.integration-page .int-count span {
  color: #4f46e5 !important;
  font-weight: 700 !important;
}

/* Fix integration cards visibility */
body.integration-page .int-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
}

body.integration-page .int-card:hover {
  border-color: #4f46e5 !important;
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.12) !important;
}

body.integration-page .ic-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.integration-page .ic-desc {
  color: #475569 !important;
}

body.integration-page .ic-tag {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

body.integration-page .ic-icon {
  background: #eef2ff !important;
  border: 1px solid #e0e7ff !important;
  color: #4f46e5 !important;
}

/* Fix footer for integration and security pages to match all other pages */
body.integration-page .modern-footer-pro,
body.security-page .modern-footer-pro {
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%) !important;
  color: #ffffff !important;
}

body.integration-page .modern-footer-pro,
body.integration-page .modern-footer-pro a,
body.integration-page .modern-footer-pro p,
body.integration-page .modern-footer-pro span,
body.integration-page .modern-footer-pro h5,
body.integration-page .modern-footer-pro .f-title,
body.integration-page .modern-footer-pro .brand-description,
body.integration-page .modern-footer-pro .copyright,
body.security-page .modern-footer-pro,
body.security-page .modern-footer-pro a,
body.security-page .modern-footer-pro p,
body.security-page .modern-footer-pro span,
body.security-page .modern-footer-pro h5,
body.security-page .modern-footer-pro .f-title,
body.security-page .modern-footer-pro .brand-description,
body.security-page .modern-footer-pro .copyright {
  color: #ffffff !important;
}

body.integration-page .modern-footer-pro a,
body.security-page .modern-footer-pro a {
  opacity: 0.75 !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}

body.integration-page .modern-footer-pro a:hover,
body.security-page .modern-footer-pro a:hover {
  opacity: 1 !important;
  color: #60a5fa !important;
}

body.integration-page .modern-footer-pro .footer-bottom-bar,
body.security-page .modern-footer-pro .footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Ensure section gap for lifecycle section is 50px */
.lifecycle-section,
#lifecycle {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* ============================================================
   SECURITY PAGE — Clean Corporate Light Theme Style Overrides
   ============================================================ */
body.security-page {
  --void: #ffffff;
  --void2: #f8fafc;
  --void3: #f1f5f9;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --cyan: #1e6fd9;
  --cyan2: #1565c0;
  --cyan3: #0d47a1;
  --cyan-lite: rgba(30, 111, 217, 0.08);
  --cyan-mid: rgba(30, 111, 217, 0.15);
  --cyan-glow: rgba(30, 111, 217, 0.2);
  --green: #10b981;
  --green2: #059669;
  --green-lite: rgba(16, 185, 129, 0.08);
  --red: #ef4444;
  --red-lite: rgba(239, 68, 68, 0.08);
  --amber: #f59e0b;
  --amber-lite: rgba(245, 158, 11, 0.08);
  --border: rgba(16, 7, 70, 0.08);
  --border2: rgba(16, 7, 70, 0.12);
  --text: #0f172a;
  --text2: #475569;
  --text3: #64748b;
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  background: linear-gradient(180deg, #100746 0, #100746 260px, #f7f9fc 260px, #f7f9fc 100%) !important;
  color: #0f172a !important;
}

body.security-page .sec-title,
body.security-page .layer-body h3,
body.security-page .cert-card h3,
body.security-page .df-item-name,
body.security-page .df-core-title,
body.security-page .pt-step h3,
body.security-page .dl-title,
body.security-page .met-num,
body.security-page .met-label {
  color: #100746 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
}

body.security-page .sec-desc,
body.security-page .layer-body p,
body.security-page .cert-card p,
body.security-page .df-item-desc,
body.security-page .pt-step p,
body.security-page .dl-desc,
body.security-page .met-sub {
  color: #475569 !important;
  font-family: 'Inter', sans-serif !important;
}

body.security-page .sec-kicker {
  color: #1e6fd9 !important;
  font-family: 'Roboto Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

body.security-page .layer-row,
body.security-page .cert-card,
body.security-page .df-col,
body.security-page .df-center-col,
body.security-page .ef-item,
body.security-page .pt-step,
body.security-page .disc-inner,
body.security-page .met-cell {
  background: #ffffff !important;
  border: 1px solid rgba(16, 7, 70, 0.08) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body.security-page .layer-num,
body.security-page .layer-icon,
body.security-page .cert-seal,
body.security-page .df-item-icon,
body.security-page .pt-circle,
body.security-page .ds-num {
  background: #f1f5f9 !important;
  border: 1px solid rgba(16, 7, 70, 0.08) !important;
  color: #1e6fd9 !important;
}

body.security-page .ltag {
  background: #f1f5f9 !important;
  border: 1px solid rgba(16, 7, 70, 0.08) !important;
  color: #334155 !important;
}

body.security-page .ltag.green {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.16) !important;
}

body.security-page .ltag.amber {
  background: rgba(245, 158, 11, 0.08) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.16) !important;
}

body.security-page .ls-dot {
  background: #cbd5e1 !important;
  box-shadow: none !important;
}

body.security-page .ls-dot.ls-active {
  background: #10b981 !important;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12) !important;
}

body.security-page .ls-text {
  color: #10b981 !important;
}

body.security-page .sec-label {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #100746 !important;
  border: 1px solid rgba(16, 7, 70, 0.12) !important;
}

body.security-page .hex-ring {
  border-color: rgba(16, 7, 70, 0.08) !important;
}

body.security-page .hr-4 {
  border-color: rgba(16, 7, 70, 0.04) !important;
}

body.security-page .shield-core {
  background: radial-gradient(circle, rgba(30, 111, 217, 0.12), transparent) !important;
}

body.security-page .shield-icon {
  color: #1e6fd9 !important;
  text-shadow: 0 0 20px rgba(30, 111, 217, 0.4) !important;
}

body.security-page .cert-valid {
  color: #10b981 !important;
}

body.security-page .layers-section,
body.security-page .dataflow-section,
body.security-page .pentest-section,
body.security-page .disclosure-section,
body.security-page .metrics-section {
  background: #ffffff !important;
}

body.security-page .compliance-section,
body.security-page .encryption-section,
body.security-page .trust-cta {
  background: #f8fafc !important;
}

body.security-page .cta-box {
  background: linear-gradient(135deg, #100746, #002ae5) !important;
  color: #ffffff !important;
}

body.security-page .logo img {
  filter: none !important;
}

body.security-page .tc {
  text-align: center !important;
}

body.security-page .sec-desc {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 680px !important;
}

/* =================================================================
   UNIFIED BREADCRUMB STYLING (ALL INNER PAGES)
   ================================================================= */
.breadcrumb,
.hero-breadcrumb,
.aia-breadcrumb,
.perf-breadcrumb,
.pov-breadcrumb,
.prc-breadcrumb,
.about-breadcrumb,
.career-breadcrumb,
.contact-breadcrumb,
.blog-breadcrumb,
.docs-breadcrumb,
.hero-bc,
.doc-bc {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  list-style: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Ensure links and icons inside breadcrumbs are uniform */
.breadcrumb a,
.hero-breadcrumb a,
.aia-breadcrumb a,
.perf-breadcrumb a,
.pov-breadcrumb a,
.prc-breadcrumb a,
.about-breadcrumb a,
.career-breadcrumb a,
.contact-breadcrumb a,
.blog-breadcrumb a,
.docs-breadcrumb a,
.hero-bc a,
.doc-bc a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.breadcrumb i,
.hero-breadcrumb i,
.aia-breadcrumb i,
.perf-breadcrumb i,
.pov-breadcrumb i,
.prc-breadcrumb i,
.about-breadcrumb i,
.career-breadcrumb i,
.contact-breadcrumb i,
.blog-breadcrumb i,
.docs-breadcrumb i,
.hero-bc i,
.doc-bc i {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.7rem !important;
  margin: 0 4px !important;
  opacity: 1 !important;
  display: inline-block !important;
}

/* Active page (span) and link hover state */
.breadcrumb span,
.hero-breadcrumb span,
.aia-breadcrumb span,
.perf-breadcrumb span,
.pov-breadcrumb span,
.prc-breadcrumb span,
.about-breadcrumb span,
.career-breadcrumb span,
.contact-breadcrumb span,
.blog-breadcrumb span,
.docs-breadcrumb span,
.hero-bc span,
.doc-bc span,
.breadcrumb a:hover,
.hero-breadcrumb a:hover,
.aia-breadcrumb a:hover,
.perf-breadcrumb a:hover,
.pov-breadcrumb a:hover,
.prc-breadcrumb a:hover,
.about-breadcrumb a:hover,
.career-breadcrumb a:hover,
.contact-breadcrumb a:hover,
.blog-breadcrumb a:hover,
.docs-breadcrumb a:hover,
.hero-bc a:hover,
.doc-bc a:hover {
  color: #00d2ff !important;
  background: transparent !important;
}

/* Ensure consistent hero padding-top on desktop/tablet to align breadcrumbs identically to web-automation page */
@media (min-width: 769px) {

  .web-automation-page .wa-hero,
  .platform-overview-page .pov-hero,
  .performance-page .perf-hero,
  .ai-automation-page .aia-hero,
  .ai-capabilities-page .aic-hero,
  .mobile-app-testing-page .mat-hero,
  .api-enterprise-page .api-hero,
  body.healthcare-page .health-hero,
  body.banking-page .bank-hero,
  body.ecommerce-page .ecom-hero,
  body.enterprise-services-page .ent-hero,
  body.security-page .sec-hero,
  body.integration-page .int-hero,
  .blog-page .blog-hero,
  .docs-page .docs-hero,
  .about-hero-home,
  .career-hero-home,
  .contact-hero-home {
    padding-top: 140px !important;
  }
}

/* Align AI Automation hero copy column to top of grid row */
.ai-automation-page .aia-hero-copy {
  align-self: start !important;
}

/* Align AI Capabilities hero copy column to top of grid row */
.ai-capabilities-page .aic-hero-copy {
  align-self: start !important;
}

/* Align Platform Overview hero copy column to top of grid row */
.platform-overview-page .pov-hero-copy {
  align-self: start !important;
}

/* Reduce right-side hero card height to match left copy column */
.platform-overview-page .pov-platform-body {
  padding: 14px 16px !important;
}

.platform-overview-page .pov-layer-grid {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.platform-overview-page .pov-layer-card {
  padding: 12px 14px !important;
}

.platform-overview-page .pov-log-stream {
  height: 102px !important;
  padding: 10px 14px !important;
}

/* Align hero-bc breadcrumb to the top of its container across all pages */
.hero-bc {
  align-self: start !important;
}

/* Premium CTA Box Redesign for Integrations Page */
body.integration-page .int-cta-box-dark {
  background: linear-gradient(135deg, #100746, #0f3ac4) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  overflow: hidden;
  border-radius: 36px !important;
  padding: 80px 60px !important;
}

body.integration-page .int-cta-box-dark::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body.integration-page .int-cta-box-dark h2 {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  margin-bottom: 18px !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 1.1 !important;
}

body.integration-page .int-cta-box-dark p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1.05rem !important;
  margin-bottom: 40px !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.75 !important;
  position: relative !important;
  z-index: 2 !important;
}

body.integration-page .int-cta-box-dark .cta-btns {
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure buttons are fully visible and readable */
body.integration-page .int-cta-box-dark .btn-indigo {
  background: #0084ff !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(0, 132, 255, 0.3) !important;
}

body.integration-page .int-cta-box-dark .btn-indigo:hover {
  background: #0069ff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 44px rgba(0, 132, 255, 0.5) !important;
}

body.integration-page .int-cta-box-dark .btn-ghost-i {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
}

body.integration-page .int-cta-box-dark .btn-ghost-i:hover {
  border-color: #00b0ff !important;
  color: #00b0ff !important;
  transform: translateY(-4px) !important;
}

/* Radial Glow overlay */
body.integration-page .int-cta-box-dark .cta-glow {
  position: absolute !important;
  width: 600px !important;
  height: 400px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(0, 105, 255, 0.4) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Align and space breadcrumbs consistently across security, integrations, and services pages */
body.security-page .hero-bc,
body.integration-page .hero-bc,
body.enterprise-services-page .hero-bc {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

/* Redesign and scale down the Security page shield visualization */
body.security-page .shield-wrap {
  height: 420px !important;
}

body.security-page .hex-ring {
  border-color: rgba(34, 211, 238, 0.15) !important;
}

body.security-page .hr-1 {
  width: 130px !important;
  height: 130px !important;
  margin: -65px !important;
}

body.security-page .hr-2 {
  width: 220px !important;
  height: 220px !important;
  margin: -110px !important;
}

body.security-page .hr-3 {
  width: 310px !important;
  height: 310px !important;
  margin: -155px !important;
}

body.security-page .hr-4 {
  width: 400px !important;
  height: 400px !important;
  margin: -200px !important;
  border-color: rgba(34, 211, 238, 0.06) !important;
}

body.security-page .shield-core {
  width: 100px !important;
  height: 100px !important;
}

body.security-page .shield-icon {
  font-size: 2.2rem !important;
  color: #22d3ee !important;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.6)) !important;
}

/* Glowing high-tech glassmorphic labels */
body.security-page .sec-label {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
  border: 1px solid rgba(34, 211, 238, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(34, 211, 238, 0.1) !important;
  font-size: 0.65rem !important;
  padding: 8px 16px !important;
  transition: all 0.3s ease !important;
}

body.security-page .sec-label:hover {
  border-color: rgba(34, 211, 238, 0.6) !important;
  box-shadow: 0 8px 32px rgba(34, 211, 238, 0.25), 0 0 20px rgba(34, 211, 238, 0.2) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

/* Premium CTA Box Redesign for Security Page */
body.security-page .trust-cta .cta-box.sec-cta-box-dark {
  background: linear-gradient(135deg, #100746, #0f3ac4) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  overflow: hidden;
  border-radius: 36px !important;
  padding: 60px 40px !important;
  color: #ffffff !important;
  text-align: center !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark h2 {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  margin-bottom: 18px !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 1.1 !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark h2 .cyan {
  color: #00e5ff !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1.05rem !important;
  margin-bottom: 40px !important;
  max-width: 580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.75 !important;
  position: relative !important;
  z-index: 2 !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark .cta-btns {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* Redesign buttons to be rounded pills like the screenshot */
body.security-page .trust-cta .cta-box.sec-cta-box-dark .btn-cyan {
  background: #0084ff !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 10px 25px rgba(0, 132, 255, 0.4) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark .btn-cyan:hover {
  background: #0069ff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 35px rgba(0, 132, 255, 0.6) !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark .btn-ghost-c {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

body.security-page .trust-cta .cta-box.sec-cta-box-dark .btn-ghost-c:hover {
  border-color: #00e5ff !important;
  color: #00e5ff !important;
  transform: translateY(-4px) !important;
}

/* Radial Glow overlay */
body.security-page .trust-cta .cta-box.sec-cta-box-dark .cta-glow {
  position: absolute !important;
  width: 600px !important;
  height: 400px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(0, 105, 255, 0.4) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}