.elementor-4915 .elementor-element.elementor-element-1598fe6{--display:flex;}/* Start custom CSS for html, class: .elementor-element-1c8ed6c *//* ================================
   THEME TOGGLE ICONS
================================ */
.theme-toggle {
  padding: 0 14px;
  gap: 0;
}

.theme-toggle .icon {
  display: none;
}

/* Dark mode → show moon */
body:not([data-theme="light"]) .icon-moon {
  display: block;
}

/* Light mode → show sun */
body[data-theme="light"] .icon-sun {
  display: block;
}

/* Slight hover polish */
.theme-toggle:hover .icon {
  stroke: #ffffff;
}

/* ================================
   THEME VARIABLES
================================ */
:root {
  --bg-main: #0b1020;
  --bg-soft: rgba(255,255,255,0.08);
  --bg-glass: rgba(255,255,255,0.10);

  --text-main: #ffffff;
  --text-muted: rgba(255,255,255,0.75);

  --border-glass: rgba(255,255,255,0.18);

  --accent-1: #8a5cff;
  --accent-2: #487cff;
}

/* Light theme overrides */
body[data-theme="light"] {
  --bg-main: #f5f7fb;
  --bg-soft: rgba(0,0,0,0.04);
  --bg-glass: rgba(255,255,255,0.85);

  --text-main: #0b1020;
  --text-muted: rgba(15,23,42,0.75);

  --border-glass: rgba(0,0,0,0.08);

  --accent-1: #5b5cff;
  --accent-2: #3b82f6;
}

html, body {
  background:
    linear-gradient(180deg, var(--bg-main), var(--bg-main));
  color: var(--text-main);
}

.nav-pill,
.app-signin,
.app-nav2,
.app-search,
.section,
.service-card,
.why-card,
.stat-card {
  background: var(--bg-soft);
  border-color: var(--border-glass);
  color: var(--text-main);
}

.hero-title,
.section h2,
.services-header h2,
.about-content h2,
.cta h2 {
  color: var(--text-main);
}

.app-subtitle,
.section p,
.services-header p,
.about-content p,
.why-header p {
  color: var(--text-muted);
}
.accent,
.services-header .accent,
.about-content .accent,
.why-header .accent {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="light"] .nav-pill {
  box-shadow:
    0 6px 20px rgba(0,0,0,0.08);
}

body[data-theme="light"] .section,
body[data-theme="light"] .service-card,
body[data-theme="light"] .why-card,
body[data-theme="light"] .stat-card {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.12);
}

body[data-theme="light"] .hero-glow {
  display: none;
}

/* ================================
   NAV ACTIVE SECTION GLOW
================================ */
.nav-pill.is-active {
  background:
    linear-gradient(
      180deg,
      rgba(138,92,255,0.35),
      rgba(72,124,255,0.18)
    );

  border-color: rgba(138,92,255,0.55);

  box-shadow:
    0 0 0 1px rgba(138,92,255,0.55),
    0 12px 40px rgba(138,92,255,0.55),
    inset 0 0 24px rgba(138,92,255,0.25);

  color: #ffffff;
}

/* Subtle animated glow pulse */
.nav-pill.is-active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;

  background:
    radial-gradient(
      60% 60% at 50% 50%,
      rgba(138,92,255,0.35),
      transparent 70%
    );

  filter: blur(10px);
  opacity: 0.7;
  pointer-events: none;
}


.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 15px;
  font-weight: 500;          /* ✅ FIXED */
  line-height: 1;            /* ✅ NORMALIZED */

  color: rgba(255,255,255,0.9);
  text-decoration: none;

  padding: 10px 18px;
  height: 36px;              /* ✅ FORCES SAME HEIGHT */
  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);

  transition: background .2s ease, transform .2s ease;
 
}
.app-nav2 {
 

   position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;

  display: flex;
  align-items: center;   /* ← THIS is the key */
  gap: 10px;

  color: rgba(255,255,255,0.9);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background .2s ease, transform .2s ease;
}

.nav-pill:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}




.scroll-down {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;

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

  color: rgba(255,255,255,0.85);
  cursor: pointer;
  z-index: 5;

  animation: scrollBounce 2.2s infinite;
}

.scroll-down svg {
  width: 26px;
  height: 26px;
}

.scroll-down:hover {
  color: #ffffff;
}

@keyframes scrollBounce {
  0%,20%,50%,80%,100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -10px); }
  60% { transform: translate(-50%, -6px); }
}

html {
  scroll-behavior: smooth;
}


/* ================================
   WHY CHOOSE ACUC – PREMIUM
================================ */
.why-premium {
  margin-top: 160px;
}

.why-header {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}

.why-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(138,92,255,0.9);
  margin-bottom: 14px;
}

.why-header h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 18px;
}

.why-header .accent {
  background: linear-gradient(135deg, #8a5cff, #487cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.why-header p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
}

/* GRID */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
}


/* CARDS */
.why-card {
  position: relative;
  padding: 36px 28px;
  border-radius: 26px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(22px);
  box-shadow: 0 28px 90px rgba(0,0,0,0.65);
}

.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      240px 140px at 20% 0%,
      rgba(138,92,255,0.28),
      transparent 70%
    );
  pointer-events: none;
}
.why-card h3,
.why-card strong {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #8a5cff, #6a7cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.why-card span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  margin-bottom: 14px;
}

.why-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}

/* HIGHLIGHT CARD */
.why-card.highlight {
  background:
    linear-gradient(
      180deg,
      rgba(138,92,255,0.28),
      rgba(255,255,255,0.06)
    );
  border-color: rgba(138,92,255,0.55);
}


/* RESPONSIVE */
@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-card.highlight {
    grid-column: span 2;
  }
}

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

  .why-card.highlight {
    grid-column: span 1;
  }
}



.services-slider-wrapper {
  position: relative;
  margin-top: 64px;

  /* 👇 THIS IS THE IMPORTANT PART */
  padding: 40px 0 64px;

  overflow: visible;
}
/* ================================
   SERVICES SLIDER
================================ */
.services-slider-wrapper {
  position: relative;
  margin-top: 64px;

  /* 👇 THIS IS THE IMPORTANT PART */
  padding: 40px 0 64px;

  overflow: visible;
}


.services-slider {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 20px 8px 40px;
}

.services-slider::-webkit-scrollbar {
  display: none;
}

.service-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

/* NAV BUTTONS */
/* ================================
   SLIDER NAV BUTTONS – PREMIUM
================================ */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.08)
    );
  backdrop-filter: blur(16px);
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    opacity .25s ease;
  opacity: 0.85;
}

/* Chevron styling */
.slider-btn::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

/* Left arrow */
.slider-btn.prev::after {
  transform: rotate(-135deg);
  margin-left: 3px;
}

/* Right arrow */
.slider-btn.next::after {
  transform: rotate(45deg);
  margin-right: 3px;
}

/* Remove text arrows */
.slider-btn {
  font-size: 0;
}

/* Hover */
.slider-btn:hover {
  opacity: 1;
  background:
    linear-gradient(
      180deg,
      rgba(138,92,255,0.45),
      rgba(72,124,255,0.25)
    );
  box-shadow:
    0 18px 60px rgba(138,92,255,0.6);
  transform: translateY(-50%) scale(1.08);
}

/* Active (click) */
.slider-btn:active {
  transform: translateY(-50%) scale(0.96);
}

/* Positioning */
.slider-btn.prev {
  left: -12px;
}

.slider-btn.next {
  right: -12px;
}

/* Mobile – hide arrows (swipe only) */
@media (max-width: 768px) {
  .slider-btn {
    display: none;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .slider-btn {
    display: none;
   
  }

  .service-card {
    flex: 0 0 85%;
  }
}

/* ================================
   SERVICES – PREMIUM LAYOUT
================================ */
.services-premium {
  margin-top: 160px;
}

.services-header {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}

.services-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(138,92,255,0.9);
  margin-bottom: 14px;
}

.services-header h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 18px;
}

.services-header .accent {
  background: linear-gradient(135deg, #8a5cff, #487cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.services-header p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
}

/* SERVICES GRID */
.services-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.service-card {
  position: relative;
  padding: 40px 32px;
  border-radius: 26px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(24px);
  box-shadow: 0 30px 100px rgba(0,0,0,0.65);
  transition: transform .4s ease, box-shadow .4s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      240px 140px at 20% 0%,
      rgba(138,92,255,0.3),
      transparent 70%
    );
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 50px 140px rgba(0,0,0,0.8);
}

.service-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #FFFFFF
}

.service-card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 900px) {
  .services-header h2 {
    font-size: 30px;
  }
}

@media (max-width: 520px) {
  .service-card {
    padding: 32px 24px;
  }
}




/* ================================
   ABOUT US – PREMIUM LAYOUT
================================ */
.about-premium {
  margin-top: 140px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}

/* LEFT CONTENT */
.about-content {
  text-align: left;
}

.about-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(138,92,255,0.9);
  margin-bottom: 16px;
}

.about-content h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}

.about-content .accent {
  background: linear-gradient(135deg, #8a5cff, #487cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.about-content p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  margin-bottom: 16px;
  
}

.about-content p.muted {
  color: rgba(255,255,255,0.65);
}

/* RIGHT STATS */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  
}

.stat-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.05)
    );
  border-radius: 22px;
  padding: 32px 24px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(22px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.stat-card strong {
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #8a5cff, #487cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-card span {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-content {
    text-align: center;
  }

  .about-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .about-stats {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   ACUC – PREMIUM LANDING PAGE (FULL CSS REPLACEMENT)
===================================================== */

/* ================================
   GLOBAL RESET
================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-main);

  background:
    radial-gradient(
      1200px 600px at 20% -10%,
      color-mix(in srgb, var(--accent-1) 35%, transparent),
      transparent 60%
    ),
    radial-gradient(
      800px 500px at 80% 20%,
      color-mix(in srgb, var(--accent-2) 25%, transparent),
      transparent 55%
    ),
    linear-gradient(180deg, var(--bg-main), var(--bg-main));
}


/* ================================
   ROOT
================================ */
#app-root {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ================================
   NAV
================================ */

.app-nav {
  position: fixed;
  top: 34px;
  right: 32px;
  z-index: 100000;
}

.app-signin {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  
  
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background .2s ease, transform .2s ease;
}

.app-signin:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

/* ================================
   HERO
================================ */
body[data-theme="light"] .hero-glow {
  opacity: 0.25;
  filter: blur(120px);
}

.app-center.hero {
  min-height: 100vh;
  padding: 140px 24px 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  text-align: center;
  position: relative;
}

.app-center.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(124,92,255,0.35), transparent 70%);
  pointer-events: none;
}

.app-logo {
  width: 180px;
  height: auto;
  margin-bottom: 12px;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 760px;
  color: #FFFFFF
}

.app-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
}

/* ================================
   SEARCH (GLASS)
================================ */
.app-search {
  width: 100%;
  max-width: 720px;
  height: 58px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

.app-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: #ffffff;
}

.app-search input::placeholder {
  color: rgba(255,255,255,0.6);
}

.search-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
}

.search-btn svg {
  width: 20px;
  height: 20px;
}

.search-btn:hover {
  color: #ffffff;
}

/* ================================
   GENERIC SECTIONS (GLASS CARDS)
================================ */
.section {
  max-width: 1100px;
  
  margin: 120px auto 0;
  padding: 88px 32px;
  text-align: center;
  border-radius: 32px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.03)
    );
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}

.section h2 {
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 18px;
  color: #FFFFFF
}

.section p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  
}

/* ================================
   SERVICES GRID (FEATURE CARDS)
================================ */
.service-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.service-grid div {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.04)
    );
  border-radius: 24px;
  padding: 36px 28px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(26px);
  box-shadow: 0 25px 80px rgba(0,0,0,0.6);
  transition: transform .4s ease, box-shadow .4s ease;
}

.service-grid div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(220px 120px at 20% 0%, rgba(138,92,255,0.28), transparent 70%);
  pointer-events: none;
}

.service-grid div:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.8);
}

/* ================================
   WHY ACUC
================================ */
.why-list {
  list-style: none;
  padding: 0;
  margin: 48px auto 0;
  max-width: 640px;
  display: grid;
  gap: 20px;
}

.why-list li {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.05)
    );
  padding: 22px 26px;
  border-radius: 20px;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

/* ================================
   CTA (HERO CARD)
================================ */
.cta {
  position: relative;
  max-width: 1100px;
  margin: 160px auto;
  padding: 110px 32px;
  text-align: center;
  border-radius: 40px;
  background:
    linear-gradient(135deg, #1b1f3a, #10162e);
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 320px at 30% 0%, rgba(138,92,255,0.65), transparent 70%);
}

.cta h2 {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  color: #FFFFFF
}

.cta-btn {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #8a5cff, #487cff);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 22px 70px rgba(138,92,255,0.65);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 90px rgba(138,92,255,0.8);
}

/* ================================
   FOOTER
================================ */
.footer {
  padding: 48px 24px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

/* ================================
   AUTH POPUP
================================ */
.auth-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.auth-popup[hidden] {
  display: none;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.auth-box {
  position: relative;
  max-width: 560px;
  width: 92%;
  margin: 6vh auto;
  background: #ffffff;
  color: #111;
  border-radius: 20px;
  padding: 28px;
  max-height: 90vh;
  overflow-y: auto;
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 22px;
  border: none;
  background: none;
  cursor: pointer;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
  .hero-title {
    font-size: 32
  }

  .section {
    padding: 64px 24px;
  }

  .cta h2 {
    font-size: 30px;
  
  }
}




/* =====================================================
   ACUC – REGISTRATION FORM (BRAND ALIGNED)
===================================================== */

/* ================================
   CONTAINER
================================ */
.reg-container {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 32px 28px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.06)
  );
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  backdrop-filter: blur(22px);

  box-shadow:
    0 30px 90px rgba(0,0,0,0.6);

  color: #0b1220;
}

/* ================================
   TITLE
================================ */
.reg-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #0b1220;
}

/* ================================
   USER TYPE SWITCH
================================ */
.user-type-select {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.user-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(31,79,216,0.25);
  background: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #1e293b;
  transition: all .25s ease;
}

.user-btn:hover {
  background: rgba(31,79,216,0.1);
}

.user-btn.active {
  background: linear-gradient(135deg, #1f4fd8, #3b6df0);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(31,79,216,0.4);
}

/* ================================
   FORMS
================================ */
.reg-form {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  flex-direction: column;
  gap: 14px;
  transition: opacity .35s ease, transform .35s ease;
}

.reg-form.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   SECTION TITLES
================================ */
.section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0 4px;
  color: #1f4fd8;
}

/* ================================
   INPUTS
================================ */
.reg-form input,
.reg-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 12px;

  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.12);
  outline: none;

  transition: border .2s ease, box-shadow .2s ease;
}

.reg-form input:focus,
.reg-form textarea:focus {
  border-color: #1f4fd8;
  box-shadow: 0 0 0 3px rgba(31,79,216,0.18);
}

/* ================================
   PHONE INPUT (intl-tel-input)
================================ */


/* ================================
   PASSWORD FIELD
================================ */
.password-field {
  position: relative;
}

.password-field input {
  padding-right: 44px;
}

.toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 15px;
  opacity: 0.5;
}

.toggle-password:hover {
  opacity: 0.9;
}

/* ================================
   PASSWORD METER
================================ */
.password-meter {
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}

.meter-bar {
  height: 100%;
  width: 0%;
  background: #e11d48;
  transition: width .3s ease, background .3s ease;
}

.password-hints {
  margin-top: 6px;
  font-size: 12px;
}

.password-hints p {
  margin: 4px 0;
  color: #64748b;
}

.password-hints p.valid {
  color: #16a34a;
}

/* ================================
   ERROR STATES
================================ */
.field-error {
  margin-top: 4px;
  font-size: 12px;
  color: #dc2626;
  display: none;
}

.field-error.active {
  display: block;
}

/* ================================
   SUBMIT BUTTON
================================ */
.submit-btn {
  margin-top: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #1f4fd8, #3b6df0);
  color: #fff;

  box-shadow: 0 16px 40px rgba(31,79,216,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}

.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 60px rgba(31,79,216,0.6);
}

.submit-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ================================
   SOCIAL LOGIN
================================ */
.social-login {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.social-login button {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  cursor: pointer;

  transition: background .2s ease, transform .2s ease;
}

.social-login button:hover {
  background: rgba(31,79,216,0.08);
  transform: translateY(-1px);
}

.social-login img {
  width: 20px;
  height: 20px;
}

.google-btn {
  border-color: #dadce0;
}

.facebook-btn {
  border-color: #1877f2;
}

/* ================================
   OVERFLOW SAFETY
================================ */
.reg-container,
.reg-form {
  overflow: visible !important;
}

/* =====================================================
   ACUC THEME FIX PACK (DARK + BETTER LIGHT MODE)
   Paste at END of your CSS so it overrides everything.
===================================================== */

/* 1) Stronger, more premium light palette (not washed out) */
body[data-theme="light"] {
  /* background */
  --bg-main: #e9eef8;                 /* was too white (#f5f7fb) */
  --bg-surface: rgba(255,255,255,0.72);
  --bg-soft: rgba(15,23,42,0.06);     /* subtle tint for glass */

  /* text */
  --text-main: #0b1220;
  --text-muted: rgba(15,23,42,0.72);

  /* borders/shadows */
  --border-glass: rgba(15,23,42,0.10);

  /* accents (keep your brand feel, slightly deeper for light mode) */
  --accent-1: #5b5cff;
  --accent-2: #2563eb;
}

/* 2) Background glow in light mode: softer + controlled */
body[data-theme="light"] html,
body[data-theme="light"] body {
  color: var(--text-main);

  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(91,92,255,0.22), transparent 60%),
    radial-gradient(800px 500px at 80% 20%, rgba(37,99,235,0.16), transparent 55%),
    linear-gradient(180deg, var(--bg-main), var(--bg-main));
}

/* 3) FIX: hard-coded whites -> theme variables (this is what caused mismatch) */
body[data-theme="light"] .hero-title,
body[data-theme="light"] .section h2,
body[data-theme="light"] .services-header h2,
body[data-theme="light"] .about-content h2,
body[data-theme="light"] .cta h2,
body[data-theme="light"] .service-card h3 {
  color: var(--text-main) !important;
}

body[data-theme="light"] .app-subtitle,
body[data-theme="light"] .section p,
body[data-theme="light"] .services-header p,
body[data-theme="light"] .about-content p,
body[data-theme="light"] .why-header p,
body[data-theme="light"] .why-card p,
body[data-theme="light"] .service-card p,
body[data-theme="light"] .footer {
  color: var(--text-muted) !important;
}

/* 4) Glass surfaces for light mode (keep same theme, just tuned) */
body[data-theme="light"] .nav-pill,
body[data-theme="light"] .app-signin,
body[data-theme="light"] .app-nav2,
body[data-theme="light"] .app-search,
body[data-theme="light"] .section,
body[data-theme="light"] .service-card,
body[data-theme="light"] .why-card,
body[data-theme="light"] .stat-card {
  background: rgba(255,255,255,0.62) !important;
  border-color: var(--border-glass) !important;
  box-shadow: 0 18px 70px rgba(15,23,42,0.12) !important;
  color: var(--text-main) !important;
}

/* 5) Nav pills hover/active in light mode: visible but not harsh */
body[data-theme="light"] .nav-pill:hover {
  background: rgba(255,255,255,0.78) !important;
}

body[data-theme="light"] .nav-pill.is-active {
  background: linear-gradient(
    180deg,
    rgba(91,92,255,0.16),
    rgba(37,99,235,0.08)
  ) !important;

  border-color: rgba(91,92,255,0.34) !important;

  box-shadow:
    0 0 0 1px rgba(91,92,255,0.22),
    0 14px 48px rgba(91,92,255,0.22),
    inset 0 0 18px rgba(37,99,235,0.10) !important;

  color: var(--text-main) !important;
}

/* 6) Accent text stays premium in light mode */
body[data-theme="light"] .accent,
body[data-theme="light"] .services-header .accent,
body[data-theme="light"] .about-content .accent,
body[data-theme="light"] .why-header .accent,
body[data-theme="light"] .stat-card strong {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 7) Search bar text/placeholder fixes (was white-on-light) */
body[data-theme="light"] .app-search input {
  color: var(--text-main) !important;
}
body[data-theme="light"] .app-search input::placeholder {
  color: rgba(15,23,42,0.45) !important;
}
body[data-theme="light"] .search-btn {
  color: rgba(15,23,42,0.65) !important;
}
body[data-theme="light"] .search-btn:hover {
  color: rgba(15,23,42,0.95) !important;
}

/* 8) Scroll icon + subtle hero overlay adjustment */
body[data-theme="light"] .scroll-down {
  color: rgba(15,23,42,0.55) !important;
}
body[data-theme="light"] .scroll-down:hover {
  color: rgba(15,23,42,0.9) !important;
}

/* your hero overlay is tuned for dark — reduce it in light */
body[data-theme="light"] .app-center.hero::after {
  opacity: 0.18;
}

/* 9) CTA: keep it “dark premium” even in light mode (nice contrast block) */
body[data-theme="light"] .cta {
  background: linear-gradient(135deg, #151a33, #0f1530) !important;
}
body[data-theme="light"] .cta h2 {
  color: #ffffff !important;
}

/* =====================================================
   ACUC – DARK THEME RESTORE (PREMIUM)
   Fixes washed-out dark mode without touching light mode
===================================================== */

/* 1) Lock dark palette */
body:not([data-theme="light"]) {
  --bg-main: #0b1020;
  --bg-soft: rgba(255,255,255,0.08);
  --bg-glass: rgba(255,255,255,0.10);

  --text-main: #ffffff;
  --text-muted: rgba(255,255,255,0.75);

  --border-glass: rgba(255,255,255,0.18);

  --accent-1: #8a5cff;
  --accent-2: #487cff;
}

/* 2) Restore deep dark background + glow */
body:not([data-theme="light"]) html,
body:not([data-theme="light"]) body {
  color: var(--text-main);

  background:
    radial-gradient(
      1200px 600px at 20% -10%,
      rgba(138,92,255,0.35),
      transparent 60%
    ),
    radial-gradient(
      800px 500px at 80% 20%,
      rgba(72,124,255,0.25),
      transparent 55%
    ),
    linear-gradient(180deg, #0b1020 0%, #0f172a 100%);
}

/* 3) Dark glass surfaces – higher contrast */
body:not([data-theme="light"]) .nav-pill,
body:not([data-theme="light"]) .app-signin,
body:not([data-theme="light"]) .app-nav2,
body:not([data-theme="light"]) .app-search,
body:not([data-theme="light"]) .section,
body:not([data-theme="light"]) .service-card,
body:not([data-theme="light"]) .why-card,
body:not([data-theme="light"]) .stat-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.04)
    ) !important;

  border-color: rgba(255,255,255,0.20) !important;

  box-shadow:
    0 28px 90px rgba(0,0,0,0.65) !important;

  color: var(--text-main) !important;
}

/* 4) Restore white hero text (was dulled) */
body:not([data-theme="light"]) .hero-title,
body:not([data-theme="light"]) .section h2,
body:not([data-theme="light"]) .services-header h2,
body:not([data-theme="light"]) .about-content h2,
body:not([data-theme="light"]) .cta h2,
body:not([data-theme="light"]) .service-card h3 {
  color: #ffffff !important;
}

body:not([data-theme="light"]) .app-subtitle,
body:not([data-theme="light"]) .section p,
body:not([data-theme="light"]) .services-header p,
body:not([data-theme="light"]) .about-content p,
body:not([data-theme="light"]) .why-header p,
body:not([data-theme="light"]) .why-card p {
  color: rgba(255,255,255,0.75) !important;
}

/* 5) Nav active glow – restore punch */
body:not([data-theme="light"]) .nav-pill.is-active {
  background:
    linear-gradient(
      180deg,
      rgba(138,92,255,0.45),
      rgba(72,124,255,0.25)
    ) !important;

  border-color: rgba(138,92,255,0.65) !important;

  box-shadow:
    0 0 0 1px rgba(138,92,255,0.55),
    0 18px 60px rgba(138,92,255,0.65),
    inset 0 0 28px rgba(138,92,255,0.35) !important;
}

/* 6) Search bar contrast fix */
body:not([data-theme="light"]) .app-search input {
  color: #ffffff !important;
}
body:not([data-theme="light"]) .app-search input::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* 7) Restore hero glow intensity */
body:not([data-theme="light"]) .app-center.hero::after {
  opacity: 1;
}

/* =====================================================
   MOBILE NAV FIX – PREVENT SIGN-IN OVERLAP
===================================================== */

@media (max-width: 640px) {

  /* 1. Make the main nav wrap instead of overflow */
  .app-nav2 {
    max-width: calc(100% - 24px);
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* 2. Move Sign In into the same visual row */
  .app-nav {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 100001;
  }

  /* 3. Make Sign In full-width & touch-friendly */
  .app-signin {
    min-width: 160px;
    text-align: center;
    padding: 12px 20px;
  }
}

/* =====================================================
   MOBILE NAV — REMOVE BLOB + FORCE 1-ROW SCROLL
   Paste at END of CSS
===================================================== */
@media (max-width: 640px) {

  /* 1) Kill the big container bubble */
  .app-nav2{
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;

    padding: 0 !important;            /* remove blob padding */
    border: 0 !important;             /* remove blob border */
    background: transparent !important;/* remove blob bg */
    box-shadow: none !important;       /* remove blob shadow */
    backdrop-filter: none !important;  /* remove blob blur */

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    flex-wrap: nowrap !important;      /* DO NOT WRAP */
    overflow-x: auto !important;       /* allow swipe */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .app-nav2::-webkit-scrollbar { display: none !important; }

  /* 2) Prevent pills from shrinking/wrapping internally */
  .app-nav2 .nav-pill{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* 3) Make chips slightly tighter for mobile */
  .nav-pill{
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
  }

  /* 4) Optional: subtle fade edges (nice UX hint) */
  .app-nav2{
    -webkit-mask-image: linear-gradient(to right,
      transparent 0px,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0px,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%);
  }

  /* 5) Keep hero from hiding under nav */
  .app-center.hero{
    padding-top: 160px !important;
  }
}
/* =====================================================
   FINAL MOBILE NAV — COMPACT, TOP, NO BLOB, NO BOTTOM CTA
===================================================== */
@media (max-width: 640px) {

  /* 1. Merge nav areas visually */
  .app-nav,
  .app-nav2 {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 100000;
  }

  /* 2. Flatten the container (NO blob) */
  .app-nav2 {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;

    padding: 6px 8px !important;
    border-radius: 16px !important;

    background: rgba(255,255,255,0.35) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;

    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .app-nav2::-webkit-scrollbar {
    display: none !important;
  }

  /* 3. Make pills SMALLER */
  .nav-pill,
  .app-signin {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* 4. Put Sign In BACK IN THE BAR */
  .app-nav {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
  }

  /* 5. Theme toggle compact */
  .theme-toggle {
    padding: 0 10px !important;
  }

  /* 6. Prevent hero from hiding behind nav */
  .app-center.hero {
    padding-top: 120px !important;
  }
}

/* =====================================================
   MOBILE NAV FIX – FINAL & SAFE
===================================================== */

@media (max-width: 768px) {

  /* NAV CONTAINER */
  .app-nav2 {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);

    padding: 10px;
    gap: 8px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    border-radius: 22px;
    z-index: 100000;
  }

  /* NAV PILLS – SMALLER */
  .nav-pill {
    font-size: 13px;
    padding: 8px 14px;
    height: auto;
    white-space: nowrap;
  }

  /* THEME TOGGLE – ICON ONLY */
  .theme-toggle {
    padding: 8px;
    width: 36px;
    height: 36px;
  }

  /* HERO MUST START BELOW NAV */
  .app-center.hero {
    padding-top: 180px !important;
  }
}
/* =====================================================
   LIGHT MODE READABILITY FIX
===================================================== */

body[data-theme="light"] .stat-card span,
body[data-theme="light"] .about-content p,
body[data-theme="light"] .section p {
  color: rgba(15,23,42,0.75) !important;
}/* End custom CSS */