/* ============================================
   CSS VARIABLES & RESET
   ============================================ */
:root {
  --serif: 'Cormorant Garamond', serif;
  --sans: 'DM Sans', sans-serif;
  --default_font: 'Poppins', sans-serif;
  --s1-dark: #1a1a2e;
  --s1-indigo: #16213e;
  --s1-fog: rgba(226,226,226,0.1);
  --s2-navy: #0a0a23;
  --s2-purple: #2d1b69;
  --s3-amber: #f4a261;
  --s3-gold: #e9c46a;
  --s3-teal: #264653;
  --s4-blush: #fad2e1;
  --s4-cream: #fef9ef;
  --s4-sage: #b7e4c7;
  --s4-gold: #ffd166;
  --proof-bg: #faf8f5;
  --faq-bg: #ffffff;
  --white: #ffffff;
  --muted: #a0a0a0;
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.12);
}

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

html, body {
	
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--default_font);
  background: #8a5d24;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

.s3_image{
	background:url('./images/faqs/s3.webp') 50% 50% / cover no-repeat;
}

.s4_image{
	background:url('./images/faqs/s4.webp') 50% 50% / cover no-repeat;
}

/* ============================================
   NAVIGATION
   ============================================ */
   
   .nav-link>li>a.active {
 background: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
 backdrop-filter: blur(8px); /* The blur effect */
 border: 1px solid rgba(255, 255, 255, 0.2);
 color: #ffffff;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


nav.desktop-nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 5000;
  display: flex; justify-content: center;  align-items: center;
  padding: 20px 50px;
 /* background: rgba(0,0,0,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);*/
  transition: background 0.6s ease;
   overflow-x: auto;
   white-space: nowrap;
   background:rgba(0,0,0,0.2);
}

nav.desktop-nav .logo {
  font-family: var(--serif);
  font-size: 26px; font-weight: 600;
  letter-spacing: 2px;
  color: var(--white);
}

nav.desktop-nav .logo span {
  font-weight: 300; font-size: 14px;
  display: block; letter-spacing: 4px;
  text-transform: uppercase; opacity: 0.7;
}

nav.desktop-nav .nav-links {
  display: flex; gap: 36px; list-style: none;
}

nav.desktop-nav .nav-links a {
  color: rgba(255,255,255,1);
  text-decoration: none;
  font-size: clamp(9px, 2.5vw, 15px); 
  white-space: nowrap; 
  flex-shrink: 0;
  font-weight: 400;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: color 0.3s ease;
  cursor: pointer;
}

nav.desktop-nav .nav-links a.active {
	background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid #b48e3b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    border-radius: 15px;
}


.hamburger {
  width: 28px; height: 20px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger span {
  width: 100%; height: 2px;
  background: var(--white);
  transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.mobile-menu {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 32px; z-index: 4999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-menu.open {
  opacity: 1; pointer-events: auto;
}

.mobile-menu a {
  color: var(--white); text-decoration: none;
  font-family: var(--serif);
  font-size: 28px; font-weight: 300;
  letter-spacing: 3px;
  opacity: 0.8; transition: opacity 0.3s;
  cursor: pointer;
}

.mobile-menu a:hover { opacity: 1; }

/* ============================================
   SLIDE SYSTEM — THE CORE ARCHITECTURE
   ============================================ */
.slide-container {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.slide {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  text-align: center;
  opacity: 0;
  transform: scale(1.05);
  /*transition: opacity 1s ease, transform 1.5s ease-out;*/
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1);;
  overflow: hidden;
  z-index: 0;
}

.slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* BACKGROUND — FOCUS PULL EFFECT */
.slide .bg {
  position: absolute; inset: 0;
  background-size: cover;      /* Ensures image covers the whole area */
  background-position: center; /* Keeps the focus in the middle */
  background-repeat: no-repeat; /* Prevents tiling/repetition */
  filter: blur(8px) brightness(0.7);
  transform: scale(1.05);
  transition: filter 1.2s ease-out, transform 1.2s ease-out;
  transform-origin: center;
  will-change: transform, filter;
}

.slide.active .bg {
  filter: blur(0) brightness(0.85);
  transform: scale(1);
  
}

.slide .overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
}

/* CONTENT LAYER */
.slide .content {
  position: relative; z-index: 2;
  max-width: 800px;
  padding: 0 24px;
}


/* Letter by Letter typing */

/* typing letters */
.letter {
  opacity: 0.4;
  filter: blur(5px);
  transition: all 0.3s ease;
}

/* when word completes */
.word-complete .letter {
  opacity: 1;
  filter: blur(0);
}

.word-complete {
  text-shadow: 0 0 8px rgba(255,255,255,0.2);
}
/* smooth word fade in */
.word {
   display: inline-block;
  opacity: 1; /* 🔥 FIX: allow letters to be visible */
  transform: none;
}

.word.show {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   WORD-BY-WORD TEXT REVEAL
   ============================================ */


.typing-cursor::after {
  content: '|';
  margin-left: 6px;
  animation: blink 1s infinite;
}

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

.fade-word {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
  animation: fadeWord 1s ease-out forwards;
}

@keyframes fadeWord {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


.main-text {
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 20px;
}

.sub-text {
 
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  margin: 0 auto;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

/* 🔥 trigger */
.sub-text.show {
  opacity: 1;
  transform: translateY(0);
}
/* ============================================
   GLASSMORPHISM INTERACTION CARD (CTA)
   ============================================ */
.question-card {
  position: absolute;
  bottom: 80px; right: 60px;
  min-width: 320px; max-width: 350px;
  text-align: left;
  padding: 10px 10px;
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none; 
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* SHOW CARD */
.question-card.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
   transition: opacity 0.6s ease, transform 0.6s ease;
  
}

/* q-text */
.question-card .q-text {
  opacity: 0;
  transform: translateY(20px);
}

/* cta */
.question-card .cta-text {
  opacity: 0;
  transform: translateY(10px);
}

/* arrow */
.question-card .arrow {
  opacity: 0;
  transform: translateX(-6px);
  display: inline-block;
}

.question-card .cta-text,
.question-card .arrow {
  animation-play-state: paused;
}


/* animations */
.question-card.show .q-text {
  animation: qTextIn 0.6s ease forwards;
  float: left;
  text-align: left;
  font-style: italic;
  
}

.question-card.show .cta-text {
  animation: ctaIn 0.6s ease forwards;
  animation-delay: 1.5s;
  font-size: 14px;
 /* color: #cfcfcf;
 line-height: 45px;*/
 color:#05183B;
  float: right;
  
  background: rgba(255, 255, 255, .4);
    padding: 10px;
    border-radius: 15px;
    margin-top: 15px;
}

.question-card.show .arrow {
  animation: arrowIn 0.5s ease forwards;
  animation-delay: 0.6s;
}

/* keyframes */
@keyframes qTextIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ctaIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes arrowIn {
  to { opacity: 1; transform: translateX(0); }
}


.video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
/*  filter: blur(8px) brightness(0.7);*/
 will-change: transform;
 transform: translateZ(0);
  backface-visibility: hidden;
 animation: cinematicMove 25s ease-in-out infinite alternate;
  transition: filter 1.6s ease-out;
}

/* Active state (focus effect stays) */
.slide.active .video-bg video {
  filter: blur(0) brightness(0.85);
}


@keyframes cinematicMove {
  0% {
    transform: scale(1.1) translate(0px, 0px);
  }
  50% {
    transform: scale(1.15) translate(-10px, -6px);
  }
  100% {
    transform: scale(1.2) translate(10px, 6px);
  }
}


.video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.5));
}

.slide .bg,
.slide .content {
  will-change: transform, opacity;
}


/* ============================================
   SECTION 1 — FOG / LOST (CSS ANIMATED BG)
   ============================================ */
#slide1 .bg {
 /* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);*/
 /* background:url('./images/backgrounds/screen1.png');*/
  background-size: cover; 
}

/* Fog layers */
.fog-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}

.fog-layer::before,
.fog-layer::after {
  content: '';
  position: absolute;
  width: 200%; height: 200%;
  top: -50%; left: -50%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.06) 0%,
    transparent 60%
  );
  animation: fogDrift 18s ease-in-out infinite;
}

.fog-layer::after {
  animation: fogDrift 24s ease-in-out infinite reverse;
  opacity: 0.5;
}

@keyframes fogDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(5%, -3%) scale(1.05); }
  50% { transform: translate(-3%, 5%) scale(0.95); }
  75% { transform: translate(-5%, -2%) scale(1.02); }
}

/* Floating mist particles */
.mist-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
  animation: mistFloat linear infinite;
  pointer-events: none;
}

@keyframes mistFloat {
  0% { transform: translateX(-100px) translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100px)) translateY(-50px); opacity: 0; }
}

/* ============================================
   SECTION 2 — STARS / NIGHT SKY
   ============================================ */
#slide2 .bg {
  background: linear-gradient(180deg, #0a0a23 0%, #1a1a4e 60%, #2d1b69 100%);
   background:url('./images/backgrounds/screen2_1.png');
   background-size: cover; 
}

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

/* ✨ STAR */
.star {
  position: absolute;
  font-size: 14px;
  color: #FFF; /* gold */

  opacity: 0;
  transform: scale(0.5);

  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));

  animation: starTingle 1.6s ease forwards;
}

/* ✨ ANIMATION */
@keyframes starTingle {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.2) rotate(20deg);
  }
  60% {
    opacity: 0.9;
    transform: scale(1) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }
}

/* ============================================
   SECTION 3 — TUNNEL / LIGHT
   ============================================ */
#slide3 .bg {
  background: linear-gradient(180deg, #1a1a1a 0%, #264653 50%, #2a4a3e 100%);
   background:url('./images/backgrounds/screen3_1.webp');
   background-size: cover; 
}

.tunnel-light {
  position: absolute; inset: 0;
  pointer-events: none;
  display: flex; justify-content: center; align-items: center;
}

.tunnel-light::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(244,162,97,0.5) 0%,
    rgba(233,196,106,0.3) 30%,
    rgba(233,196,106,0.1) 50%,
    transparent 70%
  );
  animation: lightPulse 4s ease-in-out infinite;
}

.tunnel-light::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(244,162,97,0.15) 0%,
    rgba(233,196,106,0.08) 40%,
    transparent 70%
  );
  animation: lightPulse 6s ease-in-out infinite 1s;
}

@keyframes lightPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* Vignette */
.vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 200px 80px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* Light rays */
.light-ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 40vh;
  background: linear-gradient(to top, transparent, rgba(244,162,97,0.15));
  transform-origin: bottom center;
  animation: rayPulse 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rayPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ============================================
   SECTION 4 — BLOSSOMS / RENEWAL
   ============================================ */
#slide4 .bg {
  background: linear-gradient(135deg, #fef9ef 0%, #fad2e1 40%, #b7e4c7 80%, #ffd166 100%);
   background:url('./images/backgrounds/screen4_1.webp');
   background-size: cover; 
}

#slide4 .overlay {
  background: rgba(0,0,0,0.15);
}

/* Falling petals */
.petal {
  position: absolute;
  pointer-events: none;
}

.petal svg {
  width: 100%; height: 100%;
}

@keyframes petalFall {
  0% { transform: translateY(-10vh) rotate(0deg) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateY(110vh) rotate(360deg) translateX(80px); opacity: 0; }
}

/* ============================================
   SECTION 5 — FORM (THE RESET)
   ============================================ */
#slide5 .bg {
  background: linear-gradient(135deg, #fef9ef 0%, #b7e4c7 50%, #e8dcc8 100%);
   background:url('./images/backgrounds/screen5.png');
   background-size: cover; 
}

#slide5 .overlay {
  background: rgba(0,0,0,0.2);
}

.form-container {
  display: flex; flex-direction: column;
  gap: 14px;
  width: 90%; max-width: 420px;
  margin: 24px auto 0;
}

.form-container input,
.form-container select {
  padding: 14px 18px;
  border: none;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 15px;
  background: rgba(255,255,255,0.9);
  color: #333;
  outline: none;
  transition: box-shadow 0.3s ease;
}

.form-container input:focus,
.form-container select:focus {
  box-shadow: 0 0 0 2px rgba(180,142,59,0.5);
}

.form-container input::placeholder {
  color: #999;
}

.form-container button {
  padding: 16px;
  border: none;
  border-radius: 8px;
  
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
 background: #05183bcc;
   color: #fff;
   border:1px solid #b48e3b;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.form-container button:hover {
  
  transform: translateY(-1px);
  background: #05183B; /* Brand Blue background on hover */
	 color: #B48E3B; /* Brand Gold text on hover */
	 border: 1px solid 
}

#formSuccess {
  display: none;
  color: #b7e4c7;
  font-family: var(--sans);
  font-size: 16px;
  text-align: center;
  margin-top: 16px;
}

/* ============================================
   SECTION 6 — TESTIMONIALS (UNFILTERED)
   ============================================ */
#slide6 {
    position: absolute;
    inset: 0;
    overflow-y: auto;
	background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(./images/backgrounds/screen6.png) center / cover no-repeat;
	display:block;
  
}

#slide6 .bg {
  position: fixed; /* 🔥 key fix */
  inset: 0;
  z-index: 0;
  
}

#slide6 .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}
#slide6 .proof-section {
position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  /* max-width: 1100px; */
  margin: 0 auto;
  padding: 100px 24px 120px; /* top + bottom breathing */

  min-height: auto; /* ❌ remove forced 100vh */
}



.proof-section {
   margin-top: 80px; /* reduce from 180 */
  padding-bottom: 80px; /* add breathing room for footer */
  position: relative; z-index: 2;
  min-height: auto;
  display: flex; flex-direction: column;
  justify-content: flex-start; /* Changed from center to allow scrolling from top */
  align-items: center;
  padding: 120px 24px 60px; /* Increased top padding to clear nav bar */
}

.proof-header {
font-family: var(--serif);
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 600;
    color: #B48E3B;
    text-align: center;
    margin-bottom: 12px;
    font-size: 60px;
    background: rgb(255, 255, 255, .4);
    padding: 10px;
    border-radius: 36px;
	border: 3px solid #05183B
}

.proof-subtext {
  
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  text-align: center;
  margin-bottom: 50px;
  font-style: italic;
}

/* Scattered screenshot collage */
.collage {
  position: relative;
  width: 100%;
 /*  max-width: 900px; */
  min-height: 800px; /* flexible */
  height: auto;      /* 🔥 allows natural expansion */

}

.collage .screenshot {
  position: absolute !important;
  width: 320px;
  min-height: 320px; /* flexible height */
  padding: 20px; /* handled inside review-card */
  border-radius: 14px;
  overflow: hidden;  
  transition: all 0.4s ease;
  cursor: pointer;

}

.collage .screenshot:nth-child(1) { z-index: 1; }
.collage .screenshot:nth-child(2) { z-index: 2; }
.collage .screenshot:nth-child(3) { z-index: 3; }
.collage .screenshot:nth-child(4) { z-index: 4; }
.collage .screenshot:nth-child(5) { z-index: 5; }
.collage .screenshot:nth-child(6) { z-index: 6; }
.collage .screenshot:nth-child(7) { z-index: 7; }
.collage .screenshot:nth-child(8) { z-index: 8; }
.collage .screenshot:nth-child(9) { z-index: 9; }
.collage .screenshot:nth-child(10) { z-index: 10; }

.collage .screenshot:hover {
   transform: translateY(-20px) scale(1.08) rotate(0deg);

  z-index: 999; /* 🔥 ALWAYS TOP */
  
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);

  transition: all 0.35s ease;
}


/* image inside */
.collage .screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collage .screenshot:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  z-index: 20; /* 🔥 bring to front */
}

.collage .screenshot .quote {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  font-style: italic;
}

.collage .screenshot .anon {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  color: #bbb;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================
   SECTION 7 — FAQ (BEFORE YOU ASK)
   ============================================ */



#slide7 .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}

#slide7 {
 position: absolute;
  inset: 0;
overflow-y:auto;
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('./images/backgrounds/screen7.png') center / cover no-repeat;
  
}
}



#slide7 .bg {
  background: var(--faq-bg);
  filter: none !important;
  transform: none !important;
}


/* ============================================
   3-COLUMN FAQ GRID
   ============================================ */
.faq-section.redesigned {
  margin-top: 140px;
  padding: 80px 0;
}

.faq-grid-3 {
  display: grid;
 grid-template-columns: repeat(3, 1fr);
  width: 100vw;              /* 🔥 full viewport width */
  margin-left: calc(-50vw + 50%); /* 🔥 break container */
   border-top: 1px solid rgba(0,0,0,0.05);
}

/* COMMON BOX */
.faq-box {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px; /* keep vertical spacing */
}

/* IMAGE BOX */
.image-box {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

/* CONTENT BOX */
.content-box {
  flex-direction: column; 
  background: #ffffff;
  text-align: center;
  align-items: center;
}

/* ICON */
.content-box img {
  width: 70px;
  margin-bottom: 16px;
}

/* HEADING */
.content-box h2 {
  
  font-size: 26px;
  font-weight: 600;
  color: #05183B;
  margin-bottom: 12px;
}

/* TEXT */
.content-box p {
  
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  max-width: 420px;
}


/* ============================================
   FOOTER
   ============================================ */
.footer-bar {
  position: relative;
  margin-top: 40px;
  left: 0; width: 100%;
  padding: 20px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  color: #aaa;
  letter-spacing: 1px;
  z-index: 3;
}

#slide7 .footer-bar { color: #bbb; }

/* ============================================
   SLIDE PROGRESS INDICATOR
   ============================================ */
.progress-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 12px;
  z-index: 5001;
}

.progress-dots .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.4s ease, transform 0.3s ease;
  cursor: pointer;
}

.progress-dots .dot.active {
  background: rgba(255,255,255,0.9);
  transform: scale(1.3);
}

/* Light sections need dark dots */
.progress-dots.light .dot {
  background: rgba(0,0,0,0.2);
}

.progress-dots.light .dot.active {
  background: rgba(0,0,0,0.6);
}

/* ============================================
   RESPONSIVE — TABLET
   ============================================ */
@media (max-width: 1024px) {
  nav.desktop-nav { padding: 16px 30px; }
  nav.desktop-nav .nav-links {  gap: clamp(12px, 2.5vw, 36px); }
  nav.desktop-nav .nav-links a { font-size: clamp(10px, 1.5vw, 15px);
  letter-spacing: clamp(0.5px, 0.15vw, 2px); white-space: nowrap; flex-shrink: 0; }

  .question-card {
    bottom: 100px; right: 40px;
    min-width: 320px; max-width: 360px;
  }

  
  .proof-section {
    padding-top: 100px;
  }
video#heroVideo2 {
    object-position: 58% 10%;
}
 


  /* ===== SLIDE 6 ===== */
   .collage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;

    max-width: 700px;
    margin: 0 auto;

    min-height: auto;
  }
#slide6 .proof-section
{
padding-top:100px !important;
}
#slide6{
display:block !important;
}


 .pos1 { top: 0% !important;  left: 0% !important;  transform: rotate(-4deg) !important; }
.pos2 { top: 0% !important; left: 15% !important; transform: rotate(3deg) !important; }
.pos3 { top: 0% !important; left: 30% !important; transform: rotate(2deg) !important; }
.pos4 { top: 0% !important; left: 45% !important; transform: rotate(-3deg) !important; }
.pos5 { top: 0% !important; left: 65% !important; transform: rotate(4deg) !important; }
.pos6 { margin-top: 30% !important; left: 0% !important; transform: rotate(-2deg) !important; }
.pos7 { margin-top: 30% !important; left: 15% !important; transform: rotate(-2deg) !important; }
.pos8 { margin-top: 30% !important; left: 30% !important; transform: rotate(-2deg) !important; }
.pos9 { margin-top: 30% !important; left: 45% !important; transform: rotate(-2deg) !important; }
.pos10 { margin-top: 30% !important; left: 65% !important; transform: rotate(-2deg) !important; }

.collage .screenshot:nth-child(1) { z-index: 1; }
.collage .screenshot:nth-child(2) { z-index: 2; }
.collage .screenshot:nth-child(3) { z-index: 8; }
.collage .screenshot:nth-child(4) { z-index: 4; }
.collage .screenshot:nth-child(5) { z-index: 5; }
.collage .screenshot:nth-child(6) { z-index: 6; }
.collage .screenshot:nth-child(7) { z-index: 7; }
.collage .screenshot:nth-child(8) { z-index: 3; }
.collage .screenshot:nth-child(9) { z-index: 9; }
.collage .screenshot:nth-child(10) { z-index: 10; }

.collage .screenshot:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  z-index: 20; /* 🔥 bring to front */
}


  
  #slide5 {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    padding-top: 125px;
  }

  /* form stays centered */
 #slide5 .content {
    max-width: 420px;
    margin: 0 auto;
    z-index: 3;
  }

  .sticky-wrapper {
    position: absolute; /* keep floating */
    inset: 0;
  }

  .sticky {
    width: 160px;
    font-size: 12px;
    padding: 12px;
  }

  /* LEFT SIDE */
  /* LEFT (closer to edges) */
  .s1 { top: 22% !important; left: 2% !important;  transform: rotate(-5deg)!important; }
  .s2 { top: 42% !important; left: 1% !important;  transform: rotate(4deg) !important; }
  .s3 { top: 62% !important; left: 2% !important;  transform: rotate(-3deg)!important; }

  /* RIGHT */
  .s4 { top: 22% !important; right: 2% !important; transform: rotate(5deg) !important; }
  .s5 { top: 42% !important; right: 1% !important; transform: rotate(-4deg) !important; }
  .s6 { top: 62% !important; right: 2% !important; transform: rotate(3deg) !important; }
}

/* ============================================
   RESPONSIVE — MOBILE
   ============================================ */
   
   
   
 @media (max-width: 767px)   
   
   {
	   .mobile-pill-nav {
	
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block !important;
  flex-wrap: wrap; /* 🔥 allows 2 lines */
  justify-content: center;
  gap: 8px;
	width: 100%;
  padding: 8px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  z-index: 6000;
}

/* pills */
.mobile-pill-nav a {
  padding: 5px;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
}

/* active */
.mobile-pill-nav a.active {
  background: #B48E3B;
  color: #fff;
}

/* hover */
.mobile-pill-nav a:hover {
  color: #fff;
}



  nav.desktop-nav { display: none; }
  .mobile-nav { display: flex; }
  
   }
   
   

		 
@media (max-width: 768px) {
	
	/* ============================================
   MOBILE FLOATING PILL NAV
============================================ */



.slide1bgvideo video {
   /* object-position: 70% 80%;🔥 shift focus up */
  }
  
  .question-card {
    bottom: 50px; right: auto;
    left: 50%; transform: translateX(-50%) translateY(20px);
    min-width: calc(100% - 48px);
    max-width: calc(100% - 48px);
    text-align: center;
  }

  .slide.active .question-card {
    transform: translateX(-50%) translateY(0);
  }

  .question-card:hover {
    transform: translateX(-50%) translateY(-2px);
  }

  .main-text {
    font-size: clamp(24px, 7vw, 36px);
  }

  .sub-text {
    font-size: 14px;
  }

 .collage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;

    max-width: 700px;
    margin: 0 auto;

    min-height: auto;
  }
  #slide6 .proof-section{
      padding: 0px 24px 120px !important;
	  }
	  #slide6{
		  padding-top:95px !important;
	  }
 .collage .screenshot {
 width:260px !important;}

 .pos1 { top: 0% !important;  left: 0% !important;  transform: rotate(-4deg) !important; }
.pos2 { top: 0% !important; left: 15% !important; transform: rotate(3deg) !important; }
.pos3 { top: 0% !important; left: 30% !important; transform: rotate(2deg) !important; }
.pos4 { top: 0% !important; left: 45% !important; transform: rotate(-3deg) !important; }
.pos5 { top: 0% !important; left: 65% !important; transform: rotate(4deg) !important; }
.pos6 { margin-top: 30% !important; left: 0% !important; transform: rotate(-2deg) !important; }
.pos7 { margin-top: 30% !important; left: 15% !important; transform: rotate(-2deg) !important; }
.pos8 { margin-top: 30% !important; left: 30% !important; transform: rotate(-2deg) !important; }
.pos9 { margin-top: 30% !important; left: 45% !important; transform: rotate(-2deg) !important; }
.pos10 { margin-top: 30% !important; left: 65% !important; transform: rotate(-2deg) !important; }

.collage .screenshot:nth-child(1) { z-index: 1; }
.collage .screenshot:nth-child(2) { z-index: 2; }
.collage .screenshot:nth-child(3) { z-index: 8; }
.collage .screenshot:nth-child(4) { z-index: 4; }
.collage .screenshot:nth-child(5) { z-index: 5; }
.collage .screenshot:nth-child(6) { z-index: 6; }
.collage .screenshot:nth-child(7) { z-index: 7; }
.collage .screenshot:nth-child(8) { z-index: 3; }
.collage .screenshot:nth-child(9) { z-index: 9; }
.collage .screenshot:nth-child(10) { z-index: 10; }

.collage .screenshot:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  z-index: 20; /* 🔥 bring to front */
}

.proof-section { 
    padding: 100px 20px 60px; /* Ensures header is visible below mobile nav */
  }
  
  .proof-header {
    margin-top: 20px; /* Extra breathing room */
  }
  
  .faq-section { padding: 90px 20px 80px; }

  .progress-dots { right: 12px; }
  .progress-dots .dot { width: 6px; height: 6px; }

  .form-container { width: 100%; }
  


  /* ===== SLIDE 6 ===== */
  .collage {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .review-card {
    font-size: 14px;
  }

  .review-card p {
    font-size: 14px;
  }


  
  .faq-box {
    padding: 30px 20px;
  }
  
   #slide5 {
    overflow-y: auto; /* allow scroll */
  }

  #slide5 .content {
    max-width: 90%;
    margin: 0 auto;
  }

  .sticky-wrapper {
    position: absolute;
    inset: 0;
  }

  .sticky {
    width: 120px;
    font-size: 11px;
    padding: 10px;
  }

  /* LEFT (closer to edges) */
  .s1 { top: 22% !important; left: 2% !important;  transform: rotate(-5deg)!important; }
  .s2 { top: 42% !important; left: 1% !important;  transform: rotate(4deg) !important; }
  .s3 { top: 62% !important; left: 2% !important;  transform: rotate(-3deg)!important; }

  /* RIGHT */
  .s4 { top: 22% !important; right: 2% !important; transform: rotate(5deg) !important; }
  .s5 { top: 42% !important; right: 1% !important; transform: rotate(-4deg) !important; }
  .s6 { top: 62% !important; right: 2% !important; transform: rotate(3deg) !important; }
  


}

@media (min-width: 768px) and (max-width: 1024px) {
.s3_image{
		 background:url('images/faqs/s32.webp') 50% 50% / cover no-repeat !important;
	 }
	 
.s4_image{
		 background:url('images/faqs/s42.webp') 50% 50% / cover no-repeat !important;
	 }
}
/* ============================================
   RESPONSIVE — SMALL MOBILE
   ============================================ */
@media (max-width: 480px) {
  .main-text { font-size: 40px; }
  .question-card .q-text { font-size: 16px; }
  .collage .screenshot { width: 95% !important; }
  .faq-question { font-size: 14px; }
  
  .legal-pill {
    bottom: 10px !important;
    padding: 8px 8px 8px 16px;
    font-size: 11px;
	
	width: fit-content;        /* 🔥 key fix */
    max-width: 90vw;           /* prevents overflow */
 white-space: nowrap;    

  }
  
  
   .pos1 { top: 0% !important;  left: 0% !important;  transform: rotate(-4deg) !important; }
.pos2 { top: 0% !important; left: 15% !important; transform: rotate(3deg) !important; }
.pos3 { top: 0% !important; left: 30% !important; transform: rotate(2deg) !important; }
.pos4 { top: 0% !important; left: 45% !important; transform: rotate(-3deg) !important; }
.pos5 { top: 0% !important; left: 65% !important; transform: rotate(4deg) !important; }
.pos6 { margin-top: 0% !important; left: 0% !important; transform: rotate(-2deg) !important; }
.pos7 { margin-top: 0% !important; left: 15% !important; transform: rotate(-2deg) !important; }
.pos8 { margin-top: 0% !important; left: 30% !important; transform: rotate(-2deg) !important; }
.pos9 { margin-top: 0% !important; left: 45% !important; transform: rotate(-2deg) !important; }
.pos10 { margin-top: 0% !important; left: 65% !important; transform: rotate(-2deg) !important; }

  
  .sub-text {
    font-size: 16px;
  }

  .review-card {
    padding: 14px;
  }

  .sticky {
    font-size: 12px;
  }
  .form-container{display:none !important;}

 /* 🔥 KEEP STICKIES VISIBLE */
  .sticky-wrapper {
    display: block !important;
    position: relative;    
   margin-top: 75%;
  }

  .sticky {
    width: 110px;
    font-size: 10px;
    padding: 8px;
    opacity: 1 !important;
    transform: rotate(var(--r)) !important;
  }

  /* FORM WRAPPER */
  .form-step-wrapper {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
  }

  /* PROGRESS */
  .form-progress {
    font-size: 14px;
    margin-bottom: 10px;
    color: #B48E3B;
  }

  /* STEPS */
  .form-step {
    display: none;
    animation: fadeIn 0.4s ease;
  }

  .form-step.active {
    display: block;
  }

  /* INPUT */
  .form-step input {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  /* BUTTONS */
  .form-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .form-actions button {
    flex: 1;
    padding: 12px;
    font-size: 13px;
    border-radius: 6px;
    border: none;
    background: #05183bcc;
   color: #fff;
   border:1px solid #b48e3b;
  }

  #prevBtn {
    background: #b48e3b;
  }
 .collage {
    display: flex;
    flex-direction: column;
    gap: 22px;

    max-width: 520px;
    margin: 0 auto; 
    gap: 18px;
    padding: 0 10px;
  }

  .review-card {
    font-size: 13px;
    padding: 14px;
  }

  .review-card p {
    font-size: 13px;
    line-height: 1.5;
  }

  .review-card .stars {
    font-size: 13px;
  }


.collage .screenshot {
 width:260px !important;
 position:relative !important;
 }
 
 /* make container vertical */
  .collage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;

    max-width: 520px;
    margin: 0 auto;
    padding: 0 12px;
  }

  /* each card becomes normal flow */
  .collage .screenshot {
    position: relative !important;
    width: 100% !important;
    max-width: 420px;

    /* reset old chaos */
    top: auto !important;
    left: auto !important;
    right: auto !important;

    transition: transform 0.3s ease;
  }

  /* ✨ alternating tilt */
  .collage .screenshot:nth-child(odd) {
    transform: rotate(2deg);
  }

  .collage .screenshot:nth-child(even) {
    transform: rotate(-2deg);
  }

  /* subtle hover lift */
  .collage .screenshot:hover {
    transform: scale(1.04) rotate(0deg);
    z-index: 10;
  }
  
  .faq-section.redesigned{
  margin-top:10px !important;
  }
  #slide7{
  display:block !important;
  }
  .faq-grid-3{
    grid-template-columns: repeat(1, 1fr) !important;
}

 .desktop-form {
    display: none !important;
  }

  .mobile-form {
    display: block !important;
    width: 100%;
    max-width: 360px;
    margin: 20px auto;
    text-align: center;
  }

  .form-progress {
    font-size: 14px;
    color: #B48E3B;
    margin-bottom: 12px;
  }

  .form-step {
    display: none;
  }

  .form-step.active {
    display: block;
  }

  .form-step input {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .form-actions {
    display: flex;
    gap: 10px;
  }

  .form-actions button {
    flex: 1;
    padding: 12px;
    font-size: 13px;
    border-radius: 6px;
    border: none;
    background: #05183bcc;
   color: #fff;
   border:1px solid #b48e3b;
  }

  #prevBtn {
    background: #b48e3b;
  }

  input.error {
    border: 2px solid #ff4d4f;
  }
  .error-text {
  font-size: 12px;
  color: #ff4d4f;
  text-align: left;
  margin-top: -12px;
  margin-bottom: 12px;
}

.sticky{
 width: clamp(120px, 40vw, 180px) !important;
    max-width: 90% !important;
    
    font-size: clamp(10px, 2.5vw, 13px) !important;
    padding: clamp(8px, 2vw, 14px) !important;
}
	

 .s1 { 
    top: clamp(80px, 45vh, 140px) !important;
    left: clamp(6px, 2vw, 16px) !important;
    transform: rotate(-5deg) !important;
  }

  .s2 { 
    top: clamp(160px, 65vh, 220px) !important;
    left: clamp(4px, 1.5vw, 12px) !important;
    transform: rotate(4deg) !important;
  }

  .s3 { 
    top: clamp(240px, 80vh, 300px) !important;
    left: clamp(6px, 2vw, 16px) !important;
    transform: rotate(-3deg) !important;
  }

  /* RIGHT */
  .s4 { 
   top: clamp(80px, 45vh, 140px) !important;
    right: clamp(6px, 2vw, 16px) !important;
    transform: rotate(5deg) !important;
  }

  .s5 { 
   top: clamp(160px, 65vh, 220px) !important;
    right: clamp(4px, 1.5vw, 12px) !important;
    transform: rotate(-4deg) !important;
  }

  .s6 { 
    top: clamp(240px, 80vh, 300px) !important;
    right: clamp(6px, 2vw, 16px) !important;
    transform: rotate(3deg) !important;
  }
  


}
/* mobile query ends */

.logo_home{
	width:150px;
	padding:15px;
	background:white;
}

.nav-inner {
  width: 100%;
   max-width: 1280px; /* controls box width */
  /* padding: 20px 40px; */

  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ============================================
   STICKY NOTES (SLIDE 5)
   ============================================ */

/* wrapper stays same */
.sticky-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* base sticky */
.sticky {
  position: absolute;
  width: 220px;
  max-width: 200px;
  padding: 18px;
  font-size: 14px;
  line-height: 1.5;
 

  /* 🎨 paper feel 
  background: linear-gradient(
    145deg,
    rgba(255, 244, 210, 0.55),
    rgba(180, 142, 59, 0.55)
  );*/

 background: #B48E3B;
  color: #fff;

  border-radius: 8px;

  /* 📄 texture illusion */
  box-shadow:
    0 12px 25px rgba(0,0,0,0.15),
    inset 0 0 8px rgba(0,0,0,0.05);

  /* slight paper grain effect */
   /* subtle gold grain */

  opacity: 0;
  transform: translateY(40px) scale(0.95);

  transition: all 0.6s ease;

  pointer-events: auto;
}

/* floating animation */
@keyframes stickyFloat {
  0%   { transform: translateY(0) rotate(var(--r)); }
  50%  { transform: translateY(-6px) rotate(calc(var(--r) + 1deg)); }
  100% { transform: translateY(0) rotate(var(--r)); }
}

/* when visible */
.sticky.show {
  opacity: 1;
  transform: translateY(0) rotate(var(--r)) scale(1);

  animation: stickyFloat 4s ease-in-out infinite;
}


/* ============================================
   SAFE ZONES (NO OVERLAP WITH FORM)
   ============================================ */

/* LEFT SIDE (max 30% width area) */
.s1 { top: 18%; left: 10%;  --r: -6deg;  z-index: 2;  }
.s2 { top: 42%; left: 12%;  --r: 4deg;  z-index: 3; }
.s3 { top: 66%; left: 15%;  --r: -3deg; z-index: 2;  }

/* RIGHT SIDE (max 30% width area) */
.s4 { top: 18%; right: 10%; --r: 5deg; z-index: 3;}
.s5 { top: 44%; right: 12%; --r: -4deg;  z-index: 2; }
.s6 { top: 70%; right: 15%; --r: 3deg; z-index: 3;}

/* OPTIONAL: keep center clean */
#slide5 .content {
  max-width: 500px; /* tighten form zone */
  z-index: 3;
}

/* subtle hover */
.sticky:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.05);
  z-index: 5;
}


/* ============================================
   SPARKLE SYSTEM (EDGE ONLY — NON-INTRUSIVE)
============================================ */

/* active glow */
.sparkle-target.sparkle-active {
  box-shadow:
    0 10px 25px rgba(0,0,0,0.15),
    0 0 20px rgba(180,142,59,0.25),
    0 0 60px rgba(180,142,59,0.1);
}

/* sparkle star */
.sparkle-star {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  font-size: 12px;
  opacity: 0;
  animation: sparkle-pop 1.8s ease-in-out forwards;
  filter: drop-shadow(0 0 6px rgba(180,142,59,0.7));
}

/* animation */
@keyframes sparkle-pop {
  0% { opacity: 0; transform: scale(0); }
  20% { opacity: 1; transform: scale(1.2); }
  60% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}

/* drift outward (IMPORTANT) */
.sparkle-star.drift {
  animation: sparkle-drift 2s ease-out forwards;
}

@keyframes sparkle-drift {
  0% { opacity: 0; transform: scale(0) translate(0,0); }
  30% { opacity: 1; transform: scale(1.1) translate(2px,-4px); }
  100% { opacity: 0; transform: scale(0) translate(10px,-14px); }
}


/* ============================================
   FAQ FADE-IN ANIMATION (SLIDE 7 ONLY)
   ============================================ */

.faq-box {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* direction variants */
.fade-left {
  transform: translateX(-60px);
}

.fade-right {
  transform: translateX(60px);
}

/* visible state */
.faq-box.show {
  opacity: 1;
  transform: translateX(0);
}

/* optional polish */
.faq-box.show {
  transform: translateX(0) scale(1);
}

/* ============================================
   REVIEW CARDS (REPLACES IMAGE SCREENSHOTS)
   ============================================ */

.review-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
 
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

/* ⭐ stars */
.review-card .stars {
  font-size: 14px;
  letter-spacing: 2px;
  color: #B48E3B;
  font-weight: 500;
  margin-bottom: 6px;
}

.review-card .stars span {
  margin-left: 6px;
  font-size: 12px;
  color: #666;
}

/* meta (date) */
.review-card .meta {
  font-size: 11px;
  color: #999;
  margin-bottom: 10px;
}

/* text */
.review-card p {
  font-size: 14px;
  color: #05183B;
}

/* ============================================
   STYLE VARIANTS
   ============================================ */

/* 🟢 WhatsApp style */
.review-card.whatsapp {
  background:
    url('https://www.transparenttextures.com/patterns/white-wall-3.png'),
    #e5ddd5;

  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  position: relative;
}

/* message bubble feel */
.review-card.whatsapp::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: #e5ddd5;
  transform: rotate(45deg);
}

/* 🔵 LinkedIn style */
.review-card.linkedin {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.review-card.linkedin .stars {
  color: #05183B;
}

/* 🟡 Simple sticky style */
.review-card.simple {
  background: #fff7c7;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* slight handwritten feel */
.review-card.simple p {
  font-family: var(--serif);
  font-style: italic;
}

/* ============================================
   RANDOM SCATTER POSITIONS
   ============================================ */

.pos1 { top: 0%;  left: 0%;  transform: rotate(-4deg); }
.pos2 { top: 4%; left: 20%; transform: rotate(3deg); }
.pos3 { top: 0%; left: 42%; transform: rotate(-2deg); }
.pos4 { top: 6%; left: 65%; transform: rotate(-3deg); }
.pos5 { top: 10%; left: 75%; transform: rotate(4deg); }
.pos6 { top: 25%; left: 5%; transform: rotate(2deg); }
.pos7 { top: 25%; left: 20%; transform: rotate(-5deg); }
.pos8 { top: 27%; left: 35%; transform: rotate(0deg); }
.pos9 { top: 30%; left: 50%; transform: rotate(-2deg); }
.pos10 { top: 25%; left: 68%; transform: rotate(-6deg); }


.leaf{position:absolute;width:34px;height:34px}
.leaf svg{width:100%;height:100%}
@keyframes fall{
  0%{
    transform:translateY(0) rotate(0);
  }
  100%{
    transform:translateY(120vh) rotate(360deg);
  }
}


/* ============================================
   FULL SCREEN LOADER
============================================ */
#formLoader {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#formLoader.show {
  opacity: 1;
  pointer-events: all;
}

/* spinner */
.loader-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top: 3px solid #B48E3B;
  border-radius: 50%;

  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ============================================
   TOAST NOTIFICATION
============================================ */
/* ============================================
   TOAST NOTIFICATION
============================================ */

#toastMsg {
  position: fixed;

  bottom: 20vh; /* 🔥 20% from bottom (responsive) */
  left: 50%;
  transform: translateX(-50%) translateY(20px);

  width: auto;
  max-width: 100vw;  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  background: #111;
  color: #fff;

  padding: 12px 18px;
  border-radius: 30px;

  font-size: 14px;
  letter-spacing: 0.5px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.3);

  opacity: 0;
  pointer-events: auto; /* 🔥 FIXED */

  transition: all 0.4s ease;
  z-index: 9999;
}

/* show */
#toastMsg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* success */
#toastMsg.success {
  background: #05183B;
  border: 2px solid #b38d3b;
}

/* error */
#toastMsg.error {
  background: #d9534f;
}

/* text */
.toast-text {
  flex: 1;
  font-style: italic;
}

/* close button */
.toast-close {
  cursor: pointer;
  font-size: 40px;
  opacity: .7;
}

.toast-close:hover {
  opacity: 1;
}

/* ============================================
   MOBILE FORM SYSTEM
============================================ */

/* hide mobile form on desktop */
.mobile-form {
  display: none;
}

/* show desktop form */

/* ============================================
   FLOATING LEGAL PILL
============================================ */
.legal-pill {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 12px;
  align-items: center;

  padding: 10px 18px;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 30px;

  z-index: 6000;
}

.legal-pill a {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 1px;
}

.legal-pill a:hover {
  color: #fff;
}



/* ============================================
   MODAL
============================================ */
.footer-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  pointer-events: none;
  transition: 0.3s;

  z-index: 9999;
}

.footer-modal.show {
  opacity: 1;
  pointer-events: all;
}

.footer-modal-content {
  max-width: 600px;
  width: 90%;
  background: #111;
  padding: 30px;
  border-radius: 12px;
  color: #eee;
  line-height: 1.7;
  font-size: 14px;
  position: relative;
}

.footer-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}

/* ============================================
   FLOATING LEGAL PILL
============================================ */
.legal-pill {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 12px;
  align-items: center;

  padding: 10px 18px;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 30px;

  z-index: 6000;
}

.legal-pill a {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 1px;
}

.legal-pill a:hover {
  color: #fff;
}


/* ============================================
   MODAL
============================================ */
.footer-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  pointer-events: none;
  transition: 0.3s;

  z-index: 9999;
}

.footer-modal.show {
  opacity: 1;
  pointer-events: all;
}

.footer-modal-content {
  max-width: 600px;
  width: 90%;
  background: #111;
  padding: 30px;
  border-radius: 12px;
  color: #eee;
  line-height: 1.7;
  font-size: 14px;
  position: relative;
}

.footer-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}

.cta-sparkle {
  position: absolute;
  pointer-events: none;
  font-size: 12px;
  opacity: 0;

  animation: ctaSparkle 1.2s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(180,142,59,0.8));
}

@keyframes ctaSparkle {
  0%   { opacity: 0; transform: scale(0) translate(0,0); }
  20%  { opacity: 1; transform: scale(1.3) translate(2px,-4px); }
  60%  { opacity: 0.8; transform: scale(1) translate(6px,-8px); }
  100% { opacity: 0; transform: scale(0) translate(10px,-12px); }
}


.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: 0.4s ease;

  z-index: 99999;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  width: 90%;
  max-width: 380px;

  background: #05183B;
  border: 2px solid #B48E3B;

  border-radius: 16px;
  padding: 30px 20px;

  text-align: center;

  transform: translateY(30px) scale(0.95);
  transition: 0.4s ease;
}

.modal-overlay.show .modal-box {
  transform: translateY(0) scale(1);
}

.modal-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.modal-text {
  font-size: 13px;
  margin-bottom: 20px;
}

.modal-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #B48E3B;
  background: transparent;
  color: white;
  cursor: pointer;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 20px;
  cursor: pointer;
}