/* ───────── VARIABLES & RESET ───────── */
:root{
  --font-sans:'Inter',sans-serif;
  --font-serif:'Playfair Display',serif;
  --clr-black:#000;
  --clr-text:#fff;
  --clr-primary:#7928CA;
  --clr-hover:#0961F3;
  --clr-highlight:#F5F0A1;
  --max-width:1200px;
}
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-sans);
  background:var(--clr-black);
  color:var(--clr-text);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  z-index:1;
}
/* subtle grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAI0lEQVQYlWP8//8/AzXg38GBgYmBlZ2BgYGJgZmBgYGNDAwMDAAEQxAQAj2YIx37RgZgAAAABJRU5ErkJggg==") repeat;
  opacity:.15;z-index:2;
}
/* fixed decorative wave */
body.index::after{
  content:"";position:fixed;bottom:0;left:0;width:100vw;height:100vh;
  background:url('./assets/main-bottom.png') no-repeat bottom center;
  background-size:contain;z-index:-1;
}

/* ───────── BOTTOM MASK UTILITY ───────── */
.mask-bottom{position:relative;}
.mask-bottom::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:16vh;                 /* small overlay */
  background:#000;
  z-index:0;                   /* under section content */
  pointer-events:none;
}

/* ───────── NAV ───────── */
.nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  z-index:10;
  transition:background .3s;
}
.nav.scrolled{background:rgba(0,0,0,.85);}
.nav img{height:32px;}
.mobile-menu-btn{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:3px;}
.mobile-menu-btn span{display:block;width:24px;height:2px;background:#fff;}
.nav-links a{margin:0 .75rem;color:var(--clr-text);text-decoration:none;font-weight:600;}
.btn{
  padding:.6rem 1.4rem;border-radius:35px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:background .3s;
}
.btn-primary{background:var(--clr-primary);border:2px solid var(--clr-primary);color:#fff;}
.btn-primary:hover{background:var(--clr-hover);}
.btn--solutions{background:transparent;border:2px solid #fff;color:#fff;}
.btn--solutions:hover{background:rgba(255,255,255,.1);}
.btn-outline{background:transparent;border:2px solid var(--clr-primary);color:#fff;}
.btn-outline:hover{background:var(--clr-primary);}

/* ───────── HERO ───────── */
.hero{position:relative;min-height:100vh;overflow:hidden;}
.parallax-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background-size:cover;background-position:center;
  background-repeat:no-repeat;will-change:transform;transition:none;z-index:0;
}
.hero-parallax{background:url('./assets/hero-bg.png') center/cover no-repeat;}
.hero-content{
  position:relative;z-index:2;
  max-width:var(--max-width);margin:0 auto;
  padding:9rem 2rem 6rem;text-align:center;
}
.hero__title{
  font-weight:600;font-size:clamp(3rem,7vw,6rem);
  line-height:1.1;margin-bottom:1rem;color:#fff;
}
.second-line{display:block;}
.highlight-tech{font-family:var(--font-serif);font-style:italic;}
.hero-text-wrapper{
  display:inline-block;text-align:left;
  max-width:600px;width:80vw;
  transform:translateX(-10vw);
  margin-top:3rem;
}
.hero__copy{font-size:1.15em;margin-bottom:1.5rem;}

/* hero features */
.hero-features{display:flex;justify-content:center;gap:10rem;margin-top:12rem;}
.feature{display:flex;align-items:center;transition:transform .3s,box-shadow .3s;}
.feature:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(9,97,243,.2);}
.feature__icon{margin-right:.5rem;}
.sphere-icon{width:9rem;height:9rem;background:url('./assets/sphere-icon.gif') center/contain no-repeat;}

/* gradient helper */
.gradient-text{
  background:linear-gradient(90deg,#4B0082 0%,#FFFFFF 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.big-help-title{font-size:clamp(2.5rem,6vw,4rem);font-weight:600;}

/* ───────── BENEFITS ───────── */
.benefits{padding:6rem 2rem 4rem;text-align:center;}
.benefits__title{font-weight:600;font-size:clamp(2.5rem,6vw,4rem);margin-bottom:1rem;}
.benefits__subtitle{font-size:1.15rem;max-width:800px;margin:0 auto 3rem;line-height:1.4;}
.cardgrid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:var(--max-width);margin:0 auto 2.5rem;
}
.card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:2.5rem;
  backdrop-filter:blur(8px);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--clr-hover);
  box-shadow:0 15px 40px rgba(9,97,243,.4),0 8px 20px rgba(9,97,243,.2);
}

/* counters */
.counters{display:flex;justify-content:center;gap:4rem;margin:2rem 0;}
.counter-item{text-align:center;white-space:nowrap;}
.counter,.counter-suffix{
  font-size:2.5rem;font-weight:700;
  animation:glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow{
  from{ text-shadow:0 0 4px rgba(245,240,161,.4);}
  to  { text-shadow:0 0 12px rgba(245,240,161,.8);}
}

/* ───────── EARLY ACCESS FORM ───────── */
.how{padding:6rem 2rem;text-align:center;max-width:var(--max-width);margin:0 auto;}
.access-form{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  border-radius:16px;
  padding:2.5rem;
  max-width:450px;
  margin:2rem auto 0;
  display:flex;flex-direction:column;gap:1rem;
}
.access-form input,.access-form select{
  padding:.85rem 1rem;border:none;border-radius:12px;background:#111;color:#fff;
}

/* ───────── SOLUTIONS HERO ───────── */
.solutions-bg{
  padding:8rem 2rem;
  width:100vw;margin-left:50%;transform:translateX(-50%);
  position:relative;overflow:hidden;background:#000;
}
.solutions-parallax{background:url('./assets/solutions-01.png') bottom/cover no-repeat;}
.solutions-hero{position:relative;z-index:1;text-align:center;margin-bottom:3rem;}
.solutions-hero h1{font-size:clamp(3rem,8vw,6rem);}
.solutions-bg .container{position:relative;z-index:1;}

.container{max-width:1200px;margin:0 auto;}
.solutions-block{
  display:flex;align-items:flex-start;
  width:50%;margin:2rem 0;
}
.solutions-block.left{margin-right:auto;text-align:left;}
.solutions-block.right{margin-left:auto;text-align:right;justify-content:flex-end;}
.solutions-block .number{
  font-size:clamp(3rem,8vw,6rem);
  font-weight:600;
  text-shadow:0 0 8px rgba(255,255,255,.8);
  margin-right:.5rem;
}
.solutions-block .text{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.9);}

/* ───────── HELP SPLIT ───────── */
.solutions-more{
  display:flex;
  width:100vw;margin-left:50%;
  transform:translateX(-50%);
}
.solutions-more .more-image{flex:1 1 50%;}
.solutions-more .more-image img{width:100%;height:auto;display:block;object-fit:cover;}
.solutions-more .more-text{
  flex:1 1 50%;
  background:#000;
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-end;
  padding:4rem 2rem;
  text-align:right;
}
.solutions-more .tagline{font-weight:600;font-style:italic;margin:1rem 0 .5rem;}

/* ───────── PRICING ───────── */
.pricing-section{padding:8rem 2rem;text-align:center;}
.section-title{font-weight:600;font-size:clamp(2.5rem,6vw,4rem);margin-bottom:.75rem;}
.section-subtitle{font-size:1.1rem;max-width:700px;margin:0 auto 3rem;color:rgba(255,255,255,.8);}
.pricing-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:var(--max-width);margin:0 auto;
}
.price-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:2rem 2rem 3rem;
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.price-card:hover{
  transform:translateY(-6px);border-color:var(--clr-hover);
  box-shadow:0 12px 35px rgba(9,97,243,.4);
}
.price-name{font-weight:600;font-size:1.4rem;margin-bottom:.25rem;}
.price-amount{font-size:3rem;font-weight:700;}
.price-period{font-size:.9rem;color:rgba(255,255,255,.6);margin-bottom:1.25rem;}
.price-features{
  list-style:none;margin:1rem 0 2rem;padding:0;
  text-align:left;font-size:.95rem;line-height:1.6;
}
.price-features li{margin:.25rem 0;position:relative;padding-left:1.2rem;}
.price-features li::before{
  content:"✓";position:absolute;left:0;color:var(--clr-highlight);
}
.price-card .btn{margin-top:auto;}
.featured{border-color:var(--clr-primary);}
.price-tag{
  background:var(--clr-primary);color:#fff;font-size:.75rem;
  padding:.25rem .6rem;border-radius:9999px;
  margin-bottom:.75rem;text-transform:uppercase;
}

/* ───────── FAQ ───────── */
.faq-section{padding:8rem 2rem;text-align:center;}
.faq-container{
  max-width:var(--max-width);margin:0 auto;text-align:left;
}
.faq-item{border-bottom:1px solid rgba(255,255,255,.1);padding:1.5rem 0;}
.faq-question{
  width:100%;background:none;border:0;color:inherit;
  text-align:left;font-weight:600;cursor:pointer;
  position:relative;padding-right:24px;
}
.faq-question::after{
  content:"+";position:absolute;right:0;top:0;
  font-weight:700;transition:transform .2s;
}
.faq-item.open .faq-question::after{transform:rotate(45deg);}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease;padding-top:.5rem;
  color:rgba(255,255,255,.8);
}
.faq-item.open .faq-answer{max-height:500px;}

/* ───────── FOOTER ───────── */
.footer{
  padding:3rem 2rem 4rem;
  font-size:.85rem;text-align:center;color:#888;
}

/* ───────── BREAKPOINTS ───────── */
@media(max-width:1024px){.hero-features{gap:4rem;}}
@media(max-width:768px){
  .nav-links{
    position:fixed;top:64px;left:0;right:0;background:#000;
    flex-direction:column;align-items:center;display:none;
    gap:1.5rem;padding:2rem 0;
  }
  .nav-links.active{display:flex;}
  .mobile-menu-btn{display:flex;}
  .hero-text-wrapper{transform:none;width:100%;text-align:left;margin-top:2rem;}
  .hero-features{flex-direction:column;align-items:flex-start;gap:2rem;margin-top:4rem;}
  .solutions-block,.solutions-more{flex-direction:column;width:100%;text-align:left;align-items:flex-start;}
  .price-card{padding:2rem 1.5rem;}
}

/* END OF FILE */