/* ============================================================
   Design System – Monochrome Neuromorphism + Biomorphic Accents
   Font-Family: “Inter” (headings) & “IBM Plex Sans” (body)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=Inter:wght@600;700&display=swap');

/* ------------------  CSS Variables  ------------------ */
:root{
  /* Hue can be changed globally for quick theming */
  --hue: 215;                            /* Blue scale */
  --clr-50 : hsl(var(--hue) 40% 98%);
  --clr-100: hsl(var(--hue) 30% 93%);
  --clr-200: hsl(var(--hue) 25% 85%);
  --clr-300: hsl(var(--hue) 25% 73%);
  --clr-400: hsl(var(--hue) 45% 60%);
  --clr-500: hsl(var(--hue) 55% 50%);
  --clr-600: hsl(var(--hue) 60% 42%);
  --clr-700: hsl(var(--hue) 65% 30%);
  --clr-800: hsl(var(--hue) 70% 20%);
  --clr-900: hsl(var(--hue) 75% 12%);
  
  --text   : var(--clr-800);
  --text-alt: var(--clr-50);
  --bg     : var(--clr-100);
  --shadow-light: rgba(255,255,255,.6);
  --shadow-dark : rgba(0,0,0,.08);
  
  /* Elevation shadows for soft-UI */
  --neu-outset : 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
  --neu-inset  : inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
  
  /* Radii & transition */
  --radius-lg : 1.25rem;
  --radius-md : .75rem;
  --radius-sm : .4rem;
  --timing    : .35s cubic-bezier(.25,.8,.25,1);
}

/* ------------------  Base / Reset  ------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans',sans-serif;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Inter',sans-serif;
  color:var(--clr-900);
  line-height:1.2;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:var(--clr-600);transition:color var(--timing);}
a:hover{color:var(--clr-500);}
.container{width:90%;max-width:1140px;margin-inline:auto;}
/* utility */
.text-center{text-align:center;}
.no-scroll{overflow:hidden;}

/* ------------------  Buttons  ------------------ */
.btn,
button,
input[type='submit']{
  --btn-bg: var(--clr-500);
  --btn-text: var(--text-alt);
  --btn-bg-h: var(--clr-600);
  display:inline-block;
  padding:.9rem 2.3rem;
  border:none;
  border-radius:var(--radius-md);
  background:var(--btn-bg);
  color:var(--btn-text);
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--neu-outset);
  transition:background var(--timing),transform var(--timing);
}
.btn:hover{background:var(--btn-bg-h);transform:translateY(-2px);}
.btn:active{transform:translateY(1px);box-shadow:var(--neu-inset);}
.btn--outline{
  background:transparent;
  color:var(--clr-600);
  border:2px solid var(--clr-500);
}
.btn--outline:hover{background:var(--clr-500);color:var(--text-alt);}

/* ------------------  Fixed Navigation  ------------------ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--clr-100);
  box-shadow:0 4px 8px rgba(0,0,0,.05);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 0;
}
.logo{font-family:'Inter',sans-serif;font-weight:700;font-size:1.4rem;color:var(--clr-700);}
.main-nav ul{display:flex;gap:1.5rem;list-style:none;}
.main-nav a{font-weight:500;color:var(--clr-700);}
.burger{display:none;background:none;border:none;}
@media(max-width:768px){
  .main-nav ul{display:none;}
  .burger{display:block;}
}

/* ------------------  Hero Section  ------------------ */
.hero-section{
  position:relative;
  display:grid;
  place-items:center;
  padding:8rem 0 6rem;
  color:var(--text-alt);
  text-align:center;
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url('image/hero-bg.jpg') center/cover no-repeat fixed;
}
.hero-section h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1rem;color:#fff;}
.hero-section p{max-width:700px;margin:0 auto 2.5rem;color:#f4f9ff;}
/* particle animation */
.particles{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.particles span{
  position:absolute;
  width:6px;height:6px;
  background:var(--clr-200);
  border-radius:50%;
  box-shadow:0 0 8px var(--clr-300);
  animation:float var(--timing) linear infinite;
}
@keyframes float{
  from{transform:translateY(0) scale(.7);opacity:1;}
  to{transform:translateY(-100vh) scale(1.1);opacity:0;}
}
/* Generate 50 particles via JS or templating; css placeholder */
.particles span:nth-child(3n){animation-duration:8s;left:20%;}
.particles span:nth-child(4n){animation-duration:12s;left:70%;}
.particles span:nth-child(5n){animation-duration:6s;left:45%;}

/* ------------------  Vision  ------------------ */
.vision-section{
  padding:6rem 0;
}
.vision-section .container{max-width:850px;}
.vision-section p{margin-top:1.5rem;font-size:1.1rem;text-align:center;}

/* ------------------  Workshops (Timeline)  ------------------ */
.workshops-section{padding:6rem 0;background:var(--clr-50);}
.timeline{
  display:grid;gap:2rem;max-width:900px;margin-inline:auto;
}
.timeline-item{
  background:var(--clr-100);
  border-radius:var(--radius-md);
  padding:2rem;
  box-shadow:var(--neu-outset);
  display:flex;
  flex-direction:column;align-items:center;text-align:center;
}
.timeline-item h3{margin-bottom:.8rem;color:var(--clr-700);}
.timeline-item p{max-width:500px;}

/* ------------------  Resources (Card Grid)  ------------------ */
.resources-section{padding:6rem 0;}
.card-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:1.8rem;
  background:var(--clr-50);
  border-radius:var(--radius-md);
  box-shadow:var(--neu-outset);
  transition:transform var(--timing);
}
.card:hover{transform:translateY(-6px);}
.card-image{
  width:100%;height:200px;
  overflow:hidden;
  border-radius:var(--radius-sm);
  margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
}
.card-image img{
  width:100%;height:100%;object-fit:cover;margin:0 auto;
}
.card-content h3{margin-bottom:.6rem;font-size:1.15rem;color:var(--clr-700);}
.card-content p{font-size:.95rem;color:var(--clr-800);}
.read-more{
  display:inline-block;margin-top:1rem;font-weight:600;
  color:var(--clr-600);position:relative;
}
.read-more::after{
  content:'';
  position:absolute;left:0;bottom:-2px;
  width:100%;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--timing);
}
.read-more:hover::after{transform:scaleX(1);}

/* ------------------  Media Section  ------------------ */
.media-section{
  padding:6rem 0;
  color:var(--text-alt);
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url('image/podcast-bg.jpg') center/cover no-repeat fixed;
  text-align:center;
}
.media-section h2{color:#fff;margin-bottom:1rem;}
.media-section p{max-width:720px;margin:0 auto;color:#e8ecf8;}

/* ------------------  Gallery Section  ------------------ */
.gallery-section{padding:6rem 0;background:var(--clr-50);}
.gallery-section .card-image{height:260px;}
.gallery-section .card{padding:0;background:transparent;box-shadow:none;}
.gallery-section .card:hover{transform:none;}

/* ------------------  Customer Stories  ------------------ */
.stories-section{padding:6rem 0;}
.story{
  background:var(--clr-50);
  border-left:6px solid var(--clr-400);
  padding:2rem 2.5rem;
  margin-bottom:2rem;
  box-shadow:var(--neu-outset);
}
.story h3{margin-bottom:.7rem;color:var(--clr-700);}
@media(min-width:768px){
  .stories-section .container{columns:2;column-gap:2rem;}
  .story{break-inside:avoid;}
}

/* ------------------  Careers  ------------------ */
.careers-section{
  padding:6rem 0;
  background:var(--clr-100);
  text-align:center;
}
.careers-section p{max-width:650px;margin:1rem auto 2.2rem;}

/* ------------------  Contact  ------------------ */
.contact-section{padding:6rem 0;}
#contactForm{
  display:grid;gap:1.4rem;max-width:640px;margin-inline:auto;
}
.form-group{display:flex;flex-direction:column;}
input,textarea{
  padding:.9rem 1.2rem;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--clr-50);
  box-shadow:var(--neu-inset);
  font-family:inherit;
  resize:vertical;
}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px var(--clr-300);}
textarea{min-height:160px;}

/* ------------------  Footer  ------------------ */
.site-footer{
  background:var(--clr-700);
  color:var(--clr-200);
  padding:3rem 0 2rem;
  margin-top:4rem;
}
.site-footer nav ul{
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem;list-style:none;
}
.site-footer a{color:var(--clr-50);font-weight:500;}
.social-links{display:flex;gap:.9rem;justify-content:center;margin-bottom:1rem;}
.social-links a{
  font-size:.95rem;padding:.25rem .6rem;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08);
  transition:background var(--timing);
}
.social-links a:hover{background:rgba(255,255,255,.18);}
.site-footer p{text-align:center;font-size:.85rem;color:var(--clr-200);}

/* ------------------  Success Page ------------------ */
.page-success{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:var(--clr-50);
}

/* ------------------  Privacy / Terms Padding ------------------ */
body.privacy,body.terms{padding-top:100px;}

/* ------------------  Glassmorphism Utility ------------------ */
.glass{
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.35);
}

/* ------------------  Animations: Scroll Reveal (placeholder) ------------------ */
[data-sr]{opacity:1;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;}
[data-sr].is-visible{opacity:1;transform:none;}