/* ============================================================
   LIQUID GLASS THEME — WebXDesign Studio
   Glassmorphism overlay on top of main.css + navbar.css
   Applies to homepage only (index.html)
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. GLOBAL BACKGROUND  — rich gradient orb field
   ────────────────────────────────────────────────────────────*/
body {
  background: #07040f !important;
  overflow-x: hidden;
}

/* Fixed solid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -10;
  background: #07040f;
  pointer-events: none;
}

/* Replace the solid hero background */
.hero::before { background: transparent !important; }
.hero__grid {
  background-image: radial-gradient(rgba(255,255,255,0.028) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* ────────────────────────────────────────────────────────────
   2. WATER DROPS — hero decorative liquid elements
   ────────────────────────────────────────────────────────────*/
.water-drop {
  position: fixed;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(120, 200, 255, 0.08) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0,   0,   0,   0.12),
    0 4px 16px rgba(100, 200, 255, 0.10);
  pointer-events: none;
  z-index: -1;
  animation: waterDropFall var(--drop-dur, 12s) ease-in-out var(--drop-delay, 0s) infinite;
  will-change: transform;
}

/* Inner specular highlight */
.water-drop::before {
  content: '';
  position: absolute;
  top: 14%;
  left: 20%;
  width: 35%;
  height: 22%;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  filter: blur(3px);
  transform: rotate(-20deg);
}

/* Tiny secondary highlight */
.water-drop::after {
  content: '';
  position: absolute;
  bottom: 22%;
  right: 18%;
  width: 20%;
  height: 12%;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  filter: blur(2px);
}

@keyframes waterDropFall {
  0%   {
    transform: translateY(var(--drop-start-y, -60px)) translateX(0px) scale(1) rotate(0deg);
    opacity: 0;
  }
  8%   { opacity: 1; }
  45%  { transform: translateY(calc(var(--drop-start-y, -60px) + 40vh)) translateX(var(--drop-sway, 18px)) scale(1.04) rotate(4deg); }
  90%  {
    transform: translateY(calc(var(--drop-start-y, -60px) + 82vh)) translateX(calc(var(--drop-sway, 18px) * -0.5)) scale(0.96) rotate(-3deg);
    opacity: 0.7;
  }
  100% {
    transform: translateY(calc(var(--drop-start-y, -60px) + 100vh)) translateX(0px) scale(0.9) rotate(0deg);
    opacity: 0;
  }
}

/* ────────────────────────────────────────────────────────────
   3. NAVBAR — enhanced frosted glass
   ────────────────────────────────────────────────────────────*/
:root {
  --nav-glass:        rgba(7, 4, 15, 0.45) !important;
  --nav-glass-scroll: rgba(7, 4, 15, 0.72) !important;
  --border-subtle:    rgba(255, 255, 255, 0.10) !important;
}

.navbar {
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.navbar.scrolled {
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 60px rgba(100, 180, 255, 0.06) !important;
}

/* ────────────────────────────────────────────────────────────
   4. FOUNDER MESSAGE CARD — glass panel
   ────────────────────────────────────────────────────────────*/
.founder-msg-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 80px rgba(255, 170, 120, 0.06) !important;
}

/* ────────────────────────────────────────────────────────────
   5. HERO  — glass text panel + enhanced orbs
   ────────────────────────────────────────────────────────────*/
.hero__inner {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 32px;
  padding: 32px 24px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Soften orbs with vibrant liquid colors */
.hero__orb--1 {
  background: radial-gradient(circle, rgba(255, 160, 100, 0.20) 0%, rgba(255, 100, 160, 0.12) 50%, transparent 70%) !important;
}
.hero__orb--2 {
  background: radial-gradient(circle, rgba(40, 210, 210, 0.16) 0%, rgba(80, 160, 255, 0.10) 50%, transparent 70%) !important;
}
.hero__orb--3 {
  background: radial-gradient(circle, rgba(100, 230, 160, 0.14) 0%, rgba(255, 200, 80, 0.10) 50%, transparent 70%) !important;
}

/* Badge glass */
.hero__badge {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: rgba(16, 185, 129, 0.18) !important;
  backdrop-filter: blur(8px) !important;
}

/* Hosting pill glass */
.hero__hosting {
  background: rgba(139, 92, 246, 0.07) !important;
  border-color: rgba(139, 92, 246, 0.18) !important;
  backdrop-filter: blur(8px) !important;
}

/* ────────────────────────────────────────────────────────────
   6. BUTTONS — glass ghost & outline variants
   ────────────────────────────────────────────────────────────*/
.btn--outline {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}

/* ────────────────────────────────────────────────────────────
   7. MARQUEE — subtle glass strip
   ────────────────────────────────────────────────────────────*/
.marquee-section {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ────────────────────────────────────────────────────────────
   8. WHAT'S INCLUDED — glass cards
   ────────────────────────────────────────────────────────────*/
.included-item {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.28s ease, border-color 0.28s ease,
              box-shadow 0.28s ease, background 0.28s ease !important;
}
.included-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 40px rgba(100, 210, 255, 0.08) !important;
  transform: translateY(-4px) !important;
}

/* ────────────────────────────────────────────────────────────
   9. STATS — glass grid
   ────────────────────────────────────────────────────────────*/
.stats-grid {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.stat-card {
  background: rgba(255, 255, 255, 0.03) !important;
  transition: background 0.2s !important;
}
.stat-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* ────────────────────────────────────────────────────────────
   10. SERVICES — glass cards with vivid hover
   ────────────────────────────────────────────────────────────*/
.service-card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.service-card:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 60px rgba(100, 200, 255, 0.08) !important;
}
.service-card--cta {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.22) !important;
}

/* ────────────────────────────────────────────────────────────
   11. PROCESS STEPS — glass number badges
   ────────────────────────────────────────────────────────────*/
.process-step__num {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* ────────────────────────────────────────────────────────────
   12. PRICING — glass cards
   ────────────────────────────────────────────────────────────*/
.price-card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.price-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 60px rgba(100, 180, 255, 0.07) !important;
}
.price-card--popular {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.15),
    0 32px 72px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 80px rgba(139, 92, 246, 0.10) !important;
}
.price-card--popular:hover {
  background: rgba(139, 92, 246, 0.12) !important;
}

/* ────────────────────────────────────────────────────────────
   13. TESTIMONIALS — glass cards
   The testi-card uses gradient-bg as a border + opaque ::after fill.
   We replace both so the card becomes glass.
   ────────────────────────────────────────────────────────────*/
.testi-card {
  /* Keep thin gradient border by keeping the animated bg very subtle */
  background: linear-gradient(
    120deg,
    rgba(167,139,250,0.45),
    rgba(240,171,252,0.35),
    rgba(103,232,249,0.35),
    rgba(52,211,153,0.30),
    rgba(245,158,11,0.30),
    rgba(244,114,182,0.35),
    rgba(167,139,250,0.45)
  ) !important;
  background-size: 300% 300% !important;
}
/* Replace the solid dark inner fill with a glass surface */
.testi-card::after {
  background: rgba(8, 5, 20, 0.55) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

/* ────────────────────────────────────────────────────────────
   14. CTA BANNER — glass gradient panel
   ────────────────────────────────────────────────────────────*/
.cta-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.02) !important;
}
.cta-banner__inner {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 28px;
  padding: 64px 48px;
  box-shadow:
    0 16px 64px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 100px rgba(255, 160, 100, 0.06);
}

.cta-banner__orb--1 {
  background: radial-gradient(circle, rgba(255, 160, 100, 0.20) 0%, transparent 70%) !important;
}
.cta-banner__orb--2 {
  background: radial-gradient(circle, rgba(80, 210, 210, 0.16) 0%, transparent 70%) !important;
}

/* ────────────────────────────────────────────────────────────
   15. CONTACT FORM — glass card
   The form card uses gradient-border + opaque ::after fill.
   Override both layers to get a glass surface.
   ────────────────────────────────────────────────────────────*/
.contact-3d__card {
  /* Keep the animated gradient border but at reduced opacity */
  background: linear-gradient(
    120deg,
    rgba(167,139,250,0.5),
    rgba(240,171,252,0.4),
    rgba(103,232,249,0.4),
    rgba(52,211,153,0.35),
    rgba(245,158,11,0.35),
    rgba(244,114,182,0.4),
    rgba(167,139,250,0.5)
  ) !important;
  background-size: 300% 300% !important;
}
/* Glass inner fill instead of solid dark */
.contact-3d__card::after {
  background: rgba(8, 5, 20, 0.50) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
}

.contact-3d__ambient--1 {
  background: radial-gradient(circle, rgba(255, 160, 100, 0.10) 0%, transparent 70%) !important;
}
.contact-3d__ambient--2 {
  background: radial-gradient(circle, rgba(80, 200, 220, 0.10) 0%, transparent 70%) !important;
}

/* Form input glass */
.cf-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}
.cf-input:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  outline: none !important;
}

/* ────────────────────────────────────────────────────────────
   16. QR SECTION — glass card
   ────────────────────────────────────────────────────────────*/
.qr-card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

/* ────────────────────────────────────────────────────────────
   17. QR BADGES — glass pills
   ────────────────────────────────────────────────────────────*/
.qr-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ────────────────────────────────────────────────────────────
   18. SOCIAL ORB BUTTONS — glass spheres
   ────────────────────────────────────────────────────────────*/
.orb {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ────────────────────────────────────────────────────────────
   19. FOOTER — glass dark panel
   ────────────────────────────────────────────────────────────*/
.footer {
  background: rgba(7, 4, 15, 0.6) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer__bg-glow--1 {
  background: radial-gradient(circle, rgba(255, 160, 100, 0.08) 0%, transparent 70%) !important;
}
.footer__bg-glow--2 {
  background: radial-gradient(circle, rgba(80, 210, 220, 0.06) 0%, transparent 70%) !important;
}

.footer__grid-wrap {
  background: rgba(255, 255, 255, 0.015) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer__bottom {
  background: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ────────────────────────────────────────────────────────────
   20. SECTION EYEBROW PILLS — glass tint
   ────────────────────────────────────────────────────────────*/
.section-eyebrow {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.18) !important;
  backdrop-filter: blur(8px) !important;
}

/* ────────────────────────────────────────────────────────────
   21. GLASS SHIMMER UTILITY — subtle top-edge highlight
       applied automatically to all glass panels
   ────────────────────────────────────────────────────────────*/
.included-item,
.service-card,
.price-card,
.stat-card,
.process-step__num,
.testi-card,
.qr-card,
.contact-3d__card,
.founder-msg-card {
  position: relative;
}
/* Top-edge shimmer line via pseudo — layered on top of existing ::before/::after */
.included-item::after,
.qr-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.30) 50%,
    transparent 100%
  );
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

/* ────────────────────────────────────────────────────────────
   22. FOLLOW SECTION  — glass orb accents
   ────────────────────────────────────────────────────────────*/
.follow-section {
  background: rgba(255, 255, 255, 0.015) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ────────────────────────────────────────────────────────────
   23. FOOTER HERO  — glass inner
   ────────────────────────────────────────────────────────────*/
.footer__hero {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ────────────────────────────────────────────────────────────
   24. SECTION ALT backgrounds — glass tint instead of solid
   ────────────────────────────────────────────────────────────*/
.section--alt {
  background: rgba(255, 255, 255, 0.02) !important;
}
.section--alt::before {
  background: radial-gradient(
    ellipse 70% 50% at 30% 0%,
    rgba(100, 180, 255, 0.05) 0%,
    transparent 60%
  ) !important;
}

/* ────────────────────────────────────────────────────────────
   25. PORTFOLIO CARDS — glass overlays (already have them,
       just richer glass on hover)
   ────────────────────────────────────────────────────────────*/
.port-card__overlay {
  background: linear-gradient(
    to top,
    rgba(7, 4, 15, 0.88) 0%,
    rgba(7, 4, 15, 0.20) 50%,
    transparent 100%
  ) !important;
}
.port-card__btn {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ────────────────────────────────────────────────────────────
   26. PRICING NOTE & LINK
   ────────────────────────────────────────────────────────────*/
.pricing-note { color: #64748b; }

/* ────────────────────────────────────────────────────────────
   27. MOBILE — keep glass readable at small sizes
   ────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .cta-banner__inner {
    padding: 40px 24px !important;
    border-radius: 20px !important;
  }
  .hero__inner {
    padding: 24px 16px !important;
  }
}

@media (max-width: 480px) {
  .cta-banner__inner {
    padding: 28px 16px !important;
    border-radius: 16px !important;
  }
  .hero__inner {
    padding: 20px 12px !important;
    border-radius: 16px !important;
  }
  /* Reduce blur intensity on low-power mobile devices */
  .glass-card,
  .service-card,
  .price-card,
  .testi-card,
  .contact-3d__card {
    backdrop-filter: blur(12px) !important;
  }
}