*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg-primary: #060B14;
  --bg-surface: #1E293B;
  --bg-alt: #0A1020;
  --bg-nav: rgba(6, 11, 20, 0.85);
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-muted-alt: #64748B;
  --accent: #C45200;
  --accent-hover: #d65a0a;
  --accent-light: #E88D4D;
  --accent-bg: rgba(196,82,0,0.12);
  --green: #10B981;
  --wa: #25D366;
  --border-subtle: rgba(255,255,255,0.06);
  --border-light: rgba(255,255,255,0.15);
  --hamburger: #F1F5F9;
}
[data-theme="light"] {
  --bg-primary: #F3F4F6;
  --bg-surface: #F9FAFB;
  --bg-alt: #E5E7EB;
  --bg-nav: rgba(243, 244, 246, 0.85);
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-muted-alt: #94A3B8;
  --border-subtle: rgba(0,0,0,0.06);
  --border-light: rgba(0,0,0,0.15);
  --hamburger: #0F172A;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--text-secondary);
  background: var(--bg-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: 'Poppins', sans-serif; }

.wrapper { position: relative; }
.navbar { z-index: 50; }
.wa-float { z-index: 10000; }

.globe-wrap {
  width: 280px;
  height: 280px;
  position: relative;
  animation: globeFloat 5s ease-in-out infinite alternate;
}
@media (max-width: 640px) {
  .globe-wrap { width: 200px; height: 200px; }
}
@keyframes globeFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

.globe-atmosphere {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.12) 0%, transparent 70%);
  filter: blur(8px);
  animation: atmPulse 4s ease-in-out infinite alternate;
}
@keyframes atmPulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

.globe {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 35% 35%, #4FC3F7, #1565C0 45%, #0D47A1 75%, #0A3D6B 100%);
  box-shadow:
    0 0 60px rgba(79, 195, 247, 0.2),
    0 0 120px rgba(79, 195, 247, 0.08),
    inset -25px -15px 50px rgba(0,0,0,0.5),
    inset 10px 10px 30px rgba(255,255,255,0.05);
  overflow: hidden;
}

.globe-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 50%;
}

.globe-pulse {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,82,0,0.35) 0%, rgba(196,82,0,0.08) 40%, transparent 65%);
  animation: indoPulse 3s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}
@keyframes indoPulse {
  0% { transform: translate(-50%, -50%) scale(0.75); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

.globe-ring-indo {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(196,82,0,0.15);
  animation: indoRing 4s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}
.globe-ring-indo + .globe-ring-indo {
  width: 70px;
  height: 70px;
  border-color: rgba(196,82,0,0.08);
  animation-duration: 5s;
  animation-delay: 0.5s;
}
@keyframes indoRing {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

.globe-grid {
  display: none;
  position: absolute;
  inset: -80%;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 14px,
      rgba(255,255,255,0.06) 14px,
      rgba(255,255,255,0.06) 15px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 14px,
      rgba(255,255,255,0.06) 14px,
      rgba(255,255,255,0.06) 15px
    );
  animation: globeSpin 25s linear infinite;
  transform-origin: center;
}
@keyframes globeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.globe-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.18) 0%, transparent 35%);
}

.globe-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 70% 80%, rgba(0,0,0,0.35) 0%, transparent 40%);
}

.globe-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.06);
  animation: globeSpin 20s linear infinite reverse;
}
.globe-ring:nth-child(2) {
  inset: -20px;
  border-color: rgba(255,255,255,0.03);
  border-style: dashed;
  animation-duration: 30s;
}

.globe-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.4);
  animation: dotTwinkle 3s ease-in-out infinite alternate;
}
.globe-dot:nth-child(1) { top: -12%; left: 10%; animation-delay: 0s; }
.globe-dot:nth-child(2) { top: 5%; right: -8%; animation-delay: 0.5s; }
.globe-dot:nth-child(3) { bottom: 15%; left: -10%; animation-delay: 1s; }
.globe-dot:nth-child(4) { bottom: -5%; right: 15%; animation-delay: 1.5s; }
.globe-dot:nth-child(5) { top: -18%; right: 25%; animation-delay: 2s; width: 2px; height: 2px; }
@keyframes dotTwinkle {
  0% { opacity: 0.2; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.3); }
}

.star-layer::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    120px 80px rgba(255,255,255,0.6),
    340px 160px rgba(255,255,255,0.3),
    560px 50px rgba(255,255,255,0.5),
    780px 220px rgba(255,255,255,0.2),
    200px 350px rgba(255,255,255,0.4),
    500px 400px rgba(255,255,255,0.3),
    700px 120px rgba(255,255,255,0.6),
    900px 280px rgba(255,255,255,0.2),
    150px 500px rgba(255,255,255,0.5),
    400px 550px rgba(255,255,255,0.3),
    650px 480px rgba(255,255,255,0.4),
    850px 520px rgba(255,255,255,0.2),
    100px 650px rgba(255,255,255,0.3),
    300px 700px rgba(255,255,255,0.5),
    550px 680px rgba(255,255,255,0.2),
    750px 750px rgba(255,255,255,0.4),
    950px 620px rgba(255,255,255,0.3),
    180px 820px rgba(255,255,255,0.5),
    450px 880px rgba(255,255,255,0.2),
    680px 900px rgba(255,255,255,0.4),
    880px 850px rgba(255,255,255,0.3),
    250px 950px rgba(255,255,255,0.2);
  animation: twinkle 4s ease-in-out infinite alternate;
}
.star-layer:nth-child(2)::before {
  width: 1px;
  height: 1px;
  box-shadow:
    80px 40px rgba(255,255,255,0.4),
    280px 190px rgba(255,255,255,0.2),
    480px 90px rgba(255,255,255,0.3),
    680px 300px rgba(255,255,255,0.5),
    880px 150px rgba(255,255,255,0.2),
    130px 420px rgba(255,255,255,0.3),
    380px 320px rgba(255,255,255,0.4),
    580px 560px rgba(255,255,255,0.2),
    780px 420px rgba(255,255,255,0.5),
    980px 380px rgba(255,255,255,0.3),
    50px 780px rgba(255,255,255,0.4),
    350px 610px rgba(255,255,255,0.2),
    620px 800px rgba(255,255,255,0.3),
    820px 700px rgba(255,255,255,0.5),
    150px 920px rgba(255,255,255,0.2);
  animation: twinkle 5s ease-in-out infinite alternate;
  animation-delay: 1s;
}
.star-layer:nth-child(3)::before {
  width: 1.5px;
  height: 1.5px;
  box-shadow:
    220px 120px rgba(255,255,255,0.3),
    420px 250px rgba(255,255,255,0.5),
    620px 80px rgba(255,255,255,0.2),
    820px 350px rgba(255,255,255,0.4),
    180px 280px rgba(255,255,255,0.3),
    480px 460px rgba(255,255,255,0.5),
    720px 340px rgba(255,255,255,0.2),
    920px 500px rgba(255,255,255,0.4),
    280px 580px rgba(255,255,255,0.3),
    520px 740px rgba(255,255,255,0.5),
    760px 610px rgba(255,255,255,0.2),
    960px 780px rgba(255,255,255,0.4),
    320px 840px rgba(255,255,255,0.3),
    600px 960px rgba(255,255,255,0.5),
    860px 920px rgba(255,255,255,0.2);
  animation: twinkle 3.5s ease-in-out infinite alternate;
  animation-delay: 2s;
}
@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.star-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.navbar {
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: box-shadow 0.3s;
  border-bottom: 1px solid var(--border-subtle);
}
.navbar.scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #C45200;
  color: #fff;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  border-radius: 10px;
  padding: 0.75rem 1.75rem;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  cursor: pointer;
  text-decoration: none;
  border: none;
}
.btn-primary:hover {
  background: #d65a0a;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(196, 82, 0, 0.35);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  border-radius: 10px;
  padding: 0.75rem 1.75rem;
  transition: border-color 0.25s, background 0.25s;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
}
.btn-secondary:hover {
  border-color: #C45200;
  background: rgba(196, 82, 0, 0.1);
}

.card {
  background: var(--bg-surface);
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  border-color: rgba(196, 82, 0, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(196, 82, 0, 0.15), 0 0 60px rgba(196, 82, 0, 0.05);
}

.trust-badge {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-subtle);
}

.problem-card {
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 1.5rem;
  border: 1px solid var(--border-subtle);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.problem-card:hover {
  border-color: rgba(196, 82, 0, 0.35);
  box-shadow: 0 8px 30px rgba(196, 82, 0, 0.1), 0 0 40px rgba(196, 82, 0, 0.03);
}

.why-card {
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 1.5rem;
  border: 1px solid var(--border-subtle);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.why-card:hover {
  border-color: rgba(196, 82, 0, 0.35);
  box-shadow: 0 8px 30px rgba(196, 82, 0, 0.1), 0 0 40px rgba(196, 82, 0, 0.03);
}

.invest-card {
  background: var(--bg-surface);
  border-radius: 20px;
  border: 1px solid rgba(196, 82, 0, 0.2);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.invest-card:hover {
  border-color: rgba(196, 82, 0, 0.5);
  box-shadow: 0 12px 48px rgba(196, 82, 0, 0.15), 0 0 60px rgba(196, 82, 0, 0.05);
}

.faq-question {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-question .icon { transition: transform 0.3s; }
.faq-question.open .icon { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer.open { max-height: 300px; }

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-nav.open { max-height: 400px; }

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--hamburger);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger span + span { margin-top: 5px; }
.hamburger span + span + span { margin-top: 5px; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  background: #25D366;
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

.section-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
}
.text-body { color: var(--text-secondary); }
.text-muted { color: var(--text-muted-alt); }

.touch-target { min-height: 44px; min-width: 44px; }



.section-alt {
  background: var(--bg-alt);
}

[data-theme="light"] .star-layer {
  display: none !important;
}

#langToggle:hover, #langToggleMobile:hover {
  background: rgba(196,82,0,0.22) !important;
  border-color: rgba(196,82,0,0.6) !important;
}

@media (min-width: 768px) {
  .mobile-nav { max-height: none !important; overflow: visible; }
}

@media (max-width: 640px) {
  .globe-wrap { width: 200px; height: 200px; }
}

.nav-link {
  color: var(--text-muted);
  transition: color 0.2s;
  text-decoration: none;
}
.nav-link:hover {
  color: var(--text-primary);
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.toggle-track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  position: relative;
  transition: background 0.3s;
}
[data-theme="light"] .toggle-track {
  background: rgba(196,82,0,0.25);
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #C45200;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="light"] .toggle-thumb {
  transform: translateX(20px);
}

.hero-clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: none;
}
[data-theme="light"] .hero-clouds {
  display: block;
}
.hero-clouds::before,
.hero-clouds::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
}
.hero-clouds::before {
  width: 150px;
  height: 100px;
  top: -3%;
  left: -10%;
  background: rgba(210,215,225,0.6);
  box-shadow:
    50px -20px 0 -5px rgba(210,215,225,0.6),
    100px -8px 0 -12px rgba(210,215,225,0.55),
    140px 8px 0 -20px rgba(210,215,225,0.5),
    40px 15px 0 10px rgba(210,215,225,0.45),
    90px 22px 0 4px rgba(210,215,225,0.4);
  animation: cloudDriftRight 10s ease-in-out infinite alternate;
}
.hero-clouds::after {
  width: 130px;
  height: 85px;
  top: 60%;
  right: -8%;
  background: rgba(200,205,215,0.55);
  box-shadow:
    -45px -18px 0 -5px rgba(200,205,215,0.55),
    -85px -5px 0 -12px rgba(200,205,215,0.5),
    -120px 8px 0 -18px rgba(200,205,215,0.45),
    -35px 15px 0 10px rgba(200,205,215,0.4),
    -80px 22px 0 4px rgba(200,205,215,0.35);
  animation: cloudDriftLeft 12s ease-in-out infinite alternate;
}
@keyframes cloudDriftRight {
  0% { transform: translate(0, 0); }
  33% { transform: translate(50px, -10px); }
  66% { transform: translate(100px, 6px); }
  100% { transform: translate(160px, -6px); }
}
@keyframes cloudDriftLeft {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-50px, -10px); }
  66% { transform: translate(-100px, 6px); }
  100% { transform: translate(-160px, -6px); }
}