:root {
  --bg-color: #000000;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --border-color: rgba(255, 255, 255, 0.1);
  --accent-color: #ffffff;
  --color-accent-green: #4ade80;
  --fluid-9: clamp(0.5625rem, 0.55rem + 0.05vw, 0.59375rem);
  --fluid-9-5: clamp(0.59375rem, 0.58rem + 0.06vw, 0.625rem);
  --fluid-10: clamp(0.625rem, 0.61rem + 0.08vw, 0.6875rem);
  --fluid-11: clamp(0.6875rem, 0.67rem + 0.1vw, 0.75rem);
  --fluid-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --fluid-sm: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem);
  --fluid-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fluid-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --fluid-xl: clamp(1.25rem, 1.17rem + 0.38vw, 1.5rem);
  --fluid-2xl: clamp(1.5rem, 1.37rem + 0.62vw, 1.875rem);
  --fluid-3xl: clamp(1.875rem, 1.66rem + 1.04vw, 2.5rem);
  --fluid-4xl: clamp(2.125rem, 1.87rem + 1.24vw, 2.875rem);
  --fluid-5xl: clamp(2.5rem, 2.16rem + 1.64vw, 3.5rem);
  --fluid-6xl: clamp(2.875rem, 2.45rem + 2.06vw, 4.125rem);
  --fluid-7xl: clamp(3.25rem, 2.72rem + 2.58vw, 4.8125rem);
  --fluid-8xl: clamp(3.75rem, 3.1rem + 3.12vw, 5.75rem);
  --fluid-lg-xl: clamp(1.125rem, 1.01rem + 0.56vw, 1.5rem);
  --fluid-xl-2xl: clamp(1.25rem, 1.1rem + 0.72vw, 1.75rem);
  --fluid-3xl-4xl: clamp(1.875rem, 1.62rem + 1.24vw, 2.75rem);
  --fluid-4xl-5xl: clamp(2.125rem, 1.83rem + 1.44vw, 3.125rem);
  --fluid-3xl-5xl: clamp(1.875rem, 1.53rem + 1.68vw, 3rem);
  --fluid-4xl-6xl: clamp(2.125rem, 1.71rem + 2vw, 3.5rem);
  --fluid-5xl-7xl: clamp(2.5rem, 2rem + 2.4vw, 4.1875rem);
  --fluid-3xl-4xl-5xl: clamp(1.875rem, 1.56rem + 1.52vw, 3rem);
  --fluid-3xl-4xl-6xl: clamp(1.875rem, 1.48rem + 1.92vw, 3.375rem);
  --fluid-3xl-5xl-6xl: clamp(1.875rem, 1.42rem + 2.2vw, 3.5rem);
  --fluid-4xl-6xl-7xl: clamp(2.125rem, 1.55rem + 2.76vw, 4.25rem);
}

.text-accent-green {
  color: var(--color-accent-green);
}

.text-accent-red {
  color: #ef4444;
}


body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: var(--fluid-base);
  font-weight: 400;
  overflow-x: hidden;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.nav-link,
.mobile-nav-link,
button,
.btn,
.btn-primary,
input[type="submit"],
input[type="button"],
.mobile-nav-btn,
.desktop-nav a[href*="book-strategy-call"] {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

/* Fluid Typography */
.text-\[9px\] {
  font-size: var(--fluid-9) !important;
}

.text-\[9\.5px\] {
  font-size: var(--fluid-9-5) !important;
}

.text-\[10px\] {
  font-size: var(--fluid-10) !important;
}

.text-\[11px\] {
  font-size: var(--fluid-11) !important;
}

.text-xs {
  font-size: var(--fluid-xs) !important;
}

.text-sm {
  font-size: var(--fluid-sm) !important;
}

.text-base {
  font-size: var(--fluid-base) !important;
}

.text-lg {
  font-size: var(--fluid-lg) !important;
}

.text-xl {
  font-size: var(--fluid-xl) !important;
}

.text-2xl {
  font-size: var(--fluid-2xl) !important;
}

.text-3xl {
  font-size: var(--fluid-3xl) !important;
}

.text-4xl {
  font-size: var(--fluid-4xl) !important;
}

.text-5xl {
  font-size: var(--fluid-5xl) !important;
}

.text-6xl {
  font-size: var(--fluid-6xl) !important;
}

.text-7xl {
  font-size: var(--fluid-7xl) !important;
}

.text-8xl {
  font-size: var(--fluid-8xl) !important;
}

.text-lg.md\:text-xl {
  font-size: var(--fluid-lg-xl) !important;
}

.text-xl.md\:text-2xl {
  font-size: var(--fluid-xl-2xl) !important;
}

.text-3xl.md\:text-4xl {
  font-size: var(--fluid-3xl-4xl) !important;
}

.text-4xl.md\:text-5xl {
  font-size: var(--fluid-4xl-5xl) !important;
}

.text-3xl.md\:text-5xl {
  font-size: var(--fluid-3xl-5xl) !important;
}

.text-4xl.md\:text-6xl {
  font-size: var(--fluid-4xl-6xl) !important;
}

.text-5xl.md\:text-7xl {
  font-size: var(--fluid-5xl-7xl) !important;
}

.text-3xl.md\:text-4xl.lg\:text-5xl {
  font-size: var(--fluid-3xl-4xl-5xl) !important;
}

.text-3xl.md\:text-4xl.lg\:text-6xl {
  font-size: var(--fluid-3xl-4xl-6xl) !important;
}

.text-3xl.md\:text-5xl.lg\:text-6xl {
  font-size: var(--fluid-3xl-5xl-6xl) !important;
}

.text-4xl.md\:text-6xl.lg\:text-7xl {
  font-size: var(--fluid-4xl-6xl-7xl) !important;
}

.entry-content > h2 {
  font-size: var(--fluid-3xl) !important;
}

.entry-content > h3 {
  font-size: var(--fluid-2xl) !important;
}

.entry-content > h4,
.entry-content > blockquote {
  font-size: var(--fluid-xl) !important;
}

.entry-content > figure > figcaption {
  font-size: var(--fluid-sm) !important;
}

/* Infrastructure Background */
.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 10vw 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-gradient {
  background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

.nav-blur {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}

.btn-primary {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border-color);
  border-radius: 20px !important;
}

.content-section {
  display: block;
  opacity: 1;
}

/* .content-section.active class is no longer needed for display, but kept if we want to use it for specific page logic, though likely redundant now. Simplified: */


.nav-link {
  position: relative;
  cursor: pointer;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 1px;
  background: white;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Mobile Menu Styles */
#mobile-menu {
  display: none;
  opacity: 0;
  z-index: 100;
}

@media (max-width: 1024px) {
  .desktop-nav {
    display: none !important;
  }

  .mobile-trigger {
    display: flex !important;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
}

@keyframes pulseLine {
  0% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.1;
  }
}


.pulse-bar {
  animation: pulseLine 4s infinite ease-in-out;
}

/* WYSIWYG List Styling */
.custom-bullet-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.custom-bullet-list li {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: white;
  /* Ensure text is white */
  font-size: var(--fluid-base);
}

.custom-bullet-list li::before {
  content: '';
  display: block;
  width: 4px;
  /* w-1 */
  height: 4px;
  /* h-1 */
  background-color: white;
  border-radius: 50%;
  margin-right: 0.75rem;
  /* space-x-2 ~ 0.5rem, adjusted for visual balance */
  flex-shrink: 0;
  /* Prevent dot from shrinking */
}

/* Select arrow (scoped) */
.contact-form select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

.contact-form input:not([type="submit"]),
.contact-form select,
.contact-form textarea {
  @apply w-full bg-transparent text-white placeholder-white/40 border border-white/15 rounded-xl px-4 py-3 outline-none focus:border-white/35 transition;
}

.contact-form label {
  @apply block text-xs uppercase tracking-[0.14em] text-white/70 mb-2;
}

.contact-form button,
.contact-form input[type="submit"] {
  @apply rounded-full bg-white text-black font-semibold tracking-[0.12em] px-8 py-4 hover:opacity-90 transition;
}

.ff-el-form-control {
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ff-el-form-control:hover {
  background-color: white;
  color: black;
  border: 1px solid black;
}