:root {
  color-scheme: light;
  --primary: #FF6D1F;
  --primary-light: #ff8a4d;
  --primary-dark: #e85a12;
  --secondary: #F5E7C6;
  --secondary-light: #FAF3E1;
  --secondary-dark: #e9d8a6;
  --accent: #222222;
  --blue: #FF6D1F;
  --blue-light: #ff8a4d;
  --blue-dark: #cc5417;
  --orange: #FF6D1F;
  --orange-light: #ff9a5f;
  --orange-dark: #e85a12;
  --white: #FFFFFF;
  --bg: #FAF3E1;
  --text: #222222;
  --text-light: #6b6b6b;
  --border: #F5E7C6;
  --card-shadow: 0 4px 24px rgba(255,109,31,0.12);
  --card-hover-shadow: 0 12px 48px rgba(255,109,31,0.20);
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
  --font-main: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-main);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
  padding-top: 106px;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-main); }
input, select, textarea { font-family: var(--font-main); }
.text-orange { color: var(--orange); }
.text-blue { color: var(--blue); }
.section-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(9, 25, 69, 0.07); color: var(--blue);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 50px;
  margin-bottom: 14px;
}
.section-tag.light { background: rgba(255,255,255,0.15); color: #fff; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--text);
}
.section-sub {
  font-size: 1.05rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto 30px;   /* 🔥 center fix */
  line-height: 1.7;
  text-align: center;    /* 🔥 text center */
}

/* Announcement Bar - Fixed */
/* ===== BASE ===== */
#announcementBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 38px;
  display: flex;
  align-items: center;
  background: var(--blue-dark);
}

#announcementBar .announcement-inner {
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* TEXT AREA */
#announcementBar .announcement-text {
  overflow: hidden;
  width: 100%;
  color: white;
}

/* TRACK */
#announcementBar .announcement-track {
  display: flex;
  gap: 50px;
  white-space: nowrap;
  width: max-content;
}

/* TEXT */
#announcementBar span {
  white-space: nowrap;
}

/* CLOSE BTN */
#announcementBar .announcement-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* ===== MOBILE ANIMATION ===== */
@media (max-width: 768px) {

  #announcementBar .announcement-track {
    animation: marquee 12s linear infinite;
  }

  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

}

@media (min-width: 769px) {

  #announcementBar .announcement-text {
    display: flex;
    justify-content: center;
  }

  #announcementBar .announcement-track {
    animation: none;       /* animation band */
    transform: none;       /* reset */
    justify-content: center;
    width: 100%;
  }

}

/* Navbar - Fixed */
.navbar {
  position: fixed;
  top: 38px;
  left: 0;
  right: 0;
  z-index: 999;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
}
.nav-left { display: flex; align-items: center; flex-shrink: 0; }
.nav-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.nav-logo img { height: 120px; width: auto; object-fit: contain; }
.navbar.scrolled { box-shadow: 0 4px 24px rgba(30,79,216,0.12); }
.navbar.ann-hidden { top: 0; }
.nav-link {
  padding: 8px 14px; font-size: 0.9rem; font-weight: 600;
  color: var(--text-light); border-radius: 8px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--blue); background: rgba(30,79,216,0.06); }
.btn-signin {
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  color: #fff; padding: 10px 22px; border-radius: 50px;
  font-size: 0.88rem; font-weight: 700; transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(255,107,53,0.3); white-space: nowrap;
}
.btn-signin:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,53,0.4); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.hamburger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all var(--transition); display: block; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero Section */
.hero {
  min-height: 90vh; position: relative; overflow: hidden;
  display: flex; align-items: center;
  background: linear-gradient(135deg, #fff8f0 0%, #fff 50%, #fff8f5 100%);
  padding: 60px 0 40px;
}
.hero-bg-gradient {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 70% 50%, rgba(30,79,216,0.07) 0%, transparent 60%),
              radial-gradient(ellipse 50% 50% at 20% 80%, rgba(255,107,53,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-container {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; position: relative; z-index: 1;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(30,79,216,0.1), rgba(74,127,255,0.1));
  color: var(--blue); border: 1px solid rgba(30,79,216,0.2);
  font-size: 0.8rem; font-weight: 700; padding: 6px 16px; border-radius: 50px;
  margin-bottom: 20px; animation: fadeInDown 0.6s ease forwards;
}
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800; line-height: 1.1;
  color: var(--text); margin-bottom: 12px;
  animation: fadeInLeft 0.7s 0.1s ease both;
}
.hero-highlight { color: var(--blue); }
.hero-rotating-words {
  min-height: 60px; overflow: hidden; margin-bottom: 20px;
  animation: fadeInLeft 0.7s 0.2s ease both;
}
.word-list { position: relative; }
.word {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800;
  color: var(--orange); position: absolute; top: 0; opacity: 0;
  transform: translateY(30px); transition: all 0.5s ease;
  line-height: 1.2;
}
.word.active { opacity: 1; transform: translateY(0); position: relative; }
.word.exit { opacity: 0; transform: translateY(-30px); position: absolute; }
.hero-sub {
  font-size: 1.05rem; color: var(--text-light); line-height: 1.8;
  max-width: 480px; margin-bottom: 32px;
  animation: fadeInLeft 0.7s 0.3s ease both;
}
.hero-cta-group {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 40px; animation: fadeInLeft 0.7s 0.4s ease both;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff; padding: 14px 28px; border-radius: 50px;
  font-size: 0.95rem; font-weight: 700; font-family: var(--font-main);
  box-shadow: 0 6px 24px rgba(30,79,216,0.35);
  transition: all var(--transition);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(30,79,216,0.45); }
.btn-primary i { transition: transform var(--transition); }
.btn-primary:hover i { transform: translateX(4px); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue); border: 2px solid rgba(30,79,216,0.25);
  padding: 12px 24px; border-radius: 50px;
  font-size: 0.95rem; font-weight: 700;
  transition: all var(--transition); background: transparent;
}
.btn-outline:hover { background: rgba(30,79,216,0.06); border-color: var(--blue); transform: translateY(-2px); }
.hero-stats {
  display: flex; align-items: center; gap: 20px;
  animation: fadeInLeft 0.7s 0.5s ease both;
}
.stat { display: flex; flex-direction: column; }
.stat-num { font-size: 1.8rem; font-weight: 800; color: var(--blue); font-family: var(--font-display); line-height: 1; }
.stat-label { font-size: 0.8rem; color: var(--text-light); font-weight: 500; }
.stat-divider { width: 1px; height: 36px; background: var(--border); }
.hero-right { display: flex; justify-content: center; align-items: center; animation: fadeInRight 0.8s 0.2s ease both; }
.hero-illustration { position: relative; width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; }
.floating { animation: floatUpDown 4s ease-in-out infinite; }
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.hero-blob {
  position: absolute; width: 420px; height: 420px; border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
  background: linear-gradient(135deg, rgba(30,79,216,0.1), rgba(74,127,255,0.15));
  animation: blobMorph 8s ease-in-out infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; }
  33% { border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%; }
  66% { border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%; }
}
.hero-card-stack { position: relative; z-index: 2; width: 100%; height: 100%; }
.hero-feature-card {
  position: absolute; background: #fff; border-radius: 14px;
  padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(30,79,216,0.12); font-weight: 700; font-size: 0.85rem;
  border: 1px solid rgba(30,79,216,0.1); animation: floatCard 3s ease-in-out infinite;
}
.hero-feature-card i { font-size: 1.2rem; }
.card1 { top: 40px; left: 0; color: var(--blue); animation-delay: 0s; }
.card1 i { color: var(--blue); }
.card2 { bottom: 80px; left: 0; color: var(--orange); animation-delay: 1s; }
.card2 i { color: var(--orange); }
.card3 { top: 60px; right: 0; color: #7c3aed; animation-delay: 2s; }
.card3 i { color: #7c3aed; }
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
.hero-center-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;
}
.orbit-ring {
  position: absolute; border-radius: 50%; border: 1.5px dashed rgba(30,79,216,0.25);
  animation: spin 12s linear infinite;
}
.ring1 { width: 160px; height: 160px; }
.ring2 { width: 220px; height: 220px; animation-direction: reverse; animation-duration: 18s; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.orbit-dot {
  position: absolute; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(30,79,216,0.2); font-size: 0.85rem;
}
.dot1 { top: 10px; left: 50%; transform: translateX(-50%); color: var(--blue); }
.dot2 { bottom: 10px; right: 0; color: var(--orange); }
.dot3 { left: 0; top: 50%; transform: translateY(-50%); color: #7c3aed; }
.center-core {
  width: 110px; height: 110px; border-radius: 50%; background: #fff;
  box-shadow: 0 8px 32px rgba(30,79,216,0.2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 12px; z-index: 3;
}
.center-core img { width: 100%; height: 100%; object-fit: contain; }
.hero-scroll-hint {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.7rem; color: var(--text-light); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; animation: fadeIn 1.5s 1s ease both;
}
.scroll-arrow {
  width: 20px; height: 30px; border: 2px solid rgba(107,114,128,0.3);
  border-radius: 10px; position: relative;
}
.scroll-arrow::after {
  content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; background: var(--blue); border-radius: 2px;
  animation: scrollDown 2s ease infinite;
}
@keyframes scrollDown {
  0% { top: 5px; opacity: 1; }
  100% { top: 14px; opacity: 0; }
}
/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {

  .hero-scroll-hint {
    position: static;   /* overlap fix */
    transform: none;
    margin-top: 25px;
  }

}

@media (max-width: 768px) {

  /* Hero section ko proper stack bana */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Stats ko center kar */
  .hero-stats {
    align-items: center;
    margin-top: 20px;
  }

  /* SCROLL HINT FIX */
  .hero-scroll-hint {
    position: relative;   /* static ki jagah ye better hai */
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 30px;
    align-items: center;
  }

}

/* Tabletop Section */
.tabletop { padding: 60px 0; background: var(--white); }
.tabletop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 20px; }
.tabletop-left h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin-bottom: 30px; }
.feature-checklist { display: flex; flex-direction: column; gap: 22px; }
.feature-checklist li { display: flex; align-items: flex-start; gap: 16px; }
.check-icon {
  width: 32px; height: 32px; border-radius: 50%; min-width: 32px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.75rem;
}
.feature-checklist li div strong { display: block; font-size: 0.97rem; font-weight: 700; margin-bottom: 4px; }
.feature-checklist li div p { font-size: 0.87rem; color: var(--text-light); line-height: 1.6; }
.tabletop-right { display: flex; flex-direction: column; gap: 20px; }
.highlight-card {
  background: #fff; border-radius: var(--radius); padding: 24px 28px;
  box-shadow: var(--card-shadow); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 20px;
  transition: all var(--transition); opacity: 0; transform: translateX(40px);
}
.highlight-card.revealed { opacity: 1; transform: translateX(0); }
.highlight-card:hover { transform: translateX(0) translateY(-4px); box-shadow: var(--card-hover-shadow); }
.highlight-icon {
  width: 52px; height: 52px; border-radius: 14px; min-width: 52px;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff;
}
.highlight-icon.orange { background: linear-gradient(135deg, var(--orange), var(--orange-light)); }
.highlight-icon.blue { background: linear-gradient(135deg, var(--blue), var(--blue-light)); }
.highlight-icon.green { background: linear-gradient(135deg, #11998e, #38ef7d); }
.highlight-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.highlight-card p { font-size: 0.87rem; color: var(--text-light); }

/* Projects Section */
.projects { padding: 60px 0; background: var(--bg); background: linear-gradient(180deg, #f7f9ff 0%, #fff 100%); }
.projects-slider-wrapper {
  padding: 60px 0;   /* 👈 side ka 80px hata diya */
  overflow: hidden;  /* 👈 bahar nikalne se roka */
}
.projects {
  overflow: hidden; /* outer safe */
}
.projects-slider {
  display: flex;
  gap: 24px;
  transition: transform 0.8s ease-in-out;
  align-items: center;
}
.project-card {
  flex: 0 0 60%;
  transition: all 0.5s ease;
  opacity: 0.4;
  transform: scale(0.85);
}
.project-card {
  margin: 20px 0; /* 🔥 vertical breathing space */
}
.project-card.active { opacity: 1; transform: scale(1); z-index: 2; }
.project-card:hover { transform: scale(1.02); box-shadow: var(--card-hover-shadow); }
.project-img { height: 180px; display: flex; align-items: center; justify-content: center; font-size: 4rem; position: relative; }
.robotics-bg { background: linear-gradient(135deg, #1E4FD8, #4A7FFF); }
.neuro-bg { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.iot-bg { background: linear-gradient(135deg, #059669, #10b981); }
.aero-bg { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.ai-bg { background: linear-gradient(135deg, #FF6B35, #FF9B35); }
.project-info { padding: 22px; }
.project-tag {
  background: rgba(30,79,216,0.08); color: var(--blue);
  font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 50px;
  display: inline-block; margin-bottom: 10px;
}
.project-info h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; font-family: var(--font-display); }
.project-info p { font-size: 0.87rem; color: var(--text-light); line-height: 1.7; margin-bottom: 16px; }
.project-link { color: var(--blue); font-size: 0.87rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition); }
.project-link:hover { gap: 10px; }
/* .slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  transition: all var(--transition); border: 1px solid var(--border);
  cursor: pointer;
} */

#projectsPrev {
  left: 10px;
}

#projectsNext {
  right: 10px;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.slider-btn:hover { background: var(--blue); color: #fff; transform: translateY(-50%) scale(1.1); }
.prev-btn { left: -22px; }
.next-btn { right: -22px; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all var(--transition); cursor: pointer; }
.dot.active { width: 24px; border-radius: 4px; background: var(--blue); }

.project-card:not(.active) {
  filter: blur(2px);
}

/* Learning Section */
.learning { padding: 60px 0; background: var(--white); }
.tabs-wrapper { width: 100%; }
.tabs-header { display: flex; justify-content: center; gap: 12px; text-align: center; }
.tab-btn {
  padding: 12px 28px; border-radius: 10px; font-size: 0.9rem; font-weight: 700;
  color: var(--text-light); transition: all var(--transition); display: flex; align-items: center; gap: 8px;
}
.tab-btn.active { background: var(--white); color: var(--blue); box-shadow: 0 2px 12px rgba(30,79,216,0.12); }
.tab-content { display: none; animation: fadeInUp 0.4s ease; }
.tab-content.active { display: block; }
.learning-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.learning-card {
  background: #fff; border-radius: var(--radius); padding: 24px 20px;
  box-shadow: var(--card-shadow); border: 1px solid var(--border);
  transition: all var(--transition); position: relative; overflow: hidden;
}
.learning-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.learning-card:hover::before { transform: scaleX(1); }
.learning-card:hover { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); }
.lcard-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem; margin-bottom: 16px;
}
.learning-card h4 { font-size: 0.97rem; font-weight: 700; margin-bottom: 8px; }
.learning-card p { font-size: 0.83rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }
.lcard-badge {
  display: inline-block; background: rgba(30,79,216,0.08); color: var(--blue);
  font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 50px;
}
.lcard-badge.classes { background: rgba(255,107,53,0.08); color: var(--orange); }

@media (max-width: 768px) {

  .learning-cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 10px;
  }

  /* scrollbar hide */
  .learning-cards::-webkit-scrollbar {
    display: none;
  }
.learning-card {
  flex: 0 0 75%;
  min-height: 180px;   /* height flexible */
  height: auto;        /* content ke hisaab se grow karega */

  padding: 12px;
  border-radius: 14px;
}
}




/* kits */
.kits {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff, #f4f7ff);
}

.section-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  text-align: center;
}
.section-container-c {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  text-align: left;
}

.section-title {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.text-orange {
  color: #ff6b00;
}

.section-sub {
  color: #666;
  margin-bottom: 40px;
}

.kits-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 40px auto 0;
}

/* CATEGORY CARD */
.kit-cat {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.4s;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.kit-cat img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: 0.4s;
}

.kit-cat-info {
  text-align: center;
  padding: 18px 12px 16px;
}

.kit-cat-info h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}

.kit-cat-info span {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}

.kit-cat-info h4 {
  line-height: 1.3;
}

.kit-cat-info span {
  line-height: 1.4;
}

.kit-cat:hover h4 {
  color: #ff6b00;
}

.kit-cat:hover span {
  color: #475569;
}


.kit-cat:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.kit-cat:hover img {
  transform: scale(1.08);
}

/* FEATURED */
.featured-kits {
  display: grid;
  grid-template-columns: repeat(2, 280px);
  justify-content: center;
  gap: 40px;
  margin-top: 60px;
}

/* KIT CARD */
.kit-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding-bottom: 20px;
  transition: 0.4s;
  border: 2px solid transparent;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* GRADIENT BORDER */
.kit-card:hover {
  border-color: #ff6b00;
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.kit-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.kit-card h4 {
  margin: 15px 0 5px;
}

.kit-card p {
  font-size: 0.85rem;
  color: #666;
  padding: 0 15px;
}

/* BUTTON */
.btn-kit {
  margin-top: 10px;
  background: linear-gradient(135deg, #ff6b00, #ff3d00);
  border: none;
  color: white;
  padding: 10px 18px;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-kit:hover {
  transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 1024px) {

  .kits-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .featured-kits {
    grid-template-columns: repeat(2, 1fr);
  }

}

.kits .section-sub {
  font-size: 0.95rem;          /* thoda compact */
  color: #64748b;              /* soft premium color */
  max-width: 500px;            /* width reduce → better readability */
  margin: 0 auto 35px;         /* center align */
  line-height: 1.6;            /* clean spacing */
  text-align: center;          /* proper alignment */
}


/* Why Section */
.why { padding: 60px 0; background: var(--bg); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card {
  background: #fff; border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--card-shadow); border: 1px solid var(--border);
  transition: all var(--transition); opacity: 0; transform: translateY(30px);
  position: relative; overflow: hidden;
}
.why-card.revealed { opacity: 1; transform: translateY(0); }
.why-card:hover { transform: translateY(-8px); box-shadow: var(--card-hover-shadow); }
.why-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.why-card:hover::after { transform: scaleX(1); }
.why-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(30,79,216,0.1), rgba(74,127,255,0.15));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--blue); margin-bottom: 18px;
  transition: all var(--transition);
}
.why-card:hover .why-icon {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff; transform: scale(1.1);
}
.why-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; font-family: var(--font-display); }
.why-card p { font-size: 0.87rem; color: var(--text-light); line-height: 1.7; }

/* Testimonials Section */
.testimonials { padding: 60px 0; background: var(--white); }
.testi-slider-wrapper { position: relative; overflow: hidden; }
.testi-slider { display: flex; gap: 24px; transition: transform 0.5s cubic-bezier(.4,0,.2,1); padding: 12px 4px; will-change: transform; }
.testi-card {
  min-width: 340px; flex: 0 0 340px; background: #fff; border-radius: var(--radius);
  padding: 30px; box-shadow: var(--card-shadow); border: 1px solid var(--border);
  transition: all var(--transition);
}
.testi-card:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); }
.testi-stars { color: #f59e0b; font-size: 1.1rem; margin-bottom: 14px; letter-spacing: 2px; }
.testi-card p { font-size: 0.9rem; color: var(--text-light); line-height: 1.8; margin-bottom: 20px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
  width: 46px; height: 46px; border-radius: 50%; min-width: 46px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.85rem;
}
.testi-author strong { display: block; font-size: 0.9rem; font-weight: 700; }
.testi-author span { font-size: 0.8rem; color: var(--text-light); }

/* Team Section */
.team {
  background: #e5e7eb;
  padding: 80px 20px;
}
.team-grid {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}
.team-card {
  width: 300px;
  height: 400px;
  background: #f9fafb;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
}
.team-card::before {
  content: "";
  position: absolute;
  bottom: -100px; /* 👈 same old position */
  left: 0;
  width: 100%;
  height: 220px; /* 👈 same old size */
  background: #3730a3;
  border-radius: 50% 50% 0 0;
  transition: all 0.5s ease;
  z-index: 0;
}
.team-card:hover::before {
  bottom: 0;
  height: 100%;
  border-radius: 0; /* 👈 full rectangle banega */
}
.team-image {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1;
}
.team-image img {
  width: 1000%;
  height: 1000%;
  object-fit: contain; /* 🔥 auto fit */
  object-position: bottom;
  transition: 0.6s;
}
.team-card:hover .team-image img {
  transform: translateY(0px);
}
.team-card h4 {
  margin: 0;
  position: relative;
  z-index: 2;
}

.team-role {
  display: block;
  color: #555;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.team-card p {
  font-size: 14px;
  color: #666;
  position: relative;
  z-index: 2;
}

.team-card:hover h4,
.team-card:hover .team-role {
  color: white;
}




/* Journey Section */
.journey {
  padding: 70px 0;
  background: linear-gradient(180deg, #ffffff, #f5f7ff);
}

/* GRID */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

/* CARD */
.journey-card {
  background: rgba(255,255,255,0.9);
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid #eee;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* HOVER */
.journey-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
  border-color: #4f6cff;
}

/* GLOW EFFECT */
.journey-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(79,108,255,0.15), transparent);
  opacity: 0;
  transition: 0.3s;
}

.journey-card:hover::before {
  opacity: 1;
}

/* YEAR */
.year {
  display: inline-block;
  background: linear-gradient(135deg, #4f6cff, #7a8cff);
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
}

/* TEXT */
.journey-card h4 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.journey-card p {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
}

/* FEATURED CARD */
.journey-card.featured {
  border: 2px solid #ff8c00;
  box-shadow: 0 12px 40px rgba(255,140,0,0.25);
  transform: scale(1.02);
}

.journey-card.featured:hover {
  transform: scale(1.05) translateY(-6px);
}

/* END TEXT */
.journey-end {
  text-align: center;
  margin-top: 25px;
  font-weight: 600;
  opacity: 0.7;
}

/* MOBILE */
@media (max-width: 768px) {
  .journey-grid {
    grid-template-columns: 1fr;
  }
}

/* Partners Section */
.partners {
  padding: 60px 0;
  background: var(--bg); /* white ki jagah theme bg */
  overflow: hidden;
}

/* Wrapper FIX */
.partners-track-wrapper {
  position: relative; /* IMPORTANT */
}

/* Gradient fade effect */
.partners-track-wrapper::before,
.partners-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.partners-track-wrapper::before {
  left: 0;

}

.partners-track-wrapper::after {
  right: 0;
}

/* Track animation */
.partners-track {
  display: flex;
  gap: 24px;
  animation: scrollPartners 25s linear infinite;
}

@keyframes scrollPartners {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.partners-track:hover {
  animation-play-state: paused;
}

/* 🔥 LOGO BOX PERFECT */
.partner-logo {
  min-width: 180px;
  height: 80px;
  background: #fff; /* clean white card */
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px;

  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  transition: all 0.3s ease;
}

/* Hover premium feel */
.partner-logo:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--blue);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* 🔥 IMAGE PERFECT FIT */
.partner-logo img {
  max-width: 120%;   /* 👈 size increase */
  max-height: 120%;  /* 👈 size increase */
  object-fit: contain;

  filter: none;      /* 👈 grayscale hata diya */
  opacity: 1;        /* 👈 full visible */
}

/* Hover pe color */
.partner-logo:hover img {
  filter: none;
  opacity: 1;
} 

/* Demo Section */
.demo { padding: 60px 0; background: #fff; position: relative; }
.demo-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #f0f4ff 0%, #fff8f5 100%);
  z-index: 0;
}
.demo-wrapper {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px;
  align-items: start; position: relative; z-index: 1;
}
.demo-title {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; line-height: 1.2; margin-bottom: 16px;
}
.demo-title span { color: var(--orange); }
.demo-left p { color: var(--text-light);  line-height: 1.8; margin-bottom: 28px; }
.demo-benefits { display: flex; flex-direction: column; gap: 12px; }
.demo-benefits li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; }
.demo-benefits i { color: var(--blue); font-size: 1rem; }
.demo-right {
  background: #fff; border-radius: var(--radius); padding: 36px;
  box-shadow: 0 8px 40px rgba(30,79,216,0.1); border: 1px solid var(--border);
}
.demo-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 0.83rem; font-weight: 700; color: var(--text); }
.form-group input, .form-group select {
  padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--text); outline: none; background: var(--bg);
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group select:focus { border-color: var(--blue); background: #fff; }
.btn-demo-submit {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff; padding: 16px 32px; border-radius: 50px;
  font-size: 1rem; font-weight: 700; font-family: var(--font-main);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 24px rgba(30,79,216,0.3); transition: all var(--transition);
  border: none;
}
.btn-demo-submit:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(30,79,216,0.4); background: linear-gradient(135deg, var(--orange), var(--orange-light)); }

/* Support Section */
.support { padding: 60px 0; background: var(--bg); }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.support-card {
  background: #fff; border-radius: var(--radius); padding: 36px;
  box-shadow: var(--card-shadow); border: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 24px; transition: all var(--transition);
}
.support-card:hover { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); }
.support-icon {
  width: 64px; height: 64px; border-radius: 18px; min-width: 64px;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #fff;
}
.support-icon.whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
.support-icon.call { background: linear-gradient(135deg, var(--blue), var(--blue-light)); }
.support-content h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; font-family: var(--font-display); }
.support-content p { font-size: 0.87rem; color: var(--text-light); line-height: 1.7; margin-bottom: 18px; }
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #25D366, #128C7E); color: #fff;
  padding: 11px 22px; border-radius: 50px; font-size: 0.87rem; font-weight: 700;
  transition: all var(--transition); box-shadow: 0 4px 16px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,0.4); }
.btn-call {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light)); color: #fff;
  padding: 11px 22px; border-radius: 50px; font-size: 0.87rem; font-weight: 700;
  transition: all var(--transition); box-shadow: 0 4px 16px rgba(30,79,216,0.3);
}
.btn-call:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,79,216,0.4); }

/* Footer */
.footer { background: #0a0f1e; color: rgba(255,255,255,0.8); }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.footer-top { padding: 50px 0 40px; }
.footer-top .footer-container { display: grid; grid-template-columns: 1.5fr 2fr; gap: 60px; align-items: start; }
.footer-brand { max-width: 340px; }
.footer-logo { height: 50px; width: auto; margin-bottom: 18px;}
.footer-brand p { font-size: 0.87rem; line-height: 1.8; color: rgba(255,255,255,0.6); margin-bottom: 22px; }
.social-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.social-links a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: all var(--transition);
}
.social-links a:hover { background: var(--orange); color: #fff; border-color: var(--orange); transform: translateY(-2px); }
.footer-contact p { display: flex; align-items: center; gap: 10px; font-size: 0.87rem; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.footer-contact a { color: rgba(255,255,255,0.7); transition: color var(--transition); }
.footer-contact a:hover { color: var(--orange); }
.footer-contact i { color: var(--orange); width: 16px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-col h5 { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 18px; font-family: var(--font-display); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.85rem; color: rgba(255,255,255,0.55); transition: color var(--transition); }
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0;
}
.footer-bottom .footer-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.4); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font-size: 0.82rem; color: rgba(255,255,255,0.4); transition: color var(--transition); }
.footer-legal a:hover { color: var(--orange); }

/* ================= FOOTER MOBILE FIX (FINAL) ================= */

@media (max-width: 768px) {

  /* Parent layout fix (MOST IMPORTANT) */
  .footer-top .footer-container {
    display: flex !important;
    flex-direction: column;
    gap: 25px;
  }

  /* Footer links = 3 column */
  .footer-links {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    width: 100%;
  }

  /* Column styling */
  .footer-col {
    width: 100%;
  }

  .footer-col h5 {
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: #fff;
  }

  .footer-col ul {
    padding: 0;
    margin: 0;
  }

  .footer-col li {
    list-style: none;
    margin-bottom: 6px;
  }

  .footer-col a {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
  }

  /* Bottom section center */
  .footer-bottom .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .footer-bottom p {
    font-size: 0.75rem;
  }

  .footer-legal {
    justify-content: center;
    gap: 12px;
  }

  .footer-legal a {
    font-size: 0.75rem;
  }

}

/* ================= EXTRA SMALL ================= */

@media (max-width: 480px) {

  .footer-links {
    grid-template-columns: repeat(2, 1fr) !important;
  }

}

/* Floating Elements */
.whatsapp-float {
  position: fixed; bottom: 80px; right: 24px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff;
  box-shadow: 0 6px 24px rgba(37,211,102,0.4);
  animation: floatWA 3s ease-in-out infinite; transition: all var(--transition);
}
.whatsapp-float:hover { transform: scale(1.1) translateY(-4px); box-shadow: 0 10px 32px rgba(37,211,102,0.5); }
@keyframes floatWA {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; box-shadow: 0 4px 16px rgba(30,79,216,0.3);
  opacity: 0; pointer-events: none; transition: all var(--transition);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--orange); transform: translateY(-3px); }
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(30px);
  background: #fff; color: var(--text); border-radius: 50px; padding: 14px 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600; z-index: 9999; opacity: 0;
  transition: all 0.4s cubic-bezier(.4,0,.2,1); pointer-events: none;
  border: 1px solid var(--border);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast i { color: #10b981; font-size: 1.1rem; }

/* Animations */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Responsive Design */
@media (max-width: 1024px) {
  body { padding-top: 106px; }
  .hero-container { grid-template-columns: 1fr; text-align: center; }
  .hero-left { align-items: center; display: flex; flex-direction: column; }
  .hero-right { display: none; }
  .hero-stats { justify-content: center; }
  .hero-sub { max-width: 100%; }
  .tabletop-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-wrapper { grid-template-columns: 1fr; }
  .timeline::before { left: 24px; }
  .timeline-item { padding: 0 !important; padding-left: 70px !important; flex-direction: row !important; }
  .timeline-dot { left: 24px; }
  .featured-kits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  body { padding-top: 106px; }
  .hamburger { display: flex; }
  .nav-menu {
    position: fixed; top: 0; right: -100%; bottom: 0; width: 280px;
    background: #fff; flex-direction: column; justify-content: flex-start;
    padding: 80px 28px 28px; gap: 8px; box-shadow: -8px 0 32px rgba(0,0,0,0.1);
    transition: right var(--transition); z-index: 9999;
    left: auto; transform: none;
  }
  .nav-menu.open { right: 0; }
  .nav-link { padding: 12px 16px; font-size: 1rem; border-radius: 10px; width: 100%; }
  .btn-signin { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .footer-top .footer-container { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .learning-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom .footer-container { flex-direction: column; text-align: center; }
  .section-sub { margin-bottom: 24px; }
  .tabs-header { flex-direction: column; width: 100%; }
  .project-card { min-width: 280px; flex: 0 0 280px; }
  /* 🔥 PROJECTS CINEMATIC CAROUSEL */
.projects-slider {
  display: flex;
  gap: 24px;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card {
  opacity: 0.4;
  transform: scale(0.85);
  filter: blur(2px);
}

/* CENTER CARD */
.project-card.active {
  opacity: 1;
  transform: scale(1.1);
  filter: blur(0);
}

/* SIDE CARDS */
.project-card.prev,
.project-card.next {
  opacity: 0.6;
  transform: scale(0.95);
  filter: blur(1px);
}
  .testi-card { min-width: 280px; flex: 0 0 280px; }
  .hero { padding: 40px 0 30px; min-height: auto; }
  .tabletop, .projects, .learning, .kits, .why, .testimonials, .team, .journey, .partners, .demo, .support {
    padding: 40px 0;
  }
  .slider-btn { width: 36px; height: 36px; }
  .prev-btn { left: -12px; }
  .next-btn { right: -12px; }
  .featured-kits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .learning-cards { grid-template-columns: 1fr; }
  .hero-cta-group { flex-direction: column; width: 100%; }
  .btn-primary, .btn-outline { width: 100%; justify-content: center; }
  .hero-stats { flex-direction: column; gap: 12px; }
  .stat-divider { display: none; }
  .demo-right { padding: 24px 20px; }
  .support-card { flex-direction: column; }
  .footer-links { grid-template-columns: 1fr; }
  .announcement-inner p { font-size: 0.75rem; }
  .hero-heading { font-size: 1.8rem !important; }
  .word { font-size: 1.6rem !important; }
  .project-card, .testi-card { min-width: 260px !important; flex: 0 0 260px !important; }
  .tabletop, .projects, .learning, .kits, .why, .testimonials, .team, .journey, .partners, .demo, .support {
    padding: 30px 0;
  }
}

/* Performance Optimizations */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* {
  will-change: auto;
}

.project-card, .kit-card, .why-card, .team-card {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.projects-slider, .kits-slider, .testi-slider {
  will-change: transform;
}

/* CINEMATIC PROJECTS SLIDER */

.projects-slider {
  align-items: center;
}

.project-card {
  opacity: 0.4;
  transform: scale(0.85);
  filter: blur(2px);
  transition: all 0.6s ease;
}

.project-card.active {
  opacity: 1;
  transform: scale(1.15);
  filter: blur(0);
  z-index: 2;
}

.project-card.prev,
.project-card.next {
  opacity: 0.7;
  transform: scale(0.95);
  filter: blur(1px);
}
.kits-slider {
  display: flex;
  gap: 10px; /* adjust 20–40px as needed */
}

/* ============================================================
   REEL CAROUSEL — VIDEO-STYLE (Split card: image left, text right)
   Applies to: Projects, Kits, Testimonials
   ============================================================ */

.reel-stage {
  position: relative;
  overflow: hidden;
  padding: 40px 0;
}
.reel-track {
  display: flex;
  gap: 28px;
  will-change: transform;
  align-items: center;
}
.reel-card {
  flex: 0 0 640px;
  min-width: 640px;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 8px 40px rgba(0,0,0,0.13);
  background: #fff;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity  0.55s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.55s ease;
  opacity: 0.55;
  transform: scale(0.92);
  cursor: pointer;
  user-select: none;
}
.reel-card.active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 16px 60px rgba(0,0,0,0.18);
  cursor: default;
}
.reel-card[aria-hidden="true"] { pointer-events: none; }
.reel-card-img {
  flex: 0 0 50%;
  width: 50%;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}
.reel-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-card-img.grad-robotics { background: linear-gradient(135deg,#1E4FD8,#4A7FFF); }
.reel-card-img.grad-neuro    { background: linear-gradient(135deg,#7c3aed,#a855f7); }
.reel-card-img.grad-iot      { background: linear-gradient(135deg,#059669,#10b981); }
.reel-card-img.grad-aero     { background: linear-gradient(135deg,#1a1a2e,#4A7FFF); }
.reel-card-img.grad-ai       { background: linear-gradient(135deg,#FF6B35,#FF9B35); }
.reel-card-img.grad-kit      { background: linear-gradient(135deg,#0d2d9e,#4A7FFF); }
.reel-card-img.grad-testi    { background: linear-gradient(135deg,#FF6D1F,#FFb347); }
.reel-card-img-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
}
.reel-card-body {
  flex: 1;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}
.reel-card-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 10px;
  background: rgba(255,109,31,0.1); display: inline-block;
  padding: 3px 12px; border-radius: 50px; width: fit-content;
}
.reel-card-body h3 {
  font-size: 1.35rem; font-weight: 700; font-family: var(--font-display);
  color: var(--text); margin-bottom: 12px; line-height: 1.3;
}
.reel-card-body p {
  font-size: 0.875rem; color: var(--text-light); line-height: 1.75; margin-bottom: 20px;
}
.reel-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--orange); font-size: 0.85rem; font-weight: 700;
  transition: gap 0.2s ease;
}
.reel-card-link:hover { gap: 10px; }
.reel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #333; cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.reel-btn:hover {
  background: var(--orange); color: #fff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 28px rgba(255,109,31,0.35);
}
.reel-btn-prev { left: 16px; }
.reel-btn-next { right: 16px; }
.reel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.reel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: none; cursor: pointer; padding: 0;
  transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}
.reel-dot.active { width: 24px; border-radius: 4px; background: var(--orange); }

/* Hide old slider DOM so only reel versions show */
.projects-slider-wrapper { padding: 0 !important; overflow: visible !important; }
.projects { overflow: hidden !important; }
#projectsSlider,#projectsPrev,#projectsNext,#projectsDots { display: none !important; }
.kits-slider-wrapper { overflow: visible !important; }
.kits { overflow: hidden !important; }
#kitsSlider,#kitsPrev,#kitsNext,#kitsDots { display: none !important; }
.testi-slider-wrapper { overflow: visible !important; }
.testimonials { overflow: hidden !important; }
#testiSlider,#testiPrev,#testiNext,#testiDots { display: none !important; }

/* Kits dark bg variants */
.kits .reel-btn { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.kits .reel-btn:hover { background: #fff; color: #1E4FD8; }
.kits .reel-dot { background: rgba(255,255,255,0.3); }
.kits .reel-dot.active { background: #fff; }
.kits .reel-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); }
.kits .reel-card-body { background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); }
.kits .reel-card-body h3 { color: #fff; }
.kits .reel-card-body p { color: rgba(255,255,255,0.75); }
.kits .reel-card-tag { background: rgba(255,255,255,0.15); color: #fff; }
.kits .reel-card-link { color: #FFb347; }

@media (max-width: 900px) {
  .reel-card { flex: 0 0 500px; min-width: 500px; height: 280px; }
  .reel-card-body h3 { font-size: 1.1rem; }
  .reel-btn-prev { left: 6px; }
  .reel-btn-next { right: 6px; }
}
@media (max-width: 600px) {
  .reel-card { flex: 0 0 82vw; min-width: 82vw; height: auto; flex-direction: column; border-radius: 18px; }
  .reel-card-img { flex: 0 0 180px; width: 100%; min-height: 180px; }
  .reel-card-body { padding: 20px 18px; }
  .reel-btn { width: 40px; height: 40px; font-size: 0.85rem; }
}

.projects-slider {
  display: none !important;
}

.slider-btn {
  display: none !important;
}

.slider-dots {
  display: none !important;
}/* ============================================================
   PREMIUM 3-CARD CAROUSEL — Projects & Testimonials
   Append this entire block to the END of css/style.css
   ============================================================ */

/* ── Stage & Track ─────────────────────────────────────────── */
.trio-stage {
  position: relative;
  width: 100%;
  padding: 48px 0 56px;
  overflow: hidden;
  /* perspective gives the 3-D depth illusion */
  perspective: 1200px;
}

.trio-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;               /* gap is handled by translateX offsets */
  position: relative;
  height: 340px;        /* fixed height so cards overlap cleanly */
}

/* ── Base card state ────────────────────────────────────────── */
.trio-card {
  position: absolute;
  width: 560px;
  height: 300px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 6px 32px rgba(0,0,0,0.10);
  user-select: none;
  will-change: transform, opacity, filter;
  cursor: pointer;

  /* smooth cinema easing */
  transition:
    transform 0.65s cubic-bezier(0.33,1,0.68,1),
    opacity   0.65s cubic-bezier(0.33,1,0.68,1),
    filter    0.65s cubic-bezier(0.33,1,0.68,1),
    box-shadow 0.65s cubic-bezier(0.33,1,0.68,1);
}

/* Hidden cards (anything beyond left/right) */
.trio-card[data-pos="hidden-left"],
.trio-card[data-pos="hidden-right"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--tx)) scale(0.70) translateZ(-120px);
}
.trio-card[data-pos="hidden-left"]  { --tx: -780px; }
.trio-card[data-pos="hidden-right"] { --tx:  780px; }

/* LEFT side card */
.trio-card[data-pos="left"] {
  transform: translateX(-440px) scale(0.82) translateZ(-80px) rotateY(6deg);
  opacity: 0.55;
  filter: blur(1.5px) brightness(0.88);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  z-index: 1;
  cursor: pointer;
}

/* RIGHT side card */
.trio-card[data-pos="right"] {
  transform: translateX(440px) scale(0.82) translateZ(-80px) rotateY(-6deg);
  opacity: 0.55;
  filter: blur(1.5px) brightness(0.88);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  z-index: 1;
  cursor: pointer;
}

/* CENTER — dominant focal card */
.trio-card[data-pos="center"] {
  transform: translateX(0) scale(1) translateZ(0px) rotateY(0deg);
  opacity: 1;
  filter: none;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.18),
    0 4px 20px rgba(255,109,31,0.12);
  z-index: 3;
  cursor: default;
}

/* Side cards show a content overlay so text doesn't compete with center */
.trio-card[data-pos="left"]  .trio-body-overlay,
.trio-card[data-pos="right"] .trio-body-overlay {
  opacity: 1;
}
.trio-card[data-pos="center"] .trio-body-overlay {
  opacity: 0;
}

/* ── Card inner layout ──────────────────────────────────────── */
.trio-img {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
}
.trio-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.trio-img-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 4.5rem;
}

/* gradient presets — matches existing colour language */
.trio-img.grad-robotics { background: linear-gradient(135deg,#1E4FD8,#4A7FFF); }
.trio-img.grad-neuro    { background: linear-gradient(135deg,#7c3aed,#a855f7); }
.trio-img.grad-iot      { background: linear-gradient(135deg,#059669,#10b981); }
.trio-img.grad-aero     { background: linear-gradient(135deg,#1a1a2e,#4A7FFF); }
.trio-img.grad-ai       { background: linear-gradient(135deg,#FF6B35,#FF9B35); }
.trio-img.grad-testi    { background: linear-gradient(135deg,#FF6D1F,#FFb347); }
.trio-img.grad-kit      { background: linear-gradient(135deg,#0d2d9e,#4A7FFF); }

.trio-body {
  flex: 1;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* frosted overlay on side cards dims the text area */
.trio-body-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(2px);
  transition: opacity 0.55s ease;
  pointer-events: none;
  z-index: 1;
}

.trio-tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--orange);
  background: rgba(255,109,31,0.10);
  display: inline-block; padding: 3px 12px;
  border-radius: 50px; width: fit-content;
  margin-bottom: 10px;
}
.trio-body h3 {
  font-size: 1.25rem; font-weight: 700;
  font-family: var(--font-display);
  color: var(--text); margin-bottom: 10px; line-height: 1.3;
}
.trio-body p {
  font-size: 0.84rem; color: var(--text-light);
  line-height: 1.75; margin-bottom: 18px;
}
.trio-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--orange); font-size: 0.83rem; font-weight: 700;
  transition: gap 0.2s ease;
  text-decoration: none;
}
.trio-link:hover { gap: 10px; }

/* ── Nav buttons ────────────────────────────────────────────── */
.trio-btn {
  position: absolute; top: 50%; z-index: 10;
  transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #444; cursor: pointer;
  transition: background 0.25s, color 0.25s,
              transform 0.25s, box-shadow 0.25s;
}
.trio-btn:hover {
  background: var(--orange); color: #fff;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 8px 28px rgba(255,109,31,0.38);
}
.trio-btn-prev { left: 12px; }
.trio-btn-next { right: 12px; }

/* ── Dot indicators ─────────────────────────────────────────── */
.trio-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 28px;
}
.trio-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: none;
  cursor: pointer; padding: 0;
  transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}
.trio-dot.active {
  width: 26px; border-radius: 4px; background: var(--orange);
}

/* ── TESTIMONIALS special styling ───────────────────────────── */
/* Testi cards stack image as a vertical strip on left */
.trio-stage--testi .trio-img {
  flex: 0 0 38%;
}
.trio-stage--testi .trio-body {
  padding: 24px 22px;
}
.trio-stage--testi .trio-body p {
  font-style: italic;
  font-size: 0.88rem;
}
/* star row */
.trio-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
/* author row inside testi card */
.trio-author {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 12px;
}
.trio-avatar {
  width: 40px; height: 40px; border-radius: 50%; min-width: 40px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.78rem;
  flex-shrink: 0;
}
.trio-author strong { display: block; font-size: 0.85rem; font-weight: 700; }
.trio-author span   { font-size: 0.76rem; color: var(--text-light); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .trio-card { width: 480px; height: 280px; }
  .trio-card[data-pos="left"]  { transform: translateX(-360px) scale(0.80) translateZ(-80px) rotateY(5deg); }
  .trio-card[data-pos="right"] { transform: translateX( 360px) scale(0.80) translateZ(-80px) rotateY(-5deg); }
  .trio-card[data-pos="hidden-left"]  { --tx: -680px; }
  .trio-card[data-pos="hidden-right"] { --tx:  680px; }
  .trio-track { height: 300px; }
}

@media (max-width: 820px) {
  .trio-stage { padding: 32px 0 44px; }
  .trio-track { height: 260px; }
  .trio-card { width: 360px; height: 240px; }
  .trio-card[data-pos="left"]  { transform: translateX(-280px) scale(0.78) translateZ(-60px) rotateY(4deg); }
  .trio-card[data-pos="right"] { transform: translateX( 280px) scale(0.78) translateZ(-60px) rotateY(-4deg); }
  .trio-card[data-pos="hidden-left"]  { --tx: -560px; }
  .trio-card[data-pos="hidden-right"] { --tx:  560px; }
  .trio-img-emoji { font-size: 3.2rem; }
  .trio-body h3  { font-size: 1.05rem; }
  .trio-body p   { font-size: 0.78rem; }
  .trio-btn      { width: 42px; height: 42px; font-size: 0.85rem; }
  .trio-btn-prev { left: 4px; }
  .trio-btn-next { right: 4px; }
}

@media (max-width: 560px) {
  .trio-track { height: auto; min-height: 360px; }
  .trio-card {
    width: 78vw; height: auto;
    flex-direction: column;
    border-radius: 18px;
  }
  .trio-card[data-pos="left"]  { transform: translateX(-62vw) scale(0.76) rotateY(3deg); }
  .trio-card[data-pos="right"] { transform: translateX( 62vw) scale(0.76) rotateY(-3deg); }
  .trio-card[data-pos="hidden-left"]  { --tx: -140vw; }
  .trio-card[data-pos="hidden-right"] { --tx:  140vw; }
  .trio-img { flex: 0 0 150px; width: 100%; }
  .trio-body { padding: 18px 16px; }
  .trio-stage { overflow: hidden; }
}