/* ===================================
   GOOGLE FONTS IMPORTS
   =================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ===================================
   CSS CUSTOM PROPERTIES
   =================================== */

@property --spread {
  syntax: '<angle>';
  initial-value: 170deg;
  inherits: false;
}

/* ===================================
   CSS RESET & BASE STYLES
   =================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Brand Colors */
    --primary: #00ABED;
    --primary-dark: #0092C7;
    --primary-light: #33BDEF;
    --secondary: #87CEEB;
    --accent: #FF6B35; /* Vibrant coral/orange for CTAs */
    --accent-hover: #E5572E; /* Darker accent for hover states */
    --dark: #2C3E50;
    --charcoal: #34495E;
    --black: #1A1A1A; /* Near-black, softer than pure black */
    --white: #FAFBFC; /* Off-white, easier on eyes */
    --pure-white: #FFFFFF; /* Only for special cases */
    --inter-blue: #2596be;
    --off-dark: #326080;
    --gray-light: #E9ECEF;
    --gray: #6C757D;

    /* Typography */
    --font-logotype: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Logotype only */
    --font-headers: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Headers and UI elements */
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Body text */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
    max-width: 100vw;
}

html.snap-disabled {
    scroll-snap-type: none;
}

html.snap-disabled section,
html.snap-disabled .pricing-wrapper,
html.snap-disabled .pricing-card-section,
html.snap-disabled .value-props,
html.snap-disabled .faq-section,
html.snap-disabled .final-cta {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

body {
    font-family: var(--font-body);
    color: var(--dark);
    background-color: var(--primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 0; /* Header overlaps hero */
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===================================
   TYPOGRAPHY
   =================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headers);
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark);
}

h1 {
    font-size: 3rem;
    font-weight: 800;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    line-height: 1.7;
    color: var(--charcoal);
}

/* ===================================
   LAYOUT CONTAINERS
   =================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

section {
    padding: var(--spacing-3xl) 0;
}

/* ===================================
   SITEMAP FOR CRAWLERS
   =================================== */

.hidden-sitemap {
    position: absolute;
    left: -9999px;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* ===================================
   STICKY HEADER
   =================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 171, 237);
    z-index: 1001;
    transition: all 0.3s ease;
}

.header-wave {
    position: absolute;
    bottom: -3.75rem;
    left: 0;
    width: 100%;
    height: 60px;
    display: block;
    pointer-events: none;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-md) * 0.9) 0;
    gap: 2rem;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}

.header-logo {
    height: 75px;
    width: auto;
    filter: brightness(0) invert(1); /* Makes logo white */
}

.header-title {
    font-family: var(--font-logotype);
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
}

/* Desktop Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: auto;
}

.header-nav-link {
    font-family: var(--font-headers);
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.header-nav-link:hover {
    opacity: 0.8;
}

/* Hamburger Menu (Mobile Only) */
.header-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1002;
    position: relative;
}

.header-hamburger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -12px;
    background: var(--white);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.1s ease;
    z-index: -1;
}

.header-hamburger.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.hamburger-line {
    width: 25px;
    height: 2px;
    background: var(--white);
    transition: all 0.2s ease;
    border-radius: 2px;
}

.header-hamburger.active .hamburger-line {
    background: var(--primary);
}

.header-hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.header-hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Dropdown Menu */
.header-mobile-menu {
    display: none;
    position: absolute;
    top: calc(100% - 2rem);
    right: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition-delay: 20ms;
    transition: opacity 0.1s ease, transform 0.2s ease;
    z-index: 1000;
}

.header-mobile-menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.mobile-menu-wave {
    width: 160px;
    height: 20px;
    display: block;
}

.mobile-menu-content {
    background: var(--white);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-sm);
    min-width: 160px;
    margin-top: -1px;
}

.header-mobile-link {
    display: block;
    font-family: var(--font-headers);
    font-size: 1rem;
    font-weight: 500;
    color: var(--off-dark);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

.header-mobile-link:hover {
    background: var(--gray-light);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.header-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    min-width: 45px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 3;
}

.header-login-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.header-login-button .login-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* Makes icon white */
}


.header-cta-button {
  --border_radius: 9999px;
  --transition: 0.3s ease-in-out;
  --active: 0;

  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transform-origin: center;
  padding: 0.825rem 1.925rem;
  background-color: transparent;
  border: none;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active) * 0.05)));
  transition: transform var(--transition);
  font-family: var(--font-headers);
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  text-decoration: none;
  z-index: 3;
}

.header-cta-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--accent);
  border-radius: var(--border_radius);
  box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
    0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active))),
    0 0 0 calc(var(--active) * 0.15rem) hsla(14 100% 61% / 0.75);
  transition: all var(--transition);
  z-index: 0;
}

.header-cta-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: hsla(14 100% 65% / 0.75);
  background-image: radial-gradient(
      at 51% 89%,
      hsla(14, 100%, 70%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 100%, hsla(14, 79%, 60%, 1) 0px, transparent 50%),
    radial-gradient(at 22% 91%, hsla(14, 79%, 60%, 1) 0px, transparent 50%);
  background-position: top;
  opacity: var(--active);
  border-radius: var(--border_radius);
  transition: opacity var(--transition);
  z-index: 2;
}

.header-cta-button:is(:hover, :focus-visible) {
  --active: 1;
}

.header-cta-button:active {
  transform: scale(1);
}

.header-cta-button .dots_border {
  --size_border: calc(100% + 2px);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size_border);
  height: var(--size_border);
  background-color: transparent;
  border-radius: var(--border_radius);
  z-index: -1;
  pointer-events: none;
}

.header-cta-button .dots_border {
  --size_border: calc(100% + 2px);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size_border);
  height: var(--size_border);
  border-radius: var(--border_radius);
  z-index: -1;
  pointer-events: none;
}

.header-cta-button .dots_border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 135deg,
    rgba(255, 255, 255, 0.3) 150deg,
    rgba(255, 255, 255, 0.85) 180deg,
    rgba(255, 255, 255, 0.3) 210deg,
    transparent 235deg,
    transparent 360deg
  );
  border-radius: var(--border_radius);
  transform: translate(-50%, -50%);
  animation: orbital-shine 3.5s linear infinite;
  filter: blur(1px);
}

@keyframes orbital-shine {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg) scale(1, 1.6);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg) scale(1, 1.6);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}


.header-cta-button .text_button {
  position: relative;
  z-index: 10;
  background-image: linear-gradient(
    90deg,
    hsla(0 0% 100% / 1) 0%,
    hsla(0 0% 100% / var(--active)) 120%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: white;
}

/* ===================================
   HERO SECTION
   =================================== */

.hero {
    background: var(--primary);
    color: var(--white);
    padding: calc(var(--spacing-3xl) + 120px) 0 var(--spacing-3xl) 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

html.snap-disabled .hero {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

/* Gradient fade at bottom of hero */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--off-dark));
    z-index: 2;
    pointer-events: none;
}

/* Video background */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Mobile static background (hidden by default) */
.hero-mobile-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/hero-poster.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Optional overlay for better text readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    z-index: 1;
    animation: fadeToOverlay 1s ease-in-out 0.5s forwards;
}

@keyframes fadeToOverlay {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.5;
    }
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Social proof inside hero */
.hero-social-proof {
    position: relative;
    z-index: 2;
    margin-top: var(--spacing-3xl);
}

.hero-social-proof .section-label {
    color: rgba(255, 255, 255, 0.9);
}

.hero-social-proof .stat-number {
    color: var(--white);
}

.hero-social-proof .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

.hero-subtitle {
    font-family: var(--font-headers);
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
    font-weight: 400;
}

/* ===================================
   SIGNUP FORM
   =================================== */

.signup-form-wrapper {
    margin-top: var(--spacing-xl);
}

.signup-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.email-input {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: 2px solid transparent;
    border-radius: 9999px;
    background: var(--white);
    color: var(--dark);
    font-family: var(--font-body);
    transition: all 0.3s ease;
}

.email-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 171, 237, 0.1);
}

.email-input::placeholder {
    color: var(--gray);
}

.cta-button {
  --border_radius: 9999px;
  --transition: 0.3s ease-in-out;
  --active: 0;

  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transform-origin: center;
  padding: 1rem 2rem;
  background-color: transparent;
  border: none;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active) * 0.05)));
  transition: transform var(--transition);
  font-family: var(--font-headers);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  z-index: 3;
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--accent);
  border-radius: var(--border_radius);
  box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
    0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active))),
    0 0 0 calc(var(--active) * 0.15rem) hsla(14 100% 61% / 0.75);
  transition: all var(--transition);
  z-index: 0;
}

.cta-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: hsla(14 100% 65% / 0.75);
  background-image: radial-gradient(
      at 51% 89%,
      hsla(14, 100%, 70%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 100%, hsla(14, 79%, 60%, 1) 0px, transparent 50%),
    radial-gradient(at 22% 91%, hsla(14, 79%, 60%, 1) 0px, transparent 50%);
  background-position: top;
  opacity: var(--active);
  border-radius: var(--border_radius);
  transition: opacity var(--transition);
  z-index: 2;
}

.cta-button:is(:hover, :focus-visible) {
  --active: 1;
}

.cta-button:active {
  transform: scale(1);
}

.cta-button .text_button {
  position: relative;
  z-index: 10;
  background-image: linear-gradient(
    90deg,
    hsla(0 0% 100% / 1) 0%,
    hsla(0 0% 100% / var(--active)) 120%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: white;
}

.contact-submit {
    width: 100%;
    margin-top: .5rem;
}

.cta-button .contact-submit {
    margin-top: .5rem;
    justify-items: center;
}

/* Hover / focus: elevate, soften shadow */
.cta-button:hover {
  --active: 1;
}

/* Active (pressed) state*/
.cta-button:active {
  transform: scale(1);
}


.form-disclaimer {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-top: var(--spacing-xs);
}

.final-cta .form-disclaimer {
    color: rgba(255, 255, 255, 0.8);
}

/* ===================================
   SOCIAL PROOF SECTION
   =================================== */

.social-proof {
    background: var(--off-dark);
    padding: var(--spacing-xl) 0;
}

.social-proof::after {
    content: '';
    display: block;
    height: var(--spacing-2xl);
}

.section-label {
    font-family: var(--font-headers);
    text-align: center;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-lg);
}

.stat-item {
    text-align: center;
    background: none;
    padding: 0;
}

.stat-item:hover {
    transform: none;
    box-shadow: none;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: 1rem;
    color: var(--charcoal);
}

/* ===================================
   SECTION HEADERS
   =================================== */

.section-title {
    position: relative;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    z-index: 900;
}

.section-subtitle {
    position: relative;
    font-family: var(--font-headers);
    text-align: center;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-xl);
    z-index: 900;
}

/* ===================================
   HOW IT WORKS SECTION - INTERACTIVE
   =================================== */

.how-it-works {
    background: var(--off-dark);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.how-it-works .container {
    padding-top: var(--spacing-3xl);
}

html.snap-disabled .how-it-works {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}


/* Steps container */
.steps-container {
    position: relative;
    margin-top: var(--spacing-xs);
}

/* Interactive steps grid */
.interactive-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    position: relative;
    z-index: 2;
    justify-items: center;
}

/* Ensure cards are center-aligned at all widths */
@media (min-width: 769px) and (max-width: 1024px) {
    .interactive-steps {
        grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
        justify-content: center;
    }
}

@media (min-width: 1025px) {
    .interactive-steps {
        justify-content: center;
    }
}

/* Step card with 3D effects */
.step-card {
    position: relative;
    background: rgba(50, 96, 128, 0.4);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: float 6s ease-in-out infinite;
    width: 100%;
    max-width: 400px;
}

.step-card[data-step="1"] {
    animation-delay: 0s;
}

.step-card[data-step="2"] {
    animation-delay: 4s;
}

.step-card[data-step="3"] {
    animation-delay: 6s;
}

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


/* Glow effect */
.card-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        #00ABED,
        #FF6B35,
        #00ABED,
        #FF6B35
    );
    background-size: 400% 400%;
    border-radius: var(--radius-xl);
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: gradient-shift 8s ease infinite;
    z-index: -1;
}

.step-card.active-glow .card-glow {
    opacity: 0.8;
}

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

/* Animated border */
.card-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    border: 2px solid transparent;
    background: linear-gradient(45deg,
        rgba(0, 171, 237, 0.5),
        rgba(255, 107, 53, 0.5),
        rgba(0, 171, 237, 0.5)
    ) border-box;
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: border-flow 3s linear infinite;
    pointer-events: none;
}

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

.card-content {
    position: relative;
    z-index: 1;
}

/* Number wrapper with ring */
.step-number-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0, 171, 237, 0.4);
    transition: all 0.3s ease;
}

.step-card.active-glow .step-number {
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
}


/* Icon styling */
.step-card .icon {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* Card title and description */
.step-card .card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    text-align: center;
    transition: all 0.3s ease;
}

.step-card.active-glow .card-title {
    color: var(--white);
}

.step-card .card-description {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    text-align: center;
    transition: all 0.3s ease;
}

.step-card.active-glow .card-description {
    color: var(--white);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .interactive-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .step-card {
        padding: var(--spacing-xl);
    }

    .step-number-wrapper {
        width: 80px;
        height: 80px;
    }

    .step-number {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .step-icon {
        width: 50px;
        height: 50px;
    }
}

/* ===================================
   SAMPLE DEALS SECTION
   =================================== */

.sample-deals {
    background: var(--off-dark);
    overflow: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.sample-deals::before {
    content: '';
    display: block;
    height: var(--spacing-2xl);
}

html.snap-disabled .sample-deals {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

/* Deal Carousel */
.carousel {
    position: relative;
    height: 60vh;
    min-height: 500px;
    overflow: visible;
    pointer-events: none;
}

.carousel-item {
    --items: 8;
    --width: clamp(300px, 35vw, 420px);
    --height: clamp(400px, 47vw, 560px);
    --x: calc(var(--active) * 600%);
    --y: calc(var(--active) * 140%);
    --rot: calc(var(--active) * 100deg);
    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
    overflow: hidden;
    position: absolute;
    z-index: var(--zIndex);
    width: var(--width);
    height: var(--height);
    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
    border-radius: var(--radius-lg);
    top: 50%;
    left: 50%;
    user-select: none;
    transform-origin: 0% 100%;
    box-shadow: var(--shadow-xl);
    background: var(--black);
    pointer-events: all;
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
    cursor: pointer;
}

.carousel-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    opacity: var(--opacity);
}

.carousel-box::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        transparent 30%,
        rgba(0, 0, 0, 0.7) 80%);
}

.deal-info {
    position: absolute;
    z-index: 2;
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    right: var(--spacing-md);
    color: var(--white);
}

.deal-destination {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.deal-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    line-height: 1.1;
}

.price-label {
    font-size: 1rem;
    font-weight: 400;
    color: var(--white);
}

/* ===================================
   FEATURES SECTION
   =================================== */

.features {
    background: var(--off-dark);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.features::before {
    content: '';
    display: block;
    height: var(--spacing-3xl);
}

html.snap-disabled .features {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

/* ===================================
   TESTIMONIALS SECTION
   =================================== */

.testimonials {
    background: var(--off-dark);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: var(--spacing-3xl) 0;
}

.testimonials::before {
    content: '';
    display: block;
    height: var(--spacing-3xl);
}

html.snap-disabled .testimonials {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.testimonial-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.testimonial-card:nth-child(2) {
    animation-delay: 0.2s;
}

.testimonial-card:nth-child(3) {
    animation-delay: 0.4s;
}

.testimonial-card:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternating layouts */
.testimonial-left {
    flex-direction: row;
}

.testimonial-right {
    flex-direction: row-reverse;
}

.testimonial-image {
    flex: 1;
    min-width: 0;
}

.testimonial-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    object-fit: cover;
    aspect-ratio: 4/3;
}

.testimonial-content {
    flex: 1;
    min-width: 0;
}

.testimonial-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.testimonial-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.testimonial-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.testimonial-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
}

.testimonial-features .feature-check {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

/* Right-aligned content for alternating cards */
.testimonial-right .testimonial-content {
    text-align: right;
}

.testimonial-right .testimonial-features li {
    flex-direction: row-reverse;
}

/* Responsive */
@media (max-width: 768px) {
    .testimonial-card,
    .testimonial-left,
    .testimonial-right {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .testimonial-right .testimonial-content {
        text-align: left;
    }

    .testimonial-right .testimonial-features li {
        flex-direction: row;
    }

    .testimonial-title {
        font-size: 1.5rem;
    }

    .testimonial-description {
        font-size: 1rem;
    }
}

/* ===================================
   FINAL CTA SECTION
   =================================== */

.final-cta {
    background: var(--off-dark);
    padding: var(--spacing-3xl) 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    z-index: 900;
}

html.snap-disabled .final-cta {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-md);
}

.cta-subtitle {
    font-family: var(--font-headers);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-xl);
}

/* ===================================
   FOOTER
   =================================== */

.footer {
    background: var(--dark);
    color: var(--white);
    padding: var(--spacing-2xl) 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-logo-link {
    text-decoration: none;
    cursor: pointer;
}

.footer-logo {
    font-family: var(--font-logotype);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    transition: color 0.3s ease;
}

.footer-logo-link:hover .footer-logo {
    color: var(--primary-light);
}

.footer-links {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--white);
}

.footer-link:active {
    color: var(--primary);
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.footer-social {
    display: flex;
    gap: var(--spacing-md);
    text-decoration: none;
    color: var(--white);
}

.social-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.social-button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: var(--white);
}

.social-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1) opacity(0.7);
    transition: filter 0.3s ease;
}

.social-button:hover .social-icon {
    filter: brightness(0) invert(1) opacity(1);
}

.footer-copy {
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 0.875rem;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
    /* Header */
    body {
        padding-top: 0;
    }

    .header-content {
        padding: calc(var(--spacing-md) * 0.9) 0;
        gap: 1rem;
    }

    .header-wave {
        height: 40px;
        bottom: -2.5rem; /* -40px to match mobile height */
    }

    .pricing-wave {
        height: 40px;
        bottom: -2.5rem; /* -40px to match mobile height */
    }

    .about-wave {
        height: 40px;
        bottom: -2.5rem; /* -40px to match mobile height */
    }

    .header-logo {
        height: 38px;
    }

    .header-title {
        font-size: 1.35rem;
    }

    /* Hide desktop nav and login button, show hamburger and mobile menu */
    .header-nav {
        display: none;
    }

    .header-login-button {
        display: none;
    }

    .header-hamburger {
        display: flex;
    }

    .header-mobile-menu {
        display: block;
    }

    .header-cta-button {
        padding: 0.66rem 1.375rem;
        font-size: 0.97rem;
    }

    /* Typography */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .hero-title {
        font-size: 2.25rem;
    }

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

    .section-title {
        font-size: 2rem;
    }

    /* Layout */
    section {
        padding: var(--spacing-2xl) 0;
    }

    .hero {
        min-height: 100vh;
        padding: calc(var(--spacing-2xl) + 96px) 0 var(--spacing-2xl) 0;
    }

    /* Hide video on mobile, show static image instead */
    .hero-video {
        display: none;
    }

    .hero-mobile-bg {
        display: block;
    }

    /* Forms */
    .form-group {
        flex-direction: column;
    }

    .cta-button {
        width: 100%;
    }

    /* Grids */
    .grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Deal Carousel Mobile */
    .carousel {
        height: 50vh;
        min-height: 400px;
    }

    .carousel-item {
        --width: clamp(280px, 60vw, 350px);
        --height: clamp(373px, 80vw, 467px);
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .footer-brand {
        align-items: center;
    }

    .footer-right {
        align-items: center;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .footer-social {
        flex-direction: column;
        width: 100%;
        max-width: 200px;
    }

    .social-button {
        width: 100%;
        justify-content: center;
    }

    /* Content pages (Privacy, Terms) */
    .content-wrapper {
        padding: var(--spacing-xl) var(--spacing-xs) var(--spacing-xl);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .hero-title {
        font-size: 1.875rem;
    }

    .deal-price {
        font-size: 2rem;
    }

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

    /* Deal Carousel Very Small Mobile */
    .carousel-item {
        --width: clamp(240px, 70vw, 300px);
        --height: clamp(320px, 93vw, 400px);
    }

    .deal-destination {
        font-size: 1.25rem;
    }

    .deal-price {
        font-size: 2rem;
    }
}

/* ===================================
   ANIMATIONS & TRANSITIONS
   =================================== */

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

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* ===================================
   UTILITY CLASSES
   =================================== */

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }


/* ===================================
   GENERIC GRID AND CARD COMPONENTS
   =================================== */

/* Generic Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    justify-items: center;
}

/* Generic Card */
.card {
    background: var(--inter-blue);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Card modifier for bordered style */
.card--bordered {
    border: 2px solid var(--off-dark);
}

/* Card modifier for transparent background (for dark backgrounds) */
.card--transparent {
    background: transparent;
    box-shadow: none;
}

.card--transparent:hover {
    box-shadow: none;
}

/* Generic Icon */
.icon {
    font-size: 4.5rem;
    margin-bottom: var(--spacing-md);
}

/* Generic Card Title */
.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
}

/* Card title modifier for light backgrounds */
.card-title--light {
    color: var(--dark);
}

/* Generic Card Description */
.card-description {
    color: var(--gray-light);
    line-height: 1.6;
}

/* Card description modifier for light backgrounds */
.card-description--light {
    color: var(--charcoal);
}

/* ===================================
   ADDITIONAL PAGES STYLES
   =================================== */

/* Page Hero */
.page-hero {
    background: var(--off-dark);
    color: var(--white);
    padding: calc(var(--spacing-2xl) + 80px) 0 var(--spacing-2xl) 0;
    text-align: center;
}

/* Page specific padding */
body.y-scroll-snap .page-hero {
    padding-top: calc(var(--spacing-2xl) + 80px + 6rem);
}

.page-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--spacing-md);
}

.page-hero-subtitle {
    font-family: var(--font-headers);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
}

/* Non-index pages - smaller section headings */
body:not(.home) .section-title,
.pricing-section .section-title,
.value-props .section-title,
.faq-section .section-title,
.contact-section .section-title,
.team-section .section-title,
.final-cta .cta-title {
    font-size: 2rem;
}

body:not(.home) .section-subtitle,
.pricing-section .section-subtitle,
.value-props .section-subtitle,
.faq-section .section-subtitle,
.contact-section .section-subtitle,
.final-cta .cta-subtitle {
    font-size: 1rem;
}

/* Pricing Section */
.pricing-section {
    background: var(--off-dark);
    padding: var(--spacing-2xl) 0;
}

.pricing-card-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    z-index: 10; /* Above clouds */
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-xl);
    text-align: center;
    transform: scale(0.85);
}

.pricing-header {
    margin-bottom: var(--spacing-xl);
}

.trial-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent) 0%, #ff8c5a 100%);
    color: var(--pure-white);
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
}

.pricing-plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: var(--spacing-sm);
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    opacity: 0.8;
}

.pricing-currency {
    font-size: 1.5rem;
    color: var(--off-dark);
    font-weight: 600;
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--off-dark);
    line-height: 1;
}

.pricing-period {
    font-size: 1rem;
    color: var(--gray);
}

.pricing-billing {
    color: var(--gray);
    margin-top: var(--spacing-sm);
}

.pricing-features {
    list-style: none;
    text-align: left;
    margin-bottom: var(--spacing-xl);
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--dark);
}

.feature-check {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.pricing-cta {
    --border_radius: 9999px;
    --transition: 0.3s ease-in-out;
    --active: 0;

    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transform-origin: center;
    padding: 0.825rem 1.925rem;
    background-color: transparent;
    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active) * 0.05)));
    transition: transform var(--transition);
    font-family: var(--font-headers);
    font-weight: 600;
    font-size: 1.05rem;
    white-space: nowrap;
    text-decoration: none;
    z-index: 12;
    width: 100%;
}

.pricing-cta::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: var(--accent);
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
        0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active))),
        0 0 0 calc(var(--active) * 0.15rem) hsla(14 100% 61% / 0.75);
    transition: all var(--transition);
}

.pricing-cta::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: hsla(14 100% 65% / 0.75);
    background-image: radial-gradient(
            at 51% 89%,
            hsla(14, 100%, 70%, 1) 0px,
            transparent 50%
        ),
        radial-gradient(at 100% 100%, hsla(14, 79%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 91%, hsla(14, 79%, 60%, 1) 0px, transparent 50%);
    background-position: top;
    opacity: var(--active);
    border-radius: var(--border_radius);
}

.pricing-cta:is(:hover, :focus-visible) {
    --active: 1;
}

.pricing-cta:active {
    transform: scale(1.1);
}

.pricing-cta .dots_border {
    --size_border: calc(100% + 6px);
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size_border);
    height: var(--size_border);
    background-color: transparent;
    border-radius: var(--border_radius);
    z-index: -1;
    pointer-events: none;
}

.pricing-cta .dots_border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 135deg,
        rgba(255, 107, 53, 0.3) 150deg,
        rgba(255, 107, 53, 0.85) 180deg,
        rgba(255, 107, 53, 0.3) 210deg,
        transparent 235deg,
        transparent 360deg
    );
    border-radius: var(--border_radius);
    transform: translate(-50%, -50%);
    animation: orbital-shine 3.5s linear infinite;
    filter: blur(1px);
}

.pricing-cta .text_button {
    position: relative;
    z-index: 12;
    background-image: linear-gradient(
        90deg,
        hsla(0 0% 100% / 1) 0%,
        hsla(0 0% 100% / var(--active)) 120%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: white;
}

/* Resubscribe CTA - Solid Primary Blue */
.resubscribe-cta::before {
    background-color: var(--primary) !important;
}

.resubscribe-cta::after {
    background-color: transparent !important;
    background-image: none !important;
}

.pricing-guarantee {
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--gray);
    font-style: italic;
}

/* Value Props */
.value-props {
    background: var(--off-dark);
    padding: var(--spacing-2xl) 0;
    padding-top: calc(var(--spacing-2xl) + 4rem); /* Extra 2rem for wave */
    position: relative;
    z-index: 20;
}

/* FAQ Section */
.faq-section {
    background: var(--off-dark);
    padding: var(--spacing-2xl) 0;
    position: relative;
    z-index: 20;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) auto 0;
}

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

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

.faq-item {
    background: var(--white);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    font-family: var(--font-headers);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dark);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--white);
}

.faq-icon {
    width: 20px;
    height: 20px;
    color: var(--off-dark);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--charcoal);
    line-height: 1.7;
}

/* -------------------------------------------------
   Contact Form Split Screen – Image Left, Form Right
   ------------------------------------------------- */
.contact-split-section {
    background: var(--off-dark);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20vh;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 5vh;
}

.contact-split-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    min-height: 60vh;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

/* ---------- LEFT: IMAGE (50% width) ---------- */
.contact-image {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.contact-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
}

/* ---------- RIGHT: FORM CARD (50% width) ---------- */
.contact-form-card {
    flex: 1;
    background: #f5f7fa;
    padding: 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Form content – nice gaps */
.contact-form-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -------------------------------------------------
   Typography
   ------------------------------------------------- */
.contact-form-title {
    font-size: 2.5rem;
    color: var(--dark);
    margin: 0 0 20px;
    font-weight: 700;
    line-height: 1.1;
}
.contact-form-subtitle {
    color: var(--dark);
    font-size: 1.1rem;
    margin: 0 0 3px;
    line-height: 1.6;
}
.contact-link { color: var(--primary); text-decoration: underline; }
.contact-link:hover { color: var(--primary-dark); }

/* -------------------------------------------------
   Optional – clean input styles (recommended)
   ------------------------------------------------- */
.form-field { margin: 0; }
.contact-input,
.contact-textarea {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #ccc;
    border-radius: .5rem;
    font: inherit;
    background: #fff;
}
.contact-textarea { min-height: 120px; resize: vertical; }

/* -------------------------------------------------
   Responsive - Hide image on mobile
   ------------------------------------------------- */
@media (max-width: 768px) {
    .contact-image {
        display: none;
    }

    .contact-split-container {
        min-height: auto;
    }

    .contact-form-card {
        padding: 4rem 1.5rem;
    }
}

/* Old Contact Form Styles (keeping for backwards compatibility) */
.contact-section {
    background: var(--off-dark);
    padding: var(--spacing-2xl) 0;
    padding-top: calc(var(--spacing-2xl) + 6rem);
}

.contact-form-wrapper {
    max-width: 600px;
    margin: var(--spacing-2xl) auto 0;
    background: var(--white);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.form-field {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    font-family: var(--font-headers);
    font-weight: 600;
    color: var(--dark);
    margin-bottom: var(--spacing-xs);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-body);
    font-size: 1rem;
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--off-dark);
    box-shadow: 0 0 0 3px rgba(50, 96, 128, 0.1);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--dark);
    margin: var(--spacing-md) 0;
}

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

.checkbox-label span {
    user-select: none;
}

/* ===================================
   PROFILE PAGE
   =================================== */

.profile-page {
    background: var(--off-dark);
    min-height: 100vh;
    padding-top: 6rem;
}

.profile-section {
    padding: var(--spacing-2xl) 0;
}

.profile-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.profile-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-xs);
}

.profile-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
}

.profile-card {
    background: var(--white);
    border-radius: 16px;
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--gray-light);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}

.status-badge {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.status-active {
    background: rgba(52, 211, 153, 0.1);
    color: rgb(5, 150, 105);
}

.status-trial {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(29, 78, 216);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-md);
}

.info-label {
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.info-value {
    color: var(--dark);
    font-weight: 500;
    flex-grow: 1;
    text-align: right;
}

.card-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--gray-light);
}

.btn-edit,
.btn-secondary,
.btn-danger {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: var(--font-headers);
    font-size: 1rem;
}

.btn-edit {
    background: var(--primary);
    color: var(--white);
}

.btn-edit:hover {
    background: var(--off-dark);
}

.info-row .btn-edit {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.btn-secondary {
    background: var(--gray-light);
    color: var(--dark);
    text-decoration: none;
    display: inline-block;
}

.btn-secondary:hover {
    background: var(--gray-medium);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(220, 38, 38);
}

.btn-danger:hover {
    background: rgb(220, 38, 38);
    color: var(--white);
}

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

    .card-actions .btn-edit,
    .card-actions .btn-secondary,
    .card-actions .btn-danger {
        width: 100%;
        text-align: center;
    }

    .card-header {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .card-header .btn-edit,
    .info-row .btn-edit {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Content Pages */
.content-section {
    background: var(--off-dark);
    padding: var(--spacing-2xl) 0;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: var(--spacing-2xl);
    padding-top: 4rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.content-wrapper h2 {
    color: var(--dark);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.content-wrapper h3 {
    color: var(--dark);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.content-wrapper p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
    color: var(--charcoal);
}

.content-wrapper ul,
.content-wrapper ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
    color: var(--charcoal);
    line-height: 1.8;
}

.content-wrapper li {
    margin-bottom: var(--spacing-xs);
}

/* Team Section */
/* About Page Specific Styles */
body.about-page {
    background: var(--white);
    scroll-snap-type: none !important;
    overflow-y: auto !important;
    height: auto !important;
}

body.about-page section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* FAQ Page Specific Styles */
body.faq-page {
    scroll-snap-type: none !important;
    overflow-y: auto !important;
    height: auto !important;
}

body.faq-page section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

body.faq-page .page-hero {
    padding-top: calc(var(--spacing-2xl) + 80px + 8rem);
    padding-bottom: var(--spacing-sm);
}

/* Pricing Page Specific Styles */
/* FAQ Page Specific Styles */
body.pricing-page {
    scroll-snap-type: none !important;
    overflow-y: auto !important;
    height: auto !important;
}

body.pricing-page section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

body.about-page .page-hero {
    background: var(--white);
    padding-top: calc(var(--spacing-2xl) + 80px + 8rem);
    padding-bottom: var(--spacing-lg);
}

body.about-page .page-hero-title,
body.about-page .page-hero-subtitle {
    color: var(--off-dark);
}

body.about-page .team-section {
    padding-top: var(--spacing-lg);
}

body.about-page .testimonial-card {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Blog Page Hero Style */
.page-hero.blog {
    margin-top: 50px;
    padding-bottom: 0px;
}

body.y-scroll-snap .page-hero.blog {
    padding-top: calc(var(--spacing-lg) + 6rem);
}

body.about-page .testimonial-image {
    max-width: 280px;
}

body.about-page .testimonial-image img {
    box-shadow: none;
    aspect-ratio: 3/4;
}

.team-section {
    position: relative;
    background: var(--white);
    padding: var(--spacing-2xl) 0;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
    max-width: 900px;
    margin: 0 auto;
}

.team-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.team-avatar {
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-lg);
}

.avatar-icon {
    width: 100%;
    height: 100%;
}

.team-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: var(--spacing-xs);
}

.team-role {
    font-family: var(--font-headers);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

.team-bio {
    color: var(--charcoal);
    line-height: 1.7;
    text-align: left;
}

.team-bio-r {
    color: var(--charcoal);
    line-height: 1.7;
    text-align: right;
}

.about-wave {
    position: absolute;
    bottom: -3.75rem;
    left: 0;
    width: 100%;
    height: 60px;
    display: block;
    pointer-events: none;
    z-index: 500;
}

/* Fade-in animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Load-based fade-in (for terms/privacy pages) */
.fade-in-on-load {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.fade-in-on-load.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Y-Scroll snap for non-index pages */
body.y-scroll-snap {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

body.y-scroll-snap section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

body.y-scroll-snap .page-hero,
body.y-scroll-snap .pricing-section,
body.y-scroll-snap .value-props,
body.y-scroll-snap .faq-section,
body.y-scroll-snap .contact-section,
body.y-scroll-snap .content-section,
body.y-scroll-snap .team-section,
body.y-scroll-snap .final-cta,
body.y-scroll-snap .footer {
    scroll-snap-align: start;
}

/* Disable scroll snap on mobile for FAQ, contact, about pages */
@media (max-width: 768px) {
    body.y-scroll-snap {
        scroll-snap-type: none;
        height: auto;
    }

    body.y-scroll-snap section,
    body.y-scroll-snap .page-hero,
    body.y-scroll-snap .pricing-section,
    body.y-scroll-snap .value-props,
    body.y-scroll-snap .faq-section,
    body.y-scroll-snap .contact-section,
    body.y-scroll-snap .content-section,
    body.y-scroll-snap .team-section,
    body.y-scroll-snap .final-cta,
    body.y-scroll-snap .footer {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        min-height: auto;
    }
}

/* Pricing card section */
.pricing-card-section {
    position: relative;
    z-index: 8;
    background: var(--primary);
    padding-top: calc(var(--spacing-3xl) + 4rem);
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    min-height: 100vh;
}

.pricing-wave {
    position: absolute;
    bottom: -3.75rem;
    left: 0;
    width: 100%;
    height: 60px;
    display: block;
    pointer-events: none;
    z-index: 15;
}

.pricing-card-wrapper-hero {
    position: relative;
    z-index: 15; /* Above clouds */
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Cloud decorations section */
.pricing-card-section .cloud-decoration {
    position:absolute;
    z-index: 1; /* Higher than background, lower than pricing card */
    pointer-events: none;
}

.pricing-card-section .cloud-1 {
    width: clamp(200px, 25vw, 400px);
    height: auto;
    left: -10%; /* Intersects left edge */
    transform: translateX(-10%);
}

.pricing-card-section .cloud-2 {
    width: clamp(250px, 30vw, 450px);
    height: auto;
    top: 20%;
    right: -10%; /* Intersects right edge */
    transform: translateX(10%);
}

.pricing-card-section .cloud-3 {
    width: clamp(180px, 22vw, 350px);
    height: auto;
    bottom: 15%;
    left: -5%; /* Intersects left edge */
    transform: translateX(-15%);
}

.pricing-card-section .cloud-4 {
    width: clamp(400px, 40vw, 600px);
    height: auto;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.3);
}



/* ===================================
   LOGIN PAGE
   =================================== */

.login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--off-dark) 100%);
    padding: var(--spacing-xl) var(--spacing-md);
}

.login-container {
    width: 100%;
    max-width: 520px;
}

.login-card {
    background: var(--white);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: var(--spacing-2xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .login-container {
        max-width: 50vw;
        min-width: 500px;
    }

    .login-card {
        padding: 3rem;
    }
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    margin-bottom: var(--spacing-md);
}

.login-logo {
    height: 50px;
    width: auto;
    filter: invert(58%) sepia(94%) saturate(3567%) hue-rotate(166deg) brightness(94%) contrast(101%);
}

.login-brand-title {
    font-family: var(--font-logotype);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

.login-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.login-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.login-methods {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.login-method-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    width: 60%;
    max-width: 320px;
    margin: 0 auto;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-headers);
    font-size: 1rem;
    font-weight: 600;
}

.login-method-button:hover {
    border-color: var(--primary);
    background: rgba(0, 171, 237, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-method-button.apple-login {
    color: #000;
}

.login-method-icon {
    width: 24px;
    height: 24px;
}

.login-method-text {
    font-weight: 600;
}

.login-divider {
    position: relative;
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.login-divider-text {
    position: relative;
    display: inline-block;
    padding: 0 var(--spacing-md);
    background: var(--white);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.3s ease;
    background: white;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 171, 237, 0.1);
}

.form-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.forgot-password {
    align-self: flex-end;
    font-size: 0.875rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    margin-top: calc(-1 * var(--spacing-xs));
}

.forgot-password:hover {
    text-decoration: underline;
}

.login-submit-button {
    --border_radius: 9999px;
    --transition: 0.3s ease-in-out;
    --active: 0;

    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    width: 60%;
    max-width: 320px;
    margin: var(--spacing-sm) auto 0;
    background-color: transparent;
    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active) * 0.05)));
    transition: transform var(--transition);
    font-family: var(--font-headers);
    font-weight: 600;
    font-size: 1rem;
}

.login-submit-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: var(--accent);
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
        0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active))),
        0 0 0 calc(var(--active) * 0.15rem) hsla(14 100% 61% / 0.75);
    transition: all var(--transition);
}

.login-submit-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: hsla(14 100% 65% / 0.75);
    background-image: radial-gradient(
            at 51% 89%,
            hsla(14, 100%, 70%, 1) 0px,
            transparent 50%
        ),
        radial-gradient(at 100% 100%, hsla(14, 79%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 91%, hsla(14, 79%, 60%, 1) 0px, transparent 50%);
    background-position: top;
    opacity: var(--active);
    border-radius: var(--border_radius);
    transition: opacity var(--transition);
}

.login-submit-button:is(:hover, :focus-visible) {
    --active: 1;
}

.login-submit-button:active {
    transform: scale(1);
}

.login-submit-button .text_button {
    position: relative;
    z-index: 10;
    background-image: linear-gradient(
        90deg,
        hsla(0 0% 100% / 1) 0%,
        hsla(0 0% 100% / var(--active)) 120%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: white;
}

.login-footer {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.login-footer-text {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

.register-link {
    display: inline-block;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.register-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .login-card {
        padding: var(--spacing-lg);
    }

    .login-title {
        font-size: 1.75rem;
    }

    .login-method-button {
        width: 80%;
        padding: var(--spacing-sm) var(--spacing-sm);
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .login-method-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .login-method-text {
        flex-shrink: 0;
    }
}

/* ===================================
   SHARED ANIMATIONS
   Centralized animations used across multiple pages
   =================================== */

/* Slide animations for messages and modals */
@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

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

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fade animations (if not already present) */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Spin animation for loaders */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===================================
   FORM UTILITIES
   Shared form styles used across pages
   =================================== */

.readonly-field,
.form-input[readonly] {
    background-color: #f5f5f5 !important;
    color: #888 !important;
    cursor: not-allowed !important;
    border-color: #ddd !important;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Gender/select dropdown styling */
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23326080' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Back button styling */
.back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--primary);
    font-family: var(--font-headers);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.back-button:hover {
    color: var(--off-dark);
    transform: translateX(-4px);
}

.back-button svg {
    transition: transform 0.2s ease;
}

.back-button:hover svg {
    transform: translateX(-2px);
}

/* Hidden utility class */
.hidden {
    display: none !important;
}

.header-spacer {
    height: 150px; /* Adjust this to match your header height */
    width: 100%;
}

/* Article-specific styles */

article {
    max-width: 90vw;
    margin: 0 auto;
}


body.article-page {
    background: var(--inter-blue);
    scroll-snap-type: none !important;
    overflow-y: auto !important;
    height: auto !important;
}

body.article-page section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* Article container with background clouds */
.article-wrapper {
    position: relative;
    min-height: 100vh;
    padding: var(--spacing-xl) 0;
}

.article-wrapper .cloud-decoration {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

.article-wrapper .cloud-1 {
    width: clamp(200px, 25vw, 400px);
    height: auto;
    top: 10%;
    left: -10%;
    transform: translateX(-10%);
}

.article-wrapper .cloud-2 {
    width: clamp(250px, 30vw, 450px);
    height: auto;
    top: 30%;
    right: -10%;
    transform: translateX(10%);
}

.article-wrapper .cloud-3 {
    width: clamp(180px, 22vw, 350px);
    height: auto;
    bottom: 35%;
    left: -5%;
    transform: translateX(-15%);
}

.article-wrapper .cloud-4 {
    width: clamp(400px, 40vw, 600px);
    height: auto;
    bottom: 5%;
    right: -15%;
    transform: translateX(15%);
}

/* Main article container */
.article-container {
    position: relative;
    z-index: 2;
    margin: 100px 2vw; /* 10vw padding on left and right */
    background: var(--white);
    border-radius: 12px; /* Only bottom corners rounded */
    box-shadow: var(--shadow-xl);
    padding: 0 var(--spacing-2xl) var(--spacing-3xl); /* No top padding */
    min-height: 100vh;
}

@media (max-width: 768px) {
    .article-container {
        padding: var(--spacing-xl) var(--spacing-lg);
        margin: 0 var(--spacing-md);
    }
    .article-container {
        margin: 0 5vw; /* Reduce side padding on mobile */
        padding: var(--spacing-lg) var(--spacing-xl);
    }
    
    .header-spacer {
        height: 120px; /* Adjust for mobile header */
    }
}

/* Article header */
.article-header {
    padding-top: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    text-align: left;
}

.article-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 800;
    color: var(--primary-text);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.article-meta {
    display: flex;
    gap: var(--spacing-md);
    color: var(--secondary-text);
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Article content */
.article-content {
    color: var(--primary-text);
    line-height: 1.8;
    text-align: left;
}

.article-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
    color: var(--primary-text);
}

.article-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--primary-text);
}

.article-content p {
    margin-bottom: var(--spacing-lg);
    font-size: 1.05rem;
}

.article-content ul, 
.article-content ol {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-xl);
}

.article-content li {
    margin-bottom: var(--spacing-sm);
    font-size: 1.05rem;
}

/* Inline images */
.article-image {
    width: 100%;
    max-width: 700px;
    align-items: center;
    height: auto;
    border-radius: 8px;
    margin: var(--spacing-md) 0;
    box-shadow: var(--shadow-md);
}

.article-image-caption {
    text-align: center;
    font-size: 0.5rem;
    color: var(--secondary-text);
    font-style: italic;
}


/* Article Card Style */
.article-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease 0.1s;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    cursor: pointer;
}

.article-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    background: var(--pure-white);
}

/* Add this to your existing styles */
.blog-posts:has(.article-card:hover) .article-card:not(:hover) {
    opacity: 0.9;
    transform: scale (0.98);
    transition: box-shadow 0.3s ease, 
                transform 0.3s ease, 
                opacity 0.3s ease;
    
}

.article-card-image {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0, 171, 237, 0.1), rgba(255, 107, 53, 0.1));
    background-size: cover;
    border-radius: 6px;
    margin: var(--spacing-md);
    overflow: hidden;
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-content {
    flex: 1;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .article-card {
        flex-direction: column; /* Stack vertically */
        padding: 0; /* Remove padding, let children handle it */
    }

    .article-card-image {
        width: 100%; /* Full width instead of 160px */
        height: 200px; /* Keep a reasonable height */
        background-size: cover; /* Adjust background size */
        margin: 0; /* Remove margin */
        border-radius: 6px 6px 0 0; /* Only round top corners */
    }

    .article-card-content {
        padding: var(--spacing-lg);
        margin: 0; /* Remove the 5vw margin */
    }
}



/* Ensure login/register views toggle correctly - prevent both from showing */
#loginView.hidden,
#registerView.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Ensure visible views are properly displayed */
#loginView:not(.hidden),
#registerView:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    left: auto !important;
}