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

:root {
  --purple-deep:  #372580;
  --purple-main:  #5C3BE7;
  --purple-light: #8B68FF;
  --teal:         #29F2BB;
  --teal-dark:    #1DC99A;
  --white:        #FFFFFF;
  --off-white:    #F2F2F5;
  --text-dark:    #111122;
  --text-mid:     #3b3b6e;
  --text-soft:    #6b6b9a;
  --border-light: #e4e4f0;
  --grad-main:    linear-gradient(130deg, #5C3BE7 0%, #29F2BB 100%);
  --grad-purple:  linear-gradient(135deg, #372580 0%, #5C3BE7 100%);
  --grad-teal:    linear-gradient(130deg, #29F2BB 0%, #1DC99A 100%);
  --nav-h:        78px;
}

body {
  font-family: 'Poppins', 'Roboto', sans-serif;
  background: var(--white);
  overflow-x: hidden;
  color: var(--text-dark);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: var(--grad-main); border-radius: 4px; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* NAVBAR */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: #F2F2F5;
  box-shadow: 0 2px 14px rgba(0,0,0,0.09);
  transition: box-shadow 0.3s, background 0.3s;
}
.navbar.scrolled { box-shadow: 0 4px 28px rgba(55,37,128,0.14); background: #fff; }
.navbar .container {
  display: flex; align-items: center;
  justify-content: space-between; height: var(--nav-h);
}

.logo-wrap {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; flex-shrink: 0;
}
.logo-svg { width: 44px; height: 44px; flex-shrink: 0; }
.logo-label {
  font-family: 'Poppins', sans-serif; font-size: 1.46rem;
  font-weight: 800; line-height: 1; display: flex; align-items: baseline;
}
.logo-gulf   { color: #5C3BE7; font-style: italic; letter-spacing: -0.4px; }
.logo-4k     { color: #29F2BB; font-style: normal; letter-spacing: -0.3px; }
.logo-stream { color: #111122; font-style: normal; letter-spacing: -0.4px; }

.nav-links {
  display: flex; align-items: center; list-style: none; gap: 0; height: 100%;
}
.nav-links li { height: 100%; display: flex; align-items: center; }
.nav-links li a {
  display: flex; align-items: center; height: 100%; padding: 0 18px;
  color: #1a1a3a; text-decoration: none; font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.55px; text-transform: uppercase; font-family: 'Poppins', sans-serif;
  position: relative; transition: color 0.2s; white-space: nowrap;
}
.nav-links li a:hover { color: #5C3BE7; }
.nav-links li a.active::after {
  content: ''; position: absolute; bottom: 0; left: 18px; right: 18px;
  height: 3px; background: var(--grad-main); border-radius: 3px 3px 0 0;
}

.subscribe-btn {
  background: var(--grad-main); color: #fff !important;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.84rem;
  letter-spacing: 0.7px; text-transform: uppercase; padding: 13px 26px;
  border-radius: 50px; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(92,59,231,0.35);
  transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
  display: inline-flex; align-items: center; margin-left: 8px;
}
.subscribe-btn::after { display: none !important; }
.subscribe-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 32px rgba(92,59,231,0.50); color: #fff !important;
}

/* Language Switcher */
.lang-switcher {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(92,59,231,0.08);
  border: 1.5px solid rgba(92,59,231,0.25);
  border-radius: 50px; padding: 8px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: #5C3BE7 !important;
  text-decoration: none; white-space: nowrap;
  transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
  margin-left: 6px;
}
.lang-switcher::after { display: none !important; }
.lang-switcher:hover {
  background: #5C3BE7; color: #fff !important;
  border-color: #5C3BE7; transform: translateY(-2px);
}
.lang-icon { font-size: 0.95rem; }
.lang-txt  { font-size: 0.85rem; font-weight: 800; }
@media (max-width: 768px) {
  .lang-switcher { margin-left: 0; margin-top: 10px; width: 100%; justify-content: center; }
}

.menu-icon {
  display: none; font-size: 26px; color: #1a1a3a; cursor: pointer; padding: 8px;
}

@media (max-width: 1060px) {
  .nav-links li a { padding: 0 13px; font-size: 0.80rem; }
  .subscribe-btn  { padding: 11px 18px; font-size: 0.80rem; }
}
@media (max-width: 768px) {
  .nav-links {
    position: fixed; top: var(--nav-h); left: -100%; background: #fff;
    width: 80%; height: 100vh; flex-direction: column; align-items: flex-start;
    padding: 28px 20px; transition: left 0.3s; gap: 0;
    box-shadow: 4px 0 28px rgba(0,0,0,0.12); border-right: 1px solid #eee;
    z-index: 999; overflow-y: auto;
  }
  .nav-links.active { left: 0; }
  .nav-links li { width: 100%; height: auto; }
  .nav-links li a {
    height: auto; padding: 14px 8px; font-size: 0.92rem;
    border-bottom: 1px solid #f0f0f8; width: 100%;
  }
  .nav-links li a.active::after { display: none; }
  .subscribe-btn { margin-left: 0; margin-top: 16px; width: 100%; justify-content: center; }
  .menu-icon { display: flex; align-items: center; }
  .container { padding: 0 20px; }
}

/* Global section label style (used site-wide) */
.section-eyebrow {
  font-size: 0.88rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #5C3BE7; text-align: center;
  margin-bottom: 10px; display: block;
}
.section-h2 {
  font-family: 'Poppins', sans-serif; font-size: 2.2rem; font-weight: 800;
  color: var(--purple-deep); text-align: center; line-height: 1.25;
  letter-spacing: -0.3px;
}
.section-h2 span {
  background: var(--grad-main); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* Wave separator (reusable) */
.wave-sep { line-height: 0; overflow: hidden; }
.wave-sep svg { display: block; width: 100%; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; animation: fadeUp 0.85s ease forwards; }
.d1{animation-delay:.05s;} .d2{animation-delay:.18s;}
.d3{animation-delay:.32s;} .d4{animation-delay:.46s;}
.d5{animation-delay:.60s;} .d6{animation-delay:.74s;}