/* ==========================================================================
   manta~web Landing Page — Complete Stylesheet
   RTL Hebrew | Gradient Journey | Mobile-First
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
  /* Primary */
  --primary: #14b8a6;
  --primary-light: #2dd4bf;
  --primary-lighter: #5eead4;
  --primary-dark: #0d9488;
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;

  /* Accent */
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-light: rgba(249, 115, 22, 0.15);
  --accent-gradient: linear-gradient(135deg, #f97316, #fb923c, #f59e0b);
  --accent-gradient-hover: linear-gradient(135deg, #ea580c, #f97316, #f59e0b);

  /* Neutrals */
  --text-light: #0f2d3d;
  --text-light-secondary: #475569;
  --text-dark: #ccfbf1;
  --text-dark-secondary: #94a3b8;
  --surface-bg: #f0fdfa;
  --deep-bg: #0a1628;

  /* Gradient Journey Backgrounds */
  --gradient-surface-start: #f0fdfa;
  --gradient-surface-end: #ccfbf1;
  --gradient-shallow-end: #5eead4;
  --gradient-mid-start: #14b8a6;
  --gradient-mid-end: #134e4a;
  --gradient-deep-start: #0f2d3d;
  --gradient-deep-end: #122a3a;
  --gradient-abyss-start: #0d1b2e;
  --gradient-abyss-end: #0a1628;

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Fonts */
  --font-heading: 'Rubik', sans-serif;
  --font-body: 'Heebo', sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Transitions */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Glass */
  --glass-bg: rgba(10, 22, 40, 0.65);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(16px);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   2. Reset + Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-light);
  background-color: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
}


/* ==========================================================================
   3. Skip Link
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  inset-inline-start: var(--space-16);
  z-index: 10000;
  padding: var(--space-12) var(--space-24);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  transition: transform var(--transition-base) var(--ease-default);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}


/* ==========================================================================
   4. Loading Screen
   ========================================================================== */

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-bg);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.loading-logo {
  width: 120px;
  height: auto;
  animation: loadingPulse 2s ease-in-out infinite;
}

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

.loading-bar-container {
  width: 200px;
  height: 4px;
  background: rgba(20, 184, 166, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.loading-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 2px;
  transition: width var(--transition-slow) var(--ease-out);
}

.loading-percent {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-light-secondary);
  letter-spacing: 0.05em;
}

.loading-skip {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--primary);
  padding: var(--space-8) var(--space-16);
  border-radius: 8px;
  transition: background var(--transition-base) var(--ease-default);
}

.loading-skip:hover {
  background: rgba(20, 184, 166, 0.08);
}

.loading-skip:focus {
  outline: 3px solid rgba(20, 184, 166, 0.3);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .loading-logo {
    width: 160px;
  }

  .loading-bar-container {
    width: 280px;
  }
}


/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: 56px;
  transition: background var(--transition-slow) ease,
              color var(--transition-slow) ease,
              box-shadow var(--transition-slow) ease,
              backdrop-filter var(--transition-slow) ease,
              opacity var(--transition-slow) ease;
}

@media (min-width: 768px) {
  .site-header {
    height: 72px;
  }
}

/* Logo overflows header intentionally */
.header-logo {
  position: relative;
  z-index: 101;
}

@media (min-width: 768px) {
  .header-logo img {
    margin-top: -44px;
    margin-bottom: -44px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-16);
  height: 100%;
  position: relative;
}

@media (min-width: 768px) {
  .header-inner {
    padding-inline: var(--space-32);
  }
  /* Center the nav between logo and end */
  .header-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Header Logo */
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  z-index: 101;
}

.header-logo img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .header-logo img {
    width: 160px;
    height: 160px;
  }
}

.header-logo-text {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.logo-tilde {
  color: var(--primary-light);
  font-weight: 300;
}

@media (min-width: 768px) {
  .header-logo-text {
    font-size: 26px;
  }
}

/* Header Nav (desktop) */
.header-nav {
  display: none;
  align-items: center;
  gap: var(--space-32);
}

@media (min-width: 768px) {
  .header-nav {
    display: flex;
  }
}

.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  transition: color var(--transition-base) var(--ease-default),
              opacity var(--transition-base) var(--ease-default);
  position: relative;
  padding-block: var(--space-4);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-base) var(--ease-default);
}

.nav-link:hover::after,
.nav-link:focus::after,
.nav-link--active::after {
  transform: scaleX(1);
}

.nav-link--active {
  color: var(--primary-lighter) !important;
}

.nav-link:focus {
  outline: none;
}

.nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.header-cta {
  display: none;
}

@media (min-width: 768px) {
  .header-cta {
    display: inline-flex;
    align-items: center;
  }
}

.nav-cta {
  background: var(--accent-gradient);
  color: #fff !important;
  padding: var(--space-8) var(--space-16);
  border-radius: 8px;
  font-weight: 600;
  font-family: var(--font-body);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-base) var(--ease-default),
              transform var(--transition-base) var(--ease-default),
              box-shadow var(--transition-base) var(--ease-default);
}

.nav-cta::after {
  display: none;
}

.nav-cta:hover {
  background: var(--accent-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.nav-cta:active {
  transform: translateY(0);
}

/* Header States */

/* Transparent (initial — hidden on desktop, hamburger visible on mobile) */
.header--transparent {
  background: transparent;
  color: var(--text-dark);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .header--transparent {
    opacity: 1;
    pointer-events: auto;
  }
  .header--transparent .header-nav,
  .header--transparent .header-logo {
    opacity: 0;
    pointer-events: none;
  }
  .header--transparent .hamburger-line {
    background: #fff;
  }
}

/* Light (surface, default) */
.header--light {
  background: var(--surface-bg);
  color: var(--text-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.header--light .nav-link {
  color: var(--text-light);
}

.header--light .nav-link:hover {
  color: var(--primary-dark);
}

.header--light .header-logo-text {
  color: var(--text-light);
}

/* Glass (over canvas) */
.header--glass {
  background: rgba(15, 45, 61, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header--glass .nav-link {
  color: var(--text-dark);
}

.header--glass .nav-link:hover {
  color: var(--primary-lighter);
}

.header--glass .header-logo-text {
  color: var(--text-dark);
}

/* Dark (post-canvas) */
.header--dark {
  background: var(--gradient-deep-start);
  color: var(--text-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.header--dark .nav-link {
  color: var(--text-dark);
}

.header--dark .nav-link:hover {
  color: var(--primary-lighter);
}

.header--dark .header-logo-text {
  color: var(--text-dark);
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-8);
  z-index: 101;
  cursor: pointer;
  pointer-events: auto;
  color: #fff; /* always white hamburger */
}

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-slow) var(--ease-default),
              opacity var(--transition-slow) var(--ease-default);
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hamburger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Mobile Drawer — slides from the right (start in RTL) */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #0a1628 0%, #0d1b2e 100%);
  z-index: 99;
  padding: 100px var(--space-32) var(--space-48);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .mobile-drawer {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

@media (min-width: 768px) {
  .mobile-drawer {
    display: none !important;
  }
}

.mobile-drawer.open {
  transform: translateX(0);
}

/* Backdrop overlay when drawer is open */
.mobile-drawer::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.mobile-drawer.open::before {
  opacity: 1;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  padding: var(--space-16) var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--transition-base) var(--ease-default),
              background var(--transition-base) var(--ease-default);
  border-radius: 8px;
  text-decoration: none;
}

.drawer-link:hover,
.drawer-link:focus {
  color: var(--primary-light);
  background: rgba(20, 184, 166, 0.08);
}

.drawer-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.drawer-cta {
  color: #fff !important;
  background: var(--accent-gradient);
  border-bottom: none;
  margin-top: var(--space-16);
  justify-content: center;
  border-radius: 10px;
  padding: var(--space-12) var(--space-16);
}

.drawer-cta:hover {
  background: var(--accent-gradient-hover);
  color: #fff !important;
}


/* ==========================================================================
   6. Canvas Zone
   ========================================================================== */

.scroll-container {
  height: 600vh;
  position: relative;
  /* Ensure smooth scroll on iOS */
  -webkit-overflow-scrolling: touch;
}

.sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* iOS: accounts for address bar */
  overflow: hidden;
  /* Fallback background if canvas frames fail to load */
  background: linear-gradient(180deg, #0a3d62 0%, #0a1628 100%);
}

/* White gradient mask at very bottom of video (just before waves) */
.sticky-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to bottom, transparent 0%, rgba(240, 253, 250, 0.4) 40%, rgba(240, 253, 250, 0.8) 70%, #f0fdfa 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sticky-wrapper.show-gradient::after {
  opacity: 1;
}

#frame-canvas {
  width: 100%;
  height: 100%;
  display: block;
}


/* ==========================================================================
   7. Overlay Phases
   ========================================================================== */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  z-index: 2;
}

.overlay.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Phase 1 — Hero */
.overlay-hero {
  text-align: center;
  padding-inline: var(--space-16);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-16);
  max-width: 640px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5), 0 4px 24px rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
  .hero-title {
    font-size: 48px;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 56px;
  }
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.7;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-32);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.35);
  padding: var(--space-12) var(--space-24);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (min-width: 640px) {
  .hero-subtitle {
    font-size: 18px;
  }
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: stretch;
  max-width: 340px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .hero-ctas {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-16);
  }
}

/* Scroll hint indicator */
.scroll-hint {
  position: absolute;
  bottom: var(--space-32);
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.5s ease;
}

.scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-hint .scroll-dot {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { cy: 10; }
  50% { cy: 26; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint .scroll-dot {
    animation: none;
  }
}

/* Hero progressive reveal */
.hero-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-reveal.hero-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Phase 2 — Services */
.overlay-services {
  align-items: flex-start;
  justify-content: flex-end;
  padding-inline-end: var(--space-32);
  padding-inline-start: var(--space-32);
  padding-bottom: var(--space-48);
}

@media (max-width: 767px) {
  .overlay-services {
    align-items: stretch;
    padding-inline: var(--space-16);
    justify-content: flex-end;
  }
}

.overlay-section-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-align: start;
  margin-bottom: var(--space-16);
  width: 100%;
  max-width: 600px;
  margin-inline-end: auto;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .overlay-section-title {
    font-size: 20px;
  }
}

.services-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  max-width: 600px;
  margin-inline-end: auto;
  padding-inline: var(--space-16);
}

@media (min-width: 768px) {
  .services-cards {
    padding-inline: 0;
  }
}

@media (min-width: 768px) {
  .services-cards {
    flex-direction: row;
    gap: var(--space-12);
  }
}

.service-card {
  flex: 1;
}

.service-card {
  padding: var(--space-16);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

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

.service-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.15);
  border-radius: 10px;
  color: var(--primary-light);
  margin-bottom: var(--space-12);
}

.service-card h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.service-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Phase 3 — Deep Dive */
.overlay-dive {
  justify-content: center;
  gap: var(--space-24);
  padding-inline: var(--space-24);
  padding-top: 120px;
  padding-bottom: var(--space-48);
}

@media (min-width: 768px) {
  .overlay-dive {
    padding-inline: var(--space-64);
  }
}

.dive-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: var(--space-24);
  max-width: 320px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

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

.dive-card-right {
  align-self: flex-end;
}

.dive-card-left {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .dive-card-right,
  .dive-card-left {
    align-self: stretch;
  }
}

.dive-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--primary-light);
  display: block;
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.dive-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Phase 4 — Stats */
.overlay-stats {
  justify-content: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  text-align: center;
  max-width: 800px;
  width: 100%;
  background: rgba(10, 22, 40, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 20px;
  padding: var(--space-32);
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-32);
    padding: var(--space-48);
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 0 20px rgba(20, 184, 166, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
}

@media (min-width: 640px) {
  .stat-number {
    font-size: 60px;
  }
}

.stat-plus {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  text-shadow: 0 0 12px rgba(20, 184, 166, 0.5);
}

@media (min-width: 640px) {
  .stat-plus {
    font-size: 40px;
  }
}

.stat-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
  .stat-label {
    font-size: 20px;
  }
}

/* Glass Card (shared utility) */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: var(--space-24);
  transition: transform var(--transition-slow) var(--ease-default),
              box-shadow var(--transition-slow) var(--ease-default);
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}


/* ==========================================================================
   8. Post-Canvas Sections (Base)
   ========================================================================== */

/* Section dividers */
.section-divider {
  line-height: 0;
  overflow: hidden;
}

.section-divider svg {
  width: 100%;
  height: 60px;
  display: block;
}

@media (min-width: 768px) {
  .section-divider svg {
    height: 80px;
  }
}

.section {
  padding: var(--space-48) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-96) 0;
  }
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-16);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-32);
  }
}

.section-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--space-16);
  text-align: center;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 32px;
  }
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  opacity: 0.75;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  line-height: 1.7;
  margin-bottom: var(--space-48);
}

@media (min-width: 768px) {
  .section-subtitle {
    font-size: 18px;
  }
}

/* Section Gradient Backgrounds — each section gets a unique visual identity */

.section-process {
  background: linear-gradient(180deg, #0f2d3d, #122a3a);
  position: relative;
}

/* (line removed per user request) */

.section-clients {
  background: linear-gradient(180deg, #122a3a, #0f2235);
  position: relative;
}

/* Subtle radial accent behind clients section */
.section-clients::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(20, 184, 166, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.section-whitelabel {
  background: #0f2235;
  border-top: 1px solid rgba(20, 184, 166, 0.08);
  position: relative;
}

/* Manta Fun Facts — Pirate Treasure Chest */
/* Treasure chest as bento card */
/* Standalone הידעת between sections */
.manta-funfact-standalone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-24) 0 0 0;
  margin: 0;
  position: relative;
  z-index: 3;
  background: #0f2235;
}

@media (min-width: 768px) {
  .manta-funfact-standalone {
    padding: 0;
    margin: calc(-1 * var(--space-64)) 0 0 0;
  }
}

.manta-funfact-standalone .funfact-bubble {
  position: absolute;
  bottom: calc(100% + var(--space-8));
  left: 50%;
  transform: translateX(-50%);
  margin-block-start: 0;
  z-index: 10;
  width: 380px;
}

.manta-funfact-standalone .funfact-bubble::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

.manta-funfact-standalone .funfact-bubble[aria-hidden="false"] {
  transform: translateX(-50%) scale(1);
}

.treasure-chest-inline {
  gap: var(--space-8);
}

.treasure-icon-sm {
  width: 80px;
  height: 67px;
}

/* About tagline row with inline treasure chest */
.about-tagline-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  margin-block-start: var(--space-16);
}

@media (min-width: 768px) {
  .about-tagline-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
  }
}

.about-funfact {
  position: relative;
  flex-shrink: 0;
}

.about-funfact .treasure-icon {
  width: 64px;
  height: 54px;
}

.about-funfact .treasure-label {
  font-size: 13px;
}

/* Mobile: bubble opens below */
.about-funfact .funfact-bubble {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  left: auto;
  transform: none;
  margin-block-start: 0;
  z-index: 10;
  width: min(320px, 85vw);
}

.about-funfact .funfact-bubble::before {
  top: auto;
  bottom: 100%;
  right: 24px;
  left: auto;
  transform: none;
  width: 20px;
  height: 10px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.about-funfact .funfact-bubble[aria-hidden="false"] {
  transform: scale(1);
}

/* Desktop: bubble opens to the left */
@media (min-width: 768px) {
  .about-funfact .funfact-bubble {
    right: calc(100% + var(--space-16));
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
  }

  .about-funfact .funfact-bubble::before {
    top: 50%;
    bottom: auto;
    left: 100%;
    right: auto;
    transform: translateY(-50%);
    width: 10px;
    height: 20px;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  }

  .about-funfact .funfact-bubble[aria-hidden="false"] {
    transform: translateY(-50%) scale(1);
  }
}

/* Orange wave divider between sections */
.divider-wave-orange {
  background: linear-gradient(180deg, #0d1b2e, #0b1726);
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
}

.divider-wave-orange svg {
  display: block;
  width: 100%;
  height: 50px;
}

@media (min-width: 768px) {
  .divider-wave-orange svg {
    height: 70px;
  }
}

.divider-wave-orange--dark {
  background: linear-gradient(180deg, #0b1726, #0b1726);
}

.manta-funfact {
  padding: var(--space-48) 0;
  content-visibility: auto;
}

.manta-funfact .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.treasure-icon {
  width: 120px;
  height: 100px;
  transition: filter 0.3s ease;
}

.treasure-chest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-16);
  transition: transform 0.3s ease, filter 0.3s ease;
  position: relative;
}

.treasure-chest:hover {
  transform: scale(1.05) translateY(-4px);
  filter: drop-shadow(0 8px 24px rgba(240, 208, 96, 0.4));
}

.treasure-chest[aria-expanded="true"] {
  filter: drop-shadow(0 4px 20px rgba(240, 208, 96, 0.6));
}


.treasure-label {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: #f0d060;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Bubble that pops up on click */
.funfact-bubble {
  max-width: 520px;
  margin-block-start: var(--space-24);
  padding: var(--space-24) var(--space-32);
  background: rgba(10, 22, 40, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(240, 208, 96, 0.2);
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  transform: scale(0.85) translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(240, 208, 96, 0.1);
}

/* Bubble arrow pointing up */
.funfact-bubble::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  background: rgba(10, 22, 40, 0.8);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.funfact-bubble[aria-hidden="false"] {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.funfact-bubble p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dark);
}

@media (max-width: 639px) {
  .funfact-bubble {
    padding: var(--space-16) var(--space-24);
    max-width: 90vw;
  }

  .funfact-bubble p {
    font-size: 15px;
  }
}

.section-about {
  background: linear-gradient(135deg, #0d1b2e 0%, #132d3d 50%, #0d1b2e 100%);
  position: relative;
  overflow: visible;
  z-index: 4;
}

/* Diagonal accent stripe for about section */
.section-about::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 20%, var(--primary-dark) 50%, transparent 80%);
}

.section-testimonials {
  background: linear-gradient(180deg, #0d1b2e, #0b1726);
  position: relative;
  overflow: hidden;
  max-width: 100vw;
}

.section-testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Decorative coral glow for testimonials */
.section-testimonials::after {
  content: '';
  position: absolute;
  bottom: -80px;
  inset-inline-end: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.section-faq {
  background: linear-gradient(180deg, #0b1726, #0a1420);
  position: relative;
}

.section-faq::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.section-contact {
  background: linear-gradient(180deg, #0a1420, #0a1628);
  position: relative;
  overflow: hidden;
}

/* Warm coral glow border for contact section — draws attention */
.section-contact::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.section-contact::after {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(249, 115, 22, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Golden anchor decoration */
.golden-anchor {
  position: absolute;
  inset-inline-start: var(--space-32);
  bottom: var(--space-64);
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  transform: translateY(20px);
  z-index: 2;
  pointer-events: none;
}

.golden-anchor img {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(212, 168, 67, 0.35)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.15));
  animation: anchorFloat 4s ease-in-out infinite;
}

@keyframes anchorFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

.golden-anchor.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1023px) {
  .golden-anchor {
    display: none;
  }
}


/* ==========================================================================
   9. Timeline (Process)
   ========================================================================== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  position: relative;
  padding-inline-start: var(--space-32);
  margin-top: var(--space-32);
}

/* Vertical line for mobile */
.timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(20, 184, 166, 0.2);
}

@media (min-width: 768px) {
  .timeline {
    flex-direction: row;
    gap: var(--space-16);
    padding-inline-start: 0;
    align-items: flex-start;
  }

  .timeline::before {
    inset-inline-start: 0;
    top: 23px;
    bottom: auto;
    width: 100%;
    height: 2px;
  }
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  position: relative;
}

@media (min-width: 768px) {
  .timeline-step {
    align-items: center;
    text-align: center;
  }
}

.timeline-number {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.15);
  color: var(--primary-light);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  border-radius: 50%;
  margin-bottom: var(--space-16);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(20, 184, 166, 0.25);
  box-shadow: 0 0 16px rgba(20, 184, 166, 0.15);
}

.timeline-step h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .timeline-step h3 {
    font-size: 18px;
  }
}

.timeline-step p {
  font-size: 14px;
  color: var(--text-dark-secondary);
  line-height: 1.6;
  max-width: 200px;
}


/* ==========================================================================
   10. Clients
   ========================================================================== */

.client-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: center;
}

.category-tag {
  display: inline-block;
  background: rgba(20, 184, 166, 0.1);
  color: var(--primary-lighter);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: var(--space-8) var(--space-16);
  border-radius: 8px;
  transition: background var(--transition-base) var(--ease-default),
              transform var(--transition-base) var(--ease-default);
}

.category-tag:hover {
  background: rgba(20, 184, 166, 0.18);
  transform: translateY(-1px);
}

.category-tag.highlight {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}


/* ==========================================================================
   11. White Label
   ========================================================================== */

/* Bento grid layout for White Label */
.wl-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

@media (min-width: 768px) {
  .wl-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }
  .wl-bento-main {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  /* Row 1: main(2cols) + הרחיבו */
  /* Row 2: SLA + 16+ + CTA auto-flow */
}

.wl-bento-card {
  position: relative;
  padding: var(--space-24);
  border-radius: 16px;
  background: rgba(20, 184, 166, 0.04);
  border: 1px solid rgba(20, 184, 166, 0.1);
  overflow: hidden;
  transition: transform var(--transition-slow) var(--ease-default),
              border-color var(--transition-slow) var(--ease-default),
              box-shadow var(--transition-slow) var(--ease-default);
}

.wl-bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 184, 166, 0.25);
  box-shadow: 0 8px 32px rgba(20, 184, 166, 0.1);
}

.wl-bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(20, 184, 166, 0.06) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.wl-bento-card:hover::after {
  opacity: 1;
}

.wl-bento-icon {
  margin-bottom: var(--space-16);
  color: var(--primary-light);
}

.wl-bento-icon svg {
  transition: transform 0.3s var(--ease-default);
}

.wl-bento-card:hover .wl-bento-icon svg {
  transform: scale(1.1);
}

.wl-bento-card h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--space-8);
}

.wl-bento-card p {
  font-size: 14px;
  color: var(--text-dark-secondary);
  line-height: 1.6;
}

.wl-bento-main {
  padding: var(--space-32);
}

.wl-bento-main h3 {
  font-size: 22px;
}

.wl-bento-main p {
  font-size: 15px;
  max-width: 480px;
}

.wl-bento-tag {
  display: inline-block;
  margin-top: var(--space-12);
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-lighter);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wl-bento-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-16);
  background: rgba(249, 115, 22, 0.06);
  border-color: rgba(249, 115, 22, 0.15);
  overflow: visible;
}

.wl-bento-cta .btn {
  width: 100%;
}

.wl-bento-cta:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 8px 32px rgba(249, 115, 22, 0.08);
}

.wl-bento-cta p {
  font-weight: 600;
  color: var(--text-dark);
}


/* ==========================================================================
   12. Tech Stack Bar
   ========================================================================== */

/* ==========================================================================
   Coral Reef Logo Wall
   ========================================================================== */

/* Coral Reef Logo Wall — logos on underwater rock surfaces */
.coral-reef-wall {
  background:
    linear-gradient(180deg, #122a3a 0%, #0e1f30 50%, #0f2235 100%);
  padding: var(--space-64) var(--space-24);
  overflow: hidden;
  position: relative;
}

/* Reef texture: layered organic shapes simulating coral and rock formations */
.coral-reef-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Coral patches */
    radial-gradient(ellipse 120px 80px at 8% 85%, rgba(20, 184, 166, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 90px 60px at 92% 15%, rgba(16, 185, 129, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 150px 100px at 50% 95%, rgba(20, 184, 166, 0.1) 0%, transparent 60%),
    /* Rock mass shapes */
    radial-gradient(ellipse 200px 140px at 15% 50%, rgba(30, 58, 72, 0.6) 0%, transparent 70%),
    radial-gradient(ellipse 180px 120px at 85% 60%, rgba(28, 52, 66, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 250px 100px at 50% 100%, rgba(25, 48, 62, 0.7) 0%, transparent 60%),
    /* Sea glow */
    radial-gradient(ellipse 60% 40% at 50% 10%, rgba(14, 165, 233, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

/* Scattered bubbles decoration */
.coral-reef-wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 2px at 12% 25%, rgba(255, 255, 255, 0.08) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 28% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 100%),
    radial-gradient(circle 3px at 45% 15%, rgba(255, 255, 255, 0.05) 0%, transparent 100%),
    radial-gradient(circle 2px at 68% 55%, rgba(255, 255, 255, 0.07) 0%, transparent 100%),
    radial-gradient(circle 1px at 82% 35%, rgba(255, 255, 255, 0.06) 0%, transparent 100%),
    radial-gradient(circle 2.5px at 92% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  pointer-events: none;
  animation: reefBubbleFloat 8s ease-in-out infinite alternate;
}

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

.reef-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.reef-stone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--space-16);
  min-height: 100px;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  overflow: visible;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  direction: ltr;
}

/* Rock/stone texture backgrounds — varied per stone */
.reef-stone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(40, 65, 80, 0.85), rgba(25, 45, 55, 0.9));
  border: 1px solid rgba(20, 184, 166, 0.12);
}

/* Subtle texture overlay on stones */
.reef-stone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-image:
    radial-gradient(circle 30px at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
    radial-gradient(circle 50px at 80% 70%, rgba(0, 0, 0, 0.15) 0%, transparent 100%),
    radial-gradient(circle 20px at 60% 20%, rgba(20, 184, 166, 0.04) 0%, transparent 100%);
  pointer-events: none;
}

/* Varied stone shapes & tints */
.reef-stone:nth-child(1) { border-radius: 16px 8px 14px 10px; }
.reef-stone:nth-child(2) { border-radius: 10px 14px 8px 16px; }
.reef-stone:nth-child(3) { border-radius: 14px 10px 16px 8px; }
.reef-stone:nth-child(4) { border-radius: 8px 16px 10px 14px; }
.reef-stone:nth-child(5) { border-radius: 12px 8px 16px 12px; }
.reef-stone:nth-child(6) { border-radius: 10px 16px 12px 8px; }
.reef-stone:nth-child(7) { border-radius: 16px 12px 8px 14px; }
.reef-stone:nth-child(8) { border-radius: 8px 14px 16px 10px; }
.reef-stone:nth-child(9) { border-radius: 14px 8px 10px 16px; }
.reef-stone:nth-child(10) { border-radius: 12px 16px 14px 8px; }
.reef-stone:nth-child(11) { border-radius: 14px 10px 12px 16px; }
.reef-stone:nth-child(12) { border-radius: 8px 14px 16px 12px; }
.reef-stone:nth-child(13) { border-radius: 16px 8px 10px 14px; }
.reef-stone:nth-child(14) { border-radius: 10px 16px 14px 8px; }
.reef-stone:nth-child(15) { border-radius: 14px 12px 8px 16px; }
.reef-stone:nth-child(16) { border-radius: 12px 8px 16px 10px; }
.reef-stone:nth-child(17) { border-radius: 8px 16px 12px 14px; }
.reef-stone:nth-child(18) { border-radius: 16px 10px 14px 8px; }
.reef-stone:nth-child(19) { border-radius: 10px 14px 8px 16px; }
.reef-stone:nth-child(20) { border-radius: 14px 8px 16px 12px; }
.reef-stone:nth-child(21) { border-radius: 12px 16px 10px 14px; }

/* Different stone tints */
.reef-stone:nth-child(odd)::before {
  background: linear-gradient(145deg, rgba(35, 60, 75, 0.92), rgba(22, 42, 52, 0.95));
}
.reef-stone:nth-child(even)::before {
  background: linear-gradient(160deg, rgba(30, 55, 68, 0.9), rgba(20, 38, 50, 0.95));
}
.reef-stone:nth-child(3n)::before {
  background: linear-gradient(135deg, rgba(28, 50, 65, 0.88), rgba(18, 35, 48, 0.95));
  border-color: rgba(14, 165, 233, 0.06);
}

.reef-stone:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(20, 184, 166, 0.08);
}

.reef-stone:hover::before {
  border-color: rgba(20, 184, 166, 0.15);
}

/* Logo content — centered and filling the stone */
.reef-stone img {
  position: relative;
  z-index: 1;
  width: 80%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  opacity: 0.7;
  mix-blend-mode: luminosity;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
  transition: opacity 0.3s ease, filter 0.3s ease, mix-blend-mode 0.3s ease;
}

.reef-stone:hover img {
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 10px rgba(20, 184, 166, 0.3));
}

.reef-stone svg {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
  width: 80%;
  height: auto;
  max-height: 50px;
  direction: ltr;
  overflow: visible;
}

.reef-stone:hover svg {
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 10px rgba(20, 184, 166, 0.3));
}

/* Coral/seaweed decorative accents on some stones */
.reef-stone:nth-child(2)::after,
.reef-stone:nth-child(5)::after,
.reef-stone:nth-child(8)::after {
  background-image:
    radial-gradient(circle 30px at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
    radial-gradient(circle 50px at 80% 70%, rgba(0, 0, 0, 0.15) 0%, transparent 100%),
    radial-gradient(circle 15px at 5% 90%, rgba(20, 184, 166, 0.1) 0%, transparent 100%),
    radial-gradient(circle 10px at 95% 85%, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
}

.reef-stone:nth-child(4)::after,
.reef-stone:nth-child(7)::after,
.reef-stone:nth-child(10)::after {
  background-image:
    radial-gradient(circle 30px at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
    radial-gradient(circle 50px at 80% 70%, rgba(0, 0, 0, 0.15) 0%, transparent 100%),
    radial-gradient(circle 12px at 90% 10%, rgba(245, 158, 11, 0.06) 0%, transparent 100%),
    radial-gradient(circle 8px at 8% 15%, rgba(20, 184, 166, 0.07) 0%, transparent 100%);
}

@media (max-width: 1023px) {
  .reef-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
  }
}

@media (max-width: 639px) {
  .coral-reef-wall {
    padding: var(--space-48) var(--space-16);
  }
  .reef-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }
  .reef-stone {
    padding: var(--space-24) var(--space-16);
    min-height: 80px;
  }
  .reef-stone svg {
    width: 85%;
    height: auto;
    max-height: 40px;
    direction: ltr;
    overflow: visible;
  }
  .reef-stone img {
    width: 70%;
    max-height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coral-reef-wall::after {
    animation: none;
  }
}


.tech-stack-section {
  background: linear-gradient(180deg, #0f2235, #0d1b2e);
  position: relative;
  padding-top: 66px;
}

.tech-cloud {
  position: relative;
  width: 100%;
  height: 280px;
  margin-top: var(--space-32);
  overflow: hidden;
  border-radius: 16px;
  background: rgba(20, 184, 166, 0.03);
  border: 1px solid rgba(20, 184, 166, 0.08);
  direction: ltr; /* tech names are LTR */
}

@media (min-width: 768px) {
  .tech-cloud {
    height: 320px;
  }
}


/* ==========================================================================
   13. About
   ========================================================================== */

.section-about .section-title {
  text-align: start;
  max-width: 720px;
  margin-inline: auto;
}

.about-content {
  max-width: 720px;
  margin-inline: auto;
  text-align: start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: var(--space-32);
  position: relative;
  overflow: visible;
}

.about-content::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 3px;
  height: 60px;
  background: linear-gradient(180deg, var(--primary), transparent);
  border-radius: 3px;
}

.about-lead {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: var(--space-24);
}

@media (min-width: 768px) {
  .about-lead {
    font-size: 20px;
  }
}

.about-content p {
  font-size: 16px;
  color: var(--text-dark-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-16);
}

.about-content p.about-lead {
  color: var(--text-dark);
}

.about-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary) !important;
  margin: 0;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .about-tagline {
    font-size: 20px;
  }
}


/* ==========================================================================
   14. Testimonials Carousel
   ========================================================================== */

.carousel-wrapper {
  margin-top: var(--space-32);
}

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-16);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (min-width: 768px) {
  .carousel {
    padding: var(--space-24) var(--space-32);
  }
}

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

.carousel:focus {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 8px;
}

.testimonial-card {
  width: calc(100vw - 64px);
  max-width: 400px;
  scroll-snap-align: center;
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.06), rgba(10, 22, 40, 0.4));
  border: 1px solid rgba(20, 184, 166, 0.1);
  border-radius: 16px;
  padding: var(--space-24);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .testimonial-card {
    width: auto;
    min-width: 320px;
    padding: var(--space-32);
  }
}

/* Subtle quote accent mark */
.testimonial-card::before {
  content: '\201D';
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 100px;
  font-family: Georgia, serif;
  color: rgba(249, 115, 22, 0.35);
  line-height: 1;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .testimonial-card {
    min-width: 320px;
  }
}

.stars {
  color: var(--accent);
  font-size: 20px;
  margin-bottom: var(--space-16);
  letter-spacing: 2px;
}

.testimonial-card blockquote {
  font-size: 15px;
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: var(--space-24);
  font-style: normal;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-author strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
}

.testimonial-author span {
  font-size: 13px;
  color: var(--text-dark-secondary);
}

/* Carousel Controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.carousel-dots {
  display: flex;
  gap: var(--space-8);
}

.carousel-dots button,
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background var(--transition-base) var(--ease-default),
              transform var(--transition-base) var(--ease-default);
}

.carousel-dots button::before,
.carousel-dot::before {
  content: '';
  position: absolute;
  inset: -17px;
}

.carousel-dots button:hover,
.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.4);
}

.carousel-dots button.active,
.carousel-dot.active {
  background: var(--primary);
  transform: scale(1.2);
}

.carousel-dots button:focus-visible,
.carousel-dot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.carousel-pause {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark-secondary);
  border-radius: 50%;
  transition: color var(--transition-base) var(--ease-default),
              background var(--transition-base) var(--ease-default);
}

.carousel-pause:hover {
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.08);
}

.carousel-pause:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* trust-line removed per user request */


/* ==========================================================================
   15. FAQ
   ========================================================================== */

.section-faq .section-title {
  text-align: start;
  max-width: 800px;
  margin-inline: auto;
}

.section-faq .section-subtitle {
  text-align: start;
  max-width: 800px;
}

.faq-list {
  max-width: 800px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: var(--space-8) var(--space-24);
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-24) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-dark);
  list-style: none;
  gap: var(--space-16);
  transition: color var(--transition-base) var(--ease-default);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: '';
}

.faq-item summary:hover {
  color: var(--primary-light);
  background: rgba(20, 184, 166, 0.06);
  border-radius: 8px;
  margin-inline: calc(-1 * var(--space-12));
  padding-inline: var(--space-12);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-item summary span {
  flex: 1;
}

.faq-chevron {
  color: var(--text-dark-secondary);
  transition: transform var(--transition-slow) var(--ease-default);
  flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow) var(--ease-default);
}

.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer > p {
  overflow: hidden;
  padding-bottom: var(--space-24);
  color: var(--text-dark-secondary);
  font-size: 15px;
  line-height: 1.7;
}


/* ==========================================================================
   16. Contact Form
   ========================================================================== */

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  max-width: 720px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(249, 115, 22, 0.12);
  border-radius: 16px;
  padding: var(--space-32);
  box-shadow: 0 0 60px rgba(249, 115, 22, 0.04);
}

@media (min-width: 640px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

.form-row-thirds {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .form-row-thirds {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-group label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-dark);
}

.required {
  color: var(--error);
}

.form-group input,
.form-group textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: var(--space-12) var(--space-16);
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--transition-base) var(--ease-default),
              box-shadow var(--transition-base) var(--ease-default);
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #64748b;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

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

.form-error {
  color: var(--error);
  font-size: 13px;
  margin-top: var(--space-4);
  min-height: 18px;
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: var(--error);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Submit button aligned to the left (end in RTL) */
.form-submit-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-8);
}

.form-submit-left .form-microcopy {
  text-align: end;
}

/* Toggle Switch */
.form-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
  font-size: 15px;
  color: var(--text-dark);
  font-weight: 500;
}

.toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition: background var(--transition-base) var(--ease-default);
  flex-shrink: 0;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-base) var(--ease-default);
}

.toggle-label input[type="checkbox"]:checked + .toggle-switch {
  background: var(--primary);
}

.toggle-label input[type="checkbox"]:checked + .toggle-switch::after {
  transform: translateX(-20px);
}

[dir="ltr"] .toggle-label input[type="checkbox"]:checked + .toggle-switch::after {
  transform: translateX(20px);
}

.toggle-label input[type="checkbox"]:focus-visible + .toggle-switch {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Submit area */
.form-microcopy {
  font-size: 13px;
  color: var(--text-dark-secondary);
  margin-top: var(--space-8);
}

/* Success message */
.form-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
  border-radius: 12px;
  padding: var(--space-24);
  text-align: center;
  grid-column: 1 / -1;
}

.form-success p {
  color: var(--success);
  font-weight: 600;
  font-size: 16px;
}

/* Contact Alternatives */
.contact-alt {
  text-align: center;
  margin-top: var(--space-32);
  color: var(--text-dark-secondary);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.contact-link {
  color: var(--primary);
  margin-inline: var(--space-8);
  font-weight: 500;
  transition: color var(--transition-base) var(--ease-default);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.contact-link svg {
  flex-shrink: 0;
  vertical-align: middle;
}

.contact-link:hover {
  color: var(--primary-light);
}

.contact-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ==========================================================================
   17. Footer
   ========================================================================== */

.site-footer {
  background: var(--deep-bg);
  padding: var(--space-64) 0 var(--space-24);
  border-top: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }
}

/* Footer Brand */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.footer-brand img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin-bottom: -8px;
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}

.footer-tagline {
  font-size: 14px;
  color: var(--text-dark-secondary);
  line-height: 1.6;
  max-width: 280px;
}

/* Footer Links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer-links h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-8);
}

.footer-links a {
  font-size: 14px;
  color: var(--text-dark-secondary);
  transition: color var(--transition-base) var(--ease-default);
  padding-block: 2px;
}

.footer-links a:hover {
  color: var(--text-dark);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footer Contact */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer-contact h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--space-8);
}

.footer-contact p,
.footer-contact a {
  font-size: 14px;
  color: var(--text-dark-secondary);
  line-height: 1.6;
}

.footer-contact a {
  transition: color var(--transition-base) var(--ease-default);
}

.footer-contact a:hover {
  color: var(--primary);
}

.footer-contact a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footer Social */
.footer-social {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-8);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-dark-secondary);
  border-radius: 8px;
  transition: color var(--transition-base) var(--ease-default),
              background var(--transition-base) var(--ease-default);
}

.footer-social a:hover {
  color: var(--primary);
  background: rgba(20, 184, 166, 0.08);
}

.footer-social a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Footer Bottom */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: var(--space-48);
  padding-top: var(--space-24);
}

.footer-bottom p {
  font-size: 13px;
  color: #475569;
}

.accessibility-badge {
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
}


/* ==========================================================================
   18. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-default);
  text-decoration: none;
  border: none;
  white-space: nowrap;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.3);
}

/* Primary (Warm Coral Gradient) */
.btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.25), var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary (Teal outline) */
.btn-secondary {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* Large */
.btn-large {
  padding: var(--space-16) var(--space-32);
  font-size: 18px;
  min-height: 52px;
}


/* ==========================================================================
   19. Scroll Animations
   ========================================================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
[data-stagger-child] {
  transition-delay: calc(var(--stagger-index, 0) * 80ms);
}


/* ==========================================================================
   20. Interactive Effects
   ========================================================================== */

/* Shimmer animation for section titles on hover */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Glass cards get smooth tilt transitions */
.glass-card,
.wl-bento-card,
.testimonial-card {
  will-change: transform;
}

/* Cursor glow hidden on touch devices */
@media (hover: none) {
  #cursor-glow {
    display: none !important;
  }
}

/* Bubbles canvas hidden on reduced motion */
@media (prefers-reduced-motion: reduce) {
  #bubbles-canvas,
  #cursor-glow {
    display: none !important;
  }
}


/* ==========================================================================
   21. Prefers Reduced Motion
   ========================================================================== */

@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;
  }

  .scroll-container {
    height: auto;
  }

  .sticky-wrapper {
    position: relative;
  }

  .overlay {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: var(--space-48) var(--space-16);
  }

  .animate-on-scroll,
  .service-card,
  .dive-card {
    opacity: 1;
    transform: none;
  }

  .loading-logo {
    animation: none;
  }

  .faq-answer {
    transition: none;
  }

  .glass-card:hover {
    transform: none;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}


/* ==========================================================================
   21. Noscript Fallback
   ========================================================================== */

.noscript-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-48) var(--space-16);
  text-align: center;
  background: var(--surface-bg);
  gap: var(--space-24);
}

.noscript-fallback h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-light);
  letter-spacing: -0.03em;
  max-width: 480px;
}

.noscript-fallback p {
  font-size: 16px;
  color: var(--text-light-secondary);
  max-width: 400px;
}


/* ==========================================================================
   Utility — Visually Hidden (for screen readers)
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   Wave Divider Animation
   ========================================================================== */

.divider-wave svg {
  display: block;
  width: 100%;
  height: 80px;
}

@media (min-width: 768px) {
  .divider-wave svg {
    height: 120px;
  }
}

.wave-back {
  animation: waveBack 8s ease-in-out infinite;
}

.wave-mid {
  animation: waveMid 6s ease-in-out infinite;
}

.wave-front {
  animation: waveFront 4.5s ease-in-out infinite;
}

@keyframes waveBack {
  0%, 100% {
    d: path("M0,60 C240,90 480,30 720,60 C960,90 1200,30 1440,60 L1440,120 L0,120 Z");
  }
  50% {
    d: path("M0,55 C240,30 480,85 720,55 C960,30 1200,85 1440,55 L1440,120 L0,120 Z");
  }
}

@keyframes waveMid {
  0%, 100% {
    d: path("M0,70 C200,40 400,90 600,60 C800,30 1000,80 1200,50 C1320,38 1400,55 1440,70 L1440,120 L0,120 Z");
  }
  50% {
    d: path("M0,65 C200,85 400,35 600,65 C800,85 1000,35 1200,65 C1320,78 1400,58 1440,65 L1440,120 L0,120 Z");
  }
}

@keyframes waveFront {
  0%, 100% {
    d: path("M0,80 C180,60 360,95 540,75 C720,55 900,90 1080,70 C1260,50 1380,72 1440,80 L1440,120 L0,120 Z");
  }
  50% {
    d: path("M0,75 C180,92 360,58 540,78 C720,92 900,55 1080,78 C1260,90 1380,65 1440,75 L1440,120 L0,120 Z");
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-back, .wave-mid, .wave-front {
    animation: none;
  }
}


/* ==========================================================================
   WhatsApp Floating Button
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s ease;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-base) var(--ease-default),
              box-shadow var(--transition-base) var(--ease-default);
}

.whatsapp-float.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.whatsapp-float:active {
  transform: translateY(0) scale(0.98);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

@media (max-width: 639px) {
  .whatsapp-float {
    bottom: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
  }
  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}


/* ==========================================================================
   Mobile Responsive Enhancements
   ========================================================================== */

@media (max-width: 767px) {
  /* Bigger section titles on mobile */
  .section-title {
    font-size: 26px;
  }

  /* Section padding tighter */
  .section {
    padding: var(--space-32) 0;
  }

  /* Hero title more readable */
  .hero-title {
    font-size: 32px;
    padding-inline: var(--space-8);
  }

  .hero-subtitle {
    font-size: 15px;
    padding-inline: var(--space-8);
  }

  /* Stats grid tighter on mobile */
  .stats-grid {
    padding: var(--space-24);
    gap: var(--space-16);
  }

  .stat-number {
    font-size: 40px;
  }

  /* Timeline steps readable */
  .timeline-step h3 {
    font-size: 17px;
  }

  .timeline-step p {
    font-size: 14px;
  }

  /* Bento cards stack cleanly */
  .wl-bento-card {
    padding: var(--space-16);
  }

  .wl-bento-main {
    padding: var(--space-24);
  }

  /* About section tighter */
  .about-content p {
    font-size: 15px;
  }

  /* Contact form vertical on small screens */
  .contact-form {
    padding: var(--space-24);
  }

  /* Carousel cards wider on mobile */
  .testimonial-card {
    min-width: 85vw;
  }

  /* FAQ items bigger touch targets */
  .faq-item summary {
    padding: var(--space-16) 0;
    font-size: 15px;
    min-height: 48px;
  }

  /* Footer tighter */
  .footer-grid {
    gap: var(--space-24);
  }

  /* Hide cursor effects on mobile (JS handles, but CSS too) */
  #cursor-glow {
    display: none !important;
  }

  /* Drawer shadow */
  .mobile-drawer.open {
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
  }

  [dir="rtl"] .mobile-drawer.open {
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.6);
  }
}


/* ==========================================================================
   Performance: content-visibility for below-fold sections
   Skips rendering until the section scrolls near the viewport.
   ========================================================================== */
.section-process,
.section-clients,
.coral-reef-wall,
.section-whitelabel,
.section-testimonials,
.section-faq,
.section-contact,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* .section-about excluded — funfact bubble needs overflow visible */