/* ============================================================
   VYROX REDESIGN v2.0 — Apple-Inspired Design System
   Premium, clean, modern tech aesthetic
   ============================================================ */

/* ==========================================================
   0. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================== */
:root {
  /* Colors — Apple palette */
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #86868b;
  --color-text-tertiary: #6e6e73;
  --color-link: #0071e3;
  --color-link-hover: #0077ed;
  --color-bg-primary: #fff;
  --color-bg-secondary: #f5f5f7;
  --color-bg-elevated: #fbfbfd;
  --color-bg-dark: #1d1d1f;
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-accent: #0071e3;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 17px;
  --font-size-lg: 21px;
  --font-size-xl: 28px;
  --font-size-2xl: 40px;
  --font-size-3xl: 48px;
  --font-size-4xl: 56px;
  --font-size-hero: clamp(2.5rem, 6vw, 4.5rem);

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;

  /* Layout */
  --max-width: 980px;
  --max-width-wide: 1120px;
  --max-width-narrow: 700px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 980px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
}


/* ==========================================================
   1. COLIBRI THEME OVERRIDES (high specificity resets)
   ========================================================== */
body, #colibri, body p, #colibri p, textarea {
  font-family: var(--font-family) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

body {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  line-height: 1.47059;
  font-size: var(--font-size-base);
  overflow-x: hidden;
}

body a, #colibri a { text-decoration: none !important; }
body a:hover, #colibri a:hover, a:hover, a:focus { text-decoration: none !important; }

#colibri h1, body h1 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--color-text-primary) !important;
  line-height: 1.08 !important;
}

#colibri h2, body h2 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-primary) !important;
  line-height: 1.1 !important;
}

#colibri h3, body h3, #colibri h4, body h4,
#colibri h5, body h5, #colibri h6, body h6 {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.h-text p, .h-text-component p, #colibri .h-text p, #colibri .h-text-component p {
  color: var(--color-text-secondary) !important;
  line-height: 1.5 !important;
}

/* Only apply transitions to interactive elements, not everything */
.h-button, a.h-button, .h-icon, .menu-item a, .image-item, .solution-card,
.apple-product-image-wrapper, .testimonial-card, #consulting .content-swap {
  transition: all var(--duration-normal) var(--ease-smooth) !important;
}

/* Buttons — Apple pill style */
.h-button, [class*="style-"] .h-button, a.h-button, button.h-button, #colibri .h-button,
.h-button-el {
  background: var(--color-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
  transition: all var(--duration-normal) var(--ease-smooth) !important;
}

.h-button:hover, a.h-button:hover, #colibri .h-button:hover,
.h-button-el:hover {
  background: var(--color-link-hover) !important;
  box-shadow: none !important;
  transform: scale(1.02);
}

/* Hide legacy elements */
#apps-heading { color: var(--color-text-primary) !important; }
[data-colibri-id="5-c8"] p { color: var(--color-text-secondary) !important; }
[data-colibri-id="5-c5"] svg { display: none !important; }
.style-332-frameImage { display: none !important; }
#fb_bgg { display: none !important; }

/* Global defaults */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

::selection {
  background: rgba(0, 113, 227, 0.15);
  color: var(--color-text-primary);
}

.gsap-hidden { opacity: 0; }

img:hover { opacity: 1 !important; }


/* ==========================================================
   2. NAVIGATION — Transparent-to-Frosted-Glass
   ========================================================== */
/* Outer nav wrapper — fixed to top */
.h-navigation_outer,
.h-navigation_overlap,
.page-header,
[data-colibri-id="11-h1"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
}

.h-navigation,
.h-navigation.h-navigation,
#colibri .style-541,
.style-541,
.h-navigation_sticky {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: none !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
}

/* Nav text — always dark */
.h-navigation .logo-text,
.h-navigation .h-logo a,
.h-navigation .navbar-brand {
  color: var(--color-text-primary) !important;
}

.h-navigation .h-menu a,
.h-navigation .menu-item a {
  color: var(--color-text-primary) !important;
  opacity: 0.8;
}

.h-navigation .h-menu a:hover,
.h-navigation .menu-item a:hover {
  opacity: 1;
  color: var(--color-text-primary) !important;
}

.h-navigation .h-hamburger-button,
.h-navigation .h-hamburger-button svg,
.h-navigation .h-hamburger-button path {
  color: var(--color-text-primary) !important;
  fill: var(--color-text-primary) !important;
}

/* Logo */
.h-logo__text, .logo-text, #colibri .h-logo__text,
.h-navigation .logo-text,
.h-navigation .h-logo a,
.h-navigation .navbar-brand {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  transition: color var(--duration-normal) var(--ease-smooth) !important;
}

/* Menu links */
.colibri-menu > li > a, #colibri .colibri-menu > li > a,
.h-navigation .h-menu a,
.h-navigation .menu-item a {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  transition: color var(--duration-normal) var(--ease-smooth), opacity var(--duration-normal) var(--ease-smooth) !important;
  padding: 8px 14px !important;
}

/* Active section indicator */
.h-navigation .menu-item > a {
  position: relative;
}

.h-navigation .menu-item > a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  transition: width var(--duration-normal) var(--ease-smooth);
}

.h-navigation .menu-item.active-section > a::after {
  width: 20px;
}

/* Mobile offcanvas */
@media (max-width: 1024px) {
  .h-navigation .offcanvas,
  #offcanvas-wrapper-11-h10,
  .h-offcanvas-panel {
    background: rgba(0, 0, 0, 0.96) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
  }

  .h-navigation .offcanvas a,
  .h-offcanvas-panel a,
  .h-offcanvas-panel .menu-item a {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
    padding: 12px 0 !important;
  }

  .h-offcanvas-panel .colibri-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
}


/* ==========================================================
   3. HERO SECTION
   ========================================================== */
#hero-video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

#hero-video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Hero animation keyframes — slide from left, right-aligned */
@keyframes heroSlideIn {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroGlowPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(77,166,255,0.5), 0 2px 10px rgba(0,0,0,0.5); }
  50%      { text-shadow: 0 0 30px rgba(77,166,255,0.7), 0 0 60px rgba(77,166,255,0.2), 0 2px 10px rgba(0,0,0,0.5); }
}

.hero-line.animate-in {
  animation: heroSlideIn 0.8s var(--ease-out) forwards;
}

.hero-line.glow-active {
  opacity: 1 !important;
  transform: translateX(0) !important;
  animation: heroGlowPulse 3s ease-in-out infinite;
}

/* Hero responsive */
@media (max-width: 768px) {
  #hero-overlay {
    width: 55% !important;
    padding-right: 4% !important;
  }
}

@media (max-width: 480px) {
  #hero-overlay {
    width: 65% !important;
    padding-right: 3% !important;
  }
}


/* ==========================================================
   4. APPS SECTION — Clean centered layout
   ========================================================== */
#apps {
  background: var(--color-bg-primary);
  padding: var(--space-xl) 0 var(--space-lg);
}

#apps .h-section-grid-container {
  max-width: var(--max-width-wide) !important;
  padding: 0 var(--space-md) !important;
}

/* Apps heading */
#apps-heading {
  font-size: clamp(2rem, 4vw, var(--font-size-2xl)) !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 12px !important;
  line-height: 1.1 !important;
}

/* Apps subtitle */
[data-colibri-id="5-c8"] p {
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  max-width: 600px !important;
  margin: 0 auto var(--space-lg) !important;
  line-height: 1.5 !important;
}

/* App phone mockup */
[data-colibri-id="5-c5"] {
  text-align: center;
}

[data-colibri-id="5-c5"] .h-image__frame-container-outer {
  display: flex;
  justify-content: center;
}

[data-colibri-id="5-c5"] img {
  max-width: 500px !important;
  width: 80% !important;
  border-radius: var(--radius-lg);
}

/* Center the text column */
[data-colibri-id="5-c6"] .h-column__content {
  text-align: center;
}


/* ==========================================================
   4b. APP ICON GRID — Apple-style minimal grid
   ========================================================== */
.apps-container {
  width: 100% !important;
  max-width: var(--max-width-wide) !important;
  margin: 0 auto !important;
  padding: 0 var(--space-md) !important;
}

.image-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 8px !important;
  padding: var(--space-sm) 0 !important;
}

.image-item {
  position: relative;
  text-align: center;
  border-radius: var(--radius-md);
  padding: 12px 4px 8px;
  transition: all var(--duration-normal) var(--ease-smooth);
  cursor: pointer;
}

.image-item:hover {
  background: var(--color-bg-secondary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.image-item a {
  display: block;
}

.image-item img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  margin-top: 0 !important;
  transition: transform var(--duration-normal) var(--ease-smooth);
}

.image-item:hover img {
  transform: scale(1.1);
}

.image-label {
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
  margin-top: 6px !important;
  line-height: 1.3;
  font-weight: 500;
  transition: color var(--duration-normal) var(--ease-smooth);
}

.image-item:hover .image-label {
  color: var(--color-text-primary) !important;
}

/* App grid responsive */
@media (max-width: 1068px) {
  .image-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .image-item img {
    width: 48px !important;
    height: 48px !important;
  }
  .image-label {
    font-size: 10px !important;
  }
  #apps {
    padding: var(--space-lg) 0 var(--space-md);
  }
}

@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  .image-item img {
    width: 42px !important;
    height: 42px !important;
  }
  .image-label {
    font-size: 9px !important;
  }
  .apps-container {
    padding: 0 12px !important;
  }
}


/* ==========================================================
   5. INDUSTRY SOLUTIONS (inline cards after apps grid)
   ========================================================== */
.solutions-carousel-section {
  max-width: var(--max-width-wide);
  margin: var(--space-lg) auto 0;
  padding: 0 var(--space-md);
}

.solutions-carousel {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
}

.solutions-carousel::-webkit-scrollbar { display: none; }

.solution-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: all var(--duration-normal) var(--ease-smooth);
  border: 1px solid var(--color-border-light);
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.solution-card img {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
}

.solution-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.solution-card p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}


/* ==========================================================
   6. TECHNOLOGIES — Apple Product Grid
   ========================================================== */
.apple-section {
  padding: var(--space-xl) 0 !important;
  background: var(--color-bg-primary) !important;
}

.apple-section-header {
  text-align: center;
  max-width: var(--max-width-narrow);
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-md);
}

.apple-section-header h2 {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.apple-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.apple-product-card {
  text-align: center;
}

.apple-product-image-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  /* background: #fbfbfd; */
}

.apple-product-image-wrapper img.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.apple-product-image-wrapper:hover img.product-img {
  transform: scale(1.05);
}

.apple-play-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background var(--duration-normal) var(--ease-smooth);
}

.apple-product-image-wrapper:hover .apple-play-overlay {
  background: rgba(0, 0, 0, 0.25);
}

.apple-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.apple-product-image-wrapper:hover .apple-play-btn {
  opacity: 1;
  transform: scale(1);
}

.apple-play-btn svg {
  width: 18px;
  height: 18px;
  margin-left: 3px;
  fill: var(--color-text-primary);
}

.apple-product-card h3 {
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0 0 8px !important;
}

.apple-product-card p {
  font-size: var(--font-size-sm) !important;
  line-height: 1.5;
  color: var(--color-text-secondary) !important;
  margin: 0 0 16px !important;
  max-width: 280px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.apple-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-link);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.apple-link:hover {
  color: var(--color-link-hover);
}

.apple-link svg {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.apple-link:hover svg {
  transform: translateX(3px);
}

/* Technologies responsive */
@media (max-width: 1068px) {
  .apple-products-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
  }
  .apple-section-header h2 {
    font-size: 34px !important;
  }
}

@media (max-width: 734px) {
  .apple-products-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 32px;
    padding: 0 var(--space-sm);
  }
  .apple-section-header h2 {
    font-size: var(--font-size-xl) !important;
  }
  .apple-section {
    padding: var(--space-lg) 0 !important;
  }
  .apple-product-image-wrapper {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ==========================================================
   7. CONSULTING SECTION
   ========================================================== */
#consulting {
  background: var(--color-bg-primary) !important;
  padding: var(--space-xl) 0 !important;
}

#consulting .h-section-boxed-container {
  max-width: var(--max-width-wide) !important;
}

#consulting h2 {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)) !important;
  text-align: center !important;
}

#consulting .content-swap {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  /* background: var(--color-bg-secondary) !important; */
  transition: all var(--duration-normal) var(--ease-smooth);
}

#consulting .content-swap:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

#consulting .content-swap h5 {
  font-size: var(--font-size-sm) !important;
  padding: var(--space-sm) !important;
  color: #fff !important;
  line-height: 1.4 !important;
}

/* Consulting banners */
#consulting img[alt*="Patrick"],
#consulting img[alt*="Leong"],
#consulting img[alt*="Ts."] {
  border-radius: var(--radius-xl) !important;
  width: 90% !important;
  max-width: 600px !important;
  transition: all var(--duration-normal) var(--ease-smooth) !important;
}

#consulting img[alt*="Patrick"]:hover,
#consulting img[alt*="Leong"]:hover,
#consulting img[alt*="Ts."]:hover {
  transform: scale(1.01) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ISO / CIDB badges */
.heartbeat {
  animation: none !important;
  transition: transform var(--duration-normal) var(--ease-smooth);
}

.heartbeat:hover {
  transform: scale(1.05);
}

/* Consulting text */
#consulting p[style*="text-align: justify"] {
  font-size: var(--font-size-base) !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.65 !important;
  text-align: center !important;
  max-width: 700px;
  margin: 0 auto;
}


/* ==========================================================
   8. TESTIMONIALS
   ========================================================== */
#testimonials {
  background: var(--color-bg-secondary) !important;
  padding: var(--space-xl) 0 !important;
}

#testimonials .apple-testimonials h2,
#testimonials h2 {
  color: var(--color-text-primary) !important;
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)) !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-lg) !important;
}

.testimonial-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

@media (max-width: 767px) {
  #testimonials {
    padding: var(--space-lg) 0 !important;
  }
}


/* ==========================================================
   9. TRUSTED CUSTOMERS
   ========================================================== */
#trustedcustomers {
  background: var(--color-bg-primary) !important;
  padding: var(--space-xl) 0 !important;
}

#trustedcustomers h2,
#trustedcustomers .h-heading {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)) !important;
  text-align: center !important;
  color: var(--color-text-primary) !important;
}

#trustedcustomers .h-image__frame-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-smooth);
}

#trustedcustomers .h-image__frame-container:hover {
  transform: scale(1.02);
}

#trustedcustomers img {
  transition: all var(--duration-normal) var(--ease-smooth);
  opacity: 1 !important;
}

#trustedcustomers img:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  opacity: 1 !important;
}


/* ==========================================================
   10. TEAM SECTION
   ========================================================== */
#team {
  background: #fff !important;
  padding: var(--space-xl) 0 !important;
}

#team h2,
#team .h-heading {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)) !important;
  text-align: center !important;
  color: var(--color-text-primary) !important;
}

#team img {
  border-radius: var(--radius-lg) !important;
  transition: all var(--duration-normal) var(--ease-smooth);
}

#team img:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Team member names */
#team h4,
#team .style-397 h4,
#team .h-heading h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

/* Team member role */
#team .style-398 p {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  font-style: italic !important;
  margin-bottom: 8px !important;
}

/* Team member quote */
#team .style-399 p {
  font-size: 13px !important;
  color: var(--color-text-tertiary) !important;
  line-height: 1.5 !important;
}


/* ==========================================================
   11. CONTACT SECTION
   ========================================================== */
#contact {
  background: var(--color-bg-primary) !important;
  padding: var(--space-xl) 0 !important;
}

#contact h2 {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)) !important;
  text-align: center !important;
}


/* ==========================================================
   12. COUNTRIES SECTION
   ========================================================== */
#countries {
  background: var(--color-bg-secondary) !important;
  padding: var(--space-xl) 0 !important;
}

#countries h2 {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)) !important;
  text-align: center !important;
}


/* ==========================================================
   13. FOOTER — Apple-style dark footer
   ========================================================== */
/* Footer styles are now self-contained in footer2.php */


/* ==========================================================
   14. WHATSAPP BUTTON
   ========================================================== */
#whatsapp-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 88888 !important;
  transition: all var(--duration-normal) var(--ease-smooth) !important;
}

#whatsapp-btn img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all var(--duration-normal) var(--ease-smooth);
}

#whatsapp-btn:hover img {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.3);
}


/* ==========================================================
   15. GLOBAL UTILITIES & PERFORMANCE
   ========================================================== */

/* Removed heavy blanket transitions for performance */

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Section spacing normalization */
.h-section-global-spacing {
  padding: var(--space-xl) 0 !important;
}

@media (max-width: 768px) {
  .h-section-global-spacing {
    padding: var(--space-lg) 0 !important;
  }
}

/* Print styles */
@media print {
  .h-navigation, #whatsapp-btn, .page-footer { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
}


/* ==========================================================
   16. SCROLL REVEAL ANIMATIONS — GPU-composited (transform+opacity)
   Pure CSS classes toggled by IntersectionObserver in JS
   ========================================================== */

/* --- Reveal Up (fade + translate Y) --- */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* --- Reveal Scale (fade + scale) --- */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
  will-change: auto;
}

/* --- Reveal Left (fade + slide from left) --- */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
  will-change: auto;
}

/* Reduced motion — instant reveal */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-scale, .reveal-left {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Content visibility for offscreen sections — improves initial render */
#testimonials, #trustedcustomers, #team, #countries, #contact, .page-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}