/* ─── Basic Reset ──────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
  }
  

/* ─── Fullscreen Background Video ─────────────────────────────────────────── */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;

  /* Hints to keep video rendering sharp */
  image-rendering: auto;
  will-change: transform;
  transform: translateZ(0);
}

/* ─── Semi-transparent Overlay ─────────────────────────────────────────────── */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* ─── Hero Section ────────────────────────────────────────────────────────── */
.hero-content {
  position: relative;
  min-height: 100vh;                       /* ensure full-screen coverage */
  display: flex;
  flex-direction: column;
  justify-content: center;                 /* vertically center main content */
  align-items: center;                     /* horizontally center main content */
  text-align: center;
  color: var(--color-text);                /* use theme text color */
  background: transparent;                 /* allow background video/overlay to show through */
  padding: 1rem 1rem;                      /* consistent horizontal padding; creates breathing room */
  gap: 1rem;                             /* uniform spacing between child elements */

  /* ensure content sits above any background elements */
  z-index: 1;
}

/* ----------------------------------------
   Neon-Filter Header (New Approach)
   ---------------------------------------- */
   :root {
    /* Primary neon blue (adjust RGB as needed) */
    --color-neon:          rgb(34, 19, 252);
    /* A semi-transparent version for the faint glow */
    --color-neon-faint:    rgba(13, 0, 190, 0.3);
    /* A strong version for peak glow */
    --color-neon-strong:   rgba(17, 0, 255, 0.9);
  
    /* Pulsing speed: 2 seconds by default */
    --pulse-duration:      5s;
  }
  
  .hero-content {
    text-align: center;
  }
  
  /* Main heading: use a single drop-shadow stack instead of multiple text-shadows */
  .hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw + 1.5rem, 3.5rem);
    margin: 0 0 0.75rem;
    color: var(--color-neon);
    position: relative;
    display: inline-block;
    /* We put text on top (no z-index needed unless stacking other elements) */
  
    /* Base filter: just a faint halo around the letters */
    filter:
      drop-shadow(0 0 4px var(--color-neon-faint))
      drop-shadow(0 0 8px var(--color-neon-faint));
  
    /* Animate between “faint halo” and “big bloom” */
    animation: neonFilterPulse var(--pulse-duration) ease-in-out infinite;
  }
  
  @keyframes neonFilterPulse {
    /* 0%: Very subtle glow */
    0% {
      filter:
        drop-shadow(0 0 2px  var(--color-neon-faint))
        drop-shadow(0 0 6px  var(--color-neon-faint));
    }
  
    /* 50%: Peak bloom—strong, broad glow */
    50% {
      filter:
        drop-shadow(0 0 20px var(--color-neon-strong))
        drop-shadow(0 0 40px var(--color-neon-strong))
        drop-shadow(0 0 80px var(--color-neon-strong));
    }
  
    /* 100%: Back to a moderate glow (to loop smoothly) */
    100% {
      filter:
        drop-shadow(0 0 4px var(--color-neon-faint))
        drop-shadow(0 0 12px var(--color-neon-faint));
    }
  }
  
  /* Optional: If you also want a quick “color flicker” at peak */
  @keyframes neonColorFlicker {
    0%, 100% {
      color: var(--color-neon);
    }
    50% {
      color: var(--color-neon-strong);
    }
  }
  
  /* To combine both effects, you can add a second animation:
  .hero-content h1 {
    animation:
      neonFilterPulse var(--pulse-duration) ease-in-out infinite,
      neonColorFlicker var(--pulse-duration) ease-in-out infinite;
  }
  */
  

/* ─── Logo Container (more top-left, slightly bigger) ───────────────────── */
.hero-content .logo {
  position: absolute;
  top: 0;                     /* flush with top */
  left: 0;                    /* flush with left */
  width: auto;
  max-width: 160px;           /* slightly larger */
  height: auto;
  margin: 0;                  /* remove default margins */
  background: none;
}

/* ─── Icon Element (glow applied only to icon) ──────────────────────────── */
.hero-content .logo .logo-icon {
  display: block;
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 0 6px rgba(0, 123, 255, 0.6))
    drop-shadow(0 0 12px rgba(0, 123, 255, 0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* ─── Text Element (no glow) ─────────────────────────────────────────────── */
.hero-content .logo .logo-text {
  display: inline-block;
  font-size: 1.1rem;          /* slightly larger for corner layout */
  color: #ffffff;
  margin-top: 0.15rem;
  vertical-align: middle;
}

/* ─── Hover Effect: icon scales + glow intensifies ─────────────────────── */
.hero-content .logo:hover .logo-icon {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 8px rgba(0, 123, 255, 0.7))
    drop-shadow(0 0 16px rgba(0, 123, 255, 0.4));
}

/* ─── Hero Content Elements (centered) ─────────────────────────────────── */
.hero-content h1,
.hero-content p,
.hero-content form {
  z-index: 1;                  /* ensure content sits above background */
}

/* ─── Responsive Adjustments ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-content .logo {
    top: 0.75rem;
    left: 0.75rem;
    max-width: 140px;
  }

  .hero-content .logo .logo-text {
    font-size: 1rem;
  }

  .hero-content h1 {
    font-size: clamp(1.8rem, 6vw + 0.5rem, 2.25rem);
  }

  .hero-content p {
    font-size: clamp(0.9rem, 3vw + 0.2rem, 1.1rem);
    max-width: 500px;
  }
}

@media (max-width: 480px) {
  .hero-content .logo {
    top: 0.5rem;
    left: 0.5rem;
    max-width: 120px;
  }

  .hero-content .logo .logo-text {
    font-size: 0.9rem;
  }

  .hero-content h1 {
    font-size: clamp(1.6rem, 7vw + 0.4rem, 2rem);
    margin: 0 1rem 0.75rem;
  }

  .hero-content p {
    font-size: clamp(0.8rem, 4vw + 0.1rem, 1rem);
    margin: 0 1rem 1rem;
    max-width: 90%;
  }

  .hero-content form {
    width: 100%;
    padding: 0 1rem;
  }
}



/* Theme Variables */
:root {
  --color-primary: #007bff;          /* dark blue primary */
  --color-primary-dark: #0056b3;     /* darker shade for hover */
  --color-text: #000000;             /* base text color */
  --font-heading: 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Helvetica Neue', Arial, sans-serif;
  --radius: 0.5rem;
  --transition-speed: 0.3s;
}

/* Theme Variables */
:root {
  --font-heading: 'Exo 2', sans-serif;
  --font-body: 'Source Sans Pro', sans-serif;

  --color-primary: #007bff;          /* dark blue primary */
  --color-primary-hover: #0056b3;    /* darker shade for hover */
  --color-text: #ffffff;             /* white text for dark background */

  --radius: 0.5rem;
  --transition-speed: 0.3s;
}

/* Base Typography */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Headline */
h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw + 1rem, 2.75rem); /* responsive sizing */
  margin-bottom: 1rem;
  color: var(--color-primary);
  line-height: 1.2;
  text-align: center; /* center for emphasis */
  text-shadow: 0 0 6px rgba(0, 123, 255, 0.4); /* subtle glow behind text */
}

/* Subtext */
p {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; /* center and constrain width */
  text-align: center;
}


/* Improved Form Container */
form {
  display: flex;
  flex-wrap: wrap;                       /* allow stacking on narrow viewports */
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;

  /* Theming */
  background-color: rgba(0, 0, 0, 0.4);  /* semi‐transparent dark backdrop */
  padding: 1rem 1.5rem;                  /* breathing room inside form */
  border-radius: var(--radius);
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* subtle neon glow around form */
  max-width: 600px;                      /* constrain width on large screens */
  margin-left: auto;
  margin-right: auto;                    /* center horizontally */
}

/* Stack inputs/buttons full‐width on small screens */
@media (max-width: 480px) {
  form {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
  }
}

/* Improved Email Input */
input[type='email'] {
  flex: 1 1 260px;                                  /* grow/shrink as needed, basis 260px */
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 2px solid rgba(255, 255, 255, 0.3);       /* subtle light border */
  background-color: rgba(255, 255, 255, 0.05);      /* very dark translucent background */
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  width: 100%;
  max-width: 350px;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
}

/* Placeholder styling */
input[type='email']::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* Focus state */
input[type='email']:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);        /* neon glow on focus */
  background-color: rgba(255, 255, 255, 0.1);        /* slightly lighter on focus */
}


/* ─────────────────────────────────────────────────────────
   Waitlist Message — Enhanced Neon Pop & Pulse
   ───────────────────────────────────────────────────────── */
   #waitlist-msg {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    margin-top: 1.25rem;
    max-width: 90%;
    
    /* frosted “glass” panel */
    background: rgba(5, 5, 30, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    
    /* neon border with pulse animation */
    border: 2px solid var(--color-blue, #0080ff);
    box-shadow: 0 0 16px rgba(0, 128, 255, 0.6);
    animation: neonPulse 2.5s ease-in-out infinite alternate;
    
    /* text */
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-blue, #0080ff);
    
    /* start hidden, small, below */
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  /* kick-off pop-in when state class appears */
  #waitlist-msg.success,
  #waitlist-msg.error {
    animation-name: popBounce, neonPulse;
  }
  
  /* override for errors */
  #waitlist-msg.error {
    border-color: var(--color-red, #ff4d4d);
    box-shadow: 0 0 16px rgba(255, 77, 77, 0.6);
    color: var(--color-red, #ff4d4d);
  }
  
  /* hide when empty */
  #waitlist-msg:empty {
    display: none;
  }
  
  /* ─── Keyframes ─────────────────────────────────────────── */
  
/* ─────────────────────────────────────────────────────────
   Sleek entrance: slide up + fade in
   ───────────────────────────────────────────────────────── */
   @keyframes popInSlick {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* apply it on success/error */
  #waitlist-msg.success,
  #waitlist-msg.error {
    animation-name: popInSlick, neonPulse;
    animation-duration: 0.4s, 2.5s;
    animation-timing-function: ease-out, ease-in-out;
    animation-fill-mode: forwards, both;
    animation-iteration-count: 1, infinite;
  }
  
  
  /* 2) Slow neon pulse on the border */
  @keyframes neonPulse {
    from {
      box-shadow: 0 0 12px rgba(0, 128, 255, 0.4),
                  inset 0 0 8px rgba(0, 128, 255, 0.2);
    }
    to {
      box-shadow: 0 0 20px rgba(0, 128, 255, 0.8),
                  inset 0 0 12px rgba(0, 128, 255, 0.4);
    }
  }
  
  

/* Stack input & button on small screens */
@media (max-width: 480px) {
  #waitlist-form {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* Reuse the neon variables from :root */
:root {
  /* Primary neon blue for button */
  --color-neon:          rgb(0, 102, 255);
  /* Semi-transparent for subtle interior glow (optional) */
  --color-neon-faint:    rgba(17, 0, 255, 0.3);
  /* Strong glow for border pulse */
  --color-neon-strong:   rgba(17, 0, 255, 0.9);
  /* Speed of the full pulse cycle */
  --button-pulse-speed:  2s;
}

/* Base styling for the submit button */
button[type='submit'] {
  position: relative;              /* contain pseudo-elements */
  z-index: 1;                      /* sit above ::before/::after */
  padding: 0.75rem 1.5rem;
  background-color: var(--color-neon);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  overflow: hidden;                /* clip pseudo-elements */
  transition:
    background-color 0.2s ease-in-out,
    transform         0.2s ease-in-out;
  /* no display:block/margin here — centering is handled by #waitlist-form */
}

/* Pseudo-element for the rotating neon border */
button[type='submit']::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;

  background: conic-gradient(
      from 0deg,
      var(--color-neon) 0%,
      transparent 25%,
      var(--color-neon) 50%,
      transparent 75%,
      var(--color-neon) 100%
    );

  z-index: -2;    /* place behind button */
  animation: rotateBorder var(--button-pulse-speed) linear infinite;
  filter: blur(4px);  /* soften the neon glow */
}

/* Pseudo-element to “cover” the button’s interior so only border shows */
button[type='submit']::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: var(--color-neon);
  border-radius: inherit;
  z-index: -1;    /* between ::before and the button’s content */
}

/* Hover state: intensify glow and lift button */
button[type='submit']:hover {
  background-color: rgb(12, 0, 180);
  transform: translateY(-2px);
  box-shadow:
    0 0 8px  var(--color-neon-strong),
    0 0 16px var(--color-neon-strong);
}

/* Active state: depress and hold glow */
button[type='submit']:active {
  background-color: rgb(8, 0  , 120);
  transform: translateY(0);
  box-shadow:
    0 0 4px  var(--color-neon-strong),
    0 0  8px var(--color-neon-strong);
}

/* Focus state: solid neon ring */
button[type='submit']:focus {
  outline: none;
  box-shadow:
    0 0 0 3px var(--color-neon-strong),
    0 0 8px var(--color-neon-strong);
}

/* Keyframes: rotate the conic gradient around the border */
@keyframes rotateBorder {
  to { transform: rotate(360deg); }
}

@keyframes innerButtonGlow {
  0% {
    filter:
      drop-shadow(0 0 2px  var(--color-neon-faint))
      drop-shadow(0 0 6px  var(--color-neon-faint));
  }
  100% {
    filter:
      drop-shadow(0 0 8px var(--color-neon-faint))
      drop-shadow(0 0 16px var(--color-neon-faint));
  }
}





/* Responsive: Tablet and Above */
@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }

  p {
    font-size: 1.1rem;
  }

  input[type='email'] {
    width: 200px;
  }

  .hero-content .logo {
    max-width: 140px;               /* shrink the logo on tablets */
    margin-bottom: 1rem;
    background: none;               /* clear out any background-image or color */
  }
}

/* Responsive: Mobile */
@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }

  p {
    font-size: 1rem;
  }

  form {
    flex-direction: column;
    gap: 0.5rem;
  }

  input[type='email'],
  button[type='submit'] {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }

  .hero-content .logo {
    max-width: 120px;               /* shrink further on phones */
    margin-bottom: 0.75rem;
    background: none;               /* clear out any background-image or color */
  }
}

/* ─── ABOUT SECTION ────────────────────────────────────────────────────────── */
/* 1) Ensure About sits flush under the previous section (no extra top‐padding/margin) */
.section-about {
  width: 100%;
  /* If you have a background‐SVG or image, apply it here. E.g.: */
  /* background: url('path/to/background.svg') no-repeat center/cover; */
  /* No padding‐top or margin‐top, so it “leans in” directly under what came before */
}

/* 2) CONTENT WRAPPER: centers content horizontally and holds vertical padding */
.section-about .content {
  position: relative;
  /* Remove all top padding */
  padding: 0 1rem;
  /* Pull the block up further—using a larger negative top margin */
  margin: -4rem auto 0;       
  max-width: 1200px;          
  display: flex;
  flex-wrap: wrap;  
  align-items: flex-start;     
  justify-content: center;     
  gap: 2rem;                  
}


/* 3) ILLUSTRATION PANEL (if you want an SVG or image here) */
.section-about .about-illustration {
  flex: 0 0 200px;           /* fixed width for the illustration column */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 4) TEXT PANEL: center its children horizontally and vertically */
.section-about .about-text {
  flex: 1;                   
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering within this column */
  align-items: center;       /* horizontal centering of all children */
}

/* ─── HEADING / TYPOGRAPHY ─────────────────────────────────────────────────── */
/* ─── IMPROVED HEADING (h2) ─────────────────────────────────────────────────── */
.section-about h2 {
  font-family: var(--font-heading);
  font-weight: 700;                                      /* stronger emphasis */
  letter-spacing: 0.02em;                                 /* slightly more breathing between letters */
  font-size: clamp(2rem, 4vw + 1rem, 2.5rem);
  margin: 0 auto clamp(0.5rem, 1vw, 1rem);                /* responsive bottom margin, centered block */
  color: var(--color-primary);
  line-height: 1.2;
  text-align: center;                                     /* center multi‐line headings */
  max-width: 90%;                                         /* prevent overly long lines on wide screens */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);               /* subtle depth for better contrast */
  transition: color var(--transition-speed) ease;         /* smooth color changes if you ever animate or on hover */
}

/* Optional: change color on hover (if you ever want a hover effect) */
/*
.section-about h2:hover {
  color: var(--color-primary-hover);
}
*/

/* ─── IMPROVED SUBHEADING / INTRO LINE ──────────────────────────────────────── */
.section-about .subheading {
  font-family: var(--font-body);
  font-weight: 500;                                                  /* slightly bolder for emphasis */
  letter-spacing: 0.01em;                                             /* subtle spacing between letters */
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  color: rgba(255, 255, 255, 0.9);                                     /* increase opacity for better readability */
  margin: 0 auto clamp(0.75rem, 1vw, 1rem);                            /* responsive bottom margin, centered block */
  line-height: 1.5;                                                   /* a bit more breathing room between lines */
  text-align: center;                                                 /* center the intro line */
  max-width: 85%;                                                     /* constrain width for readability */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);                           /* subtle depth for contrast */
  transition: color var(--transition-speed) ease;                      /* smooth color changes if animated */
}

.section-about .subheading {
  position: relative;
}
.section-about .subheading::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--color-primary);
  margin: 0.5rem auto 0;
  border-radius: 1px;
}



/* ─── IMPROVED PARAGRAPHS ───────────────────────────────────────────────────── */
.section-about .about-paragraphs p {
  font-family: var(--font-body);
  font-weight: 400;                                             /* maintain good readability */
  letter-spacing: 0.015em;                                       /* subtle letter spacing */
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
  line-height: 1.6;                                              /* comfortable line height */
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto clamp(1rem, 1.5vw, 1.5rem);                     /* centered with responsive bottom margin */
  text-align: center;                                            /* center paragraph text */
  max-width: 700px;                                              /* constrain width for readability */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);                      /* subtle depth for better contrast */
  transition: color var(--transition-speed) ease;                /* smooth color transition if needed */
}

/* Optional: adjust the last paragraph’s bottom margin to zero */
.section-about .about-paragraphs p:last-child {
  margin-bottom: 0;
}

/* ─── THREE‐STEP CONTAINER ───────────────────────────────────────────────────── */
.section-about .three-steps {
  display: flex;
  justify-content: center;     /* center all steps inside the parent */
  gap: 2rem;                    /* space between each step box */
  flex-wrap: wrap;              /* wrap on smaller viewports */
  margin: 2rem 0;               /* vertical spacing above/below this block */
}

/* Individual step box */
.section-about .three-steps .step {
  background-color: rgba(255, 255, 255, 0.05); /* subtle translucent background */
  border: 2px solid #002aff;   /* neon electric blue border */
  border-radius: var(--radius);
  padding: 1.5rem;
  flex: 1 1 220px;             /* allow each step to shrink/grow, min width ≈220px */
  max-width: 300px;            /* don’t let it get too wide on large screens */
  text-align: center;          /* center all text inside each step */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform var(--transition-speed) ease,
              box-shadow var(--transition-speed) ease,
              border-color var(--transition-speed) ease;
}

.section-about .three-steps .step:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    0 0 8px #00a2ff;          /* neon glow */
  border-color: #2391ff;       /* brighter electric blue on hover */
}

/* Step number circle */
.section-about .three-steps .step-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  background-color: var(--color-primary);
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 50%;
  margin: 0 auto 1rem;         /* center circle, with bottom spacing */
}

/* Step title */
.section-about .three-steps .step-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem);
  margin: 0 0 0.5rem;
  color: var(--color-primary);
}

/* Step description */
.section-about .three-steps .step-desc {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw + 0.4rem, 1rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin: 0;
}


/* ─── RESPONSIVE TWEAKS ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-about .three-steps {
    gap: 1.5rem;
    margin: 1.5rem 0;
  }
  .section-about .three-steps .step {
    padding: 1.25rem;
  }
  .section-about .three-steps .step-number {
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    font-size: 1.25rem;
  }
  .section-about .three-steps .step-title {
    font-size: clamp(1.1rem, 2.5vw + 0.8rem, 1.3rem);
  }
  .section-about .three-steps .step-desc {
    font-size: clamp(0.85rem, 1.1vw + 0.3rem, 0.95rem);
  }
}

@media (max-width: 480px) {
  .section-about .three-steps {
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
  }
  .section-about .three-steps .step {
    max-width: 100%;
    width: 90%;
    padding: 1rem;
  }
  .section-about .three-steps .step-number {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.1rem;
  }
  .section-about .three-steps .step-title {
    font-size: clamp(1rem, 3.5vw + 0.6rem, 1.2rem);
  }
  .section-about .three-steps .step-desc {
    font-size: clamp(0.8rem, 3vw + 0.2rem, 0.9rem);
  }
}


/* ─── RESPONSIVE ADJUSTMENTS ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stack columns vertically and reduce vertical padding */
  .section-about .content {
    flex-direction: column;
    padding: 2rem 1rem;      /* slightly less on medium screens */
  }

  .section-about .about-illustration {
    flex: 0 0 180px;         /* shrink illustration width */
    margin: 0 auto 1.5rem;   /* center + bottom margin */
  }

  .section-about h2 {
    font-size: clamp(1.75rem, 5vw + 1rem, 2.25rem);
    margin-bottom: 0.5rem;
  }

  .section-about .subheading {
    font-size: clamp(0.95rem, 2vw + 0.5rem, 1.1rem);
    margin-bottom: 1rem;
  }

  .section-about .about-paragraphs p,
  .section-about .about-benefits li {
    font-size: clamp(0.9rem, 1.25vw + 0.5rem, 1rem);
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;   /* slightly less indent for bullets */
    text-align: center;      /* center text on medium screens */
  }

  .section-about .about-benefits li::before {
    font-size: 1rem;
  }

  .section-about .about-cta .btn {
    width: 100%;
    max-width: 300px;        /* optional max width so it doesn’t stretch too wide */
  }
}

@media (max-width: 480px) {
  .section-about .content {
    padding: 1.5rem 0.75rem;  /* tighter on very small screens */
  }

  .section-about .about-illustration {
    flex: 0 0 140px;
    margin-bottom: 1rem;
  }

  .section-about h2 {
    font-size: clamp(1.6rem, 7vw + 0.4rem, 2rem);
    margin-bottom: 0.5rem;
  }

  .section-about .subheading {
    font-size: clamp(0.8rem, 4vw + 0.2rem, 1rem);
    margin-bottom: 0.75rem;
  }

  .section-about .about-paragraphs p,
  .section-about .about-benefits li {
    font-size: clamp(0.8rem, 4vw + 0.2rem, 0.9rem);
    margin-bottom: 0.6rem;
    padding-left: 1rem;      /* minimal indent on tiny screens */
    text-align: center;
  }

  .section-about .about-benefits li::before {
    font-size: 0.9rem;
  }

  .section-about .about-cta .btn {
    width: 100%;             /* full‐width CTA on smallest screens */
    text-align: center;
  }
}

/* ─── SUPPORT SECTION (AI Automated Support) ─────────────────────────────────── */
/* 1) Ensure the section sits flush under the previous block */
.section-support {
  width: 100%;
  /* If you want a distinct background, e.g.: */
  /* background-color: var(--color-bg-secondary); */
}

/* 2) CONTENT WRAPPER: centers content and sets up flex columns */
.section-support .content {
  padding: 2rem 1rem;        /* vertical and horizontal padding */
  max-width: 1200px;         /* constrain total width */
  margin: 0 auto;            /* center horizontally */
  display: flex;
  flex-wrap: wrap;
  align-items: center;       /* vertically center illustration & text */
  justify-content: center;   /* horizontally center columns */
  gap: 2rem;                 /* space between illustration and text */
}

/* 3) ILLUSTRATION PANEL: icon or SVG placeholder */
.section-support .support-illustration {
  flex: 0 0 180px;           /* fixed width for illustration */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* If using an <img> or <svg> inside, constrain its size */
.section-support .support-illustration img,
.section-support .support-illustration svg {
  width: 100%;
  max-width: 120px;
  height: auto;
}

/* 4) TEXT PANEL: center and style heading, subheading, paragraphs, CTA */
.section-support .support-text {
  flex: 1;                   
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  text-align: center;        /* center all text */
  max-width: 700px;          /* constrain width for readability */
  padding: 1rem;             /* breathing room */
}

/* Heading (h2) */
.section-support .support-text h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw + 1rem, 2.5rem);
  margin: 0 0 0.5rem;        /* 0.5rem below */
  color: var(--color-primary);
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ─── IMPROVED SUBHEADING (support section) ───────────────────────────────── */
.section-support .support-text .subheading {
  font-family: var(--font-body);
  font-weight: 500;                                                /* slightly bolder for emphasis */
  letter-spacing: 0.01em;                                           /* subtle letter spacing */
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  color: rgba(255, 255, 255, 0.9);                                   /* high contrast for readability */
  margin: 0 auto clamp(0.75rem, 1vw, 1rem);                          /* centered block with responsive bottom margin */
  line-height: 1.5;                                                 /* a bit more breathing room between lines */
  text-align: center;                                               /* center the intro line */
  max-width: 85%;                                                   /* constrain width for improved readability */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);                         /* subtle depth for contrast */
  transition: color var(--transition-speed) ease;                    /* smooth color transition if animated */
}

.section-support .support-text .subheading {
  position: relative;
}
.section-support .support-text .subheading::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--color-primary);
  margin: 0.5rem auto 0;
  border-radius: 1px;
}



/* Description paragraphs */
.section-support .support-text .support-descriptions p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto clamp(1rem, 1.5vw, 1.5rem); /* responsive bottom margin */
  max-width: 600px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Call-to-action wrapper */
.section-support .support-text .support-cta {
  width: 100%;
  display: flex;
  justify-content: center;   /* center the CTA button */
  margin-top: 1rem;
}

/* ─── IMPROVED CTA BUTTON (support section) ───────────────────────────────────── */
.section-support .support-text .support-cta .btn {
  display: inline-block;
  padding: 0.75rem 2rem;                               /* a bit wider for balance */
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;                                     /* slightly bolder */
  font-size: clamp(0.95rem, 1.2vw + 0.5rem, 1rem);       /* responsive sizing */
  letter-spacing: 0.02em;                               /* subtle spacing */
  text-transform: uppercase;                            /* consistent CTA style */
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  
  /* subtle default shadow for depth */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: 
    background-color var(--transition-speed) ease, 
    box-shadow var(--transition-speed) ease, 
    transform var(--transition-speed) ease;
}

/* Hover & focus states */
.section-support .support-text .support-cta .btn:hover,
.section-support .support-text .support-cta .btn:focus {
  background-color: var(--color-primary-hover);
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.5);
  transform: translateY(-2px);                         /* slight lift */
  outline: none;
}

/* Accessible focus-visible ring */
.section-support .support-text .support-cta .btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}


/* ─── RESPONSIVE TWEAKS ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-support .content {
    flex-direction: column;   /* stack illustration above text on medium screens */
    padding: 1.5rem 1rem;
  }

  .section-support .support-illustration {
    flex: 0 0 150px;          /* shrink illustration width */
    margin-bottom: 1rem;
  }

  .section-support .support-text h2 {
    font-size: clamp(1.75rem, 5vw + 1rem, 2.25rem);
  }

  .section-support .support-text .subheading {
    font-size: clamp(0.95rem, 2vw + 0.5rem, 1.1rem);
    margin-bottom: 0.75rem;
  }

  .section-support .support-text .support-descriptions p {
    font-size: clamp(0.9rem, 1.25vw + 0.5rem, 1rem);
    margin-bottom: 1rem;
    max-width: 100%;
  }

  .section-support .support-text .support-cta .btn {
    width: 100%;
    max-width: 300px;         /* optional cap to prevent overly wide buttons */
  }
}

@media (max-width: 480px) {
  .section-support .content {
    padding: 1rem 0.75rem;
  }

  .section-support .support-illustration {
    flex: 0 0 120px;
    margin-bottom: 0.75rem;
  }

  .section-support .support-text h2 {
    font-size: clamp(1.6rem, 7vw + 0.4rem, 2rem);
    margin-bottom: 0.5rem;
  }

  .section-support .support-text .subheading {
    font-size: clamp(0.8rem, 4vw + 0.2rem, 1rem);
    margin-bottom: 0.5rem;
  }

  .section-support .support-text .support-descriptions p {
    font-size: clamp(0.8rem, 4vw + 0.2rem, 0.9rem);
    margin-bottom: 0.75rem;
  }

  .section-support .support-text .support-cta .btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   1) Base state: hidden, moved down, and slightly scaled down
   ========================================================================== */
   .animate-on-scroll {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    will-change: opacity, transform;
  }
  
  /* ==========================================================================
     2) When “visible” gets added, we run a keyframed animation
     ========================================================================== */
  .animate-on-scroll.visible {
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  /* ==========================================================================
     3) Define the keyframes: start below & small → overshoot slightly → settle
     ========================================================================== */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.95);
    }
    75% {
      /* Slight overshoot: a bit above the final position and a hair bigger */
      opacity: 0.8;
      transform: translateY(-10px) scale(1.02);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* ==========================================================================
     4) Optional: delay utilities using animation-delay instead of transition-delay
     ========================================================================== */
  .delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
  .delay-300 { animation-delay: 0.3s; }
  

/* ─── LOGO GLOW ────────────────────────────────────────────────────────────── */
.logo,
.site-logo img {
  /* initial subtle glow */
  filter: drop-shadow(0 0 6px #00a6ff)
          drop-shadow(0 0 12px #00a6ff);
  transition: filter var(--transition-speed) ease;
}

/* stronger glow on hover */
@media (hover: hover) {
  .logo:hover,
  .site-logo img:hover {
    filter: drop-shadow(0 0 12px #0037ff)
            drop-shadow(0 0 24px #0037ff)
            drop-shadow(0 0 36px #0037ff);
  }
}

/* continuous pulsing glow */
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 6px #00FFFF)
            drop-shadow(0 0 12px #00FFFF);
  }
  50% {
    filter: drop-shadow(0 0 12px #00FFFF)
            drop-shadow(0 0 24px #00FFFF)
            drop-shadow(0 0 36px #00FFFF);
  }
}

/* apply the pulsing glow by adding .glow class */
.logo.glow,
.site-logo img.glow {
  animation: pulse-glow 2.5s infinite ease-in-out;
}

/* ─────────────────────────────────────────────────────────
   SECTION: FLOWMART FOR SELLERS (DARKER BLUE THEME) – REFINED
   ───────────────────────────────────────────────────────── */
   :root {
    --electric-blue:        #0066cc;
    --electric-blue-light:  #3388ff;
    --section-bg:           rgba(10, 15, 30, 0.9);
    --card-bg:              rgba(255, 255, 255, 0.04);
    --card-border:          rgba(0, 102, 204, 0.2);
  }
  
  /* Container */
  .section-sellers-info {
    padding: 4rem 1rem;
    background:transparent;
  }
  
  /* Heading */
  .section-sellers-info h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--electric-blue);
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  /* Subheading */
  .section-sellers-info .subheading {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: rgba(255,255,255,0.8);
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  /* Features grid */
  .section-sellers-info .seller-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  
  /* Feature card */
  .section-sellers-info .feature {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: 
      transform var(--transition-speed) ease,
      border-color var(--transition-speed) ease,
      background var(--transition-speed) ease;
  }
  
  @media (hover: hover) {
    .section-sellers-info .feature:hover {
      transform: translateY(-4px);
      border-color: var(--electric-blue-light);
      background: rgba(255,255,255,0.06);
    }
  }
  
  /* Feature icon */
  .section-sellers-info .feature-icon {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    color: var(--electric-blue-light);
  }
  
  /* Feature title */
  .section-sellers-info .feature-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--electric-blue);
    margin-bottom: 0.5rem;
  }
  
  /* Feature description */
  .section-sellers-info .feature-desc {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
  }
  
  /* CTA button wrapper */
  .section-sellers-info .sellers-info-cta {
    text-align: center;
  }
  
  /* CTA button */
  .section-sellers-info .sellers-info-cta .cta.btn {
    display: inline-block;
    background-color: var(--electric-blue);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    text-transform: uppercase;
    transition: 
      background-color var(--transition-speed) ease,
      transform var(--transition-speed) ease,
      border-color var(--transition-speed) ease;
  }
  
  @media (hover: hover) {
    .section-sellers-info .sellers-info-cta .cta.btn:hover {
      background-color: var(--electric-blue-light);
      border-color: var(--electric-blue);
      transform: translateY(-2px);
    }
  }
  
  .section-sellers-info .cta.btn:focus-visible {
    outline: 2px dashed var(--electric-blue-light);
    outline-offset: 4px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .section-sellers-info .feature,
    .section-sellers-info .cta.btn {
      transition: none;
    }
  }