/* ============================================================
   LANDING & MARKETING PAGES - UTILITIES & INLINE STYLES
   ============================================================ */

/* ---- Flex & Layout Utilities ---- */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

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

/* ---- Animation Delays for Reveal Elements ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Individual reveal delays */
.reveal[style*="delay:.05s"],
.delay-1 {
  transition-delay: 0.05s;
}

.reveal[style*="delay:.1s"],
.delay-2 {
  transition-delay: 0.1s;
}

.reveal[style*="delay:.12s"],
.delay-3 {
  transition-delay: 0.12s;
}

.reveal[style*="delay:.19s"],
.delay-4 {
  transition-delay: 0.19s;
}

.reveal[style*="delay:.26s"],
.delay-5 {
  transition-delay: 0.26s;
}

/* ---- Container Widths ---- */
.max-width-600 {
  max-width: 600px;
}

.max-width-800 {
  max-width: 800px;
}

/* ---- Text Alignment Utilities ---- */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ---- Margin Utilities ---- */
.margin-auto {
  margin: 0 auto;
}

.margin-left-auto {
  margin-left: auto;
}

.margin-right-auto {
  margin-right: auto;
}

.margin-top-1 {
  margin-top: 8px;
}

.margin-top-2 {
  margin-top: 16px;
}

.margin-top-3 {
  margin-top: 24px;
}

.margin-bottom-1 {
  margin-bottom: 8px;
}

.margin-bottom-2 {
  margin-bottom: 16px;
}

.margin-bottom-3 {
  margin-bottom: 24px;
}

/* ---- Display Utilities ---- */
.display-inline-block {
  display: inline-block;
}

.display-none {
  display: none;
}

.display-flex {
  display: flex;
}

.display-grid {
  display: grid;
}

/* ---- Floating Elements ---- */
.floating-blob {
  position: absolute;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

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

/* ---- Floating Badges (Hero Section) ---- */
.floating-badge {
  position: absolute;
  animation: float-slow 8s ease-in-out infinite;
}

.floating-badge:nth-child(1) {
  animation-duration: 4.2s;
  animation-delay: 0s;
}

.floating-badge:nth-child(2) {
  animation-duration: 5s;
  animation-delay: -0.8s;
}

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

/* ---- Grid Layouts ---- */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.grid-3-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.grid-auto {
  display: grid;
  gap: 20px;
  grid-auto-flow: dense;
}

/* ---- Spacing Utilities ---- */
.gap-1 {
  gap: 8px;
}

.gap-2 {
  gap: 16px;
}

.gap-3 {
  gap: 24px;
}

/* ---- Color Text Utilities ---- */
.text-teal {
  color: var(--teal);
}

.text-teal-light {
  color: var(--teal-l);
}

.text-navy {
  color: var(--navy);
}

.text-secondary {
  color: var(--txt2);
}

/* ---- Height Utilities ---- */
.full-screen-minus-navbar {
  min-height: calc(100vh - 70px);
}

.screen-height-minus-nav {
  height: calc(100vh - 62px);
}

/* ---- Form Inputs Utilities for Pro-Landing ---- */
.form-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.form-checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--teal);
}

.form-checkbox-wrapper label {
  margin: 0;
  cursor: pointer;
  color: var(--txt-secondary);
}

.form-checkbox-wrapper a {
  color: var(--teal);
  text-decoration: none;
}

.form-checkbox-wrapper a:hover {
  text-decoration: underline;
}

/* ---- Section Head Styling ---- */
.section-head-centered {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.section-head-centered .section-sub {
  margin: 0 auto;
}

/* ---- Animation Duration Utilities ---- */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.slide-in {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---- Responsive Design Utilities ---- */
@media (max-width: 1024px) {
  .grid-2-col,
  .grid-3-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .display-flex {
    flex-direction: column;
  }

  .grid-2-col,
  .grid-3-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .max-width-600 {
    max-width: 100%;
  }
}