body {
  background-color: #0c0510;
  color: #F3F4F6;
  font-family: 'Plus Jakarta Sans', 'Hind Siliguri', sans-serif;
  overflow-x: hidden;
}

.ambient-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
}

.lux-card {
  background: linear-gradient(135deg, rgba(74, 18, 42, 0.55) 0%, rgba(32, 11, 28, 0.75) 50%, rgba(20, 7, 21, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  border-radius: 2.2rem;
  position: relative;
  overflow: hidden;
}

.lux-card-gradient-top {
  background: linear-gradient(120deg, #c41e3a 0%, #700f2b 35%, #240b20 75%, #140616 100%);
  border: 1px solid rgba(255, 77, 109, 0.18);
}

.phone-mockup-frame {
  border: 9px solid #231b27;
  border-radius: 46px;
  box-shadow: 0 30px 70px -15px rgba(0,0,0,0.95), 0 0 30px rgba(255, 42, 84, 0.22);
  background-color: #0d0711;
  position: relative;
}

.phone-notch-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 18px;
  background-color: #000000;
  border-radius: 9999px;
  z-index: 30;
}

.soon-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 6px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  background-color: #FFFFFF;
  color: #190A1A;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
}

.soon-tip i {
  color: #D32F2F;
}

.soon-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #FFFFFF;
}

.soon-tip-trigger.is-open .soon-tip,
.soon-tip-trigger:focus-visible .soon-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) {
  .soon-tip-trigger:hover .soon-tip {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lang-switch button {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #D1D5DB;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch button[aria-pressed="true"] {
  background-color: #FF2A54;
  color: #FFFFFF;
}

/* Bangla script needs more line height and no negative tracking */
html[lang="bn"] h1,
html[lang="bn"] h2 {
  line-height: 1.3;
}

html[lang="bn"] .tracking-tight,
html[lang="bn"] .tracking-wide,
html[lang="bn"] .tracking-wider {
  letter-spacing: 0;
}

/* FAQ accordion */
.faq-item {
  background-color: #180A1B;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.25rem;
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: rgba(255, 42, 84, 0.4);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #FFFFFF;
}

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

.faq-icon {
  color: #FF2A54;
  font-size: 14px;
  transition: transform 0.2s ease;
}

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

.faq-item p {
  padding: 0 22px 18px;
  color: #D1D5DB;
  font-size: 14px;
  line-height: 1.7;
}

.faq-item p strong {
  color: #FFFFFF;
}

.faq-item p a {
  color: #FF4D6D;
  text-decoration: underline;
}

/* Floating WhatsApp button */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background-color: #25D366;
  color: #FFFFFF;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease;
}

.wa-float:hover {
  transform: scale(1.08);
}

/* Support form feedback */
.form-field[aria-invalid="true"] {
  border-color: #FF4D6D;
}

.field-error {
  margin-top: 6px;
  font-size: 12px;
  color: #FF8FA3;
}

.form-status {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.form-status.is-success {
  background-color: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #BBF7D0;
}

.form-status.is-error {
  background-color: rgba(255, 77, 109, 0.12);
  border: 1px solid rgba(255, 77, 109, 0.4);
  color: #FFD1DA;
}

/* Animations (all switched off for visitors who prefer reduced motion) */

/* Sections fade up as they scroll in. js/main.js adds .reveal-on to <html>,
   so without JavaScript everything simply stays visible. */
.reveal-on [data-reveal]:not(.is-visible) {
  opacity: 0;
}

.reveal-on [data-reveal].is-visible {
  animation: reveal-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms) backwards;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero phone floats gently */
.float-y {
  animation: float-y 6s ease-in-out infinite;
}

@keyframes float-y {
  50% {
    transform: translateY(-12px);
  }
}

/* FAQ icon resets as soon as an answer starts closing (js/main.js) */
.faq-item.is-closing .faq-icon {
  transform: none;
}

/* WhatsApp button sends out two rings a few seconds after the page loads */
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: wa-ring 1.6s ease-out 4s 2;
}

@keyframes wa-ring {
  from {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  to {
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

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