/* ============================================================
   RAWAFID SIGNATURE CONNECTORS & LIVING WAVE SYSTEM
   Inspired by Flow: Streams, Waves, Swirls, and Tributaries
   Official Brand Palette:
     - Turquoise: #4cb6ae
     - Mint / Aqua: #6ee7b7
     - Sage: #a8bb8c
     - Sand / Gold: #caa47e
     - Lavender / Indigo: #8b8ab1
     - Deep River Teal: #06474f / Dark Canvas: #052126
   ============================================================ */

/* ============================================================
   1. CORE KEYFRAME ANIMATION ENGINE
   ============================================================ */
@keyframes riverBeamFlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes streamPulseTravel {
  0% {
    stroke-dashoffset: 600;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes terminalPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

@keyframes terminalPulseGold {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

@keyframes constellationSparkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes waveFloatSlow {

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

  50% {
    transform: translateY(-7px) rotate(0.4deg);
  }
}

@keyframes waveFloatReverse {

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

  50% {
    transform: translateY(7px) rotate(-0.4deg);
  }
}

@keyframes centerpieceBreathe {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 16px 40px rgba(6, 71, 79, 0.12);
  }

  50% {
    transform: translate(-50%, -53%) scale(1.02);
    box-shadow: 0 22px 50px rgba(6, 71, 79, 0.18), 0 0 24px rgba(76, 182, 174, 0.2);
  }
}

@keyframes ribbonAmbientDrift {

  0%,
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 0.22;
  }

  50% {
    transform: translateY(-16px) scaleY(1.06);
    opacity: 0.35;
  }
}

@keyframes ribbonAmbientDriftAlt {

  0%,
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 0.18;
  }

  50% {
    transform: translateY(14px) scaleY(0.95);
    opacity: 0.3;
  }
}

@keyframes strokeDrawFlow {
  from {
    stroke-dashoffset: 80;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   2. PUBLIC SITE NAVIGATION BAR & TOPLINE ANIMATIONS
   ============================================================ */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  background: rgba(253, 252, 250, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(6, 71, 79, 0.08) !important;
  box-shadow: 0 4px 20px -4px rgba(6, 71, 79, 0.04) !important;
  isolation: isolate;
  transform: translateZ(0);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.site-header.scrolled {
  background: rgba(253, 252, 250, 0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(6, 71, 79, 0.12) !important;
  box-shadow: 0 8px 24px -4px rgba(6, 71, 79, 0.08) !important;
}

/* Living River Beam Across Topline */
.site-header .topline {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, 
    #06474f 0%, 
    #176570 15%, 
    #4cb6ae 35%, 
    #6ee7b7 50%, 
    #caa47e 70%, 
    #8b8ab1 85%, 
    #4cb6ae 95%, 
    #06474f 100%) !important;
  background-size: 250% 100% !important;
  animation: riverBeamFlow 5.5s linear infinite !important;
  box-shadow: 0 1px 10px rgba(76, 182, 174, 0.45) !important;
  z-index: 1001 !important;
}

/* Navbar Shell & Golden Ratio Height */
.site-header .nav {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 32px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  gap: 20px !important;
  position: relative !important;
}

/* Nav Links Container */
.site-header .navlinks {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Brand Static Crisp State */
.brand.brand-logo {
  filter: drop-shadow(0 2px 4px rgba(76, 182, 174, 0.2)) saturate(1.05);
  will-change: transform;
}

/* Nav Links Interactive Micro-Animations */
.site-header .navlinks a:not(.button) {
  position: relative !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #3b5054 !important;
  padding: 8px 15px !important;
  border-radius: 99px !important;
  letter-spacing: 0.015em !important;
  text-decoration: none !important;
  transition: color 0.22s ease, background 0.24s ease, box-shadow 0.24s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Live Active Indicator Dot for Community */
.site-header .navlinks a[href*="join.php"]::before {
  content: '' !important;
  display: inline-block !important;
  width: 6.5px !important;
  height: 6.5px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  margin-right: 7px !important;
  box-shadow: 0 0 6px #10b981, 0 0 2px #6ee7b7 !important;
  animation: navLiveDotPulse 2.4s ease-in-out infinite !important;
}

@keyframes navLiveDotPulse {
  0%, 100% {
    transform: scale(0.95);
    box-shadow: 0 0 6px #10b981, 0 0 2px #6ee7b7;
    opacity: 0.85;
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 12px #10b981, 0 0 4px #6ee7b7;
    opacity: 1;
  }
}

/* Hover Pill Glow */
.site-header .navlinks a:not(.button):hover {
  color: #06474f !important;
  background: rgba(76, 182, 174, 0.12) !important;
  box-shadow: 0 2px 10px rgba(6, 71, 79, 0.05), inset 0 0 0 1px rgba(76, 182, 174, 0.22) !important;
  transform: translateY(-1.5px) !important;
}

/* Liquid Stream Underline Indicator */
.site-header .navlinks a:not(.button)::after {
  content: '' !important;
  position: absolute !important;
  bottom: 1px !important;
  left: 50% !important;
  width: 22px !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, #4cb6ae, #6ee7b7) !important;
  border-radius: 99px !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, width 0.28s ease !important;
  opacity: 0 !important;
  box-shadow: 0 0 10px rgba(110, 231, 183, 0.95), 0 0 4px #4cb6ae !important;
  pointer-events: none !important;
}

.site-header .navlinks a:not(.button):hover::after {
  transform: translateX(-50%) scaleX(1) !important;
  opacity: 1 !important;
  width: 26px !important;
}

/* Active Page State */
.site-header .navlinks a:not(.button).active {
  color: #06474f !important;
  font-weight: 600 !important;
  background: rgba(6, 71, 79, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(6, 71, 79, 0.12) !important;
}

.site-header .navlinks a:not(.button).active::after {
  transform: translateX(-50%) scaleX(1) !important;
  opacity: 1 !important;
  width: 26px !important;
  background: linear-gradient(90deg, #06474f, #4cb6ae) !important;
}

/* Jewel CTA "Connect with us" Button */
.site-header .navlinks a.button {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #06474f 0%, #0d5d67 50%, #06474f 100%) !important;
  background-size: 200% 100% !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 10px 22px !important;
  margin-left: 8px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(110, 231, 183, 0.38) !important;
  box-shadow: 0 4px 16px rgba(6, 71, 79, 0.22), 0 0 12px rgba(76, 182, 174, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.28) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Dynamic Sheen Sweep on Button */
.site-header .navlinks a.button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -140% !important;
  width: 80% !important;
  height: 100% !important;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%) !important;
  transform: skewX(-20deg) !important;
  animation: navBtnSheenSweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  pointer-events: none !important;
}

@keyframes navBtnSheenSweep {
  0%, 65% {
    left: -140%;
  }
  100% {
    left: 240%;
  }
}

/* Interactive Micro-Arrow */
.site-header .navlinks a.button::after {
  content: '\2192' !important;
  display: inline-block !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.site-header .navlinks a.button:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background-position: 100% 0 !important;
  border-color: rgba(110, 231, 183, 0.7) !important;
  box-shadow: 0 8px 26px rgba(6, 71, 79, 0.28), 0 0 22px rgba(76, 182, 174, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

.site-header .navlinks a.button:hover::after {
  transform: translateX(3.5px) !important;
}

.site-header .navlinks a.button:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 10px rgba(6, 71, 79, 0.2) !important;
}

/* Responsive Mobile Navigation & Morphing Hamburger */
.site-header .menu {
  display: none;
  background: rgba(6, 71, 79, 0.05);
  border: 1px solid rgba(6, 71, 79, 0.12);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  color: transparent;
  font-size: 0;
}

.site-header .menu:hover {
  background: rgba(76, 182, 174, 0.12);
  border-color: rgba(76, 182, 174, 0.35);
  transform: scale(1.05);
}

.site-header .menu::before,
.site-header .menu::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #06474f;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), top 0.3s ease, bottom 0.3s ease;
}

.site-header .menu::before {
  top: 15px;
}

.site-header .menu::after {
  bottom: 15px;
}

.site-header .menu span.menu-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #06474f;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-header .menu[aria-expanded="true"] span.menu-bar,
.site-header .menu.is-active span.menu-bar {
  opacity: 0;
  transform: scaleX(0);
}

.site-header .menu[aria-expanded="true"]::before,
.site-header .menu.is-active::before {
  top: 21px;
  transform: rotate(45deg);
}

.site-header .menu[aria-expanded="true"]::after,
.site-header .menu.is-active::after {
  bottom: 21px;
  transform: rotate(-45deg);
}

@media (max-width: 960px) {
  .site-header .nav {
    height: 64px !important;
    padding: 0 20px !important;
  }

  .site-header .menu {
    display: flex !important;
  }

  .site-header .navlinks {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 16px !important;
    right: 16px !important;
    background: rgba(253, 252, 250, 0.97) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(6, 71, 79, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 48px -10px rgba(6, 71, 79, 0.2) !important;
    padding: 16px !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 1000 !important;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .site-header .navlinks.open {
    display: flex !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  .site-header .navlinks a:not(.button) {
    width: 100% !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    justify-content: flex-start !important;
    font-size: 15px !important;
  }

  .site-header .navlinks a:not(.button)::after {
    left: 18px !important;
    transform: none !important;
  }

  .site-header .navlinks a.button {
    width: 100% !important;
    margin: 8px 0 0 !important;
    justify-content: center !important;
    padding: 13px !important;
    font-size: 15px !important;
  }
}

/* ============================================================
   2.5 HERO SECTION VIEWPORT PERFECTION & TYPOGRAPHY SUITE
   Ensures Header + Hero + Ticker fits naturally in initial viewport
   ============================================================ */
.hero {
  position: relative !important;
  padding: 24px 0 20px !important;
  height: calc(100vh - 72px - 50px) !important;
  height: calc(100svh - 72px - 50px) !important;
  max-height: 740px !important;
  min-height: 440px !important;
  display: flex !important;
  align-items: center !important;
  background: radial-gradient(circle at 82% 40%, rgba(76, 182, 174, 0.13) 0%, rgba(110, 231, 183, 0.05) 34%, transparent 65%),
              radial-gradient(circle at 14% 68%, rgba(202, 164, 126, 0.09) 0%, transparent 48%),
              linear-gradient(180deg, #fcfbfa 0%, #f3f8f6 100%) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;
  gap: 48px !important;
  align-items: center !important;
  width: min(1320px, 100%) !important;
}

.hero-content {
  position: relative;
  z-index: 5;
}

.hero h1 {
  max-width: 680px !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  color: #06474f !important;
  margin: 16px 0 20px !important;
}

.hero .intro {
  font-size: 16.5px !important;
  line-height: 1.68 !important;
  color: #485c60 !important;
  max-width: 520px !important;
  margin-bottom: 24px !important;
}

.hero-actions {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 22px !important;
}

/* Staggered Smooth Entrance */
.hero-content .eyebrow {
  animation: heroTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-content h1 {
  animation: heroTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.hero-content .intro {
  animation: heroTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-content .hero-actions {
  animation: heroTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

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

/* 1. Animated Eyebrow Badge */
.hero-content .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(6, 71, 79, 0.05) !important;
  border: 1px solid rgba(78, 182, 174, 0.28) !important;
  border-radius: 99px !important;
  color: #06474f !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 10px rgba(6, 71, 79, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 22px !important;
}

.hero-content .eyebrow:hover {
  background: rgba(78, 182, 174, 0.12) !important;
  border-color: rgba(78, 182, 174, 0.5) !important;
  box-shadow: 0 4px 16px rgba(6, 71, 79, 0.08), 0 0 12px rgba(78, 182, 174, 0.2) !important;
  transform: translateY(-1px) !important;
}

.hero-eyebrow-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  animation: heroBeaconPulse 2.4s infinite ease-in-out !important;
  flex-shrink: 0 !important;
}

@keyframes heroBeaconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
    box-shadow: 0 0 6px #10b981;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
    box-shadow: 0 0 14px #10b981, 0 0 22px rgba(16, 185, 129, 0.6);
  }
}

/* 2. Living Stream Wave Headline "flows" */
.hero-content h1 em.flowing-word {
  display: inline-block;
  position: relative;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, #06474f 0%, #0d9488 22%, #10b981 48%, #4cb6ae 74%, #06474f 100%) !important;
  background-size: 260% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: liquidFlowCycle 5s linear infinite !important;
  padding-right: 6px;
  cursor: default;
  transition: transform 0.3s ease;
}

.hero-content h1 em.flowing-word:hover {
  transform: scale(1.03);
}

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

/* Harmonic wave stream underline beneath "flows" */
.hero-content h1 em.flowing-word::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #06474f 0%, #4cb6ae 35%, #10b981 70%, #6ee7b7 100%);
  background-size: 200% auto;
  border-radius: 99px;
  animation: liquidUnderlineFlow 3.6s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(78, 182, 174, 0.6);
}

@keyframes liquidUnderlineFlow {
  0%, 100% {
    background-position: 0% 50%;
    transform: scaleX(0.92);
    opacity: 0.75;
  }
  50% {
    background-position: 100% 50%;
    transform: scaleX(1.05);
    opacity: 1;
    box-shadow: 0 0 14px rgba(110, 231, 183, 0.85);
  }
}

/* 3. Hero CTA Buttons Animation Suite */
.hero-btn-primary {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 99px !important;
  padding: 13px 28px !important;
  background: linear-gradient(135deg, #06474f 0%, #0d5964 100%) !important;
  border: 1px solid rgba(78, 182, 174, 0.4) !important;
  box-shadow: 0 4px 18px rgba(6, 71, 79, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-weight: 600 !important;
}

.hero-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-22deg);
  animation: heroButtonShine 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroButtonShine {
  0%, 65%, 100% {
    left: -120%;
  }
  80% {
    left: 180%;
  }
}

.hero-btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 28px rgba(6, 71, 79, 0.32), 0 0 20px rgba(78, 182, 174, 0.45) !important;
  background: linear-gradient(135deg, #095963 0%, #116f7c 100%) !important;
}

.hero-btn-primary .btn-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-primary:hover .btn-arrow {
  transform: translateX(5px);
}

.hero-btn-alt {
  position: relative !important;
  border-radius: 99px !important;
  padding: 13px 28px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(6, 71, 79, 0.22) !important;
  color: #06474f !important;
  box-shadow: 0 2px 10px rgba(6, 71, 79, 0.05) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-weight: 600 !important;
}

.hero-btn-alt:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background: #ffffff !important;
  border-color: #06474f !important;
  box-shadow: 0 6px 22px rgba(6, 71, 79, 0.12), 0 0 14px rgba(78, 182, 174, 0.2) !important;
  color: #06474f !important;
}

.hero-btn-alt .btn-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-alt:hover .btn-arrow {
  transform: translate(2px, -2px);
}

/* ============================================================
   3. HERO LIVING STREAM ART (HARMONIC FLOW, SWIRL & DOUBLE WAVE)
   ============================================================ */
.stream-art-modern {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* ============================================================
   STANDALONE ENLARGED ANIMATED RAWAFID LOGO (NO BACKGROUND)
   Fluid Confluence Animation Suite
   ============================================================ */
.stream-centerpiece.stream-centerpiece-pure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  animation: heroLogoLevitate 6s ease-in-out infinite;
  user-select: none;
  will-change: transform;
}

/* The Grand Vector Logo: Crisp, Proportional, Transparent Background */
.rawafid-hero-logo {
  width: 380px !important;
  height: auto !important;
  max-width: 90vw !important;
  overflow: visible !important;
  display: block !important;
  filter: drop-shadow(0 12px 24px rgba(6, 71, 79, 0.12)) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
  cursor: pointer !important;
  will-change: transform;
}

.stream-centerpiece.stream-centerpiece-pure:hover .rawafid-hero-logo {
  transform: scale(1.025) translateY(-2px) !important;
  filter: drop-shadow(0 18px 36px rgba(6, 71, 79, 0.18)) drop-shadow(0 0 16px rgba(78, 182, 174, 0.25)) !important;
}

/* Organic Floating Levitation */
@keyframes heroLogoLevitate {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
  }
  30% {
    transform: translate(-50%, -50%) translateY(-12px) rotate(0.35deg);
  }
  65% {
    transform: translate(-50%, -50%) translateY(-4px) rotate(-0.3deg);
  }
  85% {
    transform: translate(-50%, -50%) translateY(-8px) rotate(0.12deg);
  }
}

/* Base paths */
.rawafid-stream {
  transition: all 0.4s ease;
}

/* Outer Structural Frame Ambient Breathing */
.logo-stream-frame {
  animation: frameBreath 5.5s ease-in-out infinite;
}

@keyframes frameBreath {
  0%, 100% {
    opacity: 0.94;
  }
  50% {
    opacity: 1;
  }
}

/* ============================================================
   SEQUENTIAL ENERGY SEQUENCE (4.6s Cycle)
   Knowledge enters the 5 origin nodes -> flows along tributaries ->
   converges into the Arabic calligraphy & English wordmark
   Hardware-accelerated at 60-120 FPS using transform & opacity
   ============================================================ */

/* 1. Origin Nodes (Knowledge Inputs) */
.logo-dot-1 {
  animation: nodeFire 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.1s;
  transform-origin: 66px 104px;
}
.logo-dot-2 {
  animation: nodeFire 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.35s;
  transform-origin: 66px 171px;
}
.logo-dot-3 {
  animation: nodeFire 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.6s;
  transform-origin: 66px 237px;
}
.logo-dot-4 {
  animation: nodeFire 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.85s;
  transform-origin: 66px 301px;
}
.logo-dot-5 {
  animation: nodeFire 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.1s;
  transform-origin: 66px 366px;
}

@keyframes nodeFire {
  0%, 75%, 100% {
    opacity: 0.85;
    transform: scale(1);
  }
  14% {
    opacity: 1;
    transform: scale(1.18);
  }
  28% {
    opacity: 0.92;
    transform: scale(1.02);
  }
}

/* 2. Fluid Stream Channels */

/* Stream Teal (Top Arch) */
.logo-stream-teal {
  animation: streamFlowTeal 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.3s;
}

@keyframes streamFlowTeal {
  0%, 75%, 100% {
    opacity: 0.88;
  }
  18% {
    opacity: 1;
  }
  36% {
    opacity: 0.92;
  }
}

/* Stream Turquoise (Second Main Arch) */
.logo-stream-turq {
  animation: streamFlowTurq 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.55s;
}

@keyframes streamFlowTurq {
  0%, 75%, 100% {
    opacity: 0.88;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0.92;
  }
}

/* Stream Mint (Third Wave + Loop) */
.logo-stream-mint,
.logo-stream-mint-2 {
  animation: streamFlowMint 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.8s;
}

@keyframes streamFlowMint {
  0%, 75%, 100% {
    opacity: 0.88;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0.92;
  }
}

/* Stream Gold (Fourth Wave + Swirl) */
.logo-stream-gold,
.logo-stream-gold-2 {
  animation: streamFlowGold 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.05s;
}

@keyframes streamFlowGold {
  0%, 75%, 100% {
    opacity: 0.88;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0.92;
  }
}

/* Stream Purple & Deep Indigo */
.logo-stream-purple {
  animation: streamFlowPurple 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.3s;
}

@keyframes streamFlowPurple {
  0%, 75%, 100% {
    opacity: 0.88;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0.92;
  }
}

.logo-stream-dark {
  animation: streamFlowDark 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.5s;
}

@keyframes streamFlowDark {
  0%, 75%, 100% {
    opacity: 0.9;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0.94;
  }
}

/* 3. Confluence Illumination on Arabic Calligraphy ("روافد") */
.logo-arabic-calligraphy {
  animation: calligraphyConfluence 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes calligraphyConfluence {
  0%, 35%, 100% {
    fill: #164450;
    opacity: 0.92;
  }
  55% {
    fill: #228b9e;
    opacity: 1;
  }
  75% {
    fill: #164450;
    opacity: 0.94;
  }
}

/* 4. English Wordmark Shimmer ("RAWAFID") */
.logo-text-rawafid path {
  animation: wordmarkShimmer 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.logo-text-rawafid path:nth-child(1) { animation-delay: 2.3s; }
.logo-text-rawafid path:nth-child(2) { animation-delay: 2.45s; }
.logo-text-rawafid path:nth-child(3) { animation-delay: 2.6s; }
.logo-text-rawafid path:nth-child(4) { animation-delay: 2.75s; }
.logo-text-rawafid path:nth-child(5) { animation-delay: 2.9s; }
.logo-text-rawafid path:nth-child(6) { animation-delay: 3.05s; }
.logo-text-rawafid path:nth-child(7) { animation-delay: 3.2s; }

@keyframes wordmarkShimmer {
  0%, 60%, 100% {
    fill: #164450;
    opacity: 0.9;
  }
  74% {
    fill: #2baabf;
    opacity: 1;
  }
  88% {
    fill: #164450;
    opacity: 0.92;
  }
}

/* Interactive Hover Symphony */
.stream-centerpiece.stream-centerpiece-pure:hover .logo-stream-turq,
.stream-centerpiece.stream-centerpiece-pure:hover .logo-stream-mint,
.stream-centerpiece.stream-centerpiece-pure:hover .logo-stream-gold,
.stream-centerpiece.stream-centerpiece-pure:hover .logo-stream-purple {
  filter: drop-shadow(0 0 14px currentColor) !important;
}

.stream-centerpiece.stream-centerpiece-pure:hover .logo-arabic-calligraphy {
  filter: drop-shadow(0 0 16px rgba(78, 182, 174, 0.9)) !important;
}

.stream-centerpiece.stream-centerpiece-pure:hover .logo-text-rawafid path {
  fill: #1c5b6b;
  filter: drop-shadow(0 0 4px rgba(78, 182, 174, 0.6)) !important;
}

/* ============================================================
   3.5 RAWAFID SIGNATURE CONNECTORS LIVING SUITE (HERO LOGO)
   Faithfully implementing the 12 Signature Connectors Brand System:
   - #1 Soft Flow & #2 S-Curve Flow (Fiber traces & knowledge photons)
   - #10 Branch Flow & #7 Gradual Ascend (Input bridge from text)
   - #4 Swirl Connect & #6 Loop & Flow (Central vortex accent)
   - #12 Harmonic Flow (Delta confluence multi-strand waves)
   - Luminous Terminal Nodes & Constellation Dot Triads
   ============================================================ */

/* Hide all signature connector lines and ambient wire clutter */
.hero-ambient-connectors,
.logo-signature-connectors,
.sig-group-inputs,
.sig-group-tributaries,
.sig-group-center-swirl,
.sig-group-harmonic-delta,
.sig-group-constellations {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-ambient-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ambient-sig-line {
  fill: none;
  stroke: rgba(78, 182, 174, 0.2);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ambient-sig-line-1 {
  stroke-dasharray: 120 180;
  animation: ambientSigFlow1 12s linear infinite, waveFloatSlow 8s ease-in-out infinite;
}

.ambient-sig-line-2 {
  stroke: rgba(202, 164, 126, 0.18);
  stroke-dasharray: 90 220;
  animation: ambientSigFlow2 14s linear infinite, waveFloatReverse 9s ease-in-out infinite;
}

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

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

.ambient-constellation-dot {
  fill: #6ee7b7;
  opacity: 0.35;
  animation: constellationSparkle 4.2s ease-in-out infinite;
}

/* Base Signature Connector Group inside Logo */
.logo-signature-connectors {
  pointer-events: none;
}

.sig-connector-line {
  fill: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* 1. Input Branch Flow (#10 Branch Flow & #7 Gradual Ascend & #8 Gradual Descend) */
.sig-line-branch {
  opacity: 0.85;
}

.sig-line-ascend {
  opacity: 0.8;
}

.sig-line-descend {
  opacity: 0.8;
}

.sig-pulse-input {
  fill: none;
  stroke-dasharray: 24 160;
  animation: sigInputPhoton 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.05s;
}

.sig-pulse-input-split {
  fill: none;
  stroke-dasharray: 22 180;
  animation: sigInputPhoton 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.45s;
}

.sig-pulse-descend {
  fill: none;
  stroke-dasharray: 20 160;
  animation: sigInputPhoton 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.75s;
}

.sig-node-ascend {
  animation: sigTerminalPulseTurq 4.0s ease-in-out infinite;
  animation-delay: 0.4s;
}

.sig-node-descend {
  animation: terminalPulseGold 4.2s ease-in-out infinite;
  animation-delay: 0.8s;
}

@keyframes sigInputPhoton {
  0% {
    stroke-dashoffset: 180;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  35% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  50%, 100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* 2. Tributary Fiber Traces & Traveling Photons (#1 Soft Flow & #2 S-Curve) */
.sig-trace {
  transition: opacity 0.4s ease;
}

.sig-photon {
  stroke-dasharray: 38 460;
  stroke-dashoffset: 500;
  animation: sigPhotonTravel 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0;
}

.sig-photon-1 {
  animation-delay: 0.25s;
}

.sig-photon-2 {
  animation-delay: 0.5s;
}

.sig-photon-3 {
  animation-delay: 0.75s;
}

.sig-photon-4 {
  animation-delay: 1.0s;
}

.sig-photon-5 {
  animation-delay: 1.25s;
}

@keyframes sigPhotonTravel {
  0% {
    stroke-dashoffset: 500;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  68%, 100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* 3. Luminous Terminal Nodes (Brand Spec Breathing Endpoints) */
.sig-terminal-node {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
  will-change: transform, opacity;
}

.sig-node-input {
  animation: sigTerminalPulseTurq 3.8s ease-in-out infinite;
}

.sig-origin-node-1 {
  animation: sigTerminalFire 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.1s;
}

.sig-origin-node-2 {
  animation: sigTerminalFireTurq 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.35s;
}

.sig-origin-node-3 {
  animation: sigTerminalFireMint 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.6s;
}

.sig-origin-node-4 {
  animation: sigTerminalFireGold 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.85s;
}

.sig-origin-node-5 {
  animation: sigTerminalFirePurple 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.1s;
}

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

@keyframes sigTerminalFireTurq {
  0%, 75%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  16% {
    transform: scale(1.45);
    opacity: 1;
  }
  30% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

@keyframes sigTerminalFire {
  0%, 75%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }
  16% {
    transform: scale(1.4);
    opacity: 1;
  }
  30% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes sigTerminalFireMint {
  0%, 75%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }
  16% {
    transform: scale(1.4);
    opacity: 1;
  }
  30% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes sigTerminalFireGold {
  0%, 75%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }
  16% {
    transform: scale(1.4);
    opacity: 1;
  }
  30% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes sigTerminalFirePurple {
  0%, 75%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }
  16% {
    transform: scale(1.4);
    opacity: 1;
  }
  30% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* 4. Central Vortex Swirl Accent (#4 Swirl Connect & #6 Loop & Flow) */
.sig-swirl-path {
  animation: sigSwirlBreathe 5.2s ease-in-out infinite;
}

@keyframes sigSwirlBreathe {
  0%, 100% {
    opacity: 0.6;
    stroke-width: 1.5;
  }
  50% {
    opacity: 0.95;
    stroke-width: 1.8;
  }
}

.sig-swirl-node {
  animation: sigTerminalPulseTurq 3.4s ease-in-out infinite;
}

/* 5. #12 HARMONIC FLOW (Delta Confluence Exit Multi-Strand Waves) */
.sig-harmonic-line-1,
.sig-harmonic-line-2,
.sig-harmonic-line-3 {
  opacity: 0.65;
}

.sig-pulse-harmonic-1 {
  stroke-dasharray: 40 320;
  stroke-dashoffset: 360;
  animation: sigHarmonicPhoton 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.8s;
}

.sig-pulse-harmonic-2 {
  stroke-dasharray: 35 320;
  stroke-dashoffset: 360;
  animation: sigHarmonicPhoton 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 2.05s;
}

.sig-pulse-harmonic-3 {
  stroke-dasharray: 35 320;
  stroke-dashoffset: 360;
  animation: sigHarmonicPhoton 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 2.3s;
}

@keyframes sigHarmonicPhoton {
  0% {
    stroke-dashoffset: 360;
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  60% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  75%, 100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

.sig-harmonic-terminal-1 {
  animation: terminalPulse 3.5s ease-in-out infinite;
}

.sig-harmonic-terminal-2 {
  animation: terminalPulseGold 4.0s ease-in-out infinite;
  animation-delay: 0.5s;
}

.sig-harmonic-terminal-3 {
  animation: sigTerminalPulseTurq 3.8s ease-in-out infinite;
  animation-delay: 1.0s;
}

/* 6. Constellation Dot Triads (`• • •` Triad Sparkles) */
.sig-constellation-dot {
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: constellationSparkle 3.6s ease-in-out infinite;
}

/* Staggered Triad Sparkle Timing */
.sig-dot-a1, .sig-dot-b1, .sig-dot-c1 {
  animation-delay: 0s;
}
.sig-dot-a2, .sig-dot-b2, .sig-dot-c2 {
  animation-delay: 0.35s;
}
.sig-dot-a3, .sig-dot-b3, .sig-dot-c3 {
  animation-delay: 0.7s;
}

/* Interactive Hover Dynamic on Centerpiece */
.stream-centerpiece.stream-centerpiece-pure:hover .sig-photon {
  animation-duration: 2.8s !important;
  filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 24px currentColor) !important;
}

.stream-centerpiece.stream-centerpiece-pure:hover .sig-terminal-node {
  transform: scale(1.25);
  filter: drop-shadow(0 0 14px currentColor) !important;
}

.stream-centerpiece.stream-centerpiece-pure:hover .sig-harmonic-line-1,
.stream-centerpiece.stream-centerpiece-pure:hover .sig-harmonic-line-2,
.stream-centerpiece.stream-centerpiece-pure:hover .sig-harmonic-line-3 {
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(78, 182, 174, 0.85)) !important;
}

/* ============================================================
   3.8 ELEVATED LIVING TICKER BAR SUITE (ABOVE-THE-FOLD ANCHOR)
   High-end glassmorphic dark teal bar with living river beam,
   staggered constellation stars, and infinite seamless loop
   ============================================================ */
.ticker {
  position: relative !important;
  width: 100% !important;
  background: linear-gradient(90deg, #032328 0%, #06474f 35%, #075059 50%, #06474f 65%, #032328 100%) !important;
  color: #e5f5f3 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding: 0 !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 4px 24px rgba(3, 35, 40, 0.3) !important;
  border-top: 1px solid rgba(76, 182, 174, 0.35) !important;
  border-bottom: 1px solid rgba(3, 35, 40, 0.4) !important;
  z-index: 20 !important;
}

/* Top Luminous Living River Beam */
.ticker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #4cb6ae 25%, #6ee7b7 50%, #caa47e 75%, transparent);
  background-size: 200% 100%;
  animation: riverBeamFlow 5.5s linear infinite;
  z-index: 4;
  pointer-events: none;
}

/* Edge Fade Masks for Seamless Continuous Streaming */
.ticker::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #032328 0%, rgba(3, 35, 40, 0) 6%, rgba(3, 35, 40, 0) 94%, #032328 100%);
  pointer-events: none;
  z-index: 3;
}

.ticker-track {
  display: flex !important;
  width: max-content !important;
  animation: tickerLoop 36s linear infinite !important;
  will-change: transform;
  align-items: center;
}

.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused !important;
}

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

.ticker-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 32px !important;
  padding: 0 16px !important;
  flex-shrink: 0 !important;
}

.ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(229, 245, 243, 0.92) !important;
  padding: 5px 12px !important;
  border-radius: 99px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: default !important;
}

.ticker-item:hover {
  background: rgba(76, 182, 174, 0.18) !important;
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(110, 231, 183, 0.6) !important;
  transform: translateY(-1px) !important;
}

.ticker-star {
  display: inline-block !important;
  font-style: normal !important;
  font-size: 11px !important;
  color: #6ee7b7 !important;
  text-shadow: 0 0 4px currentColor !important;
  animation: constellationSparkle 3s ease-in-out infinite !important;
  will-change: transform, opacity;
}

.ticker-star.star-mint { color: #6ee7b7 !important; animation-delay: 0.4s !important; }
.ticker-star.star-gold { color: #caa47e !important; animation-delay: 0.8s !important; }
.ticker-star.star-turq { color: #4cb6ae !important; animation-delay: 1.2s !important; }
.ticker-star.star-purple { color: #d5b0fd !important; animation-delay: 1.6s !important; }
.ticker-star.star-emerald { color: #10b981 !important; animation-delay: 2.0s !important; }

/* Responsive Scaling for Desktop, Laptop, Tablet, and Mobile */
@media (max-width: 1200px) {
  .hero {
    padding: 28px 0 20px !important;
  }
  .hero-grid {
    gap: 36px !important;
  }
  .hero h1 {
    font-size: clamp(34px, 4.2vw, 52px) !important;
  }
  .stream-art-modern {
    height: 380px !important;
  }
  .rawafid-hero-logo {
    width: 340px !important;
  }
}

@media (max-height: 800px) and (min-width: 901px) {
  .hero {
    padding: 18px 0 14px !important;
    min-height: calc(100vh - 72px - 48px) !important;
  }
  .hero h1 {
    font-size: clamp(34px, 3.8vw, 48px) !important;
    margin: 12px 0 16px !important;
  }
  .hero .intro {
    font-size: 15px !important;
    margin-bottom: 18px !important;
  }
  .stream-art-modern {
    height: 350px !important;
  }
  .rawafid-hero-logo {
    width: 310px !important;
  }
}

@media (max-width: 900px) {
  .hero {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 32px 0 36px !important;
    overflow: visible !important;
    display: block !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center !important;
  }
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero h1 {
    font-size: clamp(32px, 7.5vw, 44px) !important;
    max-width: 100% !important;
    margin: 12px 0 16px !important;
  }
  .hero .intro {
    font-size: 15px !important;
    max-width: 92% !important;
    margin-bottom: 20px !important;
  }
  .hero-actions {
    justify-content: center !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }
  .stream-art-modern {
    height: auto !important;
    min-height: 290px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 0 24px !important;
    margin: 0 auto !important;
  }
  .stream-centerpiece.stream-centerpiece-pure {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    animation: heroLogoLevitate 6s ease-in-out infinite !important;
  }
  .rawafid-hero-logo {
    width: min(280px, 82vw) !important;
    height: auto !important;
  }
  .ticker {
    height: 42px !important;
    margin-top: 0 !important;
  }
  .ticker-item {
    font-size: 11px !important;
    gap: 8px !important;
    letter-spacing: 0.12em !important;
    padding: 4px 10px !important;
  }
  .ticker-group {
    gap: 22px !important;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 24px 0 28px !important;
  }
  .hero h1 {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  .hero .intro {
    font-size: 14px !important;
  }
  .stream-art-modern {
    min-height: 250px !important;
    padding: 8px 0 20px !important;
  }
  .rawafid-hero-logo {
    width: min(240px, 80vw) !important;
  }
  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 270px !important;
    gap: 10px !important;
  }
  .hero-btn-primary, .hero-btn-alt {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 11px 22px !important;
  }
}

/* ============================================================
   4. SIGNATURE CONNECTOR BRIDGES BETWEEN SECTIONS
   ============================================================ */
.connector-bridge {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  margin: -36px auto;
  overflow: hidden;
}

.connector-svg {
  width: min(1200px, 94%);
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

.connector-path {
  fill: none;
  stroke-linecap: round;
  opacity: 0.8;
}

.connector-bridge-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 40 500;
  animation: streamPulseTravel 6s linear infinite;
  stroke: #6ee7b7;
  opacity: 0.95;
}

.connector-terminal {
  animation: terminalPulse 3.5s infinite ease-in-out;
  transform-origin: center;
}

/* ============================================================
   5. TRIBUTARY PHILOSOPHY FROSTED QUOTE CARD
   ============================================================ */
.philosophy-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(76, 182, 174, 0.28);
  border-radius: 26px;
  padding: 44px 48px;
  box-shadow: 0 18px 48px rgba(6, 71, 79, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.philosophy-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(6, 71, 79, 0.1), 0 0 30px rgba(76, 182, 174, 0.15);
}

.philosophy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #4cb6ae, #6ee7b7, #caa47e, transparent);
  background-size: 200% 100%;
  animation: riverBeamFlow 6s linear infinite;
}

.philosophy-card blockquote {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  border: none !important;
  font: 500 clamp(28px, 3.2vw, 40px) / 1.18 Fraunces, serif !important;
  color: #06474f !important;
}

.philosophy-card blockquote b {
  color: #4cb6ae !important;
  font-style: italic;
}

.philosophy-card .copy {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #4b5e61 !important;
  margin: 0 !important;
}

/* ============================================================
   6. WHAT WE DO (6 PILLARS) INTERACTIVE SIGNATURE CONNECTORS
   ============================================================ */
.modern-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.modern-pillar-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(6, 71, 79, 0.12);
  border-radius: 22px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  box-shadow: 0 8px 24px rgba(6, 71, 79, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  overflow: hidden;
}

.modern-pillar-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, #4cb6ae);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modern-pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(76, 182, 174, 0.45);
  box-shadow: 0 22px 48px rgba(6, 71, 79, 0.14), 0 0 20px rgba(76, 182, 174, 0.18);
}

.modern-pillar-card:hover::after {
  opacity: 1;
}

.pillar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.pillar-num-badge {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--card-accent, #4cb6ae);
  background: rgba(76, 182, 174, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.08em;
}

.pillar-wave-accent {
  display: flex;
  align-items: center;
  opacity: 0.75;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow: visible;
}

.pillar-wave-accent svg {
  overflow: visible;
}

.pillar-connector-path {
  stroke-dasharray: 80;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease;
}

.modern-pillar-card:hover .pillar-wave-accent {
  opacity: 1;
  transform: scale(1.15);
}

.modern-pillar-card:hover .pillar-connector-path {
  animation: strokeDrawFlow 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modern-pillar-card:hover .pillar-wave-accent circle {
  animation: terminalPulse 1.5s infinite ease-in-out;
}

.pillar-arrow-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(6, 71, 79, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #06474f;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.25s ease;
}

.modern-pillar-card:hover .pillar-arrow-btn {
  background: #06474f;
  color: #ffffff;
  transform: translate(2px, -2px);
}

.modern-pillar-card h3 {
  font-size: 27px;
  line-height: 1.1;
  margin: 0 0 10px 0;
  color: #06474f;
}

.modern-pillar-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #5d6f73;
  margin: 0;
}

/* ============================================================
   7. ATMOSPHERIC LIVING WAVE RIBBONS IN DARK BANDS
   ============================================================ */
.ambient-wave-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.ambient-wave-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.ambient-ribbon-1 {
  animation: ribbonAmbientDrift 14s ease-in-out infinite;
  opacity: 0.7;
}

.ambient-ribbon-2 {
  animation: ribbonAmbientDriftAlt 18s ease-in-out infinite;
  opacity: 0.6;
}

/* Elevated KPI Metric Cards (.impact-band) */
.impact-modern-band {
  background: radial-gradient(ellipse 90% 70% at 50% 0%, #0d434c 0%, #082d34 60%, #052126 100%) !important;
  color: #ffffff !important;
  padding: 96px 0 !important;
  position: relative;
  overflow: hidden;
}

.impact-modern-band .shell {
  position: relative;
  z-index: 2;
}

.impact-modern-band .section-heading h2,
.impact-modern-band .label {
  color: #ffffff !important;
}

.impact-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.impact-kpi-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(76, 182, 174, 0.25);
  border-radius: 20px;
  padding: 32px 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(2, 20, 24, 0.35);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.impact-kpi-card:hover {
  transform: translateY(-4px);
  border-color: #4cb6ae;
  box-shadow: 0 18px 40px rgba(2, 20, 24, 0.5), 0 0 24px rgba(76, 182, 174, 0.25);
}

.impact-kpi-num {
  display: block;
  font-family: Fraunces, serif;
  font-size: clamp(46px, 5vw, 64px);
  line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #a8bb8c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.impact-kpi-label {
  display: block;
  font-size: 14px;
  color: #b2d4cf;
  font-weight: 500;
  line-height: 1.45;
}

/* ============================================================
   8. RESPONSIVE LAYOUT FOR CARDS AND WAVES
   ============================================================ */
@media (max-width: 960px) {
  .modern-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 600px) {
  .modern-cards-grid {
    grid-template-columns: 1fr;
  }

  .impact-kpi-grid {
    grid-template-columns: 1fr;
  }

  .stream-art-modern {
    height: 320px;
  }

  .philosophy-card {
    padding: 30px 24px;
  }
}

/* ============================================================
   9. DEVELOPER SIGNATURE ATTRIBUTION (ENG. IBRAHIM TAREK)
   ============================================================ */
.footer-dev-attribution {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px dashed rgba(76, 182, 174, 0.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.dev-badge-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 6px 16px !important;
  background: rgba(6, 71, 79, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(78, 182, 174, 0.28) !important;
  border-radius: 99px !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #8daea9 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dev-badge-capsule:hover {
  background: rgba(6, 71, 79, 0.7) !important;
  border-color: rgba(110, 231, 183, 0.5) !important;
  box-shadow: 0 8px 26px rgba(6, 71, 79, 0.35), 0 0 20px rgba(78, 182, 174, 0.25) !important;
  transform: translateY(-1.5px) !important;
}

.dev-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16, 185, 129, 0.5) !important;
  animation: terminalPulse 3s infinite ease-in-out !important;
  flex-shrink: 0 !important;
}

.dev-label {
  color: #9abdb7 !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.01em !important;
}

.dev-name-link {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  letter-spacing: 0.015em !important;
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
}

.dev-name-link:hover {
  color: #6ee7b7 !important;
  text-shadow: 0 0 10px rgba(110, 231, 183, 0.75) !important;
}

.dev-pill-divider {
  color: rgba(78, 182, 174, 0.45) !important;
  font-size: 11px !important;
  user-select: none !important;
}

.dev-portfolio-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 11px !important;
  background: linear-gradient(135deg, rgba(78, 182, 174, 0.2), rgba(110, 231, 183, 0.15)) !important;
  border: 1px solid rgba(78, 182, 174, 0.4) !important;
  border-radius: 99px !important;
  color: #6ee7b7 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dev-portfolio-link svg {
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dev-portfolio-link:hover {
  background: linear-gradient(135deg, #4cb6ae, #10b981) !important;
  border-color: #6ee7b7 !important;
  color: #042f2e !important;
  box-shadow: 0 2px 12px rgba(110, 231, 183, 0.55) !important;
  transform: translateY(-1px) !important;
}

.dev-portfolio-link:hover svg {
  transform: translate(1.5px, -1.5px) !important;
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}