/* ===================================
   MOBILE ROTATION PREVENTION (PHONES ONLY)
   =================================== */

/* Target only actual mobile devices in landscape */
@media screen and (orientation: landscape) and (max-width: 932px) and (max-height: 600px) and (pointer: coarse) and (hover: none) {
  body::before {
    content: 'Please rotate your device to portrait mode for the best experience';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.99);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-align: center;
    z-index: 99999;
    padding: 2rem;
    box-sizing: border-box;
  }

  /* Hide all content when in landscape on phones */
  body > *:not(::before) {
    display: none !important;
  }
}

/* Target desktop browsers resized to small landscape dimensions */
@media screen and (orientation: landscape) and (max-width: 932px) and (max-height: 600px) and (pointer: fine) and (hover: hover) {
  body::before {
    content: 'This website is optimized for larger screens or portrait mobile viewing';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.99);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-align: center;
    z-index: 99999;
    padding: 2rem;
    box-sizing: border-box;
  }

  /* Hide all content when desktop window is too small */
  body > *:not(::before) {
    display: none !important;
  }
}

/* Fallback for older mobile devices that might not support pointer/hover queries */
@supports not (pointer: coarse) {
  @media screen and (orientation: landscape) and (max-width: 932px) and (max-height: 600px) and (-webkit-touch-callout: none) {
    body::before {
      content: 'Please rotate your device to portrait mode for the best experience';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.99);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      text-align: center;
      z-index: 99999;
      padding: 2rem;
      box-sizing: border-box;
    }

    body > *:not(::before) {
      display: none !important;
    }
  }
}

/* Additional viewport lock for mobile devices */
@media screen and (max-width: 932px) and (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
}
/* Typography is handled by app-density.css */
/* -----------------------------------
   Reset & Base Styles
   ----------------------------------- */
*,
body,
html {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Exo', sans-serif;
  font-display: swap;
  overflow-x: hidden;
  background-color: #0a0a0a; /* Dark base for liquid glass */
}

body,
html {
  font-family: 'Exo', sans-serif;
  overscroll-behavior: none;
  height: 100%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

/* -----------------------------------
      Variables
      ----------------------------------- */
:root {
  --headline-font-family: 'Bebas Neue', sans-serif;
  --headline-font-size: 5rem;
  --headline-text-shadow: 2px 2px 1px black;
  --headline-letter-spacing: 3px;
  --primary-color: #5dade2;
  --secondary-color: #d3d3d3;

  /* Dark mode colors (default) */
  --bg-primary: #0a0a0a;
  --bg-secondary: #151515;
  --bg-tertiary: #0f0f0f;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-purple: #818cf8;
  --accent-green: #10b981;
  --border-color: rgba(93, 173, 226, 0.3);
}

/* Light mode colors */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --accent-purple: #5b21b6;
  --accent-green: #059669;
  --border-color: rgba(93, 173, 226, 0.5);
}

/* -----------------------------------
      Form Elements
      ----------------------------------- */
input::placeholder,
textarea::placeholder {
  font-size: 14px;
}

/* -----------------------------------
      Layout
      ----------------------------------- */
.container {
  display: flex;
  height: 100%;
}

/* -----------------------------------
      Button Styling - MOVED TO buttons.css
      All button styles now centralized in buttons.css
      ----------------------------------- */

/* -----------------------------------
      Component Animations
      ----------------------------------- */
.service-item-back,
.service-item-inner.rotate,
.service-item:hover .service-item-inner {
  transform: rotatex(180deg);
}

/* -----------------------------------
      Card & Form Styling
      ----------------------------------- */
.journey-card,
.pricing-card,
.submission-form {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.phone-number a:hover {
  color: #000;
}

/* -----------------------------------
      Font Faces
      ----------------------------------- */
/* Bebas Neue */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-display: swap;
}

/* Exo - All Required Weights */
@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/* -----------------------------------
      Mobile Background
      ----------------------------------- */
/* Hide the mobile background by default */
.mobile-background {
  display: none;
}

/* ===================================
   SIDEBAR (CURRENTLY NOT IN USE)
   =================================== */
@media (max-width: 1032px) {
  .fixed-sidebar {
    display: none;
  }
}
.sidebar,
.sidebar::before {
  height: 100%;
  background: url('https://storage.googleapis.com/background-vid/sidebar-bg.webp')
    no-repeat left center;
  background-size: cover;
  background-position: left center;
}

.sidebar {
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 40%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.7);
}

/* ------------------------------------
     Logo Animation
     ------------------------------------ */
/* Apply Animation to Logo */
.responsive-logo {
  margin-top: 5rem;
  max-width: 400px;
  height: auto;
  display: block;
  animation: fadeIn 1s ease-in-out forwards;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.9));
}

/* Fade-In Keyframes */
@keyframes fadeIn {
  from {
    transform: scale(0.95);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ------------------------------------
     Sidebar Content
     ------------------------------------ */
.phone-number a::before,
.sidebar-video {
  position: absolute;
  height: 100%;
  z-index: -1;
  left: 0;
}

.sidebar-video {
  top: 0;
  width: 100%;
  object-fit: cover;
}

.phone-number a,
.sidebar-content,
.sidebar-content > * {
  color: #fff;
  z-index: 1;
  position: relative;
}

.sidebar-content {
  margin: 0 1rem;
  top: 11%;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.call-now,
.sidebar-content > :last-child {
  margin-bottom: 0;
}

.sidebar-content {
  margin: 9rem 0 2rem;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 2px;
}

.sidebar-content .company-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 7rem;
  font-weight: 400;
  text-align: center;
  margin: 0 2rem;
}

.sidebar-content .subheading {
  margin: -15rem 0 auto;
  font-size: 2rem;
  font-weight: 200;
  position: absolute;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sidebar-content .subheading.active {
  opacity: 1;
  transform: translateY(0);
}

.description {
  margin: 4rem 2rem 2rem;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 2px;
}

/* ------------------------------------
     Phone Number
     ------------------------------------ */
.phone-number {
  position: relative;
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 200;
  padding-bottom: 12rem;
}

.phone-number a {
  padding: 0 5px;
  text-decoration: none;
  transition: color 0.3s;
}

.phone-number a::before {
  content: '';
  bottom: 0;
  width: 0;
  background-color: #5dade2;
  animation: 1s forwards hideBackground;
}

@keyframes hideBackground {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

@keyframes showBackground {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.phone-number a:hover::before {
  animation: 0.3s forwards showBackground;
}

/* ------------------------------------
     Media Queries
     ------------------------------------ */
/* Mobile Adjustments */
@media (max-width: 500px) {
  .responsive-logo {
    margin-top: 1rem;
    max-width: 300px;
    height: auto;
    margin-bottom: 2rem;
  }
}

/* Adjustments for smaller screens */
@media (max-width: 1032px) {
  .sidebar {
    position: relative;
    width: 100%;
    padding: 4rem 1rem;
    min-height: 120vh;
    box-sizing: border-box;
  }

  .sidebar-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 4rem 1rem;
  }

  .phone-number {
    padding-bottom: 4rem;
    text-align: center;
  }

  .phone-number a {
    font-size: 1.8rem;
  }
}

@media (max-width: 1100px) {
  .sidebar-content .company-name {
    font-size: 5rem;
  }
}

@media screen and (max-width: 768px) {
  .sidebar-content .subheading {
    font-size: 1.5rem;
    top: 22rem;
  }
}

@media screen and (max-width: 1100px) {
  .sidebar-content .subheading {
    font-size: 1.5rem;
    top: 22rem;
  }
}

@media screen and (max-width: 1024px) {
  .sidebar-content .subheading {
    font-size: 1.5rem;
    top: 26rem;
  }
}

@media screen and (max-width: 500px) {
  .sidebar-content .subheading {
    font-size: 1.5rem;
    top: 22rem;
  }
}

/* ===================================
 MAIN CONTENT - DARK THEME
 =================================== */
/* Screen reader only - for SEO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   BACKGROUND LAYER SYSTEM
   =========================================================

   Layer Stack (bottom to top):
   ─────────────────────────────────────────────────────────
   z-index: -1  │ body background (fallback)
   z-index:  0  │ Layer 1: Grid Pattern (.main-content::before)
   z-index:  1  │ Layer 2: Dark Overlay + Color Gradients (.main-content::after)
   z-index:  2+ │ Layer 3: Content (section-container, hero-wrapper, etc.)

   How Liquid Glass Works:
   ─────────────────────────────────────────────────────────
   - .main-content has transparent background
   - Liquid glass cards use backdrop-filter to blur Layers 1 & 2
   - The grid + gradients show through the frosted glass effect

   To Replicate This System:
   ─────────────────────────────────────────────────────────
   1. Set body background-color as fallback
   2. Create ::before for grid/pattern layer (z-index: 0)
   3. Create ::after for overlays/gradients (z-index: 1)
   4. Keep main container transparent
   5. Set content z-index: 2+
   6. Apply liquid glass (backdrop-filter) to cards

   ========================================================= */

/* Layer 0: Main Content Container (transparent) */
.main-content {
  width: 100%;
  padding: 0;
  overflow-x: clip;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  background-color: transparent; /* IMPORTANT: Must be transparent for liquid glass */
  color: var(--text-primary);
}

/* Layer 1: Grid Pattern Background */
.main-content::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  /* Dark base color */
  background-color: #0a0a0a;

  /* Grid pattern image - optimized */
  background-image: url('https://storage.googleapis.com/background-vid/Main%20Content/gridbg3-optimized.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;

  /* Performance optimization */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Layer 2: Dark Overlay + Soft Color Gradients */
.main-content::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;

  background:
    /* Purple glow - left side */
    radial-gradient(
      circle at 20% 50%,
      rgba(129, 140, 248, 0.15) 0%,
      transparent 40%
    ),
    /* Pink glow - top right */
    radial-gradient(
      circle at 80% 20%,
      rgba(236, 72, 153, 0.1) 0%,
      transparent 40%
    ),
    /* Blue glow - bottom center */
    radial-gradient(
      circle at 50% 80%,
      rgba(59, 130, 246, 0.08) 0%,
      transparent 50%
    ),
    /* Dark vignette overlay */
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.6) 0%,
      rgba(10, 10, 10, 0.8) 100%
    );
}

/* Layer 3: Content Containers */
.section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* =========================================================
   BACKGROUND LAYER SYSTEM - LIGHT MODE
   ========================================================= */

/* Light Mode: Hide dark grid, use CSS grid pattern instead */
[data-theme="light"] .main-content::before {
  display: none;
}

/* Light Mode: Softer color gradients */
[data-theme="light"] .main-content::after {
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(129, 140, 248, 0.05) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(236, 72, 153, 0.03) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(59, 130, 246, 0.03) 0%,
      transparent 50%
    );
    /* No dark overlay in light mode */
}

/* Hero Wrapper - Two Column Layout */
.hero-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
  z-index: 2; /* Above gradient overlay */
}

@media (max-width: 1032px) {
  .hero-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 0 60px;
  }
}

/* Hero Header Styling */
.hero-header {
  text-align: left;
  position: relative;
  z-index: 1;
  animation: heroFadeIn 1s ease-out;
  min-width: 0;
}

@media (max-width: 1032px) {
  .hero-header {
    text-align: center;
  }
}

.hero-tag-wrapper {
  margin-bottom: 30px;
  margin-top: 40px;
}

@media (max-width: 1032px) {
  .hero-tag-wrapper {
    margin-top: 120px;
  }
}

.hero-tag {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000;
  background: radial-gradient(ellipse at 30% 30%, #00ffff, #00d4ff 50%, #00a8cc);
  padding: 10px 24px;
  border-radius: 30px;
  border: 2px solid rgba(93, 173, 226, 0.4);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(0, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.hero-tag:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 12px rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 255, 255, 0.6);
}

@keyframes tagGlow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(129, 140, 248, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.5);
  }
}

.title-wrapper {
  margin-bottom: 30px;
}

.hero-title-top {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
}

.hero-title-main {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  margin: 10px 0 0 0;
  line-height: 1.2;
  position: relative;
  background: linear-gradient(
    135deg,
    #818cf8 0%,
    #ec4899 25%,
    #3b82f6 50%,
    #10b981 75%,
    #818cf8 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease-in-out infinite,
    float 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #ffffff;
  max-width: 700px;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 1032px) {
  .hero-subtitle {
    margin: 0 auto;
  }
}

/* Hero Form Styling */
.hero-form {
  position: relative;
  z-index: 1;
  margin-top: 0;
  animation: heroFadeIn 1.2s ease-out;
  min-width: 0;
  max-width: 615px;
}

/* Center form on wrapped screens */
@media (max-width: 1032px) {
  .hero-form {
    margin: 0 auto;
  }

  .hero-form-title,
  .hero-form-subtitle {
    text-align: center !important;
  }
}

.hero-form-container {
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 16px;
  padding: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}

[data-theme="light"] .hero-form-container {
  background: transparent;
  box-shadow: none;
}

.hero-form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  animation: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.hero-form-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px 0;
  text-align: center;
}

.hero-form-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
  text-align: center;
  line-height: 1.5;
}

.hero-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-contact-form input,
.hero-contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1rem; /* 16px minimum to prevent iOS zoom */
  font-family: 'Exo', sans-serif;
  transition: all 0.3s ease;
}

[data-theme="light"] .hero-contact-form input,
[data-theme="light"] .hero-contact-form textarea {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.hero-contact-form input:focus,
.hero-contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.1);
  background: rgba(30, 30, 30, 0.95);
}

[data-theme="light"] .hero-contact-form input:focus,
[data-theme="light"] .hero-contact-form textarea:focus {
  background: rgba(255, 255, 255, 1);
}


.hero-contact-form input::placeholder,
.hero-contact-form textarea::placeholder {
  color: var(--text-muted);
}

.hero-contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Hero submit button styles moved to buttons.css */

/* AI-Style Form Enhancements */
.hero-form-container.ai-style {
  padding: 24px;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.ai-submission-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ai-form-slider {
  position: relative;
  width: 100%;
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}

.ai-form-slider.slide-left {
  transform: translateX(-100%);
}

.ai-form-screen {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
}

.ai-form-screen.active {
  opacity: 1;
  pointer-events: auto;
}

.ai-form-header {
  margin-bottom: 16px;
  position: relative;
  min-width: 0;
  width: 100%;
}

.ai-back-button {
  position: absolute;
  right: 0;
  top: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.ai-back-button:hover {
  background: rgba(93, 173, 226, 0.1);
  color: var(--primary-color);
  transform: translateX(2px);
}

.ai-form-header .hero-form-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: left;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #5dade2 0%, #7fb3d5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .ai-form-header .hero-form-title {
  background: linear-gradient(135deg, #2874a6 0%, #5dade2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-form-header .hero-form-subtitle {
  text-align: left;
  margin-bottom: 0;
  font-size: 0.95rem;
}

.ai-input-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: #333336;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.3s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 0 5px #1E1E21;
}

[data-theme="light"] .ai-input-wrapper {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 5px rgba(200, 200, 200, 1);
}

.ai-input-wrapper:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 5px #1E1E21, 0 0 0 8px rgba(93, 173, 226, 0.15);
  background: #333336;
}

[data-theme="light"] .ai-input-wrapper:focus-within {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 5px rgba(200, 200, 200, 1), 0 0 0 8px rgba(93, 173, 226, 0.2);
}

.ai-project-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: 'Exo', sans-serif;
  line-height: 1.5;
  resize: none !important;
  padding: 0 !important;
  max-height: 200px;
  overflow-y: auto;
  min-height: 24px;
  box-shadow: none !important;
  min-width: 0;
  width: 100%;
}

.ai-project-input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ai-project-input::placeholder {
  color: var(--text-muted);
}

/* Custom scrollbar for textarea */
.ai-project-input::-webkit-scrollbar {
  width: 4px;
}

.ai-project-input::-webkit-scrollbar-track {
  background: transparent;
}

.ai-project-input::-webkit-scrollbar-thumb {
  background: rgba(93, 173, 226, 0.3);
  border-radius: 2px;
}

.ai-project-input::-webkit-scrollbar-thumb:hover {
  background: rgba(93, 173, 226, 0.5);
}

.ai-submit-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}

.ai-submit-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3);
}

.ai-submit-button:active {
  transform: scale(0.95);
}

.ai-submit-button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  background: radial-gradient(circle at 30% 30%, #00ffff, #00d4ff 50%, #00a8cc);
  transform: none !important;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.ai-submit-button:disabled:hover {
  background: radial-gradient(circle at 30% 30%, #00ffff, #00d4ff 50%, #00a8cc);
  transform: none;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.ai-submit-button i {
  font-size: 20px;
  transition: transform 0.3s ease;
  transform: translate(-2px, 2px);
}

.ai-submit-button:hover i {
  transform: translateX(2px) translateY(-2px);
}

.ai-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.ai-contact-fields input {
  width: 100%;
  padding: 10px 14px;
  margin: 0 !important;
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: 'Exo', sans-serif;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

[data-theme="light"] .ai-contact-fields input {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.ai-contact-fields input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(93, 173, 226, 0.1);
  background: rgba(30, 30, 30, 0.8);
}

[data-theme="light"] .ai-contact-fields input:focus {
  background: rgba(255, 255, 255, 1);
}

.ai-final-submit-button {
  width: 100%;
  padding: 10px 24px;
  margin-top: 4px;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Exo', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
  position: relative;
}

.ai-final-submit-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(0, 255, 255, 0.6);
}

.ai-final-submit-button:active {
  transform: scale(0.98);
}

@media (max-width: 1032px) {
  .hero-form {
    margin-top: 0;
  }

  .hero-form-container {
    padding: 24px 20px;
  }

  .hero-form-container.ai-style {
    padding: 20px 16px;
  }

  .ai-form-header .hero-form-title {
    font-size: 1.5rem;
  }

  .ai-input-wrapper {
    padding: 10px;
  }

  .ai-submit-button {
    width: 36px;
    height: 36px;
  }
}

/* Card Navigation - Enhanced */
.card-navigation {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 60px;
}

@media (min-width: 769px) {
  .card-navigation {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================= */
/* NAV MENU - Liquid Glass Effect            */
/* ========================================= */
.nav-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding: 8px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;

  /* Liquid Glass: tinted gradient - matches navbar */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* Vibrancy: blur + saturate + contrast + brightness */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft shadow */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Nav menu specular highlight */
.nav-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );
  mix-blend-mode: screen;
}

/* Nav menu rim / thickness */
.nav-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -12px 20px rgba(0, 0, 0, 0.10);
}

/* Light theme nav-menu */
[data-theme="light"] .nav-menu {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(245, 248, 255, 0.25) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .nav-menu::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.10) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 65%
    );
}

[data-theme="light"] .nav-menu::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.03) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -12px 20px rgba(0, 0, 0, 0.04);
}

.nav-item {
  position: relative;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-secondary);
  transition: background 0.6s ease, box-shadow 0.6s ease, color 0.3s ease;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  flex: 0 0 auto;
}

.nav-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.nav-text {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--accent-purple);
  background: rgba(129, 140, 248, 0.1);
}

.nav-item:hover .nav-icon {
  transform: scale(1.2);
}

.nav-item.active {
  color: var(--text-primary);
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.2) 0%,
    rgba(236, 72, 153, 0.2) 100%
  );
  box-shadow: 0 4px 20px rgba(129, 140, 248, 0.3);
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #818cf8, transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.nav-item.active::after {
  opacity: 1;
}

/* Responsive text sizing to prevent awkward wrapping */
@media (max-width: 900px) {
  .nav-text {
    font-size: 0.8rem;
  }

  .nav-item {
    padding: 14px 20px;
  }
}

@media (max-width: 850px) {
  .nav-text {
    font-size: 0.75rem;
  }

  .nav-item {
    padding: 12px 18px;
  }
}

/* Force centering when items wrap */
@media (max-width: 768px) {
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, auto));
    justify-content: center;
    gap: 8px;
  }

  .nav-item {
    justify-self: center;
    padding: 12px 16px;
  }

  .nav-text {
    font-size: 0.7rem;
  }
}

/* Force 2 per row at this breakpoint */
@media (max-width: 664px) {
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 8px;
  }

  .nav-item {
    justify-self: center;
  }
}

/* Section Cards - Enhanced */
.section-cards {
  position: relative;
  height: 540px;
  min-height: 540px;
}

@media (min-width: 586px) and (max-width: 768px) {
  .section-cards {
    height: 370px;
    min-height: 370px;
  }
}

/* ========================================= */
/* HERO NAV CARDS - Liquid Glass Effect      */
/* ========================================= */
.card,
.hero-nav-card {
  display: none;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: all 0.5s ease;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 540px;
  min-height: 540px;
  max-height: 540px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;

  /* Liquid Glass: tinted gradient */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* Vibrancy: blur + saturate + contrast + brightness */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft shadow */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (min-width: 586px) and (max-width: 768px) {
  .card,
  .hero-nav-card {
    height: 370px !important;
    min-height: 370px !important;
    max-height: 370px !important;
  }
}

@media (max-width: 585px) {
  .card,
  .hero-nav-card {
    min-height: 450px;
  }
}

.card.active,
.hero-nav-card.active {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  position: relative;
}

/* Card Glow Effect */
.card-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.15) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card:hover .card-glow,
.hero-nav-card:hover .card-glow {
  opacity: 1;
}

/* Hero card specular highlight */
.card::before,
.hero-nav-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );
  mix-blend-mode: screen;
}

/* Hero card rim / thickness */
.card::after,
.hero-nav-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 25%,
    rgba(0, 0, 0, 0.06) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -20px 30px rgba(0, 0, 0, 0.12);
}

.card-content,
.hero-nav-card-content {
  position: relative;
  padding: 50px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

@media (max-width: 768px) {
  .card-content,
  .hero-nav-card-content {
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

.card h2,
.hero-nav-card h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px 0;
  text-align: center;
  position: relative;
}

.card h2::after,
.hero-nav-card h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #818cf8, transparent);
}

.card p,
.hero-nav-card p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #94a3b8;
  margin: 30px 0;
  text-align: center;
}

@media (max-width: 1032px) {
  .hero-nav-card h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .hero-nav-card p {
    font-size: 14px;
    margin: 15px 0;
  }
}

/* Standards Row - Enhanced */
.standards-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: nowrap;
  overflow: visible;
}

@media (max-width: 768px) {
  .standards-row {
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
  }

  .standard-item {
    flex-shrink: 1;
    min-width: 0;
  }
}

@media (max-width: 500px) {
  .standards-row {
    gap: 10px;
  }
}

.standard-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  flex-shrink: 1;
}

@media (max-width: 768px) {
  .standard-item {
    gap: 8px;
  }
}

.circle-container {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .circle-container {
    width: 50px !important;
    height: 50px !important;
  }
}

@media (max-width: 500px) {
  .circle-container {
    width: 35px !important;
    height: 35px !important;
  }
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #10b981;
  z-index: 2;
}

@media (max-width: 768px) {
  .circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 500px) {
  .circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }
}

.circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 1;
}

.circle-bg {
  fill: none;
  stroke: rgba(16, 185, 129, 0.1);
  stroke-width: 2;
}

.circle-progress {
  fill: none;
  stroke: #10b981;
  stroke-width: 2;
  stroke-dasharray: 175.93;
  stroke-dashoffset: 175.93;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}

.logo-banner-container {
  margin-bottom: 0;
}

.standard-item p {
  font-size: 0.875rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

@media (max-width: 768px) {
  .standard-item p {
    font-size: 0.65rem;
    white-space: nowrap;
  }
}

@media (max-width: 500px) {
  .standard-item p {
    font-size: 0.55rem;
  }
}

/* Performance Stats */
.performance-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  flex: 0 0 auto;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-suffix {
  font-size: 2rem;
  color: #818cf8;
  margin-left: 2px;
}

.stat-label {
  font-size: 0.9rem;
  color: #b0b0b0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

@media (max-width: 768px) {
  .performance-stats {
    gap: 30px;
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .stat-suffix {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }
}

@media (max-width: 617px) {
  .performance-stats {
    gap: 20px;
    margin-top: 25px;
    flex-wrap: nowrap;
  }

  .stat-item {
    flex-shrink: 1;
    min-width: 0;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-suffix {
    font-size: 1rem;
  }

  .stat-label {
    font-size: 0.6rem;
  }
}

@media (max-width: 585px) {
  .performance-stats {
    flex-wrap: wrap;
  }
}

/* Benefits List */
.benefits-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #b0b0b0;
  font-size: 1rem;
  font-weight: 500;
}

.benefit-icon {
  width: 24px;
  height: 24px;
  color: #00ffff;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}

@media (max-width: 768px) {
  .benefits-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .benefit-item {
    font-size: 0.9rem;
  }
}

/* Hero Timeline Container - Custom Solutions Card */
.hero-timeline-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  margin-top: 40px;
  padding: 0 20px;
  flex-wrap: nowrap;
  overflow: visible;
}

/* Single solid line behind all icons */
.hero-timeline-container::before {
  content: '';
  position: absolute;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00ffff, #818cf8);
  z-index: 0;
  transition: width 2s ease;
}

.hero-timeline-container.active::before {
  width: 430px;
}

.hero-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease;
  flex-shrink: 1;
  min-width: 0;
  z-index: 1;
}

.hero-timeline-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #14141e;
  border: 2px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.6s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.hero-timeline-icon svg {
  width: 30px;
  height: 30px;
}

.hero-timeline-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.6s ease;
  white-space: nowrap;
  text-align: center;
}

/* Active states triggered by JavaScript */
.hero-timeline-item.active {
  opacity: 1;
  transform: scale(1);
}

.hero-timeline-item.active .hero-timeline-icon {
  background: #14141e;
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.hero-timeline-item.active .hero-timeline-label {
  color: #00ffff;
}

/* Mobile responsiveness - scale down but keep in one row */
@media (max-width: 768px) {
  .hero-timeline-container {
    padding: 0 10px;
    gap: 50px;
  }

  .hero-timeline-container::before {
    top: 21px;
  }

  .hero-timeline-container.active::before {
    width: 280px;
  }

  .hero-timeline-icon {
    width: 45px;
    height: 45px;
  }

  .hero-timeline-icon svg {
    width: 22px;
    height: 22px;
  }

  .hero-timeline-label {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
  }

  .hero-timeline-item {
    gap: 8px;
  }
}

@media (max-width: 500px) {
  .hero-timeline-container {
    gap: 35px;
  }

  .hero-timeline-container::before {
    top: 16px;
  }

  .hero-timeline-container.active::before {
    width: 200px;
  }

  .hero-timeline-icon {
    width: 35px;
    height: 35px;
  }

  .hero-timeline-icon svg {
    width: 18px;
    height: 18px;
  }

  .hero-timeline-label {
    font-size: 0.6rem;
  }
}

/* Animations */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Media Queries */
@media (max-width: 1032px) {
  .mobile-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://storage.googleapis.com/background-vid/Main%20Content/gridbg3-optimized.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: -2;
    pointer-events: none;
    opacity: 0.4;
  }

  .main-content::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }

  .nav-item {
    flex: 1 1 calc(50% - 8px);
    padding: 12px 16px;
    justify-content: center;
  }

  .nav-item .nav-icon {
    display: none;
  }

  .nav-text {
    font-size: 0.8rem;
  }

  .card h2 {
    font-size: 1.5rem;
  }

  .card p {
    font-size: 1rem;
  }

  .standards-row {
    gap: 20px;
  }

  .circle-container {
    width: 80px;
    height: 80px;
  }

  .circle {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

@media (max-width: 500px) {
  .hero-title-main {
    font-size: 2.5rem;
  }

  .hero-title-top {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .card-content {
    padding: 25px 20px;
  }

  .card h2 {
    font-size: 1.25rem;
  }

  .card p {
    font-size: 0.9rem;
    margin: 20px 0;
  }
}

@media (max-width: 600px) {
  .standards-row {
    gap: 30px;
  }

  .standard-item {
    flex: 1 1 45%;
  }
}

/* ================================
   HOMEPAGE DEVICE DEMO - EXCLUSIVE STYLES
   All classes prefixed with 'hp-' to avoid conflicts
   ================================ */

/* Custom Homepage Device Variables */
.hp-device-demo-section {
  --hp-primary-accent: #5dade2;
  --hp-secondary-accent: #3498db;
  --hp-text-light: #ffffff;
  --hp-text-muted: #b8c7d4;
  --hp-bg-dark: #0a0a0a;
  --hp-card-bg: rgba(20, 20, 20, 0.95);
  --hp-gradient: linear-gradient(135deg, #5dade2, #3498db);
}

/* Section Base */
.hp-device-demo-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent; /* Transparent for liquid glass to show grid */
  padding: 2rem 0 !important;
}

@media (max-width: 1032px) {
  .hp-device-demo-section {
    padding: 1.5rem 0 !important;
  }
}

@media (max-width: 768px) {
  .hp-device-demo-section {
    min-height: auto;
    padding: 1rem 0 !important;
  }
}

.hp-device-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(93, 173, 226, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(52, 152, 219, 0.08) 0%,
      transparent 50%
    );
  z-index: 1;
}

.hp-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hp-float-element {
  position: absolute;
  background: linear-gradient(
    135deg,
    rgba(93, 173, 226, 0.1),
    rgba(52, 152, 219, 0.1)
  );
  border: 2px solid rgba(93, 173, 226, 0.2);
  border-radius: 20px;
  opacity: 0.3;
}

#hp-float-1 {
  width: 150px;
  height: 300px;
  top: 15%;
  left: 5%;
  animation: hp-float-1 22s ease-in-out infinite;
}

#hp-float-2 {
  width: 250px;
  height: 180px;
  top: 55%;
  right: 10%;
  animation: hp-float-2 28s ease-in-out infinite;
}

#hp-float-3 {
  width: 120px;
  height: 200px;
  bottom: 15%;
  left: 15%;
  animation: hp-float-3 25s ease-in-out infinite;
}

@keyframes hp-float-1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
  33% {
    transform: translate(40px, -20px) rotate(-5deg);
  }
  66% {
    transform: translate(-20px, 30px) rotate(8deg);
  }
}

@keyframes hp-float-2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(-8deg);
  }
  50% {
    transform: translate(-60px, 30px) rotate(3deg);
  }
}

@keyframes hp-float-3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(30px, -15px) rotate(-6deg);
  }
  50% {
    transform: translate(-25px, -30px) rotate(4deg);
  }
  75% {
    transform: translate(20px, 20px) rotate(-2deg);
  }
}

.hp-device-content {
  position: relative;
  z-index: 3;
  padding: 0 2rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1425px) {
  .hp-device-content {
    padding: 0;
  }
}

/* Section Header - Centered and independent */
.hp-device-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 20px auto;
  padding: 0 20px;
  animation: fadeInUp 0.8s ease-out;
}

@media (max-width: 1032px) {
  .hp-device-header {
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .hp-device-header {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .hp-device-header {
    margin-bottom: 5px;
  }
}

/* Label tag - matches portfolio-label */
.hp-device-label {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 24px;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Title - Using Exo font and portfolio styling */
.hp-device-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #ffffff;
  line-height: 1.1;
}

.hp-device-word {
  display: block;
  background: linear-gradient(to right, #ffffff 0%, #c0c0c0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 480px) {
  .hp-device-title {
    font-size: 2rem;
  }
}

/* Subtitle - matches portfolio */
.hp-device-subtitle {
  font-size: 1.25rem;
  color: #ffffff;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (max-width: 480px) {
  .hp-device-subtitle {
    font-size: 1rem;
  }
}

/* Animation to match portfolio */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Device Showcase */
.hp-device-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
  min-height: 600px;
  height: 600px;
  margin-top: 0;
}

@media (max-width: 1032px) {
  .hp-device-showcase {
    min-height: 400px;
    height: 400px;
  }
}

@media (max-width: 768px) {
  .hp-device-showcase {
    min-height: 350px;
    height: 350px;
  }
}

@media (max-width: 480px) {
  .hp-device-showcase {
    min-height: 300px;
    height: 300px;
  }
}

.hp-showcase-container {
  position: relative;
  z-index: 10;
  perspective: 1000px;
}

.hp-showcase-frame {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(93, 173, 226, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 40px rgba(93, 173, 226, 0.2),
    inset 0 0 20px rgba(93, 173, 226, 0.05);
  position: relative;
  animation: hp-device-entrance 1s ease-out;
}

@keyframes hp-device-entrance {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Set initial scale and sizes */
.hp-showcase-frame {
  width: 320px;
  height: 480px;
  transform-origin: center center;
}

/* Apply scale immediately to prevent jump */
@media (max-width: 1032px) {
  .hp-showcase-frame {
    transform: scale(0.8) !important;
  }
}

@media (max-width: 768px) {
  .hp-showcase-frame {
    transform: scale(0.6) !important;
  }
}

@media (max-width: 480px) {
  .hp-showcase-frame {
    transform: scale(0.45) !important;
  }
}

/* Size variations - removed redundant scale rules */
.hp-showcase-frame.tablet {
  width: 480px;
  height: 360px;
}

.hp-showcase-frame.desktop {
  width: 600px;
  height: 400px;
}

.hp-showcase-screen {
  width: 100%;
  height: 100%;
  background: #0f0f0f;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* Preview Content */
.hp-preview-content {
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--hp-text-light);
}

.hp-preview-header {
  background: rgba(93, 173, 226, 0.15);
  padding: 0.75rem;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hp-preview-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hp-showcase-frame.mobile .hp-preview-nav {
  justify-content: space-around;
}

.hp-preview-nav span {
  height: 3px;
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  max-width: 60px;
}

.hp-preview-hero {
  background: var(--hp-gradient);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.hp-preview-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hp-preview-subtitle {
  font-size: 0.75rem;
  opacity: 0.9;
}

.hp-preview-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
  flex: 1;
  margin-bottom: 1.5rem;
}

.hp-showcase-frame.mobile .hp-preview-features {
  grid-template-columns: 1fr;
}

.hp-preview-feature {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.hp-preview-feature:hover {
  background: rgba(93, 173, 226, 0.1);
  transform: translateY(-2px);
}

.hp-feature-icon {
  width: 30px;
  height: 30px;
  background: var(--hp-gradient);
  border-radius: 50%;
  margin: 0 auto 0.5rem;
}

.hp-feature-text {
  font-size: 0.75rem;
  color: var(--hp-text-muted);
}

.hp-preview-cta {
  text-align: center;
  margin-top: auto;
}

.hp-preview-button {
  background: var(--hp-gradient);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hp-preview-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(93, 173, 226, 0.3);
}

/* Responsive adjustments for device content */
.hp-showcase-frame.tablet .hp-preview-hero {
  padding: 1.5rem;
}

.hp-showcase-frame.tablet .hp-preview-features {
  grid-template-columns: repeat(3, 1fr);
}

.hp-showcase-frame.desktop .hp-preview-content {
  padding: 2rem;
}

.hp-showcase-frame.desktop .hp-preview-hero {
  padding: 2.5rem;
}

.hp-showcase-frame.desktop .hp-preview-features {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Hide device frame initially on mobile to prevent size jump */
@media (max-width: 768px) {
  .hp-showcase-frame {
    opacity: 0;
    animation: hp-mobile-fade-in 0.5s ease-out 0.3s forwards;
  }
}

@keyframes hp-mobile-fade-in {
  to {
    opacity: 1;
  }
}

/* ===================================
  SERVICES SECTION - DARK THEME
  =================================== */
/* Inline content links */
.inline-link {
  color: #5dade2;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s ease, text-decoration-thickness 0.3s ease, text-shadow 0.3s ease;
  font-weight: 500;
}

.inline-link:hover {
  color: #93e5ff;
  text-decoration-thickness: 2px;
}

/* Dark background adjustment */
.card-content .inline-link,
.service-description .inline-link {
  color: #93e5ff;
}

.card-content .inline-link:hover,
.service-description .inline-link:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(147, 229, 255, 0.5);
}
.services-section {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 100px 20px;

  overflow: hidden;
}

/* Background animation */
.services-section::before {
  display: none; /* Temporarily disabled */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  animation: servicesFloat 25s ease-in-out infinite;
}

@keyframes servicesFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-20px, -20px) scale(1.02);
  }
  66% {
    transform: translate(20px, -10px) scale(0.98);
  }
}

.services-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.services-header {
  text-align: center;
  margin-bottom: 80px;
  animation: servicesFadeIn 0.8s ease-out;
}

.services-tag {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 20px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.services-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin: 0 0 20px 0;
  line-height: 1.1;
}

.services-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #8b5cf6 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-hint {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
}

.services-hint.p-hover {
  display: block;
}

.services-hint.p-mobile {
  display: none;
}

@media (max-width: 499px) {
  .services-hint.p-mobile {
    display: block;
  }
  .services-hint.p-hover {
    display: none;
  }
}

/* ===== REUSABLE HORIZONTAL SCROLL CAROUSEL ===== */
.carousel-wrapper {
  position: relative;
}

/* Swipe Indicator */
.swipe-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  animation: swipePulse 2s ease-in-out infinite;
}

@media (max-width: 900px) {
  .swipe-indicator {
    display: flex;
  }
}

.swipe-indicator svg {
  width: 24px;
  height: 24px;
  animation: swipeMotion 2s ease-in-out infinite;
}

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

@keyframes swipeMotion {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.carousel-arrow svg {
  width: 34px;
  height: 34px;
}

.carousel-arrow:hover {
  transform: translateY(-50%) scale(1.2);
}

.carousel-arrow.show {
  opacity: 1;
  visibility: visible;
}

.carousel-arrow-left {
  left: -20px;
}

.carousel-arrow-right {
  right: -20px;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hide arrows on desktop */
@media (min-width: 901px) {
  .carousel-arrow {
    display: none !important;
  }
}

/* Tablet/Mobile: Horizontal scroll carousel */
@media (max-width: 900px) {
  .services-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(129, 140, 248, 0.5) rgba(20, 20, 30, 0.3);
    padding: 0 calc((100vw - 350px) / 2) 15px;
    grid-template-columns: unset;
  }

  .services-grid::-webkit-scrollbar {
    height: 8px;
  }

  .services-grid::-webkit-scrollbar-track {
    background: rgba(20, 20, 30, 0.3);
    border-radius: 10px;
  }

  .services-grid::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.5);
    border-radius: 10px;
  }

  .services-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 140, 248, 0.7);
  }

  .service-item {
    flex: 0 0 auto;
    width: 350px;
    height: 380px !important;
  }
}

/* Service Items - Preserving flip functionality */
.service-item {
  perspective: 1000px;
  height: 400px;
  position: relative;
  cursor: pointer;
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  .service-item {
    height: 650px !important;
  }
}


.service-item-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.service-item-inner.rotate {
  transform: rotateX(180deg);
}

/* Card Faces */
.service-item-front,
.service-item-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}

/* Front Face */
.service-item-front {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Remove the background and border that's causing issues */
  background: transparent;
  border: none;
}

/* Background Images - Full coverage */
.service-item:first-child .service-item-front {
  background: url('https://storage.googleapis.com/background-vid/services-design.webp?v=1')
    center/cover no-repeat;
}

.service-item:nth-child(2) .service-item-front {
  background: url('https://storage.googleapis.com/background-vid/services-responsive.webp?v=1')
    center/cover no-repeat;
}

.service-item:nth-child(3) .service-item-front {
  background: url('https://storage.googleapis.com/background-vid/services-google-business-profile-optimization.webp')
    center/cover no-repeat;
}

.service-item:nth-child(4) .service-item-front {
  background: url('https://storage.googleapis.com/background-vid/services-seo.webp?v=1')
    center/cover no-repeat;
}

.service-item:nth-child(5) .service-item-front {
  background: url('https://storage.googleapis.com/background-vid/services-digital-marketing.webp')
    center/cover no-repeat;
}

.service-item:nth-child(6) .service-item-front {
  background: url('https://storage.googleapis.com/background-vid/services-pagespeed.webp')
    center/cover no-repeat;
}

/* Glow Effect */
.service-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.2) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-item:hover .service-glow {
  opacity: 1;
}

/* Front Content */
.service-content {
  text-align: center;
  padding: 30px;
  position: relative;
  z-index: 2;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  width: auto;
  max-width: 280px;
}

.service-icon-wrapper {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: rgba(17, 17, 17, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(139, 92, 246, 0.5);
  transition: all 0.3s ease;
}

.service-item:hover .service-icon-wrapper {
  transform: scale(1.1);
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.service-icon {
  width: 35px;
  height: 35px;
  fill: #fff;
}

/* Different colors for each service */
.service-item:nth-child(1) .service-icon-wrapper {
  border-color: rgba(139, 92, 246, 0.5);
}
.service-item:nth-child(1):hover .service-icon-wrapper {
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.service-item:nth-child(2) .service-icon-wrapper {
  border-color: rgba(236, 72, 153, 0.5);
}
.service-item:nth-child(2):hover .service-icon-wrapper {
  border-color: rgba(236, 72, 153, 0.8);
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
}

.service-item:nth-child(3) .service-icon-wrapper {
  border-color: rgba(59, 130, 246, 0.5);
}
.service-item:nth-child(3):hover .service-icon-wrapper {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.service-item:nth-child(4) .service-icon-wrapper {
  border-color: rgba(16, 185, 129, 0.5);
}
.service-item:nth-child(4):hover .service-icon-wrapper {
  border-color: rgba(16, 185, 129, 0.8);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.service-item:nth-child(5) .service-icon-wrapper {
  border-color: rgba(245, 158, 11, 0.5);
}
.service-item:nth-child(5):hover .service-icon-wrapper {
  border-color: rgba(245, 158, 11, 0.8);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.service-item:nth-child(6) .service-icon-wrapper {
  border-color: rgba(239, 68, 68, 0.5);
}
.service-item:nth-child(6):hover .service-icon-wrapper {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.service-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.service-border {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  margin: 15px auto 0;
  opacity: 0.7;
}

/* Back Face */
.service-item-back {
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  transform: rotateX(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

@media (max-width: 768px) {
  .service-item-back {
    padding: 30px 25px;
  }
}

.service-back-content {
  text-align: center;
  max-width: 400px;
}

.service-back-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #8b5cf6;
  margin: 0 0 20px 0;
}

.service-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0 0 30px 0;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8b5cf6;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 24px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-link:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(139, 92, 246, 0.3);
}

.service-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.service-link:hover svg {
  transform: translateX(4px);
}

/* Animation Classes */
.slide-from-left {
  transform: translateX(-70px);
}

.slide-from-right {
  transform: translateX(70px);
}

.service-item.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered delays */
.service-item:nth-child(1) {
  transition-delay: 0.05s;
}
.service-item:nth-child(2) {
  transition-delay: 0.1s;
}
.service-item:nth-child(3) {
  transition-delay: 0.15s;
}
.service-item:nth-child(4) {
  transition-delay: 0.2s;
}
.service-item:nth-child(5) {
  transition-delay: 0.25s;
}
.service-item:nth-child(6) {
  transition-delay: 0.3s;
}

/* Preserve flip animation */
.service-item.animate .service-item-inner,
.service-item.animate .service-item-back,
.service-item.animate .service-item-front {
  transition: transform 0.6s;
}

/* Initial animation */
@keyframes servicesFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .services-section {
    padding: 60px 15px;
  }

  .services-header {
    margin-bottom: 50px;
  }

  .services-heading {
    font-size: 2rem;
  }

  .service-icon-wrapper {
    width: 60px;
    height: 60px;
  }

  .service-icon {
    width: 30px;
    height: 30px;
  }

  .service-title {
    font-size: 1.25rem;
  }

  .service-back-title {
    font-size: 1.25rem;
  }

  .service-description {
    font-size: 0.9rem;
  }

  .service-content,
  .service-back-content {
    padding: 30px 20px;
  }
}

@media (max-width: 430px) {
  .service-description {
    font-size: 0.85rem;
  }

  .service-link {
    font-size: 0.8rem;
    padding: 10px 20px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-item {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .service-item-inner {
    transition: none;
  }
}

/* View all services link */
.services-view-all {
  text-align: center;
  margin-top: 3rem;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #5dade2;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  padding: 0.75rem 1.5rem;
  border: 2px solid #5dade2;
  border-radius: 50px;
}

.view-all-link:hover {
  background: #5dade2;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(93, 173, 226, 0.4);
}

.view-all-link svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.view-all-link:hover svg {
  transform: translateX(5px);
}
/* ===================================
   JOURNEY SECTION - DARK THEME
   =================================== */

.journey-section {
  position: relative;
  padding: 100px 20px;
  background: transparent; /* Transparent for liquid glass to show grid */
  overflow: hidden;
  z-index: 20;
}

/* Animated Background */
.journey-section::before {
  display: none; /* Temporarily disabled */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 30% 20%,
      rgba(129, 140, 248, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(236, 72, 153, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(99, 102, 241, 0.05) 0%,
      transparent 50%
    );
  animation: journeyPulse 20s ease-in-out infinite;
}

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

/* Hide section overlays in light mode */
[data-theme="light"] .services-section::before,
[data-theme="light"] .journey-section::before,
[data-theme="light"] .pricing-section::before {
  opacity: 0.1;
}

.journey-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Intro Section */
.journey-section-intro {
  text-align: center;
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(30px);
  animation: journeyFadeInUp 0.8s ease-out forwards;
}

.journey-main-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 30px;
}

/* Journey Quote Style */
.journey-quote {
  position: relative;
  margin: 0 auto 30px;
  padding: 0;
  text-align: center;
  max-width: 600px;
}

.journey-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Exo', sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(0, 255, 255, 0.3);
  pointer-events: none;
}

.journey-quote .quote-text {
  display: block;
  font-family: 'Exo', sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  color: #e2e8f0;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .journey-quote::before {
    font-size: 4rem;
    top: -15px;
  }

  .journey-quote .quote-text {
    font-size: 1.25rem;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .journey-quote .quote-text {
    font-size: 1rem;
  }
}

/* Custom Divider */
.journey-divider {
  position: relative;
  width: 100px;
  height: 2px;
  margin: 30px auto;
  display: block;
}

.divider-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #818cf8, transparent);
  opacity: 0.5;
}

.divider-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #818cf8;
  filter: blur(4px);
  opacity: 0.3;
  animation: dividerGlow 3s ease-in-out infinite;
}

@keyframes dividerGlow {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.6;
    transform: scaleX(1.2);
  }
}

/* Headings */
.journey-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}

.journey-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #818cf8 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Apply journey gradient style to all major headings in dark mode */
.hp-device-word,
.services-gradient-text,
.testimonials-header h2,
.portfolio-title .title-line,
.hp-blog-title,
.pricing-title-gradient,
.quote-title-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #818cf8 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Exo', sans-serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 0.02em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

.journey-subheading {
  font-size: 1.125rem;
  color: #94a3b8;
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.journey-highlight {
  color: #818cf8;
  font-weight: 700;
}

.journey-description {
  font-size: 1rem;
  line-height: 1.8;
  color: #64748b;
  max-width: 900px;
  margin: 0 auto 60px;
}

/* Grid Layout */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

@media (max-width: 768px) {
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ========================================= */
/* JOURNEY CARDS - Liquid Glass Effect       */
/* ========================================= */
.journey-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(50px);
  isolation: isolate;

  /* Liquid Glass: tinted gradient - matches navbar */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* Vibrancy: blur + saturate + contrast + brightness */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft shadow */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Journey card specular highlight */
.journey-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );
  mix-blend-mode: screen;
}

/* Journey card rim / thickness */
.journey-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 30%,
    rgba(0, 0, 0, 0.05) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 24px rgba(0, 0, 0, 0.10);
}

.journey-card[data-card='1'],
.journey-card[data-card='3'],
.journey-card[data-card='5'] {
  transform: translateX(-50px) translateY(30px);
}

.journey-card[data-card='2'],
.journey-card[data-card='4'],
.journey-card[data-card='6'] {
  transform: translateX(50px) translateY(30px);
}

.journey-card.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.journey-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card Glow Effect */
.journey-card-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.journey-card:hover .journey-card-glow,
.journey-card.active .journey-card-glow {
  opacity: 1;
}

/* Active state for mobile scroll */
@media (max-width: 900px) {
  .journey-card.active {
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow: 0 20px 40px rgba(129, 140, 248, 0.2);
  }
}

/* Card Content */
.journey-card-content {
  position: relative;
  padding: 35px;
  z-index: 1;
}

.journey-card-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 25px;
  color: #818cf8;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.journey-card:hover .journey-card-icon {
  opacity: 1;
  transform: scale(1.1);
}

.journey-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
  letter-spacing: 0.02em;
}

.journey-card-description {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Card Link */
.journey-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #818cf8;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 2px;
}

.journey-card-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #818cf8, #ec4899);
  transition: width 0.3s ease;
}

.journey-card-link:hover {
  color: #a78bfa;
  gap: 12px;
}

.journey-card-link:hover::after {
  width: 100%;
}

.journey-card-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.journey-card-link:hover svg {
  transform: translateX(4px);
}

/* Animations */
@keyframes journeyFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 1032px) {
  .journey-section {
    padding: 80px 20px;
  }

  .journey-section-intro {
    margin-bottom: 60px;
  }

  .journey-heading {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .journey-section {
    padding: 60px 15px;
  }

  .journey-main-title {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
  }

  .journey-heading {
    font-size: 1.5rem;
  }

  .journey-subheading {
    font-size: 0.875rem;
    margin-bottom: 15px;
  }

  .journey-description {
    font-size: 0.875rem;
    margin-bottom: 40px;
    line-height: 1.6;
  }

  .journey-card {
    border-radius: 16px;
  }

  .journey-card-content {
    padding: 25px 20px;
  }

  .journey-card-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 15px;
  }

  .journey-card-title {
    font-size: 1rem;
    margin-bottom: 12px;
  }

  .journey-card-description {
    font-size: 0.8125rem;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  .journey-card-link {
    font-size: 0.75rem;
  }

  .journey-card-link svg {
    width: 14px;
    height: 14px;
  }
}

/* Different card colors for variety */
.journey-card[data-card='1'] .journey-card-icon,
.journey-card[data-card='1'] .journey-card-link {
  color: #818cf8;
}

.journey-card[data-card='2'] .journey-card-icon,
.journey-card[data-card='2'] .journey-card-link {
  color: #ec4899;
}

.journey-card[data-card='3'] .journey-card-icon,
.journey-card[data-card='3'] .journey-card-link {
  color: #10b981;
}

.journey-card[data-card='4'] .journey-card-icon,
.journey-card[data-card='4'] .journey-card-link {
  color: #f59e0b;
}

.journey-card[data-card='5'] .journey-card-icon,
.journey-card[data-card='5'] .journey-card-link {
  color: #8b5cf6;
}

.journey-card[data-card='6'] .journey-card-icon,
.journey-card[data-card='6'] .journey-card-link {
  color: #06b6d4;
}

/* Corresponding glow colors */
.journey-card[data-card='1']:hover .journey-card-glow,
.journey-card[data-card='1'].active .journey-card-glow {
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.15) 0%,
    transparent 70%
  );
}

.journey-card[data-card='2']:hover .journey-card-glow,
.journey-card[data-card='2'].active .journey-card-glow {
  background: radial-gradient(
    circle,
    rgba(236, 72, 153, 0.15) 0%,
    transparent 70%
  );
}

.journey-card[data-card='3']:hover .journey-card-glow,
.journey-card[data-card='3'].active .journey-card-glow {
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.15) 0%,
    transparent 70%
  );
}

.journey-card[data-card='4']:hover .journey-card-glow,
.journey-card[data-card='4'].active .journey-card-glow {
  background: radial-gradient(
    circle,
    rgba(245, 158, 11, 0.15) 0%,
    transparent 70%
  );
}

.journey-card[data-card='5']:hover .journey-card-glow,
.journey-card[data-card='5'].active .journey-card-glow {
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.15) 0%,
    transparent 70%
  );
}

.journey-card[data-card='6']:hover .journey-card-glow,
.journey-card[data-card='6'].active .journey-card-glow {
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.15) 0%,
    transparent 70%
  );
}

/* ===================================
  HOMEPAGE BLOG PREVIEW SECTION
  =================================== */
/* Magazine Style Blog Section */
.hp-blog-magazine {
  padding: 80px 0;
  background: transparent; /* Transparent for liquid glass to show grid */
  position: relative;
  overflow: hidden;
}

/* Subtle background accent */
.hp-blog-magazine::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(
    circle,
    rgba(93, 173, 226, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hp-blog-mag-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* Magazine Header */
.hp-blog-mag-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(93, 173, 226, 0.2);
}

.hp-blog-mag-title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-blog-mag-label {
  font-size: 0.875rem;
  color: #5dade2;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

.hp-blog-mag-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1;
}

.hp-blog-mag-viewall {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #93e5ff;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 10px 0;
}

.hp-blog-mag-viewall:hover {
  color: #ffffff;
  gap: 15px;
}

/* Magazine Grid Layout */
.hp-blog-mag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ========================================= */
/* BLOG MAG FEATURED - Liquid Glass Effect   */
/* ========================================= */
.hp-blog-mag-featured {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: all 0.3s ease;
  isolation: isolate;

  /* Liquid Glass: tinted gradient */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* Vibrancy */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft shadow */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Featured specular highlight */
.hp-blog-mag-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.00) 25%,
      rgba(0, 0, 0, 0.05) 100%
    );
  mix-blend-mode: screen;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hp-blog-mag-featured:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hp-blog-mag-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hp-blog-mag-image {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.hp-blog-mag-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hp-blog-mag-featured:hover img {
  transform: scale(1.05);
}

.hp-blog-mag-content {
  padding: 30px;
}

.hp-blog-mag-category {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(93, 173, 226, 0.2);
  color: #5dade2;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 20px;
  margin-bottom: 15px;
}

.hp-blog-mag-headline {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 15px 0;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.hp-blog-mag-featured:hover .hp-blog-mag-headline {
  color: #5dade2;
}

.hp-blog-mag-excerpt {
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

.hp-blog-mag-date {
  font-size: 0.875rem;
  color: #64748b;
}

/* Side Articles */
.hp-blog-mag-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ========================================= */
/* BLOG MAG ITEMS - Liquid Glass Effect      */
/* ========================================= */
.hp-blog-mag-item {
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
  isolation: isolate;
  overflow: hidden;

  /* Liquid Glass: tinted gradient */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* Vibrancy */
  -webkit-backdrop-filter: blur(16px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(16px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* Soft shadow */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Item specular + rim */
.hp-blog-mag-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 25%,
      transparent 50%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.00) 30%,
      rgba(0, 0, 0, 0.04) 100%
    );
  mix-blend-mode: screen;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hp-blog-mag-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.hp-blog-mag-link-small {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  text-decoration: none;
  color: inherit;
}

.hp-blog-mag-item-content {
  flex: 1;
  padding-right: 20px;
}

.hp-blog-mag-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0 0 8px 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.hp-blog-mag-item:hover .hp-blog-mag-item-title {
  color: #5dade2;
}

.hp-blog-mag-item-date {
  font-size: 0.875rem;
  color: #64748b;
}

.hp-blog-mag-item-arrow {
  font-size: 1.5rem;
  color: #5dade2;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.hp-blog-mag-item:hover .hp-blog-mag-item-arrow {
  transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 968px) {
  .hp-blog-mag-grid {
    grid-template-columns: 1fr;
  }

  .hp-blog-mag-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hp-blog-mag-title {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .hp-blog-mag-image {
    height: 200px;
  }

  .hp-blog-mag-content {
    padding: 20px;
  }

  .hp-blog-mag-headline {
    font-size: 1.5rem;
  }

  .hp-blog-mag-link-small {
    padding: 15px 20px;
  }

  .hp-blog-mag-item-title {
    font-size: 1rem;
  }
}
/* ===================================
  PRICING SECTION - DARK THEME
  =================================== */

.pricing-section {
  position: relative;
  background: transparent; /* Transparent for liquid glass to show grid */
  padding: 100px 20px;
  overflow: hidden;
  min-height: 100vh;
}


@media (max-width: 768px) {
  .pricing-section {
    padding: 60px 16px;
  }
}

/* Animated Background */
.pricing-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(93, 173, 226, 0.15) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(147, 51, 234, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(236, 72, 153, 0.08) 0%,
      transparent 50%
    );
  animation: pricingBackgroundShift 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pricingBackgroundShift {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
}

.pricing-container {
  position: relative;
  z-index: 1;
}

@media (min-width: 1181px) {
  .pricing-container {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* Header Styles */
.pricing-header {
  text-align: center;
  margin-bottom: 60px;
  animation: pricingFadeInUp 0.8s ease-out;
}

.pricing-section-tag {
  display: inline-block;
  background: rgba(93, 173, 226, 0.1);
  border: 1px solid rgba(93, 173, 226, 0.3);
  color: #5dade2;
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.pricing-section-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin: 0 0 20px 0;
  line-height: 1.1;
}

@media (max-width: 768px) {
  .pricing-section-title {
    font-size: 2rem;
  }
}

.pricing-title-gradient {
  display: block;
  background: linear-gradient(135deg, #ffffff 0%, #5dade2 50%, #9333ea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-section-subtitle {
  font-size: 1.25rem;
  color: #888;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .pricing-section-subtitle {
    font-size: 1rem;
  }
}

/* Pricing Carousel Wrapper */
.pricing-carousel-wrapper {
  position: relative;
}

.pricing-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #00ffff;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.pricing-arrow svg {
  width: 34px;
  height: 34px;
}

.pricing-arrow:hover {
  transform: translateY(-50%) scale(1.2);
}

.pricing-arrow.show {
  opacity: 1;
  visibility: visible;
}

.pricing-arrow-left {
  left: -20px;
}

.pricing-arrow-right {
  right: -20px;
}

/* Hide arrows on desktop */
@media (min-width: 1181px) {
  .pricing-arrow {
    display: none !important;
  }

  .pricing-scroll-indicator {
    display: none !important;
  }
}

/* Pricing Cards Container */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-bottom: 80px;
  align-items: stretch;
}

/* Tablet/Mobile: Horizontal scroll carousel */
@media (max-width: 1180px) {
  .pricing-section {
    padding-left: 0;
    padding-right: 0;
  }

  .pricing-header {
    padding: 0 20px;
  }

  .pricing-additional-fees {
    padding: 0 20px;
  }

  .pricing-container {
    overflow: visible;
  }

  .pricing-carousel-wrapper {
    overflow: visible;
  }

  .pricing-cards-grid {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 255, 0.5) rgba(20, 20, 30, 0.3);
    padding: 0 calc((100vw - 500px) / 2) 15px;
    grid-template-columns: unset;
  }

  .pricing-cards-grid::-webkit-scrollbar {
    height: 8px;
  }

  .pricing-cards-grid::-webkit-scrollbar-track {
    background: rgba(20, 20, 30, 0.3);
    border-radius: 10px;
  }

  .pricing-cards-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.5);
    border-radius: 10px;
  }

  .pricing-cards-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.7);
  }

  .pricing-card {
    position: relative;
    flex: 0 0 auto;
    width: 500px;
    height: 588px;
    scroll-snap-align: center;
    margin-top: 1rem;
    overflow: hidden;
  }

  .pricing-card-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-card-content::-webkit-scrollbar {
    width: 6px;
  }

  .pricing-card-content::-webkit-scrollbar-track {
    background: rgba(20, 20, 30, 0.3);
    border-radius: 10px;
  }

  .pricing-card-content::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.5);
    border-radius: 10px;
  }

  .pricing-card-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.7);
  }

  .pricing-scroll-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
  }

  .pricing-scroll-indicator.visible {
    opacity: 0.3;
  }

  .pricing-scroll-indicator svg {
    width: 100%;
    height: 100%;
    color: var(--accent-primary);
    filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.3));
  }

  .pricing-arrow {
    top: 400px;
    transform: none;
  }

  .pricing-arrow:hover {
    transform: scale(1.2);
  }
}


@media (max-width: 595px) {
  .pricing-card {
    width: 85vw;
    max-width: 450px;
  }

  .pricing-cards-grid {
    padding: 0 calc((100vw - 85vw) / 2) 15px;
  }
}

@media (max-width: 500px) {
  .pricing-cards-grid {
    padding: 0 calc((100vw - 350px) / 2) 15px;
  }

  .pricing-card {
    width: 350px;
  }
}

@media (max-width: 480px) {
  .pricing-cards-grid {
    gap: 30px;
  }
}

/* Individual Pricing Card */
/* Pricing Card - iOS Material Liquid Glass */
.pricing-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  animation: pricingFadeInUp 0.8s ease-out 0.4s backwards;
  isolation: isolate;

  /* iOS Material: tinted gradient overlay - matches navbar */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border for definition */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft elevation shadow */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12);
}

@media (min-width: 500px) and (max-width: 1180px) {
  .pricing-card {
    min-height: 650px;
  }
}

@media (min-width: 1181px) {
  .pricing-card {
    min-height: 700px;
  }
}

.pricing-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Specular Highlight + Bloom (iOS-like) */
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );

  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Thickness / Rim Effects (Glass Depth) */
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 24px rgba(0, 0, 0, 0.10);

  transition: box-shadow 0.3s ease;
}

/* Old glow - hidden, replaced by liquid glass */
.pricing-card-glow {
  display: none;
}

.pricing-card:hover .pricing-card-glow,
.pricing-card.active .pricing-card-glow {
  display: none;
}

/* Active card state for mobile carousel */
@media (max-width: 1180px) {
  .pricing-card.active {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

/* Featured Card */
.pricing-card.pricing-featured {
  border-color: rgba(93, 173, 226, 0.25);
  background: linear-gradient(
    180deg,
    rgba(18, 22, 42, 0.28) 0%,
    rgba(28, 32, 58, 0.24) 100%
  );
  position: relative;
}

.pricing-featured-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #5dade2 0%, #9333ea 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 3;
}

.pricing-card.pricing-featured:hover {
  border-color: rgba(93, 173, 226, 0.4);
}

/* Card Content */
.pricing-card-content {
  padding: 40px;
  position: relative;
  z-index: 1;
}

/* Enterprise Card Pricing Styles */
.pricing-card-pricing {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

[data-theme="light"] .pricing-card-pricing,
[data-theme="light"] .pricing-price-display {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pricing-price-tag {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 10px;
}

.pricing-price-tag .pricing-currency {
  font-size: 1.2rem;
  color: #5dade2;
  margin-right: 4px;
}

.pricing-price-tag .pricing-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

@media (max-width: 768px) {
  .pricing-card-content {
    padding: 24px 20px;
  }

  .pricing-card-header {
    margin-bottom: 20px;
  }

  .pricing-price-display,
  .pricing-card-pricing {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .pricing-features-list {
    margin-bottom: 24px;
  }

  .pricing-feature-item {
    margin-bottom: 8px;
    font-size: 0.75rem;
  }

  .pricing-price-tag .pricing-amount {
    font-size: 2rem;
  }

  .pricing-commitment {
    margin: 0;
  }

  .pricing-price-secondary {
    margin-top: 4px;
  }

  .pricing-price-main {
    margin-bottom: 6px;
  }
}

.pricing-card-header {
  margin-bottom: 20px;
}

.pricing-package-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
}

.pricing-package-tagline {
  color: #888;
  font-size: 0.85rem;
  margin: 0;
}

/* Price Display */
.pricing-price-display {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-price-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 10px;
}

.pricing-currency {
  font-size: 1.2rem;
  color: #5dade2;
  margin-right: 4px;
}

.pricing-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

@media (max-width: 768px) {
  .pricing-amount {
    font-size: 2rem;
  }
}

.pricing-period {
  font-size: 0.9rem;
  color: #888;
  margin-left: 8px;
}

.pricing-price-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #888;
  font-size: 0.85rem;
}

.pricing-plus {
  color: #5dade2;
  font-size: 1rem;
  font-weight: 600;
}

.pricing-monthly {
  font-weight: 500;
}

.pricing-commitment {
  color: #888;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pricing-price-note {
  margin-top: 12px;
  color: #888;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  font-style: italic;
}

/* Features List */
.pricing-features-list {
  margin-bottom: 40px;
}

.pricing-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #b0b0b0;
  transition: color 0.3s ease;
}

@media (max-width: 480px) {
  .pricing-feature-item {
    font-size: 0.75rem;
  }
}

.pricing-feature-item.pricing-included {
  color: #b0b0b0;
}

.pricing-feature-item.pricing-excluded {
  color: #666;
  opacity: 0.6;
}

.pricing-feature-item.pricing-premium {
  color: #5dade2;
}

.pricing-feature-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.pricing-feature-item.pricing-included .pricing-feature-icon {
  color: #4ade80;
}

.pricing-feature-item.pricing-excluded .pricing-feature-icon {
  color: #ef4444;
}

.pricing-feature-item.pricing-premium .pricing-feature-icon {
  color: #5dade2;
}

/* Pricing button styles moved to buttons.css */

/* Additional Fees Section */
.pricing-additional-fees {
  margin-top: 100px;
  padding-top: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-fees-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 60px;
  background: linear-gradient(to right, #fff 0%, #5dade2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .pricing-fees-title {
    font-size: 2rem;
  }
}

.pricing-fees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 60px;
}

@media (max-width: 1032px) {
  .pricing-fees-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-fees-category {
  animation: pricingFadeInUp 0.8s ease-out 0.6s backwards;
}

.pricing-category-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px;
}

.pricing-category-icon {
  width: 28px;
  height: 28px;
  color: #5dade2;
}

/* Fee Cards - iOS Material Liquid Glass */
.pricing-fee-card {
  position: relative;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  isolation: isolate;
  overflow: hidden;

  /* iOS Material: tinted gradient - matches navbar */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft shadow */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.10);
}

/* Specular Highlight */
.pricing-fee-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );
  mix-blend-mode: screen;
}

/* Rim / Thickness */
.pricing-fee-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -12px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
  .pricing-fee-card {
    padding: 20px;
  }
}

.pricing-fee-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pricing-fee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pricing-fee-header h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.pricing-fee-badge {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(93, 173, 226, 0.1);
  color: #5dade2;
  border: 1px solid rgba(93, 173, 226, 0.3);
}

.pricing-fee-badge.pricing-optional {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
  border-color: rgba(147, 51, 234, 0.3);
}

.pricing-fee-description {
  color: #888;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .pricing-fee-description {
    font-size: 0.85rem;
  }
}

/* Accordion styles for mobile */
@media (max-width: 768px) {
  .pricing-accordion .pricing-fee-header {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .pricing-fee-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }

  .pricing-accordion-icon {
    width: 20px;
    height: 20px;
    color: #5dade2;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 12px;
  }

  .pricing-accordion.active .pricing-accordion-icon {
    transform: rotate(180deg);
  }

  .pricing-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .pricing-accordion.active .pricing-accordion-content {
    max-height: 500px;
    margin-top: 16px;
  }
}

/* Desktop - no accordion behavior */
@media (min-width: 769px) {
  .pricing-accordion-icon {
    display: none;
  }

  .pricing-fees-category {
    text-align: left !important;
  }

  .pricing-fee-card {
    text-align: left !important;
  }

  .pricing-accordion .pricing-fee-header {
    pointer-events: none;
    cursor: default;
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .pricing-fee-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }

  .pricing-accordion-content {
    max-height: none;
    text-align: left !important;
  }

  .pricing-fee-description,
  .pricing-fee-details {
    text-align: left !important;
  }

  .pricing-accordion .pricing-fee-header h5,
  .pricing-fee-header h5 {
    text-align: left !important;
  }
}

.pricing-fee-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-detail-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pricing-detail-item:last-child {
  border-bottom: none;
}

.pricing-detail-label {
  color: #b0b0b0;
  font-size: 0.9rem;
}

.pricing-detail-value {
  color: #5dade2;
  font-weight: 600;
  font-size: 0.95rem;
}

@media (max-width: 480px) {
  .pricing-detail-label,
  .pricing-detail-value {
    font-size: 0.85rem;
  }
}

/* Trust Banner - Liquid Glass */
.pricing-trust-banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  max-width: 1400px;
  margin: 80px auto 0;
  padding: 40px;
  border-radius: 24px;
  animation: pricingFadeInUp 0.8s ease-out 0.8s backwards;
  isolation: isolate;
  overflow: hidden;

  /* iOS Material: liquid glass */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft elevation shadow */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Specular Highlight */
.pricing-trust-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );

  mix-blend-mode: screen;
}

/* Rim Effect */
.pricing-trust-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 24px rgba(0, 0, 0, 0.10);
}

@media (max-width: 1180px) {
  .pricing-trust-banner {
    max-width: calc(100% - 40px);
    flex-wrap: wrap;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .pricing-trust-banner {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
  }
}

.pricing-trust-item {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .pricing-trust-item {
    justify-content: center;
  }
}

.pricing-trust-icon {
  width: 24px;
  height: 24px;
  color: #818cf8;
  flex-shrink: 0;
}

.pricing-trust-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

@media (max-width: 768px) {
  .pricing-trust-text {
    font-size: 1rem;
  }
}

/* Animations */
@keyframes pricingFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===================================
  GET A QUOTE SECTION
  =================================== */
.quote-section {
  position: relative;
  padding: 120px 20px;
  background: transparent; /* Transparent for liquid glass to show grid */
  overflow: hidden;
}

@media (max-width: 768px) {
  .quote-section {
    padding: 80px 20px;
  }
}

/* Animated Background */
.quote-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 20% 50%,
    rgba(99, 102, 241, 0.1) 0%,
    transparent 50%
  );
  animation: quote-rotate 30s linear infinite;
}

.quote-section::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 80% 50%,
    rgba(168, 85, 247, 0.08) 0%,
    transparent 50%
  );
  animation: quote-rotate 40s linear infinite reverse;
}

@keyframes quote-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.quote-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* Header Styles */
.quote-header {
  text-align: center;
  margin-bottom: 80px;
  animation: quote-fadeInUp 0.8s ease-out;
}

@media (max-width: 768px) {
  .quote-header {
    margin-bottom: 60px;
  }
}

.quote-section-tag {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #818cf8;
  background: rgba(129, 140, 248, 0.1);
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 20px;
  border: 1px solid rgba(129, 140, 248, 0.2);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.quote-section-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .quote-section-title {
    font-size: 2rem;
  }
}

.quote-title-gradient {
  display: block;
  background: linear-gradient(135deg, #ffffff 0%, #818cf8 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quote-section-subtitle {
  font-size: 1.25rem;
  color: #94a3b8;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Content Grid */
.quote-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: start; /* Changed from stretch to start */
}

@media (max-width: 1032px) {
  .quote-content-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Card Styles - iOS Material Liquid Glass */
.quote-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: fit-content;
  isolation: isolate;

  /* iOS Material: tinted gradient overlay - matches navbar */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy: blur + saturate + contrast + brightness */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border for definition */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft elevation shadow */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12);
}

.quote-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Specular Highlight + Bloom (iOS-like) */
.quote-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  /* Diagonal specular highlight + curved bloom */
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );

  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Thickness / Rim Effects (Glass Depth) */
.quote-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;

  /* Compression gradient for thickness feel */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );

  /* iOS-like thickness: hairline ring + top rim + bottom depth */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 24px rgba(0, 0, 0, 0.10);

  transition: box-shadow 0.3s ease;
}

/* Old glow - hidden, replaced by liquid glass */
.quote-card-glow {
  display: none;
}

.quote-card:hover .quote-card-glow {
  display: none;
}

.quote-card-content {
  position: relative;
  padding: 40px;
  z-index: 3; /* Above ::before (z-1) and ::after (z-2) */
}

@media (max-width: 768px) {
  .quote-card-content {
    padding: 30px 20px;
  }
}

.quote-card-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Form Styles */
.quote-contact-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.quote-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .quote-form-grid {
    grid-template-columns: 1fr;
  }
}

.quote-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quote-form-group.quote-full-width {
  grid-column: 1 / -1;
}

.quote-form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-form-group input,
.quote-form-group select,
.quote-form-group textarea {
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 1rem;
  color: #ffffff;
  transition: all 0.3s ease;
  width: 100%;
}

.quote-form-group input:focus,
.quote-form-group select:focus,
.quote-form-group textarea:focus {
  outline: none;
  border-color: #818cf8;
  background: rgba(30, 30, 30, 1);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

.quote-form-group input::placeholder,
.quote-form-group textarea::placeholder {
  color: #64748b;
}

/* Select Wrapper */
.quote-select-wrapper {
  position: relative;
}

.quote-select-wrapper select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.quote-select-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #64748b;
  pointer-events: none;
}

/* Textarea */
.quote-form-group textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  line-height: 1.5;
}

/* Quote submit button styles moved to buttons.css */

/* Contact Direct */
.quote-contact-direct {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.quote-contact-intro {
  font-size: 1rem;
  color: #94a3b8;
  margin-bottom: 20px;
}

.quote-contact-methods {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (max-width: 768px) {
  .quote-contact-methods {
    gap: 10px;
  }
}

.quote-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 768px) {
  .quote-contact-item {
    font-size: 0.875rem;
  }
}

.quote-contact-item:hover {
  color: #818cf8;
  background: rgba(129, 140, 248, 0.1);
  transform: translateX(5px);
}

.quote-contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Process Timeline */
.quote-process-timeline {
  display: flex;
  flex-direction: column;
  gap: 50px; /* Increased from 30px for better desktop spacing */
}

@media (max-width: 1032px) {
  .quote-process-timeline {
    gap: 30px; /* Reduced spacing on smaller screens */
  }
}

.quote-timeline-item {
  display: flex;
  gap: 20px;
  position: relative;
  opacity: 0.3;
  transition: opacity 0.6s ease;
}

.quote-timeline-item.timeline-visible {
  opacity: 1;
}

/* Adjust last item to not have extra space */
.quote-timeline-item:last-child .quote-timeline-line {
  display: none;
}

.quote-timeline-marker {
  position: relative;
  flex-shrink: 0;
}

.quote-marker-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(99, 102, 241, 0.2);
  color: #ffffff;
  font-weight: 700;
  border-radius: 50%;
  font-size: 1.125rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(129, 140, 248, 0.1);
  transition: all 0.6s ease;
}

.quote-timeline-item.timeline-visible .quote-marker-number {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 4px 15px rgba(129, 140, 248, 0.3);
}

.quote-timeline-line {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 50px); /* Adjusted to match gap spacing */
  background: rgba(129, 140, 248, 0.1);
  overflow: hidden;
}

.quote-timeline-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(
    to bottom,
    rgba(129, 140, 248, 0.8) 0%,
    rgba(129, 140, 248, 0.4) 70%,
    transparent 100%
  );
  transition: height 0.8s ease-out;
}

.quote-timeline-item.timeline-visible .quote-timeline-line::after {
  height: 100%;
}

@media (max-width: 1032px) {
  .quote-timeline-line {
    height: calc(100% + 30px); /* Adjusted for smaller gap on mobile */
  }
}

.quote-timeline-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .quote-timeline-content h4 {
    font-size: 1rem;
  }
}

.quote-timeline-content p {
  font-size: 0.9375rem;
  color: #94a3b8;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .quote-timeline-content p {
    font-size: 0.875rem;
  }
}

/* Response Banner - Liquid Glass */
.quote-response-banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 40px;
  border-radius: 24px;
  isolation: isolate;
  overflow: hidden;

  /* iOS Material: liquid glass */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft elevation shadow */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Specular Highlight */
.quote-response-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );

  mix-blend-mode: screen;
}

/* Rim Effect */
.quote-response-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 24px rgba(0, 0, 0, 0.10);
}

@media (max-width: 1032px) {
  .quote-response-banner {
    flex-wrap: wrap;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .quote-response-banner {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
  }
}

.quote-response-item {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .quote-response-item {
    justify-content: center;
  }
}

.quote-response-icon {
  width: 24px;
  height: 24px;
  color: #818cf8;
  flex-shrink: 0;
}

.quote-response-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

@media (max-width: 768px) {
  .quote-response-text {
    font-size: 1rem;
  }
}

/* Animations */
@keyframes quote-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
  PORTFOLIO SECTION
  =================================== */

/* Base Styles */
.portfolio-section {
  position: relative;
  background: transparent; /* Transparent for liquid glass to show grid */
  padding: 80px 20px;
  overflow: hidden;
  min-height: 100vh;
}

.portfolio-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(120, 119, 198, 0.3) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 119, 198, 0.2) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 40% 20%,
      rgba(119, 198, 255, 0.2) 0%,
      transparent 40%
    );
  pointer-events: none;
}

.portfolio-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header Styles */
.portfolio-header {
  text-align: center;
  margin-bottom: 80px;
  animation: fadeInUp 0.8s ease-out;
}

.portfolio-label {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.portfolio-title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #ffffff;
  line-height: 1.1;
}

.title-line {
  display: block;
  background: linear-gradient(to right, #ffffff 0%, #c0c0c0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.portfolio-subtitle {
  font-size: 1.25rem;
  color: #ffffff;
  font-weight: 300;
  letter-spacing: 1px;
}

/* Grid Layout */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

/* Card Styles */
/* Portfolio Card - iOS Material Liquid Glass */
.portfolio-card {
  position: relative;
  height: 560px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  isolation: isolate;

  /* iOS Material: tinted gradient overlay - matches navbar */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy: blur + saturate + contrast + brightness */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border for definition */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft elevation shadow */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12);
}

.portfolio-card.featured {
  grid-column: span 2;
}

/* Only apply hover on devices that support hover (not touch) */
@media (hover: hover) {
  .portfolio-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .portfolio-card:hover .card-image {
    transform: scale(1.1);
    opacity: 0.85;
  }

  .portfolio-card:hover .card-overlay {
    opacity: 1;
  }

  .portfolio-card:hover .tag {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
  }
}

/* Active state for carousel mode (when card is centered) */
.portfolio-card.active {
  transform: translateY(-10px);
}

.portfolio-card.active .card-image {
  transform: scale(1.1);
  opacity: 0.85;
}

.portfolio-card.active .card-overlay {
  opacity: 1;
}

.portfolio-card.active .tag {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.card-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Image Styles - Fixed positioning */
.card-image-wrapper {
  position: relative;
  height: 50%; /* Reduced from 60% to give more room for content */
  overflow: hidden;
  background: #000; /* Add black background to prevent any gaps */
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* Ensures top of image is always visible */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Prevent overlay from interfering */
}

.project-number {
  font-size: 3rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.1);
  line-height: 1;
}

.featured-badge {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Content Styles - Liquid Glass */
.card-content {
  padding: 24px;
  height: 50%;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;

  /* iOS Material: tinted gradient overlay - transparent like navbar */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Specular Highlight for card content */
.card-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 65%
    );

  mix-blend-mode: screen;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; /* Reduced from 16px */
}

.project-type {
  color: #667eea;
  font-size: 12px; /* Reduced from 14px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.project-year {
  color: #666;
  font-size: 12px; /* Reduced from 14px */
}

.card-title {
  font-size: 1.25rem; /* Reduced from 1.5rem */
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0; /* Reduced margin from 12px */
  line-height: 1.2;
}

.card-description {
  color: #aaa;
  font-size: 13px; /* Reduced from 14px */
  line-height: 1.4; /* Reduced from 1.5 */
  margin-bottom: 16px; /* Reduced from 20px */
  flex-grow: 1;
  overflow: hidden; /* Prevent text overflow */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
}

/* Tags - Reduced sizes */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* Reduced from 8px */
  margin-bottom: 16px; /* Reduced from 24px */
}

.tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #888;
  padding: 3px 10px; /* Reduced from 4px 12px */
  border-radius: 50px;
  font-size: 11px; /* Reduced from 12px */
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

/* Link Styles */
.card-link-wrapper {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.card-link-wrapper.no-link {
  cursor: default;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px; /* Added explicit font size */
  transition: all 0.3s ease;
  position: relative;
}

.card-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s ease;
}

.card-link-wrapper:hover .card-link::after {
  width: 100%;
}

.card-link svg {
  transition: transform 0.3s ease;
}

.card-link-wrapper:hover .card-link svg {
  transform: translate(2px, -2px);
}

.coming-soon {
  color: #666;
  cursor: not-allowed;
}

.coming-soon::after {
  display: none;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portfolio-card {
  animation: fadeInUp 0.8s ease-out backwards;
}

.portfolio-card:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-card:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-card:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-card:nth-child(4) {
  animation-delay: 0.4s;
}
.portfolio-card:nth-child(5) {
  animation-delay: 0.5s;
}

/* Portfolio Carousel Wrapper */
.portfolio-carousel-wrapper {
  position: relative;
}

.portfolio-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #00ffff;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.portfolio-arrow svg {
  width: 34px;
  height: 34px;
}

.portfolio-arrow:hover {
  transform: translateY(-50%) scale(1.2);
}

.portfolio-arrow.show {
  opacity: 1;
  visibility: visible;
}

.portfolio-arrow-left {
  left: -20px;
}

.portfolio-arrow-right {
  right: -20px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .portfolio-card.featured {
    grid-column: span 1;
  }
}

/* Hide arrows on desktop */
@media (min-width: 901px) {
  .portfolio-arrow {
    display: none !important;
  }
}

/* Tablet/Mobile: Horizontal scroll carousel */
@media (max-width: 900px) {
  .portfolio-grid {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 255, 0.5) rgba(20, 20, 30, 0.3);
    padding: 0 calc((100vw - 350px) / 2) 15px;
    grid-template-columns: unset;
  }

  .portfolio-grid::-webkit-scrollbar {
    height: 8px;
  }

  .portfolio-grid::-webkit-scrollbar-track {
    background: rgba(20, 20, 30, 0.3);
    border-radius: 10px;
  }

  .portfolio-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.5);
    border-radius: 10px;
  }

  .portfolio-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.7);
  }

  .portfolio-card {
    flex: 0 0 auto;
    width: 350px;
    height: 560px;
    scroll-snap-align: center;
  }

  .portfolio-card.featured {
    width: 350px;
  }

  .card-description {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .portfolio-section {
    padding: 60px 16px;
  }

  .portfolio-header {
    margin-bottom: 60px;
  }

  .portfolio-card {
    height: 530px;
  }

  .card-content {
    padding: 20px;
  }

  .card-title {
    font-size: 1.2rem;
  }

  .card-description {
    font-size: 11px;
  }

  .project-number {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .portfolio-title {
    font-size: 2rem;
  }

  .portfolio-subtitle {
    font-size: 1rem;
  }

  .portfolio-card {
    height: 500px;
  }

  .card-image-wrapper {
    height: 45%;
  }

  .card-content {
    height: 55%;
    padding: 16px;
  }

  .card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .card-title {
    font-size: 1.1rem;
  }

  .card-description {
    font-size: 11px;
    -webkit-line-clamp: 2; /* Even fewer lines on mobile */
  }

  .tag {
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* Dark theme enhancements */
@media (prefers-color-scheme: light) {
  .portfolio-section {
    background: #f5f5f5;
  }

  .portfolio-card {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .card-content {
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .portfolio-title .title-line {
    background: linear-gradient(to right, #000000 0%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .card-title {
    color: #000;
  }

  .card-description {
    color: #555;
  }

  .project-number {
    color: rgba(0, 0, 0, 0.1);
  }

  .tag {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #555;
  }

  @media (hover: hover) {
    .portfolio-card:hover .tag {
      border-color: rgba(0, 0, 0, 0.3);
      color: #000;
    }
  }

  .portfolio-card.active .tag {
    border-color: rgba(0, 0, 0, 0.3);
    color: #000;
  }

  .card-link {
    color: #000;
  }
}

/* //////////////////////////////////////// */
/* Testimonials Section */
/* Testimonials Section */
#testimonials {
  background: transparent; /* Transparent for liquid glass to show grid */
  padding: 100px 20px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.testimonials-header {
  text-align: center;
  margin-bottom: 60px;
}

.testimonials-header h2 {
  font-size: 3rem;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: -0.5px;
}

.testimonials-subtitle {
  font-size: 1.1rem;
  color: #888;
  max-width: 600px;
  margin: 0 auto;
}

/* Trustindex Widget Container */
.trustindex-widget-container {
  margin: 60px 0;
  min-height: 400px;
}

/* Override Trustindex Styles to Match Your Brand */
.trustindex-widget-container * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif !important;
}

/* Hide the Trustindex verified badge and tooltip with grammatical errors */
.trustindex-widget-container .ti-widget-container .ti-header .ti-verified-badge::after,
.trustindex-widget-container [class*="verified"]::after,
.trustindex-widget-container [data-tippy-root],
.tippy-box,
[id^="tippy-"],
[data-tippy-root] *,
.tippy-content,
.ti-tooltip,
[class*="tippy"],
.trustindex-widget-container [class*="verified-badge"],
.trustindex-widget-container a[href*="trustindex.io"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Call to Action */
.testimonials-cta {
  text-align: center;
  margin-top: 60px;
}

/* Write review button styles moved to buttons.css */

.cta-subtext {
  margin-top: 15px;
  font-size: 0.95rem;
  color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
  #testimonials {
    padding: 60px 20px;
  }

  .testimonials-header h2 {
    font-size: 2rem;
  }

  .testimonials-subtitle {
    font-size: 1rem;
  }

  .trustindex-widget-container {
    margin: 40px 0;
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .testimonials-header h2 {
    font-size: 1.75rem;
  }
}

/* ========================================= */
/* LIGHT MODE OVERRIDES */
/* ========================================= */

[data-theme="light"] {
  /* Global text colors */
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-muted: #718096;

  /* Background colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;

  /* Accent colors - slightly darker for better contrast on light bg */
  --accent-purple: #5b21b6;
  --accent-green: #059669;
  --border-color: rgba(93, 173, 226, 0.5);
}

/* Set body/html background to white with grid in light mode */
[data-theme="light"] body,
[data-theme="light"] html {
  background: #ffffff;
}

[data-theme="light"] .main-content {
  background: #ffffff !important;
  overflow-x: hidden;
}

/* Hide mobile background image in light mode */
[data-theme="light"] .mobile-background {
  display: none !important;
}

[data-theme="light"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, #e5e7eb 1px, transparent 1px),
    linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
  background-size: 45px 45px;
  z-index: -1;
  pointer-events: none;
}

[data-theme="light"] body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #E4E3F9 0%, #F6DAE9 100%);
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

/* Override ALL section backgrounds to be transparent/white in light mode */
[data-theme="light"] section,
[data-theme="light"] .journey-section,
[data-theme="light"] .hp-blog-magazine,
[data-theme="light"] .pricing-section,
[data-theme="light"] .quote-section,
[data-theme="light"] .portfolio-section,
[data-theme="light"] #testimonials {
  background: transparent !important;
}

/* Remove gradient overlays from section ::before and ::after pseudo-elements */
[data-theme="light"] .journey-section::before,
[data-theme="light"] .portfolio-section::before,
[data-theme="light"] .hp-blog-magazine::before,
[data-theme="light"] .quote-section::before,
[data-theme="light"] .quote-section::after {
  display: none !important;
}

/* Remove all section backgrounds in light mode - just use page default */
[data-theme="light"] .services-section {
  background: transparent;
}

[data-theme="light"] .services-heading,
[data-theme="light"] .services-gradient-text {
  background: linear-gradient(135deg, #1a1a1a 0%, #5b21b6 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .services-tag {
  color: #5b21b6;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Journey Section */
[data-theme="light"] .journey-section {
  background: transparent;
}

[data-theme="light"] .journey-heading {
  color: var(--text-primary);
}

[data-theme="light"] .journey-gradient-text {
  background: linear-gradient(135deg, #818cf8 0%, #5b21b6 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Journey cards light mode - Liquid Glass */
[data-theme="light"] .journey-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(245, 248, 255, 0.28) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .journey-card::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 65%
    );
}

[data-theme="light"] .journey-card::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.00) 30%,
    rgba(0, 0, 0, 0.03) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -16px 24px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .journey-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .journey-card-title {
  color: #1a1a1a;
}

[data-theme="light"] .journey-card-description {
  color: #4a5568;
}

[data-theme="light"] .services-hint {
  color: #4a5568;
}

[data-theme="light"] .journey-main-title {
  color: #1a1a1a;
}

[data-theme="light"] .journey-subheading {
  color: #4a5568;
}

[data-theme="light"] .journey-description {
  color: #4a5568;
}

/* Make all major headings match the journey gradient style */
[data-theme="light"] .hp-device-word,
[data-theme="light"] .services-gradient-text,
[data-theme="light"] .testimonials-header h2,
[data-theme="light"] .portfolio-title .title-line,
[data-theme="light"] .hp-blog-title,
[data-theme="light"] .pricing-title-gradient,
[data-theme="light"] .quote-title-gradient {
  background: linear-gradient(135deg, #818cf8 0%, #5b21b6 50%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: 'Exo', sans-serif !important;
  font-size: clamp(1.5rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Pricing Section */
[data-theme="light"] .pricing-section {
  background: transparent;
}

[data-theme="light"] .pricing-header h2,
[data-theme="light"] .pricing-title {
  color: var(--text-primary);
}

[data-theme="light"] .pricing-subtitle {
  color: var(--text-secondary);
}

/* Pricing Card - Liquid Glass Light Mode */
[data-theme="light"] .pricing-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(245, 248, 255, 0.28) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .pricing-card::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 65%
    );
}

[data-theme="light"] .pricing-card::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 25%,
    rgba(0, 0, 0, 0.03) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

[data-theme="light"] .pricing-card:hover {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .pricing-card-title {
  color: var(--text-primary);
}

[data-theme="light"] .pricing-card-price {
  color: var(--primary-color);
}

[data-theme="light"] .pricing-card-feature {
  color: var(--text-secondary);
}

/* Pricing card text elements */
[data-theme="light"] .pricing-package-name {
  color: #1a1a1a;
}

[data-theme="light"] .pricing-tagline {
  color: #4a5568;
}

[data-theme="light"] .pricing-amount {
  color: #1a1a1a;
}

[data-theme="light"] .pricing-period {
  color: #4a5568;
}

[data-theme="light"] .pricing-commitment {
  color: #4a5568;
}

[data-theme="light"] .pricing-feature-item.pricing-included {
  color: #1a1a1a;
}

[data-theme="light"] .pricing-feature-item.pricing-excluded {
  color: #9ca3af;
}

[data-theme="light"] .pricing-feature-item.pricing-premium {
  color: #5b21b6;
}

/* Additional Costs Section */
[data-theme="light"] .pricing-fees-title {
  background: none !important;
  -webkit-text-fill-color: #000000 !important;
  color: #000000;
}

[data-theme="light"] .pricing-category-title {
  color: #1a1a1a;
}

[data-theme="light"] .pricing-category-icon {
  color: #5b21b6;
}

/* Pricing Fee Card - Liquid Glass Light Mode */
[data-theme="light"] .pricing-fee-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(245, 248, 255, 0.28) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .pricing-fee-card::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 65%
    );
}

[data-theme="light"] .pricing-fee-card::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 25%,
    rgba(0, 0, 0, 0.03) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

[data-theme="light"] .pricing-fee-card:hover {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .pricing-fee-header h5 {
  color: #1a1a1a;
}

[data-theme="light"] .pricing-fee-badge {
  background: rgba(91, 33, 182, 0.15);
  color: #5b21b6;
  border-color: rgba(91, 33, 182, 0.3);
}

[data-theme="light"] .pricing-fee-badge.pricing-optional {
  background: rgba(147, 51, 234, 0.15);
  color: #7c3aed;
  border-color: rgba(147, 51, 234, 0.3);
}

[data-theme="light"] .pricing-fee-description {
  color: #4a5568;
}

[data-theme="light"] .pricing-detail-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .pricing-detail-label {
  color: #4a5568;
}

[data-theme="light"] .pricing-detail-value {
  color: #5b21b6;
}

[data-theme="light"] .pricing-accordion-icon {
  color: #0099cc;
}

[data-theme="light"] .pricing-trust-banner {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pricing-trust-item {
  color: #000000;
}

[data-theme="light"] .pricing-trust-text {
  color: #000000;
}

[data-theme="light"] .pricing-trust-item i,
[data-theme="light"] .pricing-trust-icon {
  color: #5b21b6;
}

/* Testimonials Section */
[data-theme="light"] #testimonials {
  background: transparent;
}

[data-theme="light"] .testimonials-header h2 {
  color: var(--text-primary);
}

[data-theme="light"] .testimonials-subtitle {
  color: #1a1a1a;
}

[data-theme="light"] .cta-subtext {
  color: #4a5568;
}

/* Portfolio Section */
[data-theme="light"] .portfolio-section {
  background: transparent;
}

[data-theme="light"] .portfolio-title {
  color: var(--text-primary);
}

[data-theme="light"] .portfolio-subtitle {
  color: #1a1a1a;
}

[data-theme="light"] .pricing-section-subtitle {
  color: #1a1a1a;
}

[data-theme="light"] .hp-blog-mag-label {
  color: #5b21b6;
}

[data-theme="light"] .hp-blog-mag-viewall {
  color: #5b21b6;
}

[data-theme="light"] .hp-blog-mag-viewall:hover {
  color: #4a1a94;
}

/* Blog Magazine Section - Liquid Glass Light Mode */
[data-theme="light"] .hp-blog-mag-item {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(245, 248, 255, 0.24) 100%
  );
  -webkit-backdrop-filter: blur(16px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(16px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .hp-blog-mag-item::after {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.10) 25%,
      transparent 50%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.00) 30%,
      rgba(0, 0, 0, 0.02) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

[data-theme="light"] .hp-blog-mag-item:hover {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hp-blog-mag-item-title {
  color: #1a1a1a;
}

[data-theme="light"] .hp-blog-mag-item:hover .hp-blog-mag-item-title {
  color: #5b21b6;
}

[data-theme="light"] .hp-blog-mag-item-date,
[data-theme="light"] .hp-blog-mag-date {
  color: #5b21b6;
}

[data-theme="light"] .hp-blog-mag-item-arrow {
  color: #5b21b6;
}

[data-theme="light"] .hp-blog-mag-title {
  color: #1a1a1a;
}

[data-theme="light"] .hp-blog-mag-headline {
  color: #1a1a1a;
}

[data-theme="light"] .hp-blog-mag-featured:hover .hp-blog-mag-headline {
  color: #5b21b6;
}

[data-theme="light"] .hp-blog-mag-excerpt {
  color: #4a5568;
}

[data-theme="light"] .hp-blog-mag-category {
  background: rgba(91, 33, 182, 0.15);
  color: #5b21b6;
  border-color: rgba(91, 33, 182, 0.3);
}

/* Blog Mag Featured - Liquid Glass Light Mode */
[data-theme="light"] .hp-blog-mag-featured {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(245, 248, 255, 0.28) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .hp-blog-mag-featured::after {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 65%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.00) 25%,
      rgba(0, 0, 0, 0.03) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

[data-theme="light"] .hp-blog-mag-featured:hover {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .quote-section-subtitle {
  color: #1a1a1a;
}

[data-theme="light"] .quote-response-banner {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .quote-response-text {
  color: #000000;
}

[data-theme="light"] .quote-response-item i,
[data-theme="light"] .quote-response-icon {
  color: #5b21b6;
}

/* Quote Card - Liquid Glass Light Mode */
[data-theme="light"] .quote-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(245, 248, 255, 0.28) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .quote-card::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 65%
    );
}

[data-theme="light"] .quote-card::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 25%,
    rgba(0, 0, 0, 0.03) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

[data-theme="light"] .quote-card:hover {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .quote-card-title {
  color: #1a1a1a;
}

/* Portfolio Card - Liquid Glass Light Mode */
[data-theme="light"] .portfolio-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(245, 248, 255, 0.28) 100%
  ) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .portfolio-card:hover {
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Portfolio Card Content - Liquid Glass Light Mode */
[data-theme="light"] .card-content {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(245, 248, 255, 0.28) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .card-content::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 65%
    );
}

[data-theme="light"] .card-title {
  color: #1a1a1a;
}

[data-theme="light"] .card-description {
  color: #4a5568;
}

[data-theme="light"] .tag {
  color: #4a5568;
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .project-number {
  color: rgba(0, 0, 0, 0.08);
}

/* Contact Section */
[data-theme="light"] .contact-section,
[data-theme="light"] #contact {
  background: transparent;
}

[data-theme="light"] .submission-form {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .submission-form input,
[data-theme="light"] .submission-form textarea,
[data-theme="light"] .submission-form select {
  background: rgba(248, 249, 250, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

[data-theme="light"] .submission-form input::placeholder,
[data-theme="light"] .submission-form textarea::placeholder {
  color: var(--text-muted);
}

[data-theme="light"] .submission-form input:focus,
[data-theme="light"] .submission-form textarea:focus,
[data-theme="light"] .submission-form select:focus {
  background: rgba(255, 255, 255, 1);
  border-color: var(--primary-color);
}

[data-theme="light"] .form-title,
[data-theme="light"] .contact-heading {
  color: var(--text-primary);
}

[data-theme="light"] .form-subtitle {
  color: var(--text-secondary);
}

/* Quote Section */
[data-theme="light"] .quote-section {
  background: transparent;
}

[data-theme="light"] .quote-heading {
  color: var(--text-primary);
}

[data-theme="light"] .quote-subtitle {
  color: var(--text-secondary);
}

/* HP Blog Section */
[data-theme="light"] .hp-blog-magazine {
  background: transparent;
}

[data-theme="light"] .hp-blog-title {
  color: var(--text-primary);
}

[data-theme="light"] .hp-blog-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .hp-blog-card-title {
  color: var(--text-primary);
}

[data-theme="light"] .hp-blog-card-excerpt {
  color: var(--text-secondary);
}

/* General text elements */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--text-primary);
}

[data-theme="light"] p {
  color: var(--text-secondary);
}

/* Cards and containers with dark backgrounds */
[data-theme="light"] .card,
[data-theme="light"] .journey-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .service-card,
[data-theme="light"] .portfolio-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Remove dark box shadows in light mode */
[data-theme="light"] * {
  box-shadow: none !important;
}

/* Re-add subtle shadows where needed */
[data-theme="light"] .hero-form-container,
[data-theme="light"] .submission-form,
[data-theme="light"] .pricing-card,
[data-theme="light"] .journey-card,
[data-theme="light"] .portfolio-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Fix white/gray text in hero section for light mode */
[data-theme="light"] .hero-form-title {
  color: #1a1a1a !important;
}

[data-theme="light"] .hero-form-subtitle {
  color: #4a5568 !important;
}

[data-theme="light"] .hero-subtitle {
  color: #4a5568 !important;
}

[data-theme="light"] .nav-text {
  color: #4a5568 !important;
}

/* Make nav items purple when active/highlighted in light mode */
[data-theme="light"] .nav-item:hover .nav-text,
[data-theme="light"] .nav-item.active .nav-text {
  color: #5b21b6 !important;
}

/* Hero nav cards light mode - Liquid Glass */
[data-theme="light"] .card,
[data-theme="light"] .hero-nav-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(245, 248, 255, 0.30) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  backdrop-filter: blur(20px) saturate(160%) contrast(108%) brightness(1.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .card::before,
[data-theme="light"] .hero-nav-card::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.12) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 65%
    );
}

[data-theme="light"] .card::after,
[data-theme="light"] .hero-nav-card::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.00) 25%,
    rgba(0, 0, 0, 0.03) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -20px 30px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .hero-nav-card h2 {
  color: #1a1a1a;
}

[data-theme="light"] .hero-nav-card p {
  color: #4a5568;
}

[data-theme="light"] .hero-nav-card h2::after {
  background: linear-gradient(90deg, transparent, #5b21b6, transparent);
}

/* Hero Timeline Light Mode */
[data-theme="light"] .hero-timeline-label {
  color: #000000;
}

[data-theme="light"] .hero-timeline-item.active .hero-timeline-label {
  color: #000000;
}

[data-theme="light"] .hero-timeline-icon {
  background: #ffffff;
}

[data-theme="light"] .hero-timeline-item.active .hero-timeline-icon {
  background: #ffffff;
  border-color: #0099cc;
  color: #0099cc;
  box-shadow: 0 0 20px rgba(0, 153, 204, 0.4);
}

/* Site health section */
[data-theme="light"] .meter-title {
  color: #1a1a1a !important;
}

[data-theme="light"] .gauge-label {
  color: #4a5568 !important;
}

/* Logo banner edge shadows for light mode */
[data-theme="light"] .logo-banner-container::before {
  background: linear-gradient(90deg, #ffffff, transparent) !important;
}

[data-theme="light"] .logo-banner-container::after {
  background: linear-gradient(90deg, transparent, #ffffff) !important;
}

/* Device demo section light mode */
[data-theme="light"] .hp-device-demo-section {
  background: transparent;
}

[data-theme="light"] .hp-device-overlay {
  background: radial-gradient(
      circle at 20% 50%,
      rgba(93, 173, 226, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(52, 152, 219, 0.04) 0%,
      transparent 50%
    );
}

[data-theme="light"] .hp-device-label {
  color: #5b21b6;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

[data-theme="light"] .hp-device-title {
  color: #1a1a1a;
}

[data-theme="light"] .hp-device-word {
  background: linear-gradient(to right, #1a1a1a 0%, #4a5568 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .hp-device-subtitle {
  color: #4a5568;
}

/* Portfolio Section - Light Mode */
[data-theme="light"] .portfolio-section {
  background: #ffffff !important;
}

[data-theme="light"] .portfolio-arrow {
  color: #53F5F5;
}

[data-theme="light"] .portfolio-grid::-webkit-scrollbar-thumb {
  background: rgba(83, 245, 245, 0.5);
}

[data-theme="light"] .portfolio-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(83, 245, 245, 0.7);
}

[data-theme="light"] .portfolio-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

/* Pricing Arrows - Light Mode */
[data-theme="light"] .pricing-arrow {
  color: #53F5F5;
}

[data-theme="light"] .pricing-cards-grid::-webkit-scrollbar-thumb {
  background: rgba(83, 245, 245, 0.5);
}

[data-theme="light"] .pricing-cards-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(83, 245, 245, 0.7);
}

[data-theme="light"] .pricing-cards-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
/* ========================================= */
/* DARK TECH THEME VARIABLES */
/* ========================================= */
:root {
  --primary-neon: #00ffff;
  --secondary-neon: #ff00ff;
  --accent-neon: #5dade2;
  --dark-bg: #0a0a0f;
  --dark-surface: #141420;
  --dark-border: #2a2a3e;
  --text-primary: #ffffff;
  --text-secondary: #a0a0b8;
  --glow-intensity: 0 0 20px;
  --transition-speed: 0.3s;

  /* ========================================= */
  /* LIQUID GLASS VARIABLES (iOS Material)    */
  /* Tunable knobs for the glass effect        */
  /* ========================================= */
  --lg-blur: 20px;
  --lg-blur-scrolled: 24px;
  --lg-saturate: 160%;              /* Reduced from 180% - less filtery */
  --lg-contrast: 112%;              /* Raised from 105% - more clarity */
  --lg-brightness: 1.06;            /* Subtle lift */
  --lg-brightness-scrolled: 1.04;
  /* iOS-like: very transparent tints for liquid glass */
  --lg-tint-a: rgba(18, 22, 38, 0.08);
  --lg-tint-b: rgba(28, 32, 52, 0.05);
  --lg-tint-scrolled-a: rgba(14, 18, 32, 0.18);
  --lg-tint-scrolled-b: rgba(22, 26, 44, 0.12);
  --lg-border: rgba(255, 255, 255, 0.10);
  --lg-border-scrolled: rgba(255, 255, 255, 0.15);
  --lg-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
  --lg-shadow-scrolled: 0 8px 28px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  /* Specular highlight settings - lens-like, not plasticky */
  --lg-highlight-opacity: 0.10;
  --lg-highlight-scrolled-opacity: 0.07;
  --lg-bloom-opacity: 0.06;
  --lg-bloom-scrolled-opacity: 0.04;
  /* Rim/thickness settings - material depth */
  --lg-rim-ring: rgba(255, 255, 255, 0.06);
  --lg-rim-top: rgba(255, 255, 255, 0.18);
  --lg-rim-depth: rgba(0, 0, 0, 0.12);
  --lg-rim-ring-scrolled: rgba(255, 255, 255, 0.08);
  --lg-rim-top-scrolled: rgba(255, 255, 255, 0.22);
  --lg-rim-depth-scrolled: rgba(0, 0, 0, 0.16);
}

/* ========================================= */
/* NAVBAR STYLES */
/* ========================================= */

/* ========================================= */
/* Base Navbar - Layout Container Only       */
/* ========================================= */
.navbar {
  position: fixed;
  min-height: 100px;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.5rem 0;
  transition: all var(--transition-speed) ease-in-out;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;

  /* Layout only - NO glass effects here */
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Navbar pseudo-elements disabled - using .nav-backdrop instead */
.navbar::before,
.navbar::after {
  display: none;
}

/* Ensure ALL navbar content stays above glass layers */
.navbar > * {
  position: relative;
  z-index: 2;
}

/* ========================================= */
/* NAV BACKDROP - iOS Material Glass Surface */
/* ========================================= */
.nav-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  /* Base: hidden for older browsers */
  overflow: hidden;
  isolation: isolate;

  /* iOS Material: tinted gradient overlay */
  background: linear-gradient(
    180deg,
    var(--lg-tint-a) 0%,
    var(--lg-tint-b) 100%
  );

  /* iOS Vibrancy: blur + saturate + contrast + brightness */
  -webkit-backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness));
  backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness));

  /* Subtle border for definition */
  border: 1px solid var(--lg-border);

  /* Soft elevation shadow - no outer glow */
  box-shadow: var(--lg-shadow);

  /* Smooth transitions */
  transition: all var(--transition-speed) ease-in-out;
}

/* Progressive enhancement: use clip if supported */
@supports (overflow: clip) {
  .nav-backdrop,
  .navbar.scrolled .nav-backdrop {
    overflow: clip;
  }
}

/* ========================================= */
/* Specular Highlight + Bloom (iOS-like)     */
/* ========================================= */
.nav-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  /* Diagonal specular highlight + curved bloom (lens effect) */
  background:
    /* Diagonal highlight streak (115deg) */
    linear-gradient(
      115deg,
      rgba(255, 255, 255, var(--lg-highlight-opacity)) 0%,
      rgba(255, 255, 255, calc(var(--lg-highlight-opacity) * 0.4)) 25%,
      transparent 50%
    ),
    /* Curved bloom near top-left corner */
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, var(--lg-bloom-opacity)) 0%,
      transparent 65%
    );

  /* Screen blend for natural light - degrades gracefully */
  mix-blend-mode: screen;
  opacity: 1;
  transition: background var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

/* Fallback for browsers with mix-blend-mode issues */
@supports not (mix-blend-mode: screen) {
  .nav-backdrop::before {
    opacity: 0.85;
  }
}

/* ========================================= */
/* Thickness / Rim Effects (Glass Depth)     */
/* ========================================= */
.nav-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;

  /* Compression gradient: subtle top-bright / bottom-dark for thickness */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );

  /* iOS-like thickness: hairline ring + top rim + bottom depth */
  box-shadow:
    inset 0 0 0 1px var(--lg-rim-ring),
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 -16px 24px var(--lg-rim-depth);

  transition: box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
}

/* Scanline - DISABLED for iOS material glass design */
.nav-scanline {
  display: none;
}

@media (max-width: 1032px) {
  .navbar {
    display: none;
  }
}

@media (max-height: 675px) {
  .navbar {
    display: block;
  }
}

/* ========================================= */
/* Scrolled Navbar State                     */
/* ========================================= */
.navbar.scrolled {
  top: 10px;
  left: 1rem;
  right: 1rem;
  min-height: 85px;
  height: 85px;
  border-radius: 15px;
  padding: 1rem 0;
  /* Layout only - glass is on .nav-backdrop */
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Scrolled pseudo-elements stay disabled */
.navbar.scrolled::before,
.navbar.scrolled::after {
  display: none;
}

/* ========================================= */
/* Scrolled Nav Backdrop - Denser Material   */
/* ========================================= */
.navbar.scrolled .nav-backdrop {
  border-radius: 15px;

  /* Denser tint when floating */
  background: linear-gradient(
    180deg,
    var(--lg-tint-scrolled-a) 0%,
    var(--lg-tint-scrolled-b) 100%
  );

  /* Enhanced vibrancy */
  -webkit-backdrop-filter:
    blur(var(--lg-blur-scrolled))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness-scrolled));
  backdrop-filter:
    blur(var(--lg-blur-scrolled))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness-scrolled));

  /* Slightly more visible border */
  border: 1px solid var(--lg-border-scrolled);

  /* Stronger shadow when floating */
  box-shadow: var(--lg-shadow-scrolled);
}

/* Scrolled specular - slightly reduced */
.navbar.scrolled .nav-backdrop::before {
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, var(--lg-highlight-scrolled-opacity)) 0%,
      rgba(255, 255, 255, calc(var(--lg-highlight-scrolled-opacity) * 0.5)) 20%,
      transparent 45%
    ),
    radial-gradient(
      ellipse 60% 40% at 15% 0%,
      rgba(255, 255, 255, var(--lg-bloom-scrolled-opacity)) 0%,
      transparent 70%
    );
}

/* Scrolled rim - denser depth */
.navbar.scrolled .nav-backdrop::after {
  border-radius: 15px;
  /* Slightly stronger compression for floating state */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.00) 30%,
    rgba(0, 0, 0, 0.06) 100%
  );
  box-shadow:
    inset 0 0 0 1px var(--lg-rim-ring-scrolled),
    inset 0 1px 0 var(--lg-rim-top-scrolled),
    inset 0 -14px 22px var(--lg-rim-depth-scrolled);
}

/* Navbar Links Container */
.navbar-links {
  display: flex;
  justify-content: right;
  align-items: center;
  list-style: none;
  margin: 6px 2rem 0 0;
  padding: 0;
}

/* Navbar List Items */
.navbar-links > li {
  margin: 0 10px;
  position: relative;
}

@media (max-width: 675px) and (max-height: 675px) {
  .navbar .navbar-links li {
    margin: 0 0.2rem;
    padding: 0;
  }
}

/* Navbar Links */
.navbar-links a {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all var(--transition-speed);
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  line-height: 1;
  vertical-align: middle;
  /* Subtle shadow for readability on busy backgrounds */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.navbar-links > li > a:hover {
  color: var(--primary-neon);
  text-shadow: 0 0 10px var(--primary-neon);
  transform: translateY(-2px);
}

/* Nav underline animation */
.nav-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--primary-neon),
    var(--secondary-neon)
  );
  transition: width var(--transition-speed);
}

.navbar-links a:hover .nav-underline {
  width: 80%;
}

@media (max-width: 1415px) {
  .navbar .navbar-links a {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
}

@media (max-height: 675px) {
  .navbar .navbar-links a {
    font-size: 0.5rem;
    padding: 0.5rem;
  }
}

/* Navbar Button Styling - MOVED TO buttons.css */

/* ========================================= */
/* DROPDOWN STYLES */
/* ========================================= */

/* Dropdown Parent */
.navbar-dropdown {
  position: relative;
}

/* Dropdown indicator */
.dropdown-indicator {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-secondary);
  transition: all var(--transition-speed);
}

.navbar-dropdown:hover .dropdown-indicator {
  border-top-color: var(--primary-neon);
  transform: translateY(-50%) rotate(180deg);
}

/* Dropdown Menu - Liquid Glass Panel */
.navbar-dropdown-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 0;
  margin: 0.5rem 0 0 0;
  border-radius: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-speed) ease;
  min-width: 200px;
  white-space: nowrap;

  /* Liquid Glass Panel Effect */
  isolation: isolate;
  background: linear-gradient(
    180deg,
    rgba(15, 20, 35, 0.85) 0%,
    rgba(10, 15, 25, 0.9) 100%
  );

  /* Frosted blur for dropdown */
  -webkit-backdrop-filter: blur(20px) saturate(150%) contrast(105%);
  backdrop-filter: blur(20px) saturate(150%) contrast(105%);

  /* Glass rim border */
  border: 1px solid rgba(100, 180, 255, 0.2);

  /* Enhanced shadow for floating panel */
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.5),
    0 5px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Dropdown specular highlight - disabled */
.navbar-dropdown-menu::before {
  display: none;
}

/* Dropdown hairline rim */
.navbar-dropdown-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -12px 20px rgba(0, 0, 0, 0.12);
}

.navbar-dropdown:hover .navbar-dropdown-menu {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

/* Dropdown glow effect - disabled (no neon glow per glass spec) */
.dropdown-glow {
  display: none;
}

/* Dropdown content above any future glass layers */
.navbar-dropdown-menu > * {
  position: relative;
  z-index: 1;
}

/* Dropdown Menu Items */
.navbar-dropdown-menu li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.navbar-dropdown-menu li::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}

.navbar-dropdown-menu li:hover::before {
  left: 100%;
}

/* Menu bullet points */
.menu-bullet {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--primary-neon);
  margin-right: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px var(--primary-neon);
  transition: all var(--transition-speed);
}

/* Dropdown Menu Links */
.navbar-dropdown-menu li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.75rem 1rem 0.75rem 1.5rem;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all var(--transition-speed);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  line-height: 1;
}

.navbar-dropdown-menu li a:hover {
  color: var(--primary-neon) !important;
  background: rgba(0, 255, 255, 0.05);
  padding-left: 2rem;
}

.navbar-dropdown-menu li a:hover .menu-bullet {
  transform: scale(1.5);
  background: var(--secondary-neon);
  box-shadow: 0 0 10px var(--secondary-neon);
}

/* ========================================= */
/* MOBILE MENU STYLES */
/* ========================================= */

/* Mobile Menu Container */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}

@media (max-width: 1032px) {
  .mobile-menu {
    display: block;
  }
}

@media (max-height: 675px) {
  .mobile-menu {
    display: none !important;
  }
}

/* Mobile Header Bar - iOS Material Glass Effect */
.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  z-index: 1002;
  transition: all 0.3s ease;
  margin: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;

  /* iOS Material Glass */
  isolation: isolate;
  background: linear-gradient(
    180deg,
    var(--lg-tint-a) 0%,
    var(--lg-tint-b) 100%
  );
  -webkit-backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness));
  backdrop-filter:
    blur(var(--lg-blur))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness));
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow);
}

/* Mobile header specular highlight */
.mobile-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, var(--lg-highlight-opacity)) 0%,
      rgba(255, 255, 255, calc(var(--lg-highlight-opacity) * 0.5)) 20%,
      transparent 45%
    ),
    radial-gradient(
      ellipse 60% 40% at 15% 0%,
      rgba(255, 255, 255, var(--lg-bloom-opacity)) 0%,
      transparent 70%
    );
  mix-blend-mode: screen;
}

/* Mobile header rim effect */
.mobile-header::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--lg-rim-ring),
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 -12px 18px var(--lg-rim-depth);
}

/* Ensure mobile header content above glass */
.mobile-header > * {
  position: relative;
  z-index: 1;
}

.mobile-header.scrolled {
  top: 10px;
  left: 10px;
  right: 10px;
  border-radius: 16px;

  /* Denser glass when floating */
  background: linear-gradient(
    180deg,
    var(--lg-tint-scrolled-a) 0%,
    var(--lg-tint-scrolled-b) 100%
  );
  -webkit-backdrop-filter:
    blur(var(--lg-blur-scrolled))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness-scrolled));
  backdrop-filter:
    blur(var(--lg-blur-scrolled))
    saturate(var(--lg-saturate))
    contrast(var(--lg-contrast))
    brightness(var(--lg-brightness-scrolled));
  border: 1px solid var(--lg-border-scrolled);
  box-shadow: var(--lg-shadow-scrolled);
}

.mobile-header.scrolled::before {
  border-radius: 16px;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, var(--lg-highlight-scrolled-opacity)) 0%,
      rgba(255, 255, 255, calc(var(--lg-highlight-scrolled-opacity) * 0.5)) 20%,
      transparent 45%
    ),
    radial-gradient(
      ellipse 60% 40% at 15% 0%,
      rgba(255, 255, 255, var(--lg-bloom-scrolled-opacity)) 0%,
      transparent 70%
    );
}

.mobile-header.scrolled::after {
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px var(--lg-rim-ring-scrolled),
    inset 0 1px 0 var(--lg-rim-top-scrolled),
    inset 0 -12px 18px var(--lg-rim-depth-scrolled);
}

/* Mobile Logo */
.mobile-logo {
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 3px;
  background: linear-gradient(
    90deg,
    var(--primary-neon),
    var(--secondary-neon)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hamburger Menu Button */
.hamburger-menu {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1003;
}

.burger-lines {
  width: 25px;
  height: 20px;
  position: relative;
}

.burger-lines span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--primary-neon);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 0 5px var(--primary-neon);
}

.burger-lines span:nth-child(1) {
  top: 0;
}

.burger-lines span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.burger-lines span:nth-child(3) {
  bottom: 0;
}

/* Hamburger Active State */
.hamburger-menu.active .burger-lines span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger-menu.active .burger-lines span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .burger-lines span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Full Screen Menu */
.mobile-fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 15, 0.98) 0%,
    rgba(20, 20, 32, 0.98) 100%
  );
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 1001;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hide scrollbar by default but keep functionality */
.mobile-fullscreen-menu::-webkit-scrollbar {
  width: 6px;
}

.mobile-fullscreen-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-fullscreen-menu::-webkit-scrollbar-thumb {
  background: var(--primary-neon);
  border-radius: 3px;
  opacity: 0.5;
}

.mobile-fullscreen-menu::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-neon);
}

.mobile-fullscreen-menu.active {
  transform: translateX(0);
}

/* Mobile Menu Content */
.mobile-menu-content {
  padding: 70px 0 1rem;
}

/* Main Navigation */
.mobile-nav-main {
  padding: 0 1rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.mobile-nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}

.mobile-nav-link:hover::before,
.mobile-nav-link:active::before {
  left: 100%;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  color: var(--primary-neon);
  padding-left: 1.5rem;
}

.mobile-nav-link.featured {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1),
    rgba(255, 0, 255, 0.1)
  );
  border: 1px solid var(--primary-neon);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

.nav-number {
  font-size: 0.8rem;
  color: var(--primary-neon);
  margin-right: 1rem;
  font-family: monospace;
}

.nav-text {
  flex: 1;
  text-transform: uppercase;
}

.nav-arrow {
  font-size: 1.5rem;
  color: var(--primary-neon);
  transition: transform 0.3s;
}

.mobile-nav-link:hover .nav-arrow {
  transform: translateX(5px);
}

.mobile-nav-link.expandable .nav-arrow {
  transition: transform 0.3s;
}

.mobile-nav-link.expandable.active .nav-arrow {
  transform: rotate(45deg);
}

/* Mobile Submenus */
.mobile-submenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(20, 20, 32, 0.98) 0%,
    rgba(10, 10, 15, 0.98) 100%
  );
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 1002;
  overflow-y: auto;
  padding-top: 60px;
}

.mobile-submenu.active {
  transform: translateX(0);
}

.submenu-back {
  font-family: 'Exo', sans-serif;
  width: calc(100% - 2rem);
  margin: 1rem;
  padding: 1rem;
  background: transparent;
  border: 1px solid var(--dark-border);
  color: var(--primary-neon);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 5px;
}

.submenu-back:hover {
  background: rgba(0, 255, 255, 0.1);
  border-color: var(--primary-neon);
}

.submenu-title {
  padding: 0 2rem 1rem;
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    var(--primary-neon),
    var(--secondary-neon)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--dark-border);
  margin-bottom: 1rem;
}

.submenu-links {
  padding: 0 1rem;
}

.submenu-links a {
  display: block;
  padding: 1.2rem 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.submenu-links a::after {
  content: '→';
  position: absolute;
  right: 1rem;
  color: var(--primary-neon);
  opacity: 0;
  transition: all 0.3s;
}

.submenu-links a:hover {
  color: var(--primary-neon);
  padding-left: 1.5rem;
  background: rgba(0, 255, 255, 0.05);
}

.submenu-links a:hover::after {
  opacity: 1;
  right: 1.5rem;
}

/* ========================================= */
/* LOGO STYLES */
/* ========================================= */

/* Standalone Logo */
.standalone-logo {
  position: fixed;
  top: 50px;
  left: 1rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.3s ease;
  transform: translateY(-50%);
  will-change: transform;
}

.standalone-logo a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  position: relative;
}

/* Logo glow effect - only behind the circle logo image */
.logo-glow {
  position: absolute;
  top: 50%;
  left: 2.25rem;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  background: radial-gradient(
    circle,
    rgba(0, 255, 255, 0.25) 0%,
    transparent 70%
  );
  filter: blur(16px);
  opacity: 0;
  transition: opacity var(--transition-speed);
  z-index: -1;
  pointer-events: none;
}

.standalone-logo:hover .logo-glow {
  opacity: 1;
}

/* Logo Image */
.logo-image {
  height: 4.5rem;
  width: 4.5rem;
  object-fit: contain;
  transition: all var(--transition-speed);
}

.standalone-logo:hover .logo-image {
  filter: drop-shadow(0 0 12px var(--primary-neon));
}

/* Logo Text */
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-top: 0.1rem;
  margin-left: 0.8rem;
}

.logo-primary {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 10px;
  color: #ffffff;
  transition: all var(--transition-speed);
}

.logo-secondary {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 4px;
  color: #ffffff;
  margin-top: -10px;
  transition: all var(--transition-speed);
}

/* Logo text hover - no glow, only image gets highlight */
.standalone-logo:hover .logo-primary,
.standalone-logo:hover .logo-secondary {
  text-shadow: none;
}

/* Scrolled Logo State */
.scrolled .standalone-logo {
  top: 52.5px;
  left: calc(1rem + 20px);
  transform: translateY(-50%);
}

.scrolled .logo-image {
  height: 3.5rem;
  width: 3.5rem;
}

/* Media Queries for Logo */
@media (max-width: 1180px) {
  .logo-primary,
  .logo-secondary {
    display: none;
  }

  .logo-image {
    height: 4rem;
    width: 4rem;
  }
}

@media (max-width: 1032px) {
  .standalone-logo {
    display: none;
  }
}

/* ========================================= */
/* MOBILE HOME BUTTON */
/* ========================================= */

.mobile-home-button {
  display: none;
  position: absolute;
  width: 60px;
  height: 60px;
  left: 80%;
  transform: translateX(-50%);
  background: linear-gradient(
    135deg,
    rgba(20, 20, 32, 0.98),
    rgba(10, 10, 15, 0.98)
  );
  border-radius: 0 0 8px 8px;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  text-decoration: none;
  border: 1px solid var(--dark-border);
  border-top: none;
  transition: all var(--transition-speed);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
}

@media (max-width: 1032px) {
  .mobile-home-button {
    display: flex;
  }
}

@media (max-height: 675px) {
  .mobile-home-button {
    display: none !important;
  }
}

.mobile-home-button:hover {
  border-color: var(--primary-neon);
  box-shadow: 0 6px 20px rgba(0, 255, 255, 0.4);
}

/* Mobile button glow */
.mobile-btn-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 255, 0.2) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--transition-speed);
}

.mobile-home-button:hover .mobile-btn-glow {
  opacity: 1;
}

.mobile-home-button svg {
  width: 24px;
  height: 24px;
  color: var(--primary-neon);
  filter: drop-shadow(0 0 3px var(--primary-neon));
  transition: all var(--transition-speed);
}

.mobile-home-button:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px var(--primary-neon));
}

/* ========================================= */
/* BACK TO TOP BUTTON */
/* ========================================= */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    rgba(20, 20, 32, 0.98),
    rgba(10, 10, 15, 0.98)
  );
  border: 1px solid var(--dark-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-speed);
  z-index: 999;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-5px);
  border-color: var(--primary-neon);
  box-shadow: 0 8px 25px rgba(0, 255, 255, 0.4);
}

.back-to-top svg {
  width: 30px;
  height: 30px;
  color: var(--primary-neon);
  filter: drop-shadow(0 0 3px var(--primary-neon));
}

/* Pulse ring animation */
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 2px solid var(--primary-neon);
  border-radius: 50%;
  opacity: 0;
}

.back-to-top:hover .pulse-ring {
  animation: pulse-ring 1s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Mobile responsiveness for back-to-top button */
@media (max-width: 768px) {
  .back-to-top {
    bottom: calc(76px + env(safe-area-inset-bottom)); /* 56px bottom nav + 20px spacing */
    right: 20px;
    width: 52px;
    height: 52px;
  }

  .back-to-top svg {
    width: 26px;
    height: 26px;
  }
}

/* Make the non-clickable toggle look like a link */
.navbar-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative; /* anchor the arrow + underline here */
  padding: 0.5rem 1.5rem 0.5rem 1rem; /* right pad = space for arrow */
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-secondary);
  cursor: default; /* not clickable */
  transition: all var(--transition-speed);
  line-height: 1;
  vertical-align: middle;
  /* Subtle shadow for readability on busy backgrounds */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Match hover visuals of your real links */
.navbar-dropdown:hover .navbar-dropdown-toggle {
  color: var(--primary-neon);
  text-shadow: 0 0 10px var(--primary-neon);
  transform: translateY(-2px);
}

/* Let the underline animate on hover like your links do */
.navbar-dropdown:hover .navbar-dropdown-toggle .nav-underline {
  width: 80%;
}

/* Re-scope the arrow to the toggle so it sits on the right edge cleanly */
.navbar-dropdown-toggle .dropdown-indicator {
  position: absolute;
  right: 6px; /* adjust if needed */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-secondary);
  transition: all var(--transition-speed);
}

/* Hover state for the arrow */
.navbar-dropdown:hover .dropdown-indicator {
  border-top-color: var(--primary-neon);
  transform: translateY(-50%) rotate(180deg);
}

/* Ensure shared base styles apply to both links and the span toggle */
.navbar-links a,
.navbar-dropdown-toggle {
  text-decoration: none;
}

/* ========================================= */
/* BOTTOM NAVIGATION BAR (MOBILE) - Liquid Glass */
/* ========================================= */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;

  /* Safe area for iOS notch */
  padding-bottom: env(safe-area-inset-bottom);

  /* Liquid Glass Effect */
  isolation: isolate;
  background: linear-gradient(
    0deg,
    var(--lg-tint-scrolled-a) 0%,
    var(--lg-tint-scrolled-b) 100%
  );
  -webkit-backdrop-filter: blur(var(--lg-blur-scrolled)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
  backdrop-filter: blur(var(--lg-blur-scrolled)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
  border-top: 1px solid var(--lg-border-scrolled);
  box-shadow:
    0 -4px 30px rgba(0, 0, 0, 0.3),
    0 -1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Bottom nav specular highlight - disabled */
.bottom-nav::before {
  display: none;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 4px 8px;
  gap: 2px;
  line-height: 1;
  box-sizing: border-box;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--primary-neon);
}

.bottom-nav-item i {
  font-size: 24px;
}

.bottom-nav-item .nav-icon {
  width: 24px;
  height: 24px;
}

.bottom-nav-label {
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  font-family: 'Exo', sans-serif;
}

/* Primary CTA item */
.bottom-nav-primary {
  color: var(--primary-neon);
  font-weight: 600;
}

/* Phone button - circular and elevated */
.bottom-nav-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  color: #000;
  text-decoration: none;
  position: relative;
  bottom: 20px;
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.8),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(0, 255, 255, 0.5);
  transition: all 0.3s ease;
  border: 3px solid rgba(20, 20, 32, 0.98);
}

.bottom-nav-phone:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4),
    0 12px 24px rgba(0, 0, 0, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 0 32px rgba(0, 255, 255, 0.7);
}

.bottom-nav-phone i {
  font-size: 28px;
}

.bottom-nav-phone .nav-icon {
  width: 28px;
  height: 28px;
}

/* Hide on desktop */
@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

/* Add bottom padding to body/main content to prevent overlap */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* ===================================
   SERVICES POPUP MENU (Mobile)
   =================================== */

/* Reset button-specific styles so buttons match anchor tags exactly */
button.bottom-nav-item {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 4px 8px;
  gap: 2px;
  line-height: 1;
  box-sizing: border-box;
}

.services-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.services-popup.show {
  display: flex;
  pointer-events: auto;
}

.services-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.services-popup.show .services-popup-overlay {
  opacity: 1;
}

.services-popup-content {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(135deg, #0a0a14 0%, #1a1a28 100%);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 24px 20px calc(56px + env(safe-area-inset-bottom) + 24px) 20px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -8px 32px rgba(0, 255, 255, 0.15);
  border-top: 2px solid rgba(0, 255, 255, 0.3);
}

.services-popup.show .services-popup-content {
  transform: translateY(0);
}

.services-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.services-popup-header h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  letter-spacing: 2px;
  color: #00ffff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
  margin: 0;
}

.services-popup-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #ffffff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.services-popup-close:hover,
.services-popup-close:focus {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.services-popup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.service-popup-card {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(0, 153, 255, 0.08));
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  min-height: 88px;
}

.service-popup-card:hover,
.service-popup-card:focus {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 153, 255, 0.15));
  border-color: rgba(0, 255, 255, 0.5);
  transform: translateX(8px);
}

.service-popup-card.active {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 153, 255, 0.2));
  border-color: rgba(0, 255, 255, 0.6);
}

.service-popup-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: linear-gradient(135deg, #00ffff, #0099ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #0a0a14;
  flex-shrink: 0;
}

.service-popup-card h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.service-popup-card p {
  font-size: 0.875rem;
  color: #b0b0c0;
  margin: 0;
  line-height: 1.4;
}

/* Hide on desktop */
@media (min-width: 768px) {
  .services-popup {
    display: none !important;
  }
}

/* ========================================= */
/* THEME TOGGLE */
/* ========================================= */

.theme-toggle-wrapper {
  margin: 0 10px;
}

#theme-toggle {
  background: transparent;
  border: 2px solid var(--dark-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-speed);
  position: relative;
  overflow: hidden;
}

#theme-toggle:hover {
  border-color: var(--primary-neon);
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

#theme-toggle svg {
  position: absolute;
  transition: all var(--transition-speed);
  color: var(--text-secondary);
}

#theme-toggle:hover svg {
  color: var(--primary-neon);
}

/* Show sun icon in dark mode (default) */
.sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.moon-icon {
  opacity: 0;
  transform: rotate(180deg) scale(0);
}

/* Show moon icon in light mode */
[data-theme="light"] .sun-icon {
  opacity: 0;
  transform: rotate(-180deg) scale(0);
}

[data-theme="light"] .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Logo glow light mode */
[data-theme="light"] .logo-glow {
  background: radial-gradient(
    circle,
    rgba(93, 173, 226, 0.3) 0%,
    transparent 70%
  );
}

/* Mobile theme toggle button specific styles */
#mobile-theme-toggle .sun-icon {
  opacity: 1;
  transition: all 0.3s ease;
}

#mobile-theme-toggle .moon-icon {
  opacity: 0;
  transition: all 0.3s ease;
}

[data-theme="light"] #mobile-theme-toggle .sun-icon {
  opacity: 0;
  transform: rotate(-180deg) scale(0);
}

[data-theme="light"] #mobile-theme-toggle .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="light"] .standalone-logo:hover .logo-image {
  filter: brightness(0.9) drop-shadow(0 0 10px rgba(93, 173, 226, 0.5));
}

/* ========================================= */
/* LIQUID GLASS - CROSS-BROWSER FALLBACKS   */
/* ========================================= */

/* Firefox fallback (no backdrop-filter support until recent versions) */
@supports not (backdrop-filter: blur(1px)) {
  /* Nav backdrop becomes solid premium surface */
  .nav-backdrop,
  .navbar.scrolled .nav-backdrop {
    /* More opaque background to compensate for lack of blur */
    background: linear-gradient(
      180deg,
      rgba(10, 15, 25, 0.94) 0%,
      rgba(15, 20, 35, 0.92) 100%
    ) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .navbar.scrolled .nav-backdrop {
    background: linear-gradient(
      180deg,
      rgba(10, 15, 25, 0.97) 0%,
      rgba(15, 20, 35, 0.95) 100%
    ) !important;
  }

  /* Simulate frosted texture with multi-angle noise (only in fallback) */
  .nav-backdrop::before {
    background:
      /* Keep specular highlight */
      linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 20%,
        transparent 45%
      ),
      /* Add subtle noise texture */
      repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.012) 0 1px,
        transparent 1px 4px
      ),
      repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.008) 0 1px,
        transparent 1px 5px
      ) !important;
    mix-blend-mode: normal !important;
  }

  /* Mobile header fallback */
  .mobile-header,
  .mobile-header.scrolled {
    background: linear-gradient(
      180deg,
      rgba(10, 15, 25, 0.96) 0%,
      rgba(15, 20, 35, 0.94) 100%
    ) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Dropdown and bottom nav fallback */
  .navbar-dropdown-menu,
  .bottom-nav {
    background: linear-gradient(
      180deg,
      rgba(10, 15, 25, 0.96) 0%,
      rgba(15, 20, 35, 0.94) 100%
    ) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Forced colors mode (high contrast) - disable glass effects entirely */
@media (forced-colors: active) {
  .navbar,
  .navbar.scrolled {
    background: Canvas !important;
    border-color: CanvasText !important;
  }

  .nav-backdrop,
  .navbar.scrolled .nav-backdrop {
    background: Canvas !important;
    border-color: CanvasText !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-backdrop::before,
  .nav-backdrop::after,
  .navbar::before,
  .navbar::after {
    display: none !important;
  }

  .mobile-header,
  .mobile-header.scrolled,
  .navbar-dropdown-menu,
  .bottom-nav {
    background: Canvas !important;
    border-color: CanvasText !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-header::before,
  .navbar-dropdown-menu::before,
  .navbar-dropdown-menu::after {
    display: none !important;
  }

  .navbar-links a,
  .navbar-dropdown-toggle,
  .navbar-dropdown-menu li a {
    color: LinkText !important;
    text-shadow: none !important;
  }

  .navbar-links a:hover,
  .navbar-dropdown-menu li a:hover {
    color: ActiveText !important;
  }
}

/* ========================================= */
/* LIQUID GLASS - REDUCED MOTION            */
/* ========================================= */

@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar.scrolled,
  .nav-backdrop,
  .nav-backdrop::before,
  .nav-backdrop::after,
  .mobile-header,
  .mobile-header.scrolled,
  .navbar-dropdown-menu {
    transition: none !important;
  }

  .nav-backdrop::before,
  .nav-backdrop::after,
  .navbar::before,
  .navbar::after,
  .mobile-header::before,
  .navbar-dropdown-menu::before {
    animation: none !important;
  }

  /* Disable hover transforms */
  .navbar-links > li > a:hover {
    transform: none !important;
  }

  .navbar-dropdown-menu li a:hover {
    padding-left: 1.5rem; /* Keep the padding but no animation */
  }
}

/* ========================================= */
/* LIQUID GLASS - FOCUS STATES (A11Y)       */
/* ========================================= */

/* Clear focus ring for glass surfaces */
.navbar-links a:focus-visible,
.navbar-dropdown-toggle:focus-visible,
.navbar-dropdown-menu li a:focus-visible,
#theme-toggle:focus-visible,
.hamburger-menu:focus-visible {
  outline: 2px solid var(--primary-neon);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ensure focus states work on glass background */
.navbar-links a:focus-visible,
.navbar-dropdown-menu li a:focus-visible {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.3);
}

/* ========================================= */
/* LIQUID GLASS - MOBILE PERFORMANCE        */
/* ========================================= */

/* Reduce blur on mobile for better performance */
@media (max-width: 768px) {
  :root {
    --lg-blur: 14px;
    --lg-blur-scrolled: 18px;
  }
}

/* Further reduce on low-end devices */
@media (max-width: 480px) {
  :root {
    --lg-blur: 10px;
    --lg-blur-scrolled: 14px;
    --lg-saturate: 140%;
  }
}

/* ========================================= */
/* LIQUID GLASS - LIGHT THEME ADJUSTMENTS   */
/* ========================================= */

[data-theme="light"] {
  /* Light theme: brighter, more translucent tints */
  --lg-tint-a: rgba(255, 255, 255, 0.25);
  --lg-tint-b: rgba(245, 248, 255, 0.20);
  --lg-tint-scrolled-a: rgba(255, 255, 255, 0.45);
  --lg-tint-scrolled-b: rgba(245, 248, 255, 0.40);
  --lg-border: rgba(0, 0, 0, 0.08);
  --lg-border-scrolled: rgba(0, 0, 0, 0.12);
  --lg-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --lg-shadow-scrolled: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  /* Light theme specular/bloom */
  --lg-highlight-opacity: 0.25;
  --lg-highlight-scrolled-opacity: 0.18;
  --lg-bloom-opacity: 0.12;
  --lg-bloom-scrolled-opacity: 0.08;
  /* Light theme rim */
  --lg-rim-ring: rgba(255, 255, 255, 0.4);
  --lg-rim-top: rgba(255, 255, 255, 0.7);
  --lg-rim-depth: rgba(0, 0, 0, 0.06);
  --lg-rim-ring-scrolled: rgba(255, 255, 255, 0.5);
  --lg-rim-top-scrolled: rgba(255, 255, 255, 0.8);
  --lg-rim-depth-scrolled: rgba(0, 0, 0, 0.08);
  /* Slightly less vibrancy for light theme */
  --lg-saturate: 160%;
  --lg-brightness: 1.02;
  --lg-brightness-scrolled: 1.0;
}

/* Light theme: navbar logo text - black */
[data-theme="light"] .logo-primary,
[data-theme="light"] .logo-secondary {
  color: #1a1a2e !important;
}

/* Light theme: navbar links - dark text, no shadow */
[data-theme="light"] .navbar-links a,
[data-theme="light"] .navbar-dropdown-toggle {
  color: #1a1a2e;
  text-shadow: none;
}

[data-theme="light"] .navbar-links > li > a:hover,
[data-theme="light"] .navbar-dropdown:hover .navbar-dropdown-toggle {
  color: #0077b6;
  text-shadow: none;
}

/* Light theme: dropdown indicator */
[data-theme="light"] .dropdown-indicator {
  border-top-color: #1a1a2e;
}

[data-theme="light"] .navbar-dropdown:hover .dropdown-indicator {
  border-top-color: #0077b6;
}
/* ===================================
   APP-LIKE MOBILE DENSITY SYSTEM
   Based on iOS HIG and Material Design
   =================================== */

/* -----------------------------------
   TYPOGRAPHY SYSTEM
   iOS-inspired: 17px base, 1.4-1.5 line height
   4 sizes max for hierarchy
   ----------------------------------- */
:root {
  /* Typography Scale - Major Third (1.25) for mobile */
  --font-size-base: clamp(
    1.0625rem,
    0.5vw + 0.9375rem,
    1.125rem
  ); /* 17px-18px */
  --font-size-secondary: clamp(
    0.875rem,
    0.5vw + 0.8125rem,
    0.9375rem
  ); /* 14px-15px */
  --font-size-caption: 0.8125rem; /* 13px */
  --font-size-h1: clamp(1.75rem, 1.287rem + 2.315vw, 3rem); /* 28px-48px */

  /* Line Heights - Tighter than typical web */
  --line-height-tight: 1.25; /* Headings */
  --line-height-base: 1.45; /* Body text */
  --line-height-loose: 1.6; /* Only for long-form content */

  /* Letter Spacing */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* 8pt Grid Spacing System */
  --space-1: 0.5rem; /* 8px */
  --space-2: 1rem; /* 16px */
  --space-3: 1.5rem; /* 24px */
  --space-4: 2rem; /* 32px */
  --space-5: 2.5rem; /* 40px */
  --space-6: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */

  /* Touch Targets - iOS minimum */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-separation-min: 8px;

  /* Layout Margins */
  --margin-mobile: 1rem; /* 16px per iOS */
  --margin-tablet: 1.5rem; /* 24px per iOS */
  --margin-desktop: 2rem; /* 32px */

  /* Header Heights */
  --header-mobile: 56px; /* Sticky header max */
  --header-tablet: 64px;

  /* Colors remain same */
  --primary-neon: #00ffff;
  --secondary-neon: #ff00ff;
  --dark-bg: #0a0a0a;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
}

/* -----------------------------------
   BASE TYPOGRAPHY
   ----------------------------------- */
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

/* Desktop/Mobile Typography Hierarchy */
h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 1.287rem + 2.315vw, 3rem); /* Mobile: 32px → Desktop: 48px */
  color: #ffffff; /* White - primary headlines */
  letter-spacing: 2px;
}

h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.5rem, 1.031rem + 1.875vw, 2.25rem); /* Mobile: 24px → Desktop: 36px */
  color: #ffffff; /* White - section headers */
  letter-spacing: 2px;
}

h3 {
  font-size: clamp(1.25rem, 0.938rem + 1.25vw, 1.75rem); /* Mobile: 20px → Desktop: 28px */
  color: #ffffff; /* White - sub-sections */
}

h4 {
  font-size: clamp(1.125rem, 1.031rem + 0.375vw, 1.5rem); /* Mobile: 18px → Desktop: 24px */
  color: #d1d5db; /* Light gray - card titles */
}

h5 {
  font-size: clamp(1rem, 0.938rem + 0.25vw, 1.25rem); /* Mobile: 16px → Desktop: 20px */
  color: #d1d5db; /* Light gray - small headings */
}

p {
  font-size: 1rem; /* 16px - consistent across devices */
  color: #9ca3af; /* Medium gray - body text */
  margin: 0 0 var(--space-2) 0;
}

small,
.text-small {
  font-size: 0.875rem; /* 14px - labels, captions */
  color: #9ca3af; /* Medium gray */
}

/* Secondary text */
.text-secondary {
  font-size: var(--font-size-secondary);
  color: var(--text-secondary);
}

/* Caption text */
.text-caption {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
}

/* -----------------------------------
   LAYOUT SYSTEM - 8pt Grid
   ----------------------------------- */
.container-dense {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}

@media (min-width: 768px) {
  .container-dense {
    padding-left: var(--margin-tablet);
    padding-right: var(--margin-tablet);
  }
}

@media (min-width: 1024px) {
  .container-dense {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

/* Spacing Utilities */
.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-5 {
  margin-bottom: var(--space-5);
}
.mb-6 {
  margin-bottom: var(--space-6);
}

.mt-1 {
  margin-top: var(--space-1);
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.py-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* -----------------------------------
   TOUCH TARGETS
   ----------------------------------- */
button:not(.back-to-top):not(.hamburger-menu):not(.submenu-back):not(
    #close-popup
  ),
a.btn,
.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: var(--space-1) var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

/* Comfortable touch targets for primary actions */
.touch-target-lg {
  min-height: var(--touch-target-comfortable);
  min-width: var(--touch-target-comfortable);
}

/* Touch separation */
button:not(.back-to-top):not(.hamburger-menu):not(.submenu-back):not(
    #close-popup
  )
  + button:not(.back-to-top):not(.hamburger-menu):not(.submenu-back):not(
    #close-popup
  ),
a.btn + a.btn {
  margin-left: var(--touch-separation-min);
}

/* -----------------------------------
   FOOTER CONTACT SCROLL BUTTON
   Bottom-left fixed button to scroll to contact form
   ----------------------------------- */
.footer-contact-scroll-btn {
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.footer-contact-scroll-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 255, 255, 0.6);
}

.footer-contact-scroll-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(0, 255, 255, 0.3);
}

.footer-contact-scroll-btn i {
  font-size: 24px;
  color: var(--dark-bg);
}

/* Move above bottom nav on mobile */
@media (max-width: 1023px) {
  .footer-contact-scroll-btn {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* -----------------------------------
   BOTTOM NAVIGATION
   iOS-inspired bottom tab bar
   ----------------------------------- */
/* Bottom nav styles moved to navbar.css for consolidation */

/* -----------------------------------
   DENSE CARD COMPONENTS
   ----------------------------------- */
.card-dense {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 12px;
  padding: var(--space-2);
  transition: all 0.3s ease;
}

.card-dense:hover {
  border-color: rgba(0, 255, 255, 0.4);
  transform: translateY(-2px);
}

.card-dense-title {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--primary-neon);
}

.card-dense-body {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

/* -----------------------------------
   SECTION SPACING
   Tighter than traditional web
   ----------------------------------- */
section {
  padding: var(--space-4) 0;
}

@media (min-width: 768px) {
  section {
    padding: var(--space-6) 0;
  }
}

@media (min-width: 1024px) {
  section {
    padding: var(--space-8) 0;
  }
}

/* -----------------------------------
   BUTTON SYSTEM
   Consistent touch targets
   ----------------------------------- */
/* Button styles moved to buttons.css to avoid conflicts */
/* Touch target enforcement handled by universal selector above */

/* -----------------------------------
   FORM INPUTS
   16px minimum to prevent iOS zoom
   ----------------------------------- */
input[type='text'],
input[type='email'],
input[type='tel'],
textarea {
  font-size: 16px !important; /* Critical for iOS */
  line-height: var(--line-height-base);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(20, 20, 30, 0.6);
  color: var(--text-primary);
  min-height: var(--touch-target-min);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-neon);
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.2);
}

/* -----------------------------------
   PERFORMANCE OPTIMIZATIONS
   GPU-accelerated animations only
   ----------------------------------- */
.will-change-transform {
  will-change: transform;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Only animate transform and opacity */
.animate {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------
   SAFE AREA SUPPORT
   iOS notch and home indicator
   ----------------------------------- */
@supports (padding: max(0px)) {
  .safe-top {
    padding-top: max(var(--space-2), env(safe-area-inset-top));
  }

  .safe-bottom {
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }
}
/* ===================================
   HERO SECTION - APP-LIKE DENSITY
   Implementing research principles
   =================================== */

/* Tighter hero layout */
.hero-wrapper {
  padding: var(--space-4) 0 !important; /* 32px vs excessive default */
  min-height: auto !important;
}

/* Compact hero header */
.hero-header {
  padding: 0 var(--space-4) 0 var(--space-5) !important; /* 40px left, 32px right */
  margin-bottom: var(--space-3) !important; /* 24px */
}

/* Tighter hero title */
.hero-title-main {
  font-size: clamp(2rem, 5vw, 3.5rem) !important; /* Smaller than default */
  line-height: 1.15 !important; /* Much tighter */
  margin-bottom: var(--space-2) !important; /* 16px vs default */
  letter-spacing: var(--letter-spacing-tight) !important;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem) !important; /* More reasonable */
  line-height: var(--line-height-base) !important; /* 1.45 */
  margin-bottom: var(--space-3) !important; /* 24px */
  max-width: 600px !important;
}

/* Hero stats - more compact */
.hero-stats {
  gap: var(--space-2) !important; /* 16px */
  margin-top: var(--space-3) !important; /* 24px vs excessive default */
}

.stat-item {
  padding: var(--space-1) var(--space-2) !important; /* 8px 16px */
}

.stat-number {
  font-size: clamp(1.5rem, 3vw, 2rem) !important; /* Smaller */
  line-height: 1 !important;
  margin-bottom: var(--space-1) !important; /* 8px */
}

.stat-label {
  font-size: var(--font-size-secondary) !important; /* 14-15px */
  line-height: var(--line-height-base) !important;
}

@media (max-width: 768px) {
  .stat-label {
    font-size: 0.55rem !important; /* Smaller on mobile */
  }
}

@media (max-width: 480px) {
  .stat-label {
    font-size: 0.5rem !important; /* Even smaller on phones */
  }
}

/* Hero form - more compact */
.hero-form {
  padding: 0 !important;
}

.hero-form-container {
  padding: var(--space-3) !important; /* 24px vs excessive default */
  border-radius: 12px !important; /* Tighter radius */
}

.hero-form-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  margin-bottom: var(--space-2) !important; /* 16px */
  line-height: var(--line-height-tight) !important;
}

.hero-form-subtitle {
  font-size: var(--font-size-secondary) !important; /* 14-15px */
  line-height: var(--line-height-base) !important;
  margin-bottom: var(--space-2) !important; /* 16px */
}

.hero-form input,
.hero-form textarea {
  margin-bottom: var(--space-2) !important; /* 16px */
  font-size: 16px !important; /* iOS safe */
  padding: var(--space-1) var(--space-2) !important;
  border-radius: 8px !important;
}

/* Override for AI contact fields - no bottom margin */
.ai-contact-fields input {
  margin-bottom: 0 !important;
}

.hero-submit-button {
  min-height: var(--touch-target-min) !important; /* 44px */
  padding: var(--space-1) var(--space-3) !important;
  font-size: var(--font-size-base) !important;
  border-radius: 8px !important;
  margin-top: var(--space-2) !important;
}

/* Services section - tighter spacing */
.services-section {
  padding: var(--space-5) 0 !important; /* 40px vs excessive default */
}

.services-header {
  margin-bottom: var(--space-4) !important; /* 32px */
}

.services-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin-bottom: var(--space-2) !important; /* 16px */
  line-height: var(--line-height-tight) !important;
}

.services-tag {
  font-size: var(--font-size-caption) !important; /* 13px */
  margin-bottom: var(--space-1) !important; /* 8px */
}

.services-hint {
  font-size: var(--font-size-secondary) !important;
  margin-top: var(--space-1) !important;
}

/* Service cards - more compact */
.services-grid {
  gap: var(--space-3) !important; /* 24px vs excessive default */
}

.service-item {
  min-height: 280px !important; /* Increased for content */
}

@media (max-width: 900px) {
  .service-item {
    height: 380px !important;
  }
}

.service-item-front {
  padding: var(--space-3) !important; /* 24px */
}

.service-item-back {
  display: flex !important;
}

.service-back-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}

.service-back-title {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important; /* 16-20px */
  line-height: var(--line-height-tight) !important; /* 1.25 */
  padding: 0 !important;
}

/* Carousel mode - consistent padding/margin */
@media (max-width: 900px) {
  .service-item-back {
    padding: var(--space-1) var(--space-2) !important; /* 8px top/bottom, 16px sides */
    align-items: center !important; /* Center content vertically */
  }

  .service-back-title {
    margin: 0 0 var(--space-1) 0 !important; /* No top margin, 8px bottom */
  }
}

.service-title {
  font-size: clamp(1.125rem, 2vw, 1.375rem) !important; /* 18-22px */
  line-height: var(--line-height-tight) !important;
  margin-top: var(--space-2) !important;
}

.service-icon-wrapper {
  width: 48px !important; /* Smaller icon */
  height: 48px !important;
  margin-bottom: var(--space-2) !important;
}

.service-icon {
  width: 28px !important;
  height: 28px !important;
}

.service-description {
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.4 !important;
  margin: 0 0 var(--space-1) 0 !important; /* No top margin */
  padding: 0 !important;
  flex-grow: 1 !important;
}

.service-link {
  font-size: 0.8125rem !important; /* 13px */
  padding: var(--space-1) var(--space-2) !important;
  min-height: var(--touch-target-min) !important;
  margin-top: auto !important; /* Push to bottom */
  margin-bottom: 0 !important;
}

/* Portfolio section - tighter */
.portfolio-section {
  padding: var(--space-5) 0 !important;
}

.portfolio-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin-bottom: var(--space-2) !important;
  line-height: var(--line-height-tight) !important;
}

.portfolio-grid {
  gap: var(--space-3) !important;
  margin-top: var(--space-4) !important;
}

/* Testimonials - more compact */
.testimonials-section {
  padding: var(--space-5) 0 !important;
}

.testimonials-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin-bottom: var(--space-2) !important; /* 16px */
  line-height: var(--line-height-tight) !important;
}

.testimonial-card {
  padding: var(--space-3) !important;
}

.testimonial-text {
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  margin-bottom: var(--space-2) !important;
}

.testimonial-author {
  font-size: var(--font-size-secondary) !important;
}

/* Blog section - compact */
.hp-blog-section {
  padding: var(--space-5) 0 !important;
}

.hp-blog-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin-bottom: var(--space-2) !important;
  line-height: var(--line-height-tight) !important;
}

.hp-blog-grid {
  gap: var(--space-3) !important;
  margin-top: var(--space-4) !important;
}

.hp-blog-mag-card {
  padding: var(--space-2) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Even tighter on mobile per research */
  .hero-wrapper {
    padding: 0 0 var(--space-3) 0 !important; /* No top padding, 24px bottom */
  }

  .hero-header {
    padding: 0 !important; /* Reset padding on mobile - centered text doesn't need left padding */
    margin-bottom: var(--space-2) !important; /* 16px */
  }

  .hero-title-main {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
    margin-bottom: var(--space-1) !important; /* 8px */
  }

  .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: var(--space-2) !important;
  }

  .services-section,
  .portfolio-section,
  .testimonials-section,
  .hp-blog-section {
    padding: var(--space-4) 0 !important; /* 32px on mobile */
  }

  .services-grid,
  .portfolio-grid,
  .hp-blog-grid {
    gap: var(--space-2) !important; /* 16px on mobile */
  }

  /* Stack hero on mobile for density */
  .hero-wrapper {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  .hero-form {
    max-width: 100% !important;
    margin-top: -3rem !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1032px) {
  .hero-wrapper {
    padding-top: 0 !important;
    margin-top: -4rem !important;
  }

  .hero-form {
    margin-top: -3rem !important;
  }

  .services-section,
  .portfolio-section,
  .testimonials-section {
    padding: var(--space-5) 0 !important;
  }
}

/* Desktop - still compact but comfortable */
@media (min-width: 901px) {
  .hero-wrapper {
    padding: var(--space-6) 0 !important; /* 48px max */
  }
}

/* Desktop layout adjustments */
@media (min-width: 1033px) {
  .hero-wrapper {
    padding-top: 140px !important; /* Push down on desktop to avoid navbar */
  }

  .hero-form-container {
    padding: var(--space-2) !important; /* 16px - smaller on desktop */
  }

  .hero-form-title {
    font-size: 1.375rem !important; /* 22px - smaller */
    margin-bottom: var(--space-1) !important; /* 8px */
  }

  .hero-form-subtitle {
    margin-bottom: var(--space-1) !important; /* 8px */
  }

  .hero-form input,
  .hero-form textarea {
    margin-bottom: var(--space-1) !important; /* 8px */
  }

  /* Override for AI contact fields - no bottom margin on desktop */
  .ai-contact-fields input {
    margin-bottom: 0 !important;
  }

  .hero-submit-button {
    margin-top: var(--space-1) !important; /* 8px */
  }

  /* Service cards - better desktop spacing */
  .service-item {
    min-height: 320px !important; /* Taller on desktop */
  }

  .service-item-back {
    padding: var(--space-3) !important; /* 24px all sides on desktop */
    align-items: flex-start !important; /* Top align instead of center */
  }

  .service-back-title {
    font-size: 1.25rem !important; /* 20px on desktop */
  }

  .service-description {
    font-size: 0.875rem !important; /* 14px on desktop */
    line-height: 1.5 !important; /* More comfortable on desktop */
  }

  .service-link {
    font-size: 0.875rem !important; /* 14px on desktop */
  }

  .services-section,
  .portfolio-section,
  .testimonials-section {
    padding: var(--space-6) 0 !important;
  }
}
/* ========================================= */
/* UTILITY COMPONENTS */
/* Back to Top, Popups, Progress Bars, etc. */
/* ========================================= */

/* ========================================= */
/* GLOBAL SCROLLBAR STYLING */
/* ========================================= */

/* Custom scrollbar for all pages */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 6px;
  border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #1a1a1a;
}

/* ========================================= */
/* BACK TO TOP BUTTON */
/* ========================================= */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-speed);
  z-index: 1001;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform, opacity;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 255, 255, 0.6);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
  color: #0a0a0f;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Pulse ring animation */
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 2px solid #00e6ff;
  border-radius: 50%;
  opacity: 0;
}

.back-to-top:hover .pulse-ring {
  animation: pulse-ring 1s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .back-to-top {
    bottom: calc(76px + env(safe-area-inset-bottom)); /* 56px bottom nav + 20px spacing */
    right: 20px;
    width: 52px;
    height: 52px;
  }

  .back-to-top svg {
    width: 26px;
    height: 26px;
  }
}

/* ========================================= */
/* SCROLL PROGRESS BAR */
/* ========================================= */

.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--dark-border);
  z-index: 10000;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--primary-neon),
    var(--secondary-neon)
  );
  transition: width 0.1s linear;
  box-shadow: 0 0 10px var(--primary-neon);
}

/* ========================================= */
/* POPUP FORMS - Neon Cyberpunk Theme */
/* ========================================= */

/* Popup backdrop overlay */
.popup::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(8px);
  z-index: -1;
}

/* Popup styling - iOS Material Liquid Glass */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 500px;
  max-width: 90%;
  padding: 2rem;
  display: none;
  z-index: 1000;
  text-align: center;
  animation: popup-intro 0.5s ease-in-out forwards;
  font-family: 'Exo', sans-serif;
  isolation: isolate;
  border-radius: 24px;
  overflow: hidden;

  /* iOS Material: very transparent tints for liquid glass */
  background: linear-gradient(
    180deg,
    rgba(18, 22, 38, 0.08) 0%,
    rgba(28, 32, 52, 0.05) 100%
  );

  /* iOS Vibrancy */
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);
  backdrop-filter: blur(20px) saturate(160%) contrast(112%) brightness(1.06);

  /* Subtle border for definition */
  border: 1px solid rgba(255, 255, 255, 0.10);

  /* Soft elevation shadow */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Specular Highlight + Bloom (iOS-like) */
.popup::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 25%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 65%
    );

  mix-blend-mode: screen;
}

/* Thickness / Rim Effects (Glass Depth) */
.popup::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.00) 35%,
    rgba(0, 0, 0, 0.05) 100%
  );

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 24px rgba(0, 0, 0, 0.10);
}

.popup.show {
  display: block;
}

/* Popup heading text */
.popup p {
  position: relative;
  z-index: 3;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: none;
  line-height: 1.4;
}

/* ------------------------------------
   Form Elements
   ------------------------------------ */
.popup form {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.popup label {
  color: #ffffff;
  font-size: 0.875rem;
  text-align: left;
  font-weight: 500;
}

.popup input,
.popup textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: 'Exo', sans-serif;
  background: rgba(10, 10, 15, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  box-sizing: border-box;
  color: #ffffff;
  transition: all 0.3s ease;
}

.popup input::placeholder,
.popup textarea::placeholder {
  color: rgba(176, 176, 176, 0.5);
}

.popup input:focus,
.popup textarea:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.2);
  background: rgba(10, 10, 15, 0.95);
}

.popup textarea {
  resize: vertical;
  min-height: 100px;
}

/* Submit button - Primary CTA with 3D effect */
.popup button[type="submit"] {
  position: relative;
  z-index: 3;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  padding: 14px 32px;
  font-size: 1rem;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-out;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 48px;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
}

.popup button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 255, 255, 0.6);
}

.popup button[type="submit"]:active {
  transform: scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(0, 255, 255, 0.3);
}

/* Close Button - Secondary with 3D effect */
#close-popup {
  position: relative;
  z-index: 3;
  margin-top: 0.5rem;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-out;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

#close-popup:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 6px 12px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------
   Animations
   ------------------------------------ */
/* Keyframes for the intro animation */
@keyframes popup-intro {
  0% {
    opacity: 0; /* Fully transparent */
    transform: translate(-50%, -50%) scale(0); /* Start small */
  }
  100% {
    opacity: 1; /* Fully visible */
    transform: translate(-50%, -50%) scale(1); /* Expand to full size */
  }
}

/* ========================================= */
/* RESPONSIVE PHONE NUMBER */
/* ========================================= */
.responsive-phone-num {
  display: none !important;
}

.responsive-phone-num a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.responsive-phone-num svg {
  margin-right: 4px;
}

/* Optional hover effect for better user experience */
.responsive-phone-num:hover {
  color: black;
  background-color: var(--primary-color);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.responsive-phone-num:hover a {
  color: black;
}

/* -----------------------------------
            Media Queries
            ----------------------------------- */
/* Position for mobile and smaller screens (below 500px) */
@media screen and (max-width: 500px) {
  .responsive-phone-num {
    left: 10px;
  }
}

/* Position for mobile and smaller screens (below 1033px) */
@media screen and (max-width: 1032px) {
  .responsive-phone-num {
    top: 10px;
  }
}

/* Position for larger screens (1033px and above) with navbar */
@media screen and (min-width: 1033px) {
  .responsive-phone-num {
    top: 110px;
  }
}
/* ===================================
   COMPREHENSIVE BUTTON SYSTEM
   Based on iOS HIG, Material Design, and IBM Carbon
   Research-backed for maximum conversion and accessibility
   =================================== */

/* -----------------------------------
   CSS CUSTOM PROPERTIES (Design Tokens)
   ----------------------------------- */
:root {
  /* Button Sizes - Touch target optimized */
  --btn-height-small: 40px;
  --btn-height-medium: 48px;
  --btn-height-large: 56px;

  /* Button Padding */
  --btn-padding-small: 8px 20px;
  --btn-padding-medium: 12px 24px;
  --btn-padding-large: 16px 32px;

  /* Border Radius */
  --btn-radius: 8px;
  --btn-radius-pill: 50px;

  /* Transitions - Research-backed timing */
  --btn-transition-hover: 200ms ease-out;
  --btn-transition-active: 100ms ease-in;

  /* Colors - Neon Cyberpunk Theme */
  --btn-primary-bg: linear-gradient(135deg, #00ffff, #00cccc);
  --btn-primary-bg-hover: linear-gradient(135deg, #00e6e6, #00b3b3);
  --btn-primary-text: #0a0a0a;

  --btn-secondary-border: #00ffff;
  --btn-secondary-text: #00ffff;
  --btn-secondary-bg-hover: rgba(0, 255, 255, 0.1);

  --btn-tertiary-text: #00ffff;
  --btn-tertiary-bg-hover: rgba(0, 255, 255, 0.05);

  --btn-ghost-text: #b0b0b0;
  --btn-ghost-hover: #ffffff;

  --btn-disabled-bg: rgba(255, 255, 255, 0.1);
  --btn-disabled-text: rgba(255, 255, 255, 0.4);

  /* Shadows */
  --btn-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
  --btn-shadow-hover: 0 6px 20px rgba(0, 255, 255, 0.4);
  --btn-shadow-active: 0 2px 8px rgba(0, 255, 255, 0.3);
}

/* -----------------------------------
   BASE BUTTON RESET
   Eliminates browser defaults
   ----------------------------------- */
.btn {
  /* Reset defaults */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;

  /* Base styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.025em;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Smooth transitions */
  transition: all var(--btn-transition-hover);
}

/* Remove default focus outline (will add custom below) */
.btn:focus {
  outline: none;
}

/* -----------------------------------
   PRIMARY BUTTONS
   Highest emphasis - filled background
   Use for main CTAs (max 1 per section)
   ----------------------------------- */
.btn-primary {
  /* Flexbox for proper vertical centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Visual styles */
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: var(--btn-radius);
  font-size: 1rem;
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  box-shadow: var(--btn-shadow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all var(--btn-transition-hover);
  line-height: 1;
  vertical-align: middle;
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-active);
  transition: all var(--btn-transition-active);
}

/* Focus state for keyboard navigation - WCAG 2.4.13 compliant */
.btn-primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: var(--btn-shadow-hover), 0 0 0 4px rgba(0, 255, 255, 0.3);
}

/* Size variants */
.btn-primary.btn-small {
  padding: var(--btn-padding-small);
  min-height: var(--btn-height-small);
  font-size: 0.875rem;
}

.btn-primary.btn-large {
  padding: var(--btn-padding-large);
  min-height: var(--btn-height-large);
  font-size: 1.125rem;
}

/* Full width variant */
.btn-primary.btn-full {
  width: 100%;
}

/* Pill shape variant */
.btn-primary.btn-pill {
  border-radius: var(--btn-radius-pill);
}

/* -----------------------------------
   SECONDARY BUTTONS
   Medium emphasis - outlined style
   Use for alternative actions
   ----------------------------------- */
.btn-secondary {
  /* Flexbox for proper vertical centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Visual styles */
  background: transparent;
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  font-size: 1rem;
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all var(--btn-transition-hover);
  line-height: 1;
  vertical-align: middle;
}

.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: #00e6e6;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
}

.btn-secondary:active {
  transform: translateY(0);
  transition: all var(--btn-transition-active);
}

.btn-secondary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.3);
}

/* Size variants */
.btn-secondary.btn-small {
  padding: var(--btn-padding-small);
  min-height: var(--btn-height-small);
  font-size: 0.875rem;
}

.btn-secondary.btn-large {
  padding: var(--btn-padding-large);
  min-height: var(--btn-height-large);
  font-size: 1.125rem;
}

.btn-secondary.btn-full {
  width: 100%;
}

.btn-secondary.btn-pill {
  border-radius: var(--btn-radius-pill);
}

/* -----------------------------------
   TERTIARY BUTTONS
   Low emphasis - minimal styling
   Use for less important actions
   ----------------------------------- */
.btn-tertiary {
  background: transparent;
  color: var(--btn-tertiary-text);
  border: none;
  border-radius: var(--btn-radius);
  font-size: 1rem;
  padding: 10px 20px;
  min-height: 40px;
  font-weight: 600;
  position: relative;
}

.btn-tertiary::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--btn-tertiary-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms ease-out;
}

.btn-tertiary:hover {
  background: var(--btn-tertiary-bg-hover);
}

.btn-tertiary:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-tertiary:active {
  transform: scale(0.98);
  transition: all var(--btn-transition-active);
}

.btn-tertiary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* With arrow icon */
.btn-tertiary svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms ease-out;
}

.btn-tertiary:hover svg {
  transform: translateX(4px);
}

/* -----------------------------------
   GHOST BUTTONS
   Lowest emphasis - text only
   Use for cancel, skip, back actions
   ----------------------------------- */
.btn-ghost {
  background: transparent;
  color: var(--btn-ghost-text);
  border: none;
  font-size: 1rem;
  padding: 10px 16px;
  min-height: 40px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.btn-ghost:hover {
  color: var(--btn-ghost-hover);
  background: rgba(255, 255, 255, 0.05);
}

.btn-ghost:active {
  transform: scale(0.98);
  transition: all var(--btn-transition-active);
}

.btn-ghost:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* -----------------------------------
   BUTTON STATES
   Disabled, Loading, Success
   ----------------------------------- */

/* Disabled state - uses aria-disabled for better accessibility */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: var(--btn-disabled-bg);
  opacity: 0.5;
  pointer-events: none;
}

/* Loading state */
.btn.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: btn-spinner 0.6s linear infinite;
}

@keyframes btn-spinner {
  to { transform: rotate(360deg); }
}

/* Success state (optional - for form submissions) */
.btn.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

/* -----------------------------------
   BUTTON GROUPS
   Multiple buttons side by side
   ----------------------------------- */
.btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-group.btn-group-center {
  justify-content: center;
}

.btn-group.btn-group-right {
  justify-content: flex-end;
}

/* Stacked button group (mobile-friendly) */
.btn-group.btn-group-stack {
  flex-direction: column;
  align-items: stretch;
}

.btn-group.btn-group-stack .btn {
  width: 100%;
}

/* -----------------------------------
   ICON BUTTONS
   For buttons with icons
   ----------------------------------- */
.btn-icon {
  padding: 0;
  width: var(--btn-height-medium);
  height: var(--btn-height-medium);
  border-radius: 50%;
}

.btn-icon.btn-small {
  width: var(--btn-height-small);
  height: var(--btn-height-small);
}

.btn-icon.btn-large {
  width: var(--btn-height-large);
  height: var(--btn-height-large);
}

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

/* Button with icon on left */
.btn svg:first-child {
  margin-right: 4px;
  margin-left: -4px;
}

/* Button with icon on right */
.btn svg:last-child {
  margin-left: 4px;
  margin-right: -4px;
}

/* -----------------------------------
   FIXED BOTTOM CTA
   Mobile-optimized sticky button
   ----------------------------------- */
.btn-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-radius: 0;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
  /* Safe area for iOS notch */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* -----------------------------------
   RESPONSIVE BEHAVIOR
   Touch-optimized for mobile
   ----------------------------------- */

/* Mobile (< 600px) - Full width primary CTAs */
@media (max-width: 599px) {
  .btn-primary:not(.btn-icon) {
    width: 100%;
  }

  .btn-group:not(.btn-group-inline) {
    flex-direction: column;
    width: 100%;
  }

  .btn-group:not(.btn-group-inline) .btn {
    width: 100%;
  }
}

/* Tablet (600px - 1024px) - Slightly smaller buttons */
@media (min-width: 600px) and (max-width: 1024px) {
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 0.9375rem;
  }
}

/* Desktop (> 1024px) - Comfortable sizing */
@media (min-width: 1025px) {
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    padding: 11px 24px;
  }

  .btn-primary.btn-large,
  .btn-secondary.btn-large {
    min-height: 52px;
  }
}

/* -----------------------------------
   ACCESSIBILITY ENHANCEMENTS
   Reduced motion support
   ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button,
  .btn {
    transition: none;
  }

  .btn::before,
  .btn::after {
    transition: none;
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 2px solid #ffffff;
  }

  .btn-secondary {
    border-width: 3px;
  }
}

/* -----------------------------------
   UTILITY CLASSES
   ----------------------------------- */

/* No uppercase */
.btn-no-uppercase {
  text-transform: none;
}

/* Block display */
.btn-block {
  display: flex;
  width: 100%;
}

/* Compact spacing */
.btn-compact {
  padding: 8px 16px;
  min-height: 36px;
  font-size: 0.875rem;
}

/* -----------------------------------
   CONTEXT-SPECIFIC BUTTONS
   For specific use cases
   ----------------------------------- */

/* Navigation CTA button (in header) */
.btn-nav {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 10px 24px;
  border-radius: var(--btn-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 40px;
}

.btn-nav:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
}

/* Form submit button */
.btn-submit {
  width: 100%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  border-radius: var(--btn-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Service card link button */
.btn-service-link {
  background: transparent;
  border: 2px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--btn-radius);
  font-size: 0.875rem;
  font-weight: 600;
}

.btn-service-link:hover {
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-2px);
}

/* Portfolio/project view button */
.btn-project {
  background: rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #00ffff;
  padding: 12px 24px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 0.9375rem;
}

.btn-project:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: #00ffff;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

/* -----------------------------------
   ANIMATION CLASSES
   Optional smooth entrance
   ----------------------------------- */
.btn-fade-in {
  animation: btnFadeIn 0.4s ease-out;
}

@keyframes btnFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------
   LEGACY BUTTON CLASS MAPPING
   Backwards compatibility with existing code
   ----------------------------------- */

/* Map old hero button to new system */
.hero-submit-button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  width: 100%;
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  border-radius: var(--btn-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  box-shadow: var(--btn-shadow);
  font-size: 1rem;
  font-family: 'Exo', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-submit-button:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.hero-submit-button:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-active);
}

.hero-submit-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: var(--btn-shadow-hover), 0 0 0 4px rgba(0, 255, 255, 0.3);
}

/* Map old service link to new system */
.service-link {
  background: transparent;
  border: 2px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--btn-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--btn-transition-hover);
}

.service-link:hover {
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
}

.service-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Navbar contact button - Primary CTA in header */
.navbar .submit-button a {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  padding: 10px 24px !important;
  border-radius: var(--btn-radius) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  border: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--btn-transition-hover);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4) !important;
  position: relative;
  overflow: visible !important; /* Show button, hide pseudo */
  clip-path: none !important; /* Remove angled shape */
  letter-spacing: 0.05em !important;
}

/* Remove old blue ::before pseudo-element */
.navbar .submit-button a::before {
  display: none !important;
}

/* Remove corner decorations */
.navbar .submit-button .button-corners,
.navbar .submit-button .button-corners span {
  display: none !important;
}

/* Remove button glow effect */
.navbar .submit-button .button-glow {
  display: none !important;
}

.navbar .submit-button a:hover {
  background: var(--btn-primary-bg-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 255, 255, 0.6) !important;
  color: var(--btn-primary-text) !important;
}

.navbar .submit-button a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Write a review button - Standout CTA */
.write-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  color: #000;
  padding: 16px 32px;
  border-radius: var(--btn-radius);
  border: none;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  min-height: var(--btn-height-medium);
  transition: all var(--btn-transition-hover);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}

.write-review-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(0, 255, 255, 0.6);
}

.write-review-btn:active {
  transform: scale(0.98);
}

.write-review-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.write-review-btn .btn-icon {
  width: 20px;
  height: 20px;
}

/* Responsive sizing */
@media (max-width: 768px) {
  .write-review-btn {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .write-review-btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

/* Pricing card buttons - Secondary emphasis */
.pricing-cta-button {
  width: 100%;
  padding: 16px 32px;
  background: transparent;
  border: 2px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius-pill);
  color: var(--btn-secondary-text);
  font-size: 1.1rem;
  font-weight: 600;
  min-height: var(--btn-height-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Exo', sans-serif;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.pricing-cta-button:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: #00e6e6;
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 255, 255, 0.3);
}

.pricing-cta-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Featured pricing card - Primary CTA */
.pricing-cta-button.pricing-cta-featured {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
}

.pricing-cta-button.pricing-cta-featured:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 255, 255, 0.6);
}

.pricing-cta-link {
  text-decoration: none;
  display: inline-block;
}

.pricing-button-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.pricing-cta-button:hover .pricing-button-icon {
  transform: translateX(4px);
}

/* Quote submit button - Primary CTA */
.quote-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(to bottom, #00e6ff 0%, #00b8d4 50%, #0097b8 100%);
  color: #000;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 18px 40px;
  min-height: var(--btn-height-large);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Exo', sans-serif;
  position: relative;
}

.quote-submit-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(0, 255, 255, 0.6);
}

.quote-submit-button:active {
  transform: scale(0.98);
}

.quote-submit-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: var(--btn-shadow-hover), 0 0 0 4px rgba(0, 255, 255, 0.3);
}

.quote-button-icon {
  width: 20px;
  height: 20px;
}

/* Footer contact form submit button - Secondary emphasis */
.footer-contact-form .submit-button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  width: 80%;
  padding: var(--btn-padding-medium);
  min-height: var(--btn-height-medium);
  border-radius: var(--btn-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: all var(--btn-transition-hover);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 255, 255, 0.4);
  font-size: 1rem;
  font-family: 'Exo', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-contact-form .submit-button:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 255, 255, 0.6);
}

.footer-contact-form .submit-button:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(0, 255, 255, 0.3);
}

.footer-contact-form .submit-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: var(--btn-shadow-hover), 0 0 0 4px rgba(0, 255, 255, 0.3);
}

/* Light mode: Make Foundation and Enterprise package buttons dark */
[data-theme="light"] .pricing-card[data-package="foundation"] .pricing-cta-button,
[data-theme="light"] .pricing-card[data-package="enterprise"] .pricing-cta-button {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}

[data-theme="light"] .pricing-card[data-package="foundation"] .pricing-cta-button:hover,
[data-theme="light"] .pricing-card[data-package="enterprise"] .pricing-cta-button:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}
/* ===================================
   MAIN FOOTER STYLES
   =================================== */
.site-footer {
  clear: both;
  position: relative;
  color: white;
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
  z-index: 999;
  min-height: 300px;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  border-top: 1px solid rgba(0, 255, 255, 0.2);
}

/* ===================================
         FIXED BACKGROUND
         =================================== */
.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(rgba(10, 25, 50, 0.75), rgba(10, 25, 50, 0.75)),
      url('https://storage.googleapis.com/background-vid/footer-phillybg.webp?v=1')
        no-repeat center center; */
  background-size: cover;
  background-attachment: fixed;
  z-index: -1;
}

/* Mobile: Remove fixed attachment */
@media (max-width: 768px) {
  .footer-bg {
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
  }
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
  .footer-bg {
    background-attachment: scroll;
  }
}

/* ===================================
         OVERLAY EFFECTS
         =================================== */
/* Slightly Darker Bottom Gradient */
/* .site-footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(10, 25, 50, 1), rgba(10, 25, 50, 0));
    z-index: -1;
  } */

/* ===================================
         CONTENT WRAPPER
         =================================== */
.site-footer-content {
  position: relative;
  z-index: 2;
  background: rgba(15, 15, 20, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 20px;
  margin: 20px;
  box-shadow: 0 8px 32px rgba(0, 255, 255, 0.1);
}

/* ===================================
         MAIN CONTAINER LAYOUT
         =================================== */
.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-bottom: 20px;
}

/* ===================================
         LEFT SIDE - BUSINESS INFO
         =================================== */
.footer-left {
  width: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
  /* margin-bottom: 1rem; */
  width: 100%;
  height: auto;
  padding-bottom: 0;
}

.footer-logo {
  height: 10rem;
  width: auto;
}

.footer-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-top: 0.1rem;
  text-align: left;
}

.footer-logo-primary {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 10px;
  color: #00ffff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
}

.footer-logo-secondary {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 4px;
  color: #b0b0b0;
  margin-top: -15px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.footer-business-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #b0b0b0;
}

.footer-location {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #b0b0b0;
}

/* ===================================
         CONTACT INFO STYLING
         =================================== */
.footer-contact a {
  font-size: 1rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 2rem;
  text-decoration: none;
  color: #b0b0b0;
  transition: all 0.3s ease;
  width: fit-content;
}

.footer-icon {
  font-size: 40px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  color: var(--primary-neon);
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 10px rgba(0, 255, 255, 0.4);
}

.footer-contact a:hover {
  color: #53F5F5;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(83, 245, 245, 0.8);
}

.footer-contact a:hover .footer-icon {
  text-shadow:
    0 4px 6px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(0, 255, 255, 0.6);
  transform: translateY(-2px) scale(1.05);
}

.footer-contact a:active .footer-icon {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 5px rgba(0, 255, 255, 0.3);
  transform: translateY(0) scale(1);
}

/* ===================================
         SOCIAL MEDIA ICONS
         =================================== */
.footer-social {
  margin-top: 15px;
}

.footer-social a {
  margin: 0 8px;
}

.footer-social img {
  width: 30px;
  transition: opacity 0.3s;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
}

.footer-social img:hover {
  opacity: 0.7;
}

.footer-social a img {
  width: 40px;
  height: 40px;
  transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.footer-social a:hover img {
  filter: brightness(0) invert(1) drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
  opacity: 1;
}

/* ===================================
         RIGHT SIDE - CONTACT FORM
         =================================== */
.footer-right {
  width: 50%;
  text-align: center;
}

.footer-right h2 {
  background: linear-gradient(135deg, #ffffff 0%, #818cf8 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Exo', sans-serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: 15px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Footer Contact Description */
.footer-contact-description {
  width: 80%;
  margin: 0 auto 25px auto;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #b0b0b0;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .footer-contact-description {
    width: 90%;
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
}

.footer-contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-contact-form input,
.footer-contact-form textarea {
  width: 80%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  background: rgba(20, 20, 30, 0.6);
  color: white;
  font-size: 1rem;
  font-family: 'Exo', sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.footer-contact-form input:focus,
.footer-contact-form textarea:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder {
  color: rgba(176, 176, 176, 0.5);
}

.footer-contact-form textarea {
  height: 80px;
}

/* Footer Submit Button Styling - MOVED TO buttons.css */

/* ===================================
         FOOTER CARDS SECTION
         =================================== */
.footer-cards-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
}

/* Responsive footer cards */
@media (max-width: 1200px) {
  .footer-cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .footer-cards-container {
    grid-template-columns: 1fr;
  }
}

.footer-card {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(10px);
  color: white;
  padding: 20px;
  border-radius: 15px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.footer-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 8px 25px rgba(0, 255, 255, 0.2);
}

.footer-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.footer-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-card li {
  font-size: 1rem;
  margin-bottom: 8px;
  color: #b0b0b0;
}

.footer-card a {
  color: #b0b0b0;
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
}

.footer-card a:hover {
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

/* ===================================
         DIVIDER AND COPYRIGHT
         =================================== */
.footer-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  margin: 30px 0;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.footer-copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-top: 30px;
  padding: 15px 0;
  font-size: 14px;
  color: #b0b0b0;
}

.footer-copyright p {
  margin: 5px 0;
  width: 100%;
}

.footer-copyright a {
  color: #b0b0b0;
  text-decoration: underline;
  font-weight: 500;
  padding: 0 5px;
  transition: all 0.3s ease;
}

.footer-copyright a:hover {
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
  text-decoration: none;
}

/* ===================================
         MOBILE RESPONSIVE STYLES
         =================================== */
@media (max-width: 900px) {
  .footer-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer-left,
  .footer-right {
    width: 100%;
    margin-bottom: 20px;
  }

  .footer-contact-form input,
  .footer-contact-form textarea {
    width: 90%;
  }

  .footer-logo-primary {
    text-shadow: none;
  }
}

@media (max-width: 600px) {
  .footer-cards-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .footer-copyright {
    font-size: 12px;
    padding: 10px 0;
  }

  .footer-copyright p {
    text-align: center;
  }

  .footer-copyright a {
    display: inline-block;
    margin: 5px 0;
  }
}

/* ===================================
         MISCELLANEOUS STYLES
         =================================== */
.footer-contact svg {
  width: 30px;
  height: 30px;
  fill: #53F5F5;
  filter: drop-shadow(0 0 8px rgba(83, 245, 245, 0.6));
  transition: all 0.3s ease;
}

.footer-contact a:hover svg {
  filter: drop-shadow(0 0 15px rgba(83, 245, 245, 0.9));
}

/* ===================================
   LIGHT MODE OVERRIDES
   =================================== */
[data-theme="light"] .site-footer {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

[data-theme="light"] .site-footer-content {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .footer-left h2 {
  background: linear-gradient(135deg, #000000 0%, #4f46e5 50%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

[data-theme="light"] .footer-right h2 {
  background: linear-gradient(135deg, #000000 0%, #4f46e5 50%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

[data-theme="light"] .footer-left p,
[data-theme="light"] .footer-contact-description,
[data-theme="light"] .footer-card,
[data-theme="light"] .footer-card ul li,
[data-theme="light"] .footer-card ul li a {
  color: #374151;
}

[data-theme="light"] .footer-contact-form input,
[data-theme="light"] .footer-contact-form textarea {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  color: #1f2937;
}

[data-theme="light"] .footer-contact-form input::placeholder,
[data-theme="light"] .footer-contact-form textarea::placeholder {
  color: rgba(107, 114, 128, 0.6);
}

[data-theme="light"] .footer-contact-form input:focus,
[data-theme="light"] .footer-contact-form textarea:focus {
  border-color: #0099ff;
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.1);
}

[data-theme="light"] .footer-card {
  background: rgba(249, 250, 251, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .footer-card:hover {
  border-color: rgba(0, 153, 255, 0.3);
  box-shadow: 0 8px 25px rgba(0, 153, 255, 0.1);
}

[data-theme="light"] .footer-card h3 {
  color: #53F5F5;
}

[data-theme="light"] .footer-copyright {
  color: #6b7280;
  border-top: 1px solid #e5e7eb;
}

[data-theme="light"] .footer-contact svg,
[data-theme="light"] .footer-icon {
  /* Cyan filter for #53F5F5 color */
  filter: brightness(0) saturate(100%) invert(78%) sepia(71%) saturate(2467%) hue-rotate(131deg) brightness(101%) contrast(96%);
}

[data-theme="light"] .footer-contact a:hover svg,
[data-theme="light"] .footer-contact a:hover .footer-icon {
  filter: brightness(0) saturate(100%) invert(78%) sepia(71%) saturate(2467%) hue-rotate(131deg) brightness(101%) contrast(96%) drop-shadow(0 0 8px rgba(83, 245, 245, 0.5));
}

[data-theme="light"] .footer-logo-primary {
  color: #000000;
  text-shadow: none;
}

[data-theme="light"] .footer-contact a {
  color: #000000;
}

[data-theme="light"] .footer-contact a:hover {
  color: #53F5F5;
  text-shadow: none;
}

.footer-left a {
  text-decoration: none !important;
}

.footer-left a:hover {
  text-decoration: none !important;
}

/* ===================================
   INLINE SVG ICON STYLES
   =================================== */
.nav-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}

.popup-close-icon {
  width: 1.25em;
  height: 1.25em;
}

.service-popup-icon svg {
  width: 2em;
  height: 2em;
}

.btn-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}

.footer-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Disable section gradient overlays and animated backgrounds */
.services-section::before,
.journey-section::before,
.pricing-section::before,
.quote-section::before,
.quote-section::after,
.portfolio-section::before,
.hp-device-overlay,
.hp-animated-bg,
.hp-float-element {
  display: none !important;
}