/* css/home.css */
:root{
  --bg: #0b1020;
  --bg-elev: #0e1429;
  --card: #121939;
  --text: #e7e9f3;
  --muted: #b9bfd3;
  --brand: #6aa8ff;
  --brand-2: #9b6dff;
  --ok: #2fd37a;
  --ring: rgba(106,168,255,.35);
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 25px 60px rgba(31,45,92,.45);
  --container: 1200px;
}
@media (prefers-color-scheme: light){
  :root{--bg:#f7f8fc;--bg-elev:#fff;--card:#ffffff;--text:#151827;--muted:#4a5368;--ring:rgba(102,127,255,.25)}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text);background:radial-gradient(1200px 600px at 80% -10%, rgba(155,109,255,.25),transparent),radial-gradient(900px 500px at -10% 10%, rgba(106,168,255,.25),transparent),var(--bg);}

/* Generic layout */
.container{max-width:var(--container);margin-inline:auto;padding:clamp(16px,2vw,24px)}
.section{padding-block:clamp(48px,6vw,96px)}
.section-header{max-width:860px;margin:0 auto 32px auto;text-align:center}
.section-header .eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;font-size:0.75rem;opacity:0.9}
.section-header h2{font-size:clamp(28px,3.2vw,40px);margin:.25rem 0 .5rem 0;line-height:1.2}
.section-lead{color:var(--muted);font-size:clamp(16px,2vw,18px)}

/* Hero */
.hero-section{position:relative;overflow:hidden;padding-block:clamp(72px,10vw,140px)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:clamp(24px,4vw,48px)}
.hero-text{z-index:2}
.hero-title{font-weight:800;line-height:1.05;font-size:clamp(36px,6vw,64px)}
.hero-title .brand{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{color:var(--muted);font-size:clamp(16px,2.2vw,20px);margin-top:12px}
.hero-cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.hero-visual{position:relative;min-height:240px}
.orb{position:absolute;border-radius:50%;filter:blur(14px);opacity:.7}
.orb-1{width:180px;height:180px;background:radial-gradient(circle at 50% 50%,var(--brand),transparent 60%);top:10%;left:10%;animation:float 9s ease-in-out infinite}
.orb-2{width:260px;height:260px;background:radial-gradient(circle at 70% 70%,var(--brand-2),transparent 60%);bottom:5%;right:0;animation:float 11s ease-in-out infinite reverse}
.orb-3{width:140px;height:140px;background:radial-gradient(circle at 90% 90%,#00ffd0,transparent 60%);bottom:35%;left:40%;animation:float 13s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Buttons */
.btn{appearance:none;border:0;border-radius:999px;padding:12px 18px;font-weight:600;line-height:1;cursor:pointer;transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:white;box-shadow:0 10px 24px var(--ring)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.15)}
.btn.icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--bg-elev);box-shadow:var(--shadow-1)}

/* Features */
.features-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.feature-card{grid-column:span 12;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);backdrop-filter:saturate(140%) blur(6px);border-radius:var(--radius-2xl);padding:22px;box-shadow:var(--shadow-1);transform:translateY(16px);opacity:0}
.feature-icon-wrap{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(106,168,255,.25),rgba(155,109,255,.2))}
.feature-icon{font-size:24px}
.feature-title{margin:.6rem 0 .25rem 0;font-size:18px;color:var(--text)}
.feature-desc{color:var(--muted)}
@media (min-width:640px){.feature-card{grid-column:span 6}}
@media (min-width:768px){.feature-card{grid-column:span 4}}

/* Steps */
.steps-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;counter-reset:step}
.step-card{grid-column:span 12;background:var(--bg-elev);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);padding:18px 18px 18px 56px;position:relative;box-shadow:var(--shadow-1);transform:translateY(16px);opacity:0}
.step-number{position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:white;font-weight:700}
.step-text{color:var(--muted)}
@media (min-width:768px){.step-card{grid-column:span 6}}
@media (min-width:1024px){.step-card{grid-column:span 4}}

/* Reasons */
.reasons-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.reason-card{grid-column:span 12;display:flex;gap:10px;align-items:flex-start;background:var(--bg-elev);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-1);transform:translateY(16px);opacity:0}
.reason-card i{color:var(--ok);margin-top:2px;font-size:1.2rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
@media (min-width:768px){.reason-card{grid-column:span 6}}
@media (min-width:1024px){.reason-card{grid-column:span 4}}

/* Start steps */
.start-steps{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.start-step{grid-column:span 12;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-1);transform:translateY(16px);opacity:0}
@media (min-width:768px){.start-step{grid-column:span 6}}
@media (min-width:1024px){.start-step{grid-column:span 4}}

/* Testimonials */
.testimonial-viewport{position:relative}
.testimonial-track{display:grid;gap:clamp(16px,3vw,24px);margin-bottom:5rem}
.testimonial-card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-2xl);padding:22px;box-shadow:var(--shadow-2)}
.testimonial-card blockquote p{font-size:clamp(16px,2vw,18px);color:var(--text)}
.testimonial-card figcaption{margin-top:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.carousel-controls{display:flex;gap:8px;position:relative;margin-top:3rem}

/* Mobile carousel (scroll-snap) */
@media (max-width:799px){
  .testimonial-viewport{overflow:auto;scroll-snap-type:x mandatory}
  .testimonial-track{display:flex;gap:12px}
  .testimonial-card{min-width:85%;scroll-snap-align:center}
}

/* CTA */
.cta-section{background:radial-gradient(600px 300px at 20% -10%, rgba(106,168,255,.25),transparent),radial-gradient(600px 300px at 90% 10%, rgba(155,109,255,.25),transparent)}
.cta-section .text-center{text-align:center}
.cta-section h2{font-size:clamp(24px,3vw,36px)}

/* Reveal on scroll */
.reveal-grid > *{will-change:transform,opacity}
.reveal-in{transform:none !important;opacity:1 !important;transition:transform .5s ease, opacity .5s ease}

/* Utility */
.text-center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto}
/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Main banner section with full height and no extra spacing or padding that causes scrollbars */
#banner {
  min-height: 100vh;
  position: relative;
  width: 100%;
}

/* Video container - hidden on mobile, shown only above md breakpoint */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2; /* Behind content but still visible as background */
}

/* Updated glass card container - now at top of page for all devices */
.glass-card-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* Changed from max-width to full viewport width */
  min-height: 25vh !important; /* Fixed height for mobile devices */
  z-index: 10;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  align-items: center; /* Changed from flex-start to center for better mobile alignment */
  justify-content: center;
}

/* Base: ensure the banner forms a stacking/positioning context */
#banner {
  position: relative;        /* critical for absolute video positioning */
  overflow: hidden;          /* keeps bg video clipped to banner */
}

/* Background video layer (desktop defaults) */
#banner .video-container {
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  z-index: 0;                /* below content, above banner bg */
  display: none;             /* opt-in per banner state below */
  pointer-events: none;      /* don’t block taps/scroll */
  object-fit: cover;         /* if the video element itself gets this */
}

/* Opt-in display unless .no-video-bg present */
#banner:not(.no-video-bg) .video-container {
  display: block;
}

/* Content layer */
#banner .glass-card-container {
  position: relative;        /* new stacking context for the card */
  z-index: 1;                /* above the video */
  display: flex;             /* keep your current layout expectations */
  align-items: center;
  min-height: 100%;          /* pairs with absolute video height */
}

/* The card itself */
#banner .glass-card {
  position: relative;
  z-index: 2;                /* ensure it’s always on top of the video */
  max-width: 860px;          /* arbitrary default, adjust as needed */
  width: 100%;
}

/* ---------- Mobile stacking / sizing tweaks ---------- */
@media (max-width: 639.98px) {
  /* Stack video and glass card on small screens */
  #banner .glass-card-container {
    min-height: 100vh !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
    align-items: flex-start;         /* prevent overflow cropping */
    z-index: 1;                      /* above video */
  }

  #banner .video-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;                   /* cover viewport height */
    z-index: 0;                      /* avoid negative z-index pitfalls */
    display: block !important;       /* ensure visible when banner allows */
  }

  /* Only hide if .no-video-bg explicitly set on banner */
  #banner.no-video-bg .video-container {
    display: none !important;
  }

  /* Ensure glass card is always visible and properly aligned */
  #banner .glass-card {
    max-width: 95%;
    margin-top: 1rem;                /* top spacing on small screens */
    width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
  }

  #banner {
    min-height: auto;                /* let content drive height */
  }
}


/* Responsive adjustments for tablets and desktops */
@media (min-width: 641px) {
  .glass-card-container {
    padding-top: clamp(2rem, 3vw, 3rem);
    padding-bottom: clamp(2rem, 3vw, 3rem);
  }
  
  /* For larger screens with video background */
  #banner:not(.no-video-bg) .video-container{
    display:block;
  }

  .glass-card {
    max-width: min(90vw, 46rem); 
  }
}

/* Ensure glass card is always visible and properly aligned at top for all devices */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border-radius: 0.75rem;
  color: var(--text); /* Fixed text color */
  width: 100%;
  max-width: min(90vw, 46rem); /* Limit maximum width */
  margin: 0 auto; 
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

/* Button styles */
.btn-primary {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  margin-top: 1rem;
  border-radius: 99px;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s;
}

.btn-primary:hover::after {
  left: 100%;
}

/* Scroll down button */
#scroll-down{
  display:flex;
  align-items:center;
  justify-content:center;
}