/* ======================================================
   Global Theme & Variables
   ====================================================== */
:root{
  /* Brand Colors */
  --color-primary:#00d28b;
  --color-primary-dark:#009b66;
  --color-secondary:#007cf0;
  --color-secondary-dark:#005bbf;
  --color-accent:#ff4d4f;
  --color-light:#ffffff;
  --color-dark:#121212;

  /* Gradients */
  --gradient-main:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
  --gradient-accent:linear-gradient(135deg,var(--color-accent) 0%,var(--color-secondary) 100%);

  /* Shadows */
  --shadow-sm:0 2px 4px rgba(0,0,0,.1);
  --shadow-md:0 4px 16px rgba(0,0,0,.15);

  /* Typography Scale (Adaptive) */
  --fs-xs:clamp(.75rem,.7rem + .25vw, .9rem);
  --fs-sm:clamp(.875rem,.8rem + .3vw,1rem);
  --fs-base:clamp(1rem,.95rem + .5vw,1.25rem);
  --fs-lg:clamp(1.25rem,1.1rem + .9vw,1.7rem);
  --fs-xl:clamp(1.75rem,1.4rem + 1.3vw,2.3rem);
  --fs-xxl:clamp(2.25rem,2rem + 2vw,3rem);

  /* Transition */
  --transition-base:all .3s ease;
}

/* ======================================================
   Base Styles
   ====================================================== */
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  font-family:'Nunito',sans-serif;
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--color-dark);
  background:#f5f7fa;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  color:var(--color-dark);
  text-align:center;
  margin:0 0 .5em;
  line-height:1.2;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
p{
  margin:0 0 1em;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}
a{
  color:var(--color-secondary);
  text-decoration:none;
  transition:var(--transition-base);
}
a:hover,a:focus{
  color:var(--color-secondary-dark);
}

/* Utilities */
.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.flex{display:flex;}
.space-between{justify-content:space-between;}
.align-center{align-items:center;}
.light{color:var(--color-light);}
.text-center{text-align:center;}
.btn{
  display:inline-block;
  padding:.75em 2em;
  border-radius:50px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#fff;
  background:var(--gradient-main);
  border:none;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:var(--transition-base);
}
.btn:hover,
.btn:focus{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.secondary-btn{
  background:var(--gradient-accent);
}
.link-read-more{
  display:inline-block;
  margin-top:.5em;
  font-weight:700;
}
.link-read-more:hover{transform:translateX(4px);}

/* ======================================================
   Header & Navigation
   ====================================================== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  padding:.75rem 0;
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(15px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.logo{
  font-family:'Oswald',sans-serif;
  font-size:var(--fs-lg);
  font-weight:700;
  background:var(--gradient-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.main-nav ul{
  display:flex;
  gap:1.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav a{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--color-dark);
}
.main-nav a:hover{color:var(--color-primary);}

/* Burger (mobile) */
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
}
.burger span{
  width:24px;
  height:3px;
  background:var(--color-dark);
  transition:var(--transition-base);
}

/* ======================================================
   Hero
   ====================================================== */
.hero-section{
  position:relative;
  color:#fff;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  padding:calc(100px + 10vh) 0 15vh;
}
.hero-content{
  text-align:center;
  max-width:800px;
  margin:0 auto;
}
.hero-title{
  font-size:var(--fs-xxl);
  margin-bottom:.5em;
  color:#ffffff;
}
.hero-subtitle{
  font-size:var(--fs-lg);
  margin-bottom:1.5em;
  color:#eaeaea;
}

/* ======================================================
   Sections Generic
   ====================================================== */
.section{padding:6rem 0;}
.glassmorph{
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:var(--shadow-sm);
}
.parallax{
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.section-title{
  font-size:var(--fs-xl);
  margin-bottom:2rem;
}

/* ======================================================
   Cards & Grids
   ====================================================== */
.card{
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:var(--transition-base);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card-image,
.image-container{
  width:100%;
  height:240px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{padding:1.5rem;}

/* Process Grid */
.process-grid,
.features-grid,
.external-links-grid,
.careers-list{
  display:grid;
  gap:2rem;
}
@media(min-width:600px){
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .features-grid{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:900px){
  .process-grid{grid-template-columns:repeat(4,1fr);}
}

/* ======================================================
   Accordion (Events)
   ====================================================== */
.accordion-item{
  border-bottom:1px solid #e0e0e0;
}
.accordion-header{
  width:100%;
  background:none;
  border:none;
  padding:1rem;
  text-align:left;
  font-family:'Oswald',sans-serif;
  font-size:var(--fs-lg);
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  color:var(--color-dark);
}
.accordion-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  padding:0 1rem;
}
.accordion-item.open .accordion-body{max-height:200px;padding:1rem;}

/* ======================================================
   Contact Form
   ====================================================== */
.contact-form{
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.form-row{
  display:flex;
  flex-direction:column;
}
label{
  font-weight:600;
  margin-bottom:.25rem;
}
input[type="text"],
input[type="email"],
textarea{
  padding:.75rem 1rem;
  border:1px solid #dcdcdc;
  border-radius:12px;
  font-family:'Nunito',sans-serif;
  font-size:var(--fs-sm);
  transition:var(--transition-base);
}
input:focus,
textarea:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(0,210,139,.25);
}

/* ======================================================
   Footer
   ====================================================== */
.site-footer{
  padding:3rem 0;
  color:var(--color-dark);
}
.site-footer h3{
  margin-bottom:.75rem;
  font-size:var(--fs-lg);
}
.site-footer ul{
  list-style:none;
  margin:0;
  padding:0;
}
.site-footer li{margin-bottom:.5rem;}
.site-footer a{color:var(--color-dark);}
.site-footer a:hover{color:var(--color-primary);}

/* Social Links */
.site-footer ul li a[href*="facebook"],
.site-footer ul li a[href*="instagram"],
.site-footer ul li a[href*="twitter"],
.site-footer ul li a[href*="x.com"]{
  position:relative;
  padding-left:1.5em;
}
.site-footer ul li a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1em;
  height:1em;
  border-radius:50%;
  background:var(--gradient-main);
}

/* ======================================================
   Morphing Animation Elements
   ====================================================== */
@keyframes blob{
  0%,100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%;}
  50%{border-radius:74% 26% 48% 52%/39% 55% 45% 61%;}
}
.morph{
  animation:blob 10s infinite linear;
}

/* ======================================================
   Success Page
   ====================================================== */
.success-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  background:var(--gradient-main);
  color:#fff;
}

/* ======================================================
   Burger & Mobile Nav
   ====================================================== */
@media(max-width:768px){
  .main-nav{display:none;}
  .burger{display:flex;}
  .burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}
  .mobile-nav{
    position:fixed;
    top:80px;
    left:0;
    right:0;
    background:#fff;
    padding:1.5rem;
    box-shadow:var(--shadow-md);
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
  .mobile-nav a{font-size:var(--fs-lg);}
}

/* ======================================================
   Page Specific Offsets
   ====================================================== */
.terms-page,
.privacy-page{
  padding-top:100px;
}

/* ======================================================
   Parallax Helpers
   ====================================================== */
.parallax::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35));
  z-index:0;
}
.parallax > *{position:relative;z-index:1;}

/* ======================================================
   ScrollReveal Utility Classes
   ====================================================== */
[data-sr]{opacity:0;transform:translateY(20px);}

/* ======================================================
   Readability Tweaks
   ====================================================== */
.section.glassmorph h2,
.section.glassmorph p,
.section.glassmorph li,
.section.glassmorph a{color:var(--color-dark);}

/* ======================================================
   Misc
   ====================================================== */
button,input[type="submit"]{
  font-family:'Nunito',sans-serif;
}
.burger{
  display: none;
}