/* ------------------------------------------------------------------
  style.css  |  Modern Glassmorphism + Biomorphic Design System
  ------------------------------------------------------------------ */
/* ---------- CSS VARIABLES : Analogous Palette ---------- */
:root{
  --primary:#4f46e5;          /* Indigo 600 */
  --primary-dark:#4338ca;     /* Indigo 700 */
  --secondary:#3b82f6;        /* Blue 600  */
  --secondary-dark:#2563eb;   /* Blue 700  */
  --accent:#10b981;           /* Emerald   */
  --accent-dark:#059669;      /* Emerald   */
  --bg-light:#f0f7ff;
  --text-dark:#222222;
  --text-light:#f8fafc;
  --glass-bg:rgba(255,255,255,0.35);
  --glass-border:rgba(255,255,255,0.25);
  --radius-xl:2.5rem;
  --radius-lg:1.5rem;
  --transition:all .35s cubic-bezier(.165,.84,.44,1);
}

/* ---------- GLOBAL RESETS ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Merriweather',serif;
  background:var(--bg-light);
  color:var(--text-dark);
  line-height:1.6;
}

/* Tailwind override for headings */
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',sans-serif;
  margin:0 0 .5em;
  color:var(--text-dark);
}

/* ---------- HELPER / UTILITY CLASSES ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(185%);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
  border-radius:var(--radius-xl);
}

.card,
.item,
.testimonial,
.team-member,
.product-card{
  @apply flex flex-col items-center text-center;
}

.card{
  position:relative;
  transition:var(--transition);
}
.card:hover{
  transform:perspective(900px) rotateX(6deg) rotateY(-6deg) translateY(-8px);
  box-shadow:0 25px 45px rgba(0,0,0,.15);
}
.card-image,
.image-container{
  width:100%;
  height:220px;
  overflow:hidden;
  border-radius:var(--radius-lg);
  margin-bottom:1rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* ---------- GLOBAL BUTTONS ---------- */
.btn,
button,
input[type="submit"]{
  font-family:'Montserrat',sans-serif;
  padding:.75rem 2rem;
  border-radius:9999px;
  background:var(--primary);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:var(--transition);
}
.btn:hover,
button:hover,
input[type="submit"]:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}
.btn:active,
button:active,
input[type="submit"]:active{
  transform:translateY(0);
}

/* ---------- LINKS & READ-MORE ---------- */
a{
  color:var(--primary);
  text-underline-offset:3px;
  transition:color .2s ease;
}
a:hover{color:var(--primary-dark);}
.read-more{
  position:relative;
  font-weight:600;
}
.read-more::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:0%;
  height:2px;
  background:var(--primary);
  transition:width .3s ease;
}
.read-more:hover::after{width:100%;}

/* ---------- NAVIGATION ---------- */
header{
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(255,255,255,.65);
  border-bottom:1px solid rgba(255,255,255,.25);
}

/* ---------- HERO SECTION ---------- */
#hero{
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
#hero h1,
#hero p{color:#fff;}
#hero a.btn{
  background:var(--accent);
}
#hero a.btn:hover{
  background:var(--accent-dark);
}

/* ---------- VISION ---------- */
#vision .card-content{padding:0;}
#vision img{border-radius:var(--radius-xl);}

/* ---------- WEBINARS (Carousel) ---------- */
.carousel::-webkit-scrollbar{display:none;}
.carousel{
  scroll-snap-type:x mandatory;
}
.carousel > *{
  scroll-snap-align:start;
}

/* ---------- COMMUNITY STAT WIDGETS ---------- */
.stat-widget{
  @apply text-center flex flex-col items-center justify-center;
  border-radius:var(--radius-xl);
}

/* ---------- PRESS & ACCOLADES ---------- */
#press p,
#accolades p{max-width:70ch; margin:0 auto;}

/* ---------- CONTACT FORM ---------- */
#contact form input,
#contact form textarea{
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  transition:border .2s ease;
}
#contact form input:focus,
#contact form textarea:focus{
  border-color:var(--primary);
  outline:none;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--primary-dark);
}
footer a{
  color:#c7d2fe;
}
footer a:hover{color:#fff;}
footer ul{padding:0;margin:0;list-style:none;}
footer .social-link{
  font-weight:600;
}

/* ---------- COOKIE POPUP ---------- */
#cookiePopup{
  font-size:.875rem;
  display:none;
  align-items:center;
  justify-content:center;
}
#cookiePopup button{
  background:var(--secondary);
}
#cookiePopup button:hover{
  background:var(--secondary-dark);
}

/* ---------- SUCCESS PAGE ---------- */
.success-container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
  text-align:center;
}

/* ---------- CONTENT PAGES (Privacy & Terms) ---------- */
.content-page{
  padding-top:100px;
  padding-left:1rem;
  padding-right:1rem;
}

/* ---------- PARALLAX BACKGROUNDS ---------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* ---------- ANIMATED BIOMORPHIC SHAPES ---------- */
.shape{
  position:absolute;
  border-radius:60% 40% 30% 70%/60% 40% 70% 30%;
  background:linear-gradient(145deg,var(--secondary),var(--primary));
  box-shadow:0 15px 30px rgba(0,0,0,.15);
  animation:float 8s ease-in-out infinite;
  z-index:-1;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-20px) rotate(10deg);}
}

/* ---------- 3D ROTATE ON SCROLL (Motion One) ---------- */
/*[data-aos]{transform:translateY(40px) rotateX(15deg);opacity:0;}*/
[data-aos].aos-animate{transform:none;opacity:1;transition:var(--transition);}

/* ---------- MEDIA QUERIES ---------- */
@media(max-width:768px){
  .card-image,.image-container{height:180px;}
  #hero{background-attachment:scroll;}
}