/* Mobile-first responsive design */
:root{
  --brand:#22d3ee; /* cyan-400 */
  --brand-dark:#0891b2; /* cyan-700 */
}

/* Universal box model and overflow prevention */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}

body{
  overflow-x:hidden; 
  width:100%;
  max-width:100vw;
  min-height:100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Completely hide all scrollbars */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Hide scrollbars on all elements */
* {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

*::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari/Opera */
}

/* Force all elements to respect viewport width */
*{
  max-width:100vw;
}

/* Container constraints */
.mx-auto, .max-w-7xl, .max-w-none{
  max-width:100vw;
  overflow-x:hidden;
}

/* Section and layout safety */
section, div, header, footer, main, article{
  max-width:100vw;
  overflow-x:hidden;
}

/* Media constraints */
img,svg,video{
  max-width:100%; 
  height:auto;
  display:block;
}

/* Hero gradient with overflow protection */
.hero-gradient{
  background: radial-gradient(1000px 600px at 10% 10%, rgba(34,211,238,.2), transparent 60%),
              radial-gradient(800px 500px at 90% 20%, rgba(59,130,246,.15), transparent 60%),
              linear-gradient(180deg, #050816 0%, #0b1220 100%);
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}

/* Glass effect */
.glass{
  background: rgba(15,23,42,.5); 
  border:1px solid rgba(255,255,255,.08);
  max-width:100%;
}

.backdrop-blur-8{backdrop-filter: blur(8px)}
.section{padding-top:5rem;padding-bottom:5rem;max-width:100vw;overflow-x:hidden;}
.neon{box-shadow: 0 0 25px rgba(34,211,238,.35);}

/* Marquee with proper constraints */
.marquee{
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  width:100%;
  max-width:100vw;
}
.marquee-track{
  display:flex;
  align-items:center;
  gap:2rem;
  will-change:transform;
  animation:scroll 45s linear infinite;
  width:max-content;
}
.marquee:hover .marquee-track{animation-play-state: paused}
.marquee img{
  height:2rem;
  width:auto;
  opacity:.9;
  transition:opacity .2s;
  flex-shrink:0;
}
@media (min-width:640px){.marquee img{height:2.5rem}}
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.wave-underline{background-image: linear-gradient(90deg, var(--brand), var(--brand-dark)); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%;}
.card-hover{transition: transform .4s ease, box-shadow .4s ease}
.card-hover:hover{transform:translateY(-6px); box-shadow:0 10px 30px rgba(2,8,23,.35)}

/* Mobile-specific overrides */
@media (max-width: 640px) {
  /* Force strict viewport constraints on mobile */
  html, body {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Ensure all containers respect mobile width */
  .mx-auto, .max-w-7xl, .max-w-none {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Header mobile fixes */
  header {
    width: 100%;
    max-width: 100vw;
  }
  
  /* Typography adjustments */
  h1 {
    font-size: 2.25rem;
    line-height: 1.2;
  }
  
  /* Grid and flex adjustments */
  .grid {
    gap: 1rem;
  }
  
  /* Ensure buttons don't overflow */
  .flex {
    flex-wrap: wrap;
  }
  
  /* Force no scrollbars on mobile */
  html, body, * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Calendly popup overrides (improve contrast and layout) */
.calendly-overlay{inset:0 !important; background: rgba(2,8,23,.85) !important; backdrop-filter: blur(2px);}
.calendly-overlay, .calendly-popup, .calendly-inline-widget, .calendly-badge-widget{max-width:none !important;}
.calendly-popup{box-shadow:0 20px 60px rgba(0,0,0,.6) !important; border-radius:16px !important;}
.calendly-popup iframe{border-radius:16px !important;}
.calendly-overlay .calendly-close{position:fixed !important; top:12px !important; right:12px !important; width:40px !important; height:40px !important; background:rgba(15,23,42,.95) !important; color:#e2e8f0 !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; opacity:1 !important;}
.calendly-overlay .calendly-close:before{content:'✕'; font-size:18px; line-height:1;}

body.no-scroll{overflow:hidden !important;}