/* =========================
   DESIGN SYSTEM – BRUTALIST
   ========================= */
:root{
  /* Color System – Split-Complementary */
  --clr-primary: #ff4d00;
  --clr-primary-dark: #c53b00;
  --clr-secondary: #0091ff;
  --clr-secondary-dark:#006ec4;
  --clr-accent:#00d97f;
  --clr-accent-dark:#00a362;

  --clr-neutral-100:#ffffff;
  --clr-neutral-900:#0a0a0a;
  --clr-neutral-700:#2e2e2e;
  --clr-neutral-500:#6b6b6b;

  --gradient-hero:linear-gradient(135deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 100%);
  --gradient-card:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.05));

  /* Typography */
  --ff-heading:"Inter",sans-serif;
  --ff-body:"IBM Plex Sans",sans-serif;

  --fs-h1:clamp(2.4rem,5vw,4rem);
  --fs-h2:clamp(1.8rem,3.5vw,2.6rem);
  --fs-h3:1.4rem;
  --fs-body:1rem;

  /* Spacing */
  --space-xs:.5rem;
  --space-s:1rem;
  --space-m:2rem;
  --space-l:4rem;
  --space-xl:6rem;

  /* Radius & Glasmorphism */
  --radius-card:1.2rem;
  --backdrop-blur:blur(12px);
}

/* =========================
   GLOBAL RESETS
   ========================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--clr-neutral-100);
  background:var(--clr-neutral-900);
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:var(--clr-secondary);}
ul{list-style:none;}
button, input[type="submit"]{
  font-family:inherit;
  cursor:pointer;
  background:none;
  border:none;
}

/* =========================
   UTILITY CLASSES
   ========================= */
.container{
  width:90%;
  margin-inline:auto;
  max-width:1200px;
}
.is-two-thirds{max-width:75%;}
.text-center{text-align:center;}
.mb-s{margin-bottom:var(--space-s);}
.mb-m{margin-bottom:var(--space-m);}
.mb-l{margin-bottom:var(--space-l);}
.hide{display:none!important;}

/* =========================
   GLOBAL BUTTONS & LINKS
   ========================= */
.btn,
button,
input[type="submit"]{
  display:inline-block;
  padding:.9rem 2.2rem;
  background:var(--clr-primary);
  color:var(--clr-neutral-100);
  font-weight:700;
  text-transform:uppercase;
  border-radius:.4rem;
  transition:transform .3s cubic-bezier(.19,1,.22,1),background-color .3s;
}
.btn:hover,
button:hover,
input[type="submit"]:hover{
  background:var(--clr-primary-dark);
  transform:translateY(-3px);
}
.read-more{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--clr-accent);
  font-weight:600;
  position:relative;
}
.read-more::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;
  width:0;height:2px;
  background:var(--clr-accent);
  transition:width .35s;
}
.read-more:hover::after{width:100%;}
/* =========================
   HEADER / NAV
   ========================= */
.main-header{
  position:fixed;top:0;left:0;width:100%;
  background:var(--clr-neutral-900);
  z-index:1000;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.main-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--space-s) 0;
}
.logo{
  font-family:var(--ff-heading);
  font-weight:700;
  font-size:1.5rem;
  color:var(--clr-primary);
}
.main-nav ul{
  display:flex;gap:var(--space-m);
}
.main-nav a{
  font-weight:600;
  color:var(--clr-neutral-100);
  position:relative;
}
.main-nav a::after{
  content:'';
  position:absolute;left:0;bottom:-4px;
  width:0;height:2px;background:var(--clr-secondary);
  transition:width .3s;
}
.main-nav a:hover::after{width:100%;}

/* =========================
   HERO SECTION
   ========================= */
.hero{
  position:relative;
  background:url('../image/hero-bg.jpg') center/cover no-repeat fixed;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  background:var(--gradient-hero);
}
.hero-content{
  position:relative;
  z-index:2;
}
.hero-title{
  font-family:var(--ff-heading);
  font-size:var(--fs-h1);
  font-weight:900;
  line-height:1.1;
  margin-bottom:var(--space-m);
  color:var(--clr-neutral-100); /* White text */
}
.hero-subtitle{
  font-size:1.1rem;
  margin-bottom:var(--space-m);
}

/* =========================
   SERVICES SECTION
   ========================= */
.services-section{padding:var(--space-xl) 0;background:var(--clr-neutral-700);}
.services-grid{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--gradient-card);
  border-radius:var(--radius-card);
  backdrop-filter:var(--backdrop-blur);
  border:1px solid rgba(255,255,255,.12);
  padding:var(--space-m);
  transition:transform .45s cubic-bezier(.175, .885, .32, 1.275);
}
.card:hover{
  transform:translateY(-8px) rotate(1deg);
}
.card-image{
  width:100%;
  height:200px;
  overflow:hidden;
  border-radius:.8rem;
  margin-bottom:var(--space-s);
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  margin:0 auto;
}
.card-content h3{
  font-family:var(--ff-heading);
  font-size:var(--fs-h3);
  margin-bottom:var(--space-xs);
  color:var(--clr-secondary);
}
.card-content p{color:var(--clr-neutral-100);}

/* =========================
   INSIGHTS SECTION
   ========================= */
.insights-section{padding:var(--space-xl) 0;background:var(--clr-neutral-900);}
.insights-section p{max-width:700px;margin-inline:auto;margin-bottom:var(--space-s);}
.insights-section .read-more{margin-top:var(--space-s);}

/* =========================
   INSTRUCTORS SLIDER
   ========================= */
.instructors-section{padding:var(--space-xl) 0;background:var(--clr-neutral-700);}
.slider{
  position:relative;
  overflow:hidden;
}
.slider-track{
  display:flex;
  gap:var(--space-m);
  
}
@keyframes slideX{
  0%{transform:translateX(0);}
  100%{transform:translateX(calc(-100% - var(--space-m)));}
}
.slider .card{min-width:280px;}

/* =========================
   TEAM SECTION
   ========================= */
.team-section{padding:var(--space-xl) 0;background:var(--clr-neutral-900);}
.team-grid{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* =========================
   STATISTICS SECTION
   ========================= */
.stats-section{
  padding:var(--space-xl) 0;
  background:var(--clr-secondary-dark);
  background-image:url('../image/stats-bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  position:relative;
}
.stats-section::before{
  content:'';
  position:absolute;inset:0;
  background:var(--gradient-hero);
}
.stats-section .container{position:relative;z-index:2;}
.stats-grid{
  display:grid;
  gap:var(--space-l);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  text-align:center;
}
.stat-number{
  display:inline-block;
  font-family:var(--ff-heading);
  font-size:2.5rem;
  font-weight:800;
  color:var(--clr-accent);
  animation:grow 2.2s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
@keyframes grow{
  0%{transform:scale(0);}
  80%{transform:scale(1.1);}
  100%{transform:scale(1);}
}

/* =========================
   CONTACT SECTION
   ========================= */
.contact-section{padding:var(--space-xl) 0;background:var(--clr-neutral-700);}
.contact-section form{
  max-width:700px;
  margin-inline:auto;
  display:grid;
  gap:var(--space-s);
}
.form-group{
  display:flex;
  flex-direction:column;
}
input,textarea{
  padding:.9rem 1rem;
  border-radius:.4rem;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:var(--clr-neutral-100);
}
input:focus,textarea:focus{outline:2px solid var(--clr-accent);}
textarea{resize:vertical;min-height:150px;}

/* =========================
   FOOTER
   ========================= */
.main-footer{
  background:var(--clr-neutral-900);
  padding:var(--space-l) 0 var(--space-m);
  border-top:4px solid var(--clr-primary);
}
.footer-top{display:flex;flex-direction:column;align-items:center;gap:var(--space-s);}
.footer-top nav a{
  color:var(--clr-secondary);
  margin:0 .3rem;
  font-weight:600;
}
.footer-social{
  margin-top:var(--space-s);
  display:flex;
  gap:var(--space-m);
}
.footer-social a{
  color:var(--clr-accent);
  font-weight:600;
  position:relative;
}
.footer-social a::before{
  content:'●';
  margin-right:.4rem;
  color:var(--clr-accent-dark);
}

/* =========================
   PAGES: SUCCESS, PRIVACY, TERMS
   ========================= */
body.success-page{display:flex;align-items:center;justify-content:center;min-height:100vh;text-align:center;}
body.legal-page{padding-top:100px;}

/* =========================
   RESPONSIVE MEDIA QUERIES
   ========================= */
@media(max-width:768px){
  .main-nav ul{flex-direction:column;gap:var(--space-s);}
  .logo{font-size:1.3rem;}
  .team-grid{grid-template-columns:1fr;}
}

/* =========================
   PARALLAX & NON-LINEAR MOTION
   ========================= */
[data-prompt]{
  will-change:transform;
  animation:float 7s cubic-bezier(.6,.05,.14,.94) infinite alternate;
}
@keyframes float{
  0%{transform:translateY(-6px) rotate(-1deg);}
  100%{transform:translateY(6px) rotate(1deg);}
}